@pascal-app/editor 0.8.0 → 0.9.2

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

@@ -6,25 +6,26 @@ export type NodeDisplay = {
 }
 
 const TYPE_DEFAULTS: Record<string, NodeDisplay> = {
-  item: { icon: '/icons/furniture.png', label: 'Item' },
-  wall: { icon: '/icons/wall.png', label: 'Wall' },
-  door: { icon: '/icons/door.png', label: 'Door' },
-  window: { icon: '/icons/window.png', label: 'Window' },
-  slab: { icon: '/icons/floor.png', label: 'Slab' },
-  ceiling: { icon: '/icons/ceiling.png', label: 'Ceiling' },
-  column: { icon: '/icons/column.png', label: 'Column' },
-  fence: { icon: '/icons/fence.png', label: 'Fence' },
-  roof: { icon: '/icons/roof.png', label: 'Roof' },
-  'roof-segment': { icon: '/icons/roof.png', label: 'Roof segment' },
-  stair: { icon: '/icons/stair.png', label: 'Stair' },
-  'stair-segment': { icon: '/icons/stair.png', label: 'Stair segment' },
-  scan: { icon: '/icons/mesh.png', label: '3D Scan' },
-  guide: { icon: '/icons/floorplan.png', label: 'Guide image' },
+  item: { icon: '/icons/item.webp', label: 'Item' },
+  wall: { icon: '/icons/wall.webp', label: 'Wall' },
+  door: { icon: '/icons/door.webp', label: 'Door' },
+  window: { icon: '/icons/window.webp', label: 'Window' },
+  slab: { icon: '/icons/floor.webp', label: 'Slab' },
+  ceiling: { icon: '/icons/ceiling.webp', label: 'Ceiling' },
+  column: { icon: '/icons/column.webp', label: 'Column' },
+  elevator: { icon: '/icons/elevator.webp', label: 'Elevator' },
+  fence: { icon: '/icons/fence.webp', label: 'Fence' },
+  roof: { icon: '/icons/roof.webp', label: 'Roof' },
+  'roof-segment': { icon: '/icons/roof.webp', label: 'Roof segment' },
+  stair: { icon: '/icons/stairs.webp', label: 'Stair' },
+  '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' },
 }
 
 export function getNodeDisplay(node: AnyNode | null | undefined): NodeDisplay {
-  if (!node) return { icon: '/icons/select.png', label: 'Selection' }
-  const fallback = TYPE_DEFAULTS[node.type] ?? { icon: '/icons/select.png', label: node.type }
+  if (!node) return { icon: '/icons/select.webp', label: 'Selection' }
+  const fallback = TYPE_DEFAULTS[node.type] ?? { icon: '/icons/select.webp', label: node.type }
   // Item nodes carry an asset with its own thumbnail/name
   if (node.type === 'item') {
     return {

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

@@ -5,8 +5,11 @@ import {
   type AnyNodeId,
   type BuildingNode,
   type CeilingNode,
+  type ChimneyNode,
   type ColumnNode,
   type DoorNode,
+  type DormerNode,
+  type ElevatorNode,
   type FenceNode,
   type ItemNode,
   type RoofNode,
@@ -23,31 +26,22 @@ import { useCallback, useEffect, useState } from 'react'
 import { useIsMobile } from '../../../hooks/use-mobile'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
-import { CeilingPanel } from './ceiling-panel'
-import { ColumnPanel } from './column-panel'
-import { DoorPanel } from './door-panel'
-import { FencePanel } from './fence-panel'
-import { ItemPanel } from './item-panel'
 import { MobilePanelSheet } from './mobile-panel-sheet'
 import { MobileSelectionBar } from './mobile-selection-bar'
 import { getNodeDisplay } from './node-display'
-import { PaintPanel } from './paint-panel'
+import { resetDesktopInspectorCollapsed } from './panel-wrapper'
+import { ParametricInspector } from './parametric-inspector'
 import { ReferencePanel } from './reference-panel'
-import { RoofPanel } from './roof-panel'
-import { RoofSegmentPanel } from './roof-segment-panel'
-import { SlabPanel } from './slab-panel'
-import { SpawnPanel } from './spawn-panel'
-import { StairPanel } from './stair-panel'
-import { StairSegmentPanel } from './stair-segment-panel'
-import { WallPanel } from './wall-panel'
-import { WindowPanel } from './window-panel'
 
 type MovableNode =
   | ItemNode
   | WindowNode
   | DoorNode
+  | ElevatorNode
   | CeilingNode
+  | ChimneyNode
   | ColumnNode
+  | DormerNode
   | SlabNode
   | WallNode
   | FenceNode
@@ -61,8 +55,11 @@ const MOVABLE_TYPES = new Set<string>([
   'item',
   'window',
   'door',
+  'elevator',
   'ceiling',
+  'chimney',
   'column',
+  'dormer',
   'slab',
   'wall',
   'fence',
@@ -77,38 +74,17 @@ function isMovableNode(node: AnyNode | null): node is MovableNode {
   return !!node && MOVABLE_TYPES.has(node.type)
 }
 
-function panelForType(type: string | null) {
+function panelForType(type: string | null, footer?: React.ReactNode) {
   if (!type) return null
-  switch (type) {
-    case 'item':
-      return <ItemPanel />
-    case 'roof':
-      return <RoofPanel />
-    case 'roof-segment':
-      return <RoofSegmentPanel />
-    case 'stair':
-      return <StairPanel />
-    case 'stair-segment':
-      return <StairSegmentPanel />
-    case 'slab':
-      return <SlabPanel />
-    case 'spawn':
-      return <SpawnPanel />
-    case 'ceiling':
-      return <CeilingPanel />
-    case 'column':
-      return <ColumnPanel />
-    case 'wall':
-      return <WallPanel />
-    case 'fence':
-      return <FencePanel />
-    case 'door':
-      return <DoorPanel />
-    case 'window':
-      return <WindowPanel />
-    default:
-      return null
-  }
+  // Every kind now renders through `<ParametricInspector>`, which either
+  // composes auto-derived editors from `parametrics.groups` or lazy-
+  // loads the kind-owned panel via `parametrics.customPanel`. The
+  // hardcoded switch is gone — all per-kind panel layout lives in
+  // `nodes/src/<kind>/panel.tsx`. The `type` arg is preserved for
+  // future cases where we might want a non-registry fallback (e.g.
+  // reference scale, paint mode); leave the function shape intact.
+  void type
+  return <ParametricInspector footer={footer} />
 }
 
 function MobilePanelLayer({
@@ -192,13 +168,12 @@ function MobilePanelLayer({
   )
 }
 
-export function PanelManager() {
+export function PanelManager({ inspectorFooter }: { inspectorFooter?: React.ReactNode }) {
   const isMobile = useIsMobile()
   const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const selectedZoneId = useViewer((s) => s.selection.zoneId)
+  const setSelection = useViewer((s) => s.setSelection)
   const selectedReferenceId = useEditor((s) => s.selectedReferenceId)
-  const isPaintPanelOpen = useEditor((s) => s.isPaintPanelOpen)
-  const mode = useEditor((s) => s.mode)
-  const activePaintMaterial = useEditor((s) => s.activePaintMaterial)
   // 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) => {
@@ -212,6 +187,27 @@ export function PanelManager() {
     return id ? (s.nodes[id as AnyNodeId] ?? null) : null
   })
 
+  // 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
+  // selected kept showing the reference panel. Clear the stale reference the
+  // moment a scene selection appears.
+  const setSelectedReferenceId = useEditor((s) => s.setSelectedReferenceId)
+  useEffect(() => {
+    if (selectedIds.length > 0 || selectedZoneId) {
+      setSelectedReferenceId(null)
+    }
+  }, [selectedIds, selectedZoneId, 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])
+
   if (isMobile) {
     if (selectedReferenceId) {
       return <MobilePanelLayer isReference={true} node={null} panel={<ReferencePanel />} />
@@ -230,15 +226,16 @@ export function PanelManager() {
     return <ReferencePanel />
   }
 
-  if (
-    isPaintPanelOpen &&
-    mode === 'material-paint' &&
-    activePaintMaterial?.material?.properties &&
-    !activePaintMaterial.materialPreset
-  ) {
-    return <PaintPanel />
+  if (selectedZoneId && selectedIds.length === 0) {
+    return (
+      <ParametricInspector
+        footer={inspectorFooter}
+        key={selectedZoneId}
+        nodeId={selectedZoneId as AnyNodeId}
+        onClose={() => setSelection({ zoneId: null })}
+      />
+    )
   }
 
-  // Show appropriate panel based on selected node type
-  return panelForType(selectedNodeType)
+  return panelForType(selectedNodeType, inspectorFooter)
 }

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

@@ -1,17 +1,76 @@
 'use client'
 
-import { ChevronLeft, RotateCcw, X } from 'lucide-react'
+import { ChevronDown, ChevronLeft, GripHorizontal, RotateCcw, X } from 'lucide-react'
 import Image from 'next/image'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react'
 import { useIsMobile } from '../../../hooks/use-mobile'
 import { cn } from '../../../lib/utils'
 
+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))
+}
+
+/**
+ * Bounds the panel is allowed to occupy — the viewer column (tagged with
+ * `data-viewer-bounds`) so it can't slide under the sidebar or top bar.
+ * Falls back to the viewport when the marker isn't found.
+ */
+function getDragBounds(el: HTMLElement | null): {
+  left: number
+  top: number
+  right: number
+  bottom: number
+} {
+  const region = el?.closest('[data-viewer-bounds]')
+  const rect = region?.getBoundingClientRect()
+  if (!rect) {
+    return { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight }
+  }
+  return { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom }
+}
+
+/**
+ * Host-supplied inspector footer (e.g. community's "Save as preset"). The
+ * `PanelManager` provides it so every panel — including kind-owned
+ * `customPanel`s that render their own `<PanelWrapper>` without threading a
+ * `footer` prop — picks it up without per-kind wiring. An explicit `footer`
+ * prop still wins over the context.
+ */
+export const InspectorFooterContext = createContext<React.ReactNode>(null)
+
 interface PanelWrapperProps {
   title: string
-  icon?: string
+  /** 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
+   *  `def.presentation.icon`). */
+  icon?: string | React.ReactNode
   onClose?: () => void
   onReset?: () => void
   onBack?: () => void
   children: React.ReactNode
+  /** Pinned below the scrollable body, inside the panel card. */
+  footer?: React.ReactNode
   className?: string
   width?: number | string
 }
@@ -23,25 +82,163 @@ export function PanelWrapper({
   onReset,
   onBack,
   children,
+  footer,
   className,
   width = 320, // default width
 }: PanelWrapperProps) {
   const isMobile = useIsMobile()
+  const contextFooter = useContext(InspectorFooterContext)
+  const resolvedFooter = footer ?? contextFooter
+
+  const panelRef = useRef<HTMLDivElement>(null)
+
+  // 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
+      })
+    },
+    [],
+  )
+
+  // Drag-to-reposition from the header. `offset` is a translation applied on
+  // top of the default `top-20 right-4` anchor; null until first dragged.
+  // Dragging is clamped so no edge of the panel leaves the viewport.
+  const [offset, setOffset] = useState<{ x: number; y: number } | null>(null)
+  const [isDragging, setIsDragging] = useState(false)
+  const dragRef = useRef<{
+    startX: number
+    startY: number
+    baseX: number
+    baseY: number
+    rectLeft: number
+    rectTop: number
+    width: number
+    height: number
+    minLeft: number
+    maxLeft: number
+    minTop: number
+    maxTop: number
+    moved: boolean
+  } | null>(null)
+
+  const handleHeaderPointerDown = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      // Buttons (close / reset / collapse) handle their own clicks.
+      if ((e.target as HTMLElement).closest('button')) return
+      const rect = panelRef.current?.getBoundingClientRect()
+      if (!rect) return
+      const bounds = getDragBounds(panelRef.current)
+      const base = offset ?? { x: 0, y: 0 }
+      dragRef.current = {
+        startX: e.clientX,
+        startY: e.clientY,
+        baseX: base.x,
+        baseY: base.y,
+        rectLeft: rect.left,
+        rectTop: rect.top,
+        width: rect.width,
+        height: rect.height,
+        minLeft: bounds.left + DRAG_MARGIN,
+        maxLeft: bounds.right - rect.width - DRAG_MARGIN,
+        minTop: bounds.top + DRAG_MARGIN,
+        maxTop: bounds.bottom - rect.height - DRAG_MARGIN,
+        moved: false,
+      }
+      setIsDragging(true)
+      e.currentTarget.setPointerCapture(e.pointerId)
+    },
+    [offset],
+  )
+
+  const handleHeaderPointerMove = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    const drag = dragRef.current
+    if (!drag) return
+    const dx = e.clientX - drag.startX
+    const dy = e.clientY - drag.startY
+    // Hold position until the press clearly becomes a drag, so a click can
+    // still toggle collapse.
+    if (!drag.moved && Math.hypot(dx, dy) <= CLICK_SLOP) return
+    drag.moved = true
+    const left = clamp(drag.rectLeft + dx, drag.minLeft, drag.maxLeft)
+    const top = clamp(drag.rectTop + dy, drag.minTop, drag.maxTop)
+    setOffset({ x: drag.baseX + (left - drag.rectLeft), y: drag.baseY + (top - drag.rectTop) })
+  }, [])
+
+  const handleHeaderPointerUp = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    const drag = dragRef.current
+    if (!drag) return
+    dragRef.current = null
+    setIsDragging(false)
+    e.currentTarget.releasePointerCapture(e.pointerId)
+    // A press that never turned into a drag is a click → toggle collapse.
+    if (!drag.moved) setCollapsed((c) => !c)
+  }, [])
+
+  // Expanding can grow the panel past an edge if it was dragged there while
+  // collapsed — nudge it back inside the viewer bounds.
+  useLayoutEffect(() => {
+    if (isMobile || collapsed) return
+    const el = panelRef.current
+    if (!el) return
+    const rect = el.getBoundingClientRect()
+    const bounds = getDragBounds(el)
+    const left = clamp(rect.left, bounds.left + DRAG_MARGIN, bounds.right - rect.width - DRAG_MARGIN)
+    const top = clamp(rect.top, bounds.top + DRAG_MARGIN, bounds.bottom - rect.height - DRAG_MARGIN)
+    const dx = left - rect.left
+    const dy = top - rect.top
+    if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5) {
+      setOffset((prev) => ({ x: (prev?.x ?? 0) + dx, y: (prev?.y ?? 0) + dy }))
+    }
+  }, [collapsed, isMobile])
 
   return (
     <div
       className={cn(
         isMobile
           ? 'flex h-full w-full flex-col overflow-hidden bg-transparent dark:text-foreground'
-          : 'pointer-events-auto fixed top-20 right-4 z-50 flex max-h-[calc(100dvh-100px)] 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
+          // `100dvh - 74px` — just clearing the bar without leaving a
+          // visible gap. The inner `flex-1 overflow-y-auto` content area
+          // (below) handles vertical scrolling when content exceeds the
+          // cap.
+          : '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,
       )}
-      style={isMobile ? undefined : { width }}
+      ref={panelRef}
+      style={
+        isMobile
+          ? undefined
+          : {
+              width,
+              transform: offset ? `translate(${offset.x}px, ${offset.y}px)` : undefined,
+            }
+      }
     >
-      {/* Header — desktop only; mobile sheet provides its own header */}
+      {/* Header — desktop only; mobile sheet provides its own header. Doubles
+          as the drag handle (grip in the middle) for repositioning the panel. */}
       {!isMobile && (
-        <div className="flex items-center justify-between border-border/50 border-b px-3 py-3">
-          <div className="flex items-center gap-2">
+        <div
+          className={cn(
+            'relative flex select-none items-center justify-between px-3 py-3',
+            !collapsed && 'border-border/50 border-b',
+            isDragging ? 'cursor-grabbing' : 'cursor-grab',
+          )}
+          onPointerDown={handleHeaderPointerDown}
+          onPointerMove={handleHeaderPointerMove}
+          onPointerUp={handleHeaderPointerUp}
+        >
+          <div className="flex min-w-0 items-center gap-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"
@@ -51,14 +248,26 @@ export function PanelWrapper({
                 <ChevronLeft className="h-4 w-4" />
               </button>
             )}
-            {icon && (
-              <Image alt="" className="shrink-0 object-contain" height={16} src={icon} width={16} />
-            )}
+            {icon &&
+              (typeof icon === 'string' ? (
+                <Image
+                  alt=""
+                  className="shrink-0 object-contain"
+                  height={16}
+                  src={icon}
+                  width={16}
+                />
+              ) : (
+                <span className="flex shrink-0 items-center justify-center">{icon}</span>
+              ))}
             <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" />
+
           <div className="flex items-center gap-1">
             {onReset && (
               <button
@@ -69,6 +278,17 @@ export function PanelWrapper({
                 <RotateCcw className="h-4 w-4" />
               </button>
             )}
+            <button
+              aria-expanded={!collapsed}
+              aria-label={collapsed ? 'Expand panel' : 'Collapse panel'}
+              className="flex h-7 w-7 items-center justify-center rounded-md bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-[#3e3e3e] hover:text-foreground"
+              onClick={() => setCollapsed((c) => !c)}
+              type="button"
+            >
+              <ChevronDown
+                className={cn('h-4 w-4 transition-transform', collapsed ? '' : 'rotate-180')}
+              />
+            </button>
             {onClose && (
               <button
                 className="flex h-7 w-7 items-center justify-center rounded-md bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-[#3e3e3e] hover:text-foreground"
@@ -82,8 +302,14 @@ export function PanelWrapper({
         </div>
       )}
 
-      {/* Content */}
-      <div className="no-scrollbar flex min-h-0 flex-1 flex-col overflow-y-auto">{children}</div>
+      {/* Content — hidden while the panel is collapsed (desktop). */}
+      {!(collapsed && !isMobile) && (
+        <div className="no-scrollbar flex min-h-0 flex-1 flex-col overflow-y-auto">{children}</div>
+      )}
+
+      {resolvedFooter && !(collapsed && !isMobile) && (
+        <div className="shrink-0 border-border/50 border-t p-3">{resolvedFooter}</div>
+      )}
     </div>
   )
 }