Cut release v0.11.1 (#936)

* Use KittyCAD rust library from workspace

* Clippy

.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:
@@ -24,7 +27,7 @@ jobs:
       matrix:
         dir: ['src/wasm-lib']
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Install latest rust
         uses: actions-rs/toolchain@v1

.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:
@@ -24,7 +27,7 @@ jobs:
       matrix:
         dir: ['src/wasm-lib']
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Install latest rust
         uses: actions-rs/toolchain@v1
         with:
@@ -40,7 +43,18 @@ jobs:
       - name: Rust Cache
         uses: Swatinem/rust-cache@v2.6.1
 
+      - name: Install ffmpeg
+        run: |
+          sudo apt update
+          sudo apt install \
+            ffmpeg \
+            libavformat-dev \
+            libavutil-dev \
+            libclang-dev \
+            libswscale-dev \
+            --no-install-recommends
+
       - name: Run clippy
         run: |
           cd "${{ matrix.dir }}"
-          cargo clippy --all --tests -- -D warnings
+          cargo clippy --all --tests --benches -- -D warnings

.github/workflows/cargo-criterion.yml

@@ -0,0 +1,40 @@
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - '**.rs'
+      - '**/Cargo.toml'
+      - '**/Cargo.lock'
+      - '**/rust-toolchain.toml'
+      - .github/workflows/cargo-criterion.yml
+  pull_request:
+    paths:
+      - '**.rs'
+      - '**/Cargo.toml'
+      - '**/Cargo.lock'
+      - '**/rust-toolchain.toml'
+      - .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:
+    name: cargo criterion
+    runs-on: ubuntu-latest-8-cores
+    steps:
+      - uses: actions/checkout@v4
+      - uses: dtolnay/rust-toolchain@stable
+      - name: Install dependencies
+        run: |
+          cargo install cargo-criterion
+      - name: Rust Cache
+        uses: Swatinem/rust-cache@v2.6.1
+      - name: Benchmark kcl library
+        shell: bash
+        run: |-
+          cd src/wasm-lib/kcl; cargo criterion
+

.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:
@@ -27,7 +30,7 @@ jobs:
       matrix:
         dir: ['src/wasm-lib', 'src-tauri']
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Install latest rust
         uses: actions-rs/toolchain@v1
         with:

.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:
@@ -26,7 +29,7 @@ jobs:
       matrix:
         dir: ['src/wasm-lib']
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Install latest rust
         uses: actions-rs/toolchain@v1
         with:
@@ -41,11 +44,22 @@ jobs:
       - uses: taiki-e/install-action@nextest
       - name: Rust Cache
         uses: Swatinem/rust-cache@v2.6.1
+      - name: Install ffmpeg
+        run: |
+          sudo apt update
+          sudo apt install \
+            ffmpeg \
+            libavformat-dev \
+            libavutil-dev \
+            libclang-dev \
+            libswscale-dev \
+            --no-install-recommends
       - name: cargo test
         shell: bash
         run: |-
           cd "${{ matrix.dir }}"
-          cargo test --all
+          cargo nextest run --workspace --no-fail-fast -P ci
         env:
           KITTYCAD_API_TOKEN: ${{secrets.KITTYCAD_API_TOKEN}}
+          RUST_MIN_STACK: 10485760000
 

.github/workflows/ci.yml

@@ -7,13 +7,19 @@ 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)
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
 jobs:
-
   check-format:
     runs-on: 'ubuntu-20.04'
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
           node-version-file: '.nvmrc'
@@ -25,7 +31,7 @@ jobs:
     runs-on: ubuntu-20.04
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
           node-version-file: '.nvmrc'
@@ -33,19 +39,15 @@ jobs:
       - run: yarn install
       - uses: Swatinem/rust-cache@v2
         with:
-          workspaces: "./src/wasm-lib"
+          workspaces: './src/wasm-lib'
 
       - run: yarn build:wasm
       - run: yarn tsc
 
-
   build-test-web:
     runs-on: ubuntu-20.04
-    outputs:
-      version: ${{ steps.export_version.outputs.version }}
     steps:
-
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - uses: actions/setup-node@v3
         with:
@@ -56,7 +58,7 @@ jobs:
 
       - uses: Swatinem/rust-cache@v2
         with:
-          workspaces: "./src/wasm-lib"
+          workspaces: './src/wasm-lib'
 
       - run: yarn build:wasm
 
@@ -66,19 +68,52 @@ jobs:
 
       - run: yarn test:cov
 
