xstate v5 rough start

* test that fails for when to enable extrude and sketch features

* add fix to make test pass

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

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.codespellrc

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

.env.development

@@ -1,6 +1,6 @@
-VITE_KC_API_WS_MODELING_URL=wss://api.dev.kittycad.io/ws/modeling/commands
-VITE_KC_API_BASE_URL=https://api.dev.kittycad.io
-VITE_KC_SITE_BASE_URL=https://dev.kittycad.io
+VITE_KC_API_WS_MODELING_URL=wss://api.dev.zoo.dev/ws/modeling/commands
+VITE_KC_API_BASE_URL=https://api.dev.zoo.dev
+VITE_KC_SITE_BASE_URL=https://dev.zoo.dev
 VITE_KC_SKIP_AUTH=false
 VITE_KC_CONNECTION_TIMEOUT_MS=5000
 VITE_KC_SENTRY_DSN=

.env.production

@@ -1,6 +1,6 @@
-VITE_KC_API_WS_MODELING_URL=wss://api.kittycad.io/ws/modeling/commands
-VITE_KC_API_BASE_URL=https://api.kittycad.io
-VITE_KC_SITE_BASE_URL=https://kittycad.io
+VITE_KC_API_WS_MODELING_URL=wss://api.zoo.dev/ws/modeling/commands
+VITE_KC_API_BASE_URL=https://api.zoo.dev
+VITE_KC_SITE_BASE_URL=https://zoo.dev
 VITE_KC_SKIP_AUTH=false
 VITE_KC_CONNECTION_TIMEOUT_MS=15000
 VITE_KC_SENTRY_DSN=https://a814f2f66734989a90367f48feee28ca@o1042111.ingest.sentry.io/4505789425844224

.eslintignore

@@ -1 +1,2 @@
 src/wasm-lib/*
+*.typegen.ts

.eslintrc

@@ -17,12 +17,12 @@
         "never"
       ],
       "react-hooks/exhaustive-deps": "off",
-      "@typescript-eslint/no-floating-promises": "warn"
     },
     "overrides": [
       {
         "files": ["e2e/**/*.ts"], // Update the pattern based on your file structure
         "rules": {
+          "@typescript-eslint/no-floating-promises": "warn",
           "testing-library/prefer-screen-queries": "off"
         }
       }

.github/workflows/announce_release.yml

@@ -0,0 +1,29 @@
+name: Announce Release
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  announce_release:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Check out code
+      uses: actions/checkout@v4
+
+    - name: Set up Python
+      uses: actions/setup-python@v5
+      with:
+        python-version: '3.x'
+
+    - name: Install dependencies
+      run: |
+        python -m pip install --upgrade pip
+        pip install requests
+
+    - name: Announce Release
+      env:
+        DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
+        RELEASE_VERSION: ${{ github.event.release.tag_name }}
+        RELEASE_BODY: ${{ github.event.release.body}}
+      run: python public/announce_release.py

.github/workflows/cargo-clippy.yml

@@ -43,17 +43,6 @@ jobs:
       - name: Rust Cache
         uses: Swatinem/rust-cache@v2.6.1
 
-      - name: Install ffmpeg
-        run: |
-          sudo apt update
-          sudo apt install \
-            ffmpeg \
-            libavformat-dev \
-            libavutil-dev \
-            libclang-dev \
-            libswscale-dev \
-            --no-install-recommends
-
       - name: Run clippy
         run: |
           cd "${{ matrix.dir }}"

.github/workflows/cargo-test.yml

@@ -44,16 +44,6 @@ jobs:
       - uses: taiki-e/install-action@nextest
       - name: Rust Cache
         uses: Swatinem/rust-cache@v2.6.1
-      - name: Install ffmpeg
-        run: |
-          sudo apt update
-          sudo apt install \
-            ffmpeg \
-            libavformat-dev \
-            libavutil-dev \
-            libclang-dev \
-            libswscale-dev \
-            --no-install-recommends
       - name: cargo test
         shell: bash
         run: |-

.github/workflows/ci.yml

@@ -46,6 +46,7 @@ jobs:
           workspaces: './src/wasm-lib'
 
       - run: yarn build:wasm
+      - run: yarn xstate:typegen
       - run: yarn tsc
 
 
@@ -104,7 +105,7 @@ jobs:
         if: github.event_name == 'schedule'
         run: |
           VERSION=$(date +'%-y.%-m.%-d') yarn bump-jsons
-          echo "$(jq --arg url 'https://dl.kittycad.io/releases/modeling-app/nightly/last_update.json' \
+          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
 
       - uses: actions/upload-artifact@v3
@@ -123,8 +124,9 @@ jobs:
     needs: [prepare-json-files]
     runs-on: ${{ matrix.os }}
     strategy:
+      fail-fast: false
       matrix:
-        os: [macos-latest, ubuntu-latest, windows-latest]
+        os: [macos-14, ubuntu-latest, windows-latest]
     steps:
       - uses: actions/checkout@v4
 
@@ -187,10 +189,10 @@ jobs:
       - name: Fix format
         run: yarn fmt
 
-      - name: Install Universal target (MacOS only)
-        if: matrix.os == 'macos-latest'
+      - name: Install x86 target for Universal builds (MacOS only)
+        if: matrix.os == 'macos-14'
         run: |
-          rustup target add aarch64-apple-darwin
+          rustup target add x86_64-apple-darwin
 
       - name: Prepare certificate and variables (Windows only)
         if: ${{ matrix.os == 'windows-latest' && env.BUILD_RELEASE == 'true' }}
@@ -224,7 +226,7 @@ jobs:
         with:
           includeRelease: false
           includeDebug: true
-          args: ${{ matrix.os == 'macos-latest' && '--target universal-apple-darwin' || '' }}
+          args: ${{ matrix.os == 'macos-14' && '--target universal-apple-darwin' || '' }}
 
       - name: Build the app (release) and sign
         uses: tauri-apps/tauri-action@v0
@@ -240,11 +242,12 @@ 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-latest' && '--target universal-apple-darwin' || '' }} ${{ env.TAURI_CONF_ARGS }}"
+          args: "${{ matrix.os == 'macos-14' && '--target universal-apple-darwin' || '' }} ${{ env.TAURI_CONF_ARGS }}"
 
       - uses: actions/upload-artifact@v3
+        if: matrix.os != 'ubuntu-latest'
         env:
-          PREFIX: ${{ matrix.os == 'macos-latest' && 'src-tauri/target/universal-apple-darwin' || 'src-tauri/target' }}
+          PREFIX: ${{ matrix.os == 'macos-14' && 'src-tauri/target/universal-apple-darwin' || 'src-tauri/target' }}
           MODE: ${{ env.BUILD_RELEASE == 'true' && 'release' || 'debug' }}
         with:
           path: "${{ env.PREFIX }}/${{ env.MODE }}/bundle/*/*"
@@ -252,12 +255,12 @@ jobs:
       - name: Run e2e tests (linux only)
         if: matrix.os == 'ubuntu-latest'
         run: |
-          cargo install tauri-driver
+          cargo install tauri-driver@0.1.3
           source .env.${{ env.BUILD_RELEASE == 'true' && 'production' || 'development' }}
           export VITE_KC_API_BASE_URL
           xvfb-run yarn test:e2e:tauri
         env:
-          E2E_APPLICATION: "./src-tauri/target/${{ env.BUILD_RELEASE == 'true' && 'release' || 'debug' }}/kittycad-modeling"
+          E2E_APPLICATION: "./src-tauri/target/${{ env.BUILD_RELEASE == 'true' && 'release' || 'debug' }}/zoo-modeling-app"
           KITTYCAD_API_TOKEN: ${{ env.BUILD_RELEASE == 'true' && secrets.KITTYCAD_API_TOKEN || secrets.KITTYCAD_API_TOKEN_DEV }}
 
 
@@ -271,26 +274,24 @@ jobs:
       PUB_DATE: ${{ github.event_name == 'release' && github.event.release.created_at || github.event.repository.updated_at }}
       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' }}
     steps:
       - uses: actions/download-artifact@v3
 
       - name: Generate the update static endpoint
         run: |
-          ls -l artifact/*/*itty*
+          ls -l artifact/*/*oo*
           DARWIN_SIG=`cat artifact/macos/*.app.tar.gz.sig`
-          LINUX_SIG=`cat artifact/appimage/*.AppImage.tar.gz.sig`
           WINDOWS_SIG=`cat artifact/msi/*.msi.zip.sig`
-          RELEASE_DIR=https://${BUCKET_DIR}/${VERSION}
+          RELEASE_DIR=https://${WEBSITE_DIR}/${VERSION}
           jq --null-input \
             --arg version "${VERSION}" \
             --arg pub_date "${PUB_DATE}" \
             --arg notes "${NOTES}" \
             --arg darwin_sig "$DARWIN_SIG" \
-            --arg darwin_url "$RELEASE_DIR/macos/KittyCAD%20Modeling.app.tar.gz" \
-            --arg linux_sig "$LINUX_SIG" \
-            --arg linux_url "$RELEASE_DIR/appimage/kittycad-modeling_${VERSION_NO_V}_amd64.AppImage.tar.gz" \
+            --arg darwin_url "$RELEASE_DIR/macos/Zoo%20Modeling%20App.app.tar.gz" \
             --arg windows_sig "$WINDOWS_SIG" \
-            --arg windows_url "$RELEASE_DIR/msi/KittyCAD%20Modeling_${VERSION_NO_V}_x64_en-US.msi.zip" \
+            --arg windows_url "$RELEASE_DIR/msi/Zoo%20Modeling%20App_${VERSION_NO_V}_x64_en-US.msi.zip" \
             '{
               "version": $version,
               "pub_date": $pub_date,
@@ -304,10 +305,6 @@ jobs:
                   "signature": $darwin_sig,
                   "url": $darwin_url
                 },
