@ifc-lite/viewer 1.25.1 → 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,94 +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 has no body mesh, so it can't be detected via the mesh scan.
-  // Look up the entity table directly. byType keys are uppercase STEP names
-  // ('IFCANNOTATION') but cache loads sometimes preserve PascalCase too.
-  // Symbolic 2D overlays cover BOTH IfcAnnotation (text, dimensions, leader
-  // lines, filled regions) AND IfcGrid (axis lines + synthesized bubble +
-  // tag). Some files ship only grids (Snowdon Towers Structural is the
-  // canonical example — no IfcAnnotation at all), so the toggle must
-  // surface for either entity type or grid-only models get no way to hide
-  // the overlay.
-  const hasIfcAnnotations = useMemo(() => {
-    const has = (store: typeof ifcDataStore | undefined) => {
-      const byType = store?.entityIndex?.byType;
-      if (!byType) return false;
-      return (byType.get('IFCANNOTATION')?.length ?? 0) > 0
-        || (byType.get('IfcAnnotation')?.length ?? 0) > 0
-        || (byType.get('IFCGRID')?.length ?? 0) > 0
-        || (byType.get('IfcGrid')?.length ?? 0) > 0;
-    };
-    if (models.size > 0) {
-      for (const [, m] of models) if (has(m.ifcDataStore)) return true;
-    }
-    return has(ifcDataStore);
-  }, [models, ifcDataStore]);
+  // 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;
@@ -798,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();
     }
@@ -815,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;
@@ -822,6 +786,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     setBcfPanelVisible(nextBcfVisible);
     setIdsPanelVisible(nextIdsVisible);
     setLensPanelVisible(nextLensVisible);
+    setClashPanelVisible(nextClashVisible);
     setExtensionsPanelVisible(nextExtensionsVisible);
 
     if (panel === 'addElement') {
@@ -830,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,
@@ -876,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
@@ -890,6 +858,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     analysisExtensionState.extensions,
     setActiveTool,
     setBcfPanelVisible,
+    setClashPanelVisible,
     setExtensionsPanelVisible,
     setGanttPanelVisible,
     setIdsPanelVisible,
@@ -907,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);
@@ -915,6 +885,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     activeTool,
     analysisExtensionState.activeId,
     bcfPanelVisible,
+    clashPanelVisible,
     extensionsPanelVisible,
     ganttPanelVisible,
     idsPanelVisible,
@@ -932,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';
@@ -1286,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
@@ -1521,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" />
@@ -1540,70 +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 & 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

@@ -40,7 +40,12 @@ import { useGeometryStreaming } from './useGeometryStreaming.js';
 import { usePointCloudSync } from './usePointCloudSync.js';
 import { usePointCloudLifecycle } from './usePointCloudLifecycle.js';
 import { useRenderUpdates } from './useRenderUpdates.js';
-import { useSymbolicAnnotations, useSymbolicAnnotationsRichData } from '../../hooks/useSymbolicAnnotations.js';
+import {
+  useSymbolicAnnotations,
+  useSymbolicAnnotationsRichData,
+  type SectionClipForGrid,
+} from '../../hooks/useSymbolicAnnotations.js';
+import { useAlignmentLines3D } from '../../hooks/useAlignmentLines3D.js';
 
 interface ViewportProps {
   geometry: MeshData[] | null;
@@ -622,8 +627,19 @@ export function Viewport({
           calculateScale();
         },
         home: () => {
-          // Reset to isometric view
-          camera.zoomToFit(geometryBoundsRef.current.min, geometryBoundsRef.current.max, 500);
+          // Adaptive home: compact buildings get the historical SE isometric
+          // pose (1:1 with the old behaviour), linear infrastructure gets a
+          // side-on view at a distance where signals / referents are visible
+          // instead of receding to sub-pixel. The policy is computed from
+          // the current bbox shape so a federation that swaps from one
+          // building to a railway picks the right pose on Home press.
+          // See packages/renderer/src/camera-fit-policy.ts.
+          const canvas = rendererRef.current?.getCanvas();
+          const canvasShort = Math.min(canvas?.height ?? 0, canvas?.width ?? 0);
+          camera.fitBoundsAdaptive(
+            { min: geometryBoundsRef.current.min, max: geometryBoundsRef.current.max },
+            { animate: true, duration: 500, viewportShortPx: canvasShort > 0 ? canvasShort : undefined },
+          );
           calculateScale();
         },
         zoomIn: () => {
@@ -637,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) => {
@@ -787,6 +827,11 @@ export function Viewport({
   // storey model shows all storeys' annotations layered correctly in 3D
   // (issue #653). Parsing is lazy and only runs while the toggle is on.
   const ifcAnnotationsVisible = useViewerStore((s) => s.typeVisibility.ifcAnnotations);
+  // Issue #862: IfcGrid is a separate toggle from IfcAnnotation. Default
+  // is on so existing users see no change; when the user disables it the
+  // grid axes + bubble tags drop out without affecting dimension/leader
+  // annotation rendering.
+  const ifcGridVisible = useViewerStore((s) => s.typeVisibility.ifcGrid);
   // For annotations whose storey can't be resolved (or whose authored
   // elevation is 0 because the storey Z lives on the placement instead),
   // lift to the middle of the model's vertical span so they don't end up
@@ -799,12 +844,37 @@ export function Viewport({
     if (!Number.isFinite(min) || !Number.isFinite(max) || max <= min) return 0;
     return (min + max) * 0.5;
   }, [coordinateInfo]);
+
+  // Issue #862: section-clip grid lines so dense-grid models stay
+  // readable when a horizontal cut is active. Use a 1.5 m band on each
+  // side of the cut so the cut storey's grids are visible but storeys
+  // 1.5 m+ away are hidden (matches typical residential floor heights).
+  // Only applies to the floor-plan axis (`'down'`) — vertical cuts
+  // don't clip grids since grid lines are inherently vertical.
+  const gridSectionClip = useMemo<SectionClipForGrid | undefined>(() => {
+    if (!sectionPlane.enabled || sectionPlane.axis !== 'down' || !sectionRange) {
+      return undefined;
+    }
+    const posWorld = sectionRange.min + (sectionPlane.position / 100) * (sectionRange.max - sectionRange.min);
+    const GRID_CLIP_HALF_BAND_M = 1.5;
+    return {
+      enabled: true,
+      posWorld,
+      viewDepth: GRID_CLIP_HALF_BAND_M,
+      axis: sectionPlane.axis,
+    };
+  }, [sectionPlane.enabled, sectionPlane.axis, sectionPlane.position, sectionRange]);
+
   const annotationVertices3D = useSymbolicAnnotations({
     enabled: ifcAnnotationsVisible,
+    gridEnabled: ifcGridVisible,
+    gridSectionClip,
     fallbackY: annotationFallbackY,
   });
   const { texts: annotationTexts3D, fills: annotationFills3D } = useSymbolicAnnotationsRichData({
     enabled: ifcAnnotationsVisible,
+    gridEnabled: ifcGridVisible,
+    gridSectionClip,
     fallbackY: annotationFallbackY,
   });
   useEffect(() => {
@@ -817,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.
@@ -1011,6 +1095,7 @@ export function Viewport({
     geometryContentVersion,
     coordinateInfo,
     isStreaming,
+    modelCount: modelIdToIndex?.size ?? 0,
     geometryBoundsRef,
     pendingColorUpdates,
     pendingMeshColorUpdates,