@ifc-lite/viewer 1.16.0 → 1.17.1

package/src/components/viewer/ExportDialog.tsx

@@ -14,7 +14,7 @@
  * - IFC5 → .ifcx
  */
 
-import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
 import {
   Download,
   AlertCircle,
@@ -48,10 +48,11 @@ import {
   AlertDescription,
   AlertTitle,
 } from '@/components/ui/alert';
+import { Progress } from '@/components/ui/progress';
 import { useViewerStore } from '@/store';
 import { configureMutationView } from '@/utils/configureMutationView';
 import { toast } from '@/components/ui/toast';
-import { StepExporter, MergedExporter, Ifc5Exporter, IFC5_KNOWN_PROP_NAMES, type MergeModelInput } from '@ifc-lite/export';
+import { StepExporter, MergedExporter, Ifc5Exporter, IFC5_KNOWN_PROP_NAMES, type MergeModelInput, type ExportProgress, type StepExportProgress } from '@ifc-lite/export';
 import { MutablePropertyView } from '@ifc-lite/mutations';
 import type { IfcDataStore } from '@ifc-lite/parser';
 
@@ -87,6 +88,27 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
   const [onlyKnownProperties, setOnlyKnownProperties] = useState(true);
   const [isExporting, setIsExporting] = useState(false);
   const [exportResult, setExportResult] = useState<{ success: boolean; message: string } | null>(null);
+  const [exportProgress, setExportProgress] = useState<{
+    phase: string;
+    percent: number;
+    entitiesProcessed: number;
+    entitiesTotal: number;
+    currentModel?: string;
+  } | null>(null);
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
+  const prevProgressRef = useRef<typeof exportProgress>(null);
+
+  const scrollToBottom = useCallback(() => {
+    if (scrollAreaRef.current) {
+      scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight;
+    }
+  }, []);
+
+  // Auto-scroll when progress first appears
+  useEffect(() => {
+    if (exportProgress && !prevProgressRef.current) scrollToBottom();
+    prevProgressRef.current = exportProgress;
+  }, [exportProgress, scrollToBottom]);
 
   // Derived: is this an IFC5/IFCX export?
   const isIfc5 = schema === 'IFC5';
@@ -286,6 +308,7 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
 
     setIsExporting(true);
     setExportResult(null);
+    setExportProgress(null);
 
     try {
       // Handle merged export of all models (STEP only, not IFC5)
@@ -308,7 +331,7 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
           }
         }
 
