Cut release v0.21.2 (#2358)

* make getPreviousAdjacentEdge mock safe

* make more functions mock safe

.env.development

@@ -3,3 +3,4 @@ VITE_KC_API_BASE_URL=https://api.dev.zoo.dev
 VITE_KC_SITE_BASE_URL=https://dev.zoo.dev
 VITE_KC_SKIP_AUTH=false
 VITE_KC_CONNECTION_TIMEOUT_MS=5000
+VITE_KC_DEV_TOKEN="your token from dev.zoo.dev should go in .env.development.local"

.github/workflows/ci.yml

@@ -130,7 +130,9 @@ jobs:
       matrix:
         os: [macos-14, ubuntu-latest, windows-latest]
     env:
+      # Specific Apple Universal target for macos
       TAURI_ARGS_MACOS: ${{ matrix.os == 'macos-14' && '--target universal-apple-darwin' || '' }}
+      # Only build executable on linux (no appimage or deb)
       TAURI_ARGS_UBUNTU: ${{ matrix.os == 'ubuntu-latest' && '--bundles' || '' }}
     steps:
       - uses: actions/checkout@v4
@@ -237,9 +239,9 @@ jobs:
           includeDebug: true
           args: "${{ env.TAURI_ARGS_MACOS }} ${{ env.TAURI_ARGS_UBUNTU }}"
 
-
-      - name: Mac App Store
-        if: ${{ env.BUILD_RELEASE == 'true' && matrix.os == 'macos-14' }}
+      - name: Build for Mac TestFlight (nightly)
+        if: ${{ github.event_name == 'schedule' && matrix.os == 'macos-14' }}
+        shell: bash
         run: |
           unset APPLE_SIGNING_IDENTITY
           unset APPLE_CERTIFICATE
@@ -248,45 +250,40 @@ jobs:
           profile="src-tauri/entitlements/Mac_App_Distribution.provisionprofile"
 
           mkdir -p src-tauri/entitlements
-          echo "${APPLE_STORE_PROVISIONING_PROFILE}" | base64 --decode > "${profile}"
+          echo -n "${APPLE_STORE_PROVISIONING_PROFILE}" | base64 --decode -o "${profile}"
 
-          echo "${APPLE_STORE_DISTRIBUTION_CERT}" | base64 --decode > "dist.cer"
-          echo "${APPLE_STORE_INSTALLER_CERT}" | base64 --decode > "installer.cer"
+          echo -n "${APPLE_STORE_DISTRIBUTION_CERT}" | base64 --decode -o "dist.cer"
+          echo -n "${APPLE_STORE_INSTALLER_CERT}" | base64 --decode -o "installer.cer"
 
-          # load the certificates into the keychain
-          # Create a custom keychain
-          security create-keychain -p gh_actions refine-build.keychain
+          KEYCHAIN_PATH=$RUNNER_TEMP/app-signing.keychain-db
+          KEYCHAIN_PASSWORD="password"
 
-          # Make the custom keychain default, so xcodebuild will use it for signing
-          security default-keychain -s refine-build.keychain
+          # create temporary keychain
+          security create-keychain -p "$KEYCHAIN_PASSWORD" $KEYCHAIN_PATH
+          security set-keychain-settings -lut 21600 $KEYCHAIN_PATH
+          security unlock-keychain -p "$KEYCHAIN_PASSWORD" $KEYCHAIN_PATH
 
-          # Unlock the keychain
-          security unlock-keychain -p gh_actions refine-build.keychain
+          # import certificate to keychain
+          security import "dist.cer" -P "$APPLE_STORE_P12_PASSWORD" -k $KEYCHAIN_PATH -f pkcs12 -t cert -A
+          security import "installer.cer" -P "$APPLE_STORE_P12_PASSWORD" -k $KEYCHAIN_PATH -f pkcs12 -t cert -A
 
-          # Set keychain timeout to 1 hour for long builds
-          security set-keychain-settings -t 3600 -l ~/Library/Keychains/refine-build.keychain
-
-          # Add certificates to keychain and allow codesign to access them
-          security import "dist.cer" -k ~/Library/Keychains/refine-build.keychain -T /usr/bin/codesign
-          security import "installer.cer" -k ~/Library/Keychains/refine-build.keychain -T /usr/bin/codesign
-
-          security set-key-partition-list -S apple-tool:,apple: -s -k gh_actions refine-build.keychain
+          security set-key-partition-list -S apple-tool:,apple: -k "$KEYCHAIN_PASSWORD" $KEYCHAIN_PATH
+          security list-keychain -d user -s $KEYCHAIN_PATH
 
           target="universal-apple-darwin"
 
           # Turn off the default target
-          sed -i "s/default =/# default =/" src-tauri/Cargo.toml
-          yarn tauri build --target "${target}" --verbose
+          # We don't want to install the updater for the apple store build
+          sed -i.bu "s/default =/# default =/" src-tauri/Cargo.toml
+          rm src-tauri/Cargo.toml.bu
+          git diff src-tauri/Cargo.toml
 
-          ls -l src-tauri/target/${target}
-          ls -l src-tauri/target
-          ls -l src-tauri/target/${target}/release/bundle/macos
-          ls -l src-tauri/entitlements
+          yarn tauri build --target "${target}" --verbose --config src-tauri/tauri.app-store.conf.json
 
           app_path="src-tauri/target/${target}/release/bundle/macos/Zoo Modeling App.app"
           build_name="src-tauri/target/${target}/release/bundle/macos/Zoo Modeling App.pkg"
           cp_dir="src-tauri/target/${target}/release/bundle/macos/Zoo Modeling App.app/Contents/embedded.provisionprofile"
-          entitlements="src-tauri/entitlements/Zoo Modeling App.entitlements"
+          entitlements="src-tauri/entitlements/app-store.entitlements"
 
           cp "${profile}" "${cp_dir}"
 
@@ -296,20 +293,38 @@ jobs:
 
           # Undo the changes to the Cargo.toml
           git checkout src-tauri/Cargo.toml
+
         env:
           APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
           APPLE_STORE_PROVISIONING_PROFILE: ${{ secrets.APPLE_STORE_PROVISIONING_PROFILE }}
           APPLE_STORE_DISTRIBUTION_CERT: ${{ secrets.APPLE_STORE_DISTRIBUTION_CERT }}
           APPLE_STORE_INSTALLER_CERT: ${{ secrets.APPLE_STORE_INSTALLER_CERT }}
+          APPLE_STORE_P12_PASSWORD: ${{ secrets.APPLE_STORE_P12_PASSWORD }}
 
-      - name: 'Upload app to TestFlight'
+
+      - name: 'Upload to Mac TestFlight (nightly)'
         uses: apple-actions/upload-testflight-build@v1
-        if: ${{ env.BUILD_RELEASE == 'true' && matrix.os == 'macos-14' }}
+        if: ${{ github.event_name == 'schedule' && matrix.os == 'macos-14' }}
         with:
           app-path: 'src-tauri/target/universal-apple-darwin/release/bundle/macos/Zoo Modeling App.pkg'
           issuer-id: ${{ secrets.APPLE_STORE_ISSUER_ID }}
           api-key-id: ${{ secrets.APPLE_STORE_API_KEY_ID }}
           api-private-key: ${{ secrets.APPLE_STORE_API_PRIVATE_KEY }}
+          app-type: osx
+
+
+      - name: Clean up after Mac TestFlight (nightly)
+        if: ${{ github.event_name == 'schedule' && matrix.os == 'macos-14' }}
+        shell: bash
+        run: |
+          git status
+          # remove our target builds because we want to make sure the later build
+          # includes the updater, and that anything we changed with the target
+          # does not persist
+          rm -rf src-tauri/target
+          # Lets get rid of the info.plist for the normal mac builds since its
+          # being sketchy.
+          rm src-tauri/Info.plist
 
       # We do this after the apple store because the apple store build is
       # specific and we want to overwrite it with the this new build after and
@@ -338,11 +353,10 @@ jobs:
         with:
           path: "${{ env.PREFIX }}/${{ env.MODE }}/bundle/*/*"
 
-      # TODO: re-enable linux e2e tests when possible
       - name: Run e2e tests (linux only)
-        if: false
+        if: ${{ matrix.os == 'ubuntu-latest' && github.event_name != 'release' && github.event_name != 'schedule' }}
         run: |
-          cargo install tauri-driver
+          cargo install tauri-driver --force
           source .env.${{ env.BUILD_RELEASE == 'true' && 'production' || 'development' }}
           export VITE_KC_API_BASE_URL
           xvfb-run yarn test:e2e:tauri

.github/workflows/create-release.yml

@@ -17,11 +17,11 @@ jobs:
         name: Read Cut release PR info and create release
         with:
           script: |
-            const { owner, repo, sha } = context.repo
+            const { owner, repo } = context.repo
             const pulls = await github.rest.repos.listPullRequestsAssociatedWithCommit({
               owner,
               repo,
-              commit_sha: sha,
+              commit_sha: context.sha,
             })
             const { title, body } = pulls.data[0]
             const version = title.split('Cut release ')[1]

README.md

@@ -72,7 +72,13 @@ finally, to run the web app only, run:
 yarn start
 ```
 
-## Developing in Chrome
+If you're not an KittyCAD employee you won't be able to access the dev environment, you should copy everything from `.env.production` to `.env.development` to make it point to production instead, then when you navigate to `localhost:3000` the easiest way to sign in is to paste `localStorage.setItem('TOKEN_PERSIST_KEY', "your-token-from-https://zoo.dev/account/api-tokens")` replacing the with a real token from https://zoo.dev/account/api-tokens ofcourse, then navigate to localhost:3000 again. Note that navigating to localhost:3000/signin removes your token so you will need to set the token again.
+
+### Development environment variables
+
+The Copilot LSP plugin in the editor requires a Zoo API token to run. In production, we authenticate this with a token via cookie in the browser and device auth token in the desktop environment, but this token is inaccessible in the dev browser version because the cookie is considered "cross-site" (from `localhost` to `dev.zoo.dev`). There is an optional environment variable called `VITE_KC_DEV_TOKEN` that you can populate with a dev token in a `.env.development.local` file to not check it into Git, which will use that token instead of other methods for the LSP service.
+
+### Developing in Chrome
 
 Chrome is in the process of rolling out a new default which
 [blocks Third-Party Cookies](https://developer.chrome.com/en/docs/privacy-sandbox/third-party-cookie-phase-out/).

docs/kcl/abs.md

@@ -19,7 +19,17 @@ abs(num: number) -> number
 ### Examples
 
 ```js
-const myVar = abs(-4)
+const myAngle = -120
+
+const sketch001 = startSketchOn('-XZ')
+  |> startProfileAt([0, 0], %)
+  |> line([8, 0], %)
+  |> angledLine({ angle: abs(myAngle), length: 5 }, %)
+  |> line([-5, 0], %)
+  |> angledLine({ angle: myAngle, length: 5 }, %)
+  |> close(%)
+
+const baseExtrusion = extrude(5, sketch001)
 ```
 
 ### Arguments

docs/kcl/index.md

@@ -31,7 +31,6 @@ layout: manual
 * [`fillet`](kcl/fillet)
 * [`floor`](kcl/floor)
 * [`getEdge`](kcl/getEdge)
-* [`getExtrudeWallTransform`](kcl/getExtrudeWallTransform)
 * [`getNextAdjacentEdge`](kcl/getNextAdjacentEdge)
 * [`getOppositeEdge`](kcl/getOppositeEdge)
 * [`getPreviousAdjacentEdge`](kcl/getPreviousAdjacentEdge)

e2e/playwright/flow-tests.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from '@playwright/test'
-import { getUtils } from './test-utils'
+import { makeTemplate, getUtils } from './test-utils'
 import waitOn from 'wait-on'
 import { roundOff } from 'lib/utils'
 import { SaveSettingsPayload } from 'lib/settings/settingsTypes'
@@ -8,9 +8,11 @@ import {
   TEST_SETTINGS,
   TEST_SETTINGS_KEY,
   TEST_SETTINGS_CORRUPTED,
-  TEST_SETTINGS_ONBOARDING,
+  TEST_SETTINGS_ONBOARDING_EXPORT,
+  TEST_SETTINGS_ONBOARDING_START,
 } from './storageStates'
 import * as TOML from '@iarna/toml'
+import { Coords2d } from 'lang/std/sketch'
 
 /*
 debug helper: unfortunately we do rely on exact coord mouse clicks in a few places
@@ -129,6 +131,7 @@ test('Basic sketch', async ({ page }) => {
   // selected two lines therefore there should be two cursors
   await expect(page.locator('.cm-cursor')).toHaveCount(2)
 
+  await page.getByRole('button', { name: 'Constrain' }).click()
   await page.getByRole('button', { name: 'Equal Length' }).click()
 
   await expect(page.locator('.cm-content'))
@@ -262,6 +265,88 @@ test('Can moving camera', async ({ page, context }) => {
   }, [1, -94, -94])
 })
 
+test('if you click the format button it formats your code', async ({
+  page,
+}) => {
+  const u = getUtils(page)
+  await page.setViewportSize({ width: 1000, height: 500 })
+  await page.goto('/')
+
+  await u.waitForAuthSkipAppStart()
+
+  // check no error to begin with
+  await expect(page.locator('.cm-lint-marker-error')).not.toBeVisible()
+
+  await page.click('.cm-content')
+  await page.keyboard.type(`const part001 = startSketchOn('XY')
+|> startProfileAt([-10, -10], %)
+|> line([20, 0], %)
+|> line([0, 20], %)
+|> line([-20, 0], %)
+|> close(%)`)
+  await page.click('#code-pane button:first-child')
+  await page.click('button:has-text("Format code")')
+
+  await expect(page.locator('.cm-content'))
+    .toHaveText(`const part001 = startSketchOn('XY')
+  |> startProfileAt([-10, -10], %)
+  |> line([20, 0], %)
+  |> line([0, 20], %)
+  |> line([-20, 0], %)
+  |> close(%)`)
+})
+
+test('if you use the format keyboard binding it formats your code', async ({
+  page,
+}) => {
+  const u = getUtils(page)
+  await page.addInitScript(async () => {
+    localStorage.setItem(
+      'persistCode',
+      `const part001 = startSketchOn('XY')
+|> startProfileAt([-10, -10], %)
+|> line([20, 0], %)
+|> line([0, 20], %)
+|> line([-20, 0], %)
+|> close(%)`
+    )
+  })
+  await page.setViewportSize({ width: 1000, height: 500 })
+  const lspStartPromise = page.waitForEvent('console', async (message) => {
+    // it would be better to wait for a message that the kcl lsp has started by looking for the message  message.text().includes('[lsp] [window/logMessage]')
+    // but that doesn't seem to make it to the console for macos/safari :(
+    if (message.text().includes('start kcl lsp')) {
+      await new Promise((resolve) => setTimeout(resolve, 200))
+      return true
+    }
+    return false
+  })
+  await page.goto('/')
+  await u.waitForAuthSkipAppStart()
+  await lspStartPromise
+
+  // check no error to begin with
+  await expect(page.locator('.cm-lint-marker-error')).not.toBeVisible()
+
+  await u.openDebugPanel()
+  await u.expectCmdLog('[data-message-type="execution-done"]')
+  await u.closeDebugPanel()
+
+  // focus the editor
+  await page.click('.cm-line')
+
+  // Hit alt+shift+f to format the code
+  await page.keyboard.press('Alt+Shift+KeyF')
+
+  await expect(page.locator('.cm-content'))
+    .toHaveText(`const part001 = startSketchOn('XY')
+  |> startProfileAt([-10, -10], %)
+  |> line([20, 0], %)
+  |> line([0, 20], %)
+  |> line([-20, 0], %)
+  |> close(%)`)
+})
+
 test('if you write invalid kcl you get inlined errors', async ({ page }) => {
   const u = getUtils(page)
   await page.setViewportSize({ width: 1000, height: 500 })
@@ -278,7 +363,7 @@ test('if you write invalid kcl you get inlined errors', async ({ page }) => {
     const bottomAng = 25
    */
   await page.click('.cm-content')
-  await page.keyboard.type('# error')
+  await page.keyboard.type('$ error')
 
   // press arrows to clear autocomplete
   await page.keyboard.press('ArrowLeft')
@@ -295,10 +380,10 @@ test('if you write invalid kcl you get inlined errors', async ({ page }) => {
 
   // error text on hover
   await page.hover('.cm-lint-marker-error')
-  await expect(page.getByText("found unknown token '#'")).toBeVisible()
+  await expect(page.getByText("found unknown token '$'")).toBeVisible()
 
   // select the line that's causing the error and delete it
-  await page.getByText('# error').click()
+  await page.getByText('$ error').click()
   await page.keyboard.press('End')
   await page.keyboard.down('Shift')
   await page.keyboard.press('Home')
@@ -680,6 +765,45 @@ test('Project settings can be set and override user settings', async ({
   await expect(page.locator('select[name="app-theme"]')).toHaveValue('light')
 })
 
+test('Click through each onboarding step', async ({ page }) => {
+  const u = getUtils(page)
+
+  // Override beforeEach test setup
+  await page.addInitScript(
+    async ({ settingsKey, settings }) => {
+      // Give no initial code, so that the onboarding start is shown immediately
+      localStorage.setItem('persistCode', '')
+      localStorage.setItem(settingsKey, settings)
+    },
+    {
+      settingsKey: TEST_SETTINGS_KEY,
+      settings: TOML.stringify({ settings: TEST_SETTINGS_ONBOARDING_START }),
+    }
+  )
+
+  await page.setViewportSize({ width: 1200, height: 1080 })
+  await page.goto('/')
+  await u.waitForAuthSkipAppStart()
+
+  // Test that the onboarding pane loaded
+  await expect(page.getByText('Welcome to Modeling App! This')).toBeVisible()
+
+  const nextButton = page.getByTestId('onboarding-next')
+
+  while ((await nextButton.innerText()) !== 'Finish') {
+    await expect(nextButton).toBeVisible()
+    await nextButton.click()
+  }
+
+  // Finish the onboarding
+  await expect(nextButton).toBeVisible()
+  await nextButton.click()
+
+  // Test that the onboarding pane is gone
+  await expect(page.getByTestId('onboarding-content')).not.toBeVisible()
+  await expect(page.url()).not.toContain('onboarding')
+})
+
 test('Onboarding redirects and code updating', async ({ page }) => {
   const u = getUtils(page)
 
@@ -692,7 +816,7 @@ test('Onboarding redirects and code updating', async ({ page }) => {
     },
     {
       settingsKey: TEST_SETTINGS_KEY,
-      settings: TOML.stringify({ settings: TEST_SETTINGS_ONBOARDING }),
+      settings: TOML.stringify({ settings: TEST_SETTINGS_ONBOARDING_EXPORT }),
     }
   )
 
@@ -817,11 +941,14 @@ test('Selections work on fresh and edited sketch', async ({ page }) => {
     // click a segment hold shift and click an axis, see that a relevant constraint is enabled
     await topHorzSegmentClick()
     await page.keyboard.down('Shift')
+    const constrainButton = page.getByRole('button', { name: 'Constrain' })
     const absYButton = page.getByRole('button', { name: 'ABS Y' })
+    await constrainButton.click()
     await expect(absYButton).toBeDisabled()
     await page.waitForTimeout(100)
     await xAxisClick()
     await page.keyboard.up('Shift')
+    await constrainButton.click()
     await absYButton.and(page.locator(':not([disabled])')).waitFor()
     await expect(absYButton).not.toBeDisabled()
 
@@ -831,12 +958,14 @@ test('Selections work on fresh and edited sketch', async ({ page }) => {
     await page.waitForTimeout(100)
     // same selection but click the axis first
     await xAxisClick()
+    await constrainButton.click()
     await expect(absYButton).toBeDisabled()
     await page.keyboard.down('Shift')
     await page.waitForTimeout(100)
     await topHorzSegmentClick()
 
     await page.keyboard.up('Shift')
+    await constrainButton.click()
     await expect(absYButton).not.toBeDisabled()
 
     // clear selection by clicking on nothing
@@ -845,10 +974,12 @@ test('Selections work on fresh and edited sketch', async ({ page }) => {
     // check the same selection again by putting cursor in code first then selecting axis
     await page.getByText(`  |> line([-${commonPoints.num2}, 0], %)`).click()
     await page.keyboard.down('Shift')
+    await constrainButton.click()
     await expect(absYButton).toBeDisabled()
     await page.waitForTimeout(100)
     await xAxisClick()
     await page.keyboard.up('Shift')
+    await constrainButton.click()
     await expect(absYButton).not.toBeDisabled()
 
     // clear selection by clicking on nothing
@@ -910,9 +1041,8 @@ test.describe('Command bar tests', () => {
     let cmdSearchBar = page.getByPlaceholder('Search commands')
 
     // First try opening the command bar and closing it
-    // It has a different label on mac and windows/linux, "Meta+K" and "Ctrl+/" respectively
     await page
-      .getByRole('button', { name: 'Ctrl+/' })
+      .getByRole('button', { name: 'Commands', exact: false })
       .or(page.getByRole('button', { name: '⌘K' }))
       .click()
     await expect(cmdSearchBar).toBeVisible()
@@ -957,13 +1087,13 @@ test.describe('Command bar tests', () => {
       localStorage.setItem(
         'persistCode',
         `const distance = sqrt(20)
-        const part001 = startSketchOn('-XZ')
-  |> startProfileAt([-6.95, 4.98], %)
-  |> line([25.1, 0.41], %)
-  |> line([0.73, -14.93], %)
-  |> line([-23.44, 0.52], %)
-  |> close(%)
-        `
+      const part001 = startSketchOn('-XZ')
+      |> startProfileAt([-6.95, 10.98], %)
+      |> line([25.1, 0.41], %)
+      |> line([0.73, -20.93], %)
+      |> line([-23.44, 0.52], %)
+      |> close(%)
+          `
       )
     })
 
