Release derive-docs 0.1.5 (#1236)

# Problem

This is my proposal for fixing #1107 . I've only done it for one stdlib function, `tangentialArcTo` -- if y'all like it, I'll apply this idea to the rest of the stdlib.

Previously, if users want to put a tag on the arc, the function's parameters change type.

```
// Tag missing: first param is array
tangentialArcTo([x, y], %)
// Tag present: first param is object
tangentialArcTo({to: [x, y], tag: "myTag"}, %)
```

# Solution

My proposal in #1006 is that KCL should have optional values. This means we can change the stdlib `tangentialArcTo` function to use them. In this PR, the calls are now like

```
// Tag missing: first param is array
tangentialArcTo([x, y], %)
// Tag present: first param is array still, but we now pass a tag at the end.
tangentialArcTo([x, y], %, "myTag")
```

This adds an "option" type to KCL typesystem, but it's not really revealed to users (no KCL types are revealed to users right now, they write untyped code and only interact with types when they get type errors upon executing programs). Also adds a None type, which is the default case of the Optional enum.

.github/workflows/ci.yml

@@ -350,12 +350,12 @@ jobs:
           credentials_json: '${{ secrets.GOOGLE_CLOUD_DL_SA }}'
 
       - name: Set up Google Cloud SDK
-        uses: google-github-actions/setup-gcloud@v1.1.1
+        uses: google-github-actions/setup-gcloud@v2.0.0
         with:
           project_id: kittycadapi
 
       - name: Upload release files to public bucket
-        uses: google-github-actions/upload-cloud-storage@v1.0.3
+        uses: google-github-actions/upload-cloud-storage@v2.0.0
         with:
           path: artifact
           glob: '*/*itty*'
@@ -363,13 +363,13 @@ jobs:
           destination: ${{ env.BUCKET_DIR }}/${{ env.VERSION }}
 
       - name: Upload update endpoint to public bucket
-        uses: google-github-actions/upload-cloud-storage@v1.0.3
+        uses: google-github-actions/upload-cloud-storage@v2.0.0
         with:
           path: last_update.json
           destination: ${{ env.BUCKET_DIR }}
 
       - name: Upload download endpoint to public bucket
-        uses: google-github-actions/upload-cloud-storage@v1.0.3
+        uses: google-github-actions/upload-cloud-storage@v2.0.0
         with:
           path: last_download.json
           destination: ${{ env.BUCKET_DIR }}

.github/workflows/playwright.yml

@@ -14,6 +14,7 @@ jobs:
       with:
         node-version-file: '.nvmrc'
         cache: 'yarn'
+    - uses: KittyCAD/action-install-cli@v0.2.16
     - name: Install dependencies
       run: yarn
     - name: Install Playwright Browsers
@@ -33,6 +34,7 @@ jobs:
       env:
         CI: true
         token: ${{ secrets.KITTYCAD_API_TOKEN_DEV }}
+        snapshottoken: ${{ secrets.KITTYCAD_API_TOKEN }}
     - uses: actions/upload-artifact@v3
       if: always()
       with:

.gitignore

@@ -37,6 +37,15 @@ src/wasm-lib/lcov.info
 e2e/playwright/playwright-secrets.env
 e2e/playwright/temp1.png
 e2e/playwright/temp2.png
+# exports from snapshot-tests.spec.ts
+e2e/playwright/export-snapshots/*.ply
+e2e/playwright/export-snapshots/*.obj
+e2e/playwright/export-snapshots/*.step
+e2e/playwright/export-snapshots/*.stl
+e2e/playwright/export-snapshots/*binary.gltf
+e2e/playwright/export-snapshots/*embedded.gltf
+
+
 /test-results/
 /playwright-report/
 /blob-report/

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2023 The KittyCAD Authors
+Copyright (c) 2023 The Zoo 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

README.md

@@ -1,17 +1,17 @@
-![KittyCAD Modeling App](/public/kcma-logomark.png)
+![Zoo Modeling App](/public/zma-logomark-outlined.png)
 
-## KittyCAD Modeling App
+## Zoo Modeling App
 
-live at [app.kittycad.io](https://app.kittycad.io/)
+live at [app.zoo.dev](https://app.zoo.dev/)
 
-A CAD application from the future, brought to you by the [KittyCAD team](https://kittycad.io).
+A CAD application from the future, brought to you by the [Zoo team](https://zoo.dev).
 
-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:
+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:
 
 - 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
+  - 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 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
@@ -19,9 +19,9 @@ The KittyCAD modeling app is our take on what a modern modelling experience can
 
 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!
 
-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.
+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.
 
-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.
+The 3D view in 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
 
@@ -183,9 +183,9 @@ For more information on fuzzing you can check out
 First time running plawright locally, you'll need to add the secrets file
 ```bash
 touch ./e2e/playwright/playwright-secrets.env
-echo 'token="your-token"' > ./e2e/playwright/playwright-secrets.env
+echo 'token="your-token"\nsnapshottoken="your-snapshot-token"' > ./e2e/playwright/playwright-secrets2.env
 ```
-then replace "your-token" with a dev token from dev.kittycad.io/account/api-tokens
+then replace "your-token" with a dev token from dev.zoo.dev/account/api-tokens
 
 then:
 run playwright

docs/kcl/std.json

@@ -19765,46 +19765,16 @@
     "tags": [],
     "args": [
       {
-        "name": "data",
-        "type": "TangentialArcToData",
+        "name": "to",
+        "type": "[number]",
         "schema": {
-          "description": "Data to draw a tangential arc to a specific point.",
-          "anyOf": [
-            {
-              "description": "A point with a tag.",
-              "type": "object",
-              "required": [
-                "tag",
-                "to"
-              ],
-              "properties": {
-                "tag": {
-                  "description": "The tag.",
-                  "type": "string"
-                },
-                "to": {
-                  "description": "Where the arc should end. Must lie in the same plane as the current path pen position. Must not be colinear with current path pen position.",
-                  "type": "array",
-                  "items": {
-                    "type": "number",
-                    "format": "double"
-                  },
-                  "maxItems": 2,
-                  "minItems": 2
-                }
-              }
-            },
-            {
-              "description": "A point where the arc should end. Must lie in the same plane as the current path pen position. Must not be colinear with current path pen position.",
-              "type": "array",
-              "items": {
-                "type": "number",
-                "format": "double"
-              },
-              "maxItems": 2,
-              "minItems": 2
-            }
-          ]
+          "type": "array",
+          "items": {
+            "type": "number",
+            "format": "double"
+          },
+          "maxItems": 2,
+          "minItems": 2
         },
         "required": true
       },
@@ -20246,6 +20216,15 @@
           }
         },
         "required": true
+      },
+      {
+        "name": "tag",
+        "type": "String",
+        "schema": {
+          "type": "string",
+          "nullable": true
+        },
+        "required": true
       }
     ],
     "returnValue": {

docs/kcl/std.md

@@ -3905,21 +3905,12 @@ Draw an arc.
 
 
 ```
-tangentialArcTo(data: TangentialArcToData, sketch_group: SketchGroup) -> SketchGroup
+tangentialArcTo(to: [number], sketch_group: SketchGroup, tag: String) -> SketchGroup
 ```
 
 #### Arguments
 
-* `data`: `TangentialArcToData` - Data to draw a tangential arc to a specific point.
-```
-{
-	// The tag.
-	tag: string,
-	// Where the arc should end. Must lie in the same plane as the current path pen position. Must not be colinear with current path pen position.
-	to: [number, number],
-} |
-[number, number]
-```
+* `to`: `[number]`
 * `sketch_group`: `SketchGroup` - A sketch group is a collection of paths.
 ```
 {
@@ -3985,6 +3976,7 @@ tangentialArcTo(data: TangentialArcToData, sketch_group: SketchGroup) -> SketchG
 }],
 }
 ```
+* `tag`: `String`
 
 #### Returns
 

e2e/playwright/export-snapshots/obj-.obj

@@ -1,189 +0,0 @@
-v 0 -4 0
-v 0 0 0
-v 0 -4 -1
-v 0 0 -1
-v 3.0950184 -4 -1
-v 3.0950184 0 -1
-v 5.9513144 -4 -3
-v 5.9513144 0 -3
-v 9.5 -4 -3
-v 9.5 0 -3
-v 9.5 -4 -2.5
-v 9.5 0 -2.5
-v 6.108964 -4 -2.5
-v 6.108964 0 -2.5
-v 3.4311862 -4 -0.625
-v 4.323779 -4 -1.25
-v 4.323779 -0 -1.25
-v 3.4311862 -0 -0.625
-v 2.5385938 0 0
-v 2.5385938 -4 0
-v 3.342784 -4 0.375
-v 4.146974 -4 0.75
-v 3.342784 -0 0.375
-v 4.146974 -0 0.75
-v 5.755354 0 1.5
-v 5.755354 -4 1.5
-v 9.5 -4 1.5
-v 9.5 0 1.5
-v 9.5 -4 2
-v 9.5 0 2
-v 5.644507 -4 2
-v 5.644507 0 2
-v 3.5 -4 1
-v 3.5 0 1
-v 0 -4 1
-v 0 0 1
-vt 0.0127 -0.0508
-vt 0.0127 0.0508
-vt -0.0127 -0.0508
-vt -0.0127 0.0508
-vt -0.039306734 0.0508
-vt -0.039306734 -0.0508
-vt 0.039306734 0.0508
-vt 0.039306734 -0.0508
-vt -0.04428355 0.0508
-vt -0.04428355 -0.0508
-vt 0.04428355 0.0508
-vt 0.04428355 -0.0508
-vt -0.045068305 0.0508
-vt -0.045068305 -0.0508
-vt 0.045068305 0.0508
-vt 0.045068305 -0.0508
-vt -0.00635 0.0508
-vt -0.00635 -0.0508
-vt 0.00635 0.0508
-vt 0.00635 -0.0508
-vt 0.04306616 -0.0508
-vt 0.04306616 0.0508
-vt -0.04306616 -0.0508
-vt -0.04306616 0.0508
-vt -0.027677217 -0.0508
-vt 0.000000000000000048572257 -0.0508
-vt 0.000000000000000048572257 0.0508
-vt 0.055354435 -0.0508
-vt 0.055354435 0.0508
-vt -0.027677217 0.0508
-vt -0.055354435 0.0508
-vt -0.055354435 -0.0508
-vt -0.02253807 0.0508
-vt -0.04507614 0.0508
-vt -0.04507614 -0.0508
-vt 0.00000000000000005551115 0.0508
-vt -0.02253807 -0.0508
-vt 0.00000000000000005551115 -0.0508
-vt 0.04507614 -0.0508
-vt 0.04507614 0.0508
-vt -0.047557 0.0508
-vt -0.047557 -0.0508
-vt 0.047557 0.0508
-vt 0.047557 -0.0508
-vt 0.04896476 -0.0508
-vt 0.04896476 0.0508
-vt -0.04896476 -0.0508
-vt -0.04896476 0.0508
-vt 0.03005076 -0.0508
-vt 0.03005076 0.0508
-vt -0.03005076 -0.0508
-vt -0.03005076 0.0508
-vt 0.04445 -0.0508
-vt 0.04445 0.0508
-vt -0.04445 -0.0508
-vt -0.04445 0.0508
-vt 0.08490671 0.009525
-vt 0.06448028 0
-vt 0.0889 0.0254
-vt 0.08715213 -0.015875
-vt 0.10982399 -0.03175
-vt 0.07861347 -0.0254
-vt 0.10533314 0.01905
-vt 0.15116338 -0.0762
-vt 0 -0.0254
-vt 0 0
-vt 0.2413 -0.0762
-vt 0.15516768 -0.0635
-vt 0.2413 -0.0635
-vt 0.14337048 0.0508
-vt 0.146186 0.0381
-vt 0.2413 0.0381
-vt 0.2413 0.0508
-vt 0 0.0254
-vn -1 -0 0
-vn 0 -0 -1
-vn -0.57357645 -0 -0.81915206
-vn 1 -0 0
-vn 0 -0 1
-vn 0.57357645 -0 0.81915206
-vn 0.42261827 -0 -0.9063078
-vn -0.42261827 -0 0.9063078
-vn -0 1 -0
-vn 0 -1 0
-o Unnamed-0
-f 1/1/1 2/2/1 3/3/1
-f 3/3/1 2/2/1 4/4/1
-f 3/5/2 4/6/2 5/7/2
-f 5/7/2 4/6/2 6/8/2
-f 5/9/3 6/10/3 7/11/3
-f 7/11/3 6/10/3 8/12/3
-f 7/13/2 8/14/2 9/15/2
-f 9/15/2 8/14/2 10/16/2
-f 9/17/4 10/18/4 11/19/4
-f 11/19/4 10/18/4 12/20/4
-f 11/21/5 12/22/5 13/23/5
-f 13/23/5 12/22/5 14/24/5
-f 15/25/6 16/26/6 17/27/6
-f 16/26/6 13/28/6 14/29/6
-f 18/30/6 19/31/6 20/32/6
-f 15/25/6 18/30/6 20/32/6
-f 16/26/6 14/29/6 17/27/6
-f 18/30/6 15/25/6 17/27/6
-f 21/33/7 20/34/7 19/35/7
-f 22/36/7 21/33/7 23/37/7
-f 23/37/7 24/38/7 22/36/7
-f 24/38/7 25/39/7 26/40/7
-f 21/33/7 19/35/7 23/37/7
-f 26/40/7 22/36/7 24/38/7
-f 26/41/2 25/42/2 27/43/2
-f 27/43/2 25/42/2 28/44/2
-f 27/17/4 28/18/4 29/19/4
-f 29/19/4 28/18/4 30/20/4
-f 29/45/5 30/46/5 31/47/5
-f 31/47/5 30/46/5 32/48/5
-f 31/49/8 32/50/8 33/51/8
-f 33/51/8 32/50/8 34/52/8
-f 33/53/5 34/54/5 35/55/5
-f 35/55/5 34/54/5 36/56/5
-f 35/1/1 36/2/1 1/3/1
-f 1/3/1 36/2/1 2/4/1
-f 23/57/9 19/58/9 34/59/9
-f 18/60/9 17/61/9 6/62/9
-f 23/57/9 34/59/9 24/63/9
-f 17/61/9 8/64/9 6/62/9
-f 4/65/9 19/58/9 6/62/9
-f 4/65/9 2/66/9 19/58/9
-f 10/67/9 14/68/9 12/69/9
-f 10/67/9 8/64/9 14/68/9
-f 8/64/9 17/61/9 14/68/9
-f 32/70/9 25/71/9 24/63/9
-f 6/62/9 19/58/9 18/60/9
-f 24/63/9 34/59/9 32/70/9
-f 28/72/9 25/71/9 30/73/9
-f 25/71/9 32/70/9 30/73/9
-f 19/58/9 2/66/9 36/74/9
-f 34/59/9 19/58/9 36/74/9
-f 21/57/10 33/59/10 20/58/10
-f 22/63/10 33/59/10 21/57/10
-f 15/60/10 5/62/10 16/61/10
-f 22/63/10 26/71/10 31/70/10
-f 35/74/10 20/58/10 33/59/10
-f 35/74/10 1/66/10 20/58/10
-f 31/70/10 26/71/10 29/73/10
-f 29/73/10 26/71/10 27/72/10
-f 22/63/10 31/70/10 33/59/10
-f 20/58/10 5/62/10 15/60/10
-f 16/61/10 5/62/10 7/64/10
-f 13/68/10 16/61/10 7/64/10
-f 11/69/10 13/68/10 9/67/10
-f 13/68/10 7/64/10 9/67/10
-f 20/58/10 3/65/10 5/62/10
-f 3/65/10 20/58/10 1/66/10

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

@@ -1,282 +0,0 @@
-ply
-format ascii 1.0
-comment Generated by kittycad.io
-element vertex 204
-property float x
-property float y
-property float z
-element face 68
-property list uchar uint vertex_indices
-end_header
-0 0 4 
-0 0 0 
-0 -1 4 
-0 -1 4 
-0 0 0 
-0 -1 0 
-0 -1 4 
-0 -1 0 
-3.0950184 -1 4 
-3.0950184 -1 4 
-0 -1 0 
-3.0950184 -1 0 
-3.0950184 -1 4 
-3.0950184 -1 0 
-5.9513144 -3 4 
-5.9513144 -3 4 
-3.0950184 -1 0 
-5.9513144 -3 0 
-5.9513144 -3 4 
-5.9513144 -3 0 
-9.5 -3 4 
-9.5 -3 4 
-5.9513144 -3 0 
-9.5 -3 0 
-9.5 -3 4 
-9.5 -3 0 
-9.5 -2.5 4 
-9.5 -2.5 4 
-9.5 -3 0 
-9.5 -2.5 0 
-9.5 -2.5 4 
-9.5 -2.5 0 
-6.108964 -2.5 4 
-6.108964 -2.5 4 
-9.5 -2.5 0 
-6.108964 -2.5 0 
-3.4311862 -0.625 4 
-4.323779 -1.25 4 
-4.323779 -1.25 0 
-4.323779 -1.25 4 
-6.108964 -2.5 4 
-6.108964 -2.5 0 
-3.4311862 -0.625 0 
-2.5385938 0 0 
-2.5385938 0 4 
-3.4311862 -0.625 4 
-3.4311862 -0.625 0 
-2.5385938 0 4 
-4.323779 -1.25 4 
-6.108964 -2.5 0 
-4.323779 -1.25 0 
-3.4311862 -0.625 0 
-3.4311862 -0.625 4 
-4.323779 -1.25 0 
-3.342784 0.375 4 
-2.5385938 0 4 
-2.5385938 0 0 
-4.146974 0.75 4 
-3.342784 0.375 4 
-3.342784 0.375 0 
-3.342784 0.375 0 
-4.146974 0.75 0 
-4.146974 0.75 4 
-4.146974 0.75 0 
-5.755354 1.5 0 
-5.755354 1.5 4 
-3.342784 0.375 4 
-2.5385938 0 0 
-3.342784 0.375 0 
-5.755354 1.5 4 
-4.146974 0.75 4 
-4.146974 0.75 0 
-5.755354 1.5 4 
-5.755354 1.5 0 
-9.5 1.5 4 
-9.5 1.5 4 
-5.755354 1.5 0 
-9.5 1.5 0 
-9.5 1.5 4 
-9.5 1.5 0 
-9.5 2 4 
-9.5 2 4 
-9.5 1.5 0 
-9.5 2 0 
-9.5 2 4 
-9.5 2 0 
-5.644507 2 4 
-5.644507 2 4 
-9.5 2 0 
-5.644507 2 0 
-5.644507 2 4 
-5.644507 2 0 
-3.5 1 4 
-3.5 1 4 
-5.644507 2 0 
-3.5 1 0 
-3.5 1 4 
-3.5 1 0 
-0 1 4 
-0 1 4 
-3.5 1 0 
-0 1 0 
-0 1 4 
-0 1 0 
-0 0 4 
-0 0 4 
-0 1 0 
-0 0 0 
-3.342784 0.375 0 
-2.5385938 0 0 
-3.5 1 0 
-3.4311862 -0.625 0 
-4.323779 -1.25 0 
-3.0950184 -1 0 
-3.342784 0.375 0 
-3.5 1 0 
-4.146974 0.75 0 
-4.323779 -1.25 0 
-5.9513144 -3 0 
-3.0950184 -1 0 
-0 -1 0 
-2.5385938 0 0 
-3.0950184 -1 0 
-0 -1 0 
-0 0 0 
-2.5385938 0 0 
-9.5 -3 0 
-6.108964 -2.5 0 
-9.5 -2.5 0 
-9.5 -3 0 
-5.9513144 -3 0 
-6.108964 -2.5 0 
-5.9513144 -3 0 
-4.323779 -1.25 0 
-6.108964 -2.5 0 
-5.644507 2 0 
-5.755354 1.5 0 
-4.146974 0.75 0 
-3.0950184 -1 0 
-2.5385938 0 0 
-3.4311862 -0.625 0 
-4.146974 0.75 0 
-3.5 1 0 
-5.644507 2 0 
-9.5 1.5 0 
-5.755354 1.5 0 
-9.5 2 0 
-5.755354 1.5 0 
-5.644507 2 0 
-9.5 2 0 
-2.5385938 0 0 
-0 0 0 
-0 1 0 
-3.5 1 0 
-2.5385938 0 0 
-0 1 0 
-3.342784 0.375 4 
-3.5 1 4 
-2.5385938 0 4 
-4.146974 0.75 4 
-3.5 1 4 
-3.342784 0.375 4 
-3.4311862 -0.625 4 
-3.0950184 -1 4 
-4.323779 -1.25 4 
-4.146974 0.75 4 
-5.755354 1.5 4 
-5.644507 2 4 
-0 1 4 
-2.5385938 0 4 
-3.5 1 4 
-0 1 4 
-0 0 4 
-2.5385938 0 4 
-5.644507 2 4 
-5.755354 1.5 4 
-9.5 2 4 
-9.5 2 4 
-5.755354 1.5 4 
-9.5 1.5 4 
-4.146974 0.75 4 
-5.644507 2 4 
-3.5 1 4 
-2.5385938 0 4 
-3.0950184 -1 4 
-3.4311862 -0.625 4 
-4.323779 -1.25 4 
-3.0950184 -1 4 
-5.9513144 -3 4 
-6.108964 -2.5 4 
-4.323779 -1.25 4 
-5.9513144 -3 4 
-9.5 -2.5 4 
-6.108964 -2.5 4 
-9.5 -3 4 
-6.108964 -2.5 4 
-5.9513144 -3 4 
-9.5 -3 4 
-2.5385938 0 4 
-0 -1 4 
-3.0950184 -1 4 
-0 -1 4 
-2.5385938 0 4 
-0 0 4 
-3 0 1 2 
-3 3 4 5 
-3 6 7 8 
-3 9 10 11 
-3 12 13 14 
-3 15 16 17 
-3 18 19 20 
-3 21 22 23 
-3 24 25 26 
-3 27 28 29 
-3 30 31 32 
-3 33 34 35 
-3 36 37 38 
-3 39 40 41 
-3 42 43 44 
-3 45 46 47 
-3 48 49 50 
-3 51 52 53 
-3 54 55 56 
-3 57 58 59 
-3 60 61 62 
-3 63 64 65 
-3 66 67 68 
-3 69 70 71 
-3 72 73 74 
-3 75 76 77 
-3 78 79 80 
-3 81 82 83 
-3 84 85 86 
-3 87 88 89 
-3 90 91 92 
-3 93 94 95 
-3 96 97 98 
-3 99 100 101 
-3 102 103 104 
-3 105 106 107 
-3 108 109 110 
-3 111 112 113 
-3 114 115 116 
-3 117 118 119 
-3 120 121 122 
-3 123 124 125 
-3 126 127 128 
-3 129 130 131 
-3 132 133 134 
-3 135 136 137 
-3 138 139 140 
-3 141 142 143 
-3 144 145 146 
-3 147 148 149 
-3 150 151 152 
-3 153 154 155 
-3 156 157 158 
-3 159 160 161 
-3 162 163 164 
-3 165 166 167 
-3 168 169 170 
-3 171 172 173 
-3 174 175 176 
-3 177 178 179 
-3 180 181 182 
-3 183 184 185 
-3 186 187 188 
-3 189 190 191 
-3 192 193 194 
-3 195 196 197 
-3 198 199 200 
-3 201 202 203 

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

@@ -74,171 +74,171 @@ DATA;
 #58 = CARTESIAN_POINT('NONE', (0, 0.0254, 0.1016));
 #59 = VERTEX_POINT('NONE', #58);
 #60 = DIRECTION('NONE', (0, -1, 0));
-#61 = VECTOR('NONE', #60, 0.0254);
+#61 = VECTOR('NONE', #60, 1);
 #62 = CARTESIAN_POINT('NONE', (0, 0, -0));
 #63 = LINE('NONE', #62, #61);
 #64 = DIRECTION('NONE', (0, 0, 1));
-#65 = VECTOR('NONE', #64, 0.1016);
+#65 = VECTOR('NONE', #64, 1);
 #66 = CARTESIAN_POINT('NONE', (0, -0.0254, -0));
 #67 = LINE('NONE', #66, #65);
 #68 = DIRECTION('NONE', (0, -1, 0));
-#69 = VECTOR('NONE', #68, 0.0254);
+#69 = VECTOR('NONE', #68, 1);
 #70 = CARTESIAN_POINT('NONE', (0, 0, 0.1016));
 #71 = LINE('NONE', #70, #69);
 #72 = DIRECTION('NONE', (0, 0, 1));
-#73 = VECTOR('NONE', #72, 0.1016);
+#73 = VECTOR('NONE', #72, 1);
 #74 = CARTESIAN_POINT('NONE', (0, 0, -0));
 #75 = LINE('NONE', #74, #73);
 #76 = DIRECTION('NONE', (1, 0, 0));
-#77 = VECTOR('NONE', #76, 0.07861346939195568);
+#77 = VECTOR('NONE', #76, 1);
 #78 = CARTESIAN_POINT('NONE', (0, -0.0254, -0));
 #79 = LINE('NONE', #78, #77);
 #80 = DIRECTION('NONE', (0, 0, 1));
-#81 = VECTOR('NONE', #80, 0.1016);
+#81 = VECTOR('NONE', #80, 1);
 #82 = CARTESIAN_POINT('NONE', (0.07861346939195568, -0.0254, -0));
 #83 = LINE('NONE', #82, #81);
 #84 = DIRECTION('NONE', (1, 0, 0));
-#85 = VECTOR('NONE', #84, 0.07861346939195568);
+#85 = VECTOR('NONE', #84, 1);
 #86 = CARTESIAN_POINT('NONE', (0, -0.0254, 0.1016));
 #87 = LINE('NONE', #86, #85);
 #88 = DIRECTION('NONE', (0.8191520442889919, -0.5735764363510459, 0));
-#89 = VECTOR('NONE', #88, 0.08856709721755177);
+#89 = VECTOR('NONE', #88, 1);
 #90 = CARTESIAN_POINT('NONE', (0.07861346939195568, -0.0254, -0));
 #91 = LINE('NONE', #90, #89);
 #92 = DIRECTION('NONE', (0, 0, 1));
-#93 = VECTOR('NONE', #92, 0.1016);
+#93 = VECTOR('NONE', #92, 1);
 #94 = CARTESIAN_POINT('NONE', (0.1511633881344551, -0.07619999999999998, -0));
 #95 = LINE('NONE', #94, #93);
 #96 = DIRECTION('NONE', (0.8191520442889919, -0.5735764363510459, 0));
-#97 = VECTOR('NONE', #96, 0.08856709721755177);
+#97 = VECTOR('NONE', #96, 1);
 #98 = CARTESIAN_POINT('NONE', (0.07861346939195568, -0.0254, 0.1016));
 #99 = LINE('NONE', #98, #97);
 #100 = DIRECTION('NONE', (1, -0.0000000000000003079278779307945, 0));
-#101 = VECTOR('NONE', #100, 0.09013661186554489);
+#101 = VECTOR('NONE', #100, 1);
 #102 = CARTESIAN_POINT('NONE', (0.1511633881344551, -0.07619999999999998, -0));
 #103 = LINE('NONE', #102, #101);
 #104 = DIRECTION('NONE', (0, 0, 1));
-#105 = VECTOR('NONE', #104, 0.1016);
+#105 = VECTOR('NONE', #104, 1);
 #106 = CARTESIAN_POINT('NONE', (0.2413, -0.0762, -0));
 #107 = LINE('NONE', #106, #105);
 #108 = DIRECTION('NONE', (1, -0.0000000000000003079278779307945, 0));
-#109 = VECTOR('NONE', #108, 0.09013661186554489);
+#109 = VECTOR('NONE', #108, 1);
 #110 = CARTESIAN_POINT('NONE', (0.1511633881344551, -0.07619999999999998, 0.1016));
 #111 = LINE('NONE', #110, #109);
 #112 = DIRECTION('NONE', (0, 1, 0));
-#113 = VECTOR('NONE', #112, 0.012700000000000003);
+#113 = VECTOR('NONE', #112, 1);
 #114 = CARTESIAN_POINT('NONE', (0.2413, -0.0762, -0));
 #115 = LINE('NONE', #114, #113);
 #116 = DIRECTION('NONE', (0, 0, 1));
-#117 = VECTOR('NONE', #116, 0.1016);
+#117 = VECTOR('NONE', #116, 1);
 #118 = CARTESIAN_POINT('NONE', (0.2413, -0.0635, -0));
 #119 = LINE('NONE', #118, #117);
 #120 = DIRECTION('NONE', (0, 1, 0));
-#121 = VECTOR('NONE', #120, 0.012700000000000003);
+#121 = VECTOR('NONE', #120, 1);
 #122 = CARTESIAN_POINT('NONE', (0.2413, -0.0762, 0.1016));
 #123 = LINE('NONE', #122, #121);
 #124 = DIRECTION('NONE', (-1, 0, 0));
-#125 = VECTOR('NONE', #124, 0.08613231724678178);
+#125 = VECTOR('NONE', #124, 1);
 #126 = CARTESIAN_POINT('NONE', (0.2413, -0.0635, -0));
 #127 = LINE('NONE', #126, #125);
 #128 = DIRECTION('NONE', (0, 0, 1));
-#129 = VECTOR('NONE', #128, 0.1016);
+#129 = VECTOR('NONE', #128, 1);
 #130 = CARTESIAN_POINT('NONE', (0.1551676827532182, -0.0635, -0));
 #131 = LINE('NONE', #130, #129);
 #132 = DIRECTION('NONE', (-1, 0, 0));
-#133 = VECTOR('NONE', #132, 0.08613231724678178);
+#133 = VECTOR('NONE', #132, 1);
 #134 = CARTESIAN_POINT('NONE', (0.2413, -0.0635, 0.1016));
 #135 = LINE('NONE', #134, #133);
-#136 = DIRECTION('NONE', (-0.8191520442889918, 0.573576436351046, 0));
-#137 = VECTOR('NONE', #136, 0.11070887152193974);
+#136 = DIRECTION('NONE', (-0.8191520442889919, 0.573576436351046, 0));
+#137 = VECTOR('NONE', #136, 1);
 #138 = CARTESIAN_POINT('NONE', (0.1551676827532182, -0.0635, -0));
 #139 = LINE('NONE', #138, #137);
 #140 = DIRECTION('NONE', (0, 0, 1));
-#141 = VECTOR('NONE', #140, 0.1016);
+#141 = VECTOR('NONE', #140, 1);
 #142 = CARTESIAN_POINT('NONE', (0.06448028432509392, 0, -0));
 #143 = LINE('NONE', #142, #141);
-#144 = DIRECTION('NONE', (-0.8191520442889918, 0.573576436351046, 0));
-#145 = VECTOR('NONE', #144, 0.11070887152193974);
+#144 = DIRECTION('NONE', (-0.8191520442889919, 0.573576436351046, 0));
+#145 = VECTOR('NONE', #144, 1);
 #146 = CARTESIAN_POINT('NONE', (0.1551676827532182, -0.0635, 0.1016));
 #147 = LINE('NONE', #146, #145);
 #148 = DIRECTION('NONE', (0.90630778703665, 0.4226182617406993, 0));
-#149 = VECTOR('NONE', #148, 0.09015228031811025);
+#149 = VECTOR('NONE', #148, 1);
 #150 = CARTESIAN_POINT('NONE', (0.06448028432509392, 0, -0));
 #151 = LINE('NONE', #150, #149);
 #152 = DIRECTION('NONE', (0, 0, 1));
-#153 = VECTOR('NONE', #152, 0.1016);
+#153 = VECTOR('NONE', #152, 1);
 #154 = CARTESIAN_POINT('NONE', (0.14618599799650817, 0.03810000000000001, -0));
 #155 = LINE('NONE', #154, #153);
 #156 = DIRECTION('NONE', (0.90630778703665, 0.4226182617406993, 0));
-#157 = VECTOR('NONE', #156, 0.09015228031811025);
+#157 = VECTOR('NONE', #156, 1);
 #158 = CARTESIAN_POINT('NONE', (0.06448028432509392, 0, 0.1016));
 #159 = LINE('NONE', #158, #157);
 #160 = DIRECTION('NONE', (1, -0.00000000000000007295344279228718, 0));
-#161 = VECTOR('NONE', #160, 0.09511400200349182);
+#161 = VECTOR('NONE', #160, 1);
 #162 = CARTESIAN_POINT('NONE', (0.14618599799650817, 0.03810000000000001, -0));
 #163 = LINE('NONE', #162, #161);
 #164 = DIRECTION('NONE', (0, 0, 1));
-#165 = VECTOR('NONE', #164, 0.1016);
+#165 = VECTOR('NONE', #164, 1);
 #166 = CARTESIAN_POINT('NONE', (0.2413, 0.0381, -0));
 #167 = LINE('NONE', #166, #165);
 #168 = DIRECTION('NONE', (1, -0.00000000000000007295344279228718, 0));
-#169 = VECTOR('NONE', #168, 0.09511400200349182);
+#169 = VECTOR('NONE', #168, 1);
 #170 = CARTESIAN_POINT('NONE', (0.14618599799650817, 0.03810000000000001, 0.1016));
 #171 = LINE('NONE', #170, #169);
 #172 = DIRECTION('NONE', (0, 1, 0));
-#173 = VECTOR('NONE', #172, 0.012699999999999996);
+#173 = VECTOR('NONE', #172, 1);
 #174 = CARTESIAN_POINT('NONE', (0.2413, 0.0381, -0));
 #175 = LINE('NONE', #174, #173);
 #176 = DIRECTION('NONE', (0, 0, 1));
-#177 = VECTOR('NONE', #176, 0.1016);
+#177 = VECTOR('NONE', #176, 1);
 #178 = CARTESIAN_POINT('NONE', (0.2413, 0.0508, -0));
 #179 = LINE('NONE', #178, #177);
 #180 = DIRECTION('NONE', (0, 1, 0));
-#181 = VECTOR('NONE', #180, 0.012699999999999996);
+#181 = VECTOR('NONE', #180, 1);
 #182 = CARTESIAN_POINT('NONE', (0.2413, 0.0381, 0.1016));
 #183 = LINE('NONE', #182, #181);
 #184 = DIRECTION('NONE', (-1, 0, 0));
-#185 = VECTOR('NONE', #184, 0.0979295242190572);
+#185 = VECTOR('NONE', #184, 1);
 #186 = CARTESIAN_POINT('NONE', (0.2413, 0.0508, -0));
 #187 = LINE('NONE', #186, #185);
 #188 = DIRECTION('NONE', (0, 0, 1));
-#189 = VECTOR('NONE', #188, 0.1016);
+#189 = VECTOR('NONE', #188, 1);
 #190 = CARTESIAN_POINT('NONE', (0.14337047578094278, 0.0508, -0));
 #191 = LINE('NONE', #190, #189);
 #192 = DIRECTION('NONE', (-1, 0, 0));
-#193 = VECTOR('NONE', #192, 0.0979295242190572);
+#193 = VECTOR('NONE', #192, 1);
 #194 = CARTESIAN_POINT('NONE', (0.2413, 0.0508, 0.1016));
 #195 = LINE('NONE', #194, #193);
-#196 = DIRECTION('NONE', (-0.9063077870366499, -0.42261826174069944, 0));
-#197 = VECTOR('NONE', #196, 0.06010152021207346);
+#196 = DIRECTION('NONE', (-0.90630778703665, -0.42261826174069944, 0));
+#197 = VECTOR('NONE', #196, 1);
 #198 = CARTESIAN_POINT('NONE', (0.14337047578094278, 0.0508, -0));
 #199 = LINE('NONE', #198, #197);
 #200 = DIRECTION('NONE', (0, 0, 1));
-#201 = VECTOR('NONE', #200, 0.1016);
+#201 = VECTOR('NONE', #200, 1);
 #202 = CARTESIAN_POINT('NONE', (0.08889999999999999, 0.0254, -0));
 #203 = LINE('NONE', #202, #201);
-#204 = DIRECTION('NONE', (-0.9063077870366499, -0.42261826174069944, 0));
-#205 = VECTOR('NONE', #204, 0.06010152021207346);
+#204 = DIRECTION('NONE', (-0.90630778703665, -0.42261826174069944, 0));
+#205 = VECTOR('NONE', #204, 1);
 #206 = CARTESIAN_POINT('NONE', (0.14337047578094278, 0.0508, 0.1016));
 #207 = LINE('NONE', #206, #205);
 #208 = DIRECTION('NONE', (-1, 0, 0));
-#209 = VECTOR('NONE', #208, 0.08889999999999999);
+#209 = VECTOR('NONE', #208, 1);
 #210 = CARTESIAN_POINT('NONE', (0.08889999999999999, 0.0254, -0));
 #211 = LINE('NONE', #210, #209);
 #212 = DIRECTION('NONE', (0, 0, 1));
-#213 = VECTOR('NONE', #212, 0.1016);
+#213 = VECTOR('NONE', #212, 1);
 #214 = CARTESIAN_POINT('NONE', (0, 0.0254, -0));
 #215 = LINE('NONE', #214, #213);
 #216 = DIRECTION('NONE', (-1, 0, 0));
-#217 = VECTOR('NONE', #216, 0.08889999999999999);
+#217 = VECTOR('NONE', #216, 1);
 #218 = CARTESIAN_POINT('NONE', (0.08889999999999999, 0.0254, 0.1016));
 #219 = LINE('NONE', #218, #217);
 #220 = DIRECTION('NONE', (0, -1, 0));
-#221 = VECTOR('NONE', #220, 0.0254);
+#221 = VECTOR('NONE', #220, 1);
 #222 = CARTESIAN_POINT('NONE', (0, 0.0254, -0));
 #223 = LINE('NONE', #222, #221);
 #224 = DIRECTION('NONE', (0, -1, 0));
-#225 = VECTOR('NONE', #224, 0.0254);
+#225 = VECTOR('NONE', #224, 1);
 #226 = CARTESIAN_POINT('NONE', (0, 0.0254, 0.1016));
 #227 = LINE('NONE', #226, #225);
 #228 = EDGE_CURVE('NONE', #5, #7, #63, .T.);

e2e/playwright/flow-tests.spec.ts

@@ -643,7 +643,11 @@ test('Command bar works and can change a setting', async ({ page }) => {
   let cmdSearchBar = page.getByPlaceholder('Search commands')
 
   // First try opening the command bar and closing it
-  await page.getByRole('button', { name: '⌘K' }).click()
+  // It has a different label on mac and windows/linux, "Meta+K" and "Ctrl+/" respectively
+  await page
+    .getByRole('button', { name: 'Ctrl+/' })
+    .or(page.getByRole('button', { name: '⌘K' }))
+    .click()
   await expect(cmdSearchBar).toBeVisible()
   await page.keyboard.press('Escape')
   await expect(cmdSearchBar).not.toBeVisible()
@@ -658,12 +662,12 @@ test('Command bar works and can change a setting', async ({ page }) => {
   const themeOption = page.getByRole('option', { name: 'Set Theme' })
   await expect(themeOption).toBeVisible()
   await themeOption.click()
-  const themeInput = page.getByPlaceholder(Themes.System)
+  const themeInput = page.getByPlaceholder('Select an option')
   await expect(themeInput).toBeVisible()
   await expect(themeInput).toBeFocused()
   // Select dark theme
   await page.keyboard.press('ArrowDown')
-  await page.keyboard.press('ArrowUp')
+  await page.keyboard.press('ArrowDown')
   await expect(page.getByRole('option', { name: Themes.Dark })).toHaveAttribute(
     'data-headlessui-state',
     'active'
@@ -675,3 +679,59 @@ test('Command bar works and can change a setting', async ({ page }) => {
   // Check that the theme changed
   await expect(page.locator('body')).toHaveClass(`body-bg ${Themes.Dark}`)
 })
+
+test('Can extrude from the command bar', async ({ page, context }) => {
+  await context.addInitScript(async (token) => {
+    localStorage.setItem(
+      'persistCode',
+      `const part001 = startSketchOn('-XZ')
+    |> startProfileAt([-6.95, 4.98], %)
+    |> line([25.1, 0.41], %)
+    |> line([0.73, -14.93], %)
+    |> line([-23.44, 0.52], %)
+    |> close(%)`
+    )
+  })
+
+  const u = getUtils(page)
+  await page.setViewportSize({ width: 1200, height: 500 })
+  await page.goto('/')
+  await u.waitForAuthSkipAppStart()
+
+  let cmdSearchBar = page.getByPlaceholder('Search commands')
+  await page.keyboard.press('Meta+K')
+  await expect(cmdSearchBar).toBeVisible()
+
+  // Search for extrude command and choose it
+  await page.getByRole('option', { name: 'Extrude' }).click()
+  await expect(page.locator('#arg-form > label')).toContainText(
+    'Please select one face'
+  )
+  await expect(page.getByRole('button', { name: 'selection' })).toBeDisabled()
+
+  // Click to select face and set distance
+  await u.openAndClearDebugPanel()
+  await page.getByText('|> startProfileAt([-6.95, 4.98], %)').click()
+  await u.waitForCmdReceive('select_add')
+  await u.closeDebugPanel()
+  await page.getByRole('button', { name: 'Continue' }).click()
+  await expect(page.getByRole('button', { name: 'distance' })).toBeDisabled()
+  await page.keyboard.press('Enter')
+
+  // Review step and argument hotkeys
+  await page.keyboard.press('2')
+  await expect(page.getByRole('button', { name: '5' })).toBeDisabled()
+  await page.keyboard.press('Enter')
+
+  // Check that the code was updated
+  await page.keyboard.press('Enter')
+  await expect(page.locator('.cm-content')).toHaveText(
+    `const part001 = startSketchOn('-XZ')
+    |> startProfileAt([-6.95, 4.98], %)
+    |> line([25.1, 0.41], %)
+    |> line([0.73, -14.93], %)
+    |> line([-23.44, 0.52], %)
+    |> close(%)
+    |> extrude(5, %)`
+  )
+})

e2e/playwright/secrets.ts

@@ -14,6 +14,7 @@ try {
 } catch (err) {
   // probably running in CI
   secrets.token = process.env.token || ''
+  secrets.snapshottoken = process.env.snapshottoken || ''
   // add more env vars here to make them available in CI
 }
 

e2e/playwright/snapshot-tests.spec.ts

@@ -5,6 +5,8 @@ import { v4 as uuidv4 } from 'uuid'
 import { getUtils } from './test-utils'
 import { Models } from '@kittycad/lib'
 import fsp from 'fs/promises'
+import { spawn } from 'child_process'
+import { APP_NAME } from 'lib/constants'
 
 test.beforeEach(async ({ context, page }) => {
   await context.addInitScript(async (token) => {
@@ -137,6 +139,7 @@ test('change camera, show planes', async ({ page, context }) => {
 
 test('exports of each format should work', async ({ page, context }) => {
   // FYI this test doesn't work with only engine running locally
+  // And you will need to have the KittyCAD CLI installed
   const u = getUtils(page)
   await context.addInitScript(async () => {
     ;(window as any).playwrightSkipFilePicker = true
@@ -194,9 +197,16 @@ const part001 = startSketchOn('-XZ')
   await page.waitForTimeout(1000)
   await u.clearAndCloseDebugPanel()
 
-  await page.getByRole('button', { name: 'KittyCAD Modeling App' }).click()
+  await page.getByRole('button', { name: APP_NAME }).click()
 
-  const doExport = async (output: Models['OutputFormat_type']) => {
+  interface Paths {
+    modelPath: string
+    imagePath: string
+    outputType: string
+  }
+  const doExport = async (
+    output: Models['OutputFormat_type']
+  ): Promise<Paths> => {
     await page.getByRole('button', { name: 'Export Model' }).click()
 
     const exportSelect = page.getByTestId('export-type')
@@ -210,10 +220,10 @@ const part001 = startSketchOn('-XZ')
     const downloadPromise = page.waitForEvent('download')
     await page.getByRole('button', { name: 'Export', exact: true }).click()
     const download = await downloadPromise
-    const downloadLocationer = (extra = '') =>
+    const downloadLocationer = (extra = '', isImage = false) =>
       `./e2e/playwright/export-snapshots/${output.type}-${
         'storage' in output ? output.storage : ''
-      }${extra}.${output.type}`
+      }${extra}.${isImage ? 'png' : output.type}`
     const downloadLocation = downloadLocationer()
     const downloadLocation2 = downloadLocationer('-2')
 
@@ -249,6 +259,11 @@ const part001 = startSketchOn('-XZ')
       )
       await fsp.writeFile(downloadLocation, newFileContents)
     }
+    return {
+      modelPath: downloadLocation,
+      imagePath: downloadLocationer('', true),
+      outputType: output.type,
+    }
   }
   const axisDirectionPair: Models['AxisDirectionPair_type'] = {
     axis: 'z',
@@ -258,67 +273,116 @@ const part001 = startSketchOn('-XZ')
     forward: axisDirectionPair,
     up: axisDirectionPair,
   }
+
+  const exportLocations: Paths[] = []
+
   // NOTE it was easiest to leverage existing types and have doExport take Models['OutputFormat_type'] as in input
   // just note that only `type` and `storage` are used for selecting the drop downs is the app
   // the rest are only there to make typescript happy
-  await doExport({
-    type: 'step',
-    coords: sysType,
-  })
-  await doExport({
-    type: 'gltf',
-    storage: 'embedded',
-    presentation: 'pretty',
-  })
-  await doExport({
-    type: 'gltf',
-    storage: 'binary',
-    presentation: 'pretty',
-  })
+  exportLocations.push(
+    await doExport({
+      type: 'step',
+      coords: sysType,
+    })
+  )
+  exportLocations.push(
+    await doExport({
+      type: 'ply',
+      coords: sysType,
+      selection: { type: 'default_scene' },
+      storage: 'ascii',
+      units: 'in',
+    })
+  )
+  exportLocations.push(
+    await doExport({
+      type: 'ply',
+      storage: 'binary_little_endian',
+      coords: sysType,
+      selection: { type: 'default_scene' },
+      units: 'in',
+    })
+  )
+  exportLocations.push(
+    await doExport({
+      type: 'ply',
+      storage: 'binary_big_endian',
+      coords: sysType,
+      selection: { type: 'default_scene' },
+      units: 'in',
+    })
+  )
+  exportLocations.push(
+    await doExport({
+      type: 'stl',
+      storage: 'ascii',
+      coords: sysType,
+      units: 'in',
+      selection: { type: 'default_scene' },
+    })
+  )
+  exportLocations.push(
+    await doExport({
+      type: 'stl',
+      storage: 'binary',
+      coords: sysType,
+      units: 'in',
+      selection: { type: 'default_scene' },
+    })
+  )
+  exportLocations.push(
+    await doExport({
+      // obj seems to be a little flaky, times out tests sometimes
+      type: 'obj',
+      coords: sysType,
+      units: 'in',
+    })
+  )
+  exportLocations.push(
+    await doExport({
+      type: 'gltf',
+      storage: 'embedded',
+      presentation: 'pretty',
+    })
+  )
+  exportLocations.push(
+    await doExport({
+      type: 'gltf',
+      storage: 'binary',
+      presentation: 'pretty',
+    })
+  )
+
+  // TODO: gltfs don't seem to work with snap shots. push onto exportLocations once it's figured out
   await doExport({
     type: 'gltf',
     storage: 'standard',
     presentation: 'pretty',
   })
-  await doExport({
-    type: 'ply',
-    coords: sysType,
-    selection: { type: 'default_scene' },
-    storage: 'ascii',
-    units: 'in',
-  })
-  await doExport({
-    type: 'ply',
-    storage: 'binary_little_endian',
-    coords: sysType,
-    selection: { type: 'default_scene' },
-    units: 'in',
-  })
-  await doExport({
-    type: 'ply',
-    storage: 'binary_big_endian',
-    coords: sysType,
-    selection: { type: 'default_scene' },
-    units: 'in',
-  })
-  await doExport({
-    type: 'stl',
-    storage: 'ascii',
-    coords: sysType,
-    units: 'in',
-    selection: { type: 'default_scene' },
-  })
-  await doExport({
-    type: 'stl',
-    storage: 'binary',
-    coords: sysType,
-    units: 'in',
-    selection: { type: 'default_scene' },
-  })
-  await doExport({
-    // obj seems to be a little flaky, times out tests sometimes
-    type: 'obj',
-    coords: sysType,
-    units: 'in',
-  })
+
+  // close page to disconnect websocket since we can only have one open atm
+  await page.close()
+
+  // snapshot exports, good compromise to capture that exports are healthy without getting bogged down in "did the formatting change" changes
+  // context: https://github.com/KittyCAD/modeling-app/issues/1222
+  for (const { modelPath, imagePath, outputType } of exportLocations) {
+    const cliCommand = `export KITTYCAD_TOKEN=${secrets.snapshottoken} && kittycad file snapshot --output-format=png --src-format=${outputType} ${modelPath} ${imagePath}`
+    const child = spawn(cliCommand, { shell: true })
+    await new Promise((resolve, reject) => {
+      child.on('error', (code: any, msg: any) => {
+        console.log('error', code, msg)
+        reject()
+      })
+      child.on('exit', (code, msg) => {
+        console.log('exit', code, msg)
+        if (code !== 0) {
+          reject(`exit code ${code} for model ${modelPath}`)
+        } else {
+          resolve(true)
+        }
+      })
+      child.stderr.on('data', (data) => console.log(`stderr: ${data}`))
+      child.stdout.on('data', (data) => console.log(`stdout: ${data}`))
+    })
+  }
 })

index.html

@@ -7,12 +7,12 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="An open-source CAD modeling tool from the future by KittyCAD."
+      content="An open-source CAD modeling tool from the future by Zoo."
     />
     <link rel="apple-touch-icon" href="/logo192.png" />
     <link rel="manifest" href="/manifest.json" />
     <script defer data-domain="app.kittycad.io" src="https://plausible.corp.kittycad.io/js/script.js"></script>
-    <title>KittyCAD Modeling App</title>
+    <title>Modeling App</title>
   </head>
   <body class="body-bg">
     <noscript>You need to enable JavaScript to run this app.</noscript>

package.json

@@ -60,6 +60,7 @@
   },
   "scripts": {
     "start": "vite",
+    "start:prod": "vite preview --port=3000",
     "serve": "vite serve --port=3000",
     "build": "curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y && source \"$HOME/.cargo/env\" && curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -y && yarn build:wasm && vite build",
     "build:local": "vite build",

public/roadmap.md

@@ -1,4 +1,4 @@
-## KittyCAD Modeling App Roadmap
+## Zoo 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. 
 

public/zoo-logo.svg

@@ -0,0 +1,7 @@
+<svg width="438" height="145" viewBox="0 0 438 145" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M88.2136 25.3021V3.12744H0.595269V34.3994H79.827L0.609484 120.312H0.595269V120.326L0.581055 120.34L0.595269 120.355V141.364H20.8936L41.3341 119.189V141.364H128.952V110.092H49.7349L128.952 24.1649V3.12744L108.64 3.15587L88.2136 25.3021Z" fill="white"/>
+<path d="M167.36 72.4372C167.36 49.7366 185.824 31.2719 208.525 31.2719C216.514 31.2719 223.976 33.5605 230.288 37.5121L251.78 14.3709C239.698 5.34466 224.73 0 208.525 0C168.582 0 136.088 32.4944 136.088 72.4372C136.088 90.5465 142.769 107.135 153.828 119.857L175.32 96.7156C170.316 89.9069 167.36 81.5061 167.36 72.4372Z" fill="white"/>
+<path d="M241.745 48.1442C246.734 54.9671 249.691 63.3679 249.691 72.4368C249.691 95.1232 231.226 113.588 208.525 113.588C200.537 113.588 193.088 111.299 186.777 107.348L165.271 130.503C177.353 139.515 192.321 144.86 208.525 144.86C248.468 144.86 280.963 112.365 280.963 72.4368C280.963 54.3133 274.282 37.7249 263.223 25.0029L241.745 48.1442Z" fill="white"/>
+<path d="M419.312 25.0029L397.834 48.1442C402.823 54.9671 405.779 63.3679 405.779 72.4368C405.779 95.1232 387.315 113.588 364.614 113.588C356.626 113.588 349.177 111.299 342.866 107.348L321.359 130.503C333.442 139.515 348.41 144.86 364.614 144.86C404.557 144.86 437.051 112.365 437.051 72.4368C437.051 54.3133 430.371 37.7249 419.312 25.0029Z" fill="white"/>
+<path d="M323.449 72.4372C323.449 49.7366 341.913 31.2719 364.614 31.2719C372.603 31.2719 380.065 33.5605 386.376 37.5121L407.869 14.3709C395.786 5.34466 380.819 0 364.614 0C324.671 0 292.177 32.4944 292.177 72.4372C292.177 90.5465 298.858 107.135 309.916 119.857L331.409 96.7156C326.405 89.9069 323.449 81.5061 323.449 72.4372Z" fill="white"/>
+</svg>

src-tauri/Cargo.lock

@@ -547,12 +547,12 @@ dependencies = [
 
 [[package]]
 name = "ctor"
-version = "0.1.26"
+version = "0.2.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6d2301688392eb071b0bf1a37be05c469d3cc4dbbd95df672fe28ab021e6a096"
+checksum = "30d2b3721e861707777e3195b0158f950ae6dc4a27e4d02ff9f67e3eb3de199e"
 dependencies = [
  "quote",
- "syn 1.0.109",
+ "syn 2.0.33",
 ]
 
 [[package]]
@@ -1530,9 +1530,9 @@ dependencies = [
 
 [[package]]
 name = "infer"
-version = "0.12.0"
+version = "0.13.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a898e4b7951673fce96614ce5751d13c40fc5674bc2d759288e46c3ab62598b3"
+checksum = "f551f8c3a39f68f986517db0d1759de85881894fdc7db798bd2a9df9cb04b7fc"
 dependencies = [
  "cfb",
 ]
@@ -1652,9 +1652,9 @@ dependencies = [
 
 [[package]]
 name = "json-patch"
-version = "1.0.0"
+version = "1.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1f54898088ccb91df1b492cc80029a6fdf1c48ca0db7c6822a8babad69c94658"
+checksum = "55ff1e1486799e3f64129f8ccad108b38290df9cd7015cd31bed17239f0789d6"
 dependencies = [
  "serde",
  "serde_json",
@@ -2194,11 +2194,11 @@ dependencies = [
 
 [[package]]
 name = "openssl"
-version = "0.10.55"
+version = "0.10.61"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "345df152bc43501c5eb9e4654ff05f794effb78d4efe3d53abc158baddc0703d"
+checksum = "6b8419dc8cc6d866deb801274bba2e6f8f6108c1bb7fcc10ee5ab864931dbb45"
 dependencies = [
- "bitflags 1.3.2",
+ "bitflags 2.4.0",
  "cfg-if",
  "foreign-types",
  "libc",
@@ -2226,9 +2226,9 @@ checksum = "ff011a302c396a5197692431fc1948019154afc178baf7d8e37367442a4601cf"
 
 [[package]]
 name = "openssl-sys"
-version = "0.9.90"
+version = "0.9.97"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "374533b0e45f3a7ced10fcaeccca020e66656bc03dac384f852e4e5a7a8104a6"
+checksum = "c3eaad34cdd97d81de97964fc7f29e2d104f483840d906ef56daa1912338460b"
 dependencies = [
  "cc",
  "libc",
@@ -2400,9 +2400,17 @@ version = "0.10.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "fabbf1ead8a5bcbc20f5f8b939ee3f5b0f6f281b6ad3468b84656b658b455259"
 dependencies = [
- "phf_macros 0.10.0",
  "phf_shared 0.10.0",
- "proc-macro-hack",
+]
+
+[[package]]
+name = "phf"
+version = "0.11.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ade2d8b8f33c7333b51bcf0428d37e217e9f32192ae4772156f65063b8ce03dc"
+dependencies = [
+ "phf_macros 0.11.2",
+ "phf_shared 0.11.2",
 ]
 
 [[package]]
@@ -2445,6 +2453,16 @@ dependencies = [
  "rand 0.8.5",
 ]
 
+[[package]]
+name = "phf_generator"
+version = "0.11.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "48e4cc64c2ad9ebe670cb8fd69dd50ae301650392e81c05f9bfcb2d5bdbc24b0"
+dependencies = [
+ "phf_shared 0.11.2",
+ "rand 0.8.5",
+]
+
 [[package]]
 name = "phf_macros"
 version = "0.8.0"
@@ -2461,16 +2479,15 @@ dependencies = [
 
 [[package]]
 name = "phf_macros"
-version = "0.10.0"
+version = "0.11.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "58fdf3184dd560f160dd73922bea2d5cd6e8f064bf4b13110abd81b03697b4e0"
+checksum = "3444646e286606587e49f3bcf1679b8cef1dc2c5ecc29ddacaffc305180d464b"
 dependencies = [
- "phf_generator 0.10.0",
- "phf_shared 0.10.0",
- "proc-macro-hack",
+ "phf_generator 0.11.2",
+ "phf_shared 0.11.2",
  "proc-macro2",
  "quote",
- "syn 1.0.109",
+ "syn 2.0.33",
 ]
 
 [[package]]
@@ -2491,6 +2508,15 @@ dependencies = [
  "siphasher",
 ]
 
+[[package]]
+name = "phf_shared"
+version = "0.11.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "90fcb95eef784c2ac79119d1dd819e162b5da872ce6f3c3abe1e8ca1c082f72b"
+dependencies = [
+ "siphasher",
+]
+
 [[package]]
 name = "phonenumber"
 version = "0.3.3+8.13.9"
@@ -3734,9 +3760,9 @@ dependencies = [
 
 [[package]]
 name = "tauri"
-version = "1.5.2"
+version = "1.5.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9bfe673cf125ef364d6f56b15e8ce7537d9ca7e4dae1cf6fbbdeed2e024db3d9"
+checksum = "32d563b672acde8d0cc4c1b1f5b855976923f67e8d6fe1eba51df0211e197be2"
 dependencies = [
  "anyhow",
  "bytes",
@@ -3831,9 +3857,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-macros"
-version = "1.4.1"
+version = "1.4.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "613740228de92d9196b795ac455091d3a5fbdac2654abb8bb07d010b62ab43af"
+checksum = "acea6445eececebd72ed7720cfcca46eee3b5bad8eb408be8f7ef2e3f7411500"
 dependencies = [
  "heck 0.4.1",
  "proc-macro2",
@@ -3878,9 +3904,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-runtime-wry"
-version = "0.14.1"
+version = "0.14.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8141d72b6b65f2008911e9ef5b98a68d1e3413b7a1464e8f85eb3673bb19a895"
+checksum = "803a01101bc611ba03e13329951a1bde44287a54234189b9024b78619c1bc206"
 dependencies = [
  "cocoa",
  "gtk",
@@ -3898,9 +3924,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-utils"
-version = "1.5.0"
+version = "1.5.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "34d55e185904a84a419308d523c2c6891d5e2dbcee740c4997eb42e75a7b0f46"
+checksum = "a52165bb340e6f6a75f1f5eeeab1bb49f861c12abe3a176067d53642b5454986"
 dependencies = [
  "brotli",
  "ctor",
@@ -3913,7 +3939,7 @@ dependencies = [
  "kuchikiki",
  "log",
  "memchr",
- "phf 0.10.1",
+ "phf 0.11.2",
  "proc-macro2",
  "quote",
  "semver",
@@ -3923,7 +3949,7 @@ dependencies = [
  "thiserror",
  "url",
  "walkdir",
- "windows 0.39.0",
+ "windows-version",
 ]
 
 [[package]]
@@ -4747,12 +4773,36 @@ dependencies = [
  "windows_x86_64_msvc 0.48.0",
 ]
 
+[[package]]
+name = "windows-targets"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8a18201040b24831fbb9e4eb208f8892e1f50a37feb53cc7ff887feb8f50e7cd"
+dependencies = [
+ "windows_aarch64_gnullvm 0.52.0",
+ "windows_aarch64_msvc 0.52.0",
+ "windows_i686_gnu 0.52.0",
+ "windows_i686_msvc 0.52.0",
+ "windows_x86_64_gnu 0.52.0",
+ "windows_x86_64_gnullvm 0.52.0",
+ "windows_x86_64_msvc 0.52.0",
+]
+
 [[package]]
 name = "windows-tokens"
 version = "0.39.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f838de2fe15fe6bac988e74b798f26499a8b21a9d97edec321e79b28d1d7f597"
 
+[[package]]
+name = "windows-version"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "75aa004c988e080ad34aff5739c39d0312f4684699d6d71fc8a198d057b8b9b4"
+dependencies = [
+ "windows-targets 0.52.0",
+]
+
 [[package]]
 name = "windows_aarch64_gnullvm"
 version = "0.42.2"
@@ -4765,6 +4815,12 @@ version = "0.48.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "91ae572e1b79dba883e0d315474df7305d12f569b400fcf90581b06062f7e1bc"
 
+[[package]]
+name = "windows_aarch64_gnullvm"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cb7764e35d4db8a7921e09562a0304bf2f93e0a51bfccee0bd0bb0b666b015ea"
+
 [[package]]
 name = "windows_aarch64_msvc"
 version = "0.37.0"
@@ -4789,6 +4845,12 @@ version = "0.48.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b2ef27e0d7bdfcfc7b868b317c1d32c641a6fe4629c171b8928c7b08d98d7cf3"
 
+[[package]]
+name = "windows_aarch64_msvc"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bbaa0368d4f1d2aaefc55b6fcfee13f41544ddf36801e793edbbfd7d7df075ef"
+
 [[package]]
 name = "windows_i686_gnu"
 version = "0.37.0"
@@ -4813,6 +4875,12 @@ version = "0.48.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "622a1962a7db830d6fd0a69683c80a18fda201879f0f447f065a3b7467daa241"
 
+[[package]]
+name = "windows_i686_gnu"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a28637cb1fa3560a16915793afb20081aba2c92ee8af57b4d5f28e4b3e7df313"
+
 [[package]]
 name = "windows_i686_msvc"
 version = "0.37.0"
@@ -4837,6 +4905,12 @@ version = "0.48.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4542c6e364ce21bf45d69fdd2a8e455fa38d316158cfd43b3ac1c5b1b19f8e00"
 
+[[package]]
+name = "windows_i686_msvc"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ffe5e8e31046ce6230cc7215707b816e339ff4d4d67c65dffa206fd0f7aa7b9a"
+
 [[package]]
 name = "windows_x86_64_gnu"
 version = "0.37.0"
@@ -4861,6 +4935,12 @@ version = "0.48.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ca2b8a661f7628cbd23440e50b05d705db3686f894fc9580820623656af974b1"
 
+[[package]]
+name = "windows_x86_64_gnu"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3d6fa32db2bc4a2f5abeacf2b69f7992cd09dca97498da74a151a3132c26befd"
+
 [[package]]
 name = "windows_x86_64_gnullvm"
 version = "0.42.2"
@@ -4873,6 +4953,12 @@ version = "0.48.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7896dbc1f41e08872e9d5e8f8baa8fdd2677f29468c4e156210174edc7f7b953"
 
+[[package]]
+name = "windows_x86_64_gnullvm"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1a657e1e9d3f514745a572a6846d3c7aa7dbe1658c056ed9c3344c4109a6949e"
+
 [[package]]
 name = "windows_x86_64_msvc"
 version = "0.37.0"
@@ -4897,6 +4983,12 @@ version = "0.48.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1a515f5799fe4961cb532f983ce2b23082366b898e52ffbce459c86f67c8378a"
 
+[[package]]
+name = "windows_x86_64_msvc"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dff9641d1cd4be8d1a070daf9e3773c5f67e78b4d9d42263020c057706765c04"
+
 [[package]]
 name = "winnow"
 version = "0.5.15"
@@ -4928,9 +5020,9 @@ dependencies = [
 
 [[package]]
 name = "wry"
-version = "0.24.4"
+version = "0.24.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "88ef04bdad49eba2e01f06e53688c8413bd6a87b0bc14b72284465cf96e3578e"
+checksum = "64a70547e8f9d85da0f5af609143f7bde3ac7457a6e1073104d9b73d6c5ac744"
 dependencies = [
  "base64 0.13.1",
  "block",

src-tauri/Cargo.toml

@@ -20,7 +20,7 @@ kittycad = "0.2.42"
 oauth2 = "4.4.2"
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
-tauri = { version = "1.5.2", features = [ "os-all", "dialog-all", "fs-all", "http-request", "path-all", "shell-open", "shell-open-api", "devtools"] }
+tauri = { version = "1.5.3", features = [ "os-all", "dialog-all", "fs-all", "http-request", "path-all", "shell-open", "shell-open-api", "devtools"] }
 tauri-plugin-fs-extra = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 tokio = { version = "1.34.0", features = ["time"] }
 toml = "0.8.2"

src-tauri/src/main.rs

@@ -76,16 +76,13 @@ async fn login(app: tauri::AppHandle, host: &str) -> Result<String, InvokeError>
     // Here we're using an env var to enable the /tmp file (windows not supported for now)
     // and bypass the shell::open call as it fails on GitHub Actions.
     let e2e_tauri_enabled = env::var("E2E_TAURI_ENABLED").is_ok();
-    if (e2e_tauri_enabled) {
+    if e2e_tauri_enabled {
         println!(
             "E2E_TAURI_ENABLED is set, won't open {} externally",
             auth_uri.secret()
         );
-        fs::write(
-            "/tmp/kittycad_user_code",
-            details.user_code().secret().to_string(),
-        )
-        .expect("Unable to write /tmp/kittycad_user_code file");
+        fs::write("/tmp/kittycad_user_code", details.user_code().secret())
+            .expect("Unable to write /tmp/kittycad_user_code file");
     } else {
         tauri::api::shell::open(&app.shell_scope(), auth_uri.secret(), None)
             .map_err(|e| InvokeError::from_anyhow(e.into()))?;

src/App.test.tsx

@@ -8,7 +8,7 @@ import {
   createRoutesFromElements,
 } from 'react-router-dom'
 import { GlobalStateProvider } from './components/GlobalStateProvider'
-import CommandBarProvider from 'components/CommandBar'
+import CommandBarProvider from 'components/CommandBar/CommandBar'
 import ModelingMachineProvider from 'components/ModelingMachineProvider'
 import { BROWSER_FILE_NAME } from 'Router'
 

src/App.tsx

@@ -172,11 +172,8 @@ export function App() {
       <ModalContainer />
       <Resizable
         className={
-          'h-full flex flex-col flex-1 z-10 my-5 ml-5 pr-1 transition-opacity transition-duration-75 ' +
-          (buttonDownInStream || onboardingStatus === 'camera'
-            ? ' pointer-events-none '
-            : ' ') +
-          paneOpacity
+          'pointer-events-none h-full flex flex-col flex-1 z-10 my-5 ml-5 pr-1 transition-opacity transition-duration-75 ' +
+          +paneOpacity
         }
         defaultSize={{
           width: '550px',
@@ -188,10 +185,16 @@ export function App() {
         maxHeight={'auto'}
         handleClasses={{
           right:
-            'hover:bg-liquid-30/40 dark:hover:bg-liquid-10/40 bg-transparent transition-colors duration-100 transition-ease-out delay-100',
+            'hover:bg-chalkboard-10/50 bg-transparent transition-colors duration-75 transition-ease-out delay-100 ' +
+            (buttonDownInStream || onboardingStatus === 'camera'
+              ? 'pointer-events-none '
+              : 'pointer-events-auto'),
         }}
       >
-        <div id="code-pane" className="h-full flex flex-col justify-between">
+        <div
+          id="code-pane"
+          className="h-full flex flex-col justify-between pointer-events-none"
+        >
           <CollapsiblePanel
             title="Code"
             icon={faCode}

src/Auth.tsx

@@ -8,7 +8,7 @@ export const Auth = ({ children }: React.PropsWithChildren) => {
 
   return isLoggingIn ? (
     <Loading>
-      <span data-testid="initial-load">Loading KittyCAD Modeling App...</span>
+      <span data-testid="initial-load">Loading Modeling App...</span>
     </Loading>
   ) : (
     <>{children}</>

src/Router.tsx

@@ -38,7 +38,7 @@ import {
   settingsMachine,
 } from './machines/settingsMachine'
 import { ContextFrom } from 'xstate'
-import CommandBarProvider from 'components/CommandBar'
+import CommandBarProvider from 'components/CommandBar/CommandBar'
 import { TEST, VITE_KC_SENTRY_DSN } from './env'
 import * as Sentry from '@sentry/react'
 import ModelingMachineProvider from 'components/ModelingMachineProvider'

src/Toolbar.tsx

@@ -4,9 +4,11 @@ import { engineCommandManager } from './lang/std/engineConnection'
 import { useModelingContext } from 'hooks/useModelingContext'
 import { useCommandsContext } from 'hooks/useCommandsContext'
 import { ActionButton } from 'components/ActionButton'
+import usePlatform from 'hooks/usePlatform'
 
 export const Toolbar = () => {
-  const { setCommandBarOpen } = useCommandsContext()
+  const platform = usePlatform()
+  const { commandBarSend } = useCommandsContext()
   const { state, send, context } = useModelingContext()
   const toolbarButtonsRef = useRef<HTMLUListElement>(null)
   const bgClassName =
@@ -177,10 +179,15 @@ export const Toolbar = () => {
             <ActionButton
               Element="button"
               className="text-sm"
-              onClick={() => send('extrude intent')}
-              disabled={!state.can('extrude intent')}
+              onClick={() =>
+                commandBarSend({
+                  type: 'Find and select command',
+                  data: { name: 'Extrude', ownerMachine: 'modeling' },
+                })
+              }
+              disabled={!state.can('Extrude')}
               title={
-                state.can('extrude intent')
+                state.can('Extrude')
                   ? 'extrude'
                   : 'sketches need to be closed, or not already extruded'
               }
@@ -204,10 +211,10 @@ export const Toolbar = () => {
       </menu>
       <ActionButton
         Element="button"
-        onClick={() => setCommandBarOpen(true)}
+        onClick={() => commandBarSend({ type: 'Open' })}
         className="rounded-r-full pr-4 self-stretch border-energy-10 hover:border-energy-10 dark:border-chalkboard-80 bg-energy-10/50 hover:bg-energy-10 dark:bg-chalkboard-80 dark:text-energy-10"
       >
-        ⌘K
+        {platform === 'darwin' ? '⌘K' : 'Ctrl+/'}
       </ActionButton>
     </div>
   )

src/components/AppHeader.tsx

@@ -7,6 +7,7 @@ import styles from './AppHeader.module.css'
 import { NetworkHealthIndicator } from './NetworkHealthIndicator'
 import { useCommandsContext } from 'hooks/useCommandsContext'
 import { ActionButton } from './ActionButton'
+import usePlatform from 'hooks/usePlatform'
 
 interface AppHeaderProps extends React.PropsWithChildren {
   showToolbar?: boolean
@@ -22,7 +23,8 @@ export const AppHeader = ({
   className = '',
   enableMenu = false,
 }: AppHeaderProps) => {
-  const { setCommandBarOpen } = useCommandsContext()
+  const platform = usePlatform()
+  const { commandBarSend } = useCommandsContext()
   const { auth } = useGlobalStateContext()
   const user = auth?.context?.user
 
@@ -31,7 +33,7 @@ export const AppHeader = ({
       className={
         'w-full grid ' +
         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 ' +
+        ' overlaid-panes sticky top-0 z-20 py-1 px-2 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
       }
     >
@@ -47,12 +49,12 @@ export const AppHeader = ({
         ) : (
           <ActionButton
             Element="button"
-            onClick={() => setCommandBarOpen(true)}
+            onClick={() => commandBarSend({ type: 'Open' })}
             className="text-sm self-center flex items-center w-fit gap-3"
           >
             Command Palette{' '}
             <kbd className="bg-energy-10/50 dark:bg-chalkboard-100 dark:text-energy-10 inline-block px-1 py-0.5 border-energy-10 dark:border-chalkboard-90">
-              ⌘K
+              {platform === 'darwin' ? '⌘K' : 'Ctrl+/'}
             </kbd>
           </ActionButton>
         )}

src/components/CollapsiblePanel.tsx

@@ -24,13 +24,13 @@ export const PanelHeader = ({
 }: CollapsiblePanelProps) => {
   return (
     <summary className={styles.header}>
-      <div className="flex gap-2 align-center items-center flex-1">
+      <div className="flex gap-2 items-center flex-1">
         <ActionIcon
           icon={icon}
           className="p-1"
           size="sm"
           bgClassName={
-            'dark:!bg-chalkboard-100 group-open:bg-chalkboard-80 dark:group-open:!bg-chalkboard-90 group-open:border dark:group-open:border-chalkboard-60 rounded-sm ' +
+            'dark:!bg-chalkboard-100 group-open:bg-chalkboard-80 dark:group-open:!bg-chalkboard-90 border border-transparent dark:group-open:border-chalkboard-60 rounded-sm ' +
             (iconClassNames?.bg || '')
           }
           iconClassName={
@@ -60,7 +60,9 @@ export const CollapsiblePanel = ({
     <details
       {...props}
       data-testid={detailsTestId}
-      className={styles.panel + ' group ' + (className || '')}
+      className={
+        styles.panel + ' pointer-events-auto group ' + (className || '')
+      }
     >
       <PanelHeader
         title={title}

src/components/CommandBar.tsx

@@ -1,404 +0,0 @@
-import { Combobox, Dialog, Transition } from '@headlessui/react'
-import {
-  Dispatch,
-  Fragment,
-  SetStateAction,
-  createContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
-import { useHotkeys } from 'react-hotkeys-hook'
-import Fuse from 'fuse.js'
-import {
-  Command,
-  CommandArgument,
-  CommandArgumentOption,
-} from '../lib/commands'
-import { useCommandsContext } from 'hooks/useCommandsContext'
-import { CustomIcon } from './CustomIcon'
-
-type ComboboxOption = Command | CommandArgumentOption
-type CommandArgumentData = [string, any]
-
-export const CommandsContext = createContext(
-  {} as {
-    commands: Command[]
-    addCommands: (commands: Command[]) => void
-    removeCommands: (commands: Command[]) => void
-    commandBarOpen: boolean
-    setCommandBarOpen: Dispatch<SetStateAction<boolean>>
-  }
-)
-
-export const CommandBarProvider = ({
-  children,
-}: {
-  children: React.ReactNode
-}) => {
-  const [commands, internalSetCommands] = useState([] as Command[])
-  const [commandBarOpen, setCommandBarOpen] = useState(false)
-
-  function sortCommands(a: Command, b: Command) {
-    if (b.owner === 'auth') return -1
-    if (a.owner === 'auth') return 1
-    return a.name.localeCompare(b.name)
-  }
-
-  useEffect(() => console.log('commands updated', commands), [commands])
-
-  const addCommands = (newCommands: Command[]) => {
-    internalSetCommands((prevCommands) =>
-      [...newCommands, ...prevCommands].sort(sortCommands)
-    )
-  }
-  const removeCommands = (newCommands: Command[]) => {
-    internalSetCommands((prevCommands) =>
-      prevCommands
-        .filter((command) => !newCommands.includes(command))
-        .sort(sortCommands)
-    )
-  }
-
-  return (
-    <CommandsContext.Provider
-      value={{
-        commands,
-        addCommands,
-        removeCommands,
-        commandBarOpen,
-        setCommandBarOpen,
-      }}
-    >
-      {children}
-      <CommandBar />
-    </CommandsContext.Provider>
-  )
-}
-
-const CommandBar = () => {
-  const { commands, commandBarOpen, setCommandBarOpen } = useCommandsContext()
-  useHotkeys(['meta+k', 'meta+/'], () => {
-    if (commands?.length === 0) return
-    setCommandBarOpen(!commandBarOpen)
-  })
-
-  const [selectedCommand, setSelectedCommand] = useState<Command>()
-  const [commandArguments, setCommandArguments] = useState<CommandArgument[]>(
-    []
-  )
-  const [commandArgumentData, setCommandArgumentData] = useState<
-    CommandArgumentData[]
-  >([])
-  const [commandArgumentIndex, setCommandArgumentIndex] = useState<number>(0)
-
-  function clearState() {
-    setCommandBarOpen(false)
-    setSelectedCommand(undefined)
-    setCommandArguments([])
-    setCommandArgumentData([])
-    setCommandArgumentIndex(0)
-  }
-
-  function selectCommand(command: Command) {
-    console.log('selecting command', command)
-    if (!('args' in command && command.args?.length)) {
-      submitCommand({ command })
-    } else {
-      setCommandArguments(command.args)
-      setSelectedCommand(command)
-    }
-  }
-
-  function stepBack() {
-    if (!selectedCommand) {
-      clearState()
-    } else {
-      if (commandArgumentIndex === 0) {
-        setSelectedCommand(undefined)
-      } else {
-        setCommandArgumentIndex((prevIndex) => Math.max(0, prevIndex - 1))
-      }
-      if (commandArgumentData.length > 0) {
-        setCommandArgumentData((prevData) => prevData.slice(0, -1))
-      }
-    }
-  }
-
-  function appendCommandArgumentData(data: { name: any }) {
-    const transformedData = [
-      commandArguments[commandArgumentIndex].name,
-      data.name,
-    ]
-    if (commandArgumentIndex + 1 === commandArguments.length) {
-      submitCommand({
-        dataArr: [
-          ...commandArgumentData,
-          transformedData,
-        ] as CommandArgumentData[],
-      })
-    } else {
-      setCommandArgumentData(
-        (prevData) => [...prevData, transformedData] as CommandArgumentData[]
-      )
-      setCommandArgumentIndex((prevIndex) => prevIndex + 1)
-    }
-  }
-
-  function submitCommand({
-    command = selectedCommand,
-    dataArr = commandArgumentData,
-  }) {
-    console.log('submitting command', command, dataArr)
-    if (dataArr.length === 0) {
-      command?.callback()
-    } else {
-      const data = Object.fromEntries(dataArr)
-      console.log('submitting data', data)
-      command?.callback(data)
-    }
-    setCommandBarOpen(false)
-  }
-
-  function getDisplayValue(command: Command) {
-    if (
-      'args' in command &&
-      command.args &&
-      command.args?.length > 0 &&
-      'formatFunction' in command &&
-      command.formatFunction
-    ) {
-      command.formatFunction(
-        command.args.map((c, i) =>
-          commandArgumentData[i] ? commandArgumentData[i][0] : `<${c.name}>`
-        )
-      )
-    }
-
-    return command.name
-  }
-
-  return (
-    <Transition.Root
-      show={commandBarOpen || false}
-      afterLeave={() => clearState()}
-      as={Fragment}
-    >
-      <Dialog
-        onClose={() => {
-          setCommandBarOpen(false)
-        }}
-        className="fixed inset-0 z-40 overflow-y-auto pb-4 pt-1"
-      >
-        <Transition.Child
-          enter="duration-100 ease-out"
-          enterFrom="opacity-0 scale-95"
-          enterTo="opacity-100 scale-100"
-          leave="duration-75 ease-in"
-          leaveFrom="opacity-100 scale-100"
-          leaveTo="opacity-0 scale-95"
-        >
-          <Dialog.Panel
-            className="relative w-full max-w-xl py-2 mx-auto border rounded shadow-lg bg-chalkboard-10 dark:bg-chalkboard-100 dark:border-chalkboard-70"
-            as="div"
-          >
-            {!(
-              commandArguments &&
-              commandArguments.length &&
-              selectedCommand
-            ) ? (
-              <CommandComboBox
-                options={commands}
-                handleSelection={selectCommand}
-                stepBack={stepBack}
-              />
-            ) : (
-              <>
-                <div className="px-4 text-sm flex flex-wrap gap-2">
-                  <p className="pr-4 flex gap-2 items-center">
-                    {selectedCommand &&
-                      'icon' in selectedCommand &&
-                      selectedCommand.icon && (
-                        <CustomIcon
-                          name={selectedCommand.icon}
-                          className="w-5 h-5"
-                        />
-                      )}
-                    {getDisplayValue(selectedCommand)}
-                  </p>
-                  {commandArguments.map((arg, i) => (
-                    <p
-                      key={arg.name}
-                      className={`w-fit px-2 py-1 rounded-sm flex gap-2 items-center border ${
-                        i === commandArgumentIndex
-                          ? 'bg-energy-10/50 dark:bg-energy-10/20 border-energy-10 dark:border-energy-10'
-                          : 'bg-chalkboard-20/50 dark:bg-chalkboard-80/50 border-chalkboard-20 dark:border-chalkboard-80'
-                      }`}
-                    >
-                      {commandArgumentIndex >= i && commandArgumentData[i] ? (
-                        commandArgumentData[i][1]
-                      ) : arg.defaultValue ? (
-                        arg.defaultValue
-                      ) : (
-                        <em>{arg.name}</em>
-                      )}
-                    </p>
-                  ))}
-                </div>
-                <div className="block w-full my-2 h-[1px] bg-chalkboard-20 dark:bg-chalkboard-80" />
-                <Argument
-                  arg={commandArguments[commandArgumentIndex]}
-                  appendCommandArgumentData={appendCommandArgumentData}
-                  stepBack={stepBack}
-                />
-              </>
-            )}
-          </Dialog.Panel>
-        </Transition.Child>
-      </Dialog>
-    </Transition.Root>
-  )
-}
-
-function Argument({
-  arg,
-  appendCommandArgumentData,
-  stepBack,
-}: {
-  arg: CommandArgument
-  appendCommandArgumentData: Dispatch<SetStateAction<any>>
-  stepBack: () => void
-}) {
-  const { setCommandBarOpen } = useCommandsContext()
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus()
-      inputRef.current.select()
-    }
-  }, [arg, inputRef])
-
-  return arg.type === 'select' ? (
-    <CommandComboBox
-      options={arg.options}
-      handleSelection={appendCommandArgumentData}
-      stepBack={stepBack}
-      placeholder="Select an option"
-    />
-  ) : (
-    <form
-      onSubmit={(event) => {
-        event.preventDefault()
-
-        appendCommandArgumentData({ name: inputRef.current?.value })
-      }}
-    >
-      <label className="flex items-center mx-4 my-4">
-        <span className="px-2 py-1 rounded-l bg-chalkboard-100 dark:bg-chalkboard-80 text-chalkboard-10 border-b border-b-chalkboard-100 dark:border-b-chalkboard-80">
-          {arg.name}
-        </span>
-        <input
-          ref={inputRef}
-          className="flex-grow px-2 py-1 border-b border-b-chalkboard-100 dark:border-b-chalkboard-80 !bg-transparent focus:outline-none"
-          placeholder="Enter a value"
-          defaultValue={arg.defaultValue}
-          onKeyDown={(event) => {
-            if (event.metaKey && event.key === 'k') setCommandBarOpen(false)
-            if (event.key === 'Backspace' && !event.currentTarget.value) {
-              stepBack()
-            }
-          }}
-          autoFocus
-        />
-      </label>
-    </form>
-  )
-}
-
-export default CommandBarProvider
-
-function CommandComboBox({
-  options,
-  handleSelection,
-  stepBack,
-  placeholder,
-}: {
-  options: ComboboxOption[]
-  handleSelection: Dispatch<SetStateAction<any>>
-  stepBack: () => void
-  placeholder?: string
-}) {
-  const { setCommandBarOpen } = useCommandsContext()
-  const [query, setQuery] = useState('')
-  const [filteredOptions, setFilteredOptions] = useState<ComboboxOption[]>()
-
-  const defaultOption =
-    options.find((o) => 'isCurrent' in o && o.isCurrent) || null
-
-  const fuse = new Fuse(options, {
-    keys: ['name', 'description'],
-    threshold: 0.3,
-  })
-
-  useEffect(() => {
-    const results = fuse.search(query).map((result) => result.item)
-    setFilteredOptions(query.length > 0 ? results : options)
-  }, [query])
-
-  return (
-    <Combobox defaultValue={defaultOption} onChange={handleSelection}>
-      <div className="flex items-center gap-2 px-4 pb-2 border-solid border-0 border-b border-b-chalkboard-20 dark:border-b-chalkboard-80">
-        <CustomIcon
-          name="search"
-          className="w-5 h-5 bg-energy-10/50 dark:bg-chalkboard-90 dark:text-energy-10"
-        />
-        <Combobox.Input
-          onChange={(event) => setQuery(event.target.value)}
-          className="w-full bg-transparent focus:outline-none selection:bg-energy-10/50 dark:selection:bg-energy-10/20 dark:focus:outline-none"
-          onKeyDown={(event) => {
-            if (event.metaKey && event.key === 'k') setCommandBarOpen(false)
-            if (event.key === 'Backspace' && !event.currentTarget.value) {
-              stepBack()
-            }
-          }}
-          placeholder={
-            (defaultOption && defaultOption.name) ||
-            placeholder ||
-            'Search commands'
-          }
-          autoCapitalize="off"
-          autoComplete="off"
-          autoCorrect="off"
-          spellCheck="false"
-          autoFocus
-        />
-      </div>
-      <Combobox.Options
-        static
-        className="overflow-y-auto max-h-96 cursor-pointer"
-      >
-        {filteredOptions?.map((option) => (
-          <Combobox.Option
-            key={option.name}
-            value={option}
-            className="flex items-center gap-2 px-4 py-1 first:mt-2 last:mb-2 ui-active:bg-energy-10/50 dark:ui-active:bg-chalkboard-90"
-          >
-            {'icon' in option && option.icon && (
-              <CustomIcon
-                name={option.icon}
-                className="w-5 h-5 dark:text-energy-10"
-              />
-            )}
-            <p className="flex-grow">{option.name} </p>
-            {'isCurrent' in option && option.isCurrent && (
-              <small className="text-chalkboard-70 dark:text-chalkboard-50">
-                current
-              </small>
-            )}
-          </Combobox.Option>
-        ))}
-      </Combobox.Options>
-    </Combobox>
-  )
-}

src/components/CommandBar/CommandArgOptionInput.tsx

@@ -0,0 +1,114 @@
+import { Combobox } from '@headlessui/react'
+import Fuse from 'fuse.js'
+import { useCommandsContext } from 'hooks/useCommandsContext'
+import { CommandArgumentOption } from 'lib/commandTypes'
+import { useEffect, useRef, useState } from 'react'
+
+function CommandArgOptionInput({
+  options,
+  argName,
+  stepBack,
+  onSubmit,
+  placeholder,
+}: {
+  options: CommandArgumentOption<unknown>[]
+  argName: string
+  stepBack: () => void
+  onSubmit: (data: unknown) => void
+  placeholder?: string
+}) {
+  const { commandBarSend, commandBarState } = useCommandsContext()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const formRef = useRef<HTMLFormElement>(null)
+  const [argValue, setArgValue] = useState<(typeof options)[number]['value']>(
+    options.find((o) => 'isCurrent' in o && o.isCurrent)?.value ||
+      commandBarState.context.argumentsToSubmit[argName] ||
+      options[0].value
+  )
+  const [query, setQuery] = useState('')
+  const [filteredOptions, setFilteredOptions] = useState<typeof options>()
+
+  const fuse = new Fuse(options, {
+    keys: ['name', 'description'],
+    threshold: 0.3,
+  })
+
+  useEffect(() => {
+    inputRef.current?.focus()
+    inputRef.current?.select()
+  }, [inputRef])
+
+  useEffect(() => {
+    const results = fuse.search(query).map((result) => result.item)
+    setFilteredOptions(query.length > 0 ? results : options)
+  }, [query])
+
+  function handleSelectOption(option: CommandArgumentOption<unknown>) {
+    setArgValue(option)
+    onSubmit(option.value)
+  }
+
+  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    onSubmit(argValue)
+  }
+
+  return (
+    <form id="arg-form" onSubmit={handleSubmit} ref={formRef}>
+      <Combobox value={argValue} onChange={handleSelectOption} name="options">
+        <div className="flex items-center mx-4 mt-4 mb-2">
+          <label
+            htmlFor="option-input"
+            className="capitalize px-2 py-1 rounded-l bg-chalkboard-100 dark:bg-chalkboard-80 text-chalkboard-10 border-b border-b-chalkboard-100 dark:border-b-chalkboard-80"
+          >
+            {argName}
+          </label>
+          <Combobox.Input
+            id="option-input"
+            ref={inputRef}
+            onChange={(event) => setQuery(event.target.value)}
+            className="flex-grow px-2 py-1 border-b border-b-chalkboard-100 dark:border-b-chalkboard-80 !bg-transparent focus:outline-none"
+            onKeyDown={(event) => {
+              if (event.metaKey && event.key === 'k')
+                commandBarSend({ type: 'Close' })
+              if (event.key === 'Backspace' && !event.currentTarget.value) {
+                stepBack()
+              }
+            }}
+            placeholder={
+              (argValue as CommandArgumentOption<unknown>)?.name ||
+              placeholder ||
+              'Select an option for ' + argName
+            }
+            autoCapitalize="off"
+            autoComplete="off"
+            autoCorrect="off"
+            spellCheck="false"
+            autoFocus
+          />
+        </div>
+        <Combobox.Options
+          static
+          className="overflow-y-auto max-h-96 cursor-pointer"
+        >
+          {filteredOptions?.map((option) => (
+            <Combobox.Option
+              key={option.name}
+              value={option}
+              className="flex items-center gap-2 px-4 py-1 first:mt-2 last:mb-2 ui-active:bg-energy-10/50 dark:ui-active:bg-chalkboard-90"
+            >
+              <p className="flex-grow">{option.name} </p>
+              {'isCurrent' in option && option.isCurrent && (
+                <small className="text-chalkboard-70 dark:text-chalkboard-50">
+                  current
+                </small>
+              )}
+            </Combobox.Option>
+          ))}
+        </Combobox.Options>
+      </Combobox>
+    </form>
+  )
+}
+
+export default CommandArgOptionInput

src/components/CommandBar/CommandBar.tsx

@@ -0,0 +1,166 @@
+import { Dialog, Popover, Transition } from '@headlessui/react'
+import { Fragment, createContext, useEffect } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
+import { useCommandsContext } from 'hooks/useCommandsContext'
+import { useMachine } from '@xstate/react'
+import { commandBarMachine } from 'machines/commandBarMachine'
+import { EventFrom, StateFrom } from 'xstate'
+import CommandBarArgument from './CommandBarArgument'
+import CommandComboBox from '../CommandComboBox'
+import { useLocation } from 'react-router-dom'
+import CommandBarReview from './CommandBarReview'
+
+type CommandsContextType = {
+  commandBarState: StateFrom<typeof commandBarMachine>
+  commandBarSend: (event: EventFrom<typeof commandBarMachine>) => void
+}
+
+export const CommandsContext = createContext<CommandsContextType>({
+  commandBarState: commandBarMachine.initialState,
+  commandBarSend: () => {},
+})
+
+export const CommandBarProvider = ({
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  const { pathname } = useLocation()
+  const [commandBarState, commandBarSend] = useMachine(commandBarMachine, {
+    guards: {
+      'Arguments are ready': (context, _) => {
+        return context.selectedCommand?.args
+          ? context.argumentsToSubmit.length ===
+              Object.keys(context.selectedCommand.args)?.length
+          : false
+      },
+      'Command has no arguments': (context, _event) => {
+        return (
+          !context.selectedCommand?.args ||
+          Object.keys(context.selectedCommand?.args).length === 0
+        )
+      },
+    },
+  })
+
+  // Close the command bar when navigating
+  useEffect(() => {
+    commandBarSend({ type: 'Close' })
+  }, [pathname])
+
+  return (
+    <CommandsContext.Provider
+      value={{
+        commandBarState,
+        commandBarSend,
+      }}
+    >
+      {children}
+      <CommandBar />
+    </CommandsContext.Provider>
+  )
+}
+
+const CommandBar = () => {
+  const { commandBarState, commandBarSend } = useCommandsContext()
+  const {
+    context: { selectedCommand, currentArgument, commands },
+  } = commandBarState
+  const isSelectionArgument = currentArgument?.inputType === 'selection'
+  const WrapperComponent = isSelectionArgument ? Popover : Dialog
+
+  useHotkeys(['mod+k', 'mod+/'], () => {
+    if (commandBarState.context.commands.length === 0) return
+    if (commandBarState.matches('Closed')) {
+      commandBarSend({ type: 'Open' })
+    } else {
+      commandBarSend({ type: 'Close' })
+    }
+  })
+
+  function stepBack() {
+    if (!currentArgument) {
+      if (commandBarState.matches('Review')) {
+        const entries = Object.entries(selectedCommand?.args || {})
+
+        commandBarSend({
+          type: commandBarState.matches('Review')
+            ? 'Edit argument'
+            : 'Change current argument',
+          data: {
+            arg: {
+              name: entries[entries.length - 1][0],
+              ...entries[entries.length - 1][1],
+            },
+          },
+        })
+      } else {
+        commandBarSend({ type: 'Deselect command' })
+      }
+    } else {
+      const entries = Object.entries(selectedCommand?.args || {})
+      const index = entries.findIndex(
+        ([key, _]) => key === currentArgument.name
+      )
+
+      if (index === 0) {
+        commandBarSend({ type: 'Deselect command' })
+      } else {
+        commandBarSend({
+          type: 'Change current argument',
+          data: {
+            arg: { name: entries[index - 1][0], ...entries[index - 1][1] },
+          },
+        })
+      }
+    }
+  }
+
+  return (
+    <Transition.Root
+      show={!commandBarState.matches('Closed') || false}
+      afterLeave={() => {
+        if (selectedCommand?.onCancel) selectedCommand.onCancel()
+        commandBarSend({ type: 'Clear' })
+      }}
+      as={Fragment}
+    >
+      <WrapperComponent
+        open={!commandBarState.matches('Closed') || isSelectionArgument}
+        onClose={() => {
+          commandBarSend({ type: 'Close' })
+        }}
+        className={
+          'fixed inset-0 z-50 overflow-y-auto pb-4 pt-1 ' +
+          (isSelectionArgument ? 'pointer-events-none' : '')
+        }
+      >
+        <Transition.Child
+          enter="duration-100 ease-out"
+          enterFrom="opacity-0 scale-95"
+          enterTo="opacity-100 scale-100"
+          leave="duration-75 ease-in"
+          leaveFrom="opacity-100 scale-100"
+          leaveTo="opacity-0 scale-95"
+        >
+          <WrapperComponent.Panel
+            className="relative z-50 pointer-events-auto w-full max-w-xl py-2 mx-auto border rounded shadow-lg bg-chalkboard-10 dark:bg-chalkboard-100 dark:border-chalkboard-70"
+            as="div"
+          >
+            {commandBarState.matches('Selecting command') ? (
+              <CommandComboBox options={commands} />
+            ) : commandBarState.matches('Gathering arguments') ? (
+              <CommandBarArgument stepBack={stepBack} />
+            ) : (
+              commandBarState.matches('Review') && (
+                <CommandBarReview stepBack={stepBack} />
+              )
+            )}
+          </WrapperComponent.Panel>
+        </Transition.Child>
+      </WrapperComponent>
+    </Transition.Root>
+  )
+}
+
+export default CommandBarProvider

src/components/CommandBar/CommandBarArgument.tsx

@@ -0,0 +1,80 @@
+import CommandArgOptionInput from './CommandArgOptionInput'
+import CommandBarBasicInput from './CommandBarBasicInput'
+import CommandBarSelectionInput from './CommandBarSelectionInput'
+import { CommandArgument } from 'lib/commandTypes'
+import { useCommandsContext } from 'hooks/useCommandsContext'
+import CommandBarHeader from './CommandBarHeader'
+
+function CommandBarArgument({ stepBack }: { stepBack: () => void }) {
+  const { commandBarState, commandBarSend } = useCommandsContext()
+  const {
+    context: { currentArgument },
+  } = commandBarState
+
+  function onSubmit(data: unknown) {
+    if (!currentArgument) return
+
+    commandBarSend({
+      type: 'Submit argument',
+      data: {
+        [currentArgument.name]:
+          currentArgument.inputType === 'number'
+            ? parseFloat((data as string) || '0')
+            : data,
+      },
+    })
+  }
+
+  return (
+    currentArgument && (
+      <CommandBarHeader>
+        <ArgumentInput
+          arg={currentArgument}
+          stepBack={stepBack}
+          onSubmit={onSubmit}
+        />
+      </CommandBarHeader>
+    )
+  )
+}
+
+export default CommandBarArgument
+
+function ArgumentInput({
+  arg,
+  stepBack,
+  onSubmit,
+}: {
+  arg: CommandArgument<unknown> & { name: string }
+  stepBack: () => void
+  onSubmit: (event: any) => void
+}) {
+  switch (arg.inputType) {
+    case 'options':
+      return (
+        <CommandArgOptionInput
+          options={arg.options}
+          argName={arg.name}
+          stepBack={stepBack}
+          onSubmit={onSubmit}
+          placeholder="Select an option"
+        />
+      )
+    case 'selection':
+      return (
+        <CommandBarSelectionInput
+          arg={arg}
+          stepBack={stepBack}
+          onSubmit={onSubmit}
+        />
+      )
+    default:
+      return (
+        <CommandBarBasicInput
+          arg={arg}
+          stepBack={stepBack}
+          onSubmit={onSubmit}
+        />
+      )
+  }
+}

src/components/CommandBar/CommandBarBasicInput.tsx

@@ -0,0 +1,66 @@
+import { useCommandsContext } from 'hooks/useCommandsContext'
+import { CommandArgument } from 'lib/commandTypes'
+import { useEffect, useRef } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
+
+function CommandBarBasicInput({
+  arg,
+  stepBack,
+  onSubmit,
+}: {
+  arg: CommandArgument<unknown> & {
+    inputType: 'number' | 'string'
+    name: string
+  }
+  stepBack: () => void
+  onSubmit: (event: unknown) => void
+}) {
+  const { commandBarSend, commandBarState } = useCommandsContext()
+  useHotkeys('mod + k, mod + /', () => commandBarSend({ type: 'Close' }))
+  const inputRef = useRef<HTMLInputElement>(null)
+  const inputType = arg.inputType === 'number' ? 'number' : 'text'
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+  }, [arg, inputRef])
+
+  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    onSubmit(inputRef.current?.value)
+  }
+
+  return (
+    <form id="arg-form" onSubmit={handleSubmit}>
+      <label className="flex items-center mx-4 my-4">
+        <span className="capitalize px-2 py-1 rounded-l bg-chalkboard-100 dark:bg-chalkboard-80 text-chalkboard-10 border-b border-b-chalkboard-100 dark:border-b-chalkboard-80">
+          {arg.name}
+        </span>
+        <input
+          id="arg-form"
+          name={inputType}
+          ref={inputRef}
+          type={inputType}
+          required
+          className="flex-grow px-2 py-1 border-b border-b-chalkboard-100 dark:border-b-chalkboard-80 !bg-transparent focus:outline-none"
+          placeholder="Enter a value"
+          defaultValue={
+            (commandBarState.context.argumentsToSubmit[arg.name] as
+              | string
+              | undefined) || (arg.defaultValue as string)
+          }
+          onKeyDown={(event) => {
+            if (event.key === 'Backspace' && !event.currentTarget.value) {
+              stepBack()
+            }
+          }}
+          autoFocus
+        />
+      </label>
+    </form>
+  )
+}
+
+export default CommandBarBasicInput

src/components/CommandBar/CommandBarHeader.tsx

@@ -0,0 +1,171 @@
+import { useCommandsContext } from 'hooks/useCommandsContext'
+import { CustomIcon } from '../CustomIcon'
+import React, { useState } from 'react'
+import { ActionButton } from '../ActionButton'
+import { Selections, getSelectionTypeDisplayText } from 'lib/selections'
+import { useHotkeys } from 'react-hotkeys-hook'
+
+function CommandBarHeader({ children }: React.PropsWithChildren<{}>) {
+  const { commandBarState, commandBarSend } = useCommandsContext()
+  const {
+    context: { selectedCommand, currentArgument, argumentsToSubmit },
+  } = commandBarState
+  const isReviewing = commandBarState.matches('Review')
+  const [showShortcuts, setShowShortcuts] = useState(false)
+
+  useHotkeys(
+    'alt',
+    () => setShowShortcuts(true),
+    { enableOnFormTags: true, enableOnContentEditable: true },
+    [showShortcuts]
+  )
+  useHotkeys(
+    'alt',
+    () => setShowShortcuts(false),
+    { keyup: true, enableOnFormTags: true, enableOnContentEditable: true },
+    [showShortcuts]
+  )
+  useHotkeys(
+    [
+      'alt+1',
+      'alt+2',
+      'alt+3',
+      'alt+4',
+      'alt+5',
+      'alt+6',
+      'alt+7',
+      'alt+8',
+      'alt+9',
+      'alt+0',
+    ],
+    (_, b) => {
+      if (b.keys && !Number.isNaN(parseInt(b.keys[0], 10))) {
+        if (!selectedCommand?.args) return
+        const argName = Object.keys(selectedCommand.args)[
+          parseInt(b.keys[0], 10) - 1
+        ]
+        const arg = selectedCommand?.args[argName]
+        commandBarSend({
+          type: 'Change current argument',
+          data: { arg: { ...arg, name: argName } },
+        })
+      }
+    },
+    { keyup: true, enableOnFormTags: true, enableOnContentEditable: true },
+    [argumentsToSubmit, selectedCommand]
+  )
+
+  return (
+    selectedCommand &&
+    argumentsToSubmit && (
+      <>
+        <div className="px-4 text-sm flex gap-4 items-start">
+          <div className="flex flex-1 flex-wrap gap-2">
+            <p
+              data-command-name={selectedCommand?.name}
+              className="pr-4 flex gap-2 items-center"
+            >
+              {selectedCommand &&
+                'icon' in selectedCommand &&
+                selectedCommand.icon && (
+                  <CustomIcon name={selectedCommand.icon} className="w-5 h-5" />
+                )}
+              {selectedCommand?.name}
+            </p>
+            {Object.entries(selectedCommand?.args || {}).map(
+              ([argName, arg], i) => (
+                <button
+                  disabled={!isReviewing && currentArgument?.name === argName}
+                  onClick={() => {
+                    commandBarSend({
+                      type: isReviewing
+                        ? 'Edit argument'
+                        : 'Change current argument',
+                      data: { arg: { ...arg, name: argName } },
+                    })
+                  }}
+                  key={argName}
+                  className={`relative w-fit px-2 py-1 rounded-sm flex gap-2 items-center border ${
+                    argName === currentArgument?.name
+                      ? 'disabled:bg-energy-10/50 dark:disabled:bg-energy-10/20 disabled:border-energy-10 dark:disabled:border-energy-10 disabled:text-chalkboard-100 dark:disabled:text-chalkboard-10'
+                      : 'bg-chalkboard-20/50 dark:bg-chalkboard-80/50 border-chalkboard-20 dark:border-chalkboard-80'
+                  }`}
+                >
+                  {argumentsToSubmit[argName] ? (
+                    arg.inputType === 'selection' ? (
+                      getSelectionTypeDisplayText(
+                        argumentsToSubmit[argName] as Selections
+                      )
+                    ) : typeof argumentsToSubmit[argName] === 'object' ? (
+                      JSON.stringify(argumentsToSubmit[argName])
+                    ) : (
+                      argumentsToSubmit[argName]
+                    )
+                  ) : arg.payload ? (
+                    arg.inputType === 'selection' ? (
+                      getSelectionTypeDisplayText(arg.payload as Selections)
+                    ) : typeof arg.payload === 'object' ? (
+                      JSON.stringify(arg.payload)
+                    ) : (
+                      arg.payload
+                    )
+                  ) : (
+                    <em>{argName}</em>
+                  )}
+                  {showShortcuts && (
+                    <small className="absolute -top-[1px] right-full translate-x-1/2 px-0.5 rounded-sm bg-chalkboard-80 text-chalkboard-10 dark:bg-energy-10 dark:text-chalkboard-100">
+                      <span className="sr-only">Hotkey: </span>
+                      {i + 1}
+                    </small>
+                  )}
+                </button>
+              )
+            )}
+          </div>
+          {isReviewing ? <ReviewingButton /> : <GatheringArgsButton />}
+        </div>
+        <div className="block w-full my-2 h-[1px] bg-chalkboard-20 dark:bg-chalkboard-80" />
+        {children}
+      </>
+    )
+  )
+}
+
+function ReviewingButton() {
+  return (
+    <ActionButton
+      Element="button"
+      autoFocus
+      type="submit"
+      form="review-form"
+      className="w-fit !p-0 rounded-sm border !border-chalkboard-100 dark:!border-energy-10 hover:shadow"
+      icon={{
+        icon: 'checkmark',
+        bgClassName:
+          'p-1 rounded-sm !bg-chalkboard-100 hover:!bg-chalkboard-110 dark:!bg-energy-20 dark:hover:!bg-energy-10',
+        iconClassName: '!text-energy-10 dark:!text-chalkboard-100',
+      }}
+    >
+      <span className="sr-only">Submit command</span>
+    </ActionButton>
+  )
+}
+
+function GatheringArgsButton() {
+  return (
+    <ActionButton
+      Element="button"
+      type="submit"
+      form="arg-form"
+      className="w-fit !p-0 rounded-sm"
+      icon={{
+        icon: 'arrowRight',
+        bgClassName: 'p-1 rounded-sm',
+      }}
+    >
+      <span className="sr-only">Continue</span>
+    </ActionButton>
+  )
+}
+
+export default CommandBarHeader

src/components/CommandBar/CommandBarReview.tsx

@@ -0,0 +1,81 @@
+import { useCommandsContext } from 'hooks/useCommandsContext'
+import CommandBarHeader from './CommandBarHeader'
+import { useHotkeys } from 'react-hotkeys-hook'
+
+function CommandBarReview({ stepBack }: { stepBack: () => void }) {
+  const { commandBarState, commandBarSend } = useCommandsContext()
+  const {
+    context: { argumentsToSubmit, selectedCommand },
+  } = commandBarState
+
+  useHotkeys('backspace', stepBack, {
+    enableOnFormTags: true,
+    enableOnContentEditable: true,
+  })
+
+  useHotkeys(
+    '1, 2, 3, 4, 5, 6, 7, 8, 9, 0',
+    (_, b) => {
+      if (b.keys && !Number.isNaN(parseInt(b.keys[0], 10))) {
+        if (!selectedCommand?.args) return
+        const argName = Object.keys(selectedCommand.args)[
+          parseInt(b.keys[0], 10) - 1
+        ]
+        const arg = selectedCommand?.args[argName]
+        commandBarSend({
+          type: 'Edit argument',
+          data: { arg: { ...arg, name: argName } },
+        })
+      }
+    },
+    { keyup: true, enableOnFormTags: true, enableOnContentEditable: true },
+    [argumentsToSubmit, selectedCommand]
+  )
+
+  Object.keys(argumentsToSubmit).forEach((key, i) => {
+    const arg = selectedCommand?.args ? selectedCommand?.args[key] : undefined
+    if (!arg) return
+  })
+
+  function submitCommand() {
+    commandBarSend({
+      type: 'Submit command',
+      data: argumentsToSubmit,
+    })
+  }
+
+  return (
+    <CommandBarHeader>
+      <p className="px-4">Confirm {selectedCommand?.name}</p>
+      <form
+        id="review-form"
+        className="absolute opacity-0 inset-0 pointer-events-none"
+        onSubmit={submitCommand}
+      >
+        {Object.entries(argumentsToSubmit).map(([key, value], i) => {
+          const arg = selectedCommand?.args
+            ? selectedCommand?.args[key]
+            : undefined
+          if (!arg) return null
+
+          return (
+            <input
+              id={key}
+              name={key}
+              key={key}
+              type="text"
+              defaultValue={
+                typeof value === 'object'
+                  ? JSON.stringify(value)
+                  : (value as string)
+              }
+              hidden
+            />
+          )
+        })}
+      </form>
+    </CommandBarHeader>
+  )
+}
+
+export default CommandBarReview

src/components/CommandBar/CommandBarSelectionInput.tsx

@@ -0,0 +1,114 @@
+import { useSelector } from '@xstate/react'
+import { useCommandsContext } from 'hooks/useCommandsContext'
+import { useKclContext } from 'lang/KclSinglton'
+import { CommandArgument } from 'lib/commandTypes'
+import {
+  ResolvedSelectionType,
+  canSubmitSelectionArg,
+  getSelectionType,
+  getSelectionTypeDisplayText,
+} from 'lib/selections'
+import { modelingMachine } from 'machines/modelingMachine'
+import { useEffect, useRef, useState } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
+import { StateFrom } from 'xstate'
+
+const selectionSelector = (snapshot: StateFrom<typeof modelingMachine>) =>
+  snapshot.context.selectionRanges
+
+function CommandBarSelectionInput({
+  arg,
+  stepBack,
+  onSubmit,
+}: {
+  arg: CommandArgument<unknown> & { inputType: 'selection'; name: string }
+  stepBack: () => void
+  onSubmit: (data: unknown) => void
+}) {
+  const { code } = useKclContext()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const { commandBarSend } = useCommandsContext()
+  const [hasSubmitted, setHasSubmitted] = useState(false)
+  const selection = useSelector(arg.actor, selectionSelector)
+  const [selectionsByType, setSelectionsByType] = useState<
+    'none' | ResolvedSelectionType[]
+  >(
+    selection.codeBasedSelections[0]?.range[1] === code.length
+      ? 'none'
+      : getSelectionType(selection)
+  )
+  const [canSubmitSelection, setCanSubmitSelection] = useState<boolean>(
+    canSubmitSelectionArg(selectionsByType, arg)
+  )
+
+  useHotkeys('tab', () => onSubmit(selection), {
+    enableOnFormTags: true,
+    enableOnContentEditable: true,
+    keyup: true,
+  })
+
+  useEffect(() => {
+    inputRef.current?.focus()
+  }, [selection, inputRef])
+
+  useEffect(() => {
+    setSelectionsByType(
+      selection.codeBasedSelections[0]?.range[1] === code.length
+        ? 'none'
+        : getSelectionType(selection)
+    )
+  }, [selection])
+
+  useEffect(() => {
+    setCanSubmitSelection(canSubmitSelectionArg(selectionsByType, arg))
+  }, [selectionsByType, arg])
+
+  function handleChange() {
+    inputRef.current?.focus()
+  }
+
+  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+
+    if (!canSubmitSelection) {
+      setHasSubmitted(true)
+      return
+    }
+
+    onSubmit(selection)
+  }
+
+  return (
+    <form id="arg-form" onSubmit={handleSubmit}>
+      <label
+        className={
+          'relative flex items-center mx-4 my-4 ' +
+          (!hasSubmitted || canSubmitSelection || 'text-destroy-50')
+        }
+      >
+        {canSubmitSelection
+          ? getSelectionTypeDisplayText(selection) + ' selected'
+          : `Please select ${arg.multiple ? 'one or more faces' : 'one face'}`}
+        <input
+          id="selection"
+          name="selection"
+          ref={inputRef}
+          required
+          placeholder="Select an entity with your mouse"
+          className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+          onKeyDown={(event) => {
+            if (event.key === 'Backspace') {
+              stepBack()
+            } else if (event.key === 'Escape') {
+              commandBarSend({ type: 'Close' })
+            }
+          }}
+          onChange={handleChange}
+          value={JSON.stringify(selection || {})}
+        />
+      </label>
+    </form>
+  )
+}
+
+export default CommandBarSelectionInput

src/components/CommandComboBox.tsx

@@ -0,0 +1,90 @@
+import { Combobox } from '@headlessui/react'
+import Fuse from 'fuse.js'
+import { useCommandsContext } from 'hooks/useCommandsContext'
+import { Command } from 'lib/commandTypes'
+import { useEffect, useState } from 'react'
+import { CustomIcon } from './CustomIcon'
+
+function CommandComboBox({
+  options,
+  placeholder,
+}: {
+  options: Command[]
+  placeholder?: string
+}) {
+  const { commandBarSend } = useCommandsContext()
+  const [query, setQuery] = useState('')
+  const [filteredOptions, setFilteredOptions] = useState<typeof options>()
+
+  const defaultOption =
+    options.find((o) => 'isCurrent' in o && o.isCurrent) || null
+
+  const fuse = new Fuse(options, {
+    keys: ['name', 'description'],
+    threshold: 0.3,
+  })
+
+  useEffect(() => {
+    const results = fuse.search(query).map((result) => result.item)
+    setFilteredOptions(query.length > 0 ? results : options)
+  }, [query])
+
+  function handleSelection(command: Command) {
+    commandBarSend({ type: 'Select command', data: { command } })
+  }
+
+  return (
+    <Combobox defaultValue={defaultOption} onChange={handleSelection}>
+      <div className="flex items-center gap-2 px-4 pb-2 border-solid border-0 border-b border-b-chalkboard-20 dark:border-b-chalkboard-80">
+        <CustomIcon
+          name="search"
+          className="w-5 h-5 bg-energy-10/50 dark:bg-chalkboard-90 dark:text-energy-10"
+        />
+        <Combobox.Input
+          onChange={(event) => setQuery(event.target.value)}
+          className="w-full bg-transparent focus:outline-none selection:bg-energy-10/50 dark:selection:bg-energy-10/20 dark:focus:outline-none"
+          onKeyDown={(event) => {
+            if (
+              (event.metaKey && event.key === 'k') ||
+              (event.key === 'Backspace' && !event.currentTarget.value)
+            ) {
+              commandBarSend({ type: 'Close' })
+            }
+          }}
+          placeholder={
+            (defaultOption && defaultOption.name) ||
+            placeholder ||
+            'Search commands'
+          }
+          autoCapitalize="off"
+          autoComplete="off"
+          autoCorrect="off"
+          spellCheck="false"
+          autoFocus
+        />
+      </div>
+      <Combobox.Options
+        static
+        className="overflow-y-auto max-h-96 cursor-pointer"
+      >
+        {filteredOptions?.map((option) => (
+          <Combobox.Option
+            key={option.name}
+            value={option}
+            className="flex items-center gap-2 px-4 py-1 first:mt-2 last:mb-2 ui-active:bg-energy-10/50 dark:ui-active:bg-chalkboard-90"
+          >
+            {'icon' in option && option.icon && (
+              <CustomIcon
+                name={option.icon}
+                className="w-5 h-5 dark:text-energy-10"
+              />
+            )}
+            <p className="flex-grow">{option.name} </p>
+          </Combobox.Option>
+        ))}
+      </Combobox.Options>
+    </Combobox>
+  )
+}
+
+export default CommandComboBox

src/components/CustomIcon.tsx

@@ -3,6 +3,7 @@ export type CustomIconName =
   | 'arrowLeft'
   | 'arrowRight'
   | 'arrowUp'
+  | 'checkmark'
   | 'close'
   | 'equal'
   | 'extrude'
@@ -90,6 +91,22 @@ export const CustomIcon = ({
           />
         </svg>
       )
+    case 'checkmark':
+      return (
+        <svg
+          {...props}
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8.29956 13.5388L13.9537 6L14.7537 6.6L8.75367 14.6L8.00012 14.6536L5 11.6536L5.70709 10.9465L8.29956 13.5388Z"
+            fill="currentColor"
+          />
+        </svg>
+      )
     case 'close':
       return (
         <svg

src/components/DownloadAppBanner.tsx

@@ -10,45 +10,48 @@ const DownloadAppBanner = () => {
 
   return (
     <Dialog
-      className="fixed inset-0 top-auto z-50 bg-warn-20 text-warn-80 px-8 py-4"
+      className="fixed inset-0 z-50"
       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">
-            KittyCAD Modeling App is better as a desktop app!
-          </h2>
-          <ActionButton
-            Element="button"
-            onClick={() => setBannerDismissed(true)}
-            icon={{
-              icon: 'close',
-              className: 'p-1',
-              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"
-          />
+      <Dialog.Overlay className="fixed inset-0 bg-chalkboard-100/50" />
+      <Dialog.Panel className="absolute inset-0 top-auto bg-warn-20 text-warn-80 px-8 py-4">
+        <div className="max-w-3xl mx-auto">
+          <div className="flex gap-2 justify-between items-start">
+            <h2 className="text-xl font-bold mb-4">
+              Zoo Modeling App is better as a desktop app!
+            </h2>
+            <ActionButton
+              Element="button"
+              onClick={() => setBannerDismissed(true)}
+              icon={{
+                icon: 'close',
+                className: 'p-1',
+                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>
+            The browser version of the app only saves your data temporarily in{' '}
+            <code className="text-base inline-block px-0.5 bg-warn-30/50 rounded">
+              localStorage
+            </code>
+            , and isn't backed up anywhere! Visit{' '}
+            <a
+              href="https://zoo.dev/modeling-app/download"
+              rel="noopener noreferrer"
+              target="_blank"
+              className="!text-warn-80 dark:!text-warn-80 dark:hover:!text-warn-70 underline"
+            >
+              our website
+            </a>{' '}
+            to download the app for the best experience.
+          </p>
         </div>
-        <p>
-          The browser version of the app only saves your data temporarily in{' '}
-          <code className="text-base inline-block px-0.5 bg-warn-30/50 rounded">
-            localStorage
-          </code>
-          , and isn't backed up anywhere! Visit{' '}
-          <a
-            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 website
-          </a>{' '}
-          to download the app for the best experience.
-        </p>
       </Dialog.Panel>
     </Dialog>
   )

src/components/FileMachineProvider.tsx

@@ -40,7 +40,7 @@ export const FileMachineProvider = ({
   children: React.ReactNode
 }) => {
   const navigate = useNavigate()
-  const { setCommandBarOpen } = useCommandsContext()
+  const { commandBarSend } = useCommandsContext()
   const { project } = useRouteLoaderData(paths.FILE) as IndexLoaderData
 
   const [state, send] = useMachine(fileMachine, {
@@ -54,7 +54,7 @@ export const FileMachineProvider = ({
         event: EventFrom<typeof fileMachine>
       ) => {
         if (event.data && 'name' in event.data) {
-          setCommandBarOpen(false)
+          commandBarSend({ type: 'Close' })
           navigate(
             `${paths.FILE}/${encodeURIComponent(
               context.selectedDirectory + sep + event.data.name

src/components/GlobalStateProvider.tsx

@@ -1,19 +1,11 @@
 import { useMachine } from '@xstate/react'
 import { useNavigate } from 'react-router-dom'
 import { paths } from '../Router'
-import {
-  authCommandBarConfig,
-  authMachine,
-  TOKEN_PERSIST_KEY,
-} from '../machines/authMachine'
+import { authMachine, TOKEN_PERSIST_KEY } from '../machines/authMachine'
 import withBaseUrl from '../lib/withBaseURL'
 import React, { createContext, useEffect, useRef } from 'react'
 import useStateMachineCommands from '../hooks/useStateMachineCommands'
-import {
-  SETTINGS_PERSIST_KEY,
-  settingsCommandBarConfig,
-  settingsMachine,
-} from 'machines/settingsMachine'
+import { SETTINGS_PERSIST_KEY, settingsMachine } from 'machines/settingsMachine'
 import { toast } from 'react-hot-toast'
 import { setThemeClass, Themes } from 'lib/theme'
 import {
@@ -23,8 +15,9 @@ import {
   Prop,
   StateFrom,
 } from 'xstate'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { isTauri } from 'lib/isTauri'
+import { settingsCommandBarConfig } from 'lib/commandBarConfigs/settingsCommandConfig'
+import { authCommandBarConfig } from 'lib/commandBarConfigs/authCommandConfig'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
@@ -45,7 +38,6 @@ export const GlobalStateProvider = ({
   children: React.ReactNode
 }) => {
   const navigate = useNavigate()
-  const { commands } = useCommandsContext()
 
   // Settings machine setup
   const retrievedSettings = useRef(
@@ -81,10 +73,9 @@ export const GlobalStateProvider = ({
   })
 
   useStateMachineCommands({
+    machineId: 'settings',
     state: settingsState,
     send: settingsSend,
-    commands,
-    owner: 'settings',
     commandBarConfig: settingsCommandBarConfig,
   })
 
@@ -121,11 +112,10 @@ export const GlobalStateProvider = ({
   })
 
   useStateMachineCommands({
+    machineId: 'auth',
     state: authState,
     send: authSend,
-    commands,
     commandBarConfig: authCommandBarConfig,
-    owner: 'auth',
   })
 
   return (

src/components/Loading.tsx

@@ -15,23 +15,23 @@ const Loading = ({ children }: React.PropsWithChildren) => {
       data-testid="loading"
     >
       <svg viewBox="0 0 10 10" className="w-8 h-8">
-        <circle cx="5" cy="5" r="4" stroke="var(--liquid-20)" fill="none" />
+        <circle cx="5" cy="5" r="4" stroke="var(--energy-50)" fill="none" />
         <circle
           cx="5"
           cy="5"
           r="4"
-          stroke="var(--liquid-10)"
+          stroke="var(--energy-10)"
           fill="none"
           strokeDasharray="4, 4"
           className="animate-spin origin-center"
         />
       </svg>
-      <p className="text-base mt-4 text-liquid-80 dark:text-liquid-20">
+      <p className="text-base mt-4 text-energy-80 dark:text-energy-30">
         {children || 'Loading'}
       </p>
       <p
         className={
-          'text-sm mt-4 text-liquid-90 dark:text-liquid-10 transition-opacity duration-500' +
+          'text-sm mt-4 text-energy-70 dark:text-energy-50 transition-opacity duration-500' +
           (hasLongLoadTime ? ' opacity-100' : ' opacity-0')
         }
       >

src/components/Logo.tsx

@@ -0,0 +1,33 @@
+export const Logo = ({
+  className = 'w-auto h-5 text-chalkboard-120 dark:text-chalkboard-10',
+  ...props
+}: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    className={className}
+    viewBox="0 0 438 145"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M88.2136 25.3021V3.12744H0.595269V34.3994H79.827L0.609484 120.312H0.595269V120.326L0.581055 120.34L0.595269 120.355V141.364H20.8936L41.3341 119.189V141.364H128.952V110.092H49.7349L128.952 24.1649V3.12744L108.64 3.15587L88.2136 25.3021Z"
+      fill="currentColor"
+    />
+    <path
+      d="M167.36 72.4372C167.36 49.7366 185.824 31.2719 208.525 31.2719C216.514 31.2719 223.976 33.5605 230.288 37.5121L251.78 14.3709C239.698 5.34466 224.73 0 208.525 0C168.582 0 136.088 32.4944 136.088 72.4372C136.088 90.5465 142.769 107.135 153.828 119.857L175.32 96.7156C170.316 89.9069 167.36 81.5061 167.36 72.4372Z"
+      fill="currentColor"
+    />
+    <path
+      d="M241.745 48.1442C246.734 54.9671 249.691 63.3679 249.691 72.4368C249.691 95.1232 231.226 113.588 208.525 113.588C200.537 113.588 193.088 111.299 186.777 107.348L165.271 130.503C177.353 139.515 192.321 144.86 208.525 144.86C248.468 144.86 280.963 112.365 280.963 72.4368C280.963 54.3133 274.282 37.7249 263.223 25.0029L241.745 48.1442Z"
+      fill="currentColor"
+    />
+    <path
+      d="M419.312 25.0029L397.834 48.1442C402.823 54.9671 405.779 63.3679 405.779 72.4368C405.779 95.1232 387.315 113.588 364.614 113.588C356.626 113.588 349.177 111.299 342.866 107.348L321.359 130.503C333.442 139.515 348.41 144.86 364.614 144.86C404.557 144.86 437.051 112.365 437.051 72.4368C437.051 54.3133 430.371 37.7249 419.312 25.0029Z"
+      fill="currentColor"
+    />
+    <path
+      d="M323.449 72.4372C323.449 49.7366 341.913 31.2719 364.614 31.2719C372.603 31.2719 380.065 33.5605 386.376 37.5121L407.869 14.3709C395.786 5.34466 380.819 0 364.614 0C324.671 0 292.177 32.4944 292.177 72.4372C292.177 90.5465 298.858 107.135 309.916 119.857L331.409 96.7156C326.405 89.9069 323.449 81.5061 323.449 72.4372Z"
+      fill="currentColor"
+    />
+  </svg>
+)

src/components/ModelingMachineProvider.tsx

@@ -29,19 +29,26 @@ import {
   addNewSketchLn,
   compareVec2Epsilon,
 } from 'lang/std/sketch'
-import { kclManager } from 'lang/KclSinglton'
+import { kclManager, useKclContext } from 'lang/KclSinglton'
 import { applyConstraintHorzVertDistance } from './Toolbar/SetHorzVertDistance'
 import {
   angleBetweenInfo,
   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 {
+  canExtrudeSelection,
+  handleSelectionBatch,
+  handleSelectionWithShift,
+  isSelectionLastLine,
+  isSketchPipe,
+} from 'lib/selections'
 import { applyConstraintIntersect } from './Toolbar/Intersect'
 import { applyConstraintAbsDistance } from './Toolbar/SetAbsDistance'
+import useStateMachineCommands from 'hooks/useStateMachineCommands'
+import { modelingMachineConfig } from 'lib/commandBarConfigs/modelingCommandConfig'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
@@ -59,6 +66,7 @@ export const ModelingMachineProvider = ({
   children: React.ReactNode
 }) => {
   const { auth } = useGlobalStateContext()
+  const { code } = useKclContext()
   const token = auth?.context?.token
   const streamRef = useRef<HTMLDivElement>(null)
   useSetupEngineManager(streamRef, token)
@@ -68,8 +76,6 @@ export const ModelingMachineProvider = ({
     editorView: s.editorView,
   }))
 
-  // const { commands } = useCommandsContext()
-
   // Settings machine setup
   // const retrievedSettings = useRef(
   // localStorage?.getItem(MODELING_PERSIST_KEY) || '{}'
@@ -83,148 +89,85 @@ export const ModelingMachineProvider = ({
   //   >
   // )
 
-  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
+  const [modelingState, modelingSend, modelingActor] = useMachine(
+    modelingMachine,
+    {
+      // context: persistedSettings,
+      actions: {
+        'Modify AST': () => {},
+        'Update code selection cursors': () => {},
+        'show default planes': () => {
+          kclManager.showPlanes()
         },
-      }),
-      'AST start new sketch': assign(
-        ({ sketchEnginePathId }, { data: { coords, axis, segmentId } }) => {
-          if (!axis) {
-            // Something really weird must have happened for this to happen.
-            console.error('axis is undefined for starting a new sketch')
-            return {}
-          }
-          if (!segmentId) {
-            // Something really weird must have happened for this to happen.
-            console.error('segmentId is undefined for starting a new sketch')
-            return {}
-          }
-
-          const _addStartSketch = addStartSketch(
-            kclManager.ast,
-            axis,
-            [roundOff(coords[0].x), roundOff(coords[0].y)],
-            [
-              roundOff(coords[1].x - coords[0].x),
-              roundOff(coords[1].y - coords[0].y),
-            ]
-          )
-          const _modifiedAst = _addStartSketch.modifiedAst
-          const _pathToNode = _addStartSketch.pathToNode
-          const newCode = recast(_modifiedAst)
-          const astWithUpdatedSource = parse(newCode)
-          const updatedPipeNode = getNodeFromPath<PipeExpression>(
-            astWithUpdatedSource,
-            _pathToNode
-          ).node
-          const startProfileAtCallExp = updatedPipeNode.body.find(
-            (exp) =>
-              exp.type === 'CallExpression' &&
-              exp.callee.name === 'startProfileAt'
-          )
-          if (startProfileAtCallExp)
-            engineCommandManager.artifactMap[sketchEnginePathId] = {
-              type: 'result',
-              range: [startProfileAtCallExp.start, startProfileAtCallExp.end],
-              commandType: 'start_path',
-              data: null,
-              raw: {} as any,
+        '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 {}
             }
-          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,
+            if (!segmentId) {
+              // Something really weird must have happened for this to happen.
+              console.error('segmentId is undefined for starting a new sketch')
+              return {}
             }
 
-          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>(
+            const _addStartSketch = addStartSketch(
               kclManager.ast,
-              newSketchLn.pathToNode
+              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
-            if (segmentId)
+            const startProfileAtCallExp = updatedPipeNode.body.find(
+              (exp) =>
+                exp.type === 'CallExpression' &&
+                exp.callee.name === 'startProfileAt'
+            )
+            if (startProfileAtCallExp)
+              engineCommandManager.artifactMap[sketchEnginePathId] = {
+                type: 'result',
+                range: [startProfileAtCallExp.start, startProfileAtCallExp.end],
+                commandType: 'start_path',
+                data: null,
+                raw: {} as any,
+              }
+            const lineCallExp = updatedPipeNode.body.find(
+              (exp) =>
+                exp.type === 'CallExpression' && exp.callee.name === 'line'
+            )
+            if (lineCallExp)
               engineCommandManager.artifactMap[segmentId] = {
                 type: 'result',
                 range: [lineCallExp.start, lineCallExp.end],
@@ -233,120 +176,189 @@ export const ModelingMachineProvider = ({
                 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 (!editorView) return {}
-        if (setSelections.selectionType === 'mirrorCodeMirrorSelections')
-          return { selectionRanges: setSelections.selection }
-        else if (setSelections.selectionType === 'otherSelection') {
-          // TODO KittyCAD/engine/issues/1620: send axis highlight when it's working (if that's what we settle on)
-          // const axisAddCmd: EngineCommand = {
-          //   type: 'modeling_cmd_req',
-          //   cmd: {
-          //     type: 'highlight_set_entities',
-          //     entities: [
-          //       setSelections.selection === 'x-axis'
-          //         ? X_AXIS_UUID
-          //         : Y_AXIS_UUID,
-          //     ],
-          //   },
-          //   cmd_id: uuidv4(),
-          // }
 
-          // if (!isShiftDown) {
-          //   engineCommandManager
-          //     .sendSceneCommand({
-          //       type: 'modeling_cmd_req',
-          //       cmd: {
-          //         type: 'select_clear',
-          //       },
-          //       cmd_id: uuidv4(),
-          //     })
-          //     .then(() => {
-          //       engineCommandManager.sendSceneCommand(axisAddCmd)
-          //     })
-          // } else {
-          //   engineCommandManager.sendSceneCommand(axisAddCmd)
-          // }
+            kclManager.executeAstMock(astWithUpdatedSource, true)
 
-          const {
-            codeMirrorSelection,
-            selectionRangeTypeMap,
-            otherSelections,
-          } = handleSelectionWithShift({
-            otherSelection: setSelections.selection,
-            currentSelections: selectionRanges,
-            isShiftDown,
-          })
-          setTimeout(() => {
-            editorView.dispatch({
-              selection: codeMirrorSelection,
-            })
-          })
-          return {
-            selectionRangeTypeMap,
-            selectionRanges: {
-              codeBasedSelections: selectionRanges.codeBasedSelections,
-              otherSelections,
-            },
+            return {
+              sketchPathToNode: _pathToNode,
+            }
           }
-        } 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.
+        ),
+        'AST add line segment': async (
+          { sketchPathToNode, sketchEnginePathId },
+          { data: { coords, segmentId } }
+        ) => {
+          if (!sketchPathToNode) return
+          const lastCoord = coords[coords.length - 1]
 
-          // for more details on how selections see `src/lib/selections.ts`.
-
-          const {
-            codeMirrorSelection,
-            selectionRangeTypeMap,
-            otherSelections,
-          } = handleSelectionWithShift({
-            codeSelection: setSelections.selection,
-            currentSelections: selectionRanges,
-            isShiftDown,
+          const pathInfo = await engineCommandManager.sendSceneCommand({
+            type: 'modeling_cmd_req',
+            cmd_id: uuidv4(),
+            cmd: {
+              type: 'path_get_info',
+              path_id: sketchEnginePathId,
+            },
           })
-          if (codeMirrorSelection) {
+          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
+        '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 (!editorView) return {}
+          if (setSelections.selectionType === 'mirrorCodeMirrorSelections')
+            return { selectionRanges: setSelections.selection }
+          else if (setSelections.selectionType === 'otherSelection') {
+            // TODO KittyCAD/engine/issues/1620: send axis highlight when it's working (if that's what we settle on)
+            // const axisAddCmd: EngineCommand = {
+            //   type: 'modeling_cmd_req',
+            //   cmd: {
+            //     type: 'highlight_set_entities',
+            //     entities: [
+            //       setSelections.selection === 'x-axis'
+            //         ? X_AXIS_UUID
+            //         : Y_AXIS_UUID,
+            //     ],
+            //   },
+            //   cmd_id: uuidv4(),
+            // }
+
+            // if (!isShiftDown) {
+            //   engineCommandManager
+            //     .sendSceneCommand({
+            //       type: 'modeling_cmd_req',
+            //       cmd: {
+            //         type: 'select_clear',
+            //       },
+            //       cmd_id: uuidv4(),
+            //     })
+            //     .then(() => {
+            //       engineCommandManager.sendSceneCommand(axisAddCmd)
+            //     })
+            // } else {
+            //   engineCommandManager.sendSceneCommand(axisAddCmd)
+            // }
+
+            const {
+              codeMirrorSelection,
+              selectionRangeTypeMap,
+              otherSelections,
+            } = handleSelectionWithShift({
+              otherSelection: setSelections.selection,
+              currentSelections: selectionRanges,
+              isShiftDown,
+            })
             setTimeout(() => {
               editorView.dispatch({
                 selection: codeMirrorSelection,
               })
             })
-          }
-          if (!setSelections.selection) {
+            return {
+              selectionRangeTypeMap,
+              selectionRanges: {
+                codeBasedSelections: selectionRanges.codeBasedSelections,
+                otherSelections,
+              },
+            }
+          } 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,
+              otherSelections,
+            } = handleSelectionWithShift({
+              codeSelection: setSelections.selection,
+              currentSelections: selectionRanges,
+              isShiftDown,
+            })
+            if (codeMirrorSelection) {
+              setTimeout(() => {
+                editorView.dispatch({
+                  selection: codeMirrorSelection,
+                })
+              })
+            }
+            if (!setSelections.selection) {
+              return {
+                selectionRangeTypeMap,
+                selectionRanges: {
+                  codeBasedSelections: selectionRanges.codeBasedSelections,
+                  otherSelections,
+                },
+              }
+            }
             return {
               selectionRangeTypeMap,
               selectionRanges: {
@@ -355,171 +367,180 @@ export const ModelingMachineProvider = ({
               },
             }
           }
+          // 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,
+        'has valid extrude selection': ({ selectionRanges }) => {
+          // A user can begin extruding if they either have 1+ faces selected or nothing selected
+          // TODO: I believe this guard only allows for extruding a single face at a time
+          if (selectionRanges.codeBasedSelections.length < 1) return false
+          const isPipe = isSketchPipe(selectionRanges)
+
+          if (isSelectionLastLine(selectionRanges, code)) return true
+          if (!isPipe) return false
+
+          return canExtrudeSelection(selectionRanges)
+        },
+        '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 {
-            selectionRangeTypeMap,
-            selectionRanges: {
-              codeBasedSelections: selectionRanges.codeBasedSelections,
-              otherSelections,
-            },
+            selectionType: 'completeSelection',
+            selection: pathMapToSelections(
+              kclManager.ast,
+              selectionRanges,
+              pathToNodeMap
+            ),
           }
-        }
-        // 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 (angleBetweenInfo({
+        },
+        'Get vertical info': async ({
           selectionRanges,
-        }).enabled
-          ? applyConstraintAngleBetween({
+        }): Promise<SetSelections> => {
+          const { modifiedAst, pathToNodeMap } =
+            await applyConstraintHorzVertDistance({
+              constraint: 'setVertDistance',
               selectionRanges,
             })
-          : applyConstraintAngleLength({
+          await kclManager.updateAst(modifiedAst, true)
+          return {
+            selectionType: 'completeSelection',
+            selection: pathMapToSelections(
+              kclManager.ast,
               selectionRanges,
-              angleOrLength: 'setAngle',
-            }))
-        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({
+              pathToNodeMap
+            ),
+          }
+        },
+        'Get angle info': async ({
           selectionRanges,
-        })
-        await kclManager.updateAst(modifiedAst, true)
-        return {
-          selectionType: 'completeSelection',
-          selection: pathMapToSelections(
-            kclManager.ast,
-            selectionRanges,
-            pathToNodeMap
-          ),
-        }
-      },
-      'Get ABS X info': async ({ selectionRanges }): Promise<SetSelections> => {
-        const { modifiedAst, pathToNodeMap } = await applyConstraintAbsDistance(
-          {
-            constraint: 'xAbs',
+        }): Promise<SetSelections> => {
+          const { modifiedAst, pathToNodeMap } = await (angleBetweenInfo({
             selectionRanges,
+          }).enabled
+            ? applyConstraintAngleBetween({
+                selectionRanges,
+              })
+            : applyConstraintAngleLength({
+                selectionRanges,
+                angleOrLength: 'setAngle',
+              }))
+          await kclManager.updateAst(modifiedAst, true)
+          return {
+            selectionType: 'completeSelection',
+            selection: pathMapToSelections(
+              kclManager.ast,
+              selectionRanges,
+              pathToNodeMap
+            ),
           }
-        )
-        await kclManager.updateAst(modifiedAst, true)
-        return {
-          selectionType: 'completeSelection',
-          selection: pathMapToSelections(
-            kclManager.ast,
-            selectionRanges,
-            pathToNodeMap
-          ),
-        }
-      },
-      'Get ABS Y info': async ({ selectionRanges }): Promise<SetSelections> => {
-        const { modifiedAst, pathToNodeMap } = await applyConstraintAbsDistance(
-          {
-            constraint: 'yAbs',
-            selectionRanges,
+        },
+        '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
+            ),
           }
-        )
-        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
+            ),
+          }
+        },
+        'Get ABS X info': async ({
+          selectionRanges,
+        }): Promise<SetSelections> => {
+          const { modifiedAst, pathToNodeMap } =
+            await applyConstraintAbsDistance({
+              constraint: 'xAbs',
+              selectionRanges,
+            })
+          await kclManager.updateAst(modifiedAst, true)
+          return {
+            selectionType: 'completeSelection',
+            selection: pathMapToSelections(
+              kclManager.ast,
+              selectionRanges,
+              pathToNodeMap
+            ),
+          }
+        },
+        'Get ABS Y info': async ({
+          selectionRanges,
+        }): Promise<SetSelections> => {
+          const { modifiedAst, pathToNodeMap } =
+            await applyConstraintAbsDistance({
+              constraint: 'yAbs',
+              selectionRanges,
+            })
+          await kclManager.updateAst(modifiedAst, true)
+          return {
+            selectionType: 'completeSelection',
+            selection: pathMapToSelections(
+              kclManager.ast,
+              selectionRanges,
+              pathToNodeMap
+            ),
+          }
+        },
       },
-    },
-    devTools: true,
-  })
+      devTools: true,
+    }
+  )
 
   useEffect(() => {
     engineCommandManager.onPlaneSelected((plane_id: string) => {
@@ -538,13 +559,17 @@ export const ModelingMachineProvider = ({
     })
   }, [modelingSend])
 
-  // useStateMachineCommands({
-  //   state: settingsState,
-  //   send: settingsSend,
-  //   commands,
-  //   owner: 'settings',
-  //   commandBarMeta: settingsCommandBarMeta,
-  // })
+  useStateMachineCommands({
+    machineId: 'modeling',
+    state: modelingState,
+    send: modelingSend,
+    actor: modelingActor,
+    commandBarConfig: modelingMachineConfig,
+    onCancel: () => {
+      console.log('firing onCancel!!')
+      modelingSend({ type: 'Cancel' })
+    },
+  })
 
   return (
     <ModelingMachineContext.Provider

src/components/NetworkHealthIndicator.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import { BrowserRouter } from 'react-router-dom'
 import { GlobalStateProvider } from './GlobalStateProvider'
-import CommandBarProvider from './CommandBar'
+import CommandBarProvider from './CommandBar/CommandBar'
 import {
   NETWORK_CONTENT,
   NetworkHealthIndicator,

src/components/NetworkHealthIndicator.tsx

@@ -1,8 +1,4 @@
-import {
-  faCheck,
-  faExclamation,
-  faWifi,
-} from '@fortawesome/free-solid-svg-icons'
+import { faExclamation, faWifi } from '@fortawesome/free-solid-svg-icons'
 import { Popover } from '@headlessui/react'
 import { useEffect, useState } from 'react'
 import { ActionIcon } from './ActionIcon'
@@ -77,8 +73,8 @@ export const NetworkHealthIndicator = () => {
             data-testid="network-good"
           >
             <ActionIcon
-              icon={faCheck}
-              bgClassName={'bg-succeed-10/50 dark:bg-succeed-80/50 rounded'}
+              icon="checkmark"
+              bgClassName={'bg-succeed-10/50 dark:bg-succeed-80/50 rounded-sm'}
               iconClassName={'text-succeed-80 dark:text-succeed-30'}
             />
             {NETWORK_CONTENT.good}

src/components/ProjectCard.tsx

@@ -143,7 +143,7 @@ function ProjectCard({
                   className: 'p-1',
                   size: 'xs',
                   bgClassName: 'bg-destroy-80',
-                  iconClassName: 'text-destroy-20 dark:text-destroy-40',
+                  iconClassName: '!text-destroy-20 dark:!text-destroy-40',
                 }}
                 className="!p-0 hover:border-destroy-40 dark:hover:border-destroy-40"
                 onClick={(e) => {
@@ -185,8 +185,7 @@ function ProjectCard({
                       bgClassName: 'bg-destroy-80',
                       className: 'p-1',
                       size: 'sm',
-                      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',
+                      iconClassName: '!text-destroy-70 dark:!text-destroy-40',
                     }}
                     className="hover:border-destroy-40 dark:hover:border-destroy-40"
                   >

src/components/ProjectSidebarMenu.test.tsx

@@ -3,7 +3,8 @@ import { BrowserRouter } from 'react-router-dom'
 import ProjectSidebarMenu from './ProjectSidebarMenu'
 import { ProjectWithEntryPointMetadata } from '../Router'
 import { GlobalStateProvider } from './GlobalStateProvider'
-import CommandBarProvider from './CommandBar'
+import CommandBarProvider from './CommandBar/CommandBar'
+import { APP_NAME } from 'lib/constants'
 
 const now = new Date()
 const projectWellFormed = {
@@ -71,9 +72,7 @@ describe('ProjectSidebarMenu tests', () => {
 
     fireEvent.click(screen.getByTestId('project-sidebar-toggle'))
 
-    expect(screen.getByTestId('projectName')).toHaveTextContent(
-      'KittyCAD Modeling App'
-    )
+    expect(screen.getByTestId('projectName')).toHaveTextContent(APP_NAME)
   })
 
   test('Renders as a link if set to do so', () => {

src/components/ProjectSidebarMenu.tsx

@@ -8,6 +8,8 @@ import { ExportButton } from './ExportButton'
 import { Fragment } from 'react'
 import { FileTree } from './FileTree'
 import { sep } from '@tauri-apps/api/path'
+import { Logo } from './Logo'
+import { APP_NAME } from 'lib/constants'
 
 const ProjectSidebarMenu = ({
   project,
@@ -21,37 +23,29 @@ const ProjectSidebarMenu = ({
   return renderAsLink ? (
     <Link
       to={paths.HOME}
-      className="rounded-sm h-9 mr-auto 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 dark:hover:bg-chalkboard-90"
+      className="rounded-sm h-9 mr-auto max-h-min min-w-max border-0 py-1 px-2 flex items-center gap-3 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-energy-50 dark:hover:bg-chalkboard-90"
       data-testid="project-sidebar-link"
     >
-      <img
-        src="/kitt-8bit-winking.svg"
-        alt="KittyCAD App"
-        className="w-auto h-9"
-      />
+      <Logo />
       <span
         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'}
+        {project?.name ? project.name : APP_NAME}
       </span>
     </Link>
   ) : (
     <Popover className="relative">
       <Popover.Button
-        className="rounded-sm h-9 mr-auto 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 dark:hover:bg-chalkboard-90"
+        className="rounded-sm h-9 mr-auto max-h-min min-w-max border-0 py-1 px-2 flex items-center gap-3 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-energy-50 dark:hover:bg-chalkboard-90"
         data-testid="project-sidebar-toggle"
       >
-        <img
-          src="/kitt-8bit-winking.svg"
-          alt="KittyCAD App"
-          className="w-auto h-full"
-        />
+        <Logo />
         <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'}
+              : APP_NAME}
           </span>
           {isTauri() && project?.name && (
             <span className="hidden text-xs text-chalkboard-70 dark:text-chalkboard-40 whitespace-nowrap lg:block">
@@ -88,18 +82,13 @@ const ProjectSidebarMenu = ({
           {({ close }) => (
             <>
               <div className="flex items-center gap-4 px-4 py-3">
-                <img
-                  src="/kitt-8bit-winking.svg"
-                  alt="KittyCAD App"
-                  className="w-auto h-9"
-                />
-
+                <Logo />
                 <div>
                   <p
                     className="m-0 text-chalkboard-100 dark:text-energy-10 text-mono"
                     data-testid="projectName"
                   >
-                    {project?.name ? project.name : 'KittyCAD Modeling App'}
+                    {project?.name ? project.name : APP_NAME}
                   </p>
                   {project?.entrypointMetadata && (
                     <p

src/components/Stream.tsx

@@ -243,15 +243,14 @@ export const Stream = ({ className = '' }) => {
       })
     } else if (
       !didDragInStream &&
-      (state.matches('Sketch.SketchIdle') ||
-        state.matches('idle') ||
-        state.matches('awaiting selection'))
+      (state.matches('Sketch.SketchIdle') || state.matches('idle'))
     ) {
       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 = {

src/components/TextEditor.tsx

@@ -64,7 +64,7 @@ export const TextEditor = ({
 
   const { settings: { context: { textWrapping } = {} } = {} } =
     useGlobalStateContext()
-  const { setCommandBarOpen } = useCommandsContext()
+  const { commandBarSend } = useCommandsContext()
   const { enable: convertEnabled, handleClick: convertCallback } =
     useConvertToVariable()
 
@@ -136,7 +136,7 @@ export const TextEditor = ({
         {
           key: 'Meta-k',
           run: () => {
-            setCommandBarOpen(true)
+            commandBarSend({ type: 'Open' })
             return false
           },
         },

src/components/UserSidebarMenu.test.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-router-dom'
 import { Models } from '@kittycad/lib'
 import { GlobalStateProvider } from './GlobalStateProvider'
-import CommandBarProvider from './CommandBar'
+import CommandBarProvider from './CommandBar/CommandBar'
 
 type User = Models['User_type']
 

src/hooks/useCommandsContext.ts

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

src/hooks/usePlatform.ts

@@ -0,0 +1,27 @@
+import { Platform, platform } from '@tauri-apps/api/os'
+import { isTauri } from 'lib/isTauri'
+import { useEffect, useState } from 'react'
+
+export default function usePlatform() {
+  const [platformName, setPlatformName] = useState<Platform | ''>('')
+
+  useEffect(() => {
+    async function getPlatform() {
+      setPlatformName(await platform())
+    }
+
+    if (isTauri()) {
+      void getPlatform()
+    } else {
+      if (navigator.userAgent.indexOf('Mac') !== -1) {
+        setPlatformName('darwin')
+      } else if (navigator.userAgent.indexOf('Win') !== -1) {
+        setPlatformName('win32')
+      } else if (navigator.userAgent.indexOf('Linux') !== -1) {
+        setPlatformName('linux')
+      }
+    }
+  }, [setPlatformName])
+
+  return platformName
+}

src/hooks/useStateMachineCommands.ts

@@ -1,46 +1,68 @@
 import { useEffect } from 'react'
-import { AnyStateMachine, StateFrom } from 'xstate'
-import {
-  Command,
-  CommandBarConfig,
-  createMachineCommand,
-} from '../lib/commands'
+import { AnyStateMachine, InterpreterFrom, StateFrom } from 'xstate'
+import { createMachineCommand } from '../lib/createMachineCommand'
 import { useCommandsContext } from './useCommandsContext'
+import { modelingMachine } from 'machines/modelingMachine'
+import { authMachine } from 'machines/authMachine'
+import { settingsMachine } from 'machines/settingsMachine'
+import { homeMachine } from 'machines/homeMachine'
+import { Command, CommandSetConfig, CommandSetSchema } from 'lib/commandTypes'
 
-interface UseStateMachineCommandsArgs<T extends AnyStateMachine> {
+// This might not be necessary, AnyStateMachine from xstate is working
+export type AllMachines =
+  | typeof modelingMachine
+  | typeof settingsMachine
+  | typeof authMachine
+  | typeof homeMachine
+
+interface UseStateMachineCommandsArgs<
+  T extends AllMachines,
+  S extends CommandSetSchema<T>
+> {
+  machineId: T['id']
   state: StateFrom<T>
   send: Function
-  commandBarConfig?: CommandBarConfig<T>
-  commands: Command[]
-  owner: string
+  actor?: InterpreterFrom<T>
+  commandBarConfig?: CommandSetConfig<T, S>
+  onCancel?: () => void
 }
 
-export default function useStateMachineCommands<T extends AnyStateMachine>({
+export default function useStateMachineCommands<
+  T extends AnyStateMachine,
+  S extends CommandSetSchema<T>
+>({
+  machineId,
   state,
   send,
+  actor,
   commandBarConfig,
-  owner,
-}: UseStateMachineCommandsArgs<T>) {
-  const { addCommands, removeCommands } = useCommandsContext()
+  onCancel,
+}: UseStateMachineCommandsArgs<T, S>) {
+  const { commandBarSend } = useCommandsContext()
 
   useEffect(() => {
     const newCommands = state.nextEvents
       .filter((e) => !['done.', 'error.'].some((n) => e.includes(n)))
       .map((type) =>
-        createMachineCommand<T>({
+        createMachineCommand<T, S>({
+          ownerMachine: machineId,
           type,
           state,
           send,
+          actor,
           commandBarConfig,
-          owner,
+          onCancel,
         })
       )
       .filter((c) => c !== null) as Command[] // TS isn't smart enough to know this filter removes nulls
 
-    addCommands(newCommands)
+    commandBarSend({ type: 'Add commands', data: { commands: newCommands } })
 
     return () => {
-      removeCommands(newCommands)
+      commandBarSend({
+        type: 'Remove commands',
+        data: { commands: newCommands },
+      })
     }
   }, [state])
 }

src/index.css

@@ -57,7 +57,7 @@ select {
 }
 
 button {
-  @apply border border-chalkboard-30 m-0.5 px-3 rounded text-xs;
+  @apply border border-chalkboard-30 m-0.5 px-3 rounded text-xs focus-visible:ring-energy-10;
 }
 
 button:hover {
@@ -65,7 +65,7 @@ button:hover {
 }
 
 .dark button {
-  @apply border-chalkboard-70;
+  @apply border-chalkboard-70 focus-visible:ring-energy-10/50;
 }
 
 .dark button:hover {
@@ -88,6 +88,14 @@ a:not(.action-button) {
   @apply text-chalkboard-20 hover:text-energy-10;
 }
 
+input {
+  @apply selection:bg-energy-10/50;
+}
+
+.dark input {
+  @apply selection:bg-energy-10/40;
+}
+
 .mono {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;

src/lang/modifyAst.ts

@@ -248,7 +248,8 @@ export function mutateObjExpProp(
 export function extrudeSketch(
   node: Program,
   pathToNode: PathToNode,
-  shouldPipe = true
+  shouldPipe = true,
+  distance = 4
 ): {
   modifiedAst: Program
   pathToNode: PathToNode
@@ -274,7 +275,7 @@ export function extrudeSketch(
     getNodeFromPath<VariableDeclarator>(_node, pathToNode, 'VariableDeclarator')
 
   const extrudeCall = createCallExpressionStdLib('extrude', [
-    createLiteral(4),
+    createLiteral(distance),
     shouldPipe
       ? createPipeSubstitution()
       : {

src/lang/std/engineConnection.ts

@@ -981,10 +981,11 @@ export class EngineCommandManager {
       !(
         command.type === 'modeling_cmd_req' &&
         (command.cmd.type === 'highlight_set_entity' ||
-          command.cmd.type === 'mouse_move')
+          command.cmd.type === 'mouse_move' ||
+          command.cmd.type === 'camera_drag_move')
       )
     ) {
-      // highlight_set_entity and mouse_move are sent over the unreliable channel and are too noisy
+      // highlight_set_entity, mouse_move and camera_drag_move are sent over the unreliable channel and are too noisy
       this.addCommandLog({
         type: 'send-scene',
         data: command,

src/lang/std/sketchcombos.ts

@@ -1537,7 +1537,8 @@ export function isLiteralArrayOrStatic(
   if (!val) return false
 
   if (Array.isArray(val)) {
-    const [a, b] = val
+    const a = val[0]
+    const b = val[1]
     return isLiteralArrayOrStatic(a) && isLiteralArrayOrStatic(b)
   }
   return (
@@ -1550,7 +1551,8 @@ export function isNotLiteralArrayOrStatic(
   val: Value | [Value, Value] | [Value, Value, Value]
 ): boolean {
   if (Array.isArray(val)) {
-    const [a, b] = val
+    const a = val[0]
+    const b = val[1]
     return isNotLiteralArrayOrStatic(a) && isNotLiteralArrayOrStatic(b)
   }
   return (

src/lib/commandBarConfigs/authCommandConfig.ts

@@ -0,0 +1,17 @@
+import { CommandSetConfig } from 'lib/commandTypes'
+import { authMachine } from 'machines/authMachine'
+
+type AuthCommandSchema = {}
+
+export const authCommandBarConfig: CommandSetConfig<
+  typeof authMachine,
+  AuthCommandSchema
+> = {
+  'Log in': {
+    hide: 'both',
+  },
+  'Log out': {
+    args: [],
+    icon: 'arrowLeft',
+  },
+}

src/lib/commandBarConfigs/homeCommandConfig.ts

@@ -0,0 +1,87 @@
+import { CommandSetConfig } from 'lib/commandTypes'
+import { homeMachine } from 'machines/homeMachine'
+
+export type HomeCommandSchema = {
+  'Create project': {
+    name: string
+  }
+  'Open project': {
+    name: string
+  }
+  'Delete project': {
+    name: string
+  }
+  'Rename project': {
+    oldName: string
+    newName: string
+  }
+}
+
+export const homeCommandBarConfig: CommandSetConfig<
+  typeof homeMachine,
+  HomeCommandSchema
+> = {
+  'Open project': {
+    icon: 'arrowRight',
+    description: 'Open a project',
+    args: {
+      name: {
+        inputType: 'options',
+        required: true,
+        options: (context) =>
+          context.projects.map((p) => ({
+            name: p.name!,
+            value: p.name!,
+          })),
+      },
+    },
+  },
+  'Create project': {
+    icon: 'folderPlus',
+    description: 'Create a project',
+    args: {
+      name: {
+        inputType: 'string',
+        required: true,
+        defaultValue: (context) => context.defaultProjectName,
+      },
+    },
+  },
+  'Delete project': {
+    icon: 'close',
+    description: 'Delete a project',
+    needsReview: true,
+    args: {
+      name: {
+        inputType: 'options',
+        required: true,
+        options: (context) =>
+          context.projects.map((p) => ({
+            name: p.name!,
+            value: p.name!,
+          })),
+      },
+    },
+  },
+  'Rename project': {
+    icon: 'folder',
+    description: 'Rename a project',
+    needsReview: true,
+    args: {
+      oldName: {
+        inputType: 'options',
+        required: true,
+        options: (context) =>
+          context.projects.map((p) => ({
+            name: p.name!,
+            value: p.name!,
+          })),
+      },
+      newName: {
+        inputType: 'string',
+        required: true,
+        defaultValue: (context) => context.defaultProjectName,
+      },
+    },
+  },
+}

src/lib/commandBarConfigs/modelingCommandConfig.ts

@@ -0,0 +1,57 @@
+import { CommandSetConfig } from 'lib/commandTypes'
+import { Selections } from 'lib/selections'
+import { modelingMachine } from 'machines/modelingMachine'
+
+export const EXTRUSION_RESULTS = [
+  'new',
+  'add',
+  'subtract',
+  'intersect',
+] as const
+
+export type ModelingCommandSchema = {
+  'Enter sketch': {}
+  Extrude: {
+    selection: Selections // & { type: 'face' } would be cool to lock that down
+    // result: (typeof EXTRUSION_RESULTS)[number]
+    distance: number
+  }
+}
+
+export const modelingMachineConfig: CommandSetConfig<
+  typeof modelingMachine,
+  ModelingCommandSchema
+> = {
+  'Enter sketch': {
+    description: 'Enter sketch mode.',
+    icon: 'sketch',
+  },
+  Extrude: {
+    description: 'Pull a sketch into 3D along its normal or perpendicular.',
+    icon: 'extrude',
+    needsReview: true,
+    args: {
+      selection: {
+        inputType: 'selection',
+        selectionTypes: ['face'],
+        multiple: false, // TODO: multiple selection
+        required: true,
+      },
+      // result: {
+      //   inputType: 'options',
+      //   payload: 'add',
+      //   required: true,
+      //   options: EXTRUSION_RESULTS.map((r) => ({
+      //     name: r,
+      //     isCurrent: r === 'add',
+      //     value: r,
+      //   })),
+      // },
+      distance: {
+        inputType: 'number',
+        defaultValue: 5,
+        required: true,
+      },
+    },
+  },
+}

src/lib/commandBarConfigs/settingsCommandConfig.ts

@@ -0,0 +1,141 @@
+import { CommandSetConfig } from '../commandTypes'
+import {
+  BaseUnit,
+  Toggle,
+  UnitSystem,
+  baseUnitsUnion,
+  settingsMachine,
+} from 'machines/settingsMachine'
+import { CameraSystem, cameraSystems } from '../cameraControls'
+import { Themes } from '../theme'
+
+// SETTINGS MACHINE
+export type SettingsCommandSchema = {
+  'Set Base Unit': {
+    baseUnit: BaseUnit
+  }
+  'Set Camera Controls': {
+    cameraControls: CameraSystem
+  }
+  'Set Default Project Name': {
+    defaultProjectName: string
+  }
+  'Set Text Wrapping': {
+    textWrapping: Toggle
+  }
+  'Set Theme': {
+    theme: Themes
+  }
+  'Set Unit System': {
+    unitSystem: UnitSystem
+  }
+}
+
+export const settingsCommandBarConfig: CommandSetConfig<
+  typeof settingsMachine,
+  SettingsCommandSchema
+> = {
+  'Set Base Unit': {
+    icon: 'gear',
+    args: {
+      baseUnit: {
+        inputType: 'options',
+        required: true,
+        defaultValue: (context) => context.baseUnit,
+        options: (context) =>
+          Object.values(baseUnitsUnion).map((v) => ({
+            name: v,
+            value: v,
+            isCurrent: v === context.baseUnit,
+          })),
+      },
+    },
+  },
+  'Set Camera Controls': {
+    icon: 'gear',
+    args: {
+      cameraControls: {
+        inputType: 'options',
+        required: true,
+        defaultValue: (context) => context.cameraControls,
+        options: (context) =>
+          Object.values(cameraSystems).map((v) => ({
+            name: v,
+            value: v,
+            isCurrent: v === context.cameraControls,
+          })),
+      },
+    },
+  },
+  'Set Default Project Name': {
+    icon: 'gear',
+    hide: 'web',
+    args: {
+      defaultProjectName: {
+        inputType: 'string',
+        required: true,
+        defaultValue: (context) => context.defaultProjectName,
+      },
+    },
+  },
+  'Set Text Wrapping': {
+    icon: 'gear',
+    args: {
+      textWrapping: {
+        inputType: 'options',
+        required: true,
+        defaultValue: (context) => context.textWrapping,
+        options: (context) => [
+          {
+            name: 'On',
+            value: 'On' as Toggle,
+            isCurrent: context.textWrapping === 'On',
+          },
+          {
+            name: 'Off',
+            value: 'Off' as Toggle,
+            isCurrent: context.textWrapping === 'Off',
+          },
+        ],
+      },
+    },
+  },
+  'Set Theme': {
+    icon: 'gear',
+    args: {
+      theme: {
+        inputType: 'options',
+        required: true,
+        defaultValue: (context) => context.theme,
+        options: (context) =>
+          Object.values(Themes).map((v) => ({
+            name: v,
+            value: v,
+            isCurrent: v === context.theme,
+          })),
+      },
+    },
+  },
+  'Set Unit System': {
+    icon: 'gear',
+    args: {
+      unitSystem: {
+        inputType: 'options',
+        required: true,
+        defaultValue: (context) => context.unitSystem,
+        options: (context) => [
+          {
+            name: 'Imperial',
+            value: 'imperial' as UnitSystem,
+            isCurrent: context.unitSystem === 'imperial',
+          },
+          {
+            name: 'Metric',
+            value: 'metric' as UnitSystem,
+            isCurrent: context.unitSystem === 'metric',
+          },
+        ],
+      },
+    },
+  },
+}

src/lib/commandTypes.ts

@@ -0,0 +1,136 @@
+import { CustomIconName } from 'components/CustomIcon'
+import { AllMachines } from 'hooks/useStateMachineCommands'
+import {
+  AnyStateMachine,
+  ContextFrom,
+  EventFrom,
+  InterpreterFrom,
+} from 'xstate'
+import { Selection } from './selections'
+
+type Icon = CustomIconName
+const PLATFORMS = ['both', 'web', 'desktop'] as const
+const INPUT_TYPES = ['options', 'string', 'number', 'selection'] as const
+export type CommandInputType = (typeof INPUT_TYPES)[number]
+
+export type CommandSetSchema<T extends AnyStateMachine> = Partial<{
+  [EventType in EventFrom<T>['type']]: Record<string, any>
+}>
+
+export type CommandSet<
+  T extends AllMachines,
+  Schema extends CommandSetSchema<T>
+> = Partial<{
+  [EventType in EventFrom<T>['type']]: Command<
+    T,
+    EventFrom<T>['type'],
+    Schema[EventType]
+  >
+}>
+
+export type CommandSetConfig<
+  T extends AllMachines,
+  Schema extends CommandSetSchema<T>
+> = Partial<{
+  [EventType in EventFrom<T>['type']]: CommandConfig<
+    T,
+    EventFrom<T>['type'],
+    Schema[EventType]
+  >
+}>
+
+export type Command<
+  T extends AnyStateMachine = AnyStateMachine,
+  CommandName extends EventFrom<T>['type'] = EventFrom<T>['type'],
+  CommandSchema extends CommandSetSchema<T>[CommandName] = CommandSetSchema<T>[CommandName]
+> = {
+  name: CommandName
+  ownerMachine: T['id']
+  needsReview: boolean
+  onSubmit: (data?: CommandSchema) => void
+  onCancel?: () => void
+  args?: {
+    [ArgName in keyof CommandSchema]: CommandArgument<CommandSchema[ArgName], T>
+  }
+  description?: string
+  icon?: Icon
+  hide?: (typeof PLATFORMS)[number]
+}
+
+export type CommandConfig<
+  T extends AnyStateMachine = AnyStateMachine,
+  CommandName extends EventFrom<T>['type'] = EventFrom<T>['type'],
+  CommandSchema extends CommandSetSchema<T>[CommandName] = CommandSetSchema<T>[CommandName]
+> = Omit<
+  Command<T, CommandName, CommandSchema>,
+  'name' | 'ownerMachine' | 'onSubmit' | 'onCancel' | 'args' | 'needsReview'
+> & {
+  needsReview?: true
+  args?: {
+    [ArgName in keyof CommandSchema]: CommandArgumentConfig<
+      CommandSchema[ArgName],
+      T
+    >
+  }
+}
+
+export type CommandArgumentConfig<
+  OutputType,
+  T extends AnyStateMachine = AnyStateMachine
+> =
+  | {
+      description?: string
+      required: boolean
+      skip?: true
+      defaultValue?: OutputType | ((context: ContextFrom<T>) => OutputType)
+      payload?: OutputType
+    } & (
+      | {
+          inputType: Extract<CommandInputType, 'options'>
+          options:
+            | CommandArgumentOption<OutputType>[]
+            | ((context: ContextFrom<T>) => CommandArgumentOption<OutputType>[])
+        }
+      | {
+          inputType: Extract<CommandInputType, 'selection'>
+          selectionTypes: Selection['type'][]
+          multiple: boolean
+        }
+      | { inputType: Exclude<CommandInputType, 'options' | 'selection'> }
+    )
+
+export type CommandArgument<
+  OutputType,
+  T extends AnyStateMachine = AnyStateMachine
+> =
+  | {
+      description?: string
+      required: boolean
+      payload?: OutputType // Payload sets the initialized value and more importantly its type
+      defaultValue?: OutputType // Default value is used as the starting value for the input on this argument
+    } & (
+      | {
+          inputType: Extract<CommandInputType, 'options'>
+          options: CommandArgumentOption<OutputType>[]
+        }
+      | {
+          inputType: Extract<CommandInputType, 'selection'>
+          selectionTypes: Selection['type'][]
+          actor: InterpreterFrom<T>
+          multiple: boolean
+        }
+      | { inputType: Exclude<CommandInputType, 'options' | 'selection'> }
+    )
+
+export type CommandArgumentWithName<
+  OutputType,
+  T extends AnyStateMachine = AnyStateMachine
+> = CommandArgument<OutputType, T> & {
+  name: string
+}
+
+export type CommandArgumentOption<A> = {
+  name: string
+  isCurrent?: boolean
+  value: A
+}

src/lib/commands.ts

@@ -1,177 +0,0 @@
-import { AnyStateMachine, ContextFrom, EventFrom, StateFrom } from 'xstate'
-import { isTauri } from './isTauri'
-import { CustomIconName } from 'components/CustomIcon'
-
-type Icon = CustomIconName
-type Platform = 'both' | 'web' | 'desktop'
-type InputType = 'select' | 'string' | 'interaction'
-export type CommandArgumentOption = { name: string; isCurrent?: boolean }
-
-// Command arguments can either be defined manually
-// or flagged as needing to be looked up from the context.
-// This is useful for things like settings, where
-// we want to show the current setting value as the default.
-// The lookup is done in createMachineCommand.
-type CommandArgumentConfig<T extends AnyStateMachine> = {
-  name: string // TODO: I would love for this to be strongly-typed so we could guarantee it's a valid data payload key on the event type.
-  type: InputType
-  description?: string
-} & (
-  | {
-      type: 'select'
-      options?: CommandArgumentOption[]
-      getOptionsFromContext?: keyof ContextFrom<T>
-      defaultValue?: string
-      getDefaultValueFromContext?: keyof ContextFrom<T>
-    }
-  | {
-      type: 'string'
-      defaultValue?: string
-      getDefaultValueFromContext?: keyof ContextFrom<T>
-    }
-  | { type: 'interaction' }
-)
-
-export type CommandBarConfig<T extends AnyStateMachine> = Partial<{
-  [EventType in EventFrom<T>['type']]:
-    | {
-        args: CommandArgumentConfig<T>[]
-        formatFunction?: (args: string[]) => string
-        icon?: Icon
-        hide?: Platform
-      }
-    | {
-        hide?: Platform
-      }
-}>
-
-export type Command = {
-  owner: string
-  name: string
-  callback: Function
-  icon?: Icon
-  args?: CommandArgument[]
-  formatFunction?: (args: string[]) => string
-}
-
-export type CommandArgument = {
-  name: string
-  defaultValue?: string
-} & (
-  | {
-      type: Extract<InputType, 'select'>
-      options: CommandArgumentOption[]
-    }
-  | {
-      type: Exclude<InputType, 'select'>
-    }
-)
-
-interface CreateMachineCommandProps<T extends AnyStateMachine> {
-  type: EventFrom<T>['type']
-  state: StateFrom<T>
-  commandBarConfig?: CommandBarConfig<T>
-  send: Function
-  owner: string
-}
-
-// Creates a command with subcommands, ready for use in the CommandBar component,
-// from a more terse Command Bar Meta definition.
-export function createMachineCommand<T extends AnyStateMachine>({
-  type,
-  state,
-  commandBarConfig,
-  send,
-  owner,
-}: CreateMachineCommandProps<T>): Command | null {
-  const lookedUpMeta = commandBarConfig && commandBarConfig[type]
-  if (!lookedUpMeta) return null
-
-  // Hide commands based on platform by returning `null`
-  // so the consumer can filter them out
-  if ('hide' in lookedUpMeta) {
-    const { hide } = lookedUpMeta
-    if (hide === 'both') return null
-    else if (hide === 'desktop' && isTauri()) return null
-    else if (hide === 'web' && !isTauri()) return null
-  }
-
-  const icon = ('icon' in lookedUpMeta && lookedUpMeta.icon) || undefined
-  const formatFunction =
-    ('formatFunction' in lookedUpMeta && lookedUpMeta.formatFunction) ||
-    undefined
-
-  return {
-    name: type,
-    owner,
-    icon,
-    callback: (data: EventFrom<T, typeof type>) => {
-      if (data !== undefined && data !== null) {
-        send(type, { data })
-      } else {
-        send(type)
-      }
-    },
-    ...('args' in lookedUpMeta
-      ? {
-          args: getCommandArgumentValuesFromContext(state, lookedUpMeta.args),
-          formatFunction,
-        }
-      : {}),
-  }
-}
-
-function getCommandArgumentValuesFromContext<T extends AnyStateMachine>(
-  state: StateFrom<T>,
-  args: CommandArgumentConfig<T>[]
-): CommandArgument[] {
-  function getDefaultValue(
-    arg: CommandArgumentConfig<T> & { type: 'string' | 'select' }
-  ) {
-    if (
-      arg.type === 'select' ||
-      ('getDefaultValueFromContext' in arg && arg.getDefaultValueFromContext)
-    ) {
-      return state.context[arg.getDefaultValueFromContext]
-    } else {
-      return arg.defaultValue
-    }
-  }
-
-  return args.map((arg) => {
-    switch (arg.type) {
-      case 'interaction':
-        return {
-          name: arg.name,
-          type: 'interaction',
-        }
-      case 'string':
-        return {
-          name: arg.name,
-          type: arg.type,
-          defaultValue: arg.getDefaultValueFromContext
-            ? state.context[arg.getDefaultValueFromContext]
-            : arg.defaultValue,
-        }
-      default:
-        return {
-          name: arg.name,
-          type: arg.type,
-          defaultValue: getDefaultValue(arg),
-          options: arg.getOptionsFromContext
-            ? state.context[arg.getOptionsFromContext].map(
-                (v: string | { name: string }) => ({
-                  name: typeof v === 'string' ? v : v.name,
-                  isCurrent: v === getDefaultValue(arg),
-                })
-              )
-            : arg.getDefaultValueFromContext
-            ? arg.options?.map((v) => ({
-                ...v,
-                isCurrent: v.name === getDefaultValue(arg),
-              }))
-            : arg.options,
-        }
-    }
-  })
-}

src/lib/constants.ts

@@ -0,0 +1 @@
+export const APP_NAME = 'Modeling App'

src/lib/createMachineCommand.ts

@@ -0,0 +1,158 @@
+import { AnyStateMachine, EventFrom, InterpreterFrom, StateFrom } from 'xstate'
+import { isTauri } from './isTauri'
+import {
+  Command,
+  CommandArgument,
+  CommandArgumentConfig,
+  CommandConfig,
+  CommandSetConfig,
+  CommandSetSchema,
+} from './commandTypes'
+
+interface CreateMachineCommandProps<
+  T extends AnyStateMachine,
+  S extends CommandSetSchema<T>
+> {
+  type: EventFrom<T>['type']
+  ownerMachine: T['id']
+  state: StateFrom<T>
+  send: Function
+  actor?: InterpreterFrom<T>
+  commandBarConfig?: CommandSetConfig<T, S>
+  onCancel?: () => void
+}
+
+// Creates a command with subcommands, ready for use in the CommandBar component,
+// from a more terse Command Bar Meta definition.
+export function createMachineCommand<
+  T extends AnyStateMachine,
+  S extends CommandSetSchema<T>
+>({
+  ownerMachine,
+  type,
+  state,
+  send,
+  actor,
+  commandBarConfig,
+  onCancel,
+}: CreateMachineCommandProps<T, S>): Command<
+  T,
+  typeof type,
+  S[typeof type]
+> | null {
+  const commandConfig = commandBarConfig && commandBarConfig[type]
+  if (!commandConfig) return null
+
+  // Hide commands based on platform by returning `null`
+  // so the consumer can filter them out
+  if ('hide' in commandConfig) {
+    const { hide } = commandConfig
+    if (hide === 'both') return null
+    else if (hide === 'desktop' && isTauri()) return null
+    else if (hide === 'web' && !isTauri()) return null
+  }
+
+  const icon = ('icon' in commandConfig && commandConfig.icon) || undefined
+
+  const command: Command<T, typeof type, S[typeof type]> = {
+    name: type,
+    ownerMachine: ownerMachine,
+    icon,
+    needsReview: commandConfig.needsReview || false,
+    onSubmit: (data?: S[typeof type]) => {
+      if (data !== undefined && data !== null) {
+        send(type, { data })
+      } else {
+        send(type)
+      }
+    },
+  }
+
+  if (commandConfig.args) {
+    const newArgs = buildCommandArguments(state, commandConfig.args, actor)
+
+    command.args = newArgs
+  }
+
+  if (onCancel) {
+    command.onCancel = onCancel
+  }
+
+  return command
+}
+
+// Takes the args from a CommandConfig and creates
+// a finalized CommandArgument object for each one,
+// bundled together into the args for a Command.
+function buildCommandArguments<
+  T extends AnyStateMachine,
+  S extends CommandSetSchema<T>,
+  CommandName extends EventFrom<T>['type'] = EventFrom<T>['type']
+>(
+  state: StateFrom<T>,
+  args: CommandConfig<T, CommandName, S>['args'],
+  actor?: InterpreterFrom<T>
+): NonNullable<Command<T, CommandName, S>['args']> {
+  const newArgs = {} as NonNullable<Command<T, CommandName, S>['args']>
+
+  for (const arg in args) {
+    const argConfig = args[arg] as CommandArgumentConfig<S[typeof arg], T>
+    const newArg = buildCommandArgument(argConfig, state, actor)
+    newArgs[arg] = newArg
+  }
+
+  return newArgs
+}
+
+function buildCommandArgument<
+  O extends CommandSetSchema<T>,
+  T extends AnyStateMachine
+>(
+  arg: CommandArgumentConfig<O, T>,
+  state: StateFrom<T>,
+  actor?: InterpreterFrom<T>
+): CommandArgument<O, T> & { inputType: typeof arg.inputType } {
+  const baseCommandArgument = {
+    description: arg.description,
+    required: arg.required,
+    payload: arg.payload,
+    defaultValue:
+      arg.defaultValue instanceof Function
+        ? arg.defaultValue(state.context)
+        : arg.defaultValue,
+  } satisfies Omit<CommandArgument<O, T>, 'inputType'>
+
+  if (arg.inputType === 'options') {
+    const options = arg.options
+      ? arg.options instanceof Function
+        ? arg.options(state.context)
+        : arg.options
+      : undefined
+
+    if (!options) {
+      throw new Error('Options must be provided for options input type')
+    }
+
+    return {
+      inputType: arg.inputType,
+      ...baseCommandArgument,
+      options,
+    } satisfies CommandArgument<O, T> & { inputType: 'options' }
+  } else if (arg.inputType === 'selection') {
+    if (!actor)
+      throw new Error('Actor must be provided for selection input type')
+
+    return {
+      inputType: arg.inputType,
+      ...baseCommandArgument,
+      multiple: arg.multiple,
+      selectionTypes: arg.selectionTypes,
+      actor,
+    } satisfies CommandArgument<O, T> & { inputType: 'selection' }
+  } else {
+    return {
+      inputType: arg.inputType,
+      ...baseCommandArgument,
+    }
+  }
+}

src/lib/selections.ts

@@ -7,6 +7,10 @@ import { EditorSelection } from '@codemirror/state'
 import { kclManager } from 'lang/KclSinglton'
 import { SelectionRange } from '@uiw/react-codemirror'
 import { isOverlap } from 'lib/utils'
+import { isCursorInSketchCommandRange } from 'lang/util'
+import { Program } from 'lang/wasm'
+import { doesPipeHaveCallExp } from 'lang/queryAst'
+import { CommandArgument } from './commandTypes'
 
 export const X_AXIS_UUID = 'ad792545-7fd3-482a-a602-a93924e3055b'
 export const Y_AXIS_UUID = '680fd157-266f-4b8a-984f-cdf46b8bdf01'
@@ -371,3 +375,128 @@ function resetAndSetEngineEntitySelectionCmds(
     },
   ]
 }
+
+export function isSketchPipe(selectionRanges: Selections) {
+  return isCursorInSketchCommandRange(
+    engineCommandManager.artifactMap,
+    selectionRanges
+  )
+}
+
+export function isSelectionLastLine(
+  selectionRanges: Selections,
+  code: string,
+  i = 0
+) {
+  return selectionRanges.codeBasedSelections[i].range[1] === code.length
+}
+
+export type CommonASTNode = {
+  selection: Selection
+  ast: Program
+}
+
+export function buildCommonNodeFromSelection(
+  selectionRanges: Selections,
+  i: number
+) {
+  return {
+    selection: selectionRanges.codeBasedSelections[i],
+    ast: kclManager.ast,
+  }
+}
+
+export function nodeHasExtrude(node: CommonASTNode) {
+  return doesPipeHaveCallExp({
+    calleeName: 'extrude',
+    ...node,
+  })
+}
+
+export function nodeHasClose(node: CommonASTNode) {
+  return doesPipeHaveCallExp({
+    calleeName: 'close',
+    ...node,
+  })
+}
+
+export function canExtrudeSelection(selection: Selections) {
+  const commonNodes = selection.codeBasedSelections.map((_, i) =>
+    buildCommonNodeFromSelection(selection, i)
+  )
+  return (
+    !!isSketchPipe(selection) &&
+    commonNodes.every((n) => nodeHasClose(n)) &&
+    commonNodes.every((n) => !nodeHasExtrude(n))
+  )
+}
+
+export function canExtrudeSelectionItem(selection: Selections, i: number) {
+  const commonNode = buildCommonNodeFromSelection(selection, i)
+
+  return (
+    !!isSketchPipe(selection) &&
+    nodeHasClose(commonNode) &&
+    !nodeHasExtrude(commonNode)
+  )
+}
+
+// This accounts for non-geometry selections under "other"
+export type ResolvedSelectionType = [Selection['type'] | 'other', number]
+
+/**
+ * In the future, I'd like this function to properly return the type of each selected entity based on
+ * its code source range, so that we can show something like "0 objects" or "1 face" or "1 line, 2 edges",
+ * and then validate the selection in CommandBarSelectionInput.tsx and show the proper label.
+ * @param selection
+ * @returns
+ */
+export function getSelectionType(
+  selection: Selections
+): ResolvedSelectionType[] {
+  return selection.codeBasedSelections
+    .map((s, i) => {
+      if (canExtrudeSelectionItem(selection, i)) {
+        return ['face', 1] as ResolvedSelectionType // This is implicitly determining what a face is, which is bad
+      } else {
+        return ['other', 1] as ResolvedSelectionType
+      }
+    })
+    .reduce((acc, [type, count]) => {
+      const foundIndex = acc.findIndex((item) => item && item[0] === type)
+
+      if (foundIndex === -1) {
+        return [...acc, [type, count]]
+      } else {
+        const temp = [...acc]
+        temp[foundIndex][1] += count
+        return temp
+      }
+    }, [] as ResolvedSelectionType[])
+}
+
+export function getSelectionTypeDisplayText(
+  selection: Selections
+): string | null {
+  const selectionsByType = getSelectionType(selection)
+
+  return (selectionsByType as Exclude<typeof selectionsByType, 'none'>)
+    .map(([type, count]) => `${count} ${type}${count > 1 ? 's' : ''}`)
+    .join(', ')
+}
+
+export function canSubmitSelectionArg(
+  selectionsByType: 'none' | ResolvedSelectionType[],
+  argument: CommandArgument<unknown> & { inputType: 'selection' }
+) {
+  return (
+    selectionsByType !== 'none' &&
+    selectionsByType.every(([type, count]) => {
+      const foundIndex = argument.selectionTypes.findIndex((s) => s === type)
+      return (
+        foundIndex !== -1 &&
+        (!argument.multiple ? count < 2 && count > 0 : count > 0)
+      )
+    })
+  )
+}

src/machines/authMachine.ts

@@ -1,7 +1,6 @@
 import { createMachine, assign } from 'xstate'
 import { Models } from '@kittycad/lib'
 import withBaseURL from '../lib/withBaseURL'
-import { CommandBarConfig } from '../lib/commands'
 import { isTauri } from 'lib/isTauri'
 import { invoke } from '@tauri-apps/api'
 import { VITE_KC_API_BASE_URL } from 'env'
@@ -40,16 +39,6 @@ export type Events =
 export const TOKEN_PERSIST_KEY = 'TOKEN_PERSIST_KEY'
 const persistedToken = localStorage?.getItem(TOKEN_PERSIST_KEY) || ''
 
-export const authCommandBarConfig: CommandBarConfig<typeof authMachine> = {
-  'Log in': {
-    hide: 'both',
-  },
-  'Log out': {
-    args: [],
-    icon: 'arrowLeft',
-  },
-}
-
 export const authMachine = createMachine<UserContext, Events>(
   {
     id: 'Auth',

src/machines/commandBarMachine.ts

@@ -0,0 +1,425 @@
+import { assign, createMachine } from 'xstate'
+import {
+  Command,
+  CommandArgument,
+  CommandArgumentWithName,
+} from 'lib/commandTypes'
+import { Selections } from 'lib/selections'
+
+export const commandBarMachine = createMachine(
+  {
+    /** @xstate-layout N4IgpgJg5mDOIC5QGED2BbdBDAdhABAEJYBOAxMgDaqxgDaADALqKgAONAlgC6eo6sQAD0QBaAJwA6AGwAmAKwBmBoukAWafIAcDcSoA0IAJ6JZDaZIDs8hgzV6AjA61a1DWQF8PhtJlwFiciowUkYWJBAOWB4+AQiRBFF5CwdpcVkHS1lpVyU5QxNEh1lFGTUsrUUtOQd5SwZLLx8MbDwiUkkqGkgyAHk2MBwwwSiY-kEEswdJNWcNbPFLNMr5AsRFWUtJcVSdRR2VVMUmkF9WgI6u2ggyADFONv98WkowAGNufDeW-2GI0d443iiHESkktUUG1klTsSi0awQDgYWhmqkWjnUslBWhOZyegU61GuZAAghACN8-HhYH92FxAXFQAlRA5FpJ5FjFPYtNDpIpLOkEW4GNs4eJxJoGvJxOVcT82gSrj0AEpgdCoABuYC+8ogNOYI3psQmYlkGUkU2slhc6mkmUUCIyKLc4i0lkU8iUyjUHLlVIuJEkAGUwK8Pg8oDr-WQQ2HPpTzrTIkagUzEDkLHZkQK1CUtKCHAiNlsdjkVAdFEc-ed2oGAOJYbgACzAJAj+FIUAAruhBtxYGQACJwUPveO6pMA43AhA5UqWXOzBjS-nOR3LySqXNODTyZwONTV-GXXXPUcfHqTlOM4TrSublb5-lLewlIVySRaOrmGw-jLSI8FRPf0zzjS8HHCOlogZE1ERUEUSgPa05yQ1ZjEQeZP2-VwDzUN1zEabxTlPAkG2bVt207Hs+wHZAm1wGAvi7EgSD7DsSG7XscG4K9oOnNNEVUeQZGSOxc0qaQ7HhdDBJFeRc35extGkNI+UAgNJDIls2xwSMqK4-tJBJAB3LAYl0-AHjYLtuBjLsACN0B4djOL7XixhvBIDxUT8qj5VIkTwtQHRk8oUQcD15LMXQclcdTa00xttMojjqO42BJAANSwShOAgRsIzICB+DASQHg1VAAGtSo1HK8sbMASVSgz3JgmdMnKGYzRlbIdGXA8EX8zd3RsTY9yyY4iLxID6ySiiLP0misrq-LeF0shWxIVBAzYShGwAM229BJFq3LVsa5q3INf5r1gg9JIfXqqh0TQsiFTYrCyJZRpsXJ4oJVUNU4MBjLsxznITX5rqgjzYMsaZtGXaVNhcZFKgRd0RXUdJ6mUXQXX+jpAeB0GyQIRbuNa-jbwQcVSmhAUeTkWQ3HyGSBVKDQMyRAKAsJwNiZBshVXVLUXLSnjoeTPjUxpnmpFtcVs1cPNBq5T8fR5DrKwaHEppIomwCBoWAFEIGcinJcg6XYZnTRhJsbQJU9VlQTVtQNbqcVZhsSFxH5zoWzeSr2ya1z0qKkqypwCrqpOlaGrDiX9WtqdZYSeSEeXEplCceo1xkvQLGCmUIp0Mwck8fWQMVIOQ4spODIHYqcFK8qqpqhPuAu8P+zoCDDRlzzTCkCVWWlSxrBceTygRFxZHZNJbE2VQ5AFAO6PeevI0bmiNpY7bJF2g6jvjs7E8u9KqfTxAkK2fZYuRvdYUGjQZnqYVxRKdx-ZOHBUAgHAQQ00AyD1tgJUQCwLQMEyHUG0Gh7SOmmDuGB6gOTyVBMkDeRJIBgLahA4oFo8zWlSPUT00o0KFA9NMYKrhKwbH2GaQ81cawEljGOdskM8B4OpgkWY9MV5ZjqLUN6MlqGojoRFEo6QWYb1PC8McuCbpD1gosLYrhkTZCxNIawhYxEfW0HhCKKgzT8lBAHLS809KX37Dwm+iIWZSEinjTRy51BFnvNofM7hGZfgXBYuaOlrG9wyiZMya1IxWRsnY4eDi2TONsK45IaghQbEkO4VIKlsaVE2AE8iQTxZN2WufCJMS7o6JSBKNQLp7CT35EKZw2wnDVDyCvBczDmg10NsbYyZS7aZHBNU58q8sTQgxnud+kVsjyQzHrTprDLh11DjY+AyjwFy00DQ2EaQBSLAPLIDGWRNw2BUiXHkwVCJeCAA */
+    context: {
+      commands: [] as Command[],
+      selectedCommand: undefined as Command | undefined,
+      currentArgument: undefined as
+        | (CommandArgument<unknown> & { name: string })
+        | undefined,
+      selectionRanges: {
+        otherSelections: [],
+        codeBasedSelections: [],
+      } as Selections,
+      argumentsToSubmit: {} as { [x: string]: unknown },
+    },
+    id: 'Command Bar',
+    initial: 'Closed',
+    states: {
+      Closed: {
+        on: {
+          Open: {
+            target: 'Selecting command',
+          },
+
+          'Find and select command': {
+            target: 'Command selected',
+            actions: [
+              'Find and select command',
+              'Initialize arguments to submit',
+            ],
+          },
+
+          'Add commands': {
+            target: 'Closed',
+
+            actions: [
+              assign({
+                commands: (context, event) =>
+                  [...context.commands, ...event.data.commands].sort(
+                    sortCommands
+                  ),
+              }),
+            ],
+
+            internal: true,
+          },
+
+          'Remove commands': {
+            target: 'Closed',
+
+            actions: [
+              assign({
+                commands: (context, event) =>
+                  context.commands.filter(
+                    (c) =>
+                      !event.data.commands.some(
+                        (c2) =>
+                          c2.name === c.name &&
+                          c2.ownerMachine === c.ownerMachine
+                      )
+                  ),
+              }),
+            ],
+
+            internal: true,
+          },
+        },
+      },
+
+      'Selecting command': {
+        on: {
+          'Select command': {
+            target: 'Command selected',
+            actions: ['Set selected command', 'Initialize arguments to submit'],
+          },
+        },
+      },
+
+      'Command selected': {
+        always: [
+          {
+            target: 'Closed',
+            cond: 'Command has no arguments',
+            actions: ['Execute command'],
+          },
+          {
+            target: 'Gathering arguments',
+            actions: [
+              assign({
+                currentArgument: (context, event) => {
+                  const { selectedCommand } = context
+                  if (!(selectedCommand && selectedCommand.args))
+                    return undefined
+                  const argName = Object.keys(selectedCommand.args)[0]
+                  return {
+                    ...selectedCommand.args[argName],
+                    name: argName,
+                  }
+                },
+              }),
+            ],
+          },
+        ],
+      },
+
+      'Gathering arguments': {
+        states: {
+          'Awaiting input': {
+            on: {
+              'Submit argument': {
+                target: 'Validating',
+              },
+            },
+          },
+
+          Validating: {
+            invoke: {
+              src: 'Validate argument',
+              id: 'validateArgument',
+              onDone: {
+                target: '#Command Bar.Checking Arguments',
+                actions: [
+                  assign({
+                    argumentsToSubmit: (context, event) => {
+                      const [argName, argData] = Object.entries(event.data)[0]
+                      const { currentArgument } = context
+                      if (!currentArgument) return {}
+                      return {
+                        ...context.argumentsToSubmit,
+                        [argName]: argData,
+                      }
+                    },
+                  }),
+                ],
+              },
+              onError: [
+                {
+                  target: 'Awaiting input',
+                },
+              ],
+            },
+          },
+        },
+
+        initial: 'Awaiting input',
+
+        on: {
+          'Change current argument': {
+            target: 'Gathering arguments',
+            internal: true,
+            actions: ['Set current argument'],
+          },
+
+          'Deselect command': {
+            target: 'Selecting command',
+            actions: [
+              assign({
+                selectedCommand: (_c, _e) => undefined,
+              }),
+            ],
+          },
+        },
+      },
+
+      Review: {
+        entry: ['Clear current argument'],
+        on: {
+          'Submit command': {
+            target: 'Closed',
+            actions: ['Execute command'],
+          },
+
+          'Add argument': {
+            target: 'Gathering arguments',
+            actions: ['Set current argument'],
+          },
+
+          'Remove argument': {
+            target: 'Review',
+            actions: [
+              assign({
+                argumentsToSubmit: (context, event) => {
+                  const argName = Object.keys(event.data)[0]
+                  const { argumentsToSubmit } = context
+                  const newArgumentsToSubmit = { ...argumentsToSubmit }
+                  newArgumentsToSubmit[argName] = undefined
+                  return newArgumentsToSubmit
+                },
+              }),
+            ],
+          },
+
+          'Edit argument': {
+            target: 'Gathering arguments',
+            actions: ['Set current argument'],
+          },
+        },
+      },
+
+      'Checking Arguments': {
+        invoke: {
+          src: 'Validate all arguments',
+          id: 'validateArguments',
+          onDone: [
+            {
+              target: 'Review',
+              cond: 'Command needs review',
+            },
+            {
+              target: 'Closed',
+              actions: 'Execute command',
+            },
+          ],
+          onError: [
+            {
+              target: 'Gathering arguments',
+              actions: ['Set current argument'],
+            },
+          ],
+        },
+      },
+    },
+    on: {
+      Close: {
+        target: '.Closed',
+      },
+
+      Clear: {
+        target: '#Command Bar',
+        internal: true,
+        actions: ['Clear argument data'],
+      },
+    },
+    schema: {
+      events: {} as
+        | { type: 'Open' }
+        | { type: 'Close' }
+        | { type: 'Clear' }
+        | {
+            type: 'Select command'
+            data: { command: Command }
+          }
+        | { type: 'Deselect command' }
+        | { type: 'Submit command'; data: { [x: string]: unknown } }
+        | {
+            type: 'Add argument'
+            data: { argument: CommandArgumentWithName<unknown> }
+          }
+        | {
+            type: 'Remove argument'
+            data: { [x: string]: CommandArgumentWithName<unknown> }
+          }
+        | {
+            type: 'Edit argument'
+            data: { arg: CommandArgumentWithName<unknown> }
+          }
+        | {
+            type: 'Add commands'
+            data: { commands: Command[] }
+          }
+        | {
+            type: 'Remove commands'
+            data: { commands: Command[] }
+          }
+        | { type: 'Submit argument'; data: { [x: string]: unknown } }
+        | {
+            type: 'done.invoke.validateArguments'
+            data: { [x: string]: unknown }
+          }
+        | {
+            type: 'error.platform.validateArguments'
+            data: { message: string; arg: CommandArgumentWithName<unknown> }
+          }
+        | {
+            type: 'Find and select command'
+            data: { name: string; ownerMachine: string }
+          }
+        | {
+            type: 'Change current argument'
+            data: { arg: CommandArgumentWithName<unknown> }
+          },
+    },
+    predictableActionArguments: true,
+    preserveActionOrder: true,
+  },
+  {
+    actions: {
+      'Execute command': (context, event) => {
+        const { selectedCommand } = context
+        if (!selectedCommand) return
+        if (selectedCommand?.args) {
+          selectedCommand?.onSubmit(
+            event.type === 'Submit command' ||
+              event.type === 'done.invoke.validateArguments'
+              ? event.data
+              : undefined
+          )
+        } else {
+          selectedCommand?.onSubmit()
+        }
+      },
+      'Clear current argument': assign({
+        currentArgument: undefined,
+      }),
+      'Set current argument': assign({
+        currentArgument: (context, event) => {
+          switch (event.type) {
+            case 'error.platform.validateArguments':
+              return event.data.arg
+            case 'Edit argument':
+              return event.data.arg
+            case 'Change current argument':
+              return event.data.arg
+            default:
+              return context.currentArgument
+          }
+        },
+      }),
+      'Clear argument data': assign({
+        selectedCommand: undefined,
+        currentArgument: undefined,
+        argumentsToSubmit: {},
+      }),
+      'Set selected command': assign({
+        selectedCommand: (c, e) =>
+          e.type === 'Select command' ? e.data.command : c.selectedCommand,
+      }),
+      'Find and select command': assign({
+        selectedCommand: (c, e) => {
+          if (e.type !== 'Find and select command') return c.selectedCommand
+          const found = c.commands.find(
+            (cmd) =>
+              cmd.name === e.data.name &&
+              cmd.ownerMachine === e.data.ownerMachine
+          )
+
+          return !!found ? found : c.selectedCommand
+        },
+      }),
+      'Initialize arguments to submit': assign({
+        argumentsToSubmit: (c, e) => {
+          if (
+            e.type !== 'Select command' &&
+            e.type !== 'Find and select command'
+          )
+            return c.argumentsToSubmit
+          const command =
+            'command' in e.data ? e.data.command : c.selectedCommand!
+          if (!command.args) return {}
+          const args: { [x: string]: unknown } = {}
+          for (const [argName, arg] of Object.entries(command.args)) {
+            args[argName] = arg.payload
+          }
+          return args
+        },
+      }),
+    },
+    guards: {
+      'Command needs review': (context, _) =>
+        context.selectedCommand?.needsReview || false,
+    },
+    services: {
+      'Validate argument': (context, event) => {
+        if (event.type !== 'Submit argument') return Promise.reject()
+        return new Promise((resolve, reject) => {
+          // TODO: figure out if we should validate argument data here or in the form itself,
+          // and if we should support people configuring a argument's validation function
+
+          resolve(event.data)
+        })
+      },
+      'Validate all arguments': (context, _) => {
+        return new Promise((resolve, reject) => {
+          for (const [argName, arg] of Object.entries(
+            context.argumentsToSubmit
+          )) {
+            let argConfig = context.selectedCommand!.args![argName]
+
+            if (
+              typeof arg !== typeof argConfig.payload &&
+              typeof arg !== typeof argConfig.defaultValue &&
+              'options' in argConfig &&
+              typeof arg !== typeof argConfig.options[0].value
+            ) {
+              return reject({
+                message: 'Argument payload is of the wrong type',
+                arg: {
+                  ...argConfig,
+                  name: argName,
+                },
+              })
+            }
+
+            if (!arg && argConfig.required) {
+              return reject({
+                message: 'Argument payload is falsy but is required',
+                arg: {
+                  ...argConfig,
+                  name: argName,
+                },
+              })
+            }
+          }
+
+          return resolve(context.argumentsToSubmit)
+        })
+      },
+    },
+    delays: {},
+  }
+)
+
+function sortCommands(a: Command, b: Command) {
+  if (b.ownerMachine === 'auth') return -1
+  if (a.ownerMachine === 'auth') return 1
+  return a.name.localeCompare(b.name)
+}

src/machines/commandBarMachine.typegen.ts

@@ -0,0 +1,74 @@
+// This file was automatically generated. Edits will be overwritten
+
+export interface Typegen0 {
+  '@@xstate/typegen': true
+  internalEvents: {
+    '': { type: '' }
+    'done.invoke.validateArgument': {
+      type: 'done.invoke.validateArgument'
+      data: unknown
+      __tip: 'See the XState TS docs to learn how to strongly type this.'
+    }
+    'done.invoke.validateArguments': {
+      type: 'done.invoke.validateArguments'
+      data: unknown
+      __tip: 'See the XState TS docs to learn how to strongly type this.'
+    }
+    'error.platform.validateArgument': {
+      type: 'error.platform.validateArgument'
+      data: unknown
+    }
+    'error.platform.validateArguments': {
+      type: 'error.platform.validateArguments'
+      data: unknown
+    }
+    'xstate.init': { type: 'xstate.init' }
+  }
+  invokeSrcNameMap: {
+    'Validate all arguments': 'done.invoke.validateArguments'
+    'Validate argument': 'done.invoke.validateArgument'
+  }
+  missingImplementations: {
+    actions:
+      | 'Add arguments'
+      | 'Close dialog'
+      | 'Execute command'
+      | 'Open dialog'
+    delays: never
+    guards: never
+    services: never
+  }
+  eventsCausingActions: {
+    'Add arguments': 'done.invoke.validateArguments'
+    'Add commands': 'Add commands'
+    'Close dialog': 'Close'
+    'Execute command': '' | 'Submit'
+    'Open dialog': 'Open'
+    'Remove argument': 'Remove argument'
+    'Remove commands': 'Remove commands'
+    'Set current argument':
+      | 'Add argument'
+      | 'Edit argument'
+      | 'error.platform.validateArguments'
+  }
+  eventsCausingDelays: {}
+  eventsCausingGuards: {
+    'Arguments are ready': 'done.invoke.validateArguments'
+    'Command has no arguments': ''
+  }
+  eventsCausingServices: {
+    'Validate all arguments': 'done.invoke.validateArgument'
+    'Validate argument': 'Submit'
+  }
+  matchesStates:
+    | 'Checking Arguments'
+    | 'Closed'
+    | 'Command selected'
+    | 'Gathering arguments'
+    | 'Gathering arguments.Awaiting input'
+    | 'Gathering arguments.Validating'
+    | 'Review'
+    | 'Selecting command'
+    | { 'Gathering arguments'?: 'Awaiting input' | 'Validating' }
+  tags: never
+}

src/machines/homeMachine.ts

@@ -1,56 +1,6 @@
 import { assign, createMachine } from 'xstate'
 import { ProjectWithEntryPointMetadata } from '../Router'
-import { CommandBarConfig } from '../lib/commands'
-
-export const homeCommandConfig: CommandBarConfig<typeof homeMachine> = {
-  'Create project': {
-    icon: 'folderPlus',
-    args: [
-      {
-        name: 'name',
-        type: 'string',
-        getDefaultValueFromContext: 'defaultProjectName',
-      },
-    ],
-  },
-  'Open project': {
-    icon: 'arrowRight',
-    args: [
-      {
-        name: 'name',
-        type: 'select',
-        getOptionsFromContext: 'projects',
-      },
-    ],
-  },
-  'Delete project': {
-    icon: 'close',
-    args: [
-      {
-        name: 'name',
-        type: 'select',
-        getOptionsFromContext: 'projects',
-      },
-    ],
-  },
-  'Rename project': {
-    icon: 'folder',
-    formatFunction: (args: string[]) =>
-      `Rename project "${args[0]}" to "${args[1]}"`,
-    args: [
-      {
-        name: 'oldName',
-        type: 'select',
-        getOptionsFromContext: 'projects',
-      },
-      {
-        name: 'newName',
-        type: 'string',
-        getDefaultValueFromContext: 'defaultProjectName',
-      },
-    ],
-  },
-}
+import { HomeCommandSchema } from 'lib/commandBarConfigs/homeCommandConfig'
 
 export const homeMachine = createMachine(
   {
@@ -188,10 +138,10 @@ export const homeMachine = createMachine(
 
     schema: {
       events: {} as
-        | { type: 'Open project'; data: { name: string } }
-        | { type: 'Rename project'; data: { oldName: string; newName: string } }
-        | { type: 'Create project'; data: { name: string } }
-        | { type: 'Delete project'; data: { name: string } }
+        | { type: 'Open project'; data: HomeCommandSchema['Open project'] }
+        | { type: 'Rename project'; data: HomeCommandSchema['Rename project'] }
+        | { type: 'Create project'; data: HomeCommandSchema['Create project'] }
+        | { type: 'Delete project'; data: HomeCommandSchema['Delete project'] }
         | { type: 'navigate'; data: { name: string } }
         | {
             type: 'done.invoke.read-projects'

src/machines/modelingMachine.typegen.ts

@@ -32,14 +32,14 @@
 "Get vertical info": "done.invoke.get-vertical-info";
         };
         missingImplementations: {
-          actions: "AST add line segment" | "AST start new sketch" | "Modify AST" | "Set selection" | "Update code selection cursors" | "create path" | "set tool" | "show default planes" | "sketch exit execute" | "toast extrude failed";
+          actions: "AST add line segment" | "AST start new sketch" | "Modify AST" | "Set selection" | "Update code selection cursors" | "create path" | "set tool" | "show default planes" | "sketch exit execute";
           delays: never;
-          guards: "Selection contains axis" | "Selection contains edge" | "Selection contains face" | "Selection contains line" | "Selection contains point" | "Selection is not empty" | "Selection is one face";
+          guards: "Selection contains axis" | "Selection contains edge" | "Selection contains face" | "Selection contains line" | "Selection contains point" | "Selection is not empty" | "Selection is one face" | "has valid extrude selection";
           services: "Get ABS X info" | "Get ABS Y info" | "Get angle info" | "Get horizontal info" | "Get length info" | "Get perpendicular distance info" | "Get vertical info";
         };
         eventsCausingActions: {
           "AST add line segment": "Add point";
-"AST extrude": "" | "extrude intent";
+"AST extrude": "Extrude";
 "AST start new sketch": "Add point";
 "Add to code-based selection": "Deselect point" | "Deselect segment" | "Select all" | "Select edge" | "Select face" | "Select point" | "Select segment";
 "Add to other selection": "Select axis";
@@ -63,7 +63,7 @@
 "edit mode enter": "Enter sketch" | "Re-execute";
 "edit_mode_exit": "Cancel";
 "equip select": "CancelSketch" | "Constrain equal length" | "Constrain horizontally align" | "Constrain parallel" | "Constrain remove constraints" | "Constrain snap to X" | "Constrain snap to Y" | "Constrain vertically align" | "Deselect point" | "Deselect segment" | "Enter sketch" | "Make segment horizontal" | "Make segment vertical" | "Re-execute" | "Select default plane" | "Select point" | "Select segment" | "Set selection" | "done.invoke.get-abs-x-info" | "done.invoke.get-abs-y-info" | "done.invoke.get-angle-info" | "done.invoke.get-horizontal-info" | "done.invoke.get-length-info" | "done.invoke.get-perpendicular-distance-info" | "done.invoke.get-vertical-info" | "error.platform.get-abs-x-info" | "error.platform.get-abs-y-info" | "error.platform.get-angle-info" | "error.platform.get-horizontal-info" | "error.platform.get-length-info" | "error.platform.get-perpendicular-distance-info" | "error.platform.get-vertical-info";
-"hide default planes": "Cancel" | "Select default plane" | "xstate.stop";
+"hide default planes": "Cancel" | "Select default plane" | "Set selection" | "xstate.stop";
 "reset sketch metadata": "Cancel" | "Select default plane";
 "set default plane id": "Select default plane";
 "set sketch metadata": "Enter sketch";
@@ -72,9 +72,8 @@
 "set tool line": "Equip tool";
 "set tool move": "Equip move tool" | "Re-execute" | "Set selection";
 "show default planes": "Enter sketch";
-"sketch exit execute": "Cancel" | "Complete line" | "xstate.stop";
+"sketch exit execute": "Cancel" | "Complete line" | "Set selection" | "xstate.stop";
 "sketch mode enabled": "Enter sketch" | "Re-execute" | "Select default plane";
-"toast extrude failed": "";
         };
         eventsCausingDelays: {
           
@@ -105,8 +104,7 @@
 "Selection is one face": "Enter sketch";
 "can move": "";
 "can move with execute": "";
-"has no selection": "extrude intent";
-"has valid extrude selection": "" | "extrude intent";
+"has valid extrude selection": "Extrude";
 "is editing existing sketch": "";
         };
         eventsCausingServices: {
@@ -118,7 +116,7 @@
 "Get perpendicular distance info": "Constrain perpendicular distance";
 "Get vertical info": "Constrain vertical distance";
         };
-        matchesStates: "Sketch" | "Sketch no face" | "Sketch.Await ABS X info" | "Sketch.Await ABS Y info" | "Sketch.Await angle info" | "Sketch.Await horizontal distance info" | "Sketch.Await length info" | "Sketch.Await perpendicular distance info" | "Sketch.Await vertical distance info" | "Sketch.Line Tool" | "Sketch.Line Tool.Done" | "Sketch.Line Tool.Init" | "Sketch.Line Tool.No Points" | "Sketch.Line Tool.Point Added" | "Sketch.Line Tool.Segment Added" | "Sketch.Move Tool" | "Sketch.Move Tool.Move init" | "Sketch.Move Tool.Move with execute" | "Sketch.Move Tool.Move without re-execute" | "Sketch.Move Tool.No move" | "Sketch.SketchIdle" | "awaiting selection" | "checking selection" | "idle" | { "Sketch"?: "Await ABS X info" | "Await ABS Y info" | "Await angle info" | "Await horizontal distance info" | "Await length info" | "Await perpendicular distance info" | "Await vertical distance info" | "Line Tool" | "Move Tool" | "SketchIdle" | { "Line Tool"?: "Done" | "Init" | "No Points" | "Point Added" | "Segment Added";
+        matchesStates: "Sketch" | "Sketch no face" | "Sketch.Await ABS X info" | "Sketch.Await ABS Y info" | "Sketch.Await angle info" | "Sketch.Await horizontal distance info" | "Sketch.Await length info" | "Sketch.Await perpendicular distance info" | "Sketch.Await vertical distance info" | "Sketch.Line Tool" | "Sketch.Line Tool.Done" | "Sketch.Line Tool.Init" | "Sketch.Line Tool.No Points" | "Sketch.Line Tool.Point Added" | "Sketch.Line Tool.Segment Added" | "Sketch.Move Tool" | "Sketch.Move Tool.Move init" | "Sketch.Move Tool.Move with execute" | "Sketch.Move Tool.Move without re-execute" | "Sketch.Move Tool.No move" | "Sketch.SketchIdle" | "idle" | { "Sketch"?: "Await ABS X info" | "Await ABS Y info" | "Await angle info" | "Await horizontal distance info" | "Await length info" | "Await perpendicular distance info" | "Await vertical distance info" | "Line Tool" | "Move Tool" | "SketchIdle" | { "Line Tool"?: "Done" | "Init" | "No Points" | "Point Added" | "Segment Added";
 "Move Tool"?: "Move init" | "Move with execute" | "Move without re-execute" | "No move"; }; };
         tags: never;
       }

src/machines/settingsMachine.ts

@@ -1,7 +1,6 @@
 import { assign, createMachine } from 'xstate'
-import { CommandBarConfig } from '../lib/commands'
 import { Themes, getSystemTheme, setThemeClass } from '../lib/theme'
-import { CameraSystem, cameraSystems } from 'lib/cameraControls'
+import { CameraSystem } from 'lib/cameraControls'
 import { Models } from '@kittycad/lib'
 
 export const DEFAULT_PROJECT_NAME = 'project-$nnn'
@@ -24,85 +23,6 @@ export type Toggle = 'On' | 'Off'
 
 export const SETTINGS_PERSIST_KEY = 'SETTINGS_PERSIST_KEY'
 
-export const settingsCommandBarConfig: CommandBarConfig<
-  typeof settingsMachine
-> = {
-  'Set Base Unit': {
-    icon: 'gear',
-    args: [
-      {
-        name: 'baseUnit',
-        type: 'select',
-        getDefaultValueFromContext: 'baseUnit',
-        options: Object.values(baseUnitsUnion).map((v) => ({ name: v })),
-      },
-    ],
-  },
-  'Set Camera Controls': {
-    icon: 'gear',
-    args: [
-      {
-        name: 'cameraControls',
-        type: 'select',
-        getDefaultValueFromContext: 'cameraControls',
-        options: Object.values(cameraSystems).map((v) => ({ name: v })),
-      },
-    ],
-  },
-  'Set Default Directory': {
-    hide: 'both',
-  },
-  'Set Default Project Name': {
-    icon: 'gear',
-    hide: 'web',
-    args: [
-      {
-        name: 'defaultProjectName',
-        type: 'string',
-        getDefaultValueFromContext: 'defaultProjectName',
-      },
-    ],
-  },
-  'Set Onboarding Status': {
-    hide: 'both',
-  },
-  'Set Text Wrapping': {
-    icon: 'gear',
-    args: [
-      {
-        name: 'textWrapping',
-        type: 'select',
-        getDefaultValueFromContext: 'textWrapping',
-        options: [{ name: 'On' }, { name: 'Off' }],
-      },
-    ],
-  },
-  'Set Theme': {
-    icon: 'gear',
-    args: [
-      {
-        name: 'theme',
-        type: 'select',
-        getDefaultValueFromContext: 'theme',
-        options: Object.values(Themes).map((v): { name: string } => ({
-          name: v,
-        })),
-      },
-    ],
-  },
-  'Set Unit System': {
-    icon: 'gear',
-    args: [
-      {
-        name: 'unitSystem',
-        type: 'select',
-        getDefaultValueFromContext: 'unitSystem',
-        options: [{ name: UnitSystem.Imperial }, { name: UnitSystem.Metric }],
-      },
-    ],
-  },
-}
-
 export const settingsMachine = createMachine(
   {
     /** @xstate-layout N4IgpgJg5mDOIC5QGUwBc0EsB2VYDpMIAbMAYlTQAIAVACzAFswBtABgF1FQAHAe1iYsfbNxAAPRAA42+AEwB2KQFYAzGznKAnADZli1QBoQAT2kBGKfm37lOned3nzqgL6vjlLLgJFSFdCoAETAAMwBDAFdiagAFACc+ACswAGNqADlw5nYuJBB+QWFRfMkEABY5fDYa2rra83LjMwQdLWV8BXLyuxlVLU1Ld090bzxCEnJKYLComODMeLS0PniTXLFCoUwRMTK7fC1zNql7NgUjtnKjU0RlBSqpLVUVPVUda60tYZAvHHG-FNAgBVbBCKjIEywNBMDb5LbFPaILqdfRSORsS4qcxXZqIHqyK6qY4XOxsGTKco-P4+Cb+aYAIXCsDAVFBQjhvAE212pWkskUKnUml0+gUNxaqkU+EccnKF1UCnucnMcjcHl+o3+vkmZBofCgUFIMwARpEoFRYuFsGBiJyCtzEXzWrJlGxlKdVFKvfY1XiEBjyvhVOVzBdzu13pYFNStbTAQFqAB5bAmvjheIQf4QtDhNCRWD2hE7EqgfayHTEh7lHQNSxSf1Scz4cpHHFyFVujTKczuDXYPgQOBiGl4TaOktIhAAWg6X3nC4Xp39050sYw2rpYHHRUnztVhPJqmUlIGbEriv9WhrLZ6uibHcqUr7riAA */

src/routes/Home.tsx

@@ -17,7 +17,7 @@ import { Link } from 'react-router-dom'
 import { ProjectWithEntryPointMetadata, HomeLoaderData } from '../Router'
 import Loading from '../components/Loading'
 import { useMachine } from '@xstate/react'
-import { homeCommandConfig, homeMachine } from '../machines/homeMachine'
+import { homeMachine } from '../machines/homeMachine'
 import { ContextFrom, EventFrom } from 'xstate'
 import { paths } from '../Router'
 import {
@@ -30,11 +30,12 @@ import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
 import { useCommandsContext } from 'hooks/useCommandsContext'
 import { DEFAULT_PROJECT_NAME } from 'machines/settingsMachine'
 import { sep } from '@tauri-apps/api/path'
+import { homeCommandBarConfig } from 'lib/commandBarConfigs/homeCommandConfig'
 
 // This route only opens in the Tauri desktop context for now,
 // as defined in Router.tsx, so we can use the Tauri APIs and types.
 const Home = () => {
-  const { commands, setCommandBarOpen } = useCommandsContext()
+  const { commandBarSend } = useCommandsContext()
   const navigate = useNavigate()
   const { projects: loadedProjects } = useLoaderData() as HomeLoaderData
   const {
@@ -56,7 +57,7 @@ const Home = () => {
         event: EventFrom<typeof homeMachine>
       ) => {
         if (event.data && 'name' in event.data) {
-          setCommandBarOpen(false)
+          commandBarSend({ type: 'Close' })
           navigate(
             `${paths.FILE}/${encodeURIComponent(
               context.defaultDirectory + sep + event.data.name
@@ -143,12 +144,11 @@ const Home = () => {
 
   const isSortByModified = sort?.includes('modified') || !sort || sort === null
 
-  useStateMachineCommands<typeof homeMachine>({
-    commands,
+  useStateMachineCommands({
+    machineId: 'home',
     send,
     state,
-    commandBarConfig: homeCommandConfig,
-    owner: 'home',
+    commandBarConfig: homeCommandBarConfig,
   })
 
   useEffect(() => {

src/routes/Onboarding/Camera.tsx

@@ -27,7 +27,7 @@ export default function Units() {
     <div className="fixed inset-0 z-50 grid items-end justify-start px-4 pointer-events-none">
       <div
         className={
-          'max-w-2xl flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
+          'max-w-2xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
           (buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >

src/routes/Onboarding/CmdK.tsx

@@ -1,7 +1,6 @@
+import usePlatform from 'hooks/usePlatform'
 import { OnboardingButtons, onboardingPaths, useDismiss, useNextClick } from '.'
 import { useStore } from '../../useStore'
-import { Platform, platform } from '@tauri-apps/api/os'
-import { useEffect, useState } from 'react'
 
 export default function CmdK() {
   const { buttonDownInStream } = useStore((s) => ({
@@ -9,41 +8,34 @@ export default function CmdK() {
   }))
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.USER_MENU)
-  const [platformName, setPlatformName] = useState<Platform | ''>('')
-
-  useEffect(() => {
-    async function getPlatform() {
-      setPlatformName(await platform())
-    }
-    void getPlatform()
-  }, [setPlatformName])
+  const platformName = usePlatform()
 
   return (
     <div className="fixed inset-0 z-50 grid items-end justify-center pointer-events-none">
       <div
         className={
-          'max-w-full xl:max-w-4xl flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
+          'max-w-full xl:max-w-4xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
           (buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >
         <h2 className="text-2xl">Command Bar</h2>
         <p className="my-4">
           Press{' '}
-          {platformName === 'win32' ? (
+          {platformName === 'darwin' ? (
             <>
-              <kbd>Win</kbd> + <kbd>/</kbd>
+              <kbd>⌘</kbd> + <kbd>K</kbd>
             </>
           ) : (
             <>
-              <kbd>OS</kbd> + <kbd>K</kbd>
+              <kbd>Ctrl</kbd> + <kbd>/</kbd>
             </>
           )}{' '}
           to open the command bar. Try changing your theme with it.
         </p>
         <p className="my-4">
           We are working on a command bar that will allow you to quickly see and
-          search for any available commands. We are building KittyCAD Modeling
-          App's state management system on top of{' '}
+          search for any available commands. We are building Zoo Modeling App's
+          state management system on top of{' '}
           <a
             href="https://xstate.js.org/"
             rel="noreferrer noopener"

src/routes/Onboarding/CodeEditor.tsx

@@ -17,7 +17,7 @@ export default function CodeEditor() {
       ></div>
       <div
         className={
-          'z-10 max-w-xl h-3/4 flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
+          'z-10 max-w-xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg h-3/4 flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
           (buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >

src/routes/Onboarding/Export.tsx

@@ -1,3 +1,4 @@
+import { APP_NAME } from 'lib/constants'
 import { OnboardingButtons, onboardingPaths, useDismiss, useNextClick } from '.'
 import { useStore } from '../../useStore'
 
@@ -12,7 +13,7 @@ export default function Export() {
     <div className="fixed grid justify-center items-end inset-0 z-50 pointer-events-none">
       <div
         className={
-          'max-w-full xl:max-w-2xl flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
+          'max-w-full xl:max-w-2xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
           (buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >
@@ -22,9 +23,9 @@ export default function Export() {
             Try opening the project menu and clicking "Export Model".
           </p>
           <p className="my-4">
-            KittyCAD Modeling App uses{' '}
+            {APP_NAME} uses{' '}
             <a
-              href="https://kittycad.io/gltf-format-extension"
+              href="https://zoo.dev/gltf-format-extension"
               rel="noopener noreferrer"
               target="_blank"
             >
@@ -32,7 +33,7 @@ export default function Export() {
             </a>{' '}
             for the GLTF file format.{' '}
             <a
-              href="https://kittycad.io/docs/api/convert-cad-file"
+              href="https://zoo.dev/docs/api/convert-cad-file"
               rel="noopener noreferrer"
               target="_blank"
             >