@pascal-app/editor 1.0.6 → 1.1.0

package/src/lib/separator-edit.ts

@@ -0,0 +1,179 @@
+import {
+  type AnyNode,
+  type AnyNodeId,
+  joinedSeparatorIds,
+  runAsSingleSceneHistoryStep,
+  type SeparatorNode,
+  setSeparatorEnd,
+  useLiveNodeOverrides,
+  useScene,
+  type WallNode,
+  type WallPlanPoint,
+} from '@pascal-app/core'
+import { runRoomHandleDrag } from './room-handle-drag'
+import { applyRoomPlan } from './room-structure-commands'
+import { levelSeparatorLines } from './separator-lines'
+import { isWallRunFree, publishWallRunFeedback, snapWallRunDraftPoint } from './wall-run-snap'
+
+/** Scope label of an invisible wall's end drag (its 3D grip). */
+export const SEPARATOR_END_DRAG_LABEL = 'separator-end'
+
+const SAME_POINT = 1e-6
+
+export type SeparatorEndDrag = {
+  /** The invisible walls the drag may move: the dragged one and those it can carry. */
+  affectedIds: AnyNodeId[]
+  /** Snaps the end to `point` (level plan) and previews it; `detach` (Alt) leaves the joined ones. */
+  move: (point: WallPlanPoint, detach: boolean) => void
+  /** Whether the end has moved somewhere it may stay. */
+  canCommit: () => boolean
+  /** Writes the end as one undo step; false when it did not move or core refused it. */
+  commit: () => boolean
+  /** Drops the preview; writes nothing. */
+  cancel: () => void
+}
+
+/**
+ * An invisible wall's end dragged: its handle on the plan, its grip in 3D. The
+ * end snaps as a wall run does — square to the house or to its own line, its
+ * length on the grid, onto wall and invisible-wall ends and bodies, so it
+ * comes back together on its old corner — the invisible walls joined at that
+ * end follow it live, and the release writes it once (`setSeparatorEnd`).
+ * The scene is untouched until then.
+ */
+export function beginSeparatorEndDrag(
+  separatorId: string,
+  endpoint: 'start' | 'end',
+): SeparatorEndDrag | null {
+  const nodes = useScene.getState().nodes
+  const separator = nodes[separatorId as AnyNodeId]
+  if (separator?.type !== 'separator') return null
+  const from = separator[endpoint]
+  const fixed = endpoint === 'start' ? separator.end : separator.start
+  const levelId = separator.parentId
+  const atFrom = (point: WallPlanPoint) =>
+    Math.abs(point[0] - from[0]) <= SAME_POINT && Math.abs(point[1] - from[1]) <= SAME_POINT
+  const others = Object.values(nodes).filter(
+    (node): node is SeparatorNode =>
+      node.type === 'separator' && node.parentId === levelId && node.id !== separator.id,
+  )
+  // The ends following this one are no snap targets while they do: they sit where it left.
+  const joined = joinedSeparatorIds(nodes, separator, endpoint)
+  const walls = Object.values(nodes).filter(
+    (node): node is WallNode => node.type === 'wall' && node.parentId === levelId,
+  )
+  const targets = {
+    attached: [
+      ...walls,
+      ...levelSeparatorLines(nodes, levelId, new Set([separator.id, ...joined])),
+    ],
+    detached: [...walls, ...levelSeparatorLines(nodes, levelId, new Set([separator.id]))],
+  }
+  const length = Math.hypot(from[0] - fixed[0], from[1] - fixed[1])
+  const reference: WallPlanPoint | null =
+    length > 1e-9 ? [(from[0] - fixed[0]) / length, (from[1] - fixed[1]) / length] : null
+  let target: { point: WallPlanPoint; detach: boolean } | null = null
+  const previewIds = new Set<AnyNodeId>()
+  const preview = (updates: Array<[AnyNodeId, Partial<AnyNode>]>) => {
+    const overrides = useLiveNodeOverrides.getState()
+    const next = new Set(updates.map(([id]) => id))
+    for (const id of previewIds) {
+      if (next.has(id)) continue
+      overrides.clear(id)
+      useScene.getState().markDirty(id)
+      previewIds.delete(id)
+    }
+    if (updates.length) overrides.setMany(updates)
+    for (const id of next) {
+      previewIds.add(id)
+      useScene.getState().markDirty(id)
+    }
+  }
+  return {
+    affectedIds: [separator.id, ...others.map((node) => node.id)] as AnyNodeId[],
+    move(point, detach) {
+      const snap = snapWallRunDraftPoint({
+        point,
+        start: fixed,
+        runStart: fixed,
+        reference,
+        walls: detach ? targets.detached : targets.attached,
+        free: isWallRunFree(null),
+      })
+      publishWallRunFeedback(snap)
+      const plan = setSeparatorEnd(nodes, { separatorId, endpoint, point: snap.point, detach })
+      if (plan.conflicts?.length) {
+        target = null
+        preview([])
+        return
+      }
+      target = { point: snap.point, detach }
+      preview(
+        plan.changes.flatMap(
+          (change): Array<[AnyNodeId, Partial<AnyNode>]> =>
+            change.op === 'update' ? [[change.id as AnyNodeId, change.data]] : [],
+        ),
+      )
+    },
+    canCommit: () => !!target && !atFrom(target.point),
+    commit() {
+      preview([])
+      publishWallRunFeedback(null)
+      if (!target || atFrom(target.point)) return false
+      const current = useScene.getState().nodes
+      if (current[separatorId as AnyNodeId]?.type !== 'separator') return false
+      const plan = setSeparatorEnd(current, { separatorId, endpoint, ...target })
+      return runAsSingleSceneHistoryStep(useScene, () => applyRoomPlan(plan))
+    },
+    cancel() {
+      preview([])
+      publishWallRunFeedback(null)
+    },
+  }
+}
+
+/**
+ * An invisible wall's 3D end grip: `toPlan` reads the pointer on the floor the
+ * separator lies on, in level plan metres. One gesture under the lifecycle
+ * owner (Escape or ⌘Z cancels), one undo step; Alt leaves the joined
+ * invisible walls where they are.
+ */
+export function runSeparatorEndDrag({
+  separatorId,
+  endpoint,
+  levelId,
+  toPlan,
+}: {
+  separatorId: string
+  endpoint: 'start' | 'end'
+  levelId: string
+  toPlan: (clientX: number, clientY: number) => WallPlanPoint | null
+}) {
+  const drag = beginSeparatorEndDrag(separatorId, endpoint)
+  if (!drag) return null
+  let altHeld = false
+  const trackAlt = (event: KeyboardEvent | PointerEvent) => {
+    altHeld = event.altKey
+  }
+  const events = ['pointermove', 'keydown', 'keyup'] as const
+  for (const type of events) window.addEventListener(type, trackAlt, true)
+  const stop = () => {
+    for (const type of events) window.removeEventListener(type, trackAlt, true)
+  }
+  return runRoomHandleDrag<WallPlanPoint>({
+    label: SEPARATOR_END_DRAG_LABEL,
+    nodeId: separatorId,
+    levelId,
+    requires: [separatorId],
+    sample: toPlan,
+    onValue: (point) => drag.move(point, altHeld),
+    onCommit: () => {
+      stop()
+      drag.commit()
+    },
+    onCancel: () => {
+      stop()
+      drag.cancel()
+    },
+  })
+}

