@pascal-app/editor 1.0.6 → 1.1.0

package/src/lib/wall-placement-pointer.ts

@@ -1,3 +1,4 @@
+import { getWallBodyCenterOffset, type WallNode } from '@pascal-app/core'
 import { type Object3D, Vector3 } from 'three'
 
 type WallSide = 'front' | 'back'
@@ -55,3 +56,20 @@ export function wallPointerInParent(
 export function wallSideAtPointer(point: readonly number[]): WallSide {
   return point[2]! >= 0 ? 'front' : 'back'
 }
+
+/**
+ * The face of a straight wall a plan point is on, as a 3D hover reports it: `front` is the wall
+ * frame's +Z (the plan side `(-dz, dx)` of start → end), measured from the wall body's centre so a justified
+ * wall splits at its middle. The plan's stand-in for the hovered face's normal.
+ */
+export function wallSideOfPlanPoint(
+  wall: Pick<WallNode, 'start' | 'end' | 'thickness' | 'justification'>,
+  point: readonly [number, number],
+): WallSide {
+  const dx = wall.end[0] - wall.start[0]
+  const dz = wall.end[1] - wall.start[1]
+  const length = Math.hypot(dx, dz)
+  if (length < 1e-9) return 'front'
+  const across = ((point[0] - wall.start[0]) * -dz + (point[1] - wall.start[1]) * dx) / length
+  return across >= getWallBodyCenterOffset(wall) ? 'front' : 'back'
+}

package/src/lib/wall-pull.test.ts

@@ -0,0 +1,245 @@
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test'
+import {
+  type AnyNode,
+  type AnyNodeId,
+  detectSpacesForLevel,
+  getWallAssemblyPreset,
+  LevelNode as LevelSchema,
+  nodeRegistry,
+  registerNode,
+  useScene,
+  type WallNode,
+  WallNode as WallSchema,
+  wallAssemblyPatch,
+  wallClosesRoom,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { createWallOnCurrentLevel } from '../components/tools/wall/wall-drafting'
+import type { WallPlanPoint } from '../components/tools/wall/wall-snap-geometry'
+import useEditor from '../store/use-editor'
+import { selectWallDrawVariant } from './wall-draw-variant'
+import {
+  endWallPullRun,
+  startWallPull,
+  useWallPullRun,
+  wallDraftIsRun,
+  wallPullSeed,
+  wallPullTypePatch,
+} from './wall-pull'
+import { isWallRunFree, snapWallRunDraftPoint, wallRunDirection } from './wall-run-snap'
+
+// `updateNodes` batches its dirty-marking through requestAnimationFrame,
+// which bun's test runtime doesn't provide.
+if (typeof globalThis.requestAnimationFrame === 'undefined') {
+  globalThis.requestAnimationFrame = ((callback: FrameRequestCallback) =>
+    setTimeout(() => callback(0), 0)) as unknown as typeof requestAnimationFrame
+  globalThis.cancelAnimationFrame = ((id: number) =>
+    clearTimeout(id)) as typeof cancelAnimationFrame
+}
+
+const LEVEL_ID = 'level_pull' as AnyNodeId
+
+function levelWalls(): WallNode[] {
+  return Object.values(useScene.getState().nodes).filter(
+    (node): node is WallNode => node?.type === 'wall' && node.parentId === LEVEL_ID,
+  )
+}
+
+/** A lone stucco wall running east to the origin, 3.1 m tall on a 2.7 m storey, painted. */
+function seedSourceWall(): WallNode {
+  const preset = getWallAssemblyPreset('exterior-2x6-stucco')
+  if (!preset) throw new Error('Expected the stucco preset')
+  const source = WallSchema.parse({
+    id: 'wall_source',
+    name: 'Source',
+    parentId: LEVEL_ID,
+    start: [-4, 0],
+    end: [0, 0],
+    height: 3.1,
+    ...wallAssemblyPatch(structuredClone(preset.assembly)),
+    slots: { a: 'library:paint-sage', b: 'library:stucco-white' },
+    skirting: { enabled: true, sides: 'both', height: 0.12, proud: 0.02, profile: 'flat' },
+  })
+  const level = LevelSchema.parse({
+    id: LEVEL_ID,
+    level: 0,
+    height: 2.7,
+    children: [source.id],
+  })
+  useScene.setState({
+    nodes: { [level.id]: level as AnyNode, [source.id]: source as AnyNode },
+    rootNodeIds: [level.id],
+    dirtyNodes: new Set(),
+    collections: {},
+  } as never)
+  return source
+}
+
+describe('pulling the next wall from a wall end', () => {
+  let restoreRegistry: (() => void) | undefined
+  let previousEditor: Partial<ReturnType<typeof useEditor.getState>>
+
+  beforeEach(() => {
+    previousEditor = {
+      toolDefaults: useEditor.getState().toolDefaults,
+      continuationByContext: useEditor.getState().continuationByContext,
+    }
+    // The wall's snap profile makes the armed wall tool the 'wall' snapping
+    // context (grid lengths), as in the app.
+    restoreRegistry = nodeRegistry._snapshot()
+    registerNode({
+      kind: 'wall',
+      schemaVersion: 10,
+      schema: WallSchema,
+      category: 'structure',
+      snapProfile: 'structural',
+      defaults: () => WallSchema.parse({ start: [0, 0], end: [1, 0] }),
+      capabilities: {},
+    } as never)
+    useEditor.getState().setContinuation('wall', 'room')
+    useEditor.getState().setSnappingMode('wall', 'grid')
+    useEditor.getState().armToolMode({ mode: 'select' })
+    useViewer.setState({
+      selection: {
+        buildingId: null,
+        levelId: LEVEL_ID,
+        zoneId: null,
+        selectedIds: ['wall_source'],
+      },
+    } as never)
+    seedSourceWall()
+    useScene.temporal.getState().clear()
+    useScene.temporal.getState().resume()
+  })
+
+  afterEach(() => {
+    endWallPullRun()
+    restoreRegistry?.()
+    restoreRegistry = undefined
+    useEditor.setState(previousEditor as never)
+    useEditor.getState().armToolMode({ mode: 'select' })
+  })
+
+  test('the pull arms the Walls run at the end, with the pulled wall’s type', () => {
+    const source = useScene.getState().nodes['wall_source' as AnyNodeId] as WallNode
+    expect(startWallPull({ wallId: source.id, endpoint: 'end', origin: '3d' })).toBe(true)
+
+    const run = useWallPullRun.getState().run
+    expect(run).toMatchObject({
+      sourceWallId: source.id,
+      levelId: LEVEL_ID,
+      runStart: [0, 0],
+      start: [0, 0],
+      origin: '3d',
+      dragging: true,
+    })
+    expect(run?.reference[0]).toBeCloseTo(1, 9)
+    expect(run?.reference[1]).toBeCloseTo(0, 9)
+    const editor = useEditor.getState()
+    expect(editor.mode).toBe('build')
+    expect(editor.tool).toBe('wall')
+    expect(editor.getContinuation('wall')).toBe('single')
+    expect(useViewer.getState().selection.selectedIds).toEqual([])
+
+    // The pulled wall's construction, finishes and own height, not the Build
+    // panel's types.
+    const pulled = createWallOnCurrentLevel([0, 0], [3, 0])
+    expect(pulled?.assembly).toEqual(source.assembly)
+    expect(pulled?.thickness).toBe(source.thickness)
+    expect(pulled?.height).toBe(3.1)
+    expect(pulled?.slots).toEqual(source.slots)
+    expect(pulled?.skirting).toEqual(source.skirting)
+    expect(pulled?.start).toEqual([0, 0])
+
+    // Ending puts back the Rooms shape and the wall tool defaults, in Select.
+    endWallPullRun()
+    expect(useWallPullRun.getState().run).toBeNull()
+    expect(useEditor.getState().mode).toBe('select')
+    expect(useEditor.getState().getContinuation('wall')).toBe('room')
+    expect(useEditor.getState().toolDefaults.wall).toBeUndefined()
+  })
+
+  test('the type patch keeps a plain wall plain and a storey-high wall on the storey', () => {
+    const plain = WallSchema.parse({ start: [0, 0], end: [2, 0], height: 2.7 })
+    expect(wallPullTypePatch(plain, 2.7)).toEqual({ thickness: plain.thickness ?? 0.1 })
+    const pulledFromStart = wallPullSeed(plain, 'start')
+    expect(pulledFromStart?.start).toEqual([0, 0])
+    expect(pulledFromStart?.reference[0]).toBeCloseTo(-1, 9)
+  })
+
+  test('closing the run back to its start forms a room, one undo step per wall', () => {
+    startWallPull({ wallId: 'wall_source', endpoint: 'end', origin: '3d' })
+    expect(isWallRunFree()).toBe(false)
+    const run = useWallPullRun.getState().run!
+    // The run as the tool drafts it: each wall from the last one's end,
+    // square to it — the pulled wall first.
+    let start = run.start
+    let reference: WallPlanPoint | null = run.reference
+    const place = (cursor: WallPlanPoint) => {
+      const snapped = snapWallRunDraftPoint({
+        point: cursor,
+        start,
+        runStart: run.runStart,
+        reference,
+        walls: levelWalls(),
+        free: isWallRunFree(),
+      })
+      const before = useScene.temporal.getState().pastStates.length
+      const wall = createWallOnCurrentLevel(start, snapped.point)!
+      expect(useScene.temporal.getState().pastStates.length).toBe(before + 1)
+      start = wall.end
+      reference = wallRunDirection(wall.start, wall.end)
+      return { wall, snapped }
+    }
+
+    // Straight on (6° off) to a grid length; square up; back west until the
+    // run's start lines up; then onto the start itself.
+    const first = place([5.1, 0.45])
+    expect(first.snapped.lock).toBe('straight')
+    expect(first.wall.end).toEqual([5, 0])
+    const second = place([5.25, 3.9])
+    expect(second.snapped.lock).toBe('square')
+    expect(second.wall.end).toEqual([5, 4])
+    expect(wallClosesRoom(levelWalls(), second.wall)).toBe(false)
+    const third = place([0.1, 4.05])
+    expect(third.snapped.snap).toBe('alignment')
+    expect(third.wall.end).toEqual([0, 4])
+    const last = place([0.12, 0.2])
+    expect(last.snapped.snap).toBe('endpoint')
+    expect(last.wall.end).toEqual([0, 0])
+
+    const walls = levelWalls()
+    expect(wallClosesRoom(walls, last.wall)).toBe(true)
+    const rooms = detectSpacesForLevel(LEVEL_ID, walls).spaces.filter((space) => !space.isExterior)
+    expect(rooms).toHaveLength(1)
+    const xs = rooms[0]!.polygon.map((point) => point[0])
+    const zs = rooms[0]!.polygon.map((point) => point[1])
+    expect([Math.min(...xs), Math.max(...xs), Math.min(...zs), Math.max(...zs)]).toEqual([
+      0, 5, 0, 4,
+    ])
+  })
+
+  // The Walls variant had become a run that chained every wall from the last; it draws one wall
+  // per two clicks and stops. A Polygon room's sides and a pulled run still chain.
+  test('a Walls segment is one wall; Polygon sides and a pulled run chain', () => {
+    selectWallDrawVariant('walls')
+    expect(wallDraftIsRun()).toBe(false)
+    selectWallDrawVariant('polygon')
+    expect(wallDraftIsRun()).toBe(true)
+    startWallPull({ wallId: 'wall_source', endpoint: 'end', origin: '2d' })
+    expect(useEditor.getState().getContinuation('wall')).toBe('single')
+    expect(wallDraftIsRun()).toBe(true)
+    endWallPullRun()
+    selectWallDrawVariant('walls')
+    expect(wallDraftIsRun()).toBe(false)
+  })
+
+  test('leaving the wall tool ends the run without leaving Select behind', () => {
+    startWallPull({ wallId: 'wall_source', endpoint: 'start', origin: '2d' })
+    expect(useWallPullRun.getState().run?.start).toEqual([-4, 0])
+    useEditor.getState().armToolMode({ mode: 'build', tool: 'slab' })
+    expect(useWallPullRun.getState().run).toBeNull()
+    expect(useEditor.getState().tool).toBe('slab')
+    expect(useEditor.getState().getContinuation('wall')).toBe('room')
+  })
+})

package/src/lib/wall-pull.ts

@@ -0,0 +1,209 @@
+/**
+ * "Pull to continue": a selected wall's end carries a grip that, dragged,
+ * draws the next wall from that end.
+ *
+ * Pressing the grip arms the wall tool on Walls, as a run (each wall starts
+ * where the last ended, `wallDraftIsRun`) already started at the pulled end,
+ * with the pulled wall's type: its assembly, thickness, height and finishes.
+ * The drag shows the next wall; letting go places it, and the run carries on
+ * from its far end, click by click, until Esc, a double-click, closing the loop
+ * or teeing into a wall. Then the editor is back in Select, with the Rooms
+ * shape and wall tool settings the user had.
+ *
+ * Its walls snap as every line run does once started (`wall-run-snap.ts`):
+ * square to the wall before — the pulled one, for the first — or the house's
+ * axes, 15° steps past that, Alt free. The 3D wall tool and the floor plan each
+ * seed their run from this store, the way they share the plain run: whichever
+ * view owns the input places the walls.
+ */
+
+import {
+  type AnyNodeId,
+  getWallCurveFrameAt,
+  getWallThickness,
+  useScene,
+  WALL_CONSTRUCTION_FIELDS,
+  type WallNode,
+  type WallPlanPoint,
+  wallFollowsStorey,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { create } from 'zustand'
+import useEditor from '../store/use-editor'
+import type { ContinuationMode } from './continuation'
+import { getWallDrawVariant, selectWallDrawVariant } from './wall-draw-variant'
+import { publishWallRunFeedback } from './wall-run-snap'
+
+/** The floor plan's affordance id for a wall end's pull grip (a `move-arrow`, variant `pull`). */
+export const WALL_PULL_AFFORDANCE = 'wall-pull'
+
+/** What a pull grip carries: the wall, and which of its ends it pulls from. */
+export type WallPullGripPayload = { wallId: string; endpoint: 'start' | 'end' }
+
+/** The grip's tooltip, in both views. */
+export const WALL_PULL_GRIP_TITLE = 'Drag to draw the next wall'
+
+export type WallPullRun = {
+  /** Bumped per pull, so each view seeds its draft from it once. */
+  seq: number
+  sourceWallId: AnyNodeId
+  levelId: AnyNodeId
+  /** The pulled end, where the run started: its walls can close square back to it. */
+  runStart: WallPlanPoint
+  /** Where the first wall starts: the pulled end. */
+  start: WallPlanPoint
+  /** Unit direction of the pulled wall, pointing out of the pulled end. */
+  reference: WallPlanPoint
+  /** The view the grip was pulled in; the floor plan drafts a 3D pull only beside it. */
+  origin: '2d' | '3d'
+  /** From the press on the grip until it is let go. */
+  dragging: boolean
+}
+
+type WallPullState = { run: WallPullRun | null }
+
+/** The open pull run, if any. */
+export const useWallPullRun = create<WallPullState>(() => ({ run: null }))
+
+/**
+ * Whether the wall tool's open segment belongs to a run: a Polygon room's sides, or the walls
+ * pulled from a wall end. A run's segment holds square to the one before it (`wall-run-snap.ts`)
+ * and the next chains from its end. Otherwise it is a Walls segment: one wall, locked to 15° rays
+ * from its start, and the tool stops once it is placed.
+ */
+export function wallDraftIsRun(): boolean {
+  return getWallDrawVariant() !== 'walls' || useWallPullRun.getState().run !== null
+}
+
+/**
+ * The wall tool defaults that draw walls of `wall`'s type (core
+ * `WALL_CONSTRUCTION_FIELDS`; position, support and paint regions stay with
+ * each wall): its assembly and the thickness it sums to (a plain wall's own
+ * thickness, so the Build panel's types don't take over), its finishes and
+ * trims, and its height when it has its own rather than following the storey
+ * (`storeyHeight`).
+ */
+export function wallPullTypePatch(wall: WallNode, storeyHeight: number | null): Partial<WallNode> {
+  const patch: Record<string, unknown> = {}
+  for (const field of WALL_CONSTRUCTION_FIELDS) {
+    if (wall[field] !== undefined) patch[field] = structuredClone(wall[field])
+  }
+  patch.thickness = getWallThickness(wall)
+  if (!wallFollowsStorey(wall, storeyHeight)) patch.height = wall.height
+  return patch as Partial<WallNode>
+}
+
+/**
+ * The pulled end of `wall` and the direction out of it: along the wall for a
+ * straight one, along its tangent for a curved one.
+ */
+export function wallPullSeed(
+  wall: Pick<WallNode, 'start' | 'end' | 'curveOffset'>,
+  endpoint: 'start' | 'end',
+): { start: WallPlanPoint; reference: WallPlanPoint } | null {
+  const start: WallPlanPoint =
+    endpoint === 'start' ? [wall.start[0], wall.start[1]] : [wall.end[0], wall.end[1]]
+  const tangent = getWallCurveFrameAt(wall as WallNode, endpoint === 'start' ? 0 : 1).tangent
+  const sign = endpoint === 'start' ? -1 : 1
+  const length = Math.hypot(tangent.x, tangent.y)
+  if (!(length > 1e-9)) return null
+  return { start, reference: [(tangent.x / length) * sign, (tangent.y / length) * sign] }
+}
+
+// What the pull changed for its run, put back when it ends.
+let restore: { shape: ContinuationMode; toolDefaults: Record<string, unknown> | null } | null = null
+let stopWatching: (() => void) | null = null
+let pullSeq = 0
+
+/**
+ * Start a pull from `endpoint` of wall `wallId`: arm the Walls run at that end
+ * with the wall's type. `origin` is the view the grip was pressed in. False
+ * when there is no such wall.
+ */
+export function startWallPull(args: {
+  wallId: string
+  endpoint: 'start' | 'end'
+  origin: '2d' | '3d'
+}): boolean {
+  const nodes = useScene.getState().nodes
+  const wall = nodes[args.wallId as AnyNodeId]
+  if (wall?.type !== 'wall' || !wall.parentId) return false
+  const level = nodes[wall.parentId as AnyNodeId]
+  if (level?.type !== 'level') return false
+  const seed = wallPullSeed(wall, args.endpoint)
+  if (!seed) return false
+
+  endWallPullRun()
+  const editor = useEditor.getState()
+  restore = {
+    shape: editor.getContinuation('wall'),
+    toolDefaults: (editor.toolDefaults.wall as Record<string, unknown> | undefined) ?? null,
+  }
+  // The grips belong to a selected wall; drawing goes on without one.
+  useViewer.getState().setSelection({ selectedIds: [], levelId: level.id })
+  selectWallDrawVariant('walls')
+  editor.setToolDefaults('wall', wallPullTypePatch(wall, level.height ?? null))
+  editor.armToolMode({ mode: 'build', tool: 'wall' })
+  pullSeq += 1
+  useWallPullRun.setState({
+    run: {
+      seq: pullSeq,
+      sourceWallId: wall.id as AnyNodeId,
+      levelId: wall.parentId as AnyNodeId,
+      runStart: seed.start,
+      start: seed.start,
+      reference: seed.reference,
+      origin: args.origin,
+      dragging: true,
+    },
+  })
+  watchWallPullRun()
+  return true
+}
+
+function watchWallPullRun() {
+  stopWatching?.()
+  // Leaving the wall tool (another tool, Select) ends the run.
+  const stopEditor = useEditor.subscribe((state) => {
+    if (!(state.mode === 'build' && state.tool === 'wall')) endWallPullRun()
+  })
+  // A release the view did not take as the placing click (off the plan, say)
+  // still ends the drag; the run waits for a click.
+  const onPointerUp = () => releaseWallPullDrag()
+  const target = typeof window === 'undefined' ? null : window
+  target?.addEventListener('pointerup', onPointerUp)
+  target?.addEventListener('pointercancel', onPointerUp)
+  stopWatching = () => {
+    stopEditor()
+    target?.removeEventListener('pointerup', onPointerUp)
+    target?.removeEventListener('pointercancel', onPointerUp)
+  }
+}
+
+/** The grip was let go: the run goes on by clicks. */
+export function releaseWallPullDrag(): void {
+  const run = useWallPullRun.getState().run
+  if (run?.dragging) useWallPullRun.setState({ run: { ...run, dragging: false } })
+}
+
+/**
+ * End the pull run, however its walls ended: back to Select from the wall tool,
+ * with the Rooms shape and wall tool defaults the pull replaced. No-op when no
+ * run is open.
+ */
+export function endWallPullRun(): void {
+  const run = useWallPullRun.getState().run
+  if (!run) return
+  useWallPullRun.setState({ run: null })
+  stopWatching?.()
+  stopWatching = null
+  publishWallRunFeedback(null)
+  const editor = useEditor.getState()
+  if (editor.mode === 'build' && editor.tool === 'wall') editor.armToolMode({ mode: 'select' })
+  const saved = restore
+  restore = null
+  if (!saved) return
+  const after = useEditor.getState()
+  if (after.getContinuation('wall') !== saved.shape) after.setContinuation('wall', saved.shape)
+  after.setToolDefaults('wall', saved.toolDefaults)
+}

package/src/lib/wall-push-line-up.test.ts

@@ -0,0 +1,132 @@
+import { afterAll, afterEach, beforeEach, describe, expect, spyOn, test } from 'bun:test'
+import { clearSceneHistory, nodeRegistry, useScene, WallNode } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import useAlignmentGuides from '../store/use-alignment-guides'
+import useEditor from '../store/use-editor'
+import useInteractionScope from '../store/use-interaction-scope'
+import { installImmediateAnimationFrames } from '../test-utils/immediate-animation-frames'
+import { seedRoundTripScene } from '../test-utils/live-gesture-round-trip'
+import { cancelGestures } from './gesture-lifecycle'
+import { runWallPushDrag, wallPushHandles } from './room-handle-drag'
+import { nextInStack } from './selection-cycle'
+
+// A side arrow push lines the wall up with a parallel wall before the grid, as
+// the wall moves do; Alt pushes it free.
+
+const LEVEL = 'level_push_line_up'
+const stubbed: string[] = []
+let stop = () => {}
+let restoreFrames = () => {}
+let registry: { mockRestore: () => void } | null = null
+
+const nodes = () => useScene.getState().nodes
+const eastWall = () =>
+  Object.values(nodes()).find(
+    (n): n is WallNode => n.type === 'wall' && n.start[0] === 6 && n.end[0] === 6,
+  )!
+
+function pointer(type: 'pointermove' | 'pointerup', clientX: number, altKey = false) {
+  window.dispatchEvent(Object.assign(new Event(type), { clientX, clientY: 0, altKey }))
+}
+
+beforeEach(() => {
+  restoreFrames = installImmediateAnimationFrames()
+  if (!globalThis.document) {
+    globalThis.document = { body: { style: { cursor: '' } } } as unknown as Document
+    stubbed.push('document')
+  }
+  if (!globalThis.window) {
+    globalThis.window = new EventTarget() as Window & typeof globalThis
+    stubbed.push('window')
+  }
+  // The nodes package that registers walls is not loaded here.
+  const get = nodeRegistry.get.bind(nodeRegistry)
+  registry = spyOn(nodeRegistry, 'get').mockImplementation(((kind: string) =>
+    kind === 'wall' ? { snapProfile: 'structural' } : get(kind)) as typeof nodeRegistry.get)
+  cancelGestures('cancel')
+  useInteractionScope.getState().end()
+  useScene.temporal.getState().resume()
+  ;({ stop } = seedRoundTripScene('building_push_line_up', LEVEL))
+  // An outside wall standing apart, 0.3 m east of the room's east wall line.
+  const apart = WallNode.parse({
+    id: 'wall_apart',
+    start: [6.3, 6],
+    end: [6.3, 9],
+    frontSide: 'exterior',
+    backSide: 'interior',
+  })
+  useScene.getState().applyNodeChanges({ create: [{ node: apart, parentId: LEVEL as never }] })
+  useViewer.getState().setSelection({
+    buildingId: 'building_push_line_up',
+    levelId: LEVEL,
+    selectedIds: [],
+  })
+  useEditor.setState({ phase: 'building', mode: 'select', gridSnapStep: 0.5 })
+  useEditor.getState().setSnappingMode('polygon', 'grid')
+  clearSceneHistory()
+})
+
+afterEach(() => {
+  cancelGestures('cancel')
+  stop()
+  registry?.mockRestore()
+  registry = null
+  restoreFrames()
+})
+
+afterAll(async () => {
+  // Let the click-swallow timers fire before the stubs go.
+  await new Promise((resolve) => setTimeout(resolve, 350))
+  for (const key of stubbed.splice(0)) delete (globalThis as Record<string, unknown>)[key]
+})
+
+function startPush() {
+  const handle = wallPushHandles(eastWall(), nodes()).find((h) => h.outward[0] > 0.5)!
+  runWallPushDrag({ handle, levelId: LEVEL, from: 0, along: (clientX) => clientX })
+  return eastWall().id
+}
+
+describe('wall push line-up', () => {
+  test('a push near a parallel outside wall lands on its line, guide shown while it holds', () => {
+    expect(eastWall().frontSide === 'exterior' || eastWall().backSide === 'exterior').toBe(true)
+    const id = startPush()
+    pointer('pointermove', 0.24)
+    expect(useAlignmentGuides.getState().draft?.lines).toHaveLength(1)
+    pointer('pointerup', 0.24)
+    expect(useAlignmentGuides.getState().draft).toBeNull()
+    const wall = nodes()[id as never] as WallNode
+    expect(wall.start[0]).toBeCloseTo(6.3, 9)
+    expect(wall.end[0]).toBeCloseTo(6.3, 9)
+  })
+
+  test('away from any line the push still steps on the grid', () => {
+    const id = startPush()
+    pointer('pointermove', 0.9)
+    pointer('pointerup', 0.9)
+    expect((nodes()[id as never] as WallNode).start[0]).toBeCloseTo(7, 9)
+  })
+
+  test('Alt pushes it free', () => {
+    const id = startPush()
+    pointer('pointermove', 0.24, true)
+    expect(useAlignmentGuides.getState().draft).toBeNull()
+    pointer('pointerup', 0.24, true)
+    expect((nodes()[id as never] as WallNode).start[0]).toBeCloseTo(6.24, 9)
+  })
+})
+
+describe('Tab through stacked objects', () => {
+  test('steps to the next one under the pointer and wraps round', () => {
+    const stack = ['wall_top', 'wall_inside', 'zone_room']
+    expect(nextInStack(stack, [], false)).toBe('wall_top')
+    expect(nextInStack(stack, ['wall_top'], false)).toBe('wall_inside')
+    expect(nextInStack(stack, ['zone_room'], false)).toBe('wall_top')
+  })
+
+  test('Shift+Tab steps back; a selection elsewhere starts at the top', () => {
+    const stack = ['wall_top', 'wall_inside']
+    expect(nextInStack(stack, ['wall_top'], true)).toBe('wall_inside')
+    expect(nextInStack(stack, ['wall_other'], true)).toBe('wall_top')
+    expect(nextInStack([], ['wall_top'], false)).toBeNull()
+  })
+})

package/src/lib/wall-region-list.ts

@@ -1,6 +1,10 @@
 import {
   type AnyNode,
   getCatalogMaterialById,
+  getLinearUnitLabel,
+  getMaterialSwatch,
+  type LinearUnit,
+  metersToLinearUnit,
   parseMaterialRef,
   roomSideFaces,
   type SceneMaterial,
@@ -10,7 +14,6 @@ import {
   type WallFaceRegion,
   type WallNode,
 } from '@pascal-app/core'
-import { getLinearUnitLabel, type LinearUnit, metersToLinearUnit } from './measurements'
 
 // Rows for the wall panel's "Paint regions" list: finish swatch + name, the
 // face in room terms when the wall has a room on exactly one side, and the
@@ -18,7 +21,13 @@ import { getLinearUnitLabel, type LinearUnit, metersToLinearUnit } from './measu
 
 const FALLBACK_SWATCH_COLOR = '#d4d4d8'
 
-export type WallRegionFinish = { name: string; color: string; imageUrl?: string }
+export type WallRegionFinish = {
+  name: string
+  color: string
+  imageUrl?: string
+  /** The image is a white albedo `color` tints: multiply it (a siding's profile). */
+  tinted?: boolean
+}
 
 export type WallRegionRow = {
   id: string
@@ -63,11 +72,13 @@ export function describeRegionFinish(
   }
   if (parsed?.kind === 'library') {
     const item = getCatalogMaterialById(parsed.id)
-    const imageUrl = item?.previewThumbnailUrl ?? item?.preset.maps.albedoMap
+    if (!item) return { name: 'Library finish', color: FALLBACK_SWATCH_COLOR }
+    const swatch = getMaterialSwatch(item)
     return {
-      name: item?.label ?? 'Library finish',
-      color: item?.previewColor ?? item?.preset.mapProperties.color ?? FALLBACK_SWATCH_COLOR,
-      ...(imageUrl ? { imageUrl } : {}),
+      name: item.label,
+      color: swatch.color,
+      ...(swatch.imageUrl ? { imageUrl: swatch.imageUrl } : {}),
+      ...(swatch.tinted ? { tinted: true } : {}),
     }
   }
   return { name: 'Custom finish', color: FALLBACK_SWATCH_COLOR }