@pascal-app/editor 1.0.6 → 1.1.0

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

@@ -1,3 +1,5 @@
+'use client'
+
 import {
   type AnyNode,
   type AnyNodeId,
@@ -9,6 +11,8 @@ import {
   type SiteNode,
   useScene,
   type ZoneNode,
+  useLocale,
+  usePascalI18n,
 } from '@pascal-app/core'
 import { markPerfAction, useViewer } from '@pascal-app/viewer'
 import {
@@ -53,24 +57,16 @@ import {
   buildLevelDuplicateCreateOps,
   type LevelDuplicatePreset,
 } from '@pascal-app/core/building'
-import { getDefaultLevelName, getLevelDisplayName } from '@pascal-app/core'
 import { addStoreyOnTop } from './../../../../../lib/add-storey'
+import { offerExteriorWallCopy } from './../../../../../components/ui/level-wall-copy-prompt'
 import { deleteLevelWithFallbackSelection } from './../../../../../lib/level-selection'
-import {
-  formatAreaLabel,
-  getAreaUnitLabel,
-  getLinearUnitLabel,
-  linearUnitToMeters,
-  metersToLinearUnit,
-  squareMetersToAreaUnit,
-} from './../../../../../lib/measurements'
+import { formatAreaLabel, getAreaUnitLabel, getLinearUnitLabel, linearUnitToMeters, metersToLinearUnit, squareMetersToAreaUnit } from '@pascal-app/core'
 import { createLocalGuideImage, createLocalScan } from './../../../../../lib/local-guide-image'
 import { editorHostTreeChildrenRegistry } from './../../../../../lib/host-tree-children'
 import { requestRoomDeletion } from './../../../../../lib/room-structure-commands'
 import {
   selectZoneOrRoom,
   useZoneSelected,
-  zoneKindLabel,
 } from './../../../../../lib/room-zone-routing'
 import { createUnitInBuilding, toggleZoneMembership } from './../../../../../lib/units'
 import { cn } from './../../../../../lib/utils'
@@ -79,10 +75,13 @@ import { useUploadStore } from '../../../../../store/use-upload'
 import { MetricControl } from '../../../controls/metric-control'
 import { LevelDuplicateDialog } from '../../../level-duplicate-dialog'
 import { CollectionsSection } from './collection-tree-node'
-import { InlineRenameInput } from './inline-rename-input'
+import { InlineRenameInput, RoomRenameInput } from './inline-rename-input'
 import { ZoneMembershipCheckbox } from './zone-membership-checkbox'
 import { focusTreeNode, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeDragProvider } from './tree-node-drag'
+import { zoneDefaultName } from './default-names'
+import { nodeLabelDescriptor } from '../../../../../i18n/node-messages'
+import { authoredLevelName, localizedLevelName } from '../../../../../i18n/level-name'
 
 // ============================================================================
 // PROPERTY LINE SECTION
@@ -126,6 +125,7 @@ function useSiteNode(): SiteNode | null {
 }
 
 const PropertyLineSection = memo(function PropertyLineSection() {
+  const i18n = usePascalI18n()
   const siteNode = useSiteNode()
   const updateNode = useScene((state) => state.updateNode)
   const mode = useEditor((state) => state.mode)
@@ -194,7 +194,7 @@ const PropertyLineSection = memo(function PropertyLineSection() {
 
         <div className="flex items-center gap-2">
           <Pentagon className="h-4 w-4 text-muted-foreground" />
-          <span className="font-medium text-sm">Property Line</span>
+          <span className="font-medium text-sm">{i18n._({ id: 'editor.sidebar.panels.sitePanel.propertyLine', message: 'Property Line' })}</span>
         </div>
         <button
           className={cn(
@@ -212,13 +212,13 @@ const PropertyLineSection = memo(function PropertyLineSection() {
       {/* Measurements */}
       <div className="relative flex gap-3 pr-3 pb-2 pl-10">
         <div className="text-muted-foreground text-xs">
-          Area:{' '}
+          {i18n._({ id: 'editor.sidebar.panels.sitePanel.area', message: 'Area:' })}{' '}
           <span className="text-foreground">
             {displayArea.toFixed(1)} {getAreaUnitLabel(viewerUnit)}
           </span>
         </div>
         <div className="text-muted-foreground text-xs">
-          Perimeter:{' '}
+          {i18n._({ id: 'editor.sidebar.panels.sitePanel.perimeter', message: 'Perimeter:' })}{' '}
           <span className="text-foreground">
             {displayPerimeter.toFixed(1)} {linearLabel}
           </span>
@@ -272,7 +272,7 @@ const PropertyLineSection = memo(function PropertyLineSection() {
             onClick={handleAddPoint}
           >
             <Plus className="h-3 w-3" />
-            Add point
+            {i18n._({ id: 'editor.sidebar.panels.sitePanel.addPoint', message: 'Add point' })}
           </button>
         </div>
       )}
@@ -297,6 +297,7 @@ const CameraPopover = memo(function CameraPopover({
   onOpenChange: (open: boolean) => void
   buttonClassName?: string
 }) {
+  const i18n = usePascalI18n()
   const updateNode = useScene((state) => state.updateNode)
   return (
     <Popover onOpenChange={onOpenChange} open={open}>
@@ -307,7 +308,7 @@ const CameraPopover = memo(function CameraPopover({
             buttonClassName,
           )}
           onClick={(e) => e.stopPropagation()}
-          title="Camera snapshot"
+          title={i18n._({ id: 'editor.sidebar.panels.sitePanel.cameraSnapshot', message: 'Camera snapshot' })}
         >
           <Camera className="h-3.5 w-3.5" />
           {hasCamera && (
@@ -332,7 +333,7 @@ const CameraPopover = memo(function CameraPopover({
               }}
             >
               <Camera className="h-3.5 w-3.5" />
-              View snapshot
+              {i18n._({ id: 'editor.sidebar.panels.sitePanel.viewSnapshot', message: 'View snapshot' })}
             </button>
           )}
           <button
@@ -344,7 +345,7 @@ const CameraPopover = memo(function CameraPopover({
             }}
           >
             <Camera className="h-3.5 w-3.5" />
-            {hasCamera ? 'Update snapshot' : 'Take snapshot'}
+            {hasCamera ? i18n._({ id: 'editor.sidebar.panels.sitePanel.updateSnapshot', message: 'Update snapshot' }) : i18n._({ id: 'editor.sidebar.panels.sitePanel.takeSnapshot', message: 'Take snapshot' })}
           </button>
           {hasCamera && (
             <button
@@ -356,7 +357,7 @@ const CameraPopover = memo(function CameraPopover({
               }}
             >
               <Trash2 className="h-3.5 w-3.5" />
-              Clear snapshot
+              {i18n._({ id: 'editor.sidebar.panels.sitePanel.clearSnapshot', message: 'Clear snapshot' })}
             </button>
           )}
         </div>
@@ -376,6 +377,7 @@ const ReferenceItem = memo(function ReferenceItem({
   setSelectedReferenceId: (id: string) => void
   handleDelete: (id: string, e: React.MouseEvent) => void
 }) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const [isExpanded, setIsExpanded] = useState(true)
   const updateNode = useScene((state) => state.updateNode)
@@ -450,13 +452,13 @@ const ReferenceItem = memo(function ReferenceItem({
         >
           {isCapture ? (
             <img
-              alt="Capture"
+              alt={i18n._({ id: 'editor.sidebar.panels.sitePanel.capture', message: 'Capture' })}
               className="h-3.5 w-3.5 shrink-0 object-contain opacity-70 transition-opacity group-hover/ref:opacity-100"
               src="/icons/mesh.webp"
             />
           ) : (
             <img
-              alt="Guide"
+              alt={i18n._({ id: 'editor.sidebar.panels.sitePanel.guide', message: 'Guide' })}
               className="h-3.5 w-3.5 shrink-0 object-contain opacity-70 transition-opacity group-hover/ref:opacity-100"
               src="/icons/floorplan.webp"
             />
@@ -477,7 +479,7 @@ const ReferenceItem = memo(function ReferenceItem({
               event.stopPropagation()
               updateNode(refNode.id, { visible: !isVisible })
             }}
-            title={isVisible ? 'Hide' : 'Show'}
+            title={isVisible ? i18n._({ id: 'editor.sidebar.panels.sitePanel.hide', message: 'Hide' }) : i18n._({ id: 'editor.sidebar.panels.sitePanel.show', message: 'Show' })}
             type="button"
           >
             {isVisible ? <Eye className="h-3 w-3" /> : <EyeOff className="h-3 w-3" />}
@@ -486,7 +488,7 @@ const ReferenceItem = memo(function ReferenceItem({
         <button
           className="z-20 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground opacity-0 transition-colors hover:bg-black/5 hover:text-foreground group-hover/ref:opacity-100 dark:hover:bg-white/10"
           onClick={(e) => handleDelete(refNode.id, e)}
-          title="Delete"
+          title={i18n._({ id: 'editor.sidebar.panels.sitePanel.delete', message: 'Delete' })}
           type="button"
         >
           <Trash2 className="h-3 w-3" />
@@ -516,6 +518,7 @@ const LevelReferences = memo(function LevelReferences({
   onUploadAsset,
   onDeleteAsset,
 }: LevelReferencesProps) {
+  const i18n = usePascalI18n()
   const createNode = useScene((s) => s.createNode)
   const deleteNode = useScene((s) => s.deleteNode)
   const setSelection = useViewer((s) => s.setSelection)
@@ -676,7 +679,12 @@ const LevelReferences = memo(function LevelReferences({
                 ) : (
                   <Plus className="h-3.5 w-3.5" />
                 )}
-                {uploading ? `Uploading ${uploadingType}... ${progress}%` : 'Upload scan/floorplan'}
+                {uploading ? i18n._({
+                      id: 'editor.sidebar.panels.sitePanel.uploadingProgress',
+                      message:
+                        '{assetType, select, guide {Uploading guide... {progress}%} other {Uploading scan... {progress}%}}',
+                      values: { assetType: uploadingType, progress },
+                    }) : i18n._({ id: 'editor.sidebar.panels.sitePanel.uploadScanFloorplan', message: 'Upload scan/floorplan' })}
               </button>
 
               <input
@@ -736,6 +744,8 @@ const LevelItem = memo(function LevelItem({
   onUploadAsset?: (projectId: string, levelId: string, file: File, type: 'scan' | 'guide') => void
   onDeleteAsset?: (projectId: string, url: string) => void
 }) {
+  const i18n = usePascalI18n()
+  const locale = useLocale()
   const [cameraPopoverOpen, setCameraPopoverOpen] = useState(false)
   const [duplicateDialogOpen, setDuplicateDialogOpen] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
@@ -820,7 +830,14 @@ const LevelItem = memo(function LevelItem({
 
         <div className="relative z-20 flex h-8 items-center pr-1 pl-[28px]">
           <button
+            aria-expanded={isExpanded}
+            aria-label={
+              isExpanded
+                ? i18n._({ id: 'editor.layers.collapse', message: 'Collapse' })
+                : i18n._({ id: 'editor.layers.expand', message: 'Expand' })
+            }
             className="z-20 flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center bg-inherit"
+            type="button"
             onClick={(e) => {
               e.stopPropagation()
               if (isSelected) {
@@ -840,7 +857,7 @@ const LevelItem = memo(function LevelItem({
 
         <div className="flex h-8 min-w-0 flex-1 cursor-pointer items-center gap-2 py-0 pl-0.5 text-sm">
           <img
-            alt="Level"
+            alt={i18n._({ id: 'editor.sidebar.panels.sitePanel.level', message: 'Level' })}
             className={cn(
               'h-4 w-4 shrink-0 object-contain transition-all duration-200',
               !isSelected && 'opacity-60 grayscale',
@@ -848,8 +865,9 @@ const LevelItem = memo(function LevelItem({
             src="/icons/level.webp"
           />
           <InlineRenameInput
-            defaultName={getDefaultLevelName(level.level)}
-            displayName={getLevelDisplayName(level)}
+            defaultName={localizedLevelName({ level: level.level }, i18n, locale)}
+            displayName={localizedLevelName(level, i18n, locale)}
+            editableName={(name) => authoredLevelName({ name, level: level.level })}
             isEditing={isEditing}
             nodeId={level.id}
             onStartEditing={() => setIsEditing(true)}
@@ -867,7 +885,7 @@ const LevelItem = memo(function LevelItem({
                   : 'text-muted-foreground hover:bg-accent hover:text-foreground',
               )}
               onClick={(e) => e.stopPropagation()}
-              title="Camera snapshot"
+              title={i18n._({ id: 'editor.sidebar.panels.sitePanel.cameraSnapshot', message: 'Camera snapshot' })}
             >
               <Camera className="h-3.5 w-3.5" />
               {level.camera && (
@@ -892,7 +910,7 @@ const LevelItem = memo(function LevelItem({
                   }}
                 >
                   <Camera className="h-3.5 w-3.5" />
-                  View snapshot
+                  {i18n._({ id: 'editor.sidebar.panels.sitePanel.viewSnapshot', message: 'View snapshot' })}
                 </button>
               )}
               <button
@@ -904,7 +922,7 @@ const LevelItem = memo(function LevelItem({
                 }}
               >
                 <Camera className="h-3.5 w-3.5" />
-                {level.camera ? 'Update snapshot' : 'Take snapshot'}
+                {level.camera ? i18n._({ id: 'editor.sidebar.panels.sitePanel.updateSnapshot', message: 'Update snapshot' }) : i18n._({ id: 'editor.sidebar.panels.sitePanel.takeSnapshot', message: 'Take snapshot' })}
               </button>
               {level.camera && (
                 <button
@@ -916,7 +934,7 @@ const LevelItem = memo(function LevelItem({
                   }}
                 >
                   <Trash2 className="h-3.5 w-3.5" />
-                  Clear snapshot
+                  {i18n._({ id: 'editor.sidebar.panels.sitePanel.clearSnapshot', message: 'Clear snapshot' })}
                 </button>
               )}
             </div>
@@ -925,6 +943,11 @@ const LevelItem = memo(function LevelItem({
         <Popover>
           <PopoverTrigger asChild>
             <button
+              aria-label={i18n._({
+                id: 'editor.layers.levelOptions',
+                message: '{levelName} options',
+                values: { levelName: localizedLevelName(level, i18n, locale) },
+              })}
               className={cn(
                 'mr-1 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-md opacity-0 transition-colors group-hover/level:opacity-100',
                 selectedLevelId === level.id
@@ -936,31 +959,31 @@ const LevelItem = memo(function LevelItem({
               <MoreHorizontal className="h-3.5 w-3.5" />
             </button>
           </PopoverTrigger>
-          <PopoverContent align="start" className="w-48 p-1" side="right">
+          <PopoverContent align="start" className="w-max min-w-48 max-w-72 p-1" side="right">
             <button
               className="flex w-full cursor-pointer items-center gap-2 rounded px-3 py-1.5 text-left text-sm transition-colors hover:bg-accent"
               onClick={() => handleDuplicateLevel()}
-              title="Duplicate level"
+              title={i18n._({ id: 'editor.sidebar.panels.sitePanel.duplicateLevel', message: 'Duplicate level' })}
             >
               <Copy className="h-3.5 w-3.5" />
-              Duplicate
+              {i18n._({ id: 'editor.sidebar.panels.sitePanel.duplicate', message: 'Duplicate' })}
             </button>
             <button
               className="flex w-full cursor-pointer items-center gap-2 rounded px-3 py-1.5 text-left text-sm transition-colors hover:bg-accent"
               onClick={() => setDuplicateDialogOpen(true)}
-              title="Duplicate level with options"
+              title={i18n._({ id: 'editor.sidebar.panels.sitePanel.duplicateLevelWithOptions', message: 'Duplicate level with options' })}
             >
               <Copy className="h-3.5 w-3.5" />
-              Duplicate with options...
+              {i18n._({ id: 'editor.sidebar.panels.sitePanel.duplicateWithOptions', message: 'Duplicate with options...' })}
             </button>
             <button
               className="flex w-full items-center gap-2 rounded px-3 py-1.5 text-left text-sm transition-colors enabled:cursor-pointer enabled:hover:bg-accent enabled:hover:text-red-600 disabled:cursor-not-allowed disabled:opacity-50"
               disabled={!canDeleteLevel}
               onClick={() => deleteLevelWithFallbackSelection(level.id)}
-              title={canDeleteLevel ? 'Delete level' : 'The ground level cannot be deleted'}
+              title={canDeleteLevel ? i18n._({ id: 'editor.sidebar.panels.sitePanel.deleteLevel', message: 'Delete level' }) : i18n._({ id: 'editor.sidebar.panels.sitePanel.theGroundLevelCannotBeDeleted', message: 'The ground level cannot be deleted' })}
             >
               <Trash2 className="h-3.5 w-3.5" />
-              Delete
+              {i18n._({ id: 'editor.sidebar.panels.sitePanel.delete', message: 'Delete' })}
             </button>
           </PopoverContent>
         </Popover>
@@ -977,7 +1000,7 @@ const LevelItem = memo(function LevelItem({
             <div className="relative border-border/50 border-b py-2 pr-3 pl-[60px]">
               <div className="pointer-events-none absolute top-0 bottom-0 left-[45px] z-10 w-px bg-border/50" />
               <MetricControl
-                label="Base elevation"
+                label={i18n._({ id: 'editor.sidebar.panels.sitePanel.baseElevation', message: 'Base elevation' })}
                 onChange={(value) => updateNode(level.id, { baseElevation: value })}
                 precision={2}
                 step={0.05}
@@ -1014,6 +1037,7 @@ const LevelsSection = memo(function LevelsSection({
   onUploadAsset?: (projectId: string, levelId: string, file: File, type: 'scan' | 'guide') => void
   onDeleteAsset?: (projectId: string, url: string) => void
 } = {}) {
+  const i18n = usePascalI18n()
   const updateNode = useScene((state) => state.updateNode)
   const selectedBuildingId = useViewer((state) => state.selection.buildingId)
   const selectedLevelId = useViewer((state) => state.selection.levelId)
@@ -1038,6 +1062,7 @@ const LevelsSection = memo(function LevelsSection({
   const handleAddLevel = () => {
     const newLevel = addStoreyOnTop(building.id)
     setSelection({ buildingId: building.id, levelId: newLevel.id })
+    offerExteriorWallCopy(newLevel.id)
   }
 
   return (
@@ -1056,7 +1081,7 @@ const LevelsSection = memo(function LevelsSection({
           <div className="relative z-10 flex items-center pr-1 pl-[38px]">
             <Plus className="h-3.5 w-3.5" />
           </div>
-          <span className="truncate">Add level</span>
+          <span className="truncate">{i18n._({ id: 'editor.sidebar.panels.sitePanel.addLevel', message: 'Add level' })}</span>
         </button>
         {levels.length === 0 && (
           <div className="relative flex h-8 select-none items-center border-border/50 border-b py-0 pr-2 pl-[38px] text-muted-foreground text-xs">
@@ -1064,7 +1089,7 @@ const LevelsSection = memo(function LevelsSection({
             <div className="pointer-events-none absolute top-0 bottom-1/2 left-[21px] w-px bg-border/50" />
             {/* Horizontal branch line */}
             <div className="pointer-events-none absolute top-1/2 left-[21px] h-px w-[11px] bg-border/50" />
-            No levels yet
+            {i18n._({ id: 'editor.sidebar.panels.sitePanel.noLevelsYet', message: 'No levels yet' })}
           </div>
         )}
         {[...levels].reverse().map((level, index) => (
@@ -1091,6 +1116,7 @@ const UnitsSection = memo(function UnitsSection({
 }: {
   buildingId: BuildingNode['id']
 }) {
+  const i18n = usePascalI18n()
   const unitIds = useScene(
     useShallow((s) => {
       const building = s.nodes[buildingId] as BuildingNode | undefined
@@ -1117,7 +1143,7 @@ const UnitsSection = memo(function UnitsSection({
           <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={handleNewUnit}
-            title="New unit"
+            title={i18n._({ id: 'editor.sidebar.panels.sitePanel.newUnit', message: 'New unit' })}
             type="button"
           >
             <Plus className="h-3 w-3" />
@@ -1129,7 +1155,7 @@ const UnitsSection = memo(function UnitsSection({
         icon={<Group className="h-3.5 w-3.5" />}
         label={
           <span className="flex items-center gap-1.5">
-            Units
+            {i18n._({ id: 'editor.sidebar.panels.sitePanel.units', message: 'Units' })}
             {hasUnits && <span className="text-muted-foreground text-xs">{unitIds.length}</span>}
           </span>
         }
@@ -1145,7 +1171,7 @@ const UnitsSection = memo(function UnitsSection({
           hasChildren={false}
           icon={<Plus className="h-3.5 w-3.5" />}
           isLast
-          label="New unit"
+          label={i18n._({ id: 'editor.sidebar.panels.sitePanel.newUnit', message: 'New unit' })}
           onClick={handleNewUnit}
           onToggle={() => {}}
         />
@@ -1163,6 +1189,7 @@ const ZoneItem = memo(function ZoneItem({
   depth: number
   isLast?: boolean
 }) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const [cameraPopoverOpen, setCameraPopoverOpen] = useState(false)
   const deleteNode = useScene((state) => state.deleteNode)
@@ -1190,7 +1217,7 @@ const ZoneItem = memo(function ZoneItem({
     }
   }, [isSelected])
 
-  const defaultName = `${zoneKindLabel(zone)} (${formatAreaLabel(calculatePolygonArea(zone.polygon), unit)})`
+  const defaultName = zoneDefaultName(i18n, zone, formatAreaLabel(calculatePolygonArea(zone.polygon), unit))
 
   const handleClick = () => {
     setMode('select')
@@ -1250,14 +1277,22 @@ const ZoneItem = memo(function ZoneItem({
         <ZoneMembershipCheckbox
           checked={focusedUnit.members.includes(zone.id)}
           onToggle={() => toggleZoneMembership(focusedUnit.id, zone.id)}
-          unitName={focusedUnit.name || 'Unit'}
+          unitName={focusedUnit.name || i18n._(nodeLabelDescriptor('unit', 'Unit'))}
         />
       )}
       <span className={cn('mr-2', !isSelected && 'opacity-40')}>
-        <ColorDot color={zone.color} onChange={handleColorChange} />
+        <ColorDot
+          color={zone.color}
+          label={i18n._({
+            id: 'editor.layers.spaceColour',
+            message: '{role, select, room {Room colour} other {Zone colour}}',
+            values: { role: zone.spaceRole ?? 'generic' },
+          })}
+          onChange={handleColorChange}
+        />
       </span>
       <div className="min-w-0 flex-1 pr-1">
-        <InlineRenameInput
+        <RoomRenameInput
           defaultName={defaultName}
           isEditing={isEditing}
           nodeId={zone.id}
@@ -1272,7 +1307,7 @@ const ZoneItem = memo(function ZoneItem({
             <button
               className="relative flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground opacity-0 transition-colors hover:bg-black/5 hover:text-foreground group-hover/row:opacity-100 dark:hover:bg-white/10"
               onClick={(e) => e.stopPropagation()}
-              title="Camera snapshot"
+              title={i18n._({ id: 'editor.sidebar.panels.sitePanel.cameraSnapshot', message: 'Camera snapshot' })}
             >
               <Camera className="h-3 w-3" />
               {zone.camera && (
@@ -1297,7 +1332,7 @@ const ZoneItem = memo(function ZoneItem({
                   }}
                 >
                   <Camera className="h-3.5 w-3.5" />
-                  View snapshot
+                  {i18n._({ id: 'editor.sidebar.panels.sitePanel.viewSnapshot', message: 'View snapshot' })}
                 </button>
               )}
               <button
@@ -1309,7 +1344,7 @@ const ZoneItem = memo(function ZoneItem({
                 }}
               >
                 <Camera className="h-3.5 w-3.5" />
-                {zone.camera ? 'Update snapshot' : 'Take snapshot'}
+                {zone.camera ? i18n._({ id: 'editor.sidebar.panels.sitePanel.updateSnapshot', message: 'Update snapshot' }) : i18n._({ id: 'editor.sidebar.panels.sitePanel.takeSnapshot', message: 'Take snapshot' })}
               </button>
               {zone.camera && (
                 <button
@@ -1321,15 +1356,17 @@ const ZoneItem = memo(function ZoneItem({
                   }}
                 >
                   <Trash2 className="h-3.5 w-3.5" />
-                  Clear snapshot
+                  {i18n._({ id: 'editor.sidebar.panels.sitePanel.clearSnapshot', message: 'Clear snapshot' })}
                 </button>
               )}
             </div>
           </PopoverContent>
         </Popover>
         <button
-          className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground opacity-0 transition-colors hover:bg-black/5 hover:text-foreground group-hover/row:opacity-100 dark:hover:bg-white/10"
+          aria-label={i18n._({ id: 'editor.sidebar.panels.sitePanel.delete', message: 'Delete' })}
+          className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground opacity-0 transition-colors hover:bg-black/5 hover:text-foreground group-hover/row:opacity-100 focus-visible:opacity-100 dark:hover:bg-white/10"
           onClick={handleDelete}
+          type="button"
         >
           <Trash2 className="h-3 w-3" />
         </button>
@@ -1339,6 +1376,7 @@ const ZoneItem = memo(function ZoneItem({
 })
 
 const MultiSelectionBadge = memo(function MultiSelectionBadge() {
+  const i18n = usePascalI18n()
   const selectedIds = useViewer((state) => state.selection.selectedIds)
   const setSelection = useViewer((state) => state.setSelection)
 
@@ -1347,11 +1385,15 @@ const MultiSelectionBadge = memo(function MultiSelectionBadge() {
   return (
     <div className="pointer-events-none sticky top-4 z-50 flex h-0 w-full justify-center overflow-visible">
       <div className="pointer-events-auto flex items-center gap-2.5 rounded-full border border-primary/20 bg-primary px-0.5 py-4 pl-2 font-medium text-primary-foreground text-xs shadow-black/10 shadow-lg backdrop-blur-md">
-        <span>{selectedIds.length} objects selected</span>
+        <span>{i18n._({
+            id: 'editor.sidebar.panels.sitePanel.objectsSelected',
+            message: '{count, plural, one {# object selected} other {# objects selected}}',
+            values: { count: selectedIds.length },
+          })}</span>
         <button
           className="cursor-pointer rounded-full p-1.5 transition-colors hover:bg-primary-foreground/20"
           onClick={() => setSelection({ selectedIds: [] })}
-          title="Clear selection"
+          title={i18n._({ id: 'editor.sidebar.panels.sitePanel.clearSelection', message: 'Clear selection' })}
         >
           <X className="h-4 w-4" />
         </button>
@@ -1361,6 +1403,7 @@ const MultiSelectionBadge = memo(function MultiSelectionBadge() {
 })
 
 const RoomsSection = memo(function RoomsSection() {
+  const i18n = usePascalI18n()
   const selectedLevelId = useViewer((state) => state.selection.levelId)
   const armToolMode = useEditor((state) => state.armToolMode)
   const levelZones = useScene(
@@ -1390,7 +1433,7 @@ const RoomsSection = memo(function RoomsSection() {
           <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={handleDrawZone}
-            title="Draw a zone"
+            title={i18n._({ id: 'editor.sidebar.panels.sitePanel.drawAZone', message: 'Draw a zone' })}
             type="button"
           >
             <Plus className="h-3 w-3" />
@@ -1402,7 +1445,7 @@ const RoomsSection = memo(function RoomsSection() {
         icon={<LayoutGrid className="h-3.5 w-3.5" />}
         label={
           <span className="flex items-center gap-1.5">
-            Rooms
+            {i18n._({ id: 'editor.sidebar.panels.sitePanel.rooms', message: 'Rooms' })}
             {rooms.length > 0 && (
               <span className="text-muted-foreground text-xs">{rooms.length}</span>
             )}
@@ -1413,7 +1456,7 @@ const RoomsSection = memo(function RoomsSection() {
       >
         {levelZones.length === 0 && (
           <div className="border-border/50 border-b py-2 pr-3 pl-[52px] text-muted-foreground text-xs">
-            Close walls around a space to make a room.
+            {i18n._({ id: 'editor.sidebar.panels.sitePanel.closeWallsAroundASpaceTo', message: 'Close walls around a space to make a room.' })}
           </div>
         )}
         {rooms.map((zone, index) => (
@@ -1430,7 +1473,7 @@ const RoomsSection = memo(function RoomsSection() {
               className="pt-3 pb-1 pl-[52px] font-medium text-[11px] text-muted-foreground"
               data-other-zones
             >
-              Other zones
+              {i18n._({ id: 'editor.sidebar.panels.sitePanel.otherZones', message: 'Other zones' })}
             </div>
             {others.map((zone, index) => (
               <ZoneItem depth={2} isLast={index === others.length - 1} key={zone.id} zone={zone} />
@@ -1443,6 +1486,7 @@ const RoomsSection = memo(function RoomsSection() {
 })
 
 const ContentSection = memo(function ContentSection() {
+  const i18n = usePascalI18n()
   const selectedLevelId = useViewer((state) => state.selection.levelId)
   const level = useScene((s) =>
     selectedLevelId ? ((s.nodes[selectedLevelId] as LevelNode | undefined) ?? null) : null,
@@ -1462,7 +1506,7 @@ const ContentSection = memo(function ContentSection() {
 
   if (!level) {
     return (
-      <div className="px-3 py-4 text-muted-foreground text-sm">Select a level to view content</div>
+      <div className="px-3 py-4 text-muted-foreground text-sm">{i18n._({ id: 'editor.sidebar.panels.sitePanel.selectALevelToViewContent', message: 'Select a level to view content' })}</div>
     )
   }
 
@@ -1474,7 +1518,7 @@ const ContentSection = memo(function ContentSection() {
       icon={<Boxes className="h-3.5 w-3.5" />}
       label={
         <span className="flex items-center gap-1.5">
-          Elements
+          {i18n._({ id: 'editor.sidebar.panels.sitePanel.elements', message: 'Elements' })}
           {elementChildren.length > 0 && (
             <span className="text-muted-foreground text-xs">{elementChildren.length}</span>
           )}
@@ -1485,7 +1529,7 @@ const ContentSection = memo(function ContentSection() {
     >
       {elementChildren.length === 0 ? (
         <div className="border-border/50 border-b py-2 pr-3 pl-[52px] text-muted-foreground text-xs">
-          No elements on this level
+          {i18n._({ id: 'editor.sidebar.panels.sitePanel.noElementsOnThisLevel', message: 'No elements on this level' })}
         </div>
       ) : (
         <TreeNodeDragProvider>
@@ -1520,6 +1564,7 @@ const BuildingItem = memo(function BuildingItem({
   onUploadAsset?: (projectId: string, levelId: string, file: File, type: 'scan' | 'guide') => void
   onDeleteAsset?: (projectId: string, url: string) => void
 }) {
+  const i18n = usePascalI18n()
   const setSelection = useViewer((state) => state.setSelection)
   const phase = useEditor((state) => state.phase)
   const setPhase = useEditor((state) => state.setPhase)
@@ -1560,14 +1605,14 @@ const BuildingItem = memo(function BuildingItem({
       >
         <div className="flex h-full min-w-0 flex-1 cursor-pointer items-center gap-2 py-2 pl-3">
           <img
-            alt="Building"
+            alt={i18n._({ id: 'editor.sidebar.panels.sitePanel.building', message: 'Building' })}
             className={cn(
               'h-5 w-5 object-contain transition-all',
               !isBuildingActive && 'opacity-60 grayscale',
             )}
             src="/icons/building.webp"
           />
-          <span className="truncate font-medium text-sm">{building.name || 'Building'}</span>
+          <span className="truncate font-medium text-sm">{building.name || i18n._({ id: 'editor.sidebar.panels.sitePanel.building', message: 'Building' })}</span>
         </div>
         <Popover
           onOpenChange={(open) => setBuildingCameraOpen(open ? building.id : null)}
@@ -1582,7 +1627,7 @@ const BuildingItem = memo(function BuildingItem({
                   : 'text-muted-foreground hover:bg-accent hover:text-foreground',
               )}
               onClick={(e) => e.stopPropagation()}
-              title="Camera snapshot"
+              title={i18n._({ id: 'editor.sidebar.panels.sitePanel.cameraSnapshot', message: 'Camera snapshot' })}
             >
               <Camera className="h-4 w-4" />
               {building.camera && (
@@ -1607,7 +1652,7 @@ const BuildingItem = memo(function BuildingItem({
                   }}
                 >
                   <Camera className="h-3.5 w-3.5" />
-                  View snapshot
+                  {i18n._({ id: 'editor.sidebar.panels.sitePanel.viewSnapshot', message: 'View snapshot' })}
                 </button>
               )}
               <button
@@ -1619,7 +1664,7 @@ const BuildingItem = memo(function BuildingItem({
                 }}
               >
                 <Camera className="h-3.5 w-3.5" />
-                {building.camera ? 'Update snapshot' : 'Take snapshot'}
+                {building.camera ? i18n._({ id: 'editor.sidebar.panels.sitePanel.updateSnapshot', message: 'Update snapshot' }) : i18n._({ id: 'editor.sidebar.panels.sitePanel.takeSnapshot', message: 'Take snapshot' })}
               </button>
               {building.camera && (
                 <button
@@ -1631,7 +1676,7 @@ const BuildingItem = memo(function BuildingItem({
                   }}
                 >
                   <Trash2 className="h-3.5 w-3.5" />
-                  Clear snapshot
+                  {i18n._({ id: 'editor.sidebar.panels.sitePanel.clearSnapshot', message: 'Clear snapshot' })}
                 </button>
               )}
             </div>
@@ -1679,6 +1724,7 @@ export interface SitePanelProps {
 }
 
 export function SitePanel({ projectId, onUploadAsset, onDeleteAsset }: SitePanelProps = {}) {
+  const i18n = usePascalI18n()
   const rootNodeIds = useScene((state) => state.rootNodeIds)
   const updateNode = useScene((state) => state.updateNode)
   const selectedBuildingId = useViewer((state) => state.selection.buildingId)
@@ -1703,7 +1749,7 @@ export function SitePanel({ projectId, onUploadAsset, onDeleteAsset }: SitePanel
 
   return (
     <LayoutGroup>
-      <div className="flex h-full flex-col">
+      <div className="flex h-full flex-col" data-surface="site-panel">
         {/* Site Header */}
         {siteNode && (
           <motion.div
@@ -1725,14 +1771,14 @@ export function SitePanel({ projectId, onUploadAsset, onDeleteAsset }: SitePanel
           >
             <div className="flex items-center gap-2">
               <img
-                alt="Site"
+                alt={i18n._({ id: 'editor.sidebar.panels.sitePanel.site', message: 'Site' })}
                 className={cn(
                   'h-5 w-5 object-contain transition-all',
                   phase !== 'site' && 'opacity-60 grayscale',
                 )}
                 src="/icons/site-flag.webp"
               />
-              <span className="font-medium text-sm">{siteNode.name || 'Site'}</span>
+              <span className="font-medium text-sm">{siteNode.name || i18n._({ id: 'editor.sidebar.panels.sitePanel.site', message: 'Site' })}</span>
             </div>
             <CameraPopover
               buttonClassName={cn(
@@ -1776,7 +1822,7 @@ export function SitePanel({ projectId, onUploadAsset, onDeleteAsset }: SitePanel
           {/* Buildings List */}
           {buildings.length === 0 ? (
             <motion.div className="px-3 py-4 text-muted-foreground text-sm" layout="position">
-              No buildings yet
+              {i18n._({ id: 'editor.sidebar.panels.sitePanel.noBuildingsYet', message: 'No buildings yet' })}
             </motion.div>
           ) : (
             <div className="flex min-h-0 flex-1 flex-col">