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

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

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

@@ -0,0 +1,163 @@
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type ParametricDescriptor,
+  useLiveNodeOverrides,
+  useScene,
+} from '@pascal-app/core'
+
+export type ReducedFieldValue<T = unknown> =
+  | { kind: 'same'; value: T }
+  | { kind: 'mixed' }
+
+const MIXED: { kind: 'mixed' } = { kind: 'mixed' }
+
+function fieldValuesEqual(a: unknown, b: unknown): boolean {
+  if (Object.is(a, b)) return true
+  if (Array.isArray(a) && Array.isArray(b) && a.length === b.length) {
+    return a.every((value, i) => Object.is(value, b[i]))
+  }
+  return false
+}
+
+export function reduceFieldValue(
+  nodeIds: readonly string[],
+  key: string,
+  nodes: Readonly<Record<string, AnyNode | undefined>>,
+): ReducedFieldValue {
+  let seen = false
+  let shared: unknown
+  for (const id of nodeIds) {
+    const node = nodes[id]
+    if (!node) continue
+    const value = (node as Record<string, unknown>)[key]
+    if (!seen) {
+      seen = true
+      shared = value
+      continue
+    }
+    if (!fieldValuesEqual(shared, value)) return MIXED
+  }
+  if (!seen) return MIXED
+  return { kind: 'same', value: shared }
+}
+
+export type HeightBoundMode = 'storey' | 'custom'
+
+export function reduceHeightBoundMode(
+  nodeIds: readonly string[],
+  nodes: Readonly<Record<string, AnyNode | undefined>>,
+): ReducedFieldValue<HeightBoundMode> {
+  let seen = false
+  let shared: HeightBoundMode | undefined
+  for (const id of nodeIds) {
+    const node = nodes[id]
+    if (!node) continue
+    const mode: HeightBoundMode = (node as { height?: number }).height == null ? 'storey' : 'custom'
+    if (!seen) {
+      seen = true
+      shared = mode
+      continue
+    }
+    if (mode !== shared) return MIXED
+  }
+  if (!seen || !shared) return MIXED
+  return { kind: 'same', value: shared }
+}
+
+export function fieldVisibleForAll(
+  nodeIds: readonly string[],
+  visibleIf: ((node: AnyNode) => boolean) | undefined,
+  nodes: Readonly<Record<string, AnyNode | undefined>>,
+): boolean {
+  if (!visibleIf) return true
+  for (const id of nodeIds) {
+    const node = nodes[id]
+    if (!node || !visibleIf(node)) return false
+  }
+  return true
+}
+
+export function firstNumericFieldValue(
+  nodeIds: readonly string[],
+  key: string,
+  nodes: Readonly<Record<string, AnyNode | undefined>>,
+  fallback = 0,
+): number {
+  for (const id of nodeIds) {
+    const node = nodes[id]
+    const value = node ? (node as Record<string, unknown>)[key] : undefined
+    if (typeof value === 'number' && Number.isFinite(value)) return value
+  }
+  return fallback
+}
+
+export function firstVec3FieldValue(
+  nodeIds: readonly string[],
+  key: string,
+  nodes: Readonly<Record<string, AnyNode | undefined>>,
+): [number, number, number] {
+  for (const id of nodeIds) {
+    const node = nodes[id]
+    const value = node ? (node as Record<string, unknown>)[key] : undefined
+    if (Array.isArray(value) && value.length >= 3) {
+      return [Number(value[0]) || 0, Number(value[1]) || 0, Number(value[2]) || 0]
+    }
+  }
+  return [0, 0, 0]
+}
+
+export function buildMultiNodePatches(
+  nodeIds: readonly AnyNodeId[],
+  patchFor: (node: AnyNode) => Partial<AnyNode>,
+  nodes: Readonly<Record<string, AnyNode | undefined>>,
+  parametrics?: Pick<ParametricDescriptor<AnyNode>, 'derive' | 'reconcile'>,
+): Array<{ id: AnyNodeId; data: Partial<AnyNode> }> {
+  const updates: Array<{ id: AnyNodeId; data: Partial<AnyNode> }> = []
+  const followUps: Array<{ id: AnyNodeId; data: Partial<AnyNode> }> = []
+  for (const id of nodeIds) {
+    const node = nodes[id]
+    if (!node) continue
+    let patch = patchFor(node)
+    if (Object.keys(patch).length === 0) continue
+    if (parametrics?.derive) {
+      const next = { ...node, ...patch } as AnyNode
+      patch = { ...patch, ...parametrics.derive(next, patch, node) } as Partial<AnyNode>
+    }
+    updates.push({ id, data: patch })
+    if (parametrics?.reconcile) {
+      const next = { ...node, ...patch } as AnyNode
+      followUps.push(...parametrics.reconcile(node, next))
+    }
+  }
+  return [...updates, ...followUps]
+}
+
+export function previewMultiNodeFields(
+  entries: ReadonlyArray<readonly [AnyNodeId, Partial<AnyNode>]>,
+): void {
+  if (entries.length === 0) return
+  useLiveNodeOverrides.getState().setMany(entries)
+  const scene = useScene.getState()
+  for (const [id] of entries) scene.markDirty(id)
+}
+
+export function commitMultiNodeFields(
+  nodeIds: readonly AnyNodeId[],
+  patchFor: (node: AnyNode) => Partial<AnyNode>,
+  parametrics?: Pick<ParametricDescriptor<AnyNode>, 'derive' | 'reconcile'>,
+): void {
+  const scene = useScene.getState()
+  const patches = buildMultiNodePatches(nodeIds, patchFor, scene.nodes, parametrics)
+  const keys = new Set<string>()
+  for (const patch of patches) {
+    for (const key of Object.keys(patch.data)) keys.add(key)
+  }
+  const live = useLiveNodeOverrides.getState()
+  const keyList = [...keys]
+  for (const id of nodeIds) {
+    if (keyList.length > 0) live.clearFields(id, keyList)
+    scene.markDirty(id)
+  }
+  if (patches.length > 0) scene.updateNodes(patches)
+}