@pascal-app/editor 1.0.5 → 1.0.7

package/src/components/ui/panels/floor-opening-panel.tsx

@@ -5,8 +5,8 @@ import {
   adjacentLevelId,
   area,
   floorOpeningHints,
-  getLevelDisplayName,
-  useScene,
+  useScene, usePascalI18n,
+  useLocale,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import {
@@ -18,6 +18,9 @@ import { formatAreaLabel } from '../../../lib/measurements'
 import { Button } from '../primitives/button'
 import { Switch } from '../primitives/switch'
 import { PanelWrapper } from './panel-wrapper'
+import { localizedLevelName } from '../../../i18n/level-name'
+import { nodeLabel } from '../../../i18n/node-messages'
+import { displayRoomName } from '../../../lib/room-name-messages'
 
 /**
  * A floor (or ceiling) opening: where it is, what it cuts, and the switch for
@@ -27,6 +30,8 @@ import { PanelWrapper } from './panel-wrapper'
  * handles in the scene. Done and Delete return to the room.
  */
 export function FloorOpeningPanel({ openingId }: { openingId: string }) {
+  const i18n = usePascalI18n()
+  const locale = useLocale()
   const nodes = useScene((state) => state.nodes)
   const unit = useViewer((s) => s.unit)
   const readOnly = useScene((state) => state.readOnly)
@@ -35,7 +40,13 @@ export function FloorOpeningPanel({ openingId }: { openingId: string }) {
   const onCeiling = opening.drawnOn === 'ceiling'
   const zoneId = openingRoom(nodes, opening)
   const zone = zoneId ? nodes[zoneId as AnyNodeId] : undefined
-  const roomName = zone?.type === 'zone' ? zone.name?.trim() || 'Room' : null
+  const storedRoomName = zone?.type === 'zone' ? zone.name?.trim() : undefined
+  const roomName =
+    zone?.type !== 'zone'
+      ? null
+      : storedRoomName
+        ? displayRoomName(storedRoomName, i18n)
+        : i18n._({ id: 'editor.panels.floorOpeningPanel.room', message: 'Room' })
   const level = opening.parentId ? nodes[opening.parentId as AnyNodeId] : undefined
   const adjacentId = opening.parentId
     ? adjacentLevelId(nodes, opening.parentId, onCeiling ? 1 : -1)
@@ -47,19 +58,35 @@ export function FloorOpeningPanel({ openingId }: { openingId: string }) {
     !!opening.ownerId &&
     nodes[opening.ownerId as AnyNodeId]?.type === opening.source
   const hints = floorOpeningHints(nodes, opening)
-  const title = opening.source === 'stair'
-    ? 'Stair opening'
-    : opening.source === 'elevator'
-      ? 'Elevator opening'
-      : onCeiling ? 'Ceiling opening' : 'Floor opening'
-  const kicker = [
-    'Opening',
-    roomName ? `in ${roomName}` : null,
-    level?.type === 'level' ? getLevelDisplayName(level) : null,
-  ]
-    .filter(Boolean)
-    .join(' · ')
-  const switchLabel = onCeiling ? 'Also cut the floor above' : 'Also cut the ceiling below'
+  const title = i18n._({
+    id: 'editor.panels.floorOpeningPanel.title',
+    message:
+      '{source, select, stair {Stair opening} elevator {Elevator opening} ceiling {Ceiling opening} other {Floor opening}}',
+    values: { source: opening.source === 'stair' || opening.source === 'elevator' ? opening.source : onCeiling ? 'ceiling' : 'floor' },
+  })
+  const levelName = level?.type === 'level' ? localizedLevelName(level, i18n, locale) : null
+  const kicker = roomName
+    ? levelName
+      ? i18n._({
+          id: 'editor.panels.floorOpeningPanel.kickerRoomLevel',
+          message: 'Opening · in {room} · {level}',
+          values: { room: roomName, level: levelName },
+        })
+      : i18n._({
+          id: 'editor.panels.floorOpeningPanel.kickerRoom',
+          message: 'Opening · in {room}',
+          values: { room: roomName },
+        })
+    : levelName
+      ? i18n._({
+          id: 'editor.panels.floorOpeningPanel.kickerLevel',
+          message: 'Opening · {level}',
+          values: { level: levelName },
+        })
+      : i18n._({ id: 'editor.panels.floorOpeningPanel.kicker', message: 'Opening' })
+  const switchLabel = onCeiling
+    ? i18n._({ id: 'editor.panels.floorOpeningPanel.alsoCutTheFloorAbove', message: 'Also cut the floor above' })
+    : i18n._({ id: 'editor.panels.floorOpeningPanel.alsoCutTheCeilingBelow', message: 'Also cut the ceiling below' })
   const setAdjacent = (next: boolean) =>
     useScene.getState().updateNode(opening.id, { cutsAdjacent: next })
 
@@ -72,8 +99,23 @@ export function FloorOpeningPanel({ openingId }: { openingId: string }) {
     >
       <div className="flex flex-col gap-3 px-4 pt-3 pb-4 text-sm" data-floor-opening-panel={opening.id}>
         <p className="text-muted-foreground text-xs">
-          {formatAreaLabel(area([{ outer: opening.polygon, holes: [] }]), unit, 2)}
-          {owned ? ' · Shape follows its owner.' : ' · Drag its corners to change the shape.'}
+          {owned
+            ? opening.source === 'stair'
+              ? i18n._({
+                  id: 'editor.panels.floorOpeningPanel.areaStairResize',
+                  message: '{area} · Drag its sides or corners to resize it; it moves with the stair.',
+                  values: { area: formatAreaLabel(area([{ outer: opening.polygon, holes: [] }]), unit, 2) },
+                })
+              : i18n._({
+                  id: 'editor.panels.floorOpeningPanel.areaOwned',
+                  message: '{area} · Shape follows its owner.',
+                  values: { area: formatAreaLabel(area([{ outer: opening.polygon, holes: [] }]), unit, 2) },
+                })
+            : i18n._({
+                id: 'editor.panels.floorOpeningPanel.areaDragCorners',
+                message: '{area} · Drag its corners to change the shape.',
+                values: { area: formatAreaLabel(area([{ outer: opening.polygon, holes: [] }]), unit, 2) },
+              })}
         </p>
         {owned && (
           <button
@@ -82,12 +124,14 @@ export function FloorOpeningPanel({ openingId }: { openingId: string }) {
             onClick={() => useViewer.getState().setSelection({ selectedIds: [opening.ownerId!] })}
             type="button"
           >
-            Owned by {opening.source === 'stair' ? 'Staircase' : 'Elevator'}
+            {opening.source === 'stair'
+              ? i18n._({ id: 'editor.panels.floorOpeningPanel.ownedByStaircase', message: 'Owned by Staircase' })
+              : i18n._({ id: 'editor.panels.floorOpeningPanel.ownedByElevator', message: 'Owned by Elevator' })}
           </button>
         )}
         {hosted ? (
           <p className="text-muted-foreground text-xs" data-opening-hosted>
-            A hatch in the mezzanine: it cuts only the mezzanine’s floor.
+            {i18n._({ id: 'editor.panels.floorOpeningPanel.aHatchInTheMezzanineIt', message: 'A hatch in the mezzanine: it cuts only the mezzanine’s floor.' })}
           </p>
         ) : owned ? null : (
           <label className="flex items-start gap-3" data-opening-adjacent>
@@ -95,10 +139,14 @@ export function FloorOpeningPanel({ openingId }: { openingId: string }) {
               <span className="font-medium text-[13px] text-foreground">{switchLabel}</span>
               <span className="text-muted-foreground text-xs">
                 {adjacent?.type === 'level'
-                  ? `On ${getLevelDisplayName(adjacent)}, as one void with this opening.`
+                  ? i18n._({
+                      id: 'editor.panels.floorOpeningPanel.oneVoidWith',
+                      message: 'On {level}, as one void with this opening.',
+                      values: { level: localizedLevelName(adjacent, i18n, locale) },
+                    })
                   : onCeiling
-                    ? 'There is no floor above this storey.'
-                    : 'There is no storey below.'}
+                    ? i18n._({ id: 'editor.panels.floorOpeningPanel.thereIsNoFloorAboveThis', message: 'There is no floor above this storey.' })
+                    : i18n._({ id: 'editor.panels.floorOpeningPanel.thereIsNoStoreyBelow', message: 'There is no storey below.' })}
               </span>
             </span>
             <Switch
@@ -123,7 +171,7 @@ export function FloorOpeningPanel({ openingId }: { openingId: string }) {
             type="button"
             variant="outline"
           >
-            Done
+            {i18n._({ id: 'editor.panels.floorOpeningPanel.done', message: 'Done' })}
           </Button>
           {!owned && <Button
             className="flex-1 rounded-full"
@@ -134,7 +182,7 @@ export function FloorOpeningPanel({ openingId }: { openingId: string }) {
             type="button"
             variant="outline"
           >
-            Delete
+            {i18n._({ id: 'editor.panels.floorOpeningPanel.delete', message: 'Delete' })}
           </Button>}
         </div>
       </div>

package/src/components/ui/panels/inspector-extensions.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { Icon } from '@iconify/react'
+import {
+  type AnyNodeId,
+  getInspectorExtensions,
+  type IconRef,
+  useRegistryVersion,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { lazy, Suspense, useMemo } from 'react'
+import { IconRefImage } from '../icon-ref'
+
+/**
+ * The plugin inspector extensions (`Plugin.inspectorExtensions`) for the single selected node,
+ * gated on their plugin being installed, and the one that owns the card body for it
+ * (`primaryWhen`). Read by the inspector card and by the action menu that opens them.
+ */
+export function useInspectorExtensions() {
+  const registryVersion = useRegistryVersion()
+  const selectedId = useViewer((s) =>
+    s.selection.selectedIds.length === 1 ? s.selection.selectedIds[0] : undefined,
+  ) as AnyNodeId | undefined
+  // Subscribe to the selected node's *type* only — a string primitive that
+  // doesn't change as fields are edited (same trick as ParametricInspector).
+  const selectedType = useScene((s) => (selectedId ? (s.nodes[selectedId]?.type ?? null) : null))
+  const installedPlugins = useScene((s) => s.installedPlugins)
+  const extensions = useMemo(() => {
+    // re-derive when plugin extensions register after mount (async plugin load)
+    void registryVersion
+    if (!selectedType) return []
+    return getInspectorExtensions(selectedType).filter(
+      (extension) => !extension.pluginId || installedPlugins.includes(extension.pluginId),
+    )
+  }, [selectedType, installedPlugins, registryVersion])
+  const primaryExtensionId = useScene((state) => {
+    const node = selectedId ? state.nodes[selectedId] : undefined
+    return node ? extensions.find((extension) => extension.primaryWhen?.(node))?.id : undefined
+  })
+  const primaryExtension = extensions.find((extension) => extension.id === primaryExtensionId)
+  return { selectedId, extensions, primaryExtension }
+}
+
+/** An extension's 16px icon — mirrors the parametric inspector's `renderIcon` (plain <img> so no next/image server deps). */
+export function renderExtensionIcon(ref: IconRef): React.ReactNode {
+  if (ref.kind === 'url') {
+    return <IconRefImage className="h-4 w-4 shrink-0" src={ref.src} />
+  }
+  if (ref.kind === 'iconify') {
+    return <Icon height={16} icon={ref.name} width={16} />
+  }
+  if (ref.kind === 'svg') {
+    return (
+      <svg height={16} viewBox={ref.viewBox} width={16}>
+        <path d={ref.path} fill="currentColor" />
+      </svg>
+    )
+  }
+  const LazyIcon = lazy(ref.module)
+  return (
+    <Suspense fallback={null}>
+      <LazyIcon />
+    </Suspense>
+  )
+}

package/src/components/ui/panels/mobile-panel-sheet.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { usePascalI18n } from '@pascal-app/core'
 import { X } from 'lucide-react'
 import { AnimatePresence, motion } from 'motion/react'
 import { type ReactNode, useEffect, useState } from 'react'
@@ -19,6 +20,7 @@ const HEIGHT_VH = 50
 const DRAG_CLOSE_THRESHOLD_PX = 120
 
 export function MobilePanelSheet({ open, onClose, icon, title, children }: MobilePanelSheetProps) {
+  const i18n = usePascalI18n()
   const [mounted, setMounted] = useState(false)
   const setMobilePanelSheetHeight = useEditor((s) => s.setMobilePanelSheetHeight)
 
@@ -88,7 +90,7 @@ export function MobilePanelSheet({ open, onClose, icon, title, children }: Mobil
               </h2>
             </div>
             <button
-              aria-label="Close"
+              aria-label={i18n._({ id: 'editor.panels.mobilePanelSheet.close', message: 'Close' })}
               className="flex h-8 w-8 items-center justify-center rounded-md bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground"
               onClick={onClose}
               type="button"

package/src/components/ui/panels/mobile-selection-bar.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { usePascalI18n } from '@pascal-app/core'
 import type { AnyNode } from '@pascal-app/core'
 import { Copy, Move, SlidersHorizontal, Trash2 } from 'lucide-react'
 import type { MouseEventHandler } from 'react'
@@ -29,7 +30,8 @@ export function MobileSelectionBar({
   onDelete,
   onEdit,
 }: MobileSelectionBarProps) {
-  const display = getNodeDisplay(node)
+  const i18n = usePascalI18n()
+  const display = getNodeDisplay(node, i18n)
   const resolvedLabel = label ?? display.label
   const resolvedIcon = icon ?? display.icon
 
@@ -38,7 +40,7 @@ export function MobileSelectionBar({
   return (
     <div className="pointer-events-auto absolute right-3 bottom-6 left-3 z-50 flex h-12 items-stretch gap-1 rounded-2xl border border-border/50 bg-background/95 px-2 shadow-2xl backdrop-blur-xl">
       <button
-        aria-label={`Edit ${resolvedLabel}`}
+        aria-label={i18n._({ id: 'editor.panels.mobileSelectionBar.editResolvedlabel', message: 'Edit {resolvedLabel}', values: { resolvedLabel } })}
         className={cn(
           'flex min-w-0 flex-1 items-center gap-2 rounded-lg px-2 text-left transition-colors hover:bg-black/5 dark:hover:bg-white/8',
         )}
@@ -57,7 +59,7 @@ export function MobileSelectionBar({
 
       <div className="flex items-center gap-0.5 border-border/40 border-l pl-1">
         <button
-          aria-label="Move"
+          aria-label={i18n._({ id: 'editor.panels.mobileSelectionBar.move', message: 'Move' })}
           className={ACTION_BTN}
           onClick={(e) => {
             stop(e)
@@ -68,7 +70,7 @@ export function MobileSelectionBar({
           <Move className="h-4 w-4" />
         </button>
         <button
-          aria-label="Duplicate"
+          aria-label={i18n._({ id: 'editor.panels.mobileSelectionBar.duplicate', message: 'Duplicate' })}
           className={ACTION_BTN}
           onClick={(e) => {
             stop(e)
@@ -79,7 +81,7 @@ export function MobileSelectionBar({
           <Copy className="h-4 w-4" />
         </button>
         <button
-          aria-label="Delete"
+          aria-label={i18n._({ id: 'editor.panels.mobileSelectionBar.delete', message: 'Delete' })}
           className={cn(
             ACTION_BTN,
             'hover:bg-red-500/15 hover:text-red-600 dark:hover:bg-red-500/15 dark:hover:text-red-400',
@@ -93,7 +95,7 @@ export function MobileSelectionBar({
           <Trash2 className="h-4 w-4" />
         </button>
         <button
-          aria-label="Edit properties"
+          aria-label={i18n._({ id: 'editor.panels.mobileSelectionBar.editProperties', message: 'Edit properties' })}
           className={ACTION_BTN}
           onClick={(e) => {
             stop(e)

package/src/components/ui/panels/multi-field-value.test.ts

@@ -15,6 +15,7 @@ import {
 import {
   buildMultiNodePatches,
   commitMultiNodeFields,
+  fieldTargetIds,
   fieldVisibleForAll,
   reduceFieldValue,
   reduceHeightBoundMode,
@@ -57,6 +58,32 @@ describe('reduceFieldValue', () => {
     expect(reduceFieldValue(['a', 'b'], 'thickness', nodes)).toEqual({ kind: 'mixed' })
   })
 
+  test('an omitted value reads as the field default, not as zero', () => {
+    const nodes = {
+      a: makeNode('a', 'wall'),
+      b: makeNode('b', 'wall', { thickness: 0.1 }),
+      c: makeNode('c', 'wall', { thickness: 0.2 }),
+    }
+    expect(reduceFieldValue(['a', 'b'], 'thickness', nodes, 0.1)).toEqual({
+      kind: 'same',
+      value: 0.1,
+    })
+    expect(reduceFieldValue(['a', 'c'], 'thickness', nodes, 0.1)).toEqual({ kind: 'mixed' })
+  })
+
+  test('a field that names the nodes it applies to edits only those', () => {
+    const nodes = {
+      a: makeNode('a', 'wall', { thickness: 0.2 }),
+      b: makeNode('b', 'wall', { thickness: 0.18, assembly: { layers: [] } }),
+      c: makeNode('c', 'wall', { thickness: 0.2 }),
+    }
+    const plain = (node: AnyNode) => !(node as { assembly?: unknown }).assembly
+    const targets = fieldTargetIds(['a', 'b', 'c'], plain, nodes)
+    expect(targets).toEqual(['a', 'c'])
+    expect(reduceFieldValue(targets, 'thickness', nodes)).toEqual({ kind: 'same', value: 0.2 })
+    expect(fieldTargetIds(['a', 'b'], undefined, nodes)).toEqual(['a', 'b'])
+  })
+
   test('vec3 compares elementwise', () => {
     const nodes = {
       a: makeNode('a', 'item', { position: [1, 0, 2] }),

package/src/components/ui/panels/multi-field-value.ts

@@ -20,17 +20,23 @@ function fieldValuesEqual(a: unknown, b: unknown): boolean {
   return false
 }
 
+/**
+ * The value every node holds for `key`, or mixed. `fallback` is what a node
+ * that omits the key shows (the field's default), so an absent value and an
+ * explicit default read as the same.
+ */
 export function reduceFieldValue(
   nodeIds: readonly string[],
   key: string,
   nodes: Readonly<Record<string, AnyNode | undefined>>,
+  fallback?: unknown,
 ): ReducedFieldValue {
   let seen = false
   let shared: unknown
   for (const id of nodeIds) {
     const node = nodes[id]
     if (!node) continue
-    const value = (node as Record<string, unknown>)[key]
+    const value = (node as Record<string, unknown>)[key] ?? fallback
     if (!seen) {
       seen = true
       shared = value
@@ -78,6 +84,19 @@ export function fieldVisibleForAll(
   return true
 }
 
+/** The selected nodes a field edits: every one, unless it names those it `appliesTo`. */
+export function fieldTargetIds<T extends string>(
+  nodeIds: readonly T[],
+  appliesTo: ((node: AnyNode) => boolean) | undefined,
+  nodes: Readonly<Record<string, AnyNode | undefined>>,
+): T[] {
+  if (!appliesTo) return [...nodeIds]
+  return nodeIds.filter((id) => {
+    const node = nodes[id]
+    return node ? appliesTo(node) : false
+  })
+}
+
 export function firstNumericFieldValue(
   nodeIds: readonly string[],
   key: string,

package/src/components/ui/panels/multi-height-mode.tsx

@@ -11,7 +11,7 @@ import {
   resolveCeilingHeight,
   terrainSupportLift,
   useScene,
-  type WallNode,
+  type WallNode, usePascalI18n,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback } from 'react'
@@ -99,6 +99,7 @@ export function MultiHeightModeField({
   max?: number
   step?: number
 }) {
+  const i18n = usePascalI18n()
   const unit = useViewer((s) => s.unit)
   const metricNotation = useViewer((s) => s.metricNotation)
   const mode = useScene(useShallow((s) => reduceHeightBoundMode(nodeIds, s.nodes)))
@@ -151,29 +152,29 @@ export function MultiHeightModeField({
   const sliderMixed = storedHeight.kind === 'mixed' || mixedMode
   const currentLabel = Number.isFinite(liveHeight)
     ? formatLinearMeasurement(liveHeight, unit, metricNotation)
-    : 'Mixed'
+    : i18n._({ id: 'editor.panels.mixed', message: 'Mixed' })
 
   return (
     <>
       {nodeType === 'wall' && (
         <div className="px-1 font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
-          Top
+          {i18n._({ id: 'editor.panels.multiHeightMode.top', message: 'Top' })}
         </div>
       )}
       <SegmentedControl
         mixed={mixedMode}
         onChange={applyMode}
         options={[
-          { label: 'Follows level', value: 'storey' },
-          { label: 'Custom height', value: 'custom' },
+          { label: i18n._({ id: 'editor.panels.multiHeightMode.followsLevel', message: 'Follows level' }), value: 'storey' },
+          { label: i18n._({ id: 'editor.panels.multiHeightMode.customHeight', message: 'Custom height' }), value: 'custom' },
         ]}
         value={mode.kind === 'same' ? mode.value : 'storey'}
       />
       {isFollows ? (
-        <div className="px-1 text-[11px] text-muted-foreground">Currently {currentLabel}</div>
+        <div className="px-1 text-[11px] text-muted-foreground">{i18n._({ id: 'editor.panels.multiHeightMode.currentlyCurrentlabel', message: 'Currently {currentLabel}', values: { currentLabel } })}</div>
       ) : isCustom ? (
         <SliderControl
-          label="Height"
+          label={i18n._({ id: 'editor.panels.multiHeightMode.height', message: 'Height' })}
           max={max}
           min={min}
           mixed={sliderMixed}