Cut release v0.21.6 (#2450)

* Cut release v0.21.6

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

* trigger ci

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@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 }}'
 

.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

@@ -59,7 +59,9 @@ followed by:
 ```
 yarn build:wasm-dev
 ```
+
 or if you have the gh cli installed
+
 ```
 ./get-latest-wasm-bundle.sh # this will download the latest main wasm bundle
 ```
@@ -100,6 +102,7 @@ yarn test
 Which will run our suite of [Vitest unit](https://vitest.dev/) and [React Testing Library E2E](https://testing-library.com/docs/react-testing-library/intro/) tests, in interactive mode by default.
 
 For running the rust (not tauri rust though) only, you can
+
 ```bash
 cd src/wasm-lib
 cargo test
@@ -162,6 +165,7 @@ console.log(
 - `)
 )
 ```
+
 grab the md list and delete any that are older than the last bump
 
 2. Merge the PR
@@ -191,23 +195,26 @@ $ cargo +nightly fuzz run parser
 For more information on fuzzing you can check out
 [this guide](https://rust-fuzz.github.io/book/cargo-fuzz.html).
 
-
 ### Playwright
 
 First time running plawright locally, you'll need to add the secrets file
+
 ```bash
 touch ./e2e/playwright/playwright-secrets.env
 printf 'token="your-token"\nsnapshottoken="your-snapshot-token"' > ./e2e/playwright/playwright-secrets.env
 ```
+
 then replace "your-token" with a dev token from dev.zoo.dev/account/api-tokens
 
 then:
 run playwright
+
 ```
 yarn playwright test
 ```
 
 run a specific test suite
+
 ```
 yarn playwright test src/e2e-tests/example.spec.ts
 ```
@@ -216,14 +223,17 @@ run a specific test change the test from `test('...` to `test.only('...`
 (note if you commit this, the tests will instantly fail without running any of the tests)
 
 run headed
+
 ```
 yarn playwright test --headed
 ```
 
 run with step through debugger
+
 ```
 PWDEBUG=1 yarn playwright test
 ```
+
 However, if you want a debugger I recommend using VSCode and the `playwright` extension, as the above command is a cruder debugger that steps into every function call which is annoying.
 With the extension you can set a breakpoint after `waitForDefaultPlanesVisibilityChange` in order to skip app loading, then the vscode debugger's "step over" is much better for being able to stay at the right level of abstraction as you debug the code.
 
@@ -268,12 +278,11 @@ Where `./store` should look like this
 
 </details>
 
-
 However because much of our tests involve clicking in the stream at specific locations, it's code-gen looks `await page.locator('video').click();` when really we need to use a pixel coord, so I think it's of limited use.
 
 #### Some notes on CI
 
-The tests are broken into snapshot tests and non-snapshot tests, and they run in that order, they automatically commit new snap shots, so if you see an image commit check it was an intended change. If we have non-determinism in the snapshots such that they are always committing new images, hopefully this annoyance makes us fix them asap, if you notice this happening let Kurt know. But for the odd occasion  `git reset --hard HEAD~ && git push -f` is your friend.
+The tests are broken into snapshot tests and non-snapshot tests, and they run in that order, they automatically commit new snap shots, so if you see an image commit check it was an intended change. If we have non-determinism in the snapshots such that they are always committing new images, hopefully this annoyance makes us fix them asap, if you notice this happening let Kurt know. But for the odd occasion `git reset --hard HEAD~ && git push -f` is your friend.
 
 How to interpret failing playwright tests?
 If your tests fail, click through to the action and see that the tests failed on a line that includes `await page.getByTestId('loading').waitFor({ state: 'detached' })`, this means the test fail because the stream never started. It's you choice if you want to re-run the test, or ignore the failure.
@@ -299,3 +308,7 @@ PS: for the debug panel, the following JSON is useful for snapping the camera
 ```
 
 </details>
+
+## KCL
+
+For how to contribute to KCL, [see our KCL README](https://github.com/KittyCAD/modeling-app/tree/main/src/wasm-lib/kcl).

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)
@@ -57,6 +56,9 @@ layout: manual
 * [`patternLinear3d`](kcl/patternLinear3d)
 * [`pi`](kcl/pi)
 * [`pow`](kcl/pow)
+* [`profileStart`](kcl/profileStart)
+* [`profileStartX`](kcl/profileStartX)
+* [`profileStartY`](kcl/profileStartY)
 * [`revolve`](kcl/revolve)
 * [`segAng`](kcl/segAng)
 * [`segEndX`](kcl/segEndX)

e2e/playwright/flow-tests.spec.ts

@@ -12,6 +12,8 @@ import {
   TEST_SETTINGS_ONBOARDING_START,
 } from './storageStates'
 import * as TOML from '@iarna/toml'
+import { Coords2d } from 'lang/std/sketch'
+import { KCL_DEFAULT_LENGTH } from 'lib/constants'
 
 /*
 debug helper: unfortunately we do rely on exact coord mouse clicks in a few places
@@ -130,6 +132,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 +266,97 @@ 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('ensure the Zoo logo is not a link in browser app', async ({ page }) => {
+  await page.setViewportSize({ width: 1000, height: 500 })
+  await page.goto('/')
+
+  const zooLogo = page.locator('[data-testid="app-logo"]')
+  // Make sure it's not a link
+  await expect(zooLogo).not.toHaveAttribute('href')
+})
+
 test('if you write invalid kcl you get inlined errors', async ({ page }) => {
   const u = getUtils(page)
   await page.setViewportSize({ width: 1000, height: 500 })
@@ -330,6 +424,80 @@ test('if you write invalid kcl you get inlined errors', async ({ page }) => {
   await expect(page.locator('.cm-lint-marker-error')).not.toBeVisible()
 })
 
+test('error with 2 source ranges gets 2 diagnostics', async ({ page }) => {
+  const u = getUtils(page)
+  await page.addInitScript(async () => {
+    localStorage.setItem(
+      'persistCode',
+      `const length = .750
+const width = 0.500
+const height = 0.500
+const dia = 4
+
+fn squareHole = (l, w) => {
+  const squareHoleSketch = startSketchOn('XY')
+  |> startProfileAt([-width / 2, -length / 2], %)
+  |> lineTo([width / 2, -length / 2], %)
+  |> lineTo([width / 2, length / 2], %)
+  |> lineTo([-width / 2, length / 2], %)
+  |> close(%)
+  return squareHoleSketch
+}
+`
+    )
+  })
+  await page.setViewportSize({ width: 1000, height: 500 })
+  await page.goto('/')
+  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
+
+  await u.openDebugPanel()
+  await u.expectCmdLog('[data-message-type="execution-done"]')
+  await u.closeDebugPanel()
+
+  // check no error to begin with
+  await expect(page.locator('.cm-lint-marker-error')).not.toBeVisible()
+
+  // Click on the bottom of the code editor to add a new line
+  await page.click('.cm-content')
+  await page.keyboard.press('ArrowDown')
+  await page.keyboard.press('ArrowDown')
+  await page.keyboard.press('ArrowDown')
+  await page.keyboard.press('ArrowDown')
+  await page.keyboard.press('ArrowDown')
+  await page.keyboard.press('ArrowDown')
+  await page.keyboard.press('ArrowDown')
+  await page.keyboard.press('ArrowDown')
+  await page.keyboard.press('ArrowDown')
+  await page.keyboard.press('ArrowDown')
+  await page.keyboard.press('ArrowDown')
+  await page.keyboard.press('ArrowDown')
+  await page.keyboard.press('ArrowDown')
+  await page.keyboard.press('Enter')
+  await page.keyboard.type(`const extrusion = startSketchOn('XY')
+  |> circle([0, 0], dia/2, %)
+|> hole(squareHole(length, width, height), %)
+|> extrude(height, %)`)
+
+  // error in gutter
+  await expect(page.locator('.cm-lint-marker-error').first()).toBeVisible()
+  await page.hover('.cm-lint-marker-error:first-child')
+  await expect(page.getByText('Expected 2 arguments, got 3')).toBeVisible()
+
+  // Make sure there are two diagnostics
+  await expect(page.locator('.cm-lint-marker-error')).toHaveCount(2)
+})
+
 test('if your kcl gets an error from the engine it is inlined', async ({
   page,
 }) => {
@@ -552,8 +720,8 @@ test('Auto complete works', async ({ page }) => {
   await page.click('.cm-content')
   await page.keyboard.type('const part001 = start')
 
-  // expect there to be three auto complete options
-  await expect(page.locator('.cm-completionLabel')).toHaveCount(3)
+  // expect there to be six auto complete options
+  await expect(page.locator('.cm-completionLabel')).toHaveCount(6)
   await page.getByText('startSketchOn').click()
   await page.keyboard.type("'XZ'")
   await page.keyboard.press('Tab')
@@ -681,6 +849,130 @@ test('Project settings can be set and override user settings', async ({
   await expect(page.locator('select[name="app-theme"]')).toHaveValue('light')
 })
 
+test('Project settings can be opened with keybinding from the editor', async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 1200, height: 500 })
+  await page.goto('/', { waitUntil: 'domcontentloaded' })
+  await page
+    .getByRole('button', { name: 'Start Sketch' })
+    .waitFor({ state: 'visible' })
+
+  // Put the cursor in the editor
+  await page.click('.cm-content')
+
+  // Open the settings modal with the browser keyboard shortcut
+  await page.keyboard.press('Meta+Shift+,')
+
+  await expect(
+    page.getByRole('heading', { name: 'Settings', exact: true })
+  ).toBeVisible()
+  await page
+    .locator('select[name="app-theme"]')
+    .selectOption({ value: 'light' })
+
+  // Verify the toast appeared
+  await expect(
+    page.getByText(`Set theme to "light" for this project`)
+  ).toBeVisible()
+  // Check that the theme changed
+  await expect(page.locator('body')).not.toHaveClass(`body-bg dark`)
+
+  // Check that the user setting was not changed
+  await page.getByRole('radio', { name: 'User' }).click()
+  await expect(page.locator('select[name="app-theme"]')).toHaveValue('dark')
+
+  // Roll back to default "system" theme
+  await page
+    .getByText(
+      'themeRoll back themeRoll back to match defaultThe overall appearance of the appl'
+    )
+    .hover()
+  await page
+    .getByRole('button', {
+      name: 'Roll back theme ; Has tooltip: Roll back to match default',
+    })
+    .click()
+  await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
+
+  // Check that the project setting did not change
+  await page.getByRole('radio', { name: 'Project' }).click()
+  await expect(page.locator('select[name="app-theme"]')).toHaveValue('light')
+})
+
+test('Project and user settings can be reset', async ({ page }) => {
+  await page.setViewportSize({ width: 1200, height: 500 })
+  await page.goto('/', { waitUntil: 'domcontentloaded' })
+  await page
+    .getByRole('button', { name: 'Start Sketch' })
+    .waitFor({ state: 'visible' })
+
+  // Put the cursor in the editor
+  await page.click('.cm-content')
+
+  // Open the settings modal with the browser keyboard shortcut
+  await page.keyboard.press('Meta+Shift+,')
+
+  await expect(
+    page.getByRole('heading', { name: 'Settings', exact: true })
+  ).toBeVisible()
+
+  // Click the reset settings button.
+  await page.getByRole('button', { name: 'Restore default settings' }).click()
+
+  await page
+    .locator('select[name="app-theme"]')
+    .selectOption({ value: 'light' })
+
+  // Verify the toast appeared
+  await expect(
+    page.getByText(`Set theme to "light" for this project`)
+  ).toBeVisible()
+  // Check that the theme changed
+  await expect(page.locator('body')).not.toHaveClass(`body-bg dark`)
+  await expect(page.locator('select[name="app-theme"]')).toHaveValue('light')
+
+  // Check that the user setting was not changed
+  await page.getByRole('radio', { name: 'User' }).click()
+  await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
+
+  // Click the reset settings button.
+  await page.getByRole('button', { name: 'Restore default settings' }).click()
+
+  // Verify it is now set to the default value
+  await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
+
+  // Set the user theme to light.
+  await page
+    .locator('select[name="app-theme"]')
+    .selectOption({ value: 'light' })
+
+  // Verify the toast appeared
+  await expect(
+    page.getByText(`Set theme to "light" as a user default`)
+  ).toBeVisible()
+  // Check that the theme changed
+  await expect(page.locator('body')).not.toHaveClass(`body-bg dark`)
+  await expect(page.locator('select[name="app-theme"]')).toHaveValue('light')
+
+  await page.getByRole('radio', { name: 'Project' }).click()
+  await expect(page.locator('select[name="app-theme"]')).toHaveValue('light')
+
+  // Click the reset settings button.
+  await page.getByRole('button', { name: 'Restore default settings' }).click()
+  // Verify it is now set to the default value
+  await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
+
+  await page.getByRole('radio', { name: 'User' }).click()
+  await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
+
+  // Click the reset settings button.
+  await page.getByRole('button', { name: 'Restore default settings' }).click()
+
+  // Verify it is now set to the default value
+  await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
+})
+
 test('Click through each onboarding step', async ({ page }) => {
   const u = getUtils(page)
 
@@ -857,11 +1149,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 +1166,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 +1182,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 +1249,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()
@@ -992,18 +1290,63 @@ test.describe('Command bar tests', () => {
     await expect(page.locator('body')).not.toHaveClass(`body-bg dark`)
   })
 
+  test('Command bar keybinding works from code editor and can change a setting', async ({
+    page,
+  }) => {
+    // Brief boilerplate
+    await page.setViewportSize({ width: 1200, height: 500 })
+    await page.goto('/', { waitUntil: 'domcontentloaded' })
+
+    let cmdSearchBar = page.getByPlaceholder('Search commands')
+
+    // Put the cursor in the code editor
+    await page.click('.cm-content')
+
+    // Now try the same, but with the keyboard shortcut, check focus
+    await page.keyboard.press('Meta+K')
+    await expect(cmdSearchBar).toBeVisible()
+    await expect(cmdSearchBar).toBeFocused()
+
+    // Try typing in the command bar
+    await page.keyboard.type('theme')
+    const themeOption = page.getByRole('option', {
+      name: 'Settings · app · theme',
+    })
+    await expect(themeOption).toBeVisible()
+    await themeOption.click()
+    const themeInput = page.getByPlaceholder('Select an option')
+    await expect(themeInput).toBeVisible()
+    await expect(themeInput).toBeFocused()
+    // Select dark theme
+    await page.keyboard.press('ArrowDown')
+    await page.keyboard.press('ArrowDown')
+    await page.keyboard.press('ArrowDown')
+    await expect(page.getByRole('option', { name: 'system' })).toHaveAttribute(
+      'data-headlessui-state',
+      'active'
+    )
+    await page.keyboard.press('Enter')
+
+    // Check the toast appeared
+    await expect(
+      page.getByText(`Set theme to "system" for this project`)
+    ).toBeVisible()
+    // Check that the theme changed
+    await expect(page.locator('body')).not.toHaveClass(`body-bg dark`)
+  })
+
   test('Can extrude from the command bar', async ({ page }) => {
     await page.addInitScript(async () => {
       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 +1363,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 +1372,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()
 
@@ -1050,7 +1398,7 @@ test.describe('Command bar tests', () => {
 
     // Assert we're back on the distance step
     await expect(
-      page.getByRole('button', { name: 'Distance 12', exact: false })
+      page.getByRole('button', { name: 'Distance 5', exact: false })
     ).toBeDisabled()
 
     await continueButton.click()
@@ -1061,11 +1409,11 @@ test.describe('Command bar tests', () => {
     // Unfortunately this indentation seems to matter for the test
     await expect(page.locator('.cm-content')).toHaveText(
       `const distance = sqrt(20)
-const distance001 = 5 + 7
+const distance001 = ${KCL_DEFAULT_LENGTH}
 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 +1604,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 (KCL_DEFAULT_LENGTH) => {
+    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, %)    
+`
+    )
+  }, KCL_DEFAULT_LENGTH)
+  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 +1804,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 +2166,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()
 
@@ -1795,6 +2210,6 @@ test('Extrude from command bar selects extrude line after', async ({
   await page.keyboard.press('Enter')
   await page.waitForTimeout(100)
   await expect(page.locator('.cm-activeLine')).toHaveText(
-    `  |> extrude(5 + 7, %)`
+    `  |> extrude(${KCL_DEFAULT_LENGTH}, %)`
   )
 })

e2e/playwright/snapshot-tests.spec.ts

@@ -4,7 +4,7 @@ import { getUtils } from './test-utils'
 import { Models } from '@kittycad/lib'
 import fsp from 'fs/promises'
 import { spawn } from 'child_process'
-import { APP_NAME } from 'lib/constants'
+import { APP_NAME, KCL_DEFAULT_LENGTH } from 'lib/constants'
 import JSZip from 'jszip'
 import path from 'path'
 import { TEST_SETTINGS, TEST_SETTINGS_KEY } from './storageStates'
@@ -273,6 +273,8 @@ const part001 = startSketchOn('-XZ')
   for (let { modelPath, imagePath, outputType } of exportLocations) {
     // May change depending on the file being dealt with
     let cliCommand = `export ZOO_TOKEN=${secrets.snapshottoken} && zoo file snapshot --output-format=png --src-format=${outputType} ${modelPath} ${imagePath}`
+    const fileSize = (await fsp.stat(modelPath)).size
+    console.log(`Size of the file at ${modelPath}: ${fileSize} bytes`)
 
     const parentPath = path.dirname(modelPath)
 
@@ -507,7 +509,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 +599,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 +701,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({
@@ -712,7 +720,7 @@ test.describe('Client side scene scale should match engine scale', () => {
 
 test('Sketch on face with none z-up', async ({ page, context }) => {
   const u = getUtils(page)
-  await context.addInitScript(async () => {
+  await context.addInitScript(async (KCL_DEFAULT_LENGTH) => {
     localStorage.setItem(
       'persistCode',
       `const part001 = startSketchOn('-XZ')
@@ -720,16 +728,16 @@ test('Sketch on face with none z-up', async ({ page, context }) => {
   |> line([9.31, 10.55], %, 'seg01')
   |> line([11.91, -10.42], %)
   |> close(%)
-  |> extrude(5 + 7, %)
+  |> extrude(${KCL_DEFAULT_LENGTH}, %)
 const part002 = startSketchOn(part001, 'seg01')
   |> startProfileAt([8, 8], %)
   |> line([4.68, 3.05], %)
   |> line([0, -7.79], %, 'seg02')
   |> close(%)
-  |> extrude(5 + 7, %)
+  |> extrude(${KCL_DEFAULT_LENGTH}, %)
 `
     )
-  })
+  }, KCL_DEFAULT_LENGTH)
 
   await page.setViewportSize({ width: 1200, height: 500 })
   await page.goto('/')

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.0",
+  "version": "0.21.6",
   "private": true,
   "dependencies": {
     "@codemirror/autocomplete": "^6.16.0",
@@ -10,19 +10,19 @@
     "@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",
     "@replit/codemirror-interact": "^6.3.1",
     "@tauri-apps/api": "2.0.0-beta.8",
     "@tauri-apps/plugin-dialog": "^2.0.0-beta.2",
-    "@tauri-apps/plugin-fs": "^2.0.0-beta.2",
+    "@tauri-apps/plugin-fs": "^2.0.0-beta.3",
     "@tauri-apps/plugin-http": "^2.0.0-beta.2",
     "@tauri-apps/plugin-os": "^2.0.0-beta.2",
     "@tauri-apps/plugin-process": "^2.0.0-beta.2",
     "@tauri-apps/plugin-shell": "^2.0.0-beta.2",
-    "@tauri-apps/plugin-updater": "^2.0.0-beta.2",
+    "@tauri-apps/plugin-updater": "^2.0.0-beta.3",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^15.0.2",
     "@testing-library/user-event": "^14.5.2",
@@ -52,15 +52,15 @@
     "react-json-view": "^1.21.3",
     "react-modal": "^3.16.1",
     "react-modal-promise": "^1.0.2",
-    "react-router-dom": "^6.22.3",
+    "react-router-dom": "^6.23.1",
     "sketch-helpers": "^0.0.4",
     "swr": "^2.2.5",
-    "three": "^0.163.0",
+    "three": "^0.164.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5",
     "ua-parser-js": "^1.0.37",
     "uuid": "^9.0.1",
-    "vitest": "^1.5.0",
+    "vitest": "^1.6.0",
     "vscode-jsonrpc": "^8.1.0",
     "vscode-languageserver-protocol": "^3.17.5",
     "wasm-pack": "^0.12.1",

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,6 +26,7 @@ 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" }

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/src/main.rs

@@ -121,11 +121,8 @@ async fn write_app_settings_file(app: tauri::AppHandle, configuration: Configura
     Ok(())
 }
 
-async fn get_project_settings_file_path(
-    app_settings: Configuration,
-    project_name: &str,
-) -> Result<PathBuf, InvokeError> {
-    let project_dir = app_settings.settings.project.directory.join(project_name);
+async fn get_project_settings_file_path(project_path: &str) -> Result<PathBuf, InvokeError> {
+    let project_dir = std::path::Path::new(project_path);
 
     if !project_dir.exists() {
         tokio::fs::create_dir_all(&project_dir)
@@ -137,11 +134,8 @@ async fn get_project_settings_file_path(
 }
 
 #[tauri::command]
-async fn read_project_settings_file(
-    app_settings: Configuration,
-    project_name: &str,
-) -> Result<ProjectConfiguration, InvokeError> {
-    let settings_path = get_project_settings_file_path(app_settings, project_name).await?;
+async fn read_project_settings_file(project_path: &str) -> Result<ProjectConfiguration, InvokeError> {
+    let settings_path = get_project_settings_file_path(project_path).await?;
 
     // Check if this file exists.
     if !settings_path.exists() {
@@ -159,11 +153,10 @@ async fn read_project_settings_file(
 
 #[tauri::command]
 async fn write_project_settings_file(
-    app_settings: Configuration,
-    project_name: &str,
+    project_path: &str,
     configuration: ProjectConfiguration,
 ) -> Result<(), InvokeError> {
-    let settings_path = get_project_settings_file_path(app_settings, project_name).await?;
+    let settings_path = get_project_settings_file_path(project_path).await?;
     let contents = toml::to_string_pretty(&configuration).map_err(|e| InvokeError::from_anyhow(e.into()))?;
     tokio::fs::write(settings_path, contents.as_bytes())
         .await
@@ -226,7 +219,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 +258,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 +301,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);
@@ -352,10 +345,12 @@ fn show_in_folder(path: &str) -> Result<(), InvokeError> {
 
 #[allow(dead_code)]
 fn open_url_sync(app: &tauri::AppHandle, url: &url::Url) {
-    println!("Opening 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.to_string();
+        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
     });
@@ -367,10 +362,10 @@ fn open_url_sync(app: &tauri::AppHandle, url: &url::Url) {
             app.manage(state::Store::new(store));
         }
         Err(e) => {
-            println!("Error opening URL:{} {:?}", url, e);
+            log::warn!("Error opening URL:{} {:?}", url, e);
         }
         Ok(Err(e)) => {
-            println!("Error opening URL:{} {:?}", url, e);
+            log::warn!("Error opening URL:{} {:?}", url, e);
         }
     }
 }
@@ -400,6 +395,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())
@@ -435,7 +439,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() {
-                            println!("Got path in cli argument: {}", value);
+                            log::info!("Got path in cli argument: {}", value);
                             source_path = Some(Path::new(value).to_path_buf());
                         }
                     }
@@ -446,7 +450,7 @@ fn main() -> Result<()> {
             }
 
             if verbose {
-                println!("Verbose mode enabled.");
+                log::debug!("Verbose mode enabled.");
             }
 
             // If we have a source path to open, make sure it exists.
@@ -476,7 +480,7 @@ fn main() -> Result<()> {
 
             // Listen on the deep links.
             app.listen("deep-link://new-url", |event| {
-                println!("got deep-link url: {:?}", event);
+                log::info!("got deep-link url: {:?}", event);
                 // TODO: open_url_sync(app.handle(), event.url);
             });
 
@@ -488,10 +492,7 @@ fn main() -> Result<()> {
             |app, event| {
                 #[cfg(any(target_os = "macos", target_os = "ios"))]
                 if let tauri::RunEvent::Opened { urls } = event {
-                    if let Some(w) = app.get_webview_window("main") {
-                        let _ = w.eval(&format!("console.log(`[tauri] Opened URLs: {:?}`)", urls));
-                    }
-                    println!("Opened URLs: {:?}", urls);
+                    log::info!("Opened URLs: {:?}", urls);
 
                     // Handle the first URL.
                     // TODO: do we want to handle more than one URL?

src-tauri/tauri.conf.json

@@ -37,8 +37,7 @@
       }
     },
     "longDescription": "",
-    "macOS": {
-    },
+    "macOS": {},
     "resources": [],
     "shortDescription": "",
     "targets": "all"
@@ -75,5 +74,5 @@
     }
   },
   "productName": "Zoo Modeling App",
-  "version": "0.20.0"
+  "version": "0.21.6"
 }

src/App.tsx

@@ -23,6 +23,7 @@ import { useRefreshSettings } from 'hooks/useRefreshSettings'
 import { ModelingSidebar } from 'components/ModelingSidebar/ModelingSidebar'
 import { LowerRightControls } from 'components/LowerRightControls'
 import ModalContainer from 'react-modal-promise'
+import useHotkeyWrapper from 'lib/hotkeyWrapper'
 
 export function App() {
   useRefreshSettings(paths.FILE + 'SETTINGS')
@@ -63,8 +64,8 @@ export function App() {
   useHotkeys('backspace', (e) => {
     e.preventDefault()
   })
-  useHotkeys(
-    isTauri() ? 'mod + ,' : 'shift + mod + ,',
+  useHotkeyWrapper(
+    [isTauri() ? 'mod + ,' : 'shift + mod + ,'],
     () => navigate(filePath + paths.SETTINGS),
     {
       splitKey: '|',

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>