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

package/src/components/ui/controls/tool-options-panel.tsx

@@ -0,0 +1,126 @@
+'use client'
+
+import { nodeRegistry, type ToolOption } from '@pascal-app/core'
+import Image from 'next/image'
+import { useSyncExternalStore } from 'react'
+import { cn } from '../../../lib/utils'
+import { triggerSFX } from '../../../lib/sfx-bus'
+
+const ALWAYS_VISIBLE = {
+  subscribe: () => () => {},
+  value: () => true,
+}
+
+function ToolOptionRow({
+  option,
+  onSelect,
+  getChoiceThumbnail,
+  active = true,
+}: {
+  option: ToolOption
+  onSelect?: (option: ToolOption, value: string) => void
+  getChoiceThumbnail?: (option: ToolOption, value: string) => string | undefined
+  active?: boolean
+}) {
+  const visibility = option.visible ?? ALWAYS_VISIBLE
+  const visible = useSyncExternalStore(visibility.subscribe, visibility.value, visibility.value)
+  const value = useSyncExternalStore(option.subscribe, option.value, option.value)
+  if (
+    !visible ||
+    (!active && !option.choices.some((choice) => getChoiceThumbnail?.(option, choice.value)))
+  ) return null
+
+  const activeChoice = active && option.choices.find((choice) => choice.value === value)
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="px-0.5 font-medium text-muted-foreground text-xs">{option.label}</div>
+      <div
+        className="grid gap-1.5"
+        style={{
+          gridTemplateColumns: `repeat(${Math.min(option.choices.length, 3)}, minmax(0, 1fr))`,
+        }}
+      >
+        {option.choices.map((choice) => {
+          const selected = active && choice.value === value
+          const thumbnail = getChoiceThumbnail?.(option, choice.value)
+          return (
+            <button
+              aria-pressed={selected}
+              className={cn(
+                'rounded-lg px-2 py-2 text-center font-medium text-xs transition-colors',
+                selected
+                  ? 'bg-primary/10 text-primary ring-1 ring-primary/50'
+                  : 'bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground',
+              )}
+              key={choice.value}
+              onClick={() => {
+                triggerSFX('sfx:menu-click')
+                option.set(choice.value)
+                onSelect?.(option, choice.value)
+              }}
+              onMouseEnter={() => triggerSFX('sfx:menu-hover')}
+              type="button"
+            >
+              {thumbnail && (
+                <Image
+                  alt=""
+                  className={cn(
+                    'mx-auto mb-1 size-14 object-contain',
+                    !selected && 'opacity-70 grayscale',
+                  )}
+                  height={56}
+                  src={thumbnail}
+                  width={56}
+                />
+              )}
+              {choice.label}
+            </button>
+          )
+        })}
+      </div>
+      {activeChoice && activeChoice.description ? (
+        <p className="px-0.5 text-[11px] text-muted-foreground leading-relaxed">
+          {activeChoice.description}
+        </p>
+      ) : null}
+    </div>
+  )
+}
+
+/**
+ * The pick-one option rows a kind declares via `def.toolOptions` (e.g. the
+ * roof's 'Create from: Draw / Room'), for whichever sidebar the host mounts
+ * it in — the standalone Build tab and the community Build sidebar both get
+ * every kind's options with no per-kind wiring. Renders nothing for kinds
+ * without options. Selecting a choice only writes the kind's own state;
+ * hosts that want selection to also arm the tool pass `onSelect`.
+ */
+export function ToolOptionsPanel({
+  kind,
+  className,
+  onSelect,
+  getChoiceThumbnail,
+  active = true,
+}: {
+  kind: string | null | undefined
+  className?: string
+  onSelect?: (option: ToolOption, value: string) => void
+  getChoiceThumbnail?: (option: ToolOption, value: string) => string | undefined
+  active?: boolean
+}) {
+  const options = (kind ? nodeRegistry.get(kind)?.toolOptions : undefined) ?? []
+  if (options.length === 0) return null
+  return (
+    <div className={cn('flex flex-col gap-3', className)}>
+      {options.map((option) => (
+        <ToolOptionRow
+          active={active}
+          getChoiceThumbnail={getChoiceThumbnail}
+          key={option.id}
+          onSelect={onSelect}
+          option={option}
+        />
+      ))}
+    </div>
+  )
+}

