Cut release v0.12.0 (#1069)

* Fit resolutions to less than 2k x 2k

* Integer resolutions

* Scale mouse clicks

* Move stream maxResolution logic to getDimensions

.codespellrc

@@ -0,0 +1,3 @@
+[codespell]
+ignore-words-list: crate,everytime
+skip: **/target,node_modules,build

.eslintrc

@@ -11,6 +11,7 @@
       "semi": [
         "error",
         "never"
-      ]
+      ],
+      "react-hooks/exhaustive-deps": "off"
     }
 }

.github/workflows/cargo-build.yml

@@ -15,6 +15,9 @@ on:
       - '**/Cargo.lock'
       - '**/rust-toolchain.toml'
       - .github/workflows/cargo-build.yml
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
 name: cargo build
 jobs:
   cargobuild:

.github/workflows/cargo-clippy.yml

@@ -15,6 +15,9 @@ on:
       - '**/rust-toolchain.toml'
       - '**.rs'
       - .github/workflows/cargo-build.yml
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
 name: cargo clippy
 jobs:
   cargoclippy:

.github/workflows/cargo-criterion.yml

@@ -17,6 +17,9 @@ on:
       - .github/workflows/cargo-criterion.yml
   workflow_dispatch:
 permissions: read-all
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
 name: cargo criterion
 jobs:
   cargocriterion:

.github/workflows/cargo-fmt.yml

@@ -18,6 +18,9 @@ on:
 permissions:
   packages: read
   contents: read
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
 name: cargo fmt
 jobs:
   cargofmt:

.github/workflows/cargo-test.yml

@@ -17,6 +17,9 @@ on:
       - .github/workflows/cargo-test.yml
   workflow_dispatch:
 permissions: read-all
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
 name: cargo test
 jobs:
   cargotest:

.github/workflows/ci.yml

@@ -7,25 +7,37 @@ on:
       - main
   release:
     types: [published]
+  schedule:
+    - cron: '0 4 * * *'
+  # Daily at 04:00 AM UTC
+  # Will checkout the last commit from the default branch (main as of 2023-10-04)
+
+env:
+  BUILD_RELEASE: ${{ github.event_name == 'release' || github.event_name == 'schedule' || github.event_name == 'pull_request' && contains(github.event.pull_request.title, 'Cut release v') }}
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
 
 jobs:
   check-format:
-    runs-on: 'ubuntu-20.04'
+    runs-on: 'ubuntu-latest'
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'yarn'
       - run: yarn install
       - run: yarn fmt-check
 
+
   check-types:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'yarn'
@@ -37,14 +49,27 @@ jobs:
       - run: yarn build:wasm
       - run: yarn tsc
 
+
+  check-typos: 
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Python
+        uses: actions/setup-python@v4
+      - name: Install codespell
+        run: |
+            python -m pip install codespell
+      - name: Run codespell
+        run: codespell --config .codespellrc # Edit this file to tweak the typo list and other configuration.
+
+
   build-test-web:
-    runs-on: ubuntu-20.04
-    outputs:
-      version: ${{ steps.export_version.outputs.version }}
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'yarn'
@@ -63,36 +88,81 @@ jobs:
 
       - run: yarn test:cov
 
-      - id: export_version
-        run: echo "version=`cat package.json | jq -r '.version'`" >> "$GITHUB_OUTPUT"
 
-  build-apps:
-    needs: [check-format, build-test-web, check-types]
-    runs-on: ${{ matrix.os }}
-    strategy:
-      matrix:
-        os: [macos-latest, ubuntu-20.04, windows-latest]
+  prepare-json-files:
+    runs-on: ubuntu-latest  # seperate job on Ubuntu for easy string manipulations (compared to Windows)
+    outputs:
+      version: ${{ steps.export_version.outputs.version }}
     steps:
       - uses: actions/checkout@v4
 
-      - name: install ubuntu system dependencies
-        if: matrix.os == 'ubuntu-20.04'
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+          
+      - name: Set nightly version
+        if: github.event_name == 'schedule'
         run: |
-          sudo apt-get update
-          sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.0-dev libayatana-appindicator3-dev librsvg2-dev
+          VERSION=$(date +'%-y.%-m.%-d') yarn bump-jsons
+          echo "$(jq --arg url 'https://dl.kittycad.io/releases/modeling-app/nightly/last_update.json' \
+            '.tauri.updater.endpoints[]=$url' src-tauri/tauri.release.conf.json --indent 2)" > src-tauri/tauri.release.conf.json
+
+      - uses: actions/upload-artifact@v3
+        if: github.event_name == 'schedule'
+        with:
+          path: |
+            package.json
+            src-tauri/tauri.conf.json
+            src-tauri/tauri.release.conf.json
+
+      - id: export_version
+        run: echo "version=`cat package.json | jq -r '.version'`" >> "$GITHUB_OUTPUT"
+
+
+  build-test-apps:
+    needs: [prepare-json-files]
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [macos-latest, ubuntu-latest, windows-latest]
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/download-artifact@v3
+
+      - name: Copy updated .json files
+        if: github.event_name == 'schedule'
+        run: |
+          ls -l artifact
+          cp artifact/package.json package.json
+          cp artifact/src-tauri/tauri.conf.json src-tauri/tauri.conf.json
+          cp artifact/src-tauri/tauri.release.conf.json src-tauri/tauri.release.conf.json 
+
+      - name: Install ubuntu system dependencies
+        if: matrix.os == 'ubuntu-latest'
+        run: >
+          sudo apt-get update &&
+          sudo apt-get install -y
+          libgtk-3-dev
+          libgtksourceview-3.0-dev
+          webkit2gtk-4.0
+          libappindicator3-dev
+          webkit2gtk-driver
+          xvfb
 
       - name: Sync node version and setup cache
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'yarn' # Set this to npm, yarn or pnpm.
 
       - run: yarn install
 
-      - name: Rust setup
+      - name: Setup Rust
         uses: dtolnay/rust-toolchain@stable
 
-      - name: Rust cache
+      - name: Setup Rust cache
         uses: swatinem/rust-cache@v2
         with:
           workspaces: './src-tauri -> target'
@@ -101,24 +171,27 @@ jobs:
         with:
           workspaces: './src/wasm-lib'
 
-      - name: wasm prep
+      - name: Run build:wasm manually
         shell: bash
+        env:
+          MODE: ${{ env.BUILD_RELEASE == 'true' && '--release' || '--debug' }}
         run: |
           mkdir src/wasm-lib/pkg; cd src/wasm-lib
-          npx wasm-pack build --target web --out-dir pkg
+          echo "building with ${{ env.MODE }}"
+          npx wasm-pack build --target web --out-dir pkg ${{ env.MODE }}
           cd ../../
           cp src/wasm-lib/pkg/wasm_lib_bg.wasm public
 
       - name: Fix format
         run: yarn fmt
 
-      - name: install apple silicon target mac
+      - name: Install Universal target (MacOS only)
         if: matrix.os == 'macos-latest'
         run: |
           rustup target add aarch64-apple-darwin
 
-      - name: Prepare Windows certificate and variables
-        if: matrix.os == 'windows-latest'
+      - name: Prepare certificate and variables (Windows only)
+        if: ${{ matrix.os == 'windows-latest' && env.BUILD_RELEASE == 'true' }}
         run: |
           echo "${{secrets.SM_CLIENT_CERT_FILE_B64 }}" | base64 --decode > /d/Certificate_pkcs12.p12
           cat /d/Certificate_pkcs12.p12
@@ -132,8 +205,8 @@ jobs:
           echo "C:\Program Files\DigiCert\DigiCert One Signing Manager Tools" >> $GITHUB_PATH
         shell: bash
 
-      - name: Setup Windows certicate with SSM KSP
-        if: matrix.os == 'windows-latest'
+      - name: Setup certicate with SSM KSP (Windows only)
+        if: ${{ matrix.os == 'windows-latest' && env.BUILD_RELEASE == 'true' }}
         run: |
           curl -X GET  https://one.digicert.com/signingmanager/api-ui/v1/releases/smtools-windows-x64.msi/download -H "x-api-key:%SM_API_KEY%" -o smtools-windows-x64.msi
           msiexec /i smtools-windows-x64.msi /quiet /qn
@@ -143,8 +216,17 @@ jobs:
           smksp_cert_sync.exe
         shell: cmd
 
-      - name: Build and sign the app for the current platform
+      - name: Build the app (debug)
         uses: tauri-apps/tauri-action@v0
+        if: ${{ env.BUILD_RELEASE == 'false' }}
+        with:
+          includeRelease: false
+          includeDebug: true
+          args: ${{ matrix.os == 'macos-latest' && '--target universal-apple-darwin' || '' }}
+
+      - name: Build the app (release) and sign
+        uses: tauri-apps/tauri-action@v0
+        if: ${{ env.BUILD_RELEASE == 'true' }}
         env:
           TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
           TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
@@ -153,21 +235,42 @@ jobs:
           APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
           APPLE_ID: ${{ secrets.APPLE_ID }}
           APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
+          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
+          TAURI_CONF_ARGS: "--config ${{ matrix.os == 'windows-latest' && 'src-tauri\\tauri.release.conf.json' || 'src-tauri/tauri.release.conf.json' }}"
         with:
-          args: ${{ matrix.os == 'macos-latest' && '--target universal-apple-darwin' || '' }}
+          args: "${{ matrix.os == 'macos-latest' && '--target universal-apple-darwin' || '' }} ${{ env.TAURI_CONF_ARGS }}"
 
       - uses: actions/upload-artifact@v3
+        env:
+          PREFIX: ${{ matrix.os == 'macos-latest' && 'src-tauri/target/universal-apple-darwin' || 'src-tauri/target' }}
+          MODE: ${{ env.BUILD_RELEASE == 'true' && 'release' || 'debug' }}
         with:
-          path: ${{ matrix.os == 'macos-latest' && 'src-tauri/target/universal-apple-darwin/release/bundle/*/*' || 'src-tauri/target/release/bundle/*/*' }}
+          path: "${{ env.PREFIX }}/${{ env.MODE }}/bundle/*/*"
+
+      - name: Install tauri-driver for e2e tests (linux only)
+        if: matrix.os == 'ubuntu-latest'
+        uses: actions-rs/cargo@v1
+        with:
+          command: install
+          args: tauri-driver
+
+      - name: Run e2e tests (linux only)
+        if: matrix.os == 'ubuntu-latest'
+        run: xvfb-run yarn test:e2e
+        env:
+          MODE: ${{ env.BUILD_RELEASE == 'true' && 'release' || 'debug' }}
+
 
   publish-apps-release:
-    runs-on: ubuntu-20.04
-    if: github.event_name == 'release'
-    needs: [build-test-web, build-apps]
+    runs-on: ubuntu-latest
+    if: ${{ github.event_name == 'release' || github.event_name == 'schedule' }}
+    needs: [check-format, check-types, check-typos, build-test-web, prepare-json-files, build-test-apps]
     env:
-      VERSION_NO_V: ${{ needs.build-test-web.outputs.version }}
-      PUB_DATE: ${{ github.event.release.created_at }}
-      NOTES: ${{ github.event.release.body }}
+      VERSION_NO_V: ${{ needs.prepare-json-files.outputs.version }}
+      VERSION: ${{ github.event_name == 'release' && format('v{0}', needs.prepare-json-files.outputs.version) || needs.prepare-json-files.outputs.version }}
+      PUB_DATE: ${{ github.event_name == 'release' && github.event.release.created_at || github.event.repository.updated_at }}
+      NOTES: ${{ github.event_name == 'release' && github.event.release.body || format('Nightly build, commit {0}', github.sha) }}
+      BUCKET_DIR: ${{ github.event_name == 'release' && 'dl.kittycad.io/releases/modeling-app' || 'dl.kittycad.io/releases/modeling-app/nightly' }}
     steps:
       - uses: actions/download-artifact@v3
 
@@ -177,9 +280,9 @@ jobs:
           DARWIN_SIG=`cat artifact/macos/*.app.tar.gz.sig`
           LINUX_SIG=`cat artifact/appimage/*.AppImage.tar.gz.sig`
           WINDOWS_SIG=`cat artifact/msi/*.msi.zip.sig`
-          RELEASE_DIR=https://dl.kittycad.io/releases/modeling-app/v${VERSION_NO_V}
+          RELEASE_DIR=https://${BUCKET_DIR}/${VERSION}
           jq --null-input \
-            --arg version "v${VERSION_NO_V}" \
+            --arg version "${VERSION}" \
             --arg pub_date "${PUB_DATE}" \
             --arg notes "${NOTES}" \
             --arg darwin_sig "$DARWIN_SIG" \
@@ -215,9 +318,9 @@ jobs:
 
       - name: Generate the download static endpoint
         run: |
-          RELEASE_DIR=https://dl.kittycad.io/releases/modeling-app/v${VERSION_NO_V}
+          RELEASE_DIR=https://${BUCKET_DIR}/${VERSION}
           jq --null-input \
-            --arg version "v${VERSION_NO_V}" \
+            --arg version "${VERSION}" \
             --arg pub_date "${PUB_DATE}" \
             --arg notes "${NOTES}" \
             --arg darwin_url "$RELEASE_DIR/dmg/KittyCAD%20Modeling_${VERSION_NO_V}_universal.dmg" \
@@ -257,21 +360,22 @@ jobs:
           path: artifact
           glob: '*/*itty*'
           parent: false
-          destination: dl.kittycad.io/releases/modeling-app/v${{ env.VERSION_NO_V }}
+          destination: ${{ env.BUCKET_DIR }}/${{ env.VERSION }}
 
       - name: Upload update endpoint to public bucket
         uses: google-github-actions/upload-cloud-storage@v1.0.3
         with:
           path: last_update.json
-          destination: dl.kittycad.io/releases/modeling-app
+          destination: ${{ env.BUCKET_DIR }}
 
       - name: Upload download endpoint to public bucket
         uses: google-github-actions/upload-cloud-storage@v1.0.3
         with:
           path: last_download.json
-          destination: dl.kittycad.io/releases/modeling-app
+          destination: ${{ env.BUCKET_DIR }}
 
       - name: Upload release files to Github
+        if: ${{ github.event_name == 'release' }}
         uses: softprops/action-gh-release@v1
         with:
           files: artifact/*/*itty*

.prettierignore

@@ -7,3 +7,6 @@ coverage
 target
 src/wasm-lib/pkg
 src/wasm-lib/kcl/bindings
+
+# XState generated files
+src/machines/modelingMachine.typegen.ts

README.md

@@ -29,6 +29,7 @@ The 3D view in KittyCAD Modeling App is just a video stream from our hosted geom
   - [React](https://react.dev/)
   - [Headless UI](https://headlessui.com/)
   - [TailwindCSS](https://tailwindcss.com/)
+  - [XState](https://xstate.js.org/)
 - Networking
   - WebSockets (via [KittyCAD TS client](https://github.com/KittyCAD/kittycad.ts))
 - Code Editor
@@ -47,7 +48,7 @@ We recommend downloading the latest application binary from [our Releases page](
 
 ## Running a development build
 
-First, [install Rust via `rustup`](https://www.rust-lang.org/tools/install). This project uses a lot of Rust compiled to [WASM](https://webassembly.org/) within it. Then, run:
+First, [install Rust via `rustup`](https://www.rust-lang.org/tools/install). This project uses a lot of Rust compiled to [WASM](https://webassembly.org/) within it. We always use the latest stable version of Rust, so you may need to run `rustup update stable`. Then, run:
 
 ```
 yarn install
@@ -56,7 +57,7 @@ yarn install
 followed by:
 
 ```
-yarn build:wasm
+yarn build:wasm-dev
 ```
 
 That will build the WASM binary and put in the `public` dir (though gitignored)
@@ -88,15 +89,22 @@ yarn test
 
 Which will run our suite of [Vitest unit](https://vitest.dev/) and [React Testing Library E2E](https://testing-library.com/docs/react-testing-library/intro/) tests, in interactive mode by default.
 
+For running the rust (not tauri rust though) only, you can
+```bash
+cd src/wasm-lib
+cargo test
+```
+but you will need to have install ffmpeg prior to.
+
 ## Tauri
 
-To spin up up tauri dev, `yarn install` and `yarn build:wasm` need to have been done before hand then
+To spin up up tauri dev, `yarn install` and `yarn build:wasm-dev` need to have been done before hand then
 
 ```
 yarn tauri dev
 ```
 
-Will spin up the web app before opening up the tauri dev desktop app. Note that it's probably a good idea to close the browser tab that gets opened since at the time of writting they can conflict.
+Will spin up the web app before opening up the tauri dev desktop app. Note that it's probably a good idea to close the browser tab that gets opened since at the time of writing they can conflict.
 
 The dev instance automatically opens up the browser devtools which can be disabled by [commenting it out](https://github.com/KittyCAD/modeling-app/blob/main/src-tauri/src/main.rs#L92.)
 

e2e/tauri/specs/signin.e2e.js

@@ -0,0 +1,11 @@
+describe('Modeling App', () => {
+  it('open the sign in page', async () => {
+    const button = await $('#signin')
+    expect(button).toHaveText('Sign in')
+    
+    // Workaround for .click(), see https://github.com/tauri-apps/tauri/issues/6541
+    await button.waitForClickable()
+    await browser.execute('arguments[0].click();', button)
+    // TODO: handle auth
+  })
+})

package.json

@@ -1,38 +1,39 @@
 {
   "name": "untitled-app",
-  "version": "0.9.5",
+  "version": "0.12.0",
   "private": true,
   "dependencies": {
-    "@codemirror/autocomplete": "^6.9.0",
+    "@codemirror/autocomplete": "^6.10.2",
     "@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",
+    "@headlessui/react": "^1.7.17",
     "@headlessui/tailwindcss": "^0.2.0",
-    "@kittycad/lib": "^0.0.40",
+    "@kittycad/lib": "^0.0.45",
     "@lezer/javascript": "^1.4.7",
     "@open-rpc/client-js": "^1.8.1",
     "@react-hook/resize-observer": "^1.2.6",
     "@replit/codemirror-interact": "^6.3.0",
-    "@sentry/react": "^7.65.0",
-    "@tauri-apps/api": "^1.3.0",
+    "@sentry/react": "^7.77.0",
+    "@tauri-apps/api": "^1.5.1",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^13.2.1",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
     "@ts-stack/markdown": "^1.5.0",
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@uiw/react-codemirror": "^4.21.13",
+    "@uiw/react-codemirror": "^4.21.20",
+    "@xstate/inspect": "^0.8.0",
     "@xstate/react": "^3.2.2",
-    "crypto-js": "^4.1.1",
+    "crypto-js": "^4.2.0",
     "debounce-promise": "^3.1.2",
     "formik": "^2.4.3",
-    "fuse.js": "^6.6.2",
+    "fuse.js": "^7.0.0",
     "http-server": "^14.1.1",
     "json-rpc-2.0": "^1.6.0",
-    "re-resizable": "^6.9.9",
+    "re-resizable": "^6.9.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
@@ -42,20 +43,20 @@
     "react-modal-promise": "^1.0.2",
     "react-router-dom": "^6.14.2",
     "sketch-helpers": "^0.0.4",
-    "swr": "^2.0.4",
+    "swr": "^2.2.2",
     "tauri-plugin-fs-extra-api": "https://github.com/tauri-apps/tauri-plugin-fs-extra#v1",
     "toml": "^3.0.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.4.2",
-    "uuid": "^9.0.0",
+    "typescript": "^5.2.2",
+    "uuid": "^9.0.1",
     "vitest": "^0.34.6",
     "vscode-jsonrpc": "^8.1.0",
-    "vscode-languageserver-protocol": "^3.17.3",
+    "vscode-languageserver-protocol": "^3.17.5",
     "wasm-pack": "^0.12.1",
-    "web-vitals": "^2.1.0",
+    "web-vitals": "^3.5.0",
     "ws": "^8.13.0",
     "xstate": "^4.38.2",
-    "zustand": "^4.1.4"
+    "zustand": "^4.4.5"
   },
   "scripts": {
     "start": "vite",
@@ -68,10 +69,12 @@
     "test:nowatch": "vitest run --mode development",
     "test:rust": "(cd src/wasm-lib && cargo test --all && cargo clippy --all --tests --benches)",
     "test:cov": "vitest run --coverage --mode development",
+    "test:e2e": "wdio run wdio.conf.js",
     "simpleserver:ci": "yarn pretest && http-server ./public --cors -p 3000 &",
     "simpleserver": "yarn pretest && http-server ./public --cors -p 3000",
     "fmt": "prettier --write ./src",
     "fmt-check": "prettier --check ./src",
+    "build:wasm-dev": "(cd src/wasm-lib && wasm-pack build --dev --target web --out-dir pkg && cargo test -p kcl-lib export_bindings) && cp src/wasm-lib/pkg/wasm_lib_bg.wasm public && yarn fmt",
     "build:wasm": "(cd src/wasm-lib && wasm-pack build --target web --out-dir pkg && cargo test -p kcl-lib export_bindings) && cp src/wasm-lib/pkg/wasm_lib_bg.wasm public && yarn fmt",
     "build:wasm-clean": "yarn wasm-prep && yarn build:wasm",
     "remove-importmeta": "sed -i 's/import.meta.url/window.location.origin/g' \"./src/wasm-lib/pkg/wasm_lib.js\"; sed -i '' 's/import.meta.url/window.location.origin/g' \"./src/wasm-lib/pkg/wasm_lib.js\" || echo \"sed for both mac and linux\"",
@@ -99,30 +102,34 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-env": "^7.22.9",
-    "@tauri-apps/cli": "^1.3.1",
+    "@babel/preset-env": "^7.23.3",
+    "@tauri-apps/cli": "^1.5.6",
     "@types/crypto-js": "^4.1.1",
-    "@types/debounce-promise": "^3.1.6",
+    "@types/debounce-promise": "^3.1.8",
     "@types/isomorphic-fetch": "^0.0.36",
     "@types/react-modal": "^3.16.0",
-    "@types/uuid": "^9.0.1",
+    "@types/uuid": "^9.0.4",
     "@types/wicg-file-system-access": "^2020.9.6",
     "@types/ws": "^8.5.5",
-    "@vitejs/plugin-react": "^4.0.3",
+    "@vitejs/plugin-react": "^4.1.1",
     "@vitest/coverage-istanbul": "^0.34.1",
     "autoprefixer": "^10.4.13",
-    "eslint": "^8.44.0",
+    "eslint": "^8.53.0",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-css-modules": "^2.11.0",
+    "eslint-plugin-css-modules": "^2.12.0",
     "happy-dom": "^10.8.0",
     "husky": "^8.0.3",
     "postcss": "^8.4.31",
     "prettier": "^2.8.0",
     "setimmediate": "^1.0.5",
-    "tailwindcss": "^3.2.4",
-    "vite": "^4.4.3",
+    "tailwindcss": "^3.3.5",
+    "vite": "^4.5.0",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-tsconfig-paths": "^4.2.0",
-    "yarn": "^1.22.19"
+    "vite-tsconfig-paths": "^4.2.1",
+    "yarn": "^1.22.19",
+    "@wdio/cli": "^7.7.3",
+    "@wdio/local-runner": "^7.7.3",
+    "@wdio/mocha-framework": "^7.7.3",
+    "@wdio/spec-reporter": "^7.7.3"
   }
 }

public/Icon/Icon/Projects/Create File.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 3H4.5H11H11.2071L11.3536 3.14645L15.8536 7.64646L16 7.7929V8.00001V11.3773C15.6992 11.1362 15.3628 10.9376 15 10.7908V8.50001H11H10.5V8.00001V4H5V16H9.79076C9.93763 16.3628 10.1362 16.6992 10.3773 17H4.5H4V16.5V3.5V3ZM11.5 4.70711L14.2929 7.50001H11.5V4.70711ZM13 12V14H11V15H13V17H14V15H16V14H14V12H13Z" fill="black"/>
+</svg>

public/Icon/Icon/Projects/Create Folder.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 3.5H4H7H7.16667L7.3 3.6L9.16667 5H16H16.5V5.5V7.5V10.3773C16.1992 10.1362 15.8628 9.93763 15.5 9.79076V8H4.5V15.5H10.5351C10.7529 15.8764 11.0302 16.2141 11.3542 16.5H4H3.5V16V7.5V4V3.5ZM4.5 4.5V7H15.5V6H9H8.83333L8.7 5.9L6.83333 4.5H4.5ZM13.5 11V13H11.5V14H13.5V16H14.5V14H16.5V13H14.5V11H13.5Z" fill="black"/>
+</svg>

public/Icon/Icon/Projects/File.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 3.5H4.5V16.5H15.5V8.00001M11 3.5L15.5 8.00001M11 3.5V8.00001H15.5" stroke="black"/>
+</svg>

public/kcl-icon.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40 0H0V40H40V0ZM7.34715 27.2143V15.6577L2.976 15.987V36.7949H7.34715V32.0645L8.00582 31.5256C8.24533 31.326 8.47487 31.1264 8.69442 30.9268L12.1075 36.7949H17.0475C16.1893 35.3978 15.311 33.9906 14.4128 32.5735C13.5346 31.1563 12.6664 29.7392 11.8081 28.3221L15.8499 24.9389C15.4308 24.4399 15.0017 23.931 14.5625 23.412L13.3051 21.8552L7.34715 27.2143ZM22.2581 26.6754C22.8769 25.9169 23.6753 25.5377 24.6533 25.5377C25.272 25.5377 25.8309 25.6175 26.3299 25.7772C26.8289 25.9169 27.4177 26.1465 28.0963 26.4658L29.3238 23.3521C28.5853 22.7933 27.7371 22.4041 26.779 22.1845C25.8409 21.9649 25.0625 21.8552 24.4437 21.8552C22.0885 21.8552 20.2223 22.5537 18.845 23.9509C17.4878 25.3281 16.8092 27.1944 16.8092 29.5496C16.8092 31.9048 17.4878 33.7611 18.845 35.1183C20.2223 36.4756 22.0885 37.1542 24.4437 37.1542C25.0625 37.1542 25.8509 37.0444 26.8089 36.8249C27.767 36.6053 28.6053 36.2161 29.3238 35.6572L28.0963 32.5435C27.4177 32.8629 26.8289 33.0924 26.3299 33.2321C25.8309 33.3718 25.272 33.4417 24.6533 33.4417C23.6753 33.4417 22.8769 33.0924 22.2581 32.3938C21.6594 31.6753 21.36 30.7272 21.36 29.5496C21.36 28.372 21.6594 27.4139 22.2581 26.6754ZM36.2796 36.7949V15.6577L31.9085 15.987V36.7949H36.2796Z" fill="#D0FF00"/>
+</svg>

src-tauri/Cargo.lock

@@ -122,6 +122,12 @@ dependencies = [
  "system-deps 6.1.0",
 ]
 
+[[package]]
+name = "atomic"
+version = "0.5.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c59bdb34bc650a32731b31bd8f0829cc15d24a708ee31559e0bb34f2bc320cba"
+
 [[package]]
 name = "autocfg"
 version = "1.1.0"
@@ -1567,7 +1573,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cb0889898416213fab133e1d33a0e5858a48177452750691bde3666d0fdbaf8b"
 dependencies = [
  "hermit-abi 0.3.1",
- "rustix 0.38.13",
+ "rustix 0.38.21",
  "windows-sys 0.48.0",
 ]
 
@@ -1658,9 +1664,9 @@ dependencies = [
 
 [[package]]
 name = "kittycad"
-version = "0.2.28"
+version = "0.2.41"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "35b2f9302648dbb06fd7121687f9505fc3179eba84111a06d76b246e3158f5dc"
+checksum = "874914cd40bfd43674406683bb3f0924d41780698a4ade96f2e180a73678bdd1"
 dependencies = [
  "anyhow",
  "async-trait",
@@ -1726,9 +1732,9 @@ checksum = "e2abad23fbc42b3700f2f279844dc832adb2b2eb069b2df918f455c4e18cc646"
 
 [[package]]
 name = "libc"
-version = "0.2.148"
+version = "0.2.150"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9cdc71e17332e86d2e1d38c1f99edcb6288ee11b815fb1a4b049eaa2114d369b"
+checksum = "89d92a4743f9a61002fae18374ed11e7973f530cb3a3255fb354818118b2203c"
 
 [[package]]
 name = "libm"
@@ -1759,9 +1765,9 @@ checksum = "ef53942eb7bf7ff43a617b3e2c1c4a5ecf5944a7c1bc12d7ee39bbb15e5c1519"
 
 [[package]]
 name = "linux-raw-sys"
-version = "0.4.7"
+version = "0.4.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1a9bad9f94746442c783ca431b22403b519cd7fbeed0533fdd6328b2f2212128"
+checksum = "da2479e8c062e40bf0066ffa0bc823de0a9368974af99c9f6df941d2c231e03f"
 
 [[package]]
 name = "lock_api"
@@ -1907,12 +1913,6 @@ version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "68354c5c6bd36d73ff3feceb05efa59b6acb7626617f4962be322a825e61f79a"
 
-[[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"
@@ -1934,9 +1934,9 @@ dependencies = [
 
 [[package]]
 name = "mio"
-version = "0.8.8"
+version = "0.8.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "927a765cd3fc26206e66b296465fa9d3e5ab003e651c1b3c060e7956d96b19d2"
+checksum = "3dce281c5e46beae905d4de1870d8b1509a9142b62eedf18b443b011ca8343d0"
 dependencies = [
  "libc",
  "wasi 0.11.0+wasi-snapshot-preview1",
@@ -2833,9 +2833,9 @@ checksum = "dbb5fb1acd8a1a18b3dd5be62d25485eb770e05afb408a9627d14d451bae12da"
 
 [[package]]
 name = "reqwest"
-version = "0.11.20"
+version = "0.11.22"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3e9ad3fe7488d7e34558a2033d45a0c90b72d97b4f80705666fea71472e2e6a1"
+checksum = "046cd98826c46c2ac8ddecae268eb5c2e58628688a5fc7a2643704a73faba95b"
 dependencies = [
  "base64 0.21.2",
  "bytes",
@@ -2862,6 +2862,7 @@ dependencies = [
  "serde",
  "serde_json",
  "serde_urlencoded",
+ "system-configuration",
  "tokio",
  "tokio-native-tls",
  "tokio-rustls",
@@ -3011,9 +3012,9 @@ dependencies = [
 
 [[package]]
 name = "rustix"
-version = "0.37.19"
+version = "0.37.27"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "acf8729d8542766f1b2cf77eb034d52f40d375bb8b615d0b147089946e16613d"
+checksum = "fea8ca367a3a01fe35e6943c400addf443c0f57670e6ec51196f71a4b8762dd2"
 dependencies = [
  "bitflags 1.3.2",
  "errno",
@@ -3025,14 +3026,14 @@ dependencies = [
 
 [[package]]
 name = "rustix"
-version = "0.38.13"
+version = "0.38.21"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d7db8590df6dfcd144d22afd1b83b36c21a18d7cbc1dc4bb5295a8712e9eb662"
+checksum = "2b426b0506e5d50a7d8dafcf2e81471400deb602392c7dd110815afb4eaf02a3"
 dependencies = [
  "bitflags 2.4.0",
  "errno",
  "libc",
- "linux-raw-sys 0.4.7",
+ "linux-raw-sys 0.4.10",
  "windows-sys 0.48.0",
 ]
 
@@ -3208,9 +3209,9 @@ dependencies = [
 
 [[package]]
 name = "serde"
-version = "1.0.188"
+version = "1.0.192"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cf9e0fcba69a370eed61bcf2b728575f726b50b55cba78064753d708ddc7549e"
+checksum = "bca2a08484b285dcb282d0f67b26cadc0df8b19f8c12502c13d966bf9482f001"
 dependencies = [
  "serde_derive",
 ]
@@ -3226,9 +3227,9 @@ dependencies = [
 
 [[package]]
 name = "serde_derive"
-version = "1.0.188"
+version = "1.0.192"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4eca7ac642d82aa35b60049a6eccb4be6be75e599bd2e9adb5f875a737654af2"
+checksum = "d6c7207fbec9faa48073f3e3074cbe553af6ea512d7c21ba46e434e70ea9fbc1"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -3248,9 +3249,9 @@ dependencies = [
 
 [[package]]
 name = "serde_json"
-version = "1.0.107"
+version = "1.0.108"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6b420ce6e3d8bd882e9b243c6eed35dbc9a6110c9769e74b584e0d68d1f20c65"
+checksum = "3d1c7e3eac408d115102c4c24ad393e0821bb3a5df4d506a80f85f7a742a526b"
 dependencies = [
  "itoa 1.0.6",
  "ryu",
@@ -3431,9 +3432,9 @@ dependencies = [
 
 [[package]]
 name = "socket2"
-version = "0.5.4"
+version = "0.5.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4031e820eb552adee9295814c0ced9e5cf38ddf1e8b7d566d6de8e2538ea989e"
+checksum = "7b5fac59a5cb5dd637972e5fca70daf0523c9067fcdc4842f053dae04a18f8e9"
 dependencies = [
  "libc",
  "windows-sys 0.48.0",
@@ -3600,6 +3601,27 @@ dependencies = [
  "windows-sys 0.45.0",
 ]
 
+[[package]]
+name = "system-configuration"
+version = "0.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ba3a3adc5c275d719af8cb4272ea1c4a6d668a777f37e115f6d11ddbc1c8e0e7"
+dependencies = [
+ "bitflags 1.3.2",
+ "core-foundation",
+ "system-configuration-sys",
+]
+
+[[package]]
+name = "system-configuration-sys"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a75fb188eb626b924683e3b95e3a48e63551fcfb51949de2f06a9d91dbee93c9"
+dependencies = [
+ "core-foundation-sys",
+ "libc",
+]
+
 [[package]]
 name = "system-deps"
 version = "5.0.0"
@@ -3712,12 +3734,11 @@ dependencies = [
 
 [[package]]
 name = "tauri"
-version = "1.5.0"
+version = "1.5.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "72aee3277d0a0df01472cc704ab5934a51a1f25348838df17bfb3c5cb727880c"
+checksum = "9bfe673cf125ef364d6f56b15e8ce7537d9ca7e4dae1cf6fbbdeed2e024db3d9"
 dependencies = [
  "anyhow",
- "base64 0.21.2",
  "bytes",
  "cocoa",
  "dirs-next",
@@ -3731,7 +3752,6 @@ dependencies = [
  "heck 0.4.1",
  "http",
  "ignore",
- "minisign-verify",
  "objc",
  "once_cell",
  "open",
@@ -3756,14 +3776,12 @@ dependencies = [
  "tauri-utils",
  "tempfile",
  "thiserror",
- "time",
  "tokio",
  "url",
  "uuid",
  "webkit2gtk",
  "webview2-com",
  "windows 0.39.0",
- "zip",
 ]
 
 [[package]]
@@ -3828,7 +3846,7 @@ dependencies = [
 [[package]]
 name = "tauri-plugin-fs-extra"
 version = "0.0.0"
-source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v1#9b96996b5a90a6a57d587ce4312975f13a4d8bc2"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v1#61e862597e7234ddca9d9c4b07700855841888f3"
 dependencies = [
  "log",
  "serde",
@@ -3927,7 +3945,7 @@ dependencies = [
  "cfg-if",
  "fastrand",
  "redox_syscall 0.3.5",
- "rustix 0.37.19",
+ "rustix 0.37.27",
  "windows-sys 0.45.0",
 ]
 
@@ -4007,9 +4025,9 @@ checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20"
 
 [[package]]
 name = "tokio"
-version = "1.32.0"
+version = "1.34.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "17ed6077ed6cd6c74735e21f37eb16dc3935f96878b1fe961074089cc80893f9"
+checksum = "d0c014766411e834f7af5b8f4cf46257aab4036ca95e9d2c144a10f59ad6f5b9"
 dependencies = [
  "backtrace",
  "bytes",
@@ -4017,7 +4035,7 @@ dependencies = [
  "mio",
  "num_cpus",
  "pin-project-lite",
- "socket2 0.5.4",
+ "socket2 0.5.5",
  "windows-sys 0.48.0",
 ]
 
@@ -4292,6 +4310,7 @@ version = "1.3.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "345444e32442451b267fc254ae85a209c64be56d2890e601a0c37ff0c3c5ecd2"
 dependencies = [
+ "atomic",
  "getrandom 0.2.9",
  "serde",
 ]
@@ -4983,14 +5002,3 @@ checksum = "56c1936c4cc7a1c9ab21a1ebb602eb942ba868cbd44a99cb7cdc5892335e1c85"
 dependencies = [
  "linked-hash-map",
 ]
-
-[[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

@@ -4,7 +4,7 @@ version = "0.1.0"
 description = "A Tauri App"
 authors = ["you"]
 license = ""
-repository = ""
+repository = "https://github.com/KittyCAD/modeling-app"
 default-run = "app"
 edition = "2021"
 rust-version = "1.60"
@@ -16,13 +16,13 @@ tauri-build = { version = "1.5.0", features = [] }
 
 [dependencies]
 anyhow = "1"
-kittycad = "0.2.28"
+kittycad = "0.2.41"
 oauth2 = "4.4.2"
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
-tauri = { version = "1.5.0", features = [ "os-all", "dialog-all", "fs-all", "http-request", "path-all", "shell-open", "shell-open-api", "updater", "devtools"] }
+tauri = { version = "1.5.2", features = [ "os-all", "dialog-all", "fs-all", "http-request", "path-all", "shell-open", "shell-open-api", "updater", "devtools"] }
 tauri-plugin-fs-extra = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
-tokio = { version = "1.32.0", features = ["time"] }
+tokio = { version = "1.34.0", features = ["time"] }
 toml = "0.8.2"
 
 [features]

src-tauri/src/main.rs

@@ -68,7 +68,7 @@ async fn login(app: tauri::AppHandle, host: &str) -> Result<String, InvokeError>
     };
 
     // Open the system browser with the auth_uri.
-    // We do this in the browser and not a seperate window because we want 1password and
+    // We do this in the browser and not a separate window because we want 1password and
     // other crap to work well.
     tauri::api::shell::open(&app.shell_scope(), auth_uri.secret(), None)
         .map_err(|e| InvokeError::from_anyhow(e.into()))?;
@@ -129,10 +129,10 @@ async fn get_user(
 
 fn main() {
     tauri::Builder::default()
-        .setup(|app| {
+        .setup(|_app| {
             #[cfg(debug_assertions)] // only include this code on debug builds
             {
-                let window = app.get_window("main").unwrap();
+                let window = _app.get_window("main").unwrap();
                 // comment out the below if you don't devtools to open everytime.
                 // it's useful because otherwise devtools shuts everytime rust code changes.
                 window.open_devtools();

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "kittycad-modeling",
-    "version": "0.9.5"
+    "version": "0.12.0"
   },
   "tauri": {
     "allowlist": {
@@ -72,23 +72,13 @@
       },
       "resources": [],
       "shortDescription": "",
-      "targets": "all",
-      "windows": {
-        "certificateThumbprint": "F4C9A52FF7BC26EE5E054946F6B11DEEA94C748D",
-        "digestAlgorithm": "sha256",
-        "timestampUrl": "http://timestamp.digicert.com"
-      }
+      "targets": "all"
     },
     "security": {
       "csp": null
     },
     "updater": {
-      "active": true,
-      "endpoints": [
-        "https://dl.kittycad.io/releases/modeling-app/last_update.json"
-      ],
-      "dialog": true,
-      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEUzNzA4MjBEQjFBRTY4NzYKUldSMmFLNnhEWUp3NCtsT21Jd05wQktOaGVkOVp6MUFma0hNTDRDSnI2RkJJTEZOWG1ncFhqcU8K"
+      "active": false
     },
     "windows": [
       {

src-tauri/tauri.macos.conf.json

@@ -1,4 +1,3 @@
-
 {
   "$schema": "../node_modules/@tauri-apps/cli/schema.json",
   "package": {

src-tauri/tauri.release.conf.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "../node_modules/@tauri-apps/cli/schema.json",
+  "tauri": {
+    "updater": {
+      "active": true,
+      "endpoints": [
+        "https://dl.kittycad.io/releases/modeling-app/last_update.json"
+      ],
+      "dialog": true,
+      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEUzNzA4MjBEQjFBRTY4NzYKUldSMmFLNnhEWUp3NCtsT21Jd05wQktOaGVkOVp6MUFma0hNTDRDSnI2RkJJTEZOWG1ncFhqcU8K"
+    },
+    "bundle": {
+      "identifier": "io.kittycad.modeling-app",
+      "windows": {
+        "certificateThumbprint": "F4C9A52FF7BC26EE5E054946F6B11DEEA94C748D",
+        "digestAlgorithm": "sha256",
+        "timestampUrl": "http://timestamp.digicert.com"
+      }
+    }
+  }
+}

src-tauri/tauri.windows.conf.json

@@ -1,4 +1,3 @@
-
 {
   "$schema": "../node_modules/@tauri-apps/cli/schema.json",
   "package": {

src/App.test.tsx

@@ -1,9 +1,16 @@
 import { render, screen } from '@testing-library/react'
 import { App } from './App'
 import { describe, test, vi } from 'vitest'
-import { BrowserRouter } from 'react-router-dom'
+import {
+  Route,
+  RouterProvider,
+  createMemoryRouter,
+  createRoutesFromElements,
+} from 'react-router-dom'
 import { GlobalStateProvider } from './components/GlobalStateProvider'
 import CommandBarProvider from 'components/CommandBar'
+import ModelingMachineProvider from 'components/ModelingMachineProvider'
+import { BROWSER_FILE_NAME } from 'Router'
 
 let listener: ((rect: any) => void) | undefined = undefined
 ;(global as any).ResizeObserver = class ResizeObserver {
@@ -24,7 +31,7 @@ describe('App tests', () => {
       >
       return {
         ...actual,
-        useParams: () => ({ id: 'new' }),
+        useParams: () => ({ id: BROWSER_FILE_NAME }),
         useLoaderData: () => ({ code: null }),
       }
     })
@@ -41,12 +48,26 @@ describe('App tests', () => {
 })
 
 function TestWrap({ children }: { children: React.ReactNode }) {
-  // wrap in router and xState context
-  return (
-    <BrowserRouter>
+  // We have to use a memory router in the testing environment,
+  // and we have to use the createMemoryRouter function instead of <MemoryRouter /> as of react-router v6.4:
+  // https://reactrouter.com/en/6.16.0/routers/picking-a-router#using-v64-data-apis
+  const router = createMemoryRouter(
+    createRoutesFromElements(
+      <Route
+        path="/file/:id"
+        element={
           <CommandBarProvider>
-        <GlobalStateProvider>{children}</GlobalStateProvider>
+            <GlobalStateProvider>
+              <ModelingMachineProvider>{children}</ModelingMachineProvider>
+            </GlobalStateProvider>
           </CommandBarProvider>
-    </BrowserRouter>
+        }
+      />
+    ),
+    {
+      initialEntries: ['/file/new'],
+      initialIndex: 0,
+    }
   )
+  return <RouterProvider router={router} />
 }

src/App.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useCallback, MouseEventHandler } from 'react'
+import { useCallback, MouseEventHandler } from 'react'
 import { DebugPanel } from './components/DebugPanel'
 import { v4 as uuidv4 } from 'uuid'
 import { PaneType, useStore } from './useStore'
@@ -19,7 +19,6 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { getNormalisedCoordinates } from './lib/utils'
-import { isTauri } from './lib/isTauri'
 import { useLoaderData } from 'react-router-dom'
 import { IndexLoaderData } from './Router'
 import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
@@ -29,45 +28,32 @@ import { CameraDragInteractionType_type } from '@kittycad/lib/dist/types/src/mod
 import { CodeMenu } from 'components/CodeMenu'
 import { TextEditor } from 'components/TextEditor'
 import { Themes, getSystemTheme } from 'lib/theme'
-import { useSetupEngineManager } from 'hooks/useSetupEngineManager'
 import { useEngineConnectionSubscriptions } from 'hooks/useEngineConnectionSubscriptions'
 import { engineCommandManager } from './lang/std/engineConnection'
+import { useModelingContext } from 'hooks/useModelingContext'
 
 export function App() {
-  const { code: loadedCode, project } = useLoaderData() as IndexLoaderData
+  const { project, file } = useLoaderData() as IndexLoaderData
 
-  const streamRef = useRef<HTMLDivElement>(null)
   useHotKeyListener()
   const {
-    setCode,
     buttonDownInStream,
     openPanes,
     setOpenPanes,
     didDragInStream,
     streamDimensions,
-    guiMode,
-    setGuiMode,
-    executeAst,
   } = useStore((s) => ({
-    guiMode: s.guiMode,
-    setGuiMode: s.setGuiMode,
-    setCode: s.setCode,
     buttonDownInStream: s.buttonDownInStream,
     openPanes: s.openPanes,
     setOpenPanes: s.setOpenPanes,
     didDragInStream: s.didDragInStream,
     streamDimensions: s.streamDimensions,
-    executeAst: s.executeAst,
   }))
 
-  const {
-    auth: {
-      context: { token },
-    },
-    settings: {
-      context: { showDebugPanel, onboardingStatus, cameraControls, theme },
-    },
-  } = useGlobalStateContext()
+  const { settings } = useGlobalStateContext()
+  const { showDebugPanel, onboardingStatus, cameraControls, theme } =
+    settings?.context || {}
+  const { state, send } = useModelingContext()
 
   const editorTheme = theme === Themes.System ? getSystemTheme() : theme
 
@@ -84,50 +70,7 @@ export function App() {
   useHotkeys('shift + l', () => togglePane('logs'))
   useHotkeys('shift + e', () => togglePane('kclErrors'))
   useHotkeys('shift + d', () => togglePane('debug'))
-  useHotkeys('esc', () => {
-    if (guiMode.mode === 'sketch') {
-      if (guiMode.sketchMode === 'selectFace') return
-      if (guiMode.sketchMode === 'sketchEdit') {
-        // TODO: share this with Toolbar's "Exit sketch" button
-        // exiting sketch should be done consistently across all exits
-        engineCommandManager.sendSceneCommand({
-          type: 'modeling_cmd_req',
-          cmd_id: uuidv4(),
-          cmd: { type: 'edit_mode_exit' },
-        })
-        engineCommandManager.sendSceneCommand({
-          type: 'modeling_cmd_req',
-          cmd_id: uuidv4(),
-          cmd: { type: 'default_camera_disable_sketch_mode' },
-        })
-        setGuiMode({ mode: 'default' })
-        // this is necessary to get the UI back into a consistent
-        // state right now, hopefully won't need to rerender
-        // when exiting sketch mode in the future
-        executeAst()
-      } else {
-        engineCommandManager.sendSceneCommand({
-          type: 'modeling_cmd_req',
-          cmd_id: uuidv4(),
-          cmd: {
-            type: 'set_tool',
-            tool: 'select',
-          },
-        })
-        setGuiMode({
-          mode: 'sketch',
-          sketchMode: 'sketchEdit',
-          rotation: guiMode.rotation,
-          position: guiMode.position,
-          pathToNode: guiMode.pathToNode,
-          pathId: guiMode.pathId,
-          // todo: ...guiMod is adding isTooltip: true, will probably just fix with xstate migtaion
-        })
-      }
-    } else {
-      setGuiMode({ mode: 'default' })
-    }
-  })
+  useHotkeys('esc', () => send('Cancel'))
 
   const paneOpacity = [onboardingPaths.CAMERA, onboardingPaths.STREAMING].some(
     (p) => p === onboardingStatus
@@ -137,21 +80,6 @@ export function App() {
     ? 'opacity-40'
     : ''
 
-  // Use file code loaded from disk
-  // on mount, and overwrite any locally-stored code
-  useEffect(() => {
-    if (isTauri() && loadedCode !== null) {
-      setCode(loadedCode)
-    }
-    return () => {
-      // Clear code on unmount if in desktop app
-      if (isTauri()) {
-        setCode('')
-      }
-    }
-  }, [loadedCode, setCode])
-
-  useSetupEngineManager(streamRef, token)
   useEngineConnectionSubscriptions()
 
   const debounceSocketSend = throttle<EngineCommand>((message) => {
@@ -169,10 +97,7 @@ export function App() {
 
     const newCmdId = uuidv4()
     if (buttonDownInStream === undefined) {
-      if (
-        guiMode.mode === 'sketch' &&
-        guiMode.sketchMode === ('sketch_line' as any)
-      ) {
+      if (state.matches('Sketch.Line Tool')) {
         debounceSocketSend({
           type: 'modeling_cmd_req',
           cmd_id: newCmdId,
@@ -192,7 +117,7 @@ export function App() {
         })
       }
     } else {
-      if (guiMode.mode === 'sketch' && guiMode.sketchMode === ('move' as any)) {
+      if (state.matches('Sketch.Move Tool')) {
         debounceSocketSend({
           type: 'modeling_cmd_req',
           cmd_id: newCmdId,
@@ -232,9 +157,8 @@ export function App() {
 
   return (
     <div
-      className="h-screen overflow-hidden relative flex flex-col cursor-pointer select-none"
+      className="relative h-full flex flex-col"
       onMouseMove={handleMouseMove}
-      ref={streamRef}
     >
       <AppHeader
         className={
@@ -242,7 +166,7 @@ export function App() {
           paneOpacity +
           (buttonDownInStream ? ' pointer-events-none' : '')
         }
-        project={project}
+        project={{ project, file }}
         enableMenu={true}
       />
       <ModalContainer />
@@ -302,7 +226,7 @@ export function App() {
       <Stream className="absolute inset-0 z-0" />
       {showDebugPanel && (
         <DebugPanel
-          title="Debug"
+          title="Debug (AST Explorer)"
           className={
             'transition-opacity transition-duration-75 ' +
             paneOpacity +

src/Auth.tsx

@@ -3,10 +3,8 @@ import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
 
 // Wrapper around protected routes, used in src/Router.tsx
 export const Auth = ({ children }: React.PropsWithChildren) => {
-  const {
-    auth: { state },
-  } = useGlobalStateContext()
-  const isLoggingIn = state.matches('checkIfLoggedIn')
+  const { auth } = useGlobalStateContext()
+  const isLoggingIn = auth?.state.matches('checkIfLoggedIn')
 
   return isLoggingIn ? (
     <Loading>Loading KittyCAD Modeling App...</Loading>

src/Router.tsx

@@ -31,6 +31,7 @@ import {
 } from './lib/tauriFS'
 import { metadata, type Metadata } from 'tauri-plugin-fs-extra-api'
 import DownloadAppBanner from './components/DownloadAppBanner'
+import { WasmErrBanner } from './components/WasmErrBanner'
 import { GlobalStateProvider } from './components/GlobalStateProvider'
 import {
   SETTINGS_PERSIST_KEY,
@@ -40,6 +41,10 @@ import { ContextFrom } from 'xstate'
 import CommandBarProvider from 'components/CommandBar'
 import { TEST, VITE_KC_SENTRY_DSN } from './env'
 import * as Sentry from '@sentry/react'
+import ModelingMachineProvider from 'components/ModelingMachineProvider'
+import { KclContextProvider, kclManager } from 'lang/KclSinglton'
+import FileMachineProvider from 'components/FileMachineProvider'
+import { sep } from '@tauri-apps/api/path'
 
 if (VITE_KC_SENTRY_DSN && !TEST) {
   Sentry.init({
@@ -94,13 +99,16 @@ export const paths = {
   ) as typeof onboardingPaths,
 }
 
+export const BROWSER_FILE_NAME = 'new'
+
 export type IndexLoaderData = {
   code: string | null
   project?: ProjectWithEntryPointMetadata
+  file?: FileEntry
 }
 
 export type ProjectWithEntryPointMetadata = FileEntry & {
-  entrypoint_metadata: Metadata
+  entrypointMetadata: Metadata
 }
 export type HomeLoaderData = {
   projects: ProjectWithEntryPointMetadata[]
@@ -129,15 +137,24 @@ const router = createBrowserRouter(
     {
       path: paths.INDEX,
       loader: () =>
-        isTauri() ? redirect(paths.HOME) : redirect(paths.FILE + '/new'),
+        isTauri()
+          ? redirect(paths.HOME)
+          : redirect(paths.FILE + '/' + BROWSER_FILE_NAME),
       errorElement: <ErrorPage />,
     },
     {
       path: paths.FILE + '/:id',
       element: (
         <Auth>
+          <FileMachineProvider>
+            <KclContextProvider>
+              <ModelingMachineProvider>
                 <Outlet />
                 <App />
+              </ModelingMachineProvider>
+              <WasmErrBanner />
+            </KclContextProvider>
+          </FileMachineProvider>
           {!isTauri() && import.meta.env.PROD && <DownloadAppBanner />}
         </Auth>
       ),
@@ -167,21 +184,42 @@ const router = createBrowserRouter(
           )
         }
 
-        if (params.id && params.id !== 'new') {
-          // Note that PROJECT_ENTRYPOINT is hardcoded until we support multiple files
-          const code = await readTextFile(params.id + '/' + PROJECT_ENTRYPOINT)
-          const entrypoint_metadata = await metadata(
-            params.id + '/' + PROJECT_ENTRYPOINT
+        const defaultDir = persistedSettings.defaultDirectory || ''
+
+        if (params.id && params.id !== BROWSER_FILE_NAME) {
+          const decodedId = decodeURIComponent(params.id)
+          const projectAndFile = decodedId.replace(defaultDir + sep, '')
+          const firstSlashIndex = projectAndFile.indexOf(sep)
+          const projectName = projectAndFile.slice(0, firstSlashIndex)
+          const projectPath = defaultDir + sep + projectName
+          const currentFileName = projectAndFile.slice(firstSlashIndex + 1)
+
+          if (firstSlashIndex === -1 || !currentFileName)
+            return redirect(
+              `${paths.FILE}/${encodeURIComponent(
+                `${params.id}${sep}${PROJECT_ENTRYPOINT}`
+              )}`
             )
-          const children = await readDir(params.id)
+
+          // Note that PROJECT_ENTRYPOINT is hardcoded until we support multiple files
+          const code = await readTextFile(decodedId)
+          const entrypointMetadata = await metadata(
+            projectPath + sep + PROJECT_ENTRYPOINT
+          )
+          const children = await readDir(projectPath, { recursive: true })
+          kclManager.setCodeAndExecute(code, false)
 
           return {
             code,
             project: {
-              name: params.id.slice(params.id.lastIndexOf('/') + 1),
-              path: params.id,
+              name: projectName,
+              path: projectPath,
               children,
-              entrypoint_metadata,
+              entrypointMetadata,
+            },
+            file: {
+              name: currentFileName,
+              path: params.id,
             },
           }
         }
@@ -212,7 +250,7 @@ const router = createBrowserRouter(
       ),
       loader: async () => {
         if (!isTauri()) {
-          return redirect(paths.FILE + '/new')
+          return redirect(paths.FILE + '/' + BROWSER_FILE_NAME)
         }
         const fetchedStorage = localStorage?.getItem(SETTINGS_PERSIST_KEY)
         const persistedSettings = JSON.parse(fetchedStorage || '{}') as Partial<
@@ -234,9 +272,9 @@ const router = createBrowserRouter(
           isProjectDirectory
         )
         const projects = await Promise.all(
-          projectsNoMeta.map(async (p) => ({
-            entrypoint_metadata: await metadata(
-              p.path + '/' + PROJECT_ENTRYPOINT
+          projectsNoMeta.map(async (p: FileEntry) => ({
+            entrypointMetadata: await metadata(
+              p.path + sep + PROJECT_ENTRYPOINT
             ),
             ...p,
           }))

src/Toolbar.tsx

@@ -1,24 +1,12 @@
-import { useStore, toolTips, ToolTip } from './useStore'
-import { extrudeSketch, sketchOnExtrudedFace } from './lang/modifyAst'
-import { getNodePathFromSourceRange } from './lang/queryAst'
-import { HorzVert } from './components/Toolbar/HorzVert'
-import { RemoveConstrainingValues } from './components/Toolbar/RemoveConstrainingValues'
-import { EqualLength } from './components/Toolbar/EqualLength'
-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 { SetAbsDistance } from './components/Toolbar/SetAbsDistance'
-import { SetAngleBetween } from './components/Toolbar/SetAngleBetween'
-import { Fragment, useEffect } from 'react'
+import { Fragment, WheelEvent, useRef, useMemo } 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'
+import { isCursorInSketchCommandRange } from 'lang/util'
 import { ActionIcon } from 'components/ActionIcon'
 import { engineCommandManager } from './lang/std/engineConnection'
+import { useModelingContext } from 'hooks/useModelingContext'
 
 export const sketchButtonClassnames = {
   background:
@@ -26,259 +14,152 @@ export const sketchButtonClassnames = {
   icon: 'text-fern-20 h-auto group-hover:text-fern-10 hover:text-fern-10 dark:text-chalkboard-100 dark:group-hover:text-chalkboard-100 dark:hover:text-chalkboard-100 group-disabled:bg-chalkboard-60 hover:group-disabled:text-inherit',
 }
 
-const sketchFnLabels: Record<ToolTip | 'sketch_line' | 'move', string> = {
-  sketch_line: 'Line',
-  line: 'Line',
-  move: 'Move',
-  angledLine: 'Angled Line',
-  angledLineThatIntersects: 'Angled Line That Intersects',
-  angledLineOfXLength: 'Angled Line Of X Length',
-  angledLineOfYLength: 'Angled Line Of Y Length',
-  angledLineToX: 'Angled Line To X',
-  angledLineToY: 'Angled Line To Y',
-  lineTo: 'Line to Point',
-  xLine: 'Horizontal Line',
-  yLine: 'Vertical Line',
-  xLineTo: 'Horizontal Line to Point',
-  yLineTo: 'Vertical Line to Point',
-}
-
 export const Toolbar = () => {
-  const {
-    setGuiMode,
-    guiMode,
-    selectionRanges,
-    ast,
-    updateAst,
-    programMemory,
-    executeAst,
-  } = useStore((s) => ({
-    guiMode: s.guiMode,
-    setGuiMode: s.setGuiMode,
-    selectionRanges: s.selectionRanges,
-    ast: s.ast,
-    updateAst: s.updateAst,
-    programMemory: s.programMemory,
-    executeAst: s.executeAst,
-  }))
-  useAppMode()
+  const { state, send, context } = useModelingContext()
+  const toolbarButtonsRef = useRef<HTMLSpanElement>(null)
+  const pathId = useMemo(
+    () =>
+      isCursorInSketchCommandRange(
+        engineCommandManager.artifactMap,
+        context.selectionRanges
+      ),
+    [engineCommandManager.artifactMap, context.selectionRanges]
+  )
+
+  function handleToolbarButtonsWheelEvent(ev: WheelEvent<HTMLSpanElement>) {
+    const span = toolbarButtonsRef.current
+    if (!span) {
+      return
+    }
+
+    span.scrollLeft = span.scrollLeft += ev.deltaY
+  }
 
   function ToolbarButtons({ className }: React.HTMLAttributes<HTMLElement>) {
     return (
-      <span className={styles.toolbarButtons + ' ' + className}>
-        {guiMode.mode === 'default' && (
+      <span
+        ref={toolbarButtonsRef}
+        onWheel={handleToolbarButtonsWheelEvent}
+        className={styles.toolbarButtons + ' ' + className}
+      >
+        {state.nextEvents.includes('Enter sketch') && (
           <button
-            onClick={() => {
-              setGuiMode({
-                mode: 'sketch',
-                sketchMode: 'selectFace',
-              })
-            }}
+            onClick={() => send({ type: 'Enter sketch' })}
             className="group"
           >
             <ActionIcon icon="sketch" className="!p-0.5" size="md" />
             Start Sketch
           </button>
         )}
-        {guiMode.mode === 'canEditExtrude' && (
+        {state.nextEvents.includes('Enter sketch') && pathId && (
           <button
-            onClick={() => {
-              if (!ast) return
-              const pathToNode = getNodePathFromSourceRange(
-                ast,
-                selectionRanges.codeBasedSelections[0].range
-              )
-              const { modifiedAst } = sketchOnExtrudedFace(
-                ast,
-                pathToNode,
-                programMemory
-              )
-              updateAst(modifiedAst, true)
-            }}
-            className="group"
-          >
-            <ActionIcon icon="sketch" className="!p-0.5" size="md" />
-            Sketch on Face
-          </button>
-        )}
-        {guiMode.mode === 'canEditSketch' && (
-          <button
-            onClick={() => {
-              const pathToNode = getNodePathFromSourceRange(
-                ast,
-                selectionRanges.codeBasedSelections[0].range
-              )
-              setGuiMode({
-                mode: 'sketch',
-                sketchMode: 'enterSketchEdit',
-                pathToNode: pathToNode,
-                rotation: [0, 0, 0, 1],
-                position: [0, 0, 0],
-                pathId: guiMode.pathId,
-              })
-            }}
+            onClick={() => send({ type: 'Enter sketch' })}
             className="group"
           >
             <ActionIcon icon="sketch" className="!p-0.5" size="md" />
             Edit Sketch
           </button>
         )}
-        {guiMode.mode === 'canEditSketch' && (
-          <>
-            <button
-              onClick={() => {
-                if (!ast) return
-                const pathToNode = getNodePathFromSourceRange(
-                  ast,
-                  selectionRanges.codeBasedSelections[0].range
-                )
-                const { modifiedAst, pathToExtrudeArg } = extrudeSketch(
-                  ast,
-                  pathToNode
-                )
-                updateAst(modifiedAst, true, { focusPath: pathToExtrudeArg })
-              }}
-              className="group"
-            >
-              <ActionIcon icon="extrude" className="!p-0.5" size="md" />
-              Extrude
-            </button>
-            <button
-              onClick={() => {
-                if (!ast) return
-                const pathToNode = getNodePathFromSourceRange(
-                  ast,
-                  selectionRanges.codeBasedSelections[0].range
-                )
-                const { modifiedAst, pathToExtrudeArg } = extrudeSketch(
-                  ast,
-                  pathToNode,
-                  false
-                )
-                updateAst(modifiedAst, true, { focusPath: pathToExtrudeArg })
-              }}
-              className="group"
-            >
-              <ActionIcon icon="extrude" className="!p-0.5" size="md" />
-              Extrude as new
-            </button>
-          </>
-        )}
-
-        {guiMode.mode === 'sketch' && (
-          <button
-            onClick={() => {
-              engineCommandManager.sendSceneCommand({
-                type: 'modeling_cmd_req',
-                cmd_id: uuidv4(),
-                cmd: { type: 'edit_mode_exit' },
-              })
-              engineCommandManager.sendSceneCommand({
-                type: 'modeling_cmd_req',
-                cmd_id: uuidv4(),
-                cmd: { type: 'default_camera_disable_sketch_mode' },
-              })
-
-              setGuiMode({ mode: 'default' })
-              executeAst()
-            }}
-            className="group"
-          >
-            <ActionIcon
-              icon="exit"
-              className="!p-0.5"
-              bgClassName={sketchButtonClassnames.background}
-              iconClassName={sketchButtonClassnames.icon}
-              size="md"
-            />
-            Exit sketch
+        {state.nextEvents.includes('Cancel') && !state.matches('idle') && (
+          <button onClick={() => send({ type: 'Cancel' })} className="group">
+            <ActionIcon icon="exit" className="!p-0.5" size="md" />
+            Exit Sketch
           </button>
         )}
-        {toolTips
-          .filter(
-            // (sketchFnName) => !['angledLineThatIntersects'].includes(sketchFnName)
-            (sketchFnName) => ['sketch_line', 'move'].includes(sketchFnName)
-          )
-          .map((sketchFnName) => {
-            if (
-              guiMode.mode !== 'sketch' ||
-              !('isTooltip' in guiMode || guiMode.sketchMode === 'sketchEdit')
-            )
-              return null
-            return (
+        {state.matches('Sketch') && !state.matches('idle') && (
           <button
-                key={sketchFnName}
-                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
-                      ? {
-                          sketchMode: 'sketchEdit',
-                          // todo: ...guiMod is adding isTooltip: true, will probably just fix with xstate migtaion
+            onClick={() =>
+              state.matches('Sketch.Line Tool')
+                ? send('CancelSketch')
+                : send('Equip tool')
             }
-                      : {
-                          sketchMode: sketchFnName,
-                          waitingFirstClick: true,
-                          isTooltip: true,
-                          pathId: guiMode.pathId,
-                        }),
-                  })
-                }}
             className={
               'group ' +
-                  (guiMode.sketchMode === sketchFnName
+              (state.matches('Sketch.Line Tool')
                 ? '!text-fern-70 !bg-fern-10 !dark:text-fern-20 !border-fern-50'
                 : '')
             }
+          >
+            <ActionIcon icon="line" className="!p-0.5" size="md" />
+            Line
+          </button>
+        )}
+        {state.matches('Sketch') && (
+          <button
+            onClick={() =>
+              state.matches('Sketch.Move Tool')
+                ? send('CancelSketch')
+                : send('Equip move tool')
+            }
+            className={
+              'group ' +
+              (state.matches('Sketch.Move Tool')
+                ? '!text-fern-70 !bg-fern-10 !dark:text-fern-20 !border-fern-50'
+                : '')
+            }
+          >
+            <ActionIcon icon="move" className="!p-0.5" size="md" />
+            Move
+          </button>
+        )}
+        {state.matches('Sketch.SketchIdle') &&
+          state.nextEvents
+            .filter(
+              (eventName) =>
+                eventName.includes('Make segment') ||
+                eventName.includes('Constrain')
+            )
+            .map((eventName) => (
+              <button
+                key={eventName}
+                onClick={() => send(eventName)}
+                className="group"
+                disabled={
+                  !state.nextEvents
+                    .filter((event) => state.can(event as any))
+                    .includes(eventName)
+                }
+                title={eventName}
               >
                 <ActionIcon
-                  icon={sketchFnName.includes('line') ? 'line' : 'move'}
-                  className="!p-0.5"
+                  icon={'line'} // TODO
                   bgClassName={sketchButtonClassnames.background}
                   iconClassName={sketchButtonClassnames.icon}
                   size="md"
                 />
-                {sketchFnLabels[sketchFnName]}
+                {eventName
+                  .replace('Make segment ', '')
+                  .replace('Constrain ', '')}
               </button>
-            )
-          })}
-        <HorzVert horOrVert="horizontal" />
-        <HorzVert horOrVert="vertical" />
-        <EqualLength />
-        <EqualAngle />
-        <SetHorzVertDistance buttonType="alignEndsVertically" />
-        <SetHorzVertDistance buttonType="setHorzDistance" />
-        <SetAbsDistance buttonType="snapToYAxis" />
-        <SetAbsDistance buttonType="xAbs" />
-        <SetHorzVertDistance buttonType="alignEndsHorizontally" />
-        <SetAbsDistance buttonType="snapToXAxis" />
-        <SetHorzVertDistance buttonType="setVertDistance" />
-        <SetAbsDistance buttonType="yAbs" />
-        <SetAngleLength angleOrLength="setAngle" />
-        <SetAngleLength angleOrLength="setLength" />
-        <Intersect />
-        <RemoveConstrainingValues />
-        <SetAngleBetween />
+            ))}
+        {state.matches('idle') && (
+          <button
+            onClick={() => send('extrude intent')}
+            disabled={!state.can('extrude intent')}
+            className="group"
+            title={
+              state.can('extrude intent')
+                ? 'extrude'
+                : 'sketches need to be closed, or not already extruded'
+            }
+          >
+            <ActionIcon icon="extrude" className="!p-0.5" size="md" />
+            Extrude
+          </button>
+        )}
       </span>
     )
   }
 
   return (
-    <Popover className={styles.toolbarWrapper + ' ' + guiMode.mode}>
+    <Popover
+      className={
+        styles.toolbarWrapper + state.matches('Sketch') ? ' sketch' : ''
+      }
+    >
       <div className={styles.toolbar}>
         <span className={styles.toolbarCap + ' ' + styles.label}>
-          {guiMode.mode === 'sketch' ? '2D' : '3D'}
+          {state.matches('Sketch') ? '2D' : '3D'}
         </span>
         <menu className="flex-1 gap-2 py-0.5 overflow-hidden whitespace-nowrap">
           <ToolbarButtons />
@@ -314,7 +195,7 @@ export const Toolbar = () => {
             <p
               className={`${styles.toolbarCap} ${styles.label} !self-center rounded-r-full w-fit`}
             >
-              You're in {guiMode.mode === 'sketch' ? '2D' : '3D'}
+              You're in {state.matches('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" />

src/components/AppHeader.tsx

@@ -1,6 +1,6 @@
 import { Toolbar } from '../Toolbar'
 import UserSidebarMenu from './UserSidebarMenu'
-import { ProjectWithEntryPointMetadata } from '../Router'
+import { IndexLoaderData } from '../Router'
 import ProjectSidebarMenu from './ProjectSidebarMenu'
 import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
 import styles from './AppHeader.module.css'
@@ -8,7 +8,7 @@ import { NetworkHealthIndicator } from './NetworkHealthIndicator'
 
 interface AppHeaderProps extends React.PropsWithChildren {
   showToolbar?: boolean
-  project?: ProjectWithEntryPointMetadata
+  project?: Omit<IndexLoaderData, 'code'>
   className?: string
   enableMenu?: boolean
 }
@@ -20,11 +20,8 @@ export const AppHeader = ({
   className = '',
   enableMenu = false,
 }: AppHeaderProps) => {
-  const {
-    auth: {
-      context: { user },
-    },
-  } = useGlobalStateContext()
+  const { auth } = useGlobalStateContext()
+  const user = auth?.context?.user
 
   return (
     <header
@@ -35,7 +32,11 @@ export const AppHeader = ({
         className
       }
     >
-      <ProjectSidebarMenu renderAsLink={!enableMenu} project={project} />
+      <ProjectSidebarMenu
+        renderAsLink={!enableMenu}
+        project={project?.project}
+        file={project?.file}
+      />
       {/* Toolbar if the context deems it */}
       {showToolbar && (
         <div className="max-w-lg md:max-w-xl lg:max-w-2xl xl:max-w-4xl 2xl:max-w-5xl">
@@ -44,7 +45,7 @@ export const AppHeader = ({
       )}
       {/* If there are children, show them, otherwise show User menu */}
       {children || (
-        <div className="ml-auto flex items-center gap-1">
+        <div className="flex items-center gap-1 ml-auto">
           <NetworkHealthIndicator />
           <UserSidebarMenu user={user} />
         </div>

src/components/AstExplorer.tsx

@@ -1,18 +1,18 @@
+import { useModelingContext } from 'hooks/useModelingContext'
+import { kclManager } from 'lang/KclSinglton'
 import { getNodeFromPath, getNodePathFromSourceRange } from 'lang/queryAst'
 import { useEffect, useRef, useState } from 'react'
 import { useStore } from 'useStore'
 
 export function AstExplorer() {
-  const { ast, setHighlightRange, selectionRanges } = useStore((s) => ({
-    ast: s.ast,
-    setHighlightRange: s.setHighlightRange,
-    selectionRanges: s.selectionRanges,
-  }))
+  const setHighlightRange = useStore((s) => s.setHighlightRange)
+  const { context } = useModelingContext()
   const pathToNode = getNodePathFromSourceRange(
-    ast,
-    selectionRanges.codeBasedSelections?.[0]?.range
+    // TODO maybe need to have callback to make sure it stays in sync
+    kclManager.ast,
+    context.selectionRanges.codeBasedSelections?.[0]?.range
   )
-  const node = getNodeFromPath(ast, pathToNode).node
+  const node = getNodeFromPath(kclManager.ast, pathToNode).node
   const [filterKeys, setFilterKeys] = useState<string[]>(['start', 'end'])
 
   return (
@@ -46,7 +46,11 @@ export function AstExplorer() {
         }}
       >
         <pre className=" text-xs overflow-y-auto" style={{ width: '300px' }}>
-          <DisplayObj obj={ast} filterKeys={filterKeys} node={node} />
+          <DisplayObj
+            obj={kclManager.ast}
+            filterKeys={filterKeys}
+            node={node}
+          />
         </pre>
       </div>
     </div>
@@ -84,10 +88,8 @@ function DisplayObj({
   filterKeys: string[]
   node: any
 }) {
-  const { setHighlightRange, setCursor2 } = useStore((s) => ({
-    setHighlightRange: s.setHighlightRange,
-    setCursor2: s.setCursor2,
-  }))
+  const setHighlightRange = useStore((s) => s.setHighlightRange)
+  const { send } = useModelingContext()
   const ref = useRef<HTMLPreElement>(null)
   const [hasCursor, setHasCursor] = useState(false)
   const [isCollapsed, setIsCollapsed] = useState(false)
@@ -118,7 +120,16 @@ function DisplayObj({
         setHighlightRange([obj?.start || 0, obj.end])
       }}
       onClick={(e) => {
-        setCursor2({ type: 'default', range: [obj?.start || 0, obj.end || 0] })
+        send({
+          type: 'Set selection',
+          data: {
+            selectionType: 'singleCodeCursor',
+            selection: {
+              type: 'default',
+              range: [obj?.start || 0, obj.end || 0],
+            },
+          },
+        })
         e.stopPropagation()
       }}
     >
@@ -173,6 +184,7 @@ function DisplayObj({
                   </li>
                 )
               }
+              return null
             })}
           </ul>
         </span>

src/components/AvailableVarsHelpers.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef } from 'react'
-import { parse, BinaryPart, Value, executor } from '../lang/wasm'
+import { parse, BinaryPart, Value } from '../lang/wasm'
 import {
   createIdentifier,
   createLiteral,
@@ -7,8 +7,10 @@ import {
   findUniqueName,
 } from '../lang/modifyAst'
 import { findAllPreviousVariables, PrevVariable } from '../lang/queryAst'
-import { useStore } from '../useStore'
 import { engineCommandManager } from '../lang/std/engineConnection'
+import { kclManager, useKclContext } from 'lang/KclSinglton'
+import { useModelingContext } from 'hooks/useModelingContext'
+import { executeAst } from 'useStore'
 
 export const AvailableVars = ({
   onVarClick,
@@ -91,11 +93,9 @@ export function useCalc({
   newVariableInsertIndex: number
   setNewVariableName: (a: string) => void
 } {
-  const { ast, programMemory, selectionRange } = useStore((s) => ({
-    ast: s.ast,
-    programMemory: s.programMemory,
-    selectionRange: s.selectionRanges.codeBasedSelections[0].range,
-  }))
+  const { programMemory } = useKclContext()
+  const { context } = useModelingContext()
+  const selectionRange = context.selectionRanges.codeBasedSelections[0].range
   const inputRef = useRef<HTMLInputElement>(null)
   const [availableVarInfo, setAvailableVarInfo] = useState<
     ReturnType<typeof findAllPreviousVariables>
@@ -115,9 +115,7 @@ export function useCalc({
       inputRef.current &&
         inputRef.current.setSelectionRange(0, String(value).length)
     }, 100)
-    if (ast) {
-      setNewVariableName(findUniqueName(ast, valueName))
-    }
+    setNewVariableName(findUniqueName(kclManager.ast, valueName))
   }, [])
 
   useEffect(() => {
@@ -130,20 +128,32 @@ export function useCalc({
   }, [newVariableName])
 
   useEffect(() => {
-    if (!ast || !programMemory || !selectionRange) return
-    const varInfo = findAllPreviousVariables(ast, programMemory, selectionRange)
+    if (!programMemory || !selectionRange) return
+    const varInfo = findAllPreviousVariables(
+      kclManager.ast,
+      kclManager.programMemory,
+      selectionRange
+    )
     setAvailableVarInfo(varInfo)
-  }, [ast, programMemory, selectionRange])
+  }, [kclManager.ast, kclManager.programMemory, selectionRange])
 
   useEffect(() => {
     try {
-      const code = `const __result__ = ${value}\nshow(__result__)`
+      const code = `const __result__ = ${value}`
       const ast = parse(code)
       const _programMem: any = { root: {}, return: null }
       availableVarInfo.variables.forEach(({ key, value }) => {
         _programMem.root[key] = { type: 'userVal', value, __meta: [] }
       })
-      executor(ast, _programMem, engineCommandManager).then((programMemory) => {
+      executeAst({
+        ast,
+        engineCommandManager,
+        defaultPlanes: kclManager.defaultPlanes,
+        useFakeExecutor: true,
+        programMemoryOverride: JSON.parse(
+          JSON.stringify(kclManager.programMemory)
+        ),
+      }).then(({ programMemory }) => {
         const resultDeclaration = ast.body.find(
           (a) =>
             a.type === 'VariableDeclaration' &&
@@ -160,7 +170,7 @@ export function useCalc({
       setCalcResult('NAN')
       setValueNode(null)
     }
-  }, [value])
+  }, [value, availableVarInfo])
 
   return {
     valueNode,
@@ -205,7 +215,10 @@ export const CreateNewVariable = ({
 }) => {
   return (
     <>
-      <label htmlFor="create-new-variable" className="block mt-3 font-mono">
+      <label
+        htmlFor="create-new-variable"
+        className="block mt-3 font-mono text-gray-900"
+      >
         Create new variable
       </label>
       <div className="mt-1 flex gap-2 items-center">
@@ -216,6 +229,7 @@ export const CreateNewVariable = ({
             onChange={(e) => {
               setShouldCreateVariable(e.target.checked)
             }}
+            className="bg-white text-gray-900"
           />
         )}
         <input

src/components/CodeMenu.tsx

@@ -5,16 +5,13 @@ 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'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { kclManager } from 'lang/KclSinglton'
 
 export const CodeMenu = ({ children }: PropsWithChildren) => {
-  const { formatCode } = useStore((s) => ({
-    formatCode: s.formatCode,
-  }))
   const { enable: convertToVarEnabled, handleClick: handleConvertToVarClick } =
     useConvertToVariable()
 
@@ -41,7 +38,10 @@ export const CodeMenu = ({ children }: PropsWithChildren) => {
         </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}>
+            <button
+              onClick={() => kclManager.format()}
+              className={styles.button}
+            >
               <span>Format code</span>
               <small>{editorShortcutMeta.formatCode.display}</small>
             </button>

src/components/CustomIcon.tsx

@@ -1,7 +1,10 @@
 export type CustomIconName =
+  | 'createFile'
+  | 'createFolder'
   | 'equal'
   | 'exit'
   | 'extrude'
+  | 'file'
   | 'horizontal'
   | 'line'
   | 'move'
@@ -16,6 +19,38 @@ export const CustomIcon = ({
   name: CustomIconName
 } & React.SVGProps<SVGSVGElement>) => {
   switch (name) {
+    case 'createFile':
+      return (
+        <svg
+          {...props}
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M4 3H4.5H11H11.2071L11.3536 3.14645L15.8536 7.64646L16 7.7929V8.00001V11.3773C15.6992 11.1362 15.3628 10.9376 15 10.7908V8.50001H11H10.5V8.00001V4H5V16H9.79076C9.93763 16.3628 10.1362 16.6992 10.3773 17H4.5H4V16.5V3.5V3ZM11.5 4.70711L14.2929 7.50001H11.5V4.70711ZM13 12V14H11V15H13V17H14V15H16V14H14V12H13Z"
+            fill="currentColor"
+          />
+        </svg>
+      )
+    case 'createFolder':
+      return (
+        <svg
+          {...props}
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3.5 3.5H4H7H7.16667L7.3 3.6L9.16667 5H16H16.5V5.5V7.5V10.3773C16.1992 10.1362 15.8628 9.93763 15.5 9.79076V8H4.5V15.5H10.5351C10.7529 15.8764 11.0302 16.2141 11.3542 16.5H4H3.5V16V7.5V4V3.5ZM4.5 4.5V7H15.5V6H9H8.83333L8.7 5.9L6.83333 4.5H4.5ZM13.5 11V13H11.5V14H13.5V16H14.5V14H16.5V13H14.5V11H13.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      )
     case 'equal':
       return (
         <svg
@@ -61,6 +96,20 @@ export const CustomIcon = ({
           />
         </svg>
       )
+    case 'file':
+      return (
+        <svg
+          {...props}
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M11 3.5H4.5V16.5H15.5V8.00001M11 3.5L15.5 8.00001M11 3.5V8.00001H15.5"
+            stroke="currentColor"
+          />
+        </svg>
+      )
     case 'horizontal':
       return (
         <svg

src/components/DebugPanel.tsx

@@ -1,29 +1,7 @@
 import { CollapsiblePanel, CollapsiblePanelProps } from './CollapsiblePanel'
-import { v4 as uuidv4 } from 'uuid'
-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'
 import { AstExplorer } from './AstExplorer'
-import { engineCommandManager } from '../lang/std/engineConnection'
-
-type SketchModeCmd = Extract<
-  Extract<EngineCommand, { type: 'modeling_cmd_req' }>['cmd'],
-  { type: 'default_camera_enable_sketch_mode' }
->
 
 export const DebugPanel = ({ className, ...props }: CollapsiblePanelProps) => {
-  const [sketchModeCmd, setSketchModeCmd] = useState<SketchModeCmd>({
-    type: 'default_camera_enable_sketch_mode',
-    origin: { x: 0, y: 0, z: 0 },
-    x_axis: { x: 1, y: 0, z: 0 },
-    y_axis: { x: 0, y: 1, z: 0 },
-    distance_to_plane: 100,
-    ortho: true,
-    animated: !isReducedMotion(),
-  })
-  if (!sketchModeCmd) return null
   return (
     <CollapsiblePanel
       {...props}
@@ -34,67 +12,6 @@ export const DebugPanel = ({ className, ...props }: CollapsiblePanelProps) => {
       style={{ maxHeight: 'calc(100% - 3rem - 1.25rem - 1.25rem)' }}
     >
       <section className="p-4 flex flex-col gap-4">
-        <Xyz
-          onChange={setSketchModeCmd}
-          pointKey="origin"
-          data={sketchModeCmd}
-        />
-        <Xyz
-          onChange={setSketchModeCmd}
-          pointKey="x_axis"
-          data={sketchModeCmd}
-        />
-        <Xyz
-          onChange={setSketchModeCmd}
-          pointKey="y_axis"
-          data={sketchModeCmd}
-        />
-        <div className="flex">
-          <div className="pr-4">distance_to_plane</div>
-          <input
-            className="w-16 dark:bg-chalkboard-90"
-            type="number"
-            value={sketchModeCmd.distance_to_plane}
-            onChange={({ target }) => {
-              setSketchModeCmd({
-                ...sketchModeCmd,
-                distance_to_plane: Number(target.value),
-              })
-            }}
-          />
-          <div className="pr-4">ortho</div>
-          <input
-            className="w-16"
-            type="checkbox"
-            checked={sketchModeCmd.ortho}
-            onChange={(a) =>
-              setSketchModeCmd({
-                ...sketchModeCmd,
-                ortho: a.target.checked,
-              })
-            }
-          />
-        </div>
-        <ActionButton
-          Element="button"
-          onClick={() => {
-            engineCommandManager.sendSceneCommand({
-              type: 'modeling_cmd_req',
-              cmd: sketchModeCmd,
-              cmd_id: uuidv4(),
-            })
-          }}
-          className="hover:border-succeed-50"
-          icon={{
-            icon: faCheck,
-            bgClassName:
-              'bg-succeed-80 group-hover:bg-succeed-70 hover:bg-succeed-70',
-            iconClassName:
-              'text-succeed-20 group-hover:text-succeed-10 hover:text-succeed-10',
-          }}
-        >
-          Send sketch mode command
-        </ActionButton>
         <div style={{ height: '400px' }} className="overflow-y-auto">
           <AstExplorer />
         </div>
@@ -102,41 +19,3 @@ export const DebugPanel = ({ className, ...props }: CollapsiblePanelProps) => {
     </CollapsiblePanel>
   )
 }
-
-const Xyz = ({
-  pointKey,
-  data,
-  onChange,
-}: {
-  pointKey: 'origin' | 'y_axis' | 'x_axis'
-  data: SketchModeCmd
-  onChange: (a: SketchModeCmd) => void
-}) => {
-  if (!data) return null
-  return (
-    <div className="flex">
-      <div className="pr-4">{pointKey}</div>
-      {Object.entries(data[pointKey]).map(([axis, val]) => {
-        return (
-          <div key={axis} className="flex">
-            <div className="w-4">{axis}</div>
-            <input
-              className="w-16 dark:bg-chalkboard-90"
-              type="number"
-              value={val}
-              onChange={({ target }) => {
-                onChange({
-                  ...data,
-                  [pointKey]: {
-                    ...data[pointKey],
-                    [axis]: Number(target.value),
-                  },
-                })
-              }}
-            />
-          </div>
-        )
-      })}
-    </div>
-  )
-}

src/components/ErrorPage.tsx

@@ -47,11 +47,9 @@ export const ErrorPage = () => {
             Clear storage
           </ActionButton>
           <ActionButton
-            Element="link"
+            Element="externalLink"
             icon={{ icon: faBug }}
-            target="_blank"
-            rel="noopener noreferrer"
-            to="https://discord.com/channels/915388055236509727/1138967922614743060"
+            to="https://github.com/KittyCAD/modeling-app/issues/new"
           >
             Report Bug
           </ActionButton>

src/components/ExportButton.tsx

@@ -16,8 +16,8 @@ type StorageUnion = ExtractStorageTypes<OutputFormat>
 interface ExportButtonProps extends React.PropsWithChildren {
   className?: {
     button?: string
-    // If we wanted more classname configuration of sub-elements,
-    // put them here
+    icon?: string
+    bg?: string
   }
 }
 
@@ -109,7 +109,11 @@ export const ExportButton = ({ children, className }: ExportButtonProps) => {
       <ActionButton
         onClick={openModal}
         Element="button"
-        icon={{ icon: faFileExport }}
+        icon={{
+          icon: faFileExport,
+          iconClassName: className?.icon,
+          bgClassName: className?.bg,
+        }}
         className={className?.button}
       >
         {children || 'Export'}

src/components/FileMachineProvider.tsx

@@ -0,0 +1,158 @@
+import { useMachine } from '@xstate/react'
+import { useNavigate, useRouteLoaderData } from 'react-router-dom'
+import { IndexLoaderData, paths } from '../Router'
+import React, { createContext } from 'react'
+import { toast } from 'react-hot-toast'
+import {
+  AnyStateMachine,
+  ContextFrom,
+  EventFrom,
+  InterpreterFrom,
+  Prop,
+  StateFrom,
+} from 'xstate'
+import { useCommandsContext } from 'hooks/useCommandsContext'
+import { DEFAULT_FILE_NAME, fileMachine } from 'machines/fileMachine'
+import {
+  createDir,
+  removeDir,
+  removeFile,
+  renameFile,
+  writeFile,
+} from '@tauri-apps/api/fs'
+import { FILE_EXT, readProject } from 'lib/tauriFS'
+import { isTauri } from 'lib/isTauri'
+import { sep } from '@tauri-apps/api/path'
+
+type MachineContext<T extends AnyStateMachine> = {
+  state: StateFrom<T>
+  context: ContextFrom<T>
+  send: Prop<InterpreterFrom<T>, 'send'>
+}
+
+export const FileContext = createContext(
+  {} as MachineContext<typeof fileMachine>
+)
+
+export const FileMachineProvider = ({
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  const navigate = useNavigate()
+  const { setCommandBarOpen } = useCommandsContext()
+  const { project } = useRouteLoaderData(paths.FILE) as IndexLoaderData
+
+  const [state, send] = useMachine(fileMachine, {
+    context: {
+      project,
+      selectedDirectory: project,
+    },
+    actions: {
+      navigateToFile: (
+        context: ContextFrom<typeof fileMachine>,
+        event: EventFrom<typeof fileMachine>
+      ) => {
+        if (event.data && 'name' in event.data) {
+          setCommandBarOpen(false)
+          navigate(
+            `${paths.FILE}/${encodeURIComponent(
+              context.selectedDirectory + sep + event.data.name
+            )}`
+          )
+        }
+      },
+      toastSuccess: (_, event) =>
+        event.data && toast.success((event.data || '') + ''),
+      toastError: (_, event) => toast.error((event.data || '') + ''),
+    },
+    services: {
+      readFiles: async (context: ContextFrom<typeof fileMachine>) => {
+        const newFiles = isTauri()
+          ? await readProject(context.project.path)
+          : []
+        return {
+          ...context.project,
+          children: newFiles,
+        }
+      },
+      createFile: async (
+        context: ContextFrom<typeof fileMachine>,
+        event: EventFrom<typeof fileMachine, 'Create file'>
+      ) => {
+        let name = event.data.name.trim() || DEFAULT_FILE_NAME
+
+        if (event.data.makeDir) {
+          await createDir(context.selectedDirectory.path + sep + name)
+        } else {
+          await writeFile(
+            context.selectedDirectory.path +
+              sep +
+              name +
+              (name.endsWith(FILE_EXT) ? '' : FILE_EXT),
+            ''
+          )
+        }
+
+        return `Successfully created "${name}"`
+      },
+      renameFile: async (
+        context: ContextFrom<typeof fileMachine>,
+        event: EventFrom<typeof fileMachine, 'Rename file'>
+      ) => {
+        const { oldName, newName, isDir } = event.data
+        let name = newName ? newName : DEFAULT_FILE_NAME
+
+        await renameFile(
+          context.selectedDirectory.path + sep + oldName,
+          context.selectedDirectory.path +
+            sep +
+            name +
+            (name.endsWith(FILE_EXT) || isDir ? '' : FILE_EXT)
+        )
+        return (
+          oldName !== name && `Successfully renamed "${oldName}" to "${name}"`
+        )
+      },
+      deleteFile: async (
+        context: ContextFrom<typeof fileMachine>,
+        event: EventFrom<typeof fileMachine, 'Delete file'>
+      ) => {
+        const isDir = !!event.data.children
+
+        if (isDir) {
+          await removeDir(event.data.path, {
+            recursive: true,
+          }).catch((e) => console.error('Error deleting directory', e))
+        } else {
+          await removeFile(event.data.path).catch((e) =>
+            console.error('Error deleting file', e)
+          )
+        }
+        return `Successfully deleted ${isDir ? 'folder' : 'file'} "${
+          event.data.name
+        }"`
+      },
+    },
+    guards: {
+      'Has at least 1 file': (_, event: EventFrom<typeof fileMachine>) => {
+        if (event.type !== 'done.invoke.read-files') return false
+        return !!event?.data?.children && event.data.children.length > 0
+      },
+    },
+  })
+
+  return (
+    <FileContext.Provider
+      value={{
+        send,
+        state,
+        context: state.context, // just a convenience, can remove if we need to save on memory
+      }}
+    >
+      {children}
+    </FileContext.Provider>
+  )
+}
+
+export default FileMachineProvider

src/components/FileTree.module.css

@@ -0,0 +1,16 @@
+.folder {
+  position: relative;
+}
+
+.folder::after {
+  content: '';
+  width: 1px;
+  z-index: -1;
+  @apply absolute top-0 bottom-0;
+  left: calc(var(--indent-line-left, 1rem) + 0.25rem);
+  @apply bg-chalkboard-30;
+}
+
+:global(.dark) .folder::after {
+  @apply bg-chalkboard-80;
+}

src/components/FileTree.tsx

@@ -0,0 +1,398 @@
+import { IndexLoaderData, paths } from 'Router'
+import { ActionButton } from './ActionButton'
+import Tooltip from './Tooltip'
+import { FileEntry } from '@tauri-apps/api/fs'
+import { Dispatch, useRef, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Dialog, Disclosure } from '@headlessui/react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faChevronRight, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
+import { useFileContext } from 'hooks/useFileContext'
+import { useHotkeys } from 'react-hotkeys-hook'
+import styles from './FileTree.module.css'
+import { sortProject } from 'lib/tauriFS'
+
+function getIndentationCSS(level: number) {
+  return `calc(1rem * ${level + 1})`
+}
+
+function RenameForm({
+  fileOrDir,
+  setIsRenaming,
+  level = 0,
+}: {
+  fileOrDir: FileEntry
+  setIsRenaming: Dispatch<React.SetStateAction<boolean>>
+  level?: number
+}) {
+  const { send } = useFileContext()
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  function handleRenameSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    setIsRenaming(false)
+    send({
+      type: 'Rename file',
+      data: {
+        oldName: fileOrDir.name || '',
+        newName: inputRef.current?.value || fileOrDir.name || '',
+        isDir: fileOrDir.children !== undefined,
+      },
+    })
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'Escape') {
+      e.stopPropagation()
+      setIsRenaming(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleRenameSubmit}>
+      <label>
+        <span className="sr-only">Rename file</span>
+        <input
+          ref={inputRef}
+          type="text"
+          autoFocus
+          placeholder={fileOrDir.name}
+          className="w-full py-1 bg-transparent text-chalkboard-100 placeholder:text-chalkboard-70 dark:text-chalkboard-10 dark:placeholder:text-chalkboard-50 focus:outline-none focus:ring-0"
+          onKeyDown={handleKeyDown}
+          onBlur={() => setIsRenaming(false)}
+          style={{ paddingInlineStart: getIndentationCSS(level) }}
+        />
+      </label>
+      <button className="sr-only" type="submit">
+        Submit
+      </button>
+    </form>
+  )
+}
+
+function DeleteConfirmationDialog({
+  fileOrDir,
+  setIsOpen,
+}: {
+  fileOrDir: FileEntry
+  setIsOpen: Dispatch<React.SetStateAction<boolean>>
+}) {
+  const { send } = useFileContext()
+  return (
+    <Dialog
+      open={true}
+      onClose={() => setIsOpen(false)}
+      className="relative z-50"
+    >
+      <div className="fixed inset-0 bg-chalkboard-110/80 grid place-content-center">
+        <Dialog.Panel className="rounded p-4 bg-chalkboard-10 dark:bg-chalkboard-100 border border-destroy-80 max-w-2xl">
+          <Dialog.Title as="h2" className="text-2xl font-bold mb-4">
+            Delete {fileOrDir.children !== undefined ? 'Folder' : 'File'}
+          </Dialog.Title>
+          <Dialog.Description className="my-6">
+            This will permanently delete "{fileOrDir.name || 'this file'}"
+            {fileOrDir.children !== undefined
+              ? ' and all of its contents. '
+              : '. '}
+            This action cannot be undone.
+          </Dialog.Description>
+
+          <div className="flex justify-between">
+            <ActionButton
+              Element="button"
+              onClick={async () => {
+                send({ type: 'Delete file', data: fileOrDir })
+                setIsOpen(false)
+              }}
+              icon={{
+                icon: faTrashAlt,
+                bgClassName: 'bg-destroy-80',
+                iconClassName:
+                  'text-destroy-20 group-hover:text-destroy-10 hover:text-destroy-10 dark:text-destroy-20 dark:group-hover:text-destroy-10 dark:hover:text-destroy-10',
+              }}
+              className="hover:border-destroy-40 dark:hover:border-destroy-40"
+            >
+              Delete
+            </ActionButton>
+            <ActionButton Element="button" onClick={() => setIsOpen(false)}>
+              Cancel
+            </ActionButton>
+          </div>
+        </Dialog.Panel>
+      </div>
+    </Dialog>
+  )
+}
+
+const FileTreeItem = ({
+  project,
+  currentFile,
+  fileOrDir,
+  closePanel,
+  level = 0,
+}: {
+  project?: IndexLoaderData['project']
+  currentFile?: IndexLoaderData['file']
+  fileOrDir: FileEntry
+  closePanel: (
+    focusableElement?:
+      | HTMLElement
+      | React.MutableRefObject<HTMLElement | null>
+      | undefined
+  ) => void
+  level?: number
+}) => {
+  const { send, context } = useFileContext()
+  const navigate = useNavigate()
+  const [isRenaming, setIsRenaming] = useState(false)
+  const [isConfirmingDelete, setIsConfirmingDelete] = useState(false)
+  const isCurrentFile = fileOrDir.path === currentFile?.path
+
+  function handleKeyUp(e: React.KeyboardEvent<HTMLButtonElement>) {
+    if (e.metaKey && e.key === 'Backspace') {
+      // Open confirmation dialog
+      setIsConfirmingDelete(true)
+    } else if (e.key === 'Enter') {
+      // Show the renaming form
+      setIsRenaming(true)
+    } else if (e.code === 'Space') {
+      openFile()
+    }
+  }
+
+  function openFile() {
+    if (fileOrDir.children !== undefined) return // Don't open directories
+    navigate(`${paths.FILE}/${encodeURIComponent(fileOrDir.path)}`)
+    closePanel()
+  }
+
+  return (
+    <>
+      {fileOrDir.children === undefined ? (
+        <li
+          className={
+            'group m-0 p-0 border-solid border-0 text-energy-100 hover:text-energy-70 hover:bg-energy-10/50 dark:text-energy-30 dark:hover:!text-energy-20 dark:hover:bg-energy-90/50 focus-within:bg-energy-10/80 dark:focus-within:bg-energy-80/50 hover:focus-within:bg-energy-10/80 dark:hover:focus-within:bg-energy-80/50 ' +
+            (isCurrentFile ? 'bg-energy-10/50 dark:bg-energy-90/50' : '')
+          }
+        >
+          {!isRenaming ? (
+            <button
+              className="flex gap-1 items-center py-0.5 rounded-none border-none p-0 m-0 text-sm w-full hover:!bg-transparent text-left !text-inherit"
+              style={{ paddingInlineStart: getIndentationCSS(level) }}
+              onDoubleClick={openFile}
+              onClick={(e) => e.currentTarget.focus()}
+              onKeyUp={handleKeyUp}
+            >
+              <KclIcon
+                className={
+                  'inline-block w-3 ' +
+                  (isCurrentFile
+                    ? 'text-energy-90 dark:text-energy-10'
+                    : 'text-energy-50 dark:text-energy-50')
+                }
+              />
+              {fileOrDir.name}
+            </button>
+          ) : (
+            <RenameForm
+              fileOrDir={fileOrDir}
+              setIsRenaming={setIsRenaming}
+              level={level}
+            />
+          )}
+        </li>
+      ) : (
+        <Disclosure defaultOpen={currentFile?.path.includes(fileOrDir.path)}>
+          {({ open }) => (
+            <div className="group">
+              {!isRenaming ? (
+                <Disclosure.Button
+                  className={
+                    ' group border-none text-sm rounded-none p-0 m-0 flex items-center justify-start w-full py-0.5 text-chalkboard-70 dark:text-chalkboard-30 hover:bg-energy-10/50 dark:hover:bg-energy-90/50' +
+                    (context.selectedDirectory.path.includes(fileOrDir.path)
+                      ? ' group-focus-within:bg-chalkboard-20/50 dark:group-focus-within:bg-chalkboard-80/20 hover:group-focus-within:bg-chalkboard-20 dark:hover:group-focus-within:bg-chalkboard-80/20 group-active:bg-chalkboard-20/50 dark:group-active:bg-chalkboard-80/20 hover:group-active:bg-chalkboard-20/50 dark:hover:group-active:bg-chalkboard-80/20'
+                      : '')
+                  }
+                  style={{ paddingInlineStart: getIndentationCSS(level) }}
+                  onClick={(e) => e.currentTarget.focus()}
+                  onClickCapture={(e) =>
+                    send({ type: 'Set selected directory', data: fileOrDir })
+                  }
+                  onFocusCapture={(e) =>
+                    send({ type: 'Set selected directory', data: fileOrDir })
+                  }
+                  onKeyDown={(e) => e.key === 'Enter' && e.preventDefault()}
+                  onKeyUp={handleKeyUp}
+                >
+                  <FontAwesomeIcon
+                    icon={faChevronRight}
+                    className={
+                      'inline-block mr-2 m-0 p-0 w-2 h-2 ' +
+                      (open ? 'transform rotate-90' : '')
+                    }
+                  />
+                  {fileOrDir.name}
+                </Disclosure.Button>
+              ) : (
+                <div
+                  className="flex items-center"
+                  style={{ paddingInlineStart: getIndentationCSS(level) }}
+                >
+                  <FontAwesomeIcon
+                    icon={faChevronRight}
+                    className={
+                      'inline-block mr-2 m-0 p-0 w-2 h-2 ' +
+                      (open ? 'transform rotate-90' : '')
+                    }
+                  />
+                  <RenameForm
+                    fileOrDir={fileOrDir}
+                    setIsRenaming={setIsRenaming}
+                    level={-1}
+                  />
+                </div>
+              )}
+              <Disclosure.Panel
+                className={styles.folder}
+                style={
+                  {
+                    '--indent-line-left': getIndentationCSS(level),
+                  } as React.CSSProperties
+                }
+              >
+                <ul
+                  className="m-0 p-0"
+                  onClickCapture={(e) => {
+                    send({ type: 'Set selected directory', data: fileOrDir })
+                  }}
+                  onFocusCapture={(e) =>
+                    send({ type: 'Set selected directory', data: fileOrDir })
+                  }
+                >
+                  {fileOrDir.children?.map((child) => (
+                    <FileTreeItem
+                      fileOrDir={child}
+                      project={project}
+                      currentFile={currentFile}
+                      closePanel={closePanel}
+                      level={level + 1}
+                      key={level + '-' + child.path}
+                    />
+                  ))}
+                </ul>
+              </Disclosure.Panel>
+            </div>
+          )}
+        </Disclosure>
+      )}
+      {isConfirmingDelete && (
+        <DeleteConfirmationDialog
+          fileOrDir={fileOrDir}
+          setIsOpen={setIsConfirmingDelete}
+        />
+      )}
+    </>
+  )
+}
+
+interface FileTreeProps {
+  className?: string
+  file?: IndexLoaderData['file']
+  closePanel: (
+    focusableElement?:
+      | HTMLElement
+      | React.MutableRefObject<HTMLElement | null>
+      | undefined
+  ) => void
+}
+
+export const FileTree = ({
+  className = '',
+  file,
+  closePanel,
+}: FileTreeProps) => {
+  const { send, context } = useFileContext()
+  useHotkeys('meta + n', createFile)
+  useHotkeys('meta + shift + n', createFolder)
+
+  async function createFile() {
+    send({ type: 'Create file', data: { name: '', makeDir: false } })
+  }
+
+  async function createFolder() {
+    send({ type: 'Create file', data: { name: '', makeDir: true } })
+  }
+
+  return (
+    <div className={className}>
+      <div className="flex items-center gap-1 px-4 py-1 bg-chalkboard-30/50 dark:bg-chalkboard-70/50">
+        <h2 className="flex-1 m-0 p-0 text-sm mono">Files</h2>
+        <ActionButton
+          Element="button"
+          icon={{
+            icon: 'createFile',
+            iconClassName: '!text-energy-80 dark:!text-energy-20',
+            bgClassName: 'hover:bg-energy-10/50 dark:hover:bg-transparent',
+          }}
+          className="!p-0 border-none bg-transparent !outline-none"
+          onClick={createFile}
+        >
+          <Tooltip position="inlineStart" delay={750}>
+            Create File
+          </Tooltip>
+        </ActionButton>
+
+        <ActionButton
+          Element="button"
+          icon={{
+            icon: 'createFolder',
+            iconClassName: '!text-energy-80 dark:!text-energy-20',
+            bgClassName: 'hover:bg-energy-10/50 dark:hover:bg-transparent',
+          }}
+          className="!p-0 border-none bg-transparent !outline-none"
+          onClick={createFolder}
+        >
+          <Tooltip position="inlineStart" delay={750}>
+            Create Folder
+          </Tooltip>
+        </ActionButton>
+      </div>
+      <div className="overflow-auto max-h-full pb-12">
+        <ul
+          className="m-0 p-0 text-sm"
+          onClickCapture={(e) => {
+            send({ type: 'Set selected directory', data: context.project })
+          }}
+        >
+          {sortProject(context.project.children || []).map((fileOrDir) => (
+            <FileTreeItem
+              project={context.project}
+              currentFile={file}
+              fileOrDir={fileOrDir}
+              closePanel={closePanel}
+              key={fileOrDir.path}
+            />
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+function KclIcon({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M40 0H0V40H40V0ZM7.34715 27.2143V15.6577L2.976 15.987V36.7949H7.34715V32.0645L8.00582 31.5256C8.24533 31.326 8.47487 31.1264 8.69442 30.9268L12.1075 36.7949H17.0475C16.1893 35.3978 15.311 33.9906 14.4128 32.5735C13.5346 31.1563 12.6664 29.7392 11.8081 28.3221L15.8499 24.9389C15.4308 24.4399 15.0017 23.931 14.5625 23.412L13.3051 21.8552L7.34715 27.2143ZM22.2581 26.6754C22.8769 25.9169 23.6753 25.5377 24.6533 25.5377C25.272 25.5377 25.8309 25.6175 26.3299 25.7772C26.8289 25.9169 27.4177 26.1465 28.0963 26.4658L29.3238 23.3521C28.5853 22.7933 27.7371 22.4041 26.779 22.1845C25.8409 21.9649 25.0625 21.8552 24.4437 21.8552C22.0885 21.8552 20.2223 22.5537 18.845 23.9509C17.4878 25.3281 16.8092 27.1944 16.8092 29.5496C16.8092 31.9048 17.4878 33.7611 18.845 35.1183C20.2223 36.4756 22.0885 37.1542 24.4437 37.1542C25.0625 37.1542 25.8509 37.0444 26.8089 36.8249C27.767 36.6053 28.6053 36.2161 29.3238 35.6572L28.0963 32.5435C27.4177 32.8629 26.8289 33.0924 26.3299 33.2321C25.8309 33.3718 25.272 33.4417 24.6533 33.4417C23.6753 33.4417 22.8769 33.0924 22.2581 32.3938C21.6594 31.6753 21.36 30.7272 21.36 29.5496C21.36 28.372 21.6594 27.4139 22.2581 26.6754ZM36.2796 36.7949V15.6577L31.9085 15.987V36.7949H36.2796Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

src/components/GlobalStateProvider.tsx

@@ -24,9 +24,7 @@ import {
   StateFrom,
 } from 'xstate'
 import { useCommandsContext } from 'hooks/useCommandsContext'
-import { invoke } from '@tauri-apps/api'
 import { isTauri } from 'lib/isTauri'
-import { VITE_KC_API_BASE_URL } from 'env'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>

src/components/Logs.tsx

@@ -1,8 +1,8 @@
 import ReactJson from 'react-json-view'
 import { useEffect } from 'react'
-import { useStore } from '../useStore'
 import { CollapsiblePanel, CollapsiblePanelProps } from './CollapsiblePanel'
 import { Themes } from '../lib/theme'
+import { useKclContext } from 'lang/KclSinglton'
 
 const ReactJsonTypeHack = ReactJson as any
 
@@ -11,9 +11,7 @@ interface LogPanelProps extends CollapsiblePanelProps {
 }
 
 export const Logs = ({ theme = Themes.Light, ...props }: LogPanelProps) => {
-  const { logs } = useStore(({ logs }) => ({
-    logs,
-  }))
+  const { logs } = useKclContext()
   useEffect(() => {
     const element = document.querySelector('.console-tile')
     if (element) {
@@ -47,21 +45,19 @@ export const KCLErrors = ({
   theme = Themes.Light,
   ...props
 }: LogPanelProps) => {
-  const { kclErrors } = useStore(({ kclErrors }) => ({
-    kclErrors,
-  }))
+  const { errors } = useKclContext()
   useEffect(() => {
     const element = document.querySelector('.console-tile')
     if (element) {
       element.scrollTop = element.scrollHeight - element.clientHeight
     }
-  }, [kclErrors])
+  }, [errors])
   return (
     <CollapsiblePanel {...props}>
       <div className="h-full relative">
         <div className="absolute inset-0 flex flex-col">
           <ReactJsonTypeHack
-            src={kclErrors}
+            src={errors}
             collapsed={1}
             collapseStringsAfterLength={60}
             enableClipboard={false}

src/components/MemoryPanel.test.tsx

@@ -14,12 +14,14 @@ describe('processMemory', () => {
   }
   const otherVar = myFn(5)
 
-  const theExtrude = startSketchAt([0, 0])
+  const theExtrude = startSketchOn('XY')
+    |> startProfileAt([0, 0], %)
     |> lineTo([-2.4, myVar], %)
     |> lineTo([-0.76, otherVar], %)
     |> extrude(4, %)
 
-  const theSketch = startSketchAt([0, 0])
+  const theSketch = startSketchOn('XY')
+    |> startProfileAt([0, 0], %)
     |> lineTo([-3.35, 0.17], %)
     |> lineTo([0.98, 5.16], %)
     |> lineTo([2.15, 4.32], %)

src/components/MemoryPanel.tsx

@@ -1,9 +1,9 @@
 import ReactJson from 'react-json-view'
 import { CollapsiblePanel, CollapsiblePanelProps } from './CollapsiblePanel'
-import { useStore } from '../useStore'
 import { useMemo } from 'react'
 import { ProgramMemory, Path, ExtrudeSurface } from '../lang/wasm'
 import { Themes } from '../lib/theme'
+import { useKclContext } from 'lang/KclSinglton'
 
 interface MemoryPanelProps extends CollapsiblePanelProps {
   theme?: Exclude<Themes, Themes.System>
@@ -13,9 +13,7 @@ export const MemoryPanel = ({
   theme = Themes.Light,
   ...props
 }: MemoryPanelProps) => {
-  const { programMemory } = useStore((s) => ({
-    programMemory: s.programMemory,
-  }))
+  const { programMemory } = useKclContext()
   const ProcessedMemory = useMemo(
     () => processMemory(programMemory),
     [programMemory]

src/components/ModelingMachineProvider.tsx

@@ -0,0 +1,458 @@
+import { useMachine } from '@xstate/react'
+import React, { createContext, useEffect, useRef } from 'react'
+import {
+  AnyStateMachine,
+  ContextFrom,
+  InterpreterFrom,
+  Prop,
+  StateFrom,
+  assign,
+} from 'xstate'
+import { SetSelections, modelingMachine } from 'machines/modelingMachine'
+import { useSetupEngineManager } from 'hooks/useSetupEngineManager'
+import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
+import { isCursorInSketchCommandRange } from 'lang/util'
+import { engineCommandManager } from 'lang/std/engineConnection'
+import { v4 as uuidv4 } from 'uuid'
+import { addStartSketch } from 'lang/modifyAst'
+import { roundOff } from 'lib/utils'
+import {
+  recast,
+  parse,
+  Program,
+  PipeExpression,
+  CallExpression,
+} from 'lang/wasm'
+import { getNodeFromPath } from 'lang/queryAst'
+import {
+  addCloseToPipe,
+  addNewSketchLn,
+  compareVec2Epsilon,
+} from 'lang/std/sketch'
+import { kclManager } from 'lang/KclSinglton'
+import { applyConstraintHorzVertDistance } from './Toolbar/SetHorzVertDistance'
+import { applyConstraintAngleBetween } from './Toolbar/SetAngleBetween'
+import { applyConstraintAngleLength } from './Toolbar/setAngleLength'
+import { toast } from 'react-hot-toast'
+import { pathMapToSelections } from 'lang/util'
+import { useStore } from 'useStore'
+import { handleSelectionBatch, handleSelectionWithShift } from 'lib/selections'
+import { applyConstraintIntersect } from './Toolbar/Intersect'
+
+type MachineContext<T extends AnyStateMachine> = {
+  state: StateFrom<T>
+  context: ContextFrom<T>
+  send: Prop<InterpreterFrom<T>, 'send'>
+}
+
+export const ModelingMachineContext = createContext(
+  {} as MachineContext<typeof modelingMachine>
+)
+
+export const ModelingMachineProvider = ({
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  const { auth } = useGlobalStateContext()
+  const token = auth?.context?.token
+  const streamRef = useRef<HTMLDivElement>(null)
+  useSetupEngineManager(streamRef, token)
+
+  const { isShiftDown, editorView } = useStore((s) => ({
+    isShiftDown: s.isShiftDown,
+    editorView: s.editorView,
+  }))
+
+  // const { commands } = useCommandsContext()
+
+  // Settings machine setup
+  // const retrievedSettings = useRef(
+  // localStorage?.getItem(MODELING_PERSIST_KEY) || '{}'
+  // )
+
+  // What should we persist from modeling state? Nothing?
+  // const persistedSettings = Object.assign(
+  //   settingsMachine.initialState.context,
+  //   JSON.parse(retrievedSettings.current) as Partial<
+  //     (typeof settingsMachine)['context']
+  //   >
+  // )
+
+  const [modelingState, modelingSend] = useMachine(modelingMachine, {
+    // context: persistedSettings,
+    actions: {
+      'Modify AST': () => {},
+      'Update code selection cursors': () => {},
+      'show default planes': () => {
+        kclManager.showPlanes()
+      },
+      'create path': assign({
+        sketchEnginePathId: () => {
+          const sketchUuid = uuidv4()
+          engineCommandManager.sendSceneCommand({
+            type: 'modeling_cmd_req',
+            cmd_id: sketchUuid,
+            cmd: {
+              type: 'start_path',
+            },
+          })
+          engineCommandManager.sendSceneCommand({
+            type: 'modeling_cmd_req',
+            cmd_id: uuidv4(),
+            cmd: {
+              type: 'edit_mode_enter',
+              target: sketchUuid,
+            },
+          })
+          return sketchUuid
+        },
+      }),
+      'AST start new sketch': assign(
+        ({ sketchEnginePathId }, { data: { coords, axis, segmentId } }) => {
+          if (!axis) {
+            // Something really weird must have happened for this to happen.
+            console.error('axis is undefined for starting a new sketch')
+            return {}
+          }
+          if (!segmentId) {
+            // Something really weird must have happened for this to happen.
+            console.error('segmentId is undefined for starting a new sketch')
+            return {}
+          }
+
+          const _addStartSketch = addStartSketch(
+            kclManager.ast,
+            axis,
+            [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
+          const newCode = recast(_modifiedAst)
+          const astWithUpdatedSource = parse(newCode)
+          const updatedPipeNode = getNodeFromPath<PipeExpression>(
+            astWithUpdatedSource,
+            _pathToNode
+          ).node
+          const startProfileAtCallExp = updatedPipeNode.body.find(
+            (exp) =>
+              exp.type === 'CallExpression' &&
+              exp.callee.name === 'startProfileAt'
+          )
+          if (startProfileAtCallExp)
+            engineCommandManager.artifactMap[sketchEnginePathId] = {
+              type: 'result',
+              range: [startProfileAtCallExp.start, startProfileAtCallExp.end],
+              commandType: 'start_path',
+              data: null,
+              raw: {} as any,
+            }
+          const lineCallExp = updatedPipeNode.body.find(
+            (exp) => exp.type === 'CallExpression' && exp.callee.name === 'line'
+          )
+          if (lineCallExp)
+            engineCommandManager.artifactMap[segmentId] = {
+              type: 'result',
+              range: [lineCallExp.start, lineCallExp.end],
+              commandType: 'extend_path',
+              parentId: sketchEnginePathId,
+              data: null,
+              raw: {} as any,
+            }
+
+          kclManager.executeAstMock(astWithUpdatedSource, true)
+
+          return {
+            sketchPathToNode: _pathToNode,
+          }
+        }
+      ),
+      'AST add line segment': async (
+        { sketchPathToNode, sketchEnginePathId },
+        { data: { coords, segmentId } }
+      ) => {
+        if (!sketchPathToNode) return
+        const lastCoord = coords[coords.length - 1]
+
+        const pathInfo = await engineCommandManager.sendSceneCommand({
+          type: 'modeling_cmd_req',
+          cmd_id: uuidv4(),
+          cmd: {
+            type: 'path_get_info',
+            path_id: sketchEnginePathId,
+          },
+        })
+        const firstSegment = pathInfo?.data?.data?.segments.find(
+          (seg: any) => seg.command === 'line_to'
+        )
+        const firstSegCoords = await engineCommandManager.sendSceneCommand({
+          type: 'modeling_cmd_req',
+          cmd_id: uuidv4(),
+          cmd: {
+            type: 'curve_get_control_points',
+            curve_id: firstSegment.command_id,
+          },
+        })
+        const startPathCoord = firstSegCoords?.data?.data?.control_points[0]
+
+        const isClose = compareVec2Epsilon(
+          [startPathCoord.x, startPathCoord.y],
+          [lastCoord.x, lastCoord.y]
+        )
+
+        let _modifiedAst: Program
+        if (!isClose) {
+          const newSketchLn = addNewSketchLn({
+            node: kclManager.ast,
+            programMemory: kclManager.programMemory,
+            to: [lastCoord.x, lastCoord.y],
+            from: [coords[0].x, coords[0].y],
+            fnName: 'line',
+            pathToNode: sketchPathToNode,
+          })
+          const _modifiedAst = newSketchLn.modifiedAst
+          kclManager.executeAstMock(_modifiedAst, true).then(() => {
+            const lineCallExp = getNodeFromPath<CallExpression>(
+              kclManager.ast,
+              newSketchLn.pathToNode
+            ).node
+            if (segmentId)
+              engineCommandManager.artifactMap[segmentId] = {
+                type: 'result',
+                range: [lineCallExp.start, lineCallExp.end],
+                commandType: 'extend_path',
+                parentId: sketchEnginePathId,
+                data: null,
+                raw: {} as any,
+              }
+          })
+        } else {
+          _modifiedAst = addCloseToPipe({
+            node: kclManager.ast,
+            programMemory: kclManager.programMemory,
+            pathToNode: sketchPathToNode,
+          })
+          engineCommandManager.sendSceneCommand({
+            type: 'modeling_cmd_req',
+            cmd_id: uuidv4(),
+            cmd: { type: 'edit_mode_exit' },
+          })
+          engineCommandManager.sendSceneCommand({
+            type: 'modeling_cmd_req',
+            cmd_id: uuidv4(),
+            cmd: { type: 'default_camera_disable_sketch_mode' },
+          })
+          kclManager.executeAstMock(_modifiedAst, true)
+          // updateAst(_modifiedAst, true)
+        }
+      },
+      'sketch exit execute': () => {
+        kclManager.executeAst()
+      },
+      'set tool': () => {}, // TODO
+      'toast extrude failed': () => {
+        toast.error(
+          'Extrude failed, sketches need to be closed, or not already extruded'
+        )
+      },
+      'Set selection': assign(({ selectionRanges }, event) => {
+        if (event.type !== 'Set selection') return {} // this was needed for ts after adding 'Set selection' action to on done modal events
+        const setSelections = event.data
+        if (setSelections.selectionType === 'mirrorCodeMirrorSelections')
+          return { selectionRanges: setSelections.selection }
+        else if (setSelections.selectionType === 'otherSelection')
+          return {
+            selectionRanges: {
+              ...selectionRanges,
+              otherSelections: [setSelections.selection],
+            },
+          }
+        else if (!editorView) return {}
+        else if (setSelections.selectionType === 'singleCodeCursor') {
+          // This DOES NOT set the `selectionRanges` in xstate context
+          // instead it updates/dispatches to the editor, which in turn updates the xstate context
+          // I've found this the best way to deal with the editor without causing an infinite loop
+          // and really we want the editor to be in charge of cursor positions and for `selectionRanges` mirror it
+          // because we want to respect the user manually placing the cursor too.
+
+          // for more details on how selections see `src/lib/selections.ts`.
+          const { codeMirrorSelection, selectionRangeTypeMap } =
+            handleSelectionWithShift({
+              codeSelection: setSelections.selection,
+              currestSelections: selectionRanges,
+              isShiftDown,
+            })
+          if (codeMirrorSelection) {
+            setTimeout(() => {
+              editorView.dispatch({
+                selection: codeMirrorSelection,
+              })
+            })
+          }
+          return { selectionRangeTypeMap }
+        }
+        // This DOES NOT set the `selectionRanges` in xstate context
+        // same as comment above
+        const { codeMirrorSelection, selectionRangeTypeMap } =
+          handleSelectionBatch({
+            selections: setSelections.selection,
+          })
+        if (codeMirrorSelection) {
+          setTimeout(() => {
+            editorView.dispatch({
+              selection: codeMirrorSelection,
+            })
+          })
+        }
+        return { selectionRangeTypeMap }
+      }),
+    },
+    guards: {
+      'Selection contains axis': () => true,
+      'Selection contains edge': () => true,
+      'Selection contains face': () => true,
+      'Selection contains line': () => true,
+      'Selection contains point': () => true,
+      'Selection is not empty': () => true,
+      'Selection is one face': ({ selectionRanges }) => {
+        return !!isCursorInSketchCommandRange(
+          engineCommandManager.artifactMap,
+          selectionRanges
+        )
+      },
+    },
+    services: {
+      'Get horizontal info': async ({
+        selectionRanges,
+      }): Promise<SetSelections> => {
+        const { modifiedAst, pathToNodeMap } =
+          await applyConstraintHorzVertDistance({
+            constraint: 'setHorzDistance',
+            selectionRanges,
+          })
+        await kclManager.updateAst(modifiedAst, true)
+        return {
+          selectionType: 'completeSelection',
+          selection: pathMapToSelections(
+            kclManager.ast,
+            selectionRanges,
+            pathToNodeMap
+          ),
+        }
+      },
+      'Get vertical info': async ({
+        selectionRanges,
+      }): Promise<SetSelections> => {
+        const { modifiedAst, pathToNodeMap } =
+          await applyConstraintHorzVertDistance({
+            constraint: 'setVertDistance',
+            selectionRanges,
+          })
+        await kclManager.updateAst(modifiedAst, true)
+        return {
+          selectionType: 'completeSelection',
+          selection: pathMapToSelections(
+            kclManager.ast,
+            selectionRanges,
+            pathToNodeMap
+          ),
+        }
+      },
+      'Get angle info': async ({ selectionRanges }): Promise<SetSelections> => {
+        const { modifiedAst, pathToNodeMap } =
+          await applyConstraintAngleBetween({
+            selectionRanges,
+          })
+        await kclManager.updateAst(modifiedAst, true)
+        return {
+          selectionType: 'completeSelection',
+          selection: pathMapToSelections(
+            kclManager.ast,
+            selectionRanges,
+            pathToNodeMap
+          ),
+        }
+      },
+      'Get length info': async ({
+        selectionRanges,
+      }): Promise<SetSelections> => {
+        const { modifiedAst, pathToNodeMap } = await applyConstraintAngleLength(
+          { selectionRanges }
+        )
+        await kclManager.updateAst(modifiedAst, true)
+        return {
+          selectionType: 'completeSelection',
+          selection: pathMapToSelections(
+            kclManager.ast,
+            selectionRanges,
+            pathToNodeMap
+          ),
+        }
+      },
+      'Get perpendicular distance info': async ({
+        selectionRanges,
+      }): Promise<SetSelections> => {
+        const { modifiedAst, pathToNodeMap } = await applyConstraintIntersect({
+          selectionRanges,
+        })
+        await kclManager.updateAst(modifiedAst, true)
+        return {
+          selectionType: 'completeSelection',
+          selection: pathMapToSelections(
+            kclManager.ast,
+            selectionRanges,
+            pathToNodeMap
+          ),
+        }
+      },
+    },
+    devTools: true,
+  })
+
+  useEffect(() => {
+    engineCommandManager.onPlaneSelected((plane_id: string) => {
+      if (modelingState.nextEvents.includes('Select default plane')) {
+        modelingSend({
+          type: 'Select default plane',
+          data: { planeId: plane_id },
+        })
+      }
+    })
+  }, [modelingSend, modelingState.nextEvents])
+
+  useEffect(() => {
+    kclManager.registerExecuteCallback(() => {
+      modelingSend({ type: 'Re-execute' })
+    })
+  }, [modelingSend])
+
+  // useStateMachineCommands({
+  //   state: settingsState,
+  //   send: settingsSend,
+  //   commands,
+  //   owner: 'settings',
+  //   commandBarMeta: settingsCommandBarMeta,
+  // })
+
+  return (
+    <ModelingMachineContext.Provider
+      value={{
+        state: modelingState,
+        context: modelingState.context,
+        send: modelingSend,
+      }}
+    >
+      {/* TODO #818: maybe pass reff down to children/app.ts or render app.tsx directly?
+      since realistically it won't ever have generic children that isn't app.tsx */}
+      <div className="h-screen overflow-hidden select-none" ref={streamRef}>
+        {children}
+      </div>
+    </ModelingMachineContext.Provider>
+  )
+}
+
+export default ModelingMachineProvider

src/components/ProjectCard.tsx

@@ -1,4 +1,4 @@
-import { FormEvent, useState } from 'react'
+import { FormEvent, useEffect, useState } from 'react'
 import { type ProjectWithEntryPointMetadata, paths } from '../Router'
 import { Link } from 'react-router-dom'
 import { ActionButton } from './ActionButton'
@@ -8,7 +8,7 @@ import {
   faTrashAlt,
   faX,
 } from '@fortawesome/free-solid-svg-icons'
-import { FILE_EXT } from '../lib/tauriFS'
+import { FILE_EXT, getPartsCount, readProject } from '../lib/tauriFS'
 import { Dialog } from '@headlessui/react'
 import { useHotkeys } from 'react-hotkeys-hook'
 
@@ -28,6 +28,8 @@ function ProjectCard({
   useHotkeys('esc', () => setIsEditing(false))
   const [isEditing, setIsEditing] = useState(false)
   const [isConfirmingDelete, setIsConfirmingDelete] = useState(false)
+  const [numberOfParts, setNumberOfParts] = useState(1)
+  const [numberOfFolders, setNumberOfFolders] = useState(0)
 
   function handleSave(e: FormEvent<HTMLFormElement>) {
     e.preventDefault()
@@ -42,6 +44,17 @@ function ProjectCard({
       : date.toLocaleTimeString()
   }
 
+  useEffect(() => {
+    async function getNumberOfParts() {
+      const { kclFileCount, kclDirCount } = getPartsCount(
+        await readProject(project.path)
+      )
+      setNumberOfParts(kclFileCount)
+      setNumberOfFolders(kclDirCount)
+    }
+    getNumberOfParts()
+  }, [project.path])
+
   return (
     <li
       {...props}
@@ -76,7 +89,7 @@ function ProjectCard({
         </form>
       ) : (
         <>
-          <div className="p-1 flex flex-col gap-2">
+          <div className="p-1 flex flex-col h-full gap-2">
             <Link
               to={`${paths.FILE}/${encodeURIComponent(project.path)}`}
               className="flex-1 text-liquid-100"
@@ -84,7 +97,14 @@ function ProjectCard({
               {project.name?.replace(FILE_EXT, '')}
             </Link>
             <span className="text-chalkboard-60 text-xs">
-              Edited {getDisplayedTime(project.entrypoint_metadata.modifiedAt)}
+              {numberOfParts} part{numberOfParts === 1 ? '' : 's'}{' '}
+              {numberOfFolders > 0 &&
+                `/ ${numberOfFolders} folder${
+                  numberOfFolders === 1 ? '' : 's'
+                }`}
+            </span>
+            <span className="text-chalkboard-60 text-xs">
+              Edited {getDisplayedTime(project.entrypointMetadata.modifiedAt)}
             </span>
             <div className="absolute bottom-2 right-2 flex gap-1 items-center opacity-0 group-hover:opacity-100 group-focus-within:opacity-100">
               <ActionButton

src/components/ProjectSidebarMenu.test.tsx

@@ -15,7 +15,7 @@ const projectWellFormed = {
       path: '/some/path/Simple Box/main.kcl',
     },
   ],
-  entrypoint_metadata: {
+  entrypointMetadata: {
     accessedAt: now,
     blksize: 32,
     blocks: 32,

src/components/ProjectSidebarMenu.tsx

@@ -1,18 +1,22 @@
 import { Popover, Transition } from '@headlessui/react'
 import { ActionButton } from './ActionButton'
 import { faHome } from '@fortawesome/free-solid-svg-icons'
-import { ProjectWithEntryPointMetadata, paths } from '../Router'
+import { IndexLoaderData, paths } from '../Router'
 import { isTauri } from '../lib/isTauri'
 import { Link } from 'react-router-dom'
 import { ExportButton } from './ExportButton'
 import { Fragment } from 'react'
+import { FileTree } from './FileTree'
+import { sep } from '@tauri-apps/api/path'
 
 const ProjectSidebarMenu = ({
   project,
+  file,
   renderAsLink = false,
 }: {
   renderAsLink?: boolean
-  project?: Partial<ProjectWithEntryPointMetadata>
+  project?: IndexLoaderData['project']
+  file?: IndexLoaderData['file']
 }) => {
   return renderAsLink ? (
     <Link
@@ -23,10 +27,10 @@ const ProjectSidebarMenu = ({
       <img
         src="/kitt-8bit-winking.svg"
         alt="KittyCAD App"
-        className="h-9 w-auto"
+        className="w-auto h-9"
       />
       <span
-        className="text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap hidden lg:block"
+        className="hidden text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap lg:block"
         data-testid="project-sidebar-link-name"
       >
         {project?.name ? project.name : 'KittyCAD Modeling App'}
@@ -41,11 +45,20 @@ const ProjectSidebarMenu = ({
         <img
           src="/kitt-8bit-winking.svg"
           alt="KittyCAD App"
-          className="h-full w-auto"
+          className="w-auto h-full"
         />
-        <span className="text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap hidden lg:block">
-          {isTauri() && project?.name ? project.name : 'KittyCAD Modeling App'}
+        <div className="flex flex-col items-start py-0.5">
+          <span className="hidden text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap lg:block">
+            {isTauri() && file?.name
+              ? file.name.slice(file.name.lastIndexOf(sep) + 1)
+              : 'KittyCAD Modeling App'}
           </span>
+          {isTauri() && project?.name && (
+            <span className="hidden text-xs text-chalkboard-70 dark:text-chalkboard-40 whitespace-nowrap lg:block">
+              {project.name}
+            </span>
+          )}
+        </div>
       </Popover.Button>
       <Transition
         enter="duration-200 ease-out"
@@ -56,7 +69,7 @@ const ProjectSidebarMenu = ({
         leaveTo="opacity-0"
         as={Fragment}
       >
-        <Popover.Overlay className="fixed z-20 inset-0 bg-chalkboard-110/50" />
+        <Popover.Overlay className="fixed inset-0 z-20 bg-chalkboard-110/50" />
       </Transition>
 
       <Transition
@@ -68,37 +81,53 @@ const ProjectSidebarMenu = ({
         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">
+        <Popover.Panel
+          className="fixed inset-0 right-auto z-30 grid w-64 h-screen max-h-screen grid-cols-1 border rounded-r-lg shadow-md bg-chalkboard-10 dark:bg-chalkboard-100 border-energy-100 dark:border-energy-100/50"
+          style={{ gridTemplateRows: 'auto 1fr auto' }}
+        >
+          {({ close }) => (
+            <>
+              <div className="flex items-center gap-4 px-4 py-3 bg-energy-10/25 dark:bg-energy-110">
                 <img
                   src="/kitt-8bit-winking.svg"
                   alt="KittyCAD App"
-              className="h-9 w-auto"
+                  className="w-auto h-9"
                 />
 
                 <div>
                   <p
-                className="m-0 text-energy-10 text-mono"
+                    className="m-0 text-chalkboard-100 dark:text-energy-10 text-mono"
                     data-testid="projectName"
                   >
                     {project?.name ? project.name : 'KittyCAD Modeling App'}
                   </p>
-              {project?.entrypoint_metadata && (
+                  {project?.entrypointMetadata && (
                     <p
-                  className="m-0 text-energy-40 text-xs"
+                      className="m-0 text-xs text-chalkboard-100 dark:text-energy-40"
                       data-testid="createdAt"
                     >
                       Created{' '}
-                  {project?.entrypoint_metadata.createdAt.toLocaleDateString()}
+                      {project.entrypointMetadata.createdAt.toLocaleDateString()}
                     </p>
                   )}
                 </div>
               </div>
-          <div className="p-4 flex flex-col gap-2">
+              {isTauri() ? (
+                <FileTree
+                  file={file}
+                  className="overflow-hidden border-0 border-y border-energy-40 dark:border-energy-70"
+                  closePanel={close}
+                />
+              ) : (
+                <div className="flex-1 overflow-hidden" />
+              )}
+              <div className="flex flex-col gap-2 p-4 bg-energy-10/25 dark:bg-energy-110">
                 <ExportButton
                   className={{
                     button:
-                  'border-transparent dark:border-transparent dark:hover:border-energy-60',
+                      'border-transparent dark:border-transparent hover:border-energy-60',
+                    icon: 'text-energy-10 dark:text-energy-120',
+                    bg: 'bg-energy-120 dark:bg-energy-10',
                   }}
                 >
                   Export Model
@@ -109,13 +138,17 @@ const ProjectSidebarMenu = ({
                     to={paths.HOME}
                     icon={{
                       icon: faHome,
+                      iconClassName: 'text-energy-10 dark:text-energy-120',
+                      bgClassName: 'bg-energy-120 dark:bg-energy-10',
                     }}
-                className="border-transparent dark:border-transparent dark:hover:border-energy-60"
+                    className="border-transparent dark:border-transparent hover:border-energy-60"
                   >
                     Go to Home
                   </ActionButton>
                 )}
               </div>
+            </>
+          )}
         </Popover.Panel>
       </Transition>
     </Popover>

src/components/SetAngleLengthModal.tsx

@@ -1,5 +1,6 @@
 import { Dialog, Transition } from '@headlessui/react'
 import { Fragment, useState } from 'react'
+import { type InstanceProps, create } from 'react-modal-promise'
 import { Value } from '../lang/wasm'
 import {
   AvailableVars,
@@ -9,6 +10,28 @@ import {
   CreateNewVariable,
 } from './AvailableVarsHelpers'
 
+type ModalResolve = {
+  value: string
+  sign: number
+  valueNode: Value
+  variableName?: string
+  newVariableInsertIndex: number
+}
+
+type ModalReject = boolean
+
+type SetAngleLengthModalProps = InstanceProps<ModalResolve, ModalReject> & {
+  value: number
+  valueName: string
+  shouldCreateVariable?: boolean
+}
+
+export const createSetAngleLengthModal = create<
+  SetAngleLengthModalProps,
+  ModalResolve,
+  ModalReject
+>
+
 export const SetAngleLengthModal = ({
   isOpen,
   onResolve,
@@ -16,20 +39,7 @@ export const SetAngleLengthModal = ({
   value: initialValue,
   valueName,
   shouldCreateVariable: initialShouldCreateVariable = false,
-}: {
-  isOpen: boolean
-  onResolve: (a: {
-    value: string
-    sign: number
-    valueNode: Value
-    variableName?: string
-    newVariableInsertIndex: number
-  }) => void
-  onReject: (a: any) => void
-  value: number
-  valueName: string
-  shouldCreateVariable: boolean
-}) => {
+}: SetAngleLengthModalProps) => {
   const [sign, setSign] = useState(Math.sign(Number(initialValue)))
   const [value, setValue] = useState(String(initialValue * sign))
   const [shouldCreateVariable, setShouldCreateVariable] = useState(
@@ -98,7 +108,7 @@ export const SetAngleLengthModal = ({
                 </label>
                 <div className="mt-1 flex">
                   <button
-                    className="border border-gray-300 px-2"
+                    className="border border-gray-300 px-2 text-gray-900"
                     onClick={() => setSign(-sign)}
                   >
                     {sign > 0 ? '+' : '-'}
@@ -108,7 +118,7 @@ export const SetAngleLengthModal = ({
                     type="text"
                     name="val"
                     id="val"
-                    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"
+                    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 text-gray-900"
                     value={value}
                     onChange={(e) => {
                       setValue(e.target.value)

src/components/SetHorVertDistanceModal.tsx

@@ -1,5 +1,6 @@
 import { Dialog, Transition } from '@headlessui/react'
 import { Fragment, useState } from 'react'
+import { type InstanceProps, create } from 'react-modal-promise'
 import { Value } from '../lang/wasm'
 import {
   AvailableVars,
@@ -9,6 +10,30 @@ import {
   CreateNewVariable,
 } from './AvailableVarsHelpers'
 
+type ModalResolve = {
+  value: string
+  segName: string
+  valueNode: Value
+  variableName?: string
+  newVariableInsertIndex: number
+  sign: number
+}
+
+type ModalReject = boolean
+
+type GetInfoModalProps = InstanceProps<ModalResolve, ModalReject> & {
+  segName: string
+  isSegNameEditable: boolean
+  value?: number
+  initialVariableName: string
+}
+
+export const createInfoModal = create<
+  GetInfoModalProps,
+  ModalResolve,
+  ModalReject
+>
+
 export const GetInfoModal = ({
   isOpen,
   onResolve,
@@ -17,25 +42,12 @@ export const GetInfoModal = ({
   isSegNameEditable,
   value: initialValue,
   initialVariableName,
-}: {
-  isOpen: boolean
-  onResolve: (a: {
-    value: string
-    segName: string
-    valueNode: Value
-    variableName?: string
-    newVariableInsertIndex: number
-    sign: number
-  }) => void
-  onReject: (a: any) => void
-  segName: string
-  isSegNameEditable: boolean
-  value: number
-  initialVariableName: string
-}) => {
+}: GetInfoModalProps) => {
   const [sign, setSign] = useState(Math.sign(Number(initialValue)))
   const [segName, setSegName] = useState(initialSegName)
-  const [value, setValue] = useState(String(Math.abs(initialValue)))
+  const [value, setValue] = useState(
+    initialValue === undefined ? '' : String(Math.abs(initialValue))
+  )
   const [shouldCreateVariable, setShouldCreateVariable] = useState(false)
 
   const {
@@ -75,7 +87,7 @@ export const GetInfoModal = ({
               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.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white/90 p-6 text-left align-middle shadow-xl transition-all">
                 <Dialog.Title
                   as="h3"
                   className="text-lg font-medium leading-6 text-gray-900"
@@ -97,7 +109,7 @@ export const GetInfoModal = ({
                 </label>
                 <div className="mt-1 flex">
                   <button
-                    className="border border-gray-300 px-2 mr-1"
+                    className="border border-gray-400 px-2 mr-1 text-gray-900"
                     onClick={() => setSign(-sign)}
                   >
                     {sign > 0 ? '+' : '-'}
@@ -107,7 +119,7 @@ export const GetInfoModal = ({
                     name="val"
                     id="val"
                     ref={inputRef}
-                    className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md font-mono"
+                    className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm text-gray-900 border-gray-300 rounded-md font-mono"
                     value={value}
                     onChange={(e) => {
                       setValue(e.target.value)
@@ -127,7 +139,7 @@ export const GetInfoModal = ({
                     name="segName"
                     id="segName"
                     disabled={!isSegNameEditable}
-                    className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md font-mono"
+                    className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm text-gray-900 border-gray-300 rounded-md font-mono"
                     value={segName}
                     onChange={(e) => {
                       setSegName(e.target.value)

src/components/SetVarNameModal.tsx

@@ -4,19 +4,26 @@ import { useCalc, CreateNewVariable } from './AvailableVarsHelpers'
 import { ActionButton } from './ActionButton'
 import { faPlus } from '@fortawesome/free-solid-svg-icons'
 import { toast } from 'react-hot-toast'
+import { type InstanceProps, create } from 'react-modal-promise'
+
+type ModalResolve = { variableName: string }
+type ModalReject = boolean
+type SetVarNameModalProps = InstanceProps<ModalResolve, ModalReject> & {
+  valueName: string
+}
+
+export const createSetVarNameModal = create<
+  SetVarNameModalProps,
+  ModalResolve,
+  ModalReject
+>
 
 export const SetVarNameModal = ({
   isOpen,
   onResolve,
   onReject,
   valueName,
-}: {
-  isOpen: boolean
-  onResolve: (a: { variableName?: string }) => void
-  onReject: (a: any) => void
-  value: number
-  valueName: string
-}) => {
+}: SetVarNameModalProps) => {
   const { isNewVariableNameUnique, newVariableName, setNewVariableName } =
     useCalc({ value: '', initialVariableName: valueName })
 

src/components/Stream.tsx

@@ -7,28 +7,18 @@ import {
 } from 'react'
 import { v4 as uuidv4 } from 'uuid'
 import { useStore } from '../useStore'
-import { getNormalisedCoordinates, roundOff } from '../lib/utils'
+import { getNormalisedCoordinates } 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 {
-  addCloseToPipe,
-  addNewSketchLn,
-  compareVec2Epsilon,
-} from 'lang/std/sketch'
 import { getNodeFromPath } from 'lang/queryAst'
-import {
-  Program,
-  VariableDeclarator,
-  rangeTypeFix,
-  modifyAstForSketch,
-} from 'lang/wasm'
-import { KCLError } from 'lang/errors'
-import { KclError as RustKclError } from '../wasm-lib/kcl/bindings/KclError'
+import { VariableDeclarator, recast, CallExpression } from 'lang/wasm'
 import { engineCommandManager } from '../lang/std/engineConnection'
+import { useModelingContext } from 'hooks/useModelingContext'
+import { kclManager, useKclContext } from 'lang/KclSinglton'
+import { changeSketchArguments } from 'lang/std/sketch'
 
 export const Stream = ({ className = '' }) => {
   const [isLoading, setIsLoading] = useState(true)
@@ -40,31 +30,17 @@ export const Stream = ({ className = '' }) => {
     didDragInStream,
     setDidDragInStream,
     streamDimensions,
-    isExecuting,
-    guiMode,
-    ast,
-    updateAst,
-    setGuiMode,
-    programMemory,
   } = useStore((s) => ({
     mediaStream: s.mediaStream,
     setButtonDownInStream: s.setButtonDownInStream,
-    fileId: s.fileId,
     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()
+  const { settings } = useGlobalStateContext()
+  const cameraControls = settings?.context?.cameraControls
+  const { send, state, context } = useModelingContext()
+  const { isExecuting } = useKclContext()
 
   useEffect(() => {
     if (
@@ -108,7 +84,13 @@ export const Stream = ({ className = '' }) => {
       interaction = 'zoom'
     }
 
-    if (guiMode.mode === 'sketch' && guiMode.sketchMode === ('move' as any)) {
+    if (state.matches('Sketch.Move Tool')) {
+      if (
+        state.matches('Sketch.Move Tool.No move') ||
+        state.matches('Sketch.Move Tool.Move with execute')
+      ) {
+        return
+      }
       engineCommandManager.sendSceneCommand({
         type: 'modeling_cmd_req',
         cmd: {
@@ -117,12 +99,7 @@ export const Stream = ({ className = '' }) => {
         },
         cmd_id: newId,
       })
-    } else if (
-      !(
-        guiMode.mode === 'sketch' &&
-        guiMode.sketchMode === ('sketch_line' as any)
-      )
-    ) {
+    } else if (!state.matches('Sketch.Line Tool')) {
       engineCommandManager.sendSceneCommand({
         type: 'modeling_cmd_req',
         cmd: {
@@ -178,200 +155,209 @@ export const Stream = ({ className = '' }) => {
       cmd_id: newCmdId,
     }
 
-    if (!didDragInStream) {
-      engineCommandManager.sendSceneCommand({
-        type: 'modeling_cmd_req',
-        cmd: {
-          type: 'select_with_point',
-          selection_type: 'add',
-          selected_at_window: { x, y },
-        },
-        cmd_id: uuidv4(),
-      })
-    }
-
-    if (!didDragInStream && guiMode.mode === 'default') {
+    if (!didDragInStream && state.matches('Sketch no face')) {
       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))
-    ) {
+      engineCommandManager.sendSceneCommand(command)
+    } else if (!didDragInStream && state.matches('Sketch.Line Tool')) {
       command.cmd = {
         type: 'mouse_click',
         window: { x, y },
       }
+      engineCommandManager.sendSceneCommand(command).then(async (resp) => {
+        const entities_modified = resp?.data?.data?.entities_modified
+        if (!entities_modified) return
+        if (state.matches('Sketch.Line Tool.No Points')) {
+          send('Add point')
+        } else if (state.matches('Sketch.Line Tool.Point Added')) {
+          const curve = await engineCommandManager.sendSceneCommand({
+            type: 'modeling_cmd_req',
+            cmd_id: uuidv4(),
+            cmd: {
+              type: 'curve_get_control_points',
+              curve_id: entities_modified[0],
+            },
+          })
+          const coords: { x: number; y: number }[] =
+            curve.data.data.control_points
+          // We need the normal for the plane we are on.
+          const plane = await engineCommandManager.sendSceneCommand({
+            type: 'modeling_cmd_req',
+            cmd_id: uuidv4(),
+            cmd: {
+              type: 'get_sketch_mode_plane',
+            },
+          })
+          const z_axis = plane.data.data.z_axis
+
+          // Get the current axis.
+          let currentAxis: 'xy' | 'xz' | 'yz' | '-xy' | '-xz' | '-yz' | null =
+            null
+          if (context.sketchPlaneId === kclManager.getPlaneId('xy')) {
+            if (z_axis.z === -1) {
+              currentAxis = '-xy'
+            } else {
+              currentAxis = 'xy'
+            }
+          } else if (context.sketchPlaneId === kclManager.getPlaneId('yz')) {
+            if (z_axis.x === -1) {
+              currentAxis = '-yz'
+            } else {
+              currentAxis = 'yz'
+            }
+          } else if (context.sketchPlaneId === kclManager.getPlaneId('xz')) {
+            if (z_axis.y === -1) {
+              currentAxis = '-xz'
+            } else {
+              currentAxis = 'xz'
+            }
+          }
+
+          send({
+            type: 'Add point',
+            data: {
+              coords,
+              axis: currentAxis,
+              segmentId: entities_modified[0],
+            },
+          })
+        } else if (state.matches('Sketch.Line Tool.Segment Added')) {
+          const curve = await engineCommandManager.sendSceneCommand({
+            type: 'modeling_cmd_req',
+            cmd_id: uuidv4(),
+            cmd: {
+              type: 'curve_get_control_points',
+              curve_id: entities_modified[0],
+            },
+          })
+          const coords: { x: number; y: number }[] =
+            curve.data.data.control_points
+          send({
+            type: 'Add point',
+            data: { coords, axis: null, segmentId: entities_modified[0] },
+          })
+        }
+      })
     } else if (
-      guiMode.mode === 'sketch' &&
-      guiMode.sketchMode === ('move' as any)
+      !didDragInStream &&
+      (state.matches('Sketch.SketchIdle') ||
+        state.matches('idle') ||
+        state.matches('awaiting selection'))
     ) {
+      command.cmd = {
+        type: 'select_with_point',
+        selected_at_window: { x, y },
+        selection_type: 'add',
+      }
+      engineCommandManager.sendSceneCommand(command)
+    } else if (!didDragInStream && state.matches('Sketch.Move Tool')) {
+      command.cmd = {
+        type: 'select_with_point',
+        selected_at_window: { x, y },
+        selection_type: 'add',
+      }
+      engineCommandManager.sendSceneCommand(command)
+    } else if (didDragInStream && state.matches('Sketch.Move Tool')) {
       command.cmd = {
         type: 'handle_mouse_drag_end',
         window: { x, y },
       }
-    }
-    engineCommandManager.sendSceneCommand(command).then(async (resp) => {
-      if (!(guiMode.mode === 'sketch')) return
-
-      if (guiMode.sketchMode === 'selectFace') return
-
-      // Check if the sketch group already exists.
-      const varDec = getNodeFromPath<VariableDeclarator>(
-        ast,
-        guiMode.pathToNode,
+      engineCommandManager.sendSceneCommand(command).then(async () => {
+        if (!context.sketchPathToNode) return
+        getNodeFromPath<VariableDeclarator>(
+          kclManager.ast,
+          context.sketchPathToNode,
           'VariableDeclarator'
+        )
+        // Get the current plane string for plane we are on.
+        let currentPlaneString = ''
+        if (context.sketchPlaneId === kclManager.getPlaneId('xy')) {
+          currentPlaneString = 'XY'
+        } else if (context.sketchPlaneId === kclManager.getPlaneId('yz')) {
+          currentPlaneString = 'YZ'
+        } else if (context.sketchPlaneId === kclManager.getPlaneId('xz')) {
+          currentPlaneString = 'XZ'
+        }
+
+        // Do not supporting editing/moving lines on a non-default plane.
+        // Eventually we can support this but for now we will just throw an
+        // error.
+        if (currentPlaneString === '') return
+
+        const pathInfo = await engineCommandManager.sendSceneCommand({
+          type: 'modeling_cmd_req',
+          cmd_id: uuidv4(),
+          cmd: {
+            type: 'path_get_info',
+            path_id: context.sketchEnginePathId,
+          },
+        })
+        const segmentsWithMappings = (
+          pathInfo?.data?.data?.segments as { command_id: string }[]
+        )
+          .filter(({ command_id }) => {
+            return command_id && engineCommandManager.artifactMap[command_id]
+          })
+          .map(({ command_id }) => command_id)
+        const segment2dInfo = await Promise.all(
+          segmentsWithMappings.map(async (segmentId) => {
+            const response = await engineCommandManager.sendSceneCommand({
+              type: 'modeling_cmd_req',
+              cmd_id: uuidv4(),
+              cmd: {
+                type: 'curve_get_control_points',
+                curve_id: segmentId,
+              },
+            })
+            const controlPoints: [
+              { x: number; y: number },
+              { x: number; y: number }
+            ] = response.data.data.control_points
+            return {
+              controlPoints,
+              segmentId,
+            }
+          })
+        )
+
+        let modifiedAst = { ...kclManager.ast }
+        let code = kclManager.code
+        for (const controlPoint of segment2dInfo) {
+          const range =
+            engineCommandManager.artifactMap[controlPoint.segmentId].range
+          if (!range) continue
+          const from = controlPoint.controlPoints[0]
+          const to = controlPoint.controlPoints[1]
+          const modded = changeSketchArguments(
+            modifiedAst,
+            kclManager.programMemory,
+            range,
+            [to.x, to.y],
+            [from.x, from.y]
+          )
+          modifiedAst = modded.modifiedAst
+
+          // update artifact map ranges now that we have updated the ast.
+          code = recast(modded.modifiedAst)
+          const astWithCurrentRanges = kclManager.safeParse(code)
+          if (!astWithCurrentRanges) return
+          const updateNode = getNodeFromPath<CallExpression>(
+            astWithCurrentRanges,
+            modded.pathToNode
           ).node
-      const variableName = varDec?.id?.name
-      const sketchGroup = programMemory.root[variableName]
-      const isEditingExistingSketch =
-        sketchGroup?.type === 'SketchGroup' && sketchGroup.value.length
-      let sketchGroupId = ''
-      if (sketchGroup && sketchGroup.type === 'SketchGroup') {
-        sketchGroupId = sketchGroup.id
-      }
-
-      if (
-        guiMode.sketchMode === ('move' as any as 'line') &&
-        command.cmd.type === 'handle_mouse_drag_end'
-      ) {
-        // Let's get the updated ast.
-        if (sketchGroupId === '') return
-        // We have a problem if we do not have an id for the sketch group.
-        if (
-          guiMode.pathId === undefined ||
-          guiMode.pathId === null ||
-          guiMode.pathId === ''
-        )
-          return
-
-        let engineId = guiMode.pathId
-
-        const updatedAst: Program = await modifyAstForSketch(
-          engineCommandManager,
-          ast,
-          variableName,
-          engineId
-        )
-
-        updateAst(updatedAst, false)
-        return
-      }
-
-      if (command?.cmd?.type !== 'mouse_click' || !ast) return
-
-      if (!(guiMode.sketchMode === ('sketch_line' as any as 'line'))) return
-
-      if (
-        resp?.data?.data?.entities_modified?.length &&
-        guiMode.waitingFirstClick &&
-        !isEditingExistingSketch
-      ) {
-        const curve = await engineCommandManager.sendSceneCommand({
-          type: 'modeling_cmd_req',
-          cmd_id: uuidv4(),
-          cmd: {
-            type: 'curve_get_control_points',
-            curve_id: resp?.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),
+          engineCommandManager.artifactMap[controlPoint.segmentId].range = [
+            updateNode.start,
+            updateNode.end,
           ]
-        )
-        const _modifiedAst = _addStartSketch.modifiedAst
-        const _pathToNode = _addStartSketch.pathToNode
-
-        // We need to update the guiMode with the right pathId so that we can
-        // move lines later and send the right sketch id to the engine.
-        for (const [id, artifact] of Object.entries(
-          engineCommandManager.artifactMap
-        )) {
-          if (artifact.commandType === 'start_path') {
-            guiMode.pathId = id
-          }
         }
 
-        setGuiMode({
-          ...guiMode,
-          pathToNode: _pathToNode,
-          waitingFirstClick: false,
+        kclManager.executeAstMock(modifiedAst, true)
       })
-        updateAst(_modifiedAst, false)
-      } else if (
-        resp?.data?.data?.entities_modified?.length &&
-        (!guiMode.waitingFirstClick || isEditingExistingSketch)
-      ) {
-        const curve = await engineCommandManager.sendSceneCommand({
-          type: 'modeling_cmd_req',
-          cmd_id: uuidv4(),
-          cmd: {
-            type: 'curve_get_control_points',
-            curve_id: resp?.data?.data?.entities_modified[0],
-          },
-        })
-        const coords: { x: number; y: number }[] =
-          curve.data.data.control_points
-
-        const { node: varDec } = getNodeFromPath<VariableDeclarator>(
-          ast,
-          guiMode.pathToNode,
-          'VariableDeclarator'
-        )
-        const variableName = varDec.id.name
-        const sketchGroup = programMemory.root[variableName]
-        if (!sketchGroup || sketchGroup.type !== 'SketchGroup') return
-        const initialCoords = sketchGroup.value[0].from
-
-        const isClose = compareVec2Epsilon(initialCoords, [
-          coords[1].x,
-          coords[1].y,
-        ])
-
-        let _modifiedAst: Program
-        if (!isClose) {
-          _modifiedAst = addNewSketchLn({
-            node: ast,
-            programMemory,
-            to: [coords[1].x, coords[1].y],
-            fnName: 'line',
-            pathToNode: guiMode.pathToNode,
-          }).modifiedAst
-          updateAst(_modifiedAst, false)
-        } else {
-          _modifiedAst = addCloseToPipe({
-            node: ast,
-            programMemory,
-            pathToNode: guiMode.pathToNode,
-          })
-          setGuiMode({
-            mode: 'default',
-          })
-          engineCommandManager.sendSceneCommand({
-            type: 'modeling_cmd_req',
-            cmd_id: uuidv4(),
-            cmd: { type: 'edit_mode_exit' },
-          })
-          engineCommandManager.sendSceneCommand({
-            type: 'modeling_cmd_req',
-            cmd_id: uuidv4(),
-            cmd: { type: 'default_camera_disable_sketch_mode' },
-          })
-          updateAst(_modifiedAst, true)
     }
-      }
-    })
+
     setDidDragInStream(false)
     setClickCoords(undefined)
   }
@@ -402,8 +388,8 @@ export const Stream = ({ className = '' }) => {
         onWheel={handleScroll}
         onPlay={() => setIsLoading(false)}
         onMouseMoveCapture={handleMouseMove}
+        className={`w-full cursor-pointer h-full ${isExecuting && 'blur-md'}`}
         disablePictureInPicture
-        className={`w-full h-full ${isExecuting && 'blur-md'}`}
         style={{ transitionDuration: '200ms', transitionProperty: 'filter' }}
       />
       {isLoading && (

src/components/TextEditor.tsx

@@ -13,24 +13,18 @@ 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 { useStore } from 'useStore'
+import { processCodeMirrorRanges } from 'lib/selections'
 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, roundOff } from 'lib/utils'
+import { EditorView, lineHighlightField } from 'editor/highlightextension'
+import { roundOff } from 'lib/utils'
 import { kclErrToDiagnostic } from 'lang/errors'
 import { CSSRuleObject } from 'tailwindcss/types/config'
+import { useModelingContext } from 'hooks/useModelingContext'
 import interact from '@replit/codemirror-interact'
 import { engineCommandManager } from '../lang/std/engineConnection'
+import { kclManager, useKclContext } from 'lang/KclSinglton'
 
 export const editorShortcutMeta = {
   formatCode: {
@@ -48,36 +42,22 @@ export const TextEditor = ({
 }: {
   theme: Themes.Light | Themes.Dark
 }) => {
-  const pathParams = useParams()
-  const {
-    code,
-    deferredSetCode,
-    editorView,
-    formatCode,
-    isLSPServerReady,
-    selectionRanges,
-    selectionRangeTypeMap,
-    setEditorView,
-    setIsLSPServerReady,
-    setSelectionRanges,
-  } = useStore((s) => ({
-    code: s.code,
-    deferredSetCode: s.deferredSetCode,
+  const { editorView, isLSPServerReady, setEditorView, setIsLSPServerReady } =
+    useStore((s) => ({
       editorView: s.editorView,
-    formatCode: s.formatCode,
       isLSPServerReady: s.isLSPServerReady,
-    selectionRanges: s.selectionRanges,
-    selectionRangeTypeMap: s.selectionRangeTypeMap,
       setEditorView: s.setEditorView,
       setIsLSPServerReady: s.setIsLSPServerReady,
-    setSelectionRanges: s.setSelectionRanges,
     }))
+  const { code, errors } = useKclContext()
 
   const {
-    settings: {
-      context: { textWrapping },
-    },
-  } = useGlobalStateContext()
+    context: { selectionRanges, selectionRangeTypeMap },
+    send,
+  } = useModelingContext()
+
+  const { settings: { context: { textWrapping } = {} } = {} } =
+    useGlobalStateContext()
   const { setCommandBarOpen } = useCommandsContext()
   const { enable: convertEnabled, handleClick: convertCallback } =
     useConvertToVariable()
@@ -103,7 +83,7 @@ export const TextEditor = ({
   // 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 :)
+  // a good setup because 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
@@ -122,78 +102,24 @@ export const TextEditor = ({
   }, [lspClient, isLSPServerReady])
 
   // const onChange = React.useCallback((value: string, viewUpdate: ViewUpdate) => {
-  const onChange = (value: string, viewUpdate: ViewUpdate) => {
-    deferredSetCode(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 onChange = (newCode: string) => {
+    kclManager.setCodeAndExecute(newCode)
   } //, []);
   const onUpdate = (viewUpdate: ViewUpdate) => {
     if (!editorView) {
       setEditorView(viewUpdate.view)
     }
-    const ranges = viewUpdate.state.selection.ranges
+    const eventInfo = processCodeMirrorRanges({
+      codeMirrorRanges: viewUpdate.state.selection.ranges,
+      selectionRanges,
+      selectionRangeTypeMap,
+    })
+    if (!eventInfo) return
 
-    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]
+    send(eventInfo.modelingEvent)
+    eventInfo.engineEvents.forEach((event) =>
+      engineCommandManager.sendSceneCommand(event)
     )
-      })
-
-    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(
-          engineCommandManager.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(() => {
@@ -210,7 +136,7 @@ export const TextEditor = ({
         {
           key: editorShortcutMeta.formatCode.codeMirror,
           run: () => {
-            formatCode()
+            kclManager.format()
             return true
           },
         },
@@ -234,7 +160,7 @@ export const TextEditor = ({
       extensions.push(
         lintGutter(),
         linter((_view) => {
-          return kclErrToDiagnostic(useStore.getState().kclErrors)
+          return kclErrToDiagnostic(errors)
         }),
         interact({
           rules: [
@@ -273,7 +199,7 @@ export const TextEditor = ({
     }
 
     return extensions
-  }, [kclLSP, textWrapping])
+  }, [kclLSP, textWrapping, convertCallback])
 
   return (
     <div

src/components/Toolbar/EqualAngle.tsx

@@ -1,44 +1,33 @@
-import { useState, useEffect } from 'react'
-import { toolTips, useStore } from '../../useStore'
-import { Value, VariableDeclarator } from '../../lang/wasm'
+import { toolTips } from '../../useStore'
+import { Selections } from 'lib/selections'
+import { Program, Value, VariableDeclarator } from '../../lang/wasm'
 import {
   getNodePathFromSourceRange,
   getNodeFromPath,
 } from '../../lang/queryAst'
 import { isSketchVariablesLinked } from '../../lang/std/sketchConstraints'
 import {
-  TransformInfo,
   transformSecondarySketchLinesTagFirst,
   getTransformInfos,
+  PathToNodeMap,
 } from '../../lang/std/sketchcombos'
-import { updateCursors } from '../../lang/util'
-import { ActionIcon } from 'components/ActionIcon'
-import { sketchButtonClassnames } from 'Toolbar'
+import { kclManager } from 'lang/KclSinglton'
 
-export const EqualAngle = () => {
-  const { guiMode, selectionRanges, ast, programMemory, updateAst, setCursor } =
-    useStore((s) => ({
-      guiMode: s.guiMode,
-      ast: s.ast,
-      updateAst: s.updateAst,
-      selectionRanges: s.selectionRanges,
-      programMemory: s.programMemory,
-      setCursor: s.setCursor,
-    }))
-  const [enableEqual, setEnableEqual] = useState(false)
-  const [transformInfos, setTransformInfos] = useState<TransformInfo[]>()
-  useEffect(() => {
-    if (!ast) return
+export function equalAngleInfo({
+  selectionRanges,
+}: {
+  selectionRanges: Selections
+}) {
   const paths = selectionRanges.codeBasedSelections.map(({ range }) =>
-      getNodePathFromSourceRange(ast, range)
+    getNodePathFromSourceRange(kclManager.ast, range)
   )
   const nodes = paths.map(
-      (pathToNode) => getNodeFromPath<Value>(ast, pathToNode).node
+    (pathToNode) => getNodeFromPath<Value>(kclManager.ast, pathToNode).node
   )
   const varDecs = paths.map(
     (pathToNode) =>
       getNodeFromPath<VariableDeclarator>(
-          ast,
+        kclManager.ast,
         pathToNode,
         'VariableDeclarator'
       )?.node
@@ -46,7 +35,7 @@ export const EqualAngle = () => {
   const primaryLine = varDecs[0]
   const secondaryVarDecs = varDecs.slice(1)
   const isOthersLinkedToPrimary = secondaryVarDecs.every((secondary) =>
-      isSketchVariablesLinked(secondary, primaryLine, ast)
+    isSketchVariablesLinked(secondary, primaryLine, kclManager.ast)
   )
   const isAllTooltips = nodes.every(
     (node) =>
@@ -54,52 +43,37 @@ export const EqualAngle = () => {
       toolTips.includes(node.callee.name as any)
   )
 
-    const theTransforms = getTransformInfos(
+  const transforms = getTransformInfos(
     {
       ...selectionRanges,
       codeBasedSelections: selectionRanges.codeBasedSelections.slice(1),
     },
-      ast,
+    kclManager.ast,
     'equalAngle'
   )
-    setTransformInfos(theTransforms)
 
-    const _enableEqual =
+  const enabled =
     !!secondaryVarDecs.length &&
     isAllTooltips &&
     isOthersLinkedToPrimary &&
-      theTransforms.every(Boolean)
-    setEnableEqual(_enableEqual)
-  }, [guiMode, selectionRanges])
-  if (guiMode.mode !== 'sketch') return null
-
-  return (
-    <button
-      onClick={async () => {
-        if (!(transformInfos && ast)) return
-        const { modifiedAst, pathToNodeMap } =
-          transformSecondarySketchLinesTagFirst({
-            ast,
-            selectionRanges,
-            transformInfos,
-            programMemory,
-          })
-        updateAst(modifiedAst, true, {
-          callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
-        })
-      }}
-      disabled={!enableEqual}
-      title="Parallel (or equal angle)"
-      className="group"
-    >
-      <ActionIcon
-        icon="parallel"
-        className="!p-0.5"
-        bgClassName={sketchButtonClassnames.background}
-        iconClassName={sketchButtonClassnames.icon}
-        size="md"
-      />
-      Parallel
-    </button>
-  )
+    transforms.every(Boolean)
+  return { enabled, transforms }
+}
+
+export function applyConstraintEqualAngle({
+  selectionRanges,
+}: {
+  selectionRanges: Selections
+}): {
+  modifiedAst: Program
+  pathToNodeMap: PathToNodeMap
+} {
+  const { transforms } = equalAngleInfo({ selectionRanges })
+  const { modifiedAst, pathToNodeMap } = transformSecondarySketchLinesTagFirst({
+    ast: kclManager.ast,
+    selectionRanges,
+    transformInfos: transforms,
+    programMemory: kclManager.programMemory,
+  })
+  return { modifiedAst, pathToNodeMap }
 }

src/components/Toolbar/EqualLength.tsx

@@ -1,44 +1,33 @@
-import { useState, useEffect } from 'react'
-import { toolTips, useStore } from '../../useStore'
-import { Value, VariableDeclarator } from '../../lang/wasm'
+import { toolTips } from '../../useStore'
+import { Selections } from 'lib/selections'
+import { Program, Value, VariableDeclarator } from '../../lang/wasm'
 import {
   getNodePathFromSourceRange,
   getNodeFromPath,
 } from '../../lang/queryAst'
 import { isSketchVariablesLinked } from '../../lang/std/sketchConstraints'
 import {
-  TransformInfo,
   transformSecondarySketchLinesTagFirst,
   getTransformInfos,
+  PathToNodeMap,
 } from '../../lang/std/sketchcombos'
-import { updateCursors } from '../../lang/util'
-import { ActionIcon } from 'components/ActionIcon'
-import { sketchButtonClassnames } from 'Toolbar'
+import { kclManager } from 'lang/KclSinglton'
 
-export const EqualLength = () => {
-  const { guiMode, selectionRanges, ast, programMemory, updateAst, setCursor } =
-    useStore((s) => ({
-      guiMode: s.guiMode,
-      ast: s.ast,
-      updateAst: s.updateAst,
-      selectionRanges: s.selectionRanges,
-      programMemory: s.programMemory,
-      setCursor: s.setCursor,
-    }))
-  const [enableEqual, setEnableEqual] = useState(false)
-  const [transformInfos, setTransformInfos] = useState<TransformInfo[]>()
-  useEffect(() => {
-    if (!ast) return
+export function setEqualLengthInfo({
+  selectionRanges,
+}: {
+  selectionRanges: Selections
+}) {
   const paths = selectionRanges.codeBasedSelections.map(({ range }) =>
-      getNodePathFromSourceRange(ast, range)
+    getNodePathFromSourceRange(kclManager.ast, range)
   )
   const nodes = paths.map(
-      (pathToNode) => getNodeFromPath<Value>(ast, pathToNode).node
+    (pathToNode) => getNodeFromPath<Value>(kclManager.ast, pathToNode).node
   )
   const varDecs = paths.map(
     (pathToNode) =>
       getNodeFromPath<VariableDeclarator>(
-          ast,
+        kclManager.ast,
         pathToNode,
         'VariableDeclarator'
       )?.node
@@ -46,7 +35,7 @@ export const EqualLength = () => {
   const primaryLine = varDecs[0]
   const secondaryVarDecs = varDecs.slice(1)
   const isOthersLinkedToPrimary = secondaryVarDecs.every((secondary) =>
-      isSketchVariablesLinked(secondary, primaryLine, ast)
+    isSketchVariablesLinked(secondary, primaryLine, kclManager.ast)
   )
   const isAllTooltips = nodes.every(
     (node) =>
@@ -54,52 +43,41 @@ export const EqualLength = () => {
       toolTips.includes(node.callee.name as any)
   )
 
-    const theTransforms = getTransformInfos(
+  const transforms = getTransformInfos(
     {
       ...selectionRanges,
       codeBasedSelections: selectionRanges.codeBasedSelections.slice(1),
     },
-      ast,
+    kclManager.ast,
     'equalLength'
   )
-    setTransformInfos(theTransforms)
 
-    const _enableEqual =
+  const enabled =
     !!secondaryVarDecs.length &&
     isAllTooltips &&
     isOthersLinkedToPrimary &&
-      theTransforms.every(Boolean)
-    setEnableEqual(_enableEqual)
-  }, [guiMode, selectionRanges])
-  if (guiMode.mode !== 'sketch') return null
+    transforms.every(Boolean)
 
-  return (
-    <button
-      onClick={() => {
-        if (!(transformInfos && ast)) return
-        const { modifiedAst, pathToNodeMap } =
-          transformSecondarySketchLinesTagFirst({
-            ast,
-            selectionRanges,
-            transformInfos,
-            programMemory,
-          })
-        updateAst(modifiedAst, true, {
-          callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
-        })
-      }}
-      disabled={!enableEqual}
-      className="group"
-      title="Equal Length"
-    >
-      <ActionIcon
-        icon="equal"
-        className="!p-0.5"
-        bgClassName={sketchButtonClassnames.background}
-        iconClassName={sketchButtonClassnames.icon}
-        size="md"
-      />
-      Equal Length
-    </button>
-  )
+  return { enabled, transforms }
+}
+
+export function applyConstraintEqualLength({
+  selectionRanges,
+}: {
+  selectionRanges: Selections
+}): {
+  modifiedAst: Program
+  pathToNodeMap: PathToNodeMap
+} {
+  const { transforms } = setEqualLengthInfo({ selectionRanges })
+  const { modifiedAst, pathToNodeMap } = transformSecondarySketchLinesTagFirst({
+    ast: kclManager.ast,
+    selectionRanges,
+    transformInfos: transforms,
+    programMemory: kclManager.programMemory,
+  })
+  return { modifiedAst, pathToNodeMap }
+  // kclManager.updateAst(modifiedAst, true, {
+  //   // callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
+  // })
 }

src/components/Toolbar/HorzVert.tsx

@@ -1,42 +1,26 @@
-import { useState, useEffect } from 'react'
-import { toolTips, useStore } from '../../useStore'
-import { Value } from '../../lang/wasm'
+import { toolTips } from '../../useStore'
+import { Selections } from 'lib/selections'
+import { Program, ProgramMemory, Value } from '../../lang/wasm'
 import {
   getNodePathFromSourceRange,
   getNodeFromPath,
 } from '../../lang/queryAst'
 import {
-  TransformInfo,
+  PathToNodeMap,
   getTransformInfos,
   transformAstSketchLines,
 } from '../../lang/std/sketchcombos'
-import { updateCursors } from '../../lang/util'
-import { ActionIcon } from 'components/ActionIcon'
-import { sketchButtonClassnames } from 'Toolbar'
+import { kclManager } from 'lang/KclSinglton'
 
-export const HorzVert = ({
-  horOrVert,
-}: {
+export function horzVertInfo(
+  selectionRanges: Selections,
   horOrVert: 'vertical' | 'horizontal'
-}) => {
-  const { guiMode, selectionRanges, ast, programMemory, updateAst, setCursor } =
-    useStore((s) => ({
-      guiMode: s.guiMode,
-      ast: s.ast,
-      updateAst: s.updateAst,
-      selectionRanges: s.selectionRanges,
-      programMemory: s.programMemory,
-      setCursor: s.setCursor,
-    }))
-  const [enableHorz, setEnableHorz] = useState(false)
-  const [transformInfos, setTransformInfos] = useState<TransformInfo[]>()
-  useEffect(() => {
-    if (!ast) return
+) {
   const paths = selectionRanges.codeBasedSelections.map(({ range }) =>
-      getNodePathFromSourceRange(ast, range)
+    getNodePathFromSourceRange(kclManager.ast, range)
   )
   const nodes = paths.map(
-      (pathToNode) => getNodeFromPath<Value>(ast, pathToNode).node
+    (pathToNode) => getNodeFromPath<Value>(kclManager.ast, pathToNode).node
   )
   const isAllTooltips = nodes.every(
     (node) =>
@@ -44,41 +28,30 @@ export const HorzVert = ({
       toolTips.includes(node.callee.name as any)
   )
 
-    const theTransforms = getTransformInfos(selectionRanges, ast, horOrVert)
-    setTransformInfos(theTransforms)
-
+  const theTransforms = getTransformInfos(
+    selectionRanges,
+    kclManager.ast,
+    horOrVert
+  )
   const _enableHorz = isAllTooltips && theTransforms.every(Boolean)
-    setEnableHorz(_enableHorz)
-  }, [guiMode, selectionRanges])
-  if (guiMode.mode !== 'sketch') return null
+  return { enabled: _enableHorz, transforms: theTransforms }
+}
 
-  return (
-    <button
-      onClick={() => {
-        if (!transformInfos || !ast) return
-        const { modifiedAst, pathToNodeMap } = transformAstSketchLines({
+export function applyConstraintHorzVert(
+  selectionRanges: Selections,
+  horOrVert: 'vertical' | 'horizontal',
+  ast: Program,
+  programMemory: ProgramMemory
+): {
+  modifiedAst: Program
+  pathToNodeMap: PathToNodeMap
+} {
+  const transformInfos = horzVertInfo(selectionRanges, horOrVert).transforms
+  return transformAstSketchLines({
     ast,
     selectionRanges,
     transformInfos,
     programMemory,
     referenceSegName: '',
   })
-        updateAst(modifiedAst, true, {
-          callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
-        })
-      }}
-      disabled={!enableHorz}
-      className="group"
-      title={horOrVert === 'horizontal' ? 'Horizontal' : 'Vertical'}
-    >
-      <ActionIcon
-        icon={horOrVert === 'horizontal' ? 'horizontal' : 'vertical'}
-        className="!p-0.5"
-        bgClassName={sketchButtonClassnames.background}
-        iconClassName={sketchButtonClassnames.icon}
-        size="md"
-      />
-      {horOrVert === 'horizontal' ? 'Horizontal' : 'Vertical'}
-    </button>
-  )
 }

src/components/Toolbar/Intersect.tsx

@@ -1,7 +1,6 @@
-import { useState, useEffect } from 'react'
-import { create } from 'react-modal-promise'
-import { toolTips, useStore } from '../../useStore'
-import { BinaryPart, Value, VariableDeclarator } from '../../lang/wasm'
+import { toolTips } from '../../useStore'
+import { Selections } from 'lib/selections'
+import { BinaryPart, Program, Value, VariableDeclarator } from '../../lang/wasm'
 import {
   getNodePathFromSourceRange,
   getNodeFromPath,
@@ -9,44 +8,35 @@ import {
 } from '../../lang/queryAst'
 import { isSketchVariablesLinked } from '../../lang/std/sketchConstraints'
 import {
-  TransformInfo,
   transformSecondarySketchLinesTagFirst,
   getTransformInfos,
+  PathToNodeMap,
 } from '../../lang/std/sketchcombos'
-import { GetInfoModal } from '../SetHorVertDistanceModal'
+import { GetInfoModal, createInfoModal } from '../SetHorVertDistanceModal'
 import { createVariableDeclaration } from '../../lang/modifyAst'
 import { removeDoubleNegatives } from '../AvailableVarsHelpers'
-import { updateCursors } from '../../lang/util'
+import { kclManager } from 'lang/KclSinglton'
 
-const getModalInfo = create(GetInfoModal as any)
+const getModalInfo = createInfoModal(GetInfoModal)
 
-export const Intersect = () => {
-  const { guiMode, selectionRanges, ast, programMemory, updateAst, setCursor } =
-    useStore((s) => ({
-      guiMode: s.guiMode,
-      ast: s.ast,
-      updateAst: s.updateAst,
-      selectionRanges: s.selectionRanges,
-      programMemory: s.programMemory,
-      setCursor: s.setCursor,
-    }))
-  const [enable, setEnable] = useState(false)
-  const [transformInfos, setTransformInfos] = useState<TransformInfo[]>()
-  const [forecdSelectionRanges, setForcedSelectionRanges] =
-    useState<typeof selectionRanges>()
-  useEffect(() => {
-    if (!ast) return
+export function intersectInfo({
+  selectionRanges,
+}: {
+  selectionRanges: Selections
+}) {
   if (selectionRanges.codeBasedSelections.length < 2) {
-      setEnable(false)
-      setForcedSelectionRanges({ ...selectionRanges })
-      return
+    return {
+      enabled: false,
+      transforms: [],
+      forcedSelectionRanges: { ...selectionRanges },
+    }
   }
 
   const previousSegment =
     selectionRanges.codeBasedSelections.length > 1 &&
     isLinesParallelAndConstrained(
-        ast,
-        programMemory,
+      kclManager.ast,
+      kclManager.programMemory,
       selectionRanges.codeBasedSelections[0],
       selectionRanges.codeBasedSelections[1]
     )
@@ -67,18 +57,17 @@ export const Intersect = () => {
         : selectionRanges.codeBasedSelections?.[1],
     ],
   }
-    setForcedSelectionRanges(_forcedSelectionRanges)
 
   const paths = _forcedSelectionRanges.codeBasedSelections.map(({ range }) =>
-      getNodePathFromSourceRange(ast, range)
+    getNodePathFromSourceRange(kclManager.ast, range)
   )
   const nodes = paths.map(
-      (pathToNode) => getNodeFromPath<Value>(ast, pathToNode).node
+    (pathToNode) => getNodeFromPath<Value>(kclManager.ast, pathToNode).node
   )
   const varDecs = paths.map(
     (pathToNode) =>
       getNodeFromPath<VariableDeclarator>(
-          ast,
+        kclManager.ast,
         pathToNode,
         'VariableDeclarator'
       )?.node
@@ -86,7 +75,7 @@ export const Intersect = () => {
   const primaryLine = varDecs[0]
   const secondaryVarDecs = varDecs.slice(1)
   const isOthersLinkedToPrimary = secondaryVarDecs.every((secondary) =>
-      isSketchVariablesLinked(secondary, primaryLine, ast)
+    isSketchVariablesLinked(secondary, primaryLine, kclManager.ast)
   )
   const isAllTooltips = nodes.every(
     (node) =>
@@ -100,13 +89,11 @@ export const Intersect = () => {
   const theTransforms = getTransformInfos(
     {
       ...selectionRanges,
-        codeBasedSelections:
-          _forcedSelectionRanges.codeBasedSelections.slice(1),
+      codeBasedSelections: _forcedSelectionRanges.codeBasedSelections.slice(1),
     },
-      ast,
+    kclManager.ast,
     'intersect'
   )
-    setTransformInfos(theTransforms)
 
   const _enableEqual =
     secondaryVarDecs.length === 1 &&
@@ -114,20 +101,31 @@ export const Intersect = () => {
     isOthersLinkedToPrimary &&
     theTransforms.every(Boolean) &&
     _forcedSelectionRanges?.codeBasedSelections?.[1]?.type === 'line-end'
-    setEnable(_enableEqual)
-  }, [guiMode, selectionRanges])
-  if (guiMode.mode !== 'sketch') return null
 
-  return (
-    <button
-      onClick={async () => {
-        if (!(transformInfos && ast && forecdSelectionRanges)) return
+  return {
+    enabled: _enableEqual,
+    transforms: theTransforms,
+    forcedSelectionRanges: _forcedSelectionRanges,
+  }
+}
+
+export async function applyConstraintIntersect({
+  selectionRanges,
+}: {
+  selectionRanges: Selections
+}): Promise<{
+  modifiedAst: Program
+  pathToNodeMap: PathToNodeMap
+}> {
+  const { transforms, forcedSelectionRanges } = intersectInfo({
+    selectionRanges,
+  })
   const { modifiedAst, tagInfo, valueUsedInTransform, pathToNodeMap } =
     transformSecondarySketchLinesTagFirst({
-            ast: JSON.parse(JSON.stringify(ast)),
-            selectionRanges: forecdSelectionRanges,
-            transformInfos,
-            programMemory,
+      ast: JSON.parse(JSON.stringify(kclManager.ast)),
+      selectionRanges: forcedSelectionRanges,
+      transformInfos: transforms,
+      programMemory: kclManager.programMemory,
     })
   const {
     segName,
@@ -136,36 +134,30 @@ export const Intersect = () => {
     variableName,
     newVariableInsertIndex,
     sign,
-        }: {
-          segName: string
-          value: number
-          valueNode: Value
-          variableName?: string
-          newVariableInsertIndex: number
-          sign: number
   } = await getModalInfo({
     segName: tagInfo?.tag,
     isSegNameEditable: !tagInfo?.isTagExisting,
     value: valueUsedInTransform,
     initialVariableName: 'offset',
-        } as any)
-        if (segName === tagInfo?.tag && value === valueUsedInTransform) {
-          updateAst(modifiedAst, true, {
-            callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
   })
-        } else {
+  if (segName === tagInfo?.tag && Number(value) === valueUsedInTransform) {
+    return {
+      modifiedAst,
+      pathToNodeMap,
+    }
+  }
   // transform again but forcing certain values
   const finalValue = removeDoubleNegatives(
     valueNode as BinaryPart,
     sign,
     variableName
   )
-          const { modifiedAst: _modifiedAst, pathToNodeMap } =
+  const { modifiedAst: _modifiedAst, pathToNodeMap: _pathToNodeMap } =
     transformSecondarySketchLinesTagFirst({
-              ast,
-              selectionRanges: forecdSelectionRanges,
-              transformInfos,
-              programMemory,
+      ast: kclManager.ast,
+      selectionRanges: forcedSelectionRanges,
+      transformInfos: transforms,
+      programMemory: kclManager.programMemory,
       forceSegName: segName,
       forceValueUsedInTransform: finalValue,
     })
@@ -178,15 +170,8 @@ export const Intersect = () => {
     )
     _modifiedAst.body = newBody
   }
-          updateAst(_modifiedAst, true, {
-            callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
-          })
+  return {
+    modifiedAst: _modifiedAst,
+    pathToNodeMap: _pathToNodeMap,
   }
-      }}
-      disabled={!enable}
-      title="Set Perpendicular Distance"
-    >
-      Set Perpendicular Distance
-    </button>
-  )
 }

src/components/Toolbar/RemoveConstrainingValues.tsx

@@ -1,36 +1,27 @@
-import { useState, useEffect } from 'react'
-import { toolTips, useStore } from '../../useStore'
-import { Value } from '../../lang/wasm'
+import { toolTips } from '../../useStore'
+import { Selections } from 'lib/selections'
+import { Program, Value } from '../../lang/wasm'
 import {
   getNodePathFromSourceRange,
   getNodeFromPath,
 } from '../../lang/queryAst'
 import {
-  TransformInfo,
+  PathToNodeMap,
   getRemoveConstraintsTransforms,
   transformAstSketchLines,
 } from '../../lang/std/sketchcombos'
-import { updateCursors } from '../../lang/util'
+import { kclManager } from 'lang/KclSinglton'
 
-export const RemoveConstrainingValues = () => {
-  const { guiMode, selectionRanges, ast, programMemory, updateAst, setCursor } =
-    useStore((s) => ({
-      guiMode: s.guiMode,
-      ast: s.ast,
-      updateAst: s.updateAst,
-      selectionRanges: s.selectionRanges,
-      programMemory: s.programMemory,
-      setCursor: s.setCursor,
-    }))
-  const [enableHorz, setEnableHorz] = useState(false)
-  const [transformInfos, setTransformInfos] = useState<TransformInfo[]>()
-  useEffect(() => {
-    if (!ast) return
+export function removeConstrainingValuesInfo({
+  selectionRanges,
+}: {
+  selectionRanges: Selections
+}) {
   const paths = selectionRanges.codeBasedSelections.map(({ range }) =>
-      getNodePathFromSourceRange(ast, range)
+    getNodePathFromSourceRange(kclManager.ast, range)
   )
   const nodes = paths.map(
-      (pathToNode) => getNodeFromPath<Value>(ast, pathToNode).node
+    (pathToNode) => getNodeFromPath<Value>(kclManager.ast, pathToNode).node
   )
   const isAllTooltips = nodes.every(
     (node) =>
@@ -39,40 +30,34 @@ export const RemoveConstrainingValues = () => {
   )
 
   try {
-      const theTransforms = getRemoveConstraintsTransforms(
+    const transforms = getRemoveConstraintsTransforms(
       selectionRanges,
-        ast,
+      kclManager.ast,
       'removeConstrainingValues'
     )
-      setTransformInfos(theTransforms)
 
-      const _enableHorz = isAllTooltips && theTransforms.every(Boolean)
-      setEnableHorz(_enableHorz)
+    const enabled = isAllTooltips && transforms.every(Boolean)
+    return { enabled, transforms }
   } catch (e) {
     console.error(e)
+    return { enabled: false, transforms: [] }
   }
-  }, [guiMode, selectionRanges])
-  if (guiMode.mode !== 'sketch') return null
+}
 
-  return (
-    <button
-      onClick={() => {
-        if (!transformInfos || !ast) return
-        const { modifiedAst, pathToNodeMap } = transformAstSketchLines({
-          ast,
+export function applyRemoveConstrainingValues({
   selectionRanges,
-          transformInfos,
-          programMemory,
+}: {
+  selectionRanges: Selections
+}): {
+  modifiedAst: Program
+  pathToNodeMap: PathToNodeMap
+} {
+  const { transforms } = removeConstrainingValuesInfo({ selectionRanges })
+  return transformAstSketchLines({
+    ast: kclManager.ast,
+    selectionRanges,
+    transformInfos: transforms,
+    programMemory: kclManager.programMemory,
     referenceSegName: '',
   })
-        updateAst(modifiedAst, true, {
-          callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
-        })
-      }}
-      disabled={!enableHorz}
-      title="Remove Constraining Values"
-    >
-      Remove Constraining Values
-    </button>
-  )
 }

src/components/Toolbar/SetAbsDistance.tsx

@@ -1,62 +1,49 @@
-import { useState, useEffect } from 'react'
-import { create } from 'react-modal-promise'
-import { toolTips, useStore } from '../../useStore'
-import { Value } from '../../lang/wasm'
+import { toolTips } from '../../useStore'
+import { Selections } from 'lib/selections'
+import { BinaryPart, Program, Value } from '../../lang/wasm'
 import {
   getNodePathFromSourceRange,
   getNodeFromPath,
 } from '../../lang/queryAst'
 import {
-  TransformInfo,
   getTransformInfos,
   transformAstSketchLines,
-  ConstraintType,
+  PathToNodeMap,
 } from '../../lang/std/sketchcombos'
-import { SetAngleLengthModal } from '../SetAngleLengthModal'
+import {
+  SetAngleLengthModal,
+  createSetAngleLengthModal,
+} from '../SetAngleLengthModal'
 import {
   createIdentifier,
   createVariableDeclaration,
 } from '../../lang/modifyAst'
 import { removeDoubleNegatives } from '../AvailableVarsHelpers'
-import { updateCursors } from '../../lang/util'
+import { kclManager } from 'lang/KclSinglton'
 
-const getModalInfo = create(SetAngleLengthModal as any)
+const getModalInfo = createSetAngleLengthModal(SetAngleLengthModal)
 
-type ButtonType = 'xAbs' | 'yAbs' | 'snapToYAxis' | 'snapToXAxis'
+type Constraint = 'xAbs' | 'yAbs' | 'snapToYAxis' | 'snapToXAxis'
 
-const buttonLabels: Record<ButtonType, string> = {
-  xAbs: 'Set distance from X Axis',
-  yAbs: 'Set distance from Y Axis',
-  snapToYAxis: 'Snap To Y Axis',
-  snapToXAxis: 'Snap To X Axis',
-}
-
-export const SetAbsDistance = ({ buttonType }: { buttonType: ButtonType }) => {
-  const { guiMode, selectionRanges, ast, programMemory, updateAst, setCursor } =
-    useStore((s) => ({
-      guiMode: s.guiMode,
-      ast: s.ast,
-      updateAst: s.updateAst,
-      selectionRanges: s.selectionRanges,
-      programMemory: s.programMemory,
-      setCursor: s.setCursor,
-    }))
-  const disType: ConstraintType =
-    buttonType === 'xAbs' || buttonType === 'yAbs'
-      ? buttonType
-      : buttonType === 'snapToYAxis'
+export function absDistanceInfo({
+  selectionRanges,
+  constraint,
+}: {
+  selectionRanges: Selections
+  constraint: Constraint
+}) {
+  const disType =
+    constraint === 'xAbs' || constraint === 'yAbs'
+      ? constraint
+      : constraint === 'snapToYAxis'
       ? 'xAbs'
       : 'yAbs'
-  const [enableAngLen, setEnableAngLen] = useState(false)
-  const [transformInfos, setTransformInfos] = useState<TransformInfo[]>()
-  useEffect(() => {
-    if (!ast) return
   const paths = selectionRanges.codeBasedSelections.map(({ range }) =>
-      getNodePathFromSourceRange(ast, range)
+    getNodePathFromSourceRange(kclManager.ast, range)
   )
   const nodes = paths.map(
     (pathToNode) =>
-        getNodeFromPath<Value>(ast, pathToNode, 'CallExpression').node
+      getNodeFromPath<Value>(kclManager.ast, pathToNode, 'CallExpression').node
   )
   const isAllTooltips = nodes.every(
     (node) =>
@@ -64,8 +51,7 @@ export const SetAbsDistance = ({ buttonType }: { buttonType: ButtonType }) => {
       toolTips.includes(node.callee.name as any)
   )
 
-    const theTransforms = getTransformInfos(selectionRanges, ast, disType)
-    setTransformInfos(theTransforms)
+  const transforms = getTransformInfos(selectionRanges, kclManager.ast, disType)
 
   const enableY =
     disType === 'yAbs' &&
@@ -76,46 +62,53 @@ export const SetAbsDistance = ({ buttonType }: { buttonType: ButtonType }) => {
     selectionRanges.otherSelections.length === 1 &&
     selectionRanges.otherSelections[0] === 'y-axis' // select the y axis to set the distance from it i.e. x
 
-    const _enableHorz =
+  const enabled =
     isAllTooltips &&
-      theTransforms.every(Boolean) &&
+    transforms.every(Boolean) &&
     selectionRanges.codeBasedSelections.length === 1 &&
     (enableX || enableY)
-    setEnableAngLen(_enableHorz)
-  }, [guiMode, selectionRanges])
-  if (guiMode.mode !== 'sketch') return null
 
-  const isAlign = buttonType === 'snapToYAxis' || buttonType === 'snapToXAxis'
+  return { enabled, transforms }
+}
 
-  return (
-    <button
-      onClick={async () => {
-        if (!(transformInfos && ast)) return
+export async function applyConstraintAbsDistance({
+  selectionRanges,
+  constraint,
+}: {
+  selectionRanges: Selections
+  constraint: 'xAbs' | 'yAbs'
+}): Promise<{
+  modifiedAst: Program
+  pathToNodeMap: PathToNodeMap
+}> {
+  const transformInfos = absDistanceInfo({
+    selectionRanges,
+    constraint,
+  }).transforms
   const { valueUsedInTransform } = transformAstSketchLines({
-          ast: JSON.parse(JSON.stringify(ast)),
+    ast: JSON.parse(JSON.stringify(kclManager.ast)),
     selectionRanges: selectionRanges,
     transformInfos,
-          programMemory,
+    programMemory: kclManager.programMemory,
     referenceSegName: '',
   })
-        try {
   let forceVal = valueUsedInTransform || 0
   const { valueNode, variableName, newVariableInsertIndex, sign } =
-            await (!isAlign &&
-              getModalInfo({
+    await getModalInfo({
       value: forceVal,
-                valueName: disType === 'yAbs' ? 'yDis' : 'xDis',
-              } as any))
-          let finalValue = isAlign
-            ? createIdentifier('_0')
-            : removeDoubleNegatives(valueNode, sign, variableName)
+      valueName: constraint === 'yAbs' ? 'yDis' : 'xDis',
+    })
+  let finalValue = removeDoubleNegatives(
+    valueNode as BinaryPart,
+    sign,
+    variableName
+  )
 
-          const { modifiedAst: _modifiedAst, pathToNodeMap } =
-            transformAstSketchLines({
-              ast: JSON.parse(JSON.stringify(ast)),
+  const { modifiedAst: _modifiedAst, pathToNodeMap } = transformAstSketchLines({
+    ast: JSON.parse(JSON.stringify(kclManager.ast)),
     selectionRanges: selectionRanges,
     transformInfos,
-              programMemory,
+    programMemory: kclManager.programMemory,
     referenceSegName: '',
     forceValueUsedInTransform: finalValue,
   })
@@ -128,18 +121,32 @@ export const SetAbsDistance = ({ buttonType }: { buttonType: ButtonType }) => {
     )
     _modifiedAst.body = newBody
   }
-
-          updateAst(_modifiedAst, true, {
-            callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
-          })
-        } catch (e) {
-          console.log('error', e)
-        }
-      }}
-      disabled={!enableAngLen}
-      title={buttonLabels[buttonType]}
-    >
-      {buttonLabels[buttonType]}
-    </button>
-  )
+  return { modifiedAst: _modifiedAst, pathToNodeMap }
+}
+
+export function applyConstraintAxisAlign({
+  selectionRanges,
+  constraint,
+}: {
+  selectionRanges: Selections
+  constraint: 'snapToYAxis' | 'snapToXAxis'
+}): {
+  modifiedAst: Program
+  pathToNodeMap: PathToNodeMap
+} {
+  const transformInfos = absDistanceInfo({
+    selectionRanges,
+    constraint,
+  }).transforms
+
+  let finalValue = createIdentifier('_0')
+
+  return transformAstSketchLines({
+    ast: JSON.parse(JSON.stringify(kclManager.ast)),
+    selectionRanges: selectionRanges,
+    transformInfos,
+    programMemory: kclManager.programMemory,
+    referenceSegName: '',
+    forceValueUsedInTransform: finalValue,
+  })
 }

src/components/Toolbar/SetAngleBetween.tsx

@@ -1,48 +1,39 @@
-import { useState, useEffect } from 'react'
-import { create } from 'react-modal-promise'
-import { toolTips, useStore } from '../../useStore'
-import { BinaryPart, Value, VariableDeclarator } from '../../lang/wasm'
+import { toolTips } from '../../useStore'
+import { Selections } from 'lib/selections'
+import { BinaryPart, Program, Value, VariableDeclarator } from '../../lang/wasm'
 import {
   getNodePathFromSourceRange,
   getNodeFromPath,
 } from '../../lang/queryAst'
 import { isSketchVariablesLinked } from '../../lang/std/sketchConstraints'
 import {
-  TransformInfo,
   transformSecondarySketchLinesTagFirst,
   getTransformInfos,
+  PathToNodeMap,
 } from '../../lang/std/sketchcombos'
-import { GetInfoModal } from '../SetHorVertDistanceModal'
+import { GetInfoModal, createInfoModal } from '../SetHorVertDistanceModal'
 import { createVariableDeclaration } from '../../lang/modifyAst'
 import { removeDoubleNegatives } from '../AvailableVarsHelpers'
-import { updateCursors } from '../../lang/util'
+import { kclManager } from 'lang/KclSinglton'
 
-const getModalInfo = create(GetInfoModal as any)
+const getModalInfo = createInfoModal(GetInfoModal)
 
-export const SetAngleBetween = () => {
-  const { guiMode, selectionRanges, ast, programMemory, updateAst, setCursor } =
-    useStore((s) => ({
-      guiMode: s.guiMode,
-      ast: s.ast,
-      updateAst: s.updateAst,
-      selectionRanges: s.selectionRanges,
-      programMemory: s.programMemory,
-      setCursor: s.setCursor,
-    }))
-  const [enable, setEnable] = useState(false)
-  const [transformInfos, setTransformInfos] = useState<TransformInfo[]>()
-  useEffect(() => {
-    if (!ast) return
+export function angleBetweenInfo({
+  selectionRanges,
+}: {
+  selectionRanges: Selections
+}) {
   const paths = selectionRanges.codeBasedSelections.map(({ range }) =>
-      getNodePathFromSourceRange(ast, range)
+    getNodePathFromSourceRange(kclManager.ast, range)
   )
+
   const nodes = paths.map(
-      (pathToNode) => getNodeFromPath<Value>(ast, pathToNode).node
+    (pathToNode) => getNodeFromPath<Value>(kclManager.ast, pathToNode).node
   )
   const varDecs = paths.map(
     (pathToNode) =>
       getNodeFromPath<VariableDeclarator>(
-          ast,
+        kclManager.ast,
         pathToNode,
         'VariableDeclarator'
       )?.node
@@ -50,7 +41,7 @@ export const SetAngleBetween = () => {
   const primaryLine = varDecs[0]
   const secondaryVarDecs = varDecs.slice(1)
   const isOthersLinkedToPrimary = secondaryVarDecs.every((secondary) =>
-      isSketchVariablesLinked(secondary, primaryLine, ast)
+    isSketchVariablesLinked(secondary, primaryLine, kclManager.ast)
   )
   const isAllTooltips = nodes.every(
     (node) =>
@@ -63,30 +54,35 @@ export const SetAngleBetween = () => {
       ...selectionRanges,
       codeBasedSelections: selectionRanges.codeBasedSelections.slice(1),
     },
-      ast,
+    kclManager.ast,
     'setAngleBetween'
   )
-    setTransformInfos(theTransforms)
 
   const _enableEqual =
     secondaryVarDecs.length === 1 &&
     isAllTooltips &&
     isOthersLinkedToPrimary &&
     theTransforms.every(Boolean)
-    setEnable(_enableEqual)
-  }, [guiMode, selectionRanges])
-  if (guiMode.mode !== 'sketch') return null
+  return { enabled: _enableEqual, transforms: theTransforms }
+}
 
-  return (
-    <button
-      onClick={async () => {
-        if (!(transformInfos && ast)) return
+export async function applyConstraintAngleBetween({
+  selectionRanges,
+}: // constraint,
+{
+  selectionRanges: Selections
+  // constraint: 'setHorzDistance' | 'setVertDistance'
+}): Promise<{
+  modifiedAst: Program
+  pathToNodeMap: PathToNodeMap
+}> {
+  const transformInfos = angleBetweenInfo({ selectionRanges }).transforms
   const { modifiedAst, tagInfo, valueUsedInTransform, pathToNodeMap } =
     transformSecondarySketchLinesTagFirst({
-            ast: JSON.parse(JSON.stringify(ast)),
+      ast: JSON.parse(JSON.stringify(kclManager.ast)),
       selectionRanges,
       transformInfos,
-            programMemory,
+      programMemory: kclManager.programMemory,
     })
   const {
     segName,
@@ -95,36 +91,31 @@ export const SetAngleBetween = () => {
     variableName,
     newVariableInsertIndex,
     sign,
-        }: {
-          segName: string
-          value: number
-          valueNode: Value
-          variableName?: string
-          newVariableInsertIndex: number
-          sign: number
   } = await getModalInfo({
     segName: tagInfo?.tag,
     isSegNameEditable: !tagInfo?.isTagExisting,
     value: valueUsedInTransform,
     initialVariableName: 'angle',
   } as any)
-        if (segName === tagInfo?.tag && value === valueUsedInTransform) {
-          updateAst(modifiedAst, true, {
-            callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
-          })
-        } else {
+  if (segName === tagInfo?.tag && Number(value) === valueUsedInTransform) {
+    return {
+      modifiedAst,
+      pathToNodeMap,
+    }
+  }
+
   const finalValue = removeDoubleNegatives(
     valueNode as BinaryPart,
     sign,
     variableName
   )
   // transform again but forcing certain values
-          const { modifiedAst: _modifiedAst, pathToNodeMap } =
+  const { modifiedAst: _modifiedAst, pathToNodeMap: _pathToNodeMap } =
     transformSecondarySketchLinesTagFirst({
-              ast,
+      ast: kclManager.ast,
       selectionRanges,
       transformInfos,
-              programMemory,
+      programMemory: kclManager.programMemory,
       forceSegName: segName,
       forceValueUsedInTransform: finalValue,
     })
@@ -137,15 +128,8 @@ export const SetAngleBetween = () => {
     )
     _modifiedAst.body = newBody
   }
-          updateAst(_modifiedAst, true, {
-            callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
-          })
+  return {
+    modifiedAst: _modifiedAst,
+    pathToNodeMap: _pathToNodeMap,
   }
-      }}
-      disabled={!enable}
-      title="Set Angle Between"
-    >
-      Set Angle Between
-    </button>
-  )
 }

src/components/Toolbar/SetHorzVertDistance.tsx

@@ -1,72 +1,40 @@
-import { useState, useEffect } from 'react'
-import { create } from 'react-modal-promise'
-import { toolTips, useStore } from '../../useStore'
-import { BinaryPart, Value, VariableDeclarator } from '../../lang/wasm'
+import { toolTips } from '../../useStore'
+import { BinaryPart, Program, Value, VariableDeclarator } from '../../lang/wasm'
 import {
   getNodePathFromSourceRange,
   getNodeFromPath,
 } from '../../lang/queryAst'
 import { isSketchVariablesLinked } from '../../lang/std/sketchConstraints'
 import {
-  TransformInfo,
   transformSecondarySketchLinesTagFirst,
   getTransformInfos,
-  ConstraintType,
+  PathToNodeMap,
 } from '../../lang/std/sketchcombos'
-import { GetInfoModal } from '../SetHorVertDistanceModal'
+import { GetInfoModal, createInfoModal } from '../SetHorVertDistanceModal'
 import { createLiteral, createVariableDeclaration } from '../../lang/modifyAst'
 import { removeDoubleNegatives } from '../AvailableVarsHelpers'
-import { updateCursors } from '../../lang/util'
+import { kclManager } from 'lang/KclSinglton'
+import { Selections } from 'lib/selections'
 
-const getModalInfo = create(GetInfoModal as any)
+const getModalInfo = createInfoModal(GetInfoModal)
 
-type ButtonType =
-  | 'setHorzDistance'
-  | 'setVertDistance'
-  | 'alignEndsHorizontally'
-  | 'alignEndsVertically'
-
-const buttonLabels: Record<ButtonType, string> = {
-  setHorzDistance: 'Set Horizontal Distance',
-  setVertDistance: 'Set Vertical Distance',
-  alignEndsHorizontally: 'Align Ends Horizontally',
-  alignEndsVertically: 'Align Ends Vertically',
-}
-
-export const SetHorzVertDistance = ({
-  buttonType,
+export function horzVertDistanceInfo({
+  selectionRanges,
+  constraint,
 }: {
-  buttonType: ButtonType
-}) => {
-  const { guiMode, selectionRanges, ast, programMemory, updateAst, setCursor } =
-    useStore((s) => ({
-      guiMode: s.guiMode,
-      ast: s.ast,
-      updateAst: s.updateAst,
-      selectionRanges: s.selectionRanges,
-      programMemory: s.programMemory,
-      setCursor: s.setCursor,
-    }))
-  const constraint: ConstraintType =
-    buttonType === 'setHorzDistance' || buttonType === 'setVertDistance'
-      ? buttonType
-      : buttonType === 'alignEndsHorizontally'
-      ? 'setVertDistance'
-      : 'setHorzDistance'
-  const [enable, setEnable] = useState(false)
-  const [transformInfos, setTransformInfos] = useState<TransformInfo[]>()
-  useEffect(() => {
-    if (!ast) return
+  selectionRanges: Selections
+  constraint: 'setHorzDistance' | 'setVertDistance'
+}) {
   const paths = selectionRanges.codeBasedSelections.map(({ range }) =>
-      getNodePathFromSourceRange(ast, range)
+    getNodePathFromSourceRange(kclManager.ast, range)
   )
   const nodes = paths.map(
-      (pathToNode) => getNodeFromPath<Value>(ast, pathToNode).node
+    (pathToNode) => getNodeFromPath<Value>(kclManager.ast, pathToNode).node
   )
   const varDecs = paths.map(
     (pathToNode) =>
       getNodeFromPath<VariableDeclarator>(
-          ast,
+        kclManager.ast,
         pathToNode,
         'VariableDeclarator'
       )?.node
@@ -74,7 +42,7 @@ export const SetHorzVertDistance = ({
   const primaryLine = varDecs[0]
   const secondaryVarDecs = varDecs.slice(1)
   const isOthersLinkedToPrimary = secondaryVarDecs.every((secondary) =>
-      isSketchVariablesLinked(secondary, primaryLine, ast)
+    isSketchVariablesLinked(secondary, primaryLine, kclManager.ast)
   )
   const isAllTooltips = nodes.every(
     (node) =>
@@ -90,34 +58,40 @@ export const SetHorzVertDistance = ({
       ...selectionRanges,
       codeBasedSelections: selectionRanges.codeBasedSelections.slice(1),
     },
-      ast,
+    kclManager.ast,
     constraint
   )
-    setTransformInfos(theTransforms)
-
   const _enableEqual =
     secondaryVarDecs.length === 1 &&
     isAllTooltips &&
     isOthersLinkedToPrimary &&
     theTransforms.every(Boolean)
-    setEnable(_enableEqual)
-  }, [guiMode, selectionRanges])
-  if (guiMode.mode !== 'sketch') return null
+  return { enabled: _enableEqual, transforms: theTransforms }
+}
 
-  const isAlign =
-    buttonType === 'alignEndsHorizontally' ||
-    buttonType === 'alignEndsVertically'
-
-  return (
-    <button
-      onClick={async () => {
-        if (!(transformInfos && ast)) return
+export async function applyConstraintHorzVertDistance({
+  selectionRanges,
+  constraint,
+  // TODO align will always be false (covered by synconous applyConstraintHorzVertAlign), remove it
+  isAlign = false,
+}: {
+  selectionRanges: Selections
+  constraint: 'setHorzDistance' | 'setVertDistance'
+  isAlign?: false
+}): Promise<{
+  modifiedAst: Program
+  pathToNodeMap: PathToNodeMap
+}> {
+  const transformInfos = horzVertDistanceInfo({
+    selectionRanges,
+    constraint,
+  }).transforms
   const { modifiedAst, tagInfo, valueUsedInTransform, pathToNodeMap } =
     transformSecondarySketchLinesTagFirst({
-            ast: JSON.parse(JSON.stringify(ast)),
+      ast: JSON.parse(JSON.stringify(kclManager.ast)),
       selectionRanges,
       transformInfos,
-            programMemory,
+      programMemory: kclManager.programMemory,
     })
   const {
     segName,
@@ -126,25 +100,17 @@ export const SetHorzVertDistance = ({
     variableName,
     newVariableInsertIndex,
     sign,
-        }: {
-          segName: string
-          value: number
-          valueNode: Value
-          variableName?: string
-          newVariableInsertIndex: number
-          sign: number
-        } = await (!isAlign &&
-          getModalInfo({
+  } = await getModalInfo({
     segName: tagInfo?.tag,
     isSegNameEditable: !tagInfo?.isTagExisting,
     value: valueUsedInTransform,
-            initialVariableName:
-              constraint === 'setHorzDistance' ? 'xDis' : 'yDis',
-          } as any))
-        if (segName === tagInfo?.tag && value === valueUsedInTransform) {
-          updateAst(modifiedAst, true, {
-            callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
-          })
+    initialVariableName: constraint === 'setHorzDistance' ? 'xDis' : 'yDis',
+  } as any)
+  if (segName === tagInfo?.tag && Number(value) === valueUsedInTransform) {
+    return {
+      modifiedAst,
+      pathToNodeMap,
+    }
   } else {
     let finalValue = isAlign
       ? createLiteral(0)
@@ -152,10 +118,10 @@ export const SetHorzVertDistance = ({
     // transform again but forcing certain values
     const { modifiedAst: _modifiedAst, pathToNodeMap } =
       transformSecondarySketchLinesTagFirst({
-              ast,
+        ast: kclManager.ast,
         selectionRanges,
         transformInfos,
-              programMemory,
+        programMemory: kclManager.programMemory,
         forceSegName: segName,
         forceValueUsedInTransform: finalValue,
       })
@@ -168,15 +134,37 @@ export const SetHorzVertDistance = ({
       )
       _modifiedAst.body = newBody
     }
-          updateAst(_modifiedAst, true, {
-            callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
-          })
+    return {
+      modifiedAst: _modifiedAst,
+      pathToNodeMap,
+    }
+  }
+}
+
+export function applyConstraintHorzVertAlign({
+  selectionRanges,
+  constraint,
+}: {
+  selectionRanges: Selections
+  constraint: 'setHorzDistance' | 'setVertDistance'
+}): {
+  modifiedAst: Program
+  pathToNodeMap: PathToNodeMap
+} {
+  const transformInfos = horzVertDistanceInfo({
+    selectionRanges,
+    constraint,
+  }).transforms
+  let finalValue = createLiteral(0)
+  const { modifiedAst, pathToNodeMap } = transformSecondarySketchLinesTagFirst({
+    ast: kclManager.ast,
+    selectionRanges,
+    transformInfos,
+    programMemory: kclManager.programMemory,
+    forceValueUsedInTransform: finalValue,
+  })
+  return {
+    modifiedAst: modifiedAst,
+    pathToNodeMap,
   }
-      }}
-      disabled={!enable}
-      title={buttonLabels[buttonType]}
-    >
-      {buttonLabels[buttonType]}
-    </button>
-  )
 }

src/components/Toolbar/setAngleLength.tsx

@@ -1,17 +1,19 @@
-import { useState, useEffect } from 'react'
-import { create } from 'react-modal-promise'
-import { toolTips, useStore } from '../../useStore'
-import { Value } from '../../lang/wasm'
+import { toolTips } from '../../useStore'
+import { Selections } from 'lib/selections'
+import { BinaryPart, Program, Value } from '../../lang/wasm'
 import {
   getNodePathFromSourceRange,
   getNodeFromPath,
 } from '../../lang/queryAst'
 import {
-  TransformInfo,
+  PathToNodeMap,
   getTransformInfos,
   transformAstSketchLines,
 } from '../../lang/std/sketchcombos'
-import { SetAngleLengthModal } from '../SetAngleLengthModal'
+import {
+  SetAngleLengthModal,
+  createSetAngleLengthModal,
+} from '../SetAngleLengthModal'
 import {
   createBinaryExpressionWithUnary,
   createIdentifier,
@@ -19,41 +21,23 @@ import {
 } from '../../lang/modifyAst'
 import { removeDoubleNegatives } from '../AvailableVarsHelpers'
 import { normaliseAngle } from '../../lib/utils'
-import { updateCursors } from '../../lang/util'
+import { kclManager } from 'lang/KclSinglton'
 
-const getModalInfo = create(SetAngleLengthModal as any)
+const getModalInfo = createSetAngleLengthModal(SetAngleLengthModal)
 
-type ButtonType = 'setAngle' | 'setLength'
-
-const buttonLabels: Record<ButtonType, string> = {
-  setAngle: 'Set Angle',
-  setLength: 'Set Length',
-}
-
-export const SetAngleLength = ({
-  angleOrLength,
+export function setAngleLengthInfo({
+  selectionRanges,
+  angleOrLength = 'setLength',
 }: {
-  angleOrLength: ButtonType
-}) => {
-  const { guiMode, selectionRanges, ast, programMemory, updateAst, setCursor } =
-    useStore((s) => ({
-      guiMode: s.guiMode,
-      ast: s.ast,
-      updateAst: s.updateAst,
-      selectionRanges: s.selectionRanges,
-      programMemory: s.programMemory,
-      setCursor: s.setCursor,
-    }))
-  const [enableAngLen, setEnableAngLen] = useState(false)
-  const [transformInfos, setTransformInfos] = useState<TransformInfo[]>()
-  useEffect(() => {
-    if (!ast) return
+  selectionRanges: Selections
+  angleOrLength?: 'setLength' | 'setAngle'
+}) {
   const paths = selectionRanges.codeBasedSelections.map(({ range }) =>
-      getNodePathFromSourceRange(ast, range)
+    getNodePathFromSourceRange(kclManager.ast, range)
   )
   const nodes = paths.map(
     (pathToNode) =>
-        getNodeFromPath<Value>(ast, pathToNode, 'CallExpression').node
+      getNodeFromPath<Value>(kclManager.ast, pathToNode, 'CallExpression').node
   )
   const isAllTooltips = nodes.every(
     (node) =>
@@ -61,23 +45,31 @@ export const SetAngleLength = ({
       toolTips.includes(node.callee.name as any)
   )
 
-    const theTransforms = getTransformInfos(selectionRanges, ast, angleOrLength)
-    setTransformInfos(theTransforms)
-
-    const _enableHorz = isAllTooltips && theTransforms.every(Boolean)
-    setEnableAngLen(_enableHorz)
-  }, [guiMode, selectionRanges])
-  if (guiMode.mode !== 'sketch') return null
-
-  return (
-    <button
-      onClick={async () => {
-        if (!(transformInfos && ast)) return
-        const { valueUsedInTransform } = transformAstSketchLines({
-          ast: JSON.parse(JSON.stringify(ast)),
+  const transforms = getTransformInfos(
     selectionRanges,
-          transformInfos,
-          programMemory,
+    kclManager.ast,
+    angleOrLength
+  )
+  const enabled = isAllTooltips && transforms.every(Boolean)
+  return { enabled, transforms }
+}
+
+export async function applyConstraintAngleLength({
+  selectionRanges,
+  angleOrLength = 'setLength',
+}: {
+  selectionRanges: Selections
+  angleOrLength?: 'setLength' | 'setAngle'
+}): Promise<{
+  modifiedAst: Program
+  pathToNodeMap: PathToNodeMap
+}> {
+  const { transforms } = setAngleLengthInfo({ selectionRanges, angleOrLength })
+  const { valueUsedInTransform } = transformAstSketchLines({
+    ast: JSON.parse(JSON.stringify(kclManager.ast)),
+    selectionRanges,
+    transformInfos: transforms,
+    programMemory: kclManager.programMemory,
     referenceSegName: '',
   })
   try {
@@ -99,37 +91,35 @@ export const SetAngleLength = ({
       calcIdentifier = createIdentifier(forceVal < 0 ? '_270' : '_90')
       forceVal = normaliseAngle(forceVal + (forceVal < 0 ? 90 : -90))
     } else if (isReferencingXAxisAngle) {
-            calcIdentifier = createIdentifier(
-              Math.abs(forceVal) > 90 ? '_180' : '_0'
-            )
+      calcIdentifier = createIdentifier(Math.abs(forceVal) > 90 ? '_180' : '_0')
       forceVal =
-              Math.abs(forceVal) > 90
-                ? normaliseAngle(forceVal - 180)
-                : forceVal
+        Math.abs(forceVal) > 90 ? normaliseAngle(forceVal - 180) : forceVal
     }
     const { valueNode, variableName, newVariableInsertIndex, sign } =
       await getModalInfo({
         value: forceVal,
         valueName: angleOrLength === 'setAngle' ? 'angle' : 'length',
         shouldCreateVariable: true,
-            } as any)
-          let finalValue = removeDoubleNegatives(valueNode, sign, variableName)
+      })
+
+    let finalValue = removeDoubleNegatives(
+      valueNode as BinaryPart,
+      sign,
+      variableName
+    )
     if (
       isReferencingYAxisAngle ||
       (isReferencingXAxisAngle && calcIdentifier.name !== '_0')
     ) {
-            finalValue = createBinaryExpressionWithUnary([
-              calcIdentifier,
-              finalValue,
-            ])
+      finalValue = createBinaryExpressionWithUnary([calcIdentifier, finalValue])
     }
 
     const { modifiedAst: _modifiedAst, pathToNodeMap } =
       transformAstSketchLines({
-              ast: JSON.parse(JSON.stringify(ast)),
+        ast: JSON.parse(JSON.stringify(kclManager.ast)),
         selectionRanges,
-              transformInfos,
-              programMemory,
+        transformInfos: transforms,
+        programMemory: kclManager.programMemory,
         referenceSegName: '',
         forceValueUsedInTransform: finalValue,
       })
@@ -142,18 +132,12 @@ export const SetAngleLength = ({
       )
       _modifiedAst.body = newBody
     }
-
-          updateAst(_modifiedAst, true, {
-            callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
-          })
+    return {
+      modifiedAst: _modifiedAst,
+      pathToNodeMap,
+    }
   } catch (e) {
     console.log('erorr', e)
+    throw e
   }
-      }}
-      disabled={!enableAngLen}
-      title={buttonLabels[angleOrLength]}
-    >
-      {buttonLabels[angleOrLength]}
-    </button>
-  )
 }

src/components/Tooltip.module.css

@@ -0,0 +1,229 @@
+/* Adapted from https://github.com/argyleink/gui-challenges/blob/main/tooltips/tool-tip.css */
+
+.tooltip {
+  /* internal CSS vars */
+  --_delay: 200ms;
+  --_p-inline: 1ch;
+  --_p-block: 4px;
+  --_triangle-size: 7px;
+  /* --_bg: hsl(0 0% 20%); */
+  --_bg: var(--chalkboard-10);
+  --_shadow-alpha: 20%;
+
+  /* Used to power spacing and layout for RTL languages */
+  --isRTL: -1;
+
+  /* Using conic gradients to get a clear tip triangle */
+  --_bottom-tip: conic-gradient(
+      from -30deg at bottom,
+      #0000,
+      #000 1deg 60deg,
+      #0000 61deg
+    )
+    bottom / 100% 50% no-repeat;
+  --_top-tip: conic-gradient(
+      from 150deg at top,
+      #0000,
+      #000 1deg 60deg,
+      #0000 61deg
+    )
+    top / 100% 50% no-repeat;
+  --_right-tip: conic-gradient(
+      from -120deg at right,
+      #0000,
+      #000 1deg 60deg,
+      #0000 61deg
+    )
+    right / 50% 100% no-repeat;
+  --_left-tip: conic-gradient(
+      from 60deg at left,
+      #0000,
+      #000 1deg 60deg,
+      #0000 61deg
+    )
+    left / 50% 100% no-repeat;
+
+  pointer-events: none;
+  user-select: none;
+
+  /* The parts that will be transitioned */
+  opacity: 0;
+  transform: translate(var(--_x, 0), var(--_y, 0));
+  transition: transform 0.15s ease-out, opacity 0.11s ease-out;
+
+  position: absolute;
+  z-index: 1;
+  inline-size: max-content;
+  max-inline-size: 25ch;
+  text-align: start;
+  font-family: var(--mono-font-family);
+  text-transform: none;
+  font-size: 0.9rem;
+  font-weight: normal;
+  line-height: initial;
+  letter-spacing: 0;
+  padding: var(--_p-block) var(--_p-inline);
+  margin: 0;
+  border-radius: 3px;
+  background: var(--_bg);
+  @apply text-chalkboard-110;
+  will-change: filter;
+  filter: drop-shadow(0 1px 3px hsl(0 0% 0% / var(--_shadow-alpha)))
+    drop-shadow(0 6px 12px hsl(0 0% 0% / var(--_shadow-alpha)));
+}
+
+:global(.dark) .tooltip {
+  --_bg: var(--chalkboard-110);
+  @apply text-chalkboard-10;
+}
+
+/* TODO we don't support a light theme yet */
+/* @media (prefers-color-scheme: light) {
+  .tooltip {
+      --_bg: white;
+      --_shadow-alpha: 15%;
+  }
+} */
+
+.tooltip:dir(rtl) {
+  --isRTL: 1;
+}
+
+/* :has and :is are pretty fresh CSS pseudo-selectors, may not see full support */
+:has(> .tooltip) {
+  position: relative;
+}
+
+:is(:hover, :focus-visible, :active) > .tooltip {
+  opacity: 1;
+  transition-delay: var(--_delay);
+}
+
+:is(:focus, :focus-visible, :focus-within) > .tooltip {
+  --_delay: 0 !important;
+}
+
+/* prepend some prose for screen readers only */
+.tooltip::before {
+  content: '; Has tooltip: ';
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
+
+/* tooltip shape is a pseudo element so we can cast a shadow */
+.tooltip::after {
+  content: '';
+  background: var(--_bg);
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  mask: var(--_tip);
+}
+
+.tooltip.top,
+.tooltip.blockStart,
+.tooltip.bottom,
+.tooltip.blockEnd {
+  text-align: center;
+}
+
+/* TOP || BLOCK-START */
+.tooltip.top,
+.tooltip.blockStart {
+  inset-inline-start: 50%;
+  inset-block-end: calc(100% + var(--_p-block) + var(--_triangle-size));
+  --_x: calc(50% * var(--isRTL));
+}
+
+.tooltip.top::after,
+.tooltip.tooltip.blockStart::after {
+  --_tip: var(--_bottom-tip);
+  inset-block-end: calc(var(--_triangle-size) * -1);
+  border-block-end: var(--_triangle-size) solid transparent;
+}
+
+/* RIGHT || INLINE-END */
+.tooltip.right,
+.tooltip.inlineEnd {
+  inset-inline-start: calc(100% + var(--_p-inline) + var(--_triangle-size));
+  inset-block-end: 50%;
+  --_y: 50%;
+}
+
+.tooltip.right::after,
+.tooltip.tooltip.inlineEnd::after {
+  --_tip: var(--_left-tip);
+  inset-inline-start: calc(var(--_triangle-size) * -1);
+  border-inline-start: var(--_triangle-size) solid transparent;
+}
+
+.tooltip.right:dir(rtl)::after,
+.tooltip.inlineEnd:dir(rtl)::after {
+  --_tip: var(--_right-tip);
+}
+
+/* BOTTOM || BLOCK-END */
+.tooltip.bottom,
+.tooltip.blockEnd {
+  inset-inline-start: 50%;
+  inset-block-start: calc(100% + var(--_p-block) + var(--_triangle-size));
+  --_x: calc(50% * var(--isRTL));
+}
+
+.tooltip.bottom::after,
+.tooltip.tooltip.blockEnd::after {
+  --_tip: var(--_top-tip);
+  inset-block-start: calc(var(--_triangle-size) * -1);
+  border-block-start: var(--_triangle-size) solid transparent;
+}
+
+/* LEFT || INLINE-START */
+.tooltip.left,
+.tooltip.inlineStart {
+  inset-inline-end: calc(100% + var(--_p-inline) + var(--_triangle-size));
+  inset-block-end: 50%;
+  --_y: 50%;
+}
+
+.tooltip.left::after,
+.tooltip.tooltip.inlineStart::after {
+  --_tip: var(--_right-tip);
+  inset-inline-end: calc(var(--_triangle-size) * -1);
+  border-inline-end: var(--_triangle-size) solid transparent;
+}
+
+.tooltip.left:dir(rtl)::after,
+.tooltip.inlineStart:dir(rtl)::after {
+  --_tip: var(--_left-tip);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  /* TOP || BLOCK-START */
+  :has(> :is(.tooltip.top, .tooltip.blockStart)):not(:hover, :active) .tooltip {
+    --_y: 3px;
+  }
+
+  /* RIGHT || INLINE-END */
+  :has(> :is(.tooltip.right, .tooltip.inlineEnd)):not(:hover, :active)
+    .tooltip {
+    --_x: calc(var(--isRTL) * -3px * -1);
+  }
+
+  /* BOTTOM || BLOCK-END */
+  :has(> :is(.tooltip.bottom, .tooltip.blockEnd)):not(:hover, :active)
+    .tooltip {
+    --_y: -3px;
+  }
+
+  /* BOTTOM || BLOCK-END */
+  :has(> :is(.tooltip.left, .tooltip.inlineStart)):not(:hover, :active)
+    .tooltip {
+    --_x: calc(var(--isRTL) * 3px * -1);
+  }
+}

src/components/Tooltip.tsx

@@ -0,0 +1,37 @@
+// We do use all the classes in this file currently, but we
+// index into them with styles[position], which CSS Modules doesn't pick up.
+// eslint-disable-next-line css-modules/no-unused-class
+import styles from './Tooltip.module.css'
+
+interface TooltipProps extends React.PropsWithChildren {
+  position?:
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'blockStart'
+    | 'blockEnd'
+    | 'inlineStart'
+    | 'inlineEnd'
+  className?: string
+  delay?: number
+}
+
+export default function Tooltip({
+  children,
+  position = 'top',
+  className,
+  delay = 200,
+}: TooltipProps) {
+  return (
+    <div
+      // @ts-ignore while awaiting merge of this PR for support of "inert" https://github.com/DefinitelyTyped/DefinitelyTyped/pull/60822
+      inert="true"
+      role="tooltip"
+      className={styles.tooltip + ' ' + styles[position] + ' ' + className}
+      style={{ '--_delay': delay + 'ms' } as React.CSSProperties}
+    >
+      {children}
+    </div>
+  )
+}

src/components/UserSidebarMenu.test.tsx

@@ -1,6 +1,11 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import UserSidebarMenu from './UserSidebarMenu'
-import { BrowserRouter } from 'react-router-dom'
+import {
+  Route,
+  RouterProvider,
+  createMemoryRouter,
+  createRoutesFromElements,
+} from 'react-router-dom'
 import { Models } from '@kittycad/lib'
 import { GlobalStateProvider } from './GlobalStateProvider'
 import CommandBarProvider from './CommandBar'
@@ -93,11 +98,24 @@ describe('UserSidebarMenu tests', () => {
 
 function TestWrap({ children }: { children: React.ReactNode }) {
   // wrap in router and xState context
-  return (
-    <BrowserRouter>
+  // We have to use a memory router in the testing environment,
+  // and we have to use the createMemoryRouter function instead of <MemoryRouter /> as of react-router v6.4:
+  // https://reactrouter.com/en/6.16.0/routers/picking-a-router#using-v64-data-apis
+  const router = createMemoryRouter(
+    createRoutesFromElements(
+      <Route
+        path="/file/:id"
+        element={
           <CommandBarProvider>
             <GlobalStateProvider>{children}</GlobalStateProvider>
           </CommandBarProvider>
-    </BrowserRouter>
+        }
+      />
+    ),
+    {
+      initialEntries: ['/file/new'],
+      initialIndex: 0,
+    }
   )
+  return <RouterProvider router={router} />
 }

src/components/UserSidebarMenu.tsx

@@ -10,20 +10,19 @@ import { faGithub } from '@fortawesome/free-brands-svg-icons'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { Fragment, useState } from 'react'
 import { paths } from '../Router'
-import makeUrlPathRelative from '../lib/makeUrlPathRelative'
 import { Models } from '@kittycad/lib'
 import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
+import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath'
 
 type User = Models['User_type']
 
 const UserSidebarMenu = ({ user }: { user?: User }) => {
   const location = useLocation()
+  const filePath = useAbsoluteFilePath()
   const displayedName = getDisplayName(user)
   const [imageLoadFailed, setImageLoadFailed] = useState(false)
   const navigate = useNavigate()
-  const {
-    auth: { send },
-  } = useGlobalStateContext()
+  const send = useGlobalStateContext()?.auth?.send
 
   // Fallback logic for displaying user's "name":
   // 1. user.name
@@ -132,11 +131,10 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
                     // since /settings is a nested route the sidebar doesn't close
                     // automatically when navigating to it
                     close()
-                    navigate(
-                      (location.pathname.endsWith('/')
-                        ? location.pathname.slice(0, -1)
-                        : location.pathname) + paths.SETTINGS
-                    )
+                    const targetPath = location.pathname.includes(paths.FILE)
+                      ? filePath + paths.SETTINGS
+                      : paths.HOME + paths.SETTINGS
+                    navigate(targetPath)
                   }}
                 >
                   Settings

src/components/WasmErrBanner.tsx

@@ -0,0 +1,63 @@
+import { Dialog } from '@headlessui/react'
+import { useState } from 'react'
+import { ActionButton } from './ActionButton'
+import { faX } from '@fortawesome/free-solid-svg-icons'
+import { useKclContext } from 'lang/KclSinglton'
+
+export function WasmErrBanner() {
+  const [isBannerDismissed, setBannerDismissed] = useState(false)
+
+  const { wasmInitFailed } = useKclContext()
+
+  if (!wasmInitFailed) return null
+
+  return (
+    <Dialog
+      className="fixed inset-0 top-auto z-50 bg-warn-20 text-warn-80 px-8 py-4"
+      open={!isBannerDismissed}
+      onClose={() => ({})}
+    >
+      <Dialog.Panel className="max-w-3xl mx-auto">
+        <div className="flex gap-2 justify-between items-start">
+          <h2 className="text-xl font-bold mb-4">
+            Problem with our WASM blob :(
+          </h2>
+          <ActionButton
+            Element="button"
+            onClick={() => setBannerDismissed(true)}
+            icon={{
+              icon: faX,
+              bgClassName:
+                'bg-warn-70 hover:bg-warn-80 dark:bg-warn-70 dark:hover:bg-warn-80',
+              iconClassName:
+                'text-warn-10 group-hover:text-warn-10 dark:text-warn-10 dark:group-hover:text-warn-10',
+            }}
+            className="!p-0 !bg-transparent !border-transparent"
+          />
+        </div>
+        <p>
+          <a
+            href="https://webassembly.org/"
+            rel="noopener noreferrer"
+            target="_blank"
+            className="text-warn-80 dark:text-warn-80 dark:hover:text-warn-70 underline"
+          >
+            WASM or web assembly
+          </a>{' '}
+          is core part of how our app works. It might because you OS is not
+          up-to-date. If you're able to update your OS to a later version, try
+          that. If not create an issue on{' '}
+          <a
+            href="https://github.com/KittyCAD/modeling-app"
+            rel="noopener noreferrer"
+            target="_blank"
+            className="text-warn-80 dark:text-warn-80 dark:hover:text-warn-70 underline"
+          >
+            our Github
+          </a>
+          .
+        </p>
+      </Dialog.Panel>
+    </Dialog>
+  )
+}

src/editor/lsp/client.ts

@@ -108,6 +108,7 @@ export default class Client extends jsrpc.JSONRPCServerAndClient {
           break
         }
       }
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       messageString += message
       return
     })

src/editor/lsp/codec.ts

@@ -26,7 +26,7 @@ export class Codec {
   }
 }
 
-// FIXME: tracing effiency
+// FIXME: tracing efficiency
 export class IntoServer
   extends Queue<Uint8Array>
   implements AsyncGenerator<Uint8Array, never, void>

src/editor/lsp/language.ts

@@ -9,6 +9,7 @@ import { LanguageServerClient } from '.'
 import { kclPlugin } from './plugin'
 import type * as LSP from 'vscode-languageserver-protocol'
 import { parser as jsParser } from '@lezer/javascript'
+import { EditorState } from '@uiw/react-codemirror'
 
 const data = defineLanguageFacet({})
 
@@ -22,7 +23,25 @@ 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')
+  const lang = new Language(
+    data,
+    jsParser,
+    [
+      EditorState.languageData.of(() => [
+        {
+          // https://codemirror.net/docs/ref/#commands.CommentTokens
+          commentTokens: {
+            line: '//',
+            block: {
+              open: '/*',
+              close: '*/',
+            },
+          },
+        },
+      ]),
+    ],
+    'kcl'
+  )
 
   // Create our supporting extension.
   const kclLsp = kclPlugin({

src/env.ts

@@ -1,8 +1,5 @@
-// all web app environment variables are defined here, jest doesn't like import.meta.env so centralising them here
-// allows us to mock them in one place, see src/setupTests.ts, it pulls the variable names and valuse from .env.development
-// note the exported variable name must match the env var name for the jest mocks to work
-// i.e. const VITE_MY_VAR = import.meta.env.VITE_MY_VAR
-// Maybe this file should be generated in a GHA from .env.development?
+// env vars were centralised so they could be mocked in jest
+// but isn't needed anymore with vite, so is now just a convention
 
 export const VITE_KC_API_WS_MODELING_URL = import.meta.env
   .VITE_KC_API_WS_MODELING_URL
@@ -12,3 +9,4 @@ 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
+export const DEV = import.meta.env.DEV

src/hooks/useAbsoluteFilePath.ts

@@ -0,0 +1,12 @@
+import { BROWSER_FILE_NAME, IndexLoaderData, paths } from 'Router'
+import { useRouteLoaderData } from 'react-router-dom'
+
+export function useAbsoluteFilePath() {
+  const routeData = useRouteLoaderData(paths.FILE) as IndexLoaderData
+
+  return (
+    paths.FILE +
+    '/' +
+    encodeURIComponent(routeData?.file?.path || BROWSER_FILE_NAME)
+  )
+}

src/hooks/useAppMode.ts

@@ -1,289 +0,0 @@
-// 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'
-import { engineCommandManager } from '../lang/std/engineConnection'
-
-interface DefaultPlanes {
-  xy: string
-  // TODO re-enable
-  // yz: string
-  // xz: string
-}
-
-export function useAppMode() {
-  const { guiMode, setGuiMode, selectionRanges, selectionRangeTypeMap } =
-    useStore((s) => ({
-      guiMode: s.guiMode,
-      setGuiMode: s.setGuiMode,
-      selectionRanges: s.selectionRanges,
-      selectionRangeTypeMap: s.selectionRangeTypeMap,
-    }))
-  const [defaultPlanes, setDefaultPlanes] = useState<DefaultPlanes | null>(null)
-  useEffect(() => {
-    if (
-      guiMode.mode === 'sketch' &&
-      guiMode.sketchMode === 'selectFace' &&
-      engineCommandManager
-    ) {
-      const createAndShowPlanes = async () => {
-        let localDefaultPlanes: DefaultPlanes
-        if (!defaultPlanes) {
-          localDefaultPlanes = await initDefaultPlanes(engineCommandManager)
-          setDefaultPlanes(localDefaultPlanes)
-        } else {
-          localDefaultPlanes = defaultPlanes
-        }
-        setDefaultPlanesHidden(engineCommandManager, localDefaultPlanes, false)
-      }
-      createAndShowPlanes()
-    }
-    if (
-      guiMode.mode === 'sketch' &&
-      guiMode.sketchMode === 'enterSketchEdit' &&
-      engineCommandManager
-    ) {
-      const enableSketchMode = async () => {
-        let localDefaultPlanes: DefaultPlanes
-        if (!defaultPlanes) {
-          localDefaultPlanes = await initDefaultPlanes(engineCommandManager)
-          setDefaultPlanes(localDefaultPlanes)
-        } else {
-          localDefaultPlanes = defaultPlanes
-        }
-        setDefaultPlanesHidden(engineCommandManager, localDefaultPlanes, true)
-        // TODO figure out the plane to use based on the sketch
-        // maybe it's easier to make a new plane than rely on the defaults
-        await engineCommandManager.sendSceneCommand({
-          type: 'modeling_cmd_req',
-          cmd_id: uuidv4(),
-          cmd: {
-            type: 'sketch_mode_enable',
-            plane_id: localDefaultPlanes.xy,
-            ortho: true,
-            animated: !isReducedMotion(),
-          },
-        })
-        const proms: any[] = []
-        proms.push(
-          engineCommandManager.sendSceneCommand({
-            type: 'modeling_cmd_req',
-            cmd_id: uuidv4(),
-            cmd: {
-              type: 'edit_mode_enter',
-              target: guiMode.pathId,
-            },
-          })
-        )
-        await Promise.all(proms)
-      }
-      enableSketchMode()
-      setGuiMode({
-        ...guiMode,
-        sketchMode: 'sketchEdit',
-      })
-    }
-    if (guiMode.mode !== 'sketch' && defaultPlanes) {
-      setDefaultPlanesHidden(engineCommandManager, defaultPlanes, true)
-    }
-    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(),
-          },
-        })
-        setDefaultPlanesHidden(engineCommandManager, defaultPlanes, true)
-        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,
-            },
-          })
-        )
-        await Promise.all(proms)
-        setGuiMode({
-          mode: 'sketch',
-          sketchMode: 'sketchEdit',
-          rotation: [0, 0, 0, 1],
-          position: [0, 0, 0],
-          pathToNode: [],
-          pathId: sketchUuid,
-        })
-
-        console.log('sketchModeResponse', sketchModeResponse)
-      },
-    })
-    return unSub
-  }, [engineCommandManager, defaultPlanes])
-}
-
-async 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()
-  await 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,
-  })
-  await engineCommandManager.sendSceneCommand({
-    type: 'modeling_cmd_req',
-    cmd: {
-      type: 'plane_set_color',
-      plane_id: planeId,
-      color,
-    },
-    cmd_id: uuidv4(),
-  })
-  return planeId
-}
-
-function setDefaultPlanesHidden(
-  engineCommandManager: EngineCommandManager,
-  defaultPlanes: DefaultPlanes,
-  hidden: boolean
-) {
-  Object.values(defaultPlanes).forEach((planeId) => {
-    engineCommandManager.sendSceneCommand({
-      type: 'modeling_cmd_req',
-      cmd_id: uuidv4(),
-      cmd: {
-        type: 'object_visible',
-        object_id: planeId,
-        hidden: hidden,
-      },
-    })
-  })
-}
-
-async function initDefaultPlanes(
-  engineCommandManager: EngineCommandManager
-): Promise<DefaultPlanes> {
-  const xy = await 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 },
-  })
-  // TODO re-enable
-  // 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 },
-  // })
-  return { xy }
-}
-
-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' ||
-            artifact.commandType === 'close_path')
-      )
-  )
-  return overlapingEntries.length && overlapingEntries[0][1].parentId
-    ? overlapingEntries[0][1].parentId
-    : overlapingEntries.find(
-        ([, artifact]) => artifact.commandType === 'start_path'
-      )?.[0] || false
-}

src/hooks/useEngineConnectionSubscriptions.ts

@@ -1,13 +1,16 @@
 import { useEffect } from 'react'
 import { useStore } from 'useStore'
 import { engineCommandManager } from '../lang/std/engineConnection'
+import { useModelingContext } from './useModelingContext'
+import { getEventForSelectWithPoint } from 'lib/selections'
 
 export function useEngineConnectionSubscriptions() {
-  const { setCursor2, setHighlightRange, highlightRange } = useStore((s) => ({
-    setCursor2: s.setCursor2,
+  const { setHighlightRange, highlightRange } = useStore((s) => ({
     setHighlightRange: s.setHighlightRange,
     highlightRange: s.highlightRange,
   }))
+  const { send, context } = useModelingContext()
+
   useEffect(() => {
     if (!engineCommandManager) return
 
@@ -16,7 +19,7 @@ export function useEngineConnectionSubscriptions() {
       callback: ({ data }) => {
         if (data?.entity_id) {
           const sourceRange =
-            engineCommandManager.sourceRangeMap[data.entity_id]
+            engineCommandManager.artifactMap?.[data.entity_id]?.range
           setHighlightRange(sourceRange)
         } else if (
           !highlightRange ||
@@ -28,18 +31,21 @@ export function useEngineConnectionSubscriptions() {
     })
     const unSubClick = engineCommandManager.subscribeTo({
       event: 'select_with_point',
-      callback: ({ data }) => {
-        if (!data?.entity_id) {
-          setCursor2()
-          return
-        }
-        const sourceRange = engineCommandManager.sourceRangeMap[data.entity_id]
-        setCursor2({ range: sourceRange, type: 'default' })
+      callback: async (engineEvent) => {
+        const event = await getEventForSelectWithPoint(engineEvent, {
+          sketchEnginePathId: context.sketchEnginePathId,
+        })
+        event && send(event)
       },
     })
     return () => {
       unSubHover()
       unSubClick()
     }
-  }, [engineCommandManager, setCursor2, setHighlightRange, highlightRange])
+  }, [
+    engineCommandManager,
+    setHighlightRange,
+    highlightRange,
+    context.sketchEnginePathId,
+  ])
 }

src/hooks/useFileContext.ts

@@ -0,0 +1,6 @@
+import { FileContext } from 'components/FileMachineProvider'
+import { useContext } from 'react'
+
+export const useFileContext = () => {
+  return useContext(FileContext)
+}

src/hooks/useModelingContext.ts

@@ -0,0 +1,6 @@
+import { ModelingMachineContext } from 'components/ModelingMachineProvider'
+import { useContext } from 'react'
+
+export const useModelingContext = () => {
+  return useContext(ModelingMachineContext)
+}

src/hooks/useSetupEngineManager.ts

@@ -1,9 +1,9 @@
 import { useLayoutEffect, useEffect, useRef } from 'react'
-import { _executor } from '../lang/wasm'
+import { parse } from '../lang/wasm'
 import { useStore } from '../useStore'
 import { engineCommandManager } from '../lang/std/engineConnection'
 import { deferExecution } from 'lib/utils'
-import { v4 as uuidv4 } from 'uuid'
+import { kclManager } from 'lang/KclSinglton'
 
 export function useSetupEngineManager(
   streamRef: React.RefObject<HTMLDivElement>,
@@ -14,13 +14,11 @@ export function useSetupEngineManager(
     setIsStreamReady,
     setStreamDimensions,
     streamDimensions,
-    executeCode,
   } = useStore((s) => ({
     setMediaStream: s.setMediaStream,
     setIsStreamReady: s.setIsStreamReady,
     setStreamDimensions: s.setStreamDimensions,
     streamDimensions: s.streamDimensions,
-    executeCode: s.executeCode,
   }))
 
   const streamWidth = streamRef?.current?.offsetWidth
@@ -28,10 +26,6 @@ export function useSetupEngineManager(
 
   const hasSetNonZeroDimensions = useRef<boolean>(false)
 
-  useEffect(() => {
-    executeCode()
-  }, [])
-
   useLayoutEffect(() => {
     // Load the engine command manager once with the initial width and height,
     // then we do not want to reload it.
@@ -45,7 +39,10 @@ export function useSetupEngineManager(
         setIsStreamReady,
         width: quadWidth,
         height: quadHeight,
-        executeCode,
+        executeCode: (code?: string) => {
+          const _ast = parse(code || kclManager.code)
+          return kclManager.executeAst(_ast, true)
+        },
         token,
       })
       setStreamDimensions({
@@ -85,9 +82,14 @@ export function useSetupEngineManager(
 }
 
 function getDimensions(streamWidth?: number, streamHeight?: number) {
+  const maxResolution = 2000
   const width = streamWidth ? streamWidth : 0
-  const quadWidth = Math.round(width / 4) * 4
   const height = streamHeight ? streamHeight : 0
-  const quadHeight = Math.round(height / 4) * 4
+  const ratio = Math.min(
+    Math.min(maxResolution / width, maxResolution / height),
+    1.0
+  )
+  const quadWidth = Math.round((width * ratio) / 4) * 4
+  const quadHeight = Math.round((height * ratio) / 4) * 4
   return { width: quadWidth, height: quadHeight }
 }

src/hooks/useToolbarGuards.ts

@@ -1,52 +1,45 @@
-import { SetVarNameModal } from 'components/SetVarNameModal'
+import {
+  SetVarNameModal,
+  createSetVarNameModal,
+} from 'components/SetVarNameModal'
+import { kclManager } from 'lang/KclSinglton'
 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'
+import { useModelingContext } from './useModelingContext'
 
-const getModalInfo = create(SetVarNameModal as any)
+const getModalInfo = createSetVarNameModal(SetVarNameModal)
 
 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 { context } = useModelingContext()
   const [enable, setEnabled] = useState(false)
   useEffect(() => {
-    if (!ast) return
-
     const { isSafe, value } = isNodeSafeToReplace(
-      ast,
-      selectionRanges.codeBasedSelections?.[0]?.range || []
+      kclManager.ast,
+      context.selectionRanges.codeBasedSelections?.[0]?.range || []
     )
     const canReplace = isSafe && value.type !== 'Identifier'
-    const isOnlyOneSelection = selectionRanges.codeBasedSelections.length === 1
+    const isOnlyOneSelection =
+      context.selectionRanges.codeBasedSelections.length === 1
 
     const _enableHorz = canReplace && isOnlyOneSelection
     setEnabled(_enableHorz)
-  }, [guiMode, selectionRanges])
+  }, [context.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,
+        kclManager.ast,
+        kclManager.programMemory,
+        context.selectionRanges.codeBasedSelections[0].range,
         variableName
       )
 
-      updateAst(_modifiedAst, true)
+      kclManager.updateAst(_modifiedAst, true)
     } catch (e) {
       console.log('error', e)
     }

src/index.tsx

@@ -4,6 +4,13 @@ import reportWebVitals from './reportWebVitals'
 import { Toaster } from 'react-hot-toast'
 import { Router } from './Router'
 import { HotkeysProvider } from 'react-hotkeys-hook'
+import { inspect } from '@xstate/inspect'
+import { DEV } from 'env'
+
+if (DEV)
+  inspect({
+    iframe: false,
+  })
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 

src/lang/KclSinglton.tsx

@@ -0,0 +1,450 @@
+import { executeAst, executeCode } from 'useStore'
+import { Selections } from 'lib/selections'
+import { KCLError } from './errors'
+import {
+  EngineCommandManager,
+  engineCommandManager,
+} from './std/engineConnection'
+import { deferExecution } from 'lib/utils'
+import {
+  initPromise,
+  parse,
+  PathToNode,
+  Program,
+  ProgramMemory,
+  recast,
+} from 'lang/wasm'
+import { bracket } from 'lib/exampleKcl'
+import { createContext, useContext, useEffect, useState } from 'react'
+import { getNodeFromPath } from './queryAst'
+import { IndexLoaderData } from 'Router'
+import { Params, useLoaderData } from 'react-router-dom'
+import { isTauri } from 'lib/isTauri'
+import { writeTextFile } from '@tauri-apps/api/fs'
+import { toast } from 'react-hot-toast'
+import { useParams } from 'react-router-dom'
+
+const PERSIST_CODE_TOKEN = 'persistCode'
+
+class KclManager {
+  private _code = bracket
+  private _ast: Program = {
+    body: [],
+    start: 0,
+    end: 0,
+    nonCodeMeta: {
+      nonCodeNodes: {},
+      start: [],
+    },
+  }
+  private _programMemory: ProgramMemory = {
+    root: {},
+    return: null,
+  }
+  private _logs: string[] = []
+  private _kclErrors: KCLError[] = []
+  private _isExecuting = false
+  private _wasmInitFailed = true
+  private _params: Params<string> = {}
+
+  engineCommandManager: EngineCommandManager
+  private _defferer = deferExecution((code: string) => {
+    const ast = this.safeParse(code)
+    if (!ast) return
+    try {
+      const fmtAndStringify = (ast: Program) =>
+        JSON.stringify(parse(recast(ast)))
+      const isAstTheSame = fmtAndStringify(ast) === fmtAndStringify(this._ast)
+      if (isAstTheSame) return
+    } catch (e) {
+      console.error(e)
+    }
+    this.executeAst(ast)
+  }, 600)
+
+  private _isExecutingCallback: (arg: boolean) => void = () => {}
+  private _codeCallBack: (arg: string) => void = () => {}
+  private _astCallBack: (arg: Program) => void = () => {}
+  private _programMemoryCallBack: (arg: ProgramMemory) => void = () => {}
+  private _logsCallBack: (arg: string[]) => void = () => {}
+  private _kclErrorsCallBack: (arg: KCLError[]) => void = () => {}
+  private _wasmInitFailedCallback: (arg: boolean) => void = () => {}
+  private _executeCallback: () => void = () => {}
+
+  get ast() {
+    return this._ast
+  }
+  set ast(ast) {
+    this._ast = ast
+    this._astCallBack(ast)
+  }
+
+  get code() {
+    return this._code
+  }
+  set code(code) {
+    this._code = code
+    this._codeCallBack(code)
+    if (isTauri()) {
+      setTimeout(() => {
+        // Wait one event loop to give a chance for params to be set
+        // Save the file to disk
+        // Note that PROJECT_ENTRYPOINT is hardcoded until we support multiple files
+        this._params.id &&
+          writeTextFile(this._params.id, code).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')
+          })
+      })
+    } else {
+      localStorage.setItem(PERSIST_CODE_TOKEN, code)
+    }
+  }
+
+  get programMemory() {
+    return this._programMemory
+  }
+  set programMemory(programMemory) {
+    this._programMemory = programMemory
+    this._programMemoryCallBack(programMemory)
+  }
+
+  get defaultPlanes() {
+    return this?.engineCommandManager?.defaultPlanes
+  }
+
+  get logs() {
+    return this._logs
+  }
+  set logs(logs) {
+    this._logs = logs
+    this._logsCallBack(logs)
+  }
+
+  get kclErrors() {
+    return this._kclErrors
+  }
+  set kclErrors(kclErrors) {
+    this._kclErrors = kclErrors
+    this._kclErrorsCallBack(kclErrors)
+  }
+
+  get isExecuting() {
+    return this._isExecuting
+  }
+  set isExecuting(isExecuting) {
+    this._isExecuting = isExecuting
+    this._isExecutingCallback(isExecuting)
+  }
+
+  get wasmInitFailed() {
+    return this._wasmInitFailed
+  }
+  set wasmInitFailed(wasmInitFailed) {
+    this._wasmInitFailed = wasmInitFailed
+    this._wasmInitFailedCallback(wasmInitFailed)
+  }
+
+  setParams(params: Params<string>) {
+    this._params = params
+  }
+
+  constructor(engineCommandManager: EngineCommandManager) {
+    this.engineCommandManager = engineCommandManager
+
+    if (isTauri()) {
+      this.code = ''
+      return
+    }
+    const storedCode = localStorage.getItem(PERSIST_CODE_TOKEN)
+    // TODO #819 remove zustand persistence logic in a few months
+    // short term migration, shouldn't make a difference for tauri app users
+    // anyway since that's filesystem based.
+    const zustandStore = JSON.parse(localStorage.getItem('store') || '{}')
+    if (storedCode === null && zustandStore?.state?.code) {
+      this.code = zustandStore.state.code
+      localStorage.setItem(PERSIST_CODE_TOKEN, this._code)
+      zustandStore.state.code = ''
+      localStorage.setItem('store', JSON.stringify(zustandStore))
+    } else if (storedCode === null) {
+      console.log('stored brack thing')
+      this.code = bracket
+    } else {
+      this.code = storedCode
+    }
+  }
+  registerCallBacks({
+    setCode,
+    setProgramMemory,
+    setAst,
+    setLogs,
+    setKclErrors,
+    setIsExecuting,
+    setWasmInitFailed,
+  }: {
+    setCode: (arg: string) => void
+    setProgramMemory: (arg: ProgramMemory) => void
+    setAst: (arg: Program) => void
+    setLogs: (arg: string[]) => void
+    setKclErrors: (arg: KCLError[]) => void
+    setIsExecuting: (arg: boolean) => void
+    setWasmInitFailed: (arg: boolean) => void
+  }) {
+    this._codeCallBack = setCode
+    this._programMemoryCallBack = setProgramMemory
+    this._astCallBack = setAst
+    this._logsCallBack = setLogs
+    this._kclErrorsCallBack = setKclErrors
+    this._isExecutingCallback = setIsExecuting
+    this._wasmInitFailedCallback = setWasmInitFailed
+  }
+  registerExecuteCallback(callback: () => void) {
+    this._executeCallback = callback
+  }
+
+  safeParse(code: string): Program | null {
+    try {
+      const ast = parse(code)
+      this.kclErrors = []
+      return ast
+    } catch (e) {
+      console.error('error parsing code', e)
+      if (e instanceof KCLError) {
+        this.kclErrors = [e]
+        if (e.msg === 'file is empty') engineCommandManager.endSession()
+      }
+      return null
+    }
+  }
+
+  async ensureWasmInit() {
+    try {
+      await initPromise
+      if (this.wasmInitFailed) {
+        this.wasmInitFailed = false
+      }
+    } catch (e) {
+      this.wasmInitFailed = true
+    }
+  }
+
+  async executeAst(ast: Program = this._ast, updateCode = false) {
+    await this.ensureWasmInit()
+    this.isExecuting = true
+    const { logs, errors, programMemory } = await executeAst({
+      ast,
+      engineCommandManager: this.engineCommandManager,
+      defaultPlanes: this.defaultPlanes,
+    })
+    this.isExecuting = false
+    this.logs = logs
+    this.kclErrors = errors
+    this.programMemory = programMemory
+    this.ast = { ...ast }
+    if (updateCode) {
+      this.code = recast(ast)
+    }
+    this._executeCallback()
+  }
+  async executeAstMock(ast: Program = this._ast, updateCode = false) {
+    await this.ensureWasmInit()
+    const newCode = recast(ast)
+    const newAst = this.safeParse(newCode)
+    if (!newAst) return
+    await this?.engineCommandManager?.waitForReady
+    if (updateCode) {
+      this.setCode(recast(ast))
+    }
+    this._ast = { ...newAst }
+
+    const { logs, errors, programMemory } = await executeAst({
+      ast: newAst,
+      engineCommandManager: this.engineCommandManager,
+      defaultPlanes: this.defaultPlanes,
+      useFakeExecutor: true,
+    })
+    this._logs = logs
+    this._kclErrors = errors
+    this._programMemory = programMemory
+  }
+  async executeCode(code?: string) {
+    await this.ensureWasmInit()
+    await this?.engineCommandManager?.waitForReady
+    if (!this?.engineCommandManager?.planesInitialized()) return
+    const result = await executeCode({
+      engineCommandManager,
+      code: code || this._code,
+      lastAst: this._ast,
+      defaultPlanes: this.defaultPlanes,
+      force: false,
+    })
+    if (!result.isChange) return
+    const { logs, errors, programMemory, ast } = result
+    this.logs = logs
+    this.kclErrors = errors
+    this.programMemory = programMemory
+    this.ast = ast
+    if (code) this.code = code
+  }
+  setCode(code: string, shouldWriteFile = true) {
+    if (shouldWriteFile) {
+      // use the normal code setter
+      this.code = code
+      return
+    }
+    this._code = code
+    this._codeCallBack(code)
+  }
+  setCodeAndExecute(code: string, shouldWriteFile = true) {
+    this.setCode(code, shouldWriteFile)
+    if (code.trim()) {
+      this._defferer(code)
+      return
+    }
+    this._ast = {
+      body: [],
+      start: 0,
+      end: 0,
+      nonCodeMeta: {
+        nonCodeNodes: {},
+        start: [],
+      },
+    }
+    this._programMemory = {
+      root: {},
+      return: null,
+    }
+    this.engineCommandManager.endSession()
+  }
+  format() {
+    const ast = this.safeParse(this.code)
+    if (!ast) return
+    this.code = recast(ast)
+  }
+  // There's overlapping responsibility between updateAst and executeAst.
+  // updateAst was added as it was used a lot before xState migration so makes the port easier.
+  // but should probably have think about which of the function to keep
+  async updateAst(
+    ast: Program,
+    execute: boolean,
+    optionalParams?: {
+      focusPath?: PathToNode
+    }
+  ): Promise<Selections | null> {
+    const newCode = recast(ast)
+    const astWithUpdatedSource = this.safeParse(newCode)
+    if (!astWithUpdatedSource) return null
+    let returnVal: Selections | null = null
+
+    if (optionalParams?.focusPath) {
+      const { node } = getNodeFromPath<any>(
+        astWithUpdatedSource,
+        optionalParams?.focusPath
+      )
+      const { start, end } = node
+      if (!start || !end) return null
+      returnVal = {
+        codeBasedSelections: [
+          {
+            type: 'default',
+            range: [start, end],
+          },
+        ],
+        otherSelections: [],
+      }
+    }
+
+    if (execute) {
+      // Call execute on the set ast.
+      await this.executeAst(astWithUpdatedSource, true)
+    } else {
+      // When we don't re-execute, we still want to update the program
+      // memory with the new ast. So we will hit the mock executor
+      // instead.
+      await this.executeAstMock(astWithUpdatedSource, true)
+    }
+    return returnVal
+  }
+
+  getPlaneId(axis: 'xy' | 'xz' | 'yz'): string {
+    return this.defaultPlanes[axis]
+  }
+
+  showPlanes() {
+    this.engineCommandManager.setPlaneHidden(this.defaultPlanes.xy, false)
+    this.engineCommandManager.setPlaneHidden(this.defaultPlanes.yz, false)
+    this.engineCommandManager.setPlaneHidden(this.defaultPlanes.xz, false)
+  }
+
+  hidePlanes() {
+    this.engineCommandManager.setPlaneHidden(this.defaultPlanes.xy, true)
+    this.engineCommandManager.setPlaneHidden(this.defaultPlanes.yz, true)
+    this.engineCommandManager.setPlaneHidden(this.defaultPlanes.xz, true)
+  }
+}
+
+export const kclManager = new KclManager(engineCommandManager)
+
+const KclContext = createContext({
+  code: kclManager.code,
+  programMemory: kclManager.programMemory,
+  ast: kclManager.ast,
+  isExecuting: kclManager.isExecuting,
+  errors: kclManager.kclErrors,
+  logs: kclManager.logs,
+  wasmInitFailed: kclManager.wasmInitFailed,
+})
+
+export function useKclContext() {
+  return useContext(KclContext)
+}
+
+export function KclContextProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  // If we try to use this component anywhere but under the paths.FILE route it will fail
+  // Because useLoaderData assumes we are on within it's context.
+  const { code: loadedCode } = useLoaderData() as IndexLoaderData
+  const [code, setCode] = useState(loadedCode || kclManager.code)
+  const [programMemory, setProgramMemory] = useState(kclManager.programMemory)
+  const [ast, setAst] = useState(kclManager.ast)
+  const [isExecuting, setIsExecuting] = useState(false)
+  const [errors, setErrors] = useState<KCLError[]>([])
+  const [logs, setLogs] = useState<string[]>([])
+  const [wasmInitFailed, setWasmInitFailed] = useState(false)
+
+  useEffect(() => {
+    kclManager.registerCallBacks({
+      setCode,
+      setProgramMemory,
+      setAst,
+      setLogs,
+      setKclErrors: setErrors,
+      setIsExecuting,
+      setWasmInitFailed,
+    })
+  }, [])
+
+  const params = useParams()
+  useEffect(() => {
+    kclManager.setParams(params)
+  }, [params])
+  return (
+    <KclContext.Provider
+      value={{
+        code,
+        programMemory,
+        ast,
+        isExecuting,
+        errors,
+        logs,
+        wasmInitFailed,
+      }}
+    >
+      {children}
+    </KclContext.Provider>
+  )
+}

src/lang/abstractSyntaxTree.test.ts

@@ -141,42 +141,6 @@ const newVar = myVar + 1
 })
 
 describe('testing function declaration', () => {
-  test('fn funcN = () => {}', () => {
-    const { body } = parse('fn funcN = () => {}')
-    delete (body[0] as any).declarations[0].init.body.nonCodeMeta
-    expect(body).toEqual([
-      {
-        type: 'VariableDeclaration',
-        start: 0,
-        end: 19,
-        kind: 'fn',
-        declarations: [
-          {
-            type: 'VariableDeclarator',
-            start: 3,
-            end: 19,
-            id: {
-              type: 'Identifier',
-              start: 3,
-              end: 8,
-              name: 'funcN',
-            },
-            init: {
-              type: 'FunctionExpression',
-              start: 11,
-              end: 19,
-              params: [],
-              body: {
-                start: 17,
-                end: 19,
-                body: [],
-              },
-            },
-          },
-        ],
-      },
-    ])
-  })
   test('fn funcN = (a, b) => {return a + b}', () => {
     const { body } = parse(
       ['fn funcN = (a, b) => {', '  return a + b', '}'].join('\n')
@@ -367,9 +331,6 @@ const myVar = funcN(1, 2)`
                   raw: '2',
                 },
               ],
-              function: {
-                type: 'InMemory',
-              },
               optional: false,
             },
           },
@@ -439,7 +400,6 @@ describe('testing pipe operator special', () => {
                       ],
                     },
                   ],
-                  function: expect.any(Object),
                   optional: false,
                 },
                 {
@@ -476,7 +436,6 @@ describe('testing pipe operator special', () => {
                     },
                     { type: 'PipeSubstitution', start: 59, end: 60 },
                   ],
-                  function: expect.any(Object),
                   optional: false,
                 },
                 {
@@ -549,7 +508,6 @@ describe('testing pipe operator special', () => {
                     },
                     { type: 'PipeSubstitution', start: 105, end: 106 },
                   ],
-                  function: expect.any(Object),
                   optional: false,
                 },
                 {
@@ -586,7 +544,6 @@ describe('testing pipe operator special', () => {
                     },
                     { type: 'PipeSubstitution', start: 128, end: 129 },
                   ],
-                  function: expect.any(Object),
                   optional: false,
                 },
                 {
@@ -609,9 +566,6 @@ describe('testing pipe operator special', () => {
                     },
                     { type: 'PipeSubstitution', start: 143, end: 144 },
                   ],
-                  function: {
-                    type: 'InMemory',
-                  },
                   optional: false,
                 },
               ],
@@ -691,9 +645,6 @@ describe('testing pipe operator special', () => {
                       end: 35,
                     },
                   ],
-                  function: {
-                    type: 'InMemory',
-                  },
                   optional: false,
                 },
               ],
@@ -1381,7 +1332,7 @@ describe('nests binary expressions correctly', () => {
       ],
     })
   })
-  it('should nest properly with two opperators of equal precedence', () => {
+  it('should nest properly with two operators of equal precedence', () => {
     const code = `const yo = 1 + 2 - 3`
     const { body } = parse(code)
     expect((body[0] as any).declarations[0].init).toEqual({
@@ -1418,7 +1369,7 @@ describe('nests binary expressions correctly', () => {
       },
     })
   })
-  it('should nest properly with two opperators of equal (but higher) precedence', () => {
+  it('should nest properly with two operators of equal (but higher) precedence', () => {
     const code = `const yo = 1 * 2 / 3`
     const { body } = parse(code)
     expect((body[0] as any).declarations[0].init).toEqual({
@@ -1479,7 +1430,7 @@ describe('nests binary expressions correctly', () => {
             type: 'BinaryExpression',
             operator: '*',
             start: 15,
-            end: 26,
+            end: 25,
             left: { type: 'Literal', value: 2, raw: '2', start: 15, end: 16 },
             right: {
               type: 'BinaryExpression',
@@ -1513,22 +1464,23 @@ const key = 'c'`
     const nonCodeMetaInstance = {
       type: 'NonCodeNode',
       start: code.indexOf('\n// this is a comment'),
-      end: code.indexOf('const key'),
+      end: code.indexOf('const key') - 1,
       value: {
         type: 'blockComment',
+        style: 'line',
         value: 'this is a comment',
       },
     }
     const { nonCodeMeta } = parse(code)
-    expect(nonCodeMeta.nonCodeNodes[0]).toEqual(nonCodeMetaInstance)
+    expect(nonCodeMeta.nonCodeNodes[0][0]).toEqual(nonCodeMetaInstance)
 
     // extra whitespace won't change it's position (0) or value (NB the start end would have changed though)
     const codeWithExtraStartWhitespace = '\n\n\n' + code
     const { nonCodeMeta: nonCodeMeta2 } = parse(codeWithExtraStartWhitespace)
-    expect(nonCodeMeta2.nonCodeNodes[0].value).toStrictEqual(
+    expect(nonCodeMeta2.nonCodeNodes[0][0].value).toStrictEqual(
       nonCodeMetaInstance.value
     )
-    expect(nonCodeMeta2.nonCodeNodes[0].start).not.toBe(
+    expect(nonCodeMeta2.nonCodeNodes[0][0].start).not.toBe(
       nonCodeMetaInstance.start
     )
   })
@@ -1546,12 +1498,13 @@ const key = 'c'`
     const indexOfSecondLineToExpression = 2
     const sketchNonCodeMeta = (body as any)[0].declarations[0].init.nonCodeMeta
       .nonCodeNodes
-    expect(sketchNonCodeMeta[indexOfSecondLineToExpression]).toEqual({
+    expect(sketchNonCodeMeta[indexOfSecondLineToExpression][0]).toEqual({
       type: 'NonCodeNode',
       start: 106,
-      end: 166,
+      end: 163,
       value: {
-        type: 'blockComment',
+        type: 'inlineComment',
+        style: 'block',
         value: 'this is\n      a comment\n      spanning a few lines',
       },
     })
@@ -1568,14 +1521,15 @@ const key = 'c'`
 
     const { body } = parse(code)
     const sketchNonCodeMeta = (body[0] as any).declarations[0].init.nonCodeMeta
-      .nonCodeNodes
-    expect(sketchNonCodeMeta[3]).toEqual({
+      .nonCodeNodes[3][0]
+    expect(sketchNonCodeMeta).toEqual({
       type: 'NonCodeNode',
       start: 125,
-      end: 141,
+      end: 138,
       value: {
         type: 'blockComment',
         value: 'a comment',
+        style: 'line',
       },
     })
   })
@@ -1600,7 +1554,6 @@ 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,
       },
     })
@@ -1634,12 +1587,10 @@ 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,
     })
   })
@@ -1671,7 +1622,6 @@ 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 },
@@ -1693,11 +1643,7 @@ describe('parsing errors', () => {
     }
     const theError = _theError as any
     expect(theError).toEqual(
-      new KCLError(
-        'unexpected',
-        'Unexpected token Token { token_type: Brace, start: 29, end: 30, value: "}" }',
-        [[29, 30]]
-      )
+      new KCLError('syntax', 'Unexpected token', [[27, 28]])
     )
   })
 })

src/lang/artifact.test.ts

@@ -7,7 +7,8 @@ describe('testing artifacts', () => {
   // Enable rotations #152
   test('sketch artifacts', async () => {
     const code = `
-const mySketch001 = startSketchAt([0, 0])
+const mySketch001 = startSketchOn('XY')
+  |> startProfileAt([0, 0], %)
   |> lineTo([-1.59, -1.54], %)
   |> lineTo([0.46, -5.82], %)
   // |> rx(45, %)
@@ -27,7 +28,7 @@ show(mySketch001)`
           name: '',
           __geoMeta: {
             id: expect.any(String),
-            sourceRange: [21, 42],
+            sourceRange: [46, 71],
           },
         },
         value: [
@@ -37,7 +38,7 @@ show(mySketch001)`
             to: [-1.59, -1.54],
             from: [0, 0],
             __geoMeta: {
-              sourceRange: [48, 73],
+              sourceRange: [77, 102],
               id: expect.any(String),
             },
           },
@@ -47,7 +48,7 @@ show(mySketch001)`
             from: [-1.59, -1.54],
             name: '',
             __geoMeta: {
-              sourceRange: [79, 103],
+              sourceRange: [108, 132],
               id: expect.any(String),
             },
           },
@@ -55,14 +56,16 @@ show(mySketch001)`
         position: [0, 0, 0],
         rotation: [0, 0, 0, 1],
         id: expect.any(String),
-        __meta: [{ sourceRange: [21, 42] }],
+        planeId: expect.any(String),
+        __meta: [{ sourceRange: [46, 71] }],
       },
     ])
   })
   test('extrude artifacts', async () => {
     // Enable rotations #152
     const code = `
-const mySketch001 = startSketchAt([0, 0])
+const mySketch001 = startSketchOn('XY')
+  |> startProfileAt([0, 0], %)
   |> lineTo([-1.59, -1.54], %)
   |> lineTo([0.46, -5.82], %)
   // |> rx(45, %)
@@ -82,7 +85,7 @@ show(mySketch001)`
         height: 2,
         position: [0, 0, 0],
         rotation: [0, 0, 0, 1],
-        __meta: [{ sourceRange: [21, 42] }],
+        __meta: [{ sourceRange: [46, 71] }],
       },
     ])
   })
@@ -90,7 +93,8 @@ show(mySketch001)`
     // Enable rotations #152
     // TODO #153 in order for getExtrudeWallTransform to work we need to query the engine for the location of a face.
     const code = `
-const sk1 = startSketchAt([0, 0])
+const sk1 = startSketchOn('XY')
+  |> startProfileAt([0, 0], %)
   |> lineTo([-2.5, 0], %)
   |> lineTo({ to: [0, 10], tag: "p" }, %)
   |> lineTo([2.5, 0], %)
@@ -99,7 +103,8 @@ const sk1 = startSketchAt([0, 0])
   // |> ry(5, %)
 const theExtrude = extrude(2, sk1)
 // const theTransf = getExtrudeWallTransform('p', theExtrude)
-const sk2 = startSketchAt([0, 0])
+const sk2 = startSketchOn('XY')
+  |> startProfileAt([0, 0], %)
   |> lineTo([-2.5, 0], %)
   |> lineTo({ to: [0, 3], tag: "p" }, %)
   |> lineTo([2.5, 0], %)
@@ -122,7 +127,7 @@ show(theExtrude, sk2)`
         height: 2,
         position: [0, 0, 0],
         rotation: [0, 0, 0, 1],
-        __meta: [{ sourceRange: [13, 34] }],
+        __meta: [{ sourceRange: [38, 63] }],
       },
       {
         type: 'ExtrudeGroup',
@@ -131,7 +136,7 @@ show(theExtrude, sk2)`
         height: 2,
         position: [0, 0, 0],
         rotation: [0, 0, 0, 1],
-        __meta: [{ sourceRange: [302, 323] }],
+        __meta: [{ sourceRange: [356, 381] }],
       },
     ])
   })

src/lang/errors.ts

@@ -18,6 +18,20 @@ export class KCLError {
   }
 }
 
+export class KCLLexicalError extends KCLError {
+  constructor(msg: string, sourceRanges: [number, number][]) {
+    super('lexical', msg, sourceRanges)
+    Object.setPrototypeOf(this, KCLSyntaxError.prototype)
+  }
+}
+
+export class KCLInternalError extends KCLError {
+  constructor(msg: string, sourceRanges: [number, number][]) {
+    super('internal', msg, sourceRanges)
+    Object.setPrototypeOf(this, KCLSyntaxError.prototype)
+  }
+}
+
 export class KCLSyntaxError extends KCLError {
   constructor(msg: string, sourceRanges: [number, number][]) {
     super('syntax', msg, sourceRanges)
@@ -72,7 +86,7 @@ export class KCLUndefinedValueError extends KCLError {
  * Currently the diagnostics are all errors, but in the future they could include lints.
  * */
 export function kclErrToDiagnostic(errors: KCLError[]): Diagnostic[] {
-  return errors.flatMap((err) => {
+  return errors?.flatMap((err) => {
     return err.sourceRanges.map(([from, to]) => {
       return { from, to, message: err.msg, severity: 'error' }
     })

src/lang/executor.test.ts

@@ -41,7 +41,8 @@ const newVar = myVar + 1`
     expect(root.magicNum.value).toBe(69)
   })
   it('sketch declaration', async () => {
-    let code = `const mySketch = startSketchAt([0,0])
+    let code = `const mySketch = startSketchOn('XY')
+  |> startProfileAt([0,0], %)
   |> lineTo({to: [0,2], tag: "myPath"}, %)
   |> lineTo([2,3], %)
   |> lineTo({ to: [5,-1], tag: "rightPath" }, %)
@@ -57,7 +58,7 @@ show(mySketch)
         to: [0, 2],
         from: [0, 0],
         __geoMeta: {
-          sourceRange: [43, 80],
+          sourceRange: [72, 109],
           id: expect.any(String),
         },
         name: 'myPath',
@@ -68,7 +69,7 @@ show(mySketch)
         from: [0, 2],
         name: '',
         __geoMeta: {
-          sourceRange: [86, 102],
+          sourceRange: [115, 131],
           id: expect.any(String),
         },
       },
@@ -77,7 +78,7 @@ show(mySketch)
         to: [5, -1],
         from: [2, 3],
         __geoMeta: {
-          sourceRange: [108, 151],
+          sourceRange: [137, 180],
           id: expect.any(String),
         },
         name: 'rightPath',
@@ -87,8 +88,8 @@ show(mySketch)
     expect(_return).toEqual([
       {
         type: 'Identifier',
-        start: 174,
-        end: 182,
+        start: 203,
+        end: 211,
         name: 'mySketch',
       },
     ])
@@ -132,7 +133,8 @@ show(mySketch)
   it('execute pipe sketch into call expression', async () => {
     // Enable rotations #152
     const code = [
-      'const mySk1 = startSketchAt([0,0])',
+      "const mySk1 = startSketchOn('XY')",
+      '  |> startProfileAt([0,0], %)',
       '  |> lineTo([1,1], %)',
       '  |> lineTo({to: [0, 1], tag: "myPath"}, %)',
       '  |> lineTo([1,1], %)',
@@ -147,7 +149,7 @@ show(mySketch)
         name: '',
         __geoMeta: {
           id: expect.any(String),
-          sourceRange: [14, 34],
+          sourceRange: [39, 63],
         },
       },
       value: [
@@ -157,7 +159,7 @@ show(mySketch)
           from: [0, 0],
           name: '',
           __geoMeta: {
-            sourceRange: [40, 56],
+            sourceRange: [69, 85],
             id: expect.any(String),
           },
         },
@@ -166,7 +168,7 @@ show(mySketch)
           to: [0, 1],
           from: [1, 1],
           __geoMeta: {
-            sourceRange: [62, 100],
+            sourceRange: [91, 129],
             id: expect.any(String),
           },
           name: 'myPath',
@@ -177,7 +179,7 @@ show(mySketch)
           from: [0, 1],
           name: '',
           __geoMeta: {
-            sourceRange: [106, 122],
+            sourceRange: [135, 151],
             id: expect.any(String),
           },
         },
@@ -185,7 +187,8 @@ show(mySketch)
       position: [0, 0, 0],
       rotation: [0, 0, 0, 1],
       id: expect.any(String),
-      __meta: [{ sourceRange: [14, 34] }],
+      planeId: expect.any(String),
+      __meta: [{ sourceRange: [39, 63] }],
     })
   })
   it('execute array expression', async () => {
@@ -329,7 +332,8 @@ describe('testing math operators', () => {
   })
   it('with unaryExpression in ArrayExpression in CallExpression, checking nothing funny happens when used in a sketch', async () => {
     const code = [
-      'const part001 = startSketchAt([0, 0])',
+      "const part001 = startSketchOn('XY')",
+      '  |> startProfileAt([0, 0], %)',
       '|> line([-2.21, -legLen(5, min(3, 999))], %)',
     ].join('\n')
     const { root } = await exe(code)
@@ -341,7 +345,8 @@ describe('testing math operators', () => {
   it('test that % substitution feeds down CallExp->ArrExp->UnaryExp->CallExp', async () => {
     const code = [
       `const myVar = 3`,
-      `const part001 = startSketchAt([0, 0])`,
+      `const part001 = startSketchOn('XY')`,
+      `  |> startProfileAt([0, 0], %)`,
       `  |> line({ to: [3, 4], tag: 'seg01' }, %)`,
       `  |> line([`,
       `  min(segLen('seg01', %), myVar),`,
@@ -377,7 +382,8 @@ describe('testing math operators', () => {
 describe('Testing Errors', () => {
   it('should throw an error when a variable is not defined', async () => {
     const code = `const myVar = 5
-const theExtrude = startSketchAt([0, 0])
+const theExtrude = startSketchOn('XY')
+  |> startProfileAt([0, 0], %)
   |> line([-2.4, 5], %)
   |> line([-0.76], myVarZ, %)
   |> line([5,5], %)
@@ -388,7 +394,7 @@ show(theExtrude)`
       new KCLError(
         'undefined_value',
         'memory item key `myVarZ` is not defined',
-        [[100, 106]]
+        [[129, 135]]
       )
     )
   })

src/lang/modifyAst.test.ts

@@ -104,13 +104,13 @@ describe('Testing addSketchTo', () => {
         body: [],
         start: 0,
         end: 0,
-        nonCodeMeta: { nonCodeNodes: {}, start: null },
+        nonCodeMeta: { nonCodeNodes: {}, start: [] },
       },
       'yz'
     )
     const str = recast(result.modifiedAst)
-    expect(str).toBe(`const part001 = startSketchAt('default')
-  |> ry(90, %)
+    expect(str).toBe(`const part001 = startSketchOn('YZ')
+  |> startProfileAt('default', %)
   |> line('default', %)
 show(part001)
 `)
@@ -133,7 +133,8 @@ function giveSketchFnCallTagTestHelper(
 }
 
 describe('Testing giveSketchFnCallTag', () => {
-  const code = `const part001 = startSketchAt([0, 0])
+  const code = `const part001 = startSketchOn('XY')
+|> startProfileAt([0, 0], %)
 |> line([-2.57, -0.13], %)
 |> line([0, 0.83], %)
 |> line([0.82, 0.34], %)
@@ -185,7 +186,8 @@ fn ghi = (x) => {
 const abc = 3
 const identifierGuy = 5
 const yo = 5 + 6
-const part001 = startSketchAt([-1.2, 4.83])
+const part001 = startSketchOn('XY')
+|> startProfileAt([-1.2, 4.83], %)
 |> line([2.8, 0], %)
 |> angledLine([100 + 100, 3.09], %)
 |> angledLine([abc, 3.09], %)

src/lang/modifyAst.ts

@@ -1,4 +1,5 @@
-import { Selection, ToolTip } from '../useStore'
+import { ToolTip } from '../useStore'
+import { Selection } from 'lib/selections'
 import {
   Program,
   CallExpression,
@@ -32,21 +33,26 @@ import { isLiteralArrayOrStatic } from './std/sketchcombos'
 
 export function addStartSketch(
   node: Program,
+  axis: 'xy' | 'xz' | 'yz' | '-xy' | '-xz' | '-yz',
   start: [number, number],
   end: [number, number]
 ): { modifiedAst: Program; id: string; pathToNode: PathToNode } {
   const _node = { ...node }
   const _name = findUniqueName(node, 'part')
 
-  const startSketchAt = createCallExpression('startSketchAt', [
+  const startSketchOn = createCallExpressionStdLib('startSketchOn', [
+    createLiteral(axis.toUpperCase()),
+  ])
+  const startProfileAt = createCallExpressionStdLib('startProfileAt', [
     createArrayExpression([createLiteral(start[0]), createLiteral(start[1])]),
+    createPipeSubstitution(),
   ])
   const initialLineTo = createCallExpression('line', [
     createArrayExpression([createLiteral(end[0]), createLiteral(end[1])]),
     createPipeSubstitution(),
   ])
 
-  const pipeBody = [startSketchAt, initialLineTo]
+  const pipeBody = [startSketchOn, startProfileAt, initialLineTo]
 
   const variableDeclaration = createVariableDeclaration(
     _name,
@@ -79,11 +85,11 @@ export function addSketchTo(
   const _node = { ...node }
   const _name = name || findUniqueName(node, 'part')
 
-  const startSketchAt = createCallExpressionStdLib('startSketchAt', [
-    createLiteral('default'),
+  const startSketchOn = createCallExpressionStdLib('startSketchOn', [
+    createLiteral(axis.toUpperCase()),
   ])
-  const rotate = createCallExpression(axis === 'xz' ? 'rx' : 'ry', [
-    createLiteral(90),
+  const startProfileAt = createCallExpressionStdLib('startProfileAt', [
+    createLiteral('default'),
     createPipeSubstitution(),
   ])
   const initialLineTo = createCallExpressionStdLib('line', [
@@ -91,10 +97,7 @@ export function addSketchTo(
     createPipeSubstitution(),
   ])
 
-  const pipeBody =
-    axis !== 'xy'
-      ? [startSketchAt, rotate, initialLineTo]
-      : [startSketchAt, initialLineTo]
+  const pipeBody = [startSketchOn, startProfileAt, initialLineTo]
 
   const variableDeclaration = createVariableDeclaration(
     _name,
@@ -307,7 +310,7 @@ export function extrudeSketch(
   const name = findUniqueName(node, 'part')
   const VariableDeclaration = createVariableDeclaration(name, extrudeCall)
   let showCallIndex = getShowIndex(_node)
-  if (showCallIndex == -1) {
+  if (showCallIndex === -1) {
     // We didn't find a show, so let's just append everything
     showCallIndex = _node.body.length
   }
@@ -477,21 +480,6 @@ export function createCallExpressionStdLib(
       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,
   }
@@ -511,9 +499,6 @@ export function createCallExpression(
       end: 0,
       name,
     },
-    function: {
-      type: 'InMemory',
-    },
     optional: false,
     arguments: args,
   }
@@ -538,7 +523,7 @@ export function createPipeExpression(
     start: 0,
     end: 0,
     body,
-    nonCodeMeta: { nonCodeNodes: {}, start: null },
+    nonCodeMeta: { nonCodeNodes: {}, start: [] },
   }
 }
 

src/lang/queryAst.test.ts

@@ -4,6 +4,8 @@ import {
   isNodeSafeToReplace,
   isTypeInValue,
   getNodePathFromSourceRange,
+  doesPipeHaveCallExp,
+  hasExtrudeSketchGroup,
 } from './queryAst'
 import { enginelessExecutor } from '../lib/testHelpers'
 import {
@@ -26,7 +28,8 @@ const halfArmAngle = armAngle / 2
 const arrExpShouldNotBeIncluded = [1, 2, 3]
 const objExpShouldNotBeIncluded = { a: 1, b: 2, c: 3 }
 
-const part001 = startSketchAt([0, 0])
+const part001 = startSketchOn('XY')
+  |> startProfileAt([0, 0], %)
   |> yLineTo(1, %)
   |> xLine(3.84, %) // selection-range-7ish-before-this
 
@@ -57,7 +60,8 @@ show(part001)`
 })
 
 describe('testing argIsNotIdentifier', () => {
-  const code = `const part001 = startSketchAt([-1.2, 4.83])
+  const code = `const part001 = startSketchOn('XY')
+|> startProfileAt([-1.2, 4.83], %)
 |> line([2.8, 0], %)
 |> angledLine([100 + 100, 3.09], %)
 |> angledLine([abc, 3.09], %)
@@ -194,7 +198,8 @@ show(part001)`
 })
 
 describe('testing getNodePathFromSourceRange', () => {
-  const code = `const part001 = startSketchAt([0.39, -0.05])
+  const code = `const part001 = startSketchOn('XY')
+  |> startProfileAt([0.39, -0.05], %)
   |> line([0.94, 2.61], %)
   |> line([-0.21, -1.4], %)
 show(part001)`
@@ -210,7 +215,7 @@ show(part001)`
       [0, 'index'],
       ['init', ''],
       ['body', 'PipeExpression'],
-      [1, 'index'],
+      [2, 'index'],
     ])
   })
   it('finds the last line when cursor is put at the end', () => {
@@ -225,7 +230,7 @@ show(part001)`
       [0, 'index'],
       ['init', ''],
       ['body', 'PipeExpression'],
-      [2, 'index'],
+      [3, 'index'],
     ]
     expect(result).toEqual(expected)
     // expect similar result for start of line
@@ -243,3 +248,114 @@ show(part001)`
     expect(selectWholeThing).toEqual(expected)
   })
 })
+
+describe('testing doesPipeHave', () => {
+  it('finds close', () => {
+    const exampleCode = `const length001 = 2
+const part001 = startSketchAt([-1.41, 3.46])
+  |> line({ to: [19.49, 1.16], tag: 'seg01' }, %)
+  |> angledLine([-35, length001], %)
+  |> line([-3.22, -7.36], %)
+  |> angledLine([-175, segLen('seg01', %)], %)
+  |> close(%)
+`
+    const ast = parse(exampleCode)
+    const result = doesPipeHaveCallExp({
+      calleeName: 'close',
+      ast,
+      selection: { type: 'default', range: [100, 101] },
+    })
+    expect(result).toEqual(true)
+  })
+  it('finds extrude', () => {
+    const exampleCode = `const length001 = 2
+const part001 = startSketchAt([-1.41, 3.46])
+  |> line({ to: [19.49, 1.16], tag: 'seg01' }, %)
+  |> angledLine([-35, length001], %)
+  |> line([-3.22, -7.36], %)
+  |> angledLine([-175, segLen('seg01', %)], %)
+  |> close(%)
+  |> extrude(1, %)
+`
+    const ast = parse(exampleCode)
+    const result = doesPipeHaveCallExp({
+      calleeName: 'extrude',
+      ast,
+      selection: { type: 'default', range: [100, 101] },
+    })
+    expect(result).toEqual(true)
+  })
+  it('does NOT find close', () => {
+    const exampleCode = `const length001 = 2
+const part001 = startSketchAt([-1.41, 3.46])
+  |> line({ to: [19.49, 1.16], tag: 'seg01' }, %)
+  |> angledLine([-35, length001], %)
+  |> line([-3.22, -7.36], %)
+  |> angledLine([-175, segLen('seg01', %)], %)
+`
+    const ast = parse(exampleCode)
+    const result = doesPipeHaveCallExp({
+      calleeName: 'close',
+      ast,
+      selection: { type: 'default', range: [100, 101] },
+    })
+    expect(result).toEqual(false)
+  })
+  it('returns false if not a pipe', () => {
+    const exampleCode = `const length001 = 2`
+    const ast = parse(exampleCode)
+    const result = doesPipeHaveCallExp({
+      calleeName: 'close',
+      ast,
+      selection: { type: 'default', range: [9, 10] },
+    })
+    expect(result).toEqual(false)
+  })
+})
+
+describe('testing hasExtrudeSketchGroup', () => {
+  it('find sketch group', async () => {
+    const exampleCode = `const length001 = 2
+const part001 = startSketchAt([-1.41, 3.46])
+  |> line({ to: [19.49, 1.16], tag: 'seg01' }, %)
+  |> angledLine([-35, length001], %)
+  |> line([-3.22, -7.36], %)
+  |> angledLine([-175, segLen('seg01', %)], %)`
+    const ast = parse(exampleCode)
+    const programMemory = await enginelessExecutor(ast)
+    const result = hasExtrudeSketchGroup({
+      ast,
+      selection: { type: 'default', range: [100, 101] },
+      programMemory,
+    })
+    expect(result).toEqual(true)
+  })
+  it('find extrude group', async () => {
+    const exampleCode = `const length001 = 2
+const part001 = startSketchAt([-1.41, 3.46])
+  |> line({ to: [19.49, 1.16], tag: 'seg01' }, %)
+  |> angledLine([-35, length001], %)
+  |> line([-3.22, -7.36], %)
+  |> angledLine([-175, segLen('seg01', %)], %)
+  |> extrude(1, %)`
+    const ast = parse(exampleCode)
+    const programMemory = await enginelessExecutor(ast)
+    const result = hasExtrudeSketchGroup({
+      ast,
+      selection: { type: 'default', range: [100, 101] },
+      programMemory,
+    })
+    expect(result).toEqual(true)
+  })
+  it('finds nothing', async () => {
+    const exampleCode = `const length001 = 2`
+    const ast = parse(exampleCode)
+    const programMemory = await enginelessExecutor(ast)
+    const result = hasExtrudeSketchGroup({
+      ast,
+      selection: { type: 'default', range: [10, 11] },
+      programMemory,
+    })
+    expect(result).toEqual(false)
+  })
+})

src/lang/queryAst.ts

@@ -1,4 +1,5 @@
-import { Selection, ToolTip } from '../useStore'
+import { ToolTip } from '../useStore'
+import { Selection } from 'lib/selections'
 import {
   BinaryExpression,
   Program,
@@ -13,6 +14,7 @@ import {
   ProgramMemory,
   SketchGroup,
   SourceRange,
+  PipeExpression,
 } from './wasm'
 import { createIdentifier, splitPathAtLastIndex } from './modifyAst'
 import { getSketchSegmentFromSourceRange } from './std/sketchConstraints'
@@ -511,3 +513,47 @@ export function isLinesParallelAndConstrained(
     }
   }
 }
+
+export function doesPipeHaveCallExp({
+  ast,
+  selection,
+  calleeName,
+}: {
+  calleeName: string
+  ast: Program
+  selection: Selection
+}): boolean {
+  const pathToNode = getNodePathFromSourceRange(ast, selection.range)
+  const pipeExpression = getNodeFromPath<PipeExpression>(
+    ast,
+    pathToNode,
+    'PipeExpression'
+  ).node
+  if (pipeExpression.type !== 'PipeExpression') return false
+  return pipeExpression.body.some(
+    (expression) =>
+      expression.type === 'CallExpression' &&
+      expression.callee.name === calleeName
+  )
+}
+
+export function hasExtrudeSketchGroup({
+  ast,
+  selection,
+  programMemory,
+}: {
+  ast: Program
+  selection: Selection
+  programMemory: ProgramMemory
+}): boolean {
+  const pathToNode = getNodePathFromSourceRange(ast, selection.range)
+  const varDec = getNodeFromPath<VariableDeclaration>(
+    ast,
+    pathToNode,
+    'VariableDeclaration'
+  ).node
+  if (varDec.type !== 'VariableDeclaration') return false
+  const varName = varDec.declarations[0].id.name
+  const varValue = programMemory?.root[varName]
+  return varValue?.type === 'ExtrudeGroup' || varValue?.type === 'SketchGroup'
+}

src/lang/recast.test.ts

@@ -272,21 +272,20 @@ const mySk1 = startSketchAt([0, 0])
 `
     const { ast } = code2ast(code)
     const recasted = recast(ast)
-    expect(recasted).toBe(`// comment at start
+    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 */
+  |> 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
+  /* one more for good measure */
 `)
   })
 })

src/lang/std/README.md

@@ -2,5 +2,5 @@ The std is as expected, tools that are provided with the language.
 
 For this language that means functions.
 
-However because programatically changing the source code is a first class citizen in this lang, there needs to be helpes for adding and modifying these function calls,
+However because programmatically changing the source code is a first class citizen in this lang, there needs to be helpers for adding and modifying these function calls,
 So it makes sense to group some of these together.

src/lang/std/engineConnection.ts

@@ -1,16 +1,10 @@
-import {
-  ProgramMemory,
-  SourceRange,
-  Program,
-  VariableDeclarator,
-} from 'lang/wasm'
-import { Selections } from 'useStore'
+import { SourceRange } from 'lang/wasm'
 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 { v4 as uuidv4 } from 'uuid'
 import * as Sentry from '@sentry/react'
-import { getNodeFromPath, getNodePathFromSourceRange } from 'lang/queryAst'
+import { DefaultPlanes } from 'wasm-lib/kcl/bindings/DefaultPlanes'
 
 let lastMessage = ''
 
@@ -26,6 +20,7 @@ interface ResultCommand extends CommandInfo {
   type: 'result'
   data: any
   raw: WebSocketResponse
+  headVertexId?: string
 }
 interface FailedCommand extends CommandInfo {
   type: 'failed'
@@ -40,9 +35,6 @@ interface PendingCommand extends CommandInfo {
 export interface ArtifactMap {
   [key: string]: ResultCommand | PendingCommand | FailedCommand
 }
-export interface SourceRangeMap {
-  [key: string]: SourceRange
-}
 
 interface NewTrackArgs {
   conn: EngineConnection
@@ -224,6 +216,26 @@ export class EngineConnection {
       }
     })
 
+    this.pc.addEventListener('icecandidateerror', (_event) => {
+      const event = _event as RTCPeerConnectionIceErrorEvent
+      console.error(
+        `ICE candidate returned an error: ${event.errorCode}: ${event.errorText} for ${event.url}`
+      )
+    })
+
+    this.pc.addEventListener('connectionstatechange', (event) => {
+      if (this.pc?.iceConnectionState === 'connected') {
+        if (this.shouldTrace()) {
+          iceSpan.resolve?.()
+        }
+      } else if (this.pc?.iceConnectionState === 'failed') {
+        // failed is a terminal state; let's explicitly kill the
+        // connection to the server at this point.
+        console.log('failed to negotiate ice connection; restarting')
+        this.close()
+      }
+    })
+
     this.websocket.addEventListener('open', (event) => {
       if (this.shouldTrace()) {
         websocketSpan.resolve?.()
@@ -286,14 +298,18 @@ export class EngineConnection {
       const message: Models['WebSocketResponse_type'] = JSON.parse(event.data)
 
       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}`)
+        const errorsString = message?.errors
+          ?.map((error) => {
+            return `  - ${error.error_code}: ${error.message}`
           })
+          .join('\n')
+        if (message.request_id) {
+          console.error(
+            `Error in response to request ${message.request_id}:\n${errorsString}`
+          )
+        } else {
+          console.error(`Error from server:\n${errorsString}`)
+        }
         return
       }
 
@@ -355,19 +371,6 @@ 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', (event) => {
-          if (this.pc?.iceConnectionState === 'connected') {
-            if (this.shouldTrace()) {
-              iceSpan.resolve?.()
-            }
-          } else if (this.pc?.iceConnectionState === 'failed') {
-            // failed is a terminal state; let's explicitly kill the
-            // connection to the server at this point.
-            console.log('failed to negotiate ice connection; restarting')
-            this.close()
-          }
-        })
-
         this.pc.addEventListener('icecandidate', (event) => {
           if (!this.pc || !this.websocket) return
           if (event.candidate !== null) {
@@ -454,18 +457,18 @@ export class EngineConnection {
             videoTrackStats.forEach((videoTrackReport) => {
               if (videoTrackReport.type === 'inbound-rtp') {
                 client_metrics.rtc_frames_decoded =
-                  videoTrackReport.framesDecoded
+                  videoTrackReport.framesDecoded || 0
                 client_metrics.rtc_frames_dropped =
-                  videoTrackReport.framesDropped
+                  videoTrackReport.framesDropped || 0
                 client_metrics.rtc_frames_received =
-                  videoTrackReport.framesReceived
+                  videoTrackReport.framesReceived || 0
                 client_metrics.rtc_frames_per_second =
                   videoTrackReport.framesPerSecond || 0
                 client_metrics.rtc_freeze_count =
                   videoTrackReport.freezeCount || 0
-                client_metrics.rtc_jitter_sec = videoTrackReport.jitter
+                client_metrics.rtc_jitter_sec = videoTrackReport.jitter || 0.0
                 client_metrics.rtc_keyframes_decoded =
-                  videoTrackReport.keyFramesDecoded
+                  videoTrackReport.keyFramesDecoded || 0
                 client_metrics.rtc_total_freezes_duration_sec =
                   videoTrackReport.totalFreezesDuration || 0
               } else if (videoTrackReport.type === 'transport') {
@@ -589,15 +592,17 @@ interface Subscription<T extends ModelTypes> {
 
 export class EngineCommandManager {
   artifactMap: ArtifactMap = {}
-  sourceRangeMap: SourceRangeMap = {}
   outSequence = 1
   inSequence = 1
   engineConnection?: EngineConnection
+  defaultPlanes: DefaultPlanes = { xy: '', yz: '', xz: '' }
   // Folks should realize that wait for ready does not get called _everytime_
   // the connection resets and restarts, it only gets called the first time.
   // Be careful what you put here.
-  waitForReady: Promise<void> = new Promise(() => {})
   private resolveReady = () => {}
+  waitForReady: Promise<void> = new Promise((resolve) => {
+    this.resolveReady = resolve
+  })
 
   subscriptions: {
     [event: string]: {
@@ -635,13 +640,13 @@ export class EngineCommandManager {
 
     // If we already have an engine connection, just need to resize the stream.
     if (this.engineConnection) {
-      this.handleResize({ streamWidth: width, streamHeight: height })
+      this.handleResize({
+        streamWidth: width,
+        streamHeight: height,
+      })
       return
     }
 
-    this.waitForReady = new Promise((resolve) => {
-      this.resolveReady = resolve
-    })
     const url = `${VITE_KC_API_WS_MODELING_URL}?video_res_width=${width}&video_res_height=${height}`
     this.engineConnection = new EngineConnection({
       url,
@@ -669,12 +674,15 @@ export class EngineCommandManager {
           },
         })
 
+        // Initialize the planes.
+        this.initPlanes().then(() => {
           // We execute the code here to make sure if the stream was to
           // restart in a session, we want to make sure to execute the code.
           // We force it to re-execute the code because we want to make sure
           // the code is executed everytime the stream is restarted.
           // We pass undefined for the code so it reads from the current state.
           executeCode(undefined, true)
+        })
       },
       onClose: () => {
         setIsStreamReady(false)
@@ -725,7 +733,11 @@ export class EngineCommandManager {
               message.request_id
             ) {
               this.handleModelingCommand(message.resp, message.request_id)
-            } else if (!message.success && message.request_id) {
+            } else if (
+              !message.success &&
+              message.request_id &&
+              this.artifactMap[message.request_id]
+            ) {
               this.handleFailedModelingCommand(message)
             }
           }
@@ -753,7 +765,6 @@ export class EngineCommandManager {
     streamWidth: number
     streamHeight: number
   }) {
-    console.log('handleResize', streamWidth, streamHeight)
     if (!this.engineConnection?.isReady()) {
       return
     }
@@ -844,7 +855,6 @@ export class EngineCommandManager {
   }
   startNewSession() {
     this.artifactMap = {}
-    this.sourceRangeMap = {}
   }
   subscribeTo<T extends ModelTypes>({
     event,
@@ -887,8 +897,9 @@ export class EngineCommandManager {
   }
   endSession() {
     // 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
+    // we need to loop over them each individually because if the engine doesn't recognise a single
     // id the whole command fails.
+    const artifactsToDelete: any = {}
     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,
@@ -898,7 +909,9 @@ export class EngineCommandManager {
         'start_path',
       ]
       if (!artifactTypesToDelete.includes(artifact.commandType)) return
-
+      artifactsToDelete[id] = artifact
+    })
+    Object.keys(artifactsToDelete).forEach((id) => {
       const deletCmd: EngineCommand = {
         type: 'modeling_cmd_req',
         cmd_id: uuidv4(),
@@ -910,30 +923,6 @@ export class EngineCommandManager {
       this.engineConnection?.send(deletCmd)
     })
   }
-  cusorsSelected(selections: {
-    otherSelections: Selections['otherSelections']
-    idBasedSelections: { type: string; id: string }[]
-  }) {
-    if (!this.engineConnection?.isReady()) {
-      console.log('engine connection isnt ready')
-      return
-    }
-    this.sendSceneCommand({
-      type: 'modeling_cmd_req',
-      cmd: {
-        type: 'select_clear',
-      },
-      cmd_id: uuidv4(),
-    })
-    this.sendSceneCommand({
-      type: 'modeling_cmd_req',
-      cmd: {
-        type: 'select_add',
-        entities: selections.idBasedSelections.map((s) => s.id),
-      },
-      cmd_id: uuidv4(),
-    })
-  }
   sendSceneCommand(command: EngineCommand): Promise<any> {
     if (this.engineConnection === undefined) {
       return Promise.resolve()
@@ -994,7 +983,6 @@ export class EngineCommandManager {
     if (this.engineConnection === undefined) {
       return Promise.resolve()
     }
-    this.sourceRangeMap[id] = range
 
     if (!this.engineConnection?.isReady()) {
       return Promise.resolve()
@@ -1007,7 +995,7 @@ export class EngineCommandManager {
       if (parseCommand.type === 'modeling_cmd_req')
         return this.handlePendingCommand(id, parseCommand?.cmd, range)
     }
-    throw 'shouldnt reach here'
+    throw Error('shouldnt reach here')
   }
   handlePendingCommand(
     id: string,
@@ -1070,109 +1058,115 @@ export class EngineCommandManager {
     }
     return command.promise
   }
-  async waitForAllCommands(
-    ast?: Program,
-    programMemory?: ProgramMemory
-  ): Promise<{
+  async waitForAllCommands(): Promise<{
     artifactMap: ArtifactMap
-    sourceRangeMap: SourceRangeMap
   }> {
     const pendingCommands = Object.values(this.artifactMap).filter(
       ({ type }) => type === 'pending'
     ) as PendingCommand[]
     const proms = pendingCommands.map(({ promise }) => promise)
     await Promise.all(proms)
-    if (ast && programMemory) {
-      await this.fixIdMappings(ast, programMemory)
-    }
 
     return {
       artifactMap: this.artifactMap,
-      sourceRangeMap: this.sourceRangeMap,
     }
   }
-  private async fixIdMappings(ast: Program, programMemory: ProgramMemory) {
-    if (this.engineConnection === undefined) {
+  private async initPlanes() {
+    const [xy, yz, xz] = [
+      await this.createPlane({
+        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 },
+      }),
+      await this.createPlane({
+        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 },
+      }),
+      await this.createPlane({
+        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 },
+      }),
+    ]
+    this.defaultPlanes = { xy, yz, xz }
+
+    this.subscribeTo({
+      event: 'select_with_point',
+      callback: ({ data }) => {
+        if (!data?.entity_id) return
+        if (
+          ![
+            this.defaultPlanes.xy,
+            this.defaultPlanes.yz,
+            this.defaultPlanes.xz,
+          ].includes(data.entity_id)
+        )
           return
+        this.onPlaneSelectCallback(data.entity_id)
+      },
+    })
+  }
+  planesInitialized(): boolean {
+    return (
+      this.defaultPlanes.xy !== '' &&
+      this.defaultPlanes.yz !== '' &&
+      this.defaultPlanes.xz !== ''
+    )
   }
-    /* This is a temporary solution since the cmd_ids that are sent through when
-    sending 'extend_path' ids are not used as the segment ids.
 
-    We have a way to back fill them with 'path_get_info', however this relies on one
-    the sketchGroup array and the segements array returned from the server to be in
-    the same length and order. plus it's super hacky, we first use the path_id to get
-    the source range of the pipe expression then use the name of the variable to get
-    the sketchGroup from programMemory.
+  onPlaneSelectCallback = (id: string) => {}
+  onPlaneSelected(callback: (id: string) => void) {
+    this.onPlaneSelectCallback = callback
+  }
 
-    I feel queezy about relying on all these steps to always line up.
-    We have also had to pollute this EngineCommandManager class with knowledge of both the ast and programMemory
-    We should get the cmd_ids to match with the segment ids and delete this method.
-    */
-    const pathInfoProms = []
-    for (const [id, artifact] of Object.entries(this.artifactMap)) {
-      if (artifact.commandType === 'start_path') {
-        pathInfoProms.push(
-          this.sendSceneCommand({
+  async setPlaneHidden(id: string, hidden: boolean): Promise<string> {
+    return await this.sendSceneCommand({
       type: 'modeling_cmd_req',
       cmd_id: uuidv4(),
       cmd: {
-              type: 'path_get_info',
-              path_id: id,
+        type: 'object_visible',
+        object_id: id,
+        hidden: hidden,
       },
-          }).then(({ data }) => ({
-            originalId: id,
-            segments: data?.data?.segments,
-          }))
-        )
-      }
-    }
-
-    const pathInfos = await Promise.all(pathInfoProms)
-    pathInfos.forEach(({ originalId, segments }) => {
-      const originalArtifact = this.artifactMap[originalId]
-      if (!originalArtifact || originalArtifact.type === 'pending') {
-        return
-      }
-      const pipeExpPath = getNodePathFromSourceRange(
-        ast,
-        originalArtifact.range
-      )
-      const pipeExp = getNodeFromPath<VariableDeclarator>(
-        ast,
-        pipeExpPath,
-        'VariableDeclarator'
-      ).node
-      if (pipeExp.type !== 'VariableDeclarator') {
-        return
-      }
-      const variableName = pipeExp.id.name
-      const memoryItem = programMemory.root[variableName]
-      if (!memoryItem) {
-        return
-      } else if (memoryItem.type !== 'SketchGroup') {
-        return
-      }
-
-      const relevantSegments = segments.filter(
-        ({ command_id }: { command_id: string | null }) => command_id
-      )
-      if (memoryItem.value.length !== relevantSegments.length) {
-        return
-      }
-      for (let i = 0; i < relevantSegments.length; i++) {
-        const engineSegment = relevantSegments[i]
-        const memorySegment = memoryItem.value[i]
-        const oldId = memorySegment.__geoMeta.id
-        const artifact = this.artifactMap[oldId]
-        delete this.artifactMap[oldId]
-        delete this.sourceRangeMap[oldId]
-        if (artifact) {
-          this.artifactMap[engineSegment.command_id] = artifact
-          this.sourceRangeMap[engineSegment.command_id] = artifact.range
-        }
-      }
     })
   }
+
+  private async createPlane({
+    x_axis,
+    y_axis,
+    color,
+  }: {
+    x_axis: Models['Point3d_type']
+    y_axis: Models['Point3d_type']
+    color: Models['Color_type']
+  }): Promise<string> {
+    const planeId = uuidv4()
+    await this.sendSceneCommand({
+      type: 'modeling_cmd_req',
+      cmd: {
+        type: 'make_plane',
+        size: 60,
+        origin: { x: 0, y: 0, z: 0 },
+        x_axis,
+        y_axis,
+        clobber: false,
+        hide: true,
+      },
+      cmd_id: planeId,
+    })
+    await this.sendSceneCommand({
+      type: 'modeling_cmd_req',
+      cmd: {
+        type: 'plane_set_color',
+        plane_id: planeId,
+        color,
+      },
+      cmd_id: uuidv4(),
+    })
+    await this.setPlaneHidden(planeId, true)
+    return planeId
+  }
 }
 
 export const engineCommandManager = new EngineCommandManager()

src/lang/std/sketch.test.ts

@@ -96,10 +96,11 @@ 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 = startSketchOn('XY')
+  |> startProfileAt([0, 0], %)
   |> ${line}
   |> lineTo([0.46, -5.82], %)
-// |> rx(45, %)
+  // |> rx(45, %)
 show(mySketch001)
 `
     const code = genCode(lineToChange)
@@ -112,20 +113,6 @@ show(mySketch001)
       programMemory,
       [sourceStart, sourceStart + lineToChange.length],
       [2, 3],
-      {
-        mode: 'sketch',
-        sketchMode: 'sketchEdit',
-        pathId: '',
-        rotation: [0, 0, 0, 1],
-        position: [0, 0, 0],
-        pathToNode: [
-          ['body', ''],
-          [0, 'index'],
-          ['declarations', 'VariableDeclaration'],
-          [0, 'index'],
-          ['init', 'VariableDeclarator'],
-        ],
-      },
       [0, 0]
     )
     expect(recast(modifiedAst)).toBe(expectedCode)
@@ -137,7 +124,8 @@ describe('testing addNewSketchLn', () => {
   test('addNewSketchLn', async () => {
     // Enable rotations #152
     const code = `
-const mySketch001 = startSketchAt([0, 0])
+const mySketch001 = startSketchOn('XY')
+  |> startProfileAt([0, 0], %)
   // |> rx(45, %)
   |> lineTo([-1.59, -1.54], %)
   |> lineTo([0.46, -5.82], %)
@@ -145,11 +133,12 @@ show(mySketch001)`
     const ast = parse(code)
     const programMemory = await enginelessExecutor(ast)
     const sourceStart = code.indexOf(lineToChange)
-    expect(sourceStart).toBe(66)
+    expect(sourceStart).toBe(95)
     let { modifiedAst } = addNewSketchLn({
       node: ast,
       programMemory,
       to: [2, 3],
+      from: [0, 0],
       fnName: 'lineTo',
       pathToNode: [
         ['body', ''],
@@ -160,7 +149,8 @@ show(mySketch001)`
       ],
     })
     // Enable rotations #152
-    let expectedCode = `const mySketch001 = startSketchAt([0, 0])
+    let expectedCode = `const mySketch001 = startSketchOn('XY')
+  |> startProfileAt([0, 0], %)
   // |> rx(45, %)
   |> lineTo([-1.59, -1.54], %)
   |> lineTo([0.46, -5.82], %)
@@ -181,7 +171,8 @@ show(mySketch001)
       ],
     })
 
-    expectedCode = `const mySketch001 = startSketchAt([0, 0])
+    expectedCode = `const mySketch001 = startSketchOn('XY')
+  |> startProfileAt([0, 0], %)
   // |> rx(45, %)
   |> lineTo([-1.59, -1.54], %)
   |> lineTo([0.46, -5.82], %)
@@ -196,7 +187,8 @@ 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 = startSketchOn('XY')
+  |> startProfileAt([0, 0], %)
   // |> rx(45, %)
   |> ${line}
   |> lineTo([0.46, -5.82], %)

src/lang/std/sketch.ts

@@ -18,9 +18,8 @@ import {
   getNodePathFromSourceRange,
 } from '../queryAst'
 import { isLiteralArrayOrStatic } from './sketchcombos'
-import { GuiModes, toolTips, ToolTip } from '../../useStore'
+import { toolTips, ToolTip } from '../../useStore'
 import { createPipeExpression, splitPathAtPipeExpression } from '../modifyAst'
-import { generateUuidFromHashSeed } from '../../lib/uuid'
 
 import { SketchLineHelper, ModifyAstBase, TransformCallback } from './stdTypes'
 
@@ -92,18 +91,12 @@ export function createFirstArg(
   throw new Error('all sketch line types should have been covered')
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 type LineData = {
   from: [number, number, number]
   to: [number, number, number]
 }
 
-function makeId(seed: string | any) {
-  if (typeof seed === 'string') {
-    return generateUuidFromHashSeed(seed)
-  }
-  return generateUuidFromHashSeed(JSON.stringify(seed))
-}
-
 export const lineTo: SketchLineHelper = {
   add: ({
     node,
@@ -193,9 +186,6 @@ export const line: SketchLineHelper = {
       pathToNode,
       'VariableDeclarator'
     )
-    const variableName = varDec.id.name
-    const sketch = previousProgramMemory?.root?.[variableName]
-    if (sketch.type !== 'SketchGroup') throw new Error('not a SketchGroup')
 
     const newXVal = createLiteral(roundOff(to[0] - from[0], 2))
     const newYVal = createLiteral(roundOff(to[1] - from[1], 2))
@@ -209,7 +199,11 @@ export const line: SketchLineHelper = {
       pipe.body[callIndex] = callExp
       return {
         modifiedAst: _node,
-        pathToNode,
+        pathToNode: [
+          ...pathToNode,
+          ['body', 'PipeExpression'],
+          [callIndex, 'CallExpression'],
+        ],
         valueUsedInTransform,
       }
     }
@@ -220,6 +214,14 @@ export const line: SketchLineHelper = {
     ])
     if (pipe.type === 'PipeExpression') {
       pipe.body = [...pipe.body, callExp]
+      return {
+        modifiedAst: _node,
+        pathToNode: [
+          ...pathToNode,
+          ['body', 'PipeExpression'],
+          [pipe.body.length - 1, 'CallExpression'],
+        ],
+      }
     } else {
       varDec.init = createPipeExpression([varDec.init, callExp])
     }
@@ -241,9 +243,6 @@ export const line: SketchLineHelper = {
     ])
 
     if (callExpression.arguments?.[0].type === 'ObjectExpression') {
-      const toProp = callExpression.arguments?.[0].properties?.find(
-        ({ key }) => key.name === 'to'
-      )
       mutateObjExpProp(callExpression.arguments?.[0], toArrExp, 'to')
     } else {
       mutateArrExp(callExpression.arguments?.[0], toArrExp)
@@ -908,16 +907,14 @@ export function changeSketchArguments(
   programMemory: ProgramMemory,
   sourceRange: SourceRange,
   args: [number, number],
-  guiMode: GuiModes,
   from: [number, number]
-): { modifiedAst: Program } {
+): { modifiedAst: Program; pathToNode: PathToNode } {
   const _node = { ...node }
   const thePath = getNodePathFromSourceRange(_node, sourceRange)
   const { node: callExpression, shallowPath } = getNodeFromPath<CallExpression>(
     _node,
     thePath
   )
-  if (guiMode.mode !== 'sketch') throw new Error('not in sketch mode')
 
   if (callExpression?.callee?.name in sketchLineHelperMap) {
     const { updateArgs } = sketchLineHelperMap[callExpression.callee.name]
@@ -931,7 +928,7 @@ export function changeSketchArguments(
     })
   }
 
-  throw new Error('not a sketch line helper')
+  throw new Error(`not a sketch line helper: ${callExpression?.callee?.name}`)
 }
 
 interface CreateLineFnCallArgs {
@@ -949,7 +946,7 @@ export function compareVec2Epsilon(
 ) {
   const compareEpsilon = 0.015625 // or 2^-6
   const xDifference = Math.abs(vec1[0] - vec2[0])
-  const yDifference = Math.abs(vec1[0] - vec2[0])
+  const yDifference = Math.abs(vec1[1] - vec2[1])
   return xDifference < compareEpsilon && yDifference < compareEpsilon
 }
 
@@ -959,26 +956,20 @@ export function addNewSketchLn({
   to,
   fnName,
   pathToNode,
-}: Omit<CreateLineFnCallArgs, 'from'>): {
+  from,
+}: CreateLineFnCallArgs): {
   modifiedAst: Program
+  pathToNode: PathToNode
 } {
   const node = JSON.parse(JSON.stringify(_node))
   const { add, updateArgs } = sketchLineHelperMap?.[fnName] || {}
   if (!add || !updateArgs) throw new Error('not a sketch line helper')
-  const { node: varDec } = getNodeFromPath<VariableDeclarator>(
+  getNodeFromPath<VariableDeclarator>(node, pathToNode, 'VariableDeclarator')
+  getNodeFromPath<PipeExpression | CallExpression>(
     node,
     pathToNode,
-    'VariableDeclarator'
+    'PipeExpression'
   )
-  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')
-
-  const last = sketch.value[sketch.value.length - 1] || sketch.start
-  const from = last.to
   return add({
     node,
     previousProgramMemory,

src/lang/std/sketchConstraints.test.ts

@@ -5,7 +5,7 @@ import {
   transformAstSketchLines,
 } from './sketchcombos'
 import { getSketchSegmentFromSourceRange } from './sketchConstraints'
-import { Selection } from '../../useStore'
+import { Selection } from 'lib/selections'
 import { enginelessExecutor } from '../../lib/testHelpers'
 
 beforeAll(() => initPromise)
@@ -50,9 +50,10 @@ async function testingSwapSketchFnCall({
   }
 }
 
-describe('testing swaping out sketch calls with xLine/xLineTo', () => {
+describe('testing swapping out sketch calls with xLine/xLineTo', () => {
   const bigExampleArr = [
-    `const part001 = startSketchAt([0, 0])`,
+    `const part001 = startSketchOn('XY')`,
+    `  |> startProfileAt([0, 0], %)`,
     `  |> lineTo({ to: [1, 1], tag: 'abc1' }, %)`,
     `  |> line({ to: [-2.04, -0.7], tag: 'abc2' }, %)`,
     `  |> angledLine({`,
@@ -177,7 +178,7 @@ describe('testing swaping out sketch calls with xLine/xLineTo', () => {
       constraintType: 'horizontal',
     })
     const expectedLine = "xLine({ length: -0.86, tag: 'abc4' }, %)"
-    // hmm "-0.86" is correct since the angle is 104, but need to make sure this is compatiable `-myVar`
+    // hmm "-0.86" is correct since the angle is 104, but need to make sure this is compatible `-myVar`
     expect(newCode).toContain(expectedLine)
     // new line should start at the same place as the old line
     expect(originalRange[0]).toBe(newCode.indexOf(expectedLine))
@@ -267,7 +268,7 @@ describe('testing swaping out sketch calls with xLine/xLineTo', () => {
   })
 })
 
-describe('testing swaping out sketch calls with xLine/xLineTo while keeping variable/identifiers intact', () => {
+describe('testing swapping out sketch calls with xLine/xLineTo while keeping variable/identifiers intact', () => {
   // Enable rotations #152
   const variablesExampleArr = [
     `const lineX = -1`,
@@ -277,7 +278,8 @@ describe('testing swaping out sketch calls with xLine/xLineTo while keeping vari
     `const angledLineOfYLengthY = 0.89`,
     `const angledLineToXx = -1.86`,
     `const angledLineToYy = -0.76`,
-    `const part001 = startSketchAt([0, 0])`,
+    `const part001 = startSketchOn('XY')`,
+    `  |> startProfileAt([0, 0], %)`,
     // `  |> rx(90, %)`,
     `  |> lineTo([1, 1], %)`,
     `  |> line([lineX, 2.13], %)`,
@@ -371,7 +373,8 @@ describe('testing swaping out sketch calls with xLine/xLineTo while keeping vari
 
 describe('testing getSketchSegmentIndexFromSourceRange', () => {
   const code = `
-const part001 = startSketchAt([0, 0.04]) // segment-in-start
+const part001 = startSketchOn('XY')
+  |> startProfileAt([0, 0.04], %) // segment-in-start
   |> line([0, 0.4], %)
   |> xLine(3.48, %)
   |> line([2.14, 1.35], %) // normal-segment

src/lang/std/sketchcombos.test.ts

@@ -7,7 +7,8 @@ import {
   ConstraintType,
   getConstraintLevelFromSourceRange,
 } from './sketchcombos'
-import { Selections, ToolTip } from '../../useStore'
+import { ToolTip } from '../../useStore'
+import { Selections } from 'lib/selections'
 import { enginelessExecutor } from '../../lib/testHelpers'
 
 beforeAll(() => initPromise)
@@ -92,7 +93,8 @@ const myVar2 = 5
 const myVar3 = 6
 const myAng = 40
 const myAng2 = 134
-const part001 = startSketchAt([0, 0])
+const part001 = startSketchOn('XY')
+  |> startProfileAt([0, 0], %)
   |> line([1, 3.82], %) // ln-should-get-tag
   |> lineTo([myVar, 1], %) // ln-lineTo-xAbsolute should use angleToMatchLengthX helper
   |> lineTo([1, myVar], %) // ln-lineTo-yAbsolute should use angleToMatchLengthY helper
@@ -106,7 +108,7 @@ const part001 = startSketchAt([0, 0])
   |> line([myVar, 1], %) // ln-should use legLen for y
   |> line([myVar, -1], %) // ln-legLen but negative
   |> line([-0.62, -1.54], %) // ln-should become angledLine
-  |> angledLine([myVar, 1.04], %) // ln-use segLen for secound arg
+  |> angledLine([myVar, 1.04], %) // ln-use segLen for second arg
   |> angledLine([45, 1.04], %) // ln-segLen again
   |> angledLineOfXLength([54, 2.35], %) // ln-should be transformed to angledLine
   |> angledLineOfXLength([50, myVar], %) // ln-should use legAngX to calculate angle
@@ -128,7 +130,8 @@ const myVar2 = 5
 const myVar3 = 6
 const myAng = 40
 const myAng2 = 134
-const part001 = startSketchAt([0, 0])
+const part001 = startSketchOn('XY')
+  |> startProfileAt([0, 0], %)
   |> line({ to: [1, 3.82], tag: 'seg01' }, %) // ln-should-get-tag
   |> angledLineToX([
        -angleToMatchLengthX('seg01', myVar, %),
@@ -160,7 +163,7 @@ const part001 = startSketchAt([0, 0])
        -legLen(segLen('seg01', %), myVar)
      ], %) // ln-legLen but negative
   |> angledLine([-112, segLen('seg01', %)], %) // ln-should become angledLine
-  |> angledLine([myVar, segLen('seg01', %)], %) // ln-use segLen for secound arg
+  |> angledLine([myVar, segLen('seg01', %)], %) // ln-use segLen for second arg
   |> angledLine([45, segLen('seg01', %)], %) // ln-segLen again
   |> angledLine([54, segLen('seg01', %)], %) // ln-should be transformed to angledLine
   |> angledLineOfXLength([
@@ -231,7 +234,8 @@ describe('testing transformAstForSketchLines for vertical and horizontal constra
   const inputScript = `const myVar = 2
 const myVar2 = 12
 const myVar3 = -10
-const part001 = startSketchAt([0, 0])
+const part001 = startSketchOn('XY')
+  |> startProfileAt([0, 0], %)
   |> lineTo([1, 1], %)
   |> line([-6.28, 1.4], %) // select for horizontal constraint 1
   |> line([-1.07, myVar], %) // select for vertical constraint 1
@@ -259,7 +263,8 @@ show(part001)
     const expectModifiedScript = `const myVar = 2
 const myVar2 = 12
 const myVar3 = -10
-const part001 = startSketchAt([0, 0])
+const part001 = startSketchOn('XY')
+  |> startProfileAt([0, 0], %)
   |> lineTo([1, 1], %)
   |> xLine(-6.28, %) // select for horizontal constraint 1
   |> line([-1.07, myVar], %) // select for vertical constraint 1
@@ -317,7 +322,8 @@ show(part001)
     const expectModifiedScript = `const myVar = 2
 const myVar2 = 12
 const myVar3 = -10
-const part001 = startSketchAt([0, 0])
+const part001 = startSketchOn('XY')
+  |> startProfileAt([0, 0], %)
   |> lineTo([1, 1], %)
   |> line([-6.28, 1.4], %) // select for horizontal constraint 1
   |> yLine(myVar, %) // select for vertical constraint 1
@@ -376,7 +382,8 @@ show(part001)
 describe('testing transformAstForSketchLines for vertical and horizontal distance constraints', () => {
   describe('testing setHorzDistance for line', () => {
     const inputScript = `const myVar = 1
-const part001 = startSketchAt([0, 0])
+const part001 = startSketchOn('XY')
+  |> startProfileAt([0, 0], %)
   |> line([0.31, 1.67], %) // base selection
   |> line([0.45, 1.46], %)
   |> line([0.45, 1.46], %) // free
@@ -464,7 +471,7 @@ async function helperThing(
 }
 
 describe('testing getConstraintLevelFromSourceRange', () => {
-  it('should devide up lines into free, partial and fully contrained', () => {
+  it('should divide up lines into free, partial and fully contrained', () => {
     const code = `const baseLength = 3
 const baseThick = 1
 const armThick = 0.5
@@ -477,7 +484,8 @@ const baseThickHalf = baseThick / 2
 const halfHeight = totalHeight / 2
 const halfArmAngle = armAngle / 2
 
-const part001 = startSketchAt([-0.01, -0.05])
+const part001 = startSketchOn('XY')
+  |> startProfileAt([-0.01, -0.05], %)
   |> line([0.01, 0.94 + 0], %) // partial
   |> xLine(3.03, %) // partial
   |> angledLine({

src/lang/std/sketchcombos.ts

@@ -1,5 +1,6 @@
 import { TransformCallback } from './stdTypes'
-import { Selections, toolTips, ToolTip, Selection } from '../../useStore'
+import { toolTips, ToolTip } from '../../useStore'
+import { Selections, Selection } from 'lib/selections'
 import {
   CallExpression,
   Program,
@@ -1306,7 +1307,7 @@ export function getRemoveConstraintsTransforms(
   return theTransforms
 }
 
-type PathToNodeMap = { [key: number]: PathToNode }
+export type PathToNodeMap = { [key: number]: PathToNode }
 
 export function transformSecondarySketchLinesTagFirst({
   ast,

src/lang/std/std.test.ts

@@ -5,7 +5,8 @@ beforeAll(() => initPromise)
 
 describe('testing angledLineThatIntersects', () => {
   it('angledLineThatIntersects should intersect with another line', async () => {
-    const code = (offset: string) => `const part001 = startSketchAt([0, 0])
+    const code = (offset: string) => `const part001 = startSketchOn('XY')
+  |> startProfileAt([0, 0], %)
   |> lineTo({to:[2, 2], tag: "yo"}, %)
   |> lineTo([3, 1], %)
   |> angledLineThatIntersects({

src/lang/std/stdTypes.ts

@@ -24,6 +24,7 @@ export interface PathReturn {
 
 export interface ModifyAstBase {
   node: Program
+  // TODO #896: Remove ProgramMemory from this interface
   previousProgramMemory: ProgramMemory
   pathToNode: PathToNode
 }

src/lang/util.ts

@@ -1,20 +1,21 @@
-import { Selections, StoreState } from '../useStore'
+import { Selections } from 'lib/selections'
 import { Program, PathToNode } from './wasm'
 import { getNodeFromPath } from './queryAst'
+import { ArtifactMap } from './std/engineConnection'
+import { isOverlap } from 'lib/utils'
 
-export function updateCursors(
-  setCursor: StoreState['setCursor'],
-  selectionRanges: Selections,
+export function pathMapToSelections(
+  ast: Program,
+  prevSelections: Selections,
   pathToNodeMap: { [key: number]: PathToNode }
-): (newAst: Program) => void {
-  return (newAst: Program) => {
+): Selections {
   const newSelections: Selections = {
-      ...selectionRanges,
+    ...prevSelections,
     codeBasedSelections: [],
   }
   Object.entries(pathToNodeMap).forEach(([index, path]) => {
-      const node = getNodeFromPath(newAst, path).node as any
-      const type = selectionRanges.codeBasedSelections[Number(index)].type
+    const node = getNodeFromPath(ast, path).node as any
+    const type = prevSelections.codeBasedSelections[Number(index)].type
     if (node) {
       newSelections.codeBasedSelections.push({
         range: [node.start, node.end],
@@ -22,8 +23,7 @@ export function updateCursors(
       })
     }
   })
-    setCursor(newSelections)
-  }
+  return newSelections
 }
 
 export function isReducedMotion(): boolean {
@@ -34,3 +34,27 @@ export function isReducedMotion(): boolean {
     window.matchMedia('(prefers-reduced-motion)').matches
   )
 }
+
+export function isCursorInSketchCommandRange(
+  artifactMap: ArtifactMap,
+  selectionRanges: Selections
+): string | false {
+  const overlapingEntries: [string, ArtifactMap[string]][] = Object.entries(
+    artifactMap
+  ).filter(([id, artifact]: [string, ArtifactMap[string]]) =>
+    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' ||
+          artifact.commandType === 'close_path')
+    )
+  )
+  return overlapingEntries.length && overlapingEntries[0][1].parentId
+    ? overlapingEntries[0][1].parentId
+    : overlapingEntries.find(
+        ([, artifact]) => artifact.commandType === 'start_path'
+      )?.[0] || false
+}