@pascal-app/editor 1.0.6 → 1.1.0

package/src/components/ui/build-panel/build-panel.tsx

@@ -1,13 +1,18 @@
 'use client'
 
+import { type PascalI18n, usePascalI18n } from '@pascal-app/core'
 import { ChevronRight } from 'lucide-react'
 import { type ComponentPropsWithoutRef, type ReactNode, useEffect, useState } from 'react'
 import { cn } from '../../../lib/utils'
 import {
-  WALL_DRAW_IDLE_CAPTION,
+  selectWallKind,
+  useWallKind,
   WALL_DRAW_VARIANTS,
+  WALL_KINDS,
   type WallDrawVariant,
+  type WallKind,
 } from '../../../lib/wall-draw-variant'
+import { SegmentedControl } from '../controls/segmented-control'
 
 /**
  * The Build panel's grouped layout (Rooms / Add to rooms / Outdoor / Advanced),
@@ -70,6 +75,7 @@ export function BuildPanelAdvancedSection({
   description?: string
   hint?: string
 }) {
+  const i18n = usePascalI18n()
   const [open, setOpen] = useState(false)
   useEffect(() => setOpen(readAdvancedOpen()), [])
   useEffect(() => {
@@ -94,7 +100,9 @@ export function BuildPanelAdvancedSection({
             open && 'rotate-90',
           )}
         />
-        <h3 className="font-medium text-foreground text-xs">Advanced</h3>
+        <h3 className="font-medium text-foreground text-xs">
+          {i18n._({ id: 'editor.buildPanel.advanced', message: 'Advanced' })}
+        </h3>
         {hint ? (
           <span className="ml-auto truncate text-[11px] text-muted-foreground">{hint}</span>
         ) : null}
@@ -188,19 +196,32 @@ export function BuildToolTile({
   )
 }
 
+const CAPTION_LEAD_MARKER = '__PASCAL_CAPTION_LEAD__'
+
 /** The line under the Rooms tiles: what the armed shape does, lead in bold. */
