@pascal-app/editor 1.0.0-beta.5 → 1.0.1

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

@@ -0,0 +1,266 @@
+'use client'
+
+import {
+  type AnyNode,
+  type AnyNodeId,
+  nodeRegistry,
+  type ParamField,
+  type ParametricDescriptor,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useCallback, useMemo } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { selectionMatchesSessionGroup } from '../../../lib/session-groups'
+import useSessionGroups from '../../../store/use-session-groups'
+import { PanelSection } from '../controls/panel-section'
+import { SliderControl } from '../controls/slider-control'
+import { resolveUniqueSelectionIds } from './homogeneous-selection'
+import {
+  commitMultiNodeFields,
+  fieldVisibleForAll,
+  firstNumericFieldValue,
+  firstVec3FieldValue,
+  previewMultiNodeFields,
+  reduceFieldValue,
+} from './multi-field-value'
+import { MultiHeightModeField } from './multi-height-mode'
+import { MultiSelectionActions } from './multi-selection-panel'
+import { getTypeDisplay } from './node-display'
+import { ParametricFieldControl } from './parametric-field-control'
+import { PanelWrapper } from './panel-wrapper'
+import { formatSelectionBreakdown } from './selection-breakdown'
+
+export function MultiParametricInspector({ footer }: { footer?: React.ReactNode }) {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const setSelection = useViewer((s) => s.setSelection)
+  const nodeIds = useScene(
+    useShallow((s) => resolveUniqueSelectionIds(selectedIds, s.nodes)),
+  )
+  const nodeType = useScene((s) => {
+    const first = nodeIds[0] ? s.nodes[nodeIds[0]] : undefined
+    return first?.type ?? null
+  })
+  const breakdown = useScene((s) =>
+    formatSelectionBreakdown(nodeIds.map((id) => s.nodes[id]?.type)),
+  )
+  const sessionGroups = useSessionGroups((s) => s.groups)
+  const matchedGroup = useMemo(
+    () => selectionMatchesSessionGroup(sessionGroups, selectedIds),
+    [sessionGroups, selectedIds],
+  )
+
+  const def = nodeType ? nodeRegistry.get(nodeType) : undefined
+  const parametrics = def?.parametrics as ParametricDescriptor<AnyNode> | undefined
+
+  const handleClose = useCallback(() => {
+    setSelection({ selectedIds: [] })
+  }, [setSelection])
+
+  if (nodeIds.length < 2 || !nodeType || !parametrics) return null
+
+  const display = getTypeDisplay(nodeType)
+  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>
+      )}
+      {parametrics.groups.map((group, gi) => (
+        <MultiGroupFields
+          defaultExpanded={group.defaultExpanded}
+          fields={group.fields as ParamField<AnyNode>[]}
+          key={`${nodeType}-${group.label}-${gi}`}
+          nodeIds={nodeIds}
+          nodeType={nodeType}
+          parametrics={parametrics}
+          title={group.label}
+        />
+      ))}
+      <div className="border-border/50 border-t p-3">
+        <MultiSelectionActions />
+      </div>
+    </PanelWrapper>
+  )
+}
+
+function MultiGroupFields({
+  defaultExpanded,
+  title,
+  fields,
+  nodeIds,
+  nodeType,
+  parametrics,
+}: {
+  defaultExpanded?: boolean
+  title: string
+  fields: ParamField<AnyNode>[]
+  nodeIds: AnyNodeId[]
+  nodeType: AnyNode['type']
+  parametrics: ParametricDescriptor<AnyNode>
+}) {
+  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),
+    ),
+  )
+  if (genericFields.length === 0 || !anyVisible) return null
+  return (
+    <PanelSection defaultExpanded={defaultExpanded} title={title}>
+      {genericFields.map((field, fi) => {
+        if (
+          String(field.key) === 'height' &&
+          (nodeType === 'wall' || nodeType === 'ceiling') &&
+          field.kind === 'number'
+        ) {
+          return (
+            <MultiHeightModeField
+              key={`field-${fi}-height-mode`}
+              max={field.max}
+              min={field.min}
+              nodeIds={nodeIds}
+              nodeType={nodeType}
+              parametrics={parametrics}
+              step={field.step}
+            />
+          )
+        }
+        return (
+          <MultiFieldRenderer
+            field={field}
+            key={`field-${fi}-${String(field.key)}`}
+            nodeIds={nodeIds}
+            parametrics={parametrics}
+          />
+        )
+      })}
+    </PanelSection>
+  )
+}
+
+function MultiFieldRenderer({
+  field,
+  nodeIds,
+  parametrics,
+}: {
+  field: ParamField<AnyNode>
+  nodeIds: AnyNodeId[]
+  parametrics: ParametricDescriptor<AnyNode>
+}) {
+  const key = String(field.key)
+  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 vecOrigin = useScene(useShallow((s) => firstVec3FieldValue(nodeIds, key, s.nodes)))
+
+  const preview = useCallback(
+    (patch: Partial<AnyNode>) => {
+      previewMultiNodeFields(nodeIds.map((id) => [id, patch] as const))
+    },
+    [nodeIds],
+  )
+  const commit = useCallback(
+    (patch: Partial<AnyNode>) => {
+      commitMultiNodeFields(nodeIds, () => patch, parametrics)
+    },
+    [nodeIds, parametrics],
+  )
+
+  if (!visible) return null
+
+  if (field.kind === 'vec3') {
+    return (
+      <MultiVec3Field
+        fieldKey={key}
+        mixed={reduced.kind === 'mixed'}
+        nodeIds={nodeIds}
+        origin={vecOrigin}
+        parametrics={parametrics}
+        value={reduced.kind === 'same' && Array.isArray(reduced.value) ? (reduced.value as [number, number, number]) : vecOrigin}
+      />
+    )
+  }
+
+  const value =
+    reduced.kind === 'same' ? reduced.value : field.kind === 'number' ? numericOrigin : undefined
+
+  return (
+    <ParametricFieldControl
+      field={field}
+      mixed={reduced.kind === 'mixed'}
+      onChange={field.kind === 'number' ? preview : commit}
+      onCommit={field.kind === 'number' ? commit : undefined}
+      value={value}
+    />
+  )
+}
+
+function MultiVec3Field({
+  fieldKey,
+  mixed,
+  nodeIds,
+  origin,
+  parametrics,
+  value,
+}: {
+  fieldKey: string
+  mixed: boolean
+  nodeIds: AnyNodeId[]
+  origin: [number, number, number]
+  parametrics: ParametricDescriptor<AnyNode>
+  value: [number, number, number]
+}) {
+  const axes: Array<{ label: string; index: 0 | 1 | 2 }> = [
+    { label: 'X', index: 0 },
+    { label: 'Y', index: 1 },
+    { label: 'Z', index: 2 },
+  ]
+  return (
+    <>
+      {axes.map(({ label, index }) => {
+        const axisValue = value[index] ?? origin[index] ?? 0
+        const patchAxis = (next: number): Array<readonly [AnyNodeId, Partial<AnyNode>]> => {
+          const nodes = useScene.getState().nodes
+          return nodeIds.flatMap((id) => {
+            const node = nodes[id]
+            if (!node) return []
+            const current = (node as Record<string, unknown>)[fieldKey]
+            const nextVec = (
+              Array.isArray(current) && current.length >= 3 ? [...current] : [...origin]
+            ) as [number, number, number]
+            nextVec[index] = next
+            return [[id, { [fieldKey]: nextVec } as Partial<AnyNode>] as const]
+          })
+        }
+        return (
+          <SliderControl
+            key={`${fieldKey}-${label}`}
+            label={label}
+            mixed={mixed}
+            onChange={(next) => previewMultiNodeFields(patchAxis(next))}
+            onCommit={(next) => {
+              const entries = patchAxis(next)
+              commitMultiNodeFields(
+                nodeIds,
+                (node) => entries.find(([id]) => id === node.id)?.[1] ?? {},
+                parametrics,
+              )
+            }}
+            precision={2}
+            restoreOnCommit={false}
+            step={0.05}
+            unit="m"
+            value={axisValue}
+          />
+        )
+      })}
+    </>
+  )
+}

