@pascal-app/editor 1.0.0-beta.4 → 1.0.0

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

@@ -0,0 +1,173 @@
+'use client'
+
+import type { AnyNode, ParamField } from '@pascal-app/core'
+import { SegmentedControl } from '../controls/segmented-control'
+import { SliderControl } from '../controls/slider-control'
+import { ToggleControl } from '../controls/toggle-control'
+import { precisionForStep, prettifyEnumValue, prettifyKey } from './parametric-field-utils'
+
+interface ParametricFieldControlProps {
+  field: ParamField<AnyNode>
+  value: unknown
+  mixed?: boolean
+  onChange: (patch: Partial<AnyNode>) => void
+  onCommit?: (patch: Partial<AnyNode>) => void
+}
+
+export function ParametricFieldControl({
+  field,
+  value,
+  mixed = false,
+  onChange,
+  onCommit,
+}: ParametricFieldControlProps) {
+  const key = String(field.key)
+
+  switch (field.kind) {
+    case 'number': {
+      const num = typeof value === 'number' ? value : 0
+      const step = field.step ?? 0.01
+      const precision = precisionForStep(step)
+      return (
+        <SliderControl
+          label={prettifyKey(key)}
+          max={field.max}
+          min={field.min}
+          mixed={mixed}
+          onChange={(next) => onChange({ [key]: next } as Partial<AnyNode>)}
+          onCommit={onCommit ? (next) => onCommit({ [key]: next } as Partial<AnyNode>) : undefined}
+          precision={precision}
+          restoreOnCommit={!onCommit}
+          step={step}
+          unit={field.unit ?? ''}
+          value={num}
+        />
+      )
+    }
+
+    case 'boolean': {
+      const checked = !mixed && value === true
+      return (
+        <ToggleControl
+          checked={checked}
+          label={prettifyKey(key)}
+          mixed={mixed}
+          onChange={(next) => {
+            const patch = { [key]: next } as Partial<AnyNode>
+            onChange(patch)
+            onCommit?.(patch)
+          }}
+        />
+      )
+    }
+
+    case 'enum': {
+      const str = typeof value === 'string' ? value : (field.options[0] ?? '')
+      const apply = (next: string) => {
+        const patch = { [key]: next } as Partial<AnyNode>
+        onChange(patch)
+        onCommit?.(patch)
+      }
+      if (field.display === 'segmented') {
+        return (
+          <SegmentedControl
+            mixed={mixed}
+            onChange={apply}
+            options={field.options.map((opt) => ({ label: prettifyEnumValue(opt), value: opt }))}
+            value={str}
+          />
+        )
+      }
+      return (
+        <div className="flex items-center justify-between px-3 py-2">
+          <span className="text-foreground/80 text-xs">{prettifyKey(key)}</span>
+          <select
+            className="rounded-md border border-border/50 bg-[#2C2C2E] px-2 py-1 text-foreground text-xs focus:outline-none focus:ring-1 focus:ring-foreground/30"
+            onChange={(e) => apply(e.target.value)}
+            value={mixed ? '' : str}
+          >
+            {mixed && (
+              <option disabled value="">
+                Mixed
+              </option>
+            )}
+            {field.options.map((opt) => (
+              <option key={opt} value={opt}>
+                {prettifyEnumValue(opt)}
+              </option>
+            ))}
+          </select>
+        </div>
+      )
+    }
+
+    case 'color': {
+      const str = typeof value === 'string' ? value : '#888888'
+      const apply = (next: string) => {
+        const patch = { [key]: next } as Partial<AnyNode>
+        onChange(patch)
+        onCommit?.(patch)
+      }
+      return (
+        <div className="flex items-center justify-between px-3 py-2">
+          <span className="text-foreground/80 text-xs">{prettifyKey(key)}</span>
+          <div className="flex items-center gap-2">
+            <input
+              className="h-6 w-8 cursor-pointer rounded border border-border/50 bg-transparent"
+              onChange={(e) => apply(e.target.value)}
+              type="color"
+              value={str}
+            />
+            <input
+              className="w-20 rounded-md border border-border/50 bg-[#2C2C2E] px-2 py-1 text-foreground text-xs focus:outline-none focus:ring-1 focus:ring-foreground/30"
+              onChange={(e) => apply(e.target.value)}
+              type="text"
+              value={mixed ? 'Mixed' : str}
+            />
+          </div>
+        </div>
+      )
+    }
+
+    case 'vec3': {
+      const v =
+        Array.isArray(value) && value.length >= 3
+          ? (value as [number, number, number])
+          : ([0, 0, 0] as [number, number, number])
+      const axes: Array<{ label: string; index: 0 | 1 | 2 }> = [
+        { label: 'X', index: 0 },
+        { label: 'Y', index: 1 },
+        { label: 'Z', index: 2 },
+      ]
+      return (
+        <>
+          {axes.map(({ label, index }) => {
+            const axisValue = v[index] ?? 0
+            const apply = (next: number): Partial<AnyNode> => {
+              const updated = [...v] as [number, number, number]
+              updated[index] = next
+              return { [key]: updated } as Partial<AnyNode>
+            }
+            return (
+              <SliderControl
+                key={`${key}-${label}`}
+                label={label}
+                mixed={mixed}
+                onChange={(next) => onChange(apply(next))}
+                onCommit={onCommit ? (next) => onCommit(apply(next)) : undefined}
+                precision={2}
+                restoreOnCommit={!onCommit}
+                step={0.05}
+                unit="m"
+                value={Math.round(axisValue * 100) / 100}
+              />
+            )
+          })}
+        </>
+      )
+    }
+
+    default:
+      return null
+  }
+}

