@pascal-app/editor 0.9.1 → 1.0.0-beta.1

package/src/components/ui/item-catalog/item-catalog.tsx

@@ -1,18 +1,13 @@
 'use client'
 
 import type { AssetInput } from '@pascal-app/core'
-import { resolveCdnUrl } from '@pascal-app/viewer'
-import Image from 'next/image'
+import { resolveCdnUrl, useViewer } from '@pascal-app/viewer'
 import { useEffect } from 'react'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from './../../../components/ui/primitives/tooltip'
 import { triggerSFX } from './../../../lib/sfx-bus'
 import { cn } from './../../../lib/utils'
 import useEditor, { type CatalogCategory } from './../../../store/use-editor'
-import { CATALOG_ITEMS } from './catalog-items'
+import { resolveAssetSnapTarget, SnapTargetBadge } from '../snap-target-badge'
+import { CATALOG_ITEMS, type CatalogItem } from './catalog-items'
 
 export function ItemCatalog({
   category,
@@ -41,9 +36,9 @@ export function ItemCatalog({
   const setMode = useEditor((state) => state.setMode)
   const setTool = useEditor((state) => state.setTool)
 
-  const sourceItems = itemsOverride ?? CATALOG_ITEMS
+  const sourceItems: CatalogItem[] = itemsOverride ?? CATALOG_ITEMS
   // Server-provided results bypass all local filtering; otherwise filter by category/search/tags
-  const filteredItems =
+  const filteredItems: CatalogItem[] =
     overrideItems ??
     (() => {
       const categoryItems = search
@@ -58,22 +53,6 @@ export function ItemCatalog({
       })
     })()
 
-  const categoryItems = filteredItems
-
-  // Auto-select first item if current selection is not in the filtered list
-  useEffect(() => {
-    const isCurrentItemInCategory = categoryItems.some((item) => item.src === selectedItem?.src)
-    if (!isCurrentItemInCategory && categoryItems.length > 0) {
-      setSelectedItem(categoryItems[0] as AssetInput)
-    }
-  }, [categoryItems, selectedItem?.src, setSelectedItem])
-
-  const getAttachmentIcon = (attachTo: AssetInput['attachTo']) => {
-    if (attachTo === 'wall' || attachTo === 'wall-side') return '/icons/wall.png'
-    if (attachTo === 'ceiling') return '/icons/ceiling.png'
-    return null
-  }
-
   if (filteredItems.length === 0 && emptyState) {
     return <>{emptyState}</>
   }
@@ -86,7 +65,7 @@ export function ItemCatalog({
       {leadingTile}
       {filteredItems.map((item, index) => {
         const isSelected = selectedItem?.src === item?.src
-        const attachmentIcon = getAttachmentIcon(item?.attachTo)
+        const snapTarget = resolveAssetSnapTarget(item?.attachTo)
         return (
           <button
             className={cn(
@@ -96,8 +75,12 @@ export function ItemCatalog({
             key={index}
             onClick={() => {
               triggerSFX('sfx:menu-click')
+              // Drop the current selection before arming placement — keeping
+              // it would route shortcuts (rotate & co) to both the ghost and
+              // the selected node.
+              useViewer.getState().setSelection({ selectedIds: [], zoneId: null })
               setSelectedItem(item)
-              setTool('item')
+              setTool(item.tool ?? 'item')
               setMode('build')
             }}
             onMouseEnter={() => triggerSFX('sfx:menu-hover')}
@@ -110,14 +93,8 @@ export function ItemCatalog({
                 loading="eager"
                 src={resolveCdnUrl(item.thumbnail) || ''}
               />
-              {attachmentIcon && (
-                <div className="absolute right-1 bottom-1 flex h-4 w-4 items-center justify-center rounded bg-black/60">
-                  <img
-                    alt={item.attachTo === 'ceiling' ? 'Ceiling attachment' : 'Wall attachment'}
-                    className="h-4 w-4"
-                    src={attachmentIcon}
-                  />
-                </div>
+              {snapTarget && (
+                <SnapTargetBadge className="absolute right-1 bottom-1" target={snapTarget} />
               )}
             </div>
             <span className="truncate px-0.5 text-left font-medium text-[11px] text-muted-foreground group-hover:text-foreground">

package/src/components/ui/level-duplicate-dialog.tsx

@@ -3,7 +3,7 @@
 import type { LevelNode } from '@pascal-app/core'
 import { useEffect, useState } from 'react'
 import type { LevelDuplicatePreset } from '../../lib/level-duplication'
-import { getLevelDisplayName } from '../../lib/level-name'
+import { getLevelDisplayName } from '@pascal-app/core'
 import { cn } from '../../lib/utils'
 import {
   Dialog,

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

@@ -0,0 +1,57 @@
+'use client'
+
+import { type AnyNodeId, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Copy, Trash2 } from 'lucide-react'
+import { deleteSelection, duplicateSelectionAndPickUp } from '../../editor/group-actions'
+import { ActionButton, ActionGroup } from '../controls/action-button'
+import { PanelWrapper } from './panel-wrapper'
+import { formatSelectionBreakdown } from './selection-breakdown'
+
+/**
+ * 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").
+ */
+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 breakdown = useScene((s) =>
+    formatSelectionBreakdown(selectedIds.map((id) => s.nodes[id as AnyNodeId]?.type)),
+  )
+
+  return (
+    <PanelWrapper
+      footer={footer}
+      icon="/icons/select.webp"
+      onClose={() => setSelection({ selectedIds: [] })}
+      title={`${selectedIds.length} selected`}
+      width={320}
+    >
+      {breakdown && <div className="px-3 py-3 text-muted-foreground text-xs">{breakdown}</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>
+      </div>
+    </PanelWrapper>
+  )
+}

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

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

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

@@ -28,8 +28,9 @@ import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
 import { MobilePanelSheet } from './mobile-panel-sheet'
 import { MobileSelectionBar } from './mobile-selection-bar'
+import { MultiSelectionPanel } from './multi-selection-panel'
 import { getNodeDisplay } from './node-display'
-import { PaintPanel } from './paint-panel'
+import { resetDesktopInspectorCollapsed } from './panel-wrapper'
 import { ParametricInspector } from './parametric-inspector'
 import { ReferencePanel } from './reference-panel'
 
@@ -168,15 +169,18 @@ function MobilePanelLayer({
   )
 }
 
-export function PanelManager({ inspectorFooter }: { inspectorFooter?: React.ReactNode }) {
+export function PanelManager({
+  inspectorFooter,
+  multiSelectionFooter,
+}: {
+  inspectorFooter?: React.ReactNode
+  multiSelectionFooter?: React.ReactNode
+}) {
   const isMobile = useIsMobile()
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const selectedZoneId = useViewer((s) => s.selection.zoneId)
   const setSelection = useViewer((s) => s.setSelection)
   const selectedReferenceId = useEditor((s) => s.selectedReferenceId)
-  const isPaintPanelOpen = useEditor((s) => s.isPaintPanelOpen)
-  const mode = useEditor((s) => s.mode)
-  const activePaintMaterial = useEditor((s) => s.activePaintMaterial)
   // Only subscribe to the *type* of the single-selected node — string primitive
   // so we don't re-render on unrelated scene mutations.
   const selectedNodeType = useScene((s) => {
@@ -190,6 +194,27 @@ export function PanelManager({ inspectorFooter }: { inspectorFooter?: React.Reac
     return id ? (s.nodes[id as AnyNodeId] ?? null) : null
   })
 
+  // Node and reference selection are mutually exclusive: selecting a guide
+  // clears the node selection (handleGuideSelect), but node selection never
+  // cleared a lingering reference — so clicking a wall with a floorplan
+  // selected kept showing the reference panel. Clear the stale reference the
+  // moment a scene selection appears.
+  const setSelectedReferenceId = useEditor((s) => s.setSelectedReferenceId)
+  useEffect(() => {
+    if (selectedIds.length > 0 || selectedZoneId) {
+      setSelectedReferenceId(null)
+    }
+  }, [selectedIds, selectedZoneId, setSelectedReferenceId])
+
+  // The inspector's expanded state is shared across panel swaps, but a fresh
+  // selection after everything was deselected should open collapsed again.
+  const hasAnySelection = selectedIds.length > 0 || Boolean(selectedZoneId) || Boolean(selectedReferenceId)
+  useEffect(() => {
+    if (!hasAnySelection) {
+      resetDesktopInspectorCollapsed()
+    }
+  }, [hasAnySelection])
+
   if (isMobile) {
     if (selectedReferenceId) {
       return <MobilePanelLayer isReference={true} node={null} panel={<ReferencePanel />} />
@@ -208,15 +233,6 @@ export function PanelManager({ inspectorFooter }: { inspectorFooter?: React.Reac
     return <ReferencePanel />
   }
 
-  if (
-    isPaintPanelOpen &&
-    mode === 'material-paint' &&
-    activePaintMaterial?.material?.properties &&
-    !activePaintMaterial.materialPreset
-  ) {
-    return <PaintPanel />
-  }
-
   if (selectedZoneId && selectedIds.length === 0) {
     return (
       <ParametricInspector
@@ -228,5 +244,11 @@ export function PanelManager({ inspectorFooter }: { inspectorFooter?: React.Reac
     )
   }
 
+  // Multi-selection: compact docked panel (desktop only — the mobile branch
+  // above keeps today's behavior and renders nothing for multi-selections).
+  if (selectedIds.length > 1) {
+    return <MultiSelectionPanel footer={multiSelectionFooter} />
+  }
+
   return panelForType(selectedNodeType, inspectorFooter)
 }

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

@@ -17,6 +17,14 @@ 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))
@@ -52,7 +60,7 @@ export const InspectorFooterContext = createContext<React.ReactNode>(null)
 
 interface PanelWrapperProps {
   title: string
-  /** Either a URL path (legacy panels pass `/icons/floor.png` etc.,
+  /** Either a URL path (legacy panels pass `/icons/floor.webp` etc.,
    *  rendered via next/image) OR a React node (registry-driven
    *  inspector renders `<Icon icon="lucide:fence" />` from
    *  `def.presentation.icon`). */
@@ -85,8 +93,21 @@ export function PanelWrapper({
   const panelRef = useRef<HTMLDivElement>(null)
 
   // The whole panel is collapsed to just its header by default; the chevron
-  // expands it to reveal the inspector body.
-  const [collapsed, setCollapsed] = useState(true)
+  // expands it to reveal the inspector body. Keep the desktop value shared
+  // across inspector swaps (roof ↔ segment, etc.) so navigating between
+  // related panels preserves whether the user left the inspector open.
+  const [collapsed, setCollapsedState] = useState(desktopInspectorCollapsed)
+
+  const setCollapsed = useCallback(
+    (next: boolean | ((previous: boolean) => boolean)) => {
+      setCollapsedState((previous) => {
+        const resolved = typeof next === 'function' ? next(previous) : next
+        desktopInspectorCollapsed = resolved
+        return resolved
+      })
+    },
+    [],
+  )
 
   // Drag-to-reposition from the header. `offset` is a translation applied on
   // top of the default `top-20 right-4` anchor; null until first dragged.

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

@@ -14,6 +14,7 @@ import { useViewer } from '@pascal-app/viewer'
 import { Icon } from '@iconify/react'
 import { Move, Trash2 } from 'lucide-react'
 import { type ComponentType, lazy, Suspense, useCallback } from 'react'
+import { resolveMoveActionNode } from '../../../lib/direct-manipulation'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import { collectZoneContentIds } from '../../../lib/zone-content'
 import useEditor from '../../../store/use-editor'
@@ -62,9 +63,22 @@ export function ParametricInspector({
   const handleUpdate = useCallback(
     (patch: Partial<AnyNode>) => {
       if (!selectedId) return
-      useScene.getState().updateNode(selectedId, patch)
+      const scene = useScene.getState()
+      const node = scene.nodes[selectedId]
+      if (parametrics?.derive && node) {
+        const next = { ...node, ...patch } as AnyNode
+        patch = { ...patch, ...parametrics.derive(next, patch) }
+      }
+      // Bundle the edited node + any reconcile follow-ups into ONE
+      // updateNodes call so a single inspector edit is a single undo step.
+      const updates: { id: AnyNodeId; data: Partial<AnyNode> }[] = [{ id: selectedId, data: patch }]
+      if (parametrics?.reconcile && node) {
+        const next = { ...node, ...patch } as AnyNode
+        updates.push(...parametrics.reconcile(node as AnyNode, next))
+      }
+      scene.updateNodes(updates)
     },
-    [selectedId],
+    [selectedId, parametrics],
   )
 
   const clearSelection = useCallback(() => {
@@ -77,10 +91,11 @@ export function ParametricInspector({
 
   const handleMove = useCallback(() => {
     if (!selectedId) return
-    const node = useScene.getState().nodes[selectedId]
+    const sceneNodes = useScene.getState().nodes
+    const node = sceneNodes[selectedId]
     if (!node) return
     sfxEmitter.emit('sfx:item-pick')
-    useEditor.getState().setMovingNode(node as any)
+    useEditor.getState().setMovingNode(resolveMoveActionNode(node, sceneNodes) as any)
     clearSelection()
   }, [selectedId, clearSelection])
 

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

@@ -22,6 +22,7 @@ import {
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { guideEmitter } from '../../../lib/guide-events'
 import { getGuideImageName } from '../../../lib/local-guide-image'
+import { cn } from '../../../lib/utils'
 import useEditor from '../../../store/use-editor'
 import { ActionButton, ActionGroup } from '../controls/action-button'
 import { PanelSection } from '../controls/panel-section'
@@ -60,6 +61,9 @@ export function ReferencePanel() {
       ? (s.nodes[selectedReferenceId as AnyNode['id']] as ReferenceNode | undefined)
       : undefined,
   )
+  const isScaleFlowActive = useEditor(
+    (s) => s.referenceScaleActiveGuideId !== null && s.referenceScaleActiveGuideId === node?.id,
+  )
 
   const handleUpdate = useCallback(
     (updates: Partial<ReferenceNode>) => {
@@ -98,6 +102,9 @@ export function ReferencePanel() {
           } as Partial<GuideNode>,
         )
         setGuideScaleReferenceVisible(selectedReferenceId, true)
+        // The new image starts uncalibrated — drop the calibration auto-lock
+        // so it can be resized/rotated right away.
+        setGuideLocked(selectedReferenceId, false)
       } catch {
         setReplaceError('Could not replace that image.')
       } finally {
@@ -123,6 +130,13 @@ export function ReferencePanel() {
       return
     }
 
+    // The scale line is drawn on the 2D plan — starting from a 3D-only view
+    // would arm the flow invisibly inside the hidden floorplan panel.
+    const editor = useEditor.getState()
+    if (editor.viewMode === '3d') {
+      editor.setViewMode('2d')
+    }
+
     guideEmitter.emit('guide:set-reference-scale', { guideId: node.id })
   }, [node])
 
@@ -233,33 +247,54 @@ export function ReferencePanel() {
 
           <PanelSection title="Reference Scale">
             <div className="flex items-center gap-2 rounded-md border border-border/50 bg-background/40 px-2.5 py-2 text-sm">
-              <Ruler className="h-4 w-4 shrink-0 text-primary" />
+              <Ruler
+                className={cn(
+                  'h-4 w-4 shrink-0',
+                  node.scaleReference ? 'text-primary' : 'text-amber-600 dark:text-amber-400',
+                )}
+              />
               <span className="truncate text-muted-foreground">{scaleStatus}</span>
             </div>
 
-            <ActionGroup>
-              <ActionButton
-                label={node.scaleReference ? 'Edit Scale' : 'Set Scale'}
-                onClick={handleStartScale}
-              />
-              <ActionButton label="Cancel" onClick={handleCancelScale} />
-            </ActionGroup>
+            {!node.scaleReference && (
+              <p className="px-0.5 text-muted-foreground text-xs leading-snug">
+                {isScaleFlowActive
+                  ? 'Click both ends of a known distance on the plan, then type its real length.'
+                  : 'Draw a line over a known dimension on the plan, then type its real length to scale the image exactly.'}
+              </p>
+            )}
 
             <ActionGroup>
               <ActionButton
-                disabled={!node.scaleReference}
-                label={scaleReferenceVisible ? 'Hide Scale' : 'Show Scale'}
-                onClick={() => {
-                  if (!node.scaleReference) return
-                  setGuideScaleReferenceVisible(node.id, !scaleReferenceVisible)
-                }}
-              />
-              <ActionButton
-                disabled={!node.scaleReference}
-                label="Clear Scale"
-                onClick={() => handleUpdate({ scaleReference: null } as Partial<GuideNode>)}
+                className={cn(
+                  !node.scaleReference &&
+                    !isScaleFlowActive &&
+                    'border-primary/50 bg-primary/15 text-primary hover:bg-primary/25 active:bg-primary/25',
+                )}
+                label={
+                  isScaleFlowActive ? 'Cancel' : node.scaleReference ? 'Edit Scale' : 'Set Scale'
+                }
+                onClick={isScaleFlowActive ? handleCancelScale : handleStartScale}
               />
             </ActionGroup>
+
+            {node.scaleReference && (
+              <ActionGroup>
+                <ActionButton
+                  label={scaleReferenceVisible ? 'Hide Scale' : 'Show Scale'}
+                  onClick={() => setGuideScaleReferenceVisible(node.id, !scaleReferenceVisible)}
+                />
+                <ActionButton
+                  label="Clear Scale"
+                  onClick={() => {
+                    handleUpdate({ scaleReference: null } as Partial<GuideNode>)
+                    // Calibrating auto-locked the guide; clearing the scale
+                    // returns it to a freely-editable reference.
+                    setGuideLocked(node.id, false)
+                  }}
+                />
+              </ActionGroup>
+            )}
           </PanelSection>
 
           <PanelSection title="Quick Actions">

package/src/components/ui/panels/selection-breakdown.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, test } from 'bun:test'
+import { formatSelectionBreakdown } from './selection-breakdown'
+
+describe('formatSelectionBreakdown', () => {
+  test('counts per type in first-appearance order, pluralizing with +s', () => {
+    expect(formatSelectionBreakdown(['slab', 'stair', 'fence', 'fence'])).toBe(
+      '1 slab · 1 stair · 2 fences',
+    )
+  })
+
+  test('humanizes hyphenated kinds', () => {
+    expect(formatSelectionBreakdown(['roof-segment', 'roof-segment', 'wall'])).toBe(
+      '2 roof segments · 1 wall',
+    )
+  })
+
+  test('skips missing nodes', () => {
+    expect(formatSelectionBreakdown(['wall', undefined, null])).toBe('1 wall')
+  })
+
+  test('empty selection formats to an empty string', () => {
+    expect(formatSelectionBreakdown([])).toBe('')
+  })
+})

package/src/components/ui/panels/selection-breakdown.ts

@@ -0,0 +1,20 @@
+/**
+ * "1 slab · 1 stair · 2 fences" — one entry per node type in first-appearance
+ * order so the line stays stable while shift-clicking. Labels derive from the
+ * type id ('roof-segment' → 'roof segment'); pluralization is a simple +s
+ * (the codebase has no pluralize helper and no current kind needs one).
+ * Missing nodes (stale ids) are skipped.
+ */
+export function formatSelectionBreakdown(types: Array<string | null | undefined>): string {
+  const counts = new Map<string, number>()
+  for (const type of types) {
+    if (!type) continue
+    counts.set(type, (counts.get(type) ?? 0) + 1)
+  }
+  const parts: string[] = []
+  for (const [type, count] of counts) {
+    const label = type.replace(/-/g, ' ')
+    parts.push(`${count} ${count === 1 ? label : `${label}s`}`)
+  }
+  return parts.join(' · ')
+}

package/src/components/ui/primitives/shortcut-token.tsx

@@ -22,6 +22,17 @@ const MOUSE_SHORTCUTS = {
   },
 } as const
 
+// The platform-agnostic command modifier. Both Cmd and Ctrl bind the action; we
+// render the symbol for the *current* device so the hint reads native (⌘ on Mac,
+// Ctrl elsewhere) without implying only one of them works.
+const COMMAND_VALUES = new Set(['Cmd/Ctrl', 'Cmd', 'Command', 'Meta'])
+
+// Resolved once on the client at module load — the editor HUD is client-only, so
+// there's no server render to mismatch against. `navigator.platform` is enough
+// here and matches the detection used elsewhere (floorplan rotate hint).
+const IS_MAC =
+  typeof navigator !== 'undefined' && navigator.platform.toUpperCase().includes('MAC')
+
 type ShortcutTokenProps = React.ComponentProps<'kbd'> & {
   value: string
   displayValue?: string
@@ -30,16 +41,23 @@ type ShortcutTokenProps = React.ComponentProps<'kbd'> & {
 function ShortcutToken({ className, displayValue, value, ...props }: ShortcutTokenProps) {
   const mouseShortcut =
     value in MOUSE_SHORTCUTS ? MOUSE_SHORTCUTS[value as keyof typeof MOUSE_SHORTCUTS] : null
+  const isCommand = COMMAND_VALUES.has(value)
+  const isShift = value === 'Shift'
+  const commandDisplay = IS_MAC ? '⌘' : 'Ctrl'
+  const commandLabel = IS_MAC ? 'Command' : 'Control'
 
   return (
     <kbd
-      aria-label={mouseShortcut?.label ?? displayValue ?? value}
+      aria-label={
+        mouseShortcut?.label ??
+        (isCommand ? commandLabel : isShift ? 'Shift' : (displayValue ?? value))
+      }
       className={cn(
         'inline-flex h-6 items-center rounded border border-border bg-muted px-2 font-medium font-mono text-[11px] text-muted-foreground',
-        mouseShortcut && 'justify-center px-1.5',
+        (mouseShortcut || isShift) && 'justify-center px-1.5',
         className,
       )}
-      title={mouseShortcut?.label ?? value}
+      title={mouseShortcut?.label ?? (isCommand ? commandLabel : isShift ? 'Shift' : value)}
       {...props}
     >
       {mouseShortcut ? (
@@ -54,6 +72,24 @@ function ShortcutToken({ className, displayValue, value, ...props }: ShortcutTok
           />
           <span className="sr-only">{mouseShortcut.label}</span>
         </>
+      ) : isShift ? (
+        // Icon rather than the ⇧ text glyph — the font renders the glyph's
+        // crossbar too high to read as the shift key symbol.
+        <>
+          <Icon
+            aria-hidden="true"
+            className="shrink-0"
+            color="currentColor"
+            height={13}
+            icon="ph:arrow-fat-up"
+            width={13}
+          />
+          <span className="sr-only">Shift</span>
+        </>
+      ) : isCommand ? (
+        // The ⌘ glyph reads small next to letters at the same font size, so bump
+        // it up a touch on Mac. "Ctrl" stays at the token's normal size.
+        <span className={IS_MAC ? 'text-[13px] leading-none' : undefined}>{commandDisplay}</span>
       ) : (
         (displayValue ?? value)
       )}

package/src/components/ui/primitives/sidebar.tsx

@@ -63,6 +63,7 @@ export const useSidebarStore = create<SidebarStore>()(
     {
       name: 'sidebar-preferences',
       partialize: (state) => ({ width: state.width, isCollapsed: state.isCollapsed }),
+      skipHydration: true,
     },
   ),
 )

package/src/components/ui/sidebar/app-sidebar.tsx

@@ -16,6 +16,7 @@ import useEditor from './../../../store/use-editor'
 import { type ExtraPanel, IconRail } from './icon-rail'
 import { SettingsPanel, type SettingsPanelProps } from './panels/settings-panel'
 import { SitePanel, type SitePanelProps } from './panels/site-panel'
+import { useHostPanels } from './use-plugin-panels'
 
 interface AppSidebarProps {
   appMenuButton?: ReactNode
@@ -31,9 +32,12 @@ export function AppSidebar({
   sidebarTop,
   settingsPanelProps,
   sitePanelProps,
-  extraPanels,
+  extraPanels: hostExtraPanels,
   commandPaletteEmptyAction,
 }: AppSidebarProps) {
+  // Host-provided panels merged with registered host panels — the icon rail and
+  // content area treat both identically.
+  const extraPanels = useHostPanels(hostExtraPanels)
   const activePanel = useEditor((s) => s.activeSidebarPanel)
   const setActivePanel = useEditor((s) => s.setActiveSidebarPanel)
   const hasActivePanel =