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>

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,
   }) => {
@@ -1204,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(
@@ -4053,108 +4116,111 @@ test.describe('Sketch tests', () => {
     })
   })
 
-  test('Can edit a sketch that has been extruded in the same pipe', async ({
-    page,
-  }) => {
-    const u = await getUtils(page)
-    await page.addInitScript(async () => {
-      localStorage.setItem(
-        'persistCode',
-        `const sketch001 = startSketchOn('XZ')
+  // failing for the same reason as "Can undo a sketch modification with ctrl+z"
+  // please fix together
+  test.fixme(
+    'Can edit a sketch that has been extruded in the same pipe',
+    async ({ page }) => {
+      const u = await getUtils(page)
+      await page.addInitScript(async () => {
+        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 expect(
-      page.getByRole('button', { name: 'Start Sketch' })
-    ).not.toBeDisabled()
+      await u.waitForAuthSkipAppStart()
+      await expect(
+        page.getByRole('button', { name: 'Start Sketch' })
+      ).not.toBeDisabled()
 
-    await page.waitForTimeout(100)
-    await u.openAndClearDebugPanel()
-    await u.sendCustomCmd({
-      type: 'modeling_cmd_req',
-      cmd_id: uuidv4(),
-      cmd: {
-        type: 'default_camera_look_at',
-        vantage: { x: 0, y: -1250, z: 580 },
-        center: { x: 0, y: 0, z: 0 },
-        up: { x: 0, y: 0, z: 1 },
-      },
-    })
-    await page.waitForTimeout(100)
-    await u.sendCustomCmd({
-      type: 'modeling_cmd_req',
-      cmd_id: uuidv4(),
-      cmd: {
-        type: 'default_camera_get_settings',
-      },
-    })
-    await page.waitForTimeout(100)
+      await page.waitForTimeout(100)
+      await u.openAndClearDebugPanel()
+      await u.sendCustomCmd({
+        type: 'modeling_cmd_req',
+        cmd_id: uuidv4(),
+        cmd: {
+          type: 'default_camera_look_at',
+          vantage: { x: 0, y: -1250, z: 580 },
+          center: { x: 0, y: 0, z: 0 },
+          up: { x: 0, y: 0, z: 1 },
+        },
+      })
+      await page.waitForTimeout(100)
+      await u.sendCustomCmd({
+        type: 'modeling_cmd_req',
+        cmd_id: uuidv4(),
+        cmd: {
+          type: 'default_camera_get_settings',
+        },
+      })
+      await page.waitForTimeout(100)
 
-    const startPX = [665, 458]
+      const startPX = [665, 458]
 
-    const dragPX = 40
+      const dragPX = 40
 
-    await page.getByText('startProfileAt([4.61, -14.01], %)').click()
-    await expect(
-      page.getByRole('button', { name: 'Edit Sketch' })
-    ).toBeVisible()
-    await page.getByRole('button', { name: 'Edit Sketch' }).click()
-    await page.waitForTimeout(400)
-    let prevContent = await page.locator('.cm-content').innerText()
+      await page.getByText('startProfileAt([4.61, -14.01], %)').click()
+      await expect(
+        page.getByRole('button', { name: 'Edit Sketch' })
+      ).toBeVisible()
+      await page.getByRole('button', { name: 'Edit Sketch' }).click()
+      await page.waitForTimeout(400)
+      let prevContent = await page.locator('.cm-content').innerText()
 
-    await expect(page.getByTestId('segment-overlay')).toHaveCount(2)
+      await expect(page.getByTestId('segment-overlay')).toHaveCount(2)
 
-    // drag startProfieAt handle
-    await page.dragAndDrop('#stream', '#stream', {
-      sourcePosition: { x: startPX[0], y: startPX[1] },
-      targetPosition: { x: startPX[0] + dragPX, y: startPX[1] + dragPX },
-    })
-    await page.waitForTimeout(100)
-    await expect(page.locator('.cm-content')).not.toHaveText(prevContent)
-    prevContent = await page.locator('.cm-content').innerText()
+      // drag startProfieAt handle
+      await page.dragAndDrop('#stream', '#stream', {
+        sourcePosition: { x: startPX[0], y: startPX[1] },
+        targetPosition: { x: startPX[0] + dragPX, y: startPX[1] + dragPX },
+      })
+      await page.waitForTimeout(100)
+      await expect(page.locator('.cm-content')).not.toHaveText(prevContent)
+      prevContent = await page.locator('.cm-content').innerText()
 
-    // drag line handle
-    await page.waitForTimeout(100)
+      // drag line handle
+      await page.waitForTimeout(100)
 
-    const lineEnd = await u.getBoundingBox('[data-overlay-index="0"]')
-    await page.waitForTimeout(100)
-    await page.dragAndDrop('#stream', '#stream', {
-      sourcePosition: { x: lineEnd.x - 5, y: lineEnd.y },
-      targetPosition: { x: lineEnd.x + dragPX, y: lineEnd.y + dragPX },
-    })
-    await expect(page.locator('.cm-content')).not.toHaveText(prevContent)
-    prevContent = await page.locator('.cm-content').innerText()
+      const lineEnd = await u.getBoundingBox('[data-overlay-index="0"]')
+      await page.waitForTimeout(100)
+      await page.dragAndDrop('#stream', '#stream', {
+        sourcePosition: { x: lineEnd.x - 5, y: lineEnd.y },
+        targetPosition: { x: lineEnd.x + dragPX, y: lineEnd.y + dragPX },
+      })
+      await expect(page.locator('.cm-content')).not.toHaveText(prevContent)
+      prevContent = await page.locator('.cm-content').innerText()
 
-    // drag tangentialArcTo handle
-    const tangentEnd = await u.getBoundingBox('[data-overlay-index="1"]')
-    await page.dragAndDrop('#stream', '#stream', {
-      sourcePosition: { x: tangentEnd.x, y: tangentEnd.y - 5 },
-      targetPosition: {
-        x: tangentEnd.x + dragPX,
-        y: tangentEnd.y + dragPX,
-      },
-    })
-    await page.waitForTimeout(100)
-    await expect(page.locator('.cm-content')).not.toHaveText(prevContent)
+      // drag tangentialArcTo handle
+      const tangentEnd = await u.getBoundingBox('[data-overlay-index="1"]')
+      await page.dragAndDrop('#stream', '#stream', {
+        sourcePosition: { x: tangentEnd.x, y: tangentEnd.y - 5 },
+        targetPosition: {
+          x: tangentEnd.x + dragPX,
+          y: tangentEnd.y + dragPX,
+        },
+      })
+      await page.waitForTimeout(100)
+      await expect(page.locator('.cm-content')).not.toHaveText(prevContent)
 
-    // expect the code to have changed
-    await expect(page.locator('.cm-content'))
-      .toHaveText(`const sketch001 = startSketchOn('XZ')
+      // expect the code to have changed
+      await expect(page.locator('.cm-content'))
+        .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,
@@ -6704,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 })
 
@@ -6774,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

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

@@ -312,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
-      // there might be a more robust way of doing this.
-      const pixMultiplier = browserType === 'webkit' ? 2 : 1
+      const pixMultiplier: number = await page.evaluate(
+        'window.devicePixelRatio'
+      )
       const index =
         (screenshot.width * coords.y * pixMultiplier +
           coords.x * pixMultiplier) *
@@ -377,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.
-      test.skip(
-        cdpSession === null,
-        'Network emulation is only supported in Chromium'
-      )
+      if (cdpSession === null) {
+        // Use a fail safe if we can't simulate disconnect (on Safari)
+        return page.evaluate('window.tearDown()')
+      }
 
       cdpSession?.send('Network.emulateNetworkConditions', networkOptions)
     },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "untitled-app",
-  "version": "0.23.1",
+  "version": "0.24.0",
   "private": true,
   "dependencies": {
     "@codemirror/autocomplete": "^6.17.0",
@@ -17,7 +17,9 @@
     "@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.14",
@@ -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/plugin/lsp.ts

@@ -71,6 +71,9 @@ export interface LanguageServerOptions {
   ) => void
 
   changesDelay?: number
+
+  doSemanticTokens?: boolean
+  doFoldingRanges?: boolean
 }
 
 export class LanguageServerPlugin implements PluginValue {
@@ -87,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.
@@ -109,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
     }
@@ -220,6 +229,7 @@ export class LanguageServerPlugin implements PluginValue {
 
   async getFoldingRanges(): Promise<LSP.FoldingRange[] | null> {
     if (
+      !this.doFoldingRanges ||
       !this.client.ready ||
       !this.client.getServerCapabilities().foldingRangeProvider
     )
@@ -445,6 +455,7 @@ export class LanguageServerPlugin implements PluginValue {
 
   async requestSemanticTokens() {
     if (
+      !this.doSemanticTokens ||
       !this.client.ready ||
       !this.client.getServerCapabilities().semanticTokensProvider
     ) {

src-tauri/tauri.conf.json

@@ -80,5 +80,5 @@
     }
   },
   "productName": "Zoo Modeling App",
-  "version": "0.23.1"
+  "version": "0.24.0"
 }

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

@@ -19,10 +19,7 @@ import {
   PROFILE_START,
   getParentGroup,
 } from './sceneEntities'
-import {
-  SegmentOverlay,
-  ModelingMachineContext as ModelingContextType,
-} from 'machines/modelingMachine'
+import { SegmentOverlay, SketchDetails } from 'machines/modelingMachine'
 import { findUsesOfTagInPipe, getNodeFromPath } from 'lang/queryAst'
 import {
   CallExpression,
@@ -99,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)
@@ -356,12 +354,11 @@ export const confirmModal = create<ConfirmModalProps, boolean, boolean>(
 
 export async function deleteSegment({
   pathToNode,
-  context,
+  sketchDetails,
 }: {
   pathToNode: PathToNode
-  context: ModelingContextType
+  sketchDetails: SketchDetails | null
 }) {
-  const { sketchDetails } = context
   let modifiedAst: Program | Error = kclManager.ast
   const dependentRanges = findUsesOfTagInPipe(modifiedAst, pathToNode)
 
@@ -398,7 +395,13 @@ export async function deleteSegment({
   }
 
   if (!sketchDetails) return
-  await sceneEntitiesManager.updateAstAndRejigSketch(modifiedAst, context)
+  await sceneEntitiesManager.updateAstAndRejigSketch(
+    pathToNode,
+    modifiedAst,
+    sketchDetails.zAxis,
+    sketchDetails.yAxis,
+    sketchDetails.origin
+  )
 
   // Now 'Set sketchDetails' is called with the modified pathToNode
 }

src/clientSideScene/sceneCallbacks.ts

@@ -1,362 +0,0 @@
-import { getEventForSegmentSelection } from 'lib/selections'
-import {
-  editorManager,
-  kclManager,
-  sceneEntitiesManager,
-  sceneInfra,
-} from 'lib/singletons'
-import {
-  Intersection,
-  Mesh,
-  MeshBasicMaterial,
-  Object3D,
-  Object3DEventMap,
-  OrthographicCamera,
-  Points,
-  Vector2,
-  Vector3,
-} from 'three'
-import {
-  EXTRA_SEGMENT_HANDLE,
-  PROFILE_START,
-  STRAIGHT_SEGMENT,
-  TANGENTIAL_ARC_TO_SEGMENT,
-  getParentGroup,
-  sketchGroupFromPathToNode,
-} from './sceneEntities'
-import { trap } from 'lib/trap'
-import { addNewSketchLn } from 'lang/std/sketch'
-import { CallExpression, PathToNode, parse, recast } from 'lang/wasm'
-import { ARROWHEAD, X_AXIS, Y_AXIS } from './sceneInfra'
-import { getNodeFromPath } from 'lang/queryAst'
-import { getThemeColorForThreeJs } from 'lib/theme'
-import { orthoScale, perspScale, quaternionFromUpNForward } from './helpers'
-import { ModelingMachineContext } from 'machines/modelingMachine'
-import { addStartProfileAt } from 'lang/modifyAst'
-
-export interface OnMouseEnterLeaveArgs {
-  selected: Object3D<Object3DEventMap>
-  dragSelected?: Object3D<Object3DEventMap>
-  mouseEvent: MouseEvent
-}
-
-export interface OnDragCallbackArgs extends OnMouseEnterLeaveArgs {
-  intersectionPoint: {
-    twoD: Vector2
-    threeD: Vector3
-  }
-  intersects: Intersection<Object3D<Object3DEventMap>>[]
-}
-export interface OnClickCallbackArgs {
-  mouseEvent: MouseEvent
-  intersectionPoint?: {
-    twoD: Vector2
-    threeD: Vector3
-  }
-  intersects: Intersection<Object3D<Object3DEventMap>>[]
-  selected?: Object3D<Object3DEventMap>
-}
-
-export interface OnMoveCallbackArgs {
-  mouseEvent: MouseEvent
-  intersectionPoint: {
-    twoD: Vector2
-    threeD: Vector3
-  }
-  intersects: Intersection<Object3D<Object3DEventMap>>[]
-  selected?: Object3D<Object3DEventMap>
-}
-
-interface Callbacks {
-  onDragStart: (arg: OnDragCallbackArgs) => void
-  onDragEnd: (arg: OnDragCallbackArgs) => void
-  onDrag: (arg: OnDragCallbackArgs) => void
-  onMove: (arg: OnMoveCallbackArgs) => void
-  onClick: (arg: OnClickCallbackArgs) => void
-  onMouseEnter: (arg: OnMouseEnterLeaveArgs) => void
-  onMouseLeave: (arg: OnMouseEnterLeaveArgs) => void
-}
-
-type SetCallbacksWithCtx = (context: ModelingMachineContext) => Callbacks
-
-const dummyListenersAll: Callbacks = {
-  onDragStart: () => {},
-  onDragEnd: () => {},
-  onDrag: () => {},
-  onMove: () => {},
-  onClick: () => {},
-  onMouseEnter: () => {},
-  onMouseLeave: () => {},
-}
-
-const onMousEnterLeaveCallbacks = {
-  onMouseEnter: ({ selected, dragSelected }: OnMouseEnterLeaveArgs) => {
-    if ([X_AXIS, Y_AXIS].includes(selected?.userData?.type)) {
-      const obj = selected as Mesh
-      const mat = obj.material as MeshBasicMaterial
-      mat.color.set(obj.userData.baseColor)
-      mat.color.offsetHSL(0, 0, 0.5)
-    }
-    const parent = getParentGroup(selected, [
-      STRAIGHT_SEGMENT,
-      TANGENTIAL_ARC_TO_SEGMENT,
-      PROFILE_START,
-    ])
-    if (parent?.userData?.pathToNode) {
-      const updatedAst = parse(recast(kclManager.ast))
-      if (trap(updatedAst)) return
-      const _node = getNodeFromPath<CallExpression>(
-        updatedAst,
-        parent.userData.pathToNode,
-        'CallExpression'
-      )
-      if (trap(_node, { suppress: true })) return
-      const node = _node.node
-      editorManager.setHighlightRange([node.start, node.end])
-      const yellow = 0xffff00
-      colorSegment(selected, yellow)
-      const extraSegmentGroup = parent.getObjectByName(EXTRA_SEGMENT_HANDLE)
-      if (extraSegmentGroup) {
-        extraSegmentGroup.traverse((child) => {
-          if (child instanceof Points || child instanceof Mesh) {
-            child.material.opacity = dragSelected ? 0 : 1
-          }
-        })
-      }
-      const orthoFactor = orthoScale(sceneInfra.camControls.camera)
-
-      const factor =
-        (sceneInfra.camControls.camera instanceof OrthographicCamera
-          ? orthoFactor
-          : perspScale(sceneInfra.camControls.camera, parent)) /
-        sceneInfra._baseUnitMultiplier
-      if (parent.name === STRAIGHT_SEGMENT) {
-        sceneEntitiesManager.updateStraightSegment({
-          from: parent.userData.from,
-          to: parent.userData.to,
-          group: parent,
-          scale: factor,
-        })
-      } else if (parent.name === TANGENTIAL_ARC_TO_SEGMENT) {
-        sceneEntitiesManager.updateTangentialArcToSegment({
-          prevSegment: parent.userData.prevSegment,
-          from: parent.userData.from,
-          to: parent.userData.to,
-          group: parent,
-          scale: factor,
-        })
-      }
-      return
-    }
-    editorManager.setHighlightRange([0, 0])
-  },
-  onMouseLeave: ({ selected, ...rest }: OnMouseEnterLeaveArgs) => {
-    editorManager.setHighlightRange([0, 0])
-    const parent = getParentGroup(selected, [
-      STRAIGHT_SEGMENT,
-      TANGENTIAL_ARC_TO_SEGMENT,
-      PROFILE_START,
-    ])
-    if (parent) {
-      const orthoFactor = orthoScale(sceneInfra.camControls.camera)
-
-      const factor =
-        (sceneInfra.camControls.camera instanceof OrthographicCamera
-          ? orthoFactor
-          : perspScale(sceneInfra.camControls.camera, parent)) /
-        sceneInfra._baseUnitMultiplier
-      if (parent.name === STRAIGHT_SEGMENT) {
-        sceneEntitiesManager.updateStraightSegment({
-          from: parent.userData.from,
-          to: parent.userData.to,
-          group: parent,
-          scale: factor,
-        })
-      } else if (parent.name === TANGENTIAL_ARC_TO_SEGMENT) {
-        sceneEntitiesManager.updateTangentialArcToSegment({
-          prevSegment: parent.userData.prevSegment,
-          from: parent.userData.from,
-          to: parent.userData.to,
-          group: parent,
-          scale: factor,
-        })
-      }
-    }
-    const isSelected = parent?.userData?.isSelected
-    colorSegment(
-      selected,
-      isSelected
-        ? 0x0000ff
-        : parent?.userData?.baseColor ||
-            getThemeColorForThreeJs(sceneInfra._theme)
-    )
-    const extraSegmentGroup = parent?.getObjectByName(EXTRA_SEGMENT_HANDLE)
-    if (extraSegmentGroup) {
-      extraSegmentGroup.traverse((child) => {
-        if (child instanceof Points || child instanceof Mesh) {
-          child.material.opacity = 0
-        }
-      })
-    }
-    if ([X_AXIS, Y_AXIS].includes(selected?.userData?.type)) {
-      const obj = selected as Mesh
-      const mat = obj.material as MeshBasicMaterial
-      mat.color.set(obj.userData.baseColor)
-      if (obj.userData.isSelected) mat.color.offsetHSL(0, 0, 0.2)
-    }
-  },
-} as const
-
-export const idleCallbacks: SetCallbacksWithCtx = (context) => {
-  let addingNewSegmentStatus: 'nothing' | 'pending' | 'added' = 'nothing'
-  return {
-    onDragStart: () => {},
-    onDragEnd: () => {},
-    onMove: () => {},
-    ...onMousEnterLeaveCallbacks,
-    onClick: (args) => {
-      if (args?.mouseEvent.which !== 1) return
-      if (!args || !args.selected) {
-        sceneInfra.modelingSend({
-          type: 'Set selection',
-          data: {
-            selectionType: 'singleCodeCursor',
-          },
-        })
-        return
-      }
-      const { selected } = args
-      const event = getEventForSegmentSelection(selected)
-      if (!event) return
-      sceneInfra.modelingSend(event)
-    },
-    onDrag: async ({ selected, intersectionPoint, mouseEvent, intersects }) => {
-      if (mouseEvent.which !== 1) return
-
-      const group = getParentGroup(selected, [EXTRA_SEGMENT_HANDLE])
-      if (group?.name === EXTRA_SEGMENT_HANDLE) {
-        const segGroup = getParentGroup(selected)
-        const pathToNode: PathToNode = segGroup?.userData?.pathToNode
-        const pathToNodeIndex = pathToNode.findIndex(
-          (x) => x[1] === 'PipeExpression'
-        )
-
-        const sketchGroup = sketchGroupFromPathToNode({
-          pathToNode,
-          ast: kclManager.ast,
-          programMemory: kclManager.programMemory,
-        })
-        if (trap(sketchGroup)) return
-
-        const pipeIndex = pathToNode[pathToNodeIndex + 1][0] as number
-        if (addingNewSegmentStatus === 'nothing') {
-          const prevSegment = sketchGroup.value[pipeIndex - 2]
-          const mod = addNewSketchLn({
-            node: kclManager.ast,
-            programMemory: kclManager.programMemory,
-            to: [intersectionPoint.twoD.x, intersectionPoint.twoD.y],
-            from: [prevSegment.from[0], prevSegment.from[1]],
-            // TODO assuming it's always a straight segments being added
-            // as this is easiest, and we'll need to add "tabbing" behavior
-            // to support other segment types
-            fnName: 'line',
-            pathToNode: pathToNode,
-            spliceBetween: true,
-          })
-          addingNewSegmentStatus = 'pending'
-          if (trap(mod)) return
-
-          await kclManager.executeAstMock(mod.modifiedAst)
-          await sceneEntitiesManager.tearDownSketch({ removeAxis: false })
-          sceneEntitiesManager.setupSketch({
-            sketchPathToNode: pathToNode,
-            maybeModdedAst: kclManager.ast,
-            up: context.sketchDetails?.yAxis || [0, 1, 0],
-            forward: context.sketchDetails?.zAxis || [0, 0, 1],
-            position: context.sketchDetails?.origin || [0, 0, 0],
-          })
-          addingNewSegmentStatus = 'added'
-        } else if (addingNewSegmentStatus === 'added') {
-          const pathToNodeForNewSegment = pathToNode.slice(0, pathToNodeIndex)
-          pathToNodeForNewSegment.push([pipeIndex - 2, 'index'])
-          sceneEntitiesManager.onDragSegment({
-            sketchPathToNode: pathToNodeForNewSegment,
-            object: selected,
-            intersection2d: intersectionPoint.twoD,
-            intersects,
-          })
-        }
-        return
-      }
-
-      sceneEntitiesManager.onDragSegment({
-        object: selected,
-        intersection2d: intersectionPoint.twoD,
-        intersects,
-        sketchPathToNode: context.sketchDetails?.sketchPathToNode || [],
-      })
-    },
-  }
-}
-
-export const Sketch_LineTool_NoPoints: SetCallbacksWithCtx = ({
-  sketchDetails,
-}) => {
-  if (!sketchDetails) return dummyListenersAll
-  sceneEntitiesManager.createIntersectionPlane()
-  const quaternion = quaternionFromUpNForward(
-    new Vector3(...sketchDetails.yAxis),
-    new Vector3(...sketchDetails.zAxis)
-  )
-  sceneEntitiesManager.intersectionPlane &&
-    sceneEntitiesManager.intersectionPlane.setRotationFromQuaternion(quaternion)
-  sceneEntitiesManager.intersectionPlane &&
-    sceneEntitiesManager.intersectionPlane.position.copy(
-      new Vector3(...(sketchDetails?.origin || [0, 0, 0]))
-    )
-  return {
-    ...dummyListenersAll,
-    onClick: async (args) => {
-      if (!args) return
-      if (args.mouseEvent.which !== 1) return
-      const { intersectionPoint } = args
-      if (!intersectionPoint?.twoD || !sketchDetails?.sketchPathToNode) return
-      const addStartProfileAtRes = addStartProfileAt(
-        kclManager.ast,
-        sketchDetails.sketchPathToNode,
-        [intersectionPoint.twoD.x, intersectionPoint.twoD.y]
-      )
-
-      if (trap(addStartProfileAtRes)) return
-      const { modifiedAst } = addStartProfileAtRes
-
-      await kclManager.updateAst(modifiedAst, false)
-      sceneEntitiesManager.removeIntersectionPlane()
-      sceneInfra.modelingSend('Add start point')
-    },
-  }
-}
-
-function colorSegment(object: any, color: number) {
-  const segmentHead = getParentGroup(object, [ARROWHEAD, PROFILE_START])
-  if (segmentHead) {
-    segmentHead.traverse((child) => {
-      if (child instanceof Mesh) {
-        child.material.color.set(color)
-      }
-    })
-    return
-  }
-  const straightSegmentBody = getParentGroup(object, [
-    STRAIGHT_SEGMENT,
-    TANGENTIAL_ARC_TO_SEGMENT,
-  ])
-  if (straightSegmentBody) {
-    straightSegmentBody.traverse((child) => {
-      if (child instanceof Mesh && !child.userData.ignoreColorChange) {
-        child.material.color.set(color)
-      }
-    })
-    return
-  }
-}

src/clientSideScene/sceneEntities.ts

@@ -22,9 +22,16 @@ import {
 import {
   ARROWHEAD,
   AXIS_GROUP,
+  DEFAULT_PLANES,
+  DefaultPlane,
+  defaultPlaneColor,
   getSceneScale,
   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,
@@ -43,6 +50,7 @@ import {
   programMemoryInit,
   recast,
   SketchGroup,
+  ExtrudeGroup,
   VariableDeclaration,
   VariableDeclarator,
 } from 'lang/wasm'
@@ -78,16 +86,16 @@ import {
   createPipeSubstitution,
   findUniqueName,
 } from 'lang/modifyAst'
-import { Selections, sendSelectEventToEngine } from 'lib/selections'
+import {
+  Selections,
+  getEventForSegmentSelection,
+  sendSelectEventToEngine,
+} from 'lib/selections'
 import { getTangentPointFromPreviousArc } from 'lib/utils2d'
 import { createGridHelper, orthoScale, perspScale } from './helpers'
 import { Models } from '@kittycad/lib'
 import { uuidv4 } from 'lib/utils'
-import {
-  SegmentOverlayPayload,
-  SketchDetails,
-  ModelingMachineContext,
-} from 'machines/modelingMachine'
+import { SegmentOverlayPayload, SketchDetails } from 'machines/modelingMachine'
 import {
   ArtifactMapCommand,
   EngineCommandManager,
@@ -98,7 +106,7 @@ import {
 } from 'lib/rectangleTool'
 import { getThemeColorForThreeJs } from 'lib/theme'
 import { err, trap } from 'lib/trap'
-import { OnMouseEnterLeaveArgs, idleCallbacks } from './sceneCallbacks'
+import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'
 
 type DraftSegment = 'line' | 'tangentialArcTo'
 
@@ -411,7 +419,7 @@ export class SceneEntities {
         }
       )
 
-      let seg
+      let seg: Group
       const _node1 = getNodeFromPath<CallExpression>(
         maybeModdedAst,
         segPathToNode,
@@ -496,23 +504,31 @@ export class SceneEntities {
       variableDeclarationName,
     }
   }
-  updateAstAndRejigSketch: (
+  updateAstAndRejigSketch = async (
+    sketchPathToNode: PathToNode,
     modifiedAst: Program | Error,
-    context: ModelingMachineContext
-  ) => Promise<any> = async (modifiedAst, context) => {
+    forward: [number, number, number],
+    up: [number, number, number],
+    origin: [number, number, number]
+  ) => {
     if (err(modifiedAst)) return modifiedAst
 
     const nextAst = await kclManager.updateAst(modifiedAst, false)
     await this.tearDownSketch({ removeAxis: false })
     sceneInfra.resetMouseListeners()
     await this.setupSketch({
-      sketchPathToNode: context.sketchDetails?.sketchPathToNode || [],
-      forward: context.sketchDetails?.zAxis || [0, 0, 1],
-      up: context.sketchDetails?.yAxis || [0, 1, 0],
-      position: context.sketchDetails?.origin || [0, 0, 0],
+      sketchPathToNode,
+      forward,
+      up,
+      position: origin,
       maybeModdedAst: nextAst.newAst,
     })
-    this.setupSketchIdleCallbacks(context)
+    this.setupSketchIdleCallbacks({
+      forward,
+      up,
+      position: origin,
+      pathToNode: sketchPathToNode,
+    })
     return nextAst
   }
   setUpDraftSegment = async (
@@ -827,8 +843,128 @@ export class SceneEntities {
       },
     })
   }
-  setupSketchIdleCallbacks = (context: ModelingMachineContext) => {
-    sceneInfra.setCallbacks(idleCallbacks(context))
+  setupSketchIdleCallbacks = ({
+    pathToNode,
+    up,
+    forward,
+    position,
+  }: {
+    pathToNode: PathToNode
+    forward: [number, number, number]
+    up: [number, number, number]
+    position?: [number, number, number]
+  }) => {
+    let addingNewSegmentStatus: 'nothing' | 'pending' | 'added' = 'nothing'
+    sceneInfra.setCallbacks({
+      onDragEnd: async () => {
+        if (addingNewSegmentStatus !== 'nothing') {
+          await this.tearDownSketch({ removeAxis: false })
+          this.setupSketch({
+            sketchPathToNode: pathToNode,
+            maybeModdedAst: kclManager.ast,
+            up,
+            forward,
+            position,
+          })
+          // setting up the callbacks again resets value in closures
+          this.setupSketchIdleCallbacks({
+            pathToNode,
+            up,
+            forward,
+            position,
+          })
+        }
+      },
+      onDrag: async ({
+        selected,
+        intersectionPoint,
+        mouseEvent,
+        intersects,
+      }) => {
+        if (mouseEvent.which !== 1) return
+
+        const group = getParentGroup(selected, [EXTRA_SEGMENT_HANDLE])
+        if (group?.name === EXTRA_SEGMENT_HANDLE) {
+          const segGroup = getParentGroup(selected)
+          const pathToNode: PathToNode = segGroup?.userData?.pathToNode
+          const pathToNodeIndex = pathToNode.findIndex(
+            (x) => x[1] === 'PipeExpression'
+          )
+
+          const sketchGroup = sketchGroupFromPathToNode({
+            pathToNode,
+            ast: kclManager.ast,
+            programMemory: kclManager.programMemory,
+          })
+          if (trap(sketchGroup)) return
+
+          const pipeIndex = pathToNode[pathToNodeIndex + 1][0] as number
+          if (addingNewSegmentStatus === 'nothing') {
+            const prevSegment = sketchGroup.value[pipeIndex - 2]
+            const mod = addNewSketchLn({
+              node: kclManager.ast,
+              programMemory: kclManager.programMemory,
+              to: [intersectionPoint.twoD.x, intersectionPoint.twoD.y],
+              from: [prevSegment.from[0], prevSegment.from[1]],
+              // TODO assuming it's always a straight segments being added
+              // as this is easiest, and we'll need to add "tabbing" behavior
+              // to support other segment types
+              fnName: 'line',
+              pathToNode: pathToNode,
+              spliceBetween: true,
+            })
+            addingNewSegmentStatus = 'pending'
+            if (trap(mod)) return
+
+            await kclManager.executeAstMock(mod.modifiedAst)
+            await this.tearDownSketch({ removeAxis: false })
+            this.setupSketch({
+              sketchPathToNode: pathToNode,
+              maybeModdedAst: kclManager.ast,
+              up,
+              forward,
+              position,
+            })
+            addingNewSegmentStatus = 'added'
+          } else if (addingNewSegmentStatus === 'added') {
+            const pathToNodeForNewSegment = pathToNode.slice(0, pathToNodeIndex)
+            pathToNodeForNewSegment.push([pipeIndex - 2, 'index'])
+            this.onDragSegment({
+              sketchPathToNode: pathToNodeForNewSegment,
+              object: selected,
+              intersection2d: intersectionPoint.twoD,
+              intersects,
+            })
+          }
+          return
+        }
+
+        this.onDragSegment({
+          object: selected,
+          intersection2d: intersectionPoint.twoD,
+          intersects,
+          sketchPathToNode: pathToNode,
+        })
+      },
+      onMove: () => {},
+      onClick: (args) => {
+        if (args?.mouseEvent.which !== 1) return
+        if (!args || !args.selected) {
+          sceneInfra.modelingSend({
+            type: 'Set selection',
+            data: {
+              selectionType: 'singleCodeCursor',
+            },
+          })
+          return
+        }
+        const { selected } = args
+        const event = getEventForSegmentSelection(selected)
+        if (!event) return
+        sceneInfra.modelingSend(event)
+      },
+      ...this.mouseEnterLeaveCallbacks(),
+    })
   }
   prepareTruncatedMemoryAndAst = (
     sketchPathToNode: PathToNode,
@@ -944,9 +1080,16 @@ export class SceneEntities {
         programMemoryOverride,
       })
       this.sceneProgramMemory = programMemory
-      const sketchGroup = programMemory.root[
-        variableDeclarationName
-      ] as SketchGroup
+
+      const maybeSketchGroup = programMemory.root[variableDeclarationName]
+      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)
 
@@ -1171,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)
@@ -1216,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
@@ -1266,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 {
@@ -1298,6 +1473,150 @@ export class SceneEntities {
       this._tearDownSketch(0, resolve, reject, { removeAxis })
     })
   }
+  setupDefaultPlaneHover() {
+    sceneInfra.setCallbacks({
+      onMouseEnter: ({ selected }) => {
+        if (!(selected instanceof Mesh && selected.parent)) return
+        if (selected.parent.userData.type !== DEFAULT_PLANES) return
+        const type: DefaultPlane = selected.userData.type
+        selected.material.color = defaultPlaneColor(type, 0.5, 1)
+      },
+      onMouseLeave: ({ selected }) => {
+        if (!(selected instanceof Mesh && selected.parent)) return
+        if (selected.parent.userData.type !== DEFAULT_PLANES) return
+        const type: DefaultPlane = selected.userData.type
+        selected.material.color = defaultPlaneColor(type)
+      },
+      onClick: async (args) => {
+        const { entity_id } = await sendSelectEventToEngine(
+          args?.mouseEvent,
+          document.getElementById('video-stream') as HTMLVideoElement,
+          sceneInfra._streamDimensions
+        )
+
+        let _entity_id = entity_id
+        if (!_entity_id) return
+        if (
+          engineCommandManager.defaultPlanes?.xy === _entity_id ||
+          engineCommandManager.defaultPlanes?.xz === _entity_id ||
+          engineCommandManager.defaultPlanes?.yz === _entity_id ||
+          engineCommandManager.defaultPlanes?.negXy === _entity_id ||
+          engineCommandManager.defaultPlanes?.negXz === _entity_id ||
+          engineCommandManager.defaultPlanes?.negYz === _entity_id
+        ) {
+          const defaultPlaneStrMap: Record<string, DefaultPlaneStr> = {
+            [engineCommandManager.defaultPlanes.xy]: 'XY',
+            [engineCommandManager.defaultPlanes.xz]: 'XZ',
+            [engineCommandManager.defaultPlanes.yz]: 'YZ',
+            [engineCommandManager.defaultPlanes.negXy]: '-XY',
+            [engineCommandManager.defaultPlanes.negXz]: '-XZ',
+            [engineCommandManager.defaultPlanes.negYz]: '-YZ',
+          }
+          // TODO can we get this information from rust land when it creates the default planes?
+          // maybe returned from make_default_planes (src/wasm-lib/src/wasm.rs)
+          let zAxis: [number, number, number] = [0, 0, 1]
+          let yAxis: [number, number, number] = [0, 1, 0]
+
+          // get unit vector from camera position to target
+          const camVector = sceneInfra.camControls.camera.position
+            .clone()
+            .sub(sceneInfra.camControls.target)
+
+          if (engineCommandManager.defaultPlanes?.xy === _entity_id) {
+            zAxis = [0, 0, 1]
+            yAxis = [0, 1, 0]
+            if (camVector.z < 0) {
+              zAxis = [0, 0, -1]
+              _entity_id = engineCommandManager.defaultPlanes?.negXy || ''
+            }
+          } else if (engineCommandManager.defaultPlanes?.yz === _entity_id) {
+            zAxis = [1, 0, 0]
+            yAxis = [0, 0, 1]
+            if (camVector.x < 0) {
+              zAxis = [-1, 0, 0]
+              _entity_id = engineCommandManager.defaultPlanes?.negYz || ''
+            }
+          } else if (engineCommandManager.defaultPlanes?.xz === _entity_id) {
+            zAxis = [0, 1, 0]
+            yAxis = [0, 0, 1]
+            _entity_id = engineCommandManager.defaultPlanes?.negXz || ''
+            if (camVector.y < 0) {
+              zAxis = [0, -1, 0]
+              _entity_id = engineCommandManager.defaultPlanes?.xz || ''
+            }
+          }
+
+          sceneInfra.modelingSend({
+            type: 'Select default plane',
+            data: {
+              type: 'defaultPlane',
+              planeId: _entity_id,
+              plane: defaultPlaneStrMap[_entity_id],
+              zAxis,
+              yAxis,
+            },
+          })
+          return
+        }
+        const artifact = this.engineCommandManager.artifactMap[_entity_id]
+        // If we clicked on an extrude wall, we climb up the parent Id
+        // to get the sketch profile's face ID. If we clicked on an endcap,
+        // we already have it.
+        const targetId =
+          'additionalData' in artifact &&
+          artifact.additionalData?.type === 'cap'
+            ? _entity_id
+            : artifact.parentId
+
+        // tsc cannot infer that target can have extrusions
+        // from the commandType (why?) so we need to cast it
+        const target = this.engineCommandManager.artifactMap?.[
+          targetId || ''
+        ] as ArtifactMapCommand & { extrusions?: string[] }
+
+        // TODO: We get the first extrusion command ID,
+        // which is fine while backend systems only support one extrusion.
+        // but we need to more robustly handle resolving to the correct extrusion
+        // if there are multiple.
+        const extrusions =
+          this.engineCommandManager.artifactMap?.[target?.extrusions?.[0] || '']
+
+        if (artifact?.commandType !== 'solid3d_get_extrusion_face_info') return
+
+        const faceInfo = await getFaceDetails(_entity_id)
+        if (!faceInfo?.origin || !faceInfo?.z_axis || !faceInfo?.y_axis) return
+        const { z_axis, y_axis, origin } = faceInfo
+        const sketchPathToNode = getNodePathFromSourceRange(
+          kclManager.ast,
+          artifact.range
+        )
+
+        const extrudePathToNode = extrusions?.range
+          ? getNodePathFromSourceRange(kclManager.ast, extrusions.range)
+          : []
+
+        sceneInfra.modelingSend({
+          type: 'Select default plane',
+          data: {
+            type: 'extrudeFace',
+            zAxis: [z_axis.x, z_axis.y, z_axis.z],
+            yAxis: [y_axis.x, y_axis.y, y_axis.z],
+            position: [origin.x, origin.y, origin.z].map(
+              (num) => num / sceneInfra._baseUnitMultiplier
+            ) as [number, number, number],
+            sketchPathToNode,
+            extrudePathToNode,
+            cap:
+              artifact?.additionalData?.type === 'cap'
+                ? artifact.additionalData.info
+                : 'none',
+            faceId: _entity_id,
+          },
+        })
+        return
+      },
+    })
+  }
   mouseEnterLeaveCallbacks() {
     return {
       onMouseEnter: ({ selected, dragSelected }: OnMouseEnterLeaveArgs) => {
@@ -1588,7 +1907,6 @@ export function sketchGroupFromPathToNode({
   return result as SketchGroup
 }
 
-// TODO delete
 function colorSegment(object: any, color: number) {
   const segmentHead = getParentGroup(object, [ARROWHEAD, PROFILE_START])
   if (segmentHead) {

src/clientSideScene/sceneInfra.ts

@@ -1,25 +1,25 @@
 import {
   AmbientLight,
   Color,
-  DoubleSide,
   GridHelper,
-  Group,
-  Intersection,
   LineBasicMaterial,
-  Mesh,
-  MeshBasicMaterial,
-  Object3D,
-  Object3DEventMap,
   OrthographicCamera,
   PerspectiveCamera,
-  PlaneGeometry,
-  Raycaster,
   Scene,
-  Texture,
-  TextureLoader,
-  Vector2,
   Vector3,
   WebGLRenderer,
+  Raycaster,
+  Vector2,
+  Group,
+  PlaneGeometry,
+  MeshBasicMaterial,
+  Mesh,
+  DoubleSide,
+  Intersection,
+  Object3D,
+  Object3DEventMap,
+  TextureLoader,
+  Texture,
 } from 'three'
 import { Coords2d, compareVec2Epsilon2 } from 'lang/std/sketch'
 import { useModelingContext } from 'hooks/useModelingContext'
@@ -31,12 +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 {
-  OnClickCallbackArgs,
-  OnDragCallbackArgs,
-  OnMouseEnterLeaveArgs,
-  OnMoveCallbackArgs,
-} from './sceneCallbacks'
+import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer'
 
 type SendType = ReturnType<typeof useModelingContext>['send']
 
@@ -60,6 +55,42 @@ 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>
+  dragSelected?: Object3D<Object3DEventMap>
+  mouseEvent: MouseEvent
+}
+
+interface OnDragCallbackArgs extends OnMouseEnterLeaveArgs {
+  intersectionPoint: {
+    twoD: Vector2
+    threeD: Vector3
+  }
+  intersects: Intersection<Object3D<Object3DEventMap>>[]
+}
+interface OnClickCallbackArgs {
+  mouseEvent: MouseEvent
+  intersectionPoint?: {
+    twoD: Vector2
+    threeD: Vector3
+  }
+  intersects: Intersection<Object3D<Object3DEventMap>>[]
+  selected?: Object3D<Object3DEventMap>
+}
+
+interface OnMoveCallbackArgs {
+  mouseEvent: MouseEvent
+  intersectionPoint: {
+    twoD: Vector2
+    threeD: Vector3
+  }
+  intersects: Intersection<Object3D<Object3DEventMap>>[]
+  selected?: Object3D<Object3DEventMap>
+}
 
 // This singleton class is responsible for all of the under the hood setup for the client side scene.
 // That is the cameras and switching between them, raycasters for click mouse events and their abstractions (onClick etc), setting up controls.
@@ -68,6 +99,7 @@ export class SceneInfra {
   static instance: SceneInfra
   scene: Scene
   renderer: WebGLRenderer
+  labelRenderer: CSS2DRenderer
   camControls: CameraControls
   isPerspective = true
   fov = 45
@@ -237,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(
@@ -301,6 +340,7 @@ export class SceneInfra {
 
   onWindowResize = () => {
     this.renderer.setSize(window.innerWidth, window.innerHeight)
+    this.labelRenderer.setSize(window.innerWidth, window.innerHeight)
   }
 
   animate = () => {
@@ -310,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)
     }
   }
 
@@ -591,6 +632,59 @@ export class SceneInfra {
       this.onClickCallback({ mouseEvent, intersects })
     }
   }
+  showDefaultPlanes() {
+    const addPlane = (
+      rotation: { x: number; y: number; z: number }, //
+      type: DefaultPlane
+    ): Mesh => {
+      const planeGeometry = new PlaneGeometry(100, 100)
+      const planeMaterial = new MeshBasicMaterial({
+        color: defaultPlaneColor(type),
+        transparent: true,
+        opacity: 0.0,
+        side: DoubleSide,
+        depthTest: false, // needed to avoid transparency issues
+      })
+      const plane = new Mesh(planeGeometry, planeMaterial)
+      plane.rotation.x = rotation.x
+      plane.rotation.y = rotation.y
+      plane.rotation.z = rotation.z
+      plane.userData.type = type
+      plane.name = type
+      return plane
+    }
+    const planes = [
+      addPlane({ x: 0, y: Math.PI / 2, z: 0 }, YZ_PLANE),
+      addPlane({ x: 0, y: 0, z: 0 }, XY_PLANE),
+      addPlane({ x: -Math.PI / 2, y: 0, z: 0 }, XZ_PLANE),
+    ]
+    const planesGroup = new Group()
+    planesGroup.userData.type = DEFAULT_PLANES
+    planesGroup.name = DEFAULT_PLANES
+    planesGroup.add(...planes)
+    planesGroup.traverse((child) => {
+      if (child instanceof Mesh) {
+        child.layers.enable(SKETCH_LAYER)
+      }
+    })
+    planesGroup.layers.enable(SKETCH_LAYER)
+    const sceneScale = getSceneScale(
+      this.camControls.camera,
+      this.camControls.target
+    )
+    planesGroup.scale.set(
+      sceneScale / this._baseUnitMultiplier,
+      sceneScale / this._baseUnitMultiplier,
+      sceneScale / this._baseUnitMultiplier
+    )
+    this.scene.add(planesGroup)
+  }
+  removeDefaultPlanes() {
+    const planesGroup = this.scene.children.find(
+      ({ userData }) => userData.type === DEFAULT_PLANES
+    )
+    if (planesGroup) this.scene.remove(planesGroup)
+  }
   updateOtherSelectionColors = (otherSelections: Axis[]) => {
     const axisGroup = this.scene.children.find(
       ({ userData }) => userData?.type === AXIS_GROUP
@@ -648,3 +742,28 @@ function baseUnitTomm(baseUnit: BaseUnit) {
       return 914.4
   }
 }
+
+export type DefaultPlane =
+  | 'xy-default-plane'
+  | 'xz-default-plane'
+  | 'yz-default-plane'
+
+export const XY_PLANE: DefaultPlane = 'xy-default-plane'
+export const XZ_PLANE: DefaultPlane = 'xz-default-plane'
+export const YZ_PLANE: DefaultPlane = 'yz-default-plane'
+
+export function defaultPlaneColor(
+  plane: DefaultPlane,
+  lowCh = 0.1,
+  highCh = 0.7
+): Color {
+  switch (plane) {
+    case XY_PLANE:
+      return new Color(highCh, lowCh, lowCh)
+    case XZ_PLANE:
+      return new Color(lowCh, lowCh, highCh)
+    case YZ_PLANE:
+      return new Color(lowCh, highCh, lowCh)
+  }
+  return new Color(lowCh, lowCh, lowCh)
+}

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])
-    .normalize()
-    .multiplyScalar(EXTRA_SEGMENT_OFFSET_PX * scale)
+  const directionVector = new Vector2(
+    to[0] - from[0],
+    to[1] - from[1]
+  ).normalize()
+  const offsetFromBase = directionVector.multiplyScalar(
+    EXTRA_SEGMENT_OFFSET_PX * scale
+  )
   extraSegmentGroup.position.set(
     from[0] + offsetFromBase.x,
     from[1] + offsetFromBase.y,
     0
   )
   extraSegmentGroup.visible = !shouldHide
-  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/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

@@ -163,6 +163,8 @@ export const ModelingMachineProvider = ({
 
             store.videoElement?.pause()
             kclManager.executeCode(true).then(() => {
+              if (engineCommandManager.engineConnection?.freezeFrame) return
+
               store.videoElement?.play()
             })
           })()
@@ -549,8 +551,10 @@ export const ModelingMachineProvider = ({
             ) as [number, number, number],
           }
         },
-        'Get horizontal info': async (context): Promise<SetSelections> => {
-          const { selectionRanges, sketchDetails } = context
+        'Get horizontal info': async ({
+          selectionRanges,
+          sketchDetails,
+        }): Promise<SetSelections> => {
           const { modifiedAst, pathToNodeMap } =
             await applyConstraintHorzVertDistance({
               constraint: 'setHorzDistance',
@@ -564,8 +568,11 @@ export const ModelingMachineProvider = ({
             pathToNodeMap
           )
           const updatedAst = await sceneEntitiesManager.updateAstAndRejigSketch(
+            updatedPathToNode,
             _modifiedAst,
-            context
+            sketchDetails.zAxis,
+            sketchDetails.yAxis,
+            sketchDetails.origin
           )
           if (err(updatedAst)) return Promise.reject(updatedAst)
           const selection = updateSelections(
@@ -580,8 +587,10 @@ export const ModelingMachineProvider = ({
             updatedPathToNode,
           }
         },
-        'Get vertical info': async (context): Promise<SetSelections> => {
-          const { selectionRanges, sketchDetails } = context
+        'Get vertical info': async ({
+          selectionRanges,
+          sketchDetails,
+        }): Promise<SetSelections> => {
           const { modifiedAst, pathToNodeMap } =
             await applyConstraintHorzVertDistance({
               constraint: 'setVertDistance',
@@ -595,8 +604,11 @@ export const ModelingMachineProvider = ({
             pathToNodeMap
           )
           const updatedAst = await sceneEntitiesManager.updateAstAndRejigSketch(
+            updatedPathToNode,
             _modifiedAst,
-            context
+            sketchDetails.zAxis,
+            sketchDetails.yAxis,
+            sketchDetails.origin
           )
           if (err(updatedAst)) return Promise.reject(updatedAst)
           const selection = updateSelections(
@@ -611,8 +623,10 @@ export const ModelingMachineProvider = ({
             updatedPathToNode,
           }
         },
-        'Get angle info': async (context): Promise<SetSelections> => {
-          const { selectionRanges, sketchDetails } = context
+        'Get angle info': async ({
+          selectionRanges,
+          sketchDetails,
+        }): Promise<SetSelections> => {
           const info = angleBetweenInfo({
             selectionRanges,
           })
@@ -635,8 +649,11 @@ export const ModelingMachineProvider = ({
             pathToNodeMap
           )
           const updatedAst = await sceneEntitiesManager.updateAstAndRejigSketch(
+            updatedPathToNode,
             _modifiedAst,
-            context
+            sketchDetails.zAxis,
+            sketchDetails.yAxis,
+            sketchDetails.origin
           )
           if (err(updatedAst)) return Promise.reject(updatedAst)
           const selection = updateSelections(
@@ -651,8 +668,10 @@ export const ModelingMachineProvider = ({
             updatedPathToNode,
           }
         },
-        'Get length info': async (context): Promise<SetSelections> => {
-          const { selectionRanges, sketchDetails } = context
+        'Get length info': async ({
+          selectionRanges,
+          sketchDetails,
+        }): Promise<SetSelections> => {
           const { modifiedAst, pathToNodeMap } =
             await applyConstraintAngleLength({ selectionRanges })
           const _modifiedAst = parse(recast(modifiedAst))
@@ -663,8 +682,11 @@ export const ModelingMachineProvider = ({
             pathToNodeMap
           )
           const updatedAst = await sceneEntitiesManager.updateAstAndRejigSketch(
+            updatedPathToNode,
             _modifiedAst,
-            context
+            sketchDetails.zAxis,
+            sketchDetails.yAxis,
+            sketchDetails.origin
           )
           if (err(updatedAst)) return Promise.reject(updatedAst)
           const selection = updateSelections(
@@ -679,10 +701,10 @@ export const ModelingMachineProvider = ({
             updatedPathToNode,
           }
         },
-        'Get perpendicular distance info': async (
-          context
-        ): Promise<SetSelections> => {
-          const { selectionRanges, sketchDetails } = context
+        'Get perpendicular distance info': async ({
+          selectionRanges,
+          sketchDetails,
+        }): Promise<SetSelections> => {
           const { modifiedAst, pathToNodeMap } = await applyConstraintIntersect(
             {
               selectionRanges,
@@ -696,8 +718,11 @@ export const ModelingMachineProvider = ({
             pathToNodeMap
           )
           const updatedAst = await sceneEntitiesManager.updateAstAndRejigSketch(
+            updatedPathToNode,
             _modifiedAst,
-            context
+            sketchDetails.zAxis,
+            sketchDetails.yAxis,
+            sketchDetails.origin
           )
           if (err(updatedAst)) return Promise.reject(updatedAst)
           const selection = updateSelections(
@@ -712,8 +737,10 @@ export const ModelingMachineProvider = ({
             updatedPathToNode,
           }
         },
-        'Get ABS X info': async (context): Promise<SetSelections> => {
-          const { selectionRanges, sketchDetails } = context
+        'Get ABS X info': async ({
+          selectionRanges,
+          sketchDetails,
+        }): Promise<SetSelections> => {
           const { modifiedAst, pathToNodeMap } =
             await applyConstraintAbsDistance({
               constraint: 'xAbs',
@@ -727,8 +754,11 @@ export const ModelingMachineProvider = ({
             pathToNodeMap
           )
           const updatedAst = await sceneEntitiesManager.updateAstAndRejigSketch(
+            updatedPathToNode,
             _modifiedAst,
-            context
+            sketchDetails.zAxis,
+            sketchDetails.yAxis,
+            sketchDetails.origin
           )
           if (err(updatedAst)) return Promise.reject(updatedAst)
           const selection = updateSelections(
@@ -743,8 +773,10 @@ export const ModelingMachineProvider = ({
             updatedPathToNode,
           }
         },
-        'Get ABS Y info': async (context): Promise<SetSelections> => {
-          const { selectionRanges, sketchDetails } = context
+        'Get ABS Y info': async ({
+          selectionRanges,
+          sketchDetails,
+        }): Promise<SetSelections> => {
           const { modifiedAst, pathToNodeMap } =
             await applyConstraintAbsDistance({
               constraint: 'yAbs',
@@ -758,8 +790,11 @@ export const ModelingMachineProvider = ({
             pathToNodeMap
           )
           const updatedAst = await sceneEntitiesManager.updateAstAndRejigSketch(
+            updatedPathToNode,
             _modifiedAst,
-            context
+            sketchDetails.zAxis,
+            sketchDetails.yAxis,
+            sketchDetails.origin
           )
           if (err(updatedAst)) return Promise.reject(updatedAst)
           const selection = updateSelections(
@@ -775,10 +810,9 @@ export const ModelingMachineProvider = ({
           }
         },
         'Get convert to variable info': async (
-          context,
+          { sketchDetails, selectionRanges },
           { data }
         ): Promise<SetSelections> => {
-          const { selectionRanges, sketchDetails } = context
           if (!sketchDetails)
             return Promise.reject(new Error('No sketch details'))
           const { variableName } = await getVarNameModal({
@@ -802,8 +836,11 @@ export const ModelingMachineProvider = ({
             return Promise.reject(new Error('No path to replaced node'))
 
           const updatedAst = await sceneEntitiesManager.updateAstAndRejigSketch(
+            pathToReplacedNode || [],
             parsed,
-            context
+            sketchDetails.zAxis,
+            sketchDetails.yAxis,
+            sketchDetails.origin
           )
           if (err(updatedAst)) return Promise.reject(updatedAst)
           const selection = updateSelections(

src/components/Stream.tsx

@@ -8,7 +8,7 @@ import { NetworkHealthState } from 'hooks/useNetworkStatus'
 import { ClientSideScene } from 'clientSideScene/ClientSideSceneComp'
 import { butName } from 'lib/cameraControls'
 import { sendSelectEventToEngine } from 'lib/selections'
-import { kclManager } from 'lib/singletons'
+import { kclManager, engineCommandManager, sceneInfra } from 'lib/singletons'
 
 export const Stream = () => {
   const [isLoading, setIsLoading] = useState(true)
@@ -18,6 +18,7 @@ export const Stream = () => {
   const { settings } = useSettingsAuthContext()
   const { state, send, context } = useModelingContext()
   const { overallState } = useNetworkContext()
+  const [isFreezeFrame, setIsFreezeFrame] = useState(false)
 
   const isNetworkOkay =
     overallState === NetworkHealthState.Ok ||
@@ -49,14 +50,71 @@ export const Stream = () => {
     globalThis?.window?.document?.addEventListener('paste', handlePaste, {
       capture: true,
     })
-    return () =>
+
+    const IDLE_TIME_MS = 1000 * 20
+    let timeoutIdIdleA: ReturnType<typeof setTimeout> | undefined = undefined
+
+    const teardown = () => {
+      videoRef.current?.pause()
+      setIsFreezeFrame(true)
+      sceneInfra.modelingSend({ type: 'Cancel' })
+      // Give video time to pause
+      window.requestAnimationFrame(() => {
+        engineCommandManager.engineConnection?.tearDown({ freeze: true })
+      })
+    }
+
+    // Teardown everything if we go hidden or reconnect
+    if (globalThis?.window?.document) {
+      globalThis.window.document.onvisibilitychange = () => {
+        if (globalThis.window.document.visibilityState === 'hidden') {
+          clearTimeout(timeoutIdIdleA)
+          timeoutIdIdleA = setTimeout(teardown, IDLE_TIME_MS)
+        } else if (!engineCommandManager.engineConnection?.isReady()) {
+          clearTimeout(timeoutIdIdleA)
+          engineCommandManager.engineConnection?.connect(true)
+        }
+      }
+    }
+
+    let timeoutIdIdleB: ReturnType<typeof setTimeout> | undefined = undefined
+
+    const onAnyInput = () => {
+      if (!engineCommandManager.engineConnection?.isReady()) {
+        engineCommandManager.engineConnection?.connect(true)
+      }
+      // Clear both timers
+      clearTimeout(timeoutIdIdleA)
+      clearTimeout(timeoutIdIdleB)
+      timeoutIdIdleB = setTimeout(teardown, IDLE_TIME_MS)
+    }
+
+    globalThis?.window?.document?.addEventListener('keydown', onAnyInput)
+    globalThis?.window?.document?.addEventListener('mousemove', onAnyInput)
+    globalThis?.window?.document?.addEventListener('mousedown', onAnyInput)
+    globalThis?.window?.document?.addEventListener('scroll', onAnyInput)
+    globalThis?.window?.document?.addEventListener('touchstart', onAnyInput)
+
+    timeoutIdIdleB = setTimeout(teardown, IDLE_TIME_MS)
+
+    return () => {
       globalThis?.window?.document?.removeEventListener('paste', handlePaste, {
         capture: true,
       })
+      globalThis?.window?.document?.removeEventListener('keydown', onAnyInput)
+      globalThis?.window?.document?.removeEventListener('mousemove', onAnyInput)
+      globalThis?.window?.document?.removeEventListener('mousedown', onAnyInput)
+      globalThis?.window?.document?.removeEventListener('scroll', onAnyInput)
+      globalThis?.window?.document?.removeEventListener(
+        'touchstart',
+        onAnyInput
+      )
+    }
   }, [])
 
   useEffect(() => {
     setIsFirstRender(kclManager.isFirstRender)
+    if (!kclManager.isFirstRender) videoRef.current?.play()
   }, [kclManager.isFirstRender])
 
   useEffect(() => {
@@ -67,7 +125,10 @@ export const Stream = () => {
       return
     if (!videoRef.current) return
     if (!context.store?.mediaStream) return
+
+    // Do not immediately play the stream!
     videoRef.current.srcObject = context.store.mediaStream
+    videoRef.current.pause()
 
     send({
       type: 'Set context',
@@ -109,6 +170,7 @@ export const Stream = () => {
       },
     })
     if (state.matches('Sketch')) return
+    if (state.matches('Sketch no face')) return
 
     if (!context.store?.didDragInStream && butName(e).left) {
       sendSelectEventToEngine(
@@ -171,17 +233,12 @@ export const Stream = () => {
       <ClientSideScene
         cameraControls={settings.context.modeling.mouseControls.current}
       />
-      {!isNetworkOkay && !isLoading && (
+      {(!isNetworkOkay || isLoading || isFirstRender) && !isFreezeFrame && (
         <div className="text-center absolute inset-0">
           <Loading>
-            <span data-testid="loading-stream">Stream disconnected...</span>
-          </Loading>
-        </div>
-      )}
-      {(isLoading || isFirstRender) && (
-        <div className="text-center absolute inset-0">
-          <Loading>
-            {!isLoading && isFirstRender ? (
+            {!isNetworkOkay && !isLoading ? (
+              <span data-testid="loading-stream">Stream disconnected...</span>
+            ) : !isLoading && isFirstRender ? (
               <span data-testid="loading-stream">Building scene...</span>
             ) : (
               <span data-testid="loading-stream">Loading stream...</span>

src/editor/manager.ts

@@ -12,14 +12,14 @@ import {
   setDiagnosticsEffect,
 } from '@codemirror/lint'
 
-const updateOutsideEditorAnnotation = Annotation.define<null>()
-export const updateOutsideEditorEvent = updateOutsideEditorAnnotation.of(null)
+const updateOutsideEditorAnnotation = Annotation.define<boolean>()
+export const updateOutsideEditorEvent = updateOutsideEditorAnnotation.of(true)
 
-const modelingMachineAnnotation = Annotation.define<null>()
-export const modelingMachineEvent = modelingMachineAnnotation.of(null)
+const modelingMachineAnnotation = Annotation.define<boolean>()
+export const modelingMachineEvent = modelingMachineAnnotation.of(true)
 
-const setDiagnosticsAnnotation = Annotation.define<null>()
-export const setDiagnosticsEvent = setDiagnosticsAnnotation.of(null)
+const setDiagnosticsAnnotation = Annotation.define<boolean>()
+export const setDiagnosticsEvent = setDiagnosticsAnnotation.of(true)
 
 function diagnosticIsEqual(d1: Diagnostic, d2: Diagnostic): boolean {
   return d1.from === d2.from && d1.to === d2.to && d1.message === d2.message
@@ -123,7 +123,11 @@ export default class EditorManager {
 
     this._editorView.dispatch({
       effects: [setDiagnosticsEffect.of(diagnostics)],
-      annotations: [setDiagnosticsEvent, Transaction.addToHistory.of(false)],
+      annotations: [
+        setDiagnosticsEvent,
+        updateOutsideEditorEvent,
+        Transaction.addToHistory.of(false),
+      ],
     })
   }
 

src/editor/plugins/lsp/copilot/index.ts

@@ -37,11 +37,11 @@ import { CopilotAcceptCompletionParams } from 'wasm-lib/kcl/bindings/CopilotAcce
 import { CopilotRejectCompletionParams } from 'wasm-lib/kcl/bindings/CopilotRejectCompletionParams'
 import { editorManager } from 'lib/singletons'
 
-const copilotPluginAnnotation = Annotation.define<null>()
-export const copilotPluginEvent = copilotPluginAnnotation.of(null)
+const copilotPluginAnnotation = Annotation.define<boolean>()
+export const copilotPluginEvent = copilotPluginAnnotation.of(true)
 
-const rejectSuggestionAnnotation = Annotation.define<null>()
-export const rejectSuggestionCommand = rejectSuggestionAnnotation.of(null)
+const rejectSuggestionAnnotation = Annotation.define<boolean>()
+export const rejectSuggestionCommand = rejectSuggestionAnnotation.of(true)
 
 // Effects to tell StateEffect what to do with GhostText
 const addSuggestion = StateEffect.define<Suggestion>()
@@ -229,7 +229,7 @@ export class CompletionRequester implements PluginValue {
         isRelevant = true
       } else if (tr.isUserEvent('move')) {
         isRelevant = true
-      } else if (tr.annotation(copilotPluginEvent.type) !== undefined) {
+      } else if (tr.annotation(copilotPluginEvent.type)) {
         isRelevant = true
       }
     }
@@ -457,6 +457,7 @@ export class CompletionRequester implements PluginValue {
       effects: clearSuggestion.of(null),
       annotations: [
         rejectSuggestionCommand,
+        copilotPluginEvent,
         Transaction.addToHistory.of(false),
       ],
     })

src/editor/plugins/lsp/kcl/highlight.ts

@@ -0,0 +1,26 @@
+import { styleTags, tags as t } from '@lezer/highlight'
+
+export const klcHighlight = styleTags({
+  'fn var let const': t.definitionKeyword,
+  return: t.controlKeyword,
+  'true false': t.bool,
+  nil: t.null,
+  'AddOp MultOp ExpOp': t.arithmeticOperator,
+  CompOp: t.logicOperator,
+  'Equals Arrow': t.definitionOperator,
+  PipeOperator: t.controlOperator,
+  String: t.string,
+  Number: t.number,
+  LineComment: t.lineComment,
+  BlockComment: t.blockComment,
+  Shebang: t.meta,
+  PipeSubstitution: t.atom,
+  VariableDefinition: t.definition(t.variableName),
+  VariableName: t.variableName,
+  PropertyName: t.propertyName,
+  TagDeclarator: t.tagName,
+  '( )': t.paren,
+  '{ }': t.brace,
+  '[ ]': t.bracket,
+  ', . : ? ..': t.punctuation,
+})

src/editor/plugins/lsp/kcl/index.ts

@@ -12,6 +12,9 @@ import { UpdateUnitsParams } from 'wasm-lib/kcl/bindings/UpdateUnitsParams'
 import { UpdateCanExecuteParams } from 'wasm-lib/kcl/bindings/UpdateCanExecuteParams'
 import { UpdateUnitsResponse } from 'wasm-lib/kcl/bindings/UpdateUnitsResponse'
 import { UpdateCanExecuteResponse } from 'wasm-lib/kcl/bindings/UpdateCanExecuteResponse'
+import { codeManagerUpdateEvent } from 'lang/codeManager'
+import { copilotPluginEvent } from '../copilot'
+import { updateOutsideEditorEvent } from 'editor/manager'
 
 const changesDelay = 600
 
@@ -45,11 +48,10 @@ export class KclPlugin implements PluginValue {
     editorManager.setEditorView(viewUpdate.view)
 
     let isUserSelect = false
-    let isRelevant = false
+    let isRelevant = viewUpdate.docChanged
     for (const tr of viewUpdate.transactions) {
       if (tr.isUserEvent('select')) {
         isUserSelect = true
-        break
       } else if (tr.isUserEvent('input')) {
         isRelevant = true
       } else if (tr.isUserEvent('delete')) {
@@ -63,6 +65,21 @@ export class KclPlugin implements PluginValue {
       } else if (tr.annotation(lspFormatCodeEvent.type)) {
         isRelevant = true
       }
+
+      // Don't make this an else.
+      if (tr.annotation(codeManagerUpdateEvent.type)) {
+        // We want to ignore when we are forcing the editor to update.
+        isRelevant = false
+        break
+      } else if (tr.annotation(copilotPluginEvent.type)) {
+        // We want to ignore when copilot is doing stuff.
+        isRelevant = false
+        break
+      } else if (tr.annotation(updateOutsideEditorEvent.type)) {
+        // We want to ignore other events outside the editor.
+        isRelevant = false
+        break
+      }
     }
 
     // If we have a user select event, we want to update what parts are

src/editor/plugins/lsp/kcl/kcl.grammar

@@ -0,0 +1,113 @@
+@precedence {
+  member
+  call
+  exp @left
+  mult @left
+  add @left
+  comp @left
+  pipe @left
+  range
+}
+
+@top Program {
+  Shebang?
+  statement*
+}
+
+statement[@isGroup=Statement] {
+  FunctionDeclaration { kw<"fn"> VariableDefinition Equals ParamList Arrow Body } |
+  VariableDeclaration { (kw<"var"> | kw<"let"> | kw<"const">) VariableDefinition Equals expression } |
+  ReturnStatement { kw<"return"> expression } |
+  ExpressionStatement { expression }
+}
+
+ParamList { "(" commaSep<Parameter { VariableDefinition "?"? (":" type)? }> ")" }
+
+Body { "{" statement* "}" }
+
+expression[@isGroup=Expression] {
+  String |
+  Number |
+  VariableName |
+  TagDeclarator |
+  kw<"true"> | kw<"false"> | kw<"nil"> |
+  PipeSubstitution |
+  BinaryExpression {
+    expression !add AddOp expression |
+    expression !mult MultOp expression |
+    expression !exp ExpOp expression |
+    expression !comp CompOp expression
+  } |
+  UnaryExpression { AddOp expression } |
+  ParenthesizedExpression { "(" expression ")" } |
+  CallExpression { expression !call ArgumentList } |
+  ArrayExpression { "[" commaSep<expression | IntegerRange { expression !range ".." expression }> "]" } |
+  ObjectExpression { "{" commaSep<ObjectProperty> "}" } |
+  MemberExpression { expression !member "." PropertyName } |
+  SubscriptExpression { expression !member "[" expression "]" } |
+  PipeExpression { expression (!pipe PipeOperator expression)+ }
+}
+
+ObjectProperty { PropertyName ":" expression }
+
+ArgumentList { "(" commaSep<expression> ")" }
+
+type[@isGroup=Type] {
+  @specialize[@name=PrimitiveType]<
+    identifier,
+    "string" | "number" | "bool" | "sketch_group" | "sketch_surface" | "extrude_group"
+  > |
+  ArrayType { type !member "[" "]" } |
+  ObjectType { "{" commaSep<ObjectProperty { PropertyName ":" type }> "}" }
+}
+
+VariableDefinition { identifier }
+
+VariableName { identifier }
+
+@skip { whitespace | LineComment | BlockComment }
+
+kw<term> { @specialize[@name={term}]<identifier, term> }
+
+commaSep<term> { (term ("," term)*)? ","? }
+
+@tokens {
+  String[isolate] { "'" ("\\" _ | !['\\])* "'" | '"' ("\\" _ | !["\\])* '"' }
+
+  Number { "." @digit+ | @digit+ ("." @digit*)? }
+  @precedence { Number, "." }
+
+  AddOp { "+" | "-" }
+  MultOp { "/" | "*" | "\\" }
+  ExpOp { "^" }
+  CompOp { $[<>] "="? | "!=" | "==" }
+  Equals { "=" }
+  Arrow { "=>" }
+  PipeOperator { "|>" }
+
+  PipeSubstitution { "%" }
+
+  identifier { (@asciiLetter | "_") (@asciiLetter | @digit | "_")* }
+  PropertyName { identifier }
+  TagDeclarator { "$" identifier }
+
+  whitespace { @whitespace+ }
+
+  LineComment[isolate] { "//" ![\n]* }
+  BlockComment[isolate] { "/*" blockCommentRest }
+  blockCommentRest { @eof | ![*] blockCommentRest | "*" blockCommentStar }
+  blockCommentStar { @eof | "/" | ![/] blockCommentRest | "*" blockCommentStar }
+
+  @precedence { LineComment, BlockComment, MultOp }
+
+  Shebang { "#!" ![\n]* }
+
+  "(" ")"
+  "{" "}"
+  "[" "]"
+  "," "?" ":" "." ".."
+}
+
+@external propSource klcHighlight from "./highlight"
+
+@detectDelim

src/editor/plugins/lsp/kcl/language.ts

@@ -1,9 +1,13 @@
 // Code mirror language implementation for kcl.
 
 import {
-  Language,
-  defineLanguageFacet,
+  LRLanguage,
   LanguageSupport,
+  indentNodeProp,
+  continuedIndent,
+  delimitedIndent,
+  foldNodeProp,
+  foldInside,
 } from '@codemirror/language'
 import {
   LanguageServerClient,
@@ -11,18 +15,8 @@ import {
 } from '@kittycad/codemirror-lsp-client'
 import { kclPlugin } from '.'
 import type * as LSP from 'vscode-languageserver-protocol'
-import KclParser from './parser'
-
-const data = defineLanguageFacet({
-  // https://codemirror.net/docs/ref/#commands.CommentTokens
-  commentTokens: {
-    line: '//',
-    block: {
-      open: '/*',
-      close: '*/',
-    },
-  },
-})
+// @ts-ignore: No types available
+import { parser } from './kcl.grammar'
 
 export interface LanguageOptions {
   workspaceFolders: LSP.WorkspaceFolder[]
@@ -34,26 +28,40 @@ export interface LanguageOptions {
   ) => void
 }
 
-class KclLanguage extends Language {
-  constructor(options: LanguageOptions) {
-    const plugin = kclPlugin({
+export const KclLanguage = LRLanguage.define({
+  name: 'klc',
+  parser: parser.configure({
+    props: [
+      indentNodeProp.add({
+        Body: delimitedIndent({ closing: '}' }),
+        BlockComment: () => null,
+        'Statement Property': continuedIndent({ except: /^{/ }),
+      }),
+      foldNodeProp.add({
+        'Body ArrayExpression ObjectExpression': foldInside,
+        BlockComment(tree) {
+          return { from: tree.from + 2, to: tree.to - 2 }
+        },
+        PipeExpression(tree) {
+          return { from: tree.firstChild!.to, to: tree.to }
+        },
+      }),
+    ],
+  }),
+  languageData: {
+    commentTokens: { line: '//', block: { open: '/*', close: '*/' } },
+  },
+})
+
+export function kcl(options: LanguageOptions) {
+  return new LanguageSupport(
+    KclLanguage,
+    kclPlugin({
       documentUri: options.documentUri,
       workspaceFolders: options.workspaceFolders,
       allowHTMLContent: true,
       client: options.client,
       processLspNotification: options.processLspNotification,
     })
-
-    const parser = new KclParser()
-
-    super(data, parser, [plugin], 'kcl')
-  }
-}
-
-export default class KclLanguageSupport extends LanguageSupport {
-  constructor(options: LanguageOptions) {
-    const lang = new KclLanguage(options)
-
-    super(lang)
-  }
+  )
 }

src/editor/plugins/lsp/kcl/parser.ts

@@ -1,47 +0,0 @@
-// Extends the codemirror Parser for kcl.
-// This is really just a no-op parser since we use semantic tokens from the LSP
-// server.
-
-import {
-  Parser,
-  Input,
-  TreeFragment,
-  PartialParse,
-  Tree,
-  NodeType,
-} from '@lezer/common'
-import { DocInput } from '@codemirror/language'
-
-export default class KclParser extends Parser {
-  createParse(
-    input: Input,
-    fragments: readonly TreeFragment[],
-    ranges: readonly { from: number; to: number }[]
-  ): PartialParse {
-    let parse: PartialParse = new Context(input)
-    return parse
-  }
-}
-
-class Context implements PartialParse {
-  private input: DocInput
-
-  stoppedAt: number = 0
-
-  constructor(input: Input) {
-    this.input = input as DocInput
-  }
-
-  get parsedPos(): number {
-    return 0
-  }
-
-  advance(): Tree | null {
-    this.stoppedAt = this.input.doc.length
-    return new Tree(NodeType.none, [], [], this.input.doc.length)
-  }
-
-  stopAt(pos: number) {
-    this.stoppedAt = pos
-  }
-}

src/hooks/useEngineConnectionSubscriptions.ts

@@ -4,7 +4,7 @@ import { useModelingContext } from './useModelingContext'
 import { getEventForSelectWithPoint } from 'lib/selections'
 
 export function useEngineConnectionSubscriptions() {
-  const { send, state } = useModelingContext()
+  const { send, context } = useModelingContext()
 
   useEffect(() => {
     if (!engineCommandManager) return
@@ -29,7 +29,9 @@ export function useEngineConnectionSubscriptions() {
     const unSubClick = engineCommandManager.subscribeTo({
       event: 'select_with_point',
       callback: async (engineEvent) => {
-        const event = await getEventForSelectWithPoint(engineEvent, state)
+        const event = await getEventForSelectWithPoint(engineEvent, {
+          sketchEnginePathId: context.sketchEnginePathId,
+        })
         event && send(event)
       },
     })
@@ -37,5 +39,5 @@ export function useEngineConnectionSubscriptions() {
       unSubHover()
       unSubClick()
     }
-  }, [engineCommandManager, state])
+  }, [engineCommandManager, context?.sketchEnginePathId])
 }

src/index.css

@@ -254,6 +254,10 @@ code {
   color: rgb(120, 120, 120, 0.8) !important;
 }
 
+.segment-length-label-text {
+  transform: translate(var(--x, 0), var(--y, 0));
+}
+
 @layer components {
   kbd.hotkey {
     @apply font-mono text-xs inline-block px-1 py-0.5 rounded-sm;

src/lang/codeManager.ts

@@ -11,8 +11,8 @@ import { KeyBinding } from '@codemirror/view'
 
 const PERSIST_CODE_KEY = 'persistCode'
 
-const codeManagerUpdateAnnotation = Annotation.define<null>()
-export const codeManagerUpdateEvent = codeManagerUpdateAnnotation.of(null)
+const codeManagerUpdateAnnotation = Annotation.define<boolean>()
+export const codeManagerUpdateEvent = codeManagerUpdateAnnotation.of(true)
 
 export default class CodeManager {
   private _code: string = bracket

src/lang/std/engineConnection.ts

@@ -300,6 +300,7 @@ class EngineConnection extends EventTarget {
   pc?: RTCPeerConnection
   unreliableDataChannel?: RTCDataChannel
   mediaStream?: MediaStream
+  freezeFrame: boolean = false
 
   private _state: EngineConnectionState = {
     type: EngineConnectionStateType.Fresh,
@@ -365,7 +366,11 @@ class EngineConnection extends EventTarget {
     this.pingPongSpan = { ping: undefined, pong: undefined }
 
     // Without an interval ping, our connection will timeout.
+    // If this.freezeFrame is true we skip this logic so only reconnect
+    // happens on mouse move
     setInterval(() => {
+      if (this.freezeFrame) return
+
       switch (this.state.type as EngineConnectionStateType) {
         case EngineConnectionStateType.ConnectionEstablished:
           // If there was no reply to the last ping, report a timeout.
@@ -426,7 +431,8 @@ class EngineConnection extends EventTarget {
     return this.state.type === EngineConnectionStateType.ConnectionEstablished
   }
 
-  tearDown() {
+  tearDown(opts?: { freeze: boolean }) {
+    this.freezeFrame = opts?.freeze ?? false
     this.disconnectAll()
     this.state = {
       type: EngineConnectionStateType.Disconnecting,
@@ -996,6 +1002,9 @@ class EngineConnection extends EventTarget {
       this.pc?.connectionState === 'closed' &&
       this.unreliableDataChannel?.readyState === 'closed'
     if (allClosed) {
+      // Do not notify the rest of the program that we have cut off anything.
+      if (this.freezeFrame) return
+
       this.state = { type: EngineConnectionStateType.Disconnected }
     }
   }
@@ -1619,7 +1628,15 @@ export class EngineCommandManager extends EventTarget {
     }
   }
   tearDown() {
-    this.engineConnection?.tearDown()
+    if (this.engineConnection) {
+      this.engineConnection?.tearDown()
+      // Our window.tearDown assignment causes this case to happen which is
+      // only really for tests.
+      // @ts-ignore
+    } else if (this.engineCommandManager?.engineConnection) {
+      // @ts-ignore
+      this.engineCommandManager?.engineConnection?.tearDown()
+    }
   }
   async startNewSession() {
     this.lastArtifactMap = this.artifactMap

src/lib/selections.ts

@@ -4,7 +4,6 @@ import {
   engineCommandManager,
   kclManager,
   sceneEntitiesManager,
-  sceneInfra,
 } from 'lib/singletons'
 import { CallExpression, SourceRange, Value, parse, recast } from 'lang/wasm'
 import { ModelingMachineEvent } from 'machines/modelingMachine'
@@ -16,7 +15,6 @@ import { Program } from 'lang/wasm'
 import {
   doesPipeHaveCallExp,
   getNodeFromPath,
-  getNodePathFromSourceRange,
   hasSketchPipeBeenExtruded,
   isSingleCursorInPipe,
 } from 'lang/queryAst'
@@ -26,15 +24,11 @@ import {
   TANGENTIAL_ARC_TO_SEGMENT,
   getParentGroup,
   PROFILE_START,
-  getFaceDetails,
-  DefaultPlaneStr,
 } from 'clientSideScene/sceneEntities'
 import { Mesh, Object3D, Object3DEventMap } from 'three'
 import { AXIS_GROUP, X_AXIS } from 'clientSideScene/sceneInfra'
 import { PathToNodeMap } from 'lang/std/sketchcombos'
 import { err } from 'lib/trap'
-import { useModelingContext } from 'hooks/useModelingContext'
-import { ArtifactMapCommand } from 'lang/std/engineConnection'
 
 export const X_AXIS_UUID = 'ad792545-7fd3-482a-a602-a93924e3055b'
 export const Y_AXIS_UUID = '680fd157-266f-4b8a-984f-cdf46b8bdf01'
@@ -68,12 +62,8 @@ export async function getEventForSelectWithPoint(
     Models['OkModelingCmdResponse_type'],
     { type: 'select_with_point' }
   >,
-  state: ReturnType<typeof useModelingContext>['state']
+  { sketchEnginePathId }: { sketchEnginePathId?: string }
 ): Promise<ModelingMachineEvent | null> {
-  if (state.matches('Sketch no face'))
-    return handleSelectionInSketchNoFace(data?.entity_id || '')
-
-  // assumes XState state is `idle` from this point
   if (!data?.entity_id) {
     return {
       type: 'Set selection',
@@ -153,128 +143,6 @@ export async function getEventForSelectWithPoint(
   }
 }
 
-async function handleSelectionInSketchNoFace(
-  entity_id: string
-): Promise<ModelingMachineEvent | null> {
-  let _entity_id = entity_id
-  if (!_entity_id) return Promise.resolve(null)
-  if (
-    engineCommandManager.defaultPlanes?.xy === _entity_id ||
-    engineCommandManager.defaultPlanes?.xz === _entity_id ||
-    engineCommandManager.defaultPlanes?.yz === _entity_id ||
-    engineCommandManager.defaultPlanes?.negXy === _entity_id ||
-    engineCommandManager.defaultPlanes?.negXz === _entity_id ||
-    engineCommandManager.defaultPlanes?.negYz === _entity_id
-  ) {
-    const defaultPlaneStrMap: Record<string, DefaultPlaneStr> = {
-      [engineCommandManager.defaultPlanes.xy]: 'XY',
-      [engineCommandManager.defaultPlanes.xz]: 'XZ',
-      [engineCommandManager.defaultPlanes.yz]: 'YZ',
-      [engineCommandManager.defaultPlanes.negXy]: '-XY',
-      [engineCommandManager.defaultPlanes.negXz]: '-XZ',
-      [engineCommandManager.defaultPlanes.negYz]: '-YZ',
-    }
-    // TODO can we get this information from rust land when it creates the default planes?
-    // maybe returned from make_default_planes (src/wasm-lib/src/wasm.rs)
-    let zAxis: [number, number, number] = [0, 0, 1]
-    let yAxis: [number, number, number] = [0, 1, 0]
-
-    // get unit vector from camera position to target
-    const camVector = sceneInfra.camControls.camera.position
-      .clone()
-      .sub(sceneInfra.camControls.target)
-
-    if (engineCommandManager.defaultPlanes?.xy === _entity_id) {
-      zAxis = [0, 0, 1]
-      yAxis = [0, 1, 0]
-      if (camVector.z < 0) {
-        zAxis = [0, 0, -1]
-        _entity_id = engineCommandManager.defaultPlanes?.negXy || ''
-      }
-    } else if (engineCommandManager.defaultPlanes?.yz === _entity_id) {
-      zAxis = [1, 0, 0]
-      yAxis = [0, 0, 1]
-      if (camVector.x < 0) {
-        zAxis = [-1, 0, 0]
-        _entity_id = engineCommandManager.defaultPlanes?.negYz || ''
-      }
-    } else if (engineCommandManager.defaultPlanes?.xz === _entity_id) {
-      zAxis = [0, 1, 0]
-      yAxis = [0, 0, 1]
-      _entity_id = engineCommandManager.defaultPlanes?.negXz || ''
-      if (camVector.y < 0) {
-        zAxis = [0, -1, 0]
-        _entity_id = engineCommandManager.defaultPlanes?.xz || ''
-      }
-    }
-
-    return {
-      type: 'Select default plane',
-      data: {
-        type: 'defaultPlane',
-        planeId: _entity_id,
-        plane: defaultPlaneStrMap[_entity_id],
-        zAxis,
-        yAxis,
-      },
-    }
-  }
-  const artifact = engineCommandManager.artifactMap[_entity_id]
-  // If we clicked on an extrude wall, we climb up the parent Id
-  // to get the sketch profile's face ID. If we clicked on an endcap,
-  // we already have it.
-  const targetId =
-    'additionalData' in artifact && artifact.additionalData?.type === 'cap'
-      ? _entity_id
-      : artifact.parentId
-
-  // tsc cannot infer that target can have extrusions
-  // from the commandType (why?) so we need to cast it
-  const target = engineCommandManager.artifactMap?.[
-    targetId || ''
-  ] as ArtifactMapCommand & { extrusions?: string[] }
-
-  // TODO: We get the first extrusion command ID,
-  // which is fine while backend systems only support one extrusion.
-  // but we need to more robustly handle resolving to the correct extrusion
-  // if there are multiple.
-  const extrusions =
-    engineCommandManager.artifactMap?.[target?.extrusions?.[0] || '']
-
-  if (artifact?.commandType !== 'solid3d_get_extrusion_face_info') return null
-
-  const faceInfo = await getFaceDetails(_entity_id)
-  if (!faceInfo?.origin || !faceInfo?.z_axis || !faceInfo?.y_axis) return null
-  const { z_axis, y_axis, origin } = faceInfo
-  const sketchPathToNode = getNodePathFromSourceRange(
-    kclManager.ast,
-    artifact.range
-  )
-
-  const extrudePathToNode = extrusions?.range
-    ? getNodePathFromSourceRange(kclManager.ast, extrusions.range)
-    : []
-
-  return {
-    type: 'Select default plane',
-    data: {
-      type: 'extrudeFace',
-      zAxis: [z_axis.x, z_axis.y, z_axis.z],
-      yAxis: [y_axis.x, y_axis.y, y_axis.z],
-      position: [origin.x, origin.y, origin.z].map(
-        (num) => num / sceneInfra._baseUnitMultiplier
-      ) as [number, number, number],
-      sketchPathToNode,
-      extrudePathToNode,
-      cap:
-        artifact?.additionalData?.type === 'cap'
-          ? artifact.additionalData.info
-          : 'none',
-      faceId: _entity_id,
-    },
-  }
-}
-
 export function getEventForSegmentSelection(
   obj: Object3D<Object3DEventMap>
 ): ModelingMachineEvent | null {

src/lib/settings/initialSettings.tsx

@@ -157,7 +157,7 @@ export function createSettings() {
         ),
       }),
       enableSSAO: new Setting<boolean>({
-        defaultValue: false,
+        defaultValue: true,
         description:
           'Whether or not Screen Space Ambient Occlusion (SSAO) is enabled',
         validate: (v) => typeof v === 'boolean',

src/lib/singletons.ts

@@ -9,6 +9,10 @@ export const codeManager = new CodeManager()
 
 export const engineCommandManager = new EngineCommandManager()
 
+// Accessible for tests mostly
+// @ts-ignore
+window.tearDown = engineCommandManager.tearDown
+
 // This needs to be after codeManager is created.
 export const kclManager = new KclManager(engineCommandManager)
 kclManager.isFirstRender = true

src/wasm-lib/Cargo.lock

@@ -169,18 +169,18 @@ checksum = "3b43422f69d8ff38f95f1b2bb76517c91589a924d1559a0e935d7c8ce0274c11"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
 name = "async-trait"
-version = "0.1.80"
+version = "0.1.81"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c6fa2087f2753a7da8cc1c0dbfcf89579dd57458e36769de5ac750b4671737ca"
+checksum = "6e0c28dcc82d7c8ead5cb13beb15405b57b8546e93215673ff8ca0349a028107"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -191,7 +191,7 @@ checksum = "3c87f3f15e7794432337fc718554eaa4dc8f04c9677a950ffe366f20a162ae42"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -400,9 +400,9 @@ dependencies = [
 
 [[package]]
 name = "clap"
-version = "4.5.7"
+version = "4.5.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5db83dced34638ad474f39f250d7fea9598bdd239eaced1bdf45d597da0f433f"
+checksum = "64acc1846d54c1fe936a78dc189c34e28d3f5afc348403f28ecf53660b9b8462"
 dependencies = [
  "clap_builder",
  "clap_derive",
@@ -410,9 +410,9 @@ dependencies = [
 
 [[package]]
 name = "clap_builder"
-version = "4.5.7"
+version = "4.5.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f7e204572485eb3fbf28f871612191521df159bc3e15a9f5064c66dba3a8c05f"
+checksum = "6fb8393d67ba2e7bfaf28a23458e4e2b543cc73a99595511eb207fdb8aede942"
 dependencies = [
  "anstream",
  "anstyle",
@@ -424,14 +424,14 @@ dependencies = [
 
 [[package]]
 name = "clap_derive"
-version = "4.5.5"
+version = "4.5.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c780290ccf4fb26629baa7a1081e68ced113f1d3ec302fa5948f1c381ebf06c6"
+checksum = "2bac35c6dafb060fd4d275d9a4ffae97917c13a6327903a8be2153cd964f7085"
 dependencies = [
  "heck 0.5.0",
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -631,7 +631,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "strsim 0.10.0",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -642,7 +642,7 @@ checksum = "a668eda54683121533a393014d8692171709ff57a7d61f187b6e782719f8933f"
 dependencies = [
  "darling_core",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -697,7 +697,7 @@ checksum = "4078275de501a61ceb9e759d37bdd3d7210e654dbc167ac1a3678ef4435ed57b"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
  "synstructure",
 ]
 
@@ -726,7 +726,7 @@ dependencies = [
  "rustfmt-wrapper",
  "serde",
  "serde_tokenstream",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -737,7 +737,7 @@ checksum = "67e77553c4162a157adbf834ebae5b415acbecbeafc7a74b0e886657506a7611"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -764,7 +764,7 @@ checksum = "487585f4d0c6655fe74905e2504d8ad6908e4db67f744eb140876906c2f3175d"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -936,7 +936,7 @@ checksum = "87750cf4b7a4c0625b1529e4c543c2182106e4dedc60a2a6455e00d212c489ac"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -1026,7 +1026,7 @@ dependencies = [
  "inflections",
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -1448,7 +1448,7 @@ dependencies = [
  "pretty_assertions",
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -1824,7 +1824,7 @@ dependencies = [
  "regex",
  "regex-syntax 0.8.3",
  "structmeta",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -1877,7 +1877,7 @@ checksum = "2f38a4412a78282e09a2cf38d195ea5420d15ba0602cb375210efbc877243965"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -1996,9 +1996,9 @@ dependencies = [
 
 [[package]]
 name = "pyo3"
-version = "0.22.0"
+version = "0.22.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1962a33ed2a201c637fc14a4e0fd4e06e6edfdeee6a5fede0dab55507ad74cf7"
+checksum = "4e99090d12f6182924499253aaa1e73bf15c69cea8d2774c3c781e35badc3548"
 dependencies = [
  "cfg-if",
  "indoc",
@@ -2014,9 +2014,9 @@ dependencies = [
 
 [[package]]
 name = "pyo3-build-config"
-version = "0.22.0"
+version = "0.22.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ab7164b2202753bd33afc7f90a10355a719aa973d1f94502c50d06f3488bc420"
+checksum = "7879eb018ac754bba32cb0eec7526391c02c14a093121857ed09fbf1d1057d41"
 dependencies = [
  "once_cell",
  "target-lexicon",
@@ -2024,9 +2024,9 @@ dependencies = [
 
 [[package]]
 name = "pyo3-ffi"
-version = "0.22.0"
+version = "0.22.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c6424906ca49013c0829c5c1ed405e20e2da2dc78b82d198564880a704e6a7b7"
+checksum = "ce2baa5559a411fc1cf519295f24c34b53d5d725818bc96b5abf94762da09041"
 dependencies = [
  "libc",
  "pyo3-build-config",
@@ -2034,27 +2034,27 @@ dependencies = [
 
 [[package]]
 name = "pyo3-macros"
-version = "0.22.0"
+version = "0.22.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "82b2f19e153122d64afd8ce7aaa72f06a00f52e34e1d1e74b6d71baea396460a"
+checksum = "049621c20a23f2def20f4fe67978d1da8d8a883d64b9c21362f3b776e254edc7"
 dependencies = [
  "proc-macro2",
  "pyo3-macros-backend",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
 name = "pyo3-macros-backend"
-version = "0.22.0"
+version = "0.22.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dd698c04cac17cf0fe63d47790ab311b8b25542f5cb976b65c374035c50f1eef"
+checksum = "0e969ee2e025435f1819d31a275ba4bb9cbbdf3ac535227fdbd85b9322ffe144"
 dependencies = [
  "heck 0.5.0",
  "proc-macro2",
  "pyo3-build-config",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -2516,7 +2516,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "serde_derive_internals",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -2566,9 +2566,9 @@ checksum = "92d43fe69e652f3df9bdc2b85b2854a0825b86e4fb76bc44d945137d053639ca"
 
 [[package]]
 name = "serde"
-version = "1.0.203"
+version = "1.0.204"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7253ab4de971e72fb7be983802300c30b5a7f0c2e56fab8abfc6a214307c0094"
+checksum = "bc76f558e0cbb2a839d37354c575f1dc3fdc6546b5be373ba43d95f231bf7c12"
 dependencies = [
  "serde_derive",
 ]
@@ -2584,13 +2584,13 @@ dependencies = [
 
 [[package]]
 name = "serde_derive"
-version = "1.0.203"
+version = "1.0.204"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "500cbc0ebeb6f46627f50f3f5811ccf6bf00643be300b4c3eabc0ef55dc5b5ba"
+checksum = "e0cd7e117be63d3c3678776753929474f3b04a43a080c744d6b0ae2a8c28e222"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -2601,7 +2601,7 @@ checksum = "330f01ce65a3a5fe59a60c82f3c9a024b573b8a6e875bd233fe5f934e71d54e3"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -2624,7 +2624,7 @@ checksum = "0b2e6b945e9d3df726b65d6ee24060aff8e3533d431f677a9695db04eff9dfdb"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -2645,7 +2645,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "serde",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -2782,7 +2782,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "structmeta-derive",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -2793,7 +2793,7 @@ checksum = "152a0b65a590ff6c3da95cabe2353ee04e6167c896b28e3b14478c2636c922fc"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -2837,9 +2837,9 @@ dependencies = [
 
 [[package]]
 name = "syn"
-version = "2.0.68"
+version = "2.0.70"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "901fa70d88b9d6c98022e23b4136f9f3e54e4662c3bc1bd1d84a42a9a0f0c1e9"
+checksum = "2f0209b68b3613b093e0ec905354eccaedcfe83b8cb37cbdeae64026c3064c16"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -2860,7 +2860,7 @@ checksum = "c8af7666ab7b6390ab78131fb5b0fce11d6b7a6951602017c35fa82800708971"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -2943,7 +2943,7 @@ checksum = "46c3384250002a6d5af4d114f2845d37b57521033f30d5c3f46c4d70e1197533"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -3039,7 +3039,7 @@ checksum = "5f5ae998a069d4b5aba8ee9dad856af7d520c3699e6159b185c2acd48155d39a"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -3192,7 +3192,7 @@ checksum = "84fd902d4e0b9a4b27f2f440108dc034e1758628a9b702f8ec61ad66355422fa"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -3220,7 +3220,7 @@ checksum = "34704c8d6ebcbc939824180af020566b01a7c01f80641264eba0999f6c2b6be7"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -3297,7 +3297,7 @@ checksum = "c88cc88fd23b5a04528f3a8436024f20010a16ec18eb23c164b1242f65860130"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
  "termcolor",
 ]
 
@@ -3419,9 +3419,9 @@ checksum = "711b9620af191e0cdc7468a8d14e709c3dcdb115b36f838e601583af800a370a"
 
 [[package]]
 name = "uuid"
-version = "1.9.1"
+version = "1.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5de17fd2f7da591098415cff336e12965a28061ddace43b59cb3c430179c9439"
+checksum = "81dfa00651efa65069b0b6b651f4aaa31ba9e3c3ce0137aaad053604ee7e0314"
 dependencies = [
  "getrandom",
  "serde",
@@ -3455,7 +3455,7 @@ dependencies = [
  "proc-macro-error",
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]
@@ -3516,7 +3516,7 @@ dependencies = [
  "once_cell",
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
  "wasm-bindgen-shared",
 ]
 
@@ -3551,7 +3551,7 @@ checksum = "e94f17b526d0a461a191c78ea52bbce64071ed5c04c9ffe424dcb38f74171bb7"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
  "wasm-bindgen-backend",
  "wasm-bindgen-shared",
 ]
@@ -3876,7 +3876,7 @@ checksum = "9ce1b18ccd8e73a9321186f97e46f9f04b778851177567b1975109d26a08d2a6"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.68",
+ "syn 2.0.70",
 ]
 
 [[package]]

src/wasm-lib/Cargo.toml

@@ -11,14 +11,14 @@ crate-type = ["cdylib"]
 
 [dependencies]
 bson = { version = "2.11.0", features = ["uuid-1", "chrono"] }
-clap = "4.5.7"
+clap = "4.5.9"
 gloo-utils = "0.2.0"
 kcl-lib = { path = "kcl" }
 kittycad.workspace = true
 serde_json = "1.0.120"
 tokio = { version = "1.38.0", features = ["sync"] }
 toml = "0.8.14"
-uuid = { version = "1.9.1", features = ["v4", "js", "serde"] }
+uuid = { version = "1.10.0", features = ["v4", "js", "serde"] }
 wasm-bindgen = "0.2.91"
 wasm-bindgen-futures = "0.4.42"
 
@@ -31,7 +31,7 @@ pretty_assertions = "1.4.0"
 reqwest = { version = "0.11.26", default-features = false }
 tokio = { version = "1.38.0", features = ["rt-multi-thread", "macros", "time"] }
 twenty-twenty = "0.8"
-uuid = { version = "1.9.1", features = ["v4", "js", "serde"] }
+uuid = { version = "1.10.0", features = ["v4", "js", "serde"] }
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
 console_error_panic_hook = "0.1.7"

src/wasm-lib/derive-docs/Cargo.toml

@@ -18,9 +18,9 @@ once_cell = "1.19.0"
 proc-macro2 = "1"
 quote = "1"
 regex = "1.10"
-serde = { version = "1.0.203", features = ["derive"] }
+serde = { version = "1.0.204", features = ["derive"] }
 serde_tokenstream = "0.2"
-syn = { version = "2.0.68", features = ["full"] }
+syn = { version = "2.0.70", features = ["full"] }
 
 [dev-dependencies]
 anyhow = "1.0.86"

src/wasm-lib/kcl-macros/Cargo.toml

@@ -15,7 +15,7 @@ databake = "0.1.8"
 kcl-lib = { path = "../kcl" }
 proc-macro2 = "1"
 quote = "1"
-syn = { version = "2.0.68", features = ["full"] }
+syn = { version = "2.0.70", features = ["full"] }
 
 [dev-dependencies]
 pretty_assertions = "1.4.0"

src/wasm-lib/kcl-test-server/Cargo.toml

@@ -10,6 +10,6 @@ anyhow = "1.0.86"
 hyper = { version = "0.14.29", features = ["server"] }
 kcl-lib = { version = "0.1.70", path = "../kcl" }
 pico-args = "0.5.0"
-serde = { version = "1.0.203", features = ["derive"] }
+serde = { version = "1.0.204", features = ["derive"] }
 serde_json = "1.0.120"
 tokio = { version = "1.38.0", features = ["macros", "rt-multi-thread"] }

src/wasm-lib/kcl/Cargo.toml

@@ -13,10 +13,10 @@ keywords = ["kcl", "KittyCAD", "CAD"]
 [dependencies]
 anyhow = { version = "1.0.86", features = ["backtrace"] }
 async-recursion = "1.1.1"
-async-trait = "0.1.80"
+async-trait = "0.1.81"
 base64 = "0.22.1"
 chrono = "0.4.38"
-clap = { version = "4.5.7", default-features = false, optional = true }
+clap = { version = "4.5.9", default-features = false, optional = true }
 dashmap = "6.0.1"
 databake = { version = "0.1.8", features = ["derive"] }
 derive-docs = { version = "0.1.20", path = "../derive-docs" }
@@ -28,18 +28,18 @@ kittycad = { workspace = true, features = ["clap"] }
 lazy_static = "1.5.0"
 mime_guess = "2.0.5"
 parse-display = "0.9.1"
-pyo3 = { version = "0.22.0", optional = true }
+pyo3 = { version = "0.22.1", optional = true }
 reqwest = { version = "0.11.26", default-features = false, features = ["stream", "rustls-tls"] }
 ropey = "1.6.1"
 schemars = { version = "0.8.17", features = ["impl_json_schema", "url", "uuid1"] }
-serde = { version = "1.0.203", features = ["derive"] }
+serde = { version = "1.0.204", features = ["derive"] }
 serde_json = "1.0.120"
 sha2 = "0.10.8"
 thiserror = "1.0.61"
 toml = "0.8.14"
 ts-rs = { version = "9.0.1", features = ["uuid-impl", "url-impl", "chrono-impl", "no-serde-warnings", "serde-json-impl"] }
 url = { version = "2.5.2", features = ["serde"] }
-uuid = { version = "1.9.1", features = ["v4", "js", "serde"] }
+uuid = { version = "1.10.0", features = ["v4", "js", "serde"] }
 validator = { version = "0.18.1", features = ["derive"] }
 winnow = "0.5.40"
 zip = { version = "2.0.0", default-features = false }

src/wasm-lib/kcl/src/lsp/copilot/mod.rs

@@ -231,7 +231,6 @@ impl Backend {
     |> line([0, scale], %)
     |> line([scale, 0], %)
     |> line([0, -scale], %)
-
   return sg
 }
 const part001 = cube([0,0], 20)

tsconfig.json

@@ -12,7 +12,8 @@
       "@types/wicg-file-system-access",
       "node",
       "@wdio/globals/types",
-      "mocha"
+      "mocha",
+      "@lezer/generator"
     ],
     "target": "esnext",
     "lib": ["dom", "dom.iterable", "esnext"],
@@ -32,6 +33,6 @@
     "jsx": "react-jsx"
   },
   "include": ["src", "e2e", "packages", "./*.ts"],
-  "exclude": ["node_modules"],
+  "exclude": ["node_modules", "./*.grammar"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

vite.config.ts

@@ -3,6 +3,8 @@ import viteTsconfigPaths from 'vite-tsconfig-paths'
 import eslint from 'vite-plugin-eslint'
 import { defineConfig, configDefaults } from 'vitest/config'
 import version from 'vite-plugin-package-version'
+// @ts-ignore: No types available
+import { lezer } from '@lezer/generator/rollup'
 
 const config = defineConfig({
   server: {
@@ -58,7 +60,7 @@ const config = defineConfig({
       '@kittycad/codemirror-lsp-client': '/packages/codemirror-lsp-client/src',
     },
   },
-  plugins: [react(), viteTsconfigPaths(), eslint(), version()],
+  plugins: [react(), viteTsconfigPaths(), eslint(), version(), lezer()],
   worker: {
     plugins: () => [viteTsconfigPaths()],
   },

yarn.lock

@@ -1628,10 +1628,10 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
-"@kittycad/lib@^0.0.69":
-  version "0.0.69"
-  resolved "https://registry.yarnpkg.com/@kittycad/lib/-/lib-0.0.69.tgz#755fb5bc87ea6401d013be8047955b890e88493d"
-  integrity sha512-D6VBx2kUd0ya2op+SYcnB+/JU0TU8/rYh4o5VGCxO7Z13wW7SiAawucHhid3KSzzXfwjLXeoEXXYBv0rRzLJ3A==
+"@kittycad/lib@^0.0.70":
+  version "0.0.70"
+  resolved "https://registry.yarnpkg.com/@kittycad/lib/-/lib-0.0.70.tgz#398ec3b2385cef055bbd7c2681040f08b3751ac6"
+  integrity sha512-P6IyfUIiCZ5Cc7EDx/apXBsmHAUmO/yhMw5E6fviMCRt0sNJnUfed6iTmfTpq2m44k7k8Vrn0WwrkQMsReLUhA==
   dependencies:
     node-fetch "3.3.2"
     openapi-types "^12.0.0"
@@ -1643,14 +1643,22 @@
   resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.2.1.tgz#198b278b7869668e1bebbe687586e12a42731049"
   integrity sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==
 
-"@lezer/highlight@^1.0.0":
+"@lezer/generator@^1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@lezer/generator/-/generator-1.7.1.tgz#90c1a9de2fb4d5a714216fa659058c7859accaab"
+  integrity sha512-MgPJN9Si+ccxzXl3OAmCeZuUKw4XiPl4y664FX/hnnyG9CTqUPq65N3/VGPA2jD23D7QgMTtNqflta+cPN+5mQ==
+  dependencies:
+    "@lezer/common" "^1.1.0"
+    "@lezer/lr" "^1.3.0"
+
+"@lezer/highlight@^1.0.0", "@lezer/highlight@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@lezer/highlight/-/highlight-1.2.0.tgz#e5898c3644208b4b589084089dceeea2966f7780"
   integrity sha512-WrS5Mw51sGrpqjlh3d4/fOwpEV2Hd3YOkp9DBt4k8XZQcoTHZFB7sx030A6OcahF4J1nDQAa3jXlTVVYH50IFA==
   dependencies:
     "@lezer/common" "^1.0.0"
 
-"@lezer/lr@^1.0.0":
+"@lezer/lr@^1.0.0", "@lezer/lr@^1.3.0", "@lezer/lr@^1.4.1":
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-1.4.1.tgz#fe25f051880a754e820b28148d90aa2a96b8bdd2"
   integrity sha512-CHsKq8DMKBf9b3yXPDIU4DbH+ZJd/sJdYOW2llbW/HudP5u0VS6Bfq1hLYfgU7uAYGFIyGGQIsSOXGPEErZiJw==
@@ -7535,16 +7543,7 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -7622,14 +7621,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -8497,7 +8489,7 @@ workerpool@6.2.1:
   resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.2.1.tgz#46fc150c17d826b86a008e5a4508656777e9c343"
   integrity sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -8515,15 +8507,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"