Move length and named value constraint flows into command palette (#4675)

* Extend KCL argument input

* Migrate length constraint to be a command

* Add ability for `kcl` arguments to provide an initial variable name

* Move named variable flow into command palette

* Fix one e2e test

* Remove unwanted `ZERO` behavior when length constraint has no `variableName`

* Fix issue with `getSelectionCountByType` with sketches not yet in artifactGraph

* Update broken constraint tests

* Look at this (photo)Graph *in the voice of Nickelback*

* Fix segment overlays tests, which had out-of-date selectors

* Return early from `useConvertToVariable` if no selectionRanges

* Fixup for review comment from #4677 (#4696)

Signed-off-by: Nick Cameron <nrc@ncameron.org>

* Invalidate nightly bucket files after publish (#4627)

* Invalidate nightly bucket files after publish

* Fix conflict resolution

* Add some more warnings (#4697)

* Add installation instructions for all platforms (#4592)

* Add installation instructions for all platforms
Fixes #4511

* Typo

* Typo2

* Improve linux instructions, thanks @TomPridham

Co-authored-by: Tom Pridham <pridham.tom@gmail.com>

---------

Co-authored-by: Tom Pridham <pridham.tom@gmail.com>

* Bump node to v22.12.0 (LTS) (#4706)

* Point-and-click Shell (#4666)

* WIP: experimenting with Loft UI
Relates to #4470

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest-8-cores)

* Add selection guard

* Working loft for two sketches in the right hardcoded order

* First pass at handling more than 2 sketches

* WIP selections

* WIP selections

* More checks

* Appends the loft line after the 'last' sketch in the code

* Clean up

* Enable multiple selections after the button click

* First point-click loft test (not working locally, loft gets inserted at the wrong place)

* Lint

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest-8-cores)

* Clean up and working pw test

* Add test for doesSceneHaveSweepableSketch with count = 2

* Clean up loftSketches function

* Add pw test for preselected sketches

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest-8-cores)

* Trigger CI

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest-8-cores)

* Move to fromPromise-based Actor

* Move error logic out of loftSketches, fix pw tests

* Remove comments

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest-8-cores)

* Trigger CI

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest-8-cores)

* Trigger CI

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest-8-cores)

* Fix typo

* Revert snapshots

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest-8-cores)

* Trigger CI

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest-8-cores)

* Trigger CI

* WIP: initial shell code addition

* Rollback pw values to pre cam change

* WIP: more additions

* WIP: closer

* WIP: first time working shell mod

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest-8-cores)

* Add extrude lookup for more generic shell

* Handle walls

* Add pw tests for cap shell

* Add shell wall test

* Fix lint

* Add selection guard and clean up

* Lint fix

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest-8-cores)

* WIP mutliple faces

* WIP circular dep

* Lint

* Look at this (photo)Graph *in the voice of Nickelback*

* Trigger CI

* Working multi-face shell across types

* Cap and wall pw test

* Apply suggestions from Frank's review

Co-authored-by: Frank Noirot <frank@zoo.dev>

* Fix test annotations

* Add unit tests for doesSceneHaveExtrudedSketch

* Manual resolution of snapshot conflicts

* Fix assertParse

* Updated pathToNode construct

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Frank Noirot <frank@zoo.dev>

* More aggressive using of cache on engine settings changes (#4691)

* move around the files for cache to better localtions

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* cleanup

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* udpates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* cleanup

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* ensure we can change the grid setting via the command bar

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* pass thru all setttings

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* fix playwright test

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest-8-cores)

* emoty

---------

Signed-off-by: Jess Frazelle <github@jessfraz.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix use of `as`

---------

Signed-off-by: Nick Cameron <nrc@ncameron.org>
Signed-off-by: Jess Frazelle <github@jessfraz.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Nick Cameron <nrc@ncameron.org>
Co-authored-by: Pierre Jacquier <pierrejacquier39@gmail.com>
Co-authored-by: Tom Pridham <pridham.tom@gmail.com>
Co-authored-by: Jess Frazelle <jessfraz@users.noreply.github.com>

e2e/playwright/testing-constraints.spec.ts

@@ -26,7 +26,17 @@ test.describe('Testing constraints', () => {
     })
 
     const u = await getUtils(page)
-    const PUR = 400 / 37.5 //pixeltoUnitRatio
+    // constants and locators
+    const lengthValue = {
+      old: '20',
+      new: '25',
+    }
+    const cmdBarKclInput = page
+      .getByTestId('cmd-bar-arg-value')
+      .getByRole('textbox')
+    const cmdBarSubmitButton = page.getByRole('button', {
+      name: 'arrow right Continue',
+    })
     await page.setViewportSize({ width: 1200, height: 500 })
 
     await u.waitForAuthSkipAppStart()