package/src/lib/separator-lines.ts

@@ -0,0 +1,38 @@
+import type { AnyNode, SeparatorNode, WallNode } from '@pascal-app/core'
+
+/**
+ * Invisible walls (room separators) as the wall snapping reads walls: a line
+ * with no thickness. A drafted or dragged invisible-wall end catches another's
+ * ends and body this way, and a pushed one lines up with them, as walls do
+ * with walls. Never written to the scene.
+ */
+export function separatorWallLine(separator: SeparatorNode): WallNode {
+  return {
+    object: 'node',
+    id: separator.id as string as WallNode['id'],
+    type: 'wall',
+    name: separator.name,
+    parentId: separator.parentId,
+    visible: true,
+    metadata: {},
+    children: [],
+    start: separator.start,
+    end: separator.end,
+    thickness: 0,
+    frontSide: 'unknown',
+    backSide: 'unknown',
+  }
+}
+
+/** The invisible walls on `levelId` as wall lines, leaving out `exclude`. */
+export function levelSeparatorLines(
+  nodes: Readonly<Record<string, AnyNode>>,
+  levelId: string | null,
+  exclude: ReadonlySet<string> = new Set(),
+): WallNode[] {
+  return Object.values(nodes).flatMap((node) =>
+    node.type === 'separator' && node.parentId === levelId && !exclude.has(node.id)
+      ? [separatorWallLine(node)]
+      : [],
+  )
+}

