@ifc-lite/viewer 1.17.6 → 1.18.0

package/src/components/viewer/ViewerLayout.tsx

@@ -9,19 +9,23 @@ import { TooltipProvider } from '@/components/ui/tooltip';
 import { MainToolbar } from './MainToolbar';
 import { HierarchyPanel } from './HierarchyPanel';
 import { PropertiesPanel } from './PropertiesPanel';
+import { AddElementPanel } from './AddElementPanel';
 import { StatusBar } from './StatusBar';
 import { ViewportContainer } from './ViewportContainer';
 import { KeyboardShortcutsDialog, useKeyboardShortcutsDialog } from './KeyboardShortcutsDialog';
 import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts';
 import { useViewerStore } from '@/store';
 import { EntityContextMenu } from './EntityContextMenu';
+import { useDuplicateShortcut } from './useDuplicateShortcut';
 import { HoverTooltip } from './HoverTooltip';
 import { BCFPanel } from './BCFPanel';
 import { IDSPanel } from './IDSPanel';
 import { LensPanel } from './LensPanel';
 import { ListPanel } from './lists/ListPanel';
 import { ScriptPanel } from './ScriptPanel';
+import { GanttPanel } from './schedule/GanttPanel';
 import { CommandPalette } from './CommandPalette';
+import { SearchModal } from './SearchModal';
 import { DesktopEntitlementBanner } from './DesktopEntitlementBanner';
 import {
   closeActiveAnalysisExtension,
@@ -37,6 +41,8 @@ const BOTTOM_PANEL_MAX_RATIO = 0.7; // max 70% of container
 export function ViewerLayout() {
   // Initialize keyboard shortcuts
   useKeyboardShortcuts();
+  // ⌘D / Ctrl+D to duplicate the current selection.
+  useDuplicateShortcut();
   const shortcutsDialog = useKeyboardShortcutsDialog();
 
   // Command palette state
@@ -76,6 +82,8 @@ export function ViewerLayout() {
   const setRightPanelCollapsed = useViewerStore((s) => s.setRightPanelCollapsed);
   const bcfPanelVisible = useViewerStore((s) => s.bcfPanelVisible);
   const setBcfPanelVisible = useViewerStore((s) => s.setBcfPanelVisible);
+  const activeTool = useViewerStore((s) => s.activeTool);
+  const setActiveTool = useViewerStore((s) => s.setActiveTool);
   const idsPanelVisible = useViewerStore((s) => s.idsPanelVisible);
   const setIdsPanelVisible = useViewerStore((s) => s.setIdsPanelVisible);
   const listPanelVisible = useViewerStore((s) => s.listPanelVisible);
@@ -84,6 +92,8 @@ export function ViewerLayout() {
   const setLensPanelVisible = useViewerStore((s) => s.setLensPanelVisible);
   const scriptPanelVisible = useViewerStore((s) => s.scriptPanelVisible);
   const setScriptPanelVisible = useViewerStore((s) => s.setScriptPanelVisible);
+  const ganttPanelVisible = useViewerStore((s) => s.ganttPanelVisible);
+  const setGanttPanelVisible = useViewerStore((s) => s.setGanttPanelVisible);
   const analysisExtensionState = useSyncExternalStore(
     subscribeAnalysisExtensions,
     getAnalysisExtensionsSnapshot,
@@ -200,6 +210,7 @@ export function ViewerLayout() {
         <EntityContextMenu />
         <HoverTooltip />
         <CommandPalette open={commandPaletteOpen} onOpenChange={setCommandPaletteOpen} />
+        <SearchModal />
 
         {/* Main Toolbar */}
         <MainToolbar onShowShortcuts={shortcutsDialog.toggle} />
@@ -256,6 +267,8 @@ export function ViewerLayout() {
                   <div className="h-full w-full overflow-hidden panel-container">
                     {activeRightAnalysisExtension ? (
                       activeRightAnalysisExtension.renderPanel({ onClose: closeActiveAnalysisExtension })
+                    ) : activeTool === 'addElement' ? (
+                      <AddElementPanel onClose={() => setActiveTool('select')} />
                     ) : lensPanelVisible ? (
                       <LensPanel onClose={() => setLensPanelVisible(false)} />
                     ) : idsPanelVisible ? (
@@ -270,8 +283,8 @@ export function ViewerLayout() {
               </PanelGroup>
             </div>
 
-            {/* Bottom Panel - Lists or Script (custom resizable, outside PanelGroup) */}
-            {(listPanelVisible || scriptPanelVisible || !!activeBottomAnalysisExtension) && (
+            {/* Bottom Panel - Lists / Script / Gantt / analysis ext (custom resizable) */}
+            {(listPanelVisible || scriptPanelVisible || ganttPanelVisible || !!activeBottomAnalysisExtension) && (
               <div style={{ height: bottomHeight, flexShrink: 0 }} className="relative">
                 {/* Drag handle */}
                 <div
@@ -281,6 +294,8 @@ export function ViewerLayout() {
                 <div className="h-full w-full overflow-hidden border-t pt-1.5">
                   {activeBottomAnalysisExtension ? (
                     activeBottomAnalysisExtension.renderPanel({ onClose: closeActiveAnalysisExtension })
+                  ) : ganttPanelVisible ? (
+                    <GanttPanel onClose={() => setGanttPanelVisible(false)} />
                   ) : scriptPanelVisible ? (
                     <ScriptPanel onClose={() => setScriptPanelVisible(false)} />
                   ) : (
@@ -326,7 +341,7 @@ export function ViewerLayout() {
               <div className="absolute inset-x-0 bottom-0 h-[50vh] bg-background border-t rounded-t-xl shadow-xl z-40 animate-in slide-in-from-bottom">
                 <div className="flex items-center justify-between p-2 border-b">
                   <span className="font-medium text-sm">
-                    {activeAnalysisExtension ? activeAnalysisExtension.label : scriptPanelVisible ? 'Script' : listPanelVisible ? 'Lists' : lensPanelVisible ? 'Lens' : idsPanelVisible ? 'IDS Validation' : bcfPanelVisible ? 'BCF Issues' : 'Properties'}
+                    {activeAnalysisExtension ? activeAnalysisExtension.label : ganttPanelVisible ? 'Schedule' : scriptPanelVisible ? 'Script' : listPanelVisible ? 'Lists' : lensPanelVisible ? 'Lens' : idsPanelVisible ? 'IDS Validation' : bcfPanelVisible ? 'BCF Issues' : 'Inspector'}
                   </span>
                   <button
                     className="p-1 hover:bg-muted rounded"
@@ -334,6 +349,7 @@ export function ViewerLayout() {
                       setRightPanelCollapsed(true);
                       if (scriptPanelVisible) setScriptPanelVisible(false);
                       if (listPanelVisible) setListPanelVisible(false);
+                      if (ganttPanelVisible) setGanttPanelVisible(false);
                       if (bcfPanelVisible) setBcfPanelVisible(false);
                       if (lensPanelVisible) setLensPanelVisible(false);
                       if (idsPanelVisible) setIdsPanelVisible(false);
@@ -351,10 +367,14 @@ export function ViewerLayout() {
                     activeBottomAnalysisExtension.renderPanel({ onClose: closeActiveAnalysisExtension })
                   ) : activeRightAnalysisExtension ? (
                     activeRightAnalysisExtension.renderPanel({ onClose: closeActiveAnalysisExtension })
+                  ) : ganttPanelVisible ? (
+                    <GanttPanel onClose={() => setGanttPanelVisible(false)} />
                   ) : scriptPanelVisible ? (
                     <ScriptPanel onClose={() => setScriptPanelVisible(false)} />
                   ) : listPanelVisible ? (
                     <ListPanel onClose={() => setListPanelVisible(false)} />
+                  ) : activeTool === 'addElement' ? (
+                    <AddElementPanel onClose={() => setActiveTool('select')} />
                   ) : lensPanelVisible ? (
                     <LensPanel onClose={() => setLensPanelVisible(false)} />
                   ) : idsPanelVisible ? (
@@ -386,7 +406,7 @@ export function ViewerLayout() {
                   setRightPanelCollapsed(!rightPanelCollapsed);
                 }}
               >
-                Properties
+                Inspector
               </button>
             </div>
           </div>

package/src/components/viewer/Viewport.tsx

@@ -456,11 +456,21 @@ export function Viewport({
     }
 
     // Set cursor based on active tool
-    if (activeTool === 'measure') {
+    if (activeTool === 'measure' || activeTool === 'annotate' || activeTool === 'addElement') {
       canvas.style.cursor = 'crosshair';
     } else {
       canvas.style.cursor = 'default';
     }
+
+    // Clear add-element pending state + hover point when leaving the
+    // tool so the SVG overlay doesn't paint stale geometry from a
+    // previous session.
+    if (activeTool !== 'addElement') {
+      const state = useViewerStore.getState();
+      if (state.addElementPendingPoints.length > 0 || state.addElementHoverPoint !== null) {
+        state.clearAddElementPending();
+      }
+    }
   }, [activeTool, activeMeasurement, cancelMeasurement]);
 
   // Helper: calculate scale bar value (world-space size for 96px scale bar)

package/src/components/viewer/ViewportContainer.tsx

@@ -6,6 +6,7 @@ import { useMemo, useRef, useState, useCallback, useEffect, useSyncExternalStore
 import { Viewport } from './Viewport';
 import { ViewportOverlays } from './ViewportOverlays';
 import { ToolOverlays } from './ToolOverlays';
+import { AnnotationLayer } from './annotations/AnnotationLayer';
 import { Section2DPanel } from './Section2DPanel';
 import { BasketPresentationDock } from './BasketPresentationDock';
 import { BCFOverlay } from './bcf/BCFOverlay';
@@ -851,6 +852,7 @@ export function ViewportContainer() {
         releaseGeometryAfterStream={false}
         onGeometryReleased={releaseGeometryMemory}
       />
+      <AnnotationLayer />
       {bcfOverlayVisible && <BCFOverlay />}
       <ViewportOverlays />
       <ToolOverlays />

package/src/components/viewer/annotations/AnnotationDropInput.tsx

@@ -0,0 +1,203 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * The inline note input that appears at the click site when the user
+ * drops a fresh pin with the Annotate tool. Shape mirrors the popover's
+ * edit mode so muscle memory carries over, but the chrome is lighter
+ * (a guiding label, no entity-context header) since this is a
+ * commit-or-cancel surface.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Check, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+const MAX_NOTE_LEN = 2000;
+const SOFT_NOTE_LIMIT = 200;
+const INPUT_WIDTH = 280;
+const INPUT_OFFSET_X = 16;
+
+export interface AnnotationDropInputProps {
+  anchorX: number;
+  anchorY: number;
+  canvasWidth: number;
+  canvasHeight: number;
+  /** Resolved entity type when the drop landed on a known mesh. */
+  entityType?: string | null;
+  entityExpressId?: number | null;
+  onSave: (note: string) => void;
+  onCancel: () => void;
+}
+
+export function AnnotationDropInput({
+  anchorX,
+  anchorY,
+  canvasWidth,
+  canvasHeight,
+  entityType,
+  entityExpressId,
+  onSave,
+  onCancel,
+}: AnnotationDropInputProps) {
+  const [draft, setDraft] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    textareaRef.current?.focus();
+  }, []);
+
+  // Cancel on outside click, but defer registration so the click that
+  // dropped the pin doesn't immediately close the input.
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      const node = containerRef.current;
+      if (!node) return;
+      if (node.contains(e.target as Node)) return;
+      // Empty draft on outside-click → silent cancel; non-empty
+      // → commit the draft (matches "blur to save" feel without
+      // destroying typed content). An over-limit draft is rejected
+      // consistently with the disabled save button.
+      if (draft.trim().length === 0 || draft.length > MAX_NOTE_LEN) {
+        onCancel();
+      } else {
+        onSave(draft);
+      }
+    };
+    const id = window.setTimeout(() => {
+      document.addEventListener('mousedown', handler);
+    }, 0);
+    return () => {
+      window.clearTimeout(id);
+      document.removeEventListener('mousedown', handler);
+    };
+  }, [draft, onSave, onCancel]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        if (draft.trim().length === 0 || draft.length > MAX_NOTE_LEN) {
+          // Over-limit Enter does nothing — match the disabled button.
+          if (draft.trim().length === 0) onCancel();
+        } else {
+          onSave(draft);
+        }
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [draft, onSave, onCancel],
+  );
+
+  const wantsLeft = anchorX + INPUT_OFFSET_X + INPUT_WIDTH > canvasWidth;
+  const left = wantsLeft
+    ? Math.max(8, anchorX - INPUT_OFFSET_X - INPUT_WIDTH)
+    : Math.min(anchorX + INPUT_OFFSET_X, canvasWidth - INPUT_WIDTH - 8);
+  const top = Math.min(Math.max(8, anchorY - 8), canvasHeight - 140);
+
+  const charCountVisible = draft.length >= SOFT_NOTE_LIMIT;
+  const overSoftLimit = draft.length > SOFT_NOTE_LIMIT;
+  const overHardLimit = draft.length > MAX_NOTE_LEN;
+
+  return (
+    <div
+      ref={containerRef}
+      role="dialog"
+      aria-label="New annotation"
+      style={{ left, top, width: INPUT_WIDTH }}
+      className={cn(
+        'absolute z-[60] pointer-events-auto',
+        'rounded-md border border-amber-400/70 dark:border-amber-600/40',
+        'bg-white/95 dark:bg-zinc-950/95 backdrop-blur-md',
+        'shadow-[0_8px_32px_rgba(0,0,0,0.18)]',
+        'overflow-hidden',
+        'animate-in fade-in-0 zoom-in-95 duration-150',
+      )}
+    >
+      {/* Guiding label — explicit so the user knows what to type and
+          establishes "this is for capturing intent, not chat". */}
+      <div className="px-3 py-1.5 border-b border-zinc-200 dark:border-zinc-800 bg-amber-50/40 dark:bg-amber-950/20">
+        <span className="font-mono text-[10px] uppercase tracking-wider text-amber-700 dark:text-amber-300">
+          What's worth noting?
+          {entityType && (
+            <span className="ml-1.5 text-zinc-500 dark:text-zinc-400">
+              · {entityType}
+              {entityExpressId !== null && entityExpressId !== undefined && ` #${entityExpressId}`}
+            </span>
+          )}
+        </span>
+      </div>
+
+      <div className="px-3 py-2.5">
+        <textarea
+          ref={textareaRef}
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="A short note — flag a defect, ask a question, leave context…"
+          rows={3}
+          maxLength={MAX_NOTE_LEN + 100}
+          className={cn(
+            'w-full resize-none font-mono text-[11px] leading-relaxed',
+            'bg-zinc-50 dark:bg-zinc-900/60 text-zinc-800 dark:text-zinc-200',
+            'border border-zinc-200 dark:border-zinc-800 rounded-sm',
+            'px-2 py-1.5 outline-none focus:ring-1',
+            overHardLimit
+              ? 'focus:ring-red-400 border-red-300 dark:border-red-700/60'
+              : 'focus:ring-amber-400/50 focus:border-amber-300/60',
+          )}
+          spellCheck
+          autoCorrect="on"
+        />
+        <div className="mt-1.5 flex items-center justify-between gap-2 text-[10px] font-mono">
+          <span className="text-zinc-400 dark:text-zinc-500">
+            ⏎ save · ⇧⏎ newline · esc cancel
+          </span>
+          {charCountVisible && (
+            <span
+              className={cn(
+                'tabular-nums',
+                overHardLimit
+                  ? 'text-red-500'
+                  : overSoftLimit
+                    ? 'text-amber-600 dark:text-amber-400'
+                    : 'text-zinc-400',
+              )}
+            >
+              {draft.length}/{MAX_NOTE_LEN}
+            </span>
+          )}
+        </div>
+        <div className="mt-2 flex items-center justify-end gap-1">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2 text-[11px]"
+            onClick={onCancel}
+          >
+            <X className="h-3 w-3 mr-1" />
+            Cancel
+          </Button>
+          <Button
+            size="sm"
+            className="h-7 px-2 text-[11px] bg-amber-500 hover:bg-amber-500/90 text-white"
+            onClick={() => {
+              if (overHardLimit) return;
+              if (draft.trim().length === 0) onCancel();
+              else onSave(draft);
+            }}
+            disabled={overHardLimit}
+          >
+            <Check className="h-3 w-3 mr-1" />
+            Drop pin
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/viewer/annotations/AnnotationLayer.tsx

@@ -0,0 +1,287 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * DOM-billboard overlay for annotation pins.
+ *
+ * Sits on top of the WebGPU canvas and re-projects every pin's world
+ * position to screen space each frame via the camera callbacks.
+ * Uses a single rAF loop driven by camera/canvas events (we listen
+ * to a per-frame tick exposed by the camera) so the loop pauses when
+ * nothing's moving — the runtime cost when idle is zero.
+ *
+ * Key invariants:
+ *   • The layer is `pointer-events: none` by default. Each pin and
+ *     popover opts into `pointer-events: auto` so 3D interactions
+ *     (orbit, pan, pick) still pass through the empty space between
+ *     pins.
+ *   • Only one popover or drop-input is visible at a time. They
+ *     anchor to the pin's last projected position and re-anchor as
+ *     the camera moves.
+ *   • Persistence happens on commit/edit/delete via the slice's
+ *     localStorage write — this layer never touches storage directly.
+ */
+
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useViewerStore } from '@/store';
+import { useIfc } from '@/hooks/useIfc';
+import type { AnnotationPosition } from '@/store/slices/annotationsSlice';
+import { AnnotationPin } from './AnnotationPin';
+import { AnnotationPopover } from './AnnotationPopover';
+import { AnnotationDropInput } from './AnnotationDropInput';
+
+interface ProjectedPin {
+  id: string;
+  index: number;
+  /** Screen-space position relative to the canvas. Null when behind the camera. */
+  screen: { x: number; y: number } | null;
+  preview: string;
+}
+
+function makePreview(note: string, maxLen = 60): string {
+  const trimmed = note.trim();
+  if (trimmed.length === 0) return '(empty note)';
+  return trimmed.length > maxLen ? `${trimmed.slice(0, maxLen)}…` : trimmed;
+}
+
+/**
+ * Pins live in the canvas's coordinate space. The wrapping <div>
+ * matches the canvas's bounding rect; pins are positioned absolutely
+ * within it. We mirror the canvas geometry via a ResizeObserver +
+ * a per-frame projection tick.
+ */
+export function AnnotationLayer() {
+  const annotations = useViewerStore((s) => s.annotations);
+  const draft = useViewerStore((s) => s.draft);
+  const selectedAnnotationId = useViewerStore((s) => s.selectedAnnotationId);
+  const selectAnnotation = useViewerStore((s) => s.selectAnnotation);
+  const updateAnnotation = useViewerStore((s) => s.updateAnnotation);
+  const removeAnnotation = useViewerStore((s) => s.removeAnnotation);
+  const commitDraft = useViewerStore((s) => s.commitDraft);
+  const cancelDraft = useViewerStore((s) => s.cancelDraft);
+  const cameraCallbacks = useViewerStore((s) => s.cameraCallbacks);
+  const { ifcDataStore, models } = useIfc();
+
+  // Track canvas geometry so the overlay sits exactly on top.
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [bounds, setBounds] = useState<{ width: number; height: number } | null>(null);
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const parent = container.parentElement;
+    if (!parent) return;
+
+    let observer: ResizeObserver | null = null;
+
+    const measure = (canvas: HTMLCanvasElement) => {
+      const rect = canvas.getBoundingClientRect();
+      setBounds({ width: rect.width, height: rect.height });
+    };
+
+    const bind = (canvas: HTMLCanvasElement) => {
+      measure(canvas);
+      observer = new ResizeObserver(() => measure(canvas));
+      observer.observe(canvas);
+    };
+
+    const initialCanvas = parent.querySelector('canvas') as HTMLCanvasElement | null;
+    if (initialCanvas) {
+      bind(initialCanvas);
+      return () => observer?.disconnect();
+    }
+
+    // Canvas not mounted yet (initial mount before viewport renders) —
+    // watch the parent for the canvas to appear, then bind once it does.
+    const mutationObserver = new MutationObserver(() => {
+      const canvas = parent.querySelector('canvas') as HTMLCanvasElement | null;
+      if (canvas) {
+        bind(canvas);
+        mutationObserver.disconnect();
+      }
+    });
+    mutationObserver.observe(parent, { childList: true, subtree: true });
+
+    return () => {
+      mutationObserver.disconnect();
+      observer?.disconnect();
+    };
+  }, []);
+
+  // Stable list view so React doesn't churn when the Map identity
+  // changes but the entries are equal.
+  const annotationList = useMemo(() => Array.from(annotations.values()), [annotations]);
+
+  // Per-frame projection tick. We don't have a global "camera moved"
+  // event, so a rAF loop is the cheapest way to keep pins glued to
+  // the world. The loop is mostly idle — projection is < 10 µs per
+  // pin and the typical scene has < 20 pins.
+  const [projectedPins, setProjectedPins] = useState<ProjectedPin[]>([]);
+  const [draftScreen, setDraftScreen] = useState<{ x: number; y: number } | null>(null);
+
+  useEffect(() => {
+    const project = cameraCallbacks.projectToScreen;
+    if (!project) {
+      setProjectedPins([]);
+      setDraftScreen(null);
+      return;
+    }
+
+    let raf: number | null = null;
+    let lastSerialized = '';
+
+    const tick = () => {
+      const next: ProjectedPin[] = annotationList.map((ann, i) => ({
+        id: ann.id,
+        index: i + 1,
+        screen: project(ann.position),
+        preview: makePreview(ann.note),
+      }));
+
+      // Cheap deep-eq check: serialize the screen positions. Skip the
+      // setState when nothing moved, otherwise we re-render every
+      // frame even when the camera is still.
+      const serialized = next.map((p) => `${p.id}:${p.screen?.x ?? 'x'}:${p.screen?.y ?? 'y'}`).join(',');
+      if (serialized !== lastSerialized) {
+        lastSerialized = serialized;
+        setProjectedPins(next);
+      }
+
+      const draftPos = useViewerStore.getState().draft?.position ?? null;
+      const draftScreenNext = draftPos ? project(draftPos) : null;
+      setDraftScreen((prev) => {
+        if (prev === draftScreenNext) return prev;
+        if (prev && draftScreenNext && prev.x === draftScreenNext.x && prev.y === draftScreenNext.y) {
+          return prev;
+        }
+        return draftScreenNext;
+      });
+
+      raf = requestAnimationFrame(tick);
+    };
+
+    raf = requestAnimationFrame(tick);
+    return () => {
+      if (raf !== null) cancelAnimationFrame(raf);
+    };
+    // The list of annotations is captured per-render via annotationList;
+    // that closure is what the rAF tick reads. Pin position changes
+    // automatically pick up via the next render's loop replacement.
+  }, [cameraCallbacks, annotationList]);
+
+  const selectedAnnotation = selectedAnnotationId ? annotations.get(selectedAnnotationId) : null;
+  const selectedScreen = useMemo(() => {
+    if (!selectedAnnotation) return null;
+    return projectedPins.find((p) => p.id === selectedAnnotation.id)?.screen ?? null;
+  }, [selectedAnnotation, projectedPins]);
+
+  // Resolve entity type + id for the popover header. Cheap lookup
+  // against whichever data store the annotation was anchored to.
+  const resolveEntityType = (modelId: string | null, expressId: number | null): string | null => {
+    if (expressId === null) return null;
+    // Federation safety: when the annotation carries a modelId that
+    // isn't in the current `models` map, falling back to
+    // `ifcDataStore` would silently resolve `expressId` against the
+    // wrong model (the same id can exist in many federated models).
+    // The fallback is therefore restricted to single-model sessions.
+    let dataStore: typeof ifcDataStore | null;
+    if (!modelId) {
+      dataStore = ifcDataStore;
+    } else {
+      const scoped = models.get(modelId)?.ifcDataStore;
+      if (scoped) {
+        dataStore = scoped;
+      } else if (models.size <= 1) {
+        dataStore = ifcDataStore;
+      } else {
+        return null;
+      }
+    }
+    if (!dataStore?.entities) return null;
+    return dataStore.entities.getTypeName(expressId) || null;
+  };
+
+  if (!bounds) {
+    return <div ref={containerRef} className="absolute inset-0 pointer-events-none" />;
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className="absolute inset-0 pointer-events-none overflow-hidden"
+      aria-label="Annotations layer"
+    >
+      {/* Pins */}
+      {projectedPins.map((pin) => {
+        if (!pin.screen) return null;
+        const annotation = annotations.get(pin.id);
+        if (!annotation) return null;
+        const isSelected = selectedAnnotationId === pin.id;
+        return (
+          <div
+            key={pin.id}
+            data-annotation-pin-id={pin.id}
+            className="absolute pointer-events-auto"
+            style={{
+              left: pin.screen.x,
+              top: pin.screen.y,
+              transform: 'translate(-50%, -50%)',
+              animationDelay: `${pin.index * 40}ms`,
+            }}
+          >
+            <AnnotationPin
+              index={pin.index}
+              selected={isSelected}
+              preview={pin.preview}
+              onClick={() => selectAnnotation(isSelected ? null : pin.id)}
+            />
+          </div>
+        );
+      })}
+
+      {/* Popover for the selected pin */}
+      {selectedAnnotation && selectedScreen && (
+        <AnnotationPopover
+          annotation={selectedAnnotation}
+          anchorX={selectedScreen.x}
+          anchorY={selectedScreen.y}
+          canvasWidth={bounds.width}
+          canvasHeight={bounds.height}
+          entityType={resolveEntityType(selectedAnnotation.modelId, selectedAnnotation.entityExpressId)}
+          onSave={(note) => updateAnnotation(selectedAnnotation.id, note)}
+          onDelete={() => removeAnnotation(selectedAnnotation.id)}
+          onClose={() => selectAnnotation(null)}
+        />
+      )}
+
+      {/* Drop input + ghost pin while drafting */}
+      {draft && draftScreen && (
+        <>
+          <div
+            className="absolute pointer-events-none"
+            style={{
+              left: draftScreen.x,
+              top: draftScreen.y,
+              transform: 'translate(-50%, -50%)',
+            }}
+          >
+            <AnnotationPin index={annotationList.length + 1} variant="draft" />
+          </div>
+          <AnnotationDropInput
+            anchorX={draftScreen.x}
+            anchorY={draftScreen.y}
+            canvasWidth={bounds.width}
+            canvasHeight={bounds.height}
+            entityType={resolveEntityType(draft.modelId, draft.entityExpressId)}
+            entityExpressId={draft.entityExpressId}
+            onSave={(note) => commitDraft(note)}
+            onCancel={cancelDraft}
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+export type { AnnotationPosition };