Merge remote-tracking branch 'origin' into kurt-circle

.github/workflows/build-test-publish-apps.yml

@@ -52,6 +52,7 @@ jobs:
           VERSION=$(date +'%-y.%-m.%-d') yarn bump-jsons
 
       # TODO: see if we need to inject updater nightly URL here https://dl.zoo.dev/releases/modeling-app/nightly/last_update.json
+      # TODO: see if we ned to add updater test URL here https://dl.zoo.dev/releases/modeling-app/updater-test/last_update.json
 
       - uses: actions/upload-artifact@v3
         with:
@@ -63,17 +64,6 @@ jobs:
       - id: export_version
         run: echo "version=`cat package.json | jq -r '.version'`" >> "$GITHUB_OUTPUT"
 
-      - name: Prepare electron-builder.yml file for updater test
-        if: ${{ env.CUT_RELEASE_PR == 'true' }}
-        run: |
-          yq -i '.publish[0].url = "https://dl.zoo.dev/releases/modeling-app/updater-test"' electron-builder.yml
-
-      - uses: actions/upload-artifact@v3
-        with:
-          name: prepared-files-updater-test
-          path: |
-            electron-builder.yml
-
 
   build-apps:
     needs: [prepare-files]
@@ -159,27 +149,7 @@ jobs:
 
       # TODO: add the 'Build for Mac TestFlight (nightly)' stage back
 
-      - uses: actions/download-artifact@v3
-        if: ${{ env.CUT_RELEASE_PR == 'true' }}
-        name: prepared-files-updater-test
-
-      - name: Copy updated electron-builder.yml file for updater test
-        if: ${{ env.CUT_RELEASE_PR == 'true' }}
-        run: |
-          ls -R prepared-files-updater-test
-          cp prepared-files-updater-test/electron-builder.yml electron-builder.yml
-
-      - name: Build the app (updater-test)
-        if: ${{ env.CUT_RELEASE_PR == 'true' }}
-        run: yarn electron-builder --config ${{ env.BUILD_RELEASE && '--publish always' || '' }}
-
-      - uses: actions/upload-artifact@v3
-        if: ${{ env.CUT_RELEASE_PR == 'true' }}
-        with:
-          name: updater-test-${{ matrix.os }}
-          path: |
-            out/Zoo*.*
-            out/latest*.yml
+      # TODO: add the updater tests back
 
 
   publish-apps-release:
@@ -275,6 +245,15 @@ jobs:
           parent: false
           destination: ${{ env.BUCKET_DIR }}
 
+      # TODO: remove workaround introduced in https://github.com/KittyCAD/modeling-app/issues/3817
+      - name: Upload release files to public bucket (test/electron-builder workaround)
+        uses: google-github-actions/upload-cloud-storage@v2.2.0
+        with:
+          path: out
+          glob: 'Zoo*'
+          parent: false
+          destination: '${{ env.BUCKET_DIR }}/test/electron-builder'
+
       - name: Upload update endpoint to public bucket
         uses: google-github-actions/upload-cloud-storage@v2.2.0
         with:
@@ -283,6 +262,15 @@ jobs:
           parent: false
           destination: ${{ env.BUCKET_DIR }}
 
+      # TODO: remove workaround introduced in https://github.com/KittyCAD/modeling-app/issues/3817
+      - name: Upload update endpoint to public bucket (test/electron-builder workaround)
+        uses: google-github-actions/upload-cloud-storage@v2.2.0
+        with:
+          path: out
+          glob: 'latest*'
+          parent: false
+          destination: '${{ env.BUCKET_DIR }}/test/electron-builder'
+
       - name: Upload download endpoint to public bucket
         uses: google-github-actions/upload-cloud-storage@v2.2.0
         with:

.github/workflows/build-test-web.yml

@@ -45,7 +45,7 @@ jobs:
       - run: yarn xstate:typegen
       - run: yarn tsc
       - name: Lint
-        run: yarn eslint --max-warnings 0 src e2e packages/codemirror-lsp-client
+        run: yarn eslint --max-warnings 0 src e2e
 
 
   check-typos:

.github/workflows/playwright.yml

@@ -34,7 +34,7 @@ jobs:
               - 'src/wasm-lib/**'
 
   playwright-chrome:
-    timeout-minutes: ${{ matrix.os == 'macos-14' && 60 || 50 }}
+    timeout-minutes: ${{ matrix.os == 'macos-14' && 60 || 40 }}
     strategy:
       fail-fast: false
       matrix:
@@ -232,7 +232,6 @@ jobs:
         exit 0
       env:
         CI: true
-        FAIL_ON_CONSOLE_ERRORS: true
         NODE_ENV: development
         VITE_KC_DEV_TOKEN: ${{ secrets.KITTYCAD_API_TOKEN_DEV }}
         VITE_KC_SKIP_AUTH: true
@@ -263,7 +262,7 @@ jobs:
       fail-fast: false
       matrix:
         os: [ubuntu-latest, windows-latest, macos-14]
-    timeout-minutes: 40
+    timeout-minutes: 60
     runs-on: ${{ matrix.os }}
     needs: check-rust-changes
     steps:
@@ -411,7 +410,6 @@ jobs:
         exit 0
       env:
         CI: true
-        FAIL_ON_CONSOLE_ERRORS: true
         NODE_ENV: development
         VITE_KC_DEV_TOKEN: ${{ secrets.KITTYCAD_API_TOKEN_DEV }}
         VITE_KC_SKIP_AUTH: true

docs/kcl/KNOWN-ISSUES.md

@@ -22,3 +22,8 @@ once fixed in engine will just start working here with no language changes.
 
 - **Chamfers**: Chamfers cannot intersect, you will get an error. Only simple
     chamfer cases work currently.
+
+    Sketching on the chamfered face does not currently work.
+
+- **Shell**: Shell sometimes does not work when arcs or fillets are involved.
+    We are tracking the engine side bug on this.

docs/kcl/angleToMatchLengthX.md

@@ -270,6 +270,26 @@ const extrusion = extrude(5, sketch001)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -479,6 +499,26 @@ const extrusion = extrude(5, sketch001)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/angleToMatchLengthY.md

@@ -274,6 +274,26 @@ const extrusion = extrude(5, sketch001)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -483,6 +503,26 @@ const extrusion = extrude(5, sketch001)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/angledLine.md

@@ -189,6 +189,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -398,6 +418,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -609,6 +649,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -818,6 +878,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/angledLineOfXLength.md

@@ -188,6 +188,26 @@ const extrusion = extrude(10, sketch001)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -397,6 +417,26 @@ const extrusion = extrude(10, sketch001)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -608,6 +648,26 @@ const extrusion = extrude(10, sketch001)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -817,6 +877,26 @@ const extrusion = extrude(10, sketch001)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/angledLineOfYLength.md

@@ -190,6 +190,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -399,6 +419,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -610,6 +650,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -819,6 +879,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/angledLineThatIntersects.md

@@ -282,6 +282,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -491,6 +511,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -702,6 +742,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -911,6 +971,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/angledLineToX.md

@@ -187,6 +187,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -396,6 +416,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -607,6 +647,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -816,6 +876,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/angledLineToY.md

@@ -187,6 +187,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -396,6 +416,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -607,6 +647,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -816,6 +876,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/arc.md

@@ -200,6 +200,26 @@ const exampleSketch = startSketchOn('XZ')
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -409,6 +429,26 @@ const exampleSketch = startSketchOn('XZ')
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -620,6 +660,26 @@ const exampleSketch = startSketchOn('XZ')
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -829,6 +889,26 @@ const exampleSketch = startSketchOn('XZ')
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/bezierCurve.md

@@ -193,6 +193,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -402,6 +422,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -613,6 +653,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],
@@ -822,6 +882,26 @@ const example = extrude(10, exampleSketch)
 	to: [number, number],
 	type: "TangentialArc",
 } |