package/src/components/ui/panels/multi-selection-panel.tsx

@@ -18,6 +18,53 @@ import { ActionButton, ActionGroup } from '../controls/action-button'
 import { PanelWrapper } from './panel-wrapper'
 import { formatSelectionBreakdown } from './selection-breakdown'
 
+export function MultiSelectionActions() {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const sessionGroups = useSessionGroups((s) => s.groups)
+  const sceneNodes = useScene((s) => s.nodes)
+  const liveIds = useMemo(() => new Set(Object.keys(sceneNodes)), [sceneNodes])
+  const showGroup = useMemo(
+    () => canCreateSessionGroup(sessionGroups, selectedIds, liveIds),
+    [sessionGroups, selectedIds, liveIds],
+  )
+  const showUngroup = useMemo(
+    () => selectionIntersectsSessionGroup(sessionGroups, selectedIds, liveIds),
+    [sessionGroups, selectedIds, liveIds],
+  )
+
+  return (
+    <ActionGroup>
+      {showGroup && (
+        <ActionButton
+          icon={<Group className="h-4 w-4" />}
+          label="Group"
+          onClick={() => groupCurrentSelection()}
+          title="Group (Ctrl/Cmd+G)"
+        />
+      )}
+      {showUngroup && (
+        <ActionButton
+          icon={<Ungroup className="h-4 w-4" />}
+          label="Ungroup"
+          onClick={() => ungroupCurrentSelection()}
+          title="Ungroup (Ctrl/Cmd+Shift+G)"
+        />
+      )}
+      <ActionButton
+        icon={<Copy className="h-4 w-4" />}
+        label="Duplicate"
+        onClick={() => duplicateSelectionAndPickUp()}
+      />
+      <ActionButton
+        className="border-red-500/40 text-red-200 hover:bg-red-500/15"
+        icon={<Trash2 className="h-4 w-4 text-red-400" />}
+        label="Delete"
+        onClick={() => deleteSelection()}
+      />
+    </ActionGroup>
+  )
+}
+
 /**
  * Docked multi-selection panel. Includes Group / Ungroup for session selection sets.
  */
