Cut release v0.21.5 (#2418)

* remove edit mode

* small rename

* update with compat with old edit mode

* exit edit mode still needed

* add log to export

.github/workflows/ci.yml

@@ -239,8 +239,8 @@ jobs:
           includeDebug: true
           args: "${{ env.TAURI_ARGS_MACOS }} ${{ env.TAURI_ARGS_UBUNTU }}"
 
-      - name: Mac App Store
+      - name: Build for Mac TestFlight (nightly)
-        if: ${{ env.BUILD_RELEASE == 'true' && matrix.os == 'macos-14' }}
+        if: ${{ github.event_name == 'schedule' && matrix.os == 'macos-14' }}
         shell: bash
         run: |
           unset APPLE_SIGNING_IDENTITY
@@ -302,9 +302,9 @@ jobs:
           APPLE_STORE_P12_PASSWORD: ${{ secrets.APPLE_STORE_P12_PASSWORD }}
 
 
-      - name: 'Upload app to TestFlight'
+      - name: 'Upload to Mac TestFlight (nightly)'
         uses: apple-actions/upload-testflight-build@v1
-        if: ${{ env.BUILD_RELEASE == 'true' && matrix.os == 'macos-14' }}
+        if: ${{ github.event_name == 'schedule' && matrix.os == 'macos-14' }}
         with:
           app-path: 'src-tauri/target/universal-apple-darwin/release/bundle/macos/Zoo Modeling App.pkg'
           issuer-id: ${{ secrets.APPLE_STORE_ISSUER_ID }}
@@ -313,8 +313,8 @@ jobs:
           app-type: osx
 
 
-      - name: Clean up after Mac App Store
+      - name: Clean up after Mac TestFlight (nightly)
-        if: ${{ env.BUILD_RELEASE == 'true' && matrix.os == 'macos-14' }}
+        if: ${{ github.event_name == 'schedule' && matrix.os == 'macos-14' }}
         shell: bash
         run: |
           git status
@@ -354,7 +354,7 @@ jobs:
           path: "${{ env.PREFIX }}/${{ env.MODE }}/bundle/*/*"
 
       - name: Run e2e tests (linux only)
-        if: matrix.os == 'ubuntu-latest'
+        if: ${{ matrix.os == 'ubuntu-latest' && github.event_name != 'release' && github.event_name != 'schedule' }}
         run: |
           cargo install tauri-driver --force
           source .env.${{ env.BUILD_RELEASE == 'true' && 'production' || 'development' }}
@@ -440,7 +440,7 @@ jobs:
             cat last_download.json
 
       - name: Authenticate to Google Cloud
-        uses: 'google-github-actions/auth@v2.1.2'
+        uses: 'google-github-actions/auth@v2.1.3'
         with:
           credentials_json: '${{ secrets.GOOGLE_CLOUD_DL_SA }}'
 

.github/workflows/create-release.yml

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

docs/kcl/index.md

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

e2e/playwright/flow-tests.spec.ts

@@ -12,6 +12,8 @@ import {
   TEST_SETTINGS_ONBOARDING_START,
 } from './storageStates'
 import * as TOML from '@iarna/toml'
+import { Coords2d } from 'lang/std/sketch'
+import { KCL_DEFAULT_LENGTH } from 'lib/constants'
 
 /*
 debug helper: unfortunately we do rely on exact coord mouse clicks in a few places
@@ -130,6 +132,7 @@ test('Basic sketch', async ({ page }) => {
   // selected two lines therefore there should be two cursors
   await expect(page.locator('.cm-cursor')).toHaveCount(2)
 
+  await page.getByRole('button', { name: 'Constrain' }).click()
   await page.getByRole('button', { name: 'Equal Length' }).click()
 
   await expect(page.locator('.cm-content'))
@@ -263,6 +266,97 @@ test('Can moving camera', async ({ page, context }) => {
   }, [1, -94, -94])
 })
 
+test('if you click the format button it formats your code', async ({
+  page,
+}) => {
+  const u = getUtils(page)
+  await page.setViewportSize({ width: 1000, height: 500 })
+  await page.goto('/')
+
+  await u.waitForAuthSkipAppStart()
+
+  // check no error to begin with
+  await expect(page.locator('.cm-lint-marker-error')).not.toBeVisible()
+
+  await page.click('.cm-content')
+  await page.keyboard.type(`const part001 = startSketchOn('XY')
+|> startProfileAt([-10, -10], %)
+|> line([20, 0], %)
+|> line([0, 20], %)
+|> line([-20, 0], %)
+|> close(%)`)
+  await page.click('#code-pane button:first-child')
+  await page.click('button:has-text("Format code")')
+
+  await expect(page.locator('.cm-content'))
+    .toHaveText(`const part001 = startSketchOn('XY')
+  |> startProfileAt([-10, -10], %)
+  |> line([20, 0], %)
+  |> line([0, 20], %)
+  |> line([-20, 0], %)
+  |> close(%)`)
+})
+
+test('if you use the format keyboard binding it formats your code', async ({
+  page,
+}) => {
+  const u = getUtils(page)
+  await page.addInitScript(async () => {
+    localStorage.setItem(
+      'persistCode',
+      `const part001 = startSketchOn('XY')
+|> startProfileAt([-10, -10], %)
+|> line([20, 0], %)
+|> line([0, 20], %)
+|> line([-20, 0], %)
+|> close(%)`
+    )
+  })
+  await page.setViewportSize({ width: 1000, height: 500 })
+  const lspStartPromise = page.waitForEvent('console', async (message) => {
+    // it would be better to wait for a message that the kcl lsp has started by looking for the message  message.text().includes('[lsp] [window/logMessage]')
+    // but that doesn't seem to make it to the console for macos/safari :(
+    if (message.text().includes('start kcl lsp')) {
+      await new Promise((resolve) => setTimeout(resolve, 200))
+      return true
+    }
+    return false
+  })
+  await page.goto('/')
+  await u.waitForAuthSkipAppStart()
+  await lspStartPromise
+
+  // check no error to begin with
+  await expect(page.locator('.cm-lint-marker-error')).not.toBeVisible()
+
+  await u.openDebugPanel()
+  await u.expectCmdLog('[data-message-type="execution-done"]')
+  await u.closeDebugPanel()
+
+  // focus the editor
+  await page.click('.cm-line')
+
+  // Hit alt+shift+f to format the code
+  await page.keyboard.press('Alt+Shift+KeyF')
+
+  await expect(page.locator('.cm-content'))
+    .toHaveText(`const part001 = startSketchOn('XY')
+  |> startProfileAt([-10, -10], %)
+  |> line([20, 0], %)
+  |> line([0, 20], %)
+  |> line([-20, 0], %)
+  |> close(%)`)
+})
+
+test('ensure the Zoo logo is not a link in browser app', async ({ page }) => {
+  await page.setViewportSize({ width: 1000, height: 500 })
+  await page.goto('/')
+
+  const zooLogo = page.locator('[data-testid="app-logo"]')
+  // Make sure it's not a link
+  await expect(zooLogo).not.toHaveAttribute('href')
+})
+
 test('if you write invalid kcl you get inlined errors', async ({ page }) => {
   const u = getUtils(page)
   await page.setViewportSize({ width: 1000, height: 500 })
@@ -857,11 +951,14 @@ test('Selections work on fresh and edited sketch', async ({ page }) => {
     // click a segment hold shift and click an axis, see that a relevant constraint is enabled
     await topHorzSegmentClick()
     await page.keyboard.down('Shift')
+    const constrainButton = page.getByRole('button', { name: 'Constrain' })
     const absYButton = page.getByRole('button', { name: 'ABS Y' })
+    await constrainButton.click()
     await expect(absYButton).toBeDisabled()
     await page.waitForTimeout(100)
     await xAxisClick()
     await page.keyboard.up('Shift')
+    await constrainButton.click()
     await absYButton.and(page.locator(':not([disabled])')).waitFor()
     await expect(absYButton).not.toBeDisabled()
 
@@ -871,12 +968,14 @@ test('Selections work on fresh and edited sketch', async ({ page }) => {
     await page.waitForTimeout(100)
     // same selection but click the axis first
     await xAxisClick()
+    await constrainButton.click()
     await expect(absYButton).toBeDisabled()
     await page.keyboard.down('Shift')
     await page.waitForTimeout(100)
     await topHorzSegmentClick()
 
     await page.keyboard.up('Shift')
+    await constrainButton.click()
     await expect(absYButton).not.toBeDisabled()
 
     // clear selection by clicking on nothing
@@ -885,10 +984,12 @@ test('Selections work on fresh and edited sketch', async ({ page }) => {
     // check the same selection again by putting cursor in code first then selecting axis
     await page.getByText(`  |> line([-${commonPoints.num2}, 0], %)`).click()
     await page.keyboard.down('Shift')
+    await constrainButton.click()
     await expect(absYButton).toBeDisabled()
     await page.waitForTimeout(100)
     await xAxisClick()
     await page.keyboard.up('Shift')
+    await constrainButton.click()
     await expect(absYButton).not.toBeDisabled()
 
     // clear selection by clicking on nothing
@@ -921,6 +1022,7 @@ test('Selections work on fresh and edited sketch', async ({ page }) => {
   // wait for execution done
 
   await u.expectCmdLog('[data-message-type="execution-done"]')
+  await u.updateCamPosition([0, -1378.01, 0.06])
   await u.closeDebugPanel()
 
   // select a line
@@ -950,9 +1052,8 @@ test.describe('Command bar tests', () => {
     let cmdSearchBar = page.getByPlaceholder('Search commands')
 
     // First try opening the command bar and closing it
-    // It has a different label on mac and windows/linux, "Meta+K" and "Ctrl+/" respectively
     await page
-      .getByRole('button', { name: 'Ctrl+/' })
+      .getByRole('button', { name: 'Commands', exact: false })
       .or(page.getByRole('button', { name: '⌘K' }))
       .click()
     await expect(cmdSearchBar).toBeVisible()
@@ -998,9 +1099,9 @@ test.describe('Command bar tests', () => {
         'persistCode',
         `const distance = sqrt(20)
       const part001 = startSketchOn('-XZ')
-  |> startProfileAt([-6.95, 4.98], %)
+      |> startProfileAt([-6.95, 10.98], %)
       |> line([25.1, 0.41], %)
-  |> line([0.73, -14.93], %)
+      |> line([0.73, -20.93], %)
       |> line([-23.44, 0.52], %)
       |> close(%)
           `
@@ -1020,7 +1121,6 @@ test.describe('Command bar tests', () => {
       page.getByRole('button', { name: 'Start Sketch' })
     ).not.toBeDisabled()
     await u.clearCommandLogs()
-    await page.getByText('|> line([0.73, -14.93], %)').click()
     await page.getByRole('button', { name: 'Extrude' }).isEnabled()
 
     let cmdSearchBar = page.getByPlaceholder('Search commands')
@@ -1030,6 +1130,12 @@ test.describe('Command bar tests', () => {
     // Search for extrude command and choose it
     await page.getByRole('option', { name: 'Extrude' }).click()
 
+    // Assert that we're on the selection step
+    await expect(page.getByRole('button', { name: 'selection' })).toBeDisabled()
+    // Select a face
+    await page.mouse.move(700, 200)
+    await page.mouse.click(700, 200)
+
     // Assert that we're on the distance step
     await expect(page.getByRole('button', { name: 'distance' })).toBeDisabled()
 
@@ -1050,7 +1156,7 @@ test.describe('Command bar tests', () => {
 
     // Assert we're back on the distance step
     await expect(
-      page.getByRole('button', { name: 'Distance 12', exact: false })
+      page.getByRole('button', { name: 'Distance 5', exact: false })
     ).toBeDisabled()
 
     await continueButton.click()
@@ -1061,11 +1167,11 @@ test.describe('Command bar tests', () => {
     // Unfortunately this indentation seems to matter for the test
     await expect(page.locator('.cm-content')).toHaveText(
       `const distance = sqrt(20)
-const distance001 = 5 + 7
+const distance001 = ${KCL_DEFAULT_LENGTH}
 const part001 = startSketchOn('-XZ')
-    |> startProfileAt([-6.95, 4.98], %)
+    |> startProfileAt([-6.95, 10.98], %)
     |> line([25.1, 0.41], %)
-    |> line([0.73, -14.93], %)
+    |> line([0.73, -20.93], %)
     |> line([-23.44, 0.52], %)
     |> close(%)
     |> extrude(distance001, %)`.replace(/(\r\n|\n|\r)/gm, '') // remove newlines
@@ -1148,6 +1254,7 @@ test('Can add multiple sketches', async ({ page }) => {
   await u.clearCommandLogs()
   await page.getByRole('button', { name: 'Start Sketch' }).click()
   await page.waitForTimeout(400)
+  await u.updateCamPosition([583, 2000, 370])
   await page.mouse.click(650, 450)
 
   await page.waitForTimeout(500) // TODO detect animation ending, or disable animation
@@ -1161,8 +1268,7 @@ test('Can add multiple sketches', async ({ page }) => {
 
   await page.waitForTimeout(100)
   await page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10)
-  const startAt2 =
+  const startAt2 = '[22.65, -30.57]'
-    process.platform === 'darwin' ? '[9.75, -13.16]' : '[0.93, -1.25]'
   await expect(
     (await page.locator('.cm-content').innerText()).replace(/\s/g, '')
   ).toBe(
@@ -1176,7 +1282,7 @@ const part002 = startSketchOn('${plane}')
   await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 10)
   await page.waitForTimeout(100)
 
-  const num2 = process.platform === 'darwin' ? 9.84 : 0.94
+  const num2 = 22.87
   await expect(
     (await page.locator('.cm-content').innerText()).replace(/\s/g, '')
   ).toBe(
@@ -1194,9 +1300,7 @@ const part002 = startSketchOn('${plane}')
 const part002 = startSketchOn('${plane}')
   |> startProfileAt(${startAt2}, %)
   |> line([${num2}, 0], %)
-  |> line([0, ${roundOff(
+  |> line([0, ${roundOff(num2)}], %)`.replace(/\s/g, '')
-    num2 + (process.platform === 'darwin' ? 0.01 : -0.01)
-  )}], %)`.replace(/\s/g, '')
   )
   await page.waitForTimeout(100)
   await page.mouse.click(startXPx, 500 - PUR * 20)
@@ -1207,13 +1311,8 @@ const part002 = startSketchOn('${plane}')
 const part002 = startSketchOn('${plane}')
   |> startProfileAt(${startAt2}, %)
   |> line([${num2}, 0], %)
-  |> line([0, ${roundOff(
+  |> line([0, ${roundOff(num2)}], %)
-    num2 + (process.platform === 'darwin' ? 0.01 : -0.01)
+  |> line([-45.52, 0], %)`.replace(/\s/g, '')
-  )}], %)
-  |> line([-${process.platform === 'darwin' ? 19.59 : 1.87}, 0], %)`.replace(
-      /\s/g,
-      ''
-    )
   )
 })
 
@@ -1256,6 +1355,72 @@ test('ProgramMemory can be serialised', async ({ page }) => {
   })
 })
 
+test('Hovering over 3d features highlights code', async ({ page }) => {
+  const u = getUtils(page)
+  await page.addInitScript(async (KCL_DEFAULT_LENGTH) => {
+    localStorage.setItem(
+      'persistCode',
+      `const part001 = startSketchOn('-XZ')
+  |> startProfileAt([20, 0], %)
+  |> line([7.13, 4 + 0], %)
+  |> angledLine({ angle: 3 + 0, length: 3.14 + 0 }, %)
+  |> lineTo([20.14 + 0, -0.14 + 0], %)
+  |> xLineTo(29 + 0, %)
+  |> yLine(-3.14 + 0, %, 'a')
+  |> xLine(1.63, %)
+  |> angledLineOfXLength({ angle: 3 + 0, length: 3.14 }, %)
+  |> angledLineOfYLength({ angle: 30, length: 3 + 0 }, %)
+  |> angledLineToX({ angle: 22.14 + 0, to: 12 }, %)
+  |> angledLineToY({ angle: 30, to: 11.14 }, %)
+  |> angledLineThatIntersects({
+        angle: 3.14,
+        intersectTag: 'a',
+        offset: 0
+      }, %)
+  |> tangentialArcTo([13.14 + 0, 13.14], %)
+  |> close(%)
+  |> extrude(5 + 7, %)    
+`
+    )
+  }, KCL_DEFAULT_LENGTH)
+  await page.setViewportSize({ width: 1000, height: 500 })
+  await page.goto('/')
+  await u.waitForAuthSkipAppStart()
+
+  const extrusionTop: Coords2d = [800, 240]
+  const flatExtrusionFace: Coords2d = [960, 160]
+  const arc: Coords2d = [840, 160]
+  const close: Coords2d = [720, 200]
+  const nothing: Coords2d = [600, 200]
+
+  await page.mouse.move(nothing[0], nothing[1])
+  await page.mouse.click(nothing[0], nothing[1])
+
+  await expect(page.getByTestId('hover-highlight')).not.toBeVisible()
+  await page.waitForTimeout(200)
+
+  await page.mouse.move(extrusionTop[0], extrusionTop[1])
+  await expect(page.getByTestId('hover-highlight')).toBeVisible()
+  await page.mouse.move(nothing[0], nothing[1])
+  await expect(page.getByTestId('hover-highlight')).not.toBeVisible()
+
+  await page.mouse.move(arc[0], arc[1])
+  await expect(page.getByTestId('hover-highlight')).toBeVisible()
+  await page.mouse.move(nothing[0], nothing[1])
+  await expect(page.getByTestId('hover-highlight')).not.toBeVisible()
+
+  await page.mouse.move(close[0], close[1])
+  await expect(page.getByTestId('hover-highlight')).toBeVisible()
+  await page.mouse.move(nothing[0], nothing[1])
+  await expect(page.getByTestId('hover-highlight')).not.toBeVisible()
+
+  await page.mouse.move(flatExtrusionFace[0], flatExtrusionFace[1])
+  await expect(page.getByTestId('hover-highlight')).toHaveCount(5) // multiple lines
+  await page.mouse.move(nothing[0], nothing[1])
+  await page.waitForTimeout(100)
+  await expect(page.getByTestId('hover-highlight')).not.toBeVisible()
+})
+
 test("Various pipe expressions should and shouldn't allow edit and or extrude", async ({
   page,
 }) => {
@@ -1390,7 +1555,7 @@ test('Deselecting line tool should mean nothing happens on click', async ({
     `const part001 = startSketchOn('-XZ')`
   )
 
-  await page.waitForTimeout(300)
+  await page.waitForTimeout(600)
 
   let previousCodeContent = await page.locator('.cm-content').innerText()
 
@@ -1752,6 +1917,7 @@ test('Can code mod a line length', async ({ page }) => {
   const startXPx = 500
   await page.mouse.move(startXPx + PUR * 15, 250 - PUR * 10)
   await page.mouse.click(615, 102)
+  await page.getByRole('button', { name: 'Constrain', exact: true }).click()
   await page.getByRole('button', { name: 'length', exact: true }).click()
   await page.getByText('Add constraining value').click()
 
@@ -1795,6 +1961,6 @@ test('Extrude from command bar selects extrude line after', async ({
   await page.keyboard.press('Enter')
   await page.waitForTimeout(100)
   await expect(page.locator('.cm-activeLine')).toHaveText(
-    `  |> extrude(5 + 7, %)`
+    `  |> extrude(${KCL_DEFAULT_LENGTH}, %)`
   )
 })

e2e/playwright/snapshot-tests.spec.ts

@@ -4,7 +4,7 @@ import { getUtils } from './test-utils'
 import { Models } from '@kittycad/lib'
 import fsp from 'fs/promises'
 import { spawn } from 'child_process'
-import { APP_NAME } from 'lib/constants'
+import { APP_NAME, KCL_DEFAULT_LENGTH } from 'lib/constants'
 import JSZip from 'jszip'
 import path from 'path'
 import { TEST_SETTINGS, TEST_SETTINGS_KEY } from './storageStates'
@@ -273,6 +273,8 @@ const part001 = startSketchOn('-XZ')
   for (let { modelPath, imagePath, outputType } of exportLocations) {
     // May change depending on the file being dealt with
     let cliCommand = `export ZOO_TOKEN=${secrets.snapshottoken} && zoo file snapshot --output-format=png --src-format=${outputType} ${modelPath} ${imagePath}`
+    const fileSize = (await fsp.stat(modelPath)).size
+    console.log(`Size of the file at ${modelPath}: ${fileSize} bytes`)
 
     const parentPath = path.dirname(modelPath)
 
@@ -507,7 +509,7 @@ test('Draft rectangles should look right', async ({ page, context }) => {
     `const part001 = startSketchOn('-XZ')`
   )
 
-  await page.waitForTimeout(300) // TODO detect animation ending, or disable animation
+  await page.waitForTimeout(500) // TODO detect animation ending, or disable animation
   await u.closeDebugPanel()
 
   const startXPx = 600
@@ -597,12 +599,15 @@ test.describe('Client side scene scale should match engine scale', () => {
 
     // exit sketch
     await u.openAndClearDebugPanel()
-    await page.getByRole('button', { name: 'Exit Sketch' }).click()
+    await u.doAndWaitForImageDiff(
+      () => page.getByRole('button', { name: 'Exit Sketch' }).click(),
+      200
+    )
 
     // wait for execution done
     await u.expectCmdLog('[data-message-type="execution-done"]')
     await u.clearAndCloseDebugPanel()
-    await page.waitForTimeout(200)
+    await page.waitForTimeout(300)
 
     // second screen shot should look almost identical, i.e. scale should be the same.
     await expect(page).toHaveScreenshot({
@@ -696,12 +701,15 @@ test.describe('Client side scene scale should match engine scale', () => {
 
     // exit sketch
     await u.openAndClearDebugPanel()
-    await page.getByRole('button', { name: 'Exit Sketch' }).click()
+    await u.doAndWaitForImageDiff(
+      () => page.getByRole('button', { name: 'Exit Sketch' }).click(),
+      200
+    )
 
     // wait for execution done
     await u.expectCmdLog('[data-message-type="execution-done"]')
     await u.clearAndCloseDebugPanel()
-    await page.waitForTimeout(200)
+    await page.waitForTimeout(300)
 
     // second screen shot should look almost identical, i.e. scale should be the same.
     await expect(page).toHaveScreenshot({
@@ -712,7 +720,7 @@ test.describe('Client side scene scale should match engine scale', () => {
 
 test('Sketch on face with none z-up', async ({ page, context }) => {
   const u = getUtils(page)
-  await context.addInitScript(async () => {
+  await context.addInitScript(async (KCL_DEFAULT_LENGTH) => {
     localStorage.setItem(
       'persistCode',
       `const part001 = startSketchOn('-XZ')
@@ -720,16 +728,16 @@ test('Sketch on face with none z-up', async ({ page, context }) => {
   |> line([9.31, 10.55], %, 'seg01')
   |> line([11.91, -10.42], %)
   |> close(%)
-  |> extrude(5 + 7, %)
+  |> extrude(${KCL_DEFAULT_LENGTH}, %)
 const part002 = startSketchOn(part001, 'seg01')
   |> startProfileAt([8, 8], %)
   |> line([4.68, 3.05], %)
   |> line([0, -7.79], %, 'seg02')
   |> close(%)
-  |> extrude(5 + 7, %)
+  |> extrude(${KCL_DEFAULT_LENGTH}, %)
 `
     )
-  })
+  }, KCL_DEFAULT_LENGTH)
 
   await page.setViewportSize({ width: 1200, height: 500 })
   await page.goto('/')

index.html

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "untitled-app",
-  "version": "0.20.0",
+  "version": "0.21.5",
   "private": true,
   "dependencies": {
     "@codemirror/autocomplete": "^6.16.0",
@@ -10,7 +10,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.19",
     "@headlessui/tailwindcss": "^0.2.0",
-    "@kittycad/lib": "^0.0.58",
+    "@kittycad/lib": "^0.0.60",
     "@lezer/javascript": "^1.4.9",
     "@open-rpc/client-js": "^1.8.1",
     "@react-hook/resize-observer": "^1.2.6",

src-tauri/Cargo.toml

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

src-tauri/capabilities/desktop.json

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

src-tauri/src/main.rs

@@ -226,7 +226,7 @@ async fn read_dir_recursive(path: &str) -> Result<FileEntry, InvokeError> {
 /// The string returned from this method is the access token.
 #[tauri::command]
 async fn login(app: tauri::AppHandle, host: &str) -> Result<String, InvokeError> {
-    println!("Logging in...");
+    log::debug!("Logging in...");
     // Do an OAuth 2.0 Device Authorization Grant dance to get a token.
     let device_auth_url = oauth2::DeviceAuthorizationUrl::new(format!("{host}/oauth2/device/auth"))
         .map_err(|e| InvokeError::from_anyhow(e.into()))?;
@@ -265,7 +265,7 @@ async fn login(app: tauri::AppHandle, host: &str) -> Result<String, InvokeError>
     // and bypass the shell::open call as it fails on GitHub Actions.
     let e2e_tauri_enabled = env::var("E2E_TAURI_ENABLED").is_ok();
     if e2e_tauri_enabled {
-        println!("E2E_TAURI_ENABLED is set, won't open {} externally", auth_uri.secret());
+        log::warn!("E2E_TAURI_ENABLED is set, won't open {} externally", auth_uri.secret());
         tokio::fs::write("/tmp/kittycad_user_code", details.user_code().secret())
             .await
             .map_err(|e| InvokeError::from_anyhow(e.into()))?;
@@ -308,7 +308,7 @@ async fn get_user(token: &str, hostname: &str) -> Result<kittycad::types::User,
             baseurl = format!("http://{host}")
         }
     }
-    println!("Getting user info...");
+    log::debug!("Getting user info...");
 
     // use kittycad library to fetch the user info from /user/me
     let mut client = kittycad::Client::new(token);
@@ -352,10 +352,12 @@ fn show_in_folder(path: &str) -> Result<(), InvokeError> {
 
 #[allow(dead_code)]
 fn open_url_sync(app: &tauri::AppHandle, url: &url::Url) {
-    println!("Opening URL: {:?}", url);
+    log::debug!("Opening URL: {:?}", url);
     let cloned_url = url.clone();
     let runner: tauri::async_runtime::JoinHandle<Result<ProjectState>> = tauri::async_runtime::spawn(async move {
-        let url_str = cloned_url.to_string();
+        let url_str = cloned_url.path().to_string();
+
+        log::debug!("Opening URL path : {}", url_str);
         let path = Path::new(url_str.as_str());
         ProjectState::new_from_path(path.to_path_buf()).await
     });
@@ -367,10 +369,10 @@ fn open_url_sync(app: &tauri::AppHandle, url: &url::Url) {
             app.manage(state::Store::new(store));
         }
         Err(e) => {
-            println!("Error opening URL:{} {:?}", url, e);
+            log::warn!("Error opening URL:{} {:?}", url, e);
         }
         Ok(Err(e)) => {
-            println!("Error opening URL:{} {:?}", url, e);
+            log::warn!("Error opening URL:{} {:?}", url, e);
         }
     }
 }
@@ -400,6 +402,15 @@ fn main() -> Result<()> {
         .plugin(tauri_plugin_dialog::init())
         .plugin(tauri_plugin_fs::init())
         .plugin(tauri_plugin_http::init())
+        .plugin(
+            tauri_plugin_log::Builder::new()
+                .targets([
+                    tauri_plugin_log::Target::new(tauri_plugin_log::TargetKind::Stdout),
+                    tauri_plugin_log::Target::new(tauri_plugin_log::TargetKind::LogDir { file_name: None }),
+                ])
+                .level(log::LevelFilter::Debug)
+                .build(),
+        )
         .plugin(tauri_plugin_os::init())
         .plugin(tauri_plugin_process::init())
         .plugin(tauri_plugin_shell::init())
@@ -435,7 +446,7 @@ fn main() -> Result<()> {
                     if let Some(source_arg) = matches.args.get("source") {
                         // We don't do an else here because this can be null.
                         if let Some(value) = source_arg.value.as_str() {
-                            println!("Got path in cli argument: {}", value);
+                            log::info!("Got path in cli argument: {}", value);
                             source_path = Some(Path::new(value).to_path_buf());
                         }
                     }
@@ -446,7 +457,7 @@ fn main() -> Result<()> {
             }
 
             if verbose {
-                println!("Verbose mode enabled.");
+                log::debug!("Verbose mode enabled.");
             }
 
             // If we have a source path to open, make sure it exists.
@@ -476,7 +487,7 @@ fn main() -> Result<()> {
 
             // Listen on the deep links.
             app.listen("deep-link://new-url", |event| {
-                println!("got deep-link url: {:?}", event);
+                log::info!("got deep-link url: {:?}", event);
                 // TODO: open_url_sync(app.handle(), event.url);
             });
 
@@ -488,10 +499,7 @@ fn main() -> Result<()> {
             |app, event| {
                 #[cfg(any(target_os = "macos", target_os = "ios"))]
                 if let tauri::RunEvent::Opened { urls } = event {
-                    if let Some(w) = app.get_webview_window("main") {
+                    log::info!("Opened URLs: {:?}", urls);
-                        let _ = w.eval(&format!("console.log(`[tauri] Opened URLs: {:?}`)", urls));
-                    }
-                    println!("Opened URLs: {:?}", urls);
 
                     // Handle the first URL.
                     // TODO: do we want to handle more than one URL?

src-tauri/tauri.conf.json

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

src/Toolbar.tsx

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

src/clientSideScene/ClientSideSceneComp.tsx

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

src/clientSideScene/sceneEntities.ts

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

src/clientSideScene/sceneInfra.ts

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

src/clientSideScene/segments.ts

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

src/components/ActionButton.tsx

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

src/components/ActionButtonDropdown.tsx

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