Bump google-github-actions/auth from 2.1.2 to 2.1.3 (#2356)

* Bump google-github-actions/auth from 2.1.2 to 2.1.3

Bumps [google-github-actions/auth](https://github.com/google-github-actions/auth) from 2.1.2 to 2.1.3.
- [Release notes](https://github.com/google-github-actions/auth/releases)
- [Changelog](https://github.com/google-github-actions/auth/blob/main/CHANGELOG.md)
- [Commits](https://github.com/google-github-actions/auth/compare/v2.1.2...v2.1.3)

---
updated-dependencies:
- dependency-name: google-github-actions/auth
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

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

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

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Jess Frazelle <jessfraz@users.noreply.github.com>

.github/workflows/ci.yml

@@ -239,8 +239,8 @@ 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
@@ -302,9 +302,9 @@ jobs:
           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 }}
@@ -313,8 +313,8 @@ jobs:
           app-type: osx
 
 
-      - name: Clean up after Mac App Store
-        if: ${{ env.BUILD_RELEASE == 'true' && matrix.os == 'macos-14' }}
+      - name: Clean up after Mac TestFlight (nightly)
+        if: ${{ github.event_name == 'schedule' && matrix.os == 'macos-14' }}
         shell: bash
         run: |
           git status
@@ -354,7 +354,7 @@ jobs:
           path: "${{ env.PREFIX }}/${{ env.MODE }}/bundle/*/*"
 
       - name: Run e2e tests (linux only)
-        if: matrix.os == 'ubuntu-latest'
+        if: ${{ matrix.os == 'ubuntu-latest' && github.event_name != 'release' && github.event_name != 'schedule' }}
         run: |
           cargo install tauri-driver --force
           source .env.${{ env.BUILD_RELEASE == 'true' && 'production' || 'development' }}
@@ -440,7 +440,7 @@ jobs:
             cat last_download.json
 
       - name: Authenticate to Google Cloud
-        uses: 'google-github-actions/auth@v2.1.2'
+        uses: 'google-github-actions/auth@v2.1.3'
         with:
           credentials_json: '${{ secrets.GOOGLE_CLOUD_DL_SA }}'
 

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

@@ -12,6 +12,7 @@ import {
   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
@@ -130,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'))
@@ -263,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 })
@@ -857,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()
 
@@ -871,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
@@ -885,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
@@ -950,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()
@@ -997,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(%)
+          `
       )
     })
 
@@ -1020,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')
@@ -1030,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()
 
@@ -1063,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
@@ -1256,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,
 }) => {
@@ -1390,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()
 
@@ -1752,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({

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.20.1",
+  "version": "0.21.3",
   "private": true,
   "dependencies": {
     "@codemirror/autocomplete": "^6.16.0",

src-tauri/Cargo.lock

@@ -169,9 +169,9 @@ dependencies = [
 
 [[package]]
 name = "anyhow"
-version = "1.0.82"
+version = "1.0.83"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f538837af36e6f6a9be0faa67f9a314f8119e4e4b5867c6ab40ed60360142519"
+checksum = "25bdb32cbbdce2b519a9cd7df3a678443100e265d5e25ca763b7572a5104f5f3"
 dependencies = [
  "backtrace",
 ]
@@ -334,7 +334,7 @@ checksum = "3b43422f69d8ff38f95f1b2bb76517c91589a924d1559a0e935d7c8ce0274c11"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -369,7 +369,7 @@ checksum = "c6fa2087f2753a7da8cc1c0dbfcf89579dd57458e36769de5ac750b4671737ca"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -415,7 +415,7 @@ checksum = "3c87f3f15e7794432337fc718554eaa4dc8f04c9677a950ffe366f20a162ae42"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -564,7 +564,7 @@ dependencies = [
  "proc-macro-crate 3.1.0",
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
  "syn_derive",
 ]
 
@@ -873,7 +873,7 @@ dependencies = [
  "heck 0.5.0",
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -1075,7 +1075,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "13b588ba4ac1a99f7f2964d24b3d896ddc6bf847ee3855dbd4366f058cfcd331"
 dependencies = [
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -1085,7 +1085,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "edb49164822f3ee45b17acd4a208cfc1251410cf0cad9a833234c9890774dd9f"
 dependencies = [
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -1109,7 +1109,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "strsim 0.10.0",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -1120,7 +1120,7 @@ checksum = "a668eda54683121533a393014d8692171709ff57a7d61f187b6e782719f8933f"
 dependencies = [
  "darling_core",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -1167,7 +1167,7 @@ checksum = "377af281d8f23663862a7c84623bc5dcf7f8c44b13c7496a590bdc157f941a43"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
  "synstructure",
 ]
 
@@ -1194,7 +1194,7 @@ dependencies = [
 
 [[package]]
 name = "derive-docs"
-version = "0.1.17"
+version = "0.1.18"
 dependencies = [
  "Inflector",
  "convert_case 0.6.0",
@@ -1204,7 +1204,7 @@ dependencies = [
  "regex",
  "serde",
  "serde_tokenstream",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -1287,7 +1287,7 @@ checksum = "f2b99bf03862d7f545ebc28ddd33a665b50865f4dfd84031a393823879bd4c54"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -1385,7 +1385,7 @@ checksum = "5c785274071b1b420972453b306eeca06acf4633829db4223b58a2a8c5953bc4"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -1536,7 +1536,7 @@ checksum = "1a5c6c585bc94aaf2c7b51dd4c2ba22680844aba4c687be581871a6f518c5742"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -1652,7 +1652,7 @@ checksum = "87750cf4b7a4c0625b1529e4c543c2182106e4dedc60a2a6455e00d212c489ac"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -1928,7 +1928,7 @@ dependencies = [
  "proc-macro-error",
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -1949,21 +1949,21 @@ checksum = "d2fabcfbdc87f4758337ca535fb41a6d701b65693ce38287d856d1674551ec9b"
 
 [[package]]
 name = "gltf-derive"
-version = "1.4.0"
+version = "1.4.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "438ffe1a5540d75403feaf23636b164e816e93f6f03131674722b3886ce32a57"
+checksum = "14070e711538afba5d6c807edb74bcb84e5dbb9211a3bf5dea0dfab5b24f4c51"
 dependencies = [
  "inflections",
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
 name = "gltf-json"
-version = "1.4.0"
+version = "1.4.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "655951ba557f2bc69ea4b0799446bae281fa78efae6319968bdd2c3e9a06d8e1"
+checksum = "e6176f9d60a7eab0a877e8e96548605dedbde9190a7ae1e80bbcc1c9af03ab14"
 dependencies = [
  "gltf-derive",
  "serde",
@@ -2031,7 +2031,7 @@ dependencies = [
  "proc-macro-error",
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -2536,7 +2536,7 @@ dependencies = [
 
 [[package]]
 name = "kcl-lib"
-version = "0.1.54"
+version = "0.1.55"
 dependencies = [
  "anyhow",
  "approx",
@@ -2640,7 +2640,7 @@ checksum = "0611fc9b9786175da21d895ffa0f65039e19c9111e94a41b7af999e3b95f045f"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -3362,7 +3362,7 @@ dependencies = [
  "regex",
  "regex-syntax 0.7.5",
  "structmeta 0.2.0",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -3376,7 +3376,7 @@ dependencies = [
  "regex",
  "regex-syntax 0.8.3",
  "structmeta 0.3.0",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -3518,7 +3518,7 @@ dependencies = [
  "phf_shared 0.11.2",
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -3586,7 +3586,7 @@ checksum = "2f38a4412a78282e09a2cf38d195ea5420d15ba0602cb375210efbc877243965"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -4424,7 +4424,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "serde_derive_internals",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -4509,9 +4509,9 @@ dependencies = [
 
 [[package]]
 name = "serde"
-version = "1.0.200"
+version = "1.0.201"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ddc6f9cc94d67c0e21aaf7eda3a010fd3af78ebf6e096aa6e2e13c79749cce4f"
+checksum = "780f1cebed1629e4753a1a38a3c72d30b97ec044f0aef68cb26650a3c5cf363c"
 dependencies = [
  "serde_derive",
 ]
@@ -4527,13 +4527,13 @@ dependencies = [
 
 [[package]]
 name = "serde_derive"
-version = "1.0.200"
+version = "1.0.201"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "856f046b9400cee3c8c94ed572ecdb752444c24528c035cd35882aad6f492bcb"
+checksum = "c5e405930b9796f1c00bee880d03fc7e0bb4b9a11afc776885ffe84320da2865"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -4544,7 +4544,7 @@ checksum = "330f01ce65a3a5fe59a60c82f3c9a024b573b8a6e875bd233fe5f934e71d54e3"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -4577,7 +4577,7 @@ checksum = "6c64451ba24fc7a6a2d60fc75dd9c83c90903b19028d4eff35e88fc1e86564e9"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -4598,7 +4598,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "serde",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -4640,7 +4640,7 @@ dependencies = [
  "darling",
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -4908,7 +4908,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "structmeta-derive 0.2.0",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -4920,7 +4920,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "structmeta-derive 0.3.0",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -4931,7 +4931,7 @@ checksum = "a60bcaff7397072dca0017d1db428e30d5002e00b6847703e2e42005c95fbe00"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -4942,7 +4942,7 @@ checksum = "152a0b65a590ff6c3da95cabe2353ee04e6167c896b28e3b14478c2636c922fc"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -4964,7 +4964,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "rustversion",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -4997,9 +4997,9 @@ dependencies = [
 
 [[package]]
 name = "syn"
-version = "2.0.60"
+version = "2.0.63"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "909518bc7b1c9b779f1bbf07f2929d35af9f0f37e47c6e9ef7f9dddc1e1821f3"
+checksum = "bf5be731623ca1a1fb7d8be6f261a3be6d3e2337b8a1f97be944d020c8fcb704"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -5015,7 +5015,7 @@ dependencies = [
  "proc-macro-error",
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -5032,7 +5032,7 @@ checksum = "c8af7666ab7b6390ab78131fb5b0fce11d6b7a6951602017c35fa82800708971"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -5249,7 +5249,7 @@ dependencies = [
  "serde",
  "serde_json",
  "sha2",
- "syn 2.0.60",
+ "syn 2.0.63",
  "tauri-utils",
  "thiserror",
  "time",
@@ -5267,7 +5267,7 @@ dependencies = [
  "heck 0.4.1",
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
  "tauri-codegen",
  "tauri-utils",
 ]
@@ -5602,22 +5602,22 @@ checksum = "8eaa81235c7058867fa8c0e7314f33dcce9c215f535d1913822a2b3f5e289f3c"
 
 [[package]]
 name = "thiserror"
-version = "1.0.59"
+version = "1.0.60"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f0126ad08bff79f29fc3ae6a55cc72352056dfff61e3ff8bb7129476d44b23aa"
+checksum = "579e9083ca58dd9dcf91a9923bb9054071b9ebbd800b342194c9feb0ee89fc18"
 dependencies = [
  "thiserror-impl",
 ]
 
 [[package]]
 name = "thiserror-impl"
-version = "1.0.59"
+version = "1.0.60"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d1cd413b5d558b4c5bf3680e324a6fa5014e7b7c067a51e69dbdf47eb7148b66"
+checksum = "e2470041c06ec3ac1ab38d0356a6119054dedaea53e12fbefc0de730a1c08524"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -5706,7 +5706,7 @@ checksum = "5b8a1e28f2deaa14e508979454cb3a223b10b938b45af148bc0986de36f1923b"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -5895,7 +5895,7 @@ checksum = "84fd902d4e0b9a4b27f2f440108dc034e1758628a9b702f8ec61ad66355422fa"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -5924,7 +5924,7 @@ checksum = "34704c8d6ebcbc939824180af020566b01a7c01f80641264eba0999f6c2b6be7"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -6048,7 +6048,7 @@ dependencies = [
  "Inflector",
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
  "termcolor",
 ]
 
@@ -6261,7 +6261,7 @@ dependencies = [
  "proc-macro-error",
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -6360,7 +6360,7 @@ dependencies = [
  "once_cell",
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
  "wasm-bindgen-shared",
 ]
 
@@ -6394,7 +6394,7 @@ checksum = "e94f17b526d0a461a191c78ea52bbce64071ed5c04c9ffe424dcb38f74171bb7"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
  "wasm-bindgen-backend",
  "wasm-bindgen-shared",
 ]
@@ -6535,7 +6535,7 @@ checksum = "ac1345798ecd8122468840bcdf1b95e5dc6d2206c5e4b0eafa078d061f59c9bc"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -6641,7 +6641,7 @@ checksum = "f6fc35f58ecd95a9b71c4f2329b911016e6bec66b3f2e6a4aad86bd2e99e2f9b"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -6652,7 +6652,7 @@ checksum = "08990546bf4edef8f431fa6326e032865f27138718c587dc21bc0265bbcb57cc"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]
@@ -7094,7 +7094,7 @@ checksum = "9ce1b18ccd8e73a9321186f97e46f9f04b778851177567b1975109d26a08d2a6"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.60",
+ "syn 2.0.63",
 ]
 
 [[package]]

src-tauri/tauri.conf.json

@@ -74,5 +74,5 @@
     }
   },
   "productName": "Zoo Modeling App",
-  "version": "0.20.1"
+  "version": "0.21.3"
 }

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>
+  )
+}