-                "linux-x86_64": {
-                  "signature": $linux_sig,
-                  "url": $linux_url
-                },
                 "windows-x86_64": {
                   "signature": $windows_sig,
                   "url": $windows_url
@@ -318,14 +315,13 @@ jobs:
 
       - name: Generate the download static endpoint
         run: |
-          RELEASE_DIR=https://${BUCKET_DIR}/${VERSION}
+          RELEASE_DIR=https://${WEBSITE_DIR}/${VERSION}
           jq --null-input \
             --arg version "${VERSION}" \
             --arg pub_date "${PUB_DATE}" \
             --arg notes "${NOTES}" \
-            --arg darwin_url "$RELEASE_DIR/dmg/KittyCAD%20Modeling_${VERSION_NO_V}_universal.dmg" \
-            --arg linux_url "$RELEASE_DIR/appimage/kittycad-modeling_${VERSION_NO_V}_amd64.AppImage" \
-            --arg windows_url "$RELEASE_DIR/msi/KittyCAD%20Modeling_${VERSION_NO_V}_x64_en-US.msi" \
+            --arg darwin_url "$RELEASE_DIR/dmg/Zoo%20Modeling%20App_${VERSION_NO_V}_universal.dmg" \
+            --arg windows_url "$RELEASE_DIR/msi/Zoo%20Modeling%20App_${VERSION_NO_V}_x64_en-US.msi" \
             '{
               "version": $version,
               "pub_date": $pub_date,
@@ -334,9 +330,6 @@ jobs:
                 "dmg-universal": {
                   "url": $darwin_url
                 },
-                "appimage-x86_64": {
-                  "url": $linux_url
-                },
                 "msi-x86_64": {
                   "url": $windows_url
                 }
@@ -345,31 +338,31 @@ jobs:
             cat last_download.json
 
       - name: Authenticate to Google Cloud
-        uses: 'google-github-actions/auth@v2.0.0'
+        uses: 'google-github-actions/auth@v2.1.1'
         with:
           credentials_json: '${{ secrets.GOOGLE_CLOUD_DL_SA }}'
 
       - name: Set up Google Cloud SDK
-        uses: google-github-actions/setup-gcloud@v2.0.0
+        uses: google-github-actions/setup-gcloud@v2.1.0
         with:
           project_id: kittycadapi
 
       - name: Upload release files to public bucket
-        uses: google-github-actions/upload-cloud-storage@v2.0.0
+        uses: google-github-actions/upload-cloud-storage@v2.1.0
         with:
           path: artifact
-          glob: '*/*itty*'
+          glob: '*/Zoo*'
           parent: false
           destination: ${{ env.BUCKET_DIR }}/${{ env.VERSION }}
 
       - name: Upload update endpoint to public bucket
-        uses: google-github-actions/upload-cloud-storage@v2.0.0
+        uses: google-github-actions/upload-cloud-storage@v2.1.0
         with:
           path: last_update.json
           destination: ${{ env.BUCKET_DIR }}
 
       - name: Upload download endpoint to public bucket
-        uses: google-github-actions/upload-cloud-storage@v2.0.0
+        uses: google-github-actions/upload-cloud-storage@v2.1.0
         with:
           path: last_download.json
           destination: ${{ env.BUCKET_DIR }}
@@ -378,4 +371,4 @@ jobs:
         if: ${{ github.event_name == 'release' }}
         uses: softprops/action-gh-release@v1
         with:
-          files: artifact/*/*itty*
+          files: 'artifact/*/Zoo*'

.github/workflows/playwright.yml

@@ -79,7 +79,7 @@ jobs:
 
   playwright-macos:
     timeout-minutes: 60
-    runs-on: macos-latest
+    runs-on: macos-14
     needs: playwright-ubuntu
     steps:
     - uses: actions/checkout@v4

.gitignore

@@ -50,3 +50,7 @@ e2e/playwright/export-snapshots/*embedded.gltf
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+
+## generated files
+src/**/*.typegen.ts

.prettierignore

@@ -10,4 +10,4 @@ src/wasm-lib/kcl/bindings
 e2e/playwright/export-snapshots
 
 # XState generated files
-src/machines/modelingMachine.typegen.ts
+src/machines/**.typegen.ts

README.md

@@ -94,7 +94,6 @@ For running the rust (not tauri rust though) only, you can
 cd src/wasm-lib
 cargo test
 ```
-but you will need to have install ffmpeg prior to.
 
 ## Tauri
 
@@ -183,7 +182,7 @@ For more information on fuzzing you can check out
 First time running plawright locally, you'll need to add the secrets file
 ```bash
 touch ./e2e/playwright/playwright-secrets.env
-echo 'token="your-token"\nsnapshottoken="your-snapshot-token"' > ./e2e/playwright/playwright-secrets2.env
+printf 'token="your-token"\nsnapshottoken="your-snapshot-token"' > ./e2e/playwright/playwright-secrets.env
 ```
 then replace "your-token" with a dev token from dev.zoo.dev/account/api-tokens
 

docs/kcl/KNOWN-ISSUES.md

@@ -0,0 +1,16 @@
+# Known Issues
+
+The following are bugs that are not in modeling-app or kcl itself. These bugs
+once fixed in engine will just start working here with no language changes.
+
+- **Sketch on Face**: If your sketch is outside the edges of the face (on which you
+    are sketching) you will get multiple models returned instead of one single
+    model for that sketch and its underlying 3D object.
+
+- **Patterns**: If you try and pass a pattern to `hole` currently only the first
+    item in the pattern is being subtracted. This is an engine bug that is being
+    worked on.
+  
+- **Import**: Right now you can import a file, even if that file has brep data
+    you cannot edit it. You also cannot move or transform the imported objects at
+   all. In the future, after v1, the engine will account for this.

e2e/playwright/export-snapshots/gltf-standard-2.gltf

@@ -498,7 +498,7 @@
     }
   ],
   "asset": {
-    "generator": "kittycad.io",
+    "generator": "zoo.dev",
     "version": "2.0"
   },
   "buffers": [
@@ -882,7 +882,7 @@
           "loops": [
             [
               14,
-              -1
+              1
             ]
           ]
         },
@@ -1953,12 +1953,17 @@
         {
           "type": "plane",
           "plane": {
-            "normal": [
-              -1,
+            "xAxis": [
               0,
+              1,
               0
             ],
-            "point": [
+            "yAxis": [
+              0,
+              0,
+              -1
+            ],
+            "origin": [
               0,
               -0.0127,
               0.050800000000000005
@@ -1968,12 +1973,17 @@
         {
           "type": "plane",
           "plane": {
-            "normal": [
+            "xAxis": [
+              1,
               0,
-              -1,
-              -0
+              0
             ],
-            "point": [
+            "yAxis": [
+              -0,
+              0,
+              1
+            ],
+            "origin": [
               0.039310000000000005,
               -0.0254,
               0.050800000000000005
@@ -1983,12 +1993,17 @@
         {
           "type": "plane",
           "plane": {
-            "normal": [
+            "xAxis": [
+              0.81915,
               -0.5735800000000001,
-              -0.81915,
               0
             ],
-            "point": [
+            "yAxis": [
+              0,
+              0,
+              1
+            ],
+            "origin": [
               0.11489,
               -0.050800000000000005,
               0.050800000000000005
@@ -1998,12 +2013,17 @@
         {
           "type": "plane",
           "plane": {
-            "normal": [
+            "xAxis": [
+              1,
               0,
-              -1,
-              -0
+              0
             ],
-            "point": [
+            "yAxis": [
+              -0,
+              0,
+              1
+            ],
+            "origin": [
               0.19623,
               -0.0762,
               0.050800000000000005
@@ -2013,12 +2033,17 @@
         {
           "type": "plane",
           "plane": {
-            "normal": [
-              1,
+            "xAxis": [
               0,
-              -0
+              1,
+              0
             ],
-            "point": [
+            "yAxis": [
+              -0,
+              0,
+              1
+            ],
+            "origin": [
               0.2413,
               -0.06985000000000001,
               0.050800000000000005
@@ -2028,12 +2053,17 @@
         {
           "type": "plane",
           "plane": {
-            "normal": [
-              0,
+            "xAxis": [
               1,
-              -0
+              0,
+              0
             ],
-            "point": [
+            "yAxis": [
+              0,
+              -0,
+              -1
+            ],
+            "origin": [
               0.19823,
               -0.0635,
               0.050800000000000005
@@ -2043,12 +2073,17 @@
         {
           "type": "plane",
           "plane": {
-            "normal": [
-              0.5735800000000001,
+            "xAxis": [
               0.81915,
+              -0.5735800000000001,
               0
             ],
-            "point": [
+            "yAxis": [
+              0,
+              0,
+              -1
+            ],
+            "origin": [
               0.10982,
               -0.03175,
               0.050800000000000005
@@ -2058,12 +2093,17 @@
         {
           "type": "plane",
           "plane": {
-            "normal": [
+            "xAxis": [
+              0.90631,
               0.4226200000000001,
-              -0.90631,
-              -0
+              0
             ],
-            "point": [
+            "yAxis": [
+              -0,
+              0,
+              1
+            ],
+            "origin": [
               0.10533,
               0.01905,
               0.050800000000000005
@@ -2073,12 +2113,17 @@
         {
           "type": "plane",
           "plane": {
-            "normal": [
+            "xAxis": [
+              1,
               0,
-              -1,
-              -0
+              0
             ],
-            "point": [
+            "yAxis": [
+              -0,
+              0,
+              1
+            ],
+            "origin": [
               0.19374,
               0.0381,
               0.050800000000000005
@@ -2088,12 +2133,17 @@
         {
           "type": "plane",
           "plane": {
-            "normal": [
-              1,
+            "xAxis": [
               0,
-              -0
+              1,
+              0
             ],
-            "point": [
+            "yAxis": [
+              -0,
+              0,
+              1
+            ],
+            "origin": [
               0.2413,
               0.04445,
               0.050800000000000005
@@ -2103,12 +2153,17 @@
         {
           "type": "plane",
           "plane": {
-            "normal": [
-              0,
+            "xAxis": [
               1,
-              -0
+              0,
+              0
             ],
-            "point": [
+            "yAxis": [
+              0,
+              -0,
+              -1
+            ],
+            "origin": [
               0.19234,
               0.050800000000000005,
               0.050800000000000005
@@ -2118,12 +2173,17 @@
         {
           "type": "plane",
           "plane": {
-            "normal": [
-              -0.4226200000000001,
+            "xAxis": [
               0.90631,
+              0.4226200000000001,
               0
             ],
-            "point": [
+            "yAxis": [
+              0,
+              0,
+              -1
+            ],
+            "origin": [
               0.11614,
               0.0381,
               0.050800000000000005
@@ -2133,12 +2193,17 @@
         {
           "type": "plane",
           "plane": {
-            "normal": [
-              0,
+            "xAxis": [
               1,
-              -0
+              0,
+              0
             ],
-            "point": [
+            "yAxis": [
+              0,
+              -0,
+              -1
+            ],
+            "origin": [
               0.04445,
               0.0254,
               0.050800000000000005
@@ -2148,12 +2213,17 @@
         {
           "type": "plane",
           "plane": {
-            "normal": [
-              -1,
+            "xAxis": [
               0,
+              1,
               0
             ],
-            "point": [
+            "yAxis": [
+              0,
+              0,
+              -1
+            ],
+            "origin": [
               0,
               0.0127,
               0.050800000000000005
@@ -2163,12 +2233,17 @@
         {
           "type": "plane",
           "plane": {
-            "normal": [
+            "xAxis": [
+              1,
               0,
-              0,
-              1
+              0
             ],
-            "point": [
+            "yAxis": [
+              0,
+              1,
+              0
+            ],
+            "origin": [
               0,
               0,
               0
@@ -2178,12 +2253,17 @@
         {
           "type": "plane",
           "plane": {
-            "normal": [
+            "xAxis": [
+              1,
               0,
-              0,
-              1
+              -0
             ],
-            "point": [
+            "yAxis": [
+              -0,
+              1,
+              0
+            ],
+            "origin": [
               0,
               0,
               0.1016
@@ -2191,7 +2271,7 @@
           }
         }
       ],
-      "curves": [
+      "curves3D": [
         {
           "type": "line",
           "line": {

e2e/playwright/export-snapshots/step-.step

@@ -1,7 +1,7 @@
 ISO-10303-21;
 HEADER;
-FILE_DESCRIPTION((('kittycad.io export')), '2;1');
-FILE_NAME('dump.step', '1970-01-01T00:00:00.0+00:00', ('Author unknown'), ('Organization unknown'), 'kittycad.io beta', 'kittycad.io', 'Authorization unknown');
+FILE_DESCRIPTION((('zoo.dev export')), '2;1');
+FILE_NAME('dump.step', '1970-01-01T00:00:00.0+00:00', ('Author unknown'), ('Organization unknown'), 'zoo.dev beta', 'zoo.dev', 'Authorization unknown');
 FILE_SCHEMA(('AP203_CONFIGURATION_CONTROLLED_3D_DESIGN_OF_MECHANICAL_PARTS_AND_ASSEMBLIES_MIM_LF'));
 ENDSEC;
 DATA;
@@ -384,23 +384,23 @@ DATA;
 #368 = ORIENTED_EDGE('NONE', *, *, #269, .T.);
 #369 = EDGE_LOOP('NONE', (#355, #356, #357, #358, #359, #360, #361, #362, #363, #364, #365, #366, #367, #368));
 #370 = CARTESIAN_POINT('NONE', (0, -0.0127, 0.0508));
-#371 = DIRECTION('NONE', (-1, 0, -0));
+#371 = DIRECTION('NONE', (-1, -0, 0));
 #372 = AXIS2_PLACEMENT_3D('NONE', #370, #371, $);
 #373 = PLANE('NONE', #372);
 #374 = CARTESIAN_POINT('NONE', (0.039306734695977924, -0.025399999999999995, 0.0508));
-#375 = DIRECTION('NONE', (0, -1, -0));
+#375 = DIRECTION('NONE', (0, -1, 0));
 #376 = AXIS2_PLACEMENT_3D('NONE', #374, #375, $);
 #377 = PLANE('NONE', #376);
 #378 = CARTESIAN_POINT('NONE', (0.11488842876320533, -0.05079999999999996, 0.05079999999999999));
-#379 = DIRECTION('NONE', (-0.5735764363510459, -0.819152044288992, 0));
+#379 = DIRECTION('NONE', (-0.5735764363510459, -0.8191520442889919, 0));
 #380 = AXIS2_PLACEMENT_3D('NONE', #378, #379, $);
 #381 = PLANE('NONE', #380);
 #382 = CARTESIAN_POINT('NONE', (0.19623169406722757, -0.07619999999999999, 0.0508));
-#383 = DIRECTION('NONE', (0, -1, -0));
+#383 = DIRECTION('NONE', (0, -1, 0));
 #384 = AXIS2_PLACEMENT_3D('NONE', #382, #383, $);
 #385 = PLANE('NONE', #384);
 #386 = CARTESIAN_POINT('NONE', (0.2413, -0.06985, 0.0508));
-#387 = DIRECTION('NONE', (1, 0, -0));
+#387 = DIRECTION('NONE', (1, -0, 0));
 #388 = AXIS2_PLACEMENT_3D('NONE', #386, #387, $);
 #389 = PLANE('NONE', #388);
 #390 = CARTESIAN_POINT('NONE', (0.19823384137660915, -0.0635, 0.0508));
@@ -408,19 +408,19 @@ DATA;
 #392 = AXIS2_PLACEMENT_3D('NONE', #390, #391, $);
 #393 = PLANE('NONE', #392);
 #394 = CARTESIAN_POINT('NONE', (0.10982398353915601, -0.03174999999999997, 0.0508));
-#395 = DIRECTION('NONE', (0.573576436351046, 0.8191520442889918, -0));
+#395 = DIRECTION('NONE', (0.5735764363510459, 0.8191520442889917, -0));
 #396 = AXIS2_PLACEMENT_3D('NONE', #394, #395, $);
 #397 = PLANE('NONE', #396);
 #398 = CARTESIAN_POINT('NONE', (0.105333141160801, 0.019049999999999987, 0.0508));
-#399 = DIRECTION('NONE', (0.4226182617406993, -0.90630778703665, -0));
+#399 = DIRECTION('NONE', (0.4226182617406993, -0.90630778703665, 0));
 #400 = AXIS2_PLACEMENT_3D('NONE', #398, #399, $);
 #401 = PLANE('NONE', #400);
 #402 = CARTESIAN_POINT('NONE', (0.19374299899825406, 0.0381, 0.0508));
-#403 = DIRECTION('NONE', (0, -1, -0));
+#403 = DIRECTION('NONE', (0, -1, 0));
 #404 = AXIS2_PLACEMENT_3D('NONE', #402, #403, $);
 #405 = PLANE('NONE', #404);
 #406 = CARTESIAN_POINT('NONE', (0.2413, 0.044449999999999996, 0.0508));
-#407 = DIRECTION('NONE', (1, 0, -0));
+#407 = DIRECTION('NONE', (1, -0, 0));
 #408 = AXIS2_PLACEMENT_3D('NONE', #406, #407, $);
 #409 = PLANE('NONE', #408);
 #410 = CARTESIAN_POINT('NONE', (0.19233523789047138, 0.0508, 0.0508));
@@ -436,7 +436,7 @@ DATA;
 #420 = AXIS2_PLACEMENT_3D('NONE', #418, #419, $);
 #421 = PLANE('NONE', #420);
 #422 = CARTESIAN_POINT('NONE', (0, 0.0127, 0.0508));
-#423 = DIRECTION('NONE', (-1, 0, -0));
+#423 = DIRECTION('NONE', (-1, -0, 0));
 #424 = AXIS2_PLACEMENT_3D('NONE', #422, #423, $);
 #425 = PLANE('NONE', #424);
 #426 = CARTESIAN_POINT('NONE', (0, 0, -0));
@@ -475,7 +475,7 @@ DATA;
 #459 = ADVANCED_FACE('NONE', (#458), #421, .T.);
 #460 = FACE_OUTER_BOUND('NONE', #339, .T.);
 #461 = ADVANCED_FACE('NONE', (#460), #425, .T.);
-#462 = FACE_OUTER_BOUND('NONE', #354, .T.);
+#462 = FACE_OUTER_BOUND('NONE', #354, .F.);
 #463 = ADVANCED_FACE('NONE', (#462), #429, .F.);
 #464 = FACE_OUTER_BOUND('NONE', #369, .T.);
 #465 = ADVANCED_FACE('NONE', (#464), #433, .T.);

e2e/playwright/export-snapshots/stl-ascii.stl

@@ -100,15 +100,15 @@ endfacet
 facet normal 0.57357645 0 0.819152
     outer loop
         vertex 3.4311862 -0 -0.625
-        vertex 2.5385938 -0 0
         vertex 2.5385938 -4 0
+        vertex 3.4311862 -4 -0.625
     endloop
 endfacet
-facet normal 0.57357645 -0 0.819152
+facet normal 0.5735763 0 0.8191522
     outer loop
-        vertex 3.4311862 -4 -0.625
+        vertex 4.323779 -0 -1.25
         vertex 3.4311862 -0 -0.625
-        vertex 2.5385938 -4 0
+        vertex 3.4311862 -4 -0.625
     endloop
 endfacet
 facet normal 0.57357645 -0 0.819152
@@ -118,11 +118,11 @@ facet normal 0.57357645 -0 0.819152
         vertex 4.323779 -0 -1.25
     endloop
 endfacet
-facet normal 0.5735763 0 0.8191522
+facet normal 0.57357645 -0 0.819152
     outer loop
+        vertex 2.5385938 -4 0
         vertex 3.4311862 -0 -0.625
-        vertex 3.4311862 -4 -0.625
-        vertex 4.323779 -0 -1.25
+        vertex 2.5385938 -0 0
     endloop
 endfacet
 facet normal 0.42261824 0 -0.9063078
@@ -142,29 +142,29 @@ endfacet
 facet normal 0.42261824 0 -0.9063078
     outer loop
         vertex 3.342784 -0 0.375
-        vertex 4.146974 -0 0.75
-        vertex 4.146974 -4 0.75
+        vertex 3.342784 -4 0.375
+        vertex 2.5385938 -0 0
     endloop
 endfacet
 facet normal 0.42261833 0 -0.90630776
     outer loop
         vertex 4.146974 -0 0.75
-        vertex 5.755354 -0 1.5
         vertex 5.755354 -4 1.5
+        vertex 4.146974 -4 0.75
     endloop
 endfacet
 facet normal 0.42261824 0 -0.9063078
     outer loop
-        vertex 3.342784 -4 0.375
-        vertex 2.5385938 -0 0
+        vertex 4.146974 -4 0.75
         vertex 3.342784 -0 0.375
+        vertex 4.146974 -0 0.75
     endloop
 endfacet
 facet normal 0.42261833 0 -0.90630776
     outer loop
         vertex 5.755354 -4 1.5
-        vertex 4.146974 -4 0.75
         vertex 4.146974 -0 0.75
+        vertex 5.755354 -0 1.5
     endloop
 endfacet
 facet normal 0 0 -1
@@ -258,6 +258,13 @@ facet normal 0 1 -0
         vertex 3.5 -0 1
     endloop
 endfacet
+facet normal 0 1 0
+    outer loop
+        vertex 4.146974 -0 0.75
+        vertex 3.342784 -0 0.375
+        vertex 3.5 -0 1
+    endloop
+endfacet
 facet normal 0 1 0
     outer loop
         vertex 3.4311862 -0 -0.625
@@ -265,11 +272,53 @@ facet normal 0 1 0
         vertex 3.0950184 -0 -1
     endloop
 endfacet
+facet normal 0 0.99999994 0
+    outer loop
+        vertex 4.146974 -0 0.75
+        vertex 5.644507 -0 2
+        vertex 5.755354 -0 1.5
+    endloop
+endfacet
+facet normal -0 1 0
+    outer loop
+        vertex 0 -0 1
+        vertex 3.5 -0 1
+        vertex 2.5385938 -0 0
+    endloop
+endfacet
 facet normal 0 1 0
     outer loop
-        vertex 3.342784 -0 0.375
-        vertex 3.5 -0 1
+        vertex 0 -0 1
+        vertex 2.5385938 -0 0
+        vertex 0 -0 0
+    endloop
+endfacet
+facet normal -0 1 0
+    outer loop
+        vertex 5.644507 -0 2
+        vertex 9.5 -0 2
+        vertex 5.755354 -0 1.5
+    endloop
+endfacet
+facet normal 0 1 0
+    outer loop
+        vertex 9.5 -0 2
+        vertex 9.5 -0 1.5
+        vertex 5.755354 -0 1.5
+    endloop
+endfacet
+facet normal 0 1 -0
+    outer loop
         vertex 4.146974 -0 0.75
+        vertex 3.5 -0 1
+        vertex 5.644507 -0 2
+    endloop
+endfacet
+facet normal 0 0.99999994 0
+    outer loop
+        vertex 2.5385938 -0 0
+        vertex 3.4311862 -0 -0.625
+        vertex 3.0950184 -0 -1
     endloop
 endfacet
 facet normal 0 0.99999994 0
@@ -281,86 +330,37 @@ facet normal 0 0.99999994 0
 endfacet
 facet normal 0 1 0
     outer loop
-        vertex 0 -0 -1
-        vertex 2.5385938 -0 0
-        vertex 3.0950184 -0 -1
-    endloop
-endfacet
-facet normal 0 1 0
-    outer loop
-        vertex 0 -0 -1
-        vertex 0 -0 0
-        vertex 2.5385938 -0 0
-    endloop
-endfacet
-facet normal 0 0.99999994 -0
-    outer loop
-        vertex 9.5 -0 -3
         vertex 6.108964 -0 -2.5
-        vertex 9.5 -0 -2.5
-    endloop
-endfacet
-facet normal 0 1 0
-    outer loop
-        vertex 9.5 -0 -3
-        vertex 5.9513144 -0 -3
-        vertex 6.108964 -0 -2.5
-    endloop
-endfacet
-facet normal 0 1 -0
-    outer loop
         vertex 5.9513144 -0 -3
         vertex 4.323779 -0 -1.25
+    endloop
+endfacet
+facet normal 0 0.99999994 0
+    outer loop
+        vertex 9.5 -0 -2.5
+        vertex 9.5 -0 -3
         vertex 6.108964 -0 -2.5
     endloop
 endfacet
 facet normal 0 1 0
     outer loop
-        vertex 5.644507 -0 2
-        vertex 5.755354 -0 1.5
-        vertex 4.146974 -0 0.75
+        vertex 6.108964 -0 -2.5
+        vertex 9.5 -0 -3
+        vertex 5.9513144 -0 -3
     endloop
 endfacet
-facet normal 0 0.99999994 -0
+facet normal 0 1 0
     outer loop
+        vertex 2.5385938 -0 0
         vertex 3.0950184 -0 -1
-        vertex 2.5385938 -0 0
-        vertex 3.4311862 -0 -0.625
-    endloop
-endfacet
-facet normal 0 1 -0
-    outer loop
-        vertex 4.146974 -0 0.75
-        vertex 3.5 -0 1
-        vertex 5.644507 -0 2
-    endloop
-endfacet
-facet normal 0 1 -0
-    outer loop
-        vertex 9.5 -0 1.5
-        vertex 5.755354 -0 1.5
-        vertex 9.5 -0 2
-    endloop
-endfacet
-facet normal 0 1 -0
-    outer loop
-        vertex 5.755354 -0 1.5
-        vertex 5.644507 -0 2
-        vertex 9.5 -0 2
+        vertex 0 -0 -1
     endloop
 endfacet
 facet normal 0 1 0
     outer loop
-        vertex 2.5385938 -0 0
+        vertex 0 -0 -1
         vertex 0 -0 0
-        vertex 0 -0 1
-    endloop
-endfacet
-facet normal 0 1 0
-    outer loop
-        vertex 3.5 -0 1
         vertex 2.5385938 -0 0
-        vertex 0 -0 1
     endloop
 endfacet
 facet normal -0 -1 0

e2e/playwright/flow-tests.spec.ts

@@ -1,7 +1,5 @@
 import { test, expect } from '@playwright/test'
 import { secrets } from './secrets'
-import { EngineCommand } from '../../src/lang/std/engineConnection'
-import { v4 as uuidv4 } from 'uuid'
 import { getUtils } from './test-utils'
 import waitOn from 'wait-on'
 import { Themes } from '../../src/lib/theme'
@@ -53,40 +51,38 @@ test('Basic sketch', async ({ page }) => {
   await page.goto('/')
   await u.waitForAuthSkipAppStart()
   await u.openDebugPanel()
-  await u.waitForDefaultPlanesVisibilityChange()
 
   await expect(page.getByRole('button', { name: 'Start Sketch' })).toBeVisible()
 
   // click on "Start Sketch" button
   await u.clearCommandLogs()
-  await Promise.all([
-    u.doAndWaitForImageDiff(
-      () => page.getByRole('button', { name: 'Start Sketch' }).click(),
-      200
-    ),
-    u.waitForDefaultPlanesVisibilityChange(),
-  ])
+  await u.doAndWaitForImageDiff(
+    () => page.getByRole('button', { name: 'Start Sketch' }).click(),
+    200
+  )
 
   // select a plane
-  await u.doAndWaitForCmd(() => page.mouse.click(700, 200), 'edit_mode_enter')
-  await u.waitForCmdReceive('set_tool')
+  await page.mouse.click(700, 200)
 
-  await u.doAndWaitForCmd(
-    () => page.getByRole('button', { name: 'Line' }).click(),
-    'set_tool'
+  await expect(page.locator('.cm-content')).toHaveText(
+    `const part001 = startSketchOn('-XZ')`
   )
 
+  await page.waitForTimeout(300) // TODO detect animation ending, or disable animation
+
   const startXPx = 600
-  await u.doAndWaitForCmd(
-    () => page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10),
-    'mouse_click',
-    false
-  )
+  await page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10)
+  const startAt = '[23.89, -32.23]'
+  await expect(page.locator('.cm-content'))
+    .toHaveText(`const part001 = startSketchOn('-XZ')
+  |> startProfileAt(${startAt}, %)`)
+  await page.waitForTimeout(100)
 
+  await u.closeDebugPanel()
   await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 10)
+  await page.waitForTimeout(100)
 
-  const startAt = '[18.26, -24.63]'
-  const num = '18.43'
+  const num = 24.11
   await expect(page.locator('.cm-content'))
     .toHaveText(`const part001 = startSketchOn('-XZ')
   |> startProfileAt(${startAt}, %)
@@ -97,27 +93,22 @@ test('Basic sketch', async ({ page }) => {
     .toHaveText(`const part001 = startSketchOn('-XZ')
   |> startProfileAt(${startAt}, %)
   |> line([${num}, 0], %)
-  |> line([0, ${num}], %)`)
+  |> line([0, ${num + 0.01}], %)`)
   await page.mouse.click(startXPx, 500 - PUR * 20)
   await expect(page.locator('.cm-content'))
     .toHaveText(`const part001 = startSketchOn('-XZ')
   |> startProfileAt(${startAt}, %)
   |> line([${num}, 0], %)
-  |> line([0, ${num}], %)
-  |> line([-36.69, 0], %)`)
+  |> line([0, ${num + 0.01}], %)
+  |> line([-48, 0], %)`)
 
   // deselect line tool
-  await u.doAndWaitForCmd(
-    () => page.getByRole('button', { name: 'Line' }).click(),
-    'set_tool'
-  )
+  await page.getByRole('button', { name: 'Line' }).click()
+  await page.waitForTimeout(100)
 
   // click between first two clicks to get center of the line
-  await u.doAndWaitForCmd(
-    () => page.mouse.click(startXPx + PUR * 15, 500 - PUR * 10),
-    'select_with_point'
-  )
-  await u.closeDebugPanel()
+  await page.mouse.click(startXPx + PUR * 15, 500 - PUR * 10)
+  await page.waitForTimeout(100)
 
   // hold down shift
   await page.keyboard.down('Shift')
@@ -133,7 +124,7 @@ test('Basic sketch', async ({ page }) => {
     .toHaveText(`const part001 = startSketchOn('-XZ')
   |> startProfileAt(${startAt}, %)
   |> line({ to: [${num}, 0], tag: 'seg01' }, %)
-  |> line([0, ${num}], %)
+  |> line([0, ${num + 0.01}], %)
   |> angledLine([180, segLen('seg01', %)], %)`)
 })
 
@@ -206,7 +197,7 @@ test('if you write invalid kcl you get inlined errors', async ({ page }) => {
 
 test('executes on load', async ({ page, context }) => {
   const u = getUtils(page)
-  await context.addInitScript(async (token) => {
+  await context.addInitScript(async () => {
     localStorage.setItem(
       'persistCode',
       `const part001 = startSketchOn('-XZ')
@@ -271,59 +262,41 @@ test('Can create sketches on all planes and their back sides', async ({
   await page.goto('/')
   await u.waitForAuthSkipAppStart()
   await u.openDebugPanel()
-  await u.waitForDefaultPlanesVisibilityChange()
 
-  const camCmd: EngineCommand = {
-    type: 'modeling_cmd_req',
-    cmd_id: uuidv4(),
-    cmd: {
-      type: 'default_camera_look_at',
-      center: { x: 15, y: 0, z: 0 },
-      up: { x: 0, y: 0, z: 1 },
-      vantage: { x: 30, y: 30, z: 30 },
-    },
-  }
+  const camPos: [number, number, number] = [100, 100, 100]
 
   const TestSinglePlane = async ({
     viewCmd,
     expectedCode,
     clickCoords,
   }: {
-    viewCmd: EngineCommand
+    viewCmd: [number, number, number]
     expectedCode: string
     clickCoords: { x: number; y: number }
   }) => {
     await u.openDebugPanel()
-    await u.sendCustomCmd(viewCmd)
+
+    await u.updateCamPosition(viewCmd)
+
     await u.clearCommandLogs()
-    // await page.waitForTimeout(200)
     await page.getByRole('button', { name: 'Start Sketch' }).click()
-    await u.waitForDefaultPlanesVisibilityChange()
 
     await u.closeDebugPanel()
     await page.mouse.click(clickCoords.x, clickCoords.y)
-    await u.openDebugPanel()
+    await page.waitForTimeout(300) // wait for animation
 
     await expect(page.getByRole('button', { name: 'Line' })).toBeVisible()
 
     // draw a line
     const startXPx = 600
-    await u.clearCommandLogs()
-    await page.getByRole('button', { name: 'Line' }).click()
-    await u.waitForCmdReceive('set_tool')
-    await u.clearCommandLogs()
+
     await u.closeDebugPanel()
     await page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10)
-    await u.openDebugPanel()
-    await u.waitForCmdReceive('mouse_click')
-    await u.closeDebugPanel()
-    await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 10)
-    await u.openDebugPanel()
 
     await expect(page.locator('.cm-content')).toHaveText(expectedCode)
 
     await page.getByRole('button', { name: 'Line' }).click()
-    await u.clearCommandLogs()
+    await u.openAndClearDebugPanel()
     await page.getByRole('button', { name: 'Exit Sketch' }).click()
     await u.expectCmdLog('[data-message-type="execution-done"]')
 
@@ -333,51 +306,41 @@ test('Can create sketches on all planes and their back sides', async ({
 
   const codeTemplate = (
     plane = 'XY',
-    sign = ''
+    rounded = false,
+    otherThing = '1'
   ) => `const part001 = startSketchOn('${plane}')
-  |> startProfileAt([${sign}6.88, -9.29], %)
-  |> line([${sign}6.95, 0], %)`
+  |> startProfileAt([28.9${otherThing}, -39${rounded ? '' : '.01'}], %)`
   await TestSinglePlane({
-    viewCmd: camCmd,
+    viewCmd: camPos,
     expectedCode: codeTemplate('XY'),
-    clickCoords: { x: 700, y: 350 }, // red plane
+    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: camCmd,
-    expectedCode: codeTemplate('YZ'),
-    clickCoords: { x: 1000, y: 200 }, // green plane
+    viewCmd: camPos,
+    expectedCode: codeTemplate('YZ', true),
+    clickCoords: { x: 700, y: 300 }, // green plane
   })
   await TestSinglePlane({
-    viewCmd: camCmd,
-    expectedCode: codeTemplate('XZ', '-'),
-    clickCoords: { x: 630, y: 130 }, // blue plane
+    viewCmd: camPos,
+    expectedCode: codeTemplate('XZ'),
+    clickCoords: { x: 700, y: 80 }, // blue plane
   })
-
-  // new camera angle to click the back side of all three planes
-  const camCmdBackSide: EngineCommand = {
-    type: 'modeling_cmd_req',
-    cmd_id: uuidv4(),
-    cmd: {
-      type: 'default_camera_look_at',
-      center: { x: -15, y: 0, z: 0 },
-      up: { x: 0, y: 0, z: 1 },
-      vantage: { x: -30, y: -30, z: -30 },
-    },
-  }
+  const camCmdBackSide: [number, number, number] = [-100, -100, -100]
   await TestSinglePlane({
     viewCmd: camCmdBackSide,
-    expectedCode: codeTemplate('-XY', '-'),
-    clickCoords: { x: 705, y: 136 }, // back of red plane
+    expectedCode: codeTemplate('-XY', false, '3'),
+    clickCoords: { x: 601, y: 118 }, // back of red plane
   })
   await TestSinglePlane({
     viewCmd: camCmdBackSide,
-    expectedCode: codeTemplate('-YZ', '-'),
-    clickCoords: { x: 1000, y: 350 }, // back of green plane
+    expectedCode: codeTemplate('-YZ'),
+    clickCoords: { x: 730, y: 219 }, // back of green plane
   })
   await TestSinglePlane({
     viewCmd: camCmdBackSide,
-    expectedCode: codeTemplate('-XZ'),
-    clickCoords: { x: 600, y: 400 }, // back of blue plane
+    expectedCode: codeTemplate('-XZ', true),
+    clickCoords: { x: 680, y: 427 }, // back of blue plane
   })
 })
 
@@ -387,7 +350,6 @@ test('Auto complete works', async ({ page }) => {
   await page.setViewportSize({ width: 1200, height: 500 })
   await page.goto('/')
   await u.waitForAuthSkipAppStart()
-  await u.waitForDefaultPlanesVisibilityChange()
 
   // this test might be brittle as we add and remove functions
   // but should also be easy to update.
@@ -405,6 +367,7 @@ test('Auto complete works', async ({ page }) => {
   await page.keyboard.type('  |> startProfi')
   // expect there be a single auto complete option that we can just hit enter on
   await expect(page.locator('.cm-completionLabel')).toBeVisible()
+  await page.waitForTimeout(100)
   await page.keyboard.press('Enter') // accepting the auto complete, not a new line
 
   await page.keyboard.type('([0,0], %)')
@@ -478,38 +441,36 @@ test('Selections work on fresh and edited sketch', async ({ page }) => {
   await page.goto('/')
   await u.waitForAuthSkipAppStart()
   await u.openDebugPanel()
-  await u.waitForDefaultPlanesVisibilityChange()
 
-  const xAxisClick = () => page.mouse.click(700, 250)
-  const emptySpaceClick = () => page.mouse.click(700, 300)
-  const topHorzSegmentClick = () => page.mouse.click(700, 285)
-  const bottomHorzSegmentClick = () => page.mouse.click(750, 393)
+  const xAxisClick = () =>
+    page.mouse.click(700, 250).then(() => page.waitForTimeout(100))
+  const emptySpaceClick = () =>
+    page.mouse.click(728, 343).then(() => page.waitForTimeout(100))
+  const topHorzSegmentClick = () =>
+    page.mouse.click(709, 289).then(() => page.waitForTimeout(100))
+  const bottomHorzSegmentClick = () =>
+    page.mouse.click(767, 396).then(() => page.waitForTimeout(100))
 
   await u.clearCommandLogs()
   await page.getByRole('button', { name: 'Start Sketch' }).click()
-  await u.waitForDefaultPlanesVisibilityChange()
 
   // select a plane
-  await u.doAndWaitForCmd(() => page.mouse.click(700, 200), 'edit_mode_enter')
-  await u.waitForCmdReceive('set_tool')
-
-  await u.doAndWaitForCmd(
-    () => page.getByRole('button', { name: 'Line' }).click(),
-    'set_tool'
-  )
+  await page.mouse.click(700, 200)
+  await page.waitForTimeout(700) // wait for animation
 
   const startXPx = 600
-  await u.doAndWaitForCmd(
-    () => page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10),
-    'mouse_click',
-    false
-  )
+  await page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10)
+  const startAt = '[23.89, -32.23]'
+  await expect(page.locator('.cm-content'))
+    .toHaveText(`const part001 = startSketchOn('-XZ')
+  |> startProfileAt(${startAt}, %)`)
+
+  await u.closeDebugPanel()
 
   await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 10)
 
-  const startAt = '[18.26, -24.63]'
-  const num = '18.43'
-  const num2 = '36.69'
+  const num = 24.11
+  const num2 = '48'
   await expect(page.locator('.cm-content'))
     .toHaveText(`const part001 = startSketchOn('-XZ')
   |> startProfileAt(${startAt}, %)
@@ -520,20 +481,17 @@ test('Selections work on fresh and edited sketch', async ({ page }) => {
     .toHaveText(`const part001 = startSketchOn('-XZ')
   |> startProfileAt(${startAt}, %)
   |> line([${num}, 0], %)
-  |> line([0, ${num}], %)`)
+  |> line([0, ${num + 0.01}], %)`)
   await page.mouse.click(startXPx, 500 - PUR * 20)
   await expect(page.locator('.cm-content'))
     .toHaveText(`const part001 = startSketchOn('-XZ')
   |> startProfileAt(${startAt}, %)
   |> line([${num}, 0], %)
-  |> line([0, ${num}], %)
+  |> line([0, ${num + 0.01}], %)
   |> line([-${num2}, 0], %)`)
 
   // deselect line tool
-  await u.doAndWaitForCmd(
-    () => page.getByRole('button', { name: 'Line' }).click(),
-    'set_tool'
-  )
+  await page.getByRole('button', { name: 'Line' }).click()
 
   await u.closeDebugPanel()
   const selectionSequence = async () => {
@@ -555,79 +513,72 @@ test('Selections work on fresh and edited sketch', async ({ page }) => {
     // now check clicking works including axis
 
     // click a segment hold shift and click an axis, see that a relevant constraint is enabled
-    await u.doAndWaitForCmd(topHorzSegmentClick, 'select_with_point', false)
+    await topHorzSegmentClick()
     await page.keyboard.down('Shift')
     const absYButton = page.getByRole('button', { name: 'ABS Y' })
     await expect(absYButton).toBeDisabled()
-    await u.doAndWaitForCmd(xAxisClick, 'select_with_point', false)
+    await xAxisClick()
     await page.keyboard.up('Shift')
     await absYButton.and(page.locator(':not([disabled])')).waitFor()
     await expect(absYButton).not.toBeDisabled()
 
     // clear selection by clicking on nothing
-    await u.doAndWaitForCmd(emptySpaceClick, 'select_clear', false)
+    await emptySpaceClick()
 
     // same selection but click the axis first
-    await u.doAndWaitForCmd(xAxisClick, 'select_with_point', false)
+    await xAxisClick()
     await expect(absYButton).toBeDisabled()
     await page.keyboard.down('Shift')
-    await u.doAndWaitForCmd(topHorzSegmentClick, 'select_with_point', false)
+    await topHorzSegmentClick()
+
     await page.keyboard.up('Shift')
     await expect(absYButton).not.toBeDisabled()
 
     // clear selection by clicking on nothing
-    await u.doAndWaitForCmd(emptySpaceClick, 'select_clear', false)
+    await emptySpaceClick()
 
     // check the same selection again by putting cursor in code first then selecting axis
-    await u.doAndWaitForCmd(
-      () => page.getByText(`  |> line([-${num2}, 0], %)`).click(),
-      'select_clear',
-      false
-    )
+    await page.getByText(`  |> line([-${num2}, 0], %)`).click()
     await page.keyboard.down('Shift')
     await expect(absYButton).toBeDisabled()
-    await u.doAndWaitForCmd(xAxisClick, 'select_with_point', false)
+    await xAxisClick()
     await page.keyboard.up('Shift')
     await expect(absYButton).not.toBeDisabled()
 
     // clear selection by clicking on nothing
-    await u.doAndWaitForCmd(emptySpaceClick, 'select_clear', false)
+    await emptySpaceClick()
 
     // select segment in editor than another segment in scene and check there are two cursors
-    await u.doAndWaitForCmd(
-      () => page.getByText(`  |> line([-${num2}, 0], %)`).click(),
-      'select_clear',
-      false
-    )
+    await page.getByText(`  |> line([-${num2}, 0], %)`).click()
+    await page.waitForTimeout(300)
     await page.keyboard.down('Shift')
     await expect(page.locator('.cm-cursor')).toHaveCount(1)
-    await u.doAndWaitForCmd(bottomHorzSegmentClick, 'select_with_point', false) // another segment, bottom one
+    await bottomHorzSegmentClick()
     await page.keyboard.up('Shift')
     await expect(page.locator('.cm-cursor')).toHaveCount(2)
 
     // clear selection by clicking on nothing
-    await u.doAndWaitForCmd(emptySpaceClick, 'select_clear', false)
+    await emptySpaceClick()
   }
 
   await selectionSequence()
 
   // hovering in fresh sketch worked, lets try exiting and re-entering
-  await u.doAndWaitForCmd(
-    () => page.getByRole('button', { name: 'Exit Sketch' }).click(),
-    'edit_mode_exit'
-  )
+  await u.openAndClearDebugPanel()
+  await page.getByRole('button', { name: 'Exit Sketch' }).click()
+  await page.waitForTimeout(200)
   // wait for execution done
+
   await u.expectCmdLog('[data-message-type="execution-done"]')
+  await u.closeDebugPanel()
 
   // select a line
-  await u.doAndWaitForCmd(topHorzSegmentClick, 'select_clear', false)
+  await topHorzSegmentClick()
+  await page.waitForTimeout(200)
 
   // enter sketch again
-  await u.doAndWaitForCmd(
-    () => page.getByRole('button', { name: 'Start Sketch' }).click(),
-    'edit_mode_enter',
-    false
-  )
+  await page.getByRole('button', { name: 'Edit Sketch' }).click()
+  await page.waitForTimeout(700) // wait for animation
 
   // hover again and check it works
   await selectionSequence()
@@ -697,6 +648,8 @@ test('Can extrude from the command bar', async ({ page, context }) => {
   await page.setViewportSize({ width: 1200, height: 500 })
   await page.goto('/')
   await u.waitForAuthSkipAppStart()
+  await u.openDebugPanel()
+  await u.expectCmdLog('[data-message-type="execution-done"]')
 
   let cmdSearchBar = page.getByPlaceholder('Search commands')
   await page.keyboard.press('Meta+K')
@@ -710,10 +663,7 @@ test('Can extrude from the command bar', async ({ page, context }) => {
   await expect(page.getByRole('button', { name: 'selection' })).toBeDisabled()
 
   // Click to select face and set distance
-  await u.openAndClearDebugPanel()
   await page.getByText('|> startProfileAt([-6.95, 4.98], %)').click()
-  await u.waitForCmdReceive('select_add')
-  await u.closeDebugPanel()
   await page.getByRole('button', { name: 'Continue' }).click()
   await expect(page.getByRole('button', { name: 'distance' })).toBeDisabled()
   await page.keyboard.press('Enter')
@@ -735,3 +685,266 @@ test('Can extrude from the command bar', async ({ page, context }) => {
     |> extrude(5, %)`
   )
 })
+
+test('Can add multiple sketches', 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' })).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(500) // TODO detect animation ending, or disable animation
+
+  const startXPx = 600
+  await page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10)
+  const startAt = '[23.89, -32.23]'
+  await expect(page.locator('.cm-content'))
+    .toHaveText(`const part001 = startSketchOn('-XZ')
+  |> startProfileAt(${startAt}, %)`)
+  await page.waitForTimeout(100)
+
+  await u.closeDebugPanel()
+  await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 10)
+  await page.waitForTimeout(100)
+
+  const num = 24.11
+  await expect(page.locator('.cm-content'))
+    .toHaveText(`const part001 = startSketchOn('-XZ')
+  |> startProfileAt(${startAt}, %)
+  |> line([${num}, 0], %)`)
+
+  await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 20)
+  await expect(page.locator('.cm-content'))
+    .toHaveText(`const part001 = startSketchOn('-XZ')
+  |> startProfileAt(${startAt}, %)
+  |> line([${num}, 0], %)
+  |> line([0, ${num + 0.01}], %)`)
+  await page.mouse.click(startXPx, 500 - PUR * 20)
+  const finalCodeFirstSketch = `const part001 = startSketchOn('-XZ')
+  |> startProfileAt(${startAt}, %)
+  |> line([${num}, 0], %)
+  |> line([0, ${num + 0.01}], %)
+  |> line([-48, 0], %)`
+  await expect(page.locator('.cm-content')).toHaveText(finalCodeFirstSketch)
+
+  // exit the sketch
+
+  await u.openAndClearDebugPanel()
+  await page.getByRole('button', { name: 'Exit Sketch' }).click()
+
+  await u.expectCmdLog('[data-message-type="execution-done"]')
+
+  await u.updateCamPosition([0, 100, 100])
+
+  // start a new sketch
+  await u.clearCommandLogs()
+  await page.getByRole('button', { name: 'Start Sketch' }).click()
+  await page.waitForTimeout(100)
+  await page.mouse.click(673, 384)
+
+  await page.waitForTimeout(500) // TODO detect animation ending, or disable animation
+  await u.clearAndCloseDebugPanel()
+
+  await page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10)
+  const startAt2 = '[23.61, -31.85]'
+  await expect(
+    (await page.locator('.cm-content').innerText()).replace(/\s/g, '')
+  ).toBe(
+    `${finalCodeFirstSketch}
+const part002 = startSketchOn('XY')
+  |> startProfileAt(${startAt2}, %)`.replace(/\s/g, '')
+  )
+  await page.waitForTimeout(100)
+
+  await u.closeDebugPanel()
+  await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 10)
+  await page.waitForTimeout(100)
+
+  const num2 = 23.83
+  await expect(
+    (await page.locator('.cm-content').innerText()).replace(/\s/g, '')
+  ).toBe(
+    `${finalCodeFirstSketch}
+const part002 = startSketchOn('XY')
+  |> startProfileAt(${startAt2}, %)
+  |> line([${num2}, 0], %)`.replace(/\s/g, '')
+  )
+
+  await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 20)
+  await expect(
+    (await page.locator('.cm-content').innerText()).replace(/\s/g, '')
+  ).toBe(
+    `${finalCodeFirstSketch}
+const part002 = startSketchOn('XY')
+  |> startProfileAt(${startAt2}, %)
+  |> line([${num2}, 0], %)
+  |> line([0, ${num2}], %)`.replace(/\s/g, '')
+  )
+  await page.mouse.click(startXPx, 500 - PUR * 20)
+  await expect(
+    (await page.locator('.cm-content').innerText()).replace(/\s/g, '')
+  ).toBe(
+    `${finalCodeFirstSketch}
+const part002 = startSketchOn('XY')
+  |> startProfileAt(${startAt2}, %)
+  |> line([${num2}, 0], %)
+  |> line([0, ${num2}], %)
+  |> line([-47.44, 0], %)`.replace(/\s/g, '')
+  )
+})
+
+test('ProgramMemory can be serialised', async ({ page, context }) => {
+  const u = getUtils(page)
+  await context.addInitScript(async () => {
+    localStorage.setItem(
+      'persistCode',
+      `const part = startSketchOn('XY')
+  |> startProfileAt([0, 0], %)
+  |> line([0, 1], %)
+  |> line([1, 0], %)
+  |> line([0, -1], %)
+  |> close(%)
+  |> extrude(1, %)
+  |> patternLinear({
+        axis: [1, 0, 1],
+        repetitions: 3,
+        distance: 6
+      }, %)`
+    )
+  })
+  await page.setViewportSize({ width: 1000, height: 500 })
+  await page.goto('/')
+  const messages: string[] = []
+
+  // Listen for all console events and push the message text to an array
+  page.on('console', (message) => messages.push(message.text()))
+  await u.waitForAuthSkipAppStart()
+
+  // wait for execution done
+  await u.openDebugPanel()
+  await u.expectCmdLog('[data-message-type="execution-done"]')
+
+  const forbiddenMessages = ['cannot serialize tagged newtype variant']
+  forbiddenMessages.forEach((forbiddenMessage) => {
+    messages.forEach((message) => {
+      expect(message).not.toContain(forbiddenMessage)
+    })
+  })
+})
+
+test('edit selections', async ({ page, context }) => {
+  const u = getUtils(page)
+  const selectionsSnippets = {
+    extrudeAndEditBlocked: '|> startProfileAt([10.81, 32.99], %)',
+    extrudeAndEditBlockedInFunction: '|> startProfileAt(pos, %)',
+    extrudeAndEditAllowed: '|> startProfileAt([15.72, 4.7], %)',
+    editOnly: '|> startProfileAt([15.79, -14.6], %)',
+  }
+  await context.addInitScript(
+    async ({
+      extrudeAndEditBlocked,
+      extrudeAndEditBlockedInFunction,
+      extrudeAndEditAllowed,
+      editOnly,
+    }: any) => {
+      localStorage.setItem(
+        'persistCode',
+        `const part001 = startSketchOn('-XZ')
+  ${extrudeAndEditBlocked}
+  |> line([25.96, 2.93], %)
+  |> line([5.25, -5.72], %)
+  |> line([-2.01, -10.35], %)
+  |> line([-27.65, -2.78], %)
+  |> close(%)
+  |> extrude(5, %)
+const part002 = startSketchOn('-XZ')
+  ${extrudeAndEditAllowed}
+  |> line([10.32, 6.47], %)
+  |> line([9.71, -6.16], %)
+  |> line([-3.08, -9.86], %)
+  |> line([-12.02, -1.54], %)
+  |> close(%)
+const part003 = startSketchOn('-XZ')
+  ${editOnly}
+  |> line([27.55, -1.65], %)
+  |> line([4.95, -8], %)
+  |> line([-20.38, -10.12], %)
+  |> line([-15.79, 17.08], %)
+
+fn yohey = (pos) => {
+  const part004 = startSketchOn('-XZ')
+  ${extrudeAndEditBlockedInFunction}
+  |> line([27.55, -1.65], %)
+  |> line([4.95, -10.53], %)
+  |> line([-20.38, -8], %)
+  |> line([-15.79, 17.08], %)
+  return ''
+}
+    
+    yohey([15.79, -34.6])
+`
+      )
+    },
+    selectionsSnippets
+  )
+  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.closeDebugPanel()
+
+  await page.getByText(selectionsSnippets.extrudeAndEditBlocked).click()
+  await expect(page.getByRole('button', { name: 'Extrude' })).toBeDisabled()
+  await expect(
+    page.getByRole('button', { name: 'Edit Sketch' })
+  ).not.toBeVisible()
+
+  await page.getByText(selectionsSnippets.extrudeAndEditAllowed).click()
+  await expect(page.getByRole('button', { name: 'Extrude' })).not.toBeDisabled()
+  await expect(
+    page.getByRole('button', { name: 'Edit Sketch' })
+  ).not.toBeDisabled()
+
+  await page.getByText(selectionsSnippets.editOnly).click()
+  await expect(page.getByRole('button', { name: 'Extrude' })).toBeDisabled()
+  await expect(
+    page.getByRole('button', { name: 'Edit Sketch' })
+  ).not.toBeDisabled()
+
+  await page
+    .getByText(selectionsSnippets.extrudeAndEditBlockedInFunction)
+    .click()
+  await expect(page.getByRole('button', { name: 'Extrude' })).toBeDisabled()
+  await expect(
+    page.getByRole('button', { name: 'Edit Sketch' })
+  ).not.toBeVisible()
+
+  // selecting an editable sketch but clicking "start sktech" should start a new sketch and not edit the existing one
+  await page.getByText(selectionsSnippets.extrudeAndEditAllowed).click()
+  await page.getByRole('button', { name: 'Start Sketch' }).click()
+  await page.mouse.click(700, 200)
+  // expect main content to contain `part005` i.e. started a new sketch
+  await expect(page.locator('.cm-content')).toHaveText(
+    /part005 = startSketchOn\('-XZ'\)/
+  )
+})

e2e/playwright/snapshot-tests.spec.ts

@@ -1,7 +1,5 @@
 import { test, expect } from '@playwright/test'
 import { secrets } from './secrets'
-import { EngineCommand } from '../../src/lang/std/engineConnection'
-import { v4 as uuidv4 } from 'uuid'
 import { getUtils } from './test-utils'
 import { Models } from '@kittycad/lib'
 import fsp from 'fs/promises'
@@ -40,19 +38,8 @@ test('change camera, show planes', async ({ page, context }) => {
   await u.waitForAuthSkipAppStart()
   await u.openAndClearDebugPanel()
 
-  const camCmd: EngineCommand = {
-    type: 'modeling_cmd_req',
-    cmd_id: uuidv4(),
-    cmd: {
-      type: 'default_camera_look_at',
-      center: { x: 0, y: 0, z: 0 },
-      up: { x: 0, y: 0, z: 1 },
-      vantage: { x: 0, y: 85, z: 85 },
-    },
-  }
-
-  await u.sendCustomCmd(camCmd)
-  await u.waitForCmdReceive('default_camera_look_at')
+  const camPos: [number, number, number] = [0, 85, 85]
+  await u.updateCamPosition(camPos)
 
   // rotate
   await u.closeDebugPanel()
@@ -62,13 +49,11 @@ test('change camera, show planes', async ({ page, context }) => {
   await page.mouse.up({ button: 'right' })
 
   await u.openDebugPanel()
-  await u.waitForCmdReceive('camera_drag_end')
   await page.waitForTimeout(500)
   await u.clearCommandLogs()
 
   await page.getByRole('button', { name: 'Start Sketch' }).click()
 
-  await u.waitForDefaultPlanesVisibilityChange()
   await u.closeDebugPanel()
 
   await expect(page).toHaveScreenshot({
@@ -77,10 +62,8 @@ test('change camera, show planes', async ({ page, context }) => {
 
   await u.openAndClearDebugPanel()
   await page.getByRole('button', { name: 'Exit Sketch' }).click()
-  await u.waitForDefaultPlanesVisibilityChange()
 
-  await u.sendCustomCmd(camCmd)
-  await u.waitForCmdReceive('default_camera_look_at')
+  await u.updateCamPosition(camPos)
 
   await u.clearCommandLogs()
   await u.closeDebugPanel()
@@ -93,12 +76,10 @@ test('change camera, show planes', async ({ page, context }) => {
   await page.keyboard.up('Shift')
 
   await u.openDebugPanel()
-  await u.waitForCmdReceive('camera_drag_end')
   await page.waitForTimeout(300)
   await u.clearCommandLogs()
 
   await page.getByRole('button', { name: 'Start Sketch' }).click()
-  await u.waitForDefaultPlanesVisibilityChange()
   await u.closeDebugPanel()
 
   await expect(page).toHaveScreenshot({
@@ -107,10 +88,8 @@ test('change camera, show planes', async ({ page, context }) => {
 
   await u.openAndClearDebugPanel()
   await page.getByRole('button', { name: 'Exit Sketch' }).click()
-  await u.waitForDefaultPlanesVisibilityChange()
 
-  await u.sendCustomCmd(camCmd)
-  await u.waitForCmdReceive('default_camera_look_at')
+  await u.updateCamPosition(camPos)
 
   await u.clearCommandLogs()
   await u.closeDebugPanel()
@@ -119,17 +98,15 @@ test('change camera, show planes', async ({ page, context }) => {
   await page.keyboard.down('Control')
   await page.mouse.move(700, 400)
   await page.mouse.down({ button: 'right' })
-  await page.mouse.move(700, 350)
+  await page.mouse.move(700, 300)
   await page.mouse.up({ button: 'right' })
   await page.keyboard.up('Control')
 
   await u.openDebugPanel()
-  await u.waitForCmdReceive('camera_drag_end')
   await page.waitForTimeout(300)
   await u.clearCommandLogs()
 
   await page.getByRole('button', { name: 'Start Sketch' }).click()
-  await u.waitForDefaultPlanesVisibilityChange()
   await u.closeDebugPanel()
 
   await expect(page).toHaveScreenshot({
@@ -164,11 +141,11 @@ const part001 = startSketchOn('-XZ')
   |> xLineTo({ to: totalLen, tag: 'seg03' }, %)
   |> yLine({ length: -armThick, tag: 'seg01' }, %)
   |> angledLineThatIntersects({
-        angle: _180,
+        angle: HALF_TURN,
         offset: -armThick,
         intersectTag: 'seg04'
       }, %)
-  |> angledLineToY([segAng('seg04', %) + 180, _0], %)
+  |> angledLineToY([segAng('seg04', %) + 180, ZERO], %)
   |> angledLineToY({
         angle: -bottomAng,
         to: -totalHeightHalf - armThick,
@@ -177,12 +154,12 @@ const part001 = startSketchOn('-XZ')
   |> xLineTo(segEndX('seg03', %) + 0, %)
   |> yLine(-segLen('seg01', %), %)
   |> angledLineThatIntersects({
-        angle: _180,
+        angle: HALF_TURN,
         offset: -armThick,
         intersectTag: 'seg02'
       }, %)
   |> angledLineToY([segAng('seg02', %) + 180, -baseHeight], %)
-  |> xLineTo(_0, %)
+  |> xLineTo(ZERO, %)
   |> close(%) 
   |> extrude(4, %)`
     )
@@ -191,7 +168,6 @@ const part001 = startSketchOn('-XZ')
   await page.goto('/')
   await u.waitForAuthSkipAppStart()
   await u.openDebugPanel()
-  await u.waitForDefaultPlanesVisibilityChange()
   await u.expectCmdLog('[data-message-type="execution-done"]')
   await u.waitForCmdReceive('extrude')
   await page.waitForTimeout(1000)
@@ -386,3 +362,118 @@ const part001 = startSketchOn('-XZ')
     })
   }
 })
+
+test('extrude on each default plane should be stable', async ({
+  page,
+  context,
+}) => {
+  const u = getUtils(page)
+  const makeCode = (plane = 'XY') => `const part001 = startSketchOn('${plane}')
+  |> startProfileAt([14.06, 8.88], %)
+  |> line([12.98, -0.15], %)
+  |> line([5.56, 9.89], %)
+  |> line([-11.28, 8.96], %)
+  |> line([-10.81, -7.57], %)
+  |> close(%)
+  |> extrude(20, %)
+`
+  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 }) => {
+  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' })).toBeVisible()
+
+  // click on "Start Sketch" button
+  await u.clearCommandLogs()
+  await u.doAndWaitForImageDiff(
+    () => page.getByRole('button', { name: 'Start Sketch' }).click(),
+    200
+  )
+
+  // select a plane
+  await page.mouse.click(700, 200)
+
+  await expect(page.locator('.cm-content')).toHaveText(
+    `const part001 = startSketchOn('-XZ')`
+  )
+
+  await page.waitForTimeout(300) // TODO detect animation ending, or disable animation
+
+  const startXPx = 600
+  await page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10)
+  const startAt = '[23.89, -32.23]'
+  await expect(page.locator('.cm-content'))
+    .toHaveText(`const part001 = startSketchOn('-XZ')
+  |> startProfileAt(${startAt}, %)`)
+  await page.waitForTimeout(100)
+
+  await u.closeDebugPanel()
+  await page.mouse.move(startXPx + PUR * 20, 500 - PUR * 10)
+  await expect(page).toHaveScreenshot({
+    maxDiffPixels: 100,
+  })
+
+  await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 10)
+  await page.waitForTimeout(100)
+
+  const num = 24.11
+  await expect(page.locator('.cm-content'))
+    .toHaveText(`const part001 = startSketchOn('-XZ')
+  |> startProfileAt(${startAt}, %)
+  |> line([${num}, 0], %)`)
+
+  await page.getByRole('button', { name: 'Tangential Arc' }).click()
+
+  await page.mouse.move(startXPx + PUR * 30, 500 - PUR * 20, { steps: 10 })
+
+  await expect(page).toHaveScreenshot({
+    maxDiffPixels: 100,
+  })
+})

e2e/playwright/test-utils.ts

@@ -80,10 +80,21 @@ export function getUtils(page: Page) {
     waitForAuthSkipAppStart: () => waitForPageLoad(page),
     removeCurrentCode: () => removeCurrentCode(page),
     sendCustomCmd: (cmd: EngineCommand) => sendCustomCmd(page, cmd),
+    updateCamPosition: async (xyz: [number, number, number]) => {
+      const fillInput = async () => {
+        await page.fill('[data-testid="cam-x-position"]', String(xyz[0]))
+        await page.fill('[data-testid="cam-y-position"]', String(xyz[1]))
+        await page.fill('[data-testid="cam-z-position"]', String(xyz[2]))
+      }
+      await fillInput()
+      await page.waitForTimeout(100)
+      await fillInput()
+      await page.waitForTimeout(100)
+      await fillInput()
+      await page.waitForTimeout(100)
+    },
     clearCommandLogs: () => clearCommandLogs(page),
     expectCmdLog: (locatorStr: string) => expectCmdLog(page, locatorStr),
-    waitForDefaultPlanesVisibilityChange: () =>
-      waitForDefaultPlanesToBeVisible(page),
     openDebugPanel: () => openDebugPanel(page),
     closeDebugPanel: () => closeDebugPanel(page),
     openAndClearDebugPanel: async () => {

e2e/tauri/specs/auth.e2e.ts

@@ -1,19 +1,26 @@
 import { browser, $, expect } from '@wdio/globals'
 import fs from 'fs/promises'
 
-describe('KCMA (Tauri, Linux)', () => {
-  it('opens the auth page, signs in, and signs out', async () => {
-    // Clean up previous tests
+const defaultDir = `${process.env.HOME}/Documents/zoo-modeling-app-projects`
+const userCodeDir = '/tmp/kittycad_user_code'
+
+async function click(element: WebdriverIO.Element): Promise<void> {
+  // Workaround for .click(), see https://github.com/tauri-apps/tauri/issues/6541
+  await element.waitForClickable()
+  await browser.execute('arguments[0].click();', element)
+}
+
+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('/tmp/kittycad_user_code', { force: true })
-    await browser.execute('window.localStorage.clear()')
+    await fs.rm(defaultDir, { force: true, recursive: true })
+    await fs.rm(userCodeDir, { force: true })
 
     const signInButton = await $('[data-testid="sign-in-button"]')
     expect(await signInButton.getText()).toEqual('Sign in')
 
-    // Workaround for .click(), see https://github.com/tauri-apps/tauri/issues/6541
-    await signInButton.waitForClickable()
-    await browser.execute('arguments[0].click();', signInButton)
+    await click(signInButton)
     await new Promise((resolve) => setTimeout(resolve, 2000))
 
     // Get from main.rs
@@ -49,14 +56,49 @@ describe('KCMA (Tauri, Linux)', () => {
     // Now should be signed in
     const newFileButton = await $('[data-testid="home-new-file"]')
     expect(await newFileButton.getText()).toEqual('New file')
+  })
 
-    // So let's sign out!
+  it('opens the settings page, checks filesystem settings, and closes the settings page', async () => {
     const menuButton = await $('[data-testid="user-sidebar-toggle"]')
-    await menuButton.waitForClickable()
-    await browser.execute('arguments[0].click();', menuButton)
+    await click(menuButton)
+
+    const settingsButton = await $('[data-testid="settings-button"]')
+    await click(settingsButton)
+
+    const defaultDirInput = await $('[data-testid="default-directory-input"]')
+    expect(await defaultDirInput.getValue()).toEqual(defaultDir)
+
+    const nameInput = await $('[data-testid="name-input"]')
+    expect(await nameInput.getValue()).toEqual('project-$nnn')
+
+    const closeButton = await $('[data-testid="close-button"]')
+    await click(closeButton)
+  })
+
+  it('checks that no file exists, creates a new file', async () => {
+    const homeSection = await $('[data-testid="home-section"]')
+    expect(await homeSection.getText()).toContain('No Projects found')
+
+    const newFileButton = await $('[data-testid="home-new-file"]')
+    await click(newFileButton)
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+
+    expect(await homeSection.getText()).toContain('project-000')
+  })
+
+  it('opens the new file and expects a loading stream', async () => {
+    const projectLink = await $('[data-testid="project-link"]')
+    await click(projectLink)
+    const loadingText = await $('[data-testid="loading-stream"]')
+    expect(await loadingText.getText()).toContain('Loading stream...')
+    await browser.execute('window.location.href = "tauri://localhost/home"')
+  })
+
+  it('signs out', async () => {
+    const menuButton = await $('[data-testid="user-sidebar-toggle"]')
+    await click(menuButton)
     const signoutButton = await $('[data-testid="user-sidebar-sign-out"]')
-    await signoutButton.waitForClickable()
-    await browser.execute('arguments[0].click();', signoutButton)
+    await click(signoutButton)
     const newSignInButton = await $('[data-testid="sign-in-button"]')
     expect(await newSignInButton.getText()).toEqual('Sign in')
   })

index.html

@@ -11,8 +11,13 @@
     />
     <link rel="apple-touch-icon" href="/logo192.png" />
     <link rel="manifest" href="/manifest.json" />
-    <script defer data-domain="app.kittycad.io" src="https://plausible.corp.kittycad.io/js/script.js"></script>
-    <title>Modeling App</title>
+    <link rel="stylesheet" href="https://use.typekit.net/zzv8rvm.css" />
+    <script
+      defer
+      data-domain="app.zoo.dev"
+      src="https://plausible.corp.zoo.dev/js/script.js"
+    ></script>
+    <title>Zoo Modeling App</title>
   </head>
   <body class="body-bg">
     <noscript>You need to enable JavaScript to run this app.</noscript>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "untitled-app",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "private": true,
   "dependencies": {
     "@codemirror/autocomplete": "^6.10.2",
@@ -10,7 +10,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.17",
     "@headlessui/tailwindcss": "^0.2.0",
-    "@kittycad/lib": "^0.0.46",
+    "@kittycad/lib": "^0.0.53",
     "@lezer/javascript": "^1.4.9",
     "@open-rpc/client-js": "^1.8.1",
     "@react-hook/resize-observer": "^1.2.6",
@@ -21,12 +21,13 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@ts-stack/markdown": "^1.5.0",
+    "@tweenjs/tween.js": "^23.1.1",
     "@types/node": "^16.7.13",
     "@types/react": "^18.2.41",
     "@types/react-dom": "^18.0.0",
     "@uiw/react-codemirror": "^4.21.20",
     "@xstate/inspect": "^0.8.0",
-    "@xstate/react": "^3.2.2",
+    "@xstate/react": "^4.1.0",
     "crypto-js": "^4.2.0",
     "debounce-promise": "^3.1.2",
     "formik": "^2.4.3",
@@ -45,6 +46,7 @@
     "sketch-helpers": "^0.0.4",
     "swr": "^2.2.2",
     "tauri-plugin-fs-extra-api": "https://github.com/tauri-apps/tauri-plugin-fs-extra#v1",
+    "three": "^0.160.0",
     "toml": "^3.0.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2",
@@ -55,7 +57,7 @@
     "wasm-pack": "^0.12.1",
     "web-vitals": "^3.5.0",
     "ws": "^8.13.0",
-    "xstate": "^4.38.2",
+    "xstate": "^5.7.1",
     "zustand": "^4.4.5"
   },
   "scripts": {
@@ -82,7 +84,9 @@
     "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\" '.package.version=$v' src-tauri/tauri.conf.json --indent 2)\" > src-tauri/tauri.conf.json",
+    "postinstall": "patch-package && yarn xstate:typegen",
+    "xstate:typegen": "yarn xstate typegen \"src/**/*.ts?(x)\""
   },
   "prettier": {
     "trailingComma": "es5",
@@ -113,6 +117,7 @@
     "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.4",
     "@types/react-modal": "^3.16.3",
+    "@types/three": "^0.160.0",
     "@types/uuid": "^9.0.4",
     "@types/wait-on": "^5.3.4",
     "@types/wicg-file-system-access": "^2020.9.6",
@@ -124,21 +129,26 @@
     "@wdio/local-runner": "^8.24.3",
     "@wdio/mocha-framework": "^8.24.3",
     "@wdio/spec-reporter": "^8.24.2",
+    "@xstate/cli": "^0.5.17",
     "autoprefixer": "^10.4.13",
     "eslint": "^8.53.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-css-modules": "^2.12.0",
     "happy-dom": "^10.8.0",
     "husky": "^8.0.3",
+    "patch-package": "^8.0.0",
     "pixelmatch": "^5.3.0",
     "pngjs": "^7.0.0",
     "postcss": "^8.4.31",
+    "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.8.0",
     "setimmediate": "^1.0.5",
     "tailwindcss": "^3.3.6",
-    "vite": "^4.5.0",
+    "vite": "^4.5.2",
     "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-package-version": "^1.1.0",
     "vite-tsconfig-paths": "^4.2.1",
+    "vitest-webgl-canvas-mock": "^1.1.0",
     "wait-on": "^7.2.0",
     "yarn": "^1.22.19"
   }