+  prepare-json-files:
+    runs-on: ubuntu-20.04  # seperate job on Ubuntu for easy string manipulations (compared to Windows)
+    outputs:
+      version: ${{ steps.export_version.outputs.version }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+          
+      - name: Set nightly version
+        if: github.event_name == 'schedule'
+        run: |
+          VERSION=$(date +'%-y.%-m.%-d') yarn bump-jsons
+          echo "$(jq --arg url 'https://dl.kittycad.io/releases/modeling-app/nightly/last_update.json' \
+            '.tauri.updater.endpoints[]=$url' src-tauri/tauri.conf.json --indent 2)" > src-tauri/tauri.conf.json
+
+      - uses: actions/upload-artifact@v3
+        if: github.event_name == 'schedule'
+        with:
+          path: |
+            package.json
+            src-tauri/tauri.conf.json
+
       - id: export_version
         run: echo "version=`cat package.json | jq -r '.version'`" >> "$GITHUB_OUTPUT"
 
-
   build-apps:
-    needs: [check-format, build-test-web, check-types]
+    needs: [check-format, build-test-web, prepare-json-files, check-types]
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
         os: [macos-latest, ubuntu-20.04, windows-latest]
     steps:
+      - uses: actions/checkout@v4
 
-      - uses: actions/checkout@v3
+      - 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
 
       - name: install ubuntu system dependencies
         if: matrix.os == 'ubuntu-20.04'
@@ -104,7 +139,7 @@ jobs:
 
       - uses: Swatinem/rust-cache@v2
         with:
-          workspaces: "./src/wasm-lib"
+          workspaces: './src/wasm-lib'
 
       - name: wasm prep
         shell: bash
@@ -114,18 +149,6 @@ jobs:
           cd ../../
           cp src/wasm-lib/pkg/wasm_lib_bg.wasm public
 
-      - name: macos sed
-        if: matrix.os == 'macos-latest'
-        shell: bash
-        run: |
-          sed -i '' 's/import.meta.url//g' "./src/wasm-lib/pkg/wasm_lib.js"
-
-      - name: ubuntu and windows sed
-        if: matrix.os != 'macos-latest'
-        shell: bash
-        run: |
-          sed -i 's/import.meta.url//g' "./src/wasm-lib/pkg/wasm_lib.js"
-
       - name: Fix format
         run: yarn fmt
 
@@ -134,11 +157,43 @@ jobs:
         run: |
           rustup target add aarch64-apple-darwin
 
-      - name: Build the app for the current platform (no upload)
+      - name: Prepare Windows certificate and variables
+        if: matrix.os == 'windows-latest'
+        run: |
+          echo "${{secrets.SM_CLIENT_CERT_FILE_B64 }}" | base64 --decode > /d/Certificate_pkcs12.p12
+          cat /d/Certificate_pkcs12.p12
+          echo "::set-output name=version::${GITHUB_REF#refs/tags/v}"
+          echo "SM_HOST=${{ secrets.SM_HOST }}" >> "$GITHUB_ENV"
+          echo "SM_API_KEY=${{ secrets.SM_API_KEY }}" >> "$GITHUB_ENV"
+          echo "SM_CLIENT_CERT_FILE=D:\\Certificate_pkcs12.p12" >> "$GITHUB_ENV"
+          echo "SM_CLIENT_CERT_PASSWORD=${{ secrets.SM_CLIENT_CERT_PASSWORD }}" >> "$GITHUB_ENV"
+          echo "C:\Program Files (x86)\Windows Kits\10\App Certification Kit" >> $GITHUB_PATH
+          echo "C:\Program Files (x86)\Microsoft SDKs\Windows\v10.0A\bin\NETFX 4.8 Tools" >> $GITHUB_PATH
+          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'
+        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
+          smksp_registrar.exe list
+          smctl.exe keypair ls
+          C:\Windows\System32\certutil.exe -csp "DigiCert Signing Manager KSP" -key -user
+          smksp_cert_sync.exe
+        shell: cmd
+
+      - name: Build and sign the app for the current platform
         uses: tauri-apps/tauri-action@v0
         env:
           TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
           TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
+          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
+          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
+          APPLE_ID: ${{ secrets.APPLE_ID }}
+          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
+          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
         with:
           args: ${{ matrix.os == 'macos-latest' && '--target universal-apple-darwin' || '' }}
 
@@ -146,15 +201,17 @@ jobs:
         with:
           path: ${{ matrix.os == 'macos-latest' && 'src-tauri/target/universal-apple-darwin/release/bundle/*/*' || 'src-tauri/target/release/bundle/*/*' }}
 
-
   publish-apps-release:
     runs-on: ubuntu-20.04
-    if: github.event_name == 'release'
-    needs: [build-test-web, build-apps]
+    if: ${{ github.event_name == 'release' || github.event_name == 'schedule' }}
+    needs: [build-test-web, prepare-json-files, build-apps]
     env:
-      VERSION_NO_V: ${{ needs.build-test-web.outputs.version }}
+      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
 
       - name: Generate the update static endpoint
@@ -162,18 +219,22 @@ jobs:
           ls -l artifact/*/*itty*
           DARWIN_SIG=`cat artifact/macos/*.app.tar.gz.sig`
           LINUX_SIG=`cat artifact/appimage/*.AppImage.tar.gz.sig`
-          WINDOWS_SIG=`cat artifact/nsis/*.nsis.zip.sig`
-          RELEASE_DIR=https://dl.kittycad.io/releases/modeling-app/v${VERSION_NO_V}
+          WINDOWS_SIG=`cat artifact/msi/*.msi.zip.sig`
+          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" \
             --arg darwin_url "$RELEASE_DIR/macos/KittyCAD%20Modeling.app.tar.gz" \
             --arg linux_sig "$LINUX_SIG" \
             --arg linux_url "$RELEASE_DIR/appimage/kittycad-modeling_${VERSION_NO_V}_amd64.AppImage.tar.gz" \
             --arg windows_sig "$WINDOWS_SIG" \
-            --arg windows_url "$RELEASE_DIR/nsis/KittyCAD%20Modeling_${VERSION_NO_V}_x64-setup.nsis.zip" \
+            --arg windows_url "$RELEASE_DIR/msi/KittyCAD%20Modeling_${VERSION_NO_V}_x64_en-US.msi.zip" \
             '{
               "version": $version,
+              "pub_date": $pub_date,
+              "notes": $notes,
               "platforms": {
                 "darwin-x86_64": {
                   "signature": $darwin_sig,
@@ -195,6 +256,34 @@ jobs:
             }' > last_update.json
             cat last_update.json
 
+      - name: Generate the download static endpoint
+        run: |
+          RELEASE_DIR=https://${BUCKET_DIR}/${VERSION}
+          jq --null-input \
+            --arg version "${VERSION}" \
+            --arg pub_date "${PUB_DATE}" \
+            --arg notes "${NOTES}" \
+            --arg darwin_url "$RELEASE_DIR/dmg/KittyCAD%20Modeling_${VERSION_NO_V}_universal.dmg" \
+            --arg linux_url "$RELEASE_DIR/appimage/kittycad-modeling_${VERSION_NO_V}_amd64.AppImage" \
+            --arg windows_url "$RELEASE_DIR/msi/KittyCAD%20Modeling_${VERSION_NO_V}_x64_en-US.msi" \
+            '{
+              "version": $version,
+              "pub_date": $pub_date,
+              "notes": $notes,
+              "platforms": {
+                "dmg-universal": {
+                  "url": $darwin_url
+                },
+                "appimage-x86_64": {
+                  "url": $linux_url
+                },
+                "msi-x86_64": {
+                  "url": $windows_url
+                }
+              }
+            }' > last_download.json
+            cat last_download.json
+
       - name: Authenticate to Google Cloud
         uses: 'google-github-actions/auth@v1.1.1'
         with:
@@ -211,15 +300,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: ${{ env.BUCKET_DIR }}
 
       - name: Upload release files to Github
+        if: ${{ github.event_name == 'release' }}
         uses: softprops/action-gh-release@v1
         with:
           files: artifact/*/*itty*

.github/workflows/update-dev-branch.yml

@@ -16,7 +16,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3.5.0
+      - uses: actions/checkout@v4
       - shell: bash
         run: |
           # checkout our branch

.gitignore

@@ -22,6 +22,11 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+.idea
+.vscode
+src/wasm-lib/.idea
+src/wasm-lib/.vscode
+
 # rust
 src/wasm-lib/target
 src/wasm-lib/bindings

.prettierignore

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

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 The KittyCAD Authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,48 +1,73 @@
-## Kurt demo project
+![KittyCAD Modeling App](/public/kcma-logomark.png)
+
+## KittyCAD Modeling App
 
 live at [app.kittycad.io](https://app.kittycad.io/)
 
-Not sure what to call this, it's both a language/interpreter and a UI that uses the language as the source of truth model the user build with direct-manipulation with the UI.
+A CAD application from the future, brought to you by the [KittyCAD team](https://kittycad.io).
 
-It might make sense to split this repo up at some point, but not the lang and the UI are all togther in a react app
+The KittyCAD modeling app is our take on what a modern modelling experience can be. It is applying several lessons learned in the decades since most major CAD tools came into existence:
 
-Originally Presented on 10/01/2023
+- All artifacts—including parts and assemblies—should be represented as human-readable code. At the end of the day, your CAD project should be "plain text"
+  - This makes version control—which is a solved problem in software engineering—trivial for CAD
+- All GUI (or point-and-click) interactions should be actions performed on this code representation under the hood
+  - This unlocks a hybrid approach to modeling. Whether you point-and-click as you always have or you write your own KCL code, you are performing the same action in KittyCAD Modeling App
+- Everything graphics _has_ to be built for the GPU
+  - Most CAD applications have had to retrofit support for GPUs, but our geometry engine is made for GPUs (primarily Nvidia's Vulkan), getting the order of magnitude rendering performance boost with it
+- Make the resource-intensive pieces of an application auto-scaling
+  - One of the bottlenecks of today's hardware design tools is that they all rely on the local machine's resources to do the hardest parts, which include geometry rendering and analysis. Our geometry engine parallelizes rendering and just sends video frames back to the app (seriously, inspect source, it's just a `<video>` element), and our API will offload analysis as we build it in
 
-[Video](https://drive.google.com/file/d/183_wjqGdzZ8EEZXSqZ3eDcJocYPCyOdC/view?pli=1)
+We are excited about what a small team of people could build in a short time with our API. We welcome you to try our API, build your own applications, or contribute to ours!
 
-[demo-slides.pdf](https://github.com/KittyCAD/Eng/files/10398178/demo.pdf)
+KittyCAD Modeling App is a _hybrid_ user interface for CAD modeling. You can point-and-click to design parts (and soon assemblies), but everything you make is really just [`kcl` code](https://github.com/KittyCAD/kcl-experiments) under the hood. All of your CAD models can be checked into source control such as GitHub and responsibly versioned, rolled back, and more.
 
-## To run, there are a couple steps since we're compiling rust to WASM, you'll need to have rust stuff installed, then
+The 3D view in KittyCAD Modeling App is just a video stream from our hosted geometry engine. The app sends new modeling commands to the engine via WebSockets, which returns back video frames of the view within the engine.
+
+## Tools
+
+- UI
+  - [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
+  - [CodeMirror](https://codemirror.net/)
+  - Custom WASM LSP Server
+- Modeling
+  - [KittyCAD TypeScript client](https://github.com/KittyCAD/kittycad.ts)
+
+[Original demo video](https://drive.google.com/file/d/183_wjqGdzZ8EEZXSqZ3eDcJocYPCyOdC/view?pli=1)
+
+[Original demo slides](https://github.com/KittyCAD/Eng/files/10398178/demo.pdf)
+
+## Get started
+
+We recommend downloading the latest application binary from [our Releases page](https://github.com/KittyCAD/modeling-app/releases). If you don't see your platform or architecture supported there, please file an issue.
+
+## 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:
 
 ```
 yarn install
 ```
-then
+
+followed by:
+
 ```
-yarn build:wasm
+yarn build:wasm-dev
 ```
+
 That will build the WASM binary and put in the `public` dir (though gitignored)
 
-finally
+finally, to run the web app only, run:
+
 ```
 yarn start
 ```
 
-and `yarn test` you would have need to have built the WASM previously. The tests need to download the binary from a server, so if you've already got `yarn start` running, that will work, otherwise running
-```
-yarn simpleserver
-```
-in one terminal
-and 
-```
-yarn test
-```
-in another.
-
-If you want to edit the rust files, you can cd into `src/wasm-lib` and then use the usual rust commands, `cargo build`, `cargo test`, when you want to bring the changes back to the web-app, a fresh `yarn build:wasm` in the root will be needed.
-
-Worth noting that the integration of the WASM into this project is very hacky because I'm really pushing create-react-app further than what's practical, but focusing on features atm rather than the setup.
-
 ## Developing in Chrome
 
 Chrome is in the process of rolling out a new default which
@@ -52,12 +77,33 @@ enable third-party cookies. You can enable third-party cookies by clicking on
 the eye with a slash through it in the URL bar, and clicking on "Enable
 Third-Party Cookies".
 
+## Running tests
+
+First, start the dev server following "Running a development build" above.
+
+Then in another terminal tab, run:
+
+```
+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.
 
 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.)
@@ -67,19 +113,42 @@ To build, run `yarn tauri build`, or `yarn tauri build --debug` to keep access t
 Note that these became separate apps on Macos, so make sure you open the right one after a build 😉
 ![image](https://github.com/KittyCAD/modeling-app/assets/29681384/a08762c5-8d16-42d8-a02f-a5efc9ae5551)
 
-
 <img width="1232" alt="image" src="https://user-images.githubusercontent.com/29681384/211947063-46164bb4-7bdd-45cb-9a76-2f40c71a24aa.png">
 
 <img width="1232" alt="image (1)" src="https://user-images.githubusercontent.com/29681384/211947073-e76b4933-bef5-4636-bc4d-e930ac8e290f.png">
 
+## Before submitting a PR
+
+Before you submit a contribution PR to this repo, please ensure that:
+
+- There is a corresponding issue for the changes you want to make, so that discussion of approach can be had before work begins.
+- You have separated out refactoring commits from feature commits as much as possible
+- You have run all of the following commands locally:
+  - `yarn fmt`
+  - `yarn tsc`
+  - `yarn test`
+  - Here they are all together: `yarn fmt && yarn tsc && yarn test`
+
 ## Release a new version
 
-1. Bump the versions in the .json files by creating a `Bump to v{x}.{y}.{z}` PR, committing the changes from
+1. Bump the versions in the .json files by creating a `Cut release v{x}.{y}.{z}` PR, committing the changes from
 
 ```bash
 VERSION=x.y.z yarn run bump-jsons
 ```
-The PR may serve as a place to discuss the human-readable changelog and extra QA.
+
+The PR may serve as a place to discuss the human-readable changelog and extra QA. A quick way of getting PR's merged since the last bump is to [use this PR filter](https://github.com/KittyCAD/modeling-app/pulls?q=is%3Apr+sort%3Aupdated-desc+is%3Amerged+), open up the browser console and past in the following
+
+```typescript
+console.log(
+  '- ' +
+    Array.from(
+      document.querySelectorAll('[data-hovercard-type="pull_request"]')
+    ).map((a) => `[${a.innerText}](${a.href})`).join(`
+- `)
+)
+```
+grab the md list and delete any that are older than the last bump
 
 2. Merge the PR
 

docs/kcl/types.md

@@ -0,0 +1,75 @@
+# Types
+
+`KCL` defines the following types and keywords the language.
+
+All these types can be nested in various forms where nesting applies. Like
+arrays can hold objects and vice versa.
+
+## Boolean
+
+`true` or `false` work when defining values.
+
+## Variable declaration
+
+Variables are defined with the `let` keyword like so:
+
+```
+let myBool = false
+```
+
+## Array
+
+An array is defined with `[]` braces. What is inside the brackets can
+be of any type. For example, the following is completely valid:
+
+```
+let myArray = ["thing", 2, false]
+```
+
+If you want to get a value from an array you can use the index like so:
+`myArray[0]`.
+
+
+## Object
+
+An object is defined with `{}` braces. Here is an example object:
+
+```
+let myObj = {a: 0, b: "thing"}
+```
+
+We support two different ways of getting properties from objects, you can call
+`myObj.a` or `myObj["a"]` both work.
+
+
+## Functions
+
+We also have support for defining your own functions. Functions can take in any
+type of argument. Below is an example of the syntax:
+
+```
+fn myFn = (x) => {
+  return x
+}
+```
+
+As you can see above `myFn` just returns whatever it is given.
+
+
+## Binary expressions
+
+You can also do math! Let's show an example below:
+
+```
+let myMathExpression = 3 + 1 * 2 / 3 - 7
+```
+
+You can nest expressions in parenthesis as well:
+
+```
+let myMathExpression = 3 + (1 * 2 / (3 - 7))
+```
+
+Please if you find any issues using any of the above expressions or syntax
+please file an issue with the `ast` label on the [modeling-app
+repo](https://github.com/KittyCAD/modeling-app/issues/new).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "untitled-app",
-  "version": "0.5.0",
+  "version": "0.11.1",
   "private": true,
   "dependencies": {
     "@codemirror/autocomplete": "^6.9.0",
@@ -10,12 +10,13 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.13",
     "@headlessui/tailwindcss": "^0.2.0",
-    "@kittycad/lib": "^0.0.37",
+    "@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",
+    "@tauri-apps/api": "^1.5.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
@@ -24,13 +25,15 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@uiw/react-codemirror": "^4.21.13",
+    "@xstate/inspect": "^0.8.0",
     "@xstate/react": "^3.2.2",
     "crypto-js": "^4.1.1",
+    "debounce-promise": "^3.1.2",
     "formik": "^2.4.3",
     "fuse.js": "^6.6.2",
     "http-server": "^14.1.1",
     "json-rpc-2.0": "^1.6.0",
-    "re-resizable": "^6.9.9",
+    "re-resizable": "^6.9.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
@@ -46,7 +49,7 @@
     "ts-node": "^10.9.1",
     "typescript": "^4.4.2",
     "uuid": "^9.0.0",
-    "vitest": "^0.34.1",
+    "vitest": "^0.34.6",
     "vscode-jsonrpc": "^8.1.0",
     "vscode-languageserver-protocol": "^3.17.3",
     "wasm-pack": "^0.12.1",
@@ -61,15 +64,18 @@
     "build:local": "vite build",
     "build:both": "vite build",
     "build:both:local": "yarn build:wasm && vite build",
+    "pretest": "yarn remove-importmeta",
     "test": "vitest --mode development",
     "test:nowatch": "vitest run --mode development",
-    "test:rust": "(cd src/wasm-lib && cargo test --all && cargo clippy --all --tests)",
+    "test:rust": "(cd src/wasm-lib && cargo test --all && cargo clippy --all --tests --benches)",
     "test:cov": "vitest run --coverage --mode development",
-    "simpleserver:ci": "http-server ./public --cors -p 3000 &",
-    "simpleserver": "http-server ./public --cors -p 3000",
+    "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": "yarn wasm-prep && (cd src/wasm-lib && wasm-pack build --target web --out-dir pkg && cargo test -p kcl-lib export_bindings) && cp src/wasm-lib/pkg/wasm_lib_bg.wasm public && yarn fmt && yarn remove-importmeta",
+    "build:wasm-dev": "(cd src/wasm-lib && wasm-pack build --dev --target web --out-dir pkg && cargo test -p kcl-lib export_bindings) && cp src/wasm-lib/pkg/wasm_lib_bg.wasm public && yarn fmt",
+    "build:wasm": "(cd src/wasm-lib && wasm-pack build --target web --out-dir pkg && cargo test -p kcl-lib export_bindings) && cp src/wasm-lib/pkg/wasm_lib_bg.wasm public && yarn fmt",
+    "build:wasm-clean": "yarn wasm-prep && yarn build:wasm",
     "remove-importmeta": "sed -i 's/import.meta.url/window.location.origin/g' \"./src/wasm-lib/pkg/wasm_lib.js\"; sed -i '' 's/import.meta.url/window.location.origin/g' \"./src/wasm-lib/pkg/wasm_lib.js\" || echo \"sed for both mac and linux\"",
     "wasm-prep": "rm -rf src/wasm-lib/pkg && mkdir src/wasm-lib/pkg && rm -rf src/wasm-lib/kcl/bindings",
     "lint": "eslint --fix src",
@@ -96,9 +102,9 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-env": "^7.22.9",
-    "@tauri-apps/cli": "^1.3.1",
+    "@tauri-apps/cli": "^1.5.0",
     "@types/crypto-js": "^4.1.1",
-    "@types/debounce": "^1.2.1",
+    "@types/debounce-promise": "^3.1.6",
     "@types/isomorphic-fetch": "^0.0.36",
     "@types/react-modal": "^3.16.0",
     "@types/uuid": "^9.0.1",
@@ -112,7 +118,7 @@
     "eslint-plugin-css-modules": "^2.11.0",
     "happy-dom": "^10.8.0",
     "husky": "^8.0.3",
-    "postcss": "^8.4.19",
+    "postcss": "^8.4.31",
     "prettier": "^2.8.0",
     "setimmediate": "^1.0.5",
     "tailwindcss": "^3.2.4",

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/expectations.md

@@ -0,0 +1,42 @@
+## Alpha Users Expectations
+
+### Welcome
+
+First off, thank you so much for your interest in being a part of the closed Alpha program! We are thrilled to have others use our product and see what you build with it (and truthfully, how you break it too).
+
+### KittyCAD Modeling App (KCMA)
+
+What we are introducing to you is our KittyCAD Modeling App (KCMA). KCMA is a CAD application that expresses a hybrid style of traditional CAD interface along with a code-CAD interface. KCMA is a great way for us to test our own APIs as well as inspire others to develop their own applications.
+
+### Why Code?
+
+Plenty of you have professional CAD experience, and may not understand why coding your model would be helpful. The "code-CAD" paradigm isn’t as popular as traditional CAD programs (SolidWorks, NX, CREO, OnShape, etc.), but it certainly has its benefits. Some benefits include:
+
+- Automation and parametric design
+- Customization and flexibility
+- Algorithmic and generative design
+- Reproducibility
+- Easier integration with other tools
+
+### Before You Use KCMA
+
+Before you dive straight into the app, we wanted to lay some expectations out for you. 
+
+- KCMA is in early development. Kurt pitched the idea back in January, and the team has been working hard on it since then. KCMA has really basic CAD features for now, but we have plenty of features on our roadmap. Most of the features that you may be currently used to in your CAD workflow today will be available down the road.
+- For a list of all scripting functions, please reference our [documentation](https://github.com/KittyCAD/modeling-app/blob/main/docs/kcl/std.md). For a basic rundown of our types, please reference [this document](https://github.com/KittyCAD/modeling-app/blob/main/docs/kcl/types.md).
+- With that being said, we have created an external new features list in [GH Discussions](https://github.com/KittyCAD/modeling-app/discussions). For our current priority list, please click [here](https://github.com/KittyCAD/modeling-app/blob/main/public/roadmap.md). Please upvote any features in the GH Discussions page that you would like to see implemented first. We will prioritize the highest upvoted items or items that are foundational for other features on the list. You can also add your own, but we will review it to make sure it’s not a duplicate or it’s feasible for the current state of the app.
+- Please report any and all bugs/issues you find. Even the smallest bugs are important! You can report them in a GH Issue [here](https://github.com/KittyCAD/modeling-app/issues/new). You are more than welcome to link your GH Issue in the **bugs** section of our Discord, but if you want to discuss the bug further, please keep that in the GH Issue thread. Please include the severity of the bug in your GH Issue ticket (High, Medium, or Low). If you are having trouble deciding what severity the bug is, use this guideline:
+    - **High:** The bug is blocking you from continuing.
+        - Example: Every time I click the extrude button with two faces selected, the app crashes.
+    - **Medium:** You can find a workaround to the problem, but it increases your time spent working or makes it unenjoyable.
+        - Example: When the app is full screen on Mac, the settings are not showing properly. It works if I have the app windowed.
+    - **Low:** The bug is annoying but doesn’t affect workflow or block you from continuing (usually you can say “It would be nice if ___, but it’s not needed”)
+        - Example:  It would be nice if the camera would orient normal to the sketching surface when I select a face/plane and click “sketch”.
+- We want you all to be aware that we may reach out to you in regard to issues, bugs, problems, and satisfaction. This will typically be for further clarification so we can really nail things down.
+
+### Discord
+We will be using Discord a lot more now that the Alpha has been released to people outside of the company. Please feel free to discuss and talk with us in the **alpha users** section of the server. We highly encourage you to engage with us on Discord!
+
+### Thank You!
+
+Once again, from all of us to you, thank you for being a part of the closed Alpha. We are happy to chat with you all, hear your feedback, and see some of your projects!

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>

public/roadmap.md

@@ -0,0 +1,26 @@
+## KittyCAD Modeling App Roadmap
+
+This document ties into our [GH Discussions Feature List](https://github.com/KittyCAD/modeling-app/discussions). Please upvote any features that you want to see next, or add ones that are not listed and we will review. 
+
+### Current Priority List
+
+1. [Sketch on Face](https://github.com/KittyCAD/modeling-app/discussions/477)
+2. [Revolve](https://github.com/KittyCAD/modeling-app/discussions/496)
+3. [Fillet](https://github.com/KittyCAD/modeling-app/discussions/501)
+4. [Linear Pattern](https://github.com/KittyCAD/modeling-app/discussions/256)
+5. [Circular Pattern](https://github.com/KittyCAD/modeling-app/discussions/257)
+6. [Mirror-Sketch](https://github.com/KittyCAD/modeling-app/discussions/507)
+7. [Chamfer](https://github.com/KittyCAD/modeling-app/discussions/502)
+8. [Sweep](https://github.com/KittyCAD/modeling-app/discussions/498)
+9.  [Draft](https://github.com/KittyCAD/modeling-app/discussions/495)
+10. [Shell](https://github.com/KittyCAD/modeling-app/discussions/503)
+11. [Union](https://github.com/KittyCAD/modeling-app/discussions/509)
+12. [Mirror-Model](https://github.com/KittyCAD/modeling-app/discussions/508)
+13. [Subtract](https://github.com/KittyCAD/modeling-app/discussions/510)
+14. [Intersect](https://github.com/KittyCAD/modeling-app/discussions/511)
+15. [Offset](https://github.com/KittyCAD/modeling-app/discussions/512)
+16. [Thicken](https://github.com/KittyCAD/modeling-app/discussions/499)
+17. [Import](https://github.com/KittyCAD/modeling-app/discussions/478)
+18. [Assemblies](https://github.com/KittyCAD/modeling-app/discussions/494)
+19. [External Thread](https://github.com/KittyCAD/modeling-app/discussions/505)
+

src-tauri/Cargo.toml

@@ -12,17 +12,18 @@ rust-version = "1.60"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [build-dependencies]
-tauri-build = { version = "1.4.0", features = [] }
+tauri-build = { version = "1.5.0", features = [] }
 
 [dependencies]
 anyhow = "1"
-oauth2 = "4.4.1"
+kittycad = "0.2.33"
+oauth2 = "4.4.2"
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
-tauri = { version = "1.3.0", features = [ "updater", "path-all", "dialog-all", "fs-all", "http-request", "shell-open", "shell-open-api"] }
-tokio = { version = "1.29.1", features = ["time"] }
-toml = "0.6.0"
+tauri = { 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.33.0", features = ["time"] }
+toml = "0.8.2"
 
 [features]
 # this feature is used for production builds or when `devPath` points to the filesystem and the built-in dev server is disabled.

src-tauri/src/main.rs

@@ -6,6 +6,7 @@ use std::io::Read;
 use anyhow::Result;
 use oauth2::TokenResponse;
 use tauri::{InvokeError, Manager};
+const DEFAULT_HOST: &str = "https://api.kittycad.io";
 
 /// This command returns the a json string parse from a toml file at the path.
 #[tauri::command]
@@ -85,6 +86,47 @@ async fn login(app: tauri::AppHandle, host: &str) -> Result<String, InvokeError>
     Ok(token)
 }
 
+///This command returns the KittyCAD user info given a token.
+/// The string returned from this method is the user info as a json string.
+#[tauri::command]
+async fn get_user(
+    token: Option<String>,
+    hostname: &str,
+) -> Result<kittycad::types::User, InvokeError> {
+    // Use the host passed in if it's set.
+    // Otherwise, use the default host.
+    let host = if hostname.is_empty() {
+        DEFAULT_HOST.to_string()
+    } else {
+        hostname.to_string()
+    };
+
+    // Change the baseURL to the one we want.
+    let mut baseurl = host.to_string();
+    if !host.starts_with("http://") && !host.starts_with("https://") {
+        baseurl = format!("https://{host}");
+        if host.starts_with("localhost") {
+            baseurl = format!("http://{host}")
+        }
+    }
+    println!("Getting user info...");
+
+    // use kittycad library to fetch the user info from /user/me
+    let mut client = kittycad::Client::new(token.unwrap());
+
+    if baseurl != DEFAULT_HOST {
+        client.set_base_url(&baseurl);
+    }
+
+    let user_info: kittycad::types::User = client
+        .users()
+        .get_self()
+        .await
+        .map_err(|e| InvokeError::from_anyhow(e.into()))?;
+
+    Ok(user_info)
+}
+
 fn main() {
     tauri::Builder::default()
         .setup(|app| {
@@ -97,7 +139,12 @@ fn main() {
             }
             Ok(())
         })
-        .invoke_handler(tauri::generate_handler![login, read_toml, read_txt_file])
+        .invoke_handler(tauri::generate_handler![
+            get_user,
+            login,
+            read_toml,
+            read_txt_file
+        ])
         .plugin(tauri_plugin_fs_extra::init())
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "kittycad-modeling",
-    "version": "0.5.0"
+    "version": "0.11.1"
   },
   "tauri": {
     "allowlist": {
@@ -36,6 +36,9 @@
           "https://api.dev.kittycad.io/*"
         ]
       },
+      "os": {
+        "all": true
+      },
       "shell": {
         "open": true
       },
@@ -71,9 +74,9 @@
       "shortDescription": "",
       "targets": "all",
       "windows": {
-        "certificateThumbprint": null,
+        "certificateThumbprint": "F4C9A52FF7BC26EE5E054946F6B11DEEA94C748D",
         "digestAlgorithm": "sha256",
-        "timestampUrl": ""
+        "timestampUrl": "http://timestamp.digicert.com"
       }
     },
     "security": {

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,14 +1,6 @@
-import {
-  useRef,
-  useEffect,
-  useLayoutEffect,
-  useCallback,
-  MouseEventHandler,
-} from 'react'
+import { useEffect, useCallback, MouseEventHandler } from 'react'
 import { DebugPanel } from './components/DebugPanel'
 import { v4 as uuidv4 } from 'uuid'
-import { asyncParser } from './lang/abstractSyntaxTree'
-import { _executor } from './lang/executor'
 import { PaneType, useStore } from './useStore'
 import { Logs, KCLErrors } from './components/Logs'
 import { CollapsiblePanel } from './components/CollapsiblePanel'
@@ -16,13 +8,9 @@ import { MemoryPanel } from './components/MemoryPanel'
 import { useHotKeyListener } from './hooks/useHotKeyListener'
 import { Stream } from './components/Stream'
 import ModalContainer from 'react-modal-promise'
-import {
-  EngineCommand,
-  EngineCommandManager,
-} from './lang/std/engineConnection'
+import { EngineCommand } from './lang/std/engineConnection'
 import { throttle } from './lib/utils'
 import { AppHeader } from './components/AppHeader'
-import { KCLError } from './lang/errors'
 import { Resizable } from 're-resizable'
 import {
   faCode,
@@ -41,74 +29,33 @@ 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 { useEngineConnectionSubscriptions } from 'hooks/useEngineConnectionSubscriptions'
+import { engineCommandManager } from './lang/std/engineConnection'
+import { kclManager } from 'lang/KclSinglton'
+import { useModelingContext } from 'hooks/useModelingContext'
 
 export function App() {
-  const { code: loadedCode, project } = useLoaderData() as IndexLoaderData
+  const { code: loadedCode, project, file } = useLoaderData() as IndexLoaderData
 
-  const streamRef = useRef<HTMLDivElement>(null)
   useHotKeyListener()
   const {
-    addLog,
-    addKCLError,
-    setCode,
-    setAst,
-    setError,
-    setProgramMemory,
-    resetLogs,
-    resetKCLErrors,
-    setArtifactMap,
-    engineCommandManager,
-    setEngineCommandManager,
-    highlightRange,
-    setHighlightRange,
-    setCursor2,
-    setMediaStream,
-    setIsStreamReady,
-    isStreamReady,
     buttonDownInStream,
     openPanes,
     setOpenPanes,
     didDragInStream,
-    setStreamDimensions,
     streamDimensions,
-    setIsExecuting,
-    defferedCode,
   } = useStore((s) => ({
-    addLog: s.addLog,
-    defferedCode: s.defferedCode,
-    setCode: s.setCode,
-    setAst: s.setAst,
-    setError: s.setError,
-    setProgramMemory: s.setProgramMemory,
-    resetLogs: s.resetLogs,
-    resetKCLErrors: s.resetKCLErrors,
-    setArtifactMap: s.setArtifactNSourceRangeMaps,
-    engineCommandManager: s.engineCommandManager,
-    setEngineCommandManager: s.setEngineCommandManager,
-    highlightRange: s.highlightRange,
-    setHighlightRange: s.setHighlightRange,
-    setCursor2: s.setCursor2,
-    setMediaStream: s.setMediaStream,
-    isStreamReady: s.isStreamReady,
-    setIsStreamReady: s.setIsStreamReady,
     buttonDownInStream: s.buttonDownInStream,
-    addKCLError: s.addKCLError,
     openPanes: s.openPanes,
     setOpenPanes: s.setOpenPanes,
     didDragInStream: s.didDragInStream,
-    setStreamDimensions: s.setStreamDimensions,
     streamDimensions: s.streamDimensions,
-    setIsExecuting: s.setIsExecuting,
   }))
 
-  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
 
@@ -125,9 +72,11 @@ export function App() {
   useHotkeys('shift + l', () => togglePane('logs'))
   useHotkeys('shift + e', () => togglePane('kclErrors'))
   useHotkeys('shift + d', () => togglePane('debug'))
+  useHotkeys('esc', () => send('Cancel'))
 
-  const paneOpacity =
-    onboardingStatus === onboardingPaths.CAMERA
+  const paneOpacity = [onboardingPaths.CAMERA, onboardingPaths.STREAMING].some(
+    (p) => p === onboardingStatus
+  )
     ? 'opacity-20'
     : didDragInStream
     ? 'opacity-40'
@@ -137,144 +86,26 @@ export function App() {
   // on mount, and overwrite any locally-stored code
   useEffect(() => {
     if (isTauri() && loadedCode !== null) {
-      setCode(loadedCode)
+      if (kclManager.engineCommandManager.engineConnection?.isReady()) {
+        // If the engine is ready, promptly execute the loaded code
+        kclManager.setCodeAndExecute(loadedCode)
+      } else {
+        // Otherwise, just set the code and wait for the connection to complete
+        kclManager.setCode(loadedCode)
+      }
     }
     return () => {
       // Clear code on unmount if in desktop app
       if (isTauri()) {
-        setCode('')
+        kclManager.setCode('')
       }
     }
-  }, [loadedCode, setCode])
+  }, [loadedCode])
 
-  const streamWidth = streamRef?.current?.offsetWidth
-  const streamHeight = streamRef?.current?.offsetHeight
-
-  const width = streamWidth ? streamWidth : 0
-  const quadWidth = Math.round(width / 4) * 4
-  const height = streamHeight ? streamHeight : 0
-  const quadHeight = Math.round(height / 4) * 4
-
-  useLayoutEffect(() => {
-    setStreamDimensions({
-      streamWidth: quadWidth,
-      streamHeight: quadHeight,
-    })
-    if (!width || !height) return
-    const eng = new EngineCommandManager({
-      setMediaStream,
-      setIsStreamReady,
-      width: quadWidth,
-      height: quadHeight,
-      token,
-    })
-    setEngineCommandManager(eng)
-    return () => {
-      eng?.tearDown()
-    }
-  }, [quadWidth, quadHeight])
-
-  useEffect(() => {
-    if (!isStreamReady) return
-    if (!engineCommandManager) return
-    let unsubFn: any[] = []
-    const asyncWrap = async () => {
-      try {
-        if (!defferedCode) {
-          setAst(null)
-          return
-        }
-        const _ast = await asyncParser(defferedCode)
-        setAst(_ast)
-        resetLogs()
-        resetKCLErrors()
-        engineCommandManager.endSession()
-        engineCommandManager.startNewSession()
-        setIsExecuting(true)
-        const programMemory = await _executor(
-          _ast,
-          {
-            root: {
-              _0: {
-                type: 'userVal',
-                value: 0,
-                __meta: [],
-              },
-              _90: {
-                type: 'userVal',
-                value: 90,
-                __meta: [],
-              },
-              _180: {
-                type: 'userVal',
-                value: 180,
-                __meta: [],
-              },
-              _270: {
-                type: 'userVal',
-                value: 270,
-                __meta: [],
-              },
-            },
-          },
-          engineCommandManager
-        )
-
-        const { artifactMap, sourceRangeMap } =
-          await engineCommandManager.waitForAllCommands()
-        setIsExecuting(false)
-
-        setArtifactMap({ artifactMap, sourceRangeMap })
-        const unSubHover = engineCommandManager.subscribeToUnreliable({
-          event: 'highlight_set_entity',
-          callback: ({ data }) => {
-            if (data?.entity_id) {
-              const sourceRange = sourceRangeMap[data.entity_id]
-              setHighlightRange(sourceRange)
-            } else if (
-              !highlightRange ||
-              (highlightRange[0] !== 0 && highlightRange[1] !== 0)
-            ) {
-              setHighlightRange([0, 0])
-            }
-          },
-        })
-        const unSubClick = engineCommandManager.subscribeTo({
-          event: 'select_with_point',
-          callback: ({ data }) => {
-            if (!data?.entity_id) {
-              setCursor2()
-              return
-            }
-            const sourceRange = sourceRangeMap[data.entity_id]
-            setCursor2({ range: sourceRange, type: 'default' })
-          },
-        })
-        unsubFn.push(unSubHover, unSubClick)
-        if (programMemory !== undefined) {
-          setProgramMemory(programMemory)
-        }
-
-        setError()
-      } catch (e: any) {
-        setIsExecuting(false)
-        if (e instanceof KCLError) {
-          addKCLError(e)
-        } else {
-          setError('problem')
-          console.log(e)
-          addLog(e)
-        }
-      }
-    }
-    asyncWrap()
-    return () => {
-      unsubFn.forEach((fn) => fn())
-    }
-  }, [defferedCode, isStreamReady, engineCommandManager])
+  useEngineConnectionSubscriptions()
 
   const debounceSocketSend = throttle<EngineCommand>((message) => {
-    engineCommandManager?.sendSceneCommand(message)
+    engineCommandManager.sendSceneCommand(message)
   }, 16)
   const handleMouseMove: MouseEventHandler<HTMLDivElement> = (e) => {
     e.nativeEvent.preventDefault()
@@ -287,8 +118,38 @@ export function App() {
     })
 
     const newCmdId = uuidv4()
-
-    if (buttonDownInStream) {
+    if (buttonDownInStream === undefined) {
+      if (state.matches('Sketch.Line Tool')) {
+        debounceSocketSend({
+          type: 'modeling_cmd_req',
+          cmd_id: newCmdId,
+          cmd: {
+            type: 'mouse_move',
+            window: { x, y },
+          },
+        })
+      } else {
+        debounceSocketSend({
+          type: 'modeling_cmd_req',
+          cmd: {
+            type: 'highlight_set_entity',
+            selected_at_window: { x, y },
+          },
+          cmd_id: newCmdId,
+        })
+      }
+    } else {
+      if (state.matches('Sketch.Move Tool')) {
+        debounceSocketSend({
+          type: 'modeling_cmd_req',
+          cmd_id: newCmdId,
+          cmd: {
+            type: 'handle_mouse_drag_move',
+            window: { x, y },
+          },
+        })
+        return
+      }
       const interactionGuards = cameraMouseDragGuards[cameraControls]
       let interaction: CameraDragInteractionType_type
 
@@ -303,6 +164,7 @@ export function App() {
       } else {
         return
       }
+
       debounceSocketSend({
         type: 'modeling_cmd_req',
         cmd: {
@@ -312,23 +174,13 @@ export function App() {
         },
         cmd_id: newCmdId,
       })
-    } else {
-      debounceSocketSend({
-        type: 'modeling_cmd_req',
-        cmd: {
-          type: 'highlight_set_entity',
-          selected_at_window: { x, y },
-        },
-        cmd_id: newCmdId,
-      })
     }
   }
 
   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={
@@ -336,7 +188,7 @@ export function App() {
           paneOpacity +
           (buttonDownInStream ? ' pointer-events-none' : '')
         }
-        project={project}
+        project={{ project, file }}
         enableMenu={true}
       />
       <ModalContainer />
@@ -349,11 +201,11 @@ export function App() {
           paneOpacity
         }
         defaultSize={{
-          width: '400px',
+          width: '550px',
           height: 'auto',
         }}
         minWidth={200}
-        maxWidth={600}
+        maxWidth={800}
         minHeight={'auto'}
         maxHeight={'auto'}
         handleClasses={{
@@ -361,7 +213,7 @@ export function App() {
             'hover:bg-liquid-30/40 dark:hover:bg-liquid-10/40 bg-transparent transition-colors duration-100 transition-ease-out delay-100',
         }}
       >
-        <div className="h-full flex flex-col justify-between">
+        <div id="code-pane" className="h-full flex flex-col justify-between">
           <CollapsiblePanel
             title="Code"
             icon={faCode}

src/Auth.tsx

@@ -3,12 +3,10 @@ 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 isLoggedIn = state.matches('checkIfLoggedIn')
+  const { auth } = useGlobalStateContext()
+  const isLoggingIn = auth?.state.matches('checkIfLoggedIn')
 
-  return isLoggedIn ? (
+  return isLoggingIn ? (
     <Loading>Loading KittyCAD Modeling App...</Loading>
   ) : (
     <>{children}</>

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 } 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,18 +137,27 @@ 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>
       ),
-      errorElement: <ErrorPage />,
       id: paths.FILE,
       loader: async ({
         request,
@@ -167,21 +184,41 @@ 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 })
 
           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 +249,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 +271,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.module.css

@@ -47,6 +47,52 @@
   @apply hover:bg-cool-20;
 }
 
+.toolbarButtons::-webkit-scrollbar {
+  @apply h-0.5;
+}
+
+.toolbarButtons {
+  @apply flex items-center overflow-x-auto;
+  scrollbar-width: thin;
+}
+
+.toolbarButtons button {
+  @apply text-chalkboard-90 bg-chalkboard-10/50 border-chalkboard-50 whitespace-nowrap;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  @apply gap-1.5 p-0.5 pr-1;
+  @apply rounded-sm;
+}
+:global(.dark) .toolbarButtons button {
+  @apply text-chalkboard-30 bg-chalkboard-90/50 border-chalkboard-50;
+}
+.toolbarButtons button:hover {
+  @apply text-cool-90 bg-cool-10;
+}
+:global(.sketch) .toolbarButtons button:hover {
+  @apply text-fern-90 bg-fern-10;
+}
+.toolbarButtons button:disabled {
+  @apply text-chalkboard-70 bg-chalkboard-30;
+}
+.toolbarButtons button:disabled:hover {
+  @apply !bg-inherit !text-inherit cursor-not-allowed;
+}
+
+:global(.dark) .toolbarButtons button {
+  @apply text-chalkboard-20 border-chalkboard-50;
+}
+:global(.dark) .toolbarButtons button:hover {
+  @apply text-cool-10 border-chalkboard-50 bg-cool-90;
+}
+:global(.dark .sketch) .toolbarButtons button:hover {
+  @apply text-fern-10 border-chalkboard-50 bg-fern-90;
+}
+:global(.dark) .toolbarButtons button:disabled {
+  @apply text-chalkboard-40 bg-chalkboard-80;
+}
+
 :global(.dark) .popoverToggle {
   @apply hover:bg-cool-90;
 }

src/Toolbar.tsx

@@ -1,196 +1,185 @@
-import { useStore, toolTips } 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 { ToolTip } from './useStore'
+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 { isCursorInSketchCommandRange } from 'lang/util'
+import { ActionIcon } from 'components/ActionIcon'
+import { engineCommandManager } from './lang/std/engineConnection'
+import { useModelingContext } from 'hooks/useModelingContext'
+
+export const sketchButtonClassnames = {
+  background:
+    'bg-chalkboard-100 group-hover:bg-chalkboard-90 hover:bg-chalkboard-90 dark:bg-fern-20 dark:group-hover:bg-fern-10 dark:hover:bg-fern-10 group-disabled:bg-chalkboard-50 dark:group-disabled:bg-chalkboard-60 group-hover:group-disabled:bg-chalkboard-50 dark:group-hover:group-disabled:bg-chalkboard-50',
+  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,
-  } = useStore((s) => ({
-    guiMode: s.guiMode,
-    setGuiMode: s.setGuiMode,
-    selectionRanges: s.selectionRanges,
-    ast: s.ast,
-    updateAst: s.updateAst,
-    programMemory: s.programMemory,
-  }))
+  const { state, send, context } = useModelingContext()
+  const toolbarButtonsRef = useRef<HTMLSpanElement>(null)
+  const pathId = useMemo(
+    () =>
+      isCursorInSketchCommandRange(
+        engineCommandManager.artifactMap,
+        context.selectionRanges
+      ),
+    [engineCommandManager.artifactMap, context.selectionRanges]
+  )
 
-  useEffect(() => {
-    console.log('guiMode', guiMode)
-  }, [guiMode])
+  function handleToolbarButtonsWheelEvent(ev: WheelEvent<HTMLSpanElement>) {
+    const span = toolbarButtonsRef.current
+    if (!span) {
+      return
+    }
 
-  function ToolbarButtons() {
+    span.scrollLeft = span.scrollLeft += ev.deltaY
+  }
+
+  function ToolbarButtons({ className }: React.HTMLAttributes<HTMLElement>) {
     return (
-      <>
-        {guiMode.mode === 'default' && (
-          <button
-            onClick={() => {
-              setGuiMode({
-                mode: 'sketch',
-                sketchMode: 'selectFace',
-              })
-            }}
+      <span
+        ref={toolbarButtonsRef}
+        onWheel={handleToolbarButtonsWheelEvent}
+        className={styles.toolbarButtons + ' ' + className}
       >
+        {state.nextEvents.includes('Enter sketch') && (
+          <button
+            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)
-            }}
-          >
-            SketchOnFace
-          </button>
-        )}
-        {(guiMode.mode === 'canEditSketch' || false) && (
-          <button
-            onClick={() => {
-              setGuiMode({
-                mode: 'sketch',
-                sketchMode: 'sketchEdit',
-                pathToNode: guiMode.pathToNode,
-                rotation: guiMode.rotation,
-                position: guiMode.position,
-              })
-            }}
+            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, { focusPath: pathToExtrudeArg })
-              }}
-            >
-              ExtrudeSketch
-            </button>
-            <button
-              onClick={() => {
-                if (!ast) return
-                const pathToNode = getNodePathFromSourceRange(
-                  ast,
-                  selectionRanges.codeBasedSelections[0].range
-                )
-                const { modifiedAst, pathToExtrudeArg } = extrudeSketch(
-                  ast,
-                  pathToNode,
-                  false
-                )
-                updateAst(modifiedAst, { focusPath: pathToExtrudeArg })
-              }}
-            >
-              ExtrudeSketch (w/o pipe)
-            </button>
-          </>
-        )}
-
-        {guiMode.mode === 'sketch' && (
-          <button onClick={() => setGuiMode({ mode: 'default' })}>
-            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) => ['line'].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={() =>
-                  setGuiMode({
-                    ...guiMode,
-                    ...(guiMode.sketchMode === sketchFnName
-                      ? {
-                          sketchMode: 'sketchEdit',
-                          // todo: ...guiMod is adding isTooltip: true, will probably just fix with xstate migtaion
+              state.matches('Sketch.Line Tool')
+                ? send('CancelSketch')
+                : send('Equip tool')
             }
-                      : {
-                          sketchMode: sketchFnName,
-                          isTooltip: true,
-                        }),
-                  })
+            className={
+              'group ' +
+              (state.matches('Sketch.Line Tool')
+                ? '!text-fern-70 !bg-fern-10 !dark:text-fern-20 !border-fern-50'
+                : '')
             }
           >
-                {sketchFnName}
-                {guiMode.sketchMode === sketchFnName && '✅'}
+            <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')
             )
-          })}
-        <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 />
-      </>
+            .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={'line'} // TODO
+                  bgClassName={sketchButtonClassnames.background}
+                  iconClassName={sketchButtonClassnames.icon}
+                  size="md"
+                />
+                {eventName
+                  .replace('Make segment ', '')
+                  .replace('Constrain ', '')}
+              </button>
+            ))}
+        {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 flex-1 gap-2 py-0.5 overflow-hidden whitespace-nowrap">
+        <menu className="flex-1 gap-2 py-0.5 overflow-hidden whitespace-nowrap">
           <ToolbarButtons />
         </menu>
         <Popover.Button
@@ -224,14 +213,14 @@ 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" />
             </Popover.Button>
           </section>
           <section>
-            <ToolbarButtons />
+            <ToolbarButtons className="flex-wrap" />
           </section>
         </Popover.Panel>
       </Transition>

src/components/ActionButton.tsx

@@ -23,10 +23,7 @@ type ActionButtonAsLink = BaseActionButtonProps &
   }
 
 type ActionButtonAsExternal = BaseActionButtonProps &
-  Omit<
-    React.AnchorHTMLAttributes<HTMLAnchorElement>,
-    keyof BaseActionButtonProps
-  > & {
+  Omit<LinkProps, keyof BaseActionButtonProps> & {
     Element: 'externalLink'
   }
 
@@ -69,12 +66,17 @@ export const ActionButton = (props: ActionButtonProps) => {
       )
     }
     case 'externalLink': {
-      const { Element, icon, children, className, ...rest } = props
+      const { Element, to, icon, children, className, ...rest } = props
       return (
-        <a className={classNames} {...rest}>
+        <Link
+          to={to || paths.INDEX}
+          className={classNames}
+          {...rest}
+          target="_blank"
+        >
           {icon && <ActionIcon {...icon} />}
           {children}
-        </a>
+        </Link>
       )
     }
     default: {

src/components/ActionIcon.tsx

@@ -4,6 +4,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { IconDefinition as BrandIconDefinition } from '@fortawesome/free-brands-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { CustomIcon, CustomIconName } from './CustomIcon'
 
 const iconSizes = {
   sm: 12,
@@ -13,7 +14,7 @@ const iconSizes = {
 }
 
 export interface ActionIconProps extends React.PropsWithChildren {
-  icon?: SolidIconDefinition | BrandIconDefinition
+  icon?: SolidIconDefinition | BrandIconDefinition | CustomIconName
   className?: string
   bgClassName?: string
   iconClassName?: string
@@ -28,25 +29,39 @@ export const ActionIcon = ({
   size = 'md',
   children,
 }: ActionIconProps) => {
+  // By default, we reverse the icon color and background color in dark mode
+  const computedIconClassName =
+    iconClassName ||
+    `text-liquid-20 h-auto group-hover:text-liquid-10 hover:text-liquid-10 dark:text-chalkboard-100 dark:group-hover:text-chalkboard-100 dark:hover:text-chalkboard-100 group-disabled:bg-chalkboard-50 dark:group-disabled:bg-chalkboard-60 group-hover:group-disabled:bg-chalkboard-50 dark:group-hover:group-disabled:bg-chalkboard-50`
+
+  const computedBgClassName =
+    bgClassName ||
+    `bg-chalkboard-100 group-hover:bg-chalkboard-90 hover:bg-chalkboard-90 dark:bg-liquid-20 dark:group-hover:bg-liquid-10 dark:hover:bg-liquid-10 group-disabled:bg-chalkboard-80 dark:group-disabled:bg-chalkboard-80`
+
   return (
     <div
       className={
         `p-${
           size === 'xl' ? '2' : '1'
         } w-fit inline-grid place-content-center ${className} ` +
-        (bgClassName ||
-          'bg-chalkboard-100 group-hover:bg-chalkboard-90 hover:bg-chalkboard-90 dark:bg-liquid-20 dark:group-hover:bg-liquid-10 dark:hover:bg-liquid-10')
+        computedBgClassName
       }
     >
-      {children || (
+      {children ? (
+        children
+      ) : typeof icon === 'string' ? (
+        <CustomIcon
+          name={icon}
+          width={iconSizes[size]}
+          height={iconSizes[size]}
+          className={computedIconClassName}
+        />
+      ) : (
         <FontAwesomeIcon
           icon={icon}
           width={iconSizes[size]}
           height={iconSizes[size]}
-          className={
-            iconClassName ||
-            'text-liquid-20 h-auto group-hover:text-liquid-10 hover:text-liquid-10 dark:text-liquid-100 dark:group-hover:text-liquid-100 dark:hover:text-liquid-100'
-          }
+          className={computedIconClassName}
         />
       )}
     </div>

src/components/AppHeader.tsx

@@ -1,13 +1,14 @@
 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'
+import { NetworkHealthIndicator } from './NetworkHealthIndicator'
 
 interface AppHeaderProps extends React.PropsWithChildren {
   showToolbar?: boolean
-  project?: ProjectWithEntryPointMetadata
+  project?: Omit<IndexLoaderData, 'code'>
   className?: string
   enableMenu?: boolean
 }
@@ -19,31 +20,33 @@ export const AppHeader = ({
   className = '',
   enableMenu = false,
 }: AppHeaderProps) => {
-  const {
-    auth: {
-      context: { user },
-    },
-  } = useGlobalStateContext()
+  const { auth } = useGlobalStateContext()
+  const user = auth?.context?.user
 
   return (
     <header
       className={
-        (showToolbar ? 'grid ' : 'flex justify-between ') +
+        (showToolbar ? 'w-full grid ' : 'flex justify-between ') +
         styles.header +
         ' overlaid-panes sticky top-0 z-20 py-1 px-5 bg-chalkboard-10/70 dark:bg-chalkboard-100/50 border-b dark:border-b-2 border-chalkboard-30 dark:border-chalkboard-90 items-center ' +
         className
       }
     >
-      <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-4xl">
+        <div className="max-w-lg md:max-w-xl lg:max-w-2xl xl:max-w-4xl 2xl:max-w-5xl">
           <Toolbar />
         </div>
       )}
       {/* If there are children, show them, otherwise show User menu */}
       {children || (
-        <div className="ml-auto">
+        <div className="flex items-center gap-1 ml-auto">
+          <NetworkHealthIndicator />
           <UserSidebarMenu user={user} />
         </div>
       )}

src/components/AstExplorer.tsx

@@ -0,0 +1,193 @@
+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 setHighlightRange = useStore((s) => s.setHighlightRange)
+  const { context } = useModelingContext()
+  const pathToNode = getNodePathFromSourceRange(
+    // TODO maybe need to have callback to make sure it stays in sync
+    kclManager.ast,
+    context.selectionRanges.codeBasedSelections?.[0]?.range
+  )
+  const node = getNodeFromPath(kclManager.ast, pathToNode).node
+  const [filterKeys, setFilterKeys] = useState<string[]>(['start', 'end'])
+
+  return (
+    <div className="relative" style={{ width: '300px' }}>
+      <div className="">
+        filter out keys:<div className="w-2 inline-block"></div>
+        {['start', 'end', 'type'].map((key) => {
+          return (
+            <label key={key} className="inline-flex items-center">
+              <input
+                type="checkbox"
+                className="form-checkbox"
+                checked={filterKeys.includes(key)}
+                onChange={(e) => {
+                  if (filterKeys.includes(key)) {
+                    setFilterKeys(filterKeys.filter((k) => k !== key))
+                  } else {
+                    setFilterKeys([...filterKeys, key])
+                  }
+                }}
+              />
+              <span className="mr-2">{key}</span>
+            </label>
+          )
+        })}
+      </div>
+      <div
+        className="h-full relative"
+        onMouseLeave={(e) => {
+          setHighlightRange([0, 0])
+        }}
+      >
+        <pre className=" text-xs overflow-y-auto" style={{ width: '300px' }}>
+          <DisplayObj
+            obj={kclManager.ast}
+            filterKeys={filterKeys}
+            node={node}
+          />
+        </pre>
+      </div>
+    </div>
+  )
+}
+
+function DisplayBody({
+  body,
+  filterKeys,
+  node,
+}: {
+  body: { start: number; end: number; [key: string]: any }[]
+  filterKeys: string[]
+  node: any
+}) {
+  return (
+    <>
+      {body.map((b, index) => {
+        return (
+          <div className="my-2" key={index}>
+            <DisplayObj obj={b} filterKeys={filterKeys} node={node} />
+          </div>
+        )
+      })}
+    </>
+  )
+}
+
+function DisplayObj({
+  obj,
+  filterKeys,
+  node,
+}: {
+  obj: { start: number; end: number; [key: string]: any }
+  filterKeys: string[]
+  node: any
+}) {
+  const setHighlightRange = useStore((s) => s.setHighlightRange)
+  const { send } = useModelingContext()
+  const ref = useRef<HTMLPreElement>(null)
+  const [hasCursor, setHasCursor] = useState(false)
+  const [isCollapsed, setIsCollapsed] = useState(false)
+  useEffect(() => {
+    if (
+      node?.start === obj?.start &&
+      node?.end === obj?.end &&
+      node.type === obj?.type
+    ) {
+      ref?.current?.scrollIntoView?.({ behavior: 'smooth', block: 'center' })
+      setHasCursor(true)
+    } else {
+      setHasCursor(false)
+    }
+  }, [node.start, node.end, node.type])
+  return (
+    <pre
+      ref={ref}
+      className={`ml-2 border-l border-violet-600 pl-1 ${
+        hasCursor ? 'bg-violet-100/25' : ''
+      }`}
+      onMouseEnter={(e) => {
+        setHighlightRange([obj?.start || 0, obj.end])
+        e.stopPropagation()
+      }}
+      onMouseMove={(e) => {
+        e.stopPropagation()
+        setHighlightRange([obj?.start || 0, obj.end])
+      }}
+      onClick={(e) => {
+        send({
+          type: 'Set selection',
+          data: {
+            selectionType: 'singleCodeCursor',
+            selection: {
+              type: 'default',
+              range: [obj?.start || 0, obj.end || 0],
+            },
+          },
+        })
+        e.stopPropagation()
+      }}
+    >
+      {isCollapsed ? (
+        <button
+          className="m-0 p-0 border-0"
+          onClick={() => setIsCollapsed(false)}
+        >
+          {'>'}type: {obj.type}
+        </button>
+      ) : (
+        <span className="flex">
+          {/* <button className="m-0 p-0 border-0 mb-auto" onClick={() => setIsCollapsed(true)}>{'⬇️'}</button> */}
+          <ul className="inline-block">
+            {Object.entries(obj).map(([key, value]) => {
+              if (filterKeys.includes(key)) {
+                return null
+              } else if (Array.isArray(value)) {
+                return (
+                  <li key={key}>
+                    {`${key}: [`}
+                    <DisplayBody
+                      body={value}
+                      filterKeys={filterKeys}
+                      node={node}
+                    />
+                    {']'}
+                  </li>
+                )
+              } else if (
+                typeof value === 'object' &&
+                value !== null &&
+                value?.end
+              ) {
+                return (
+                  <li key={key}>
+                    {key}:
+                    <DisplayObj
+                      obj={value}
+                      filterKeys={filterKeys}
+                      node={node}
+                    />
+                  </li>
+                )
+              } else if (
+                typeof value === 'string' ||
+                typeof value === 'number'
+              ) {
+                return (
+                  <li key={key}>
+                    {key}: {value}
+                  </li>
+                )
+              }
+            })}
+          </ul>
+        </span>
+      )}
+    </pre>
+  )
+}

src/components/AvailableVarsHelpers.tsx

@@ -1,7 +1,5 @@
 import { useEffect, useState, useRef } from 'react'
-import { parser_wasm } from '../lang/abstractSyntaxTree'
-import { BinaryPart, Value } from '../lang/abstractSyntaxTreeTypes'
-import { executor } from '../lang/executor'
+import { parse, BinaryPart, Value, executor } from '../lang/wasm'
 import {
   createIdentifier,
   createLiteral,
@@ -9,7 +7,9 @@ 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'
 
 export const AvailableVars = ({
   onVarClick,
@@ -92,14 +92,9 @@ export function useCalc({
   newVariableInsertIndex: number
   setNewVariableName: (a: string) => void
 } {
-  const { ast, programMemory, selectionRange, engineCommandManager } = useStore(
-    (s) => ({
-      ast: s.ast,
-      programMemory: s.programMemory,
-      selectionRange: s.selectionRanges.codeBasedSelections[0].range,
-      engineCommandManager: s.engineCommandManager,
-    })
-  )
+  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>
@@ -119,9 +114,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(() => {
@@ -134,21 +127,30 @@ 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,
+      programMemory,
+      selectionRange
+    )
     setAvailableVarInfo(varInfo)
-  }, [ast, programMemory, selectionRange])
+  }, [kclManager.ast, programMemory, selectionRange])
 
   useEffect(() => {
-    if (!engineCommandManager) return
     try {
       const code = `const __result__ = ${value}\nshow(__result__)`
-      const ast = parser_wasm(code)
-      const _programMem: any = { root: {} }
+      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) => {
+
+      executor(
+        ast,
+        _programMem,
+        engineCommandManager,
+        kclManager.defaultPlanes
+      ).then((programMemory) => {
         const resultDeclaration = ast.body.find(
           (a) =>
             a.type === 'VariableDeclaration' &&

src/components/CodeMenu.tsx

@@ -1,16 +1,17 @@
 import { Menu } from '@headlessui/react'
 import { PropsWithChildren } from 'react'
-import { faEllipsis } from '@fortawesome/free-solid-svg-icons'
+import {
+  faArrowUpRightFromSquare,
+  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()
 
@@ -19,7 +20,8 @@ export const CodeMenu = ({ children }: PropsWithChildren) => {
       <div
         className="relative"
         onClick={(e) => {
-          if (e.eventPhase === 3) {
+          const target = e.target as HTMLElement
+          if (e.eventPhase === 3 && target.closest('a') === null) {
             e.stopPropagation()
             e.preventDefault()
           }
@@ -36,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>
@@ -52,6 +57,24 @@ export const CodeMenu = ({ children }: PropsWithChildren) => {
               </button>
             </Menu.Item>
           )}
+          <Menu.Item>
+            <a
+              className={styles.button}
+              href="https://github.com/KittyCAD/modeling-app/blob/main/docs/kcl/std.md"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span>Read the KCL docs</span>
+              <small>
+                On GitHub
+                <FontAwesomeIcon
+                  icon={faArrowUpRightFromSquare}
+                  className="ml-1 align-text-top"
+                  width={12}
+                />
+              </small>
+            </a>
+          </Menu.Item>
         </Menu.Items>
       </div>
     </Menu>

src/components/CommandBar.tsx

@@ -62,7 +62,7 @@ export const CommandBarProvider = ({
 
 const CommandBar = () => {
   const { commands, commandBarOpen, setCommandBarOpen } = useCommandsContext()
-  useHotkeys('meta+k', () => {
+  useHotkeys(['meta+k', 'meta+/'], () => {
     if (commands.length === 0) return
     setCommandBarOpen(!commandBarOpen)
   })
@@ -221,10 +221,10 @@ const CommandBar = () => {
           <Combobox
             value={selectedCommand}
             onChange={handleCommandSelection}
-            className="rounded relative mx-auto p-2 bg-chalkboard-10 dark:bg-chalkboard-100 border dark:border-chalkboard-70 max-w-xl w-full shadow-lg"
+            className="relative w-full max-w-xl p-2 mx-auto border rounded shadow-lg bg-chalkboard-10 dark:bg-chalkboard-100 dark:border-chalkboard-70"
             as="div"
           >
-            <div className="flex gap-2 items-center">
+            <div className="flex items-center gap-2">
               <ActionIcon icon={faSearch} size="xl" className="rounded-sm" />
               <div>
                 {inSubCommand && (
@@ -235,7 +235,7 @@ const CommandBar = () => {
                 )}
                 <Combobox.Input
                   onChange={(event) => setQuery(event.target.value)}
-                  className="bg-transparent focus:outline-none w-full"
+                  className="w-full bg-transparent focus:outline-none"
                   onKeyDown={(event) => {
                     if (event.metaKey && event.key === 'k')
                       setCommandBarOpen(false)
@@ -264,12 +264,12 @@ const CommandBar = () => {
                 />
               </div>
             </div>
-            <Combobox.Options static className="max-h-96 overflow-y-auto">
+            <Combobox.Options static className="overflow-y-auto max-h-96">
               {filteredCommands?.map((commandResult) => (
                 <Combobox.Option
                   key={commandResult.item.name}
                   value={commandResult}
-                  className="my-2 first:mt-4 last:mb-4 ui-active:bg-liquid-10 dark:ui-active:bg-liquid-90 py-1 px-2"
+                  className="px-2 py-1 my-2 first:mt-4 last:mb-4 ui-active:bg-liquid-10 dark:ui-active:bg-liquid-90"
                 >
                   <p>{commandResult.item.name}</p>
                   {(commandResult.item as SubCommand).description && (

src/components/CustomIcon.tsx

@@ -0,0 +1,210 @@
+export type CustomIconName =
+  | 'createFile'
+  | 'createFolder'
+  | 'equal'
+  | 'exit'
+  | 'extrude'
+  | 'file'
+  | 'horizontal'
+  | 'line'
+  | 'move'
+  | 'parallel'
+  | 'sketch'
+  | 'vertical'
+
+export const CustomIcon = ({
+  name,
+  ...props
+}: {
+  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
+          {...props}
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5 8.78V7H14.52V8.78H5ZM5 13.02V11.24H14.52V13.02H5Z"
+            fill="currentColor"
+          />
+        </svg>
+      )
+    case 'exit':
+      return (
+        <svg
+          {...props}
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M17 10L3 10M3 10L6.5 6.5M3 10L6.5 13.5"
+            stroke="currentColor"
+          />
+        </svg>
+      )
+
+    case 'extrude':
+      return (
+        <svg
+          {...props}
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10 3L10.3536 3.35355L12.3536 5.35355L11.6465 6.06066L10.5 4.91421V11.5854C11.0826 11.7913 11.5 12.3469 11.5 13C11.5 13.8284 10.8284 14.5 10 14.5C9.17157 14.5 8.5 13.8284 8.5 13C8.5 12.3469 8.91741 11.7913 9.5 11.5854V4.91421L8.35356 6.06066L7.64645 5.35355L9.64645 3.35355L10 3ZM1.95887 12.3282L8 8.63644V9.80838L2.91773 12.9142L10 17.2423L17.0823 12.9142L12 9.80838V8.63644L18.0411 12.3282L19 12.9142L19 14.9683H18V13.5253L10.5 18.1087V19.9683H9.5V18.1087L2 13.5253V14.9683H1L1 12.9142L1.95887 12.3282Z"
+            fill="currentColor"
+          />
+        </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
+          {...props}
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M4 9.5H16V11.5H4V9.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      )
+    case 'line':
+      return (
+        <svg
+          {...props}
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M15.5 6C16.3284 6 17 5.32843 17 4.5C17 3.67157 16.3284 3 15.5 3C14.6716 3 14 3.67157 14 4.5C14 4.73107 14.0522 4.94993 14.1456 5.14543L5.14543 14.1456C4.94993 14.0522 4.73107 14 4.5 14C3.67157 14 3 14.6716 3 15.5C3 16.3284 3.67157 17 4.5 17C5.32843 17 6 16.3284 6 15.5C6 15.2679 5.94729 15.0482 5.8532 14.852L14.852 5.8532C15.0482 5.94729 15.2679 6 15.5 6Z"
+            fill="currentColor"
+          />
+        </svg>
+      )
+    case 'move':
+      return (
+        <svg
+          {...props}
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10 2.29289L10.3536 2.64645L12.3536 4.64645L11.6465 5.35355L10.5 4.20711V8V9.50001H12L15.7929 9.50001L14.6465 8.35356L15.3536 7.64645L17.3536 9.64645L17.7071 10L17.3536 10.3536L15.3536 12.3536L14.6465 11.6465L15.7929 10.5H12H10.5V12V15.7929L11.6465 14.6464L12.3536 15.3536L10.3536 17.3536L10 17.7071L9.64645 17.3536L7.64645 15.3536L8.35356 14.6464L9.50001 15.7929V12V10.5H8.00001H4.20712L5.35357 11.6465L4.64646 12.3536L2.64646 10.3536L2.29291 10L2.64646 9.64645L4.64646 7.64645L5.35357 8.35356L4.20712 9.50001H8.00001H9.50001V8V4.20711L8.35356 5.35355L7.64645 4.64645L9.64645 2.64645L10 2.29289Z"
+            fill="currentColor"
+          />
+        </svg>
+      )
+    case 'parallel':
+      return (
+        <svg
+          {...props}
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8 16V4H6V16H8ZM14 16V4H12V16H14Z"
+            fill="currentColor"
+          />
+        </svg>
+      )
+    case 'sketch':
+      return (
+        <svg
+          {...props}
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M14.8037 13.4035L15.5509 14.1635L16.3682 16.8386L13.5521 16.1346L12.8186 15.3885L14.8037 13.4035ZM14.1025 12.6903L12.1175 14.6754L3.48609 5.89624C2.94588 5.34678 2.94963 4.46456 3.49448 3.91971C4.04591 3.36828 4.94112 3.37208 5.48786 3.92817L14.1025 12.6903ZM6.20094 3.22709L16.4357 13.6371L17.5003 17.1216L17.8412 18.2376L16.7091 17.9546L13.0364 17.0364L2.77301 6.59732C1.84793 5.6564 1.85434 4.14564 2.78737 3.2126C3.73167 2.2683 5.26468 2.27481 6.20094 3.22709Z"
+            fill="currentColor"
+          />
+        </svg>
+      )
+    case 'vertical':
+      return (
+        <svg
+          {...props}
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11 4V16H9V4H11Z"
+            fill="currentColor"
+          />
+        </svg>
+      )
+  }
+}

src/components/DebugPanel.tsx

@@ -1,11 +1,12 @@
 import { CollapsiblePanel, CollapsiblePanelProps } from './CollapsiblePanel'
-import { useStore } from '../useStore'
 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'],
@@ -13,9 +14,6 @@ type SketchModeCmd = Extract<
 >
 
 export const DebugPanel = ({ className, ...props }: CollapsiblePanelProps) => {
-  const { engineCommandManager } = useStore((s) => ({
-    engineCommandManager: s.engineCommandManager,
-  }))
   const [sketchModeCmd, setSketchModeCmd] = useState<SketchModeCmd>({
     type: 'default_camera_enable_sketch_mode',
     origin: { x: 0, y: 0, z: 0 },
@@ -29,7 +27,11 @@ export const DebugPanel = ({ className, ...props }: CollapsiblePanelProps) => {
   return (
     <CollapsiblePanel
       {...props}
-      className={'!absolute !h-auto bottom-5 right-5 ' + className}
+      className={
+        '!absolute overflow-hidden !h-auto bottom-5 right-5 ' + className
+      }
+      // header height, top-5, and bottom-5
+      style={{ maxHeight: 'calc(100% - 3rem - 1.25rem - 1.25rem)' }}
     >
       <section className="p-4 flex flex-col gap-4">
         <Xyz
@@ -65,19 +67,18 @@ export const DebugPanel = ({ className, ...props }: CollapsiblePanelProps) => {
             className="w-16"
             type="checkbox"
             checked={sketchModeCmd.ortho}
-            onChange={(a) => {
-              console.log(a, (a as any).checked)
+            onChange={(a) =>
               setSketchModeCmd({
                 ...sketchModeCmd,
                 ortho: a.target.checked,
               })
-            }}
+            }
           />
         </div>
         <ActionButton
           Element="button"
           onClick={() => {
-            engineCommandManager?.sendSceneCommand({
+            engineCommandManager.sendSceneCommand({
               type: 'modeling_cmd_req',
               cmd: sketchModeCmd,
               cmd_id: uuidv4(),
@@ -94,6 +95,9 @@ export const DebugPanel = ({ className, ...props }: CollapsiblePanelProps) => {
         >
           Send sketch mode command
         </ActionButton>
+        <div style={{ height: '400px' }} className="overflow-y-auto">
+          <AstExplorer />
+        </div>
       </section>
     </CollapsiblePanel>
   )

src/components/DownloadAppBanner.tsx

@@ -40,12 +40,12 @@ const DownloadAppBanner = () => {
           </code>
           , and isn't backed up anywhere! Visit{' '}
           <a
-            href="https://github.com/KittyCAD/modeling-app/releases"
+            href="https://kittycad.io/modeling-app/download"
             rel="noopener noreferrer"
             target="_blank"
             className="text-warn-80 dark:text-warn-80 dark:hover:text-warn-70 underline"
           >
-            our GitHub repository
+            our website
           </a>{' '}
           to download the app for the best experience.
         </p>

src/components/ErrorPage.tsx

@@ -1,8 +1,60 @@
+import { isTauri } from 'lib/isTauri'
+import { useRouteError, isRouteErrorResponse } from 'react-router-dom'
+import { ActionButton } from './ActionButton'
+import {
+  faBug,
+  faHome,
+  faRefresh,
+  faTrash,
+} from '@fortawesome/free-solid-svg-icons'
+
 export const ErrorPage = () => {
+  let error = useRouteError()
+
+  console.error('error', error)
+
   return (
     <div className="flex flex-col items-center justify-center h-screen">
-      <h1 className="text-4xl font-bold">404</h1>
-      <p className="text-2xl font-bold">Page not found</p>
+      <section className="max-w-full xl:max-w-4xl mx-auto">
+        <h1 className="text-4xl mb-8 font-bold">
+          An unexpected error occurred
+        </h1>
+        {isRouteErrorResponse(error) && (
+          <p className="mb-8">
+            {error.status}: {error.data}
+          </p>
+        )}
+        <div className="flex justify-between gap-2 mt-6">
+          {isTauri() && (
+            <ActionButton Element="link" to={'/'} icon={{ icon: faHome }}>
+              Go Home
+            </ActionButton>
+          )}
+          <ActionButton
+            Element="button"
+            icon={{ icon: faRefresh }}
+            onClick={() => window.location.reload()}
+          >
+            Reload
+          </ActionButton>
+          <ActionButton
+            Element="button"
+            icon={{ icon: faTrash }}
+            onClick={() => {
+              window.localStorage.clear()
+            }}
+          >
+            Clear storage
+          </ActionButton>
+          <ActionButton
+            Element="externalLink"
+            icon={{ icon: faBug }}
+            to="https://github.com/KittyCAD/modeling-app/issues/new"
+          >
+            Report Bug
+          </ActionButton>
+        </div>
+      </section>
     </div>
   )
 }

src/components/ExportButton.tsx

@@ -1,31 +1,40 @@
 import { v4 as uuidv4 } from 'uuid'
-import { useStore } from '../useStore'
 import { faFileExport, faXmark } from '@fortawesome/free-solid-svg-icons'
 import { ActionButton } from './ActionButton'
 import Modal from 'react-modal'
 import React from 'react'
 import { useFormik } from 'formik'
 import { Models } from '@kittycad/lib'
+import { engineCommandManager } from '../lang/std/engineConnection'
+import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
 
 type OutputFormat = Models['OutputFormat_type']
+type OutputTypeKey = OutputFormat['type']
+type ExtractStorageTypes<T> = T extends { storage: infer U } ? U : never
+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
   }
 }
 
 export const ExportButton = ({ children, className }: ExportButtonProps) => {
-  const { engineCommandManager } = useStore((s) => ({
-    engineCommandManager: s.engineCommandManager,
-  }))
-
   const [modalIsOpen, setIsOpen] = React.useState(false)
+  const {
+    settings: {
+      state: {
+        context: { baseUnit },
+      },
+    },
+  } = useGlobalStateContext()
 
   const defaultType = 'gltf'
-  const [type, setType] = React.useState(defaultType)
+  const [type, setType] = React.useState<OutputTypeKey>(defaultType)
+  const defaultStorage = 'embedded'
+  const [storage, setStorage] = React.useState<StorageUnion>(defaultStorage)
 
   function openModal() {
     setIsOpen(true)
@@ -38,7 +47,7 @@ export const ExportButton = ({ children, className }: ExportButtonProps) => {
   // Default to gltf and embedded.
   const initialValues: OutputFormat = {
     type: defaultType,
-    storage: 'embedded',
+    storage: defaultStorage,
     presentation: 'pretty',
   }
   const formik = useFormik({
@@ -66,7 +75,18 @@ export const ExportButton = ({ children, className }: ExportButtonProps) => {
           },
         }
       }
-      engineCommandManager?.sendSceneCommand({
+      if (values.type === 'obj' || values.type === 'stl') {
+        values.units = baseUnit
+      }
+      if (
+        values.type === 'ply' ||
+        values.type === 'stl' ||
+        values.type === 'gltf'
+      ) {
+        // Set the storage type.
+        values.storage = storage
+      }
+      engineCommandManager.sendSceneCommand({
         type: 'modeling_cmd_req',
         cmd: {
           type: 'export',
@@ -75,6 +95,7 @@ export const ExportButton = ({ children, className }: ExportButtonProps) => {
           // in the scene to export. In that case, you'd pass the IDs thru here.
           entity_ids: [],
           format: values,
+          source_unit: baseUnit,
         },
         cmd_id: uuidv4(),
       })
@@ -88,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'}
@@ -109,7 +134,17 @@ export const ExportButton = ({ children, className }: ExportButtonProps) => {
                 id="type"
                 name="type"
                 onChange={(e) => {
-                  setType(e.target.value)
+                  setType(e.target.value as OutputTypeKey)
+                  if (e.target.value === 'gltf') {
+                    // Set default to embedded.
+                    setStorage('embedded')
+                  } else if (e.target.value === 'ply') {
+                    // Set default to ascii.
+                    setStorage('ascii')
+                  } else if (e.target.value === 'stl') {
+                    // Set default to ascii.
+                    setStorage('ascii')
+                  }
                   formik.handleChange(e)
                 }}
                 className="bg-chalkboard-20 dark:bg-chalkboard-90 w-full"
@@ -127,10 +162,10 @@ export const ExportButton = ({ children, className }: ExportButtonProps) => {
                 <select
                   id="storage"
                   name="storage"
-                  onChange={formik.handleChange}
-                  value={
-                    'storage' in formik.values ? formik.values.storage : ''
-                  }
+                  onChange={(e) => {
+                    setStorage(e.target.value as StorageUnion)
+                    formik.handleChange(e)
+                  }}
                   className="bg-chalkboard-20 dark:bg-chalkboard-90 w-full"
                 >
                   {type === 'gltf' && (

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,400 @@
+import { IndexLoaderData, paths } from 'Router'
+import { ActionButton } from './ActionButton'
+import Tooltip from './Tooltip'
+import { FileEntry } from '@tauri-apps/api/fs'
+import { Dispatch, useEffect, 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 { kclManager } from 'lang/KclSinglton'
+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
+    kclManager.setCode('')
+    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,6 +24,7 @@ import {
   StateFrom,
 } from 'xstate'
 import { useCommandsContext } from 'hooks/useCommandsContext'
+import { isTauri } from 'lib/isTauri'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
@@ -108,6 +109,7 @@ export const GlobalStateProvider = ({
     actions: {
       goToSignInPage: () => {
         navigate(paths.SIGN_IN)
+
         logout()
       },
       goToIndexPage: () => {
@@ -149,10 +151,12 @@ export const GlobalStateProvider = ({
 export default GlobalStateProvider
 
 export function logout() {
-  const url = withBaseUrl('/logout')
   localStorage.removeItem(TOKEN_PERSIST_KEY)
-  return fetch(url, {
+  return (
+    !isTauri() &&
+    fetch(withBaseUrl('/logout'), {
       method: 'POST',
       credentials: 'include',
     })
+  )
 }

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

@@ -1,7 +1,6 @@
 import { processMemory } from './MemoryPanel'
-import { parser_wasm } from '../lang/abstractSyntaxTree'
 import { enginelessExecutor } from '../lib/testHelpers'
-import { initPromise } from '../lang/rust'
+import { initPromise, parse } from '../lang/wasm'
 
 beforeAll(() => initPromise)
 
@@ -10,25 +9,28 @@ describe('processMemory', () => {
     // Enable rotations #152
     const code = `
   const myVar = 5
-  const myFn = (a) => {
+  fn myFn = (a) => {
     return a - 2
   }
   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], %)
     // |> rx(90, %)
   show(theExtrude, theSketch)`
-    const ast = parser_wasm(code)
+    const ast = parse(code)
     const programMemory = await enginelessExecutor(ast, {
       root: {},
+      return: null,
     })
     const output = processMemory(programMemory)
     expect(output.myVar).toEqual(5)

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 } from '../lang/executor'
+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]
@@ -24,7 +22,11 @@ export const MemoryPanel = ({
     <CollapsiblePanel {...props}>
       <div className="h-full relative">
         <div className="absolute inset-0 flex flex-col items-start">
-          <div className=" h-full console-tile w-full">
+          <div
+            className="overflow-y-auto h-full console-tile w-full"
+            style={{ marginBottom: 36 }}
+          >
+            {/* 36px is the height of PanelHeader */}
             <ReactJson
               src={ProcessedMemory}
               collapsed={1}
@@ -46,11 +48,15 @@ export const MemoryPanel = ({
 
 export const processMemory = (programMemory: ProgramMemory) => {
   const processedMemory: any = {}
-  Object.keys(programMemory.root).forEach((key) => {
+  Object.keys(programMemory?.root || {}).forEach((key) => {
     const val = programMemory.root[key]
     if (typeof val.value !== 'function') {
-      if (val.type === 'sketchGroup' || val.type === 'extrudeGroup') {
-        processedMemory[key] = val.value.map(({ __geoMeta, ...rest }) => {
+      if (val.type === 'SketchGroup') {
+        processedMemory[key] = val.value.map(({ __geoMeta, ...rest }: Path) => {
+          return rest
+        })
+      } else if (val.type === 'ExtrudeGroup') {
+        processedMemory[key] = val.value.map(({ ...rest }: ExtrudeSurface) => {
           return rest
         })
       } else {

src/components/ModelingMachineProvider.tsx

@@ -0,0 +1,459 @@
+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,
+  VariableDeclarator,
+  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: 'extend_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/NetworkHealthIndicator.test.tsx

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

src/components/NetworkHealthIndicator.tsx

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

src/components/OpenFileButton.tsx

@@ -1,42 +0,0 @@
-import { invoke } from '@tauri-apps/api/tauri'
-import { open } from '@tauri-apps/api/dialog'
-import { useStore } from '../useStore'
-
-export const OpenFileButton = () => {
-  const { setCode } = useStore((s) => ({
-    setCode: s.setCode,
-  }))
-  const handleClick = async () => {
-    const selected = await open({
-      multiple: false,
-      directory: false,
-      filters: [
-        {
-          name: 'CAD',
-          extensions: ['toml'],
-        },
-      ],
-    })
-    if (Array.isArray(selected)) {
-      // User selected multiple files
-      // We should not get here, since multiple is false.
-    } else if (selected === null) {
-      // User cancelled the selection
-      // Do nothing.
-    } else {
-      // User selected a single file
-      // We want to invoke our command to read the file.
-      const json: string = await invoke('read_toml', { path: selected })
-      const packageDetails = JSON.parse(json).package
-      if (packageDetails.main) {
-        const absPath = [
-          ...selected.split('/').slice(0, -1),
-          packageDetails.main,
-        ].join('/')
-        const file: string = await invoke('read_txt_file', { path: absPath })
-        setCode(file)
-      }
-    }
-  }
-  return <button onClick={() => handleClick()}>Open File</button>
-}

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

@@ -2,6 +2,8 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { BrowserRouter } from 'react-router-dom'
 import ProjectSidebarMenu from './ProjectSidebarMenu'
 import { ProjectWithEntryPointMetadata } from '../Router'
+import { GlobalStateProvider } from './GlobalStateProvider'
+import CommandBarProvider from './CommandBar'
 
 const now = new Date()
 const projectWellFormed = {
@@ -13,7 +15,7 @@ const projectWellFormed = {
       path: '/some/path/Simple Box/main.kcl',
     },
   ],
-  entrypoint_metadata: {
+  entrypointMetadata: {
     accessedAt: now,
     blksize: 32,
     blocks: 32,
@@ -38,7 +40,11 @@ describe('ProjectSidebarMenu tests', () => {
   test('Renders the project name', () => {
     render(
       <BrowserRouter>
+        <CommandBarProvider>
+          <GlobalStateProvider>
             <ProjectSidebarMenu project={projectWellFormed} />
+          </GlobalStateProvider>
+        </CommandBarProvider>
       </BrowserRouter>
     )
 
@@ -55,7 +61,11 @@ describe('ProjectSidebarMenu tests', () => {
   test('Renders app name if given no project', () => {
     render(
       <BrowserRouter>
+        <CommandBarProvider>
+          <GlobalStateProvider>
             <ProjectSidebarMenu />
+          </GlobalStateProvider>
+        </CommandBarProvider>
       </BrowserRouter>
     )
 
@@ -69,7 +79,14 @@ describe('ProjectSidebarMenu tests', () => {
   test('Renders as a link if set to do so', () => {
     render(
       <BrowserRouter>
-        <ProjectSidebarMenu project={projectWellFormed} renderAsLink={true} />
+        <CommandBarProvider>
+          <GlobalStateProvider>
+            <ProjectSidebarMenu
+              project={projectWellFormed}
+              renderAsLink={true}
+            />
+          </GlobalStateProvider>
+        </CommandBarProvider>
       </BrowserRouter>
     )
 

src/components/ProjectSidebarMenu.tsx

@@ -1,32 +1,36 @@
 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
-      to={'../'}
-      className="flex items-center gap-4 my-2"
+      to={paths.HOME}
+      className="h-9 max-h-min min-w-max border-0 p-0.5 pr-2 flex items-center gap-4 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-energy-50"
       data-testid="project-sidebar-link"
     >
       <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 min-w-max"
+        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'}
@@ -35,17 +39,26 @@ const ProjectSidebarMenu = ({
   ) : (
     <Popover className="relative">
       <Popover.Button
-        className="border-0 p-0.5 pr-2 flex items-center gap-4 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-energy-50"
+        className="h-9 max-h-min min-w-max border-0 p-0.5 pr-2 flex items-center gap-4 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-energy-50"
         data-testid="project-sidebar-toggle"
       >
         <img
           src="/kitt-8bit-winking.svg"
           alt="KittyCAD App"
-          className="h-9 w-auto"
+          className="w-auto h-full"
         />
-        <span className="text-sm text-chalkboard-110 dark:text-chalkboard-20 min-w-max">
-          {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,6 +1,7 @@
 import { Dialog, Transition } from '@headlessui/react'
 import { Fragment, useState } from 'react'
-import { Value } from '../lang/abstractSyntaxTreeTypes'
+import { type InstanceProps, create } from 'react-modal-promise'
+import { Value } from '../lang/wasm'
 import {
   AvailableVars,
   addToInputHelper,
@@ -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(

src/components/SetHorVertDistanceModal.tsx

@@ -1,6 +1,7 @@
 import { Dialog, Transition } from '@headlessui/react'
 import { Fragment, useState } from 'react'
-import { Value } from '../lang/abstractSyntaxTreeTypes'
+import { type InstanceProps, create } from 'react-modal-promise'
+import { Value } from '../lang/wasm'
 import {
   AvailableVars,
   addToInputHelper,
@@ -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 {

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

@@ -12,6 +12,13 @@ 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 { getNodeFromPath } from 'lang/queryAst'
+import { VariableDeclarator, recast, parse, 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)
@@ -19,27 +26,21 @@ export const Stream = ({ className = '' }) => {
   const videoRef = useRef<HTMLVideoElement>(null)
   const {
     mediaStream,
-    engineCommandManager,
     setButtonDownInStream,
     didDragInStream,
     setDidDragInStream,
     streamDimensions,
-    isExecuting,
   } = useStore((s) => ({
     mediaStream: s.mediaStream,
-    engineCommandManager: s.engineCommandManager,
     setButtonDownInStream: s.setButtonDownInStream,
-    fileId: s.fileId,
     didDragInStream: s.didDragInStream,
     setDidDragInStream: s.setDidDragInStream,
     streamDimensions: s.streamDimensions,
-    isExecuting: s.isExecuting,
   }))
-  const {
-    settings: {
-      context: { cameraControls },
-    },
-  } = useGlobalStateContext()
+  const { settings } = useGlobalStateContext()
+  const cameraControls = settings?.context?.cameraControls
+  const { send, state, context } = useModelingContext()
+  const { isExecuting } = useKclContext()
 
   useEffect(() => {
     if (
@@ -50,7 +51,7 @@ export const Stream = ({ className = '' }) => {
     if (!videoRef.current) return
     if (!mediaStream) return
     videoRef.current.srcObject = mediaStream
-  }, [mediaStream, engineCommandManager])
+  }, [mediaStream])
 
   const handleMouseDown: MouseEventHandler<HTMLVideoElement> = (e) => {
     if (!videoRef.current) return
@@ -64,19 +65,42 @@ export const Stream = ({ className = '' }) => {
     const newId = uuidv4()
 
     const interactionGuards = cameraMouseDragGuards[cameraControls]
-    let interaction: CameraDragInteractionType_type
+    let interaction: CameraDragInteractionType_type = 'rotate'
 
-    if (interactionGuards.pan.callback(e)) {
+    if (
+      interactionGuards.pan.callback(e) ||
+      interactionGuards.pan.lenientDragStartButton === e.button
+    ) {
       interaction = 'pan'
-    } else if (interactionGuards.rotate.callback(e)) {
+    } else if (
+      interactionGuards.rotate.callback(e) ||
+      interactionGuards.rotate.lenientDragStartButton === e.button
+    ) {
       interaction = 'rotate'
-    } else if (interactionGuards.zoom.dragCallback(e)) {
+    } else if (
+      interactionGuards.zoom.dragCallback(e) ||
+      interactionGuards.zoom.lenientDragStartButton === e.button
+    ) {
       interaction = 'zoom'
-    } else {
-      return
     }
 
-    engineCommandManager?.sendSceneCommand({
+    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: {
+          type: 'handle_mouse_drag_start',
+          window: { x, y },
+        },
+        cmd_id: newId,
+      })
+    } else if (!state.matches('Sketch.Line Tool')) {
+      engineCommandManager.sendSceneCommand({
         type: 'modeling_cmd_req',
         cmd: {
           type: 'camera_drag_start',
@@ -85,6 +109,7 @@ export const Stream = ({ className = '' }) => {
         },
         cmd_id: newId,
       })
+    }
 
     setButtonDownInStream(e.button)
     setClickCoords({ x, y })
@@ -93,8 +118,7 @@ export const Stream = ({ className = '' }) => {
   const handleScroll: WheelEventHandler<HTMLVideoElement> = (e) => {
     if (!cameraMouseDragGuards[cameraControls].zoom.scrollCallback(e)) return
 
-    e.preventDefault()
-    engineCommandManager?.sendSceneCommand({
+    engineCommandManager.sendSceneCommand({
       type: 'modeling_cmd_req',
       cmd: {
         type: 'default_camera_zoom',
@@ -110,6 +134,7 @@ export const Stream = ({ className = '' }) => {
     ctrlKey,
   }) => {
     if (!videoRef.current) return
+    setButtonDownInStream(undefined)
     const { x, y } = getNormalisedCoordinates({
       clientX,
       clientY,
@@ -120,7 +145,7 @@ export const Stream = ({ className = '' }) => {
     const newCmdId = uuidv4()
     const interaction = ctrlKey ? 'pan' : 'rotate'
 
-    engineCommandManager?.sendSceneCommand({
+    const command: Models['WebSocketRequest_type'] = {
       type: 'modeling_cmd_req',
       cmd: {
         type: 'camera_drag_end',
@@ -128,20 +153,210 @@ export const Stream = ({ className = '' }) => {
         window: { x, y },
       },
       cmd_id: newCmdId,
-    })
+    }
 
-    setButtonDownInStream(0)
-    if (!didDragInStream) {
-      engineCommandManager?.sendSceneCommand({
-        type: 'modeling_cmd_req',
-        cmd: {
+    if (!didDragInStream && state.matches('Sketch no face')) {
+      command.cmd = {
         type: 'select_with_point',
         selection_type: 'add',
         selected_at_window: { x, y },
-        },
+      }
+      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 (
+      !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 () => {
+        if (!context.sketchPathToNode) return
+        const varDec = getNodeFromPath<VariableDeclarator>(
+          kclManager.ast,
+          context.sketchPathToNode,
+          'VariableDeclarator'
+        ).node
+        // 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 = parse(code)
+          const updateNode = getNodeFromPath<CallExpression>(
+            astWithCurrentRanges,
+            modded.pathToNode
+          ).node
+          engineCommandManager.artifactMap[controlPoint.segmentId].range = [
+            updateNode.start,
+            updateNode.end,
+          ]
+        }
+
+        kclManager.executeAstMock(modifiedAst, true)
+      })
+    }
+
     setDidDragInStream(false)
     setClickCoords(undefined)
   }
@@ -172,7 +387,8 @@ export const Stream = ({ className = '' }) => {
         onWheel={handleScroll}
         onPlay={() => setIsLoading(false)}
         onMouseMoveCapture={handleMouseMove}
-        className={`w-full h-full ${isExecuting && 'blur-md'}`}
+        className={`w-full cursor-pointer h-full ${isExecuting && 'blur-md'}`}
+        disablePictureInPicture
         style={{ transitionDuration: '200ms', transitionProperty: 'filter' }}
       />
       {isLoading && (

src/components/TextEditor.tsx

@@ -13,22 +13,26 @@ 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 } from 'lib/utils'
+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: {
@@ -47,41 +51,22 @@ export const TextEditor = ({
   theme: Themes.Light | Themes.Dark
 }) => {
   const pathParams = useParams()
-  const {
-    code,
-    defferedSetCode,
-    editorView,
-    engineCommandManager,
-    formatCode,
-    isLSPServerReady,
-    selectionRanges,
-    selectionRangeTypeMap,
-    setEditorView,
-    setIsLSPServerReady,
-    setSelectionRanges,
-    sourceRangeMap,
-  } = useStore((s) => ({
-    code: s.code,
-    defferedCode: s.defferedCode,
-    defferedSetCode: s.defferedSetCode,
+  const { editorView, isLSPServerReady, setEditorView, setIsLSPServerReady } =
+    useStore((s) => ({
       editorView: s.editorView,
-    engineCommandManager: s.engineCommandManager,
-    formatCode: s.formatCode,
       isLSPServerReady: s.isLSPServerReady,
-    selectionRanges: s.selectionRanges,
-    selectionRangeTypeMap: s.selectionRangeTypeMap,
-    setCode: s.setCode,
       setEditorView: s.setEditorView,
       setIsLSPServerReady: s.setIsLSPServerReady,
-    setSelectionRanges: s.setSelectionRanges,
-    sourceRangeMap: s.sourceRangeMap,
     }))
+  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()
@@ -126,18 +111,16 @@ export const TextEditor = ({
   }, [lspClient, isLSPServerReady])
 
   // const onChange = React.useCallback((value: string, viewUpdate: ViewUpdate) => {
-  const onChange = (value: string, viewUpdate: ViewUpdate) => {
-    defferedSetCode(value)
+  const onChange = (newCode: string) => {
+    kclManager.setCodeAndExecute(newCode)
     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) => {
+      writeTextFile(pathParams.id, newCode).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]) })
@@ -147,57 +130,17 @@ export const TextEditor = ({
     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(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(() => {
@@ -214,7 +157,7 @@ export const TextEditor = ({
         {
           key: editorShortcutMeta.formatCode.codeMirror,
           run: () => {
-            formatCode()
+            kclManager.format()
             return true
           },
         },
@@ -238,14 +181,46 @@ export const TextEditor = ({
       extensions.push(
         lintGutter(),
         linter((_view) => {
-          return kclErrToDiagnostic(useStore.getState().kclErrors)
+          return kclErrToDiagnostic(errors)
+        }),
+        interact({
+          rules: [
+            // a rule for a number dragger
+            {
+              // the regexp matching the value
+              regexp: /-?\b\d+\.?\d*\b/g,
+              // set cursor to "ew-resize" on hover
+              cursor: 'ew-resize',
+              // change number value based on mouse X movement on drag
+              onDrag: (text, setText, e) => {
+                const multiplier =
+                  e.shiftKey && e.metaKey
+                    ? 0.01
+                    : e.metaKey
+                    ? 0.1
+                    : e.shiftKey
+                    ? 10
+                    : 1
+
+                const delta = e.movementX * multiplier
+
+                const newVal = roundOff(
+                  Number(text) + delta,
+                  multiplier === 0.01 ? 2 : multiplier === 0.1 ? 1 : 0
+                )
+
+                if (isNaN(newVal)) return
+                setText(newVal.toString())
+              },
+            },
+          ],
         })
       )
       if (textWrapping === 'On') extensions.push(EditorView.lineWrapping)
     }
 
     return extensions
-  }, [kclLSP, textWrapping])
+  }, [kclLSP, textWrapping, convertCallback])
 
   return (
     <div

src/components/Toolbar/EqualAngle.tsx

@@ -1,42 +1,33 @@
-import { useState, useEffect } from 'react'
-import { toolTips, useStore } from '../../useStore'
-import { Value, VariableDeclarator } from '../../lang/abstractSyntaxTreeTypes'
+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 { 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
@@ -44,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) =>
@@ -52,44 +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, {
-          callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
-        })
-      }}
-      disabled={!enableEqual}
-      title="yo dawg"
-    >
-      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,42 +1,33 @@
-import { useState, useEffect } from 'react'
-import { toolTips, useStore } from '../../useStore'
-import { Value, VariableDeclarator } from '../../lang/abstractSyntaxTreeTypes'
+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 { 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
@@ -44,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) =>
@@ -52,44 +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, {
-          callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
-        })
-      }}
-      disabled={!enableEqual}
-      title="yo dawg"
-    >
-      EqualLength
-    </button>
-  )
+  return { enabled, transforms }
+}
+
+export function applyConstraintEqualLength({
+  selectionRanges,
+}: {
+  selectionRanges: Selections
+}): {
+  modifiedAst: Program
+  pathToNodeMap: PathToNodeMap
+} {
+  const { enabled, 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,40 +1,26 @@
-import { useState, useEffect } from 'react'
-import { toolTips, useStore } from '../../useStore'
-import { Value } from '../../lang/abstractSyntaxTreeTypes'
+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 { 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) =>
@@ -42,33 +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, {
-          callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
-        })
-      }}
-      disabled={!enableHorz}
-      title="yo dawg"
-    >
-      {horOrVert === 'horizontal' ? 'Horz' : 'Vert'}
-    </button>
-  )
 }

src/components/Toolbar/Intersect.tsx

@@ -1,11 +1,6 @@
-import { useState, useEffect } from 'react'
-import { create } from 'react-modal-promise'
-import { toolTips, useStore } from '../../useStore'
-import {
-  BinaryPart,
-  Value,
-  VariableDeclarator,
-} from '../../lang/abstractSyntaxTreeTypes'
+import { toolTips } from '../../useStore'
+import { Selections } from 'lib/selections'
+import { BinaryPart, Program, Value, VariableDeclarator } from '../../lang/wasm'
 import {
   getNodePathFromSourceRange,
   getNodeFromPath,
@@ -13,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]
     )
@@ -71,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
@@ -90,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) =>
@@ -104,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 &&
@@ -118,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,
@@ -140,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, {
-            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,
     })
@@ -182,14 +170,8 @@ export const Intersect = () => {
     )
     _modifiedAst.body = newBody
   }
-          updateAst(_modifiedAst, {
-            callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
-          })
+  return {
+    modifiedAst: _modifiedAst,
+    pathToNodeMap: _pathToNodeMap,
   }
-      }}
-      disabled={!enable}
-    >
-      perpendicularDistance
-    </button>
-  )
 }

src/components/Toolbar/RemoveConstrainingValues.tsx

@@ -1,36 +1,27 @@
-import { useState, useEffect } from 'react'
-import { toolTips, useStore } from '../../useStore'
-import { Value } from '../../lang/abstractSyntaxTreeTypes'
+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, {
-          callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
-        })
-      }}
-      disabled={!enableHorz}
-      title="yo dawg"
-    >
-      RemoveConstrainingValues
-    </button>
-  )
 }

src/components/Toolbar/SetAbsDistance.tsx

@@ -1,57 +1,49 @@
-import { useState, useEffect } from 'react'
-import { create } from 'react-modal-promise'
-import { toolTips, useStore } from '../../useStore'
-import { Value } from '../../lang/abstractSyntaxTreeTypes'
+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)
 
-export const SetAbsDistance = ({
-  buttonType,
+type Constraint = 'xAbs' | 'yAbs' | 'snapToYAxis' | 'snapToXAxis'
+
+export function absDistanceInfo({
+  selectionRanges,
+  constraint,
 }: {
-  buttonType: 'xAbs' | 'yAbs' | 'snapToYAxis' | 'snapToXAxis'
-}) => {
-  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'
+  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) =>
@@ -59,8 +51,7 @@ export const SetAbsDistance = ({
       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' &&
@@ -71,46 +62,53 @@ export const SetAbsDistance = ({
     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,
   })
@@ -123,17 +121,32 @@ export const SetAbsDistance = ({
     )
     _modifiedAst.body = newBody
   }
-
-          updateAst(_modifiedAst, {
-            callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
-          })
-        } catch (e) {
-          console.log('e', e)
-        }
-      }}
-      disabled={!enableAngLen}
-    >
-      {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,52 +1,39 @@
-import { useState, useEffect } from 'react'
-import { create } from 'react-modal-promise'
-import { toolTips, useStore } from '../../useStore'
-import {
-  BinaryPart,
-  Value,
-  VariableDeclarator,
-} from '../../lang/abstractSyntaxTreeTypes'
+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
@@ -54,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) =>
@@ -67,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,
@@ -99,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, {
-            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,
     })
@@ -141,14 +128,8 @@ export const SetAngleBetween = () => {
     )
     _modifiedAst.body = newBody
   }
-          updateAst(_modifiedAst, {
-            callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
-          })
+  return {
+    modifiedAst: _modifiedAst,
+    pathToNodeMap: _pathToNodeMap,
   }
-      }}
-      disabled={!enable}
-    >
-      angleBetween
-    </button>
-  )
 }

src/components/Toolbar/SetHorzVertDistance.tsx

@@ -1,67 +1,40 @@
-import { useState, useEffect } from 'react'
-import { create } from 'react-modal-promise'
-import { toolTips, useStore } from '../../useStore'
-import {
-  BinaryPart,
-  Value,
-  VariableDeclarator,
-} from '../../lang/abstractSyntaxTreeTypes'
+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)
 
-export const SetHorzVertDistance = ({
-  buttonType,
+export function horzVertDistanceInfo({
+  selectionRanges,
+  constraint,
 }: {
-  buttonType:
-    | 'setHorzDistance'
-    | 'setVertDistance'
-    | 'alignEndsHorizontally'
-    | 'alignEndsVertically'
-}) => {
-  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
@@ -69,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) =>
@@ -85,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,
@@ -121,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, {
-            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)
@@ -147,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,
       })
@@ -163,14 +134,37 @@ export const SetHorzVertDistance = ({
       )
       _modifiedAst.body = newBody
     }
-          updateAst(_modifiedAst, {
-            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}
-    >
-      {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/abstractSyntaxTreeTypes'
+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,34 +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)
 
-export const SetAngleLength = ({
-  angleOrLength,
+export function setAngleLengthInfo({
+  selectionRanges,
+  angleOrLength = 'setLength',
 }: {
-  angleOrLength: 'setAngle' | 'setLength'
-}) => {
-  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) =>
@@ -54,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 {
@@ -92,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,
       })
@@ -135,17 +132,12 @@ export const SetAngleLength = ({
       )
       _modifiedAst.body = newBody
     }
-
-          updateAst(_modifiedAst, {
-            callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
-          })
-        } catch (e) {
-          console.log('e', e)
+    return {
+      modifiedAst: _modifiedAst,
+      pathToNodeMap,
+    }
+  } catch (e) {
+    console.log('erorr', e)
+    throw e
   }
-      }}
-      disabled={!enableAngLen}
-    >
-      {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

@@ -1,23 +1,28 @@
 import { Popover, Transition } from '@headlessui/react'
 import { ActionButton } from './ActionButton'
-import { faBars, faGear, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
+import {
+  faBars,
+  faBug,
+  faGear,
+  faSignOutAlt,
+} from '@fortawesome/free-solid-svg-icons'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
-import { useNavigate } from 'react-router-dom'
+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
@@ -38,7 +43,7 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
     <Popover className="relative">
       {user?.image && !imageLoadFailed ? (
         <Popover.Button
-          className="border-0 rounded-full w-fit p-0 focus:outline-none group"
+          className="border-0 rounded-full w-fit min-w-max p-0 focus:outline-none group"
           data-testid="user-sidebar-toggle"
         >
           <div className="rounded-full border border-chalkboard-70/50 hover:border-liquid-50 group-focus:border-liquid-50 overflow-hidden">
@@ -126,19 +131,30 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
                     // since /settings is a nested route the sidebar doesn't close
                     // automatically when navigating to it
                     close()
-                    navigate(makeUrlPathRelative(paths.SETTINGS))
+                    const targetPath = location.pathname.includes(paths.FILE)
+                      ? filePath + paths.SETTINGS
+                      : paths.HOME + paths.SETTINGS
+                    navigate(targetPath)
                   }}
                 >
                   Settings
                 </ActionButton>
                 <ActionButton
-                  Element="link"
+                  Element="externalLink"
                   to="https://github.com/KittyCAD/modeling-app/discussions"
                   icon={{ icon: faGithub }}
                   className="border-transparent dark:border-transparent dark:hover:border-liquid-60"
                 >
                   Request a feature
                 </ActionButton>
+                <ActionButton
+                  Element="externalLink"
+                  to="https://github.com/KittyCAD/modeling-app/issues/new"
+                  icon={{ icon: faBug }}
+                  className="border-transparent dark:border-transparent dark:hover:border-liquid-60"
+                >
+                  Report a bug
+                </ActionButton>
                 <ActionButton
                   Element="button"
                   onClick={() => send('Log out')}

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

@@ -109,7 +109,6 @@ export default class Client extends jsrpc.JSONRPCServerAndClient {
         }
       }
       messageString += message
-      // console.log(messageString)
       return
     })
 

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/editor/lsp/plugin.ts

@@ -13,6 +13,7 @@ import {
   CompletionItemKind,
   CompletionTriggerKind,
 } from 'vscode-languageserver-protocol'
+import debounce from 'debounce-promise'
 
 import type {
   Completion,
@@ -53,14 +54,11 @@ export class LanguageServerPlugin implements PluginValue {
   private languageId: string
   private documentVersion: number
 
-  private changesTimeout: number
-
   constructor(private view: EditorView, private allowHTMLContent: boolean) {
     this.client = this.view.state.facet(client)
     this.documentUri = this.view.state.facet(documentUri)
     this.languageId = this.view.state.facet(languageId)
     this.documentVersion = 0
-    this.changesTimeout = 0
 
     this.client.attachPlugin(this)
 
@@ -71,12 +69,10 @@ export class LanguageServerPlugin implements PluginValue {
 
   update({ docChanged }: ViewUpdate) {
     if (!docChanged) return
-    if (this.changesTimeout) clearTimeout(this.changesTimeout)
-    this.changesTimeout = window.setTimeout(() => {
+
     this.sendChange({
       documentText: this.view.state.doc.toString(),
     })
-    }, changesDelay)
   }
 
   destroy() {
@@ -99,14 +95,32 @@ export class LanguageServerPlugin implements PluginValue {
 
   async sendChange({ documentText }: { documentText: string }) {
     if (!this.client.ready) return
+
+    if (documentText.length > 5000) {
+      // Clear out the text it thinks we have, large documents will throw a stack error.
+      // This is obviously not a good fix but it works for now til we figure
+      // out the stack limits in wasm and also rewrite the parser.
+      // Since this is only for hover and completions it will be fine,
+      // completions will still work for stdlib but hover will not.
+      // That seems like a fine trade-off for a working editor for the time
+      // being.
+      documentText = ''
+    }
+
     try {
-      await this.client.textDocumentDidChange({
+      debounce(
+        () => {
+          return this.client.textDocumentDidChange({
             textDocument: {
               uri: this.documentUri,
               version: this.documentVersion++,
             },
             contentChanges: [{ text: documentText }],
           })
+        },
+        changesDelay,
+        { leading: true }
+      )
     } catch (e) {
       console.error(e)
     }

src/editor/lsp/server.ts

@@ -5,8 +5,6 @@ import init, {
 } from '../../wasm-lib/pkg/wasm_lib'
 import { FromServer, IntoServer } from './codec'
 
-let server: null | Server
-
 export default class Server {
   readonly initOutput: InitOutput
   readonly #intoServer: IntoServer
@@ -26,12 +24,8 @@ export default class Server {
     intoServer: IntoServer,
     fromServer: FromServer
   ): Promise<Server> {
-    if (null == server) {
     const initOutput = await init()
-      server = new Server(initOutput, intoServer, fromServer)
-    } else {
-      console.warn('Server already initialized; ignoring')
-    }
+    const server = new Server(initOutput, intoServer, fromServer)
     return server
   }
 

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/useDotDotSlash.ts

@@ -0,0 +1,13 @@
+import { useLocation } from 'react-router-dom'
+
+export function useDotDotSlash(): (count?: number) => string {
+  const location = useLocation()
+  const dotDotSlash = (count = 1): string => {
+    // since we can't use relative paths (../) for windows
+    if (location.pathname === '/') return ''
+    const path = location.pathname.slice(0, location.pathname.lastIndexOf('/'))
+    if (count <= 1) return path
+    return dotDotSlash(count - 1)
+  }
+  return dotDotSlash
+}

src/hooks/useEngineConnectionSubscriptions.ts

@@ -0,0 +1,58 @@
+import { useEffect } from 'react'
+import { useStore } from 'useStore'
+import { engineCommandManager } from '../lang/std/engineConnection'
+import { useModelingContext } from './useModelingContext'
+import { v4 as uuidv4 } from 'uuid'
+import { SourceRange } from 'lang/wasm'
+import { getEventForSelectWithPoint } from 'lib/selections'
+
+export function useEngineConnectionSubscriptions() {
+  const { setHighlightRange, highlightRange } = useStore((s) => ({
+    setHighlightRange: s.setHighlightRange,
+    highlightRange: s.highlightRange,
+  }))
+  const { send, context } = useModelingContext()
+
+  interface RangeAndId {
+    id: string
+    range: SourceRange
+  }
+
+  useEffect(() => {
+    if (!engineCommandManager) return
+
+    const unSubHover = engineCommandManager.subscribeToUnreliable({
+      event: 'highlight_set_entity',
+      callback: ({ data }) => {
+        if (data?.entity_id) {
+          const sourceRange =
+            engineCommandManager.artifactMap?.[data.entity_id]?.range
+          setHighlightRange(sourceRange)
+        } else if (
+          !highlightRange ||
+          (highlightRange[0] !== 0 && highlightRange[1] !== 0)
+        ) {
+          setHighlightRange([0, 0])
+        }
+      },
+    })
+    const unSubClick = engineCommandManager.subscribeTo({
+      event: 'select_with_point',
+      callback: async (engineEvent) => {
+        const event = await getEventForSelectWithPoint(engineEvent, {
+          sketchEnginePathId: context.sketchEnginePathId,
+        })
+        send(event)
+      },
+    })
+    return () => {
+      unSubHover()
+      unSubClick()
+    }
+  }, [
+    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

@@ -0,0 +1,94 @@
+import { useLayoutEffect, useEffect, useRef } from 'react'
+import { _executor, parse } from '../lang/wasm'
+import { useStore } from '../useStore'
+import { engineCommandManager } from '../lang/std/engineConnection'
+import { deferExecution } from 'lib/utils'
+import { kclManager } from 'lang/KclSinglton'
+
+export function useSetupEngineManager(
+  streamRef: React.RefObject<HTMLDivElement>,
+  token?: string
+) {
+  const {
+    setMediaStream,
+    setIsStreamReady,
+    setStreamDimensions,
+    streamDimensions,
+  } = useStore((s) => ({
+    setMediaStream: s.setMediaStream,
+    setIsStreamReady: s.setIsStreamReady,
+    setStreamDimensions: s.setStreamDimensions,
+    streamDimensions: s.streamDimensions,
+  }))
+
+  const streamWidth = streamRef?.current?.offsetWidth
+  const streamHeight = streamRef?.current?.offsetHeight
+
+  const hasSetNonZeroDimensions = useRef<boolean>(false)
+
+  useEffect(() => {
+    kclManager.executeCode()
+  }, [])
+
+  useLayoutEffect(() => {
+    // Load the engine command manager once with the initial width and height,
+    // then we do not want to reload it.
+    const { width: quadWidth, height: quadHeight } = getDimensions(
+      streamWidth,
+      streamHeight
+    )
+    if (!hasSetNonZeroDimensions.current && quadHeight && quadWidth) {
+      engineCommandManager.start({
+        setMediaStream,
+        setIsStreamReady,
+        width: quadWidth,
+        height: quadHeight,
+        executeCode: (code?: string) => {
+          const _ast = parse(code || kclManager.code)
+          return kclManager.executeAst(_ast, true)
+        },
+        token,
+      })
+      setStreamDimensions({
+        streamWidth: quadWidth,
+        streamHeight: quadHeight,
+      })
+      hasSetNonZeroDimensions.current = true
+    }
+  }, [streamRef?.current?.offsetWidth, streamRef?.current?.offsetHeight])
+
+  useEffect(() => {
+    const handleResize = deferExecution(() => {
+      const { width, height } = getDimensions(
+        streamRef?.current?.offsetWidth,
+        streamRef?.current?.offsetHeight
+      )
+      if (
+        streamDimensions.streamWidth !== width ||
+        streamDimensions.streamHeight !== height
+      ) {
+        engineCommandManager.handleResize({
+          streamWidth: width,
+          streamHeight: height,
+        })
+        setStreamDimensions({
+          streamWidth: width,
+          streamHeight: height,
+        })
+      }
+    }, 500)
+
+    window.addEventListener('resize', handleResize)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+}
+
+function getDimensions(streamWidth?: number, streamHeight?: number) {
+  const width = streamWidth ? streamWidth : 0
+  const quadWidth = Math.round(width / 4) * 4
+  const height = streamHeight ? streamHeight : 0
+  const quadHeight = Math.round(height / 4) * 4
+  return { width: quadWidth, height: quadHeight }
+}

src/hooks/useToolbarGuards.ts

@@ -1,54 +1,47 @@
-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)
+      kclManager.updateAst(_modifiedAst, true)
     } catch (e) {
-      console.log('e', e)
+      console.log('error', e)
     }
   }
 

src/index.css

@@ -31,6 +31,14 @@ body.dark {
   @apply text-chalkboard-10;
 }
 
+select {
+  @apply bg-chalkboard-20;
+}
+
+.dark select {
+  @apply bg-chalkboard-90;
+}
+
 ::-webkit-scrollbar {
   @apply w-2 h-2 rounded-sm;
   @apply bg-chalkboard-20;

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,387 @@
+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 { useLoaderData } 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
+
+  engineCommandManager: EngineCommandManager
+  private _defferer = deferExecution((code: string) => {
+    const ast = parse(code)
+    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)
+  }
+
+  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)
+  }
+
+  constructor(engineCommandManager: EngineCommandManager) {
+    this.engineCommandManager = engineCommandManager
+    const storedCode = localStorage.getItem(PERSIST_CODE_TOKEN)
+    // TODO #819 remove zustand persistance 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) {
+      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
+  }
+
+  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._codeCallBack(this._code)
+    }
+    this._executeCallback()
+  }
+  async executeAstMock(ast: Program = this._ast, updateCode = false) {
+    await this.ensureWasmInit()
+    const newCode = recast(ast)
+    const newAst = parse(newCode)
+    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) {
+    this._code = code
+    this._codeCallBack(code)
+    localStorage.setItem(PERSIST_CODE_TOKEN, code)
+  }
+  setCodeAndExecute(code: string) {
+    this.setCode(code)
+    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() {
+    this.code = recast(parse(kclManager.code))
+  }
+  // There's overlapping resposibility 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
+      callBack?: (ast: Program) => void
+    }
+  ): Promise<Selections | null> {
+    const newCode = recast(ast)
+    const astWithUpdatedSource = parse(newCode)
+    optionalParams?.callBack?.(astWithUpdatedSource)
+    let returnVal: Selections | null = null
+
+    this.code = newCode
+    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)
+    } 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)
+    }
+    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,
+    })
+  }, [])
+  return (
+    <KclContext.Provider
+      value={{
+        code,
+        programMemory,
+        ast,
+        isExecuting,
+        errors,
+        logs,
+        wasmInitFailed,
+      }}
+    >
+      {children}
+    </KclContext.Provider>
+  )
+}

src/lang/abstractSyntaxTree.test.ts

@@ -1,12 +1,11 @@
-import { parser_wasm } from './abstractSyntaxTree'
-import { KCLUnexpectedError } from './errors'
-import { initPromise } from './rust'
+import { KCLError } from './errors'
+import { initPromise, parse } from './wasm'
 
 beforeAll(() => initPromise)
 
 describe('testing AST', () => {
   test('5 + 6', () => {
-    const result = parser_wasm('5 +6')
+    const result = parse('5 +6')
     delete (result as any).nonCodeMeta
     expect(result.body).toEqual([
       {
@@ -37,7 +36,7 @@ describe('testing AST', () => {
     ])
   })
   test('const myVar = 5', () => {
-    const { body } = parser_wasm('const myVar = 5')
+    const { body } = parse('const myVar = 5')
     expect(body).toEqual([
       {
         type: 'VariableDeclaration',
@@ -71,7 +70,7 @@ describe('testing AST', () => {
     const code = `const myVar = 5
 const newVar = myVar + 1
 `
-    const { body } = parser_wasm(code)
+    const { body } = parse(code)
     expect(body).toEqual([
       {
         type: 'VariableDeclaration',
@@ -139,95 +138,11 @@ const newVar = myVar + 1
       },
     ])
   })
-  test('using std function "log"', () => {
-    const code = `log(5, "hello", aIdentifier)`
-    const { body } = parser_wasm(code)
-    expect(body).toEqual([
-      {
-        type: 'ExpressionStatement',
-        start: 0,
-        end: 28,
-        expression: {
-          type: 'CallExpression',
-          start: 0,
-          end: 28,
-          callee: {
-            type: 'Identifier',
-            start: 0,
-            end: 3,
-            name: 'log',
-          },
-          arguments: [
-            {
-              type: 'Literal',
-              start: 4,
-              end: 5,
-              value: 5,
-              raw: '5',
-            },
-            {
-              type: 'Literal',
-              start: 7,
-              end: 14,
-              value: 'hello',
-              raw: '"hello"',
-            },
-            {
-              type: 'Identifier',
-              start: 16,
-              end: 27,
-              name: 'aIdentifier',
-            },
-          ],
-          function: {
-            type: 'InMemory',
-          },
-          optional: false,
-        },
-      },
-    ])
-  })
 })
 
 describe('testing function declaration', () => {
-  test('fn funcN = () => {}', () => {
-    const { body } = parser_wasm('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 } = parser_wasm(
+    const { body } = parse(
       ['fn funcN = (a, b) => {', '  return a + b', '}'].join('\n')
     )
     delete (body[0] as any).declarations[0].init.body.nonCodeMeta
@@ -304,7 +219,7 @@ describe('testing function declaration', () => {
   test('call expression assignment', () => {
     const code = `fn funcN = (a, b) => { return a + b }
 const myVar = funcN(1, 2)`
-    const { body } = parser_wasm(code)
+    const { body } = parse(code)
     delete (body[0] as any).declarations[0].init.body.nonCodeMeta
     expect(body).toEqual([
       {
@@ -436,7 +351,7 @@ describe('testing pipe operator special', () => {
   |> lineTo([1, 1], %)
   |> rx(45, %)
 `
-    const { body } = parser_wasm(code)
+    const { body } = parse(code)
     delete (body[0] as any).declarations[0].init.nonCodeMeta
     expect(body).toEqual([
       {
@@ -452,7 +367,7 @@ describe('testing pipe operator special', () => {
             id: { type: 'Identifier', start: 6, end: 14, name: 'mySketch' },
             init: {
               type: 'PipeExpression',
-              start: 15,
+              start: 17,
               end: 145,
               body: [
                 {
@@ -672,7 +587,7 @@ describe('testing pipe operator special', () => {
   })
   test('pipe operator with binary expression', () => {
     let code = `const myVar = 5 + 6 |> myFunc(45, %)`
-    const { body } = parser_wasm(code)
+    const { body } = parse(code)
     delete (body as any)[0].declarations[0].init.nonCodeMeta
     expect(body).toEqual([
       {
@@ -693,7 +608,7 @@ describe('testing pipe operator special', () => {
             },
             init: {
               type: 'PipeExpression',
-              start: 12,
+              start: 14,
               end: 36,
               body: [
                 {
@@ -754,7 +669,7 @@ describe('testing pipe operator special', () => {
   })
   test('array expression', () => {
     let code = `const yo = [1, '2', three, 4 + 5]`
-    const { body } = parser_wasm(code)
+    const { body } = parse(code)
     expect(body).toEqual([
       {
         type: 'VariableDeclaration',
@@ -829,7 +744,7 @@ describe('testing pipe operator special', () => {
       'const three = 3',
       "const yo = {aStr: 'str', anum: 2, identifier: three, binExp: 4 + 5}",
     ].join('\n')
-    const { body } = parser_wasm(code)
+    const { body } = parse(code)
     expect(body).toEqual([
       {
         type: 'VariableDeclaration',
@@ -973,7 +888,7 @@ describe('testing pipe operator special', () => {
     const code = `const yo = {key: {
   key2: 'value'
 }}`
-    const { body } = parser_wasm(code)
+    const { body } = parse(code)
     expect(body).toEqual([
       {
         type: 'VariableDeclaration',
@@ -1041,7 +956,7 @@ describe('testing pipe operator special', () => {
   })
   test('object expression with array ast', () => {
     const code = `const yo = {key: [1, '2']}`
-    const { body } = parser_wasm(code)
+    const { body } = parse(code)
     expect(body).toEqual([
       {
         type: 'VariableDeclaration',
@@ -1105,7 +1020,7 @@ describe('testing pipe operator special', () => {
   })
   test('object memberExpression simple', () => {
     const code = `const prop = yo.one.two`
-    const { body } = parser_wasm(code)
+    const { body } = parse(code)
     expect(body).toEqual([
       {
         type: 'VariableDeclaration',
@@ -1160,7 +1075,7 @@ describe('testing pipe operator special', () => {
   })
   test('object memberExpression with square braces', () => {
     const code = `const prop = yo.one["two"]`
-    const { body } = parser_wasm(code)
+    const { body } = parse(code)
     expect(body).toEqual([
       {
         type: 'VariableDeclaration',
@@ -1216,7 +1131,7 @@ describe('testing pipe operator special', () => {
   })
   test('object memberExpression with two square braces literal and identifier', () => {
     const code = `const prop = yo["one"][two]`
-    const { body } = parser_wasm(code)
+    const { body } = parse(code)
     expect(body).toEqual([
       {
         type: 'VariableDeclaration',
@@ -1275,7 +1190,7 @@ describe('testing pipe operator special', () => {
 describe('nests binary expressions correctly', () => {
   it('works with the simple case', () => {
     const code = `const yo = 1 + 2`
-    const { body } = parser_wasm(code)
+    const { body } = parse(code)
     expect(body[0]).toEqual({
       type: 'VariableDeclaration',
       start: 0,
@@ -1319,7 +1234,7 @@ describe('nests binary expressions correctly', () => {
   it('should nest according to precedence with multiply first', () => {
     // should be binExp { binExp { lit-1 * lit-2 } + lit}
     const code = `const yo = 1 * 2 + 3`
-    const { body } = parser_wasm(code)
+    const { body } = parse(code)
     expect(body[0]).toEqual({
       type: 'VariableDeclaration',
       start: 0,
@@ -1376,7 +1291,7 @@ describe('nests binary expressions correctly', () => {
   it('should nest according to precedence with sum first', () => {
     // should be binExp { lit-1 + binExp { lit-2 * lit-3 } }
     const code = `const yo = 1 + 2 * 3`
-    const { body } = parser_wasm(code)
+    const { body } = parse(code)
     expect(body[0]).toEqual({
       type: 'VariableDeclaration',
       start: 0,
@@ -1432,7 +1347,7 @@ describe('nests binary expressions correctly', () => {
   })
   it('should nest properly with two opperators of equal precedence', () => {
     const code = `const yo = 1 + 2 - 3`
-    const { body } = parser_wasm(code)
+    const { body } = parse(code)
     expect((body[0] as any).declarations[0].init).toEqual({
       type: 'BinaryExpression',
       start: 11,
@@ -1469,7 +1384,7 @@ describe('nests binary expressions correctly', () => {
   })
   it('should nest properly with two opperators of equal (but higher) precedence', () => {
     const code = `const yo = 1 * 2 / 3`
-    const { body } = parser_wasm(code)
+    const { body } = parse(code)
     expect((body[0] as any).declarations[0].init).toEqual({
       type: 'BinaryExpression',
       start: 11,
@@ -1506,7 +1421,7 @@ describe('nests binary expressions correctly', () => {
   })
   it('should nest properly with longer example', () => {
     const code = `const yo = 1 + 2 * (3 - 4) / 5 + 6`
-    const { body } = parser_wasm(code)
+    const { body } = parse(code)
     const init = (body[0] as any).declarations[0].init
     expect(init).toEqual({
       type: 'BinaryExpression',
@@ -1560,26 +1475,25 @@ const yo = { a: { b: { c: '123' } } }
 // this is a comment
 const key = 'c'`
     const nonCodeMetaInstance = {
-      type: 'NoneCodeNode',
+      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 } = parser_wasm(code)
-    expect(nonCodeMeta.noneCodeNodes[0]).toEqual(nonCodeMetaInstance)
+    const { nonCodeMeta } = parse(code)
+    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 } = parser_wasm(
-      codeWithExtraStartWhitespace
-    )
-    expect(nonCodeMeta2.noneCodeNodes[0].value).toStrictEqual(
+    const { nonCodeMeta: nonCodeMeta2 } = parse(codeWithExtraStartWhitespace)
+    expect(nonCodeMeta2.nonCodeNodes[0][0].value).toStrictEqual(
       nonCodeMetaInstance.value
     )
-    expect(nonCodeMeta2.noneCodeNodes[0].start).not.toBe(
+    expect(nonCodeMeta2.nonCodeNodes[0][0].start).not.toBe(
       nonCodeMetaInstance.start
     )
   })
@@ -1593,16 +1507,17 @@ const key = 'c'`
   |> close(%)
 `
 
-    const { body } = parser_wasm(code)
+    const { body } = parse(code)
     const indexOfSecondLineToExpression = 2
     const sketchNonCodeMeta = (body as any)[0].declarations[0].init.nonCodeMeta
-      .noneCodeNodes
-    expect(sketchNonCodeMeta[indexOfSecondLineToExpression]).toEqual({
-      type: 'NoneCodeNode',
+      .nonCodeNodes
+    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',
       },
     })
@@ -1617,16 +1532,17 @@ const key = 'c'`
       '  |> rx(90, %)',
     ].join('\n')
 
-    const { body } = parser_wasm(code)
+    const { body } = parse(code)
     const sketchNonCodeMeta = (body[0] as any).declarations[0].init.nonCodeMeta
-      .noneCodeNodes
-    expect(sketchNonCodeMeta[3]).toEqual({
-      type: 'NoneCodeNode',
+      .nonCodeNodes[3][0]
+    expect(sketchNonCodeMeta).toEqual({
+      type: 'NonCodeNode',
       start: 125,
-      end: 141,
+      end: 138,
       value: {
         type: 'blockComment',
         value: 'a comment',
+        style: 'line',
       },
     })
   })
@@ -1635,7 +1551,7 @@ const key = 'c'`
 describe('test UnaryExpression', () => {
   it('should parse a unary expression in simple var dec situation', () => {
     const code = `const myVar = -min(4, 100)`
-    const { body } = parser_wasm(code)
+    const { body } = parse(code)
     const myVarInit = (body?.[0] as any).declarations[0]?.init
     expect(myVarInit).toEqual({
       type: 'UnaryExpression',
@@ -1661,7 +1577,7 @@ describe('test UnaryExpression', () => {
 describe('testing nested call expressions', () => {
   it('callExp in a binExp in a callExp', () => {
     const code = 'const myVar = min(100, 1 + legLen(5, 3))'
-    const { body } = parser_wasm(code)
+    const { body } = parse(code)
     const myVarInit = (body?.[0] as any).declarations[0]?.init
     expect(myVarInit).toEqual({
       type: 'CallExpression',
@@ -1699,7 +1615,7 @@ describe('testing nested call expressions', () => {
 describe('should recognise callExpresions in binaryExpressions', () => {
   const code = "xLineTo(segEndX('seg02', %) + 1, %)"
   it('should recognise the callExp', () => {
-    const { body } = parser_wasm(code)
+    const { body } = parse(code)
     const callExpArgs = (body?.[0] as any).expression?.arguments
     expect(callExpArgs).toEqual([
       {
@@ -1738,12 +1654,13 @@ describe('parsing errors', () => {
 
     let _theError
     try {
-      const result = expect(parser_wasm(code))
-      console.log('result', result)
+      const result = expect(parse(code))
     } catch (e) {
       _theError = e
     }
     const theError = _theError as any
-    expect(theError).toEqual(new KCLUnexpectedError('Brace', [[29, 30]]))
+    expect(theError).toEqual(
+      new KCLError('syntax', 'Unexpected token', [[27, 28]])
+    )
   })
 })

src/lang/abstractSyntaxTree.ts

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

src/lang/abstractSyntaxTreeTypes.ts

@@ -1,37 +0,0 @@
-export type { Program } from '../wasm-lib/kcl/bindings/Program'
-export type { Value } from '../wasm-lib/kcl/bindings/Value'
-export type { ObjectExpression } from '../wasm-lib/kcl/bindings/ObjectExpression'
-export type { MemberExpression } from '../wasm-lib/kcl/bindings/MemberExpression'
-export type { PipeExpression } from '../wasm-lib/kcl/bindings/PipeExpression'
-export type { VariableDeclaration } from '../wasm-lib/kcl/bindings/VariableDeclaration'
-export type { PipeSubstitution } from '../wasm-lib/kcl/bindings/PipeSubstitution'
-export type { Identifier } from '../wasm-lib/kcl/bindings/Identifier'
-export type { UnaryExpression } from '../wasm-lib/kcl/bindings/UnaryExpression'
-export type { BinaryExpression } from '../wasm-lib/kcl/bindings/BinaryExpression'
-export type { ReturnStatement } from '../wasm-lib/kcl/bindings/ReturnStatement'
-export type { ExpressionStatement } from '../wasm-lib/kcl/bindings/ExpressionStatement'
-export type { CallExpression } from '../wasm-lib/kcl/bindings/CallExpression'
-export type { VariableDeclarator } from '../wasm-lib/kcl/bindings/VariableDeclarator'
-export type { BinaryPart } from '../wasm-lib/kcl/bindings/BinaryPart'
-export type { Literal } from '../wasm-lib/kcl/bindings/Literal'
-export type { ArrayExpression } from '../wasm-lib/kcl/bindings/ArrayExpression'
-
-export type SyntaxType =
-  | 'Program'
-  | 'ExpressionStatement'
-  | 'BinaryExpression'
-  | 'CallExpression'
-  | 'Identifier'
-  | 'ReturnStatement'
-  | 'VariableDeclaration'
-  | 'VariableDeclarator'
-  | 'MemberExpression'
-  | 'ArrayExpression'
-  | 'ObjectExpression'
-  | 'ObjectProperty'
-  | 'FunctionExpression'
-  | 'PipeExpression'
-  | 'PipeSubstitution'
-  | 'Literal'
-  | 'NoneCodeNode'
-  | 'UnaryExpression'

src/lang/artifact.test.ts

@@ -1,5 +1,4 @@
-import { parser_wasm } from './abstractSyntaxTree'
-import { initPromise } from './rust'
+import { parse, initPromise } from './wasm'
 import { enginelessExecutor } from '../lib/testHelpers'
 
 beforeAll(() => initPromise)
@@ -8,12 +7,13 @@ 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, %)
 show(mySketch001)`
-    const programMemory = await enginelessExecutor(parser_wasm(code))
+    const programMemory = await enginelessExecutor(parse(code))
     // @ts-ignore
     const shown = programMemory?.return?.map(
       // @ts-ignore
@@ -21,14 +21,14 @@ show(mySketch001)`
     )
     expect(shown).toEqual([
       {
-        type: 'sketchGroup',
+        type: 'SketchGroup',
         start: {
           to: [0, 0],
           from: [0, 0],
           name: '',
           __geoMeta: {
             id: expect.any(String),
-            sourceRange: [21, 42],
+            sourceRange: [46, 71],
           },
         },
         value: [
@@ -38,7 +38,7 @@ show(mySketch001)`
             to: [-1.59, -1.54],
             from: [0, 0],
             __geoMeta: {
-              sourceRange: [48, 73],
+              sourceRange: [77, 102],
               id: expect.any(String),
             },
           },
@@ -48,7 +48,7 @@ show(mySketch001)`
             from: [-1.59, -1.54],
             name: '',
             __geoMeta: {
-              sourceRange: [79, 103],
+              sourceRange: [108, 132],
               id: expect.any(String),
             },
           },
@@ -56,20 +56,22 @@ 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, %)
   |> extrude(2, %)
 show(mySketch001)`
-    const programMemory = await enginelessExecutor(parser_wasm(code))
+    const programMemory = await enginelessExecutor(parse(code))
     // @ts-ignore
     const shown = programMemory?.return?.map(
       // @ts-ignore
@@ -77,13 +79,13 @@ show(mySketch001)`
     )
     expect(shown).toEqual([
       {
-        type: 'extrudeGroup',
+        type: 'ExtrudeGroup',
         id: expect.any(String),
         value: [],
         height: 2,
         position: [0, 0, 0],
         rotation: [0, 0, 0, 1],
-        __meta: [{ sourceRange: [21, 42] }],
+        __meta: [{ sourceRange: [46, 71] }],
       },
     ])
   })
@@ -91,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], %)
@@ -100,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], %)
@@ -109,7 +113,7 @@ const sk2 = startSketchAt([0, 0])
 
 
 show(theExtrude, sk2)`
-    const programMemory = await enginelessExecutor(parser_wasm(code))
+    const programMemory = await enginelessExecutor(parse(code))
     // @ts-ignore
     const geos = programMemory?.return?.map(
       // @ts-ignore
@@ -117,22 +121,22 @@ show(theExtrude, sk2)`
     )
     expect(geos).toEqual([
       {
-        type: 'extrudeGroup',
+        type: 'ExtrudeGroup',
         id: expect.any(String),
         value: [],
         height: 2,
         position: [0, 0, 0],
         rotation: [0, 0, 0, 1],
-        __meta: [{ sourceRange: [13, 34] }],
+        __meta: [{ sourceRange: [38, 63] }],
       },
       {
-        type: 'extrudeGroup',
+        type: 'ExtrudeGroup',
         id: expect.any(String),
         value: [],
         height: 2,
         position: [0, 0, 0],
         rotation: [0, 0, 0, 1],
-        __meta: [{ sourceRange: [302, 323] }],
+        __meta: [{ sourceRange: [356, 381] }],
       },
     ])
   })