@pascal-app/editor 1.0.5 → 1.0.7

package/src/components/ui/panels/collections/collections-popover.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { AnyNodeId, CollectionId } from '@pascal-app/core'
-import { useScene } from '@pascal-app/core'
+import { useScene, usePascalI18n } from '@pascal-app/core'
 import {
   Check,
   ChevronDown,
@@ -36,6 +36,7 @@ interface CollectionsPopoverProps {
 }
 
 export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProps) {
+  const i18n = usePascalI18n()
   const collections = useScene((s) => s.collections)
   const nodes = useScene((s) => s.nodes)
   const createCollection = useScene((s) => s.createCollection)
@@ -102,7 +103,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
           <div className="flex items-center gap-1.5">
             <Layers className="h-3.5 w-3.5 text-muted-foreground" />
             <span className="font-semibold text-foreground text-xs tracking-tight">
-              Collections
+              {i18n._({ id: 'editor.panels.collections.collectionsPopover.collections', message: 'Collections' })}
             </span>
           </div>
           <button
@@ -114,7 +115,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
             type="button"
           >
             <Plus className="h-3 w-3" />
-            New
+            {i18n._({ id: 'editor.panels.collections.collectionsPopover.new', message: 'New' })}
           </button>
         </div>
 
@@ -132,7 +133,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
                   setCreateName('')
                 }
               }}
-              placeholder="Collection name…"
+              placeholder={i18n._({ id: 'editor.panels.collections.collectionsPopover.collectionName', message: 'Collection name…' })}
               value={createName}
             />
             <button
@@ -162,7 +163,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
             <div className="flex flex-col items-center justify-center gap-2 px-4 py-8 text-center">
               <Layers className="h-6 w-6 text-muted-foreground/40" />
               <p className="text-muted-foreground text-xs">
-                No collections yet. Create one to group elements together.
+                {i18n._({ id: 'editor.panels.collections.collectionsPopover.noCollectionsYetCreateOneTo', message: 'No collections yet. Create one to group elements together.' })}
               </p>
             </div>
           ) : (
@@ -182,8 +183,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
                       key={collection.id}
                     >
                       <span className="truncate text-foreground/80 text-xs">
-                        Delete "{collection.name}"?
-                      </span>
+                        {i18n._({ id: 'editor.panels.collections.collectionsPopover.deleteName', message: 'Delete "{name}"?', values: { name: collection.name } })}</span>
                       <div className="flex shrink-0 items-center gap-1">
                         <button
                           className="rounded-md bg-red-500/20 px-2 py-0.5 font-medium text-[11px] text-red-600 dark:text-red-400 transition-colors hover:bg-red-500/30"
@@ -193,14 +193,14 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
                           }}
                           type="button"
                         >
-                          Delete
+                          {i18n._({ id: 'editor.panels.collections.collectionsPopover.delete', message: 'Delete' })}
                         </button>
                         <button
                           className="rounded-md px-2 py-0.5 font-medium text-[11px] text-muted-foreground transition-colors hover:bg-black/6 dark:hover:bg-white/10"
                           onClick={() => setDeletingId(null)}
                           type="button"
                         >
-                          Cancel
+                          {i18n._({ id: 'editor.panels.collections.collectionsPopover.cancel', message: 'Cancel' })}
                         </button>
                       </div>
                     </li>
@@ -314,14 +314,14 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
                             }}
                           >
                             <Pencil className="h-3.5 w-3.5" />
-                            Rename
+                            {i18n._({ id: 'editor.panels.collections.collectionsPopover.rename', message: 'Rename' })}
                           </DropdownMenuItem>
                           <DropdownMenuItem
                             onClick={() => setDeletingId(collection.id)}
                             variant="destructive"
                           >
                             <Trash2 className="h-3.5 w-3.5" />
-                            Delete
+                            {i18n._({ id: 'editor.panels.collections.collectionsPopover.delete', message: 'Delete' })}
                           </DropdownMenuItem>
                         </DropdownMenuContent>
                       </DropdownMenu>

package/src/components/ui/panels/deck-boards-fields.tsx

