@pascal-app/editor 1.0.3 → 1.0.5

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

@@ -2,10 +2,10 @@
 
 import { X } from 'lucide-react'
 import { AnimatePresence, motion } from 'motion/react'
-import Image from 'next/image'
 import { type ReactNode, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import useEditor from '../../../store/use-editor'
+import { NodeIconImage } from '../node-icon-image'
 
 interface MobilePanelSheetProps {
   open: boolean
@@ -56,7 +56,7 @@ export function MobilePanelSheet({ open, onClose, icon, title, children }: Mobil
       {open && (
         <motion.div
           animate={{ y: 0 }}
-          className="dark fixed right-0 bottom-0 left-0 z-[60] flex flex-col overflow-hidden rounded-t-2xl bg-sidebar text-sidebar-foreground shadow-[0_-8px_24px_rgba(0,0,0,0.24)]"
+          className="fixed right-0 bottom-0 left-0 z-[60] flex flex-col overflow-hidden rounded-t-2xl bg-sidebar text-sidebar-foreground shadow-[0_-8px_24px_rgba(0,0,0,0.24)]"
           drag="y"
           dragConstraints={{ top: 0, bottom: 0 }}
           dragElastic={{ top: 0, bottom: 0.4 }}
@@ -75,7 +75,7 @@ export function MobilePanelSheet({ open, onClose, icon, title, children }: Mobil
           <div className="flex shrink-0 items-center justify-between border-border/50 border-b px-3 pt-1 pb-3">
             <div className="flex min-w-0 items-center gap-2">
               {icon && (
-                <Image
+                <NodeIconImage
                   alt=""
                   className="shrink-0 object-contain"
                   height={18}
@@ -89,7 +89,7 @@ export function MobilePanelSheet({ open, onClose, icon, title, children }: Mobil
             </div>
             <button
               aria-label="Close"
-              className="flex h-8 w-8 items-center justify-center rounded-md bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-[#3e3e3e] hover:text-foreground"
+              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

@@ -2,9 +2,9 @@
 
 import type { AnyNode } from '@pascal-app/core'
 import { Copy, Move, SlidersHorizontal, Trash2 } from 'lucide-react'
-import Image from 'next/image'
 import type { MouseEventHandler } from 'react'
 import { cn } from '../../../lib/utils'
+import { NodeIconImage } from '../node-icon-image'
 import { getNodeDisplay } from './node-display'
 
 interface MobileSelectionBarProps {
@@ -18,7 +18,7 @@ interface MobileSelectionBarProps {
 }
 
 const ACTION_BTN =
-  'flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-white/8 hover:text-foreground'
+  'flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-black/5 dark:hover:bg-white/8 hover:text-foreground'
 
 export function MobileSelectionBar({
   node,
@@ -40,12 +40,12 @@ export function MobileSelectionBar({
       <button
         aria-label={`Edit ${resolvedLabel}`}
         className={cn(
-          'flex min-w-0 flex-1 items-center gap-2 rounded-lg px-2 text-left transition-colors hover:bg-white/8',
+          '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',
         )}
         onClick={onEdit}
         type="button"
       >
-        <Image
+        <NodeIconImage
           alt=""
           className="shrink-0 rounded object-contain"
           height={20}
@@ -80,7 +80,10 @@ export function MobileSelectionBar({
         </button>
         <button
           aria-label="Delete"
-          className={cn(ACTION_BTN, 'hover:bg-red-500/15 hover:text-red-400')}
+          className={cn(
+            ACTION_BTN,
+            'hover:bg-red-500/15 hover:text-red-600 dark:hover:bg-red-500/15 dark:hover:text-red-400',
+          )}
           onClick={(e) => {
             stop(e)
             onDelete()

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

@@ -5,6 +5,9 @@ import {
   BuildingNode,
   clearSceneHistory,
   LevelNode,
+  planStairFlightHeightEdit,
+  StairNode,
+  StairSegmentNode,
   useLiveNodeOverrides,
   useScene,
   WallNode,
@@ -124,9 +127,7 @@ describe('buildMultiNodePatches', () => {
       nodes,
       {
         derive: (next) => ({ thickness: (next as { height: number }).height / 10 }),
-        reconcile: (prev) => [
-          { id: `${prev.id}_follow` as AnyNodeId, data: { height: 4 } },
-        ],
+        reconcile: (prev) => [{ id: `${prev.id}_follow` as AnyNodeId, data: { height: 4 } }],
       },
     )
     expect(patches).toEqual([
@@ -207,3 +208,25 @@ describe('commitMultiNodeFields', () => {
     expect((useScene.getState().nodes[WALL_C] as { height?: number }).height).toBe(2.7)
   })
 })
+
+test('multi-flight edits reconcile their parent from the complete proposed scene', () => {
+  const first = StairSegmentNode.parse({ height: 1 })
+  const second = StairSegmentNode.parse({ height: 3 })
+  const stair = StairNode.parse({ totalRise: 4, children: [first.id, second.id] })
+  first.parentId = stair.id
+  second.parentId = stair.id
+  const nodes: Record<string, AnyNode> = Object.fromEntries(
+    [stair, first, second].map((node) => [node.id, node]),
+  )
+  const patches = buildMultiNodePatches([first.id, second.id], () => ({ height: 2 }), nodes, {
+    reconcile: (_prev, next, proposed) =>
+      next.type === 'stair-segment'
+        ? planStairFlightHeightEdit(next, next.height, proposed!).slice(1)
+        : [],
+  })
+  const result = { ...nodes }
+  for (const patch of patches) result[patch.id] = { ...result[patch.id], ...patch.data } as AnyNode
+  expect((result[first.id] as StairSegmentNode).height).toBe(2)
+  expect((result[second.id] as StairSegmentNode).height).toBe(2)
+  expect((result[stair.id] as StairNode).totalRise).toBe(4)
+})

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

@@ -125,9 +125,12 @@ export function buildMultiNodePatches(
       patch = { ...patch, ...parametrics.derive(next, patch, node) } as Partial<AnyNode>
     }
     updates.push({ id, data: patch })
-    if (parametrics?.reconcile) {
-      const next = { ...node, ...patch } as AnyNode
-      followUps.push(...parametrics.reconcile(node, next))
+  }
+  if (parametrics?.reconcile) {
+    const proposed = { ...nodes }
+    for (const { id, data } of updates) proposed[id] = { ...nodes[id], ...data } as AnyNode
+    for (const { id } of updates) {
+      followUps.push(...parametrics.reconcile(nodes[id]!, proposed[id]!, proposed))
     }
   }
   return [...updates, ...followUps]

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

@@ -11,9 +11,11 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback, useMemo } from 'react'
 import { useShallow } from 'zustand/react/shallow'
+import { getNodePanelModel } 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 { SliderControl } from '../controls/slider-control'
 import { resolveUniqueSelectionIds } from './homogeneous-selection'
 import {
@@ -52,6 +54,7 @@ export function MultiParametricInspector({ footer }: { footer?: React.ReactNode
 
   const def = nodeType ? nodeRegistry.get(nodeType) : undefined
   const parametrics = def?.parametrics as ParametricDescriptor<AnyNode> | undefined
+  const hasKindControls = !!getNodePanelModel(def)?.multiControls
 
   const handleClose = useCallback(() => {
     setSelection({ selectedIds: [] })
@@ -79,7 +82,11 @@ export function MultiParametricInspector({ footer }: { footer?: React.ReactNode
           nodeType={nodeType}
           parametrics={parametrics}
           title={group.label}
-        />
+        >
+          {hasKindControls ? (
+            <MultiKindControls nodeIds={nodeIds} nodeType={nodeType} section={group.label} />
+          ) : null}
+        </MultiGroupFields>
       ))}
       <div className="border-border/50 border-t p-3">
         <MultiSelectionActions />
@@ -88,6 +95,46 @@ export function MultiParametricInspector({ footer }: { footer?: React.ReactNode
   )
 }
 
+/**
+ * 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.
+ */
+function MultiKindControls({
+  nodeIds,
+  nodeType,
+  section,
+}: {
+  nodeIds: AnyNodeId[]
+  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])
+  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>
+      ))}
+    </>
+  )
+}
+
 function MultiGroupFields({
   defaultExpanded,
   title,
@@ -95,7 +142,9 @@ function MultiGroupFields({
   nodeIds,
   nodeType,
   parametrics,
+  children,
 }: {
+  children?: React.ReactNode
   defaultExpanded?: boolean
   title: string
   fields: ParamField<AnyNode>[]
@@ -109,7 +158,7 @@ function MultiGroupFields({
       fieldVisibleForAll(nodeIds, (field as { visibleIf?: (n: AnyNode) => boolean }).visibleIf, s.nodes),
     ),
   )
-  if (genericFields.length === 0 || !anyVisible) return null
+  if ((genericFields.length === 0 || !anyVisible) && !children) return null
   return (
     <PanelSection defaultExpanded={defaultExpanded} title={title}>
       {genericFields.map((field, fi) => {
@@ -139,6 +188,7 @@ function MultiGroupFields({
           />
         )
       })}
+      {children}
     </PanelSection>
   )
 }

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

@@ -1,10 +1,22 @@
 'use client'
 
-import { type AnyNodeId, useScene } from '@pascal-app/core'
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type BuildingNode,
+  resolveBuildingForLevel,
+  runAsSingleSceneHistoryStep,
+  useScene,
+} from '@pascal-app/core'
+import { unwrapCorner, windowMergeOffer } from '@pascal-app/core/building'
 import { useViewer } from '@pascal-app/viewer'
-import { Copy, Group, Trash2, Ungroup } from 'lucide-react'
+import { Building2, Copy, Group, Merge, Split, Trash2, Ungroup } from 'lucide-react'
 import { useMemo } from 'react'
 import { deleteSelection, duplicateSelectionAndPickUp } from '../../editor/group-actions'
+import { formatLinearMeasurement } from '../../../lib/measurements'
+import { triggerSFX } from '../../../lib/sfx-bus'
+import { writeWindowChanges } from '../../../lib/window-changes'
+import { collectSelectableCandidateIds } from '../../tools/select/select-candidates'
 import {
   canCreateSessionGroup,
   selectionIntersectsSessionGroup,
@@ -18,6 +30,135 @@ import { ActionButton, ActionGroup } from '../controls/action-button'
 import { PanelWrapper } from './panel-wrapper'
 import { formatSelectionBreakdown } from './selection-breakdown'
 
+/** The building holding the level, when the selection is everything selectable on it. */
+function useWholeLevelBuildingId(selectedIds: readonly string[]) {
+  const levelId = useViewer((s) => s.selection.levelId)
+  const nodes = useScene((s) => s.nodes)
+  return useMemo(() => {
+    if (!levelId) return null
+    const candidates = collectSelectableCandidateIds()
+    if (candidates.length === 0) return null
+    const selected = new Set(selectedIds)
+    if (!candidates.every((id) => selected.has(id))) return null
+    return resolveBuildingForLevel(levelId as AnyNodeId, nodes) ?? null
+  }, [levelId, nodes, selectedIds])
+}
+
+/** The building's own selection (no level): its floating pill offers the whole-building Move. */
+function selectBuilding(buildingId: AnyNodeId) {
+  useViewer.getState().setSelection({ buildingId: buildingId as BuildingNode['id'] })
+}
+
+/**
+ * Why two selected windows will not merge, for the person who selected them: the refusal's own
+ * message is the agents' (node ids, metres), so the panel words its code, in the editor's units.
+ */
+function mergeRefusalNote(
+  refusal: { code: string; details: Record<string, unknown> },
+  nodes: Record<string, AnyNode>,
+  length: (meters: number) => string,
+): string {
+  const { blockingId, limit } = refusal.details as { blockingId?: string; limit?: number }
+  const reach = length(limit ?? 0)
+  const blocking = nodes[blockingId ?? '']
+  const blockingKind = !blocking
+    ? 'something'
+    : blocking.type === 'item'
+      ? 'an item'
+      : `a ${blocking.type}`
+  switch (refusal.code) {
+    case 'window_already_joined':
+      return 'One of them already wraps another corner. Unwrap it first.'
+    case 'window_not_on_wall':
+      return 'A roof or dormer window cannot join another window.'
+    case 'windows_not_adjacent':
+      return `They are too far apart. Windows merge with at most ${reach} between them.`
+    case 'opening_between':
+      return `There is ${blockingKind} between them.`
+    case 'walls_not_meeting':
+      return 'Their walls do not meet at a corner.'
+    case 'corner_angle':
+      return 'Their walls meet at too sharp or too flat an angle for a corner window.'
+    case 'window_not_at_corner':
+      return `One of them is too far from the corner. A window joins one within ${reach} of it.`
+    case 'height_exceeds_wall':
+      return 'The window selected first is taller than the other wall. Select the other one first.'
+    case 'opening_overlap':
+      return `Sliding them to the corner would overlap ${blockingKind}.`
+    default:
+      return 'These windows cannot be merged.'
+  }
+}
+
+/**
+ * Merge windows: with exactly two windows selected, one window across both, or one corner window
+ * when they sit on two walls that meet. Windows ride their wall, so they have no floating group
+ * menu, and this is where the wall merge's twin lives. Two that already wrap their corner get
+ * Unwrap instead; two that cannot join, the reason.
+ */
+function MergeWindowsAction() {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const nodes = useScene((s) => s.nodes)
+  const readOnly = useScene((s) => s.readOnly)
+  const unit = useViewer((s) => s.unit)
+  const metricNotation = useViewer((s) => s.metricNotation)
+  const offer = useMemo(() => windowMergeOffer(nodes, selectedIds), [nodes, selectedIds])
+  if (!offer) return null
+  if (offer.refusal?.code === 'windows_already_joined')
+    return (
+      <ActionButton
+        className="basis-full whitespace-nowrap disabled:cursor-not-allowed disabled:opacity-40"
+        disabled={readOnly}
+        icon={<Split className="h-4 w-4" />}
+        label="Unwrap the corner"
+        onClick={() => {
+          writeWindowChanges({
+            create: null,
+            updates: unwrapCorner(useScene.getState().nodes, selectedIds[0]!),
+            remove: [],
+          })
+          triggerSFX('sfx:structure-build')
+        }}
+        title="Unwrap the corner: both windows stay, each framed at the corner"
+      />
+    )
+  const { merge } = offer
+  const note = offer.refusal
+    ? mergeRefusalNote(offer.refusal, nodes, (meters) =>
+        formatLinearMeasurement(meters, unit, metricNotation),
+      )
+    : null
+  return (
+    <>
+      <ActionButton
+        className="basis-full whitespace-nowrap disabled:cursor-not-allowed disabled:opacity-40"
+        disabled={readOnly || !merge}
+        icon={<Merge className="h-4 w-4" />}
+        label="Merge windows"
+        onClick={() => {
+          if (!merge) return
+          runAsSingleSceneHistoryStep(useScene, () =>
+            writeWindowChanges({
+              create: null,
+              updates: Object.fromEntries(merge.changes.update.map(({ id, data }) => [id, data])),
+              remove: merge.changes.delete,
+            }),
+          )
+          triggerSFX('sfx:structure-build')
+          useViewer.getState().setSelection({ selectedIds: merge.windowIds as AnyNodeId[] })
+        }}
+        title={
+          note ??
+          (merge?.kind === 'corner'
+            ? 'Merge windows into a corner window: both take the height, sill and type of the one you selected first'
+            : 'Merge windows into one across both: it keeps the type and style of the one you selected first')
+        }
+      />
+      {note ? <p className="basis-full px-1 text-muted-foreground text-xs">{note}</p> : null}
+    </>
+  )
+}
+
 export function MultiSelectionActions() {
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const sessionGroups = useSessionGroups((s) => s.groups)
@@ -32,10 +173,23 @@ export function MultiSelectionActions() {
     [sessionGroups, selectedIds, liveIds],
   )
 
+  const buildingId = useWholeLevelBuildingId(selectedIds)
+
   return (
-    <ActionGroup>
+    <ActionGroup className="flex-wrap">
+      <MergeWindowsAction />
+      {buildingId && (
+        <ActionButton
+          className="basis-full whitespace-nowrap"
+          icon={<Building2 className="h-4 w-4" />}
+          label="Select building"
+          onClick={() => selectBuilding(buildingId)}
+          title="Select the whole building to move all its levels"
+        />
+      )}
       {showGroup && (
         <ActionButton
+          className="min-w-20 px-2"
           icon={<Group className="h-4 w-4" />}
           label="Group"
           onClick={() => groupCurrentSelection()}
@@ -44,6 +198,7 @@ export function MultiSelectionActions() {
       )}
       {showUngroup && (
         <ActionButton
+          className="min-w-20 px-2"
           icon={<Ungroup className="h-4 w-4" />}
           label="Ungroup"
           onClick={() => ungroupCurrentSelection()}
@@ -51,13 +206,14 @@ export function MultiSelectionActions() {
         />
       )}
       <ActionButton
+        className="min-w-20 px-2"
         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" />}
+        className="min-w-20 px-2 border-red-500/40 text-red-700 dark:text-red-200 hover:bg-red-500/15"
+        icon={<Trash2 className="h-4 w-4 text-red-600 dark:text-red-400" />}
         label="Delete"
         onClick={() => deleteSelection()}
       />

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

@@ -1,4 +1,4 @@
-import type { AnyNode } from '@pascal-app/core'
+import { type AnyNode, scriptImages } from '@pascal-app/core'
 
 export type NodeDisplay = {
   icon: string
@@ -21,6 +21,7 @@ const TYPE_DEFAULTS: Record<string, NodeDisplay> = {
   'stair-segment': { icon: '/icons/stairs.webp', label: 'Stair segment' },
   scan: { icon: '/icons/mesh.webp', label: '3D Scan' },
   guide: { icon: '/icons/floorplan.webp', label: 'Guide image' },
+  zone: { icon: '/icons/zone.webp', label: 'Zone' },
 }
 
 export function getTypeDisplay(type: string): NodeDisplay {
@@ -30,15 +31,19 @@ export function getTypeDisplay(type: string): NodeDisplay {
 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 }
+  const scripted = scriptImages(node)?.thumbnail
   // Item nodes carry an asset with its own thumbnail/name
   if (node.type === 'item') {
     return {
-      icon: node.asset?.thumbnail || fallback.icon,
+      icon: scripted ?? (node.asset?.thumbnail || fallback.icon),
       label: node.name || node.asset?.name || fallback.label,
     }
   }
+  if (node.type === 'zone' && node.spaceRole === 'room') {
+    return { icon: '/icons/kitchen.webp', label: node.name || 'Room' }
+  }
   return {
-    icon: fallback.icon,
+    icon: scripted ?? fallback.icon,
     label: node.name || fallback.label,
   }
 }