@pascal-app/editor 1.0.0 → 1.0.3

package/src/components/ui/floating-level-selector.tsx

@@ -28,7 +28,15 @@ import {
   useScene,
 } from '@pascal-app/core'
 import { markPerfAction, useViewer } from '@pascal-app/viewer'
-import { ClipboardPaste, Copy, GripVertical, MoreVertical, Plus, Trash2 } from 'lucide-react'
+import {
+  ClipboardPaste,
+  Copy,
+  GripVertical,
+  MoreVertical,
+  Plus,
+  Trash2,
+  X,
+} from 'lucide-react'
 import {
   type ButtonHTMLAttributes,
   type CSSProperties,
@@ -45,6 +53,7 @@ import {
 } from '../../lib/level-duplication'
 import { getDefaultLevelName, getLevelDisplayName } from '@pascal-app/core'
 import { deleteLevelWithFallbackSelection } from '../../lib/level-selection'
+import { unitMemberLevels, leaveUnitFocus } from '../../lib/units'
 import { useLinearDisplay } from '../../lib/use-linear-display'
 import { cn } from '../../lib/utils'
 import { ActionButton } from './controls/action-button'
@@ -131,12 +140,15 @@ function LevelRow({
   onDuplicate,
   onPaste,
   onRequestDelete,
+  unitDotColor,
 }: {
   level: LevelNode
   isSelected: boolean
   isDragging?: boolean
   dragHandleProps?: ButtonHTMLAttributes<HTMLButtonElement>
   dragHandleRef?: (element: HTMLButtonElement | null) => void
+  /** Focused-unit color when the unit has zones on this level. */
+  unitDotColor?: string
   onSelect: () => void
   onDuplicate: (preset?: LevelDuplicatePreset) => void
   onPaste?: () => void
@@ -145,11 +157,14 @@ function LevelRow({
   const [duplicateDialogOpen, setDuplicateDialogOpen] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
   const updateNode = useScene((s) => s.updateNode)
-  const { isImperial, toDisplay, displayUnit } = useLinearDisplay('m', 2)
+  const { isImperial, toDisplay, displayUnit, precision: displayPrecision } = useLinearDisplay('m', 2)
 
   const storeyHeight = getStoredLevelHeight(level)
-  // toFixed(2) + strip one trailing zero: "2.50" → "2.5", "2.75" stays.
-  const storeyHeightLabel = `${toDisplay(storeyHeight).toFixed(2).replace(/0$/, '')} ${displayUnit}`
+  // Decimal units keep the compact readout; integer millimeters must retain trailing zeroes.
+  const formattedStoreyHeight = toDisplay(storeyHeight).toFixed(displayPrecision)
+  const storeyHeightLabel = `${
+    displayPrecision > 0 ? formattedStoreyHeight.replace(/0$/, '') : formattedStoreyHeight
+  } ${displayUnit}`
   // Same rule as the site panel and command palette: the ordinal-0 ground
   // floor is the vertical model's zero anchor and must never be deletable.
   const canDeleteLevel = level.level !== 0
@@ -215,6 +230,13 @@ function LevelRow({
             type="button"
           >
             <span className="truncate">{getLevelDisplayName(level)}</span>
+            {unitDotColor && (
+              <span
+                className="ml-1.5 h-1.5 w-1.5 shrink-0 rounded-full"
+                style={{ backgroundColor: unitDotColor }}
+                title="Focused unit has zones here"
+              />
+            )}
           </button>
 
           {/* Storey height badge — opens the height popover */}
@@ -244,7 +266,7 @@ function LevelRow({
                 precision={3}
                 step={0.1}
                 unit="m"
-                value={Math.round(storeyHeight * 1000) / 1000}
+                value={storeyHeight}
               />
               <div className="mt-1.5 grid grid-cols-3 gap-1.5">
                 {heightPresets.map((preset) => (
@@ -343,9 +365,11 @@ function SortableLevelRow({
   onDuplicate,
   onPaste,
   onRequestDelete,
+  unitDotColor,
 }: {
   level: LevelNode
   isSelected: boolean
+  unitDotColor?: string
   onSelect: () => void
   onDuplicate: (preset?: LevelDuplicatePreset) => void
   onPaste?: () => void
@@ -381,7 +405,42 @@ function SortableLevelRow({
         onPaste={onPaste}
         onRequestDelete={onRequestDelete}
         onSelect={onSelect}
+        unitDotColor={unitDotColor}
+      />
+    </div>
+  )
+}
+
+// ── Unit focus chip: name + × to end focus, only while a unit is focused ────
+
+function UnitFocusChip() {
+  const focusedUnitId = useViewer((s) => s.focusedUnitId)
+  const focusedUnit = useScene((s) => {
+    const unit = focusedUnitId ? s.nodes[focusedUnitId] : undefined
+    return unit?.type === 'unit' ? unit : null
+  })
+
+  if (!focusedUnit) return null
+
+  return (
+    <div
+      className="mt-4 flex h-7 max-w-48 items-center gap-1.5 rounded-full border border-border bg-background/90 pr-1 pl-2.5 font-medium text-xs shadow-2xl backdrop-blur-md"
+      data-testid="unit-focus-chip"
+    >
+      <span
+        className="h-2 w-2 shrink-0 rounded-full"
+        style={{ backgroundColor: focusedUnit.color }}
       />
+      <span className="truncate">{focusedUnit.name || 'Unit'}</span>
+      <button
+        aria-label="Exit unit focus"
+        className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-white/10 hover:text-foreground"
+        onClick={() => leaveUnitFocus()}
+        title="Exit unit focus"
+        type="button"
+      >
+        <X className="h-3 w-3" />
+      </button>
     </div>
   )
 }
@@ -398,6 +457,17 @@ export function FloatingLevelSelector() {
 
   const [deletingLevel, setDeletingLevel] = useState<LevelNode | null>(null)
   const [draggingLevelId, setDraggingLevelId] = useState<string | null>(null)
+  const focusedUnitId = useViewer((s) => s.focusedUnitId)
+  const focusedUnitColor = useScene((s) => {
+    const unit = focusedUnitId ? s.nodes[focusedUnitId] : undefined
+    return unit?.type === 'unit' ? unit.color : null
+  })
+  const focusedUnitLevelIds = useScene(
+    useShallow((s) => {
+      const unit = focusedUnitId ? s.nodes[focusedUnitId] : undefined
+      return unit?.type === 'unit' ? unitMemberLevels(unit, s.nodes).map((level) => level.id) : []
+    }),
+  )
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: { distance: 4 },
@@ -628,6 +698,11 @@ export function FloatingLevelSelector() {
                       <SortableLevelRow
                         isSelected={isSelected}
                         level={level}
+                        unitDotColor={
+                          focusedUnitColor && focusedUnitLevelIds.includes(level.id)
+                            ? focusedUnitColor
+                            : undefined
+                        }
                         onDuplicate={(preset) => handleDuplicateLevel(level, preset)}
                         onPaste={() => handlePasteToLevel(level)}
                         onRequestDelete={() => setDeletingLevel(level)}
@@ -658,6 +733,7 @@ export function FloatingLevelSelector() {
             </SortableContext>
           </DndContext>
         </div>
+        <UnitFocusChip />
       </div>
 
       {/* Delete confirmation dialog */}

package/src/components/ui/helpers/helper-manager.tsx

@@ -29,6 +29,7 @@ import useEditor, { getActiveContinuationContext } from '../../../store/use-edit
 import useInteractionScope, {
   useActiveHandleDrag,
   useMovingNode,
+  useReshapingNode,
 } from '../../../store/use-interaction-scope'
 import { BuildingHelper } from './building-helper'
 import { ContextualHelperPanel } from './contextual-helper-panel'
@@ -84,6 +85,7 @@ function terrainSculptHints(verb: TerrainVerb, sampling: boolean): ContextualSho
 }
 
 type ActiveModifierKeys = {
+  alt: boolean
   command: boolean
   shift: boolean
 }
@@ -93,6 +95,7 @@ const NO_CONTEXTUAL_HELP_SUBSCRIPTION = () => () => {}
 
 function useActiveModifierKeys(): ActiveModifierKeys {
   const [modifiers, setModifiers] = useState<ActiveModifierKeys>({
+    alt: false,
     command: false,
     shift: false,
   })
@@ -101,6 +104,7 @@ function useActiveModifierKeys(): ActiveModifierKeys {
     const updateModifiers = (event: KeyboardEvent) => {
       const isKeyDown = event.type === 'keydown'
       setModifiers({
+        alt: event.altKey || (isKeyDown && event.key === 'Alt'),
         command:
           event.metaKey ||
           event.ctrlKey ||
@@ -109,7 +113,7 @@ function useActiveModifierKeys(): ActiveModifierKeys {
       })
     }
     const clearModifiers = () => {
-      setModifiers({ command: false, shift: false })
+      setModifiers({ alt: false, command: false, shift: false })
     }
 
     window.addEventListener('keydown', updateModifiers)
@@ -135,6 +139,7 @@ export function HelperManager() {
   const workspaceMode = useEditor((s) => s.workspaceMode)
   const scope = useInteractionScope((s) => s.scope)
   const movingNode = useMovingNode()
+  const reshapingNode = useReshapingNode()
   const activeHandleDrag = useActiveHandleDrag()
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const isMobile = useIsMobile()
@@ -190,10 +195,12 @@ export function HelperManager() {
         : single?.type === 'duct-fitting' || single?.type === 'pipe-fitting'
           ? 'fitting'
           : null
+    const hasOpeningRadiusSelection = single?.type === 'door' || single?.type === 'window'
     return resolveSelectModeHelpHints({
       selectedCount: selectedNodes.length,
       hasMovableSelection: selectedNodes.some((node) => canDirectMoveNode(node)),
       hasRotatableSelection: selectedNodes.some((node) => canDirectRotateNode(node)),
+      hasOpeningRadiusSelection,
       commandPressed: modifiers.command,
       shiftPressed: modifiers.shift,
       mepSelection,
@@ -211,15 +218,16 @@ export function HelperManager() {
   // tools — editor shortcut hints would only mislead there.
   if (workspaceMode === 'studio') return null
 
-  // Rotating a node (or a multi-selection group) via its in-world gizmo:
-  // advertise Shift = free rotation, the same angle-step bypass wall drafting
-  // exposes. Takes priority over the idle select-mode hints since a handle
-  // drag is the active interaction.
   if (
     activeHandleDrag?.label === ROTATE_HANDLE_DRAG_LABEL ||
     activeHandleDrag?.label === GROUP_ROTATE_DRAG_LABEL
   ) {
-    return <ContextualHelperPanel hints={resolveRotateHandleHelpHints(modifiers.shift)} />
+    return (
+      <ContextualHelperPanel
+        hints={resolveRotateHandleHelpHints(modifiers.alt)}
+        snapContext={snapContext}
+      />
+    )
   }
 
   // Group-move drag / pick-up: the drag resolves to the 'item' snap context
@@ -254,6 +262,15 @@ export function HelperManager() {
   // before the select branch so the idle "drag selected / add objects" hints
   // never leak over an in-progress reshape — and it gets its own snapping chip.
   if (scope.kind === 'reshaping') {
+    // A kind's own reshape brings its hints (`def.affordanceHints[reshape]`).
+    const hints = reshapingNode
+      ? nodeRegistry.get(reshapingNode.type)?.affordanceHints?.[scope.reshape]
+      : undefined
+    if (hints) {
+      return (
+        <RegisteredToolHelper hints={hints} shiftPressed={modifiers.shift} snapContext={snapContext} />
+      )
+    }
     return <ContextualHelperPanel hints={reshapingHints(scope.reshape)} snapContext={snapContext} />
   }
 
@@ -297,6 +314,7 @@ export function HelperManager() {
     return <ContextualHelperPanel hints={contextualEditHints} snapContext={snapContext} />
   }
 
+
   // Idle select only — an active scope (handle-drag, box-select, …) must not show
   // the idle selection hints.
   if (mode === 'select' && scope.kind === 'idle') {

package/src/components/ui/helpers/registered-tool-helper.tsx

@@ -1,8 +1,7 @@
 import type { ToolHint } from '@pascal-app/core'
-import { useMemo, useSyncExternalStore } from 'react'
 import type { ContinuationContext } from '../../../lib/continuation'
 import type { SnapContext } from '../../../lib/snapping-mode'
-import useEditor from '../../../store/use-editor'
+import { useVisibleToolHints } from '../../../lib/panel-tool-options'
 import { ContextualHelperPanel } from './contextual-helper-panel'
 
 /**
@@ -25,36 +24,7 @@ export function RegisteredToolHelper({
   snapContext?: SnapContext | null
   continuationContext?: ContinuationContext | null
 }) {
-  // Live vertex count of an in-progress polygon draft, so hints gated on a
-  // minimum (e.g. "Finish" at ≥ 3) only appear once they're actually possible.
-  const draftVertexCount = useEditor((s) => s.draftVertexCount)
-  const visibilityStore = useMemo(
-    () => ({
-      subscribe: (onChange: () => void) => {
-        const unsubscribers = hints.flatMap((hint) =>
-          hint.visible ? [hint.visible.subscribe(onChange)] : [],
-        )
-        return () => {
-          for (const unsubscribe of unsubscribers) unsubscribe()
-        }
-      },
-      getSnapshot: () => hints.map((hint) => (hint.visible?.value() === false ? '0' : '1')).join(''),
-    }),
-    [hints],
-  )
-  useSyncExternalStore(
-    visibilityStore.subscribe,
-    visibilityStore.getSnapshot,
-    visibilityStore.getSnapshot,
-  )
-  // Some hints are replaced by live contextual chips, so keep the generic
-  // registry renderer from duplicating stale/static versions.
-  const visible = hints.filter(
-    (hint) =>
-      !(hint.key === 'Shift' && hint.label === 'Cycle snapping mode') &&
-      hint.visible?.value() !== false &&
-      (hint.minDraftVertices == null || draftVertexCount >= hint.minDraftVertices),
-  )
+  const visible = useVisibleToolHints(hints)
   if (visible.length === 0 && !snapContext && !continuationContext) return null
   // Hints carrying a live-state `chip` render as mode chips next to the
   // snapping / continuation rows; the rest stay static key rows.

package/src/components/ui/item-catalog/item-catalog.tsx

@@ -1,13 +1,13 @@
 'use client'
 
 import type { AssetInput } from '@pascal-app/core'
-import { resolveCdnUrl, useViewer } from '@pascal-app/viewer'
+import { resolveCdnUrl } from '@pascal-app/viewer'
 import { useEffect } from 'react'
 import { triggerSFX } from './../../../lib/sfx-bus'
 import { cn } from './../../../lib/utils'
 import useEditor, { type CatalogCategory } from './../../../store/use-editor'
 import { resolveAssetSnapTarget, SnapTargetBadge } from '../snap-target-badge'
-import { CATALOG_ITEMS, type CatalogItem } from './catalog-items'
+import { activateCatalogItem, filterCatalogItems, isCatalogItemSelected } from '../../../lib/catalog-panel-model'
 
 export function ItemCatalog({
   category,
@@ -32,26 +32,7 @@ export function ItemCatalog({
   emptyState?: React.ReactNode
 }) {
   const selectedItem = useEditor((state) => state.selectedItem)
-  const setSelectedItem = useEditor((state) => state.setSelectedItem)
-  const setMode = useEditor((state) => state.setMode)
-  const setTool = useEditor((state) => state.setTool)
-
-  const sourceItems: CatalogItem[] = itemsOverride ?? CATALOG_ITEMS
-  // Server-provided results bypass all local filtering; otherwise filter by category/search/tags
-  const filteredItems: CatalogItem[] =
-    overrideItems ??
-    (() => {
-      const categoryItems = search
-        ? sourceItems
-        : sourceItems.filter((item) => item.category === category)
-      return categoryItems.filter((item) => {
-        const tags = item.tags ?? []
-        if (activePlacementTag && !tags.includes(activePlacementTag)) return false
-        if (activeFunctionalTag && !tags.includes(activeFunctionalTag)) return false
-        if (search && !item.name.toLowerCase().includes(search.toLowerCase())) return false
-        return true
-      })
-    })()
+  const filteredItems = filterCatalogItems({ category, items: itemsOverride, overrideItems, search, activePlacementTag, activeFunctionalTag })
 
   if (filteredItems.length === 0 && emptyState) {
     return <>{emptyState}</>
@@ -64,7 +45,7 @@ export function ItemCatalog({
     >
       {leadingTile}
       {filteredItems.map((item, index) => {
-        const isSelected = selectedItem?.src === item?.src
+        const isSelected = isCatalogItemSelected(item, selectedItem)
         const snapTarget = resolveAssetSnapTarget(item?.attachTo)
         return (
           <button
@@ -75,13 +56,7 @@ export function ItemCatalog({
             key={index}
             onClick={() => {
               triggerSFX('sfx:menu-click')
-              // Drop the current selection before arming placement — keeping
-              // it would route shortcuts (rotate & co) to both the ghost and
-              // the selected node.
-              useViewer.getState().setSelection({ selectedIds: [], zoneId: null })
-              setSelectedItem(item)
-              setTool(item.tool ?? 'item')
-              setMode('build')
+              activateCatalogItem(item)
             }}
             onMouseEnter={() => triggerSFX('sfx:menu-hover')}
             type="button"

package/src/components/ui/panels/multi-height-mode.tsx

@@ -58,6 +58,32 @@ function ceilingCustomHeight(node: CeilingNode, nodes: Record<string, AnyNode>):
   return Math.min(resolved, max)
 }
 
+export function applyMultiHeightMode(
+  nodeIds: AnyNodeId[],
+  next: 'storey' | 'custom',
+  parametrics: ParametricDescriptor<AnyNode>,
+) {
+  const nodes = useScene.getState().nodes as Record<string, AnyNode>
+  commitMultiNodeFields(
+    nodeIds,
+    (node) => {
+      const isCustom = (node as { height?: number }).height != null
+      if (next === 'custom') {
+        if (isCustom) return {}
+        if (node.type === 'ceiling') return { height: ceilingCustomHeight(node, nodes) }
+        if (node.type === 'wall') {
+          return { height: Math.max(0.1, getWallEffectiveHeightForNodes(node, nodes)) }
+        }
+        return {}
+      }
+      if (!isCustom) return {}
+      if (node.type === 'wall') return wallFollowsLevelPatch(node, nodes)
+      return { height: undefined }
+    },
+    parametrics,
+  )
+}
+
 export function MultiHeightModeField({
   nodeIds,
   nodeType,
@@ -97,27 +123,7 @@ export function MultiHeightModeField({
 
   const applyMode = useCallback(
     (next: 'storey' | 'custom') => {
-      const nodes = useScene.getState().nodes as Record<string, AnyNode>
-      commitMultiNodeFields(
-        nodeIds,
-        (node) => {
-          const isCustom = (node as { height?: number }).height != null
-          if (next === 'custom') {
-            if (isCustom) return {}
-            if (node.type === 'ceiling') {
-              return { height: ceilingCustomHeight(node, nodes) }
-            }
-            if (node.type === 'wall') {
-              return { height: Math.max(0.1, getWallEffectiveHeightForNodes(node, nodes)) }
-            }
-            return {}
-          }
-          if (!isCustom) return {}
-          if (node.type === 'wall') return wallFollowsLevelPatch(node, nodes)
-          return { height: undefined }
-        },
-        parametrics,
-      )
+      applyMultiHeightMode(nodeIds, next, parametrics)
     },
     [nodeIds, parametrics],
   )

package/src/components/ui/panels/multi-parametric-inspector.tsx

@@ -72,8 +72,9 @@ export function MultiParametricInspector({ footer }: { footer?: React.ReactNode
       )}
       {parametrics.groups.map((group, gi) => (
         <MultiGroupFields
+          defaultExpanded={group.defaultExpanded}
           fields={group.fields as ParamField<AnyNode>[]}
-          key={`group-${gi}`}
+          key={`${nodeType}-${group.label}-${gi}`}
           nodeIds={nodeIds}
           nodeType={nodeType}
           parametrics={parametrics}
@@ -88,12 +89,14 @@ export function MultiParametricInspector({ footer }: { footer?: React.ReactNode
 }
 
 function MultiGroupFields({
+  defaultExpanded,
   title,
   fields,
   nodeIds,
   nodeType,
   parametrics,
 }: {
+  defaultExpanded?: boolean
   title: string
   fields: ParamField<AnyNode>[]
   nodeIds: AnyNodeId[]
@@ -108,7 +111,7 @@ function MultiGroupFields({
   )
   if (genericFields.length === 0 || !anyVisible) return null
   return (
-    <PanelSection title={title}>
+    <PanelSection defaultExpanded={defaultExpanded} title={title}>
       {genericFields.map((field, fi) => {
         if (
           String(field.key) === 'height' &&
@@ -254,7 +257,7 @@ function MultiVec3Field({
             restoreOnCommit={false}
             step={0.05}
             unit="m"
-            value={Math.round(axisValue * 100) / 100}
+            value={axisValue}
           />
         )
       })}

package/src/components/ui/panels/parametric-field-control.tsx

@@ -159,7 +159,7 @@ export function ParametricFieldControl({
                 restoreOnCommit={!onCommit}
                 step={0.05}
                 unit="m"
-                value={Math.round(axisValue * 100) / 100}
+                value={axisValue}
               />
             )
           })}

package/src/components/ui/panels/parametric-inspector.tsx

@@ -15,6 +15,7 @@ import { Icon } from '@iconify/react'
 import { Move, Trash2 } from 'lucide-react'
 import { type ComponentType, lazy, Suspense, useCallback } from 'react'
 import { resolveMoveActionNode } from '../../../lib/direct-manipulation'
+import { commitParametricNodeFields } from '../../../lib/parametric-node-update'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import { collectZoneContentIds } from '../../../lib/zone-content'
 import useEditor from '../../../store/use-editor'
@@ -61,22 +62,9 @@ export function ParametricInspector({
   const handleUpdate = useCallback(
     (patch: Partial<AnyNode>) => {
       if (!selectedId) return
-      const scene = useScene.getState()
-      const node = scene.nodes[selectedId]
-      if (parametrics?.derive && node) {
-        const next = { ...node, ...patch } as AnyNode
-        patch = { ...patch, ...parametrics.derive(next, patch, node as AnyNode) }
-      }
-      // Bundle the edited node + any reconcile follow-ups into ONE
-      // updateNodes call so a single inspector edit is a single undo step.
-      const updates: { id: AnyNodeId; data: Partial<AnyNode> }[] = [{ id: selectedId, data: patch }]
-      if (parametrics?.reconcile && node) {
-        const next = { ...node, ...patch } as AnyNode
-        updates.push(...parametrics.reconcile(node as AnyNode, next))
-      }
-      scene.updateNodes(updates)
+      commitParametricNodeFields(selectedId, patch)
     },
-    [selectedId, parametrics],
+    [selectedId],
   )
 
   const clearSelection = useCallback(() => {
@@ -157,7 +145,11 @@ export function ParametricInspector({
       width={320}
     >
       {parametrics.groups.map((group, gi) => (
-        <PanelSection key={`group-${gi}`} title={group.label}>
+        <PanelSection
+          defaultExpanded={group.defaultExpanded}
+          key={`${nodeType}-${group.label}-${gi}`}
+          title={group.label}
+        >
           {group.fields.map((field, fi) => (
             <FieldRenderer
               key={`field-${gi}-${fi}-${String(field.key)}`}
@@ -175,7 +167,7 @@ export function ParametricInspector({
       )}
       {(canMove || canDelete || (parametrics.actions && parametrics.actions.length > 0)) && (
         <PanelSection title="Actions">
-          <ActionGroup className={isZone ? 'flex-col' : undefined}>
+          <ActionGroup className={isZone ? 'flex-col' : parametrics.actions?.length ? 'grid grid-cols-2 gap-2' : undefined}>
             {canMove && (
               <ActionButton icon={<Move className="h-4 w-4" />} label="Move" onClick={handleMove} />
             )}

package/src/components/ui/panels/reference-panel.tsx

@@ -376,7 +376,7 @@ export function ReferencePanel() {
           precision={2}
           step={0.1}
           unit="m"
-          value={Math.round(node.position[0] * 100) / 100}
+          value={node.position[0]}
         />
         <SliderControl
           label={
@@ -394,7 +394,7 @@ export function ReferencePanel() {
           precision={2}
           step={0.1}
           unit="m"
-          value={Math.round(node.position[1] * 100) / 100}
+          value={node.position[1]}
         />
         <SliderControl
           label={
@@ -412,7 +412,7 @@ export function ReferencePanel() {
           precision={2}
           step={0.1}
           unit="m"
-          value={Math.round(node.position[2] * 100) / 100}
+          value={node.position[2]}
         />
       </PanelSection>
 

package/src/components/ui/primitives/checkbox.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { Check } from 'lucide-react'
+import type { ButtonHTMLAttributes } from 'react'
+import { cn } from './../../../lib/utils'
+
+interface CheckboxProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
+}
+
+export function Checkbox({ checked, onCheckedChange, className, ...props }: CheckboxProps) {
+  return (
+    <button
+      aria-checked={checked}
+      className={cn(
+        'flex h-3.5 w-3.5 shrink-0 cursor-pointer items-center justify-center rounded-[4px] border transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring',
+        checked
+          ? 'border-primary bg-primary text-primary-foreground'
+          : 'border-border bg-background/60 text-transparent hover:border-foreground/40',
+        className,
+      )}
+      role="checkbox"
+      type="button"
+      {...props}
+      onClick={(event) => {
+        event.stopPropagation()
+        onCheckedChange(!checked)
+      }}
+    >
+      <Check className="h-2.5 w-2.5" strokeWidth={3} />
+    </button>
+  )
+}

package/src/components/ui/primitives/shortcut-token.tsx

@@ -20,6 +20,10 @@ const MOUSE_SHORTCUTS = {
     icon: 'ph:mouse-right-click-fill',
     label: 'Right click',
   },
+  Scroll: {
+    icon: 'ph:mouse-scroll-fill',
+    label: 'Scroll',
+  },
 } as const
 
 // The platform-agnostic command modifier. Both Cmd and Ctrl bind the action; we

package/src/components/ui/sidebar/panels/settings-panel/audio-settings-dialog.tsx

@@ -28,12 +28,12 @@ export function AudioSettingsDialog() {
       <DialogTrigger asChild>
         <Button className="w-full justify-start gap-2" variant="outline">
           {muted ? <VolumeX className="size-4" /> : <Volume2 className="size-4" />}
-          Audio Settings
+          Audio settings
         </Button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
-          <DialogTitle>Audio Settings</DialogTitle>
+          <DialogTitle>Audio settings</DialogTitle>
           <DialogDescription>Adjust volume levels and mute settings</DialogDescription>
         </DialogHeader>
         <div className="space-y-6 py-4">