Cut release v0.18.0 (#2177)

* Cut release v0.18.0

* Update src-tauri/tauri.conf.json

* Update src-tauri/tauri.conf.json

* Update src-tauri/tauri.conf.json

* Dumb tauri.conf.json issue

---------

Co-authored-by: Pierre Jacquier <pierrejacquier39@gmail.com>

.codespellrc

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

.github/dependabot.yml

@@ -9,15 +9,27 @@ updates:
       directory: '/' # Location of package manifests
       schedule:
           interval: 'daily'
+      reviewers:
+          - franknoirot 
+          - irev-dev
     - package-ecosystem: 'github-actions' # See documentation for possible values
       directory: '/' # Location of package manifests
       schedule:
           interval: 'daily'
+      reviewers:
+          - adamchalmers
+          - jessfraz
     - package-ecosystem: 'cargo' # See documentation for possible values
       directory: '/src/wasm-lib/' # Location of package manifests
       schedule:
           interval: 'daily'
+      reviewers:
+          - adamchalmers
+          - jessfraz
     - package-ecosystem: 'cargo' # See documentation for possible values
       directory: '/src-tauri/' # Location of package manifests
       schedule:
           interval: 'daily'
+      reviewers:
+          - adamchalmers
+          - jessfraz

.github/workflows/cargo-bench.yml

@@ -7,23 +7,23 @@ on:
       - '**/Cargo.toml'
       - '**/Cargo.lock'
       - '**/rust-toolchain.toml'
-      - .github/workflows/cargo-criterion.yml
+      - .github/workflows/cargo-bench.yml
   pull_request:
     paths:
       - '**.rs'
       - '**/Cargo.toml'
       - '**/Cargo.lock'
       - '**/rust-toolchain.toml'
-      - .github/workflows/cargo-criterion.yml
+      - .github/workflows/cargo-bench.yml
   workflow_dispatch:
 permissions: read-all
 concurrency:
   group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
   cancel-in-progress: true
-name: cargo criterion
+name: cargo bench
 jobs:
-  cargocriterion:
+  cargo-bench:
-    name: cargo criterion
+    name: Benchmark with iai
     runs-on: ubuntu-latest-8-cores
     steps:
       - uses: actions/checkout@v4
@@ -31,10 +31,12 @@ 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 criterion
+          cd src/wasm-lib/kcl; cargo bench -- iai
 

.github/workflows/ci.yml

@@ -104,7 +104,11 @@ jobs:
         run: |
           VERSION=$(date +'%-y.%-m.%-d') yarn bump-jsons
           echo "$(jq --arg url 'https://dl.zoo.dev/releases/modeling-app/nightly/last_update.json' \
-            '.tauri.updater.endpoints[]=$url' src-tauri/tauri.release.conf.json --indent 2)" > src-tauri/tauri.release.conf.json
+            '.plugins.updater.endpoints[]=$url' src-tauri/tauri.release.conf.json --indent 2)" > src-tauri/tauri.release.conf.json
+          echo "$(jq --arg id 'dev.zoo.modeling-app-nightly' \
+            '.identifier=$id' src-tauri/tauri.release.conf.json --indent 2)" > src-tauri/tauri.release.conf.json
+          echo "$(jq --arg name 'Zoo Modeling App (Nightly)' \
+            '.productName=$name' src-tauri/tauri.release.conf.json --indent 2)" > src-tauri/tauri.release.conf.json
 
       - uses: actions/upload-artifact@v3
         if: github.event_name == 'schedule'
@@ -125,6 +129,9 @@ jobs:
       fail-fast: false
       matrix:
         os: [macos-14, ubuntu-latest, windows-latest]
+    env:
+      TAURI_ARGS_MACOS: ${{ matrix.os == 'macos-14' && '--target universal-apple-darwin' || '' }}
+      TAURI_ARGS_UBUNTU: ${{ matrix.os == 'ubuntu-latest' && '--bundles' || '' }}
     steps:
       - uses: actions/checkout@v4
 
@@ -144,10 +151,12 @@ jobs:
           sudo apt-get update &&
           sudo apt-get install -y
           libgtk-3-dev
-          libgtksourceview-3.0-dev
+          libayatana-appindicator3-dev
-          webkit2gtk-4.0
-          libappindicator3-dev
           webkit2gtk-driver
+          libsoup-3.0-dev
+          libjavascriptcoregtk-4.1-dev
+          libwebkit2gtk-4.1-dev
+          at-spi2-core
           xvfb
 
       - name: Sync node version and setup cache
@@ -161,7 +170,9 @@ jobs:
       - name: Setup Rust
         uses: dtolnay/rust-toolchain@stable
 
+      # TODO: re-enable for Windows builds, see https://github.com/tauri-apps/tauri/issues/9045
       - name: Setup Rust cache
+        if: matrix.os != 'windows-latest'
         uses: swatinem/rust-cache@v2
         with:
           workspaces: './src-tauri -> target'
@@ -224,14 +235,14 @@ jobs:
         with:
           includeRelease: false
           includeDebug: true
-          args: ${{ matrix.os == 'macos-14' && '--target universal-apple-darwin' || '' }}
+          args: "${{ env.TAURI_ARGS_MACOS }} ${{ env.TAURI_ARGS_UBUNTU }}"
 
       - name: Build the app (release) and sign
         uses: tauri-apps/tauri-action@v0
         if: ${{ env.BUILD_RELEASE == 'true' }}
         env:
-          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
-          TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
           APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
           APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
           APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
@@ -240,7 +251,7 @@ jobs:
           APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
           TAURI_CONF_ARGS: "--config ${{ matrix.os == 'windows-latest' && 'src-tauri\\tauri.release.conf.json' || 'src-tauri/tauri.release.conf.json' }}"
         with:
-          args: "${{ matrix.os == 'macos-14' && '--target universal-apple-darwin' || '' }} ${{ env.TAURI_CONF_ARGS }}"
+          args: "${{ env.TAURI_CONF_ARGS }} ${{ env.TAURI_ARGS_MACOS }} ${{ env.TAURI_ARGS_UBUNTU }}"
 
       - uses: actions/upload-artifact@v3
         if: matrix.os != 'ubuntu-latest'
@@ -250,10 +261,11 @@ jobs:
         with:
           path: "${{ env.PREFIX }}/${{ env.MODE }}/bundle/*/*"
 
+      # TODO: re-enable linux e2e tests when possible
       - name: Run e2e tests (linux only)
-        if: matrix.os == 'ubuntu-latest'
+        if: false
         run: |
-          cargo install tauri-driver@0.1.3
+          cargo install tauri-driver
           source .env.${{ env.BUILD_RELEASE == 'true' && 'production' || 'development' }}
           export VITE_KC_API_BASE_URL
           xvfb-run yarn test:e2e:tauri
@@ -273,6 +285,7 @@ jobs:
       NOTES: ${{ github.event_name == 'release' && github.event.release.body || format('Nightly build, commit {0}', github.sha) }}
       BUCKET_DIR: ${{ github.event_name == 'release' && 'dl.kittycad.io/releases/modeling-app' || 'dl.kittycad.io/releases/modeling-app/nightly' }}
       WEBSITE_DIR: ${{ github.event_name == 'release' && 'dl.zoo.dev/releases/modeling-app' || 'dl.zoo.dev/releases/modeling-app/nightly' }}
+      URL_CODED_NAME: ${{ github.event_name == 'schedule' && 'Zoo%20Modeling%20App%20%28Nightly%29' || 'Zoo%20Modeling%20App' }}
     steps:
       - uses: actions/download-artifact@v3
 
@@ -287,9 +300,9 @@ jobs:
             --arg pub_date "${PUB_DATE}" \
             --arg notes "${NOTES}" \
             --arg darwin_sig "$DARWIN_SIG" \
-            --arg darwin_url "$RELEASE_DIR/macos/Zoo%20Modeling%20App.app.tar.gz" \
+            --arg darwin_url "$RELEASE_DIR/macos/${{ env.URL_CODED_NAME }}.app.tar.gz" \
             --arg windows_sig "$WINDOWS_SIG" \
-            --arg windows_url "$RELEASE_DIR/msi/Zoo%20Modeling%20App_${VERSION_NO_V}_x64_en-US.msi.zip" \
+            --arg windows_url "$RELEASE_DIR/msi/${{ env.URL_CODED_NAME }}_${VERSION_NO_V}_x64_en-US.msi.zip" \
             '{
               "version": $version,
               "pub_date": $pub_date,
@@ -318,8 +331,8 @@ jobs:
             --arg version "${VERSION}" \
             --arg pub_date "${PUB_DATE}" \
             --arg notes "${NOTES}" \
