@pascal-app/editor 1.0.3 → 1.0.5

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)
@@ -126,7 +138,7 @@ export function PanelWrapper({
   ) 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 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)
@@ -143,24 +155,24 @@ export function PanelWrapper({
   // 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
-  // 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
-      })
-    },
-    [],
-  )
+  const primaryExtensionId = useScene((state) => {
+    const node = selectedId ? state.nodes[selectedId] : undefined
+    return node ? extensions.find((extension) => extension.primaryWhen?.(node))?.id : undefined
+  })
+  const primaryExtension = extensions.find((extension) => extension.id === primaryExtensionId)
+  const activeExtension = primaryExtension ?? resolveActiveExtension(activeExtensionId, extensions)
+
+  // 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)
+  }, [])
+
+  useEffect(() => {
+    if (primaryExtension) setCollapsed(false)
+  }, [primaryExtension, selectedId, setCollapsed])
 
   const applyMode = useCallback(
     (next: { collapsed: boolean; activeExtensionId: string | null }) => {
@@ -173,8 +185,12 @@ export function PanelWrapper({
   // Chevron / header press — collapsed → regular, regular → collapsed,
   // extension mode → regular (exit the extension first, stay expanded).
   const handleCardToggle = useCallback(() => {
+    if (primaryExtension) {
+      setCollapsed(!collapsed)
+      return
+    }
     applyMode(toggleCard({ collapsed, activeExtensionId }))
-  }, [applyMode, collapsed, activeExtensionId])
+  }, [applyMode, collapsed, activeExtensionId, primaryExtension, setCollapsed])
 
   // Folding the card forgets the active extension — extension mode is a
   // one-shot affordance of the header icon, not sticky panel state.
@@ -205,8 +221,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)
@@ -279,9 +295,14 @@ export function PanelWrapper({
 
   return (
     <div
+      data-editor-inspector
       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 +313,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,23 +333,24 @@ 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"
+                className="mr-1 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground"
                 onClick={onBack}
                 type="button"
               >
                 <ChevronLeft className="h-4 w-4" />
               </button>
             )}
-            {icon &&
+            {primaryExtension ? renderExtensionIcon(primaryExtension.icon) : icon &&
               (typeof icon === 'string' ? (
-                <Image
+                <NodeIconImage
                   alt=""
                   className="shrink-0 object-contain"
                   height={16}
@@ -337,18 +360,35 @@ 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">
+                    {primaryExtension?.title ?? title}
+                  </h2>
+                )}
+              </div>
+            ) : (
+              <h2 className="truncate font-semibold text-foreground text-sm tracking-tight">
+                {primaryExtension?.title ?? 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 && (
               <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"
+                className="flex h-7 w-7 items-center justify-center rounded-md bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground"
                 onClick={onReset}
                 type="button"
               >
@@ -360,7 +400,7 @@ export function PanelWrapper({
                 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) => {
+            {extensions.filter((extension) => extension !== primaryExtension).map((extension) => {
               const isActive = !collapsed && activeExtensionId === extension.id
               return (
                 <button
@@ -369,8 +409,8 @@ export function PanelWrapper({
                   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',
+                      ? 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-400 hover:bg-cyan-500/30'
+                      : 'bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground',
                   )}
                   key={extension.id}
                   onClick={() =>
@@ -386,7 +426,7 @@ export function PanelWrapper({
             <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"
+              className="flex h-7 w-7 items-center justify-center rounded-md bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground"
               onClick={handleCardToggle}
               type="button"
             >
@@ -396,7 +436,7 @@ export function PanelWrapper({
             </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"
+                className="flex h-7 w-7 items-center justify-center rounded-md bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground"
                 onClick={onClose}
                 type="button"
               >
@@ -413,8 +453,10 @@ 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">
-          {!isMobile && selectedId && activeExtension ? (
+        <div className="no-scrollbar flex min-h-0 flex-1 flex-col overflow-y-auto" data-panel-scroll>
+          {selectedId && primaryExtension ? (
+            <InspectorExtensionContent extension={primaryExtension} nodeId={selectedId} />
+          ) : !isMobile && selectedId && activeExtension ? (
             <InspectorExtensionSection
               extension={activeExtension}
               key={activeExtension.id}
@@ -422,7 +464,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 +511,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} />
@@ -509,23 +567,33 @@ function InspectorExtensionSection({
   defaultExpanded?: boolean
   extension: InspectorExtension
   nodeId: AnyNodeId
+}) {
+  return (
+    <PanelSection defaultExpanded={defaultExpanded} title={extension.title}>
+      <InspectorExtensionContent extension={extension} nodeId={nodeId} />
+    </PanelSection>
+  )
+}
+
+function InspectorExtensionContent({
+  extension,
+  nodeId,
+}: {
+  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>
+    <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>
   )
 }

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}
@@ -82,7 +82,7 @@ export function ParametricFieldControl({
         <div className="flex items-center justify-between px-3 py-2">
           <span className="text-foreground/80 text-xs">{prettifyKey(key)}</span>
           <select
-            className="rounded-md border border-border/50 bg-[#2C2C2E] px-2 py-1 text-foreground text-xs focus:outline-none focus:ring-1 focus:ring-foreground/30"
+            className="rounded-md border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-2 py-1 text-foreground text-xs focus:outline-none focus:ring-1 focus:ring-foreground/30"
             onChange={(e) => apply(e.target.value)}
             value={mixed ? '' : str}
           >
@@ -119,7 +119,7 @@ export function ParametricFieldControl({
               value={str}
             />
             <input
-              className="w-20 rounded-md border border-border/50 bg-[#2C2C2E] px-2 py-1 text-foreground text-xs focus:outline-none focus:ring-1 focus:ring-foreground/30"
+              className="w-20 rounded-md border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-2 py-1 text-foreground text-xs focus:outline-none focus:ring-1 focus:ring-foreground/30"
               onChange={(e) => apply(e.target.value)}
               type="text"
               value={mixed ? 'Mixed' : str}