@pascal-app/editor 1.0.3 → 1.0.4

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

@@ -22,11 +22,16 @@ import {
   type WindowNode,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useSelectedRoom, useZoneRoom } from '../../../hooks/use-selected-room'
+import { FloorOpeningPanel } from './floor-opening-panel'
+import { OpenRoomPanel, RoomPanel } from './room-panel'
 import { useIsMobile } from '../../../hooks/use-mobile'
 import { shouldShowEditingControls } from '../../../lib/interaction/overlay-policy'
+import { captureElementActionOrigin, completeElementAction } from '../../../lib/room-zone-routing'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
+import { duplicateNodeAndPickUp } from '../../editor/duplicate-node'
 import { deleteSelection, duplicateSelectionAndPickUp, startGroupPickUp } from '../../editor/group-actions'
 import { resolveHomogeneousSelection } from './homogeneous-selection'
 import { MobilePanelSheet } from './mobile-panel-sheet'
@@ -34,7 +39,7 @@ import { MobileSelectionBar } from './mobile-selection-bar'
 import { MultiParametricInspector } from './multi-parametric-inspector'
 import { MultiSelectionPanel } from './multi-selection-panel'
 import { getNodeDisplay, getTypeDisplay } from './node-display'
-import { resetDesktopInspectorCollapsed } from './panel-wrapper'
+import { InspectedNodesContext } from './panel-wrapper'
 import { ParametricInspector } from './parametric-inspector'
 import { ReferencePanel } from './reference-panel'
 import { formatSelectionBreakdown } from './selection-breakdown'
@@ -127,24 +132,16 @@ function MobilePanelLayer({
   }, [node, setMovingNode, clearSelection])
 
   const handleDuplicate = useCallback(() => {
-    if (!isMovableNode(node)) return
-    sfxEmitter.emit('sfx:item-pick')
-    const cloned = structuredClone(node) as MovableNode & { id?: AnyNodeId }
-    delete (cloned as { id?: AnyNodeId }).id
-    const prevMeta =
-      cloned.metadata && typeof cloned.metadata === 'object' && !Array.isArray(cloned.metadata)
-        ? (cloned.metadata as Record<string, unknown>)
-        : {}
-    cloned.metadata = { ...prevMeta, isNew: true }
-    setMovingNode(cloned as MovableNode)
-    clearSelection()
-  }, [node, setMovingNode, clearSelection])
+    if (isMovableNode(node)) duplicateNodeAndPickUp(node)
+  }, [node])
 
   const handleDelete = useCallback(() => {
     if (!node) return
+    const origin = captureElementActionOrigin([node.id])
     sfxEmitter.emit('sfx:item-delete')
     deleteNode(node.id)
     clearSelection()
+    completeElementAction(origin)
   }, [node, deleteNode, clearSelection])
 
   if (!(node || isReference)) return null