-        const result = mergedExporter.export({
+        const result = await mergedExporter.exportAsync({
           schema,
           projectStrategy: 'keep-first',
           visibleOnly,
@@ -316,8 +339,19 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
           isolatedEntityIdsByModel: isolatedByModel,
           description: `Merged export of ${mergeInputs.length} models from ifc-lite`,
           application: 'ifc-lite',
+          onProgress: (p: ExportProgress) => setExportProgress({
+            phase: p.phase === 'preparing' ? 'Preparing models...'
+              : p.phase === 'entities' ? `Processing entities${p.currentModel ? ` (${p.currentModel})` : ''}...`
+              : 'Assembling file...',
+            percent: p.percent,
+            entitiesProcessed: p.entitiesProcessed,
+            entitiesTotal: p.entitiesTotal,
+            currentModel: p.currentModel,
+          }),
         });
 
+        setExportProgress(null);
+
         const blob = new Blob([result.content], { type: 'text/plain' });
         const url = URL.createObjectURL(blob);
         const a = document.createElement('a');
@@ -328,7 +362,7 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
         document.body.removeChild(a);
         URL.revokeObjectURL(url);
 
-        const msg = `Merged ${result.stats.modelCount} models, ${result.stats.totalEntityCount} entities`;
+        const msg = `Merged ${result.stats.modelCount} models, ${result.stats.totalEntityCount.toLocaleString()} entities`;
         setExportResult({ success: true, message: msg });
         toast.success(msg);
         return;
@@ -431,7 +465,7 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
         const localHidden = visibleOnly ? getLocalHiddenIds(selectedModelId) : undefined;
         const localIsolated = visibleOnly ? getLocalIsolatedIds(selectedModelId) : undefined;
 
-        const result = exporter.export({
+        const result = await exporter.exportAsync({
           schema,
           includeGeometry,
           applyMutations,
@@ -440,8 +474,18 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
           isolatedEntityIds: localIsolated,
           description: `Exported from ifc-lite with ${modifiedCount} modifications`,
           application: 'ifc-lite',
+          onProgress: (p: StepExportProgress) => setExportProgress({
+            phase: p.phase === 'preparing' ? 'Preparing export...'
+              : p.phase === 'entities' ? 'Processing entities...'
+              : 'Assembling file...',
+            percent: p.percent,
+            entitiesProcessed: p.entitiesProcessed,
+            entitiesTotal: p.entitiesTotal,
+          }),
         });
 
+        setExportProgress(null);
+
         const blob = new Blob([result.content], { type: 'text/plain' });
         const url = URL.createObjectURL(blob);
         const a = document.createElement('a');
@@ -488,7 +532,7 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
           </DialogDescription>
         </DialogHeader>
 
-        <div className="grid gap-4 py-4">
+        <div ref={scrollAreaRef} className="grid gap-4 py-4 max-h-[60vh] overflow-y-auto">
           {/* Scope selector (only for STEP schemas with multiple models) */}
           {!isIfc5 && !changesOnly && modelList.length > 1 && (
             <div className="flex items-center gap-4">
@@ -632,6 +676,22 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
             </Alert>
           )}
 
+          {/* Export Progress */}
+          {isExporting && exportProgress && (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between text-sm text-muted-foreground">
+                <span className="flex items-center gap-2">
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  {exportProgress.phase}
+                </span>
+                <span>
+                  {exportProgress.entitiesProcessed.toLocaleString()} / {exportProgress.entitiesTotal.toLocaleString()} entities
+                </span>
+              </div>
+              <Progress value={exportProgress.percent * 100} />
+            </div>
+          )}
+
           {/* Export result */}
           {exportResult && (
             <Alert variant={exportResult.success ? 'default' : 'destructive'}>

package/src/components/viewer/KeyboardShortcutsDialog.tsx

@@ -3,7 +3,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import { useState, useEffect, useCallback, useMemo } from 'react';
-import { X, Info, Keyboard, Github, ExternalLink, Sparkles, ChevronDown, ChevronRight, Zap, Wrench, Plus, Package } from 'lucide-react';
+import { X, Info, Keyboard, Github, ExternalLink, Sparkles, ChevronDown, ChevronRight, Zap, Wrench, Plus, Package, ShieldCheck } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import { KEYBOARD_SHORTCUTS } from '@/hooks/useKeyboardShortcuts';
@@ -33,6 +33,46 @@ const TYPE_CONFIG = {
   perf: { icon: Zap, className: 'text-blue-500' },
 } as const;
 
+function PrivacyBanner() {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div className="pt-2 border-t">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="flex items-center gap-2 w-full rounded-md bg-emerald-500/10 px-2.5 py-1.5 text-left transition-colors hover:bg-emerald-500/15"
+      >
+        <ShieldCheck className="h-3.5 w-3.5 text-emerald-500 shrink-0" />
+        <span className="text-xs font-medium">Your IFC data never leaves your device.</span>
+        {expanded ? (
+          <ChevronDown className="h-3 w-3 ml-auto shrink-0 text-muted-foreground" />
+        ) : (
+          <ChevronRight className="h-3 w-3 ml-auto shrink-0 text-muted-foreground" />
+        )}
+      </button>
+      {expanded && (
+        <div className="mt-1.5 ml-1 space-y-1 text-xs text-muted-foreground">
+          <p>
+            All files are processed locally in the browser with{' '}
+            <a
+              href="https://webassembly.org/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline hover:text-foreground transition-colors"
+            >
+              WebAssembly (WASM)
+            </a>
+            {' '}&ndash; no server upload, near-native speed.
+          </p>
+          <p className="text-[11px] italic">
+            Verify: press <kbd className="px-1 py-0.5 bg-muted rounded border font-mono text-[10px]">F12</kbd> &rarr; Network tab &rarr; no IFC data transmitted.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
 function AboutTab() {
   const [showPackages, setShowPackages] = useState(false);
   const packageVersions = __PACKAGE_VERSIONS__;
@@ -88,6 +128,9 @@ function AboutTab() {
         ))}
       </div>
 
+      {/* Privacy & Security */}
+      <PrivacyBanner />
+
       {/* Package Versions */}
       {packageVersions.length > 0 && (
         <div className="pt-2 border-t">

package/src/components/viewer/MainToolbar.tsx

@@ -7,8 +7,6 @@ import {
   FolderOpen,
   Download,
   MousePointer2,
-  Hand,
-  Rotate3d,
   PersonStanding,
   Ruler,
   Scissors,
@@ -71,7 +69,7 @@ import { recordRecentFiles, cacheFileBlobs } from '@/lib/recent-files';
 import { ThemeSwitch } from './ThemeSwitch';
 import { toast } from '@/components/ui/toast';
 
-type Tool = 'select' | 'pan' | 'orbit' | 'walk' | 'measure' | 'section';
+type Tool = 'select' | 'walk' | 'measure' | 'section';
 type WorkspacePanel = 'script' | 'list' | 'bcf' | 'ids' | 'lens';
 
 // #region FIX: Move ToolButton OUTSIDE MainToolbar to prevent recreation on every render
@@ -741,8 +739,6 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
 
       {/* ── Navigation Tools ── */}
       <ToolButton tool="select" icon={MousePointer2} label="Select" shortcut="V" activeTool={activeTool} onToolChange={setActiveTool} />
-      <ToolButton tool="pan" icon={Hand} label="Pan" shortcut="P" activeTool={activeTool} onToolChange={setActiveTool} />
-      <ToolButton tool="orbit" icon={Rotate3d} label="Orbit" shortcut="O" activeTool={activeTool} onToolChange={setActiveTool} />
       <ToolButton tool="walk" icon={PersonStanding} label="Walk Mode" shortcut="C" activeTool={activeTool} onToolChange={setActiveTool} />
 
       <Separator orientation="vertical" className="h-6 mx-1" />

package/src/components/viewer/PropertiesPanel.tsx

@@ -32,7 +32,7 @@ import { configureMutationView } from '@/utils/configureMutationView';
 import { IfcQuery } from '@ifc-lite/query';
 import { MutablePropertyView } from '@ifc-lite/mutations';
 import { extractClassificationsOnDemand, extractMaterialsOnDemand, extractTypePropertiesOnDemand, extractTypeEntityOwnProperties, extractDocumentsOnDemand, extractRelationshipsOnDemand, type IfcDataStore } from '@ifc-lite/parser';
-import { EntityFlags, RelationshipType } from '@ifc-lite/data';
+import { EntityFlags, RelationshipType, isSpatialStructureTypeName, isStoreyLikeSpatialTypeName } from '@ifc-lite/data';
 import type { EntityRef, FederatedModel } from '@/store/types';
 
 import { CoordVal, CoordRow } from './properties/CoordinateDisplay';
@@ -573,7 +573,7 @@ export function PropertiesPanel() {
     };
   }, [selectedEntity, model, ifcDataStore, mutationViews, mutationVersion]);
 
-  // Spatial containment info for spatial containers (Project, Site, Building, Storey)
+  // Spatial containment info for spatial containers (Project, Facility, Part, Storey, Space)
   const spatialContainment = useMemo(() => {
     if (!selectedEntity) return null;
     const dataStore = model?.ifcDataStore ?? ifcDataStore;
@@ -583,9 +583,8 @@ export function PropertiesPanel() {
     const hierarchy = dataStore.spatialHierarchy;
     const typeName = dataStore.entities.getTypeName(expressId);
 
-    // Only show for spatial containers
-    const spatialTypes = ['IfcProject', 'IfcSite', 'IfcBuilding', 'IfcBuildingStorey', 'IfcSpace'];
-    if (!spatialTypes.includes(typeName)) return null;
+    // Only show for spatial structure elements.
+    if (!isSpatialStructureTypeName(typeName)) return null;
 
     const stats: Array<{ label: string; value: string | number }> = [];
 
@@ -621,7 +620,7 @@ export function PropertiesPanel() {
     // Also count from containment maps
     const mapSources: Array<[string, Map<number, number[]> | undefined]> = [
       ['Elements (Site)', hierarchy.bySite],
-      ['Elements (Building)', hierarchy.byBuilding],
+      ['Elements (Building-like)', hierarchy.byBuilding],
       ['Elements (Storey)', hierarchy.byStorey],
       ['Elements (Space)', hierarchy.bySpace],
     ];
@@ -633,7 +632,7 @@ export function PropertiesPanel() {
     }
 
     // Elevation for storeys
-    if (typeName === 'IfcBuildingStorey') {
+    if (isStoreyLikeSpatialTypeName(typeName)) {
       const elevation = hierarchy.storeyElevations.get(expressId);
       if (elevation !== undefined) {
         stats.push({ label: 'Elevation', value: `${elevation.toFixed(2)} m` });

package/src/components/viewer/Viewport.tsx

@@ -23,9 +23,9 @@ import {
   useIfcDataState,
 } from '../../hooks/useViewerSelectors.js';
 import { useModelSelection } from '../../hooks/useModelSelection.js';
+import { useLatestRef } from '../../hooks/useLatestRef.js';
 import {
   getEntityBounds,
-  getEntityCenter,
   getThemeClearColor,
   type ViewportStateRefs,
 } from '../../utils/viewportUtils.js';
@@ -127,6 +127,10 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
   const handlePickForSelectionRef = useRef(handlePickForSelection);
   useEffect(() => { handlePickForSelectionRef.current = handlePickForSelection; }, [handlePickForSelection]);
 
+  // Orbit pivot is now set dynamically at the start of each orbit drag by
+  // raycasting under the cursor (see useMouseControls/useTouchControls).
+  // No need for selection-based orbit center — cursor-based is always better.
+
   // Multi-select handler: Ctrl+Click adds/removes from multi-selection
   // Properly populates both selectedEntitiesSet (multi-model) and selectedEntityIds (legacy)
   const handleMultiSelect = useCallback((globalId: number) => {
@@ -287,8 +291,6 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     separationLinesIntensity,
     separationLinesRadius,
   ]);
-  const visualEnhancementRef = useRef<VisualEnhancementOptions>(visualEnhancement);
-
   // Animation frame ref
   const animationFrameRef = useRef<number | null>(null);
   const lastFrameTimeRef = useRef<number>(0);
@@ -337,29 +339,29 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     max: { x: 100, y: 100, z: 100 },
   });
 
-  // Coordinate info ref for camera callbacks (to access latest buildingRotation)
-  const coordinateInfoRef = useRef<CoordinateInfo | undefined>(coordinateInfo);
-
-  // Visibility state refs for animation loop
-  const hiddenEntitiesRef = useRef<Set<number>>(hiddenEntities);
-  const isolatedEntitiesRef = useRef<Set<number> | null>(isolatedEntities);
-  const selectedEntityIdRef = useRef<number | null>(selectedEntityId);
-  const selectedEntityIdsRef = useRef<Set<number> | undefined>(selectedEntityIds);
-  const selectedModelIndexRef = useRef<number | undefined>(selectedModelIndex);
+  // Refs that stay in sync with props/state automatically (no useEffect needed).
+  // Event handlers and the animation loop read .current to get the latest value.
+  const coordinateInfoRef = useLatestRef(coordinateInfo);
+  const hiddenEntitiesRef = useLatestRef(hiddenEntities);
+  const isolatedEntitiesRef = useLatestRef(isolatedEntities);
+  const selectedEntityIdRef = useLatestRef(selectedEntityId);
+  const selectedEntityIdsRef = useLatestRef(selectedEntityIds);
+  const selectedModelIndexRef = useLatestRef(selectedModelIndex);
   const activeToolRef = useRef<string>(activeTool);
-  const pendingMeasurePointRef = useRef<MeasurePoint | null>(pendingMeasurePoint);
-  const activeMeasurementRef = useRef(activeMeasurement);
-  const snapEnabledRef = useRef(snapEnabled);
-  const edgeLockStateRef = useRef(edgeLockState);
-  const measurementConstraintEdgeRef = useRef(measurementConstraintEdge);
-  const sectionPlaneRef = useRef(sectionPlane);
-  const sectionRangeRef = useRef<{ min: number; max: number } | null>(null);
-  const geometryRef = useRef<MeshData[] | null>(geometry);
+  const pendingMeasurePointRef = useLatestRef(pendingMeasurePoint);
+  const activeMeasurementRef = useLatestRef(activeMeasurement);
+  const snapEnabledRef = useLatestRef(snapEnabled);
+  const edgeLockStateRef = useLatestRef(edgeLockState);
+  const measurementConstraintEdgeRef = useLatestRef(measurementConstraintEdge);
+  const sectionPlaneRef = useLatestRef(sectionPlane);
+  const sectionRangeRef = useLatestRef(sectionRange);
+  const visualEnhancementRef = useLatestRef(visualEnhancement);
+  const geometryRef = useLatestRef(geometry);
 
   // Hover throttling
   const lastHoverCheckRef = useRef<number>(0);
   const hoverThrottleMs = 50; // Check hover every 50ms
-  const hoverTooltipsEnabledRef = useRef(hoverTooltipsEnabled);
+  const hoverTooltipsEnabledRef = useLatestRef(hoverTooltipsEnabled);
 
   // Measure tool throttling (adaptive based on raycast performance)
   const measureRaycastPendingRef = useRef(false);
@@ -388,29 +390,18 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     canvasHeight: number;
   } | null>(null);
 
-  // Keep refs in sync
-  useEffect(() => { coordinateInfoRef.current = coordinateInfo; }, [coordinateInfo]);
-  useEffect(() => { hiddenEntitiesRef.current = hiddenEntities; }, [hiddenEntities]);
-  useEffect(() => { isolatedEntitiesRef.current = isolatedEntities; }, [isolatedEntities]);
-  useEffect(() => { selectedEntityIdRef.current = selectedEntityId; }, [selectedEntityId]);
-  useEffect(() => { selectedEntityIdsRef.current = selectedEntityIds; }, [selectedEntityIds]);
-  useEffect(() => { selectedModelIndexRef.current = selectedModelIndex; }, [selectedModelIndex]);
-  useEffect(() => { activeToolRef.current = activeTool; }, [activeTool]);
-  useEffect(() => { pendingMeasurePointRef.current = pendingMeasurePoint; }, [pendingMeasurePoint]);
-  useEffect(() => { activeMeasurementRef.current = activeMeasurement; }, [activeMeasurement]);
-  useEffect(() => { snapEnabledRef.current = snapEnabled; }, [snapEnabled]);
-  useEffect(() => { edgeLockStateRef.current = edgeLockState; }, [edgeLockState]);
-  useEffect(() => { measurementConstraintEdgeRef.current = measurementConstraintEdge; }, [measurementConstraintEdge]);
-  useEffect(() => { sectionPlaneRef.current = sectionPlane; }, [sectionPlane]);
-  useEffect(() => { sectionRangeRef.current = sectionRange; }, [sectionRange]);
-  useEffect(() => { visualEnhancementRef.current = visualEnhancement; }, [visualEnhancement]);
+  // activeTool has a side effect (first-person mode), so keep as useEffect
   useEffect(() => {
-    geometryRef.current = geometry;
-  }, [geometry]);
+    activeToolRef.current = activeTool;
+    const renderer = rendererRef.current;
+    if (renderer) {
+      const isWalk = activeTool === 'walk';
+      firstPersonModeRef.current = isWalk;
+      renderer.getCamera().enableFirstPersonMode(isWalk);
+    }
+  }, [activeTool]);
   useEffect(() => {
-    hoverTooltipsEnabledRef.current = hoverTooltipsEnabled;
     if (!hoverTooltipsEnabled) {
-      // Clear hover state when disabled
       clearHover();
     }
   }, [hoverTooltipsEnabled, clearHover]);
@@ -436,8 +427,6 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     // Set cursor based on active tool
     if (activeTool === 'measure') {
       canvas.style.cursor = 'crosshair';
-    } else if (activeTool === 'pan' || activeTool === 'orbit') {
-      canvas.style.cursor = 'grab';
     } else {
       canvas.style.cursor = 'default';
     }
@@ -520,19 +509,7 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
 
       const camera = renderer.getCamera();
       const renderCurrent = () => {
-        renderer.render({
-          hiddenIds: hiddenEntitiesRef.current,
-          isolatedIds: isolatedEntitiesRef.current,
-          selectedId: selectedEntityIdRef.current,
-          selectedModelIndex: selectedModelIndexRef.current,
-          clearColor: clearColorRef.current,
-          visualEnhancement: visualEnhancementRef.current,
-          sectionPlane: activeToolRef.current === 'section' ? {
-            ...sectionPlaneRef.current,
-            min: sectionRangeRef.current?.min,
-            max: sectionRangeRef.current?.max,
-          } : undefined,
-        });
+        renderer.requestRender();
       };
 
       // Register camera callbacks for ViewCube and other controls
@@ -689,6 +666,10 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
   // Sync on every render since mouseState is mutated directly by event handlers
   mouseIsDraggingRef.current = mouseStateRef.current.isDragging;
 
+  // isInteracting: set by mouse/touch controls during drag, cleared on mouseup/touchend.
+  // The animation loop reads this to skip post-processing during rapid camera movement.
+  const isInteractingRef = useRef(false);
+
   // ===== Extracted hooks =====
   useMouseControls({
     canvasRef,
@@ -716,6 +697,7 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     hoverTooltipsEnabledRef,
     lastRenderTimeRef,
     renderPendingRef,
+    isInteractingRef,
     lastClickTimeRef,
     lastClickPosRef,
     lastCameraStateRef,
@@ -762,6 +744,7 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     sectionPlaneRef,
     sectionRangeRef,
     geometryRef,
+    isInteractingRef,
     handlePickForSelection: (pickResult) => handlePickForSelectionRef.current(pickResult),
     getPickOptions,
   });
@@ -802,6 +785,9 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     sectionPlaneRef,
     sectionRangeRef,
     visualEnhancementRef,
+    selectedEntityIdsRef,
+    coordinateInfoRef,
+    isInteractingRef,
     lastCameraStateRef,
     updateCameraRotationRealtime,
     calculateScale,

package/src/components/viewer/ViewportContainer.tsx

@@ -8,6 +8,7 @@ import { ViewportOverlays } from './ViewportOverlays';
 import { ToolOverlays } from './ToolOverlays';
 import { Section2DPanel } from './Section2DPanel';
 import { BasketPresentationDock } from './BasketPresentationDock';
+import { BCFOverlay } from './bcf/BCFOverlay';
 import { useViewerStore } from '@/store';
 import { collectIfcBuildingStoreyElementsWithIfcSpace } from '@/store/basketVisibleSet';
 import { useIfc } from '@/hooks/useIfc';
@@ -32,6 +33,7 @@ export function ViewportContainer() {
   // Multi-model support: get all loaded models from store (for merged geometry)
   const storeModels = useViewerStore((s) => s.models);
   const resetViewerState = useViewerStore((s) => s.resetViewerState);
+  const bcfOverlayVisible = useViewerStore((s) => s.bcfOverlayVisible);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [isDragging, setIsDragging] = useState(false);
   const [showTroubleshooting, setShowTroubleshooting] = useState(false);
@@ -611,6 +613,7 @@ export function ViewportContainer() {
         computedIsolatedIds={computedIsolatedIds}
         modelIdToIndex={modelIdToIndex}
       />
+      {bcfOverlayVisible && <BCFOverlay />}
       <ViewportOverlays />
       <ToolOverlays />
       <BasketPresentationDock />

package/src/components/viewer/ViewportOverlays.tsx

@@ -18,7 +18,7 @@ import { cn } from '@/lib/utils';
 import { ViewCube, type ViewCubeRef } from './ViewCube';
 import { AxisHelper, type AxisHelperRef } from './AxisHelper';
 
-export function ViewportOverlays() {
+export function ViewportOverlays({ hideViewCube = false }: { hideViewCube?: boolean } = {}) {
   const selectedStoreys = useViewerStore((s) => s.selectedStoreys);
   const hiddenEntities = useViewerStore((s) => s.hiddenEntities);
   const isolatedEntities = useViewerStore((s) => s.isolatedEntities);
@@ -180,15 +180,17 @@ export function ViewportOverlays() {
       )}
 
       {/* ViewCube (top-right) */}
-      <div className="absolute top-6 right-6">
-        <ViewCube
-          ref={viewCubeRef}
-          onViewChange={handleViewChange}
-          onDrag={(deltaX, deltaY) => cameraCallbacks.orbit?.(deltaX, deltaY)}
-          rotationX={initialRotationX}
-          rotationY={initialRotationY}
-        />
-      </div>
+      {!hideViewCube && (
+        <div className="absolute top-6 right-6">
+          <ViewCube
+            ref={viewCubeRef}
+            onViewChange={handleViewChange}
+            onDrag={(deltaX, deltaY) => cameraCallbacks.orbit?.(deltaX, deltaY)}
+            rotationX={initialRotationX}
+            rotationY={initialRotationY}
+          />
+        </div>
+      )}
 
       {/* Axis Helper (bottom-left, above scale bar) - IFC Z-up convention */}
       <div className="absolute bottom-16 left-4">