package/src/components/ui/panels/parametric-field-utils.ts

@@ -0,0 +1,18 @@
+export function precisionForStep(step: number): number {
+  if (step <= 0) return 0
+  return Math.max(0, Math.ceil(-Math.log10(step)))
+}
+
+export function prettifyKey(key: string): string {
+  const spaced = key.replace(/([A-Z])/g, ' $1').toLowerCase()
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1)
+}
+
+export function prettifyEnumValue(value: string): string {
+  return value
+    .split(/[-_\s]/)
+    .map((word, i) =>
+      i === 0 ? word.charAt(0).toUpperCase() + word.slice(1) : word.toLowerCase(),
+    )
+    .join(' ')
+}

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

@@ -20,9 +20,7 @@ import { collectZoneContentIds } from '../../../lib/zone-content'
 import useEditor from '../../../store/use-editor'
 import { ActionButton, ActionGroup } from '../controls/action-button'
 import { PanelSection } from '../controls/panel-section'
-import { SegmentedControl } from '../controls/segmented-control'
-import { SliderControl } from '../controls/slider-control'
-import { ToggleControl } from '../controls/toggle-control'
+import { ParametricFieldControl } from './parametric-field-control'
 import { InspectorFooterContext, PanelWrapper } from './panel-wrapper'
 
 /**
@@ -67,7 +65,7 @@ export function ParametricInspector({
       const node = scene.nodes[selectedId]
       if (parametrics?.derive && node) {
         const next = { ...node, ...patch } as AnyNode
-        patch = { ...patch, ...parametrics.derive(next, patch) }
+        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.
@@ -133,7 +131,7 @@ export function ParametricInspector({
     return (
       <InspectorFooterContext.Provider value={footer}>
         <Suspense fallback={null}>
-          <CustomPanel />
+          <CustomPanelSlot Component={CustomPanel} nodeId={selectedId} />
         </Suspense>
       </InspectorFooterContext.Provider>
     )
@@ -172,7 +170,7 @@ export function ParametricInspector({
       ))}
       {TrailingSection && (
         <Suspense fallback={null}>
-          <TrailingSection />
+          <CustomPanelSlot Component={TrailingSection} nodeId={selectedId} />
         </Suspense>
       )}
       {(canMove || canDelete || (parametrics.actions && parametrics.actions.length > 0)) && (
@@ -272,14 +270,31 @@ function renderIcon(ref: IconRef | undefined): React.ReactNode | undefined {
 
 // Cache lazy custom panel components by their loader so React.lazy isn't
 // re-invoked across renders.
-const customPanelCache = new WeakMap<() => Promise<unknown>, ComponentType>()
+const customPanelCache = new WeakMap<() => Promise<unknown>, ComponentType<{ node: AnyNode }>>()
 
-function resolveCustomPanel(loader: () => Promise<{ default: ComponentType<any> }>): ComponentType {
+function resolveCustomPanel(
+  loader: () => Promise<{ default: ComponentType<any> }>,
+): ComponentType<{ node: AnyNode }> {
   const cached = customPanelCache.get(loader)
   if (cached) return cached
   const Comp = lazy(loader)
-  customPanelCache.set(loader, Comp as ComponentType)
-  return Comp as ComponentType
+  customPanelCache.set(loader, Comp as ComponentType<{ node: AnyNode }>)
+  return Comp as ComponentType<{ node: AnyNode }>
+}
+
+// Subscribe to the full node only where the custom panel contract needs it.
+// Keeping this below ParametricInspector preserves the inspector's narrow
+// per-field subscriptions while ensuring lazy panels receive their live node.
+function CustomPanelSlot({
+  Component,
+  nodeId,
+}: {
+  Component: ComponentType<{ node: AnyNode }>
+  nodeId: AnyNodeId
+}) {
+  const node = useScene((s) => s.nodes[nodeId])
+  if (!node) return null
+  return <Component node={node as AnyNode} />
 }
 
 // ─── Per-field renderers ─────────────────────────────────────────────
@@ -311,136 +326,11 @@ function FieldRenderer({ field, nodeId, onUpdate }: FieldRendererProps) {
   })
   if (!visible) return null
 
-  switch (field.kind) {
-    case 'number': {
-      const num = typeof value === 'number' ? value : 0
-      const step = field.step ?? 0.01
-      const precision = precisionForStep(step)
-      return (
-        <SliderControl
-          label={prettifyKey(key)}
-          max={field.max}
-          min={field.min}
-          onChange={(next) => onUpdate({ [key]: next } as Partial<AnyNode>)}
-          precision={precision}
-          step={step}
-          unit={field.unit ?? ''}
-          value={num}
-        />
-      )
-    }
-
-    case 'boolean': {
-      const checked = value === true
-      return (
-        <ToggleControl
-          checked={checked}
-          label={prettifyKey(key)}
-          onChange={(next) => onUpdate({ [key]: next } as Partial<AnyNode>)}
-        />
-      )
-    }
-
-    case 'enum': {
-      const str = typeof value === 'string' ? value : (field.options[0] ?? '')
-      if (field.display === 'segmented') {
-        return (
-          <SegmentedControl
-            onChange={(next) => onUpdate({ [key]: next } as Partial<AnyNode>)}
-            options={field.options.map((opt) => ({ label: prettifyEnumValue(opt), value: opt }))}
-            value={str}
-          />
-        )
-      }
-      return (
-        <div className="flex items-center justify-between px-3 py-2">
-          <span className="text-foreground/80 text-xs">{prettifyKey(key)}</span>
-          <select
-            className="rounded-md border border-border/50 bg-[#2C2C2E] px-2 py-1 text-foreground text-xs focus:outline-none focus:ring-1 focus:ring-foreground/30"
-            onChange={(e) => onUpdate({ [key]: e.target.value } as Partial<AnyNode>)}
-            value={str}
-          >
-            {field.options.map((opt) => (
-              <option key={opt} value={opt}>
-                {prettifyEnumValue(opt)}
-              </option>
-            ))}
-          </select>
-        </div>
-      )
-    }
-
-    case 'color': {
-      const str = typeof value === 'string' ? value : '#888888'
-      return (
-        <div className="flex items-center justify-between px-3 py-2">
-          <span className="text-foreground/80 text-xs">{prettifyKey(key)}</span>
-          <div className="flex items-center gap-2">
-            <input
-              className="h-6 w-8 cursor-pointer rounded border border-border/50 bg-transparent"
-              onChange={(e) => onUpdate({ [key]: e.target.value } as Partial<AnyNode>)}
-              type="color"
-              value={str}
-            />
-            <input
-              className="w-20 rounded-md border border-border/50 bg-[#2C2C2E] px-2 py-1 text-foreground text-xs focus:outline-none focus:ring-1 focus:ring-foreground/30"
-              onChange={(e) => onUpdate({ [key]: e.target.value } as Partial<AnyNode>)}
-              type="text"
-              value={str}
-            />
-          </div>
-        </div>
-      )
-    }
-
-    case 'vec3': {
-      const v = Array.isArray(value) && value.length >= 3
-        ? (value as [number, number, number])
-        : [0, 0, 0]
-      const axes: Array<{ label: string; index: 0 | 1 | 2 }> = [
-        { label: 'X', index: 0 },
-        { label: 'Y', index: 1 },
-        { label: 'Z', index: 2 },
-      ]
-      return (
-        <>
-          {axes.map(({ label, index }) => {
-            // v is a [number, number, number] tuple; the explicit local
-            // resolves TS's noUncheckedIndexedAccess concern that v[index]
-            // could be undefined.
-            const axisValue = v[index] ?? 0
-            return (
-              <SliderControl
-                key={`${key}-${label}`}
-                label={label}
-                max={axisValue + 5}
-                min={axisValue - 5}
-                onChange={(next) => {
-                  const updated = [...v] as [number, number, number]
-                  updated[index] = next
-                  onUpdate({ [key]: updated } as Partial<AnyNode>)
-                }}
-                precision={2}
-                step={0.05}
-                unit="m"
-                value={Math.round(axisValue * 100) / 100}
-              />
-            )
-          })}
-        </>
-      )
-    }
-
-    case 'custom':
-      // The field owns its rendering and update logic — used for
-      // derived values (length from start/end), dynamic-bounded
-      // sliders (curve sagitta), composed editors.
-      return <CustomFieldRenderer Comp={field.component} nodeId={nodeId} onUpdate={onUpdate} />
-
-    default:
-      // material / ref / unrecognized kinds — not implemented in v1.
-      return null
+  if (field.kind === 'custom') {
+    return <CustomFieldRenderer Comp={field.component} nodeId={nodeId} onUpdate={onUpdate} />
   }
+
+  return <ParametricFieldControl field={field} onChange={onUpdate} value={value} />
 }
 
 function CustomFieldRenderer({
@@ -459,26 +349,3 @@ function CustomFieldRenderer({
   if (!node) return null
   return <Comp node={node} onUpdate={onUpdate} />
 }
-
-// ─── helpers ─────────────────────────────────────────────────────────
-
-function precisionForStep(step: number): number {
-  if (step <= 0) return 0
-  return Math.max(0, Math.ceil(-Math.log10(step)))
-}
-
-function prettifyKey(key: string): string {
-  // 'bracketStyle' → 'Bracket style'
-  const spaced = key.replace(/([A-Z])/g, ' $1').toLowerCase()
-  return spaced.charAt(0).toUpperCase() + spaced.slice(1)
-}
-
-function prettifyEnumValue(value: string): string {
-  // 'minimal' → 'Minimal'; 'roof-segment' → 'Roof segment'
-  return value
-    .split(/[-_\s]/)
-    .map((word, i) =>
-      i === 0 ? word.charAt(0).toUpperCase() + word.slice(1) : word.toLowerCase(),
-    )
-    .join(' ')
-}

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

@@ -13,6 +13,7 @@ import {
   EyeOff,
   LocateFixed,
   Lock,
+  Move,
   RotateCcw,
   Ruler,
   Trash2,
@@ -144,6 +145,12 @@ export function ReferencePanel() {
     guideEmitter.emit('guide:cancel-reference-scale')
   }, [])
 
+  const handleMoveScan = useCallback(() => {
+    if (node?.type !== 'scan') return
+    useEditor.getState().setMovingNode(node as never)
+    setSelectedReferenceId(null)
+  }, [node, setSelectedReferenceId])
+
   useEffect(() => {
     if (node?.type !== 'guide' || !node.url.startsWith('asset://')) {
       setIsAssetMissing(false)
@@ -172,7 +179,7 @@ export function ReferencePanel() {
   return (
     <PanelWrapper
       onClose={handleClose}
-      title={node.name || (isScan ? '3D Scan' : 'Guide Image')}
+      title={node.name || (isScan ? 'Capture' : 'Guide Image')}
       width={300}
     >
       {!isScan && (
@@ -329,6 +336,29 @@ export function ReferencePanel() {
         </>
       )}
 
+      {isScan && (
+        <PanelSection title="Capture">
+          <ActionGroup>
+            <ActionButton
+              icon={<Move className="h-3.5 w-3.5" />}
+              label="Move"
+              onClick={handleMoveScan}
+            />
+            <ActionButton
+              icon={
+                node.visible === false ? (
+                  <EyeOff className="h-3.5 w-3.5" />
+                ) : (
+                  <Eye className="h-3.5 w-3.5" />
+                )
+              }
+              label={node.visible === false ? 'Show' : 'Hide'}
+              onClick={() => handleUpdate({ visible: node.visible === false })}
+            />
+          </ActionGroup>
+        </PanelSection>
+      )}
+
       <PanelSection title="Position">
         <SliderControl
           label={

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

@@ -33,6 +33,28 @@ const COMMAND_VALUES = new Set(['Cmd/Ctrl', 'Cmd', 'Command', 'Meta'])
 const IS_MAC =
   typeof navigator !== 'undefined' && navigator.platform.toUpperCase().includes('MAC')
 
+// Keys whose printed name and their symbol differ. Kept beside the token rather
+// than in any one consumer so every surface that prints a shortcut — the
+// Keyboard Shortcuts dialog, the community getting-started guide — resolves the
+// same glyph for the same key.
+//
+// Only symbols people actually read are listed. The arrows are unambiguous, and
+// ⌘ is printed on the key it means. The rest are not: ⎋, ␣ and ⌫ are typographic
+// conventions that no keyboard prints, so they read as "some symbol" rather than
+// as Escape, Space and Delete. Those spell their names out instead — and for
+// Delete, the name the current platform actually puts on the keycap.
+const KEY_DISPLAY_MAP: Record<string, string> = {
+  'Arrow Down': '↓',
+  'Arrow Up': '↑',
+}
+
+/** The glyph to print for a shortcut key on the current platform. */
+function shortcutDisplayValue(value: string): string {
+  if (COMMAND_VALUES.has(value)) return IS_MAC ? '⌘' : 'Ctrl'
+  if (value === 'Delete / Backspace') return IS_MAC ? 'Delete' : 'Backspace'
+  return KEY_DISPLAY_MAP[value] ?? value
+}
+
 type ShortcutTokenProps = React.ComponentProps<'kbd'> & {
   value: string
   displayValue?: string
@@ -97,4 +119,4 @@ function ShortcutToken({ className, displayValue, value, ...props }: ShortcutTok
   )
 }
 