@@ -980,7 +1110,6 @@ test.describe('Command bar tests', () => {
       page.getByRole('button', { name: 'Start Sketch' })
     ).not.toBeDisabled()
     await u.clearCommandLogs()
-    await page.getByText('|> line([0.73, -14.93], %)').click()
     await page.getByRole('button', { name: 'Extrude' }).isEnabled()
 
     let cmdSearchBar = page.getByPlaceholder('Search commands')
@@ -990,6 +1119,12 @@ test.describe('Command bar tests', () => {
     // Search for extrude command and choose it
     await page.getByRole('option', { name: 'Extrude' }).click()
 
+    // Assert that we're on the selection step
+    await expect(page.getByRole('button', { name: 'selection' })).toBeDisabled()
+    // Select a face
+    await page.mouse.move(700, 200)
+    await page.mouse.click(700, 200)
+
     // Assert that we're on the distance step
     await expect(page.getByRole('button', { name: 'distance' })).toBeDisabled()
 
@@ -1023,9 +1158,9 @@ test.describe('Command bar tests', () => {
       `const distance = sqrt(20)
 const distance001 = 5 + 7
 const part001 = startSketchOn('-XZ')
-    |> startProfileAt([-6.95, 4.98], %)
+    |> startProfileAt([-6.95, 10.98], %)
     |> line([25.1, 0.41], %)
-    |> line([0.73, -14.93], %)
+    |> line([0.73, -20.93], %)
     |> line([-23.44, 0.52], %)
     |> close(%)
     |> extrude(distance001, %)`.replace(/(\r\n|\n|\r)/gm, '') // remove newlines
@@ -1216,6 +1351,72 @@ test('ProgramMemory can be serialised', async ({ page }) => {
   })
 })
 
+test('Hovering over 3d features highlights code', async ({ page }) => {
+  const u = getUtils(page)
+  await page.addInitScript(async () => {
+    localStorage.setItem(
+      'persistCode',
+      `const part001 = startSketchOn('-XZ')
+  |> startProfileAt([20, 0], %)
+  |> line([7.13, 4 + 0], %)
+  |> angledLine({ angle: 3 + 0, length: 3.14 + 0 }, %)
+  |> lineTo([20.14 + 0, -0.14 + 0], %)
+  |> xLineTo(29 + 0, %)
+  |> yLine(-3.14 + 0, %, 'a')
+  |> xLine(1.63, %)
+  |> angledLineOfXLength({ angle: 3 + 0, length: 3.14 }, %)
+  |> angledLineOfYLength({ angle: 30, length: 3 + 0 }, %)
+  |> angledLineToX({ angle: 22.14 + 0, to: 12 }, %)
+  |> angledLineToY({ angle: 30, to: 11.14 }, %)
+  |> angledLineThatIntersects({
+        angle: 3.14,
+        intersectTag: 'a',
+        offset: 0
+      }, %)
+  |> tangentialArcTo([13.14 + 0, 13.14], %)
+  |> close(%)
+  |> extrude(5 + 7, %)    
+`
+    )
+  })
+  await page.setViewportSize({ width: 1000, height: 500 })
+  await page.goto('/')
+  await u.waitForAuthSkipAppStart()
+
+  const extrusionTop: Coords2d = [800, 240]
+  const flatExtrusionFace: Coords2d = [960, 160]
+  const arc: Coords2d = [840, 160]
+  const close: Coords2d = [720, 200]
+  const nothing: Coords2d = [600, 200]
+
+  await page.mouse.move(nothing[0], nothing[1])
+  await page.mouse.click(nothing[0], nothing[1])
+
+  await expect(page.getByTestId('hover-highlight')).not.toBeVisible()
+  await page.waitForTimeout(200)
+
+  await page.mouse.move(extrusionTop[0], extrusionTop[1])
+  await expect(page.getByTestId('hover-highlight')).toBeVisible()
+  await page.mouse.move(nothing[0], nothing[1])
+  await expect(page.getByTestId('hover-highlight')).not.toBeVisible()
+
+  await page.mouse.move(arc[0], arc[1])
+  await expect(page.getByTestId('hover-highlight')).toBeVisible()
+  await page.mouse.move(nothing[0], nothing[1])
+  await expect(page.getByTestId('hover-highlight')).not.toBeVisible()
+
+  await page.mouse.move(close[0], close[1])
+  await expect(page.getByTestId('hover-highlight')).toBeVisible()
+  await page.mouse.move(nothing[0], nothing[1])
+  await expect(page.getByTestId('hover-highlight')).not.toBeVisible()
+
+  await page.mouse.move(flatExtrusionFace[0], flatExtrusionFace[1])
+  await expect(page.getByTestId('hover-highlight')).toHaveCount(5) // multiple lines
+  await page.mouse.move(nothing[0], nothing[1])
+  await page.waitForTimeout(100)
+  await expect(page.getByTestId('hover-highlight')).not.toBeVisible()
+})
+
 test("Various pipe expressions should and shouldn't allow edit and or extrude", async ({
   page,
 }) => {
@@ -1350,7 +1551,7 @@ test('Deselecting line tool should mean nothing happens on click', async ({
     `const part001 = startSketchOn('-XZ')`
   )
 
-  await page.waitForTimeout(300)
+  await page.waitForTimeout(600)
 
   let previousCodeContent = await page.locator('.cm-content').innerText()
 
@@ -1649,14 +1850,13 @@ test('Sketch on face', async ({ page }) => {
   await expect(page.locator('.cm-content')).not.toHaveText(previousCodeContent)
   previousCodeContent = await page.locator('.cm-content').innerText()
 
-  await expect(page.locator('.cm-content'))
-    .toContainText(`const part002 = startSketchOn(part001, 'seg01')
-|> startProfileAt([-12.83, 6.7], %)
-|> line([${process?.env?.CI ? 2.28 : 2.28}, -${
-    process?.env?.CI ? 0.07 : 0.07
-  }], %)
-|> line([-3.05, -1.47], %)
-|> close(%)`)
+  const result = makeTemplate`const part002 = startSketchOn(part001, 'seg01')
+  |> startProfileAt([-12.83, 6.7], %)
+  |> line([${[2.28, 2.35]}, -${0.07}], %)
+  |> line([-3.05, -1.47], %)
+  |> close(%)`
+
+  await expect(page.locator('.cm-content')).toHaveText(result.regExp)
 
   // exit sketch
   await u.openAndClearDebugPanel()
@@ -1675,15 +1875,9 @@ test('Sketch on face', async ({ page }) => {
   await expect(page.getByText('Confirm Extrude')).toBeVisible()
   await page.keyboard.press('Enter')
 
-  await expect(page.locator('.cm-content'))
-    .toContainText(`const part002 = startSketchOn(part001, 'seg01')
-|> startProfileAt([-12.83, 6.7], %)
-|> line([${process?.env?.CI ? 2.28 : 2.28}, -${
-    process?.env?.CI ? 0.07 : 0.07
-  }], %)
-|> line([-3.05, -1.47], %)
-|> close(%)
-|> extrude(5 + 7, %)`)
+  const result2 = result.genNext`
+  |> extrude(${[5, 5]} + 7, %)`
+  await expect(page.locator('.cm-content')).toHaveText(result2.regExp)
 })
 
 test('Can code mod a line length', async ({ page }) => {
@@ -1719,6 +1913,7 @@ test('Can code mod a line length', async ({ page }) => {
   const startXPx = 500
   await page.mouse.move(startXPx + PUR * 15, 250 - PUR * 10)
   await page.mouse.click(615, 102)
+  await page.getByRole('button', { name: 'Constrain', exact: true }).click()
   await page.getByRole('button', { name: 'length', exact: true }).click()
   await page.getByText('Add constraining value').click()
 

e2e/playwright/snapshot-tests.spec.ts

@@ -507,7 +507,7 @@ test('Draft rectangles should look right', async ({ page, context }) => {
     `const part001 = startSketchOn('-XZ')`
   )
 
-  await page.waitForTimeout(300) // TODO detect animation ending, or disable animation
+  await page.waitForTimeout(500) // TODO detect animation ending, or disable animation
   await u.closeDebugPanel()
 
   const startXPx = 600
@@ -597,12 +597,15 @@ test.describe('Client side scene scale should match engine scale', () => {
 
     // exit sketch
     await u.openAndClearDebugPanel()
-    await page.getByRole('button', { name: 'Exit Sketch' }).click()
+    await u.doAndWaitForImageDiff(
+      () => page.getByRole('button', { name: 'Exit Sketch' }).click(),
+      200
+    )
 
     // wait for execution done
     await u.expectCmdLog('[data-message-type="execution-done"]')
     await u.clearAndCloseDebugPanel()
-    await page.waitForTimeout(200)
+    await page.waitForTimeout(300)
 
     // second screen shot should look almost identical, i.e. scale should be the same.
     await expect(page).toHaveScreenshot({
@@ -696,12 +699,15 @@ test.describe('Client side scene scale should match engine scale', () => {
 
     // exit sketch
     await u.openAndClearDebugPanel()
-    await page.getByRole('button', { name: 'Exit Sketch' }).click()
+    await u.doAndWaitForImageDiff(
+      () => page.getByRole('button', { name: 'Exit Sketch' }).click(),
+      200
+    )
 
     // wait for execution done
     await u.expectCmdLog('[data-message-type="execution-done"]')
     await u.clearAndCloseDebugPanel()
-    await page.waitForTimeout(200)
+    await page.waitForTimeout(300)
 
     // second screen shot should look almost identical, i.e. scale should be the same.
     await expect(page).toHaveScreenshot({

e2e/playwright/storageStates.ts

@@ -22,11 +22,16 @@ export const TEST_SETTINGS = {
   },
 } satisfies Partial<SaveSettingsPayload>
 
-export const TEST_SETTINGS_ONBOARDING = {
+export const TEST_SETTINGS_ONBOARDING_EXPORT = {
   ...TEST_SETTINGS,
   app: { ...TEST_SETTINGS.app, onboardingStatus: '/export' },
 } satisfies Partial<SaveSettingsPayload>
 
+export const TEST_SETTINGS_ONBOARDING_START = {
+  ...TEST_SETTINGS,
+  app: { ...TEST_SETTINGS.app, onboardingStatus: '' },
+} satisfies Partial<SaveSettingsPayload>
+
 export const TEST_SETTINGS_CORRUPTED = {
   app: {
     theme: Themes.Dark,

e2e/playwright/test-utils.ts

@@ -182,3 +182,76 @@ export function getUtils(page: Page) {
       }),
   }
 }
+
+type TemplateOptions = Array<number | Array<number>>
+
+type makeTemplateReturn = {
+  regExp: RegExp
+  genNext: (
+    templateParts: TemplateStringsArray,
+    ...options: TemplateOptions
+  ) => makeTemplateReturn
+}
+
+const escapeRegExp = (string: string) => {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') // $& means the whole matched string
+}
+
+const _makeTemplate = (
+  templateParts: TemplateStringsArray,
+  ...options: TemplateOptions
+) => {
+  const length = Math.max(...options.map((a) => (Array.isArray(a) ? a[0] : 0)))
+  let reExpTemplate = ''
+  for (let i = 0; i < length; i++) {
+    const currentStr = templateParts.map((str, index) => {
+      const currentOptions = options[index]
+      return (
+        escapeRegExp(str) +
+        String(
+          Array.isArray(currentOptions)
+            ? currentOptions[i]
+            : typeof currentOptions === 'number'
+            ? currentOptions
+            : ''
+        )
+      )
+    })
+    reExpTemplate += '|' + currentStr.join('')
+  }
+  return new RegExp(reExpTemplate)
+}
+
+/**
+ * Tool for making templates to match code snippets in the editor with some fudge factor,
+ * as there's some level of non-determinism.
+ *
+ * Usage is as such:
+ * ```typescript
+ * const result = makeTemplate`const myVar = aFunc(${[1, 2, 3]})`
+ * await expect(page.locator('.cm-content')).toHaveText(result.regExp)
+ * ```
+ * Where the value `1`, `2` or `3` are all valid and should make the test pass.
+ *
+ * The function also has a `genNext` function that allows you to chain multiple templates
+ * together without having to repeat previous parts of the template.
+ * ```typescript
+ * const result2 = result.genNext`const myVar2 = aFunc(${[4, 5, 6]})`
+ * ```
+ */
+export const makeTemplate: (
+  templateParts: TemplateStringsArray,
+  ...values: TemplateOptions
+) => makeTemplateReturn = (templateParts, ...options) => {
+  return {
+    regExp: _makeTemplate(templateParts, ...options),
+    genNext: (
+      nextTemplateParts: TemplateStringsArray,
+      ...nextOptions: TemplateOptions
+    ) =>
+      makeTemplate(
+        [...templateParts, ...nextTemplateParts] as any as TemplateStringsArray,
+        [...options, ...nextOptions] as any
+      ),
+  }
+}

e2e/tauri/specs/auth.e2e.ts

@@ -2,7 +2,7 @@ import { browser, $, expect } from '@wdio/globals'
 import fs from 'fs/promises'
 
 const documentsDir = `${process.env.HOME}/Documents`
-const userSettingsFile = `${process.env.HOME}/.config/dev.zoo.modeling-app/user.toml`
+const userSettingsDir = `${process.env.HOME}/.config/dev.zoo.modeling-app`
 const defaultProjectDir = `${documentsDir}/zoo-modeling-app-projects`
 const newProjectDir = `${documentsDir}/a-different-directory`
 const userCodeDir = '/tmp/kittycad_user_code'
@@ -29,8 +29,10 @@ describe('ZMA (Tauri, Linux)', () => {
     // Clean up filesystem from previous tests
     await new Promise((resolve) => setTimeout(resolve, 100))
     await fs.rm(defaultProjectDir, { force: true, recursive: true })
+    await fs.rm(newProjectDir, { force: true, recursive: true })
     await fs.rm(userCodeDir, { force: true })
-    await fs.rm(userSettingsFile, { force: true })
+    await fs.rm(userSettingsDir, { force: true, recursive: true })
+    await fs.mkdir(defaultProjectDir, { recursive: true })
     await fs.mkdir(newProjectDir, { recursive: true })
 
     const signInButton = await $('[data-testid="sign-in-button"]')
@@ -70,6 +72,7 @@ describe('ZMA (Tauri, Linux)', () => {
     console.log(cr.status)
 
     // Now should be signed in
+    await new Promise((resolve) => setTimeout(resolve, 10000))
     const newFileButton = await $('[data-testid="home-new-file"]')
     expect(await newFileButton.getText()).toEqual('New project')
   })
@@ -117,8 +120,8 @@ describe('ZMA (Tauri, Linux)', () => {
   it('opens the new file and expects a loading stream', async () => {
     const projectLink = await $('[data-testid="project-link"]')
     await click(projectLink)
-    const loadingText = await $('[data-testid="loading-stream"]')
-    expect(await loadingText.getText()).toContain('Loading stream...')
+    const errorText = await $('[data-testid="unexpected-error"]')
+    expect(await errorText.getText()).toContain('unexpected error')
     await browser.execute('window.location.href = "tauri://localhost/home"')
   })
 

index.html

@@ -15,7 +15,7 @@
     <script
       defer
       data-domain="app.zoo.dev"
-      src="https://plausible.corp.zoo.dev/js/script.js"
+      src="https://plausible.corp.zoo.dev/js/script.tagged-events.js"
     ></script>
     <title>Zoo Modeling App</title>
   </head>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "untitled-app",
-  "version": "0.19.4",
+  "version": "0.21.2",
   "private": true,
   "dependencies": {
     "@codemirror/autocomplete": "^6.16.0",
@@ -10,7 +10,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.19",
     "@headlessui/tailwindcss": "^0.2.0",
-    "@kittycad/lib": "^0.0.58",
+    "@kittycad/lib": "^0.0.60",
     "@lezer/javascript": "^1.4.9",
     "@open-rpc/client-js": "^1.8.1",
     "@react-hook/resize-observer": "^1.2.6",
@@ -123,6 +123,7 @@
     "@tauri-apps/cli": "^2.0.0-beta.13",
     "@types/crypto-js": "^4.2.2",
     "@types/debounce-promise": "^3.1.9",
+    "@types/mocha": "^10.0.6",
     "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.4",
     "@types/react-modal": "^3.16.3",

playwright.config.ts

@@ -27,7 +27,7 @@ export default defineConfig({
     baseURL: 'http://localhost:3000',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    trace: 'retain-on-failure',
   },
 
   /* Configure projects for major browsers */

src-tauri/Cargo.toml

@@ -17,6 +17,7 @@ tauri-build = { version = "2.0.0-beta.13", features = [] }
 anyhow = "1"
 kcl-lib = { version = "0.1.53", path = "../src/wasm-lib/kcl" }
 kittycad = "0.3.0"
+log = "0.4.21"
 oauth2 = "4.4.2"
 serde_json = "1.0"
 tauri = { version = "2.0.0-beta.15", features = [ "devtools", "unstable"] }
@@ -25,12 +26,14 @@ tauri-plugin-deep-link = { version = "2.0.0-beta.3" }
 tauri-plugin-dialog = { version = "2.0.0-beta.6" }
 tauri-plugin-fs = { version = "2.0.0-beta.6" }
 tauri-plugin-http = { version = "2.0.0-beta.6" }
+tauri-plugin-log = { version = "2.0.0-beta.4" }
 tauri-plugin-os = { version = "2.0.0-beta.2" }
 tauri-plugin-process = { version = "2.0.0-beta.2" }
 tauri-plugin-shell = { version = "2.0.0-beta.2" }
 tauri-plugin-updater = { version = "2.0.0-beta.4" }
 tokio = { version = "1.37.0", features = ["time", "fs", "process"] }
 toml = "0.8.2"
+url = "2.5.0"
 
 [features]
 default = ["updater"]

src-tauri/Info.plist

@@ -2,6 +2,24 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
     <dict>
+        <key>CFBundleDevelopmentRegion</key>
+        <string>en</string>
+        <key>NSPrincipalClass</key>
+        <string>NSApplication</string>
+        <key>CFBundlePackageType</key>
+        <string>APPL</string>
+        <key>NSDesktopFolderUsageDescription</key>
+        <string>Zoo Modeling App accesses the Desktop to load and save your project files and/or exported files here</string>
+        <key>NSDocumentsFolderUsageDescription</key>
+        <string>Zoo Modeling App accesses the Documents folder to load and save your project files and/or exported files here</string>
+        <key>NSDownloadsFolderUsageDescription</key>
+        <string>Zoo Modeling App accesses the Downloads folder to load and save your project files and/or exported files here</string>
+        <key>ITSAppUsesNonExemptEncryption</key>
+        <false/>
+        <key>DTXcode</key>
+        <string>1501</string>
+        <key>DTXcodeBuild</key>
+        <string>15A507</string>
         <key>CFBundleURLTypes</key>
         <array>
             <dict>
@@ -14,14 +32,178 @@
                 </array>
             </dict>
         </array>
+        <key>LSFileQuarantineEnabled</key>
+        <false/>
+        <key>CFBundleDocumentTypes</key>
+        <array>
+            <dict>
+                <key>LSItemContentTypes</key>
+                <array>
+                    <string>dev.zoo.kcl</string>
+                </array>
+                <key>CFBundleTypeName</key>
+                <string>KCL</string>
+                <key>CFBundleTypeRole</key>
+                <string>Editor</string>
+                <key>LSTypeIsPackage</key>
+                <false/>
+                <key>LSHandlerRank</key>
+                <string>Owner</string>
+            </dict>
+            <dict>
+                <key>LSItemContentTypes</key>
+                <array>
+                    <string>dev.zoo.toml</string>
+                </array>
+                <key>CFBundleTypeName</key>
+                <string>TOML</string>
+                <key>CFBundleTypeRole</key>
+                <string>Editor</string>
+                <key>LSTypeIsPackage</key>
+                <false/>
+                <key>LSHandlerRank</key>
+                <string>Default</string>
+            </dict>
+            <dict>
+                <key>LSItemContentTypes</key>
+                <array>
+                    <string>dev.zoo.gltf</string>
+                </array>
+                <key>CFBundleTypeName</key>
+                <string>glTF</string>
+                <key>CFBundleTypeRole</key>
+                <string>Editor</string>
+                <key>LSTypeIsPackage</key>
+                <false/>
+                <key>LSHandlerRank</key>
+                <string>Default</string>
+            </dict>
+            <dict>
+                <key>LSItemContentTypes</key>
+                <array>
+                    <string>dev.zoo.glb</string>
+                </array>
+                <key>CFBundleTypeName</key>
+                <string>glb</string>
+                <key>CFBundleTypeRole</key>
+                <string>Editor</string>
+                <key>LSTypeIsPackage</key>
+                <false/>
+                <key>LSHandlerRank</key>
+                <string>Default</string>
+            </dict>
+            <dict>
+                <key>LSItemContentTypes</key>
+                <array>
+                    <string>dev.zoo.step</string>
+                </array>
+                <key>CFBundleTypeName</key>
+                <string>STEP</string>
+                <key>CFBundleTypeRole</key>
+                <string>Editor</string>
+                <key>LSTypeIsPackage</key>
+                <false/>
+                <key>LSHandlerRank</key>
+                <string>Default</string>
+            </dict>
+            <dict>
+                <key>LSItemContentTypes</key>
+                <array>
+                    <string>dev.zoo.fbx</string>
+                </array>
+                <key>CFBundleTypeName</key>
+                <string>FBX</string>
+                <key>CFBundleTypeRole</key>
+                <string>Editor</string>
+                <key>LSTypeIsPackage</key>
+                <false/>
+                <key>LSHandlerRank</key>
+                <string>Default</string>
+            </dict>
+            <dict>
+                <key>LSItemContentTypes</key>
+                <array>
+                    <string>dev.zoo.sldprt</string>
+                </array>
+                <key>CFBundleTypeName</key>
+                <string>Solidworks Part</string>
+                <key>CFBundleTypeRole</key>
+                <string>Viewer</string>
+                <key>LSTypeIsPackage</key>
+                <false/>
+                <key>LSHandlerRank</key>
+                <string>Default</string>
+            </dict>
+            <dict>
+                <key>LSItemContentTypes</key>
+                <array>
+                    <string>public.geometry-definition-format</string>
+                </array>
+                <key>CFBundleTypeName</key>
+                <string>OBJ</string>
+                <key>CFBundleTypeRole</key>
+                <string>Editor</string>
+                <key>LSTypeIsPackage</key>
+                <false/>
+                <key>LSHandlerRank</key>
+                <string>Default</string>
+            </dict>
+            <dict>
+                <key>LSItemContentTypes</key>
+                <array>
+                    <string>public.polygon-file-format</string>
+                </array>
+                <key>CFBundleTypeName</key>
+                <string>PLY</string>
+                <key>CFBundleTypeRole</key>
+                <string>Editor</string>
+                <key>LSTypeIsPackage</key>
+                <false/>
+                <key>LSHandlerRank</key>
+                <string>Default</string>
+            </dict>
+            <dict>
+                <key>LSItemContentTypes</key>
+                <array>
+                    <string>public.standard-tesselated-geometry-format</string>
+                </array>
+                <key>CFBundleTypeName</key>
+                <string>STL</string>
+                <key>CFBundleTypeRole</key>
+                <string>Editor</string>
+                <key>LSTypeIsPackage</key>
+                <false/>
+                <key>LSHandlerRank</key>
+                <string>Default</string>
+            </dict>
+            <dict>
+                <key>LSItemContentTypes</key>
+                <array>
+                    <string>public.folder</string>
+                </array>
+                <key>CFBundleTypeName</key>
+                <string>Folders</string>
+                <key>CFBundleTypeRole</key>
+                <string>Viewer</string>
+                <key>LSHandlerRank</key>
+                <string>Alternate</string>
+            </dict>
+        </array>
         <key>UTExportedTypeDeclarations</key>
         <array>
             <dict>
                 <key>UTTypeIdentifier</key>
                 <string>dev.zoo.kcl</string>
+                <key>UTTypeReferenceURL</key>
+                <string>https://zoo.dev/docs/kcl</string>
                 <key>UTTypeConformsTo</key>
                 <array>
                     <string>public.source-code</string>
+                    <string>public.data</string>
+                    <string>public.text</string>
+                    <string>public.plain-text</string>
+                    <string>public.3d-content</string>
+                    <string>public.script</string>
                 </array>
                 <key>UTTypeDescription</key>
                 <string>KCL (KittyCAD Language) document</string>
@@ -37,6 +219,158 @@
                     </array>
                 </dict>
             </dict>
+            <dict>
+                <key>UTTypeIdentifier</key>
+                <string>dev.zoo.gltf</string>
+                <key>UTTypeReferenceURL</key>
+                <string>https://registry.khronos.org/glTF/specs/2.0/glTF-2.0.html</string>
+                <key>UTTypeConformsTo</key>
+                <array>
+                    <string>public.data</string>
+                    <string>public.text</string>
+                    <string>public.plain-text</string>
+                    <string>public.3d-content</string>
+                    <string>public.json</string>
+                </array>
+                <key>UTTypeDescription</key>
+                <string>Graphics Library Transmission Format (glTF)</string>
+                <key>UTTypeTagSpecification</key>
+                <dict>
+                    <key>public.filename-extension</key>
+                    <array>
+                        <string>gltf</string>
+                    </array>
+                    <key>public.mime-type</key>
+                    <array>
+                        <string>model/gltf+json</string>
+                    </array>
+                </dict>
+            </dict>
+            <dict>
+                <key>UTTypeIdentifier</key>
+                <string>dev.zoo.glb</string>
+                <key>UTTypeReferenceURL</key>
+                <string>https://registry.khronos.org/glTF/specs/2.0/glTF-2.0.html</string>
+                <key>UTTypeConformsTo</key>
+                <array>
+                    <string>public.data</string>
+                    <string>public.3d-content</string>
+                </array>
+                <key>UTTypeDescription</key>
+                <string>Graphics Library Transmission Format (glTF) binary</string>
+                <key>UTTypeTagSpecification</key>
+                <dict>
+                    <key>public.filename-extension</key>
+                    <array>
+                        <string>glb</string>
+                    </array>
+                    <key>public.mime-type</key>
+                    <array>
+                        <string>model/gltf-binary</string>
+                    </array>
+                </dict>
+            </dict>
+            <dict>
+                <key>UTTypeIdentifier</key>
+                <string>dev.zoo.step</string>
+                <key>UTTypeReferenceURL</key>
+                <string>https://www.loc.gov/preservation/digital/formats/fdd/fdd000448.shtml</string>
+                <key>UTTypeConformsTo</key>
+                <array>
+                    <string>public.data</string>
+                    <string>public.3d-content</string>
+                    <string>public.text</string>
+                    <string>public.plain-text</string>
+                </array>
+                <key>UTTypeDescription</key>
+                <string>STEP-file, ISO 10303-21</string>
+                <key>UTTypeTagSpecification</key>
+                <dict>
+                    <key>public.filename-extension</key>
+                    <array>
+                        <string>step</string>
+                        <string>stp</string>
+                    </array>
+                    <key>public.mime-type</key>
+                    <array>
+                        <string>model/step</string>
+                    </array>
+                </dict>
+            </dict>
+            <dict>
+                <key>UTTypeIdentifier</key>
+                <string>dev.zoo.sldprt</string>
+                <key>UTTypeReferenceURL</key>
+                <string>https://docs.fileformat.com/cad/sldprt/</string>
+                <key>UTTypeConformsTo</key>
+                <array>
+                    <string>public.data</string>
+                    <string>public.3d-content</string>
+                </array>
+                <key>UTTypeDescription</key>
+                <string>Solidworks Part</string>
+                <key>UTTypeTagSpecification</key>
+                <dict>
+                    <key>public.filename-extension</key>
+                    <array>
+                        <string>sldprt</string>
+                    </array>
+                    <key>public.mime-type</key>
+                    <array>
+                        <string>model/vnd.solidworks.sldprt</string>
+                    </array>
+                </dict>
+            </dict>
+            <dict>
+                <key>UTTypeIdentifier</key>
+                <string>dev.zoo.fbx</string>
+                <key>UTTypeReferenceURL</key>
+                <string>https://en.wikipedia.org/wiki/FBX</string>
+                <key>UTTypeConformsTo</key>
+                <array>
+                    <string>public.data</string>
+                    <string>public.3d-content</string>
+                </array>
+                <key>UTTypeDescription</key>
+                <string>Autodesk Filmbox (FBX) format</string>
+                <key>UTTypeTagSpecification</key>
+                <dict>
+                    <key>public.filename-extension</key>
+                    <array>
+                        <string>fbx</string>
+                        <string>fbxb</string>
+                    </array>
+                    <key>public.mime-type</key>
+                    <array>
+                        <string>model/vnd.autodesk.fbx</string>
+                    </array>
+                </dict>
+            </dict>
+            <dict>
+                <key>UTTypeIdentifier</key>
+                <string>dev.zoo.toml</string>
+                <key>UTTypeReferenceURL</key>
+                <string>https://toml.io/en/</string>
+                <key>UTTypeConformsTo</key>
+                <array>
+                    <string>public.data</string>
+                    <string>public.text</string>
+                    <string>public.plain-text</string>
+                </array>
+                <key>UTTypeDescription</key>
+                <string>Tom's Obvious Minimal Language</string>
+                <key>UTTypeTagSpecification</key>
+                <dict>
+                    <key>public.filename-extension</key>
+                    <array>
+                        <string>kcl</string>
+                    </array>
+                    <key>public.mime-type</key>
+                    <array>
+                        <string>text/toml</string>
+                    </array>
+                </dict>
+            </dict>
         </array>
     </dict>
 </plist>

src-tauri/capabilities/desktop.json

@@ -9,6 +9,7 @@
   "permissions": [
     "cli:default",
     "deep-link:default",
+    "log:default",
     "path:default",
     "event:default",
     "window:default",

src-tauri/entitlements/app-store.entitlements

@@ -4,10 +4,10 @@
     <dict>
         <key>com.apple.security.app-sandbox</key>
         <true/>
-        <key>com.apple.security.network.client</key>
-        <true/>
         <key>com.apple.security.network.server</key>
         <true/>
+        <key>com.apple.security.network.client</key>
+        <true/>
         <key>com.apple.security.files.user-selected.read-write</key>
         <true/>
         <key>com.apple.security.files.downloads.read-write</key>

src-tauri/src/main.rs

@@ -12,7 +12,7 @@ use anyhow::Result;
 use kcl_lib::settings::types::{
     file::{FileEntry, Project, ProjectRoute, ProjectState},
     project::ProjectConfiguration,
-    Configuration, DEFAULT_PROJECT_KCL_FILE,
+    Configuration,
 };
 use oauth2::TokenResponse;
 use tauri::{ipc::InvokeError, Manager};
@@ -226,7 +226,7 @@ async fn read_dir_recursive(path: &str) -> Result<FileEntry, InvokeError> {
 /// The string returned from this method is the access token.
 #[tauri::command]
 async fn login(app: tauri::AppHandle, host: &str) -> Result<String, InvokeError> {
-    println!("Logging in...");
+    log::debug!("Logging in...");
     // Do an OAuth 2.0 Device Authorization Grant dance to get a token.
     let device_auth_url = oauth2::DeviceAuthorizationUrl::new(format!("{host}/oauth2/device/auth"))
         .map_err(|e| InvokeError::from_anyhow(e.into()))?;
@@ -265,7 +265,7 @@ async fn login(app: tauri::AppHandle, host: &str) -> Result<String, InvokeError>
     // and bypass the shell::open call as it fails on GitHub Actions.
     let e2e_tauri_enabled = env::var("E2E_TAURI_ENABLED").is_ok();
     if e2e_tauri_enabled {
-        println!("E2E_TAURI_ENABLED is set, won't open {} externally", auth_uri.secret());
+        log::warn!("E2E_TAURI_ENABLED is set, won't open {} externally", auth_uri.secret());
         tokio::fs::write("/tmp/kittycad_user_code", details.user_code().secret())
             .await
             .map_err(|e| InvokeError::from_anyhow(e.into()))?;
@@ -308,7 +308,7 @@ async fn get_user(token: &str, hostname: &str) -> Result<kittycad::types::User,
             baseurl = format!("http://{host}")
         }
     }
-    println!("Getting user info...");
+    log::debug!("Getting user info...");
 
     // use kittycad library to fetch the user info from /user/me
     let mut client = kittycad::Client::new(token);
@@ -334,7 +334,7 @@ fn show_in_folder(path: &str) -> Result<(), InvokeError> {
     #[cfg(not(unix))]
     {
         Command::new("explorer")
-            .args(["/select,", &path]) // The comma after select is not a typo
+            .args(["/select,", path]) // The comma after select is not a typo
             .spawn()
             .map_err(|e| InvokeError::from_anyhow(e.into()))?;
     }
@@ -342,7 +342,7 @@ fn show_in_folder(path: &str) -> Result<(), InvokeError> {
     #[cfg(unix)]
     {
         Command::new("open")
-            .args(["-R", &path])
+            .args(["-R", path])
             .spawn()
             .map_err(|e| InvokeError::from_anyhow(e.into()))?;
     }
@@ -350,6 +350,33 @@ fn show_in_folder(path: &str) -> Result<(), InvokeError> {
     Ok(())
 }
 
+#[allow(dead_code)]
+fn open_url_sync(app: &tauri::AppHandle, url: &url::Url) {
+    log::debug!("Opening URL: {:?}", url);
+    let cloned_url = url.clone();
+    let runner: tauri::async_runtime::JoinHandle<Result<ProjectState>> = tauri::async_runtime::spawn(async move {
+        let url_str = cloned_url.path().to_string();
+
+        log::debug!("Opening URL path : {}", url_str);
+        let path = Path::new(url_str.as_str());
+        ProjectState::new_from_path(path.to_path_buf()).await
+    });
+
+    // Block on the handle.
+    match tauri::async_runtime::block_on(runner) {
+        Ok(Ok(store)) => {
+            // Create a state object to hold the project.
+            app.manage(state::Store::new(store));
+        }
+        Err(e) => {
+            log::warn!("Error opening URL:{} {:?}", url, e);
+        }
+        Ok(Err(e)) => {
+            log::warn!("Error opening URL:{} {:?}", url, e);
+        }
+    }
+}
+
 fn main() -> Result<()> {
     tauri::Builder::default()
         .invoke_handler(tauri::generate_handler![
@@ -375,6 +402,15 @@ fn main() -> Result<()> {
         .plugin(tauri_plugin_dialog::init())
         .plugin(tauri_plugin_fs::init())
         .plugin(tauri_plugin_http::init())
+        .plugin(
+            tauri_plugin_log::Builder::new()
+                .targets([
+                    tauri_plugin_log::Target::new(tauri_plugin_log::TargetKind::Stdout),
+                    tauri_plugin_log::Target::new(tauri_plugin_log::TargetKind::LogDir { file_name: None }),
+                ])
+                .level(log::LevelFilter::Debug)
+                .build(),
+        )
         .plugin(tauri_plugin_os::init())
         .plugin(tauri_plugin_process::init())
         .plugin(tauri_plugin_shell::init())
@@ -410,6 +446,7 @@ fn main() -> Result<()> {
                     if let Some(source_arg) = matches.args.get("source") {
                         // We don't do an else here because this can be null.
                         if let Some(value) = source_arg.value.as_str() {
+                            log::info!("Got path in cli argument: {}", value);
                             source_path = Some(Path::new(value).to_path_buf());
                         }
                     }
@@ -419,6 +456,10 @@ fn main() -> Result<()> {
                 }
             }
 
+            if verbose {
+                log::debug!("Verbose mode enabled.");
+            }
+
             // If we have a source path to open, make sure it exists.
             let Some(source_path) = source_path else {
                 // The user didn't provide a source path to open.
@@ -436,74 +477,7 @@ fn main() -> Result<()> {
             }
 
             let runner: tauri::async_runtime::JoinHandle<Result<ProjectState>> =
-                tauri::async_runtime::spawn(async move {
-                    // Fix for "." path, which is the current directory.
-                    let source_path = if source_path == Path::new(".") {
-                        std::env::current_dir()
-                            .map_err(|e| anyhow::anyhow!("Error getting the current directory: {:?}", e))?
-                    } else {
-                        source_path
-                    };
-
-                    // If the path does not start with a slash, it is a relative path.
-                    // We need to convert it to an absolute path.
-                    let source_path = if source_path.is_relative() {
-                        std::env::current_dir()
-                            .map_err(|e| anyhow::anyhow!("Error getting the current directory: {:?}", e))?
-                            .join(source_path)
-                    } else {
-                        source_path
-                    };
-
-                    // If the path is a directory, let's assume it is a project directory.
-                    if source_path.is_dir() {
-                        // Load the details about the project from the path.
-                        let project = Project::from_path(&source_path).await.map_err(|e| {
-                            anyhow::anyhow!("Error loading project from path {}: {:?}", source_path.display(), e)
-                        })?;
-
-                        if verbose {
-                            println!("Project loaded from path: {}", source_path.display());
-                        }
-
-                        // Create the default file in the project.
-                        // Write the initial project file.
-                        let project_file = source_path.join(DEFAULT_PROJECT_KCL_FILE);
-                        tokio::fs::write(&project_file, vec![]).await?;
-
-                        return Ok(ProjectState {
-                            project,
-                            current_file: Some(project_file.display().to_string()),
-                        });
-                    }
-
-                    // We were given a file path, not a directory.
-                    // Let's get the parent directory of the file.
-                    let parent = source_path.parent().ok_or_else(|| {
-                        anyhow::anyhow!(
-                            "Error getting the parent directory of the file: {}",
-                            source_path.display()
-                        )
-                    })?;
-
-                    // Load the details about the project from the parent directory.
-                    let project = Project::from_path(&parent).await.map_err(|e| {
-                        anyhow::anyhow!("Error loading project from path {}: {:?}", source_path.display(), e)
-                    })?;
-
-                    if verbose {
-                        println!(
-                            "Project loaded from path: {}, current file: {}",
-                            parent.display(),
-                            source_path.display()
-                        );
-                    }
-
-                    Ok(ProjectState {
-                        project,
-                        current_file: Some(source_path.display().to_string()),
-                    })
-                });
+                tauri::async_runtime::spawn(async move { ProjectState::new_from_path(source_path).await });
 
             // Block on the handle.
             let store = tauri::async_runtime::block_on(runner)??;
@@ -512,13 +486,30 @@ fn main() -> Result<()> {
             app.manage(state::Store::new(store));
 
             // Listen on the deep links.
-            app.listen("deep-link://new-url", |url| {
-                dbg!(url);
+            app.listen("deep-link://new-url", |event| {
+                log::info!("got deep-link url: {:?}", event);
+                // TODO: open_url_sync(app.handle(), event.url);
             });
 
             Ok(())
         })
-        .run(tauri::generate_context!())?;
+        .build(tauri::generate_context!())?
+        .run(
+            #[allow(unused_variables)]
+            |app, event| {
+                #[cfg(any(target_os = "macos", target_os = "ios"))]
+                if let tauri::RunEvent::Opened { urls } = event {
+                    log::info!("Opened URLs: {:?}", urls);
+
+                    // Handle the first URL.
+                    // TODO: do we want to handle more than one URL?
+                    // Under what conditions would we even have more than one?
+                    if let Some(url) = urls.first() {
+                        open_url_sync(app, url);
+                    }
+                }
+            },
+        );
 
     Ok(())
 }

src-tauri/tauri.app-store.conf.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../node_modules/@tauri-apps/cli/schema.json",
+  "bundle": {
+    "macOS": {
+      "entitlements": "entitlements/app-store.entitlements"
+    }
+  }
+}

src-tauri/tauri.conf.json

@@ -37,9 +37,7 @@
       }
     },
     "longDescription": "",
-    "macOS": {
-      "entitlements": "entitlements/Zoo Modeling App.entitlements"
-    },
+    "macOS": {},
     "resources": [],
     "shortDescription": "",
     "targets": "all"
@@ -56,6 +54,8 @@
         },
         {
           "name": "source",
+          "description": "The file or directory to open",
+          "required": false,
           "index": 1,
           "takesValue": true
         }
@@ -64,7 +64,9 @@
     },
     "deep-link": {
       "domains": [
-        { "host": "app.zoo.dev" }
+        {
+          "host": "app.zoo.dev"
+        }
       ]
     },
     "shell": {
@@ -72,5 +74,5 @@
     }
   },
   "productName": "Zoo Modeling App",
-  "version": "0.19.4"
+  "version": "0.21.2"
 }

src-tauri/tauri.release.conf.json

@@ -5,7 +5,45 @@
       "certificateThumbprint": "F4C9A52FF7BC26EE5E054946F6B11DEEA94C748D",
       "digestAlgorithm": "sha256",
       "timestampUrl": "http://timestamp.digicert.com"
-    }
+    },
+    "fileAssociations": [
+      {
+        "ext": ["kcl"],
+        "mimeType": "text/vnd.zoo.kcl"
+      },
+      {
+        "ext": ["obj"],
+        "mimeType": "model/obj"
+      },
+      {
+        "ext": ["gltf"],
+        "mimeType": "model/gltf+json"
+      },
+      {
+        "ext": ["glb"],
+        "mimeType": "model/gltf+binary"
+      },
+      {
+        "ext": ["fbx", "fbxb"],
+        "mimeType": "model/fbx"
+      },
+      {
+        "ext": ["stl"],
+        "mimeType": "model/stl"
+      },
+      {
+        "ext": ["ply"],
+        "mimeType": "model/ply"
+      },
+      {
+        "ext": ["step", "stp"],
+        "mimeType": "model/step"
+      },
+      {
+        "ext": ["sldprt"],
+        "mimeType": "model/sldprt"
+      }
+    ]
   },
   "plugins": {
     "updater": {

src/Toolbar.tsx

@@ -4,7 +4,6 @@ import { engineCommandManager, kclManager } from 'lib/singletons'
 import { useModelingContext } from 'hooks/useModelingContext'
 import { useCommandsContext } from 'hooks/useCommandsContext'
 import { ActionButton } from 'components/ActionButton'
-import usePlatform from 'hooks/usePlatform'
 import { isSingleCursorInPipe } from 'lang/queryAst'
 import { useKclContext } from 'lang/KclProvider'
 import {
@@ -12,18 +11,18 @@ import {
   useNetworkStatus,
 } from 'components/NetworkHealthIndicator'
 import { useStore } from 'useStore'
+import { ActionButtonDropdown } from 'components/ActionButtonDropdown'
 
 export const Toolbar = () => {
-  const platform = usePlatform()
   const { commandBarSend } = useCommandsContext()
   const { state, send, context } = useModelingContext()
   const toolbarButtonsRef = useRef<HTMLUListElement>(null)
   const iconClassName =
-    'group-disabled:text-chalkboard-50 group-enabled:group-hover:!text-chalkboard-10 group-pressed:!text-chalkboard-10'
+    'group-disabled:text-chalkboard-50 group-enabled:group-hover:!text-primary dark:group-enabled:group-hover:!text-inherit group-pressed:!text-chalkboard-10 group-ui-open:!text-chalkboard-10 dark:group-ui-open:!text-chalkboard-10'
   const bgClassName =
-    'group-disabled:!bg-transparent group-enabled:group-hover:bg-primary group-pressed:bg-primary'
+    'group-disabled:!bg-transparent group-enabled:group-hover:bg-primary/10 dark:group-enabled:group-hover:bg-primary group-pressed:bg-primary group-ui-open:bg-primary'
   const buttonClassName =
-    'bg-chalkboard-10 dark:bg-chalkboard-100 hover:bg-chalkboard-10 dark:hover:bg-chalkboard-100'
+    'bg-chalkboard-10 dark:bg-chalkboard-100 enabled:hover:bg-chalkboard-10 dark:enabled:hover:bg-chalkboard-100 pressed:!border-primary ui-open:!border-primary'
   const pathId = useMemo(() => {
     if (!isSingleCursorInPipe(context.selectionRanges, kclManager.ast)) {
       return false
@@ -59,10 +58,7 @@ export const Toolbar = () => {
         {...props}
         ref={toolbarButtonsRef}
         onWheel={handleToolbarButtonsWheelEvent}
-        className={
-          'm-0 py-1 rounded-l-sm flex gap-2 items-center overflow-x-auto ' +
-          className
-        }
+        className={'m-0 py-1 rounded-l-sm flex gap-2 items-center ' + className}
         style={{ scrollbarWidth: 'thin' }}
       >
         {state.nextEvents.includes('Enter sketch') && (
@@ -73,7 +69,7 @@ export const Toolbar = () => {
               onClick={() =>
                 send({ type: 'Enter sketch', data: { forceNewSketch: true } })
               }
-              icon={{
+              iconStart={{
                 icon: 'sketch',
                 iconClassName,
                 bgClassName,
@@ -90,7 +86,7 @@ export const Toolbar = () => {
               className={buttonClassName}
               Element="button"
               onClick={() => send({ type: 'Enter sketch' })}
-              icon={{
+              iconStart={{
                 icon: 'sketch',
                 iconClassName,
                 bgClassName,
@@ -107,7 +103,7 @@ export const Toolbar = () => {
               className={buttonClassName}
               Element="button"
               onClick={() => send({ type: 'Cancel' })}
-              icon={{
+              iconStart={{
                 icon: 'arrowLeft',
                 iconClassName,
                 bgClassName,
@@ -130,7 +126,7 @@ export const Toolbar = () => {
                     : send('Equip Line tool')
                 }
                 aria-pressed={state?.matches('Sketch.Line tool')}
-                icon={{
+                iconStart={{
                   icon: 'line',
                   iconClassName,
                   bgClassName,
@@ -150,7 +146,7 @@ export const Toolbar = () => {
                     : send('Equip tangential arc to')
                 }
                 aria-pressed={state.matches('Sketch.Tangential arc to')}
-                icon={{
+                iconStart={{
                   icon: 'arc',
                   iconClassName,
                   bgClassName,
@@ -174,7 +170,7 @@ export const Toolbar = () => {
                     : send('Equip rectangle tool')
                 }
                 aria-pressed={state.matches('Sketch.Rectangle tool')}
-                icon={{
+                iconStart={{
                   icon: 'rectangle',
                   iconClassName,
                   bgClassName,
@@ -196,52 +192,54 @@ export const Toolbar = () => {
           </>
         )}
         {state.matches('Sketch.SketchIdle') &&
-          state.nextEvents
-            .filter(
-              (eventName) =>
-                eventName.includes('Make segment') ||
-                eventName.includes('Constrain')
-            )
-            .sort((a, b) => {
-              const aisEnabled = state.nextEvents
-                .filter((event) => state.can(event as any))
-                .includes(a)
-              const bIsEnabled = state.nextEvents
-                .filter((event) => state.can(event as any))
-                .includes(b)
-              if (aisEnabled && !bIsEnabled) {
-                return -1
-              }
-              if (!aisEnabled && bIsEnabled) {
-                return 1
-              }
-              return 0
-            })
-            .map((eventName) => (
-              <li className="contents" key={eventName}>
-                <ActionButton
-                  className={buttonClassName}
-                  Element="button"
-                  key={eventName}
-                  onClick={() => send(eventName)}
-                  disabled={
+          state.nextEvents.filter(
+            (eventName) =>
+              eventName.includes('Make segment') ||
+              eventName.includes('Constrain')
+          ).length > 0 && (
+            <ActionButtonDropdown
+              splitMenuItems={state.nextEvents
+                .filter(
+                  (eventName) =>
+                    eventName.includes('Make segment') ||
+                    eventName.includes('Constrain')
+                )
+                .sort((a, b) => {
+                  const aisEnabled = state.nextEvents
+                    .filter((event) => state.can(event as any))
+                    .includes(a)
+                  const bIsEnabled = state.nextEvents
+                    .filter((event) => state.can(event as any))
+                    .includes(b)
+                  if (aisEnabled && !bIsEnabled) {
+                    return -1
+                  }
+                  if (!aisEnabled && bIsEnabled) {
+                    return 1
+                  }
+                  return 0
+                })
+                .map((eventName) => ({
+                  label: eventName
+                    .replace('Make segment ', '')
+                    .replace('Constrain ', ''),
+                  onClick: () => send(eventName),
+                  disabled:
                     !state.nextEvents
                       .filter((event) => state.can(event as any))
-                      .includes(eventName) || disableAllButtons
-                  }
-                  title={eventName}
-                  icon={{
-                    icon: 'line',
-                    iconClassName,
-                    bgClassName,
-                  }}
-                >
-                  {eventName
-                    .replace('Make segment ', '')
-                    .replace('Constrain ', '')}
-                </ActionButton>
-              </li>
-            ))}
+                      .includes(eventName) || disableAllButtons,
+                }))}
+              className={buttonClassName}
+              Element="button"
+              iconStart={{
+                icon: 'dimension',
+                iconClassName,
+                bgClassName,
+              }}
+            >
+              Constrain
+            </ActionButtonDropdown>
+          )}
         {state.matches('idle') && (
           <li className="contents">
             <ActionButton
@@ -259,7 +257,7 @@ export const Toolbar = () => {
                   ? 'extrude'
                   : 'sketches need to be closed, or not already extruded'
               }
-              icon={{
+              iconStart={{
                 icon: 'extrude',
                 iconClassName,
                 bgClassName,
@@ -274,17 +272,8 @@ export const Toolbar = () => {
   }
 
   return (
-    <div className="max-w-full flex items-stretch rounded-l-sm rounded-r-full bg-chalkboard-10/80 dark:bg-chalkboard-110/70 relative">
-      <menu className="flex-1 pl-1 pr-2 py-0 overflow-hidden rounded-l-sm whitespace-nowrap border-solid border border-primary/30 dark:border-chalkboard-90 border-r-0">
-        <ToolbarButtons />
-      </menu>
-      <ActionButton
-        Element="button"
-        onClick={() => commandBarSend({ type: 'Open' })}
-        className="rounded-r-full pr-4 self-stretch border-primary/30 hover:border-primary dark:border-chalkboard-80 dark:bg-chalkboard-80 text-primary"
-      >
-        {platform === 'macos' ? '⌘K' : 'Ctrl+/'}
-      </ActionButton>
-    </div>
+    <menu className="max-w-full whitespace-nowrap rounded px-1.5 py-0.5 backdrop-blur-sm bg-chalkboard-10/80 dark:bg-chalkboard-110/70 relative">
+      <ToolbarButtons />
+    </menu>
   )
 }

src/clientSideScene/ClientSideSceneComp.tsx

@@ -90,7 +90,8 @@ export const ClientSideScene = ({
       cursor = 'grabbing'
     } else if (
       state.matches('Sketch.Line tool') ||
-      state.matches('Sketch.Tangential arc to')
+      state.matches('Sketch.Tangential arc to') ||
+      state.matches('Sketch.Rectangle tool')
     ) {
       cursor = 'crosshair'
     } else {
@@ -104,9 +105,9 @@ export const ClientSideScene = ({
       style={{ cursor: cursor }}
       className={`absolute inset-0 h-full w-full transition-all duration-300 ${
         hideClient ? 'opacity-0' : 'opacity-100'
-      } ${hideServer ? 'bg-black' : ''} ${
+      } ${hideServer ? 'bg-chalkboard-10 dark:bg-chalkboard-100' : ''} ${
         !hideClient && !hideServer && state.matches('Sketch')
-          ? 'bg-black/80'
+          ? 'bg-chalkboard-10/80 dark:bg-chalkboard-100/80'
           : ''
       }`}
     ></div>

src/clientSideScene/sceneEntities.ts

@@ -97,6 +97,7 @@ import {
   getRectangleCallExpressions,
   updateRectangleSketch,
 } from 'lib/rectangleTool'
+import { getThemeColorForThreeJs } from 'lib/theme'
 
 type DraftSegment = 'line' | 'tangentialArcTo'
 
@@ -356,6 +357,7 @@ export class SceneEntities {
       id: sketchGroup.start.__geoMeta.id,
       pathToNode: segPathToNode,
       scale: factor,
+      theme: sceneInfra._theme,
     })
     _profileStart.layers.set(SKETCH_LAYER)
     _profileStart.traverse((child) => {
@@ -406,6 +408,7 @@ export class SceneEntities {
           isDraftSegment,
           scale: factor,
           texture: sceneInfra.extraSegmentTexture,
+          theme: sceneInfra._theme,
         })
       } else {
         seg = straightSegment({
@@ -417,6 +420,7 @@ export class SceneEntities {
           scale: factor,
           callExpName,
           texture: sceneInfra.extraSegmentTexture,
+          theme: sceneInfra._theme,
         })
       }
       seg.layers.set(SKETCH_LAYER)
@@ -964,7 +968,7 @@ export class SceneEntities {
       if (!draftInfo)
         // don't want to mod the user's code yet as they have't committed to the change yet
         // plus this would be the truncated ast being recast, it would be wrong
-        codeManager.updateCodeStateEditor(code)
+        codeManager.updateCodeEditor(code)
       const { programMemory } = await executeAst({
         ast: truncatedAst,
         useFakeExecutor: true,
@@ -1503,7 +1507,10 @@ export class SceneEntities {
         const isSelected = parent?.userData?.isSelected
         colorSegment(
           selected,
-          isSelected ? 0x0000ff : parent?.userData?.baseColor || 0xffffff
+          isSelected
+            ? 0x0000ff
+            : parent?.userData?.baseColor ||
+                getThemeColorForThreeJs(sceneInfra._theme)
         )
         const extraSegmentGroup = parent?.getObjectByName(EXTRA_SEGMENT_HANDLE)
         if (extraSegmentGroup) {

src/clientSideScene/sceneInfra.ts

@@ -30,6 +30,7 @@ import { CameraControls } from './CameraControls'
 import { EngineCommandManager } from 'lang/std/engineConnection'
 import { settings } from 'lib/settings/initialSettings'
 import { MouseState } from 'machines/modelingMachine'
+import { Themes } from 'lib/theme'
 
 type SendType = ReturnType<typeof useModelingContext>['send']
 
@@ -101,6 +102,7 @@ export class SceneInfra {
   isFovAnimationInProgress = false
   _baseUnit: BaseUnit = 'mm'
   _baseUnitMultiplier = 1
+  _theme: Themes = Themes.System
   extraSegmentTexture: Texture
   lastMouseState: MouseState = { type: 'idle' }
   onDragStartCallback: (arg: OnDragCallbackArgs) => void = () => {}
@@ -137,6 +139,9 @@ export class SceneInfra {
       this._baseUnitMultiplier
     )
   }
+  set theme(theme: Themes) {
+    this._theme = theme
+  }
   resetMouseListeners = () => {
     this.setCallbacks({
       onDragStart: () => {},

src/clientSideScene/segments.ts

@@ -37,22 +37,26 @@ import {
 } from './sceneEntities'
 import { getTangentPointFromPreviousArc } from 'lib/utils2d'
 import { ARROWHEAD } from './sceneInfra'
+import { Themes, getThemeColorForThreeJs } from 'lib/theme'
 
 export function profileStart({
   from,
   id,
   pathToNode,
   scale = 1,
+  theme,
 }: {
   from: Coords2d
   id: string
   pathToNode: PathToNode
   scale?: number
+  theme: Themes
 }) {
   const group = new Group()
 
   const geometry = new BoxGeometry(12, 12, 12) // in pixels scaled later
-  const body = new MeshBasicMaterial({ color: 0xffffff })
+  const baseColor = getThemeColorForThreeJs(theme)
+  const body = new MeshBasicMaterial({ color: baseColor })
   const mesh = new Mesh(geometry, body)
 
   group.add(mesh)
@@ -79,6 +83,7 @@ export function straightSegment({
   scale = 1,
   callExpName,
   texture,
+  theme,
 }: {
   from: Coords2d
   to: Coords2d
@@ -88,6 +93,7 @@ export function straightSegment({
   scale?: number
   callExpName: string
   texture: Texture
+  theme: Themes
 }): Group {
   const group = new Group()
 
@@ -111,7 +117,8 @@ export function straightSegment({
     })
   }
 
-  const baseColor = callExpName === 'close' ? 0x444444 : 0xffffff
+  const baseColor =
+    callExpName === 'close' ? 0x444444 : getThemeColorForThreeJs(theme)
   const body = new MeshBasicMaterial({ color: baseColor })
   const mesh = new Mesh(geometry, body)
   mesh.userData.type = isDraftSegment
@@ -134,7 +141,7 @@ export function straightSegment({
   const length = Math.sqrt(
     Math.pow(to[0] - from[0], 2) + Math.pow(to[1] - from[1], 2)
   )
-  const arrowGroup = createArrowhead(scale)
+  const arrowGroup = createArrowhead(scale, theme)
   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))
@@ -147,7 +154,7 @@ export function straightSegment({
   group.add(mesh)
   if (callExpName !== 'close') group.add(arrowGroup)
 
-  const extraSegmentGroup = createExtraSegmentHandle(scale, texture)
+  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)
@@ -162,8 +169,10 @@ export function straightSegment({
   return group
 }
 
-function createArrowhead(scale = 1): Group {
-  const arrowMaterial = new MeshBasicMaterial({ color: 0xffffff })
+function createArrowhead(scale = 1, theme: Themes): Group {
+  const arrowMaterial = new MeshBasicMaterial({
+    color: getThemeColorForThreeJs(theme),
+  })
   // specify the size of the geometry in pixels (i.e. cone height = 20px, cone radius = 4.5px)
   // we'll scale the group to the correct size later to match these sizes in screen space
   const arrowheadMesh = new Mesh(new ConeGeometry(4.5, 20, 12), arrowMaterial)
@@ -179,7 +188,11 @@ function createArrowhead(scale = 1): Group {
   return arrowGroup
 }
 
-function createExtraSegmentHandle(scale: number, texture: Texture): Group {
+function createExtraSegmentHandle(
+  scale: number,
+  texture: Texture,
+  theme: Themes
+): Group {
   const particleMaterial = new PointsMaterial({
     size: 12, // in pixels
     map: texture,
@@ -189,7 +202,7 @@ function createExtraSegmentHandle(scale: number, texture: Texture): Group {
   })
   const mat = new MeshBasicMaterial({
     transparent: true,
-    color: 0xffffff,
+    color: getThemeColorForThreeJs(theme),
     opacity: 0,
   })
   const particleGeometry = new BufferGeometry().setFromPoints([
@@ -218,6 +231,7 @@ export function tangentialArcToSegment({
   isDraftSegment,
   scale = 1,
   texture,
+  theme,
 }: {
   prevSegment: SketchGroup['value'][number]
   from: Coords2d
@@ -227,6 +241,7 @@ export function tangentialArcToSegment({
   isDraftSegment?: boolean
   scale?: number
   texture: Texture
+  theme: Themes
 }): Group {
   const group = new Group()
 
@@ -257,7 +272,8 @@ export function tangentialArcToSegment({
     scale,
   })
 
-  const body = new MeshBasicMaterial({ color: 0xffffff })
+  const baseColor = getThemeColorForThreeJs(theme)
+  const body = new MeshBasicMaterial({ color: baseColor })
   const mesh = new Mesh(geometry, body)
   mesh.userData.type = isDraftSegment
     ? TANGENTIAL_ARC_TO__SEGMENT_DASH
@@ -271,10 +287,11 @@ export function tangentialArcToSegment({
     prevSegment,
     pathToNode,
     isSelected: false,
+    baseColor,
   }
   group.name = TANGENTIAL_ARC_TO_SEGMENT
 
-  const arrowGroup = createArrowhead(scale)
+  const arrowGroup = createArrowhead(scale, theme)
   arrowGroup.position.set(to[0], to[1], 0)
   const arrowheadAngle = endAngle + (Math.PI / 2) * (ccw ? 1 : -1)
   arrowGroup.quaternion.setFromUnitVectors(
@@ -285,7 +302,7 @@ export function tangentialArcToSegment({
   const shouldHide = pxLength < HIDE_SEGMENT_LENGTH
   arrowGroup.visible = !shouldHide
 
-  const extraSegmentGroup = createExtraSegmentHandle(scale, texture)
+  const extraSegmentGroup = createExtraSegmentHandle(scale, texture, theme)
   const circumferenceInPx = (2 * Math.PI * radius) / scale
   const extraSegmentAngleDelta =
     (EXTRA_SEGMENT_OFFSET_PX / circumferenceInPx) * Math.PI * 2

src/components/ActionButton.tsx

@@ -1,11 +1,12 @@
 import { ActionIcon, ActionIconProps } from './ActionIcon'
-import React from 'react'
+import React, { ForwardedRef, forwardRef } from 'react'
 import { paths } from 'lib/paths'
 import { Link } from 'react-router-dom'
 import type { LinkProps } from 'react-router-dom'
 
 interface BaseActionButtonProps {
-  icon?: ActionIconProps
+  iconStart?: ActionIconProps
+  iconEnd?: ActionIconProps
   className?: string
 }
 
@@ -32,15 +33,15 @@ type ActionButtonAsElement = BaseActionButtonProps &
     Element: React.ComponentType<React.HTMLAttributes<HTMLButtonElement>>
   }
 
-type ActionButtonProps =
+export type ActionButtonProps =
   | ActionButtonAsButton
   | ActionButtonAsLink
   | ActionButtonAsExternal
   | ActionButtonAsElement
 
-export const ActionButton = (props: ActionButtonProps) => {
-  const classNames = `action-button m-0 group mono text-sm flex items-center gap-2 rounded-sm border-solid border border-chalkboard-30 hover:border-chalkboard-40 dark:border-chalkboard-70 dark:hover:border-chalkboard-60 dark:bg-chalkboard-90/50 p-[3px] text-chalkboard-100 dark:text-chalkboard-10 ${
-    props.icon ? 'pr-2' : 'px-2'
+export const ActionButton = forwardRef((props: ActionButtonProps, ref) => {
+  const classNames = `action-button p-0 m-0 group mono text-xs leading-none flex items-center gap-2 rounded-sm border-solid border border-chalkboard-30 hover:border-chalkboard-40 enabled:dark:border-chalkboard-70 dark:hover:border-chalkboard-60 dark:bg-chalkboard-90/50 text-chalkboard-100 dark:text-chalkboard-10 ${
+    props.iconStart ? (props.iconEnd ? 'px-0' : 'pr-2') : 'px-2'
   } ${props.className ? props.className : ''}`
 
   switch (props.Element) {
@@ -48,11 +49,23 @@ export const ActionButton = (props: ActionButtonProps) => {
       // Note we have to destructure 'className' and 'Element' out of props
       // because we don't want to pass them to the button element;
       // the same is true for the other cases below.
-      const { Element, icon, children, className: _className, ...rest } = props
+      const {
+        Element,
+        iconStart,
+        iconEnd,
+        children,
+        className: _className,
+        ...rest
+      } = props
       return (
-        <button className={classNames} {...rest}>
-          {props.icon && <ActionIcon {...icon} />}
+        <button
+          ref={ref as ForwardedRef<HTMLButtonElement>}
+          className={classNames}
+          {...rest}
+        >
+          {iconStart && <ActionIcon {...iconStart} />}
           {children}
+          {iconEnd && <ActionIcon {...iconEnd} />}
         </button>
       )
     }
@@ -60,15 +73,22 @@ export const ActionButton = (props: ActionButtonProps) => {
       const {
         Element,
         to,
-        icon,
+        iconStart,
+        iconEnd,
         children,
         className: _className,
         ...rest
       } = props
       return (
-        <Link to={to || paths.INDEX} className={classNames} {...rest}>
-          {icon && <ActionIcon {...icon} />}
+        <Link
+          ref={ref as ForwardedRef<HTMLAnchorElement>}
+          to={to || paths.INDEX}
+          className={classNames}
+          {...rest}
+        >
+          {iconStart && <ActionIcon {...iconStart} />}
           {children}
+          {iconEnd && <ActionIcon {...iconEnd} />}
         </Link>
       )
     }
@@ -76,33 +96,42 @@ export const ActionButton = (props: ActionButtonProps) => {
       const {
         Element,
         to,
-        icon,
+        iconStart,
+        iconEnd,
         children,
         className: _className,
         ...rest
       } = props
       return (
         <Link
+          ref={ref as ForwardedRef<HTMLAnchorElement>}
           to={to || paths.INDEX}
           className={classNames}
           {...rest}
           target="_blank"
         >
-          {icon && <ActionIcon {...icon} />}
+          {iconStart && <ActionIcon {...iconStart} />}
           {children}
+          {iconEnd && <ActionIcon {...iconEnd} />}
         </Link>
       )
     }
     default: {
-      const { Element, icon, children, className: _className, ...rest } = props
-      if (!Element) throw new Error('Element is required')
+      const {
+        Element,
+        iconStart,
+        children,
+        className: _className,
+        ...rest
+      } = props
 
       return (
         <Element className={classNames} {...rest}>
-          {props.icon && <ActionIcon {...props.icon} />}
+          {props.iconStart && <ActionIcon {...props.iconStart} />}
           {children}
+          {props.iconEnd && <ActionIcon {...props.iconEnd} />}
         </Element>
       )
     }
   }
-}
+})

src/components/ActionButtonDropdown.tsx

@@ -0,0 +1,55 @@
+import { Popover } from '@headlessui/react'
+import { ActionButton, ActionButtonProps } from './ActionButton'
+
+type ActionButtonSplitProps = Omit<ActionButtonProps, 'iconEnd'> & {
+  splitMenuItems: {
+    label: string
+    shortcut?: string
+    onClick: () => void
+    disabled?: boolean
+  }[]
+}
+
+export function ActionButtonDropdown({
+  splitMenuItems,
+  className,
+  ...props
+}: ActionButtonSplitProps) {
+  return (
+    <Popover className="relative">
+      <Popover.Button
+        as={ActionButton}
+        className={className}
+        {...props}
+        Element="button"
+        iconEnd={{
+          icon: 'caretDown',
+          className: 'ui-open:rotate-180',
+          bgClassName:
+            'bg-chalkboard-20 dark:bg-chalkboard-80 ui-open:bg-primary ui-open:text-chalkboard-10',
+        }}
+      />
+      <Popover.Panel
+        as="ul"
+        className="absolute z-20 left-1/2 -translate-x-1/2 top-full mt-1 w-fit max-h-[80vh] overflow-y-auto py-2 flex flex-col gap-1 align-stretch text-inherit dark:text-chalkboard-10 bg-chalkboard-10 dark:bg-chalkboard-100 rounded shadow-lg border border-solid border-chalkboard-30 dark:border-chalkboard-80 text-sm m-0 p-0"
+      >
+        {splitMenuItems.map((item) => (
+          <li className="contents" key={item.label}>
+            <button
+              onClick={item.onClick}
+              className="block px-3 py-1 hover:bg-primary/10 dark:hover:bg-chalkboard-80 border-0 m-0 text-sm w-full rounded-none text-left disabled:!bg-transparent dark:disabled:text-chalkboard-60"
+              disabled={item.disabled}
+            >
+              <span className="capitalize">{item.label}</span>
+              {item.shortcut && (
+                <kbd className="bg-primary/10 dark:bg-chalkboard-80 dark:group-hover:bg-primary font-mono rounded-sm dark:text-inherit inline-block px-1 border-primary dark:border-chalkboard-90">
+                  {item.shortcut}
+                </kbd>
+              )}
+            </button>
+          </li>
+        ))}
+      </Popover.Panel>
+    </Popover>
+  )
+}

src/components/ActionIcon.tsx

@@ -29,10 +29,8 @@ export const ActionIcon = ({
   size = 'md',
   children,
 }: ActionIconProps) => {
-  // By default, we reverse the icon color and background color in dark mode
-  const computedIconClassName = `h-auto text-primary dark:text-current !group-disabled:text-chalkboard-60 !group-disabled:text-chalkboard-60 ${iconClassName}`
-
-  const computedBgClassName = `bg-primary/10 dark:bg-chalkboard-90 !group-disabled:bg-chalkboard-30 !dark:group-disabled:bg-chalkboard-80 ${bgClassName}`
+  const computedIconClassName = `h-auto text-inherit dark:text-current !group-disabled:text-chalkboard-60 !group-disabled:text-chalkboard-60 ${iconClassName}`
+  const computedBgClassName = `bg-chalkboard-20 dark:bg-chalkboard-80 !group-disabled:bg-chalkboard-30 !dark:group-disabled:bg-chalkboard-80 ${bgClassName}`
 
   return (
     <div

src/components/AppHeader.tsx

@@ -1,12 +1,11 @@
 import { Toolbar } from '../Toolbar'
-import UserSidebarMenu from './UserSidebarMenu'
+import UserSidebarMenu from 'components/UserSidebarMenu'
 import { type IndexLoaderData } from 'lib/types'
 import ProjectSidebarMenu from './ProjectSidebarMenu'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import styles from './AppHeader.module.css'
-import { useCommandsContext } from 'hooks/useCommandsContext'
-import { ActionButton } from './ActionButton'
-import usePlatform from 'hooks/usePlatform'
+import { RefreshButton } from 'components/RefreshButton'
+import { CommandBarOpenButton } from './CommandBarOpenButton'
 
 interface AppHeaderProps extends React.PropsWithChildren {
   showToolbar?: boolean
@@ -22,8 +21,6 @@ export const AppHeader = ({
   className = '',
   enableMenu = false,
 }: AppHeaderProps) => {
-  const platform = usePlatform()
-  const { commandBarSend } = useCommandsContext()
   const { auth } = useSettingsAuthContext()
   const user = auth?.context?.user
 
@@ -43,24 +40,17 @@ export const AppHeader = ({
       />
       {/* Toolbar if the context deems it */}
       <div className="flex-grow flex justify-center max-w-lg md:max-w-xl lg:max-w-2xl xl:max-w-4xl 2xl:max-w-5xl">
-        {showToolbar ? (
-          <Toolbar />
-        ) : (
-          <ActionButton
-            Element="button"
-            onClick={() => commandBarSend({ type: 'Open' })}
-            className="text-sm self-center flex items-center w-fit gap-3"
-          >
-            Command Palette{' '}
-            <kbd className="bg-primary/10 dark:bg-chalkboard-100 dark:text-primary inline-block px-1 py-0.5 border-primary dark:border-chalkboard-90">
-              {platform === 'macos' ? '⌘K' : 'Ctrl+/'}
-            </kbd>
-          </ActionButton>
-        )}
+        {showToolbar && <Toolbar />}
       </div>
       <div className="flex items-center gap-1 py-1 ml-auto">
         {/* If there are children, show them, otherwise show User menu */}
-        {children || <UserSidebarMenu user={user} />}
+        {children || (
+          <>
+            <CommandBarOpenButton />
+            <RefreshButton />
+            <UserSidebarMenu user={user} />
+          </>
+        )}
       </div>
     </header>
   )

src/components/CommandBar/CommandBarHeader.tsx

@@ -175,7 +175,7 @@ function ReviewingButton() {
       type="submit"
       form="review-form"
       className="w-fit !p-0 rounded-sm border !border-primary hover:shadow"
-      icon={{
+      iconStart={{
         icon: 'checkmark',
         bgClassName: 'p-1 rounded-sm !bg-primary hover:brightness-110',
         iconClassName: '!text-chalkboard-10',
@@ -193,7 +193,7 @@ function GatheringArgsButton() {
       type="submit"
       form="arg-form"
       className="w-fit !p-0 rounded-sm border !border-primary hover:shadow"
-      icon={{
+      iconStart={{
         icon: 'arrowRight',
         bgClassName: 'p-1 rounded-sm !bg-primary hover:brightness-110',
         iconClassName: '!text-chalkboard-10',

src/components/CommandBar/CommandBarSelectionInput.tsx

@@ -7,6 +7,7 @@ import {
   getSelectionType,
   getSelectionTypeDisplayText,
 } from 'lib/selections'
+import { kclManager } from 'lib/singletons'
 import { modelingMachine } from 'machines/modelingMachine'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
@@ -50,6 +51,14 @@ function CommandBarSelectionInput({
     inputRef.current?.focus()
   }, [selection, inputRef])
 
+  // Exit engine's edit mode when this input step is active,
+  // and re-enter it when it's not.
+  // In future the engine's edit mode will go away and this will be handled differently.
+  useEffect(() => {
+    kclManager.exitEditMode()
+    return () => kclManager.enterEditMode()
+  }, [])
+
   // Fast-forward through this arg if it's marked as skippable
   // and we have a valid selection already
   useEffect(() => {

src/components/CommandBarOpenButton.tsx

@@ -0,0 +1,19 @@
+import { useCommandsContext } from 'hooks/useCommandsContext'
+import usePlatform from 'hooks/usePlatform'
+
+export function CommandBarOpenButton() {
+  const { commandBarSend } = useCommandsContext()
+  const platform = usePlatform()
+
+  return (
+    <button
+      className="group rounded-full flex items-center justify-center gap-2 px-2 py-1 bg-primary/10 dark:bg-chalkboard-90 dark:backdrop-blur-sm border-primary hover:border-primary dark:border-chalkboard-50 dark:hover:border-inherit text-primary dark:text-inherit"
+      onClick={() => commandBarSend({ type: 'Open' })}
+    >
+      <span>Commands</span>
+      <kbd className="bg-primary/10 dark:bg-chalkboard-80 dark:group-hover:bg-primary font-mono rounded-sm dark:text-inherit inline-block px-1 border-primary dark:border-chalkboard-90">
+        {platform === 'macos' ? '⌘K' : '^/'}
+      </kbd>
+    </button>
+  )
+}

src/components/CommandComboBox.tsx

@@ -38,7 +38,7 @@ function CommandComboBox({
       <div className="flex items-center gap-2 px-4 pb-2 border-solid border-0 border-b border-b-chalkboard-20 dark:border-b-chalkboard-80">
         <CustomIcon
           name="search"
-          className="w-5 h-5 bg-primary/10 text-primary"
+          className="w-5 h-5 bg-primary/10 dark:bg-primary text-primary dark:text-inherit"
         />
         <Combobox.Input
           onChange={(event) => setQuery(event.target.value)}

src/components/CustomIcon.tsx

@@ -41,6 +41,16 @@ const CustomIconMap = {
       />
     </svg>
   ),
+  arrowRotateRight: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.5 7.59684L15.5 8.09684L15 8.09684L10.7931 8.09684L10.7931 7.09684L13.769 7.09684C13.3052 6.54751 12.7147 6.11526 12.0452 5.83941C11.2133 5.49662 10.2977 5.41109 9.41668 5.59387C8.53566 5.77666 7.72967 6.21935 7.10277 6.8648C6.47588 7.51025 6.05687 8.32881 5.89986 9.21478C5.74284 10.1008 5.85503 11.0134 6.22194 11.835C6.58884 12.6566 7.19361 13.3493 7.95816 13.8237C8.7227 14.2981 9.61192 14.5325 10.511 14.4964C11.41 14.4604 12.2776 14.1557 13.0018 13.6216L13.5953 14.4264C12.7103 15.0792 11.6499 15.4516 10.551 15.4956C9.45216 15.5397 8.36535 15.2533 7.4309 14.6734C6.49646 14.0936 5.75729 13.2469 5.30885 12.2428C4.86041 11.2386 4.7233 10.1231 4.9152 9.04027C5.10711 7.95742 5.61923 6.95696 6.38543 6.16808C7.15164 5.3792 8.13674 4.83812 9.21354 4.61472C10.2903 4.39132 11.4094 4.49586 12.4262 4.91483C13.2286 5.24545 13.9382 5.7599 14.5 6.41286L14.5 3.38998L15.5 3.38998L15.5 7.59684Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   arrowUp: (
     <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -61,6 +71,16 @@ const CustomIconMap = {
       />
     </svg>
   ),
+  caretDown: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 11.2929L6.35346 7.64642L5.64636 8.35354L9.64648 12.3536L10.3536 12.3536L14.3535 8.35353L13.6464 7.64643L10 11.2929Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   clipboardCheckmark: (
     <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -91,6 +111,16 @@ const CustomIconMap = {
       />
     </svg>
   ),
+  dimension: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.6455 3.6455L14 2V5.291L5.291 14H2L6 18V14.7052L14.7052 6H18L16.3526 4.35261L16.3546 4.35065L15.6475 3.64354L15.6455 3.6455Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   equal: (
     <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path

src/components/DownloadAppBanner.tsx

@@ -25,7 +25,7 @@ const DownloadAppBanner = () => {
             <ActionButton
               Element="button"
               onClick={() => setIsBannerDismissed(true)}
-              icon={{
+              iconStart={{
                 icon: 'close',
                 className: 'p-1',
                 bgClassName:

src/components/ErrorPage.tsx

@@ -16,7 +16,7 @@ export const ErrorPage = () => {
   return (
     <div className="flex flex-col items-center justify-center h-screen">
       <section className="max-w-full xl:max-w-4xl mx-auto">
-        <h1 className="text-4xl mb-8 font-bold">
+        <h1 className="text-4xl mb-8 font-bold" data-testid="unexpected-error">
           An unexpected error occurred
         </h1>
         {isRouteErrorResponse(error) && (
@@ -26,20 +26,25 @@ export const ErrorPage = () => {
         )}
         <div className="flex justify-between gap-2 mt-6">
           {isTauri() && (
-            <ActionButton Element="link" to={'/'} icon={{ icon: faHome }}>
+            <ActionButton
+              Element="link"
+              to={'/'}
+              iconStart={{ icon: faHome }}
+              data-testid="unexpected-error-home"
+            >
               Go Home
             </ActionButton>
           )}
           <ActionButton
             Element="button"
-            icon={{ icon: faRefresh }}
+            iconStart={{ icon: faRefresh }}
             onClick={() => window.location.reload()}
           >
             Reload
           </ActionButton>
           <ActionButton
             Element="button"
-            icon={{ icon: faTrash }}
+            iconStart={{ icon: faTrash }}
             onClick={() => {
               window.localStorage.clear()
             }}
@@ -48,7 +53,7 @@ export const ErrorPage = () => {
           </ActionButton>
           <ActionButton
             Element="externalLink"
-            icon={{ icon: faBug }}
+            iconStart={{ icon: faBug }}
             to="https://github.com/KittyCAD/modeling-app/issues/new"
           >
             Report Bug