Bump to v0.6.0 (#442)

* Path Error on Linux builds
Fixes #438

* Add fallback to homeDir

.env.development

@@ -1,3 +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_SKIP_AUTH=false
+VITE_KC_CONNECTION_TIMEOUT_MS=5000
+VITE_KC_SENTRY_DSN=

.env.production

@@ -1,3 +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_SKIP_AUTH=false
+VITE_KC_CONNECTION_TIMEOUT_MS=15000
+VITE_KC_SENTRY_DSN=https://a814f2f66734989a90367f48feee28ca@o1042111.ingest.sentry.io/4505789425844224

.eslintignore

@@ -0,0 +1 @@
+src/wasm-lib/*

.github/workflows/cargo-build.yml

@@ -22,7 +22,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        dir: ['src/wasm-lib', 'src-tauri']
+        dir: ['src/wasm-lib']
     steps:
       - uses: actions/checkout@v3
 

.github/workflows/cargo-clippy.yml

@@ -22,7 +22,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        dir: ['src/wasm-lib', 'src-tauri']
+        dir: ['src/wasm-lib']
     steps:
       - uses: actions/checkout@v3
       - name: Install latest rust
@@ -40,6 +40,17 @@ 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

@@ -24,7 +24,7 @@ jobs:
     runs-on: ubuntu-latest-8-cores
     strategy:
       matrix:
-        dir: ['src/wasm-lib', 'src-tauri']
+        dir: ['src/wasm-lib']
     steps:
       - uses: actions/checkout@v3
       - name: Install latest rust
@@ -41,8 +41,21 @@ 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: |-
           cd "${{ matrix.dir }}"
-          cargo llvm-cov nextest --lcov --output-path lcov.info --test-threads=1 --no-fail-fast
+          cargo test --all
+        env:
+          KITTYCAD_API_TOKEN: ${{secrets.KITTYCAD_API_TOKEN}}
+

.github/workflows/ci.yml

@@ -13,17 +13,31 @@ jobs:
   check-format:
     runs-on: 'ubuntu-20.04'
     steps:
-
       - uses: actions/checkout@v3
-
       - uses: actions/setup-node@v3
         with:
           node-version-file: '.nvmrc'
-
+          cache: 'yarn'
       - run: yarn install
-
       - run: yarn fmt-check
 
+  check-types:
+    runs-on: ubuntu-20.04
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+      - run: yarn install
+      - uses: Swatinem/rust-cache@v2
+        with:
+          workspaces: "./src/wasm-lib"
+
+      - run: yarn build:wasm
+      - run: yarn tsc
+
 
   build-test-web:
     runs-on: ubuntu-20.04
@@ -36,12 +50,15 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version-file: '.nvmrc'
+          cache: 'yarn'
 
       - run: yarn install
 
-      - run: yarn build:wasm
+      - uses: Swatinem/rust-cache@v2
+        with:
+          workspaces: "./src/wasm-lib"
 
-      - run: yarn tsc
+      - run: yarn build:wasm
 
       - run: yarn simpleserver:ci
 
@@ -49,14 +66,12 @@ jobs:
 
       - run: yarn test:cov
 
-      - run: yarn test:rust
-      
       - id: export_version
         run: echo "version=`cat package.json | jq -r '.version'`" >> "$GITHUB_OUTPUT"
 
 
   build-apps:
-    needs: [check-format, build-test-web]
+    needs: [check-format, build-test-web, check-types]
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
@@ -87,6 +102,10 @@ jobs:
         with:
           workspaces: './src-tauri -> target'
 
+      - uses: Swatinem/rust-cache@v2
+        with:
+          workspaces: "./src/wasm-lib"
+
       - name: wasm prep
         shell: bash
         run: |
@@ -110,15 +129,22 @@ jobs:
       - name: Fix format
         run: yarn fmt
 
+      - name: install apple silicon target mac
+        if: matrix.os == 'macos-latest'
+        run: |
+          rustup target add aarch64-apple-darwin
+
       - name: Build the app for the current platform (no upload)
         uses: tauri-apps/tauri-action@v0
         env:
           TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
           TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+        with:
+          args: ${{ matrix.os == 'macos-latest' && '--target universal-apple-darwin' || '' }}
 
       - uses: actions/upload-artifact@v3
         with:
-          path: src-tauri/target/release/bundle/*/*
+          path: ${{ matrix.os == 'macos-latest' && 'src-tauri/target/universal-apple-darwin/release/bundle/*/*' || 'src-tauri/target/release/bundle/*/*' }}
 
 
   publish-apps-release:
@@ -133,8 +159,7 @@ jobs:
 
       - name: Generate the update static endpoint
         run: |
-          ls -l artifact
-          ls -l artifact/*
+          ls -l artifact/*/*itty*
           DARWIN_SIG=`cat artifact/macos/*.app.tar.gz.sig`
           LINUX_SIG=`cat artifact/appimage/*.AppImage.tar.gz.sig`
           WINDOWS_SIG=`cat artifact/nsis/*.nsis.zip.sig`
@@ -142,11 +167,11 @@ jobs:
           jq --null-input \
             --arg version "v${VERSION_NO_V}" \
             --arg darwin_sig "$DARWIN_SIG" \
-            --arg darwin_url "$RELEASE_DIR/macos/kittycad-modeling-app.app.tar.gz" \
+            --arg darwin_url "$RELEASE_DIR/macos/KittyCAD%20Modeling.app.tar.gz" \
             --arg linux_sig "$LINUX_SIG" \
-            --arg linux_url "$RELEASE_DIR/appimage/kittycad-modeling-app_${VERSION_NO_V}_amd64.AppImage.tar.gz" \
+            --arg linux_url "$RELEASE_DIR/appimage/kittycad-modeling_${VERSION_NO_V}_amd64.AppImage.tar.gz" \
             --arg windows_sig "$WINDOWS_SIG" \
-            --arg windows_url "$RELEASE_DIR/nsis/kittycad-modeling-app_${VERSION_NO_V}_x64-setup.nsis.zip" \
+            --arg windows_url "$RELEASE_DIR/nsis/KittyCAD%20Modeling_${VERSION_NO_V}_x64-setup.nsis.zip" \
             '{
               "version": $version,
               "platforms": {
@@ -154,6 +179,10 @@ jobs:
                   "signature": $darwin_sig,
                   "url": $darwin_url
                 },
+                "darwin-aarch64": {
+                  "signature": $darwin_sig,
+                  "url": $darwin_url
+                },
                 "linux-x86_64": {
                   "signature": $linux_sig,
                   "url": $linux_url
@@ -180,7 +209,7 @@ jobs:
         uses: google-github-actions/upload-cloud-storage@v1.0.3
         with:
           path: artifact
-          glob: '*/kittycad-modeling-app*'
+          glob: '*/*itty*'
           parent: false
           destination: dl.kittycad.io/releases/modeling-app/v${{ env.VERSION_NO_V }}
 
@@ -189,3 +218,8 @@ jobs:
         with:
           path: last_update.json
           destination: dl.kittycad.io/releases/modeling-app
+
+      - name: Upload release files to Github
+        uses: softprops/action-gh-release@v1
+        with:
+          files: artifact/*/*itty*

.gitignore

@@ -25,5 +25,6 @@ yarn-error.log*
 # rust
 src/wasm-lib/target
 src/wasm-lib/bindings
+src/wasm-lib/kcl/bindings
 public/wasm_lib_bg.wasm
 src/wasm-lib/lcov.info

.prettierignore

@@ -5,3 +5,5 @@ coverage
 # Ignore Rust projects:
 *.rs
 target
+src/wasm-lib/pkg
+src/wasm-lib/kcl/bindings

README.md

@@ -86,3 +86,24 @@ The PR may serve as a place to discuss the human-readable changelog and extra QA
 3. Create a new release and tag pointing to the bump version commit using semantic versioning `v{x}.{y}.{z}`
 
 4. A new Action kicks in at https://github.com/KittyCAD/modeling-app/actions, uploading artifacts to the release
+
+## Fuzzing the parser
+
+Make sure you install cargo fuzz:
+
+```bash
+$ cargo install cargo-fuzz
+```
+
+```bash
+$ cd src/wasm-lib/kcl
+
+# list the fuzz targets
+$ cargo fuzz list
+
+# run the parser fuzzer
+$ cargo +nightly fuzz run parser
+```
+
+For more information on fuzzing you can check out 
+[this guide](https://rust-fuzz.github.io/book/cargo-fuzz.html).

index.html

@@ -11,6 +11,7 @@
     />
     <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>KittyCAD Modeling App</title>
   </head>
   <body class="body-bg">

package.json

@@ -1,28 +1,35 @@
 {
   "name": "untitled-app",
-  "version": "0.0.4",
+  "version": "0.6.0",
   "private": true,
   "dependencies": {
+    "@codemirror/autocomplete": "^6.9.0",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.13",
-    "@kittycad/lib": "^0.0.29",
+    "@headlessui/tailwindcss": "^0.2.0",
+    "@kittycad/lib": "^0.0.37",
+    "@lezer/javascript": "^1.4.7",
+    "@open-rpc/client-js": "^1.8.1",
     "@react-hook/resize-observer": "^1.2.6",
+    "@sentry/react": "^7.65.0",
     "@tauri-apps/api": "^1.3.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "@ts-stack/markdown": "^1.5.0",
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@uiw/codemirror-extensions-langs": "^4.21.9",
-    "@uiw/react-codemirror": "^4.15.1",
+    "@uiw/react-codemirror": "^4.21.13",
     "@xstate/react": "^3.2.2",
     "crypto-js": "^4.1.1",
     "formik": "^2.4.3",
+    "fuse.js": "^6.6.2",
     "http-server": "^14.1.1",
+    "json-rpc-2.0": "^1.6.0",
     "re-resizable": "^6.9.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -40,6 +47,8 @@
     "typescript": "^4.4.2",
     "uuid": "^9.0.0",
     "vitest": "^0.34.1",
+    "vscode-jsonrpc": "^8.1.0",
+    "vscode-languageserver-protocol": "^3.17.3",
     "wasm-pack": "^0.12.1",
     "web-vitals": "^2.1.0",
     "ws": "^8.13.0",
@@ -54,15 +63,15 @@
     "build:both:local": "yarn build:wasm && vite build",
     "test": "vitest --mode development",
     "test:nowatch": "vitest run --mode development",
-    "test:rust": "(cd src/wasm-lib && cargo test && cargo clippy)",
+    "test:rust": "(cd src/wasm-lib && cargo test --all && cargo clippy --all --tests)",
     "test:cov": "vitest run --coverage --mode development",
     "simpleserver:ci": "http-server ./public --cors -p 3000 &",
     "simpleserver": "http-server ./public --cors -p 3000",
     "fmt": "prettier --write ./src",
     "fmt-check": "prettier --check ./src",
-    "build:wasm": "yarn wasm-prep && (cd src/wasm-lib && wasm-pack build --target web --out-dir pkg && cargo test --all) && cp src/wasm-lib/pkg/wasm_lib_bg.wasm public && yarn fmt && yarn remove-importmeta",
-    "remove-importmeta": "sed -i 's/import.meta.url//g' \"./src/wasm-lib/pkg/wasm_lib.js\"; sed -i '' 's/import.meta.url//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/bindings",
+    "build:wasm": "yarn wasm-prep && (cd src/wasm-lib && wasm-pack build --target web --out-dir pkg && cargo test -p kcl-lib export_bindings) && cp src/wasm-lib/pkg/wasm_lib_bg.wasm public && yarn fmt && yarn remove-importmeta",
+    "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"
   },
@@ -89,6 +98,7 @@
     "@babel/preset-env": "^7.22.9",
     "@tauri-apps/cli": "^1.3.1",
     "@types/crypto-js": "^4.1.1",
+    "@types/debounce": "^1.2.1",
     "@types/isomorphic-fetch": "^0.0.36",
     "@types/react-modal": "^3.16.0",
     "@types/uuid": "^9.0.1",

src-tauri/Cargo.lock

@@ -648,6 +648,12 @@ dependencies = [
  "cfg-if",
 ]
 
+[[package]]
+name = "equivalent"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5443807d6dff69373d433ab9ef5378ad8df50ca6298caf15de6e52e24aaf54d5"
+
 [[package]]
 name = "errno"
 version = "0.3.1"
@@ -1150,7 +1156,7 @@ dependencies = [
  "futures-sink",
  "futures-util",
  "http",
- "indexmap",
+ "indexmap 1.9.3",
  "slab",
  "tokio",
  "tokio-util",
@@ -1163,6 +1169,12 @@ version = "0.12.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8a9ee70c43aaf417c914396645a0fa852624801b24ebb7ae78fe8272889ac888"
 
+[[package]]
+name = "hashbrown"
+version = "0.14.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2c6201b9ff9fd90a5a3bac2e56a830d0caa509576f0e503818ee82c181b3437a"
+
 [[package]]
 name = "heck"
 version = "0.3.3"
@@ -1378,7 +1390,18 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bd070e393353796e801d209ad339e89596eb4c8d430d18ede6a1cced8fafbd99"
 dependencies = [
  "autocfg",
- "hashbrown",
+ "hashbrown 0.12.3",
+ "serde",
+]
+
+[[package]]
+name = "indexmap"
+version = "2.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d5477fe2230a79769d8dc68e0eabf5437907c0457a5614a9e8dddb67f65eb65d"
+dependencies = [
+ "equivalent",
+ "hashbrown 0.14.0",
  "serde",
 ]
 
@@ -1628,6 +1651,12 @@ version = "0.3.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6877bb514081ee2a7ff5ef9de3281f14a4dd4bceac4c09388074a6b5df8a139a"
 
+[[package]]
+name = "minisign-verify"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "933dca44d65cdd53b355d0b73d380a2ff5da71f87f036053188bf1eab6a19881"
+
 [[package]]
 name = "miniz_oxide"
 version = "0.6.2"
@@ -2122,7 +2151,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9bd9647b268a3d3e14ff09c23201133a62589c658db02bb7388c7246aafe0590"
 dependencies = [
  "base64 0.21.2",
- "indexmap",
+ "indexmap 1.9.3",
  "line-wrap",
  "quick-xml",
  "serde",
@@ -2695,14 +2724,15 @@ dependencies = [
 
 [[package]]
 name = "serde_with"
-version = "2.3.3"
+version = "3.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "07ff71d2c147a7b57362cead5e22f772cd52f6ab31cfcd9edcd7f6aeb2a0afbe"
+checksum = "1402f54f9a3b9e2efe71c1cea24e648acce55887983553eeb858cf3115acfd49"
 dependencies = [
- "base64 0.13.1",
+ "base64 0.21.2",
  "chrono",
  "hex",
- "indexmap",
+ "indexmap 1.9.3",
+ "indexmap 2.0.0",
  "serde",
  "serde_json",
  "serde_with_macros",
@@ -2711,9 +2741,9 @@ dependencies = [
 
 [[package]]
 name = "serde_with_macros"
-version = "2.3.3"
+version = "3.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "881b6f881b17d13214e5d494c939ebab463d01264ce1811e9d4ac3a882e7695f"
+checksum = "9197f1ad0e3c173a0222d3c4404fb04c3afe87e962bcb327af73e8301fa203c7"
 dependencies = [
  "darling",
  "proc-macro2",
@@ -3022,6 +3052,7 @@ checksum = "d42ba3a2e8556722f31336a0750c10dbb6a81396a1c452977f515da83f69f842"
 dependencies = [
  "anyhow",
  "attohttpc",
+ "base64 0.21.2",
  "cocoa",
  "dirs-next",
  "embed_plist",
@@ -3034,6 +3065,7 @@ dependencies = [
  "heck 0.4.1",
  "http",
  "ignore",
+ "minisign-verify",
  "objc",
  "once_cell",
  "open",
@@ -3055,19 +3087,21 @@ dependencies = [
  "tauri-utils",
  "tempfile",
  "thiserror",
+ "time",
  "tokio",
  "url",
  "uuid",
  "webkit2gtk",
  "webview2-com",
  "windows 0.39.0",
+ "zip",
 ]
 
 [[package]]
 name = "tauri-build"
-version = "1.3.0"
+version = "1.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "929b3bd1248afc07b63e33a6a53c3f82c32d0b0a5e216e4530e94c467e019389"
+checksum = "7d2edd6a259b5591c8efdeb9d5702cb53515b82a6affebd55c7fd6d3a27b7d1b"
 dependencies = [
  "anyhow",
  "cargo_toml",
@@ -3078,7 +3112,6 @@ dependencies = [
  "serde_json",
  "tauri-utils",
  "tauri-winres",
- "winnow",
 ]
 
 [[package]]
@@ -3176,12 +3209,13 @@ dependencies = [
 
 [[package]]
 name = "tauri-utils"
-version = "1.3.0"
+version = "1.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5a6f9c2dafef5cbcf52926af57ce9561bd33bb41d7394f8bb849c0330260d864"
+checksum = "03fc02bb6072bb397e1d473c6f76c953cda48b4a2d0cce605df284aa74a12e84"
 dependencies = [
  "brotli",
  "ctor",
+ "dunce",
  "glob",
  "heck 0.4.1",
  "html5ever",
@@ -3397,7 +3431,7 @@ version = "0.18.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "56c59d8dd7d0dcbc6428bf7aa2f0e823e26e43b3c9aca15bbc9475d23e5fa12b"
 dependencies = [
- "indexmap",
+ "indexmap 1.9.3",
  "nom8",
  "serde",
  "serde_spanned",
@@ -3410,7 +3444,7 @@ version = "0.19.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "239410c8609e8125456927e6707163a3b1fdb40561e4b803bc041f466ccfdc13"
 dependencies = [
- "indexmap",
+ "indexmap 1.9.3",
  "serde",
  "serde_spanned",
  "toml_datetime 0.6.2",
@@ -4228,3 +4262,14 @@ checksum = "6d1526bbe5aaeb5eb06885f4d987bcdfa5e23187055de9b83fe00156a821fabc"
 dependencies = [
  "libc",
 ]
+
+[[package]]
+name = "zip"
+version = "0.6.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "760394e246e4c28189f19d488c058bf16f564016aefac5d32bb1f3b51d5e9261"
+dependencies = [
+ "byteorder",
+ "crc32fast",
+ "crossbeam-utils",
+]

src-tauri/Cargo.toml

@@ -12,14 +12,14 @@ 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.3.0", features = [] }
+tauri-build = { version = "1.4.0", features = [] }
 
 [dependencies]
 anyhow = "1"
 oauth2 = "4.4.1"
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
-tauri = { version = "1.3.0", features = [ "path-all", "dialog-all", "fs-all", "http-request", "shell-open", "shell-open-api"] }
+tauri = { version = "1.3.0", features = [ "updater", "path-all", "dialog-all", "fs-all", "http-request", "shell-open", "shell-open-api"] }
 tokio = { version = "1.29.1", features = ["time"] }
 toml = "0.6.0"
 tauri-plugin-fs-extra = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }

src-tauri/tauri.conf.json

@@ -7,8 +7,8 @@
     "distDir": "../build"
   },
   "package": {
-    "productName": "kittycad-modeling-app",
-    "version": "0.0.4"
+    "productName": "kittycad-modeling",
+    "version": "0.6.0"
   },
   "tauri": {
     "allowlist": {

src-tauri/tauri.macos.conf.json

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

src-tauri/tauri.windows.conf.json

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

src/App.test.tsx

@@ -2,7 +2,8 @@ import { render, screen } from '@testing-library/react'
 import { App } from './App'
 import { describe, test, vi } from 'vitest'
 import { BrowserRouter } from 'react-router-dom'
-import { GlobalStateProvider } from './hooks/useAuthMachine'
+import { GlobalStateProvider } from './components/GlobalStateProvider'
+import CommandBarProvider from 'components/CommandBar'
 
 let listener: ((rect: any) => void) | undefined = undefined
 ;(global as any).ResizeObserver = class ResizeObserver {
@@ -43,7 +44,9 @@ function TestWrap({ children }: { children: React.ReactNode }) {
   // wrap in router and xState context
   return (
     <BrowserRouter>
+      <CommandBarProvider>
         <GlobalStateProvider>{children}</GlobalStateProvider>
+      </CommandBarProvider>
     </BrowserRouter>
   )
 }

src/App.tsx

@@ -2,7 +2,6 @@ import {
   useRef,
   useEffect,
   useLayoutEffect,
-  useMemo,
   useCallback,
   MouseEventHandler,
 } from 'react'
@@ -10,15 +9,7 @@ import { DebugPanel } from './components/DebugPanel'
 import { v4 as uuidv4 } from 'uuid'
 import { asyncParser } from './lang/abstractSyntaxTree'
 import { _executor } from './lang/executor'
-import CodeMirror from '@uiw/react-codemirror'
-import { langs } from '@uiw/codemirror-extensions-langs'
-import { linter, lintGutter } from '@codemirror/lint'
-import { ViewUpdate } from '@codemirror/view'
-import {
-  lineHighlightField,
-  addLineHighlight,
-} from './editor/highlightextension'
-import { PaneType, Selections, Themes, useStore } from './useStore'
+import { PaneType, useStore } from './useStore'
 import { Logs, KCLErrors } from './components/Logs'
 import { CollapsiblePanel } from './components/CollapsiblePanel'
 import { MemoryPanel } from './components/MemoryPanel'
@@ -29,9 +20,9 @@ import {
   EngineCommand,
   EngineCommandManager,
 } from './lang/std/engineConnection'
-import { isOverlap, throttle } from './lib/utils'
+import { throttle } from './lib/utils'
 import { AppHeader } from './components/AppHeader'
-import { KCLError, kclErrToDiagnostic } from './lang/errors'
+import { KCLError } from './lang/errors'
 import { Resizable } from 're-resizable'
 import {
   faCode,
@@ -39,101 +30,87 @@ import {
   faSquareRootVariable,
 } from '@fortawesome/free-solid-svg-icons'
 import { useHotkeys } from 'react-hotkeys-hook'
-import { TEST } from './env'
 import { getNormalisedCoordinates } from './lib/utils'
-import { getSystemTheme } from './lib/getSystemTheme'
 import { isTauri } from './lib/isTauri'
-import { useLoaderData, useParams } from 'react-router-dom'
-import { writeTextFile } from '@tauri-apps/api/fs'
-import { PROJECT_ENTRYPOINT } from './lib/tauriFS'
+import { useLoaderData } from 'react-router-dom'
 import { IndexLoaderData } from './Router'
-import { toast } from 'react-hot-toast'
-import { useAuthMachine } from './hooks/useAuthMachine'
+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 { CodeMenu } from 'components/CodeMenu'
+import { TextEditor } from 'components/TextEditor'
+import { Themes, getSystemTheme } from 'lib/theme'
 
 export function App() {
   const { code: loadedCode, project } = useLoaderData() as IndexLoaderData
-  const pathParams = useParams()
+
   const streamRef = useRef<HTMLDivElement>(null)
   useHotKeyListener()
   const {
-    editorView,
-    setEditorView,
-    setSelectionRanges,
-    selectionRanges,
     addLog,
     addKCLError,
-    code,
     setCode,
     setAst,
     setError,
     setProgramMemory,
     resetLogs,
     resetKCLErrors,
-    selectionRangeTypeMap,
     setArtifactMap,
     engineCommandManager,
     setEngineCommandManager,
+    highlightRange,
     setHighlightRange,
     setCursor2,
-    sourceRangeMap,
     setMediaStream,
     setIsStreamReady,
     isStreamReady,
-    isMouseDownInStream,
-    cmdId,
-    setCmdId,
-    formatCode,
-    debugPanel,
-    theme,
+    buttonDownInStream,
     openPanes,
     setOpenPanes,
-    onboardingStatus,
     didDragInStream,
-    setDidDragInStream,
     setStreamDimensions,
     streamDimensions,
+    setIsExecuting,
+    defferedCode,
+    guiMode,
   } = useStore((s) => ({
-    editorView: s.editorView,
-    setEditorView: s.setEditorView,
-    setSelectionRanges: s.setSelectionRanges,
-    selectionRanges: s.selectionRanges,
-    setGuiMode: s.setGuiMode,
+    guiMode: s.guiMode,
     addLog: s.addLog,
-    code: s.code,
+    defferedCode: s.defferedCode,
     setCode: s.setCode,
     setAst: s.setAst,
     setError: s.setError,
     setProgramMemory: s.setProgramMemory,
     resetLogs: s.resetLogs,
     resetKCLErrors: s.resetKCLErrors,
-    selectionRangeTypeMap: s.selectionRangeTypeMap,
     setArtifactMap: s.setArtifactNSourceRangeMaps,
     engineCommandManager: s.engineCommandManager,
     setEngineCommandManager: s.setEngineCommandManager,
+    highlightRange: s.highlightRange,
     setHighlightRange: s.setHighlightRange,
-    isShiftDown: s.isShiftDown,
-    setCursor: s.setCursor,
     setCursor2: s.setCursor2,
-    sourceRangeMap: s.sourceRangeMap,
     setMediaStream: s.setMediaStream,
     isStreamReady: s.isStreamReady,
     setIsStreamReady: s.setIsStreamReady,
-    isMouseDownInStream: s.isMouseDownInStream,
-    cmdId: s.cmdId,
-    setCmdId: s.setCmdId,
-    formatCode: s.formatCode,
-    debugPanel: s.debugPanel,
+    buttonDownInStream: s.buttonDownInStream,
     addKCLError: s.addKCLError,
-    theme: s.theme,
     openPanes: s.openPanes,
     setOpenPanes: s.setOpenPanes,
-    onboardingStatus: s.onboardingStatus,
     didDragInStream: s.didDragInStream,
-    setDidDragInStream: s.setDidDragInStream,
     setStreamDimensions: s.setStreamDimensions,
     streamDimensions: s.streamDimensions,
+    setIsExecuting: s.setIsExecuting,
   }))
-  const [token] = useAuthMachine((s) => s?.context?.token)
+
+  const {
+    auth: {
+      context: { token },
+    },
+    settings: {
+      context: { showDebugPanel, onboardingStatus, cameraControls, theme },
+    },
+  } = useGlobalStateContext()
 
   const editorTheme = theme === Themes.System ? getSystemTheme() : theme
 
@@ -152,7 +129,7 @@ export function App() {
   useHotkeys('shift + d', () => togglePane('debug'))
 
   const paneOpacity =
-    onboardingStatus === 'camera'
+    onboardingStatus === onboardingPaths.CAMERA
       ? 'opacity-20'
       : didDragInStream
       ? 'opacity-40'
@@ -172,87 +149,12 @@ export function App() {
     }
   }, [loadedCode, setCode])
 
-  // const onChange = React.useCallback((value: string, viewUpdate: ViewUpdate) => {
-  const onChange = (value: string, viewUpdate: ViewUpdate) => {
-    setCode(value)
-    if (isTauri() && pathParams.id) {
-      // Save the file to disk
-      // Note that PROJECT_ENTRYPOINT is hardcoded until we support multiple files
-      writeTextFile(pathParams.id + '/' + PROJECT_ENTRYPOINT, value).catch(
-        (err) => {
-          // TODO: add Sentry per GH issue #254 (https://github.com/KittyCAD/modeling-app/issues/254)
-          console.error('error saving file', err)
-          toast.error('Error saving file, please check file permissions')
-        }
-      )
-    }
-    if (editorView) {
-      editorView?.dispatch({ effects: addLineHighlight.of([0, 0]) })
-    }
-  } //, []);
-  const onUpdate = (viewUpdate: ViewUpdate) => {
-    if (!editorView) {
-      setEditorView(viewUpdate.view)
-    }
-    const ranges = viewUpdate.state.selection.ranges
-
-    const isChange =
-      ranges.length !== selectionRanges.codeBasedSelections.length ||
-      ranges.some(({ from, to }, i) => {
-        return (
-          from !== selectionRanges.codeBasedSelections[i].range[0] ||
-          to !== selectionRanges.codeBasedSelections[i].range[1]
-        )
-      })
-
-    if (!isChange) return
-    const codeBasedSelections: Selections['codeBasedSelections'] = ranges.map(
-      ({ from, to }) => {
-        if (selectionRangeTypeMap[to]) {
-          return {
-            type: selectionRangeTypeMap[to],
-            range: [from, to],
-          }
-        }
-        return {
-          type: 'default',
-          range: [from, to],
-        }
-      }
-    )
-    const idBasedSelections = codeBasedSelections
-      .map(({ type, range }) => {
-        const hasOverlap = Object.entries(sourceRangeMap).filter(
-          ([_, sourceRange]) => {
-            return isOverlap(sourceRange, range)
-          }
-        )
-        if (hasOverlap.length) {
-          return {
-            type,
-            id: hasOverlap[0][0],
-          }
-        }
-      })
-      .filter(Boolean) as any
-
-    engineCommandManager?.cusorsSelected({
-      otherSelections: [],
-      idBasedSelections,
-    })
-
-    setSelectionRanges({
-      otherSelections: [],
-      codeBasedSelections,
-    })
-  }
-  const pixelDensity = window.devicePixelRatio
   const streamWidth = streamRef?.current?.offsetWidth
   const streamHeight = streamRef?.current?.offsetHeight
 
-  const width = streamWidth ? streamWidth * pixelDensity : 0
+  const width = streamWidth ? streamWidth : 0
   const quadWidth = Math.round(width / 4) * 4
-  const height = streamHeight ? streamHeight * pixelDensity : 0
+  const height = streamHeight ? streamHeight : 0
   const quadHeight = Math.round(height / 4) * 4
 
   useLayoutEffect(() => {
@@ -276,37 +178,36 @@ export function App() {
 
   useEffect(() => {
     if (!isStreamReady) return
+    if (!engineCommandManager) return
+    let unsubFn: any[] = []
     const asyncWrap = async () => {
       try {
-        if (!code) {
-          setAst(null)
+        if (!defferedCode) {
+          setAst({
+            start: 0,
+            end: 0,
+            body: [],
+            nonCodeMeta: {
+              noneCodeNodes: {},
+              start: null,
+            },
+          })
+          setProgramMemory({ root: {} })
+          engineCommandManager.endSession()
+          engineCommandManager.startNewSession()
           return
         }
-        const _ast = await asyncParser(code)
+        const _ast = await asyncParser(defferedCode)
         setAst(_ast)
         resetLogs()
         resetKCLErrors()
-        if (engineCommandManager) {
         engineCommandManager.endSession()
         engineCommandManager.startNewSession()
-        }
-        if (!engineCommandManager) return
+        setIsExecuting(true)
         const programMemory = await _executor(
           _ast,
           {
             root: {
-              log: {
-                type: 'userVal',
-                value: (a: any) => {
-                  addLog(a)
-                },
-                __meta: [
-                  {
-                    pathToNode: [],
-                    sourceRange: [0, 0],
-                  },
-                ],
-              },
               _0: {
                 type: 'userVal',
                 value: 0,
@@ -328,39 +229,48 @@ export function App() {
                 __meta: [],
               },
             },
-            pendingMemory: {},
           },
-          engineCommandManager,
-          { bodyType: 'root' },
-          []
+          engineCommandManager
         )
 
         const { artifactMap, sourceRangeMap } =
           await engineCommandManager.waitForAllCommands()
-
-        setArtifactMap({ artifactMap, sourceRangeMap })
-        engineCommandManager.onHover((id) => {
-          if (!id) {
-            setHighlightRange([0, 0])
-          } else {
-            const sourceRange = sourceRangeMap[id]
-            setHighlightRange(sourceRange)
-          }
-        })
-        engineCommandManager.onClick((selections) => {
-          if (!selections) {
-            setCursor2()
-            return
-          }
-          const { id, type } = selections
-          setCursor2({ range: sourceRangeMap[id], type })
-        })
+        setIsExecuting(false)
         if (programMemory !== undefined) {
           setProgramMemory(programMemory)
         }
 
+        setArtifactMap({ artifactMap, sourceRangeMap })
+        const unSubHover = engineCommandManager.subscribeToUnreliable({
+          event: 'highlight_set_entity',
+          callback: ({ data }) => {
+            if (data?.entity_id) {
+              const sourceRange = sourceRangeMap[data.entity_id]
+              setHighlightRange(sourceRange)
+            } else if (
+              !highlightRange ||
+              (highlightRange[0] !== 0 && highlightRange[1] !== 0)
+            ) {
+              setHighlightRange([0, 0])
+            }
+          },
+        })
+        const unSubClick = engineCommandManager.subscribeTo({
+          event: 'select_with_point',
+          callback: ({ data }) => {
+            if (!data?.entity_id) {
+              setCursor2()
+              return
+            }
+            const sourceRange = sourceRangeMap[data.entity_id]
+            setCursor2({ range: sourceRange, type: 'default' })
+          },
+        })
+        unsubFn.push(unSubHover, unSubClick)
+
         setError()
       } catch (e: any) {
+        setIsExecuting(false)
         if (e instanceof KCLError) {
           addKCLError(e)
         } else {
@@ -371,45 +281,49 @@ export function App() {
       }
     }
     asyncWrap()
-  }, [code, isStreamReady])
+    return () => {
+      unsubFn.forEach((fn) => fn())
+    }
+  }, [defferedCode, isStreamReady, engineCommandManager])
 
   const debounceSocketSend = throttle<EngineCommand>((message) => {
     engineCommandManager?.sendSceneCommand(message)
   }, 16)
-  const handleMouseMove: MouseEventHandler<HTMLDivElement> = ({
-    clientX,
-    clientY,
-    ctrlKey,
-    shiftKey,
-    currentTarget,
-    nativeEvent,
-  }) => {
-    nativeEvent.preventDefault()
-    if (isMouseDownInStream) {
-      setDidDragInStream(true)
-    }
+  const handleMouseMove: MouseEventHandler<HTMLDivElement> = (e) => {
+    e.nativeEvent.preventDefault()
 
     const { x, y } = getNormalisedCoordinates({
-      clientX,
-      clientY,
-      el: currentTarget,
+      clientX: e.clientX,
+      clientY: e.clientY,
+      el: e.currentTarget,
       ...streamDimensions,
     })
 
-    const interaction = ctrlKey ? 'zoom' : shiftKey ? 'pan' : 'rotate'
-
     const newCmdId = uuidv4()
-    setCmdId(newCmdId)
-
-    if (cmdId && isMouseDownInStream) {
+    if (buttonDownInStream === undefined) {
+      if (
+        guiMode.mode === 'sketch' &&
+        guiMode.sketchMode === ('sketch_line' as any)
+      ) {
         debounceSocketSend({
           type: 'modeling_cmd_req',
+          cmd_id: newCmdId,
           cmd: {
-          type: 'camera_drag_move',
-          interaction,
+            type: 'mouse_move',
             window: { x, y },
           },
+        })
+      } else if (
+        guiMode.mode === 'sketch' &&
+        guiMode.sketchMode === ('move' as any)
+      ) {
+        debounceSocketSend({
+          type: 'modeling_cmd_req',
           cmd_id: newCmdId,
+          cmd: {
+            type: 'handle_mouse_drag_move',
+            window: { x, y },
+          },
         })
       } else {
         debounceSocketSend({
@@ -421,17 +335,34 @@ export function App() {
           cmd_id: newCmdId,
         })
       }
+    } else {
+      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 {
+        console.log('none')
+        return
       }
 
-  const extraExtensions = useMemo(() => {
-    if (TEST) return []
-    return [
-      lintGutter(),
-      linter((_view) => {
-        return kclErrToDiagnostic(useStore.getState().kclErrors)
-      }),
-    ]
-  }, [])
+      debounceSocketSend({
+        type: 'modeling_cmd_req',
+        cmd: {
+          type: 'camera_drag_move',
+          interaction,
+          window: { x, y },
+        },
+        cmd_id: newCmdId,
+      })
+    }
+  }
 
   return (
     <div
@@ -443,7 +374,7 @@ export function App() {
         className={
           'transition-opacity transition-duration-75 ' +
           paneOpacity +
-          (isMouseDownInStream ? ' pointer-events-none' : '')
+          (buttonDownInStream ? ' pointer-events-none' : '')
         }
         project={project}
         enableMenu={true}
@@ -452,17 +383,17 @@ export function App() {
       <Resizable
         className={
           'h-full flex flex-col flex-1 z-10 my-5 ml-5 pr-1 transition-opacity transition-duration-75 ' +
-          (isMouseDownInStream || onboardingStatus === 'camera'
+          (buttonDownInStream || onboardingStatus === 'camera'
             ? ' pointer-events-none '
             : ' ') +
           paneOpacity
         }
         defaultSize={{
-          width: '400px',
+          width: '550px',
           height: 'auto',
         }}
         minWidth={200}
-        maxWidth={600}
+        maxWidth={800}
         minHeight={'auto'}
         maxHeight={'auto'}
         handleClasses={{
@@ -476,31 +407,9 @@ export function App() {
             icon={faCode}
             className="open:!mb-2"
             open={openPanes.includes('code')}
+            menu={<CodeMenu />}
           >
-            <div className="px-2 py-1">
-              <button
-                // disabled={!shouldFormat}
-                onClick={formatCode}
-                // className={`${!shouldFormat && 'text-gray-300'}`}
-              >
-                format
-              </button>
-            </div>
-            <div id="code-mirror-override">
-              <CodeMirror
-                className="h-full"
-                value={code}
-                extensions={[
-                  langs.javascript({ jsx: true }),
-                  lineHighlightField,
-                  ...extraExtensions,
-                ]}
-                onChange={onChange}
-                onUpdate={onUpdate}
-                theme={editorTheme}
-                onCreateEditor={(_editorView) => setEditorView(_editorView)}
-              />
-            </div>
+            <TextEditor theme={editorTheme} />
           </CollapsiblePanel>
           <section className="flex flex-col">
             <MemoryPanel
@@ -525,13 +434,13 @@ export function App() {
         </div>
       </Resizable>
       <Stream className="absolute inset-0 z-0" />
-      {debugPanel && (
+      {showDebugPanel && (
         <DebugPanel
           title="Debug"
           className={
             'transition-opacity transition-duration-75 ' +
             paneOpacity +
-            (isMouseDownInStream ? ' pointer-events-none' : '')
+            (buttonDownInStream ? ' pointer-events-none' : '')
           }
           open={openPanes.includes('debug')}
         />

src/Auth.tsx

@@ -1,9 +1,12 @@
 import Loading from './components/Loading'
-import { useAuthMachine } from './hooks/useAuthMachine'
+import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
 
 // Wrapper around protected routes, used in src/Router.tsx
 export const Auth = ({ children }: React.PropsWithChildren) => {
-  const [isLoggedIn] = useAuthMachine((s) => s.matches('checkIfLoggedIn'))
+  const {
+    auth: { state },
+  } = useGlobalStateContext()
+  const isLoggedIn = state.matches('checkIfLoggedIn')
 
   return isLoggedIn ? (
     <Loading>Loading KittyCAD Modeling App...</Loading>

src/Router.tsx

@@ -3,8 +3,15 @@ import {
   createBrowserRouter,
   Outlet,
   redirect,
+  useLocation,
   RouterProvider,
 } from 'react-router-dom'
+import {
+  matchRoutes,
+  createRoutesFromChildren,
+  useNavigationType,
+} from 'react-router'
+import { useEffect } from 'react'
 import { ErrorPage } from './components/ErrorPage'
 import { Settings } from './routes/Settings'
 import Onboarding, {
@@ -24,7 +31,47 @@ import {
 } from './lib/tauriFS'
 import { metadata, type Metadata } from 'tauri-plugin-fs-extra-api'
 import DownloadAppBanner from './components/DownloadAppBanner'
-import { GlobalStateProvider } from './hooks/useAuthMachine'
+import { GlobalStateProvider } from './components/GlobalStateProvider'
+import {
+  SETTINGS_PERSIST_KEY,
+  settingsMachine,
+} from './machines/settingsMachine'
+import { ContextFrom } from 'xstate'
+import CommandBarProvider from 'components/CommandBar'
+import { TEST, VITE_KC_SENTRY_DSN } from './env'
+import * as Sentry from '@sentry/react'
+
+if (VITE_KC_SENTRY_DSN && !TEST) {
+  Sentry.init({
+    dsn: VITE_KC_SENTRY_DSN,
+    // TODO(paultag): pass in the right env here.
+    // environment: "production",
+    integrations: [
+      new Sentry.BrowserTracing({
+        routingInstrumentation: Sentry.reactRouterV6Instrumentation(
+          useEffect,
+          useLocation,
+          useNavigationType,
+          createRoutesFromChildren,
+          matchRoutes
+        ),
+      }),
+      new Sentry.Replay(),
+    ],
+
+    // Set tracesSampleRate to 1.0 to capture 100%
+    // of transactions for performance monitoring.
+    tracesSampleRate: 1.0,
+
+    // TODO: Add in kittycad.io endpoints
+    tracePropagationTargets: ['localhost'],
+
+    // Capture Replay for 10% of all sessions,
+    // plus for 100% of sessions with an error
+    replaysSessionSampleRate: 0.1,
+    replaysOnErrorSampleRate: 1.0,
+  })
+}
 
 const prependRoutes =
   (routesObject: Record<string, string>) => (prepend: string) => {
@@ -68,7 +115,11 @@ const addGlobalContextToElements = (
     'element' in route
       ? {
           ...route,
-          element: <GlobalStateProvider>{route.element}</GlobalStateProvider>,
+          element: (
+            <CommandBarProvider>
+              <GlobalStateProvider>{route.element}</GlobalStateProvider>
+            </CommandBarProvider>
+          ),
         }
       : route
   )
@@ -95,27 +146,26 @@ const router = createBrowserRouter(
         request,
         params,
       }): Promise<IndexLoaderData | Response> => {
-        const store = localStorage.getItem('store')
-        if (store === null) {
-          return redirect(paths.ONBOARDING.INDEX)
-        } else {
-          const status = JSON.parse(store).state.onboardingStatus || ''
-          const notEnRouteToOnboarding =
-            !request.url.includes(paths.ONBOARDING.INDEX) &&
-            request.method === 'GET'
+        const fetchedStorage = localStorage?.getItem(SETTINGS_PERSIST_KEY)
+        const persistedSettings = JSON.parse(fetchedStorage || '{}') as Partial<
+          ContextFrom<typeof settingsMachine>
+        >
+
+        const status = persistedSettings.onboardingStatus || ''
+        const notEnRouteToOnboarding = !request.url.includes(
+          paths.ONBOARDING.INDEX
+        )
         // '' is the initial state, 'done' and 'dismissed' are the final states
         const hasValidOnboardingStatus =
-            (status !== undefined && status.length === 0) ||
-            !(status === 'done' || status === 'dismissed')
+          status.length === 0 || !(status === 'done' || status === 'dismissed')
         const shouldRedirectToOnboarding =
           notEnRouteToOnboarding && hasValidOnboardingStatus
 
         if (shouldRedirectToOnboarding) {
           return redirect(
-              makeUrlPathRelative(paths.ONBOARDING.INDEX) + status
+            makeUrlPathRelative(paths.ONBOARDING.INDEX) + status.slice(1)
           )
         }
-        }
 
         if (params.id && params.id !== 'new') {
           // Note that PROJECT_ENTRYPOINT is hardcoded until we support multiple files
@@ -164,9 +214,23 @@ const router = createBrowserRouter(
         if (!isTauri()) {
           return redirect(paths.FILE + '/new')
         }
-
-        const projectDir = await initializeProjectDirectory()
-        const projectsNoMeta = (await readDir(projectDir.dir)).filter(
+        const fetchedStorage = localStorage?.getItem(SETTINGS_PERSIST_KEY)
+        const persistedSettings = JSON.parse(fetchedStorage || '{}') as Partial<
+          ContextFrom<typeof settingsMachine>
+        >
+        const projectDir = await initializeProjectDirectory(
+          persistedSettings.defaultDirectory || ''
+        )
+        if (projectDir !== persistedSettings.defaultDirectory) {
+          localStorage.setItem(
+            SETTINGS_PERSIST_KEY,
+            JSON.stringify({
+              ...persistedSettings,
+              defaultDirectory: projectDir,
+            })
+          )
+        }
+        const projectsNoMeta = (await readDir(projectDir)).filter(
           isProjectDirectory
         )
         const projects = await Promise.all(

src/Toolbar.module.css

@@ -0,0 +1,60 @@
+.toolbarWrapper {
+  @apply relative;
+}
+
+.toolbar {
+  @apply flex gap-4 items-center rounded-full;
+  @apply border border-cool-20/30 bg-cool-10/50;
+}
+
+:global(.dark) .toolbar {
+  @apply border-cool-100/50 bg-cool-120/50;
+}
+
+:global(.sketch) .toolbar {
+  @apply border-fern-20/20 bg-fern-10/20;
+}
+
+:global(.dark .sketch) .toolbar {
+  @apply border-fern-120/50 bg-fern-100/30;
+}
+
+.toolbarCap {
+  @apply text-sm font-bold;
+  @apply bg-cool-20/50 text-cool-100;
+}
+
+:global(.dark) .toolbarCap {
+  @apply bg-cool-90/50 text-cool-30;
+}
+
+:global(.sketch) .toolbarCap {
+  @apply bg-fern-20/50 text-fern-100;
+}
+
+:global(.dark .sketch) .toolbarCap {
+  @apply bg-fern-90/50 text-fern-30;
+}
+
+.label {
+  @apply self-stretch flex items-center px-4 py-1;
+  @apply rounded-l-full;
+}
+
+.popoverToggle {
+  @apply self-stretch m-0 flex items-center px-4 py-1;
+  @apply rounded-r-full border-none;
+  @apply hover:bg-cool-20;
+}
+
+:global(.dark) .popoverToggle {
+  @apply hover:bg-cool-90;
+}
+
+:global(.sketch) .popoverToggle {
+  @apply hover:bg-fern-20;
+}
+
+:global(.dark .sketch) .popoverToggle {
+  @apply hover:bg-fern-90;
+}

src/Toolbar.tsx

@@ -1,4 +1,4 @@
-import { useStore, toolTips } from './useStore'
+import { useStore, toolTips, Selections } from './useStore'
 import { extrudeSketch, sketchOnExtrudedFace } from './lang/modifyAst'
 import { getNodePathFromSourceRange } from './lang/queryAst'
 import { HorzVert } from './components/Toolbar/HorzVert'
@@ -8,9 +8,15 @@ import { EqualAngle } from './components/Toolbar/EqualAngle'
 import { Intersect } from './components/Toolbar/Intersect'
 import { SetHorzVertDistance } from './components/Toolbar/SetHorzVertDistance'
 import { SetAngleLength } from './components/Toolbar/setAngleLength'
-import { ConvertToVariable } from './components/Toolbar/ConvertVariable'
 import { SetAbsDistance } from './components/Toolbar/SetAbsDistance'
 import { SetAngleBetween } from './components/Toolbar/SetAngleBetween'
+import { Fragment, useEffect } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSearch, faX } from '@fortawesome/free-solid-svg-icons'
+import { Popover, Transition } from '@headlessui/react'
+import styles from './Toolbar.module.css'
+import { v4 as uuidv4 } from 'uuid'
+import { useAppMode } from 'hooks/useAppMode'
 
 export const Toolbar = () => {
   const {
@@ -20,6 +26,7 @@ export const Toolbar = () => {
     ast,
     updateAst,
     programMemory,
+    engineCommandManager,
   } = useStore((s) => ({
     guiMode: s.guiMode,
     setGuiMode: s.setGuiMode,
@@ -27,10 +34,17 @@ export const Toolbar = () => {
     ast: s.ast,
     updateAst: s.updateAst,
     programMemory: s.programMemory,
+    engineCommandManager: s.engineCommandManager,
   }))
+  useAppMode()
 
+  useEffect(() => {
+    console.log('guiMode', guiMode)
+  }, [guiMode])
+
+  function ToolbarButtons() {
     return (
-    <div>
+      <span className="overflow-x-auto">
         {guiMode.mode === 'default' && (
           <button
             onClick={() => {
@@ -62,9 +76,18 @@ export const Toolbar = () => {
             SketchOnFace
           </button>
         )}
-      {(guiMode.mode === 'canEditSketch' || false) && (
+        {guiMode.mode === 'canEditSketch' && (
           <button
             onClick={() => {
+              console.log('guiMode.pathId', guiMode.pathId)
+              engineCommandManager?.sendSceneCommand({
+                type: 'modeling_cmd_req',
+                cmd_id: uuidv4(),
+                cmd: {
+                  type: 'edit_mode_enter',
+                  target: guiMode.pathId,
+                },
+              })
               setGuiMode({
                 mode: 'sketch',
                 sketchMode: 'sketchEdit',
@@ -116,14 +139,23 @@ export const Toolbar = () => {
         )}
 
         {guiMode.mode === 'sketch' && (
-        <button onClick={() => setGuiMode({ mode: 'default' })}>
+          <button
+            onClick={() => {
+              engineCommandManager?.sendSceneCommand({
+                type: 'modeling_cmd_req',
+                cmd_id: uuidv4(),
+                cmd: { type: 'edit_mode_exit' },
+              })
+              setGuiMode({ mode: 'default' })
+            }}
+          >
             Exit sketch
           </button>
         )}
         {toolTips
           .filter(
             // (sketchFnName) => !['angledLineThatIntersects'].includes(sketchFnName)
-          (sketchFnName) => ['line'].includes(sketchFnName)
+            (sketchFnName) => ['sketch_line', 'move'].includes(sketchFnName)
           )
           .map((sketchFnName) => {
             if (
@@ -134,7 +166,18 @@ export const Toolbar = () => {
             return (
               <button
                 key={sketchFnName}
-              onClick={() =>
+                onClick={() => {
+                  engineCommandManager?.sendSceneCommand({
+                    type: 'modeling_cmd_req',
+                    cmd_id: uuidv4(),
+                    cmd: {
+                      type: 'set_tool',
+                      tool:
+                        guiMode.sketchMode === sketchFnName
+                          ? 'select'
+                          : (sketchFnName as any),
+                    },
+                  })
                   setGuiMode({
                     ...guiMode,
                     ...(guiMode.sketchMode === sketchFnName
@@ -144,18 +187,17 @@ export const Toolbar = () => {
                         }
                       : {
                           sketchMode: sketchFnName,
+                          waitingFirstClick: true,
                           isTooltip: true,
                         }),
                   })
-              }
+                }}
               >
                 {sketchFnName}
                 {guiMode.sketchMode === sketchFnName && '✅'}
               </button>
             )
           })}
-      <br></br>
-      <ConvertToVariable />
         <HorzVert horOrVert="horizontal" />
         <HorzVert horOrVert="vertical" />
         <EqualLength />
@@ -173,6 +215,61 @@ export const Toolbar = () => {
         <Intersect />
         <RemoveConstrainingValues />
         <SetAngleBetween />
+      </span>
+    )
+  }
+
+  return (
+    <Popover className={styles.toolbarWrapper + ' ' + guiMode.mode}>
+      <div className={styles.toolbar}>
+        <span className={styles.toolbarCap + ' ' + styles.label}>
+          {guiMode.mode === 'sketch' ? '2D' : '3D'}
+        </span>
+        <menu className="flex flex-1 gap-2 py-0.5 overflow-hidden whitespace-nowrap">
+          <ToolbarButtons />
+        </menu>
+        <Popover.Button
+          className={styles.toolbarCap + ' ' + styles.popoverToggle}
+        >
+          <FontAwesomeIcon icon={faSearch} />
+        </Popover.Button>
       </div>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="transition ease-out duration-100"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <Popover.Overlay className="fixed inset-0 bg-chalkboard-110/20 dark:bg-chalkboard-110/50" />
+      </Transition>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="opacity-0 translate-y-1 scale-95"
+        enterTo="opacity-100 translate-y-0 scale-100"
+        leave="transition ease-out duration-75"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-2"
+      >
+        <Popover.Panel className="absolute top-0 w-screen max-w-xl left-1/2 -translate-x-1/2 flex flex-col gap-8 bg-chalkboard-10 dark:bg-chalkboard-100 p-5 rounded border border-chalkboard-20/30 dark:border-chalkboard-70/50">
+          <section className="flex justify-between items-center">
+            <p
+              className={`${styles.toolbarCap} ${styles.label} !self-center rounded-r-full w-fit`}
+            >
+              You're in {guiMode.mode === 'sketch' ? '2D' : '3D'}
+            </p>
+            <Popover.Button className="p-2 flex items-center justify-center rounded-sm bg-chalkboard-20 text-chalkboard-110 dark:bg-chalkboard-70 dark:text-chalkboard-20 border-none hover:bg-chalkboard-30 dark:hover:bg-chalkboard-60">
+              <FontAwesomeIcon icon={faX} className="w-4 h-4" />
+            </Popover.Button>
+          </section>
+          <section>
+            <ToolbarButtons />
+          </section>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
   )
 }

src/components/ActionIcon.tsx

@@ -8,11 +8,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 const iconSizes = {
   sm: 12,
   md: 14.4,
-  lg: 18,
+  lg: 20,
+  xl: 28,
 }
 
 export interface ActionIconProps extends React.PropsWithChildren {
   icon?: SolidIconDefinition | BrandIconDefinition
+  className?: string
   bgClassName?: string
   iconClassName?: string
   size?: keyof typeof iconSizes
@@ -20,6 +22,7 @@ export interface ActionIconProps extends React.PropsWithChildren {
 
 export const ActionIcon = ({
   icon = faCircleExclamation,
+  className,
   bgClassName,
   iconClassName,
   size = 'md',
@@ -28,7 +31,9 @@ export const ActionIcon = ({
   return (
     <div
       className={
-        'p-1 w-fit inline-grid place-content-center ' +
+        `p-${
+          size === 'xl' ? '2' : '1'
+        } w-fit inline-grid place-content-center ${className} ` +
         (bgClassName ||
           'bg-chalkboard-100 group-hover:bg-chalkboard-90 hover:bg-chalkboard-90 dark:bg-liquid-20 dark:group-hover:bg-liquid-10 dark:hover:bg-liquid-10')
       }
@@ -40,7 +45,7 @@ export const ActionIcon = ({
           height={iconSizes[size]}
           className={
             iconClassName ||
-            'text-liquid-20 group-hover:text-liquid-10 hover:text-liquid-10 dark:text-liquid-100 dark:group-hover:text-liquid-100 dark:hover:text-liquid-100'
+            'text-liquid-20 h-auto group-hover:text-liquid-10 hover:text-liquid-10 dark:text-liquid-100 dark:group-hover:text-liquid-100 dark:hover:text-liquid-100'
           }
         />
       )}

src/components/AppHeader.module.css

@@ -0,0 +1,7 @@
+/*
+  Some CSS cannot be represented
+  in Tailwind, such as complex grid layouts.
+ */
+.header {
+  grid-template-columns: 1fr auto 1fr;
+}

src/components/AppHeader.tsx

@@ -2,7 +2,9 @@ import { Toolbar } from '../Toolbar'
 import UserSidebarMenu from './UserSidebarMenu'
 import { ProjectWithEntryPointMetadata } from '../Router'
 import ProjectSidebarMenu from './ProjectSidebarMenu'
-import { useAuthMachine } from '../hooks/useAuthMachine'
+import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
+import styles from './AppHeader.module.css'
+import { NetworkHealthIndicator } from './NetworkHealthIndicator'
 
 interface AppHeaderProps extends React.PropsWithChildren {
   showToolbar?: boolean
@@ -18,12 +20,18 @@ export const AppHeader = ({
   className = '',
   enableMenu = false,
 }: AppHeaderProps) => {
-  const [user] = useAuthMachine((s) => s?.context?.user)
+  const {
+    auth: {
+      context: { user },
+    },
+  } = useGlobalStateContext()
 
   return (
     <header
       className={
-        'overlaid-panes sticky top-0 z-20 py-1 px-5 bg-chalkboard-10/50 dark:bg-chalkboard-100/50 border-b dark:border-b-2 border-chalkboard-30 dark:border-chalkboard-90 flex justify-between items-center ' +
+        (showToolbar ? 'grid ' : 'flex justify-between ') +
+        styles.header +
+        ' overlaid-panes sticky top-0 z-20 py-1 px-5 bg-chalkboard-10/70 dark:bg-chalkboard-100/50 border-b dark:border-b-2 border-chalkboard-30 dark:border-chalkboard-90 items-center ' +
         className
       }
     >
@@ -35,7 +43,12 @@ export const AppHeader = ({
         </div>
       )}
       {/* If there are children, show them, otherwise show User menu */}
-      {children || <UserSidebarMenu user={user} />}
+      {children || (
+        <div className="ml-auto flex items-center gap-1">
+          <NetworkHealthIndicator />
+          <UserSidebarMenu user={user} />
+        </div>
+      )}
     </header>
   )
 }

src/components/AvailableVarsHelpers.tsx

@@ -198,29 +198,25 @@ export const CreateNewVariable = ({
   isNewVariableNameUnique,
   setNewVariableName,
   shouldCreateVariable,
-  setShouldCreateVariable,
+  setShouldCreateVariable = () => {},
   showCheckbox = true,
 }: {
   isNewVariableNameUnique: boolean
   newVariableName: string
   setNewVariableName: (a: string) => void
-  shouldCreateVariable: boolean
-  setShouldCreateVariable: (a: boolean) => void
+  shouldCreateVariable?: boolean
+  setShouldCreateVariable?: (a: boolean) => void
   showCheckbox?: boolean
 }) => {
   return (
     <>
-      <label
-        htmlFor="create-new-variable"
-        className="block text-sm font-medium text-gray-700 mt-3 font-mono"
-      >
+      <label htmlFor="create-new-variable" className="block mt-3 font-mono">
         Create new variable
       </label>
-      <div className="mt-1 flex flex-1">
+      <div className="mt-1 flex gap-2 items-center">
         {showCheckbox && (
           <input
             type="checkbox"
-            className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md font-mono pl-1 flex-shrink"
             checked={shouldCreateVariable}
             onChange={(e) => {
               setShouldCreateVariable(e.target.checked)
@@ -232,7 +228,10 @@ export const CreateNewVariable = ({
           disabled={!shouldCreateVariable}
           name="create-new-variable"
           id="create-new-variable"
-          className={`shadow-sm font-[monospace] focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md font-mono pl-1 flex-shrink-0 ${
+          autoFocus={true}
+          autoCapitalize="off"
+          autoCorrect="off"
+          className={`font-mono flex-1 sm:text-sm px-2 py-1 rounded-sm bg-chalkboard-10 dark:bg-chalkboard-90 text-chalkboard-90 dark:text-chalkboard-10 ${
             !shouldCreateVariable ? 'opacity-50' : ''
           }`}
           value={newVariableName}

src/components/CodeMenu.module.css

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

src/components/CodeMenu.tsx

@@ -0,0 +1,59 @@
+import { Menu } from '@headlessui/react'
+import { PropsWithChildren } from 'react'
+import { faEllipsis } from '@fortawesome/free-solid-svg-icons'
+import { ActionIcon } from './ActionIcon'
+import { useStore } from 'useStore'
+import styles from './CodeMenu.module.css'
+import { useConvertToVariable } from 'hooks/useToolbarGuards'
+import { editorShortcutMeta } from './TextEditor'
+
+export const CodeMenu = ({ children }: PropsWithChildren) => {
+  const { formatCode } = useStore((s) => ({
+    formatCode: s.formatCode,
+  }))
+  const { enable: convertToVarEnabled, handleClick: handleConvertToVarClick } =
+    useConvertToVariable()
+
+  return (
+    <Menu>
+      <div
+        className="relative"
+        onClick={(e) => {
+          if (e.eventPhase === 3) {
+            e.stopPropagation()
+            e.preventDefault()
+          }
+        }}
+      >
+        <Menu.Button className="p-0 border-none relative">
+          <ActionIcon
+            icon={faEllipsis}
+            bgClassName={
+              'bg-chalkboard-20 dark:bg-chalkboard-110 hover:bg-liquid-10/50 hover:dark:bg-chalkboard-90 ui-active:bg-chalkboard-80 ui-active:dark:bg-chalkboard-90  rounded'
+            }
+            iconClassName={'text-chalkboard-90 dark:text-chalkboard-40'}
+          />
+        </Menu.Button>
+        <Menu.Items className="absolute right-0 left-auto w-72 flex flex-col gap-1 divide-y divide-chalkboard-20 dark:divide-chalkboard-70 align-stretch px-0 py-1 bg-chalkboard-10 dark:bg-chalkboard-90 rounded-sm shadow-lg border border-solid border-chalkboard-20/50 dark:border-chalkboard-80/50">
+          <Menu.Item>
+            <button onClick={() => formatCode()} className={styles.button}>
+              <span>Format code</span>
+              <small>{editorShortcutMeta.formatCode.display}</small>
+            </button>
+          </Menu.Item>
+          {convertToVarEnabled && (
+            <Menu.Item>
+              <button
+                onClick={handleConvertToVarClick}
+                className={styles.button}
+              >
+                <span>Convert to Variable</span>
+                <small>{editorShortcutMeta.convertToVariable.display}</small>
+              </button>
+            </Menu.Item>
+          )}
+        </Menu.Items>
+      </div>
+    </Menu>
+  )
+}

src/components/CollapsiblePanel.module.css

@@ -1,15 +1,15 @@
 .panel {
-  @apply relative overflow-auto z-0;
-  @apply bg-chalkboard-20/40;
+  @apply relative z-0;
+  @apply bg-chalkboard-10/70 backdrop-blur-sm;
 }
 
 :global(.dark) .panel {
-  @apply bg-chalkboard-110/50;
+  @apply bg-chalkboard-110/50 backdrop-blur-0;
 }
 
 .header {
   @apply sticky top-0 z-10 cursor-pointer;
-  @apply flex items-center gap-2 w-full p-2;
+  @apply flex items-center justify-between gap-2 w-full p-2;
   @apply font-mono text-xs font-bold select-none text-chalkboard-90;
   @apply bg-chalkboard-20;
 }

src/components/CollapsiblePanel.tsx

@@ -8,6 +8,7 @@ export interface CollapsiblePanelProps
   title: string
   icon?: IconDefinition
   open?: boolean
+  menu?: React.ReactNode
   iconClassNames?: {
     bg?: string
     icon?: string
@@ -18,9 +19,11 @@ export const PanelHeader = ({
   title,
   icon,
   iconClassNames,
+  menu,
 }: CollapsiblePanelProps) => {
   return (
     <summary className={styles.header}>
+      <div className="flex gap-2 align-center flex-1">
         <ActionIcon
           icon={icon}
           bgClassName={
@@ -33,6 +36,10 @@ export const PanelHeader = ({
           }
         />
         {title}
+      </div>
+      <div className="group-open:opacity-100 opacity-0 group-open:pointer-events-auto pointer-events-none">
+        {menu}
+      </div>
     </summary>
   )
 }
@@ -43,6 +50,7 @@ export const CollapsiblePanel = ({
   children,
   className,
   iconClassNames,
+  menu,
   ...props
 }: CollapsiblePanelProps) => {
   return (
@@ -50,7 +58,12 @@ export const CollapsiblePanel = ({
       {...props}
       className={styles.panel + ' group ' + (className || '')}
     >
-      <PanelHeader title={title} icon={icon} iconClassNames={iconClassNames} />
+      <PanelHeader
+        title={title}
+        icon={icon}
+        iconClassNames={iconClassNames}
+        menu={menu}
+      />
       {children}
     </details>
   )

src/components/CommandBar.tsx

@@ -0,0 +1,290 @@
+import { Combobox, Dialog, Transition } from '@headlessui/react'
+import {
+  Dispatch,
+  Fragment,
+  SetStateAction,
+  createContext,
+  useState,
+} from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
+import { ActionIcon } from './ActionIcon'
+import { faSearch } from '@fortawesome/free-solid-svg-icons'
+import Fuse from 'fuse.js'
+import { Command, SubCommand } from '../lib/commands'
+import { useCommandsContext } from 'hooks/useCommandsContext'
+
+export type SortedCommand = {
+  item: Partial<Command | SubCommand> & { name: string }
+}
+
+export const CommandsContext = createContext(
+  {} as {
+    commands: Command[]
+    addCommands: (commands: Command[]) => void
+    removeCommands: (commands: Command[]) => void
+    commandBarOpen: boolean
+    setCommandBarOpen: Dispatch<SetStateAction<boolean>>
+  }
+)
+
+export const CommandBarProvider = ({
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  const [commands, internalSetCommands] = useState([] as Command[])
+  const [commandBarOpen, setCommandBarOpen] = useState(false)
+
+  const addCommands = (newCommands: Command[]) => {
+    internalSetCommands((prevCommands) => [...newCommands, ...prevCommands])
+  }
+  const removeCommands = (newCommands: Command[]) => {
+    internalSetCommands((prevCommands) =>
+      prevCommands.filter((command) => !newCommands.includes(command))
+    )
+  }
+
+  return (
+    <CommandsContext.Provider
+      value={{
+        commands,
+        addCommands,
+        removeCommands,
+        commandBarOpen,
+        setCommandBarOpen,
+      }}
+    >
+      {children}
+      <CommandBar />
+    </CommandsContext.Provider>
+  )
+}
+
+const CommandBar = () => {
+  const { commands, commandBarOpen, setCommandBarOpen } = useCommandsContext()
+  useHotkeys('meta+k', () => {
+    if (commands.length === 0) return
+    setCommandBarOpen(!commandBarOpen)
+  })
+
+  const [selectedCommand, setSelectedCommand] = useState<SortedCommand | null>(
+    null
+  )
+  // keep track of the current subcommand index
+  const [subCommandIndex, setSubCommandIndex] = useState<number>()
+  const [subCommandData, setSubCommandData] = useState<{
+    [key: string]: string
+  }>({})
+
+  // if the subcommand index is null, we're not in a subcommand
+  const inSubCommand =
+    selectedCommand &&
+    'meta' in selectedCommand.item &&
+    selectedCommand.item.meta?.args !== undefined &&
+    subCommandIndex !== undefined
+  const currentSubCommand =
+    inSubCommand && 'meta' in selectedCommand.item
+      ? selectedCommand.item.meta?.args[subCommandIndex]
+      : undefined
+
+  const [query, setQuery] = useState('')
+
+  const availableCommands =
+    inSubCommand && currentSubCommand
+      ? currentSubCommand.type === 'string'
+        ? query
+          ? [{ name: query }]
+          : currentSubCommand.options
+        : currentSubCommand.options
+      : commands
+
+  const fuse = new Fuse(availableCommands || [], {
+    keys: ['name', 'description'],
+  })
+
+  const filteredCommands = query
+    ? fuse.search(query)
+    : availableCommands?.map((c) => ({ item: c } as SortedCommand))
+
+  function clearState() {
+    setQuery('')
+    setCommandBarOpen(false)
+    setSelectedCommand(null)
+    setSubCommandIndex(undefined)
+    setSubCommandData({})
+  }
+
+  function handleCommandSelection(entry: SortedCommand) {
+    // If we have subcommands and have not yet gathered all the
+    // data required from them, set the selected command to the
+    // current command and increment the subcommand index
+    if (selectedCommand === null && 'meta' in entry.item && entry.item.meta) {
+      setSelectedCommand(entry)
+      setSubCommandIndex(0)
+      setQuery('')
+      return
+    }
+
+    const { item } = entry
+    // If we have just selected a command with no subcommands, run it
+    const isCommandWithoutSubcommands =
+      'callback' in item && !('meta' in item && item.meta)
+    if (isCommandWithoutSubcommands) {
+      if (item.callback === undefined) return
+      item.callback()
+      setCommandBarOpen(false)
+      return
+    }
+
+    // If we have subcommands and have not yet gathered all the
+    // data required from them, set the selected command to the
+    // current command and increment the subcommand index
+    if (
+      selectedCommand &&
+      subCommandIndex !== undefined &&
+      'meta' in selectedCommand.item
+    ) {
+      const subCommand = selectedCommand.item.meta?.args[subCommandIndex]
+
+      if (subCommand) {
+        const newSubCommandData = {
+          ...subCommandData,
+          [subCommand.name]: item.name,
+        }
+        const newSubCommandIndex = subCommandIndex + 1
+
+        // If we have subcommands and have gathered all the data required
+        // from them, run the command with the gathered data
+        if (
+          selectedCommand.item.callback &&
+          selectedCommand.item.meta?.args.length === newSubCommandIndex
+        ) {
+          selectedCommand.item.callback(newSubCommandData)
+          setCommandBarOpen(false)
+        } else {
+          // Otherwise, set the subcommand data and increment the subcommand index
+          setSubCommandData(newSubCommandData)
+          setSubCommandIndex(newSubCommandIndex)
+          setQuery('')
+        }
+      }
+    }
+  }
+
+  function getDisplayValue(command: Command) {
+    if (command.meta?.displayValue === undefined || !command.meta.args)
+      return command.name
+    return command.meta?.displayValue(
+      command.meta.args.map((c) =>
+        subCommandData[c.name] ? subCommandData[c.name] : `<${c.name}>`
+      )
+    )
+  }
+
+  return (
+    <Transition.Root
+      show={
+        commandBarOpen &&
+        availableCommands?.length !== undefined &&
+        availableCommands.length > 0
+      }
+      as={Fragment}
+      afterLeave={() => clearState()}
+    >
+      <Dialog
+        onClose={() => {
+          setCommandBarOpen(false)
+          clearState()
+        }}
+        className="fixed inset-0 z-40 overflow-y-auto p-4 pt-[25vh]"
+      >
+        <Transition.Child
+          enter="duration-100 ease-out"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="duration-75 ease-in"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+          as={Fragment}
+        >
+          <Dialog.Overlay className="fixed inset-0 bg-chalkboard-10/70 dark:bg-chalkboard-110/50" />
+        </Transition.Child>
+        <Transition.Child
+          enter="duration-100 ease-out"
+          enterFrom="opacity-0 scale-95"
+          enterTo="opacity-100 scale-100"
+          leave="duration-75 ease-in"
+          leaveFrom="opacity-100 scale-100"
+          leaveTo="opacity-0 scale-95"
+          as={Fragment}
+        >
+          <Combobox
+            value={selectedCommand}
+            onChange={handleCommandSelection}
+            className="rounded relative mx-auto p-2 bg-chalkboard-10 dark:bg-chalkboard-100 border dark:border-chalkboard-70 max-w-xl w-full shadow-lg"
+            as="div"
+          >
+            <div className="flex gap-2 items-center">
+              <ActionIcon icon={faSearch} size="xl" className="rounded-sm" />
+              <div>
+                {inSubCommand && (
+                  <p className="text-liquid-70 dark:text-liquid-30">
+                    {selectedCommand.item &&
+                      getDisplayValue(selectedCommand.item as Command)}
+                  </p>
+                )}
+                <Combobox.Input
+                  onChange={(event) => setQuery(event.target.value)}
+                  className="bg-transparent focus:outline-none w-full"
+                  onKeyDown={(event) => {
+                    if (event.metaKey && event.key === 'k')
+                      setCommandBarOpen(false)
+                    if (
+                      inSubCommand &&
+                      event.key === 'Backspace' &&
+                      !event.currentTarget.value
+                    ) {
+                      setSubCommandIndex(subCommandIndex - 1)
+                      setSelectedCommand(null)
+                    }
+                  }}
+                  displayValue={(command: SortedCommand) =>
+                    command !== null ? command.item.name : ''
+                  }
+                  placeholder={
+                    inSubCommand
+                      ? `Enter <${currentSubCommand?.name}>`
+                      : 'Search for a command'
+                  }
+                  value={query}
+                  autoCapitalize="off"
+                  autoComplete="off"
+                  autoCorrect="off"
+                  spellCheck="false"
+                />
+              </div>
+            </div>
+            <Combobox.Options static className="max-h-96 overflow-y-auto">
+              {filteredCommands?.map((commandResult) => (
+                <Combobox.Option
+                  key={commandResult.item.name}
+                  value={commandResult}
+                  className="my-2 first:mt-4 last:mb-4 ui-active:bg-liquid-10 dark:ui-active:bg-liquid-90 py-1 px-2"
+                >
+                  <p>{commandResult.item.name}</p>
+                  {(commandResult.item as SubCommand).description && (
+                    <p className="mt-0.5 text-liquid-70 dark:text-liquid-30 text-sm">
+                      {(commandResult.item as SubCommand).description}
+                    </p>
+                  )}
+                </Combobox.Option>
+              ))}
+            </Combobox.Options>
+          </Combobox>
+        </Transition.Child>
+      </Dialog>
+    </Transition.Root>
+  )
+}
+
+export default CommandBarProvider

src/components/DebugPanel.tsx

@@ -5,6 +5,7 @@ import { EngineCommand } from '../lang/std/engineConnection'
 import { useState } from 'react'
 import { ActionButton } from '../components/ActionButton'
 import { faCheck } from '@fortawesome/free-solid-svg-icons'
+import { isReducedMotion } from 'lang/util'
 
 type SketchModeCmd = Extract<
   Extract<EngineCommand, { type: 'modeling_cmd_req' }>['cmd'],
@@ -22,7 +23,7 @@ export const DebugPanel = ({ className, ...props }: CollapsiblePanelProps) => {
     y_axis: { x: 0, y: 1, z: 0 },
     distance_to_plane: 100,
     ortho: true,
-    animated: true, // TODO #273 get prefers reduced motion from CSS
+    animated: !isReducedMotion(),
   })
   if (!sketchModeCmd) return null
   return (

src/components/ExportButton.tsx

@@ -39,6 +39,7 @@ export const ExportButton = ({ children, className }: ExportButtonProps) => {
   const initialValues: OutputFormat = {
     type: defaultType,
     storage: 'embedded',
+    presentation: 'pretty',
   }
   const formik = useFormik({
     initialValues,
@@ -127,7 +128,9 @@ export const ExportButton = ({ children, className }: ExportButtonProps) => {
                   id="storage"
                   name="storage"
                   onChange={formik.handleChange}
-                  value={formik.values.storage}
+                  value={
+                    'storage' in formik.values ? formik.values.storage : ''
+                  }
                   className="bg-chalkboard-20 dark:bg-chalkboard-90 w-full"
                 >
                   {type === 'gltf' && (

src/components/GlobalStateProvider.tsx

@@ -0,0 +1,158 @@
+import { useMachine } from '@xstate/react'
+import { useNavigate } from 'react-router-dom'
+import { paths } from '../Router'
+import {
+  authCommandBarMeta,
+  authMachine,
+  TOKEN_PERSIST_KEY,
+} from '../machines/authMachine'
+import withBaseUrl from '../lib/withBaseURL'
+import React, { createContext, useEffect, useRef } from 'react'
+import useStateMachineCommands from '../hooks/useStateMachineCommands'
+import {
+  SETTINGS_PERSIST_KEY,
+  settingsCommandBarMeta,
+  settingsMachine,
+} from 'machines/settingsMachine'
+import { toast } from 'react-hot-toast'
+import { setThemeClass, Themes } from 'lib/theme'
+import {
+  AnyStateMachine,
+  ContextFrom,
+  InterpreterFrom,
+  Prop,
+  StateFrom,
+} from 'xstate'
+import { useCommandsContext } from 'hooks/useCommandsContext'
+
+type MachineContext<T extends AnyStateMachine> = {
+  state: StateFrom<T>
+  context: ContextFrom<T>
+  send: Prop<InterpreterFrom<T>, 'send'>
+}
+
+type GlobalContext = {
+  auth: MachineContext<typeof authMachine>
+  settings: MachineContext<typeof settingsMachine>
+}
+
+export const GlobalStateContext = createContext({} as GlobalContext)
+
+export const GlobalStateProvider = ({
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  const navigate = useNavigate()
+  const { commands } = useCommandsContext()
+
+  // Settings machine setup
+  const retrievedSettings = useRef(
+    localStorage?.getItem(SETTINGS_PERSIST_KEY) || '{}'
+  )
+  const persistedSettings = Object.assign(
+    settingsMachine.initialState.context,
+    JSON.parse(retrievedSettings.current) as Partial<
+      (typeof settingsMachine)['context']
+    >
+  )
+
+  const [settingsState, settingsSend] = useMachine(settingsMachine, {
+    context: persistedSettings,
+    actions: {
+      toastSuccess: (context, event) => {
+        const truncatedNewValue =
+          'data' in event && event.data instanceof Object
+            ? (context[Object.keys(event.data)[0] as keyof typeof context]
+                .toString()
+                .substring(0, 28) as any)
+            : undefined
+        toast.success(
+          event.type +
+            (truncatedNewValue
+              ? ` to "${truncatedNewValue}${
+                  truncatedNewValue.length === 28 ? '...' : ''
+                }"`
+              : '')
+        )
+      },
+    },
+  })
+
+  useStateMachineCommands({
+    state: settingsState,
+    send: settingsSend,
+    commands,
+    owner: 'settings',
+    commandBarMeta: settingsCommandBarMeta,
+  })
+
+  // Listen for changes to the system theme and update the app theme accordingly
+  // This is only done if the theme setting is set to 'system'.
+  // It can't be done in XState (in an invoked callback, for example)
+  // because there doesn't seem to be a good way to listen to
+  // events outside of the machine that also depend on the machine's context
+  useEffect(() => {
+    const matcher = window.matchMedia('(prefers-color-scheme: dark)')
+    const listener = (e: MediaQueryListEvent) => {
+      if (settingsState.context.theme !== 'system') return
+      setThemeClass(e.matches ? Themes.Dark : Themes.Light)
+    }
+
+    matcher.addEventListener('change', listener)
+    return () => matcher.removeEventListener('change', listener)
+  }, [settingsState.context])
+
+  // Auth machine setup
+  const [authState, authSend] = useMachine(authMachine, {
+    actions: {
+      goToSignInPage: () => {
+        navigate(paths.SIGN_IN)
+        logout()
+      },
+      goToIndexPage: () => {
+        if (window.location.pathname.includes(paths.SIGN_IN)) {
+          navigate(paths.INDEX)
+        }
+      },
+    },
+  })
+
+  useStateMachineCommands({
+    state: authState,
+    send: authSend,
+    commands,
+    commandBarMeta: authCommandBarMeta,
+    owner: 'auth',
+  })
+
+  return (
+    <GlobalStateContext.Provider
+      value={{
+        auth: {
+          state: authState,
+          context: authState.context,
+          send: authSend,
+        },
+        settings: {
+          state: settingsState,
+          context: settingsState.context,
+          send: settingsSend,
+        },
+      }}
+    >
+      {children}
+    </GlobalStateContext.Provider>
+  )
+}
+
+export default GlobalStateProvider
+
+export function logout() {
+  const url = withBaseUrl('/logout')
+  localStorage.removeItem(TOKEN_PERSIST_KEY)
+  return fetch(url, {
+    method: 'POST',
+    credentials: 'include',
+  })
+}

src/components/Logs.tsx

@@ -1,7 +1,8 @@
 import ReactJson from 'react-json-view'
 import { useEffect } from 'react'
-import { Themes, useStore } from '../useStore'
+import { useStore } from '../useStore'
 import { CollapsiblePanel, CollapsiblePanelProps } from './CollapsiblePanel'
+import { Themes } from '../lib/theme'
 
 const ReactJsonTypeHack = ReactJson as any
 

src/components/MemoryPanel.test.tsx

@@ -28,30 +28,20 @@ describe('processMemory', () => {
   show(theExtrude, theSketch)`
     const ast = parser_wasm(code)
     const programMemory = await enginelessExecutor(ast, {
-      root: {
-        log: {
-          type: 'userVal',
-          value: (a: any) => {
-            console.log('raw log', a)
-          },
-          __meta: [],
-        },
-      },
-      pendingMemory: {},
+      root: {},
     })
     const output = processMemory(programMemory)
     expect(output.myVar).toEqual(5)
-    expect(output.myFn).toEqual('__function__')
     expect(output.otherVar).toEqual(3)
     expect(output).toEqual({
       myVar: 5,
-      myFn: '__function__',
+      myFn: undefined,
       otherVar: 3,
       theExtrude: [],
       theSketch: [
-        { type: 'toPoint', to: [-3.35, 0.17], from: [0, 0] },
-        { type: 'toPoint', to: [0.98, 5.16], from: [-3.35, 0.17] },
-        { type: 'toPoint', to: [2.15, 4.32], from: [0.98, 5.16] },
+        { type: 'toPoint', to: [-3.35, 0.17], from: [0, 0], name: '' },
+        { type: 'toPoint', to: [0.98, 5.16], from: [-3.35, 0.17], name: '' },
+        { type: 'toPoint', to: [2.15, 4.32], from: [0.98, 5.16], name: '' },
       ],
     })
   })

src/components/MemoryPanel.tsx

@@ -1,8 +1,9 @@
 import ReactJson from 'react-json-view'
 import { CollapsiblePanel, CollapsiblePanelProps } from './CollapsiblePanel'
-import { Themes, useStore } from '../useStore'
+import { useStore } from '../useStore'
 import { useMemo } from 'react'
 import { ProgramMemory } from '../lang/executor'
+import { Themes } from '../lib/theme'
 
 interface MemoryPanelProps extends CollapsiblePanelProps {
   theme?: Exclude<Themes, Themes.System>

src/components/NetworkHealthIndicator.test.tsx

@@ -0,0 +1,51 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import UserSidebarMenu from './UserSidebarMenu'
+import { BrowserRouter } from 'react-router-dom'
+import { GlobalStateProvider } from './GlobalStateProvider'
+import CommandBarProvider from './CommandBar'
+import {
+  NETWORK_CONTENT,
+  NetworkHealthIndicator,
+} from './NetworkHealthIndicator'
+
+function TestWrap({ children }: { children: React.ReactNode }) {
+  // wrap in router and xState context
+  return (
+    <BrowserRouter>
+      <CommandBarProvider>
+        <GlobalStateProvider>{children}</GlobalStateProvider>
+      </CommandBarProvider>
+    </BrowserRouter>
+  )
+}
+
+describe('NetworkHealthIndicator tests', () => {
+  test('Renders the network indicator', () => {
+    render(
+      <TestWrap>
+        <NetworkHealthIndicator />
+      </TestWrap>
+    )
+
+    fireEvent.click(screen.getByTestId('network-toggle'))
+
+    expect(screen.getByTestId('network-good')).toHaveTextContent(
+      NETWORK_CONTENT.good
+    )
+  })
+
+  test('Responds to network changes', () => {
+    render(
+      <TestWrap>
+        <NetworkHealthIndicator />
+      </TestWrap>
+    )
+
+    fireEvent.offline(window)
+    fireEvent.click(screen.getByTestId('network-toggle'))
+
+    expect(screen.getByTestId('network-bad')).toHaveTextContent(
+      NETWORK_CONTENT.bad
+    )
+  })
+})

src/components/NetworkHealthIndicator.tsx

@@ -0,0 +1,112 @@
+import {
+  faCheck,
+  faExclamation,
+  faWifi,
+} from '@fortawesome/free-solid-svg-icons'
+import { Popover } from '@headlessui/react'
+import { useEffect, useState } from 'react'
+import { ActionIcon } from './ActionIcon'
+
+export const NETWORK_CONTENT = {
+  good: 'Network health is good',
+  bad: 'Network issue',
+}
+
+const NETWORK_MESSAGES = {
+  offline: 'You are offline',
+}
+
+export const NetworkHealthIndicator = () => {
+  const [networkIssues, setNetworkIssues] = useState<string[]>([])
+  const hasIssues = [...networkIssues.values()].length > 0
+
+  useEffect(() => {
+    const offlineListener = () =>
+      setNetworkIssues((issues) => {
+        return [
+          ...issues.filter((issue) => issue !== NETWORK_MESSAGES.offline),
+          NETWORK_MESSAGES.offline,
+        ]
+      })
+    window.addEventListener('offline', offlineListener)
+
+    const onlineListener = () =>
+      setNetworkIssues((issues) => {
+        return [...issues.filter((issue) => issue !== NETWORK_MESSAGES.offline)]
+      })
+    window.addEventListener('online', onlineListener)
+
+    return () => {
+      window.removeEventListener('offline', offlineListener)
+      window.removeEventListener('online', onlineListener)
+    }
+  }, [])
+
+  return (
+    <Popover className="relative">
+      <Popover.Button
+        className={
+          'p-0 border-none relative ' +
+          (hasIssues
+            ? 'focus-visible:outline-destroy-80'
+            : 'focus-visible:outline-succeed-80')
+        }
+        data-testid="network-toggle"
+      >
+        <span className="sr-only">Network Health</span>
+        <ActionIcon
+          icon={faWifi}
+          iconClassName={
+            hasIssues
+              ? 'text-destroy-80 dark:text-destroy-30'
+              : 'text-succeed-80 dark:text-succeed-30'
+          }
+          bgClassName={
+            hasIssues
+              ? 'hover:bg-destroy-10/50 hover:dark:bg-destroy-80/50 rounded'
+              : 'hover:bg-succeed-10/50 hover:dark:bg-succeed-80/50 rounded'
+          }
+        />
+      </Popover.Button>
+      <Popover.Panel className="absolute right-0 left-auto top-full mt-1 w-56 flex flex-col gap-1 divide-y divide-chalkboard-20 dark:divide-chalkboard-70 align-stretch py-2 bg-chalkboard-10 dark:bg-chalkboard-90 rounded shadow-lg border border-solid border-chalkboard-20/50 dark:border-chalkboard-80/50 text-sm">
+        {!hasIssues ? (
+          <span
+            className="flex items-center justify-center gap-1 px-4"
+            data-testid="network-good"
+          >
+            <ActionIcon
+              icon={faCheck}
+              bgClassName={'bg-succeed-10/50 dark:bg-succeed-80/50 rounded'}
+              iconClassName={'text-succeed-80 dark:text-succeed-30'}
+            />
+            {NETWORK_CONTENT.good}
+          </span>
+        ) : (
+          <ul className="divide-y divide-chalkboard-20 dark:divide-chalkboard-80">
+            <span
+              className="font-bold text-xs uppercase text-destroy-60 dark:text-destroy-50 px-4"
+              data-testid="network-bad"
+            >
+              {NETWORK_CONTENT.bad}
+              {networkIssues.length > 1 ? 's' : ''}
+            </span>
+            {networkIssues.map((issue) => (
+              <li
+                key={issue}
+                className="flex items-center gap-1 py-2 my-2 last:mb-0"
+              >
+                <ActionIcon
+                  icon={faExclamation}
+                  bgClassName={'bg-destroy-10/50 dark:bg-destroy-80/50 rounded'}
+                  iconClassName={'text-destroy-80 dark:text-destroy-30'}
+                  className="ml-4"
+                />
+                <p className="flex-1 mr-4">{issue}</p>
+              </li>
+            ))}
+          </ul>
+        )}
+      </Popover.Panel>
+    </Popover>
+  )
+}

src/components/ProjectSidebarMenu.tsx

@@ -1,10 +1,11 @@
-import { Popover } from '@headlessui/react'
+import { Popover, Transition } from '@headlessui/react'
 import { ActionButton } from './ActionButton'
 import { faHome } from '@fortawesome/free-solid-svg-icons'
 import { ProjectWithEntryPointMetadata, paths } from '../Router'
 import { isTauri } from '../lib/isTauri'
 import { Link } from 'react-router-dom'
 import { ExportButton } from './ExportButton'
+import { Fragment } from 'react'
 
 const ProjectSidebarMenu = ({
   project,
@@ -34,7 +35,7 @@ const ProjectSidebarMenu = ({
   ) : (
     <Popover className="relative">
       <Popover.Button
-        className="border-0 px-1 pr-2 pl-0 flex items-center gap-4 focus:outline-none focus:ring-2 focus:ring-energy-50"
+        className="border-0 p-0.5 pr-2 flex items-center gap-4 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-energy-50"
         data-testid="project-sidebar-toggle"
       >
         <img
@@ -46,9 +47,28 @@ const ProjectSidebarMenu = ({
           {isTauri() && project?.name ? project.name : 'KittyCAD Modeling App'}
         </span>
       </Popover.Button>
+      <Transition
+        enter="duration-200 ease-out"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="duration-100 ease-in"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+        as={Fragment}
+      >
         <Popover.Overlay className="fixed z-20 inset-0 bg-chalkboard-110/50" />
+      </Transition>
 
-      <Popover.Panel className="fixed inset-0 right-auto z-30 w-64 bg-chalkboard-10 dark:bg-chalkboard-100 border border-energy-100 shadow-md rounded-r-lg overflow-hidden">
+      <Transition
+        enter="duration-100 ease-out"
+        enterFrom="opacity-0 -translate-x-1/4"
+        enterTo="opacity-100 translate-x-0"
+        leave="duration-75 ease-in"
+        leaveFrom="opacity-100 translate-x-0"
+        leaveTo="opacity-0 -translate-x-4"
+        as={Fragment}
+      >
+        <Popover.Panel className="fixed inset-0 right-auto z-30 w-64 bg-chalkboard-10 dark:bg-chalkboard-100 border border-energy-100 dark:border-energy-100/50 shadow-md rounded-r-lg overflow-hidden">
           <div className="flex items-center gap-4 px-4 py-3 bg-energy-100">
             <img
               src="/kitt-8bit-winking.svg"
@@ -64,7 +84,10 @@ const ProjectSidebarMenu = ({
                 {project?.name ? project.name : 'KittyCAD Modeling App'}
               </p>
               {project?.entrypoint_metadata && (
-              <p className="m-0 text-energy-40 text-xs" data-testid="createdAt">
+                <p
+                  className="m-0 text-energy-40 text-xs"
+                  data-testid="createdAt"
+                >
                   Created{' '}
                   {project?.entrypoint_metadata.createdAt.toLocaleDateString()}
                 </p>
@@ -94,6 +117,7 @@ const ProjectSidebarMenu = ({
             )}
           </div>
         </Popover.Panel>
+      </Transition>
     </Popover>
   )
 }

src/components/SetVarNameModal.tsx

@@ -1,6 +1,9 @@
 import { Dialog, Transition } from '@headlessui/react'
 import { Fragment } from 'react'
 import { useCalc, CreateNewVariable } from './AvailableVarsHelpers'
+import { ActionButton } from './ActionButton'
+import { faPlus } from '@fortawesome/free-solid-svg-icons'
+import { toast } from 'react-hot-toast'
 
 export const SetVarNameModal = ({
   isOpen,
@@ -19,21 +22,23 @@ export const SetVarNameModal = ({
 
   return (
     <Transition appear show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={onReject}>
+      <Dialog
+        as="div"
+        className="fixed inset-0 z-40 overflow-y-auto p-4 pt-[25vh]"
+        onClose={onReject}
+      >
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
+          enterFrom="opacity-0 translate-y-4"
+          enterTo="opacity-100 translate-y-0"
+          leave="ease-in duration-75"
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-black bg-opacity-25" />
+          <Dialog.Overlay className="fixed inset-0 bg-chalkboard-10/70 dark:bg-chalkboard-110/50" />
         </Transition.Child>
 
-        <div className="fixed inset-0 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center">
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -43,43 +48,39 @@ export const SetVarNameModal = ({
           leaveFrom="opacity-100 scale-100"
           leaveTo="opacity-0 scale-95"
         >
-              <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
-                <Dialog.Title
-                  as="h3"
-                  className="text-lg font-medium leading-6 text-gray-900 capitalize"
+          <Dialog.Panel className="rounded relative mx-auto px-4 py-8 bg-chalkboard-10 dark:bg-chalkboard-100 border dark:border-chalkboard-70 max-w-xl w-full shadow-lg">
+            <form
+              onSubmit={(e) => {
+                e.preventDefault()
+                onResolve({
+                  variableName: newVariableName,
+                })
+                toast.success(`Added variable ${newVariableName}`)
+              }}
             >
-                  Set {valueName}
-                </Dialog.Title>
-
               <CreateNewVariable
                 setNewVariableName={setNewVariableName}
                 newVariableName={newVariableName}
                 isNewVariableNameUnique={isNewVariableNameUnique}
                 shouldCreateVariable={true}
-                  setShouldCreateVariable={() => {}}
+                showCheckbox={false}
               />
-                <div className="mt-4">
-                  <button
-                    type="button"
+              <div className="mt-8 flex justify-between">
+                <ActionButton
+                  Element="button"
+                  type="submit"
                   disabled={!isNewVariableNameUnique}
-                    className={`inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 ${
-                      !isNewVariableNameUnique
-                        ? 'opacity-50 cursor-not-allowed'
-                        : ''
-                    }`}
-                    onClick={() =>
-                      onResolve({
-                        variableName: newVariableName,
-                      })
-                    }
+                  icon={{ icon: faPlus }}
                 >
                   Add variable
-                  </button>
+                </ActionButton>
+                <ActionButton Element="button" onClick={() => onReject(false)}>
+                  Cancel
+                </ActionButton>
               </div>
+            </form>
           </Dialog.Panel>
         </Transition.Child>
-          </div>
-        </div>
       </Dialog>
     </Transition>
   )

src/components/Stream.tsx

@@ -7,31 +7,52 @@ import {
 } from 'react'
 import { v4 as uuidv4 } from 'uuid'
 import { useStore } from '../useStore'
-import { getNormalisedCoordinates } from '../lib/utils'
+import { getNormalisedCoordinates, roundOff } from '../lib/utils'
 import Loading from './Loading'
+import { cameraMouseDragGuards } from 'lib/cameraControls'
+import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
+import { CameraDragInteractionType_type } from '@kittycad/lib/dist/types/src/models'
+import { Models } from '@kittycad/lib'
+import { addStartSketch } from 'lang/modifyAst'
+import { addNewSketchLn } from 'lang/std/sketch'
 
 export const Stream = ({ className = '' }) => {
   const [isLoading, setIsLoading] = useState(true)
+  const [clickCoords, setClickCoords] = useState<{ x: number; y: number }>()
   const videoRef = useRef<HTMLVideoElement>(null)
   const {
     mediaStream,
     engineCommandManager,
-    setIsMouseDownInStream,
-    setCmdId,
+    setButtonDownInStream,
     didDragInStream,
     setDidDragInStream,
     streamDimensions,
+    isExecuting,
+    guiMode,
+    ast,
+    updateAst,
+    setGuiMode,
+    programMemory,
   } = useStore((s) => ({
     mediaStream: s.mediaStream,
     engineCommandManager: s.engineCommandManager,
-    isMouseDownInStream: s.isMouseDownInStream,
-    setIsMouseDownInStream: s.setIsMouseDownInStream,
+    setButtonDownInStream: s.setButtonDownInStream,
     fileId: s.fileId,
-    setCmdId: s.setCmdId,
     didDragInStream: s.didDragInStream,
     setDidDragInStream: s.setDidDragInStream,
     streamDimensions: s.streamDimensions,
+    isExecuting: s.isExecuting,
+    guiMode: s.guiMode,
+    ast: s.ast,
+    updateAst: s.updateAst,
+    setGuiMode: s.setGuiMode,
+    programMemory: s.programMemory,
   }))
+  const {
+    settings: {
+      context: { cameraControls },
+    },
+  } = useGlobalStateContext()
 
   useEffect(() => {
     if (
@@ -44,25 +65,52 @@ export const Stream = ({ className = '' }) => {
     videoRef.current.srcObject = mediaStream
   }, [mediaStream, engineCommandManager])
 
-  const handleMouseDown: MouseEventHandler<HTMLVideoElement> = ({
-    clientX,
-    clientY,
-    ctrlKey,
-  }) => {
+  const handleMouseDown: MouseEventHandler<HTMLVideoElement> = (e) => {
     if (!videoRef.current) return
     const { x, y } = getNormalisedCoordinates({
-      clientX,
-      clientY,
+      clientX: e.clientX,
+      clientY: e.clientY,
       el: videoRef.current,
       ...streamDimensions,
     })
-    console.log('click', x, y)
 
     const newId = uuidv4()
-    setCmdId(newId)
 
-    const interaction = ctrlKey ? 'pan' : 'rotate'
+    const interactionGuards = cameraMouseDragGuards[cameraControls]
+    let interaction: CameraDragInteractionType_type = 'rotate'
 
+    if (
+      interactionGuards.pan.callback(e) ||
+      interactionGuards.pan.lenientDragStartButton === e.button
+    ) {
+      interaction = 'pan'
+    } else if (
+      interactionGuards.rotate.callback(e) ||
+      interactionGuards.rotate.lenientDragStartButton === e.button
+    ) {
+      interaction = 'rotate'
+    } else if (
+      interactionGuards.zoom.dragCallback(e) ||
+      interactionGuards.zoom.lenientDragStartButton === e.button
+    ) {
+      interaction = 'zoom'
+    }
+
+    if (guiMode.mode === 'sketch' && guiMode.sketchMode === ('move' as any)) {
+      engineCommandManager?.sendSceneCommand({
+        type: 'modeling_cmd_req',
+        cmd: {
+          type: 'handle_mouse_drag_start',
+          window: { x, y },
+        },
+        cmd_id: newId,
+      })
+    } else if (
+      !(
+        guiMode.mode === 'sketch' &&
+        guiMode.sketchMode === ('sketch_line' as any)
+      )
+    ) {
       engineCommandManager?.sendSceneCommand({
         type: 'modeling_cmd_req',
         cmd: {
@@ -72,12 +120,15 @@ export const Stream = ({ className = '' }) => {
         },
         cmd_id: newId,
       })
+    }
 
-    setIsMouseDownInStream(true)
+    setButtonDownInStream(e.button)
+    setClickCoords({ x, y })
   }
 
   const handleScroll: WheelEventHandler<HTMLVideoElement> = (e) => {
-    e.preventDefault()
+    if (!cameraMouseDragGuards[cameraControls].zoom.scrollCallback(e)) return
+
     engineCommandManager?.sendSceneCommand({
       type: 'modeling_cmd_req',
       cmd: {
@@ -94,6 +145,7 @@ export const Stream = ({ className = '' }) => {
     ctrlKey,
   }) => {
     if (!videoRef.current) return
+    setButtonDownInStream(undefined)
     const { x, y } = getNormalisedCoordinates({
       clientX,
       clientY,
@@ -104,7 +156,7 @@ export const Stream = ({ className = '' }) => {
     const newCmdId = uuidv4()
     const interaction = ctrlKey ? 'pan' : 'rotate'
 
-    engineCommandManager?.sendSceneCommand({
+    const command: Models['WebSocketRequest_type'] = {
       type: 'modeling_cmd_req',
       cmd: {
         type: 'camera_drag_end',
@@ -112,9 +164,8 @@ export const Stream = ({ className = '' }) => {
         window: { x, y },
       },
       cmd_id: newCmdId,
-    })
+    }
 
-    setIsMouseDownInStream(false)
     if (!didDragInStream) {
       engineCommandManager?.sendSceneCommand({
         type: 'modeling_cmd_req',
@@ -126,7 +177,109 @@ export const Stream = ({ className = '' }) => {
         cmd_id: uuidv4(),
       })
     }
+
+    if (!didDragInStream && guiMode.mode === 'default') {
+      command.cmd = {
+        type: 'select_with_point',
+        selection_type: 'add',
+        selected_at_window: { x, y },
+      }
+    } else if (
+      (!didDragInStream &&
+        guiMode.mode === 'sketch' &&
+        ['move', 'select'].includes(guiMode.sketchMode)) ||
+      (guiMode.mode === 'sketch' &&
+        guiMode.sketchMode === ('sketch_line' as any))
+    ) {
+      command.cmd = {
+        type: 'mouse_click',
+        window: { x, y },
+      }
+    } else if (
+      guiMode.mode === 'sketch' &&
+      guiMode.sketchMode === ('move' as any)
+    ) {
+      command.cmd = {
+        type: 'handle_mouse_drag_end',
+        window: { x, y },
+      }
+    }
+    engineCommandManager?.sendSceneCommand(command).then(async ({ data }) => {
+      if (command.cmd.type !== 'mouse_click' || !ast) return
+      if (
+        !(
+          guiMode.mode === 'sketch' &&
+          guiMode.sketchMode === ('sketch_line' as any as 'line')
+        )
+      )
+        return
+
+      if (data?.data?.entities_modified?.length && guiMode.waitingFirstClick) {
+        const curve = await engineCommandManager?.sendSceneCommand({
+          type: 'modeling_cmd_req',
+          cmd_id: uuidv4(),
+          cmd: {
+            type: 'curve_get_control_points',
+            curve_id: data?.data?.entities_modified[0],
+          },
+        })
+        const coords: { x: number; y: number }[] =
+          curve.data.data.control_points
+        const _addStartSketch = addStartSketch(
+          ast,
+          [roundOff(coords[0].x), roundOff(coords[0].y)],
+          [
+            roundOff(coords[1].x - coords[0].x),
+            roundOff(coords[1].y - coords[0].y),
+          ]
+        )
+        const _modifiedAst = _addStartSketch.modifiedAst
+        const _pathToNode = _addStartSketch.pathToNode
+
+        setGuiMode({
+          ...guiMode,
+          pathToNode: _pathToNode,
+          waitingFirstClick: false,
+        })
+        updateAst(_modifiedAst)
+      } else if (
+        data?.data?.entities_modified?.length &&
+        !guiMode.waitingFirstClick
+      ) {
+        const curve = await engineCommandManager?.sendSceneCommand({
+          type: 'modeling_cmd_req',
+          cmd_id: uuidv4(),
+          cmd: {
+            type: 'curve_get_control_points',
+            curve_id: data?.data?.entities_modified[0],
+          },
+        })
+        const coords: { x: number; y: number }[] =
+          curve.data.data.control_points
+        const _modifiedAst = addNewSketchLn({
+          node: ast,
+          programMemory,
+          to: [coords[1].x, coords[1].y],
+          fnName: 'line',
+          pathToNode: guiMode.pathToNode,
+        }).modifiedAst
+        updateAst(_modifiedAst)
+      }
+    })
     setDidDragInStream(false)
+    setClickCoords(undefined)
+  }
+
+  const handleMouseMove: MouseEventHandler<HTMLVideoElement> = (e) => {
+    if (!clickCoords) return
+
+    const delta =
+      ((clickCoords.x - e.clientX) ** 2 + (clickCoords.y - e.clientY) ** 2) **
+      0.5
+
+    if (delta > 5 && !didDragInStream) {
+      setDidDragInStream(true)
+    }
   }
 
   return (
@@ -142,7 +295,9 @@ export const Stream = ({ className = '' }) => {
         onContextMenuCapture={(e) => e.preventDefault()}
         onWheel={handleScroll}
         onPlay={() => setIsLoading(false)}
-        className="w-full h-full"
+        onMouseMoveCapture={handleMouseMove}
+        className={`w-full h-full ${isExecuting && 'blur-md'}`}
+        style={{ transitionDuration: '200ms', transitionProperty: 'filter' }}
       />
       {isLoading && (
         <div className="text-center absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">

src/components/TextEditor.tsx

@@ -0,0 +1,265 @@
+import ReactCodeMirror, {
+  Extension,
+  ViewUpdate,
+  keymap,
+} from '@uiw/react-codemirror'
+import { FromServer, IntoServer } from 'editor/lsp/codec'
+import Server from '../editor/lsp/server'
+import Client from '../editor/lsp/client'
+import { TEST } from 'env'
+import { useCommandsContext } from 'hooks/useCommandsContext'
+import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
+import { useConvertToVariable } from 'hooks/useToolbarGuards'
+import { Themes } from 'lib/theme'
+import { useMemo } from 'react'
+import { linter, lintGutter } from '@codemirror/lint'
+import { Selections, useStore } from 'useStore'
+import { LanguageServerClient } from 'editor/lsp'
+import kclLanguage from 'editor/lsp/language'
+import { isTauri } from 'lib/isTauri'
+import { useParams } from 'react-router-dom'
+import { writeTextFile } from '@tauri-apps/api/fs'
+import { PROJECT_ENTRYPOINT } from 'lib/tauriFS'
+import { toast } from 'react-hot-toast'
+import {
+  EditorView,
+  addLineHighlight,
+  lineHighlightField,
+} from 'editor/highlightextension'
+import { isOverlap } from 'lib/utils'
+import { kclErrToDiagnostic } from 'lang/errors'
+import { CSSRuleObject } from 'tailwindcss/types/config'
+
+export const editorShortcutMeta = {
+  formatCode: {
+    codeMirror: 'Alt-Shift-f',
+    display: 'Alt + Shift + F',
+  },
+  convertToVariable: {
+    codeMirror: 'Ctrl-Shift-c',
+    display: 'Ctrl + Shift + C',
+  },
+}
+
+export const TextEditor = ({
+  theme,
+}: {
+  theme: Themes.Light | Themes.Dark
+}) => {
+  const pathParams = useParams()
+  const {
+    code,
+    defferedSetCode,
+    editorView,
+    engineCommandManager,
+    formatCode,
+    isLSPServerReady,
+    selectionRanges,
+    selectionRangeTypeMap,
+    setEditorView,
+    setIsLSPServerReady,
+    setSelectionRanges,
+    sourceRangeMap,
+  } = useStore((s) => ({
+    code: s.code,
+    defferedSetCode: s.defferedSetCode,
+    editorView: s.editorView,
+    engineCommandManager: s.engineCommandManager,
+    formatCode: s.formatCode,
+    isLSPServerReady: s.isLSPServerReady,
+    selectionRanges: s.selectionRanges,
+    selectionRangeTypeMap: s.selectionRangeTypeMap,
+    setEditorView: s.setEditorView,
+    setIsLSPServerReady: s.setIsLSPServerReady,
+    setSelectionRanges: s.setSelectionRanges,
+    sourceRangeMap: s.sourceRangeMap,
+  }))
+
+  const {
+    settings: {
+      context: { textWrapping },
+    },
+  } = useGlobalStateContext()
+  const { setCommandBarOpen } = useCommandsContext()
+  const { enable: convertEnabled, handleClick: convertCallback } =
+    useConvertToVariable()
+
+  // So this is a bit weird, we need to initialize the lsp server and client.
+  // But the server happens async so we break this into two parts.
+  // Below is the client and server promise.
+  const { lspClient } = useMemo(() => {
+    const intoServer: IntoServer = new IntoServer()
+    const fromServer: FromServer = FromServer.create()
+    const client = new Client(fromServer, intoServer)
+    if (!TEST) {
+      Server.initialize(intoServer, fromServer).then((lspServer) => {
+        lspServer.start()
+        setIsLSPServerReady(true)
+      })
+    }
+
+    const lspClient = new LanguageServerClient({ client })
+    return { lspClient }
+  }, [setIsLSPServerReady])
+
+  // Here we initialize the plugin which will start the client.
+  // When we have multi-file support the name of the file will be a dep of
+  // this use memo, as well as the directory structure, which I think is
+  // a good setup becuase it will restart the client but not the server :)
+  // We do not want to restart the server, its just wasteful.
+  const kclLSP = useMemo(() => {
+    let plugin = null
+    if (isLSPServerReady && !TEST) {
+      // Set up the lsp plugin.
+      const lsp = kclLanguage({
+        // When we have more than one file, we'll need to change this.
+        documentUri: `file:///we-just-have-one-file-for-now.kcl`,
+        workspaceFolders: null,
+        client: lspClient,
+      })
+
+      plugin = lsp
+    }
+    return plugin
+  }, [lspClient, isLSPServerReady])
+
+  // const onChange = React.useCallback((value: string, viewUpdate: ViewUpdate) => {
+  const onChange = (value: string, viewUpdate: ViewUpdate) => {
+    defferedSetCode(value)
+    if (isTauri() && pathParams.id) {
+      // Save the file to disk
+      // Note that PROJECT_ENTRYPOINT is hardcoded until we support multiple files
+      writeTextFile(pathParams.id + '/' + PROJECT_ENTRYPOINT, value).catch(
+        (err) => {
+          // TODO: add Sentry per GH issue #254 (https://github.com/KittyCAD/modeling-app/issues/254)
+          console.error('error saving file', err)
+          toast.error('Error saving file, please check file permissions')
+        }
+      )
+    }
+    if (editorView) {
+      editorView?.dispatch({ effects: addLineHighlight.of([0, 0]) })
+    }
+  } //, []);
+  const onUpdate = (viewUpdate: ViewUpdate) => {
+    if (!editorView) {
+      setEditorView(viewUpdate.view)
+    }
+    const ranges = viewUpdate.state.selection.ranges
+
+    const isChange =
+      ranges.length !== selectionRanges.codeBasedSelections.length ||
+      ranges.some(({ from, to }, i) => {
+        return (
+          from !== selectionRanges.codeBasedSelections[i].range[0] ||
+          to !== selectionRanges.codeBasedSelections[i].range[1]
+        )
+      })
+
+    if (!isChange) return
+    const codeBasedSelections: Selections['codeBasedSelections'] = ranges.map(
+      ({ from, to }) => {
+        if (selectionRangeTypeMap[to]) {
+          return {
+            type: selectionRangeTypeMap[to],
+            range: [from, to],
+          }
+        }
+        return {
+          type: 'default',
+          range: [from, to],
+        }
+      }
+    )
+    const idBasedSelections = codeBasedSelections
+      .map(({ type, range }) => {
+        const hasOverlap = Object.entries(sourceRangeMap).filter(
+          ([_, sourceRange]) => {
+            return isOverlap(sourceRange, range)
+          }
+        )
+        if (hasOverlap.length) {
+          return {
+            type,
+            id: hasOverlap[0][0],
+          }
+        }
+      })
+      .filter(Boolean) as any
+
+    engineCommandManager?.cusorsSelected({
+      otherSelections: [],
+      idBasedSelections,
+    })
+
+    setSelectionRanges({
+      otherSelections: [],
+      codeBasedSelections,
+    })
+  }
+
+  const editorExtensions = useMemo(() => {
+    const extensions = [
+      lineHighlightField,
+      keymap.of([
+        {
+          key: 'Meta-k',
+          run: () => {
+            setCommandBarOpen(true)
+            return false
+          },
+        },
+        {
+          key: editorShortcutMeta.formatCode.codeMirror,
+          run: () => {
+            formatCode()
+            return true
+          },
+        },
+        {
+          key: editorShortcutMeta.convertToVariable.codeMirror,
+          run: () => {
+            if (convertEnabled) {
+              convertCallback()
+              return true
+            }
+            return false
+          },
+        },
+      ]),
+    ] as Extension[]
+
+    if (kclLSP) extensions.push(kclLSP)
+
+    // These extensions have proven to mess with vitest
+    if (!TEST) {
+      extensions.push(
+        lintGutter(),
+        linter((_view) => {
+          return kclErrToDiagnostic(useStore.getState().kclErrors)
+        })
+      )
+      if (textWrapping === 'On') extensions.push(EditorView.lineWrapping)
+    }
+
+    return extensions
+  }, [kclLSP, textWrapping])
+
+  return (
+    <div
+      id="code-mirror-override"
+      className="full-height-subtract"
+      style={{ '--height-subtract': '4.25rem' } as CSSRuleObject}
+    >
+      <ReactCodeMirror
+        className="h-full"
+        value={code}
+        extensions={editorExtensions}
+        onChange={onChange}
+        onUpdate={onUpdate}
+        theme={theme}
+        onCreateEditor={(_editorView) => setEditorView(_editorView)}
+      />
+    </div>
+  )
+}

src/components/Toolbar/ConvertVariable.tsx

@@ -1,61 +0,0 @@
-import { useState, useEffect } from 'react'
-import { create } from 'react-modal-promise'
-import { useStore } from '../../useStore'
-import { isNodeSafeToReplace } from '../../lang/queryAst'
-import { SetVarNameModal } from '../SetVarNameModal'
-import { moveValueIntoNewVariable } from '../../lang/modifyAst'
-
-const getModalInfo = create(SetVarNameModal as any)
-
-export const ConvertToVariable = () => {
-  const { guiMode, selectionRanges, ast, programMemory, updateAst } = useStore(
-    (s) => ({
-      guiMode: s.guiMode,
-      ast: s.ast,
-      updateAst: s.updateAst,
-      selectionRanges: s.selectionRanges,
-      programMemory: s.programMemory,
-    })
-  )
-  const [enableAngLen, setEnableAngLen] = useState(false)
-  useEffect(() => {
-    if (!ast) return
-
-    const { isSafe, value } = isNodeSafeToReplace(
-      ast,
-      selectionRanges.codeBasedSelections?.[0]?.range || []
-    )
-    const canReplace = isSafe && value.type !== 'Identifier'
-    const isOnlyOneSelection = selectionRanges.codeBasedSelections.length === 1
-
-    const _enableHorz = canReplace && isOnlyOneSelection
-    setEnableAngLen(_enableHorz)
-  }, [guiMode, selectionRanges])
-
-  return (
-    <button
-      onClick={async () => {
-        if (!ast) return
-        try {
-          const { variableName } = await getModalInfo({
-            valueName: 'var',
-          } as any)
-
-          const { modifiedAst: _modifiedAst } = moveValueIntoNewVariable(
-            ast,
-            programMemory,
-            selectionRanges.codeBasedSelections[0].range,
-            variableName
-          )
-
-          updateAst(_modifiedAst)
-        } catch (e) {
-          console.log('e', e)
-        }
-      }}
-      disabled={!enableAngLen}
-    >
-      ConvertToVariable
-    </button>
-  )
-}

src/components/UserSidebarMenu.test.tsx

@@ -2,7 +2,8 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import UserSidebarMenu from './UserSidebarMenu'
 import { BrowserRouter } from 'react-router-dom'
 import { Models } from '@kittycad/lib'
-import { GlobalStateProvider } from '../hooks/useAuthMachine'
+import { GlobalStateProvider } from './GlobalStateProvider'
+import CommandBarProvider from './CommandBar'
 
 type User = Models['User_type']
 
@@ -94,7 +95,9 @@ function TestWrap({ children }: { children: React.ReactNode }) {
   // wrap in router and xState context
   return (
     <BrowserRouter>
+      <CommandBarProvider>
         <GlobalStateProvider>{children}</GlobalStateProvider>
+      </CommandBarProvider>
     </BrowserRouter>
   )
 }

src/components/UserSidebarMenu.tsx

@@ -1,13 +1,13 @@
-import { Popover } from '@headlessui/react'
+import { Popover, Transition } from '@headlessui/react'
 import { ActionButton } from './ActionButton'
 import { faBars, faGear, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
 import { useNavigate } from 'react-router-dom'
-import { useState } from 'react'
+import { Fragment, useState } from 'react'
 import { paths } from '../Router'
 import makeUrlPathRelative from '../lib/makeUrlPathRelative'
-import { useAuthMachine } from '../hooks/useAuthMachine'
 import { Models } from '@kittycad/lib'
+import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
 
 type User = Models['User_type']
 
@@ -15,7 +15,9 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
   const displayedName = getDisplayName(user)
   const [imageLoadFailed, setImageLoadFailed] = useState(false)
   const navigate = useNavigate()
-  const [_, send] = useAuthMachine()
+  const {
+    auth: { send },
+  } = useGlobalStateContext()
 
   // Fallback logic for displaying user's "name":
   // 1. user.name
@@ -59,9 +61,28 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
           Menu
         </ActionButton>
       )}
+      <Transition
+        enter="duration-200 ease-out"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="duration-100 ease-in"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+        as={Fragment}
+      >
         <Popover.Overlay className="fixed z-20 inset-0 bg-chalkboard-110/50" />
+      </Transition>
 
-      <Popover.Panel className="fixed inset-0 left-auto z-30 w-64 bg-chalkboard-10 dark:bg-chalkboard-100 border border-liquid-100 shadow-md rounded-l-lg overflow-hidden">
+      <Transition
+        enter="duration-100 ease-out"
+        enterFrom="opacity-0 translate-x-1/4"
+        enterTo="opacity-100 translate-x-0"
+        leave="duration-75 ease-in"
+        leaveFrom="opacity-100 translate-x-0"
+        leaveTo="opacity-0 translate-x-4"
+        as={Fragment}
+      >
+        <Popover.Panel className="fixed inset-0 left-auto z-30 w-64 bg-chalkboard-10 dark:bg-chalkboard-100 border border-liquid-100 dark:border-liquid-100/50 shadow-md rounded-l-lg overflow-hidden">
           {({ close }) => (
             <>
               {user && (
@@ -120,7 +141,7 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
                 </ActionButton>
                 <ActionButton
                   Element="button"
-                onClick={() => send('logout')}
+                  onClick={() => send('Log out')}
                   icon={{
                     icon: faSignOutAlt,
                     bgClassName: 'bg-destroy-80',
@@ -135,6 +156,7 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
             </>
           )}
         </Popover.Panel>
+      </Transition>
     </Popover>
   )
 }

src/editor/lsp/client.ts

@@ -0,0 +1,185 @@
+import * as jsrpc from 'json-rpc-2.0'
+import * as LSP from 'vscode-languageserver-protocol'
+
+import {
+  registerServerCapability,
+  unregisterServerCapability,
+} from './server-capability-registration'
+import { Codec, FromServer, IntoServer } from './codec'
+
+const client_capabilities: LSP.ClientCapabilities = {
+  textDocument: {
+    hover: {
+      dynamicRegistration: true,
+      contentFormat: ['plaintext', 'markdown'],
+    },
+    moniker: {},
+    synchronization: {
+      dynamicRegistration: true,
+      willSave: false,
+      didSave: false,
+      willSaveWaitUntil: false,
+    },
+    completion: {
+      dynamicRegistration: true,
+      completionItem: {
+        snippetSupport: false,
+        commitCharactersSupport: true,
+        documentationFormat: ['plaintext', 'markdown'],
+        deprecatedSupport: false,
+        preselectSupport: false,
+      },
+      contextSupport: false,
+    },
+    signatureHelp: {
+      dynamicRegistration: true,
+      signatureInformation: {
+        documentationFormat: ['plaintext', 'markdown'],
+      },
+    },
+    declaration: {
+      dynamicRegistration: true,
+      linkSupport: true,
+    },
+    definition: {
+      dynamicRegistration: true,
+      linkSupport: true,
+    },
+    typeDefinition: {
+      dynamicRegistration: true,
+      linkSupport: true,
+    },
+    implementation: {
+      dynamicRegistration: true,
+      linkSupport: true,
+    },
+  },
+  workspace: {
+    didChangeConfiguration: {
+      dynamicRegistration: true,
+    },
+  },
+}
+
+export default class Client extends jsrpc.JSONRPCServerAndClient {
+  afterInitializedHooks: (() => Promise<void>)[] = []
+  #fromServer: FromServer
+  private serverCapabilities: LSP.ServerCapabilities<any> = {}
+
+  constructor(fromServer: FromServer, intoServer: IntoServer) {
+    super(
+      new jsrpc.JSONRPCServer(),
+      new jsrpc.JSONRPCClient(async (json: jsrpc.JSONRPCRequest) => {
+        const encoded = Codec.encode(json)
+        intoServer.enqueue(encoded)
+        if (null != json.id) {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          const response = await fromServer.responses.get(json.id)!
+          this.client.receive(response as jsrpc.JSONRPCResponse)
+        }
+      })
+    )
+    this.#fromServer = fromServer
+  }
+
+  async start(): Promise<void> {
+    // process "window/logMessage": client <- server
+    this.addMethod(LSP.LogMessageNotification.type.method, (params) => {
+      const { type, message } = params as {
+        type: LSP.MessageType
+        message: string
+      }
+      let messageString = ''
+      switch (type) {
+        case LSP.MessageType.Error: {
+          messageString += '[error] '
+          break
+        }
+        case LSP.MessageType.Warning: {
+          messageString += ' [warn] '
+          break
+        }
+        case LSP.MessageType.Info: {
+          messageString += ' [info] '
+          break
+        }
+        case LSP.MessageType.Log: {
+          messageString += '  [log] '
+          break
+        }
+      }
+      messageString += message
+      // console.log(messageString)
+      return
+    })
+
+    // process "client/registerCapability": client <- server
+    this.addMethod(LSP.RegistrationRequest.type.method, (params) => {
+      // Register a server capability.
+      params.registrations.forEach(
+        (capabilityRegistration: LSP.Registration) => {
+          this.serverCapabilities = registerServerCapability(
+            this.serverCapabilities,
+            capabilityRegistration
+          )
+        }
+      )
+    })
+
+    // process "client/unregisterCapability": client <- server
+    this.addMethod(LSP.UnregistrationRequest.type.method, (params) => {
+      // Unregister a server capability.
+      params.unregisterations.forEach(
+        (capabilityUnregistration: LSP.Unregistration) => {
+          this.serverCapabilities = unregisterServerCapability(
+            this.serverCapabilities,
+            capabilityUnregistration
+          )
+        }
+      )
+    })
+
+    // request "initialize": client <-> server
+    const { capabilities } = await this.request(
+      LSP.InitializeRequest.type.method,
+      {
+        processId: null,
+        clientInfo: {
+          name: 'kcl-language-client',
+        },
+        capabilities: client_capabilities,
+        rootUri: null,
+      } as LSP.InitializeParams
+    )
+
+    this.serverCapabilities = capabilities
+
+    // notify "initialized": client --> server
+    this.notify(LSP.InitializedNotification.type.method, {})
+
+    await Promise.all(
+      this.afterInitializedHooks.map((f: () => Promise<void>) => f())
+    )
+    await Promise.all([this.processNotifications(), this.processRequests()])
+  }
+
+  getServerCapabilities(): LSP.ServerCapabilities<any> {
+    return this.serverCapabilities
+  }
+
+  async processNotifications(): Promise<void> {
+    for await (const notification of this.#fromServer.notifications) {
+      await this.receiveAndSend(notification)
+    }
+  }
+
+  async processRequests(): Promise<void> {
+    for await (const request of this.#fromServer.requests) {
+      await this.receiveAndSend(request)
+    }
+  }
+
+  pushAfterInitializeHook(...hooks: (() => Promise<void>)[]): void {
+    this.afterInitializedHooks.push(...hooks)
+  }
+}

src/editor/lsp/codec.ts

@@ -0,0 +1,53 @@
+import * as jsrpc from 'json-rpc-2.0'
+import * as vsrpc from 'vscode-jsonrpc'
+
+import Bytes from './codec/bytes'
+import StreamDemuxer from './codec/demuxer'
+import Headers from './codec/headers'
+import Queue from './codec/queue'
+import Tracer from './tracer'
+
+export const encoder = new TextEncoder()
+export const decoder = new TextDecoder()
+
+export class Codec {
+  static encode(
+    json: jsrpc.JSONRPCRequest | jsrpc.JSONRPCResponse
+  ): Uint8Array {
+    const message = JSON.stringify(json)
+    const delimited = Headers.add(message)
+    return Bytes.encode(delimited)
+  }
+
+  static decode<T>(data: Uint8Array): T {
+    const delimited = Bytes.decode(data)
+    const message = Headers.remove(delimited)
+    return JSON.parse(message) as T
+  }
+}
+
+// FIXME: tracing effiency
+export class IntoServer
+  extends Queue<Uint8Array>
+  implements AsyncGenerator<Uint8Array, never, void>
+{
+  enqueue(item: Uint8Array): void {
+    Tracer.client(Headers.remove(decoder.decode(item)))
+    super.enqueue(item)
+  }
+}
+
+export interface FromServer extends WritableStream<Uint8Array> {
+  readonly responses: {
+    get(key: number | string): null | Promise<vsrpc.ResponseMessage>
+  }
+  readonly notifications: AsyncGenerator<vsrpc.NotificationMessage, never, void>
+  readonly requests: AsyncGenerator<vsrpc.RequestMessage, never, void>
+}
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace FromServer {
+  export function create(): FromServer {
+    return new StreamDemuxer()
+  }
+}

src/editor/lsp/codec/bytes.ts

@@ -0,0 +1,27 @@
+import { encoder, decoder } from '../codec'
+
+export default class Bytes {
+  static encode(input: string): Uint8Array {
+    return encoder.encode(input)
+  }
+
+  static decode(input: Uint8Array): string {
+    return decoder.decode(input)
+  }
+
+  static append<
+    T extends { length: number; set(arr: T, offset: number): void }
+  >(constructor: { new (length: number): T }, ...arrays: T[]) {
+    let totalLength = 0
+    for (const arr of arrays) {
+      totalLength += arr.length
+    }
+    const result = new constructor(totalLength)
+    let offset = 0
+    for (const arr of arrays) {
+      result.set(arr, offset)
+      offset += arr.length
+    }
+    return result
+  }
+}

src/editor/lsp/codec/demuxer.ts

@@ -0,0 +1,82 @@
+import * as vsrpc from 'vscode-jsonrpc'
+
+import Bytes from './bytes'
+import PromiseMap from './map'
+import Queue from './queue'
+import Tracer from '../tracer'
+
+export default class StreamDemuxer extends Queue<Uint8Array> {
+  readonly responses: PromiseMap<number | string, vsrpc.ResponseMessage> =
+    new PromiseMap()
+  readonly notifications: Queue<vsrpc.NotificationMessage> =
+    new Queue<vsrpc.NotificationMessage>()
+  readonly requests: Queue<vsrpc.RequestMessage> =
+    new Queue<vsrpc.RequestMessage>()
+
+  readonly #start: Promise<void>
+
+  constructor() {
+    super()
+    this.#start = this.start()
+  }
+
+  private async start(): Promise<void> {
+    let contentLength: null | number = null
+    let buffer = new Uint8Array()
+
+    for await (const bytes of this) {
+      buffer = Bytes.append(Uint8Array, buffer, bytes)
+      while (buffer.length > 0) {
+        // check if the content length is known
+        if (null == contentLength) {
+          // if not, try to match the prefixed headers
+          const match = Bytes.decode(buffer).match(
+            /^Content-Length:\s*(\d+)\s*/
+          )
+          if (null == match) continue
+
+          // try to parse the content-length from the headers
+          const length = parseInt(match[1])
+          if (isNaN(length)) throw new Error('invalid content length')
+
+          // slice the headers since we now have the content length
+          buffer = buffer.slice(match[0].length)
+
+          // set the content length
+          contentLength = length
+        }
+
+        // if the buffer doesn't contain a full message; await another iteration
+        if (buffer.length < contentLength) continue
+
+        // Get just the slice of the buffer that is our content length.
+        const slice = buffer.slice(0, contentLength)
+
+        // decode buffer to a string
+        const delimited = Bytes.decode(slice)
+
+        // reset the buffer
+        buffer = buffer.slice(contentLength)
+        // reset the contentLength
+        contentLength = null
+
+        const message = JSON.parse(delimited) as vsrpc.Message
+        Tracer.server(message)
+
+        // demux the message stream
+        if (vsrpc.Message.isResponse(message) && null != message.id) {
+          this.responses.set(message.id, message)
+          continue
+        }
+        if (vsrpc.Message.isNotification(message)) {
+          this.notifications.enqueue(message)
+          continue
+        }
+        if (vsrpc.Message.isRequest(message)) {
+          this.requests.enqueue(message)
+          continue
+        }
+      }
+    }
+  }
+}

src/editor/lsp/codec/headers.ts

@@ -0,0 +1,9 @@
+export default class Headers {
+  static add(message: string): string {
+    return `Content-Length: ${message.length}\r\n\r\n${message}`
+  }
+
+  static remove(delimited: string): string {
+    return delimited.replace(/^Content-Length:\s*\d+\s*/, '')
+  }
+}

src/editor/lsp/codec/map.ts

@@ -0,0 +1,72 @@
+export default class PromiseMap<K, V extends { toString(): string }> {
+  #map: Map<K, PromiseMap.Entry<V>> = new Map()
+
+  get(key: K & { toString(): string }): null | Promise<V> {
+    let initialized: PromiseMap.Entry<V>
+    // if the entry doesn't exist, set it
+    if (!this.#map.has(key)) {
+      initialized = this.#set(key)
+    } else {
+      // otherwise return the entry
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      initialized = this.#map.get(key)!
+    }
+    // if the entry is a pending promise, return it
+    if (initialized.status === 'pending') {
+      return initialized.promise
+    } else {
+      // otherwise return null
+      return null
+    }
+  }
+
+  #set(key: K, value?: V): PromiseMap.Entry<V> {
+    if (this.#map.has(key)) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      return this.#map.get(key)!
+    }
+    // placeholder resolver for entry
+    let resolve = (item: V) => {
+      void item
+    }
+    // promise for entry (which assigns the resolver
+    const promise = new Promise<V>((resolver) => {
+      resolve = resolver
+    })
+    // the initialized entry
+    const initialized: PromiseMap.Entry<V> = {
+      status: 'pending',
+      resolve,
+      promise,
+    }
+    if (null != value) {
+      initialized.resolve(value)
+    }
+    // set the entry
+    this.#map.set(key, initialized)
+    return initialized
+  }
+
+  set(key: K & { toString(): string }, value: V): this {
+    const initialized = this.#set(key, value)
+    // if the promise is pending ...
+    if (initialized.status === 'pending') {
+      // ... set the entry status to resolved to free the promise
+      this.#map.set(key, { status: 'resolved' })
+      // ... and resolve the promise with the given value
+      initialized.resolve(value)
+    }
+    return this
+  }
+
+  get size(): number {
+    return this.#map.size
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace PromiseMap {
+  export type Entry<V> =
+    | { status: 'pending'; resolve: (item: V) => void; promise: Promise<V> }
+    | { status: 'resolved' }
+}

src/editor/lsp/codec/queue.ts

@@ -0,0 +1,113 @@
+export default class Queue<T>
+  implements WritableStream<T>, AsyncGenerator<T, never, void>
+{
+  readonly #promises: Promise<T>[] = []
+  readonly #resolvers: ((item: T) => void)[] = []
+  readonly #observers: ((item: T) => void)[] = []
+
+  #closed = false
+  #locked = false
+  readonly #stream: WritableStream<T>
+
+  static #__add<X>(
+    promises: Promise<X>[],
+    resolvers: ((item: X) => void)[]
+  ): void {
+    promises.push(
+      new Promise((resolve) => {
+        resolvers.push(resolve)
+      })
+    )
+  }
+
+  static #__enqueue<X>(
+    closed: boolean,
+    promises: Promise<X>[],
+    resolvers: ((item: X) => void)[],
+    item: X
+  ): void {
+    if (!closed) {
+      if (!resolvers.length) Queue.#__add(promises, resolvers)
+      const resolve = resolvers.shift()! // eslint-disable-line @typescript-eslint/no-non-null-assertion
+      resolve(item)
+    }
+  }
+
+  constructor() {
+    const closed = this.#closed
+    const promises = this.#promises
+    const resolvers = this.#resolvers
+    this.#stream = new WritableStream({
+      write(item: T): void {
+        Queue.#__enqueue(closed, promises, resolvers, item)
+      },
+    })
+  }
+
+  #add(): void {
+    return Queue.#__add(this.#promises, this.#resolvers)
+  }
+
+  enqueue(item: T): void {
+    return Queue.#__enqueue(this.#closed, this.#promises, this.#resolvers, item)
+  }
+
+  dequeue(): Promise<T> {
+    if (!this.#promises.length) this.#add()
+    const item = this.#promises.shift()! // eslint-disable-line @typescript-eslint/no-non-null-assertion
+    return item
+  }
+
+  isEmpty(): boolean {
+    return !this.#promises.length
+  }
+
+  isBlocked(): boolean {
+    return !!this.#resolvers.length
+  }
+
+  get length(): number {
+    return this.#promises.length - this.#resolvers.length
+  }
+
+  async next(): Promise<IteratorResult<T, never>> {
+    const done = false
+    const value = await this.dequeue()
+    for (const observer of this.#observers) {
+      observer(value)
+    }
+    return { done, value }
+  }
+
+  return(): Promise<IteratorResult<T, never>> {
+    return new Promise(() => {
+      // empty
+    })
+  }
+
+  throw(err: Error): Promise<IteratorResult<T, never>> {
+    return new Promise((_resolve, reject) => {
+      reject(err)
+    })
+  }
+
+  [Symbol.asyncIterator](): AsyncGenerator<T, never, void> {
+    return this
+  }
+
+  get locked(): boolean {
+    return this.#stream.locked
+  }
+
+  abort(reason?: Error): Promise<void> {
+    return this.#stream.abort(reason)
+  }
+
+  close(): Promise<void> {
+    return this.#stream.close()
+  }
+
+  getWriter(): WritableStreamDefaultWriter<T> {
+    return this.#stream.getWriter()
+  }
+}

src/editor/lsp/index.ts

@@ -0,0 +1,151 @@
+import type * as LSP from 'vscode-languageserver-protocol'
+import Client from './client'
+import { LanguageServerPlugin } from './plugin'
+import { SemanticToken, deserializeTokens } from './semantic_tokens'
+
+// https://microsoft.github.io/language-server-protocol/specifications/specification-current/
+
+// Client to server then server to client
+interface LSPRequestMap {
+  initialize: [LSP.InitializeParams, LSP.InitializeResult]
+  'textDocument/hover': [LSP.HoverParams, LSP.Hover]
+  'textDocument/completion': [
+    LSP.CompletionParams,
+    LSP.CompletionItem[] | LSP.CompletionList | null
+  ]
+  'textDocument/semanticTokens/full': [
+    LSP.SemanticTokensParams,
+    LSP.SemanticTokens
+  ]
+}
+
+// Client to server
+interface LSPNotifyMap {
+  initialized: LSP.InitializedParams
+  'textDocument/didChange': LSP.DidChangeTextDocumentParams
+  'textDocument/didOpen': LSP.DidOpenTextDocumentParams
+}
+
+// Server to client
+interface LSPEventMap {
+  'textDocument/publishDiagnostics': LSP.PublishDiagnosticsParams
+}
+
+export type Notification = {
+  [key in keyof LSPEventMap]: {
+    jsonrpc: '2.0'
+    id?: null | undefined
+    method: key
+    params: LSPEventMap[key]
+  }
+}[keyof LSPEventMap]
+
+export interface LanguageServerClientOptions {
+  client: Client
+}
+
+export class LanguageServerClient {
+  private client: Client
+
+  public ready: boolean
+
+  private plugins: LanguageServerPlugin[]
+
+  public initializePromise: Promise<void>
+
+  private isUpdatingSemanticTokens: boolean = false
+  private semanticTokens: SemanticToken[] = []
+
+  constructor(options: LanguageServerClientOptions) {
+    this.plugins = []
+    this.client = options.client
+
+    this.ready = false
+
+    this.initializePromise = this.initialize()
+  }
+
+  async initialize() {
+    // Start the client in the background.
+    this.client.start()
+
+    this.ready = true
+  }
+
+  getServerCapabilities(): LSP.ServerCapabilities<any> {
+    return this.client.getServerCapabilities()
+  }
+
+  close() {}
+
+  textDocumentDidOpen(params: LSP.DidOpenTextDocumentParams) {
+    this.notify('textDocument/didOpen', params)
+
+    this.updateSemanticTokens(params.textDocument.uri)
+  }
+
+  textDocumentDidChange(params: LSP.DidChangeTextDocumentParams) {
+    this.notify('textDocument/didChange', params)
+    this.updateSemanticTokens(params.textDocument.uri)
+  }
+
+  async updateSemanticTokens(uri: string) {
+    // Make sure we can only run, if we aren't already running.
+    if (!this.isUpdatingSemanticTokens) {
+      this.isUpdatingSemanticTokens = true
+
+      const result = await this.request('textDocument/semanticTokens/full', {
+        textDocument: {
+          uri,
+        },
+      })
+
+      this.semanticTokens = deserializeTokens(
+        result.data,
+        this.getServerCapabilities().semanticTokensProvider
+      )
+
+      this.isUpdatingSemanticTokens = false
+    }
+  }
+
+  getSemanticTokens(): SemanticToken[] {
+    return this.semanticTokens
+  }
+
+  async textDocumentHover(params: LSP.HoverParams) {
+    return await this.request('textDocument/hover', params)
+  }
+
+  async textDocumentCompletion(params: LSP.CompletionParams) {
+    return await this.request('textDocument/completion', params)
+  }
+
+  attachPlugin(plugin: LanguageServerPlugin) {
+    this.plugins.push(plugin)
+  }
+
+  detachPlugin(plugin: LanguageServerPlugin) {
+    const i = this.plugins.indexOf(plugin)
+    if (i === -1) return
+    this.plugins.splice(i, 1)
+  }
+
+  private request<K extends keyof LSPRequestMap>(
+    method: K,
+    params: LSPRequestMap[K][0]
+  ): Promise<LSPRequestMap[K][1]> {
+    return this.client.request(method, params) as Promise<LSPRequestMap[K][1]>
+  }
+
+  private notify<K extends keyof LSPNotifyMap>(
+    method: K,
+    params: LSPNotifyMap[K]
+  ): void {
+    return this.client.notify(method, params)
+  }
+
+  private processNotification(notification: Notification) {
+    for (const plugin of this.plugins) plugin.processNotification(notification)
+  }
+}

src/editor/lsp/language.ts

@@ -0,0 +1,36 @@
+// Code mirror language implementation for kcl.
+
+import {
+  Language,
+  defineLanguageFacet,
+  LanguageSupport,
+} from '@codemirror/language'
+import { LanguageServerClient } from '.'
+import { kclPlugin } from './plugin'
+import type * as LSP from 'vscode-languageserver-protocol'
+import { parser as jsParser } from '@lezer/javascript'
+
+const data = defineLanguageFacet({})
+
+export interface LanguageOptions {
+  workspaceFolders: LSP.WorkspaceFolder[] | null
+  documentUri: string
+  client: LanguageServerClient
+}
+
+export default function kclLanguage(options: LanguageOptions): LanguageSupport {
+  // For now let's use the javascript parser.
+  // It works really well and has good syntax highlighting.
+  // We can use our lsp for the rest.
+  const lang = new Language(data, jsParser, [], 'kcl')
+
+  // Create our supporting extension.
+  const kclLsp = kclPlugin({
+    documentUri: options.documentUri,
+    workspaceFolders: options.workspaceFolders,
+    allowHTMLContent: true,
+    client: options.client,
+  })
+
+  return new LanguageSupport(lang, [kclLsp])
+}

src/editor/lsp/parser.ts

@@ -0,0 +1,168 @@
+// Extends the codemirror Parser for kcl.
+
+import {
+  Parser,
+  Input,
+  TreeFragment,
+  PartialParse,
+  Tree,
+  NodeType,
+  NodeSet,
+} from '@lezer/common'
+import { LanguageServerClient } from '.'
+import { posToOffset } from './plugin'
+import { SemanticToken } from './semantic_tokens'
+import { DocInput } from '@codemirror/language'
+import { tags, styleTags } from '@lezer/highlight'
+
+export default class KclParser extends Parser {
+  private client: LanguageServerClient
+
+  constructor(client: LanguageServerClient) {
+    super()
+    this.client = client
+  }
+
+  createParse(
+    input: Input,
+    fragments: readonly TreeFragment[],
+    ranges: readonly { from: number; to: number }[]
+  ): PartialParse {
+    let parse: PartialParse = new Context(this, input, fragments, ranges)
+    return parse
+  }
+
+  getTokenTypes(): string[] {
+    return this.client.getServerCapabilities().semanticTokensProvider!.legend
+      .tokenTypes
+  }
+
+  getSemanticTokens(): SemanticToken[] {
+    return this.client.getSemanticTokens()
+  }
+}
+
+class Context implements PartialParse {
+  private parser: KclParser
+  private input: DocInput
+  private fragments: readonly TreeFragment[]
+  private ranges: readonly { from: number; to: number }[]
+
+  private nodeTypes: { [key: string]: NodeType }
+  stoppedAt: number = 0
+
+  private semanticTokens: SemanticToken[] = []
+  private currentLine: number = 0
+  private currentColumn: number = 0
+  private nodeSet: NodeSet
+
+  constructor(
+    /// The parser configuration used.
+    parser: KclParser,
+    input: Input,
+    fragments: readonly TreeFragment[],
+    ranges: readonly { from: number; to: number }[]
+  ) {
+    this.parser = parser
+    this.input = input as DocInput
+    this.fragments = fragments
+    this.ranges = ranges
+
+    // Iterate over the semantic token types and create a node type for each.
+    this.nodeTypes = {}
+    let nodeArray: NodeType[] = []
+    this.parser.getTokenTypes().forEach((tokenType, index) => {
+      const nodeType = NodeType.define({
+        id: index,
+        name: tokenType,
+        // props: [this.styleTags],
+      })
+      this.nodeTypes[tokenType] = nodeType
+      nodeArray.push(nodeType)
+    })
+
+    this.semanticTokens = this.parser.getSemanticTokens()
+    const styles = styleTags({
+      number: tags.number,
+      variable: tags.variableName,
+      operator: tags.operator,
+      keyword: tags.keyword,
+      string: tags.string,
+      comment: tags.comment,
+      function: tags.function(tags.variableName),
+    })
+    this.nodeSet = new NodeSet(nodeArray).extend(styles)
+  }
+
+  get parsedPos(): number {
+    return 0
+  }
+
+  advance(): Tree | null {
+    if (this.semanticTokens.length === 0) {
+      return new Tree(NodeType.none, [], [], 0)
+    }
+    const tree = this.createTree(this.semanticTokens[0], 0)
+    this.stoppedAt = this.input.doc.length
+    return tree
+  }
+
+  createTree(token: SemanticToken, index: number): Tree {
+    const changedLine = token.delta_line !== 0
+    this.currentLine += token.delta_line
+    if (changedLine) {
+      this.currentColumn = 0
+    }
+    this.currentColumn += token.delta_start
+
+    // Let's get our position relative to the start of the file.
+    let currentPosition = posToOffset(this.input.doc, {
+      line: this.currentLine,
+      character: this.currentColumn,
+    })
+
+    const nodeType = this.nodeSet.types[this.nodeTypes[token.token_type].id]
+
+    if (currentPosition === undefined) {
+      // This is bad and weird.
+      return new Tree(nodeType, [], [], token.length)
+    }
+
+    if (index >= this.semanticTokens.length - 1) {
+      // We have no children.
+      return new Tree(nodeType, [], [], token.length)
+    }
+
+    const nextIndex = index + 1
+    const nextToken = this.semanticTokens[nextIndex]
+    const changedLineNext = nextToken.delta_line !== 0
+    const nextLine = this.currentLine + nextToken.delta_line
+    const nextColumn = changedLineNext
+      ? nextToken.delta_start
+      : this.currentColumn + nextToken.delta_start
+    const nextPosition = posToOffset(this.input.doc, {
+      line: nextLine,
+      character: nextColumn,
+    })
+
+    if (nextPosition === undefined) {
+      // This is bad and weird.
+      return new Tree(nodeType, [], [], token.length)
+    }
+
+    // Let's get the
+
+    return new Tree(
+      nodeType,
+      [this.createTree(nextToken, nextIndex)],
+
+      // The positions (offsets relative to the start of this tree) of the children.
+      [nextPosition - currentPosition],
+      token.length
+    )
+  }
+
+  stopAt(pos: number) {
+    this.stoppedAt = pos
+  }
+}

src/editor/lsp/plugin.ts

@@ -0,0 +1,360 @@
+import { autocompletion, completeFromList } from '@codemirror/autocomplete'
+import { setDiagnostics } from '@codemirror/lint'
+import { Facet } from '@codemirror/state'
+import {
+  EditorView,
+  ViewPlugin,
+  Tooltip,
+  hoverTooltip,
+  tooltips,
+} from '@codemirror/view'
+import {
+  DiagnosticSeverity,
+  CompletionItemKind,
+  CompletionTriggerKind,
+} from 'vscode-languageserver-protocol'
+
+import type {
+  Completion,
+  CompletionContext,
+  CompletionResult,
+} from '@codemirror/autocomplete'
+import type { PublishDiagnosticsParams } from 'vscode-languageserver-protocol'
+import type { ViewUpdate, PluginValue } from '@codemirror/view'
+import type { Text } from '@codemirror/state'
+import type * as LSP from 'vscode-languageserver-protocol'
+import { LanguageServerClient, Notification } from '.'
+import { Marked } from '@ts-stack/markdown'
+
+const changesDelay = 500
+
+const CompletionItemKindMap = Object.fromEntries(
+  Object.entries(CompletionItemKind).map(([key, value]) => [value, key])
+) as Record<CompletionItemKind, string>
+
+const useLast = (values: readonly any[]) => values.reduce((_, v) => v, '')
+const documentUri = Facet.define<string, string>({ combine: useLast })
+const languageId = Facet.define<string, string>({ combine: useLast })
+const client = Facet.define<LanguageServerClient, LanguageServerClient>({
+  combine: useLast,
+})
+
+export interface LanguageServerOptions {
+  workspaceFolders: LSP.WorkspaceFolder[] | null
+  documentUri: string
+  allowHTMLContent: boolean
+  client: LanguageServerClient
+}
+
+export class LanguageServerPlugin implements PluginValue {
+  public client: LanguageServerClient
+
+  private documentUri: string
+  private languageId: string
+  private documentVersion: number
+
+  private changesTimeout: number
+
+  constructor(private view: EditorView, private allowHTMLContent: boolean) {
+    this.client = this.view.state.facet(client)
+    this.documentUri = this.view.state.facet(documentUri)
+    this.languageId = this.view.state.facet(languageId)
+    this.documentVersion = 0
+    this.changesTimeout = 0
+
+    this.client.attachPlugin(this)
+
+    this.initialize({
+      documentText: this.view.state.doc.toString(),
+    })
+  }
+
+  update({ docChanged }: ViewUpdate) {
+    if (!docChanged) return
+    if (this.changesTimeout) clearTimeout(this.changesTimeout)
+    this.changesTimeout = window.setTimeout(() => {
+      this.sendChange({
+        documentText: this.view.state.doc.toString(),
+      })
+    }, changesDelay)
+  }
+
+  destroy() {
+    this.client.detachPlugin(this)
+  }
+
+  async initialize({ documentText }: { documentText: string }) {
+    if (this.client.initializePromise) {
+      await this.client.initializePromise
+    }
+    this.client.textDocumentDidOpen({
+      textDocument: {
+        uri: this.documentUri,
+        languageId: this.languageId,
+        text: documentText,
+        version: this.documentVersion,
+      },
+    })
+  }
+
+  async sendChange({ documentText }: { documentText: string }) {
+    if (!this.client.ready) return
+    try {
+      await this.client.textDocumentDidChange({
+        textDocument: {
+          uri: this.documentUri,
+          version: this.documentVersion++,
+        },
+        contentChanges: [{ text: documentText }],
+      })
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  requestDiagnostics(view: EditorView) {
+    this.sendChange({ documentText: view.state.doc.toString() })
+  }
+
+  async requestHoverTooltip(
+    view: EditorView,
+    { line, character }: { line: number; character: number }
+  ): Promise<Tooltip | null> {
+    if (
+      !this.client.ready ||
+      !this.client.getServerCapabilities().hoverProvider
+    )
+      return null
+
+    this.sendChange({ documentText: view.state.doc.toString() })
+    const result = await this.client.textDocumentHover({
+      textDocument: { uri: this.documentUri },
+      position: { line, character },
+    })
+    if (!result) return null
+    const { contents, range } = result
+    let pos = posToOffset(view.state.doc, { line, character })!
+    let end: number | undefined
+    if (range) {
+      pos = posToOffset(view.state.doc, range.start)!
+      end = posToOffset(view.state.doc, range.end)
+    }
+    if (pos === null) return null
+    const dom = document.createElement('div')
+    dom.classList.add('documentation')
+    if (this.allowHTMLContent) dom.innerHTML = formatContents(contents)
+    else dom.textContent = formatContents(contents)
+    return { pos, end, create: (view) => ({ dom }), above: true }
+  }
+
+  async requestCompletion(
+    context: CompletionContext,
+    { line, character }: { line: number; character: number },
+    {
+      triggerKind,
+      triggerCharacter,
+    }: {
+      triggerKind: CompletionTriggerKind
+      triggerCharacter: string | undefined
+    }
+  ): Promise<CompletionResult | null> {
+    if (
+      !this.client.ready ||
+      !this.client.getServerCapabilities().completionProvider
+    )
+      return null
+
+    this.sendChange({
+      documentText: context.state.doc.toString(),
+    })
+
+    const result = await this.client.textDocumentCompletion({
+      textDocument: { uri: this.documentUri },
+      position: { line, character },
+      context: {
+        triggerKind,
+        triggerCharacter,
+      },
+    })
+
+    if (!result) return null
+
+    const items = 'items' in result ? result.items : result
+
+    let options = items.map(
+      ({
+        detail,
+        label,
+        labelDetails,
+        kind,
+        textEdit,
+        documentation,
+        deprecated,
+        insertText,
+        insertTextFormat,
+        sortText,
+        filterText,
+      }) => {
+        const completion: Completion & {
+          filterText: string
+          sortText?: string
+          apply: string
+        } = {
+          label,
+          detail: labelDetails ? labelDetails.detail : detail,
+          apply: label,
+          type: kind && CompletionItemKindMap[kind].toLowerCase(),
+          sortText: sortText ?? label,
+          filterText: filterText ?? label,
+        }
+        if (documentation) {
+          completion.info = () => {
+            const htmlString = formatContents(documentation)
+            const htmlNode = document.createElement('div')
+            htmlNode.style.display = 'contents'
+            htmlNode.innerHTML = htmlString
+            return { dom: htmlNode }
+          }
+        }
+
+        return completion
+      }
+    )
+
+    return completeFromList(options)(context)
+  }
+
+  processNotification(notification: Notification) {
+    try {
+      switch (notification.method) {
+        case 'textDocument/publishDiagnostics':
+          this.processDiagnostics(notification.params)
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  processDiagnostics(params: PublishDiagnosticsParams) {
+    if (params.uri !== this.documentUri) return
+
+    const diagnostics = params.diagnostics
+      .map(({ range, message, severity }) => ({
+        from: posToOffset(this.view.state.doc, range.start)!,
+        to: posToOffset(this.view.state.doc, range.end)!,
+        severity: (
+          {
+            [DiagnosticSeverity.Error]: 'error',
+            [DiagnosticSeverity.Warning]: 'warning',
+            [DiagnosticSeverity.Information]: 'info',
+            [DiagnosticSeverity.Hint]: 'info',
+          } as const
+        )[severity!],
+        message,
+      }))
+      .filter(
+        ({ from, to }) =>
+          from !== null && to !== null && from !== undefined && to !== undefined
+      )
+      .sort((a, b) => {
+        switch (true) {
+          case a.from < b.from:
+            return -1
+          case a.from > b.from:
+            return 1
+        }
+        return 0
+      })
+
+    this.view.dispatch(setDiagnostics(this.view.state, diagnostics))
+  }
+}
+
+export function kclPlugin(options: LanguageServerOptions) {
+  let plugin: LanguageServerPlugin | null = null
+
+  return [
+    client.of(options.client),
+    documentUri.of(options.documentUri),
+    languageId.of('kcl'),
+    ViewPlugin.define(
+      (view) =>
+        (plugin = new LanguageServerPlugin(view, options.allowHTMLContent))
+    ),
+    hoverTooltip(
+      (view, pos) =>
+        plugin?.requestHoverTooltip(view, offsetToPos(view.state.doc, pos)) ??
+        null
+    ),
+    tooltips({
+      position: 'absolute',
+    }),
+    autocompletion({
+      override: [
+        async (context) => {
+          if (plugin == null) return null
+
+          const { state, pos, explicit } = context
+          const line = state.doc.lineAt(pos)
+          let trigKind: CompletionTriggerKind = CompletionTriggerKind.Invoked
+          let trigChar: string | undefined
+          if (
+            !explicit &&
+            plugin.client
+              .getServerCapabilities()
+              .completionProvider?.triggerCharacters?.includes(
+                line.text[pos - line.from - 1]
+              )
+          ) {
+            trigKind = CompletionTriggerKind.TriggerCharacter
+            trigChar = line.text[pos - line.from - 1]
+          }
+          if (
+            trigKind === CompletionTriggerKind.Invoked &&
+            !context.matchBefore(/\w+$/)
+          ) {
+            return null
+          }
+          return await plugin.requestCompletion(
+            context,
+            offsetToPos(state.doc, pos),
+            {
+              triggerKind: trigKind,
+              triggerCharacter: trigChar,
+            }
+          )
+        },
+      ],
+    }),
+  ]
+}
+
+export function posToOffset(
+  doc: Text,
+  pos: { line: number; character: number }
+): number | undefined {
+  if (pos.line >= doc.lines) return
+  const offset = doc.line(pos.line + 1).from + pos.character
+  if (offset > doc.length) return
+  return offset
+}
+
+function offsetToPos(doc: Text, offset: number) {
+  const line = doc.lineAt(offset)
+  return {
+    line: line.number - 1,
+    character: offset - line.from,
+  }
+}
+
+function formatContents(
+  contents: LSP.MarkupContent | LSP.MarkedString | LSP.MarkedString[]
+): string {
+  if (Array.isArray(contents)) {
+    return contents.map((c) => formatContents(c) + '\n\n').join('')
+  } else if (typeof contents === 'string') {
+    return Marked.parse(contents)
+  } else {
+    return Marked.parse(contents.value)
+  }
+}

src/editor/lsp/semantic_tokens.ts

@@ -0,0 +1,51 @@
+import type * as LSP from 'vscode-languageserver-protocol'
+
+export class SemanticToken {
+  delta_line: number
+  delta_start: number
+  length: number
+  token_type: string
+  token_modifiers_bitset: string
+
+  constructor(
+    delta_line = 0,
+    delta_start = 0,
+    length = 0,
+    token_type = '',
+    token_modifiers_bitset = ''
+  ) {
+    this.delta_line = delta_line
+    this.delta_start = delta_start
+    this.length = length
+    this.token_type = token_type
+    this.token_modifiers_bitset = token_modifiers_bitset
+  }
+}
+
+export function deserializeTokens(
+  data: number[],
+  semanticTokensProvider?: LSP.SemanticTokensOptions
+): SemanticToken[] {
+  if (!semanticTokensProvider) {
+    return []
+  }
+  // Check if data length is divisible by 5
+  if (data.length % 5 !== 0) {
+    throw new Error('Length is not divisible by 5')
+  }
+
+  const tokens = []
+  for (let i = 0; i < data.length; i += 5) {
+    tokens.push(
+      new SemanticToken(
+        data[i],
+        data[i + 1],
+        data[i + 2],
+        semanticTokensProvider.legend.tokenTypes[data[i + 3]],
+        semanticTokensProvider.legend.tokenModifiers[data[i + 4]]
+      )
+    )
+  }
+
+  return tokens
+}

src/editor/lsp/server-capability-registration.ts

@@ -0,0 +1,80 @@
+import {
+  Registration,
+  ServerCapabilities,
+  Unregistration,
+} from 'vscode-languageserver-protocol'
+
+interface IFlexibleServerCapabilities extends ServerCapabilities {
+  [key: string]: any
+}
+
+interface IMethodServerCapabilityProviderDictionary {
+  [key: string]: string
+}
+
+const ServerCapabilitiesProviders: IMethodServerCapabilityProviderDictionary = {
+  'textDocument/hover': 'hoverProvider',
+  'textDocument/completion': 'completionProvider',
+  'textDocument/signatureHelp': 'signatureHelpProvider',
+  'textDocument/definition': 'definitionProvider',
+  'textDocument/typeDefinition': 'typeDefinitionProvider',
+  'textDocument/implementation': 'implementationProvider',
+  'textDocument/references': 'referencesProvider',
+  'textDocument/documentHighlight': 'documentHighlightProvider',
+  'textDocument/documentSymbol': 'documentSymbolProvider',
+  'textDocument/workspaceSymbol': 'workspaceSymbolProvider',
+  'textDocument/codeAction': 'codeActionProvider',
+  'textDocument/codeLens': 'codeLensProvider',
+  'textDocument/documentFormatting': 'documentFormattingProvider',
+  'textDocument/documentRangeFormatting': 'documentRangeFormattingProvider',
+  'textDocument/documentOnTypeFormatting': 'documentOnTypeFormattingProvider',
+  'textDocument/rename': 'renameProvider',
+  'textDocument/documentLink': 'documentLinkProvider',
+  'textDocument/color': 'colorProvider',
+  'textDocument/foldingRange': 'foldingRangeProvider',
+  'textDocument/declaration': 'declarationProvider',
+  'textDocument/executeCommand': 'executeCommandProvider',
+}
+
+function registerServerCapability(
+  serverCapabilities: ServerCapabilities,
+  registration: Registration
+): ServerCapabilities {
+  const serverCapabilitiesCopy = JSON.parse(
+    JSON.stringify(serverCapabilities)
+  ) as IFlexibleServerCapabilities
+  const { method, registerOptions } = registration
+  const providerName = ServerCapabilitiesProviders[method]
+
+  if (providerName) {
+    if (!registerOptions) {
+      serverCapabilitiesCopy[providerName] = true
+    } else {
+      serverCapabilitiesCopy[providerName] = Object.assign(
+        {},
+        JSON.parse(JSON.stringify(registerOptions))
+      )
+    }
+  } else {
+    throw new Error('Could not register server capability.')
+  }
+
+  return serverCapabilitiesCopy
+}
+
+function unregisterServerCapability(
+  serverCapabilities: ServerCapabilities,
+  unregistration: Unregistration
+): ServerCapabilities {
+  const serverCapabilitiesCopy = JSON.parse(
+    JSON.stringify(serverCapabilities)
+  ) as IFlexibleServerCapabilities
+  const { method } = unregistration
+  const providerName = ServerCapabilitiesProviders[method]
+
+  delete serverCapabilitiesCopy[providerName]
+
+  return serverCapabilitiesCopy
+}
+
+export { registerServerCapability, unregisterServerCapability }

src/editor/lsp/server.ts

@@ -0,0 +1,42 @@
+import init, {
+  InitOutput,
+  lsp_run,
+  ServerConfig,
+} from '../../wasm-lib/pkg/wasm_lib'
+import { FromServer, IntoServer } from './codec'
+
+let server: null | Server
+
+export default class Server {
+  readonly initOutput: InitOutput
+  readonly #intoServer: IntoServer
+  readonly #fromServer: FromServer
+
+  private constructor(
+    initOutput: InitOutput,
+    intoServer: IntoServer,
+    fromServer: FromServer
+  ) {
+    this.initOutput = initOutput
+    this.#intoServer = intoServer
+    this.#fromServer = fromServer
+  }
+
+  static async initialize(
+    intoServer: IntoServer,
+    fromServer: FromServer
+  ): Promise<Server> {
+    if (null == server) {
+      const initOutput = await init()
+      server = new Server(initOutput, intoServer, fromServer)
+    } else {
+      console.warn('Server already initialized; ignoring')
+    }
+    return server
+  }
+
+  async start(): Promise<void> {
+    const config = new ServerConfig(this.#intoServer, this.#fromServer)
+    await lsp_run(config)
+  }
+}

src/editor/lsp/tracer.ts

@@ -0,0 +1,21 @@
+import { Message } from 'vscode-languageserver-protocol'
+
+const env = import.meta.env.MODE
+
+export default class Tracer {
+  static client(message: string): void {
+    // These are really noisy, so we have a special env var for them.
+    if (env === 'lsp_tracing') {
+      console.log('lsp client message', message)
+    }
+  }
+
+  static server(input: string | Message): void {
+    // These are really noisy, so we have a special env var for them.
+    if (env === 'lsp_tracing') {
+      const message: string =
+        typeof input === 'string' ? input : JSON.stringify(input)
+      console.log('lsp server message', message)
+    }
+  }
+}

src/env.ts

@@ -8,4 +8,7 @@ export const VITE_KC_API_WS_MODELING_URL = import.meta.env
   .VITE_KC_API_WS_MODELING_URL
 export const VITE_KC_API_BASE_URL = import.meta.env.VITE_KC_API_BASE_URL
 export const VITE_KC_SITE_BASE_URL = import.meta.env.VITE_KC_SITE_BASE_URL
+export const VITE_KC_CONNECTION_TIMEOUT_MS = import.meta.env
+  .VITE_KC_CONNECTION_TIMEOUT_MS
+export const VITE_KC_SENTRY_DSN = import.meta.env.VITE_KC_SENTRY_DSN
 export const TEST = import.meta.env.TEST

src/hooks/useAppMode.ts

@@ -0,0 +1,243 @@
+// needed somewhere to dump this logic,
+// Once we have xState this should be removed
+
+import { useStore, Selections } from 'useStore'
+import { useEffect, useState } from 'react'
+import { v4 as uuidv4 } from 'uuid'
+import { ArtifactMap, EngineCommandManager } from 'lang/std/engineConnection'
+import { Models } from '@kittycad/lib/dist/types/src'
+import { isReducedMotion } from 'lang/util'
+import { isOverlap } from 'lib/utils'
+
+interface DefaultPlanes {
+  xy: string
+  yz: string
+  xz: string
+}
+
+export function useAppMode() {
+  const {
+    guiMode,
+    setGuiMode,
+    selectionRanges,
+    engineCommandManager,
+    selectionRangeTypeMap,
+  } = useStore((s) => ({
+    guiMode: s.guiMode,
+    setGuiMode: s.setGuiMode,
+    selectionRanges: s.selectionRanges,
+    engineCommandManager: s.engineCommandManager,
+    selectionRangeTypeMap: s.selectionRangeTypeMap,
+  }))
+  const [defaultPlanes, setDefaultPlanes] = useState<DefaultPlanes | null>(null)
+  useEffect(() => {
+    if (
+      guiMode.mode === 'sketch' &&
+      guiMode.sketchMode === 'selectFace' &&
+      engineCommandManager
+    ) {
+      if (!defaultPlanes) {
+        const xy = createPlane(engineCommandManager, {
+          x_axis: { x: 1, y: 0, z: 0 },
+          y_axis: { x: 0, y: 1, z: 0 },
+          color: { r: 0.7, g: 0.28, b: 0.28, a: 0.4 },
+        })
+        const yz = createPlane(engineCommandManager, {
+          x_axis: { x: 0, y: 1, z: 0 },
+          y_axis: { x: 0, y: 0, z: 1 },
+          color: { r: 0.28, g: 0.7, b: 0.28, a: 0.4 },
+        })
+        const xz = createPlane(engineCommandManager, {
+          x_axis: { x: 1, y: 0, z: 0 },
+          y_axis: { x: 0, y: 0, z: 1 },
+          color: { r: 0.28, g: 0.28, b: 0.7, a: 0.4 },
+        })
+        setDefaultPlanes({ xy, yz, xz })
+      } else {
+        hideDefaultPlanes(engineCommandManager, defaultPlanes)
+      }
+    }
+    if (guiMode.mode !== 'sketch' && defaultPlanes) {
+      Object.values(defaultPlanes).forEach((planeId) => {
+        engineCommandManager?.sendSceneCommand({
+          type: 'modeling_cmd_req',
+          cmd_id: uuidv4(),
+          cmd: {
+            type: 'object_visible',
+            object_id: planeId,
+            hidden: true,
+          },
+        })
+      })
+    } else if (guiMode.mode === 'default') {
+      const pathId =
+        engineCommandManager &&
+        isCursorInSketchCommandRange(
+          engineCommandManager.artifactMap,
+          selectionRanges
+        )
+      if (pathId) {
+        setGuiMode({
+          mode: 'canEditSketch',
+          rotation: [0, 0, 0, 1],
+          position: [0, 0, 0],
+          pathToNode: [],
+          pathId,
+        })
+      }
+    } else if (guiMode.mode === 'canEditSketch') {
+      if (
+        !engineCommandManager ||
+        !isCursorInSketchCommandRange(
+          engineCommandManager.artifactMap,
+          selectionRanges
+        )
+      ) {
+        setGuiMode({
+          mode: 'default',
+        })
+      }
+    }
+  }, [
+    guiMode,
+    guiMode.mode,
+    engineCommandManager,
+    selectionRanges,
+    selectionRangeTypeMap,
+  ])
+
+  useEffect(() => {
+    const unSub = engineCommandManager?.subscribeTo({
+      event: 'select_with_point',
+      callback: async ({ data }) => {
+        if (!data.entity_id) return
+        if (!defaultPlanes) return
+        if (!Object.values(defaultPlanes || {}).includes(data.entity_id)) {
+          // user clicked something else in the scene
+          return
+        }
+        const sketchModeResponse = await engineCommandManager?.sendSceneCommand(
+          {
+            type: 'modeling_cmd_req',
+            cmd_id: uuidv4(),
+            cmd: {
+              type: 'sketch_mode_enable',
+              plane_id: data.entity_id,
+              ortho: true,
+              animated: !isReducedMotion(),
+            },
+          }
+        )
+        hideDefaultPlanes(engineCommandManager, defaultPlanes)
+        const sketchUuid = uuidv4()
+        const proms: any[] = []
+        proms.push(
+          engineCommandManager.sendSceneCommand({
+            type: 'modeling_cmd_req',
+            cmd_id: sketchUuid,
+            cmd: {
+              type: 'start_path',
+            },
+          })
+        )
+        proms.push(
+          engineCommandManager.sendSceneCommand({
+            type: 'modeling_cmd_req',
+            cmd_id: uuidv4(),
+            cmd: {
+              type: 'edit_mode_enter',
+              target: sketchUuid,
+            },
+          })
+        )
+        const res = await Promise.all(proms)
+        console.log('res', res)
+        setGuiMode({
+          mode: 'sketch',
+          sketchMode: 'sketchEdit',
+          rotation: [0, 0, 0, 1],
+          position: [0, 0, 0],
+          pathToNode: [],
+        })
+
+        console.log('sketchModeResponse', sketchModeResponse)
+      },
+    })
+    return unSub
+  }, [engineCommandManager, defaultPlanes])
+}
+
+function createPlane(
+  engineCommandManager: EngineCommandManager,
+  {
+    x_axis,
+    y_axis,
+    color,
+  }: {
+    x_axis: Models['Point3d_type']
+    y_axis: Models['Point3d_type']
+    color: Models['Color_type']
+  }
+) {
+  const planeId = uuidv4()
+  engineCommandManager?.sendSceneCommand({
+    type: 'modeling_cmd_req',
+    cmd: {
+      type: 'make_plane',
+      size: 60,
+      origin: { x: 0, y: 0, z: 0 },
+      x_axis,
+      y_axis,
+      clobber: false,
+    },
+    cmd_id: planeId,
+  })
+  engineCommandManager?.sendSceneCommand({
+    type: 'modeling_cmd_req',
+    cmd: {
+      type: 'plane_set_color',
+      plane_id: planeId,
+      color,
+    },
+    cmd_id: uuidv4(),
+  })
+  return planeId
+}
+
+function hideDefaultPlanes(
+  engineCommandManager: EngineCommandManager,
+  defaultPlanes: DefaultPlanes
+) {
+  Object.values(defaultPlanes).forEach((planeId) => {
+    engineCommandManager?.sendSceneCommand({
+      type: 'modeling_cmd_req',
+      cmd_id: uuidv4(),
+      cmd: {
+        type: 'object_visible',
+        object_id: planeId,
+        hidden: true,
+      },
+    })
+  })
+}
+
+function isCursorInSketchCommandRange(
+  artifactMap: ArtifactMap,
+  selectionRanges: Selections
+): string | false {
+  const overlapingEntries = Object.entries(artifactMap || {}).filter(
+    ([id, artifact]) =>
+      selectionRanges.codeBasedSelections.some(
+        (selection) =>
+          Array.isArray(selection.range) &&
+          Array.isArray(artifact.range) &&
+          isOverlap(selection.range, artifact.range) &&
+          (artifact.commandType === 'start_path' ||
+            artifact.commandType === 'extend_path' ||
+            'close_path')
+      )
+  )
+  return overlapingEntries.length === 1 && overlapingEntries[0][1].parentId
+    ? overlapingEntries[0][1].parentId
+    : false
+}

src/hooks/useAuthMachine.tsx

@@ -1,54 +0,0 @@
-import { createActorContext } from '@xstate/react'
-import { useNavigate } from 'react-router-dom'
-import { paths } from '../Router'
-import { authMachine, TOKEN_PERSIST_KEY } from '../lib/authMachine'
-import withBaseUrl from '../lib/withBaseURL'
-
-export const AuthMachineContext = createActorContext(authMachine)
-
-export const GlobalStateProvider = ({
-  children,
-}: {
-  children: React.ReactNode
-}) => {
-  const navigate = useNavigate()
-  return (
-    <AuthMachineContext.Provider
-      machine={() =>
-        authMachine.withConfig({
-          actions: {
-            goToSignInPage: () => {
-              navigate(paths.SIGN_IN)
-              logout()
-            },
-            goToIndexPage: () => navigate(paths.INDEX),
-          },
-        })
-      }
-    >
-      {children}
-    </AuthMachineContext.Provider>
-  )
-}
-
-export function useAuthMachine<T>(
-  selector: (
-    state: Parameters<Parameters<typeof AuthMachineContext.useSelector>[0]>[0]
-  ) => T = () => null as T
-): [T, ReturnType<typeof AuthMachineContext.useActor>[1]] {
-  // useActor api normally `[state, send] = useActor`
-  // we're only interested in send because of the selector
-  const send = AuthMachineContext.useActor()[1]
-
-  const selection = AuthMachineContext.useSelector(selector)
-  return [selection, send]
-}
-
-export function logout() {
-  const url = withBaseUrl('/logout')
-  localStorage.removeItem(TOKEN_PERSIST_KEY)
-  return fetch(url, {
-    method: 'POST',
-    credentials: 'include',
-  })
-}

src/hooks/useCommandsContext.ts

@@ -0,0 +1,6 @@
+import { CommandsContext } from 'components/CommandBar'
+import { useContext } from 'react'
+
+export const useCommandsContext = () => {
+  return useContext(CommandsContext)
+}

src/hooks/useGlobalStateContext.ts

@@ -0,0 +1,6 @@
+import { GlobalStateContext } from 'components/GlobalStateProvider'
+import { useContext } from 'react'
+
+export const useGlobalStateContext = () => {
+  return useContext(GlobalStateContext)
+}

src/hooks/useStateMachineCommands.ts

@@ -0,0 +1,42 @@
+import { useEffect } from 'react'
+import { AnyStateMachine, StateFrom } from 'xstate'
+import { Command, CommandBarMeta, createMachineCommand } from '../lib/commands'
+import { useCommandsContext } from './useCommandsContext'
+
+interface UseStateMachineCommandsArgs<T extends AnyStateMachine> {
+  state: StateFrom<T>
+  send: Function
+  commandBarMeta?: CommandBarMeta
+  commands: Command[]
+  owner: string
+}
+
+export default function useStateMachineCommands<T extends AnyStateMachine>({
+  state,
+  send,
+  commandBarMeta,
+  owner,
+}: UseStateMachineCommandsArgs<T>) {
+  const { addCommands, removeCommands } = useCommandsContext()
+
+  useEffect(() => {
+    const newCommands = state.nextEvents
+      .filter((e) => !['done.', 'error.'].some((n) => e.includes(n)))
+      .map((type) =>
+        createMachineCommand<T>({
+          type,
+          state,
+          send,
+          commandBarMeta,
+          owner,
+        })
+      )
+      .filter((c) => c !== null) as Command[]
+
+    addCommands(newCommands)
+
+    return () => {
+      removeCommands(newCommands)
+    }
+  }, [state])
+}

src/hooks/useTauriBoot.ts

@@ -1,67 +0,0 @@
-import { useEffect } from 'react'
-import { useStore } from '../useStore'
-import { parse } from 'toml'
-import {
-  createDir,
-  BaseDirectory,
-  readDir,
-  readTextFile,
-} from '@tauri-apps/api/fs'
-
-export const useTauriBoot = () => {
-  const { defaultDir, setDefaultDir, setHomeMenuItems } = useStore((s) => ({
-    defaultDir: s.defaultDir,
-    setDefaultDir: s.setDefaultDir,
-    setHomeMenuItems: s.setHomeMenuItems,
-  }))
-  useEffect(() => {
-    const isTauri = (window as any).__TAURI__
-    if (!isTauri) return
-    const run = async () => {
-      if (!defaultDir.base) {
-        createDir('puffin-projects/example', {
-          dir: BaseDirectory.Home,
-          recursive: true,
-        })
-        setDefaultDir({
-          base: BaseDirectory.Home,
-          dir: 'puffin-projects',
-        })
-      } else {
-        const directoryResult = await readDir(defaultDir.dir, {
-          dir: defaultDir.base,
-          recursive: true,
-        })
-        const puffinProjects = directoryResult.filter(
-          (file) =>
-            !file?.name?.startsWith('.') &&
-            file?.children?.find((child) => child?.name === 'wax.toml')
-        )
-
-        const tomlFiles = await Promise.all(
-          puffinProjects.map(async (file) => {
-            const parsedToml = parse(
-              await readTextFile(`${file.path}/wax.toml`, {
-                dir: defaultDir.base,
-              })
-            )
-            const mainPath = parsedToml?.package?.main
-            const projectName = parsedToml?.package?.name
-            return {
-              file,
-              mainPath,
-              projectName,
-            }
-          })
-        )
-        setHomeMenuItems(
-          tomlFiles.map(({ file, mainPath, projectName }) => ({
-            name: projectName,
-            path: mainPath ? `${file.path}/${mainPath}` : file.path,
-          }))
-        )
-      }
-    }
-    run()
-  }, [])
-}

src/hooks/useToolbarGuards.ts

@@ -0,0 +1,56 @@
+import { SetVarNameModal } from 'components/SetVarNameModal'
+import { moveValueIntoNewVariable } from 'lang/modifyAst'
+import { isNodeSafeToReplace } from 'lang/queryAst'
+import { useEffect, useState } from 'react'
+import { create } from 'react-modal-promise'
+import { useStore } from 'useStore'
+
+const getModalInfo = create(SetVarNameModal as any)
+
+export function useConvertToVariable() {
+  const { guiMode, selectionRanges, ast, programMemory, updateAst } = useStore(
+    (s) => ({
+      guiMode: s.guiMode,
+      ast: s.ast,
+      updateAst: s.updateAst,
+      selectionRanges: s.selectionRanges,
+      programMemory: s.programMemory,
+    })
+  )
+  const [enable, setEnabled] = useState(false)
+  useEffect(() => {
+    if (!ast) return
+
+    const { isSafe, value } = isNodeSafeToReplace(
+      ast,
+      selectionRanges.codeBasedSelections?.[0]?.range || []
+    )
+    const canReplace = isSafe && value.type !== 'Identifier'
+    const isOnlyOneSelection = selectionRanges.codeBasedSelections.length === 1
+
+    const _enableHorz = canReplace && isOnlyOneSelection
+    setEnabled(_enableHorz)
+  }, [guiMode, selectionRanges])
+
+  const handleClick = async () => {
+    if (!ast) return
+    try {
+      const { variableName } = await getModalInfo({
+        valueName: 'var',
+      } as any)
+
+      const { modifiedAst: _modifiedAst } = moveValueIntoNewVariable(
+        ast,
+        programMemory,
+        selectionRanges.codeBasedSelections[0].range,
+        variableName
+      )
+
+      updateAst(_modifiedAst)
+    } catch (e) {
+      console.log('e', e)
+    }
+  }
+
+  return { enable, handleClick }
+}

src/index.css

@@ -82,12 +82,36 @@ code {
     monospace;
 }
 
+.full-height-subtract {
+  --height-subtract: 2.25rem;
+  height: 100%;
+  max-height: calc(100% - var(--height-subtract));
+}
+
 #code-mirror-override .cm-editor {
-  @apply bg-transparent;
+  @apply h-full bg-transparent;
+}
+
+#code-mirror-override .cm-scroller {
+  @apply h-full;
+}
+
+#code-mirror-override .cm-scroller::-webkit-scrollbar {
+  @apply h-0;
+}
+
+#code-mirror-override .cm-activeLine,
+#code-mirror-override .cm-activeLineGutter {
+  @apply bg-liquid-10/50;
+}
+
+.dark #code-mirror-override .cm-activeLine,
+.dark #code-mirror-override .cm-activeLineGutter {
+  @apply bg-liquid-80/50;
 }
 
 #code-mirror-override .cm-gutters {
-  @apply bg-chalkboard-10/50;
+  @apply bg-chalkboard-10/30;
 }
 
 .dark #code-mirror-override .cm-gutters {
@@ -99,16 +123,68 @@ code {
 }
 #code-mirror-override .cm-cursor {
   display: block;
-  width: 200px;
-  background: linear-gradient(
-    to right,
-    rgb(0, 55, 94) 0%,
-    #0084e2ff 2%,
-    #0084e255 5%,
-    transparent 100%
-  );
+  width: 1ch;
+  @apply bg-liquid-40 mix-blend-multiply;
+
+  animation: blink 2s ease-out infinite;
+}
+
+.dark #code-mirror-override .cm-cursor {
+  @apply bg-liquid-50;
+}
+
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 0;
+  }
+  15% {
+    opacity: 0.75;
+  }
 }
 
 .react-json-view {
   @apply bg-transparent !important;
 }
+
+#code-mirror-override .cm-tooltip {
+  @apply text-xs shadow-md;
+  @apply bg-chalkboard-10 text-chalkboard-80;
+  @apply rounded-sm border-solid border border-chalkboard-40/30 border-l-liquid-10;
+}
+
+.dark #code-mirror-override .cm-tooltip {
+  @apply bg-chalkboard-110 text-chalkboard-40;
+  @apply border-chalkboard-70/20 border-l-liquid-70;
+}
+
+#code-mirror-override .cm-tooltip-hover {
+  @apply py-1 px-2 w-max max-w-md;
+}
+
+#code-mirror-override .cm-completionInfo {
+  @apply px-4 rounded-l-none;
+  @apply bg-chalkboard-10 text-liquid-90;
+  @apply border-liquid-40/30;
+}
+
+.dark #code-mirror-override .cm-completionInfo {
+  @apply bg-liquid-120 text-liquid-50;
+  @apply border-liquid-90/60;
+}
+
+#code-mirror-override .cm-tooltip-autocomplete li {
+  @apply px-2 py-1;
+}
+#code-mirror-override .cm-tooltip-autocomplete li[aria-selected='true'] {
+  @apply bg-liquid-10 text-liquid-110;
+}
+.dark #code-mirror-override .cm-tooltip-autocomplete li[aria-selected='true'] {
+  @apply bg-liquid-100 text-liquid-20;
+}
+
+#code-mirror-override .cm-content {
+  white-space: pre-wrap;
+  word-break: normal;
+  word-wrap: break-word;
+}

src/index.tsx

@@ -2,23 +2,10 @@ import ReactDOM from 'react-dom/client'
 import './index.css'
 import reportWebVitals from './reportWebVitals'
 import { Toaster } from 'react-hot-toast'
-import { Themes, useStore } from './useStore'
 import { Router } from './Router'
 import { HotkeysProvider } from 'react-hotkeys-hook'
-import { getSystemTheme } from './lib/getSystemTheme'
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
-function setThemeClass(state: Partial<{ theme: Themes }>) {
-  const systemTheme = state.theme === Themes.System && getSystemTheme()
-  if (state.theme === Themes.Dark || systemTheme === Themes.Dark) {
-    document.body.classList.add('dark')
-  } else {
-    document.body.classList.remove('dark')
-  }
-}
-const { theme } = useStore.getState()
-setThemeClass({ theme })
-useStore.subscribe(setThemeClass)
 
 root.render(
   <HotkeysProvider>

src/lang/abstractSyntaxTree.test.ts

@@ -1,4 +1,5 @@
 import { parser_wasm } from './abstractSyntaxTree'
+import { KCLUnexpectedError } from './errors'
 import { initPromise } from './rust'
 
 beforeAll(() => initPromise)
@@ -178,6 +179,9 @@ const newVar = myVar + 1
               name: 'aIdentifier',
             },
           ],
+          function: {
+            type: 'InMemory',
+          },
           optional: false,
         },
       },
@@ -210,10 +214,8 @@ describe('testing function declaration', () => {
               type: 'FunctionExpression',
               start: 11,
               end: 19,
-              id: null,
               params: [],
               body: {
-                type: 'BlockStatement',
                 start: 17,
                 end: 19,
                 body: [],
@@ -250,7 +252,6 @@ describe('testing function declaration', () => {
               type: 'FunctionExpression',
               start: 11,
               end: 39,
-              id: null,
               params: [
                 {
                   type: 'Identifier',
@@ -266,7 +267,6 @@ describe('testing function declaration', () => {
                 },
               ],
               body: {
-                type: 'BlockStatement',
                 start: 21,
                 end: 39,
                 body: [
@@ -327,7 +327,6 @@ const myVar = funcN(1, 2)`
               type: 'FunctionExpression',
               start: 11,
               end: 37,
-              id: null,
               params: [
                 {
                   type: 'Identifier',
@@ -343,7 +342,6 @@ const myVar = funcN(1, 2)`
                 },
               ],
               body: {
-                type: 'BlockStatement',
                 start: 21,
                 end: 37,
                 body: [
@@ -418,6 +416,9 @@ const myVar = funcN(1, 2)`
                   raw: '2',
                 },
               ],
+              function: {
+                type: 'InMemory',
+              },
               optional: false,
             },
           },
@@ -487,6 +488,7 @@ describe('testing pipe operator special', () => {
                       ],
                     },
                   ],
+                  function: expect.any(Object),
                   optional: false,
                 },
                 {
@@ -523,6 +525,7 @@ describe('testing pipe operator special', () => {
                     },
                     { type: 'PipeSubstitution', start: 59, end: 60 },
                   ],
+                  function: expect.any(Object),
                   optional: false,
                 },
                 {
@@ -595,6 +598,7 @@ describe('testing pipe operator special', () => {
                     },
                     { type: 'PipeSubstitution', start: 105, end: 106 },
                   ],
+                  function: expect.any(Object),
                   optional: false,
                 },
                 {
@@ -631,6 +635,7 @@ describe('testing pipe operator special', () => {
                     },
                     { type: 'PipeSubstitution', start: 128, end: 129 },
                   ],
+                  function: expect.any(Object),
                   optional: false,
                 },
                 {
@@ -653,6 +658,9 @@ describe('testing pipe operator special', () => {
                     },
                     { type: 'PipeSubstitution', start: 143, end: 144 },
                   ],
+                  function: {
+                    type: 'InMemory',
+                  },
                   optional: false,
                 },
               ],
@@ -732,6 +740,9 @@ describe('testing pipe operator special', () => {
                       end: 35,
                     },
                   ],
+                  function: {
+                    type: 'InMemory',
+                  },
                   optional: false,
                 },
               ],
@@ -1552,7 +1563,10 @@ const key = 'c'`
       type: 'NoneCodeNode',
       start: code.indexOf('\n// this is a comment'),
       end: code.indexOf('const key'),
-      value: '\n// this is a comment\n',
+      value: {
+        type: 'blockComment',
+        value: 'this is a comment',
+      },
     }
     const { nonCodeMeta } = parser_wasm(code)
     expect(nonCodeMeta.noneCodeNodes[0]).toEqual(nonCodeMetaInstance)
@@ -1562,7 +1576,9 @@ const key = 'c'`
     const { nonCodeMeta: nonCodeMeta2 } = parser_wasm(
       codeWithExtraStartWhitespace
     )
-    expect(nonCodeMeta2.noneCodeNodes[0].value).toBe(nonCodeMetaInstance.value)
+    expect(nonCodeMeta2.noneCodeNodes[0].value).toStrictEqual(
+      nonCodeMetaInstance.value
+    )
     expect(nonCodeMeta2.noneCodeNodes[0].start).not.toBe(
       nonCodeMetaInstance.start
     )
@@ -1584,9 +1600,11 @@ const key = 'c'`
     expect(sketchNonCodeMeta[indexOfSecondLineToExpression]).toEqual({
       type: 'NoneCodeNode',
       start: 106,
-      end: 168,
-      value:
-        ' /* this is \n      a comment \n      spanning a few lines */\n  ',
+      end: 166,
+      value: {
+        type: 'blockComment',
+        value: 'this is\n      a comment\n      spanning a few lines',
+      },
     })
   })
   it('comments in a pipe expression', () => {
@@ -1606,7 +1624,10 @@ const key = 'c'`
       type: 'NoneCodeNode',
       start: 125,
       end: 141,
-      value: '\n// a comment\n  ',
+      value: {
+        type: 'blockComment',
+        value: 'a comment',
+      },
     })
   })
 })
@@ -1630,6 +1651,7 @@ describe('test UnaryExpression', () => {
           { type: 'Literal', start: 19, end: 20, value: 4, raw: '4' },
           { type: 'Literal', start: 22, end: 25, value: 100, raw: '100' },
         ],
+        function: expect.any(Object),
         optional: false,
       },
     })
@@ -1663,10 +1685,12 @@ describe('testing nested call expressions', () => {
               { type: 'Literal', start: 34, end: 35, value: 5, raw: '5' },
               { type: 'Literal', start: 37, end: 38, value: 3, raw: '3' },
             ],
+            function: expect.any(Object),
             optional: false,
           },
         },
       ],
+      function: expect.any(Object),
       optional: false,
     })
   })
@@ -1698,6 +1722,7 @@ describe('should recognise callExpresions in binaryExpressions', () => {
             },
             { type: 'PipeSubstitution', start: 25, end: 26 },
           ],
+          function: expect.any(Object),
           optional: false,
         },
         right: { type: 'Literal', value: 1, raw: '1', start: 30, end: 31 },
@@ -1706,3 +1731,19 @@ describe('should recognise callExpresions in binaryExpressions', () => {
     ])
   })
 })
+
+describe('parsing errors', () => {
+  it('should return an error when there is a unexpected closed curly brace', async () => {
+    const code = `const myVar = startSketchAt([}], %)`
+
+    let _theError
+    try {
+      const result = expect(parser_wasm(code))
+      console.log('result', result)
+    } catch (e) {
+      _theError = e
+    }
+    const theError = _theError as any
+    expect(theError).toEqual(new KCLUnexpectedError('Brace', [[29, 30]]))
+  })
+})

src/lang/abstractSyntaxTree.ts

@@ -3,21 +3,21 @@ import { parse_js } from '../wasm-lib/pkg/wasm_lib'
 import { initPromise } from './rust'
 import { Token } from './tokeniser'
 import { KCLError } from './errors'
+import { KclError as RustKclError } from '../wasm-lib/kcl/bindings/KclError'
+
+export const rangeTypeFix = (ranges: number[][]): [number, number][] =>
+  ranges.map(([start, end]) => [start, end])
 
 export const parser_wasm = (code: string): Program => {
   try {
     const program: Program = parse_js(code)
     return program
   } catch (e: any) {
-    const parsed: {
-      kind: string
-      msg: string
-      sourceRanges: [number, number][]
-    } = JSON.parse(e.toString())
-    const kclError: KCLError = new KCLError(
+    const parsed: RustKclError = JSON.parse(e.toString())
+    const kclError = new KCLError(
       parsed.kind,
       parsed.msg,
-      parsed.sourceRanges
+      rangeTypeFix(parsed.sourceRanges)
     )
 
     console.log(kclError)
@@ -31,15 +31,11 @@ export async function asyncParser(code: string): Promise<Program> {
     const program: Program = parse_js(code)
     return program
   } catch (e: any) {
-    const parsed: {
-      kind: string
-      msg: string
-      sourceRanges: [number, number][]
-    } = JSON.parse(e.toString())
-    const kclError: KCLError = new KCLError(
+    const parsed: RustKclError = JSON.parse(e.toString())
+    const kclError = new KCLError(
       parsed.kind,
       parsed.msg,
-      parsed.sourceRanges
+      rangeTypeFix(parsed.sourceRanges)
     )
 
     console.log(kclError)

src/lang/abstractSyntaxTreeTypes.ts

@@ -1,20 +1,20 @@
-export type { Program } from '../wasm-lib/bindings/Program'
-export type { Value } from '../wasm-lib/bindings/Value'
-export type { ObjectExpression } from '../wasm-lib/bindings/ObjectExpression'
-export type { MemberExpression } from '../wasm-lib/bindings/MemberExpression'
-export type { PipeExpression } from '../wasm-lib/bindings/PipeExpression'
-export type { VariableDeclaration } from '../wasm-lib/bindings/VariableDeclaration'
-export type { PipeSubstitution } from '../wasm-lib/bindings/PipeSubstitution'
-export type { Identifier } from '../wasm-lib/bindings/Identifier'
-export type { UnaryExpression } from '../wasm-lib/bindings/UnaryExpression'
-export type { BinaryExpression } from '../wasm-lib/bindings/BinaryExpression'
-export type { ReturnStatement } from '../wasm-lib/bindings/ReturnStatement'
-export type { ExpressionStatement } from '../wasm-lib/bindings/ExpressionStatement'
-export type { CallExpression } from '../wasm-lib/bindings/CallExpression'
-export type { VariableDeclarator } from '../wasm-lib/bindings/VariableDeclarator'
-export type { BinaryPart } from '../wasm-lib/bindings/BinaryPart'
-export type { Literal } from '../wasm-lib/bindings/Literal'
-export type { ArrayExpression } from '../wasm-lib/bindings/ArrayExpression'
+export type { Program } from '../wasm-lib/kcl/bindings/Program'
+export type { Value } from '../wasm-lib/kcl/bindings/Value'
+export type { ObjectExpression } from '../wasm-lib/kcl/bindings/ObjectExpression'
+export type { MemberExpression } from '../wasm-lib/kcl/bindings/MemberExpression'
+export type { PipeExpression } from '../wasm-lib/kcl/bindings/PipeExpression'
+export type { VariableDeclaration } from '../wasm-lib/kcl/bindings/VariableDeclaration'
+export type { PipeSubstitution } from '../wasm-lib/kcl/bindings/PipeSubstitution'
+export type { Identifier } from '../wasm-lib/kcl/bindings/Identifier'
+export type { UnaryExpression } from '../wasm-lib/kcl/bindings/UnaryExpression'
+export type { BinaryExpression } from '../wasm-lib/kcl/bindings/BinaryExpression'
+export type { ReturnStatement } from '../wasm-lib/kcl/bindings/ReturnStatement'
+export type { ExpressionStatement } from '../wasm-lib/kcl/bindings/ExpressionStatement'
+export type { CallExpression } from '../wasm-lib/kcl/bindings/CallExpression'
+export type { VariableDeclarator } from '../wasm-lib/kcl/bindings/VariableDeclarator'
+export type { BinaryPart } from '../wasm-lib/kcl/bindings/BinaryPart'
+export type { Literal } from '../wasm-lib/kcl/bindings/Literal'
+export type { ArrayExpression } from '../wasm-lib/kcl/bindings/ArrayExpression'
 
 export type SyntaxType =
   | 'Program'
@@ -22,7 +22,6 @@ export type SyntaxType =
   | 'BinaryExpression'
   | 'CallExpression'
   | 'Identifier'
-  | 'BlockStatement'
   | 'ReturnStatement'
   | 'VariableDeclaration'
   | 'VariableDeclarator'

src/lang/artifact.test.ts

@@ -14,48 +14,49 @@ const mySketch001 = startSketchAt([0, 0])
   // |> rx(45, %)
 show(mySketch001)`
     const programMemory = await enginelessExecutor(parser_wasm(code))
+    // @ts-ignore
     const shown = programMemory?.return?.map(
+      // @ts-ignore
       (a) => programMemory?.root?.[a.name]
     )
     expect(shown).toEqual([
       {
         type: 'sketchGroup',
         start: {
-          type: 'base',
           to: [0, 0],
           from: [0, 0],
+          name: '',
           __geoMeta: {
-            id: '66366561-6465-4734-a463-366330356563',
+            id: expect.any(String),
             sourceRange: [21, 42],
-            pathToNode: [],
           },
         },
         value: [
           {
             type: 'toPoint',
+            name: '',
             to: [-1.59, -1.54],
             from: [0, 0],
             __geoMeta: {
               sourceRange: [48, 73],
-              id: '30366338-6462-4330-a364-303935626163',
-              pathToNode: [],
+              id: expect.any(String),
             },
           },
           {
             type: 'toPoint',
             to: [0.46, -5.82],
             from: [-1.59, -1.54],
+            name: '',
             __geoMeta: {
               sourceRange: [79, 103],
-              id: '32653334-6331-4231-b162-663334363535',
-              pathToNode: [],
+              id: expect.any(String),
             },
           },
         ],
         position: [0, 0, 0],
         rotation: [0, 0, 0, 1],
-        id: '39643164-6130-4734-b432-623638393262',
-        __meta: [{ sourceRange: [21, 42], pathToNode: [] }],
+        id: expect.any(String),
+        __meta: [{ sourceRange: [21, 42] }],
       },
     ])
   })
@@ -69,21 +70,20 @@ const mySketch001 = startSketchAt([0, 0])
   |> extrude(2, %)
 show(mySketch001)`
     const programMemory = await enginelessExecutor(parser_wasm(code))
+    // @ts-ignore
     const shown = programMemory?.return?.map(
+      // @ts-ignore
       (a) => programMemory?.root?.[a.name]
     )
     expect(shown).toEqual([
       {
         type: 'extrudeGroup',
-        id: '65383433-3839-4333-b836-343263636638',
+        id: expect.any(String),
         value: [],
         height: 2,
         position: [0, 0, 0],
         rotation: [0, 0, 0, 1],
-        __meta: [
-          { sourceRange: [127, 140], pathToNode: [] },
-          { sourceRange: [21, 42], pathToNode: [] },
-        ],
+        __meta: [{ sourceRange: [21, 42] }],
       },
     ])
   })
@@ -110,33 +110,29 @@ const sk2 = startSketchAt([0, 0])
 
 show(theExtrude, sk2)`
     const programMemory = await enginelessExecutor(parser_wasm(code))
+    // @ts-ignore
     const geos = programMemory?.return?.map(
+      // @ts-ignore
       ({ name }) => programMemory?.root?.[name]
     )
     expect(geos).toEqual([
       {
         type: 'extrudeGroup',
-        id: '63333330-3631-4230-b664-623132643731',
+        id: expect.any(String),
         value: [],
         height: 2,
         position: [0, 0, 0],
         rotation: [0, 0, 0, 1],
-        __meta: [
-          { sourceRange: [212, 227], pathToNode: [] },
-          { sourceRange: [13, 34], pathToNode: [] },
-        ],
+        __meta: [{ sourceRange: [13, 34] }],
       },
       {
         type: 'extrudeGroup',
-        id: '33316639-3438-4661-a334-663262383737',
+        id: expect.any(String),
         value: [],
         height: 2,
         position: [0, 0, 0],
         rotation: [0, 0, 0, 1],
-        __meta: [
-          { sourceRange: [453, 466], pathToNode: [] },
-          { sourceRange: [302, 323], pathToNode: [] },
-        ],
+        __meta: [{ sourceRange: [302, 323] }],
       },
     ])
   })

src/lang/errors.ts

@@ -1,11 +1,13 @@
 import { Diagnostic } from '@codemirror/lint'
+import { KclError as RustKclError } from '../wasm-lib/kcl/bindings/KclError'
 
+type ExtractKind<T> = T extends { kind: infer K } ? K : never
 export class KCLError {
-  kind: string | undefined
+  kind: ExtractKind<RustKclError> | 'name'
   sourceRanges: [number, number][]
   msg: string
   constructor(
-    kind: string | undefined,
+    kind: ExtractKind<RustKclError> | 'name',
     msg: string,
     sourceRanges: [number, number][]
   ) {
@@ -39,11 +41,18 @@ export class KCLTypeError extends KCLError {
 
 export class KCLUnimplementedError extends KCLError {
   constructor(msg: string, sourceRanges: [number, number][]) {
-    super('unimplemented feature', msg, sourceRanges)
+    super('unimplemented', msg, sourceRanges)
     Object.setPrototypeOf(this, KCLUnimplementedError.prototype)
   }
 }
 
+export class KCLUnexpectedError extends KCLError {
+  constructor(msg: string, sourceRanges: [number, number][]) {
+    super('unexpected', msg, sourceRanges)
+    Object.setPrototypeOf(this, KCLUnexpectedError.prototype)
+  }
+}
+
 export class KCLValueAlreadyDefined extends KCLError {
   constructor(key: string, sourceRanges: [number, number][]) {
     super('name', `Key ${key} was already defined elsewhere`, sourceRanges)

src/lang/executor.test.ts

@@ -5,7 +5,7 @@ import { ProgramMemory } from './executor'
 import { initPromise } from './rust'
 import { enginelessExecutor } from '../lib/testHelpers'
 import { vi } from 'vitest'
-import { KCLUndefinedValueError } from './errors'
+import { KCLError } from './errors'
 
 beforeAll(() => initPromise)
 
@@ -30,29 +30,6 @@ const newVar = myVar + 1`
     const { root } = await exe(code)
     expect(root.myVar.value).toBe('a str another str')
   })
-  it('test with function call', async () => {
-    const code = `
-const myVar = "hello"
-log(5, myVar)`
-    const programMemoryOverride: ProgramMemory['root'] = {
-      log: {
-        type: 'userVal',
-        value: vi.fn(),
-        __meta: [
-          {
-            sourceRange: [0, 0],
-            pathToNode: [],
-          },
-        ],
-      },
-    }
-    const { root } = await enginelessExecutor(parser_wasm(code), {
-      root: programMemoryOverride,
-      pendingMemory: {},
-    })
-    expect(root.myVar.value).toBe('hello')
-    expect(programMemoryOverride.log.value).toHaveBeenCalledWith(5, 'hello')
-  })
   it('fn funcN = () => {} execute', async () => {
     const { root } = await exe(
       [
@@ -84,8 +61,7 @@ show(mySketch)
         from: [0, 0],
         __geoMeta: {
           sourceRange: [43, 80],
-          id: '37333036-3033-4432-b530-643030303837',
-          pathToNode: [],
+          id: expect.any(String),
         },
         name: 'myPath',
       },
@@ -93,10 +69,10 @@ show(mySketch)
         type: 'toPoint',
         to: [2, 3],
         from: [0, 2],
+        name: '',
         __geoMeta: {
           sourceRange: [86, 102],
-          id: '32343136-3330-4134-a462-376437386365',
-          pathToNode: [],
+          id: expect.any(String),
         },
       },
       {
@@ -105,8 +81,7 @@ show(mySketch)
         from: [2, 3],
         __geoMeta: {
           sourceRange: [108, 151],
-          id: '32306132-6130-4138-b832-636363326330',
-          pathToNode: [],
+          id: expect.any(String),
         },
         name: 'rightPath',
       },
@@ -170,13 +145,12 @@ show(mySketch)
     expect(root.mySk1).toEqual({
       type: 'sketchGroup',
       start: {
-        type: 'base',
         to: [0, 0],
         from: [0, 0],
+        name: '',
         __geoMeta: {
-          id: '37663863-3664-4366-a637-623739336334',
+          id: expect.any(String),
           sourceRange: [14, 34],
-          pathToNode: [],
         },
       },
       value: [
@@ -184,10 +158,10 @@ show(mySketch)
           type: 'toPoint',
           to: [1, 1],
           from: [0, 0],
+          name: '',
           __geoMeta: {
             sourceRange: [40, 56],
-            id: '34356231-3362-4363-b935-393033353034',
-            pathToNode: [],
+            id: expect.any(String),
           },
         },
         {
@@ -196,8 +170,7 @@ show(mySketch)
           from: [1, 1],
           __geoMeta: {
             sourceRange: [62, 100],
-            id: '39623339-3538-4366-b633-356630326639',
-            pathToNode: [],
+            id: expect.any(String),
           },
           name: 'myPath',
         },
@@ -205,17 +178,17 @@ show(mySketch)
           type: 'toPoint',
           to: [1, 1],
           from: [0, 1],
+          name: '',
           __geoMeta: {
             sourceRange: [106, 122],
-            id: '30636135-6232-4335-b665-366562303161',
-            pathToNode: [],
+            id: expect.any(String),
           },
         },
       ],
       position: [0, 0, 0],
       rotation: [0, 0, 0, 1],
-      id: '30376661-3039-4965-b532-653665313731',
-      __meta: [{ sourceRange: [14, 34], pathToNode: [] }],
+      id: expect.any(String),
+      __meta: [{ sourceRange: [14, 34] }],
     })
   })
   it('execute array expression', async () => {
@@ -230,13 +203,6 @@ show(mySketch)
         value: 3,
         __meta: [
           {
-            pathToNode: [
-              ['body', ''],
-              [0, 'index'],
-              ['declarations', 'VariableDeclaration'],
-              [0, 'index'],
-              ['init', 'VariableDeclaration'],
-            ],
             sourceRange: [14, 15],
           },
         ],
@@ -246,25 +212,8 @@ show(mySketch)
         value: [1, '2', 3, 9],
         __meta: [
           {
-            pathToNode: [
-              ['body', ''],
-              [1, 'index'],
-              ['declarations', 'VariableDeclaration'],
-              [0, 'index'],
-              ['init', 'VariableDeclaration'],
-            ],
             sourceRange: [27, 49],
           },
-          {
-            pathToNode: [
-              ['body', ''],
-              [0, 'index'],
-              ['declarations', 'VariableDeclaration'],
-              [0, 'index'],
-              ['init', 'VariableDeclaration'],
-            ],
-            sourceRange: [14, 15],
-          },
         ],
       },
     })
@@ -280,13 +229,6 @@ show(mySketch)
       value: { aStr: 'str', anum: 2, identifier: 3, binExp: 9 },
       __meta: [
         {
-          pathToNode: [
-            ['body', ''],
-            [1, 'index'],
-            ['declarations', 'VariableDeclaration'],
-            [0, 'index'],
-            ['init', 'VariableDeclaration'],
-          ],
           sourceRange: [27, 83],
         },
       ],
@@ -302,13 +244,6 @@ show(mySketch)
       value: '123',
       __meta: [
         {
-          pathToNode: [
-            ['body', ''],
-            [1, 'index'],
-            ['declarations', 'VariableDeclaration'],
-            [0, 'index'],
-            ['init', 'VariableDeclaration'],
-          ],
           sourceRange: [41, 50],
         },
       ],
@@ -451,17 +386,18 @@ const theExtrude = startSketchAt([0, 0])
   |> extrude(4, %)
 show(theExtrude)`
     await expect(exe(code)).rejects.toEqual(
-      new KCLUndefinedValueError('Memory item myVarZ not found', [[100, 106]])
+      new KCLError(
+        'undefined_value',
+        'memory item key `myVarZ` is not defined',
+        [[100, 106]]
+      )
     )
   })
 })
 
 // helpers
 
-async function exe(
-  code: string,
-  programMemory: ProgramMemory = { root: {}, pendingMemory: {} }
-) {
+async function exe(code: string, programMemory: ProgramMemory = { root: {} }) {
   const ast = parser_wasm(code)
 
   const result = await enginelessExecutor(ast, programMemory)

src/lang/executor.ts

@@ -1,35 +1,19 @@
-import {
-  Program,
-  BinaryPart,
-  BinaryExpression,
-  PipeExpression,
-  ObjectExpression,
-  MemberExpression,
-  Identifier,
-  CallExpression,
-  ArrayExpression,
-  UnaryExpression,
-} from './abstractSyntaxTreeTypes'
-import { InternalFnNames } from './std/stdTypes'
-import { internalFns } from './std/std'
-import {
-  KCLUndefinedValueError,
-  KCLValueAlreadyDefined,
-  KCLSyntaxError,
-  KCLSemanticError,
-  KCLTypeError,
-} from './errors'
+import { Program } from './abstractSyntaxTreeTypes'
 import {
   EngineCommandManager,
   ArtifactMap,
   SourceRangeMap,
 } from './std/engineConnection'
+import { ProgramReturn } from '../wasm-lib/kcl/bindings/ProgramReturn'
+import { execute_wasm } from '../wasm-lib/pkg/wasm_lib'
+import { KCLError } from './errors'
+import { KclError as RustKclError } from '../wasm-lib/kcl/bindings/KclError'
+import { rangeTypeFix } from './abstractSyntaxTree'
 
 export type SourceRange = [number, number]
 export type PathToNode = [string | number, string][] // [pathKey, nodeType][]
 export type Metadata = {
   sourceRange: SourceRange
-  pathToNode: PathToNode
 }
 export type Position = [number, number, number]
 export type Rotation = [number, number, number, number]
@@ -41,7 +25,6 @@ interface BasePath {
   __geoMeta: {
     id: string
     sourceRange: SourceRange
-    pathToNode: PathToNode
   }
 }
 
@@ -68,9 +51,7 @@ export interface AngledLineTo extends BasePath {
 interface GeoMeta {
   __geoMeta: {
     id: string
-    refId?: string
     sourceRange: SourceRange
-    pathToNode: PathToNode
   }
 }
 
@@ -118,69 +99,16 @@ type MemoryItem = UserVal | SketchGroup | ExtrudeGroup
 interface Memory {
   [key: string]: MemoryItem
 }
-interface PendingMemory {
-  [key: string]: Promise<MemoryItem>
-}
 
 export interface ProgramMemory {
   root: Memory
-  pendingMemory: Partial<PendingMemory>
-  return?: Identifier[]
-}
-
-const addItemToMemory = (
-  programMemory: ProgramMemory,
-  key: string,
-  sourceRange: [[number, number]],
-  value: MemoryItem | Promise<MemoryItem>
-) => {
-  const _programMemory = programMemory
-  if (_programMemory.root[key] || _programMemory.pendingMemory[key]) {
-    throw new KCLValueAlreadyDefined(key, sourceRange)
-  }
-  if (value instanceof Promise) {
-    _programMemory.pendingMemory[key] = value
-    value.then((resolvedValue) => {
-      _programMemory.root[key] = resolvedValue
-      delete _programMemory.pendingMemory[key]
-    })
-  } else {
-    _programMemory.root[key] = value
-  }
-  return _programMemory
-}
-
-const promisifyMemoryItem = async (obj: MemoryItem) => {
-  if (obj.value instanceof Promise) {
-    const resolvedGuy = await obj.value
-    return {
-      ...obj,
-      value: resolvedGuy,
-    }
-  }
-  return obj
-}
-
-const getMemoryItem = async (
-  programMemory: ProgramMemory,
-  key: string,
-  sourceRanges: [number, number][]
-): Promise<MemoryItem> => {
-  if (programMemory.root[key]) {
-    return programMemory.root[key]
-  }
-  if (programMemory.pendingMemory[key]) {
-    return programMemory.pendingMemory[key] as Promise<MemoryItem>
-  }
-  throw new KCLUndefinedValueError(`Memory item ${key} not found`, sourceRanges)
+  return?: ProgramReturn
 }
 
 export const executor = async (
   node: Program,
-  programMemory: ProgramMemory = { root: {}, pendingMemory: {} },
+  programMemory: ProgramMemory = { root: {} },
   engineCommandManager: EngineCommandManager,
-  options: { bodyType: 'root' | 'sketch' | 'block' } = { bodyType: 'root' },
-  previousPathToNode: PathToNode = [],
   // work around while the gemotry is still be stored on the frontend
   // will be removed when the stream UI is added.
   tempMapCallback: (a: {
@@ -192,9 +120,7 @@ export const executor = async (
   const _programMemory = await _executor(
     node,
     programMemory,
-    engineCommandManager,
-    options,
-    previousPathToNode
+    engineCommandManager
   )
   const { artifactMap, sourceRangeMap } =
     await engineCommandManager.waitForAllCommands()
@@ -206,840 +132,25 @@ export const executor = async (
 
 export const _executor = async (
   node: Program,
-  programMemory: ProgramMemory = { root: {}, pendingMemory: {} },
-  engineCommandManager: EngineCommandManager,
-  options: { bodyType: 'root' | 'sketch' | 'block' } = { bodyType: 'root' },
-  previousPathToNode: PathToNode = []
+  programMemory: ProgramMemory = { root: {} },
+  engineCommandManager: EngineCommandManager
 ): Promise<ProgramMemory> => {
-  let _programMemory: ProgramMemory = {
-    root: {
-      ...programMemory.root,
-    },
-    pendingMemory: {
-      ...programMemory.pendingMemory,
-    },
-    return: programMemory.return,
-  }
-  const { body } = node
-  const proms: Promise<any>[] = []
-  for (let bodyIndex = 0; bodyIndex < body.length; bodyIndex++) {
-    const statement = body[bodyIndex]
-    if (statement.type === 'VariableDeclaration') {
-      for (let index = 0; index < statement.declarations.length; index++) {
-        const declaration = statement.declarations[index]
-        const variableName = declaration.id.name
-        const pathToNode: PathToNode = [
-          ...previousPathToNode,
-          ['body', ''],
-          [bodyIndex, 'index'],
-          ['declarations', 'VariableDeclaration'],
-          [index, 'index'],
-          ['init', 'VariableDeclaration'],
-        ]
-        const sourceRange: SourceRange = [
-          declaration.init.start,
-          declaration.init.end,
-        ]
-        const __meta: Metadata[] = [
-          {
-            pathToNode,
-            sourceRange,
-          },
-        ]
+  try {
+    const memory: ProgramMemory = await execute_wasm(
+      JSON.stringify(node),
+      JSON.stringify(programMemory),
+      engineCommandManager
+    )
+    return memory
+  } catch (e: any) {
+    const parsed: RustKclError = JSON.parse(e.toString())
+    const kclError = new KCLError(
+      parsed.kind,
+      parsed.msg,
+      rangeTypeFix(parsed.sourceRanges)
+    )
 
-        if (declaration.init.type === 'PipeExpression') {
-          const prom = getPipeExpressionResult(
-            declaration.init,
-            _programMemory,
-            engineCommandManager,
-            pathToNode
-          )
-          proms.push(prom)
-          const value = await prom
-          if (value?.type === 'sketchGroup' || value?.type === 'extrudeGroup') {
-            _programMemory = addItemToMemory(
-              _programMemory,
-              variableName,
-              [sourceRange],
-              value
-            )
-          } else {
-            _programMemory = addItemToMemory(
-              _programMemory,
-              variableName,
-              [sourceRange],
-              {
-                type: 'userVal',
-                value,
-                __meta,
-              }
-            )
-          }
-        } else if (declaration.init.type === 'Identifier') {
-          _programMemory = addItemToMemory(
-            _programMemory,
-            variableName,
-            [sourceRange],
-            {
-              type: 'userVal',
-              value: _programMemory.root[declaration.init.name].value,
-              __meta,
-            }
-          )
-        } else if (declaration.init.type === 'Literal') {
-          _programMemory = addItemToMemory(
-            _programMemory,
-            variableName,
-            [sourceRange],
-            {
-              type: 'userVal',
-              value: declaration.init.value,
-              __meta,
-            }
-          )
-        } else if (declaration.init.type === 'BinaryExpression') {
-          const prom = getBinaryExpressionResult(
-            declaration.init,
-            _programMemory,
-            engineCommandManager
-          )
-          proms.push(prom)
-          _programMemory = addItemToMemory(
-            _programMemory,
-            variableName,
-            [sourceRange],
-            promisifyMemoryItem({
-              type: 'userVal',
-              value: prom,
-              __meta,
-            })
-          )
-        } else if (declaration.init.type === 'UnaryExpression') {
-          const prom = getUnaryExpressionResult(
-            declaration.init,
-            _programMemory,
-            engineCommandManager
-          )
-          proms.push(prom)
-          _programMemory = addItemToMemory(
-            _programMemory,
-            variableName,
-            [sourceRange],
-            promisifyMemoryItem({
-              type: 'userVal',
-              value: prom,
-              __meta,
-            })
-          )
-        } else if (declaration.init.type === 'ArrayExpression') {
-          const valueInfo: Promise<{ value: any; __meta?: Metadata }>[] =
-            declaration.init.elements.map(
-              async (element): Promise<{ value: any; __meta?: Metadata }> => {
-                if (element.type === 'Literal') {
-                  return {
-                    value: element.value,
-                  }
-                } else if (element.type === 'BinaryExpression') {
-                  const prom = getBinaryExpressionResult(
-                    element,
-                    _programMemory,
-                    engineCommandManager
-                  )
-                  proms.push(prom)
-                  return {
-                    value: await prom,
-                  }
-                } else if (element.type === 'PipeExpression') {
-                  const prom = getPipeExpressionResult(
-                    element,
-                    _programMemory,
-                    engineCommandManager,
-                    pathToNode
-                  )
-                  proms.push(prom)
-                  return {
-                    value: await prom,
-                  }
-                } else if (element.type === 'Identifier') {
-                  const node = await getMemoryItem(
-                    _programMemory,
-                    element.name,
-                    [[element.start, element.end]]
-                  )
-                  return {
-                    value: node.value,
-                    __meta: node.__meta[node.__meta.length - 1],
-                  }
-                } else if (element.type === 'UnaryExpression') {
-                  const prom = getUnaryExpressionResult(
-                    element,
-                    _programMemory,
-                    engineCommandManager
-                  )
-                  proms.push(prom)
-                  return {
-                    value: await prom,
-                  }
-                } else {
-                  throw new KCLSyntaxError(
-                    `Unexpected element type ${element.type} in array expression`,
-                    // TODO: Refactor this whole block into a `switch` so that we have a specific
-                    // type here and can put a sourceRange.
-                    []
-                  )
-                }
-              }
-            )
-          const awaitedValueInfo = await Promise.all(valueInfo)
-          const meta = awaitedValueInfo
-            .filter(({ __meta }) => __meta)
-            .map(({ __meta }) => __meta) as Metadata[]
-          _programMemory = addItemToMemory(
-            _programMemory,
-            variableName,
-            [sourceRange],
-            {
-              type: 'userVal',
-              value: awaitedValueInfo.map(({ value }) => value),
-              __meta: [...__meta, ...meta],
-            }
-          )
-        } else if (declaration.init.type === 'ObjectExpression') {
-          const prom = executeObjectExpression(
-            _programMemory,
-            declaration.init,
-            engineCommandManager
-          )
-          proms.push(prom)
-          _programMemory = addItemToMemory(
-            _programMemory,
-            variableName,
-            [sourceRange],
-            promisifyMemoryItem({
-              type: 'userVal',
-              value: prom,
-              __meta,
-            })
-          )
-        } else if (declaration.init.type === 'FunctionExpression') {
-          const fnInit = declaration.init
-
-          _programMemory = addItemToMemory(
-            _programMemory,
-            declaration.id.name,
-            [sourceRange],
-            {
-              type: 'userVal',
-              value: async (...args: any[]) => {
-                let fnMemory: ProgramMemory = {
-                  root: {
-                    ..._programMemory.root,
-                  },
-                  pendingMemory: {
-                    ..._programMemory.pendingMemory,
-                  },
-                }
-                if (args.length > fnInit.params.length) {
-                  throw new KCLSyntaxError(
-                    `Too many arguments passed to function ${declaration.id.name}`,
-                    [[declaration.start, declaration.end]]
-                  )
-                } else if (args.length < fnInit.params.length) {
-                  throw new KCLSyntaxError(
-                    `Too few arguments passed to function ${declaration.id.name}`,
-                    [[declaration.start, declaration.end]]
-                  )
-                }
-                fnInit.params.forEach((param, index) => {
-                  fnMemory = addItemToMemory(
-                    fnMemory,
-                    param.name,
-                    [sourceRange],
-                    {
-                      type: 'userVal',
-                      value: args[index],
-                      __meta,
-                    }
-                  )
-                })
-                const prom = _executor(
-                  fnInit.body,
-                  fnMemory,
-                  engineCommandManager,
-                  {
-                    bodyType: 'block',
-                  }
-                )
-                proms.push(prom)
-                const result = (await prom).return
-                return result
-              },
-              __meta,
-            }
-          )
-        } else if (declaration.init.type === 'MemberExpression') {
-          await Promise.all([...proms]) // TODO wait for previous promises, does that makes sense?
-          const prom = getMemberExpressionResult(
-            declaration.init,
-            _programMemory
-          )
-          proms.push(prom)
-          _programMemory = addItemToMemory(
-            _programMemory,
-            variableName,
-            [sourceRange],
-            promisifyMemoryItem({
-              type: 'userVal',
-              value: prom,
-              __meta,
-            })
-          )
-        } else if (declaration.init.type === 'CallExpression') {
-          const prom = executeCallExpression(
-            _programMemory,
-            declaration.init,
-            engineCommandManager,
-            previousPathToNode
-          )
-          proms.push(prom)
-          _programMemory = addItemToMemory(
-            _programMemory,
-            variableName,
-            [sourceRange],
-            prom.then((a) => {
-              return a?.type === 'sketchGroup' || a?.type === 'extrudeGroup'
-                ? a
-                : {
-                    type: 'userVal',
-                    value: a,
-                    __meta,
-                  }
-            })
-          )
-        } else {
-          throw new KCLSyntaxError(
-            'Unsupported declaration type: ' + declaration.init.type,
-            [[declaration.start, declaration.end]]
-          )
-        }
-      }
-    } else if (statement.type === 'ExpressionStatement') {
-      const expression = statement.expression
-      if (expression.type === 'CallExpression') {
-        const functionName = expression.callee.name
-        const args = expression.arguments.map((arg) => {
-          if (arg.type === 'Literal') {
-            return arg.value
-          } else if (arg.type === 'Identifier') {
-            return _programMemory.root[arg.name]?.value
-          }
-        })
-        if ('show' === functionName) {
-          if (options.bodyType !== 'root') {
-            throw new KCLSemanticError(
-              `Cannot call ${functionName} outside of a root`,
-              [[statement.start, statement.end]]
-            )
-          }
-          _programMemory.return = expression.arguments as any // todo memory redo
-        } else {
-          if (_programMemory.root[functionName] === undefined) {
-            throw new KCLSemanticError(`No such name ${functionName} defined`, [
-              [statement.start, statement.end],
-            ])
-          }
-          _programMemory.root[functionName].value(...args)
-        }
-      }
-    } else if (statement.type === 'ReturnStatement') {
-      if (statement.argument.type === 'BinaryExpression') {
-        const prom = getBinaryExpressionResult(
-          statement.argument,
-          _programMemory,
-          engineCommandManager
-        )
-        proms.push(prom)
-        _programMemory.return = await prom
-      }
-    }
-  }
-  await Promise.all(proms)
-  return _programMemory
-}
-
-function getMemberExpressionResult(
-  expression: MemberExpression,
-  programMemory: ProgramMemory
-) {
-  const propertyName = (
-    expression.property.type === 'Identifier'
-      ? expression.property.name
-      : expression.property.value
-  ) as any
-  const object: any =
-    expression.object.type === 'MemberExpression'
-      ? getMemberExpressionResult(expression.object, programMemory)
-      : programMemory.root[expression.object.name]?.value
-  return object?.[propertyName]
-}
-
-async function getBinaryExpressionResult(
-  expression: BinaryExpression,
-  programMemory: ProgramMemory,
-  engineCommandManager: EngineCommandManager,
-  pipeInfo: {
-    isInPipe: boolean
-    previousResults: any[]
-    expressionIndex: number
-    body: PipeExpression['body']
-    sourceRangeOverride?: SourceRange
-  } = {
-    isInPipe: false,
-    previousResults: [],
-    expressionIndex: 0,
-    body: [],
-  }
-) {
-  const _pipeInfo = {
-    ...pipeInfo,
-    isInPipe: false,
-  }
-  const left = await getBinaryPartResult(
-    expression.left,
-    programMemory,
-    engineCommandManager,
-    _pipeInfo
-  )
-  const right = await getBinaryPartResult(
-    expression.right,
-    programMemory,
-    engineCommandManager,
-    _pipeInfo
-  )
-  if (expression.operator === '+') return left + right
-  if (expression.operator === '-') return left - right
-  if (expression.operator === '*') return left * right
-  if (expression.operator === '/') return left / right
-  if (expression.operator === '%') return left % right
-}
-
-async function getBinaryPartResult(
-  part: BinaryPart,
-  programMemory: ProgramMemory,
-  engineCommandManager: EngineCommandManager,
-  pipeInfo: {
-    isInPipe: boolean
-    previousResults: any[]
-    expressionIndex: number
-    body: PipeExpression['body']
-    sourceRangeOverride?: SourceRange
-  } = {
-    isInPipe: false,
-    previousResults: [],
-    expressionIndex: 0,
-    body: [],
-  }
-): Promise<any> {
-  const _pipeInfo = {
-    ...pipeInfo,
-    isInPipe: false,
-  }
-  if (part.type === 'Literal') {
-    return part.value
-  } else if (part.type === 'Identifier') {
-    return programMemory.root[part.name].value
-  } else if (part.type === 'BinaryExpression') {
-    const prom = getBinaryExpressionResult(
-      part,
-      programMemory,
-      engineCommandManager,
-      _pipeInfo
-    )
-    const result = await prom
-    return result
-  } else if (part.type === 'CallExpression') {
-    const result = await executeCallExpression(
-      programMemory,
-      part,
-      engineCommandManager,
-      [],
-      _pipeInfo
-    )
-    return result
+    console.log(kclError)
+    throw kclError
   }
 }
-
-async function getUnaryExpressionResult(
-  expression: UnaryExpression,
-  programMemory: ProgramMemory,
-  engineCommandManager: EngineCommandManager,
-  pipeInfo: {
-    isInPipe: boolean
-    previousResults: any[]
-    expressionIndex: number
-    body: PipeExpression['body']
-    sourceRangeOverride?: SourceRange
-  } = {
-    isInPipe: false,
-    previousResults: [],
-    expressionIndex: 0,
-    body: [],
-  }
-) {
-  return -(await getBinaryPartResult(
-    expression.argument,
-    programMemory,
-    engineCommandManager,
-    {
-      ...pipeInfo,
-      isInPipe: false,
-    }
-  ))
-}
-
-async function getPipeExpressionResult(
-  expression: PipeExpression,
-  programMemory: ProgramMemory,
-  engineCommandManager: EngineCommandManager,
-  previousPathToNode: PathToNode = []
-) {
-  const executedBody = await executePipeBody(
-    expression.body,
-    programMemory,
-    engineCommandManager,
-    previousPathToNode
-  )
-  const result = executedBody[executedBody.length - 1]
-  return result
-}
-
-async function executePipeBody(
-  body: PipeExpression['body'],
-  programMemory: ProgramMemory,
-  engineCommandManager: EngineCommandManager,
-  previousPathToNode: PathToNode = [],
-  expressionIndex = 0,
-  previousResults: any[] = []
-): Promise<any[]> {
-  if (expressionIndex === body.length) {
-    return previousResults
-  }
-  const expression = body[expressionIndex]
-  if (expression.type === 'BinaryExpression') {
-    const result = await getBinaryExpressionResult(
-      expression,
-      programMemory,
-      engineCommandManager
-    )
-    return executePipeBody(
-      body,
-      programMemory,
-      engineCommandManager,
-      previousPathToNode,
-      expressionIndex + 1,
-      [...previousResults, result]
-    )
-  } else if (expression.type === 'CallExpression') {
-    return await executeCallExpression(
-      programMemory,
-      expression,
-      engineCommandManager,
-      previousPathToNode,
-      {
-        isInPipe: true,
-        previousResults,
-        expressionIndex,
-        body,
-      }
-    )
-  }
-
-  throw new KCLSyntaxError('Invalid pipe expression', [
-    [expression.start, expression.end],
-  ])
-}
-
-async function executeObjectExpression(
-  _programMemory: ProgramMemory,
-  objExp: ObjectExpression,
-  engineCommandManager: EngineCommandManager,
-  pipeInfo: {
-    isInPipe: boolean
-    previousResults: any[]
-    expressionIndex: number
-    body: PipeExpression['body']
-    sourceRangeOverride?: SourceRange
-  } = {
-    isInPipe: false,
-    previousResults: [],
-    expressionIndex: 0,
-    body: [],
-  }
-) {
-  const _pipeInfo = {
-    ...pipeInfo,
-    isInPipe: false,
-  }
-  const obj: { [key: string]: any } = {}
-  const proms: Promise<any>[] = []
-  objExp.properties.forEach(async (property) => {
-    if (property.type === 'ObjectProperty') {
-      if (property.value.type === 'Literal') {
-        obj[property.key.name] = property.value.value
-      } else if (property.value.type === 'BinaryExpression') {
-        const prom = getBinaryExpressionResult(
-          property.value,
-          _programMemory,
-          engineCommandManager,
-          _pipeInfo
-        )
-        proms.push(prom)
-        obj[property.key.name] = await prom
-      } else if (property.value.type === 'PipeExpression') {
-        const prom = getPipeExpressionResult(
-          property.value,
-          _programMemory,
-          engineCommandManager
-        )
-        proms.push(prom)
-        obj[property.key.name] = await prom
-      } else if (property.value.type === 'Identifier') {
-        obj[property.key.name] = (
-          await getMemoryItem(_programMemory, property.value.name, [
-            [property.value.start, property.value.end],
-          ])
-        ).value
-      } else if (property.value.type === 'ObjectExpression') {
-        const prom = executeObjectExpression(
-          _programMemory,
-          property.value,
-          engineCommandManager
-        )
-        proms.push(prom)
-        obj[property.key.name] = await prom
-      } else if (property.value.type === 'ArrayExpression') {
-        const prom = executeArrayExpression(
-          _programMemory,
-          property.value,
-          engineCommandManager
-        )
-        proms.push(prom)
-        obj[property.key.name] = await prom
-      } else if (property.value.type === 'CallExpression') {
-        const prom = executeCallExpression(
-          _programMemory,
-          property.value,
-          engineCommandManager,
-          [],
-          _pipeInfo
-        )
-        proms.push(prom)
-        const result = await prom
-        obj[property.key.name] = result
-      } else if (property.value.type === 'UnaryExpression') {
-        const prom = getUnaryExpressionResult(
-          property.value,
-          _programMemory,
-          engineCommandManager
-        )
-        proms.push(prom)
-        obj[property.key.name] = await prom
-      } else {
-        throw new KCLSyntaxError(
-          `Unexpected property type ${property.value.type} in object expression`,
-          [[property.value.start, property.value.end]]
-        )
-      }
-    } else {
-      throw new KCLSyntaxError(
-        `Unexpected property type ${property.type} in object expression`,
-        [[property.value.start, property.value.end]]
-      )
-    }
-  })
-  await Promise.all(proms)
-  return obj
-}
-
-async function executeArrayExpression(
-  _programMemory: ProgramMemory,
-  arrExp: ArrayExpression,
-  engineCommandManager: EngineCommandManager,
-  pipeInfo: {
-    isInPipe: boolean
-    previousResults: any[]
-    expressionIndex: number
-    body: PipeExpression['body']
-    sourceRangeOverride?: SourceRange
-  } = {
-    isInPipe: false,
-    previousResults: [],
-    expressionIndex: 0,
-    body: [],
-  }
-) {
-  const _pipeInfo = {
-    ...pipeInfo,
-    isInPipe: false,
-  }
-  return await Promise.all(
-    arrExp.elements.map((el) => {
-      if (el.type === 'Literal') {
-        return el.value
-      } else if (el.type === 'Identifier') {
-        return _programMemory.root?.[el.name]?.value
-      } else if (el.type === 'BinaryExpression') {
-        return getBinaryExpressionResult(
-          el,
-          _programMemory,
-          engineCommandManager,
-          _pipeInfo
-        )
-      } else if (el.type === 'ObjectExpression') {
-        return executeObjectExpression(_programMemory, el, engineCommandManager)
-      } else if (el.type === 'CallExpression') {
-        const result: any = executeCallExpression(
-          _programMemory,
-          el,
-          engineCommandManager,
-          [],
-          _pipeInfo
-        )
-        return result
-      } else if (el.type === 'UnaryExpression') {
-        return getUnaryExpressionResult(
-          el,
-          _programMemory,
-          engineCommandManager,
-          {
-            ...pipeInfo,
-            isInPipe: false,
-          }
-        )
-      }
-      throw new KCLTypeError('Invalid argument type', [[el.start, el.end]])
-    })
-  )
-}
-
-async function executeCallExpression(
-  programMemory: ProgramMemory,
-  expression: CallExpression,
-  engineCommandManager: EngineCommandManager,
-  previousPathToNode: PathToNode = [],
-  pipeInfo: {
-    isInPipe: boolean
-    previousResults: any[]
-    expressionIndex: number
-    body: PipeExpression['body']
-    sourceRangeOverride?: SourceRange
-  } = {
-    isInPipe: false,
-    previousResults: [],
-    expressionIndex: 0,
-    body: [],
-  }
-) {
-  const {
-    isInPipe,
-    previousResults,
-    expressionIndex,
-    body,
-    sourceRangeOverride,
-  } = pipeInfo
-  const functionName = expression?.callee?.name
-  const _pipeInfo = {
-    ...pipeInfo,
-    isInPipe: false,
-  }
-  const fnArgs = await Promise.all(
-    expression?.arguments?.map(async (arg) => {
-      if (arg.type === 'Literal') {
-        return arg.value
-      } else if (arg.type === 'Identifier') {
-        await new Promise((r) => setTimeout(r)) // push into next even loop, but also probably should fix this
-        const temp = await getMemoryItem(programMemory, arg.name, [
-          [arg.start, arg.end],
-        ])
-        return temp?.type === 'userVal' ? temp.value : temp
-      } else if (arg.type === 'PipeSubstitution') {
-        return previousResults[expressionIndex - 1]
-      } else if (arg.type === 'ArrayExpression') {
-        return await executeArrayExpression(
-          programMemory,
-          arg,
-          engineCommandManager,
-          pipeInfo
-        )
-      } else if (arg.type === 'CallExpression') {
-        const result: any = await executeCallExpression(
-          programMemory,
-          arg,
-          engineCommandManager,
-          previousPathToNode,
-          _pipeInfo
-        )
-        return result
-      } else if (arg.type === 'ObjectExpression') {
-        return await executeObjectExpression(
-          programMemory,
-          arg,
-          engineCommandManager,
-          _pipeInfo
-        )
-      } else if (arg.type === 'UnaryExpression') {
-        return getUnaryExpressionResult(
-          arg,
-          programMemory,
-          engineCommandManager,
-          _pipeInfo
-        )
-      } else if (arg.type === 'BinaryExpression') {
-        return getBinaryExpressionResult(
-          arg,
-          programMemory,
-          engineCommandManager,
-          _pipeInfo
-        )
-      }
-      throw new KCLSyntaxError('Invalid argument type in function call', [
-        [arg.start, arg.end],
-      ])
-    })
-  )
-  if (functionName in internalFns) {
-    const fnNameWithSketchOrExtrude = functionName as InternalFnNames
-    const result = await internalFns[fnNameWithSketchOrExtrude](
-      {
-        programMemory,
-        sourceRange: sourceRangeOverride || [expression.start, expression.end],
-        engineCommandManager,
-        code: JSON.stringify(expression),
-      },
-      fnArgs[0],
-      fnArgs[1],
-      fnArgs[2]
-    )
-    return isInPipe
-      ? await executePipeBody(
-          body,
-          programMemory,
-          engineCommandManager,
-          previousPathToNode,
-          expressionIndex + 1,
-          [...previousResults, result]
-        )
-      : result
-  }
-  const result = await programMemory.root[functionName].value(...fnArgs)
-  return isInPipe
-    ? await executePipeBody(
-        body,
-        programMemory,
-        engineCommandManager,
-        previousPathToNode,
-        expressionIndex + 1,
-        [...previousResults, result]
-      )
-    : result
-}

src/lang/modifyAst.test.ts

@@ -114,7 +114,8 @@ describe('Testing addSketchTo', () => {
     expect(str).toBe(`const part001 = startSketchAt('default')
   |> ry(90, %)
   |> line('default', %)
-show(part001)`)
+show(part001)
+`)
   })
 })
 
@@ -179,17 +180,20 @@ describe('Testing moveValueIntoNewVariable', () => {
   return x
 }
 `
-  const code = `${fn('def')}${fn('ghi')}${fn('jkl')}${fn('hmm')}
+  const code = `${fn('def')}${fn('jkl')}${fn('hmm')}
+fn ghi = (x) => {
+    return 2
+}
 const abc = 3
 const identifierGuy = 5
+const yo = 5 + 6
 const part001 = startSketchAt([-1.2, 4.83])
 |> line([2.8, 0], %)
 |> angledLine([100 + 100, 3.09], %)
 |> angledLine([abc, 3.09], %)
-|> angledLine([def('yo'), 3.09], %)
+|> angledLine([def(yo), 3.09], %)
 |> angledLine([ghi(%), 3.09], %)
-|> angledLine([jkl('yo') + 2, 3.09], %)
-const yo = 5 + 6
+|> angledLine([jkl(yo) + 2, 3.09], %)
 const yo2 = hmm([identifierGuy + 5])
 show(part001)`
   it('should move a binary expression into a new variable', async () => {
@@ -231,7 +235,7 @@ show(part001)`
       'newVar'
     )
     const newCode = recast(modifiedAst)
-    expect(newCode).toContain(`const newVar = def('yo')`)
+    expect(newCode).toContain(`const newVar = def(yo)`)
     expect(newCode).toContain(`angledLine([newVar, 3.09], %)`)
   })
   it('should move a binary expression with call expression into a new variable', async () => {
@@ -245,7 +249,7 @@ show(part001)`
       'newVar'
     )
     const newCode = recast(modifiedAst)
-    expect(newCode).toContain(`const newVar = jkl('yo') + 2`)
+    expect(newCode).toContain(`const newVar = jkl(yo) + 2`)
     expect(newCode).toContain(`angledLine([newVar, 3.09], %)`)
   })
   it('should move a identifier into a new variable', async () => {

src/lang/modifyAst.ts

@@ -28,6 +28,46 @@ import {
   createFirstArg,
 } from './std/sketch'
 
+export function addStartSketch(
+  node: Program,
+  start: [number, number],
+  end: [number, number]
+): { modifiedAst: Program; id: string; pathToNode: PathToNode } {
+  const _node = { ...node }
+  const _name = findUniqueName(node, 'part')
+
+  const startSketchAt = createCallExpression('startSketchAt', [
+    createArrayExpression([createLiteral(start[0]), createLiteral(start[1])]),
+  ])
+  const initialLineTo = createCallExpression('line', [
+    createArrayExpression([createLiteral(end[0]), createLiteral(end[1])]),
+    createPipeSubstitution(),
+  ])
+
+  const pipeBody = [startSketchAt, initialLineTo]
+
+  const variableDeclaration = createVariableDeclaration(
+    _name,
+    createPipeExpression(pipeBody)
+  )
+
+  _node.body = [...node.body, variableDeclaration]
+
+  let pathToNode: PathToNode = [
+    ['body', ''],
+    ['0', 'index'],
+    ['declarations', 'VariableDeclaration'],
+    ['0', 'index'],
+    ['init', 'VariableDeclarator'],
+  ]
+
+  return {
+    modifiedAst: _node,
+    id: _name,
+    pathToNode,
+  }
+}
+
 export function addSketchTo(
   node: Program,
   axis: 'xy' | 'xz' | 'yz',
@@ -36,14 +76,14 @@ export function addSketchTo(
   const _node = { ...node }
   const _name = name || findUniqueName(node, 'part')
 
-  const startSketchAt = createCallExpression('startSketchAt', [
+  const startSketchAt = createCallExpressionStdLib('startSketchAt', [
     createLiteral('default'),
   ])
   const rotate = createCallExpression(axis === 'xz' ? 'rx' : 'ry', [
     createLiteral(90),
     createPipeSubstitution(),
   ])
-  const initialLineTo = createCallExpression('line', [
+  const initialLineTo = createCallExpressionStdLib('line', [
     createLiteral('default'),
     createPipeSubstitution(),
   ])
@@ -112,7 +152,9 @@ function addToShow(node: Program, name: string): Program {
   const dumbyStartend = { start: 0, end: 0 }
   const showCallIndex = getShowIndex(_node)
   if (showCallIndex === -1) {
-    const showCall = createCallExpression('show', [createIdentifier(name)])
+    const showCall = createCallExpressionStdLib('show', [
+      createIdentifier(name),
+    ])
     const showExpressionStatement: ExpressionStatement = {
       type: 'ExpressionStatement',
       ...dumbyStartend,
@@ -124,7 +166,7 @@ function addToShow(node: Program, name: string): Program {
   const showCall = { ..._node.body[showCallIndex] } as ExpressionStatement
   const showCallArgs = (showCall.expression as CallExpression).arguments
   const newShowCallArgs: Value[] = [...showCallArgs, createIdentifier(name)]
-  const newShowExpression = createCallExpression('show', newShowCallArgs)
+  const newShowExpression = createCallExpressionStdLib('show', newShowCallArgs)
 
   _node.body[showCallIndex] = {
     ...showCall,
@@ -225,7 +267,7 @@ export function extrudeSketch(
   const { node: variableDeclorator, shallowPath: pathToDecleration } =
     getNodeFromPath<VariableDeclarator>(_node, pathToNode, 'VariableDeclarator')
 
-  const extrudeCall = createCallExpression('extrude', [
+  const extrudeCall = createCallExpressionStdLib('extrude', [
     createLiteral(4),
     shouldPipe
       ? createPipeSubstitution()
@@ -313,15 +355,15 @@ export function sketchOnExtrudedFace(
   const newSketch = createVariableDeclaration(
     newSketchName,
     createPipeExpression([
-      createCallExpression('startSketchAt', [
+      createCallExpressionStdLib('startSketchAt', [
         createArrayExpression([createLiteral(0), createLiteral(0)]),
       ]),
-      createCallExpression('lineTo', [
+      createCallExpressionStdLib('lineTo', [
         createArrayExpression([createLiteral(1), createLiteral(1)]),
         createPipeSubstitution(),
       ]),
       createCallExpression('transform', [
-        createCallExpression('getExtrudeWallTransform', [
+        createCallExpressionStdLib('getExtrudeWallTransform', [
           createLiteral(tag),
           createIdentifier(oldSketchName),
         ]),
@@ -414,6 +456,40 @@ export function createPipeSubstitution(): PipeSubstitution {
   }
 }
 
+export function createCallExpressionStdLib(
+  name: string,
+  args: CallExpression['arguments']
+): CallExpression {
+  return {
+    type: 'CallExpression',
+    start: 0,
+    end: 0,
+    callee: {
+      type: 'Identifier',
+      start: 0,
+      end: 0,
+      name,
+    },
+    function: {
+      type: 'StdLib',
+      func: {
+        // We only need the name here to map it back when it serializes
+        // to rust, don't worry about the rest.
+        name,
+        summary: '',
+        description: '',
+        tags: [],
+        returnValue: { type: '', required: false, name: '', schema: {} },
+        args: [],
+        unpublished: false,
+        deprecated: false,
+      },
+    },
+    optional: false,
+    arguments: args,
+  }
+}
+
 export function createCallExpression(
   name: string,
   args: CallExpression['arguments']
@@ -428,6 +504,9 @@ export function createCallExpression(
       end: 0,
       name,
     },
+    function: {
+      type: 'InMemory',
+    },
     optional: false,
     arguments: args,
   }

src/lang/recast.test.ts

@@ -11,26 +11,27 @@ describe('recast', () => {
     const code = '1 + 2'
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(code)
+    expect(recasted.trim()).toBe(code)
   })
   it('variable declaration', () => {
     const code = 'const myVar = 5'
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(code)
+    expect(recasted.trim()).toBe(code)
   })
   it("variable declaration that's binary with string", () => {
     const code = "const myVar = 5 + 'yo'"
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(code)
+    expect(recasted.trim()).toBe(code)
     const codeWithOtherQuotes = 'const myVar = 5 + "yo"'
     const { ast: ast2 } = code2ast(codeWithOtherQuotes)
-    expect(recast(ast2)).toBe(codeWithOtherQuotes)
+    expect(recast(ast2).trim()).toBe(codeWithOtherQuotes)
   })
   it('test assigning two variables, the second summing with the first', () => {
     const code = `const myVar = 5
-const newVar = myVar + 1`
+const newVar = myVar + 1
+`
     const { ast } = code2ast(code)
     const recasted = recast(ast)
     expect(recasted).toBe(code)
@@ -42,12 +43,12 @@ const newVar = myVar + 1`
     )
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(code.trim())
+    expect(recasted.trim()).toBe(code.trim())
   })
   it('test with function call', () => {
-    const code = `
-const myVar = "hello"
-log(5, myVar)`
+    const code = `const myVar = "hello"
+log(5, myVar)
+`
     const { ast } = code2ast(code)
     const recasted = recast(ast)
     expect(recasted).toBe(code)
@@ -62,7 +63,7 @@ log(5, myVar)`
     ].join('\n')
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(code)
+    expect(recasted.trim()).toBe(code)
   })
   it('recast sketch declaration', () => {
     let code = `const mySketch = startSketchAt([0, 0])
@@ -75,7 +76,7 @@ show(mySketch)
 `
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(code.trim())
+    expect(recasted).toBe(code)
   })
   it('sketch piped into callExpression', () => {
     const code = [
@@ -87,7 +88,7 @@ show(mySketch)
     ].join('\n')
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(code.trim())
+    expect(recasted.trim()).toBe(code.trim())
   })
   it('recast BinaryExpression piped into CallExpression', () => {
     const code = [
@@ -99,37 +100,37 @@ show(mySketch)
     ].join('\n')
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(code)
+    expect(recasted.trim()).toBe(code)
   })
   it('recast nested binary expression', () => {
     const code = ['const myVar = 1 + 2 * 5'].join('\n')
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(code.trim())
+    expect(recasted.trim()).toBe(code.trim())
   })
   it('recast nested binary expression with parans', () => {
     const code = ['const myVar = 1 + (1 + 2) * 5'].join('\n')
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(code.trim())
+    expect(recasted.trim()).toBe(code.trim())
   })
   it('unnecessary paran wrap will be remove', () => {
     const code = ['const myVar = 1 + (2 * 5)'].join('\n')
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(code.replace('(', '').replace(')', ''))
+    expect(recasted.trim()).toBe(code.replace('(', '').replace(')', ''))
   })
   it('complex nested binary expression', () => {
     const code = ['1 * ((2 + 3) / 4 + 5)'].join('\n')
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(code.trim())
+    expect(recasted.trim()).toBe(code.trim())
   })
   it('multiplied paren expressions', () => {
     const code = ['3 + (1 + 2) * (3 + 4)'].join('\n')
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(code.trim())
+    expect(recasted.trim()).toBe(code.trim())
   })
   it('recast array declaration', () => {
     const code = ['const three = 3', "const yo = [1, '2', three, 4 + 5]"].join(
@@ -137,7 +138,7 @@ show(mySketch)
     )
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(code.trim())
+    expect(recasted.trim()).toBe(code.trim())
   })
   it('recast long array declaration', () => {
     const code = [
@@ -152,7 +153,7 @@ show(mySketch)
     ].join('\n')
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(code.trim())
+    expect(recasted.trim()).toBe(code.trim())
   })
   it('recast long object exectution', () => {
     const code = `const three = 3
@@ -161,35 +162,38 @@ const yo = {
   anum: 2,
   identifier: three,
   binExp: 4 + 5
-}`
+}
+`
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(code.trim())
+    expect(recasted).toBe(code)
   })
   it('recast short object exectution', () => {
-    const code = `const yo = { key: 'val' }`
+    const code = `const yo = { key: 'val' }
+`
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(code.trim())
+    expect(recasted).toBe(code)
   })
   it('recast object execution with member expression', () => {
     const code = `const yo = { a: { b: { c: '123' } } }
 const key = 'c'
 const myVar = yo.a['b'][key]
 const key2 = 'b'
-const myVar2 = yo['a'][key2].c`
+const myVar2 = yo['a'][key2].c
+`
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(code.trim())
+    expect(recasted).toBe(code)
   })
 })
 
 describe('testing recasting with comments and whitespace', () => {
   it('code with comments', () => {
-    const code = `
-const yo = { a: { b: { c: '123' } } }
+    const code = `const yo = { a: { b: { c: '123' } } }
 // this is a comment
-const key = 'c'`
+const key = 'c'
+`
 
     const { ast } = code2ast(code)
     const recasted = recast(ast)
@@ -197,38 +201,39 @@ const key = 'c'`
     expect(recasted).toBe(code)
   })
   it('code with comment and extra lines', () => {
-    const code = `
-const yo = 'c' /* this is
+    const code = `const yo = 'c'
+
+/* this is
 a
 comment */
-
-const yo = 'bing'`
+const yo = 'bing'
+`
     const { ast } = code2ast(code)
     const recasted = recast(ast)
     expect(recasted).toBe(code)
   })
   it('comments at the start and end', () => {
-    const code = `
-// this is a comment
-
+    const code = `// this is a comment
 const yo = { a: { b: { c: '123' } } }
 const key = 'c'
 
-// this is also a comment`
+// this is also a comment
+`
     const { ast } = code2ast(code)
     const recasted = recast(ast)
     expect(recasted).toBe(code)
   })
   it('comments in a fn block', () => {
-    const code = `
-const myFn = () => {
+    const code = `const myFn = () => {
   // this is a comment
-  const yo = { a: { b: { c: '123' } } } /* block
-  comment */
+  const yo = { a: { b: { c: '123' } } }
 
+  /* block
+  comment */
   const key = 'c'
   // this is also a comment
-}`
+}
+`
     const { ast } = code2ast(code)
     const recasted = recast(ast)
     expect(recasted).toBe(code)
@@ -244,7 +249,7 @@ const myFn = () => {
     ].join('\n')
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(code)
+    expect(recasted.trim()).toBe(code)
   })
   it('comments sprinkled in all over the place', () => {
     const code = `
@@ -266,10 +271,26 @@ const mySk1 = startSketchAt([0, 0])
   |> rx(45, %)
   /*
   one more for good measure
-  */`
+  */
+`
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(code)
+    expect(recasted).toBe(`// comment at start
+const mySk1 = startSketchAt([0, 0])
+  |> lineTo([1, 1], %)
+  // comment here
+  |> lineTo({ to: [0, 1], tag: 'myTag' }, %)
+  |> lineTo([1, 1], %)
+  /* and
+  here
+
+a comment between pipe expression statements */
+  |> rx(90, %)
+  // and another with just white space between others below
+  |> ry(45, %)
+  |> rx(45, %)
+// one more for good measure
+`)
   })
 })
 
@@ -278,28 +299,28 @@ describe('testing call Expressions in BinaryExpressions and UnaryExpressions', (
     const code = 'const myVar = 2 + min(100, legLen(5, 3))'
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(code)
+    expect(recasted.trim()).toBe(code)
   })
   it('nested callExpression in unaryExpression', () => {
     const code = 'const myVar = -min(100, legLen(5, 3))'
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(code)
+    expect(recasted.trim()).toBe(code)
   })
   it('with unaryExpression in callExpression', () => {
     const code = 'const myVar = min(5, -legLen(5, 4))'
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(code)
+    expect(recasted.trim()).toBe(code)
   })
   it('with unaryExpression in sketch situation', () => {
     const code = [
       'const part001 = startSketchAt([0, 0])',
-      '|> line([-2.21, -legLen(5, min(3, 999))], %)',
+      '  |> line([-2.21, -legLen(5, min(3, 999))], %)',
     ].join('\n')
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(code)
+    expect(recasted.trim()).toBe(code)
   })
 })
 
@@ -314,7 +335,8 @@ describe('it recasts wrapped object expressions in pipe bodies with correct inde
        intersectTag: 'seg01'
      }, %)
   |> line([-0.42, -1.72], %)
-show(part001)`
+show(part001)
+`
     const { ast } = code2ast(code)
     const recasted = recast(ast)
     expect(recasted).toBe(code)
@@ -324,7 +346,8 @@ show(part001)`
   angle: 201,
   offset: -1.35,
   intersectTag: 'seg01'
-}, %)`
+}, %)
+`
     const { ast } = code2ast(code)
     const recasted = recast(ast)
     expect(recasted).toBe(code)
@@ -333,7 +356,8 @@ show(part001)`
 
 describe('it recasts binary expression using brackets where needed', () => {
   it('when there are two minus in a row', () => {
-    const code = `const part001 = 1 - (def - abc)`
+    const code = `const part001 = 1 - (def - abc)
+`
     const recasted = recast(code2ast(code).ast)
     expect(recasted).toBe(code)
   })

src/lang/recast.ts

@@ -1,9 +1,9 @@
 import { Program } from './abstractSyntaxTreeTypes'
-import { recast_js } from '../wasm-lib/pkg/wasm_lib'
+import { recast_wasm } from '../wasm-lib/pkg/wasm_lib'
 
 export const recast = (ast: Program): string => {
   try {
-    const s: string = recast_js(JSON.stringify(ast))
+    const s: string = recast_wasm(JSON.stringify(ast))
     return s
   } catch (e) {
     // TODO: do something real with the error.

src/lang/std/engineConnection.ts

@@ -1,15 +1,23 @@
-import { SourceRange } from '../executor'
-import { Selections } from '../../useStore'
-import { VITE_KC_API_WS_MODELING_URL } from '../../env'
+import { SourceRange } from 'lang/executor'
+import { Selections } from 'useStore'
+import { VITE_KC_API_WS_MODELING_URL, VITE_KC_CONNECTION_TIMEOUT_MS } from 'env'
 import { Models } from '@kittycad/lib'
-import { exportSave } from '../../lib/exportSave'
+import { exportSave } from 'lib/exportSave'
 import { v4 as uuidv4 } from 'uuid'
+import * as Sentry from '@sentry/react'
 
-interface ResultCommand {
+let lastMessage = ''
+
+interface CommandInfo {
+  commandType: CommandTypes
+  range: SourceRange
+  parentId?: string
+}
+interface ResultCommand extends CommandInfo {
   type: 'result'
   data: any
 }
-interface PendingCommand {
+interface PendingCommand extends CommandInfo {
   type: 'pending'
   promise: Promise<any>
   resolve: (val: any) => void
@@ -22,21 +30,14 @@ export interface SourceRangeMap {
   [key: string]: SourceRange
 }
 
-interface SelectionsArgs {
-  id: string
-  type: Selections['codeBasedSelections'][number]['type']
+interface NewTrackArgs {
+  conn: EngineConnection
+  mediaStream: MediaStream
 }
 
-interface CursorSelectionsArgs {
-  otherSelections: Selections['otherSelections']
-  idBasedSelections: { type: string; id: string }[]
-}
+type WebSocketResponse = Models['OkWebSocketResponseData_type']
 
-export type EngineCommand = Models['WebSocketMessages_type']
-
-type OkResponse = Models['OkModelingCmdResponse_type']
-
-type WebSocketResponse = Models['WebSocketResponses_type']
+type ClientMetrics = Models['ClientMetrics_type']
 
 // EngineConnection encapsulates the connection(s) to the Engine
 // for the EngineCommandManager; namely, the underlying WebSocket
@@ -44,44 +45,124 @@ type WebSocketResponse = Models['WebSocketResponses_type']
 export class EngineConnection {
   websocket?: WebSocket
   pc?: RTCPeerConnection
-  lossyDataChannel?: RTCDataChannel
+  unreliableDataChannel?: RTCDataChannel
 
-  onConnectionStarted: (conn: EngineConnection) => void = () => {}
-
-  waitForReady: Promise<void> = new Promise(() => {})
-  private resolveReady = () => {}
+  private ready: boolean
 
   readonly url: string
   private readonly token?: string
+  private onWebsocketOpen: (engineConnection: EngineConnection) => void
+  private onDataChannelOpen: (engineConnection: EngineConnection) => void
+  private onEngineConnectionOpen: (engineConnection: EngineConnection) => void
+  private onConnectionStarted: (engineConnection: EngineConnection) => void
+  private onClose: (engineConnection: EngineConnection) => void
+  private onNewTrack: (track: NewTrackArgs) => void
+
+  // TODO: actual type is ClientMetrics
+  private webrtcStatsCollector?: () => Promise<ClientMetrics>
 
   constructor({
     url,
     token,
-    onConnectionStarted,
+    onWebsocketOpen = () => {},
+    onNewTrack = () => {},
+    onEngineConnectionOpen = () => {},
+    onConnectionStarted = () => {},
+    onClose = () => {},
+    onDataChannelOpen = () => {},
   }: {
     url: string
     token?: string
-    onConnectionStarted: (conn: EngineConnection) => void
+    onWebsocketOpen?: (engineConnection: EngineConnection) => void
+    onDataChannelOpen?: (engineConnection: EngineConnection) => void
+    onEngineConnectionOpen?: (engineConnection: EngineConnection) => void
+    onConnectionStarted?: (engineConnection: EngineConnection) => void
+    onClose?: (engineConnection: EngineConnection) => void
+    onNewTrack?: (track: NewTrackArgs) => void
   }) {
     this.url = url
     this.token = token
+    this.ready = false
+    this.onWebsocketOpen = onWebsocketOpen
+    this.onDataChannelOpen = onDataChannelOpen
+    this.onEngineConnectionOpen = onEngineConnectionOpen
     this.onConnectionStarted = onConnectionStarted
+    this.onClose = onClose
+    this.onNewTrack = onNewTrack
 
-    // TODO(paultag): This isn't right; this should be when the
-    // connection is in a good place, and tied to the connect() method,
-    // but this is part of a larger refactor to untangle logic. Once the
-    // Connection is pulled apart, we can rework how ready is represented.
-    // This was just the easiest way to ensure some level of parity between
-    // the CommandManager and the Connection until I send a rework for
-    // retry logic.
-    this.waitForReady = new Promise((resolve) => {
-      this.resolveReady = resolve
+    // TODO(paultag): This ought to be tweakable.
+    const pingIntervalMs = 10000
+
+    setInterval(() => {
+      if (this.isReady()) {
+        // When we're online, every 10 seconds, we'll attempt to put a 'ping'
+        // command through the WebSocket connection. This will help both ends
+        // of the connection maintain the TCP connection without hitting a
+        // timeout condition.
+        this.send({ type: 'ping' })
+      }
+    }, pingIntervalMs)
+  }
+  // isReady will return true only when the WebRTC *and* WebSocket connection
+  // are connected. During setup, the WebSocket connection comes online first,
+  // which is used to establish the WebRTC connection. The EngineConnection
+  // is not "Ready" until both are connected.
+  isReady() {
+    return this.ready
+  }
+  // shouldTrace will return true when Sentry should be used to instrument
+  // the Engine.
+  shouldTrace() {
+    return Sentry.getCurrentHub()?.getClient()?.getOptions()?.sendClientReports
+  }
+  // connect will attempt to connect to the Engine over a WebSocket, and
+  // establish the WebRTC connections.
+  //
+  // This will attempt the full handshake, and retry if the connection
+  // did not establish.
+  connect() {
+    // TODO(paultag): make this safe to call multiple times, and figure out
+    // when a connection is in progress (state: connecting or something).
+
+    // Information on the connect transaction
+
+    class SpanPromise {
+      span: Sentry.Span
+      promise: Promise<void>
+      resolve?: (v: void) => void
+
+      constructor(span: Sentry.Span) {
+        this.span = span
+        this.promise = new Promise((resolve) => {
+          this.resolve = (v: void) => {
+            // here we're going to invoke finish before resolving the
+            // promise so that a `.then()` will order strictly after
+            // all spans have -- for sure -- been resolved, rather than
+            // doing a `then` on this promise.
+            this.span.finish()
+            resolve(v)
+          }
         })
       }
+    }
+
+    let webrtcMediaTransaction: Sentry.Transaction
+    let websocketSpan: SpanPromise
+    let mediaTrackSpan: SpanPromise
+    let dataChannelSpan: SpanPromise
+    let handshakeSpan: SpanPromise
+    let iceSpan: SpanPromise
+
+    if (this.shouldTrace()) {
+      webrtcMediaTransaction = Sentry.startTransaction({
+        name: 'webrtc-media',
+      })
+      websocketSpan = new SpanPromise(
+        webrtcMediaTransaction.startChild({ op: 'websocket' })
+      )
+    }
 
-  connect() {
     this.websocket = new WebSocket(this.url, [])
-
     this.websocket.binaryType = 'arraybuffer'
 
     this.pc = new RTCPeerConnection()
@@ -89,18 +170,55 @@ export class EngineConnection {
     this.websocket.addEventListener('open', (event) => {
       console.log('Connected to websocket, waiting for ICE servers')
       if (this.token) {
-        this.websocket?.send(
-          JSON.stringify({ headers: { Authorization: `Bearer ${this.token}` } })
+        this.send({ headers: { Authorization: `Bearer ${this.token}` } })
+      }
+    })
+
+    this.websocket.addEventListener('open', (event) => {
+      if (this.shouldTrace()) {
+        websocketSpan.resolve?.()
+
+        handshakeSpan = new SpanPromise(
+          webrtcMediaTransaction.startChild({ op: 'handshake' })
+        )
+        iceSpan = new SpanPromise(
+          webrtcMediaTransaction.startChild({ op: 'ice' })
+        )
+        dataChannelSpan = new SpanPromise(
+          webrtcMediaTransaction.startChild({
+            op: 'data-channel',
+          })
+        )
+        mediaTrackSpan = new SpanPromise(
+          webrtcMediaTransaction.startChild({
+            op: 'media-track',
+          })
         )
       }
+
+      if (this.shouldTrace()) {
+        Promise.all([
+          handshakeSpan.promise,
+          iceSpan.promise,
+          dataChannelSpan.promise,
+          mediaTrackSpan.promise,
+        ]).then(() => {
+          console.log('All spans finished, reporting')
+          webrtcMediaTransaction?.finish()
+        })
+      }
+
+      this.onWebsocketOpen(this)
     })
 
     this.websocket.addEventListener('close', (event) => {
       console.log('websocket connection closed', event)
+      this.close()
     })
 
     this.websocket.addEventListener('error', (event) => {
       console.log('websocket connection error', event)
+      this.close()
     })
 
     this.websocket.addEventListener('message', (event) => {
@@ -115,31 +233,66 @@ export class EngineConnection {
         return
       }
 
-      const message: WebSocketResponse = JSON.parse(event.data)
+      const message: Models['WebSocketResponse_type'] = JSON.parse(event.data)
 
-      if (
-        message.type === 'sdp_answer' &&
-        message.answer.type !== 'unspecified'
-      ) {
+      if (!message.success) {
+        if (message.request_id) {
+          console.error(`Error in response to request ${message.request_id}:`)
+        } else {
+          console.error(`Error from server:`)
+        }
+        message?.errors?.forEach((error) => {
+          console.error(` - ${error.error_code}: ${error.message}`)
+        })
+        return
+      }
+
+      let resp = message.resp
+      if (!resp) {
+        // If there's no body to the response, we can bail here.
+        return
+      }
+
+      if (resp.type === 'sdp_answer') {
+        let answer = resp.data?.answer
+        if (!answer || answer.type === 'unspecified') {
+          return
+        }
+
+        if (this.pc?.signalingState !== 'stable') {
+          // If the connection is stable, we shouldn't bother updating the
+          // SDP, since we have a stable connection to the backend. If we
+          // need to renegotiate, the whole PeerConnection needs to get
+          // tore down.
           this.pc?.setRemoteDescription(
             new RTCSessionDescription({
-            type: message.answer.type,
-            sdp: message.answer.sdp,
+              type: answer.type,
+              sdp: answer.sdp,
             })
           )
-      } else if (message.type === 'trickle_ice') {
-        this.pc?.addIceCandidate(message.candidate as RTCIceCandidateInit)
-      } else if (message.type === 'ice_server_info' && this.pc) {
-        console.log('received ice_server_info')
 
-        if (message.ice_servers.length > 0) {
+          if (this.shouldTrace()) {
+            // When both ends have a local and remote SDP, we've been able to
+            // set up successfully. We'll still need to find the right ICE
+            // servers, but this is hand-shook.
+            handshakeSpan.resolve?.()
+          }
+        }
+      } else if (resp.type === 'trickle_ice') {
+        let candidate = resp.data?.candidate
+        this.pc?.addIceCandidate(candidate as RTCIceCandidateInit)
+      } else if (resp.type === 'ice_server_info' && this.pc) {
+        console.log('received ice_server_info')
+        let ice_servers = resp.data?.ice_servers
+
+        if (ice_servers?.length > 0) {
           // When we set the Configuration, we want to always force
           // iceTransportPolicy to 'relay', since we know the topology
           // of the ICE/STUN/TUN server and the engine. We don't wish to
           // talk to the engine in any configuration /other/ than relay
           // from a infra POV.
           this.pc.setConfiguration({
-            iceServers: message.ice_servers,
+            iceServers: ice_servers,
             iceTransportPolicy: 'relay',
           })
         } else {
@@ -152,29 +305,23 @@ export class EngineConnection {
         // until the end of this function is setup of our end of the
         // PeerConnection and waiting for events to fire our callbacks.
 
-        this.pc.addEventListener('connectionstatechange', (e) =>
-          console.log(this.pc?.iceConnectionState)
-        )
+        this.pc.addEventListener('connectionstatechange', (event) => {
+          if (this.pc?.iceConnectionState === 'connected') {
+            if (this.shouldTrace()) {
+              iceSpan.resolve?.()
+            }
+          }
+        })
 
         this.pc.addEventListener('icecandidate', (event) => {
           if (!this.pc || !this.websocket) return
-          if (event.candidate === null) {
-            console.log('sent sdp_offer')
-            this.websocket.send(
-              JSON.stringify({
-                type: 'sdp_offer',
-                offer: this.pc.localDescription,
-              })
-            )
-          } else {
+          if (event.candidate !== null) {
             console.log('sending trickle ice candidate')
             const { candidate } = event
-            this.websocket?.send(
-              JSON.stringify({
+            this.send({
               type: 'trickle_ice',
               candidate: candidate.toJSON(),
             })
-            )
           }
         })
 
@@ -189,43 +336,185 @@ export class EngineConnection {
           .then(async (descriptionInit) => {
             await this?.pc?.setLocalDescription(descriptionInit)
             console.log('sent sdp_offer begin')
-            const msg = JSON.stringify({
+            this.send({
               type: 'sdp_offer',
               offer: this.pc?.localDescription,
             })
-            this.websocket?.send(msg)
           })
           .catch(console.log)
+      } else if (resp.type === 'metrics_request') {
+        if (this.webrtcStatsCollector === undefined) {
+          // TODO: Error message here?
+          return
         }
+        this.webrtcStatsCollector().then((client_metrics) => {
+          this.send({
+            type: 'metrics_response',
+            metrics: client_metrics,
+          })
+        })
+      }
+
+      // TODO(paultag): This ought to be both controllable, as well as something
+      // like exponential backoff to have some grace on the backend, as well as
+      // fix responsiveness for clients that had a weird network hiccup.
+      const connectionTimeoutMs = VITE_KC_CONNECTION_TIMEOUT_MS
+
+      setTimeout(() => {
+        if (this.isReady()) {
+          return
+        }
+        console.log('engine connection timeout on connection, retrying')
+        this.close()
+        this.connect()
+      }, connectionTimeoutMs)
+    })
+
+    this.pc.addEventListener('track', (event) => {
+      const mediaStream = event.streams[0]
+
+      if (this.shouldTrace()) {
+        let mediaStreamTrack = mediaStream.getVideoTracks()[0]
+        mediaStreamTrack.addEventListener('unmute', () => {
+          // let settings = mediaStreamTrack.getSettings()
+          // mediaTrackSpan.span.setTag("fps", settings.frameRate)
+          // mediaTrackSpan.span.setTag("width", settings.width)
+          // mediaTrackSpan.span.setTag("height", settings.height)
+          mediaTrackSpan.resolve?.()
+        })
+      }
+
+      this.webrtcStatsCollector = (): Promise<ClientMetrics> => {
+        return new Promise((resolve, reject) => {
+          if (mediaStream.getVideoTracks().length !== 1) {
+            reject(new Error('too many video tracks to report'))
+            return
+          }
+
+          let videoTrack = mediaStream.getVideoTracks()[0]
+          this.pc?.getStats(videoTrack).then((videoTrackStats) => {
+            // TODO(paultag): this needs type information from the KittyCAD typescript
+            // library once it's updated
+            let client_metrics: ClientMetrics = {
+              rtc_frames_decoded: 0,
+              rtc_frames_dropped: 0,
+              rtc_frames_received: 0,
+              rtc_frames_per_second: 0,
+              rtc_freeze_count: 0,
+              rtc_jitter_sec: 0.0,
+              rtc_keyframes_decoded: 0,
+              rtc_total_freezes_duration_sec: 0.0,
+            }
+
+            // TODO(paultag): Since we can technically have multiple WebRTC
+            // video tracks (even if the Server doesn't at the moment), we
+            // ought to send stats for every video track(?), and add the stream
+            // ID into it.  This raises the cardinality of collected metrics
+            // when/if we do, but for now, just report the one stream.
+
+            videoTrackStats.forEach((videoTrackReport) => {
+              if (videoTrackReport.type === 'inbound-rtp') {
+                client_metrics.rtc_frames_decoded =
+                  videoTrackReport.framesDecoded
+                client_metrics.rtc_frames_dropped =
+                  videoTrackReport.framesDropped
+                client_metrics.rtc_frames_received =
+                  videoTrackReport.framesReceived
+                client_metrics.rtc_frames_per_second =
+                  videoTrackReport.framesPerSecond || 0
+                client_metrics.rtc_freeze_count = videoTrackReport.freezeCount
+                client_metrics.rtc_jitter_sec = videoTrackReport.jitter
+                client_metrics.rtc_keyframes_decoded =
+                  videoTrackReport.keyFramesDecoded
+                client_metrics.rtc_total_freezes_duration_sec =
+                  videoTrackReport.totalFreezesDuration
+              } else if (videoTrackReport.type === 'transport') {
+                // videoTrackReport.bytesReceived,
+                // videoTrackReport.bytesSent,
+              }
+            })
+            resolve(client_metrics)
+          })
+        })
+      }
+
+      this.onNewTrack({
+        conn: this,
+        mediaStream: mediaStream,
+      })
     })
 
     this.pc.addEventListener('datachannel', (event) => {
-      this.lossyDataChannel = event.channel
+      this.unreliableDataChannel = event.channel
 
-      console.log('accepted lossy data channel', event.channel.label)
-      this.lossyDataChannel.addEventListener('open', (event) => {
-        this.resolveReady()
-        console.log('lossy data channel opened', event)
+      console.log('accepted unreliable data channel', event.channel.label)
+      this.unreliableDataChannel.addEventListener('open', (event) => {
+        console.log('unreliable data channel opened', event)
+        if (this.shouldTrace()) {
+          dataChannelSpan.resolve?.()
+        }
+
+        this.onDataChannelOpen(this)
+
+        this.onEngineConnectionOpen(this)
+        this.ready = true
       })
 
-      this.lossyDataChannel.addEventListener('close', (event) => {
-        console.log('lossy data channel closed')
+      this.unreliableDataChannel.addEventListener('close', (event) => {
+        console.log('unreliable data channel closed')
+        this.close()
       })
 
-      this.lossyDataChannel.addEventListener('error', (event) => {
-        console.log('lossy data channel error')
+      this.unreliableDataChannel.addEventListener('error', (event) => {
+        console.log('unreliable data channel error')
+        this.close()
       })
     })
 
-    if (this.onConnectionStarted) this.onConnectionStarted(this)
+    this.onConnectionStarted(this)
+  }
+  send(message: object | string) {
+    // TODO(paultag): Add in logic to determine the connection state and
+    // take actions if needed?
+    this.websocket?.send(
+      typeof message === 'string' ? message : JSON.stringify(message)
+    )
   }
   close() {
     this.websocket?.close()
     this.pc?.close()
-    this.lossyDataChannel?.close()
+    this.unreliableDataChannel?.close()
+    this.websocket = undefined
+    this.pc = undefined
+    this.unreliableDataChannel = undefined
+    this.webrtcStatsCollector = undefined
+
+    this.onClose(this)
+    this.ready = false
   }
 }
 
+export type EngineCommand = Models['WebSocketRequest_type']
+type ModelTypes = Models['OkModelingCmdResponse_type']['type']
+
+type CommandTypes = Models['ModelingCmd_type']['type']
+
+type UnreliableResponses = Extract<
+  Models['OkModelingCmdResponse_type'],
+  { type: 'highlight_set_entity' }
+>
+interface UnreliableSubscription<T extends UnreliableResponses['type']> {
+  event: T
+  callback: (data: Extract<UnreliableResponses, { type: T }>) => void
+}
+
+interface Subscription<T extends ModelTypes> {
+  event: T
+  callback: (
+    data: Extract<Models['OkModelingCmdResponse_type'], { type: T }>
+  ) => void
+}
+
 export class EngineCommandManager {
   artifactMap: ArtifactMap = {}
   sourceRangeMap: SourceRangeMap = {}
@@ -234,10 +523,17 @@ export class EngineCommandManager {
   engineConnection?: EngineConnection
   waitForReady: Promise<void> = new Promise(() => {})
   private resolveReady = () => {}
-  onHoverCallback: (id?: string) => void = () => {}
-  onClickCallback: (selection?: SelectionsArgs) => void = () => {}
-  onCursorsSelectedCallback: (selections: CursorSelectionsArgs) => void =
-    () => {}
+
+  subscriptions: {
+    [event: string]: {
+      [localUnsubscribeId: string]: (a: any) => void
+    }
+  } = {} as any
+  unreliableSubscriptions: {
+    [event: string]: {
+      [localUnsubscribeId: string]: (a: any) => void
+    }
+  } = {} as any
   constructor({
     setMediaStream,
     setIsStreamReady,
@@ -258,122 +554,189 @@ export class EngineCommandManager {
     this.engineConnection = new EngineConnection({
       url,
       token,
-      onConnectionStarted: (conn) => {
-        this.engineConnection?.pc?.addEventListener('track', (event) => {
-          console.log('received track', event)
-          const mediaStream = event.streams[0]
-          setMediaStream(mediaStream)
-        })
+      onEngineConnectionOpen: () => {
+        this.resolveReady()
+        setIsStreamReady(true)
+      },
+      onClose: () => {
+        setIsStreamReady(false)
+      },
+      onConnectionStarted: (engineConnection) => {
+        engineConnection?.pc?.addEventListener('datachannel', (event) => {
+          let unreliableDataChannel = event.channel
 
-        this.engineConnection?.pc?.addEventListener('datachannel', (event) => {
-          let lossyDataChannel = event.channel
-          lossyDataChannel.addEventListener('message', (event) => {
-            const result: OkResponse = JSON.parse(event.data)
+          unreliableDataChannel.addEventListener('message', (event) => {
+            const result: UnreliableResponses = JSON.parse(event.data)
+            Object.values(
+              this.unreliableSubscriptions[result.type] || {}
+            ).forEach(
+              // TODO: There is only one response that uses the unreliable channel atm,
+              // highlight_set_entity, if there are more it's likely they will all have the same
+              // sequence logic, but I'm not sure if we use a single global sequence or a sequence
+              // per unreliable subscription.
+              (callback) => {
                 if (
-              result.type === 'highlight_set_entity' &&
-              result.sequence &&
-              result.sequence > this.inSequence
+                  result?.data?.sequence &&
+                  result?.data.sequence > this.inSequence &&
+                  result.type === 'highlight_set_entity'
                 ) {
-              this.onHoverCallback(result.entity_id)
-              this.inSequence = result.sequence
+                  this.inSequence = result.data.sequence
+                  callback(result)
                 }
+              }
+            )
           })
         })
 
         // When the EngineConnection starts a connection, we want to register
         // callbacks into the WebSocket/PeerConnection.
-        conn.websocket?.addEventListener('message', (event) => {
+        engineConnection.websocket?.addEventListener('message', (event) => {
           if (event.data instanceof ArrayBuffer) {
             // If the data is an ArrayBuffer, it's  the result of an export command,
             // because in all other cases we send JSON strings. But in the case of
             // export we send a binary blob.
             // Pass this to our export function.
             exportSave(event.data)
-          } else if (
-            typeof event.data === 'string' &&
-            event.data.toLocaleLowerCase().startsWith('error')
+          } else {
+            const message: Models['WebSocketResponse_type'] = JSON.parse(
+              event.data
+            )
+            if (
+              message.success &&
+              message.resp.type === 'modeling' &&
+              message.request_id
             ) {
-            console.warn('something went wrong: ', event.data)
-          } else {
-            const message: WebSocketResponse = JSON.parse(event.data)
-
-            if (message.type === 'modeling') {
-              const id = message.cmd_id
-              const command = this.artifactMap[id]
-              if ('ok' in message.result) {
-                const result: OkResponse = message.result.ok
-                if (result.type === 'select_with_point') {
-                  if (result.entity_id) {
-                    this.onClickCallback({
-                      id: result.entity_id,
-                      type: 'default',
-                    })
-                  } else {
-                    this.onClickCallback()
-                  }
-                }
-              }
-              if (command && command.type === 'pending') {
-                const resolve = command.resolve
-                this.artifactMap[id] = {
-                  type: 'result',
-                  data: message.result,
-                }
-                resolve({
-                  id,
-                })
-              } else {
-                this.artifactMap[id] = {
-                  type: 'result',
-                  data: message.result,
-                }
-              }
+              this.handleModelingCommand(message.resp, message.request_id)
             }
           }
         })
       },
+      onNewTrack: ({ mediaStream }) => {
+        console.log('received track', mediaStream)
+
+        mediaStream.getVideoTracks()[0].addEventListener('mute', () => {
+          console.log('peer is not sending video to us')
+          // this.engineConnection?.close()
+          // this.engineConnection?.connect()
         })
 
-    // TODO(paultag): this isn't quite right, and the double promises is
-    // pretty grim.
-    this.engineConnection?.waitForReady.then(this.resolveReady)
-
-    this.waitForReady.then(() => {
-      setIsStreamReady(true)
+        setMediaStream(mediaStream)
+      },
     })
 
     this.engineConnection?.connect()
   }
+  handleModelingCommand(message: WebSocketResponse, id: string) {
+    if (message.type !== 'modeling') {
+      return
+    }
+    const modelingResponse = message.data.modeling_response
+    Object.values(this.subscriptions[modelingResponse.type] || {}).forEach(
+      (callback) => callback(modelingResponse)
+    )
+
+    const command = this.artifactMap[id]
+    if (command && command.type === 'pending') {
+      const resolve = command.resolve
+      this.artifactMap[id] = {
+        type: 'result',
+        range: command.range,
+        commandType: command.commandType,
+        parentId: command.parentId ? command.parentId : undefined,
+        data: modelingResponse,
+      }
+      resolve({
+        id,
+        commandType: command.commandType,
+        range: command.range,
+        data: modelingResponse,
+      })
+    } else {
+      this.artifactMap[id] = {
+        type: 'result',
+        commandType: command?.commandType,
+        range: command?.range,
+        data: modelingResponse,
+      }
+    }
+  }
   tearDown() {
-    // close all channels, sockets and WebRTC connections
     this.engineConnection?.close()
   }
-
   startNewSession() {
     this.artifactMap = {}
     this.sourceRangeMap = {}
   }
+  subscribeTo<T extends ModelTypes>({
+    event,
+    callback,
+  }: Subscription<T>): () => void {
+    const localUnsubscribeId = uuidv4()
+    const otherEventCallbacks = this.subscriptions[event]
+    if (otherEventCallbacks) {
+      otherEventCallbacks[localUnsubscribeId] = callback
+    } else {
+      this.subscriptions[event] = {
+        [localUnsubscribeId]: callback,
+      }
+    }
+    return () => this.unSubscribeTo(event, localUnsubscribeId)
+  }
+  private unSubscribeTo(event: ModelTypes, id: string) {
+    delete this.subscriptions[event][id]
+  }
+  subscribeToUnreliable<T extends UnreliableResponses['type']>({
+    event,
+    callback,
+  }: UnreliableSubscription<T>): () => void {
+    const localUnsubscribeId = uuidv4()
+    const otherEventCallbacks = this.unreliableSubscriptions[event]
+    if (otherEventCallbacks) {
+      otherEventCallbacks[localUnsubscribeId] = callback
+    } else {
+      this.unreliableSubscriptions[event] = {
+        [localUnsubscribeId]: callback,
+      }
+    }
+    return () => this.unSubscribeToUnreliable(event, localUnsubscribeId)
+  }
+  private unSubscribeToUnreliable(
+    event: UnreliableResponses['type'],
+    id: string
+  ) {
+    delete this.unreliableSubscriptions[event][id]
+  }
   endSession() {
-    // this.websocket?.close()
-    // socket.off('command')
+    // TODO: instead of sending a single command with `object_ids: Object.keys(this.artifactMap)`
+    // we need to loop over them each individualy because if the engine doesn't recognise a single
+    // id the whole command fails.
+    Object.entries(this.artifactMap).forEach(([id, artifact]) => {
+      const artifactTypesToDelete: ArtifactMap[string]['commandType'][] = [
+        // 'start_path' creates a new scene object for the path, which is why it needs to be deleted,
+        // however all of the segments in the path are its children so there don't need to be deleted.
+        // this fact is very opaque in the api and docs (as to what should can be deleted).
+        // Using an array is the list is likely to grow.
+        'start_path',
+      ]
+      if (!artifactTypesToDelete.includes(artifact.commandType)) return
+
+      const deletCmd: EngineCommand = {
+        type: 'modeling_cmd_req',
+        cmd_id: uuidv4(),
+        cmd: {
+          type: 'remove_scene_objects',
+          object_ids: [id],
+        },
       }
-  onHover(callback: (id?: string) => void) {
-    // It's when the user hovers over a part in the 3d scene, and so the engine should tell the
-    // frontend about that (with it's id) so that the FE can highlight code associated with that id
-    this.onHoverCallback = callback
-  }
-  onClick(callback: (selection?: SelectionsArgs) => void) {
-    // It's when the user clicks on a part in the 3d scene, and so the engine should tell the
-    // frontend about that (with it's id) so that the FE can put the user's cursor on the right
-    // line of code
-    this.onClickCallback = callback
+      this.engineConnection?.send(deletCmd)
+    })
   }
   cusorsSelected(selections: {
     otherSelections: Selections['otherSelections']
     idBasedSelections: { type: string; id: string }[]
   }) {
-    if (this.engineConnection?.websocket?.readyState === 0) {
-      console.log('socket not open')
+    if (!this.engineConnection?.isReady()) {
+      console.log('engine connection isnt ready')
       return
     }
     this.sendSceneCommand({
@@ -392,62 +755,123 @@ export class EngineCommandManager {
       cmd_id: uuidv4(),
     })
   }
-  sendSceneCommand(command: EngineCommand) {
-    if (this.engineConnection?.websocket?.readyState === 0) {
-      console.log('socket not ready')
-      return
+  sendSceneCommand(command: EngineCommand): Promise<any> {
+    if (
+      command.type === 'modeling_cmd_req' &&
+      command.cmd.type !== lastMessage
+    ) {
+      console.log('sending command', command.cmd.type)
+      lastMessage = command.cmd.type
     }
-    if (command.type !== 'modeling_cmd_req') return
+    if (!this.engineConnection?.isReady()) {
+      console.log('socket not ready')
+      return Promise.resolve()
+    }
+    if (command.type !== 'modeling_cmd_req') return Promise.resolve()
     const cmd = command.cmd
     if (
       cmd.type === 'camera_drag_move' &&
-      this.engineConnection?.lossyDataChannel
+      this.engineConnection?.unreliableDataChannel
     ) {
       cmd.sequence = this.outSequence
       this.outSequence++
-      this.engineConnection?.lossyDataChannel?.send(JSON.stringify(command))
-      return
+      this.engineConnection?.unreliableDataChannel?.send(
+        JSON.stringify(command)
+      )
+      return Promise.resolve()
     } else if (
       cmd.type === 'highlight_set_entity' &&
-      this.engineConnection?.lossyDataChannel
+      this.engineConnection?.unreliableDataChannel
     ) {
       cmd.sequence = this.outSequence
       this.outSequence++
-      this.engineConnection?.lossyDataChannel?.send(JSON.stringify(command))
-      return
+      this.engineConnection?.unreliableDataChannel?.send(
+        JSON.stringify(command)
+      )
+      return Promise.resolve()
+    } else if (
+      cmd.type === 'mouse_move' &&
+      this.engineConnection.unreliableDataChannel
+    ) {
+      cmd.sequence = this.outSequence
+      this.outSequence++
+      this.engineConnection?.unreliableDataChannel?.send(
+        JSON.stringify(command)
+      )
+      return Promise.resolve()
     }
-    console.log('sending command', command)
-    this.engineConnection?.websocket?.send(JSON.stringify(command))
+    // since it's not mouse drag or highlighting send over TCP and keep track of the command
+    this.engineConnection?.send(command)
+    return this.handlePendingCommand(command.cmd_id, command.cmd)
   }
-  sendModellingCommand({
+  sendModelingCommand({
     id,
-    params,
     range,
     command,
   }: {
     id: string
-    params: any
     range: SourceRange
-    command: EngineCommand
+    command: EngineCommand | string
   }): Promise<any> {
     this.sourceRangeMap[id] = range
 
-    if (this.engineConnection?.websocket?.readyState === 0) {
+    if (!this.engineConnection?.isReady()) {
       console.log('socket not ready')
-      return new Promise(() => {})
+      return Promise.resolve()
     }
-    this.engineConnection?.websocket?.send(JSON.stringify(command))
+    this.engineConnection?.send(command)
+    if (typeof command !== 'string' && command.type === 'modeling_cmd_req') {
+      return this.handlePendingCommand(id, command?.cmd, range)
+    } else if (typeof command === 'string') {
+      const parseCommand: EngineCommand = JSON.parse(command)
+      if (parseCommand.type === 'modeling_cmd_req')
+        return this.handlePendingCommand(id, parseCommand?.cmd, range)
+    }
+    throw 'shouldnt reach here'
+  }
+  handlePendingCommand(
+    id: string,
+    command: Models['ModelingCmd_type'],
+    range?: SourceRange
+  ) {
     let resolve: (val: any) => void = () => {}
     const promise = new Promise((_resolve, reject) => {
       resolve = _resolve
     })
+    const getParentId = (): string | undefined => {
+      if (command.type === 'extend_path') {
+        return command.path
+      }
+      // TODO handle other commands that have a parent
+    }
     this.artifactMap[id] = {
+      range: range || [0, 0],
       type: 'pending',
+      commandType: command.type,
+      parentId: getParentId(),
       promise,
       resolve,
     }
     return promise
   }
+  sendModelingCommandFromWasm(
+    id: string,
+    rangeStr: string,
+    commandStr: string
+  ): Promise<any> {
+    if (id === undefined) {
+      throw new Error('id is undefined')
+    }
+    if (rangeStr === undefined) {
+      throw new Error('rangeStr is undefined')
+    }
+    if (commandStr === undefined) {
+      throw new Error('commandStr is undefined')
+    }
+    const range: SourceRange = JSON.parse(rangeStr)
+
+    return this.sendModelingCommand({ id, range, command: commandStr })
+  }
   commandResult(id: string): Promise<any> {
     const command = this.artifactMap[id]
     if (!command) {

src/lang/std/extrude.ts

@@ -1,88 +0,0 @@
-import { InternalFn } from './stdTypes'
-import {
-  ExtrudeGroup,
-  ExtrudeSurface,
-  SketchGroup,
-  Position,
-  Rotation,
-} from '../executor'
-import { clockwiseSign } from './std'
-import { generateUuidFromHashSeed } from '../../lib/uuid'
-
-export const extrude: InternalFn = (
-  { sourceRange, engineCommandManager, code },
-  length: number,
-  sketchVal: SketchGroup
-): ExtrudeGroup => {
-  const sketch = sketchVal
-  const { position, rotation } = sketchVal
-
-  const id = generateUuidFromHashSeed(
-    JSON.stringify({
-      code,
-      sourceRange,
-      data: {
-        length,
-        sketchVal,
-      },
-    })
-  )
-
-  const extrudeSurfaces: ExtrudeSurface[] = []
-  const extrusionDirection = clockwiseSign(sketch.value.map((line) => line.to))
-  engineCommandManager.sendModellingCommand({
-    id,
-    params: [
-      {
-        length,
-        extrusionDirection: extrusionDirection,
-      },
-    ],
-    range: sourceRange,
-    command: {
-      type: 'modeling_cmd_req',
-      cmd: {
-        type: 'extrude',
-        target: sketch.id,
-        distance: length,
-        cap: true,
-      },
-      cmd_id: id,
-    },
-  })
-
-  return {
-    type: 'extrudeGroup',
-    id,
-    value: extrudeSurfaces, // TODO, this is just an empty array now, should be deleted.
-    height: length,
-    position,
-    rotation,
-    __meta: [
-      {
-        sourceRange,
-        pathToNode: [], // TODO
-      },
-      {
-        sourceRange: sketchVal.__meta[0].sourceRange,
-        pathToNode: sketchVal.__meta[0].pathToNode,
-      },
-    ],
-  }
-}
-
-export const getExtrudeWallTransform: InternalFn = (
-  _,
-  pathName: string,
-  extrudeGroup: ExtrudeGroup
-): {
-  position: Position
-  quaternion: Rotation
-} => {
-  const path = extrudeGroup?.value.find((path) => path.name === pathName)
-  if (!path) throw new Error(`Could not find path with name ${pathName}`)
-  return {
-    position: path.position,
-    quaternion: path.rotation,
-  }
-}

src/lang/std/sketch.test.ts

@@ -97,12 +97,12 @@ describe('testing changeSketchArguments', () => {
   const lineAfterChange = 'lineTo([2, 3], %)'
   test('changeSketchArguments', async () => {
     // Enable rotations #152
-    const genCode = (line: string) => `
-const mySketch001 = startSketchAt([0, 0])
+    const genCode = (line: string) => `const mySketch001 = startSketchAt([0, 0])
   |> ${line}
   |> lineTo([0.46, -5.82], %)
-    // |> rx(45, %)
-show(mySketch001)`
+// |> rx(45, %)
+show(mySketch001)
+`
     const code = genCode(lineToChange)
     const expectedCode = genCode(lineAfterChange)
     const ast = parser_wasm(code)
@@ -160,13 +160,13 @@ show(mySketch001)`
       ],
     })
     // Enable rotations #152
-    const expectedCode = `
-const mySketch001 = startSketchAt([0, 0])
+    const expectedCode = `const mySketch001 = startSketchAt([0, 0])
   // |> rx(45, %)
   |> lineTo([-1.59, -1.54], %)
   |> lineTo([0.46, -5.82], %)
   |> lineTo([2, 3], %)
-show(mySketch001)`
+show(mySketch001)
+`
     expect(recast(modifiedAst)).toBe(expectedCode)
   })
 })
@@ -175,12 +175,12 @@ describe('testing addTagForSketchOnFace', () => {
   it('needs to be in it', async () => {
     const originalLine = 'lineTo([-1.59, -1.54], %)'
     // Enable rotations #152
-    const genCode = (line: string) => `
-  const mySketch001 = startSketchAt([0, 0])
+    const genCode = (line: string) => `const mySketch001 = startSketchAt([0, 0])
   // |> rx(45, %)
   |> ${line}
   |> lineTo([0.46, -5.82], %)
-  show(mySketch001)`
+show(mySketch001)
+`
     const code = genCode(originalLine)
     const ast = parser_wasm(code)
     const programMemory = await enginelessExecutor(ast)

src/lang/std/sketch.ts

@@ -20,15 +20,10 @@ import {
   getNodePathFromSourceRange,
 } from '../queryAst'
 import { GuiModes, toolTips, TooTip } from '../../useStore'
-import { splitPathAtPipeExpression } from '../modifyAst'
+import { createPipeExpression, splitPathAtPipeExpression } from '../modifyAst'
 import { generateUuidFromHashSeed } from '../../lib/uuid'
 
-import {
-  SketchLineHelper,
-  ModifyAstBase,
-  InternalFn,
-  TransformCallback,
-} from './stdTypes'
+import { SketchLineHelper, ModifyAstBase, TransformCallback } from './stdTypes'
 
 import {
   createLiteral,
@@ -42,10 +37,7 @@ import {
 } from '../modifyAst'
 import { roundOff, getLength, getAngle } from '../../lib/utils'
 import { getSketchSegmentFromSourceRange } from './sketchConstraints'
-import {
-  intersectionWithParallelLine,
-  perpendicularDistance,
-} from 'sketch-helpers'
+import { perpendicularDistance } from 'sketch-helpers'
 
 export type Coords2d = [number, number]
 
@@ -115,45 +107,6 @@ function makeId(seed: string | any) {
 }
 
 export const lineTo: SketchLineHelper = {
-  fn: (
-    { sourceRange, code },
-    data:
-      | [number, number]
-      | {
-          to: [number, number]
-          tag?: string
-        },
-    previousSketch: SketchGroup
-  ): SketchGroup => {
-    if (!previousSketch)
-      throw new Error('lineTo must be called after startSketchAt')
-    const sketchGroup = { ...previousSketch }
-    const from = getCoordsFromPaths(sketchGroup, sketchGroup.value.length - 1)
-    const to = 'to' in data ? data.to : data
-
-    const id = makeId({
-      code,
-      sourceRange,
-      data,
-    })
-    const currentPath: Path = {
-      type: 'toPoint',
-      to,
-      from,
-      __geoMeta: {
-        sourceRange,
-        id,
-        pathToNode: [], // TODO
-      },
-    }
-    if ('tag' in data) {
-      currentPath.name = data.tag
-    }
-    return {
-      ...sketchGroup,
-      value: [...sketchGroup.value, currentPath],
-    }
-  },
   add: ({
     node,
     pathToNode,
@@ -221,77 +174,6 @@ export const lineTo: SketchLineHelper = {
 }
 
 export const line: SketchLineHelper = {
-  fn: (
-    { sourceRange, engineCommandManager, code },
-    data:
-      | [number, number]
-      | 'default'
-      | {
-          to: [number, number] | 'default'
-          // name?: string
-          tag?: string
-        },
-    previousSketch: SketchGroup
-  ): SketchGroup => {
-    if (!previousSketch) throw new Error('lineTo must be called after lineTo')
-    const sketchGroup = { ...previousSketch }
-    const from = getCoordsFromPaths(sketchGroup, sketchGroup.value.length - 1)
-    let args: [number, number] = [0.2, 1]
-    if (data !== 'default' && 'to' in data && data.to !== 'default') {
-      args = data.to
-    } else if (data !== 'default' && !('to' in data)) {
-      args = data
-    }
-
-    const to: [number, number] = [from[0] + args[0], from[1] + args[1]]
-    const lineData: LineData = {
-      from: [...from, 0],
-      to: [...to, 0],
-    }
-    const id = makeId({
-      code,
-      sourceRange,
-      data,
-    })
-    engineCommandManager.sendModellingCommand({
-      id,
-      params: [lineData, previousSketch],
-      range: sourceRange,
-      command: {
-        type: 'modeling_cmd_req',
-        cmd: {
-          type: 'extend_path',
-          path: sketchGroup.id,
-          segment: {
-            type: 'line',
-            end: {
-              x: lineData.to[0],
-              y: lineData.to[1],
-              z: 0,
-            },
-          },
-        },
-        cmd_id: id,
-      },
-    })
-    const currentPath: Path = {
-      type: 'toPoint',
-      to,
-      from,
-      __geoMeta: {
-        id,
-        sourceRange,
-        pathToNode: [], // TODO
-      },
-    }
-    if (data !== 'default' && 'tag' in data) {
-      currentPath.name = data.tag
-    }
-    return {
-      ...sketchGroup,
-      value: [...sketchGroup.value, currentPath],
-    }
-  },
   add: ({
     node,
     previousProgramMemory,
@@ -303,7 +185,7 @@ export const line: SketchLineHelper = {
     createCallback,
   }) => {
     const _node = { ...node }
-    const { node: pipe } = getNodeFromPath<PipeExpression>(
+    const { node: pipe } = getNodeFromPath<PipeExpression | CallExpression>(
       _node,
       pathToNode,
       'PipeExpression'
@@ -320,7 +202,7 @@ export const line: SketchLineHelper = {
     const newXVal = createLiteral(roundOff(to[0] - from[0], 2))
     const newYVal = createLiteral(roundOff(to[1] - from[1], 2))
 
-    if (replaceExisting && createCallback) {
+    if (replaceExisting && createCallback && pipe.type !== 'CallExpression') {
       const { index: callIndex } = splitPathAtPipeExpression(pathToNode)
       const { callExp, valueUsedInTransform } = createCallback(
         [newXVal, newYVal],
@@ -338,7 +220,11 @@ export const line: SketchLineHelper = {
       createArrayExpression([newXVal, newYVal]),
       createPipeSubstitution(),
     ])
+    if (pipe.type === 'PipeExpression') {
       pipe.body = [...pipe.body, callExp]
+    } else {
+      varDec.init = createPipeExpression([varDec.init, callExp])
+    }
     return {
       modifiedAst: _node,
       pathToNode,
@@ -356,22 +242,10 @@ export const line: SketchLineHelper = {
       createLiteral(roundOff(to[1] - from[1], 2)),
     ])
 
-    if (
-      callExpression.arguments?.[0].type === 'Literal' &&
-      callExpression.arguments?.[0].value === 'default'
-    ) {
-      callExpression.arguments[0] = toArrExp
-    } else if (callExpression.arguments?.[0].type === 'ObjectExpression') {
+    if (callExpression.arguments?.[0].type === 'ObjectExpression') {
       const toProp = callExpression.arguments?.[0].properties?.find(
         ({ key }) => key.name === 'to'
       )
-      if (
-        toProp &&
-        toProp.value.type === 'Literal' &&
-        toProp.value.value === 'default'
-      ) {
-        toProp.value = toArrExp
-      }
       mutateObjExpProp(callExpression.arguments?.[0], toArrExp, 'to')
     } else {
       mutateArrExp(callExpression.arguments?.[0], toArrExp)
@@ -385,25 +259,6 @@ export const line: SketchLineHelper = {
 }
 
 export const xLineTo: SketchLineHelper = {
-  fn: (
-    meta,
-    data:
-      | number
-      | {
-          to: number
-          // name?: string
-          tag?: string
-        },
-    previousSketch: SketchGroup
-  ) => {
-    if (!previousSketch) throw new Error('bad bad bad')
-    const from = getCoordsFromPaths(
-      previousSketch,
-      previousSketch.value.length - 1
-    )
-    const [xVal, tag] = typeof data !== 'number' ? [data.to, data.tag] : [data]
-    return lineTo.fn(meta, { to: [xVal, from[1]], tag }, previousSketch)
-  },
   add: ({ node, pathToNode, to, replaceExisting, createCallback }) => {
     const _node = { ...node }
     const getNode = getNodeFromPathCurry(_node, pathToNode)
@@ -452,25 +307,6 @@ export const xLineTo: SketchLineHelper = {
 }
 
 export const yLineTo: SketchLineHelper = {
-  fn: (
-    meta,
-    data:
-      | number
-      | {
-          to: number
-          // name?: string
-          tag?: string
-        },
-    previousSketch: SketchGroup
-  ) => {
-    if (!previousSketch) throw new Error('bad bad bad')
-    const from = getCoordsFromPaths(
-      previousSketch,
-      previousSketch.value.length - 1
-    )
-    const [yVal, tag] = typeof data !== 'number' ? [data.to, data.tag] : [data]
-    return lineTo.fn(meta, { to: [from[0], yVal], tag }, previousSketch)
-  },
   add: ({ node, pathToNode, to, replaceExisting, createCallback }) => {
     const _node = { ...node }
     const getNode = getNodeFromPathCurry(_node, pathToNode)
@@ -519,21 +355,6 @@ export const yLineTo: SketchLineHelper = {
 }
 
 export const xLine: SketchLineHelper = {
-  fn: (
-    meta,
-    data:
-      | number
-      | {
-          length: number
-          tag?: string
-        },
-    previousSketch: SketchGroup
-  ) => {
-    if (!previousSketch) throw new Error('bad bad bad')
-    const [xVal, tag] =
-      typeof data !== 'number' ? [data.length, data.tag] : [data]
-    return line.fn(meta, { to: [xVal, 0], tag }, previousSketch)
-  },
   add: ({ node, pathToNode, to, from, replaceExisting, createCallback }) => {
     const _node = { ...node }
     const getNode = getNodeFromPathCurry(_node, pathToNode)
@@ -584,22 +405,6 @@ export const xLine: SketchLineHelper = {
 }
 
 export const yLine: SketchLineHelper = {
-  fn: (
-    meta,
-    data:
-      | number
-      | {
-          length: number
-          // name?: string
-          tag?: string
-        },
-    previousSketch: SketchGroup
-  ) => {
-    if (!previousSketch) throw new Error('bad bad bad')
-    const [yVal, tag] =
-      typeof data !== 'number' ? [data.length, data.tag] : [data]
-    return line.fn(meta, { to: [0, yVal], tag }, previousSketch)
-  },
   add: ({ node, pathToNode, to, from, replaceExisting, createCallback }) => {
     const _node = { ...node }
     const getNode = getNodeFromPathCurry(_node, pathToNode)
@@ -644,48 +449,6 @@ export const yLine: SketchLineHelper = {
 }
 
 export const angledLine: SketchLineHelper = {
-  fn: (
-    { sourceRange, engineCommandManager, code },
-    data:
-      | [number, number]
-      | {
-          angle: number
-          length: number
-          tag?: string
-        },
-    previousSketch: SketchGroup
-  ) => {
-    if (!previousSketch) throw new Error('lineTo must be called after lineTo')
-    const sketchGroup = { ...previousSketch }
-    const from = getCoordsFromPaths(sketchGroup, sketchGroup.value.length - 1)
-    const [angle, length] = 'angle' in data ? [data.angle, data.length] : data
-    const to: [number, number] = [
-      from[0] + length * Math.cos((angle * Math.PI) / 180),
-      from[1] + length * Math.sin((angle * Math.PI) / 180),
-    ]
-    const id = makeId({
-      code,
-      sourceRange,
-      data,
-    })
-    const currentPath: Path = {
-      type: 'toPoint',
-      to,
-      from,
-      __geoMeta: {
-        id,
-        sourceRange,
-        pathToNode: [], // TODO
-      },
-    }
-    if ('tag' in data) {
-      currentPath.name = data.tag
-    }
-    return {
-      ...sketchGroup,
-      value: [...sketchGroup.value, currentPath],
-    }
-  },
   add: ({
     node,
     pathToNode,
@@ -753,26 +516,6 @@ export const angledLine: SketchLineHelper = {
 }
 
 export const angledLineOfXLength: SketchLineHelper = {
-  fn: (
-    { sourceRange, programMemory, engineCommandManager, code },
-    data:
-      | [number, number]
-      | {
-          angle: number
-          length: number
-          tag?: string
-        },
-    previousSketch: SketchGroup
-  ) => {
-    if (!previousSketch) throw new Error('lineTo must be called after lineTo')
-    const [angle, length, tag] =
-      'angle' in data ? [data.angle, data.length, data.tag] : data
-    return line.fn(
-      { sourceRange, programMemory, engineCommandManager, code },
-      { to: getYComponent(angle, length), tag },
-      previousSketch
-    )
-  },
   add: ({
     node,
     previousProgramMemory,
@@ -846,26 +589,6 @@ export const angledLineOfXLength: SketchLineHelper = {
 }
 
 export const angledLineOfYLength: SketchLineHelper = {
-  fn: (
-    { sourceRange, programMemory, engineCommandManager, code },
-    data:
-      | [number, number]
-      | {
-          angle: number
-          length: number
-          tag?: string
-        },
-    previousSketch: SketchGroup
-  ) => {
-    if (!previousSketch) throw new Error('lineTo must be called after lineTo')
-    const [angle, length, tag] =
-      'angle' in data ? [data.angle, data.length, data.tag] : data
-    return line.fn(
-      { sourceRange, programMemory, engineCommandManager, code },
-      { to: getXComponent(angle, length), tag },
-      previousSketch
-    )
-  },
   add: ({
     node,
     previousProgramMemory,
@@ -940,33 +663,6 @@ export const angledLineOfYLength: SketchLineHelper = {
 }
 
 export const angledLineToX: SketchLineHelper = {
-  fn: (
-    { sourceRange, programMemory, engineCommandManager, code },
-    data:
-      | [number, number]
-      | {
-          angle: number
-          to: number
-          tag?: string
-        },
-    previousSketch: SketchGroup
-  ) => {
-    if (!previousSketch) throw new Error('lineTo must be called after lineTo')
-    const from = getCoordsFromPaths(
-      previousSketch,
-      previousSketch.value.length - 1
-    )
-    const [angle, xTo, tag] =
-      'angle' in data ? [data.angle, data.to, data.tag] : data
-    const xComponent = xTo - from[0]
-    const yComponent = xComponent * Math.tan((angle * Math.PI) / 180)
-    const yTo = from[1] + yComponent
-    return lineTo.fn(
-      { sourceRange, programMemory, engineCommandManager, code },
-      { to: [xTo, yTo], tag },
-      previousSketch
-    )
-  },
   add: ({
     node,
     pathToNode,
@@ -1036,33 +732,6 @@ export const angledLineToX: SketchLineHelper = {
 }
 
 export const angledLineToY: SketchLineHelper = {
-  fn: (
-    { sourceRange, programMemory, engineCommandManager, code },
-    data:
-      | [number, number]
-      | {
-          angle: number
-          to: number
-          tag?: string
-        },
-    previousSketch: SketchGroup
-  ) => {
-    if (!previousSketch) throw new Error('lineTo must be called after lineTo')
-    const from = getCoordsFromPaths(
-      previousSketch,
-      previousSketch.value.length - 1
-    )
-    const [angle, yTo, tag] =
-      'angle' in data ? [data.angle, data.to, data.tag] : data
-    const yComponent = yTo - from[1]
-    const xComponent = yComponent / Math.tan((angle * Math.PI) / 180)
-    const xTo = from[0] + xComponent
-    return lineTo.fn(
-      { sourceRange, programMemory, engineCommandManager, code },
-      { to: [xTo, yTo], tag },
-      previousSketch
-    )
-  },
   add: ({
     node,
     pathToNode,
@@ -1133,37 +802,6 @@ export const angledLineToY: SketchLineHelper = {
 }
 
 export const angledLineThatIntersects: SketchLineHelper = {
-  fn: (
-    { sourceRange, programMemory, engineCommandManager, code },
-    data: {
-      angle: number
-      intersectTag: string
-      offset?: number
-      tag?: string
-    },
-    previousSketch: SketchGroup
-  ) => {
-    if (!previousSketch) throw new Error('lineTo must be called after lineTo')
-    const intersectPath = previousSketch.value.find(
-      ({ name }) => name === data.intersectTag
-    )
-    if (!intersectPath) throw new Error('intersectTag must match a line')
-    const from = getCoordsFromPaths(
-      previousSketch,
-      previousSketch.value.length - 1
-    )
-    const to = intersectionWithParallelLine({
-      line1: [intersectPath.from, intersectPath.to],
-      line1Offset: data.offset || 0,
-      line2Point: from,
-      line2Angle: data.angle,
-    })
-    return lineTo.fn(
-      { sourceRange, programMemory, engineCommandManager, code },
-      { to, tag: data.tag },
-      previousSketch
-    )
-  },
   add: ({
     node,
     pathToNode,
@@ -1322,60 +960,14 @@ export function addNewSketchLn({
     pathToNode,
     'VariableDeclarator'
   )
-  const { node: pipeExp, shallowPath: pipePath } =
-    getNodeFromPath<PipeExpression>(node, pathToNode, 'PipeExpression')
-  const maybeStartSketchAt = pipeExp.body.find(
-    (exp) =>
-      exp.type === 'CallExpression' &&
-      exp.callee.name === 'startSketchAt' &&
-      exp.arguments[0].type === 'Literal' &&
-      exp.arguments[0].value === 'default'
-  )
-  const maybeDefaultLine = pipeExp.body.findIndex(
-    (exp) =>
-      exp.type === 'CallExpression' &&
-      exp.callee.name === 'line' &&
-      exp.arguments[0].type === 'Literal' &&
-      exp.arguments[0].value === 'default'
-  )
-  const defaultLinePath: PathToNode = [
-    ...pipePath,
-    ['body', ''],
-    [maybeDefaultLine, ''],
-  ]
+  const { node: pipeExp, shallowPath: pipePath } = getNodeFromPath<
+    PipeExpression | CallExpression
+  >(node, pathToNode, 'PipeExpression')
   const variableName = varDec.id.name
   const sketch = previousProgramMemory?.root?.[variableName]
   if (sketch.type !== 'sketchGroup') throw new Error('not a sketchGroup')
 
-  if (maybeStartSketchAt) {
-    const startSketchAt = maybeStartSketchAt as any
-    startSketchAt.arguments[0] = createArrayExpression([
-      createLiteral(to[0]),
-      createLiteral(to[1]),
-    ])
-    return {
-      modifiedAst: node,
-    }
-  }
-  if (maybeDefaultLine !== -1) {
-    const defaultLine = getNodeFromPath<CallExpression>(
-      node,
-      defaultLinePath
-    ).node
-    const { from } = getSketchSegmentFromSourceRange(sketch, [
-      defaultLine.start,
-      defaultLine.end,
-    ]).segment
-    return updateArgs({
-      node,
-      previousProgramMemory,
-      pathToNode: defaultLinePath,
-      to,
-      from,
-    })
-  }
-
-  const last = sketch.value[sketch.value.length - 1]
+  const last = sketch.value[sketch.value.length - 1] || sketch.start
   const from = last.to
 
   return add({
@@ -1526,142 +1118,6 @@ function addTagWithTo(
   }
 }
 
-export const close: InternalFn = (
-  { sourceRange, engineCommandManager, code },
-  sketchGroup: SketchGroup
-): SketchGroup => {
-  const from = getCoordsFromPaths(sketchGroup, sketchGroup.value.length - 1)
-  const to = sketchGroup.start
-    ? sketchGroup.start.from
-    : getCoordsFromPaths(sketchGroup, 0)
-
-  const lineData: LineData = {
-    from: [...from, 0],
-    to: [...to, 0],
-  }
-  const id = makeId({
-    code,
-    sourceRange,
-    data: sketchGroup,
-  })
-  engineCommandManager.sendModellingCommand({
-    id,
-    params: [lineData],
-    range: sourceRange,
-    command: {
-      type: 'modeling_cmd_req',
-      cmd: {
-        type: 'close_path',
-        path_id: sketchGroup.id,
-      },
-      cmd_id: id,
-    },
-  })
-
-  const currentPath: Path = {
-    type: 'toPoint',
-    to,
-    from,
-    __geoMeta: {
-      id,
-      sourceRange,
-      pathToNode: [], // TODO
-    },
-  }
-  const newValue = [...sketchGroup.value]
-  newValue.push(currentPath)
-  return {
-    ...sketchGroup,
-    value: newValue,
-  }
-}
-
-export const startSketchAt: InternalFn = (
-  { sourceRange, programMemory, engineCommandManager, code },
-  data:
-    | [number, number]
-    | 'default'
-    | {
-        to: [number, number] | 'default'
-        // name?: string
-        tag?: string
-      }
-): SketchGroup => {
-  let to: [number, number] = [0, 0]
-  if (data !== 'default' && 'to' in data && data.to !== 'default') {
-    to = data.to
-  } else if (data !== 'default' && !('to' in data)) {
-    to = data
-  }
-
-  const lineData: { to: [number, number, number] } = {
-    to: [...to, 0],
-  }
-  const id = makeId({
-    code,
-    sourceRange,
-    data,
-  })
-  const pathId = makeId({
-    code,
-    sourceRange,
-    data,
-    isPath: true,
-  })
-  engineCommandManager.sendModellingCommand({
-    id: pathId,
-    params: [lineData],
-    range: sourceRange,
-    command: {
-      type: 'modeling_cmd_req',
-      cmd: {
-        type: 'start_path',
-      },
-      cmd_id: pathId,
-    },
-  })
-  engineCommandManager.sendSceneCommand({
-    type: 'modeling_cmd_req',
-    cmd: {
-      type: 'move_path_pen',
-      path: pathId,
-      to: {
-        x: lineData.to[0],
-        y: lineData.to[1],
-        z: 0,
-      },
-    },
-    cmd_id: id,
-  })
-  const currentPath: Path = {
-    type: 'base',
-    to,
-    from: to,
-    __geoMeta: {
-      id,
-      sourceRange,
-      pathToNode: [], // TODO
-    },
-  }
-  if (data !== 'default' && 'tag' in data) {
-    currentPath.name = data.tag
-  }
-  return {
-    type: 'sketchGroup',
-    start: currentPath,
-    value: [],
-    position: [0, 0, 0],
-    rotation: [0, 0, 0, 1],
-    id: pathId,
-    __meta: [
-      {
-        sourceRange,
-        pathToNode: [], // TODO
-      },
-    ],
-  }
-}
-
 export function getYComponent(
   angleDegree: number,
   xComponent: number
@@ -1688,14 +1144,6 @@ function getFirstArgValuesForXYFns(callExpression: CallExpression): {
 } {
   // used for lineTo, line
   const firstArg = callExpression.arguments[0]
-  if (firstArg.type === 'Literal' && firstArg.value === 'default') {
-    return {
-      val:
-        callExpression.callee.name === 'startSketchAt'
-          ? [createLiteral(0), createLiteral(0)]
-          : [createLiteral(1), createLiteral(1)],
-    }
-  }
   if (firstArg.type === 'ArrayExpression') {
     return { val: [firstArg.elements[0], firstArg.elements[1]] }
   }
@@ -1705,8 +1153,6 @@ function getFirstArgValuesForXYFns(callExpression: CallExpression): {
     if (to?.type === 'ArrayExpression') {
       const [x, y] = to.elements
       return { val: [x, y], tag }
-    } else if (to?.type === 'Literal' && to.value === 'default') {
-      return { val: [createLiteral(0), createLiteral(0)], tag }
     }
   }
   throw new Error('expected ArrayExpression or ObjectExpression')

src/lang/std/sketchConstraints.test.ts

@@ -391,6 +391,7 @@ show(part001)`
       type: 'toPoint',
       to: [5.62, 1.79],
       from: [3.48, 0.44],
+      name: '',
     })
   })
   it('verify it works when the segment is in the `start` property', async () => {
@@ -400,6 +401,6 @@ show(part001)`
       programMemory.root['part001'] as SketchGroup,
       [index, index]
     ).segment
-    expect(segment).toEqual({ type: 'base', to: [0, 0.04], from: [0, 0.04] })
+    expect(segment).toEqual({ to: [0, 0.04], from: [0, 0.04], name: '' })
   })
 })

src/lang/std/sketchConstraints.ts

@@ -1,4 +1,3 @@
-import { getAngle } from '../../lib/utils'
 import { TooTip, toolTips } from '../../useStore'
 import {
   Program,
@@ -6,7 +5,6 @@ import {
   CallExpression,
 } from '../abstractSyntaxTreeTypes'
 import { SketchGroup, SourceRange } from '../executor'
-import { InternalFn } from './stdTypes'
 
 export function getSketchSegmentFromSourceRange(
   sketchGroup: SketchGroup,
@@ -36,79 +34,6 @@ export function getSketchSegmentFromSourceRange(
   }
 }
 
-export const segLen: InternalFn = (
-  _,
-  segName: string,
-  sketchGroup: SketchGroup
-): number => {
-  const line = sketchGroup?.value.find((seg) => seg?.name === segName)
-  // maybe this should throw, but the language doesn't have a way to handle errors yet
-  if (!line) return 0
-
-  return Math.sqrt(
-    (line.from[1] - line.to[1]) ** 2 + (line.from[0] - line.to[0]) ** 2
-  )
-}
-
-export const segAng: InternalFn = (
-  _,
-  segName: string,
-  sketchGroup: SketchGroup
-): number => {
-  const line = sketchGroup?.value.find((seg) => seg.name === segName)
-  // maybe this should throw, but the language doesn't have a way to handle errors yet
-  if (!line) return 0
-  return getAngle(line.from, line.to)
-}
-
-function segEndFactory(which: 'x' | 'y'): InternalFn {
-  return (_, segName: string, sketchGroup: SketchGroup): number => {
-    const line =
-      sketchGroup?.start?.name === segName
-        ? sketchGroup?.start
-        : sketchGroup?.value.find((seg) => seg.name === segName)
-    // maybe this should throw, but the language doesn't have a way to handle errors yet
-    if (!line) return 0
-    return which === 'x' ? line.to[0] : line.to[1]
-  }
-}
-
-export const segEndX: InternalFn = segEndFactory('x')
-export const segEndY: InternalFn = segEndFactory('y')
-
-function lastSegFactory(which: 'x' | 'y'): InternalFn {
-  return (_, sketchGroup: SketchGroup): number => {
-    const lastLine = sketchGroup?.value[sketchGroup.value.length - 1]
-    return which === 'x' ? lastLine.to[0] : lastLine.to[1]
-  }
-}
-
-export const lastSegX: InternalFn = lastSegFactory('x')
-export const lastSegY: InternalFn = lastSegFactory('y')
-
-function angleToMatchLengthFactory(which: 'x' | 'y'): InternalFn {
-  return (_, segName: string, to: number, sketchGroup: SketchGroup): number => {
-    const isX = which === 'x'
-    const lineToMatch = sketchGroup?.value.find((seg) => seg.name === segName)
-    // maybe this should throw, but the language doesn't have a way to handle errors yet
-    if (!lineToMatch) return 0
-    const lengthToMatch = Math.sqrt(
-      (lineToMatch.from[1] - lineToMatch.to[1]) ** 2 +
-        (lineToMatch.from[0] - lineToMatch.to[0]) ** 2
-    )
-
-    const lastLine = sketchGroup?.value[sketchGroup.value.length - 1]
-    const diff = Math.abs(to - (isX ? lastLine.to[0] : lastLine.to[1]))
-
-    const angleR = Math[isX ? 'acos' : 'asin'](diff / lengthToMatch)
-
-    return diff > lengthToMatch ? 0 : (angleR * 180) / Math.PI
-  }
-}
-
-export const angleToMatchLengthX: InternalFn = angleToMatchLengthFactory('x')
-export const angleToMatchLengthY: InternalFn = angleToMatchLengthFactory('y')
-
 export function isSketchVariablesLinked(
   secondaryVarDec: VariableDeclarator,
   primaryVarDec: VariableDeclarator,

src/lang/std/sketchcombos.test.ts

@@ -124,7 +124,8 @@ const part001 = startSketchAt([0, 0])
   |> yLine(1.04, %) // ln-yLine-free should sub in segLen
   |> xLineTo(30, %) // ln-xLineTo-free should convert to xLine
   |> yLineTo(20, %) // ln-yLineTo-free should convert to yLine
-show(part001)`
+show(part001)
+`
   const expectModifiedScript = `const myVar = 3
 const myVar2 = 5
 const myVar3 = 6
@@ -195,7 +196,8 @@ const part001 = startSketchAt([0, 0])
   |> yLine(segLen('seg01', %), %) // ln-yLine-free should sub in segLen
   |> xLine(segLen('seg01', %), %) // ln-xLineTo-free should convert to xLine
   |> yLine(segLen('seg01', %), %) // ln-yLineTo-free should convert to yLine
-show(part001)`
+show(part001)
+`
   it('should transform the ast', async () => {
     const ast = parser_wasm(inputScript)
     const selectionRanges: Selections['codeBasedSelections'] = inputScript
@@ -254,7 +256,8 @@ const part001 = startSketchAt([0, 0])
   |> angledLineToY([223, 7.68], %) // select for vertical constraint 9
   |> angledLineToX([333, myVar3], %) // select for horizontal constraint 10
   |> angledLineToY([301, myVar], %) // select for vertical constraint 10
-show(part001)`
+show(part001)
+`
   it('should transform horizontal lines the ast', async () => {
     const expectModifiedScript = `const myVar = 2
 const myVar2 = 12
@@ -281,7 +284,8 @@ const part001 = startSketchAt([0, 0])
   |> angledLineToY([223, 7.68], %) // select for vertical constraint 9
   |> xLineTo(myVar3, %) // select for horizontal constraint 10
   |> angledLineToY([301, myVar], %) // select for vertical constraint 10
-show(part001)`
+show(part001)
+`
     const ast = parser_wasm(inputScript)
     const selectionRanges: Selections['codeBasedSelections'] = inputScript
       .split('\n')
@@ -338,7 +342,8 @@ const part001 = startSketchAt([0, 0])
   |> yLineTo(7.68, %) // select for vertical constraint 9
   |> angledLineToX([333, myVar3], %) // select for horizontal constraint 10
   |> yLineTo(myVar, %) // select for vertical constraint 10
-show(part001)`
+show(part001)
+`
     const ast = parser_wasm(inputScript)
     const selectionRanges: Selections['codeBasedSelections'] = inputScript
       .split('\n')
@@ -380,7 +385,8 @@ const part001 = startSketchAt([0, 0])
   |> line([0.45, 1.46], %) // free
   |> line([myVar, 0.01], %) // xRelative
   |> line([0.7, myVar], %) // yRelative
-show(part001)`
+show(part001)
+`
     it('testing for free to horizontal and vertical distance', async () => {
       const expectedHorizontalCode = await helperThing(
         inputScript,

src/lang/std/std.ts

@@ -1,170 +0,0 @@
-import {
-  lineTo,
-  xLineTo,
-  yLineTo,
-  line,
-  xLine,
-  yLine,
-  angledLine,
-  angledLineOfXLength,
-  angledLineToX,
-  angledLineOfYLength,
-  angledLineToY,
-  close,
-  startSketchAt,
-  angledLineThatIntersects,
-} from './sketch'
-import {
-  segLen,
-  segAng,
-  angleToMatchLengthX,
-  angleToMatchLengthY,
-  segEndX,
-  segEndY,
-  lastSegX,
-  lastSegY,
-} from './sketchConstraints'
-import { getExtrudeWallTransform, extrude } from './extrude'
-
-import { InternalFn, InternalFnNames } from './stdTypes'
-
-// const transform: InternalFn = <T extends SketchGroup | ExtrudeGroup>(
-//   { sourceRange }: InternalFirstArg,
-//   transformInfo: {
-//     position: Position
-//     quaternion: Rotation
-//   },
-//   sketch: T
-// ): T => {
-//   const quaternionToApply = new Quaternion(...transformInfo?.quaternion)
-//   const newQuaternion = new Quaternion(...sketch.rotation).multiply(
-//     quaternionToApply.invert()
-//   )
-
-//   const oldPosition = new Vector3(...sketch?.position)
-//   const newPosition = oldPosition
-//     .applyQuaternion(quaternionToApply)
-//     .add(new Vector3(...transformInfo?.position))
-//   return {
-//     ...sketch,
-//     position: newPosition.toArray(),
-//     rotation: newQuaternion.toArray(),
-//     __meta: [
-//       ...sketch.__meta,
-//       {
-//         sourceRange,
-//         pathToNode: [], // TODO
-//       },
-//     ],
-//   }
-// }
-
-// const translate: InternalFn = <T extends SketchGroup | ExtrudeGroup>(
-//   { sourceRange }: InternalFirstArg,
-//   vec3: [number, number, number],
-//   sketch: T
-// ): T => {
-//   const oldPosition = new Vector3(...sketch.position)
-//   const newPosition = oldPosition.add(new Vector3(...vec3))
-//   return {
-//     ...sketch,
-//     position: newPosition.toArray(),
-//     __meta: [
-//       ...sketch.__meta,
-//       {
-//         sourceRange,
-//         pathToNode: [], // TODO
-//       },
-//     ],
-//   }
-// }
-
-const min: InternalFn = (_, a: number, b: number): number => Math.min(a, b)
-
-const legLen: InternalFn = (_, hypotenuse: number, leg: number): number =>
-  Math.sqrt(
-    hypotenuse ** 2 - Math.min(Math.abs(leg), Math.abs(hypotenuse)) ** 2
-  )
-
-const legAngX: InternalFn = (_, hypotenuse: number, leg: number): number =>
-  (Math.acos(Math.min(leg, hypotenuse) / hypotenuse) * 180) / Math.PI
-
-const legAngY: InternalFn = (_, hypotenuse: number, leg: number): number =>
-  (Math.asin(Math.min(leg, hypotenuse) / hypotenuse) * 180) / Math.PI
-
-export const internalFns: { [key in InternalFnNames]: InternalFn } = {
-  // TODO - re-enable these
-  // rx: rotateOnAxis([1, 0, 0]), // Enable rotations #152
-  // ry: rotateOnAxis([0, 1, 0]),
-  // rz: rotateOnAxis([0, 0, 1]),
-  extrude,
-  // translate,
-  // transform,
-  getExtrudeWallTransform,
-  min,
-  legLen,
-  legAngX,
-  legAngY,
-  segEndX,
-  segEndY,
-  lastSegX,
-  lastSegY,
-  segLen,
-  segAng,
-  angleToMatchLengthX,
-  angleToMatchLengthY,
-  lineTo: lineTo.fn,
-  xLineTo: xLineTo.fn,
-  yLineTo: yLineTo.fn,
-  line: line.fn,
-  xLine: xLine.fn,
-  yLine: yLine.fn,
-  angledLine: angledLine.fn,
-  angledLineOfXLength: angledLineOfXLength.fn,
-  angledLineToX: angledLineToX.fn,
-  angledLineOfYLength: angledLineOfYLength.fn,
-  angledLineToY: angledLineToY.fn,
-  angledLineThatIntersects: angledLineThatIntersects.fn,
-  startSketchAt,
-  close,
-}
-
-// function rotateOnAxis<T extends SketchGroup | ExtrudeGroup>(
-//   axisMultiplier: [number, number, number]
-// ): InternalFn {
-//   return ({ sourceRange }, rotationD: number, sketch: T): T => {
-//     const rotationR = rotationD * (Math.PI / 180)
-//     const rotateVec = new Vector3(...axisMultiplier)
-//     const quaternion = new Quaternion()
-//     quaternion.setFromAxisAngle(rotateVec, rotationR)
-
-//     const position = new Vector3(...sketch.position)
-//       .applyQuaternion(quaternion)
-//       .toArray()
-
-//     const existingQuat = new Quaternion(...sketch.rotation)
-//     const rotation = quaternion.multiply(existingQuat).toArray()
-//     return {
-//       ...sketch,
-//       rotation,
-//       position,
-//       __meta: [
-//         ...sketch.__meta,
-//         {
-//           sourceRange,
-//           pathToNode: [], // TODO
-//         },
-//       ],
-//     }
-//   }
-// }
-
-export function clockwiseSign(points: [number, number][]): number {
-  let sum = 0
-  for (let i = 0; i < points.length; i++) {
-    const currentPoint = points[i]
-    const nextPoint = points[(i + 1) % points.length]
-    sum += (nextPoint[0] - currentPoint[0]) * (nextPoint[1] + currentPoint[1])
-  }
-  return sum >= 0 ? 1 : -1
-}

src/lang/std/stdTypes.ts

@@ -17,44 +17,6 @@ export interface PathReturn {
   currentPath: Path
 }
 
-export type InternalFn = (internals: InternalFirstArg, ...args: any[]) => any
-
-export type InternalFnNames =
-  // TODO re-enable these
-  // | 'translate'
-  // | 'transform'
-  // | 'rx' // Enable rotations #152
-  // | 'ry'
-  // | 'rz'
-  | 'extrude'
-  | 'getExtrudeWallTransform'
-  | 'min'
-  | 'legLen'
-  | 'legAngX'
-  | 'legAngY'
-  | 'segEndX'
-  | 'segEndY'
-  | 'lastSegX'
-  | 'lastSegY'
-  | 'segLen'
-  | 'segAng'
-  | 'angleToMatchLengthX'
-  | 'angleToMatchLengthY'
-  | 'lineTo'
-  | 'yLineTo'
-  | 'xLineTo'
-  | 'line'
-  | 'yLine'
-  | 'xLine'
-  | 'angledLine'
-  | 'angledLineOfXLength'
-  | 'angledLineToX'
-  | 'angledLineOfYLength'
-  | 'angledLineToY'
-  | 'startSketchAt'
-  | 'close'
-  | 'angledLineThatIntersects'
-
 export interface ModifyAstBase {
   node: Program
   previousProgramMemory: ProgramMemory
@@ -87,7 +49,6 @@ export type SketchCallTransfromMap = {
 }
 
 export interface SketchLineHelper {
-  fn: InternalFn
   add: (a: addCall) => {
     modifiedAst: Program
     pathToNode: PathToNode

src/lang/tokeniser.test.ts

@@ -110,7 +110,7 @@ const yi=45`
       "brace        ')'        from 17  to 18",
     ])
     expect(stringSummaryLexer('fn funcName = (param1, param2) => {}')).toEqual([
-      "word         'fn'       from 0   to 2",
+      "keyword      'fn'       from 0   to 2",
       "whitespace   ' '        from 2   to 3",
       "word         'funcName' from 3   to 11",
       "whitespace   ' '        from 11  to 12",
@@ -203,7 +203,7 @@ const yi=45`
   it('testing array declaration', () => {
     const result = stringSummaryLexer(`const yo = [1, 2]`)
     expect(result).toEqual([
-      "word         'const'    from 0   to 5",
+      "keyword      'const'    from 0   to 5",
       "whitespace   ' '        from 5   to 6",
       "word         'yo'       from 6   to 8",
       "whitespace   ' '        from 8   to 9",
@@ -220,7 +220,7 @@ const yi=45`
   it('testing object declaration', () => {
     const result = stringSummaryLexer(`const yo = {key: 'value'}`)
     expect(result).toEqual([
-      "word         'const'    from 0   to 5",
+      "keyword      'const'    from 0   to 5",
       "whitespace   ' '        from 5   to 6",
       "word         'yo'       from 6   to 8",
       "whitespace   ' '        from 8   to 9",
@@ -241,7 +241,7 @@ const prop2 = yo['key']
 const key = 'key'
 const prop3 = yo[key]`)
     expect(result).toEqual([
-      "word         'const'    from 0   to 5",
+      "keyword      'const'    from 0   to 5",
       "whitespace   ' '        from 5   to 6",
       "word         'yo'       from 6   to 8",
       "whitespace   ' '        from 8   to 9",
@@ -254,7 +254,7 @@ const prop3 = yo[key]`)
       "string       ''value''  from 17  to 24",
       "brace        '}'        from 24  to 25",
       "whitespace   '\n'        from 25  to 26",
-      "word         'const'    from 26  to 31",
+      "keyword      'const'    from 26  to 31",
       "whitespace   ' '        from 31  to 32",
       "word         'prop'     from 32  to 36",
       "whitespace   ' '        from 36  to 37",
@@ -264,7 +264,7 @@ const prop3 = yo[key]`)
       "period       '.'        from 41  to 42",
       "word         'key'      from 42  to 45",
       "whitespace   '\n'        from 45  to 46",
-      "word         'const'    from 46  to 51",
+      "keyword      'const'    from 46  to 51",
       "whitespace   ' '        from 51  to 52",
       "word         'prop2'    from 52  to 57",
       "whitespace   ' '        from 57  to 58",
@@ -275,7 +275,7 @@ const prop3 = yo[key]`)
       "string       ''key''    from 63  to 68",
       "brace        ']'        from 68  to 69",
       "whitespace   '\n'        from 69  to 70",
-      "word         'const'    from 70  to 75",
+      "keyword      'const'    from 70  to 75",
       "whitespace   ' '        from 75  to 76",
       "word         'key'      from 76  to 79",
       "whitespace   ' '        from 79  to 80",
@@ -283,7 +283,7 @@ const prop3 = yo[key]`)
       "whitespace   ' '        from 81  to 82",
       "string       ''key''    from 82  to 87",
       "whitespace   '\n'        from 87  to 88",
-      "word         'const'    from 88  to 93",
+      "keyword      'const'    from 88  to 93",
       "whitespace   ' '        from 93  to 94",
       "word         'prop3'    from 94  to 99",
       "whitespace   ' '        from 99  to 100",
@@ -299,7 +299,7 @@ const prop3 = yo[key]`)
     const result = stringSummaryLexer(`const yo = 45 // this is a comment
 const yo = 6`)
     expect(result).toEqual([
-      "word         'const'    from 0   to 5",
+      "keyword      'const'    from 0   to 5",
       "whitespace   ' '        from 5   to 6",
       "word         'yo'       from 6   to 8",
       "whitespace   ' '        from 8   to 9",
@@ -307,9 +307,9 @@ const yo = 6`)
       "whitespace   ' '        from 10  to 11",
       "number       '45'       from 11  to 13",
       "whitespace   ' '        from 13  to 14",
-      "linecomment  '// this is a comment' from 14  to 34",
+      "lineComment  '// this is a comment' from 14  to 34",
       "whitespace   '\n'        from 34  to 35",
-      "word         'const'    from 35  to 40",
+      "keyword      'const'    from 35  to 40",
       "whitespace   ' '        from 40  to 41",
       "word         'yo'       from 41  to 43",
       "whitespace   ' '        from 43  to 44",
@@ -328,9 +328,9 @@ const yo=45`)
       "string       ''hi''     from 4   to 8",
       "brace        ')'        from 8   to 9",
       "whitespace   '\n'        from 9   to 10",
-      "linecomment  '// comment on a line by itself' from 10  to 40",
+      "lineComment  '// comment on a line by itself' from 10  to 40",
       "whitespace   '\n'        from 40  to 41",
-      "word         'const'    from 41  to 46",
+      "keyword      'const'    from 41  to 46",
       "whitespace   ' '        from 46  to 47",
       "word         'yo'       from 47  to 49",
       "operator     '='        from 49  to 50",
@@ -342,7 +342,7 @@ const yo=45`)
 const ya = 6 */
 const yi=45`)
     expect(result).toEqual([
-      "word         'const'    from 0   to 5",
+      "keyword      'const'    from 0   to 5",
       "whitespace   ' '        from 5   to 6",
       "word         'yo'       from 6   to 8",
       "whitespace   ' '        from 8   to 9",
@@ -350,10 +350,10 @@ const yi=45`)
       "whitespace   ' '        from 10  to 11",
       "number       '45'       from 11  to 13",
       "whitespace   ' '        from 13  to 14",
-      `blockcomment '/* this is a comment
+      `blockComment '/* this is a comment
 const ya = 6 */' from 14  to 50`,
       "whitespace   '\n'        from 50  to 51",
-      "word         'const'    from 51  to 56",
+      "keyword      'const'    from 51  to 56",
       "whitespace   ' '        from 56  to 57",
       "word         'yi'       from 57  to 59",
       "operator     '='        from 59  to 60",

src/lang/tokeniser.ts

@@ -1,8 +1,8 @@
 import { lexer_js } from '../wasm-lib/pkg/wasm_lib'
 import { initPromise } from './rust'
-import { Token } from '../wasm-lib/bindings/Token'
+import { Token } from '../wasm-lib/kcl/bindings/Token'
 
-export type { Token } from '../wasm-lib/bindings/Token'
+export type { Token } from '../wasm-lib/kcl/bindings/Token'
 
 export async function asyncLexer(str: string): Promise<Token[]> {
   await initPromise

src/lang/util.ts

@@ -26,3 +26,12 @@ export function updateCursors(
     setCursor(newSelections)
   }
 }
+
+export function isReducedMotion(): boolean {
+  return (
+    typeof window !== 'undefined' &&
+    window.matchMedia &&
+    // TODO/Note I (Kurt) think '(prefers-reduced-motion: reduce)' and '(prefers-reduced-motion)' are equivalent, but not 100% sure
+    window.matchMedia('(prefers-reduced-motion)').matches
+  )
+}

src/lib/cameraControls.ts

@@ -0,0 +1,156 @@
+const noModifiersPressed = (e: React.MouseEvent) =>
+  !e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey
+
+export type CameraSystem =
+  | 'KittyCAD'
+  | 'OnShape'
+  | 'Trackpad Friendly'
+  | 'Solidworks'
+  | 'NX'
+  | 'Creo'
+  | 'AutoCAD'
+
+export const cameraSystems: CameraSystem[] = [
+  'KittyCAD',
+  'OnShape',
+  'Trackpad Friendly',
+  'Solidworks',
+  'NX',
+  'Creo',
+  'AutoCAD',
+]
+
+interface MouseGuardHandler {
+  description: string
+  callback: (e: React.MouseEvent) => boolean
+  lenientDragStartButton?: number
+}
+
+interface MouseGuardZoomHandler {
+  description: string
+  dragCallback: (e: React.MouseEvent) => boolean
+  scrollCallback: (e: React.MouseEvent) => boolean
+  lenientDragStartButton?: number
+}
+
+interface MouseGuard {
+  pan: MouseGuardHandler
+  zoom: MouseGuardZoomHandler
+  rotate: MouseGuardHandler
+}
+
+export const cameraMouseDragGuards: Record<CameraSystem, MouseGuard> = {
+  KittyCAD: {
+    pan: {
+      description: 'Right click + Shift + drag or middle click + drag',
+      callback: (e) =>
+        (e.button === 1 && noModifiersPressed(e)) ||
+        (e.button === 2 && e.shiftKey),
+    },
+    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 === 2 && noModifiersPressed(e),
+    },
+  },
+  OnShape: {
+    pan: {
+      description: 'Right click + Ctrl + drag or middle click + drag',
+      callback: (e) =>
+        (e.button === 2 && e.ctrlKey) ||
+        (e.button === 1 && noModifiersPressed(e)),
+    },
+    zoom: {
+      description: 'Scroll wheel',
+      dragCallback: () => false,
+      scrollCallback: () => true,
+    },
+    rotate: {
+      description: 'Right click + drag',
+      callback: (e) => e.button === 2 && noModifiersPressed(e),
+    },
+  },
+  'Trackpad Friendly': {
+    pan: {
+      description: 'Left click + Alt + Shift + drag or middle click + drag',
+      callback: (e) =>
+        (e.button === 0 && e.altKey && e.shiftKey && !e.metaKey) ||
+        (e.button === 1 && noModifiersPressed(e)),
+    },
+    zoom: {
+      description: 'Scroll wheel or Left click + Alt + OS + drag',
+      dragCallback: (e) => e.button === 0 && e.altKey && e.metaKey,
+      scrollCallback: () => true,
+    },
+    rotate: {
+      description: 'Left click + Alt + drag',
+      callback: (e) => e.button === 0 && e.altKey && !e.shiftKey && !e.metaKey,
+      lenientDragStartButton: 0,
+    },
+  },
+  Solidworks: {
+    pan: {
+      description: 'Right click + Ctrl + drag',
+      callback: (e) => e.button === 2 && e.ctrlKey,
+      lenientDragStartButton: 2,
+    },
+    zoom: {
+      description: 'Scroll wheel or Middle click + Shift + drag',
+      dragCallback: (e) => e.button === 1 && e.shiftKey,
+      scrollCallback: () => true,
+    },
+    rotate: {
+      description: 'Middle click + drag',
+      callback: (e) => e.button === 1 && noModifiersPressed(e),
+    },
+  },
+  NX: {
+    pan: {
+      description: 'Middle click + Shift + drag',
+      callback: (e) => e.button === 1 && e.shiftKey,
+    },
+    zoom: {
+      description: 'Scroll wheel or Middle click + Ctrl + drag',
+      dragCallback: (e) => e.button === 1 && e.ctrlKey,
+      scrollCallback: () => true,
+    },
+    rotate: {
+      description: 'Middle click + drag',
+      callback: (e) => e.button === 1 && noModifiersPressed(e),
+    },
+  },
+  Creo: {
+    pan: {
+      description: 'Middle click + Shift + drag',
+      callback: (e) => e.button === 1 && e.shiftKey,
+    },
+    zoom: {
+      description: 'Scroll wheel or Middle click + Ctrl + drag',
+      dragCallback: (e) => e.button === 1 && e.ctrlKey,
+      scrollCallback: () => true,
+    },
+    rotate: {
+      description: 'Middle click + drag',
+      callback: (e) => e.button === 1 && noModifiersPressed(e),
+    },
+  },
+  AutoCAD: {
+    pan: {
+      description: 'Middle click + drag',
+      callback: (e) => e.button === 1 && noModifiersPressed(e),
+    },
+    zoom: {
+      description: 'Scroll wheel',
+      dragCallback: () => false,
+      scrollCallback: () => true,
+    },
+    rotate: {
+      description: 'Middle click + Shift + drag',
+      callback: (e) => e.button === 1 && e.shiftKey,
+    },
+  },
+}

src/lib/commands.ts

@@ -0,0 +1,124 @@
+import { AnyStateMachine, EventFrom, StateFrom } from 'xstate'
+import { isTauri } from './isTauri'
+
+type InitialCommandBarMetaArg = {
+  name: string
+  type: 'string' | 'select'
+  description?: string
+  defaultValue?: string
+  options: string | Array<{ name: string }>
+}
+
+type Platform = 'both' | 'web' | 'desktop'
+
+export type CommandBarMeta = {
+  [key: string]:
+    | {
+        displayValue: (args: string[]) => string
+        args: InitialCommandBarMetaArg[]
+        hide?: Platform
+      }
+    | {
+        hide?: Platform
+      }
+}
+
+export type Command = {
+  owner: string
+  name: string
+  callback: Function
+  meta?: {
+    displayValue(args: string[]): string | string
+    args: SubCommand[]
+  }
+}
+
+export type SubCommand = {
+  name: string
+  type: 'select' | 'string'
+  description?: string
+  options?: Partial<{ name: string }>[]
+}
+
+interface CommandBarArgs<T extends AnyStateMachine> {
+  type: EventFrom<T>['type']
+  state: StateFrom<T>
+  commandBarMeta?: CommandBarMeta
+  send: Function
+  owner: string
+}
+
+export function createMachineCommand<T extends AnyStateMachine>({
+  type,
+  state,
+  commandBarMeta,
+  send,
+  owner,
+}: CommandBarArgs<T>): Command | null {
+  const lookedUpMeta = commandBarMeta && commandBarMeta[type]
+  if (lookedUpMeta && 'hide' in lookedUpMeta) {
+    const { hide } = lookedUpMeta
+    if (hide === 'both') return null
+    else if (hide === 'desktop' && isTauri()) return null
+    else if (hide === 'web' && !isTauri()) return null
+  }
+  let replacedArgs
+
+  if (lookedUpMeta && 'args' in lookedUpMeta) {
+    replacedArgs = lookedUpMeta.args.map((arg) => {
+      const optionsFromContext = state.context[
+        arg.options as keyof typeof state.context
+      ] as { name: string }[] | string | undefined
+      const defaultValueFromContext = state.context[
+        arg.defaultValue as keyof typeof state.context
+      ] as string | undefined
+
+      const options =
+        arg.options instanceof Array
+          ? arg.options.map((o) => ({
+              ...o,
+              description:
+                defaultValueFromContext === o.name ? '(current)' : '',
+            }))
+          : !optionsFromContext || typeof optionsFromContext === 'string'
+          ? [
+              {
+                name: optionsFromContext,
+                description: arg.description || '',
+              },
+            ]
+          : optionsFromContext.map((o) => ({
+              name: o.name || '',
+              description: arg.description || '',
+            }))
+
+      return {
+        ...arg,
+        options,
+      }
+    }) as any[]
+  }
+
+  // We have to recreate this object every time,
+  // otherwise we'll have stale state in the CommandBar
+  // after completing our first action
+  const meta = lookedUpMeta
+    ? {
+        ...lookedUpMeta,
+        args: replacedArgs,
+      }
+    : undefined
+
+  return {
+    name: type,
+    owner,
+    callback: (data: EventFrom<T, typeof type>) => {
+      if (data !== undefined && data !== null) {
+        send(type, { data })
+      } else {
+        send(type)
+      }
+    },
+    meta: meta as any,
+  }
+}

src/lib/fetcher.ts

@@ -1,10 +1,5 @@
-import { useAuthMachine } from '../hooks/useAuthMachine'
-
-export default async function fetcher<JSON = any>(
-  input: RequestInfo,
-  init: RequestInit = {}
-): Promise<JSON> {
-  const [token] = useAuthMachine((s) => s?.context?.token)
+export default function fetcher(input: RequestInfo, init: RequestInit = {}) {
+  const fetcherWithToken = async (token?: string): Promise<JSON> => {
     const headers = { ...init.headers } as Record<string, string>
     if (token) {
       headers.Authorization = `Bearer ${token}`
@@ -13,4 +8,6 @@ export default async function fetcher<JSON = any>(
     const credentials = 'include' as RequestCredentials
     const res = await fetch(input, { ...init, credentials, headers })
     return res.json()
+  }
+  return fetcherWithToken
 }