@pascal-app/editor 1.0.6 → 1.1.0

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'
@@ -11,8 +12,8 @@ interface MobileSelectionBarProps {
   node: AnyNode | null
   label?: string
   icon?: string
-  onMove: () => void
-  onDuplicate: () => void
+  onMove?: () => void
+  onDuplicate?: () => void
   onDelete: () => void
   onEdit: () => void
 }
@@ -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',
         )}
@@ -56,30 +58,34 @@ export function MobileSelectionBar({
       </button>
 
       <div className="flex items-center gap-0.5 border-border/40 border-l pl-1">
+        {onMove && (
+          <button
+            aria-label={i18n._({ id: 'editor.panels.mobileSelectionBar.move', message: 'Move' })}
+            className={ACTION_BTN}
+            onClick={(e) => {
+              stop(e)
+              onMove()
+            }}
+            type="button"
+          >
+            <Move className="h-4 w-4" />
+          </button>
+        )}
+        {onDuplicate && (
+          <button
+            aria-label={i18n._({ id: 'editor.panels.mobileSelectionBar.duplicate', message: 'Duplicate' })}
+            className={ACTION_BTN}
+            onClick={(e) => {
+              stop(e)
+              onDuplicate()
+            }}
+            type="button"
+          >
+            <Copy className="h-4 w-4" />
+          </button>
+        )}
         <button
-          aria-label="Move"
-          className={ACTION_BTN}
-          onClick={(e) => {
-            stop(e)
-            onMove()
-          }}
-          type="button"
-        >
-          <Move className="h-4 w-4" />
-        </button>
-        <button
-          aria-label="Duplicate"
-          className={ACTION_BTN}
-          onClick={(e) => {
-            stop(e)
-            onDuplicate()
-          }}
-          type="button"
-        >
-          <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 +99,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,12 +11,12 @@ import {
   resolveCeilingHeight,
   terrainSupportLift,
   useScene,
-  type WallNode,
+  type WallNode, usePascalI18n,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback } from 'react'
 import { useShallow } from 'zustand/react/shallow'
-import { formatLinearMeasurement } from '../../../lib/measurements'
+import { formatLinearMeasurement } from '@pascal-app/core'
 import { SegmentedControl } from '../controls/segmented-control'
 import { SliderControl } from '../controls/slider-control'
 import {
@@ -42,7 +42,7 @@ function wallFollowsLevelPatch(wall: WallNode, nodes: Record<string, AnyNode>):
 }
 
 function effectiveHeight(node: AnyNode, nodes: Record<string, AnyNode>): number {
-  if (node.type === 'wall') return getWallEffectiveHeightForNodes(node, nodes)
+  if (node.type === 'wall') return getWallEffectiveHeightForNodes(node, nodes, 0)
   if (node.type === 'ceiling') return resolveCeilingHeight(node, nodes)
   const height = (node as { height?: number }).height
   return typeof height === 'number' ? height : 0
@@ -72,7 +72,7 @@ export function applyMultiHeightMode(
         if (isCustom) return {}
         if (node.type === 'ceiling') return { height: ceilingCustomHeight(node, nodes) }
         if (node.type === 'wall') {
-          return { height: Math.max(0.1, getWallEffectiveHeightForNodes(node, nodes)) }
+          return { height: Math.max(0.1, getWallEffectiveHeightForNodes(node, nodes, 0)) }
         }
         return {}
       }
@@ -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}

package/src/components/ui/panels/multi-parametric-inspector.tsx

@@ -6,20 +6,22 @@ import {
   nodeRegistry,
   type ParamField,
   type ParametricDescriptor,
-  useScene,
+  useScene, usePascalI18n,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback, useMemo } from 'react'
 import { useShallow } from 'zustand/react/shallow'
-import { getNodePanelModel } from '../../../lib/panel-rows'
+import { getNodePanelModel, type MultiPanelControl } from '../../../lib/panel-rows'
 import { selectionMatchesSessionGroup } from '../../../lib/session-groups'
 import useSessionGroups from '../../../store/use-session-groups'
 import { PanelSection } from '../controls/panel-section'
 import { SegmentedControl } from '../controls/segmented-control'
+import { SelectControl } from '../controls/select-control'
 import { SliderControl } from '../controls/slider-control'
 import { resolveUniqueSelectionIds } from './homogeneous-selection'
 import {
   commitMultiNodeFields,
+  fieldTargetIds,
   fieldVisibleForAll,
   firstNumericFieldValue,
   firstVec3FieldValue,
@@ -32,8 +34,10 @@ import { getTypeDisplay } from './node-display'
 import { ParametricFieldControl } from './parametric-field-control'
 import { PanelWrapper } from './panel-wrapper'
 import { formatSelectionBreakdown } from './selection-breakdown'
+import { inspectorGroupDescriptor } from '../../../i18n/node-messages'
 
 export function MultiParametricInspector({ footer }: { footer?: React.ReactNode }) {
+  const i18n = usePascalI18n()
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const setSelection = useViewer((s) => s.setSelection)
   const nodeIds = useScene(
@@ -62,16 +66,14 @@ export function MultiParametricInspector({ footer }: { footer?: React.ReactNode
 
   if (nodeIds.length < 2 || !nodeType || !parametrics) return null
 
-  const display = getTypeDisplay(nodeType)
+  const display = getTypeDisplay(nodeType, i18n)
   const title = matchedGroup ? `${matchedGroup.label} · ${breakdown}` : breakdown || display.label
 
   return (
     <PanelWrapper footer={footer} icon={display.icon} onClose={handleClose} title={title} width={320}>
       {matchedGroup && (
         <div className="border-border/50 border-b 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.multiParametricInspector.labelSessionOnlyPlainClickReselects', message: '{label} (session only). Plain click reselects all members. Not saved with the project.', values: { label: matchedGroup.label } })}</div>
       )}
       {parametrics.groups.map((group, gi) => (
         <MultiGroupFields
@@ -81,13 +83,20 @@ export function MultiParametricInspector({ footer }: { footer?: React.ReactNode
           nodeIds={nodeIds}
           nodeType={nodeType}
           parametrics={parametrics}
-          title={group.label}
+          title={i18n._(inspectorGroupDescriptor(group.label))}
         >
           {hasKindControls ? (
             <MultiKindControls nodeIds={nodeIds} nodeType={nodeType} section={group.label} />
           ) : null}
         </MultiGroupFields>
       ))}
+      {hasKindControls ? (
+        <MultiKindSections
+          groupTitles={parametrics.groups.map((group) => group.label)}
+          nodeIds={nodeIds}
+          nodeType={nodeType}
+        />
+      ) : null}
       <div className="border-border/50 border-t p-3">
         <MultiSelectionActions />
       </div>
@@ -95,10 +104,20 @@ export function MultiParametricInspector({ footer }: { footer?: React.ReactNode
   )
 }
 
+function useMultiKindControls(nodeIds: AnyNodeId[], nodeType: AnyNode['type']) {
+  const nodes = useScene((s) => s.nodes)
+  return useMemo(() => {
+    const model = getNodePanelModel(nodeRegistry.get(nodeType))
+    if (!model?.multiControls) return []
+    const selection = nodeIds.flatMap((id) => (nodes[id] ? [nodes[id]!] : []))
+    return model.multiControls({ selection, nodes })
+  }, [nodeIds, nodeType, nodes])
+}
+
 /**
  * The kind's own multi-selection controls for one section (the wall's
- * Reference), from its panel model — the same segmented control the single
- * panel shows, mixed when the selection disagrees.
+ * Reference), from its panel model — the same control the single panel
+ * shows, mixed when the selection disagrees.
  */
 function MultiKindControls({
   nodeIds,
@@ -109,32 +128,84 @@ function MultiKindControls({
   nodeType: AnyNode['type']
   section: string
 }) {
-  const nodes = useScene((s) => s.nodes)
-  const controls = useMemo(() => {
-    const model = getNodePanelModel(nodeRegistry.get(nodeType))
-    if (!model?.multiControls) return []
-    const selection = nodeIds.flatMap((id) => (nodes[id] ? [nodes[id]!] : []))
-    return model.multiControls({ selection, nodes }).filter((control) => control.section === section)
-  }, [nodeIds, nodeType, nodes, section])
+  const controls = useMultiKindControls(nodeIds, nodeType).filter(
+    (control) => control.section === section,
+  )
   return (
     <>
       {controls.map((control) => (
-        <div className="flex flex-col gap-1" key={control.id}>
-          <div className="px-1 font-medium text-[10px] text-muted-foreground/80">
-            {control.label}
-          </div>
-          <SegmentedControl
-            mixed={control.value === null}
-            onChange={control.onChange}
-            options={control.options.map((option) => ({ ...option }))}
-            value={control.value ?? ''}
-          />
-        </div>
+        <MultiKindControlView control={control} key={control.id} />
+      ))}
+    </>
+  )
+}
+
+/** The kind's controls whose section is none of the parametrics groups, each section its own. */
+function MultiKindSections({
+  groupTitles,
+  nodeIds,
+  nodeType,
+}: {
+  groupTitles: readonly string[]
+  nodeIds: AnyNodeId[]
+  nodeType: AnyNode['type']
+}) {
+  const controls = useMultiKindControls(nodeIds, nodeType).filter(
+    (control) => !groupTitles.includes(control.section),
+  )
+  const sections = [...new Set(controls.map((control) => control.section))]
+  return (
+    <>
+      {sections.map((section) => (
+        <PanelSection key={section} title={section}>
+          {controls
+            .filter((control) => control.section === section)
+            .map((control) => (
+              <MultiKindControlView control={control} key={control.id} />
+            ))}
+        </PanelSection>
       ))}
     </>
   )
 }
 
+function MultiKindControlView({ control }: { control: MultiPanelControl }) {
+  if (control.kind === 'readout') {
+    return (
+      <div className="flex items-center justify-between gap-2 px-2 py-1.5">
+        <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
+          {control.label}
+        </span>
+        <span className="truncate text-[11px] text-muted-foreground tabular-nums">
+          {control.detail ? `${control.value} · ${control.detail}` : control.value}
+        </span>
+      </div>
+    )
+  }
+  if (control.kind === 'select') {
+    return (
+      <SelectControl
+        label={control.label}
+        mixed={control.value === null}
+        onChange={control.onChange}
+        options={control.options.map((option) => ({ ...option }))}
+        value={control.value ?? ''}
+      />
+    )
+  }
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="px-1 font-medium text-[10px] text-muted-foreground/80">{control.label}</div>
+      <SegmentedControl
+        mixed={control.value === null}
+        onChange={control.onChange}
+        options={control.options.map((option) => ({ ...option }))}
+        value={control.value ?? ''}
+      />
+    </div>
+  )
+}
+
 function MultiGroupFields({
   defaultExpanded,
   title,
@@ -154,9 +225,16 @@ function MultiGroupFields({
 }) {
   const genericFields = fields.filter((field) => field.kind !== 'custom')
   const anyVisible = useScene((s) =>
-    genericFields.some((field) =>
-      fieldVisibleForAll(nodeIds, (field as { visibleIf?: (n: AnyNode) => boolean }).visibleIf, s.nodes),
-    ),
+    genericFields.some((field) => {
+      const { visibleIf, appliesTo } = field as {
+        visibleIf?: (n: AnyNode) => boolean
+        appliesTo?: (n: AnyNode) => boolean
+      }
+      return (
+        fieldVisibleForAll(nodeIds, visibleIf, s.nodes) &&
+        fieldTargetIds(nodeIds, appliesTo, s.nodes).length > 0
+      )
+    }),
   )
   if ((genericFields.length === 0 || !anyVisible) && !children) return null
   return (
@@ -195,7 +273,7 @@ function MultiGroupFields({
 
 function MultiFieldRenderer({
   field,
-  nodeIds,
+  nodeIds: selectedIds,
   parametrics,
 }: {
   field: ParamField<AnyNode>
@@ -203,11 +281,21 @@ function MultiFieldRenderer({
   parametrics: ParametricDescriptor<AnyNode>
 }) {
   const key = String(field.key)
+  // A field that names the nodes it `appliesTo` reads and edits only those.
+  const appliesTo = (field as { appliesTo?: (n: AnyNode) => boolean }).appliesTo
+  const nodeIds = useScene(
+    useShallow((s) => fieldTargetIds(selectedIds, appliesTo, s.nodes)),
+  )
   const visible = useScene((s) =>
     fieldVisibleForAll(nodeIds, (field as { visibleIf?: (n: AnyNode) => boolean }).visibleIf, s.nodes),
   )
-  const reduced = useScene(useShallow((s) => reduceFieldValue(nodeIds, key, s.nodes)))
-  const numericOrigin = useScene((s) => firstNumericFieldValue(nodeIds, key, s.nodes))
+  const fallback = field.kind === 'number' ? field.default : undefined
+  const reduced = useScene(
+    useShallow((s) => reduceFieldValue(nodeIds, key, s.nodes, fallback)),
+  )
+  const numericOrigin = useScene((s) =>
+    firstNumericFieldValue(nodeIds, key, s.nodes, fallback ?? 0),
+  )
   const vecOrigin = useScene(useShallow((s) => firstVec3FieldValue(nodeIds, key, s.nodes)))
 
   const preview = useCallback(
@@ -223,7 +311,7 @@ function MultiFieldRenderer({
     [nodeIds, parametrics],
   )
 
-  if (!visible) return null
+  if (!visible || nodeIds.length === 0) return null
 
   if (field.kind === 'vec3') {
     return (