@pascal-app/editor 1.0.0-beta.5 → 1.0.1

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>
     )
@@ -159,7 +157,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)}`}
@@ -172,12 +174,12 @@ export function ParametricInspector({
       ))}
       {TrailingSection && (
         <Suspense fallback={null}>
-          <TrailingSection />
+          <CustomPanelSlot Component={TrailingSection} nodeId={selectedId} />
         </Suspense>
       )}
       {(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} />
             )}
@@ -272,14 +274,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 +330,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 +353,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={
@@ -346,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={
@@ -364,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={
@@ -382,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

@@ -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>
+  )
+}