@pascal-app/editor 1.0.1 → 1.0.3

package/src/components/ui/controls/slider-control.tsx

@@ -11,6 +11,8 @@ interface SliderControlProps {
   value: number
   onChange: (value: number) => void
   onCommit?: (value: number) => void
+  onCancel?: () => void
+  previewWhileTyping?: boolean
   min?: number
   max?: number
   precision?: number
@@ -54,6 +56,8 @@ export function SliderControl({
   value,
   onChange,
   onCommit,
+  onCancel,
+  previewWhileTyping = false,
   min = Number.NEGATIVE_INFINITY,
   max = Number.POSITIVE_INFINITY,
   precision: storedPrecision = 0,
@@ -87,6 +91,9 @@ export function SliderControl({
     anchorValue: number
     stepMultiplier: number
   } | null>(null)
+  const cancelRef = useRef(onCancel)
+  cancelRef.current = onCancel
+  const editingRef = useRef(false)
   const labelRef = useRef<HTMLDivElement>(null)
   const shown = dragDisplay ?? value
   const valueRef = useRef(shown)
@@ -217,45 +224,74 @@ export function SliderControl({
     [onChange, onCommit, restoreOnCommit],
   )
 
+  const cancelEdit = useCallback(() => {
+    const drag = dragRef.current
+    dragRef.current = null
+    editingRef.current = false
+    if (drag) {
+      if (!onCancel) onChange(drag.originValue)
+      useScene.temporal.getState().resume()
+    }
+    onCancel?.()
+    setIsDragging(false)
+    setIsEditing(false)
+    setDragDisplay(null)
+  }, [onCancel, onChange])
+
+  useEffect(
+    () => () => {
+      if (dragRef.current) useScene.temporal.getState().resume()
+      if (dragRef.current || editingRef.current) cancelRef.current?.()
+    },
+    [],
+  )
+
+  useEffect(() => {
+    if (!isDragging) return
+    const escape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') cancelEdit()
+    }
+    window.addEventListener('keydown', escape)
+    return () => window.removeEventListener('keydown', escape)
+  }, [isDragging, cancelEdit])
+
   const handleValueClick = useCallback(() => {
+    editingRef.current = true
     setIsEditing(true)
     setInputValue(toDisplay(value).toFixed(precision))
   }, [value, precision, toDisplay])
 
+  const parseInputValue = useCallback(
+    (text: string) => {
+      const spec = lingoUnitSpec(unit)
+      const parsed = spec
+        ? parseMeasurement(text, spec, {
+            bareUnit: parseUnit ?? spec.unitId,
+            system: isImperial ? 'us' : 'metric',
+          })
+        : null
+      const bare = Number(text)
+      const stored = parsed ?? (text.trim() && Number.isFinite(bare) ? toStored(bare) : null)
+      return stored === null
+        ? null
+        : clamp(toStored(Number.parseFloat(toDisplay(stored).toFixed(precision))))
+    },
+    [unit, parseUnit, isImperial, toStored, clamp, toDisplay, precision],
+  )
+
   const submitValue = useCallback(() => {
-    const spec = lingoUnitSpec(unit)
-    let stored = spec
-      ? parseMeasurement(inputValue, spec, {
-          bareUnit: parseUnit ?? spec.unitId,
-          system: isImperial ? 'us' : 'metric',
-        })
-      : null
-    if (stored === null) {
-      // Fallback: a bare number typed in the DISPLAY unit → convert to stored.
-      const numValue = Number.parseFloat(inputValue)
-      stored = Number.isFinite(numValue) ? toStored(numValue) : null
-    }
-    if (stored === null) {
+    if (!editingRef.current) return
+    editingRef.current = false
+    const nextValue = parseInputValue(inputValue)
+    if (nextValue === null) {
+      onCancel?.()
       setInputValue(toDisplay(value).toFixed(precision))
     } else {
-      const nextValue = clamp(toStored(Number.parseFloat(toDisplay(stored).toFixed(precision))))
       onChange(nextValue)
       onCommit?.(nextValue)
     }
     setIsEditing(false)
-  }, [
-    inputValue,
-    unit,
-    isImperial,
-    parseUnit,
-    onChange,
-    onCommit,
-    clamp,
-    precision,
-    value,
-    toDisplay,
-    toStored,
-  ])
+  }, [inputValue, parseInputValue, onCancel, onChange, onCommit, toDisplay, value, precision])
 
   const spec = lingoUnitSpec(unit)
   const hint =
@@ -274,8 +310,7 @@ export function SliderControl({
       if (e.key === 'Enter') {
         submitValue()
       } else if (e.key === 'Escape') {
-        setInputValue(toDisplay(value).toFixed(precision))
-        setIsEditing(false)
+        cancelEdit()
       } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
         e.preventDefault()
         const direction = e.key === 'ArrowUp' ? 1 : -1
@@ -285,7 +320,7 @@ export function SliderControl({
         setInputValue(toDisplay(newV).toFixed(precision))
       }
     },
-    [submitValue, value, precision, step, applyDisplayDelta, onChange, toDisplay],
+    [submitValue, cancelEdit, value, precision, step, applyDisplayDelta, onChange, toDisplay],
   )
 
   const displayValue = toDisplay(shown)
@@ -309,6 +344,10 @@ export function SliderControl({
         onPointerDown={handleLabelPointerDown}
         onPointerMove={handleLabelPointerMove}
         onPointerUp={handleLabelPointerUp}
+        onPointerCancel={cancelEdit}
+        onLostPointerCapture={() => {
+          if (dragRef.current) cancelEdit()
+        }}
         ref={labelRef}
       >
         {/* Grip dots — 2×3 grid */}
@@ -340,7 +379,13 @@ export function SliderControl({
               autoFocus
               className="w-14 bg-transparent p-0 text-right font-mono text-foreground outline-none selection:bg-primary/30"
               onBlur={submitValue}
-              onChange={(e) => setInputValue(e.target.value)}
+              onChange={(e) => {
+                setInputValue(e.target.value)
+                if (previewWhileTyping) {
+                  const next = parseInputValue(e.target.value)
+                  if (next !== null) onChange(next)
+                }
+              }}
               onKeyDown={handleInputKeyDown}
               type="text"
               value={inputValue}

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/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(() => {

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">