@pascal-app/editor 0.9.1 → 0.9.2

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

@@ -29,7 +29,7 @@ import useEditor from '../../../store/use-editor'
 import { MobilePanelSheet } from './mobile-panel-sheet'
 import { MobileSelectionBar } from './mobile-selection-bar'
 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'
 
@@ -174,9 +174,6 @@ export function PanelManager({ inspectorFooter }: { inspectorFooter?: React.Reac
   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 +187,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 +226,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

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

@@ -62,9 +62,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(() => {

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/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 =

package/src/components/ui/sidebar/icon-rail.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { Plus } from 'lucide-react'
 import type { ComponentType, ReactNode } from 'react'
 import {
   Tooltip,
@@ -10,7 +11,13 @@ import { cn } from './../../../lib/utils'
 
 export type PanelId = string
 
-export type ExtraPanel = { id: string; icon: ReactNode; label: string; component: ComponentType }
+export type ExtraPanel = {
+  id: string
+  icon: ReactNode
+  label: string
+  component: ComponentType
+  pluginId?: string
+}
 
 interface IconRailProps {
   activePanel: PanelId
@@ -22,13 +29,13 @@ interface IconRailProps {
 
 const sitePanel: { id: PanelId; iconSrc: string; label: string } = {
   id: 'site',
-  iconSrc: '/icons/level.png',
+  iconSrc: '/icons/level.webp',
   label: 'Site',
 }
 
 const settingsPanel: { id: PanelId; iconSrc: string; label: string } = {
   id: 'settings',
-  iconSrc: '/icons/settings.png',
+  iconSrc: '/icons/settings.webp',
   label: 'Settings',
 }
 
@@ -41,6 +48,38 @@ export function IconRail({
   extraPanels,
   className,
 }: IconRailProps) {
+  const regularExtraPanels = extraPanels?.filter((panel) => !panel.pluginId && panel.id !== 'plugins')
+  const pluginPanels = extraPanels?.filter((panel) => panel.pluginId)
+  const pluginsPanel = extraPanels?.find((panel) => panel.id === 'plugins')
+
+  const renderExtraPanel = (panel: ExtraPanel) => {
+    const isActive = activePanel === panel.id
+    return (
+      <Tooltip key={panel.id}>
+        <TooltipTrigger asChild>
+          <button
+            className={cn(
+              'flex h-9 w-9 items-center justify-center rounded-lg transition-all',
+              isActive ? 'bg-accent' : 'hover:bg-accent',
+            )}
+            onClick={() => onPanelChange(panel.id)}
+            type="button"
+          >
+            <span
+              className={cn(
+                'flex h-6 w-6 items-center justify-center transition-all',
+                !isActive && 'opacity-50',
+              )}
+            >
+              {panel.id === 'plugins' ? <Plus className="h-5 w-5" /> : panel.icon}
+            </span>
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="right">{panel.label}</TooltipContent>
+      </Tooltip>
+    )
+  }
+
   return (
     <div
       className={cn(
@@ -83,34 +122,7 @@ export function IconRail({
         )
       })}
 
-      {/* Extra panels (injected between site and settings) */}
-      {extraPanels?.map((panel) => {
-        const isActive = activePanel === panel.id
-        return (
-          <Tooltip key={panel.id}>
-            <TooltipTrigger asChild>
-              <button
-                className={cn(
-                  'flex h-9 w-9 items-center justify-center rounded-lg transition-all',
-                  isActive ? 'bg-accent' : 'hover:bg-accent',
-                )}
-                onClick={() => onPanelChange(panel.id)}
-                type="button"
-              >
-                <span
-                  className={cn(
-                    'flex h-6 w-6 items-center justify-center transition-all',
-                    !isActive && 'opacity-50',
-                  )}
-                >
-                  {panel.icon}
-                </span>
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="right">{panel.label}</TooltipContent>
-          </Tooltip>
-        )
-      })}
+      {regularExtraPanels?.map(renderExtraPanel)}
 
       {/* Settings panel */}
       {[settingsPanel].map((panel) => {
@@ -140,6 +152,13 @@ export function IconRail({
           </Tooltip>
         )
       })}
+
+      {(pluginPanels?.length || pluginsPanel) && (
+        <div className="mt-1 flex w-9 flex-col items-center gap-1 border-border/70 border-t pt-2">
+          {pluginPanels?.map(renderExtraPanel)}
+          {pluginsPanel && renderExtraPanel(pluginsPanel)}
+        </div>
+      )}
     </div>
   )
 }