@pascal-app/editor 1.0.3 → 1.0.4

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

@@ -0,0 +1,143 @@
+'use client'
+
+import {
+  type AnyNodeId,
+  adjacentLevelId,
+  area,
+  floorOpeningHints,
+  getLevelDisplayName,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import {
+  deleteFloorOpening,
+  finishFloorOpening,
+  openingRoom,
+} from '../../../lib/floor-edit-session'
+import { formatAreaLabel } from '../../../lib/measurements'
+import { Button } from '../primitives/button'
+import { Switch } from '../primitives/switch'
+import { PanelWrapper } from './panel-wrapper'
+
+/**
+ * A floor (or ceiling) opening: where it is, what it cuts, and the switch for
+ * the adjacent surface — "Also cut the ceiling below" for an opening drawn on
+ * a floor, "Also cut the floor above" for one drawn on a ceiling. A hatch in a
+ * mezzanine cuts only the mezzanine. Its shape is edited with the corner
+ * handles in the scene. Done and Delete return to the room.
+ */
+export function FloorOpeningPanel({ openingId }: { openingId: string }) {
+  const nodes = useScene((state) => state.nodes)
+  const unit = useViewer((s) => s.unit)
+  const readOnly = useScene((state) => state.readOnly)
+  const opening = nodes[openingId as AnyNodeId]
+  if (opening?.type !== 'floor-opening') return null
+  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 level = opening.parentId ? nodes[opening.parentId as AnyNodeId] : undefined
+  const adjacentId = opening.parentId
+    ? adjacentLevelId(nodes, opening.parentId, onCeiling ? 1 : -1)
+    : undefined
+  const adjacent = adjacentId ? nodes[adjacentId as AnyNodeId] : undefined
+  const hosted = !!opening.hostZoneId
+  const owned =
+    (opening.source === 'stair' || opening.source === 'elevator') &&
+    !!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 setAdjacent = (next: boolean) =>
+    useScene.getState().updateNode(opening.id, { cutsAdjacent: next })
+
+  return (
+    <PanelWrapper
+      icon="/icons/floor.webp"
+      kicker={kicker}
+      onClose={() => finishFloorOpening(opening.id)}
+      title={title}
+    >
+      <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.'}
+        </p>
+        {owned && (
+          <button
+            className="text-left text-xs text-primary underline"
+            data-opening-owner={opening.ownerId}
+            onClick={() => useViewer.getState().setSelection({ selectedIds: [opening.ownerId!] })}
+            type="button"
+          >
+            Owned by {opening.source === 'stair' ? 'Staircase' : '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.
+          </p>
+        ) : owned ? null : (
+          <label className="flex items-start gap-3" data-opening-adjacent>
+            <span className="flex flex-1 flex-col gap-0.5">
+              <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.`
+                  : onCeiling
+                    ? 'There is no floor above this storey.'
+                    : 'There is no storey below.'}
+              </span>
+            </span>
+            <Switch
+              aria-label={switchLabel}
+              checked={opening.cutsAdjacent && adjacent?.type === 'level'}
+              disabled={readOnly || adjacent?.type !== 'level'}
+              onCheckedChange={setAdjacent}
+            />
+          </label>
+        )}
+        {hints.map((hint) => (
+          <p className="text-muted-foreground text-xs" data-opening-hint={hint.code} key={hint.code}>
+            {hint.message}
+          </p>
+        ))}
+        <div className="flex items-center gap-2">
+          <Button
+            className="flex-1 rounded-full"
+            data-opening-done
+            onClick={() => finishFloorOpening(opening.id)}
+            size="sm"
+            type="button"
+            variant="outline"
+          >
+            Done
+          </Button>
+          {!owned && <Button
+            className="flex-1 rounded-full"
+            data-opening-delete
+            disabled={readOnly}
+            onClick={() => deleteFloorOpening(opening.id)}
+            size="sm"
+            type="button"
+            variant="outline"
+          >
+            Delete
+          </Button>}
+        </div>
+      </div>
+    </PanelWrapper>
+  )
+}

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
@@ -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}

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 {
@@ -45,7 +45,7 @@ export function MobileSelectionBar({
         onClick={onEdit}
         type="button"
       >
-        <Image
+        <NodeIconImage
           alt=""
           className="shrink-0 rounded object-contain"
           height={20}

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,16 @@
 'use client'
 
-import { type AnyNodeId, useScene } from '@pascal-app/core'
+import {
+  type AnyNodeId,
+  type BuildingNode,
+  resolveBuildingForLevel,
+  useScene,
+} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { Copy, Group, Trash2, Ungroup } from 'lucide-react'
+import { Building2, Copy, Group, Trash2, Ungroup } from 'lucide-react'
 import { useMemo } from 'react'
 import { deleteSelection, duplicateSelectionAndPickUp } from '../../editor/group-actions'
+import { collectSelectableCandidateIds } from '../../tools/select/select-candidates'
 import {
   canCreateSessionGroup,
   selectionIntersectsSessionGroup,
@@ -18,6 +24,25 @@ 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'] })
+}
+
 export function MultiSelectionActions() {
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const sessionGroups = useSessionGroups((s) => s.groups)
@@ -32,10 +57,22 @@ export function MultiSelectionActions() {
     [sessionGroups, selectedIds, liveIds],
   )
 
+  const buildingId = useWholeLevelBuildingId(selectedIds)
+
   return (
-    <ActionGroup>
+    <ActionGroup className="flex-wrap">
+      {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 +81,7 @@ export function MultiSelectionActions() {
       )}
       {showUngroup && (
         <ActionButton
+          className="min-w-20 px-2"
           icon={<Ungroup className="h-4 w-4" />}
           label="Ungroup"
           onClick={() => ungroupCurrentSelection()}
@@ -51,12 +89,13 @@ 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"
+        className="min-w-20 px-2 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()}

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,
   }
 }