@pascal-app/editor 1.0.6 → 1.1.0

package/src/components/ui/panels/floor-foundation-panel.tsx

@@ -4,19 +4,22 @@ import {
   type AnyNode,
   type AnyNodeId,
   type FloorFoundationPatch,
-  floorFootprintName,
   floorFootprintSupportClass,
   upperFloorHeightControl,
-  getLevelDisplayName,
   getLevelElevations,
   getStoredLevelHeight,
   type LevelNode,
   MIN_GROUND_FLOOR_THICKNESS,
   MIN_SLAB_THICKNESS,
+  type PascalI18n,
   type SlabNode,
+  useLocale,
+  usePascalI18n,
   useScene,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
+import { localizedFloorFootprintName } from '../../../i18n/floor-footprint-name'
+import { localizedLevelName } from '../../../i18n/level-name'
 import { useRef, useState } from 'react'
 import {
   applyFloorFoundation,
@@ -33,7 +36,7 @@ import {
   THICK_FLOOR_HINT,
   thickFloorAdvice,
 } from '../../../lib/floor-footprints'
-import { formatLinearMeasurement } from '../../../lib/measurements'
+import { formatLinearMeasurement } from '@pascal-app/core'
 import { FinishSwatch } from '../controls/finish-swatch'
 import { MetricControl } from '../controls/metric-control'
 import { SegmentedControl } from '../controls/segmented-control'
@@ -78,6 +81,7 @@ export function FloorSection({
   thickness: number
   thicknessLabel: string
 }) {
+  const i18n = usePascalI18n()
   const base = 100
   const foundation = !supported && raised ? Math.min(40, 14 + foundationHeight * 30) : 0
   const band = Math.max(7, Math.min(16, thickness * 60))
@@ -98,32 +102,67 @@ export function FloorSection({
   const left = 64
   const right = 164
   const labels: { y: number; text: string; key: string }[] = [
-    { key: 'top', y: bandTop - 9, text: 'Floor top' },
+    {
+      key: 'top',
+      y: bandTop - 9,
+      text: i18n._({ id: 'editor.panels.floorFoundationPanel.section.floorTop', message: 'Floor top' }),
+    },
     {
       key: 'plate',
       y: bandTop + band / 2,
-      text: supported ? `Floor plate · ${thicknessLabel}` : `Slab · ${thicknessLabel}`,
+      text: supported
+        ? i18n._({
+            id: 'editor.panels.floorFoundationPanel.section.floorPlate',
+            message: 'Floor plate · {thickness}',
+            values: { thickness: thicknessLabel },
+          })
+        : i18n._({
+            id: 'editor.panels.floorFoundationPanel.section.slab',
+            message: 'Slab · {thickness}',
+            values: { thickness: thicknessLabel },
+          }),
     },
     ...(foundation
       ? [
           {
             key: 'foundation',
             y: bandBottom + foundation / 2,
-            text: foundationLabel ? `Foundation · ${foundationLabel}` : 'Foundation',
+            text: foundationLabel
+              ? i18n._({
+                  id: 'editor.panels.floorFoundationPanel.section.foundationKind',
+                  message: 'Foundation · {foundation}',
+                  values: { foundation: foundationLabel },
+                })
+              : i18n._({ id: 'editor.panels.floorFoundationPanel.section.foundation', message: 'Foundation' }),
           },
         ]
       : []),
-    { key: 'base', y: base + 9, text: supported ? 'Walls below' : 'Ground' },
+    {
+      key: 'base',
+      y: base + 9,
+      text: supported
+        ? i18n._({ id: 'editor.panels.floorFoundationPanel.section.wallsBelow', message: 'Walls below' })
+        : i18n._({ id: 'editor.panels.floorFoundationPanel.section.ground', message: 'Ground' }),
+    },
   ]
   return (
     <figure className="flex flex-col gap-1" data-floor-section>
       <svg
         aria-label={
           supported
-            ? `Floor plate ${thicknessLabel} thick, resting on the walls below`
+            ? i18n._({ id: 'editor.panels.floorFoundationPanel.floorPlateThicknesslabelThickRestingOn', message: 'Floor plate {thicknessLabel} thick, resting on the walls below', values: { thicknessLabel } })
             : raised
-              ? `Slab ${thicknessLabel} thick on a ${foundationLabel} foundation, floor top ${topLabel ?? ''} above the ground`
-              : `Slab ${thicknessLabel} thick on the ground, floor top ${topLabel ?? ''} above the ground`
+              ? i18n._({
+                  id: 'editor.panels.floorFoundationPanel.sectionRaised',
+                  message:
+                    'Slab {thickness} thick on a {foundation} foundation, floor top {top} above the ground',
+                  values: { thickness: thicknessLabel, foundation: foundationLabel, top: topLabel ?? '' },
+                })
+              : i18n._({
+                  id: 'editor.panels.floorFoundationPanel.sectionOnGround',
+                  message: 'Slab {thickness} thick on the ground, floor top {top} above the ground',
+                  values: { thickness: thicknessLabel, top: topLabel ?? '' },
+                })
         }
         className="h-auto w-full text-muted-foreground"
         role="img"
@@ -259,7 +298,7 @@ export function FloorSection({
         ))}
       </svg>
       <figcaption className="text-right text-[10px] text-muted-foreground/70">
-        Not to scale
+        {i18n._({ id: 'editor.panels.floorFoundationPanel.notToScale', message: 'Not to scale' })}
       </figcaption>
     </figure>
   )
@@ -271,15 +310,29 @@ type Notice = {
   together: { ids: string[]; patch: FloorFoundationPatch; lower: boolean } | null
 }
 
-export function moveTogetherLabel(count: number, lower: boolean) {
-  const verb = lower ? 'Lower' : 'Raise'
-  return count === 2 ? `${verb} both` : `${verb} all ${count}`
+export function moveTogetherLabel(count: number, lower: boolean, i18n: PascalI18n) {
+  const values = { count, number: String(count) }
+  return lower
+    ? i18n._({
+        id: 'editor.panels.floorFoundationPanel.lowerTogether',
+        message: '{count, plural, =2 {Lower both} other {Lower all {number}}}',
+        values,
+      })
+    : i18n._({
+        id: 'editor.panels.floorFoundationPanel.raiseTogether',
+        message: '{count, plural, =2 {Raise both} other {Raise all {number}}}',
+        values,
+      })
 }
 
 /** "Floor plate · Ground floor", upstairs "Floor plate · Floor 1 · rests on Ground floor". */
-export function floorPlateKicker(nodes: Record<string, AnyNode>, plate: SlabNode): string {
+export function floorPlateKicker(
+  nodes: Record<string, AnyNode>,
+  plate: SlabNode,
+  i18n: PascalI18n,
+  locale: string,
+): string {
   const level = plate.parentId ? nodes[plate.parentId] : undefined
-  const levelName = level?.type === 'level' ? ` · ${getLevelDisplayName(level)}` : ''
   // A supported floor rests on the storey right below it.
   let below: LevelNode | null = null
   if (level?.type === 'level' && floorFootprintSupportClass(nodes, plate) === 'supported')
@@ -291,8 +344,20 @@ export function floorPlateKicker(nodes: Record<string, AnyNode>, plate: SlabNode
         (!below || node.level > below.level)
       )
         below = node
-  const restsOn = below ? ` · rests on ${getLevelDisplayName(below)}` : ''
-  return `Floor plate${levelName}${restsOn}`
+  if (level?.type !== 'level')
+    return i18n._({ id: 'editor.panels.floorFoundationPanel.kicker', message: 'Floor plate' })
+  const levelName = localizedLevelName(level, i18n, locale)
+  return below
+    ? i18n._({
+        id: 'editor.panels.floorFoundationPanel.kickerRestsOn',
+        message: 'Floor plate · {level} · rests on {below}',
+        values: { level: levelName, below: localizedLevelName(below, i18n, locale) },
+      })
+    : i18n._({
+        id: 'editor.panels.floorFoundationPanel.kickerLevel',
+        message: 'Floor plate · {level}',
+        values: { level: levelName },
+      })
 }
 
 /**
@@ -311,7 +376,6 @@ export function floorFoundationModel(nodes: Record<string, AnyNode>, plate: Slab
     : 0
   return {
     upper,
-    kicker: floorPlateKicker(nodes, plate),
     preset: upper ? ('ground' as const) : footprintPreset(nodes, plate),
     /** Upstairs: the floor top (level-local). On the ground: the foundation height. */
     height,
@@ -332,6 +396,8 @@ export function floorFoundationModel(nodes: Record<string, AnyNode>, plate: Slab
  * the building live and lands as one undo step.
  */
 export function FloorFoundationPanel({ node, onClose }: { node: SlabNode; onClose: () => void }) {
+  const i18n = usePascalI18n()
+  const locale = useLocale()
   const nodes = useScene((state) => state.nodes)
   const unit = useViewer((s) => s.unit)
   const metricNotation = useViewer((s) => s.metricNotation)
@@ -341,7 +407,8 @@ export function FloorFoundationPanel({ node, onClose }: { node: SlabNode; onClos
   const plate = nodes[node.id as AnyNodeId]
   if (plate?.type !== 'slab' || plate.plateRole !== 'base') return null
   const length = (meters: number) => formatLinearMeasurement(meters, unit, metricNotation)
-  const { upper, kicker, preset, height, floorTop, minHeight, minThickness, underFloor, thickFloor } =
+  const kicker = floorPlateKicker(nodes, plate, i18n, locale)
+  const { upper, preset, height, floorTop, minHeight, minThickness, underFloor, thickFloor } =
     floorFoundationModel(nodes, plate)
   const level = plate.parentId ? nodes[plate.parentId as AnyNodeId] : undefined
   const maxHeight = level?.type === 'level' ? getStoredLevelHeight(level) - 0.5 : 3
@@ -389,7 +456,7 @@ export function FloorFoundationPanel({ node, onClose }: { node: SlabNode; onClos
       icon="/icons/floor.webp"
       kicker={kicker}
       onClose={onClose}
-      title={floorFootprintName(nodes, plate)}
+      title={localizedFloorFootprintName(nodes, plate, i18n)}
     >
       <div
         className="flex flex-col gap-3 px-4 pt-3 pb-4 text-sm"
@@ -407,13 +474,13 @@ export function FloorFoundationPanel({ node, onClose }: { node: SlabNode; onClos
         />
         <section className="flex flex-col gap-1.5" data-floor-plate-group>
           <h3 className="font-medium text-muted-foreground text-xs">
-            {upper ? 'Floor plate' : 'Slab'}
+            {upper ? i18n._({ id: 'editor.panels.floorFoundationPanel.floorPlate', message: 'Floor plate' }) : i18n._({ id: 'editor.panels.floorFoundationPanel.slab', message: 'Slab' })}
           </h3>
           {upper ? (
-            <div title="A thicker floor grows upward: the rooms below keep their height.">
+            <div title={i18n._({ id: 'editor.panels.floorFoundationPanel.aThickerFloorGrowsUpwardThe', message: 'A thicker floor grows upward: the rooms below keep their height.' })}>
               <MetricControl
                 className="h-9 text-xs"
-                label="Floor thickness"
+                label={i18n._({ id: 'editor.panels.floorFoundationPanel.floorThickness', message: 'Floor thickness' })}
                 max={Math.max(MIN_SLAB_THICKNESS, maxHeight - underside)}
                 min={Math.max(MIN_SLAB_THICKNESS, minHeight - underside)}
                 onChange={(next) => previewHeight(underside + next)}
@@ -426,10 +493,10 @@ export function FloorFoundationPanel({ node, onClose }: { node: SlabNode; onClos
               />
             </div>
           ) : (
-            <div title="The slab sits on the foundation (or the ground): a thicker slab raises the floor top and everything on it.">
+            <div title={i18n._({ id: 'editor.panels.floorFoundationPanel.theSlabSitsOnTheFoundation', message: 'The slab sits on the foundation (or the ground): a thicker slab raises the floor top and everything on it.' })}>
               <MetricControl
                 className="h-9 text-xs"
-                label="Slab thickness"
+                label={i18n._({ id: 'editor.panels.floorFoundationPanel.slabThickness', message: 'Slab thickness' })}
                 max={1}
                 min={minThickness}
                 onChange={(next) => {
@@ -454,15 +521,19 @@ export function FloorFoundationPanel({ node, onClose }: { node: SlabNode; onClos
           )}
           {upper && (
             <p className="px-0.5 text-muted-foreground text-xs" data-floor-top>
-              Floor top +{length(floorTop)}
+              {i18n._({
+                id: 'editor.panels.floorFoundationPanel.floorTopAbove',
+                message: 'Floor top +{height}',
+                values: { height: length(floorTop) },
+              })}
             </p>
           )}
           <FinishSwatch
             fallback={EDGE_DEFAULT}
-            hint="The floor's outside edge, all around the footprint."
-            label="Edge finish"
+            hint={i18n._({ id: 'editor.panels.floorFoundationPanel.theFloorSOutsideEdgeAll', message: 'The floor\'s outside edge, all around the footprint.' })}
+            label={i18n._({ id: 'editor.panels.floorFoundationPanel.edgeFinish', message: 'Edge finish' })}
             node={plate}
-            role="edge"
+            paintRole="edge"
             value={plate.slots?.edge}
           />
           {thickFloor && (
@@ -473,7 +544,7 @@ export function FloorFoundationPanel({ node, onClose }: { node: SlabNode; onClos
         </section>
         {underFloor && (
           <section className="flex flex-col gap-1.5" data-under-floor-group>
-            <h3 className="font-medium text-muted-foreground text-xs">Under the floor</h3>
+            <h3 className="font-medium text-muted-foreground text-xs">{i18n._({ id: 'editor.panels.floorFoundationPanel.underTheFloor', message: 'Under the floor' })}</h3>
             <SegmentedControl
               onChange={(next: FootprintPreset) => {
                 if (next === preset) return
@@ -481,17 +552,17 @@ export function FloorFoundationPanel({ node, onClose }: { node: SlabNode; onClos
                 report(applyFloorFoundation(plate.id, patch), patch)
               }}
               options={[
-                { label: 'On the ground', value: 'ground' },
-                { label: 'Raised on a foundation', value: 'raised' },
+                { label: i18n._({ id: 'editor.panels.floorFoundationPanel.onTheGround', message: 'On the ground' }), value: 'ground' },
+                { label: i18n._({ id: 'editor.panels.floorFoundationPanel.raisedOnAFoundation', message: 'Raised on a foundation' }), value: 'raised' },
               ]}
               value={preset}
             />
             {preset === 'raised' && (
               <>
-                <div title="The foundation stands on the ground; the slab sits on it.">
+                <div title={i18n._({ id: 'editor.panels.floorFoundationPanel.theFoundationStandsOnTheGround', message: 'The foundation stands on the ground; the slab sits on it.' })}>
                   <MetricControl
                     className="h-9 text-xs"
-                    label="Foundation height"
+                    label={i18n._({ id: 'editor.panels.floorFoundationPanel.foundationHeight', message: 'Foundation height' })}
                     max={Math.max(0.05, maxHeight)}
                     min={minHeight}
                     onChange={previewHeight}
@@ -505,9 +576,9 @@ export function FloorFoundationPanel({ node, onClose }: { node: SlabNode; onClos
                 </div>
                 <FinishSwatch
                   fallback={FOUNDATION_DEFAULT}
-                  label="Foundation finish"
+                  label={i18n._({ id: 'editor.panels.floorFoundationPanel.foundationFinish', message: 'Foundation finish' })}
                   node={plate}
-                  role="foundation"
+                  paintRole="foundation"
                   value={
                     typeof plate.foundation?.material === 'string'
                       ? plate.foundation.material
@@ -517,7 +588,11 @@ export function FloorFoundationPanel({ node, onClose }: { node: SlabNode; onClos
               </>
             )}
             <p className="px-0.5 text-muted-foreground text-xs" data-floor-top>
-              Floor top {length(floorTop)}
+              {i18n._({
+                id: 'editor.panels.floorFoundationPanel.floorTopValue',
+                message: 'Floor top {height}',
+                values: { height: length(floorTop) },
+              })}
             </p>
           </section>
         )}
@@ -540,7 +615,7 @@ export function FloorFoundationPanel({ node, onClose }: { node: SlabNode; onClos
                 type="button"
                 variant="outline"
               >
-                {moveTogetherLabel(notice.together.ids.length, notice.together.lower)}
+                {moveTogetherLabel(notice.together.ids.length, notice.together.lower, i18n)}
               </Button>
             )}
           </div>

package/src/components/ui/panels/floor-opening-panel.tsx

@@ -5,8 +5,8 @@ import {
   adjacentLevelId,
   area,
   floorOpeningHints,
-  getLevelDisplayName,
-  useScene,
+  useScene, usePascalI18n,
+  useLocale,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import {
@@ -14,10 +14,13 @@ import {
   finishFloorOpening,
   openingRoom,
 } from '../../../lib/floor-edit-session'
-import { formatAreaLabel } from '../../../lib/measurements'
+import { formatAreaLabel } from '@pascal-app/core'
 import { Button } from '../primitives/button'
 import { Switch } from '../primitives/switch'
 import { PanelWrapper } from './panel-wrapper'
+import { localizedLevelName } from '../../../i18n/level-name'
+import { nodeLabel } from '../../../i18n/node-messages'
+import { displayRoomName } from '../../../lib/room-name-messages'
 
 /**
  * A floor (or ceiling) opening: where it is, what it cuts, and the switch for
@@ -27,6 +30,8 @@ import { PanelWrapper } from './panel-wrapper'
  * handles in the scene. Done and Delete return to the room.
  */
 export function FloorOpeningPanel({ openingId }: { openingId: string }) {
+  const i18n = usePascalI18n()
+  const locale = useLocale()
   const nodes = useScene((state) => state.nodes)
   const unit = useViewer((s) => s.unit)
   const readOnly = useScene((state) => state.readOnly)
@@ -35,7 +40,13 @@ export function FloorOpeningPanel({ openingId }: { openingId: string }) {
   const onCeiling = opening.drawnOn === 'ceiling'
   const zoneId = openingRoom(nodes, opening)
   const zone = zoneId ? nodes[zoneId as AnyNodeId] : undefined
-  const roomName = zone?.type === 'zone' ? zone.name?.trim() || 'Room' : null
+  const storedRoomName = zone?.type === 'zone' ? zone.name?.trim() : undefined
+  const roomName =
+    zone?.type !== 'zone'
+      ? null
+      : storedRoomName
+        ? displayRoomName(storedRoomName, i18n)
+        : i18n._({ id: 'editor.panels.floorOpeningPanel.room', message: 'Room' })
   const level = opening.parentId ? nodes[opening.parentId as AnyNodeId] : undefined
   const adjacentId = opening.parentId
     ? adjacentLevelId(nodes, opening.parentId, onCeiling ? 1 : -1)
@@ -47,19 +58,35 @@ export function FloorOpeningPanel({ openingId }: { openingId: string }) {
     !!opening.ownerId &&
     nodes[opening.ownerId as AnyNodeId]?.type === opening.source
   const hints = floorOpeningHints(nodes, opening)
-  const title = opening.source === 'stair'
-    ? 'Stair opening'
-    : opening.source === 'elevator'
-      ? 'Elevator opening'
-      : onCeiling ? 'Ceiling opening' : 'Floor opening'
-  const kicker = [
-    'Opening',
-    roomName ? `in ${roomName}` : null,
-    level?.type === 'level' ? getLevelDisplayName(level) : null,
-  ]
-    .filter(Boolean)
-    .join(' · ')
-  const switchLabel = onCeiling ? 'Also cut the floor above' : 'Also cut the ceiling below'
+  const title = i18n._({
+    id: 'editor.panels.floorOpeningPanel.title',
+    message:
+      '{source, select, stair {Stair opening} elevator {Elevator opening} ceiling {Ceiling opening} other {Floor opening}}',
+    values: { source: opening.source === 'stair' || opening.source === 'elevator' ? opening.source : onCeiling ? 'ceiling' : 'floor' },
+  })
+  const levelName = level?.type === 'level' ? localizedLevelName(level, i18n, locale) : null
+  const kicker = roomName
+    ? levelName
+      ? i18n._({
+          id: 'editor.panels.floorOpeningPanel.kickerRoomLevel',
+          message: 'Opening · in {room} · {level}',
+          values: { room: roomName, level: levelName },
+        })
+      : i18n._({
+          id: 'editor.panels.floorOpeningPanel.kickerRoom',
+          message: 'Opening · in {room}',
+          values: { room: roomName },
+        })
+    : levelName
+      ? i18n._({
+          id: 'editor.panels.floorOpeningPanel.kickerLevel',
+          message: 'Opening · {level}',
+          values: { level: levelName },
+        })
+      : i18n._({ id: 'editor.panels.floorOpeningPanel.kicker', message: 'Opening' })
+  const switchLabel = onCeiling
+    ? i18n._({ id: 'editor.panels.floorOpeningPanel.alsoCutTheFloorAbove', message: 'Also cut the floor above' })
+    : i18n._({ id: 'editor.panels.floorOpeningPanel.alsoCutTheCeilingBelow', message: 'Also cut the ceiling below' })
   const setAdjacent = (next: boolean) =>
     useScene.getState().updateNode(opening.id, { cutsAdjacent: next })
 
@@ -72,8 +99,23 @@ export function FloorOpeningPanel({ openingId }: { openingId: string }) {
     >
       <div className="flex flex-col gap-3 px-4 pt-3 pb-4 text-sm" data-floor-opening-panel={opening.id}>
         <p className="text-muted-foreground text-xs">
-          {formatAreaLabel(area([{ outer: opening.polygon, holes: [] }]), unit, 2)}
-          {owned ? ' · Shape follows its owner.' : ' · Drag its corners to change the shape.'}
+          {owned
+            ? opening.source === 'stair'
+              ? i18n._({
+                  id: 'editor.panels.floorOpeningPanel.areaStairResize',
+                  message: '{area} · Drag its sides or corners to resize it; it moves with the stair.',
+                  values: { area: formatAreaLabel(area([{ outer: opening.polygon, holes: [] }]), unit, 2) },
+                })
+              : i18n._({
+                  id: 'editor.panels.floorOpeningPanel.areaOwned',
+                  message: '{area} · Shape follows its owner.',
+                  values: { area: formatAreaLabel(area([{ outer: opening.polygon, holes: [] }]), unit, 2) },
+                })
+            : i18n._({
+                id: 'editor.panels.floorOpeningPanel.areaDragCorners',
+                message: '{area} · Drag its corners to change the shape.',
+                values: { area: formatAreaLabel(area([{ outer: opening.polygon, holes: [] }]), unit, 2) },
+              })}
         </p>
         {owned && (
           <button
@@ -82,12 +124,14 @@ export function FloorOpeningPanel({ openingId }: { openingId: string }) {
             onClick={() => useViewer.getState().setSelection({ selectedIds: [opening.ownerId!] })}
             type="button"
           >
-            Owned by {opening.source === 'stair' ? 'Staircase' : 'Elevator'}
+            {opening.source === 'stair'
+              ? i18n._({ id: 'editor.panels.floorOpeningPanel.ownedByStaircase', message: 'Owned by Staircase' })
+              : i18n._({ id: 'editor.panels.floorOpeningPanel.ownedByElevator', message: 'Owned by Elevator' })}
           </button>
         )}
         {hosted ? (
           <p className="text-muted-foreground text-xs" data-opening-hosted>
-            A hatch in the mezzanine: it cuts only the mezzanine’s floor.
+            {i18n._({ id: 'editor.panels.floorOpeningPanel.aHatchInTheMezzanineIt', message: 'A hatch in the mezzanine: it cuts only the mezzanine’s floor.' })}
           </p>
         ) : owned ? null : (
           <label className="flex items-start gap-3" data-opening-adjacent>
@@ -95,10 +139,14 @@ export function FloorOpeningPanel({ openingId }: { openingId: string }) {
               <span className="font-medium text-[13px] text-foreground">{switchLabel}</span>
               <span className="text-muted-foreground text-xs">
                 {adjacent?.type === 'level'
-                  ? `On ${getLevelDisplayName(adjacent)}, as one void with this opening.`
+                  ? i18n._({
+                      id: 'editor.panels.floorOpeningPanel.oneVoidWith',
+                      message: 'On {level}, as one void with this opening.',
+                      values: { level: localizedLevelName(adjacent, i18n, locale) },
+                    })
                   : onCeiling
-                    ? 'There is no floor above this storey.'
-                    : 'There is no storey below.'}
+                    ? i18n._({ id: 'editor.panels.floorOpeningPanel.thereIsNoFloorAboveThis', message: 'There is no floor above this storey.' })
+                    : i18n._({ id: 'editor.panels.floorOpeningPanel.thereIsNoStoreyBelow', message: 'There is no storey below.' })}
               </span>
             </span>
             <Switch
@@ -123,7 +171,7 @@ export function FloorOpeningPanel({ openingId }: { openingId: string }) {
             type="button"
             variant="outline"
           >
-            Done
+            {i18n._({ id: 'editor.panels.floorOpeningPanel.done', message: 'Done' })}
           </Button>
           {!owned && <Button
             className="flex-1 rounded-full"
@@ -134,7 +182,7 @@ export function FloorOpeningPanel({ openingId }: { openingId: string }) {
             type="button"
             variant="outline"
           >
-            Delete
+            {i18n._({ id: 'editor.panels.floorOpeningPanel.delete', message: 'Delete' })}
           </Button>}
         </div>
       </div>

package/src/components/ui/panels/inspector-extensions.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { Icon } from '@iconify/react'
+import {
+  type AnyNodeId,
+  getInspectorExtensions,
+  type IconRef,
+  useRegistryVersion,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { lazy, Suspense, useMemo } from 'react'
+import { IconRefImage } from '../icon-ref'
+
+/**
+ * The plugin inspector extensions (`Plugin.inspectorExtensions`) for the single selected node,
+ * gated on their plugin being installed, and the one that owns the card body for it
+ * (`primaryWhen`). Read by the inspector card and by the action menu that opens them.
+ */
+export function useInspectorExtensions() {
+  const registryVersion = useRegistryVersion()
+  const selectedId = useViewer((s) =>
+    s.selection.selectedIds.length === 1 ? s.selection.selectedIds[0] : undefined,
+  ) as AnyNodeId | undefined
+  // Subscribe to the selected node's *type* only — a string primitive that
+  // doesn't change as fields are edited (same trick as ParametricInspector).
+  const selectedType = useScene((s) => (selectedId ? (s.nodes[selectedId]?.type ?? null) : null))
+  const installedPlugins = useScene((s) => s.installedPlugins)
+  const extensions = useMemo(() => {
+    // re-derive when plugin extensions register after mount (async plugin load)
+    void registryVersion
+    if (!selectedType) return []
+    return getInspectorExtensions(selectedType).filter(
+      (extension) => !extension.pluginId || installedPlugins.includes(extension.pluginId),
+    )
+  }, [selectedType, installedPlugins, registryVersion])
+  const primaryExtensionId = useScene((state) => {
+    const node = selectedId ? state.nodes[selectedId] : undefined
+    return node ? extensions.find((extension) => extension.primaryWhen?.(node))?.id : undefined
+  })
+  const primaryExtension = extensions.find((extension) => extension.id === primaryExtensionId)
+  return { selectedId, extensions, primaryExtension }
+}
+
+/** An extension's 16px icon — mirrors the parametric inspector's `renderIcon` (plain <img> so no next/image server deps). */
+export function renderExtensionIcon(ref: IconRef): React.ReactNode {
+  if (ref.kind === 'url') {
+    return <IconRefImage className="h-4 w-4 shrink-0" src={ref.src} />
+  }
+  if (ref.kind === 'iconify') {
+    return <Icon height={16} icon={ref.name} width={16} />
+  }
+  if (ref.kind === 'svg') {
+    return (
+      <svg height={16} viewBox={ref.viewBox} width={16}>
+        <path d={ref.path} fill="currentColor" />
+      </svg>
+    )
+  }
+  const LazyIcon = lazy(ref.module)
+  return (
+    <Suspense fallback={null}>
+      <LazyIcon />
+    </Suspense>
+  )
+}

package/src/components/ui/panels/mobile-panel-sheet.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { usePascalI18n } from '@pascal-app/core'
 import { X } from 'lucide-react'
 import { AnimatePresence, motion } from 'motion/react'
 import { type ReactNode, useEffect, useState } from 'react'
@@ -19,6 +20,7 @@ const HEIGHT_VH = 50
 const DRAG_CLOSE_THRESHOLD_PX = 120
 
 export function MobilePanelSheet({ open, onClose, icon, title, children }: MobilePanelSheetProps) {
+  const i18n = usePascalI18n()
   const [mounted, setMounted] = useState(false)
   const setMobilePanelSheetHeight = useEditor((s) => s.setMobilePanelSheetHeight)
 
@@ -88,7 +90,7 @@ export function MobilePanelSheet({ open, onClose, icon, title, children }: Mobil
               </h2>
             </div>
             <button
-              aria-label="Close"
+              aria-label={i18n._({ id: 'editor.panels.mobilePanelSheet.close', message: 'Close' })}
               className="flex h-8 w-8 items-center justify-center rounded-md bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground"
               onClick={onClose}
               type="button"