@@ -36,26 +46,26 @@ test.describe('Testing constraints', () => {
     await u.closeDebugPanel()
 
     // Click the line of code for line.
-    await page.getByText(`line([0, 20], %)`).click() // TODO remove this and reinstate // await topHorzSegmentClick()
+    // TODO remove this and reinstate `await topHorzSegmentClick()`
+    await page.getByText(`line([0, ${lengthValue.old}], %)`).click()
     await page.waitForTimeout(100)
 
     // enter sketch again
     await page.getByRole('button', { name: 'Edit Sketch' }).click()
     await page.waitForTimeout(500) // wait for animation
-
-    const startXPx = 500
-    await page.mouse.move(startXPx + PUR * 15, 250 - PUR * 10)
-    await page.keyboard.down('Shift')
-    await page.mouse.click(834, 244)
-    await page.keyboard.up('Shift')
-
     await page
       .getByRole('button', { name: 'dimension Length', exact: true })
       .click()
-    await page.getByText('Add constraining value').click()
+    await expect(cmdBarKclInput).toHaveText('20')
+    await cmdBarKclInput.fill(lengthValue.new)
+    await expect(
+      page.getByText(`Can't calculate`),
+      `Something went wrong with the KCL expression evaluation`
+    ).not.toBeVisible()
+    await cmdBarSubmitButton.click()
 
     await expect(page.locator('.cm-content')).toHaveText(
-      `length001 = 20sketch001 = startSketchOn('XY')  |> startProfileAt([-10, -10], %)  |> line([20, 0], %)  |> angledLine([90, length001], %)  |> xLine(-20, %)`
+      `length001 = ${lengthValue.new}sketch001 = startSketchOn('XY')  |> startProfileAt([-10, -10], %)  |> line([20, 0], %)  |> angledLine([90, length001], %)  |> xLine(-20, %)`
     )
 
     // Make sure we didn't pop out of sketch mode.
@@ -66,7 +76,6 @@ test.describe('Testing constraints', () => {
     await page.waitForTimeout(500) // wait for animation
 
     // Exit sketch
-    await page.mouse.move(startXPx + PUR * 15, 250 - PUR * 10)
     await page.keyboard.press('Escape')
     await expect(
       page.getByRole('button', { name: 'Exit Sketch' })
@@ -524,7 +533,7 @@ part002 = startSketchOn('XZ')
       })
     }
   })