@@ -34,14 +81,6 @@ export function MultiSelectionPanel({ footer }: { footer?: React.ReactNode }) {
     () => selectionMatchesSessionGroup(sessionGroups, selectedIds, liveIds),
     [sessionGroups, selectedIds, liveIds],
   )
-  const showGroup = useMemo(
-    () => canCreateSessionGroup(sessionGroups, selectedIds, liveIds),
-    [sessionGroups, selectedIds, liveIds],
-  )
-  const showUngroup = useMemo(
-    () => selectionIntersectsSessionGroup(sessionGroups, selectedIds, liveIds),
-    [sessionGroups, selectedIds, liveIds],
-  )
 
   return (
     <PanelWrapper
@@ -63,35 +102,7 @@ export function MultiSelectionPanel({ footer }: { footer?: React.ReactNode }) {
         </div>
       )}
       <div className="border-border/50 border-t p-3">
-        <ActionGroup>
-          {showGroup && (
-            <ActionButton
-              icon={<Group className="h-4 w-4" />}
-              label="Group"
-              onClick={() => groupCurrentSelection()}
-              title="Group (Ctrl/Cmd+G)"
-            />
-          )}
-          {showUngroup && (
-            <ActionButton
-              icon={<Ungroup className="h-4 w-4" />}
-              label="Ungroup"
-              onClick={() => ungroupCurrentSelection()}
-              title="Ungroup (Ctrl/Cmd+Shift+G)"
-            />
-          )}
-          <ActionButton
-            icon={<Copy className="h-4 w-4" />}
-            label="Duplicate"
-            onClick={() => duplicateSelectionAndPickUp()}
-          />
-          <ActionButton
-            className="border-red-500/40 text-red-200 hover:bg-red-500/15"
-            icon={<Trash2 className="h-4 w-4" />}
-            label="Delete"
-            onClick={() => deleteSelection()}
-          />
-        </ActionGroup>
+        <MultiSelectionActions />
       </div>
     </PanelWrapper>
   )

