@pascal-app/editor 0.9.1 → 0.9.2

package/src/components/ui/sidebar/panels/site-panel/solar-panel-tree-node.tsx

@@ -2,6 +2,7 @@ import { type AnyNodeId, type SolarPanelNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
+import { SnapTargetIcon } from '../../../snap-target-badge'
 import useEditor from './../../../../../store/use-editor'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
@@ -51,13 +52,15 @@ export const SolarPanelTreeNode = memo(function SolarPanelTreeNode({
       expanded={false}
       hasChildren={false}
       icon={
-        <Image
-          alt=""
-          className="object-contain opacity-60"
-          height={14}
-          src="/icons/roof.png"
-          width={14}
-        />
+        <SnapTargetIcon target="roof">
+          <Image
+            alt=""
+            className="object-contain opacity-60"
+            height={14}
+            src="/icons/roof.webp"
+            width={14}
+          />
+        </SnapTargetIcon>
       }
       isHovered={isHovered}
       isLast={isLast}

package/src/components/ui/sidebar/panels/site-panel/spawn-tree-node.tsx

@@ -54,7 +54,7 @@ export const SpawnTreeNode = memo(function SpawnTreeNode({
           alt=""
           className="object-contain"
           height={14}
-          src="/icons/spawn-point.png"
+          src="/icons/spawn-point.webp"
           width={14}
         />
       }

package/src/components/ui/sidebar/panels/site-panel/stair-tree-node.tsx

@@ -98,7 +98,7 @@ export const StairTreeNode = memo(function StairTreeNode({
         expanded={expanded}
         hasChildren={segments.length > 0}
         icon={
-          <Image alt="" className="object-contain" height={14} src="/icons/stairs.png" width={14} />
+          <Image alt="" className="object-contain" height={14} src="/icons/stairs.webp" width={14} />
         }
         isDropTarget={isValidDropTarget && isDropTarget}
         isHovered={isHovered || isDropTarget}
@@ -206,7 +206,7 @@ function StairSegmentTreeNode({
             alt=""
             className="object-contain opacity-60"
             height={14}
-            src="/icons/stairs.png"
+            src="/icons/stairs.webp"
             width={14}
           />
         }

package/src/components/ui/sidebar/panels/site-panel/tree-node.tsx

@@ -1,7 +1,10 @@
-import { type AnyNodeId, emitter, useScene } from '@pascal-app/core'
+import { type AnyNode, type AnyNodeId, emitter, nodeRegistry, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
 import { ChevronRight } from 'lucide-react'
 import { AnimatePresence, motion } from 'motion/react'
 import { forwardRef, memo, useEffect, useRef } from 'react'
+import { resolveNodeSelectionTarget } from '../../../../../lib/selection-routing'
+import useEditor from '../../../../../store/use-editor'
 
 export function handleTreeSelection(
   e: React.MouseEvent,
@@ -53,6 +56,31 @@ export function focusTreeNode(nodeId: AnyNodeId) {
   emitter.emit('camera-controls:focus', { nodeId })
 }
 
+export function routeTreeSelectionToNode(node: AnyNode | null | undefined) {
+  const target = node ? resolveNodeSelectionTarget(node) : null
+  if (!target) return
+
+  const selectedIdsAfterClick = useViewer.getState().selection.selectedIds
+  const editor = useEditor.getState()
+  let didRoute = false
+
+  if (target.phase !== editor.phase) {
+    editor.setPhase(target.phase)
+    didRoute = true
+  }
+  if (
+    target.phase === 'structure' &&
+    target.structureLayer &&
+    target.structureLayer !== useEditor.getState().structureLayer
+  ) {
+    useEditor.getState().setStructureLayer(target.structureLayer)
+    didRoute = true
+  }
+  if (didRoute) {
+    useViewer.getState().setSelection({ selectedIds: selectedIdsAfterClick })
+  }
+}
+
 import { cn } from '../../../../../lib/utils'
 import { BuildingTreeNode } from './building-tree-node'
 import { CeilingTreeNode } from './ceiling-tree-node'
@@ -98,10 +126,13 @@ const treeNodeByType: Record<
     isLast?: boolean
     nodeId: AnyNodeId
   }>,
+  cabinet: RegistryTreeNode,
+  'cabinet-module': RegistryTreeNode,
   'box-vent': RegistryTreeNode,
   ceiling: CeilingTreeNode,
   chimney: ChimneyTreeNode,
   dormer: DormerTreeNode,
+  downspout: RegistryTreeNode,
   'solar-panel': SolarPanelTreeNode,
   column: ColumnTreeNode,
   elevator: ElevatorTreeNode,
@@ -124,10 +155,12 @@ const treeNodeByType: Record<
   wall: WallTreeNode,
   fence: FenceTreeNode,
   gutter: GutterTreeNode,
+  measurement: RegistryTreeNode,
   'ridge-vent': RegistryTreeNode,
   'turbine-vent': RegistryTreeNode,
   cupola: RegistryTreeNode,
   'eyebrow-vent': RegistryTreeNode,
+  skylight: RegistryTreeNode,
   roof: RoofTreeNode,
   stair: StairTreeNode,
   door: DoorTreeNode,
@@ -141,7 +174,15 @@ const treeNodeByType: Record<
 }
 
 export const TreeNode = memo(function TreeNode({ nodeId, depth = 0, isLast }: TreeNodeProps) {
+  // Registry-driven row hiding (`def.tree.hidden`) — primitive boolean
+  // selector so unrelated scene updates don't re-render every row.
+  const shouldHide = useScene((state) => {
+    const node = state.nodes[nodeId]
+    if (!node) return false
+    return nodeRegistry.get(node.type)?.tree?.hidden?.(node, state.nodes) ?? false
+  })
   const nodeType = useScene((state) => state.nodes[nodeId]?.type)
+  if (shouldHide) return null
   if (!nodeType) return null
   const Component = treeNodeByType[nodeType]
   if (!Component) return null
@@ -266,10 +307,10 @@ export const TreeNodeWrapper = forwardRef<HTMLDivElement, TreeNodeWrapperProps>(
               </motion.div>
             ) : null}
           </button>
-          <div className="flex min-w-0 flex-1 items-center gap-1.5">
+          <div className="flex min-w-0 flex-1 items-center gap-2">
             <span
               className={cn(
-                'flex h-4 w-4 shrink-0 items-center justify-center transition-all duration-200',
+                'flex h-5 w-5 shrink-0 items-center justify-center transition-all duration-200',
                 !isSelected && 'opacity-60 grayscale',
               )}
             >

package/src/components/ui/sidebar/panels/site-panel/tree-structure.ts

@@ -0,0 +1,36 @@
+import { type AnyNode, type AnyNodeId, nodeRegistry } from '@pascal-app/core'
+
+/**
+ * Child ids the sidebar tree renders under a node: the kind's
+ * `def.tree.childIds` override when declared, otherwise the node's own
+ * `children`. Kind-agnostic — kinds that reshape their subtree (hidden
+ * derived nodes, flattened containers) do so via the registry hook.
+ */
+export function resolveTreeChildIds(
+  nodeId: AnyNodeId,
+  nodes: Readonly<Partial<Record<AnyNodeId, AnyNode>>>,
+): AnyNodeId[] {
+  const node = nodes[nodeId]
+  if (!node) return []
+  const childIds = nodeRegistry.get(node.type)?.tree?.childIds
+  if (childIds) return childIds(node, nodes)
+  const children = (node as { children?: unknown }).children
+  return Array.isArray(children) ? (children as AnyNodeId[]) : []
+}
+
+/**
+ * Whether `targetId` appears anywhere under `nodeId` in the *rendered*
+ * sidebar tree (i.e. walking registry-overridden child ids, not the raw
+ * scene graph). Drives auto-expansion when a descendant gets selected.
+ */
+export function treeContainsDescendant(
+  nodeId: AnyNodeId,
+  targetId: AnyNodeId,
+  nodes: Readonly<Partial<Record<AnyNodeId, AnyNode>>>,
+): boolean {
+  for (const childId of resolveTreeChildIds(nodeId, nodes)) {
+    if (childId === targetId) return true
+    if (treeContainsDescendant(childId, targetId, nodes)) return true
+  }
+  return false
+}

package/src/components/ui/sidebar/panels/site-panel/wall-tree-node.tsx

@@ -79,7 +79,7 @@ export const WallTreeNode = memo(function WallTreeNode({
       expanded={expanded}
       hasChildren={children.length > 0}
       icon={
-        <Image alt="" className="object-contain" height={14} src="/icons/wall.png" width={14} />
+        <Image alt="" className="object-contain" height={14} src="/icons/wall.webp" width={14} />
       }
       isHovered={isHovered}
       isLast={isLast}

package/src/components/ui/sidebar/panels/site-panel/window-tree-node.tsx

@@ -1,9 +1,10 @@
 'use client'
 
-import { type AnyNodeId, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type WindowNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
+import { resolveNodeSnapTarget, SnapTargetIcon } from '../../../snap-target-badge'
 import useEditor from './../../../../../store/use-editor'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
@@ -22,6 +23,7 @@ export const WindowTreeNode = memo(function WindowTreeNode({
 }: WindowTreeNodeProps) {
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId as AnyNodeId]?.visible !== false)
+  const node = useScene((s) => s.nodes[nodeId] as WindowNode | undefined)
   const isSelected = useViewer((state) => state.selection.selectedIds.includes(nodeId))
   const isHovered = useViewer((state) => state.hoveredId === nodeId)
   const setSelection = useViewer((state) => state.setSelection)
@@ -45,6 +47,7 @@ export const WindowTreeNode = memo(function WindowTreeNode({
 
   const handleStartEditing = useCallback(() => setIsEditing(true), [])
   const handleStopEditing = useCallback(() => setIsEditing(false), [])
+  const snapTarget = resolveNodeSnapTarget(node) ?? 'wall'
 
   return (
     <TreeNodeWrapper
@@ -53,7 +56,9 @@ export const WindowTreeNode = memo(function WindowTreeNode({
       expanded={false}
       hasChildren={false}
       icon={
-        <Image alt="" className="object-contain" height={14} src="/icons/window.png" width={14} />
+        <SnapTargetIcon target={snapTarget}>
+          <Image alt="" className="object-contain" height={14} src="/icons/window.webp" width={14} />
+        </SnapTargetIcon>
       }
       isHovered={isHovered}
       isLast={isLast}

package/src/components/ui/sidebar/panels/site-panel/zone-tree-node.tsx

@@ -2,6 +2,7 @@ import { useScene, type ZoneNode } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { memo, useCallback, useState } from 'react'
 import { ColorDot } from './../../../../../components/ui/primitives/color-dot'
+import { formatAreaLabel } from './../../../../../lib/measurements'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
@@ -26,6 +27,7 @@ export const ZoneTreeNode = memo(function ZoneTreeNode({
   const isHovered = useViewer((state) => state.hoveredId === nodeId)
   const setSelection = useViewer((state) => state.setSelection)
   const setHoveredId = useViewer((state) => state.setHoveredId)
+  const unit = useViewer((state) => state.unit)
 
   const handleClick = useCallback(() => setSelection({ zoneId: nodeId }), [nodeId, setSelection])
   const handleDoubleClick = useCallback(() => focusTreeNode(nodeId), [nodeId])
@@ -34,9 +36,7 @@ export const ZoneTreeNode = memo(function ZoneTreeNode({
   const handleStartEditing = useCallback(() => setIsEditing(true), [])
   const handleStopEditing = useCallback(() => setIsEditing(false), [])
 
-  // Calculate approximate area from polygon
-  const area = calculatePolygonArea(polygon).toFixed(1)
-  const defaultName = `Zone (${area}m²)`
+  const defaultName = `Zone (${formatAreaLabel(calculatePolygonArea(polygon), unit)})`
 
   return (
     <TreeNodeWrapper

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

@@ -1,6 +1,7 @@
 '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'
@@ -65,37 +66,50 @@ interface IconRailProps {
  * 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">
-        {tabs.map((tab) => {
-          // Only show the active highlight while the panel is open. When
-          // collapsed nothing is "open", so every icon reads as unselected.
-          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>
-          )
-        })}
+        {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>
+  )
+}