@pascal-app/editor 1.0.6 → 1.1.0

package/src/components/ui/sidebar/panels/site-panel/inline-rename-input.tsx

@@ -1,7 +1,9 @@
-import { type AnyNodeId, useScene } from '@pascal-app/core'
+import { type AnyNodeId, usePascalI18n, useScene } from '@pascal-app/core'
 import { Pencil } from 'lucide-react'
 import { memo, useCallback, useEffect, useRef, useState } from 'react'
+import { displayRoomName } from './../../../../../lib/room-name-messages'
 import { cn } from './../../../../../lib/utils'
+import { commitTreeRoomRename } from './../../../panels/room-name-options'
 
 interface InlineRenameFieldProps {
   name: string | undefined
@@ -18,15 +20,19 @@ interface InlineRenameFieldProps {
 
 type InlineRenameInputProps = Omit<InlineRenameFieldProps, 'name' | 'onRename'> & {
   nodeId: AnyNodeId
+  /** The part of the stored name the user edits; a generated default edits as empty. */
+  editableName?: (name: string | undefined) => string | undefined
 }
 
 /** Renames a scene node through `updateNode`. */
 export const InlineRenameInput = memo(function InlineRenameInput({
   nodeId,
+  editableName,
   ...props
 }: InlineRenameInputProps) {
   const updateNode = useScene((s) => s.updateNode)
-  const name = useScene((s) => s.nodes[nodeId]?.name)
+  const stored = useScene((s) => s.nodes[nodeId]?.name)
+  const name = editableName ? editableName(stored) : stored
   const handleRename = useCallback(
     (next: string | undefined) => updateNode(nodeId, { name: next }),
     [nodeId, updateNode],
@@ -34,6 +40,30 @@ export const InlineRenameInput = memo(function InlineRenameInput({
   return <InlineRenameField {...props} name={name} onRename={handleRename} />
 })
 
+/**
+ * Renames a room or zone from the layer tree. The field edits the name in the
+ * UI language, as the room panel shows it, and stores what an edit there
+ * stores: a catalog name stays English ("Salon 3" on a Lounge stores "Lounge 3").
+ */
+export const RoomRenameInput = memo(function RoomRenameInput({
+  nodeId,
+  ...props
+}: Omit<InlineRenameInputProps, 'editableName' | 'displayName'>) {
+  const i18n = usePascalI18n()
+  const stored = useScene((s) => s.nodes[nodeId]?.name)
+  const handleRename = useCallback(
+    (next: string | undefined) => commitTreeRoomRename(nodeId, next, i18n),
+    [nodeId, i18n],
+  )
+  return (
+    <InlineRenameField
+      {...props}
+      name={stored ? displayRoomName(stored, i18n) : stored}
+      onRename={handleRename}
+    />
+  )
+})
+
 export const InlineRenameField = memo(function InlineRenameField({
   name,
   onRename,
@@ -44,6 +74,7 @@ export const InlineRenameField = memo(function InlineRenameField({
   className,
   onStartEditing,
 }: InlineRenameFieldProps) {
+  const i18n = usePascalI18n()
   const [value, setValue] = useState(name || '')
   const inputRef = useRef<HTMLInputElement>(null)
   const inputSize = Math.max((value || defaultName).length, 1)
@@ -63,7 +94,7 @@ export const InlineRenameField = memo(function InlineRenameField({
 
   const handleSave = useCallback(() => {
     const trimmed = value.trim()
-    if (trimmed !== name) {
+    if ((trimmed || undefined) !== (name || undefined)) {
       onRename(trimmed || undefined)
     }
     onStopEditing()
@@ -87,6 +118,7 @@ export const InlineRenameField = memo(function InlineRenameField({
         </span>
         {onStartEditing && (
           <button
+            aria-label={i18n._({ id: 'editor.layers.rename', message: 'Rename' })}
             className="shrink-0 text-muted-foreground opacity-0 transition-opacity hover:text-foreground group-hover/rename:opacity-100"
             onClick={(e) => {
               e.stopPropagation()
@@ -102,6 +134,7 @@ export const InlineRenameField = memo(function InlineRenameField({
 
   return (
     <input
+      aria-label={i18n._({ id: 'editor.layers.rename', message: 'Rename' })}
       className={cn(
         'm-0 h-5 min-w-[1ch] max-w-full flex-none rounded-none border-primary/50 border-b bg-transparent px-0 py-0 text-foreground text-sm outline-none focus:border-primary',
         className,

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

@@ -1,4 +1,4 @@
-import { type AnyNodeId, type ItemNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type ItemNode, useScene, usePascalI18n } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useEffect, useState } from 'react'
@@ -12,6 +12,7 @@ import {
   TreeNodeWrapper,
 } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
+import { nodeLabelDescriptor } from '../../../../../i18n/node-messages'
 
 const CATEGORY_ICONS: Record<string, string> = {
   door: '/icons/door.webp',
@@ -34,6 +35,7 @@ export const ItemTreeNode = memo(function ItemTreeNode({
   depth,
   isLast,
 }: ItemTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const [expanded, setExpanded] = useState(true)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
@@ -83,7 +85,7 @@ export const ItemTreeNode = memo(function ItemTreeNode({
 
   const iconSrc = CATEGORY_ICONS[asset?.category ?? ''] || '/icons/couch.webp'
   const snapTarget = resolveNodeSnapTarget(node)
-  const defaultName = asset?.name || 'Item'
+  const defaultName = asset?.name || i18n._(nodeLabelDescriptor('item', 'Item'))
   const hasChildren = children.length > 0
 
   return (

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

@@ -1,12 +1,12 @@
-import { type LevelNode, useScene } from '@pascal-app/core'
+import { type LevelNode, useLocale, usePascalI18n, useScene } from '@pascal-app/core'
 import { markPerfAction, useViewer } from '@pascal-app/viewer'
 import { Layers } from 'lucide-react'
 import { memo, useCallback, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
-import { getDefaultLevelName, getLevelDisplayName } from '@pascal-app/core'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
+import { authoredLevelName, localizedLevelName } from '../../../../../i18n/level-name'
 
 interface LevelTreeNodeProps {
   nodeId: LevelNode['id']
@@ -19,6 +19,8 @@ export const LevelTreeNode = memo(function LevelTreeNode({
   depth,
   isLast,
 }: LevelTreeNodeProps) {
+  const i18n = usePascalI18n()
+  const locale = useLocale()
   const [expanded, setExpanded] = useState(true)
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
@@ -40,8 +42,8 @@ export const LevelTreeNode = memo(function LevelTreeNode({
   const handleStartEditing = useCallback(() => setIsEditing(true), [])
   const handleStopEditing = useCallback(() => setIsEditing(false), [])
 
-  const defaultName = getDefaultLevelName(level)
-  const displayName = getLevelDisplayName({ name: levelName, level })
+  const defaultName = localizedLevelName({ level }, i18n, locale)
+  const displayName = localizedLevelName({ name: levelName, level }, i18n, locale)
 
   return (
     <TreeNodeWrapper
@@ -58,6 +60,7 @@ export const LevelTreeNode = memo(function LevelTreeNode({
         <InlineRenameInput
           defaultName={defaultName}
           displayName={displayName}
+          editableName={(name) => authoredLevelName({ name, level })}
           isEditing={isEditing}
           nodeId={nodeId}
           onStartEditing={handleStartEditing}

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

@@ -1,5 +1,5 @@
 import { Icon as IconifyIcon } from '@iconify/react'
-import { type AnyNodeId, nodeRegistry, useScene } from '@pascal-app/core'
+import { type AnyNodeId, nodeRegistry, useScene, usePascalI18n} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useEffect, useState, useSyncExternalStore } from 'react'
@@ -15,6 +15,7 @@ import {
 } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
 import { resolveTreeChildIds, treeContainsDescendant } from './tree-structure'
+import { nodeLabelDescriptor } from '../../../../../i18n/node-messages'
 
 interface RegistryTreeNodeProps {
   nodeId: AnyNodeId
@@ -34,6 +35,7 @@ export const RegistryTreeNode = memo(function RegistryTreeNode({
   depth,
   isLast,
 }: RegistryTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const [expanded, setExpanded] = useState(true)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
@@ -72,7 +74,11 @@ export const RegistryTreeNode = memo(function RegistryTreeNode({
     )
   const snapTarget = resolveNodeSnapTarget(node)
   const defaultName =
-    node ? tree?.label?.(node, useScene.getState().nodes) || node.name || presentation?.label || 'Node' : 'Node'
+    (node &&
+      (tree?.label?.(node, useScene.getState().nodes) ||
+        node.name ||
+        (presentation?.label && i18n._(nodeLabelDescriptor(node.type, presentation.label))))) ||
+    i18n._({ id: 'editor.layers.defaultName.node', message: 'Node' })
   const hasChildren = children.length > 0 || hasHostChildren
 
   useEffect(() => {

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

@@ -1,4 +1,4 @@
-import { type AnyNodeId, type RoofNode, type RoofSegmentNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type RoofNode, type RoofSegmentNode, useScene, usePascalI18n} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { AnimatePresence } from 'motion/react'
 import Image from 'next/image'
@@ -9,6 +9,7 @@ import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
 import { DropIndicatorLine, useTreeNodeDrag } from './tree-node-drag'
+import { roofDefaultName, roofSegmentDefaultName } from './default-names'
 
 interface RoofTreeNodeProps {
   nodeId: AnyNodeId
@@ -21,6 +22,7 @@ export const RoofTreeNode = memo(function RoofTreeNode({
   depth,
   isLast,
 }: RoofTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const [expanded, setExpanded] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
@@ -84,7 +86,7 @@ export const RoofTreeNode = memo(function RoofTreeNode({
   }, [isDropTarget, expanded])
 
   const segmentCount = segments.length
-  const defaultName = `Roof (${segmentCount} segment${segmentCount !== 1 ? 's' : ''})`
+  const defaultName = roofDefaultName(i18n, segmentCount)
 
   // Hide the dragged segment from every roof while dragging
   const visibleSegments = drag ? segments.filter((seg) => seg.id !== drag.nodeId) : segments
@@ -163,6 +165,7 @@ function RoofSegmentTreeNode({
   depth: number
   isLast?: boolean
 }) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const [expanded, setExpanded] = useState(true)
   const accessoryIds = useScene(
@@ -206,16 +209,16 @@ function RoofSegmentTreeNode({
   const handlePointerDown = useCallback(
     (e: React.PointerEvent) => {
       if (e.button !== 0) return
-      const label = `${node.roofType.charAt(0).toUpperCase() + node.roofType.slice(1)} (${node.width.toFixed(1)}×${node.depth.toFixed(1)}m)`
+      const label = roofSegmentDefaultName(i18n, node.roofType, node.width, node.depth)
       startDrag(node.id, node.type, node.parentId as string, label, e.clientX, e.clientY)
     },
-    [node.id, node.type, node.parentId, node.roofType, node.width, node.depth, startDrag],
+    [node.id, node.type, node.parentId, node.roofType, node.width, node.depth, startDrag, i18n],
   )
 
   const handleStartEditing = useCallback(() => setIsEditing(true), [])
   const handleStopEditing = useCallback(() => setIsEditing(false), [])
 
-  const defaultName = `${node.roofType.charAt(0).toUpperCase() + node.roofType.slice(1)} (${node.width.toFixed(1)}x${node.depth.toFixed(1)}m)`
+  const defaultName = roofSegmentDefaultName(i18n, node.roofType, node.width, node.depth)
 
   const hasAccessories = accessoryIds.length > 0
 

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { type AnyNodeId, type ShelfNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type ShelfNode, useScene, usePascalI18n } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useEffect, useState } from 'react'
@@ -13,6 +13,7 @@ import {
   TreeNodeWrapper,
 } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
+import { nodeLabelDescriptor } from '../../../../../i18n/node-messages'
 
 interface ShelfTreeNodeProps {
   nodeId: ShelfNode['id']
@@ -32,6 +33,7 @@ export const ShelfTreeNode = memo(function ShelfTreeNode({
   depth,
   isLast,
 }: ShelfTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const [expanded, setExpanded] = useState(true)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
@@ -97,7 +99,7 @@ export const ShelfTreeNode = memo(function ShelfTreeNode({
       isVisible={isVisible}
       label={
         <InlineRenameInput
-          defaultName="Shelf"
+          defaultName={i18n._(nodeLabelDescriptor('shelf', 'Shelf'))}
           isEditing={isEditing}
           nodeId={nodeId}
           onStartEditing={handleStartEditing}

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

@@ -1,11 +1,13 @@
-import { type AnyNodeId, floorFootprintName, type SlabNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type SlabNode, usePascalI18n, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
-import { formatAreaLabel } from './../../../../../lib/measurements'
+import { formatAreaLabel } from '@pascal-app/core'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
+import { localizedFloorFootprintName } from '../../../../../i18n/floor-footprint-name'
+import { slabDefaultName } from './default-names'
 
 interface SlabTreeNodeProps {
   nodeId: AnyNodeId
@@ -18,6 +20,7 @@ export const SlabTreeNode = memo(function SlabTreeNode({
   depth,
   isLast,
 }: SlabTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
   const polygon = useScene((s) => (s.nodes[nodeId] as SlabNode | undefined)?.polygon ?? [])
@@ -30,7 +33,9 @@ export const SlabTreeNode = memo(function SlabTreeNode({
   // footprint's name ("Shared floor", "Lanai floor"), opening that panel.
   const footprint = useScene((s) => {
     const node = s.nodes[nodeId]
-    return node?.type === 'slab' && node.plateRole === 'base' ? floorFootprintName(s.nodes, node) : null
+    return node?.type === 'slab' && node.plateRole === 'base'
+      ? localizedFloorFootprintName(s.nodes, node, i18n)
+      : null
   })
 
   const handleClick = useCallback(
@@ -49,7 +54,7 @@ export const SlabTreeNode = memo(function SlabTreeNode({
   const handleStartEditing = useCallback(() => setIsEditing(true), [])
   const handleStopEditing = useCallback(() => setIsEditing(false), [])
 
-  const defaultName = `Slab (${formatAreaLabel(calculatePolygonArea(polygon), unit)})`
+  const defaultName = slabDefaultName(i18n, formatAreaLabel(calculatePolygonArea(polygon), unit))
 
   return (
     <TreeNodeWrapper

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

@@ -1,4 +1,4 @@
-import { type AnyNodeId, type SolarPanelNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type SolarPanelNode, 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 SolarPanelTreeNodeProps {
   nodeId: AnyNodeId
@@ -18,6 +19,7 @@ export const SolarPanelTreeNode = memo(function SolarPanelTreeNode({
   depth,
   isLast,
 }: SolarPanelTreeNodeProps) {
+  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 SolarPanelNode | undefined)
@@ -39,7 +41,7 @@ export const SolarPanelTreeNode = memo(function SolarPanelTreeNode({
     [nodeId, setSelection],
   )
 
-  const defaultName = node?.name || 'Solar Panel'
+  const defaultName = node?.name || i18n._(nodeLabelDescriptor('solar-panel', 'Solar Panel'))
 
   return (
     <TreeNodeWrapper

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

@@ -1,12 +1,13 @@
 'use client'
 
-import { type SpawnNode, useScene } from '@pascal-app/core'
+import { type SpawnNode, 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 SpawnTreeNodeProps {
   nodeId: SpawnNode['id']
@@ -19,6 +20,7 @@ export const SpawnTreeNode = memo(function SpawnTreeNode({
   depth,
   isLast,
 }: SpawnTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
   const isSelected = useViewer((state) => state.selection.selectedIds.includes(nodeId))
@@ -60,7 +62,7 @@ export const SpawnTreeNode = memo(function SpawnTreeNode({
       isVisible={isVisible}
       label={
         <InlineRenameInput
-          defaultName="Spawn Point"
+          defaultName={i18n._(nodeLabelDescriptor('spawn', 'Spawn Point'))}
           isEditing={isEditing}
           nodeId={nodeId}
           onStartEditing={() => setIsEditing(true)}

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

@@ -1,4 +1,4 @@
-import { type AnyNodeId, type StairNode, type StairSegmentNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type StairNode, type StairSegmentNode, useScene, usePascalI18n} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { AnimatePresence } from 'motion/react'
 import Image from 'next/image'
@@ -8,6 +8,7 @@ import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
 import { DropIndicatorLine, useTreeNodeDrag } from './tree-node-drag'
+import { staircaseDefaultName, stairSegmentDefaultName } from './default-names'
 
 interface StairTreeNodeProps {
   nodeId: AnyNodeId
@@ -20,6 +21,7 @@ export const StairTreeNode = memo(function StairTreeNode({
   depth,
   isLast,
 }: StairTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const [expanded, setExpanded] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
@@ -79,7 +81,7 @@ export const StairTreeNode = memo(function StairTreeNode({
   }, [isDropTarget, expanded])
 
   const segmentCount = segments.length
-  const defaultName = `Staircase (${segmentCount} segment${segmentCount !== 1 ? 's' : ''})`
+  const defaultName = staircaseDefaultName(i18n, segmentCount)
 
   // Hide the dragged segment from every stair while dragging
   const visibleSegments = drag ? segments.filter((seg) => seg.id !== drag.nodeId) : segments
@@ -158,6 +160,7 @@ function StairSegmentTreeNode({
   depth: number
   isLast?: boolean
 }) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const isSelected = useViewer((state) => state.selection.selectedIds.includes(node.id))
   const isHovered = useViewer((state) => state.hoveredId === node.id)
@@ -177,18 +180,16 @@ function StairSegmentTreeNode({
   const handlePointerDown = useCallback(
     (e: React.PointerEvent) => {
       if (e.button !== 0) return
-      const typeLabel = node.segmentType === 'stair' ? 'Flight' : 'Landing'
-      const label = `${typeLabel} (${node.width.toFixed(1)}×${node.length.toFixed(1)}m)`
+      const label = stairSegmentDefaultName(i18n, node.segmentType, node.width, node.length)
       startDrag(node.id, node.type, node.parentId as string, label, e.clientX, e.clientY)
     },
-    [node.id, node.type, node.parentId, node.segmentType, node.width, node.length, startDrag],
+    [node.id, node.type, node.parentId, node.segmentType, node.width, node.length, startDrag, i18n],
   )
 
   const handleStartEditing = useCallback(() => setIsEditing(true), [])
   const handleStopEditing = useCallback(() => setIsEditing(false), [])
 
-  const typeLabel = node.segmentType === 'stair' ? 'Flight' : 'Landing'
-  const defaultName = `${typeLabel} (${node.width.toFixed(1)}×${node.length.toFixed(1)}m)`
+  const defaultName = stairSegmentDefaultName(i18n, node.segmentType, node.width, node.length)
 
   return (
     <div data-drop-child={node.id}>

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

@@ -1,4 +1,4 @@
-import { type AnyNodeId, emitter, useScene } from '@pascal-app/core'
+import { type AnyNodeId, emitter, useScene, usePascalI18n } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Camera, Eye, EyeOff, Trash2 } from 'lucide-react'
 import { memo, useState } from 'react'
@@ -13,6 +13,7 @@ interface TreeNodeActionsProps {
 }
 
 export const TreeNodeActions = memo(function TreeNodeActions({ nodeId }: TreeNodeActionsProps) {
+  const i18n = usePascalI18n()
   const [open, setOpen] = useState(false)
   const updateNode = useScene((state) => state.updateNode)
   const updateNodes = useScene((state) => state.updateNodes)
@@ -57,7 +58,7 @@ export const TreeNodeActions = memo(function TreeNodeActions({ nodeId }: TreeNod
       <button
         className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-black/5 hover:text-foreground dark:hover:bg-white/10"
         onClick={toggleVisibility}
-        title={isVisible ? 'Hide' : 'Show'}
+        title={isVisible ? i18n._({ id: 'editor.sidebar.panels.sitePanel.treeNodeActions.hide', message: 'Hide' }) : i18n._({ id: 'editor.sidebar.panels.sitePanel.treeNodeActions.show', message: 'Show' })}
       >
         {isVisible ? <Eye className="h-3 w-3" /> : <EyeOff className="h-3 w-3 opacity-50" />}
       </button>
@@ -67,7 +68,7 @@ export const TreeNodeActions = memo(function TreeNodeActions({ nodeId }: TreeNod
           <button
             className="relative flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-black/5 hover:text-foreground dark:hover:bg-white/10"
             onClick={(e) => e.stopPropagation()}
-            title="Camera snapshot"
+            title={i18n._({ id: 'editor.sidebar.panels.sitePanel.treeNodeActions.cameraSnapshot', message: 'Camera snapshot' })}
           >
             <Camera className="h-3 w-3" />
             {hasCamera && (
@@ -88,7 +89,7 @@ export const TreeNodeActions = memo(function TreeNodeActions({ nodeId }: TreeNod
                 onClick={handleViewCamera}
               >
                 <Camera className="h-3.5 w-3.5" />
-                View snapshot
+                {i18n._({ id: 'editor.sidebar.panels.sitePanel.treeNodeActions.viewSnapshot', message: 'View snapshot' })}
               </button>
             )}
             <button
@@ -96,7 +97,7 @@ export const TreeNodeActions = memo(function TreeNodeActions({ nodeId }: TreeNod
               onClick={handleCaptureCamera}
             >
               <Camera className="h-3.5 w-3.5" />
-              {hasCamera ? 'Update snapshot' : 'Take snapshot'}
+              {hasCamera ? i18n._({ id: 'editor.sidebar.panels.sitePanel.treeNodeActions.updateSnapshot', message: 'Update snapshot' }) : i18n._({ id: 'editor.sidebar.panels.sitePanel.treeNodeActions.takeSnapshot', message: 'Take snapshot' })}
             </button>
             {hasCamera && (
               <button
@@ -104,7 +105,7 @@ export const TreeNodeActions = memo(function TreeNodeActions({ nodeId }: TreeNod
                 onClick={handleClearCamera}
               >
                 <Trash2 className="h-3.5 w-3.5" />
-                Clear snapshot
+                {i18n._({ id: 'editor.sidebar.panels.sitePanel.treeNodeActions.clearSnapshot', message: 'Clear snapshot' })}
               </button>
             )}
           </div>

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

@@ -1,4 +1,11 @@
-import { type AnyNode, type AnyNodeId, emitter, nodeRegistry, useScene } from '@pascal-app/core'
+import {
+  type AnyNode,
+  type AnyNodeId,
+  emitter,
+  nodeRegistry,
+  usePascalI18n,
+  useScene,
+} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { ChevronRight } from 'lucide-react'
 import { AnimatePresence, motion } from 'motion/react'
@@ -231,6 +238,7 @@ export const TreeNodeWrapper = forwardRef<HTMLDivElement, TreeNodeWrapperProps>(
     },
     ref,
   ) {
+    const i18n = usePascalI18n()
     const rowRef = useRef<HTMLDivElement>(null)
 
     useEffect(() => {
@@ -286,7 +294,14 @@ export const TreeNodeWrapper = forwardRef<HTMLDivElement, TreeNodeWrapperProps>(
           {/* A row with nothing to fold keeps the space, and a click there selects the row. */}
           {hasChildren ? (
             <button
+              aria-expanded={expanded}
+              aria-label={
+                expanded
+                  ? i18n._({ id: 'editor.layers.collapse', message: 'Collapse' })
+                  : i18n._({ id: 'editor.layers.expand', message: 'Expand' })
+              }
               className="z-10 flex h-4 w-4 shrink-0 items-center justify-center bg-inherit"
+              type="button"
               onClick={(e) => {
                 e.stopPropagation()
                 onToggle()

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

@@ -1,11 +1,11 @@
 import {
   type AnyNodeId,
-  getLevelDisplayName,
   type LevelNode,
   type UnitNode,
   unitWarnings,
   useScene,
-  type ZoneNode,
+  type ZoneNode, usePascalI18n,
+  useLocale,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { AlertTriangle, Trash2, X } from 'lucide-react'
@@ -15,6 +15,9 @@ import { ColorDot } from './../../../../../components/ui/primitives/color-dot'
 import { assignZoneToUnit, enterUnitFocus } from './../../../../../lib/units'
 import { InlineRenameInput } from './inline-rename-input'
 import { TreeNodeWrapper } from './tree-node'
+import { nodeLabelDescriptor } from '../../../../../i18n/node-messages'
+import { localizedLevelName } from '../../../../../i18n/level-name'
+import { displayRoomName } from '../../../../../lib/room-name-messages'
 
 type UnitWarningCode = ReturnType<typeof unitWarnings>[number]['code']
 
@@ -40,10 +43,12 @@ export const UnitZoneRow = memo(function UnitZoneRow({
   isLast,
   onRemove,
 }: UnitZoneRowProps) {
+  const i18n = usePascalI18n()
+  const locale = useLocale()
   const zone = useScene((s) => s.nodes[zoneId] as ZoneNode | undefined)
   const levelLabel = useScene((s) => {
     const level = zone?.parentId ? (s.nodes[zone.parentId as AnyNodeId] as LevelNode | undefined) : undefined
-    return level?.type === 'level' ? getLevelDisplayName(level) : null
+    return level?.type === 'level' ? localizedLevelName(level, i18n, locale) : null
   })
   const isSelected = useViewer((s) => s.selection.zoneId === zoneId)
   const isHovered = useViewer((s) => s.hoveredId === zoneId)
@@ -71,7 +76,7 @@ export const UnitZoneRow = memo(function UnitZoneRow({
               event.stopPropagation()
               onRemove(zoneId)
             }}
-            title="Remove from unit"
+            title={i18n._({ id: 'editor.sidebar.panels.sitePanel.unitTreeNode.removeFromUnit', message: 'Remove from unit' })}
             type="button"
           >
             <X className="h-3 w-3" />
@@ -93,7 +98,7 @@ export const UnitZoneRow = memo(function UnitZoneRow({
       keepIconColor
       label={
         <span className="flex min-w-0 items-baseline gap-1.5">
-          <span className="truncate">{zone.name || (zone.spaceRole === 'room' ? 'Room' : 'Zone')}</span>
+          <span className="truncate">{(zone.name && displayRoomName(zone.name, i18n)) || (zone.spaceRole === 'room' ? i18n._({ id: 'editor.sidebar.panels.sitePanel.unitTreeNode.room', message: 'Room' }) : i18n._({ id: 'editor.sidebar.panels.sitePanel.unitTreeNode.zone', message: 'Zone' }))}</span>
           {levelLabel && (
             <span className="shrink-0 text-muted-foreground text-xs">{levelLabel}</span>
           )}
@@ -119,6 +124,7 @@ export const UnitTreeNode = memo(function UnitTreeNode({
   depth,
   isLast,
 }: UnitTreeNodeProps) {
+  const i18n = usePascalI18n()
   const unitId = nodeId as UnitNode['id']
   const [isEditing, setIsEditing] = useState(false)
   const [expanded, setExpanded] = useState(false)
@@ -163,7 +169,7 @@ export const UnitTreeNode = memo(function UnitTreeNode({
             event.stopPropagation()
             deleteNode(unitId)
           }}
-          title="Delete unit"
+          title={i18n._({ id: 'editor.sidebar.panels.sitePanel.unitTreeNode.deleteUnit', message: 'Delete unit' })}
           type="button"
         >
           <Trash2 className="h-3 w-3" />
@@ -175,6 +181,7 @@ export const UnitTreeNode = memo(function UnitTreeNode({
       icon={
         <ColorDot
           color={color ?? '#f59e0b'}
+          label={i18n._({ id: 'editor.layers.unitColour', message: 'Unit colour' })}
           onChange={(next) => updateNode(unitId, { color: next })}
         />
       }
@@ -185,7 +192,7 @@ export const UnitTreeNode = memo(function UnitTreeNode({
       label={
         <span className="flex min-w-0 items-center gap-1.5">
           <InlineRenameInput
-            defaultName="Unit"
+            defaultName={i18n._(nodeLabelDescriptor('unit', 'Unit'))}
             isEditing={isEditing}
             nodeId={nodeId}
             onStartEditing={() => setIsEditing(true)}
@@ -193,7 +200,7 @@ export const UnitTreeNode = memo(function UnitTreeNode({
           />
           {isFocused && (
             <span className="shrink-0 rounded-full bg-primary/15 px-1.5 text-[10px] text-primary leading-4">
-              Focused
+              {i18n._({ id: 'editor.sidebar.panels.sitePanel.unitTreeNode.focused', message: 'Focused' })}
             </span>
           )}
           {warningCodes.length > 0 && (