@ifc-lite/viewer 1.7.0 → 1.9.0

package/src/components/viewer/Section2DPanel.tsx

@@ -12,7 +12,7 @@
  */
 
 import React, { useCallback, useRef, useState, useEffect, useMemo } from 'react';
-import { X, Download, Eye, EyeOff, Maximize2, ZoomIn, ZoomOut, Loader2, Printer, GripVertical, MoreHorizontal, RefreshCw, Pin, PinOff, Palette, Ruler, Trash2, FileText, Shapes, Box } from 'lucide-react';
+import { X, Download, Eye, EyeOff, Maximize2, ZoomIn, ZoomOut, Loader2, Printer, GripVertical, MoreHorizontal, RefreshCw, Pin, PinOff, Palette, Ruler, Trash2, FileText, Shapes, Box, PenTool, Hexagon, Type, Cloud, MousePointer2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -28,9 +28,11 @@ import { type GeometryResult } from '@ifc-lite/geometry';
 import { DrawingSettingsPanel } from './DrawingSettingsPanel';
 import { SheetSetupPanel } from './SheetSetupPanel';
 import { TitleBlockEditor } from './TitleBlockEditor';
+import { TextAnnotationEditor } from './TextAnnotationEditor';
 import { Drawing2DCanvas } from './Drawing2DCanvas';
 import { useDrawingGeneration } from '@/hooks/useDrawingGeneration';
 import { useMeasure2D } from '@/hooks/useMeasure2D';
+import { useAnnotation2D } from '@/hooks/useAnnotation2D';
 import { useViewControls } from '@/hooks/useViewControls';
 import { useDrawingExport } from '@/hooks/useDrawingExport';
 
@@ -98,6 +100,39 @@ export function Section2DPanel({
   const measure2DSnapPoint = useViewerStore((s) => s.measure2DSnapPoint);
   const setMeasure2DSnapPoint = useViewerStore((s) => s.setMeasure2DSnapPoint);
 
+  // Annotation tool state
+  const annotation2DActiveTool = useViewerStore((s) => s.annotation2DActiveTool);
+  const setAnnotation2DActiveTool = useViewerStore((s) => s.setAnnotation2DActiveTool);
+  const annotation2DCursorPos = useViewerStore((s) => s.annotation2DCursorPos);
+  const setAnnotation2DCursorPos = useViewerStore((s) => s.setAnnotation2DCursorPos);
+  // Polygon area state
+  const polygonArea2DPoints = useViewerStore((s) => s.polygonArea2DPoints);
+  const polygonArea2DResults = useViewerStore((s) => s.polygonArea2DResults);
+  const addPolygonArea2DPoint = useViewerStore((s) => s.addPolygonArea2DPoint);
+  const completePolygonArea2D = useViewerStore((s) => s.completePolygonArea2D);
+  const cancelPolygonArea2D = useViewerStore((s) => s.cancelPolygonArea2D);
+  const clearPolygonArea2DResults = useViewerStore((s) => s.clearPolygonArea2DResults);
+  // Text annotation state
+  const textAnnotations2D = useViewerStore((s) => s.textAnnotations2D);
+  const textAnnotation2DEditing = useViewerStore((s) => s.textAnnotation2DEditing);
+  const addTextAnnotation2D = useViewerStore((s) => s.addTextAnnotation2D);
+  const updateTextAnnotation2D = useViewerStore((s) => s.updateTextAnnotation2D);
+  const removeTextAnnotation2D = useViewerStore((s) => s.removeTextAnnotation2D);
+  const setTextAnnotation2DEditing = useViewerStore((s) => s.setTextAnnotation2DEditing);
+  // Cloud annotation state
+  const cloudAnnotation2DPoints = useViewerStore((s) => s.cloudAnnotation2DPoints);
+  const cloudAnnotations2D = useViewerStore((s) => s.cloudAnnotations2D);
+  const addCloudAnnotation2DPoint = useViewerStore((s) => s.addCloudAnnotation2DPoint);
+  const completeCloudAnnotation2D = useViewerStore((s) => s.completeCloudAnnotation2D);
+  const cancelCloudAnnotation2D = useViewerStore((s) => s.cancelCloudAnnotation2D);
+  // Selection
+  const selectedAnnotation2D = useViewerStore((s) => s.selectedAnnotation2D);
+  const setSelectedAnnotation2D = useViewerStore((s) => s.setSelectedAnnotation2D);
+  const deleteSelectedAnnotation2D = useViewerStore((s) => s.deleteSelectedAnnotation2D);
+  const moveAnnotation2D = useViewerStore((s) => s.moveAnnotation2D);
+  // Bulk
+  const clearAllAnnotations2D = useViewerStore((s) => s.clearAllAnnotations2D);
+
   const sectionPlane = useViewerStore((s) => s.sectionPlane);
   const activeTool = useViewerStore((s) => s.activeTool);
   const models = useViewerStore((s) => s.models);
@@ -228,7 +263,7 @@ export function Section2DPanel({
     isPinned, cachedSheetTransformRef,
   });
 
-  const { handleMouseDown, handleMouseMove, handleMouseUp, handleMouseLeave, handleMouseEnter } = useMeasure2D({
+  const measureHandlers = useMeasure2D({
     drawing, viewTransform, setViewTransform, sectionAxis: sectionPlane.axis, containerRef,
     measure2DMode, measure2DStart, measure2DCurrent,
     measure2DShiftLocked, measure2DLockedAxis,
@@ -236,10 +271,67 @@ export function Section2DPanel({
     setMeasure2DSnapPoint, cancelMeasure2D, completeMeasure2D,
   });
 
+  const annotationHandlers = useAnnotation2D({
+    drawing, viewTransform, sectionAxis: sectionPlane.axis, containerRef,
+    activeTool: annotation2DActiveTool, setActiveTool: setAnnotation2DActiveTool,
+    polygonArea2DPoints, addPolygonArea2DPoint, completePolygonArea2D, cancelPolygonArea2D,
+    textAnnotations2D, addTextAnnotation2D, setTextAnnotation2DEditing,
+    cloudAnnotation2DPoints, cloudAnnotations2D, addCloudAnnotation2DPoint, completeCloudAnnotation2D, cancelCloudAnnotation2D,
+    measure2DResults, polygonArea2DResults,
+    selectedAnnotation2D, setSelectedAnnotation2D, deleteSelectedAnnotation2D, moveAnnotation2D,
+    setAnnotation2DCursorPos, setMeasure2DSnapPoint,
+  });
+
+  // Unified mouse handlers that dispatch to the right tool
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (annotation2DActiveTool === 'measure') {
+      measureHandlers.handleMouseDown(e);
+    } else if (annotation2DActiveTool === 'none') {
+      // Try annotation selection/drag first; if it consumed the click, don't pan
+      const consumed = annotationHandlers.handleMouseDown(e);
+      if (!consumed) {
+        measureHandlers.handleMouseDown(e);
+      }
+    } else {
+      annotationHandlers.handleMouseDown(e);
+    }
+  }, [annotation2DActiveTool, measureHandlers, annotationHandlers]);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    // If dragging an annotation, let the annotation handler handle it
+    if (annotationHandlers.isDraggingRef.current) {
+      annotationHandlers.handleMouseMove(e);
+      return;
+    }
+    if (annotation2DActiveTool === 'measure' || annotation2DActiveTool === 'none') {
+      measureHandlers.handleMouseMove(e);
+    } else {
+      annotationHandlers.handleMouseMove(e);
+    }
+  }, [annotation2DActiveTool, measureHandlers, annotationHandlers]);
+
+  const handleMouseUp = useCallback((e: React.MouseEvent) => {
+    annotationHandlers.handleMouseUp(e);
+    measureHandlers.handleMouseUp();
+  }, [measureHandlers, annotationHandlers]);
+
+  const handleMouseLeave = useCallback(() => {
+    measureHandlers.handleMouseLeave();
+  }, [measureHandlers]);
+
+  const handleMouseEnter = useCallback((e: React.MouseEvent) => {
+    measureHandlers.handleMouseEnter(e);
+  }, [measureHandlers]);
+
+  const handleDoubleClick = useCallback((e: React.MouseEvent) => {
+    annotationHandlers.handleDoubleClick(e);
+  }, [annotationHandlers]);
+
   const { formatDistance, handleExportSVG, handlePrint } = useDrawingExport({
     drawing, displayOptions, sectionPlane, activePresetId,
     entityColorMap, overridesEnabled, overrideEngine,
-    measure2DResults, sheetEnabled, activeSheet,
+    measure2DResults, polygonArea2DResults, textAnnotations2D, cloudAnnotations2D,
+    sheetEnabled, activeSheet,
   });
 
   // ═══════════════════════════════════════════════════════════════════════════
@@ -271,6 +363,42 @@ export function Section2DPanel({
     setIsPinned((prev) => !prev);
   }, []);
 
+  // Text editor handlers
+  const handleTextConfirm = useCallback((id: string, text: string) => {
+    updateTextAnnotation2D(id, { text });
+    setTextAnnotation2DEditing(null);
+  }, [updateTextAnnotation2D, setTextAnnotation2DEditing]);
+
+  const handleTextCancel = useCallback((id: string) => {
+    // If text is empty (just created), remove it
+    const annotation = textAnnotations2D.find((a) => a.id === id);
+    if (annotation && !annotation.text.trim()) {
+      removeTextAnnotation2D(id);
+    }
+    setTextAnnotation2DEditing(null);
+  }, [textAnnotations2D, removeTextAnnotation2D, setTextAnnotation2DEditing]);
+
+  // Check if any annotations exist
+  const hasAnnotations = measure2DResults.length > 0 ||
+    polygonArea2DResults.length > 0 ||
+    textAnnotations2D.length > 0 ||
+    cloudAnnotations2D.length > 0;
+
+  // Cursor style based on active tool
+  const cursorClass = useMemo(() => {
+    if (selectedAnnotation2D && annotation2DActiveTool === 'none') return 'cursor-move';
+    switch (annotation2DActiveTool) {
+      case 'measure':
+      case 'polygon-area':
+      case 'cloud':
+        return 'cursor-crosshair';
+      case 'text':
+        return 'cursor-text';
+      default:
+        return 'cursor-grab active:cursor-grabbing';
+    }
+  }, [annotation2DActiveTool, selectedAnnotation2D]);
+
   // ═══════════════════════════════════════════════════════════════════════════
   // RESIZE HANDLING
   // ═══════════════════════════════════════════════════════════════════════════
@@ -400,25 +528,55 @@ export function Section2DPanel({
                 {displayOptions.useSymbolicRepresentations ? <Shapes className="h-4 w-4" /> : <Box className="h-4 w-4" />}
               </Button>
 
-              {/* 2D Measure Tool */}
-              <Button
-                variant={measure2DMode ? 'default' : 'ghost'}
-                size="icon-sm"
-                onClick={toggleMeasure2DMode}
-                title={measure2DMode ? 'Exit measure mode' : 'Measure distance'}
-              >
-                <Ruler className="h-4 w-4" />
-              </Button>
-              {measure2DResults.length > 0 && (
-                <Button
-                  variant="ghost"
-                  size="icon-sm"
-                  onClick={clearMeasure2DResults}
-                  title="Clear measurements"
-                >
-                  <Trash2 className="h-4 w-4" />
-                </Button>
-              )}
+              {/* Annotation Tools Dropdown */}
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant={annotation2DActiveTool !== 'none' ? 'default' : 'ghost'}
+                    size="icon-sm"
+                    title="Annotation tools"
+                  >
+                    <PenTool className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuItem onClick={() => setAnnotation2DActiveTool('none')}>
+                    <MousePointer2 className="h-4 w-4 mr-2" />
+                    Select / Pan
+                    {annotation2DActiveTool === 'none' && <span className="ml-auto text-xs text-primary">Active</span>}
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem onClick={() => setAnnotation2DActiveTool(annotation2DActiveTool === 'measure' ? 'none' : 'measure')}>
+                    <Ruler className="h-4 w-4 mr-2" />
+                    Distance Measure
+                    {annotation2DActiveTool === 'measure' && <span className="ml-auto text-xs text-primary">Active</span>}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setAnnotation2DActiveTool(annotation2DActiveTool === 'polygon-area' ? 'none' : 'polygon-area')}>
+                    <Hexagon className="h-4 w-4 mr-2" />
+                    Area Measure
+                    {annotation2DActiveTool === 'polygon-area' && <span className="ml-auto text-xs text-primary">Active</span>}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setAnnotation2DActiveTool(annotation2DActiveTool === 'text' ? 'none' : 'text')}>
+                    <Type className="h-4 w-4 mr-2" />
+                    Text Box
+                    {annotation2DActiveTool === 'text' && <span className="ml-auto text-xs text-primary">Active</span>}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setAnnotation2DActiveTool(annotation2DActiveTool === 'cloud' ? 'none' : 'cloud')}>
+                    <Cloud className="h-4 w-4 mr-2" />
+                    Revision Cloud
+                    {annotation2DActiveTool === 'cloud' && <span className="ml-auto text-xs text-primary">Active</span>}
+                  </DropdownMenuItem>
+                  {hasAnnotations && (
+                    <>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem onClick={clearAllAnnotations2D}>
+                        <Trash2 className="h-4 w-4 mr-2" />
+                        Clear All Annotations
+                      </DropdownMenuItem>
+                    </>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
 
               {/* Graphic Override Settings */}
               <Button
@@ -537,14 +695,30 @@ export function Section2DPanel({
                     {displayOptions.useSymbolicRepresentations ? <Shapes className="h-4 w-4 mr-2" /> : <Box className="h-4 w-4 mr-2" />}
                     {displayOptions.useSymbolicRepresentations ? 'Symbolic (Plan)' : 'Section Cut (Body)'}
                   </DropdownMenuItem>
-                  <DropdownMenuItem onClick={toggleMeasure2DMode}>
+                  <DropdownMenuItem onClick={() => setAnnotation2DActiveTool('none')}>
+                    <MousePointer2 className="h-4 w-4 mr-2" />
+                    Select / Pan {annotation2DActiveTool === 'none' ? '(On)' : ''}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setAnnotation2DActiveTool(annotation2DActiveTool === 'measure' ? 'none' : 'measure')}>
                     <Ruler className="h-4 w-4 mr-2" />
-                    Measure {measure2DMode ? 'On' : 'Off'}
+                    Distance Measure {annotation2DActiveTool === 'measure' ? '(On)' : ''}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setAnnotation2DActiveTool(annotation2DActiveTool === 'polygon-area' ? 'none' : 'polygon-area')}>
+                    <Hexagon className="h-4 w-4 mr-2" />
+                    Area Measure {annotation2DActiveTool === 'polygon-area' ? '(On)' : ''}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setAnnotation2DActiveTool(annotation2DActiveTool === 'text' ? 'none' : 'text')}>
+                    <Type className="h-4 w-4 mr-2" />
+                    Text Box {annotation2DActiveTool === 'text' ? '(On)' : ''}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setAnnotation2DActiveTool(annotation2DActiveTool === 'cloud' ? 'none' : 'cloud')}>
+                    <Cloud className="h-4 w-4 mr-2" />
+                    Revision Cloud {annotation2DActiveTool === 'cloud' ? '(On)' : ''}
                   </DropdownMenuItem>
-                  {measure2DResults.length > 0 && (
-                    <DropdownMenuItem onClick={clearMeasure2DResults}>
+                  {hasAnnotations && (
+                    <DropdownMenuItem onClick={clearAllAnnotations2D}>
                       <Trash2 className="h-4 w-4 mr-2" />
-                      Clear Measurements
+                      Clear All Annotations
                     </DropdownMenuItem>
                   )}
                   <DropdownMenuSeparator />
@@ -602,13 +776,13 @@ export function Section2DPanel({
       {/* Drawing Canvas */}
       <div
         ref={containerRef}
-        className={`relative flex-1 overflow-hidden bg-white dark:bg-zinc-950 rounded-b-lg ${measure2DMode ? 'cursor-crosshair' : 'cursor-grab active:cursor-grabbing'
-          }`}
+        className={`relative flex-1 overflow-hidden bg-white dark:bg-zinc-950 rounded-b-lg ${cursorClass}`}
         onMouseDown={handleMouseDown}
         onMouseMove={handleMouseMove}
         onMouseUp={handleMouseUp}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
+        onDoubleClick={handleDoubleClick}
       >
         {status === 'generating' && (
           <div className="absolute inset-0 flex flex-col items-center justify-center bg-background/80">
@@ -658,6 +832,15 @@ export function Section2DPanel({
               sectionAxis={sectionPlane.axis}
               isPinned={isPinned}
               cachedSheetTransformRef={cachedSheetTransformRef}
+              annotation2DActiveTool={annotation2DActiveTool}
+              annotation2DCursorPos={annotation2DCursorPos}
+              polygonAreaPoints={polygonArea2DPoints}
+              polygonAreaResults={polygonArea2DResults}
+              textAnnotations={textAnnotations2D}
+              textAnnotationEditing={textAnnotation2DEditing}
+              cloudAnnotationPoints={cloudAnnotation2DPoints}
+              cloudAnnotations={cloudAnnotations2D}
+              selectedAnnotation={selectedAnnotation2D}
             />
             {/* Subtle updating indicator - shows while regenerating without hiding the drawing */}
             {isRegenerating && (
@@ -669,6 +852,25 @@ export function Section2DPanel({
           </>
         )}
 
+        {/* Text Annotation Editor Overlay */}
+        {textAnnotation2DEditing && (() => {
+          const editingAnnotation = textAnnotations2D.find((a) => a.id === textAnnotation2DEditing);
+          if (!editingAnnotation) return null;
+          const scaleX = sectionPlane.axis === 'side' ? -viewTransform.scale : viewTransform.scale;
+          const scaleY = sectionPlane.axis === 'down' ? viewTransform.scale : -viewTransform.scale;
+          const screenX = editingAnnotation.position.x * scaleX + viewTransform.x;
+          const screenY = editingAnnotation.position.y * scaleY + viewTransform.y;
+          return (
+            <TextAnnotationEditor
+              annotation={editingAnnotation}
+              screenX={screenX}
+              screenY={screenY}
+              onConfirm={handleTextConfirm}
+              onCancel={handleTextCancel}
+            />
+          );
+        })()}
+
         {/* Measure mode tip - bottom right */}
         {measure2DMode && measure2DStart && (
           <div className="absolute bottom-2 right-2 pointer-events-none z-10">
@@ -679,6 +881,44 @@ export function Section2DPanel({
           </div>
         )}
 
+        {/* Polygon area tip */}
+        {annotation2DActiveTool === 'polygon-area' && (
+          <div className="absolute bottom-2 right-2 pointer-events-none z-10">
+            <div className="text-[10px] text-black bg-white/80 px-1.5 py-0.5 rounded">
+              {polygonArea2DPoints.length === 0 ? 'Click to place first vertex · Hold Shift to constrain' :
+               polygonArea2DPoints.length < 3 ? `${polygonArea2DPoints.length} vertices — need at least 3 · Shift = constrain` :
+               'Double-click or click first vertex to close · Shift = constrain'}
+            </div>
+          </div>
+        )}
+
+        {/* Cloud tool tip */}
+        {annotation2DActiveTool === 'cloud' && (
+          <div className="absolute bottom-2 right-2 pointer-events-none z-10">
+            <div className="text-[10px] text-black bg-white/80 px-1.5 py-0.5 rounded">
+              {cloudAnnotation2DPoints.length === 0 ? 'Click to place first corner' : 'Click to place second corner · Shift = square'}
+            </div>
+          </div>
+        )}
+
+        {/* Text tool tip */}
+        {annotation2DActiveTool === 'text' && !textAnnotation2DEditing && (
+          <div className="absolute bottom-2 right-2 pointer-events-none z-10">
+            <div className="text-[10px] text-black bg-white/80 px-1.5 py-0.5 rounded">
+              Click to place text box
+            </div>
+          </div>
+        )}
+
+        {/* Selection tip */}
+        {selectedAnnotation2D && annotation2DActiveTool === 'none' && (
+          <div className="absolute bottom-2 right-2 pointer-events-none z-10">
+            <div className="text-[10px] text-black bg-white/80 px-1.5 py-0.5 rounded">
+              {selectedAnnotation2D.type === 'text' ? 'Del = delete · Drag to move · Double-click to edit' : 'Del = delete · Drag to move'} · Esc = deselect
+            </div>
+          </div>
+        )}
+
         {status === 'ready' && drawing && drawing.cutPolygons.length === 0 && (!drawing.lines || drawing.lines.length === 0) && (
           <div className="absolute inset-0 flex items-center justify-center">
             <div className="text-center text-muted-foreground">

package/src/components/viewer/TextAnnotationEditor.tsx

@@ -0,0 +1,112 @@
+/* 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/. */
+
+/**
+ * Inline text editor overlay for text annotations on the 2D drawing.
+ * Positioned absolutely over the canvas at the annotation's screen coordinates.
+ */
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import type { TextAnnotation2D } from '@/store/slices/drawing2DSlice';
+
+interface TextAnnotationEditorProps {
+  /** The text annotation being edited */
+  annotation: TextAnnotation2D;
+  /** Screen position (top-left of the editor) */
+  screenX: number;
+  screenY: number;
+  /** Called with the new text when user confirms (Enter) */
+  onConfirm: (id: string, text: string) => void;
+  /** Called when user cancels (Escape) or submits empty text */
+  onCancel: (id: string) => void;
+}
+
+export function TextAnnotationEditor({
+  annotation,
+  screenX,
+  screenY,
+  onConfirm,
+  onCancel,
+}: TextAnnotationEditorProps): React.ReactElement {
+  const [text, setText] = useState(annotation.text);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  // Guard against blur firing during the initial click that created this editor.
+  // Without this, the mouseup from the placement click can steal focus from the
+  // textarea before the user has a chance to type, causing an immediate cancel.
+  const readyRef = useRef(false);
+
+  // Auto-focus on mount, but defer slightly so the originating mouseup
+  // from the placement click doesn't immediately steal focus / trigger blur.
+  useEffect(() => {
+    const timer = requestAnimationFrame(() => {
+      textareaRef.current?.focus();
+      // Mark ready after focus is established so blur handler is enabled
+      readyRef.current = true;
+    });
+    return () => cancelAnimationFrame(timer);
+  }, []);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      const trimmed = text.trim();
+      if (trimmed) {
+        onConfirm(annotation.id, trimmed);
+      } else {
+        onCancel(annotation.id);
+      }
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      onCancel(annotation.id);
+    }
+    // Stop propagation so the canvas doesn't receive these events
+    e.stopPropagation();
+  }, [text, annotation.id, onConfirm, onCancel]);
+
+  const handleBlur = useCallback(() => {
+    // Ignore blur events that fire before the editor is fully ready
+    // (e.g. from the originating click's mouseup stealing focus)
+    if (!readyRef.current) return;
+
+    const trimmed = text.trim();
+    if (trimmed) {
+      onConfirm(annotation.id, trimmed);
+    } else {
+      onCancel(annotation.id);
+    }
+  }, [text, annotation.id, onConfirm, onCancel]);
+
+  return (
+    <div
+      className="absolute z-20 pointer-events-auto"
+      style={{
+        left: screenX,
+        top: screenY,
+      }}
+      // Prevent mousedown from propagating to canvas (which would place another annotation)
+      onMouseDown={(e) => e.stopPropagation()}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <textarea
+        ref={textareaRef}
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        placeholder="Type annotation text..."
+        className="min-w-[120px] max-w-[300px] min-h-[32px] px-2 py-1 text-sm border-2 border-blue-500 rounded resize shadow-lg outline-none"
+        rows={2}
+        style={{
+          fontSize: annotation.fontSize,
+          backgroundColor: '#ffffff',
+          color: '#000000',
+          caretColor: '#000000',
+        }}
+      />
+      <div className="text-[10px] text-muted-foreground mt-0.5 bg-white/80 px-1 rounded">
+        Enter to confirm · Shift+Enter for newline · Esc to cancel
+      </div>
+    </div>
+  );
+}

package/src/components/viewer/ViewerLayout.tsx

@@ -4,6 +4,7 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Panel, Group as PanelGroup, Separator as PanelResizeHandle } from 'react-resizable-panels';
+import type { PanelImperativeHandle } from 'react-resizable-panels';
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { MainToolbar } from './MainToolbar';
 import { HierarchyPanel } from './HierarchyPanel';
@@ -19,6 +20,8 @@ import { BCFPanel } from './BCFPanel';
 import { IDSPanel } from './IDSPanel';
 import { LensPanel } from './LensPanel';
 import { ListPanel } from './lists/ListPanel';
+import { ScriptPanel } from './ScriptPanel';
+import { CommandPalette } from './CommandPalette';
 
 const BOTTOM_PANEL_MIN_HEIGHT = 120;
 const BOTTOM_PANEL_DEFAULT_HEIGHT = 300;
@@ -29,6 +32,21 @@ export function ViewerLayout() {
   useKeyboardShortcuts();
   const shortcutsDialog = useKeyboardShortcutsDialog();
 
+  // Command palette state
+  const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
+
+  // Ctrl+K / Cmd+K to open command palette
+  useEffect(() => {
+    const handler = (e: globalThis.KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+        e.preventDefault();
+        setCommandPaletteOpen((prev) => !prev);
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, []);
+
   // Initialize theme on mount
   const theme = useViewerStore((s) => s.theme);
   const isMobile = useViewerStore((s) => s.isMobile);
@@ -45,6 +63,27 @@ export function ViewerLayout() {
   const setListPanelVisible = useViewerStore((s) => s.setListPanelVisible);
   const lensPanelVisible = useViewerStore((s) => s.lensPanelVisible);
   const setLensPanelVisible = useViewerStore((s) => s.setLensPanelVisible);
+  const scriptPanelVisible = useViewerStore((s) => s.scriptPanelVisible);
+  const setScriptPanelVisible = useViewerStore((s) => s.setScriptPanelVisible);
+
+  // Panel refs for programmatic collapse/expand (command palette, keyboard shortcuts)
+  const leftPanelRef = useRef<PanelImperativeHandle>(null);
+  const rightPanelRef = useRef<PanelImperativeHandle>(null);
+
+  // Sync store state → Panel collapse/expand on desktop
+  useEffect(() => {
+    const panel = leftPanelRef.current;
+    if (!panel) return;
+    if (leftPanelCollapsed && !panel.isCollapsed()) panel.collapse();
+    else if (!leftPanelCollapsed && panel.isCollapsed()) panel.expand();
+  }, [leftPanelCollapsed]);
+
+  useEffect(() => {
+    const panel = rightPanelRef.current;
+    if (!panel) return;
+    if (rightPanelCollapsed && !panel.isCollapsed()) panel.collapse();
+    else if (!rightPanelCollapsed && panel.isCollapsed()) panel.expand();
+  }, [rightPanelCollapsed]);
 
   // Bottom panel resize state (pixel height, persisted in ref to avoid re-renders during drag)
   const [bottomHeight, setBottomHeight] = useState(BOTTOM_PANEL_DEFAULT_HEIGHT);
@@ -113,12 +152,7 @@ export function ViewerLayout() {
     return () => window.removeEventListener('resize', checkMobile);
   }, [setIsMobile, setLeftPanelCollapsed, setRightPanelCollapsed]);
 
-  // Initialize theme on mount and sync with store
-  useEffect(() => {
-    const currentTheme = useViewerStore.getState().theme;
-    document.documentElement.classList.toggle('dark', currentTheme === 'dark');
-  }, []);
-
+  // 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');
   }, [theme]);
@@ -133,6 +167,7 @@ export function ViewerLayout() {
         {/* Global Overlays */}
         <EntityContextMenu />
         <HoverTooltip />
+        <CommandPalette open={commandPaletteOpen} onOpenChange={setCommandPaletteOpen} />
 
         {/* Main Toolbar */}
         <MainToolbar onShowShortcuts={shortcutsDialog.toggle} />
@@ -150,6 +185,11 @@ export function ViewerLayout() {
                   minSize={10}
                   collapsible
                   collapsedSize={0}
+                  panelRef={leftPanelRef}
+                  onResize={() => {
+                    const collapsed = leftPanelRef.current?.isCollapsed() ?? false;
+                    if (collapsed !== leftPanelCollapsed) setLeftPanelCollapsed(collapsed);
+                  }}
                 >
                   <div className="h-full w-full overflow-hidden">
                     <HierarchyPanel />
@@ -174,6 +214,11 @@ export function ViewerLayout() {
                   minSize={15}
                   collapsible
                   collapsedSize={0}
+                  panelRef={rightPanelRef}
+                  onResize={() => {
+                    const collapsed = rightPanelRef.current?.isCollapsed() ?? false;
+                    if (collapsed !== rightPanelCollapsed) setRightPanelCollapsed(collapsed);
+                  }}
                 >
                   <div className="h-full w-full overflow-hidden">
                     {lensPanelVisible ? (
@@ -190,8 +235,8 @@ export function ViewerLayout() {
               </PanelGroup>
             </div>
 
-            {/* Bottom Panel - Lists (custom resizable, outside PanelGroup) */}
-            {listPanelVisible && (
+            {/* Bottom Panel - Lists or Script (custom resizable, outside PanelGroup) */}
+            {(listPanelVisible || scriptPanelVisible) && (
               <div style={{ height: bottomHeight, flexShrink: 0 }} className="relative">
                 {/* Drag handle */}
                 <div
@@ -199,7 +244,11 @@ export function ViewerLayout() {
                   onMouseDown={handleResizeStart}
                 />
                 <div className="h-full w-full overflow-hidden border-t pt-1.5">
-                  <ListPanel onClose={() => setListPanelVisible(false)} />
+                  {scriptPanelVisible ? (
+                    <ScriptPanel onClose={() => setScriptPanelVisible(false)} />
+                  ) : (
+                    <ListPanel onClose={() => setListPanelVisible(false)} />
+                  )}
                 </div>
               </div>
             )}
@@ -240,12 +289,13 @@ 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">
-                    {listPanelVisible ? 'Lists' : lensPanelVisible ? 'Lens' : idsPanelVisible ? 'IDS Validation' : bcfPanelVisible ? 'BCF Issues' : 'Properties'}
+                    {scriptPanelVisible ? 'Script' : listPanelVisible ? 'Lists' : lensPanelVisible ? 'Lens' : idsPanelVisible ? 'IDS Validation' : bcfPanelVisible ? 'BCF Issues' : 'Properties'}
                   </span>
                   <button
                     className="p-1 hover:bg-muted rounded"
                     onClick={() => {
                       setRightPanelCollapsed(true);
+                      if (scriptPanelVisible) setScriptPanelVisible(false);
                       if (listPanelVisible) setListPanelVisible(false);
                       if (bcfPanelVisible) setBcfPanelVisible(false);
                       if (lensPanelVisible) setLensPanelVisible(false);
@@ -259,7 +309,9 @@ export function ViewerLayout() {
                   </button>
                 </div>
                 <div className="h-[calc(50vh-48px)] overflow-auto">
-                  {listPanelVisible ? (
+                  {scriptPanelVisible ? (
+                    <ScriptPanel onClose={() => setScriptPanelVisible(false)} />
+                  ) : listPanelVisible ? (
                     <ListPanel onClose={() => setListPanelVisible(false)} />
                   ) : lensPanelVisible ? (
                     <LensPanel onClose={() => setLensPanelVisible(false)} />