-            --arg darwin_url "$RELEASE_DIR/dmg/Zoo%20Modeling%20App_${VERSION_NO_V}_universal.dmg" \
+            --arg darwin_url "$RELEASE_DIR/dmg/${{ env.URL_CODED_NAME }}_${VERSION_NO_V}_universal.dmg" \
-            --arg windows_url "$RELEASE_DIR/msi/Zoo%20Modeling%20App_${VERSION_NO_V}_x64_en-US.msi" \
+            --arg windows_url "$RELEASE_DIR/msi/${{ env.URL_CODED_NAME }}_${VERSION_NO_V}_x64_en-US.msi" \
             '{
               "version": $version,
               "pub_date": $pub_date,

.github/workflows/generate-website-docs.yml

@@ -56,6 +56,9 @@ jobs:
           gh pr create --title "Update KCL docs" \
               --body "Updating the generated kcl docs cc @jessfraz @franknoirot merge this" \
               --head "$NEW_BRANCH" \
+              --reviewer jessfraz \
+              --reviewer irev-dev \
+              --reviewer franknoirot \
               --base main || true
         env:
           GITHUB_TOKEN: ${{ steps.app-token.outputs.token }}

.gitignore

@@ -51,5 +51,6 @@ e2e/playwright/export-snapshots/*
 
 ## generated files
 src/**/*.typegen.ts
+src-tauri/gen
 
 src/wasm-lib/grackle/stdlib_cube_partial.json

.nvmrc

@@ -1 +1 @@
-v20.5.0
+v21.7.1

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

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ["@babel/preset-env"],
+  presets: ['@babel/preset-env'],
 }

docs/kcl/std.json

