@pascal-app/editor 1.0.6 → 1.1.0

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

@@ -1,4 +1,4 @@
-import { type AnyNodeId, useScene, type WallNode } from '@pascal-app/core'
+import { type AnyNodeId, useScene, usePascalI18n, type WallNode } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useEffect, useRef, useState } from 'react'
@@ -6,6 +6,7 @@ import { useShallow } from 'zustand/react/shallow'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
+import { nodeLabelDescriptor } from '../../../../../i18n/node-messages'
 
 interface WallTreeNodeProps {
   nodeId: AnyNodeId
@@ -18,6 +19,7 @@ export const WallTreeNode = memo(function WallTreeNode({
   depth,
   isLast,
 }: WallTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [expanded, setExpanded] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId as AnyNodeId]?.visible !== false)
@@ -83,7 +85,7 @@ export const WallTreeNode = memo(function WallTreeNode({
       isVisible={isVisible}
       label={
         <InlineRenameInput
-          defaultName="Wall"
+          defaultName={i18n._(nodeLabelDescriptor('wall', 'Wall'))}
           isEditing={isEditing}
           nodeId={nodeId as AnyNodeId}
           onStartEditing={handleStartEditing}

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { type AnyNodeId, type WindowNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type WindowNode, useScene, usePascalI18n } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
@@ -8,6 +8,7 @@ import { resolveNodeSnapTarget, SnapTargetIcon } from '../../../snap-target-badg
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
+import { nodeLabelDescriptor } from '../../../../../i18n/node-messages'
 
 interface WindowTreeNodeProps {
   nodeId: AnyNodeId
@@ -20,6 +21,7 @@ export const WindowTreeNode = memo(function WindowTreeNode({
   depth,
   isLast,
 }: WindowTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId as AnyNodeId]?.visible !== false)
   const node = useScene((s) => s.nodes[nodeId] as WindowNode | undefined)
@@ -62,7 +64,7 @@ export const WindowTreeNode = memo(function WindowTreeNode({
       isVisible={isVisible}
       label={
         <InlineRenameInput
-          defaultName="Window"
+          defaultName={i18n._(nodeLabelDescriptor('window', 'Window'))}
           isEditing={isEditing}
           nodeId={nodeId as AnyNodeId}
           onStartEditing={handleStartEditing}

package/src/components/ui/sidebar/panels/site-panel/zone-membership-checkbox.tsx

@@ -1,3 +1,4 @@
+import { usePascalI18n } from '@pascal-app/core'
 import { Checkbox } from './../../../primitives/checkbox'
 
 /** Membership toggle shown on zone rows while a unit is focused. */
@@ -10,9 +11,10 @@ export function ZoneMembershipCheckbox({
   onToggle: () => void
   unitName: string
 }) {
+  const i18n = usePascalI18n()
   return (
     <Checkbox
-      aria-label={`In ${unitName}`}
+      aria-label={i18n._({ id: 'editor.sidebar.panels.sitePanel.zoneMembershipCheckbox.inUnitname', message: 'In {unitName}', values: { unitName } })}
       checked={checked}
       className="mr-2"
       onCheckedChange={onToggle}

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

@@ -1,18 +1,19 @@
-import { useScene, type ZoneNode } from '@pascal-app/core'
+import { useScene, type ZoneNode, usePascalI18n} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { memo, useCallback, useState } from 'react'
 import { ColorDot } from './../../../../../components/ui/primitives/color-dot'
-import { formatAreaLabel } from './../../../../../lib/measurements'
+import { formatAreaLabel } from '@pascal-app/core'
 import {
   selectZoneOrRoom,
   useZoneSelected,
-  zoneKindLabel,
 } from './../../../../../lib/room-zone-routing'
 import { toggleZoneMembership } from './../../../../../lib/units'
-import { InlineRenameInput } from './inline-rename-input'
+import { RoomRenameInput } from './inline-rename-input'
 import { focusTreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
 import { ZoneMembershipCheckbox } from './zone-membership-checkbox'
+import { zoneDefaultName } from './default-names'
+import { nodeLabelDescriptor } from '../../../../../i18n/node-messages'
 
 interface ZoneTreeNodeProps {
   nodeId: ZoneNode['id']
@@ -25,13 +26,14 @@ export const ZoneTreeNode = memo(function ZoneTreeNode({
   depth,
   isLast,
 }: ZoneTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const updateNode = useScene((state) => state.updateNode)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
   const color = useScene((s) => (s.nodes[nodeId] as ZoneNode | undefined)?.color)
   const polygon = useScene((s) => (s.nodes[nodeId] as ZoneNode | undefined)?.polygon ?? [])
   const isSelected = useZoneSelected(nodeId)
-  const kind = useScene((s) => zoneKindLabel(s.nodes[nodeId] as ZoneNode | undefined))
+  const spaceRole = useScene((s) => (s.nodes[nodeId] as ZoneNode | undefined)?.spaceRole)
   const isHovered = useViewer((state) => state.hoveredId === nodeId)
   const setHoveredId = useViewer((state) => state.setHoveredId)
   const unit = useViewer((state) => state.unit)
@@ -48,7 +50,7 @@ export const ZoneTreeNode = memo(function ZoneTreeNode({
   const handleStartEditing = useCallback(() => setIsEditing(true), [])
   const handleStopEditing = useCallback(() => setIsEditing(false), [])
 
-  const defaultName = `${kind} (${formatAreaLabel(calculatePolygonArea(polygon), unit)})`
+  const defaultName = zoneDefaultName(i18n, { spaceRole }, formatAreaLabel(calculatePolygonArea(polygon), unit))
 
   return (
     <TreeNodeWrapper
@@ -57,7 +59,15 @@ export const ZoneTreeNode = memo(function ZoneTreeNode({
       expanded={false}
       hasChildren={false}
       icon={
-        <ColorDot color={color ?? '#3b82f6'} onChange={(c) => updateNode(nodeId, { color: c })} />
+        <ColorDot
+          color={color ?? '#3b82f6'}
+          label={i18n._({
+            id: 'editor.layers.spaceColour',
+            message: '{role, select, room {Room colour} other {Zone colour}}',
+            values: { role: spaceRole ?? 'generic' },
+          })}
+          onChange={(c) => updateNode(nodeId, { color: c })}
+        />
       }
       isHovered={isHovered}
       isLast={isLast}
@@ -70,10 +80,10 @@ export const ZoneTreeNode = memo(function ZoneTreeNode({
             <ZoneMembershipCheckbox
               checked={focusedUnit.members.includes(nodeId)}
               onToggle={() => toggleZoneMembership(focusedUnit.id, nodeId)}
-              unitName={focusedUnit.name || 'Unit'}
+              unitName={focusedUnit.name || i18n._(nodeLabelDescriptor('unit', 'Unit'))}
             />
           )}
-          <InlineRenameInput
+          <RoomRenameInput
             defaultName={defaultName}
             isEditing={isEditing}
             nodeId={nodeId}

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

@@ -2,7 +2,7 @@ import {
   type AnyNodeId,
   emitter,
   useScene,
-  type ZoneNode,
+  type ZoneNode, usePascalI18n,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Camera, Hexagon, Save, Trash2 } from 'lucide-react'
@@ -19,8 +19,10 @@ import { cn } from './../../../../../lib/utils'
 import useEditor from './../../../../../store/use-editor'
 import { ActionButton } from '../../../controls/action-button'
 import { PanelSection } from '../../../controls/panel-section'
+import { displayRoomName } from '../../../../../lib/room-name-messages'
 
 function ZoneItem({ zone }: { zone: ZoneNode }) {
+  const i18n = usePascalI18n()
   const [cameraPopoverOpen, setCameraPopoverOpen] = useState(false)
   const deleteNode = useScene((state) => state.deleteNode)
   const updateNode = useScene((state) => state.updateNode)
@@ -57,17 +59,25 @@ function ZoneItem({ zone }: { zone: ZoneNode }) {
       onClick={handleClick}
     >
       <span className="mr-2">
-        <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>
       <Hexagon className="mr-1.5 h-3.5 w-3.5 shrink-0" />
-      <span className="flex-1 truncate">{zone.name}</span>
+      <span className="flex-1 truncate">{displayRoomName(zone.name ?? '', i18n)}</span>
       {/* Camera snapshot button */}
       <Popover onOpenChange={setCameraPopoverOpen} open={cameraPopoverOpen}>
         <PopoverTrigger asChild>
           <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.zonePanel.cameraSnapshot', message: 'Camera snapshot' })}
           >
             <Camera className="h-3 w-3" />
             {zone.camera && (
@@ -92,7 +102,7 @@ function ZoneItem({ zone }: { zone: ZoneNode }) {
                 }}
               >
                 <Camera className="h-3.5 w-3.5" />
-                View snapshot
+                {i18n._({ id: 'editor.sidebar.panels.zonePanel.viewSnapshot', message: 'View snapshot' })}
               </button>
             )}
             <button
@@ -104,7 +114,7 @@ function ZoneItem({ zone }: { zone: ZoneNode }) {
               }}
             >
               <Camera className="h-3.5 w-3.5" />
-              {zone.camera ? 'Update snapshot' : 'Take snapshot'}
+              {zone.camera ? i18n._({ id: 'editor.sidebar.panels.zonePanel.updateSnapshot', message: 'Update snapshot' }) : i18n._({ id: 'editor.sidebar.panels.zonePanel.takeSnapshot', message: 'Take snapshot' })}
             </button>
             {zone.camera && (
               <button
@@ -116,7 +126,7 @@ function ZoneItem({ zone }: { zone: ZoneNode }) {
                 }}
               >
                 <Trash2 className="h-3.5 w-3.5" />
-                Clear snapshot
+                {i18n._({ id: 'editor.sidebar.panels.zonePanel.clearSnapshot', message: 'Clear snapshot' })}
               </button>
             )}
           </div>
@@ -133,6 +143,7 @@ function ZoneItem({ zone }: { zone: ZoneNode }) {
 }
 
 export function ZonePanel() {
+  const i18n = usePascalI18n()
   const nodes = useScene((state) => state.nodes)
   const currentLevelId = useViewer((state) => state.selection.levelId)
   const selectedZoneId = useViewer((state) => state.selection.zoneId)
@@ -167,7 +178,7 @@ export function ZonePanel() {
   if (!currentLevelId) {
     return (
       <div className="px-3 py-4 text-muted-foreground text-sm">
-        Select a level to view and create zones
+        {i18n._({ id: 'editor.sidebar.panels.zonePanel.selectALevelToViewAnd', message: 'Select a level to view and create zones' })}
       </div>
     )
   }
@@ -176,34 +187,34 @@ export function ZonePanel() {
     <div className="py-1">
       {levelZones.length === 0 ? (
         <div className="px-3 py-4 text-muted-foreground text-sm">
-          No zones on this level.{' '}
+          {i18n._({ id: 'editor.sidebar.panels.zonePanel.noZonesOnThisLevel', message: 'No zones on this level.' })}{' '}
           <button className="cursor-pointer text-primary hover:underline" onClick={handleAddZone}>
-            Add one
+            {i18n._({ id: 'editor.sidebar.panels.zonePanel.addOne', message: 'Add one' })}
           </button>
         </div>
       ) : (
         levelZones.map((zone) => <ZoneItem key={zone.id} zone={zone} />)
       )}
       {selectedZone ? (
-        <PanelSection className="mt-2 border-t" title="Actions">
+        <PanelSection className="mt-2 border-t" title={i18n._({ id: 'editor.sidebar.panels.zonePanel.actions', message: 'Actions' })}>
           <ActionButton
             className="w-full flex-none"
             icon={<Save className="h-4 w-4" />}
-            label="Save to catalog"
+            label={i18n._({ id: 'editor.sidebar.panels.zonePanel.saveToCatalog', message: 'Save to catalog' })}
             onClick={() => emitter.emit('room-preset:create', { zoneId: selectedZone.id })}
             type="button"
           />
           <ActionButton
             className="w-full flex-none"
             icon={<Trash2 className="h-4 w-4 text-red-600 dark:text-red-400" />}
-            label="Delete"
+            label={i18n._({ id: 'editor.sidebar.panels.zonePanel.delete', message: 'Delete' })}
             onClick={() => deleteSelectedZone(false)}
             type="button"
           />
           <ActionButton
             className="w-full flex-none"
             icon={<Trash2 className="h-4 w-4 text-red-600 dark:text-red-400" />}
-            label="Delete with contents"
+            label={i18n._({ id: 'editor.sidebar.panels.zonePanel.deleteWithContents', message: 'Delete with contents' })}
             onClick={() => deleteSelectedZone(true)}
             type="button"
           />

package/src/components/ui/sidebar/tab-bar.tsx

@@ -121,7 +121,10 @@ export function IconRail({ tabs, activeTab, collapsed, onIconClick }: IconRailPr
 
   return (
     <TooltipProvider delayDuration={0} disableHoverableContent>
-      <div className="flex h-full w-14 shrink-0 flex-col items-center gap-1 border-border/50 border-r py-2">
+      <div
+        className="flex h-full w-14 shrink-0 flex-col items-center gap-1 border-border/50 border-r py-2"
+        data-surface="icon-rail"
+      >
         {defaultTabs.map(renderTab)}
         {pluginTabs.length > 0 && (
           <div className="mt-1 flex w-11 flex-col items-center gap-1 border-border/70 border-t pt-2">

package/src/components/ui/sidebar/use-plugin-panels.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { Icon } from '@iconify/react'
-import { type IconRef, useScene } from '@pascal-app/core'
+import { type IconRef, useScene, usePascalI18n } from '@pascal-app/core'
 import { Plus } from 'lucide-react'
 import {
   type ComponentType,
@@ -28,9 +28,8 @@ import type { ExtraPanel } from './icon-rail'
 // The rail's "+" puts the plugin directory on the stage, as a view in the
 // focused pane, and stays lit while it is there instead of leaving an
 // unrelated panel open beside it. `component` serves the v1 sidebar.
-const pluginsManagerPanel: ExtraPanel = {
+const pluginsManagerPanel: Omit<ExtraPanel, 'label'> = {
   id: 'plugins',
-  label: 'Plugins',
   icon: <img alt="" className="size-8 object-contain" src="/icons/plugins.webp" />,
   component: PluginsView,
   noPanel: true,
@@ -63,12 +62,12 @@ function renderIconRef(ref: IconRef): ReactNode {
 }
 
 function PluginPanelCrashed({ label }: { label: string }) {
+  const i18n = usePascalI18n()
   return (
     <div className="flex flex-col gap-2 p-4 text-sm">
-      <p className="font-medium text-sidebar-foreground">"{label}" plugin crashed</p>
+      <p className="font-medium text-sidebar-foreground">{i18n._({ id: 'editor.sidebar.usePluginPanels.labelPluginCrashed', message: '"{label}" plugin crashed', values: { label } })}</p>
       <p className="text-sidebar-foreground/50 text-xs">
-        This panel hit an error and was unloaded for this session. The rest of the editor is
-        unaffected — reload to try again.
+        {i18n._({ id: 'editor.sidebar.usePluginPanels.thisPanelHitAnErrorAnd', message: 'This panel hit an error and was unloaded for this session. The rest of the editor is unaffected — reload to try again.' })}
       </p>
     </div>
   )
@@ -83,13 +82,16 @@ function resolvePanelComponent(panel: EditorHostPanel): ComponentType {
   const cached = wrappedPanelCache.get(panel.component)
   if (cached) return cached
   const Lazy = lazy(panel.component)
-  const Wrapped: ComponentType = () => (
+  const Wrapped: ComponentType = () => {
+  const i18n = usePascalI18n()
+  return ((
     <ErrorBoundary fallback={<PluginPanelCrashed label={panel.label} />}>
-      <Suspense fallback={<div className="p-4 text-sidebar-foreground/50 text-sm">Loading…</div>}>
+      <Suspense fallback={<div className="p-4 text-sidebar-foreground/50 text-sm">{i18n._({ id: 'editor.sidebar.usePluginPanels.loading', message: 'Loading…' })}</div>}>
         <Lazy />
       </Suspense>
     </ErrorBoundary>
-  )
+  ))
+}
   Wrapped.displayName = `PluginPanel(${panel.id})`
   wrappedPanelCache.set(panel.component, Wrapped)
   return Wrapped
@@ -107,6 +109,7 @@ function resolvePanelComponent(panel: EditorHostPanel): ComponentType {
  * authoring panel like Nature doesn't ride into the studio rail.
  */
 export function useHostPanels(hostPanels?: ExtraPanel[]): ExtraPanel[] {
+  const i18n = usePascalI18n()
   const registered = useSyncExternalStore(
     editorHostPanelRegistry.subscribe,
     editorHostPanelRegistry.getSnapshot,
@@ -151,7 +154,13 @@ export function useHostPanels(hostPanels?: ExtraPanel[]): ExtraPanel[] {
       readOnly,
       workspaceMode,
     })
-      ? [{ ...pluginsManagerPanel, stageActive: pluginsViewShown }]
+      ? [
+          {
+            ...pluginsManagerPanel,
+            label: i18n._({ id: 'editor.sidebar.usePluginPanels.plugins', message: 'Plugins' }),
+            stageActive: pluginsViewShown,
+          },
+        ]
       : []
   return [...(hostPanels ?? []), ...fromRegistry, ...manager]
 }

package/src/components/ui/snap-target-badge.tsx

@@ -1,4 +1,4 @@
-import type { AnyNode, AssetInput } from '@pascal-app/core'
+import { type AnyNode, type AssetInput, type MessageDescriptor, usePascalI18n } from '@pascal-app/core'
 import { isProceduralItem } from '@pascal-app/core/procedural-items'
 import type { ReactNode } from 'react'
 import { cn } from '../../lib/utils'
@@ -12,10 +12,10 @@ const SNAP_TARGET_ICONS: Record<SnapTarget, string> = {
   roof: '/icons/roof.webp',
 }
 
-const SNAP_TARGET_LABELS: Record<SnapTarget, string> = {
-  wall: 'Wall attachment',
-  ceiling: 'Ceiling attachment',
-  roof: 'Roof attachment',
+const SNAP_TARGET_LABELS: Record<SnapTarget, MessageDescriptor> = {
+  wall: /* i18n */ { id: 'editor.snapTarget.wall', message: 'Wall attachment' },
+  ceiling: /* i18n */ { id: 'editor.snapTarget.ceiling', message: 'Ceiling attachment' },
+  roof: /* i18n */ { id: 'editor.snapTarget.roof', message: 'Roof attachment' },
 }
 
 const SNAP_TARGET_BADGE_SIZE_CLASSES: Record<SnapTargetBadgeSize, string> = {
@@ -53,6 +53,7 @@ export function SnapTargetBadge({
   size?: SnapTargetBadgeSize
   target: SnapTarget
 }) {
+  const i18n = usePascalI18n()
   return (
     <span
       className={cn(
@@ -62,7 +63,7 @@ export function SnapTargetBadge({
       )}
     >
       <img
-        alt={SNAP_TARGET_LABELS[target]}
+        alt={i18n._(SNAP_TARGET_LABELS[target])}
         className={cn('object-contain', SNAP_TARGET_ICON_SIZE_CLASSES[size])}
         src={SNAP_TARGET_ICONS[target]}
       />