@pascal-app/editor 1.0.6 → 1.1.0

package/src/components/ui/panels/multi-selection-panel.tsx

@@ -6,14 +6,15 @@ import {
   type BuildingNode,
   resolveBuildingForLevel,
   runAsSingleSceneHistoryStep,
-  useScene,
+  useScene, usePascalI18n,
+  type PascalI18n,
 } from '@pascal-app/core'
 import { unwrapCorner, windowMergeOffer } from '@pascal-app/core/building'
 import { useViewer } from '@pascal-app/viewer'
 import { Building2, Copy, Group, Merge, Split, Trash2, Ungroup } from 'lucide-react'
 import { useMemo } from 'react'
 import { deleteSelection, duplicateSelectionAndPickUp } from '../../editor/group-actions'
-import { formatLinearMeasurement } from '../../../lib/measurements'
+import { formatLinearMeasurement } from '@pascal-app/core'
 import { triggerSFX } from '../../../lib/sfx-bus'
 import { writeWindowChanges } from '../../../lib/window-changes'
 import { collectSelectableCandidateIds } from '../../tools/select/select-candidates'
@@ -57,36 +58,71 @@ function mergeRefusalNote(
   refusal: { code: string; details: Record<string, unknown> },
   nodes: Record<string, AnyNode>,
   length: (meters: number) => string,
+  i18n: PascalI18n,
 ): string {
   const { blockingId, limit } = refusal.details as { blockingId?: string; limit?: number }
   const reach = length(limit ?? 0)
   const blocking = nodes[blockingId ?? '']
-  const blockingKind = !blocking
-    ? 'something'
-    : blocking.type === 'item'
-      ? 'an item'
-      : `a ${blocking.type}`
+  // A wall's children: the openings and wall-hosted items the merge can run into.
+  const kind = blocking?.type ?? 'unknown'
   switch (refusal.code) {
     case 'window_already_joined':
-      return 'One of them already wraps another corner. Unwrap it first.'
+      return i18n._({
+        id: 'editor.panels.mergeRefusal.alreadyJoined',
+        message: 'One of them already wraps another corner. Unwrap it first.',
+      })
     case 'window_not_on_wall':
-      return 'A roof or dormer window cannot join another window.'
+      return i18n._({
+        id: 'editor.panels.mergeRefusal.notOnWall',
+        message: 'A roof or dormer window cannot join another window.',
+      })
     case 'windows_not_adjacent':
-      return `They are too far apart. Windows merge with at most ${reach} between them.`
+      return i18n._({
+        id: 'editor.panels.mergeRefusal.notAdjacent',
+        message: 'They are too far apart. Windows merge with at most {reach} between them.',
+        values: { reach },
+      })
     case 'opening_between':
-      return `There is ${blockingKind} between them.`
+      return i18n._({
+        id: 'editor.panels.mergeRefusal.between',
+        message:
+          '{kind, select, item {There is an item between them.} door {There is a door between them.} window {There is a window between them.} shelf {There is a shelf between them.} other {There is something between them.}}',
+        values: { kind },
+      })
     case 'walls_not_meeting':
-      return 'Their walls do not meet at a corner.'
+      return i18n._({
+        id: 'editor.panels.mergeRefusal.wallsNotMeeting',
+        message: 'Their walls do not meet at a corner.',
+      })
     case 'corner_angle':
-      return 'Their walls meet at too sharp or too flat an angle for a corner window.'
+      return i18n._({
+        id: 'editor.panels.mergeRefusal.cornerAngle',
+        message: 'Their walls meet at too sharp or too flat an angle for a corner window.',
+      })
     case 'window_not_at_corner':
-      return `One of them is too far from the corner. A window joins one within ${reach} of it.`
+      return i18n._({
+        id: 'editor.panels.mergeRefusal.notAtCorner',
+        message: 'One of them is too far from the corner. A window joins one within {reach} of it.',
+        values: { reach },
+      })
     case 'height_exceeds_wall':
-      return 'The window selected first is taller than the other wall. Select the other one first.'
+      return i18n._({
+        id: 'editor.panels.mergeRefusal.heightExceedsWall',
+        message:
+          'The window selected first is taller than the other wall. Select the other one first.',
+      })
     case 'opening_overlap':
-      return `Sliding them to the corner would overlap ${blockingKind}.`
+      return i18n._({
+        id: 'editor.panels.mergeRefusal.overlap',
+        message:
+          '{kind, select, item {Sliding them to the corner would overlap an item.} door {Sliding them to the corner would overlap a door.} window {Sliding them to the corner would overlap a window.} shelf {Sliding them to the corner would overlap a shelf.} other {Sliding them to the corner would overlap something.}}',
+        values: { kind },
+      })
     default:
-      return 'These windows cannot be merged.'
+      return i18n._({
+        id: 'editor.panels.mergeRefusal.cannotMerge',
+        message: 'These windows cannot be merged.',
+      })
   }
 }
 