-  test.describe('Test Angle/Length constraint single selection', () => {
+  test.describe('Test Angle constraint single selection', () => {
     const cases = [
       {
         testName: 'Angle - Add variable',
@@ -538,18 +547,6 @@ part002 = startSketchOn('XZ')
         constraint: 'angle',
         value: '83, 78.33',
       },
-      {
-        testName: 'Length - Add variable',
-        addVariable: true,
-        constraint: 'length',
-        value: '83, length001',
-      },
-      {
-        testName: 'Length - No variable',
-        addVariable: false,
-        constraint: 'length',
-        value: '83, 78.33',
-      },
     ] as const
     for (const { testName, addVariable, value, constraint } of cases) {
       test(`${testName}`, async ({ page }) => {
@@ -608,6 +605,90 @@ part002 = startSketchOn('XZ')
       })
     }
   })
+  test.describe('Test Length constraint single selection', () => {
+    const cases = [
+      {
+        testName: 'Length - Add variable',
+        addVariable: true,
+        constraint: 'length',
+        value: '83, length001',
+      },
+      {
+        testName: 'Length - No variable',
+        addVariable: false,
+        constraint: 'length',
+        value: '83, 78.33',
+      },
+    ] as const
+    for (const { testName, addVariable, value, constraint } of cases) {
+      test(`${testName}`, async ({ page }) => {
+        // constants and locators
+        const cmdBarKclInput = page
+          .getByTestId('cmd-bar-arg-value')
+          .getByRole('textbox')
+        const cmdBarKclVariableNameInput =
+          page.getByPlaceholder('Variable name')
+        const cmdBarSubmitButton = page.getByRole('button', {
+          name: 'arrow right Continue',
+        })
+
+        await page.addInitScript(async () => {
+          localStorage.setItem(
+            'persistCode',
+            `yo = 5
+part001 = startSketchOn('XZ')
+  |> startProfileAt([-7.54, -26.74], %)
+  |> line([74.36, 130.4], %)
+  |> line([78.92, -120.11], %)
+  |> line([9.16, 77.79], %)
+  |> line([51.19, 48.97], %)
+part002 = startSketchOn('XZ')
+  |> startProfileAt([299.05, 231.45], %)
+  |> xLine(-425.34, %, $seg_what)
+  |> yLine(-264.06, %)
+  |> xLine(segLen(seg_what), %)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)`
+          )
+        })
+        const u = await getUtils(page)
+        await page.setViewportSize({ width: 1200, height: 500 })
+
+        await u.waitForAuthSkipAppStart()
+
+        await page.getByText('line([74.36, 130.4], %)').click()
+        await page.getByRole('button', { name: 'Edit Sketch' }).click()
+
+        const line3 = await u.getSegmentBodyCoords(
+          `[data-overlay-index="${2}"]`
+        )
+
+        await page.mouse.click(line3.x, line3.y)
+        await page
+          .getByRole('button', {
+            name: 'Length: open menu',
+          })
+          .click()
+        await page.getByTestId('dropdown-constraint-' + constraint).click()
+
+        if (!addVariable) {
+          await test.step(`Clear the variable input`, async () => {
+            await cmdBarKclVariableNameInput.clear()
+            await cmdBarKclVariableNameInput.press('Backspace')
+          })
+        }
+        await expect(cmdBarKclInput).toHaveText('78.33')
+        await cmdBarSubmitButton.click()
+
+        const changedCode = `|> angledLine([${value}], %)`
+        await expect(page.locator('.cm-content')).toContainText(changedCode)
+        // checking active assures the cursor is where it should be
+        await expect(page.locator('.cm-activeLine')).toHaveText(changedCode)
+
+        // checking the count of the overlays is a good proxy check that the client sketch scene is in a good state
+        await expect(page.getByTestId('segment-overlay')).toHaveCount(4)
+      })
+    }
+  })
   test.describe('Many segments - no modal constraints', () => {
     const cases = [
       {
@@ -868,6 +949,15 @@ part002 = startSketchOn('XZ')
   |> line([3.13, -2.4], %)`
       )
     })
+
+    // constants and locators
+    const cmdBarKclInput = page
+      .getByTestId('cmd-bar-arg-value')
+      .getByRole('textbox')
+    const cmdBarSubmitButton = page.getByRole('button', {
+      name: 'arrow right Continue',
+    })
+
     const u = await getUtils(page)
     await page.setViewportSize({ width: 1200, height: 500 })
 
@@ -928,8 +1018,8 @@ part002 = startSketchOn('XZ')
     // await page.getByRole('button', { name: 'length', exact: true }).click()
     await page.getByTestId('dropdown-constraint-length').click()
 
-    await page.getByLabel('length Value').fill('10')
+    await cmdBarKclInput.fill('10')
-    await page.getByRole('button', { name: 'Add constraining value' }).click()
+    await cmdBarSubmitButton.click()
 
     activeLinesContent = await page.locator('.cm-activeLine').all()
     await expect(activeLinesContent[0]).toHaveText(`|> xLine(length001, %)`)

e2e/playwright/testing-segment-overlays.spec.ts

@@ -91,7 +91,14 @@ test.describe('Testing segment overlays', () => {
           await page.getByTestId('constraint-symbol-popover').count()
         ).toBeGreaterThan(0)
         await unconstrainedLocator.click()
-        await page.getByText('Add variable').click()
+        await expect(
+          page.getByTestId('cmd-bar-arg-value').getByRole('textbox')
+        ).toBeFocused()
+        await page
+          .getByRole('button', {
+            name: 'arrow right Continue',
+          })
+          .click()
         await expect(page.locator('.cm-content')).toContainText(expectFinal)
       }
 
@@ -151,7 +158,14 @@ test.describe('Testing segment overlays', () => {
           await page.getByTestId('constraint-symbol-popover').count()
         ).toBeGreaterThan(0)
         await unconstrainedLocator.click()
-        await page.getByText('Add variable').click()
+        await expect(
+          page.getByTestId('cmd-bar-arg-value').getByRole('textbox')
+        ).toBeFocused()
+        await page
+          .getByRole('button', {
+            name: 'arrow right Continue',
+          })
+          .click()
         await expect(page.locator('.cm-content')).toContainText(
           expectAfterUnconstrained
         )

src/clientSideScene/ClientSideSceneComp.tsx

@@ -505,7 +505,8 @@ const ConstraintSymbol = ({
   constrainInfo: ConstrainInfo
   verticalPosition: 'top' | 'bottom'
 }) => {
-  const { context, send } = useModelingContext()
+  const { commandBarSend } = useCommandsContext()
+  const { context } = useModelingContext()
   const varNameMap: {
     [key in ConstrainInfo['type']]: {
       varName: string
@@ -624,11 +625,18 @@ const ConstraintSymbol = ({
         // disabled={implicitDesc} TODO why does this change styles that are hard to override?
         onClick={toSync(async () => {
           if (!isConstrained) {
-            send({
+            commandBarSend({
-              type: 'Convert to variable',
+              type: 'Find and select command',
               data: {
+                name: 'Constrain with named value',
+                groupId: 'modeling',
+                argDefaultValues: {
+                  currentValue: {
                     pathToNode,
                     variableName: varName,
+                    valueText: value,
+                  },
+                },
               },
             })
           } else if (isConstrained) {

src/components/CommandBar/CommandBarKclInput.tsx

@@ -8,11 +8,16 @@ import { getSystemTheme } from 'lib/theme'
 import { useCalculateKclExpression } from 'lib/useCalculateKclExpression'
 import { roundOff } from 'lib/utils'
 import { varMentions } from 'lib/varCompletionExtension'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 import styles from './CommandBarKclInput.module.css'
 import { createIdentifier, createVariableDeclaration } from 'lang/modifyAst'
 import { useCodeMirror } from 'components/ModelingSidebar/ModelingPanes/CodeEditor'
+import { useSelector } from '@xstate/react'
+
+const machineContextSelector = (snapshot?: {
+  context: Record<string, unknown>
+}) => snapshot?.context
 
 function CommandBarKclInput({
   arg,
@@ -31,12 +36,44 @@ function CommandBarKclInput({
     arg.name
   ] as KclCommandValue | undefined
   const { settings } = useSettingsAuthContext()
-  const defaultValue = (arg.defaultValue as string) || ''
+  const argMachineContext = useSelector(
+    arg.machineActor,
+    machineContextSelector
+  )
+  const defaultValue = useMemo(
+    () =>
+      arg.defaultValue
+        ? arg.defaultValue instanceof Function
+          ? arg.defaultValue(commandBarState.context, argMachineContext)
+          : arg.defaultValue
+        : '',
+    [arg.defaultValue, commandBarState.context, argMachineContext]
+  )
+  const initialVariableName = useMemo(() => {
+    // Use the configured variable name if it exists
+    if (arg.variableName !== undefined) {
+      return arg.variableName instanceof Function
+        ? arg.variableName(commandBarState.context, argMachineContext)
+        : arg.variableName
+    }
+    // or derive it from the previously set value or the argument name
+    return previouslySetValue && 'variableName' in previouslySetValue
+      ? previouslySetValue.variableName
+      : arg.name
+  }, [
+    arg.variableName,
+    commandBarState.context,
+    argMachineContext,
+    arg.name,
+    previouslySetValue,
+  ])
   const [value, setValue] = useState(
     previouslySetValue?.valueText || defaultValue || ''
   )
   const [createNewVariable, setCreateNewVariable] = useState(
-    previouslySetValue && 'variableName' in previouslySetValue
+    (previouslySetValue && 'variableName' in previouslySetValue) ||
+      arg.createVariableByDefault ||
+      false
   )
   const [canSubmit, setCanSubmit] = useState(true)
   useHotkeys('mod + k, mod + /', () => commandBarSend({ type: 'Close' }))
@@ -52,10 +89,7 @@ function CommandBarKclInput({
     isNewVariableNameUnique,
   } = useCalculateKclExpression({
     value,
-    initialVariableName:
+    initialVariableName,
-      previouslySetValue && 'variableName' in previouslySetValue
-        ? previouslySetValue.variableName
-        : arg.name,
   })
   const varMentionData: Completion[] = prevVariables.map((v) => ({
     label: v.key,

src/components/ModelingMachineProvider.tsx

@@ -41,7 +41,10 @@ import {
   angleBetweenInfo,
   applyConstraintAngleBetween,
 } from './Toolbar/SetAngleBetween'
-import { applyConstraintAngleLength } from './Toolbar/setAngleLength'
+import {
+  applyConstraintAngleLength,
+  applyConstraintLength,
+} from './Toolbar/setAngleLength'
 import {
   canSweepSelection,
   handleSelectionBatch,
@@ -63,12 +66,13 @@ import {
   getSketchOrientationDetails,
 } from 'clientSideScene/sceneEntities'
 import {
-  moveValueIntoNewVariablePath,
+  insertNamedConstant,
+  replaceValueAtNodePath,
   sketchOnExtrudedFace,
   sketchOnOffsetPlane,
   startSketchOnDefault,
 } from 'lang/modifyAst'
-import { Program, parse, recast, resultIsOk } from 'lang/wasm'
+import { PathToNode, Program, parse, recast, resultIsOk } from 'lang/wasm'
 import {
   doesSceneHaveExtrudedSketch,
   doesSceneHaveSweepableSketch,
@@ -81,7 +85,6 @@ import toast from 'react-hot-toast'
 import { EditorSelection, Transaction } from '@codemirror/state'
 import { useLoaderData, useNavigate, useSearchParams } from 'react-router-dom'
 import { letEngineAnimateAndSyncCamAfter } from 'clientSideScene/CameraControls'
-import { getVarNameModal } from 'hooks/useToolbarGuards'
 import { err, reportRejection, trap } from 'lib/trap'
 import { useCommandsContext } from 'hooks/useCommandsContext'
 import { modelingMachineEvent } from 'editor/manager'
@@ -889,12 +892,18 @@ export const ModelingMachineProvider = ({
             }
           }
         ),
-        'Get length info': fromPromise(
+        astConstrainLength: fromPromise(
-          async ({ input: { selectionRanges, sketchDetails } }) => {
+          async ({
-            const { modifiedAst, pathToNodeMap } =
+            input: { selectionRanges, sketchDetails, lengthValue },
-              await applyConstraintAngleLength({
+          }) => {
+            if (!lengthValue)
+              return Promise.reject(new Error('No length value'))
+            const constraintResult = await applyConstraintLength({
               selectionRanges,
+              length: lengthValue,
             })
+            if (err(constraintResult)) return Promise.reject(constraintResult)
+            const { modifiedAst, pathToNodeMap } = constraintResult
             const pResult = parse(recast(modifiedAst))
             if (trap(pResult) || !resultIsOk(pResult))
               return Promise.reject(new Error('Unexpected compilation error'))
@@ -1063,38 +1072,88 @@ export const ModelingMachineProvider = ({
             }
           }
         ),
-        'Get convert to variable info': fromPromise(
+        'Apply named value constraint': fromPromise(
           async ({ input: { selectionRanges, sketchDetails, data } }) => {
-            if (!sketchDetails)
+            if (!sketchDetails) {
               return Promise.reject(new Error('No sketch details'))
-            const { variableName } = await getVarNameModal({
+            }
-              valueName: data?.variableName || 'var',
+            if (!data) {
-            })
+              return Promise.reject(new Error('No data from command flow'))
+            }
             let pResult = parse(recast(kclManager.ast))
             if (trap(pResult) || !resultIsOk(pResult))
               return Promise.reject(new Error('Unexpected compilation error'))
             let parsed = pResult.program
 
-            const { modifiedAst: _modifiedAst, pathToReplacedNode } =
+            let result: {
-              moveValueIntoNewVariablePath(
+              modifiedAst: Node<Program>
-                parsed,
+              pathToReplaced: PathToNode | null
-                kclManager.programMemory,
+            } = {
-                data?.pathToNode || [],
+              modifiedAst: parsed,
-                variableName
+              pathToReplaced: null,
+            }
+            // If the user provided a constant name,
+            // we need to insert the named constant
+            // and then replace the node with the constant's name.
+            if ('variableName' in data.namedValue) {
+              const astAfterReplacement = replaceValueAtNodePath({
+                ast: parsed,
+                pathToNode: data.currentValue.pathToNode,
+                newExpressionString: data.namedValue.variableName,
+              })
+              if (trap(astAfterReplacement)) {
+                return Promise.reject(astAfterReplacement)
+              }
+              const parseResultAfterInsertion = parse(
+                recast(
+                  insertNamedConstant({
+                    node: astAfterReplacement.modifiedAst,
+                    newExpression: data.namedValue,
+                  })
                 )
-            pResult = parse(recast(_modifiedAst))
+              )
+              if (
+                trap(parseResultAfterInsertion) ||
+                !resultIsOk(parseResultAfterInsertion)
+              )
+                return Promise.reject(parseResultAfterInsertion)
+              result = {
+                modifiedAst: parseResultAfterInsertion.program,
+                pathToReplaced: astAfterReplacement.pathToReplaced,
+              }
+            } else if ('valueText' in data.namedValue) {
+              // If they didn't provide a constant name,
+              // just replace the node with the value.
+              const astAfterReplacement = replaceValueAtNodePath({
+                ast: parsed,
+                pathToNode: data.currentValue.pathToNode,
+                newExpressionString: data.namedValue.valueText,
+              })
+              if (trap(astAfterReplacement)) {
+                return Promise.reject(astAfterReplacement)
+              }
+              // The `replacer` function returns a pathToNode that assumes
+              // an identifier is also being inserted into the AST, creating an off-by-one error.
+              // This corrects that error, but TODO we should fix this upstream
+              // to avoid this kind of error in the future.
+              astAfterReplacement.pathToReplaced[1][0] =
+                (astAfterReplacement.pathToReplaced[1][0] as number) - 1
+              result = astAfterReplacement
+            }
+
+            pResult = parse(recast(result.modifiedAst))
             if (trap(pResult) || !resultIsOk(pResult))
               return Promise.reject(new Error('Unexpected compilation error'))
             parsed = pResult.program
 
             if (trap(parsed)) return Promise.reject(parsed)
             parsed = parsed as Node<Program>
-            if (!pathToReplacedNode)
+            if (!result.pathToReplaced)
               return Promise.reject(new Error('No path to replaced node'))
 
             const updatedAst =
               await sceneEntitiesManager.updateAstAndRejigSketch(
-                pathToReplacedNode || [],
+                result.pathToReplaced || [],
                 parsed,
                 sketchDetails.zAxis,
                 sketchDetails.yAxis,
@@ -1107,7 +1166,7 @@ export const ModelingMachineProvider = ({
             )
 
             const selection = updateSelections(
-              { 0: pathToReplacedNode },
+              { 0: result.pathToReplaced },
               selectionRanges,
               updatedAst.newAst
             )
@@ -1115,7 +1174,7 @@ export const ModelingMachineProvider = ({
             return {
               selectionType: 'completeSelection',
               selection,
-              updatedPathToNode: pathToReplacedNode,
+              updatedPathToNode: result.pathToReplaced,
             }
           }
         ),

src/components/Toolbar/setAngleLength.tsx

@@ -22,6 +22,7 @@ import { removeDoubleNegatives } from '../AvailableVarsHelpers'
 import { normaliseAngle } from '../../lib/utils'
 import { kclManager } from 'lib/singletons'
 import { err } from 'lib/trap'
+import { KclCommandValue } from 'lib/commandTypes'
 
 const getModalInfo = createSetAngleLengthModal(SetAngleLengthModal)
 
@@ -63,6 +64,57 @@ export function angleLengthInfo({
   return { enabled, transforms }
 }
 
+export async function applyConstraintLength({
+  length,
+  selectionRanges,
+}: {
+  length: KclCommandValue
+  selectionRanges: Selections
+}) {
+  const ast = kclManager.ast
+  const angleLength = angleLengthInfo({ selectionRanges })
+  if (err(angleLength)) return angleLength
+  const { transforms } = angleLength
+
+  let distanceExpression: Expr = length.valueAst
+
+  /**
+   * To be "constrained", the value must be a binary expression, a named value, or a function call.
+   * If it has a variable name, we need to insert a variable declaration at the correct index.
+   */
+  if (
+    'variableName' in length &&
+    length.variableName &&
+    length.insertIndex !== undefined
+  ) {
+    const newBody = [...ast.body]
+    newBody.splice(length.insertIndex, 0, length.variableDeclarationAst)
+    ast.body = newBody
+    distanceExpression = createIdentifier(length.variableName)
+  }
+
+  if (!isExprBinaryPart(distanceExpression)) {
+    return new Error('Invalid valueNode, is not a BinaryPart')
+  }
+
+  const retval = transformAstSketchLines({
+    ast,
+    selectionRanges,
+    transformInfos: transforms,
+    programMemory: kclManager.programMemory,
+    referenceSegName: '',
+    forceValueUsedInTransform: distanceExpression,
+  })
+  if (err(retval)) return Promise.reject(retval)
+
+  const { modifiedAst: _modifiedAst, pathToNodeMap } = retval
+
+  return {
+    modifiedAst: _modifiedAst,
+    pathToNodeMap,
+  }
+}
+
 export async function applyConstraintAngleLength({
   selectionRanges,
   angleOrLength = 'setLength',

src/hooks/useToolbarGuards.ts

@@ -24,6 +24,8 @@ export function useConvertToVariable(range?: SourceRange) {
   }, [enable])
 
   useEffect(() => {
+    // Return early if there are no selection ranges for whatever reason
+    if (!context.selectionRanges) return
     const parsed = ast
 
     const meta = isNodeSafeToReplace(

src/lang/modifyAst.ts

@@ -45,6 +45,7 @@ import { TagDeclarator } from 'wasm-lib/kcl/bindings/TagDeclarator'
 import { Models } from '@kittycad/lib'
 import { ExtrudeFacePlane } from 'machines/modelingMachine'
 import { Node } from 'wasm-lib/kcl/bindings/Node'
+import { KclExpressionWithVariable } from 'lib/commandTypes'
 
 export function startSketchOnDefault(
   node: Node<Program>,
@@ -590,6 +591,25 @@ export function addOffsetPlane({
   }
 }
 
+/**
+ * Return a modified clone of an AST with a named constant inserted into the body
+ */
+export function insertNamedConstant({
+  node,
+  newExpression,
+}: {
+  node: Node<Program>
+  newExpression: KclExpressionWithVariable
+}): Node<Program> {
+  const ast = structuredClone(node)
+  ast.body.splice(
+    newExpression.insertIndex,
+    0,
+    newExpression.variableDeclarationAst
+  )
+  return ast
+}
+
 /**
  * Modify the AST to create a new sketch using the variable declaration
  * of an offset plane. The new sketch just has to come after the offset
@@ -933,6 +953,31 @@ export function giveSketchFnCallTag(
   }
 }
 
+/**
+ * Replace a
+ */
+export function replaceValueAtNodePath({
+  ast,
+  pathToNode,
+  newExpressionString,
+}: {
+  ast: Node<Program>
+  pathToNode: PathToNode
+  newExpressionString: string
+}) {
+  const replaceCheckResult = isNodeSafeToReplacePath(ast, pathToNode)
+  if (err(replaceCheckResult)) {
+    return replaceCheckResult
+  }
+  const { isSafe, value, replacer } = replaceCheckResult
+
+  if (!isSafe || value.type === 'Identifier') {
+    return new Error('Not safe to replace')
+  }
+
+  return replacer(ast, newExpressionString)
+}
+
 export function moveValueIntoNewVariablePath(
   ast: Node<Program>,
   programMemory: ProgramMemory,

src/lib/commandBarConfigs/modelingCommandConfig.ts

@@ -1,8 +1,13 @@
 import { Models } from '@kittycad/lib'
+import { angleLengthInfo } from 'components/Toolbar/setAngleLength'
+import { transformAstSketchLines } from 'lang/std/sketchcombos'
+import { PathToNode } from 'lang/wasm'
 import { StateMachineCommandSetConfig, KclCommandValue } from 'lib/commandTypes'
 import { KCL_DEFAULT_LENGTH, KCL_DEFAULT_DEGREE } from 'lib/constants'
 import { components } from 'lib/machine-api'
 import { Selections } from 'lib/selections'
+import { kclManager } from 'lib/singletons'
+import { err } from 'lib/trap'
 import { modelingMachine, SketchTool } from 'machines/modelingMachine'
 
 type OutputFormat = Models['OutputFormat_type']
@@ -54,6 +59,18 @@ export type ModelingCommandSchema = {
   'change tool': {
     tool: SketchTool
   }
+  'Constrain length': {
+    selection: Selections
+    length: KclCommandValue
+  }
+  'Constrain with named value': {
+    currentValue: {
+      valueText: string
+      pathToNode: PathToNode
+      variableName: string
+    }
+    namedValue: KclCommandValue
+  }
   'Text-to-CAD': {
     prompt: string
   }
@@ -360,6 +377,88 @@ export const modelingMachineCommandConfig: StateMachineCommandSetConfig<
       },
     },
   },
+  'Constrain length': {
+    description: 'Constrain the length of one or more segments.',
+    icon: 'dimension',
+    args: {
+      selection: {
+        inputType: 'selection',
+        selectionTypes: ['segment'],
+        multiple: false,
+        required: true,
+        skip: true,
+      },
+      length: {
+        inputType: 'kcl',
+        required: true,
+        createVariableByDefault: true,
+        defaultValue(_, machineContext) {
+          const selectionRanges = machineContext?.selectionRanges
+          if (!selectionRanges) return KCL_DEFAULT_LENGTH
+          const angleLength = angleLengthInfo({
+            selectionRanges,
+            angleOrLength: 'setLength',
+          })
+          if (err(angleLength)) return KCL_DEFAULT_LENGTH
+          const { transforms } = angleLength
+
+          // QUESTION: is it okay to reference kclManager here? will its state be up to date?
+          const sketched = transformAstSketchLines({
+            ast: structuredClone(kclManager.ast),
+            selectionRanges,
+            transformInfos: transforms,
+            programMemory: kclManager.programMemory,
+            referenceSegName: '',
+          })
+          if (err(sketched)) return KCL_DEFAULT_LENGTH
+          const { valueUsedInTransform } = sketched
+          return valueUsedInTransform?.toString() || KCL_DEFAULT_LENGTH
+        },
+      },
+    },
+  },
+  'Constrain with named value': {
+    description: 'Constrain a value by making it a named constant.',
+    icon: 'make-variable',
+    args: {
+      currentValue: {
+        description:
+          'Path to the node in the AST to constrain. This is never shown to the user.',
+        inputType: 'text',
+        required: false,
+        skip: true,
+      },
+      namedValue: {
+        inputType: 'kcl',
+        required: true,
+        createVariableByDefault: true,
+        variableName(commandBarContext, machineContext) {
+          const { currentValue } = commandBarContext.argumentsToSubmit
+          if (
+            !currentValue ||
+            !(currentValue instanceof Object) ||
+            !('variableName' in currentValue) ||
+            typeof currentValue.variableName !== 'string'
+          ) {
+            return 'value'
+          }
+          return currentValue.variableName
+        },
+        defaultValue: (commandBarContext) => {
+          const { currentValue } = commandBarContext.argumentsToSubmit
+          if (
+            !currentValue ||
+            !(currentValue instanceof Object) ||
+            !('valueText' in currentValue) ||
+            typeof currentValue.valueText !== 'string'
+          ) {
+            return KCL_DEFAULT_LENGTH
+          }
+          return currentValue.valueText
+        },
+      },
+    },
+  },
   'Text-to-CAD': {
     description: 'Use the Zoo Text-to-CAD API to generate part starters.',
     icon: 'chat',

src/lib/commandTypes.ts

@@ -148,7 +148,22 @@ export type CommandArgumentConfig<
       selectionTypes: Artifact['type'][]
       multiple: boolean
     }
-  | { inputType: 'kcl'; defaultValue?: string } // KCL expression inputs have simple strings as default values
+  | {
+      inputType: 'kcl'
+      createVariableByDefault?: boolean
+      variableName?:
+        | string
+        | ((
+            commandBarContext: ContextFrom<typeof commandBarMachine>,
+            machineContext?: C
+          ) => string)
+      defaultValue?:
+        | string
+        | ((
+            commandBarContext: ContextFrom<typeof commandBarMachine>,
+            machineContext?: C
+          ) => string)
+    }
   | {
       inputType: 'string'
       defaultValue?:
@@ -222,7 +237,22 @@ export type CommandArgument<
       selectionTypes: Artifact['type'][]
       multiple: boolean
     }
-  | { inputType: 'kcl'; defaultValue?: string } // KCL expression inputs have simple strings as default value
+  | {
+      inputType: 'kcl'
+      createVariableByDefault?: boolean
+      variableName?:
+        | string
+        | ((
+            commandBarContext: ContextFrom<typeof commandBarMachine>,
+            machineContext?: ContextFrom<T>
+          ) => string)
+      defaultValue?:
+        | string
+        | ((
+            commandBarContext: ContextFrom<typeof commandBarMachine>,
+            machineContext?: ContextFrom<T>
+          ) => string)
+    }
   | {
       inputType: 'string'
       defaultValue?:

src/lib/createMachineCommand.ts

@@ -185,6 +185,8 @@ export function buildCommandArgument<
   } else if (arg.inputType === 'kcl') {
     return {
       inputType: arg.inputType,
+      createVariableByDefault: arg.createVariableByDefault,
+      variableName: arg.variableName,
       defaultValue: arg.defaultValue,
       ...baseCommandArgument,
     } satisfies CommandArgument<O, T> & { inputType: 'kcl' }

src/lib/selections.ts

@@ -630,12 +630,29 @@ export function getSelectionCountByType(
     }
   })
 
-  selection.graphSelections.forEach((selection) => {
+  selection.graphSelections.forEach((graphSelection) => {
-    if (!selection.artifact) {
+    if (!graphSelection.artifact) {
+      /**
+       * TODO: remove this heuristic-based selection type detection.
+       * Currently, if you've created a sketch and have not left sketch mode,
+       * the selection will be a segment selection with no artifact.
+       * This is because the mock execution does not update the artifact graph.
+       * Once we move the artifactGraph creation to WASM, we can remove this,
+       * as the artifactGraph will always be up-to-date.
+       */
+      if (isSingleCursorInPipe(selection, kclManager.ast)) {
+        incrementOrInitializeSelectionType('segment')
+        return
+      } else {
+        console.warn(
+          'Selection is outside of a sketch but has no artifact. Sketch segment selections are the only kind that can have a valid selection with no artifact.',
+          JSON.stringify(graphSelection)
+        )
         incrementOrInitializeSelectionType('other')
         return
       }
-    incrementOrInitializeSelectionType(selection.artifact.type)
+    }
+    incrementOrInitializeSelectionType(graphSelection.artifact.type)
   })
 
   return selectionsByType

src/lib/toolbar.ts

@@ -540,13 +540,15 @@ export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
       [
         {
           id: 'constraint-length',
-          disabled: (state) =>
+          disabled: (state) => !state.matches({ Sketch: 'SketchIdle' }),
-            !(
+          onClick: ({ commandBarSend }) =>
-              state.matches({ Sketch: 'SketchIdle' }) &&
+            commandBarSend({
-              state.can({ type: 'Constrain length' })
+              type: 'Find and select command',
-            ),
+              data: {
-          onClick: ({ modelingSend }) =>
+                name: 'Constrain length',
-            modelingSend({ type: 'Constrain length' }),
+                groupId: 'modeling',
+              },
+            }),
           icon: 'dimension',
           status: 'available',
           title: 'Length',