@ifc-lite/viewer 1.6.0 → 1.7.0

package/src/components/viewer/Section2DPanel.tsx

@@ -23,69 +23,16 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { useViewerStore } from '@/store';
 import { useIfc } from '@/hooks/useIfc';
-import {
-  Drawing2DGenerator,
-  createSectionConfig,
-  GraphicOverrideEngine,
-  renderFrame,
-  renderTitleBlock,
-  calculateDrawingTransform,
-  type Drawing2D,
-  type DrawingLine,
-  type SectionConfig,
-  type ElementData,
-  type TitleBlockExtras,
-} from '@ifc-lite/drawing-2d';
-import { GeometryProcessor, type GeometryResult } from '@ifc-lite/geometry';
+import { GraphicOverrideEngine } from '@ifc-lite/drawing-2d';
+import { type GeometryResult } from '@ifc-lite/geometry';
 import { DrawingSettingsPanel } from './DrawingSettingsPanel';
 import { SheetSetupPanel } from './SheetSetupPanel';
 import { TitleBlockEditor } from './TitleBlockEditor';
-
-// Axis conversion from semantic (down/front/side) to geometric (x/y/z)
-const AXIS_MAP: Record<'down' | 'front' | 'side', 'x' | 'y' | 'z'> = {
-  down: 'y',
-  front: 'z',
-  side: 'x',
-};
-
-// Fill colors for IFC types (architectural convention)
-const IFC_TYPE_FILL_COLORS: Record<string, string> = {
-  // Structural elements - solid gray
-  IfcWall: '#b0b0b0',
-  IfcWallStandardCase: '#b0b0b0',
-  IfcColumn: '#909090',
-  IfcBeam: '#909090',
-  IfcSlab: '#c8c8c8',
-  IfcRoof: '#d0d0d0',
-  IfcFooting: '#808080',
-  IfcPile: '#707070',
-
-  // Windows/Doors - lighter
-  IfcWindow: '#e8f4fc',
-  IfcDoor: '#f5e6d3',
-
-  // Stairs/Railings
-  IfcStair: '#d8d8d8',
-  IfcStairFlight: '#d8d8d8',
-  IfcRailing: '#c0c0c0',
-
-  // MEP - distinct colors
-  IfcPipeSegment: '#a0d0ff',
-  IfcDuctSegment: '#c0ffc0',
-
-  // Furniture
-  IfcFurnishingElement: '#ffe0c0',
-
-  // Spaces (usually not shown in section)
-  IfcSpace: '#f0f0f0',
-
-  // Default
-  default: '#d0d0d0',
-};
-
-function getFillColorForType(ifcType: string): string {
-  return IFC_TYPE_FILL_COLORS[ifcType] || IFC_TYPE_FILL_COLORS.default;
-}
+import { Drawing2DCanvas } from './Drawing2DCanvas';
+import { useDrawingGeneration } from '@/hooks/useDrawingGeneration';
+import { useMeasure2D } from '@/hooks/useMeasure2D';
+import { useViewControls } from '@/hooks/useViewControls';
+import { useDrawingExport } from '@/hooks/useDrawingExport';
 
 interface Section2DPanelProps {
   mergedGeometry?: GeometryResult | null;
@@ -93,11 +40,14 @@ interface Section2DPanelProps {
   modelIdToIndex?: Map<string, number>;
 }
 
-export function Section2DPanel({ 
-  mergedGeometry, 
-  computedIsolatedIds, 
-  modelIdToIndex 
+export function Section2DPanel({
+  mergedGeometry,
+  computedIsolatedIds,
+  modelIdToIndex
 }: Section2DPanelProps = {}): React.ReactElement | null {
+  // ═══════════════════════════════════════════════════════════════════════════
+  // STORE SELECTORS
+  // ═══════════════════════════════════════════════════════════════════════════
   const panelVisible = useViewerStore((s) => s.drawing2DPanelVisible);
   const setDrawingPanelVisible = useViewerStore((s) => s.setDrawing2DPanelVisible);
   const drawing = useViewerStore((s) => s.drawing2D);
@@ -152,11 +102,13 @@ export function Section2DPanel({
   const activeTool = useViewerStore((s) => s.activeTool);
   const models = useViewerStore((s) => s.models);
   const { geometryResult: legacyGeometryResult, ifcDataStore } = useIfc();
-  
+
   // Use merged geometry from props if available (multi-model), otherwise fall back to legacy single-model
   const geometryResult = mergedGeometry ?? legacyGeometryResult;
 
-  // Auto-show panel when section tool is active
+  // ═══════════════════════════════════════════════════════════════════════════
+  // AUTO-SHOW PANEL EFFECT
+  // ═══════════════════════════════════════════════════════════════════════════
   const prevActiveToolRef = useRef(activeTool);
   useEffect(() => {
     // Section tool was just activated
@@ -166,22 +118,17 @@ export function Section2DPanel({
     prevActiveToolRef.current = activeTool;
   }, [activeTool, geometryResult, setDrawingPanelVisible]);
 
-  // Local state for pan/zoom and expanded mode
-  const [viewTransform, setViewTransform] = useState({ x: 0, y: 0, scale: 1 });
+  // ═══════════════════════════════════════════════════════════════════════════
+  // LOCAL STATE
+  // ═══════════════════════════════════════════════════════════════════════════
   const [isExpanded, setIsExpanded] = useState(false);
   const [panelSize, setPanelSize] = useState({ width: 400, height: 300 });
   const [isNarrow, setIsNarrow] = useState(false);  // Track if panel is too narrow for all buttons
   const [isPinned, setIsPinned] = useState(true);  // Default ON: keep position on regenerate
-  const [needsFit, setNeedsFit] = useState(true);  // Force fit on first open and axis change
   const containerRef = useRef<HTMLDivElement>(null);
   const panelRef = useRef<HTMLDivElement>(null);
-  const isPanning = useRef(false);
-  const lastPanPoint = useRef({ x: 0, y: 0 });
   const isResizing = useRef<'right' | 'top' | 'corner' | null>(null);
   const resizeStartPos = useRef({ x: 0, y: 0, width: 0, height: 0 });
-  const prevAxisRef = useRef(sectionPlane.axis);  // Track axis changes
-  const isMouseButtonDown = useRef(false);  // Track if mouse button is currently pressed
-  const isMouseInsidePanel = useRef(true);  // Track if mouse is inside the panel
   // Track resize event handlers for cleanup
   const resizeHandlersRef = useRef<{ move: ((e: MouseEvent) => void) | null; up: (() => void) | null }>({ move: null, up: null });
   // Cache sheet drawing transform when pinned (to keep model fixed in place)
@@ -192,6 +139,10 @@ export function Section2DPanel({
     setIsNarrow(panelSize.width < 480);
   }, [panelSize.width]);
 
+  // ═══════════════════════════════════════════════════════════════════════════
+  // MEMOIZED VALUES
+  // ═══════════════════════════════════════════════════════════════════════════
+
   // Create graphic override engine with active rules
   const overrideEngine = useMemo(() => {
     const rules = getActiveOverrideRules();
@@ -211,17 +162,21 @@ export function Section2DPanel({
     return map;
   }, [geometryResult]);
 
+  // ═══════════════════════════════════════════════════════════════════════════
+  // VISIBILITY STATE
+  // ═══════════════════════════════════════════════════════════════════════════
+
   // Get visibility state from store for filtering
   const hiddenEntities = useViewerStore((s) => s.hiddenEntities);
   const isolatedEntities = useViewerStore((s) => s.isolatedEntities);
   const hiddenEntitiesByModel = useViewerStore((s) => s.hiddenEntitiesByModel);
   const isolatedEntitiesByModel = useViewerStore((s) => s.isolatedEntitiesByModel);
-  
+
   // Build combined Set of global IDs from multi-model visibility state
   // This converts per-model local expressIds to global IDs using idOffset
   const combinedHiddenIds = useMemo(() => {
     const globalHiddenIds = new Set<number>(hiddenEntities); // Start with legacy hidden IDs
-    
+
     // Add hidden entities from each model (convert local expressId to global ID)
     for (const [modelId, localHiddenIds] of hiddenEntitiesByModel) {
       const model = models.get(modelId);
@@ -231,17 +186,17 @@ export function Section2DPanel({
         }
       }
     }
-    
+
     return globalHiddenIds;
   }, [hiddenEntities, hiddenEntitiesByModel, models]);
-  
+
   // Build combined Set of global IDs for isolation
   const combinedIsolatedIds = useMemo(() => {
     // If legacy isolation is active, use that (already contains global IDs)
     if (isolatedEntities !== null) {
       return isolatedEntities;
     }
-    
+
     // Build from multi-model isolation
     const globalIsolatedIds = new Set<number>();
     for (const [modelId, localIsolatedIds] of isolatedEntitiesByModel) {
@@ -252,1516 +207,44 @@ export function Section2DPanel({
         }
       }
     }
-    
+
     return globalIsolatedIds.size > 0 ? globalIsolatedIds : null;
   }, [isolatedEntities, isolatedEntitiesByModel, models]);
 
-  // Track if this is a regeneration (vs initial generation)
-  const isRegeneratingRef = useRef(false);
-
-  // Cache for symbolic representations - these don't change with section position
-  // Only re-parse when model or display options change
-  const symbolicCacheRef = useRef<{
-    lines: DrawingLine[];
-    entities: Set<number>;
-    sourceId: string | null;
-    useSymbolic: boolean;
-  } | null>(null);
-
-  // Generate drawing when panel opens
-  const generateDrawing = useCallback(async (isRegenerate = false) => {
-    if (!geometryResult?.meshes || geometryResult.meshes.length === 0) {
-      // Clear the drawing when no geometry is available (e.g., all models hidden)
-      setDrawing(null);
-      setDrawingStatus('idle');
-      setDrawingError('No visible geometry');
-      return;
-    }
-
-    // Only show full loading overlay for initial generation, not regeneration
-    if (!isRegenerate) {
-      setDrawingStatus('generating');
-      setDrawingProgress(0, 'Initializing...');
-    }
-    isRegeneratingRef.current = isRegenerate;
-
-    // Parse symbolic representations if enabled (for hybrid mode)
-    // OPTIMIZATION: Cache symbolic data - it doesn't change with section position
-    let symbolicLines: DrawingLine[] = [];
-    let entitiesWithSymbols = new Set<number>();
-
-    // For multi-model: create cache key from model count and visible model IDs
-    // For single-model: use source byteLength as before
-    const modelCacheKey = models.size > 0
-      ? `${models.size}-${[...models.values()].filter(m => m.visible).map(m => m.id).sort().join(',')}`
-      : (ifcDataStore?.source ? String(ifcDataStore.source.byteLength) : null);
-    
-    const useSymbolic = displayOptions.useSymbolicRepresentations && (
-      models.size > 0 ? true : !!ifcDataStore?.source
-    );
-
-    // Check if we can use cached symbolic data
-    const cache = symbolicCacheRef.current;
-    const cacheValid = cache &&
-      cache.sourceId === modelCacheKey &&
-      cache.useSymbolic === useSymbolic;
-
-    if (useSymbolic) {
-      if (cacheValid) {
-        // Use cached data - FAST PATH
-        symbolicLines = cache.lines;
-        entitiesWithSymbols = cache.entities;
-      } else {
-        // Need to parse - only on first load or when model changes
-        try {
-          if (!isRegenerate) {
-            setDrawingProgress(5, 'Parsing symbolic representations...');
-          }
-
-          const processor = new GeometryProcessor();
-          try {
-            await processor.init();
-
-            const symbolicCollection = processor.parseSymbolicRepresentations(ifcDataStore!.source);
-            // For single-model (legacy) mode, model index is always 0
-            // Multi-model symbolic parsing would require iterating over each model separately
-            const symbolicModelIndex = 0;
-
-            if (symbolicCollection && !symbolicCollection.isEmpty) {
-              // Process polylines
-              for (let i = 0; i < symbolicCollection.polylineCount; i++) {
-                const poly = symbolicCollection.getPolyline(i);
-                if (!poly) continue;
-
-                entitiesWithSymbols.add(poly.expressId);
-                const points = poly.points;
-                const pointCount = poly.pointCount;
-
-                for (let j = 0; j < pointCount - 1; j++) {
-                  symbolicLines.push({
-                    line: {
-                      start: { x: points[j * 2], y: points[j * 2 + 1] },
-                      end: { x: points[(j + 1) * 2], y: points[(j + 1) * 2 + 1] }
-                    },
-                    category: 'silhouette',
-                    visibility: 'visible',
-                    entityId: poly.expressId,
-                    ifcType: poly.ifcType,
-                    modelIndex: symbolicModelIndex,
-                    depth: 0,
-                  });
-                }
-
-                if (poly.isClosed && pointCount > 2) {
-                  symbolicLines.push({
-                    line: {
-                      start: { x: points[(pointCount - 1) * 2], y: points[(pointCount - 1) * 2 + 1] },
-                      end: { x: points[0], y: points[1] }
-                    },
-                    category: 'silhouette',
-                    visibility: 'visible',
-                    entityId: poly.expressId,
-                    ifcType: poly.ifcType,
-                    modelIndex: symbolicModelIndex,
-                    depth: 0,
-                  });
-                }
-              }
-
-              // Process circles/arcs
-              for (let i = 0; i < symbolicCollection.circleCount; i++) {
-                const circle = symbolicCollection.getCircle(i);
-                if (!circle) continue;
-
-                entitiesWithSymbols.add(circle.expressId);
-                const numSegments = circle.isFullCircle ? 32 : 16;
-
-                for (let j = 0; j < numSegments; j++) {
-                  const t1 = j / numSegments;
-                  const t2 = (j + 1) / numSegments;
-                  const a1 = circle.startAngle + t1 * (circle.endAngle - circle.startAngle);
-                  const a2 = circle.startAngle + t2 * (circle.endAngle - circle.startAngle);
-
-                  symbolicLines.push({
-                    line: {
-                      start: {
-                        x: circle.centerX + circle.radius * Math.cos(a1),
-                        y: circle.centerY + circle.radius * Math.sin(a1),
-                      },
-                      end: {
-                        x: circle.centerX + circle.radius * Math.cos(a2),
-                        y: circle.centerY + circle.radius * Math.sin(a2),
-                      },
-                    },
-                    category: 'silhouette',
-                    visibility: 'visible',
-                    entityId: circle.expressId,
-                    ifcType: circle.ifcType,
-                    modelIndex: symbolicModelIndex,
-                    depth: 0,
-                  });
-                }
-              }
-            }
-          } finally {
-            processor.dispose();
-          }
-
-          // Cache the parsed data
-          symbolicCacheRef.current = {
-            lines: symbolicLines,
-            entities: entitiesWithSymbols,
-            sourceId: modelCacheKey,
-            useSymbolic,
-          };
-        } catch (error) {
-          console.warn('Symbolic parsing failed:', error);
-          symbolicLines = [];
-          entitiesWithSymbols = new Set<number>();
-        }
-      }
-    } else {
-      // Clear cache if symbolic is disabled
-      if (cache && cache.useSymbolic) {
-        symbolicCacheRef.current = null;
-      }
-    }
-
-    let generator: Drawing2DGenerator | null = null;
-    try {
-      generator = new Drawing2DGenerator();
-      await generator.initialize();
-
-      // Convert semantic axis to geometric
-      const axis = AXIS_MAP[sectionPlane.axis];
-
-      // Calculate section position from percentage using coordinateInfo bounds
-      const bounds = geometryResult.coordinateInfo.shiftedBounds;
-
-      const axisMin = bounds.min[axis];
-      const axisMax = bounds.max[axis];
-      const position = axisMin + (sectionPlane.position / 100) * (axisMax - axisMin);
-
-      // Calculate max depth as half the model extent
-      const maxDepth = (axisMax - axisMin) * 0.5;
-
-      // Adjust progress to account for symbolic parsing phase (0-20%)
-      const progressOffset = symbolicLines.length > 0 ? 20 : 0;
-      const progressScale = symbolicLines.length > 0 ? 0.8 : 1;
-      const progressCallback = (stage: string, prog: number) => {
-        setDrawingProgress(progressOffset + prog * 100 * progressScale, stage);
-      };
-
-      // Create section config
-      const config: SectionConfig = createSectionConfig(axis, position, {
-        projectionDepth: maxDepth,
-        includeHiddenLines: displayOptions.showHiddenLines,
-        scale: displayOptions.scale,
-      });
-
-      // Override the flipped setting
-      config.plane.flipped = sectionPlane.flipped;
-
-      // Filter meshes by visibility (respect 3D hiding/isolation)
-      let meshesToProcess = geometryResult.meshes;
-
-      // Filter out hidden entities (using combined multi-model set)
-      if (combinedHiddenIds.size > 0) {
-        meshesToProcess = meshesToProcess.filter(
-          mesh => !combinedHiddenIds.has(mesh.expressId)
-        );
-      }
-
-      // Filter by isolation (if active, using combined multi-model set)
-      if (combinedIsolatedIds !== null) {
-        meshesToProcess = meshesToProcess.filter(
-          mesh => combinedIsolatedIds.has(mesh.expressId)
-        );
-      }
-
-      // Also filter by computedIsolatedIds (storey selection)
-      if (computedIsolatedIds !== null && computedIsolatedIds !== undefined && computedIsolatedIds.size > 0) {
-        const isolatedSet = computedIsolatedIds;
-        meshesToProcess = meshesToProcess.filter(
-          mesh => isolatedSet.has(mesh.expressId)
-        );
-      }
-
-      // If all meshes were filtered out by visibility, clear the drawing
-      if (meshesToProcess.length === 0) {
-        setDrawing(null);
-        setDrawingStatus('idle');
-        setDrawingError(null);
-        return;
-      }
-
-      const result = await generator.generate(meshesToProcess, config, {
-        includeHiddenLines: false,  // Disable - causes internal mesh edges
-        includeProjection: false,   // Disable - causes triangulation lines
-        includeEdges: false,        // Disable - causes triangulation lines
-        mergeLines: true,
-        onProgress: progressCallback,
-      });
-
-      // If we have symbolic representations, create a hybrid drawing
-      if (symbolicLines.length > 0 && entitiesWithSymbols.size > 0) {
-        // Get entity IDs that actually appear in the section cut (these are being cut by the plane)
-        const cutEntityIds = new Set<number>();
-        for (const line of result.lines) {
-          if (line.entityId !== undefined) {
-            cutEntityIds.add(line.entityId);
-          }
-        }
-        // Also check cut polygons for entity IDs
-        for (const poly of result.cutPolygons ?? []) {
-          if ((poly as { entityId?: number }).entityId !== undefined) {
-            cutEntityIds.add((poly as { entityId?: number }).entityId!);
-          }
-        }
-
-        // Only include symbolic lines for entities that are ACTUALLY being cut
-        // This filters out symbols from other floors/levels not intersected by the section plane
-        const relevantSymbolicLines = symbolicLines.filter(line =>
-          line.entityId !== undefined && cutEntityIds.has(line.entityId)
-        );
-
-        // Get the set of entities that have both symbols AND are being cut
-        const entitiesWithRelevantSymbols = new Set<number>();
-        for (const line of relevantSymbolicLines) {
-          if (line.entityId !== undefined) {
-            entitiesWithRelevantSymbols.add(line.entityId);
-          }
-        }
-
-        // Align symbolic geometry with section cut geometry using bounding box matching
-        // Plan representations often have different local origins than Body representations
-        // So we compute per-entity transforms to align Plan bbox center with section cut bbox center
-
-        // Build per-entity bounding boxes for section cut
-        const sectionCutBounds = new Map<number, { minX: number; minY: number; maxX: number; maxY: number }>();
-        const updateBounds = (entityId: number, x: number, y: number) => {
-          const bounds = sectionCutBounds.get(entityId) ?? { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity };
-          bounds.minX = Math.min(bounds.minX, x);
-          bounds.minY = Math.min(bounds.minY, y);
-          bounds.maxX = Math.max(bounds.maxX, x);
-          bounds.maxY = Math.max(bounds.maxY, y);
-          sectionCutBounds.set(entityId, bounds);
-        };
-        for (const line of result.lines) {
-          if (line.entityId === undefined) continue;
-          updateBounds(line.entityId, line.line.start.x, line.line.start.y);
-          updateBounds(line.entityId, line.line.end.x, line.line.end.y);
-        }
-        // Include cut polygon vertices in bounds computation
-        for (const poly of result.cutPolygons ?? []) {
-          const entityId = (poly as { entityId?: number }).entityId;
-          if (entityId === undefined) continue;
-          for (const pt of poly.polygon.outer) {
-            updateBounds(entityId, pt.x, pt.y);
-          }
-          for (const hole of poly.polygon.holes) {
-            for (const pt of hole) {
-              updateBounds(entityId, pt.x, pt.y);
-            }
-          }
-        }
-
-        // Build per-entity bounding boxes for symbolic
-        const symbolicBounds = new Map<number, { minX: number; minY: number; maxX: number; maxY: number }>();
-        for (const line of relevantSymbolicLines) {
-          if (line.entityId === undefined) continue;
-          const bounds = symbolicBounds.get(line.entityId) ?? { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity };
-          bounds.minX = Math.min(bounds.minX, line.line.start.x, line.line.end.x);
-          bounds.minY = Math.min(bounds.minY, line.line.start.y, line.line.end.y);
-          bounds.maxX = Math.max(bounds.maxX, line.line.start.x, line.line.end.x);
-          bounds.maxY = Math.max(bounds.maxY, line.line.start.y, line.line.end.y);
-          symbolicBounds.set(line.entityId, bounds);
-        }
-
-        // Compute per-entity alignment transforms (center-to-center offset)
-        const alignmentOffsets = new Map<number, { dx: number; dy: number }>();
-        for (const entityId of entitiesWithRelevantSymbols) {
-          const scBounds = sectionCutBounds.get(entityId);
-          const symBounds = symbolicBounds.get(entityId);
-          if (scBounds && symBounds) {
-            const scCenterX = (scBounds.minX + scBounds.maxX) / 2;
-            const scCenterY = (scBounds.minY + scBounds.maxY) / 2;
-            const symCenterX = (symBounds.minX + symBounds.maxX) / 2;
-            const symCenterY = (symBounds.minY + symBounds.maxY) / 2;
-            alignmentOffsets.set(entityId, {
-              dx: scCenterX - symCenterX,
-              dy: scCenterY - symCenterY,
-            });
-          }
-        }
-
-        // Apply alignment offsets to symbolic lines
-        const alignedSymbolicLines = relevantSymbolicLines.map(line => {
-          const offset = line.entityId !== undefined ? alignmentOffsets.get(line.entityId) : undefined;
-          if (offset) {
-            return {
-              ...line,
-              line: {
-                start: { x: line.line.start.x + offset.dx, y: line.line.start.y + offset.dy },
-                end: { x: line.line.end.x + offset.dx, y: line.line.end.y + offset.dy },
-              },
-            };
-          }
-          return line;
-        });
-
-        // Filter out section cut lines for entities that have relevant symbolic representations
-        const filteredLines = result.lines.filter((line: DrawingLine) =>
-          line.entityId === undefined || !entitiesWithRelevantSymbols.has(line.entityId)
-        );
-
-        // Also filter cut polygons for entities with relevant symbols
-        const filteredCutPolygons = result.cutPolygons?.filter((poly: { entityId?: number }) =>
-          poly.entityId === undefined || !entitiesWithRelevantSymbols.has(poly.entityId)
-        ) ?? [];
-
-        // Combine filtered section cuts with aligned symbolic lines
-        const combinedLines = [...filteredLines, ...alignedSymbolicLines];
-
-        // Recalculate bounds with combined lines and polygons
-        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-        for (const line of combinedLines) {
-          minX = Math.min(minX, line.line.start.x, line.line.end.x);
-          minY = Math.min(minY, line.line.start.y, line.line.end.y);
-          maxX = Math.max(maxX, line.line.start.x, line.line.end.x);
-          maxY = Math.max(maxY, line.line.start.y, line.line.end.y);
-        }
-        // Include polygon vertices in bounds
-        for (const poly of filteredCutPolygons) {
-          for (const pt of poly.polygon.outer) {
-            minX = Math.min(minX, pt.x);
-            minY = Math.min(minY, pt.y);
-            maxX = Math.max(maxX, pt.x);
-            maxY = Math.max(maxY, pt.y);
-          }
-          for (const hole of poly.polygon.holes) {
-            for (const pt of hole) {
-              minX = Math.min(minX, pt.x);
-              minY = Math.min(minY, pt.y);
-              maxX = Math.max(maxX, pt.x);
-              maxY = Math.max(maxY, pt.y);
-            }
-          }
-        }
-
-        // Create hybrid drawing
-        const hybridDrawing: Drawing2D = {
-          ...result,
-          lines: combinedLines,
-          cutPolygons: filteredCutPolygons,
-          bounds: {
-            min: { x: isFinite(minX) ? minX : result.bounds.min.x, y: isFinite(minY) ? minY : result.bounds.min.y },
-            max: { x: isFinite(maxX) ? maxX : result.bounds.max.x, y: isFinite(maxY) ? maxY : result.bounds.max.y },
-          },
-          stats: {
-            ...result.stats,
-            cutLineCount: combinedLines.length,
-          },
-        };
-
-        setDrawing(hybridDrawing);
-      } else {
-        setDrawing(result);
-      }
-
-      // Always set status to ready (whether initial generation or regeneration)
-      setDrawingStatus('ready');
-      isRegeneratingRef.current = false;
-    } catch (error) {
-      console.error('Drawing generation failed:', error);
-      setDrawingError(error instanceof Error ? error.message : 'Generation failed');
-    } finally {
-      // Always cleanup generator to prevent resource leaks
-      generator?.dispose();
-    }
-  }, [
-    geometryResult,
-    ifcDataStore,
-    sectionPlane,
-    displayOptions,
-    combinedHiddenIds,
-    combinedIsolatedIds,
-    computedIsolatedIds,
-    setDrawing,
-    setDrawingStatus,
-    setDrawingProgress,
-    setDrawingError,
-  ]);
-
-  // Track panel visibility and geometry for detecting changes
-  const prevPanelVisibleRef = useRef(false);
-  const prevOverlayEnabledRef = useRef(false);
-  const prevMeshCountRef = useRef(0);
-
-  // Auto-generate when panel opens (or 3D overlay is enabled) and no drawing exists
-  // Also regenerate when geometry changes significantly (e.g., models hidden/shown)
-  useEffect(() => {
-    const wasVisible = prevPanelVisibleRef.current;
-    const wasOverlayEnabled = prevOverlayEnabledRef.current;
-    const prevMeshCount = prevMeshCountRef.current;
-    const currentMeshCount = geometryResult?.meshes?.length ?? 0;
-    const hasGeometry = currentMeshCount > 0;
-    
-    // Track panel visibility separately from overlay
-    const panelJustOpened = panelVisible && !wasVisible;
-    const overlayJustEnabled = displayOptions.show3DOverlay && !wasOverlayEnabled;
-    const isNowActive = panelVisible || displayOptions.show3DOverlay;
-    const geometryChanged = currentMeshCount !== prevMeshCount;
-    
-    // Always update refs
-    prevPanelVisibleRef.current = panelVisible;
-    prevOverlayEnabledRef.current = displayOptions.show3DOverlay;
-    prevMeshCountRef.current = currentMeshCount;
-    
-    if (isNowActive) {
-      if (!hasGeometry) {
-        // No geometry available - clear the drawing
-        if (drawing) {
-          setDrawing(null);
-          setDrawingStatus('idle');
-        }
-      } else if (panelJustOpened || overlayJustEnabled || !drawing || geometryChanged) {
-        // Generate if:
-        // 1. Panel just opened, OR
-        // 2. Overlay just enabled, OR  
-        // 3. No drawing exists, OR
-        // 4. Geometry changed significantly (models hidden/shown)
-        generateDrawing();
-      }
-    }
-  }, [panelVisible, displayOptions.show3DOverlay, drawing, geometryResult, generateDrawing, setDrawing, setDrawingStatus]);
-
-  // Auto-regenerate when section plane changes
-  // Strategy: INSTANT - no debounce, but prevent overlapping computations
-  // The generation time itself acts as natural batching for fast slider movements
-  const sectionRef = useRef({ axis: sectionPlane.axis, position: sectionPlane.position, flipped: sectionPlane.flipped });
-  const isGeneratingRef = useRef(false);
-  const latestSectionRef = useRef({ axis: sectionPlane.axis, position: sectionPlane.position, flipped: sectionPlane.flipped });
-  const [isRegenerating, setIsRegenerating] = useState(false);
-
-  // Stable regenerate function that handles overlapping calls
-  const doRegenerate = useCallback(async () => {
-    if (isGeneratingRef.current) {
-      // Already generating - the latest position is already tracked in latestSectionRef
-      // When current generation finishes, it will check if another is needed
-      return;
-    }
-
-    isGeneratingRef.current = true;
-    setIsRegenerating(true);
-
-    // Capture position at start of generation
-    const targetSection = { ...latestSectionRef.current };
-
-    try {
-      await generateDrawing(true);
-    } finally {
-      isGeneratingRef.current = false;
-      setIsRegenerating(false);
-
-      // Check if section changed while we were generating
-      const current = latestSectionRef.current;
-      if (
-        current.axis !== targetSection.axis ||
-        current.position !== targetSection.position ||
-        current.flipped !== targetSection.flipped
-      ) {
-        // Position changed during generation - regenerate immediately with latest
-        // Use microtask to avoid blocking
-        queueMicrotask(() => doRegenerate());
-      }
-    }
-  }, [generateDrawing]);
-
-  useEffect(() => {
-    // Always update latest section ref (even if generating)
-    latestSectionRef.current = { axis: sectionPlane.axis, position: sectionPlane.position, flipped: sectionPlane.flipped };
-
-    // Check if section plane actually changed from last processed
-    const prev = sectionRef.current;
-    if (
-      prev.axis === sectionPlane.axis &&
-      prev.position === sectionPlane.position &&
-      prev.flipped === sectionPlane.flipped
-    ) {
-      return;
-    }
-
-    // Update processed ref
-    sectionRef.current = { axis: sectionPlane.axis, position: sectionPlane.position, flipped: sectionPlane.flipped };
-
-    // If panel is visible OR 3D overlay is enabled, and we have geometry, regenerate INSTANTLY
-    if ((panelVisible || displayOptions.show3DOverlay) && geometryResult?.meshes) {
-      // Start immediately - no debounce
-      // doRegenerate handles preventing overlaps and will auto-regenerate with latest when done
-      doRegenerate();
-    }
-  }, [panelVisible, displayOptions.show3DOverlay, sectionPlane.axis, sectionPlane.position, sectionPlane.flipped, geometryResult, combinedHiddenIds, combinedIsolatedIds, computedIsolatedIds, doRegenerate]);
-
   // ═══════════════════════════════════════════════════════════════════════════
-  // 2D MEASURE TOOL HELPER FUNCTIONS
+  // EXTRACTED HOOKS
   // ═══════════════════════════════════════════════════════════════════════════
 
-  // Convert screen coordinates to drawing coordinates
-  const screenToDrawing = useCallback((screenX: number, screenY: number): { x: number; y: number } => {
-    // Screen coord → drawing coord
-    // Apply axis-specific inverse transforms (matching canvas rendering)
-    const currentAxis = sectionPlane.axis;
-    const flipY = currentAxis !== 'down'; // Only flip Y for front/side views
-    const flipX = currentAxis === 'side'; // Flip X for side view
-
-    // Inverse of: screenX = drawingX * scaleX + transform.x
-    // where scaleX = flipX ? -scale : scale
-    const scaleX = flipX ? -viewTransform.scale : viewTransform.scale;
-    const scaleY = flipY ? -viewTransform.scale : viewTransform.scale;
-
-    const x = (screenX - viewTransform.x) / scaleX;
-    const y = (screenY - viewTransform.y) / scaleY;
-    return { x, y };
-  }, [viewTransform, sectionPlane.axis]);
-
-  // Find nearest point on a line segment
-  const nearestPointOnSegment = useCallback((
-    p: { x: number; y: number },
-    a: { x: number; y: number },
-    b: { x: number; y: number }
-  ): { point: { x: number; y: number }; dist: number } => {
-    const dx = b.x - a.x;
-    const dy = b.y - a.y;
-    const lenSq = dx * dx + dy * dy;
-
-    if (lenSq < 0.0001) {
-      // Degenerate segment
-      const d = Math.sqrt((p.x - a.x) ** 2 + (p.y - a.y) ** 2);
-      return { point: a, dist: d };
-    }
-
-    // Parameter t along segment [0,1]
-    let t = ((p.x - a.x) * dx + (p.y - a.y) * dy) / lenSq;
-    t = Math.max(0, Math.min(1, t));
-
-    const nearest = { x: a.x + t * dx, y: a.y + t * dy };
-    const dist = Math.sqrt((p.x - nearest.x) ** 2 + (p.y - nearest.y) ** 2);
-
-    return { point: nearest, dist };
-  }, []);
-
-  // Find snap point near cursor (check polygon vertices, edges, and line endpoints)
-  const findSnapPoint = useCallback((drawingCoord: { x: number; y: number }): { x: number; y: number } | null => {
-    if (!drawing) return null;
-
-    const snapThreshold = 10 / viewTransform.scale; // 10 screen pixels
-    let bestSnap: { x: number; y: number } | null = null;
-    let bestDist = snapThreshold;
-
-    // Priority 1: Check polygon vertices (endpoints are highest priority)
-    for (const polygon of drawing.cutPolygons) {
-      for (const pt of polygon.polygon.outer) {
-        const dist = Math.sqrt((pt.x - drawingCoord.x) ** 2 + (pt.y - drawingCoord.y) ** 2);
-        if (dist < bestDist * 0.7) { // Vertices get priority (70% threshold)
-          return { x: pt.x, y: pt.y }; // Return immediately for vertex snaps
-        }
-      }
-      for (const hole of polygon.polygon.holes) {
-        for (const pt of hole) {
-          const dist = Math.sqrt((pt.x - drawingCoord.x) ** 2 + (pt.y - drawingCoord.y) ** 2);
-          if (dist < bestDist * 0.7) {
-            return { x: pt.x, y: pt.y };
-          }
-        }
-      }
-    }
-
-    // Priority 2: Check line endpoints
-    for (const line of drawing.lines) {
-      const { start, end } = line.line;
-      for (const pt of [start, end]) {
-        const dist = Math.sqrt((pt.x - drawingCoord.x) ** 2 + (pt.y - drawingCoord.y) ** 2);
-        if (dist < bestDist * 0.7) {
-          return { x: pt.x, y: pt.y };
-        }
-      }
-    }
-
-    // Priority 3: Check polygon edges
-    for (const polygon of drawing.cutPolygons) {
-      const outer = polygon.polygon.outer;
-      for (let i = 0; i < outer.length; i++) {
-        const a = outer[i];
-        const b = outer[(i + 1) % outer.length];
-        const { point, dist } = nearestPointOnSegment(drawingCoord, a, b);
-        if (dist < bestDist) {
-          bestDist = dist;
-          bestSnap = point;
-        }
-      }
-      for (const hole of polygon.polygon.holes) {
-        for (let i = 0; i < hole.length; i++) {
-          const a = hole[i];
-          const b = hole[(i + 1) % hole.length];
-          const { point, dist } = nearestPointOnSegment(drawingCoord, a, b);
-          if (dist < bestDist) {
-            bestDist = dist;
-            bestSnap = point;
-          }
-        }
-      }
-    }
-
-    // Priority 4: Check drawing lines
-    for (const line of drawing.lines) {
-      const { start, end } = line.line;
-      const { point, dist } = nearestPointOnSegment(drawingCoord, start, end);
-      if (dist < bestDist) {
-        bestDist = dist;
-        bestSnap = point;
-      }
-    }
-
-    return bestSnap;
-  }, [drawing, viewTransform.scale, nearestPointOnSegment]);
-
-  // Apply orthogonal constraint if shift is held
-  const applyOrthogonalConstraint = useCallback((start: { x: number; y: number }, current: { x: number; y: number }, lockedAxis: 'x' | 'y' | null): { x: number; y: number } => {
-    if (!lockedAxis) return current;
-
-    if (lockedAxis === 'x') {
-      return { x: current.x, y: start.y };
-    } else {
-      return { x: start.x, y: current.y };
-    }
-  }, []);
-
-  // Keyboard handlers for shift key (orthogonal constraint)
-  useEffect(() => {
-    if (!measure2DMode) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Shift' && measure2DStart && measure2DCurrent && !measure2DShiftLocked) {
-        // Determine axis based on dominant direction
-        const dx = Math.abs(measure2DCurrent.x - measure2DStart.x);
-        const dy = Math.abs(measure2DCurrent.y - measure2DStart.y);
-        const axis = dx > dy ? 'x' : 'y';
-        setMeasure2DShiftLocked(true, axis);
-      }
-      if (e.key === 'Escape') {
-        cancelMeasure2D();
-      }
-    };
-
-    const handleKeyUp = (e: KeyboardEvent) => {
-      if (e.key === 'Shift') {
-        setMeasure2DShiftLocked(false);
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    window.addEventListener('keyup', handleKeyUp);
-
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-      window.removeEventListener('keyup', handleKeyUp);
-    };
-  }, [measure2DMode, measure2DStart, measure2DCurrent, measure2DShiftLocked, setMeasure2DShiftLocked, cancelMeasure2D]);
-
-  // Global mouseup handler to cancel measurement if released outside panel
-  useEffect(() => {
-    if (!measure2DMode) return;
-
-    const handleGlobalMouseUp = (e: MouseEvent) => {
-      // If mouse button is released and we're outside the panel with a measurement started, cancel it
-      if (!isMouseInsidePanel.current && measure2DStart && e.button === 0) {
-        cancelMeasure2D();
-      }
-      isMouseButtonDown.current = false;
-    };
-
-    window.addEventListener('mouseup', handleGlobalMouseUp);
-    return () => {
-      window.removeEventListener('mouseup', handleGlobalMouseUp);
-    };
-  }, [measure2DMode, measure2DStart, cancelMeasure2D]);
-
-  // Pan/Measure handlers
-  const handleMouseDown = useCallback((e: React.MouseEvent) => {
-    if (e.button !== 0) return;
-
-    isMouseButtonDown.current = true;
-    const rect = containerRef.current?.getBoundingClientRect();
-    if (!rect) return;
-
-    const screenX = e.clientX - rect.left;
-    const screenY = e.clientY - rect.top;
-
-    if (measure2DMode) {
-      // Measure mode: set start point
-      const drawingCoord = screenToDrawing(screenX, screenY);
-      const snapPoint = findSnapPoint(drawingCoord);
-      const startPoint = snapPoint || drawingCoord;
-      setMeasure2DStart(startPoint);
-      setMeasure2DCurrent(startPoint);
-    } else {
-      // Pan mode
-      isPanning.current = true;
-      lastPanPoint.current = { x: e.clientX, y: e.clientY };
-    }
-  }, [measure2DMode, screenToDrawing, findSnapPoint, setMeasure2DStart, setMeasure2DCurrent]);
-
-  const handleMouseMove = useCallback((e: React.MouseEvent) => {
-    const rect = containerRef.current?.getBoundingClientRect();
-    if (!rect) return;
-
-    const screenX = e.clientX - rect.left;
-    const screenY = e.clientY - rect.top;
-
-    if (measure2DMode) {
-      const drawingCoord = screenToDrawing(screenX, screenY);
-
-      // Find snap point and update
-      const snapPoint = findSnapPoint(drawingCoord);
-      setMeasure2DSnapPoint(snapPoint);
-
-      if (measure2DStart) {
-        // If measuring, update current point
-        let currentPoint = snapPoint || drawingCoord;
-
-        // Apply orthogonal constraint if shift is held
-        if (measure2DShiftLocked && measure2DLockedAxis) {
-          currentPoint = applyOrthogonalConstraint(measure2DStart, currentPoint, measure2DLockedAxis);
-        }
-
-        setMeasure2DCurrent(currentPoint);
-      }
-    } else if (isPanning.current) {
-      // Pan mode
-      const dx = e.clientX - lastPanPoint.current.x;
-      const dy = e.clientY - lastPanPoint.current.y;
-      lastPanPoint.current = { x: e.clientX, y: e.clientY };
-      setViewTransform((prev) => ({
-        ...prev,
-        x: prev.x + dx,
-        y: prev.y + dy,
-      }));
-    }
-  }, [measure2DMode, measure2DStart, measure2DShiftLocked, measure2DLockedAxis, screenToDrawing, findSnapPoint, setMeasure2DSnapPoint, setMeasure2DCurrent, applyOrthogonalConstraint]);
-
-  const handleMouseUp = useCallback(() => {
-    isMouseButtonDown.current = false;
-    if (measure2DMode && measure2DStart && measure2DCurrent) {
-      // Complete the measurement
-      completeMeasure2D();
-    }
-    isPanning.current = false;
-  }, [measure2DMode, measure2DStart, measure2DCurrent, completeMeasure2D]);
-
-  const handleMouseLeave = useCallback(() => {
-    isMouseInsidePanel.current = false;
-    // Don't cancel if button is still down - user might re-enter
-    // Cancel will happen on global mouseup if released outside
-    isPanning.current = false;
-  }, []);
-
-  const handleMouseEnter = useCallback((e: React.MouseEvent) => {
-    isMouseInsidePanel.current = true;
-    // If re-entering with button down and measurement started, resume tracking
-    if (isMouseButtonDown.current && measure2DMode && measure2DStart) {
-      const rect = containerRef.current?.getBoundingClientRect();
-      if (rect) {
-        const screenX = e.clientX - rect.left;
-        const screenY = e.clientY - rect.top;
-        const drawingCoord = screenToDrawing(screenX, screenY);
-        const snapPoint = findSnapPoint(drawingCoord);
-        const currentPoint = snapPoint || drawingCoord;
-        setMeasure2DCurrent(currentPoint);
-      }
-    }
-  }, [measure2DMode, measure2DStart, screenToDrawing, findSnapPoint, setMeasure2DCurrent]);
-
-  // Wheel handler - attached with passive: false to allow preventDefault
-  useEffect(() => {
-    // Only attach handler when panel is visible
-    if (!panelVisible) return;
-
-    const container = containerRef.current;
-    if (!container) {
-      // Container not ready yet, try again on next render
-      return;
-    }
-
-    const wheelHandler = (e: WheelEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      const delta = e.deltaY > 0 ? 0.9 : 1.1;
-      const rect = container.getBoundingClientRect();
-
-      const x = e.clientX - rect.left;
-      const y = e.clientY - rect.top;
-
-      setViewTransform((prev) => {
-        const newScale = Math.max(0.01, prev.scale * delta);
-        const scaleRatio = newScale / prev.scale;
-        return {
-          scale: newScale,
-          x: x - (x - prev.x) * scaleRatio,
-          y: y - (y - prev.y) * scaleRatio,
-        };
-      });
-    };
-
-    container.addEventListener('wheel', wheelHandler, { passive: false });
-    return () => {
-      container.removeEventListener('wheel', wheelHandler);
-    };
-  }, [panelVisible, status]); // Re-run when panel visibility or status changes to ensure container is ready
-
-  // Zoom controls - unlimited zoom
-  const zoomIn = useCallback(() => {
-    setViewTransform((prev) => ({ ...prev, scale: prev.scale * 1.2 }));  // No upper limit
-  }, []);
-
-  const zoomOut = useCallback(() => {
-    setViewTransform((prev) => ({ ...prev, scale: Math.max(0.01, prev.scale / 1.2) }));
-  }, []);
-
-  const fitToView = useCallback(() => {
-    if (!drawing || !containerRef.current) return;
-    const rect = containerRef.current.getBoundingClientRect();
-
-    // Sheet mode: fit the entire paper into view
-    if (sheetEnabled && activeSheet) {
-      const paperWidth = activeSheet.paper.widthMm;
-      const paperHeight = activeSheet.paper.heightMm;
-
-      // Calculate scale to fit paper with padding (10% margin on each side)
-      const padding = 0.1;
-      const availableWidth = rect.width * (1 - 2 * padding);
-      const availableHeight = rect.height * (1 - 2 * padding);
-      const scaleX = availableWidth / paperWidth;
-      const scaleY = availableHeight / paperHeight;
-      const scale = Math.min(scaleX, scaleY);
-
-      // Center the paper in the view
-      setViewTransform({
-        scale,
-        x: (rect.width - paperWidth * scale) / 2,
-        y: (rect.height - paperHeight * scale) / 2,
-      });
-      return;
-    }
-
-    // Non-sheet mode: fit the drawing bounds
-    const { bounds } = drawing;
-    const width = bounds.max.x - bounds.min.x;
-    const height = bounds.max.y - bounds.min.y;
-
-    if (width < 0.001 || height < 0.001) return;
-
-    // Calculate scale to fit with padding (15% margin on each side)
-    const padding = 0.15;
-    const availableWidth = rect.width * (1 - 2 * padding);
-    const availableHeight = rect.height * (1 - 2 * padding);
-    const scaleX = availableWidth / width;
-    const scaleY = availableHeight / height;
-    // No artificial cap - let it zoom to fit the content
-    const scale = Math.min(scaleX, scaleY);
-
-    // Center the drawing in the view with axis-specific transforms
-    // Must match the canvas rendering transforms:
-    // - 'down' (plan view): no Y flip
-    // - 'front'/'side': Y flip
-    // - 'side': X flip
-    const currentAxis = sectionPlane.axis;
-    const flipY = currentAxis !== 'down';
-    const flipX = currentAxis === 'side';
-
-    const centerX = (bounds.min.x + bounds.max.x) / 2;
-    const centerY = (bounds.min.y + bounds.max.y) / 2;
-
-    // Apply transforms matching canvas rendering
-    const adjustedCenterX = flipX ? -centerX : centerX;
-    const adjustedCenterY = flipY ? -centerY : centerY;
-
-    setViewTransform({
-      scale,
-      x: rect.width / 2 - adjustedCenterX * scale,
-      y: rect.height / 2 - adjustedCenterY * scale,
-    });
-  }, [drawing, sheetEnabled, activeSheet, sectionPlane.axis]);
-
-  // Track axis changes for forced fit-to-view
-  const lastFitAxisRef = useRef(sectionPlane.axis);
-
-  // Set needsFit when axis changes
-  useEffect(() => {
-    if (sectionPlane.axis !== prevAxisRef.current) {
-      prevAxisRef.current = sectionPlane.axis;
-      setNeedsFit(true);  // Force fit when axis changes
-      cachedSheetTransformRef.current = null;  // Clear cached transform for new axis
-    }
-  }, [sectionPlane.axis]);
-
-  // Track previous sheet mode to detect toggle
-  const prevSheetEnabledRef = useRef(sheetEnabled);
-  useEffect(() => {
-    if (sheetEnabled !== prevSheetEnabledRef.current) {
-      prevSheetEnabledRef.current = sheetEnabled;
-      cachedSheetTransformRef.current = null;  // Clear cached transform
-      // Auto-fit when sheet mode is toggled
-      if (status === 'ready' && drawing && containerRef.current) {
-        const timeout = setTimeout(() => {
-          fitToView();
-        }, 50);
-        return () => clearTimeout(timeout);
-      }
-    }
-  }, [sheetEnabled, status, drawing, fitToView]);
-
-  // Auto-fit when: (1) needsFit is true (first open or axis change), or (2) not pinned after regenerate
-  // ALWAYS fit when axis changed, regardless of pin state
-  // Also re-run when panelVisible changes so we fit when panel opens with existing drawing
-  useEffect(() => {
-    if (status === 'ready' && drawing && containerRef.current && panelVisible) {
-      const axisChanged = lastFitAxisRef.current !== sectionPlane.axis;
-
-      // Fit if needsFit (first open/axis change) OR if not pinned OR if axis just changed
-      if (needsFit || !isPinned || axisChanged) {
-        // Small delay to ensure canvas is rendered
-        const timeout = setTimeout(() => {
-          fitToView();
-          lastFitAxisRef.current = sectionPlane.axis;
-          if (needsFit) {
-            setNeedsFit(false);  // Clear the flag after fitting
-          }
-        }, 50);
-        return () => clearTimeout(timeout);
-      }
-    }
-  }, [status, drawing, fitToView, isPinned, needsFit, sectionPlane.axis, panelVisible]);
-
-  // Format distance for display (same logic as canvas)
-  const formatDistance = useCallback((distance: number): string => {
-    if (distance < 0.01) {
-      return `${(distance * 1000).toFixed(1)} mm`;
-    } else if (distance < 1) {
-      return `${(distance * 100).toFixed(1)} cm`;
-    } else {
-      return `${distance.toFixed(3)} m`;
-    }
-  }, []);
-
-  // Generate SVG that matches the canvas rendering exactly
-  const generateExportSVG = useCallback((): string | null => {
-    if (!drawing) return null;
-
-    const { bounds } = drawing;
-    const width = bounds.max.x - bounds.min.x;
-    const height = bounds.max.y - bounds.min.y;
-
-    // Add padding around the drawing
-    const padding = Math.max(width, height) * 0.1;
-    const viewMinX = bounds.min.x - padding;
-    const viewMinY = bounds.min.y - padding;
-    const viewWidth = width + padding * 2;
-    const viewHeight = height + padding * 2;
-
-    // SVG dimensions in mm (assuming model is in meters, scale 1:100)
-    const scale = displayOptions.scale || 100;
-    const svgWidthMm = (viewWidth * 1000) / scale;
-    const svgHeightMm = (viewHeight * 1000) / scale;
-
-    // Convert mm on paper to model units (meters)
-    // At 1:100 scale, 1mm on paper = 0.1m in model space
-    // Formula: modelUnits = paperMm * scale / 1000
-    const mmToModel = (mm: number) => mm * scale / 1000;
-
-    // Helper to escape XML
-    const escapeXml = (str: string): string => {
-      return str
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&apos;');
-    };
-
-    // Axis-specific flipping (matching canvas rendering)
-    // - 'down' (plan view): DON'T flip Y so north (Z+) is up
-    // - 'front' and 'side': flip Y so height (Y+) is up
-    // - 'side': also flip X to look from conventional direction
-    const currentAxis = sectionPlane.axis;
-    const flipY = currentAxis !== 'down';
-    const flipX = currentAxis === 'side';
-
-    // Helper to get polygon path with axis-specific coordinate transformation
-    const polygonToPath = (polygon: { outer: { x: number; y: number }[]; holes: { x: number; y: number }[][] }): string => {
-      const transformPt = (x: number, y: number) => ({
-        x: flipX ? -x : x,
-        y: flipY ? -y : y,
-      });
-
-      let path = '';
-      if (polygon.outer.length > 0) {
-        const first = transformPt(polygon.outer[0].x, polygon.outer[0].y);
-        path += `M ${first.x.toFixed(4)} ${first.y.toFixed(4)}`;
-        for (let i = 1; i < polygon.outer.length; i++) {
-          const pt = transformPt(polygon.outer[i].x, polygon.outer[i].y);
-          path += ` L ${pt.x.toFixed(4)} ${pt.y.toFixed(4)}`;
-        }
-        path += ' Z';
-      }
-      for (const hole of polygon.holes) {
-        if (hole.length > 0) {
-          const holeFirst = transformPt(hole[0].x, hole[0].y);
-          path += ` M ${holeFirst.x.toFixed(4)} ${holeFirst.y.toFixed(4)}`;
-          for (let i = 1; i < hole.length; i++) {
-            const pt = transformPt(hole[i].x, hole[i].y);
-            path += ` L ${pt.x.toFixed(4)} ${pt.y.toFixed(4)}`;
-          }
-          path += ' Z';
-        }
-      }
-      return path;
-    };
-
-    // Calculate viewBox with axis-specific flipping
-    const viewBoxMinX = flipX ? -viewMinX - viewWidth : viewMinX;
-    const viewBoxMinY = flipY ? -viewMinY - viewHeight : viewMinY;
-
-    // Start building SVG
-    let svg = `<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg"
-     width="${svgWidthMm.toFixed(2)}mm"
-     height="${svgHeightMm.toFixed(2)}mm"
-     viewBox="${viewBoxMinX.toFixed(4)} ${viewBoxMinY.toFixed(4)} ${viewWidth.toFixed(4)} ${viewHeight.toFixed(4)}">
-  <rect x="${viewBoxMinX.toFixed(4)}" y="${viewBoxMinY.toFixed(4)}" width="${viewWidth.toFixed(4)}" height="${viewHeight.toFixed(4)}" fill="#FFFFFF"/>
-`;
-
-    // 1. FILL CUT POLYGONS (with color from IFC materials or override engine)
-    svg += '  <g id="polygon-fills">\n';
-    for (const polygon of drawing.cutPolygons) {
-      let fillColor = getFillColorForType(polygon.ifcType);
-      let opacity = 1;
-
-      // Use actual IFC material colors from the mesh data
-      if (activePresetId === 'preset-3d-colors') {
-        const materialColor = entityColorMap.get(polygon.entityId);
-        if (materialColor) {
-          const r = Math.round(materialColor[0] * 255);
-          const g = Math.round(materialColor[1] * 255);
-          const b = Math.round(materialColor[2] * 255);
-          fillColor = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
-          opacity = materialColor[3];
-        }
-      } else if (overridesEnabled) {
-        const elementData: ElementData = {
-          expressId: polygon.entityId,
-          ifcType: polygon.ifcType,
-        };
-        const result = overrideEngine.applyOverrides(elementData);
-        fillColor = result.style.fillColor;
-        opacity = result.style.opacity;
-      }
-
-      const pathData = polygonToPath(polygon.polygon);
-      svg += `    <path d="${pathData}" fill="${fillColor}" fill-opacity="${opacity.toFixed(2)}" fill-rule="evenodd" data-entity-id="${polygon.entityId}" data-ifc-type="${escapeXml(polygon.ifcType)}"/>\n`;
-    }
-    svg += '  </g>\n';
-
-    // 2. STROKE CUT POLYGON OUTLINES (with color from override engine)
-    svg += '  <g id="polygon-outlines">\n';
-    for (const polygon of drawing.cutPolygons) {
-      let strokeColor = '#000000';
-      let lineWeight = 0.5;
-
-      if (overridesEnabled) {
-        const elementData: ElementData = {
-          expressId: polygon.entityId,
-          ifcType: polygon.ifcType,
-        };
-        const result = overrideEngine.applyOverrides(elementData);
-        strokeColor = result.style.strokeColor;
-        lineWeight = result.style.lineWeight;
-      }
-
-      const pathData = polygonToPath(polygon.polygon);
-      // Convert line weight (mm on paper) to model units
-      const svgLineWeight = mmToModel(lineWeight);
-      svg += `    <path d="${pathData}" fill="none" stroke="${strokeColor}" stroke-width="${svgLineWeight.toFixed(4)}" data-entity-id="${polygon.entityId}"/>\n`;
-    }
-    svg += '  </g>\n';
-
-    // 3. DRAW PROJECTION/SILHOUETTE LINES
-    // Pre-compute bounds for line validation
-    const lineBounds = drawing.bounds;
-    const lineMargin = Math.max(lineBounds.max.x - lineBounds.min.x, lineBounds.max.y - lineBounds.min.y) * 0.5;
-    const lineMinX = lineBounds.min.x - lineMargin;
-    const lineMaxX = lineBounds.max.x + lineMargin;
-    const lineMinY = lineBounds.min.y - lineMargin;
-    const lineMaxY = lineBounds.max.y + lineMargin;
-
-    svg += '  <g id="drawing-lines">\n';
-    for (const line of drawing.lines) {
-      // Skip 'cut' lines - they're triangulation edges, already handled by polygons
-      if (line.category === 'cut') continue;
-
-      // Skip hidden lines if not showing
-      if (!displayOptions.showHiddenLines && line.visibility === 'hidden') continue;
-
-      // Skip lines with invalid coordinates
-      const { start, end } = line.line;
-      if (!isFinite(start.x) || !isFinite(start.y) || !isFinite(end.x) || !isFinite(end.y)) {
-        continue;
-      }
-      if (start.x < lineMinX || start.x > lineMaxX || start.y < lineMinY || start.y > lineMaxY ||
-        end.x < lineMinX || end.x > lineMaxX || end.y < lineMinY || end.y > lineMaxY) {
-        continue;
-      }
-
-      // Set line style based on category
-      let strokeColor = '#000000';
-      let lineWidth = 0.25;
-      let dashArray = '';
-
-      switch (line.category) {
-        case 'projection':
-          lineWidth = 0.25;
-          strokeColor = '#000000';
-          break;
-        case 'hidden':
-          lineWidth = 0.18;
-          strokeColor = '#666666';
-          dashArray = '2 1';
-          break;
-        case 'silhouette':
-          lineWidth = 0.35;
-          strokeColor = '#000000';
-          break;
-        case 'crease':
-          lineWidth = 0.18;
-          strokeColor = '#000000';
-          break;
-        case 'boundary':
-          lineWidth = 0.25;
-          strokeColor = '#000000';
-          break;
-        case 'annotation':
-          lineWidth = 0.13;
-          strokeColor = '#000000';
-          break;
-      }
-
-      // Hidden visibility overrides
-      if (line.visibility === 'hidden') {
-        strokeColor = '#888888';
-        dashArray = '2 1';
-        lineWidth *= 0.7;
-      }
-
-      // Convert line width from mm on paper to model units
-      const svgLineWidth = mmToModel(lineWidth);
-      const dashAttr = dashArray ? ` stroke-dasharray="${dashArray.split(' ').map(d => mmToModel(parseFloat(d)).toFixed(4)).join(' ')}"` : '';
-
-      // Transform line endpoints with axis-specific flipping
-      const startT = { x: flipX ? -start.x : start.x, y: flipY ? -start.y : start.y };
-      const endT = { x: flipX ? -end.x : end.x, y: flipY ? -end.y : end.y };
-      svg += `    <line x1="${startT.x.toFixed(4)}" y1="${startT.y.toFixed(4)}" x2="${endT.x.toFixed(4)}" y2="${endT.y.toFixed(4)}" stroke="${strokeColor}" stroke-width="${svgLineWidth.toFixed(4)}"${dashAttr}/>\n`;
-    }
-    svg += '  </g>\n';
-
-    // 4. DRAW COMPLETED MEASUREMENTS
-    if (measure2DResults.length > 0) {
-      svg += '  <g id="measurements">\n';
-      for (const result of measure2DResults) {
-        const { start, end, distance } = result;
-        // Transform measurement points with axis-specific flipping
-        const startT = { x: flipX ? -start.x : start.x, y: flipY ? -start.y : start.y };
-        const endT = { x: flipX ? -end.x : end.x, y: flipY ? -end.y : end.y };
-        const midX = (startT.x + endT.x) / 2;
-        const midY = (startT.y + endT.y) / 2;
-        const labelText = formatDistance(distance);
-
-        // Measurement styling (all in mm on paper, converted to model units)
-        const measureColor = '#2196F3';
-        const measureLineWidth = mmToModel(0.4);  // 0.4mm line on paper
-        const endpointRadius = mmToModel(1.5);    // 1.5mm radius on paper
-
-        // Draw line
-        svg += `    <line x1="${startT.x.toFixed(4)}" y1="${startT.y.toFixed(4)}" x2="${endT.x.toFixed(4)}" y2="${endT.y.toFixed(4)}" stroke="${measureColor}" stroke-width="${measureLineWidth.toFixed(4)}"/>\n`;
-
-        // Draw endpoints
-        svg += `    <circle cx="${startT.x.toFixed(4)}" cy="${startT.y.toFixed(4)}" r="${endpointRadius.toFixed(4)}" fill="${measureColor}"/>\n`;
-        svg += `    <circle cx="${endT.x.toFixed(4)}" cy="${endT.y.toFixed(4)}" r="${endpointRadius.toFixed(4)}" fill="${measureColor}"/>\n`;
-
-        // Draw label background and text
-        // Use 3mm text height on paper for readable labels
-        const fontSize = mmToModel(3);
-        const labelWidth = labelText.length * fontSize * 0.6;  // Approximate text width
-        const labelHeight = fontSize * 1.4;
-        const labelStroke = mmToModel(0.2);
-
-        svg += `    <rect x="${(midX - labelWidth / 2).toFixed(4)}" y="${(midY - labelHeight / 2).toFixed(4)}" width="${labelWidth.toFixed(4)}" height="${labelHeight.toFixed(4)}" fill="rgba(255,255,255,0.95)" stroke="${measureColor}" stroke-width="${labelStroke.toFixed(4)}"/>\n`;
-        svg += `    <text x="${midX.toFixed(4)}" y="${midY.toFixed(4)}" font-family="Arial, sans-serif" font-size="${fontSize.toFixed(4)}" fill="#000000" text-anchor="middle" dominant-baseline="middle" font-weight="500">${escapeXml(labelText)}</text>\n`;
-      }
-      svg += '  </g>\n';
-    }
-
-    svg += '</svg>';
-    return svg;
-  }, [drawing, displayOptions, activePresetId, entityColorMap, overridesEnabled, overrideEngine, measure2DResults, formatDistance, sectionPlane.axis]);
-
-  // Generate SVG with drawing sheet (frame, title block, scale bar)
-  // This generates coordinates directly in paper mm space (like the canvas rendering)
-  const generateSheetSVG = useCallback((): string | null => {
-    if (!drawing || !activeSheet) return null;
-
-    const { bounds } = drawing;
-
-    // Sheet dimensions in mm
-    const paperWidth = activeSheet.paper.widthMm;
-    const paperHeight = activeSheet.paper.heightMm;
-    const viewport = activeSheet.viewportBounds;
-
-    // Calculate transform to fit drawing into viewport
-    const drawingTransform = calculateDrawingTransform(
-      { minX: bounds.min.x, minY: bounds.min.y, maxX: bounds.max.x, maxY: bounds.max.y },
-      viewport,
-      activeSheet.scale
-    );
-
-    const { translateX, translateY, scaleFactor } = drawingTransform;
-
-    // Axis-specific flipping (matching canvas rendering)
-    // - 'down' (plan view): DON'T flip Y so north (Z+) is up
-    // - 'front' and 'side': flip Y so height (Y+) is up
-    // - 'side': also flip X to look from conventional direction
-    const currentAxis = sectionPlane.axis;
-    const flipY = currentAxis !== 'down';
-    const flipX = currentAxis === 'side';
-
-    // Helper: convert model coordinates to paper mm (matching canvas rendering exactly)
-    const modelToPaper = (x: number, y: number): { x: number; y: number } => {
-      const adjustedX = flipX ? -x : x;
-      const adjustedY = flipY ? -y : y;
-      return {
-        x: adjustedX * scaleFactor + translateX,
-        y: adjustedY * scaleFactor + translateY,
-      };
-    };
-
-    // Start building SVG (paper coordinates in mm)
-    let svg = `<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg"
-     width="${paperWidth}mm"
-     height="${paperHeight}mm"
-     viewBox="0 0 ${paperWidth} ${paperHeight}">
-  <!-- Background -->
-  <rect x="0" y="0" width="${paperWidth}" height="${paperHeight}" fill="#FFFFFF"/>
-
-`;
-
-    // Create clipping path for viewport FIRST (so it can be used by drawing content)
-    svg += `  <defs>
-    <clipPath id="viewport-clip">
-      <rect x="${viewport.x.toFixed(2)}" y="${viewport.y.toFixed(2)}" width="${viewport.width.toFixed(2)}" height="${viewport.height.toFixed(2)}"/>
-    </clipPath>
-  </defs>
-
-`;
-
-    // Drawing content FIRST (so frame/title block render on top)
-    svg += `  <g id="drawing-content" clip-path="url(#viewport-clip)">
-`;
-
-    // Helper to escape XML
-    const escapeXml = (str: string): string => {
-      return str
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&apos;');
-    };
-
-    // Helper to get polygon path in paper coordinates
-    const polygonToPath = (polygon: { outer: { x: number; y: number }[]; holes: { x: number; y: number }[][] }): string => {
-      let path = '';
-      if (polygon.outer.length > 0) {
-        const first = modelToPaper(polygon.outer[0].x, polygon.outer[0].y);
-        path += `M ${first.x.toFixed(4)} ${first.y.toFixed(4)}`;
-        for (let i = 1; i < polygon.outer.length; i++) {
-          const pt = modelToPaper(polygon.outer[i].x, polygon.outer[i].y);
-          path += ` L ${pt.x.toFixed(4)} ${pt.y.toFixed(4)}`;
-        }
-        path += ' Z';
-      }
-      for (const hole of polygon.holes) {
-        if (hole.length > 0) {
-          const holeFirst = modelToPaper(hole[0].x, hole[0].y);
-          path += ` M ${holeFirst.x.toFixed(4)} ${holeFirst.y.toFixed(4)}`;
-          for (let i = 1; i < hole.length; i++) {
-            const pt = modelToPaper(hole[i].x, hole[i].y);
-            path += ` L ${pt.x.toFixed(4)} ${pt.y.toFixed(4)}`;
-          }
-          path += ' Z';
-        }
-      }
-      return path;
-    };
-
-    // Render polygon fills
-    svg += '    <g id="polygon-fills">\n';
-    for (const polygon of drawing.cutPolygons) {
-      let fillColor = getFillColorForType(polygon.ifcType);
-      let opacity = 1;
-
-      if (activePresetId === 'preset-3d-colors') {
-        const materialColor = entityColorMap.get(polygon.entityId);
-        if (materialColor) {
-          const r = Math.round(materialColor[0] * 255);
-          const g = Math.round(materialColor[1] * 255);
-          const b = Math.round(materialColor[2] * 255);
-          fillColor = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
-          opacity = materialColor[3];
-        }
-      } else if (overridesEnabled) {
-        const elementData: ElementData = {
-          expressId: polygon.entityId,
-          ifcType: polygon.ifcType,
-        };
-        const result = overrideEngine.applyOverrides(elementData);
-        fillColor = result.style.fillColor;
-        opacity = result.style.opacity;
-      }
-
-      const pathData = polygonToPath(polygon.polygon);
-      if (pathData) {
-        svg += `      <path d="${pathData}" fill="${fillColor}" fill-opacity="${opacity.toFixed(2)}" fill-rule="evenodd" data-entity-id="${polygon.entityId}" data-ifc-type="${escapeXml(polygon.ifcType)}"/>\n`;
-      }
-    }
-    svg += '    </g>\n';
-
-    // Render polygon outlines
-    svg += '    <g id="polygon-outlines">\n';
-    for (const polygon of drawing.cutPolygons) {
-      let strokeColor = '#000000';
-      let lineWeight = 0.5;
-
-      if (overridesEnabled) {
-        const elementData: ElementData = {
-          expressId: polygon.entityId,
-          ifcType: polygon.ifcType,
-        };
-        const result = overrideEngine.applyOverrides(elementData);
-        strokeColor = result.style.strokeColor;
-        lineWeight = result.style.lineWeight;
-      }
-
-      const pathData = polygonToPath(polygon.polygon);
-      if (pathData) {
-        // lineWeight is in mm on paper
-        const svgLineWeight = lineWeight * 0.3; // Scale down for better appearance
-        svg += `      <path d="${pathData}" fill="none" stroke="${strokeColor}" stroke-width="${svgLineWeight.toFixed(4)}" data-entity-id="${polygon.entityId}"/>\n`;
-      }
-    }
-    svg += '    </g>\n';
-
-    // Render drawing lines
-    const lineBounds = drawing.bounds;
-    const lineMargin = Math.max(lineBounds.max.x - lineBounds.min.x, lineBounds.max.y - lineBounds.min.y) * 0.5;
-    const lineMinX = lineBounds.min.x - lineMargin;
-    const lineMaxX = lineBounds.max.x + lineMargin;
-    const lineMinY = lineBounds.min.y - lineMargin;
-    const lineMaxY = lineBounds.max.y + lineMargin;
-
-    svg += '    <g id="drawing-lines">\n';
-    for (const line of drawing.lines) {
-      if (line.category === 'cut') continue;
-      if (!displayOptions.showHiddenLines && line.visibility === 'hidden') continue;
-
-      const { start, end } = line.line;
-      if (!isFinite(start.x) || !isFinite(start.y) || !isFinite(end.x) || !isFinite(end.y)) continue;
-      if (start.x < lineMinX || start.x > lineMaxX || start.y < lineMinY || start.y > lineMaxY ||
-        end.x < lineMinX || end.x > lineMaxX || end.y < lineMinY || end.y > lineMaxY) continue;
-
-      let strokeColor = '#000000';
-      let lineWidth = 0.25;
-      let dashArray = '';
-
-      switch (line.category) {
-        case 'projection': lineWidth = 0.25; break;
-        case 'hidden': lineWidth = 0.18; strokeColor = '#666666'; dashArray = '1 0.5'; break;
-        case 'silhouette': lineWidth = 0.35; break;
-        case 'crease': lineWidth = 0.18; break;
-        case 'boundary': lineWidth = 0.25; break;
-        case 'annotation': lineWidth = 0.13; break;
-      }
+  const { generateDrawing, doRegenerate, isRegenerating } = useDrawingGeneration({
+    geometryResult, ifcDataStore, sectionPlane, displayOptions,
+    combinedHiddenIds, combinedIsolatedIds, computedIsolatedIds,
+    models, panelVisible, drawing,
+    setDrawing, setDrawingStatus, setDrawingProgress, setDrawingError,
+  });
+
+  const { viewTransform, setViewTransform, zoomIn, zoomOut, fitToView } = useViewControls({
+    drawing, sectionPlane, containerRef,
+    panelVisible, status, sheetEnabled, activeSheet,
+    isPinned, cachedSheetTransformRef,
+  });
+
+  const { handleMouseDown, handleMouseMove, handleMouseUp, handleMouseLeave, handleMouseEnter } = useMeasure2D({
+    drawing, viewTransform, setViewTransform, sectionAxis: sectionPlane.axis, containerRef,
+    measure2DMode, measure2DStart, measure2DCurrent,
+    measure2DShiftLocked, measure2DLockedAxis,
+    setMeasure2DStart, setMeasure2DCurrent, setMeasure2DShiftLocked,
+    setMeasure2DSnapPoint, cancelMeasure2D, completeMeasure2D,
+  });
+
+  const { formatDistance, handleExportSVG, handlePrint } = useDrawingExport({
+    drawing, displayOptions, sectionPlane, activePresetId,
+    entityColorMap, overridesEnabled, overrideEngine,
+    measure2DResults, sheetEnabled, activeSheet,
+  });
 
-      if (line.visibility === 'hidden') {
-        strokeColor = '#888888';
-        dashArray = '1 0.5';
-        lineWidth *= 0.7;
-      }
-
-      const paperStart = modelToPaper(start.x, start.y);
-      const paperEnd = modelToPaper(end.x, end.y);
-
-      // lineWidth is in mm on paper
-      const svgLineWidth = lineWidth * 0.3;
-      const dashAttr = dashArray ? ` stroke-dasharray="${dashArray}"` : '';
-      svg += `      <line x1="${paperStart.x.toFixed(4)}" y1="${paperStart.y.toFixed(4)}" x2="${paperEnd.x.toFixed(4)}" y2="${paperEnd.y.toFixed(4)}" stroke="${strokeColor}" stroke-width="${svgLineWidth.toFixed(4)}"${dashAttr}/>\n`;
-    }
-    svg += '    </g>\n';
-
-    svg += '  </g>\n\n';
-
-    // Render frame (on top of drawing content)
-    const frameResult = renderFrame(activeSheet.paper, activeSheet.frame);
-    svg += frameResult.svgElements;
-    svg += '\n';
-
-    // Render title block with scale bar and north arrow inside
-    // Pass effectiveScaleFactor from the actual transform (not just configured scale)
-    // This ensures scale bar shows correct values when dynamically scaled
-    const titleBlockExtras: TitleBlockExtras = {
-      scaleBar: activeSheet.scaleBar,
-      northArrow: activeSheet.northArrow,
-      scale: activeSheet.scale,
-      effectiveScaleFactor: scaleFactor,
-    };
-    const titleBlockResult = renderTitleBlock(
-      activeSheet.titleBlock,
-      frameResult.innerBounds,
-      activeSheet.revisions,
-      titleBlockExtras
-    );
-    svg += titleBlockResult.svgElements;
-    svg += '\n';
-
-    svg += '</svg>';
-    return svg;
-  }, [drawing, activeSheet, displayOptions, activePresetId, entityColorMap, overridesEnabled, overrideEngine]);
-
-  // Export SVG
-  const handleExportSVG = useCallback(() => {
-    // Use sheet export if enabled, otherwise raw drawing export
-    const svg = (sheetEnabled && activeSheet) ? generateSheetSVG() : generateExportSVG();
-    if (!svg) return;
-    const blob = new Blob([svg], { type: 'image/svg+xml' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    const filename = (sheetEnabled && activeSheet)
-      ? `${activeSheet.name.replace(/\s+/g, '-')}-${sectionPlane.axis}-${sectionPlane.position}.svg`
-      : `section-${sectionPlane.axis}-${sectionPlane.position}.svg`;
-    a.download = filename;
-    a.click();
-    URL.revokeObjectURL(url);
-  }, [generateExportSVG, generateSheetSVG, sheetEnabled, activeSheet, sectionPlane]);
+  // ═══════════════════════════════════════════════════════════════════════════
+  // CALLBACKS
+  // ═══════════════════════════════════════════════════════════════════════════
 
   // Close panel
   const handleClose = useCallback(() => {
@@ -1788,7 +271,10 @@ export function Section2DPanel({
     setIsPinned((prev) => !prev);
   }, []);
 
-  // Resize handlers
+  // ═══════════════════════════════════════════════════════════════════════════
+  // RESIZE HANDLING
+  // ═══════════════════════════════════════════════════════════════════════════
+
   const handleResizeStart = useCallback((edge: 'right' | 'top' | 'corner') => (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -1856,64 +342,9 @@ export function Section2DPanel({
     };
   }, []);
 
-  // Print handler
-  const handlePrint = useCallback(() => {
-    // Use sheet export if enabled, otherwise raw drawing export
-    const svg = (sheetEnabled && activeSheet) ? generateSheetSVG() : generateExportSVG();
-    if (!svg) return;
-
-    // Create a new window for printing
-    const printWindow = window.open('', '_blank', 'width=800,height=600');
-    if (!printWindow) {
-      alert('Please allow popups to print');
-      return;
-    }
-
-    const title = (sheetEnabled && activeSheet)
-      ? `${activeSheet.name} - ${sectionPlane.axis} at ${sectionPlane.position}%`
-      : `Section Drawing - ${sectionPlane.axis} at ${sectionPlane.position}%`;
-
-    // Write print-friendly HTML with the SVG
-    printWindow.document.write(`
-      <!DOCTYPE html>
-      <html>
-        <head>
-          <title>${title}</title>
-          <style>
-            @media print {
-              @page { margin: ${(sheetEnabled && activeSheet) ? '0' : '1cm'}; }
-              body { margin: 0; }
-            }
-            body {
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              min-height: 100vh;
-              margin: 0;
-              padding: ${(sheetEnabled && activeSheet) ? '0' : '20px'};
-              box-sizing: border-box;
-            }
-            svg {
-              max-width: 100%;
-              max-height: 100vh;
-              width: auto;
-              height: auto;
-            }
-          </style>
-        </head>
-        <body>
-          ${svg}
-          <script>
-            window.onload = function() {
-              window.print();
-              window.onafterprint = function() { window.close(); };
-            };
-          </script>
-        </body>
-      </html>
-    `);
-    printWindow.document.close();
-  }, [generateExportSVG, generateSheetSVG, sheetEnabled, activeSheet, sectionPlane]);
+  // ═══════════════════════════════════════════════════════════════════════════
+  // MEMOIZED STYLES
+  // ═══════════════════════════════════════════════════════════════════════════
 
   // Memoize panel style to avoid creating new object on every render
   const panelStyle = useMemo(() => {
@@ -1925,6 +356,10 @@ export function Section2DPanel({
   // Memoize progress bar style
   const progressBarStyle = useMemo(() => ({ width: `${progress}%` }), [progress]);
 
+  // ═══════════════════════════════════════════════════════════════════════════
+  // RENDER
+  // ═══════════════════════════════════════════════════════════════════════════
+
   if (!panelVisible) return null;
 
   const panelClasses = isExpanded
@@ -2304,1010 +739,3 @@ export function Section2DPanel({
     </div>
   );
 }
-
-// ═══════════════════════════════════════════════════════════════════════════
-// CANVAS RENDERER
-// ═══════════════════════════════════════════════════════════════════════════
-
-// Static style constant to avoid creating new object on every render
-const CANVAS_STYLE = { imageRendering: 'crisp-edges' as const };
-
-interface Measure2DResultData {
-  id: string;
-  start: { x: number; y: number };
-  end: { x: number; y: number };
-  distance: number;
-}
-
-interface Drawing2DCanvasProps {
-  drawing: Drawing2D;
-  transform: { x: number; y: number; scale: number };
-  showHiddenLines: boolean;
-  overrideEngine: GraphicOverrideEngine;
-  overridesEnabled: boolean;
-  entityColorMap: Map<number, [number, number, number, number]>;
-  useIfcMaterials: boolean;
-  // Measure tool props
-  measureMode?: boolean;
-  measureStart?: { x: number; y: number } | null;
-  measureCurrent?: { x: number; y: number } | null;
-  measureResults?: Measure2DResultData[];
-  measureSnapPoint?: { x: number; y: number } | null;
-  // Sheet mode props
-  sheetEnabled?: boolean;
-  activeSheet?: import('@ifc-lite/drawing-2d').DrawingSheet | null;
-  // Section plane info for axis-specific rendering
-  sectionAxis: 'down' | 'front' | 'side';
-  // Pinned mode - keep model fixed in place on sheet
-  isPinned?: boolean;
-  cachedSheetTransformRef?: React.MutableRefObject<{ translateX: number; translateY: number; scaleFactor: number } | null>;
-}
-
-function Drawing2DCanvas({
-  drawing,
-  transform,
-  showHiddenLines,
-  overrideEngine,
-  overridesEnabled,
-  entityColorMap,
-  useIfcMaterials,
-  measureMode = false,
-  measureStart = null,
-  measureCurrent = null,
-  measureResults = [],
-  measureSnapPoint = null,
-  sheetEnabled = false,
-  activeSheet = null,
-  sectionAxis,
-  isPinned = false,
-  cachedSheetTransformRef,
-}: Drawing2DCanvasProps): React.ReactElement {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
-
-  // ResizeObserver to track canvas size changes
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const { width, height } = entry.contentRect;
-        setCanvasSize((prev) => {
-          // Only update if size actually changed to avoid render loops
-          if (prev.width !== width || prev.height !== height) {
-            return { width, height };
-          }
-          return prev;
-        });
-      }
-    });
-
-    resizeObserver.observe(canvas);
-    return () => resizeObserver.disconnect();
-  }, []);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas || canvasSize.width === 0 || canvasSize.height === 0) return;
-
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    // Set canvas size using tracked dimensions
-    const dpr = window.devicePixelRatio || 1;
-    canvas.width = canvasSize.width * dpr;
-    canvas.height = canvasSize.height * dpr;
-    ctx.scale(dpr, dpr);
-
-    // Clear with light gray background (shows paper edge when in sheet mode)
-    ctx.fillStyle = sheetEnabled && activeSheet ? '#e5e5e5' : '#ffffff';
-    ctx.fillRect(0, 0, canvasSize.width, canvasSize.height);
-
-    // ═══════════════════════════════════════════════════════════════════════
-    // SHEET MODE: Render paper, frame, title block, then drawing in viewport
-    // ═══════════════════════════════════════════════════════════════════════
-    if (sheetEnabled && activeSheet) {
-      const paper = activeSheet.paper;
-      const frame = activeSheet.frame;
-      const titleBlock = activeSheet.titleBlock;
-      const viewport = activeSheet.viewportBounds;
-      const scaleBar = activeSheet.scaleBar;
-      const northArrow = activeSheet.northArrow;
-
-      // Helper: convert sheet mm to screen pixels
-      const mmToScreen = (mm: number) => mm * transform.scale;
-      const mmToScreenX = (x: number) => x * transform.scale + transform.x;
-      const mmToScreenY = (y: number) => y * transform.scale + transform.y;
-
-      // ─────────────────────────────────────────────────────────────────────
-      // 1. Draw paper background (white with shadow)
-      // ─────────────────────────────────────────────────────────────────────
-      ctx.save();
-      // Paper shadow
-      ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
-      ctx.shadowBlur = 10 * (transform.scale > 0.5 ? 1 : transform.scale * 2);
-      ctx.shadowOffsetX = 3;
-      ctx.shadowOffsetY = 3;
-      ctx.fillStyle = '#ffffff';
-      ctx.fillRect(
-        mmToScreenX(0),
-        mmToScreenY(0),
-        mmToScreen(paper.widthMm),
-        mmToScreen(paper.heightMm)
-      );
-      ctx.restore();
-
-      // Paper border
-      ctx.strokeStyle = '#cccccc';
-      ctx.lineWidth = 1;
-      ctx.strokeRect(
-        mmToScreenX(0),
-        mmToScreenY(0),
-        mmToScreen(paper.widthMm),
-        mmToScreen(paper.heightMm)
-      );
-
-      // ─────────────────────────────────────────────────────────────────────
-      // 2. Draw frame borders
-      // ─────────────────────────────────────────────────────────────────────
-      const frameLeft = frame.margins.left + frame.margins.bindingMargin;
-      const frameTop = frame.margins.top;
-      const frameRight = paper.widthMm - frame.margins.right;
-      const frameBottom = paper.heightMm - frame.margins.bottom;
-      const frameWidth = frameRight - frameLeft;
-      const frameHeight = frameBottom - frameTop;
-
-      // Outer border
-      ctx.strokeStyle = '#000000';
-      ctx.lineWidth = Math.max(1, mmToScreen(frame.border.outerLineWeight));
-      ctx.strokeRect(
-        mmToScreenX(frameLeft),
-        mmToScreenY(frameTop),
-        mmToScreen(frameWidth),
-        mmToScreen(frameHeight)
-      );
-
-      // Inner border (if gap > 0)
-      if (frame.border.borderGap > 0) {
-        const innerLeft = frameLeft + frame.border.borderGap;
-        const innerTop = frameTop + frame.border.borderGap;
-        const innerWidth = frameWidth - 2 * frame.border.borderGap;
-        const innerHeight = frameHeight - 2 * frame.border.borderGap;
-
-        ctx.lineWidth = Math.max(0.5, mmToScreen(frame.border.innerLineWeight));
-        ctx.strokeRect(
-          mmToScreenX(innerLeft),
-          mmToScreenY(innerTop),
-          mmToScreen(innerWidth),
-          mmToScreen(innerHeight)
-        );
-      }
-
-      // ─────────────────────────────────────────────────────────────────────
-      // 3. Draw title block
-      // ─────────────────────────────────────────────────────────────────────
-      const innerLeft = frameLeft + frame.border.borderGap;
-      const innerTop = frameTop + frame.border.borderGap;
-      const innerWidth = frameWidth - 2 * frame.border.borderGap;
-      const innerHeight = frameHeight - 2 * frame.border.borderGap;
-
-      let tbX: number, tbY: number, tbW: number, tbH: number;
-      switch (titleBlock.position) {
-        case 'bottom-right':
-          tbW = titleBlock.widthMm;
-          tbH = titleBlock.heightMm;
-          tbX = innerLeft + innerWidth - tbW;
-          tbY = innerTop + innerHeight - tbH;
-          break;
-        case 'bottom-full':
-          tbW = innerWidth;
-          tbH = titleBlock.heightMm;
-          tbX = innerLeft;
-          tbY = innerTop + innerHeight - tbH;
-          break;
-        case 'right-strip':
-          tbW = titleBlock.widthMm;
-          tbH = innerHeight;
-          tbX = innerLeft + innerWidth - tbW;
-          tbY = innerTop;
-          break;
-        default:
-          tbW = titleBlock.widthMm;
-          tbH = titleBlock.heightMm;
-          tbX = innerLeft + innerWidth - tbW;
-          tbY = innerTop + innerHeight - tbH;
-      }
-
-      // Title block border
-      ctx.strokeStyle = '#000000';
-      ctx.lineWidth = Math.max(1, mmToScreen(titleBlock.borderWeight));
-      ctx.strokeRect(
-        mmToScreenX(tbX),
-        mmToScreenY(tbY),
-        mmToScreen(tbW),
-        mmToScreen(tbH)
-      );
-
-      // Title block fields - calculate row heights based on font sizes
-      const logoSpace = titleBlock.logo ? 50 : 0;
-      const revisionSpace = titleBlock.showRevisionHistory ? 20 : 0;
-      const availableWidth = tbW - logoSpace - 5;
-      const availableHeight = tbH - revisionSpace - 4;
-      const numCols = 2;
-
-      // Group fields by row
-      const fieldsByRow = new Map<number, typeof titleBlock.fields>();
-      for (const field of titleBlock.fields) {
-        const row = field.row ?? 0;
-        if (!fieldsByRow.has(row)) fieldsByRow.set(row, []);
-        fieldsByRow.get(row)!.push(field);
-      }
-
-      // Calculate minimum height needed for each row based on its largest font
-      const rowCount = Math.max(...Array.from(fieldsByRow.keys()), 0) + 1;
-      const rowHeights: number[] = [];
-      let totalMinHeight = 0;
-
-      for (let r = 0; r < rowCount; r++) {
-        const fields = fieldsByRow.get(r) || [];
-        const maxFontSize = fields.length > 0 ? Math.max(...fields.map(f => f.fontSize)) : 3;
-        const labelSize = Math.min(maxFontSize * 0.5, 2.2);
-        const minRowHeight = labelSize + 1 + maxFontSize + 2;
-        rowHeights.push(minRowHeight);
-        totalMinHeight += minRowHeight;
-      }
-
-      // Scale row heights if they exceed available space
-      const rowScaleFactor = totalMinHeight > availableHeight ? availableHeight / totalMinHeight : 1;
-      const scaledRowHeights = rowHeights.map(h => h * rowScaleFactor);
-
-      const colWidth = availableWidth / numCols;
-      const gridStartX = tbX + logoSpace + 2;
-      const gridStartY = tbY + 2;
-
-      // Calculate row Y positions
-      const rowYPositions: number[] = [gridStartY];
-      for (let i = 0; i < scaledRowHeights.length - 1; i++) {
-        rowYPositions.push(rowYPositions[i] + scaledRowHeights[i]);
-      }
-
-      // Draw grid lines
-      ctx.strokeStyle = '#000000';
-      ctx.lineWidth = Math.max(0.5, mmToScreen(titleBlock.gridWeight));
-
-      // Horizontal lines
-      for (let i = 1; i < rowCount; i++) {
-        const lineY = rowYPositions[i];
-        ctx.beginPath();
-        ctx.moveTo(mmToScreenX(gridStartX), mmToScreenY(lineY));
-        ctx.lineTo(mmToScreenX(gridStartX + availableWidth - 4), mmToScreenY(lineY));
-        ctx.stroke();
-      }
-
-      // Vertical dividers (for rows with multiple columns)
-      for (const [row, fields] of fieldsByRow) {
-        const hasMultipleCols = fields.some(f => (f.colSpan ?? 1) < 2);
-        if (hasMultipleCols) {
-          const centerX = gridStartX + colWidth;
-          const lineY1 = rowYPositions[row];
-          const lineY2 = rowYPositions[row] + scaledRowHeights[row];
-          ctx.beginPath();
-          ctx.moveTo(mmToScreenX(centerX), mmToScreenY(lineY1));
-          ctx.lineTo(mmToScreenX(centerX), mmToScreenY(lineY2));
-          ctx.stroke();
-        }
-      }
-
-      // Render field text - scale proportionally with zoom
-      for (const [row, fields] of fieldsByRow) {
-        const rowY = rowYPositions[row];
-        if (rowY === undefined) continue;
-
-        const rowH = scaledRowHeights[row] ?? 5;
-        const screenRowH = mmToScreen(rowH);
-
-        // Skip if row is too small to be readable
-        if (screenRowH < 4) continue;
-
-        for (const field of fields) {
-          const col = field.col ?? 0;
-          const fieldX = gridStartX + col * colWidth + 1.5;
-
-          // Calculate font sizes in mm (accounting for compressed rows)
-          const effectiveScale = rowScaleFactor < 1 ? rowScaleFactor : 1;
-          const labelFontMm = Math.min(field.fontSize * 0.45, 2.2) * Math.max(effectiveScale, 0.7);
-          const valueFontMm = field.fontSize * Math.max(effectiveScale, 0.7);
-
-          // Convert to screen pixels - scales naturally with zoom
-          const screenLabelFont = mmToScreen(labelFontMm);
-          const screenValueFont = mmToScreen(valueFontMm);
-
-          // Skip if too small to read
-          if (screenLabelFont < 3) continue;
-
-          const screenRowY = mmToScreenY(rowY);
-          const screenFieldX = mmToScreenX(fieldX);
-
-          // Label
-          ctx.font = `${screenLabelFont}px Arial, sans-serif`;
-          ctx.fillStyle = '#666666';
-          ctx.textAlign = 'left';
-          ctx.textBaseline = 'top';
-          ctx.fillText(field.label, screenFieldX, screenRowY + mmToScreen(0.3));
-
-          // Value below label (spacing in mm, converted to screen)
-          const valueY = screenRowY + mmToScreen(labelFontMm + 0.5);
-          ctx.font = `${field.fontWeight === 'bold' ? 'bold ' : ''}${screenValueFont}px Arial, sans-serif`;
-          ctx.fillStyle = '#000000';
-          ctx.fillText(field.value, screenFieldX, valueY);
-        }
-      }
-
-      // ─────────────────────────────────────────────────────────────────────
-      // 4. Clip to viewport and draw model content
-      // ─────────────────────────────────────────────────────────────────────
-      ctx.save();
-
-      // Create clip region for viewport
-      ctx.beginPath();
-      ctx.rect(
-        mmToScreenX(viewport.x),
-        mmToScreenY(viewport.y),
-        mmToScreen(viewport.width),
-        mmToScreen(viewport.height)
-      );
-      ctx.clip();
-
-      // Calculate drawing transform to fit in viewport
-      const drawingBounds = {
-        minX: drawing.bounds.min.x,
-        minY: drawing.bounds.min.y,
-        maxX: drawing.bounds.max.x,
-        maxY: drawing.bounds.max.y,
-      };
-
-      // Axis-specific flipping
-      const flipY = sectionAxis !== 'down';
-      const flipX = sectionAxis === 'side';
-
-      // Use cached transform when pinned, otherwise calculate new one
-      let drawingTransform: { translateX: number; translateY: number; scaleFactor: number };
-
-      if (isPinned && cachedSheetTransformRef?.current) {
-        // Use cached transform to keep model fixed in place
-        drawingTransform = cachedSheetTransformRef.current;
-      } else {
-        // Calculate new transform
-        const baseTransform = calculateDrawingTransform(drawingBounds, viewport, activeSheet.scale);
-
-        // Adjust for axis-specific flipping
-        // calculateDrawingTransform assumes Y-flip (uses maxY), but for 'down' view we don't flip Y
-        drawingTransform = {
-          ...baseTransform,
-          translateY: flipY
-            ? baseTransform.translateY
-            : baseTransform.translateY - (drawingBounds.maxY + drawingBounds.minY) * baseTransform.scaleFactor,
-        };
-
-        // Cache the transform for pinned mode
-        if (cachedSheetTransformRef) {
-          cachedSheetTransformRef.current = drawingTransform;
-        }
-      }
-
-      // Apply combined transform: sheet mm -> screen, then drawing coords -> sheet mm
-      // Drawing coord (meters) * scaleFactor = sheet mm, + translateX/Y
-      // Then sheet mm -> screen via mmToScreenX/Y
-      const drawModelContent = () => {
-        // Determine flip behavior based on section axis
-        // - 'down' (plan view): DON'T flip Y so north (Z+) is up
-        // - 'front' and 'side': flip Y so height (Y+) is up
-        // - 'side': also flip X to look from conventional direction
-
-        // For each polygon/line, transform from model coords to screen coords
-        const modelToScreen = (x: number, y: number) => {
-          // Apply axis-specific flipping
-          const adjustedX = flipX ? -x : x;
-          const adjustedY = flipY ? -y : y;
-          // Model to sheet mm
-          const sheetX = adjustedX * drawingTransform.scaleFactor + drawingTransform.translateX;
-          const sheetY = adjustedY * drawingTransform.scaleFactor + drawingTransform.translateY;
-          // Sheet mm to screen
-          return { x: mmToScreenX(sheetX), y: mmToScreenY(sheetY) };
-        };
-
-        // Line width in screen pixels (convert mm to screen)
-        const mmLineToScreen = (mmWeight: number) => Math.max(0.5, mmToScreen(mmWeight / drawingTransform.scaleFactor * 0.001));
-
-        // Fill cut polygons
-        for (const polygon of drawing.cutPolygons) {
-          let fillColor = getFillColorForType(polygon.ifcType);
-          let opacity = 1;
-
-          if (useIfcMaterials) {
-            const materialColor = entityColorMap.get(polygon.entityId);
-            if (materialColor) {
-              const r = Math.round(materialColor[0] * 255);
-              const g = Math.round(materialColor[1] * 255);
-              const b = Math.round(materialColor[2] * 255);
-              fillColor = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
-              opacity = materialColor[3];
-            }
-          } else if (overridesEnabled) {
-            const elementData: ElementData = {
-              expressId: polygon.entityId,
-              ifcType: polygon.ifcType,
-            };
-            const result = overrideEngine.applyOverrides(elementData);
-            fillColor = result.style.fillColor;
-            opacity = result.style.opacity;
-          }
-
-          ctx.globalAlpha = opacity;
-          ctx.fillStyle = fillColor;
-          ctx.beginPath();
-
-          if (polygon.polygon.outer.length > 0) {
-            const first = modelToScreen(polygon.polygon.outer[0].x, polygon.polygon.outer[0].y);
-            ctx.moveTo(first.x, first.y);
-            for (let i = 1; i < polygon.polygon.outer.length; i++) {
-              const pt = modelToScreen(polygon.polygon.outer[i].x, polygon.polygon.outer[i].y);
-              ctx.lineTo(pt.x, pt.y);
-            }
-            ctx.closePath();
-
-            for (const hole of polygon.polygon.holes) {
-              if (hole.length > 0) {
-                const holeFirst = modelToScreen(hole[0].x, hole[0].y);
-                ctx.moveTo(holeFirst.x, holeFirst.y);
-                for (let i = 1; i < hole.length; i++) {
-                  const pt = modelToScreen(hole[i].x, hole[i].y);
-                  ctx.lineTo(pt.x, pt.y);
-                }
-                ctx.closePath();
-              }
-            }
-          }
-          ctx.fill('evenodd');
-          ctx.globalAlpha = 1;
-        }
-
-        // Stroke polygon outlines
-        for (const polygon of drawing.cutPolygons) {
-          let strokeColor = '#000000';
-          let lineWeight = 0.5;
-
-          if (overridesEnabled) {
-            const elementData: ElementData = {
-              expressId: polygon.entityId,
-              ifcType: polygon.ifcType,
-            };
-            const result = overrideEngine.applyOverrides(elementData);
-            strokeColor = result.style.strokeColor;
-            lineWeight = result.style.lineWeight;
-          }
-
-          ctx.strokeStyle = strokeColor;
-          ctx.lineWidth = Math.max(0.5, mmToScreen(lineWeight) * 0.3);
-          ctx.beginPath();
-
-          if (polygon.polygon.outer.length > 0) {
-            const first = modelToScreen(polygon.polygon.outer[0].x, polygon.polygon.outer[0].y);
-            ctx.moveTo(first.x, first.y);
-            for (let i = 1; i < polygon.polygon.outer.length; i++) {
-              const pt = modelToScreen(polygon.polygon.outer[i].x, polygon.polygon.outer[i].y);
-              ctx.lineTo(pt.x, pt.y);
-            }
-            ctx.closePath();
-
-            for (const hole of polygon.polygon.holes) {
-              if (hole.length > 0) {
-                const holeFirst = modelToScreen(hole[0].x, hole[0].y);
-                ctx.moveTo(holeFirst.x, holeFirst.y);
-                for (let i = 1; i < hole.length; i++) {
-                  const pt = modelToScreen(hole[i].x, hole[i].y);
-                  ctx.lineTo(pt.x, pt.y);
-                }
-                ctx.closePath();
-              }
-            }
-          }
-          ctx.stroke();
-        }
-
-        // Draw lines (projection, silhouette, etc.)
-        const lineBounds = drawing.bounds;
-        const lineMargin = Math.max(lineBounds.max.x - lineBounds.min.x, lineBounds.max.y - lineBounds.min.y) * 0.5;
-        const lineMinX = lineBounds.min.x - lineMargin;
-        const lineMaxX = lineBounds.max.x + lineMargin;
-        const lineMinY = lineBounds.min.y - lineMargin;
-        const lineMaxY = lineBounds.max.y + lineMargin;
-
-        for (const line of drawing.lines) {
-          if (line.category === 'cut') continue;
-          if (!showHiddenLines && line.visibility === 'hidden') continue;
-
-          const { start, end } = line.line;
-          if (!isFinite(start.x) || !isFinite(start.y) || !isFinite(end.x) || !isFinite(end.y)) continue;
-          if (start.x < lineMinX || start.x > lineMaxX || start.y < lineMinY || start.y > lineMaxY ||
-            end.x < lineMinX || end.x > lineMaxX || end.y < lineMinY || end.y > lineMaxY) continue;
-
-          let strokeColor = '#000000';
-          let lineWidth = 0.25;
-          let dashPattern: number[] = [];
-
-          switch (line.category) {
-            case 'projection': lineWidth = 0.25; break;
-            case 'hidden': lineWidth = 0.18; strokeColor = '#666666'; dashPattern = [4, 2]; break;
-            case 'silhouette': lineWidth = 0.35; break;
-            case 'crease': lineWidth = 0.18; break;
-            case 'boundary': lineWidth = 0.25; break;
-            case 'annotation': lineWidth = 0.13; break;
-          }
-
-          if (line.visibility === 'hidden') {
-            strokeColor = '#888888';
-            dashPattern = [4, 2];
-            lineWidth *= 0.7;
-          }
-
-          ctx.strokeStyle = strokeColor;
-          ctx.lineWidth = Math.max(0.5, mmToScreen(lineWidth) * 0.3);
-          ctx.setLineDash(dashPattern);
-
-          const screenStart = modelToScreen(start.x, start.y);
-          const screenEnd = modelToScreen(end.x, end.y);
-
-          ctx.beginPath();
-          ctx.moveTo(screenStart.x, screenStart.y);
-          ctx.lineTo(screenEnd.x, screenEnd.y);
-          ctx.stroke();
-          ctx.setLineDash([]);
-        }
-      };
-
-      drawModelContent();
-      ctx.restore();
-
-      // ─────────────────────────────────────────────────────────────────────
-      // 6. Draw scale bar at BOTTOM LEFT of title block
-      // Uses actual drawingTransform.scaleFactor which accounts for dynamic scaling
-      // ─────────────────────────────────────────────────────────────────────
-      if (scaleBar.visible && tbH > 10) {
-        // Position: bottom left with small margin
-        const sbX = tbX + 3;
-        const sbY = tbY + tbH - 8; // 8mm from bottom (leaves room for label)
-
-        // Calculate effective scale from the actual drawing transform
-        // scaleFactor = mm per meter, so effective scale ratio = 1000 / scaleFactor
-        const effectiveScaleFactor = drawingTransform.scaleFactor;
-
-        // Scale bar length: we want to show a nice round number of meters
-        // Calculate how many mm on paper for the desired real-world length
-        const maxBarWidth = Math.min(tbW * 0.3, 50); // Max 30% of width or 50mm
-
-        // Find a nice round length that fits
-        // Start with the configured length and adjust if needed
-        let targetLengthM = scaleBar.totalLengthM;
-        let sbLengthMm = targetLengthM * effectiveScaleFactor;
-
-        // If bar would be too long, reduce the target length
-        while (sbLengthMm > maxBarWidth && targetLengthM > 0.5) {
-          targetLengthM = targetLengthM / 2;
-          sbLengthMm = targetLengthM * effectiveScaleFactor;
-        }
-
-        // If bar would be too short, increase the target length
-        while (sbLengthMm < maxBarWidth * 0.3 && targetLengthM < 100) {
-          targetLengthM = targetLengthM * 2;
-          sbLengthMm = targetLengthM * effectiveScaleFactor;
-        }
-
-        // Clamp to max width
-        sbLengthMm = Math.min(sbLengthMm, maxBarWidth);
-
-        // Actual length represented by the bar
-        const actualTotalLength = sbLengthMm / effectiveScaleFactor;
-
-        const sbHeight = Math.min(scaleBar.heightMm, 3);
-
-        // Scale bar divisions
-        const divisions = scaleBar.primaryDivisions;
-        const divWidth = sbLengthMm / divisions;
-        for (let i = 0; i < divisions; i++) {
-          ctx.fillStyle = i % 2 === 0 ? scaleBar.fillColor : '#ffffff';
-          ctx.fillRect(
-            mmToScreenX(sbX + i * divWidth),
-            mmToScreenY(sbY),
-            mmToScreen(divWidth),
-            mmToScreen(sbHeight)
-          );
-        }
-
-        // Scale bar border
-        ctx.strokeStyle = scaleBar.strokeColor;
-        ctx.lineWidth = Math.max(1, mmToScreen(scaleBar.lineWeight));
-        ctx.strokeRect(
-          mmToScreenX(sbX),
-          mmToScreenY(sbY),
-          mmToScreen(sbLengthMm),
-          mmToScreen(sbHeight)
-        );
-
-        // Distance labels - only at 0 and end
-        const labelFontSize = Math.max(7, mmToScreen(1.8));
-        ctx.font = `${labelFontSize}px Arial, sans-serif`;
-        ctx.fillStyle = '#000000';
-        ctx.textBaseline = 'top';
-        const labelScreenY = mmToScreenY(sbY + sbHeight) + 1;
-
-        ctx.textAlign = 'left';
-        ctx.fillText('0', mmToScreenX(sbX), labelScreenY);
-
-        ctx.textAlign = 'right';
-        const endLabel = actualTotalLength < 1
-          ? `${(actualTotalLength * 100).toFixed(0)}cm`
-          : `${actualTotalLength.toFixed(0)}m`;
-        ctx.fillText(endLabel, mmToScreenX(sbX + sbLengthMm), labelScreenY);
-      }
-
-      // ─────────────────────────────────────────────────────────────────────
-      // 7. Draw north arrow at BOTTOM RIGHT of title block
-      // ─────────────────────────────────────────────────────────────────────
-      if (northArrow.style !== 'none' && tbH > 10) {
-        // Position: bottom right with margin
-        const naSize = Math.min(northArrow.sizeMm, 8, tbH * 0.6);
-        const naX = tbX + tbW - naSize - 5; // Right side with margin
-        const naY = tbY + tbH - naSize / 2 - 3; // Bottom with margin
-
-        ctx.save();
-        ctx.translate(mmToScreenX(naX), mmToScreenY(naY));
-        ctx.rotate((northArrow.rotation * Math.PI) / 180);
-
-        // Draw arrow
-        const arrowLen = mmToScreen(naSize);
-        ctx.fillStyle = '#000000';
-        ctx.beginPath();
-        ctx.moveTo(0, -arrowLen / 2);
-        ctx.lineTo(-arrowLen / 6, arrowLen / 2);
-        ctx.lineTo(0, arrowLen / 3);
-        ctx.lineTo(arrowLen / 6, arrowLen / 2);
-        ctx.closePath();
-        ctx.fill();
-
-        // Draw "N" label
-        const nFontSize = Math.max(8, mmToScreen(2.5));
-        ctx.font = `bold ${nFontSize}px Arial, sans-serif`;
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'bottom';
-        ctx.fillText('N', 0, -arrowLen / 2 - 1);
-
-        ctx.restore();
-      }
-
-    } else {
-      // ═══════════════════════════════════════════════════════════════════════
-      // NON-SHEET MODE: Original rendering (drawing coords -> screen)
-      // ═══════════════════════════════════════════════════════════════════════
-
-      // Apply transform with axis-specific flipping
-      // - 'down' (plan view): DON'T flip Y so north (Z+) is up
-      // - 'front' and 'side': flip Y so height (Y+) is up
-      // - 'side': also flip X to look from conventional direction
-      const scaleX = sectionAxis === 'side' ? -transform.scale : transform.scale;
-      const scaleY = sectionAxis === 'down' ? transform.scale : -transform.scale;
-
-      ctx.save();
-      ctx.translate(transform.x, transform.y);
-      ctx.scale(scaleX, scaleY);
-
-      // ═══════════════════════════════════════════════════════════════════════
-      // 1. FILL CUT POLYGONS (with color from IFC materials, override engine, or type fallback)
-      // ═══════════════════════════════════════════════════════════════════════
-      for (const polygon of drawing.cutPolygons) {
-        // Get fill color - priority: IFC materials > override engine > IFC type fallback
-        let fillColor = getFillColorForType(polygon.ifcType);
-        let strokeColor = '#000000';
-        let opacity = 1;
-
-        // Use actual IFC material colors from the mesh data
-        if (useIfcMaterials) {
-          const materialColor = entityColorMap.get(polygon.entityId);
-          if (materialColor) {
-            // Convert RGBA [0-1] to hex color
-            const r = Math.round(materialColor[0] * 255);
-            const g = Math.round(materialColor[1] * 255);
-            const b = Math.round(materialColor[2] * 255);
-            fillColor = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
-            opacity = materialColor[3];
-          }
-        } else if (overridesEnabled) {
-          const elementData: ElementData = {
-            expressId: polygon.entityId,
-            ifcType: polygon.ifcType,
-          };
-          const result = overrideEngine.applyOverrides(elementData);
-          fillColor = result.style.fillColor;
-          strokeColor = result.style.strokeColor;
-          opacity = result.style.opacity;
-        }
-
-        ctx.globalAlpha = opacity;
-        ctx.fillStyle = fillColor;
-        ctx.beginPath();
-        if (polygon.polygon.outer.length > 0) {
-          ctx.moveTo(polygon.polygon.outer[0].x, polygon.polygon.outer[0].y);
-          for (let i = 1; i < polygon.polygon.outer.length; i++) {
-            ctx.lineTo(polygon.polygon.outer[i].x, polygon.polygon.outer[i].y);
-          }
-          ctx.closePath();
-
-          // Draw holes (inner boundaries)
-          for (const hole of polygon.polygon.holes) {
-            if (hole.length > 0) {
-              ctx.moveTo(hole[0].x, hole[0].y);
-              for (let i = 1; i < hole.length; i++) {
-                ctx.lineTo(hole[i].x, hole[i].y);
-              }
-              ctx.closePath();
-            }
-          }
-        }
-        ctx.fill('evenodd');
-        ctx.globalAlpha = 1;
-      }
-
-      // ═══════════════════════════════════════════════════════════════════════
-      // 2. STROKE CUT POLYGON OUTLINES (with color from override engine)
-      // ═══════════════════════════════════════════════════════════════════════
-      for (const polygon of drawing.cutPolygons) {
-        let strokeColor = '#000000';
-        let lineWeight = 0.5;
-
-        if (overridesEnabled) {
-          const elementData: ElementData = {
-            expressId: polygon.entityId,
-            ifcType: polygon.ifcType,
-          };
-          const result = overrideEngine.applyOverrides(elementData);
-          strokeColor = result.style.strokeColor;
-          lineWeight = result.style.lineWeight;
-        }
-
-        ctx.strokeStyle = strokeColor;
-        ctx.lineWidth = lineWeight / transform.scale;
-        ctx.beginPath();
-        if (polygon.polygon.outer.length > 0) {
-          ctx.moveTo(polygon.polygon.outer[0].x, polygon.polygon.outer[0].y);
-          for (let i = 1; i < polygon.polygon.outer.length; i++) {
-            ctx.lineTo(polygon.polygon.outer[i].x, polygon.polygon.outer[i].y);
-          }
-          ctx.closePath();
-
-          // Stroke holes too
-          for (const hole of polygon.polygon.holes) {
-            if (hole.length > 0) {
-              ctx.moveTo(hole[0].x, hole[0].y);
-              for (let i = 1; i < hole.length; i++) {
-                ctx.lineTo(hole[i].x, hole[i].y);
-              }
-              ctx.closePath();
-            }
-          }
-        }
-        ctx.stroke();
-      }
-
-      // ═══════════════════════════════════════════════════════════════════════
-      // 3. DRAW PROJECTION/SILHOUETTE LINES (skip 'cut' - already in polygons)
-      // ═══════════════════════════════════════════════════════════════════════
-      // Pre-compute bounds for line validation
-      const lineBounds = drawing.bounds;
-      const lineMargin = Math.max(lineBounds.max.x - lineBounds.min.x, lineBounds.max.y - lineBounds.min.y) * 0.5;
-      const lineMinX = lineBounds.min.x - lineMargin;
-      const lineMaxX = lineBounds.max.x + lineMargin;
-      const lineMinY = lineBounds.min.y - lineMargin;
-      const lineMaxY = lineBounds.max.y + lineMargin;
-
-      for (const line of drawing.lines) {
-        // Skip 'cut' lines - they're triangulation edges, already handled by polygons
-        if (line.category === 'cut') continue;
-
-        // Skip hidden lines if not showing
-        if (!showHiddenLines && line.visibility === 'hidden') continue;
-
-        // Skip lines with invalid coordinates (NaN, Infinity, or far outside bounds)
-        const { start, end } = line.line;
-        if (!isFinite(start.x) || !isFinite(start.y) || !isFinite(end.x) || !isFinite(end.y)) {
-          continue;
-        }
-        if (start.x < lineMinX || start.x > lineMaxX || start.y < lineMinY || start.y > lineMaxY ||
-          end.x < lineMinX || end.x > lineMaxX || end.y < lineMinY || end.y > lineMaxY) {
-          continue;
-        }
-
-        // Set line style based on category
-        let strokeColor = '#000000';
-        let lineWidth = 0.25;
-        let dashPattern: number[] = [];
-
-        switch (line.category) {
-          case 'projection':
-            lineWidth = 0.25;
-            strokeColor = '#000000';
-            break;
-          case 'hidden':
-            lineWidth = 0.18;
-            strokeColor = '#666666';
-            dashPattern = [2, 1];
-            break;
-          case 'silhouette':
-            lineWidth = 0.35;
-            strokeColor = '#000000';
-            break;
-          case 'crease':
-            lineWidth = 0.18;
-            strokeColor = '#000000';
-            break;
-          case 'boundary':
-            lineWidth = 0.25;
-            strokeColor = '#000000';
-            break;
-          case 'annotation':
-            lineWidth = 0.13;
-            strokeColor = '#000000';
-            break;
-        }
-
-        // Hidden visibility overrides
-        if (line.visibility === 'hidden') {
-          strokeColor = '#888888';
-          dashPattern = [2, 1];
-          lineWidth *= 0.7;
-        }
-
-        ctx.strokeStyle = strokeColor;
-        ctx.lineWidth = lineWidth / transform.scale;
-        ctx.setLineDash(dashPattern.map((d) => d / transform.scale));
-
-        ctx.beginPath();
-        ctx.moveTo(line.line.start.x, line.line.start.y);
-        ctx.lineTo(line.line.end.x, line.line.end.y);
-        ctx.stroke();
-
-        ctx.setLineDash([]);
-      }
-
-      ctx.restore();
-    }
-
-    // ═══════════════════════════════════════════════════════════════════════
-    // 4. RENDER MEASUREMENTS (in screen space)
-    // ═══════════════════════════════════════════════════════════════════════
-    const drawMeasureLine = (
-      start: { x: number; y: number },
-      end: { x: number; y: number },
-      distance: number,
-      color: string = '#2196F3',
-      isActive: boolean = false
-    ) => {
-      // Convert drawing coords to screen coords with axis-specific transforms
-      const measureScaleX = sectionAxis === 'side' ? -transform.scale : transform.scale;
-      const measureScaleY = sectionAxis === 'down' ? transform.scale : -transform.scale;
-      const screenStart = {
-        x: start.x * measureScaleX + transform.x,
-        y: start.y * measureScaleY + transform.y,
-      };
-      const screenEnd = {
-        x: end.x * measureScaleX + transform.x,
-        y: end.y * measureScaleY + transform.y,
-      };
-
-      // Draw line
-      ctx.strokeStyle = color;
-      ctx.lineWidth = isActive ? 2 : 1.5;
-      ctx.setLineDash(isActive ? [6, 3] : []);
-      ctx.beginPath();
-      ctx.moveTo(screenStart.x, screenStart.y);
-      ctx.lineTo(screenEnd.x, screenEnd.y);
-      ctx.stroke();
-      ctx.setLineDash([]);
-
-      // Draw endpoints
-      ctx.fillStyle = color;
-      const endpointRadius = isActive ? 5 : 4;
-      ctx.beginPath();
-      ctx.arc(screenStart.x, screenStart.y, endpointRadius, 0, Math.PI * 2);
-      ctx.fill();
-      ctx.beginPath();
-      ctx.arc(screenEnd.x, screenEnd.y, endpointRadius, 0, Math.PI * 2);
-      ctx.fill();
-
-      // Draw distance label
-      const midX = (screenStart.x + screenEnd.x) / 2;
-      const midY = (screenStart.y + screenEnd.y) / 2;
-
-      // Format distance (assuming meters, convert to readable units)
-      let labelText: string;
-      if (distance < 0.01) {
-        labelText = `${(distance * 1000).toFixed(1)} mm`;
-      } else if (distance < 1) {
-        labelText = `${(distance * 100).toFixed(1)} cm`;
-      } else {
-        labelText = `${distance.toFixed(3)} m`;
-      }
-
-      // Background for label
-      ctx.font = '12px system-ui, sans-serif';
-      const textMetrics = ctx.measureText(labelText);
-      const padding = 4;
-      const bgWidth = textMetrics.width + padding * 2;
-      const bgHeight = 18;
-
-      ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
-      ctx.fillRect(midX - bgWidth / 2, midY - bgHeight / 2, bgWidth, bgHeight);
-      ctx.strokeStyle = color;
-      ctx.lineWidth = 1;
-      ctx.strokeRect(midX - bgWidth / 2, midY - bgHeight / 2, bgWidth, bgHeight);
-
-      // Text
-      ctx.fillStyle = '#000000';
-      ctx.textAlign = 'center';
-      ctx.textBaseline = 'middle';
-      ctx.fillText(labelText, midX, midY);
-    };
-
-    // Draw completed measurements
-    for (const result of measureResults) {
-      drawMeasureLine(result.start, result.end, result.distance, '#2196F3', false);
-    }
-
-    // Draw active measurement
-    if (measureStart && measureCurrent) {
-      const dx = measureCurrent.x - measureStart.x;
-      const dy = measureCurrent.y - measureStart.y;
-      const distance = Math.sqrt(dx * dx + dy * dy);
-      drawMeasureLine(measureStart, measureCurrent, distance, '#FF5722', true);
-    }
-
-    // Draw snap indicator
-    if (measureMode && measureSnapPoint) {
-      // Use axis-specific transforms (matching canvas rendering)
-      const snapScaleX = sectionAxis === 'side' ? -transform.scale : transform.scale;
-      const snapScaleY = sectionAxis === 'down' ? transform.scale : -transform.scale;
-      const screenSnap = {
-        x: measureSnapPoint.x * snapScaleX + transform.x,
-        y: measureSnapPoint.y * snapScaleY + transform.y,
-      };
-
-      // Draw snap crosshair
-      ctx.strokeStyle = '#4CAF50';
-      ctx.lineWidth = 1.5;
-      const snapSize = 12;
-
-      ctx.beginPath();
-      ctx.moveTo(screenSnap.x - snapSize, screenSnap.y);
-      ctx.lineTo(screenSnap.x + snapSize, screenSnap.y);
-      ctx.stroke();
-
-      ctx.beginPath();
-      ctx.moveTo(screenSnap.x, screenSnap.y - snapSize);
-      ctx.lineTo(screenSnap.x, screenSnap.y + snapSize);
-      ctx.stroke();
-
-      // Draw snap circle
-      ctx.beginPath();
-      ctx.arc(screenSnap.x, screenSnap.y, 6, 0, Math.PI * 2);
-      ctx.stroke();
-    }
-  }, [drawing, transform, showHiddenLines, canvasSize, overrideEngine, overridesEnabled, entityColorMap, useIfcMaterials, measureMode, measureStart, measureCurrent, measureResults, measureSnapPoint, sheetEnabled, activeSheet, sectionAxis, isPinned]);
-
-  return (
-    <canvas
-      ref={canvasRef}
-      className="w-full h-full"
-      style={CANVAS_STYLE}
-    />
-  );
-}