@pascal-app/editor 1.0.6 → 1.0.7

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

@@ -1,4 +1,4 @@
-import { type BuildingNode, useScene } from '@pascal-app/core'
+import { type BuildingNode, useScene, usePascalI18n } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Building2, Plus } from 'lucide-react'
 import { memo, useState } from 'react'
@@ -23,6 +23,7 @@ export const BuildingTreeNode = memo(function BuildingTreeNode({
   depth,
   isLast,
 }: BuildingTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [expanded, setExpanded] = useState(true)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
   const name = useScene((s) => s.nodes[nodeId]?.name)
@@ -63,7 +64,7 @@ export const BuildingTreeNode = memo(function BuildingTreeNode({
                 <Plus className="h-3 w-3" />
               </button>
             </TooltipTrigger>
-            <TooltipContent side="right">Add new level</TooltipContent>
+            <TooltipContent side="right">{i18n._({ id: 'editor.sidebar.panels.sitePanel.buildingTreeNode.addNewLevel', message: 'Add new level' })}</TooltipContent>
           </Tooltip>
         </div>
       }
@@ -75,7 +76,7 @@ export const BuildingTreeNode = memo(function BuildingTreeNode({
       isLast={isLast}
       isSelected={isSelected}
       isVisible={isVisible}
-      label={name || 'Building'}
+      label={name || i18n._({ id: 'editor.sidebar.panels.sitePanel.buildingTreeNode.building', message: 'Building' })}
       onClick={handleClick}
       onDoubleClick={() => focusTreeNode(nodeId)}
       onToggle={() => setExpanded(!expanded)}

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

@@ -1,4 +1,4 @@
-import { type AnyNodeId, type CeilingNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type CeilingNode, useScene, usePascalI18n} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useEffect, useState } from 'react'
@@ -8,6 +8,7 @@ import { formatAreaLabel } from './../../../../../lib/measurements'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
+import { ceilingDefaultName } from './default-names'
 
 interface CeilingTreeNodeProps {
   nodeId: AnyNodeId
@@ -20,6 +21,7 @@ export const CeilingTreeNode = memo(function CeilingTreeNode({
   depth,
   isLast,
 }: CeilingTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [expanded, setExpanded] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId as AnyNodeId]?.visible !== false)
@@ -77,7 +79,7 @@ export const CeilingTreeNode = memo(function CeilingTreeNode({
   const handleStartEditing = useCallback(() => setIsEditing(true), [])
   const handleStopEditing = useCallback(() => setIsEditing(false), [])
 
-  const defaultName = `Ceiling (${formatAreaLabel(calculatePolygonArea(polygon), unit)})`
+  const defaultName = ceilingDefaultName(i18n, formatAreaLabel(calculatePolygonArea(polygon), unit))
 
   return (
     <TreeNodeWrapper

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

@@ -1,4 +1,4 @@
-import { type AnyNodeId, type ChimneyNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type ChimneyNode, useScene, usePascalI18n } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
@@ -6,6 +6,7 @@ import { SnapTargetIcon } from '../../../snap-target-badge'
 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 ChimneyTreeNodeProps {
   nodeId: AnyNodeId
@@ -18,6 +19,7 @@ export const ChimneyTreeNode = memo(function ChimneyTreeNode({
   depth,
   isLast,
 }: ChimneyTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
   const node = useScene((s) => s.nodes[nodeId] as ChimneyNode | undefined)
@@ -39,7 +41,7 @@ export const ChimneyTreeNode = memo(function ChimneyTreeNode({
     [nodeId, setSelection],
   )
 
-  const defaultName = node?.name || 'Chimney'
+  const defaultName = node?.name || i18n._(nodeLabelDescriptor('chimney', 'Chimney'))
 
   return (
     <TreeNodeWrapper

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

@@ -6,7 +6,7 @@ import {
   findLevelAncestorId,
   type LevelNode,
   resolveBuildingForLevel,
-  useScene,
+  useScene, usePascalI18n,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Layers, Trash2 } from 'lucide-react'
@@ -44,6 +44,7 @@ function useLiveMembers(collectionId: CollectionId) {
 
 /** Collections, listed under the level tree. Absent when the scene has none. */
 export const CollectionsSection = memo(function CollectionsSection() {
+  const i18n = usePascalI18n()
   const collectionIds = useScene(useShallow((s) => Object.keys(s.collections) as CollectionId[]))
   const [expanded, setExpanded] = useState(true)
 
@@ -58,7 +59,7 @@ export const CollectionsSection = memo(function CollectionsSection() {
         icon={<Layers className="h-3.5 w-3.5" />}
         label={
           <span className="flex items-center gap-1.5">
-            Collections
+            {i18n._({ id: 'editor.sidebar.panels.sitePanel.collectionTreeNode.collections', message: 'Collections' })}
             <span className="text-muted-foreground text-xs">{collectionIds.length}</span>
           </span>
         }
@@ -90,6 +91,7 @@ const CollectionTreeNode = memo(function CollectionTreeNode({
   depth,
   isLast,
 }: CollectionTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const [expanded, setExpanded] = useState(false)
   const name = useScene((s) => s.collections[collectionId]?.name)
@@ -147,7 +149,7 @@ const CollectionTreeNode = memo(function CollectionTreeNode({
             event.stopPropagation()
             deleteCollection(collectionId)
           }}
-          title="Delete collection"
+          title={i18n._({ id: 'editor.sidebar.panels.sitePanel.collectionTreeNode.deleteCollection', message: 'Delete collection' })}
           type="button"
         >
           <Trash2 className="h-3 w-3" />
@@ -159,7 +161,7 @@ const CollectionTreeNode = memo(function CollectionTreeNode({
       icon={
         <ColorDot
           color={color ?? '#6366f1'}
-          label="Collection colour"
+          label={i18n._({ id: 'editor.sidebar.panels.sitePanel.collectionTreeNode.collectionColour', message: 'Collection colour' })}
           onChange={(next) => updateCollection(collectionId, { color: next })}
         />
       }
@@ -169,7 +171,7 @@ const CollectionTreeNode = memo(function CollectionTreeNode({
       label={
         <span className="flex min-w-0 items-center gap-1.5">
           <InlineRenameField
-            defaultName="Collection"
+            defaultName={i18n._({ id: 'editor.layers.defaultName.collection', message: 'Collection' })}
             isEditing={isEditing}
             name={name}
             onRename={handleRename}

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

@@ -1,10 +1,11 @@
-import { type AnyNodeId, type ColumnNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type ColumnNode, useScene, usePascalI18n } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
 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 ColumnTreeNodeProps {
   nodeId: AnyNodeId
@@ -17,6 +18,7 @@ export const ColumnTreeNode = memo(function ColumnTreeNode({
   depth,
   isLast,
 }: ColumnTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
   const node = useScene((s) => s.nodes[nodeId] as ColumnNode | undefined)
@@ -38,7 +40,7 @@ export const ColumnTreeNode = memo(function ColumnTreeNode({
     [nodeId, setSelection],
   )
 
-  const defaultName = node?.name || 'Column'
+  const defaultName = node?.name || i18n._(nodeLabelDescriptor('column', 'Column'))
 
   return (
     <TreeNodeWrapper

package/src/components/ui/sidebar/panels/site-panel/default-names.ts

@@ -0,0 +1,75 @@
+import type { PascalI18n, RoofType, StairSegmentNode, ZoneNode } from '@pascal-app/core'
+
+/** Names a layer row shows (and its drag preview) until the user renames it. */
+
+export function zoneDefaultName(
+  i18n: PascalI18n,
+  zone: { spaceRole?: ZoneNode['spaceRole'] } | undefined,
+  area: string,
+): string {
+  return zone?.spaceRole === 'room'
+    ? i18n._({ id: 'editor.layers.defaultName.room', message: 'Room ({area})', values: { area } })
+    : i18n._({ id: 'editor.layers.defaultName.zone', message: 'Zone ({area})', values: { area } })
+}
+
+export function slabDefaultName(i18n: PascalI18n, area: string): string {
+  return i18n._({ id: 'editor.layers.defaultName.slab', message: 'Slab ({area})', values: { area } })
+}
+
+export function ceilingDefaultName(i18n: PascalI18n, area: string): string {
+  return i18n._({
+    id: 'editor.layers.defaultName.ceiling',
+    message: 'Ceiling ({area})',
+    values: { area },
+  })
+}
+
+export function roofDefaultName(i18n: PascalI18n, count: number): string {
+  return i18n._({
+    id: 'editor.layers.defaultName.roof',
+    message: 'Roof ({count, plural, one {# segment} other {# segments}})',
+    values: { count },
+  })
+}
+
+export function staircaseDefaultName(i18n: PascalI18n, count: number): string {
+  return i18n._({
+    id: 'editor.layers.defaultName.staircase',
+    message: 'Staircase ({count, plural, one {# segment} other {# segments}})',
+    values: { count },
+  })
+}
+
+export function roofSegmentDefaultName(
+  i18n: PascalI18n,
+  roofType: RoofType,
+  width: number,
+  depth: number,
+): string {
+  return i18n._({
+    id: 'editor.layers.defaultName.roofSegment',
+    message:
+      '{roofType, select, hip {Hip} gable {Gable} shed {Shed} gambrel {Gambrel} dutch {Dutch} mansard {Mansard} flat {Flat} conical {Conical} barrel {Barrel} other {Roof}} ({width}×{depth}m)',
+    values: { roofType, width: width.toFixed(1), depth: depth.toFixed(1) },
+  })
+}
+
+export function stairSegmentDefaultName(
+  i18n: PascalI18n,
+  segmentType: StairSegmentNode['segmentType'],
+  width: number,
+  length: number,
+): string {
+  const values = { width: width.toFixed(1), length: length.toFixed(1) }
+  return segmentType === 'stair'
+    ? i18n._({
+        id: 'editor.layers.defaultName.flight',
+        message: 'Flight ({width}×{length}m)',
+        values,
+      })
+    : i18n._({
+        id: 'editor.layers.defaultName.landing',
+        message: 'Landing ({width}×{length}m)',
+        values,
+      })
+}

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { type AnyNodeId, type DoorNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type DoorNode, 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 DoorTreeNodeProps {
   nodeId: AnyNodeId
@@ -20,6 +21,7 @@ export const DoorTreeNode = memo(function DoorTreeNode({
   depth,
   isLast,
 }: DoorTreeNodeProps) {
+  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 DoorNode | undefined)
@@ -62,7 +64,7 @@ export const DoorTreeNode = memo(function DoorTreeNode({
       isVisible={isVisible}
       label={
         <InlineRenameInput
-          defaultName="Door"
+          defaultName={i18n._(nodeLabelDescriptor('door', 'Door'))}
           isEditing={isEditing}
           nodeId={nodeId as AnyNodeId}
           onStartEditing={handleStartEditing}

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

@@ -1,4 +1,4 @@
-import { type AnyNodeId, type DormerNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type DormerNode, useScene, usePascalI18n } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
@@ -7,6 +7,7 @@ import { SnapTargetIcon } from '../../../snap-target-badge'
 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 DormerTreeNodeProps {
   nodeId: AnyNodeId
@@ -25,6 +26,7 @@ export const DormerTreeNode = memo(function DormerTreeNode({
   depth,
   isLast,
 }: DormerTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const [expanded, setExpanded] = useState(true)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
@@ -50,7 +52,7 @@ export const DormerTreeNode = memo(function DormerTreeNode({
     [nodeId, setSelection],
   )
 
-  const defaultName = node?.name || 'Dormer'
+  const defaultName = node?.name || i18n._(nodeLabelDescriptor('dormer', 'Dormer'))
 
   return (
     <TreeNodeWrapper

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

@@ -1,10 +1,11 @@
-import { type AnyNodeId, type ElevatorNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type ElevatorNode, useScene, usePascalI18n } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
 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 ElevatorTreeNodeProps {
   nodeId: AnyNodeId
@@ -17,6 +18,7 @@ export const ElevatorTreeNode = memo(function ElevatorTreeNode({
   depth,
   isLast,
 }: ElevatorTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
   const node = useScene((s) => s.nodes[nodeId] as ElevatorNode | undefined)
@@ -53,7 +55,7 @@ export const ElevatorTreeNode = memo(function ElevatorTreeNode({
       isVisible={isVisible}
       label={
         <InlineRenameInput
-          defaultName={node?.name || 'Elevator'}
+          defaultName={node?.name || i18n._(nodeLabelDescriptor('elevator', 'Elevator'))}
           isEditing={isEditing}
           nodeId={nodeId}
           onStartEditing={() => setIsEditing(true)}

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

@@ -1,10 +1,11 @@
-import { type AnyNodeId, type FenceNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type FenceNode, useScene, usePascalI18n } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useEffect, useState } from 'react'
 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 FenceTreeNodeProps {
   nodeId: AnyNodeId
@@ -17,6 +18,7 @@ export const FenceTreeNode = memo(function FenceTreeNode({
   depth,
   isLast,
 }: FenceTreeNodeProps) {
+  const i18n = usePascalI18n()
   const node = useScene((state) => state.nodes[nodeId]) as FenceNode | undefined
   const [isEditing, setIsEditing] = useState(false)
   const [expanded, setExpanded] = useState(true)
@@ -55,7 +57,7 @@ export const FenceTreeNode = memo(function FenceTreeNode({
       isVisible={node.visible !== false}
       label={
         <InlineRenameInput
-          defaultName="Fence"
+          defaultName={i18n._(nodeLabelDescriptor('fence', 'Fence'))}
           isEditing={isEditing}
           nodeId={node.id}
           onStartEditing={() => setIsEditing(true)}

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

@@ -1,4 +1,4 @@
-import { type AnyNodeId, type GutterNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type GutterNode, useScene, usePascalI18n } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
@@ -6,6 +6,7 @@ import { SnapTargetIcon } from '../../../snap-target-badge'
 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 GutterTreeNodeProps {
   nodeId: AnyNodeId
@@ -18,6 +19,7 @@ export const GutterTreeNode = memo(function GutterTreeNode({
   depth,
   isLast,
 }: GutterTreeNodeProps) {
+  const i18n = usePascalI18n()
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
   const node = useScene((s) => s.nodes[nodeId] as GutterNode | undefined)
@@ -39,7 +41,7 @@ export const GutterTreeNode = memo(function GutterTreeNode({
     [nodeId, setSelection],
   )
 
-  const defaultName = node?.name || 'Gutter'
+  const defaultName = node?.name || i18n._(nodeLabelDescriptor('gutter', 'Gutter'))
 
   return (
     <TreeNodeWrapper