Test a parser bug

.codespellrc

@@ -1,3 +1,3 @@
 [codespell]
-ignore-words-list: crate,everytime,inout,co-ordinate,ot,nwo,absolutey,atleast
+ignore-words-list: crate,everytime,inout,co-ordinate,ot,nwo,absolutey
 skip: **/target,node_modules,build,**/Cargo.lock,./docs/kcl/*.md

.github/workflows/cargo-criterion.yml

@@ -7,23 +7,23 @@ on:
       - '**/Cargo.toml'
       - '**/Cargo.lock'
       - '**/rust-toolchain.toml'
-      - .github/workflows/cargo-bench.yml
+      - .github/workflows/cargo-criterion.yml
   pull_request:
     paths:
       - '**.rs'
       - '**/Cargo.toml'
       - '**/Cargo.lock'
       - '**/rust-toolchain.toml'
-      - .github/workflows/cargo-bench.yml
+      - .github/workflows/cargo-criterion.yml
   workflow_dispatch:
 permissions: read-all
 concurrency:
   group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
   cancel-in-progress: true
-name: cargo bench
+name: cargo criterion
 jobs:
-  cargo-bench:
+  cargocriterion:
-    name: Benchmark with iai
+    name: cargo criterion
     runs-on: ubuntu-latest-8-cores
     steps:
       - uses: actions/checkout@v4
@@ -31,12 +31,10 @@ jobs:
       - name: Install dependencies
         run: |
           cargo install cargo-criterion
-          sudo apt update
-          sudo apt install -y valgrind
       - name: Rust Cache
         uses: Swatinem/rust-cache@v2.6.1
       - name: Benchmark kcl library
         shell: bash
         run: |-
-          cd src/wasm-lib/kcl; cargo bench -- iai
+          cd src/wasm-lib/kcl; cargo criterion
 

README.md

@@ -281,7 +281,7 @@ https://github.com/KittyCAD/modeling-app/assets/29681384/6f5e8e85-1003-4fd9-be7f
 <details>
 
 <summary>
-PS: for the debug panel, the following JSON is useful for snapping the camera
+Ps for the debug panel, the following JSON is useful for snapping the camera
 </summary>
 
 ```JSON

docs/kcl/std.json

@@ -51191,7 +51191,6 @@
       "const part001 = startSketchOn('XY')\n  |> startProfileAt([4, 12], %)\n  |> line([2, 0], %)\n  |> line([0, -6], %)\n  |> line([4, -6], %)\n  |> line([0, -6], %)\n  |> line([-3.75, -4.5], %)\n  |> line([0, -5.5], %)\n  |> line([-2, 0], %)\n  |> close(%)\n  |> revolve({ axis: 'y' }, %) // default angle is 360",
       "// A donut shape.\nconst sketch001 = startSketchOn('XY')\n  |> circle([15, 0], 5, %)\n  |> revolve({ angle: 360, axis: 'y' }, %)",
       "const part001 = startSketchOn('XY')\n  |> startProfileAt([4, 12], %)\n  |> line([2, 0], %)\n  |> line([0, -6], %)\n  |> line([4, -6], %)\n  |> line([0, -6], %)\n  |> line([-3.75, -4.5], %)\n  |> line([0, -5.5], %)\n  |> line([-2, 0], %)\n  |> close(%)\n  |> revolve({ axis: 'y', angle: 180 }, %)",
-      "const part001 = startSketchOn('XY')\n  |> startProfileAt([4, 12], %)\n  |> line([2, 0], %)\n  |> line([0, -6], %)\n  |> line([4, -6], %)\n  |> line([0, -6], %)\n  |> line([-3.75, -4.5], %)\n  |> line([0, -5.5], %)\n  |> line([-2, 0], %)\n  |> close(%)\n  |> revolve({ axis: 'y', angle: 180 }, %)\nconst part002 = startSketchOn(part001, 'end')\n  |> startProfileAt([4.5, -5], %)\n  |> line([0, 5], %)\n  |> line([5, 0], %)\n  |> line([0, -5], %)\n  |> close(%)\n  |> extrude(5, %)",
       "const box = startSketchOn('XY')\n  |> startProfileAt([0, 0], %)\n  |> line([0, 20], %)\n  |> line([20, 0], %)\n  |> line([0, -20], %)\n  |> close(%)\n  |> extrude(20, %)\n\nconst sketch001 = startSketchOn(box, \"END\")\n  |> circle([10, 10], 4, %)\n  |> revolve({ angle: -90, axis: 'y' }, %)",
       "const box = startSketchOn('XY')\n  |> startProfileAt([0, 0], %)\n  |> line([0, 20], %)\n  |> line([20, 0], %)\n  |> line([0, -20], %, 'revolveAxis')\n  |> close(%)\n  |> extrude(20, %)\n\nconst sketch001 = startSketchOn(box, \"END\")\n  |> circle([10, 10], 4, %)\n  |> revolve({\n       angle: 90,\n       axis: getOppositeEdge('revolveAxis', box)\n     }, %)"
     ]

e2e/playwright/flow-tests.spec.ts

@@ -1,11 +1,10 @@
 import { test, expect } from '@playwright/test'
+import { secrets } from './secrets'
 import { getUtils } from './test-utils'
 import waitOn from 'wait-on'
+import { Themes } from '../../src/lib/theme'
+import { initialSettings } from '../../src/lib/settings/initialSettings'
 import { roundOff } from 'lib/utils'
-import { basicStorageState } from './storageStates'
-import * as TOML from '@iarna/toml'
-import { SaveSettingsPayload } from 'lib/settings/settingsTypes'
-import { Themes } from 'lib/theme'
 
 /*
 debug helper: unfortunately we do rely on exact coord mouse clicks in a few places
@@ -31,14 +30,31 @@ test.beforeEach(async ({ context, page }) => {
     resources: ['tcp:3000'],
     timeout: 5000,
   })
-
+  await context.addInitScript(async (token) => {
+    localStorage.setItem('TOKEN_PERSIST_KEY', token)
+    localStorage.setItem('persistCode', ``)
+    localStorage.setItem(
+      'SETTINGS_PERSIST_KEY',
+      JSON.stringify({
+        baseUnit: 'in',
+        cameraControls: 'KittyCAD',
+        defaultDirectory: '',
+        defaultProjectName: 'project-$nnn',
+        onboardingStatus: 'dismissed',
+        showDebugPanel: true,
+        textWrapping: 'On',
+        theme: 'system',
+        unitSystem: 'imperial',
+      })
+    )
+  }, secrets.token)
   // kill animations, speeds up tests and reduced flakiness
   await page.emulateMedia({ reducedMotion: 'reduce' })
 })
 
 test.setTimeout(60000)
 
-test('Basic sketch', async ({ page, context }) => {
+test('Basic sketch', async ({ page }) => {
   const u = getUtils(page)
   await page.setViewportSize({ width: 1200, height: 500 })
   const PUR = 400 / 37.5 //pixeltoUnitRatio
@@ -513,133 +529,96 @@ test('Auto complete works', async ({ page }) => {
 })
 
 // Stored settings validation test
-test.describe('Settings persistence and validation tests', () => {
+test('Stored settings are validated and fall back to defaults', async ({
-  // Override test setup
+  page,
+  context,
+}) => {
+  // Override beforeEach test setup
   // with corrupted settings
-  const storageState = structuredClone(basicStorageState)
+  await context.addInitScript(async () => {
-  const s = TOML.parse(storageState.origins[0].localStorage[2].value) as {
+    const storedSettings = JSON.parse(
-    settings: SaveSettingsPayload
+      localStorage.getItem('SETTINGS_PERSIST_KEY') || '{}'
-  }
+    )
-  s.settings.app.theme = Themes.Dark
-  s.settings.app.projectDirectory = 123 as any
-  s.settings.modeling.defaultUnit = 'invalid' as any
-  s.settings.modeling.mouseControls = `() => alert('hack the planet')` as any
-  s.settings.projects.defaultProjectName = false as any
-  storageState.origins[0].localStorage[2].value = TOML.stringify(s)
 
-  test.use({ storageState })
+    // Corrupt the settings
+    storedSettings.baseUnit = 'invalid'
+    storedSettings.cameraControls = `() => alert('hack the planet')`
+    storedSettings.defaultDirectory = 123
+    storedSettings.defaultProjectName = false
 
-  test('Stored settings are validated and fall back to defaults', async ({
+    localStorage.setItem('SETTINGS_PERSIST_KEY', JSON.stringify(storedSettings))
-    page,
-  }) => {
-    const u = getUtils(page)
-    await page.setViewportSize({ width: 1200, height: 500 })
-    await page.goto('/')
-    await u.waitForAuthSkipAppStart()
-
-    // Check the settings were reset
-    const storedSettings = TOML.parse(
-      await page.evaluate(() => localStorage.getItem('/user.toml') || '{}')
-    ) as { settings: SaveSettingsPayload }
-
-    expect(storedSettings.settings.app?.theme).toBe('dark')
-
-    // Check that the invalid settings were removed
-    expect(storedSettings.settings.modeling?.defaultUnit).toBe(undefined)
-    expect(storedSettings.settings.modeling?.mouseControls).toBe(undefined)
-    expect(storedSettings.settings.app?.projectDirectory).toBe(undefined)
-    expect(storedSettings.settings.projects?.defaultProjectName).toBe(undefined)
   })
 
-  test('Project settings can be set and override user settings', async ({
+  await page.setViewportSize({ width: 1200, height: 500 })
-    page,
+  await page.goto('/', { waitUntil: 'domcontentloaded' })
-  }) => {
-    const u = getUtils(page)
-    await page.setViewportSize({ width: 1200, height: 500 })
-    await page.goto('/')
-    await u.waitForAuthSkipAppStart()
 
-    // Open the settings modal with the browser keyboard shortcut
+  // Check the toast appeared
-    await page.keyboard.press('Meta+Shift+,')
+  await expect(
+    page.getByText(`Error validating persisted settings:`, {
+      exact: false,
+    })
+  ).toBeVisible()
 
-    await expect(
+  // Check the settings were reset
-      page.getByRole('heading', { name: 'Settings', exact: true })
+  const storedSettings = JSON.parse(
-    ).toBeVisible()
+    await page.evaluate(
-    await page
+      () => localStorage.getItem('SETTINGS_PERSIST_KEY') || '{}'
-      .locator('select[name="app-theme"]')
+    )
-      .selectOption({ value: 'light' })
+  )
-
+  await expect(storedSettings.baseUnit).toBe(initialSettings.baseUnit)
-    // Verify the toast appeared
+  await expect(storedSettings.cameraControls).toBe(
-    await expect(
+    initialSettings.cameraControls
-      page.getByText(`Set theme to "light" for this project`)
+  )
-    ).toBeVisible()
+  await expect(storedSettings.defaultDirectory).toBe(
-    // Check that the theme changed
+    initialSettings.defaultDirectory
-    await expect(page.locator('body')).not.toHaveClass(`body-bg dark`)
+  )
-
+  await expect(storedSettings.defaultProjectName).toBe(
-    // Check that the user setting was not changed
+    initialSettings.defaultProjectName
-    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')
-  })
 })
 
 // Onboarding tests
-test.describe('Onboarding tests', () => {
+test('Onboarding redirects and code updating', async ({ page, context }) => {
-  // Override test setup
+  const u = getUtils(page)
-  const storageState = structuredClone(basicStorageState)
-  const s = TOML.parse(storageState.origins[0].localStorage[2].value) as {
-    settings: SaveSettingsPayload
-  }
-  s.settings.app.onboardingStatus = '/export'
-  storageState.origins[0].localStorage[2].value = TOML.stringify(s)
-  test.use({ storageState })
 
-  test('Onboarding redirects and code updating', async ({ page, context }) => {
+  // Override beforeEach test setup
-    const u = getUtils(page)
+  await context.addInitScript(async () => {
+    // Give some initial code, so we can test that it's cleared
+    localStorage.setItem('persistCode', 'const sigmaAllow = 15000')
 
-    await page.setViewportSize({ width: 1200, height: 500 })
+    const storedSettings = JSON.parse(
-    await page.goto('/')
+      localStorage.getItem('SETTINGS_PERSIST_KEY') || '{}'
-    await u.waitForAuthSkipAppStart()
-
-    // Test that the redirect happened
-    await expect(page.url().split(':3000').slice(-1)[0]).toBe(
-      `/file/%2Fbrowser%2Fmain.kcl/onboarding/export`
     )
-
+    storedSettings.onboardingStatus = '/export'
-    // Test that you come back to this page when you refresh
+    localStorage.setItem('SETTINGS_PERSIST_KEY', JSON.stringify(storedSettings))
-    await page.reload()
-    await expect(page.url().split(':3000').slice(-1)[0]).toBe(
-      `/file/%2Fbrowser%2Fmain.kcl/onboarding/export`
-    )
-
-    // Test that the onboarding pane loaded
-    const title = page.locator('[data-testid="onboarding-content"]')
-    await expect(title).toBeAttached()
-
-    // Test that the code changes when you advance to the next step
-    await page.locator('[data-testid="onboarding-next"]').click()
-    await expect(page.locator('.cm-content')).toHaveText('')
-
-    // Test that the code is not empty when you click on the next step
-    await page.locator('[data-testid="onboarding-next"]').click()
-    await expect(page.locator('.cm-content')).toHaveText(/.+/)
   })
+
+  await page.setViewportSize({ width: 1200, height: 500 })
+  await page.goto('/')
+  await u.waitForAuthSkipAppStart()
+
+  // Test that the redirect happened
+  await expect(page.url().split(':3000').slice(-1)[0]).toBe(
+    `/file/new/onboarding/export`
+  )
+
+  // Test that you come back to this page when you refresh
+  await page.reload()
+  await expect(page.url().split(':3000').slice(-1)[0]).toBe(
+    `/file/new/onboarding/export`
+  )
+
+  // Test that the onboarding pane loaded
+  const title = page.locator('[data-testid="onboarding-content"]')
+  await expect(title).toBeAttached()
+
+  // Test that the code changes when you advance to the next step
+  await page.locator('[data-testid="onboarding-next"]').click()
+  await expect(page.locator('.cm-content')).toHaveText('')
+
+  // Test that the code is not empty when you click on the next step
+  await page.locator('[data-testid="onboarding-next"]').click()
+  await expect(page.locator('.cm-content')).toHaveText(/.+/)
 })
 
 test('Selections work on fresh and edited sketch', async ({ page }) => {
@@ -800,134 +779,129 @@ test('Selections work on fresh and edited sketch', async ({ page }) => {
   await selectionSequence()
 })
 
-test.describe('Command bar tests', () => {
+test('Command bar works and can change a setting', async ({ page }) => {
-  test('Command bar works and can change a setting', async ({ page }) => {
+  // Brief boilerplate
-    // Brief boilerplate
+  const u = getUtils(page)
-    await page.setViewportSize({ width: 1200, height: 500 })
+  await page.setViewportSize({ width: 1200, height: 500 })
-    await page.goto('/', { waitUntil: 'domcontentloaded' })
+  await page.goto('/')
+  await u.waitForAuthSkipAppStart()
 
-    let cmdSearchBar = page.getByPlaceholder('Search commands')
+  let cmdSearchBar = page.getByPlaceholder('Search commands')
 
-    // First try opening the command bar and closing it
+  // First try opening the command bar and closing it
-    // It has a different label on mac and windows/linux, "Meta+K" and "Ctrl+/" respectively
+  // It has a different label on mac and windows/linux, "Meta+K" and "Ctrl+/" respectively
-    await page
+  await page
-      .getByRole('button', { name: 'Ctrl+/' })
+    .getByRole('button', { name: 'Ctrl+/' })
-      .or(page.getByRole('button', { name: '⌘K' }))
+    .or(page.getByRole('button', { name: '⌘K' }))
-      .click()
+    .click()
-    await expect(cmdSearchBar).toBeVisible()
+  await expect(cmdSearchBar).toBeVisible()
-    await page.keyboard.press('Escape')
+  await page.keyboard.press('Escape')
-    await expect(cmdSearchBar).not.toBeVisible()
+  await expect(cmdSearchBar).not.toBeVisible()
 
-    // Now try the same, but with the keyboard shortcut, check focus
+  // Now try the same, but with the keyboard shortcut, check focus
-    await page.keyboard.press('Meta+K')
+  await page.keyboard.press('Meta+K')
-    await expect(cmdSearchBar).toBeVisible()
+  await expect(cmdSearchBar).toBeVisible()
-    await expect(cmdSearchBar).toBeFocused()
+  await expect(cmdSearchBar).toBeFocused()
 
-    // Try typing in the command bar
+  // Try typing in the command bar
-    await page.keyboard.type('theme')
+  await page.keyboard.type('theme')
-    const themeOption = page.getByRole('option', {
+  const themeOption = page.getByRole('option', { name: 'Set Theme' })
-      name: 'Settings · app · theme',
+  await expect(themeOption).toBeVisible()
-    })
+  await themeOption.click()
-    await expect(themeOption).toBeVisible()
+  const themeInput = page.getByPlaceholder('system')
-    await themeOption.click()
+  await expect(themeInput).toBeVisible()
-    const themeInput = page.getByPlaceholder('Select an option')
+  await expect(themeInput).toBeFocused()
-    await expect(themeInput).toBeVisible()
+  // Select dark theme
-    await expect(themeInput).toBeFocused()
+  await page.keyboard.press('ArrowDown')
-    // Select dark theme
+  await page.keyboard.press('ArrowUp')
-    await page.keyboard.press('ArrowDown')
+  await expect(page.getByRole('option', { name: Themes.Dark })).toHaveAttribute(
-    await page.keyboard.press('ArrowDown')
+    'data-headlessui-state',
-    await page.keyboard.press('ArrowDown')
+    'active'
-    await expect(page.getByRole('option', { name: 'system' })).toHaveAttribute(
+  )
-      'data-headlessui-state',
+  await page.keyboard.press('Enter')
-      'active'
+
+  // Check the toast appeared
+  await expect(page.getByText(`Set Theme to "${Themes.Dark}"`)).toBeVisible()
+  // Check that the theme changed
+  await expect(page.locator('body')).toHaveClass(`body-bg ${Themes.Dark}`)
+})
+
+test('Can extrude from the command bar', async ({ page, context }) => {
+  await context.addInitScript(async (token) => {
+    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(%)
+      `
     )