@@ -26564,7 +26564,7 @@
     "unpublished": false,
     "deprecated": false,
     "examples": [
-      "const box = startSketchOn('XY')\n  |> startProfileAt([0, 0], %)\n  |> line([0, 10], %)\n  |> line([10, 0], %)\n  |> line([0, -10], %, 'revolveAxis')\n  |> close(%)\n  |> extrude(10, %)\n\nconst sketch001 = startSketchOn(box, \"revolveAxis\")\n  |> startProfileAt([5, 10], %)\n  |> line([0, -10], %)\n  |> line([2, 0], %)\n  |> line([0, 10], %)\n  |> close(%)\n  |> revolve({\n       axis: getEdge('revolveAxis', box),\n       angle: 90\n     }, %)"
+      "const box = startSketchOn('XY')\n  |> startProfileAt([0, 0], %)\n  |> line([0, 10], %)\n  |> line([10, 0], %)\n  |> line([0, -10], %, 'revolveAxis')\n  |> close(%)\n  |> extrude(10, %)\n\nconst sketch001 = startSketchOn('XY')\n  |> startProfileAt([0, -10], %)\n  |> line([0, -10], %)\n  |> line([2, 0], %)\n  |> line([0, 10], %)\n  |> close(%)\n  |> revolve({\n       axis: getEdge('revolveAxis', box),\n       angle: 90\n     }, %)"
     ]
   },
   {
@@ -42165,7 +42165,7 @@
               "format": "double"
             },
             "center": {
-              "description": "The center about which to make th pattern. This is a 2D vector.",
+              "description": "The center about which to make the pattern. This is a 2D vector.",
               "type": "array",
               "items": {
                 "type": "number",
@@ -44168,7 +44168,7 @@
               "minItems": 3
             },
             "center": {
-              "description": "The center about which to make th pattern. This is a 3D vector.",
+              "description": "The center about which to make the pattern. This is a 3D vector.",
               "type": "array",
               "items": {
                 "type": "number",
@@ -49363,21 +49363,21 @@
                       "description": "X-axis.",
                       "type": "string",
                       "enum": [
-                        "x"
+                        "X"
                       ]
                     },
                     {
                       "description": "Y-axis.",
                       "type": "string",
                       "enum": [
-                        "y"
+                        "Y"
                       ]
                     },
                     {
                       "description": "Z-axis.",
                       "type": "string",
                       "enum": [
-                        "z"
+                        "Z"
                       ]
                     },
                     {

e2e/playwright/flow-tests.spec.ts

@@ -1,10 +1,16 @@
 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 { SaveSettingsPayload } from 'lib/settings/settingsTypes'
+import { secrets } from './secrets'
+import {
+  TEST_SETTINGS,
+  TEST_SETTINGS_KEY,
+  TEST_SETTINGS_CORRUPTED,
+  TEST_SETTINGS_ONBOARDING,
+} from './storageStates'
+import * as TOML from '@iarna/toml'
 
 /*
 debug helper: unfortunately we do rely on exact coord mouse clicks in a few places
@@ -30,24 +36,19 @@ test.beforeEach(async ({ context, page }) => {
     resources: ['tcp:3000'],
     timeout: 5000,
   })
-  await context.addInitScript(async (token) => {
+
+  await context.addInitScript(
+    async ({ token, settingsKey, settings }) => {
       localStorage.setItem('TOKEN_PERSIST_KEY', token)
       localStorage.setItem('persistCode', ``)
-    localStorage.setItem(
+      localStorage.setItem(settingsKey, settings)
-      'SETTINGS_PERSIST_KEY',
+    },
-      JSON.stringify({
+    {
-        baseUnit: 'in',
+      token: secrets.token,
-        cameraControls: 'KittyCAD',
+      settingsKey: TEST_SETTINGS_KEY,
-        defaultDirectory: '',
+      settings: TOML.stringify({ settings: TEST_SETTINGS }),
-        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' })
 })
@@ -144,6 +145,7 @@ test('Can moving camera', async ({ page, context }) => {
   await page.goto('/')
   await u.waitForAuthSkipAppStart()
   await u.openAndClearDebugPanel()
+  await u.closeKclCodePanel()
 
   const camPos: [number, number, number] = [0, 85, 85]
   const bakeInRetries = async (
@@ -177,6 +179,8 @@ test('Can moving camera', async ({ page, context }) => {
     }, 300)
 
     await u.openAndClearDebugPanel()
+    await page.getByTestId('cam-x-position').isVisible()
+
     const vals = await Promise.all([
       page.getByTestId('cam-x-position').inputValue(),
       page.getByTestId('cam-y-position').inputValue(),
@@ -324,9 +328,59 @@ test('if you write invalid kcl you get inlined errors', async ({ page }) => {
   await expect(page.locator('.cm-lint-marker-error')).not.toBeVisible()
 })
 
-test('executes on load', async ({ page, context }) => {
+test('if your kcl gets an error from the engine it is inlined', async ({
+  page,
+}) => {
   const u = getUtils(page)
-  await context.addInitScript(async () => {
+  await page.addInitScript(async () => {
+    localStorage.setItem(
+      'persistCode',
+      `const box = startSketchOn('XY')
+|> startProfileAt([0, 0], %)
+|> line([0, 10], %)
+|> line([10, 0], %)
+|> line([0, -10], %, 'revolveAxis')
+|> close(%)
+|> extrude(10, %)
+
+const sketch001 = startSketchOn(box, "revolveAxis")
+|> startProfileAt([5, 10], %)
+|> line([0, -10], %)
+|> line([2, 0], %)
+|> line([0, -10], %)
+|> close(%)
+|> revolve({
+axis: getEdge('revolveAxis', box),
+angle: 90
+}, %)
+    `
+    )
+  })
+
+  await page.setViewportSize({ width: 1000, height: 500 })
+  await page.goto('/')
+
+  await u.waitForAuthSkipAppStart()
+
+  u.openDebugPanel()
+  await u.expectCmdLog('[data-message-type="execution-done"]')
+  await u.closeDebugPanel()
+
+  // error in guter
+  await expect(page.locator('.cm-lint-marker-error')).toBeVisible()
+
+  // error text on hover
+  await page.hover('.cm-lint-marker-error')
+  await expect(
+    page.getByText(
+      'sketch profile must lie entirely on one side of the revolution axis'
+    )
+  ).toBeVisible()
+})
+
+test('executes on load', async ({ page }) => {
+  const u = getUtils(page)
+  await page.addInitScript(async () => {
     localStorage.setItem(
       'persistCode',
       `const part001 = startSketchOn('-XZ')
@@ -341,7 +395,11 @@ test('executes on load', async ({ page, context }) => {
   await u.waitForAuthSkipAppStart()
 
   // expand variables section
-  await page.getByText('Variables').click()
+  const variablesTabButton = page.getByRole('tab', {
+    name: 'Variables',
+    exact: false,
+  })
+  await variablesTabButton.click()
 
   // can find part001 in the variables summary (pretty-json-container, makes sure we're not looking in the code editor)
   // part001 only shows up in the variables summary if it's been executed
@@ -356,16 +414,20 @@ test('executes on load', async ({ page, context }) => {
   ).toBeVisible()
 })
 
-test('re-executes', async ({ page, context }) => {
+test('re-executes', async ({ page }) => {
   const u = getUtils(page)
-  await context.addInitScript(async (token) => {
+  await page.addInitScript(async () => {
     localStorage.setItem('persistCode', `const myVar = 5`)
   })
   await page.setViewportSize({ width: 1000, height: 500 })
   await page.goto('/')
   await u.waitForAuthSkipAppStart()
 
-  await page.getByText('Variables').click()
+  const variablesTabButton = page.getByRole('tab', {
+    name: 'Variables',
+    exact: false,
+  })
+  await variablesTabButton.click()
   // expect to see "myVar:5"
   await expect(
     page.locator('.pretty-json-container >> text=myVar:5')
@@ -382,9 +444,11 @@ test('re-executes', async ({ page, context }) => {
   ).toBeVisible()
 })
 
-test('Can create sketches on all planes and their back sides', async ({
+const sketchOnPlaneAndBackSideTest = async (
-  page,
+  page: any,
-}) => {
+  plane: string,
+  clickCoords: { x: number; y: number }
+) => {
   const u = getUtils(page)
   const PUR = 400 / 37.5 //pixeltoUnitRatio
   await page.setViewportSize({ width: 1200, height: 500 })
@@ -392,22 +456,20 @@ test('Can create sketches on all planes and their back sides', async ({
   await u.waitForAuthSkipAppStart()
   await u.openDebugPanel()
 
-  const camPos: [number, number, number] = [100, 100, 100]
+  const camCmdBackSide: [number, number, number] = [-100, -100, -100]
+  let camPos: [number, number, number] = [100, 100, 100]
+  if (plane === '-XY' || plane === '-YZ' || plane === '-XZ') {
+    camPos = camCmdBackSide
+  }
+
+  const code = `const part001 = startSketchOn('${plane}')
+  |> startProfileAt([1.14, -1.54], %)`
 
-  const TestSinglePlane = async ({
-    viewCmd,
-    expectedCode,
-    clickCoords,
-  }: {
-    viewCmd: [number, number, number]
-    expectedCode: string
-    clickCoords: { x: number; y: number }
-  }) => {
   await u.openDebugPanel()
 
   await u.clearCommandLogs()
   await page.getByRole('button', { name: 'Start Sketch' }).click()
-    await u.updateCamPosition(viewCmd)
+  await u.updateCamPosition(camPos)
 
   await u.closeDebugPanel()
   await page.mouse.click(clickCoords.x, clickCoords.y)
@@ -421,7 +483,7 @@ test('Can create sketches on all planes and their back sides', async ({
   await u.closeDebugPanel()
   await page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10)
 
-    await expect(page.locator('.cm-content')).toHaveText(expectedCode)
+  await expect(page.locator('.cm-content')).toHaveText(code)
 
   await page.getByRole('button', { name: 'Line' }).click()
   await u.openAndClearDebugPanel()
@@ -432,41 +494,34 @@ test('Can create sketches on all planes and their back sides', async ({
   await u.removeCurrentCode()
 }
 
-  const codeTemplate = (
+test.describe('Can create sketches on all planes and their back sides', () => {
-    plane = 'XY'
+  test('XY', async ({ page }) => {
-  ) => `const part001 = startSketchOn('${plane}')
+    await sketchOnPlaneAndBackSideTest(
-  |> startProfileAt([1.14, -1.54], %)`
+      page,
-  await TestSinglePlane({
+      'XY',
-    viewCmd: camPos,
+      { x: 600, y: 388 } // red plane
-    expectedCode: codeTemplate('XY'),
+      // { x: 600, y: 400 }, // red plane // clicks grid helper and that causes problems, should fix so that these coords work too.
-    clickCoords: { x: 600, y: 388 }, // red plane
+    )
-    // clickCoords: { x: 600, y: 400 }, // red plane // clicks grid helper and that causes problems, should fix so that these coords work too.
   })
-  await TestSinglePlane({
+
-    viewCmd: camPos,
+  test('YZ', async ({ page }) => {
-    expectedCode: codeTemplate('YZ'),
+    await sketchOnPlaneAndBackSideTest(page, 'YZ', { x: 700, y: 250 }) // green plane
-    clickCoords: { x: 700, y: 250 }, // green plane
   })
-  await TestSinglePlane({
+
-    viewCmd: camPos,
+  test('XZ', async ({ page }) => {
-    expectedCode: codeTemplate('XZ'),
+    await sketchOnPlaneAndBackSideTest(page, 'XZ', { x: 700, y: 80 }) // blue plane
-    clickCoords: { x: 700, y: 80 }, // blue plane
   })
-  const camCmdBackSide: [number, number, number] = [-100, -100, -100]
+
-  await TestSinglePlane({
+  test('-XY', async ({ page }) => {
-    viewCmd: camCmdBackSide,
+    await sketchOnPlaneAndBackSideTest(page, '-XY', { x: 600, y: 118 }) // back of red plane
-    expectedCode: codeTemplate('-XY'),
-    clickCoords: { x: 601, y: 118 }, // back of red plane
   })
-  await TestSinglePlane({
+
-    viewCmd: camCmdBackSide,
+  test('-YZ', async ({ page }) => {
-    expectedCode: codeTemplate('-YZ'),
+    await sketchOnPlaneAndBackSideTest(page, '-YZ', { x: 700, y: 219 }) // back of green plane
-    clickCoords: { x: 730, y: 219 }, // back of green plane
   })
-  await TestSinglePlane({
+
-    viewCmd: camCmdBackSide,
+  test('-XZ', async ({ page }) => {
-    expectedCode: codeTemplate('-XZ'),
+    await sketchOnPlaneAndBackSideTest(page, '-XZ', { x: 700, y: 427 }) // back of blue plane
-    clickCoords: { x: 680, y: 427 }, // back of blue plane
   })
 })
 
@@ -498,7 +553,8 @@ test('Auto complete works', async ({ page }) => {
   // expect there to be three auto complete options
   await expect(page.locator('.cm-completionLabel')).toHaveCount(3)
   await page.getByText('startSketchOn').click()
-  await page.keyboard.type("('XY')")
+  await page.keyboard.type("'XZ'")
+  await page.keyboard.press('Tab')
   await page.keyboard.press('Enter')
   await page.keyboard.type('  |> startProfi')
   // expect there be a single auto complete option that we can just hit enter on
@@ -506,7 +562,11 @@ test('Auto complete works', async ({ page }) => {
   await page.waitForTimeout(100)
   await page.keyboard.press('Enter') // accepting the auto complete, not a new line
 
-  await page.keyboard.type('([0,0], %)')
+  await page.keyboard.press('Tab')
+  await page.keyboard.type('12')
+  await page.keyboard.press('Tab')
+  await page.keyboard.press('Tab')
+  await page.keyboard.press('Tab')
   await page.keyboard.press('Enter')
   await page.keyboard.type('  |> lin')
 
@@ -517,81 +577,122 @@ test('Auto complete works', async ({ page }) => {
   await page.keyboard.press('ArrowDown')
   await page.keyboard.press('Enter')
   // finish line with comment
-  await page.keyboard.type('(5, %) // lin')
+  await page.keyboard.type('5')
+  await page.keyboard.press('Tab')
+  await page.keyboard.press('Tab')
+  await page.keyboard.type(' // lin')
   await page.waitForTimeout(100)
   // there shouldn't be any auto complete options for 'lin' in the comment
   await expect(page.locator('.cm-completionLabel')).not.toBeVisible()
 
   await expect(page.locator('.cm-content'))
-    .toHaveText(`const part001 = startSketchOn('XY')
+    .toHaveText(`const part001 = startSketchOn('XZ')
-  |> startProfileAt([0,0], %)
+  |> startProfileAt([3.14, 12], %)
   |> xLine(5, %) // lin`)
 })
 
-// Stored settings validation test
 test('Stored settings are validated and fall back to defaults', async ({
   page,
   context,
 }) => {
-  // Override beforeEach test setup
-  // with corrupted settings
-  await context.addInitScript(async () => {
-    const storedSettings = JSON.parse(
-      localStorage.getItem('SETTINGS_PERSIST_KEY') || '{}'
-    )
-
-    // Corrupt the settings
-    storedSettings.baseUnit = 'invalid'
-    storedSettings.cameraControls = `() => alert('hack the planet')`
-    storedSettings.defaultDirectory = 123
-    storedSettings.defaultProjectName = false
-
-    localStorage.setItem('SETTINGS_PERSIST_KEY', JSON.stringify(storedSettings))
-  })
-
-  await page.setViewportSize({ width: 1200, height: 500 })
-  await page.goto('/', { waitUntil: 'domcontentloaded' })
-
-  // Check the toast appeared
-  await expect(
-    page.getByText(`Error validating persisted settings:`, {
-      exact: false,
-    })
-  ).toBeVisible()
-
-  // Check the settings were reset
-  const storedSettings = JSON.parse(
-    await page.evaluate(
-      () => localStorage.getItem('SETTINGS_PERSIST_KEY') || '{}'
-    )
-  )
-  await expect(storedSettings.baseUnit).toBe(initialSettings.baseUnit)
-  await expect(storedSettings.cameraControls).toBe(
-    initialSettings.cameraControls
-  )
-  await expect(storedSettings.defaultDirectory).toBe(
-    initialSettings.defaultDirectory
-  )
-  await expect(storedSettings.defaultProjectName).toBe(
-    initialSettings.defaultProjectName
-  )
-})
-
-// Onboarding tests
-test('Onboarding redirects and code updating', async ({ page, context }) => {
   const u = getUtils(page)
 
   // Override beforeEach test setup
-  await context.addInitScript(async () => {
+  // with corrupted settings
+  await context.addInitScript(
+    async ({ settingsKey, settings }) => {
+      localStorage.setItem(settingsKey, settings)
+    },
+    {
+      settingsKey: TEST_SETTINGS_KEY,
+      settings: TOML.stringify({ settings: TEST_SETTINGS_CORRUPTED }),
+    }
+  )
+
+  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(
+      ({ settingsKey }) => localStorage.getItem(settingsKey) || '{}',
+      { settingsKey: TEST_SETTINGS_KEY }
+    )
+  ) 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 ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 1200, height: 500 })
+  await page.goto('/', { waitUntil: 'domcontentloaded' })
+  await page
+    .getByRole('button', { name: 'Start Sketch' })
+    .waitFor({ state: 'visible' })
+
+  // Open the settings modal with the browser keyboard shortcut
+  await page.keyboard.press('Meta+Shift+,')
+
+  await expect(
+    page.getByRole('heading', { name: 'Settings', exact: true })
+  ).toBeVisible()
+  await page
+    .locator('select[name="app-theme"]')
+    .selectOption({ value: 'light' })
+
+  // Verify the toast appeared
+  await expect(
+    page.getByText(`Set theme to "light" for this project`)
+  ).toBeVisible()
+  // Check that the theme changed
+  await expect(page.locator('body')).not.toHaveClass(`body-bg dark`)
+
+  // Check that the user setting was not changed
+  await page.getByRole('radio', { name: 'User' }).click()
+  await expect(page.locator('select[name="app-theme"]')).toHaveValue('dark')
+
+  // Roll back to default "system" theme
+  await page
+    .getByText(
+      'themeRoll back themeRoll back to match defaultThe overall appearance of the appl'
+    )
+    .hover()
+  await page
+    .getByRole('button', {
+      name: 'Roll back theme ; Has tooltip: Roll back to match default',
+    })
+    .click()
+  await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
+
+  // Check that the project setting did not change
+  await page.getByRole('radio', { name: 'Project' }).click()
+  await expect(page.locator('select[name="app-theme"]')).toHaveValue('light')
+})
+
+test('Onboarding redirects and code updating', async ({ page }) => {
+  const u = getUtils(page)
+
+  // Override beforeEach test setup
+  await page.addInitScript(
+    async ({ settingsKey, settings }) => {
       // Give some initial code, so we can test that it's cleared
       localStorage.setItem('persistCode', 'const sigmaAllow = 15000')
-
+      localStorage.setItem(settingsKey, settings)
-    const storedSettings = JSON.parse(
+    },
-      localStorage.getItem('SETTINGS_PERSIST_KEY') || '{}'
+    {
+      settingsKey: TEST_SETTINGS_KEY,
+      settings: TOML.stringify({ settings: TEST_SETTINGS_ONBOARDING }),
+    }
   )
-    storedSettings.onboardingStatus = '/export'
-    localStorage.setItem('SETTINGS_PERSIST_KEY', JSON.stringify(storedSettings))
-  })
 
   await page.setViewportSize({ width: 1200, height: 500 })
   await page.goto('/')
@@ -599,13 +700,13 @@ test('Onboarding redirects and code updating', async ({ page, context }) => {
 
   // Test that the redirect happened
   await expect(page.url().split(':3000').slice(-1)[0]).toBe(
-    `/file/new/onboarding/export`
+    `/file/%2Fbrowser%2Fmain.kcl/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`
+    `/file/%2Fbrowser%2Fmain.kcl/onboarding/export`
   )
 
   // Test that the onboarding pane loaded
@@ -779,12 +880,11 @@ 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 }) => {
     // Brief boilerplate
-  const u = getUtils(page)
     await page.setViewportSize({ width: 1200, height: 500 })
-  await page.goto('/')
+    await page.goto('/', { waitUntil: 'domcontentloaded' })
-  await u.waitForAuthSkipAppStart()
 
     let cmdSearchBar = page.getByPlaceholder('Search commands')
 
@@ -805,33 +905,37 @@ test('Command bar works and can change a setting', async ({ page }) => {
 
     // Try typing in the command bar
     await page.keyboard.type('theme')
-  const themeOption = page.getByRole('option', { name: 'Set Theme' })
+    const themeOption = page.getByRole('option', {
+      name: 'Settings · app · theme',
+    })
     await expect(themeOption).toBeVisible()
     await themeOption.click()
-  const themeInput = page.getByPlaceholder('system')
+    const themeInput = page.getByPlaceholder('Select an option')
     await expect(themeInput).toBeVisible()
     await expect(themeInput).toBeFocused()
     // Select dark theme
     await page.keyboard.press('ArrowDown')
-  await page.keyboard.press('ArrowUp')
+    await page.keyboard.press('ArrowDown')
-  await expect(page.getByRole('option', { name: Themes.Dark })).toHaveAttribute(
+    await page.keyboard.press('ArrowDown')
+    await expect(page.getByRole('option', { name: 'system' })).toHaveAttribute(
       'data-headlessui-state',
       'active'
     )
     await page.keyboard.press('Enter')
 
     // Check the toast appeared
-  await expect(page.getByText(`Set Theme to "${Themes.Dark}"`)).toBeVisible()
+    await expect(
+      page.getByText(`Set theme to "system" for this project`)
+    ).toBeVisible()
     // Check that the theme changed
-  await expect(page.locator('body')).toHaveClass(`body-bg ${Themes.Dark}`)
+    await expect(page.locator('body')).not.toHaveClass(`body-bg dark`)
   })
 
-test('Can extrude from the command bar', async ({ page, context }) => {
+  test('Can extrude from the command bar', async ({ page }) => {
-  await context.addInitScript(async (token) => {
+    await page.addInitScript(async () => {
       localStorage.setItem(
         'persistCode',
-      `
+        `const distance = sqrt(20)
-      const distance = sqrt(20)
         const part001 = startSketchOn('-XZ')
   |> startProfileAt([-6.95, 4.98], %)
   |> line([25.1, 0.41], %)
@@ -846,23 +950,24 @@ test('Can extrude from the command bar', async ({ page, context }) => {
     await page.setViewportSize({ width: 1200, height: 500 })
     await page.goto('/')
     await u.waitForAuthSkipAppStart()
+
+    // Make sure the stream is up
     await u.openDebugPanel()
     await u.expectCmdLog('[data-message-type="execution-done"]')
 
+    await expect(
+      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')
     await page.keyboard.press('Meta+K')
     await expect(cmdSearchBar).toBeVisible()
 
     // Search for extrude command and choose it
     await page.getByRole('option', { name: 'Extrude' }).click()
-  await expect(page.locator('#arg-form > label')).toContainText(
-    'Please select one face'
-  )
-  await expect(page.getByRole('button', { name: 'selection' })).toBeDisabled()
-
-  // Click to select face and set distance
-  await page.getByText('|> startProfileAt([-6.95, 4.98], %)').click()
-  await page.getByRole('button', { name: 'Continue' }).click()
 
     // Assert that we're on the distance step
     await expect(page.getByRole('button', { name: 'distance' })).toBeDisabled()
@@ -873,23 +978,25 @@ test('Can extrude from the command bar', async ({ page, context }) => {
     await expect(page.getByPlaceholder('Variable name')).toHaveValue(
       'distance001'
     )
-  await expect(page.getByRole('button', { name: 'Continue' })).toBeEnabled()
+
-  await page.getByRole('button', { name: 'Continue' }).click()
+    const continueButton = page.getByRole('button', { name: 'Continue' })
+    const submitButton = page.getByRole('button', { name: 'Submit command' })
+    await continueButton.click()
 
     // Review step and argument hotkeys
-  await expect(
+    await expect(submitButton).toBeEnabled()
-    page.getByRole('button', { name: 'Submit command' })
-  ).toBeEnabled()
     await page.keyboard.press('Backspace')
+
+    // Assert we're back on the distance step
     await expect(
       page.getByRole('button', { name: 'Distance 12', exact: false })
     ).toBeDisabled()
-  await page.keyboard.press('Enter')
 
-  await expect(page.getByText('Confirm Extrude')).toBeVisible()
+    await continueButton.click()
+    await submitButton.click()
 
     // Check that the code was updated
-  await page.keyboard.press('Enter')
+    await u.waitForCmdReceive('extrude')
     // Unfortunately this indentation seems to matter for the test
     await expect(page.locator('.cm-content')).toHaveText(
       `const distance = sqrt(20)
@@ -903,6 +1010,7 @@ const part001 = startSketchOn('-XZ')
     |> extrude(distance001, %)`.replace(/(\r\n|\n|\r)/gm, '') // remove newlines
     )
   })
+})
 
 test('Can add multiple sketches', async ({ page }) => {
   const u = getUtils(page)
@@ -1029,9 +1137,9 @@ const part002 = startSketchOn('XY')
   )
 })
 
-test('ProgramMemory can be serialised', async ({ page, context }) => {
+test('ProgramMemory can be serialised', async ({ page }) => {
   const u = getUtils(page)
-  await context.addInitScript(async () => {
+  await page.addInitScript(async () => {
     localStorage.setItem(
       'persistCode',
       `const part = startSketchOn('XY')
@@ -1041,7 +1149,7 @@ test('ProgramMemory can be serialised', async ({ page, context }) => {
   |> line([0, -1], %)
   |> close(%)
   |> extrude(1, %)
-  |> patternLinear({
+  |> patternLinear3d({
         axis: [1, 0, 1],
         repetitions: 3,
         distance: 6
@@ -1070,7 +1178,6 @@ test('ProgramMemory can be serialised', async ({ page, context }) => {
 
 test("Various pipe expressions should and shouldn't allow edit and or extrude", async ({
   page,
-  context,
 }) => {
   const u = getUtils(page)
   const selectionsSnippets = {
@@ -1079,7 +1186,7 @@ test("Various pipe expressions should and shouldn't allow edit and or extrude",
     extrudeAndEditAllowed: '|> startProfileAt([15.72, 4.7], %)',
     editOnly: '|> startProfileAt([15.79, -14.6], %)',
   }
-  await context.addInitScript(
+  await page.addInitScript(
     async ({
       extrudeAndEditBlocked,
       extrudeAndEditBlockedInFunction,
@@ -1126,7 +1233,7 @@ fn yohey = (pos) => {
     },
     selectionsSnippets
   )
-  await page.setViewportSize({ width: 1200, height: 500 })
+  await page.setViewportSize({ width: 1200, height: 1000 })
   await page.goto('/')
   await u.waitForAuthSkipAppStart()
 
@@ -1239,12 +1346,9 @@ test('Deselecting line tool should mean nothing happens on click', async ({
   previousCodeContent = await page.locator('.cm-content').innerText()
 })
 
-test('Can edit segments by dragging their handles', async ({
+test('Can edit segments by dragging their handles', async ({ page }) => {
-  page,
-  context,
-}) => {
   const u = getUtils(page)
-  await context.addInitScript(async () => {
+  await page.addInitScript(async () => {
     localStorage.setItem(
       'persistCode',
       `const part001 = startSketchOn('-XZ')
@@ -1313,22 +1417,29 @@ test('Can edit segments by dragging their handles', async ({
   |> tangentialArcTo([27.6, -3.25], %)`)
 })
 
-test('Snap to close works (at any scale)', async ({ page }) => {
+const doSnapAtDifferentScales = async (
+  page: any,
+  camPos: [number, number, number],
+  scale = 1,
+  fudge = 0
+) => {
   const u = getUtils(page)
   await page.setViewportSize({ width: 1200, height: 500 })
   await page.goto('/')
   await u.waitForAuthSkipAppStart()
   await u.openDebugPanel()
 
+  const code = `const part001 = startSketchOn('XZ')
+|> startProfileAt([${roundOff(scale * 87.68)}, ${roundOff(scale * 43.84)}], %)
+|> line([${roundOff(scale * 175.36)}, 0], %)
+|> line([0, -${roundOff(scale * 175.36) + fudge}], %)
+|> close(%)`
+
   await expect(
     page.getByRole('button', { name: 'Start Sketch' })
   ).not.toBeDisabled()
   await expect(page.getByRole('button', { name: 'Start Sketch' })).toBeVisible()
 
-  const doSnapAtDifferentScales = async (
-    camPos: [number, number, number],
-    expectedCode: string
-  ) => {
   await u.clearCommandLogs()
   await page.getByRole('button', { name: 'Start Sketch' }).click()
   await page.waitForTimeout(100)
@@ -1373,7 +1484,7 @@ test('Snap to close works (at any scale)', async ({ page }) => {
   await expect(page.locator('.cm-content')).not.toHaveText(prevContent)
   prevContent = await page.locator('.cm-content').innerText()
 
-    await expect(page.locator('.cm-content')).toHaveText(expectedCode)
+  await expect(page.locator('.cm-content')).toHaveText(code)
 
   // exit sketch
   await u.openAndClearDebugPanel()
@@ -1382,23 +1493,19 @@ test('Snap to close works (at any scale)', async ({ page }) => {
   await u.removeCurrentCode()
 }
 
-  const codeTemplate = (
+test.describe('Snap to close works (at any scale)', () => {
-    scale = 1,
+  test('[0, 100, 100]', async ({ page }) => {
-    fudge = 0
+    await doSnapAtDifferentScales(page, [0, 100, 100], 0.01, 0.01)
-  ) => `const part001 = startSketchOn('XZ')
-|> startProfileAt([${roundOff(scale * 87.68)}, ${roundOff(scale * 43.84)}], %)
-|> line([${roundOff(scale * 175.36)}, 0], %)
-|> line([0, -${roundOff(scale * 175.36) + fudge}], %)
-|> close(%)`
-
-  await doSnapAtDifferentScales([0, 100, 100], codeTemplate(0.01, 0.01))
-
-  await doSnapAtDifferentScales([0, 10000, 10000], codeTemplate())
   })
 
-test('Sketch on face', async ({ page, context }) => {
+  test('[0, 10000, 10000]', async ({ page }) => {
+    await doSnapAtDifferentScales(page, [0, 10000, 10000])
+  })
+})
+
+test('Sketch on face', async ({ page }) => {
   const u = getUtils(page)
-  await context.addInitScript(async () => {
+  await page.addInitScript(async () => {
     localStorage.setItem(
       'persistCode',
       `const part001 = startSketchOn('-XZ')
@@ -1470,9 +1577,13 @@ 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 = [691, 237]
+  const pointToDragFirst = [787, 565]
   await page.mouse.move(pointToDragFirst[0], pointToDragFirst[1])
   await page.mouse.down()
   await page.mouse.move(pointToDragFirst[0] - 20, pointToDragFirst[1], {
@@ -1486,7 +1597,9 @@ 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([2.81, -0.33], %)
+|> line([${process?.env?.CI ? 2.74 : 2.93}, -${
+    process?.env?.CI ? 0.24 : 0.2
+  }], %)
 |> line([-4.44, -2.13], %)
 |> close(%)`)
 
@@ -1501,6 +1614,7 @@ 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()
@@ -1509,8 +1623,90 @@ 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([2.81, -0.33], %)
+|> line([${process?.env?.CI ? 2.74 : 2.93}, -${
+    process?.env?.CI ? 0.24 : 0.2
+  }], %)
 |> line([-4.44, -2.13], %)
 |> close(%)
 |> extrude(5 + 7, %)`)
 })
+
+test('Can code mod a line length', async ({ page }) => {
+  await page.addInitScript(async () => {
+    localStorage.setItem(
+      'persistCode',
+      `const part001 = startSketchOn('XY')
+  |> startProfileAt([-10, -10], %)
+  |> line([20, 0], %)
+  |> line([0, 20], %)
+  |> xLine(-20, %)
+`
+    )
+  })
+
+  const u = getUtils(page)
+  const PUR = 400 / 37.5 //pixeltoUnitRatio
+  await page.setViewportSize({ width: 1200, height: 500 })
+  await page.goto('/')
+  await u.waitForAuthSkipAppStart()
+  await u.openDebugPanel()
+  await u.expectCmdLog('[data-message-type="execution-done"]')
+  await u.closeDebugPanel()
+
+  // Click the line of code for xLine.
+  await page.getByText(`xLine(-20, %)`).click() // TODO remove this and reinstate // await topHorzSegmentClick()
+  await page.waitForTimeout(100)
+
+  // enter sketch again
+  await page.getByRole('button', { name: 'Edit Sketch' }).click()
+  await page.waitForTimeout(300) // wait for animation
+
+  const startXPx = 500
+  await page.mouse.move(startXPx + PUR * 15, 250 - PUR * 10)
+  await page.mouse.click(615, 133)
+  await page.getByRole('button', { name: 'length', exact: true }).click()
+  await page.getByText('Add constraining value').click()
+
+  await expect(page.locator('.cm-content')).toHaveText(
+    `const length001 = 20const part001 = startSketchOn('XY')  |> startProfileAt([-10, -10], %)  |> line([20, 0], %)  |> line([0, 20], %)  |> xLine(-length001, %)`
+  )
+})
+
+test('Extrude from command bar selects extrude line after', async ({
+  page,
+}) => {
+  await page.addInitScript(async () => {
+    localStorage.setItem(
+      'persistCode',
+      `const part001 = startSketchOn('XY')
+  |> startProfileAt([-10, -10], %)
+  |> line([20, 0], %)
+  |> line([0, 20], %)
+  |> xLine(-20, %)
+  |> close(%)
+    `
+    )
+  })
+
+  const u = getUtils(page)
+  await page.setViewportSize({ width: 1200, height: 500 })
+  await page.goto('/')
+  await u.waitForAuthSkipAppStart()
+  await u.openDebugPanel()
+  await u.expectCmdLog('[data-message-type="execution-done"]')
+  await u.closeDebugPanel()
+
+  // Click the line of code for xLine.
+  await page.getByText(`close(%)`).click() // TODO remove this and reinstate // await topHorzSegmentClick()
+  await page.waitForTimeout(100)
+
+  await page.getByRole('button', { name: 'Extrude' }).click()
+  await page.waitForTimeout(100)
+  await page.keyboard.press('Enter')
+  await page.waitForTimeout(100)
+  await page.keyboard.press('Enter')
+  await page.waitForTimeout(100)
+  await expect(page.locator('.cm-activeLine')).toHaveText(
+    `  |> extrude(5 + 7, %)`
+  )
+})

e2e/playwright/snapshot-tests.spec.ts

@@ -7,28 +7,36 @@ import { spawn } from 'child_process'
 import { APP_NAME } from 'lib/constants'
 import JSZip from 'jszip'
 import path from 'path'
+import { TEST_SETTINGS, TEST_SETTINGS_KEY } from './storageStates'
+import * as TOML from '@iarna/toml'
 
-test.beforeEach(async ({ context, page }) => {
+test.beforeEach(async ({ 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' })
+
+  // set the default settings
+  await page.addInitScript(
+    async ({ token, settingsKey, settings }) => {
+      localStorage.setItem('TOKEN_PERSIST_KEY', token)
+      localStorage.setItem('persistCode', ``)
+      localStorage.setItem(settingsKey, settings)
+    },
+    {
+      token: secrets.token,
+      settingsKey: TEST_SETTINGS_KEY,
+      settings: TOML.stringify({ settings: TEST_SETTINGS }),
+    }
+  )
+
+  // Make the user avatar image always 404
+  // so we see the fallback menu icon for all snapshot tests
+  await page.route('https://lh3.googleusercontent.com/**', async (route) => {
+    await route.fulfill({
+      status: 404,
+      contentType: 'text/plain',
+      body: 'Not Found!',
+    })
+  })
 })
 
 test.setTimeout(60_000)
@@ -328,64 +336,7 @@ const part001 = startSketchOn('-XZ')
   }
 })
 
-test('extrude on each default plane should be stable', async ({
+const extrudeDefaultPlane = async (context: any, page: any, plane: string) => {
-  page,
-  context,
-}) => {
-  const u = getUtils(page)
-  const makeCode = (plane = 'XY') => `const part001 = startSketchOn('${plane}')
-  |> startProfileAt([7.00, 4.40], %)
-  |> line([6.60, -0.20], %)
-  |> line([2.80, 5.00], %)
-  |> line([-5.60, 4.40], %)
-  |> line([-5.40, -3.80], %)
-  |> close(%)
-  |> extrude(10.00, %)
-`
-  await context.addInitScript(async (code) => {
-    localStorage.setItem('persistCode', code)
-  }, makeCode('XY'))
-  await page.setViewportSize({ width: 1200, height: 500 })
-  await page.goto('/')
-  await u.waitForAuthSkipAppStart()
-
-  // wait for execution done
-  await u.openDebugPanel()
-  await u.expectCmdLog('[data-message-type="execution-done"]')
-  await u.clearAndCloseDebugPanel()
-
-  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 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 expect(page).toHaveScreenshot({
-      maxDiffPixels: 100,
-    })
-    await page.getByText('Code').click()
-  }
-  await runSnapshotsForOtherPlanes('-XY')
-
-  await runSnapshotsForOtherPlanes('XZ')
-  await runSnapshotsForOtherPlanes('-XZ')
-
-  await runSnapshotsForOtherPlanes('YZ')
-  await runSnapshotsForOtherPlanes('-YZ')
-})
-
-test('Draft segments should look right', async ({ page, context }) => {
   await context.addInitScript(async () => {
     localStorage.setItem(
       'SETTINGS_PERSIST_KEY',
@@ -402,6 +353,75 @@ test('Draft segments should look right', async ({ page, context }) => {
       })
     )
   })
+
+  const code = `const part001 = startSketchOn('${plane}')
+  |> startProfileAt([7.00, 4.40], %)
+  |> line([6.60, -0.20], %)
+  |> line([2.80, 5.00], %)
+  |> line([-5.60, 4.40], %)
+  |> line([-5.40, -3.80], %)
+  |> close(%)
+  |> extrude(10.00, %)
+`
+  await page.addInitScript(async (code: string) => {
+    localStorage.setItem('persistCode', code)
+  })
+
+  const u = getUtils(page)
+  await page.setViewportSize({ width: 1200, height: 500 })
+  await page.goto('/')
+  await u.waitForAuthSkipAppStart()
+
+  // wait for execution done
+  await u.openDebugPanel()
+  await u.expectCmdLog('[data-message-type="execution-done"]')
+  await u.clearAndCloseDebugPanel()
+  await page.waitForTimeout(200)
+  // clear code
+  await u.removeCurrentCode()
+  await u.openAndClearDebugPanel()
+  await u.doAndWaitForImageDiff(
+    () => page.locator('.cm-content').fill(code),
+    200
+  )
+  // wait for execution done
+  await u.expectCmdLog('[data-message-type="execution-done"]')
+  await u.clearAndCloseDebugPanel()
+
+  await u.closeKclCodePanel()
+  await expect(page).toHaveScreenshot({
+    maxDiffPixels: 100,
+  })
+  await u.openKclCodePanel()
+}
+
+test.describe('extrude on default planes should be stable', () => {
+  test('XY', async ({ page, context }) => {
+    await extrudeDefaultPlane(context, page, 'XY')
+  })
+
+  test('XZ', async ({ page, context }) => {
+    await extrudeDefaultPlane(context, page, 'XZ')
+  })
+
+  test('YZ', async ({ page, context }) => {
+    await extrudeDefaultPlane(context, page, 'YZ')
+  })
+
+  test('-XY', async ({ page, context }) => {
+    await extrudeDefaultPlane(context, page, '-XY')
+  })
+
+  test('-XZ', async ({ page, context }) => {
+    await extrudeDefaultPlane(context, page, '-XZ')
+  })
+
+  test('-YZ', async ({ page, context }) => {
+    await extrudeDefaultPlane(context, page, '-YZ')
+  })
+})
+
+test('Draft segments should look right', async ({ page, context }) => {
   const u = getUtils(page)
   await page.setViewportSize({ width: 1200, height: 500 })
   const PUR = 400 / 37.5 //pixeltoUnitRatio
@@ -460,26 +480,7 @@ test('Draft segments should look right', async ({ page, context }) => {
   })
 })
 
-test('Client side scene scale should match engine scale inch', async ({
+test('Draft rectangles should look right', async ({ page, context }) => {
-  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
@@ -506,6 +507,55 @@ test('Client side scene scale should match engine scale inch', async ({
     `const part001 = startSketchOn('-XZ')`
   )
 
+  await page.waitForTimeout(300) // TODO detect animation ending, or disable animation
+  await u.closeDebugPanel()
+
+  const startXPx = 600
+
+  // Equip the rectangle tool
+  await page.getByRole('button', { name: 'Line' }).click()
+  await page.getByRole('button', { name: 'Rectangle' }).click()
+
+  // Draw the rectangle
+  await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 30)
+  await page.mouse.move(startXPx + PUR * 10, 500 - PUR * 10, { steps: 5 })
+
+  // Ensure the draft rectangle looks the same as it usually does
+  await expect(page).toHaveScreenshot({
+    maxDiffPixels: 100,
+  })
+})
+
+test.describe('Client side scene scale should match engine scale', () => {
+  test('Inch scale', async ({ page }) => {
+    const u = getUtils(page)
+    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
@@ -560,26 +610,24 @@ test('Client side scene scale should match engine scale inch', async ({
     })
   })
 
-test('Client side scene scale should match engine scale mm', async ({
+  test('Millimeter scale', async ({ page }) => {
-  page,
+    await page.addInitScript(
-  context,
+      async ({ settingsKey, settings }) => {
-}) => {
+        localStorage.setItem(settingsKey, settings)
-  await context.addInitScript(async () => {
+      },
-    localStorage.setItem(
+      {
-      'SETTINGS_PERSIST_KEY',
+        settingsKey: TEST_SETTINGS_KEY,
-      JSON.stringify({
+        settings: TOML.stringify({
-        baseUnit: 'mm',
+          settings: {
-        cameraControls: 'KittyCAD',
+            ...TEST_SETTINGS,
-        defaultDirectory: '',
+            modeling: {
-        defaultProjectName: 'project-$nnn',
+              ...TEST_SETTINGS.modeling,
-        onboardingStatus: 'dismissed',
+              defaultUnit: 'mm',
-        showDebugPanel: true,
+            },
-        textWrapping: 'On',
+          },
-        theme: 'dark',
+        }),
-        unitSystem: 'metric',
+      }
-      })
     )
-  })
     const u = getUtils(page)
     await page.setViewportSize({ width: 1200, height: 500 })
     const PUR = 400 / 37.5 //pixeltoUnitRatio
@@ -590,7 +638,9 @@ test('Client side scene scale should match engine scale mm', async ({
     await expect(
       page.getByRole('button', { name: 'Start Sketch' })
     ).not.toBeDisabled()
-  await expect(page.getByRole('button', { name: 'Start Sketch' })).toBeVisible()
+    await expect(
+      page.getByRole('button', { name: 'Start Sketch' })
+    ).toBeVisible()
 
     // click on "Start Sketch" button
     await u.clearCommandLogs()
@@ -658,6 +708,7 @@ test('Client side scene scale should match engine scale mm', async ({
       maxDiffPixels: 100,
     })
   })
+})
 
 test('Sketch on face with none z-up', async ({ page, context }) => {
   const u = getUtils(page)
@@ -666,14 +717,14 @@ test('Sketch on face with none z-up', async ({ page, context }) => {
       'persistCode',
       `const part001 = startSketchOn('-XZ')
   |> startProfileAt([1.4, 2.47], %)
-  |> line({ to: [9.31, 10.55], tag: 'seg01' }, %)
+  |> line([9.31, 10.55], %, 'seg01')
   |> line([11.91, -10.42], %)
   |> close(%)
   |> extrude(5 + 7, %)
 const part002 = startSketchOn(part001, 'seg01')
-  |> startProfileAt([-2.89, 1.82], %)
+  |> startProfileAt([8, 8], %)
   |> line([4.68, 3.05], %)
-  |> line({ to: [0, -7.79], tag: 'seg02' }, %)
+  |> line([0, -7.79], %, 'seg02')
   |> close(%)
   |> extrude(5 + 7, %)
 `
@@ -683,6 +734,19 @@ const part002 = startSketchOn(part001, 'seg01')
   await page.setViewportSize({ width: 1200, height: 500 })
   await page.goto('/')
   await u.waitForAuthSkipAppStart()
+
+  await u.openDebugPanel()
+  // wait for execution done
+  await expect(
+    page.locator('[data-message-type="execution-done"]')
+  ).toHaveCount(2)
+  await u.closeDebugPanel()
+
+  // Wait for the second extrusion to appear
+  // TODO: Find a way to truly know that the objects have finished
+  // rendering, because an execution-done message is not sufficient.
+  await page.waitForTimeout(1000)
+
   await expect(
     page.getByRole('button', { name: 'Start Sketch' })
   ).not.toBeDisabled()
@@ -700,6 +764,4 @@ const part002 = startSketchOn(part001, 'seg01')
   await expect(page).toHaveScreenshot({
     maxDiffPixels: 100,
   })
-
-  await page.waitForTimeout(200)
 })

e2e/playwright/storageStates.ts

@@ -0,0 +1,46 @@
+import { SaveSettingsPayload } from 'lib/settings/settingsTypes'
+import { Themes } from 'lib/theme'
+
+export const TEST_SETTINGS_KEY = '/user.toml'
+export const TEST_SETTINGS = {
+  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 TEST_SETTINGS_ONBOARDING = {
+  ...TEST_SETTINGS,
+  app: { ...TEST_SETTINGS.app, onboardingStatus: '/export ' },
+} satisfies Partial<SaveSettingsPayload>
+
+export const TEST_SETTINGS_CORRUPTED = {
+  app: {
+    theme: Themes.Dark,
+    onboardingStatus: 'dismissed',
+    projectDirectory: 123 as any,
+  },
+  modeling: {
+    defaultUnit: 'invalid' as any,
+    mouseControls: `() => alert('hack the planet')` as any,
+    showDebugPanel: true,
+  },
+  projects: {
+    defaultProjectName: false as any,
+  },
+  textEditor: {
+    textWrapping: true,
+  },
+} satisfies Partial<SaveSettingsPayload>

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)).toBeVisible()
+  await expect(page.locator(locatorStr).last()).toBeVisible()
 }
 
 async function waitForDefaultPlanesToBeVisible(page: Page) {
@@ -44,26 +44,44 @@ async function waitForDefaultPlanesToBeVisible(page: Page) {
   )
 }
 
-async function openDebugPanel(page: Page) {
+async function openKclCodePanel(page: Page) {
-  const isOpen =
+  const paneLocator = page.getByRole('tab', { name: 'KCL Code', exact: false })
-    (await page
+  const isOpen = (await paneLocator?.getAttribute('aria-selected')) === 'true'
-      .locator('[data-testid="debug-panel"]')
-      ?.getAttribute('open')) === ''
 
   if (!isOpen) {
-    await page.getByText('Debug').click()
+    await paneLocator.click()
-    await page.getByTestId('debug-panel').and(page.locator('[open]')).waitFor()
+    await paneLocator.and(page.locator('[aria-selected="true"]')).waitFor()
+  }
+}
+
+async function closeKclCodePanel(page: Page) {
+  const paneLocator = page.getByRole('tab', { name: 'KCL Code', exact: false })
+  const isOpen = (await paneLocator?.getAttribute('aria-selected')) === 'true'
+  if (isOpen) {
+    await paneLocator.click()
+    await paneLocator
+      .and(page.locator(':not([aria-selected="true"])'))
+      .waitFor()
+  }
+}
+
+async function openDebugPanel(page: Page) {
+  const debugLocator = page.getByRole('tab', { name: 'Debug', exact: false })
+  const isOpen = (await debugLocator?.getAttribute('aria-selected')) === 'true'
+
+  if (!isOpen) {
+    await debugLocator.click()
+    await debugLocator.and(page.locator('[aria-selected="true"]')).waitFor()
   }
 }
 
 async function closeDebugPanel(page: Page) {
-  const isOpen =
+  const debugLocator = page.getByRole('tab', { name: 'Debug', exact: false })
-    (await page.getByTestId('debug-panel')?.getAttribute('open')) === ''
+  const isOpen = (await debugLocator?.getAttribute('aria-selected')) === 'true'
   if (isOpen) {
-    await page.getByText('Debug').click()
+    await debugLocator.click()
-    await page
+    await debugLocator
-      .getByTestId('debug-panel')
+      .and(page.locator(':not([aria-selected="true"])'))
-      .and(page.locator(':not([open])'))
       .waitFor()
   }
 }
@@ -81,20 +99,19 @@ export function getUtils(page: Page) {
     removeCurrentCode: () => removeCurrentCode(page),
     sendCustomCmd: (cmd: EngineCommand) => sendCustomCmd(page, cmd),
     updateCamPosition: async (xyz: [number, number, number]) => {
-      const fillInput = async () => {
+      const fillInput = async (axis: 'x' | 'y' | 'z', value: number) => {
-        await page.fill('[data-testid="cam-x-position"]', String(xyz[0]))
+        await page.fill(`[data-testid="cam-${axis}-position"]`, String(value))
-        await page.fill('[data-testid="cam-y-position"]', String(xyz[1]))
+        await page.waitForTimeout(100)
-        await page.fill('[data-testid="cam-z-position"]', String(xyz[2]))
       }
-      await fillInput()
+
-      await page.waitForTimeout(100)
+      await fillInput('x', xyz[0])
-      await fillInput()
+      await fillInput('y', xyz[1])
-      await page.waitForTimeout(100)
+      await fillInput('z', xyz[2])
-      await fillInput()
-      await page.waitForTimeout(100)
     },
     clearCommandLogs: () => clearCommandLogs(page),
     expectCmdLog: (locatorStr: string) => expectCmdLog(page, locatorStr),
+    openKclCodePanel: () => openKclCodePanel(page),
+    closeKclCodePanel: () => closeKclCodePanel(page),
     openDebugPanel: () => openDebugPanel(page),
     closeDebugPanel: () => closeDebugPanel(page),
     openAndClearDebugPanel: async () => {

e2e/tauri/specs/auth.e2e.ts

@@ -1,7 +1,10 @@
 import { browser, $, expect } from '@wdio/globals'
 import fs from 'fs/promises'
 
-const defaultDir = `${process.env.HOME}/Documents/zoo-modeling-app-projects`
+const documentsDir = `${process.env.HOME}/Documents`
+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> {
@@ -10,12 +13,25 @@ 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(defaultDir, { force: true, recursive: true })
+    await fs.rm(defaultProjectDir, { 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')
@@ -65,13 +81,25 @@ describe('ZMA (Tauri, Linux)', () => {
     const settingsButton = await $('[data-testid="settings-button"]')
     await click(settingsButton)
 
-    const defaultDirInput = await $('[data-testid="default-directory-input"]')
+    const projectDirInput = await $('[data-testid="project-directory-input"]')
-    expect(await defaultDirInput.getValue()).toEqual(defaultDir)
+    expect(await projectDirInput.getValue()).toEqual(defaultProjectDir)
 
-    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="close-button"]')
+    const closeButton = await $('[data-testid="settings-close-button"]')
     await click(closeButton)
   })
 

package.json

@@ -1,36 +1,45 @@
 {
   "name": "untitled-app",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "private": true,
   "dependencies": {
-    "@codemirror/autocomplete": "^6.15.0",
+    "@codemirror/autocomplete": "^6.16.0",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@headlessui/react": "^1.7.18",
+    "@headlessui/react": "^1.7.19",
     "@headlessui/tailwindcss": "^0.2.0",
-    "@kittycad/lib": "^0.0.56",
+    "@kittycad/lib": "^0.0.58",
     "@lezer/javascript": "^1.4.9",
     "@open-rpc/client-js": "^1.8.1",
     "@react-hook/resize-observer": "^1.2.6",
-    "@replit/codemirror-interact": "^6.3.0",
+    "@replit/codemirror-interact": "^6.3.1",
-    "@tauri-apps/api": "^1.5.3",
+    "@tauri-apps/api": "2.0.0-beta.8",
+    "@tauri-apps/plugin-dialog": "^2.0.0-beta.2",
+    "@tauri-apps/plugin-fs": "^2.0.0-beta.2",
+    "@tauri-apps/plugin-http": "^2.0.0-beta.2",
+    "@tauri-apps/plugin-os": "^2.0.0-beta.2",
+    "@tauri-apps/plugin-process": "^2.0.0-beta.2",
+    "@tauri-apps/plugin-shell": "^2.0.0-beta.2",
+    "@tauri-apps/plugin-updater": "^2.0.0-beta.2",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^15.0.2",
     "@testing-library/user-event": "^14.5.2",
     "@ts-stack/markdown": "^1.5.0",
     "@tweenjs/tween.js": "^23.1.1",
-    "@types/node": "^18.19.26",
+    "@types/node": "^18.19.31",
-    "@types/react": "^18.2.73",
+    "@types/react": "^18.2.77",
-    "@types/react-dom": "^18.2.22",
+    "@types/react-dom": "^18.2.25",
-    "@uiw/react-codemirror": "^4.21.24",
+    "@uiw/react-codemirror": "^4.21.25",
     "@xstate/inspect": "^0.8.0",
     "@xstate/react": "^3.2.2",
     "crypto-js": "^4.2.0",
     "debounce-promise": "^3.1.2",
-    "formik": "^2.4.3",
+    "decamelize": "^6.0.0",
+    "formik": "^2.4.5",
     "fuse.js": "^7.0.0",
+    "html2canvas-pro": "^1.4.3",
     "http-server": "^14.1.1",
     "json-rpc-2.0": "^1.6.0",
     "jszip": "^3.10.1",
@@ -45,19 +54,18 @@
     "react-modal-promise": "^1.0.2",
     "react-router-dom": "^6.22.3",
     "sketch-helpers": "^0.0.4",
-    "swr": "^2.2.2",
+    "swr": "^2.2.5",
-    "tauri-plugin-fs-extra-api": "https://github.com/tauri-apps/tauri-plugin-fs-extra#v1",
+    "three": "^0.163.0",
-    "three": "^0.160.0",
-    "toml": "^3.0.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.4.3",
+    "typescript": "^5.4.5",
+    "ua-parser-js": "^1.0.37",
     "uuid": "^9.0.1",
-    "vitest": "^1.4.0",
+    "vitest": "^1.5.0",
     "vscode-jsonrpc": "^8.1.0",
     "vscode-languageserver-protocol": "^3.17.5",
     "wasm-pack": "^0.12.1",
     "web-vitals": "^3.5.2",
-    "ws": "^8.13.0",
+    "ws": "^8.16.0",
     "xstate": "^4.38.2",
     "zustand": "^4.5.2"
   },
@@ -76,15 +84,15 @@
     "test:e2e:tauri": "E2E_TAURI_ENABLED=true TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' wdio run wdio.conf.ts",
     "simpleserver:ci": "yarn pretest && http-server ./public --cors -p 3000 &",
     "simpleserver": "yarn pretest && http-server ./public --cors -p 3000",
-    "fmt": "prettier --write ./src && prettier --write ./e2e",
+    "fmt": "prettier --write ./src *.ts *.json *.js ./e2e",
-    "fmt-check": "prettier --check ./src && prettier --check ./e2e",
+    "fmt-check": "prettier --check ./src *.ts *.json *.js ./e2e",
     "build:wasm-dev": "(cd src/wasm-lib && wasm-pack build --dev --target web --out-dir pkg && cargo test -p kcl-lib export_bindings) && cp src/wasm-lib/pkg/wasm_lib_bg.wasm public && yarn fmt",
     "build:wasm": "(cd src/wasm-lib && wasm-pack build --target web --out-dir pkg && cargo test -p kcl-lib export_bindings) && cp src/wasm-lib/pkg/wasm_lib_bg.wasm public && yarn fmt",
     "build:wasm-clean": "yarn wasm-prep && yarn build:wasm",
     "remove-importmeta": "sed -i 's/import.meta.url/window.location.origin/g' \"./src/wasm-lib/pkg/wasm_lib.js\"; sed -i '' 's/import.meta.url/window.location.origin/g' \"./src/wasm-lib/pkg/wasm_lib.js\" || echo \"sed for both mac and linux\"",
     "wasm-prep": "rm -rf src/wasm-lib/pkg && mkdir src/wasm-lib/pkg && rm -rf src/wasm-lib/kcl/bindings",
     "lint": "eslint --fix src",
-    "bump-jsons": "echo \"$(jq --arg v \"$VERSION\" '.version=$v' package.json --indent 2)\" > package.json && echo \"$(jq --arg v \"$VERSION\" '.package.version=$v' src-tauri/tauri.conf.json --indent 2)\" > src-tauri/tauri.conf.json",
+    "bump-jsons": "echo \"$(jq --arg v \"$VERSION\" '.version=$v' package.json --indent 2)\" > package.json && echo \"$(jq --arg v \"$VERSION\" '.version=$v' src-tauri/tauri.conf.json --indent 2)\" > src-tauri/tauri.conf.json",
     "postinstall": "yarn xstate:typegen",
     "xstate:typegen": "yarn xstate typegen \"src/**/*.ts?(x)\""
   },
@@ -108,31 +116,34 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-env": "^7.24.3",
-    "@playwright/test": "^1.39.0",
+    "@iarna/toml": "^2.2.5",
-    "@tauri-apps/cli": "^1.5.11",
+    "@playwright/test": "^1.43.1",
+    "@tauri-apps/cli": "^2.0.0-beta.13",
     "@types/crypto-js": "^4.2.2",
     "@types/debounce-promise": "^3.1.9",
     "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.4",
     "@types/react-modal": "^3.16.3",
-    "@types/three": "^0.160.0",
+    "@types/three": "^0.163.0",
+    "@types/ua-parser-js": "^0.7.39",
     "@types/uuid": "^9.0.8",
     "@types/wait-on": "^5.3.4",
     "@types/wicg-file-system-access": "^2023.10.5",
-    "@types/ws": "^8.5.5",
+    "@types/ws": "^8.5.10",
     "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/web-worker": "^1.5.0",
     "@wdio/cli": "^8.24.3",
-    "@wdio/globals": "^8.24.3",
+    "@wdio/globals": "^8.36.0",
-    "@wdio/local-runner": "^8.35.1",
+    "@wdio/local-runner": "^8.36.0",
-    "@wdio/mocha-framework": "^8.35.0",
+    "@wdio/mocha-framework": "^8.36.0",
-    "@wdio/spec-reporter": "^8.32.4",
+    "@wdio/spec-reporter": "^8.36.0",
     "@xstate/cli": "^0.5.17",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-css-modules": "^2.12.0",
-    "happy-dom": "^14.3.1",
+    "happy-dom": "^14.3.10",
     "husky": "^9.0.11",
     "pixelmatch": "^5.3.0",
     "pngjs": "^7.0.0",
@@ -141,12 +152,12 @@
     "prettier": "^2.8.0",
     "setimmediate": "^1.0.5",
     "tailwindcss": "^3.4.1",
-    "vite": "^5.2.2",
+    "vite": "^5.2.9",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-package-version": "^1.1.0",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest-webgl-canvas-mock": "^1.1.0",
     "wait-on": "^7.2.0",
-    "yarn": "^1.22.19"
+    "yarn": "^1.22.22"
   }
 }

playwright.config.ts

@@ -49,8 +49,6 @@ export default defineConfig({
     //   use: { ...devices['Desktop Chrome'] },
     // },
 
-
-
     /* Test against mobile viewports. */
     // {
     //   name: 'Mobile Chrome',