patches/three+0.160.0.patch

@@ -0,0 +1,138 @@
+diff --git a/node_modules/three/examples/jsm/controls/OrbitControls.js b/node_modules/three/examples/jsm/controls/OrbitControls.js
+index f29e7fe..0ef636b 100644
+--- a/node_modules/three/examples/jsm/controls/OrbitControls.js
++++ b/node_modules/three/examples/jsm/controls/OrbitControls.js
+@@ -113,6 +113,25 @@ class OrbitControls extends EventDispatcher {
+ 		// public methods
+ 		//
+ 
++		this.interactionGuards = {
++			pan: {
++				description: 'Right click + Shift + drag or middle click + drag',
++				callback: (e) => e.button === 2 && !e.ctrlKey,
++			},
++			zoom: {
++				description: 'Scroll wheel or Right click + Ctrl + drag',
++				dragCallback: (e) => e.button === 2 && e.ctrlKey,
++				scrollCallback: () => true,
++			},
++			rotate: {
++				description: 'Right click + drag',
++				callback: (e) => e.button === 0,
++			},
++		}
++		this.setMouseGuards = (interactionGuards) => {
++			this.interactionGuards = interactionGuards
++		}
++
+ 		this.getPolarAngle = function () {
+ 
+ 			return spherical.phi;
+@@ -1057,92 +1076,21 @@ class OrbitControls extends EventDispatcher {
+ 
+ 		function onMouseDown( event ) {
+       
+-			let mouseAction;
+-
+-			switch ( event.button ) {
+-
+-				case 0:
+-
+-					mouseAction = scope.mouseButtons.LEFT;
+-					break;
+-
+-				case 1:
+-
+-					mouseAction = scope.mouseButtons.MIDDLE;
+-					break;
+-
+-				case 2:
+-
+-					mouseAction = scope.mouseButtons.RIGHT;
+-					break;
+-
+-				default:
+-
+-					mouseAction = - 1;
+-
+-			}
+-
+-			switch ( mouseAction ) {
+-
+-				case MOUSE.DOLLY:
+-
+-					if ( scope.enableZoom === false ) return;
+-
+-					handleMouseDownDolly( event );
+-
+-					state = STATE.DOLLY;
+-
+-					break;
+-
+-				case MOUSE.ROTATE:
+-
+-					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+-
+-						if ( scope.enablePan === false ) return;
+-
+-						handleMouseDownPan( event );
+-
+-						state = STATE.PAN;
+-
+-					} else {
+-
+-						if ( scope.enableRotate === false ) return;
+-
+-						handleMouseDownRotate( event );
+-
+-						state = STATE.ROTATE;
+-
+-					}
+-
+-					break;
+-
+-				case MOUSE.PAN:
+-
+-					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+-
+-						if ( scope.enableRotate === false ) return;
+-
+-						handleMouseDownRotate( event );
+-
+-						state = STATE.ROTATE;
+-
+-					} else {
+-
+-						if ( scope.enablePan === false ) return;
+-
+-						handleMouseDownPan( event );
+-
+-						state = STATE.PAN;
+-
+-					}
+-
+-					break;
+-
+-				default:
+-
+-					state = STATE.NONE;
+-
+-			}
++      if (scope.interactionGuards.pan.callback(event)) {
++        if (scope.enablePan === false) return
++        handleMouseDownPan(event)
++        state = STATE.PAN
++      } else if (scope.interactionGuards.rotate.callback(event)) {
++        if (scope.enableRotate === false) return
++        handleMouseDownRotate(event)
++        state = STATE.ROTATE
++      } else if (scope.interactionGuards.zoom.dragCallback(event)) {
++        if (scope.enableZoom === false) return
++        handleMouseDownDolly(event)
++        state = STATE.DOLLY
++      } else {
++        return
++      }
+ 
+ 			if ( state !== STATE.NONE ) {
+ 

playwright.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig, devices } from '@playwright/test'
 
 /**
  * Read environment variables from file.
@@ -78,5 +78,4 @@ export default defineConfig({
     // url: 'http://127.0.0.1:3000',
     reuseExistingServer: !process.env.CI,
   },
-});
-
+})

public/announce_release.py

@@ -0,0 +1,26 @@
+import requests
+import os
+
+webhook_url = os.getenv('DISCORD_WEBHOOK_URL')
+release_version = os.getenv('RELEASE_VERSION')
+release_body = os.getenv('RELEASE_BODY')
+
+# message to send to Discord
+data = {
+    "content": 
+        f'''
+        **{release_version}** is now available! Check out the latest features and improvements here: https://zoo.dev/modeling-app/download
+        {release_body}
+        ''',
+    "username": "Modeling App Release Updates",
+    "avatar_url": "https://raw.githubusercontent.com/KittyCAD/modeling-app/main/public/discord-avatar.png"
+}
+
+# POST request to the Discord webhook
+response = requests.post(webhook_url, json=data)
+
+# Check for success
+if response.status_code == 204:
+    print("Successfully sent the message to Discord.")
+else:
+    print("Failed to send the message to Discord.")

public/expectations.md

@@ -4,9 +4,9 @@
 
 First off, thank you so much for your interest in being a part of the closed Alpha program! We are thrilled to have others use our product and see what you build with it (and truthfully, how you break it too).
 
-### KittyCAD Modeling App (KCMA)
+### Zoo Modeling App (ZMA)
 
-What we are introducing to you is our KittyCAD Modeling App (KCMA). KCMA is a CAD application that expresses a hybrid style of traditional CAD interface along with a code-CAD interface. KCMA is a great way for us to test our own APIs as well as inspire others to develop their own applications.
+What we are introducing to you is our Zoo Modeling App (ZMA). ZMA is a CAD application that expresses a hybrid style of traditional CAD interface along with a code-CAD interface. ZMA is a great way for us to test our own APIs as well as inspire others to develop their own applications.
 
 ### Why Code?
 
@@ -18,11 +18,11 @@ Plenty of you have professional CAD experience, and may not understand why codin
 - Reproducibility
 - Easier integration with other tools
 
-### Before You Use KCMA
+### Before You Use ZMA
 
 Before you dive straight into the app, we wanted to lay some expectations out for you. 
 
-- KCMA is in early development. Kurt pitched the idea back in January, and the team has been working hard on it since then. KCMA has really basic CAD features for now, but we have plenty of features on our roadmap. Most of the features that you may be currently used to in your CAD workflow today will be available down the road.
+- ZMA is in early development. Kurt pitched the idea back in January, and the team has been working hard on it since then. ZMA has really basic CAD features for now, but we have plenty of features on our roadmap. Most of the features that you may be currently used to in your CAD workflow today will be available down the road.
 - For a list of all scripting functions, please reference our [documentation](https://github.com/KittyCAD/modeling-app/blob/main/docs/kcl/std.md). For a basic rundown of our types, please reference [this document](https://github.com/KittyCAD/modeling-app/blob/main/docs/kcl/types.md).
 - With that being said, we have created an external new features list in [GH Discussions](https://github.com/KittyCAD/modeling-app/discussions). For our current priority list, please click [here](https://github.com/KittyCAD/modeling-app/blob/main/public/roadmap.md). Please upvote any features in the GH Discussions page that you would like to see implemented first. We will prioritize the highest upvoted items or items that are foundational for other features on the list. You can also add your own, but we will review it to make sure it’s not a duplicate or it’s feasible for the current state of the app.
 - Please report any and all bugs/issues you find. Even the smallest bugs are important! You can report them in a GH Issue [here](https://github.com/KittyCAD/modeling-app/issues/new). You are more than welcome to link your GH Issue in the **bugs** section of our Discord, but if you want to discuss the bug further, please keep that in the GH Issue thread. Please include the severity of the bug in your GH Issue ticket (High, Medium, or Low). If you are having trouble deciding what severity the bug is, use this guideline:

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "KCMA",
-  "name": "KittyCAD Modeling App",
+  "short_name": "ZMA",
+  "name": "Zoo Modeling App",
   "icons": [
     {
       "src": "favicon.ico",

src-tauri/Cargo.lock

@@ -67,9 +67,9 @@ dependencies = [
 
 [[package]]
 name = "anyhow"
-version = "1.0.75"
+version = "1.0.79"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a4668cab20f66d8d020e1fbc0ebe47217433c1b6c8f2040faf858554e394ace6"
+checksum = "080e9890a082662b09c1ad45f567faeeb47f22b5fb23895fbe1e651e718e25ca"
 
 [[package]]
 name = "app"
@@ -95,7 +95,7 @@ checksum = "bc00ceb34980c03614e35a3a4e218276a0a824e911d07651cd0d858a51e8c0f0"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.33",
+ "syn 2.0.48",
 ]
 
 [[package]]
@@ -542,7 +542,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "13b588ba4ac1a99f7f2964d24b3d896ddc6bf847ee3855dbd4366f058cfcd331"
 dependencies = [
  "quote",
- "syn 2.0.33",
+ "syn 2.0.48",
 ]
 
 [[package]]
@@ -552,7 +552,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "30d2b3721e861707777e3195b0158f950ae6dc4a27e4d02ff9f67e3eb3de199e"
 dependencies = [
  "quote",
- "syn 2.0.33",
+ "syn 2.0.48",
 ]
 
 [[package]]
@@ -582,7 +582,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "strsim",
- "syn 2.0.33",
+ "syn 2.0.48",
 ]
 
 [[package]]
@@ -593,7 +593,7 @@ checksum = "29a358ff9f12ec09c3e61fef9b5a9902623a695a46a917b07f269bff1445611a"
 dependencies = [
  "darling_core",
  "quote",
- "syn 2.0.33",
+ "syn 2.0.48",
 ]
 
 [[package]]
@@ -899,7 +899,7 @@ checksum = "89ca545a94061b6365f2c7355b4b32bd20df3ff95f02da9329b34ccc3bd6ee72"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.33",
+ "syn 2.0.48",
 ]
 
 [[package]]
@@ -1242,9 +1242,9 @@ dependencies = [
 
 [[package]]
 name = "h2"
-version = "0.3.20"
+version = "0.3.24"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "97ec8491ebaf99c8eaa73058b045fe58073cd6be7f596ac993ced0b0a0c01049"
+checksum = "bb2c4422095b67ee78da96fbb51a4cc413b3b25883c7717ff7ca1ab31022c9c9"
 dependencies = [
  "bytes",
  "fnv",
@@ -1252,7 +1252,7 @@ dependencies = [
  "futures-sink",
  "futures-util",
  "http",
- "indexmap 1.9.3",
+ "indexmap 2.0.0",
  "slab",
  "tokio",
  "tokio-util",
@@ -1664,9 +1664,9 @@ dependencies = [
 
 [[package]]
 name = "kittycad"
-version = "0.2.42"
+version = "0.2.53"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6aa554d86b6dbbd976a659c912ae25ce817b4378eb12a5684907e263410f0a7b"
+checksum = "a086e1a1bbddb3b38959c0f0ce6de6b3a3b7566e38e0b7d5fb101e91911beed4"
 dependencies = [
  "anyhow",
  "async-trait",
@@ -2215,7 +2215,7 @@ checksum = "a948666b637a0f465e8564c73e89d4dde00d72d4d473cc972f390fc3dcee7d9c"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.33",
+ "syn 2.0.48",
 ]
 
 [[package]]
@@ -2368,7 +2368,7 @@ dependencies = [
  "regex",
  "regex-syntax 0.7.5",
  "structmeta",
- "syn 2.0.33",
+ "syn 2.0.48",
 ]
 
 [[package]]
@@ -2487,7 +2487,7 @@ dependencies = [
  "phf_shared 0.11.2",
  "proc-macro2",
  "quote",
- "syn 2.0.33",
+ "syn 2.0.48",
 ]
 
 [[package]]
@@ -2555,7 +2555,7 @@ checksum = "4359fd9c9171ec6e8c62926d6faaf553a8dc3f64e1507e76da7911b4f6a04405"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.33",
+ "syn 2.0.48",
 ]
 
 [[package]]
@@ -2657,9 +2657,9 @@ checksum = "dc375e1527247fe1a97d8b7156678dfe7c1af2fc075c9a4db3690ecd2a148068"
 
 [[package]]
 name = "proc-macro2"
-version = "1.0.67"
+version = "1.0.78"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3d433d9f1a3e8c1263d9456598b16fec66f4acc9a74dacffd35c7bb09b3a1328"
+checksum = "e2422ad645d89c99f8f3e6b88a9fdeca7fabeac836b1002371c4367c8f984aae"
 dependencies = [
  "unicode-ident",
 ]
@@ -2675,9 +2675,9 @@ dependencies = [
 
 [[package]]
 name = "quote"
-version = "1.0.33"
+version = "1.0.35"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5267fca4496028628a95160fc423a33e8b2e6af8a5302579e322e4b520293cae"
+checksum = "291ec9ab5efd934aaf503a6466c5d5251535d108ee747472c3977cc5acc868ef"
 dependencies = [
  "proc-macro2",
 ]
@@ -3235,9 +3235,9 @@ dependencies = [
 
 [[package]]
 name = "serde"
-version = "1.0.193"
+version = "1.0.196"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "25dd9975e68d0cb5aa1120c288333fc98731bd1dd12f561e468ea4728c042b89"
+checksum = "870026e60fa08c69f064aa766c10f10b1d62db9ccd4d0abb206472bee0ce3b32"
 dependencies = [
  "serde_derive",
 ]
@@ -3253,13 +3253,13 @@ dependencies = [
 
 [[package]]
 name = "serde_derive"
-version = "1.0.193"
+version = "1.0.196"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "43576ca501357b9b071ac53cdc7da8ef0cbd9493d8df094cd821777ea6e894d3"
+checksum = "33c85360c95e7d137454dc81d9a4ed2b8efd8fbe19cee57357b32b9771fccb67"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.33",
+ "syn 2.0.48",
 ]
 
 [[package]]
@@ -3275,9 +3275,9 @@ dependencies = [
 
 [[package]]
 name = "serde_json"
-version = "1.0.108"
+version = "1.0.113"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3d1c7e3eac408d115102c4c24ad393e0821bb3a5df4d506a80f85f7a742a526b"
+checksum = "69801b70b1c3dac963ecb03a364ba0ceda9cf60c71cfe475e99864759c8b8a79"
 dependencies = [
  "itoa 1.0.6",
  "ryu",
@@ -3302,7 +3302,7 @@ checksum = "bcec881020c684085e55a25f7fd888954d56609ef363479dc5a1305eb0d40cab"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.33",
+ "syn 2.0.48",
 ]
 
 [[package]]
@@ -3352,7 +3352,7 @@ dependencies = [
  "darling",
  "proc-macro2",
  "quote",
- "syn 2.0.33",
+ "syn 2.0.48",
 ]
 
 [[package]]
@@ -3556,7 +3556,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "structmeta-derive",
- "syn 2.0.33",
+ "syn 2.0.48",
 ]
 
 [[package]]
@@ -3567,7 +3567,7 @@ checksum = "a60bcaff7397072dca0017d1db428e30d5002e00b6847703e2e42005c95fbe00"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.33",
+ "syn 2.0.48",
 ]
 
 [[package]]
@@ -3605,9 +3605,9 @@ dependencies = [
 
 [[package]]
 name = "syn"
-version = "2.0.33"
+version = "2.0.48"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9caece70c63bfba29ec2fed841a09851b14a235c60010fa4de58089b6c025668"
+checksum = "0f3531638e407dfc0814761abb7c00a5b54992b849452a0646b7f65c9f770f3f"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -3760,9 +3760,9 @@ dependencies = [
 
 [[package]]
 name = "tauri"
-version = "1.5.3"
+version = "1.5.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "32d563b672acde8d0cc4c1b1f5b855976923f67e8d6fe1eba51df0211e197be2"
+checksum = "fd27c04b9543776a972c86ccf70660b517ecabbeced9fb58d8b961a13ad129af"
 dependencies = [
  "anyhow",
  "bytes",
@@ -3812,9 +3812,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-build"
-version = "1.5.0"
+version = "1.5.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "defbfc551bd38ab997e5f8e458f87396d2559d05ce32095076ad6c30f7fc5f9c"
+checksum = "e9914a4715e0b75d9f387a285c7e26b5bbfeb1249ad9f842675a82481565c532"
 dependencies = [
  "anyhow",
  "cargo_toml",
@@ -3831,9 +3831,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-codegen"
-version = "1.4.1"
+version = "1.4.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7b3475e55acec0b4a50fb96435f19631fb58cbcd31923e1a213de5c382536bbb"
+checksum = "a1554c5857f65dbc377cefb6b97c8ac77b1cb2a90d30d3448114d5d6b48a77fc"
 dependencies = [
  "base64 0.21.2",
  "brotli",
@@ -3857,9 +3857,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-macros"
-version = "1.4.2"
+version = "1.4.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "acea6445eececebd72ed7720cfcca46eee3b5bad8eb408be8f7ef2e3f7411500"
+checksum = "277abf361a3a6993ec16bcbb179de0d6518009b851090a01adfea12ac89fa875"
 dependencies = [
  "heck 0.4.1",
  "proc-macro2",
@@ -3872,7 +3872,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-fs-extra"
 version = "0.0.0"
-source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v1#537053d3171a7374a1a86fed422523e7b45a4fb8"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v1#01211ff0759d578e0e9ac8c98c31fdf09077eb34"
 dependencies = [
  "log",
  "serde",
@@ -3883,9 +3883,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-runtime"
-version = "0.14.1"
+version = "0.14.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "07f8e9e53e00e9f41212c115749e87d5cd2a9eebccafca77a19722eeecd56d43"
+checksum = "cf2d0652aa2891ff3e9caa2401405257ea29ab8372cce01f186a5825f1bd0e76"
 dependencies = [
  "gtk",
  "http",
@@ -3904,9 +3904,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-runtime-wry"
-version = "0.14.2"
+version = "0.14.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "803a01101bc611ba03e13329951a1bde44287a54234189b9024b78619c1bc206"
+checksum = "6cae61fbc731f690a4899681c9052dde6d05b159b44563ace8186fc1bfb7d158"
 dependencies = [
  "cocoa",
  "gtk",
@@ -3924,9 +3924,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-utils"
-version = "1.5.1"
+version = "1.5.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a52165bb340e6f6a75f1f5eeeab1bb49f861c12abe3a176067d53642b5454986"
+checksum = "ece74810b1d3d44f29f732a7ae09a63183d63949bbdd59c61f8ed2a1b70150db"
 dependencies = [
  "brotli",
  "ctor",
@@ -4009,7 +4009,7 @@ checksum = "f9456a42c5b0d803c8cd86e73dd7cc9edd429499f37a3550d286d5e86720569f"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.33",
+ "syn 2.0.48",
 ]
 
 [[package]]
@@ -4051,9 +4051,9 @@ checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20"
 
 [[package]]
 name = "tokio"
-version = "1.34.0"
+version = "1.36.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d0c014766411e834f7af5b8f4cf46257aab4036ca95e9d2c144a10f59ad6f5b9"
+checksum = "61285f6515fa018fb2d1e46eb21223fff441ee8db5d0f1435e8ab4f5cdb80931"
 dependencies = [
  "backtrace",
  "bytes",
@@ -4193,7 +4193,7 @@ checksum = "0f57e3ca2a01450b1a921183a9c9cbfda207fd822cef4ccb00a65402cbba7a74"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.33",
+ "syn 2.0.48",
 ]
 
 [[package]]
@@ -4443,7 +4443,7 @@ dependencies = [
  "once_cell",
  "proc-macro2",
  "quote",
- "syn 2.0.33",
+ "syn 2.0.48",
  "wasm-bindgen-shared",
 ]
 
@@ -4477,7 +4477,7 @@ checksum = "e128beba882dd1eb6200e1dc92ae6c5dbaa4311aa7bb211ca035779e5efc39f8"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.33",
+ "syn 2.0.48",
  "wasm-bindgen-backend",
  "wasm-bindgen-shared",
 ]

src-tauri/Cargo.toml

@@ -12,17 +12,17 @@ rust-version = "1.60"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [build-dependencies]
-tauri-build = { version = "1.5.0", features = [] }
+tauri-build = { version = "1.5.1", features = [] }
 
 [dependencies]
 anyhow = "1"
-kittycad = "0.2.42"
+kittycad = "0.2.53"
 oauth2 = "4.4.2"
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
-tauri = { version = "1.5.3", features = [ "os-all", "dialog-all", "fs-all", "http-request", "path-all", "shell-open", "shell-open-api", "devtools"] }
+tauri = { version = "1.5.4", features = [ "os-all", "dialog-all", "fs-all", "http-request", "path-all", "shell-open", "shell-open-api", "devtools"] }
 tauri-plugin-fs-extra = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
-tokio = { version = "1.34.0", features = ["time"] }
+tokio = { version = "1.36.0", features = ["time"] }
 toml = "0.8.2"
 
 [features]

src-tauri/src/main.rs

@@ -7,6 +7,7 @@ use std::io::Read;
 
 use anyhow::Result;
 use oauth2::TokenResponse;
+use std::process::Command;
 use tauri::{InvokeError, Manager};
 const DEFAULT_HOST: &str = "https://api.kittycad.io";
 

src-tauri/tauri.conf.json

@@ -6,8 +6,8 @@
     "distDir": "../build"
   },
   "package": {
-    "productName": "kittycad-modeling",
-    "version": "0.13.0"
+    "productName": "zoo-modeling-app",
+    "version": "0.15.0"
   },
   "tauri": {
     "allowlist": {
@@ -84,7 +84,7 @@
         "fullscreen": false,
         "height": 1200,
         "resizable": true,
-        "title": "KittyCAD Modeling",
+        "title": "Zoo Modeling App",
         "width": 1800
       }
     ]

src-tauri/tauri.macos.conf.json

@@ -1,6 +1,6 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/schema.json",
   "package": {
-    "productName": "KittyCAD Modeling"
+    "productName": "Zoo Modeling App"
   }
 }

src-tauri/tauri.release.conf.json

@@ -4,7 +4,7 @@
     "updater": {
       "active": true,
       "endpoints": [
-        "https://dl.kittycad.io/releases/modeling-app/last_update.json"
+        "https://dl.zoo.dev/releases/modeling-app/last_update.json"
       ],
       "dialog": true,
       "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEUzNzA4MjBEQjFBRTY4NzYKUldSMmFLNnhEWUp3NCtsT21Jd05wQktOaGVkOVp6MUFma0hNTDRDSnI2RkJJTEZOWG1ncFhqcU8K"

src-tauri/tauri.windows.conf.json

@@ -1,6 +1,6 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/schema.json",
   "package": {
-    "productName": "KittyCAD Modeling"
+    "productName": "Zoo Modeling App"
   }
 }

src/App.test.tsx

@@ -1,73 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { App } from './App'
-import { describe, test, vi } from 'vitest'
-import {
-  Route,
-  RouterProvider,
-  createMemoryRouter,
-  createRoutesFromElements,
-} from 'react-router-dom'
-import { GlobalStateProvider } from './components/GlobalStateProvider'
-import CommandBarProvider from 'components/CommandBar/CommandBar'
-import ModelingMachineProvider from 'components/ModelingMachineProvider'
-import { BROWSER_FILE_NAME } from 'Router'
-
-let listener: ((rect: any) => void) | undefined = undefined
-;(global as any).ResizeObserver = class ResizeObserver {
-  constructor(ls: ((rect: any) => void) | undefined) {
-    listener = ls
-  }
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-}
-
-describe('App tests', () => {
-  test('Renders the modeling app screen, including "Variables" pane.', () => {
-    vi.mock('react-router-dom', async () => {
-      const actual = (await vi.importActual('react-router-dom')) as Record<
-        string,
-        any
-      >
-      return {
-        ...actual,
-        useParams: () => ({ id: BROWSER_FILE_NAME }),
-        useLoaderData: () => ({ code: null }),
-      }
-    })
-    render(
-      <TestWrap>
-        <App />
-      </TestWrap>
-    )
-    const linkElement = screen.getByText(/Variables/i)
-    expect(linkElement).toBeInTheDocument()
-
-    vi.restoreAllMocks()
-  })
-})
-
-function TestWrap({ children }: { children: React.ReactNode }) {
-  // We have to use a memory router in the testing environment,
-  // and we have to use the createMemoryRouter function instead of <MemoryRouter /> as of react-router v6.4:
-  // https://reactrouter.com/en/6.16.0/routers/picking-a-router#using-v64-data-apis
-  const router = createMemoryRouter(
-    createRoutesFromElements(
-      <Route
-        path="/file/:id"
-        element={
-          <CommandBarProvider>
-            <GlobalStateProvider>
-              <ModelingMachineProvider>{children}</ModelingMachineProvider>
-            </GlobalStateProvider>
-          </CommandBarProvider>
-        }
-      />
-    ),
-    {
-      initialEntries: ['/file/new'],
-      initialIndex: 0,
-    }
-  )
-  return <RouterProvider router={router} />
-}

src/App.tsx

@@ -19,21 +19,24 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { getNormalisedCoordinates } from './lib/utils'
-import { useLoaderData } from 'react-router-dom'
-import { IndexLoaderData } from './Router'
+import { useLoaderData, useNavigate } from 'react-router-dom'
+import { type IndexLoaderData } from 'lib/types'
+import { paths } from 'lib/paths'
 import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
-import { onboardingPaths } from 'routes/Onboarding'
-import { cameraMouseDragGuards } from 'lib/cameraControls'
-import { CameraDragInteractionType_type } from '@kittycad/lib/dist/types/src/models'
+import { onboardingPaths } from 'routes/Onboarding/paths'
 import { CodeMenu } from 'components/CodeMenu'
 import { TextEditor } from 'components/TextEditor'
 import { Themes, getSystemTheme } from 'lib/theme'
 import { useEngineConnectionSubscriptions } from 'hooks/useEngineConnectionSubscriptions'
 import { engineCommandManager } from './lang/std/engineConnection'
 import { useModelingContext } from 'hooks/useModelingContext'
+import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath'
+import { isTauri } from 'lib/isTauri'
 
 export function App() {
   const { project, file } = useLoaderData() as IndexLoaderData
+  const navigate = useNavigate()
+  const filePath = useAbsoluteFilePath()
 
   useHotKeyListener()
   const {
@@ -51,8 +54,7 @@ export function App() {
   }))
 
   const { settings } = useGlobalStateContext()
-  const { showDebugPanel, onboardingStatus, cameraControls, theme } =
-    settings?.context || {}
+  const { showDebugPanel, onboardingStatus, theme } = settings?.context || {}
   const { state, send } = useModelingContext()
 
   const editorTheme = theme === Themes.System ? getSystemTheme() : theme
@@ -70,7 +72,17 @@ export function App() {
   useHotkeys('shift + l', () => togglePane('logs'))
   useHotkeys('shift + e', () => togglePane('kclErrors'))
   useHotkeys('shift + d', () => togglePane('debug'))
-  useHotkeys('esc', () => send('Cancel'))
+  useHotkeys('esc', () => send({ type: 'Cancel' }))
+  useHotkeys('backspace', (e) => {
+    e.preventDefault()
+  })
+  useHotkeys(
+    isTauri() ? 'mod + ,' : 'shift + mod + ,',
+    () => navigate(filePath + paths.SETTINGS),
+    {
+      splitKey: '|',
+    }
+  )
 
   const paneOpacity = [onboardingPaths.CAMERA, onboardingPaths.STREAMING].some(
     (p) => p === onboardingStatus
@@ -84,9 +96,11 @@ export function App() {
 
   const debounceSocketSend = throttle<EngineCommand>((message) => {
     engineCommandManager.sendSceneCommand(message)
-  }, 16)
+  }, 1000 / 15)
   const handleMouseMove: MouseEventHandler<HTMLDivElement> = (e) => {
-    e.nativeEvent.preventDefault()
+    if (state.matches('Sketch')) {
+      return
+    }
 
     const { x, y } = getNormalisedCoordinates({
       clientX: e.clientX,
@@ -97,58 +111,11 @@ export function App() {
 
     const newCmdId = uuidv4()
     if (buttonDownInStream === undefined) {
-      if (state.matches('Sketch.Line Tool')) {
-        debounceSocketSend({
-          type: 'modeling_cmd_req',
-          cmd_id: newCmdId,
-          cmd: {
-            type: 'mouse_move',
-            window: { x, y },
-          },
-        })
-      } else {
-        debounceSocketSend({
-          type: 'modeling_cmd_req',
-          cmd: {
-            type: 'highlight_set_entity',
-            selected_at_window: { x, y },
-          },
-          cmd_id: newCmdId,
-        })
-      }
-    } else {
-      if (state.matches('Sketch.Move Tool')) {
-        debounceSocketSend({
-          type: 'modeling_cmd_req',
-          cmd_id: newCmdId,
-          cmd: {
-            type: 'handle_mouse_drag_move',
-            window: { x, y },
-          },
-        })
-        return
-      }
-      const interactionGuards = cameraMouseDragGuards[cameraControls]
-      let interaction: CameraDragInteractionType_type
-
-      const eWithButton = { ...e, button: buttonDownInStream }
-
-      if (interactionGuards.pan.callback(eWithButton)) {
-        interaction = 'pan'
-      } else if (interactionGuards.rotate.callback(eWithButton)) {
-        interaction = 'rotate'
-      } else if (interactionGuards.zoom.dragCallback(eWithButton)) {
-        interaction = 'zoom'
-      } else {
-        return
-      }
-
       debounceSocketSend({
         type: 'modeling_cmd_req',
         cmd: {
-          type: 'camera_drag_move',
-          interaction,
-          window: { x, y },
+          type: 'highlight_set_entity',
+          selected_at_window: { x, y },
         },
         cmd_id: newCmdId,
       })
@@ -238,6 +205,7 @@ export function App() {
           open={openPanes.includes('debug')}
         />
       )}
+      {/* <CamToggle /> */}
     </div>
   )
 }