@@ -222,6 +219,7 @@ export function PanelManager({
   multiSelectionFooter?: React.ReactNode
 }) {
   const isMobile = useIsMobile()
+  const room = useSelectedRoom()
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const selectedZoneId = useViewer((s) => s.selection.zoneId)
   const setSelection = useViewer((s) => s.setSelection)
@@ -248,6 +246,16 @@ export function PanelManager({
       : '',
   )
 
+  // A room reached as a zone (a unit's member, a zone kept by a route that is not
+  // room-first) still gets the room panel.
+  const panelZoneId =
+    selectedIds.length === 0
+      ? selectedZoneId
+      : selectedNodeType === 'zone'
+        ? (selectedIds[0] ?? null)
+        : null
+  const zoneRoom = useZoneRoom(panelZoneId)
+
   // Node and reference selection are mutually exclusive: selecting a guide
   // clears the node selection (handleGuideSelect), but node selection never
   // cleared a lingering reference — so clicking a wall with a floorplan
@@ -255,74 +263,101 @@ export function PanelManager({
   // moment a scene selection appears.
   const setSelectedReferenceId = useEditor((s) => s.setSelectedReferenceId)
   useEffect(() => {
-    if (selectedIds.length > 0 || selectedZoneId) {
+    if (selectedIds.length > 0 || selectedZoneId || room) {
       setSelectedReferenceId(null)
     }
-  }, [selectedIds, selectedZoneId, setSelectedReferenceId])
+  }, [selectedIds, selectedZoneId, room, setSelectedReferenceId])
 
-  // The inspector's expanded state is shared across panel swaps, but a fresh
-  // selection after everything was deselected should open collapsed again.
-  const hasAnySelection = selectedIds.length > 0 || Boolean(selectedZoneId) || Boolean(selectedReferenceId)
-  useEffect(() => {
-    if (!hasAnySelection) {
-      resetDesktopInspectorCollapsed()
-    }
-  }, [hasAnySelection])
+  // What the card shows, for its Collections section: a room is its zone.
+  const inspectedKey =
+    room && selectedIds.length === 0
+      ? room.zoneId
+      : panelZoneId && zoneRoom
+        ? panelZoneId
+        : selectedReferenceId
+          ? ''
+          : selectedIds.length === 0
+            ? (selectedZoneId ?? '')
+            : selectedIds.join(',')
+  const inspectedIds = useMemo(
+    () => (inspectedKey ? (inspectedKey.split(',') as AnyNodeId[]) : []),
+    [inspectedKey],
+  )
 
   if (!shouldShowEditingControls(readOnly)) return null
 
-  if (isMobile) {
-    if (selectedReferenceId) {
-      return <MobilePanelLayer isReference={true} node={null} panel={<ReferencePanel />} />
+  return (
+    <InspectedNodesContext.Provider value={inspectedIds}>
+      {renderPanel()}
+    </InspectedNodesContext.Provider>
+  )
+
+  function renderPanel() {
+    if (room && selectedIds.length === 0) return <RoomPanel room={room} />
+    if (selectedNodeType === 'floor-opening' && selectedIds[0])
+      return <FloorOpeningPanel key={selectedIds[0]} openingId={selectedIds[0]} />
+    if (zoneRoom && panelZoneId) {
+      const closeZone = () => setSelection({ selectedIds: [], zoneId: null })
+      return zoneRoom.record ? (
+        <RoomPanel onClose={closeZone} room={zoneRoom.record} />
+      ) : (
+        <OpenRoomPanel key={panelZoneId} onClose={closeZone} zoneId={panelZoneId} />
+      )
     }
-    if (selectedIds.length > 1) {
+
+    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 (
-        <MobileMultiPanelLayer
-          breakdown={multiBreakdown}
-          panel={
-            homogeneousType ? (
-              <MultiParametricInspector footer={multiSelectionFooter} />
-            ) : (
-              <MultiSelectionPanel footer={multiSelectionFooter} />
-            )
-          }
-          type={homogeneousType}
+        <MobilePanelLayer
+          isReference={false}
+          node={selectedNode}
+          panel={panelForType(selectedNodeType)}
         />
       )
     }
-    return (
-      <MobilePanelLayer
-        isReference={false}
-        node={selectedNode}
-        panel={panelForType(selectedNodeType)}
-      />
-    )
-  }
 
-  // Show reference panel if a reference is selected
-  if (selectedReferenceId) {
-    return <ReferencePanel />
-  }
+    // Show reference panel if a reference is selected
+    if (selectedReferenceId) {
+      return <ReferencePanel />
+    }
 
-  if (selectedZoneId && selectedIds.length === 0) {
-    return (
-      <ParametricInspector
-        footer={inspectorFooter}
-        key={selectedZoneId}
-        nodeId={selectedZoneId as AnyNodeId}
-        onClose={() => setSelection({ zoneId: null })}
-      />
-    )
-  }
+    if (selectedZoneId && selectedIds.length === 0) {
+      return (
+        <ParametricInspector
+          footer={inspectorFooter}
+          key={selectedZoneId}
+          nodeId={selectedZoneId as AnyNodeId}
+          onClose={() => setSelection({ zoneId: null })}
+        />
+      )
+    }
 
-  // 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} />
+    // 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} />
     }
-    return <MultiSelectionPanel footer={multiSelectionFooter} />
-  }
 
-  return panelForType(selectedNodeType, inspectorFooter)
+    return panelForType(selectedNodeType, inspectorFooter)
+  }
 }

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

@@ -12,7 +12,6 @@ import {
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { ChevronDown, ChevronLeft, GripHorizontal, RotateCcw, X } from 'lucide-react'
-import Image from 'next/image'
 import {
   type ComponentType,
   createContext,
@@ -27,27 +26,25 @@ import {
   useState,
 } from 'react'
 import { useIsMobile } from '../../../hooks/use-mobile'
+import { IconRefImage } from '../icon-ref'
+import { NodeIconImage } from '../node-icon-image'
 import {
   resolveActiveExtension,
   toggleCard,
   toggleExtension,
 } from '../../../lib/inspector-card-mode'
 import { cn } from '../../../lib/utils'
+import { useInspectorExpanded } from '../../../lib/inspector-expanded'
+import { ActionButton, ActionGroup } from '../controls/action-button'
 import { PanelSection } from '../controls/panel-section'
 import { ErrorBoundary } from '../primitives/error-boundary'
+import { useInRightStack } from '../right-stack'
+import { CollectionsPopover } from './collections/collections-popover'
 
 const DRAG_MARGIN = 8
 // Pointer travel (px) below which a header press is treated as a click
 // (toggles collapse) rather than a drag.
 const CLICK_SLOP = 4
-let desktopInspectorCollapsed = true
-
-/** Forget the shared expanded state. Called when the last selection clears so
- * a fresh selection opens the inspector collapsed — the sharing is only meant
- * to survive swaps between panels (roof ↔ segment), not a close/reopen. */
-export function resetDesktopInspectorCollapsed() {
-  desktopInspectorCollapsed = true
-}
 
 function clamp(value: number, min: number, max: number): number {
   return Math.min(Math.max(value, min), Math.max(min, max))
@@ -81,8 +78,19 @@ function getDragBounds(el: HTMLElement | null): {
  */
 export const InspectorFooterContext = createContext<React.ReactNode>(null)
 
+/**
+ * The scene elements the inspector card shows (the selection, or the zone behind a room).
+ * `PanelManager` provides it so every card gets the Collections section; a card mounted
+ * elsewhere (the site panel in the sidebar) is not about the selection and gets none.
+ */
+export const InspectedNodesContext = createContext<AnyNodeId[]>([])
+
 interface PanelWrapperProps {
   title: string
+  /** A short line above the title ("Room · Ground floor"). */
+  kicker?: string
+  /** Replaces the plain title, e.g. with the name edited in place. */
+  titleContent?: React.ReactNode
   /** Either a URL path (legacy panels pass `/icons/floor.webp` etc.,
    *  rendered via next/image) OR a React node (registry-driven
    *  inspector renders `<Icon icon="lucide:fence" />` from
@@ -100,6 +108,8 @@ interface PanelWrapperProps {
 
 export function PanelWrapper({
   title,
+  kicker,
+  titleContent,
   icon,
   onClose,
   onReset,
@@ -110,7 +120,9 @@ export function PanelWrapper({
   width = 320, // default width
 }: PanelWrapperProps) {
   const isMobile = useIsMobile()
+  const inStack = useInRightStack()
   const contextFooter = useContext(InspectorFooterContext)
+  const inspectedIds = useContext(InspectedNodesContext)
   const resolvedFooter = footer ?? contextFooter
 
   const panelRef = useRef<HTMLDivElement>(null)
@@ -145,22 +157,13 @@ export function PanelWrapper({
   // Stale ids (kind changed, plugin gated off) fall back to regular mode.
   const activeExtension = resolveActiveExtension(activeExtensionId, extensions)
 
-  // The whole panel is collapsed to just its header by default; the chevron
-  // expands it to reveal the inspector body. Keep the desktop value shared
-  // across inspector swaps (roof ↔ segment, etc.) so navigating between
-  // related panels preserves whether the user left the inspector open.
-  const [collapsed, setCollapsedState] = useState(desktopInspectorCollapsed)
-
-  const setCollapsed = useCallback(
-    (next: boolean | ((previous: boolean) => boolean)) => {
-      setCollapsedState((previous) => {
-        const resolved = typeof next === 'function' ? next(previous) : next
-        desktopInspectorCollapsed = resolved
-        return resolved
-      })
-    },
-    [],
-  )
+  // The panel is collapsed to just its header until the user expands it. The
+  // choice is one editor preference for every inspector (room, wall, item…),
+  // persisted, so every panel opens the way the user last left one.
+  const collapsed = !useInspectorExpanded((state) => state.expanded)
+  const setCollapsed = useCallback((next: boolean) => {
+    useInspectorExpanded.getState().setExpanded(!next)
+  }, [])
 
   const applyMode = useCallback(
     (next: { collapsed: boolean; activeExtensionId: string | null }) => {
@@ -205,8 +208,8 @@ export function PanelWrapper({
 
   const handleHeaderPointerDown = useCallback(
     (e: React.PointerEvent<HTMLDivElement>) => {
-      // Buttons (close / reset / collapse) handle their own clicks.
-      if ((e.target as HTMLElement).closest('button')) return
+      // Buttons (close / reset / collapse) and a title edited in place handle their own clicks.
+      if ((e.target as HTMLElement).closest('button, input, label')) return
       const rect = panelRef.current?.getBoundingClientRect()
       if (!rect) return
       const bounds = getDragBounds(panelRef.current)
@@ -282,6 +285,10 @@ export function PanelWrapper({
       className={cn(
         isMobile
           ? 'flex h-full w-full flex-col overflow-hidden bg-transparent dark:text-foreground'
+          : inStack
+            ? // In the shared right column: it grows down and scrolls on itself,
+              // leaving the shortcuts card below it its room (`right-stack.tsx`).
+              'pointer-events-auto flex max-h-full min-h-0 flex-[0_1_auto] flex-col overflow-hidden rounded-xl border border-border/50 bg-sidebar/95 shadow-2xl backdrop-blur-xl dark:text-foreground'
           // Cap height at `100dvh - 154px` so a tall panel's bottom edge
           // aligns flush with the top of the floating bottom action bar.
           // Combined with `top-20` (80px), the panel's bottom sits at
@@ -292,6 +299,7 @@ export function PanelWrapper({
           : 'pointer-events-auto fixed top-20 right-4 z-50 flex max-h-[calc(100dvh-154px)] flex-col overflow-hidden rounded-xl border border-border/50 bg-sidebar/95 shadow-2xl backdrop-blur-xl dark:text-foreground',
         className,
       )}
+      data-panel-wrapper
       ref={panelRef}
       style={
         isMobile
@@ -311,11 +319,12 @@ export function PanelWrapper({
             !collapsed && 'border-border/50 border-b',
             isDragging ? 'cursor-grabbing' : 'cursor-grab',
           )}
+          data-panel-header
           onPointerDown={handleHeaderPointerDown}
           onPointerMove={handleHeaderPointerMove}
           onPointerUp={handleHeaderPointerUp}
         >
-          <div className="flex min-w-0 items-center gap-2">
+          <div className={cn('flex min-w-0 items-center gap-2', titleContent && 'flex-1 pr-2')}>
             {onBack && (
               <button
                 className="mr-1 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-[#3e3e3e] hover:text-foreground"
@@ -327,7 +336,7 @@ export function PanelWrapper({
             )}
             {icon &&
               (typeof icon === 'string' ? (
-                <Image
+                <NodeIconImage
                   alt=""
                   className="shrink-0 object-contain"
                   height={16}
@@ -337,13 +346,30 @@ export function PanelWrapper({
               ) : (
                 <span className="flex shrink-0 items-center justify-center">{icon}</span>
               ))}
-            <h2 className="truncate font-semibold text-foreground text-sm tracking-tight">
-              {title}
-            </h2>
+            {kicker || titleContent ? (
+              <div className="flex min-w-0 flex-1 flex-col">
+                {kicker && (
+                  <span className="truncate text-[11px] text-muted-foreground leading-tight" data-panel-kicker>
+                    {kicker}
+                  </span>
+                )}
+                {titleContent ?? (
+                  <h2 className="truncate font-semibold text-foreground text-sm tracking-tight">
+                    {title}
+                  </h2>
+                )}
+              </div>
+            ) : (
+              <h2 className="truncate font-semibold text-foreground text-sm tracking-tight">
+                {title}
+              </h2>
+            )}
           </div>
 
-          {/* Centered grip — purely a visual drag affordance. */}
-          <GripHorizontal className="-translate-x-1/2 pointer-events-none absolute left-1/2 h-4 w-4 text-muted-foreground/40" />
+          {/* Centered grip — purely a visual drag affordance (a title edited in place takes its room). */}
+          {!titleContent && (
+            <GripHorizontal className="-translate-x-1/2 pointer-events-none absolute left-1/2 h-4 w-4 text-muted-foreground/40" />
+          )}
 
           <div className="flex items-center gap-1">
             {onReset && (
@@ -413,7 +439,7 @@ export function PanelWrapper({
           controls (`children`). A stale extension id falls back to regular
           via `resolveActiveExtension`. */}
       {!(collapsed && !isMobile) && (
-        <div className="no-scrollbar flex min-h-0 flex-1 flex-col overflow-y-auto">
+        <div className="no-scrollbar flex min-h-0 flex-1 flex-col overflow-y-auto" data-panel-scroll>
           {!isMobile && selectedId && activeExtension ? (
             <InspectorExtensionSection
               extension={activeExtension}
@@ -422,7 +448,23 @@ export function PanelWrapper({
             />
           ) : (
             <>
+              {/* The mobile sheet has its own header: a title edited in place moves into the body. */}
+              {isMobile && titleContent && (
+                <div className="flex flex-col px-4 pt-3">
+                  {kicker && <span className="text-[11px] text-muted-foreground">{kicker}</span>}
+                  {titleContent}
+                </div>
+              )}
               {children}
+              {inspectedIds.length > 0 && (
+                <PanelSection title="Collections">
+                  <ActionGroup>
+                    <CollectionsPopover nodeIds={inspectedIds}>
+                      <ActionButton label="Manage collections…" />
+                    </CollectionsPopover>
+                  </ActionGroup>
+                </PanelSection>
+              )}
               {/* Mobile sheet has no header icons to swap modes — keep the
                   plugin sections appended after the kind's controls there. */}
               {isMobile &&
@@ -453,7 +495,7 @@ export function PanelWrapper({
  *  inspector's `renderIcon` (plain <img> so no next/image server deps). */
 function renderExtensionIcon(ref: IconRef): React.ReactNode {
   if (ref.kind === 'url') {
-    return <img alt="" className="h-4 w-4 shrink-0 object-contain" src={ref.src} />
+    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} />

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

@@ -46,7 +46,7 @@ export function ParametricFieldControl({
     }
 
     case 'boolean': {
-      const checked = !mixed && value === true
+      const checked = !mixed && (value ?? field.default) === true
       return (
         <ToggleControl
           checked={checked}

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

@@ -19,6 +19,7 @@ import { commitParametricNodeFields } from '../../../lib/parametric-node-update'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import { collectZoneContentIds } from '../../../lib/zone-content'
 import useEditor from '../../../store/use-editor'
+import { IconRefImage } from '../icon-ref'
 import { ActionButton, ActionGroup } from '../controls/action-button'
 import { PanelSection } from '../controls/panel-section'
 import { ParametricFieldControl } from './parametric-field-control'
@@ -236,10 +237,9 @@ function ParamActionButton({ action, nodeId }: { action: ParamAction<AnyNode>; n
 function renderIcon(ref: IconRef | undefined): React.ReactNode | undefined {
   if (!ref) return undefined
   if (ref.kind === 'url') {
-    // Plain <img> here so the inspector doesn't pull in next/image's
-    // server-only requirements (the file is `'use client'`). Same
-    // 16x16 box the legacy panels use.
-    return <img alt="" className="h-4 w-4 shrink-0 object-contain" src={ref.src} />
+    // No next/image here: the inspector is `'use client'` and next/image
+    // drags in server-only requirements. Same 16x16 box the legacy panels use.
+    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} />

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

@@ -25,6 +25,7 @@ import { guideEmitter } from '../../../lib/guide-events'
 import { getGuideImageName } from '../../../lib/local-guide-image'
 import { cn } from '../../../lib/utils'
 import useEditor from '../../../store/use-editor'
+import { isViewVisible, VIEW_2D } from '../../../store/view-layout'
 import { ActionButton, ActionGroup } from '../controls/action-button'
 import { PanelSection } from '../controls/panel-section'
 import { SliderControl } from '../controls/slider-control'
@@ -134,9 +135,7 @@ export function ReferencePanel() {
     // The scale line is drawn on the 2D plan — starting from a 3D-only view
     // would arm the flow invisibly inside the hidden floorplan panel.
     const editor = useEditor.getState()
-    if (editor.viewMode === '3d') {
-      editor.setViewMode('2d')
-    }
+    if (!isViewVisible(editor, VIEW_2D)) editor.showView(VIEW_2D)
 
     guideEmitter.emit('guide:set-reference-scale', { guideId: node.id })
   }, [node])