+{
+	// arc's direction
+	ccw: bool,
+	// the arc's center
+	center: [number, number],
+	// The from point.
+	from: [number, number],
+	// the arc's radius
+	radius: number,
+	// The tag of the path.
+	tag: {
+	digest: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number],
+	end: number,
+	start: number,
+	value: string,
+},
+	// The to point.
+	to: [number, number],
+	type: "Circle",
+} |
 {
 	// The from point.
 	from: [number, number],

docs/kcl/index.md

@@ -19,7 +19,6 @@ layout: manual
 * [`angledLineToX`](kcl/angledLineToX)
 * [`angledLineToY`](kcl/angledLineToY)
 * [`arc`](kcl/arc)
-* [`arrayReduce`](kcl/arrayReduce)
 * [`asin`](kcl/asin)
 * [`assert`](kcl/assert)
 * [`assertEqual`](kcl/assertEqual)

docs/kcl/types.md

@@ -13,16 +13,14 @@ arrays can hold objects and vice versa.
 
 `true` or `false` work when defining values.
 
-## Constant declaration
+## Variable declaration
 
-Constants are defined with the `let` keyword like so:
+Variables are defined with the `let` keyword like so:
 
 ```
 let myBool = false
 ```
 
-Currently you cannot redeclare a constant.
-
 ## Array
 
 An array is defined with `[]` braces. What is inside the brackets can

e2e/playwright/basic-sketch.spec.ts

@@ -8,8 +8,8 @@ import {
   PERSIST_MODELING_CONTEXT,
 } from './test-utils'
 
-test.beforeEach(async ({ context, page }, testInfo) => {
-  await setup(context, page, testInfo)
+test.beforeEach(async ({ context, page }) => {
+  await setup(context, page)
 })
 
 test.afterEach(async ({ page }, testInfo) => {

e2e/playwright/can-create-sketches-on-all-planes-and-their-back-sides.spec.ts

@@ -3,8 +3,8 @@ import { getUtils, setup, tearDown } from './test-utils'
 import { EngineCommand } from 'lang/std/artifactGraph'
 import { uuidv4 } from 'lib/utils'
 
-test.beforeEach(async ({ context, page }, testInfo) => {
-  await setup(context, page, testInfo)
+test.beforeEach(async ({ context, page }) => {
+  await setup(context, page)
 })
 
 test.afterEach(async ({ page }, testInfo) => {

e2e/playwright/code-pane-and-errors.spec.ts

@@ -12,8 +12,8 @@ import { bracket } from 'lib/exampleKcl'
 import { TEST_CODE_LONG_WITH_ERROR_OUT_OF_VIEW } from './storageStates'
 import fsp from 'fs/promises'
 
-test.beforeEach(async ({ context, page }, testInfo) => {
-  await setup(context, page, testInfo)
+test.beforeEach(async ({ context, page }) => {
+  await setup(context, page)
 })
 
 test.afterEach(async ({ page }, testInfo) => {
@@ -65,8 +65,6 @@ const extrude001 = extrude(5, sketch001)`
   test('Opening and closing the code pane will consistently show error diagnostics', async ({
     page,
   }) => {
-    await page.goto('http://localhost:3000')
-
     const u = await getUtils(page)
 
     // Load the app with the working starter code
@@ -92,7 +90,7 @@ const extrude001 = extrude(5, sketch001)`
 
     // Delete a character to break the KCL
     await u.openKclCodePanel()
-    await page.getByText('thickness, bracketLeg1Sketch)').click()
+    await page.getByText('extrude(').click()
     await page.keyboard.press('Backspace')
 
     // Ensure that a badge appears on the button
@@ -103,7 +101,7 @@ const extrude001 = extrude(5, sketch001)`
 
     // error text on hover
     await page.hover('.cm-lint-marker-error')
-    await expect(page.locator('.cm-tooltip').first()).toBeVisible()
+    await expect(page.getByText('Unexpected token: |').first()).toBeVisible()
 
     // Close the code pane
     await codePaneButton.click()
@@ -126,7 +124,7 @@ const extrude001 = extrude(5, sketch001)`
 
     // error text on hover
     await page.hover('.cm-lint-marker-error')
-    await expect(page.locator('.cm-tooltip').first()).toBeVisible()
+    await expect(page.getByText('Unexpected token: |').first()).toBeVisible()
   })
 
   test('When error is not in view you can click the badge to scroll to it', async ({

e2e/playwright/command-bar-tests.spec.ts

@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
 import { getUtils, setup, tearDown } from './test-utils'
 import { KCL_DEFAULT_LENGTH } from 'lib/constants'
 
-test.beforeEach(async ({ context, page }, testInfo) => {
-  await setup(context, page, testInfo)
+test.beforeEach(async ({ context, page }) => {
+  await setup(context, page)
 })
 
 test.afterEach(async ({ page }, testInfo) => {

e2e/playwright/copilot-ghost-test.spec.ts

@@ -1,8 +1,8 @@
 import { test, expect } from '@playwright/test'
 import { getUtils, setup, tearDown } from './test-utils'
 
-test.beforeEach(async ({ context, page }, testInfo) => {
-  await setup(context, page, testInfo)
+test.beforeEach(async ({ context, page }) => {
+  await setup(context, page)
 })
 
 test.afterEach(async ({ page }, testInfo) => {

e2e/playwright/desktop-export.spec.ts

@@ -104,7 +104,7 @@ test(
             },
             { timeout: 15_000 }
           )
-          .toBe(482669)
+          .toBe(477481)
 
         // clean up output.gltf
         await fsp.rm('output.gltf')

e2e/playwright/editor-tests.spec.ts

@@ -2,8 +2,8 @@ import { test, expect } from '@playwright/test'
 import { uuidv4 } from 'lib/utils'
 import { getUtils, setup, tearDown } from './test-utils'
 
-test.beforeEach(async ({ context, page }, testInfo) => {
-  await setup(context, page, testInfo)
+test.beforeEach(async ({ context, page }) => {
+  await setup(context, page)
 })
 
 test.afterEach(async ({ page }, testInfo) => {
@@ -558,7 +558,7 @@ test.describe('Editor tests', () => {
     await page.keyboard.press('ArrowDown')
     await page.keyboard.press('Enter')
     await page.keyboard.type(`const extrusion = startSketchOn('XY')
-    |> circle([0, 0], dia/2, %)
+    |> circle({ center: [0, 0], radius: dia/2 }, %)
   |> hole(squareHole(length, width, height), %)
   |> extrude(height, %)`)
 

e2e/playwright/file-tree.spec.ts

@@ -1,18 +1,9 @@
 import { test, expect } from '@playwright/test'
 import * as fsp from 'fs/promises'
-import * as fs from 'fs'
-import {
-  executorInputPath,
-  getUtils,
-  setup,
-  setupElectron,
-  tearDown,
-} from './test-utils'
-import { join } from 'path'
-import { FILE_EXT } from 'lib/constants'
+import { getUtils, setup, setupElectron, tearDown } from './test-utils'
 
-test.beforeEach(async ({ context, page }, testInfo) => {
-  await setup(context, page, testInfo)
+test.beforeEach(async ({ context, page }) => {
+  await setup(context, page)
 })
 
 test.afterEach(async ({ page }, testInfo) => {
@@ -117,6 +108,7 @@ test.describe('when using the file tree to', () => {
     async ({ browser: _ }, testInfo) => {
       const { electronApp, page } = await setupElectron({
         testInfo,
+        folderSetupFn: async () => {},
       })
 
       const {
@@ -159,7 +151,6 @@ test.describe('when using the file tree to', () => {
         await selectFile(kcl1)
         await editorTextMatches(kclCube)
       })
-      await page.waitForTimeout(500)
 
       await test.step(`Postcondition: ${kcl2} still exists with the original content`, async () => {
         await selectFile(kcl2)
@@ -286,584 +277,3 @@ test.describe('when using the file tree to', () => {
     }
   )
 })
-
-test.describe('Renaming in the file tree', () => {
-  test(
-    'A file you have open',
-    { tag: '@electron' },
-    async ({ browser: _ }, testInfo) => {
-      const { electronApp, page, dir } = await setupElectron({
-        testInfo,
-        folderSetupFn: async (dir) => {
-          await fsp.mkdir(join(dir, 'Test Project'), { recursive: true })
-          await fsp.copyFile(
-            executorInputPath('basic_fillet_cube_end.kcl'),
-            join(dir, 'Test Project', 'main.kcl')
-          )
-          await fsp.copyFile(
-            executorInputPath('cylinder.kcl'),
-            join(dir, 'Test Project', 'fileToRename.kcl')
-          )
-        },
-      })
-      const u = await getUtils(page)
-      await page.setViewportSize({ width: 1200, height: 500 })
-      page.on('console', console.log)
-
-      // Constants and locators
-      const projectLink = page.getByText('Test Project')
-      const projectMenuButton = page.getByTestId('project-sidebar-toggle')
-      const checkUnRenamedFS = () => {
-        const filePath = join(dir, 'Test Project', 'fileToRename.kcl')
-        return fs.existsSync(filePath)
-      }
-      const newFileName = 'newFileName'
-      const checkRenamedFS = () => {
-        const filePath = join(dir, 'Test Project', `${newFileName}.kcl`)
-        return fs.existsSync(filePath)
-      }
-
-      const fileToRename = page
-        .getByRole('listitem')
-        .filter({ has: page.getByRole('button', { name: 'fileToRename.kcl' }) })
-      const renamedFile = page
-        .getByRole('listitem')
-        .filter({ has: page.getByRole('button', { name: 'newFileName.kcl' }) })
-      const renameMenuItem = page.getByRole('button', { name: 'Rename' })
-      const renameInput = page.getByPlaceholder('fileToRename.kcl')
-      const codeLocator = page.locator('.cm-content')
-
-      await test.step('Open project and file pane', async () => {
-        await expect(projectLink).toBeVisible()
-        await projectLink.click()
-        await expect(projectMenuButton).toBeVisible()
-        await expect(projectMenuButton).toContainText('main.kcl')
-
-        await u.openFilePanel()
-        await expect(fileToRename).toBeVisible()
-        expect(checkUnRenamedFS()).toBeTruthy()
-        expect(checkRenamedFS()).toBeFalsy()
-        await fileToRename.click()
-        await expect(projectMenuButton).toContainText('fileToRename.kcl')
-        await u.openKclCodePanel()
-        await expect(codeLocator).toContainText('circle(')
-        await u.closeKclCodePanel()
-      })
-
-      await test.step('Rename the file', async () => {
-        await fileToRename.click({ button: 'right' })
-        await renameMenuItem.click()
-        await expect(renameInput).toBeVisible()
-        await renameInput.fill(newFileName)
-        await page.keyboard.press('Enter')
-      })
-
-      await test.step('Verify the file is renamed', async () => {
-        await expect(fileToRename).not.toBeAttached()
-        await expect(renamedFile).toBeVisible()
-        expect(checkUnRenamedFS()).toBeFalsy()
-        expect(checkRenamedFS()).toBeTruthy()
-      })
-
-      await test.step('Verify we navigated', async () => {
-        await expect(projectMenuButton).toContainText(newFileName + FILE_EXT)
-        const url = page.url()
-        expect(url).toContain(newFileName)
-        await expect(projectMenuButton).not.toContainText('fileToRename.kcl')
-        await expect(projectMenuButton).not.toContainText('main.kcl')
-        expect(url).not.toContain('fileToRename.kcl')
-        expect(url).not.toContain('main.kcl')
-
-        await u.openKclCodePanel()
-        await expect(codeLocator).toContainText('circle(')
-      })
-
-      await electronApp.close()
-    }
-  )
-
-  test(
-    'A file you do not have open',
-    { tag: '@electron' },
-    async ({ browser: _ }, testInfo) => {
-      const { electronApp, page, dir } = await setupElectron({
-        testInfo,
-        folderSetupFn: async (dir) => {
-          await fsp.mkdir(join(dir, 'Test Project'), { recursive: true })
-          await fsp.copyFile(
-            executorInputPath('basic_fillet_cube_end.kcl'),
-            join(dir, 'Test Project', 'main.kcl')
-          )
-          await fsp.copyFile(
-            executorInputPath('cylinder.kcl'),
-            join(dir, 'Test Project', 'fileToRename.kcl')
-          )
-        },
-      })
-      const u = await getUtils(page)
-      await page.setViewportSize({ width: 1200, height: 500 })
-      page.on('console', console.log)
-
-      // Constants and locators
-      const newFileName = 'newFileName'
-      const checkUnRenamedFS = () => {
-        const filePath = join(dir, 'Test Project', 'fileToRename.kcl')
-        return fs.existsSync(filePath)
-      }
-      const checkRenamedFS = () => {
-        const filePath = join(dir, 'Test Project', `${newFileName}.kcl`)
-        return fs.existsSync(filePath)
-      }
-      const projectLink = page.getByText('Test Project')
-      const projectMenuButton = page.getByTestId('project-sidebar-toggle')
-      const fileToRename = page
-        .getByRole('listitem')
-        .filter({ has: page.getByRole('button', { name: 'fileToRename.kcl' }) })
-      const renamedFile = page.getByRole('listitem').filter({
-        has: page.getByRole('button', { name: newFileName + FILE_EXT }),
-      })
-      const renameMenuItem = page.getByRole('button', { name: 'Rename' })
-      const renameInput = page.getByPlaceholder('fileToRename.kcl')
-      const codeLocator = page.locator('.cm-content')
-
-      await test.step('Open project and file pane', async () => {
-        await expect(projectLink).toBeVisible()
-        await projectLink.click()
-        await expect(projectMenuButton).toBeVisible()
-        await expect(projectMenuButton).toContainText('main.kcl')
-
-        await u.openFilePanel()
-        await expect(fileToRename).toBeVisible()
-        expect(checkUnRenamedFS()).toBeTruthy()
-        expect(checkRenamedFS()).toBeFalsy()
-      })
-
-      await test.step('Rename the file', async () => {
-        await fileToRename.click({ button: 'right' })
-        await renameMenuItem.click()
-        await expect(renameInput).toBeVisible()
-        await renameInput.fill(newFileName)
-        await page.keyboard.press('Enter')
-      })
-
-      await test.step('Verify the file is renamed', async () => {
-        await expect(fileToRename).not.toBeAttached()
-        await expect(renamedFile).toBeVisible()
-        expect(checkUnRenamedFS()).toBeFalsy()
-        expect(checkRenamedFS()).toBeTruthy()
-      })
-
-      await test.step('Verify we have not navigated', async () => {
-        await expect(projectMenuButton).toContainText('main.kcl')
-        await expect(projectMenuButton).not.toContainText(
-          newFileName + FILE_EXT
-        )
-        await expect(projectMenuButton).not.toContainText('fileToRename.kcl')
-
-        const url = page.url()
-        expect(url).toContain('main.kcl')
-        expect(url).not.toContain(newFileName)
-        expect(url).not.toContain('fileToRename.kcl')
-
-        await u.openKclCodePanel()
-        await expect(codeLocator).toContainText('fillet(')
-      })
-
-      await electronApp.close()
-    }
-  )
-
-  test(
-    `A folder you're not inside`,
-    { tag: '@electron' },
-    async ({ browser: _ }, testInfo) => {
-      const { electronApp, page, dir } = await setupElectron({
-        testInfo,
-        folderSetupFn: async (dir) => {
-          await fsp.mkdir(join(dir, 'Test Project'), { recursive: true })
-          await fsp.mkdir(join(dir, 'Test Project', 'folderToRename'), {
-            recursive: true,
-          })
-          await fsp.copyFile(
-            executorInputPath('basic_fillet_cube_end.kcl'),
-            join(dir, 'Test Project', 'main.kcl')
-          )
-          await fsp.copyFile(
-            executorInputPath('cylinder.kcl'),
-            join(dir, 'Test Project', 'folderToRename', 'someFileWithin.kcl')
-          )
-        },
-      })
-
-      const u = await getUtils(page)
-      await page.setViewportSize({ width: 1200, height: 500 })
-      page.on('console', console.log)
-
-      // Constants and locators
-      const projectLink = page.getByText('Test Project')
-      const projectMenuButton = page.getByTestId('project-sidebar-toggle')
-      const folderToRename = page.getByRole('button', {
-        name: 'folderToRename',
-      })
-      const renamedFolder = page.getByRole('button', { name: 'newFolderName' })
-      const renameMenuItem = page.getByRole('button', { name: 'Rename' })
-      const originalFolderName = 'folderToRename'
-      const renameInput = page.getByPlaceholder(originalFolderName)
-      const newFolderName = 'newFolderName'
-      const checkUnRenamedFolderFS = () => {
-        const folderPath = join(dir, 'Test Project', originalFolderName)
-        return fs.existsSync(folderPath)
-      }
-      const checkRenamedFolderFS = () => {
-        const folderPath = join(dir, 'Test Project', newFolderName)
-        return fs.existsSync(folderPath)
-      }
-
-      await test.step('Open project and file pane', async () => {
-        await expect(projectLink).toBeVisible()
-        await projectLink.click()
-        await expect(projectMenuButton).toBeVisible()
-        await expect(projectMenuButton).toContainText('main.kcl')
-
-        const url = page.url()
-        expect(url).toContain('main.kcl')
-        expect(url).not.toContain('folderToRename')
-
-        await u.openFilePanel()
-        await expect(folderToRename).toBeVisible()
-        expect(checkUnRenamedFolderFS()).toBeTruthy()
-        expect(checkRenamedFolderFS()).toBeFalsy()
-      })
-
-      await test.step('Rename the folder', async () => {
-        await folderToRename.click({ button: 'right' })
-        await expect(renameMenuItem).toBeVisible()
-        await renameMenuItem.click()
-        await expect(renameInput).toBeVisible()
-        await renameInput.fill(newFolderName)
-        await page.keyboard.press('Enter')
-      })
-
-      await test.step('Verify the folder is renamed, and no navigation occurred', async () => {
-        const url = page.url()
-        expect(url).toContain('main.kcl')
-        expect(url).not.toContain('folderToRename')
-
-        await expect(projectMenuButton).toContainText('main.kcl')
-        await expect(renamedFolder).toBeVisible()
-        await expect(folderToRename).not.toBeAttached()
-        expect(checkUnRenamedFolderFS()).toBeFalsy()
-        expect(checkRenamedFolderFS()).toBeTruthy()
-      })
-
-      await electronApp.close()
-    }
-  )
-
-  test(
-    `A folder you are inside`,
-    { tag: '@electron' },
-    async ({ browser: _ }, testInfo) => {
-      const { electronApp, page, dir } = await setupElectron({
-        testInfo,
-        folderSetupFn: async (dir) => {
-          await fsp.mkdir(join(dir, 'Test Project'), { recursive: true })
-          await fsp.mkdir(join(dir, 'Test Project', 'folderToRename'), {
-            recursive: true,
-          })
-          await fsp.copyFile(
-            executorInputPath('basic_fillet_cube_end.kcl'),
-            join(dir, 'Test Project', 'main.kcl')
-          )
-          await fsp.copyFile(
-            executorInputPath('cylinder.kcl'),
-            join(dir, 'Test Project', 'folderToRename', 'someFileWithin.kcl')
-          )
-        },
-      })
-
-      const u = await getUtils(page)
-      await page.setViewportSize({ width: 1200, height: 500 })
-      page.on('console', console.log)
-
-      // Constants and locators
-      const projectLink = page.getByText('Test Project')
-      const projectMenuButton = page.getByTestId('project-sidebar-toggle')
-      const folderToRename = page.getByRole('button', {
-        name: 'folderToRename',
-      })
-      const renamedFolder = page.getByRole('button', { name: 'newFolderName' })
-      const fileWithinFolder = page.getByRole('listitem').filter({
-        has: page.getByRole('button', { name: 'someFileWithin.kcl' }),
-      })
-      const renameMenuItem = page.getByRole('button', { name: 'Rename' })
-      const originalFolderName = 'folderToRename'
-      const renameInput = page.getByPlaceholder(originalFolderName)
-      const newFolderName = 'newFolderName'
-      const checkUnRenamedFolderFS = () => {
-        const folderPath = join(dir, 'Test Project', originalFolderName)
-        return fs.existsSync(folderPath)
-      }
-      const checkRenamedFolderFS = () => {
-        const folderPath = join(dir, 'Test Project', newFolderName)
-        return fs.existsSync(folderPath)
-      }
-
-      await test.step('Open project and navigate into folder', async () => {
-        await expect(projectLink).toBeVisible()
-        await projectLink.click()
-        await expect(projectMenuButton).toBeVisible()
-        await expect(projectMenuButton).toContainText('main.kcl')
-
-        const url = page.url()
-        expect(url).toContain('main.kcl')
-        expect(url).not.toContain('folderToRename')
-
-        await u.openFilePanel()
-        await expect(folderToRename).toBeVisible()
-        await folderToRename.click()
-        await expect(fileWithinFolder).toBeVisible()
-        await fileWithinFolder.click()
-
-        await expect(projectMenuButton).toContainText('someFileWithin.kcl')
-        const newUrl = page.url()
-        expect(newUrl).toContain('folderToRename')
-        expect(newUrl).toContain('someFileWithin.kcl')
-        expect(newUrl).not.toContain('main.kcl')
-        expect(checkUnRenamedFolderFS()).toBeTruthy()
-        expect(checkRenamedFolderFS()).toBeFalsy()
-      })
-
-      await test.step('Rename the folder', async () => {
-        await page.waitForTimeout(60000)
-        await folderToRename.click({ button: 'right' })
-        await expect(renameMenuItem).toBeVisible()
-        await renameMenuItem.click()
-        await expect(renameInput).toBeVisible()
-        await renameInput.fill(newFolderName)
-        await page.keyboard.press('Enter')
-      })
-
-      await test.step('Verify the folder is renamed, and navigated to new path', async () => {
-        const urlSnippet = encodeURIComponent(
-          join(newFolderName, 'someFileWithin.kcl')
-        )
-        await page.waitForURL(new RegExp(urlSnippet))
-        await expect(projectMenuButton).toContainText('someFileWithin.kcl')
-        await expect(renamedFolder).toBeVisible()
-        await expect(folderToRename).not.toBeAttached()
-
-        // URL is synchronous, so we check the other stuff first
-        const url = page.url()
-        expect(url).not.toContain('main.kcl')
-        expect(url).toContain(newFolderName)
-        expect(url).toContain('someFileWithin.kcl')
-        expect(checkUnRenamedFolderFS()).toBeFalsy()
-        expect(checkRenamedFolderFS()).toBeTruthy()
-      })
-
-      await electronApp.close()
-    }
-  )
-})
-
-test.describe('Deleting items from the file pane', () => {
-  test(
-    `delete file when main.kcl exists, navigate to main.kcl`,
-    { tag: '@electron' },
-    async ({ browserName }, testInfo) => {
-      const { electronApp, page } = await setupElectron({
-        testInfo,
-        folderSetupFn: async (dir) => {
-          const testDir = join(dir, 'testProject')
-          await fsp.mkdir(testDir, { recursive: true })
-          await fsp.copyFile(
-            executorInputPath('cylinder.kcl'),
-            join(testDir, 'main.kcl')
-          )
-          await fsp.copyFile(
-            executorInputPath('basic_fillet_cube_end.kcl'),
-            join(testDir, 'fileToDelete.kcl')
-          )
-        },
-      })
-      const u = await getUtils(page)
-      await page.setViewportSize({ width: 1200, height: 500 })
-      page.on('console', console.log)
-
-      // Constants and locators
-      const projectCard = page.getByText('testProject')
-      const projectMenuButton = page.getByTestId('project-sidebar-toggle')
-      const fileToDelete = page
-        .getByRole('listitem')
-        .filter({ has: page.getByRole('button', { name: 'fileToDelete.kcl' }) })
-      const deleteMenuItem = page.getByRole('button', { name: 'Delete' })
-      const deleteConfirmation = page.getByTestId('delete-confirmation')
-
-      await test.step('Open project and navigate to fileToDelete.kcl', async () => {
-        await projectCard.click()
-        await u.waitForPageLoad()
-        await u.openFilePanel()
-
-        await fileToDelete.click()
-        await u.waitForPageLoad()
-        await u.openKclCodePanel()
-        await expect(u.codeLocator).toContainText('getOppositeEdge(thing)')
-        await u.closeKclCodePanel()
-      })
-
-      await test.step('Delete fileToDelete.kcl', async () => {
-        await fileToDelete.click({ button: 'right' })
-        await expect(deleteMenuItem).toBeVisible()
-        await deleteMenuItem.click()
-        await expect(deleteConfirmation).toBeVisible()
-        await deleteConfirmation.click()
-      })
-
-      await test.step('Check deletion and navigation', async () => {
-        await u.waitForPageLoad()
-        await expect(fileToDelete).not.toBeVisible()
-        await u.closeFilePanel()
-        await u.openKclCodePanel()
-        await expect(u.codeLocator).toContainText('circle(')
-        await expect(projectMenuButton).toContainText('main.kcl')
-      })
-
-      await electronApp.close()
-    }
-  )
-
-  test.fixme(
-    'TODO - delete file we have open when main.kcl does not exist',
-    async () => {}
-  )
-
-  test(
-    `Delete folder we are not in, don't navigate`,
-    { tag: '@electron' },
-    async ({ browserName }, testInfo) => {
-      const { electronApp, page } = await setupElectron({
-        testInfo,
-        folderSetupFn: async (dir) => {
-          await fsp.mkdir(join(dir, 'Test Project'), { recursive: true })
-          await fsp.mkdir(join(dir, 'Test Project', 'folderToDelete'), {
-            recursive: true,
-          })
-          await fsp.copyFile(
-            executorInputPath('basic_fillet_cube_end.kcl'),
-            join(dir, 'Test Project', 'main.kcl')
-          )
-          await fsp.copyFile(
-            executorInputPath('cylinder.kcl'),
-            join(dir, 'Test Project', 'folderToDelete', 'someFileWithin.kcl')
-          )
-        },
-      })
-      const u = await getUtils(page)
-      await page.setViewportSize({ width: 1200, height: 500 })
-      page.on('console', console.log)
-
-      // Constants and locators
-      const projectCard = page.getByText('Test Project')
-      const projectMenuButton = page.getByTestId('project-sidebar-toggle')
-      const folderToDelete = page.getByRole('button', {
-        name: 'folderToDelete',
-      })
-      const deleteMenuItem = page.getByRole('button', { name: 'Delete' })
-      const deleteConfirmation = page.getByTestId('delete-confirmation')
-
-      await test.step('Open project and open project pane', async () => {
-        await projectCard.click()
-        await u.waitForPageLoad()
-        await expect(projectMenuButton).toContainText('main.kcl')
-        await u.closeKclCodePanel()
-        await u.openFilePanel()
-      })
-
-      await test.step('Delete folderToDelete', async () => {
-        await folderToDelete.click({ button: 'right' })
-        await expect(deleteMenuItem).toBeVisible()
-        await deleteMenuItem.click()
-        await expect(deleteConfirmation).toBeVisible()
-        await deleteConfirmation.click()
-      })
-
-      await test.step('Check deletion and no navigation', async () => {
-        await expect(folderToDelete).not.toBeAttached()
-        await expect(projectMenuButton).toContainText('main.kcl')
-      })
-
-      await electronApp.close()
-    }
-  )
-
-  test(
-    `Delete folder we are in, navigate to main.kcl`,
-    { tag: '@electron' },
-    async ({ browserName }, testInfo) => {
-      const { electronApp, page } = await setupElectron({
-        testInfo,
-        folderSetupFn: async (dir) => {
-          await fsp.mkdir(join(dir, 'Test Project'), { recursive: true })
-          await fsp.mkdir(join(dir, 'Test Project', 'folderToDelete'), {
-            recursive: true,
-          })
-          await fsp.copyFile(
-            executorInputPath('basic_fillet_cube_end.kcl'),
-            join(dir, 'Test Project', 'main.kcl')
-          )
-          await fsp.copyFile(
-            executorInputPath('cylinder.kcl'),
-            join(dir, 'Test Project', 'folderToDelete', 'someFileWithin.kcl')
-          )
-        },
-      })
-      const u = await getUtils(page)
-      await page.setViewportSize({ width: 1200, height: 500 })
-      page.on('console', console.log)
-
-      // Constants and locators
-      const projectCard = page.getByText('Test Project')
-      const projectMenuButton = page.getByTestId('project-sidebar-toggle')
-      const folderToDelete = page.getByRole('button', {
-        name: 'folderToDelete',
-      })
-      const fileWithinFolder = page.getByRole('listitem').filter({
-        has: page.getByRole('button', { name: 'someFileWithin.kcl' }),
-      })
-      const deleteMenuItem = page.getByRole('button', { name: 'Delete' })
-      const deleteConfirmation = page.getByTestId('delete-confirmation')
-
-      await test.step('Open project and navigate into folderToDelete', async () => {
-        await projectCard.click()
-        await u.waitForPageLoad()
-        await expect(projectMenuButton).toContainText('main.kcl')
-        await u.closeKclCodePanel()
-        await u.openFilePanel()
-
-        await folderToDelete.click()
-        await expect(fileWithinFolder).toBeVisible()
-        await fileWithinFolder.click()
-        await expect(projectMenuButton).toContainText('someFileWithin.kcl')
-      })
-
-      await test.step('Delete folderToDelete', async () => {
-        await folderToDelete.click({ button: 'right' })
-        await expect(deleteMenuItem).toBeVisible()
-        await deleteMenuItem.click()
-        await expect(deleteConfirmation).toBeVisible()
-        await deleteConfirmation.click()
-      })
-
-      await test.step('Check deletion and navigation to main.kcl', async () => {
-        await expect(folderToDelete).not.toBeAttached()
-        await expect(fileWithinFolder).not.toBeAttached()
-        await expect(projectMenuButton).toContainText('main.kcl')
-      })
-
-      await electronApp.close()
-    }
-  )
-
-  test.fixme('TODO - delete folder we are in, with no main.kcl', async () => {})
-})

e2e/playwright/lib/console-error-whitelist.ts

@@ -1,270 +0,0 @@
-export const isErrorWhitelisted = (exception: Error) => {
-  // due to the way webkit/Google Chrome report errors, it was necessary
-  // to whitelist similar errors separately for each project
-  let whitelist: {
-    name: string
-    message: string
-    stack: string
-    foundInSpec: string
-    project: 'webkit' | 'Google Chrome'
-  }[] = [
-    {
-      name: '',
-      message: 'undefined',
-      stack: '',
-      foundInSpec: `e2e/playwright/sketch-tests.spec.ts Existing sketch with bad code delete user's code`,
-      project: 'Google Chrome',
-    },
-    {
-      name: '"{"kind"',
-      message:
-        '"engine","sourceRanges":[[0,0]],"msg":"Failed to get string from response from engine: `JsValue(undefined)`"}"',
-      stack: '',
-      foundInSpec: 'e2e/playwright/testing-settings.spec.ts',
-      project: 'Google Chrome',
-    },
-    {
-      name: '',
-      message: 'false',
-      stack: '',
-      foundInSpec: 'e2e/playwright/testing-segment-overlays.spec.ts',
-      project: 'Google Chrome',
-    },
-    {
-      name: '{"kind"',
-      // eslint-disable-next-line no-useless-escape
-      message: 'no connection to send on',
-      stack: '',
-      foundInSpec: 'e2e/playwright/various.spec.ts',
-      project: 'Google Chrome',
-    },
-    {
-      name: '',
-      message: 'sketchGroup not found',
-      stack: '',
-      foundInSpec:
-        'e2e/playwright/testing-selections.spec.ts Deselecting line tool should mean nothing happens on click',
-      project: 'Google Chrome',
-    },
-    {
-      name: 'engine error',
-      message:
-        '[{"error_code":"bad_request","message":"Cannot set the camera position with these values"}]',
-      stack: '',
-      foundInSpec:
-        'e2e/playwright/can-create-sketches-on-all-planes-and-their-back-sides.spec.ts XY',
-      project: 'Google Chrome',
-    },
-    {
-      name: '',
-      message: 'no connection to send on',
-      stack: '',
-      foundInSpec:
-        'e2e/playwright/can-create-sketches-on-all-planes-and-their-back-sides.spec.ts XY',
-      project: 'Google Chrome',
-    },
-    {
-      name: 'RangeError',
-      message: 'Position 160 is out of range for changeset of length 0',
-      stack: `RangeError: Position 160 is out of range for changeset of length 0
-    at _ChangeSet.mapPos (http://localhost:3000/node_modules/.vite/deps/chunk-3BHLKIA4.js?v=412eae63:756:13)
-    at findSharedChunks (http://localhost:3000/node_modules/.vite/deps/chunk-3BHLKIA4.js?v=412eae63:3045:49)
-    at _RangeSet.compare (http://localhost:3000/node_modules/.vite/deps/chunk-3BHLKIA4.js?v=412eae63:2840:24)
-    at findChangedDeco (http://localhost:3000/node_modules/.vite/deps/chunk-IZYF444B.js?v=412eae63:3320:12)
-    at DocView.update (http://localhost:3000/node_modules/.vite/deps/chunk-IZYF444B.js?v=412eae63:2774:20)
-    at _EditorView.update (http://localhost:3000/node_modules/.vite/deps/chunk-IZYF444B.js?v=412eae63:7056:30)
-    at DOMObserver.flush (http://localhost:3000/node_modules/.vite/deps/chunk-IZYF444B.js?v=412eae63:6621:17)
-    at MutationObserver.<anonymous> (http://localhost:3000/node_modules/.vite/deps/chunk-IZYF444B.js?v=412eae63:6322:14)`,
-      foundInSpec: 'e2e/playwright/editor-tests.spec.ts fold gutters work',
-      project: 'Google Chrome',
-    },
-    {
-      name: 'RangeError',
-      message: 'Selection points outside of document',
-      stack: `RangeError: Selection points outside of document
-    +     at checkSelection (http://localhost:3000/node_modules/.vite/deps/chunk-3BHLKIA4.js?v=412eae63:1453:13)
-    +     at new _Transaction (http://localhost:3000/node_modules/.vite/deps/chunk-3BHLKIA4.js?v=412eae63:2014:7)
-    +     at _Transaction.create (http://localhost:3000/node_modules/.vite/deps/chunk-3BHLKIA4.js?v=412eae63:2022:12)
-    +     at resolveTransaction (http://localhost:3000/node_modules/.vite/deps/chunk-3BHLKIA4.js?v=412eae63:2155:24)
-    +     at _EditorState.update (http://localhost:3000/node_modules/.vite/deps/chunk-3BHLKIA4.js?v=412eae63:2281:12)
-    +     at _EditorView.dispatch (http://localhost:3000/node_modules/.vite/deps/chunk-IZYF444B.js?v=412eae63:6988:148)
-    +     at EditorManager.selectRange (http://localhost:3000/src/editor/manager.ts:182:22)
-    +     at AST extrude (http://localhost:3000/src/machines/modelingMachine.ts:828:25)`,
-      foundInSpec: 'e2e/playwright/editor-tests.spec.ts',
-      project: 'Google Chrome',
-    },
-    {
-      name: 'Unhandled Promise Rejection',
-      message: "TypeError: null is not an object (evaluating 'sg.value')",
-      stack: `Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'sg.value')
-    at unknown (http://localhost:3000/src/clientSideScene/sceneEntities.ts:466:23)
-    at unknown (http://localhost:3000/src/clientSideScene/sceneEntities.ts:454:32)
-    at set up draft line without teardown (http://localhost:3000/src/machines/modelingMachine.ts:983:47)
-    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=0de2e74f:1877:24)
-    at handleAction (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=0de2e74f:1064:26)
-    at processBlock (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=0de2e74f:1087:36)
-    at map ([native code]:0:0)
-    at resolveActions (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=0de2e74f:1109:49)
-    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=0de2e74f:3639:37)
-    at provide (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=0de2e74f:1117:18)
-    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=0de2e74f:2452:30)
-    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=0de2e74f:1831:43)
-    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=0de2e74f:1659:17)
-    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=0de2e74f:1643:19)
-    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=0de2e74f:1829:33)
-    at unknown (http://localhost:3000/src/clientSideScene/sceneEntities.ts:263:19)`,
-      foundInSpec: `e2e/playwright/testing-camera-movement.spec.ts Zoom should be consistent when exiting or entering sketches`,
-      project: 'webkit',
-    },
-    {
-      name: 'Unhandled Promise Rejection',
-      message: 'false',
-      stack: `Unhandled Promise Rejection: false
-    at unknown (http://localhost:3000/src/clientSideScene/ClientSideSceneComp.tsx:455:78)`,
-      foundInSpec: `e2e/playwright/testing-segment-overlays.spec.ts line-[tagOutsideSketch]`,
-      project: 'webkit',
-    },
-    {
-      name: 'Unhandled Promise Rejection',
-      message: `TypeError: null is not an object (evaluating 'programMemory.get(variableDeclarationName).value')`,
-      stack: `    +  stack:Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'programMemory.get(variableDeclarationName).value')
-    +     at unknown (http://localhost:3000/src/machines/modelingMachine.ts:911:49)`,
-      foundInSpec: `e2e/playwright/can-create-sketches-on-all-planes-and-their-back-sides.spec.ts`,
-      project: 'webkit',
-    },
-    {
-      name: 'Unhandled Promise Rejection',
-      message: `null is not an object (evaluating 'programMemory.get(variableDeclarationName).value')`,
-      stack: `Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'programMemory.get(variableDeclarationName).value')
-    at unknown (http://localhost:3000/src/machines/modelingMachine.ts:911:49)`,
-      foundInSpec: `e2e/playwright/testing-camera-movement.spec.ts Zoom should be consistent when exiting or entering sketches`,
-      project: 'webkit',
-    },
-    {
-      name: 'TypeError',
-      message: `null is not an object (evaluating 'gl.getShaderPrecisionFormat(gl.VERTEX_SHADER, gl.HIGH_FLOAT).precision')`,
-      stack: `TypeError: null is not an object (evaluating 'gl.getShaderPrecisionFormat(gl.VERTEX_SHADER, gl.HIGH_FLOAT).precision')
-    at getMaxPrecision (http://localhost:3000/node_modules/.vite/deps/chunk-DEEFU7IG.js?v=d328572b:9557:71)
-    at WebGLCapabilities (http://localhost:3000/node_modules/.vite/deps/chunk-DEEFU7IG.js?v=d328572b:9570:39)
-    at initGLContext (http://localhost:3000/node_modules/.vite/deps/chunk-DEEFU7IG.js?v=d328572b:16993:43)
-    at WebGLRenderer (http://localhost:3000/node_modules/.vite/deps/chunk-DEEFU7IG.js?v=d328572b:17024:18)
-    at SceneInfra (http://localhost:3000/src/clientSideScene/sceneInfra.ts:185:38)
-    at module code (http://localhost:3000/src/lib/singletons.ts:14:41)`,
-      foundInSpec: `e2e/playwright/testing-segment-overlays.spec.ts angledLineToX`,
-      project: 'webkit',
-    },
-    {
-      name: 'Unhandled Promise Rejection',
-      message:
-        '{"kind":"engine","sourceRanges":[[0,0]],"msg":"Failed to get string from response from engine: `JsValue(undefined)`"}',
-      stack: `Unhandled Promise Rejection: {"kind":"engine","sourceRanges":[[0,0]],"msg":"Failed to get string from response from engine: \`JsValue(undefined)\`"}
-    at unknown (http://localhost:3000/src/lang/std/engineConnection.ts:1245:26)`,
-      foundInSpec:
-        'e2e/playwright/onboarding-tests.spec.ts Click through each onboarding step',
-      project: 'webkit',
-    },
-    {
-      name: 'Unhandled Promise Rejection',
-      message: 'undefined',
-      stack: '',
-      foundInSpec: `e2e/playwright/sketch-tests.spec.ts Existing sketch with bad code delete user's code`,
-      project: 'webkit',
-    },
-    {
-      name: 'Fetch API cannot load https',
-      message: '/api.dev.zoo.dev/logout due to access control checks.',
-      stack: `Fetch API cannot load https://api.dev.zoo.dev/logout due to access control checks.
-    at goToSignInPage (http://localhost:3000/src/components/SettingsAuthProvider.tsx:229:15)
-    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=d328572b:1877:24)
-    at handleAction (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=d328572b:1064:26)
-    at processBlock (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=d328572b:1087:36)
-    at map (:1:11)
-    at resolveActions (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=d328572b:1109:49)
-    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=d328572b:3639:37)
-    at provide (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=d328572b:1117:18)
-    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=d328572b:2452:30)
-    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=d328572b:1831:43)
-    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=d328572b:1659:17)
-    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=d328572b:1643:19)
-    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=d328572b:1829:33)
-    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=d328572b:2601:23)`,
-      foundInSpec:
-        'e2e/playwright/testing-selections.spec.ts Solids should be select and deletable',
-      project: 'webkit',
-    },
-    {
-      name: 'Unhandled Promise Rejection',
-      message: 'ReferenceError: Cannot access uninitialized variable.',
-      stack: `Unhandled Promise Rejection: ReferenceError: Cannot access uninitialized variable.
-    at setDiagnosticsForCurrentErrors (http://localhost:3000/src/lang/KclSingleton.ts:90:18)
-    at kclErrors (http://localhost:3000/src/lang/KclSingleton.ts:82:40)
-    at safeParse (http://localhost:3000/src/lang/KclSingleton.ts:150:9)
-    at unknown (http://localhost:3000/src/lang/KclSingleton.ts:113:32)`,
-      foundInSpec:
-        'e2e/playwright/testing-segment-overlays.spec.ts angledLineToX',
-      project: 'webkit',
-    },
-    {
-      name: 'Unhandled Promise Rejection',
-      message: 'sketchGroup not found',
-      stack: `Unhandled Promise Rejection: sketchGroup not found
-    at unknown (http://localhost:3000/src/machines/modelingMachine.ts:911:49)`,
-      foundInSpec:
-        'e2e/playwright/testing-selections.spec.ts Deselecting line tool should mean nothing happens on click',
-      project: 'webkit',
-    },
-    {
-      name: 'Unhandled Promise Rejection',
-      message:
-        'engine error: [{"error_code":"bad_request","message":"Cannot set the camera position with these values"}]',
-      stack:
-        'Unhandled Promise Rejection: engine error: [{"error_code":"bad_request","message":"Cannot set the camera position with these values"}]',
-      foundInSpec:
-        'e2e/playwright/testing-camera-movement.spec.ts Zoom should be consistent when exiting or entering sketches',
-      project: 'webkit',
-    },
-    {
-      name: 'SecurityError',
-      stack: `SecurityError:  Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
-     at <anonymous>:13:5
-     at <anonymous>:18:5
-     at <anonymous>:19:7`,
-      message: `Failed to read the 'localStorage' property from 'Window': Access is denied for this document.`,
-      project: 'Google Chrome',
-      foundInSpec: 'e2e/playwright/basic-sketch.spec.ts',
-    },
-    {
-      name: '  - internal_engine',
-      stack: `
-`,
-      message: `Nothing to export`,
-      project: 'Google Chrome',
-      foundInSpec: 'e2e/playwright/regression-tests.spec.ts',
-    },
-    {
-      name: 'SyntaxError',
-      stack: `SyntaxError: Unexpected end of JSON input
-    at crossPlatformFetch (http://localhost:3000/src/lib/crossPlatformFetch.ts:34:31)
-    at async sendTelemetry (http://localhost:3000/src/lib/textToCad.ts:179:3)`,
-      message: `Unexpected end of JSON input`,
-      project: 'Google Chrome',
-      foundInSpec: 'e2e/playwright/text-to-cad-tests.spec.ts',
-    },
-    {
-      name: '{"kind"',
-      stack: ``,
-      message: `engine","sourceRanges":[[0,0]],"msg":"Failed to wait for promise from engine: JsValue(\\"Force interrupt, executionIsStale, new AST requested\\")"}`,
-      project: 'Google Chrome',
-      foundInSpec: 'e2e/playwright/testing-settings.spec.ts',
-    },
-  ]
-
-  const cleanString = (str: string) => str.replace(/[`"]/g, '')
-  const foundItem = whitelist.find(
-    (item) =>
-      cleanString(exception.name) === cleanString(item.name) &&
-      cleanString(exception.message).includes(cleanString(item.message))
-  )
-
-  return foundItem !== undefined
-}

e2e/playwright/machines.spec.ts

@@ -38,7 +38,7 @@ test(
     await expect(page.getByText(notFoundText).first()).not.toBeVisible()
 
     // Find the make button
-    const makeButton = page.getByRole('button', { name: 'Make part' })
+    const makeButton = page.getByRole('button', { name: 'Make' })
     // Make sure the button is visible but disabled
     await expect(makeButton).toBeVisible()
     await expect(makeButton).toBeDisabled()

e2e/playwright/projects.spec.ts

@@ -12,6 +12,7 @@ import {
 import fsp from 'fs/promises'
 import fs from 'fs'
 import { join } from 'path'
+import { FILE_EXT } from 'lib/constants'
 
 test.afterEach(async ({ page }, testInfo) => {
   await tearDown(page, testInfo)
@@ -203,7 +204,7 @@ test.describe('Can export from electron app', () => {
               },
               { timeout: 15_000 }
             )
-            .toBe(482669)
+            .toBe(477481)
 
           // clean up output.gltf
           await fsp.rm('output.gltf')
@@ -1370,6 +1371,455 @@ test(
   }
 )
 
+test.describe('Renaming in the file tree', () => {
+  test(
+    'A file you have open',
+    { tag: '@electron' },
+    async ({ browser: _ }, testInfo) => {
+      const { electronApp, page, dir } = await setupElectron({
+        testInfo,
+        folderSetupFn: async (dir) => {
+          await fsp.mkdir(join(dir, 'Test Project'), { recursive: true })
+          await fsp.copyFile(
+            executorInputPath('basic_fillet_cube_end.kcl'),
+            join(dir, 'Test Project', 'main.kcl')
+          )
+          await fsp.copyFile(
+            executorInputPath('cylinder.kcl'),
+            join(dir, 'Test Project', 'fileToRename.kcl')
+          )
+        },
+      })
+      const u = await getUtils(page)
+      await page.setViewportSize({ width: 1200, height: 500 })
+      page.on('console', console.log)
+
+      // Constants and locators
+      const projectLink = page.getByText('Test Project')
+      const projectMenuButton = page.getByTestId('project-sidebar-toggle')
+      const checkUnRenamedFS = () => {
+        const filePath = join(dir, 'Test Project', 'fileToRename.kcl')
+        return fs.existsSync(filePath)
+      }
+      const newFileName = 'newFileName'
+      const checkRenamedFS = () => {
+        const filePath = join(dir, 'Test Project', `${newFileName}.kcl`)
+        return fs.existsSync(filePath)
+      }
+
+      const fileToRename = page
+        .getByRole('listitem')
+        .filter({ has: page.getByRole('button', { name: 'fileToRename.kcl' }) })
+      const renamedFile = page
+        .getByRole('listitem')
+        .filter({ has: page.getByRole('button', { name: 'newFileName.kcl' }) })
+      const renameMenuItem = page.getByRole('button', { name: 'Rename' })
+      const renameInput = page.getByPlaceholder('fileToRename.kcl')
+      const codeLocator = page.locator('.cm-content')
+
+      await test.step('Open project and file pane', async () => {
+        await expect(projectLink).toBeVisible()
+        await projectLink.click()
+        await expect(projectMenuButton).toBeVisible()
+        await expect(projectMenuButton).toContainText('main.kcl')
+
+        await u.openFilePanel()
+        await expect(fileToRename).toBeVisible()
+        expect(checkUnRenamedFS()).toBeTruthy()
+        expect(checkRenamedFS()).toBeFalsy()
+        await fileToRename.click()
+        await expect(projectMenuButton).toContainText('fileToRename.kcl')
+        await u.openKclCodePanel()
+        await expect(codeLocator).toContainText('circle(')
+        await u.closeKclCodePanel()
+      })
+
+      await test.step('Rename the file', async () => {
+        await fileToRename.click({ button: 'right' })
+        await renameMenuItem.click()
+        await expect(renameInput).toBeVisible()
+        await renameInput.fill(newFileName)
+        await page.keyboard.press('Enter')
+      })
+
+      await test.step('Verify the file is renamed', async () => {
+        await expect(fileToRename).not.toBeAttached()
+        await expect(renamedFile).toBeVisible()
+        expect(checkUnRenamedFS()).toBeFalsy()
+        expect(checkRenamedFS()).toBeTruthy()
+      })
+
+      await test.step('Verify we navigated', async () => {
+        await expect(projectMenuButton).toContainText(newFileName + FILE_EXT)
+        const url = page.url()
+        expect(url).toContain(newFileName)
+        await expect(projectMenuButton).not.toContainText('fileToRename.kcl')
+        await expect(projectMenuButton).not.toContainText('main.kcl')
+        expect(url).not.toContain('fileToRename.kcl')
+        expect(url).not.toContain('main.kcl')
+
+        await u.openKclCodePanel()
+        await expect(codeLocator).toContainText('circle(')
+      })
+
+      await electronApp.close()
+    }
+  )
+
+  test(
+    'A file you do not have open',
+    { tag: '@electron' },
+    async ({ browser: _ }, testInfo) => {
+      const { electronApp, page, dir } = await setupElectron({
+        testInfo,
+        folderSetupFn: async (dir) => {
+          await fsp.mkdir(join(dir, 'Test Project'), { recursive: true })
+          await fsp.copyFile(
+            executorInputPath('basic_fillet_cube_end.kcl'),
+            join(dir, 'Test Project', 'main.kcl')
+          )
+          await fsp.copyFile(
+            executorInputPath('cylinder.kcl'),
+            join(dir, 'Test Project', 'fileToRename.kcl')
+          )
+        },
+      })
+      const u = await getUtils(page)
+      await page.setViewportSize({ width: 1200, height: 500 })
+      page.on('console', console.log)
+
+      // Constants and locators
+      const newFileName = 'newFileName'
+      const checkUnRenamedFS = () => {
+        const filePath = join(dir, 'Test Project', 'fileToRename.kcl')
+        return fs.existsSync(filePath)
+      }
+      const checkRenamedFS = () => {
+        const filePath = join(dir, 'Test Project', `${newFileName}.kcl`)
+        return fs.existsSync(filePath)
+      }
+      const projectLink = page.getByText('Test Project')
+      const projectMenuButton = page.getByTestId('project-sidebar-toggle')
+      const fileToRename = page
+        .getByRole('listitem')
+        .filter({ has: page.getByRole('button', { name: 'fileToRename.kcl' }) })
+      const renamedFile = page.getByRole('listitem').filter({
+        has: page.getByRole('button', { name: newFileName + FILE_EXT }),
+      })
+      const renameMenuItem = page.getByRole('button', { name: 'Rename' })
+      const renameInput = page.getByPlaceholder('fileToRename.kcl')
+      const codeLocator = page.locator('.cm-content')
+
+      await test.step('Open project and file pane', async () => {
+        await expect(projectLink).toBeVisible()
+        await projectLink.click()
+        await expect(projectMenuButton).toBeVisible()
+        await expect(projectMenuButton).toContainText('main.kcl')
+
+        await u.openFilePanel()
+        await expect(fileToRename).toBeVisible()
+        expect(checkUnRenamedFS()).toBeTruthy()
+        expect(checkRenamedFS()).toBeFalsy()
+      })
+
+      await test.step('Rename the file', async () => {
+        await fileToRename.click({ button: 'right' })
+        await renameMenuItem.click()
+        await expect(renameInput).toBeVisible()
+        await renameInput.fill(newFileName)
+        await page.keyboard.press('Enter')
+      })
+
+      await test.step('Verify the file is renamed', async () => {
+        await expect(fileToRename).not.toBeAttached()
+        await expect(renamedFile).toBeVisible()
+        expect(checkUnRenamedFS()).toBeFalsy()
+        expect(checkRenamedFS()).toBeTruthy()
+      })
+
+      await test.step('Verify we have not navigated', async () => {
+        await expect(projectMenuButton).toContainText('main.kcl')
+        await expect(projectMenuButton).not.toContainText(
+          newFileName + FILE_EXT
+        )
+        await expect(projectMenuButton).not.toContainText('fileToRename.kcl')
+
+        const url = page.url()
+        expect(url).toContain('main.kcl')
+        expect(url).not.toContain(newFileName)
+        expect(url).not.toContain('fileToRename.kcl')
+
+        await u.openKclCodePanel()
+        await expect(codeLocator).toContainText('fillet(')
+      })
+
+      await electronApp.close()
+    }
+  )
+
+  test(
+    `A folder you're not inside`,
+    { tag: '@electron' },
+    async ({ browser: _ }, testInfo) => {
+      const { electronApp, page, dir } = await setupElectron({
+        testInfo,
+        folderSetupFn: async (dir) => {
+          await fsp.mkdir(join(dir, 'Test Project'), { recursive: true })
+          await fsp.mkdir(join(dir, 'Test Project', 'folderToRename'), {
+            recursive: true,
+          })
+          await fsp.copyFile(
+            executorInputPath('basic_fillet_cube_end.kcl'),
+            join(dir, 'Test Project', 'main.kcl')
+          )
+          await fsp.copyFile(
+            executorInputPath('cylinder.kcl'),
+            join(dir, 'Test Project', 'folderToRename', 'someFileWithin.kcl')
+          )
+        },
+      })
+
+      const u = await getUtils(page)
+      await page.setViewportSize({ width: 1200, height: 500 })
+      page.on('console', console.log)
+
+      // Constants and locators
+      const projectLink = page.getByText('Test Project')
+      const projectMenuButton = page.getByTestId('project-sidebar-toggle')
+      const folderToRename = page.getByRole('button', {
+        name: 'folderToRename',
+      })
+      const renamedFolder = page.getByRole('button', { name: 'newFolderName' })
+      const renameMenuItem = page.getByRole('button', { name: 'Rename' })
+      const originalFolderName = 'folderToRename'
+      const renameInput = page.getByPlaceholder(originalFolderName)
+      const newFolderName = 'newFolderName'
+      const checkUnRenamedFolderFS = () => {
+        const folderPath = join(dir, 'Test Project', originalFolderName)
+        return fs.existsSync(folderPath)
+      }
+      const checkRenamedFolderFS = () => {
+        const folderPath = join(dir, 'Test Project', newFolderName)
+        return fs.existsSync(folderPath)
+      }
+
+      await test.step('Open project and file pane', async () => {
+        await expect(projectLink).toBeVisible()
+        await projectLink.click()
+        await expect(projectMenuButton).toBeVisible()
+        await expect(projectMenuButton).toContainText('main.kcl')
+
+        const url = page.url()
+        expect(url).toContain('main.kcl')
+        expect(url).not.toContain('folderToRename')
+
+        await u.openFilePanel()
+        await expect(folderToRename).toBeVisible()
+        expect(checkUnRenamedFolderFS()).toBeTruthy()
+        expect(checkRenamedFolderFS()).toBeFalsy()
+      })
+
+      await test.step('Rename the folder', async () => {
+        await folderToRename.click({ button: 'right' })
+        await expect(renameMenuItem).toBeVisible()
+        await renameMenuItem.click()
+        await expect(renameInput).toBeVisible()
+        await renameInput.fill(newFolderName)
+        await page.keyboard.press('Enter')
+      })
+
+      await test.step('Verify the folder is renamed, and no navigation occurred', async () => {
+        const url = page.url()
+        expect(url).toContain('main.kcl')
+        expect(url).not.toContain('folderToRename')
+
+        await expect(projectMenuButton).toContainText('main.kcl')
+        await expect(renamedFolder).toBeVisible()
+        await expect(folderToRename).not.toBeAttached()
+        expect(checkUnRenamedFolderFS()).toBeFalsy()
+        expect(checkRenamedFolderFS()).toBeTruthy()
+      })
+
+      await electronApp.close()
+    }
+  )
+
+  test(
+    `A folder you are inside`,
+    { tag: '@electron' },
+    async ({ browser: _ }, testInfo) => {
+      const { electronApp, page, dir } = await setupElectron({
+        testInfo,
+        folderSetupFn: async (dir) => {
+          await fsp.mkdir(join(dir, 'Test Project'), { recursive: true })
+          await fsp.mkdir(join(dir, 'Test Project', 'folderToRename'), {
+            recursive: true,
+          })
+          await fsp.copyFile(
+            executorInputPath('basic_fillet_cube_end.kcl'),
+            join(dir, 'Test Project', 'main.kcl')
+          )
+          await fsp.copyFile(
+            executorInputPath('cylinder.kcl'),
+            join(dir, 'Test Project', 'folderToRename', 'someFileWithin.kcl')
+          )
+        },
+      })
+
+      const u = await getUtils(page)
+      await page.setViewportSize({ width: 1200, height: 500 })
+      page.on('console', console.log)
+
+      // Constants and locators
+      const projectLink = page.getByText('Test Project')
+      const projectMenuButton = page.getByTestId('project-sidebar-toggle')
+      const folderToRename = page.getByRole('button', {
+        name: 'folderToRename',
+      })
+      const renamedFolder = page.getByRole('button', { name: 'newFolderName' })
+      const fileWithinFolder = page.getByRole('listitem').filter({
+        has: page.getByRole('button', { name: 'someFileWithin.kcl' }),
+      })
+      const renameMenuItem = page.getByRole('button', { name: 'Rename' })
+      const originalFolderName = 'folderToRename'
+      const renameInput = page.getByPlaceholder(originalFolderName)
+      const newFolderName = 'newFolderName'
+      const checkUnRenamedFolderFS = () => {
+        const folderPath = join(dir, 'Test Project', originalFolderName)
+        return fs.existsSync(folderPath)
+      }
+      const checkRenamedFolderFS = () => {
+        const folderPath = join(dir, 'Test Project', newFolderName)
+        return fs.existsSync(folderPath)
+      }
+
+      await test.step('Open project and navigate into folder', async () => {
+        await expect(projectLink).toBeVisible()
+        await projectLink.click()
+        await expect(projectMenuButton).toBeVisible()
+        await expect(projectMenuButton).toContainText('main.kcl')
+
+        const url = page.url()
+        expect(url).toContain('main.kcl')
+        expect(url).not.toContain('folderToRename')
+
+        await u.openFilePanel()
+        await expect(folderToRename).toBeVisible()
+        await folderToRename.click()
+        await expect(fileWithinFolder).toBeVisible()
+        await fileWithinFolder.click()
+
+        await expect(projectMenuButton).toContainText('someFileWithin.kcl')
+        const newUrl = page.url()
+        expect(newUrl).toContain('folderToRename')
+        expect(newUrl).toContain('someFileWithin.kcl')
+        expect(newUrl).not.toContain('main.kcl')
+        expect(checkUnRenamedFolderFS()).toBeTruthy()
+        expect(checkRenamedFolderFS()).toBeFalsy()
+      })
+
+      await test.step('Rename the folder', async () => {
+        await page.waitForTimeout(2000)
+        await folderToRename.click({ button: 'right' })
+        await expect(renameMenuItem).toBeVisible()
+        await renameMenuItem.click()
+        await expect(renameInput).toBeVisible()
+        await renameInput.fill(newFolderName)
+        await page.keyboard.press('Enter')
+      })
+
+      await test.step('Verify the folder is renamed, and navigated to new path', async () => {
+        const urlSnippet = encodeURIComponent(
+          join(newFolderName, 'someFileWithin.kcl')
+        )
+        await page.waitForURL(new RegExp(urlSnippet))
+        await expect(projectMenuButton).toContainText('someFileWithin.kcl')
+        await expect(renamedFolder).toBeVisible()
+        await expect(folderToRename).not.toBeAttached()
+
+        // URL is synchronous, so we check the other stuff first
+        const url = page.url()
+        expect(url).not.toContain('main.kcl')
+        expect(url).toContain(newFolderName)
+        expect(url).toContain('someFileWithin.kcl')
+        expect(checkUnRenamedFolderFS()).toBeFalsy()
+        expect(checkRenamedFolderFS()).toBeTruthy()
+      })
+
+      await electronApp.close()
+    }
+  )
+})
+
+test.describe('Deleting files from the file pane', () => {
+  test(
+    `when main.kcl exists, navigate to main.kcl`,
+    { tag: '@electron' },
+    async ({ browserName }, testInfo) => {
+      const { electronApp, page } = await setupElectron({
+        testInfo,
+        folderSetupFn: async (dir) => {
+          const testDir = join(dir, 'testProject')
+          await fsp.mkdir(testDir, { recursive: true })
+          await fsp.copyFile(
+            executorInputPath('cylinder.kcl'),
+            join(testDir, 'main.kcl')
+          )
+          await fsp.copyFile(
+            executorInputPath('basic_fillet_cube_end.kcl'),
+            join(testDir, 'fileToDelete.kcl')
+          )
+        },
+      })
+      const u = await getUtils(page)
+      await page.setViewportSize({ width: 1200, height: 500 })
+      page.on('console', console.log)
+
+      // Constants and locators
+      const projectCard = page.getByText('testProject')
+      const projectMenuButton = page.getByTestId('project-sidebar-toggle')
+      const fileToDelete = page
+        .getByRole('listitem')
+        .filter({ has: page.getByRole('button', { name: 'fileToDelete.kcl' }) })
+      const deleteMenuItem = page.getByRole('button', { name: 'Delete' })
+      const deleteConfirmation = page.getByTestId('delete-confirmation')
+
+      await test.step('Open project and navigate to fileToDelete.kcl', async () => {
+        await projectCard.click()
+        await u.waitForPageLoad()
+        await u.openFilePanel()
+
+        await fileToDelete.click()
+        await u.waitForPageLoad()
+        await u.openKclCodePanel()
+        await expect(u.codeLocator).toContainText('getOppositeEdge(thing)')
+        await u.closeKclCodePanel()
+      })
+
+      await test.step('Delete fileToDelete.kcl', async () => {
+        await fileToDelete.click({ button: 'right' })
+        await expect(deleteMenuItem).toBeVisible()
+        await deleteMenuItem.click()
+        await expect(deleteConfirmation).toBeVisible()
+        await deleteConfirmation.click()
+      })
+
+      await test.step('Check deletion and navigation', async () => {
+        await u.waitForPageLoad()
+        await expect(fileToDelete).not.toBeVisible()
+        await u.closeFilePanel()
+        await u.openKclCodePanel()
+        await expect(u.codeLocator).toContainText('circle(')
+        await expect(projectMenuButton).toContainText('main.kcl')
+      })
+
+      await electronApp.close()
+    }
+  )
+
+  test.fixme('TODO - when main.kcl does not exist', async () => {})
+})
+
 test(
   'Original project name persist after onboarding',
   { tag: '@electron' },

e2e/playwright/regression-tests.spec.ts

@@ -11,8 +11,8 @@ import {
 import { TEST_CODE_TRIGGER_ENGINE_EXPORT_ERROR } from './storageStates'
 import { bracket } from 'lib/exampleKcl'
 
-test.beforeEach(async ({ context, page }, testInfo) => {
-  await setup(context, page, testInfo)
+test.beforeEach(async ({ context, page }) => {
+  await setup(context, page)
 })
 
 test.afterEach(async ({ page }, testInfo) => {
@@ -346,7 +346,10 @@ const sketch001 = startSketchAt([-0, -0])
     // Find the toast.
     // Look out for the toast message
     const exportingToastMessage = page.getByText(`Exporting...`)
+    await expect(exportingToastMessage).toBeVisible()
+
     const errorToastMessage = page.getByText(`Error while exporting`)
+    await expect(errorToastMessage).toBeVisible()
 
     const engineErrorToastMessage = page.getByText(`Nothing to export`)
     await expect(engineErrorToastMessage).toBeVisible()

e2e/playwright/sketch-tests.spec.ts

@@ -9,8 +9,8 @@ import {
 } from './test-utils'
 import { uuidv4, roundOff } from 'lib/utils'
 
-test.beforeEach(async ({ context, page }, testInfo) => {
-  await setup(context, page, testInfo)
+test.beforeEach(async ({ context, page }) => {
+  await setup(context, page)
 })
 
 test.afterEach(async ({ page }, testInfo) => {
@@ -40,7 +40,7 @@ test.describe('Sketch tests', () => {
   const screwRadius = 3
   const wireRadius = 2
   const wireOffset = 0.5
-
+  
   const screwHole = startSketchOn('XY')
     ${startProfileAt1}
     |> arc({
@@ -48,7 +48,7 @@ test.describe('Sketch tests', () => {
           angle_start: 0,
           angle_end: 360
         }, %)
-
+  
   const part001 = startSketchOn('XY')
     ${startProfileAt2}
     |> xLine(width * .5, %)
@@ -57,7 +57,7 @@ test.describe('Sketch tests', () => {
     |> close(%)
     |> hole(screwHole, %)
     |> extrude(thickness, %)
-
+  
   const part002 = startSketchOn('-XZ')
     ${startProfileAt3}
     |> xLine(width / 4, %)
@@ -149,14 +149,16 @@ test.describe('Sketch tests', () => {
     await page.getByRole('button', { name: 'line Line', exact: true }).click()
     await page.waitForTimeout(100)
 
-    await page.mouse.click(700, 200)
+    await expect(async () => {
+      await page.mouse.click(700, 200)
 
-    await expect.poll(u.normalisedEditorCode)
-      .toBe(`const sketch001 = startSketchOn('XZ')
+      await expect.poll(u.normalisedEditorCode, { timeout: 1000 })
+        .toBe(`const sketch001 = startSketchOn('XZ')
   |> startProfileAt([12.34, -12.34], %)
   |> line([-12.34, 12.34], %)
 
 `)
+    }).toPass({ timeout: 40_000, intervals: [1_000] })
   })
   test('Can exit selection of face', async ({ page }) => {
     // Load the app with the code panes
@@ -344,6 +346,92 @@ test.describe('Sketch tests', () => {
     })
   })
 
+  test('Can edit a circle center and radius by dragging its handles', async ({
+    page,
+  }) => {
+    const u = await getUtils(page)
+    await page.addInitScript(async () => {
+      localStorage.setItem(
+        'persistCode',
+        `const sketch001 = startSketchOn('XZ')
+  |> circle({ center: [4.61, -5.01], radius: 8 }, %)`
+      )
+    })
+
+    await page.setViewportSize({ width: 1200, height: 500 })
+
+    await u.waitForAuthSkipAppStart()
+    await expect(
+      page.getByRole('button', { name: 'Start Sketch' })
+    ).not.toBeDisabled()
+
+    await page.waitForTimeout(100)
+    await u.openAndClearDebugPanel()
+    await u.sendCustomCmd({
+      type: 'modeling_cmd_req',
+      cmd_id: uuidv4(),
+      cmd: {
+        type: 'default_camera_look_at',
+        vantage: { x: 0, y: -1250, z: 580 },
+        center: { x: 0, y: 0, z: 0 },
+        up: { x: 0, y: 0, z: 1 },
+      },
+    })
+    await page.waitForTimeout(100)
+    await u.sendCustomCmd({
+      type: 'modeling_cmd_req',
+      cmd_id: uuidv4(),
+      cmd: {
+        type: 'default_camera_get_settings',
+      },
+    })
+    await page.waitForTimeout(100)
+
+    const startPX = [667, 325]
+
+    const dragPX = 40
+
+    await page
+      .getByText('circle({ center: [4.61, -5.01], radius: 8 }, %)')
+      .click()
+    await expect(
+      page.getByRole('button', { name: 'Edit Sketch' })
+    ).toBeVisible()
+    await page.getByRole('button', { name: 'Edit Sketch' }).click()
+    await page.waitForTimeout(400)
+    let prevContent = await page.locator('.cm-content').innerText()
+
+    await expect(page.getByTestId('segment-overlay')).toHaveCount(1)
+
+    await test.step('drag circle center handle', async () => {
+      await page.dragAndDrop('#stream', '#stream', {
+        sourcePosition: { x: startPX[0], y: startPX[1] },
+        targetPosition: { x: startPX[0] + dragPX, y: startPX[1] - dragPX },
+      })
+      await page.waitForTimeout(100)
+      await expect(page.locator('.cm-content')).not.toHaveText(prevContent)
+      prevContent = await page.locator('.cm-content').innerText()
+    })
+
+    await test.step('drag circle radius handle', async () => {
+      await page.waitForTimeout(100)
+
+      const lineEnd = await u.getBoundingBox('[data-overlay-index="0"]')
+      await page.waitForTimeout(100)
+      await page.dragAndDrop('#stream', '#stream', {
+        sourcePosition: { x: lineEnd.x - 5, y: lineEnd.y },
+        targetPosition: { x: lineEnd.x + dragPX, y: lineEnd.y + dragPX },
+      })
+      await expect(page.locator('.cm-content')).not.toHaveText(prevContent)
+      prevContent = await page.locator('.cm-content').innerText()
+    })
+
+    // expect the code to have changed
+    await expect(page.locator('.cm-content'))
+      .toHaveText(`const sketch001 = startSketchOn('XZ')
+  |> circle({ center: [7.26, -2.37], radius: 11.79 }, %)
+`)
+  })
   test('Can edit a sketch that has been extruded in the same pipe', async ({
     page,
   }) => {
@@ -618,19 +706,19 @@ test.describe('Sketch tests', () => {
     await u.closeDebugPanel()
 
     await click00r(30, 0)
-    codeStr += `  |> startProfileAt([2.03, 0], %)`
+    codeStr += `  |> startProfileAt([1.53, 0], %)`
     await expect(u.codeLocator).toHaveText(codeStr)
 
     await click00r(30, 0)
-    codeStr += `  |> line([2.04, 0], %)`
+    codeStr += `  |> line([1.53, 0], %)`
     await expect(u.codeLocator).toHaveText(codeStr)
 
     await click00r(0, 30)
-    codeStr += `  |> line([0, -2.03], %)`
+    codeStr += `  |> line([0, -1.53], %)`
     await expect(u.codeLocator).toHaveText(codeStr)
 
     await click00r(-30, 0)
-    codeStr += `  |> line([-2.04, 0], %)`
+    codeStr += `  |> line([-1.53, 0], %)`
     await expect(u.codeLocator).toHaveText(codeStr)
 
     await click00r(undefined, undefined)
@@ -954,68 +1042,4 @@ const sketch002 = startSketchOn(extrude001, 'END')
       await u.getGreatestPixDiff(XYPlanePoint, noPlanesColor)
     ).toBeLessThan(3)
   })
-
-  test('Can attempt to sketch on revolved face', async ({
-    page,
-    browserName,
-  }) => {
-    test.skip(
-      browserName === 'webkit',
-      'Skip on Safari until `window.tearDown` is working there'
-    )
-    const u = await getUtils(page)
-    await page.setViewportSize({ width: 1200, height: 500 })
-
-    await page.addInitScript(async () => {
-      localStorage.setItem(
-        'persistCode',
-        `const lugHeadLength = 0.25
-        const lugDiameter = 0.5
-        const lugLength = 2
-
-        fn lug = (origin, length, diameter, plane) => {
-          const lugSketch = startSketchOn(plane)
-            |> startProfileAt([origin[0] + lugDiameter / 2, origin[1]], %)
-            |> angledLineOfYLength({ angle: 60, length: lugHeadLength }, %)
-            |> xLineTo(0 + .001, %)
-            |> yLineTo(0, %)
-            |> close(%)
-            |> revolve({ axis: "Y" }, %)
-
-          return lugSketch
-        }
-
-        lug([0, 0], 10, .5, "XY")`
-      )
-    })
-
-    await u.waitForAuthSkipAppStart()
-
-    await u.openDebugPanel()
-    await u.expectCmdLog('[data-message-type="execution-done"]')
-    await u.closeDebugPanel()
-
-    /***
-     * Test Plan
-     * Start the sketch mode
-     * Click the middle of the screen which should click the top face that is revolved
-     * Wait till you see the line tool be enabled
-     * Wait till you see the exit sketch enabled
-     *
-     * This is supposed to test that you are allowed to go into sketch mode to sketch on a revolved face
-     */
-
-    await page.getByRole('button', { name: 'Start Sketch' }).click()
-
-    await expect(async () => {
-      await page.mouse.click(600, 250)
-      await page.waitForTimeout(1000)
-      await expect(
-        page.getByRole('button', { name: 'Exit Sketch' })
-      ).toBeVisible()
-      await expect(
-        page.getByRole('button', { name: 'line Line', exact: true })
-      ).toHaveAttribute('aria-pressed', 'true')
-    }).toPass({ timeout: 40_000, intervals: [1_000] })
-  })
 })

e2e/playwright/snapshot-tests.spec.ts

@@ -532,6 +532,64 @@ test(
     })
   }
 )
+test(
+  'Draft circle should look right',
+  { tag: '@snapshot' },
+  async ({ page, context }) => {
+    // FIXME: Skip on macos its being weird.
+    // test.skip(process.platform === 'darwin', 'Skip on macos')
+
+    const u = await getUtils(page)
+    await page.setViewportSize({ width: 1200, height: 500 })
+    const PUR = 400 / 37.5 //pixeltoUnitRatio
+
+    await u.waitForAuthSkipAppStart()
+    await u.openDebugPanel()
+
+    await expect(
+      page.getByRole('button', { name: 'Start Sketch' })
+    ).not.toBeDisabled()
+    await expect(
+      page.getByRole('button', { name: 'Start Sketch' })
+    ).toBeVisible()
+
+    // click on "Start Sketch" button
+    await u.clearCommandLogs()
+    await u.doAndWaitForImageDiff(
+      () => page.getByRole('button', { name: 'Start Sketch' }).click(),
+      200
+    )
+
+    // select a plane
+    await page.mouse.click(700, 200)
+
+    await expect(page.locator('.cm-content')).toHaveText(
+      `const sketch001 = startSketchOn('XZ')`
+    )
+
+    await page.waitForTimeout(500) // TODO detect animation ending, or disable animation
+    await u.closeDebugPanel()
+
+    const startXPx = 600
+
+    // Equip the rectangle tool
+    // await page.getByRole('button', { name: 'line Line', exact: true }).click()
+    await page.getByTestId('circle-center').click()
+
+    // Draw the rectangle
+    await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 20)
+    await page.mouse.move(startXPx + PUR * 10, 500 - PUR * 10, { steps: 5 })
+
+    // Ensure the draft rectangle looks the same as it usually does
+    await expect(page).toHaveScreenshot({
+      maxDiffPixels: 100,
+    })
+    await expect(page.locator('.cm-content')).toHaveText(
+      `const sketch001 = startSketchOn('XZ')
+  |> circle({ center: [14.44, -2.44], radius: 1 }, %)`
+    )
+  }
+)
 
 test.describe(
   'Client side scene scale should match engine scale',

e2e/playwright/storageStates.ts

@@ -365,10 +365,10 @@ const box = startSketchOn('XY')
 svg(startSketchOn(keychain, 'end'), [-33, 32], -thickness)
 
 startSketchOn(keychain, 'end')
-  |> circle([
+  |> circle({ center: [
        width / 2,
        height - (keychainHoleSize + 1.5)
-     ], keychainHoleSize, %)
+     ], radius: keychainHoleSize }, %)
   |> extrude(-thickness, %)`
 
 export const TEST_CODE_TRIGGER_ENGINE_EXPORT_ERROR = `const thing = 1`

e2e/playwright/test-network-and-connection-issues.spec.ts

@@ -2,8 +2,8 @@ import { test, expect } from '@playwright/test'
 
 import { commonPoints, getUtils, setup, tearDown } from './test-utils'
 
-test.beforeEach(async ({ context, page }, testInfo) => {
-  await setup(context, page, testInfo)
+test.beforeEach(async ({ context, page }) => {
+  await setup(context, page)
 })
 
 test.afterEach(async ({ page }, testInfo) => {

e2e/playwright/test-utils.ts

@@ -26,7 +26,6 @@ import {
 import * as TOML from '@iarna/toml'
 import { SaveSettingsPayload } from 'lib/settings/settingsTypes'
 import { SETTINGS_FILE_NAME } from 'lib/constants'
-import { isErrorWhitelisted } from './lib/console-error-whitelist'
 import { isArray } from 'lib/utils'
 import { reportRejection } from 'lib/trap'
 
@@ -441,34 +440,6 @@ export async function getUtils(page: Page, test_?: typeof test) {
       }
       return maxDiff
     },
-    getPixelRGBs: async (
-      coords: { x: number; y: number },
-      radius: number
-    ): Promise<[number, number, number][]> => {
-      const buffer = await page.screenshot({
-        fullPage: true,
-      })
-      const screenshot = await PNG.sync.read(buffer)
-      const pixMultiplier: number = await page.evaluate(
-        'window.devicePixelRatio'
-      )
-      const allCords: [number, number][] = [[coords.x, coords.y]]
-      for (let i = 1; i < radius; i++) {
-        allCords.push([coords.x + i, coords.y])
-        allCords.push([coords.x - i, coords.y])
-        allCords.push([coords.x, coords.y + i])
-        allCords.push([coords.x, coords.y - i])
-      }
-      return allCords.map(([x, y]) => {
-        const index =
-          (screenshot.width * y * pixMultiplier + x * pixMultiplier) * 4 // rbga is 4 channels
-        return [
-          screenshot.data[index],
-          screenshot.data[index + 1],
-          screenshot.data[index + 2],
-        ]
-      })
-    },
     doAndWaitForImageDiff: (fn: () => Promise<unknown>, diffCount = 200) =>
       new Promise<boolean>((resolve) => {
         ;(async () => {
@@ -851,11 +822,7 @@ export async function tearDown(page: Page, testInfo: TestInfo) {
 
 // settingsOverrides may need to be augmented to take more generic items,
 // but we'll be strict for now
-export async function setup(
-  context: BrowserContext,
-  page: Page,
-  testInfo?: TestInfo
-) {
+export async function setup(context: BrowserContext, page: Page) {
   await context.addInitScript(
     async ({ token, settingsKey, settings, IS_PLAYWRIGHT_KEY }) => {
       localStorage.clear()
@@ -891,8 +858,6 @@ export async function setup(
       secure: true,
     },
   ])
-
-  failOnConsoleErrors(page, testInfo)
   // kill animations, speeds up tests and reduced flakiness
   await page.emulateMedia({ reducedMotion: 'reduce' })
 
@@ -966,48 +931,6 @@ export async function setupElectron({
   return { electronApp, page, dir: projectDirName }
 }
 
-function failOnConsoleErrors(page: Page, testInfo?: TestInfo) {
-  // enabled for chrome for now
-  if (page.context().browser()?.browserType().name() === 'chromium') {
-    page.on('pageerror', (exception) => {
-      if (isErrorWhitelisted(exception)) {
-        return
-      }
-
-      // only set this env var to false if you want to collect console errors
-      // This can be configured in the GH workflow.  This should be set to true by default (we want tests to fail when
-      // unwhitelisted console errors are detected).
-      if (process.env.FAIL_ON_CONSOLE_ERRORS === 'true') {
-        // Fail when running on CI and FAIL_ON_CONSOLE_ERRORS is set
-        // use expect to prevent page from closing and not cleaning up
-        expect(`An error was detected in the console: \r\n message:${exception.message} \r\n name:${exception.name} \r\n stack:${exception.stack}
-          
-          *Either fix the console error or add it to the whitelist defined in ./lib/console-error-whitelist.ts (if the error can be safely ignored)       
-          `).toEqual('Console error detected')
-      } else {
-        // the (test-results/exceptions.txt) file will be uploaded as part of an upload artifact in GH
-        fsp
-          .appendFile(
-            './test-results/exceptions.txt',
-            [
-              '~~~',
-              `triggered_by_test:${
-                testInfo?.file + ' ' + (testInfo?.title || ' ')
-              }`,
-              `name:${exception.name}`,
-              `message:${exception.message}`,
-              `stack:${exception.stack}`,
-              `project:${testInfo?.project.name}`,
-              '~~~',
-            ].join('\n')
-          )
-          .catch((err) => {
-            console.error(err)
-          })
-      }
-    })
-  }
-}
 export async function isOutOfViewInScrollContainer(
   element: Locator,
   container: Locator

e2e/playwright/testing-camera-movement.spec.ts

@@ -3,8 +3,8 @@ import { EngineCommand } from 'lang/std/artifactGraph'
 import { uuidv4 } from 'lib/utils'
 import { getUtils, setup, tearDown } from './test-utils'
 
-test.beforeEach(async ({ context, page }, testInfo) => {
-  await setup(context, page, testInfo)
+test.beforeEach(async ({ context, page }) => {
+  await setup(context, page)
 })
 
 test.afterEach(async ({ page }, testInfo) => {
@@ -12,8 +12,8 @@ test.afterEach(async ({ page }, testInfo) => {
 })
 
 test.describe('Testing Camera Movement', () => {
-  test('Can move camera reliably', async ({ page, context }) => {
-    test.skip(process.platform === 'darwin', 'Can move camera reliably')
+  test('Can moving camera', async ({ page, context }) => {
+    test.skip(process.platform === 'darwin', 'Can moving camera')
     const u = await getUtils(page)
     await page.setViewportSize({ width: 1200, height: 500 })
 
@@ -102,13 +102,6 @@ test.describe('Testing Camera Movement', () => {
     await bakeInRetries(async () => {
       await page.mouse.move(700, 200)
       await page.mouse.down({ button: 'right' })
-      const appLogoBBox = await page.getByTestId('app-logo').boundingBox()
-      expect(appLogoBBox).not.toBeNull()
-      if (!appLogoBBox) throw new Error('app logo not found')
-      await page.mouse.move(
-        appLogoBBox.x + appLogoBBox.width / 2,
-        appLogoBBox.y + appLogoBBox.height / 2
-      )
       await page.mouse.move(600, 303)
       await page.mouse.up({ button: 'right' })
     }, [4, -10.5, -120])
@@ -302,11 +295,11 @@ test.describe('Testing Camera Movement', () => {
     await expect(
       page.getByRole('button', { name: 'Edit Sketch' })
     ).toBeVisible()
-    await hoverOverNothing()
     await page.getByRole('button', { name: 'Edit Sketch' }).click()
 
     await page.waitForTimeout(400)
 
+    await hoverOverNothing()
     x = 975
     y = 468
 

e2e/playwright/testing-constraints.spec.ts

@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
 import { getUtils, setup, tearDown, TEST_COLORS } from './test-utils'
 import { XOR } from 'lib/utils'
 
-test.beforeEach(async ({ context, page }, testInfo) => {
-  await setup(context, page, testInfo)
+test.beforeEach(async ({ context, page }) => {
+  await setup(context, page)
 })
 
 test.afterEach(async ({ page }, testInfo) => {

e2e/playwright/testing-gizmo.spec.ts

@@ -4,8 +4,8 @@ import { getUtils, setup, tearDown } from './test-utils'
 import { uuidv4 } from 'lib/utils'
 import { TEST_CODE_GIZMO } from './storageStates'
 
-test.beforeEach(async ({ context, page }, testInfo) => {
-  await setup(context, page, testInfo)
+test.beforeEach(async ({ context, page }) => {
+  await setup(context, page)
 })
 
 test.afterEach(async ({ page }, testInfo) => {

e2e/playwright/testing-segment-overlays.spec.ts

@@ -4,8 +4,8 @@ import { deg, getUtils, setup, tearDown, wiggleMove } from './test-utils'
 import { LineInputsType } from 'lang/std/sketchcombos'
 import { uuidv4 } from 'lib/utils'
 
-test.beforeEach(async ({ context, page }, testInfo) => {
-  await setup(context, page, testInfo)
+test.beforeEach(async ({ context, page }) => {
+  await setup(context, page)
 })
 
 test.afterEach(async ({ page }, testInfo) => {
@@ -774,6 +774,80 @@ const part001 = startSketchOn('XZ')
         locator: '[data-overlay-toolbar-index="12"]',
       })
     })
+    test('for segment [circle]', async ({ page }) => {
+      await page.addInitScript(async () => {
+        localStorage.setItem(
+          'persistCode',
+          `const part001 = startSketchOn('XZ')
+  |> circle({ center: [1 + 0, 0], radius: 8 }, %)
+        `
+        )
+        localStorage.setItem('disableAxis', 'true')
+      })
+      const u = await getUtils(page)
+      await page.setViewportSize({ width: 1200, height: 500 })
+
+      await u.waitForAuthSkipAppStart()
+
+      // wait for execution done
+      await u.openDebugPanel()
+      await u.expectCmdLog('[data-message-type="execution-done"]')
+      await u.closeDebugPanel()
+
+      await page
+        .getByText('circle({ center: [1 + 0, 0], radius: 8 }, %)')
+        .click()
+      await page.waitForTimeout(100)
+      await page.getByRole('button', { name: 'Edit Sketch' }).click()
+      await page.waitForTimeout(500)
+
+      await expect(page.getByTestId('segment-overlay')).toHaveCount(1)
+
+      const clickUnconstrained = _clickUnconstrained(page)
+      const clickConstrained = _clickConstrained(page)
+
+      const hoverPos = { x: 789, y: 114 } as const
+      let ang = await u.getAngle('[data-overlay-index="0"]')
+      console.log('angl', ang)
+      console.log('circle center x')
+      await clickConstrained({
+        hoverPos,
+        constraintType: 'xAbsolute',
+        expectBeforeUnconstrained:
+          'circle({ center: [1 + 0, 0], radius: 8 }, %)',
+        expectAfterUnconstrained: 'circle({ center: [1, 0], radius: 8 }, %)',
+        expectFinal: 'circle({ center: [xAbs001, 0], radius: 8 }, %)',
+        ang: ang + 105,
+        steps: 6,
+        locator: '[data-overlay-toolbar-index="0"]',
+      })
+      console.log('circle center y')
+      await clickUnconstrained({
+        hoverPos,
+        constraintType: 'yAbsolute',
+        expectBeforeUnconstrained:
+          'circle({ center: [xAbs001, 0], radius: 8 }, %)',
+        expectAfterUnconstrained:
+          'circle({ center: [xAbs001, yAbs001], radius: 8 }, %)',
+        expectFinal: 'circle({ center: [xAbs001, 0], radius: 8 }, %)',
+        ang: ang + 105,
+        steps: 10,
+        locator: '[data-overlay-toolbar-index="0"]',
+      })
+      console.log('circle radius')
+      await clickUnconstrained({
+        hoverPos,
+        constraintType: 'radius',
+        expectBeforeUnconstrained:
+          'circle({ center: [xAbs001, 0], radius: 8 }, %)',
+        expectAfterUnconstrained:
+          'circle({ center: [xAbs001, 0], radius: radius001 }, %)',
+        expectFinal: 'circle({ center: [xAbs001, 0], radius: 8 }, %)',
+        ang: ang + 105,
+        steps: 10,
+        locator: '[data-overlay-toolbar-index="0"]',
+      })
+    })
   })
   test.describe('Testing deleting a segment', () => {
     const _deleteSegmentSequence =

e2e/playwright/testing-selections.spec.ts

@@ -5,8 +5,8 @@ import { Coords2d } from 'lang/std/sketch'
 import { KCL_DEFAULT_LENGTH } from 'lib/constants'
 import { uuidv4 } from 'lib/utils'
 
-test.beforeEach(async ({ context, page }, testInfo) => {
-  await setup(context, page, testInfo)
+test.beforeEach(async ({ context, page }) => {
+  await setup(context, page)
 })
 
 test.afterEach(async ({ page }, testInfo) => {
@@ -31,28 +31,12 @@ test.describe('Testing selections', () => {
 
     const xAxisClick = () =>
       page.mouse.click(700, 253).then(() => page.waitForTimeout(100))
-    const xAxisClickAfterExitingSketch = () =>
-      page.mouse.click(639, 278).then(() => page.waitForTimeout(100))
-    const emptySpaceHover = () =>
-      test.step('Hover over empty space', async () => {
-        await page.mouse.move(700, 143, { steps: 5 })
-        await expect(page.locator('.hover-highlight')).not.toBeVisible()
-      })
     const emptySpaceClick = () =>
-      test.step(`Click in empty space`, async () => {
-        await page.mouse.click(700, 143)
-        await expect(page.locator('.cm-line').last()).toHaveClass(
-          /cm-activeLine/
-        )
-      })
+      page.mouse.click(700, 343).then(() => page.waitForTimeout(100))
     const topHorzSegmentClick = () =>
-      page.mouse
-        .click(startXPx, 500 - PUR * 20)
-        .then(() => page.waitForTimeout(100))
+      page.mouse.click(709, 290).then(() => page.waitForTimeout(100))
     const bottomHorzSegmentClick = () =>
-      page.mouse
-        .click(startXPx + PUR * 10, 500 - PUR * 10)
-        .then(() => page.waitForTimeout(100))
+      page.mouse.click(767, 396).then(() => page.waitForTimeout(100))
 
     await u.clearCommandLogs()
     await expect(
@@ -187,9 +171,7 @@ test.describe('Testing selections', () => {
       await emptySpaceClick()
     }
 
-    await test.step(`Test hovering and selecting on fresh sketch`, async () => {
-      await selectionSequence()
-    })
+    await selectionSequence()
 
     // hovering in fresh sketch worked, lets try exiting and re-entering
     await u.openAndClearDebugPanel()
@@ -202,17 +184,16 @@ test.describe('Testing selections', () => {
 
     // select a line, this verifies that sketches in the scene can be selected outside of sketch mode
     await topHorzSegmentClick()
-    await xAxisClickAfterExitingSketch()
     await page.waitForTimeout(100)
-    await emptySpaceHover()
 
     // enter sketch again
     await u.doAndWaitForCmd(
       () => page.getByRole('button', { name: 'Edit Sketch' }).click(),
       'default_camera_get_settings'
     )
+    await page.waitForTimeout(150)
 
-    await page.waitForTimeout(450) // wait for animation
+    await page.waitForTimeout(300) // wait for animation
 
     await u.openAndClearDebugPanel()
     await u.sendCustomCmd({
@@ -239,9 +220,8 @@ test.describe('Testing selections', () => {
 
     await u.closeDebugPanel()
 
-    await test.step(`Test hovering and selecting on edited sketch`, async () => {
-      await selectionSequence()
-    })
+    // hover again and check it works
+    await selectionSequence()
   })
 
   test('Solids should be select and deletable', async ({ page }) => {
@@ -433,7 +413,7 @@ const sketch002 = startSketchOn(launderExtrudeThroughVar, seg02)
   |> line([0, 20.03], %)
   |> line([62.61, 0], %, $seg03)
   |> lineTo([profileStartX(%), profileStartY(%)], %)
-  |> close(%)
+  |> close(%)      
 `
       )
     }, KCL_DEFAULT_LENGTH)
@@ -536,22 +516,11 @@ const sketch002 = startSketchOn(launderExtrudeThroughVar, seg02)
     await page.waitForTimeout(100)
     await u.closeDebugPanel()
 
-    const extrusionTopCap: Coords2d = [800, 240]
+    const extrusionTop: Coords2d = [800, 240]
     const flatExtrusionFace: Coords2d = [960, 160]
-    const tangentialArcTo: Coords2d = [840, 160]
+    const arc: Coords2d = [840, 160]
     const close: Coords2d = [720, 200]
     const nothing: Coords2d = [600, 200]
-    const closeEdge: Coords2d = [744, 233]
-    const closeAdjacentEdge: Coords2d = [688, 123]
-    const closeOppositeEdge: Coords2d = [687, 169]
-
-    const tangentialArcEdge: Coords2d = [811, 142]
-    const tangentialArcOppositeEdge: Coords2d = [820, 180]
-    const tangentialArcAdjacentEdge: Coords2d = [893, 165]
-
-    const straightSegmentEdge: Coords2d = [819, 369]
-    const straightSegmentOppositeEdge: Coords2d = [635, 394]
-    const straightSegmentAdjacentEdge: Coords2d = [679, 329]
 
     await page.mouse.move(nothing[0], nothing[1])
     await page.mouse.click(nothing[0], nothing[1])
@@ -559,141 +528,26 @@ const sketch002 = startSketchOn(launderExtrudeThroughVar, seg02)
     await expect(page.getByTestId('hover-highlight')).not.toBeVisible()
     await page.waitForTimeout(200)
 
-    const checkCodeAtHoverPosition = async (
-      name = '',
-      coord: Coords2d,
-      highlightCode: string,
-      activeLine = highlightCode
-    ) => {
-      await test.step(`test selection for: ${name}`, async () => {
-        const highlightedLocator = page.getByTestId('hover-highlight')
-        const activeLineLocator = page.locator('.cm-activeLine')
+    await page.mouse.move(extrusionTop[0], extrusionTop[1])
+    await expect(page.getByTestId('hover-highlight').first()).toBeVisible()
+    await page.mouse.move(nothing[0], nothing[1])
+    await expect(page.getByTestId('hover-highlight').first()).not.toBeVisible()
 
-        await test.step(`hover should highlight correct code`, async () => {
-          await page.mouse.move(coord[0], coord[1])
-          await expect(highlightedLocator.first()).toBeVisible()
-          await expect
-            .poll(async () => {
-              const textContents = await highlightedLocator.allTextContents()
-              return textContents.join('').replace(/\s+/g, '')
-            })
-            .toBe(highlightCode)
-          await page.mouse.move(nothing[0], nothing[1])
-        })
-        await test.step(`click should put the cursor in the right place`, async () => {
-          await expect(highlightedLocator.first()).not.toBeVisible()
-          await page.mouse.click(coord[0], coord[1])
-          await expect
-            .poll(async () => {
-              const activeLines = await activeLineLocator.allInnerTexts()
-              return activeLines.join('')
-            })
-            .toContain(activeLine)
-          // check pixels near the click location are yellow
-        })
-        await test.step(`check the engine agrees with selections`, async () => {
-          // ultimately the only way we know if the engine agrees with the selection from the FE
-          // perspective is if it highlights the pixels near where we clicked yellow.
-          await expect
-            .poll(async () => {
-              const RGBs = await u.getPixelRGBs({ x: coord[0], y: coord[1] }, 3)
-              for (const rgb of RGBs) {
-                const [r, g, b] = rgb
-                const RGAverage = (r + g) / 2
-                const isRedGreenSameIsh = Math.abs(r - g) < 3
-                const isBlueLessThanRG = RGAverage - b > 45
-                const isYellowy = isRedGreenSameIsh && isBlueLessThanRG
-                if (isYellowy) return true
-              }
-              return false
-            })
-            .toBeTruthy()
-          await page.mouse.click(nothing[0], nothing[1])
-        })
-      })
-    }
+    await page.mouse.move(arc[0], arc[1])
+    await expect(page.getByTestId('hover-highlight').first()).toBeVisible()
+    await page.mouse.move(nothing[0], nothing[1])
+    await expect(page.getByTestId('hover-highlight').first()).not.toBeVisible()
 
-    await checkCodeAtHoverPosition(
-      'extrusionTopCap',
-      extrusionTopCap,
-      'startProfileAt([20,0],%)',
-      'startProfileAt([20, 0], %)'
-    )
-    await checkCodeAtHoverPosition(
-      'flatExtrusionFace',
-      flatExtrusionFace,
-      `angledLineThatIntersects({angle:3.14,intersectTag:a,offset:0},%)extrude(5+7,%)`,
-      '}, %)'
-    )
+    await page.mouse.move(close[0], close[1])
+    await expect(page.getByTestId('hover-highlight').first()).toBeVisible()
+    await page.mouse.move(nothing[0], nothing[1])
+    await expect(page.getByTestId('hover-highlight').first()).not.toBeVisible()
 
-    await checkCodeAtHoverPosition(
-      'tangentialArcTo',
-      tangentialArcTo,
-      'tangentialArcTo([13.14+0,13.14],%)extrude(5+7,%)',
-      'tangentialArcTo([13.14 + 0, 13.14], %)'
-    )
-    await checkCodeAtHoverPosition(
-      'tangentialArcEdge',
-      tangentialArcEdge,
-      `tangentialArcTo([13.14+0,13.14],%)`,
-      'tangentialArcTo([13.14 + 0, 13.14], %)'
-    )
-    await checkCodeAtHoverPosition(
-      'tangentialArcOppositeEdge',
-      tangentialArcOppositeEdge,
-      `tangentialArcTo([13.14+0,13.14],%)`,
-      'tangentialArcTo([13.14 + 0, 13.14], %)'
-    )
-    await checkCodeAtHoverPosition(
-      'tangentialArcAdjacentEdge',
-      tangentialArcAdjacentEdge,
-      `tangentialArcTo([13.14+0,13.14],%)`,
-      'tangentialArcTo([13.14 + 0, 13.14], %)'
-    )
-
-    await checkCodeAtHoverPosition(
-      'close',
-      close,
-      'close(%)extrude(5+7,%)',
-      'close(%)'
-    )
-    await checkCodeAtHoverPosition(
-      'closeEdge',
-      closeEdge,
-      `close(%)`,
-      'close(%)'
-    )
-    await checkCodeAtHoverPosition(
-      'closeAdjacentEdge',
-      closeAdjacentEdge,
-      `close(%)`,
-      'close(%)'
-    )
-    await checkCodeAtHoverPosition(
-      'closeOppositeEdge',
-      closeOppositeEdge,
-      `close(%)`,
-      'close(%)'
-    )
-
-    await checkCodeAtHoverPosition(
-      'straightSegmentEdge',
-      straightSegmentEdge,
-      `angledLineToY({angle:30,to:11.14},%)`,
-      'angledLineToY({ angle: 30, to: 11.14 }, %)'
-    )
-    await checkCodeAtHoverPosition(
-      'straightSegmentOppositeEdge',
-      straightSegmentOppositeEdge,
-      `angledLineToY({angle:30,to:11.14},%)`,
-      'angledLineToY({ angle: 30, to: 11.14 }, %)'
-    )
-    await checkCodeAtHoverPosition(
-      'straightSegmentAdjancentEdge',
-      straightSegmentAdjacentEdge,
-      `angledLineToY({angle:30,to:11.14},%)`,
-      'angledLineToY({ angle: 30, to: 11.14 }, %)'
-    )
+    await page.mouse.move(flatExtrusionFace[0], flatExtrusionFace[1])
+    await expect(page.getByTestId('hover-highlight')).toHaveCount(6) // multiple lines
+    await page.mouse.move(nothing[0], nothing[1])
+    await page.waitForTimeout(100)
+    await expect(page.getByTestId('hover-highlight').first()).not.toBeVisible()
   })
   test("Extrude button should be disabled if there's no extrudable geometry when nothing is selected", async ({
     page,
@@ -1022,7 +876,7 @@ const extrude001 = extrude(50, sketch001)
     |> line([4.95, -8], %)
     |> line([-20.38, -10.12], %)
     |> line([-15.79, 17.08], %)
-
+  
   fn yohey = (pos) => {
     const sketch004 = startSketchOn('XZ')
     ${extrudeAndEditBlockedInFunction}
@@ -1032,7 +886,7 @@ const extrude001 = extrude(50, sketch001)
     |> line([-15.79, 17.08], %)
     return ''
   }
-
+  
       yohey([15.79, -34.6])
   `
         )

e2e/playwright/testing-settings.spec.ts

@@ -8,16 +8,12 @@ import {
   tearDown,
   executorInputPath,
 } from './test-utils'
-import { SaveSettingsPayload, SettingsLevel } from 'lib/settings/settingsTypes'
-import {
-  TEST_SETTINGS_KEY,
-  TEST_SETTINGS_CORRUPTED,
-  TEST_SETTINGS,
-} from './storageStates'
+import { SaveSettingsPayload } from 'lib/settings/settingsTypes'
+import { TEST_SETTINGS_KEY, TEST_SETTINGS_CORRUPTED } from './storageStates'
 import * as TOML from '@iarna/toml'
 
-test.beforeEach(async ({ context, page }, testInfo) => {
-  await setup(context, page, testInfo)
+test.beforeEach(async ({ context, page }) => {
+  await setup(context, page)
 })
 
 test.afterEach(async ({ page }, testInfo) => {
@@ -69,15 +65,12 @@ test.describe('Testing settings', () => {
     page,
   }) => {
     const u = await getUtils(page)
-    await test.step(`Setup`, async () => {
-      await page.setViewportSize({ width: 1200, height: 500 })
-      await u.waitForAuthSkipAppStart()
-      await page
-        .getByRole('button', { name: 'Start Sketch' })
-        .waitFor({ state: 'visible' })
-    })
+    await page.setViewportSize({ width: 1200, height: 500 })
+    await u.waitForAuthSkipAppStart()
+    await page
+      .getByRole('button', { name: 'Start Sketch' })
+      .waitFor({ state: 'visible' })
 
-    // Selectors and constants
     const paneButtonLocator = page.getByTestId('debug-pane-button')
     const headingLocator = page.getByRole('heading', {
       name: 'Settings',
@@ -85,23 +78,11 @@ test.describe('Testing settings', () => {
     })
     const inputLocator = page.locator('input[name="modeling-showDebugPanel"]')
 
-    await test.step('Open settings dialog and set "Show debug panel" to on', async () => {
-      await page.keyboard.press('ControlOrMeta+Shift+,')
-      await expect(headingLocator).toBeVisible()
+    // Open the settings modal with the browser keyboard shortcut
+    await page.keyboard.press('ControlOrMeta+Shift+,')
 
-      /** Test to close https://github.com/KittyCAD/modeling-app/issues/2713 */
-      await test.step(`Confirm that this dialog has a solid background`, async () => {
-        await expect
-          .poll(() => u.getGreatestPixDiff({ x: 600, y: 250 }, [28, 28, 28]), {
-            timeout: 1000,
-            message:
-              'Checking for solid background, should not see default plane colors',
-          })
-          .toBeLessThan(15)
-      })
-
-      await page.locator('#showDebugPanel').getByText('OffOn').click()
-    })
+    await expect(headingLocator).toBeVisible()
+    await page.locator('#showDebugPanel').getByText('OffOn').click()
 
     // Close it and open again with keyboard shortcut, while KCL editor is focused
     // Put the cursor in the editor
@@ -173,33 +154,29 @@ test.describe('Testing settings', () => {
 
   test('Project and user settings can be reset', async ({ page }) => {
     const u = await getUtils(page)
-    await test.step(`Setup`, async () => {
-      await page.setViewportSize({ width: 1200, height: 500 })
-      await u.waitForAuthSkipAppStart()
-    })
+    await page.setViewportSize({ width: 1200, height: 500 })
+    await u.waitForAuthSkipAppStart()
+    await page
+      .getByRole('button', { name: 'Start Sketch' })
+      .waitFor({ state: 'visible' })
 
-    // Selectors and constants
     const projectSettingsTab = page.getByRole('radio', { name: 'Project' })
     const userSettingsTab = page.getByRole('radio', { name: 'User' })
-    const resetButton = (level: SettingsLevel) =>
-      page.getByRole('button', {
-        name: `Reset ${level}-level settings`,
-      })
+    const resetButton = page.getByRole('button', {
+      name: 'Restore default settings',
+    })
     const themeColorSetting = page.locator('#themeColor').getByRole('slider')
     const settingValues = {
       default: '259',
       user: '120',
       project: '50',
     }
-    const resetToast = (level: SettingsLevel) =>
-      page.getByText(`${level}-level settings were reset`)
 
-    await test.step(`Open the settings modal`, async () => {
-      await page.getByRole('link', { name: 'Settings' }).last().click()
-      await expect(
-        page.getByRole('heading', { name: 'Settings', exact: true })
-      ).toBeVisible()
-    })
+    // Open the settings modal with lower-right button
+    await page.getByRole('link', { name: 'Settings' }).last().click()
+    await expect(
+      page.getByRole('heading', { name: 'Settings', exact: true })
+    ).toBeVisible()
 
     await test.step('Set up theme color', async () => {
       // Verify we're looking at the project-level settings,
@@ -218,40 +195,37 @@ test.describe('Testing settings', () => {
 
     await test.step('Reset project settings', async () => {
       // Click the reset settings button.
-      await resetButton('project').click()
+      await resetButton.click()
 
-      await expect(resetToast('project')).toBeVisible()
-      await expect(resetToast('project')).not.toBeVisible()
+      await expect(page.getByText('Settings restored to default')).toBeVisible()
+      await expect(
+        page.getByText('Settings restored to default')
+      ).not.toBeVisible()
 
       // Verify it is now set to the inherited user value
-      await expect(themeColorSetting).toHaveValue(settingValues.user)
+      await expect(themeColorSetting).toHaveValue(settingValues.default)
 
-      await test.step(`Check that the user settings did not change`, async () => {
-        await userSettingsTab.click()
-        await expect(themeColorSetting).toHaveValue(settingValues.user)
-      })
+      // Check that the user setting also rolled back
+      await userSettingsTab.click()
+      await expect(themeColorSetting).toHaveValue(settingValues.default)
+      await projectSettingsTab.click()
 
-      await test.step(`Set project-level again to test the user-level reset`, async () => {
-        await projectSettingsTab.click()
-        await themeColorSetting.fill(settingValues.project)
-        await userSettingsTab.click()
-      })
+      // Set project-level value to 50 again to test the user-level reset
+      await themeColorSetting.fill(settingValues.project)
+      await userSettingsTab.click()
     })
 
     await test.step('Reset user settings', async () => {
-      // Click the reset settings button.
-      await resetButton('user').click()
-
-      await expect(resetToast('user')).toBeVisible()
-      await expect(resetToast('user')).not.toBeVisible()
+      // Change the setting and click the reset settings button.
+      await themeColorSetting.fill(settingValues.user)
+      await resetButton.click()
 
       // Verify it is now set to the default value
       await expect(themeColorSetting).toHaveValue(settingValues.default)
 
-      await test.step(`Check that the project settings did not change`, async () => {
-        await projectSettingsTab.click()
-        await expect(themeColorSetting).toHaveValue(settingValues.project)
-      })
+      // Check that the project setting also changed
+      await projectSettingsTab.click()
+      await expect(themeColorSetting).toHaveValue(settingValues.default)
     })
   })
 
@@ -455,37 +429,25 @@ test.describe('Testing settings', () => {
 
   test('Changing modeling default unit', async ({ page }) => {
     const u = await getUtils(page)
-    await test.step(`Test setup`, async () => {
-      await page.setViewportSize({ width: 1200, height: 500 })
-      await u.waitForAuthSkipAppStart()
-      await page
-        .getByRole('button', { name: 'Start Sketch' })
-        .waitFor({ state: 'visible' })
-    })
+    await page.setViewportSize({ width: 1200, height: 500 })
+    await u.waitForAuthSkipAppStart()
+    await page
+      .getByRole('button', { name: 'Start Sketch' })
+      .waitFor({ state: 'visible' })
 
-    // Selectors and constants
     const userSettingsTab = page.getByRole('radio', { name: 'User' })
-    const projectSettingsTab = page.getByRole('radio', { name: 'Project' })
-    const defaultUnitSection = page.getByText(
-      'default unitRoll back default unitRoll back to match'
-    )
-    const defaultUnitRollbackButton = page.getByRole('button', {
-      name: 'Roll back default unit',
-    })
 
-    await test.step(`Open the settings modal`, async () => {
-      await page.getByRole('link', { name: 'Settings' }).last().click()
-      await expect(
-        page.getByRole('heading', { name: 'Settings', exact: true })
-      ).toBeVisible()
-    })
+    // Open the settings modal with lower-right button
+    await page.getByRole('link', { name: 'Settings' }).last().click()
+    await expect(
+      page.getByRole('heading', { name: 'Settings', exact: true })
+    ).toBeVisible()
 
-    await test.step(`Reset unit setting`, async () => {
-      await userSettingsTab.click()
-      await defaultUnitSection.hover()
-      await defaultUnitRollbackButton.click()
-      await projectSettingsTab.click()
+    const resetButton = page.getByRole('button', {
+      name: 'Restore default settings',
     })
+    // Default unit should be mm
+    await resetButton.click()
 
     await test.step('Change modeling default unit within project tab', async () => {
       const changeUnitOfMeasureInProjectTab = async (unitOfMeasure: string) => {
@@ -590,148 +552,4 @@ test.describe('Testing settings', () => {
       await changeUnitOfMeasureInGizmo('m', 'Meters')
     })
   })
-
-  test('Changing theme in sketch mode', async ({ page }) => {
-    const u = await getUtils(page)
-    await page.addInitScript(() => {
-      localStorage.setItem(
-        'persistCode',
-        `const sketch001 = startSketchOn('XZ')
-  |> startProfileAt([0, 0], %)
-  |> line([5, 0], %)
-  |> line([0, 5], %)
-  |> line([-5, 0], %)
-  |> lineTo([profileStartX(%), profileStartY(%)], %)
-  |> close(%)
-const extrude001 = extrude(5, sketch001)
-`
-      )
-    })
-    await page.setViewportSize({ width: 1200, height: 500 })
-
-    // Selectors and constants
-    const editSketchButton = page.getByRole('button', { name: 'Edit Sketch' })
-    const lineToolButton = page.getByTestId('line')
-    const segmentOverlays = page.getByTestId('segment-overlay')
-    const sketchOriginLocation = { x: 600, y: 250 }
-    const darkThemeSegmentColor: [number, number, number] = [215, 215, 215]
-    const lightThemeSegmentColor: [number, number, number] = [90, 90, 90]
-
-    await test.step(`Get into sketch mode`, async () => {
-      await u.waitForAuthSkipAppStart()
-      await page.mouse.click(700, 200)
-      await expect(editSketchButton).toBeVisible()
-      await editSketchButton.click()
-
-      // We use the line tool as a proxy for sketch mode
-      await expect(lineToolButton).toBeVisible()
-      await expect(segmentOverlays).toHaveCount(4)
-      // but we allow more time to pass for animating to the sketch
-      await page.waitForTimeout(1000)
-    })
-
-    await test.step(`Check the sketch line color before`, async () => {
-      await expect
-        .poll(() =>
-          u.getGreatestPixDiff(sketchOriginLocation, darkThemeSegmentColor)
-        )
-        .toBeLessThan(15)
-    })
-
-    await test.step(`Change theme to light using command palette`, async () => {
-      await page.keyboard.press('ControlOrMeta+K')
-      await page.getByRole('option', { name: 'theme' }).click()
-      await page.getByRole('option', { name: 'light' }).click()
-      await expect(page.getByText('theme to "light"')).toBeVisible()
-
-      // Make sure we haven't left sketch mode
-      await expect(lineToolButton).toBeVisible()
-    })
-
-    await test.step(`Check the sketch line color after`, async () => {
-      await expect
-        .poll(() =>
-          u.getGreatestPixDiff(sketchOriginLocation, lightThemeSegmentColor)
-        )
-        .toBeLessThan(15)
-    })
-  })
-
-  test(`Turning off "Show debug panel" with debug panel open leaves no phantom panel`, async ({
-    page,
-  }) => {
-    const u = await getUtils(page)
-
-    // Override beforeEach test setup
-    // with debug panel open
-    // but "show debug panel" set to false
-    await page.addInitScript(
-      async ({ settingsKey, settings }) => {
-        localStorage.setItem(settingsKey, settings)
-        localStorage.setItem(
-          'persistModelingContext',
-          '{"openPanes":["debug"]}'
-        )
-      },
-      {
-        settingsKey: TEST_SETTINGS_KEY,
-        settings: TOML.stringify({
-          settings: {
-            ...TEST_SETTINGS,
-            modeling: { ...TEST_SETTINGS.modeling, showDebugPanel: false },
-          },
-        }),
-      }
-    )
-    await page.setViewportSize({ width: 1200, height: 500 })
-
-    // Constants and locators
-    const resizeHandle = page.locator('.sidebar-resize-handles > div.block')
-    const debugPaneButton = page.getByTestId('debug-pane-button')
-    const commandsButton = page.getByRole('button', { name: 'Commands' })
-    const debugPaneOption = page.getByRole('option', {
-      name: 'Settings · modeling · show debug panel',
-    })
-
-    async function setShowDebugPanelTo(value: 'On' | 'Off') {
-      await commandsButton.click()
-      await debugPaneOption.click()
-      await page.getByRole('option', { name: value }).click()
-      await expect(
-        page.getByText(
-          `Set show debug panel to "${value === 'On'}" for this project`
-        )
-      ).toBeVisible()
-    }
-
-    await test.step(`Initial load with corrupted settings`, async () => {
-      await u.waitForAuthSkipAppStart()
-      // Check that the debug panel is not visible
-      await expect(debugPaneButton).not.toBeVisible()
-      // Check the pane resize handle wrapper is not visible
-      await expect(resizeHandle).not.toBeVisible()
-    })
-
-    await test.step(`Open code pane to verify we see the resize handles`, async () => {
-      await u.openKclCodePanel()
-      await expect(resizeHandle).toBeVisible()
-      await u.closeKclCodePanel()
-    })
-
-    await test.step(`Turn on debug panel, open it`, async () => {
-      await setShowDebugPanelTo('On')
-      await expect(debugPaneButton).toBeVisible()
-      // We want the logic to clear the phantom panel, so we shouldn't see
-      // the real panel (and therefore the resize handle) yet
-      await expect(resizeHandle).not.toBeVisible()
-      await u.openDebugPanel()
-      await expect(resizeHandle).toBeVisible()
-    })
-
-    await test.step(`Turn off debug panel setting with it open`, async () => {
-      await setShowDebugPanelTo('Off')
-      await expect(debugPaneButton).not.toBeVisible()
-      await expect(resizeHandle).not.toBeVisible()
-    })
-  })
 })

e2e/playwright/various.spec.ts

@@ -2,8 +2,8 @@ import { test, expect } from '@playwright/test'
 
 import { doExport, getUtils, makeTemplate, setup, tearDown } from './test-utils'
 
-test.beforeEach(async ({ context, page }, testInfo) => {
-  await setup(context, page, testInfo)
+test.beforeEach(async ({ context, page }) => {
+  await setup(context, page)
 })
 
 test.afterEach(async ({ page }, testInfo) => {

electron-builder.yml

@@ -1,9 +1,12 @@
 appId: dev.zoo.modeling-app
+
 directories:
   output: out
   buildResources: assets
+
 files:
   - .vite/**
+
 mac:
   category: public.app-category.developer-tools
   artifactName: "${productName}-${version}-${arch}-${os}.${ext}"
@@ -25,6 +28,7 @@ mac:
       description: Zoo KCL File
       role: Editor
       rank: Owner
+
 win:
   artifactName: "${productName}-${version}-${arch}-${os}.${ext}"
   target:
@@ -39,7 +43,7 @@ win:
   signingHashAlgorithms:
     - sha256
   sign: "./sign-win.js"
-  publisherName: "KittyCAD Inc" # needs to be exactly like on Digicert
+  publisherName: "KittyCAD Inc"  # needs to be exactly like on Digicert
   icon: "assets/icon.ico"
   fileAssociations:
     - ext: kcl
@@ -47,15 +51,18 @@ win:
       mimeType: text/vnd.zoo.kcl
       description: Zoo KCL File
       role: Editor
+
 msi:
   oneClick: false
   perMachine: true
+
 nsis:
   oneClick: false
   perMachine: true
   allowElevation: true
   installerIcon: "assets/icon.ico"
   include: "./installer.nsh"
+
 linux:
   artifactName: "${productName}-${version}-${arch}-${os}.${ext}"
   target:
@@ -69,6 +76,7 @@ linux:
       mimeType: text/vnd.zoo.kcl
       description: Zoo KCL File
       role: Editor
+
 publish:
   - provider: generic
     url: https://dl.zoo.dev/releases/modeling-app

index.html

@@ -15,7 +15,6 @@
     />
     <link rel="apple-touch-icon" href="/logo192.png" />
     <link rel="manifest" href="/manifest.json" />
-    <link rel="stylesheet" href="./inter/inter.css" />
     <link rel="stylesheet" href="https://use.typekit.net/zzv8rvm.css" />
     <script
       defer

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zoo-modeling-app",
-  "version": "0.25.2",
+  "version": "0.25.1",
   "private": true,
   "productName": "Zoo Modeling App",
   "author": {
@@ -88,7 +88,7 @@
     "build:wasm": "yarn wasm-prep && cd src/wasm-lib && wasm-pack build --release --target web --out-dir pkg && cargo test -p kcl-lib export_bindings && cd ../.. && yarn isomorphic-copy-wasm && yarn fmt",
     "remove-importmeta": "sed -i 's/import.meta.url/window.location.origin/g' \"./src/wasm-lib/pkg/wasm_lib.js\"; sed -i '' 's/import.meta.url/window.location.origin/g' \"./src/wasm-lib/pkg/wasm_lib.js\" || echo \"sed for both mac and linux\"",
     "wasm-prep": "rimraf src/wasm-lib/pkg && mkdirp src/wasm-lib/pkg && rimraf src/wasm-lib/kcl/bindings",
-    "lint": "eslint --fix src e2e packages/codemirror-lsp-client",
+    "lint": "eslint --fix src e2e",
     "bump-jsons": "echo \"$(jq --arg v \"$VERSION\" '.version=$v' package.json --indent 2)\" > package.json",
     "postinstall": "yarn xstate:typegen && ./node_modules/.bin/electron-rebuild",
     "xstate:typegen": "yarn xstate typegen \"src/**/*.ts?(x)\"",
@@ -183,7 +183,7 @@
     "tailwindcss": "^3.4.1",
     "ts-node": "^10.0.0",
     "typescript": "^5.0.0",
-    "vite": "^5.4.3",
+    "vite": "^5.4.2",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-package-version": "^1.1.0",
     "vite-tsconfig-paths": "^4.3.2",

packages/codemirror-lsp-client/src/plugin/lsp.ts

@@ -532,9 +532,7 @@ export class LanguageServerPlugin implements PluginValue {
   processDiagnostics(params: PublishDiagnosticsParams) {
     if (params.uri !== this.getDocUri()) return
 
-    // Commented to avoid the lint.  See TODO below.
-    // const diagnostics =
-    params.diagnostics
+    const diagnostics = params.diagnostics
       .map(({ range, message, severity }) => ({
         from: posToOffset(this.view.state.doc, range.start)!,
         to: posToOffset(this.view.state.doc, range.end)!,

playwright.config.ts

@@ -57,10 +57,10 @@ export default defineConfig({
         },
       }, // or 'chrome-beta'
     },
-    // {
-    //   name: 'webkit',
-    //   use: { ...devices['Desktop Safari'] },
-    // },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
     // {
     //   name: 'firefox',
     //   use: { ...devices['Desktop Firefox'] },

public/inter/inter.css

@@ -1,14 +0,0 @@
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url("InterVariable.woff2") format("woff2");
-}
-@font-face {
-  font-family: Inter;
-  font-style: italic;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url("InterVariable-Italic.woff2") format("woff2");
-}

src/App.tsx

@@ -1,8 +1,12 @@
-import { useEffect, useMemo, useRef } from 'react'
+import { MouseEventHandler, useEffect, useMemo, useRef } from 'react'
+import { uuidv4 } from 'lib/utils'
 import { useHotKeyListener } from './hooks/useHotKeyListener'
 import { Stream } from './components/Stream'
+import { EngineCommand } from 'lang/std/artifactGraph'
+import { throttle } from './lib/utils'
 import { AppHeader } from './components/AppHeader'
 import { useHotkeys } from 'react-hotkeys-hook'
+import { getNormalisedCoordinates } from './lib/utils'
 import { useLoaderData, useNavigate } from 'react-router-dom'
 import { type IndexLoaderData } from 'lib/types'
 import { PATHS } from 'lib/paths'
@@ -10,6 +14,7 @@ import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { onboardingPaths } from 'routes/Onboarding/paths'
 import { useEngineConnectionSubscriptions } from 'hooks/useEngineConnectionSubscriptions'
 import { codeManager, engineCommandManager } from 'lib/singletons'
+import { useModelingContext } from 'hooks/useModelingContext'
 import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath'
 import { isDesktop } from 'lib/isDesktop'
 import { useLspContext } from 'components/LspProvider'
@@ -21,6 +26,7 @@ import useHotkeyWrapper from 'lib/hotkeyWrapper'
 import Gizmo from 'components/Gizmo'
 import { CoreDumpManager } from 'lib/coredump'
 import { UnitsMenu } from 'components/UnitsMenu'
+import { reportRejection } from 'lib/trap'
 
 export function App() {
   const { project, file } = useLoaderData() as IndexLoaderData
@@ -39,6 +45,7 @@ export function App() {
   }, [projectName, projectPath])
 
   useHotKeyListener()
+  const { context, state } = useModelingContext()
 
   const { auth, settings } = useSettingsAuthContext()
   const token = auth?.context?.token
@@ -67,14 +74,61 @@ export function App() {
     (p) => p === onboardingStatus.current
   )
     ? 'opacity-20'
+    : context.store?.didDragInStream
+    ? 'opacity-40'
     : ''
 
   useEngineConnectionSubscriptions()
 
+  const debounceSocketSend = throttle<EngineCommand>((message) => {
+    engineCommandManager.sendSceneCommand(message).catch(reportRejection)
+  }, 1000 / 15)
+  const handleMouseMove: MouseEventHandler<HTMLDivElement> = (e) => {
+    if (state.matches('Sketch')) {
+      return
+    }
+
+    const { x, y } = getNormalisedCoordinates({
+      clientX: e.clientX,
+      clientY: e.clientY,
+      el: e.currentTarget,
+      ...context.store?.streamDimensions,
+    })
+
+    const newCmdId = uuidv4()
+    if (state.matches({ idle: 'showPlanes' })) return
+    if (context.store?.buttonDownInStream !== undefined) return
+    debounceSocketSend({
+      type: 'modeling_cmd_req',
+      cmd: {
+        type: 'highlight_set_entity',
+        selected_at_window: { x, y },
+      },
+      cmd_id: newCmdId,
+    })
+  }
+
   return (
-    <div className="relative h-full flex flex-col" ref={ref}>
+    <div
+      className="relative h-full flex flex-col"
+      onMouseMove={handleMouseMove}
+      ref={ref}
+    >
       <AppHeader
-        className={'transition-opacity transition-duration-75 ' + paneOpacity}
+        className={
+          'transition-opacity transition-duration-75 ' +
+          paneOpacity +
+          (context.store?.buttonDownInStream ? ' pointer-events-none' : '')
+        }
+        // Override the electron window draggable region behavior as well
+        // when the button is down in the stream
+        style={
+          isDesktop() && context.store?.buttonDownInStream
+            ? ({
+                '-webkit-app-region': 'no-drag',
+              } as React.CSSProperties)
+            : {}
+        }
         project={{ project, file }}
         enableMenu={true}
       />

src/Toolbar.tsx

@@ -124,7 +124,7 @@ export function Toolbar({
   }, [currentMode, disableAllButtons, configCallbackProps])
 
   return (
-    <menu className="max-w-full whitespace-nowrap rounded-b px-2 py-1 bg-chalkboard-10 dark:bg-chalkboard-90 relative border border-chalkboard-30 dark:border-chalkboard-80 border-t-0 shadow-sm">
+    <menu className="max-w-full whitespace-nowrap rounded-b px-2 py-1 bg-chalkboard-10 dark:bg-chalkboard-90 relative border border-chalkboard-20 dark:border-chalkboard-80 border-t-0 shadow-sm">
       <ul
         {...props}
         ref={toolbarButtonsRef}

src/clientSideScene/CameraControls.ts

@@ -31,7 +31,6 @@ import { reportRejection } from 'lib/trap'
 
 const ORTHOGRAPHIC_CAMERA_SIZE = 20
 const FRAMES_TO_ANIMATE_IN = 30
-const ORTHOGRAPHIC_MAGIC_FOV = 4
 
 const tempQuaternion = new Quaternion() // just used for maths
 
@@ -85,7 +84,7 @@ export class CameraControls {
   pendingPan: Vector2 | null = null
   interactionGuards: MouseGuard = cameraMouseDragGuards.KittyCAD
   isFovAnimationInProgress = false
-  perspectiveFovBeforeOrtho = 45
+  fovBeforeOrtho = 45
   get isPerspective() {
     return this.camera instanceof PerspectiveCamera
   }
@@ -344,8 +343,7 @@ export class CameraControls {
     this.camera.updateProjectionMatrix()
   }
 
-  onMouseDown = (event: PointerEvent) => {
-    this.domElement.setPointerCapture(event.pointerId)
+  onMouseDown = (event: MouseEvent) => {
     this.isDragging = true
     this.mouseDownPosition.set(event.clientX, event.clientY)
     let interaction = this.getInteractionType(event)
@@ -365,7 +363,7 @@ export class CameraControls {
     }
   }
 
-  onMouseMove = (event: PointerEvent) => {
+  onMouseMove = (event: MouseEvent) => {
     if (this.isDragging) {
       this.mouseNewPosition.set(event.clientX, event.clientY)
       const deltaMove = this.mouseNewPosition
@@ -399,33 +397,14 @@ export class CameraControls {
           const zoomFudgeFactor = 2280
           distance = zoomFudgeFactor / (this.camera.zoom * 45)
         }
-        const panSpeed = (distance / 1000 / 45) * this.perspectiveFovBeforeOrtho
+        const panSpeed = (distance / 1000 / 45) * this.fovBeforeOrtho
         this.pendingPan.x += -deltaMove.x * panSpeed
         this.pendingPan.y += deltaMove.y * panSpeed
       }
-    } else {
-      /**
-       * If we're not in sketch mode and not dragging, we can highlight entities
-       * under the cursor. This recently moved from being handled in App.tsx.
-       * This might not be the right spot, but it is more consolidated.
-       */
-      if (this.syncDirection === 'engineToClient') {
-        const newCmdId = uuidv4()
-
-        this.throttledEngCmd({
-          type: 'modeling_cmd_req',
-          cmd: {
-            type: 'highlight_set_entity',
-            selected_at_window: { x: event.clientX, y: event.clientY },
-          },
-          cmd_id: newCmdId,
-        })
-      }
     }
   }
 
-  onMouseUp = (event: PointerEvent) => {
-    this.domElement.releasePointerCapture(event.pointerId)
+  onMouseUp = (event: MouseEvent) => {
     this.isDragging = false
     this.handleEnd()
     if (this.syncDirection === 'engineToClient') {
@@ -444,19 +423,8 @@ export class CameraControls {
   }
 
   onMouseWheel = (event: WheelEvent) => {
-    const interaction = this.getInteractionType(event)
-    if (interaction === 'none') return
-    event.preventDefault()
-
     if (this.syncDirection === 'engineToClient') {
-      if (interaction === 'zoom') {
-        this.zoomDataFromLastFrame = event.deltaY
-      } else {
-        // This case will get handled when we add pan and rotate using Apple trackpad.
-        console.error(
-          `Unexpected interaction type for engineToClient wheel event: ${interaction}`
-        )
-      }
+      this.zoomDataFromLastFrame = event.deltaY
       return
     }
 
@@ -466,16 +434,8 @@ export class CameraControls {
     // zoom commands to engine. This means dropping some zoom
     // commands too.
     // From onMouseMove zoom handling which seems to be really smooth
-
     this.handleStart()
-    if (interaction === 'zoom') {
-      this.pendingZoom = 1 + (event.deltaY / window.devicePixelRatio) * 0.001
-    } else {
-      // This case will get handled when we add pan and rotate using Apple trackpad.
-      console.error(
-        `Unexpected interaction type for wheel event: ${interaction}`
-      )
-    }
+    this.pendingZoom = 1 + (event.deltaY / window.devicePixelRatio) * 0.001
     this.handleEnd()
   }
 
@@ -536,15 +496,19 @@ export class CameraControls {
   _usePerspectiveCamera = () => {
     const { x: px, y: py, z: pz } = this.camera.position
     const { x: qx, y: qy, z: qz, w: qw } = this.camera.quaternion
+    const zoom = this.camera.zoom
     this.camera = this.createPerspectiveCamera()
 
     this.camera.position.set(px, py, pz)
     this.camera.quaternion.set(qx, qy, qz, qw)
+    const zoomFudgeFactor = 2280
+    const distance = zoomFudgeFactor / (zoom * this.lastPerspectiveFov)
     const direction = new Vector3().subVectors(
       this.camera.position,
       this.target
     )
     direction.normalize()
+    this.camera.position.copy(this.target).addScaledVector(direction, distance)
   }
   usePerspectiveCamera = async (forceSend = false) => {
     this._usePerspectiveCamera()
@@ -586,7 +550,7 @@ export class CameraControls {
     const oldFov = this.camera.fov
 
     const viewHeightFactor = (fov: number) => {
-      /*       *
+      /*       * 
               /|
              / |
             /  |
@@ -996,9 +960,9 @@ export class CameraControls {
         )
       this.isFovAnimationInProgress = true
       let currentFov = this.lastPerspectiveFov
-      this.perspectiveFovBeforeOrtho = currentFov
+      this.fovBeforeOrtho = currentFov
 
-      const targetFov = ORTHOGRAPHIC_MAGIC_FOV
+      const targetFov = 4
       const fovAnimationStep = (currentFov - targetFov) / FRAMES_TO_ANIMATE_IN
       let frameWaitOnFinish = 10
 
@@ -1034,9 +998,9 @@ export class CameraControls {
         )
       }
       this.isFovAnimationInProgress = true
-      const targetFov = this.perspectiveFovBeforeOrtho // Target FOV for perspective
-      this.lastPerspectiveFov = ORTHOGRAPHIC_MAGIC_FOV
-      let currentFov = ORTHOGRAPHIC_MAGIC_FOV
+      const targetFov = this.fovBeforeOrtho // Target FOV for perspective
+      this.lastPerspectiveFov = 4
+      let currentFov = 4
       const initialCameraUp = this.camera.up.clone()
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       this.usePerspectiveCamera()
@@ -1072,8 +1036,9 @@ export class CameraControls {
       )
     }
     this.isFovAnimationInProgress = true
-    const targetFov = this.perspectiveFovBeforeOrtho // Target FOV for perspective
-    let currentFov = ORTHOGRAPHIC_MAGIC_FOV
+    const targetFov = this.fovBeforeOrtho // Target FOV for perspective
+    this.lastPerspectiveFov = 4
+    let currentFov = 4
     const initialCameraUp = this.camera.up.clone()
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     this.usePerspectiveCamera()
@@ -1142,7 +1107,7 @@ export class CameraControls {
     this.deferReactUpdate(this.reactCameraProperties)
     Object.values(this._camChangeCallbacks).forEach((cb) => cb())
   }
-  getInteractionType = (event: MouseEvent) =>
+  getInteractionType = (event: any) =>
     _getInteractionType(
       this.interactionGuards,
       event,
@@ -1224,7 +1189,7 @@ function convertThreeCamValuesToEngineCam({
   const lookAt = buildLookAt(64 / zoom, target, position)
   return {
     center: new Vector3(lookAt.center.x, lookAt.center.y, lookAt.center.z),
-    up: new Vector3(upVector.x, upVector.y, upVector.z),
+    up: new Vector3(0, 0, 1),
     vantage: new Vector3(lookAt.eye.x, lookAt.eye.y, lookAt.eye.z),
   }
 }
@@ -1250,21 +1215,16 @@ function _lookAt(position: Vector3, target: Vector3, up: Vector3): Quaternion {
 
 function _getInteractionType(
   interactionGuards: MouseGuard,
-  event: MouseEvent | WheelEvent,
+  event: any,
   enablePan: boolean,
   enableRotate: boolean,
   enableZoom: boolean
 ): interactionType | 'none' {
-  if (event instanceof WheelEvent) {
-    if (enableZoom && interactionGuards.zoom.scrollCallback(event))
-      return 'zoom'
-  } else {
-    if (enablePan && interactionGuards.pan.callback(event)) return 'pan'
-    if (enableRotate && interactionGuards.rotate.callback(event))
-      return 'rotate'
-    if (enableZoom && interactionGuards.zoom.dragCallback(event)) return 'zoom'
-  }
-  return 'none'
+  let state: interactionType | 'none' = 'none'
+  if (enablePan && interactionGuards.pan.callback(event)) return 'pan'
+  if (enableRotate && interactionGuards.rotate.callback(event)) return 'rotate'
+  if (enableZoom && interactionGuards.zoom.dragCallback(event)) return 'zoom'
+  return state
 }
 
 /**

src/clientSideScene/ClientSideSceneComp.tsx

@@ -124,7 +124,8 @@ export const ClientSideScene = ({
     } else if (
       state.matches({ Sketch: 'Line tool' }) ||
       state.matches({ Sketch: 'Tangential arc to' }) ||
-      state.matches({ Sketch: 'Rectangle tool' })
+      state.matches({ Sketch: 'Rectangle tool' }) ||
+      state.matches({ Sketch: 'Circle tool' })
     ) {
       cursor = 'crosshair'
     } else {
@@ -512,6 +513,11 @@ const ConstraintSymbol = ({
       displayName: 'Intersection Offset',
       iconName: 'intersection-offset',
     },
+    radius: {
+      varName: 'radius',
+      displayName: 'Radius',
+      iconName: 'dimension',
+    },
 
     // implicit constraints
     vertical: {
@@ -540,7 +546,7 @@ const ConstraintSymbol = ({
       iconName: 'dimension',
     },
   }
-  const varName = varNameMap?.[_type]?.varName || 'var'
+  const varName = _type in varNameMap ? varNameMap[_type].varName : 'var'
   const name: CustomIconName = varNameMap[_type].iconName
   const displayName = varNameMap[_type]?.displayName
   const implicitDesc = varNameMap[_type]?.implicitConstraintDesc

src/clientSideScene/sceneInfra.ts

@@ -105,23 +105,27 @@ export class SceneInfra {
   _baseUnit: BaseUnit = 'mm'
   _baseUnitMultiplier = 1
   _theme: Themes = Themes.System
+  _streamDimensions: { streamWidth: number; streamHeight: number } = {
+    streamWidth: 1280,
+    streamHeight: 720,
+  }
   extraSegmentTexture: Texture
   lastMouseState: MouseState = { type: 'idle' }
-  onDragStartCallback: (arg: OnDragCallbackArgs) => void = () => {}
-  onDragEndCallback: (arg: OnDragCallbackArgs) => void = () => {}
-  onDragCallback: (arg: OnDragCallbackArgs) => void = () => {}
-  onMoveCallback: (arg: OnMoveCallbackArgs) => void = () => {}
-  onClickCallback: (arg: OnClickCallbackArgs) => void = () => {}
-  onMouseEnter: (arg: OnMouseEnterLeaveArgs) => void = () => {}
-  onMouseLeave: (arg: OnMouseEnterLeaveArgs) => void = () => {}
+  onDragStartCallback: (arg: OnDragCallbackArgs) => any = () => {}
+  onDragEndCallback: (arg: OnDragCallbackArgs) => any = () => {}
+  onDragCallback: (arg: OnDragCallbackArgs) => any = () => {}
+  onMoveCallback: (arg: OnMoveCallbackArgs) => any = () => {}
+  onClickCallback: (arg: OnClickCallbackArgs) => any = () => {}
+  onMouseEnter: (arg: OnMouseEnterLeaveArgs) => any = () => {}
+  onMouseLeave: (arg: OnMouseEnterLeaveArgs) => any = () => {}
   setCallbacks = (callbacks: {
-    onDragStart?: (arg: OnDragCallbackArgs) => void
-    onDragEnd?: (arg: OnDragCallbackArgs) => void
-    onDrag?: (arg: OnDragCallbackArgs) => void
-    onMove?: (arg: OnMoveCallbackArgs) => void
-    onClick?: (arg: OnClickCallbackArgs) => void
-    onMouseEnter?: (arg: OnMouseEnterLeaveArgs) => void
-    onMouseLeave?: (arg: OnMouseEnterLeaveArgs) => void
+    onDragStart?: (arg: OnDragCallbackArgs) => any
+    onDragEnd?: (arg: OnDragCallbackArgs) => any
+    onDrag?: (arg: OnDragCallbackArgs) => any
+    onMove?: (arg: OnMoveCallbackArgs) => any
+    onClick?: (arg: OnClickCallbackArgs) => any
+    onMouseEnter?: (arg: OnMouseEnterLeaveArgs) => any
+    onMouseLeave?: (arg: OnMouseEnterLeaveArgs) => any
   }) => {
     this.onDragStartCallback = callbacks.onDragStart || this.onDragStartCallback
     this.onDragEndCallback = callbacks.onDragEnd || this.onDragEndCallback

src/clientSideScene/segments.ts

@@ -24,9 +24,12 @@ import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js
 import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'
 import { PathToNode, SketchGroup, getTangentialArcToInfo } from 'lang/wasm'
 import {
+  CIRCLE_CENTER_HANDLE,
+  CIRCLE_SEGMENT,
+  CIRCLE_SEGMENT_BODY,
+  CIRCLE_SEGMENT_DASH,
   EXTRA_SEGMENT_HANDLE,
   EXTRA_SEGMENT_OFFSET_PX,
-  HIDE_HOVER_SEGMENT_LENGTH,
   HIDE_SEGMENT_LENGTH,
   PROFILE_START,
   SEGMENT_WIDTH_PX,
@@ -36,446 +39,16 @@ import {
   TANGENTIAL_ARC_TO_SEGMENT,
   TANGENTIAL_ARC_TO_SEGMENT_BODY,
   TANGENTIAL_ARC_TO__SEGMENT_DASH,
-  getParentGroup,
 } from './sceneEntities'
 import { getTangentPointFromPreviousArc } from 'lib/utils2d'
 import {
   ARROWHEAD,
-  SceneInfra,
   SEGMENT_LENGTH_LABEL,
   SEGMENT_LENGTH_LABEL_OFFSET_PX,
   SEGMENT_LENGTH_LABEL_TEXT,
 } from './sceneInfra'
 import { Themes, getThemeColorForThreeJs } from 'lib/theme'
-import { normaliseAngle, roundOff } from 'lib/utils'
-import { SegmentOverlayPayload } from 'machines/modelingMachine'
-import { SegmentInputs } from 'lang/std/stdTypes'
-import { err } from 'lib/trap'
-
-interface CreateSegmentArgs {
-  input: SegmentInputs
-  prevSegment: SketchGroup['value'][number]
-  id: string
-  pathToNode: PathToNode
-  isDraftSegment?: boolean
-  scale?: number
-  callExpName: string
-  texture: Texture
-  theme: Themes
-  isSelected?: boolean
-  sceneInfra: SceneInfra
-}
-
-interface UpdateSegmentArgs {
-  input: SegmentInputs
-  prevSegment: SketchGroup['value'][number]
-  group: Group
-  sceneInfra: SceneInfra
-  scale?: number
-}
-
-interface CreateSegmentResult {
-  group: Group
-  updateOverlaysCallback: () => SegmentOverlayPayload | null
-}
-
-export interface SegmentUtils {
-  /**
-   * the init is responsible for adding all of the correct entities to the group with important details like `mesh.name = ...`
-   * as these act like handles later
-   *
-   * It's **Not** responsible for doing all calculations to size and position the entities as this would be duplicated in the update function
-   * Which should instead be called at the end of the init function
-   */
-  init: (args: CreateSegmentArgs) => CreateSegmentResult | Error
-  /**
-   * The update function is responsible for updating the group with the correct size and position of the entities
-   * It should be called at the end of the init function and return a callback that can be used to update the overlay
-   *
-   * It returns a callback for updating the overlays, this is so the overlays do not have to update at the same pace threeJs does
-   * This is useful for performance reasons
-   */
-  update: (
-    args: UpdateSegmentArgs
-  ) => CreateSegmentResult['updateOverlaysCallback'] | Error
-}
-
-class StraightSegment implements SegmentUtils {
-  init: SegmentUtils['init'] = ({
-    input,
-    id,
-    pathToNode,
-    isDraftSegment,
-    scale = 1,
-    callExpName,
-    texture,
-    theme,
-    isSelected = false,
-    sceneInfra,
-    prevSegment,
-  }) => {
-    if (input.type !== 'straight-segment')
-      return new Error('Invalid segment type')
-    const { from, to } = input
-    const baseColor =
-      callExpName === 'close' ? 0x444444 : getThemeColorForThreeJs(theme)
-    const color = isSelected ? 0x0000ff : baseColor
-    const meshType = isDraftSegment
-      ? STRAIGHT_SEGMENT_DASH
-      : STRAIGHT_SEGMENT_BODY
-
-    const segmentGroup = new Group()
-    const shape = new Shape()
-    const line = new LineCurve3(
-      new Vector3(from[0], from[1], 0),
-      new Vector3(to[0], to[1], 0)
-    )
-    const geometry = new ExtrudeGeometry(shape, {
-      steps: 2,
-      bevelEnabled: false,
-      extrudePath: line,
-    })
-    const body = new MeshBasicMaterial({ color })
-    const mesh = new Mesh(geometry, body)
-
-    mesh.userData.type = meshType
-    mesh.name = meshType
-    segmentGroup.name = STRAIGHT_SEGMENT
-    segmentGroup.userData = {
-      type: STRAIGHT_SEGMENT,
-      id,
-      from,
-      to,
-      pathToNode,
-      isSelected,
-      callExpName,
-      baseColor,
-    }
-
-    // All segment types get an extra segment handle,
-    // Which is a little plus sign that appears at the origin of the segment
-    // and can be dragged to insert a new segment
-    const extraSegmentGroup = createExtraSegmentHandle(scale, texture, theme)
-
-    // Segment decorators that only apply to non-close segments
-    if (callExpName !== 'close') {
-      // an arrowhead that appears at the end of the segment
-      const arrowGroup = createArrowhead(scale, theme, color)
-      // A length indicator that appears at the midpoint of the segment
-      const lengthIndicatorGroup = createLengthIndicator({
-        from,
-        to,
-        scale,
-      })
-      segmentGroup.add(arrowGroup)
-      segmentGroup.add(lengthIndicatorGroup)
-    }
-
-    segmentGroup.add(mesh, extraSegmentGroup)
-    let updateOverlaysCallback = this.update({
-      prevSegment,
-      input,
-      group: segmentGroup,
-      scale,
-      sceneInfra,
-    })
-    if (err(updateOverlaysCallback)) return updateOverlaysCallback
-
-    return {
-      group: segmentGroup,
-      updateOverlaysCallback,
-    }
-  }
-
-  update: SegmentUtils['update'] = ({
-    input,
-    group,
-    scale = 1,
-    sceneInfra,
-  }) => {
-    if (input.type !== 'straight-segment')
-      return new Error('Invalid segment type')
-    const { from, to } = input
-    group.userData.from = from
-    group.userData.to = to
-    const shape = new Shape()
-    shape.moveTo(0, (-SEGMENT_WIDTH_PX / 2) * scale) // The width of the line in px (2.4px in this case)
-    shape.lineTo(0, (SEGMENT_WIDTH_PX / 2) * scale)
-    const arrowGroup = group.getObjectByName(ARROWHEAD) as Group
-    const labelGroup = group.getObjectByName(SEGMENT_LENGTH_LABEL) as Group
-
-    const length = Math.sqrt(
-      Math.pow(to[0] - from[0], 2) + Math.pow(to[1] - from[1], 2)
-    )
-
-    const pxLength = length / scale
-    const shouldHideIdle = pxLength < HIDE_SEGMENT_LENGTH
-    const shouldHideHover = pxLength < HIDE_HOVER_SEGMENT_LENGTH
-
-    const hoveredParent =
-      sceneInfra.hoveredObject &&
-      getParentGroup(sceneInfra.hoveredObject, [STRAIGHT_SEGMENT])
-    let isHandlesVisible = !shouldHideIdle
-    if (hoveredParent && hoveredParent?.uuid === group?.uuid) {
-      isHandlesVisible = !shouldHideHover
-    }
-
-    if (arrowGroup) {
-      arrowGroup.position.set(to[0], to[1], 0)
-
-      const dir = new Vector3()
-        .subVectors(
-          new Vector3(to[0], to[1], 0),
-          new Vector3(from[0], from[1], 0)
-        )
-        .normalize()
-      arrowGroup.quaternion.setFromUnitVectors(new Vector3(0, 1, 0), dir)
-      arrowGroup.scale.set(scale, scale, scale)
-      arrowGroup.visible = isHandlesVisible
-    }
-
-    const extraSegmentGroup = group.getObjectByName(EXTRA_SEGMENT_HANDLE)
-    if (extraSegmentGroup) {
-      const offsetFromBase = new Vector2(to[0] - from[0], to[1] - from[1])
-        .normalize()
-        .multiplyScalar(EXTRA_SEGMENT_OFFSET_PX * scale)
-      extraSegmentGroup.position.set(
-        from[0] + offsetFromBase.x,
-        from[1] + offsetFromBase.y,
-        0
-      )
-      extraSegmentGroup.scale.set(scale, scale, scale)
-      extraSegmentGroup.visible = isHandlesVisible
-    }
-
-    if (labelGroup) {
-      const labelWrapper = labelGroup.getObjectByName(
-        SEGMENT_LENGTH_LABEL_TEXT
-      ) as CSS2DObject
-      const labelWrapperElem = labelWrapper.element as HTMLDivElement
-      const label = labelWrapperElem.children[0] as HTMLParagraphElement
-      label.innerText = `${roundOff(length)}`
-      label.classList.add(SEGMENT_LENGTH_LABEL_TEXT)
-      const slope = (to[1] - from[1]) / (to[0] - from[0])
-      let slopeAngle = ((Math.atan(slope) * 180) / Math.PI) * -1
-      label.style.setProperty('--degree', `${slopeAngle}deg`)
-      label.style.setProperty('--x', `0px`)
-      label.style.setProperty('--y', `0px`)
-      labelWrapper.position.set((from[0] + to[0]) / 2, (from[1] + to[1]) / 2, 0)
-      labelGroup.visible = isHandlesVisible
-    }
-
-    const straightSegmentBody = group.children.find(
-      (child) => child.userData.type === STRAIGHT_SEGMENT_BODY
-    ) as Mesh
-    if (straightSegmentBody) {
-      const line = new LineCurve3(
-        new Vector3(from[0], from[1], 0),
-        new Vector3(to[0], to[1], 0)
-      )
-      straightSegmentBody.geometry = new ExtrudeGeometry(shape, {
-        steps: 2,
-        bevelEnabled: false,
-        extrudePath: line,
-      })
-    }
-    const straightSegmentBodyDashed = group.children.find(
-      (child) => child.userData.type === STRAIGHT_SEGMENT_DASH
-    ) as Mesh
-    if (straightSegmentBodyDashed) {
-      straightSegmentBodyDashed.geometry = dashedStraight(
-        from,
-        to,
-        shape,
-        scale
-      )
-    }
-    return () =>
-      sceneInfra.updateOverlayDetails({
-        arrowGroup,
-        group,
-        isHandlesVisible,
-        from,
-        to,
-      })
-  }
-}
-
-class TangentialArcToSegment implements SegmentUtils {
-  init: SegmentUtils['init'] = ({
-    prevSegment,
-    input,
-    id,
-    pathToNode,
-    isDraftSegment,
-    scale = 1,
-    texture,
-    theme,
-    isSelected,
-    sceneInfra,
-  }) => {
-    if (input.type !== 'straight-segment')
-      return new Error('Invalid segment type')
-    const { from, to } = input
-    const meshName = isDraftSegment
-      ? TANGENTIAL_ARC_TO__SEGMENT_DASH
-      : TANGENTIAL_ARC_TO_SEGMENT_BODY
-
-    const group = new Group()
-    const geometry = createArcGeometry({
-      center: [0, 0],
-      radius: 1,
-      startAngle: 0,
-      endAngle: 1,
-      ccw: true,
-      isDashed: isDraftSegment,
-      scale,
-    })
-    const baseColor = getThemeColorForThreeJs(theme)
-    const color = isSelected ? 0x0000ff : baseColor
-    const body = new MeshBasicMaterial({ color })
-    const mesh = new Mesh(geometry, body)
-    const arrowGroup = createArrowhead(scale, theme, color)
-    const extraSegmentGroup = createExtraSegmentHandle(scale, texture, theme)
-
-    group.name = TANGENTIAL_ARC_TO_SEGMENT
-    mesh.userData.type = meshName
-    mesh.name = meshName
-    group.userData = {
-      type: TANGENTIAL_ARC_TO_SEGMENT,
-      id,
-      from,
-      to,
-      prevSegment,
-      pathToNode,
-      isSelected,
-      baseColor,
-    }
-
-    group.add(mesh, arrowGroup, extraSegmentGroup)
-    const updateOverlaysCallback = this.update({
-      prevSegment,
-      input,
-      group,
-      scale,
-      sceneInfra,
-    })
-    if (err(updateOverlaysCallback)) return updateOverlaysCallback
-
-    return {
-      group,
-      updateOverlaysCallback,
-    }
-  }
-
-  update: SegmentUtils['update'] = ({
-    prevSegment,
-    input,
-    group,
-    scale = 1,
-    sceneInfra,
-  }) => {
-    if (input.type !== 'straight-segment')
-      return new Error('Invalid segment type')
-    const { from, to } = input
-    group.userData.from = from
-    group.userData.to = to
-    group.userData.prevSegment = prevSegment
-    const arrowGroup = group.getObjectByName(ARROWHEAD) as Group
-    const extraSegmentGroup = group.getObjectByName(EXTRA_SEGMENT_HANDLE)
-
-    const previousPoint =
-      prevSegment?.type === 'TangentialArcTo'
-        ? getTangentPointFromPreviousArc(
-            prevSegment.center,
-            prevSegment.ccw,
-            prevSegment.to
-          )
-        : prevSegment.from
-
-    const arcInfo = getTangentialArcToInfo({
-      arcStartPoint: from,
-      arcEndPoint: to,
-      tanPreviousPoint: previousPoint,
-      obtuse: true,
-    })
-
-    const pxLength = arcInfo.arcLength / scale
-    const shouldHideIdle = pxLength < HIDE_SEGMENT_LENGTH
-    const shouldHideHover = pxLength < HIDE_HOVER_SEGMENT_LENGTH
-
-    const hoveredParent =
-      sceneInfra?.hoveredObject &&
-      getParentGroup(sceneInfra.hoveredObject, [TANGENTIAL_ARC_TO_SEGMENT])
-    let isHandlesVisible = !shouldHideIdle
-    if (hoveredParent && hoveredParent?.uuid === group?.uuid) {
-      isHandlesVisible = !shouldHideHover
-    }
-
-    if (arrowGroup) {
-      arrowGroup.position.set(to[0], to[1], 0)
-
-      const arrowheadAngle =
-        arcInfo.endAngle + (Math.PI / 2) * (arcInfo.ccw ? 1 : -1)
-      arrowGroup.quaternion.setFromUnitVectors(
-        new Vector3(0, 1, 0),
-        new Vector3(Math.cos(arrowheadAngle), Math.sin(arrowheadAngle), 0)
-      )
-      arrowGroup.scale.set(scale, scale, scale)
-      arrowGroup.visible = isHandlesVisible
-    }
-
-    if (extraSegmentGroup) {
-      const circumferenceInPx = (2 * Math.PI * arcInfo.radius) / scale
-      const extraSegmentAngleDelta =
-        (EXTRA_SEGMENT_OFFSET_PX / circumferenceInPx) * Math.PI * 2
-      const extraSegmentAngle =
-        arcInfo.startAngle + (arcInfo.ccw ? 1 : -1) * extraSegmentAngleDelta
-      const extraSegmentOffset = new Vector2(
-        Math.cos(extraSegmentAngle) * arcInfo.radius,
-        Math.sin(extraSegmentAngle) * arcInfo.radius
-      )
-      extraSegmentGroup.position.set(
-        arcInfo.center[0] + extraSegmentOffset.x,
-        arcInfo.center[1] + extraSegmentOffset.y,
-        0
-      )
-      extraSegmentGroup.scale.set(scale, scale, scale)
-      extraSegmentGroup.visible = isHandlesVisible
-    }
-
-    const tangentialArcToSegmentBody = group.children.find(
-      (child) => child.userData.type === TANGENTIAL_ARC_TO_SEGMENT_BODY
-    ) as Mesh
-
-    if (tangentialArcToSegmentBody) {
-      const newGeo = createArcGeometry({ ...arcInfo, scale })
-      tangentialArcToSegmentBody.geometry = newGeo
-    }
-    const tangentialArcToSegmentBodyDashed = group.getObjectByName(
-      TANGENTIAL_ARC_TO__SEGMENT_DASH
-    )
-    if (tangentialArcToSegmentBodyDashed instanceof Mesh) {
-      tangentialArcToSegmentBodyDashed.geometry = createArcGeometry({
-        ...arcInfo,
-        isDashed: true,
-        scale,
-      })
-    }
-    const angle = normaliseAngle(
-      (arcInfo.endAngle * 180) / Math.PI + (arcInfo.ccw ? 90 : -90)
-    )
-    return () =>
-      sceneInfra.updateOverlayDetails({
-        arrowGroup,
-        group,
-        isHandlesVisible,
-        from,
-        to,
-        angle,
-      })
-  }
-}
+import { roundOff } from 'lib/utils'
 
 export function createProfileStartHandle({
   from,
@@ -516,6 +89,127 @@ export function createProfileStartHandle({
   return group
 }
 
+export function straightSegment({
+  from,
+  to,
+  id,
+  pathToNode,
+  isDraftSegment,
+  scale = 1,
+  callExpName,
+  texture,
+  theme,
+  isSelected = false,
+}: {
+  from: Coords2d
+  to: Coords2d
+  id: string
+  pathToNode: PathToNode
+  isDraftSegment?: boolean
+  scale?: number
+  callExpName: string
+  texture: Texture
+  theme: Themes
+  isSelected?: boolean
+}): Group {
+  const segmentGroup = new Group()
+
+  const shape = new Shape()
+  shape.moveTo(0, (-SEGMENT_WIDTH_PX / 2) * scale)
+  shape.lineTo(0, (SEGMENT_WIDTH_PX / 2) * scale)
+
+  let geometry
+  if (isDraftSegment) {
+    geometry = dashedStraight(from, to, shape, scale)
+  } else {
+    const line = new LineCurve3(
+      new Vector3(from[0], from[1], 0),
+      new Vector3(to[0], to[1], 0)
+    )
+
+    geometry = new ExtrudeGeometry(shape, {
+      steps: 2,
+      bevelEnabled: false,
+      extrudePath: line,
+    })
+  }
+
+  const baseColor =
+    callExpName === 'close' ? 0x444444 : getThemeColorForThreeJs(theme)
+  const color = isSelected ? 0x0000ff : baseColor
+  const body = new MeshBasicMaterial({ color })
+  const mesh = new Mesh(geometry, body)
+  mesh.userData.type = isDraftSegment
+    ? STRAIGHT_SEGMENT_DASH
+    : STRAIGHT_SEGMENT_BODY
+  mesh.name = STRAIGHT_SEGMENT_BODY
+
+  segmentGroup.userData = {
+    type: STRAIGHT_SEGMENT,
+    id,
+    from,
+    to,
+    pathToNode,
+    isSelected,
+    callExpName,
+    baseColor,
+  }
+  segmentGroup.name = STRAIGHT_SEGMENT
+  segmentGroup.add(mesh)
+
+  const length = Math.sqrt(
+    Math.pow(to[0] - from[0], 2) + Math.pow(to[1] - from[1], 2)
+  )
+  const pxLength = length / scale
+  const shouldHide = pxLength < HIDE_SEGMENT_LENGTH
+
+  // All segment types get an extra segment handle,
+  // Which is a little plus sign that appears at the origin of the segment
+  // and can be dragged to insert a new segment
+  const extraSegmentGroup = createExtraSegmentHandle(scale, texture, theme)
+  const directionVector = new Vector2(
+    to[0] - from[0],
+    to[1] - from[1]
+  ).normalize()
+  const offsetFromBase = directionVector.multiplyScalar(
+    EXTRA_SEGMENT_OFFSET_PX * scale
+  )
+  extraSegmentGroup.position.set(
+    from[0] + offsetFromBase.x,
+    from[1] + offsetFromBase.y,
+    0
+  )
+  extraSegmentGroup.visible = !shouldHide
+  segmentGroup.add(extraSegmentGroup)
+
+  // Segment decorators that only apply to non-close segments
+  if (callExpName !== 'close') {
+    // an arrowhead that appears at the end of the segment
+    const arrowGroup = createArrowhead(scale, theme, color)
+    arrowGroup.position.set(to[0], to[1], 0)
+    const dir = new Vector3()
+      .subVectors(
+        new Vector3(to[0], to[1], 0),
+        new Vector3(from[0], from[1], 0)
+      )
+      .normalize()
+    arrowGroup.quaternion.setFromUnitVectors(new Vector3(0, 1, 0), dir)
+    arrowGroup.visible = !shouldHide
+    segmentGroup.add(arrowGroup)
+
+    // A length indicator that appears at the midpoint of the segment
+    const lengthIndicatorGroup = createLengthIndicator({
+      from,
+      to,
+      scale,
+      length,
+    })
+    segmentGroup.add(lengthIndicatorGroup)
+  }
+
+  return segmentGroup
+}
+
 function createArrowhead(scale = 1, theme: Themes, color?: number): Group {
   const baseColor = getThemeColorForThreeJs(theme)
   const arrowMaterial = new MeshBasicMaterial({
@@ -535,6 +229,28 @@ function createArrowhead(scale = 1, theme: Themes, color?: number): Group {
   arrowGroup.scale.set(scale, scale, scale)
   return arrowGroup
 }
+function createCircleCenterHandle(
+  scale = 1,
+  theme: Themes,
+  color?: number
+): Group {
+  const circleCenterGroup = new Group()
+
+  const geometry = new BoxGeometry(12, 12, 12) // in pixels scaled later
+  const baseColor = getThemeColorForThreeJs(theme)
+  const body = new MeshBasicMaterial({ color })
+  const mesh = new Mesh(geometry, body)
+
+  circleCenterGroup.add(mesh)
+
+  circleCenterGroup.userData = {
+    type: CIRCLE_CENTER_HANDLE,
+    baseColor,
+  }
+  circleCenterGroup.name = CIRCLE_CENTER_HANDLE
+  circleCenterGroup.scale.set(scale, scale, scale)
+  return circleCenterGroup
+}
 
 function createExtraSegmentHandle(
   scale: number,
@@ -577,12 +293,12 @@ function createLengthIndicator({
   from,
   to,
   scale,
-  length = 0.1,
+  length,
 }: {
   from: Coords2d
   to: Coords2d
   scale: number
-  length?: number
+  length: number
 }) {
   const lengthIndicatorGroup = new Group()
   lengthIndicatorGroup.name = SEGMENT_LENGTH_LABEL
@@ -610,6 +326,191 @@ function createLengthIndicator({
   return lengthIndicatorGroup
 }
 
+export function circleSegment({
+  prevSegment,
+  from,
+  to,
+  center,
+  radius,
+  id,
+  pathToNode,
+  isDraftSegment,
+  scale = 1,
+  texture,
+  theme,
+  isSelected,
+}: {
+  prevSegment: SketchGroup['value'][number]
+  from: Coords2d
+  center: Coords2d
+  radius: number
+  to: Coords2d
+  id: string
+  pathToNode: PathToNode
+  isDraftSegment?: boolean
+  scale?: number
+  texture: Texture
+  theme: Themes
+  isSelected?: boolean
+}): Group {
+  const group = new Group()
+
+  const geometry = createArcGeometry({
+    center,
+    radius,
+    startAngle: 0,
+    endAngle: Math.PI * 2,
+    ccw: true,
+    isDashed: isDraftSegment,
+    scale,
+  })
+
+  const baseColor = getThemeColorForThreeJs(theme)
+  const color = isSelected ? 0x0000ff : baseColor
+  const body = new MeshBasicMaterial({ color })
+  const mesh = new Mesh(geometry, body)
+  mesh.userData.type = isDraftSegment
+    ? CIRCLE_SEGMENT_DASH
+    : CIRCLE_SEGMENT_BODY
+
+  group.userData = {
+    type: CIRCLE_SEGMENT,
+    id,
+    from,
+    to,
+    radius,
+    center,
+    ccw: true,
+    prevSegment,
+    pathToNode,
+    isSelected,
+    baseColor,
+  }
+  group.name = CIRCLE_SEGMENT
+
+  const arrowGroup = createArrowhead(scale, theme, color)
+  arrowGroup.position.set(
+    center[0] + Math.cos(Math.PI / 4) * radius,
+    center[1] + Math.sin(Math.PI / 4) * radius,
+    0
+  )
+
+  const circleCenterGroup = createCircleCenterHandle(scale, theme, color)
+  circleCenterGroup.position.set(center[0], center[1], 0)
+  const arrowheadAngle = Math.PI / 4
+  arrowGroup.quaternion.setFromUnitVectors(
+    new Vector3(0, 1, 0),
+    new Vector3(Math.cos(arrowheadAngle), Math.sin(arrowheadAngle), 0)
+  )
+
+  group.add(mesh, arrowGroup, circleCenterGroup)
+  return group
+}
+export function tangentialArcToSegment({
+  prevSegment,
+  from,
+  to,
+  id,
+  pathToNode,
+  isDraftSegment,
+  scale = 1,
+  texture,
+  theme,
+  isSelected,
+}: {
+  prevSegment: SketchGroup['value'][number]
+  from: Coords2d
+  to: Coords2d
+  id: string
+  pathToNode: PathToNode
+  isDraftSegment?: boolean
+  scale?: number
+  texture: Texture
+  theme: Themes
+  isSelected?: boolean
+}): Group {
+  const group = new Group()
+
+  const previousPoint =
+    prevSegment?.type === 'TangentialArcTo'
+      ? getTangentPointFromPreviousArc(
+          prevSegment.center,
+          prevSegment.ccw,
+          prevSegment.to
+        )
+      : prevSegment.from
+
+  const { center, radius, startAngle, endAngle, ccw, arcLength } =
+    getTangentialArcToInfo({
+      arcStartPoint: from,
+      arcEndPoint: to,
+      tanPreviousPoint: previousPoint,
+      obtuse: true,
+    })
+
+  const geometry = createArcGeometry({
+    center,
+    radius,
+    startAngle,
+    endAngle,
+    ccw,
+    isDashed: isDraftSegment,
+    scale,
+  })
+
+  const baseColor = getThemeColorForThreeJs(theme)
+  const color = isSelected ? 0x0000ff : baseColor
+  const body = new MeshBasicMaterial({ color })
+  const mesh = new Mesh(geometry, body)
+  mesh.userData.type = isDraftSegment
+    ? TANGENTIAL_ARC_TO__SEGMENT_DASH
+    : TANGENTIAL_ARC_TO_SEGMENT_BODY
+
+  group.userData = {
+    type: TANGENTIAL_ARC_TO_SEGMENT,
+    id,
+    from,
+    to,
+    prevSegment,
+    pathToNode,
+    isSelected,
+    baseColor,
+  }
+  group.name = TANGENTIAL_ARC_TO_SEGMENT
+
+  const arrowGroup = createArrowhead(scale, theme, color)
+  arrowGroup.position.set(to[0], to[1], 0)
+  const arrowheadAngle = endAngle + (Math.PI / 2) * (ccw ? 1 : -1)
+  arrowGroup.quaternion.setFromUnitVectors(
+    new Vector3(0, 1, 0),
+    new Vector3(Math.cos(arrowheadAngle), Math.sin(arrowheadAngle), 0)
+  )
+  const pxLength = arcLength / scale
+  const shouldHide = pxLength < HIDE_SEGMENT_LENGTH
+  arrowGroup.visible = !shouldHide
+
+  const extraSegmentGroup = createExtraSegmentHandle(scale, texture, theme)
+  const circumferenceInPx = (2 * Math.PI * radius) / scale
+  const extraSegmentAngleDelta =
+    (EXTRA_SEGMENT_OFFSET_PX / circumferenceInPx) * Math.PI * 2
+  const extraSegmentAngle = startAngle + (ccw ? 1 : -1) * extraSegmentAngleDelta
+  const extraSegmentOffset = new Vector2(
+    Math.cos(extraSegmentAngle) * radius,
+    Math.sin(extraSegmentAngle) * radius
+  )
+  extraSegmentGroup.position.set(
+    center[0] + extraSegmentOffset.x,
+    center[1] + extraSegmentOffset.y,
+    0
+  )
+
+  extraSegmentGroup.visible = !shouldHide
+
+  group.add(mesh, arrowGroup, extraSegmentGroup)
+
+  return group
+}
+
 export function createArcGeometry({
   center,
   radius,
@@ -784,8 +685,3 @@ export function dashedStraight(
   geo.userData.type = 'dashed'
   return geo
 }
-
-export const segmentUtils = {
-  straight: new StraightSegment(),
-  tangentialArcTo: new TangentialArcToSegment(),
-} as const

src/components/ActionIcon.tsx

@@ -29,8 +29,8 @@ export const ActionIcon = ({
   size = 'md',
   children,
 }: ActionIconProps) => {
-  const computedIconClassName = `h-auto text-inherit dark:text-current group-disabled:text-chalkboard-60 group-disabled:text-chalkboard-60 ${iconClassName}`
-  const computedBgClassName = `bg-chalkboard-20 dark:bg-chalkboard-80 group-disabled:bg-chalkboard-30 dark:group-disabled:bg-chalkboard-80 ${bgClassName}`
+  const computedIconClassName = `h-auto text-inherit dark:text-current !group-disabled:text-chalkboard-60 !group-disabled:text-chalkboard-60 ${iconClassName}`
+  const computedBgClassName = `bg-chalkboard-20 dark:bg-chalkboard-80 !group-disabled:bg-chalkboard-30 !dark:group-disabled:bg-chalkboard-80 ${bgClassName}`
 
   return (
     <div