@ifc-lite/viewer 1.17.4 → 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,
@@ -186,6 +196,7 @@ export function ViewerLayout() {
   // Keep DOM class in sync when theme changes (initial class is set by inline script in index.html)
   useEffect(() => {
     document.documentElement.classList.toggle('dark', theme === 'dark');
+    document.documentElement.classList.toggle('colorful', theme === 'colorful');
   }, [theme]);
 
 
@@ -199,6 +210,7 @@ export function ViewerLayout() {
         <EntityContextMenu />
         <HoverTooltip />
         <CommandPalette open={commandPaletteOpen} onOpenChange={setCommandPaletteOpen} />
+        <SearchModal />
 
         {/* Main Toolbar */}
         <MainToolbar onShowShortcuts={shortcutsDialog.toggle} />
@@ -255,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 ? (
@@ -269,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
@@ -280,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)} />
                   ) : (
@@ -325,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"
@@ -333,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);
@@ -350,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 ? (
@@ -385,7 +406,7 @@ export function ViewerLayout() {
                   setRightPanelCollapsed(!rightPanelCollapsed);
                 }}
               >
-                Properties
+                Inspector
               </button>
             </div>
           </div>

package/src/components/viewer/Viewport.tsx

@@ -312,7 +312,7 @@ export function Viewport({
     if (cesiumActive) {
       clearColorRef.current = [0, 0, 0, 0]; // fully transparent
     } else {
-      clearColorRef.current = getThemeClearColor(theme as 'light' | 'dark');
+      clearColorRef.current = getThemeClearColor(theme as 'light' | 'dark' | 'colorful');
     }
     rendererRef.current?.requestRender();
   }, [cesiumActive, theme]);