package/src/components/ui/floating-level-selector.tsx

@@ -27,8 +27,16 @@ import {
   LevelNode,
   useScene,
 } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { ClipboardPaste, Copy, GripVertical, MoreVertical, Plus, Trash2 } from 'lucide-react'
+import { markPerfAction, useViewer } from '@pascal-app/viewer'
+import {
+  ClipboardPaste,
+  Copy,
+  GripVertical,
+  MoreVertical,
+  Plus,
+  Trash2,
+  X,
+} from 'lucide-react'
 import {
   type ButtonHTMLAttributes,
   type CSSProperties,
@@ -45,6 +53,7 @@ import {
 } from '../../lib/level-duplication'
 import { getDefaultLevelName, getLevelDisplayName } from '@pascal-app/core'
 import { deleteLevelWithFallbackSelection } from '../../lib/level-selection'
+import { unitMemberLevels, leaveUnitFocus } from '../../lib/units'
 import { useLinearDisplay } from '../../lib/use-linear-display'
 import { cn } from '../../lib/utils'
 import { ActionButton } from './controls/action-button'
@@ -131,12 +140,15 @@ function LevelRow({
   onDuplicate,
   onPaste,
   onRequestDelete,
+  unitDotColor,
 }: {
   level: LevelNode
   isSelected: boolean
   isDragging?: boolean
   dragHandleProps?: ButtonHTMLAttributes<HTMLButtonElement>
   dragHandleRef?: (element: HTMLButtonElement | null) => void
+  /** Focused-unit color when the unit has zones on this level. */
+  unitDotColor?: string
   onSelect: () => void
   onDuplicate: (preset?: LevelDuplicatePreset) => void
   onPaste?: () => void
@@ -145,11 +157,17 @@ function LevelRow({
   const [duplicateDialogOpen, setDuplicateDialogOpen] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
   const updateNode = useScene((s) => s.updateNode)
-  const { isImperial, toDisplay, displayUnit } = useLinearDisplay('m', 2)
+  const { isImperial, toDisplay, displayUnit, precision: displayPrecision } = useLinearDisplay('m', 2)
 
   const storeyHeight = getStoredLevelHeight(level)
-  // toFixed(2) + strip one trailing zero: "2.50" → "2.5", "2.75" stays.
-  const storeyHeightLabel = `${toDisplay(storeyHeight).toFixed(2).replace(/0$/, '')} ${displayUnit}`
+  // Decimal units keep the compact readout; integer millimeters must retain trailing zeroes.
+  const formattedStoreyHeight = toDisplay(storeyHeight).toFixed(displayPrecision)
+  const storeyHeightLabel = `${
+    displayPrecision > 0 ? formattedStoreyHeight.replace(/0$/, '') : formattedStoreyHeight
+  } ${displayUnit}`
+  // Same rule as the site panel and command palette: the ordinal-0 ground
+  // floor is the vertical model's zero anchor and must never be deletable.
+  const canDeleteLevel = level.level !== 0
 
   // Clean preset values per display system; imperial stores exact meters
   // for whole-foot storey heights.
@@ -212,6 +230,13 @@ function LevelRow({
             type="button"
           >
             <span className="truncate">{getLevelDisplayName(level)}</span>
+            {unitDotColor && (
+              <span
+                className="ml-1.5 h-1.5 w-1.5 shrink-0 rounded-full"
+                style={{ backgroundColor: unitDotColor }}
+                title="Focused unit has zones here"
+              />
+            )}
           </button>
 
           {/* Storey height badge — opens the height popover */}
@@ -241,7 +266,7 @@ function LevelRow({
                 precision={3}
                 step={0.1}
                 unit="m"
-                value={Math.round(storeyHeight * 1000) / 1000}
+                value={storeyHeight}
               />
               <div className="mt-1.5 grid grid-cols-3 gap-1.5">
                 {heightPresets.map((preset) => (
@@ -304,11 +329,13 @@ function LevelRow({
                 </button>
               )}
               <button
-                className="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-muted-foreground text-xs transition-colors hover:bg-white/10 hover:text-red-400"
+                className="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-muted-foreground text-xs transition-colors enabled:hover:bg-white/10 enabled:hover:text-red-400 disabled:cursor-not-allowed disabled:opacity-50"
+                disabled={!canDeleteLevel}
                 onClick={(e) => {
                   e.stopPropagation()
                   onRequestDelete()
                 }}
+                title={canDeleteLevel ? 'Delete level' : 'The ground level cannot be deleted'}
                 type="button"
               >
                 <Trash2 className="h-3 w-3" />
@@ -338,9 +365,11 @@ function SortableLevelRow({
   onDuplicate,
   onPaste,
   onRequestDelete,
+  unitDotColor,
 }: {
   level: LevelNode
   isSelected: boolean
+  unitDotColor?: string
   onSelect: () => void
   onDuplicate: (preset?: LevelDuplicatePreset) => void
   onPaste?: () => void
@@ -376,7 +405,42 @@ function SortableLevelRow({
         onPaste={onPaste}
         onRequestDelete={onRequestDelete}
         onSelect={onSelect}
+        unitDotColor={unitDotColor}
+      />
+    </div>
+  )
+}
+
+// ── Unit focus chip: name + × to end focus, only while a unit is focused ────
+
+function UnitFocusChip() {
+  const focusedUnitId = useViewer((s) => s.focusedUnitId)
+  const focusedUnit = useScene((s) => {
+    const unit = focusedUnitId ? s.nodes[focusedUnitId] : undefined
+    return unit?.type === 'unit' ? unit : null
+  })
+
+  if (!focusedUnit) return null
+
+  return (
+    <div
+      className="mt-4 flex h-7 max-w-48 items-center gap-1.5 rounded-full border border-border bg-background/90 pr-1 pl-2.5 font-medium text-xs shadow-2xl backdrop-blur-md"
+      data-testid="unit-focus-chip"
+    >
+      <span
+        className="h-2 w-2 shrink-0 rounded-full"
+        style={{ backgroundColor: focusedUnit.color }}
       />
+      <span className="truncate">{focusedUnit.name || 'Unit'}</span>
+      <button
+        aria-label="Exit unit focus"
+        className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-white/10 hover:text-foreground"
+        onClick={() => leaveUnitFocus()}
+        title="Exit unit focus"
+        type="button"
+      >
+        <X className="h-3 w-3" />
+      </button>
     </div>
   )
 }
@@ -393,6 +457,17 @@ export function FloatingLevelSelector() {
 
   const [deletingLevel, setDeletingLevel] = useState<LevelNode | null>(null)
   const [draggingLevelId, setDraggingLevelId] = useState<string | null>(null)
+  const focusedUnitId = useViewer((s) => s.focusedUnitId)
+  const focusedUnitColor = useScene((s) => {
+    const unit = focusedUnitId ? s.nodes[focusedUnitId] : undefined
+    return unit?.type === 'unit' ? unit.color : null
+  })
+  const focusedUnitLevelIds = useScene(
+    useShallow((s) => {
+      const unit = focusedUnitId ? s.nodes[focusedUnitId] : undefined
+      return unit?.type === 'unit' ? unitMemberLevels(unit, s.nodes).map((level) => level.id) : []
+    }),
+  )
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: { distance: 4 },
@@ -572,6 +647,9 @@ export function FloatingLevelSelector() {
           {!draggingLevelId && (
             <button
               className={cn(addButtonClass, 'top-0 -translate-y-1/2')}
+              // A stable hook for host-app onboarding to point at. Static, and
+              // read only from outside: nothing here depends on it.
+              data-guide-target="level-add"
               onClick={handleAddAbove}
               title="Add level above"
               type="button"
@@ -608,20 +686,34 @@ export function FloatingLevelSelector() {
                   const showGapBelow = i < reversedLevels.length - 1
 
                   return (
-                    <div className="relative" key={level.id}>
+                    <div
+                      className="relative"
+                      // A stable hook for host-app onboarding to point at, on
+                      // the ground floor only — the one level a guide can name
+                      // without knowing the building. Static, and read only
+                      // from outside: nothing here depends on it.
+                      data-guide-target={level.level === 0 ? 'level-ground' : undefined}
+                      key={level.id}
+                    >
                       <SortableLevelRow
                         isSelected={isSelected}
                         level={level}
+                        unitDotColor={
+                          focusedUnitColor && focusedUnitLevelIds.includes(level.id)
+                            ? focusedUnitColor
+                            : undefined
+                        }
                         onDuplicate={(preset) => handleDuplicateLevel(level, preset)}
                         onPaste={() => handlePasteToLevel(level)}
                         onRequestDelete={() => setDeletingLevel(level)}
-                        onSelect={() =>
+                        onSelect={() => {
+                          if (!isSelected) markPerfAction('level-switch', level.id)
                           setSelection(
                             resolvedBuildingId
                               ? { buildingId: resolvedBuildingId, levelId: level.id }
                               : { levelId: level.id },
                           )
-                        }
+                        }}
                       />
 
                       {showGapBelow && !draggingLevelId && (
@@ -641,6 +733,7 @@ export function FloatingLevelSelector() {
             </SortableContext>
           </DndContext>
         </div>
+        <UnitFocusChip />
       </div>
 
       {/* Delete confirmation dialog */}

package/src/components/ui/helpers/contextual-helper-panel.tsx

@@ -90,6 +90,7 @@ function ShortcutSequence({
 function ChipRow({
   ariaLabel,
   disabled = false,
+  guideTarget,
   icon,
   label,
   onClick,
@@ -98,6 +99,11 @@ function ChipRow({
 }: {
   ariaLabel?: string
   disabled?: boolean
+  /**
+   * A static hook for a host app's first-run tour to point at, written to
+   * `data-guide-target`. Nothing here reads it.
+   */
+  guideTarget?: string
   icon?: string
   label: string
   onClick?: () => void
@@ -130,6 +136,7 @@ function ChipRow({
         'pointer-events-auto cursor-pointer items-center rounded-md text-left transition-colors hover:bg-muted/60',
         disabled && 'opacity-45 saturate-0',
       )}
+      data-guide-target={guideTarget}
       onClick={onClick}
       type="button"
     >
@@ -181,6 +188,7 @@ function SnappingChips({ context }: { context: SnapContext }) {
     <>
       <ChipRow
         ariaLabel={`Snapping: ${SNAPPING_MODE_LABELS[snappingMode]}`}
+        guideTarget="snap-mode"
         icon={SNAPPING_MODE_ICONS[snappingMode]}
         label={`Snapping: ${SNAPPING_MODE_LABELS[snappingMode]}`}
         onClick={() => {
@@ -193,6 +201,7 @@ function SnappingChips({ context }: { context: SnapContext }) {
       {gridActive ? (
         <ChipRow
           ariaLabel={`Grid step: ${gridSnapStep.toFixed(2)} m`}
+          guideTarget="snap-grid-step"
           label={`Grid: ${gridSnapStep.toFixed(2)} m`}
           onClick={() => {
             setGridSnapStep(nextGridSnapStep(gridSnapStep))

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