Bump clap from 4.5.23 to 4.5.27 in /src/wasm-lib (#5152)

Bumps [clap](https://github.com/clap-rs/clap) from 4.5.23 to 4.5.27.
- [Release notes](https://github.com/clap-rs/clap/releases)
- [Changelog](https://github.com/clap-rs/clap/blob/master/CHANGELOG.md)
- [Commits](https://github.com/clap-rs/clap/compare/clap_complete-v4.5.23...clap_complete-v4.5.27)

---
updated-dependencies:
- dependency-name: clap
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

e2e/playwright/command-bar-tests.spec.ts

@@ -1,7 +1,8 @@
 import { test, expect } from './zoo-test'
-
-import { getUtils } from './test-utils'
+import * as fsp from 'fs/promises'
+import { executorInputPath, getUtils } from './test-utils'
 import { KCL_DEFAULT_LENGTH } from 'lib/constants'
+import path from 'path'
 
 test.describe('Command bar tests', () => {
   test('Extrude from command bar selects extrude line after', async ({
@@ -305,4 +306,132 @@ test.describe('Command bar tests', () => {
     await arcToolCommand.click()
     await expect(arcToolButton).toHaveAttribute('aria-pressed', 'true')
   })
+
+  test(`Reacts to query param to open "import from URL" command`, async ({
+    page,
+    cmdBar,
+    editor,
+    homePage,
+  }) => {
+    await test.step(`Prepare and navigate to home page with query params`, async () => {
+      const targetURL = `?create-file&name=test&units=mm&code=ZXh0cnVzaW9uRGlzdGFuY2UgPSAxMg%3D%3D&ask-open-desktop`
+      await homePage.expectState({
+        projectCards: [],
+        sortBy: 'last-modified-desc',
+      })
+      await page.goto(page.url() + targetURL)
+      expect(page.url()).toContain(targetURL)
+    })
+
+    await test.step(`Submit the command`, async () => {
+      await cmdBar.expectState({
+        stage: 'arguments',
+        commandName: 'Import file from URL',
+        currentArgKey: 'method',
+        currentArgValue: '',
+        headerArguments: {
+          Method: '',
+          Name: 'test',
+          Code: '1 line',
+        },
+        highlightedHeaderArg: 'method',
+      })
+      await cmdBar.selectOption({ name: 'New Project' }).click()
+      await cmdBar.expectState({
+        stage: 'review',
+        commandName: 'Import file from URL',
+        headerArguments: {
+          Method: 'New project',
+          Name: 'test',
+          Code: '1 line',
+        },
+      })
+      await cmdBar.progressCmdBar()
+    })
+
+    await test.step(`Ensure we created the project and are in the modeling scene`, async () => {
+      await editor.expectEditor.toContain('extrusionDistance = 12')
+    })
+  })
+
+  test(`"import from URL" can add to existing project`, async ({
+    page,
+    cmdBar,
+    editor,
+    homePage,
+    toolbar,
+    context,
+  }) => {
+    await context.folderSetupFn(async (dir) => {
+      const testProjectDir = path.join(dir, 'testProjectDir')
+      await Promise.all([fsp.mkdir(testProjectDir, { recursive: true })])
+      await Promise.all([
+        fsp.copyFile(
+          executorInputPath('cylinder.kcl'),
+          path.join(testProjectDir, 'main.kcl')
+        ),
+      ])
+    })
+    await test.step(`Prepare and navigate to home page with query params`, async () => {
+      const targetURL = `?create-file&name=test&units=mm&code=ZXh0cnVzaW9uRGlzdGFuY2UgPSAxMg%3D%3D&ask-open-desktop`
+      await homePage.expectState({
+        projectCards: [
+          {
+            fileCount: 1,
+            title: 'testProjectDir',
+          },
+        ],
+        sortBy: 'last-modified-desc',
+      })
+      await page.goto(page.url() + targetURL)
+      expect(page.url()).toContain(targetURL)
+    })
+
+    await test.step(`Submit the command`, async () => {
+      await cmdBar.expectState({
+        stage: 'arguments',
+        commandName: 'Import file from URL',
+        currentArgKey: 'method',
+        currentArgValue: '',
+        headerArguments: {
+          Method: '',
+          Name: 'test',
+          Code: '1 line',
+        },
+        highlightedHeaderArg: 'method',
+      })
+      await cmdBar.selectOption({ name: 'Existing Project' }).click()
+      await cmdBar.expectState({
+        stage: 'arguments',
+        commandName: 'Import file from URL',
+        currentArgKey: 'projectName',
+        currentArgValue: '',
+        headerArguments: {
+          Method: 'Existing project',
+          Name: 'test',
+          ProjectName: '',
+          Code: '1 line',
+        },
+        highlightedHeaderArg: 'projectName',
+      })
+      await cmdBar.selectOption({ name: 'testProjectDir' }).click()
+      await cmdBar.expectState({
+        stage: 'review',
+        commandName: 'Import file from URL',
+        headerArguments: {
+          Method: 'Existing project',
+          ProjectName: 'testProjectDir',
+          Name: 'test',
+          Code: '1 line',
+        },
+      })
+      await cmdBar.progressCmdBar()
+    })
+
+    await test.step(`Ensure we created the project and are in the modeling scene`, async () => {
+      await editor.expectEditor.toContain('extrusionDistance = 12')
+      await toolbar.openPane('files')
+      await toolbar.expectFileTreeState(['main.kcl', 'test.kcl'])
+    })
+  })
 })

e2e/playwright/debug-pane.spec.ts

@@ -38,14 +38,14 @@ test.describe('Debug pane', () => {
       // Set the code in the code editor.
       await u.codeLocator.click()
       await page.keyboard.type(code, { delay: 0 })
-      // Scroll to the feature tree.
+      // Scroll to the artifact graph.
       await tree.scrollIntoViewIfNeeded()
-      // Expand the feature tree.
-      await tree.getByText('Feature Tree').click()
+      // Expand the artifact graph.
+      await tree.getByText('Artifact Graph').click()
       // Just expanded the details, making the element taller, so scroll again.
       await tree.getByText('Plane').first().scrollIntoViewIfNeeded()
     })
-    // Extract the artifact IDs from the debug feature tree.
+    // Extract the artifact IDs from the debug artifact graph.
     const initialSegmentIds = await segment.innerText({ timeout: 5_000 })
     // The artifact ID should include a UUID.
     expect(initialSegmentIds).toMatch(

e2e/playwright/fixtures/cmdBarFixture.ts

@@ -151,4 +151,11 @@ export class CmdBarFixture {
   chooseCommand = async (commandName: string) => {
     await this.cmdOptions.getByText(commandName).click()
   }
+
+  /**
+   * Select an option from the command bar
+   */
+  selectOption = (options: Parameters<typeof this.page.getByRole>[1]) => {
+    return this.page.getByRole('option', options)
+  }
 }

e2e/playwright/point-click.spec.ts

@@ -963,37 +963,31 @@ sketch002 = startSketchOn('XZ')
     await toolbar.sweepButton.click()
     await cmdBar.expectState({
       commandName: 'Sweep',
-      currentArgKey: 'profile',
+      currentArgKey: 'target',
       currentArgValue: '',
       headerArguments: {
-        Path: '',
-        Profile: '',
+        Target: '',
+        Trajectory: '',
       },
-      highlightedHeaderArg: 'profile',
+      highlightedHeaderArg: 'target',
       stage: 'arguments',
     })
     await clickOnSketch1()
     await cmdBar.expectState({
       commandName: 'Sweep',
-      currentArgKey: 'path',
+      currentArgKey: 'trajectory',
       currentArgValue: '',
       headerArguments: {
-        Path: '',
-        Profile: '1 face',
+        Target: '1 face',
+        Trajectory: '',
       },
-      highlightedHeaderArg: 'path',
+      highlightedHeaderArg: 'trajectory',
       stage: 'arguments',
     })
     await clickOnSketch2()
-    await cmdBar.expectState({
-      commandName: 'Sweep',
-      headerArguments: {
-        Path: '1 face',
-        Profile: '1 face',
-      },
-      stage: 'review',
-    })
+    await page.waitForTimeout(500)
     await cmdBar.progressCmdBar()
+    await page.waitForTimeout(500)
   })
 
   await test.step(`Confirm code is added to the editor, scene has changed`, async () => {
@@ -1020,6 +1014,75 @@ sketch002 = startSketchOn('XZ')
   })
 })
 
+test(`Sweep point-and-click failing validation`, async ({
+  context,
+  page,
+  homePage,
+  scene,
+  toolbar,
+  cmdBar,
+}) => {
+  const initialCode = `sketch001 = startSketchOn('YZ')
+  |> circle({
+       center = [0, 0],
+       radius = 500
+     }, %)
+sketch002 = startSketchOn('XZ')
+  |> startProfileAt([0, 0], %)
+  |> xLine(-500, %)
+  |> lineTo([-2000, 500], %)
+`
+  await context.addInitScript((initialCode) => {
+    localStorage.setItem('persistCode', initialCode)
+  }, initialCode)
+  await page.setBodyDimensions({ width: 1000, height: 500 })
+  await homePage.goToModelingScene()
+  await scene.waitForExecutionDone()
+
+  // One dumb hardcoded screen pixel value
+  const testPoint = { x: 700, y: 250 }
+  const [clickOnSketch1] = scene.makeMouseHelpers(testPoint.x, testPoint.y)
+  const [clickOnSketch2] = scene.makeMouseHelpers(testPoint.x - 50, testPoint.y)
+
+  await test.step(`Look for sketch001`, async () => {
+    await toolbar.closePane('code')
+    await scene.expectPixelColor([53, 53, 53], testPoint, 15)
+  })
+
+  await test.step(`Go through the command bar flow and fail validation with a toast`, async () => {
+    await toolbar.sweepButton.click()
+    await cmdBar.expectState({
+      commandName: 'Sweep',
+      currentArgKey: 'target',
+      currentArgValue: '',
+      headerArguments: {
+        Target: '',
+        Trajectory: '',
+      },
+      highlightedHeaderArg: 'target',
+      stage: 'arguments',
+    })
+    await clickOnSketch1()
+    await cmdBar.expectState({
+      commandName: 'Sweep',
+      currentArgKey: 'trajectory',
+      currentArgValue: '',
+      headerArguments: {
+        Target: '1 face',
+        Trajectory: '',
+      },
+      highlightedHeaderArg: 'trajectory',
+      stage: 'arguments',
+    })
+    await clickOnSketch2()
+    await page.waitForTimeout(500)
+    await cmdBar.progressCmdBar()
+    await expect(
+      page.getByText('Unable to sweep with the provided selection')
+    ).toBeVisible()
+  })
+})
+
 test(`Fillet point-and-click`, async ({
   context,
   page,

package.json

@@ -113,9 +113,9 @@
     "test:unit": "vitest run --mode development --exclude **/kclSamples.test.ts",
     "test:unit:kcl-samples": "vitest run --mode development ./src/lang/kclSamples.test.ts",
     "test:playwright:electron": "playwright test --config=playwright.electron.config.ts --grep-invert='@snapshot'",
-    "test:playwright:electron:windows": "playwright test --config=playwright.electron.config.ts --grep-invert=\"@skipWin|@snapshot\"",
-    "test:playwright:electron:macos": "playwright test --config=playwright.electron.config.ts --grep-invert='@skipMacos|@snapshot'",
-    "test:playwright:electron:ubuntu": "playwright test --config=playwright.electron.config.ts --grep-invert='@skipLinux|@snapshot'",
+    "test:playwright:electron:windows": "playwright test --config=playwright.electron.config.ts --grep-invert=\"@skipWin|@snapshot\" --quiet",
+    "test:playwright:electron:macos": "playwright test --config=playwright.electron.config.ts --grep-invert='@skipMacos|@snapshot' --quiet",
+    "test:playwright:electron:ubuntu": "playwright test --config=playwright.electron.config.ts --grep-invert='@skipLinux|@snapshot' --quiet",
     "test:playwright:electron:local": "yarn tron:package && NODE_ENV=development playwright test --config=playwright.electron.config.ts --grep-invert='@snapshot'",
     "test:playwright:electron:windows:local": "yarn tron:package && NODE_ENV=development playwright test --config=playwright.electron.config.ts --grep-invert=\"@skipWin|@snapshot\"",
     "test:playwright:electron:macos:local": "yarn tron:package && NODE_ENV=development playwright test --config=playwright.electron.config.ts --grep-invert='@skipMacos|@snapshot'",
@@ -201,7 +201,7 @@
     "ts-node": "^10.0.0",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.19.1",
-    "vite": "^5.4.6",
+    "vite": "^5.4.12",
     "vite-plugin-package-version": "^1.1.0",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.6.0",

packages/codemirror-lang-kcl/yarn.lock

@@ -683,9 +683,9 @@ vite-tsconfig-paths@^4.3.2:
     tsconfck "^3.0.3"
 
 vite@^5.0.0:
-  version "5.4.11"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.11.tgz#3b415cd4aed781a356c1de5a9ebafb837715f6e5"
-  integrity sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==
+  version "5.4.14"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.14.tgz#ff8255edb02134df180dcfca1916c37a6abe8408"
+  integrity sha512-EK5cY7Q1D8JNhSaPKVK4pwBFvaTmZxEnoKXLG/U9gmdDcihQGNzFlgIvaxezFR4glP1LsuiedwMBqCXH3wZccA==
   dependencies:
     esbuild "^0.21.3"
     postcss "^8.4.43"

src/App.tsx

@@ -22,13 +22,28 @@ import Gizmo from 'components/Gizmo'
 import { CoreDumpManager } from 'lib/coredump'
 import { UnitsMenu } from 'components/UnitsMenu'
 import { CameraProjectionToggle } from 'components/CameraProjectionToggle'
+import { useCreateFileLinkQuery } from 'hooks/useCreateFileLinkQueryWatcher'
 import { maybeWriteToDisk } from 'lib/telemetry'
+import { commandBarActor } from 'machines/commandBarMachine'
 maybeWriteToDisk()
   .then(() => {})
   .catch(() => {})
 
 export function App() {
   const { project, file } = useLoaderData() as IndexLoaderData
+
+  // Keep a lookout for a URL query string that invokes the 'import file from URL' command
+  useCreateFileLinkQuery((argDefaultValues) => {
+    commandBarActor.send({
+      type: 'Find and select command',
+      data: {
+        groupId: 'projects',
+        name: 'Import file from URL',
+        argDefaultValues,
+      },
+    })
+  })
+
   useRefreshSettings(PATHS.FILE + 'SETTINGS')
   const navigate = useNavigate()
   const filePath = useAbsoluteFilePath()

src/Router.tsx

@@ -31,11 +31,10 @@ import {
   settingsLoader,
   telemetryLoader,
 } from 'lib/routeLoaders'
-import { CommandBarProvider } from 'components/CommandBar/CommandBarProvider'
 import SettingsAuthProvider from 'components/SettingsAuthProvider'
 import LspProvider from 'components/LspProvider'
 import { KclContextProvider } from 'lang/KclProvider'
-import { BROWSER_PROJECT_NAME } from 'lib/constants'
+import { ASK_TO_OPEN_QUERY_PARAM, BROWSER_PROJECT_NAME } from 'lib/constants'
 import { CoreDumpManager } from 'lib/coredump'
 import { codeManager, engineCommandManager } from 'lib/singletons'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
@@ -47,6 +46,7 @@ import { AppStateProvider } from 'AppState'
 import { reportRejection } from 'lib/trap'
 import { RouteProvider } from 'components/RouteProvider'
 import { ProjectsContextProvider } from 'components/ProjectsContextProvider'
+import { OpenInDesktopAppHandler } from 'components/OpenInDesktopAppHandler'
 
 const createRouter = isDesktop() ? createHashRouter : createBrowserRouter
 
@@ -58,7 +58,7 @@ const router = createRouter([
     /* Make sure auth is the outermost provider or else we will have
      * inefficient re-renders, use the react profiler to see. */
     element: (
-      <CommandBarProvider>
+      <OpenInDesktopAppHandler>
         <RouteProvider>
           <SettingsAuthProvider>
             <LspProvider>
@@ -74,17 +74,26 @@ const router = createRouter([
             </LspProvider>
           </SettingsAuthProvider>
         </RouteProvider>
-      </CommandBarProvider>
+      </OpenInDesktopAppHandler>
     ),
     errorElement: <ErrorPage />,
     children: [
       {
         path: PATHS.INDEX,
-        loader: async () => {
+        loader: async ({ request }) => {
           const onDesktop = isDesktop()
-          return onDesktop
-            ? redirect(PATHS.HOME)
-            : redirect(PATHS.FILE + '/%2F' + BROWSER_PROJECT_NAME)
+          const url = new URL(request.url)
+          if (onDesktop) {
+            return redirect(PATHS.HOME + (url.search || ''))
+          } else {
+            const searchParams = new URLSearchParams(url.search)
+            if (!searchParams.has(ASK_TO_OPEN_QUERY_PARAM)) {
+              return redirect(
+                PATHS.FILE + '/%2F' + BROWSER_PROJECT_NAME + (url.search || '')
+              )
+            }
+          }
+          return null
         },
       },
       {

src/Toolbar.tsx

@@ -2,7 +2,6 @@ import { useRef, useMemo, memo, useCallback, useState } from 'react'
 import { isCursorInSketchCommandRange } from 'lang/util'
 import { engineCommandManager, kclManager } from 'lib/singletons'
 import { useModelingContext } from 'hooks/useModelingContext'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { useNetworkContext } from 'hooks/useNetworkContext'
 import { NetworkHealthState } from 'hooks/useNetworkStatus'
 import { ActionButton } from 'components/ActionButton'
@@ -22,13 +21,13 @@ import {
 } from 'lib/toolbar'
 import { isDesktop } from 'lib/isDesktop'
 import { openExternalBrowserIfDesktop } from 'lib/openWindow'
+import { commandBarActor } from 'machines/commandBarMachine'
 
 export function Toolbar({
   className = '',
   ...props
 }: React.HTMLAttributes<HTMLElement>) {
   const { state, send, context } = useModelingContext()
-  const { commandBarSend } = useCommandsContext()
   const iconClassName =
     'group-disabled:text-chalkboard-50 !text-inherit dark:group-enabled:group-hover:!text-inherit'
   const bgClassName = '!bg-transparent'
@@ -71,10 +70,9 @@ export function Toolbar({
     () => ({
       modelingState: state,
       modelingSend: send,
-      commandBarSend,
       sketchPathId,
     }),
-    [state, send, commandBarSend, sketchPathId]
+    [state, send, commandBarActor.send, sketchPathId]
   )
 
   const tooltipContentClassName = !showRichContent

src/clientSideScene/ClientSideSceneComp.tsx

@@ -46,8 +46,8 @@ import {
 } from 'lang/modifyAst'
 import { ActionButton } from 'components/ActionButton'
 import { err, reportRejection, trap } from 'lib/trap'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { Node } from 'wasm-lib/kcl/bindings/Node'
+import { commandBarActor } from 'machines/commandBarMachine'
 
 function useShouldHideScene(): { hideClient: boolean; hideServer: boolean } {
   const [isCamMoving, setIsCamMoving] = useState(false)
@@ -510,7 +510,6 @@ const ConstraintSymbol = ({
   constrainInfo: ConstrainInfo
   verticalPosition: 'top' | 'bottom'
 }) => {
-  const { commandBarSend } = useCommandsContext()
   const { context } = useModelingContext()
   const varNameMap: {
     [key in ConstrainInfo['type']]: {
@@ -630,7 +629,7 @@ const ConstraintSymbol = ({
         // disabled={implicitDesc} TODO why does this change styles that are hard to override?
         onClick={toSync(async () => {
           if (!isConstrained) {
-            commandBarSend({
+            commandBarActor.send({
               type: 'Find and select command',
               data: {
                 name: 'Constrain with named value',
@@ -756,7 +755,6 @@ export const CamDebugSettings = () => {
     sceneInfra.camControls.reactCameraProperties
   )
   const [fov, setFov] = useState(12)
-  const { commandBarSend } = useCommandsContext()
 
   useEffect(() => {
     sceneInfra.camControls.setReactCameraPropertiesCallback(setCamSettings)
@@ -775,7 +773,7 @@ export const CamDebugSettings = () => {
         type="checkbox"
         checked={camSettings.type === 'perspective'}
         onChange={() =>
-          commandBarSend({
+          commandBarActor.send({
             type: 'Find and select command',
             data: {
               groupId: 'settings',

src/clientSideScene/sceneEntities.ts

@@ -69,7 +69,8 @@ import {
   codeManager,
   editorManager,
 } from 'lib/singletons'
-import { getNodeFromPath, getNodePathFromSourceRange } from 'lang/queryAst'
+import { getNodeFromPath } from 'lang/queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import { executeAst, ToolTip } from 'lang/langHelpers'
 import {
   createProfileStartHandle,

src/clientSideScene/segments.ts

@@ -61,6 +61,7 @@ import { SegmentInputs } from 'lang/std/stdTypes'
 import { err } from 'lib/trap'
 import { editorManager, sceneInfra } from 'lib/singletons'
 import { Selections } from 'lib/selections'
+import { commandBarActor } from 'machines/commandBarMachine'
 
 interface CreateSegmentArgs {
   input: SegmentInputs
@@ -847,7 +848,7 @@ function createLengthIndicator({
     })
 
     // Command Bar
-    editorManager.commandBarSend({
+    commandBarActor.send({
       type: 'Find and select command',
       data: {
         name: 'Constrain length',

src/components/AstExplorer.tsx

@@ -1,6 +1,7 @@
 import { useModelingContext } from 'hooks/useModelingContext'
 import { editorManager, engineCommandManager, kclManager } from 'lib/singletons'
-import { getNodeFromPath, getNodePathFromSourceRange } from 'lang/queryAst'
+import { getNodeFromPath } from 'lang/queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import { useEffect, useRef, useState } from 'react'
 import { trap } from 'lib/trap'
 import { codeToIdSelections } from 'lib/selections'

src/components/CommandBar/CommandArgOptionInput.tsx

@@ -1,8 +1,8 @@
 import { Combobox } from '@headlessui/react'
 import { useSelector } from '@xstate/react'
 import Fuse from 'fuse.js'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { CommandArgument, CommandArgumentOption } from 'lib/commandTypes'
+import { commandBarActor, useCommandBarState } from 'machines/commandBarMachine'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { AnyStateMachine, StateFrom } from 'xstate'
 
@@ -23,7 +23,7 @@ function CommandArgOptionInput({
   placeholder?: string
 }) {
   const actorContext = useSelector(arg.machineActor, contextSelector)
-  const { commandBarSend, commandBarState } = useCommandsContext()
+  const commandBarState = useCommandBarState()
   const resolvedOptions = useMemo(
     () =>
       typeof arg.options === 'function'
@@ -129,6 +129,7 @@ function CommandArgOptionInput({
           <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"
+            data-testid="cmd-bar-arg-name"
           >
             {argName}
           </label>
@@ -142,7 +143,7 @@ function CommandArgOptionInput({
             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' })
+                commandBarActor.send({ type: 'Close' })
               if (event.key === 'Backspace' && !event.currentTarget.value) {
                 stepBack()
               }

src/components/CommandBar/CommandBar.tsx

@@ -1,6 +1,5 @@
 import { Dialog, Popover, Transition } from '@headlessui/react'
 import { Fragment, useEffect } from 'react'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import CommandBarArgument from './CommandBarArgument'
 import CommandComboBox from '../CommandComboBox'
 import CommandBarReview from './CommandBarReview'
@@ -8,12 +7,13 @@ import { useLocation } from 'react-router-dom'
 import useHotkeyWrapper from 'lib/hotkeyWrapper'
 import { CustomIcon } from 'components/CustomIcon'
 import Tooltip from 'components/Tooltip'
+import { commandBarActor, useCommandBarState } from 'machines/commandBarMachine'
 
 export const COMMAND_PALETTE_HOTKEY = 'mod+k'
 
 export const CommandBar = () => {
   const { pathname } = useLocation()
-  const { commandBarState, commandBarSend } = useCommandsContext()
+  const commandBarState = useCommandBarState()
   const {
     context: { selectedCommand, currentArgument, commands },
   } = commandBarState
@@ -23,16 +23,16 @@ export const CommandBar = () => {
   // Close the command bar when navigating
   useEffect(() => {
     if (commandBarState.matches('Closed')) return
-    commandBarSend({ type: 'Close' })
+    commandBarActor.send({ type: 'Close' })
   }, [pathname])
 
   // Hook up keyboard shortcuts
   useHotkeyWrapper([COMMAND_PALETTE_HOTKEY], () => {
     if (commandBarState.context.commands.length === 0) return
     if (commandBarState.matches('Closed')) {
-      commandBarSend({ type: 'Open' })
+      commandBarActor.send({ type: 'Open' })
     } else {
-      commandBarSend({ type: 'Close' })
+      commandBarActor.send({ type: 'Close' })
     }
   })
 
@@ -52,14 +52,14 @@ export const CommandBar = () => {
           ...entries[entries.length - 1][1],
         }
 
-        commandBarSend({
+        commandBarActor.send({
           type: 'Edit argument',
           data: {
             arg: currentArg,
           },
         })
       } else {
-        commandBarSend({ type: 'Deselect command' })
+        commandBarActor.send({ type: 'Deselect command' })
       }
     } else {
       const entries = Object.entries(selectedCommand?.args || {})
@@ -68,9 +68,9 @@ export const CommandBar = () => {
       )
 
       if (index === 0) {
-        commandBarSend({ type: 'Deselect command' })
+        commandBarActor.send({ type: 'Deselect command' })
       } else {
-        commandBarSend({
+        commandBarActor.send({
           type: 'Change current argument',
           data: {
             arg: { name: entries[index - 1][0], ...entries[index - 1][1] },
@@ -85,14 +85,14 @@ export const CommandBar = () => {
       show={!commandBarState.matches('Closed') || false}
       afterLeave={() => {
         if (selectedCommand?.onCancel) selectedCommand.onCancel()
-        commandBarSend({ type: 'Clear' })
+        commandBarActor.send({ type: 'Clear' })
       }}
       as={Fragment}
     >
       <WrapperComponent
         open={!commandBarState.matches('Closed') || isSelectionArgument}
         onClose={() => {
-          commandBarSend({ type: 'Close' })
+          commandBarActor.send({ type: 'Close' })
         }}
         className={
           'fixed inset-0 z-50 overflow-y-auto pb-4 pt-1 ' +
@@ -122,7 +122,7 @@ export const CommandBar = () => {
               )
             )}
             <button
-              onClick={() => commandBarSend({ type: 'Close' })}
+              onClick={() => commandBarActor.send({ type: 'Close' })}
               className="group block !absolute left-auto right-full top-[-3px] m-2.5 p-0 border-none bg-transparent hover:bg-transparent"
             >
               <CustomIcon

src/components/CommandBar/CommandBarArgument.tsx

@@ -2,13 +2,13 @@ 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'
 import CommandBarKclInput from './CommandBarKclInput'
 import CommandBarTextareaInput from './CommandBarTextareaInput'
+import { commandBarActor, useCommandBarState } from 'machines/commandBarMachine'
 
 function CommandBarArgument({ stepBack }: { stepBack: () => void }) {
-  const { commandBarState, commandBarSend } = useCommandsContext()
+  const commandBarState = useCommandBarState()
   const {
     context: { currentArgument },
   } = commandBarState
@@ -16,7 +16,7 @@ function CommandBarArgument({ stepBack }: { stepBack: () => void }) {
   function onSubmit(data: unknown) {
     if (!currentArgument) return
 
-    commandBarSend({
+    commandBarActor.send({
       type: 'Submit argument',
       data: {
         [currentArgument.name]: data,

src/components/CommandBar/CommandBarBasicInput.tsx

@@ -1,5 +1,5 @@
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { CommandArgument } from 'lib/commandTypes'
+import { commandBarActor, useCommandBarState } from 'machines/commandBarMachine'
 import { useEffect, useRef } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 
@@ -15,8 +15,8 @@ function CommandBarBasicInput({
   stepBack: () => void
   onSubmit: (event: unknown) => void
 }) {
-  const { commandBarSend, commandBarState } = useCommandsContext()
-  useHotkeys('mod + k, mod + /', () => commandBarSend({ type: 'Close' }))
+  const commandBarState = useCommandBarState()
+  useHotkeys('mod + k, mod + /', () => commandBarActor.send({ type: 'Close' }))
   const inputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {

src/components/CommandBar/CommandBarHeader.tsx

@@ -1,4 +1,3 @@
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { CustomIcon } from '../CustomIcon'
 import React, { useState } from 'react'
 import { ActionButton } from '../ActionButton'
@@ -7,9 +6,10 @@ import { useHotkeys } from 'react-hotkeys-hook'
 import { KclCommandValue, KclExpressionWithVariable } from 'lib/commandTypes'
 import Tooltip from 'components/Tooltip'
 import { roundOff } from 'lib/utils'
+import { commandBarActor, useCommandBarState } from 'machines/commandBarMachine'
 
 function CommandBarHeader({ children }: React.PropsWithChildren<{}>) {
-  const { commandBarState, commandBarSend } = useCommandsContext()
+  const commandBarState = useCommandBarState()
   const {
     context: { selectedCommand, currentArgument, argumentsToSubmit },
   } = commandBarState
@@ -49,7 +49,7 @@ function CommandBarHeader({ children }: React.PropsWithChildren<{}>) {
         ]
         const arg = selectedCommand?.args[argName]
         if (!argName || !arg) return
-        commandBarSend({
+        commandBarActor.send({
           type: 'Change current argument',
           data: { arg: { ...arg, name: argName } },
         })
@@ -100,7 +100,7 @@ function CommandBarHeader({ children }: React.PropsWithChildren<{}>) {
                     }
                     disabled={!isReviewing && currentArgument?.name === argName}
                     onClick={() => {
-                      commandBarSend({
+                      commandBarActor.send({
                         type: isReviewing
                           ? 'Edit argument'
                           : 'Change current argument',

src/components/CommandBar/CommandBarKclInput.tsx

@@ -7,7 +7,6 @@ import {
 } from '@codemirror/autocomplete'
 import { EditorView, keymap, ViewUpdate } from '@codemirror/view'
 import { CustomIcon } from 'components/CustomIcon'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { CommandArgument, KclCommandValue } from 'lib/commandTypes'
 import { getSystemTheme } from 'lib/theme'
@@ -20,6 +19,7 @@ import styles from './CommandBarKclInput.module.css'
 import { createIdentifier, createVariableDeclaration } from 'lang/modifyAst'
 import { useCodeMirror } from 'components/ModelingSidebar/ModelingPanes/CodeEditor'
 import { useSelector } from '@xstate/react'
+import { commandBarActor, useCommandBarState } from 'machines/commandBarMachine'
 
 const machineContextSelector = (snapshot?: {
   context: Record<string, unknown>
@@ -37,7 +37,7 @@ function CommandBarKclInput({
   stepBack: () => void
   onSubmit: (event: unknown) => void
 }) {
-  const { commandBarSend, commandBarState } = useCommandsContext()
+  const commandBarState = useCommandBarState()
   const previouslySetValue = commandBarState.context.argumentsToSubmit[
     arg.name
   ] as KclCommandValue | undefined
@@ -82,7 +82,7 @@ function CommandBarKclInput({
       false
   )
   const [canSubmit, setCanSubmit] = useState(true)
-  useHotkeys('mod + k, mod + /', () => commandBarSend({ type: 'Close' }))
+  useHotkeys('mod + k, mod + /', () => commandBarActor.send({ type: 'Close' }))
   const editorRef = useRef<HTMLDivElement>(null)
 
   const {

src/components/CommandBar/CommandBarProvider.tsx

@@ -1,43 +0,0 @@
-import { createActorContext } from '@xstate/react'
-import { editorManager } from 'lib/singletons'
-import { commandBarMachine } from 'machines/commandBarMachine'
-import { useEffect } from 'react'
-
-export const CommandsContext = createActorContext(
-  commandBarMachine.provide({
-    guards: {
-      'Command has no arguments': ({ context }) => {
-        return (
-          !context.selectedCommand?.args ||
-          Object.keys(context.selectedCommand?.args).length === 0
-        )
-      },
-      'All arguments are skippable': ({ context }) => {
-        return Object.values(context.selectedCommand!.args!).every(
-          (argConfig) => argConfig.skip
-        )
-      },
-    },
-  })
-)
-
-export const CommandBarProvider = ({
-  children,
-}: {
-  children: React.ReactNode
-}) => {
-  return (
-    <CommandsContext.Provider>
-      <CommandBarProviderInner>{children}</CommandBarProviderInner>
-    </CommandsContext.Provider>
-  )
-}
-function CommandBarProviderInner({ children }: { children: React.ReactNode }) {
-  const commandBarActor = CommandsContext.useActorRef()
-
-  useEffect(() => {
-    editorManager.setCommandBarSend(commandBarActor.send)
-  })
-
-  return children
-}

src/components/CommandBar/CommandBarReview.tsx

@@ -1,9 +1,9 @@
-import { useCommandsContext } from 'hooks/useCommandsContext'
+import { commandBarActor, useCommandBarState } from 'machines/commandBarMachine'
 import CommandBarHeader from './CommandBarHeader'
 import { useHotkeys } from 'react-hotkeys-hook'
 
 function CommandBarReview({ stepBack }: { stepBack: () => void }) {
-  const { commandBarState, commandBarSend } = useCommandsContext()
+  const commandBarState = useCommandBarState()
   const {
     context: { argumentsToSubmit, selectedCommand },
   } = commandBarState
@@ -33,7 +33,7 @@ function CommandBarReview({ stepBack }: { stepBack: () => void }) {
           parseInt(b.keys[0], 10) - 1
         ]
         const arg = selectedCommand?.args[argName]
-        commandBarSend({
+        commandBarActor.send({
           type: 'Edit argument',
           data: { arg: { ...arg, name: argName } },
         })
@@ -50,7 +50,7 @@ function CommandBarReview({ stepBack }: { stepBack: () => void }) {
 
   function submitCommand(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault()
-    commandBarSend({
+    commandBarActor.send({
       type: 'Submit command',
       output: argumentsToSubmit,
     })

src/components/CommandBar/CommandBarSelectionInput.tsx

@@ -1,5 +1,4 @@
 import { useSelector } from '@xstate/react'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { Artifact } from 'lang/std/artifactGraph'
 import { CommandArgument } from 'lib/commandTypes'
 import {
@@ -10,6 +9,7 @@ import {
 import { kclManager } from 'lib/singletons'
 import { reportRejection } from 'lib/trap'
 import { toSync } from 'lib/utils'
+import { commandBarActor, useCommandBarState } from 'machines/commandBarMachine'
 import { modelingMachine } from 'machines/modelingMachine'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { StateFrom } from 'xstate'
@@ -49,7 +49,7 @@ function CommandBarSelectionInput({
   onSubmit: (data: unknown) => void
 }) {
   const inputRef = useRef<HTMLInputElement>(null)
-  const { commandBarState, commandBarSend } = useCommandsContext()
+  const commandBarState = useCommandBarState()
   const [hasSubmitted, setHasSubmitted] = useState(false)
   const selection = useSelector(arg.machineActor, selectionSelector)
   const selectionsByType = useMemo(() => {
@@ -145,7 +145,7 @@ function CommandBarSelectionInput({
             if (event.key === 'Backspace') {
               stepBack()
             } else if (event.key === 'Escape') {
-              commandBarSend({ type: 'Close' })
+              commandBarActor.send({ type: 'Close' })
             }
           }}
           onChange={handleChange}

src/components/CommandBar/CommandBarTextareaInput.tsx

@@ -1,5 +1,5 @@
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { CommandArgument } from 'lib/commandTypes'
+import { commandBarActor, useCommandBarState } from 'machines/commandBarMachine'
 import { RefObject, useEffect, useRef } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 
@@ -15,8 +15,8 @@ function CommandBarTextareaInput({
   stepBack: () => void
   onSubmit: (event: unknown) => void
 }) {
-  const { commandBarSend, commandBarState } = useCommandsContext()
-  useHotkeys('mod + k, mod + /', () => commandBarSend({ type: 'Close' }))
+  const commandBarState = useCommandBarState()
+  useHotkeys('mod + k, mod + /', () => commandBarActor.send({ type: 'Close' }))
   const formRef = useRef<HTMLFormElement>(null)
   const inputRef = useRef<HTMLTextAreaElement>(null)
   useTextareaAutoGrow(inputRef)

src/components/CommandBarOpenButton.tsx

@@ -1,16 +1,15 @@
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import usePlatform from 'hooks/usePlatform'
 import { hotkeyDisplay } from 'lib/hotkeyWrapper'
 import { COMMAND_PALETTE_HOTKEY } from './CommandBar/CommandBar'
+import { commandBarActor } from 'machines/commandBarMachine'
 
 export function CommandBarOpenButton() {
-  const { commandBarSend } = useCommandsContext()
   const platform = usePlatform()
 
   return (
     <button
       className="group rounded-full flex items-center justify-center gap-2 px-2 py-1 bg-primary/10 dark:bg-chalkboard-90 dark:backdrop-blur-sm border-primary hover:border-primary dark:border-chalkboard-50 dark:hover:border-inherit text-primary dark:text-inherit"
-      onClick={() => commandBarSend({ type: 'Open' })}
+      onClick={() => commandBarActor.send({ type: 'Open' })}
       data-testid="command-bar-open-button"
     >
       <span>Commands</span>

src/components/CommandComboBox.tsx

@@ -1,11 +1,11 @@
 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'
 import { getActorNextEvents } from 'lib/utils'
 import { sortCommands } from 'lib/commandUtils'
+import { commandBarActor } from 'machines/commandBarMachine'
 
 function CommandComboBox({
   options,
@@ -14,7 +14,6 @@ function CommandComboBox({
   options: Command[]
   placeholder?: string
 }) {
-  const { commandBarSend } = useCommandsContext()
   const [query, setQuery] = useState('')
   const [filteredOptions, setFilteredOptions] = useState<typeof options>()
 
@@ -41,7 +40,7 @@ function CommandComboBox({
   }, [query])
 
   function handleSelection(command: Command) {
-    commandBarSend({ type: 'Select command', data: { command } })
+    commandBarActor.send({ type: 'Select command', data: { command } })
   }
 
   return (
@@ -61,7 +60,7 @@ function CommandComboBox({
               (event.key === 'Backspace' && !event.currentTarget.value)
             ) {
               event.preventDefault()
-              commandBarSend({ type: 'Close' })
+              commandBarActor.send({ type: 'Close' })
             }
           }}
           placeholder={
@@ -76,34 +75,40 @@ function CommandComboBox({
           autoFocus
         />
       </div>
-      <Combobox.Options
-        static
-        className="overflow-y-auto max-h-96 cursor-pointer"
-      >
-        {filteredOptions?.map((option) => (
-          <Combobox.Option
-            key={option.groupId + option.name + (option.displayName || '')}
-            value={option}
-            className="flex items-center gap-4 px-4 py-1.5 first:mt-2 last:mb-2 ui-active:bg-primary/10 dark:ui-active:bg-chalkboard-90 ui-disabled:!text-chalkboard-50"
-            disabled={optionIsDisabled(option)}
-            data-testid={`cmd-bar-option`}
-          >
-            {'icon' in option && option.icon && (
-              <CustomIcon name={option.icon} className="w-5 h-5" />
-            )}
-            <div className="flex-grow flex flex-col">
-              <p className="my-0 leading-tight">
-                {option.displayName || option.name}{' '}
-              </p>
-              {option.description && (
-                <p className="my-0 text-xs text-chalkboard-60 dark:text-chalkboard-50">
-                  {option.description}
-                </p>
+      {filteredOptions?.length ? (
+        <Combobox.Options
+          static
+          className="overflow-y-auto max-h-96 cursor-pointer"
+        >
+          {filteredOptions?.map((option) => (
+            <Combobox.Option
+              key={option.groupId + option.name + (option.displayName || '')}
+              value={option}
+              className="flex items-center gap-4 px-4 py-1.5 first:mt-2 last:mb-2 ui-active:bg-primary/10 dark:ui-active:bg-chalkboard-90 ui-disabled:!text-chalkboard-50"
+              disabled={optionIsDisabled(option)}
+              data-testid={`cmd-bar-option`}
+            >
+              {'icon' in option && option.icon && (
+                <CustomIcon name={option.icon} className="w-5 h-5" />
               )}
-            </div>
-          </Combobox.Option>
-        ))}
-      </Combobox.Options>
+              <div className="flex-grow flex flex-col">
+                <p className="my-0 leading-tight">
+                  {option.displayName || option.name}{' '}
+                </p>
+                {option.description && (
+                  <p className="my-0 text-xs text-chalkboard-60 dark:text-chalkboard-50">
+                    {option.description}
+                  </p>
+                )}
+              </div>
+            </Combobox.Option>
+          ))}
+        </Combobox.Options>
+      ) : (
+        <p className="px-4 pt-2 text-chalkboard-60 dark:text-chalkboard-50">
+          No results found
+        </p>
+      )}
     </Combobox>
   )
 }

src/components/DebugArtifactGraph.tsx

@@ -4,18 +4,18 @@ import { expandPlane, PlaneArtifactRich } from 'lang/std/artifactGraph'
 import { ArtifactGraph } from 'lang/wasm'
 import { DebugDisplayArray, GenericObj } from './DebugDisplayObj'
 
-export function DebugFeatureTree() {
-  const featureTree = useMemo(() => {
+export function DebugArtifactGraph() {
+  const artifactGraphTree = useMemo(() => {
     return computeTree(engineCommandManager.artifactGraph)
   }, [engineCommandManager.artifactGraph])
 
   const filterKeys: string[] = ['__meta', 'codeRef', 'pathToNode']
   return (
     <details data-testid="debug-feature-tree" className="relative">
-      <summary>Feature Tree</summary>
-      {featureTree.length > 0 ? (
+      <summary>Artifact Graph</summary>
+      {artifactGraphTree.length > 0 ? (
         <pre className="text-xs">
-          <DebugDisplayArray arr={featureTree} filterKeys={filterKeys} />
+          <DebugDisplayArray arr={artifactGraphTree} filterKeys={filterKeys} />
         </pre>
       ) : (
         <p>(Empty)</p>

src/components/FileMachineProvider.tsx

@@ -12,7 +12,6 @@ import {
   StateFrom,
   fromPromise,
 } from 'xstate'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { fileMachine } from 'machines/fileMachine'
 import { isDesktop } from 'lib/isDesktop'
 import {
@@ -30,6 +29,7 @@ import {
 } from 'lib/getKclSamplesManifest'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { markOnce } from 'lib/performance'
+import { commandBarActor } from 'machines/commandBarMachine'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
@@ -47,9 +47,9 @@ export const FileMachineProvider = ({
   children: React.ReactNode
 }) => {
   const navigate = useNavigate()
-  const { commandBarSend } = useCommandsContext()
-  const { settings } = useSettingsAuthContext()
-  const { project, file } = useRouteLoaderData(PATHS.FILE) as IndexLoaderData
+  const { settings, auth } = useSettingsAuthContext()
+  const projectData = useRouteLoaderData(PATHS.FILE) as IndexLoaderData
+  const { project, file } = projectData
   const [kclSamples, setKclSamples] = React.useState<KclSamplesManifestItem[]>(
     []
   )
@@ -90,7 +90,7 @@ export const FileMachineProvider = ({
         navigateToFile: ({ context, event }) => {
           if (event.type !== 'xstate.done.actor.create-and-open-file') return
           if (event.output && 'name' in event.output) {
-            commandBarSend({ type: 'Close' })
+            commandBarActor.send({ type: 'Close' })
             navigate(
               `..${PATHS.FILE}/${encodeURIComponent(
                 context.selectedDirectory +
@@ -296,55 +296,65 @@ export const FileMachineProvider = ({
 
   const kclCommandMemo = useMemo(
     () =>
-      kclCommands(
-        async (data) => {
-          if (data.method === 'overwrite') {
-            codeManager.updateCodeStateEditor(data.code)
-            await kclManager.executeCode(true)
-            await codeManager.writeToFile()
-          } else if (data.method === 'newFile' && isDesktop()) {
-            send({
-              type: 'Create file',
-              data: {
-                name: data.sampleName,
-                content: data.code,
-                makeDir: false,
-              },
-            })
-          }
-
-          // Either way, we want to overwrite the defaultUnit project setting
-          // with the sample's setting.
-          if (data.sampleUnits) {
-            settings.send({
-              type: 'set.modeling.defaultUnit',
-              data: {
-                level: 'project',
-                value: data.sampleUnits,
-              },
-            })
-          }
+      kclCommands({
+        authToken: auth?.context?.token ?? '',
+        projectData,
+        settings: {
+          defaultUnit: settings?.context?.modeling.defaultUnit.current ?? 'mm',
         },
-        kclSamples.map((sample) => ({
-          value: sample.pathFromProjectDirectoryToFirstFile,
-          name: sample.title,
-        }))
-      ).filter(
+        specialPropsForSampleCommand: {
+          onSubmit: async (data) => {
+            if (data.method === 'overwrite') {
+              codeManager.updateCodeStateEditor(data.code)
+              await kclManager.executeCode(true)
+              await codeManager.writeToFile()
+            } else if (data.method === 'newFile' && isDesktop()) {
+              send({
+                type: 'Create file',
+                data: {
+                  name: data.sampleName,
+                  content: data.code,
+                  makeDir: false,
+                },
+              })
+            }
+
+            // Either way, we want to overwrite the defaultUnit project setting
+            // with the sample's setting.
+            if (data.sampleUnits) {
+              settings.send({
+                type: 'set.modeling.defaultUnit',
+                data: {
+                  level: 'project',
+                  value: data.sampleUnits,
+                },
+              })
+            }
+          },
+          providedOptions: kclSamples.map((sample) => ({
+            value: sample.pathFromProjectDirectoryToFirstFile,
+            name: sample.title,
+          })),
+        },
+      }).filter(
         (command) => kclSamples.length || command.name !== 'open-kcl-example'
       ),
     [codeManager, kclManager, send, kclSamples]
   )
 
   useEffect(() => {
-    commandBarSend({ type: 'Add commands', data: { commands: kclCommandMemo } })
+    commandBarActor.send({
+      type: 'Add commands',
+      data: { commands: kclCommandMemo },
+    })
 
     return () => {
-      commandBarSend({
+      commandBarActor.send({
         type: 'Remove commands',
         data: { commands: kclCommandMemo },
       })
     }
-  }, [commandBarSend, kclCommandMemo])
+  }, [commandBarActor.send, kclCommandMemo])
 
   return (
     <FileContext.Provider

src/components/MachineManagerProvider.tsx

@@ -1,11 +1,11 @@
 import { createContext, useEffect, useState } from 'react'
 
 import { engineCommandManager } from 'lib/singletons'
-import { CommandsContext } from 'components/CommandBar/CommandBarProvider'
 import { isDesktop } from 'lib/isDesktop'
 import { components } from 'lib/machine-api'
 import { reportRejection } from 'lib/trap'
 import { toSync } from 'lib/utils'
+import { commandBarActor } from 'machines/commandBarMachine'
 
 export type MachinesListing = Array<
   components['schemas']['MachineInfoResponse']
@@ -42,8 +42,6 @@ export const MachineManagerProvider = ({
     components['schemas']['MachineInfoResponse'] | null
   >(null)
 
-  const commandBarActor = CommandsContext.useActorRef()
-
   // Get the reason message for why there are no machines.
   const noMachinesReason = (): string | undefined => {
     if (machines.length > 0) {

src/components/ModelingMachineProvider.tsx

@@ -1,4 +1,4 @@
-import { useMachine } from '@xstate/react'
+import { useMachine, useSelector } from '@xstate/react'
 import React, {
   createContext,
   useEffect,
@@ -11,6 +11,7 @@ import {
   AnyStateMachine,
   ContextFrom,
   Prop,
+  SnapshotFrom,
   StateFrom,
   assign,
   fromPromise,
@@ -67,18 +68,14 @@ import {
   startSketchOnDefault,
 } from 'lang/modifyAst'
 import { PathToNode, Program, parse, recast, resultIsOk } from 'lang/wasm'
-import {
-  artifactIsPlaneWithPaths,
-  getNodePathFromSourceRange,
-  isSingleCursorInPipe,
-} from 'lang/queryAst'
+import { artifactIsPlaneWithPaths, isSingleCursorInPipe } from 'lang/queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import { exportFromEngine } from 'lib/exportFromEngine'
 import { Models } from '@kittycad/lib/dist/types/src'
 import toast from 'react-hot-toast'
 import { useLoaderData, useNavigate, useSearchParams } from 'react-router-dom'
 import { letEngineAnimateAndSyncCamAfter } from 'clientSideScene/CameraControls'
 import { err, reportRejection, trap } from 'lib/trap'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import {
   ExportIntent,
   EngineConnectionStateType,
@@ -91,6 +88,7 @@ import { IndexLoaderData } from 'lib/types'
 import { Node } from 'wasm-lib/kcl/bindings/Node'
 import { promptToEditFlow } from 'lib/promptToEdit'
 import { kclEditorActor } from 'machines/kclEditorMachine'
+import { commandBarActor } from 'machines/commandBarMachine'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
@@ -102,6 +100,10 @@ export const ModelingMachineContext = createContext(
   {} as MachineContext<typeof modelingMachine>
 )
 
+const commandBarIsClosedSelector = (
+  state: SnapshotFrom<typeof commandBarActor>
+) => state.matches('Closed')
+
 export const ModelingMachineProvider = ({
   children,
 }: {
@@ -132,8 +134,10 @@ export const ModelingMachineProvider = ({
   let [searchParams] = useSearchParams()
   const pool = searchParams.get('pool')
 
-  const { commandBarState, commandBarSend } = useCommandsContext()
-
+  const isCommandBarClosed = useSelector(
+    commandBarActor,
+    commandBarIsClosedSelector
+  )
   // Settings machine setup
   // const retrievedSettings = useRef(
   // localStorage?.getItem(MODELING_PERSIST_KEY) || '{}'
@@ -388,7 +392,16 @@ export const ModelingMachineProvider = ({
             }
 
             if (setSelections.selectionType === 'completeSelection') {
-              editorManager.selectRange(setSelections.selection)
+              const codeMirrorSelection = editorManager.createEditorSelection(
+                setSelections.selection
+              )
+              kclEditorActor.send({
+                type: 'setLastSelectionEvent',
+                data: {
+                  codeMirrorSelection,
+                  scrollIntoView: false,
+                },
+              })
               if (!sketchDetails)
                 return {
                   selectionRanges: setSelections.selection,
@@ -529,7 +542,6 @@ export const ModelingMachineProvider = ({
             trimmedPrompt,
             fileMachineSend,
             navigate,
-            commandBarSend,
             context,
             token,
             settings: {
@@ -543,7 +555,7 @@ export const ModelingMachineProvider = ({
         'has valid selection for deletion': ({
           context: { selectionRanges },
         }) => {
-          if (!commandBarState.matches('Closed')) return false
+          if (!isCommandBarClosed) return false
           if (selectionRanges.graphSelections.length <= 0) return false
           return true
         },

src/components/ModelingSidebar/ModelingPanes/DebugPane.tsx

@@ -1,4 +1,4 @@
-import { DebugFeatureTree } from 'components/DebugFeatureTree'
+import { DebugArtifactGraph } from 'components/DebugArtifactGraph'
 import { AstExplorer } from '../../AstExplorer'
 import { EngineCommands } from '../../EngineCommands'
 import { CamDebugSettings } from 'clientSideScene/ClientSideSceneComp'
@@ -14,7 +14,7 @@ export const DebugPane = () => {
           <EngineCommands />
           <CamDebugSettings />
           <AstExplorer />
-          <DebugFeatureTree />
+          <DebugArtifactGraph />
         </div>
       </section>
     </div>

src/components/ModelingSidebar/ModelingPanes/KclEditorMenu.module.css

@@ -3,6 +3,7 @@
   @apply font-mono !no-underline text-xs font-bold select-none text-chalkboard-90;
   @apply ui-active:bg-primary/10 ui-active:text-primary ui-active:text-inherit;
   @apply transition-colors ease-out;
+  @apply m-0;
 }
 
 :global(.dark) .button {

src/components/ModelingSidebar/ModelingPanes/KclEditorMenu.tsx

@@ -9,12 +9,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { kclManager } from 'lib/singletons'
 import { openExternalBrowserIfDesktop } from 'lib/openWindow'
 import { reportRejection } from 'lib/trap'
-import { useCommandsContext } from 'hooks/useCommandsContext'
+import { commandBarActor } from 'machines/commandBarMachine'
 
 export const KclEditorMenu = ({ children }: PropsWithChildren) => {
   const { enable: convertToVarEnabled, handleClick: handleConvertToVarClick } =
     useConvertToVariable()
-  const { commandBarSend } = useCommandsContext()
 
   return (
     <Menu>
@@ -85,7 +84,7 @@ export const KclEditorMenu = ({ children }: PropsWithChildren) => {
           <Menu.Item>
             <button
               onClick={() => {
-                commandBarSend({
+                commandBarActor.send({
                   type: 'Find and select command',
                   data: {
                     groupId: 'code',

src/components/ModelingSidebar/ModelingSidebar.tsx

@@ -15,12 +15,12 @@ import { ModelingPane } from './ModelingPane'
 import { isDesktop } from 'lib/isDesktop'
 import { useModelingContext } from 'hooks/useModelingContext'
 import { CustomIconName } from 'components/CustomIcon'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
 import { useKclContext } from 'lang/KclProvider'
 import { MachineManagerContext } from 'components/MachineManagerProvider'
 import { onboardingPaths } from 'routes/Onboarding/paths'
 import { SIDEBAR_BUTTON_SUFFIX } from 'lib/constants'
+import { commandBarActor } from 'machines/commandBarMachine'
 
 interface ModelingSidebarProps {
   paneOpacity: '' | 'opacity-20' | 'opacity-40'
@@ -37,7 +37,6 @@ function getPlatformString(): 'web' | 'desktop' {
 
 export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
   const machineManager = useContext(MachineManagerContext)
-  const { commandBarSend } = useCommandsContext()
   const kclContext = useKclContext()
   const { settings } = useSettingsAuthContext()
   const onboardingStatus = settings.context.app.onboardingStatus
@@ -66,7 +65,7 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
       icon: 'floppyDiskArrow',
       keybinding: 'Ctrl + Shift + E',
       action: () =>
-        commandBarSend({
+        commandBarActor.send({
           type: 'Find and select command',
           data: { name: 'Export', groupId: 'modeling' },
         }),
@@ -79,7 +78,7 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
       keybinding: 'Ctrl + Shift + M',
       // eslint-disable-next-line @typescript-eslint/no-misused-promises
       action: async () => {
-        commandBarSend({
+        commandBarActor.send({
           type: 'Find and select command',
           data: { name: 'Make', groupId: 'modeling' },
         })
@@ -298,7 +297,7 @@ function ModelingPaneButton({
   })
 
   return (
-    <div id={paneConfig.id + '-button-holder'}>
+    <div id={paneConfig.id + '-button-holder'} className="relative">
       <button
         className="group pointer-events-auto flex items-center justify-center border-transparent dark:border-transparent disabled:!border-transparent p-0 m-0 rounded-sm !outline-0 focus-visible:border-primary"
         onClick={onClick}
@@ -340,7 +339,7 @@ function ModelingPaneButton({
         <p
           id={`${paneConfig.id}-badge`}
           className={
-            'absolute m-0 p-0 top-1 right-0 w-3 h-3 flex items-center justify-center text-[10px] font-semibold text-white bg-primary hue-rotate-90 rounded-full border border-chalkboard-10 dark:border-chalkboard-80 z-50 hover:cursor-pointer hover:scale-[2] transition-transform duration-200'
+            'absolute m-0 p-0 bottom-4 left-4 w-3 h-3 flex items-center justify-center text-[10px] font-semibold text-white bg-primary hue-rotate-90 rounded-full border border-chalkboard-10 dark:border-chalkboard-80 z-50 hover:cursor-pointer hover:scale-[2] transition-transform duration-200'
           }
           onClick={showBadge.onClick}
           title={`Click to view ${showBadge.value} notification${

src/components/NetworkHealthIndicator.test.tsx

@@ -1,7 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import { BrowserRouter } from 'react-router-dom'
 import { SettingsAuthProviderJest } from './SettingsAuthProvider'
-import { CommandBarProvider } from './CommandBar/CommandBarProvider'
 import {
   NETWORK_HEALTH_TEXT,
   NetworkHealthIndicator,
@@ -12,9 +11,7 @@ function TestWrap({ children }: { children: React.ReactNode }) {
   // wrap in router and xState context
   return (
     <BrowserRouter>
-      <CommandBarProvider>
-        <SettingsAuthProviderJest>{children}</SettingsAuthProviderJest>
-      </CommandBarProvider>
+      <SettingsAuthProviderJest>{children}</SettingsAuthProviderJest>
     </BrowserRouter>
   )
 }

src/components/OpenInDesktopAppHandler.test.tsx

@@ -0,0 +1,68 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
+import { OpenInDesktopAppHandler } from './OpenInDesktopAppHandler'
+
+/**
+ * The behavior under test requires a router,
+ * so we wrap the component in a minimal router setup.
+ */
+function TestingMinimalRouterWrapper({
+  children,
+  location,
+}: {
+  location?: string
+  children: React.ReactNode
+}) {
+  return (
+    <Routes location={location}>
+      <Route
+        path="/"
+        element={<OpenInDesktopAppHandler>{children}</OpenInDesktopAppHandler>}
+      />
+    </Routes>
+  )
+}
+
+describe('OpenInDesktopAppHandler tests', () => {
+  test(`does not render the modal if no query param is present`, () => {
+    render(
+      <BrowserRouter>
+        <TestingMinimalRouterWrapper>
+          <p>Dummy app contents</p>
+        </TestingMinimalRouterWrapper>
+      </BrowserRouter>
+    )
+
+    const dummyAppContents = screen.getByText('Dummy app contents')
+    const modalContents = screen.queryByText('Open in desktop app')
+
+    expect(dummyAppContents).toBeInTheDocument()
+    expect(modalContents).not.toBeInTheDocument()
+  })
+
+  test(`renders the modal if the query param is present`, () => {
+    render(
+      <BrowserRouter>
+        <TestingMinimalRouterWrapper location="/?ask-open-desktop">
+          <p>Dummy app contents</p>
+        </TestingMinimalRouterWrapper>
+      </BrowserRouter>
+    )
+
+    let dummyAppContents = screen.queryByText('Dummy app contents')
+    let modalButton = screen.queryByText('Continue to web app')
+
+    // Starts as disconnected
+    expect(dummyAppContents).not.toBeInTheDocument()
+    expect(modalButton).not.toBeFalsy()
+    expect(modalButton).toBeInTheDocument()
+    fireEvent.click(modalButton as Element)
+
+    // I don't like that you have to re-query the screen here
+    dummyAppContents = screen.queryByText('Dummy app contents')
+    modalButton = screen.queryByText('Continue to web app')
+
+    expect(dummyAppContents).toBeInTheDocument()
+    expect(modalButton).not.toBeInTheDocument()
+  })
+})

src/components/OpenInDesktopAppHandler.tsx

@@ -0,0 +1,125 @@
+import { getSystemTheme, Themes } from 'lib/theme'
+import { ZOO_STUDIO_PROTOCOL } from 'lib/constants'
+import { isDesktop } from 'lib/isDesktop'
+import { useSearchParams } from 'react-router-dom'
+import { ASK_TO_OPEN_QUERY_PARAM } from 'lib/constants'
+import { VITE_KC_SITE_BASE_URL } from 'env'
+import { ActionButton } from './ActionButton'
+import { Transition } from '@headlessui/react'
+
+/**
+ * This component is a handler that checks if a certain query parameter
+ * is present, and if so, it will show a modal asking the user if they
+ * want to open the current page in the desktop app.
+ */
+export const OpenInDesktopAppHandler = (props: React.PropsWithChildren) => {
+  const theme = getSystemTheme()
+  const buttonClasses =
+    'bg-transparent flex-0 hover:bg-primary/10 dark:hover:bg-primary/10'
+  const pathLogomarkSvg = `${isDesktop() ? '.' : ''}/zma-logomark${
+    theme === Themes.Light ? '-dark' : ''
+  }.svg`
+  const [searchParams, setSearchParams] = useSearchParams()
+  // We also ignore this param on desktop, as it is redundant
+  const hasAskToOpenParam =
+    !isDesktop() && searchParams.has(ASK_TO_OPEN_QUERY_PARAM)
+
+  /**
+   * This function removes the query param to ask to open in desktop app
+   * and then navigates to the same route but with our custom protocol
+   * `zoo-studio:` instead of `https://${BASE_URL}`, to trigger the user's
+   * desktop app to open.
+   */
+  function onOpenInDesktopApp() {
+    const newSearchParams = new URLSearchParams(globalThis.location.search)
+    newSearchParams.delete(ASK_TO_OPEN_QUERY_PARAM)
+    const newURL = `${ZOO_STUDIO_PROTOCOL}${globalThis.location.pathname.replace(
+      '/',
+      ''
+    )}${searchParams.size > 0 ? `?${newSearchParams.toString()}` : ''}`
+    globalThis.location.href = newURL
+  }
+
+  /**
+   * Just remove the query param to ask to open in desktop app
+   * and continue to the web app.
+   */
+  function continueToWebApp() {
+    searchParams.delete(ASK_TO_OPEN_QUERY_PARAM)
+    setSearchParams(searchParams)
+  }
+
+  return hasAskToOpenParam ? (
+    <Transition
+      appear
+      show={true}
+      as="div"
+      className={
+        theme +
+        ` fixed inset-0 grid p-4 place-content-center ${
+          theme === Themes.Dark ? '!bg-chalkboard-110 text-chalkboard-20' : ''
+        }`
+      }
+    >
+      <Transition.Child
+        as="div"
+        className={`max-w-3xl py-6 px-10 flex flex-col items-center gap-8 
+          mx-auto border rounded-lg shadow-lg dark:bg-chalkboard-100`}
+        enter="ease-out duration-300"
+        enterFrom="opacity-0 scale-95"
+        enterTo="opacity-100 scale-100"
+        leave="ease-in duration-200"
+        leaveFrom="opacity-100 scale-100"
+        leaveTo="opacity-0 scale-95"
+        style={{ zIndex: 10 }}
+      >
+        <div>
+          <h1 className="text-2xl">
+            Launching{' '}
+            <img
+              src={pathLogomarkSvg}
+              className="w-48"
+              alt="Zoo Modeling App"
+            />
+          </h1>
+        </div>
+        <p className="text-primary flex items-center gap-2">
+          Choose where to open this link...
+        </p>
+        <div className="flex flex-col md:flex-row items-start justify-between gap-4 xl:gap-8">
+          <div className="flex flex-col gap-2">
+            <ActionButton
+              Element="button"
+              className={buttonClasses + ' !text-base'}
+              onClick={onOpenInDesktopApp}
+              iconEnd={{ icon: 'arrowRight' }}
+            >
+              Open in desktop app
+            </ActionButton>
+            <ActionButton
+              Element="externalLink"
+              className={
+                buttonClasses +
+                ' text-sm border-transparent justify-center dark:bg-transparent'
+              }
+              to={`${VITE_KC_SITE_BASE_URL}/modeling-app/download`}
+              iconEnd={{ icon: 'link', bgClassName: '!bg-transparent' }}
+            >
+              Download desktop app
+            </ActionButton>
+          </div>
+          <ActionButton
+            Element="button"
+            className={buttonClasses + ' -order-1 !text-base'}
+            onClick={continueToWebApp}
+            iconStart={{ icon: 'arrowLeft' }}
+          >
+            Continue to web app
+          </ActionButton>
+        </div>
+      </Transition.Child>
+    </Transition>
+  ) : (
+    props.children
+  )
+}

src/components/ProjectSidebarMenu.test.tsx

@@ -2,7 +2,6 @@ import { render, screen } from '@testing-library/react'
 import { BrowserRouter } from 'react-router-dom'
 import ProjectSidebarMenu from './ProjectSidebarMenu'
 import { SettingsAuthProviderJest } from './SettingsAuthProvider'
-import { CommandBarProvider } from './CommandBar/CommandBarProvider'
 import { Project } from 'lib/project'
 
 const now = new Date()
@@ -33,11 +32,9 @@ describe('ProjectSidebarMenu tests', () => {
   test('Disables popover menu by default', () => {
     render(
       <BrowserRouter>
-        <CommandBarProvider>
-          <SettingsAuthProviderJest>
-            <ProjectSidebarMenu project={projectWellFormed} />
-          </SettingsAuthProviderJest>
-        </CommandBarProvider>
+        <SettingsAuthProviderJest>
+          <ProjectSidebarMenu project={projectWellFormed} />
+        </SettingsAuthProviderJest>
       </BrowserRouter>
     )
 

src/components/ProjectSidebarMenu.tsx

@@ -7,14 +7,19 @@ import { Link, useLocation, useNavigate } from 'react-router-dom'
 import { Fragment, useMemo, useContext } from 'react'
 import { Logo } from './Logo'
 import { APP_NAME } from 'lib/constants'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { CustomIcon } from './CustomIcon'
 import { useLspContext } from './LspProvider'
-import { engineCommandManager, kclManager } from 'lib/singletons'
+import { codeManager, engineCommandManager, kclManager } from 'lib/singletons'
 import { MachineManagerContext } from 'components/MachineManagerProvider'
 import usePlatform from 'hooks/usePlatform'
 import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath'
 import Tooltip from './Tooltip'
+import { SnapshotFrom } from 'xstate'
+import { commandBarActor } from 'machines/commandBarMachine'
+import { useSelector } from '@xstate/react'
+import { copyFileShareLink } from 'lib/links'
+import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
+import { DEV } from 'env'
 
 const ProjectSidebarMenu = ({
   project,
@@ -84,6 +89,9 @@ function AppLogoLink({
   )
 }
 
+const commandsSelector = (state: SnapshotFrom<typeof commandBarActor>) =>
+  state.context.commands
+
 function ProjectMenuPopover({
   project,
   file,
@@ -95,17 +103,16 @@ function ProjectMenuPopover({
   const location = useLocation()
   const navigate = useNavigate()
   const filePath = useAbsoluteFilePath()
+  const { settings, auth } = useSettingsAuthContext()
   const machineManager = useContext(MachineManagerContext)
+  const commands = useSelector(commandBarActor, commandsSelector)
 
-  const { commandBarState, commandBarSend } = useCommandsContext()
   const { onProjectClose } = useLspContext()
   const exportCommandInfo = { name: 'Export', groupId: 'modeling' }
   const makeCommandInfo = { name: 'Make', groupId: 'modeling' }
   const findCommand = (obj: { name: string; groupId: string }) =>
     Boolean(
-      commandBarState.context.commands.find(
-        (c) => c.name === obj.name && c.groupId === obj.groupId
-      )
+      commands.find((c) => c.name === obj.name && c.groupId === obj.groupId)
     )
   const machineCount = machineManager.machines.length
 
@@ -150,12 +157,11 @@ function ProjectMenuPopover({
           ),
           disabled: !findCommand(exportCommandInfo),
           onClick: () =>
-            commandBarSend({
+            commandBarActor.send({
               type: 'Find and select command',
               data: exportCommandInfo,
             }),
         },
-        'break',
         {
           id: 'make',
           Element: 'button',
@@ -175,12 +181,26 @@ function ProjectMenuPopover({
           ),
           disabled: !findCommand(makeCommandInfo) || machineCount === 0,
           onClick: () => {
-            commandBarSend({
+            commandBarActor.send({
               type: 'Find and select command',
               data: makeCommandInfo,
             })
           },
         },
+        {
+          id: 'share-link',
+          Element: 'button',
+          children: 'Share link to file',
+          disabled: !DEV,
+          onClick: async () => {
+            await copyFileShareLink({
+              token: auth?.context.token || '',
+              code: codeManager.code,
+              name: project?.name || '',
+              units: settings.context.modeling.defaultUnit.current,
+            })
+          },
+        },
         'break',
         {
           id: 'go-home',
@@ -200,7 +220,7 @@ function ProjectMenuPopover({
     [
       platform,
       findCommand,
-      commandBarSend,
+      commandBarActor.send,
       engineCommandManager,
       onProjectClose,
       isDesktop,

src/components/ProjectsContextProvider.tsx

@@ -1,13 +1,12 @@
 import { useMachine } from '@xstate/react'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { useFileSystemWatcher } from 'hooks/useFileSystemWatcher'
 import { useProjectsLoader } from 'hooks/useProjectsLoader'
 import { projectsMachine } from 'machines/projectsMachine'
-import { createContext, useEffect, useState } from 'react'
+import { createContext, useCallback, useEffect, useState } from 'react'
 import { Actor, AnyStateMachine, fromPromise, Prop, StateFrom } from 'xstate'
 import { useLspContext } from './LspProvider'
 import toast from 'react-hot-toast'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 import { PATHS } from 'lib/paths'
 import {
   createNewProjectDirectory,
@@ -19,11 +18,28 @@ import {
   interpolateProjectNameWithIndex,
   doesProjectNameNeedInterpolated,
   getUniqueProjectName,
+  getNextFileName,
 } from 'lib/desktopFS'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import useStateMachineCommands from 'hooks/useStateMachineCommands'
 import { projectsCommandBarConfig } from 'lib/commandBarConfigs/projectsCommandConfig'
 import { isDesktop } from 'lib/isDesktop'
+import { commandBarActor } from 'machines/commandBarMachine'
+import {
+  CREATE_FILE_URL_PARAM,
+  FILE_EXT,
+  PROJECT_ENTRYPOINT,
+} from 'lib/constants'
+import { DeepPartial } from 'lib/types'
+import { Configuration } from 'wasm-lib/kcl/bindings/Configuration'
+import { codeManager } from 'lib/singletons'
+import {
+  loadAndValidateSettings,
+  projectConfigurationToSettingsPayload,
+  saveSettings,
+  setSettingsAtLevel,
+} from 'lib/settings/settingsUtils'
+import { Project } from 'lib/project'
 
 type MachineContext<T extends AnyStateMachine> = {
   state?: StateFrom<T>
@@ -53,12 +69,110 @@ export const ProjectsContextProvider = ({
   )
 }
 
+/**
+ * We need some of the functionality of the ProjectsContextProvider in the web version
+ * but we can't perform file system operations in the browser,
+ * so most of the behavior of this machine is stubbed out.
+ */
 const ProjectsContextWeb = ({ children }: { children: React.ReactNode }) => {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const clearImportSearchParams = useCallback(() => {
+    // Clear the search parameters related to the "Import file from URL" command
+    // or we'll never be able cancel or submit it.
+    searchParams.delete(CREATE_FILE_URL_PARAM)
+    searchParams.delete('code')
+    searchParams.delete('name')
+    searchParams.delete('units')
+    setSearchParams(searchParams)
+  }, [searchParams, setSearchParams])
+  const {
+    settings: { context: settings, send: settingsSend },
+  } = useSettingsAuthContext()
+
+  const [state, send, actor] = useMachine(
+    projectsMachine.provide({
+      actions: {
+        navigateToProject: () => {},
+        navigateToProjectIfNeeded: () => {},
+        navigateToFile: () => {},
+        toastSuccess: ({ event }) =>
+          toast.success(
+            ('data' in event && typeof event.data === 'string' && event.data) ||
+              ('output' in event &&
+                'message' in event.output &&
+                typeof event.output.message === 'string' &&
+                event.output.message) ||
+              ''
+          ),
+        toastError: ({ event }) =>
+          toast.error(
+            ('data' in event && typeof event.data === 'string' && event.data) ||
+              ('output' in event &&
+                typeof event.output === 'string' &&
+                event.output) ||
+              ''
+          ),
+      },
+      actors: {
+        readProjects: fromPromise(async () => [] as Project[]),
+        createProject: fromPromise(async () => ({
+          message: 'not implemented on web',
+        })),
+        renameProject: fromPromise(async () => ({
+          message: 'not implemented on web',
+          oldName: '',
+          newName: '',
+        })),
+        deleteProject: fromPromise(async () => ({
+          message: 'not implemented on web',
+          name: '',
+        })),
+        createFile: fromPromise(async ({ input }) => {
+          // Browser version doesn't navigate, just overwrites the current file
+          clearImportSearchParams()
+          codeManager.updateCodeStateEditor(input.code || '')
+          await codeManager.writeToFile()
+
+          settingsSend({
+            type: 'set.modeling.defaultUnit',
+            data: {
+              level: 'project',
+              value: input.units,
+            },
+          })
+
+          return {
+            message: 'File and units overwritten successfully',
+            fileName: input.name,
+            projectName: '',
+          }
+        }),
+      },
+    }),
+    {
+      input: {
+        projects: [],
+        defaultProjectName: settings.projects.defaultProjectName.current,
+        defaultDirectory: settings.app.projectDirectory.current,
+      },
+    }
+  )
+
+  // register all project-related command palette commands
+  useStateMachineCommands({
+    machineId: 'projects',
+    send,
+    state,
+    commandBarConfig: projectsCommandBarConfig,
+    actor,
+    onCancel: clearImportSearchParams,
+  })
+
   return (
     <ProjectsMachineContext.Provider
       value={{
-        state: undefined,
-        send: () => {},
+        state,
+        send,
       }}
     >
       {children}
@@ -73,19 +187,21 @@ const ProjectsContextDesktop = ({
 }) => {
   const navigate = useNavigate()
   const location = useLocation()
-  const { commandBarSend } = useCommandsContext()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const clearImportSearchParams = useCallback(() => {
+    // Clear the search parameters related to the "Import file from URL" command
+    // or we'll never be able cancel or submit it.
+    searchParams.delete(CREATE_FILE_URL_PARAM)
+    searchParams.delete('code')
+    searchParams.delete('name')
+    searchParams.delete('units')
+    setSearchParams(searchParams)
+  }, [searchParams, setSearchParams])
   const { onProjectOpen } = useLspContext()
   const {
     settings: { context: settings },
   } = useSettingsAuthContext()
 
-  useEffect(() => {
-    console.log(
-      'project directory changed',
-      settings.app.projectDirectory.current
-    )
-  }, [settings.app.projectDirectory.current])
-
   const [projectsLoaderTrigger, setProjectsLoaderTrigger] = useState(0)
   const { projectPaths, projectsDir } = useProjectsLoader([
     projectsLoaderTrigger,
@@ -126,7 +242,7 @@ const ProjectsContextDesktop = ({
               },
               null
             )
-            commandBarSend({ type: 'Close' })
+            commandBarActor.send({ type: 'Close' })
             const newPathName = `${PATHS.FILE}/${encodeURIComponent(
               projectPath
             )}`
@@ -169,6 +285,31 @@ const ProjectsContextDesktop = ({
             }
           }
         },
+        navigateToFile: ({ context, event }) => {
+          if (event.type !== 'xstate.done.actor.create-file') return
+          // For now, the browser version of create-file doesn't need to navigate
+          // since it just overwrites the current file.
+          if (!isDesktop()) return
+          let projectPath = window.electron.join(
+            context.defaultDirectory,
+            event.output.projectName
+          )
+          let filePath = window.electron.join(
+            projectPath,
+            event.output.fileName
+          )
+          onProjectOpen(
+            {
+              name: event.output.projectName,
+              path: projectPath,
+            },
+            null
+          )
+          const pathToNavigateTo = `${PATHS.FILE}/${encodeURIComponent(
+            filePath
+          )}`
+          navigate(pathToNavigateTo)
+        },
         toastSuccess: ({ event }) =>
           toast.success(
             ('data' in event && typeof event.data === 'string' && event.data) ||
@@ -218,8 +359,6 @@ const ProjectsContextDesktop = ({
             name = interpolateProjectNameWithIndex(name, nextIndex)
           }
 
-          console.log('from Project')
-
           await renameProjectDirectory(
             window.electron.path.join(defaultDirectory, oldName),
             name
@@ -242,13 +381,82 @@ const ProjectsContextDesktop = ({
             name: input.name,
           }
         }),
-      },
-      guards: {
-        'Has at least 1 project': ({ event }) => {
-          if (event.type !== 'xstate.done.actor.read-projects') return false
-          console.log(`from has at least 1 project: ${event.output.length}`)
-          return event.output.length ? event.output.length >= 1 : false
-        },
+        createFile: fromPromise(async ({ input }) => {
+          let projectName =
+            (input.method === 'newProject' ? input.name : input.projectName) ||
+            settings.projects.defaultProjectName.current
+          let fileName =
+            input.method === 'newProject'
+              ? PROJECT_ENTRYPOINT
+              : input.name.endsWith(FILE_EXT)
+              ? input.name
+              : input.name + FILE_EXT
+          let message = 'File created successfully'
+          const unitsConfiguration: DeepPartial<Configuration> = {
+            settings: {
+              project: {
+                directory: settings.app.projectDirectory.current,
+              },
+              modeling: {
+                base_unit: input.units,
+              },
+            },
+          }
+
+          const needsInterpolated = doesProjectNameNeedInterpolated(projectName)
+          if (needsInterpolated) {
+            const nextIndex = getNextProjectIndex(projectName, input.projects)
+            projectName = interpolateProjectNameWithIndex(
+              projectName,
+              nextIndex
+            )
+          }
+
+          // Create the project around the file if newProject
+          if (input.method === 'newProject') {
+            await createNewProjectDirectory(
+              projectName,
+              input.code,
+              unitsConfiguration
+            )
+            message = `Project "${projectName}" created successfully with link contents`
+          } else {
+            let projectPath = window.electron.join(
+              settings.app.projectDirectory.current,
+              projectName
+            )
+
+            message = `File "${fileName}" created successfully`
+            const existingConfiguration = await loadAndValidateSettings(
+              projectPath
+            )
+            const settingsToSave = setSettingsAtLevel(
+              existingConfiguration.settings,
+              'project',
+              projectConfigurationToSettingsPayload(unitsConfiguration)
+            )
+            await saveSettings(settingsToSave, projectPath)
+          }
+
+          // Create the file
+          let baseDir = window.electron.join(
+            settings.app.projectDirectory.current,
+            projectName
+          )
+          const { name, path } = getNextFileName({
+            entryName: fileName,
+            baseDir,
+          })
+
+          fileName = name
+          await window.electron.writeFile(path, input.code || '')
+
+          return {
+            message,
+            fileName,
+            projectName,
+          }
+        }),
       },
     }),
     {
@@ -271,6 +479,7 @@ const ProjectsContextDesktop = ({
     state,
     commandBarConfig: projectsCommandBarConfig,
     actor,
+    onCancel: clearImportSearchParams,
   })
 
   return (

src/components/SettingsAuthProvider.tsx

@@ -29,7 +29,6 @@ import {
   createSettingsCommand,
   settingsWithCommandConfigs,
 } from 'lib/commandBarConfigs/settingsCommandConfig'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { Command } from 'lib/commandTypes'
 import { BaseUnit } from 'lib/settings/settingsTypes'
 import {
@@ -42,6 +41,7 @@ import { isDesktop } from 'lib/isDesktop'
 import { useFileSystemWatcher } from 'hooks/useFileSystemWatcher'
 import { codeManager } from 'lib/singletons'
 import { createRouteCommands } from 'lib/commandBarConfigs/routeCommandConfig'
+import { commandBarActor } from 'machines/commandBarMachine'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
@@ -109,7 +109,6 @@ export const SettingsAuthProviderBase = ({
 }) => {
   const location = useLocation()
   const navigate = useNavigate()
-  const { commandBarSend } = useCommandsContext()
   const [settingsPath, setSettingsPath] = useState<string | undefined>(
     undefined
   )
@@ -278,10 +277,10 @@ export const SettingsAuthProviderBase = ({
       )
       .filter((c) => c !== null) as Command[]
 
-    commandBarSend({ type: 'Add commands', data: { commands: commands } })
+    commandBarActor.send({ type: 'Add commands', data: { commands: commands } })
 
     return () => {
-      commandBarSend({
+      commandBarActor.send({
         type: 'Remove commands',
         data: { commands },
       })
@@ -290,7 +289,7 @@ export const SettingsAuthProviderBase = ({
     settingsState,
     settingsSend,
     settingsActor,
-    commandBarSend,
+    commandBarActor.send,
     settingsWithCommandConfigs,
   ])
 
@@ -303,7 +302,7 @@ export const SettingsAuthProviderBase = ({
       encodeURIComponent(loadedProject?.file?.path || BROWSER_PATH)
     const { RouteTelemetryCommand, RouteHomeCommand, RouteSettingsCommand } =
       createRouteCommands(navigate, location, filePath)
-    commandBarSend({
+    commandBarActor.send({
       type: 'Remove commands',
       data: {
         commands: [
@@ -314,12 +313,12 @@ export const SettingsAuthProviderBase = ({
       },
     })
     if (location.pathname === PATHS.HOME) {
-      commandBarSend({
+      commandBarActor.send({
         type: 'Add commands',
         data: { commands: [RouteTelemetryCommand, RouteSettingsCommand] },
       })
     } else if (location.pathname.includes(PATHS.FILE)) {
-      commandBarSend({
+      commandBarActor.send({
         type: 'Add commands',
         data: {
           commands: [

src/components/Stream.tsx

@@ -17,10 +17,11 @@ import {
 import { useRouteLoaderData } from 'react-router-dom'
 import { PATHS } from 'lib/paths'
 import { IndexLoaderData } from 'lib/types'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { err, reportRejection } from 'lib/trap'
 import { getArtifactOfTypes } from 'lang/std/artifactGraph'
 import { ViewControlContextMenu } from './ViewControlMenu'
+import { commandBarActor, useCommandBarState } from 'machines/commandBarMachine'
+import { useSelector } from '@xstate/react'
 
 enum StreamState {
   Playing = 'playing',
@@ -35,7 +36,7 @@ export const Stream = () => {
   const videoRef = useRef<HTMLVideoElement>(null)
   const { settings } = useSettingsAuthContext()
   const { state, send } = useModelingContext()
-  const { commandBarState } = useCommandsContext()
+  const commandBarState = useCommandBarState()
   const { mediaStream } = useAppStream()
   const { overallState, immediateState } = useNetworkContext()
   const [streamState, setStreamState] = useState(StreamState.Unset)

src/components/ToastTextToCad.tsx

@@ -28,7 +28,7 @@ import { base64Decode } from 'lang/wasm'
 import { sendTelemetry } from 'lib/textToCad'
 import { Themes } from 'lib/theme'
 import { ActionButton } from './ActionButton'
-import { commandBarMachine } from 'machines/commandBarMachine'
+import { commandBarActor, commandBarMachine } from 'machines/commandBarMachine'
 import { EventFrom } from 'xstate'
 import { fileMachine } from 'machines/fileMachine'
 import { reportRejection } from 'lib/trap'
@@ -43,15 +43,10 @@ export function ToastTextToCadError({
   toastId,
   message,
   prompt,
-  commandBarSend,
 }: {
   toastId: string
   message: string
   prompt: string
-  commandBarSend: (
-    event: EventFrom<typeof commandBarMachine>,
-    data?: unknown
-  ) => void
 }) {
   return (
     <div className="flex flex-col justify-between gap-6">
@@ -81,7 +76,7 @@ export function ToastTextToCadError({
           }}
           name="Edit prompt"
           onClick={() => {
-            commandBarSend({
+            commandBarActor.send({
               type: 'Find and select command',
               data: {
                 groupId: 'modeling',

src/components/Toolbar/EqualAngle.tsx

@@ -1,10 +1,8 @@
 import { toolTips } from 'lang/langHelpers'
 import { Selections } from 'lib/selections'
 import { Program, Expr, VariableDeclarator } from '../../lang/wasm'
-import {
-  getNodePathFromSourceRange,
-  getNodeFromPath,
-} from '../../lang/queryAst'
+import { getNodeFromPath } from '../../lang/queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import { isSketchVariablesLinked } from '../../lang/std/sketchConstraints'
 import {
   transformSecondarySketchLinesTagFirst,

src/components/UserSidebarMenu.test.tsx

@@ -8,7 +8,6 @@ import {
 } from 'react-router-dom'
 import { Models } from '@kittycad/lib'
 import { SettingsAuthProviderJest } from './SettingsAuthProvider'
-import { CommandBarProvider } from './CommandBar/CommandBarProvider'
 
 type User = Models['User_type']
 
@@ -124,9 +123,7 @@ function TestWrap({ children }: { children: React.ReactNode }) {
       <Route
         path="/file/:id"
         element={
-          <CommandBarProvider>
-            <SettingsAuthProviderJest>{children}</SettingsAuthProviderJest>
-          </CommandBarProvider>
+          <SettingsAuthProviderJest>{children}</SettingsAuthProviderJest>
         }
       />
     ),

src/editor/manager.ts

@@ -5,7 +5,6 @@ import { engineCommandManager, kclManager } from 'lib/singletons'
 import { modelingMachine, ModelingMachineEvent } from 'machines/modelingMachine'
 import { Selections, Selection, processCodeMirrorRanges } from 'lib/selections'
 import { undo, redo } from '@codemirror/commands'
-import { CommandBarMachineEvent } from 'machines/commandBarMachine'
 import { addLineHighlight, addLineHighlightEvent } from './highlightextension'
 import {
   Diagnostic,
@@ -52,9 +51,6 @@ export default class EditorManager {
   private _modelingSend: (eventInfo: ModelingMachineEvent) => void = () => {}
   private _modelingState: StateFrom<typeof modelingMachine> | null = null
 
-  private _commandBarSend: (eventInfo: CommandBarMachineEvent) => void =
-    () => {}
-
   private _convertToVariableEnabled: boolean = false
   private _convertToVariableCallback: () => void = () => {}
 
@@ -161,14 +157,6 @@ export default class EditorManager {
     this._modelingState = state
   }
 
-  setCommandBarSend(send: (eventInfo: CommandBarMachineEvent) => void) {
-    this._commandBarSend = send
-  }
-
-  commandBarSend(eventInfo: CommandBarMachineEvent): void {
-    return this._commandBarSend(eventInfo)
-  }
-
   get highlightRange(): Array<[number, number]> {
     return this._highlightRange
   }
@@ -315,6 +303,21 @@ export default class EditorManager {
     if (selections?.graphSelections?.length === 0) {
       return
     }
+
+    if (!this._editorView) {
+      return
+    }
+    const codeBaseSelections = this.createEditorSelection(selections)
+    this._editorView.dispatch({
+      selection: codeBaseSelections,
+      annotations: [
+        updateOutsideEditorEvent,
+        Transaction.addToHistory.of(false),
+      ],
+    })
+  }
+
+  createEditorSelection(selections: Selections) {
     let codeBasedSelections = []
     for (const selection of selections.graphSelections) {
       const safeEnd = Math.min(
@@ -331,18 +334,7 @@ export default class EditorManager {
         .range[1]
     const safeEnd = Math.min(end, this._editorView?.state.doc.length || end)
     codeBasedSelections.push(EditorSelection.cursor(safeEnd))
-
-    if (!this._editorView) {
-      return
-    }
-
-    this._editorView.dispatch({
-      selection: EditorSelection.create(codeBasedSelections, 1),
-      annotations: [
-        updateOutsideEditorEvent,
-        Transaction.addToHistory.of(false),
-      ],
-    })
+    return EditorSelection.create(codeBasedSelections, 1)
   }
 
   // We will ONLY get here if the user called a select event.

src/hooks/useCommandsContext.ts

@@ -1,10 +0,0 @@
-import { CommandsContext } from 'components/CommandBar/CommandBarProvider'
-
-export const useCommandsContext = () => {
-  const commandBarActor = CommandsContext.useActorRef()
-  const commandBarState = CommandsContext.useSelector((state) => state)
-  return {
-    commandBarSend: commandBarActor.send,
-    commandBarState,
-  }
-}

src/hooks/useCreateFileLinkQueryWatcher.ts

@@ -0,0 +1,65 @@
+import { base64ToString } from 'lib/base64'
+import { CREATE_FILE_URL_PARAM, DEFAULT_FILE_NAME } from 'lib/constants'
+import { useEffect } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import { useSettingsAuthContext } from './useSettingsAuthContext'
+import { isDesktop } from 'lib/isDesktop'
+import { FileLinkParams } from 'lib/links'
+import { ProjectsCommandSchema } from 'lib/commandBarConfigs/projectsCommandConfig'
+import { baseUnitsUnion } from 'lib/settings/settingsTypes'
+
+// For initializing the command arguments, we actually want `method` to be undefined
+// so that we don't skip it in the command palette.
+export type CreateFileSchemaMethodOptional = Omit<
+  ProjectsCommandSchema['Import file from URL'],
+  'method'
+> & {
+  method?: 'newProject' | 'existingProject'
+}
+
+/**
+ * companion to createFileLink. This hook runs an effect on mount that
+ * checks the URL for the CREATE_FILE_URL_PARAM and triggers the "Create file"
+ * command if it is present, loading the command's default values from the other
+ * URL parameters.
+ */
+export function useCreateFileLinkQuery(
+  callback: (args: CreateFileSchemaMethodOptional) => void
+) {
+  const [searchParams] = useSearchParams()
+  const { settings } = useSettingsAuthContext()
+
+  useEffect(() => {
+    const createFileParam = searchParams.has(CREATE_FILE_URL_PARAM)
+
+    if (createFileParam) {
+      const params: FileLinkParams = {
+        code: base64ToString(
+          decodeURIComponent(searchParams.get('code') ?? '')
+        ),
+
+        name: searchParams.get('name') ?? DEFAULT_FILE_NAME,
+
+        units:
+          (baseUnitsUnion.find((unit) => searchParams.get('units') === unit) ||
+            settings.context.modeling.defaultUnit.default) ??
+          settings.context.modeling.defaultUnit.current,
+      }
+
+      const argDefaultValues: CreateFileSchemaMethodOptional = {
+        name: params.name
+          ? isDesktop()
+            ? params.name.replace('.kcl', '')
+            : params.name
+          : isDesktop()
+          ? settings.context.projects.defaultProjectName.current
+          : DEFAULT_FILE_NAME,
+        code: params.code || '',
+        units: params.units,
+        method: isDesktop() ? undefined : 'existingProject',
+      }
+
+      callback(argDefaultValues)
+    }
+  }, [searchParams])
+}

src/hooks/useEngineConnectionSubscriptions.ts

@@ -17,7 +17,8 @@ import {
 } from 'lang/std/artifactGraph'
 import { err, reportRejection } from 'lib/trap'
 import { DefaultPlaneStr, getFaceDetails } from 'clientSideScene/sceneEntities'
-import { getNodeFromPath, getNodePathFromSourceRange } from 'lang/queryAst'
+import { getNodeFromPath } from 'lang/queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import { CallExpression, defaultSourceRange } from 'lang/wasm'
 import { EdgeCutInfo, ExtrudeFacePlane } from 'machines/modelingMachine'
 

src/hooks/useProjectsLoader.tsx

@@ -14,7 +14,7 @@ export const useProjectsLoader = (deps?: [number]) => {
 
   useEffect(() => {
     // Useless on web, until we get fake filesystems over there.
-    if (!isDesktop) return
+    if (!isDesktop()) return
 
     if (deps && deps[0] === lastTs) return
 

src/hooks/useStateMachineCommands.ts

@@ -1,7 +1,6 @@
 import { useEffect } from 'react'
 import { AnyStateMachine, Actor, StateFrom, EventFrom } 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'
@@ -15,6 +14,7 @@ import { useKclContext } from 'lang/KclProvider'
 import { useNetworkContext } from 'hooks/useNetworkContext'
 import { NetworkHealthState } from 'hooks/useNetworkStatus'
 import { useAppState } from 'AppState'
+import { commandBarActor } from 'machines/commandBarMachine'
 
 // This might not be necessary, AnyStateMachine from xstate is working
 export type AllMachines =
@@ -48,7 +48,6 @@ export default function useStateMachineCommands<
   allCommandsRequireNetwork = false,
   onCancel,
 }: UseStateMachineCommandsArgs<T, S>) {
-  const { commandBarSend } = useCommandsContext()
   const { overallState } = useNetworkContext()
   const { isExecuting } = useKclContext()
   const { isStreamReady } = useAppState()
@@ -76,10 +75,13 @@ export default function useStateMachineCommands<
       })
       .filter((c) => c !== null) as Command[] // TS isn't smart enough to know this filter removes nulls
 
-    commandBarSend({ type: 'Add commands', data: { commands: newCommands } })
+    commandBarActor.send({
+      type: 'Add commands',
+      data: { commands: newCommands },
+    })
 
     return () => {
-      commandBarSend({
+      commandBarActor.send({
         type: 'Remove commands',
         data: { commands: newCommands },
       })

src/lang/getNodePathFromSourceRange.test.ts

@@ -1,4 +1,5 @@
-import { getNodePathFromSourceRange, getNodeFromPath } from './queryAst'
+import { getNodeFromPath } from './queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import {
   Identifier,
   assertParse,

src/lang/modifyAst.test.ts

@@ -25,7 +25,8 @@ import {
   deleteFromSelection,
 } from './modifyAst'
 import { enginelessExecutor } from '../lib/testHelpers'
-import { findUsesOfTagInPipe, getNodePathFromSourceRange } from './queryAst'
+import { findUsesOfTagInPipe } from './queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import { err } from 'lib/trap'
 import { SimplifiedArgDetails } from './std/stdTypes'
 import { Node } from 'wasm-lib/kcl/bindings/Node'

src/lang/modifyAst.ts

@@ -26,10 +26,10 @@ import {
   findAllPreviousVariables,
   findAllPreviousVariablesPath,
   getNodeFromPath,
-  getNodePathFromSourceRange,
   isNodeSafeToReplace,
   traverse,
 } from './queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import { addTagForSketchOnFace, getConstraintInfo } from './std/sketch'
 import {
   PathToNodeMap,

src/lang/modifyAst/addEdgeTreatment.test.ts

@@ -21,7 +21,8 @@ import {
   ChamferParameters,
   EdgeTreatmentParameters,
 } from './addEdgeTreatment'
-import { getNodeFromPath, getNodePathFromSourceRange } from '../queryAst'
+import { getNodeFromPath } from '../queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import { createLiteral } from 'lang/modifyAst'
 import { err } from 'lib/trap'
 import { Selection, Selections } from 'lib/selections'

src/lang/modifyAst/addEdgeTreatment.ts

@@ -20,10 +20,10 @@ import {
 } from '../modifyAst'
 import {
   getNodeFromPath,
-  getNodePathFromSourceRange,
   hasSketchPipeBeenExtruded,
   traverse,
 } from '../queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import {
   addTagForSketchOnFace,
   getTagFromCallExpression,

src/lang/modifyAst/addRevolve.ts

@@ -19,7 +19,8 @@ import {
   findUniqueName,
   createVariableDeclaration,
 } from 'lang/modifyAst'
-import { getNodeFromPath, getNodePathFromSourceRange } from 'lang/queryAst'
+import { getNodeFromPath } from 'lang/queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import {
   mutateAstWithTagForSketchSegment,
   getEdgeTagCall,

src/lang/queryAst.test.ts

@@ -10,7 +10,6 @@ import {
   findAllPreviousVariables,
   isNodeSafeToReplace,
   isTypeInValue,
-  getNodePathFromSourceRange,
   hasExtrudeSketch,
   findUsesOfTagInPipe,
   hasSketchPipeBeenExtruded,
@@ -19,6 +18,7 @@ import {
   getNodeFromPath,
   doesSceneHaveExtrudedSketch,
 } from './queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import { enginelessExecutor } from '../lib/testHelpers'
 import {
   createArrayExpression,

src/lang/queryAst.ts

@@ -22,6 +22,7 @@ import {
   VariableDeclaration,
   VariableDeclarator,
 } from './wasm'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import { createIdentifier, splitPathAtLastIndex } from './modifyAst'
 import { getSketchSegmentFromSourceRange } from './std/sketchConstraints'
 import { getAngle } from '../lib/utils'
@@ -125,311 +126,6 @@ export function getNodeFromPathCurry(
   }
 }
 
-function moreNodePathFromSourceRange(
-  node: Node<
-    | Expr
-    | ImportStatement
-    | ExpressionStatement
-    | VariableDeclaration
-    | ReturnStatement
-  >,
-  sourceRange: SourceRange,
-  previousPath: PathToNode = [['body', '']]
-): PathToNode {
-  const [start, end] = sourceRange
-  let path: PathToNode = [...previousPath]
-  const _node = { ...node }
-
-  if (start < _node.start || end > _node.end) return path
-
-  const isInRange = _node.start <= start && _node.end >= end
-
-  if (
-    (_node.type === 'Identifier' ||
-      _node.type === 'Literal' ||
-      _node.type === 'TagDeclarator') &&
-    isInRange
-  ) {
-    return path
-  }
-
-  if (_node.type === 'CallExpression' && isInRange) {
-    const { callee, arguments: args } = _node
-    if (
-      callee.type === 'Identifier' &&
-      callee.start <= start &&
-      callee.end >= end
-    ) {
-      path.push(['callee', 'CallExpression'])
-      return path
-    }
-    if (args.length > 0) {
-      for (let argIndex = 0; argIndex < args.length; argIndex++) {
-        const arg = args[argIndex]
-        if (arg.start <= start && arg.end >= end) {
-          path.push(['arguments', 'CallExpression'])
-          path.push([argIndex, 'index'])
-          return moreNodePathFromSourceRange(arg, sourceRange, path)
-        }
-      }
-    }
-    return path
-  }
-
-  if (_node.type === 'CallExpressionKw' && isInRange) {
-    const { callee, arguments: args } = _node
-    if (
-      callee.type === 'Identifier' &&
-      callee.start <= start &&
-      callee.end >= end
-    ) {
-      path.push(['callee', 'CallExpressionKw'])
-      return path
-    }
-    if (args.length > 0) {
-      for (let argIndex = 0; argIndex < args.length; argIndex++) {
-        const arg = args[argIndex].arg
-        if (arg.start <= start && arg.end >= end) {
-          path.push(['arguments', 'CallExpressionKw'])
-          path.push([argIndex, 'index'])
-          return moreNodePathFromSourceRange(arg, sourceRange, path)
-        }
-      }
-    }
-    return path
-  }
-
-  if (_node.type === 'BinaryExpression' && isInRange) {
-    const { left, right } = _node
-    if (left.start <= start && left.end >= end) {
-      path.push(['left', 'BinaryExpression'])
-      return moreNodePathFromSourceRange(left, sourceRange, path)
-    }
-    if (right.start <= start && right.end >= end) {
-      path.push(['right', 'BinaryExpression'])
-      return moreNodePathFromSourceRange(right, sourceRange, path)
-    }
-    return path
-  }
-  if (_node.type === 'PipeExpression' && isInRange) {
-    const { body } = _node
-    for (let i = 0; i < body.length; i++) {
-      const pipe = body[i]
-      if (pipe.start <= start && pipe.end >= end) {
-        path.push(['body', 'PipeExpression'])
-        path.push([i, 'index'])
-        return moreNodePathFromSourceRange(pipe, sourceRange, path)
-      }
-    }
-    return path
-  }
-  if (_node.type === 'ArrayExpression' && isInRange) {
-    const { elements } = _node
-    for (let elIndex = 0; elIndex < elements.length; elIndex++) {
-      const element = elements[elIndex]
-      if (element.start <= start && element.end >= end) {
-        path.push(['elements', 'ArrayExpression'])
-        path.push([elIndex, 'index'])
-        return moreNodePathFromSourceRange(element, sourceRange, path)
-      }
-    }
-    return path
-  }
-  if (_node.type === 'ObjectExpression' && isInRange) {
-    const { properties } = _node
-    for (let propIndex = 0; propIndex < properties.length; propIndex++) {
-      const property = properties[propIndex]
-      if (property.start <= start && property.end >= end) {
-        path.push(['properties', 'ObjectExpression'])
-        path.push([propIndex, 'index'])
-        if (property.key.start <= start && property.key.end >= end) {
-          path.push(['key', 'Property'])
-          return moreNodePathFromSourceRange(property.key, sourceRange, path)
-        }
-        if (property.value.start <= start && property.value.end >= end) {
-          path.push(['value', 'Property'])
-          return moreNodePathFromSourceRange(property.value, sourceRange, path)
-        }
-      }
-    }
-    return path
-  }
-  if (_node.type === 'ExpressionStatement' && isInRange) {
-    const { expression } = _node
-    path.push(['expression', 'ExpressionStatement'])
-    return moreNodePathFromSourceRange(expression, sourceRange, path)
-  }
-  if (_node.type === 'VariableDeclaration' && isInRange) {
-    const declaration = _node.declaration
-
-    if (declaration.start <= start && declaration.end >= end) {
-      path.push(['declaration', 'VariableDeclaration'])
-      const init = declaration.init
-      if (init.start <= start && init.end >= end) {
-        path.push(['init', ''])
-        return moreNodePathFromSourceRange(init, sourceRange, path)
-      }
-    }
-  }
-  if (_node.type === 'VariableDeclaration' && isInRange) {
-    const declaration = _node.declaration
-
-    if (declaration.start <= start && declaration.end >= end) {
-      const init = declaration.init
-      if (init.start <= start && init.end >= end) {
-        path.push(['declaration', 'VariableDeclaration'])
-        path.push(['init', ''])
-        return moreNodePathFromSourceRange(init, sourceRange, path)
-      }
-    }
-    return path
-  }
-  if (_node.type === 'UnaryExpression' && isInRange) {
-    const { argument } = _node
-    if (argument.start <= start && argument.end >= end) {
-      path.push(['argument', 'UnaryExpression'])
-      return moreNodePathFromSourceRange(argument, sourceRange, path)
-    }
-    return path
-  }
-  if (_node.type === 'FunctionExpression' && isInRange) {
-    for (let i = 0; i < _node.params.length; i++) {
-      const param = _node.params[i]
-      if (param.identifier.start <= start && param.identifier.end >= end) {
-        path.push(['params', 'FunctionExpression'])
-        path.push([i, 'index'])
-        return moreNodePathFromSourceRange(param.identifier, sourceRange, path)
-      }
-    }
-    if (_node.body.start <= start && _node.body.end >= end) {
-      path.push(['body', 'FunctionExpression'])
-      const fnBody = _node.body.body
-      for (let i = 0; i < fnBody.length; i++) {
-        const statement = fnBody[i]
-        if (statement.start <= start && statement.end >= end) {
-          path.push(['body', 'FunctionExpression'])
-          path.push([i, 'index'])
-          return moreNodePathFromSourceRange(statement, sourceRange, path)
-        }
-      }
-    }
-    return path
-  }
-  if (_node.type === 'ReturnStatement' && isInRange) {
-    const { argument } = _node
-    if (argument.start <= start && argument.end >= end) {
-      path.push(['argument', 'ReturnStatement'])
-      return moreNodePathFromSourceRange(argument, sourceRange, path)
-    }
-    return path
-  }
-  if (_node.type === 'MemberExpression' && isInRange) {
-    const { object, property } = _node
-    if (object.start <= start && object.end >= end) {
-      path.push(['object', 'MemberExpression'])
-      return moreNodePathFromSourceRange(object, sourceRange, path)
-    }
-    if (property.start <= start && property.end >= end) {
-      path.push(['property', 'MemberExpression'])
-      return moreNodePathFromSourceRange(property, sourceRange, path)
-    }
-    return path
-  }
-
-  if (_node.type === 'PipeSubstitution' && isInRange) return path
-
-  if (_node.type === 'IfExpression' && isInRange) {
-    const { cond, then_val, else_ifs, final_else } = _node
-    if (cond.start <= start && cond.end >= end) {
-      path.push(['cond', 'IfExpression'])
-      return moreNodePathFromSourceRange(cond, sourceRange, path)
-    }
-    if (then_val.start <= start && then_val.end >= end) {
-      path.push(['then_val', 'IfExpression'])
-      path.push(['body', 'IfExpression'])
-      return getNodePathFromSourceRange(then_val, sourceRange, path)
-    }
-    for (let i = 0; i < else_ifs.length; i++) {
-      const else_if = else_ifs[i]
-      if (else_if.start <= start && else_if.end >= end) {
-        path.push(['else_ifs', 'IfExpression'])
-        path.push([i, 'index'])
-        const { cond, then_val } = else_if
-        if (cond.start <= start && cond.end >= end) {
-          path.push(['cond', 'IfExpression'])
-          return moreNodePathFromSourceRange(cond, sourceRange, path)
-        }
-        path.push(['then_val', 'IfExpression'])
-        path.push(['body', 'IfExpression'])
-        return getNodePathFromSourceRange(then_val, sourceRange, path)
-      }
-    }
-    if (final_else.start <= start && final_else.end >= end) {
-      path.push(['final_else', 'IfExpression'])
-      path.push(['body', 'IfExpression'])
-      return getNodePathFromSourceRange(final_else, sourceRange, path)
-    }
-    return path
-  }
-
-  if (_node.type === 'ImportStatement' && isInRange) {
-    if (_node.selector && _node.selector.type === 'List') {
-      path.push(['selector', 'ImportStatement'])
-      const { items } = _node.selector
-      for (let i = 0; i < items.length; i++) {
-        const item = items[i]
-        if (item.start <= start && item.end >= end) {
-          path.push(['items', 'ImportSelector'])
-          path.push([i, 'index'])
-          if (item.name.start <= start && item.name.end >= end) {
-            path.push(['name', 'ImportItem'])
-            return path
-          }
-          if (
-            item.alias &&
-            item.alias.start <= start &&
-            item.alias.end >= end
-          ) {
-            path.push(['alias', 'ImportItem'])
-            return path
-          }
-          return path
-        }
-      }
-      return path
-    }
-    return path
-  }
-
-  console.error('not implemented: ' + node.type)
-
-  return path
-}
-
-export function getNodePathFromSourceRange(
-  node: Program,
-  sourceRange: SourceRange,
-  previousPath: PathToNode = [['body', '']]
-): PathToNode {
-  const [start, end] = sourceRange || []
-  let path: PathToNode = [...previousPath]
-  const _node = { ...node }
-
-  // loop over each statement in body getting the index with a for loop
-  for (
-    let statementIndex = 0;
-    statementIndex < _node.body.length;
-    statementIndex++
-  ) {
-    const statement = _node.body[statementIndex]
-    if (statement.start <= start && statement.end >= end) {
-      path.push([statementIndex, 'index'])
-      return moreNodePathFromSourceRange(statement, sourceRange, path)
-    }
-  }
-  return path
-}
-
 type KCLNode = Node<
   | Expr
   | ExpressionStatement

src/lang/queryAstNodePathUtils.ts

@@ -0,0 +1,316 @@
+import {
+  Expr,
+  ExpressionStatement,
+  VariableDeclaration,
+  ReturnStatement,
+  SourceRange,
+  PathToNode,
+  Program,
+} from './wasm'
+import { ImportStatement } from 'wasm-lib/kcl/bindings/ImportStatement'
+import { Node } from 'wasm-lib/kcl/bindings/Node'
+
+function moreNodePathFromSourceRange(
+  node: Node<
+    | Expr
+    | ImportStatement
+    | ExpressionStatement
+    | VariableDeclaration
+    | ReturnStatement
+  >,
+  sourceRange: SourceRange,
+  previousPath: PathToNode = [['body', '']]
+): PathToNode {
+  const [start, end] = sourceRange
+  let path: PathToNode = [...previousPath]
+  const _node = { ...node }
+
+  if (start < _node.start || end > _node.end) return path
+
+  const isInRange = _node.start <= start && _node.end >= end
+
+  if (
+    (_node.type === 'Identifier' ||
+      _node.type === 'Literal' ||
+      _node.type === 'TagDeclarator') &&
+    isInRange
+  ) {
+    return path
+  }
+
+  if (_node.type === 'CallExpression' && isInRange) {
+    const { callee, arguments: args } = _node
+    if (
+      callee.type === 'Identifier' &&
+      callee.start <= start &&
+      callee.end >= end
+    ) {
+      path.push(['callee', 'CallExpression'])
+      return path
+    }
+    if (args.length > 0) {
+      for (let argIndex = 0; argIndex < args.length; argIndex++) {
+        const arg = args[argIndex]
+        if (arg.start <= start && arg.end >= end) {
+          path.push(['arguments', 'CallExpression'])
+          path.push([argIndex, 'index'])
+          return moreNodePathFromSourceRange(arg, sourceRange, path)
+        }
+      }
+    }
+    return path
+  }
+
+  if (_node.type === 'CallExpressionKw' && isInRange) {
+    const { callee, arguments: args } = _node
+    if (
+      callee.type === 'Identifier' &&
+      callee.start <= start &&
+      callee.end >= end
+    ) {
+      path.push(['callee', 'CallExpressionKw'])
+      return path
+    }
+    if (args.length > 0) {
+      for (let argIndex = 0; argIndex < args.length; argIndex++) {
+        const arg = args[argIndex].arg
+        if (arg.start <= start && arg.end >= end) {
+          path.push(['arguments', 'CallExpressionKw'])
+          path.push([argIndex, 'index'])
+          return moreNodePathFromSourceRange(arg, sourceRange, path)
+        }
+      }
+    }
+    return path
+  }
+
+  if (_node.type === 'BinaryExpression' && isInRange) {
+    const { left, right } = _node
+    if (left.start <= start && left.end >= end) {
+      path.push(['left', 'BinaryExpression'])
+      return moreNodePathFromSourceRange(left, sourceRange, path)
+    }
+    if (right.start <= start && right.end >= end) {
+      path.push(['right', 'BinaryExpression'])
+      return moreNodePathFromSourceRange(right, sourceRange, path)
+    }
+    return path
+  }
+  if (_node.type === 'PipeExpression' && isInRange) {
+    const { body } = _node
+    for (let i = 0; i < body.length; i++) {
+      const pipe = body[i]
+      if (pipe.start <= start && pipe.end >= end) {
+        path.push(['body', 'PipeExpression'])
+        path.push([i, 'index'])
+        return moreNodePathFromSourceRange(pipe, sourceRange, path)
+      }
+    }
+    return path
+  }
+  if (_node.type === 'ArrayExpression' && isInRange) {
+    const { elements } = _node
+    for (let elIndex = 0; elIndex < elements.length; elIndex++) {
+      const element = elements[elIndex]
+      if (element.start <= start && element.end >= end) {
+        path.push(['elements', 'ArrayExpression'])
+        path.push([elIndex, 'index'])
+        return moreNodePathFromSourceRange(element, sourceRange, path)
+      }
+    }
+    return path
+  }
+  if (_node.type === 'ObjectExpression' && isInRange) {
+    const { properties } = _node
+    for (let propIndex = 0; propIndex < properties.length; propIndex++) {
+      const property = properties[propIndex]
+      if (property.start <= start && property.end >= end) {
+        path.push(['properties', 'ObjectExpression'])
+        path.push([propIndex, 'index'])
+        if (property.key.start <= start && property.key.end >= end) {
+          path.push(['key', 'Property'])
+          return moreNodePathFromSourceRange(property.key, sourceRange, path)
+        }
+        if (property.value.start <= start && property.value.end >= end) {
+          path.push(['value', 'Property'])
+          return moreNodePathFromSourceRange(property.value, sourceRange, path)
+        }
+      }
+    }
+    return path
+  }
+  if (_node.type === 'ExpressionStatement' && isInRange) {
+    const { expression } = _node
+    path.push(['expression', 'ExpressionStatement'])
+    return moreNodePathFromSourceRange(expression, sourceRange, path)
+  }
+  if (_node.type === 'VariableDeclaration' && isInRange) {
+    const declaration = _node.declaration
+
+    if (declaration.start <= start && declaration.end >= end) {
+      path.push(['declaration', 'VariableDeclaration'])
+      const init = declaration.init
+      if (init.start <= start && init.end >= end) {
+        path.push(['init', ''])
+        return moreNodePathFromSourceRange(init, sourceRange, path)
+      }
+    }
+  }
+  if (_node.type === 'VariableDeclaration' && isInRange) {
+    const declaration = _node.declaration
+
+    if (declaration.start <= start && declaration.end >= end) {
+      const init = declaration.init
+      if (init.start <= start && init.end >= end) {
+        path.push(['declaration', 'VariableDeclaration'])
+        path.push(['init', ''])
+        return moreNodePathFromSourceRange(init, sourceRange, path)
+      }
+    }
+    return path
+  }
+  if (_node.type === 'UnaryExpression' && isInRange) {
+    const { argument } = _node
+    if (argument.start <= start && argument.end >= end) {
+      path.push(['argument', 'UnaryExpression'])
+      return moreNodePathFromSourceRange(argument, sourceRange, path)
+    }
+    return path
+  }
+  if (_node.type === 'FunctionExpression' && isInRange) {
+    for (let i = 0; i < _node.params.length; i++) {
+      const param = _node.params[i]
+      if (param.identifier.start <= start && param.identifier.end >= end) {
+        path.push(['params', 'FunctionExpression'])
+        path.push([i, 'index'])
+        return moreNodePathFromSourceRange(param.identifier, sourceRange, path)
+      }
+    }
+    if (_node.body.start <= start && _node.body.end >= end) {
+      path.push(['body', 'FunctionExpression'])
+      const fnBody = _node.body.body
+      for (let i = 0; i < fnBody.length; i++) {
+        const statement = fnBody[i]
+        if (statement.start <= start && statement.end >= end) {
+          path.push(['body', 'FunctionExpression'])
+          path.push([i, 'index'])
+          return moreNodePathFromSourceRange(statement, sourceRange, path)
+        }
+      }
+    }
+    return path
+  }
+  if (_node.type === 'ReturnStatement' && isInRange) {
+    const { argument } = _node
+    if (argument.start <= start && argument.end >= end) {
+      path.push(['argument', 'ReturnStatement'])
+      return moreNodePathFromSourceRange(argument, sourceRange, path)
+    }
+    return path
+  }
+  if (_node.type === 'MemberExpression' && isInRange) {
+    const { object, property } = _node
+    if (object.start <= start && object.end >= end) {
+      path.push(['object', 'MemberExpression'])
+      return moreNodePathFromSourceRange(object, sourceRange, path)
+    }
+    if (property.start <= start && property.end >= end) {
+      path.push(['property', 'MemberExpression'])
+      return moreNodePathFromSourceRange(property, sourceRange, path)
+    }
+    return path
+  }
+
+  if (_node.type === 'PipeSubstitution' && isInRange) return path
+
+  if (_node.type === 'IfExpression' && isInRange) {
+    const { cond, then_val, else_ifs, final_else } = _node
+    if (cond.start <= start && cond.end >= end) {
+      path.push(['cond', 'IfExpression'])
+      return moreNodePathFromSourceRange(cond, sourceRange, path)
+    }
+    if (then_val.start <= start && then_val.end >= end) {
+      path.push(['then_val', 'IfExpression'])
+      path.push(['body', 'IfExpression'])
+      return getNodePathFromSourceRange(then_val, sourceRange, path)
+    }
+    for (let i = 0; i < else_ifs.length; i++) {
+      const else_if = else_ifs[i]
+      if (else_if.start <= start && else_if.end >= end) {
+        path.push(['else_ifs', 'IfExpression'])
+        path.push([i, 'index'])
+        const { cond, then_val } = else_if
+        if (cond.start <= start && cond.end >= end) {
+          path.push(['cond', 'IfExpression'])
+          return moreNodePathFromSourceRange(cond, sourceRange, path)
+        }
+        path.push(['then_val', 'IfExpression'])
+        path.push(['body', 'IfExpression'])
+        return getNodePathFromSourceRange(then_val, sourceRange, path)
+      }
+    }
+    if (final_else.start <= start && final_else.end >= end) {
+      path.push(['final_else', 'IfExpression'])
+      path.push(['body', 'IfExpression'])
+      return getNodePathFromSourceRange(final_else, sourceRange, path)
+    }
+    return path
+  }
+
+  if (_node.type === 'ImportStatement' && isInRange) {
+    if (_node.selector && _node.selector.type === 'List') {
+      path.push(['selector', 'ImportStatement'])
+      const { items } = _node.selector
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i]
+        if (item.start <= start && item.end >= end) {
+          path.push(['items', 'ImportSelector'])
+          path.push([i, 'index'])
+          if (item.name.start <= start && item.name.end >= end) {
+            path.push(['name', 'ImportItem'])
+            return path
+          }
+          if (
+            item.alias &&
+            item.alias.start <= start &&
+            item.alias.end >= end
+          ) {
+            path.push(['alias', 'ImportItem'])
+            return path
+          }
+          return path
+        }
+      }
+      return path
+    }
+    return path
+  }
+
+  console.error('not implemented: ' + node.type)
+
+  return path
+}
+
+export function getNodePathFromSourceRange(
+  node: Program,
+  sourceRange: SourceRange,
+  previousPath: PathToNode = [['body', '']]
+): PathToNode {
+  const [start, end] = sourceRange || []
+  let path: PathToNode = [...previousPath]
+  const _node = { ...node }
+
+  // loop over each statement in body getting the index with a for loop
+  for (
+    let statementIndex = 0;
+    statementIndex < _node.body.length;
+    statementIndex++
+  ) {
+    const statement = _node.body[statementIndex]
+    if (statement.start <= start && statement.end >= end) {
+      path.push([statementIndex, 'index'])
+      return moreNodePathFromSourceRange(statement, sourceRange, path)
+    }
+  }
+  return path
+}

src/lang/std/artifactGraph.ts

@@ -16,7 +16,7 @@ import {
   EdgeCut,
 } from 'lang/wasm'
 import { Models } from '@kittycad/lib'
-import { getNodePathFromSourceRange } from 'lang/queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import { err } from 'lib/trap'
 
 export type { Artifact, ArtifactId, SegmentArtifact } from 'lang/wasm'

src/lang/std/sketch.test.ts

@@ -14,7 +14,8 @@ import {
   CallExpression,
   topLevelRange,
 } from '../wasm'
-import { getNodeFromPath, getNodePathFromSourceRange } from '../queryAst'
+import { getNodeFromPath } from '../queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import { enginelessExecutor } from '../../lib/testHelpers'
 import { err } from 'lib/trap'
 import { Node } from 'wasm-lib/kcl/bindings/Node'

src/lang/std/sketch.ts

@@ -17,9 +17,9 @@ import {
 import {
   getNodeFromPath,
   getNodeFromPathCurry,
-  getNodePathFromSourceRange,
   getObjExprProperty,
 } from 'lang/queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import {
   isLiteralArrayOrStatic,
   isNotLiteralArrayOrStatic,

src/lang/std/sketchcombos.ts

@@ -22,11 +22,8 @@ import {
   SourceRange,
   LiteralValue,
 } from '../wasm'
-import {
-  getNodeFromPath,
-  getNodeFromPathCurry,
-  getNodePathFromSourceRange,
-} from '../queryAst'
+import { getNodeFromPath, getNodeFromPathCurry } from '../queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import {
   createArrayExpression,
   createBinaryExpression,

src/lang/wasm.ts

@@ -53,7 +53,7 @@ import { ArtifactId } from 'wasm-lib/kcl/bindings/Artifact'
 import { ArtifactCommand } from 'wasm-lib/kcl/bindings/Artifact'
 import { ArtifactGraph as RustArtifactGraph } from 'wasm-lib/kcl/bindings/Artifact'
 import { Artifact } from './std/artifactGraph'
-import { getNodePathFromSourceRange } from './queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 
 export type { Artifact } from 'wasm-lib/kcl/bindings/Artifact'
 export type { ArtifactCommand } from 'wasm-lib/kcl/bindings/Artifact'

src/lib/base64.test.ts

@@ -0,0 +1,40 @@
+import { expect } from 'vitest'
+import { base64ToString, stringToBase64 } from './base64'
+
+describe('base64 encoding', () => {
+  test('to base64, simple code', async () => {
+    const code = `extrusionDistance = 12`
+    // Generated by online tool
+    const expectedBase64 = `ZXh0cnVzaW9uRGlzdGFuY2UgPSAxMg==`
+
+    const base64 = stringToBase64(code)
+    expect(base64).toBe(expectedBase64)
+  })
+
+  test(`to base64, code with UTF-8 characters`, async () => {
+    // example adapted from MDN docs: https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem
+    const code = `a = 5; Ā = 12.in(); 𐀀 = Ā; 文 = 12.0; 🦄 = -5;`
+    // Generated by online tool
+    const expectedBase64 = `YSA9IDU7IMSAID0gMTIuaW4oKTsg8JCAgCA9IMSAOyDmlocgPSAxMi4wOyDwn6aEID0gLTU7`
+
+    const base64 = stringToBase64(code)
+    expect(base64).toBe(expectedBase64)
+  })
+
+  // The following are simply the reverse of the above tests
+  test('from base64, simple code', async () => {
+    const base64 = `ZXh0cnVzaW9uRGlzdGFuY2UgPSAxMg==`
+    const expectedCode = `extrusionDistance = 12`
+
+    const code = base64ToString(base64)
+    expect(code).toBe(expectedCode)
+  })
+
+  test(`from base64, code with UTF-8 characters`, async () => {
+    const base64 = `YSA9IDU7IMSAID0gMTIuaW4oKTsg8JCAgCA9IMSAOyDmlocgPSAxMi4wOyDwn6aEID0gLTU7`
+    const expectedCode = `a = 5; Ā = 12.in(); 𐀀 = Ā; 文 = 12.0; 🦄 = -5;`
+
+    const code = base64ToString(base64)
+    expect(code).toBe(expectedCode)
+  })
+})

src/lib/base64.ts

@@ -0,0 +1,29 @@
+/**
+ * Converts a string to a base64 string, preserving the UTF-8 encoding
+ */
+export function stringToBase64(str: string) {
+  return bytesToBase64(new TextEncoder().encode(str))
+}
+
+/**
+ * Converts a base64 string to a string, preserving the UTF-8 encoding
+ */
+export function base64ToString(base64: string) {
+  return new TextDecoder().decode(base64ToBytes(base64))
+}
+
+/**
+ * From the MDN Web Docs
+ * https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem
+ */
+function base64ToBytes(base64: string) {
+  const binString = atob(base64)
+  return Uint8Array.from(binString, (m) => m.codePointAt(0)!)
+}
+
+function bytesToBase64(bytes: Uint8Array) {
+  const binString = Array.from(bytes, (byte) =>
+    String.fromCodePoint(byte)
+  ).join('')
+  return btoa(binString)
+}

src/lib/commandBarConfigs/modelingCommandConfig.ts

@@ -13,6 +13,7 @@ import {
   loftValidator,
   revolveAxisValidator,
   shellValidator,
+  sweepValidator,
 } from './validators'
 
 type OutputFormat = Models['OutputFormat_type']
@@ -42,8 +43,8 @@ export type ModelingCommandSchema = {
     distance: KclCommandValue
   }
   Sweep: {
-    path: Selections
-    profile: Selections
+    target: Selections
+    trajectory: Selections
   }
   Loft: {
     selection: Selections
@@ -308,25 +309,24 @@ export const modelingMachineCommandConfig: StateMachineCommandSetConfig<
       'Create a 3D body by moving a sketch region along an arbitrary path.',
     icon: 'sweep',
     status: 'development',
-    needsReview: true,
+    needsReview: false,
     args: {
-      profile: {
+      target: {
         inputType: 'selection',
         selectionTypes: ['solid2d'],
         required: true,
         skip: true,
         multiple: false,
-        // TODO: add dry-run validation
         warningMessage:
           'The sweep workflow is new and under tested. Please break it and report issues.',
       },
-      path: {
+      trajectory: {
         inputType: 'selection',
         selectionTypes: ['segment', 'path'],
         required: true,
-        skip: true,
+        skip: false,
         multiple: false,
-        // TODO: add dry-run validation
+        validation: sweepValidator,
       },
     },
   },

src/lib/commandBarConfigs/projectsCommandConfig.ts

@@ -1,5 +1,8 @@
+import { UnitLength_type } from '@kittycad/lib/dist/types/src/models'
 import { CommandBarOverwriteWarning } from 'components/CommandBarOverwriteWarning'
 import { StateMachineCommandSetConfig } from 'lib/commandTypes'
+import { isDesktop } from 'lib/isDesktop'
+import { baseUnitLabels, baseUnitsUnion } from 'lib/settings/settingsTypes'
 import { projectsMachine } from 'machines/projectsMachine'
 
 export type ProjectsCommandSchema = {
@@ -17,6 +20,13 @@ export type ProjectsCommandSchema = {
     oldName: string
     newName: string
   }
+  'Import file from URL': {
+    name: string
+    code?: string
+    units: UnitLength_type
+    method: 'newProject' | 'existingProject'
+    projectName?: string
+  }
 }
 
 export const projectsCommandBarConfig: StateMachineCommandSetConfig<
@@ -26,6 +36,7 @@ export const projectsCommandBarConfig: StateMachineCommandSetConfig<
   'Open project': {
     icon: 'arrowRight',
     description: 'Open a project',
+    status: isDesktop() ? 'active' : 'inactive',
     args: {
       name: {
         inputType: 'options',
@@ -42,6 +53,7 @@ export const projectsCommandBarConfig: StateMachineCommandSetConfig<
   'Create project': {
     icon: 'folderPlus',
     description: 'Create a project',
+    status: isDesktop() ? 'active' : 'inactive',
     args: {
       name: {
         inputType: 'string',
@@ -53,6 +65,7 @@ export const projectsCommandBarConfig: StateMachineCommandSetConfig<
   'Delete project': {
     icon: 'close',
     description: 'Delete a project',
+    status: isDesktop() ? 'active' : 'inactive',
     needsReview: true,
     reviewMessage: ({ argumentsToSubmit }) =>
       CommandBarOverwriteWarning({
@@ -75,6 +88,7 @@ export const projectsCommandBarConfig: StateMachineCommandSetConfig<
     icon: 'folder',
     description: 'Rename a project',
     needsReview: true,
+    status: isDesktop() ? 'active' : 'inactive',
     args: {
       oldName: {
         inputType: 'options',
@@ -92,4 +106,80 @@ export const projectsCommandBarConfig: StateMachineCommandSetConfig<
       },
     },
   },
+  'Import file from URL': {
+    icon: 'file',
+    description: 'Create a file',
+    needsReview: true,
+    status: 'active',
+    args: {
+      method: {
+        inputType: 'options',
+        required: true,
+        skip: true,
+        options: isDesktop()
+          ? [
+              { name: 'New project', value: 'newProject' },
+              { name: 'Existing project', value: 'existingProject' },
+            ]
+          : [{ name: 'Overwrite', value: 'existingProject' }],
+        valueSummary(value) {
+          return isDesktop()
+            ? value === 'newProject'
+              ? 'New project'
+              : 'Existing project'
+            : 'Overwrite'
+        },
+      },
+      // TODO: We can't get the currently-opened project to auto-populate here because
+      // it's not available on projectMachine, but lower in fileMachine. Unify these.
+      projectName: {
+        inputType: 'options',
+        required: (commandsContext) =>
+          isDesktop() &&
+          commandsContext.argumentsToSubmit.method === 'existingProject',
+        skip: true,
+        options: (_, context) =>
+          context?.projects.map((p) => ({
+            name: p.name!,
+            value: p.name!,
+          })) || [],
+      },
+      name: {
+        inputType: 'string',
+        required: isDesktop(),
+        skip: true,
+      },
+      code: {
+        inputType: 'text',
+        required: true,
+        skip: true,
+        valueSummary(value) {
+          const lineCount = value?.trim().split('\n').length
+          return `${lineCount} line${lineCount === 1 ? '' : 's'}`
+        },
+      },
+      units: {
+        inputType: 'options',
+        required: false,
+        skip: true,
+        options: baseUnitsUnion.map((unit) => ({
+          name: baseUnitLabels[unit],
+          value: unit,
+        })),
+      },
+    },
+    reviewMessage(commandBarContext) {
+      return isDesktop()
+        ? `Will add the contents from URL to a new ${
+            commandBarContext.argumentsToSubmit.method === 'newProject'
+              ? 'project with file main.kcl'
+              : `file within the project "${commandBarContext.argumentsToSubmit.projectName}"`
+          } named "${
+            commandBarContext.argumentsToSubmit.name
+          }", and set default units to "${
+            commandBarContext.argumentsToSubmit.units
+          }".`
+        : `Will overwrite the contents of the current file with the contents from the URL.`
+    },
+  },
 }

src/lib/commandBarConfigs/validators.ts

@@ -207,3 +207,64 @@ export const shellValidator = async ({
 
   return 'Unable to shell with the provided selection'
 }
+
+export const sweepValidator = async ({
+  context,
+  data,
+}: {
+  context: CommandBarContext
+  data: { trajectory: Selections }
+}): Promise<boolean | string> => {
+  if (!isSelections(data.trajectory)) {
+    console.log('Unable to sweep, selections are missing')
+    return 'Unable to sweep, selections are missing'
+  }
+
+  // Retrieve the parent path from the segment selection directly
+  const trajectoryArtifact = data.trajectory.graphSelections[0].artifact
+  if (!trajectoryArtifact) {
+    return "Unable to sweep, couldn't find the trajectory artifact"
+  }
+  if (trajectoryArtifact.type !== 'segment') {
+    return "Unable to sweep, couldn't find the target from a non-segment selection"
+  }
+  const trajectory = trajectoryArtifact.pathId
+
+  // Get the former arg in the command bar flow, and retrieve the path from the solid2d directly
+  const targetArg = context.argumentsToSubmit['target'] as Selections
+  const targetArtifact = targetArg.graphSelections[0].artifact
+  if (!targetArtifact) {
+    return "Unable to sweep, couldn't find the profile artifact"
+  }
+  if (targetArtifact.type !== 'solid2d') {
+    return "Unable to sweep, couldn't find the target from a non-solid2d selection"
+  }
+  const target = targetArtifact.pathId
+
+  const sweepCommand = async () => {
+    // TODO: second look on defaults here
+    const DEFAULT_TOLERANCE: Models['LengthUnit_type'] = 1e-7
+    const DEFAULT_SECTIONAL = false
+    const cmdArgs = {
+      target,
+      trajectory,
+      sectional: DEFAULT_SECTIONAL,
+      tolerance: DEFAULT_TOLERANCE,
+    }
+    return await engineCommandManager.sendSceneCommand({
+      type: 'modeling_cmd_req',
+      cmd_id: uuidv4(),
+      cmd: {
+        type: 'sweep',
+        ...cmdArgs,
+      },
+    })
+  }
+
+  const attemptSweep = await dryRunWrapper(sweepCommand)
+  if (attemptSweep?.success) {
+    return true
+  }
+
+  return 'Unable to sweep with the provided selection'
+}

src/lib/constants.ts

@@ -69,6 +69,7 @@ export const KCL_DEFAULT_DEGREE = `360`
 export const TEST_SETTINGS_FILE_KEY = 'playwright-test-settings'
 
 export const DEFAULT_HOST = 'https://api.zoo.dev'
+export const PROD_APP_URL = 'https://app.zoo.dev'
 export const SETTINGS_FILE_NAME = 'settings.toml'
 export const TOKEN_FILE_NAME = 'token.txt'
 export const PROJECT_SETTINGS_FILE_NAME = 'project.toml'
@@ -110,6 +111,9 @@ export const KCL_SAMPLES_MANIFEST_URLS = {
   localFallback: '/kcl-samples-manifest-fallback.json',
 } as const
 
+/** URL parameter to create a file */
+export const CREATE_FILE_URL_PARAM = 'create-file'
+
 /** Toast id for the app auto-updater toast */
 export const AUTO_UPDATER_TOAST_ID = 'auto-updater-toast'
 
@@ -139,3 +143,12 @@ export const VIEW_NAMES_SEMANTIC = {
 } as const
 /** The modeling sidebar buttons' IDs get a suffix to prevent collisions */
 export const SIDEBAR_BUTTON_SUFFIX = '-pane-button'
+
+/** Custom URL protocol our desktop registers */
+export const ZOO_STUDIO_PROTOCOL = 'zoo-studio:'
+
+/**
+ * A query parameter that triggers a modal
+ * to "open in desktop app" when present in the URL
+ */
+export const ASK_TO_OPEN_QUERY_PARAM = 'ask-open-desktop'

src/lib/kclCommands.ts

@@ -1,12 +1,14 @@
 import { CommandBarOverwriteWarning } from 'components/CommandBarOverwriteWarning'
 import { Command, CommandArgumentOption } from './commandTypes'
-import { kclManager } from './singletons'
+import { codeManager, kclManager } from './singletons'
 import { isDesktop } from './isDesktop'
 import { FILE_EXT, PROJECT_SETTINGS_FILE_NAME } from './constants'
 import { UnitLength_type } from '@kittycad/lib/dist/types/src/models'
 import { parseProjectSettings } from 'lang/wasm'
 import { err, reportRejection } from './trap'
 import { projectConfigurationToSettingsPayload } from './settings/settingsUtils'
+import { copyFileShareLink } from './links'
+import { IndexLoaderData } from './types'
 
 interface OnSubmitProps {
   sampleName: string
@@ -15,10 +17,21 @@ interface OnSubmitProps {
   method: 'overwrite' | 'newFile'
 }
 
-export function kclCommands(
-  onSubmit: (p: OnSubmitProps) => Promise<void>,
-  providedOptions: CommandArgumentOption<string>[]
-): Command[] {
+interface KclCommandConfig {
+  // TODO: find a different approach that doesn't require
+  // special props for a single command
+  specialPropsForSampleCommand: {
+    onSubmit: (p: OnSubmitProps) => Promise<void>
+    providedOptions: CommandArgumentOption<string>[]
+  }
+  projectData: IndexLoaderData
+  authToken: string
+  settings: {
+    defaultUnit: UnitLength_type
+  }
+}
+
+export function kclCommands(commandProps: KclCommandConfig): Command[] {
   return [
     {
       name: 'format-code',
@@ -107,7 +120,9 @@ export function kclCommands(
           )
           .then((props) => {
             if (props?.code) {
-              onSubmit(props).catch(reportError)
+              commandProps.specialPropsForSampleCommand
+                .onSubmit(props)
+                .catch(reportError)
             }
           })
           .catch(reportError)
@@ -149,9 +164,25 @@ export function kclCommands(
             }
             return value
           },
-          options: providedOptions,
+          options: commandProps.specialPropsForSampleCommand.providedOptions,
         },
       },
     },
+    // {
+    //   name: 'share-file-link',
+    //   displayName: 'Share file',
+    //   description: 'Create a link that contains a copy of the current file.',
+    //   groupId: 'code',
+    //   needsReview: false,
+    //   icon: 'link',
+    //   onSubmit: () => {
+    //     copyFileShareLink({
+    //       token: commandProps.authToken,
+    //       code: codeManager.code,
+    //       name: commandProps.projectData.project?.name || '',
+    //       units: commandProps.settings.defaultUnit,
+    //     }).catch(reportRejection)
+    //   },
+    // },
   ]
 }

src/lib/links.test.ts

@@ -0,0 +1,16 @@
+import { createCreateFileUrl } from './links'
+
+describe(`link creation tests`, () => {
+  test(`createCreateFileUrl happy path`, async () => {
+    const code = `extrusionDistance = 12`
+    const name = `test`
+    const units = `mm`
+
+    // Converted with external online tools
+    const expectedEncodedCode = `ZXh0cnVzaW9uRGlzdGFuY2UgPSAxMg%3D%3D`
+    const expectedLink = `http://localhost:3000/?create-file=true&name=test&units=mm&code=${expectedEncodedCode}&ask-open-desktop=true`
+
+    const result = createCreateFileUrl({ code, name, units })
+    expect(result.toString()).toBe(expectedLink)
+  })
+})

src/lib/links.ts

@@ -0,0 +1,100 @@
+import { UnitLength_type } from '@kittycad/lib/dist/types/src/models'
+import {
+  ASK_TO_OPEN_QUERY_PARAM,
+  CREATE_FILE_URL_PARAM,
+  PROD_APP_URL,
+} from './constants'
+import { stringToBase64 } from './base64'
+import { DEV, VITE_KC_API_BASE_URL } from 'env'
+import toast from 'react-hot-toast'
+import { err } from './trap'
+export interface FileLinkParams {
+  code: string
+  name: string
+  units: UnitLength_type
+}
+
+export async function copyFileShareLink(
+  args: FileLinkParams & { token: string }
+) {
+  const token = args.token
+  if (!token) {
+    toast.error('You need to be signed in to share a file.', {
+      duration: 5000,
+    })
+    return
+  }
+  const shareUrl = createCreateFileUrl(args)
+  const shortlink = await createShortlink(token, shareUrl.toString())
+
+  if (err(shortlink)) {
+    toast.error(shortlink.message, {
+      duration: 5000,
+    })
+    return
+  }
+
+  await globalThis.navigator.clipboard.writeText(shortlink.url)
+  toast.success(
+    'Link copied to clipboard. Anyone who clicks this link will get a copy of this file. Share carefully!',
+    {
+      duration: 5000,
+    }
+  )
+}
+
+/**
+ * Creates a URL with the necessary query parameters to trigger
+ * the "Import file from URL" command in the app.
+ *
+ * With the additional step of asking the user if they want to
+ * open the URL in the desktop app.
+ */
+export function createCreateFileUrl({ code, name, units }: FileLinkParams) {
+  // Use the dev server if we are in development mode
+  let origin = DEV ? 'http://localhost:3000' : PROD_APP_URL
+  const searchParams = new URLSearchParams({
+    [CREATE_FILE_URL_PARAM]: String(true),
+    name,
+    units,
+    code: stringToBase64(code),
+    [ASK_TO_OPEN_QUERY_PARAM]: String(true),
+  })
+  const createFileUrl = new URL(`?${searchParams.toString()}`, origin)
+
+  return createFileUrl
+}
+
+/**
+ * Given a file's code, name, and units, creates shareable link to the
+ * web app with a query parameter that triggers a modal to "open in desktop app".
+ * That modal is defined in the `OpenInDesktopAppHandler` component.
+ * TODO: update the return type to use TS library after its updated
+ */
+export async function createShortlink(
+  token: string,
+  url: string
+): Promise<Error | { key: string; url: string }> {
+  /**
+   * We don't use our `withBaseURL` function here because
+   * there is no URL shortener service in the dev API.
+   */
+  const response = await fetch(`${VITE_KC_API_BASE_URL}/user/shortlinks`, {
+    method: 'POST',
+    headers: {
+      'Content-type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify({
+      url,
+      // In future we can support org-scoped and password-protected shortlinks here
+      // https://zoo.dev/docs/api/shortlinks/create-a-shortlink-for-a-user?lang=typescript
+    }),
+  })
+  if (!response.ok) {
+    const error = await response.json()
+    return new Error(`Failed to create shortlink: ${error.message}`)
+  } else {
+    return response.json()
+  }
+}

src/lib/routeLoaders.ts

@@ -114,7 +114,7 @@ export const fileLoader: LoaderFunction = async (
         return redirect(
           `${PATHS.FILE}/${encodeURIComponent(
             isDesktop() ? fallbackFile : params.id + '/' + PROJECT_ENTRYPOINT
-          )}`
+          )}${new URL(routerData.request.url).search || ''}`
         )
       }
 
@@ -188,11 +188,14 @@ export const fileLoader: LoaderFunction = async (
 
 // Loads the settings and by extension the projects in the default directory
 // and returns them to the Home route, along with any errors that occurred
-export const homeLoader: LoaderFunction = async (): Promise<
-  HomeLoaderData | Response
-> => {
+export const homeLoader: LoaderFunction = async ({
+  request,
+}): Promise<HomeLoaderData | Response> => {
+  const url = new URL(request.url)
   if (!isDesktop()) {
-    return redirect(PATHS.FILE + '/%2F' + BROWSER_PROJECT_NAME)
+    return redirect(
+      PATHS.FILE + '/%2F' + BROWSER_PROJECT_NAME + (url.search || '')
+    )
   }
   return {}
 }

src/lib/selections.ts

@@ -18,11 +18,8 @@ import { EditorSelection, SelectionRange } from '@codemirror/state'
 import { getNormalisedCoordinates, isOverlap } from 'lib/utils'
 import { isCursorInSketchCommandRange } from 'lang/util'
 import { Program } from 'lang/wasm'
-import {
-  getNodeFromPath,
-  getNodePathFromSourceRange,
-  isSingleCursorInPipe,
-} from 'lang/queryAst'
+import { getNodeFromPath, isSingleCursorInPipe } from 'lang/queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import { CommandArgument } from './commandTypes'
 import {
   DefaultPlaneStr,

src/lib/textToCad.ts

@@ -68,10 +68,6 @@ interface TextToKclProps {
     data?: unknown
   ) => unknown
   navigate: NavigateFunction
-  commandBarSend: (
-    type: EventFrom<typeof commandBarMachine>,
-    data?: unknown
-  ) => unknown
   context: ContextFrom<typeof fileMachine>
   token?: string
   settings: {
@@ -84,7 +80,6 @@ export async function submitAndAwaitTextToKcl({
   trimmedPrompt,
   fileMachineSend,
   navigate,
-  commandBarSend,
   context,
   token,
   settings,
@@ -96,7 +91,6 @@ export async function submitAndAwaitTextToKcl({
         ToastTextToCadError({
           toastId,
           message,
-          commandBarSend,
           prompt: trimmedPrompt,
         }),
       {

src/lib/toolbar.ts

@@ -1,6 +1,6 @@
 import { CustomIconName } from 'components/CustomIcon'
 import { DEV } from 'env'
-import { commandBarMachine } from 'machines/commandBarMachine'
+import { commandBarActor, commandBarMachine } from 'machines/commandBarMachine'
 import {
   canRectangleOrCircleTool,
   isClosedSketch,
@@ -21,7 +21,6 @@ type ToolbarMode = {
 export interface ToolbarItemCallbackProps {
   modelingState: StateFrom<typeof modelingMachine>
   modelingSend: (event: EventFrom<typeof modelingMachine>) => void
-  commandBarSend: (event: EventFrom<typeof commandBarMachine>) => void
   sketchPathId: string | false
 }
 
@@ -84,8 +83,8 @@ export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
       'break',
       {
         id: 'extrude',
-        onClick: ({ commandBarSend }) =>
-          commandBarSend({
+        onClick: () =>
+          commandBarActor.send({
             type: 'Find and select command',
             data: { name: 'Extrude', groupId: 'modeling' },
           }),
@@ -98,8 +97,8 @@ export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
       },
       {
         id: 'revolve',
-        onClick: ({ commandBarSend }) =>
-          commandBarSend({
+        onClick: () =>
+          commandBarActor.send({
             type: 'Find and select command',
             data: { name: 'Revolve', groupId: 'modeling' },
           }),
@@ -119,8 +118,8 @@ export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
       },
       {
         id: 'sweep',
-        onClick: ({ commandBarSend }) =>
-          commandBarSend({
+        onClick: () =>
+          commandBarActor.send({
             type: 'Find and select command',
             data: { name: 'Sweep', groupId: 'modeling' },
           }),
@@ -139,8 +138,8 @@ export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
       },
       {
         id: 'loft',
-        onClick: ({ commandBarSend }) =>
-          commandBarSend({
+        onClick: () =>
+          commandBarActor.send({
             type: 'Find and select command',
             data: { name: 'Loft', groupId: 'modeling' },
           }),
@@ -160,8 +159,8 @@ export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
       'break',
       {
         id: 'fillet3d',
-        onClick: ({ commandBarSend }) =>
-          commandBarSend({
+        onClick: () =>
+          commandBarActor.send({
             type: 'Find and select command',
             data: { name: 'Fillet', groupId: 'modeling' },
           }),
@@ -174,8 +173,8 @@ export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
       },
       {
         id: 'chamfer3d',
-        onClick: ({ commandBarSend }) =>
-          commandBarSend({
+        onClick: () =>
+          commandBarActor.send({
             type: 'Find and select command',
             data: { name: 'Chamfer', groupId: 'modeling' },
           }),
@@ -188,8 +187,8 @@ export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
       },
       {
         id: 'shell',
-        onClick: ({ commandBarSend }) => {
-          commandBarSend({
+        onClick: () => {
+          commandBarActor.send({
             type: 'Find and select command',
             data: { name: 'Shell', groupId: 'modeling' },
           })
@@ -269,8 +268,8 @@ export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
       [
         {
           id: 'plane-offset',
-          onClick: ({ commandBarSend }) => {
-            commandBarSend({
+          onClick: () => {
+            commandBarActor.send({
               type: 'Find and select command',
               data: { name: 'Offset plane', groupId: 'modeling' },
             })
@@ -301,8 +300,8 @@ export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
       [
         {
           id: 'text-to-cad',
-          onClick: ({ commandBarSend }) =>
-            commandBarSend({
+          onClick: () =>
+            commandBarActor.send({
               type: 'Find and select command',
               data: { name: 'Text-to-CAD', groupId: 'modeling' },
             }),
@@ -319,8 +318,8 @@ export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
         },
         {
           id: 'prompt-to-edit',
-          onClick: ({ commandBarSend }) =>
-            commandBarSend({
+          onClick: () =>
+            commandBarActor.send({
               type: 'Find and select command',
               data: { name: 'Prompt-to-edit', groupId: 'modeling' },
             }),
@@ -593,8 +592,8 @@ export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
         {
           id: 'constraint-length',
           disabled: (state) => !state.matches({ Sketch: 'SketchIdle' }),
-          onClick: ({ commandBarSend }) =>
-            commandBarSend({
+          onClick: () =>
+            commandBarActor.send({
               type: 'Find and select command',
               data: {
                 name: 'Constrain length',

src/machines/commandBarMachine.ts

@@ -1,4 +1,4 @@
-import { assign, fromPromise, setup } from 'xstate'
+import { assign, createActor, fromPromise, setup, SnapshotFrom } from 'xstate'
 import {
   Command,
   CommandArgument,
@@ -9,6 +9,7 @@ import { Selections__old } from 'lib/selections'
 import { getCommandArgumentKclValuesOnly } from 'lib/commandUtils'
 import { MachineManager } from 'components/MachineManagerProvider'
 import toast from 'react-hot-toast'
+import { useSelector } from '@xstate/react'
 
 export type CommandBarContext = {
   commands: Command[]
@@ -247,8 +248,17 @@ export const commandBarMachine = setup({
   guards: {
     'Command needs review': ({ context }) =>
       context.selectedCommand?.needsReview || false,
-    'Command has no arguments': () => false,
-    'All arguments are skippable': () => false,
+    'Command has no arguments': ({ context }) => {
+      return (
+        !context.selectedCommand?.args ||
+        Object.keys(context.selectedCommand?.args).length === 0
+      )
+    },
+    'All arguments are skippable': ({ context }) => {
+      return Object.values(context.selectedCommand!.args!).every(
+        (argConfig) => argConfig.skip
+      )
+    },
     'Has selected command': ({ context }) => !!context.selectedCommand,
   },
   actors: {
@@ -620,3 +630,12 @@ function sortCommands(a: Command, b: Command) {
   if (a.groupId === 'settings' && !(b.groupId === 'settings')) return 1
   return a.name.localeCompare(b.name)
 }
+
+export const commandBarActor = createActor(commandBarMachine).start()
+
+/** Basic state snapshot selector */
+const cmdBarStateSelector = (state: SnapshotFrom<typeof commandBarActor>) =>
+  state
+export const useCommandBarState = () => {
+  return useSelector(commandBarActor, cmdBarStateSelector)
+}

src/machines/modelingMachine.ts

@@ -16,10 +16,8 @@ import {
 } from 'lib/selections'
 import { assign, fromPromise, fromCallback, setup } from 'xstate'
 import { SidebarType } from 'components/ModelingSidebar/ModelingPanes'
-import {
-  isNodeSafeToReplacePath,
-  getNodePathFromSourceRange,
-} from 'lang/queryAst'
+import { isNodeSafeToReplacePath } from 'lang/queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import {
   kclManager,
   sceneInfra,
@@ -1561,40 +1559,40 @@ export const modelingMachine = setup({
         if (!input) return new Error('No input provided')
         // Extract inputs
         const ast = kclManager.ast
-        const { profile, path } = input
+        const { target, trajectory } = input
 
         // Find the profile declaration
-        const profileNodePath = getNodePathFromSourceRange(
+        const targetNodePath = getNodePathFromSourceRange(
           ast,
-          profile.graphSelections[0].codeRef.range
+          target.graphSelections[0].codeRef.range
         )
-        const profileNode = getNodeFromPath<VariableDeclarator>(
+        const targetNode = getNodeFromPath<VariableDeclarator>(
           ast,
-          profileNodePath,
+          targetNodePath,
           'VariableDeclarator'
         )
-        if (err(profileNode)) {
+        if (err(targetNode)) {
           return new Error("Couldn't parse profile selection")
         }
-        const profileDeclarator = profileNode.node
+        const targetDeclarator = targetNode.node
 
         // Find the path declaration
-        const pathNodePath = getNodePathFromSourceRange(
+        const trajectoryNodePath = getNodePathFromSourceRange(
           ast,
-          path.graphSelections[0].codeRef.range
+          trajectory.graphSelections[0].codeRef.range
         )
-        const pathNode = getNodeFromPath<VariableDeclarator>(
+        const trajectoryNode = getNodeFromPath<VariableDeclarator>(
           ast,
-          pathNodePath,
+          trajectoryNodePath,
           'VariableDeclarator'
         )
-        if (err(pathNode)) {
+        if (err(trajectoryNode)) {
           return new Error("Couldn't parse path selection")
         }
-        const pathDeclarator = pathNode.node
+        const trajectoryDeclarator = trajectoryNode.node
 
         // Perform the sweep
-        const sweepRes = addSweep(ast, profileDeclarator, pathDeclarator)
+        const sweepRes = addSweep(ast, targetDeclarator, trajectoryDeclarator)
         const updateAstResult = await kclManager.updateAst(
           sweepRes.modifiedAst,
           true,

src/machines/projectsMachine.ts

@@ -25,6 +25,10 @@ export const projectsMachine = setup({
           type: 'Delete project'
           data: ProjectsCommandSchema['Delete project']
         }
+      | {
+          type: 'Import file from URL'
+          data: ProjectsCommandSchema['Import file from URL']
+        }
       | { type: 'navigate'; data: { name: string } }
       | {
           type: 'xstate.done.actor.read-projects'
@@ -42,6 +46,10 @@ export const projectsMachine = setup({
           type: 'xstate.done.actor.rename-project'
           output: { message: string; oldName: string; newName: string }
         }
+      | {
+          type: 'xstate.done.actor.create-file'
+          output: { message: string; projectName: string; fileName: string }
+        }
       | { type: 'assign'; data: { [key: string]: any } },
     input: {} as {
       projects: Project[]
@@ -60,6 +68,7 @@ export const projectsMachine = setup({
     toastError: () => {},
     navigateToProject: () => {},
     navigateToProjectIfNeeded: () => {},
+    navigateToFile: () => {},
   },
   actors: {
     readProjects: fromPromise(() => Promise.resolve([] as Project[])),
@@ -90,12 +99,22 @@ export const projectsMachine = setup({
           name: '',
         })
     ),
+    createFile: fromPromise(
+      (_: {
+        input: ProjectsCommandSchema['Import file from URL'] & {
+          projects: Project[]
+        }
+      }) => Promise.resolve({ message: '', projectName: '', fileName: '' })
+    ),
   },
   guards: {
-    'Has at least 1 project': () => false,
+    'Has at least 1 project': ({ event }) => {
+      if (event.type !== 'xstate.done.actor.read-projects') return false
+      return event.output.length ? event.output.length >= 1 : false
+    },
   },
 }).createMachine({
-  /** @xstate-layout N4IgpgJg5mDOIC5QAkD2BbMACdBDAxgBYCWAdmAMS6yzFSkDaADALqKgAOqtALsaqXYgAHogAsAJgA0IAJ6IAjBIkA2AHQAOCUw0qNkjQE4xYjQF8zMtJhwES5NcmpZSqLBwBOqAFZh8PWAoAJTBcCHcvX39YZjYkEC5efkF40QQFFQBmAHY1Qwz9QwBWU0NMrRl5BGyxBTUVJlVM01rtBXNLEGtsPCIyMEdnVwifPwCKAGEPUJ5sT1H-WKFE4j4BITSMzMzNIsyJDSZMhSYmFWzKxAkTNSYxIuU9zOKT7IsrDB67fsHYEajxiEwv8xjFWMtuKtkhsrpJboZsioincFMdTIjLggVGJ1GImMVMg0JISjEV3l1PrY+g4nH95gDAiFSLgbPSxkt4is1ilQGlrhJ4YjkbU0RoMXJEIYkWoikV8hJinjdOdyd0qfYBrSQdFJtNcLNtTwOZxIdyYQh+YKkSjReKqqYBQoEQpsgiSi9MqrKb0Nb9DYEACJgAA2YANbMW4M5puhqVhAvxQptCnRKkxCleuw0Gm2+2aRVRXpsPp+Woj4wA8hwwKRDcaEjH1nGLXDE9aRSmxWmJVipWocmdsbL8kxC501SWHFMZmQoIaKBABAMyAA3VAAawG+D1swAtOX61zY7zENlEWoMkoatcdPoipjCWIZRIirozsPiYYi19qQNp-rZ3nMAPC8Dw1A4YN9QAM1QDx0DUbcZjAfdInZKMTSSJsT2qc9Lwka8lTvTFTB2WUMiyQwc3yPRv3VH4mRZQDywXJc1FXDcBmmZlMBQhYjXQhtMJ5ERT1wlQr0kQj7kxKiZTxM5s2zbQEVoycBgY9AmNQ-wKGA0DwMgngYLgtQuJZZCDwEo8sJEnD1Dwgjb2kntig0GUkWVfZDEMfFVO+Bwg1DPhSDnZjFwcdjNzUCAQzDCztP4uIMKhGy0jPezxPwySnPvHsTjlPIhyOHRsnwlM-N-NRArDLS+N0kDYIM6DYPgmKgvivjD0bYS+VbBF21RTs7UUUcimfRpXyYRF8LFCrfSBCBaoZFiItINcor1CBeIZLqhPNdKL0yxzs2cqoNDqdpSo0EoSoLOb6NCRaQv9FblzWjjTMe7bQQYBQksElKesUMRjFubRMllCHsm2a5MVldRDBfFpmj0IpxPuhwFqW0F6v0iDmpMzbvuiXbAfNFNQcaI5IaKaH9jETFsUMNRVDxOU5TxBULE6VwYvgeIJ38sAIT25td27KpdzG7yZeho5slHVmMc1IY3HLfnkrNZt2hOW5smRCQM2uhQHkZ6VtkRBFnmu0qFGVv11ZFsnm0kdN8QFJVjlUPZ9co+3-2C0KEqdrXsJMJ8ryc86iUyYiCvxFNzldb3jHtjTsf8EPj1ssQchZlR8jR5EmDRrIGZcuF7maF1aZtslx29IWqtiwPDSz1LxDxepnlOfYDghp03eyOpngzXuYdHNPHozgJ26B9IXR2cTvP0BVkSRXKqgLtyq8OfQcXOwlubMIA */
+  /** @xstate-layout N4IgpgJg5mDOIC5QAkD2BbMACdBDAxgBYCWAdmAMS6yzFSkDaADALqKgAOqtALsaqXYgAHogAsAJgA0IAJ6IAjAHYAbADoArBJVMFTCQA4mTAMwmxAXwsy0mHARLkKASXRcATjywAzYgBtsb3cMLABVACUAGWY2JBAuXn5BONEESRl5BAUFFQM1HQUxJSYATmyFAyUTKxsMbDwiMjA1ZGosUlQsDmCAKzB8HlgKcLBcCC7e-sGYoQTiPgEhVIUy9SKSiQ0NEwkclRyMxGKJNRKlMRVDU23zpRqQW3qHJpa2jonUPoGhgGF3UZ42G6nymMzicwWyVAyzKJzECg0OiYGjERhK+kOWUMSlOGiUlTEJlMxRKBnuj3sjXIr1gHy+g2Go3GwPpsDBnG48ySS0QGj0+Q0JTOGkqBg2JhKmNRJy2OyUEn0Kml5LqlMczVatJZUyGI1IuDs2oG7PinMhPIQfKYAqFShF+PFkrkRwkYjU8OUShKKhMKg0pUs1geqoa6ppdJ1FD+AKBk2NrFmZu5KV5-L9tvtYokEsxelRagUCoMiMumyUdpVdlDL01Ee+FAAImAAoC6zwTRDk9DU9b08LRY7MWd1AZcoS-aoLiYFJWnlSNW0jQyAPIcMCkNsdpOLFOWtOC-sO7NOzLbGWFbY6acmFESWdql7R3B8UhQNsUCACZpkABuqAA1s0+D-M+YAALRLluiQ7t2WRMGIbryjeBgGBIEglNsCi5sY6hMOchQqEoCLFCh97VtST4vm+S4UGA7jBO4agcH4z7eKg7joGowExhBcbtgm4LblCIiKPBiHZiKqHoZhuaFhoBbGMYBhiPBCgStUQYUuRzR6gaZDUXxH5fmov4Ac0-z6pgvEgvGsQctBwnLGJahIZJaEYdOmKEfJuQSoRRKSRcZHPNSunoPp750QxTEsTwbEcWoFkGuBkECfZXIwSJcEIS5Ekoe5MnOggXqIaUqFiiUhIInemkhiFzRNi2EU0Z+1KmYBagQM2YCAtZ9JQRljmiTlrn5dJnlFShOLwcpZjKBs+KBrUVb1WojU9c1hlRexMWsexnFdS2KV8QN5q7laNqHlmOaTcpmjoWc8L6HoYrBfOagjGMm02QyrXfqQf4dSBEB9Tqp1dllebichUkeVhRXTiU+QecUKhCps4pvWGn0QN9rJGW1ANmYlTKg98DAKHZpoORanoyqh8oImU3pKJifJ5Ohdr7CYqjIvKWMvDjeORttjHMXtCXA2T0xpdTg20+W9MSIzgorIRXlpr6ORbPs+jwQLFEgVRPj+JQf0mUTHXcaBYG+AE4OZcsxbuts5hbCK+zFmImJgSc5zPV6BQVD6RQG80lERXblCi7tcX7VxRvgVHDtDQgaE4vK2gXKiTA6ItubmJo8IoqOylERUVhBh0XXwHEWn1YmNO7mBKg+2KpzK2IpIBUwBhqUtwYre9tbvEutfpWdsFFnkPpVJnQqz15Ozur36FoypREbGH4Zj438u7tO1qIu5qK5PBGyYjebpEkS44e9oVTbxHr5tnvk9ZeXajTuW+zaHNuzYRUmoeCEp-RKlUHJbeYVhYDDfhDVIxR5IGGnISQk6E+6EkxMUBQX9c66EMMg3Q5Zt7rWNkuOBjsjilDUAqQsZQzzgOkJNUk7o7SmF-tiXOUCmQwMGBQ1OF4TgVGzFUG8yIxQGDZiYPI4oqh+mPsrDSy05xhmfm+KO-CLT+iRucEUuwFQqWzMWXM2YTAuTtL6ZBylkRcMrkAA */
   id: 'Home machine',
 
   initial: 'Reading projects',
@@ -111,6 +130,8 @@ export const projectsMachine = setup({
       })),
       target: '.Reading projects',
     },
+
+    'Import file from URL': '.Creating file',
   },
   states: {
     'Has no projects': {
@@ -155,7 +176,10 @@ export const projectsMachine = setup({
         id: 'create-project',
         src: 'createProject',
         input: ({ event, context }) => {
-          if (event.type !== 'Create project') {
+          if (
+            event.type !== 'Create project' &&
+            event.type !== 'Import file from URL'
+          ) {
             return {
               name: '',
               projects: context.projects,
@@ -272,5 +296,39 @@ export const projectsMachine = setup({
         ],
       },
     },
+
+    'Creating file': {
+      invoke: {
+        id: 'create-file',
+        src: 'createFile',
+        input: ({ event, context }) => {
+          if (event.type !== 'Import file from URL') {
+            return {
+              code: '',
+              name: '',
+              units: 'mm',
+              method: 'existingProject',
+              projects: context.projects,
+            }
+          }
+          return {
+            code: event.data.code || '',
+            name: event.data.name,
+            units: event.data.units,
+            method: event.data.method,
+            projectName: event.data.projectName,
+            projects: context.projects,
+          }
+        },
+        onDone: {
+          target: 'Reading projects',
+          actions: ['navigateToFile', 'toastSuccess'],
+        },
+        onError: {
+          target: 'Reading projects',
+          actions: 'toastError',
+        },
+      },
+    },
   },
 })

src/main.ts

@@ -21,6 +21,7 @@ import minimist from 'minimist'
 import getCurrentProjectFile from 'lib/getCurrentProjectFile'
 import os from 'node:os'
 import { reportRejection } from 'lib/trap'
+import { ZOO_STUDIO_PROTOCOL } from 'lib/constants'
 import argvFromYargs from './commandLineArgs'
 
 import * as packageJSON from '../package.json'
@@ -48,9 +49,7 @@ process.env.VITE_KC_SITE_BASE_URL ??= 'https://zoo.dev'
 process.env.VITE_KC_SKIP_AUTH ??= 'false'
 process.env.VITE_KC_CONNECTION_TIMEOUT_MS ??= '15000'
 
-const ZOO_STUDIO_PROTOCOL = 'zoo-studio'
-
-/// Register our application to handle all "electron-fiddle://" protocols.
+/// Register our application to handle all "zoo-studio:" protocols.
 if (process.defaultApp) {
   if (process.argv.length >= 2) {
     app.setAsDefaultProtocolClient(ZOO_STUDIO_PROTOCOL, process.execPath, [
@@ -65,7 +64,7 @@ if (process.defaultApp) {
 // Must be done before ready event.
 registerStartupListeners()
 
-const createWindow = (filePath?: string, reuse?: boolean): BrowserWindow => {
+const createWindow = (pathToOpen?: string, reuse?: boolean): BrowserWindow => {
   let newWindow
 
   if (reuse) {
@@ -90,32 +89,54 @@ const createWindow = (filePath?: string, reuse?: boolean): BrowserWindow => {
     })
   }
 
+  const pathIsCustomProtocolLink =
+    pathToOpen?.startsWith(ZOO_STUDIO_PROTOCOL) ?? false
+
   // and load the index.html of the app.
   if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
-    newWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL).catch(reportRejection)
+    const filteredPath = pathToOpen
+      ? decodeURI(pathToOpen.replace(ZOO_STUDIO_PROTOCOL, ''))
+      : ''
+    const fullHashBasedUrl = `${MAIN_WINDOW_VITE_DEV_SERVER_URL}/#/${filteredPath}`
+    newWindow.loadURL(fullHashBasedUrl).catch(reportRejection)
   } else {
-    getProjectPathAtStartup(filePath)
-      .then(async (projectPath) => {
-        const startIndex = path.join(
-          __dirname,
-          `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`
-        )
-
-        if (projectPath === null) {
-          await newWindow.loadFile(startIndex)
-          return
-        }
-
-        console.log('Loading file', projectPath)
-
-        const fullUrl = `/file/${encodeURIComponent(projectPath)}`
-        console.log('Full URL', fullUrl)
-
-        await newWindow.loadFile(startIndex, {
-          hash: fullUrl,
+    if (pathIsCustomProtocolLink && pathToOpen) {
+      // We're trying to open a custom protocol link
+      const filteredPath = pathToOpen
+        ? decodeURI(pathToOpen.replace(ZOO_STUDIO_PROTOCOL, ''))
+        : ''
+      const startIndex = path.join(
+        __dirname,
+        `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`
+      )
+      newWindow
+        .loadFile(startIndex, {
+          hash: filteredPath,
         })
-      })
-      .catch(reportRejection)
+        .catch(reportRejection)
+    } else {
+      // otherwise we're trying to open a local file from the command line
+      getProjectPathAtStartup(pathToOpen)
+        .then(async (projectPath) => {
+          const startIndex = path.join(
+            __dirname,
+            `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`
+          )
+
+          if (projectPath === null) {
+            await newWindow.loadFile(startIndex)
+            return
+          }
+
+          const fullUrl = `/file/${encodeURIComponent(projectPath)}`
+          console.log('Full URL', fullUrl)
+
+          await newWindow.loadFile(startIndex, {
+            hash: fullUrl,
+          })
+        })
+        .catch(reportRejection)
+    }
   }
 
   // Open the DevTools.

src/routes/Home.tsx

@@ -24,16 +24,28 @@ import { markOnce } from 'lib/performance'
 import { useFileSystemWatcher } from 'hooks/useFileSystemWatcher'
 import { useProjectsLoader } from 'hooks/useProjectsLoader'
 import { useProjectsContext } from 'hooks/useProjectsContext'
-import { useCommandsContext } from 'hooks/useCommandsContext'
+import { commandBarActor } from 'machines/commandBarMachine'
+import { useCreateFileLinkQuery } from 'hooks/useCreateFileLinkQueryWatcher'
 
 // This route only opens in the desktop context for now,
 // as defined in Router.tsx, so we can use the desktop APIs and types.
 const Home = () => {
   const { state, send } = useProjectsContext()
-  const { commandBarSend } = useCommandsContext()
   const [projectsLoaderTrigger, setProjectsLoaderTrigger] = useState(0)
   const { projectsDir } = useProjectsLoader([projectsLoaderTrigger])
 
+  // Keep a lookout for a URL query string that invokes the 'import file from URL' command
+  useCreateFileLinkQuery((argDefaultValues) => {
+    commandBarActor.send({
+      type: 'Find and select command',
+      data: {
+        groupId: 'projects',
+        name: 'Import file from URL',
+        argDefaultValues,
+      },
+    })
+  })
+
   useRefreshSettings(PATHS.HOME + 'SETTINGS')
   const navigate = useNavigate()
   const {
@@ -128,7 +140,7 @@ const Home = () => {
               <ActionButton
                 Element="button"
                 onClick={() =>
-                  commandBarSend({
+                  commandBarActor.send({
                     type: 'Find and select command',
                     data: {
                       groupId: 'projects',

src/wasm-lib/Cargo.lock

@@ -443,9 +443,9 @@ dependencies = [
 
 [[package]]
 name = "clap"
-version = "4.5.23"
+version = "4.5.27"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3135e7ec2ef7b10c6ed8950f0f792ed96ee093fa088608f1c76e569722700c84"
+checksum = "769b0145982b4b48713e01ec42d61614425f27b7058bda7180a3a41f30104796"
 dependencies = [
  "clap_builder",
  "clap_derive",
@@ -453,9 +453,9 @@ dependencies = [
 
 [[package]]
 name = "clap_builder"
-version = "4.5.23"
+version = "4.5.27"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "30582fc632330df2bd26877bde0c1f4470d57c582bbc070376afcd04d8cb4838"
+checksum = "1b26884eb4b57140e4d2d93652abfa49498b938b3c9179f9fc487b0acc3edad7"
 dependencies = [
  "anstream",
  "anstyle",
@@ -467,9 +467,9 @@ dependencies = [
 
 [[package]]
 name = "clap_derive"
-version = "4.5.18"
+version = "4.5.24"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4ac6a0c7b1a9e9a5186361f67dfa1b88213572f427fb9ab038efb2bd8c582dab"
+checksum = "54b755194d6389280185988721fffba69495eed5ee9feeee9a599b53db80318c"
 dependencies = [
  "heck 0.5.0",
  "proc-macro2",
@@ -708,9 +708,9 @@ dependencies = [
 
 [[package]]
 name = "data-encoding"
-version = "2.6.0"
+version = "2.7.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e8566979429cf69b49a5c740c60791108e86440e8be149bbea4fe54d2c32d6e2"
+checksum = "0e60eed09d8c01d3cee5b7d30acb059b76614c918fa0f992e0dd6eeb10daad6f"
 
 [[package]]
 name = "deranged"
@@ -1844,9 +1844,9 @@ dependencies = [
 
 [[package]]
 name = "kittycad-modeling-cmds"
-version = "0.2.89"
+version = "0.2.92"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ce9e58b34645facea36bc9f4868877bbe6fcac01b92896825e8d4f2f7c71dbd6"
+checksum = "c5fc91d0cdacd1c2ba906f564e58ce07c70a5c471f19b0f4c0b67e754077bfdc"
 dependencies = [
  "anyhow",
  "chrono",
@@ -3266,9 +3266,9 @@ dependencies = [
 
 [[package]]
 name = "serde_json"
-version = "1.0.135"
+version = "1.0.137"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2b0d7ba2887406110130a978386c4e1befb98c674b4fba677954e4db976630d9"
+checksum = "930cfb6e6abf99298aaad7d29abbef7a9999a9a8806a40088f55f0dcec03146b"
 dependencies = [
  "indexmap 2.7.0",
  "itoa",
@@ -4184,9 +4184,9 @@ checksum = "06abde3611657adf66d383f00b093d7faecc7fa57071cce2578660c9f1010821"
 
 [[package]]
 name = "uuid"
-version = "1.11.1"
+version = "1.12.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b913a3b5fe84142e269d63cc62b64319ccaf89b748fc31fe025177f767a756c4"
+checksum = "b3758f5e68192bb96cc8f9b7e2c2cfdabb435499a28499a42f8f984092adad4b"
 dependencies = [
  "getrandom",
  "serde",

src/wasm-lib/Cargo.toml

@@ -76,7 +76,7 @@ members = [
 [workspace.dependencies]
 http = "1"
 kittycad = { version = "0.3.28", default-features = false, features = ["js", "requests"] }
-kittycad-modeling-cmds = { version = "0.2.89", features = [
+kittycad-modeling-cmds = { version = "0.2.92", features = [
   "ts-rs",
   "websocket",
 ] }

src/wasm-lib/kcl/Cargo.toml

@@ -16,7 +16,7 @@ async-recursion = "1.1.1"
 async-trait = "0.1.85"
 base64 = "0.22.1"
 chrono = "0.4.38"
-clap = { version = "4.5.23", default-features = false, optional = true, features = [
+clap = { version = "4.5.27", default-features = false, optional = true, features = [
     "std",
     "derive",
 ] }

src/wasm-lib/kcl/src/lib.rs

@@ -75,7 +75,7 @@ pub mod std;
 pub mod test_server;
 mod thread;
 mod unparser;
-mod walk;
+pub mod walk;
 #[cfg(target_arch = "wasm32")]
 mod wasm;
 

src/wasm-lib/kcl/src/std/helix.rs

@@ -140,7 +140,7 @@ async fn inner_helix(data: HelixData, exec_state: &mut ExecState, args: Args) ->
             args.batch_modeling_cmd(
                 id,
                 ModelingCmd::from(mcmd::EntityMakeHelixFromParams {
-                    radius: data.radius,
+                    radius: LengthUnit(data.radius),
                     is_clockwise: !data.ccw,
                     length: LengthUnit(length),
                     revolutions: data.revolutions,
@@ -157,7 +157,7 @@ async fn inner_helix(data: HelixData, exec_state: &mut ExecState, args: Args) ->
             args.batch_modeling_cmd(
                 id,
                 ModelingCmd::from(mcmd::EntityMakeHelixFromEdge {
-                    radius: data.radius,
+                    radius: LengthUnit(data.radius),
                     is_clockwise: !data.ccw,
                     length: data.length.map(LengthUnit),
                     revolutions: data.revolutions,

src/wasm-lib/kcl/src/walk/ast_node.rs

@@ -76,6 +76,48 @@ impl Node<'_> {
             Node::LabelledExpression(n) => n.digest,
         }
     }
+
+    /// Check to see if this [Node] points to the same underlying specific
+    /// borrowed object as another [Node]. This is not the same as `Eq` or
+    /// even `PartialEq` -- anything that is `true` here is absolutely `Eq`,
+    /// but it's possible this node is `Eq` to another with this being `false`.
+    ///
+    /// This merely indicates that this [Node] specifically is the exact same
+    /// borrowed object as [Node].
+    pub fn ptr_eq(&self, other: Node) -> bool {
+        unsafe { std::ptr::eq(self.ptr(), other.ptr()) }
+    }
+
+    unsafe fn ptr(&self) -> *const () {
+        match self {
+            Node::Program(n) => *n as *const _ as *const (),
+            Node::ImportStatement(n) => *n as *const _ as *const (),
+            Node::ExpressionStatement(n) => *n as *const _ as *const (),
+            Node::VariableDeclaration(n) => *n as *const _ as *const (),
+            Node::ReturnStatement(n) => *n as *const _ as *const (),
+            Node::VariableDeclarator(n) => *n as *const _ as *const (),
+            Node::Literal(n) => *n as *const _ as *const (),
+            Node::TagDeclarator(n) => *n as *const _ as *const (),
+            Node::Identifier(n) => *n as *const _ as *const (),
+            Node::BinaryExpression(n) => *n as *const _ as *const (),
+            Node::FunctionExpression(n) => *n as *const _ as *const (),
+            Node::CallExpression(n) => *n as *const _ as *const (),
+            Node::CallExpressionKw(n) => *n as *const _ as *const (),
+            Node::PipeExpression(n) => *n as *const _ as *const (),
+            Node::PipeSubstitution(n) => *n as *const _ as *const (),
+            Node::ArrayExpression(n) => *n as *const _ as *const (),
+            Node::ArrayRangeExpression(n) => *n as *const _ as *const (),
+            Node::ObjectExpression(n) => *n as *const _ as *const (),
+            Node::MemberExpression(n) => *n as *const _ as *const (),
+            Node::UnaryExpression(n) => *n as *const _ as *const (),
+            Node::Parameter(p) => *p as *const _ as *const (),
+            Node::ObjectProperty(n) => *n as *const _ as *const (),
+            Node::IfExpression(n) => *n as *const _ as *const (),
+            Node::ElseIf(n) => *n as *const _ as *const (),
+            Node::KclNone(n) => *n as *const _ as *const (),
+            Node::LabelledExpression(n) => *n as *const _ as *const (),
+        }
+    }
 }
 
 /// Returned during source_range conversion.
@@ -239,3 +281,33 @@ impl_from!(Node, IfExpression);
 impl_from!(Node, ElseIf);
 impl_from!(Node, LabelledExpression);
 impl_from!(Node, KclNone);
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    macro_rules! kcl {
+        ( $kcl:expr ) => {{
+            $crate::parsing::top_level_parse($kcl).unwrap()
+        }};
+    }
+
+    #[test]
+    fn check_ptr_eq() {
+        let program = kcl!(
+            "
+const foo = 1
+const bar = foo + 1
+
+fn myfn = () => {
+    const foo = 2
+    sin(foo)
+}
+"
+        );
+
+        let foo: Node = (&program.body[0]).into();
+        assert!(foo.ptr_eq((&program.body[0]).into()));
+        assert!(!foo.ptr_eq((&program.body[1]).into()));
+    }
+}

src/wasm-lib/kcl/src/walk/mod.rs

@@ -3,4 +3,5 @@ mod ast_visitor;
 mod ast_walk;
 
 pub use ast_node::Node;
+pub use ast_visitor::{Visitable, Visitor};
 pub use ast_walk::walk;

yarn.lock

@@ -9461,10 +9461,10 @@ vite-tsconfig-paths@^4.3.2:
     globrex "^0.1.2"
     tsconfck "^3.0.3"
 
-vite@^5.0.0, vite@^5.4.6:
-  version "5.4.6"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.6.tgz#85a93a1228a7fb5a723ca1743e337a2588ed008f"
-  integrity sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==
+vite@^5.0.0, vite@^5.4.12:
+  version "5.4.12"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.12.tgz#627d12ff06de3942557dfe8632fd712a12a072c7"
+  integrity sha512-KwUaKB27TvWwDJr1GjjWthLMATbGEbeWYZIbGZ5qFIsgPP3vWzLu4cVooqhm5/Z2SPDUMjyPVjTztm5tYKwQxA==
   dependencies:
     esbuild "^0.21.3"
     postcss "^8.4.43"