-export function BuildPanelCaption({ lead, rest }: { lead?: string; rest: string }) {
+export function BuildPanelCaption({ caption, lead }: { caption: string; lead?: string }) {
+  const markerIndex = caption.indexOf(CAPTION_LEAD_MARKER)
+  const hasMarkedLead = lead && markerIndex >= 0
   return (
     <p className="mt-2 min-h-[2lh] px-0.5 text-[11px] text-muted-foreground leading-relaxed">
-      {lead ? <span className="font-medium text-foreground">{lead} </span> : null}
-      {rest}
+      {hasMarkedLead ? (
+        <>
+          {caption.slice(0, markerIndex)}
+          <span className="font-medium text-foreground">{lead}</span>
+          {caption.slice(markerIndex + CAPTION_LEAD_MARKER.length)}
+        </>
+      ) : (
+        caption
+      )}
     </p>
   )
 }
 
 /**
  * The Rooms group: one large tile per wall drawing variant, and the armed
- * variant's caption. `activeVariant` is null while the wall tool is not armed.
+ * variant's caption. While Walls is armed the caption gives way to its kinds
+ * (Standard, Invisible, Railing) and a line on the one picked.
+ * `activeVariant` is null while the wall tool is not armed.
  */
 export function BuildPanelRoomsSection({
   activeVariant,
@@ -214,29 +235,146 @@ export function BuildPanelRoomsSection({
   /** Extra attributes per tile (e.g. a host's guide-target hook). */
   tileProps?: (variant: WallDrawVariant) => Record<string, string | undefined>
 }) {
+  const i18n = usePascalI18n()
   const active = WALL_DRAW_VARIANTS.find((variant) => variant.id === activeVariant)
+  const activeMessages = active ? roomVariantMessages(active.id, i18n) : null
   return (
-    <BuildPanelSection hint="walls · floor · ceiling" id="rooms" title="Rooms">
+    <BuildPanelSection
+      hint={i18n._({
+        id: 'editor.buildPanel.rooms.hint',
+        message: 'walls · floor · ceiling',
+      })}
+      id="rooms"
+      title={i18n._({ id: 'editor.buildPanel.rooms.title', message: 'Rooms' })}
+    >
       <BuildToolGrid columns={3}>
-        {WALL_DRAW_VARIANTS.map((variant) => (
-          <BuildToolTile
-            active={variant.id === activeVariant}
-            data-build-tool={`room-${variant.id}`}
-            iconSrc={variant.iconSrc}
-            key={variant.id}
-            label={variant.label}
-            onClick={() => onSelect(variant.id)}
-            onMouseEnter={() => onHover?.(variant.id)}
-            size="lg"
-            title={variant.title}
-            {...tileProps?.(variant.id)}
-          />
-        ))}
+        {WALL_DRAW_VARIANTS.map((variant) => {
+          const messages = roomVariantMessages(variant.id, i18n)
+          return (
+            <BuildToolTile
+              active={variant.id === activeVariant}
+              data-build-tool={`room-${variant.id}`}
+              iconSrc={variant.iconSrc}
+              key={variant.id}
+              label={messages.label}
+              onClick={() => onSelect(variant.id)}
+              onMouseEnter={() => onHover?.(variant.id)}
+              size="lg"
+              title={messages.title}
+              {...tileProps?.(variant.id)}
+            />
+          )
+        })}
       </BuildToolGrid>
-      <BuildPanelCaption
-        lead={active?.caption.lead}
-        rest={active ? active.caption.rest : WALL_DRAW_IDLE_CAPTION}
-      />
+      {activeVariant === 'walls' ? (
+        <BuildPanelWallKinds />
+      ) : (
+        <BuildPanelCaption
+          caption={
+            activeMessages?.caption ??
+            i18n._({
+              id: 'editor.buildPanel.rooms.idle',
+              message:
+                'Pick a shape to start. Every room brings its own walls, floor and ceiling.',
+            })
+          }
+          lead={activeMessages?.lead}
+        />
+      )}
     </BuildPanelSection>
   )
 }
+
+function roomVariantMessages(variant: WallDrawVariant, i18n: PascalI18n) {
+  if (variant === 'rectangle') {
+    return {
+      label: i18n._({
+        id: 'editor.buildPanel.rooms.rectangle.label',
+        message: 'Rectangle',
+      }),
+      title: i18n._({
+        id: 'editor.buildPanel.rooms.rectangle.title',
+        message: 'Rectangle room',
+      }),
+      lead: i18n._({
+        id: 'editor.buildPanel.rooms.rectangle.lead',
+        message: 'Click two corners',
+      }),
+      caption: i18n._({
+        id: 'editor.buildPanel.rooms.rectangle.caption',
+        message: '{lead} on the grid. Walls, floor and ceiling are created together.',
+        values: { lead: CAPTION_LEAD_MARKER },
+      }),
+    }
+  }
+  if (variant === 'walls') {
+    // Armed, Walls shows its kinds in place of a caption (`BuildPanelWallKinds`).
+    return {
+      label: i18n._({ id: 'editor.buildPanel.rooms.walls.label', message: 'Walls' }),
+      title: i18n._({ id: 'editor.buildPanel.rooms.walls.title', message: 'Walls' }),
+      lead: undefined,
+      caption: undefined,
+    }
+  }
+  return {
+    label: i18n._({ id: 'editor.buildPanel.rooms.polygon.label', message: 'Polygon' }),
+    title: i18n._({
+      id: 'editor.buildPanel.rooms.polygon.title',
+      message: 'Polygon room',
+    }),
+    lead: i18n._({
+      id: 'editor.buildPanel.rooms.polygon.lead',
+      message: 'Click each corner,',
+    }),
+    caption: i18n._({
+      id: 'editor.buildPanel.rooms.polygon.caption',
+      message: '{lead} then the first one again to close. For L-shapes and angled rooms.',
+      values: { lead: CAPTION_LEAD_MARKER },
+    }),
+  }
+}
+
+function wallKindHelp(kind: WallKind, i18n: PascalI18n): string {
+  if (kind === 'invisible') {
+    return i18n._({
+      id: 'editor.buildPanel.rooms.wallKinds.invisibleHelp',
+      message:
+        'Divides a room or closes off a porch without building a wall; rooms close on it. Change any wall later from its controls.',
+    })
+  }
+  if (kind === 'railing') {
+    return i18n._({
+      id: 'editor.buildPanel.rooms.wallKinds.railingHelp',
+      message:
+        'A guard for stairs, balconies and mezzanines; rooms close on it. Change any wall later from its controls.',
+    })
+  }
+  return i18n._({
+    id: 'editor.buildPanel.rooms.wallKinds.standardHelp',
+    message:
+      'One wall per two clicks. Its sides become exterior or interior from the rooms it bounds. Change any wall later from its controls.',
+  })
+}
+
+/** What the armed Walls variant draws: a plain wall, an invisible wall or a railing. */
+function BuildPanelWallKinds() {
+  const i18n = usePascalI18n()
+  const kind = useWallKind()
+  return (
+    <div
+      aria-label={i18n._({ id: 'editor.buildPanel.rooms.wallKinds.label', message: 'Wall kind' })}
+      className="mt-2 flex flex-col gap-2 rounded-xl border border-border/50 bg-black/4 p-2 dark:bg-muted/40"
+      data-build-group="wall-kinds"
+      role="group"
+    >
+      <SegmentedControl
+        onChange={selectWallKind}
+        options={WALL_KINDS.map((entry) => ({ value: entry.id, label: i18n._(entry.label) }))}
+        value={kind}
+      />
+      <p className="px-0.5 text-[11px] text-muted-foreground leading-relaxed">
+        {wallKindHelp(kind, i18n)}
+      </p>
+    </div>
+  )
+}

package/src/components/ui/command-palette/editor-commands.tsx

@@ -1,6 +1,12 @@
 'use client'
 
-import { type AnyNodeId, type LevelNode, type UnitNode, useScene } from '@pascal-app/core'
+import {
+  type AnyNodeId,
+  type LevelNode,
+  type UnitNode,
+  usePascalI18n,
+  useScene,
+} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import {
   AppWindow,
@@ -13,6 +19,7 @@ import {
   Eye,
   EyeOff,
   FileJson,
+  Gauge,
   Grid3X3,
   Group,
   Hexagon,
@@ -21,8 +28,8 @@ import {
   Maximize2,
   Minimize2,
   Moon,
-  MousePointer2,
   Mountain,
+  MousePointer2,
   Package,
   PaintBucket,
   PencilLine,
@@ -37,6 +44,7 @@ import {
 } from 'lucide-react'
 import { useEffect } from 'react'
 import { addStoreyOnTop } from '../../../lib/add-storey'
+import { offerExteriorWallCopy } from '../level-wall-copy-prompt'
 import { getHistoryCommandState, runRedo, runUndo } from '../../../lib/history'
 import { deleteLevelWithFallbackSelection } from '../../../lib/level-selection'
 import { getSavedSceneDocument } from '../../../lib/scene'
@@ -47,6 +55,7 @@ import useEditor from '../../../store/use-editor'
 import { useCommandPalette } from './index'
 
 export function EditorCommands() {
+  const i18n = usePascalI18n()
   const register = useCommandRegistry((s) => s.register)
   const { navigateTo, setInputValue, setOpen } = useCommandPalette()
 
@@ -205,6 +214,7 @@ export function EditorCommands() {
             if (!building) return
             const newLevel = addStoreyOnTop(building.id)
             useViewer.getState().setSelection({ levelId: newLevel.id })
+            offerExteriorWallCopy(newLevel.id)
           }),
       },
       {
@@ -311,20 +321,36 @@ export function EditorCommands() {
           }),
       },
       {
-        id: 'editor.viewer.shading-solid',
-        label: 'Switch to Solid',
+        id: 'editor.viewer.quality-auto',
+        label: i18n._({ id: 'editor.commands.qualityAuto', message: 'Quality: Auto' }),
+        group: 'Viewer Controls',
+        icon: <Gauge className="h-4 w-4" />,
+        keywords: ['quality', 'auto', 'device', 'render'],
+        execute: () => run(() => useViewer.getState().setRenderQuality('auto')),
+      },
+      {
+        id: 'editor.viewer.quality-low',
+        label: i18n._({ id: 'editor.commands.qualityLow', message: 'Quality: Low' }),
+        group: 'Viewer Controls',
+        icon: <Gauge className="h-4 w-4" />,
+        keywords: ['quality', 'low', 'fast', 'performance', 'solid', 'render'],
+        execute: () => run(() => useViewer.getState().setRenderQuality('low')),
+      },
+      {
+        id: 'editor.viewer.quality-medium',
+        label: i18n._({ id: 'editor.commands.qualityMedium', message: 'Quality: Medium' }),
         group: 'Viewer Controls',
-        icon: <Box className="h-4 w-4" />,
-        keywords: ['solid', 'shading', 'render', 'mode', 'performance'],
-        execute: () => run(() => useViewer.getState().setShading('solid')),
+        icon: <Gauge className="h-4 w-4" />,
+        keywords: ['quality', 'medium', 'render'],
+        execute: () => run(() => useViewer.getState().setRenderQuality('medium')),
       },
       {
-        id: 'editor.viewer.shading-rendered',
-        label: 'Switch to Rendered',
+        id: 'editor.viewer.quality-high',
+        label: i18n._({ id: 'editor.commands.qualityHigh', message: 'Quality: High' }),
         group: 'Viewer Controls',
         icon: <Sparkles className="h-4 w-4" />,
-        keywords: ['rendered', 'shading', 'render', 'mode', 'quality'],
-        execute: () => run(() => useViewer.getState().setShading('rendered')),
+        keywords: ['quality', 'high', 'rendered', 'render'],
+        execute: () => run(() => useViewer.getState().setRenderQuality('high')),
       },
       {
         id: 'editor.viewer.camera-snapshot',
@@ -449,6 +475,7 @@ export function EditorCommands() {
     setPreviewMode,
     exportScene,
     unitListKey,
+    i18n,
   ])
 
   return null

package/src/components/ui/controls/finish-swatch.tsx

@@ -4,36 +4,52 @@ import {
   type AnyNode,
   getCatalogMaterialById,
   getLibraryMaterialIdFromRef,
+  getMaterialSwatch,
   getSceneMaterialIdFromRef,
   nodeRegistry,
+  type PascalI18n,
+  usePascalI18n,
   useScene,
 } from '@pascal-app/core'
 import { useState } from 'react'
+import { materialSwatchStyle } from '../../../lib/material-swatch-style'
 import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
 import { MaterialPicker } from './material-picker'
 
-type Swatch = { label: string; color: string | null; image: string | null }
+type Swatch = { label: string; color: string | null; image: string | null; tinted?: boolean }
 
 /** How a finish reference reads in a panel: its catalog tile, its colour, or its scene material. */
 function useFinishSwatch(ref: string | undefined, fallback: string): Swatch {
+  const i18n = usePascalI18n()
   const materials = useScene((state) => state.materials)
-  if (!ref) return { ...describe(fallback, materials), label: 'Default' }
-  return describe(ref, materials)
+  if (!ref) return { ...describe(fallback, materials, i18n), label: defaultLabel(i18n) }
+  return describe(ref, materials, i18n)
 }
 
-function describe(ref: string, materials: ReturnType<typeof useScene.getState>['materials']) {
+const defaultLabel = (i18n: PascalI18n) =>
+  i18n._({ id: 'editor.controls.finishSwatch.default', message: 'Default' })
+
+function describe(
+  ref: string,
+  materials: ReturnType<typeof useScene.getState>['materials'],
+  i18n: PascalI18n,
+) {
   const library = getCatalogMaterialById(getLibraryMaterialIdFromRef(ref) ?? undefined)
-  if (library)
+  if (library) {
+    const swatch = getMaterialSwatch(library)
     return {
       label: library.label,
-      color: library.previewColor ?? null,
-      image: library.previewThumbnailUrl ?? null,
+      color: swatch.color,
+      image: swatch.imageUrl,
+      tinted: swatch.tinted,
     }
+  }
   const sceneId = getSceneMaterialIdFromRef(ref)
   const scene = sceneId ? materials[sceneId as keyof typeof materials] : undefined
-  if (scene) return { label: scene.name, color: scene.material.properties?.color ?? null, image: null }
+  if (scene)
+    return { label: scene.name, color: scene.material.properties?.color ?? null, image: null }
   if (ref.startsWith('#')) return { label: ref.toUpperCase(), color: ref, image: null }
-  return { label: 'Default', color: null, image: null }
+  return { label: defaultLabel(i18n), color: null, image: null }
 }
 
 /**
@@ -55,21 +71,22 @@ export function paintSurface(node: AnyNode, role: string, materialPreset: string
 export function FinishSwatch({
   label,
   node,
-  role,
+  paintRole,
   value,
   fallback,
   hint,
 }: {
   label: string
   node: AnyNode
-  /** The paint role of the surface (`edge`, `foundation`, …). */
-  role: string
+  /** The paint role of the surface (`edge`, `foundation`, …); not an ARIA role. */
+  paintRole: string
   /** The authored finish reference; absent shows `fallback` as "Default". */
   value: string | undefined
   fallback: string
   /** Tooltip on the row. */
   hint?: string
 }) {
+  const i18n = usePascalI18n()
   const [open, setOpen] = useState(false)
   const swatch = useFinishSwatch(value, fallback)
   return (
@@ -78,7 +95,11 @@ export function FinishSwatch({
       <Popover onOpenChange={setOpen} open={open}>
         <PopoverTrigger asChild>
           <button
-            aria-label={`${label}: ${swatch.label}`}
+            aria-label={i18n._({
+              id: 'editor.controls.finishSwatch.ariaLabel',
+              message: '{label}: {finish}',
+              values: { label, finish: swatch.label },
+            })}
             className="flex min-w-0 items-center gap-2 rounded-full border border-border/50 py-0.5 pr-2.5 pl-1 text-xs transition-colors hover:bg-accent"
             data-finish-swatch={label}
             type="button"
@@ -86,18 +107,23 @@ export function FinishSwatch({
             <span
               aria-hidden
               className="size-4 shrink-0 overflow-hidden rounded-full border border-border/50"
-              style={{ backgroundColor: swatch.color ?? 'transparent' }}
-            >
-              {swatch.image && <img alt="" className="size-full object-cover" src={swatch.image} />}
-            </span>
+              style={materialSwatchStyle({
+                color: swatch.color ?? 'transparent',
+                imageUrl: swatch.image,
+                tinted: swatch.tinted,
+              })}
+            />
             <span className="truncate">{swatch.label}</span>
           </button>
         </PopoverTrigger>
         <PopoverContent align="end" className="flex h-96 w-80 flex-col p-2" side="left">
           <MaterialPicker
             onSelectMaterialPreset={(ref) => {
-              const live = useScene.getState().nodes[node.id as keyof ReturnType<typeof useScene.getState>['nodes']]
-              if (live) paintSurface(live, role, ref)
+              const live =
+                useScene.getState().nodes[
+                  node.id as keyof ReturnType<typeof useScene.getState>['nodes']
+                ]
+              if (live) paintSurface(live, paintRole, ref)
               setOpen(false)
             }}
             selectOnCategoryChange={false}

package/src/components/ui/controls/material-picker.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import { type MaterialTarget, toLibraryMaterialRef } from '@pascal-app/core'
+import { getMaterialSwatch, type MaterialTarget, toLibraryMaterialRef } from '@pascal-app/core'
 import { Plus } from 'lucide-react'
-import { useMaterialCatalogModel, type MaterialSourceFilter } from '../../../lib/material-catalog-model'
+import { useMaterialCatalogModel } from '../../../lib/material-catalog-model'
+import { materialSwatchStyle } from '../../../lib/material-swatch-style'
 import { triggerSFX } from '../../../lib/sfx-bus'
 
 export type { MaterialSourceFilter } from '../../../lib/material-catalog-model'
@@ -35,7 +36,21 @@ export function MaterialPicker({
   onCreateMaterialRequest,
   selectOnCategoryChange = true,
 }: MaterialPickerProps) {
-  const { selectedCategory, setSelectedCategory, sourceFilter, setSourceFilter, visibleSourceFilters, availableCategories, catalogItems, select: handleCatalogSelect } = useMaterialCatalogModel(selectedMaterialPreset, onSelectMaterialPreset, disabled, selectOnCategoryChange)
+  const {
+    selectedCategory,
+    setSelectedCategory,
+    sourceFilter,
+    setSourceFilter,
+    visibleSourceFilters,
+    availableCategories,
+    catalogItems,
+    select: handleCatalogSelect,
+  } = useMaterialCatalogModel(
+    selectedMaterialPreset,
+    onSelectMaterialPreset,
+    disabled,
+    selectOnCategoryChange,
+  )
 
   return (
     <div
@@ -121,20 +136,12 @@ export function MaterialPicker({
               onMouseEnter={() => triggerSFX('sfx:menu-hover')}
               type="button"
             >
-              <div className="relative aspect-square w-full overflow-hidden rounded-lg">
-                {item.previewThumbnailUrl ? (
-                  <img
-                    alt={item.label}
-                    className="h-full w-full object-cover"
-                    src={item.previewThumbnailUrl}
-                  />
-                ) : (
-                  <div
-                    className="h-full w-full"
-                    style={{ backgroundColor: item.previewColor ?? '#f3f4f6' }}
-                  />
-                )}
-              </div>
+              <div
+                aria-label={item.label}
+                className="relative aspect-square w-full overflow-hidden rounded-lg"
+                role="img"
+                style={materialSwatchStyle(getMaterialSwatch(item))}
+              />
               <span className="truncate px-0.5 text-left font-medium text-[11px] text-muted-foreground group-hover:text-foreground">
                 {item.label}
               </span>

package/src/components/ui/controls/metric-control.test.ts

@@ -0,0 +1,52 @@
+import { expect, test } from 'bun:test'
+import {
+  formatMetricInputValue,
+  parseMetricInput,
+  roundMetricValueForDisplay,
+} from './metric-control'
+
+test('metric controls parse stair dimensions with the scoped locale', () => {
+  expect(
+    parseMetricInput('1,000', 'm', {
+      isImperial: false,
+      locale: 'fr',
+      parseUnit: 'm',
+    }),
+  ).toBe(1)
+  expect(
+    parseMetricInput('1,000', 'm', {
+      isImperial: false,
+      locale: 'en',
+      parseUnit: 'm',
+    }),
+  ).toBe(1000)
+})
+
+test('metric controls write values back with the scoped decimal separator', () => {
+  expect(formatMetricInputValue(2.75, 2, 'fr')).toBe('2,75')
+  expect(formatMetricInputValue(2.75, 2, 'en')).toBe('2.75')
+})
+
+test('metric write-back rounds negative halves away from zero like the display', () => {
+  expect(roundMetricValueForDisplay(-1.25, 1)).toBe(-1.3)
+  expect(formatMetricInputValue(-1.25, 1, 'en')).toBe('-1.3')
+  expect(roundMetricValueForDisplay(1.25, 1)).toBe(1.3)
+  expect(formatMetricInputValue(1.25, 1, 'en')).toBe('1.3')
+})
+
+test('metric write-back and display agree for values immediately below a half', () => {
+  const positive = 1.2499999999999998
+  const negative = -positive
+
+  expect(roundMetricValueForDisplay(negative, 1)).toBe(-1.2)
+  expect(formatMetricInputValue(negative, 1, 'en')).toBe('-1.2')
+  expect(roundMetricValueForDisplay(positive, 1)).toBe(1.2)
+  expect(formatMetricInputValue(positive, 1, 'en')).toBe('1.2')
+})
+
+test('metric write-back preserves Intl rounding for binary-inexact decimal halves', () => {
+  expect(roundMetricValueForDisplay(-1.005, 2)).toBe(-1.01)
+  expect(formatMetricInputValue(-1.005, 2, 'en')).toBe('-1.01')
+  expect(roundMetricValueForDisplay(1.005, 2)).toBe(1.01)
+  expect(formatMetricInputValue(1.005, 2, 'en')).toBe('1.01')
+})