package/src/lib/sfx-bus.ts

@@ -1,10 +1,11 @@
-import type { TerrainVerb } from '@pascal-app/core'
+import { emitter, type InteractionSound, type TerrainVerb } from '@pascal-app/core'
 import mitt from 'mitt'
 import useAudio from '../store/use-audio'
 import {
   disposeSFX,
   type LoopSFXName,
   playSFX,
+  type SFXName,
   startLoopSFX,
   stopLoopSFX,
   updateSFXVolumes,
@@ -74,6 +75,29 @@ const handleTerrainSculptStart = (verb: TerrainVerb) => startLoopSFX(TERRAIN_LOO
 const handleTerrainSculptStop = () => stopLoopSFX()
 let unsubscribeAudio: (() => void) | null = null
 
+/** Windows ride the door recordings, softer: a sash weighs less than a leaf. */
+const INTERACTION_SFX: Record<InteractionSound, [SFXName, number]> = {
+  'door-open': ['doorOpen', 1],
+  'door-swing': ['doorSwing', 1],
+  'door-close': ['doorClose', 1],
+  'window-open': ['doorOpen', 0.6],
+  'window-swing': ['doorSwing', 0.6],
+  'window-close': ['doorClose', 0.6],
+  garage: ['garageDoor', 1],
+  'shutters-open': ['shuttersOpen', 1],
+  'shutters-close': ['shuttersClose', 1],
+  // Cabinet doors and drawers: the panel recordings, as the marketing house plays its cabinets.
+  'panel-open': ['shuttersOpen', 0.75],
+  'panel-swing': ['doorSwing', 0.45],
+  'panel-close': ['shuttersClose', 0.75],
+  'switch-on': ['switchOn', 1],
+  'switch-off': ['switchOff', 1],
+}
+const handleInteractionSound = (sound: InteractionSound) => {
+  const [name, volumeMultiplier] = INTERACTION_SFX[sound]
+  playSFX(name, { volumeMultiplier })
+}
+
 /**
  * Initialize SFX Bus - connects SFX events to actual sound playback.
  * Safe to call multiple times; re-registration is a no-op once initialized.
@@ -100,6 +124,7 @@ export function initSFXBus() {
   sfxEmitter.on('sfx:turn-needs-input', handleTurnNeedsInput)
   sfxEmitter.on('sfx:terrain-sculpt-start', handleTerrainSculptStart)
   sfxEmitter.on('sfx:terrain-sculpt-stop', handleTerrainSculptStop)
+  emitter.on('interaction:sound', handleInteractionSound)
   unsubscribeAudio = useAudio.subscribe(updateSFXVolumes)
   updateSFXVolumes()
 }
@@ -125,6 +150,7 @@ export function disposeSFXBus() {
     sfxEmitter.off('sfx:turn-needs-input', handleTurnNeedsInput)
     sfxEmitter.off('sfx:terrain-sculpt-start', handleTerrainSculptStart)
     sfxEmitter.off('sfx:terrain-sculpt-stop', handleTerrainSculptStop)
+    emitter.off('interaction:sound', handleInteractionSound)
     unsubscribeAudio?.()
     unsubscribeAudio = null
     sfxBusInitialized = false

package/src/lib/sfx-player.ts

@@ -126,6 +126,22 @@ export const SFX: Record<string, SFXConfig> = {
   turnDone: { src: '/audios/sfx/turn_done.mp3' },
   turnFailed: { src: '/audios/sfx/turn_failed.mp3' },
   turnNeedsInput: { src: '/audios/sfx/turn_needs_input.mp3' },
+  // Operating the building from a viewer's callout or a walkthrough: recorded
+  // door and shutter movements; the switches and the viewer's hover, select and
+  // deselect ticks are the marketing house's synth cues (`scripts/synth-viewer-cues.ts`),
+  // already mixed against the doors, so they play at full volume without jitter.
+  doorOpen: { src: '/audios/sfx/door_open.mp3', rateRange: [0.96, 1.04], volumeRange: [0.9, 1] },
+  doorClose: { src: '/audios/sfx/door_close.mp3', rateRange: [0.96, 1.04], volumeRange: [0.9, 1] },
+  // Air moving as a leaf swings shut, ahead of the latch (`scripts/synth-viewer-cues.ts`).
+  doorSwing: { src: '/audios/sfx/door_swing.mp3', rateRange: [0.97, 1.03] },
+  garageDoor: { src: '/audios/sfx/garage_door.mp3', volumeRange: [0.9, 1] },
+  shuttersOpen: { src: '/audios/sfx/shutters_open.mp3', rateRange: [0.96, 1.04] },
+  shuttersClose: { src: '/audios/sfx/shutters_close.mp3', rateRange: [0.96, 1.04] },
+  switchOn: { src: '/audios/sfx/switch_on.mp3' },
+  switchOff: { src: '/audios/sfx/switch_off.mp3' },
+  viewerHover: { src: '/audios/sfx/viewer_hover.mp3', minIntervalMs: 95 },
+  viewerSelect: { src: '/audios/sfx/viewer_select.mp3', minIntervalMs: 90 },
+  viewerDeselect: { src: '/audios/sfx/viewer_deselect.mp3' },
 } as const
 
 export type SFXName = keyof typeof SFX

package/src/lib/snapping-mode.test.ts

@@ -106,6 +106,8 @@ describe('snapContextOf (profile-driven, node-declared)', () => {
     roof: 'structural',
     zone: 'structural',
     block: 'structural',
+    door: 'item',
+    window: 'item',
   }
   const profileOf = (t: string) => declared[t]
   const profileOfNode = (id: string) =>
@@ -173,7 +175,7 @@ describe('snapContextOf (profile-driven, node-declared)', () => {
   })
 
   it('an undeclared kind (no snapProfile) gets no snap context', () => {
-    expect(ctx({ kind: 'moving', nodeType: 'door' })).toBeNull()
+    expect(ctx({ kind: 'moving', nodeType: 'unknown_plugin_kind' })).toBeNull()
     expect(ctx({ kind: 'idle' }, 'build', 'shelf')).toBeNull()
   })
 
@@ -205,4 +207,24 @@ describe('snapContextOf (profile-driven, node-declared)', () => {
       }),
     ).toBe('polygon')
   })
+  it('moving scope resolves active snap context when moving a window or door', () => {
+    expect(
+      snapContextOf({
+        scope: { kind: 'moving', nodeType: 'window' },
+        mode: 'select',
+        tool: null,
+        profileOf,
+        profileOfNode,
+      }),
+    ).toBe('item')
+    expect(
+      snapContextOf({
+        scope: { kind: 'moving', nodeType: 'door' },
+        mode: 'select',
+        tool: null,
+        profileOf,
+        profileOfNode,
+      }),
+    ).toBe('item')
+  })
 })

package/src/lib/tool-cursor-icon.ts

@@ -1,3 +1,4 @@
+import type { MessageDescriptor } from '@pascal-app/core'
 import type { ContinuationMode } from './continuation'
 import { getWallDrawVariantInfo, wallDrawVariantOf } from './wall-draw-variant'
 
@@ -5,7 +6,10 @@ import { getWallDrawVariantInfo, wallDrawVariantOf } from './wall-draw-variant'
  * The cursor bubble's icon for the wall tool: the Rooms variant in hand
  * (Rectangle / Polygon / Walls), the same art as the Build panel tile.
  */
-export function wallCursorIcon(mode: ContinuationMode): { label: string; iconSrc: string } {
+export function wallCursorIcon(mode: ContinuationMode): {
+  label: MessageDescriptor
+  iconSrc: string
+} {
   const variant = getWallDrawVariantInfo(wallDrawVariantOf(mode))
   return { label: variant.title, iconSrc: variant.iconSrc }
 }

package/src/lib/tool-shortcuts.ts

@@ -0,0 +1,130 @@
+import useEditor from '../store/use-editor'
+import useInteractionScope from '../store/use-interaction-scope'
+import { openSidebarPanel } from './sidebar-panel'
+
+/**
+ * The single-key tools of the editor, and the keys tooltips print for them.
+ *
+ * The drafting tools (Door, Window, Stairs, Roof) sit on Shift with their
+ * letter, as the bare key was taken: W/A/S/D pan the view in 2D and 3D,
+ * R flips or rotates the selection and the armed placement, and E operates the
+ * selected door, window or cabinet. Pan stands down for those Shift chords
+ * (`claimsKeyboardPan`), and R/E still work bare as before.
+ */
+export type ToolShortcutId =
+  | 'select'
+  | 'delete'
+  | 'wall'
+  | 'item'
+  | 'zone'
+  | 'measurement'
+  | 'paint'
+  | 'terrain'
+  | 'door'
+  | 'window'
+  | 'stair'
+  | 'roof'
+
+type ArmedByChord = {
+  /** `KeyboardEvent.code`: the physical key, as pan reads it. */
+  code: string
+  shift: boolean
+}
+
+/** Keys as `ShortcutToken` names them. */
+export const TOOL_SHORTCUT_KEYS: Record<ToolShortcutId, readonly string[]> = {
+  select: ['V'],
+  delete: ['X'],
+  wall: ['B'],
+  item: ['F'],
+  zone: ['Z'],
+  measurement: ['M'],
+  paint: ['P'],
+  terrain: ['G'],
+  door: ['Shift', 'D'],
+  window: ['Shift', 'W'],
+  stair: ['Shift', 'S'],
+  roof: ['Shift', 'R'],
+}
+
+/** The tools this module arms itself; the older keys stay in `use-keyboard`. */
+const CHORDS: Partial<Record<ToolShortcutId, ArmedByChord>> = {
+  door: { code: 'KeyD', shift: true },
+  window: { code: 'KeyW', shift: true },
+  stair: { code: 'KeyS', shift: true },
+  roof: { code: 'KeyR', shift: true },
+}
+
+/** A tool's shortcut as a tooltip prints it: `Shift+D`, `B`. Null for a tool without one. */
+export function toolShortcutLabel(tool: string): string | null {
+  const keys = TOOL_SHORTCUT_KEYS[tool as ToolShortcutId]
+  return keys ? keys.join('+') : null
+}
+
+/** A tool's tooltip with its shortcut: `Door (Shift+D)`; the bare label when it has none. */
+export function withToolShortcut(label: string, tool: string | undefined): string {
+  const shortcut = tool ? toolShortcutLabel(tool) : null
+  return shortcut ? `${label} (${shortcut})` : label
+}
+
+// Gestures a held Shift modifies (free move, free rotate, force place): a Shift
+// chord there is part of the gesture, never a tool switch.
+const SHIFT_GESTURE_SCOPES = new Set([
+  'room-divide',
+  'placing',
+  'moving',
+  'handle-drag',
+  'mesh-editing',
+  'reshaping',
+  'box-select',
+  'painting',
+  'sculpting',
+  'pointing',
+])
+
+/**
+ * The tool a key press arms, or null: the physical key and Shift, with no other
+ * modifier and no repeat. A Shift chord is off while a gesture holds Shift, so
+ * Shift+WASD keeps panning there.
+ */
+export function toolShortcutForKey(
+  event: Pick<KeyboardEvent, 'code' | 'shiftKey' | 'metaKey' | 'ctrlKey' | 'altKey' | 'repeat'>,
+): ToolShortcutId | null {
+  if (event.metaKey || event.ctrlKey || event.altKey || event.repeat) return null
+  const entry = Object.entries(CHORDS).find(
+    ([, chord]) => chord.code === event.code && chord.shift === event.shiftKey,
+  )
+  if (!entry) return null
+  if (event.shiftKey && SHIFT_GESTURE_SCOPES.has(useInteractionScope.getState().scope.kind))
+    return null
+  return entry[0] as ToolShortcutId
+}
+
+/** Whether WASD pan must leave this key to a tool shortcut (Shift+W/S/D). */
+export function claimsKeyboardPan(
+  event: Pick<KeyboardEvent, 'code' | 'shiftKey' | 'metaKey' | 'ctrlKey' | 'altKey' | 'repeat'>,
+): boolean {
+  // A held key repeats: once claimed, the repeats stay claimed too. (Fields one by
+  // one: a DOM event's are getters a spread would drop.)
+  return (
+    event.shiftKey &&
+    toolShortcutForKey({
+      code: event.code,
+      shiftKey: event.shiftKey,
+      metaKey: event.metaKey,
+      ctrlKey: event.ctrlKey,
+      altKey: event.altKey,
+      repeat: false,
+    }) !== null
+  )
+}
+
+/** Arm the tool `id` names from the keyboard, as its Build panel tile does, with the panel showing. */
+export function armToolShortcut(id: ToolShortcutId): void {
+  const editor = useEditor.getState()
+  editor.setPhase('building')
+  openSidebarPanel(['build'])
+  // A raw tool, as a tile click arms it: no preset carried over from earlier.
+  editor.setToolDefaults(id, null)
+  editor.armToolMode({ mode: 'build', tool: id })
+}

package/src/lib/viewer-selection.test.ts

@@ -38,6 +38,10 @@ import {
   viewerSidebarSections,
 } from './viewer-selection'
 
+const english = {
+  _: (descriptor: { id: string; message?: string }) => descriptor.message ?? descriptor.id,
+}
+
 const buildingId = 'building_viewer'
 const levelId = 'level_viewer'
 const upperId = 'level_viewer_upper'
@@ -251,10 +255,10 @@ describe('viewer rooms by name', () => {
 
   test('the hover pill names what a click would select', () => {
     const { nodes, kitchen } = scene()
-    expect(viewerHoverLabel(sofa.id, nodes)).toBe('Sofa')
-    expect(viewerHoverLabel(kitchen, nodes)).toBe('Kitchen')
-    expect(viewerHoverLabel('wall_shared', nodes)).toBe('Wall')
-    expect(viewerHoverLabel(null, nodes)).toBeNull()
+    expect(viewerHoverLabel(sofa.id, nodes, english)).toBe('Sofa')
+    expect(viewerHoverLabel(kitchen, nodes, english)).toBe('Kitchen')
+    expect(viewerHoverLabel('wall_shared', nodes, english)).toBe('Wall')
+    expect(viewerHoverLabel(null, nodes, english)).toBeNull()
   })
 })
 
@@ -262,7 +266,7 @@ describe('viewer breadcrumb', () => {
   test('an item reads floor › room › item; the room is shown, not selected', () => {
     const { nodes, kitchen } = scene()
     const selection = { buildingId, levelId, zoneId: null, selectedIds: [sofa.id] }
-    const crumbs = viewerBreadcrumb(selection as ViewerSelection, null, nodes, (id) =>
+    const crumbs = viewerBreadcrumb(selection as ViewerSelection, null, nodes, english, (id) =>
       id === sofa.id ? kitchen : null,
     )
     expect(crumbs.map((crumb) => [crumb.kind, crumb.label])).toEqual([
@@ -277,18 +281,20 @@ describe('viewer breadcrumb', () => {
     const unit = UnitNode.parse({ id: 'unit_a', name: 'Apartment A', parentId: buildingId })
     const { nodes, living } = scene([unit])
     const room = { buildingId, levelId, zoneId: living, selectedIds: [] } as ViewerSelection
-    expect(viewerBreadcrumb(room, null, nodes).map((crumb) => crumb.label)).toEqual([
+    expect(viewerBreadcrumb(room, null, nodes, english).map((crumb) => crumb.label)).toEqual([
       'House',
       'Ground floor',
       'Living',
     ])
     const floor = { ...room, zoneId: null }
-    expect(viewerBreadcrumb(floor, 'unit_a', nodes).map((crumb) => crumb.label)).toEqual([
+    expect(viewerBreadcrumb(floor, 'unit_a', nodes, english).map((crumb) => crumb.label)).toEqual([
       'House',
       'Ground floor',
       'Apartment A',
     ])
-    expect(viewerBreadcrumb(nothing, null, nodes).map((crumb) => crumb.kind)).toEqual(['building'])
+    expect(viewerBreadcrumb(nothing, null, nodes, english).map((crumb) => crumb.kind)).toEqual([
+      'building',
+    ])
   })
 })
 
@@ -305,25 +311,21 @@ describe('viewer sidebar', () => {
       ],
     })
     const plain = scene([terrace])
-    expect(viewerSidebarSections(levelId, plain.nodes).map((section) => section.kind)).toEqual([
-      'rooms',
-      'zones',
-    ])
-    expect(viewerSidebarSections(levelId, plain.nodes)[0]!.rows.map((row) => row.label)).toEqual([
-      'Kitchen',
-      'Living',
-    ])
-    expect(viewerSidebarSections(upperId, plain.nodes)).toEqual([])
+    expect(
+      viewerSidebarSections(levelId, plain.nodes, english).map((section) => section.kind),
+    ).toEqual(['rooms', 'zones'])
+    expect(
+      viewerSidebarSections(levelId, plain.nodes, english)[0]!.rows.map((row) => row.label),
+    ).toEqual(['Kitchen', 'Living'])
+    expect(viewerSidebarSections(upperId, plain.nodes, english)).toEqual([])
 
     const unit = UnitNode.parse({ id: 'unit_a', name: 'Apartment A', parentId: buildingId })
     const withUnit = scene([unit, terrace])
     withUnit.nodes.unit_a = { ...unit, members: [withUnit.kitchen as ZoneNode['id']] }
-    expect(viewerSidebarSections(levelId, withUnit.nodes).map((section) => section.kind)).toEqual([
-      'units',
-      'rooms',
-      'zones',
-    ])
-    expect(viewerSidebarSections(upperId, withUnit.nodes)).toEqual([])
+    expect(
+      viewerSidebarSections(levelId, withUnit.nodes, english).map((section) => section.kind),
+    ).toEqual(['units', 'rooms', 'zones'])
+    expect(viewerSidebarSections(upperId, withUnit.nodes, english)).toEqual([])
   })
 })
 
@@ -546,7 +548,9 @@ test('baked and parametric picks agree for room faces, mezzanine plates, doors,
   const baked = resolveGlbPick([{ object: foreign, point: new Vector3() }], identity)
   expect(resolveViewerClick(nothing, baked, nodes)).toEqual(nothing)
   expect(
-    viewerBreadcrumb(nothing, null, nodes).some((crumb) => crumb.label === 'Unpublished name'),
+    viewerBreadcrumb(nothing, null, nodes, english).some(
+      (crumb) => crumb.label === 'Unpublished name',
+    ),
   ).toBe(false)
 })
 

package/src/lib/viewer-selection.ts

@@ -11,6 +11,7 @@ import {
   type LevelNode,
   type NodeEvent,
   resolveSelectionProxyId,
+  roomFloorElevation,
   sceneRegistry,
   type UnitNode,
   type ZoneNode,
@@ -29,7 +30,7 @@ import {
 } from 'three'
 import { useBelowGrade } from './below-grade'
 import { nodeDisplayLabel } from './node-display-label'
-import { roomFloorElevation } from './room-handle-drag'
+import { type DescriptorTranslator, displayRoomName } from './room-name-messages'
 import { RoomSelectionIndex, type RoomSelectionRecord, resolveRoomHit } from './room-selection'
 import type { SelectionModifierKeys } from './selection-routing'
 
@@ -455,8 +456,16 @@ export type ViewerCrumb = {
   label: string
 }
 
-export function zoneLabel(zone: ZoneNode): string {
-  return zone.name?.trim() || (zone.spaceRole === 'room' ? 'Room' : 'Zone')
+/**
+ * The viewer chrome's name for a zone, in the editor's UI language (the scene
+ * keeps its stored name). `i18n` is the caller's scoped `usePascalI18n()`.
+ */
+export function zoneLabel(zone: ZoneNode, i18n: DescriptorTranslator): string {
+  const name = zone.name?.trim()
+  if (name) return displayRoomName(name, i18n)
+  return zone.spaceRole === 'room'
+    ? i18n._({ id: 'editor.roomLabel.room', message: 'Room' })
+    : i18n._({ id: 'editor.roomLabel.zone', message: 'Zone' })
 }
 
 /**
@@ -468,6 +477,7 @@ export function viewerBreadcrumb(
   selection: ViewerSelection,
   focusedUnitId: string | null,
   nodes: ViewerNodes,
+  i18n: DescriptorTranslator,
   roomOf: (nodeId: string, levelId: string) => string | null = () => null,
 ): ViewerCrumb[] {
   const crumbs: ViewerCrumb[] = []
@@ -486,7 +496,8 @@ export function viewerBreadcrumb(
   if (unit?.type === 'unit') crumbs.push({ kind: 'unit', id: unit.id, label: unit.name })
   const roomId = selection.zoneId ?? (element ? roomOf(element.id, level.id) : null)
   const room = roomId ? nodes[roomId] : undefined
-  if (room?.type === 'zone') crumbs.push({ kind: 'room', id: room.id, label: zoneLabel(room) })
+  if (room?.type === 'zone')
+    crumbs.push({ kind: 'room', id: room.id, label: zoneLabel(room, i18n) })
   if (element) crumbs.push({ kind: 'node', id: element.id, label: nodeDisplayLabel(element) })
   return crumbs
 }
@@ -531,14 +542,18 @@ export type ViewerSidebarSection = { kind: 'units' | 'rooms' | 'zones'; rows: Vi
  * What sits under the current floor: its units, its rooms, its other zones.
  * An empty section is left out.
  */
-export function viewerSidebarSections(levelId: string, nodes: ViewerNodes): ViewerSidebarSection[] {
+export function viewerSidebarSections(
+  levelId: string,
+  nodes: ViewerNodes,
+  i18n: DescriptorTranslator,
+): ViewerSidebarSection[] {
   const zones = Object.values(nodes).filter(
     (node): node is ZoneNode =>
       node.type === 'zone' && node.parentId === levelId && node.visible !== false,
   )
   const zoneRow = (zone: ZoneNode): ViewerSidebarRow => ({
     id: zone.id,
-    label: zoneLabel(zone),
+    label: zoneLabel(zone, i18n),
     color: zone.color,
     areaM2: area([{ outer: zone.polygon, holes: zone.holes ?? [] }]),
   })