package/src/components/ui/panels/node-display.ts

@@ -23,6 +23,10 @@ const TYPE_DEFAULTS: Record<string, NodeDisplay> = {
   guide: { icon: '/icons/floorplan.webp', label: 'Guide image' },
 }
 
+export function getTypeDisplay(type: string): NodeDisplay {
+  return TYPE_DEFAULTS[type] ?? { icon: '/icons/select.webp', label: type }
+}
+
 export function getNodeDisplay(node: AnyNode | null | undefined): NodeDisplay {
   if (!node) return { icon: '/icons/select.webp', label: 'Selection' }
   const fallback = TYPE_DEFAULTS[node.type] ?? { icon: '/icons/select.webp', label: node.type }

package/src/components/ui/panels/panel-manager.tsx

@@ -24,15 +24,20 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback, useEffect, useState } from 'react'
 import { useIsMobile } from '../../../hooks/use-mobile'
+import { shouldShowEditingControls } from '../../../lib/interaction/overlay-policy'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
+import { deleteSelection, duplicateSelectionAndPickUp, startGroupPickUp } from '../../editor/group-actions'
+import { resolveHomogeneousSelection } from './homogeneous-selection'
 import { MobilePanelSheet } from './mobile-panel-sheet'
 import { MobileSelectionBar } from './mobile-selection-bar'
+import { MultiParametricInspector } from './multi-parametric-inspector'
 import { MultiSelectionPanel } from './multi-selection-panel'
-import { getNodeDisplay } from './node-display'
+import { getNodeDisplay, getTypeDisplay } from './node-display'
 import { resetDesktopInspectorCollapsed } from './panel-wrapper'
 import { ParametricInspector } from './parametric-inspector'
 import { ReferencePanel } from './reference-panel'
+import { formatSelectionBreakdown } from './selection-breakdown'
 
 type MovableNode =
   | ItemNode
@@ -169,6 +174,46 @@ function MobilePanelLayer({
   )
 }
 
