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

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

@@ -8,7 +8,7 @@ import {
   useScene,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState, useSyncExternalStore } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import { useIsMobile } from '../../../hooks/use-mobile'
 import {
@@ -19,6 +19,7 @@ import {
   resolveRotateHandleHelpHints,
   resolveSelectModeHelpHints,
 } from '../../../lib/contextual-help'
+import { getContextualHelpNodeExtension } from '../../../lib/contextual-help-extension'
 import { continuationContextOf } from '../../../lib/continuation'
 import { canDirectMoveNode, canDirectRotateNode } from '../../../lib/direct-manipulation'
 import type { ReshapeKind } from '../../../lib/interaction/scope'
@@ -33,7 +34,6 @@ import { BuildingHelper } from './building-helper'
 import { ContextualHelperPanel } from './contextual-helper-panel'
 import { ItemHelper } from './item-helper'
 import { RegisteredToolHelper } from './registered-tool-helper'
-import { RoofHelper } from './roof-helper'
 
 // Reshaping a selected node's geometry (endpoint / curve / polygon corner). The
 // snapping chip is the main control; these just name the gesture + Esc.
@@ -88,6 +88,9 @@ type ActiveModifierKeys = {
   shift: boolean
 }
 
+const EMPTY_CONTEXTUAL_HINTS: ContextualShortcutHint[] = []
+const NO_CONTEXTUAL_HELP_SUBSCRIPTION = () => () => {}
+
 function useActiveModifierKeys(): ActiveModifierKeys {
   const [modifiers, setModifiers] = useState<ActiveModifierKeys>({
     command: false,
@@ -143,6 +146,21 @@ export function HelperManager() {
         .filter((node): node is AnyNode => node !== undefined),
     ),
   )
+  const contextualHelpNode =
+    scope.kind === 'mesh-editing'
+      ? selectedNodes.find((node) => node.id === scope.nodeId) ?? null
+      : null
+  const contextualHelpExtension = contextualHelpNode
+    ? getContextualHelpNodeExtension(nodeRegistry.get(contextualHelpNode.type))
+    : undefined
+  const contextualEditHints = useSyncExternalStore(
+    contextualHelpExtension?.subscribe ?? NO_CONTEXTUAL_HELP_SUBSCRIPTION,
+    () =>
+      contextualHelpNode
+        ? (contextualHelpExtension?.getHints(contextualHelpNode.id) ?? EMPTY_CONTEXTUAL_HINTS)
+        : EMPTY_CONTEXTUAL_HINTS,
+    () => EMPTY_CONTEXTUAL_HINTS,
+  )
   // The snapping context for whatever's active (wall / item / polygon) — drives
   // which snapping chips the HUD shows, derived once and shared by every branch.
   const snapContext = useMemo(
@@ -152,6 +170,10 @@ export function HelperManager() {
         mode,
         tool,
         profileOf: (typeOrTool) => nodeRegistry.get(typeOrTool)?.snapProfile,
+        profileOfNode: (nodeId) => {
+          const node = useScene.getState().nodes[nodeId as AnyNodeId]
+          return node ? nodeRegistry.get(node.type)?.snapProfile : undefined
+        },
         draftDirectionalOf: (typeOrTool) => nodeRegistry.get(typeOrTool)?.snapDraftDirectional ?? true,
       }),
     [scope, mode, tool],
@@ -212,6 +234,22 @@ export function HelperManager() {
     )
   }
 
+  // A single-node resize arrow is still an active snapping interaction. Roof
+  // width/depth handles opt into grid snapping, so keep the mode and grid-step
+  // controls visible for the whole drag instead of falling through to idle
+  // selection hints.
+  if (activeHandleDrag) {
+    return (
+      <ContextualHelperPanel
+        hints={[
+          { keys: ['Drag'], label: 'Resize' },
+          { keys: ['Esc'], label: 'Cancel' },
+        ]}
+        snapContext={snapContext}
+      />
+    )
+  }
+
   // Reshaping a node's geometry (endpoint / curve / polygon corner). Checked
   // 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.
@@ -227,13 +265,13 @@ export function HelperManager() {
     const movingContinuationContext = isFreshPlacementMetadata(movingNode.metadata)
       ? continuationContextOf(movingNode.type)
       : null
-    // Force-place only makes sense for kinds that collision-validate their drop;
-    // structural kinds (wall/slab/…) never reject, so don't advertise Alt.
+    const collisionValidatesDrop =
+      nodeRegistry.get(movingNode.type)?.capabilities.floorPlaced?.collides === true
     return (
       <ItemHelper
         continuationContext={movingContinuationContext}
         showEsc
-        showForce={nodeRegistry.get(movingNode.type)?.snapProfile !== 'structural'}
+        showForce={collisionValidatesDrop}
         snapContext={snapContext}
       />
     )
@@ -255,6 +293,10 @@ export function HelperManager() {
     return <ContextualHelperPanel hints={terrainSculptHints(terrainVerb, terrainSampling)} />
   }
 
+  if (scope.kind === 'mesh-editing') {
+    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') {
@@ -273,12 +315,6 @@ export function HelperManager() {
     )
   }
 
-  // Legacy fallback — only `roof` remains because it hasn't migrated to
-  // `def.tool` / `def.toolHints` yet (no Stage D port). Checked before the
-  // generic tool branch so the snap-context fallback below doesn't capture it
-  // and drop its bespoke `RoofHelper` hints. When roof migrates, this deletes.
-  if (tool === 'roof') return <RoofHelper snapContext={snapContext} />
-
   // Registry-first: a kind renders the generic `RegisteredToolHelper` when it
   // declares `def.toolHints`, OR whenever its draft resolves to a snap /
   // continuation context — so a snappable tool with NO hand-written hints (e.g.

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

@@ -6,7 +6,7 @@ interface ItemHelperProps {
   showEsc?: boolean
   snapContext?: SnapContext | null
   // Whether to advertise Alt = force-place. Only meaningful for kinds that
-  // collision-validate their drop (structural kinds never reject, so it's hidden).
+  // collision-validate their drop.
   showForce?: boolean
   // Set for a fresh point-kind placement (e.g. a positioned preset) so the
   // once/repeat continuation chip shows; null for an existing-node move.

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

@@ -1,4 +1,5 @@
 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'
@@ -27,11 +28,31 @@ export function RegisteredToolHelper({
   // 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),
   )
   if (visible.length === 0 && !snapContext && !continuationContext) return null

package/src/components/ui/panels/homogeneous-selection.test.ts

@@ -0,0 +1,80 @@
+import { describe, expect, test } from 'bun:test'
+import type { AnyNode, AnyNodeId } from '@pascal-app/core'
+import {
+  resolveHomogeneousSelection,
+  resolveUniqueSelectionIds,
+} from './homogeneous-selection'
+
+function node(
+  id: string,
+  type: string,
+  metadata?: Record<string, unknown>,
+): AnyNode {
+  return {
+    object: 'node',
+    id: id as AnyNodeId,
+    type,
+    parentId: null,
+    visible: true,
+    metadata: metadata ?? {},
+    children: [],
+  } as unknown as AnyNode
+}
+
+describe('resolveHomogeneousSelection', () => {
+  test('mixed selection is null', () => {
+    const nodes = {
+      wall_a: node('wall_a', 'wall'),
+      slab_a: node('slab_a', 'slab'),
+    }
+    expect(resolveHomogeneousSelection(['wall_a', 'slab_a'], nodes)).toBeNull()
+  })
+
+  test('three walls share the wall type', () => {
+    const nodes = {
+      wall_a: node('wall_a', 'wall'),
+      wall_b: node('wall_b', 'wall'),
+      wall_c: node('wall_c', 'wall'),
+    }
+    expect(resolveHomogeneousSelection(['wall_a', 'wall_b', 'wall_c'], nodes)).toBe('wall')
+  })
+
+  test('proxy-promoted children resolve to the parent type', () => {
+    const nodes = {
+      cabinet_run: node('cabinet_run', 'cabinet'),
+      'cabinet-module_a': node('cabinet-module_a', 'cabinet-module', {
+        nodeSelectionProxyId: 'cabinet_run',
+      }),
+      'cabinet-module_b': node('cabinet-module_b', 'cabinet-module', {
+        nodeSelectionProxyId: 'cabinet_run',
+      }),
+      'cabinet-module_c': node('cabinet-module_c', 'cabinet-module', {
+        nodeSelectionProxyId: 'cabinet_run',
+      }),
+      cabinet_run_b: node('cabinet_run_b', 'cabinet'),
+      'cabinet-module_d': node('cabinet-module_d', 'cabinet-module', {
+        nodeSelectionProxyId: 'cabinet_run_b',
+      }),
+    }
+    expect(resolveHomogeneousSelection(['cabinet-module_a', 'cabinet-module_d'], nodes)).toBe(
+      'cabinet',
+    )
+    expect(resolveUniqueSelectionIds(['cabinet-module_a', 'cabinet-module_b', 'cabinet-module_c'], nodes)).toEqual(
+      ['cabinet_run'],
+    )
+    expect(resolveHomogeneousSelection(['cabinet-module_a', 'cabinet-module_b'], nodes)).toBeNull()
+  })
+
+  test('stale ids are skipped without breaking a homogeneous remainder', () => {
+    const nodes = {
+      wall_a: node('wall_a', 'wall'),
+      wall_b: node('wall_b', 'wall'),
+    }
+    expect(resolveHomogeneousSelection(['wall_a', 'gone', 'wall_b'], nodes)).toBe('wall')
+  })
+
+  test('a single live node after skips is not homogeneous', () => {
+    const nodes = { wall_a: node('wall_a', 'wall') }
+    expect(resolveHomogeneousSelection(['wall_a', 'gone'], nodes)).toBeNull()
+  })
+})

package/src/components/ui/panels/homogeneous-selection.ts

@@ -0,0 +1,47 @@
+import {
+  type AnyNode,
+  type AnyNodeId,
+  resolveSelectionProxyId,
+} from '@pascal-app/core'
+
+/**
+ * Resolve selection proxies and drop duplicates / missing ids. Session groups
+ * are just selections — mixed-type groups stay mixed after this pass, and a
+ * pair of children that both proxy to the same parent collapse to one id.
+ */
+export function resolveUniqueSelectionIds(
+  ids: readonly string[],
+  nodes: Readonly<Record<string, AnyNode | undefined>>,
+): AnyNodeId[] {
+  const resolved: AnyNodeId[] = []
+  const seen = new Set<string>()
+  for (const id of ids) {
+    const node = nodes[id]
+    if (!node) continue
+    const resolvedId = resolveSelectionProxyId(node, nodes)
+    if (seen.has(resolvedId)) continue
+    seen.add(resolvedId)
+    resolved.push(resolvedId)
+  }
+  return resolved
+}
+
+/**
+ * Shared type when every resolved id is the same kind and at least two nodes
+ * remain. Otherwise null — including mixed session groups and proxy-collapsed
+ * selections that shrink below two distinct nodes.
+ */
+export function resolveHomogeneousSelection(
+  ids: readonly string[],
+  nodes: Readonly<Record<string, AnyNode | undefined>>,
+): AnyNode['type'] | null {
+  const resolvedIds = resolveUniqueSelectionIds(ids, nodes)
+  if (resolvedIds.length < 2) return null
+  const first = nodes[resolvedIds[0] ?? '']
+  if (!first) return null
+  for (let i = 1; i < resolvedIds.length; i++) {
+    const node = nodes[resolvedIds[i] ?? '']
+    if (!node || node.type !== first.type) return null
+  }
+  return first.type
+}

package/src/components/ui/panels/mobile-selection-bar.tsx

@@ -8,7 +8,9 @@ import { cn } from '../../../lib/utils'
 import { getNodeDisplay } from './node-display'
 
 interface MobileSelectionBarProps {
-  node: AnyNode
+  node: AnyNode | null
+  label?: string
+  icon?: string
   onMove: () => void
   onDuplicate: () => void
   onDelete: () => void
@@ -20,19 +22,23 @@ const ACTION_BTN =
 
 export function MobileSelectionBar({
   node,
+  label,
+  icon,
   onMove,
   onDuplicate,
   onDelete,
   onEdit,
 }: MobileSelectionBarProps) {
-  const { icon, label } = getNodeDisplay(node)
+  const display = getNodeDisplay(node)
+  const resolvedLabel = label ?? display.label
+  const resolvedIcon = icon ?? display.icon
 
   const stop: MouseEventHandler<HTMLButtonElement> = (e) => e.stopPropagation()
 
   return (
     <div className="pointer-events-auto absolute right-3 bottom-6 left-3 z-50 flex h-12 items-stretch gap-1 rounded-2xl border border-border/50 bg-background/95 px-2 shadow-2xl backdrop-blur-xl">
       <button
-        aria-label={`Edit ${label}`}
+        aria-label={`Edit ${resolvedLabel}`}
         className={cn(
           'flex min-w-0 flex-1 items-center gap-2 rounded-lg px-2 text-left transition-colors hover:bg-white/8',
         )}
@@ -43,10 +49,10 @@ export function MobileSelectionBar({
           alt=""
           className="shrink-0 rounded object-contain"
           height={20}
-          src={icon}
+          src={resolvedIcon}
           width={20}
         />
-        <span className="truncate font-medium text-foreground text-sm">{label}</span>
+        <span className="truncate font-medium text-foreground text-sm">{resolvedLabel}</span>
       </button>
 
       <div className="flex items-center gap-0.5 border-border/40 border-l pl-1">

package/src/components/ui/panels/multi-field-value.test.ts

@@ -0,0 +1,209 @@
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test'
+import {
+  type AnyNode,
+  type AnyNodeId,
+  BuildingNode,
+  clearSceneHistory,
+  LevelNode,
+  useLiveNodeOverrides,
+  useScene,
+  WallNode,
+} from '@pascal-app/core'
+import {
+  buildMultiNodePatches,
+  commitMultiNodeFields,
+  fieldVisibleForAll,
+  reduceFieldValue,
+  reduceHeightBoundMode,
+} from './multi-field-value'
+
+type RafFn = (cb: (time: number) => void) => number
+;(globalThis as unknown as { requestAnimationFrame?: RafFn }).requestAnimationFrame ??= (cb) => {
+  cb(0)
+  return 0
+}
+;(globalThis as unknown as { cancelAnimationFrame?: (id: number) => void }).cancelAnimationFrame ??=
+  () => {}
+
+const BUILDING_ID = 'building_multi_edit' as AnyNodeId
+const LEVEL_ID = 'level_multi_edit' as AnyNodeId
+const WALL_A = 'wall_multi_a' as AnyNodeId
+const WALL_B = 'wall_multi_b' as AnyNodeId
+const WALL_C = 'wall_multi_c' as AnyNodeId
+
+function makeNode(id: string, type: string, fields: Record<string, unknown> = {}): AnyNode {
+  return {
+    object: 'node',
+    id: id as AnyNodeId,
+    type,
+    parentId: null,
+    visible: true,
+    metadata: {},
+    children: [],
+    ...fields,
+  } as unknown as AnyNode
+}
+
+describe('reduceFieldValue', () => {
+  test('same values collapse to one', () => {
+    const nodes = {
+      a: makeNode('a', 'wall', { height: 2.4, thickness: 0.2 }),
+      b: makeNode('b', 'wall', { height: 2.4, thickness: 0.15 }),
+    }
+    expect(reduceFieldValue(['a', 'b'], 'height', nodes)).toEqual({ kind: 'same', value: 2.4 })
+    expect(reduceFieldValue(['a', 'b'], 'thickness', nodes)).toEqual({ kind: 'mixed' })
+  })
+
+  test('vec3 compares elementwise', () => {
+    const nodes = {
+      a: makeNode('a', 'item', { position: [1, 0, 2] }),
+      b: makeNode('b', 'item', { position: [1, 0, 2] }),
+      c: makeNode('c', 'item', { position: [1, 0, 3] }),
+    }
+    expect(reduceFieldValue(['a', 'b'], 'position', nodes)).toEqual({
+      kind: 'same',
+      value: [1, 0, 2],
+    })
+    expect(reduceFieldValue(['a', 'c'], 'position', nodes)).toEqual({ kind: 'mixed' })
+  })
+})
+
+describe('reduceHeightBoundMode', () => {
+  test('absent height is follows-level, present height is custom', () => {
+    const nodes = {
+      a: makeNode('a', 'wall'),
+      b: makeNode('b', 'wall'),
+      c: makeNode('c', 'wall', { height: 3 }),
+    }
+    expect(reduceHeightBoundMode(['a', 'b'], nodes)).toEqual({ kind: 'same', value: 'storey' })
+    expect(reduceHeightBoundMode(['c'], nodes)).toEqual({ kind: 'same', value: 'custom' })
+    expect(reduceHeightBoundMode(['a', 'c'], nodes)).toEqual({ kind: 'mixed' })
+  })
+})
+
+describe('fieldVisibleForAll', () => {
+  test('hides when any node would hide the field', () => {
+    const nodes = {
+      a: makeNode('a', 'slab', { recessed: false }),
+      b: makeNode('b', 'slab', { recessed: true }),
+    }
+    const visibleIf = (n: AnyNode) => !(n as { recessed?: boolean }).recessed
+    expect(fieldVisibleForAll(['a'], visibleIf, nodes)).toBe(true)
+    expect(fieldVisibleForAll(['a', 'b'], visibleIf, nodes)).toBe(false)
+  })
+})
+
+describe('buildMultiNodePatches', () => {
+  test('a mixed field that is never edited produces no patch for it', () => {
+    const nodes = {
+      a: makeNode('a', 'wall', { height: 2.4, thickness: 0.2 }),
+      b: makeNode('b', 'wall', { height: 3, thickness: 0.15 }),
+    }
+    const patches = buildMultiNodePatches(
+      ['a' as AnyNodeId, 'b' as AnyNodeId],
+      () => ({ thickness: 0.3 }),
+      nodes,
+    )
+    expect(patches).toEqual([
+      { id: 'a' as AnyNodeId, data: { thickness: 0.3 } },
+      { id: 'b' as AnyNodeId, data: { thickness: 0.3 } },
+    ])
+    for (const patch of patches) {
+      expect(patch.data).not.toHaveProperty('height')
+    }
+  })
+
+  test('derive and reconcile fan out per node into one batch', () => {
+    const nodes = {
+      a: makeNode('a', 'wall', { height: 2 }),
+      b: makeNode('b', 'wall', { height: 2 }),
+    }
+    const patches = buildMultiNodePatches(
+      ['a' as AnyNodeId, 'b' as AnyNodeId],
+      () => ({ height: 4 }),
+      nodes,
+      {
+        derive: (next) => ({ thickness: (next as { height: number }).height / 10 }),
+        reconcile: (prev) => [
+          { id: `${prev.id}_follow` as AnyNodeId, data: { height: 4 } },
+        ],
+      },
+    )
+    expect(patches).toEqual([
+      { id: 'a' as AnyNodeId, data: { height: 4, thickness: 0.4 } },
+      { id: 'b' as AnyNodeId, data: { height: 4, thickness: 0.4 } },
+      { id: 'a_follow' as AnyNodeId, data: { height: 4 } },
+      { id: 'b_follow' as AnyNodeId, data: { height: 4 } },
+    ])
+  })
+})
+
+describe('commitMultiNodeFields', () => {
+  beforeEach(() => {
+    const wallA = WallNode.parse({
+      id: WALL_A,
+      parentId: LEVEL_ID,
+      start: [0, 0],
+      end: [4, 0],
+      height: 2.4,
+    })
+    const wallB = WallNode.parse({
+      id: WALL_B,
+      parentId: LEVEL_ID,
+      start: [4, 0],
+      end: [4, 3],
+      height: 3,
+    })
+    const wallC = WallNode.parse({
+      id: WALL_C,
+      parentId: LEVEL_ID,
+      start: [4, 3],
+      end: [0, 3],
+      height: 2.7,
+    })
+    const level = LevelNode.parse({
+      id: LEVEL_ID,
+      parentId: BUILDING_ID,
+      children: [WALL_A, WALL_B, WALL_C],
+      level: 0,
+    })
+    const building = BuildingNode.parse({
+      id: BUILDING_ID,
+      parentId: null,
+      children: [LEVEL_ID],
+    })
+    useScene.setState({
+      nodes: {
+        [BUILDING_ID]: building,
+        [LEVEL_ID]: level,
+        [WALL_A]: wallA,
+        [WALL_B]: wallB,
+        [WALL_C]: wallC,
+      },
+      rootNodeIds: [BUILDING_ID],
+      dirtyNodes: new Set<AnyNodeId>(),
+      collections: {},
+      materials: {},
+      readOnly: false,
+    } as never)
+    clearSceneHistory()
+    useLiveNodeOverrides.getState().clearAll()
+  })
+
+  afterEach(() => {
+    useLiveNodeOverrides.getState().clearAll()
+  })
+
+  test('dragging height onto three walls is one undo step', () => {
+    commitMultiNodeFields([WALL_A, WALL_B, WALL_C], () => ({ height: 4 }))
+    expect((useScene.getState().nodes[WALL_A] as { height?: number }).height).toBe(4)
+    expect((useScene.getState().nodes[WALL_B] as { height?: number }).height).toBe(4)
+    expect((useScene.getState().nodes[WALL_C] as { height?: number }).height).toBe(4)
+    expect(useScene.temporal.getState().pastStates).toHaveLength(1)
+
+    useScene.temporal.getState().undo()
+    expect((useScene.getState().nodes[WALL_A] as { height?: number }).height).toBe(2.4)
+    expect((useScene.getState().nodes[WALL_B] as { height?: number }).height).toBe(3)
+    expect((useScene.getState().nodes[WALL_C] as { height?: number }).height).toBe(2.7)
+  })
+})