@pascal-app/editor 1.0.0-beta.5 → 1.0.1

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

@@ -0,0 +1,224 @@
+import {
+  type AnyNodeId,
+  getLevelDisplayName,
+  type LevelNode,
+  type UnitNode,
+  unitWarnings,
+  useScene,
+  type ZoneNode,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { AlertTriangle, Trash2, X } from 'lucide-react'
+import { memo, useCallback, useState } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { ColorDot } from './../../../../../components/ui/primitives/color-dot'
+import { assignZoneToUnit, enterUnitFocus } from './../../../../../lib/units'
+import { InlineRenameInput } from './inline-rename-input'
+import { routeTreeSelectionToNode, TreeNodeWrapper } from './tree-node'
+
+type UnitWarningCode = ReturnType<typeof unitWarnings>[number]['code']
+
+const WARNING_LABELS: Record<UnitWarningCode, string> = {
+  empty: 'No zones in this unit',
+  'non-adjacent-levels': 'Members sit on non-adjacent levels',
+}
+
+const ACTION_BUTTON_CLASS =
+  'flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-black/5 hover:text-foreground dark:hover:bg-white/10'
+
+interface UnitZoneRowProps {
+  zoneId: ZoneNode['id']
+  depth: number
+  isLast?: boolean
+  onRemove?: (zoneId: ZoneNode['id']) => void
+}
+
+/** One member zone under a unit: name + level, click selects it. */
+export const UnitZoneRow = memo(function UnitZoneRow({
+  zoneId,
+  depth,
+  isLast,
+  onRemove,
+}: UnitZoneRowProps) {
+  const zone = useScene((s) => s.nodes[zoneId] as ZoneNode | undefined)
+  const levelLabel = useScene((s) => {
+    const level = zone?.parentId ? (s.nodes[zone.parentId as AnyNodeId] as LevelNode | undefined) : undefined
+    return level?.type === 'level' ? getLevelDisplayName(level) : null
+  })
+  const isSelected = useViewer((s) => s.selection.zoneId === zoneId)
+  const isHovered = useViewer((s) => s.hoveredId === zoneId)
+  const setSelection = useViewer((s) => s.setSelection)
+  const setHoveredId = useViewer((s) => s.setHoveredId)
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation()
+      if (!zone) return
+      setSelection({ levelId: zone.parentId as LevelNode['id'], zoneId })
+      routeTreeSelectionToNode(zone)
+    },
+    [zone, zoneId, setSelection],
+  )
+
+  if (!zone) return null
+
+  return (
+    <TreeNodeWrapper
+      actions={
+        onRemove ? (
+          <button
+            className={ACTION_BUTTON_CLASS}
+            onClick={(event) => {
+              event.stopPropagation()
+              onRemove(zoneId)
+            }}
+            title="Remove from unit"
+            type="button"
+          >
+            <X className="h-3 w-3" />
+          </button>
+        ) : undefined
+      }
+      depth={depth}
+      expanded={false}
+      hasChildren={false}
+      icon={
+        <span
+          className="h-3 w-3 rounded-sm border border-border/50"
+          style={{ backgroundColor: zone.color }}
+        />
+      }
+      isHovered={isHovered}
+      isLast={isLast}
+      isSelected={isSelected}
+      keepIconColor
+      label={
+        <span className="flex min-w-0 items-baseline gap-1.5">
+          <span className="truncate">{zone.name || 'Zone'}</span>
+          {levelLabel && (
+            <span className="shrink-0 text-muted-foreground text-xs">{levelLabel}</span>
+          )}
+        </span>
+      }
+      nodeId={zoneId}
+      onClick={handleClick}
+      onMouseEnter={() => setHoveredId(zoneId)}
+      onMouseLeave={() => setHoveredId(null)}
+      onToggle={() => {}}
+    />
+  )
+})
+
+interface UnitTreeNodeProps {
+  nodeId: AnyNodeId
+  depth: number
+  isLast?: boolean
+}
+
+export const UnitTreeNode = memo(function UnitTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: UnitTreeNodeProps) {
+  const unitId = nodeId as UnitNode['id']
+  const [isEditing, setIsEditing] = useState(false)
+  const [expanded, setExpanded] = useState(false)
+  const updateNode = useScene((s) => s.updateNode)
+  const deleteNode = useScene((s) => s.deleteNode)
+  const color = useScene((s) => (s.nodes[nodeId] as UnitNode | undefined)?.color)
+  const members = useScene(
+    useShallow((s) => (s.nodes[nodeId] as UnitNode | undefined)?.members ?? []),
+  )
+  const warningCodes = useScene(
+    useShallow((s) => {
+      const unit = s.nodes[nodeId]
+      return unit?.type === 'unit' ? unitWarnings(unit, s.nodes).map((w) => w.code) : []
+    }),
+  )
+  const isSelected = useViewer((s) => s.selection.selectedIds.includes(nodeId))
+  const isHovered = useViewer((s) => s.hoveredId === nodeId)
+  const setHoveredId = useViewer((s) => s.setHoveredId)
+  const isFocused = useViewer((s) => s.focusedUnitId === unitId)
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation()
+      enterUnitFocus(unitId)
+    },
+    [unitId],
+  )
+
+  const handleRemoveMember = useCallback(
+    (zoneId: ZoneNode['id']) => assignZoneToUnit(zoneId, null),
+    [],
+  )
+
+  const warningTitle = [...new Set(warningCodes)].map((code) => WARNING_LABELS[code]).join('\n')
+
+  return (
+    <TreeNodeWrapper
+      actions={
+        <button
+          className={ACTION_BUTTON_CLASS}
+          onClick={(event) => {
+            event.stopPropagation()
+            deleteNode(unitId)
+          }}
+          title="Delete unit"
+          type="button"
+        >
+          <Trash2 className="h-3 w-3" />
+        </button>
+      }
+      depth={depth}
+      expanded={expanded}
+      hasChildren={members.length > 0}
+      icon={
+        <ColorDot
+          color={color ?? '#f59e0b'}
+          onChange={(next) => updateNode(unitId, { color: next })}
+        />
+      }
+      isHovered={isHovered}
+      isLast={isLast}
+      isSelected={isSelected}
+      keepIconColor
+      label={
+        <span className="flex min-w-0 items-center gap-1.5">
+          <InlineRenameInput
+            defaultName="Unit"
+            isEditing={isEditing}
+            nodeId={nodeId}
+            onStartEditing={() => setIsEditing(true)}
+            onStopEditing={() => setIsEditing(false)}
+          />
+          {isFocused && (
+            <span className="shrink-0 rounded-full bg-primary/15 px-1.5 text-[10px] text-primary leading-4">
+              Focused
+            </span>
+          )}
+          {warningCodes.length > 0 && (
+            <span className="shrink-0 text-muted-foreground" title={warningTitle}>
+              <AlertTriangle className="h-3 w-3" />
+            </span>
+          )}
+        </span>
+      }
+      nodeId={nodeId}
+      onClick={handleClick}
+      onMouseEnter={() => setHoveredId(nodeId)}
+      onMouseLeave={() => setHoveredId(null)}
+      onToggle={() => setExpanded((value) => !value)}
+    >
+      {members.map((zoneId, index) => (
+        <UnitZoneRow
+          depth={depth + 1}
+          isLast={index === members.length - 1}
+          key={zoneId}
+          onRemove={handleRemoveMember}
+          zoneId={zoneId}
+        />
+      ))}
+    </TreeNodeWrapper>
+  )
+})

