@pascal-app/editor 0.9.1 → 0.9.2

package/src/components/ui/sidebar/panels/plugins-panel.tsx

@@ -0,0 +1,218 @@
+'use client'
+
+import { Icon } from '@iconify/react'
+import { type IconRef, useScene } from '@pascal-app/core'
+import { ChevronLeft, ChevronRight, ExternalLink, Puzzle } from 'lucide-react'
+import { lazy, type ReactNode, Suspense, useState, useSyncExternalStore } from 'react'
+import { editorHostPanelRegistry } from '../../../../lib/plugin-panels'
+import { Button } from '../../primitives/button'
+
+const PLUGIN_AUTHORING_URL =
+  'https://editor.pascal.app/docs/developers/plugins'
+
+function renderPluginIcon(ref: IconRef): ReactNode {
+  if (ref.kind === 'url') {
+    return <img alt="" className="h-8 w-8 object-contain" src={ref.src} />
+  }
+  if (ref.kind === 'iconify') {
+    return <Icon height={28} icon={ref.name} width={28} />
+  }
+  if (ref.kind === 'svg') {
+    return (
+      <svg height={28} viewBox={ref.viewBox} width={28}>
+        <path d={ref.path} fill="currentColor" />
+      </svg>
+    )
+  }
+  const LazyIcon = lazy(ref.module)
+  return (
+    <Suspense fallback={<Puzzle className="h-7 w-7" />}>
+      <LazyIcon />
+    </Suspense>
+  )
+}
+
+export function PluginsPanel() {
+  const [selectedPluginId, setSelectedPluginId] = useState<string | null>(null)
+  const panels = useSyncExternalStore(
+    editorHostPanelRegistry.subscribe,
+    editorHostPanelRegistry.getSnapshot,
+    editorHostPanelRegistry.getSnapshot,
+  )
+  const installedPlugins = useScene((state) => state.installedPlugins)
+  const setInstalledPlugins = useScene((state) => state.setInstalledPlugins)
+  const readOnly = useScene((state) => state.readOnly)
+  const plugins = Array.from(
+    new Map(
+      panels
+        .filter((panel) => panel.pluginId)
+        .map((panel) => [panel.pluginId as string, panel]),
+    ).entries(),
+  )
+  const selectedPlugin = selectedPluginId
+    ? plugins.find(([pluginId]) => pluginId === selectedPluginId)
+    : undefined
+
+  if (selectedPlugin) {
+    const [pluginId, panel] = selectedPlugin
+    const installed = installedPlugins.includes(pluginId)
+
+    return (
+      <div className="flex h-full flex-col overflow-y-auto p-4">
+        <div>
+          <Button
+            className="rounded-full"
+            onClick={() => setSelectedPluginId(null)}
+            size="sm"
+            variant="ghost"
+          >
+            <ChevronLeft className="h-4 w-4" />
+            All plugins
+          </Button>
+
+          <div className="mt-5 flex items-start gap-4">
+            <div className="flex h-16 w-16 shrink-0 items-center justify-center rounded-2xl bg-background/60">
+              {renderPluginIcon(panel.icon)}
+            </div>
+            <div className="min-w-0 pt-1">
+              <h2 className="font-semibold text-lg text-sidebar-foreground">{panel.label}</h2>
+              <p className="text-sidebar-foreground/50 text-sm">
+                {installed ? 'Installed' : 'Not installed'}
+              </p>
+            </div>
+          </div>
+
+          <p className="mt-5 text-sidebar-foreground/70 text-sm">
+            {panel.description ?? 'Adds a new tool panel to the editor.'}
+          </p>
+
+          <dl className="mt-6 divide-y divide-border/50 rounded-xl border border-border/60">
+            <div className="p-3">
+              <dt className="text-sidebar-foreground/50 text-xs">Plugin ID</dt>
+              <dd className="mt-1 break-all text-sidebar-foreground text-sm">{pluginId}</dd>
+            </div>
+            {panel.creator && (
+              <div className="p-3">
+                <dt className="text-sidebar-foreground/50 text-xs">Creator</dt>
+                <dd className="mt-1 text-sm">
+                  {panel.creator.url ? (
+                    <a
+                      className="inline-flex items-center gap-1 text-sidebar-foreground underline-offset-4 hover:underline"
+                      href={panel.creator.url}
+                      rel="noreferrer"
+                      target="_blank"
+                    >
+                      {panel.creator.name}
+                      <ExternalLink className="h-3 w-3" />
+                    </a>
+                  ) : (
+                    panel.creator.name
+                  )}
+                </dd>
+              </div>
+            )}
+            {panel.pluginUrl && (
+              <div className="p-3">
+                <dt className="text-sidebar-foreground/50 text-xs">Plugin</dt>
+                <dd className="mt-1 text-sm">
+                  <a
+                    className="inline-flex items-center gap-1 text-sidebar-foreground underline-offset-4 hover:underline"
+                    href={panel.pluginUrl}
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    View plugin
+                    <ExternalLink className="h-3 w-3" />
+                  </a>
+                </dd>
+              </div>
+            )}
+          </dl>
+
+          <Button
+            className="mt-5 rounded-full"
+            disabled={readOnly}
+            onClick={() => {
+              const next = installed
+                ? installedPlugins.filter((id) => id !== pluginId)
+                : [...installedPlugins, pluginId]
+              setInstalledPlugins(next, { explicit: true })
+            }}
+            variant={installed ? 'outline' : 'default'}
+          >
+            {installed ? 'Uninstall' : 'Install'}
+          </Button>
+        </div>
+
+        <div className="mt-auto pt-6">
+          <a
+            className="inline-flex items-center gap-1.5 text-sidebar-foreground/70 text-sm underline-offset-4 hover:text-sidebar-foreground hover:underline"
+            href={PLUGIN_AUTHORING_URL}
+            rel="noreferrer"
+            target="_blank"
+          >
+            Create a Pascal plugin
+            <ExternalLink className="h-3.5 w-3.5" />
+          </a>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-full flex-col overflow-y-auto p-4">
+      <div className="mb-5">
+        <h2 className="font-semibold text-lg text-sidebar-foreground">Plugins</h2>
+        <p className="mt-1 text-sidebar-foreground/60 text-sm">
+          Add focused tools and content to this project.
+        </p>
+      </div>
+
+      <div className="flex flex-col gap-3">
+        {plugins.map(([pluginId, panel]) => {
+          const installed = installedPlugins.includes(pluginId)
+          return (
+            <button
+              className="w-full rounded-xl border border-border/60 bg-accent/20 p-3 text-left transition-colors hover:bg-accent/40"
+              key={pluginId}
+              onClick={() => setSelectedPluginId(pluginId)}
+              type="button"
+            >
+              <div className="flex items-start gap-3">
+                <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-background/60">
+                  {renderPluginIcon(panel.icon)}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center justify-between gap-3">
+                    <div>
+                      <h3 className="font-medium text-sidebar-foreground">{panel.label}</h3>
+                      <p className="text-sidebar-foreground/50 text-xs">
+                        {installed ? 'Installed' : 'Not installed'}
+                      </p>
+                    </div>
+                    <ChevronRight className="h-4 w-4 shrink-0 text-sidebar-foreground/50" />
+                  </div>
+                  <p className="mt-2 text-sidebar-foreground/60 text-sm">
+                    {panel.description ?? 'Adds a new tool panel to the editor.'}
+                  </p>
+                </div>
+              </div>
+            </button>
+          )
+        })}
+      </div>
+
+      <div className="mt-auto pt-6">
+        <a
+          className="inline-flex items-center gap-1.5 text-sidebar-foreground/70 text-sm underline-offset-4 hover:text-sidebar-foreground hover:underline"
+          href={PLUGIN_AUTHORING_URL}
+          rel="noreferrer"
+          target="_blank"
+        >
+          Create a Pascal plugin
+          <ExternalLink className="h-3.5 w-3.5" />
+        </a>
+      </div>
+    </div>
+  )
+}

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

@@ -1,7 +1,7 @@
-import { emitter, useScene, validateBuildJson } from '@pascal-app/core'
+import { clearSceneHistory, emitter, useScene, validateBuildJson } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { TreeView, VisualJson } from '@visual-json/react'
-import { Camera, Download, Save, Trash2, Upload } from 'lucide-react'
+import { Camera, Download, Map as MapIcon, Save, Trash2, Upload } from 'lucide-react'
 import {
   type KeyboardEvent,
   type SyntheticEvent,
@@ -10,6 +10,7 @@ import {
   useRef,
   useState,
 } from 'react'
+import { exportFloorplanPdf } from '../../../../../lib/floorplan/floorplan-export'
 import { Button } from './../../../../../components/ui/primitives/button'
 import {
   Dialog,
@@ -179,11 +180,11 @@ export function SettingsPanel({
   const fileInputRef = useRef<HTMLInputElement>(null)
   const nodes = useScene((state) => state.nodes)
   const rootNodeIds = useScene((state) => state.rootNodeIds)
+  const installedPlugins = useScene((state) => state.installedPlugins)
   const setScene = useScene((state) => state.setScene)
   const clearScene = useScene((state) => state.clearScene)
   const resetSelection = useViewer((state) => state.resetSelection)
   const exportScene = useViewer((state) => state.exportScene)
-  const showGrid = useViewer((state) => state.showGrid)
   const shadows = useViewer((state) => state.shadows)
   const setPhase = useEditor((state) => state.setPhase)
   const [isGeneratingThumbnail, setIsGeneratingThumbnail] = useState(false)
@@ -206,7 +207,7 @@ export function SettingsPanel({
   const isLocalProject = false // Props-based; only show cloud sections when projectId provided
 
   const handleSaveBuild = () => {
-    const sceneData = { nodes, rootNodeIds }
+    const sceneData = { nodes, rootNodeIds, installedPlugins }
     const json = JSON.stringify(sceneData, null, 2)
     const blob = new Blob([json], { type: 'application/json' })
     const url = URL.createObjectURL(blob)
@@ -262,11 +263,24 @@ export function SettingsPanel({
     e.target.value = ''
   }
 
-  const handleConfirmImport = (parsed: { nodes: Record<string, unknown>; rootNodeIds: string[] }) => {
+  const handleConfirmImport = (parsed: {
+    nodes: Record<string, unknown>
+    rootNodeIds: string[]
+    installedPlugins?: string[]
+  }) => {
+    const currentScene = useScene.getState()
     setScene(
       parsed.nodes as Parameters<typeof setScene>[0],
       parsed.rootNodeIds as Parameters<typeof setScene>[1],
+      {
+        installedPlugins: parsed.installedPlugins ?? currentScene.installedPlugins,
+        hasExplicitPluginInstallState:
+          parsed.installedPlugins !== undefined || currentScene.hasExplicitPluginInstallState,
+      },
     )
+    // An import is a scene load: it becomes the undo floor. Without this,
+    // undo could step back into the pre-import scene state.
+    clearSceneHistory()
     resetSelection()
     setPhase('site')
     setPendingImport(null)
@@ -274,6 +288,9 @@ export function SettingsPanel({
 
   const handleResetToDefault = () => {
     clearScene()
+    // Same floor rule as import — undo after a reset must not resurrect the
+    // old scene (or land on the empty intermediate `unloadScene` state).
+    clearSceneHistory()
     resetSelection()
     setPhase('structure')
     selectDefaultBuildingAndLevel()
@@ -331,16 +348,6 @@ export function SettingsPanel({
               onCheckedChange={(checked) => handleVisibilityChange('showGuidesPublic', checked)}
             />
           </div>
-          <div className="flex items-center justify-between">
-            <div>
-              <div className="font-medium text-sm">Show Grid</div>
-              <div className="text-muted-foreground text-xs">Visible only in the editor</div>
-            </div>
-            <Switch
-              checked={showGrid}
-              onCheckedChange={(checked) => useViewer.getState().setShowGrid(checked)}
-            />
-          </div>
           <div className="flex items-center justify-between">
             <div>
               <div className="font-medium text-sm">Shadows</div>
@@ -355,32 +362,56 @@ export function SettingsPanel({
       )}
 
       {/* Export Section */}
-      <div className="space-y-2">
+      <div className="space-y-4">
         <label className="font-medium text-muted-foreground text-xs uppercase">Export</label>
-        <Button
-          className="w-full justify-start gap-2"
-          onClick={() => exportScene?.('glb')}
-          variant="outline"
-        >
-          <Download className="size-4" />
-          Export GLB
-        </Button>
-        <Button
-          className="w-full justify-start gap-2"
-          onClick={() => exportScene?.('stl')}
-          variant="outline"
-        >
-          <Download className="size-4" />
-          Export STL
-        </Button>
-        <Button
-          className="w-full justify-start gap-2"
-          onClick={() => exportScene?.('obj')}
-          variant="outline"
-        >
-          <Download className="size-4" />
-          Export OBJ
-        </Button>
+
+        <div className="space-y-2">
+          <div className="font-medium text-muted-foreground text-xs">3D model</div>
+          <Button
+            className="w-full justify-start gap-2"
+            onClick={() => exportScene?.('glb')}
+            variant="outline"
+          >
+            <Download className="size-4" />
+            Export GLB
+          </Button>
+          <Button
+            className="w-full justify-start gap-2"
+            onClick={() => exportScene?.('stl')}
+            variant="outline"
+          >
+            <Download className="size-4" />
+            Export STL
+          </Button>
+          <Button
+            className="w-full justify-start gap-2"
+            onClick={() => exportScene?.('obj')}
+            variant="outline"
+          >
+            <Download className="size-4" />
+            Export OBJ
+          </Button>
+        </div>
+
+        <div className="space-y-2">
+          <div className="font-medium text-muted-foreground text-xs">Floorplan</div>
+          <Button
+            className="w-full justify-start gap-2"
+            onClick={() => exportFloorplanPdf('full')}
+            variant="outline"
+          >
+            <MapIcon className="size-4" />
+            Full floorplan
+          </Button>
+          <Button
+            className="w-full justify-start gap-2"
+            onClick={() => exportFloorplanPdf('structure')}
+            variant="outline"
+          >
+            <MapIcon className="size-4" />
+            Structure only
+          </Button>
+        </div>
       </div>
 
       {/* Thumbnail Section (only for cloud projects) */}

package/src/components/ui/sidebar/panels/settings-panel/keyboard-shortcuts-dialog.tsx

@@ -55,6 +55,7 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
     shortcuts: [
       { keys: ['V'], action: 'Switch to Select mode' },
       { keys: ['B'], action: 'Switch to Build mode' },
+      { keys: ['M'], action: 'Activate the last measurement tool' },
       { keys: ['X'], action: 'Switch to Delete mode' },
       {
         keys: ['Esc'],
@@ -71,7 +72,48 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
       {
         keys: ['Cmd/Ctrl', 'Left click'],
         action: 'Add or remove an object from multi-selection',
-        note: 'Works while in Select mode.',
+        note: 'Works in Select mode on the 3D canvas, the 2D floor plan, and the scene graph.',
+      },
+      {
+        keys: ['Shift', 'Left click'],
+        action: 'Add or remove an object from canvas multi-selection',
+        note: 'In the scene graph, Shift-click selects the visible range like a file browser.',
+      },
+      {
+        keys: ['Left click'],
+        action: 'Move the whole multi-selection',
+        note:
+          'With 2+ objects selected, in 2D and 3D alike: drag the selection (or its dashed box) to slide it; click it to pick it up and place with the next click.',
+      },
+      {
+        keys: ['R', 'T'],
+        action: 'Rotate a multi-selection ±45° around its center',
+        note: 'Also works mid-move while carrying the selection.',
+      },
+      {
+        keys: ['Esc'],
+        action: 'Clear the selection',
+        note: 'Clicking empty space does the same.',
+      },
+    ],
+  },
+  {
+    title: 'Direct Manipulation',
+    shortcuts: [
+      {
+        keys: ['Cmd/Ctrl', 'Left click'],
+        action: 'Move the selected movable object under the cursor',
+        note: 'Drag in Select mode with a single object selected. Guided snapping and guides are enabled by default.',
+      },
+      {
+        keys: ['Cmd/Ctrl', 'Right click'],
+        action: 'Rotate the selected object under the cursor',
+        note: 'Drag left or right in Select mode with a single object selected. Rotation snaps to 15° increments by default.',
+      },
+      {
+        keys: ['Cmd/Ctrl', 'Shift', 'Right click'],
+        action: 'Rotate freely',
+        note: 'Hold Shift during the drag to bypass the 15° rotation increment.',
       },
     ],
   },
@@ -80,16 +122,27 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
     shortcuts: [
       {
         keys: ['Shift'],
-        action: 'Temporarily disable angle snapping while drawing walls, slabs, and ceilings',
-        note: 'Hold while drawing.',
+        action: 'Bypass guided snapping and angle constraints',
+        note: 'Hold during the active gesture. Passive guide or measurement feedback may stay visible.',
+      },
+      {
+        keys: ['Shift'],
+        action: 'Rotate freely, bypassing the default 15° rotation snap',
+        note: 'Hold while dragging a rotate handle or direct-rotation gesture.',
       },
     ],
   },
   {
     title: 'Item Placement',
     shortcuts: [
-      { keys: ['R'], action: 'Rotate item clockwise, or toggle selected door open/closed' },
-      { keys: ['T'], action: 'Rotate item counter-clockwise, or close selected door' },
+      {
+        keys: ['R', 'T'],
+        action: 'Rotate item; with a door selected, R toggles open/closed and T closes',
+      },
+      {
+        keys: ['E'],
+        action: 'Operate the selected node — doors, windows, and cabinet doors/drawers animate open/closed',
+      },
       {
         keys: ['Shift'],
         action: 'Temporarily bypass placement validation constraints',
@@ -157,7 +210,8 @@ export function KeyboardShortcutsDialog() {
         <DialogHeader className="shrink-0 border-b px-6 py-4">
           <DialogTitle>Keyboard Shortcuts</DialogTitle>
           <DialogDescription>
-            Shortcuts are context-aware and depend on the current phase or tool.
+            Shortcuts are context-aware. Guided constraints are enabled by default; hold Shift
+            during an active gesture to build freely.
           </DialogDescription>
         </DialogHeader>
 

package/src/components/ui/sidebar/panels/settings-panel/load-build-dialog.tsx

@@ -1,4 +1,5 @@
 import type { BuildStats, SchemaIssue, ValidateBuildJsonResult } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
 import {
   AlertTriangle,
   AppWindow,
@@ -22,6 +23,11 @@ import {
   DialogHeader,
   DialogTitle,
 } from '../../../../../components/ui/primitives/dialog'
+import {
+  getAreaUnitLabel,
+  type LinearUnit,
+  squareMetersToAreaUnit,
+} from '../../../../../lib/measurements'
 
 export type PendingImport = {
   fileName: string
@@ -80,15 +86,17 @@ function formatFileSize(bytes: number): string {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
 }
 
-function formatFloorArea(m2: number): string {
+function formatFloorArea(m2: number, unit: LinearUnit): string {
   if (m2 === 0) return '—'
-  if (m2 < 10) return `${m2.toFixed(2)} m²`
-  return `${m2.toFixed(1)} m²`
+  const value = squareMetersToAreaUnit(m2, unit)
+  const label = getAreaUnitLabel(unit)
+  return `${value < 10 ? value.toFixed(2) : value.toFixed(1)} ${label}`
 }
 
 export function LoadBuildDialog({ pending, onCancel, onConfirm }: Props) {
   const [showAllWarnings, setShowAllWarnings] = useState(false)
   const [showSchemaIssues, setShowSchemaIssues] = useState(false)
+  const unit = useViewer((state) => state.unit)
 
   if (!pending) return null
 
@@ -165,7 +173,7 @@ export function LoadBuildDialog({ pending, onCancel, onConfirm }: Props) {
                     <div className="flex items-center justify-between border-t px-3 py-2">
                       <span className="text-muted-foreground text-sm">Floor area</span>
                       <span className="font-medium text-sm">
-                        {formatFloorArea(stats.floorAreaM2)}
+                        {formatFloorArea(stats.floorAreaM2, unit)}
                       </span>
                     </div>
                   )}

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

@@ -3,6 +3,7 @@ import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useEffect, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
+import { formatAreaLabel } from './../../../../../lib/measurements'
 import useEditor from './../../../../../store/use-editor'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNode, TreeNodeWrapper } from './tree-node'
@@ -32,6 +33,7 @@ export const CeilingTreeNode = memo(function CeilingTreeNode({
   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)
 
   // Expand when a descendant is selected — imperative to avoid subscribing to the full selectedIds array
   useEffect(() => {
@@ -75,8 +77,7 @@ export const CeilingTreeNode = memo(function CeilingTreeNode({
   const handleStartEditing = useCallback(() => setIsEditing(true), [])
   const handleStopEditing = useCallback(() => setIsEditing(false), [])
 
-  const area = calculatePolygonArea(polygon).toFixed(1)
-  const defaultName = `Ceiling (${area}m²)`
+  const defaultName = `Ceiling (${formatAreaLabel(calculatePolygonArea(polygon), unit)})`
 
   return (
     <TreeNodeWrapper
@@ -85,7 +86,7 @@ export const CeilingTreeNode = memo(function CeilingTreeNode({
       expanded={expanded}
       hasChildren={children.length > 0}
       icon={
-        <Image alt="" className="object-contain" height={14} src="/icons/ceiling.png" width={14} />
+        <Image alt="" className="object-contain" height={14} src="/icons/ceiling.webp" width={14} />
       }
       isHovered={isHovered}
       isLast={isLast}

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

@@ -2,6 +2,7 @@ import { type AnyNodeId, type ChimneyNode, 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 ChimneyTreeNode = memo(function ChimneyTreeNode({
       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/column-tree-node.tsx

@@ -51,7 +51,7 @@ export const ColumnTreeNode = memo(function ColumnTreeNode({
       expanded={false}
       hasChildren={false}
       icon={
-        <Image alt="" className="object-contain" height={14} src="/icons/column.png" width={14} />
+        <Image alt="" className="object-contain" height={14} src="/icons/column.webp" width={14} />
       }
       isHovered={isHovered}
       isLast={isLast}

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

@@ -1,9 +1,10 @@
 'use client'
 
-import { type AnyNodeId, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type DoorNode, 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 DoorTreeNode = memo(function DoorTreeNode({
 }: DoorTreeNodeProps) {
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId as AnyNodeId]?.visible !== false)
+  const node = useScene((s) => s.nodes[nodeId] as DoorNode | 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 DoorTreeNode = memo(function DoorTreeNode({
 
   const handleStartEditing = useCallback(() => setIsEditing(true), [])
   const handleStopEditing = useCallback(() => setIsEditing(false), [])
+  const snapTarget = resolveNodeSnapTarget(node) ?? 'wall'
 
   return (
     <TreeNodeWrapper
@@ -53,7 +56,9 @@ export const DoorTreeNode = memo(function DoorTreeNode({
       expanded={false}
       hasChildren={false}
       icon={
-        <Image alt="" className="object-contain" height={14} src="/icons/door.png" width={14} />
+        <SnapTargetIcon target={snapTarget}>
+          <Image alt="" className="object-contain" height={14} src="/icons/door.webp" width={14} />
+        </SnapTargetIcon>
       }
       isHovered={isHovered}
       isLast={isLast}