@@ -97,6 +133,7 @@ function mergeRefusalNote(
  * Unwrap instead; two that cannot join, the reason.
  */
 function MergeWindowsAction() {
+  const i18n = usePascalI18n()
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const nodes = useScene((s) => s.nodes)
   const readOnly = useScene((s) => s.readOnly)
@@ -110,7 +147,7 @@ function MergeWindowsAction() {
         className="basis-full whitespace-nowrap disabled:cursor-not-allowed disabled:opacity-40"
         disabled={readOnly}
         icon={<Split className="h-4 w-4" />}
-        label="Unwrap the corner"
+        label={i18n._({ id: 'editor.panels.multiSelectionPanel.unwrapTheCorner', message: 'Unwrap the corner' })}
         onClick={() => {
           writeWindowChanges({
             create: null,
@@ -119,13 +156,16 @@ function MergeWindowsAction() {
           })
           triggerSFX('sfx:structure-build')
         }}
-        title="Unwrap the corner: both windows stay, each framed at the corner"
+        title={i18n._({ id: 'editor.panels.multiSelectionPanel.unwrapTheCornerBothWindowsStay', message: 'Unwrap the corner: both windows stay, each framed at the corner' })}
       />
     )
   const { merge } = offer
   const note = offer.refusal
-    ? mergeRefusalNote(offer.refusal, nodes, (meters) =>
-        formatLinearMeasurement(meters, unit, metricNotation),
+    ? mergeRefusalNote(
+        offer.refusal,
+        nodes,
+        (meters) => formatLinearMeasurement(meters, unit, metricNotation),
+        i18n,
       )
     : null
   return (
@@ -134,7 +174,7 @@ function MergeWindowsAction() {
         className="basis-full whitespace-nowrap disabled:cursor-not-allowed disabled:opacity-40"
         disabled={readOnly || !merge}
         icon={<Merge className="h-4 w-4" />}
-        label="Merge windows"
+        label={i18n._({ id: 'editor.panels.multiSelectionPanel.mergeWindows', message: 'Merge windows' })}
         onClick={() => {
           if (!merge) return
           runAsSingleSceneHistoryStep(useScene, () =>
@@ -150,8 +190,8 @@ function MergeWindowsAction() {
         title={
           note ??
           (merge?.kind === 'corner'
-            ? 'Merge windows into a corner window: both take the height, sill and type of the one you selected first'
-            : 'Merge windows into one across both: it keeps the type and style of the one you selected first')
+            ? i18n._({ id: 'editor.panels.multiSelectionPanel.mergeWindowsIntoACornerWindow', message: 'Merge windows into a corner window: both take the height, sill and type of the one you selected first' })
+            : i18n._({ id: 'editor.panels.multiSelectionPanel.mergeWindowsIntoOneAcrossBoth', message: 'Merge windows into one across both: it keeps the type and style of the one you selected first' }))
         }
       />
       {note ? <p className="basis-full px-1 text-muted-foreground text-xs">{note}</p> : null}
@@ -160,6 +200,7 @@ function MergeWindowsAction() {
 }
 
 export function MultiSelectionActions() {
+  const i18n = usePascalI18n()
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const sessionGroups = useSessionGroups((s) => s.groups)
   const sceneNodes = useScene((s) => s.nodes)
@@ -182,39 +223,39 @@ export function MultiSelectionActions() {
         <ActionButton
           className="basis-full whitespace-nowrap"
           icon={<Building2 className="h-4 w-4" />}
-          label="Select building"
+          label={i18n._({ id: 'editor.panels.multiSelectionPanel.selectBuilding', message: 'Select building' })}
           onClick={() => selectBuilding(buildingId)}
-          title="Select the whole building to move all its levels"
+          title={i18n._({ id: 'editor.panels.multiSelectionPanel.selectTheWholeBuildingToMove', message: 'Select the whole building to move all its levels' })}
         />
       )}
       {showGroup && (
         <ActionButton
           className="min-w-20 px-2"
           icon={<Group className="h-4 w-4" />}
-          label="Group"
+          label={i18n._({ id: 'editor.panels.multiSelectionPanel.group', message: 'Group' })}
           onClick={() => groupCurrentSelection()}
-          title="Group (Ctrl/Cmd+G)"
+          title={i18n._({ id: 'editor.panels.multiSelectionPanel.groupCtrlCmdG', message: 'Group (Ctrl/Cmd+G)' })}
         />
       )}
       {showUngroup && (
         <ActionButton
           className="min-w-20 px-2"
           icon={<Ungroup className="h-4 w-4" />}
-          label="Ungroup"
+          label={i18n._({ id: 'editor.panels.multiSelectionPanel.ungroup', message: 'Ungroup' })}
           onClick={() => ungroupCurrentSelection()}
-          title="Ungroup (Ctrl/Cmd+Shift+G)"
+          title={i18n._({ id: 'editor.panels.multiSelectionPanel.ungroupCtrlCmdShiftG', message: 'Ungroup (Ctrl/Cmd+Shift+G)' })}
         />
       )}
       <ActionButton
         className="min-w-20 px-2"
         icon={<Copy className="h-4 w-4" />}
-        label="Duplicate"
+        label={i18n._({ id: 'editor.panels.multiSelectionPanel.duplicate', message: 'Duplicate' })}
         onClick={() => duplicateSelectionAndPickUp()}
       />
       <ActionButton
         className="min-w-20 px-2 border-red-500/40 text-red-700 dark:text-red-200 hover:bg-red-500/15"
         icon={<Trash2 className="h-4 w-4 text-red-600 dark:text-red-400" />}
-        label="Delete"
+        label={i18n._({ id: 'editor.panels.multiSelectionPanel.delete', message: 'Delete' })}
         onClick={() => deleteSelection()}
       />
     </ActionGroup>
@@ -225,6 +266,7 @@ export function MultiSelectionActions() {
  * Docked multi-selection panel. Includes Group / Ungroup for session selection sets.
  */
 export function MultiSelectionPanel({ footer }: { footer?: React.ReactNode }) {
+  const i18n = usePascalI18n()
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const setSelection = useViewer((s) => s.setSelection)
   const sessionGroups = useSessionGroups((s) => s.groups)
@@ -246,16 +288,14 @@ export function MultiSelectionPanel({ footer }: { footer?: React.ReactNode }) {
       title={
         matchedGroup
           ? `${matchedGroup.label} · ${selectedIds.length}`
-          : `${selectedIds.length} selected`
+          : i18n._({ id: 'editor.panels.multiSelectionPanel.lengthSelected', message: '{length} selected', values: { length: selectedIds.length } })
       }
       width={320}
     >
       {breakdown && <div className="px-3 py-3 text-muted-foreground text-xs">{breakdown}</div>}
       {matchedGroup && (
         <div className="border-border/50 border-t px-3 py-2 text-muted-foreground text-xs">
-          {matchedGroup.label} (session only). Plain click reselects all members. Not saved with the
-          project.
-        </div>
+          {i18n._({ id: 'editor.panels.multiSelectionPanel.labelSessionOnlyPlainClickReselects', message: '{label} (session only). Plain click reselects all members. Not saved with the project.', values: { label: matchedGroup.label } })}</div>
       )}
       <div className="border-border/50 border-t p-3">
         <MultiSelectionActions />

package/src/components/ui/panels/node-display.ts

@@ -1,36 +1,42 @@
-import { type AnyNode, scriptImages } from '@pascal-app/core'
+import { type AnyNode, type MessageDescriptor, type PascalI18n, scriptImages } from '@pascal-app/core'
+import { displayRoomName } from '../../../lib/room-name-messages'
 
 export type NodeDisplay = {
   icon: string
   label: string
 }
 
-const TYPE_DEFAULTS: Record<string, NodeDisplay> = {
-  item: { icon: '/icons/item.webp', label: 'Item' },
-  wall: { icon: '/icons/wall.webp', label: 'Wall' },
-  door: { icon: '/icons/door.webp', label: 'Door' },
-  window: { icon: '/icons/window.webp', label: 'Window' },
-  slab: { icon: '/icons/floor.webp', label: 'Slab' },
-  ceiling: { icon: '/icons/ceiling.webp', label: 'Ceiling' },
-  column: { icon: '/icons/column.webp', label: 'Column' },
-  elevator: { icon: '/icons/elevator.webp', label: 'Elevator' },
-  fence: { icon: '/icons/fence.webp', label: 'Fence' },
-  roof: { icon: '/icons/roof.webp', label: 'Roof' },
-  'roof-segment': { icon: '/icons/roof.webp', label: 'Roof segment' },
-  stair: { icon: '/icons/stairs.webp', label: 'Stair' },
-  'stair-segment': { icon: '/icons/stairs.webp', label: 'Stair segment' },
-  scan: { icon: '/icons/mesh.webp', label: '3D Scan' },
-  guide: { icon: '/icons/floorplan.webp', label: 'Guide image' },
-  zone: { icon: '/icons/zone.webp', label: 'Zone' },
+const TYPE_DEFAULTS: Record<string, { icon: string; label: MessageDescriptor }> = {
+  item: { icon: '/icons/item.webp', label: /* i18n */ { id: 'editor.nodeDisplay.item', message: 'Item' } },
+  wall: { icon: '/icons/wall.webp', label: /* i18n */ { id: 'editor.nodeDisplay.wall', message: 'Wall' } },
+  door: { icon: '/icons/door.webp', label: /* i18n */ { id: 'editor.nodeDisplay.door', message: 'Door' } },
+  window: { icon: '/icons/window.webp', label: /* i18n */ { id: 'editor.nodeDisplay.window', message: 'Window' } },
+  slab: { icon: '/icons/floor.webp', label: /* i18n */ { id: 'editor.nodeDisplay.slab', message: 'Slab' } },
+  ceiling: { icon: '/icons/ceiling.webp', label: /* i18n */ { id: 'editor.nodeDisplay.ceiling', message: 'Ceiling' } },
+  column: { icon: '/icons/column.webp', label: /* i18n */ { id: 'editor.nodeDisplay.column', message: 'Column' } },
+  elevator: { icon: '/icons/elevator.webp', label: /* i18n */ { id: 'editor.nodeDisplay.elevator', message: 'Elevator' } },
+  fence: { icon: '/icons/fence.webp', label: /* i18n */ { id: 'editor.nodeDisplay.fence', message: 'Fence' } },
+  roof: { icon: '/icons/roof.webp', label: /* i18n */ { id: 'editor.nodeDisplay.roof', message: 'Roof' } },
+  'roof-segment': { icon: '/icons/roof.webp', label: /* i18n */ { id: 'editor.nodeDisplay.roofSegment', message: 'Roof segment' } },
+  stair: { icon: '/icons/stairs.webp', label: /* i18n */ { id: 'editor.nodeDisplay.stair', message: 'Stair' } },
+  'stair-segment': { icon: '/icons/stairs.webp', label: /* i18n */ { id: 'editor.nodeDisplay.stairSegment', message: 'Stair segment' } },
+  scan: { icon: '/icons/mesh.webp', label: /* i18n */ { id: 'editor.nodeDisplay.scan', message: '3D Scan' } },
+  guide: { icon: '/icons/floorplan.webp', label: /* i18n */ { id: 'editor.nodeDisplay.guide', message: 'Guide image' } },
+  zone: { icon: '/icons/zone.webp', label: /* i18n */ { id: 'editor.nodeDisplay.zone', message: 'Zone' } },
 }
 
-export function getTypeDisplay(type: string): NodeDisplay {
-  return TYPE_DEFAULTS[type] ?? { icon: '/icons/select.webp', label: type }
+export function getTypeDisplay(type: string, i18n: PascalI18n): NodeDisplay {
+  const known = TYPE_DEFAULTS[type]
+  return known ? { icon: known.icon, label: i18n._(known.label) } : { icon: '/icons/select.webp', label: type }
 }
 
-export function getNodeDisplay(node: AnyNode | null | undefined): NodeDisplay {
-  if (!node) return { icon: '/icons/select.webp', label: 'Selection' }
-  const fallback = TYPE_DEFAULTS[node.type] ?? { icon: '/icons/select.webp', label: node.type }
+export function getNodeDisplay(node: AnyNode | null | undefined, i18n: PascalI18n): NodeDisplay {
+  if (!node)
+    return {
+      icon: '/icons/select.webp',
+      label: i18n._({ id: 'editor.nodeDisplay.selection', message: 'Selection' }),
+    }
+  const fallback = getTypeDisplay(node.type, i18n)
   const scripted = scriptImages(node)?.thumbnail
   // Item nodes carry an asset with its own thumbnail/name
   if (node.type === 'item') {
@@ -40,7 +46,12 @@ export function getNodeDisplay(node: AnyNode | null | undefined): NodeDisplay {
     }
   }
   if (node.type === 'zone' && node.spaceRole === 'room') {
-    return { icon: '/icons/kitchen.webp', label: node.name || 'Room' }
+    return {
+      icon: '/icons/kitchen.webp',
+      label:
+        (node.name && displayRoomName(node.name, i18n)) ||
+        i18n._({ id: 'editor.nodeDisplay.room', message: 'Room' }),
+    }
   }
   return {
     icon: scripted ?? fallback.icon,

package/src/components/ui/panels/panel-manager.tsx

@@ -11,6 +11,8 @@ import {
   type DormerNode,
   type ElevatorNode,
   type FenceNode,
+  isMoveLocked,
+  isNodeDuplicable,
   type ItemNode,
   type RoofNode,
   type RoofSegmentNode,
@@ -19,7 +21,7 @@ import {
   type StairSegmentNode,
   useScene,
   type WallNode,
-  type WindowNode,
+  type WindowNode, usePascalI18n,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -107,6 +109,7 @@ function MobilePanelLayer({
   panel: React.ReactNode
   isReference: boolean
 }) {
+  const i18n = usePascalI18n()
   const setSelection = useViewer((s) => s.setSelection)
   const setSelectedReferenceId = useEditor((s) => s.setSelectedReferenceId)
   const setMovingNode = useEditor((s) => s.setMovingNode)
@@ -146,7 +149,7 @@ function MobilePanelLayer({
 
   if (!(node || isReference)) return null
 
-  const display = getNodeDisplay(node)
+  const display = getNodeDisplay(node, i18n)
 
   return (
     <>
@@ -154,9 +157,9 @@ function MobilePanelLayer({
         <MobileSelectionBar
           node={node}
           onDelete={handleDelete}
-          onDuplicate={handleDuplicate}
+          onDuplicate={isNodeDuplicable(node) ? handleDuplicate : undefined}
           onEdit={() => setIsSheetOpen((v) => !v)}
-          onMove={handleMove}
+          onMove={isMoveLocked(node) ? undefined : handleMove}
         />
       )}
       <MobilePanelSheet
@@ -180,8 +183,9 @@ function MobileMultiPanelLayer({
   panel: React.ReactNode
   type: string | null
 }) {
+  const i18n = usePascalI18n()
   const [isSheetOpen, setIsSheetOpen] = useState(false)
-  const display = type ? getTypeDisplay(type) : { icon: '/icons/select.webp', label: 'Selection' }
+  const display = type ? getTypeDisplay(type, i18n) : { icon: '/icons/select.webp', label: i18n._({ id: 'editor.panels.panelManager.selection', message: 'Selection' }) }
   const title = breakdown || display.label
 
   useEffect(() => {