-    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`)
   })
 
-  // Override test setup code
+  const u = getUtils(page)
-  const storageState = structuredClone(basicStorageState)
+  await page.setViewportSize({ width: 1200, height: 500 })
-  storageState.origins[0].localStorage[1].value = `const distance = sqrt(20)
+  await page.goto('/')
-  const part001 = startSketchOn('-XZ')
+  await u.waitForAuthSkipAppStart()
-    |> startProfileAt([-6.95, 4.98], %)
+  await u.openDebugPanel()
-    |> line([25.1, 0.41], %)
+  await u.expectCmdLog('[data-message-type="execution-done"]')
-    |> line([0.73, -14.93], %)
-    |> line([-23.44, 0.52], %)
-    |> close(%)
-  `
-  test.use({ storageState })
 
-  test('Can extrude from the command bar', async ({ page, context }) => {
+  let cmdSearchBar = page.getByPlaceholder('Search commands')
-    const u = getUtils(page)
+  await page.keyboard.press('Meta+K')
-    await page.setViewportSize({ width: 1200, height: 500 })
+  await expect(cmdSearchBar).toBeVisible()
-    await page.goto('/')
-    await u.waitForAuthSkipAppStart()
 
-    // Make sure the stream is up
+  // Search for extrude command and choose it
-    await u.openDebugPanel()
+  await page.getByRole('option', { name: 'Extrude' }).click()
-    await u.expectCmdLog('[data-message-type="execution-done"]')
+  await expect(page.locator('#arg-form > label')).toContainText(
-    await u.closeDebugPanel()
+    'Please select one face'
+  )
+  await expect(page.getByRole('button', { name: 'selection' })).toBeDisabled()
 
-    await expect(
+  // Click to select face and set distance
-      page.getByRole('button', { name: 'Start Sketch' })
+  await page.getByText('|> startProfileAt([-6.95, 4.98], %)').click()
-    ).not.toBeDisabled()
+  await page.getByRole('button', { name: 'Continue' }).click()
-    await page.getByText('|> startProfileAt([-6.95, 4.98], %)').click()
-    await expect(
-      page.getByRole('button', { name: 'Extrude' })
-    ).not.toBeDisabled()
 
-    let cmdSearchBar = page.getByPlaceholder('Search commands')
+  // Assert that we're on the distance step
-    await page.keyboard.press('Meta+K')
+  await expect(page.getByRole('button', { name: 'distance' })).toBeDisabled()
-    await expect(cmdSearchBar).toBeVisible()
 
-    // Search for extrude command and choose it
+  // Assert that the an alternative variable name is chosen,
-    await page.getByRole('option', { name: 'Extrude' }).click()
+  // since the default variable name is already in use (distance)
+  await page.getByRole('button', { name: 'Create new variable' }).click()
+  await expect(page.getByPlaceholder('Variable name')).toHaveValue(
+    'distance001'
+  )
+  await expect(page.getByRole('button', { name: 'Continue' })).toBeEnabled()
+  await page.getByRole('button', { name: 'Continue' }).click()
 
-    // Assert that we're on the distance step
+  // Review step and argument hotkeys
-    await expect(page.getByRole('button', { name: 'distance' })).toBeDisabled()
+  await expect(
+    page.getByRole('button', { name: 'Submit command' })
+  ).toBeEnabled()
+  await page.keyboard.press('Backspace')
+  await expect(
+    page.getByRole('button', { name: 'Distance 12', exact: false })
+  ).toBeDisabled()
+  await page.keyboard.press('Enter')
 
-    // Assert that the an alternative variable name is chosen,
+  await expect(page.getByText('Confirm Extrude')).toBeVisible()
-    // since the default variable name is already in use (distance)
-    await page.getByRole('button', { name: 'Create new variable' }).click()
-    await expect(page.getByPlaceholder('Variable name')).toHaveValue(
-      'distance001'
-    )
-    await expect(page.getByRole('button', { name: 'Continue' })).toBeEnabled()
-    await page.getByRole('button', { name: 'Continue' }).click()
 
-    // Review step and argument hotkeys
+  // Check that the code was updated
-    await expect(
+  await page.keyboard.press('Enter')
-      page.getByRole('button', { name: 'Submit command' })
+  // Unfortunately this indentation seems to matter for the test
-    ).toBeEnabled()
+  await expect(page.locator('.cm-content')).toHaveText(
-    await page.keyboard.press('Backspace')
+    `const distance = sqrt(20)
-    await expect(
-      page.getByRole('button', { name: 'Distance 12', exact: false })
-    ).toBeDisabled()
-    await page.keyboard.press('Enter')
-
-    await expect(page.getByText('Confirm Extrude')).toBeVisible()
-
-    // Check that the code was updated
-    await page.keyboard.press('Enter')
-    // 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 part001 = startSketchOn('-XZ')
-    |> startProfileAt([-6.95, 4.98], %)
+  |> startProfileAt([-6.95, 4.98], %)
-    |> line([25.1, 0.41], %)
+  |> line([25.1, 0.41], %)
-    |> line([0.73, -14.93], %)
+  |> line([0.73, -14.93], %)
-    |> line([-23.44, 0.52], %)
+  |> line([-23.44, 0.52], %)
-    |> close(%)
+  |> close(%)
-    |> extrude(distance001, %)`.replace(/(\r\n|\n|\r)/gm, '') // remove newlines
+  |> extrude(distance001, %)`.replace(/(\r\n|\n|\r)/gm, '') // remove newlines
-    )
+  )
-  })
 })
 
 test('Can add multiple sketches', async ({ page }) => {
@@ -1496,13 +1470,9 @@ test('Sketch on face', async ({ page, context }) => {
   await page.getByText('startProfileAt([1.03, 1.03], %)').click()
   await expect(page.getByRole('button', { name: 'Edit Sketch' })).toBeVisible()
   await page.getByRole('button', { name: 'Edit Sketch' }).click()
-  await page.setViewportSize({ width: 1200, height: 1200 })
-  await u.openAndClearDebugPanel()
-  await u.updateCamPosition([452, -152, 1166])
-  await u.closeDebugPanel()
   await page.waitForTimeout(200)
 
-  const pointToDragFirst = [787, 565]
+  const pointToDragFirst = [691, 237]
   await page.mouse.move(pointToDragFirst[0], pointToDragFirst[1])
   await page.mouse.down()
   await page.mouse.move(pointToDragFirst[0] - 20, pointToDragFirst[1], {
@@ -1516,9 +1486,7 @@ test('Sketch on face', async ({ page, context }) => {
   await expect(page.locator('.cm-content'))
     .toContainText(`const part002 = startSketchOn(part001, 'seg01')
 |> startProfileAt([1.03, 1.03], %)
-|> line([${process?.env?.CI ? 2.74 : 2.93}, -${
+|> line([2.81, -0.33], %)
-    process?.env?.CI ? 0.24 : 0.2
-  }], %)
 |> line([-4.44, -2.13], %)
 |> close(%)`)
 
@@ -1533,7 +1501,6 @@ test('Sketch on face', async ({ page, context }) => {
   await page.getByRole('button', { name: 'Extrude' }).click()
 
   await expect(page.getByTestId('command-bar')).toBeVisible()
-  await page.waitForTimeout(100)
 
   await page.keyboard.press('Enter')
   await expect(page.getByText('Confirm Extrude')).toBeVisible()
@@ -1542,9 +1509,7 @@ test('Sketch on face', async ({ page, context }) => {
   await expect(page.locator('.cm-content'))
     .toContainText(`const part002 = startSketchOn(part001, 'seg01')
 |> startProfileAt([1.03, 1.03], %)
-|> line([${process?.env?.CI ? 2.74 : 2.93}, -${
+|> line([2.81, -0.33], %)
-    process?.env?.CI ? 0.24 : 0.2
-  }], %)
 |> line([-4.44, -2.13], %)
 |> close(%)
 |> extrude(5 + 7, %)`)

e2e/playwright/snapshot-tests.spec.ts

@@ -7,18 +7,30 @@ import { spawn } from 'child_process'
 import { APP_NAME } from 'lib/constants'
 import JSZip from 'jszip'
 import path from 'path'
-import { basicSettings, basicStorageState } from './storageStates'
-import * as TOML from '@iarna/toml'
 
-test.beforeEach(async ({ page }) => {
+test.beforeEach(async ({ context, page }) => {
+  await context.addInitScript(async (token) => {
+    localStorage.setItem('TOKEN_PERSIST_KEY', token)
+    localStorage.setItem('persistCode', ``)
+    localStorage.setItem(
+      'SETTINGS_PERSIST_KEY',
+      JSON.stringify({
+        baseUnit: 'in',
+        cameraControls: 'KittyCAD',
+        defaultDirectory: '',
+        defaultProjectName: 'project-$nnn',
+        onboardingStatus: 'dismissed',
+        showDebugPanel: true,
+        textWrapping: 'On',
+        theme: 'dark',
+        unitSystem: 'imperial',
+      })
+    )
+  }, secrets.token)
   // reducedMotion kills animations, which speeds up tests and reduces flakiness
   await page.emulateMedia({ reducedMotion: 'reduce' })
 })
 
-test.use({
-  storageState: structuredClone(basicStorageState),
-})
-
 test.setTimeout(60_000)
 
 test('exports of each format should work', async ({ page, context }) => {
@@ -320,22 +332,6 @@ test('extrude on each default plane should be stable', async ({
   page,
   context,
 }) => {
-  await context.addInitScript(async () => {
-    localStorage.setItem(
-      'SETTINGS_PERSIST_KEY',
-      JSON.stringify({
-        baseUnit: 'in',
-        cameraControls: 'KittyCAD',
-        defaultDirectory: '',
-        defaultProjectName: 'project-$nnn',
-        onboardingStatus: 'dismissed',
-        showDebugPanel: true,
-        textWrapping: 'On',
-        theme: 'dark',
-        unitSystem: 'imperial',
-      })
-    )
-  })
   const u = getUtils(page)
   const makeCode = (plane = 'XY') => `const part001 = startSketchOn('${plane}')
   |> startProfileAt([7.00, 4.40], %)
@@ -357,26 +353,29 @@ test('extrude on each default plane should be stable', async ({
   await u.openDebugPanel()
   await u.expectCmdLog('[data-message-type="execution-done"]')
   await u.clearAndCloseDebugPanel()
-  await page.waitForTimeout(200)
+
+  await page.getByText('Code').click()
+  await expect(page).toHaveScreenshot({
+    maxDiffPixels: 100,
+  })
+  await page.getByText('Code').click()
 
   const runSnapshotsForOtherPlanes = async (plane = 'XY') => {
     // clear code
     await u.removeCurrentCode()
     // add makeCode('XZ')
-    await u.openAndClearDebugPanel()
     await page.locator('.cm-content').fill(makeCode(plane))
     // wait for execution done
+    await u.openDebugPanel()
     await u.expectCmdLog('[data-message-type="execution-done"]')
     await u.clearAndCloseDebugPanel()
 
     await page.getByText('Code').click()
-    await page.waitForTimeout(150)
     await expect(page).toHaveScreenshot({
       maxDiffPixels: 100,
     })
     await page.getByText('Code').click()
   }
-  await runSnapshotsForOtherPlanes('XY')
   await runSnapshotsForOtherPlanes('-XY')
 
   await runSnapshotsForOtherPlanes('XZ')
@@ -387,6 +386,22 @@ test('extrude on each default plane should be stable', async ({
 })
 
 test('Draft segments should look right', async ({ page, context }) => {
+  await context.addInitScript(async () => {
+    localStorage.setItem(
+      'SETTINGS_PERSIST_KEY',
+      JSON.stringify({
+        baseUnit: 'in',
+        cameraControls: 'KittyCAD',
+        defaultDirectory: '',
+        defaultProjectName: 'project-$nnn',
+        onboardingStatus: 'dismissed',
+        showDebugPanel: true,
+        textWrapping: 'On',
+        theme: 'dark',
+        unitSystem: 'imperial',
+      })
+    )
+  })
   const u = getUtils(page)
   await page.setViewportSize({ width: 1200, height: 500 })
   const PUR = 400 / 37.5 //pixeltoUnitRatio
@@ -445,9 +460,26 @@ test('Draft segments should look right', async ({ page, context }) => {
   })
 })
 
-test('Client side scene scale should match engine scale - Inch', async ({
+test('Client side scene scale should match engine scale inch', async ({
   page,
+  context,
 }) => {
+  await context.addInitScript(async () => {
+    localStorage.setItem(
+      'SETTINGS_PERSIST_KEY',
+      JSON.stringify({
+        baseUnit: 'in',
+        cameraControls: 'KittyCAD',
+        defaultDirectory: '',
+        defaultProjectName: 'project-$nnn',
+        onboardingStatus: 'dismissed',
+        showDebugPanel: true,
+        textWrapping: 'On',
+        theme: 'dark',
+        unitSystem: 'imperial',
+      })
+    )
+  })
   const u = getUtils(page)
   await page.setViewportSize({ width: 1200, height: 500 })
   const PUR = 400 / 37.5 //pixeltoUnitRatio
@@ -480,7 +512,7 @@ test('Client side scene scale should match engine scale - Inch', async ({
   await page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10)
   await expect(page.locator('.cm-content'))
     .toHaveText(`const part001 = startSketchOn('-XZ')
-  |> startProfileAt([9.06, -12.22], %)`)
+|> startProfileAt([9.06, -12.22], %)`)
   await page.waitForTimeout(100)
 
   await u.closeDebugPanel()
@@ -490,8 +522,8 @@ test('Client side scene scale should match engine scale - Inch', async ({
 
   await expect(page.locator('.cm-content'))
     .toHaveText(`const part001 = startSketchOn('-XZ')
-  |> startProfileAt([9.06, -12.22], %)
+|> startProfileAt([9.06, -12.22], %)
-  |> line([9.14, 0], %)`)
+|> line([9.14, 0], %)`)
 
   await page.getByRole('button', { name: 'Tangential Arc' }).click()
   await page.waitForTimeout(100)
@@ -500,9 +532,9 @@ test('Client side scene scale should match engine scale - Inch', async ({
 
   await expect(page.locator('.cm-content'))
     .toHaveText(`const part001 = startSketchOn('-XZ')
-  |> startProfileAt([9.06, -12.22], %)
+|> startProfileAt([9.06, -12.22], %)
-  |> line([9.14, 0], %)
+|> line([9.14, 0], %)
-  |> tangentialArcTo([27.34, -3.08], %)`)
+|> tangentialArcTo([27.34, -3.08], %)`)
 
   // click tangential arc tool again to unequip it
   await page.getByRole('button', { name: 'Tangential Arc' }).click()
@@ -528,101 +560,102 @@ test('Client side scene scale should match engine scale - Inch', async ({
   })
 })
 
-test.describe('Client side scene scale should match engine scale - Millimeters', () => {
+test('Client side scene scale should match engine scale mm', async ({
-  const storageState = structuredClone(basicStorageState)
+  page,
-  storageState.origins[0].localStorage[2].value = TOML.stringify({
+  context,
-    settings: {
+}) => {
-      ...basicSettings,
+  await context.addInitScript(async () => {
-      modeling: {
+    localStorage.setItem(
-        ...basicSettings.modeling,
+      'SETTINGS_PERSIST_KEY',
-        defaultUnit: 'mm',
+      JSON.stringify({
-      },
+        baseUnit: 'mm',
-    },
+        cameraControls: 'KittyCAD',
+        defaultDirectory: '',
+        defaultProjectName: 'project-$nnn',
+        onboardingStatus: 'dismissed',
+        showDebugPanel: true,
+        textWrapping: 'On',
+        theme: 'dark',
+        unitSystem: 'metric',
+      })
+    )
   })
-  test.use({
+  const u = getUtils(page)
-    storageState,
+  await page.setViewportSize({ width: 1200, height: 500 })
+  const PUR = 400 / 37.5 //pixeltoUnitRatio
+  await page.goto('/')
+  await u.waitForAuthSkipAppStart()
+  await u.openDebugPanel()
+
+  await expect(
+    page.getByRole('button', { name: 'Start Sketch' })
+  ).not.toBeDisabled()
+  await expect(page.getByRole('button', { name: 'Start Sketch' })).toBeVisible()
+
+  // click on "Start Sketch" button
+  await u.clearCommandLogs()
+  await u.doAndWaitForImageDiff(
+    () => page.getByRole('button', { name: 'Start Sketch' }).click(),
+    200
+  )
+
+  // select a plane
+  await page.mouse.click(700, 200)
+
+  await expect(page.locator('.cm-content')).toHaveText(
+    `const part001 = startSketchOn('-XZ')`
+  )
+
+  await page.waitForTimeout(300) // TODO detect animation ending, or disable animation
+
+  const startXPx = 600
+  await page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10)
+  await expect(page.locator('.cm-content'))
+    .toHaveText(`const part001 = startSketchOn('-XZ')
+  |> startProfileAt([230.03, -310.32], %)`)
+  await page.waitForTimeout(100)
+
+  await u.closeDebugPanel()
+
+  await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 10)
+  await page.waitForTimeout(100)
+
+  await expect(page.locator('.cm-content'))
+    .toHaveText(`const part001 = startSketchOn('-XZ')
+  |> startProfileAt([230.03, -310.32], %)
+  |> line([232.2, 0], %)`)
+
+  await page.getByRole('button', { name: 'Tangential Arc' }).click()
+  await page.waitForTimeout(100)
+
+  await page.mouse.click(startXPx + PUR * 30, 500 - PUR * 20)
+
+  await expect(page.locator('.cm-content'))
+    .toHaveText(`const part001 = startSketchOn('-XZ')
+  |> startProfileAt([230.03, -310.32], %)
+  |> line([232.2, 0], %)
+  |> tangentialArcTo([694.43, -78.12], %)`)
+
+  await page.getByRole('button', { name: 'Tangential Arc' }).click()
+  await page.waitForTimeout(100)
+
+  // screen shot should show the sketch
+  await expect(page).toHaveScreenshot({
+    maxDiffPixels: 100,
   })
 
-  test('Millimeters', async ({ page }) => {
+  // exit sketch
-    const u = getUtils(page)
+  await u.openAndClearDebugPanel()
-    await page.setViewportSize({ width: 1200, height: 500 })
+  await page.getByRole('button', { name: 'Exit Sketch' }).click()
-    const PUR = 400 / 37.5 //pixeltoUnitRatio
-    await page.goto('/')
-    await u.waitForAuthSkipAppStart()
-    await u.openDebugPanel()
 
-    await expect(
+  // wait for execution done
-      page.getByRole('button', { name: 'Start Sketch' })
+  await u.expectCmdLog('[data-message-type="execution-done"]')
-    ).not.toBeDisabled()
+  await u.clearAndCloseDebugPanel()
-    await expect(
+  await page.waitForTimeout(200)
-      page.getByRole('button', { name: 'Start Sketch' })
-    ).toBeVisible()
 
-    // click on "Start Sketch" button
+  // second screen shot should look almost identical, i.e. scale should be the same.
-    await u.clearCommandLogs()
+  await expect(page).toHaveScreenshot({
-    await u.doAndWaitForImageDiff(
+    maxDiffPixels: 100,
-      () => page.getByRole('button', { name: 'Start Sketch' }).click(),
-      200
-    )
-
-    // select a plane
-    await page.mouse.click(700, 200)
-
-    await expect(page.locator('.cm-content')).toHaveText(
-      `const part001 = startSketchOn('-XZ')`
-    )
-
-    await page.waitForTimeout(300) // TODO detect animation ending, or disable animation
-
-    const startXPx = 600
-    await page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10)
-    await expect(page.locator('.cm-content'))
-      .toHaveText(`const part001 = startSketchOn('-XZ')
-      |> startProfileAt([230.03, -310.32], %)`)
-    await page.waitForTimeout(100)
-
-    await u.closeDebugPanel()
-
-    await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 10)
-    await page.waitForTimeout(100)
-
-    await expect(page.locator('.cm-content'))
-      .toHaveText(`const part001 = startSketchOn('-XZ')
-      |> startProfileAt([230.03, -310.32], %)
-      |> line([232.2, 0], %)`)
-
-    await page.getByRole('button', { name: 'Tangential Arc' }).click()
-    await page.waitForTimeout(100)
-
-    await page.mouse.click(startXPx + PUR * 30, 500 - PUR * 20)
-
-    await expect(page.locator('.cm-content'))
-      .toHaveText(`const part001 = startSketchOn('-XZ')
-      |> startProfileAt([230.03, -310.32], %)
-      |> line([232.2, 0], %)
-      |> tangentialArcTo([694.43, -78.12], %)`)
-
-    await page.getByRole('button', { name: 'Tangential Arc' }).click()
-    await page.waitForTimeout(100)
-
-    // screen shot should show the sketch
-    await expect(page).toHaveScreenshot({
-      maxDiffPixels: 100,
-    })
-
-    // exit sketch
-    await u.openAndClearDebugPanel()
-    await page.getByRole('button', { name: 'Exit Sketch' }).click()
-
-    // wait for execution done
-    await u.expectCmdLog('[data-message-type="execution-done"]')
-    await u.clearAndCloseDebugPanel()
-    await page.waitForTimeout(200)
-
-    // second screen shot should look almost identical, i.e. scale should be the same.
-    await expect(page).toHaveScreenshot({
-      maxDiffPixels: 100,
-    })
   })
 })
 
@@ -633,14 +666,14 @@ test('Sketch on face with none z-up', async ({ page, context }) => {
       'persistCode',
       `const part001 = startSketchOn('-XZ')
   |> startProfileAt([1.4, 2.47], %)
-  |> line([9.31, 10.55], %, 'seg01')
+  |> line({ to: [9.31, 10.55], tag: 'seg01' }, %)
   |> line([11.91, -10.42], %)
   |> close(%)
   |> extrude(5 + 7, %)
 const part002 = startSketchOn(part001, 'seg01')
   |> startProfileAt([-2.89, 1.82], %)
   |> line([4.68, 3.05], %)
-  |> line([0, -7.79], %, 'seg02')
+  |> line({ to: [0, -7.79], tag: 'seg02' }, %)
   |> close(%)
   |> extrude(5 + 7, %)
 `
@@ -667,4 +700,6 @@ const part002 = startSketchOn(part001, 'seg01')
   await expect(page).toHaveScreenshot({
     maxDiffPixels: 100,
   })
+
+  await page.waitForTimeout(200)
 })

e2e/playwright/storageStates.ts

@@ -1,40 +0,0 @@
-import { SaveSettingsPayload } from 'lib/settings/settingsTypes'
-import { secrets } from './secrets'
-import * as TOML from '@iarna/toml'
-import { Themes } from 'lib/theme'
-
-export const basicSettings = {
-  app: {
-    theme: Themes.Dark,
-    onboardingStatus: 'dismissed',
-    projectDirectory: '',
-  },
-  modeling: {
-    defaultUnit: 'in',
-    mouseControls: 'KittyCAD',
-    showDebugPanel: true,
-  },
-  projects: {
-    defaultProjectName: 'project-$nnn',
-  },
-  textEditor: {
-    textWrapping: true,
-  },
-} satisfies Partial<SaveSettingsPayload>
-
-export const basicStorageState = {
-  cookies: [],
-  origins: [
-    {
-      origin: 'http://localhost:3000',
-      localStorage: [
-        { name: 'TOKEN_PERSIST_KEY', value: secrets.token },
-        { name: 'persistCode', value: '' },
-        {
-          name: '/user.toml',
-          value: TOML.stringify({ settings: basicSettings }),
-        },
-      ],
-    },
-  ],
-}

e2e/playwright/test-utils.ts

@@ -33,7 +33,7 @@ async function clearCommandLogs(page: Page) {
 }
 
 async function expectCmdLog(page: Page, locatorStr: string) {
-  await expect(page.locator(locatorStr).last()).toBeVisible()
+  await expect(page.locator(locatorStr)).toBeVisible()
 }
 
 async function waitForDefaultPlanesToBeVisible(page: Page) {

e2e/tauri/specs/auth.e2e.ts

@@ -1,10 +1,7 @@
 import { browser, $, expect } from '@wdio/globals'
 import fs from 'fs/promises'
 
-const documentsDir = `${process.env.HOME}/Documents`
+const defaultDir = `${process.env.HOME}/Documents/zoo-modeling-app-projects`
-const userSettingsFile = `${process.env.HOME}/.config/dev.zoo.modeling-app/user.toml`
-const defaultProjectDir = `${documentsDir}/zoo-modeling-app-projects`
-const newProjectDir = `${documentsDir}/a-different-directory`
 const userCodeDir = '/tmp/kittycad_user_code'
 
 async function click(element: WebdriverIO.Element): Promise<void> {
@@ -13,25 +10,12 @@ async function click(element: WebdriverIO.Element): Promise<void> {
   await browser.execute('arguments[0].click();', element)
 }
 
-/* Shoutout to @Sheap on Github for a great workaround utility:
- * https://github.com/tauri-apps/tauri/issues/6541#issue-1638944060
- */
-async function setDatasetValue(
-  field: WebdriverIO.Element,
-  property: string,
-  value: string
-) {
-  await browser.execute(`arguments[0].dataset.${property} = "${value}"`, field)
-}
-
 describe('ZMA (Tauri, Linux)', () => {
   it('opens the auth page and signs in', async () => {
     // Clean up filesystem from previous tests
     await new Promise((resolve) => setTimeout(resolve, 100))
-    await fs.rm(defaultProjectDir, { force: true, recursive: true })
+    await fs.rm(defaultDir, { force: true, recursive: true })
     await fs.rm(userCodeDir, { force: true })
-    await fs.rm(userSettingsFile, { force: true })
-    await fs.mkdir(newProjectDir, { recursive: true })
 
     const signInButton = await $('[data-testid="sign-in-button"]')
     expect(await signInButton.getText()).toEqual('Sign in')
@@ -81,25 +65,13 @@ describe('ZMA (Tauri, Linux)', () => {
     const settingsButton = await $('[data-testid="settings-button"]')
     await click(settingsButton)
 
-    const projectDirInput = await $('[data-testid="project-directory-input"]')
+    const defaultDirInput = await $('[data-testid="default-directory-input"]')
-    expect(await projectDirInput.getValue()).toEqual(defaultProjectDir)
+    expect(await defaultDirInput.getValue()).toEqual(defaultDir)
 
-    /*
+    const nameInput = await $('[data-testid="name-input"]')
-     * We've set up the project directory input (in initialSettings.tsx)
-     * to be able to skip the folder selection dialog if data-testValue
-     * has a value, allowing us to test the input otherwise works.
-     */
-    await setDatasetValue(projectDirInput, 'testValue', newProjectDir)
-    const projectDirButton = await $('[data-testid="project-directory-button"]')
-    await click(projectDirButton)
-    await new Promise((resolve) => setTimeout(resolve, 500))
-    // This line is broken. I need a different way to grab the toast
-    await expect(await $('div*=Set project directory to')).toBeDisplayed()
-
-    const nameInput = await $('[data-testid="projects-defaultProjectName"]')
     expect(await nameInput.getValue()).toEqual('project-$nnn')
 
-    const closeButton = await $('[data-testid="settings-close-button"]')
+    const closeButton = await $('[data-testid="close-button"]')
     await click(closeButton)
   })
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "untitled-app",
-  "version": "0.17.3",
+  "version": "0.17.0",
   "private": true,
   "dependencies": {
     "@codemirror/autocomplete": "^6.15.0",
@@ -10,7 +10,6 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.18",
     "@headlessui/tailwindcss": "^0.2.0",
-    "@iarna/toml": "^2.2.5",
     "@kittycad/lib": "^0.0.56",
     "@lezer/javascript": "^1.4.9",
     "@open-rpc/client-js": "^1.8.1",
@@ -23,14 +22,13 @@
     "@ts-stack/markdown": "^1.5.0",
     "@tweenjs/tween.js": "^23.1.1",
     "@types/node": "^18.19.26",
-    "@types/react": "^18.2.73",
+    "@types/react": "^18.2.67",
     "@types/react-dom": "^18.2.22",
-    "@uiw/react-codemirror": "^4.21.25",
+    "@uiw/react-codemirror": "^4.21.24",
     "@xstate/inspect": "^0.8.0",
     "@xstate/react": "^3.2.2",
     "crypto-js": "^4.2.0",
     "debounce-promise": "^3.1.2",
-    "decamelize": "^6.0.0",
     "formik": "^2.4.3",
     "fuse.js": "^7.0.0",
     "http-server": "^14.1.1",
@@ -110,7 +108,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-env": "^7.24.3",
+    "@babel/preset-env": "^7.23.3",
     "@playwright/test": "^1.39.0",
     "@tauri-apps/cli": "^1.5.11",
     "@types/crypto-js": "^4.2.2",
@@ -134,7 +132,7 @@
     "eslint": "^8.57.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-css-modules": "^2.12.0",
-    "happy-dom": "^14.3.10",
+    "happy-dom": "^14.3.1",
     "husky": "^9.0.11",
     "pixelmatch": "^5.3.0",
     "pngjs": "^7.0.0",
@@ -143,7 +141,7 @@
     "prettier": "^2.8.0",
     "setimmediate": "^1.0.5",
     "tailwindcss": "^3.4.1",
-    "vite": "^5.2.6",
+    "vite": "^5.2.2",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-package-version": "^1.1.0",
     "vite-tsconfig-paths": "^4.3.2",

playwright.config.ts

@@ -1,5 +1,4 @@
 import { defineConfig, devices } from '@playwright/test'
-import { basicStorageState } from './e2e/playwright/storageStates'
 
 /**
  * Read environment variables from file.
@@ -29,9 +28,6 @@ export default defineConfig({
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
-
-    /* Use a common shared localStorage */
-    storageState: basicStorageState,
   },
 
   /* Configure projects for major browsers */

src-tauri/Cargo.lock

@@ -3876,7 +3876,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-fs-extra"
 version = "0.0.0"
-source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v1#73d8562849299342772e409cb4c9c2ef3073dc72"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v1#d3c7ee5a611fa243aebe7e52f6b246783783366e"
 dependencies = [
  "log",
  "serde",
@@ -4055,9 +4055,9 @@ checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20"
 
 [[package]]
 name = "tokio"
-version = "1.37.0"
+version = "1.36.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1adbebffeca75fcfd058afa480fb6c0b81e165a0323f9c9d39c9697e37c46787"
+checksum = "61285f6515fa018fb2d1e46eb21223fff441ee8db5d0f1435e8ab4f5cdb80931"
 dependencies = [
  "backtrace",
  "bytes",

src-tauri/Cargo.toml

@@ -22,7 +22,7 @@ serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
 tauri = { version = "1.6.1", features = [ "os-all", "dialog-all", "fs-all", "http-request", "path-all", "shell-open", "shell-open-api", "devtools"] }
 tauri-plugin-fs-extra = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
-tokio = { version = "1.37.0", features = ["time"] }
+tokio = { version = "1.36.0", features = ["time"] }
 toml = "0.8.2"
 
 [features]

src-tauri/tauri.conf.json

@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "zoo-modeling-app",
-    "version": "0.17.3"
+    "version": "0.17.0"
   },
   "tauri": {
     "allowlist": {

src/App.tsx

@@ -1,6 +1,6 @@
 import { useCallback, MouseEventHandler, useEffect } from 'react'
 import { DebugPanel } from './components/DebugPanel'
-import { uuidv4 } from 'lib/utils'
+import { v4 as uuidv4 } from 'uuid'
 import { PaneType, useStore } from './useStore'
 import { Logs, KCLErrors } from './components/Logs'
 import { CollapsiblePanel } from './components/CollapsiblePanel'
@@ -33,10 +33,10 @@ import { useModelingContext } from 'hooks/useModelingContext'
 import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath'
 import { isTauri } from 'lib/isTauri'
 import { useLspContext } from 'components/LspProvider'
-import { useRefreshSettings } from 'hooks/useRefreshSettings'
+import { useValidateSettings } from 'hooks/useValidateSettings'
 
 export function App() {
-  useRefreshSettings(paths.FILE + 'SETTINGS')
+  useValidateSettings()
   const { project, file } = useLoaderData() as IndexLoaderData
   const navigate = useNavigate()
   const filePath = useAbsoluteFilePath()
@@ -64,14 +64,10 @@ export function App() {
   }))
 
   const { settings } = useSettingsAuthContext()
-  const {
+  const { showDebugPanel, onboardingStatus, theme } = settings?.context || {}
-    modeling: { showDebugPanel },
-    app: { theme, onboardingStatus },
-  } = settings.context
   const { state, send } = useModelingContext()
 
-  const editorTheme =
+  const editorTheme = theme === Themes.System ? getSystemTheme() : theme
-    theme.current === Themes.System ? getSystemTheme() : theme.current
 
   // Pane toggling keyboard shortcuts
   const togglePane = useCallback(
@@ -99,7 +95,7 @@ export function App() {
   )
 
   const paneOpacity = [onboardingPaths.CAMERA, onboardingPaths.STREAMING].some(
-    (p) => p === onboardingStatus.current
+    (p) => p === onboardingStatus
   )
     ? 'opacity-20'
     : didDragInStream
@@ -153,7 +149,7 @@ export function App() {
       <ModalContainer />
       <Resizable
         className={
-          'pointer-events-none h-full flex flex-col flex-1 z-10 my-2 ml-2 pr-1 transition-opacity transition-duration-75 ' +
+          'pointer-events-none h-full flex flex-col flex-1 z-10 my-5 ml-5 pr-1 transition-opacity transition-duration-75 ' +
           +paneOpacity
         }
         defaultSize={{
@@ -166,8 +162,8 @@ export function App() {
         maxHeight={'auto'}
         handleClasses={{
           right:
-            'hover:bg-chalkboard-10 hover:dark:bg-chalkboard-110 bg-transparent transition-colors duration-75 transition-ease-out delay-100 ' +
+            'hover:bg-chalkboard-10/50 bg-transparent transition-colors duration-75 transition-ease-out delay-100 ' +
-            (buttonDownInStream || onboardingStatus.current === 'camera'
+            (buttonDownInStream || onboardingStatus === 'camera'
               ? 'pointer-events-none '
               : 'pointer-events-auto'),
         }}
@@ -202,13 +198,13 @@ export function App() {
               theme={editorTheme}
               open={openPanes.includes('kclErrors')}
               title="KCL Errors"
-              iconClassNames={{ bg: 'group-open:bg-destroy-70' }}
+              iconClassNames={{ icon: 'group-open:text-destroy-30' }}
             />
           </section>
         </div>
       </Resizable>
       <Stream className="absolute inset-0 z-0" />
-      {showDebugPanel.current && (
+      {showDebugPanel && (
         <DebugPanel
           title="Debug"
           className={

src/Router.tsx

@@ -22,18 +22,19 @@ import { paths } from 'lib/paths'
 import {
   fileLoader,
   homeLoader,
+  indexLoader,
   onboardingRedirectLoader,
-  settingsLoader,
 } from 'lib/routeLoaders'
 import { CommandBarProvider } from 'components/CommandBar/CommandBarProvider'
 import SettingsAuthProvider from 'components/SettingsAuthProvider'
 import LspProvider from 'components/LspProvider'
 import { KclContextProvider } from 'lang/KclProvider'
-import { BROWSER_PROJECT_NAME } from 'lib/constants'
+
+export const BROWSER_FILE_NAME = 'new'
 
 const router = createBrowserRouter([
   {
-    loader: settingsLoader,
+    loader: indexLoader,
     id: paths.INDEX,
     element: (
       <CommandBarProvider>
@@ -46,14 +47,14 @@ const router = createBrowserRouter([
         </KclContextProvider>
       </CommandBarProvider>
     ),
-    errorElement: <ErrorPage />,
     children: [
       {
         path: paths.INDEX,
         loader: () =>
           isTauri()
             ? redirect(paths.HOME)
-            : redirect(paths.FILE + '/%2F' + BROWSER_PROJECT_NAME),
+            : redirect(paths.FILE + '/' + BROWSER_FILE_NAME),
+        errorElement: <ErrorPage />,
       },
       {
         loader: fileLoader,
@@ -66,29 +67,29 @@ const router = createBrowserRouter([
                 <Outlet />
                 <App />
                 <CommandBar />
-                {!isTauri() && import.meta.env.PROD && <DownloadAppBanner />}
               </ModelingMachineProvider>
               <WasmErrBanner />
             </FileMachineProvider>
+            {!isTauri() && import.meta.env.PROD && <DownloadAppBanner />}
           </Auth>
         ),
         children: [
           {
-            id: paths.FILE + 'SETTINGS',
+            loader: onboardingRedirectLoader,
-            loader: settingsLoader,
+            index: true,
+            element: <></>,
+          },
+          {
             children: [
-              {
-                loader: onboardingRedirectLoader,
-                index: true,
-                element: <></>,
-              },
               {
                 path: makeUrlPathRelative(paths.SETTINGS),
+                loader: indexLoader, // very rare someone will load into settings first, but it's possible in the browser
                 element: <Settings />,
               },
               {
                 path: makeUrlPathRelative(paths.ONBOARDING.INDEX),
                 element: <Onboarding />,
+                loader: indexLoader, // very rare someone will load into settings first, but it's possible in the browser
                 children: onboardingRoutes,
               },
             ],
@@ -107,15 +108,8 @@ const router = createBrowserRouter([
         id: paths.HOME,
         loader: homeLoader,
         children: [
-          {
-            index: true,
-            element: <></>,
-            id: paths.HOME + 'SETTINGS',
-            loader: settingsLoader,
-          },
           {
             path: makeUrlPathRelative(paths.SETTINGS),
-            loader: settingsLoader,
             element: <Settings />,
           },
         ],

src/Toolbar.tsx

@@ -18,12 +18,8 @@ export const Toolbar = () => {
   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'
   const bgClassName =
-    'group-disabled:!bg-transparent group-enabled:group-hover:bg-primary group-pressed:bg-primary'
+    'group-enabled:group-hover:bg-energy-10 group-pressed:bg-energy-10 dark:group-enabled:group-hover:bg-chalkboard-80 dark:group-pressed:bg-chalkboard-80'
-  const buttonClassName =
-    'bg-chalkboard-10 dark:bg-chalkboard-100 hover:bg-chalkboard-10 dark:hover:bg-chalkboard-100'
   const pathId = useMemo(() => {
     if (!isSingleCursorInPipe(context.selectionRanges, kclManager.ast)) {
       return false
@@ -68,14 +64,12 @@ export const Toolbar = () => {
         {state.nextEvents.includes('Enter sketch') && (
           <li className="contents">
             <ActionButton
-              className={buttonClassName}
               Element="button"
               onClick={() =>
                 send({ type: 'Enter sketch', data: { forceNewSketch: true } })
               }
               icon={{
                 icon: 'sketch',
-                iconClassName,
                 bgClassName,
               }}
               disabled={disableAllButtons}
@@ -87,12 +81,10 @@ export const Toolbar = () => {
         {state.nextEvents.includes('Enter sketch') && pathId && (
           <li className="contents">
             <ActionButton
-              className={buttonClassName}
               Element="button"
               onClick={() => send({ type: 'Enter sketch' })}
               icon={{
                 icon: 'sketch',
-                iconClassName,
                 bgClassName,
               }}
               disabled={disableAllButtons}
@@ -104,12 +96,10 @@ export const Toolbar = () => {
         {state.nextEvents.includes('Cancel') && !state.matches('idle') && (
           <li className="contents">
             <ActionButton
-              className={buttonClassName}
               Element="button"
               onClick={() => send({ type: 'Cancel' })}
               icon={{
                 icon: 'arrowLeft',
-                iconClassName,
                 bgClassName,
               }}
               disabled={disableAllButtons}
@@ -122,7 +112,6 @@ export const Toolbar = () => {
           <>
             <li className="contents" key="line-button">
               <ActionButton
-                className={buttonClassName}
                 Element="button"
                 onClick={() =>
                   state?.matches('Sketch.Line tool')
@@ -130,9 +119,9 @@ export const Toolbar = () => {
                     : send('Equip Line tool')
                 }
                 aria-pressed={state?.matches('Sketch.Line tool')}
+                className="pressed:bg-energy-10/20 dark:pressed:bg-energy-80"
                 icon={{
                   icon: 'line',
-                  iconClassName,
                   bgClassName,
                 }}
                 disabled={disableAllButtons}
@@ -142,7 +131,6 @@ export const Toolbar = () => {
             </li>
             <li className="contents" key="tangential-arc-button">
               <ActionButton
-                className={buttonClassName}
                 Element="button"
                 onClick={() =>
                   state.matches('Sketch.Tangential arc to')
@@ -150,9 +138,9 @@ export const Toolbar = () => {
                     : send('Equip tangential arc to')
                 }
                 aria-pressed={state.matches('Sketch.Tangential arc to')}
+                className="pressed:bg-energy-10/20 dark:pressed:bg-energy-80"
                 icon={{
                   icon: 'arc',
-                  iconClassName,
                   bgClassName,
                 }}
                 disabled={
@@ -191,8 +179,8 @@ export const Toolbar = () => {
             .map((eventName) => (
               <li className="contents" key={eventName}>
                 <ActionButton
-                  className={buttonClassName}
                   Element="button"
+                  className="text-sm"
                   key={eventName}
                   onClick={() => send(eventName)}
                   disabled={
@@ -203,7 +191,6 @@ export const Toolbar = () => {
                   title={eventName}
                   icon={{
                     icon: 'line',
-                    iconClassName,
                     bgClassName,
                   }}
                 >
@@ -216,8 +203,8 @@ export const Toolbar = () => {
         {state.matches('idle') && (
           <li className="contents">
             <ActionButton
-              className={buttonClassName}
               Element="button"
+              className="text-sm"
               onClick={() =>
                 commandBarSend({
                   type: 'Find and select command',
@@ -232,7 +219,6 @@ export const Toolbar = () => {
               }
               icon={{
                 icon: 'extrude',
-                iconClassName,
                 bgClassName,
               }}
             >
@@ -245,14 +231,14 @@ 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">
+    <div className="max-w-full flex items-stretch rounded-l-sm rounded-r-full bg-chalkboard-10 dark:bg-chalkboard-100 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">
+      <menu className="flex-1 pl-1 pr-2 py-0 overflow-hidden rounded-l-sm whitespace-nowrap bg-chalkboard-10 dark:bg-chalkboard-100 border-solid border border-energy-10 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"
+        className="rounded-r-full pr-4 self-stretch border-energy-10 hover:border-energy-10 dark:border-chalkboard-80 bg-energy-10/50 hover:bg-energy-10 dark:bg-chalkboard-80 dark:text-energy-10"
       >
         {platform === 'darwin' ? '⌘K' : 'Ctrl+/'}
       </ActionButton>

src/clientSideScene/CameraControls.ts

@@ -21,7 +21,7 @@ import {
   Subscription,
   EngineCommandManager,
 } from 'lang/std/engineConnection'
-import { uuidv4 } from 'lib/utils'
+import { v4 as uuidv4 } from 'uuid'
 import { deg2Rad } from 'lib/utils2d'
 import { isReducedMotion, roundOff, throttle } from 'lib/utils'
 import * as TWEEN from '@tweenjs/tween.js'

src/clientSideScene/ClientSideSceneComp.tsx

@@ -4,15 +4,10 @@ import { useModelingContext } from 'hooks/useModelingContext'
 import { cameraMouseDragGuards } from 'lib/cameraControls'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { useStore } from 'useStore'
-import { ARROWHEAD, DEBUG_SHOW_BOTH_SCENES } from './sceneInfra'
+import { DEBUG_SHOW_BOTH_SCENES } from './sceneInfra'
 import { ReactCameraProperties } from './CameraControls'
 import { throttle } from 'lib/utils'
 import { sceneInfra } from 'lib/singletons'
-import {
-  EXTRA_SEGMENT_HANDLE,
-  PROFILE_START,
-  getParentGroup,
-} from './sceneEntities'
 
 function useShouldHideScene(): { hideClient: boolean; hideServer: boolean } {
   const [isCamMoving, setIsCamMoving] = useState(false)
@@ -42,10 +37,10 @@ export const ClientSideScene = ({
 }: {
   cameraControls: ReturnType<
     typeof useSettingsAuthContext
-  >['settings']['context']['modeling']['mouseControls']['current']
+  >['settings']['context']['cameraControls']
 }) => {
   const canvasRef = useRef<HTMLDivElement>(null)
-  const { state, send, context } = useModelingContext()
+  const { state, send } = useModelingContext()
   const { hideClient, hideServer } = useShouldHideScene()
   const { setHighlightRange } = useStore((s) => ({
     setHighlightRange: s.setHighlightRange,
@@ -81,33 +76,9 @@ export const ClientSideScene = ({
     }
   }, [])
 
-  let cursor = 'default'
-  if (state.matches('Sketch')) {
-    if (
-      context.mouseState.type === 'isHovering' &&
-      getParentGroup(context.mouseState.on, [
-        ARROWHEAD,
-        EXTRA_SEGMENT_HANDLE,
-        PROFILE_START,
-      ])
-    ) {
-      cursor = 'move'
-    } else if (context.mouseState.type === 'isDragging') {
-      cursor = 'grabbing'
-    } else if (
-      state.matches('Sketch.Line tool') ||
-      state.matches('Sketch.Tangential arc to')
-    ) {
-      cursor = 'crosshair'
-    } else {
-      cursor = 'default'
-    }
-  }
-
   return (
     <div
       ref={canvasRef}
-      style={{ cursor: cursor }}
       className={`absolute inset-0 h-full w-full transition-all duration-300 ${
         hideClient ? 'opacity-0' : 'opacity-100'
       } ${hideServer ? 'bg-black' : ''} ${

src/clientSideScene/helpers.ts

@@ -28,15 +28,12 @@ export function createGridHelper({
   gridHelper.rotation.x = Math.PI / 2
   return gridHelper
 }
-const fudgeFactor = 72.66985970437086
 
 export const orthoScale = (cam: OrthographicCamera | PerspectiveCamera) =>
-  (0.55 * fudgeFactor) / cam.zoom / window.innerHeight
+  0.55 / cam.zoom
 
 export const perspScale = (cam: PerspectiveCamera, group: Group | Mesh) =>
-  (group.position.distanceTo(cam.position) * cam.fov * fudgeFactor) /
+  (group.position.distanceTo(cam.position) * cam.fov) / 4000
-  4000 /
-  window.innerHeight
 
 export function isQuaternionVertical(q: Quaternion) {
   const v = new Vector3(0, 0, 1).applyQuaternion(q)

src/clientSideScene/sceneEntities.ts

@@ -12,7 +12,6 @@ import {
   OrthographicCamera,
   PerspectiveCamera,
   PlaneGeometry,
-  Points,
   Quaternion,
   Scene,
   Shape,
@@ -82,25 +81,20 @@ import {
 import { getTangentPointFromPreviousArc } from 'lib/utils2d'
 import { createGridHelper, orthoScale, perspScale } from './helpers'
 import { Models } from '@kittycad/lib'
-import { uuidv4 } from 'lib/utils'
+import { v4 as uuidv4 } from 'uuid'
 import { SketchDetails } from 'machines/modelingMachine'
 import { EngineCommandManager } from 'lang/std/engineConnection'
 
 type DraftSegment = 'line' | 'tangentialArcTo'
 
-export const EXTRA_SEGMENT_HANDLE = 'extraSegmentHandle'
-export const EXTRA_SEGMENT_OFFSET_PX = 8
-export const PROFILE_START = 'profile-start'
 export const STRAIGHT_SEGMENT = 'straight-segment'
 export const STRAIGHT_SEGMENT_BODY = 'straight-segment-body'
 export const STRAIGHT_SEGMENT_DASH = 'straight-segment-body-dashed'
-export const TANGENTIAL_ARC_TO__SEGMENT_DASH =
-  'tangential-arc-to-segment-body-dashed'
 export const TANGENTIAL_ARC_TO_SEGMENT = 'tangential-arc-to-segment'
 export const TANGENTIAL_ARC_TO_SEGMENT_BODY = 'tangential-arc-to-segment-body'
-export const SEGMENT_WIDTH_PX = 1.6
+export const TANGENTIAL_ARC_TO__SEGMENT_DASH =
-export const HIDE_SEGMENT_LENGTH = 75 // in pixels
+  'tangential-arc-to-segment-body-dashed'
-export const HIDE_HOVER_SEGMENT_LENGTH = 60 // in pixels
+export const PROFILE_START = 'profile-start'
 
 // This singleton Class is responsible for all of the things the user sees and interacts with.
 // That mostly mean sketch elements.
@@ -117,12 +111,8 @@ export class SceneEntities {
     this.engineCommandManager = engineCommandManager
     this.scene = sceneInfra?.scene
     sceneInfra?.camControls.subscribeToCamChange(this.onCamChange)
-    window.addEventListener('resize', this.onWindowResize)
   }
 
-  onWindowResize = () => {
-    this.onCamChange()
-  }
   onCamChange = () => {
     const orthoFactor = orthoScale(sceneInfra.camControls.camera)
 
@@ -292,6 +282,7 @@ export class SceneEntities {
     sketchGroup: SketchGroup
     variableDeclarationName: string
   }> {
+    sceneInfra.resetMouseListeners()
     this.createIntersectionPlane()
 
     const { truncatedAst, programMemoryOverride, variableDeclarationName } =
@@ -304,7 +295,7 @@ export class SceneEntities {
     })
     const sketchGroup = sketchGroupFromPathToNode({
       pathToNode: sketchPathToNode,
-      ast: maybeModdedAst,
+      ast: kclManager.ast,
       programMemory,
     })
     if (!Array.isArray(sketchGroup?.value))
@@ -392,7 +383,6 @@ export class SceneEntities {
           pathToNode: segPathToNode,
           isDraftSegment,
           scale: factor,
-          texture: sceneInfra.extraSegmentTexture,
         })
       } else {
         seg = straightSegment({
@@ -403,7 +393,6 @@ export class SceneEntities {
           isDraftSegment,
           scale: factor,
           callExpName,
-          texture: sceneInfra.extraSegmentTexture,
         })
       }
       seg.layers.set(SKETCH_LAYER)
@@ -446,7 +435,6 @@ export class SceneEntities {
   ) => {
     await kclManager.updateAst(modifiedAst, false)
     await this.tearDownSketch({ removeAxis: false })
-    sceneInfra.resetMouseListeners()
     await this.setupSketch({
       sketchPathToNode,
       forward,
@@ -454,12 +442,7 @@ export class SceneEntities {
       position: origin,
       maybeModdedAst: kclManager.ast,
     })
-    this.setupSketchIdleCallbacks({
+    this.setupSketchIdleCallbacks(sketchPathToNode)
-      forward,
-      up,
-      position: origin,
-      pathToNode: sketchPathToNode,
-    })
   }
   setUpDraftSegment = async (
     sketchPathToNode: PathToNode,
@@ -484,20 +467,19 @@ export class SceneEntities {
 
     const index = sg.value.length // because we've added a new segment that's not in the memory yet, no need for `-1`
 
-    const mod = addNewSketchLn({
+    let modifiedAst = addNewSketchLn({
-      node: _ast,
+      node: kclManager.ast,
       programMemory: kclManager.programMemory,
       to: [lastSeg.to[0], lastSeg.to[1]],
       from: [lastSeg.to[0], lastSeg.to[1]],
       fnName: segmentName,
       pathToNode: sketchPathToNode,
-    })
+    }).modifiedAst
-    const modifiedAst = parse(recast(mod.modifiedAst))
+    modifiedAst = parse(recast(modifiedAst))
 
     const draftExpressionsIndices = { start: index, end: index }
 
     if (shouldTearDown) await this.tearDownSketch({ removeAxis: false })
-    sceneInfra.resetMouseListeners()
     const { truncatedAst, programMemoryOverride, sketchGroup } =
       await this.setupSketch({
         sketchPathToNode,
@@ -564,104 +546,13 @@ export class SceneEntities {
           },
         })
       },
-      ...this.mouseEnterLeaveCallbacks(),
+      ...mouseEnterLeaveCallbacks(),
     })
   }
-  setupSketchIdleCallbacks = ({
+  setupSketchIdleCallbacks = (pathToNode: PathToNode) => {
-    pathToNode,
-    up,
-    forward,
-    position,
-  }: {
-    pathToNode: PathToNode
-    forward: [number, number, number]
-    up: [number, number, number]
-    position?: [number, number, number]
-  }) => {
-    let addingNewSegmentStatus: 'nothing' | 'pending' | 'added' = 'nothing'
     sceneInfra.setCallbacks({
-      onDragEnd: async () => {
+      onDrag: ({ selected, intersectionPoint, mouseEvent, intersects }) => {
-        if (addingNewSegmentStatus !== 'nothing') {
-          await this.tearDownSketch({ removeAxis: false })
-          this.setupSketch({
-            sketchPathToNode: pathToNode,
-            maybeModdedAst: kclManager.ast,
-            up,
-            forward,
-            position,
-          })
-          // setting up the callbacks again resets value in closures
-          this.setupSketchIdleCallbacks({
-            pathToNode,
-            up,
-            forward,
-            position,
-          })
-        }
-      },
-      onDrag: async ({
-        selected,
-        intersectionPoint,
-        mouseEvent,
-        intersects,
-      }) => {
         if (mouseEvent.which !== 1) return
-
-        const group = getParentGroup(selected, [EXTRA_SEGMENT_HANDLE])
-        if (group?.name === EXTRA_SEGMENT_HANDLE) {
-          const segGroup = getParentGroup(selected)
-          const pathToNode: PathToNode = segGroup?.userData?.pathToNode
-          const pathToNodeIndex = pathToNode.findIndex(
-            (x) => x[1] === 'PipeExpression'
-          )
-
-          const sketchGroup = sketchGroupFromPathToNode({
-            pathToNode,
-            ast: kclManager.ast,
-            programMemory: kclManager.programMemory,
-          })
-
-          const pipeIndex = pathToNode[pathToNodeIndex + 1][0] as number
-          if (addingNewSegmentStatus === 'nothing') {
-            const prevSegment = sketchGroup.value[pipeIndex - 2]
-            const mod = addNewSketchLn({
-              node: kclManager.ast,
-              programMemory: kclManager.programMemory,
-              to: [intersectionPoint.twoD.x, intersectionPoint.twoD.y],
-              from: [prevSegment.from[0], prevSegment.from[1]],
-              // TODO assuming it's always a straight segments being added
-              // as this is easiest, and we'll need to add "tabbing" behavior
-              // to support other segment types
-              fnName: 'line',
-              pathToNode: pathToNode,
-              spliceBetween: true,
-            })
-            addingNewSegmentStatus = 'pending'
-            await kclManager.executeAstMock(mod.modifiedAst, {
-              updates: 'code',
-            })
-            await this.tearDownSketch({ removeAxis: false })
-            this.setupSketch({
-              sketchPathToNode: pathToNode,
-              maybeModdedAst: kclManager.ast,
-              up,
-              forward,
-              position,
-            })
-            addingNewSegmentStatus = 'added'
-          } else if (addingNewSegmentStatus === 'added') {
-            const pathToNodeForNewSegment = pathToNode.slice(0, pathToNodeIndex)
-            pathToNodeForNewSegment.push([pipeIndex - 2, 'index'])
-            this.onDragSegment({
-              sketchPathToNode: pathToNodeForNewSegment,
-              object: selected,
-              intersection2d: intersectionPoint.twoD,
-              intersects,
-            })
-          }
-          return
-        }
-
         this.onDragSegment({
           object: selected,
           intersection2d: intersectionPoint.twoD,
@@ -686,7 +577,7 @@ export class SceneEntities {
         if (!event) return
         sceneInfra.modelingSend(event)
       },
-      ...this.mouseEnterLeaveCallbacks(),
+      ...mouseEnterLeaveCallbacks(),
     })
   }
   prepareTruncatedMemoryAndAst = (
@@ -864,7 +755,8 @@ export class SceneEntities {
     group.userData.to = to
     group.userData.prevSegment = prevSegment
     const arrowGroup = group.getObjectByName(ARROWHEAD) as Group
-    const extraSegmentGroup = group.getObjectByName(EXTRA_SEGMENT_HANDLE)
+
+    arrowGroup.position.set(to[0], to[1], 0)
 
     const previousPoint =
       prevSegment?.type === 'TangentialArcTo'
@@ -882,49 +774,13 @@ export class SceneEntities {
       obtuse: true,
     })
 
-    const pxLength = arcInfo.arcLength / scale
+    const arrowheadAngle =
-    const shouldHideIdle = pxLength < HIDE_SEGMENT_LENGTH
+      arcInfo.endAngle + (Math.PI / 2) * (arcInfo.ccw ? 1 : -1)
-    const shouldHideHover = pxLength < HIDE_HOVER_SEGMENT_LENGTH
+    arrowGroup.quaternion.setFromUnitVectors(
-
+      new Vector3(0, 1, 0),
-    const hoveredParent =
+      new Vector3(Math.cos(arrowheadAngle), Math.sin(arrowheadAngle), 0)
-      sceneInfra.hoveredObject &&
+    )
-      getParentGroup(sceneInfra.hoveredObject, [TANGENTIAL_ARC_TO_SEGMENT])
+    arrowGroup.scale.set(scale, scale, scale)
-    let isHandlesVisible = !shouldHideIdle
-    if (hoveredParent && hoveredParent?.uuid === group?.uuid) {
-      isHandlesVisible = !shouldHideHover
-    }
-
-    if (arrowGroup) {
-      arrowGroup.position.set(to[0], to[1], 0)
-
-      const arrowheadAngle =
-        arcInfo.endAngle + (Math.PI / 2) * (arcInfo.ccw ? 1 : -1)
-      arrowGroup.quaternion.setFromUnitVectors(
-        new Vector3(0, 1, 0),
-        new Vector3(Math.cos(arrowheadAngle), Math.sin(arrowheadAngle), 0)
-      )
-      arrowGroup.scale.set(scale, scale, scale)
-      arrowGroup.visible = isHandlesVisible
-    }
-
-    if (extraSegmentGroup) {
-      const circumferenceInPx = (2 * Math.PI * arcInfo.radius) / scale
-      const extraSegmentAngleDelta =
-        (EXTRA_SEGMENT_OFFSET_PX / circumferenceInPx) * Math.PI * 2
-      const extraSegmentAngle =
-        arcInfo.startAngle + (arcInfo.ccw ? 1 : -1) * extraSegmentAngleDelta
-      const extraSegmentOffset = new Vector2(
-        Math.cos(extraSegmentAngle) * arcInfo.radius,
-        Math.sin(extraSegmentAngle) * arcInfo.radius
-      )
-      extraSegmentGroup.position.set(
-        arcInfo.center[0] + extraSegmentOffset.x,
-        arcInfo.center[1] + extraSegmentOffset.y,
-        0
-      )
-      extraSegmentGroup.scale.set(scale, scale, scale)
-      extraSegmentGroup.visible = isHandlesVisible
-    }
 
     const tangentialArcToSegmentBody = group.children.find(
       (child) => child.userData.type === TANGENTIAL_ARC_TO_SEGMENT_BODY
@@ -971,26 +827,10 @@ export class SceneEntities {
     group.userData.from = from
     group.userData.to = to
     const shape = new Shape()
-    shape.moveTo(0, (-SEGMENT_WIDTH_PX / 2) * scale) // The width of the line in px (2.4px in this case)
+    shape.moveTo(0, -0.08 * scale)
-    shape.lineTo(0, (SEGMENT_WIDTH_PX / 2) * scale)
+    shape.lineTo(0, 0.08 * scale) // The width of the line
     const arrowGroup = group.getObjectByName(ARROWHEAD) as Group
 
-    const length = Math.sqrt(
-      Math.pow(to[0] - from[0], 2) + Math.pow(to[1] - from[1], 2)
-    )
-
-    const pxLength = length / scale
-    const shouldHideIdle = pxLength < HIDE_SEGMENT_LENGTH
-    const shouldHideHover = pxLength < HIDE_HOVER_SEGMENT_LENGTH
-
-    const hoveredParent =
-      sceneInfra.hoveredObject &&
-      getParentGroup(sceneInfra.hoveredObject, [STRAIGHT_SEGMENT])
-    let isHandlesVisible = !shouldHideIdle
-    if (hoveredParent && hoveredParent?.uuid === group?.uuid) {
-      isHandlesVisible = !shouldHideHover
-    }
-
     if (arrowGroup) {
       arrowGroup.position.set(to[0], to[1], 0)
 
@@ -1002,21 +842,6 @@ export class SceneEntities {
         .normalize()
       arrowGroup.quaternion.setFromUnitVectors(new Vector3(0, 1, 0), dir)
       arrowGroup.scale.set(scale, scale, scale)
-      arrowGroup.visible = isHandlesVisible
-    }
-
-    const extraSegmentGroup = group.getObjectByName(EXTRA_SEGMENT_HANDLE)
-    if (extraSegmentGroup) {
-      const offsetFromBase = new Vector2(to[0] - from[0], to[1] - from[1])
-        .normalize()
-        .multiplyScalar(EXTRA_SEGMENT_OFFSET_PX * scale)
-      extraSegmentGroup.position.set(
-        from[0] + offsetFromBase.x,
-        from[1] + offsetFromBase.y,
-        0
-      )
-      extraSegmentGroup.scale.set(scale, scale, scale)
-      extraSegmentGroup.visible = isHandlesVisible
     }
 
     const straightSegmentBody = group.children.find(
@@ -1194,119 +1019,6 @@ export class SceneEntities {
       },
     })
   }
-  mouseEnterLeaveCallbacks() {
-    return {
-      onMouseEnter: ({ selected, dragSelected }: OnMouseEnterLeaveArgs) => {
-        if ([X_AXIS, Y_AXIS].includes(selected?.userData?.type)) {
-          const obj = selected as Mesh
-          const mat = obj.material as MeshBasicMaterial
-          mat.color.set(obj.userData.baseColor)
-          mat.color.offsetHSL(0, 0, 0.5)
-        }
-        const parent = getParentGroup(selected, [
-          STRAIGHT_SEGMENT,
-          TANGENTIAL_ARC_TO_SEGMENT,
-          PROFILE_START,
-        ])
-        if (parent?.userData?.pathToNode) {
-          const updatedAst = parse(recast(kclManager.ast))
-          const node = getNodeFromPath<CallExpression>(
-            updatedAst,
-            parent.userData.pathToNode,
-            'CallExpression'
-          ).node
-          sceneInfra.highlightCallback([node.start, node.end])
-          const yellow = 0xffff00
-          colorSegment(selected, yellow)
-          const extraSegmentGroup = parent.getObjectByName(EXTRA_SEGMENT_HANDLE)
-          if (extraSegmentGroup) {
-            extraSegmentGroup.traverse((child) => {
-              if (child instanceof Points || child instanceof Mesh) {
-                child.material.opacity = dragSelected ? 0 : 1
-              }
-            })
-          }
-          const orthoFactor = orthoScale(sceneInfra.camControls.camera)
-
-          const factor =
-            (sceneInfra.camControls.camera instanceof OrthographicCamera
-              ? orthoFactor
-              : perspScale(sceneInfra.camControls.camera, parent)) /
-            sceneInfra._baseUnitMultiplier
-          if (parent.name === STRAIGHT_SEGMENT) {
-            this.updateStraightSegment({
-              from: parent.userData.from,
-              to: parent.userData.to,
-              group: parent,
-              scale: factor,
-            })
-          } else if (parent.name === TANGENTIAL_ARC_TO_SEGMENT) {
-            this.updateTangentialArcToSegment({
-              prevSegment: parent.userData.prevSegment,
-              from: parent.userData.from,
-              to: parent.userData.to,
-              group: parent,
-              scale: factor,
-            })
-          }
-          return
-        }
-        sceneInfra.highlightCallback([0, 0])
-      },
-      onMouseLeave: ({ selected, ...rest }: OnMouseEnterLeaveArgs) => {
-        sceneInfra.highlightCallback([0, 0])
-        const parent = getParentGroup(selected, [
-          STRAIGHT_SEGMENT,
-          TANGENTIAL_ARC_TO_SEGMENT,
-          PROFILE_START,
-        ])
-        if (parent) {
-          const orthoFactor = orthoScale(sceneInfra.camControls.camera)
-
-          const factor =
-            (sceneInfra.camControls.camera instanceof OrthographicCamera
-              ? orthoFactor
-              : perspScale(sceneInfra.camControls.camera, parent)) /
-            sceneInfra._baseUnitMultiplier
-          if (parent.name === STRAIGHT_SEGMENT) {
-            this.updateStraightSegment({
-              from: parent.userData.from,
-              to: parent.userData.to,
-              group: parent,
-              scale: factor,
-            })
-          } else if (parent.name === TANGENTIAL_ARC_TO_SEGMENT) {
-            this.updateTangentialArcToSegment({
-              prevSegment: parent.userData.prevSegment,
-              from: parent.userData.from,
-              to: parent.userData.to,
-              group: parent,
-              scale: factor,
-            })
-          }
-        }
-        const isSelected = parent?.userData?.isSelected
-        colorSegment(
-          selected,
-          isSelected ? 0x0000ff : parent?.userData?.baseColor || 0xffffff
-        )
-        const extraSegmentGroup = parent?.getObjectByName(EXTRA_SEGMENT_HANDLE)
-        if (extraSegmentGroup) {
-          extraSegmentGroup.traverse((child) => {
-            if (child instanceof Points || child instanceof Mesh) {
-              child.material.opacity = 0
-            }
-          })
-        }
-        if ([X_AXIS, Y_AXIS].includes(selected?.userData?.type)) {
-          const obj = selected as Mesh
-          const mat = obj.material as MeshBasicMaterial
-          mat.color.set(obj.userData.baseColor)
-          if (obj.userData.isSelected) mat.color.offsetHSL(0, 0, 0.2)
-        }
-      },
-    }
-  }
 }
 
 export type DefaultPlaneStr = 'XY' | 'XZ' | 'YZ' | '-XY' | '-XZ' | '-YZ'
@@ -1448,7 +1160,7 @@ function colorSegment(object: any, color: number) {
   ])
   if (straightSegmentBody) {
     straightSegmentBody.traverse((child) => {
-      if (child instanceof Mesh && !child.userData.ignoreColorChange) {
+      if (child instanceof Mesh) {
         child.material.color.set(color)
       }
     })
@@ -1549,3 +1261,53 @@ function massageFormats(a: any): Vector3 {
     ? new Vector3(a[0], a[1], a[2])
     : new Vector3(a.x, a.y, a.z)
 }
+
+function mouseEnterLeaveCallbacks() {
+  return {
+    onMouseEnter: ({ selected }: OnMouseEnterLeaveArgs) => {
+      if ([X_AXIS, Y_AXIS].includes(selected?.userData?.type)) {
+        const obj = selected as Mesh
+        const mat = obj.material as MeshBasicMaterial
+        mat.color.set(obj.userData.baseColor)
+        mat.color.offsetHSL(0, 0, 0.5)
+      }
+      const parent = getParentGroup(selected, [
+        STRAIGHT_SEGMENT,
+        TANGENTIAL_ARC_TO_SEGMENT,
+        PROFILE_START,
+      ])
+      if (parent?.userData?.pathToNode) {
+        const updatedAst = parse(recast(kclManager.ast))
+        const node = getNodeFromPath<CallExpression>(
+          updatedAst,
+          parent.userData.pathToNode,
+          'CallExpression'
+        ).node
+        sceneInfra.highlightCallback([node.start, node.end])
+        const yellow = 0xffff00
+        colorSegment(selected, yellow)
+        return
+      }
+      sceneInfra.highlightCallback([0, 0])
+    },
+    onMouseLeave: ({ selected }: OnMouseEnterLeaveArgs) => {
+      sceneInfra.highlightCallback([0, 0])
+      const parent = getParentGroup(selected, [
+        STRAIGHT_SEGMENT,
+        TANGENTIAL_ARC_TO_SEGMENT,
+        PROFILE_START,
+      ])
+      const isSelected = parent?.userData?.isSelected
+      colorSegment(
+        selected,
+        isSelected ? 0x0000ff : parent?.userData?.baseColor || 0xffffff
+      )
+      if ([X_AXIS, Y_AXIS].includes(selected?.userData?.type)) {
+        const obj = selected as Mesh
+        const mat = obj.material as MeshBasicMaterial
+        mat.color.set(obj.userData.baseColor)
+        if (obj.userData.isSelected) mat.color.offsetHSL(0, 0, 0.2)
+      }
+    },
+  }
+}

src/clientSideScene/sceneInfra.ts

@@ -18,8 +18,6 @@ import {
   Intersection,
   Object3D,
   Object3DEventMap,
-  TextureLoader,
-  Texture,
 } from 'three'
 import { compareVec2Epsilon2 } from 'lang/std/sketch'
 import { useModelingContext } from 'hooks/useModelingContext'
@@ -27,10 +25,9 @@ import * as TWEEN from '@tweenjs/tween.js'
 import { SourceRange } from 'lang/wasm'
 import { Axis } from 'lib/selections'
 import { type BaseUnit } from 'lib/settings/settingsTypes'
+import { SETTINGS_PERSIST_KEY } from 'lib/constants'
 import { CameraControls } from './CameraControls'
 import { EngineCommandManager } from 'lang/std/engineConnection'
-import { settings } from 'lib/settings/initialSettings'
-import { MouseState } from 'machines/modelingMachine'
 
 type SendType = ReturnType<typeof useModelingContext>['send']
 
@@ -57,7 +54,6 @@ export const ARROWHEAD = 'arrowhead'
 
 export interface OnMouseEnterLeaveArgs {
   selected: Object3D<Object3DEventMap>
-  dragSelected?: Object3D<Object3DEventMap>
   mouseEvent: MouseEvent
 }
 
@@ -102,26 +98,18 @@ export class SceneInfra {
   isFovAnimationInProgress = false
   _baseUnit: BaseUnit = 'mm'
   _baseUnitMultiplier = 1
-  extraSegmentTexture: Texture
-  lastMouseState: MouseState = { type: 'idle' }
-  onDragStartCallback: (arg: OnDragCallbackArgs) => void = () => {}
-  onDragEndCallback: (arg: OnDragCallbackArgs) => void = () => {}
   onDragCallback: (arg: OnDragCallbackArgs) => void = () => {}
   onMoveCallback: (arg: OnMoveCallbackArgs) => void = () => {}
   onClickCallback: (arg: OnClickCallbackArgs) => void = () => {}
   onMouseEnter: (arg: OnMouseEnterLeaveArgs) => void = () => {}
   onMouseLeave: (arg: OnMouseEnterLeaveArgs) => void = () => {}
   setCallbacks = (callbacks: {
-    onDragStart?: (arg: OnDragCallbackArgs) => void
-    onDragEnd?: (arg: OnDragCallbackArgs) => void
     onDrag?: (arg: OnDragCallbackArgs) => void
     onMove?: (arg: OnMoveCallbackArgs) => void
     onClick?: (arg: OnClickCallbackArgs) => void
     onMouseEnter?: (arg: OnMouseEnterLeaveArgs) => void
     onMouseLeave?: (arg: OnMouseEnterLeaveArgs) => void
   }) => {
-    this.onDragStartCallback = callbacks.onDragStart || this.onDragStartCallback
-    this.onDragEndCallback = callbacks.onDragEnd || this.onDragEndCallback
     this.onDragCallback = callbacks.onDrag || this.onDragCallback
     this.onMoveCallback = callbacks.onMove || this.onMoveCallback
     this.onClickCallback = callbacks.onClick || this.onClickCallback
@@ -140,8 +128,6 @@ export class SceneInfra {
   }
   resetMouseListeners = () => {
     this.setCallbacks({
-      onDragStart: () => {},
-      onDragEnd: () => {},
       onDrag: () => {},
       onMove: () => {},
       onClick: () => {},
@@ -184,7 +170,9 @@ export class SceneInfra {
 
     // CAMERA
     const camHeightDistanceRatio = 0.5
-    const baseUnit: BaseUnit = settings.modeling.defaultUnit.current
+    const baseUnit: BaseUnit =
+      JSON.parse(localStorage?.getItem(SETTINGS_PERSIST_KEY) || ('{}' as any))
+        .baseUnit || 'mm'
     const baseRadius = 5.6
     const length = baseUnitTomm(baseUnit) * baseRadius
     const ang = Math.atan(camHeightDistanceRatio)
@@ -224,13 +212,6 @@ export class SceneInfra {
     const light = new AmbientLight(0x505050) // soft white light
     this.scene.add(light)
 
-    const textureLoader = new TextureLoader()
-    this.extraSegmentTexture = textureLoader.load(
-      '/clientSideSceneAssets/extra-segment-texture.png'
-    )
-    this.extraSegmentTexture.anisotropy =
-      this.renderer?.capabilities?.getMaxAnisotropy?.()
-
     SceneInfra.instance = this
   }
 
@@ -340,6 +321,8 @@ export class SceneInfra {
         planeIntersectPoint.twoD &&
         planeIntersectPoint.threeD
       ) {
+        // // console.log('onDrag', this.selected)
+
         this.onDragCallback({
           mouseEvent,
           intersectionPoint: {
@@ -349,10 +332,6 @@ export class SceneInfra {
           intersects,
           selected: this.selected.object,
         })
-        this.updateMouseState({
-          type: 'isDragging',
-          on: this.selected.object,
-        })
       }
     } else if (
       planeIntersectPoint &&
@@ -372,34 +351,25 @@ export class SceneInfra {
     if (intersects[0]) {
       const firstIntersectObject = intersects[0].object
       if (this.hoveredObject !== firstIntersectObject) {
-        const hoveredObj = this.hoveredObject
+        if (this.hoveredObject) {
-        this.hoveredObject = null
+          this.onMouseLeave({
-        this.onMouseLeave({
+            selected: this.hoveredObject,
-          selected: hoveredObj,
+            mouseEvent: mouseEvent,
-          mouseEvent: mouseEvent,
+          })
-        })
+        }
         this.hoveredObject = firstIntersectObject
         this.onMouseEnter({
           selected: this.hoveredObject,
-          dragSelected: this.selected?.object,
           mouseEvent: mouseEvent,
         })
-        if (!this.selected)
-          this.updateMouseState({
-            type: 'isHovering',
-            on: this.hoveredObject,
-          })
       }
     } else {
       if (this.hoveredObject) {
-        const hoveredObj = this.hoveredObject
-        this.hoveredObject = null
         this.onMouseLeave({
-          selected: hoveredObj,
+          selected: this.hoveredObject,
-          dragSelected: this.selected?.object,
           mouseEvent: mouseEvent,
         })
-        if (!this.selected) this.updateMouseState({ type: 'idle' })
+        this.hoveredObject = null
       }
     }
   }
@@ -456,11 +426,6 @@ export class SceneInfra {
       (a, b) => a.distance - b.distance
     )
   }
-  updateMouseState(mouseState: MouseState) {
-    if (this.lastMouseState.type === mouseState.type) return
-    this.lastMouseState = mouseState
-    this.modelingSend({ type: 'Set mouse state', data: mouseState })
-  }
 
   onMouseDown = (event: MouseEvent) => {
     this.currentMouseVector.x = (event.clientX / window.innerWidth) * 2 - 1
@@ -490,26 +455,8 @@ export class SceneInfra {
 
     if (this.selected) {
       if (this.selected.hasBeenDragged) {
-        // TODO do the types properly here
+        // this is where we could fire a onDragEnd event
-        this.onDragEndCallback({
+        // console.log('onDragEnd', this.selected)
-          intersectionPoint: {
-            twoD: planeIntersectPoint?.twoD as any,
-            threeD: planeIntersectPoint?.threeD as any,
-          },
-          intersects,
-          mouseEvent,
-          selected: this.selected as any,
-        })
-        if (intersects.length) {
-          this.updateMouseState({
-            type: 'isHovering',
-            on: intersects[0].object,
-          })
-        } else {
-          this.updateMouseState({
-            type: 'idle',
-          })
-        }
       } else if (planeIntersectPoint?.twoD && planeIntersectPoint?.threeD) {
         // fire onClick event as there was no drags
         this.onClickCallback({

src/clientSideScene/segments.ts

@@ -12,22 +12,15 @@ import {
   Mesh,
   MeshBasicMaterial,
   NormalBufferAttributes,
-  Points,
-  PointsMaterial,
   Shape,
   SphereGeometry,
-  Texture,
   Vector2,
   Vector3,
 } from 'three'
 import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 import { PathToNode, SketchGroup, getTangentialArcToInfo } from 'lang/wasm'
 import {
-  EXTRA_SEGMENT_HANDLE,
-  EXTRA_SEGMENT_OFFSET_PX,
-  HIDE_SEGMENT_LENGTH,
   PROFILE_START,
-  SEGMENT_WIDTH_PX,
   STRAIGHT_SEGMENT,
   STRAIGHT_SEGMENT_BODY,
   STRAIGHT_SEGMENT_DASH,
@@ -51,7 +44,7 @@ export function profileStart({
 }) {
   const group = new Group()
 
-  const geometry = new BoxGeometry(12, 12, 12) // in pixels scaled later
+  const geometry = new BoxGeometry(0.8, 0.8, 0.8)
   const body = new MeshBasicMaterial({ color: 0xffffff })
   const mesh = new Mesh(geometry, body)
 
@@ -78,7 +71,6 @@ export function straightSegment({
   isDraftSegment,
   scale = 1,
   callExpName,
-  texture,
 }: {
   from: Coords2d
   to: Coords2d
@@ -87,13 +79,12 @@ export function straightSegment({
   isDraftSegment?: boolean
   scale?: number
   callExpName: string
-  texture: Texture
 }): Group {
   const group = new Group()
 
   const shape = new Shape()
-  shape.moveTo(0, (-SEGMENT_WIDTH_PX / 2) * scale)
+  shape.moveTo(0, -0.08 * scale)
-  shape.lineTo(0, (SEGMENT_WIDTH_PX / 2) * scale)
+  shape.lineTo(0, 0.08 * scale) // The width of the line
 
   let geometry
   if (isDraftSegment) {
@@ -131,44 +122,24 @@ export function straightSegment({
   }
   group.name = STRAIGHT_SEGMENT
 
-  const length = Math.sqrt(
-    Math.pow(to[0] - from[0], 2) + Math.pow(to[1] - from[1], 2)
-  )
   const arrowGroup = createArrowhead(scale)
   arrowGroup.position.set(to[0], to[1], 0)
   const dir = new Vector3()
     .subVectors(new Vector3(to[0], to[1], 0), new Vector3(from[0], from[1], 0))
     .normalize()
   arrowGroup.quaternion.setFromUnitVectors(new Vector3(0, 1, 0), dir)
-  const pxLength = length / scale
-  const shouldHide = pxLength < HIDE_SEGMENT_LENGTH
-  arrowGroup.visible = !shouldHide
 
   group.add(mesh)
   if (callExpName !== 'close') group.add(arrowGroup)
 
-  const extraSegmentGroup = createExtraSegmentHandle(scale, texture)
-  const offsetFromBase = new Vector2(to[0] - from[0], to[1] - from[1])
-    .normalize()
-    .multiplyScalar(EXTRA_SEGMENT_OFFSET_PX * scale)
-  extraSegmentGroup.position.set(
-    from[0] + offsetFromBase.x,
-    from[1] + offsetFromBase.y,
-    0
-  )
-  extraSegmentGroup.visible = !shouldHide
-  group.add(extraSegmentGroup)
-
   return group
 }
 
 function createArrowhead(scale = 1): Group {
   const arrowMaterial = new MeshBasicMaterial({ color: 0xffffff })
-  // specify the size of the geometry in pixels (i.e. cone height = 20px, cone radius = 4.5px)
+  const arrowheadMesh = new Mesh(new ConeGeometry(0.31, 1.5, 12), arrowMaterial)
-  // we'll scale the group to the correct size later to match these sizes in screen space
+  arrowheadMesh.position.set(0, -0.6, 0)
-  const arrowheadMesh = new Mesh(new ConeGeometry(4.5, 20, 12), arrowMaterial)
+  const sphereMesh = new Mesh(new SphereGeometry(0.27, 12, 12), arrowMaterial)
-  arrowheadMesh.position.set(0, -9, 0)
-  const sphereMesh = new Mesh(new SphereGeometry(4, 12, 12), arrowMaterial)
 
   const arrowGroup = new Group()
   arrowGroup.userData.type = ARROWHEAD
@@ -179,36 +150,6 @@ function createArrowhead(scale = 1): Group {
   return arrowGroup
 }
 
-function createExtraSegmentHandle(scale: number, texture: Texture): Group {
-  const particleMaterial = new PointsMaterial({
-    size: 12, // in pixels
-    map: texture,
-    transparent: true,
-    opacity: 0,
-    depthTest: false,
-  })
-  const mat = new MeshBasicMaterial({
-    transparent: true,
-    color: 0xffffff,
-    opacity: 0,
-  })
-  const particleGeometry = new BufferGeometry().setFromPoints([
-    new Vector3(0, 0, 0),
-  ])
-  const sphereMesh = new Mesh(new SphereGeometry(6, 12, 12), mat) // sphere radius in pixels
-  const particle = new Points(particleGeometry, particleMaterial)
-  particle.userData.ignoreColorChange = true
-  particle.userData.type = EXTRA_SEGMENT_HANDLE
-
-  const extraSegmentGroup = new Group()
-  extraSegmentGroup.userData.type = EXTRA_SEGMENT_HANDLE
-  extraSegmentGroup.name = EXTRA_SEGMENT_HANDLE
-  extraSegmentGroup.add(sphereMesh)
-  extraSegmentGroup.add(particle)
-  extraSegmentGroup.scale.set(scale, scale, scale)
-  return extraSegmentGroup
-}
-
 export function tangentialArcToSegment({
   prevSegment,
   from,
@@ -217,7 +158,6 @@ export function tangentialArcToSegment({
   pathToNode,
   isDraftSegment,
   scale = 1,
-  texture,
 }: {
   prevSegment: SketchGroup['value'][number]
   from: Coords2d
@@ -226,7 +166,6 @@ export function tangentialArcToSegment({
   pathToNode: PathToNode
   isDraftSegment?: boolean
   scale?: number
-  texture: Texture
 }): Group {
   const group = new Group()
 
@@ -239,13 +178,12 @@ export function tangentialArcToSegment({
         )
       : prevSegment.from
 
-  const { center, radius, startAngle, endAngle, ccw, arcLength } =
+  const { center, radius, startAngle, endAngle, ccw } = getTangentialArcToInfo({
-    getTangentialArcToInfo({
+    arcStartPoint: from,
-      arcStartPoint: from,
+    arcEndPoint: to,
-      arcEndPoint: to,
+    tanPreviousPoint: previousPoint,
-      tanPreviousPoint: previousPoint,
+    obtuse: true,
-      obtuse: true,
+  })
-    })
 
   const geometry = createArcGeometry({
     center,
@@ -281,28 +219,8 @@ export function tangentialArcToSegment({
     new Vector3(0, 1, 0),
     new Vector3(Math.cos(arrowheadAngle), Math.sin(arrowheadAngle), 0)
   )
-  const pxLength = arcLength / scale
-  const shouldHide = pxLength < HIDE_SEGMENT_LENGTH
-  arrowGroup.visible = !shouldHide
 
-  const extraSegmentGroup = createExtraSegmentHandle(scale, texture)
+  group.add(mesh, arrowGroup)
-  const circumferenceInPx = (2 * Math.PI * radius) / scale
-  const extraSegmentAngleDelta =
-    (EXTRA_SEGMENT_OFFSET_PX / circumferenceInPx) * Math.PI * 2
-  const extraSegmentAngle = startAngle + (ccw ? 1 : -1) * extraSegmentAngleDelta
-  const extraSegmentOffset = new Vector2(
-    Math.cos(extraSegmentAngle) * radius,
-    Math.sin(extraSegmentAngle) * radius
-  )
-  extraSegmentGroup.position.set(
-    center[0] + extraSegmentOffset.x,
-    center[1] + extraSegmentOffset.y,
-    0
-  )
-
-  extraSegmentGroup.visible = !shouldHide
-
-  group.add(mesh, arrowGroup, extraSegmentGroup)
 
   return group
 }
@@ -324,8 +242,8 @@ export function createArcGeometry({
   isDashed?: boolean
   scale?: number
 }): BufferGeometry {
-  const dashSizePx = 18 * scale
+  const dashSize = 1.2 * scale
-  const gapSizePx = 18 * scale
+  const gapSize = 1.2 * scale
   const arcStart = new EllipseCurve(
     center[0],
     center[1],
@@ -347,8 +265,8 @@ export function createArcGeometry({
     0
   )
   const shape = new Shape()
-  shape.moveTo(0, (-SEGMENT_WIDTH_PX / 2) * scale)
+  shape.moveTo(0, -0.08 * scale)
-  shape.lineTo(0, (SEGMENT_WIDTH_PX / 2) * scale) // The width of the line
+  shape.lineTo(0, 0.08 * scale) // The width of the line
 
   if (!isDashed) {
     const points = arcStart.getPoints(50)
@@ -363,7 +281,7 @@ export function createArcGeometry({
   }
 
   const length = arcStart.getLength()
-  const totalDashes = length / (dashSizePx + gapSizePx) // rounding makes the dashes jittery since the new dash is suddenly appears instead of growing into place
+  const totalDashes = length / (dashSize + gapSize) // rounding makes the dashes jittery since the new dash is suddenly appears instead of growing into place
   const dashesAtEachEnd = Math.min(100, totalDashes / 2) // Assuming we want 50 dashes total, 25 at each end
 
   const dashGeometries = []
@@ -371,8 +289,8 @@ export function createArcGeometry({
   // Function to create a dash at a specific t value (0 to 1 along the curve)
   const createDashAt = (t: number, curve: EllipseCurve) => {
     const startVec = curve.getPoint(t)
-    const endVec = curve.getPoint(Math.min(0.5, t + dashSizePx / length))
+    const endVec = curve.getPoint(Math.min(0.5, t + dashSize / length))
-    const midVec = curve.getPoint(Math.min(0.5, t + dashSizePx / length / 2))
+    const midVec = curve.getPoint(Math.min(0.5, t + dashSize / length / 2))
     const dashCurve = new CurvePath<Vector3>()
     dashCurve.add(
       new CatmullRomCurve3([
@@ -396,8 +314,7 @@ export function createArcGeometry({
   }
 
   // fill in the remaining arc
-  const remainingArcLength =
+  const remainingArcLength = length - dashesAtEachEnd * 2 * (dashSize + gapSize)
-    length - dashesAtEachEnd * 2 * (dashSizePx + gapSizePx)
   if (remainingArcLength > 0) {
     const remainingArcStartT = dashesAtEachEnd / totalDashes
     const remainingArcEndT = 1 - remainingArcStartT
@@ -442,8 +359,8 @@ export function dashedStraight(
   shape: Shape,
   scale = 1
 ): BufferGeometry<NormalBufferAttributes> {
-  const dashSize = 18 * scale
+  const dashSize = 1.2 * scale
-  const gapSize = 18 * scale // TODO: gapSize is not respected
+  const gapSize = 1.2 * scale // todo: gabSize is not respected
   const dashLine = new LineCurve3(
     new Vector3(from[0], from[1], 0),
     new Vector3(to[0], to[1], 0)

src/colors.css

@@ -1,21 +1,11 @@
 :root {
-  --primary-hue: 264.48;
-  --primary-chroma: 0.2167;
-  --primary-lightness: 60%;
-  --_primary: var(--primary-lightness) var(--primary-chroma)
-    var(--primary-hue, 264.48);
-  --primary: oklch(
-    var(--primary-lightness) var(--primary-chroma) var(--primary-hue, 264.48) /
-      var(--opacity, 1)
-  );
-
   /*
         Generated using Catmosphere Theme Builder
         by KittyCAD
         https://catmosphere-theme-builder.vercel.app/?colors=%5B%7B%22from%22:%7B%22l%22:1,%22c%22:0.01,%22h%22:78%7D,%22to%22:%7B%22l%22:0.065,%22c%22:0.05,%22h%22:182.6%7D,%22stops%22:10,%22steps%22:12%7D,%7B%22from%22:%7B%22l%22:1,%22c%22:0.45,%22h%22:122.4%7D,%22to%22:%7B%22l%22:0.13,%22c%22:0.031,%22h%22:137.2%7D,%22stops%22:10,%22steps%22:12%7D,%7B%22from%22:%7B%22l%22:1,%22c%22:0.13,%22h%22:176%7D,%22to%22:%7B%22l%22:0.116,%22c%22:0.097,%22h%22:213.1%7D,%22stops%22:10,%22steps%22:12%7D,%7B%22from%22:%7B%22l%22:1,%22c%22:0.169,%22h%22:144.4%7D,%22to%22:%7B%22l%22:0.12,%22c%22:0.45,%22h%22:132.7%7D,%22steps%22:12%7D,%7B%22from%22:%7B%22l%22:1,%22c%22:0.087,%22h%22:261.6%7D,%22to%22:%7B%22l%22:0.22,%22c%22:0.084,%22h%22:275.5%7D,%22steps%22:12,%22uuid%22:%227tpx9pf1zd6%22%7D,%7B%22from%22:%7B%22l%22:0.954,%22c%22:0.108,%22h%22:280.6%7D,%22to%22:%7B%22l%22:0.166,%22c%22:0.188,%22h%22:263.8%7D,%22steps%22:12,%22uuid%22:%22vu652mebd3%22%7D,%7B%22from%22:%7B%22l%22:1,%22c%22:0.115,%22h%22:0%7D,%22to%22:%7B%22l%22:0.096,%22c%22:0.261,%22h%22:302%7D,%22steps%22:12%7D,%7B%22from%22:%7B%22l%22:1,%22c%22:0.185,%22h%22:19.8%7D,%22to%22:%7B%22l%22:0.368,%22c%22:0.45,%22h%22:9.4%7D,%22steps%22:8,%22uuid%22:%22g05inkd34l%22%7D,%7B%22from%22:%7B%22l%22:0.912,%22c%22:0.139,%22h%22:87%7D,%22to%22:%7B%22l%22:0.502,%22c%22:0.45,%22h%22:97.7%7D,%22steps%22:8,%22uuid%22:%22l892hcw4ef%22%7D,%7B%22from%22:%7B%22l%22:0.89,%22c%22:0.16,%22h%22:143.4%7D,%22to%22:%7B%22l%22:0.466,%22c%22:0.208,%22h%22:147.7%7D,%22steps%22:8,%22uuid%22:%22hkd09y9ov4h%22%7D%5D
     */
   /* Chalkboard */
-  --chalkboard-10: oklch(99.9% 0.003766 102.8deg);
+  --chalkboard-10: oklch(99.7% 0.008766 102.8deg);
   --chalkboard-20: oklch(91.34% 0.009353 109deg);
   --chalkboard-30: oklch(82.99% 0.00994 115.2deg);
   --chalkboard-40: oklch(74.63% 0.01053 121.4deg);

src/components/ActionIcon.tsx

@@ -30,9 +30,9 @@ export const ActionIcon = ({
   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 computedIconClassName = `h-auto dark:text-energy-10 !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 computedBgClassName = `bg-chalkboard-20 dark:bg-chalkboard-90 !group-disabled:bg-chalkboard-30 !dark:group-disabled:bg-chalkboard-80 ${bgClassName}`
 
   return (
     <div

src/components/AppHeader.tsx

@@ -33,7 +33,7 @@ export const AppHeader = ({
       className={
         'w-full grid ' +
         styles.header +
-        ' overlaid-panes sticky top-0 z-20 px-2 items-center ' +
+        ' overlaid-panes sticky top-0 z-20 py-1 px-2 bg-chalkboard-10/70 dark:bg-chalkboard-100/50 border-b dark:border-b-2 border-chalkboard-30 dark:border-chalkboard-90 items-center ' +
         className
       }
     >
@@ -53,13 +53,13 @@ export const AppHeader = ({
             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">
+            <kbd className="bg-energy-10/50 dark:bg-chalkboard-100 dark:text-energy-10 inline-block px-1 py-0.5 border-energy-10 dark:border-chalkboard-90">
               {platform === 'darwin' ? '⌘K' : 'Ctrl+/'}
             </kbd>
           </ActionButton>
         )}
       </div>
-      <div className="flex items-center gap-1 py-1 ml-auto">
+      <div className="flex items-center gap-1 ml-auto">
         {/* If there are children, show them, otherwise show User menu */}
         {children || (
           <>

src/components/CodeMenu.module.css

@@ -1,13 +1,13 @@
 .button {
   @apply flex justify-between items-center gap-2 px-2 py-1 text-left border-none rounded-sm;
   @apply font-mono !no-underline text-xs font-bold select-none text-chalkboard-90;
-  @apply ui-active:bg-primary/10 ui-active:text-primary ui-active:text-inherit;
+  @apply ui-active:bg-energy-10/50 ui-active:text-inherit;
   @apply transition-colors ease-out;
 }
 
 :global(.dark) .button {
-  @apply !text-chalkboard-30;
+  @apply text-chalkboard-30;
-  @apply ui-active:bg-chalkboard-90;
+  @apply ui-active:bg-chalkboard-80 ui-active:text-energy-10;
 }
 
 .button small {

src/components/CodeMenu.tsx

@@ -30,12 +30,12 @@ export const CodeMenu = ({ children }: PropsWithChildren) => {
             className="p-1"
             size="sm"
             bgClassName={
-              '!bg-transparent hover:!bg-primary/10 hover:dark:!bg-chalkboard-100 ui-active:!bg-primary/10 dark:ui-active:!bg-chalkboard-100 rounded-sm'
+              'bg-chalkboard-20 dark:bg-chalkboard-110 hover:bg-energy-10/50 hover:dark:bg-chalkboard-90 ui-active:bg-chalkboard-80 ui-active:dark:bg-chalkboard-90 rounded-sm'
             }
-            iconClassName={'!text-chalkboard-90 dark:!text-chalkboard-40'}
+            iconClassName={'text-chalkboard-90 dark:text-chalkboard-40'}
           />
         </Menu.Button>
-        <Menu.Items className="absolute right-0 left-auto w-72 flex flex-col gap-1 divide-y divide-chalkboard-20 dark:divide-chalkboard-70 align-stretch px-0 py-1 bg-chalkboard-10 dark:bg-chalkboard-100 rounded-sm shadow-lg border border-solid border-chalkboard-20/50 dark:border-chalkboard-80/50">
+        <Menu.Items className="absolute right-0 left-auto w-72 flex flex-col gap-1 divide-y divide-chalkboard-20 dark:divide-chalkboard-70 align-stretch px-0 py-1 bg-chalkboard-10 dark:bg-chalkboard-90 rounded-sm shadow-lg border border-solid border-chalkboard-20/50 dark:border-chalkboard-80/50">
           <Menu.Item>
             <button
               onClick={() => kclManager.format()}

src/components/CollapsiblePanel.module.css

@@ -3,11 +3,6 @@
   @apply bg-chalkboard-10/70 backdrop-blur-sm;
 }
 
-.header::before,
-.header::-webkit-details-marker {
-  display: none;
-}
-
 :global(.dark) .panel {
   @apply bg-chalkboard-110/50 backdrop-blur-0;
 }
@@ -16,7 +11,7 @@
   @apply sticky top-0 z-10 cursor-pointer;
   @apply flex items-center justify-between gap-2 w-full p-2;
   @apply font-mono text-xs font-bold select-none text-chalkboard-90;
-  @apply bg-chalkboard-10;
+  @apply bg-chalkboard-20;
 }
 
 .header:not(:last-of-type) {

src/components/CollapsiblePanel.tsx

@@ -30,11 +30,11 @@ export const PanelHeader = ({
           className="p-1"
           size="sm"
           bgClassName={
-            'dark:!bg-transparent group-open:bg-primary dark:group-open:!bg-primary rounded-sm ' +
+            'dark:!bg-chalkboard-100 group-open:bg-chalkboard-80 dark:group-open:!bg-chalkboard-90 border border-transparent dark:group-open:border-chalkboard-60 rounded-sm ' +
             (iconClassNames?.bg || '')
           }
           iconClassName={
-            'group-open:text-chalkboard-10 ' + (iconClassNames?.icon || '')
+            'group-open:text-energy-10 ' + (iconClassNames?.icon || '')
           }
         />
         {title}

src/components/CommandBar/CommandArgOptionInput.tsx

@@ -1,35 +1,29 @@
 import { Combobox } from '@headlessui/react'
-import { useSelector } from '@xstate/react'
 import Fuse from 'fuse.js'
 import { useCommandsContext } from 'hooks/useCommandsContext'
 import { CommandArgument, CommandArgumentOption } from 'lib/commandTypes'
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { AnyStateMachine, StateFrom } from 'xstate'
-
-const contextSelector = (snapshot: StateFrom<AnyStateMachine>) =>
-  snapshot.context
 
 function CommandArgOptionInput({
-  arg,
+  options,
   argName,
   stepBack,
   onSubmit,
   placeholder,
 }: {
-  arg: CommandArgument<unknown> & { inputType: 'options' }
+  options: (CommandArgument<unknown> & { inputType: 'options' })['options']
   argName: string
   stepBack: () => void
   onSubmit: (data: unknown) => void
   placeholder?: string
 }) {
-  const actorContext = useSelector(arg.machineActor, contextSelector)
   const { commandBarSend, commandBarState } = useCommandsContext()
   const resolvedOptions = useMemo(
     () =>
-      typeof arg.options === 'function'
+      typeof options === 'function'
-        ? arg.options(commandBarState.context, actorContext)
+        ? options(commandBarState.context)
-        : arg.options,
+        : options,
-    [argName, arg, commandBarState.context, actorContext]
+    [argName, options, commandBarState.context]
   )
   // The initial current option is either an already-input value or the configured default
   const currentOption = useMemo(
@@ -44,7 +38,7 @@ function CommandArgOptionInput({
   const [selectedOption, setSelectedOption] = useState<
     CommandArgumentOption<unknown>
   >(currentOption || resolvedOptions[0])
-  const initialQuery = useMemo(() => '', [arg.options, argName])
+  const initialQuery = useMemo(() => '', [options, argName])
   const [query, setQuery] = useState(initialQuery)
   const [filteredOptions, setFilteredOptions] =
     useState<typeof resolvedOptions>()
@@ -141,7 +135,7 @@ function CommandArgOptionInput({
             <Combobox.Option
               key={option.name}
               value={option}
-              className="flex items-center gap-2 px-4 py-1 first:mt-2 last:mb-2 ui-active:bg-primary/10 dark:ui-active:bg-chalkboard-90"
+              className="flex items-center gap-2 px-4 py-1 first:mt-2 last:mb-2 ui-active:bg-energy-10/50 dark:ui-active:bg-chalkboard-90"
             >
               <p className="flex-grow">{option.name} </p>
               {option.value === currentOption?.value && (

src/components/CommandBar/CommandBarArgument.tsx

@@ -51,24 +51,7 @@ function ArgumentInput({
     case 'options':
       return (
         <CommandArgOptionInput
-          arg={arg}
+          options={arg.options}
-          argName={arg.name}
-          stepBack={stepBack}
-          onSubmit={onSubmit}
-          placeholder="Select an option"
-        />
-      )
-    case 'boolean':
-      return (
-        <CommandArgOptionInput
-          arg={{
-            ...arg,
-            inputType: 'options',
-            options: [
-              { name: 'On', value: true },
-              { name: 'Off', value: false },
-            ],
-          }}
           argName={arg.name}
           stepBack={stepBack}
           onSubmit={onSubmit}

src/components/CommandBar/CommandBarHeader.tsx

@@ -74,7 +74,7 @@ function CommandBarHeader({ children }: React.PropsWithChildren<{}>) {
                 selectedCommand.icon && (
                   <CustomIcon name={selectedCommand.icon} className="w-5 h-5" />
                 )}
-              {selectedCommand.displayName || selectedCommand.name}
+              {selectedCommand?.name}
             </p>
             {Object.entries(selectedCommand?.args || {})
               .filter(([_, argConfig]) =>
@@ -104,7 +104,7 @@ function CommandBarHeader({ children }: React.PropsWithChildren<{}>) {
                     key={argName}
                     className={`relative w-fit px-2 py-1 rounded-sm flex gap-2 items-center border ${
                       argName === currentArgument?.name
-                        ? 'disabled:bg-primary/10 dark:disabled:bg-primary/20 disabled:border-primary dark:disabled:border-primary disabled:text-chalkboard-100 dark:disabled:text-chalkboard-10'
+                        ? 'disabled:bg-energy-10/50 dark:disabled:bg-energy-10/20 disabled:border-energy-10 dark:disabled:border-energy-10 disabled:text-chalkboard-100 dark:disabled:text-chalkboard-10'
                         : 'bg-chalkboard-20/50 dark:bg-chalkboard-80/50 border-chalkboard-20 dark:border-chalkboard-80'
                     }`}
                   >
@@ -129,7 +129,7 @@ function CommandBarHeader({ children }: React.PropsWithChildren<{}>) {
                       )
                     ) : null}
                     {showShortcuts && (
-                      <small className="absolute -top-[1px] right-full translate-x-1/2 px-0.5 rounded-sm bg-chalkboard-80 text-chalkboard-10 dark:bg-primary dark:text-chalkboard-100">
+                      <small className="absolute -top-[1px] right-full translate-x-1/2 px-0.5 rounded-sm bg-chalkboard-80 text-chalkboard-10 dark:bg-energy-10 dark:text-chalkboard-100">
                         <span className="sr-only">Hotkey: </span>
                         {i + 1}
                       </small>
@@ -174,11 +174,12 @@ function ReviewingButton() {
       autoFocus
       type="submit"
       form="review-form"
-      className="w-fit !p-0 rounded-sm border !border-primary hover:shadow"
+      className="w-fit !p-0 rounded-sm border !border-chalkboard-100 dark:!border-energy-10 hover:shadow"
       icon={{
         icon: 'checkmark',
-        bgClassName: 'p-1 rounded-sm !bg-primary hover:brightness-110',
+        bgClassName:
-        iconClassName: '!text-chalkboard-10',
+          'p-1 rounded-sm !bg-chalkboard-100 hover:!bg-chalkboard-110 dark:!bg-energy-20 dark:hover:!bg-energy-10',
+        iconClassName: '!text-energy-10 dark:!text-chalkboard-100',
       }}
     >
       <span className="sr-only">Submit command</span>
@@ -192,11 +193,10 @@ function GatheringArgsButton() {
       Element="button"
       type="submit"
       form="arg-form"
-      className="w-fit !p-0 rounded-sm border !border-primary hover:shadow"
+      className="w-fit !p-0 rounded-sm"
       icon={{
         icon: 'arrowRight',
-        bgClassName: 'p-1 rounded-sm !bg-primary hover:brightness-110',
+        bgClassName: 'p-1 rounded-sm',
-        iconClassName: '!text-chalkboard-10',
       }}
     >
       <span className="sr-only">Continue</span>

src/components/CommandBar/CommandBarKclInput.module.css

@@ -9,9 +9,9 @@
 .editor :global(.cm-line)::selection {
   @apply px-1;
   @apply text-chalkboard-100;
-  @apply bg-primary/40;
+  @apply bg-energy-10/50;
 }
 :global(.dark) .editor :global(.cm-line)::selection {
-  @apply text-chalkboard-10;
+  @apply text-energy-10;
-  @apply bg-primary/40;
+  @apply bg-energy-10/20;
 }

src/components/CommandBar/CommandBarKclInput.tsx

@@ -76,9 +76,9 @@ function CommandBarKclInput({
     },
     accessKey: 'command-bar',
     theme:
-      settings.context.app.theme.current === 'system'
+      settings.context.theme === 'system'
         ? getSystemTheme()
-        : settings.context.app.theme.current,
+        : settings.context.theme,
     extensions: [
       EditorView.domEventHandlers({
         keydown: (event) => {
@@ -153,7 +153,7 @@ function CommandBarKclInput({
           className={
             calcResult === 'NAN'
               ? 'text-destroy-80 dark:text-destroy-40'
-              : 'text-succeed-80 dark:text-succeed-40'
+              : 'text-energy-60 dark:text-energy-20'
           }
         >
           {calcResult === 'NAN'
@@ -173,7 +173,7 @@ function CommandBarKclInput({
             type="text"
             id="variable-name"
             name="variable-name"
-            className="flex-1 border-none bg-transparent focus:outline-none"
+            className="flex-1 border-none bg-transparent"
             placeholder="Variable name"
             value={newVariableName}
             autoCapitalize="off"
@@ -196,7 +196,7 @@ function CommandBarKclInput({
           <span
             className={
               isNewVariableNameUnique
-                ? 'text-succeed-60 dark:text-succeed-40'
+                ? 'text-energy-60 dark:text-energy-20'
                 : 'text-destroy-60 dark:text-destroy-40'
             }
           >