@pascal-app/editor 1.0.0-beta.4 → 1.0.0

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

@@ -2,55 +2,107 @@
 
 import { type AnyNodeId, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { Copy, Trash2 } from 'lucide-react'
+import { Copy, Group, Trash2, Ungroup } from 'lucide-react'
+import { useMemo } from 'react'
 import { deleteSelection, duplicateSelectionAndPickUp } from '../../editor/group-actions'
+import {
+  canCreateSessionGroup,
+  selectionIntersectsSessionGroup,
+  selectionMatchesSessionGroup,
+} from '../../../lib/session-groups'
+import useSessionGroups, {
+  groupCurrentSelection,
+  ungroupCurrentSelection,
+} from '../../../store/use-session-groups'
 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 right-side panel for a MULTI-selection — the compact sibling of the
- * single-node inspector, rendered by `PanelManager` when more than one node
- * is selected. Same collapsed-by-default `PanelWrapper` shell (header always
- * visible; the shared desktop collapse state carries across single ↔ multi
- * swaps). Actions mirror the floating group pill: Duplicate clones the
- * selection and picks the clones up, Delete removes the whole selection
- * (including its bulk-delete confirm). Unlike the pill, the docked panel
- * stays visible during interactions. `footer` is the host-injected slot
- * (e.g. community's "Save to my catalog").
+ * Docked multi-selection panel. Includes Group / Ungroup for session selection sets.
  */
 export function MultiSelectionPanel({ footer }: { footer?: React.ReactNode }) {
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const setSelection = useViewer((s) => s.setSelection)
-  // String selector — recomputed on scene ticks, but the === compare keeps
-  // unrelated mutations from re-rendering the panel.
+  const sessionGroups = useSessionGroups((s) => s.groups)
   const breakdown = useScene((s) =>
     formatSelectionBreakdown(selectedIds.map((id) => s.nodes[id as AnyNodeId]?.type)),
   )
+  const sceneNodes = useScene((s) => s.nodes)
+  const liveIds = useMemo(() => new Set(Object.keys(sceneNodes)), [sceneNodes])
+  const matchedGroup = useMemo(
+    () => selectionMatchesSessionGroup(sessionGroups, selectedIds, liveIds),
+    [sessionGroups, selectedIds, liveIds],
+  )
 
   return (
     <PanelWrapper
       footer={footer}
       icon="/icons/select.webp"
       onClose={() => setSelection({ selectedIds: [] })}
-      title={`${selectedIds.length} selected`}
+      title={
+        matchedGroup
+          ? `${matchedGroup.label} · ${selectedIds.length}`
+          : `${selectedIds.length} selected`
+      }
       width={320}
     >
       {breakdown && <div className="px-3 py-3 text-muted-foreground text-xs">{breakdown}</div>}
+      {matchedGroup && (
+        <div className="border-border/50 border-t px-3 py-2 text-muted-foreground text-xs">
+          {matchedGroup.label} (session only). Plain click reselects all members. Not saved with the
+          project.
+        </div>
+      )}
       <div className="border-border/50 border-t p-3">
-        <ActionGroup>
-          <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/panel-wrapper.tsx

@@ -1,17 +1,40 @@
 'use client'
 
+import { Icon } from '@iconify/react'
+import {
+  type AnyNode,
+  type AnyNodeId,
+  getInspectorExtensions,
+  type IconRef,
+  type InspectorExtension,
+  useRegistryVersion,
+  useScene,
+} 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,
+  lazy,
+  Suspense,
   useCallback,
   useContext,
+  useEffect,
   useLayoutEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react'
 import { useIsMobile } from '../../../hooks/use-mobile'
+import {
+  resolveActiveExtension,
+  toggleCard,
+  toggleExtension,
+} from '../../../lib/inspector-card-mode'
 import { cn } from '../../../lib/utils'
+import { PanelSection } from '../controls/panel-section'
+import { ErrorBoundary } from '../primitives/error-boundary'
 
 const DRAG_MARGIN = 8
 // Pointer travel (px) below which a header press is treated as a click
@@ -92,6 +115,36 @@ export function PanelWrapper({
 
   const panelRef = useRef<HTMLDivElement>(null)
 
+  // ── Plugin inspector extensions ────────────────────────────────────
+  // The wrapper self-resolves the selected node instead of taking a prop:
+  // kind-owned `customPanel`s (wall, slab, …) render their own
+  // <PanelWrapper>, so this is the one spot every inspector card flows
+  // through. Extensions only apply to a single-node selection.
+  const registryVersion = useRegistryVersion()
+  const selectedId = useViewer((s) =>
+    s.selection.selectedIds.length === 1 ? s.selection.selectedIds[0] : undefined,
+  ) as AnyNodeId | undefined
+  // Subscribe to the selected node's *type* only — a string primitive that
+  // doesn't change as fields are edited (same trick as ParametricInspector).
+  const selectedType = useScene((s) => (selectedId ? (s.nodes[selectedId]?.type ?? null) : null))
+  const installedPlugins = useScene((s) => s.installedPlugins)
+  const extensions = useMemo(() => {
+    // re-derive when plugin extensions register after mount (async plugin load)
+    void registryVersion
+    if (!selectedType) return []
+    return getInspectorExtensions(selectedType).filter(
+      (extension) => !extension.pluginId || installedPlugins.includes(extension.pluginId),
+    )
+  }, [selectedType, installedPlugins, registryVersion])
+
+  // Which extension's content fills the card body (extension mode). The two
+  // expanded modes are EITHER/OR: extension mode replaces the regular
+  // controls; null shows the regular controls with no extension sections.
+  // See `lib/inspector-card-mode.ts` for the transition table.
+  const [activeExtensionId, setActiveExtensionId] = useState<string | null>(null)
+  // 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
@@ -109,6 +162,26 @@ export function PanelWrapper({
     [],
   )
 
+  const applyMode = useCallback(
+    (next: { collapsed: boolean; activeExtensionId: string | null }) => {
+      setCollapsed(next.collapsed)
+      setActiveExtensionId(next.activeExtensionId)
+    },
+    [setCollapsed],
+  )
+
+  // Chevron / header press — collapsed → regular, regular → collapsed,
+  // extension mode → regular (exit the extension first, stay expanded).
+  const handleCardToggle = useCallback(() => {
+    applyMode(toggleCard({ collapsed, activeExtensionId }))
+  }, [applyMode, collapsed, activeExtensionId])
+
+  // Folding the card forgets the active extension — extension mode is a
+  // one-shot affordance of the header icon, not sticky panel state.
+  useEffect(() => {
+    if (collapsed) setActiveExtensionId(null)
+  }, [collapsed])
+
   // 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.
@@ -173,15 +246,19 @@ export function PanelWrapper({
     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)
-  }, [])
+  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 → same mode toggle
+      // as the chevron.
+      if (!drag.moved) handleCardToggle()
+    },
+    [handleCardToggle],
+  )
 
   // Expanding can grow the panel past an edge if it was dragged there while
   // collapsed — nudge it back inside the viewer bounds.
@@ -278,11 +355,39 @@ export function PanelWrapper({
                 <RotateCcw className="h-4 w-4" />
               </button>
             )}
+            {/* Extension mode buttons — one icon per registered inspector
+                extension, left of the chevron. Click swaps the card body to
+                ONLY that extension's content (either/or with the regular
+                controls); the active icon (highlighted) or the chevron
+                returns to the regular controls. */}
+            {extensions.map((extension) => {
+              const isActive = !collapsed && activeExtensionId === extension.id
+              return (
+                <button
+                  aria-label={isActive ? `Close ${extension.title}` : `Open ${extension.title}`}
+                  aria-pressed={isActive}
+                  className={cn(
+                    'flex h-7 w-7 items-center justify-center rounded-md transition-colors',
+                    isActive
+                      ? 'bg-cyan-500/20 text-cyan-400 hover:bg-cyan-500/30'
+                      : 'bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground',
+                  )}
+                  key={extension.id}
+                  onClick={() =>
+                    applyMode(toggleExtension({ collapsed, activeExtensionId }, extension.id))
+                  }
+                  title={extension.title}
+                  type="button"
+                >
+                  {renderExtensionIcon(extension.icon)}
+                </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)}
+              onClick={handleCardToggle}
               type="button"
             >
               <ChevronDown
@@ -302,9 +407,37 @@ export function PanelWrapper({
         </div>
       )}
 
-      {/* Content — hidden while the panel is collapsed (desktop). */}
+      {/* Content — hidden while the panel is collapsed (desktop). The two
+          expanded modes are EITHER/OR: extension mode renders ONLY that
+          extension's content; regular mode renders ONLY the kind's own
+          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">{children}</div>
+        <div className="no-scrollbar flex min-h-0 flex-1 flex-col overflow-y-auto">
+          {!isMobile && selectedId && activeExtension ? (
+            <InspectorExtensionSection
+              extension={activeExtension}
+              key={activeExtension.id}
+              nodeId={selectedId}
+            />
+          ) : (
+            <>
+              {children}
+              {/* Mobile sheet has no header icons to swap modes — keep the
+                  plugin sections appended after the kind's controls there. */}
+              {isMobile &&
+                selectedId &&
+                extensions.map((extension) => (
+                  <InspectorExtensionSection
+                    defaultExpanded={false}
+                    extension={extension}
+                    key={extension.id}
+                    nodeId={selectedId}
+                  />
+                ))}
+            </>
+          )}
+        </div>
       )}
 
       {resolvedFooter && !(collapsed && !isMobile) && (
@@ -313,3 +446,86 @@ export function PanelWrapper({
     </div>
   )
 }
+
+// ─── Plugin inspector extensions ──────────────────────────────────────
+
+/** 16px icon for an extension's header button — mirrors the parametric
+ *  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} />
+  }
+  if (ref.kind === 'iconify') {
+    return <Icon height={16} icon={ref.name} width={16} />
+  }
+  if (ref.kind === 'svg') {
+    return (
+      <svg height={16} viewBox={ref.viewBox} width={16}>
+        <path d={ref.path} fill="currentColor" />
+      </svg>
+    )
+  }
+  const LazyIcon = lazy(ref.module)
+  return (
+    <Suspense fallback={null}>
+      <LazyIcon />
+    </Suspense>
+  )
+}
+
+// `React.lazy` once per loader so the resolved component keeps a stable
+// identity across renders — same WeakMap pattern as `resolveCustomPanel`
+// in parametric-inspector.tsx.
+const extensionComponentCache = new WeakMap<
+  InspectorExtension['component'],
+  ComponentType<{ node: AnyNode }>
+>()
+
+function resolveExtensionComponent(
+  extension: InspectorExtension,
+): ComponentType<{ node: AnyNode }> {
+  const cached = extensionComponentCache.get(extension.component)
+  if (cached) return cached
+  // `LazyComponent` is prop-agnostic; the inspector-extension contract is
+  // that the default export accepts `{ node }` (see the type's docs).
+  const Comp = lazy(extension.component) as unknown as ComponentType<{ node: AnyNode }>
+  extensionComponentCache.set(extension.component, Comp)
+  return Comp
+}
+
+/**
+ * One plugin-contributed inspector section. Subscribes to the full node —
+ * the section body reflects any edit — and hands it to the extension's
+ * lazy component inside its own error boundary so a crashing plugin
+ * section can't take down the inspector card. On desktop this is the
+ * card's SOLE body while its extension is active (either/or with the
+ * regular controls); the mobile sheet appends it after them instead.
+ */
+function InspectorExtensionSection({
+  defaultExpanded = true,
+  extension,
+  nodeId,
+}: {
+  defaultExpanded?: boolean
+  extension: InspectorExtension
+  nodeId: AnyNodeId
+}) {
+  const node = useScene((s) => s.nodes[nodeId])
+  if (!node) return null
+  const Extension = resolveExtensionComponent(extension)
+  return (
+    <PanelSection defaultExpanded={defaultExpanded} title={extension.title}>
+      <ErrorBoundary
+        fallback={
+          <p className="p-1 text-muted-foreground text-xs">
+            “{extension.title}” hit an error and was unloaded for this session.
+          </p>
+        }
+      >
+        <Suspense fallback={null}>
+          <Extension node={node} />
+        </Suspense>
+      </ErrorBoundary>
+    </PanelSection>
+  )
+}