@pascal-app/editor 1.0.6 → 1.1.0

package/src/components/ui/sidebar/panels/settings-panel/keyboard-shortcuts-dialog.tsx

@@ -1,3 +1,4 @@
+import { type MessageDescriptor, usePascalI18n } from '@pascal-app/core'
 import { Keyboard } from 'lucide-react'
 import { Button } from './../../../../../components/ui/primitives/button'
 import {
@@ -12,27 +13,31 @@ import {
   ShortcutToken,
   shortcutDisplayValue,
 } from './../../../../../components/ui/primitives/shortcut-token'
+import { TOOL_SHORTCUT_KEYS } from './../../../../../lib/tool-shortcuts'
 
 type Shortcut = {
-  keys: string[]
+  keys: readonly string[]
   action: string
   note?: string
 }
 
 type ShortcutCategory = {
-  title: string
+  title: MessageDescriptor
   shortcuts: Shortcut[]
 }
 
 const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
   {
-    title: 'Editor Navigation',
+    title: /* i18n */ {
+      id: 'editor.sidebar.panels.settingsPanel.keyboardShortcutsDialog.editorNavigation',
+      message: 'Editor Navigation',
+    },
     shortcuts: [
       { keys: ['1'], action: 'Switch to Site' },
       { keys: ['2'], action: 'Switch to Building' },
       { keys: ['\\'], action: 'Open or close the split view' },
-      { keys: ['F'], action: 'Open the items catalog with the item tool' },
-      { keys: ['Z'], action: 'Draw a zone' },
+      { keys: TOOL_SHORTCUT_KEYS.item, action: 'Open the items catalog with the item tool' },
+      { keys: TOOL_SHORTCUT_KEYS.zone, action: 'Draw a zone' },
       {
         keys: ['Cmd/Ctrl', 'Arrow Up'],
         action: 'Select next level in the active building',
@@ -45,12 +50,21 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
     ],
   },
   {
-    title: 'Modes & History',
+    title: /* i18n */ {
+      id: 'editor.sidebar.panels.settingsPanel.keyboardShortcutsDialog.modesHistory',
+      message: 'Modes & History',
+    },
     shortcuts: [
-      { keys: ['V'], action: 'Switch to Select mode' },
-      { keys: ['B'], action: 'Switch to Build mode' },
-      { keys: ['M'], action: 'Activate the last measurement tool' },
-      { keys: ['X'], action: 'Switch to Delete mode' },
+      { keys: TOOL_SHORTCUT_KEYS.select, action: 'Switch to Select mode' },
+      {
+        keys: TOOL_SHORTCUT_KEYS.wall,
+        action: 'Switch to Build mode, drawing with the last Rooms shape',
+        note: 'Rectangle, Polygon or Walls, whichever you picked last; Rectangle the first time.',
+      },
+      { keys: TOOL_SHORTCUT_KEYS.measurement, action: 'Activate the last measurement tool' },
+      { keys: TOOL_SHORTCUT_KEYS.paint, action: 'Switch to Paint mode' },
+      { keys: TOOL_SHORTCUT_KEYS.terrain, action: 'Sculpt the ground (terrain)' },
+      { keys: TOOL_SHORTCUT_KEYS.delete, action: 'Switch to Delete mode' },
       {
         keys: ['Esc'],
         action: 'Cancel the active tool and return to Select mode',
@@ -63,7 +77,30 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
     ],
   },
   {
-    title: 'Selection',
+    title: /* i18n */ {
+      id: 'editor.sidebar.panels.settingsPanel.keyboardShortcutsDialog.buildTools',
+      message: 'Build Tools',
+    },
+    shortcuts: [
+      {
+        keys: TOOL_SHORTCUT_KEYS.door,
+        action: 'Place a door',
+        note: 'D alone pans the view. While placing, the door swings toward the side of the wall the cursor is on; R flips it.',
+      },
+      { keys: TOOL_SHORTCUT_KEYS.window, action: 'Place a window', note: 'W alone pans the view.' },
+      { keys: TOOL_SHORTCUT_KEYS.stair, action: 'Place stairs', note: 'S alone pans the view.' },
+      {
+        keys: TOOL_SHORTCUT_KEYS.roof,
+        action: 'Draw a roof',
+        note: "R alone still rotates or flips the selection, and while placing it stays the placement's own R.",
+      },
+    ],
+  },
+  {
+    title: /* i18n */ {
+      id: 'editor.sidebar.panels.settingsPanel.keyboardShortcutsDialog.selection',
+      message: 'Selection',
+    },
     shortcuts: [
       {
         keys: ['Cmd/Ctrl', 'C'],
@@ -78,8 +115,7 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
       {
         keys: ['Cmd/Ctrl', 'V'],
         action: 'Paste and place copied objects',
-        note:
-          'Carries a preview under the cursor. Click to place it, or press Escape to cancel.',
+        note: 'Carries a preview under the cursor. Click to place it, or press Escape to cancel.',
       },
       {
         keys: ['Cmd/Ctrl', 'Left click'],
@@ -105,14 +141,23 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
       {
         keys: ['Cmd/Ctrl', 'G'],
         action: 'Group the multi-selection (session only)',
-        note:
-          'Editor-only. Plain click a member later to reselect the whole group. Not saved with the project.',
+        note: 'Editor-only. Plain click a member later to reselect the whole group. Not saved with the project.',
       },
       {
         keys: ['Cmd/Ctrl', 'Shift', 'G'],
         action: 'Ungroup the session selection',
         note: 'Keeps the current selection; only dissolves the session group.',
       },
+      {
+        keys: ['Arrow keys'],
+        action: 'Nudge the selected wall 1 in (1 cm in metric)',
+        note: 'In the floor plan. Stops where it lines up with a parallel wall; joined walls follow.',
+      },
+      {
+        keys: ['Tab'],
+        action: 'Select the next object under the pointer',
+        note: 'In the floor plan, for walls that overlap or hide under another. Shift+Tab goes back.',
+      },
       {
         keys: ['Esc'],
         action: 'Clear the selection',
@@ -121,7 +166,10 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
     ],
   },
   {
-    title: 'Direct Manipulation',
+    title: /* i18n */ {
+      id: 'editor.sidebar.panels.settingsPanel.keyboardShortcutsDialog.directManipulation',
+      message: 'Direct Manipulation',
+    },
     shortcuts: [
       {
         keys: ['Cmd/Ctrl', 'Left click'],
@@ -141,7 +189,10 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
     ],
   },
   {
-    title: 'Drawing Tools',
+    title: /* i18n */ {
+      id: 'editor.sidebar.panels.settingsPanel.keyboardShortcutsDialog.drawingTools',
+      message: 'Drawing Tools',
+    },
     shortcuts: [
       // Shift and Ctrl each mean one thing held and another tapped, and only
       // the hold was documented — which read as the taps not existing. Both
@@ -157,9 +208,9 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
         note: 'Tap and release on its own. Use it when the default half-metre grid is too coarse — placing a window, for instance.',
       },
       {
-        keys: ['Shift'],
-        action: 'Bypass guided snapping and angle constraints',
-        note: 'Hold during the active gesture. Passive guide or measurement feedback may stay visible.',
+        keys: ['Alt'],
+        action: 'Bypass snapping, angle constraints and collisions',
+        note: 'Hold during the active gesture; release to snap again. Passive guide or measurement feedback may stay visible.',
       },
       {
         keys: ['Shift'],
@@ -169,7 +220,10 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
     ],
   },
   {
-    title: 'Item Placement',
+    title: /* i18n */ {
+      id: 'editor.sidebar.panels.settingsPanel.keyboardShortcutsDialog.itemPlacement',
+      message: 'Item Placement',
+    },
     shortcuts: [
       {
         keys: ['R', 'T'],
@@ -177,7 +231,8 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
       },
       {
         keys: ['E'],
-        action: 'Operate the selected node — doors, windows, and cabinet doors/drawers animate open/closed',
+        action:
+          'Operate the selected node — doors, windows, and cabinet doors/drawers animate open/closed',
       },
       {
         keys: ['Shift'],
@@ -187,12 +242,15 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
     ],
   },
   {
-    title: 'Camera',
+    title: /* i18n */ {
+      id: 'editor.sidebar.panels.settingsPanel.keyboardShortcutsDialog.camera',
+      message: 'Camera',
+    },
     shortcuts: [
       {
         keys: ['W', 'A', 'S', 'D'],
         action: 'Pan camera',
-        note: 'Moves in screen space, similar to dragging the camera view.',
+        note: 'Moves in screen space, similar to dragging the camera view. With Shift, W, S and D place a window, stairs and a door instead.',
       },
       {
         keys: ['Middle click'],
@@ -208,7 +266,7 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
   },
 ]
 
-function ShortcutKeys({ keys }: { keys: string[] }) {
+function ShortcutKeys({ keys }: { keys: readonly string[] }) {
   return (
     <div className="flex flex-wrap items-center gap-1">
       {keys.map((key, index) => (
@@ -222,32 +280,44 @@ function ShortcutKeys({ keys }: { keys: string[] }) {
 }
 
 export function KeyboardShortcutsDialog() {
+  const i18n = usePascalI18n()
   return (
     <Dialog>
       <DialogTrigger asChild>
         <Button className="w-full justify-start gap-2" variant="outline">
           <Keyboard className="size-4" />
-          Keyboard shortcuts
+          {i18n._({
+            id: 'editor.sidebar.panels.settingsPanel.keyboardShortcutsDialog.keyboardShortcuts',
+            message: 'Keyboard shortcuts',
+          })}
         </Button>
       </DialogTrigger>
       <DialogContent className="flex max-h-[85vh] flex-col overflow-hidden p-0 sm:max-w-3xl">
         <DialogHeader className="shrink-0 border-b px-6 py-4">
-          <DialogTitle>Keyboard shortcuts</DialogTitle>
+          <DialogTitle>
+            {i18n._({
+              id: 'editor.sidebar.panels.settingsPanel.keyboardShortcutsDialog.keyboardShortcuts',
+              message: 'Keyboard shortcuts',
+            })}
+          </DialogTitle>
           <DialogDescription>
-            Shortcuts are context-aware. Guided constraints are enabled by default; hold Shift
-            during an active gesture to build freely.
+            {i18n._({
+              id: 'editor.sidebar.panels.settingsPanel.keyboardShortcutsDialog.shortcutsAreContextAwareGuidedConstraints',
+              message:
+                'Shortcuts are context-aware. Snapping is a visible mode: tap Shift to cycle it, hold Alt during a gesture to place freely.',
+            })}
           </DialogDescription>
         </DialogHeader>
 
         <div className="flex-1 space-y-5 overflow-y-auto px-6 py-4">
           {SHORTCUT_CATEGORIES.map((category) => (
-            <section className="space-y-2" key={category.title}>
-              <h3 className="font-medium text-sm">{category.title}</h3>
+            <section className="space-y-2" key={category.title.id}>
+              <h3 className="font-medium text-sm">{i18n._(category.title)}</h3>
               <div className="overflow-hidden rounded-md border border-border/80">
                 {category.shortcuts.map((shortcut, index) => (
                   <div
                     className="grid grid-cols-[minmax(130px,220px)_1fr] gap-3 px-3 py-2"
-                    key={`${category.title}-${shortcut.action}`}
+                    key={`${category.title.id}-${shortcut.action}`}
                   >
                     <ShortcutKeys keys={shortcut.keys} />
                     <div>

package/src/components/ui/sidebar/panels/settings-panel/load-build-dialog.tsx

@@ -23,11 +23,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '../../../../../components/ui/primitives/dialog'
-import {
-  getAreaUnitLabel,
-  type LinearUnit,
-  squareMetersToAreaUnit,
-} from '../../../../../lib/measurements'
+import { getAreaUnitLabel, type LinearUnit, squareMetersToAreaUnit } from '@pascal-app/core'
 
 export type PendingImport = {
   fileName: string

package/src/components/ui/sidebar/panels/site-panel/building-tree-node.tsx

@@ -1,4 +1,4 @@
-import { type BuildingNode, useScene } from '@pascal-app/core'
+import { type BuildingNode, useScene, usePascalI18n } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Building2, Plus } from 'lucide-react'
 import { memo, useState } from 'react'
@@ -23,6 +23,7 @@ export const BuildingTreeNode = memo(function BuildingTreeNode({
   depth,
   isLast,
 }: BuildingTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [expanded, setExpanded] = useState(true)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
   const name = useScene((s) => s.nodes[nodeId]?.name)
@@ -63,7 +64,7 @@ export const BuildingTreeNode = memo(function BuildingTreeNode({
                 <Plus className="h-3 w-3" />
               </button>
             </TooltipTrigger>
-            <TooltipContent side="right">Add new level</TooltipContent>
+            <TooltipContent side="right">{i18n._({ id: 'editor.sidebar.panels.sitePanel.buildingTreeNode.addNewLevel', message: 'Add new level' })}</TooltipContent>
           </Tooltip>
         </div>
       }
@@ -75,7 +76,7 @@ export const BuildingTreeNode = memo(function BuildingTreeNode({
       isLast={isLast}
       isSelected={isSelected}
       isVisible={isVisible}
-      label={name || 'Building'}
+      label={name || i18n._({ id: 'editor.sidebar.panels.sitePanel.buildingTreeNode.building', message: 'Building' })}
       onClick={handleClick}
       onDoubleClick={() => focusTreeNode(nodeId)}
       onToggle={() => setExpanded(!expanded)}

package/src/components/ui/sidebar/panels/site-panel/ceiling-tree-node.tsx

@@ -1,13 +1,14 @@
-import { type AnyNodeId, type CeilingNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type CeilingNode, useScene, usePascalI18n} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useEffect, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import { startCeilingEditFromTreeSelection } from './../../../../../lib/ceiling-edit-session'
-import { formatAreaLabel } from './../../../../../lib/measurements'
+import { formatAreaLabel } from '@pascal-app/core'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
+import { ceilingDefaultName } from './default-names'
 
 interface CeilingTreeNodeProps {
   nodeId: AnyNodeId
@@ -20,6 +21,7 @@ export const CeilingTreeNode = memo(function CeilingTreeNode({
   depth,
   isLast,
 }: CeilingTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [expanded, setExpanded] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId as AnyNodeId]?.visible !== false)
@@ -77,7 +79,7 @@ export const CeilingTreeNode = memo(function CeilingTreeNode({
   const handleStartEditing = useCallback(() => setIsEditing(true), [])
   const handleStopEditing = useCallback(() => setIsEditing(false), [])
 
-  const defaultName = `Ceiling (${formatAreaLabel(calculatePolygonArea(polygon), unit)})`
+  const defaultName = ceilingDefaultName(i18n, formatAreaLabel(calculatePolygonArea(polygon), unit))
 
   return (
     <TreeNodeWrapper

package/src/components/ui/sidebar/panels/site-panel/chimney-tree-node.tsx

@@ -1,4 +1,4 @@
-import { type AnyNodeId, type ChimneyNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type ChimneyNode, useScene, usePascalI18n } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
@@ -6,6 +6,7 @@ import { SnapTargetIcon } from '../../../snap-target-badge'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
+import { nodeLabelDescriptor } from '../../../../../i18n/node-messages'
 
 interface ChimneyTreeNodeProps {
   nodeId: AnyNodeId
@@ -18,6 +19,7 @@ export const ChimneyTreeNode = memo(function ChimneyTreeNode({
   depth,
   isLast,
 }: ChimneyTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
   const node = useScene((s) => s.nodes[nodeId] as ChimneyNode | undefined)
@@ -39,7 +41,7 @@ export const ChimneyTreeNode = memo(function ChimneyTreeNode({
     [nodeId, setSelection],
   )
 
-  const defaultName = node?.name || 'Chimney'
+  const defaultName = node?.name || i18n._(nodeLabelDescriptor('chimney', 'Chimney'))
 
   return (
     <TreeNodeWrapper

package/src/components/ui/sidebar/panels/site-panel/collection-tree-node.tsx

@@ -6,7 +6,7 @@ import {
   findLevelAncestorId,
   type LevelNode,
   resolveBuildingForLevel,
-  useScene,
+  useScene, usePascalI18n,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Layers, Trash2 } from 'lucide-react'
@@ -44,6 +44,7 @@ function useLiveMembers(collectionId: CollectionId) {
 
 /** Collections, listed under the level tree. Absent when the scene has none. */
 export const CollectionsSection = memo(function CollectionsSection() {
+  const i18n = usePascalI18n()
   const collectionIds = useScene(useShallow((s) => Object.keys(s.collections) as CollectionId[]))
   const [expanded, setExpanded] = useState(true)
 
@@ -58,7 +59,7 @@ export const CollectionsSection = memo(function CollectionsSection() {
         icon={<Layers className="h-3.5 w-3.5" />}
         label={
           <span className="flex items-center gap-1.5">
-            Collections
+            {i18n._({ id: 'editor.sidebar.panels.sitePanel.collectionTreeNode.collections', message: 'Collections' })}
             <span className="text-muted-foreground text-xs">{collectionIds.length}</span>
           </span>
         }
@@ -90,6 +91,7 @@ const CollectionTreeNode = memo(function CollectionTreeNode({
   depth,
   isLast,
 }: CollectionTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const [expanded, setExpanded] = useState(false)
   const name = useScene((s) => s.collections[collectionId]?.name)
@@ -147,7 +149,7 @@ const CollectionTreeNode = memo(function CollectionTreeNode({
             event.stopPropagation()
             deleteCollection(collectionId)
           }}
-          title="Delete collection"
+          title={i18n._({ id: 'editor.sidebar.panels.sitePanel.collectionTreeNode.deleteCollection', message: 'Delete collection' })}
           type="button"
         >
           <Trash2 className="h-3 w-3" />
@@ -159,7 +161,7 @@ const CollectionTreeNode = memo(function CollectionTreeNode({
       icon={
         <ColorDot
           color={color ?? '#6366f1'}
-          label="Collection colour"
+          label={i18n._({ id: 'editor.sidebar.panels.sitePanel.collectionTreeNode.collectionColour', message: 'Collection colour' })}
           onChange={(next) => updateCollection(collectionId, { color: next })}
         />
       }
@@ -169,7 +171,7 @@ const CollectionTreeNode = memo(function CollectionTreeNode({
       label={
         <span className="flex min-w-0 items-center gap-1.5">
           <InlineRenameField
-            defaultName="Collection"
+            defaultName={i18n._({ id: 'editor.layers.defaultName.collection', message: 'Collection' })}
             isEditing={isEditing}
             name={name}
             onRename={handleRename}

package/src/components/ui/sidebar/panels/site-panel/column-tree-node.tsx

@@ -1,10 +1,11 @@
-import { type AnyNodeId, type ColumnNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type ColumnNode, useScene, usePascalI18n } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
+import { nodeLabelDescriptor } from '../../../../../i18n/node-messages'
 
 interface ColumnTreeNodeProps {
   nodeId: AnyNodeId
@@ -17,6 +18,7 @@ export const ColumnTreeNode = memo(function ColumnTreeNode({
   depth,
   isLast,
 }: ColumnTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
   const node = useScene((s) => s.nodes[nodeId] as ColumnNode | undefined)
@@ -38,7 +40,7 @@ export const ColumnTreeNode = memo(function ColumnTreeNode({
     [nodeId, setSelection],
   )
 
-  const defaultName = node?.name || 'Column'
+  const defaultName = node?.name || i18n._(nodeLabelDescriptor('column', 'Column'))
 
   return (
     <TreeNodeWrapper

package/src/components/ui/sidebar/panels/site-panel/default-names.ts

@@ -0,0 +1,75 @@
+import type { PascalI18n, RoofType, StairSegmentNode, ZoneNode } from '@pascal-app/core'
+
+/** Names a layer row shows (and its drag preview) until the user renames it. */
+
+export function zoneDefaultName(
+  i18n: PascalI18n,
+  zone: { spaceRole?: ZoneNode['spaceRole'] } | undefined,
+  area: string,
+): string {
+  return zone?.spaceRole === 'room'
+    ? i18n._({ id: 'editor.layers.defaultName.room', message: 'Room ({area})', values: { area } })
+    : i18n._({ id: 'editor.layers.defaultName.zone', message: 'Zone ({area})', values: { area } })
+}
+
+export function slabDefaultName(i18n: PascalI18n, area: string): string {
+  return i18n._({ id: 'editor.layers.defaultName.slab', message: 'Slab ({area})', values: { area } })
+}
+
+export function ceilingDefaultName(i18n: PascalI18n, area: string): string {
+  return i18n._({
+    id: 'editor.layers.defaultName.ceiling',
+    message: 'Ceiling ({area})',
+    values: { area },
+  })
+}
+
+export function roofDefaultName(i18n: PascalI18n, count: number): string {
+  return i18n._({
+    id: 'editor.layers.defaultName.roof',
+    message: 'Roof ({count, plural, one {# segment} other {# segments}})',
+    values: { count },
+  })
+}
+
+export function staircaseDefaultName(i18n: PascalI18n, count: number): string {
+  return i18n._({
+    id: 'editor.layers.defaultName.staircase',
+    message: 'Staircase ({count, plural, one {# segment} other {# segments}})',
+    values: { count },
+  })
+}
+
+export function roofSegmentDefaultName(
+  i18n: PascalI18n,
+  roofType: RoofType,
+  width: number,
+  depth: number,
+): string {
+  return i18n._({
+    id: 'editor.layers.defaultName.roofSegment',
+    message:
+      '{roofType, select, hip {Hip} gable {Gable} shed {Shed} gambrel {Gambrel} dutch {Dutch} mansard {Mansard} flat {Flat} conical {Conical} barrel {Barrel} other {Roof}} ({width}×{depth}m)',
+    values: { roofType, width: width.toFixed(1), depth: depth.toFixed(1) },
+  })
+}
+
+export function stairSegmentDefaultName(
+  i18n: PascalI18n,
+  segmentType: StairSegmentNode['segmentType'],
+  width: number,
+  length: number,
+): string {
+  const values = { width: width.toFixed(1), length: length.toFixed(1) }
+  return segmentType === 'stair'
+    ? i18n._({
+        id: 'editor.layers.defaultName.flight',
+        message: 'Flight ({width}×{length}m)',
+        values,
+      })
+    : i18n._({
+        id: 'editor.layers.defaultName.landing',
+        message: 'Landing ({width}×{length}m)',
+        values,
+      })
+}

package/src/components/ui/sidebar/panels/site-panel/door-tree-node.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { type AnyNodeId, type DoorNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type DoorNode, useScene, usePascalI18n } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
@@ -8,6 +8,7 @@ import { resolveNodeSnapTarget, SnapTargetIcon } from '../../../snap-target-badg
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
+import { nodeLabelDescriptor } from '../../../../../i18n/node-messages'
 
 interface DoorTreeNodeProps {
   nodeId: AnyNodeId
@@ -20,6 +21,7 @@ export const DoorTreeNode = memo(function DoorTreeNode({
   depth,
   isLast,
 }: DoorTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId as AnyNodeId]?.visible !== false)
   const node = useScene((s) => s.nodes[nodeId] as DoorNode | undefined)
@@ -62,7 +64,7 @@ export const DoorTreeNode = memo(function DoorTreeNode({
       isVisible={isVisible}
       label={
         <InlineRenameInput
-          defaultName="Door"
+          defaultName={i18n._(nodeLabelDescriptor('door', 'Door'))}
           isEditing={isEditing}
           nodeId={nodeId as AnyNodeId}
           onStartEditing={handleStartEditing}

package/src/components/ui/sidebar/panels/site-panel/dormer-tree-node.tsx

@@ -1,4 +1,4 @@
-import { type AnyNodeId, type DormerNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type DormerNode, useScene, usePascalI18n } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
@@ -7,6 +7,7 @@ import { SnapTargetIcon } from '../../../snap-target-badge'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
+import { nodeLabelDescriptor } from '../../../../../i18n/node-messages'
 
 interface DormerTreeNodeProps {
   nodeId: AnyNodeId
@@ -25,6 +26,7 @@ export const DormerTreeNode = memo(function DormerTreeNode({
   depth,
   isLast,
 }: DormerTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const [expanded, setExpanded] = useState(true)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
@@ -50,7 +52,7 @@ export const DormerTreeNode = memo(function DormerTreeNode({
     [nodeId, setSelection],
   )
 
-  const defaultName = node?.name || 'Dormer'
+  const defaultName = node?.name || i18n._(nodeLabelDescriptor('dormer', 'Dormer'))
 
   return (
     <TreeNodeWrapper

package/src/components/ui/sidebar/panels/site-panel/elevator-tree-node.tsx

@@ -1,10 +1,11 @@
-import { type AnyNodeId, type ElevatorNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type ElevatorNode, useScene, usePascalI18n } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
+import { nodeLabelDescriptor } from '../../../../../i18n/node-messages'
 
 interface ElevatorTreeNodeProps {
   nodeId: AnyNodeId
@@ -17,6 +18,7 @@ export const ElevatorTreeNode = memo(function ElevatorTreeNode({
   depth,
   isLast,
 }: ElevatorTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
   const node = useScene((s) => s.nodes[nodeId] as ElevatorNode | undefined)
@@ -53,7 +55,7 @@ export const ElevatorTreeNode = memo(function ElevatorTreeNode({
       isVisible={isVisible}
       label={
         <InlineRenameInput
-          defaultName={node?.name || 'Elevator'}
+          defaultName={node?.name || i18n._(nodeLabelDescriptor('elevator', 'Elevator'))}
           isEditing={isEditing}
           nodeId={nodeId}
           onStartEditing={() => setIsEditing(true)}