Cut release v0.24.0 (#2972)

* Cut release v0.24.0

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Trigger CI

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Trigger CI

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Trigger CI

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Trigger CI

---------

Co-authored-by: Frank Noirot <frank@zoo.dev>
Co-authored-by: Jess Frazelle <jessfraz@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.github/workflows/ci.yml

@@ -138,6 +138,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - uses: actions/download-artifact@v3
+        if: github.event_name == 'schedule'
 
       - name: Copy updated .json files
         if: github.event_name == 'schedule'

README.md

@@ -124,36 +124,20 @@ Before you submit a contribution PR to this repo, please ensure that:
 
 ## Release a new version
 
-1. Bump the versions in the .json files by creating a `Cut release v{x}.{y}.{z}` PR, committing the changes from
+1. Bump the versions by running `./make-realease.sh` while on a fresh pull of main
 
-```bash
+That will create the branch with the updated json files for you.
-VERSION=x.y.z yarn run bump-jsons
-```
-
-Alternatively you can try the experimental `make-release.sh` bash script that will create the branch with the updated json files for you.
 run `./make-release.sh` for a patch update
 run `./make-release.sh "minor"` for minor
 run `./make-release.sh "major"` for major
 
-The PR may serve as a place to discuss the human-readable changelog and extra QA. A quick way of getting PR's merged since the last bump is to [use this PR filter](https://github.com/KittyCAD/modeling-app/pulls?q=is%3Apr+sort%3Aupdated-desc+is%3Amerged+), open up the browser console and paste in the following
+After it runs you should just need to push the push the branch and open a PR (it will suggest a changelog for you too, delete any that are not user facing)
 
-```typescript
+The PR may serve as a place to discuss the human-readable changelog and extra QA. 
-console.log(
-  '- ' +
-    Array.from(
-      document.querySelectorAll('[data-hovercard-type="pull_request"]')
-    ).map((a) => `[${a.innerText}](${a.href})`).join(`
-- `)
-)
-```
-
-grab the md list and delete any that are older than the last bump
 
 2. Merge the PR
 
-3. Create a new release and tag pointing to the bump version commit using semantic versioning `v{x}.{y}.{z}`
+3. Profit (A new Action kicks in at https://github.com/KittyCAD/modeling-app/actions if the PR was correctly named)
-
-4. A new Action kicks in at https://github.com/KittyCAD/modeling-app/actions, uploading artifacts to the release
 
 ## Fuzzing the parser
 

docs/kcl/angleToMatchLengthX.md

@@ -121,6 +121,9 @@ const extrusion = extrude(5, sketch001)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -282,6 +285,9 @@ const extrusion = extrude(5, sketch001)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/angleToMatchLengthY.md

@@ -125,6 +125,9 @@ const extrusion = extrude(5, sketch001)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -286,6 +289,9 @@ const extrusion = extrude(5, sketch001)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/angledLine.md

@@ -126,6 +126,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -287,6 +290,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -476,6 +482,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -637,6 +646,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/angledLineOfXLength.md

@@ -125,6 +125,9 @@ const extrusion = extrude(10, sketch001)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -286,6 +289,9 @@ const extrusion = extrude(10, sketch001)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -475,6 +481,9 @@ const extrusion = extrude(10, sketch001)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -636,6 +645,9 @@ const extrusion = extrude(10, sketch001)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/angledLineThatIntersects.md

@@ -133,6 +133,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -294,6 +297,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -483,6 +489,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -644,6 +653,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/angledLineToX.md

@@ -124,6 +124,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -285,6 +288,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -474,6 +480,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -635,6 +644,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/angledLineToY.md

@@ -124,6 +124,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -285,6 +288,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -474,6 +480,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -635,6 +644,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/arc.md

@@ -135,6 +135,9 @@ const exampleSketch = startSketchOn('XZ')
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -296,6 +299,9 @@ const exampleSketch = startSketchOn('XZ')
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -485,6 +491,9 @@ const exampleSketch = startSketchOn('XZ')
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -646,6 +655,9 @@ const exampleSketch = startSketchOn('XZ')
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/bezierCurve.md

@@ -130,6 +130,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -291,6 +294,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -480,6 +486,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -641,6 +650,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/chamfer.md

@@ -225,6 +225,9 @@ const mountingPlate = extrude(thickness, mountingPlateSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -532,6 +535,9 @@ const mountingPlate = extrude(thickness, mountingPlateSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/circle.md

@@ -123,6 +123,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -410,6 +413,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -599,6 +605,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -760,6 +769,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/close.md

@@ -125,6 +125,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -286,6 +289,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -475,6 +481,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -636,6 +645,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/extrude.md

@@ -150,6 +150,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -311,6 +314,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	type: "sketchGroup",
 	// The paths in the sketch group.
@@ -580,6 +586,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/fillet.md

@@ -225,6 +225,9 @@ const mountingPlate = extrude(thickness, mountingPlateSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -524,6 +527,9 @@ const mountingPlate = extrude(thickness, mountingPlateSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/getEdge.md

@@ -215,6 +215,9 @@ const revolution = startSketchOn(box, "revolveAxis")
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/getNextAdjacentEdge.md

@@ -211,6 +211,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/getOppositeEdge.md

@@ -211,6 +211,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/getPreviousAdjacentEdge.md

@@ -213,6 +213,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/helix.md

@@ -213,6 +213,9 @@ const part001 = startSketchOn('XY')
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -512,6 +515,9 @@ const part001 = startSketchOn('XY')
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/hole.md

@@ -136,6 +136,9 @@ const example = extrude(1, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -297,6 +300,9 @@ const example = extrude(1, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	type: "sketchGroup",
 	// The paths in the sketch group.
@@ -479,6 +485,9 @@ const example = extrude(1, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -640,6 +649,9 @@ const example = extrude(1, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -821,6 +833,9 @@ const example = extrude(1, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -982,6 +997,9 @@ const example = extrude(1, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/lastSegX.md

@@ -116,6 +116,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -277,6 +280,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/lastSegY.md

@@ -116,6 +116,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -277,6 +280,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/line.md

@@ -129,6 +129,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -290,6 +293,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -479,6 +485,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -640,6 +649,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/lineTo.md

@@ -116,6 +116,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -277,6 +280,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -466,6 +472,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -627,6 +636,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/patternCircular2d.md

@@ -134,6 +134,9 @@ const example = extrude(1, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -295,6 +298,9 @@ const example = extrude(1, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	type: "sketchGroup",
 	// The paths in the sketch group.

docs/kcl/patternCircular3d.md

@@ -217,6 +217,9 @@ const example = extrude(-5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/patternLinear2d.md

@@ -127,6 +127,9 @@ const example = extrude(1, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -288,6 +291,9 @@ const example = extrude(1, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	type: "sketchGroup",
 	// The paths in the sketch group.

docs/kcl/patternLinear3d.md

@@ -215,6 +215,9 @@ const example = extrude(1, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/patternTransform.md

@@ -217,6 +217,9 @@ let vase = layer()
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/profileStart.md

@@ -117,6 +117,9 @@ const sketch001 = startSketchOn('XY')
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -278,6 +281,9 @@ const sketch001 = startSketchOn('XY')
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/profileStartX.md

@@ -112,6 +112,9 @@ const sketch001 = startSketchOn('XY')
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -273,6 +276,9 @@ const sketch001 = startSketchOn('XY')
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/profileStartY.md

@@ -111,6 +111,9 @@ const sketch001 = startSketchOn('XY')
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -272,6 +275,9 @@ const sketch001 = startSketchOn('XY')
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/revolve.md

@@ -247,6 +247,9 @@ uuid |
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -408,6 +411,9 @@ uuid |
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -673,6 +679,9 @@ uuid |
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/segAng.md

@@ -124,6 +124,9 @@ const example = extrude(4, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -285,6 +288,9 @@ const example = extrude(4, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/segEndX.md

@@ -122,6 +122,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -283,6 +286,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/segEndY.md

@@ -123,6 +123,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -284,6 +287,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/segLen.md

@@ -121,6 +121,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -282,6 +285,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/shell.md

@@ -213,6 +213,9 @@ shell({ faces: ['end'], thickness: 0.25 }, firstSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -512,6 +515,9 @@ shell({ faces: ['end'], thickness: 0.25 }, firstSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/startProfileAt.md

@@ -195,6 +195,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -442,6 +445,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -603,6 +609,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/startSketchAt.md

@@ -142,6 +142,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -303,6 +306,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/startSketchOn.md

@@ -264,6 +264,9 @@ const a1 = startSketchOn({
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -539,6 +542,9 @@ const a1 = startSketchOn({
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/tangentialArc.md

@@ -125,6 +125,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -286,6 +289,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -475,6 +481,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -636,6 +645,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/tangentialArcTo.md

@@ -116,6 +116,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -277,6 +280,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -466,6 +472,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -627,6 +636,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/types.md

@@ -74,6 +74,107 @@ You can nest expressions in parenthesis as well:
 let myMathExpression = 3 + (1 * 2 / (3 - 7))
 ```
 
-Please if you find any issues using any of the above expressions or syntax
+## Tags
+
+Tags are used to give a name (tag) to a specific path.
+
+### Tag Declaration
+
+The syntax for declaring a tag is `$myTag` you would use it in the following
+way:
+
+```
+startSketchOn('XZ')
+  |> startProfileAt(origin, %)
+  |> angledLine([0, 191.26], %, $rectangleSegmentA001)
+  |> angledLine([
+       segAng(rectangleSegmentA001, %) - 90,
+       196.99
+     ], %, $rectangleSegmentB001)
+  |> angledLine([
+       segAng(rectangleSegmentA001, %),
+       -segLen(rectangleSegmentA001, %)
+     ], %, $rectangleSegmentC001)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)
+```
+
+### Tag Identifier
+
+As per the example above you can use the tag identifier to get a reference to the 
+tagged object. The syntax for this is `myTag`.
+
+In the example above we use the tag identifier to get the angle of the segment
+`segAng(rectangleSegmentA001, %)`.
+
+
+### Tag Scope
+
+Tags are scoped globally if in the root context meaning in this example you can 
+use the tag `rectangleSegmentA001` in any function or expression in the file.
+
+However if the code was written like this:
+
+```
+fn rect = (origin) => {
+  return startSketchOn('XZ')
+  |> startProfileAt(origin, %)
+  |> angledLine([0, 191.26], %, $rectangleSegmentA001)
+  |> angledLine([
+       segAng(rectangleSegmentA001, %) - 90,
+       196.99
+     ], %, $rectangleSegmentB001)
+  |> angledLine([
+       segAng(rectangleSegmentA001, %),
+       -segLen(rectangleSegmentA001, %)
+     ], %, $rectangleSegmentC001)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)
+}
+
+rect([0, 0])
+rect([20, 0])
+``` 
+
+Those tags would only be available in the `rect` function and not globally.
+
+However you likely want to use those tags somewhere outside the `rect` function.
+
+Tags are accessible through the sketch group they are declared in.
+For example the following code works.
+
+```
+fn rect = (origin) => {
+  return startSketchOn('XZ')
+  |> startProfileAt(origin, %)
+  |> angledLine([0, 191.26], %, $rectangleSegmentA001)
+  |> angledLine([
+       segAng(rectangleSegmentA001, %) - 90,
+       196.99
+     ], %, $rectangleSegmentB001)
+  |> angledLine([
+       segAng(rectangleSegmentA001, %),
+       -segLen(rectangleSegmentA001, %)
+     ], %, $rectangleSegmentC001)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)
+}
+
+rect([0, 0])
+const myRect = rect([20, 0])
+
+myRect 
+  |> extrude(10, %)
+  |> fillet({radius: 0.5, tags: [myRect.tags.rectangleSegmentA001]}, %)
+```
+
+See how we use the tag `rectangleSegmentA001` in the `fillet` function outside
+the `rect` function. This is because the `rect` function is returning the
+sketch group that contains the tags.
+
+
+---
+
+If you find any issues using any of the above expressions or syntax,
 please file an issue with the `ast` label on the [modeling-app
 repo](https://github.com/KittyCAD/modeling-app/issues/new).

docs/kcl/xLine.md

@@ -119,6 +119,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -280,6 +283,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -469,6 +475,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -630,6 +639,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/xLineTo.md

@@ -119,6 +119,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -280,6 +283,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -469,6 +475,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -630,6 +639,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/yLine.md

@@ -117,6 +117,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -278,6 +281,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -467,6 +473,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -628,6 +637,9 @@ const example = extrude(10, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

docs/kcl/yLineTo.md

@@ -115,6 +115,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -276,6 +279,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -465,6 +471,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{
@@ -626,6 +635,9 @@ const example = extrude(5, exampleSketch)
 },
 	// The to point.
 	to: [number, number],
+},
+	// Tag identifiers that have been declared in this sketch group.
+	tags: {
 },
 	// The paths in the sketch group.
 	value: [{

e2e/playwright/flow-tests.spec.ts

@@ -52,7 +52,24 @@ const commonPoints = {
   // num2: 19.19,
 }
 
-// Utilities for writing tests that depend on test values
+test.afterEach(async ({ context, page }, testInfo) => {
+  if (testInfo.status === 'skipped') return
+  if (testInfo.status === 'failed') return
+
+  const u = await getUtils(page)
+  // Kill the network so shutdown happens properly
+  await u.emulateNetworkConditions({
+    offline: true,
+    // values of 0 remove any active throttling. crbug.com/456324#c9
+    latency: 0,
+    downloadThroughput: -1,
+    uploadThroughput: -1,
+  })
+
+  // It seems it's best to give the browser about 3s to close things
+  // It's not super reliable but we have no real other choice for now
+  await page.waitForTimeout(3000)
+})
 
 test.beforeEach(async ({ context, page }) => {
   // wait for Vite preview server to be up
@@ -78,7 +95,7 @@ test.beforeEach(async ({ context, page }) => {
   await page.emulateMedia({ reducedMotion: 'reduce' })
 })
 
-test.setTimeout(60000)
+test.setTimeout(120000)
 
 async function doBasicSketch(page: Page, openPanes: string[]) {
   const u = await getUtils(page)
@@ -543,6 +560,50 @@ test.describe('Testing Camera Movement', () => {
 })
 
 test.describe('Editor tests', () => {
+  test('can comment out code with ctrl+/', async ({ page }) => {
+    const u = await getUtils(page)
+    await page.setViewportSize({ width: 1000, height: 500 })
+
+    await u.waitForAuthSkipAppStart()
+    const CtrlKey = process.platform === 'darwin' ? 'Meta' : 'Control'
+
+    // check no error to begin with
+    await expect(page.locator('.cm-lint-marker-error')).not.toBeVisible()
+
+    await u.codeLocator.click()
+    await page.keyboard.type(`const sketch001 = startSketchOn('XY')
+  |> startProfileAt([-10, -10], %)
+  |> line([20, 0], %)
+  |> line([0, 20], %)
+  |> line([-20, 0], %)
+  |> close(%)`)
+
+    await page.keyboard.down(CtrlKey)
+    await page.keyboard.press('/')
+    await page.keyboard.up(CtrlKey)
+
+    await expect(page.locator('.cm-content'))
+      .toHaveText(`const sketch001 = startSketchOn('XY')
+    |> startProfileAt([-10, -10], %)
+    |> line([20, 0], %)
+    |> line([0, 20], %)
+    |> line([-20, 0], %)
+    // |> close(%)`)
+
+    // uncomment the code
+    await page.keyboard.down(CtrlKey)
+    await page.keyboard.press('/')
+    await page.keyboard.up(CtrlKey)
+
+    await expect(page.locator('.cm-content'))
+      .toHaveText(`const sketch001 = startSketchOn('XY')
+    |> startProfileAt([-10, -10], %)
+    |> line([20, 0], %)
+    |> line([0, 20], %)
+    |> line([-20, 0], %)
+    |> close(%)`)
+  })
+
   test('if you click the format button it formats your code', async ({
     page,
   }) => {
@@ -600,7 +661,11 @@ test.describe('Editor tests', () => {
     // TODO: Jess needs to fix this but you have to mod the code to get them to show
     // up, its an annoying codemirror thing.
     await page.locator('.cm-content').click()
-    await page.keyboard.press('End')
+    await page.keyboard.press('ArrowDown')
+    await page.keyboard.press('ArrowDown')
+    await page.keyboard.press('ArrowDown')
+    await page.keyboard.press('ArrowDown')
+    await page.keyboard.press('ArrowDown')
     await page.keyboard.press('Enter')
 
     const foldGutterFoldLine = page.locator('[title="Fold line"]')
@@ -746,12 +811,12 @@ test.describe('Editor tests', () => {
     await page.keyboard.press('ArrowRight')
 
     // error in guter
-    await expect(page.locator('.cm-lint-marker-info')).toBeVisible()
+    await expect(page.locator('.cm-lint-marker-info').first()).toBeVisible()
 
     // error text on hover
     await page.hover('.cm-lint-marker-info')
     await expect(
-      page.getByText('Identifiers must be lowerCamelCase')
+      page.getByText('Identifiers must be lowerCamelCase').first()
     ).toBeVisible()
 
     // select the line that's causing the error and delete it
@@ -856,16 +921,19 @@ test.describe('Editor tests', () => {
     await page.keyboard.press('Enter')
     await page.keyboard.type('const topAng = 42')
     await page.keyboard.press('ArrowLeft')
-    await page.keyboard.press('ArrowRight')
 
     await expect(page.locator('.cm-lint-marker-error')).toBeVisible()
-    await expect(page.locator('.cm-lintRange.cm-lintRange-error')).toBeVisible()
+    await expect(
+      page.locator('.cm-lintRange.cm-lintRange-error').first()
+    ).toBeVisible()
 
     await page.locator('.cm-lintRange.cm-lintRange-error').hover()
-    await expect(page.locator('.cm-diagnosticText')).toBeVisible()
+    await expect(page.locator('.cm-diagnosticText').first()).toBeVisible()
-    await expect(page.getByText('Cannot redefine `topAng`')).toBeVisible()
+    await expect(
+      page.getByText('Cannot redefine `topAng`').first()
+    ).toBeVisible()
 
-    const secondTopAng = await page.getByText('topAng').first()
+    const secondTopAng = page.getByText('topAng').first()
     await secondTopAng?.dblclick()
     await page.keyboard.type('otherAng')
 
@@ -929,7 +997,9 @@ test.describe('Editor tests', () => {
     // error in gutter
     await expect(page.locator('.cm-lint-marker-error').first()).toBeVisible()
     await page.hover('.cm-lint-marker-error:first-child')
-    await expect(page.getByText('Expected 2 arguments, got 3')).toBeVisible()
+    await expect(
+      page.getByText('Expected 2 arguments, got 3').first()
+    ).toBeVisible()
 
     // Make sure there are two diagnostics
     await expect(page.locator('.cm-lint-marker-error')).toHaveCount(2)
@@ -965,22 +1035,16 @@ test.describe('Editor tests', () => {
 
     await page.setViewportSize({ width: 1000, height: 500 })
 
-    await u.waitForAuthSkipAppStart()
+    await page.goto('/')
+    await u.waitForPageLoad()
 
-    await u.openDebugPanel()
-    await u.expectCmdLog('[data-message-type="execution-done"]')
-    await u.closeDebugPanel()
-
-    // error in guter
     await expect(page.locator('.cm-lint-marker-error')).toBeVisible()
 
     // error text on hover
     await page.hover('.cm-lint-marker-error')
-    await expect(
+    const searchText =
-      page.getByText(
+      'sketch profile must lie entirely on one side of the revolution axis'
-        'sketch profile must lie entirely on one side of the revolution axis'
+    await expect(page.getByText(searchText).first()).toBeVisible()
-      )
-    ).toBeVisible()
   })
   test.describe('Autocomplete works', () => {
     test('with enter/click to accept the completion', async ({ page }) => {
@@ -1201,7 +1265,9 @@ test.describe('Editor tests', () => {
     |> close(%)`)
   })
 
-  test('Can undo a sketch modification with ctrl+z', async ({ page }) => {
+  // failing for the same reason as "Can edit a sketch that has been extruded in the same pipe"
+  // please fix together
+  test.fixme('Can undo a sketch modification with ctrl+z', async ({ page }) => {
     const u = await getUtils(page)
     await page.addInitScript(async () => {
       localStorage.setItem(
@@ -1831,7 +1897,6 @@ test.describe('Copilot ghost text', () => {
     // We wanna make sure the code saves.
     await page.waitForTimeout(800)
 
-    await expect(page.locator('.cm-ghostText')).not.toBeVisible()
     await page.waitForTimeout(500)
     await page.keyboard.press('Enter')
     await expect(page.locator('.cm-ghostText').first()).toBeVisible()
@@ -1854,7 +1919,8 @@ test.describe('Copilot ghost text', () => {
 
     await expect(page.locator('.cm-ghostText').first()).not.toBeVisible()
 
-    await expect(page.locator('.cm-content')).toHaveText(``)
+    // TODO when we make codemirror a widget, we can test this.
+    //await expect(page.locator('.cm-content')).toHaveText(``)
   })
 
   test('delete in code rejects the suggestion', async ({ page }) => {
@@ -2921,7 +2987,7 @@ const sketch002 = startSketchOn(launderExtrudeThroughVar, seg02)
     await expect(page.getByTestId('hover-highlight').first()).not.toBeVisible()
 
     await page.mouse.move(flatExtrusionFace[0], flatExtrusionFace[1])
-    await expect(page.getByTestId('hover-highlight')).toHaveCount(19) // multiple lines
+    await expect(page.getByTestId('hover-highlight')).toHaveCount(5) // multiple lines
     await page.mouse.move(nothing[0], nothing[1])
     await page.waitForTimeout(100)
     await expect(page.getByTestId('hover-highlight').first()).not.toBeVisible()
@@ -3061,7 +3127,7 @@ const part001 = startSketchOn('XZ')
       await page.mouse.move(pos[0], pos[1], { steps: 5 })
       await expect(page.getByTestId('hover-highlight').first()).toBeVisible()
       await expect(page.getByTestId('hover-highlight').first()).toHaveText(
-        removeAfterFirstParenthesis(expectedCode)
+        expectedCode
       )
       // hover over segment, click it and check the cursor has move to the right place
       await page.mouse.click(pos[0], pos[1])
@@ -3703,16 +3769,14 @@ test.describe('Regression tests', () => {
     // Make sure it's not a link
     await expect(zooLogo).not.toHaveAttribute('href')
   })
-  test.fixme(
+  test('Position _ Is Out Of Range... regression test', async ({ page }) => {
-    'Position _ Is Out Of Range... regression test',
+    const u = await getUtils(page)
-    async ({ page }) => {
+    // const PUR = 400 / 37.5 //pixeltoUnitRatio
-      const u = await getUtils(page)
+    await page.setViewportSize({ width: 1200, height: 500 })
-      // const PUR = 400 / 37.5 //pixeltoUnitRatio
+    await page.addInitScript(async () => {
-      await page.setViewportSize({ width: 1200, height: 500 })
+      localStorage.setItem(
-      await page.addInitScript(async () => {
+        'persistCode',
-        localStorage.setItem(
+        `const exampleSketch = startSketchOn("XZ")
-          'persistCode',
-          `const exampleSketch = startSketchOn("XZ")
     |> startProfileAt([0, 0], %)
     |> angledLine({ angle: 50, length: 45 }, %)
     |> yLineTo(0, %)
@@ -3721,41 +3785,50 @@ test.describe('Regression tests', () => {
   
   const example = extrude(5, exampleSketch)
   shell({ faces: ['end'], thickness: 0.25 }, exampleSketch)`
-        )
+      )
-      })
+    })
 
-      await u.waitForAuthSkipAppStart()
+    await page.goto('/')
+    await u.waitForPageLoad()
 
-      // error in guter
+    // error in guter
-      await expect(page.locator('.cm-lint-marker-error')).toBeVisible()
+    await expect(page.locator('.cm-lint-marker-error')).toBeVisible()
+    await page.waitForTimeout(200)
+    // expect it still to be there (sometimes it just clears for a bit?)
+    await expect(page.locator('.cm-lint-marker-error')).toBeVisible({
+      timeout: 10_000,
+    })
 
-      // error text on hover
+    // error text on hover
-      await page.hover('.cm-lint-marker-error')
+    await page.hover('.cm-lint-marker-error')
-      await expect(page.getByText('Unexpected token').first()).toBeVisible()
+    await expect(page.getByText('Unexpected token').first()).toBeVisible()
 
-      // Okay execution finished, let's start editing text below the error.
+    // Okay execution finished, let's start editing text below the error.
-      await u.codeLocator.click()
+    await u.codeLocator.click()
-      // Go to the end of the editor
+    // Go to the end of the editor
-      // This bug happens when there is a diagnostic in the editor and you try to
+    // This bug happens when there is a diagnostic in the editor and you try to
-      // edit text below it.
+    // edit text below it.
-      // Or delete a huge chunk of text and then try to edit below it.
+    // Or delete a huge chunk of text and then try to edit below it.
-      await page.keyboard.press('End')
+    await page.keyboard.press('End')
-      await page.keyboard.down('Shift')
+    await page.keyboard.down('Shift')
-      await page.keyboard.press('ArrowUp')
+    await page.keyboard.press('ArrowUp')
-      await page.keyboard.press('ArrowUp')
+    await page.keyboard.press('ArrowUp')
-      await page.keyboard.press('ArrowUp')
+    await page.keyboard.press('ArrowUp')
-      await page.keyboard.press('ArrowUp')
+    await page.keyboard.press('ArrowUp')
-      await page.keyboard.up('Shift')
+    await page.keyboard.press('ArrowUp')
-      await page.keyboard.press('Backspace')
+    await page.keyboard.press('End')
-      await expect(page.locator('.cm-lint-marker-error')).not.toBeVisible()
+    await page.keyboard.up('Shift')
+    await page.keyboard.press('Backspace')
+    await expect(page.locator('.cm-lint-marker-error')).not.toBeVisible()
 
-      await page.keyboard.press('Enter')
+    await page.keyboard.press('Enter')
-      await page.keyboard.press('Enter')
+    await page.keyboard.press('Enter')
-      await page.keyboard.type('thing: "blah"', { delay: 100 })
+    await page.keyboard.type('thing: "blah"', { delay: 100 })
-      await page.keyboard.press('Enter')
+    await page.keyboard.press('Enter')
+    await page.keyboard.press('ArrowLeft')
 
-      await expect(page.locator('.cm-content'))
+    await expect(page.locator('.cm-content'))
-        .toHaveText(`const exampleSketch = startSketchOn("XZ")
+      .toContainText(`const exampleSketch = startSketchOn("XZ")
     |> startProfileAt([0, 0], %)
     |> angledLine({ angle: 50, length: 45 }, %)
     |> yLineTo(0, %)
@@ -3763,9 +3836,8 @@ test.describe('Regression tests', () => {
 
     thing: "blah"`)
 
-      await expect(page.locator('.cm-lint-marker-error')).toBeVisible()
+    await expect(page.locator('.cm-lint-marker-error')).toBeVisible()
-    }
+  })
-  )
 })
 
 test.describe('Sketch tests', () => {
@@ -3856,6 +3928,31 @@ test.describe('Sketch tests', () => {
       page.getByRole('button', { name: 'Edit Sketch' })
     ).toBeVisible()
   })
+  test('Can exit selection of face', async ({ page }) => {
+    // Load the app with the code panes
+    await page.addInitScript(async () => {
+      localStorage.setItem('persistCode', ``)
+    })
+
+    const u = await getUtils(page)
+    await page.setViewportSize({ width: 1200, height: 500 })
+
+    await u.waitForAuthSkipAppStart()
+
+    await page.getByRole('button', { name: 'Start Sketch' }).click()
+    await expect(
+      page.getByRole('button', { name: 'Exit Sketch' })
+    ).toBeVisible()
+
+    await expect(
+      page.getByText('click plane or face to sketch on')
+    ).toBeVisible()
+
+    await page.keyboard.press('Escape')
+    await expect(
+      page.getByRole('button', { name: 'Start Sketch' })
+    ).toBeVisible()
+  })
   test.describe('Can edit segments by dragging their handles', () => {
     const doEditSegmentsByDraggingHandle = async (
       page: Page,
@@ -4019,108 +4116,111 @@ test.describe('Sketch tests', () => {
     })
   })
 
-  test('Can edit a sketch that has been extruded in the same pipe', async ({
+  // failing for the same reason as "Can undo a sketch modification with ctrl+z"
-    page,
+  // please fix together
-  }) => {
+  test.fixme(
-    const u = await getUtils(page)
+    'Can edit a sketch that has been extruded in the same pipe',
-    await page.addInitScript(async () => {
+    async ({ page }) => {
-      localStorage.setItem(
+      const u = await getUtils(page)
-        'persistCode',
+      await page.addInitScript(async () => {
-        `const sketch001 = startSketchOn('XZ')
+        localStorage.setItem(
+          'persistCode',
+          `const sketch001 = startSketchOn('XZ')
     |> startProfileAt([4.61, -14.01], %)
     |> line([12.73, -0.09], %)
     |> tangentialArcTo([24.95, -5.38], %)
     |> close(%)
     |> extrude(5, %)`
-      )
+        )
-    })
+      })
 
-    await page.setViewportSize({ width: 1200, height: 500 })
+      await page.setViewportSize({ width: 1200, height: 500 })
 
-    await u.waitForAuthSkipAppStart()
+      await u.waitForAuthSkipAppStart()
-    await expect(
+      await expect(
-      page.getByRole('button', { name: 'Start Sketch' })
+        page.getByRole('button', { name: 'Start Sketch' })
-    ).not.toBeDisabled()
+      ).not.toBeDisabled()
 
-    await page.waitForTimeout(100)
+      await page.waitForTimeout(100)
-    await u.openAndClearDebugPanel()
+      await u.openAndClearDebugPanel()
-    await u.sendCustomCmd({
+      await u.sendCustomCmd({
-      type: 'modeling_cmd_req',
+        type: 'modeling_cmd_req',
-      cmd_id: uuidv4(),
+        cmd_id: uuidv4(),
-      cmd: {
+        cmd: {
-        type: 'default_camera_look_at',
+          type: 'default_camera_look_at',
-        vantage: { x: 0, y: -1250, z: 580 },
+          vantage: { x: 0, y: -1250, z: 580 },
-        center: { x: 0, y: 0, z: 0 },
+          center: { x: 0, y: 0, z: 0 },
-        up: { x: 0, y: 0, z: 1 },
+          up: { x: 0, y: 0, z: 1 },
-      },
+        },
-    })
+      })
-    await page.waitForTimeout(100)
+      await page.waitForTimeout(100)
-    await u.sendCustomCmd({
+      await u.sendCustomCmd({
-      type: 'modeling_cmd_req',
+        type: 'modeling_cmd_req',
-      cmd_id: uuidv4(),
+        cmd_id: uuidv4(),
-      cmd: {
+        cmd: {
-        type: 'default_camera_get_settings',
+          type: 'default_camera_get_settings',
-      },
+        },
-    })
+      })
-    await page.waitForTimeout(100)
+      await page.waitForTimeout(100)
 
-    const startPX = [665, 458]
+      const startPX = [665, 458]
 
-    const dragPX = 40
+      const dragPX = 40
 
-    await page.getByText('startProfileAt([4.61, -14.01], %)').click()
+      await page.getByText('startProfileAt([4.61, -14.01], %)').click()
-    await expect(
+      await expect(
-      page.getByRole('button', { name: 'Edit Sketch' })
+        page.getByRole('button', { name: 'Edit Sketch' })
-    ).toBeVisible()
+      ).toBeVisible()
-    await page.getByRole('button', { name: 'Edit Sketch' }).click()
+      await page.getByRole('button', { name: 'Edit Sketch' }).click()
-    await page.waitForTimeout(400)
+      await page.waitForTimeout(400)
-    let prevContent = await page.locator('.cm-content').innerText()
+      let prevContent = await page.locator('.cm-content').innerText()
 
-    await expect(page.getByTestId('segment-overlay')).toHaveCount(2)
+      await expect(page.getByTestId('segment-overlay')).toHaveCount(2)
 
-    // drag startProfieAt handle
+      // drag startProfieAt handle
-    await page.dragAndDrop('#stream', '#stream', {
+      await page.dragAndDrop('#stream', '#stream', {
-      sourcePosition: { x: startPX[0], y: startPX[1] },
+        sourcePosition: { x: startPX[0], y: startPX[1] },
-      targetPosition: { x: startPX[0] + dragPX, y: startPX[1] + dragPX },
+        targetPosition: { x: startPX[0] + dragPX, y: startPX[1] + dragPX },
-    })
+      })
-    await page.waitForTimeout(100)
+      await page.waitForTimeout(100)
-    await expect(page.locator('.cm-content')).not.toHaveText(prevContent)
+      await expect(page.locator('.cm-content')).not.toHaveText(prevContent)
-    prevContent = await page.locator('.cm-content').innerText()
+      prevContent = await page.locator('.cm-content').innerText()
 
-    // drag line handle
+      // drag line handle
-    await page.waitForTimeout(100)
+      await page.waitForTimeout(100)
 
-    const lineEnd = await u.getBoundingBox('[data-overlay-index="0"]')
+      const lineEnd = await u.getBoundingBox('[data-overlay-index="0"]')
-    await page.waitForTimeout(100)
+      await page.waitForTimeout(100)
-    await page.dragAndDrop('#stream', '#stream', {
+      await page.dragAndDrop('#stream', '#stream', {
-      sourcePosition: { x: lineEnd.x - 5, y: lineEnd.y },
+        sourcePosition: { x: lineEnd.x - 5, y: lineEnd.y },
-      targetPosition: { x: lineEnd.x + dragPX, y: lineEnd.y + dragPX },
+        targetPosition: { x: lineEnd.x + dragPX, y: lineEnd.y + dragPX },
-    })
+      })
-    await expect(page.locator('.cm-content')).not.toHaveText(prevContent)
+      await expect(page.locator('.cm-content')).not.toHaveText(prevContent)
-    prevContent = await page.locator('.cm-content').innerText()
+      prevContent = await page.locator('.cm-content').innerText()
 
-    // drag tangentialArcTo handle
+      // drag tangentialArcTo handle
-    const tangentEnd = await u.getBoundingBox('[data-overlay-index="1"]')
+      const tangentEnd = await u.getBoundingBox('[data-overlay-index="1"]')
-    await page.dragAndDrop('#stream', '#stream', {
+      await page.dragAndDrop('#stream', '#stream', {
-      sourcePosition: { x: tangentEnd.x, y: tangentEnd.y - 5 },
+        sourcePosition: { x: tangentEnd.x, y: tangentEnd.y - 5 },
-      targetPosition: {
+        targetPosition: {
-        x: tangentEnd.x + dragPX,
+          x: tangentEnd.x + dragPX,
-        y: tangentEnd.y + dragPX,
+          y: tangentEnd.y + dragPX,
-      },
+        },
-    })
+      })
-    await page.waitForTimeout(100)
+      await page.waitForTimeout(100)
-    await expect(page.locator('.cm-content')).not.toHaveText(prevContent)
+      await expect(page.locator('.cm-content')).not.toHaveText(prevContent)
 
-    // expect the code to have changed
+      // expect the code to have changed
-    await expect(page.locator('.cm-content'))
+      await expect(page.locator('.cm-content'))
-      .toHaveText(`const sketch001 = startSketchOn('XZ')
+        .toHaveText(`const sketch001 = startSketchOn('XZ')
     |> startProfileAt([7.12, -16.82], %)
     |> line([15.4, -2.74], %)
     |> tangentialArcTo([24.95, -5.38], %)
     |> line([2.65, -2.69], %)
     |> close(%)
     |> extrude(5, %)`)
-  })
+    }
+  )
 
   test('Can edit a sketch that has been revolved in the same pipe', async ({
     page,
@@ -6670,7 +6770,15 @@ ${extraLine ? 'const myVar = segLen(seg01, part001)' : ''}`
 })
 
 test.describe('Test network and connection issues', () => {
-  test('simulate network down and network little widget', async ({ page }) => {
+  test('simulate network down and network little widget', async ({
+    page,
+    browserName,
+  }) => {
+    // TODO: Don't skip Mac for these. After `window.tearDown` is working in Safari, these should work on webkit
+    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 })
 
@@ -6740,7 +6848,15 @@ test.describe('Test network and connection issues', () => {
     await expect(page.getByText('Network Health (Connected)')).toBeVisible()
   })
 
-  test('Engine disconnect & reconnect in sketch mode', async ({ page }) => {
+  test('Engine disconnect & reconnect in sketch mode', async ({
+    page,
+    browserName,
+  }) => {
+    // TODO: Don't skip Mac for these. After `window.tearDown` is working in Safari, these should work on webkit
+    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 })
     const PUR = 400 / 37.5 //pixeltoUnitRatio
@@ -7100,6 +7216,40 @@ test.describe('Testing Gizmo', () => {
   })
 })
 
+test('Units menu', async ({ page }) => {
+  const u = await getUtils(page)
+  await page.setViewportSize({ width: 1200, height: 500 })
+  await page.goto('/')
+  await page.waitForURL('**/file/**', { waitUntil: 'domcontentloaded' })
+
+  await u.waitForAuthSkipAppStart()
+
+  const unitsMenuButton = page.getByRole('button', {
+    name: 'Current Units',
+    exact: false,
+  })
+  await expect(unitsMenuButton).toBeVisible()
+  await expect(unitsMenuButton).toContainText('in')
+
+  await unitsMenuButton.click()
+  const millimetersButton = page.getByRole('button', { name: 'Millimeters' })
+
+  await expect(millimetersButton).toBeVisible()
+  await millimetersButton.click()
+
+  // Look out for the toast message
+  const toastMessage = page.getByText(
+    `Set default unit to "mm" for this project`
+  )
+  await expect(toastMessage).toBeVisible()
+
+  // Verify that the popover has closed
+  await expect(millimetersButton).not.toBeAttached()
+
+  // Verify that the button label has updated
+  await expect(unitsMenuButton).toContainText('mm')
+})
+
 test('Successful export shows a success toast', async ({ page }) => {
   // FYI this test doesn't work with only engine running locally
   // And you will need to have the KittyCAD CLI installed

e2e/playwright/snapshot-tests.spec.ts

@@ -435,6 +435,8 @@ test('Draft segments should look right', async ({ page, context }) => {
 
   await page.mouse.move(startXPx + PUR * 30, 500 - PUR * 20, { steps: 10 })
 
+  await page.waitForTimeout(300)
+
   await expect(page).toHaveScreenshot({
     maxDiffPixels: 100,
   })

e2e/playwright/test-utils.ts

@@ -232,6 +232,7 @@ export async function getUtils(page: Page) {
 
   return {
     waitForAuthSkipAppStart: () => waitForAuthAndLsp(page),
+    waitForPageLoad: () => waitForPageLoad(page),
     removeCurrentCode: () => removeCurrentCode(page),
     sendCustomCmd: (cmd: EngineCommand) => sendCustomCmd(page, cmd),
     updateCamPosition: async (xyz: [number, number, number]) => {
@@ -311,9 +312,9 @@ export async function getUtils(page: Page) {
         fullPage: true,
       })
       const screenshot = await PNG.sync.read(buffer)
-      // most likely related to pixel density but the screenshots for webkit are 2x the size
+      const pixMultiplier: number = await page.evaluate(
-      // there might be a more robust way of doing this.
+        'window.devicePixelRatio'
-      const pixMultiplier = browserType === 'webkit' ? 2 : 1
+      )
       const index =
         (screenshot.width * coords.y * pixMultiplier +
           coords.x * pixMultiplier) *
@@ -376,11 +377,10 @@ export async function getUtils(page: Page) {
     emulateNetworkConditions: async (
       networkOptions: Protocol.Network.emulateNetworkConditionsParameters
     ) => {
-      // Skip on non-Chromium browsers, since we need to use the CDP.
+      if (cdpSession === null) {
-      test.skip(
+        // Use a fail safe if we can't simulate disconnect (on Safari)
-        cdpSession === null,
+        return page.evaluate('window.tearDown()')
-        'Network emulation is only supported in Chromium'
+      }
-      )
 
       cdpSession?.send('Network.emulateNetworkConditions', networkOptions)
     },

package.json

@@ -1,14 +1,15 @@
 {
   "name": "untitled-app",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "private": true,
   "dependencies": {
-    "@codemirror/autocomplete": "^6.16.3",
+    "@codemirror/autocomplete": "^6.17.0",
     "@codemirror/commands": "^6.6.0",
     "@codemirror/language": "^6.10.2",
     "@codemirror/lint": "^6.8.1",
     "@codemirror/search": "^6.5.6",
     "@codemirror/state": "^6.4.1",
+    "@codemirror/theme-one-dark": "^6.1.2",
     "@csstools/postcss-oklab-function": "^3.0.16",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
@@ -16,26 +17,27 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.19",
     "@headlessui/tailwindcss": "^0.2.0",
-    "@kittycad/lib": "^0.0.69",
+    "@kittycad/lib": "^0.0.70",
+    "@lezer/highlight": "^1.2.0",
+    "@lezer/lr": "^1.4.1",
     "@react-hook/resize-observer": "^2.0.1",
     "@replit/codemirror-interact": "^6.3.1",
-    "@tauri-apps/api": "2.0.0-beta.12",
+    "@tauri-apps/api": "^2.0.0-beta.14",
-    "@tauri-apps/plugin-dialog": "^2.0.0-beta.2",
+    "@tauri-apps/plugin-dialog": "^2.0.0-beta.6",
-    "@tauri-apps/plugin-fs": "^2.0.0-beta.5",
+    "@tauri-apps/plugin-fs": "^2.0.0-beta.6",
-    "@tauri-apps/plugin-http": "^2.0.0-beta.2",
+    "@tauri-apps/plugin-http": "^2.0.0-beta.7",
-    "@tauri-apps/plugin-os": "^2.0.0-beta.3",
+    "@tauri-apps/plugin-os": "^2.0.0-beta.6",
-    "@tauri-apps/plugin-process": "^2.0.0-beta.2",
+    "@tauri-apps/plugin-process": "^2.0.0-beta.6",
-    "@tauri-apps/plugin-shell": "^2.0.0-beta.2",
+    "@tauri-apps/plugin-shell": "^2.0.0-beta.7",
-    "@tauri-apps/plugin-updater": "^2.0.0-beta.3",
+    "@tauri-apps/plugin-updater": "^2.0.0-beta.6",
     "@ts-stack/markdown": "^1.5.0",
     "@tweenjs/tween.js": "^23.1.1",
-    "@uiw/react-codemirror": "^4.21.25",
     "@xstate/inspect": "^0.8.0",
     "@xstate/react": "^3.2.2",
     "codemirror": "^6.0.1",
     "decamelize": "^6.0.0",
     "fuse.js": "^7.0.0",
-    "html2canvas-pro": "^1.5.1",
+    "html2canvas-pro": "^1.5.2",
     "json-rpc-2.0": "^1.6.0",
     "jszip": "^3.10.1",
     "re-resizable": "^6.9.11",
@@ -109,6 +111,7 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-env": "^7.24.3",
     "@iarna/toml": "^2.2.5",
+    "@lezer/generator": "^1.7.1",
     "@playwright/test": "^1.45.1",
     "@tauri-apps/cli": "==2.0.0-beta.13",
     "@testing-library/jest-dom": "^5.14.1",

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

@@ -1,10 +1,7 @@
-import { autocompletion } from '@codemirror/autocomplete'
+import { foldService } from '@codemirror/language'
-import { foldService, syntaxTree } from '@codemirror/language'
 import { Extension, EditorState } from '@codemirror/state'
 import { ViewPlugin } from '@codemirror/view'
 
-import { CompletionTriggerKind } from 'vscode-languageserver-protocol'
-
 import {
   docPathFacet,
   LanguageServerPlugin,
@@ -13,7 +10,6 @@ import {
   workspaceFolders,
   LanguageServerOptions,
 } from './plugin/lsp'
-import { offsetToPos } from './plugin/util'
 
 export type { LanguageServerClientOptions } from './client'
 export { LanguageServerClient } from './client'
@@ -24,14 +20,15 @@ export {
   LspWorkerEventType,
 } from './client/codec'
 export type { LanguageServerOptions } from './plugin/lsp'
-export type { TransactionInfo, RelevantUpdate } from './plugin/annotations'
-export { updateInfo, TransactionAnnotation } from './plugin/annotations'
 export {
   LanguageServerPlugin,
   LanguageServerPluginSpec,
   docPathFacet,
   languageId,
   workspaceFolders,
+  lspSemanticTokensEvent,
+  lspDiagnosticsEvent,
+  lspFormatCodeEvent,
 } from './plugin/lsp'
 export { posToOffset, offsetToPos } from './plugin/util'
 
@@ -51,63 +48,10 @@ export function lspPlugin(options: LanguageServerOptions): Extension {
       if (plugin == null) return null
       // Get the folding ranges from the language server.
       // Since this is async we directly need to update the folding ranges after.
-      return plugin?.foldingRange(lineStart, lineEnd)
+      const range = plugin?.foldingRange(lineStart, lineEnd)
+      return range
     }),
   ]
 
-  if (options.client.getServerCapabilities().completionProvider) {
-    ext.push(
-      autocompletion({
-        defaultKeymap: false,
-        override: [
-          async (context) => {
-            if (plugin === null) {
-              return null
-            }
-
-            const { state, pos, explicit } = context
-
-            let nodeBefore = syntaxTree(state).resolveInner(pos, -1)
-            if (
-              nodeBefore.name === 'BlockComment' ||
-              nodeBefore.name === 'LineComment'
-            )
-              return null
-
-            const line = state.doc.lineAt(pos)
-            let trigKind: CompletionTriggerKind = CompletionTriggerKind.Invoked
-            let trigChar: string | undefined
-            if (
-              !explicit &&
-              plugin.client
-                .getServerCapabilities()
-                .completionProvider?.triggerCharacters?.includes(
-                  line.text[pos - line.from - 1]
-                )
-            ) {
-              trigKind = CompletionTriggerKind.TriggerCharacter
-              trigChar = line.text[pos - line.from - 1]
-            }
-            if (
-              trigKind === CompletionTriggerKind.Invoked &&
-              !context.matchBefore(/\w+$/)
-            ) {
-              return null
-            }
-
-            return await plugin.requestCompletion(
-              context,
-              offsetToPos(state.doc, pos),
-              {
-                triggerKind: trigKind,
-                triggerCharacter: trigChar,
-              }
-            )
-          },
-        ],
-      })
-    )
-  }
-
   return ext
 }

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

@@ -1,131 +0,0 @@
-import { hasNextSnippetField, pickedCompletion } from '@codemirror/autocomplete'
-import { Annotation, Transaction } from '@codemirror/state'
-import type { ViewUpdate } from '@codemirror/view'
-
-export enum LspAnnotation {
-  SemanticTokens = 'semantic-tokens',
-  FormatCode = 'format-code',
-  Diagnostics = 'diagnostics',
-}
-
-const lspEvent = Annotation.define<LspAnnotation>()
-export const lspSemanticTokensEvent = lspEvent.of(LspAnnotation.SemanticTokens)
-export const lspFormatCodeEvent = lspEvent.of(LspAnnotation.FormatCode)
-export const lspDiagnosticsEvent = lspEvent.of(LspAnnotation.Diagnostics)
-
-export enum TransactionAnnotation {
-  Remote = 'remote',
-  UserSelect = 'user.select',
-  UserInput = 'user.input',
-  UserMove = 'user.move',
-  UserDelete = 'user.delete',
-  UserUndo = 'user.undo',
-  UserRedo = 'user.redo',
-
-  SemanticTokens = 'SemanticTokens',
-  FormatCode = 'FormatCode',
-  Diagnostics = 'Diagnostics',
-
-  PickedCompletion = 'PickedCompletion',
-}
-
-export interface TransactionInfo {
-  annotations: TransactionAnnotation[]
-  time: number | null
-  docChanged: boolean
-  addToHistory: boolean
-  inSnippet: boolean
-  transaction: Transaction
-}
-
-export const updateInfo = (update: ViewUpdate): TransactionInfo[] => {
-  let transactionInfos: TransactionInfo[] = []
-
-  for (const tr of update.transactions) {
-    let annotations: TransactionAnnotation[] = []
-
-    if (tr.isUserEvent('select')) {
-      annotations.push(TransactionAnnotation.UserSelect)
-    }
-
-    if (tr.isUserEvent('input')) {
-      annotations.push(TransactionAnnotation.UserInput)
-    }
-    if (tr.isUserEvent('delete')) {
-      annotations.push(TransactionAnnotation.UserDelete)
-    }
-    if (tr.isUserEvent('undo')) {
-      annotations.push(TransactionAnnotation.UserUndo)
-    }
-    if (tr.isUserEvent('redo')) {
-      annotations.push(TransactionAnnotation.UserRedo)
-    }
-    if (tr.isUserEvent('move')) {
-      annotations.push(TransactionAnnotation.UserMove)
-    }
-
-    if (tr.annotation(pickedCompletion) !== undefined) {
-      annotations.push(TransactionAnnotation.PickedCompletion)
-    }
-
-    if (tr.annotation(lspSemanticTokensEvent.type) !== undefined) {
-      annotations.push(TransactionAnnotation.SemanticTokens)
-    }
-
-    if (tr.annotation(lspFormatCodeEvent.type) !== undefined) {
-      annotations.push(TransactionAnnotation.FormatCode)
-    }
-
-    if (tr.annotation(lspDiagnosticsEvent.type) !== undefined) {
-      annotations.push(TransactionAnnotation.Diagnostics)
-    }
-
-    if (tr.annotation(Transaction.remote) !== undefined) {
-      annotations.push(TransactionAnnotation.Remote)
-    }
-
-    transactionInfos.push({
-      annotations,
-      time: tr.annotation(Transaction.time) || null,
-      docChanged: tr.docChanged,
-      addToHistory: tr.annotation(Transaction.addToHistory) || false,
-      inSnippet: hasNextSnippetField(update.state),
-      transaction: tr,
-    })
-  }
-
-  return transactionInfos
-}
-
-export interface RelevantUpdate {
-  overall: boolean
-  userSelect: boolean
-  time: number | null
-}
-
-export const relevantUpdate = (update: ViewUpdate): RelevantUpdate => {
-  const infos = updateInfo(update)
-  // Make sure we are not in a snippet
-  if (infos.some((info) => info.inSnippet)) {
-    return {
-      overall: false,
-      userSelect: false,
-      time: null,
-    }
-  }
-  return {
-    overall: infos.some(
-      (info) =>
-        info.docChanged ||
-        info.annotations.includes(TransactionAnnotation.UserInput) ||
-        info.annotations.includes(TransactionAnnotation.UserDelete) ||
-        info.annotations.includes(TransactionAnnotation.UserUndo) ||
-        info.annotations.includes(TransactionAnnotation.UserRedo) ||
-        info.annotations.includes(TransactionAnnotation.UserMove)
-    ),
-    userSelect: infos.some((info) =>
-      info.annotations.includes(TransactionAnnotation.UserSelect)
-    ),
-    time: infos.length ? infos[0].time : null,
-  }
-}

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

@@ -1,5 +1,6 @@
 import {
   acceptCompletion,
+  autocompletion,
   clearSnippet,
   closeCompletion,
   hasNextSnippetField,
@@ -8,10 +9,17 @@ import {
   prevSnippetField,
   startCompletion,
 } from '@codemirror/autocomplete'
-import { Prec } from '@codemirror/state'
+import { Prec, Extension } from '@codemirror/state'
-import { EditorView, keymap, KeyBinding } from '@codemirror/view'
+import { EditorView, keymap, KeyBinding, ViewPlugin } from '@codemirror/view'
 
-import { CompletionItemKind } from 'vscode-languageserver-protocol'
+import {
+  CompletionItemKind,
+  CompletionTriggerKind,
+} from 'vscode-languageserver-protocol'
+
+import { LanguageServerPlugin } from './lsp'
+import { offsetToPos } from './util'
+import { syntaxTree } from '@codemirror/language'
 
 export const CompletionItemKindMap = Object.fromEntries(
   Object.entries(CompletionItemKind).map(([key, value]) => [value, key])
@@ -46,6 +54,59 @@ const lspAutocompleteKeymap: readonly KeyBinding[] = [
   },
 ]
 
-export const lspAutocompleteKeymapExt = Prec.highest(
+const lspAutocompleteKeymapExt = Prec.highest(keymap.of(lspAutocompleteKeymap))
-  keymap.computeN([], () => [lspAutocompleteKeymap])
+
-)
+export default function lspAutocompleteExt(
+  plugin: ViewPlugin<LanguageServerPlugin>
+): Extension {
+  return [
+    lspAutocompleteKeymapExt,
+    autocompletion({
+      defaultKeymap: false,
+      override: [
+        async (context) => {
+          const { state, pos, explicit, view } = context
+          let value = view?.plugin(plugin)
+          if (!value) return null
+
+          let nodeBefore = syntaxTree(state).resolveInner(pos, -1)
+          if (
+            nodeBefore.name === 'BlockComment' ||
+            nodeBefore.name === 'LineComment'
+          )
+            return null
+
+          const line = state.doc.lineAt(pos)
+          let trigKind: CompletionTriggerKind = CompletionTriggerKind.Invoked
+          let trigChar: string | undefined
+          if (
+            !explicit &&
+            value.client
+              .getServerCapabilities()
+              .completionProvider?.triggerCharacters?.includes(
+                line.text[pos - line.from - 1]
+              )
+          ) {
+            trigKind = CompletionTriggerKind.TriggerCharacter
+            trigChar = line.text[pos - line.from - 1]
+          }
+          if (
+            trigKind === CompletionTriggerKind.Invoked &&
+            !context.matchBefore(/\w+$/)
+          ) {
+            return null
+          }
+
+          return await value.requestCompletion(
+            context,
+            offsetToPos(state.doc, pos),
+            {
+              triggerKind: trigKind,
+              triggerCharacter: trigChar,
+            }
+          )
+        },
+      ],
+    }),
+  ]
+}

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

@@ -4,7 +4,13 @@ import type {
   CompletionResult,
 } from '@codemirror/autocomplete'
 import { completeFromList, snippetCompletion } from '@codemirror/autocomplete'
-import { Facet, StateEffect, Extension, Transaction } from '@codemirror/state'
+import {
+  Facet,
+  StateEffect,
+  Extension,
+  Transaction,
+  Annotation,
+} from '@codemirror/state'
 import type {
   ViewUpdate,
   PluginValue,
@@ -22,15 +28,10 @@ import {
 import { URI } from 'vscode-uri'
 
 import { LanguageServerClient } from '../client'
-import {
-  lspSemanticTokensEvent,
-  lspFormatCodeEvent,
-  relevantUpdate,
-} from './annotations'
 import { CompletionItemKindMap } from './autocomplete'
 import { addToken, SemanticToken } from './semantic-tokens'
 import { deferExecution, posToOffset, formatMarkdownContents } from './util'
-import { lspAutocompleteKeymapExt } from './autocomplete'
+import lspAutocompleteExt from './autocomplete'
 import lspHoverExt from './hover'
 import lspFormatExt from './format'
 import lspIndentExt from './indent'
@@ -47,6 +48,17 @@ export const workspaceFolders = Facet.define<
   LSP.WorkspaceFolder[]
 >({ combine: useLast })
 
+export enum LspAnnotation {
+  SemanticTokens = 'semantic-tokens',
+  FormatCode = 'format-code',
+  Diagnostics = 'diagnostics',
+}
+
+const lspEvent = Annotation.define<LspAnnotation>()
+export const lspSemanticTokensEvent = lspEvent.of(LspAnnotation.SemanticTokens)
+export const lspFormatCodeEvent = lspEvent.of(LspAnnotation.FormatCode)
+export const lspDiagnosticsEvent = lspEvent.of(LspAnnotation.Diagnostics)
+
 export interface LanguageServerOptions {
   // We assume this is the main project directory, we are currently working in.
   workspaceFolders: LSP.WorkspaceFolder[]
@@ -59,6 +71,9 @@ export interface LanguageServerOptions {
   ) => void
 
   changesDelay?: number
+
+  doSemanticTokens?: boolean
+  doFoldingRanges?: boolean
 }
 
 export class LanguageServerPlugin implements PluginValue {
@@ -75,6 +90,9 @@ export class LanguageServerPlugin implements PluginValue {
     notification: LSP.NotificationMessage
   ) => void
 
+  private doSemanticTokens: boolean = false
+  private doFoldingRanges: boolean = false
+
   private _defferer = deferExecution((code: string) => {
     try {
       // Update the state (not the editor) with the new code.
@@ -97,6 +115,9 @@ export class LanguageServerPlugin implements PluginValue {
     this.client = options.client
     this.documentVersion = 0
 
+    this.doSemanticTokens = options.doSemanticTokens ?? false
+    this.doFoldingRanges = options.doFoldingRanges ?? false
+
     if (options.changesDelay) {
       this.changesDelay = options.changesDelay
     }
@@ -131,11 +152,6 @@ export class LanguageServerPlugin implements PluginValue {
   }
 
   update(viewUpdate: ViewUpdate) {
-    const isRelevant = relevantUpdate(viewUpdate)
-    if (!isRelevant.overall) {
-      return
-    }
-
     // If the doc didn't change we can return early.
     if (!viewUpdate.docChanged) {
       return
@@ -213,6 +229,7 @@ export class LanguageServerPlugin implements PluginValue {
 
   async getFoldingRanges(): Promise<LSP.FoldingRange[] | null> {
     if (
+      !this.doFoldingRanges ||
       !this.client.ready ||
       !this.client.getServerCapabilities().foldingRangeProvider
     )
@@ -284,19 +301,16 @@ export class LanguageServerPlugin implements PluginValue {
       },
     })
 
-    if (!result) return null
+    if (!result || !result.length) return null
 
-    for (let i = 0; i < result.length; i++) {
+    this.view.dispatch({
-      const { range, newText } = result[i]
+      changes: result.map(({ range, newText }) => ({
-      this.view.dispatch({
+        from: posToOffset(this.view.state.doc, range.start)!,
-        changes: {
+        to: posToOffset(this.view.state.doc, range.end)!,
-          from: posToOffset(this.view.state.doc, range.start)!,
+        insert: newText,
-          to: posToOffset(this.view.state.doc, range.end)!,
+      })),
-          insert: newText,
+      annotations: lspFormatCodeEvent,
-        },
+    })
-        annotations: [lspFormatCodeEvent, Transaction.addToHistory.of(true)],
-      })
-    }
   }
 
   async requestCompletion(
@@ -441,6 +455,7 @@ export class LanguageServerPlugin implements PluginValue {
 
   async requestSemanticTokens() {
     if (
+      !this.doSemanticTokens ||
       !this.client.ready ||
       !this.client.getServerCapabilities().semanticTokensProvider
     ) {
@@ -552,7 +567,7 @@ export class LanguageServerPluginSpec
 {
   provide(plugin: ViewPlugin<LanguageServerPlugin>): Extension {
     return [
-      lspAutocompleteKeymapExt,
+      lspAutocompleteExt(plugin),
       lspFormatExt(plugin),
       lspHoverExt(plugin),
       lspIndentExt(),

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

@@ -4,7 +4,7 @@ import { EditorView, Decoration, DecorationSet } from '@codemirror/view'
 
 import { Tag, tags } from '@lezer/highlight'
 
-import { lspSemanticTokensEvent } from './annotations'
+import { lspSemanticTokensEvent } from './lsp'
 
 export interface SemanticToken {
   from: number

src-tauri/Cargo.toml

@@ -11,27 +11,27 @@ rust-version = "1.70"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [build-dependencies]
-tauri-build = { version = "2.0.0-beta.13", features = [] }
+tauri-build = { version = "2.0.0-beta.18", features = [] }
 
 [dependencies]
 anyhow = "1"
 kcl-lib = { version = "0.1.53", path = "../src/wasm-lib/kcl" }
-kittycad = "0.3.5"
+kittycad = "0.3.7"
 log = "0.4.21"
 oauth2 = "4.4.2"
 serde_json = "1.0"
-tauri = { version = "2.0.0-beta.15", features = [ "devtools", "unstable"] }
+tauri = { version = "2.0.0-beta.23", features = [ "devtools", "unstable"] }
-tauri-plugin-cli = { version = "2.0.0-beta.3" }
+tauri-plugin-cli = { version = "2.0.0-beta.7" }
-tauri-plugin-deep-link = { version = "2.0.0-beta.3" }
+tauri-plugin-deep-link = { version = "2.0.0-beta.8" }
 tauri-plugin-dialog = { version = "2.0.0-beta.6" }
-tauri-plugin-fs = { version = "2.0.0-beta.9" }
+tauri-plugin-fs = { version = "2.0.0-beta.10" }
-tauri-plugin-http = { version = "2.0.0-beta.6" }
+tauri-plugin-http = { version = "2.0.0-beta.11" }
-tauri-plugin-log = { version = "2.0.0-beta.4" }
+tauri-plugin-log = { version = "2.0.0-beta.7" }
-tauri-plugin-os = { version = "2.0.0-beta.2" }
+tauri-plugin-os = { version = "2.0.0-beta.7" }
-tauri-plugin-persisted-scope = { version = "2.0.0-beta.7" }
+tauri-plugin-persisted-scope = { version = "2.0.0-beta.10" }
-tauri-plugin-process = { version = "2.0.0-beta.2" }
+tauri-plugin-process = { version = "2.0.0-beta.7" }
-tauri-plugin-shell = { version = "2.0.0-beta.2" }
+tauri-plugin-shell = { version = "2.0.0-beta.8" }
-tauri-plugin-updater = { version = "2.0.0-beta.4" }
+tauri-plugin-updater = { version = "2.0.0-beta.9" }
 tokio = { version = "1.37.0", features = ["time", "fs", "process"] }
 toml = "0.8.2"
 url = "2.5.0"

src-tauri/tauri.conf.json

@@ -63,16 +63,22 @@
       "subcommands": {}
     },
     "deep-link": {
-      "domains": [
+      "mobile": [
         {
           "host": "app.zoo.dev"
         }
-      ]
+      ],
+      "desktop": {
+        "schemes": [
+          "zoo",
+          "zoo-modeling-app"
+        ]
+      }
     },
     "shell": {
       "open": true
     }
   },
   "productName": "Zoo Modeling App",
-  "version": "0.23.0"
+  "version": "0.24.0"
 }

src/App.tsx

@@ -25,7 +25,7 @@ import ModalContainer from 'react-modal-promise'
 import useHotkeyWrapper from 'lib/hotkeyWrapper'
 import Gizmo from 'components/Gizmo'
 import { CoreDumpManager } from 'lib/coredump'
-import { useAppState } from 'AppState'
+import { UnitsMenu } from 'components/UnitsMenu'
 
 export function App() {
   useRefreshSettings(paths.FILE + 'SETTINGS')
@@ -45,17 +45,12 @@ export function App() {
 
   useHotKeyListener()
   const { context } = useModelingContext()
-  const { setAppState } = useAppState()
-
-  useEffect(() => {
-    setAppState({ htmlRef: ref })
-  }, [ref])
 
   const { auth, settings } = useSettingsAuthContext()
   const token = auth?.context?.token
 
   const coreDumpManager = useMemo(
-    () => new CoreDumpManager(engineCommandManager, ref, token),
+    () => new CoreDumpManager(engineCommandManager, token),
     []
   )
 
@@ -133,6 +128,7 @@ export function App() {
       <Stream />
       {/* <CamToggle /> */}
       <LowerRightControls coreDumpManager={coreDumpManager}>
+        <UnitsMenu />
         <Gizmo />
       </LowerRightControls>
     </div>

src/AppState.tsx

@@ -10,12 +10,10 @@ Please do not fill this up with junk.
 
 interface AppState {
   isStreamReady: boolean
-  htmlRef: React.RefObject<HTMLDivElement> | null
   setAppState: (newAppState: Partial<AppState>) => void
 }
 
 const AppStateContext = createContext<AppState>({
-  htmlRef: null,
   isStreamReady: false,
   setAppState: () => {},
 })
@@ -24,7 +22,6 @@ export const useAppState = () => useContext(AppStateContext)
 
 export const AppStateProvider = ({ children }: { children: ReactNode }) => {
   const [appState, _setAppState] = useState<AppState>({
-    htmlRef: null,
     isStreamReady: false,
     setAppState: () => {},
   })
@@ -34,7 +31,6 @@ export const AppStateProvider = ({ children }: { children: ReactNode }) => {
   return (
     <AppStateContext.Provider
       value={{
-        htmlRef: appState.htmlRef,
         isStreamReady: appState.isStreamReady,
         setAppState,
       }}

src/Router.tsx

@@ -40,7 +40,7 @@ import useHotkeyWrapper from 'lib/hotkeyWrapper'
 import toast from 'react-hot-toast'
 import { coreDump } from 'lang/wasm'
 import { useMemo } from 'react'
-import { AppStateProvider, useAppState } from 'AppState'
+import { AppStateProvider } from 'AppState'
 
 const router = createBrowserRouter([
   {
@@ -180,9 +180,8 @@ export const Router = () => {
 function CoreDump() {
   const { auth } = useSettingsAuthContext()
   const token = auth?.context?.token
-  const { htmlRef } = useAppState()
   const coreDumpManager = useMemo(
-    () => new CoreDumpManager(engineCommandManager, htmlRef, token),
+    () => new CoreDumpManager(engineCommandManager, token),
     []
   )
   useHotkeyWrapper(['meta + shift + .'], () => {

src/Toolbar.tsx

@@ -12,6 +12,10 @@ import { ActionButtonDropdown } from 'components/ActionButtonDropdown'
 import { useHotkeys } from 'react-hotkeys-hook'
 import Tooltip from 'components/Tooltip'
 import { useAppState } from 'AppState'
+import {
+  canRectangleTool,
+  isEditingExistingSketch,
+} from 'machines/modelingMachine'
 
 export function Toolbar({
   className = '',
@@ -46,29 +50,48 @@ export function Toolbar({
     isExecuting ||
     !isStreamReady
 
+  const disableLineButton =
+    state.matches('Sketch.Rectangle tool.Awaiting second corner') ||
+    disableAllButtons
   useHotkeys(
     'l',
     () =>
       state.matches('Sketch.Line tool')
         ? send('CancelSketch')
-        : send('Equip Line tool'),
+        : send({
-    { enabled: !disableAllButtons, scopes: ['sketch'] }
+            type: 'change tool',
+            data: 'line',
+          }),
+    { enabled: !disableLineButton, scopes: ['sketch'] }
   )
+  const disableTangentialArc =
+    (!isEditingExistingSketch(context) &&
+      !state.matches('Sketch.Tangential arc to')) ||
+    disableAllButtons
   useHotkeys(
     'a',
     () =>
       state.matches('Sketch.Tangential arc to')
         ? send('CancelSketch')
-        : send('Equip tangential arc to'),
+        : send({
-    { enabled: !disableAllButtons, scopes: ['sketch'] }
+            type: 'change tool',
+            data: 'tangentialArc',
+          }),
+    { enabled: !disableTangentialArc, scopes: ['sketch'] }
   )
+  const disableRectangle =
+    (!canRectangleTool(context) && !state.matches('Sketch.Rectangle tool')) ||
+    disableAllButtons
   useHotkeys(
     'r',
     () =>
       state.matches('Sketch.Rectangle tool')
         ? send('CancelSketch')
-        : send('Equip rectangle tool'),
+        : send({
-    { enabled: !disableAllButtons, scopes: ['sketch'] }
+            type: 'change tool',
+            data: 'rectangle',
+          }),
+    { enabled: !disableRectangle, scopes: ['sketch'] }
   )
   useHotkeys(
     's',
@@ -81,7 +104,7 @@ export function Toolbar({
   useHotkeys(
     'esc',
     () =>
-      state.matches('Sketch.SketchIdle')
+      ['Sketch no face', 'Sketch.SketchIdle'].some(state.matches)
         ? send('Cancel')
         : send('CancelSketch'),
     { enabled: !disableAllButtons, scopes: ['sketch'] }
@@ -224,6 +247,11 @@ export function Toolbar({
             </ActionButton>
           </li>
         )}
+        {state.matches('Sketch no face') && (
+          <li className="contents">
+            <div className="mx-2 text-sm">click plane or face to sketch on</div>
+          </li>
+        )}
         {state.matches('Sketch') && !state.matches('idle') && (
           <>
             <li className="contents" key="line-button">
@@ -233,7 +261,10 @@ export function Toolbar({
                 onClick={() =>
                   state?.matches('Sketch.Line tool')
                     ? send('CancelSketch')
-                    : send('Equip Line tool')
+                    : send({
+                        type: 'change tool',
+                        data: 'line',
+                      })
                 }
                 aria-pressed={state?.matches('Sketch.Line tool')}
                 iconStart={{
@@ -241,7 +272,7 @@ export function Toolbar({
                   iconClassName,
                   bgClassName,
                 }}
-                disabled={disableAllButtons}
+                disabled={disableLineButton}
               >
                 Line
                 <Tooltip
@@ -260,7 +291,10 @@ export function Toolbar({
                 onClick={() =>
                   state.matches('Sketch.Tangential arc to')
                     ? send('CancelSketch')
-                    : send('Equip tangential arc to')
+                    : send({
+                        type: 'change tool',
+                        data: 'tangentialArc',
+                      })
                 }
                 aria-pressed={state.matches('Sketch.Tangential arc to')}
                 iconStart={{
@@ -268,11 +302,7 @@ export function Toolbar({
                   iconClassName,
                   bgClassName,
                 }}
-                disabled={
+                disabled={disableTangentialArc}
-                  (!state.can('Equip tangential arc to') &&
-                    !state.matches('Sketch.Tangential arc to')) ||
-                  disableAllButtons
-                }
               >
                 Tangential Arc
                 <Tooltip
@@ -291,7 +321,10 @@ export function Toolbar({
                 onClick={() =>
                   state.matches('Sketch.Rectangle tool')
                     ? send('CancelSketch')
-                    : send('Equip rectangle tool')
+                    : send({
+                        type: 'change tool',
+                        data: 'rectangle',
+                      })
                 }
                 aria-pressed={state.matches('Sketch.Rectangle tool')}
                 iconStart={{
@@ -299,13 +332,9 @@ export function Toolbar({
                   iconClassName,
                   bgClassName,
                 }}
-                disabled={
+                disabled={disableRectangle}
-                  (!state.can('Equip rectangle tool') &&
-                    !state.matches('Sketch.Rectangle tool')) ||
-                  disableAllButtons
-                }
                 title={
-                  state.can('Equip rectangle tool')
+                  canRectangleTool(context)
                     ? 'Rectangle'
                     : 'Can only be used when a sketch is empty currently'
                 }

src/clientSideScene/CameraControls.ts

@@ -529,7 +529,6 @@ export class CameraControls {
           parameters: {
             fov_y:
               this.camera instanceof PerspectiveCamera ? this.camera.fov : 45,
-            ...calculateNearFarFromFOV(this.lastPerspectiveFov),
           },
         },
       })
@@ -612,8 +611,6 @@ export class CameraControls {
           type: 'default_camera_set_perspective',
           parameters: {
             fov_y: newFov,
-            z_near: 0.01,
-            z_far: 1000,
           },
         },
       })
@@ -631,8 +628,6 @@ export class CameraControls {
             target: this.target,
           }),
           fov_y: newFov,
-          z_near: 0.01,
-          z_far: 1000,
         },
       })
     }

src/clientSideScene/ClientSideSceneComp.tsx

@@ -96,6 +96,7 @@ export const ClientSideScene = ({
     if (!canvasRef.current) return
     const canvas = canvasRef.current
     canvas.appendChild(sceneInfra.renderer.domElement)
+    canvas.appendChild(sceneInfra.labelRenderer.domElement)
     sceneInfra.animate()
     canvas.addEventListener('mousemove', sceneInfra.onMouseMove, false)
     canvas.addEventListener('mousedown', sceneInfra.onMouseDown, false)

src/clientSideScene/sceneEntities.ts

@@ -29,6 +29,9 @@ import {
   INTERSECTION_PLANE_LAYER,
   OnMouseEnterLeaveArgs,
   RAYCASTABLE_PLANE,
+  SEGMENT_LENGTH_LABEL,
+  SEGMENT_LENGTH_LABEL_OFFSET_PX,
+  SEGMENT_LENGTH_LABEL_TEXT,
   SKETCH_GROUP_SEGMENTS,
   SKETCH_LAYER,
   X_AXIS,
@@ -47,6 +50,7 @@ import {
   programMemoryInit,
   recast,
   SketchGroup,
+  ExtrudeGroup,
   VariableDeclaration,
   VariableDeclarator,
 } from 'lang/wasm'
@@ -102,6 +106,7 @@ import {
 } from 'lib/rectangleTool'
 import { getThemeColorForThreeJs } from 'lib/theme'
 import { err, trap } from 'lib/trap'
+import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'
 
 type DraftSegment = 'line' | 'tangentialArcTo'
 
@@ -414,7 +419,7 @@ export class SceneEntities {
         }
       )
 
-      let seg
+      let seg: Group
       const _node1 = getNodeFromPath<CallExpression>(
         maybeModdedAst,
         segPathToNode,
@@ -804,7 +809,7 @@ export class SceneEntities {
 
           // Update the primary AST and unequip the rectangle tool
           await kclManager.executeAstMock(_ast)
-          sceneInfra.modelingSend({ type: 'CancelSketch' })
+          sceneInfra.modelingSend({ type: 'Finish rectangle' })
 
           const { programMemory } = await executeAst({
             ast: _ast,
@@ -1075,9 +1080,16 @@ export class SceneEntities {
         programMemoryOverride,
       })
       this.sceneProgramMemory = programMemory
-      const sketchGroup = programMemory.root[
+
-        variableDeclarationName
+      const maybeSketchGroup = programMemory.root[variableDeclarationName]
-      ] as SketchGroup
+      let sketchGroup = undefined
+      if (maybeSketchGroup.type === 'SketchGroup') {
+        sketchGroup = maybeSketchGroup
+      } else if ((maybeSketchGroup as ExtrudeGroup).sketchGroup) {
+        sketchGroup = (maybeSketchGroup as ExtrudeGroup).sketchGroup
+      }
+      if (!sketchGroup) return
+
       const sgPaths = sketchGroup.value
       const orthoFactor = orthoScale(sceneInfra.camControls.camera)
 
@@ -1302,6 +1314,7 @@ export class SceneEntities {
     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)
@@ -1347,6 +1360,29 @@ export class SceneEntities {
       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)}${sceneInfra._baseUnit}`
+      label.classList.add(SEGMENT_LENGTH_LABEL_TEXT)
+      const offsetFromMidpoint = new Vector2(to[0] - from[0], to[1] - from[1])
+        .normalize()
+        .rotateAround(new Vector2(0, 0), Math.PI / 2)
+        .multiplyScalar(SEGMENT_LENGTH_LABEL_OFFSET_PX * scale)
+      label.style.setProperty('--x', `${offsetFromMidpoint.x}px`)
+      label.style.setProperty('--y', `${offsetFromMidpoint.y}px`)
+      labelWrapper.position.set(
+        (from[0] + to[0]) / 2 + offsetFromMidpoint.x,
+        (from[1] + to[1]) / 2 + offsetFromMidpoint.y,
+        0
+      )
+
+      labelGroup.visible = isHandlesVisible
+    }
+
     const straightSegmentBody = group.children.find(
       (child) => child.userData.type === STRAIGHT_SEGMENT_BODY
     ) as Mesh
@@ -1397,6 +1433,14 @@ export class SceneEntities {
     )
     let shouldResolve = false
     if (sketchSegments) {
+      // We have to manually remove the CSS2DObjects
+      // as they don't get removed when the group is removed
+      sketchSegments.traverse((object) => {
+        if (object instanceof CSS2DObject) {
+          object.element.remove()
+          object.remove()
+        }
+      })
       this.scene.remove(sketchSegments)
       shouldResolve = true
     } else {

src/clientSideScene/sceneInfra.ts

@@ -31,6 +31,7 @@ import { EngineCommandManager } from 'lang/std/engineConnection'
 import { MouseState, SegmentOverlayPayload } from 'machines/modelingMachine'
 import { getAngle, throttle } from 'lib/utils'
 import { Themes } from 'lib/theme'
+import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer'
 
 type SendType = ReturnType<typeof useModelingContext>['send']
 
@@ -54,6 +55,9 @@ export const Y_AXIS = 'yAxis'
 export const AXIS_GROUP = 'axisGroup'
 export const SKETCH_GROUP_SEGMENTS = 'sketch-group-segments'
 export const ARROWHEAD = 'arrowhead'
+export const SEGMENT_LENGTH_LABEL = 'segment-length-label'
+export const SEGMENT_LENGTH_LABEL_TEXT = 'segment-length-label-text'
+export const SEGMENT_LENGTH_LABEL_OFFSET_PX = 30
 
 export interface OnMouseEnterLeaveArgs {
   selected: Object3D<Object3DEventMap>
@@ -95,6 +99,7 @@ export class SceneInfra {
   static instance: SceneInfra
   scene: Scene
   renderer: WebGLRenderer
+  labelRenderer: CSS2DRenderer
   camControls: CameraControls
   isPerspective = true
   fov = 45
@@ -264,6 +269,13 @@ export class SceneInfra {
     this.renderer = new WebGLRenderer({ antialias: true, alpha: true }) // Enable transparency
     this.renderer.setSize(window.innerWidth, window.innerHeight)
     this.renderer.setClearColor(0x000000, 0) // Set clear color to black with 0 alpha (fully transparent)
+
+    // LABEL RENDERER
+    this.labelRenderer = new CSS2DRenderer()
+    this.labelRenderer.setSize(window.innerWidth, window.innerHeight)
+    this.labelRenderer.domElement.style.position = 'absolute'
+    this.labelRenderer.domElement.style.top = '0px'
+    this.labelRenderer.domElement.style.pointerEvents = 'none'
     window.addEventListener('resize', this.onWindowResize)
 
     this.camControls = new CameraControls(
@@ -328,6 +340,7 @@ export class SceneInfra {
 
   onWindowResize = () => {
     this.renderer.setSize(window.innerWidth, window.innerHeight)
+    this.labelRenderer.setSize(window.innerWidth, window.innerHeight)
   }
 
   animate = () => {
@@ -337,6 +350,7 @@ export class SceneInfra {
       // console.log('animation frame', this.cameraControls.camera)
       this.camControls.update()
       this.renderer.render(this.scene, this.camControls.camera)
+      this.labelRenderer.render(this.scene, this.camControls.camera)
     }
   }
 

src/clientSideScene/segments.ts

@@ -21,6 +21,7 @@ import {
   Vector3,
 } from 'three'
 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 {
   EXTRA_SEGMENT_HANDLE,
@@ -36,8 +37,14 @@ import {
   TANGENTIAL_ARC_TO__SEGMENT_DASH,
 } from './sceneEntities'
 import { getTangentPointFromPreviousArc } from 'lib/utils2d'
-import { ARROWHEAD } from './sceneInfra'
+import {
+  ARROWHEAD,
+  SEGMENT_LENGTH_LABEL,
+  SEGMENT_LENGTH_LABEL_OFFSET_PX,
+  SEGMENT_LENGTH_LABEL_TEXT,
+} from './sceneInfra'
 import { Themes, getThemeColorForThreeJs } from 'lib/theme'
+import { roundOff } from 'lib/utils'
 
 export function profileStart({
   from,
@@ -101,7 +108,7 @@ export function straightSegment({
   theme: Themes
   isSelected?: boolean
 }): Group {
-  const group = new Group()
+  const segmentGroup = new Group()
 
   const shape = new Shape()
   shape.moveTo(0, (-SEGMENT_WIDTH_PX / 2) * scale)
@@ -133,7 +140,7 @@ export function straightSegment({
     : STRAIGHT_SEGMENT_BODY
   mesh.name = STRAIGHT_SEGMENT_BODY
 
-  group.userData = {
+  segmentGroup.userData = {
     type: STRAIGHT_SEGMENT,
     id,
     from,
@@ -143,37 +150,60 @@ export function straightSegment({
     callExpName,
     baseColor,
   }
-  group.name = STRAIGHT_SEGMENT
+  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 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)
   const pxLength = length / scale
   const shouldHide = pxLength < HIDE_SEGMENT_LENGTH
-  arrowGroup.visible = !shouldHide
-
-  group.add(mesh)
-  if (callExpName !== 'close') group.add(arrowGroup)
 
+  // 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 offsetFromBase = new Vector2(to[0] - from[0], to[1] - from[1])
+  const directionVector = new Vector2(
-    .normalize()
+    to[0] - from[0],
-    .multiplyScalar(EXTRA_SEGMENT_OFFSET_PX * scale)
+    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
-  group.add(extraSegmentGroup)
+  segmentGroup.add(extraSegmentGroup)
 
-  return group
+  // 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 {
@@ -230,6 +260,46 @@ function createExtraSegmentHandle(
   return extraSegmentGroup
 }
 
+/**
+ * Creates a group containing a CSS2DObject with the length of the segment
+ */
+function createLengthIndicator({
+  from,
+  to,
+  scale,
+  length,
+}: {
+  from: Coords2d
+  to: Coords2d
+  scale: number
+  length: number
+}) {
+  const lengthIndicatorGroup = new Group()
+  lengthIndicatorGroup.name = SEGMENT_LENGTH_LABEL
+
+  // Make the elements
+  const lengthIndicatorText = document.createElement('p')
+  lengthIndicatorText.classList.add(SEGMENT_LENGTH_LABEL_TEXT)
+  lengthIndicatorText.innerText = roundOff(length).toString()
+  const lengthIndicatorWrapper = document.createElement('div')
+
+  // Style the elements
+  lengthIndicatorWrapper.style.position = 'absolute'
+  lengthIndicatorWrapper.appendChild(lengthIndicatorText)
+  const cssObject = new CSS2DObject(lengthIndicatorWrapper)
+  cssObject.name = SEGMENT_LENGTH_LABEL_TEXT
+
+  // Position the elements based on the line's heading
+  const offsetFromMidpoint = new Vector2(to[0] - from[0], to[1] - from[1])
+    .normalize()
+    .rotateAround(new Vector2(0, 0), -Math.PI / 2)
+    .multiplyScalar(SEGMENT_LENGTH_LABEL_OFFSET_PX * scale)
+  lengthIndicatorText.style.setProperty('--x', `${offsetFromMidpoint.x}px`)
+  lengthIndicatorText.style.setProperty('--y', `${offsetFromMidpoint.y}px`)
+  lengthIndicatorGroup.add(cssObject)
+  return lengthIndicatorGroup
+}
+
 export function tangentialArcToSegment({
   prevSegment,
   from,

src/components/CommandBar/CommandBarKclInput.tsx

@@ -1,5 +1,6 @@
 import { Completion } from '@codemirror/autocomplete'
-import { EditorState, EditorView, useCodeMirror } from '@uiw/react-codemirror'
+import { EditorView, ViewUpdate } from '@codemirror/view'
+import { EditorState } from '@codemirror/state'
 import { CustomIcon } from 'components/CustomIcon'
 import { useCommandsContext } from 'hooks/useCommandsContext'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
@@ -12,6 +13,7 @@ import { useEffect, useRef, useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 import styles from './CommandBarKclInput.module.css'
 import { createIdentifier, createVariableDeclaration } from 'lang/modifyAst'
+import { useCodeMirror } from 'components/ModelingSidebar/ModelingPanes/CodeEditor'
 
 function CommandBarKclInput({
   arg,
@@ -63,9 +65,7 @@ function CommandBarKclInput({
 
   const { setContainer } = useCodeMirror({
     container: editorRef.current,
-    value,
+    initialDocValue: value,
-    indentWithTab: false,
-    basicSetup: false,
     autoFocus: true,
     selection: {
       anchor: 0,
@@ -74,7 +74,6 @@ function CommandBarKclInput({
           ? previouslySetValue.valueText.length
           : defaultValue.length,
     },
-    accessKey: 'command-bar',
     theme:
       settings.context.app.theme.current === 'system'
         ? getSystemTheme()
@@ -96,8 +95,12 @@ function CommandBarKclInput({
         }
         return tr
       }),
+      EditorView.updateListener.of((vu: ViewUpdate) => {
+        if (vu.docChanged) {
+          setValue(vu.state.doc.toString())
+        }
+      }),
     ],
-    onChange: (newValue) => setValue(newValue),
   })
 
   useEffect(() => {

src/components/FileTree.tsx

@@ -175,7 +175,11 @@ const FileTreeItem = ({
           codeManager.code
       )
       codeManager.writeToFile()
-      kclManager.executeCode(true, true)
+
+      kclManager.isFirstRender = true
+      kclManager.executeCode(true, true).then(() => {
+        kclManager.isFirstRender = false
+      })
     } else {
       // Let the lsp servers know we closed a file.
       onFileClose(currentFile?.path || null, project?.path || null)

src/components/Gizmo.tsx

@@ -119,7 +119,7 @@ export default function Gizmo() {
       <div
         ref={wrapperRef}
         aria-label="View orientation gizmo"
-        className="grid place-content-center rounded-full overflow-hidden border border-solid border-primary/50 pointer-events-auto"
+        className="grid place-content-center rounded-full overflow-hidden border border-solid border-primary/50 pointer-events-auto bg-chalkboard-10/70 dark:bg-chalkboard-100/80 backdrop-blur-sm"
       >
         <canvas ref={canvasRef} />
         <ContextMenu

src/components/LspProvider.tsx

@@ -8,7 +8,7 @@ import {
   LanguageServerPlugin,
 } from '@kittycad/codemirror-lsp-client'
 import { TEST, VITE_KC_API_BASE_URL } from 'env'
-import KclLanguageSupport from 'editor/plugins/lsp/kcl/language'
+import { kcl } from 'editor/plugins/lsp/kcl/language'
 import { copilotPlugin } from 'editor/plugins/lsp/copilot'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { Extension } from '@codemirror/state'
@@ -146,7 +146,7 @@ export const LspProvider = ({ children }: { children: React.ReactNode }) => {
     let plugin = null
     if (isKclLspReady && !TEST && kclLspClient) {
       // Set up the lsp plugin.
-      const lsp = new KclLanguageSupport({
+      const lsp = kcl({
         documentUri: `file:///${PROJECT_ENTRYPOINT}`,
         workspaceFolders: getWorkspaceFolders(),
         client: kclLspClient,

src/components/ModelingMachineProvider.tsx

@@ -53,9 +53,8 @@ import {
   sketchOnExtrudedFace,
   startSketchOnDefault,
 } from 'lang/modifyAst'
-import { Program, VariableDeclaration, parse, recast } from 'lang/wasm'
+import { Program, parse, recast } from 'lang/wasm'
 import {
-  getNodeFromPath,
   getNodePathFromSourceRange,
   hasExtrudableGeometry,
   isSingleCursorInPipe,
@@ -64,7 +63,7 @@ import { TEST } from 'env'
 import { exportFromEngine } from 'lib/exportFromEngine'
 import { Models } from '@kittycad/lib/dist/types/src'
 import toast from 'react-hot-toast'
-import { EditorSelection, Transaction } from '@uiw/react-codemirror'
+import { EditorSelection, Transaction } from '@codemirror/state'
 import { useSearchParams } from 'react-router-dom'
 import { letEngineAnimateAndSyncCamAfter } from 'clientSideScene/CameraControls'
 import { getVarNameModal } from 'hooks/useToolbarGuards'
@@ -128,7 +127,7 @@ export const ModelingMachineProvider = ({
         'enable copilot': () => {
           editorManager.setCopilotEnabled(true)
         },
-        'sketch exit execute': () => {
+        'sketch exit execute': ({ store }) => {
           ;(async () => {
             await sceneInfra.camControls.snapToPerspectiveBeforeHandingBackControlToEngine()
 
@@ -162,7 +161,12 @@ export const ModelingMachineProvider = ({
               })
             }
 
-            kclManager.executeCode(true)
+            store.videoElement?.pause()
+            kclManager.executeCode(true).then(() => {
+              if (engineCommandManager.engineConnection?.freezeFrame) return
+
+              store.videoElement?.play()
+            })
           })()
         },
         'Set mouse state': assign({
@@ -438,17 +442,6 @@ export const ModelingMachineProvider = ({
           if (selectionRanges.codeBasedSelections.length <= 0) return false
           return true
         },
-        'Sketch is empty': ({ sketchDetails }) => {
-          const node = getNodeFromPath<VariableDeclaration>(
-            kclManager.ast,
-            sketchDetails?.sketchPathToNode || [],
-            'VariableDeclaration'
-          )
-          // This should not be returning false, and it should be caught
-          // but we need to simulate old behavior to move on.
-          if (err(node)) return false
-          return node.node?.declarations?.[0]?.init.type !== 'PipeExpression'
-        },
         'Selection is on face': ({ selectionRanges }, { data }) => {
           if (data?.forceNewSketch) return false
           if (!isSingleCursorInPipe(selectionRanges, kclManager.ast))

src/components/ModelingSidebar/ModelingPanes/CodeEditor.tsx

@@ -0,0 +1,171 @@
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  forwardRef,
+  useImperativeHandle,
+} from 'react'
+import {
+  EditorState,
+  EditorStateConfig,
+  Extension,
+  StateEffect,
+} from '@codemirror/state'
+import { EditorView } from '@codemirror/view'
+import { oneDark } from '@codemirror/theme-one-dark'
+
+//reference: https://github.com/sachinraja/rodemirror/blob/main/src/use-first-render.ts
+const useFirstRender = () => {
+  const firstRender = useRef(true)
+
+  useEffect(() => {
+    firstRender.current = false
+  }, [])
+
+  return firstRender.current
+}
+
+const defaultLightThemeOption = EditorView.theme(
+  {
+    '&': {
+      backgroundColor: '#fff',
+    },
+  },
+  {
+    dark: false,
+  }
+)
+
+interface CodeEditorRef {
+  editor?: HTMLDivElement | null
+  view?: EditorView
+  state?: EditorState
+}
+
+interface CodeEditorProps {
+  onCreateEditor?: (view: EditorView | null) => void
+  initialDocValue?: EditorStateConfig['doc']
+  extensions?: Extension
+  theme: 'light' | 'dark'
+  autoFocus?: boolean
+  selection?: EditorStateConfig['selection']
+}
+
+interface UseCodeMirror extends CodeEditorProps {
+  container?: HTMLDivElement | null
+}
+
+const CodeEditor = forwardRef<CodeEditorRef, CodeEditorProps>((props, ref) => {
+  const {
+    onCreateEditor,
+    extensions = [],
+    initialDocValue,
+    theme,
+    autoFocus = false,
+    selection,
+  } = props
+  const editor = useRef<HTMLDivElement>(null)
+
+  const { view, state, container } = useCodeMirror({
+    container: editor.current,
+    onCreateEditor,
+    extensions,
+    initialDocValue,
+    theme,
+    autoFocus,
+    selection,
+  })
+
+  useImperativeHandle(
+    ref,
+    () => ({ editor: editor.current, view: view, state: state }),
+    [editor, container, view, state]
+  )
+
+  return <div ref={editor}></div>
+})
+
+export function useCodeMirror(props: UseCodeMirror) {
+  const {
+    onCreateEditor,
+    extensions = [],
+    initialDocValue,
+    theme,
+    autoFocus = false,
+    selection,
+  } = props
+
+  const [container, setContainer] = useState<HTMLDivElement | null>()
+  const [view, setView] = useState<EditorView>()
+  const [state, setState] = useState<EditorState>()
+
+  const isFirstRender = useFirstRender()
+
+  const targetExtensions = useMemo(() => {
+    let exts = Array.isArray(extensions) ? extensions : []
+    if (theme === 'dark') {
+      exts = [...exts, oneDark]
+    } else if (theme === 'light') {
+      exts = [...exts, defaultLightThemeOption]
+    }
+
+    return exts
+  }, [extensions, theme])
+
+  useEffect(() => {
+    if (container && !state) {
+      const config = {
+        doc: initialDocValue,
+        selection,
+        extensions: [...Array.of(extensions)],
+      }
+      const stateCurrent = EditorState.create(config)
+      setState(stateCurrent)
+      if (!view) {
+        const viewCurrent = new EditorView({
+          state: stateCurrent,
+          parent: container,
+        })
+        setView(viewCurrent)
+        onCreateEditor && onCreateEditor(viewCurrent)
+      }
+    }
+    return () => {
+      if (view) {
+        setState(undefined)
+        setView(undefined)
+      }
+    }
+  }, [container, state])
+
+  useEffect(() => setContainer(props.container), [props.container])
+
+  useEffect(
+    () => () => {
+      if (view) {
+        view.destroy()
+        setView(undefined)
+      }
+    },
+    [view]
+  )
+
+  useEffect(() => {
+    if (autoFocus && view) {
+      view.focus()
+    }
+  }, [autoFocus, view])
+
+  useEffect(() => {
+    if (view && !isFirstRender) {
+      view.dispatch({
+        effects: StateEffect.reconfigure.of(targetExtensions),
+      })
+    }
+  }, [targetExtensions])
+
+  return { view, setView, container, setContainer, state, setState }
+}
+
+export default CodeEditor

src/components/ModelingSidebar/ModelingPanes/KclEditorPane.tsx

@@ -1,4 +1,3 @@
-import ReactCodeMirror from '@uiw/react-codemirror'
 import { TEST } from 'env'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { Themes, getSystemTheme } from 'lib/theme'
@@ -43,6 +42,7 @@ import {
   closeBracketsKeymap,
   completionKeymap,
 } from '@codemirror/autocomplete'
+import CodeEditor from './CodeEditor'
 
 export const editorShortcutMeta = {
   formatCode: {
@@ -185,15 +185,15 @@ export const KclEditorPane = () => {
       id="code-mirror-override"
       className={'absolute inset-0 ' + (cursorBlinking.current ? 'blink' : '')}
     >
-      <ReactCodeMirror
+      <CodeEditor
-        value={initialCode.current}
+        initialDocValue={initialCode.current}
         extensions={editorExtensions}
         theme={theme}
         onCreateEditor={(_editorView) => {
+          if (_editorView === null) return
+
           editorManager.setEditorView(_editorView)
         }}
-        indentWithTab={false}
-        basicSetup={false}
       />
     </div>
   )

src/components/RefreshButton.tsx

@@ -6,14 +6,12 @@ import React, { useMemo } from 'react'
 import toast from 'react-hot-toast'
 import Tooltip from './Tooltip'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
-import { useAppState } from 'AppState'
 
 export const RefreshButton = ({ children }: React.PropsWithChildren) => {
   const { auth } = useSettingsAuthContext()
   const token = auth?.context?.token
-  const { htmlRef } = useAppState()
   const coreDumpManager = useMemo(
-    () => new CoreDumpManager(engineCommandManager, htmlRef, token),
+    () => new CoreDumpManager(engineCommandManager, token),
     []
   )
 

src/components/SettingsAuthProvider.tsx

@@ -175,7 +175,12 @@ export const SettingsAuthProviderBase = ({
             id: `${event.type}.success`,
           })
         },
-        'Execute AST': () => kclManager.executeCode(true, true),
+        'Execute AST': () => {
+          kclManager.isFirstRender = true
+          kclManager.executeCode(true, true).then(() => {
+            kclManager.isFirstRender = false
+          })
+        },
       },
       services: {
         'Persist settings': (context) =>