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

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>
+  )
+}

package/src/components/ui/sidebar/panels/items-panel/function-tree-panel.tsx

@@ -118,9 +118,14 @@ export function FunctionTreePanel({
     <div className="flex h-full flex-col">
       {/* Root nodes as a category grid — icon when available, otherwise a
           two-letter abbreviation, with the full name in a hover tooltip.
-          Mirrors the Build tab's tile grid so the two panels read the same. */}
+          Mirrors the Build tab's tile grid so the two panels read the same.
+
+          `functionTree` is embedder-supplied and unbounded, and these tiles are
+          `aspect-square`, so row count grows with it while the item list below is
+          the only scroller. Without the cap a large taxonomy pushes the list out
+          of the panel entirely and nothing can scroll it back. */}
       <TooltipProvider delayDuration={0} disableHoverableContent>
-        <div className="grid shrink-0 grid-cols-5 gap-1.5 border-border/70 border-b p-2">
+        <div className="grid max-h-[40%] shrink-0 grid-cols-5 gap-1.5 overflow-y-auto border-border/70 border-b p-2">
           {functionTree.map((root) => {
             const isActive = activeRoot?.slug === root.slug
             return (

package/src/components/ui/sidebar/panels/settings-panel/keyboard-shortcuts-dialog.tsx

@@ -106,6 +106,17 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
         action: 'Rotate a multi-selection ±45° around its center',
         note: 'Also works mid-move while carrying the selection.',
       },
+      {
+        keys: ['Cmd/Ctrl', 'G'],
+        action: 'Group the multi-selection (session only)',
+        note:
+          'Editor-only. Plain click a member later to reselect the whole group. Not saved with the project.',
+      },
+      {
+        keys: ['Cmd/Ctrl', 'Shift', 'G'],
+        action: 'Ungroup the session selection',
+        note: 'Keeps the current selection; only dissolves the session group.',
+      },
       {
         keys: ['Esc'],
         action: 'Clear the selection',

package/src/components/ui/sidebar/panels/site-panel/index.tsx

@@ -51,6 +51,7 @@ import { createLocalGuideImage } from './../../../../../lib/local-guide-image'
 import { cn } from './../../../../../lib/utils'
 import useEditor from './../../../../../store/use-editor'
 import { useUploadStore } from '../../../../../store/use-upload'
+import { MetricControl } from '../../../controls/metric-control'
 import { LevelDuplicateDialog } from '../../../level-duplicate-dialog'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, TreeNode } from './tree-node'
@@ -873,6 +874,17 @@ const LevelItem = memo(function LevelItem({
             initial={{ height: 0, opacity: 0 }}
             transition={{ type: 'spring', bounce: 0, duration: 0.3 }}
           >
+            <div className="relative border-border/50 border-b py-2 pr-3 pl-[60px]">
+              <div className="pointer-events-none absolute top-0 bottom-0 left-[45px] z-10 w-px bg-border/50" />
+              <MetricControl
+                label="Base elevation"
+                onChange={(value) => updateNode(level.id, { baseElevation: value })}
+                precision={2}
+                step={0.05}
+                unit="m"
+                value={Math.round((level.baseElevation ?? 0) * 100) / 100}
+              />
+            </div>
             <LevelReferences
               isLastLevel={isLast}
               levelId={level.id}

package/src/components/ui/sidebar/panels/site-panel/tree-node.tsx

@@ -5,6 +5,7 @@ import { AnimatePresence, motion } from 'motion/react'
 import { forwardRef, memo, useEffect, useRef } from 'react'
 import { resolveNodeSelectionTarget } from '../../../../../lib/selection-routing'
 import useEditor from '../../../../../store/use-editor'
+import { expandSessionSelectionForNode } from '../../../../../store/use-session-groups'
 
 export function handleTreeSelection(
   e: React.MouseEvent,
@@ -48,7 +49,13 @@ export function handleTreeSelection(
     }
   }
 
-  setSelection({ selectedIds: [nodeId] })
+  if (e.altKey) {
+    setSelection({ selectedIds: [nodeId] })
+    return false
+  }
+
+  const expanded = expandSessionSelectionForNode(nodeId)
+  setSelection({ selectedIds: expanded && expanded.length > 1 ? expanded : [nodeId] })
   return false
 }
 

package/src/components/ui/sidebar/tab-bar.tsx

@@ -13,6 +13,12 @@ export type SidebarTab = {
   mobileIcon?: ReactNode
   /** Desktop icon shown in the vertical rail (v2 layout). */
   icon?: ReactNode
+  /**
+   * Rail entry that drives the stage instead of opening a sidebar panel:
+   * activating it hides the panel column (preserving its collapse state) and
+   * keeps the icon highlighted regardless of collapse.
+   */
+  noPanel?: boolean
 }
 
 interface TabBarProps {
@@ -75,7 +81,7 @@ export function IconRail({ tabs, activeTab, collapsed, onIconClick }: IconRailPr
   const pluginTabs = tabs.filter((tab) => pluginPanelIds.has(tab.id) || tab.id === 'plugins')
 
   const renderTab = (tab: SidebarTab) => {
-    const showActive = activeTab === tab.id && !collapsed
+    const showActive = activeTab === tab.id && (!collapsed || tab.noPanel === true)
     return (
       <Tooltip key={tab.id}>
         <TooltipTrigger asChild>

package/src/components/viewer/floorplan-compass-button.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import type React from 'react'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/primitives/tooltip'
+
+export type FloorplanCompassButtonProps = {
+  northRotationDeg: number
+  onAlignNorth: () => void
+  needleRef?: React.RefObject<SVGSVGElement | null>
+}
+
+export function FloorplanCompassButton({
+  northRotationDeg,
+  onAlignNorth,
+  needleRef,
+}: FloorplanCompassButtonProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          aria-label="Align view to north"
+          className="group pointer-events-auto absolute bottom-3 left-3 z-30 flex h-8 w-8 items-center justify-center rounded-full border border-black/10 bg-white/85 shadow-sm backdrop-blur-md transition hover:bg-white hover:shadow-md dark:border-white/10 dark:bg-neutral-900/85 dark:hover:bg-neutral-900"
+          onClick={(event) => {
+            event.preventDefault()
+            event.stopPropagation()
+            onAlignNorth()
+          }}
+          onPointerDown={(event) => {
+            event.stopPropagation()
+          }}
+          type="button"
+        >
+          <span className="relative flex h-6 w-6 items-center justify-center rounded-full bg-[#b8b8b8] shadow-inner dark:bg-neutral-700">
+            <svg
+              aria-hidden="true"
+              className="h-6 w-6"
+              ref={needleRef}
+              style={{ transform: `rotate(${northRotationDeg}deg)` }}
+              viewBox="0 0 48 48"
+            >
+              <path d="M24 4.5 31.5 25 24 21.5 16.5 25Z" fill="#f15b5b" />
+              <path d="M24 43.5 16.5 23 24 26.5 31.5 23Z" fill="#ffffff" />
+            </svg>
+          </span>
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="right">Align view to north</TooltipContent>
+    </Tooltip>
+  )
+}

package/src/components/viewer/floorplan-preview-geometry.test.ts

@@ -0,0 +1,107 @@
+import { describe, expect, test } from 'bun:test'
+import type { FloorplanGeometry } from '@pascal-app/core'
+import {
+  clientToFloorplanPoint,
+  getFloorplanBounds,
+  padFloorplanBounds,
+  panFloorplanViewBox,
+  scaleFloorplanViewBox,
+  scaleFloorplanViewBoxBetweenClients,
+} from './floorplan-preview-geometry'
+
+describe('floorplan preview bounds', () => {
+  test('composes nested translation and rotation', () => {
+    const geometry: FloorplanGeometry = {
+      kind: 'group',
+      transform: { translate: [10, 5], rotate: Math.PI / 2 },
+      children: [
+        {
+          kind: 'rect',
+          x: 0,
+          y: 0,
+          width: 4,
+          height: 2,
+        },
+      ],
+    }
+
+    expect(getFloorplanBounds([geometry])).toEqual({
+      minX: 8,
+      minY: 5,
+      maxX: 10,
+      maxY: 9,
+    })
+  })
+
+  test('includes image rotation and dimension baselines', () => {
+    const geometries: FloorplanGeometry[] = [
+      {
+        kind: 'image',
+        url: '/symbol.png',
+        center: [2, 3],
+        width: 4,
+        height: 2,
+        rotation: Math.PI / 2,
+      },
+      {
+        kind: 'dimension',
+        start: [-3, -2],
+        end: [3, -2],
+        dimensionStart: [-4, -1],
+        dimensionEnd: [4, -1],
+        offsetNormal: [0, -1],
+        offsetDistance: 1,
+        extensionOvershoot: 0.2,
+        text: '8 m',
+      },
+    ]
+
+    expect(getFloorplanBounds(geometries)).toEqual({
+      minX: -4,
+      minY: -2,
+      maxX: 4,
+      maxY: 5,
+    })
+  })
+
+  test('pads narrow plans by a usable minimum', () => {
+    expect(padFloorplanBounds({ minX: 0, minY: 0, maxX: 0, maxY: 0 })).toEqual({
+      minX: -0.75,
+      minY: -0.75,
+      maxX: 0.75,
+      maxY: 0.75,
+    })
+  })
+
+  test('maps clients through letterboxed SVG content', () => {
+    const viewBox = { x: 0, y: 0, width: 10, height: 10 }
+    const viewport = { left: 0, top: 0, width: 1000, height: 500 }
+
+    expect(clientToFloorplanPoint(viewBox, viewport, 250, 0)).toEqual([0, 0])
+    expect(clientToFloorplanPoint(viewBox, viewport, 750, 500)).toEqual([10, 10])
+    expect(panFloorplanViewBox(viewBox, viewport, [500, 250], [550, 250])).toEqual({
+      x: -1,
+      y: 0,
+      width: 10,
+      height: 10,
+    })
+  })
+
+  test('keeps the plan point beneath a moving pinch midpoint', () => {
+    const viewBox = { x: 0, y: 0, width: 10, height: 10 }
+    const viewport = { left: 0, top: 0, width: 1000, height: 500 }
+    const next = scaleFloorplanViewBoxBetweenClients(viewBox, 0.5, viewport, [500, 250], [600, 250])
+
+    expect(next).toEqual({ x: 1.5, y: 2.5, width: 5, height: 5 })
+    expect(clientToFloorplanPoint(next, viewport, 600, 250)).toEqual([5, 5])
+  })
+
+  test('clamps zoom without changing the view box aspect ratio', () => {
+    expect(scaleFloorplanViewBox({ x: 0, y: 0, width: 100, height: 1 }, 0.01)).toEqual({
+      x: 37.5,
+      y: 0.375,
+      width: 25,
+      height: 0.25,
+    })
+  })
+})