@@ -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)
@@ -878,13 +888,25 @@ export function Viewport({
   // The model will be rendered by Cesium (as GLB) for correct positioning.
   // Canvas stays in the DOM for picking/interaction.
 
+  // Colorful mode: transparent WebGPU clear colour + CSS gradient on the
+  // canvas element.  The gradient is the *CSS background* of the <canvas>;
+  // premultiplied-alpha compositing shows it through transparent clear-colour
+  // regions while opaque model fragments (alpha=1) stay fully visible.
+  const canvasStyle = cesiumActive
+    ? { opacity: 0 }
+    : theme === 'colorful'
+      ? {
+          background: 'linear-gradient(180deg, #4a5a8a 0%, #6272a8 10%, #7e8dba 20%, #9aa3c8 32%, #b5b8d1 44%, #cdc3d4 56%, #dcccc8 68%, #e8d5be 80%, #f0ddb8 92%, #f5e2b6 100%)',
+        }
+      : undefined;
+
   return (
     <canvas
       ref={canvasRef}
       data-viewport="main"
       tabIndex={-1}
       className={`w-full h-full block ${cesiumActive ? 'relative z-[1]' : ''}`}
-      style={cesiumActive ? { opacity: 0 } : undefined}
+      style={canvasStyle}
       onPointerDown={focusViewportForKeyboardShortcuts}
     />
   );

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';
@@ -18,10 +19,11 @@ import { useWebGPU } from '@/hooks/useWebGPU';
 import { openIfcFileDialog } from '@/services/file-dialog';
 import { logToDesktopTerminal } from '@/services/desktop-logger';
 import { cacheFileBlobs, formatFileSize, getCachedFile, getRecentFiles, recordRecentFiles, type RecentFileEntry } from '@/lib/recent-files';
-import { isTauri } from '@/utils/ifcConfig';
+import { isTauri } from '@/lib/platform';
 import { Upload, MousePointer, Layers, Info, Command, AlertTriangle, ChevronDown, ExternalLink, Plus, Clock3 } from 'lucide-react';
 import type { MeshData, CoordinateInfo, GeometryResult } from '@ifc-lite/geometry';
-import { extractGeoreferencingOnDemand, type IfcDataStore, type MapConversion, type ProjectedCRS } from '@ifc-lite/parser';
+import { type IfcDataStore } from '@ifc-lite/parser';
+import { getEffectiveGeoreference } from '@/lib/geo/effective-georef';
 
 const ZERO_VEC3 = { x: 0, y: 0, z: 0 };
 const DEFAULT_COORDINATE_INFO: CoordinateInfo = {
@@ -43,6 +45,7 @@ export function ViewportContainer() {
   const cesiumEnabled = useViewerStore((s) => s.cesiumEnabled);
   const georefMutations = useViewerStore((s) => s.georefMutations);
   const setCesiumSourceModelId = useViewerStore((s) => s.setCesiumSourceModelId);
+  const setCesiumAvailable = useViewerStore((s) => s.setCesiumAvailable);
   // Subscribe to mutationVersion so Cesium reacts to georef edits
   const mutationVersion = useViewerStore((s) => s.mutationVersion);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -176,82 +179,64 @@ export function ViewportContainer() {
   const georef = useMemo(() => {
     if (!cesiumEnabled) return null;
 
-    // Helper: merge original georef with mutations for a model
-    function mergeGeoref(
-      originalCRS: ProjectedCRS | undefined,
-      originalConv: MapConversion | undefined,
-      modelId: string,
-    ): { mapConversion: MapConversion; projectedCRS: ProjectedCRS } | null {
-      const muts = georefMutations.get(modelId);
-      const mutCRS = muts?.projectedCRS;
-      const mutConv = muts?.mapConversion;
-
-      // Build merged ProjectedCRS — mutation fields override originals
-      const hasCRS = originalCRS || mutCRS;
-      if (!hasCRS) return null;
-      const projectedCRS: ProjectedCRS = {
-        id: originalCRS?.id ?? 0,
-        name: (mutCRS?.name ?? originalCRS?.name ?? '') as string,
-        description: mutCRS?.description ?? originalCRS?.description,
-        geodeticDatum: mutCRS?.geodeticDatum ?? originalCRS?.geodeticDatum,
-        verticalDatum: mutCRS?.verticalDatum ?? originalCRS?.verticalDatum,
-        mapProjection: mutCRS?.mapProjection ?? originalCRS?.mapProjection,
-        mapZone: mutCRS?.mapZone ?? originalCRS?.mapZone,
-        mapUnit: mutCRS?.mapUnit ?? originalCRS?.mapUnit,
-      };
-
-      // Need at least an EPSG name to resolve projection
-      if (!projectedCRS.name) return null;
-
-      // Build merged MapConversion
-      const mapConversion: MapConversion = {
-        id: originalConv?.id ?? 0,
-        sourceCRS: originalConv?.sourceCRS ?? 0,
-        targetCRS: originalConv?.targetCRS ?? 0,
-        eastings: (mutConv?.eastings ?? originalConv?.eastings ?? 0) as number,
-        northings: (mutConv?.northings ?? originalConv?.northings ?? 0) as number,
-        orthogonalHeight: (mutConv?.orthogonalHeight ?? originalConv?.orthogonalHeight ?? 0) as number,
-        xAxisAbscissa: mutConv?.xAxisAbscissa ?? originalConv?.xAxisAbscissa,
-        xAxisOrdinate: mutConv?.xAxisOrdinate ?? originalConv?.xAxisOrdinate,
-        scale: mutConv?.scale ?? originalConv?.scale,
-      };
-
-      return { mapConversion, projectedCRS };
-    }
-
     // Check federated models first
     for (const [modelId, model] of storeModels) {
       const ds = model.ifcDataStore;
       if (!ds) continue;
-      const original = extractGeoreferencingOnDemand(ds as IfcDataStore);
-      const merged = mergeGeoref(
-        original?.projectedCRS,
-        original?.mapConversion,
-        modelId,
+      const effective = getEffectiveGeoreference(
+        ds as IfcDataStore,
+        model.geometryResult?.coordinateInfo,
+        georefMutations.get(modelId),
       );
-      if (merged) {
-        // Return coordinateInfo from the SAME model to avoid mismatched transforms
-        const coordInfo = model.geometryResult?.coordinateInfo;
-        return { hasGeoreference: true, ...merged, sourceModelId: modelId, coordinateInfo: coordInfo };
+      if (effective?.projectedCRS?.name && effective.mapConversion) {
+        return { ...effective, sourceModelId: modelId };
       }
     }
 
     // Fallback to legacy single-model
     if (ifcDataStore) {
-      const original = extractGeoreferencingOnDemand(ifcDataStore as IfcDataStore);
-      const merged = mergeGeoref(
-        original?.projectedCRS,
-        original?.mapConversion,
-        '__legacy__',
+      const effective = getEffectiveGeoreference(
+        ifcDataStore as IfcDataStore,
+        mergedGeometryResult?.coordinateInfo,
+        georefMutations.get('__legacy__'),
       );
-      if (merged) {
-        return { hasGeoreference: true, ...merged, sourceModelId: '__legacy__', coordinateInfo: mergedGeometryResult?.coordinateInfo };
+      if (effective?.projectedCRS?.name && effective.mapConversion) {
+        return { ...effective, sourceModelId: '__legacy__' };
       }
     }
 
     return null;
   }, [cesiumEnabled, storeModels, ifcDataStore, georefMutations, mutationVersion, mergedGeometryResult]);
 
+  // Determine whether Cesium button should be visible (model has georef or user added it via mutations).
+  // Runs independently of cesiumEnabled so the button appears/disappears reactively.
+  useEffect(() => {
+    function hasGeoref(): boolean {
+      // Check federated models
+      for (const [modelId, model] of storeModels) {
+        const ds = model.ifcDataStore;
+        if (!ds) continue;
+        const effective = getEffectiveGeoreference(
+          ds as IfcDataStore,
+          model.geometryResult?.coordinateInfo,
+          georefMutations.get(modelId),
+        );
+        if (effective?.projectedCRS?.name) return true;
+      }
+      // Fallback to legacy single-model
+      if (ifcDataStore) {
+        const effective = getEffectiveGeoreference(
+          ifcDataStore as IfcDataStore,
+          mergedGeometryResult?.coordinateInfo,
+          georefMutations.get('__legacy__'),
+        );
+        if (effective?.projectedCRS?.name) return true;
+      }
+      return false;
+    }
+    setCesiumAvailable(hasGeoref());
+  }, [storeModels, ifcDataStore, georefMutations, mutationVersion, setCesiumAvailable, mergedGeometryResult]);
+
   // Sync the active Cesium source model ID so terrain actions are scoped correctly
   useEffect(() => {
     setCesiumSourceModelId(georef?.sourceModelId ?? null);
@@ -847,13 +832,14 @@ export function ViewportContainer() {
         </div>
       )}
 
-      {/* Cesium 3D world context overlay — rendered behind the WebGPU canvas */}
-      {cesiumEnabled && georef && (
+      {/* Cesium 3D world context overlay — rendered behind the WebGPU canvas (web only) */}
+      {cesiumEnabled && georef && !isTauri() && (
         <CesiumOverlay
           mapConversion={georef.mapConversion}
           projectedCRS={georef.projectedCRS}
           coordinateInfo={georef.coordinateInfo}
           geometryResult={mergedGeometryResult}
+          lengthUnitScale={georef.lengthUnitScale}
         />
       )}
       <Viewport
@@ -862,10 +848,11 @@ export function ViewportContainer() {
         coordinateInfo={mergedGeometryResult?.coordinateInfo}
         computedIsolatedIds={computedIsolatedIds}
         modelIdToIndex={modelIdToIndex}
-        cesiumActive={cesiumEnabled && georef !== null}
+        cesiumActive={cesiumEnabled && georef !== null && !isTauri()}
         releaseGeometryAfterStream={false}
         onGeometryReleased={releaseGeometryMemory}
       />
+      <AnnotationLayer />
       {bcfOverlayVisible && <BCFOverlay />}
       <ViewportOverlays />
       <ToolOverlays />

package/src/components/viewer/ViewportOverlays.tsx

@@ -21,6 +21,9 @@ import type { CesiumDataSource } from '@/store/slices/cesiumSlice';
 import { goHomeFromStore } from '@/store/homeView';
 import { useIfc } from '@/hooks/useIfc';
 import { cn } from '@/lib/utils';
+import { isTauri } from '@/lib/platform';
+
+const isDesktop = isTauri();
 import { ViewCube, type ViewCubeRef } from './ViewCube';
 import { AxisHelper, type AxisHelperRef } from './AxisHelper';
 
@@ -146,8 +149,8 @@ export function ViewportOverlays({ hideViewCube = false }: { hideViewCube?: bool
 
   return (
     <>
-      {/* Bottom-right: Cesium settings overlay OR Navigation controls */}
-      {cesiumEnabled ? (
+      {/* Bottom-right: Cesium settings overlay OR Navigation controls (Cesium is web-only) */}
+      {cesiumEnabled && !isDesktop ? (
         <CesiumSettingsOverlay
           dataSource={cesiumDataSource}
           onDataSourceChange={setCesiumDataSource}

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>
+  );
+}