@ifc-lite/viewer 1.14.0 → 1.14.1

package/src/components/viewer/useGeometryStreaming.ts

@@ -15,6 +15,9 @@ export interface UseGeometryStreamingParams {
   rendererRef: MutableRefObject<Renderer | null>;
   isInitialized: boolean;
   geometry: MeshData[] | null;
+  /** Monotonic counter — triggers the streaming effect even when the geometry
+   *  array reference is stable (incremental filtering reuses the same array). */
+  geometryVersion?: number;
   coordinateInfo?: CoordinateInfo;
   isStreaming: boolean;
   geometryBoundsRef: MutableRefObject<{ min: { x: number; y: number; z: number }; max: { x: number; y: number; z: number } }>;
@@ -31,6 +34,7 @@ export function useGeometryStreaming(params: UseGeometryStreamingParams): void {
     rendererRef,
     isInitialized,
     geometry,
+    geometryVersion,
     coordinateInfo,
     isStreaming,
     geometryBoundsRef,
@@ -49,6 +53,11 @@ export function useGeometryStreaming(params: UseGeometryStreamingParams): void {
   const cameraFittedRef = useRef<boolean>(false);
   const finalBoundsRefittedRef = useRef<boolean>(false); // Track if we've refitted after streaming
 
+  // Track camera state after initial fit to detect user interaction during streaming.
+  // If user orbits/pans/zooms during streaming, we preserve their position at completion
+  // instead of snapping back to the computed view. Bounds still update for "home" etc.
+  const cameraStateAfterFitRef = useRef<{ px: number; py: number; pz: number; tx: number; ty: number; tz: number } | null>(null);
+
   // Render throttling during streaming
   const lastStreamRenderTimeRef = useRef<number>(0);
   const STREAM_RENDER_THROTTLE_MS = 200; // Render at most every 200ms during streaming
@@ -65,6 +74,7 @@ export function useGeometryStreaming(params: UseGeometryStreamingParams): void {
         processedMeshIdsRef.current.clear();
         cameraFittedRef.current = false;
         finalBoundsRefittedRef.current = false;
+        cameraStateAfterFitRef.current = null;
         // Clear scene if renderer is ready
         if (renderer && isInitialized) {
           renderer.getScene().clear();
@@ -110,6 +120,7 @@ export function useGeometryStreaming(params: UseGeometryStreamingParams): void {
       processedMeshIdsRef.current.clear();
       cameraFittedRef.current = false;
       finalBoundsRefittedRef.current = false;
+      cameraStateAfterFitRef.current = null;
       lastGeometryLengthRef.current = 0;
       lastGeometryRef.current = geometry;
       // Reset camera state (clear orbit pivot, stop inertia, cancel animations)
@@ -139,6 +150,7 @@ export function useGeometryStreaming(params: UseGeometryStreamingParams): void {
         processedMeshIdsRef.current.clear();
         cameraFittedRef.current = false;
         finalBoundsRefittedRef.current = false;
+        cameraStateAfterFitRef.current = null;
         lastGeometryLengthRef.current = 0;
         lastGeometryRef.current = geometry;
         // Reset camera state
@@ -150,45 +162,86 @@ export function useGeometryStreaming(params: UseGeometryStreamingParams): void {
         };
       }
     } else if (currentLength === lastLength) {
-      // No geometry change - but check if we need to update bounds when streaming completes
-      if (cameraFittedRef.current && !isStreaming && !finalBoundsRefittedRef.current && coordinateInfo?.shiftedBounds) {
-        const shiftedBounds = coordinateInfo.shiftedBounds;
-        const newMaxSize = Math.max(
-          shiftedBounds.max.x - shiftedBounds.min.x,
-          shiftedBounds.max.y - shiftedBounds.min.y,
-          shiftedBounds.max.z - shiftedBounds.min.z
+      // No geometry change — update bounds when streaming completes.
+      // Two behaviours depending on user camera interaction:
+      //   • User hasn't touched the camera → refit to final bounds (fixes models
+      //     whose first-batch bounds were too tight / off-centre).
+      //   • User HAS orbited/panned/zoomed → preserve their position; just store
+      //     the final bounds so "Home" / zoom-to-fit still work correctly.
+      if (cameraFittedRef.current && !isStreaming && !finalBoundsRefittedRef.current) {
+        // Compute EXACT bounds from all geometry vertices.
+        // coordinateInfo.shiftedBounds uses fast vertex-sampling (first+last vertex per mesh)
+        // which can miss the true extremes — e.g., a 22-storey building whose highest vertices
+        // are mid-buffer gets truncated bounds.  Scanning all vertices here is ~15 ms for 3 M
+        // vertices and only runs once at streaming completion.
+        const MAX_VALID_COORD = 10000;
+        const exactBounds = {
+          min: { x: Infinity, y: Infinity, z: Infinity },
+          max: { x: -Infinity, y: -Infinity, z: -Infinity },
+        };
+        for (let gi = 0; gi < geometry.length; gi++) {
+          const positions = geometry[gi].positions;
+          for (let i = 0; i < positions.length; i += 3) {
+            const x = positions[i];
+            const y = positions[i + 1];
+            const z = positions[i + 2];
+            if (Math.abs(x) < MAX_VALID_COORD && Math.abs(y) < MAX_VALID_COORD && Math.abs(z) < MAX_VALID_COORD) {
+              if (x < exactBounds.min.x) exactBounds.min.x = x;
+              if (y < exactBounds.min.y) exactBounds.min.y = y;
+              if (z < exactBounds.min.z) exactBounds.min.z = z;
+              if (x > exactBounds.max.x) exactBounds.max.x = x;
+              if (y > exactBounds.max.y) exactBounds.max.y = y;
+              if (z > exactBounds.max.z) exactBounds.max.z = z;
+            }
+          }
+        }
+
+        const exactMaxSize = Math.max(
+          exactBounds.max.x - exactBounds.min.x,
+          exactBounds.max.y - exactBounds.min.y,
+          exactBounds.max.z - exactBounds.min.z
         );
 
-        if (newMaxSize > 0 && Number.isFinite(newMaxSize)) {
-          // Only refit camera for LARGE models (>1000 meshes) where geometry streamed in multiple batches
-          // Small models complete in one batch, so their initial camera fit is already correct
-          const isLargeModel = geometry.length > 1000;
-
-          if (isLargeModel) {
-            const oldBounds = geometryBoundsRef.current;
-            const oldMaxSize = Math.max(
-              oldBounds.max.x - oldBounds.min.x,
-              oldBounds.max.y - oldBounds.min.y,
-              oldBounds.max.z - oldBounds.min.z
-            );
-
-            // Refit camera if bounds expanded significantly (>10% larger)
-            // This handles skyscrapers where upper floors arrive in later batches
-            const boundsExpanded = newMaxSize > oldMaxSize * 1.1;
-
-            if (boundsExpanded) {
-              renderer.getCamera().fitToBounds(shiftedBounds.min, shiftedBounds.max);
-            }
+        if (exactBounds.min.x !== Infinity && exactMaxSize > 0 && Number.isFinite(exactMaxSize)) {
+          // Detect whether the user moved the camera during streaming
+          const snap = cameraStateAfterFitRef.current;
+          let userMovedCamera = false;
+          if (snap) {
+            const pos = renderer.getCamera().getPosition();
+            const tgt = renderer.getCamera().getTarget();
+            const EPS = 0.5; // half a metre — ignores floating-point jitter
+            userMovedCamera =
+              Math.abs(pos.x - snap.px) > EPS || Math.abs(pos.y - snap.py) > EPS || Math.abs(pos.z - snap.pz) > EPS ||
+              Math.abs(tgt.x - snap.tx) > EPS || Math.abs(tgt.y - snap.ty) > EPS || Math.abs(tgt.z - snap.tz) > EPS;
           }
 
-          // Always update bounds for accurate zoom-to-fit, home view, etc.
-          geometryBoundsRef.current = { min: { ...shiftedBounds.min }, max: { ...shiftedBounds.max } };
+          if (!userMovedCamera) {
+            // User hasn't interacted — refit to exact full bounds
+            renderer.getCamera().fitToBounds(exactBounds.min, exactBounds.max);
+          }
+
+          // Always update stored bounds for Home / zoom-to-fit
+          geometryBoundsRef.current = { min: { ...exactBounds.min }, max: { ...exactBounds.max } };
           finalBoundsRefittedRef.current = true;
         }
       }
       return;
     }
 
+    // Detect post-streaming type visibility toggle: geometry grew while NOT streaming.
+    // The filtered array was rebuilt from scratch (spaces/openings/site toggled ON),
+    // with new meshes interleaved throughout — not just appended at the end.
+    // We must clear the scene and re-add ALL meshes.
+    // Distinguish from streaming-completion (prevIsStreaming→!isStreaming) where new
+    // meshes ARE appended at the end and scene should NOT be cleared.
+    if (isIncremental && !isStreaming && !prevIsStreamingRef.current) {
+      scene.clear();
+      processedMeshIdsRef.current.clear();
+      // Don't reset camera or bounds — user just toggled visibility
+      lastGeometryLengthRef.current = 0;
+      lastGeometryRef.current = geometry;
+    }
+
     // For incremental batches: update reference and continue to add new meshes
     if (isIncremental) {
       lastGeometryRef.current = geometry;
@@ -196,28 +249,37 @@ export function useGeometryStreaming(params: UseGeometryStreamingParams): void {
       lastGeometryRef.current = geometry;
     }
 
-    // FIX: When not streaming (type visibility toggle), new meshes can be ANYWHERE in the array,
-    // not just at the end. During streaming, new meshes ARE appended, so slice is safe.
-    // After streaming completes, filter changes can insert meshes at any position.
-    const meshesToAdd = isStreaming
-      ? geometry.slice(lastGeometryLengthRef.current)  // Streaming: new meshes at end
-      : geometry;  // Post-streaming: scan entire array for unprocessed meshes
-
-    // Filter out already processed meshes
-    // NOTE: Multiple meshes can share the same expressId AND same color (e.g., door inner framing pieces),
-    // so we use expressId + array index as a compound key to ensure all submeshes are processed.
-    const newMeshes: MeshData[] = [];
-    const startIndex = isStreaming ? lastGeometryLengthRef.current : 0;
-    for (let i = 0; i < meshesToAdd.length; i++) {
-      const meshData = meshesToAdd[i];
-      // Use expressId + global array index as key to ensure each mesh is unique
-      // (same expressId can have multiple submeshes with same color, e.g., door framing)
-      const globalIndex = startIndex + i;
-      const compoundKey = `${meshData.expressId}:${globalIndex}`;
-
-      if (!processedMeshIdsRef.current.has(compoundKey)) {
-        newMeshes.push(meshData);
-        processedMeshIdsRef.current.add(compoundKey);
+    // PERF: During streaming, new meshes are ALWAYS appended at the end.
+    // Skip the compound key dedup (208K string allocations + Set lookups)
+    // and array copy (.slice()). Use index-based iteration directly.
+    //
+    // FIX: Use fast path for incremental appends too (not just streaming).
+    // When streaming completes, isStreaming becomes false in the same render as the
+    // final appendGeometryBatch. The slow path would re-add ALL meshes because
+    // processedMeshIdsRef was never populated during streaming, causing double geometry.
+    // For visibility toggles, lastGeometryLengthRef was reset to 0 above, so the
+    // fast path naturally starts from 0 (adding ALL meshes after scene.clear).
+    let newMeshes: MeshData[];
+    if (isStreaming || isIncremental) {
+      // Fast path: iterate from lastLength directly
+      // During streaming: new meshes appended at end, start = previous length
+      // After visibility toggle: scene was cleared, start = 0, adds everything
+      const start = lastGeometryLengthRef.current;
+      newMeshes = [];
+      for (let i = start; i < geometry.length; i++) {
+        newMeshes.push(geometry[i]);
+      }
+    } else {
+      // Slow path: scan entire array for unprocessed meshes
+      // Only used when array was fully rebuilt (not incremental)
+      newMeshes = [];
+      for (let i = 0; i < geometry.length; i++) {
+        const meshData = geometry[i];
+        const compoundKey = `${meshData.expressId}:${i}`;
+        if (!processedMeshIdsRef.current.has(compoundKey)) {
+          newMeshes.push(meshData);
+          processedMeshIdsRef.current.add(compoundKey);
+        }
       }
     }
 
@@ -294,6 +356,10 @@ export function useGeometryStreaming(params: UseGeometryStreamingParams): void {
         renderer.getCamera().fitToBounds(shiftedBounds.min, shiftedBounds.max);
         geometryBoundsRef.current = { min: { ...shiftedBounds.min }, max: { ...shiftedBounds.max } };
         cameraFittedRef.current = true;
+        // Snapshot camera state so we can detect user interaction during streaming
+        const pos = renderer.getCamera().getPosition();
+        const tgt = renderer.getCamera().getTarget();
+        cameraStateAfterFitRef.current = { px: pos.x, py: pos.y, pz: pos.z, tx: tgt.x, ty: tgt.y, tz: tgt.z };
       }
     } else if (!cameraFittedRef.current && geometry.length > 0 && !isStreaming) {
       // Fallback: calculate bounds from geometry array (only when streaming is complete)
@@ -336,6 +402,9 @@ export function useGeometryStreaming(params: UseGeometryStreamingParams): void {
         renderer.getCamera().fitToBounds(fallbackBounds.min, fallbackBounds.max);
         geometryBoundsRef.current = fallbackBounds;
         cameraFittedRef.current = true;
+        const pos = renderer.getCamera().getPosition();
+        const tgt = renderer.getCamera().getTarget();
+        cameraStateAfterFitRef.current = { px: pos.x, py: pos.y, pz: pos.z, tx: tgt.x, ty: tgt.y, tz: tgt.z };
       }
     }
 
@@ -351,10 +420,12 @@ export function useGeometryStreaming(params: UseGeometryStreamingParams): void {
     const shouldRender = !isStreaming || timeSinceLastRender >= STREAM_RENDER_THROTTLE_MS;
 
     if (shouldRender) {
-      renderer.render();
+      renderer.render({
+        clearColor: clearColorRef.current,
+      });
       lastStreamRenderTimeRef.current = now;
     }
-  }, [geometry, coordinateInfo, isInitialized, isStreaming]);
+  }, [geometry, geometryVersion, coordinateInfo, isInitialized, isStreaming]);
 
   // Force render when streaming completes (progress goes from <100% to 100% or null)
   const prevIsStreamingRef = useRef(isStreaming);
@@ -368,12 +439,75 @@ export function useGeometryStreaming(params: UseGeometryStreamingParams): void {
       const pipeline = renderer.getPipeline();
       const scene = renderer.getScene();
 
-      // Finalize streaming: destroy temporary fragments and do one O(N) full merge
+      // Finalize streaming: destroy temporary fragments and do one O(N) full merge.
+      // Must run synchronously BEFORE pendingMeshColorUpdates effect — otherwise
+      // fragment batches with stale colors render alongside new proper batches.
       if (device && pipeline) {
         scene.finalizeStreaming(device, pipeline);
       }
 
-      renderer.render();
+      // Compute exact bounds and refit camera if not already done.
+      // This MUST happen here rather than only in the main geometry effect's
+      // `currentLength === lastLength` branch, because React may batch the
+      // final appendGeometryBatch (geometry grows) and setIsStreaming(false)
+      // into the SAME render — making the main effect take the incremental
+      // `currentLength > lastLength` path and skip the bounds refit entirely.
+      // This effect reliably fires on the isStreaming true→false transition.
+      if (cameraFittedRef.current && !finalBoundsRefittedRef.current && geometry && geometry.length > 0) {
+        const MAX_VALID_COORD = 10000;
+        const exactBounds = {
+          min: { x: Infinity, y: Infinity, z: Infinity },
+          max: { x: -Infinity, y: -Infinity, z: -Infinity },
+        };
+        for (let gi = 0; gi < geometry.length; gi++) {
+          const positions = geometry[gi].positions;
+          for (let i = 0; i < positions.length; i += 3) {
+            const x = positions[i];
+            const y = positions[i + 1];
+            const z = positions[i + 2];
+            if (Math.abs(x) < MAX_VALID_COORD && Math.abs(y) < MAX_VALID_COORD && Math.abs(z) < MAX_VALID_COORD) {
+              if (x < exactBounds.min.x) exactBounds.min.x = x;
+              if (y < exactBounds.min.y) exactBounds.min.y = y;
+              if (z < exactBounds.min.z) exactBounds.min.z = z;
+              if (x > exactBounds.max.x) exactBounds.max.x = x;
+              if (y > exactBounds.max.y) exactBounds.max.y = y;
+              if (z > exactBounds.max.z) exactBounds.max.z = z;
+            }
+          }
+        }
+
+        const exactMaxSize = Math.max(
+          exactBounds.max.x - exactBounds.min.x,
+          exactBounds.max.y - exactBounds.min.y,
+          exactBounds.max.z - exactBounds.min.z
+        );
+
+        if (exactBounds.min.x !== Infinity && exactMaxSize > 0 && Number.isFinite(exactMaxSize)) {
+          // Detect whether the user moved the camera during streaming
+          const snap = cameraStateAfterFitRef.current;
+          let userMovedCamera = false;
+          if (snap) {
+            const pos = renderer.getCamera().getPosition();
+            const tgt = renderer.getCamera().getTarget();
+            const EPS = 0.5; // half a metre — ignores floating-point jitter
+            userMovedCamera =
+              Math.abs(pos.x - snap.px) > EPS || Math.abs(pos.y - snap.py) > EPS || Math.abs(pos.z - snap.pz) > EPS ||
+              Math.abs(tgt.x - snap.tx) > EPS || Math.abs(tgt.y - snap.ty) > EPS || Math.abs(tgt.z - snap.tz) > EPS;
+          }
+
+          if (!userMovedCamera) {
+            renderer.getCamera().fitToBounds(exactBounds.min, exactBounds.max);
+          }
+
+          // Always update stored bounds for Home / zoom-to-fit
+          geometryBoundsRef.current = { min: { ...exactBounds.min }, max: { ...exactBounds.max } };
+          finalBoundsRefittedRef.current = true;
+        }
+      }
+
+      renderer.render({
+        clearColor: clearColorRef.current,
+      });
       lastStreamRenderTimeRef.current = Date.now();
     }
     prevIsStreamingRef.current = isStreaming;

package/src/components/viewer/useMouseControls.ts

@@ -716,6 +716,7 @@ export function useMouseControls(params: UseMouseControlsParams): void {
             selectedId: selectedEntityIdRef.current,
             selectedModelIndex: selectedModelIndexRef.current,
             clearColor: clearColorRef.current,
+            isInteracting: true,
             sectionPlane: activeToolRef.current === 'section' ? {
               ...sectionPlaneRef.current,
               min: sectionRangeRef.current?.min,
@@ -727,7 +728,9 @@ export function useMouseControls(params: UseMouseControlsParams): void {
           calculateScale();
         } else if (!renderPendingRef.current) {
           // Schedule a final render for when throttle expires
-          // This ensures we always render the final position
+          // IMPORTANT: Keep isInteracting: true during drag to prevent flickering
+          // caused by post-processing toggling on/off between throttled frames.
+          // Post-processing is restored on mouseup (non-interacting render).
           renderPendingRef.current = true;
           requestAnimationFrame(() => {
             renderPendingRef.current = false;
@@ -737,6 +740,7 @@ export function useMouseControls(params: UseMouseControlsParams): void {
               selectedId: selectedEntityIdRef.current,
               selectedModelIndex: selectedModelIndexRef.current,
               clearColor: clearColorRef.current,
+              isInteracting: true,
               sectionPlane: activeToolRef.current === 'section' ? {
                 ...sectionPlaneRef.current,
                 min: sectionRangeRef.current?.min,
@@ -890,18 +894,56 @@ export function useMouseControls(params: UseMouseControlsParams): void {
       const mouseX = e.clientX - rect.left;
       const mouseY = e.clientY - rect.top;
       camera.zoom(e.deltaY, false, mouseX, mouseY, canvas.width, canvas.height);
-      renderer.render({
-        hiddenIds: hiddenEntitiesRef.current,
-        isolatedIds: isolatedEntitiesRef.current,
-        selectedId: selectedEntityIdRef.current,
-        selectedModelIndex: selectedModelIndexRef.current,
-        clearColor: clearColorRef.current,
-        sectionPlane: activeToolRef.current === 'section' ? {
-          ...sectionPlaneRef.current,
-          min: sectionRangeRef.current?.min,
-          max: sectionRangeRef.current?.max,
-        } : undefined,
-      });
+
+      // PERFORMANCE: Adaptive throttle for wheel zoom (same as orbit)
+      // Without this, every wheel event triggers a synchronous render —
+      // wheel events fire at 60-120Hz which overwhelms the GPU on large models.
+      const meshCount = geometryRef.current?.length ?? 0;
+      const throttleMs = meshCount > 50000 ? RENDER_THROTTLE_MS_HUGE
+        : meshCount > 10000 ? RENDER_THROTTLE_MS_LARGE
+          : RENDER_THROTTLE_MS_SMALL;
+
+      const now = performance.now();
+      if (now - lastRenderTimeRef.current >= throttleMs) {
+        lastRenderTimeRef.current = now;
+        renderer.render({
+          hiddenIds: hiddenEntitiesRef.current,
+          isolatedIds: isolatedEntitiesRef.current,
+          selectedId: selectedEntityIdRef.current,
+          selectedModelIndex: selectedModelIndexRef.current,
+          clearColor: clearColorRef.current,
+          isInteracting: true,
+          sectionPlane: activeToolRef.current === 'section' ? {
+            ...sectionPlaneRef.current,
+            min: sectionRangeRef.current?.min,
+            max: sectionRangeRef.current?.max,
+          } : undefined,
+        });
+        calculateScale();
+      } else if (!renderPendingRef.current) {
+        // Schedule a final render to ensure we always render the last zoom position
+        // IMPORTANT: Keep isInteracting: true to prevent flickering from post-processing
+        // toggling. Post-processing is restored by the zoom idle timer below.
+        renderPendingRef.current = true;
+        requestAnimationFrame(() => {
+          renderPendingRef.current = false;
+          renderer.render({
+            hiddenIds: hiddenEntitiesRef.current,
+            isolatedIds: isolatedEntitiesRef.current,
+            selectedId: selectedEntityIdRef.current,
+            selectedModelIndex: selectedModelIndexRef.current,
+            clearColor: clearColorRef.current,
+            isInteracting: true,
+            sectionPlane: activeToolRef.current === 'section' ? {
+              ...sectionPlaneRef.current,
+              min: sectionRangeRef.current?.min,
+              max: sectionRangeRef.current?.max,
+            } : undefined,
+          });
+          calculateScale();
+        });
+      }
+
       // Update measurement screen coordinates immediately during zoom (only in measure mode)
       if (activeToolRef.current === 'measure') {
         if (hasPendingMeasurements()) {
@@ -921,7 +963,6 @@ export function useMouseControls(params: UseMouseControlsParams): void {
           };
         }
       }
-      calculateScale();
     };
 
     // Click handling

package/src/components/viewer/useTouchControls.ts

@@ -150,6 +150,7 @@ export function useTouchControls(params: UseTouchControlsParams): void {
           selectedId: selectedEntityIdRef.current,
           selectedModelIndex: selectedModelIndexRef.current,
           clearColor: clearColorRef.current,
+          isInteracting: true,
           sectionPlane: activeToolRef.current === 'section' ? {
             ...sectionPlaneRef.current,
             min: sectionRangeRef.current?.min,
@@ -179,6 +180,7 @@ export function useTouchControls(params: UseTouchControlsParams): void {
           selectedId: selectedEntityIdRef.current,
           selectedModelIndex: selectedModelIndexRef.current,
           clearColor: clearColorRef.current,
+          isInteracting: true,
           sectionPlane: activeToolRef.current === 'section' ? {
             ...sectionPlaneRef.current,
             min: sectionRangeRef.current?.min,

package/src/hooks/useIfc.ts

@@ -13,6 +13,7 @@
  */
 
 import { useMemo, useRef } from 'react';
+import { useShallow } from 'zustand/react/shallow';
 import { useViewerStore } from '../store.js';
 import { IfcQuery } from '@ifc-lite/query';
 import type { IfcDataStore } from '@ifc-lite/parser';
@@ -41,7 +42,24 @@ export function useIfc() {
     hasModels,
     // Federation Registry helpers
     toGlobalId,
-  } = useViewerStore();
+  } = useViewerStore(useShallow((s) => ({
+    loading: s.loading,
+    progress: s.progress,
+    error: s.error,
+    ifcDataStore: s.ifcDataStore,
+    geometryResult: s.geometryResult,
+    models: s.models,
+    activeModelId: s.activeModelId,
+    clearAllModels: s.clearAllModels,
+    setActiveModel: s.setActiveModel,
+    setModelVisibility: s.setModelVisibility,
+    setModelCollapsed: s.setModelCollapsed,
+    getModel: s.getModel,
+    getActiveModel: s.getActiveModel,
+    getAllVisibleModels: s.getAllVisibleModels,
+    hasModels: s.hasModels,
+    toGlobalId: s.toGlobalId,
+  })));
 
   // Track if we've already logged for this ifcDataStore
   const lastLoggedDataStoreRef = useRef<typeof ifcDataStore>(null);

package/src/hooks/useIfcCache.ts

@@ -20,6 +20,7 @@ import { SpatialHierarchyBuilder, extractLengthUnitScale, type IfcDataStore } fr
 import { buildSpatialIndex } from '@ifc-lite/spatial';
 import type { MeshData } from '@ifc-lite/geometry';
 
+import { useShallow } from 'zustand/react/shallow';
 import { useViewerStore } from '../store.js';
 import { getCached, setCached, deleteCached, type CacheResult } from '../services/cacheService.js';
 import { rebuildSpatialHierarchy, rebuildOnDemandMaps } from '../utils/spatialHierarchy.js';
@@ -66,7 +67,11 @@ export function useIfcCache() {
     setProgress,
     setIfcDataStore,
     setGeometryResult,
-  } = useViewerStore();
+  } = useViewerStore(useShallow((s) => ({
+    setProgress: s.setProgress,
+    setIfcDataStore: s.setIfcDataStore,
+    setGeometryResult: s.setGeometryResult,
+  })));
 
   /**
    * Load from binary cache - INSTANT load for maximum speed

package/src/hooks/useIfcFederation.ts

@@ -11,6 +11,7 @@
  */
 
 import { useCallback } from 'react';
+import { useShallow } from 'zustand/react/shallow';
 import { useViewerStore, type FederatedModel, type SchemaVersion } from '../store.js';
 import { IfcParser, detectFormat, parseIfcx, parseFederatedIfcx, type IfcDataStore, type FederatedIfcxParseResult } from '@ifc-lite/parser';
 import { GeometryProcessor, GeometryQuality, type MeshData, type CoordinateInfo } from '@ifc-lite/geometry';
@@ -99,7 +100,21 @@ export function useIfcFederation() {
     registerModelOffset,
     fromGlobalId,
     findModelForGlobalId,
-  } = useViewerStore();
+  } = useViewerStore(useShallow((s) => ({
+    setLoading: s.setLoading,
+    setError: s.setError,
+    setProgress: s.setProgress,
+    setIfcDataStore: s.setIfcDataStore,
+    setGeometryResult: s.setGeometryResult,
+    addModel: s.addModel,
+    removeModel: s.removeModel,
+    clearAllModels: s.clearAllModels,
+    getModel: s.getModel,
+    hasModels: s.hasModels,
+    registerModelOffset: s.registerModelOffset,
+    fromGlobalId: s.fromGlobalId,
+    findModelForGlobalId: s.findModelForGlobalId,
+  })));
 
   /**
    * Add a model to the federation (multi-model support)

package/src/hooks/useIfcLoader.ts

@@ -11,6 +11,7 @@
  */
 
 import { useCallback } from 'react';
+import { useShallow } from 'zustand/react/shallow';
 import { useViewerStore } from '../store.js';
 import { IfcParser, detectFormat, parseIfcx, type IfcDataStore } from '@ifc-lite/parser';
 import { GeometryProcessor, GeometryQuality, type MeshData, type CoordinateInfo } from '@ifc-lite/geometry';
@@ -77,7 +78,16 @@ export function useIfcLoader() {
     appendGeometryBatch,
     updateMeshColors,
     updateCoordinateInfo,
-  } = useViewerStore();
+  } = useViewerStore(useShallow((s) => ({
+    setLoading: s.setLoading,
+    setError: s.setError,
+    setProgress: s.setProgress,
+    setIfcDataStore: s.setIfcDataStore,
+    setGeometryResult: s.setGeometryResult,
+    appendGeometryBatch: s.appendGeometryBatch,
+    updateMeshColors: s.updateMeshColors,
+    updateCoordinateInfo: s.updateCoordinateInfo,
+  })));
 
   // Cache operations from extracted hook
   const { loadFromCache, saveToCache } = useIfcCache();
@@ -450,9 +460,11 @@ export function useIfcLoader() {
 
               finalCoordinateInfo = event.coordinateInfo ?? null;
 
-              // Start data model parsing NOW — after geometry streaming is done
-              // so the parser doesn't compete with WASM for main-thread CPU.
-              startDataModelParsing();
+              // PERF: Defer data model parsing to next macrotask so the browser
+              // can paint the streaming-complete state first. parseColumnar()
+              // synchronously calls scanEntitiesFast() which blocks the main
+              // thread for ~7s on large files (487MB → 8.4M entities).
+              setTimeout(startDataModelParsing, 0);
 
               // Apply all accumulated color updates in a single store update
               // instead of one updateMeshColors() call per colorUpdate event.

package/src/store/slices/dataSlice.ts

@@ -81,13 +81,18 @@ export const createDataSlice: StateCreator<DataSlice, [], [], DataSlice> = (set)
       };
     }
 
-    // New array reference (required for React/Zustand change detection) but
-    // only O(n) pointer copies — the expensive part was the .reduce() calls
-    // which are now replaced by the incremental counters above.
+    // PERF FIX: Push into existing array — O(batch_size) instead of O(total).
+    // The old [...old, ...new] spread copied ALL accumulated meshes every batch,
+    // causing O(N²) total work (e.g., 176K meshes × 350 batches = 31M copies).
+    // Zustand detects changes via the new geometryResult object reference below.
+    const existing = state.geometryResult.meshes;
+    for (let i = 0; i < meshes.length; i++) {
+      existing.push(meshes[i]);
+    }
+
     return {
       geometryResult: {
         ...state.geometryResult,
-        meshes: [...state.geometryResult.meshes, ...meshes],
         totalTriangles: state.geometryResult.totalTriangles + batchTriangles,
         totalVertices: state.geometryResult.totalVertices + batchVertices,
         coordinateInfo: coordinateInfo || state.geometryResult.coordinateInfo,

package/src/utils/localParsingUtils.ts

@@ -171,7 +171,9 @@ export function createCoordinateInfo(
  * @returns Render interval in milliseconds
  */
 export function getRenderIntervalMs(fileSizeMB: number): number {
-  if (fileSizeMB > 100) {
+  if (fileSizeMB > 300) {
+    return 500;  // Very large files: 2 updates/sec (fewer GPU fragment creations)
+  } else if (fileSizeMB > 100) {
     return 200;  // Huge files: 5 updates/sec
   } else if (fileSizeMB > 50) {
     return 100;  // Large files: 10 updates/sec

package/tsconfig.json

@@ -15,7 +15,18 @@
       "@ifc-lite/export": ["../../packages/export/src"],
       "@ifc-lite/cache": ["../../packages/cache/src"],
       "@ifc-lite/sdk": ["../../packages/sdk/src"],
-      "@ifc-lite/lens": ["../../packages/lens/src"]
+      "@ifc-lite/lens": ["../../packages/lens/src"],
+      "@ifc-lite/bcf": ["../../packages/bcf/src"],
+      "@ifc-lite/mutations": ["../../packages/mutations/src"],
+      "@ifc-lite/drawing-2d": ["../../packages/drawing-2d/src"],
+      "@ifc-lite/server-client": ["../../packages/server-client/src"],
+      "@ifc-lite/ifcx": ["../../packages/ifcx/src"],
+      "@ifc-lite/create": ["../../packages/create/src"],
+      "@ifc-lite/ids": ["../../packages/ids/src"],
+      "@ifc-lite/encoding": ["../../packages/encoding/src"],
+      "@ifc-lite/lists": ["../../packages/lists/src"],
+      "@ifc-lite/sandbox": ["../../packages/sandbox/src"],
+      "@ifc-lite/sandbox/schema": ["../../packages/sandbox/src/bridge-schema"]
     }
   },
   "include": ["src/**/*", "../../packages/renderer/src/webgpu-types.d.ts"],