@ifc-lite/viewer 1.25.2 → 1.26.0

package/src/components/viewer/MainToolbar.tsx

@@ -52,6 +52,7 @@ import {
   Redo2,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
 import { Separator } from '@/components/ui/separator';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import {
@@ -158,6 +159,39 @@ function ToolButton({
   );
 }
 
+interface ClassVisibilityRowProps {
+  /** Colored class glyph (caller sets the tint). */
+  icon: React.ReactNode;
+  label: string;
+  /** One-line plain-language hint about what the IFC class covers. */
+  description: string;
+  checked: boolean;
+  onChange: (next: boolean) => void;
+}
+
+/**
+ * One row of the Visibility panel: colored class icon + label/description
+ * on the left, a Switch on the right. The whole row is a <label>, so a
+ * click anywhere toggles the switch and — because it isn't a menu item —
+ * the dropdown stays open for flipping several classes in a row. The left
+ * cluster dims when off so on/off reads from saturation as well as the
+ * switch position.
+ */
+function ClassVisibilityRow({ icon, label, description, checked, onChange }: ClassVisibilityRowProps) {
+  return (
+    <label className="group flex items-center justify-between gap-3 rounded-md px-2 py-1.5 cursor-pointer hover:bg-muted/50 transition-colors">
+      <span className={cn('flex items-center gap-2.5 min-w-0 transition-opacity', !checked && 'opacity-50')}>
+        {icon}
+        <span className="grid gap-0.5 min-w-0">
+          <span className="text-sm leading-tight truncate">{label}</span>
+          <span className="text-[10px] leading-tight text-muted-foreground truncate">{description}</span>
+        </span>
+      </span>
+      <Switch checked={checked} onCheckedChange={onChange} />
+    </label>
+  );
+}
+
 /**
  * Stacked / Exploded / Solo level display dropdown. Pinned next
  * to the Quick Floorplan dropdown so storey-related controls
@@ -505,6 +539,16 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   const toggleHoverTooltips = useViewerStore((state) => state.toggleHoverTooltips);
   const typeVisibility = useViewerStore((state) => state.typeVisibility);
   const toggleTypeVisibility = useViewerStore((state) => state.toggleTypeVisibility);
+  const resetTypeVisibility = useViewerStore((state) => state.resetTypeVisibility);
+  // How many of the five class toggles are on — surfaced in the menu
+  // header so the user sees scene state at a glance.
+  const visibleClassCount = [
+    typeVisibility.spaces,
+    typeVisibility.openings,
+    typeVisibility.site,
+    typeVisibility.ifcAnnotations,
+    typeVisibility.ifcGrid,
+  ].filter(Boolean).length;
   // Issue #540: load-time toggle that asks the WASM bridge to merge
   // Revit-style multilayer walls. We surface this in the Class
   // Visibility dropdown so users discover it next to the other
@@ -516,6 +560,8 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   const setBcfPanelVisible = useViewerStore((state) => state.setBcfPanelVisible);
   const idsPanelVisible = useViewerStore((state) => state.idsPanelVisible);
   const setIdsPanelVisible = useViewerStore((state) => state.setIdsPanelVisible);
+  const clashPanelVisible = useViewerStore((state) => state.clashPanelVisible);
+  const setClashPanelVisible = useViewerStore((state) => state.setClashPanelVisible);
   const listPanelVisible = useViewerStore((state) => state.listPanelVisible);
   const setListPanelVisible = useViewerStore((state) => state.setListPanelVisible);
   const setRightPanelCollapsed = useViewerStore((state) => state.setRightPanelCollapsed);
@@ -562,107 +608,11 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   );
   const desktopShell = isTauri();
 
-  // Check which type geometries exist across ALL loaded models (federation-aware).
-  // PERF: Use meshes.length as dep proxy instead of full geometryResult, and
-  // scan incrementally — once a type is found it stays found, so we only scan
-  // NEW meshes since the last check. Per-model cursors ensure federated models
-  // each track their own scan position independently.
-  const typeGeomScanRef = useRef({
-    spaces: false, openings: false, site: false,
-    legacyLastLen: 0,
-    modelLastLen: new Map<string | number, number>(),
-  });
-  const meshLen = geometryResult?.meshes.length ?? 0;
-  const typeGeometryExists = useMemo(() => {
-    const scan = typeGeomScanRef.current;
-
-    // Reset if legacy meshes array shrunk (new file loaded)
-    if (meshLen < scan.legacyLastLen) {
-      scan.spaces = false;
-      scan.openings = false;
-      scan.site = false;
-      scan.legacyLastLen = 0;
-      scan.modelLastLen.clear();
-    }
-
-    // Already found all types — nothing to do
-    if (scan.spaces && scan.openings && scan.site) {
-      return { spaces: scan.spaces, openings: scan.openings, site: scan.site };
-    }
-
-    // Check federated models (scan only new meshes per model)
-    if (models.size > 0) {
-      for (const [modelId, model] of models) {
-        const meshes = model.geometryResult?.meshes;
-        if (!meshes) continue;
-        const modelStart = scan.modelLastLen.get(modelId) ?? 0;
-        // Reset cursor if model was reloaded (mesh array shrunk)
-        const start = meshes.length < modelStart ? 0 : modelStart;
-        for (let i = start; i < meshes.length; i++) {
-          const t = meshes[i].ifcType;
-          if (t === 'IfcSpace') scan.spaces = true;
-          else if (t === 'IfcOpeningElement') scan.openings = true;
-          else if (t === 'IfcSite') scan.site = true;
-          if (scan.spaces && scan.openings && scan.site) break;
-        }
-        scan.modelLastLen.set(modelId, meshes.length);
-        if (scan.spaces && scan.openings && scan.site) break;
-      }
-    }
-
-    // Legacy single-model path (scan only new meshes)
-    if (geometryResult?.meshes) {
-      const meshes = geometryResult.meshes;
-      for (let i = scan.legacyLastLen; i < meshes.length; i++) {
-        const t = meshes[i].ifcType;
-        if (t === 'IfcSpace') scan.spaces = true;
-        else if (t === 'IfcOpeningElement') scan.openings = true;
-        else if (t === 'IfcSite') scan.site = true;
-        if (scan.spaces && scan.openings && scan.site) break;
-      }
-    }
-
-    scan.legacyLastLen = meshLen;
-    return { spaces: scan.spaces, openings: scan.openings, site: scan.site };
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- meshLen is a stable proxy for geometryResult
-  }, [models, meshLen]);
-
-  // IfcAnnotation / IfcGrid have no body mesh, so they can't be detected via
-  // the mesh scan. Look up the entity table directly. byType keys are
-  // uppercase STEP names but cache loads sometimes preserve PascalCase.
-  //
-  // Issue #862 split these into separate visibility toggles — files that
-  // ship only one of the two need only that menu entry. Some files ship
-  // only grids (Snowdon Towers Structural — no IfcAnnotation) so probing
-  // each independently is required.
-  const hasIfcEntities = useMemo(() => {
-    const probe = (store: typeof ifcDataStore | undefined) => {
-      const byType = store?.entityIndex?.byType;
-      if (!byType) return { annotations: false, grid: false };
-      return {
-        annotations: (byType.get('IFCANNOTATION')?.length ?? 0) > 0
-          || (byType.get('IfcAnnotation')?.length ?? 0) > 0,
-        grid: (byType.get('IFCGRID')?.length ?? 0) > 0
-          || (byType.get('IfcGrid')?.length ?? 0) > 0,
-      };
-    };
-    let annotations = false;
-    let grid = false;
-    if (models.size > 0) {
-      for (const [, m] of models) {
-        const p = probe(m.ifcDataStore);
-        annotations ||= p.annotations;
-        grid ||= p.grid;
-      }
-    } else {
-      const p = probe(ifcDataStore);
-      annotations = p.annotations;
-      grid = p.grid;
-    }
-    return { annotations, grid };
-  }, [models, ifcDataStore]);
-  const hasIfcAnnotations = hasIfcEntities.annotations;
-  const hasIfcGrid = hasIfcEntities.grid;
+  // NOTE: The Class Visibility dropdown used to gate each toggle on whether
+  // the loaded model actually contained that class (scanning meshes for
+  // Spaces/Openings/Site and probing the entity table for Annotations/Grids).
+  // That gating was removed: the toggles are persisted user preferences, so
+  // they now render unconditionally and stay sticky across models and reloads.
 
   const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files;
@@ -811,7 +761,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     setScriptPanelVisible,
   ]);
 
-  const handleToggleRightPanel = useCallback((panel: 'bcf' | 'ids' | 'lens' | 'addElement' | 'extensions') => {
+  const handleToggleRightPanel = useCallback((panel: 'bcf' | 'ids' | 'lens' | 'clash' | 'addElement' | 'extensions') => {
     if (activeAnalysisExtension?.placement !== 'bottom') {
       closeActiveAnalysisExtension();
     }
@@ -828,6 +778,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     const nextBcfVisible = panel === 'bcf' ? !bcfPanelVisible : false;
     const nextIdsVisible = panel === 'ids' ? !idsPanelVisible : false;
     const nextLensVisible = panel === 'lens' ? !lensPanelVisible : false;
+    const nextClashVisible = panel === 'clash' ? !clashPanelVisible : false;
     const nextExtensionsVisible = panel === 'extensions' ? !extensionsPanelVisible : false;
     const isAddElementActive = activeTool === 'addElement';
     const nextAddElementActive = panel === 'addElement' ? !isAddElementActive : false;
@@ -835,6 +786,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     setBcfPanelVisible(nextBcfVisible);
     setIdsPanelVisible(nextIdsVisible);
     setLensPanelVisible(nextLensVisible);
+    setClashPanelVisible(nextClashVisible);
     setExtensionsPanelVisible(nextExtensionsVisible);
 
     if (panel === 'addElement') {
@@ -843,19 +795,21 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
       setActiveTool('select');
     }
 
-    if (nextBcfVisible || nextIdsVisible || nextLensVisible || nextExtensionsVisible || nextAddElementActive) {
+    if (nextBcfVisible || nextIdsVisible || nextLensVisible || nextClashVisible || nextExtensionsVisible || nextAddElementActive) {
       setRightPanelCollapsed(false);
     }
   }, [
     activeAnalysisExtension?.placement,
     activeTool,
     bcfPanelVisible,
+    clashPanelVisible,
     extensionsPanelVisible,
     idsPanelVisible,
     lensPanelVisible,
     requireDesktopFeature,
     setActiveTool,
     setBcfPanelVisible,
+    setClashPanelVisible,
     setExtensionsPanelVisible,
     setIdsPanelVisible,
     setLensPanelVisible,
@@ -889,6 +843,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     setBcfPanelVisible(false);
     setIdsPanelVisible(false);
     setLensPanelVisible(false);
+    setClashPanelVisible(false);
     setExtensionsPanelVisible(false);
     // The right slot is single-tenant: when an analysis extension takes
     // it over, the AddElement tool must release it too, otherwise its 3D
@@ -903,6 +858,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     analysisExtensionState.extensions,
     setActiveTool,
     setBcfPanelVisible,
+    setClashPanelVisible,
     setExtensionsPanelVisible,
     setGanttPanelVisible,
     setIdsPanelVisible,
@@ -920,6 +876,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     if (bcfPanelVisible) panels.add('bcf');
     if (idsPanelVisible) panels.add('ids');
     if (lensPanelVisible) panels.add('lens');
+    if (clashPanelVisible) panels.add('clash');
     if (extensionsPanelVisible) panels.add('extensions');
     if (activeTool === 'addElement') panels.add('addElement');
     if (analysisExtensionState.activeId) panels.add(analysisExtensionState.activeId);
@@ -928,6 +885,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     activeTool,
     analysisExtensionState.activeId,
     bcfPanelVisible,
+    clashPanelVisible,
     extensionsPanelVisible,
     ganttPanelVisible,
     idsPanelVisible,
@@ -945,6 +903,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     if (activeWorkspacePanels.has('bcf')) return 'BCF Issues';
     if (activeWorkspacePanels.has('ids')) return 'IDS Validation';
     if (activeWorkspacePanels.has('lens')) return 'Lens Rules';
+    if (activeWorkspacePanels.has('clash')) return 'Clash Detection';
     if (activeWorkspacePanels.has('extensions')) return 'Extensions';
     if (activeWorkspacePanels.has('addElement')) return 'Add Element';
     return activeAnalysisExtension?.label ?? 'Analysis';
@@ -1299,6 +1258,13 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
             <Palette className="h-4 w-4 mr-2" />
             Lens Rules
           </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={activeWorkspacePanels.has('clash')}
+            onCheckedChange={() => handleToggleRightPanel('clash')}
+          >
+            <Crosshair className="h-4 w-4 mr-2" />
+            Clash Detection
+          </DropdownMenuCheckboxItem>
           <DropdownMenuSeparator />
           <DropdownMenuLabel className="text-[10px] uppercase tracking-wide text-muted-foreground">
             Author
@@ -1534,9 +1500,9 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
                 // Stay enabled even with no model loaded — the dropdown
                 // also exposes load-time settings (Merge Multilayer
                 // Walls) that the user should be able to set BEFORE
-                // opening a file. Runtime items inside self-gate via
-                // typeGeometryExists.
-                aria-label={mergeLayers ? 'Class Visibility (Merge Multilayer Walls is on)' : 'Class Visibility'}
+                // opening a file. The class toggles are persisted
+                // preferences, so they always render too.
+                aria-label={mergeLayers ? 'Visibility (Merge Multilayer Walls is on)' : 'Visibility'}
                 className="relative"
               >
                 <Filter className="h-4 w-4" />
@@ -1553,79 +1519,93 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
             </DropdownMenuTrigger>
           </TooltipTrigger>
           <TooltipContent>
-            {mergeLayers ? 'Class Visibility · Merge Multilayer Walls is on' : 'Class Visibility'}
+            {mergeLayers ? 'Visibility · Merge Multilayer Walls is on' : 'Visibility'}
           </TooltipContent>
         </Tooltip>
-        <DropdownMenuContent className="w-72">
-          {typeGeometryExists.spaces && (
-            <DropdownMenuCheckboxItem
-              checked={typeVisibility.spaces}
-              onCheckedChange={() => toggleTypeVisibility('spaces')}
-            >
-              <Box className="h-4 w-4 mr-2" style={{ color: '#33d9ff' }} />
-              Show Spaces
-            </DropdownMenuCheckboxItem>
-          )}
-          {typeGeometryExists.openings && (
-            <DropdownMenuCheckboxItem
-              checked={typeVisibility.openings}
-              onCheckedChange={() => toggleTypeVisibility('openings')}
-            >
-              <SquareX className="h-4 w-4 mr-2" style={{ color: '#ff6b4a' }} />
-              Show Openings
-            </DropdownMenuCheckboxItem>
-          )}
-          {typeGeometryExists.site && (
-            <DropdownMenuCheckboxItem
-              checked={typeVisibility.site}
-              onCheckedChange={() => toggleTypeVisibility('site')}
-            >
-              <Building2 className="h-4 w-4 mr-2" style={{ color: '#66cc4d' }} />
-              Show Site
-            </DropdownMenuCheckboxItem>
-          )}
-          {hasIfcAnnotations && (
-            <DropdownMenuCheckboxItem
-              checked={typeVisibility.ifcAnnotations}
-              onCheckedChange={() => toggleTypeVisibility('ifcAnnotations')}
-            >
-              <Pencil className="h-4 w-4 mr-2" style={{ color: '#e4b400' }} />
-              Show Annotations
-            </DropdownMenuCheckboxItem>
-          )}
-          {hasIfcGrid && (
-            <DropdownMenuCheckboxItem
-              checked={typeVisibility.ifcGrid}
-              onCheckedChange={() => toggleTypeVisibility('ifcGrid')}
-            >
-              <Pencil className="h-4 w-4 mr-2" style={{ color: '#e4b400' }} />
-              Show Grids
-            </DropdownMenuCheckboxItem>
-          )}
-
-          {/* Load-time toggles live below the runtime visibility
-              switches — they apply on next model open rather than
-              affecting the current scene. The subheader makes that
-              boundary visible at a glance. */}
-          <DropdownMenuSeparator />
-          <DropdownMenuLabel className="px-2 pt-1 pb-0.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-            Load Settings
-          </DropdownMenuLabel>
-          <DropdownMenuCheckboxItem
-            checked={mergeLayers}
-            onCheckedChange={(next) => setMergeLayers(next === true)}
-            // Use items-start so the checkmark and icon line up with
-            // the primary label while the description wraps below.
-            className="items-start gap-2 py-2"
-          >
-            <Layers2 className="h-4 w-4 mr-2 mt-0.5 shrink-0 text-primary" />
-            <div className="flex flex-col gap-0.5 min-w-0">
-              <span className="text-sm font-medium leading-tight">Merge Multilayer Walls</span>
-              <span className="text-[11px] leading-tight text-muted-foreground">
-                Render walls as 1 solid · Applies on reload
+        {/*
+          Settings-style panel (not a list of menu-items): each row is a
+          plain <label> wrapping a right-aligned Switch, so toggling does
+          NOT close the menu — users routinely flip several classes in one
+          pass. State reads two ways: the switch position and the row
+          dimming when off. All five render unconditionally (persisted
+          preferences, sticky across models/reloads); toggling a class the
+          model lacks is a no-op.
+        */}
+        <DropdownMenuContent align="start" className="w-[300px] p-1.5">
+          <div className="flex items-center justify-between gap-2 px-1.5 pb-1 pt-0.5">
+            <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+              Visibility
+            </span>
+            <div className="flex items-center gap-1">
+              <span className="text-[11px] tabular-nums text-muted-foreground/80">
+                {visibleClassCount}/5
               </span>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 px-1.5 text-[11px] font-medium text-muted-foreground hover:text-foreground"
+                onClick={resetTypeVisibility}
+              >
+                Reset
+              </Button>
             </div>
-          </DropdownMenuCheckboxItem>
+          </div>
+
+          <ClassVisibilityRow
+            icon={<Box className="h-4 w-4 shrink-0" style={{ color: '#33d9ff' }} />}
+            label="Spaces"
+            description="Room & zone volumes"
+            checked={typeVisibility.spaces}
+            onChange={() => toggleTypeVisibility('spaces')}
+          />
+          <ClassVisibilityRow
+            icon={<SquareX className="h-4 w-4 shrink-0" style={{ color: '#ff6b4a' }} />}
+            label="Openings"
+            description="Door & window voids"
+            checked={typeVisibility.openings}
+            onChange={() => toggleTypeVisibility('openings')}
+          />
+          <ClassVisibilityRow
+            icon={<Building2 className="h-4 w-4 shrink-0" style={{ color: '#66cc4d' }} />}
+            label="Site"
+            description="Terrain & context"
+            checked={typeVisibility.site}
+            onChange={() => toggleTypeVisibility('site')}
+          />
+          <ClassVisibilityRow
+            icon={<Pencil className="h-4 w-4 shrink-0" style={{ color: '#e4b400' }} />}
+            label="Annotations"
+            description="Text, dimensions, leaders"
+            checked={typeVisibility.ifcAnnotations}
+            onChange={() => toggleTypeVisibility('ifcAnnotations')}
+          />
+          <ClassVisibilityRow
+            icon={<Grid3x3 className="h-4 w-4 shrink-0" style={{ color: '#e4b400' }} />}
+            label="Grids"
+            description="Structural axes"
+            checked={typeVisibility.ifcGrid}
+            onChange={() => toggleTypeVisibility('ifcGrid')}
+          />
+
+          <DropdownMenuSeparator className="my-1" />
+
+          {/* Merge multilayer walls rebuilds geometry, so unlike the live
+              toggles above it only takes effect on the next model load.
+              The "· on reload" suffix carries that nuance inline — keeps
+              the row identical in shape to the others (no header, no chip
+              crowding the long label). */}
+          <label className="group flex items-center justify-between gap-3 rounded-md px-2 py-1.5 cursor-pointer hover:bg-muted/50 transition-colors">
+            <span className={cn('flex items-center gap-2.5 min-w-0 transition-opacity', !mergeLayers && 'opacity-50')}>
+              <Layers2 className="h-4 w-4 shrink-0 text-primary" />
+              <span className="grid gap-0.5 min-w-0">
+                <span className="text-sm leading-tight truncate">Merge multilayer walls</span>
+                <span className="text-[10px] leading-tight text-muted-foreground truncate">
+                  Render walls as one solid · on reload
+                </span>
+              </span>
+            </span>
+            <Switch checked={mergeLayers} onCheckedChange={(next) => setMergeLayers(next === true)} />
+          </label>
         </DropdownMenuContent>
       </DropdownMenu>
 

package/src/components/viewer/ViewerLayout.tsx

@@ -28,6 +28,7 @@ import { HoverTooltip } from './HoverTooltip';
 import { BCFPanel } from './BCFPanel';
 import { IDSPanel } from './IDSPanel';
 import { LensPanel } from './LensPanel';
+import { ClashPanel } from './ClashPanel';
 import { ListPanel } from './lists/ListPanel';
 import { ScriptPanel } from './ScriptPanel';
 import { GanttPanel } from './schedule/GanttPanel';
@@ -132,6 +133,8 @@ export function ViewerLayout() {
   const setListPanelVisible = useViewerStore((s) => s.setListPanelVisible);
   const lensPanelVisible = useViewerStore((s) => s.lensPanelVisible);
   const setLensPanelVisible = useViewerStore((s) => s.setLensPanelVisible);
+  const clashPanelVisible = useViewerStore((s) => s.clashPanelVisible);
+  const setClashPanelVisible = useViewerStore((s) => s.setClashPanelVisible);
   const scriptPanelVisible = useViewerStore((s) => s.scriptPanelVisible);
   const setScriptPanelVisible = useViewerStore((s) => s.setScriptPanelVisible);
   const ganttPanelVisible = useViewerStore((s) => s.ganttPanelVisible);
@@ -342,6 +345,8 @@ export function ViewerLayout() {
                       <AddElementPanel onClose={() => setActiveTool('select')} />
                     ) : lensPanelVisible ? (
                       <LensPanel onClose={() => setLensPanelVisible(false)} />
+                    ) : clashPanelVisible ? (
+                      <ClashPanel onClose={() => setClashPanelVisible(false)} />
                     ) : idsPanelVisible ? (
                       <IDSPanel onClose={() => setIdsPanelVisible(false)} />
                     ) : bcfPanelVisible ? (

package/src/components/viewer/Viewport.tsx

@@ -45,6 +45,7 @@ import {
   useSymbolicAnnotationsRichData,
   type SectionClipForGrid,
 } from '../../hooks/useSymbolicAnnotations.js';
+import { useAlignmentLines3D } from '../../hooks/useAlignmentLines3D.js';
 
 interface ViewportProps {
   geometry: MeshData[] | null;
@@ -652,19 +653,43 @@ export function Viewport({
           calculateScale();
         },
         frameSelection: () => {
-          // Frame selection - zoom to fit selected element
-          const selectedId = selectedEntityIdRef.current;
+          // Frame the current selection. Prefer the full multi-selection set
+          // (Ctrl-click, box-select, a clash pair) so the camera encloses EVERY
+          // selected element; fall back to the single primary id. The set is
+          // kept in sync with selection (cleared on a plain click), so the
+          // union is always an accurate frame of what's highlighted.
           const geom = geometryRef.current;
-          if (selectedId !== null && geom) {
-            const bounds = getEntityBounds(geom, selectedId);
-            if (bounds) {
-              camera.frameBounds(bounds.min, bounds.max, 300);
-              calculateScale();
+          const set = selectedEntityIdsRef.current;
+          const single = selectedEntityIdRef.current;
+          const ids = set && set.size > 0
+            ? Array.from(set)
+            : single !== null ? [single] : [];
+          if (!geom || ids.length === 0) {
+            console.warn('[Viewport] frameSelection: No selection or geometry');
+            return;
+          }
+          let min: { x: number; y: number; z: number } | null = null;
+          let max: { x: number; y: number; z: number } | null = null;
+          for (const id of ids) {
+            const b = getEntityBounds(geom, id);
+            if (!b) continue;
+            if (!min || !max) {
+              min = { x: b.min.x, y: b.min.y, z: b.min.z };
+              max = { x: b.max.x, y: b.max.y, z: b.max.z };
             } else {
-              console.warn('[Viewport] frameSelection: Could not get bounds for selected element');
+              min.x = Math.min(min.x, b.min.x);
+              min.y = Math.min(min.y, b.min.y);
+              min.z = Math.min(min.z, b.min.z);
+              max.x = Math.max(max.x, b.max.x);
+              max.y = Math.max(max.y, b.max.y);
+              max.z = Math.max(max.z, b.max.z);
             }
+          }
+          if (min && max) {
+            camera.frameBounds(min, max, 300);
+            calculateScale();
           } else {
-            console.warn('[Viewport] frameSelection: No selection or geometry');
+            console.warn('[Viewport] frameSelection: Could not get bounds for selected element');
           }
         },
         orbit: (deltaX: number, deltaY: number) => {
@@ -862,6 +887,20 @@ export function Viewport({
     }
   }, [annotationVertices3D, isInitialized]);
 
+  // IfcAlignment centerlines render as thin lines (not a ribbon mesh), always
+  // on — see useAlignmentLines3D. Upload/clear mirrors the annotation overlay;
+  // a separate renderer buffer keeps alignment visibility independent.
+  const alignmentVertices3D = useAlignmentLines3D();
+  useEffect(() => {
+    const renderer = rendererRef.current;
+    if (!renderer || !isInitialized) return;
+    if (alignmentVertices3D.length === 0) {
+      renderer.clearAlignmentLines3D();
+    } else {
+      renderer.uploadAlignmentLines3D(alignmentVertices3D);
+    }
+  }, [alignmentVertices3D, isInitialized]);
+
   // Upload IfcAnnotation text + fill data for the WebGPU symbolic overlay
   // pipelines. Map the hook's per-annotation records into the SymbolicFillInput
   // / SymbolicTextInput shape the renderer expects. Empty arrays clear cleanly.
@@ -1056,6 +1095,7 @@ export function Viewport({
     geometryContentVersion,
     coordinateInfo,
     isStreaming,
+    modelCount: modelIdToIndex?.size ?? 0,
     geometryBoundsRef,
     pendingColorUpdates,
     pendingMeshColorUpdates,

package/src/components/viewer/ViewportContainer.tsx

@@ -39,6 +39,26 @@ const DEFAULT_COORDINATE_INFO: CoordinateInfo = {
   hasLargeCoordinates: false,
 };
 
+type Vec3Bounds = { min: { x: number; y: number; z: number }; max: { x: number; y: number; z: number } };
+
+/** True for a real (non-placeholder, non-degenerate) bounds box. */
+function isUsableBounds(b: Vec3Bounds | undefined): b is Vec3Bounds {
+  if (!b) return false;
+  return (
+    b.max.x > b.min.x || b.max.y > b.min.y || b.max.z > b.min.z
+  );
+}
+
+/** Axis-aligned union of two bounds boxes (either may be undefined). */
+function unionBounds(acc: Vec3Bounds | undefined, b: Vec3Bounds | undefined): Vec3Bounds | undefined {
+  if (!isUsableBounds(b)) return acc;
+  if (!acc) return { min: { ...b.min }, max: { ...b.max } };
+  return {
+    min: { x: Math.min(acc.min.x, b.min.x), y: Math.min(acc.min.y, b.min.y), z: Math.min(acc.min.z, b.min.z) },
+    max: { x: Math.max(acc.max.x, b.max.x), y: Math.max(acc.max.y, b.max.y), z: Math.max(acc.max.z, b.max.z) },
+  };
+}
+
 export function ViewportContainer() {
   // Drive Stacked / Solo / Exploded level display from the slice.
   // Mount-once hook — it self-gates on mode + gap + model changes.
@@ -121,7 +141,16 @@ export function ViewportContainer() {
     if (storeModels.size > 1) {
       let totalVertices = 0;
       let totalTriangles = 0;
-      let mergedCoordinateInfo: CoordinateInfo | undefined;
+      // The merged coordinateInfo must cover ALL visible models, not just the
+      // first one — the renderer fits the camera to `shiftedBounds`, so a
+      // first-wins box left every model after the first off-screen (it only
+      // showed its 2D grid overlay). Union the bounds across visible models;
+      // keep the first model's frame metadata (originShift / RTC) since
+      // federated models share a coordinate frame.
+      let baseCoordInfo: CoordinateInfo | undefined;
+      let unionedShifted: Vec3Bounds | undefined;
+      let unionedOriginal: Vec3Bounds | undefined;
+      let anyLargeCoords = false;
       let shouldRebuild = false;
 
       if (mergedLengthsRef.current.size !== storeModels.size) {
@@ -142,8 +171,12 @@ export function ViewportContainer() {
         const meshCount = model.visible ? (modelGeometry?.meshes.length ?? 0) : 0;
         totalVertices += model.visible ? (modelGeometry?.totalVertices ?? 0) : 0;
         totalTriangles += model.visible ? (modelGeometry?.totalTriangles ?? 0) : 0;
-        if (!mergedCoordinateInfo && model.visible && modelGeometry?.coordinateInfo) {
-          mergedCoordinateInfo = modelGeometry.coordinateInfo;
+        if (model.visible && modelGeometry?.coordinateInfo) {
+          const ci = modelGeometry.coordinateInfo;
+          if (!baseCoordInfo) baseCoordInfo = ci;
+          anyLargeCoords = anyLargeCoords || !!ci.hasLargeCoordinates;
+          unionedShifted = unionBounds(unionedShifted, ci.shiftedBounds);
+          unionedOriginal = unionBounds(unionedOriginal, ci.originalBounds);
         }
 
         if (
@@ -187,6 +220,15 @@ export function ViewportContainer() {
         }
       }
 
+      const mergedCoordinateInfo: CoordinateInfo | undefined = baseCoordInfo
+        ? {
+            ...baseCoordInfo,
+            originalBounds: unionedOriginal ?? baseCoordInfo.originalBounds,
+            shiftedBounds: unionedShifted ?? baseCoordInfo.shiftedBounds,
+            hasLargeCoordinates: anyLargeCoords,
+          }
+        : undefined;
+
       return {
         meshes: mergedCacheRef.current,
         totalVertices,