@pascal-app/editor 1.0.4 → 1.0.6

package/src/components/ui/helpers/helper-manager.test.tsx

@@ -2,6 +2,7 @@ import { describe, expect, test } from 'bun:test'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { SELECT_HUD_TITLE, toolHudTitle } from '../../../lib/hud-title'
 import { snapContextOf } from '../../../lib/snapping-mode'
+import { cornerHintRows } from '../../../store/use-corner-snap-hint'
 import { TooltipProvider } from '../primitives/tooltip'
 import { ContextualHelperPanel } from './contextual-helper-panel'
 import { ROOM_DIVIDE_HINTS } from './helper-manager'
@@ -18,7 +19,7 @@ describe('Divide HUD', () => {
     ).toBe('wall')
   })
 
-  test('reads like the wall draft: snapping chips and the path keys', () => {
+  test('shows snapping controls and the primary gesture with expandable secondary shortcuts', () => {
     // Server rendering reads each store's initial state: the wall context starts
     // on Grid with a 0.5 m step.
     const html = renderToStaticMarkup(
@@ -28,8 +29,11 @@ describe('Divide HUD', () => {
     )
     expect(html).toContain('Snapping: Grid')
     expect(html).toContain('Grid: 0.50 m')
-    for (const label of ['Add point', 'Remove last point', 'Finish at the edge', 'Cancel'])
+    for (const label of ['Add point', 'More shortcuts', 'Cancel'])
       expect(html).toContain(label)
+    expect(html).toContain('aria-expanded="false"')
+    for (const label of ['Remove last point', 'Finish at the edge'])
+      expect(html).not.toContain(label)
     expect(ROOM_DIVIDE_HINTS.map((hint) => hint.keys)).toEqual([
       ['Left click'],
       ['Backspace'],
@@ -37,6 +41,54 @@ describe('Divide HUD', () => {
       ['Esc'],
     ])
   })
+
+  test('keeps active secondary gestures visible while shortcuts are collapsed', () => {
+    const html = renderToStaticMarkup(
+      <TooltipProvider>
+        <ContextualHelperPanel
+          hints={ROOM_DIVIDE_HINTS.map((hint) => ({
+            ...hint,
+            active: hint.keys.includes('Enter'),
+          }))}
+          snapContext="wall"
+        />
+      </TooltipProvider>,
+    )
+    for (const label of ['Add point', 'Finish at the edge', 'Cancel'])
+      expect(html).toContain(label)
+    expect(html).not.toContain('Remove last point')
+    expect(html).toContain('aria-expanded="false"')
+  })
+
+  test('keeps a note row visible while shortcuts are collapsed', () => {
+    const html = renderToStaticMarkup(
+      <TooltipProvider>
+        <ContextualHelperPanel
+          hints={[
+            { keys: ['Left click'], label: 'Place' },
+            ...cornerHintRows('free_end'),
+            { keys: ['R', 'T'], label: 'Rotate' },
+            { keys: ['Esc'], label: 'Cancel' },
+          ]}
+        />
+      </TooltipProvider>,
+    )
+    for (const label of ['Place', 'No wall meets here', 'More shortcuts', 'Cancel'])
+      expect(html).toContain(label)
+    expect(html).not.toContain('Rotate')
+  })
+
+  test('offers More shortcuts only when collapsing hides a row', () => {
+    const html = renderToStaticMarkup(
+      <TooltipProvider>
+        <ContextualHelperPanel
+          hints={[{ keys: ['Left click'], label: 'Place' }, ...cornerHintRows('free_end')]}
+        />
+      </TooltipProvider>,
+    )
+    expect(html).toContain('No wall meets here')
+    expect(html).not.toContain('More shortcuts')
+  })
 })
 
 describe('HUD header', () => {

package/src/components/ui/helpers/helper-manager.tsx

@@ -66,6 +66,7 @@ import {
   usePaintRegionMode,
 } from '../../../lib/paint-region-mode'
 import { snapContextOf } from '../../../lib/snapping-mode'
+import { cornerHintRows, useCornerSnapHint } from '../../../store/use-corner-snap-hint'
 import useEditor, { getActiveContinuationContext } from '../../../store/use-editor'
 import useInteractionScope, {
   useActiveHandleDrag,
@@ -309,10 +310,11 @@ export function HelperManager() {
   const openingShape = useOpeningDraft((s) => (s.host ? s.shape : null))
   const terraceShape = useTerraceDraft((s) => (s.host ? s.shape : null))
   const movingNode = useMovingNode()
+  const cornerHint = useCornerSnapHint((s) => s.hint)
   // A tool whose kind gives placement notices: its transient draft is the node in hand.
   const toolNotices = !!(tool && nodeRegistry.get(tool)?.placementNotice)
   const toolDraftId = useScene((s) => (toolNotices ? transientDraftId(s.nodes) : null))
-  const placementNotice = usePlacementNotice(movingNode?.id ?? toolDraftId)
+  const placementNotice = usePlacementNotice(movingNode?.id ?? toolDraftId, toolNotices)
   const reshapingNode = useReshapingNode()
   const activeHandleDrag = useActiveHandleDrag()
   const mezzanineHandle = useScene((s) => mezzanineGesture(activeHandleDrag, s.nodes))
@@ -560,6 +562,10 @@ export function HelperManager() {
         continuationContext={movingContinuationContext}
         notice={placementNotice?.line}
         showEsc
+        extraHints={movingNode.type === 'window' ? cornerHintRows(cornerHint) : []}
+        replacesPlace={
+          movingNode.type === 'window' && (cornerHint === 'join' || cornerHint === 'new')
+        }
         showForce={collisionValidatesDrop}
         snapContext={snapContext}
         title={movingTitle}

package/src/components/ui/helpers/item-helper.tsx

@@ -15,6 +15,10 @@ interface ItemHelperProps {
   title?: HudTitle | null
   // Why the item would not fit where it is (a door's way, a room too small): a warning, not a block.
   notice?: string | null
+  // Rows a kind adds while it is in hand (a window near a corner says what dropping it does).
+  extraHints?: { keys: string[]; label: string }[]
+  // The extra rows say what a click does, so the plain Place row is left out.
+  replacesPlace?: boolean
 }
 
 // Snapping mode is the chip on the right (Shift cycles it), so it's not repeated
@@ -26,13 +30,17 @@ export function ItemHelper({
   continuationContext = null,
   title = null,
   notice = null,
+  extraHints = [],
+  replacesPlace = false,
 }: ItemHelperProps) {
   return (
     <ContextualHelperPanel
       continuationContext={continuationContext}
       notice={notice}
       hints={[
-        { keys: ['Left click'], label: 'Place' },
+        // Where a click does something else (joining a corner), that row says so instead.
+        ...(replacesPlace ? [] : [{ keys: ['Left click'], label: 'Place' }]),
+        ...extraHints,
         { keys: ['R', 'T'], label: 'Rotate' },
         ...(showForce ? [{ keys: ['Alt'], label: 'Force place' }] : []),
         { keys: [showEsc ? 'Esc' : 'Right click'], label: 'Cancel' },

package/src/components/ui/panels/collections/collections-popover.tsx

@@ -106,7 +106,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
             </span>
           </div>
           <button
-            className="flex items-center gap-1 rounded-md px-2 py-1 font-medium text-[11px] text-muted-foreground transition-colors hover:bg-white/10 hover:text-foreground"
+            className="flex items-center gap-1 rounded-md px-2 py-1 font-medium text-[11px] text-muted-foreground transition-colors hover:bg-black/6 dark:hover:bg-white/10 hover:text-foreground"
             onClick={() => {
               setShowCreateInput((v) => !v)
               setCreateName('')
@@ -120,7 +120,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
 
         {/* Create input */}
         {showCreateInput && (
-          <div className="flex items-center gap-1.5 border-border/50 border-b bg-white/5 px-3 py-2">
+          <div className="flex items-center gap-1.5 border-border/50 border-b bg-black/4 dark:bg-white/5 px-3 py-2">
             <input
               autoFocus
               className="min-w-0 flex-1 rounded-md border border-border/50 bg-background/50 px-2 py-1 text-foreground text-xs outline-none placeholder:text-muted-foreground/60 focus:border-ring focus:ring-1 focus:ring-ring/30"
@@ -144,7 +144,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
               <Check className="h-3.5 w-3.5" />
             </button>
             <button
-              className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-white/10"
+              className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-black/6 dark:hover:bg-white/10"
               onClick={() => {
                 setShowCreateInput(false)
                 setCreateName('')
@@ -186,7 +186,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
                       </span>
                       <div className="flex shrink-0 items-center gap-1">
                         <button
-                          className="rounded-md bg-red-500/20 px-2 py-0.5 font-medium text-[11px] text-red-400 transition-colors hover:bg-red-500/30"
+                          className="rounded-md bg-red-500/20 px-2 py-0.5 font-medium text-[11px] text-red-600 dark:text-red-400 transition-colors hover:bg-red-500/30"
                           onClick={() => {
                             deleteCollection(collection.id)
                             setDeletingId(null)
@@ -196,7 +196,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
                           Delete
                         </button>
                         <button
-                          className="rounded-md px-2 py-0.5 font-medium text-[11px] text-muted-foreground transition-colors hover:bg-white/10"
+                          className="rounded-md px-2 py-0.5 font-medium text-[11px] text-muted-foreground transition-colors hover:bg-black/6 dark:hover:bg-white/10"
                           onClick={() => setDeletingId(null)}
                           type="button"
                         >
@@ -229,7 +229,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
                         <Check className="h-3.5 w-3.5" />
                       </button>
                       <button
-                        className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-white/10"
+                        className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-black/6 dark:hover:bg-white/10"
                         onClick={() => setRenamingId(null)}
                         type="button"
                       >
@@ -241,7 +241,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
 
                 return (
                   <li key={collection.id}>
-                    <div className="group flex items-center gap-2 px-3 py-2 transition-colors hover:bg-white/5">
+                    <div className="group flex items-center gap-2 px-3 py-2 transition-colors hover:bg-black/4 dark:hover:bg-white/5">
                       {/* Color dot — click to pick color */}
                       <ColorDot
                         color={collection.color ?? '#6366f1'}
@@ -299,7 +299,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
                       <DropdownMenu modal={false}>
                         <DropdownMenuTrigger asChild>
                           <button
-                            className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground opacity-0 transition-colors hover:bg-white/10 hover:text-foreground group-hover:opacity-100"
+                            className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground opacity-0 transition-colors hover:bg-black/6 dark:hover:bg-white/10 hover:text-foreground group-hover:opacity-100"
                             type="button"
                           >
                             <MoreHorizontal className="h-3.5 w-3.5" />

package/src/components/ui/panels/mobile-panel-sheet.tsx

@@ -56,7 +56,7 @@ export function MobilePanelSheet({ open, onClose, icon, title, children }: Mobil
       {open && (
         <motion.div
           animate={{ y: 0 }}
-          className="dark fixed right-0 bottom-0 left-0 z-[60] flex flex-col overflow-hidden rounded-t-2xl bg-sidebar text-sidebar-foreground shadow-[0_-8px_24px_rgba(0,0,0,0.24)]"
+          className="fixed right-0 bottom-0 left-0 z-[60] flex flex-col overflow-hidden rounded-t-2xl bg-sidebar text-sidebar-foreground shadow-[0_-8px_24px_rgba(0,0,0,0.24)]"
           drag="y"
           dragConstraints={{ top: 0, bottom: 0 }}
           dragElastic={{ top: 0, bottom: 0.4 }}
@@ -89,7 +89,7 @@ export function MobilePanelSheet({ open, onClose, icon, title, children }: Mobil
             </div>
             <button
               aria-label="Close"
-              className="flex h-8 w-8 items-center justify-center rounded-md bg-[#2C2C2E] text-muted-foreground transition-colors hover:bg-[#3e3e3e] hover:text-foreground"
+              className="flex h-8 w-8 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"
             >

package/src/components/ui/panels/mobile-selection-bar.tsx

@@ -18,7 +18,7 @@ interface MobileSelectionBarProps {
 }
 
 const ACTION_BTN =
-  'flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-white/8 hover:text-foreground'
+  'flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-black/5 dark:hover:bg-white/8 hover:text-foreground'
 
 export function MobileSelectionBar({
   node,
@@ -40,7 +40,7 @@ export function MobileSelectionBar({
       <button
         aria-label={`Edit ${resolvedLabel}`}
         className={cn(
-          'flex min-w-0 flex-1 items-center gap-2 rounded-lg px-2 text-left transition-colors hover:bg-white/8',
+          'flex min-w-0 flex-1 items-center gap-2 rounded-lg px-2 text-left transition-colors hover:bg-black/5 dark:hover:bg-white/8',
         )}
         onClick={onEdit}
         type="button"
@@ -80,7 +80,10 @@ export function MobileSelectionBar({
         </button>
         <button
           aria-label="Delete"
-          className={cn(ACTION_BTN, 'hover:bg-red-500/15 hover:text-red-400')}
+          className={cn(
+            ACTION_BTN,
+            'hover:bg-red-500/15 hover:text-red-600 dark:hover:bg-red-500/15 dark:hover:text-red-400',
+          )}
           onClick={(e) => {
             stop(e)
             onDelete()

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

@@ -1,15 +1,21 @@
 'use client'
 
 import {
+  type AnyNode,
   type AnyNodeId,
   type BuildingNode,
   resolveBuildingForLevel,
+  runAsSingleSceneHistoryStep,
   useScene,
 } from '@pascal-app/core'
+import { unwrapCorner, windowMergeOffer } from '@pascal-app/core/building'
 import { useViewer } from '@pascal-app/viewer'
-import { Building2, Copy, Group, Trash2, Ungroup } from 'lucide-react'
+import { Building2, Copy, Group, Merge, Split, Trash2, Ungroup } from 'lucide-react'
 import { useMemo } from 'react'
 import { deleteSelection, duplicateSelectionAndPickUp } from '../../editor/group-actions'
+import { formatLinearMeasurement } from '../../../lib/measurements'
+import { triggerSFX } from '../../../lib/sfx-bus'
+import { writeWindowChanges } from '../../../lib/window-changes'
 import { collectSelectableCandidateIds } from '../../tools/select/select-candidates'
 import {
   canCreateSessionGroup,
@@ -43,6 +49,116 @@ function selectBuilding(buildingId: AnyNodeId) {
   useViewer.getState().setSelection({ buildingId: buildingId as BuildingNode['id'] })
 }
 
+/**
+ * Why two selected windows will not merge, for the person who selected them: the refusal's own
+ * message is the agents' (node ids, metres), so the panel words its code, in the editor's units.
+ */
+function mergeRefusalNote(
+  refusal: { code: string; details: Record<string, unknown> },
+  nodes: Record<string, AnyNode>,
+  length: (meters: number) => string,
+): string {
+  const { blockingId, limit } = refusal.details as { blockingId?: string; limit?: number }
+  const reach = length(limit ?? 0)
+  const blocking = nodes[blockingId ?? '']
+  const blockingKind = !blocking
+    ? 'something'
+    : blocking.type === 'item'
+      ? 'an item'
+      : `a ${blocking.type}`
+  switch (refusal.code) {
+    case 'window_already_joined':
+      return 'One of them already wraps another corner. Unwrap it first.'
+    case 'window_not_on_wall':
+      return 'A roof or dormer window cannot join another window.'
+    case 'windows_not_adjacent':
+      return `They are too far apart. Windows merge with at most ${reach} between them.`
+    case 'opening_between':
+      return `There is ${blockingKind} between them.`
+    case 'walls_not_meeting':
+      return 'Their walls do not meet at a corner.'
+    case 'corner_angle':
+      return 'Their walls meet at too sharp or too flat an angle for a corner window.'
+    case 'window_not_at_corner':
+      return `One of them is too far from the corner. A window joins one within ${reach} of it.`
+    case 'height_exceeds_wall':
+      return 'The window selected first is taller than the other wall. Select the other one first.'
+    case 'opening_overlap':
+      return `Sliding them to the corner would overlap ${blockingKind}.`
+    default:
+      return 'These windows cannot be merged.'
+  }
+}
+
+/**
+ * Merge windows: with exactly two windows selected, one window across both, or one corner window
+ * when they sit on two walls that meet. Windows ride their wall, so they have no floating group
+ * menu, and this is where the wall merge's twin lives. Two that already wrap their corner get
+ * Unwrap instead; two that cannot join, the reason.
+ */
+function MergeWindowsAction() {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const nodes = useScene((s) => s.nodes)
+  const readOnly = useScene((s) => s.readOnly)
+  const unit = useViewer((s) => s.unit)
+  const metricNotation = useViewer((s) => s.metricNotation)
+  const offer = useMemo(() => windowMergeOffer(nodes, selectedIds), [nodes, selectedIds])
+  if (!offer) return null
+  if (offer.refusal?.code === 'windows_already_joined')
+    return (
+      <ActionButton
+        className="basis-full whitespace-nowrap disabled:cursor-not-allowed disabled:opacity-40"
+        disabled={readOnly}
+        icon={<Split className="h-4 w-4" />}
+        label="Unwrap the corner"
+        onClick={() => {
+          writeWindowChanges({
+            create: null,
+            updates: unwrapCorner(useScene.getState().nodes, selectedIds[0]!),
+            remove: [],
+          })
+          triggerSFX('sfx:structure-build')
+        }}
+        title="Unwrap the corner: both windows stay, each framed at the corner"
+      />
+    )
+  const { merge } = offer
+  const note = offer.refusal
+    ? mergeRefusalNote(offer.refusal, nodes, (meters) =>
+        formatLinearMeasurement(meters, unit, metricNotation),
+      )
+    : null
+  return (
+    <>
+      <ActionButton
+        className="basis-full whitespace-nowrap disabled:cursor-not-allowed disabled:opacity-40"
+        disabled={readOnly || !merge}
+        icon={<Merge className="h-4 w-4" />}
+        label="Merge windows"
+        onClick={() => {
+          if (!merge) return
+          runAsSingleSceneHistoryStep(useScene, () =>
+            writeWindowChanges({
+              create: null,
+              updates: Object.fromEntries(merge.changes.update.map(({ id, data }) => [id, data])),
+              remove: merge.changes.delete,
+            }),
+          )
+          triggerSFX('sfx:structure-build')
+          useViewer.getState().setSelection({ selectedIds: merge.windowIds as AnyNodeId[] })
+        }}
+        title={
+          note ??
+          (merge?.kind === 'corner'
+            ? 'Merge windows into a corner window: both take the height, sill and type of the one you selected first'
+            : 'Merge windows into one across both: it keeps the type and style of the one you selected first')
+        }
+      />
+      {note ? <p className="basis-full px-1 text-muted-foreground text-xs">{note}</p> : null}
+    </>
+  )
+}
+
 export function MultiSelectionActions() {
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const sessionGroups = useSessionGroups((s) => s.groups)
@@ -61,6 +177,7 @@ export function MultiSelectionActions() {
 
   return (
     <ActionGroup className="flex-wrap">
+      <MergeWindowsAction />
       {buildingId && (
         <ActionButton
           className="basis-full whitespace-nowrap"
@@ -95,8 +212,8 @@ export function MultiSelectionActions() {
         onClick={() => duplicateSelectionAndPickUp()}
       />
       <ActionButton
-        className="min-w-20 px-2 border-red-500/40 text-red-200 hover:bg-red-500/15"
-        icon={<Trash2 className="h-4 w-4 text-red-400" />}
+        className="min-w-20 px-2 border-red-500/40 text-red-700 dark:text-red-200 hover:bg-red-500/15"
+        icon={<Trash2 className="h-4 w-4 text-red-600 dark:text-red-400" />}
         label="Delete"
         onClick={() => deleteSelection()}
       />

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

@@ -138,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)
@@ -155,7 +155,12 @@ 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)
+  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…),
@@ -165,6 +170,10 @@ export function PanelWrapper({
     useInspectorExpanded.getState().setExpanded(!next)
   }, [])
 
+  useEffect(() => {
+    if (primaryExtension) setCollapsed(false)
+  }, [primaryExtension, selectedId, setCollapsed])
+
   const applyMode = useCallback(
     (next: { collapsed: boolean; activeExtensionId: string | null }) => {
       setCollapsed(next.collapsed)
@@ -176,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.
@@ -282,6 +295,7 @@ 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'
@@ -327,14 +341,14 @@ export function PanelWrapper({
           <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' ? (
                 <NodeIconImage
                   alt=""
@@ -355,13 +369,13 @@ export function PanelWrapper({
                 )}
                 {titleContent ?? (
                   <h2 className="truncate font-semibold text-foreground text-sm tracking-tight">
-                    {title}
+                    {primaryExtension?.title ?? title}
                   </h2>
                 )}
               </div>
             ) : (
               <h2 className="truncate font-semibold text-foreground text-sm tracking-tight">
-                {title}
+                {primaryExtension?.title ?? title}
               </h2>
             )}
           </div>
@@ -374,7 +388,7 @@ export function PanelWrapper({
           <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"
               >
@@ -386,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
@@ -395,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={() =>
@@ -412,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"
             >
@@ -422,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"
               >
@@ -440,7 +454,9 @@ export function PanelWrapper({
           via `resolveActiveExtension`. */}
       {!(collapsed && !isMobile) && (
         <div className="no-scrollbar flex min-h-0 flex-1 flex-col overflow-y-auto" data-panel-scroll>
-          {!isMobile && selectedId && activeExtension ? (
+          {selectedId && primaryExtension ? (
+            <InspectorExtensionContent extension={primaryExtension} nodeId={selectedId} />
+          ) : !isMobile && selectedId && activeExtension ? (
             <InspectorExtensionSection
               extension={activeExtension}
               key={activeExtension.id}
@@ -551,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

@@ -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}

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

@@ -180,20 +180,20 @@ export function ParametricInspector({
                 <>
                   <ActionButton
                     className="w-full flex-none"
-                    icon={<Trash2 className="h-4 w-4 text-red-400" />}
+                    icon={<Trash2 className="h-4 w-4 text-red-600 dark:text-red-400" />}
                     label="Delete"
                     onClick={() => handleDelete(false)}
                   />
                   <ActionButton
                     className="w-full flex-none"
-                    icon={<Trash2 className="h-4 w-4 text-red-400" />}
+                    icon={<Trash2 className="h-4 w-4 text-red-600 dark:text-red-400" />}
                     label="Delete with contents"
                     onClick={() => handleDelete(true)}
                   />
                 </>
               ) : (
                 <ActionButton
-                  className="border-red-500/40 text-red-200 hover:bg-red-500/15"
+                  className="border-red-500/40 text-red-700 dark:text-red-200 hover:bg-red-500/15"
                   icon={<Trash2 className="h-4 w-4" />}
                   label="Delete"
                   onClick={() => handleDelete()}