@@ -0,0 +1,136 @@
+'use client'
+
+import {
+  type AnyNodeId,
+  DECK_BOARD_GAPS,
+  DECK_BOARD_SIZES,
+  DECK_BOARD_STOCK,
+  type DeckBoardDirection,
+  type DeckBoardSize,
+  deckBoardSettings,
+  deckJoistSpacingLimit,
+  inchFractionLabel,
+  type MessageDescriptor,
+  setZoneIntent,
+  usePascalI18n,
+  useScene,
+} from '@pascal-app/core'
+import type { ReactNode } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { applyRoomPlan } from '../../../lib/room-structure-commands'
+import { SegmentedControl } from '../controls/segmented-control'
+
+const IN = 0.0254
+
+const BOARD_OPTIONS = DECK_BOARD_SIZES.map((value) => ({
+  label: DECK_BOARD_STOCK[value].label,
+  value,
+}))
+
+const GAP_OPTIONS = DECK_BOARD_GAPS.map((gap, index) => ({
+  label: `${inchFractionLabel(gap)} in`,
+  value: String(index),
+}))
+
+const RUN_OPTIONS: ReadonlyArray<{ label: MessageDescriptor; value: DeckBoardDirection }> = [
+  {
+    label: /* i18n */ {
+      id: 'editor.panels.deckBoardsFields.alongHouse',
+      message: 'Along house',
+    },
+    value: 'parallel',
+  },
+  {
+    label: /* i18n */ { id: 'editor.panels.deckBoardsFields.diagonal', message: 'Diagonal' },
+    value: 'diagonal',
+  },
+  {
+    label: /* i18n */ {
+      id: 'editor.panels.deckBoardsFields.outFromHouse',
+      message: 'Out from house',
+    },
+    value: 'perpendicular',
+  },
+]
+
+function Field({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="flex min-h-7 items-center justify-between gap-3">
+      <span className="shrink-0">{label}</span>
+      {children}
+    </div>
+  )
+}
+
+/**
+ * A deck's boards (`decking`, through core's `setZoneIntent`): their stock, the gap between them
+ * and the way they run against the house. The engine lays them over the deck's frame, and the
+ * frame follows: joists 12 in on centre under diagonal 5/4 or composite boards (IRC R507.7), and
+ * along the house on beams square to it under boards run out from it.
+ */
+export function DeckBoardsFields({ zoneId }: { zoneId: string }) {
+  const i18n = usePascalI18n()
+  const deck = useScene(
+    useShallow((scene) => {
+      const zone = scene.nodes[zoneId as AnyNodeId]
+      if (zone?.type !== 'zone' || zone.roomType !== 'deck') return null
+      return deckBoardSettings(zone)
+    }),
+  )
+  if (!deck) return null
+  const set = (decking: NonNullable<Parameters<typeof setZoneIntent>[1]['patch']['decking']>) =>
+    applyRoomPlan(setZoneIntent(useScene.getState().nodes, { zoneId, patch: { decking } }))
+  const stock = DECK_BOARD_STOCK[deck.boardSize]
+  const gap = DECK_BOARD_GAPS.findIndex((option) => Math.abs(option - deck.gap) < 1e-6)
+  const spacing = Math.min(16 * IN, deckJoistSpacingLimit(deck))
+  return (
+    <div
+      className="mt-3 flex flex-col gap-1.5 text-muted-foreground text-xs"
+      data-deck-boards={deck.boardSize}
+    >
+      <h3 className="font-medium text-xs">
+        {i18n._({ id: 'editor.panels.deckBoardsFields.deckBoards', message: 'Deck boards' })}
+      </h3>
+      <Field label={i18n._({ id: 'editor.panels.deckBoardsFields.boards', message: 'Boards' })}>
+        <SegmentedControl
+          onChange={(boardSize: DeckBoardSize) => set({ boardSize })}
+          options={BOARD_OPTIONS}
+          value={deck.boardSize}
+        />
+      </Field>
+      <Field label={i18n._({ id: 'editor.panels.deckBoardsFields.gap', message: 'Gap' })}>
+        <SegmentedControl
+          mixed={gap < 0}
+          onChange={(index: string) => set({ gap: DECK_BOARD_GAPS[Number(index)] })}
+          options={GAP_OPTIONS}
+          value={String(Math.max(gap, 0))}
+        />
+      </Field>
+      <Field label={i18n._({ id: 'editor.panels.deckBoardsFields.run', message: 'Run' })}>
+        <SegmentedControl
+          onChange={(direction: DeckBoardDirection) => set({ direction })}
+          options={RUN_OPTIONS.map((option) => ({
+            label: i18n._(option.label),
+            value: option.value,
+          }))}
+          value={deck.direction}
+        />
+      </Field>
+      <p>
+        {i18n._({
+          id: 'editor.panels.deckBoardsFields.boardsSummary',
+          message:
+            '{label} boards {thickness} × {width} in, {gap} in apart, {direction, select, parallel {along the house, on joists square to it} diagonal {at 45° to the house} other {out from the house, on joists along it, carried by beams square to the house}}; joists {spacing} in on centre.',
+          values: {
+            label: stock.label,
+            thickness: inchFractionLabel(stock.thickness),
+            width: inchFractionLabel(stock.width),
+            gap: inchFractionLabel(deck.gap),
+            direction: deck.direction,
+            spacing: Math.round(spacing / IN),
+          },
+        })}
+      </p>
+    </div>
+  )
+}

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,
@@ -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>