src/Router.tsx

@@ -14,10 +14,7 @@ import {
 import { useEffect } from 'react'
 import { ErrorPage } from './components/ErrorPage'
 import { Settings } from './routes/Settings'
-import Onboarding, {
-  onboardingRoutes,
-  onboardingPaths,
-} from './routes/Onboarding'
+import Onboarding, { onboardingRoutes } from './routes/Onboarding'
 import SignIn from './routes/SignIn'
 import { Auth } from './Auth'
 import { isTauri } from './lib/isTauri'
@@ -29,7 +26,7 @@ import {
   isProjectDirectory,
   PROJECT_ENTRYPOINT,
 } from './lib/tauriFS'
-import { metadata, type Metadata } from 'tauri-plugin-fs-extra-api'
+import { metadata } from 'tauri-plugin-fs-extra-api'
 import DownloadAppBanner from './components/DownloadAppBanner'
 import { WasmErrBanner } from './components/WasmErrBanner'
 import { GlobalStateProvider } from './components/GlobalStateProvider'
@@ -42,9 +39,12 @@ import CommandBarProvider from 'components/CommandBar/CommandBar'
 import { TEST, VITE_KC_SENTRY_DSN } from './env'
 import * as Sentry from '@sentry/react'
 import ModelingMachineProvider from 'components/ModelingMachineProvider'
-import { KclContextProvider, kclManager } from 'lang/KclSinglton'
+import { KclContextProvider, kclManager } from 'lang/KclSingleton'
 import FileMachineProvider from 'components/FileMachineProvider'
 import { sep } from '@tauri-apps/api/path'
+import { paths } from 'lib/paths'
+import { IndexLoaderData, HomeLoaderData } from 'lib/types'
+import { fileSystemManager } from 'lang/std/fileSystemManager'
 
 if (VITE_KC_SENTRY_DSN && !TEST) {
   Sentry.init({
@@ -78,42 +78,8 @@ if (VITE_KC_SENTRY_DSN && !TEST) {
   })
 }
 
-const prependRoutes =
-  (routesObject: Record<string, string>) => (prepend: string) => {
-    return Object.fromEntries(
-      Object.entries(routesObject).map(([constName, path]) => [
-        constName,
-        prepend + path,
-      ])
-    )
-  }
-
-export const paths = {
-  INDEX: '/',
-  HOME: '/home',
-  FILE: '/file',
-  SETTINGS: '/settings',
-  SIGN_IN: '/signin',
-  ONBOARDING: prependRoutes(onboardingPaths)(
-    '/onboarding'
-  ) as typeof onboardingPaths,
-}
-
 export const BROWSER_FILE_NAME = 'new'
 
-export type IndexLoaderData = {
-  code: string | null
-  project?: ProjectWithEntryPointMetadata
-  file?: FileEntry
-}
-
-export type ProjectWithEntryPointMetadata = FileEntry & {
-  entrypointMetadata: Metadata
-}
-export type HomeLoaderData = {
-  projects: ProjectWithEntryPointMetadata[]
-}
-
 type CreateBrowserRouterArg = Parameters<typeof createBrowserRouter>[0]
 
 const addGlobalContextToElements = (
@@ -145,18 +111,18 @@ const router = createBrowserRouter(
     {
       path: paths.FILE + '/:id',
       element: (
-        <Auth>
-          <FileMachineProvider>
-            <KclContextProvider>
+        <KclContextProvider>
+          <Auth>
+            <FileMachineProvider>
               <ModelingMachineProvider>
                 <Outlet />
                 <App />
               </ModelingMachineProvider>
               <WasmErrBanner />
-            </KclContextProvider>
-          </FileMachineProvider>
-          {!isTauri() && import.meta.env.PROD && <DownloadAppBanner />}
-        </Auth>
+            </FileMachineProvider>
+            {!isTauri() && import.meta.env.PROD && <DownloadAppBanner />}
+          </Auth>
+        </KclContextProvider>
       ),
       id: paths.FILE,
       loader: async ({
@@ -209,6 +175,10 @@ const router = createBrowserRouter(
           const children = await readDir(projectPath, { recursive: true })
           kclManager.setCodeAndExecute(code, false)
 
+          // Set the file system manager to the project path
+          // So that WASM gets an updated path for operations
+          fileSystemManager.dir = projectPath
+
           return {
             code,
             project: {
@@ -248,7 +218,7 @@ const router = createBrowserRouter(
           <Home />
         </Auth>
       ),
-      loader: async () => {
+      loader: async (): Promise<HomeLoaderData | Response> => {
         if (!isTauri()) {
           return redirect(paths.FILE + '/' + BROWSER_FILE_NAME)
         }
@@ -259,6 +229,7 @@ const router = createBrowserRouter(
         const projectDir = await initializeProjectDirectory(
           persistedSettings.defaultDirectory || ''
         )
+        let newDefaultDirectory: string | undefined = undefined
         if (projectDir !== persistedSettings.defaultDirectory) {
           localStorage.setItem(
             SETTINGS_PERSIST_KEY,
@@ -267,6 +238,7 @@ const router = createBrowserRouter(
               defaultDirectory: projectDir,
             })
           )
+          newDefaultDirectory = projectDir
         }
         const projectsNoMeta = (await readDir(projectDir)).filter(
           isProjectDirectory
@@ -282,6 +254,7 @@ const router = createBrowserRouter(
 
         return {
           projects,
+          newDefaultDirectory,
         }
       },
       children: [

src/Toolbar.tsx

@@ -5,6 +5,8 @@ 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 { kclManager } from 'lang/KclSingleton'
 
 export const Toolbar = () => {
   const platform = usePlatform()
@@ -13,14 +15,15 @@ export const Toolbar = () => {
   const toolbarButtonsRef = useRef<HTMLUListElement>(null)
   const bgClassName =
     'group-enabled:group-hover:bg-energy-10 group-pressed:bg-energy-10 dark:group-enabled:group-hover:bg-chalkboard-80 dark:group-pressed:bg-chalkboard-80'
-  const pathId = useMemo(
-    () =>
-      isCursorInSketchCommandRange(
-        engineCommandManager.artifactMap,
-        context.selectionRanges
-      ),
-    [engineCommandManager.artifactMap, context.selectionRanges]
-  )
+  const pathId = useMemo(() => {
+    if (!isSingleCursorInPipe(context.selectionRanges, kclManager.ast)) {
+      return false
+    }
+    return isCursorInSketchCommandRange(
+      engineCommandManager.artifactMap,
+      context.selectionRanges
+    )
+  }, [engineCommandManager.artifactMap, context.selectionRanges])
 
   function handleToolbarButtonsWheelEvent(ev: WheelEvent<HTMLSpanElement>) {
     const span = toolbarButtonsRef.current
@@ -50,7 +53,9 @@ export const Toolbar = () => {
           <li className="contents">
             <ActionButton
               Element="button"
-              onClick={() => send({ type: 'Enter sketch' })}
+              onClick={() =>
+                send({ type: 'Enter sketch', data: { forceNewSketch: true } })
+              }
               icon={{
                 icon: 'sketch',
                 bgClassName,
@@ -89,44 +94,48 @@ export const Toolbar = () => {
           </li>
         )}
         {state.matches('Sketch') && !state.matches('idle') && (
-          <li className="contents">
-            <ActionButton
-              Element="button"
-              onClick={() =>
-                state.matches('Sketch.Line Tool')
-                  ? send('CancelSketch')
-                  : send('Equip tool')
-              }
-              aria-pressed={state.matches('Sketch.Line Tool')}
-              className="pressed:bg-energy-10/20 dark:pressed:bg-energy-80"
-              icon={{
-                icon: 'line',
-                bgClassName,
-              }}
-            >
-              Line
-            </ActionButton>
-          </li>
-        )}
-        {state.matches('Sketch') && (
-          <li className="contents">
-            <ActionButton
-              Element="button"
-              onClick={() =>
-                state.matches('Sketch.Move Tool')
-                  ? send('CancelSketch')
-                  : send('Equip move tool')
-              }
-              aria-pressed={state.matches('Sketch.Move Tool')}
-              className="pressed:bg-energy-10/20 dark:pressed:bg-energy-80"
-              icon={{
-                icon: 'move',
-                bgClassName,
-              }}
-            >
-              Move
-            </ActionButton>
-          </li>
+          <>
+            <li className="contents" key="line-button">
+              <ActionButton
+                Element="button"
+                onClick={() =>
+                  state?.matches('Sketch.Line tool')
+                    ? send({ type: 'CancelSketch' })
+                    : send({ type: 'Equip Line tool' })
+                }
+                aria-pressed={state?.matches('Sketch.Line tool')}
+                className="pressed:bg-energy-10/20 dark:pressed:bg-energy-80"
+                icon={{
+                  icon: 'line',
+                  bgClassName,
+                }}
+              >
+                Line
+              </ActionButton>
+            </li>
+            <li className="contents" key="tangential-arc-button">
+              <ActionButton
+                Element="button"
+                onClick={() =>
+                  state.matches('Sketch.Tangential arc to')
+                    ? send({ type: 'CancelSketch' })
+                    : send({ type: 'Equip tangential arc to' })
+                }
+                aria-pressed={state.matches('Sketch.Tangential arc to')}
+                className="pressed:bg-energy-10/20 dark:pressed:bg-energy-80"
+                icon={{
+                  icon: 'line',
+                  bgClassName,
+                }}
+                disabled={
+                  !state.can({ type: 'Equip tangential arc to' }) &&
+                  !state.matches('Sketch.Tangential arc to')
+                }
+              >
+                Tangential Arc
+              </ActionButton>
+            </li>
+          </>
         )}
         {state.matches('Sketch.SketchIdle') &&
           state.nextEvents
@@ -151,7 +160,7 @@ export const Toolbar = () => {
               return 0
             })
             .map((eventName) => (
-              <li className="contents">
+              <li className="contents" key={eventName}>
                 <ActionButton
                   Element="button"
                   className="text-sm"
@@ -185,9 +194,9 @@ export const Toolbar = () => {
                   data: { name: 'Extrude', ownerMachine: 'modeling' },
                 })
               }
-              disabled={!state.can('Extrude')}
+              disabled={!state.can({ type: 'Extrude' })}
               title={
-                state.can('Extrude')
+                state.can({ type: 'Extrude' })
                   ? 'extrude'
                   : 'sketches need to be closed, or not already extruded'
               }

src/clientSideScene/ClientSideSceneComp.tsx

@@ -0,0 +1,252 @@
+import { useRef, useEffect, useState } from 'react'
+import { useModelingContext } from 'hooks/useModelingContext'
+
+import { cameraMouseDragGuards } from 'lib/cameraControls'
+import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
+import { useStore } from 'useStore'
+import {
+  DEBUG_SHOW_BOTH_SCENES,
+  ReactCameraProperties,
+  sceneInfra,
+} from './sceneInfra'
+import { throttle } from 'lib/utils'
+
+function useShouldHideScene(): { hideClient: boolean; hideServer: boolean } {
+  const [isCamMoving, setIsCamMoving] = useState(false)
+  const [isTween, setIsTween] = useState(false)
+
+  const { state } = useModelingContext()
+
+  useEffect(() => {
+    sceneInfra.setIsCamMovingCallback((isMoving, isTween) => {
+      setIsCamMoving(isMoving)
+      setIsTween(isTween)
+    })
+  }, [])
+
+  if (DEBUG_SHOW_BOTH_SCENES || !isCamMoving)
+    return { hideClient: false, hideServer: false }
+  let hideServer = state.matches('Sketch')
+  if (isTween) {
+    hideServer = false
+  }
+
+  return { hideClient: !hideServer, hideServer }
+}
+
+export const ClientSideScene = ({
+  cameraControls,
+}: {
+  cameraControls: ReturnType<
+    typeof useGlobalStateContext
+  >['settings']['context']['cameraControls']
+}) => {
+  const canvasRef = useRef<HTMLDivElement>(null)
+  const { state, send } = useModelingContext()
+  const { hideClient, hideServer } = useShouldHideScene()
+  const { setHighlightRange } = useStore((s) => ({
+    setHighlightRange: s.setHighlightRange,
+    highlightRange: s.highlightRange,
+  }))
+
+  // Listen for changes to the camera controls setting
+  // and update the client-side scene's controls accordingly.
+  useEffect(() => {
+    sceneInfra.setInteractionGuards(cameraMouseDragGuards[cameraControls])
+  }, [cameraControls])
+  useEffect(() => {
+    sceneInfra.updateOtherSelectionColors(
+      state?.context?.selectionRanges?.otherSelections || []
+    )
+  }, [state?.context?.selectionRanges?.otherSelections])
+
+  useEffect(() => {
+    if (!canvasRef.current) return
+    const canvas = canvasRef.current
+    canvas.appendChild(sceneInfra.renderer.domElement)
+    sceneInfra.animate()
+    sceneInfra.setHighlightCallback(setHighlightRange)
+    canvas.addEventListener('mousemove', sceneInfra.onMouseMove, false)
+    canvas.addEventListener('mousedown', sceneInfra.onMouseDown, false)
+    canvas.addEventListener('mouseup', sceneInfra.onMouseUp, false)
+    sceneInfra.setSend(send)
+    return () => {
+      canvas?.removeEventListener('mousemove', sceneInfra.onMouseMove)
+      canvas?.removeEventListener('mousedown', sceneInfra.onMouseDown)
+      canvas?.removeEventListener('mouseup', sceneInfra.onMouseUp)
+    }
+  }, [])
+
+  return (
+    <div
+      ref={canvasRef}
+      className={`absolute inset-0 h-full w-full transition-all duration-300 ${
+        hideClient ? 'opacity-0' : 'opacity-100'
+      } ${hideServer ? 'bg-black' : ''} ${
+        !hideClient && !hideServer && state.matches('Sketch')
+          ? 'bg-black/80'
+          : ''
+      }`}
+    ></div>
+  )
+}
+
+const throttled = throttle((a: ReactCameraProperties) => {
+  if (a.type === 'perspective' && a.fov) {
+    sceneInfra.dollyZoom(a.fov)
+  }
+}, 1000 / 15)
+
+export const CamDebugSettings = () => {
+  const [camSettings, setCamSettings] = useState<ReactCameraProperties>({
+    type: 'perspective',
+    fov: 12,
+    position: [0, 0, 0],
+    quaternion: [0, 0, 0, 1],
+  })
+  const [fov, setFov] = useState(12)
+
+  useEffect(() => {
+    sceneInfra.setReactCameraPropertiesCallback(setCamSettings)
+  }, [sceneInfra])
+  useEffect(() => {
+    if (camSettings.type === 'perspective' && camSettings.fov) {
+      setFov(camSettings.fov)
+    }
+  }, [(camSettings as any)?.fov])
+
+  return (
+    <div>
+      <h3>cam settings</h3>
+      perspective cam
+      <input
+        type="checkbox"
+        checked={camSettings.type === 'perspective'}
+        onChange={(e) => {
+          if (camSettings.type === 'perspective') {
+            sceneInfra.useOrthographicCamera()
+          } else {
+            sceneInfra.usePerspectiveCamera()
+          }
+        }}
+      />
+      {camSettings.type === 'perspective' && (
+        <input
+          type="range"
+          min="4"
+          max="90"
+          step={0.5}
+          value={fov}
+          onChange={(e) => {
+            setFov(parseFloat(e.target.value))
+
+            throttled({
+              ...camSettings,
+              fov: parseFloat(e.target.value),
+            })
+          }}
+          className="w-full cursor-pointer pointer-events-auto"
+        />
+      )}
+      {camSettings.type === 'perspective' && (
+        <div>
+          <span>fov</span>
+          <input
+            type="number"
+            value={camSettings.fov}
+            className="text-black w-16"
+            onChange={(e) => {
+              sceneInfra.setCam({
+                ...camSettings,
+                fov: parseFloat(e.target.value),
+              })
+            }}
+          />
+        </div>
+      )}
+      {camSettings.type === 'orthographic' && (
+        <>
+          <div>
+            <span>fov</span>
+            <input
+              type="number"
+              value={camSettings.zoom}
+              className="text-black w-16"
+              onChange={(e) => {
+                sceneInfra.setCam({
+                  ...camSettings,
+                  zoom: parseFloat(e.target.value),
+                })
+              }}
+            />
+          </div>
+        </>
+      )}
+      <div>
+        Position
+        <ul className="flex">
+          <li>
+            <span className="pl-2 pr-1">x:</span>
+            <input
+              type="number"
+              step={5}
+              data-testid="cam-x-position"
+              value={camSettings.position[0]}
+              className="text-black w-16"
+              onChange={(e) => {
+                sceneInfra.setCam({
+                  ...camSettings,
+                  position: [
+                    parseFloat(e.target.value),
+                    camSettings.position[1],
+                    camSettings.position[2],
+                  ],
+                })
+              }}
+            />
+          </li>
+          <li>
+            <span className="pl-2 pr-1">y:</span>
+            <input
+              type="number"
+              step={5}
+              data-testid="cam-y-position"
+              value={camSettings.position[1]}
+              className="text-black w-16"
+              onChange={(e) => {
+                sceneInfra.setCam({
+                  ...camSettings,
+                  position: [
+                    camSettings.position[0],
+                    parseFloat(e.target.value),
+                    camSettings.position[2],
+                  ],
+                })
+              }}
+            />
+          </li>
+          <li>
+            <span className="pl-2 pr-1">z:</span>
+            <input
+              type="number"
+              step={5}
+              data-testid="cam-z-position"
+              value={camSettings.position[2]}
+              className="text-black w-16"
+              onChange={(e) => {
+                sceneInfra.setCam({
+                  ...camSettings,
+                  position: [
+                    camSettings.position[0],
+                    camSettings.position[1],
+                    parseFloat(e.target.value),
+                  ],
+                })
+              }}
+            />
+          </li>
+        </ul>
+      </div>
+    </div>
+  )
+}

src/clientSideScene/helpers.ts

@@ -0,0 +1,33 @@
+import {
+  GridHelper,
+  LineBasicMaterial,
+  OrthographicCamera,
+  PerspectiveCamera,
+  Group,
+  Mesh,
+} from 'three'
+
+export function createGridHelper({
+  size,
+  divisions,
+}: {
+  size: number
+  divisions: number
+}) {
+  const gridHelperMaterial = new LineBasicMaterial({
+    color: 0xaaaaaa,
+    transparent: true,
+    opacity: 0.5,
+    depthTest: false,
+  })
+  const gridHelper = new GridHelper(size, divisions, 0x0000ff, 0xffffff)
+  gridHelper.material = gridHelperMaterial
+  gridHelper.rotation.x = Math.PI / 2
+  return gridHelper
+}
+
+export const orthoScale = (cam: OrthographicCamera | PerspectiveCamera) =>
+  0.55 / cam.zoom
+
+export const perspScale = (cam: PerspectiveCamera, group: Group | Mesh) =>
+  (group.position.distanceTo(cam.position) * cam.fov) / 4000

src/clientSideScene/sceneInfra.test.ts

@@ -0,0 +1,28 @@
+import { Quaternion } from 'three'
+import { isQuaternionVertical } from './sceneInfra'
+
+describe('isQuaternionVertical', () => {
+  it('should identify vertical quaternions', () => {
+    const verticalQuaternions = [
+      new Quaternion(1, 0, 0, 0).normalize(), // bottom
+      new Quaternion(-0.7, 0.7, 0, 0).normalize(), // bottom 2
+      new Quaternion(0, 1, 0, 0).normalize(), // bottom 3
+      new Quaternion(0, 0, 0, 1).normalize(), // look from top
+    ]
+    verticalQuaternions.forEach((quaternion) => {
+      expect(isQuaternionVertical(quaternion)).toBe(true)
+    })
+  })
+
+  it('should identify non-vertical quaternions', () => {
+    const nonVerticalQuaternions = [
+      new Quaternion(0.7, 0, 0, 0.7).normalize(), // front
+      new Quaternion(0, 0.7, 0.7, 0).normalize(), // back
+      new Quaternion(-0.5, 0.5, 0.5, -0.5).normalize(), // left side
+      new Quaternion(0.5, 0.5, 0.5, 0.5).normalize(), // right side
+    ]
+    nonVerticalQuaternions.forEach((quaternion) => {
+      expect(isQuaternionVertical(quaternion)).toBe(false)
+    })
+  })
+})

src/clientSideScene/segments.ts

@@ -0,0 +1,358 @@
+import { Coords2d } from 'lang/std/sketch'
+import {
+  BufferGeometry,
+  CatmullRomCurve3,
+  ConeGeometry,
+  CurvePath,
+  EllipseCurve,
+  ExtrudeGeometry,
+  Group,
+  LineCurve3,
+  Mesh,
+  MeshBasicMaterial,
+  NormalBufferAttributes,
+  Shape,
+  SphereGeometry,
+  Vector2,
+  Vector3,
+} from 'three'
+import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
+import { PathToNode, SketchGroup, getTangentialArcToInfo } from 'lang/wasm'
+import {
+  STRAIGHT_SEGMENT,
+  STRAIGHT_SEGMENT_BODY,
+  STRAIGHT_SEGMENT_DASH,
+  TANGENTIAL_ARC_TO_SEGMENT,
+  TANGENTIAL_ARC_TO_SEGMENT_BODY,
+  TANGENTIAL_ARC_TO__SEGMENT_DASH,
+} from './sceneEntities'
+import { getTangentPointFromPreviousArc } from 'lib/utils2d'
+import { ARROWHEAD } from './sceneInfra'
+
+export function straightSegment({
+  from,
+  to,
+  id,
+  pathToNode,
+  isDraftSegment,
+  scale = 1,
+}: {
+  from: Coords2d
+  to: Coords2d
+  id: string
+  pathToNode: PathToNode
+  isDraftSegment?: boolean
+  scale?: number
+}): Group {
+  const group = new Group()
+
+  const shape = new Shape()
+  shape.moveTo(0, -0.08 * scale)
+  shape.lineTo(0, 0.08 * scale) // The width of the line
+
+  let geometry
+  if (isDraftSegment) {
+    geometry = dashedStraight(from, to, shape, scale)
+  } else {
+    const line = new LineCurve3(
+      new Vector3(from[0], from[1], 0),
+      new Vector3(to[0], to[1], 0)
+    )
+
+    geometry = new ExtrudeGeometry(shape, {
+      steps: 2,
+      bevelEnabled: false,
+      extrudePath: line,
+    })
+  }
+
+  const body = new MeshBasicMaterial({ color: 0xffffff })
+  const mesh = new Mesh(geometry, body)
+  mesh.userData.type = isDraftSegment
+    ? STRAIGHT_SEGMENT_DASH
+    : STRAIGHT_SEGMENT_BODY
+  mesh.name = STRAIGHT_SEGMENT_BODY
+
+  group.userData = {
+    type: STRAIGHT_SEGMENT,
+    id,
+    from,
+    to,
+    pathToNode,
+    isSelected: false,
+  }
+
+  const arrowGroup = createArrowhead(scale)
+  arrowGroup.position.set(to[0], to[1], 0)
+  const dir = new Vector3()
+    .subVectors(new Vector3(to[0], to[1], 0), new Vector3(from[0], from[1], 0))
+    .normalize()
+  arrowGroup.quaternion.setFromUnitVectors(new Vector3(0, 1, 0), dir)
+
+  group.add(mesh, arrowGroup)
+
+  return group
+}
+
+function createArrowhead(scale = 1): Group {
+  const arrowMaterial = new MeshBasicMaterial({ color: 0xffffff })
+  const arrowheadMesh = new Mesh(new ConeGeometry(0.31, 1.5, 12), arrowMaterial)
+  arrowheadMesh.position.set(0, -0.6, 0)
+  const sphereMesh = new Mesh(new SphereGeometry(0.27, 12, 12), arrowMaterial)
+
+  const arrowGroup = new Group()
+  arrowGroup.userData.type = ARROWHEAD
+  arrowGroup.name = ARROWHEAD
+  arrowGroup.add(arrowheadMesh, sphereMesh)
+  arrowGroup.lookAt(new Vector3(0, 1, 0))
+  arrowGroup.scale.set(scale, scale, scale)
+  return arrowGroup
+}
+
+export function tangentialArcToSegment({
+  prevSegment,
+  from,
+  to,
+  id,
+  pathToNode,
+  isDraftSegment,
+  scale = 1,
+}: {
+  prevSegment: SketchGroup['value'][number]
+  from: Coords2d
+  to: Coords2d
+  id: string
+  pathToNode: PathToNode
+  isDraftSegment?: boolean
+  scale?: number
+}): Group {
+  const group = new Group()
+
+  const previousPoint =
+    prevSegment?.type === 'TangentialArcTo'
+      ? getTangentPointFromPreviousArc(
+          prevSegment.center,
+          prevSegment.ccw,
+          prevSegment.to
+        )
+      : prevSegment.from
+
+  const { center, radius, startAngle, endAngle, ccw } = getTangentialArcToInfo({
+    arcStartPoint: from,
+    arcEndPoint: to,
+    tanPreviousPoint: previousPoint,
+    obtuse: true,
+  })
+
+  const geometry = createArcGeometry({
+    center,
+    radius,
+    startAngle,
+    endAngle,
+    ccw,
+    isDashed: isDraftSegment,
+    scale,
+  })
+
+  const body = new MeshBasicMaterial({ color: 0xffffff })
+  const mesh = new Mesh(geometry, body)
+  mesh.userData.type = isDraftSegment
+    ? TANGENTIAL_ARC_TO__SEGMENT_DASH
+    : TANGENTIAL_ARC_TO_SEGMENT_BODY
+
+  group.userData = {
+    type: TANGENTIAL_ARC_TO_SEGMENT,
+    id,
+    from,
+    to,
+    prevSegment,
+    pathToNode,
+    isSelected: false,
+  }
+
+  const arrowGroup = createArrowhead(scale)
+  arrowGroup.position.set(to[0], to[1], 0)
+  const arrowheadAngle = endAngle + (Math.PI / 2) * (ccw ? 1 : -1)
+  arrowGroup.quaternion.setFromUnitVectors(
+    new Vector3(0, 1, 0),
+    new Vector3(Math.cos(arrowheadAngle), Math.sin(arrowheadAngle), 0)
+  )
+
+  group.add(mesh, arrowGroup)
+
+  return group
+}
+
+export function createArcGeometry({
+  center,
+  radius,
+  startAngle,
+  endAngle,
+  ccw,
+  isDashed = false,
+  scale = 1,
+}: {
+  center: Coords2d
+  radius: number
+  startAngle: number
+  endAngle: number
+  ccw: boolean
+  isDashed?: boolean
+  scale?: number
+}): BufferGeometry {
+  const dashSize = 1.2 * scale
+  const gapSize = 1.2 * scale
+  const arcStart = new EllipseCurve(
+    center[0],
+    center[1],
+    radius,
+    radius,
+    startAngle,
+    endAngle,
+    !ccw,
+    0
+  )
+  const arcEnd = new EllipseCurve(
+    center[0],
+    center[1],
+    radius,
+    radius,
+    endAngle,
+    startAngle,
+    ccw,
+    0
+  )
+  const shape = new Shape()
+  shape.moveTo(0, -0.08 * scale)
+  shape.lineTo(0, 0.08 * scale) // The width of the line
+
+  if (!isDashed) {
+    const points = arcStart.getPoints(50)
+    const path = new CurvePath<Vector3>()
+    path.add(new CatmullRomCurve3(points.map((p) => new Vector3(p.x, p.y, 0))))
+
+    return new ExtrudeGeometry(shape, {
+      steps: 100,
+      bevelEnabled: false,
+      extrudePath: path,
+    })
+  }
+
+  const length = arcStart.getLength()
+  const totalDashes = length / (dashSize + gapSize) // rounding makes the dashes jittery since the new dash is suddenly appears instead of growing into place
+  const dashesAtEachEnd = Math.min(100, totalDashes / 2) // Assuming we want 50 dashes total, 25 at each end
+
+  const dashGeometries = []
+
+  // Function to create a dash at a specific t value (0 to 1 along the curve)
+  const createDashAt = (t: number, curve: EllipseCurve) => {
+    const startVec = curve.getPoint(t)
+    const endVec = curve.getPoint(Math.min(0.5, t + dashSize / length))
+    const midVec = curve.getPoint(Math.min(0.5, t + dashSize / length / 2))
+    const dashCurve = new CurvePath<Vector3>()
+    dashCurve.add(
+      new CatmullRomCurve3([
+        new Vector3(startVec.x, startVec.y, 0),
+        new Vector3(midVec.x, midVec.y, 0),
+        new Vector3(endVec.x, endVec.y, 0),
+      ])
+    )
+    return new ExtrudeGeometry(shape, {
+      steps: 3,
+      bevelEnabled: false,
+      extrudePath: dashCurve,
+    })
+  }
+
+  // Create dashes at the start of the arc
+  for (let i = 0; i < dashesAtEachEnd; i++) {
+    const t = i / totalDashes
+    dashGeometries.push(createDashAt(t, arcStart))
+    dashGeometries.push(createDashAt(t, arcEnd))
+  }
+
+  // fill in the remaining arc
+  const remainingArcLength = length - dashesAtEachEnd * 2 * (dashSize + gapSize)
+  if (remainingArcLength > 0) {
+    const remainingArcStartT = dashesAtEachEnd / totalDashes
+    const remainingArcEndT = 1 - remainingArcStartT
+    const centerVec = new Vector2(center[0], center[1])
+    const remainingArcStartVec = arcStart.getPoint(remainingArcStartT)
+    const remainingArcEndVec = arcStart.getPoint(remainingArcEndT)
+    const remainingArcCurve = new EllipseCurve(
+      arcStart.aX,
+      arcStart.aY,
+      arcStart.xRadius,
+      arcStart.yRadius,
+      new Vector2().subVectors(centerVec, remainingArcStartVec).angle() +
+        Math.PI,
+      new Vector2().subVectors(centerVec, remainingArcEndVec).angle() + Math.PI,
+      !ccw
+    )
+    const remainingArcPoints = remainingArcCurve.getPoints(50)
+    const remainingArcPath = new CurvePath<Vector3>()
+    remainingArcPath.add(
+      new CatmullRomCurve3(
+        remainingArcPoints.map((p) => new Vector3(p.x, p.y, 0))
+      )
+    )
+    const remainingArcGeometry = new ExtrudeGeometry(shape, {
+      steps: 50,
+      bevelEnabled: false,
+      extrudePath: remainingArcPath,
+    })
+    dashGeometries.push(remainingArcGeometry)
+  }
+
+  const geo = dashGeometries.length
+    ? mergeGeometries(dashGeometries)
+    : new BufferGeometry()
+  geo.userData.type = 'dashed'
+  return geo
+}
+
+export function dashedStraight(
+  from: Coords2d,
+  to: Coords2d,
+  shape: Shape,
+  scale = 1
+): BufferGeometry<NormalBufferAttributes> {
+  const dashSize = 1.2 * scale
+  const gapSize = 1.2 * scale // todo: gabSize is not respected
+  const dashLine = new LineCurve3(
+    new Vector3(from[0], from[1], 0),
+    new Vector3(to[0], to[1], 0)
+  )
+  const length = dashLine.getLength()
+  const numberOfPoints = (length / (dashSize + gapSize)) * 2
+  const startOfLine = new Vector3(from[0], from[1], 0)
+  const endOfLine = new Vector3(to[0], to[1], 0)
+  const dashGeometries = []
+  const dashComponent = (xOrY: number, pointIndex: number) =>
+    ((to[xOrY] - from[xOrY]) / numberOfPoints) * pointIndex + from[xOrY]
+  for (let i = 0; i < numberOfPoints; i += 2) {
+    const dashStart = new Vector3(dashComponent(0, i), dashComponent(1, i), 0)
+    let dashEnd = new Vector3(
+      dashComponent(0, i + 1),
+      dashComponent(1, i + 1),
+      0
+    )
+    if (startOfLine.distanceTo(dashEnd) > startOfLine.distanceTo(endOfLine))
+      dashEnd = endOfLine
+
+    if (dashEnd) {
+      const dashCurve = new LineCurve3(dashStart, dashEnd)
+      const dashGeometry = new ExtrudeGeometry(shape, {
+        steps: 1,
+        bevelEnabled: false,
+        extrudePath: dashCurve,
+      })
+      dashGeometries.push(dashGeometry)
+    }
+  }
+  const geo = dashGeometries.length
+    ? mergeGeometries(dashGeometries)
+    : new BufferGeometry()
+  geo.userData.type = 'dashed'
+  return geo
+}

src/components/ActionButton.tsx

@@ -1,6 +1,6 @@
 import { ActionIcon, ActionIconProps } from './ActionIcon'
 import React from 'react'
-import { paths } from '../Router'
+import { paths } from 'lib/paths'
 import { Link } from 'react-router-dom'
 import type { LinkProps } from 'react-router-dom'
 

src/components/AppHeader.tsx

@@ -1,6 +1,6 @@
 import { Toolbar } from '../Toolbar'
 import UserSidebarMenu from './UserSidebarMenu'
-import { IndexLoaderData } from '../Router'
+import { type IndexLoaderData } from 'lib/types'
 import ProjectSidebarMenu from './ProjectSidebarMenu'
 import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
 import styles from './AppHeader.module.css'

src/components/AstExplorer.tsx

@@ -1,5 +1,5 @@
 import { useModelingContext } from 'hooks/useModelingContext'
-import { kclManager } from 'lang/KclSinglton'
+import { kclManager } from 'lang/KclSingleton'
 import { getNodeFromPath, getNodePathFromSourceRange } from 'lang/queryAst'
 import { useEffect, useRef, useState } from 'react'
 import { useStore } from 'useStore'

src/components/AvailableVarsHelpers.tsx

@@ -8,7 +8,7 @@ import {
 } from '../lang/modifyAst'
 import { findAllPreviousVariables, PrevVariable } from '../lang/queryAst'
 import { engineCommandManager } from '../lang/std/engineConnection'
-import { kclManager, useKclContext } from 'lang/KclSinglton'
+import { kclManager, useKclContext } from 'lang/KclSingleton'
 import { useModelingContext } from 'hooks/useModelingContext'
 import { executeAst } from 'useStore'
 
@@ -148,7 +148,6 @@ export function useCalc({
       executeAst({
         ast,
         engineCommandManager,
-        defaultPlanes: kclManager.defaultPlanes,
         useFakeExecutor: true,
         programMemoryOverride: JSON.parse(
           JSON.stringify(kclManager.programMemory)

src/components/CamToggle.tsx

@@ -0,0 +1,75 @@
+import { useState, useEffect } from 'react'
+import { sceneInfra } from '../clientSideScene/sceneInfra'
+import { engineCommandManager } from 'lang/std/engineConnection'
+import { throttle, isReducedMotion } from 'lib/utils'
+
+const updateDollyZoom = throttle(
+  (newFov: number) => sceneInfra.dollyZoom(newFov),
+  1000 / 15
+)
+
+export const CamToggle = () => {
+  const [isPerspective, setIsPerspective] = useState(true)
+  const [fov, setFov] = useState(40)
+  const [enableRotate, setEnableRotate] = useState(true)
+
+  useEffect(() => {
+    engineCommandManager.waitForReady.then(async () => {
+      sceneInfra.dollyZoom(fov)
+    })
+  }, [])
+
+  const toggleCamera = () => {
+    if (isPerspective) {
+      isReducedMotion()
+        ? sceneInfra.useOrthographicCamera()
+        : sceneInfra.animateToOrthographic()
+    } else {
+      isReducedMotion()
+        ? sceneInfra.usePerspectiveCamera()
+        : sceneInfra.animateToPerspective()
+    }
+    setIsPerspective(!isPerspective)
+  }
+
+  const handleFovChange = (newFov: number) => {
+    setFov(newFov)
+    updateDollyZoom(newFov)
+  }
+
+  return (
+    <div className="absolute right-14 bottom-3">
+      {isPerspective && (
+        <div className="">
+          <input
+            type="range"
+            min="4"
+            max="90"
+            step={0.5}
+            value={fov}
+            onChange={(e) => handleFovChange(Number(e.target.value))}
+            className="w-full cursor-pointer pointer-events-auto"
+          />
+        </div>
+      )}
+      <button onClick={toggleCamera} className="">
+        {isPerspective
+          ? 'Switch to Orthographic Camera'
+          : 'Switch to Perspective Camera'}
+      </button>
+      <button
+        onClick={() => {
+          if (enableRotate) {
+            sceneInfra.controls.enableRotate = false
+          } else {
+            sceneInfra.controls.enableRotate = true
+          }
+          setEnableRotate(!enableRotate)
+        }}
+        className=""
+      >
+        {enableRotate ? 'Disable Rotation' : 'Enable Rotation'}
+      </button>
+    </div>
+  )
+}

src/components/CodeMenu.tsx

@@ -9,7 +9,7 @@ import styles from './CodeMenu.module.css'
 import { useConvertToVariable } from 'hooks/useToolbarGuards'
 import { editorShortcutMeta } from './TextEditor'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { kclManager } from 'lang/KclSinglton'
+import { kclManager } from 'lang/KclSingleton'
 
 export const CodeMenu = ({ children }: PropsWithChildren) => {
   const { enable: convertToVarEnabled, handleClick: handleConvertToVarClick } =
@@ -77,6 +77,24 @@ export const CodeMenu = ({ children }: PropsWithChildren) => {
               </small>
             </a>
           </Menu.Item>
+          <Menu.Item>
+            <a
+              className={styles.button}
+              href="https://github.com/KittyCAD/kcl-samples"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span>KCL samples</span>
+              <small>
+                On GitHub
+                <FontAwesomeIcon
+                  icon={faArrowUpRightFromSquare}
+                  className="ml-1 align-text-top"
+                  width={12}
+                />
+              </small>
+            </a>
+          </Menu.Item>
         </Menu.Items>
       </div>
     </Menu>

src/components/CommandBar/CommandBar.tsx

@@ -26,22 +26,24 @@ export const CommandBarProvider = ({
   children: React.ReactNode
 }) => {
   const { pathname } = useLocation()
-  const [commandBarState, commandBarSend] = useMachine(commandBarMachine, {
-    guards: {
-      'Arguments are ready': (context, _) => {
-        return context.selectedCommand?.args
-          ? context.argumentsToSubmit.length ===
-              Object.keys(context.selectedCommand.args)?.length
-          : false
+  const [commandBarState, commandBarSend] = useMachine(
+    commandBarMachine.provide({
+      guards: {
+        'Arguments are ready': ({ context }) => {
+          return context.selectedCommand?.args
+            ? context.argumentsToSubmit.length ===
+                Object.keys(context.selectedCommand.args)?.length
+            : false
+        },
+        'Command has no arguments': ({ context }) => {
+          return (
+            !context.selectedCommand?.args ||
+            Object.keys(context.selectedCommand?.args).length === 0
+          )
+        },
       },
-      'Command has no arguments': (context, _event) => {
-        return (
-          !context.selectedCommand?.args ||
-          Object.keys(context.selectedCommand?.args).length === 0
-        )
-      },
-    },
-  })
+    })
+  )
 
   // Close the command bar when navigating
   useEffect(() => {

src/components/CommandBar/CommandBarHeader.tsx

@@ -1,6 +1,6 @@
 import { useCommandsContext } from 'hooks/useCommandsContext'
 import { CustomIcon } from '../CustomIcon'
-import React, { useState } from 'react'
+import React, { ReactNode, useState } from 'react'
 import { ActionButton } from '../ActionButton'
 import { Selections, getSelectionTypeDisplayText } from 'lib/selections'
 import { useHotkeys } from 'react-hotkeys-hook'
@@ -99,15 +99,7 @@ function CommandBarHeader({ children }: React.PropsWithChildren<{}>) {
                     ) : typeof argumentsToSubmit[argName] === 'object' ? (
                       JSON.stringify(argumentsToSubmit[argName])
                     ) : (
-                      argumentsToSubmit[argName]
-                    )
-                  ) : arg.payload ? (
-                    arg.inputType === 'selection' ? (
-                      getSelectionTypeDisplayText(arg.payload as Selections)
-                    ) : typeof arg.payload === 'object' ? (
-                      JSON.stringify(arg.payload)
-                    ) : (
-                      arg.payload
+                      <em>{argumentsToSubmit[argName] as ReactNode}</em>
                     )
                   ) : (
                     <em>{argName}</em>

src/components/CommandBar/CommandBarSelectionInput.tsx

@@ -1,6 +1,6 @@
 import { useSelector } from '@xstate/react'
 import { useCommandsContext } from 'hooks/useCommandsContext'
-import { useKclContext } from 'lang/KclSinglton'
+import { useKclContext } from 'lang/KclSingleton'
 import { CommandArgument } from 'lib/commandTypes'
 import {
   ResolvedSelectionType,
@@ -27,7 +27,7 @@ function CommandBarSelectionInput({
 }) {
   const { code } = useKclContext()
   const inputRef = useRef<HTMLInputElement>(null)
-  const { commandBarSend } = useCommandsContext()
+  const { commandBarState, commandBarSend } = useCommandsContext()
   const [hasSubmitted, setHasSubmitted] = useState(false)
   const selection = useSelector(arg.actor, selectionSelector)
   const [selectionsByType, setSelectionsByType] = useState<
@@ -59,8 +59,16 @@ function CommandBarSelectionInput({
     )
   }, [selection])
 
+  // Fast-forward through this arg if it's marked as skippable
+  // and we have a valid selection already
   useEffect(() => {
     setCanSubmitSelection(canSubmitSelectionArg(selectionsByType, arg))
+    const argValue = commandBarState.context.argumentsToSubmit[arg.name]
+    if (canSubmitSelection && arg.skip && argValue === undefined) {
+      handleSubmit({
+        preventDefault: () => {},
+      } as React.FormEvent<HTMLFormElement>)
+    }
   }, [selectionsByType, arg])
 
   function handleChange() {

src/components/CommandComboBox.tsx

@@ -48,6 +48,7 @@ function CommandComboBox({
               (event.metaKey && event.key === 'k') ||
               (event.key === 'Backspace' && !event.currentTarget.value)
             ) {
+              event.preventDefault()
               commandBarSend({ type: 'Close' })
             }
           }}

src/components/CustomIcon.tsx

@@ -4,6 +4,8 @@ export type CustomIconName =
   | 'arrowRight'
   | 'arrowUp'
   | 'checkmark'
+  | 'clipboardPlus'
+  | 'clipboardCheckmark'
   | 'close'
   | 'equal'
   | 'extrude'
@@ -13,8 +15,11 @@ export type CustomIconName =
   | 'folderPlus'
   | 'gear'
   | 'horizontal'
+  | 'horizontalDash'
   | 'line'
   | 'move'
+  | 'network'
+  | 'networkCrossedOut'
   | 'parallel'
   | 'search'
   | 'sketch'
@@ -107,6 +112,38 @@ export const CustomIcon = ({
           />
         </svg>
       )
+    case 'clipboardCheckmark':
+      return (
+        <svg
+          {...props}
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6.5 3H7L13 3L13.5 3V3.5V4.00001L15.5 4.00002L16 4.00002V4.50002V10.0351C15.6905 9.85609 15.3548 9.71733 15 9.62602V5.00002L13.5 5.00001V6.50001V7.00001L13 7.00001L7 7.00001L6.5 7.00001V6.50001V5.00001L5 5.00001V16H10.8773C11.2024 16.4055 11.6047 16.7463 12.062 17H4.5H4V16.5V4.50001V4.00001L4.5 4.00001L6.5 4.00001V3.5V3ZM15.938 17C15.9588 16.9885 15.9794 16.9768 16 16.9649V17H15.938ZM7.5 4V4.50001V6.00001L12.5 6.00001V4.50001V4L7.5 4ZM13 9H7V8H13V9ZM15.6855 11.5L13.2101 14.8005L12.2071 13.7975L11.5 14.5046L12.9107 15.9153L13.6642 15.8617L16.4855 12.1L15.6855 11.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      )
+    case 'clipboardPlus':
+      return (
+        <svg
+          {...props}
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6.5 3H7L13 3L13.5 3V3.5V4.00001L15.5 4.00002L16 4.00002V4.50002V10.0351C15.6905 9.85609 15.3548 9.71733 15 9.62602V5.00002L13.5 5.00001V6.50001V7.00001L13 7.00001L7 7.00001L6.5 7.00001V6.50001V5.00001L5 5.00001V16H10.8773C11.2024 16.4055 11.6047 16.7463 12.062 17H4.5H4V16.5V4.50001V4.00001L4.5 4.00001L6.5 4.00001V3.5V3ZM15.938 17C15.9588 16.9885 15.9794 16.9768 16 16.9649V17H15.938ZM7.5 4V4.50001V6.00001L12.5 6.00001V4.50001V4L7.5 4ZM13 9H7V8H13V9ZM13.5 11V13H11.5V14H13.5V16H14.5V14H16.5V13H14.5V11H13.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      )
     case 'close':
       return (
         <svg
@@ -249,6 +286,22 @@ export const CustomIcon = ({
           />
         </svg>
       )
+    case 'horizontalDash':
+      return (
+        <svg
+          {...props}
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M14 10.5H6V9.5H14V10.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      )
     case 'line':
       return (
         <svg
@@ -281,6 +334,38 @@ export const CustomIcon = ({
           />
         </svg>
       )
+    case 'network':
+      return (
+        <svg
+          {...props}
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M18 9.64741C17.1925 8.24871 16.0344 7.08457 14.6399 6.26971C13.2455 5.45486 11.6628 5.01742 10.0478 5.00051C8.4328 4.9836 6.84127 5.38779 5.43006 6.17326C4.01884 6.95873 2.83666 8.09837 2 9.47985L2.76881 9.94546C3.52456 8.69756 4.59243 7.66813 5.86718 6.95862C7.14193 6.2491 8.57955 5.88399 10.0384 5.89927C11.4972 5.91455 12.9269 6.30968 14.1865 7.04574C15.4461 7.7818 16.4922 8.83337 17.2216 10.0968L18 9.64741ZM15.2155 11.0953C14.6772 10.1628 13.9051 9.3867 12.9755 8.84347C12.0459 8.30023 10.9907 8.00861 9.91406 7.99733C8.8374 7.98606 7.77638 8.25552 6.83557 8.77917C5.89476 9.30281 5.10664 10.0626 4.54887 10.9836L5.34391 11.4651C5.81802 10.6822 6.48792 10.0364 7.28761 9.59132C8.0873 9.14622 8.98916 8.91718 9.90432 8.92676C10.8195 8.93635 11.7164 9.18423 12.5065 9.64598C13.2967 10.1077 13.953 10.7674 14.4106 11.56L15.2155 11.0953ZM10 14C10.8284 14 11.5 13.3284 11.5 12.5C11.5 11.6716 10.8284 11 10 11C9.17157 11 8.5 11.6716 8.5 12.5C8.5 13.3284 9.17157 14 10 14Z"
+            fill="currentColor"
+          />
+        </svg>
+      )
+    case 'networkCrossedOut':
+      return (
+        <svg
+          {...props}
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M4.35352 5.39647L14.253 15.296L14.9601 14.5889L5.06062 4.68936L4.35352 5.39647ZM12.5065 9.64599C11.9609 9.32713 11.3643 9.11025 10.746 9.00341L9.74058 7.99796C9.79835 7.99694 9.85618 7.99674 9.91406 7.99735C10.9907 8.00862 12.0459 8.30025 12.9755 8.84348C13.9051 9.38672 14.6772 10.1628 15.2155 11.0953L14.4106 11.56C13.953 10.7674 13.2967 10.1077 12.5065 9.64599ZM6.48788 8.98789L7.16295 9.66297C6.41824 10.1045 5.79317 10.7233 5.34391 11.4651L4.54887 10.9836C5.03646 10.1785 5.70009 9.49656 6.48788 8.98789ZM10.0384 5.89928C9.3134 5.89169 8.59366 5.97804 7.89655 6.15392L7.16867 5.42605C8.09637 5.13507 9.06776 4.99026 10.0478 5.00052C11.6628 5.01744 13.2455 5.45488 14.6399 6.26973C16.0344 7.08458 17.1925 8.24872 18 9.64742L17.2216 10.0968C16.4922 8.83338 15.4461 7.78181 14.1865 7.04575C12.9269 6.3097 11.4972 5.91456 10.0384 5.89928ZM5.00782 7.50783L4.36522 6.86524C3.42033 7.57557 2.61639 8.46208 2 9.47986L2.76881 9.94547C3.34775 8.98952 4.10986 8.16177 5.00782 7.50783ZM10 14C10.4142 14 10.7892 13.8321 11.0607 13.5607L8.93934 11.4394C8.66789 11.7108 8.5 12.0858 8.5 12.5C8.5 13.3284 9.17157 14 10 14Z"
+            fill="currentColor"
+          />
+        </svg>
+      )
     case 'parallel':
       return (
         <svg

src/components/DebugPanel.tsx

@@ -1,6 +1,7 @@
 import { CollapsiblePanel, CollapsiblePanelProps } from './CollapsiblePanel'
 import { AstExplorer } from './AstExplorer'
 import { EngineCommands } from './EngineCommands'
+import { CamDebugSettings } from 'clientSideScene/ClientSideSceneComp'
 
 export const DebugPanel = ({ className, ...props }: CollapsiblePanelProps) => {
   return (
@@ -15,6 +16,7 @@ export const DebugPanel = ({ className, ...props }: CollapsiblePanelProps) => {
     >
       <section className="p-4 flex flex-col gap-4">
         <EngineCommands />
+        <CamDebugSettings />
         <div style={{ height: '400px' }} className="overflow-y-auto">
           <AstExplorer />
         </div>

src/components/DownloadAppBanner.tsx

@@ -19,7 +19,7 @@ const DownloadAppBanner = () => {
         <div className="max-w-3xl mx-auto">
           <div className="flex gap-2 justify-between items-start">
             <h2 className="text-xl font-bold mb-4">
-              Zoo Modeling App is better as a desktop app!
+              Modeling App is better as a desktop app!
             </h2>
             <ActionButton
               Element="button"