-export { ShortcutToken }
+export { ShortcutToken, shortcutDisplayValue }

package/src/components/ui/scene-loader.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import { cn } from '../../lib/utils'
+import { Button } from './primitives/button'
 
 const LOADERS = [
   'pascal-loader-1',
@@ -36,3 +37,37 @@ export function SceneLoader({ className, fullScreen = false }: SceneLoaderProps)
     </div>
   )
 }
+
+interface SceneLoadFailedProps {
+  className?: string
+  onRetry: () => void
+}
+
+/**
+ * Replaces the loader when the host could not deliver the scene. Rendered
+ * INSTEAD of falling back to an empty default scene: a session that shows
+ * scaffold nodes after a failed load autosaves that scaffold over the real
+ * project (prod scene-wipe class, 2026-09-02).
+ */
+export function SceneLoadFailed({ className, onRetry }: SceneLoadFailedProps) {
+  return (
+    <div
+      className={cn(
+        'z-100 flex flex-col items-center justify-center gap-4 bg-background/90 px-6 text-center backdrop-blur-md',
+        'absolute inset-0',
+        className,
+      )}
+      role="alert"
+    >
+      <div className="flex flex-col gap-1">
+        <p className="font-medium text-foreground text-sm">This project couldn't be loaded</p>
+        <p className="text-muted-foreground text-sm">
+          Nothing was changed. Check your connection and try again.
+        </p>
+      </div>
+      <Button className="rounded-full" onClick={onRetry} size="sm" type="button">
+        Try again
+      </Button>
+    </div>
+  )
+}

package/src/components/ui/sidebar/panels/items-panel/function-tree-panel.tsx

@@ -118,9 +118,14 @@ export function FunctionTreePanel({
     <div className="flex h-full flex-col">
       {/* Root nodes as a category grid — icon when available, otherwise a
           two-letter abbreviation, with the full name in a hover tooltip.
-          Mirrors the Build tab's tile grid so the two panels read the same. */}
+          Mirrors the Build tab's tile grid so the two panels read the same.
+
+          `functionTree` is embedder-supplied and unbounded, and these tiles are
+          `aspect-square`, so row count grows with it while the item list below is
+          the only scroller. Without the cap a large taxonomy pushes the list out
+          of the panel entirely and nothing can scroll it back. */}
       <TooltipProvider delayDuration={0} disableHoverableContent>
-        <div className="grid shrink-0 grid-cols-5 gap-1.5 border-border/70 border-b p-2">
+        <div className="grid max-h-[40%] shrink-0 grid-cols-5 gap-1.5 overflow-y-auto border-border/70 border-b p-2">
           {functionTree.map((root) => {
             const isActive = activeRoot?.slug === root.slug
             return (