@pascal-app/editor 1.0.6 → 1.0.7

package/src/components/ui/panels/multi-parametric-inspector.tsx

@@ -6,20 +6,22 @@ import {
   nodeRegistry,
   type ParamField,
   type ParametricDescriptor,
-  useScene,
+  useScene, usePascalI18n,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback, useMemo } from 'react'
 import { useShallow } from 'zustand/react/shallow'
-import { getNodePanelModel } from '../../../lib/panel-rows'
+import { getNodePanelModel, type MultiPanelControl } from '../../../lib/panel-rows'
 import { selectionMatchesSessionGroup } from '../../../lib/session-groups'
 import useSessionGroups from '../../../store/use-session-groups'
 import { PanelSection } from '../controls/panel-section'
 import { SegmentedControl } from '../controls/segmented-control'
+import { SelectControl } from '../controls/select-control'
 import { SliderControl } from '../controls/slider-control'
 import { resolveUniqueSelectionIds } from './homogeneous-selection'
 import {
   commitMultiNodeFields,
+  fieldTargetIds,
   fieldVisibleForAll,
   firstNumericFieldValue,
   firstVec3FieldValue,
@@ -32,8 +34,10 @@ import { getTypeDisplay } from './node-display'
 import { ParametricFieldControl } from './parametric-field-control'
 import { PanelWrapper } from './panel-wrapper'
 import { formatSelectionBreakdown } from './selection-breakdown'
+import { inspectorGroupDescriptor } from '../../../i18n/node-messages'
 
 export function MultiParametricInspector({ footer }: { footer?: React.ReactNode }) {
+  const i18n = usePascalI18n()
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const setSelection = useViewer((s) => s.setSelection)
   const nodeIds = useScene(
@@ -62,16 +66,14 @@ export function MultiParametricInspector({ footer }: { footer?: React.ReactNode
 
   if (nodeIds.length < 2 || !nodeType || !parametrics) return null
 
-  const display = getTypeDisplay(nodeType)
+  const display = getTypeDisplay(nodeType, i18n)
   const title = matchedGroup ? `${matchedGroup.label} · ${breakdown}` : breakdown || display.label
 
   return (
     <PanelWrapper footer={footer} icon={display.icon} onClose={handleClose} title={title} width={320}>
       {matchedGroup && (
         <div className="border-border/50 border-b px-3 py-2 text-muted-foreground text-xs">
-          {matchedGroup.label} (session only). Plain click reselects all members. Not saved with the
-          project.
-        </div>
+          {i18n._({ id: 'editor.panels.multiParametricInspector.labelSessionOnlyPlainClickReselects', message: '{label} (session only). Plain click reselects all members. Not saved with the project.', values: { label: matchedGroup.label } })}</div>
       )}
       {parametrics.groups.map((group, gi) => (
         <MultiGroupFields
@@ -81,13 +83,20 @@ export function MultiParametricInspector({ footer }: { footer?: React.ReactNode
           nodeIds={nodeIds}
           nodeType={nodeType}
           parametrics={parametrics}
-          title={group.label}
+          title={i18n._(inspectorGroupDescriptor(group.label))}
         >
           {hasKindControls ? (
             <MultiKindControls nodeIds={nodeIds} nodeType={nodeType} section={group.label} />
           ) : null}
         </MultiGroupFields>
       ))}
+      {hasKindControls ? (
+        <MultiKindSections
+          groupTitles={parametrics.groups.map((group) => group.label)}
+          nodeIds={nodeIds}
+          nodeType={nodeType}
+        />
+      ) : null}
       <div className="border-border/50 border-t p-3">
         <MultiSelectionActions />
       </div>
@@ -95,10 +104,20 @@ export function MultiParametricInspector({ footer }: { footer?: React.ReactNode
   )
 }
 
+function useMultiKindControls(nodeIds: AnyNodeId[], nodeType: AnyNode['type']) {
+  const nodes = useScene((s) => s.nodes)
+  return useMemo(() => {
+    const model = getNodePanelModel(nodeRegistry.get(nodeType))
+    if (!model?.multiControls) return []
+    const selection = nodeIds.flatMap((id) => (nodes[id] ? [nodes[id]!] : []))
+    return model.multiControls({ selection, nodes })
+  }, [nodeIds, nodeType, nodes])
+}
+
 /**
  * The kind's own multi-selection controls for one section (the wall's
- * Reference), from its panel model — the same segmented control the single
- * panel shows, mixed when the selection disagrees.
+ * Reference), from its panel model — the same control the single panel
+ * shows, mixed when the selection disagrees.
  */
 function MultiKindControls({
   nodeIds,
@@ -109,32 +128,84 @@ function MultiKindControls({
   nodeType: AnyNode['type']
   section: string
 }) {
-  const nodes = useScene((s) => s.nodes)
-  const controls = useMemo(() => {
-    const model = getNodePanelModel(nodeRegistry.get(nodeType))
-    if (!model?.multiControls) return []
-    const selection = nodeIds.flatMap((id) => (nodes[id] ? [nodes[id]!] : []))
-    return model.multiControls({ selection, nodes }).filter((control) => control.section === section)
-  }, [nodeIds, nodeType, nodes, section])
+  const controls = useMultiKindControls(nodeIds, nodeType).filter(
+    (control) => control.section === section,
+  )
   return (
     <>
       {controls.map((control) => (
-        <div className="flex flex-col gap-1" key={control.id}>
-          <div className="px-1 font-medium text-[10px] text-muted-foreground/80">
-            {control.label}
-          </div>
-          <SegmentedControl
-            mixed={control.value === null}
-            onChange={control.onChange}
-            options={control.options.map((option) => ({ ...option }))}
-            value={control.value ?? ''}
-          />
-        </div>
+        <MultiKindControlView control={control} key={control.id} />
+      ))}
+    </>
+  )
+}
+
+/** The kind's controls whose section is none of the parametrics groups, each section its own. */
+function MultiKindSections({
+  groupTitles,
+  nodeIds,
+  nodeType,
+}: {
+  groupTitles: readonly string[]
+  nodeIds: AnyNodeId[]
+  nodeType: AnyNode['type']
+}) {
+  const controls = useMultiKindControls(nodeIds, nodeType).filter(
+    (control) => !groupTitles.includes(control.section),
+  )
+  const sections = [...new Set(controls.map((control) => control.section))]
+  return (
+    <>
+      {sections.map((section) => (
+        <PanelSection key={section} title={section}>
+          {controls
+            .filter((control) => control.section === section)
+            .map((control) => (
+              <MultiKindControlView control={control} key={control.id} />
+            ))}
+        </PanelSection>
       ))}
     </>
   )
 }
 
+function MultiKindControlView({ control }: { control: MultiPanelControl }) {
+  if (control.kind === 'readout') {
+    return (
+      <div className="flex items-center justify-between gap-2 px-2 py-1.5">
+        <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
+          {control.label}
+        </span>
+        <span className="truncate text-[11px] text-muted-foreground tabular-nums">
+          {control.detail ? `${control.value} · ${control.detail}` : control.value}
+        </span>
+      </div>
+    )
+  }
+  if (control.kind === 'select') {
+    return (
+      <SelectControl
+        label={control.label}
+        mixed={control.value === null}
+        onChange={control.onChange}
+        options={control.options.map((option) => ({ ...option }))}
+        value={control.value ?? ''}
+      />
+    )
+  }
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="px-1 font-medium text-[10px] text-muted-foreground/80">{control.label}</div>
+      <SegmentedControl
+        mixed={control.value === null}
+        onChange={control.onChange}
+        options={control.options.map((option) => ({ ...option }))}
+        value={control.value ?? ''}
+      />
+    </div>
+  )
+}
+
 function MultiGroupFields({
   defaultExpanded,
   title,
@@ -154,9 +225,16 @@ function MultiGroupFields({
 }) {
   const genericFields = fields.filter((field) => field.kind !== 'custom')
   const anyVisible = useScene((s) =>
-    genericFields.some((field) =>
-      fieldVisibleForAll(nodeIds, (field as { visibleIf?: (n: AnyNode) => boolean }).visibleIf, s.nodes),
-    ),
+    genericFields.some((field) => {
+      const { visibleIf, appliesTo } = field as {
+        visibleIf?: (n: AnyNode) => boolean
+        appliesTo?: (n: AnyNode) => boolean
+      }
+      return (
+        fieldVisibleForAll(nodeIds, visibleIf, s.nodes) &&
+        fieldTargetIds(nodeIds, appliesTo, s.nodes).length > 0
+      )
+    }),
   )
   if ((genericFields.length === 0 || !anyVisible) && !children) return null
   return (
@@ -195,7 +273,7 @@ function MultiGroupFields({
 
 function MultiFieldRenderer({
   field,
-  nodeIds,
+  nodeIds: selectedIds,
   parametrics,
 }: {
   field: ParamField<AnyNode>
@@ -203,11 +281,21 @@ function MultiFieldRenderer({
   parametrics: ParametricDescriptor<AnyNode>
 }) {
   const key = String(field.key)
+  // A field that names the nodes it `appliesTo` reads and edits only those.
+  const appliesTo = (field as { appliesTo?: (n: AnyNode) => boolean }).appliesTo
+  const nodeIds = useScene(
+    useShallow((s) => fieldTargetIds(selectedIds, appliesTo, s.nodes)),
+  )
   const visible = useScene((s) =>
     fieldVisibleForAll(nodeIds, (field as { visibleIf?: (n: AnyNode) => boolean }).visibleIf, s.nodes),
   )
-  const reduced = useScene(useShallow((s) => reduceFieldValue(nodeIds, key, s.nodes)))
-  const numericOrigin = useScene((s) => firstNumericFieldValue(nodeIds, key, s.nodes))
+  const fallback = field.kind === 'number' ? field.default : undefined
+  const reduced = useScene(
+    useShallow((s) => reduceFieldValue(nodeIds, key, s.nodes, fallback)),
+  )
+  const numericOrigin = useScene((s) =>
+    firstNumericFieldValue(nodeIds, key, s.nodes, fallback ?? 0),
+  )
   const vecOrigin = useScene(useShallow((s) => firstVec3FieldValue(nodeIds, key, s.nodes)))
 
   const preview = useCallback(
@@ -223,7 +311,7 @@ function MultiFieldRenderer({
     [nodeIds, parametrics],
   )
 
-  if (!visible) return null
+  if (!visible || nodeIds.length === 0) return null
 
   if (field.kind === 'vec3') {
     return (

package/src/components/ui/panels/multi-selection-panel.tsx

@@ -6,7 +6,8 @@ import {
   type BuildingNode,
   resolveBuildingForLevel,
   runAsSingleSceneHistoryStep,
-  useScene,
+  useScene, usePascalI18n,
+  type PascalI18n,
 } from '@pascal-app/core'
 import { unwrapCorner, windowMergeOffer } from '@pascal-app/core/building'
 import { useViewer } from '@pascal-app/viewer'
@@ -57,36 +58,71 @@ function mergeRefusalNote(
   refusal: { code: string; details: Record<string, unknown> },
   nodes: Record<string, AnyNode>,
   length: (meters: number) => string,
+  i18n: PascalI18n,
 ): string {
   const { blockingId, limit } = refusal.details as { blockingId?: string; limit?: number }
   const reach = length(limit ?? 0)
   const blocking = nodes[blockingId ?? '']
-  const blockingKind = !blocking
-    ? 'something'
-    : blocking.type === 'item'
-      ? 'an item'
-      : `a ${blocking.type}`
+  // A wall's children: the openings and wall-hosted items the merge can run into.
+  const kind = blocking?.type ?? 'unknown'
   switch (refusal.code) {
     case 'window_already_joined':
-      return 'One of them already wraps another corner. Unwrap it first.'
+      return i18n._({
+        id: 'editor.panels.mergeRefusal.alreadyJoined',
+        message: 'One of them already wraps another corner. Unwrap it first.',
+      })
     case 'window_not_on_wall':
-      return 'A roof or dormer window cannot join another window.'
+      return i18n._({
+        id: 'editor.panels.mergeRefusal.notOnWall',
+        message: 'A roof or dormer window cannot join another window.',
+      })
     case 'windows_not_adjacent':
-      return `They are too far apart. Windows merge with at most ${reach} between them.`
+      return i18n._({
+        id: 'editor.panels.mergeRefusal.notAdjacent',
+        message: 'They are too far apart. Windows merge with at most {reach} between them.',
+        values: { reach },
+      })
     case 'opening_between':
-      return `There is ${blockingKind} between them.`
+      return i18n._({
+        id: 'editor.panels.mergeRefusal.between',
+        message:
+          '{kind, select, item {There is an item between them.} door {There is a door between them.} window {There is a window between them.} shelf {There is a shelf between them.} other {There is something between them.}}',
+        values: { kind },
+      })
     case 'walls_not_meeting':
-      return 'Their walls do not meet at a corner.'
+      return i18n._({
+        id: 'editor.panels.mergeRefusal.wallsNotMeeting',
+        message: 'Their walls do not meet at a corner.',
+      })
     case 'corner_angle':
-      return 'Their walls meet at too sharp or too flat an angle for a corner window.'
+      return i18n._({
+        id: 'editor.panels.mergeRefusal.cornerAngle',
+        message: 'Their walls meet at too sharp or too flat an angle for a corner window.',
+      })
     case 'window_not_at_corner':
-      return `One of them is too far from the corner. A window joins one within ${reach} of it.`
+      return i18n._({
+        id: 'editor.panels.mergeRefusal.notAtCorner',
+        message: 'One of them is too far from the corner. A window joins one within {reach} of it.',
+        values: { reach },
+      })
     case 'height_exceeds_wall':
-      return 'The window selected first is taller than the other wall. Select the other one first.'
+      return i18n._({
+        id: 'editor.panels.mergeRefusal.heightExceedsWall',
+        message:
+          'The window selected first is taller than the other wall. Select the other one first.',
+      })
     case 'opening_overlap':
-      return `Sliding them to the corner would overlap ${blockingKind}.`
+      return i18n._({
+        id: 'editor.panels.mergeRefusal.overlap',
+        message:
+          '{kind, select, item {Sliding them to the corner would overlap an item.} door {Sliding them to the corner would overlap a door.} window {Sliding them to the corner would overlap a window.} shelf {Sliding them to the corner would overlap a shelf.} other {Sliding them to the corner would overlap something.}}',
+        values: { kind },
+      })
     default:
-      return 'These windows cannot be merged.'
+      return i18n._({
+        id: 'editor.panels.mergeRefusal.cannotMerge',
+        message: 'These windows cannot be merged.',
+      })
   }
 }
 
@@ -97,6 +133,7 @@ function mergeRefusalNote(
  * Unwrap instead; two that cannot join, the reason.
  */
 function MergeWindowsAction() {
+  const i18n = usePascalI18n()
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const nodes = useScene((s) => s.nodes)
   const readOnly = useScene((s) => s.readOnly)
@@ -110,7 +147,7 @@ function MergeWindowsAction() {
         className="basis-full whitespace-nowrap disabled:cursor-not-allowed disabled:opacity-40"
         disabled={readOnly}
         icon={<Split className="h-4 w-4" />}
-        label="Unwrap the corner"
+        label={i18n._({ id: 'editor.panels.multiSelectionPanel.unwrapTheCorner', message: 'Unwrap the corner' })}
         onClick={() => {
           writeWindowChanges({
             create: null,
@@ -119,13 +156,16 @@ function MergeWindowsAction() {
           })
           triggerSFX('sfx:structure-build')
         }}
-        title="Unwrap the corner: both windows stay, each framed at the corner"
+        title={i18n._({ id: 'editor.panels.multiSelectionPanel.unwrapTheCornerBothWindowsStay', message: 'Unwrap the corner: both windows stay, each framed at the corner' })}
       />
     )
   const { merge } = offer
   const note = offer.refusal
-    ? mergeRefusalNote(offer.refusal, nodes, (meters) =>
-        formatLinearMeasurement(meters, unit, metricNotation),
+    ? mergeRefusalNote(
+        offer.refusal,
+        nodes,
+        (meters) => formatLinearMeasurement(meters, unit, metricNotation),
+        i18n,
       )
     : null
   return (
@@ -134,7 +174,7 @@ function MergeWindowsAction() {
         className="basis-full whitespace-nowrap disabled:cursor-not-allowed disabled:opacity-40"
         disabled={readOnly || !merge}
         icon={<Merge className="h-4 w-4" />}
-        label="Merge windows"
+        label={i18n._({ id: 'editor.panels.multiSelectionPanel.mergeWindows', message: 'Merge windows' })}
         onClick={() => {
           if (!merge) return
           runAsSingleSceneHistoryStep(useScene, () =>
@@ -150,8 +190,8 @@ function MergeWindowsAction() {
         title={
           note ??
           (merge?.kind === 'corner'
-            ? 'Merge windows into a corner window: both take the height, sill and type of the one you selected first'
-            : 'Merge windows into one across both: it keeps the type and style of the one you selected first')
+            ? i18n._({ id: 'editor.panels.multiSelectionPanel.mergeWindowsIntoACornerWindow', message: 'Merge windows into a corner window: both take the height, sill and type of the one you selected first' })
+            : i18n._({ id: 'editor.panels.multiSelectionPanel.mergeWindowsIntoOneAcrossBoth', message: 'Merge windows into one across both: it keeps the type and style of the one you selected first' }))
         }
       />
       {note ? <p className="basis-full px-1 text-muted-foreground text-xs">{note}</p> : null}
@@ -160,6 +200,7 @@ function MergeWindowsAction() {
 }
 
 export function MultiSelectionActions() {
+  const i18n = usePascalI18n()
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const sessionGroups = useSessionGroups((s) => s.groups)
   const sceneNodes = useScene((s) => s.nodes)
@@ -182,39 +223,39 @@ export function MultiSelectionActions() {
         <ActionButton
           className="basis-full whitespace-nowrap"
           icon={<Building2 className="h-4 w-4" />}
-          label="Select building"
+          label={i18n._({ id: 'editor.panels.multiSelectionPanel.selectBuilding', message: 'Select building' })}
           onClick={() => selectBuilding(buildingId)}
-          title="Select the whole building to move all its levels"
+          title={i18n._({ id: 'editor.panels.multiSelectionPanel.selectTheWholeBuildingToMove', message: 'Select the whole building to move all its levels' })}
         />
       )}
       {showGroup && (
         <ActionButton
           className="min-w-20 px-2"
           icon={<Group className="h-4 w-4" />}
-          label="Group"
+          label={i18n._({ id: 'editor.panels.multiSelectionPanel.group', message: 'Group' })}
           onClick={() => groupCurrentSelection()}
-          title="Group (Ctrl/Cmd+G)"
+          title={i18n._({ id: 'editor.panels.multiSelectionPanel.groupCtrlCmdG', message: 'Group (Ctrl/Cmd+G)' })}
         />
       )}
       {showUngroup && (
         <ActionButton
           className="min-w-20 px-2"
           icon={<Ungroup className="h-4 w-4" />}
-          label="Ungroup"
+          label={i18n._({ id: 'editor.panels.multiSelectionPanel.ungroup', message: 'Ungroup' })}
           onClick={() => ungroupCurrentSelection()}
-          title="Ungroup (Ctrl/Cmd+Shift+G)"
+          title={i18n._({ id: 'editor.panels.multiSelectionPanel.ungroupCtrlCmdShiftG', message: 'Ungroup (Ctrl/Cmd+Shift+G)' })}
         />
       )}
       <ActionButton
         className="min-w-20 px-2"
         icon={<Copy className="h-4 w-4" />}
-        label="Duplicate"
+        label={i18n._({ id: 'editor.panels.multiSelectionPanel.duplicate', message: 'Duplicate' })}
         onClick={() => duplicateSelectionAndPickUp()}
       />
       <ActionButton
         className="min-w-20 px-2 border-red-500/40 text-red-700 dark:text-red-200 hover:bg-red-500/15"
         icon={<Trash2 className="h-4 w-4 text-red-600 dark:text-red-400" />}
-        label="Delete"
+        label={i18n._({ id: 'editor.panels.multiSelectionPanel.delete', message: 'Delete' })}
         onClick={() => deleteSelection()}
       />
     </ActionGroup>
@@ -225,6 +266,7 @@ export function MultiSelectionActions() {
  * Docked multi-selection panel. Includes Group / Ungroup for session selection sets.
  */
 export function MultiSelectionPanel({ footer }: { footer?: React.ReactNode }) {
+  const i18n = usePascalI18n()
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const setSelection = useViewer((s) => s.setSelection)
   const sessionGroups = useSessionGroups((s) => s.groups)
@@ -246,16 +288,14 @@ export function MultiSelectionPanel({ footer }: { footer?: React.ReactNode }) {
       title={
         matchedGroup
           ? `${matchedGroup.label} · ${selectedIds.length}`
-          : `${selectedIds.length} selected`
+          : i18n._({ id: 'editor.panels.multiSelectionPanel.lengthSelected', message: '{length} selected', values: { length: selectedIds.length } })
       }
       width={320}
     >
       {breakdown && <div className="px-3 py-3 text-muted-foreground text-xs">{breakdown}</div>}
       {matchedGroup && (
         <div className="border-border/50 border-t px-3 py-2 text-muted-foreground text-xs">
-          {matchedGroup.label} (session only). Plain click reselects all members. Not saved with the
-          project.
-        </div>
+          {i18n._({ id: 'editor.panels.multiSelectionPanel.labelSessionOnlyPlainClickReselects', message: '{label} (session only). Plain click reselects all members. Not saved with the project.', values: { label: matchedGroup.label } })}</div>
       )}
       <div className="border-border/50 border-t p-3">
         <MultiSelectionActions />

package/src/components/ui/panels/node-display.ts

@@ -1,36 +1,42 @@
-import { type AnyNode, scriptImages } from '@pascal-app/core'
+import { type AnyNode, type MessageDescriptor, type PascalI18n, scriptImages } from '@pascal-app/core'
+import { displayRoomName } from '../../../lib/room-name-messages'
 
 export type NodeDisplay = {
   icon: string
   label: string
 }
 
-const TYPE_DEFAULTS: Record<string, NodeDisplay> = {
-  item: { icon: '/icons/item.webp', label: 'Item' },
-  wall: { icon: '/icons/wall.webp', label: 'Wall' },
-  door: { icon: '/icons/door.webp', label: 'Door' },
-  window: { icon: '/icons/window.webp', label: 'Window' },
-  slab: { icon: '/icons/floor.webp', label: 'Slab' },
-  ceiling: { icon: '/icons/ceiling.webp', label: 'Ceiling' },
-  column: { icon: '/icons/column.webp', label: 'Column' },
-  elevator: { icon: '/icons/elevator.webp', label: 'Elevator' },
-  fence: { icon: '/icons/fence.webp', label: 'Fence' },
-  roof: { icon: '/icons/roof.webp', label: 'Roof' },
-  'roof-segment': { icon: '/icons/roof.webp', label: 'Roof segment' },
-  stair: { icon: '/icons/stairs.webp', label: 'Stair' },
-  'stair-segment': { icon: '/icons/stairs.webp', label: 'Stair segment' },
-  scan: { icon: '/icons/mesh.webp', label: '3D Scan' },
-  guide: { icon: '/icons/floorplan.webp', label: 'Guide image' },
-  zone: { icon: '/icons/zone.webp', label: 'Zone' },
+const TYPE_DEFAULTS: Record<string, { icon: string; label: MessageDescriptor }> = {
+  item: { icon: '/icons/item.webp', label: /* i18n */ { id: 'editor.nodeDisplay.item', message: 'Item' } },
+  wall: { icon: '/icons/wall.webp', label: /* i18n */ { id: 'editor.nodeDisplay.wall', message: 'Wall' } },
+  door: { icon: '/icons/door.webp', label: /* i18n */ { id: 'editor.nodeDisplay.door', message: 'Door' } },
+  window: { icon: '/icons/window.webp', label: /* i18n */ { id: 'editor.nodeDisplay.window', message: 'Window' } },
+  slab: { icon: '/icons/floor.webp', label: /* i18n */ { id: 'editor.nodeDisplay.slab', message: 'Slab' } },
+  ceiling: { icon: '/icons/ceiling.webp', label: /* i18n */ { id: 'editor.nodeDisplay.ceiling', message: 'Ceiling' } },
+  column: { icon: '/icons/column.webp', label: /* i18n */ { id: 'editor.nodeDisplay.column', message: 'Column' } },
+  elevator: { icon: '/icons/elevator.webp', label: /* i18n */ { id: 'editor.nodeDisplay.elevator', message: 'Elevator' } },
+  fence: { icon: '/icons/fence.webp', label: /* i18n */ { id: 'editor.nodeDisplay.fence', message: 'Fence' } },
+  roof: { icon: '/icons/roof.webp', label: /* i18n */ { id: 'editor.nodeDisplay.roof', message: 'Roof' } },
+  'roof-segment': { icon: '/icons/roof.webp', label: /* i18n */ { id: 'editor.nodeDisplay.roofSegment', message: 'Roof segment' } },
+  stair: { icon: '/icons/stairs.webp', label: /* i18n */ { id: 'editor.nodeDisplay.stair', message: 'Stair' } },
+  'stair-segment': { icon: '/icons/stairs.webp', label: /* i18n */ { id: 'editor.nodeDisplay.stairSegment', message: 'Stair segment' } },
+  scan: { icon: '/icons/mesh.webp', label: /* i18n */ { id: 'editor.nodeDisplay.scan', message: '3D Scan' } },
+  guide: { icon: '/icons/floorplan.webp', label: /* i18n */ { id: 'editor.nodeDisplay.guide', message: 'Guide image' } },
+  zone: { icon: '/icons/zone.webp', label: /* i18n */ { id: 'editor.nodeDisplay.zone', message: 'Zone' } },
 }
 
-export function getTypeDisplay(type: string): NodeDisplay {
-  return TYPE_DEFAULTS[type] ?? { icon: '/icons/select.webp', label: type }
+export function getTypeDisplay(type: string, i18n: PascalI18n): NodeDisplay {
+  const known = TYPE_DEFAULTS[type]
+  return known ? { icon: known.icon, label: i18n._(known.label) } : { icon: '/icons/select.webp', label: type }
 }
 
-export function getNodeDisplay(node: AnyNode | null | undefined): NodeDisplay {
-  if (!node) return { icon: '/icons/select.webp', label: 'Selection' }
-  const fallback = TYPE_DEFAULTS[node.type] ?? { icon: '/icons/select.webp', label: node.type }
+export function getNodeDisplay(node: AnyNode | null | undefined, i18n: PascalI18n): NodeDisplay {
+  if (!node)
+    return {
+      icon: '/icons/select.webp',
+      label: i18n._({ id: 'editor.nodeDisplay.selection', message: 'Selection' }),
+    }
+  const fallback = getTypeDisplay(node.type, i18n)
   const scripted = scriptImages(node)?.thumbnail
   // Item nodes carry an asset with its own thumbnail/name
   if (node.type === 'item') {
@@ -40,7 +46,12 @@ export function getNodeDisplay(node: AnyNode | null | undefined): NodeDisplay {
     }
   }
   if (node.type === 'zone' && node.spaceRole === 'room') {
-    return { icon: '/icons/kitchen.webp', label: node.name || 'Room' }
+    return {
+      icon: '/icons/kitchen.webp',
+      label:
+        (node.name && displayRoomName(node.name, i18n)) ||
+        i18n._({ id: 'editor.nodeDisplay.room', message: 'Room' }),
+    }
   }
   return {
     icon: scripted ?? fallback.icon,

package/src/components/ui/panels/panel-manager.tsx

@@ -19,7 +19,7 @@ import {
   type StairSegmentNode,
   useScene,
   type WallNode,
-  type WindowNode,
+  type WindowNode, usePascalI18n,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -107,6 +107,7 @@ function MobilePanelLayer({
   panel: React.ReactNode
   isReference: boolean
 }) {
+  const i18n = usePascalI18n()
   const setSelection = useViewer((s) => s.setSelection)
   const setSelectedReferenceId = useEditor((s) => s.setSelectedReferenceId)
   const setMovingNode = useEditor((s) => s.setMovingNode)
@@ -146,7 +147,7 @@ function MobilePanelLayer({
 
   if (!(node || isReference)) return null
 
-  const display = getNodeDisplay(node)
+  const display = getNodeDisplay(node, i18n)
 
   return (
     <>
@@ -180,8 +181,9 @@ function MobileMultiPanelLayer({
   panel: React.ReactNode
   type: string | null
 }) {
+  const i18n = usePascalI18n()
   const [isSheetOpen, setIsSheetOpen] = useState(false)
-  const display = type ? getTypeDisplay(type) : { icon: '/icons/select.webp', label: 'Selection' }
+  const display = type ? getTypeDisplay(type, i18n) : { icon: '/icons/select.webp', label: i18n._({ id: 'editor.panels.panelManager.selection', message: 'Selection' }) }
   const title = breakdown || display.label
 
   useEffect(() => {