package/src/components/ui/sidebar/panels/site-panel/zone-membership-checkbox.tsx

@@ -0,0 +1,22 @@
+import { Checkbox } from './../../../primitives/checkbox'
+
+/** Membership toggle shown on zone rows while a unit is focused. */
+export function ZoneMembershipCheckbox({
+  checked,
+  onToggle,
+  unitName,
+}: {
+  checked: boolean
+  onToggle: () => void
+  unitName: string
+}) {
+  return (
+    <Checkbox
+      aria-label={`In ${unitName}`}
+      checked={checked}
+      className="mr-2"
+      onCheckedChange={onToggle}
+      onDoubleClick={(event) => event.stopPropagation()}
+    />
+  )
+}

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

@@ -3,9 +3,11 @@ 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 { toggleZoneMembership } from './../../../../../lib/units'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
+import { ZoneMembershipCheckbox } from './zone-membership-checkbox'
 
 interface ZoneTreeNodeProps {
   nodeId: ZoneNode['id']
@@ -28,6 +30,11 @@ export const ZoneTreeNode = memo(function ZoneTreeNode({
   const setSelection = useViewer((state) => state.setSelection)
   const setHoveredId = useViewer((state) => state.setHoveredId)
   const unit = useViewer((state) => state.unit)
+  const focusedUnitId = useViewer((state) => state.focusedUnitId)
+  const focusedUnit = useScene((s) => {
+    const focused = focusedUnitId ? s.nodes[focusedUnitId] : undefined
+    return focused?.type === 'unit' ? focused : null
+  })
 
   const handleClick = useCallback(() => setSelection({ zoneId: nodeId }), [nodeId, setSelection])
   const handleDoubleClick = useCallback(() => focusTreeNode(nodeId), [nodeId])
@@ -50,15 +57,25 @@ export const ZoneTreeNode = memo(function ZoneTreeNode({
       isHovered={isHovered}
       isLast={isLast}
       isSelected={isSelected}
+      keepIconColor
       isVisible={isVisible}
       label={
-        <InlineRenameInput
-          defaultName={defaultName}
-          isEditing={isEditing}
-          nodeId={nodeId}
-          onStartEditing={handleStartEditing}
-          onStopEditing={handleStopEditing}
-        />
+        <span className="flex min-w-0 items-center">
+          {focusedUnit && (
+            <ZoneMembershipCheckbox
+              checked={focusedUnit.members.includes(nodeId)}
+              onToggle={() => toggleZoneMembership(focusedUnit.id, nodeId)}
+              unitName={focusedUnit.name || 'Unit'}
+            />
+          )}
+          <InlineRenameInput
+            defaultName={defaultName}
+            isEditing={isEditing}
+            nodeId={nodeId}
+            onStartEditing={handleStartEditing}
+            onStopEditing={handleStopEditing}
+          />
+        </span>
       }
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}

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

@@ -86,6 +86,8 @@ export function IconRail({ tabs, activeTab, collapsed, onIconClick }: IconRailPr
       <Tooltip key={tab.id}>
         <TooltipTrigger asChild>
           <button
+            aria-label={tab.label}
+            aria-pressed={showActive}
             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

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

@@ -12,7 +12,12 @@ import {
   useSyncExternalStore,
 } from 'react'
 import useEditor from '../../../store/use-editor'
-import { editorHostPanelRegistry, type EditorHostPanel } from '../../../lib/plugin-panels'
+import {
+  editorHostPanelRegistry,
+  type EditorHostPanel,
+  managedPluginIds,
+  showsPluginManager,
+} from '../../../lib/plugin-panels'
 import { ErrorBoundary } from '../primitives/error-boundary'
 import type { ExtraPanel } from './icon-rail'
 import { PluginsPanel } from './panels/plugins-panel'
@@ -100,6 +105,7 @@ export function useHostPanels(hostPanels?: ExtraPanel[]): ExtraPanel[] {
   )
   const workspaceMode = useEditor((s) => s.workspaceMode)
   const installedPlugins = useScene((s) => s.installedPlugins)
+  const readOnly = useScene((s) => s.readOnly)
   const hostIds = new Set(hostPanels?.map((p) => p.id))
 
   useEffect(() => {
@@ -126,7 +132,16 @@ export function useHostPanels(hostPanels?: ExtraPanel[]): ExtraPanel[] {
         pluginId: p.pluginId,
       }),
     )
+  // The manager tab is the one panel the editor contributes itself, so it is
+  // also the one that can be alone in the rail — see `showsPluginManager`.
   const manager =
-    workspaceMode === 'edit' && !hostIds.has(pluginsManagerPanel.id) ? [pluginsManagerPanel] : []
+    !hostIds.has(pluginsManagerPanel.id) &&
+    showsPluginManager({
+      managedPluginCount: managedPluginIds(registered).length,
+      readOnly,
+      workspaceMode,
+    })
+      ? [pluginsManagerPanel]
+      : []
   return [...(hostPanels ?? []), ...fromRegistry, ...manager]
 }

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

@@ -1,4 +1,5 @@
 import type { AnyNode, AssetInput } from '@pascal-app/core'
+import { isProceduralItem } from '@pascal-app/core/procedural-items'
 import type { ReactNode } from 'react'
 import { cn } from '../../lib/utils'
 
@@ -35,6 +36,7 @@ export function resolveAssetSnapTarget(attachTo: AssetInput['attachTo']): SnapTa
 
 export function resolveNodeSnapTarget(node: AnyNode | null | undefined): SnapTarget | null {
   if (!node) return null
+  if (isProceduralItem(node)) return resolveAssetSnapTarget(node.recipe.mounting?.attachTo)
   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'

package/src/components/viewer/viewer-scene-header.tsx

@@ -9,12 +9,13 @@ import {
   useScene,
   type ZoneNode,
 } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import { markPerfAction, useViewer } from '@pascal-app/viewer'
 import { ArrowLeft, ChevronRight, Layers } from 'lucide-react'
 import Link from 'next/link'
 import type { ReactNode } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import { cn } from '../../lib/utils'
+import { ViewerUnitsPanel } from './viewer-units-panel'
 
 const getNodeName = (node: AnyNode): string => {
   if ('name' in node && node.name) return node.name
@@ -63,6 +64,7 @@ export const ViewerSceneHeader = ({
   const selectedNode = useScene((s) =>
     firstSelectedId ? (s.nodes[firstSelectedId as AnyNodeId] as AnyNode | undefined) : null,
   )
+  const sceneNodes = useScene((s) => s.nodes)
   // Highest first so the list reads top-down like a building section.
   const levels = useScene(
     useShallow((s) => {
@@ -76,6 +78,7 @@ export const ViewerSceneHeader = ({
 
   const handleLevelClick = (levelId: LevelNode['id']) => {
     // When switching levels, deselect zone and items
+    if (levelId !== selection.levelId) markPerfAction('level-switch', levelId)
     useViewer.getState().setSelection({ levelId })
   }
 
@@ -230,6 +233,7 @@ export const ViewerSceneHeader = ({
           </div>
         </div>
       )}
+      {building && <ViewerUnitsPanel nodes={sceneNodes} />}
     </div>
   )
 }

package/src/components/viewer/viewer-stage.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { type AnyNode, type AnyNodeId, useScene } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import { markPerfAction, useViewer } from '@pascal-app/viewer'
 import type { ReactNode } from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
@@ -134,6 +134,9 @@ export function ViewerStage({
   const chooseLevel = useCallback(
     (nextLevelId: string, notify = true) => {
       setInternalLevelId(nextLevelId)
+      if (notify && nextLevelId !== useViewer.getState().selection.levelId) {
+        markPerfAction('level-switch', nextLevelId)
+      }
       selectViewerLevel(scene?.nodes ?? useScene.getState().nodes, nextLevelId)
       if (notify) onLevelChange?.(nextLevelId)
     },

package/src/components/viewer/viewer-units-panel.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import {
+  type AnyNode,
+  buildUnitReport,
+  type LevelNode,
+  type UnitKind,
+  type UnitNode,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useMemo } from 'react'
+import { getAreaUnitLabel, squareMetersToAreaUnit } from '../../lib/measurements'
+import { cn } from '../../lib/utils'
+
+const UNIT_KIND_LABELS: Record<UnitKind, string> = {
+  apartment: 'Apartment',
+  'hotel-room': 'Hotel room',
+  commercial: 'Commercial',
+  common: 'Common',
+}
+
+type UnitRow = {
+  unit: UnitNode
+  zoneCount: number
+  areaM2: number
+  /** Levels carrying member zones, lowest ordinal first. */
+  levelIds: LevelNode['id'][]
+}
+
+/**
+ * Read-only unit list shared by the editor preview and the published viewer.
+ * Clicking a row focuses the unit and reveals a member floor through the shared
+ * `useViewer.selection`; a second click clears the focus. Hidden without units.
+ */
+export function ViewerUnitsPanel({ nodes }: { nodes: Readonly<Record<string, AnyNode>> }) {
+  const focusedUnitId = useViewer((s) => s.focusedUnitId)
+  const areaUnit = useViewer((s) => s.unit)
+
+  const rows = useMemo<UnitRow[]>(
+    () =>
+      Object.values(nodes)
+        .filter((node): node is UnitNode => node.type === 'unit')
+        .map((unit) => {
+          const report = buildUnitReport(unit, nodes)
+          const ordinals = new Map<LevelNode['id'], number>()
+          for (const member of report.members) {
+            if (member.levelId && member.levelOrdinal !== null) {
+              ordinals.set(member.levelId, member.levelOrdinal)
+            }
+          }
+          return {
+            unit,
+            zoneCount: report.memberCount,
+            areaM2: report.grossAreaM2,
+            levelIds: [...ordinals.entries()].sort((a, b) => a[1] - b[1]).map(([id]) => id),
+          }
+        }),
+    [nodes],
+  )
+
+  if (rows.length === 0) return null
+
+  return (
+    <div className="corner-smooth pointer-events-auto flex w-48 flex-col overflow-hidden rounded-2xl border border-border/40 bg-background/95 py-1 shadow-elevation-4 backdrop-blur-xl">
+      <span className="px-3 py-2 font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
+        Units
+      </span>
+      <div className="flex flex-col">
+        {rows.map((row) => {
+          const isFocused = row.unit.id === focusedUnitId
+          const area = Math.round(squareMetersToAreaUnit(row.areaM2, areaUnit))
+          const details = `${UNIT_KIND_LABELS[row.unit.kind]} · ${row.zoneCount} ${row.zoneCount === 1 ? 'zone' : 'zones'} · ${area} ${getAreaUnitLabel(areaUnit)}`
+          return (
+            <button
+              className={cn(
+                'group/row relative flex w-full cursor-pointer select-none items-center border-border/50 border-r border-r-transparent border-b px-3 py-1.5 text-sm transition-all duration-200',
+                isFocused
+                  ? 'border-r-3 border-r-white bg-accent/50 text-foreground'
+                  : 'text-muted-foreground hover:bg-accent/30 hover:text-foreground',
+              )}
+              key={row.unit.id}
+              onClick={() => {
+                const viewer = useViewer.getState()
+                if (isFocused) {
+                  viewer.setFocusedUnit(null)
+                  return
+                }
+                viewer.setFocusedUnit(row.unit.id)
+                // Same rule as the editor: keep the current floor when it
+                // already carries a member zone, otherwise reveal the lowest one.
+                const current = viewer.selection.levelId
+                const levelId =
+                  current && row.levelIds.includes(current) ? current : row.levelIds[0]
+                if (levelId && levelId !== current) viewer.setSelection({ levelId })
+              }}
+              type="button"
+            >
+              <div className="flex min-w-0 flex-1 items-center gap-2">
+                <span className="flex h-4 w-4 shrink-0 items-center justify-center">
+                  <span
+                    className="h-2.5 w-2.5 rounded-full"
+                    style={{ backgroundColor: row.unit.color }}
+                  />
+                </span>
+                <div className="min-w-0 flex-1 text-left">
+                  <div className="truncate">{row.unit.name}</div>
+                  <div className="truncate text-[11px] text-muted-foreground">{details}</div>
+                </div>
+              </div>
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/components/viewer-overlay.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { flushSync } from 'react-dom'
+import { requestWalkthroughPointerLock } from '../lib/walkthrough-pointer-lock'
 import useEditor from '../store/use-editor'
 import { ViewerControlsBar } from './viewer/viewer-controls-bar'
 import { ViewerSceneHeader } from './viewer/viewer-scene-header'
@@ -12,28 +13,6 @@ type ProjectOwner = {
   image: string | null
 }
 
-function requestWalkthroughPointerLock() {
-  const canvas = document.querySelector<HTMLCanvasElement>('[data-pascal-viewer-3d] canvas')
-  if (!canvas) return
-
-  if (!canvas.hasAttribute('tabindex')) {
-    canvas.tabIndex = -1
-  }
-  canvas.focus({ preventScroll: true })
-
-  if (document.pointerLockElement === canvas) return
-
-  try {
-    // The request can also reject ASYNC (browser cooldown after a recent
-    // unlock) — swallow it like the P-resume path; clicking the canvas
-    // re-requests once the cooldown passes.
-    const result = canvas.requestPointerLock?.() as Promise<void> | undefined
-    if (result && typeof result.catch === 'function') result.catch(() => {})
-  } catch {
-    return
-  }
-}
-
 interface ViewerOverlayProps {
   projectName?: string | null
   owner?: ProjectOwner | null

package/src/components/viewer-zone-system.tsx

@@ -13,6 +13,9 @@ export const ViewerZoneSystem = () => {
     const { levelId, zoneId } = useViewer.getState().selection
     const structureLayer = useEditor.getState().structureLayer
     const nodes = useScene.getState().nodes
+    // Snapshot capture is a clean, camera-only surface — zone geometry and
+    // tags stay out of the framed shot (mirrors the editor ZoneSystem's gate).
+    const isCaptureMode = useEditor.getState().isCaptureMode
     // During any active interaction zone labels step back entirely (Sims-light).
     const zoneLabelsHidden =
       resolveOverlayPolicy(useInteractionScope.getState().scope).zoneLabels === 'hidden'
@@ -31,7 +34,8 @@ export const ViewerZoneSystem = () => {
       // The editor ZoneSystem handles the selected zone's opacity animation.
       const isSelected = id === zoneId
       const shouldShowGeometry =
-        (structureLayer === 'zones' && !!levelId && isOnSelectedLevel) || isSelected
+        !isCaptureMode &&
+        ((structureLayer === 'zones' && !!levelId && isOnSelectedLevel) || isSelected)
       if (!obj.visible) obj.visible = true
       obj.traverse((child) => {
         if ((child as Mesh).isMesh) {
@@ -40,7 +44,7 @@ export const ViewerZoneSystem = () => {
       })
 
       // Labels: always visible on the current level (regardless of mode or zone selection)
-      const showLabel = !zoneLabelsHidden && !!levelId && isOnSelectedLevel
+      const showLabel = !isCaptureMode && !zoneLabelsHidden && !!levelId && isOnSelectedLevel
       const targetOpacity = showLabel ? '1' : '0'
       const labelEl = document.getElementById(`${id}-label`)
       if (labelEl && labelEl.style.opacity !== targetOpacity) {

package/src/components/walkthrough-hud.tsx

@@ -17,6 +17,24 @@ export type WalkthroughHudProps = {
   children?: ReactNode
 }
 
+/** The centered walkthrough pointer: a dot that grows into a green ring over
+ *  an interactable (door / window / elevator). Also mounted by the snapshot
+ *  capture overlay so walk / drone framing keeps the same E-to-open pointer. */
+export function WalkthroughCrosshair({ interact }: { interact: WalkthroughInteract }) {
+  return (
+    <div className="pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+      <div
+        className={cn(
+          'rounded-full transition-all duration-150',
+          interact
+            ? 'h-4 w-4 border-2 border-emerald-400 bg-emerald-400/10'
+            : 'h-1.5 w-1.5 bg-white/80 shadow-[0_0_2px_rgba(0,0,0,0.6)]',
+        )}
+      />
+    </div>
+  )
+}
+
 export function WalkthroughHud({
   floorLabel,
   zoneLabel,
@@ -51,16 +69,7 @@ export function WalkthroughHud({
         {children}
       </div>
 
-      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-        <div
-          className={cn(
-            'rounded-full transition-all duration-150',
-            interact
-              ? 'h-4 w-4 border-2 border-emerald-400 bg-emerald-400/10'
-              : 'h-1.5 w-1.5 bg-white/80 shadow-[0_0_2px_rgba(0,0,0,0.6)]',
-          )}
-        />
-      </div>
+      <WalkthroughCrosshair interact={interact} />
 
       <div className="absolute bottom-6 left-1/2 flex -translate-x-1/2 items-center gap-2">
         {suspended ? (