+function MobileMultiPanelLayer({
+  breakdown,
+  panel,
+  type,
+}: {
+  breakdown: string
+  panel: React.ReactNode
+  type: string | null
+}) {
+  const [isSheetOpen, setIsSheetOpen] = useState(false)
+  const display = type ? getTypeDisplay(type) : { icon: '/icons/select.webp', label: 'Selection' }
+  const title = breakdown || display.label
+
+  useEffect(() => {
+    setIsSheetOpen(false)
+  }, [breakdown])
+
+  return (
+    <>
+      <MobileSelectionBar
+        icon={display.icon}
+        label={title}
+        node={null}
+        onDelete={() => deleteSelection()}
+        onDuplicate={() => duplicateSelectionAndPickUp()}
+        onEdit={() => setIsSheetOpen((v) => !v)}
+        onMove={() => startGroupPickUp()}
+      />
+      <MobilePanelSheet
+        icon={display.icon}
+        onClose={() => setIsSheetOpen(false)}
+        open={isSheetOpen}
+        title={title}
+      >
+        {panel}
+      </MobilePanelSheet>
+    </>
+  )
+}
+
 export function PanelManager({
   inspectorFooter,
   multiSelectionFooter,
@@ -181,6 +226,7 @@ export function PanelManager({
   const selectedZoneId = useViewer((s) => s.selection.zoneId)
   const setSelection = useViewer((s) => s.setSelection)
   const selectedReferenceId = useEditor((s) => s.selectedReferenceId)
+  const readOnly = useScene((s) => s.readOnly)
   // Only subscribe to the *type* of the single-selected node — string primitive
   // so we don't re-render on unrelated scene mutations.
   const selectedNodeType = useScene((s) => {
@@ -193,6 +239,14 @@ export function PanelManager({
     const id = selectedIds[0]
     return id ? (s.nodes[id as AnyNodeId] ?? null) : null
   })
+  const homogeneousType = useScene((s) =>
+    selectedIds.length > 1 ? resolveHomogeneousSelection(selectedIds, s.nodes) : null,
+  )
+  const multiBreakdown = useScene((s) =>
+    selectedIds.length > 1
+      ? formatSelectionBreakdown(selectedIds.map((id) => s.nodes[id as AnyNodeId]?.type))
+      : '',
+  )
 
   // Node and reference selection are mutually exclusive: selecting a guide
   // clears the node selection (handleGuideSelect), but node selection never
@@ -215,10 +269,27 @@ export function PanelManager({
     }
   }, [hasAnySelection])
 
+  if (!shouldShowEditingControls(readOnly)) return null
+
   if (isMobile) {
     if (selectedReferenceId) {
       return <MobilePanelLayer isReference={true} node={null} panel={<ReferencePanel />} />
     }
+    if (selectedIds.length > 1) {
+      return (
+        <MobileMultiPanelLayer
+          breakdown={multiBreakdown}
+          panel={
+            homogeneousType ? (
+              <MultiParametricInspector footer={multiSelectionFooter} />
+            ) : (
+              <MultiSelectionPanel footer={multiSelectionFooter} />
+            )
+          }
+          type={homogeneousType}
+        />
+      )
+    }
     return (
       <MobilePanelLayer
         isReference={false}
@@ -244,9 +315,12 @@ export function PanelManager({
     )
   }
 
-  // Multi-selection: compact docked panel (desktop only — the mobile branch
-  // above keeps today's behavior and renders nothing for multi-selections).
+  // Multi-selection: parametric inspector when every resolved id shares a type,
+  // otherwise the actions-only panel. Mobile uses the same panels in a sheet.
   if (selectedIds.length > 1) {
+    if (homogeneousType) {
+      return <MultiParametricInspector footer={multiSelectionFooter} />
+    }
     return <MultiSelectionPanel footer={multiSelectionFooter} />
   }
 

package/src/components/ui/panels/parametric-field-control.tsx

@@ -0,0 +1,173 @@
+'use client'
+
+import type { AnyNode, ParamField } from '@pascal-app/core'
+import { SegmentedControl } from '../controls/segmented-control'
+import { SliderControl } from '../controls/slider-control'
+import { ToggleControl } from '../controls/toggle-control'
+import { precisionForStep, prettifyEnumValue, prettifyKey } from './parametric-field-utils'
+
+interface ParametricFieldControlProps {
+  field: ParamField<AnyNode>
+  value: unknown
+  mixed?: boolean
+  onChange: (patch: Partial<AnyNode>) => void
+  onCommit?: (patch: Partial<AnyNode>) => void
+}
+
+export function ParametricFieldControl({
+  field,
+  value,
+  mixed = false,
+  onChange,
+  onCommit,
+}: ParametricFieldControlProps) {
+  const key = String(field.key)
+
+  switch (field.kind) {
+    case 'number': {
+      const num = typeof value === 'number' ? value : 0
+      const step = field.step ?? 0.01
+      const precision = precisionForStep(step)
+      return (
+        <SliderControl
+          label={prettifyKey(key)}
+          max={field.max}
+          min={field.min}
+          mixed={mixed}
+          onChange={(next) => onChange({ [key]: next } as Partial<AnyNode>)}
+          onCommit={onCommit ? (next) => onCommit({ [key]: next } as Partial<AnyNode>) : undefined}
+          precision={precision}
+          restoreOnCommit={!onCommit}
+          step={step}
+          unit={field.unit ?? ''}
+          value={num}
+        />
+      )
+    }
+
+    case 'boolean': {
+      const checked = !mixed && value === true
+      return (
+        <ToggleControl
+          checked={checked}
+          label={prettifyKey(key)}
+          mixed={mixed}
+          onChange={(next) => {
+            const patch = { [key]: next } as Partial<AnyNode>
+            onChange(patch)
+            onCommit?.(patch)
+          }}
+        />
+      )
+    }
+
+    case 'enum': {
+      const str = typeof value === 'string' ? value : (field.options[0] ?? '')
+      const apply = (next: string) => {
+        const patch = { [key]: next } as Partial<AnyNode>
+        onChange(patch)
+        onCommit?.(patch)
+      }
+      if (field.display === 'segmented') {
+        return (
+          <SegmentedControl
+            mixed={mixed}
+            onChange={apply}
+            options={field.options.map((opt) => ({ label: prettifyEnumValue(opt), value: opt }))}
+            value={str}
+          />
+        )
+      }
+      return (
+        <div className="flex items-center justify-between px-3 py-2">
+          <span className="text-foreground/80 text-xs">{prettifyKey(key)}</span>
+          <select
+            className="rounded-md border border-border/50 bg-[#2C2C2E] px-2 py-1 text-foreground text-xs focus:outline-none focus:ring-1 focus:ring-foreground/30"
+            onChange={(e) => apply(e.target.value)}
+            value={mixed ? '' : str}
+          >
+            {mixed && (
+              <option disabled value="">
+                Mixed
+              </option>
+            )}
+            {field.options.map((opt) => (
+              <option key={opt} value={opt}>
+                {prettifyEnumValue(opt)}
+              </option>
+            ))}
+          </select>
+        </div>
+      )
+    }
+
+    case 'color': {
+      const str = typeof value === 'string' ? value : '#888888'
+      const apply = (next: string) => {
+        const patch = { [key]: next } as Partial<AnyNode>
+        onChange(patch)
+        onCommit?.(patch)
+      }
+      return (
+        <div className="flex items-center justify-between px-3 py-2">
+          <span className="text-foreground/80 text-xs">{prettifyKey(key)}</span>
+          <div className="flex items-center gap-2">
+            <input
+              className="h-6 w-8 cursor-pointer rounded border border-border/50 bg-transparent"
+              onChange={(e) => apply(e.target.value)}
+              type="color"
+              value={str}
+            />
+            <input
+              className="w-20 rounded-md border border-border/50 bg-[#2C2C2E] px-2 py-1 text-foreground text-xs focus:outline-none focus:ring-1 focus:ring-foreground/30"
+              onChange={(e) => apply(e.target.value)}
+              type="text"
+              value={mixed ? 'Mixed' : str}
+            />
+          </div>
+        </div>
+      )
+    }
+
+    case 'vec3': {
+      const v =
+        Array.isArray(value) && value.length >= 3
+          ? (value as [number, number, number])
+          : ([0, 0, 0] as [number, number, number])
+      const axes: Array<{ label: string; index: 0 | 1 | 2 }> = [
+        { label: 'X', index: 0 },
+        { label: 'Y', index: 1 },
+        { label: 'Z', index: 2 },
+      ]
+      return (
+        <>
+          {axes.map(({ label, index }) => {
+            const axisValue = v[index] ?? 0
+            const apply = (next: number): Partial<AnyNode> => {
+              const updated = [...v] as [number, number, number]
+              updated[index] = next
+              return { [key]: updated } as Partial<AnyNode>
+            }
+            return (
+              <SliderControl
+                key={`${key}-${label}`}
+                label={label}
+                mixed={mixed}
+                onChange={(next) => onChange(apply(next))}
+                onCommit={onCommit ? (next) => onCommit(apply(next)) : undefined}
+                precision={2}
+                restoreOnCommit={!onCommit}
+                step={0.05}
+                unit="m"
+                value={axisValue}
+              />
+            )
+          })}
+        </>
+      )
+    }
+
+    default:
+      return null
+  }
+}