@pascal-app/editor 0.8.0 → 0.9.2

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

@@ -1,7 +1,14 @@
-import { emitter, useScene, type ZoneNode } from '@pascal-app/core'
+import {
+  type AnyNodeId,
+  emitter,
+  useScene,
+  type ZoneNode,
+} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { Camera, Hexagon, Trash2 } from 'lucide-react'
+import { Camera, Hexagon, Save, Trash2 } from 'lucide-react'
 import { useState } from 'react'
+import { sfxEmitter } from './../../../../../lib/sfx-bus'
+import { collectZoneContentIds } from './../../../../../lib/zone-content'
 import { ColorDot } from './../../../../../components/ui/primitives/color-dot'
 import {
   Popover,
@@ -10,6 +17,8 @@ import {
 } from './../../../../../components/ui/primitives/popover'
 import { cn } from './../../../../../lib/utils'
 import useEditor from './../../../../../store/use-editor'
+import { ActionButton } from '../../../controls/action-button'
+import { PanelSection } from '../../../controls/panel-section'
 
 function ZoneItem({ zone }: { zone: ZoneNode }) {
   const [cameraPopoverOpen, setCameraPopoverOpen] = useState(false)
@@ -26,6 +35,7 @@ function ZoneItem({ zone }: { zone: ZoneNode }) {
 
   const handleDelete = (e: React.MouseEvent) => {
     e.stopPropagation()
+    sfxEmitter.emit('sfx:structure-delete')
     deleteNode(zone.id)
     if (isSelected) {
       setSelection({ zoneId: null })
@@ -125,6 +135,8 @@ function ZoneItem({ zone }: { zone: ZoneNode }) {
 export function ZonePanel() {
   const nodes = useScene((state) => state.nodes)
   const currentLevelId = useViewer((state) => state.selection.levelId)
+  const selectedZoneId = useViewer((state) => state.selection.zoneId)
+  const setSelection = useViewer((state) => state.setSelection)
   const setPhase = useEditor((state) => state.setPhase)
   const setMode = useEditor((state) => state.setMode)
   const setTool = useEditor((state) => state.setTool)
@@ -133,6 +145,7 @@ export function ZonePanel() {
   const levelZones = Object.values(nodes).filter(
     (node): node is ZoneNode => node.type === 'zone' && node.parentId === currentLevelId,
   )
+  const selectedZone = levelZones.find((zone) => zone.id === selectedZoneId)
 
   const handleAddZone = () => {
     if (currentLevelId) {
@@ -142,6 +155,17 @@ export function ZonePanel() {
     }
   }
 
+  const deleteSelectedZone = (withContent: boolean) => {
+    if (!selectedZone) return
+    const scene = useScene.getState()
+    const ids = withContent
+      ? [selectedZone.id as AnyNodeId, ...collectZoneContentIds(scene.nodes, selectedZone)]
+      : [selectedZone.id as AnyNodeId]
+    sfxEmitter.emit('sfx:structure-delete')
+    scene.deleteNodes(Array.from(new Set(ids)))
+    setSelection({ selectedIds: [], zoneId: null })
+  }
+
   if (!currentLevelId) {
     return (
       <div className="px-3 py-4 text-muted-foreground text-sm">
@@ -162,6 +186,31 @@ export function ZonePanel() {
       ) : (
         levelZones.map((zone) => <ZoneItem key={zone.id} zone={zone} />)
       )}
+      {selectedZone ? (
+        <PanelSection className="mt-2 border-t" title="Actions">
+          <ActionButton
+            className="w-full flex-none"
+            icon={<Save className="h-4 w-4" />}
+            label="Save to catalog"
+            onClick={() => emitter.emit('room-preset:create', { zoneId: selectedZone.id })}
+            type="button"
+          />
+          <ActionButton
+            className="w-full flex-none"
+            icon={<Trash2 className="h-4 w-4 text-red-400" />}
+            label="Delete"
+            onClick={() => deleteSelectedZone(false)}
+            type="button"
+          />
+          <ActionButton
+            className="w-full flex-none"
+            icon={<Trash2 className="h-4 w-4 text-red-400" />}
+            label="Delete with contents"
+            onClick={() => deleteSelectedZone(true)}
+            type="button"
+          />
+        </PanelSection>
+      ) : null}
     </div>
   )
 }

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

@@ -1,13 +1,18 @@
 'use client'
 
 import type { ReactNode } from 'react'
+import { editorHostPanelRegistry } from '../../../lib/plugin-panels'
+import { triggerSFX } from './../../../lib/sfx-bus'
 import { cn } from './../../../lib/utils'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../primitives/tooltip'
 
 export type SidebarTab = {
   id: string
   label: string
   mobileDefaultSnap?: number
   mobileIcon?: ReactNode
+  /** Desktop icon shown in the vertical rail (v2 layout). */
+  icon?: ReactNode
 }
 
 interface TabBarProps {
@@ -30,7 +35,11 @@ export function TabBar({ tabs, activeTab, onTabChange }: TabBarProps) {
                 : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground',
             )}
             key={tab.id}
-            onClick={() => onTabChange(tab.id)}
+            onClick={() => {
+              triggerSFX('sfx:menu-click')
+              onTabChange(tab.id)
+            }}
+            onMouseEnter={() => triggerSFX('sfx:menu-hover')}
             type="button"
           >
             {tab.label}
@@ -40,3 +49,68 @@ export function TabBar({ tabs, activeTab, onTabChange }: TabBarProps) {
     </div>
   )
 }
+
+interface IconRailProps {
+  tabs: SidebarTab[]
+  /** Highlighted tab. Stays highlighted while the panel is collapsed. */
+  activeTab: string
+  /** True when the panel beside the rail is collapsed. */
+  collapsed: boolean
+  /** Clicking a rail icon: switch tab, or toggle the panel (see layout). */
+  onIconClick: (id: string) => void
+}
+
+/**
+ * Vertical icon rail for the v2 left column. Always visible (even when the
+ * panel is collapsed) so the user can reopen the panel by clicking an icon.
+ * The label renders as a hover tooltip on the right.
+ */
+export function IconRail({ tabs, activeTab, collapsed, onIconClick }: IconRailProps) {
+  const pluginPanelIds = new Set(
+    editorHostPanelRegistry.getSnapshot().flatMap((panel) =>
+      panel.pluginId ? [panel.id] : [],
+    ),
+  )
+  const defaultTabs = tabs.filter((tab) => !pluginPanelIds.has(tab.id) && tab.id !== 'plugins')
+  const pluginTabs = tabs.filter((tab) => pluginPanelIds.has(tab.id) || tab.id === 'plugins')
+
+  const renderTab = (tab: SidebarTab) => {
+    const showActive = activeTab === tab.id && !collapsed
+    return (
+      <Tooltip key={tab.id}>
+        <TooltipTrigger asChild>
+          <button
+            className={cn(
+              'group flex h-11 w-11 items-center justify-center rounded-xl transition-all duration-200 [&_img]:transition-[opacity,filter] [&_img]:duration-200',
+              showActive
+                ? 'bg-accent text-foreground shadow-sm [&_img]:opacity-100 [&_img]:grayscale-0'
+                : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground [&_img]:opacity-60 [&_img]:grayscale hover:[&_img]:opacity-100 hover:[&_img]:grayscale-0',
+            )}
+            onClick={() => {
+              triggerSFX('sfx:menu-click')
+              onIconClick(tab.id)
+            }}
+            onMouseEnter={() => triggerSFX('sfx:menu-hover')}
+            type="button"
+          >
+            {tab.icon ?? tab.label.charAt(0)}
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="right">{tab.label}</TooltipContent>
+      </Tooltip>
+    )
+  }
+
+  return (
+    <TooltipProvider delayDuration={0} disableHoverableContent>
+      <div className="flex h-full w-14 shrink-0 flex-col items-center gap-1 border-border/50 border-r py-2">
+        {defaultTabs.map(renderTab)}
+        {pluginTabs.length > 0 && (
+          <div className="mt-1 flex w-11 flex-col items-center gap-1 border-border/70 border-t pt-2">
+            {pluginTabs.map(renderTab)}
+          </div>
+        )}
+      </div>
+    </TooltipProvider>
+  )
+}

package/src/components/ui/sidebar/use-plugin-panels.tsx

@@ -0,0 +1,132 @@
+'use client'
+
+import { Icon } from '@iconify/react'
+import { type IconRef, useScene } from '@pascal-app/core'
+import { Plus } from 'lucide-react'
+import {
+  type ComponentType,
+  lazy,
+  type ReactNode,
+  Suspense,
+  useEffect,
+  useSyncExternalStore,
+} from 'react'
+import useEditor from '../../../store/use-editor'
+import { editorHostPanelRegistry, type EditorHostPanel } from '../../../lib/plugin-panels'
+import { ErrorBoundary } from '../primitives/error-boundary'
+import type { ExtraPanel } from './icon-rail'
+import { PluginsPanel } from './panels/plugins-panel'
+
+const pluginsManagerPanel: ExtraPanel = {
+  id: 'plugins',
+  label: 'Plugins',
+  icon: <Plus className="h-5 w-5" />,
+  component: PluginsPanel,
+}
+
+/** Resolve a plugin's {@link IconRef} into a rail-sized React node. Mirrors the
+ * inspector's `renderIcon`, sized for the 24px icon-rail button. */
+function renderIconRef(ref: IconRef): ReactNode {
+  if (ref.kind === 'url') {
+    return <img alt="" className="h-5 w-5 object-contain" src={ref.src} />
+  }
+  if (ref.kind === 'iconify') {
+    return <Icon height={20} icon={ref.name} width={20} />
+  }
+  if (ref.kind === 'svg') {
+    return (
+      <svg height={20} viewBox={ref.viewBox} width={20}>
+        <path d={ref.path} fill="currentColor" />
+      </svg>
+    )
+  }
+  const LazyIcon = lazy(ref.module)
+  return (
+    <Suspense fallback={null}>
+      <LazyIcon />
+    </Suspense>
+  )
+}
+
+function PluginPanelCrashed({ label }: { label: string }) {
+  return (
+    <div className="flex flex-col gap-2 p-4 text-sm">
+      <p className="font-medium text-sidebar-foreground">"{label}" plugin crashed</p>
+      <p className="text-sidebar-foreground/50 text-xs">
+        This panel hit an error and was unloaded for this session. The rest of the editor is
+        unaffected — reload to try again.
+      </p>
+    </div>
+  )
+}
+
+// `React.lazy` must be called once per loader so the resolved component keeps a
+// stable identity across renders (otherwise switching panels remounts the tree
+// every time the sidebar re-renders). Cache the wrapped component by its loader.
+const wrappedPanelCache = new WeakMap<EditorHostPanel['component'], ComponentType>()
+
+function resolvePanelComponent(panel: EditorHostPanel): ComponentType {
+  const cached = wrappedPanelCache.get(panel.component)
+  if (cached) return cached
+  const Lazy = lazy(panel.component)
+  const Wrapped: ComponentType = () => (
+    <ErrorBoundary fallback={<PluginPanelCrashed label={panel.label} />}>
+      <Suspense fallback={<div className="p-4 text-sidebar-foreground/50 text-sm">Loading…</div>}>
+        <Lazy />
+      </Suspense>
+    </ErrorBoundary>
+  )
+  Wrapped.displayName = `PluginPanel(${panel.id})`
+  wrappedPanelCache.set(panel.component, Wrapped)
+  return Wrapped
+}
+
+/**
+ * Merge host-registered panels (from the observable {@link editorHostPanelRegistry})
+ * with the host's `extraPanels`, returning the combined list the icon rail and
+ * panel-content area render. Host panels keep their leading order and win on id
+ * collisions. Subscribes to the registry so a panel that registers after the
+ * first render makes the rail re-render.
+ *
+ * Panels are filtered by the current workspace: a panel surfaces only in the
+ * workspaces it declares (`EditorHostPanel.workspaces`, default `['edit']`), so an
+ * authoring panel like Nature doesn't ride into the studio rail.
+ */
+export function useHostPanels(hostPanels?: ExtraPanel[]): ExtraPanel[] {
+  const registered = useSyncExternalStore(
+    editorHostPanelRegistry.subscribe,
+    editorHostPanelRegistry.getSnapshot,
+    editorHostPanelRegistry.getSnapshot,
+  )
+  const workspaceMode = useEditor((s) => s.workspaceMode)
+  const installedPlugins = useScene((s) => s.installedPlugins)
+  const hostIds = new Set(hostPanels?.map((p) => p.id))
+
+  useEffect(() => {
+    const scene = useScene.getState()
+    if (scene.hasExplicitPluginInstallState) return
+    const defaults = editorHostPanelRegistry.getDefaultInstalledPluginIds()
+    if (defaults.every((pluginId) => scene.installedPlugins.includes(pluginId))) return
+    scene.setInstalledPlugins([...scene.installedPlugins, ...defaults], { explicit: false })
+  }, [registered])
+
+  const fromRegistry = registered
+    .filter(
+      (p) =>
+        !hostIds.has(p.id) &&
+        (p.workspaces ?? ['edit']).includes(workspaceMode) &&
+        (!p.pluginId || installedPlugins.includes(p.pluginId)),
+    )
+    .map(
+      (p): ExtraPanel => ({
+        id: p.id,
+        label: p.label,
+        icon: renderIconRef(p.icon),
+        component: resolvePanelComponent(p),
+        pluginId: p.pluginId,
+      }),
+    )
+  const manager =
+    workspaceMode === 'edit' && !hostIds.has(pluginsManagerPanel.id) ? [pluginsManagerPanel] : []
+  return [...(hostPanels ?? []), ...fromRegistry, ...manager]
+}

package/src/components/ui/snap-target-badge.test.tsx

@@ -0,0 +1,40 @@
+import { describe, expect, test } from 'bun:test'
+import type { AnyNode } from '@pascal-app/core'
+import { resolveAssetSnapTarget, resolveNodeSnapTarget } from './snap-target-badge'
+
+describe('resolveAssetSnapTarget', () => {
+  test('maps wall-hosted catalog assets to a wall badge', () => {
+    expect(resolveAssetSnapTarget('wall')).toBe('wall')
+    expect(resolveAssetSnapTarget('wall-side')).toBe('wall')
+  })
+
+  test('maps ceiling-hosted catalog assets to a ceiling badge', () => {
+    expect(resolveAssetSnapTarget('ceiling')).toBe('ceiling')
+  })
+
+  test('does not badge floor assets', () => {
+    expect(resolveAssetSnapTarget(undefined)).toBeNull()
+  })
+})
+
+describe('resolveNodeSnapTarget', () => {
+  test('prefers roof attachment when a node is hosted by a roof segment', () => {
+    const node = {
+      id: 'window_1',
+      type: 'window',
+      roofSegmentId: 'roof-segment_1',
+    } as unknown as AnyNode
+
+    expect(resolveNodeSnapTarget(node)).toBe('roof')
+  })
+
+  test('badges gutter-hosted downspouts as roof accessories', () => {
+    const node = {
+      id: 'downspout_1',
+      type: 'downspout',
+      gutterId: 'gutter_1',
+    } as unknown as AnyNode
+
+    expect(resolveNodeSnapTarget(node)).toBe('roof')
+  })
+})

package/src/components/ui/snap-target-badge.tsx

@@ -0,0 +1,88 @@
+import type { AnyNode, AssetInput } from '@pascal-app/core'
+import type { ReactNode } from 'react'
+import { cn } from '../../lib/utils'
+
+export type SnapTarget = 'wall' | 'ceiling' | 'roof'
+export type SnapTargetBadgeSize = 'tile' | 'tree'
+
+const SNAP_TARGET_ICONS: Record<SnapTarget, string> = {
+  wall: '/icons/wall.webp',
+  ceiling: '/icons/ceiling.webp',
+  roof: '/icons/roof.webp',
+}
+
+const SNAP_TARGET_LABELS: Record<SnapTarget, string> = {
+  wall: 'Wall attachment',
+  ceiling: 'Ceiling attachment',
+  roof: 'Roof attachment',
+}
+
+const SNAP_TARGET_BADGE_SIZE_CLASSES: Record<SnapTargetBadgeSize, string> = {
+  tile: 'h-6 w-6 rounded-md',
+  tree: 'h-3.5 w-3.5 rounded-[3px]',
+}
+
+const SNAP_TARGET_ICON_SIZE_CLASSES: Record<SnapTargetBadgeSize, string> = {
+  tile: 'h-[18px] w-[18px]',
+  tree: 'h-2.5 w-2.5',
+}
+
+export function resolveAssetSnapTarget(attachTo: AssetInput['attachTo']): SnapTarget | null {
+  if (attachTo === 'wall' || attachTo === 'wall-side') return 'wall'
+  if (attachTo === 'ceiling') return 'ceiling'
+  return null
+}
+
+export function resolveNodeSnapTarget(node: AnyNode | null | undefined): SnapTarget | null {
+  if (!node) return null
+  if ('roofSegmentId' in node && typeof node.roofSegmentId === 'string') return 'roof'
+  if (node.type === 'downspout') return 'roof'
+  if (node.type === 'door' || node.type === 'window') return 'wall'
+  if (node.type === 'item') return resolveAssetSnapTarget(node.asset?.attachTo)
+  return null
+}
+
+export function SnapTargetBadge({
+  className,
+  size = 'tile',
+  target,
+}: {
+  className?: string
+  size?: SnapTargetBadgeSize
+  target: SnapTarget
+}) {
+  return (
+    <span
+      className={cn(
+        'flex items-center justify-center bg-black/65 ring-1 ring-white/20',
+        SNAP_TARGET_BADGE_SIZE_CLASSES[size],
+        className,
+      )}
+    >
+      <img
+        alt={SNAP_TARGET_LABELS[target]}
+        className={cn('object-contain', SNAP_TARGET_ICON_SIZE_CLASSES[size])}
+        src={SNAP_TARGET_ICONS[target]}
+      />
+    </span>
+  )
+}
+
+export function SnapTargetIcon({
+  children,
+  target,
+}: {
+  children: ReactNode
+  target: SnapTarget
+}) {
+  return (
+    <span className="relative inline-flex h-5 w-5 items-center justify-center">
+      {children}
+      <SnapTargetBadge
+        className="-right-1.5 -bottom-1.5 absolute"
+        size="tree"
+        target={target}
+      />
+    </span>
+  )
+}