@ifc-lite/viewer 1.19.0 → 1.21.0

package/src/components/viewer/Viewport.tsx

@@ -32,6 +32,7 @@ import {
 import { setGlobalCanvasRef, setGlobalRendererRef, clearGlobalRefs } from '../../hooks/useBCF.js';
 
 import { useMouseControls, type MouseState } from './useMouseControls.js';
+import { RectSelectionOverlay, type RectSelectionRect } from './RectSelectionOverlay.js';
 import { useTouchControls, type TouchState } from './useTouchControls.js';
 import { useKeyboardControls } from './useKeyboardControls.js';
 import { useAnimationLoop } from './useAnimationLoop.js';
@@ -71,6 +72,7 @@ export function Viewport({
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const rendererRef = useRef<Renderer | null>(null);
   const [isInitialized, setIsInitialized] = useState(false);
+  const [initError, setInitError] = useState<string | null>(null);
 
   const focusViewportForKeyboardShortcuts = useCallback(() => {
     const canvas = canvasRef.current;
@@ -199,8 +201,17 @@ export function Viewport({
   const { hiddenEntities, isolatedEntities: storeIsolatedEntities } = useVisibilityState();
   const isolatedEntities = computedIsolatedIds ?? storeIsolatedEntities ?? null;
 
-  // Tool state
-  const { activeTool, sectionPlane } = useToolState();
+  // Tool state — `sectionPickMode` arms a face-pick on the next click for
+  // the section tool (issue #243); the action setters are forwarded into
+  // the mouse-controls context.
+  const {
+    activeTool,
+    sectionPlane,
+    sectionPickMode,
+    setSectionPlaneFromFace,
+    setSectionPickMode,
+    setSectionPickPreview,
+  } = useToolState();
 
   // Camera state
   const { updateCameraRotationRealtime, updateScaleRealtime, setCameraCallbacks } = useCameraState();
@@ -282,9 +293,9 @@ export function Viewport({
   // Tokyo Night storm: #1a1b26 = rgb(26, 27, 38)
   const clearColorRef = useRef<[number, number, number, number]>([0.102, 0.106, 0.149, 1]);
   const visualEnhancement = useMemo<VisualEnhancementOptions>(() => ({
-    enabled: visualEnhancementsEnabled,
+    enabled: isMobile ? false : visualEnhancementsEnabled,
     edgeContrast: {
-      enabled: edgeContrastEnabled,
+      enabled: isMobile ? false : edgeContrastEnabled,
       intensity: edgeContrastIntensity,
     },
     contactShading: {
@@ -293,7 +304,7 @@ export function Viewport({
       radius: contactShadingRadius,
     },
     separationLines: {
-      enabled: separationLinesEnabled,
+      enabled: isMobile ? false : separationLinesEnabled,
       quality: isMobile ? 'low' : separationLinesQuality,
       intensity: isMobile ? Math.min(0.4, separationLinesIntensity) : separationLinesIntensity,
       radius: isMobile ? 1.0 : separationLinesRadius,
@@ -349,6 +360,10 @@ export function Viewport({
     didMove: false,
     // Track if multi-touch occurred (prevents false tap-select after pinch/zoom)
     multiTouch: false,
+    // 2-finger gesture detection
+    twoFingerGesture: 'none',
+    gestureDistanceAccum: 0,
+    gesturePanAccum: 0,
   });
 
   // Double-click detection
@@ -386,7 +401,12 @@ export function Viewport({
   const measurementConstraintEdgeRef = useLatestRef(measurementConstraintEdge);
   const sectionPlaneRef = useLatestRef(sectionPlane);
   const sectionRangeRef = useLatestRef(sectionRange);
+  const sectionPickModeRef = useLatestRef(sectionPickMode);
   const visualEnhancementRef = useLatestRef(visualEnhancement);
+  // Renderer model bounds, kept fresh per-render. The face-pick handler
+  // forwards these to the slice so the cardinal-fallback `position` % is
+  // computed against the actual model extents at click time.
+  const modelBoundsRef = useRef<{ min: { x: number; y: number; z: number }; max: { x: number; y: number; z: number } } | null>(null);
 
   // Terrain clip Y from Cesium store (read as ref for animation loop)
   const cesiumTerrainClipY = useViewerStore((s) => s.cesiumTerrainClipY);
@@ -460,9 +480,18 @@ export function Viewport({
       }
     }
 
-    // Set cursor based on active tool
+    // Leaving the section tool disarms face-pick so it doesn't ambush the
+    // user on re-entry to a different tool (issue #243).
+    if (activeTool !== 'section' && sectionPickMode) {
+      setSectionPickMode(false);
+    }
+
+    // Set cursor based on active tool. Section + pick-armed gets a
+    // crosshair to telegraph "click a face".
     if (activeTool === 'measure' || activeTool === 'annotate' || activeTool === 'addElement') {
       canvas.style.cursor = 'crosshair';
+    } else if (activeTool === 'section' && sectionPickMode) {
+      canvas.style.cursor = 'crosshair';
     } else {
       canvas.style.cursor = 'default';
     }
@@ -476,7 +505,7 @@ export function Viewport({
         state.clearAddElementPending();
       }
     }
-  }, [activeTool, activeMeasurement, cancelMeasurement]);
+  }, [activeTool, activeMeasurement, cancelMeasurement, sectionPickMode, setSectionPickMode]);
 
   // Helper: calculate scale bar value (world-space size for 96px scale bar)
   const calculateScale = () => {
@@ -526,6 +555,7 @@ export function Viewport({
     if (!canvas) return;
 
     setIsInitialized(false);
+    setInitError(null);
 
     let aborted = false;
     let resizeObserver: ResizeObserver | null = null;
@@ -537,6 +567,9 @@ export function Viewport({
       return Math.max(64, Math.floor(size / 64) * 64);
     };
 
+    // Use CSS pixel dimensions for canvas. The Renderer.render() method manages
+    // its own dimension alignment via getBoundingClientRect() — do NOT apply DPR
+    // here as it creates a mismatch that causes constant context reconfiguration.
     const rect = canvas.getBoundingClientRect();
     const width = alignToWebGPU(Math.max(1, Math.floor(rect.width)));
     const height = Math.max(1, Math.floor(rect.height));
@@ -552,7 +585,6 @@ export function Viewport({
 
     renderer.init().then(() => {
       if (aborted) return;
-
       setIsInitialized(true);
 
       const camera = renderer.getCamera();
@@ -664,11 +696,10 @@ export function Viewport({
         },
       });
 
-      // ResizeObserver
+      // ResizeObserver — let renderer handle its own dimension alignment
       resizeObserver = new ResizeObserver(() => {
         if (aborted) return;
         const rect = canvas.getBoundingClientRect();
-        // Use same WebGPU alignment as initialization
         const w = alignToWebGPU(Math.max(1, Math.floor(rect.width)));
         const h = Math.max(1, Math.floor(rect.height));
         renderer.resize(w, h);
@@ -678,6 +709,11 @@ export function Viewport({
 
       // Initial render
       renderCurrent();
+    }).catch((err) => {
+      if (aborted) return;
+      const message = err instanceof Error ? err.message : 'Failed to initialize 3D renderer';
+      console.error('[Viewport] Renderer init failed:', message);
+      setInitError(message);
     });
 
     return () => {
@@ -717,6 +753,10 @@ export function Viewport({
   // The animation loop reads this to skip post-processing during rapid camera movement.
   const isInteractingRef = useRef(false);
 
+  // Rectangle-select drag state — populated by useMouseControls during
+  // a Ctrl/⌘ + LMB drag, consumed by RectSelectionOverlay below.
+  const [rectSelection, setRectSelection] = useState<RectSelectionRect | null>(null);
+
   // ===== Extracted hooks =====
   useMouseControls({
     canvasRef,
@@ -728,6 +768,8 @@ export function Viewport({
     snapEnabledRef,
     edgeLockStateRef,
     measurementConstraintEdgeRef,
+    sectionPickModeRef,
+    modelBoundsRef,
     hiddenEntitiesRef,
     isolatedEntitiesRef,
     selectedEntityIdRef,
@@ -751,6 +793,7 @@ export function Viewport({
     handlePickForSelection: (pickResult) => handlePickForSelectionRef.current(pickResult),
     setHoverState,
     clearHover,
+    setRectSelection,
     openContextMenu,
     startMeasurement,
     updateMeasurement,
@@ -769,6 +812,9 @@ export function Viewport({
     calculateScale,
     getPickOptions,
     hasPendingMeasurements,
+    setSectionPlaneFromFace,
+    setSectionPickMode,
+    setSectionPickPreview,
     HOVER_SNAP_THROTTLE_MS,
     SLOW_RAYCAST_THRESHOLD_MS,
     hoverThrottleMs,
@@ -833,6 +879,7 @@ export function Viewport({
     clearColorRef,
     sectionPlaneRef,
     sectionRangeRef,
+    modelBoundsRef,
     visualEnhancementRef,
     selectedEntityIdsRef,
     coordinateInfoRef,
@@ -918,13 +965,34 @@ export function Viewport({
       : undefined;
 
   return (
-    <canvas
-      ref={canvasRef}
-      data-viewport="main"
-      tabIndex={-1}
-      className={`w-full h-full block ${cesiumActive ? 'relative z-[1]' : ''}`}
-      style={canvasStyle}
-      onPointerDown={focusViewportForKeyboardShortcuts}
-    />
+    <div className="relative w-full h-full">
+      <canvas
+        ref={canvasRef}
+        data-viewport="main"
+        tabIndex={-1}
+        className={`w-full h-full block ${cesiumActive ? 'relative z-[1]' : ''}`}
+        style={{ touchAction: 'none', ...canvasStyle }}
+        onPointerDown={focusViewportForKeyboardShortcuts}
+      />
+      {initError && (
+        <div className="absolute inset-0 flex items-center justify-center bg-background/90 z-50 p-4">
+          <div className="text-center max-w-sm space-y-3">
+            <div className="mx-auto w-12 h-12 rounded-full bg-destructive/10 flex items-center justify-center">
+              <svg className="h-6 w-6 text-destructive" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
+              </svg>
+            </div>
+            <p className="font-semibold text-sm">3D Rendering Failed</p>
+            <p className="text-xs text-muted-foreground">{initError}</p>
+            <p className="text-xs text-muted-foreground">
+              Try using Chrome 113+, Edge 113+, or Safari 18+ with WebGPU support.
+            </p>
+          </div>
+        </div>
+      )}
+      {/* Rectangle-select drag visual. Pointer-events:none so the
+          canvas keeps receiving pointer events during the drag. */}
+      <RectSelectionOverlay rect={rectSelection} />
+    </div>
   );
 }

package/src/components/viewer/ViewportContainer.tsx

@@ -5,6 +5,7 @@
 import { useMemo, useRef, useState, useCallback, useEffect, useSyncExternalStore } from 'react';
 import { Viewport } from './Viewport';
 import { ViewportOverlays } from './ViewportOverlays';
+import { MergeLayersBanner } from './MergeLayersBanner';
 import { ToolOverlays } from './ToolOverlays';
 import { AnnotationLayer } from './annotations/AnnotationLayer';
 import { Section2DPanel } from './Section2DPanel';
@@ -22,7 +23,7 @@ import { cacheFileBlobs, formatFileSize, getCachedFile, getRecentFiles, recordRe
 import { isTauri } from '@/lib/platform';
 import { toast } from '@/components/ui/toast';
 import { describeUnsupportedFormat } from '@/hooks/ingest/pointCloudIngest';
-import { Upload, MousePointer, Layers, Info, Command, AlertTriangle, ChevronDown, ExternalLink, Plus, Clock3 } from 'lucide-react';
+import { Upload, MousePointer, Layers, Info, Command, AlertTriangle, ChevronDown, ExternalLink, Plus, Clock3, Sparkles, ArrowUpRight } from 'lucide-react';
 import type { MeshData, CoordinateInfo, GeometryResult, PointCloudAsset } from '@ifc-lite/geometry';
 import { type IfcDataStore } from '@ifc-lite/parser';
 import { getEffectiveGeoreference } from '@/lib/geo/effective-georef';
@@ -215,7 +216,11 @@ export function ViewportContainer() {
         georefMutations.get(modelId),
       );
       if (effective?.projectedCRS?.name && effective.mapConversion) {
-        return { ...effective, sourceModelId: modelId };
+        return {
+          ...effective,
+          sourceModelId: modelId,
+          storeyElevations: ds.spatialHierarchy?.storeyElevations,
+        };
       }
     }
 
@@ -227,7 +232,11 @@ export function ViewportContainer() {
         georefMutations.get('__legacy__'),
       );
       if (effective?.projectedCRS?.name && effective.mapConversion) {
-        return { ...effective, sourceModelId: '__legacy__' };
+        return {
+          ...effective,
+          sourceModelId: '__legacy__',
+          storeyElevations: ifcDataStore.spatialHierarchy?.storeyElevations,
+        };
       }
     }
 
@@ -311,7 +320,7 @@ export function ViewportContainer() {
     const allDropped = Array.from(e.dataTransfer.files);
     const supportedFiles = allDropped.filter(
       f => f.name.endsWith('.ifc') || f.name.endsWith('.ifcx') || f.name.endsWith('.glb')
-        || f.name.toLowerCase().endsWith('.las') || f.name.toLowerCase().endsWith('.laz') || f.name.toLowerCase().endsWith('.ply') || f.name.toLowerCase().endsWith('.pcd') || f.name.toLowerCase().endsWith('.e57')
+        || f.name.toLowerCase().endsWith('.las') || f.name.toLowerCase().endsWith('.laz') || f.name.toLowerCase().endsWith('.ply') || f.name.toLowerCase().endsWith('.pcd') || f.name.toLowerCase().endsWith('.e57') || f.name.toLowerCase().endsWith('.pts') || f.name.toLowerCase().endsWith('.xyz')
     );
 
     if (supportedFiles.length === 0) {
@@ -354,7 +363,7 @@ export function ViewportContainer() {
     // Filter to supported files (IFC, IFCX, GLB)
     const supportedFiles = Array.from(files).filter(
       f => f.name.endsWith('.ifc') || f.name.endsWith('.ifcx') || f.name.endsWith('.glb')
-        || f.name.toLowerCase().endsWith('.las') || f.name.toLowerCase().endsWith('.laz') || f.name.toLowerCase().endsWith('.ply') || f.name.toLowerCase().endsWith('.pcd') || f.name.toLowerCase().endsWith('.e57')
+        || f.name.toLowerCase().endsWith('.las') || f.name.toLowerCase().endsWith('.laz') || f.name.toLowerCase().endsWith('.ply') || f.name.toLowerCase().endsWith('.pcd') || f.name.toLowerCase().endsWith('.e57') || f.name.toLowerCase().endsWith('.pts') || f.name.toLowerCase().endsWith('.xyz')
     );
 
     if (supportedFiles.length === 0) return;
@@ -566,7 +575,7 @@ export function ViewportContainer() {
         <input
           ref={fileInputRef}
           type="file"
-          accept=".ifc,.ifcx,.glb,.las,.laz,.ply,.pcd,.e57"
+          accept=".ifc,.ifcx,.glb,.las,.laz,.ply,.pcd,.e57,.pts,.xyz"
           multiple
           onChange={handleFileSelect}
           className="hidden"
@@ -582,9 +591,9 @@ export function ViewportContainer() {
           </div>
         )}
 
-        {/* WebGPU Not Supported Banner */}
+        {/* WebGPU Not Supported Banner — compact on mobile */}
         {!webgpu.checking && !webgpu.supported && (
-          <div className="absolute top-0 left-0 right-0 z-40">
+          <div className="absolute top-0 left-0 right-0 z-40 max-h-[40vh] overflow-auto">
             {/* Hazard stripes background */}
             <div
               className="absolute inset-0 opacity-10"
@@ -697,8 +706,8 @@ export function ViewportContainer() {
           </div>
         )}
 
-        {/* Empty state content */}
-        <div className="absolute inset-0 flex flex-col items-center justify-center p-8 z-10">
+        {/* Empty state content — mobile-optimized padding and scrollable */}
+        <div className="absolute inset-0 flex flex-col items-center justify-center p-4 md:p-8 z-10 overflow-auto">
 
           {/* Main Card */}
           <div className="max-w-md w-full bg-white dark:bg-[#16161e] border border-zinc-300 dark:border-[#3b4261] p-8 flex flex-col items-center transition-transform hover:-translate-y-1 duration-200 shadow-lg">
@@ -735,10 +744,18 @@ export function ViewportContainer() {
               IFClite
             </h2>
             <p className="text-zinc-500 dark:text-[#565f89] font-mono text-sm text-center mb-8 border-b border-zinc-200 dark:border-[#3b4261] pb-4 w-full">
-              High-performance web viewer demo
+              IFC toolkit for the open web
             </p>
 
-            {/* Action */}
+            {/*
+              Two-track action area: a primary "open file" track and a
+              secondary "drive with LLM" track sit in mirrored slots — same
+              width, same vertical rhythm, each followed by its own caption
+              line. Reads as one balanced composition instead of a primary
+              CTA + a tacked-on link, while keeping the file-open path
+              visually dominant via the filled-on-hover treatment.
+            */}
+            {/* Track 1 — open / drag */}
             <button
               onClick={async () => {
                 if (!webgpu.supported) {
@@ -774,10 +791,33 @@ export function ViewportContainer() {
               <span>{webgpu.checking ? 'Checking WebGPU...' : webgpu.supported ? 'Open .ifc file' : 'WebGPU Required'}</span>
             </button>
 
-            <p className="mt-3 text-xs font-mono text-zinc-400 dark:text-[#565f89]">
+            <p className="mt-2.5 text-[11px] font-mono text-center text-zinc-400 dark:text-[#565f89]">
               {webgpu.supported ? 'or drag & drop anywhere' : 'file upload disabled'}
             </p>
 
+            {/* Subtle "or" rule — anchors the symmetry between the two tracks */}
+            <div className="mt-5 mb-5 w-full flex items-center gap-3 text-[10px] font-mono uppercase tracking-[0.22em] text-zinc-400 dark:text-[#565f89]">
+              <span className="h-px flex-1 bg-zinc-200 dark:bg-[#3b4261]" />
+              <span>or</span>
+              <span className="h-px flex-1 bg-zinc-200 dark:bg-[#3b4261]" />
+            </div>
+
+            {/* Track 2 — agent / MCP. Compact inline pill, self-centred so
+                it reads as a meta-link sibling to the primary file-open
+                CTA, not a competing full-width button. */}
+            <a
+              href="/mcp"
+              className="group inline-flex self-center items-center gap-1.5 px-3 py-1.5 font-mono text-[11px] border border-dashed border-zinc-300 dark:border-[#3b4261] text-zinc-500 dark:text-[#7a82a5] hover:border-primary hover:text-primary transition-all cursor-pointer"
+            >
+              <Sparkles className="h-3 w-3 transition-transform group-hover:-translate-y-0.5" />
+              <span>Drive with any LLM</span>
+              <ArrowUpRight className="h-2.5 w-2.5 opacity-60 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
+            </a>
+
+            <p className="mt-1.5 text-[10px] font-mono text-center text-zinc-400 dark:text-[#565f89]">
+              via MCP · install or try the playground
+            </p>
+
             {recentFiles.length > 0 && (
               <div className="mt-6 w-full border-t border-zinc-200 dark:border-[#3b4261] pt-4">
                 <div className="mb-3 flex items-center gap-2 text-xs font-mono uppercase tracking-[0.2em] text-zinc-400 dark:text-[#565f89]">
@@ -810,8 +850,8 @@ export function ViewportContainer() {
             )}
           </div>
 
-          {/* Feature Grid */}
-          <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-6 max-w-3xl w-full">
+          {/* Feature Grid — hidden on mobile to save viewport space */}
+          <div className="mt-16 hidden md:grid grid-cols-1 md:grid-cols-3 gap-6 max-w-3xl w-full">
             {[
               { icon: MousePointer, label: "Select", desc: "Inspect elements", accentClass: 'text-blue-500 dark:text-[#7aa2f7]' },
               { icon: Layers, label: "Filter", desc: "Isolate storeys", accentClass: 'text-purple-500 dark:text-[#bb9af7]' },
@@ -877,6 +917,7 @@ export function ViewportContainer() {
           coordinateInfo={georef.coordinateInfo}
           geometryResult={mergedGeometryResult}
           lengthUnitScale={georef.lengthUnitScale}
+          storeyElevations={georef.storeyElevations}
         />
       )}
       <Viewport
@@ -893,6 +934,10 @@ export function ViewportContainer() {
       <AnnotationLayer />
       {bcfOverlayVisible && <BCFOverlay />}
       <ViewportOverlays />
+      {/* Issue #540: non-modal "reload to apply" banner anchored to the
+          top of the canvas. Only renders when the user has flipped the
+          merge-layers toggle while a model is in scope. */}
+      <MergeLayersBanner />
       <ToolOverlays />
       <BasketPresentationDock />
       <Section2DPanel

package/src/components/viewer/ViewportOverlays.tsx

@@ -34,6 +34,7 @@ export function ViewportOverlays({ hideViewCube = false }: { hideViewCube?: bool
   const isolatedEntities = useViewerStore((s) => s.isolatedEntities);
   const basketPresentationVisible = useViewerStore((s) => s.basketPresentationVisible);
   const cameraCallbacks = useViewerStore((s) => s.cameraCallbacks);
+  const isMobile = useViewerStore((s) => s.isMobile);
   const setOnCameraRotationChange = useViewerStore((s) => s.setOnCameraRotationChange);
   const setOnScaleChange = useViewerStore((s) => s.setOnScaleChange);
   const { ifcDataStore, geometryResult } = useIfc();
@@ -161,11 +162,19 @@ export function ViewportOverlays({ hideViewCube = false }: { hideViewCube?: bool
           onClose={toggleCesium}
         />
       ) : (
-        <div className="absolute bottom-4 right-4 flex flex-col gap-1 bg-background/80 backdrop-blur-sm rounded-lg border shadow-sm p-1">
+        <div
+          className={cn(
+            'absolute flex flex-col gap-1 bg-background/90 backdrop-blur-sm border p-1',
+            // Mobile: bottom-left at ~15% up from lower edge — thumb-reachable on
+            // portrait phones and well clear of the URL bar. Tight radii + flat
+            // background match the codebase's brutalist panel-chrome vocabulary.
+            isMobile ? 'left-4 bottom-[15%] rounded-md' : 'bottom-4 right-4 rounded-lg shadow-sm',
+          )}
+        >
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon-sm" onClick={handleHome}>
-                <Home className="h-4 w-4" />
+              <Button variant="ghost" size="icon-sm" className={cn(isMobile && 'min-h-[44px] min-w-[44px]')} onClick={handleHome}>
+                <Home className={cn(isMobile ? 'h-5 w-5' : 'h-4 w-4')} />
               </Button>
             </TooltipTrigger>
             <TooltipContent side="left">Home (H)</TooltipContent>
@@ -173,8 +182,8 @@ export function ViewportOverlays({ hideViewCube = false }: { hideViewCube?: bool
 
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon-sm" onClick={handleZoomIn}>
-                <ZoomIn className="h-4 w-4" />
+              <Button variant="ghost" size="icon-sm" className={cn(isMobile && 'min-h-[44px] min-w-[44px]')} onClick={handleZoomIn}>
+                <ZoomIn className={cn(isMobile ? 'h-5 w-5' : 'h-4 w-4')} />
               </Button>
             </TooltipTrigger>
             <TooltipContent side="left">Zoom In (+)</TooltipContent>
@@ -182,8 +191,8 @@ export function ViewportOverlays({ hideViewCube = false }: { hideViewCube?: bool
 
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon-sm" onClick={handleZoomOut}>
-                <ZoomOut className="h-4 w-4" />
+              <Button variant="ghost" size="icon-sm" className={cn(isMobile && 'min-h-[44px] min-w-[44px]')} onClick={handleZoomOut}>
+                <ZoomOut className={cn(isMobile ? 'h-5 w-5' : 'h-4 w-4')} />
               </Button>
             </TooltipTrigger>
             <TooltipContent side="left">Zoom Out (-)</TooltipContent>
@@ -191,17 +200,17 @@ export function ViewportOverlays({ hideViewCube = false }: { hideViewCube?: bool
         </div>
       )}
 
-      {/* Context Info (bottom-center) - Storey names */}
+      {/* Context Info — Storey names. Top-center on mobile (URL bar steals the bottom). */}
       {storeyNames && storeyNames.length > 0 && (
         <div className={cn(
           'absolute left-1/2 -translate-x-1/2 px-4 py-2 bg-background/80 backdrop-blur-sm rounded-full border shadow-sm',
-          basketPresentationVisible ? 'bottom-28' : 'bottom-4',
+          isMobile ? 'top-4' : basketPresentationVisible ? 'bottom-28' : 'bottom-4',
         )}>
           <div className="flex items-center gap-2 text-sm">
             <Layers className="h-4 w-4 text-primary" />
             <span className="font-medium">
-              {storeyNames.length === 1 
-                ? storeyNames[0] 
+              {storeyNames.length === 1
+                ? storeyNames[0]
                 : `${storeyNames.length} storeys`}
             </span>
           </div>
@@ -221,20 +230,22 @@ export function ViewportOverlays({ hideViewCube = false }: { hideViewCube?: bool
         </div>
       )}
 
-      {/* Axis Helper (bottom-left, above scale bar) - IFC Z-up convention */}
-      <div className="absolute bottom-16 left-4">
-        <AxisHelper
-          ref={axisHelperRef}
-          rotationX={initialRotationX}
-          rotationY={initialRotationY}
-        />
-      </div>
-
-      {/* Scale Bar (bottom-left) */}
-      <div className="absolute bottom-4 left-4 flex flex-col items-start gap-1">
-        <div className="h-1 w-24 bg-foreground/80 rounded-full" />
-        <span className="text-xs text-foreground/80">{formatScale(scale)}</span>
-      </div>
+      {/* Axis Helper + Scale Bar — desktop only; mobile keeps the viewport unobstructed */}
+      {!isMobile && (
+        <>
+          <div className="absolute bottom-16 left-4">
+            <AxisHelper
+              ref={axisHelperRef}
+              rotationX={initialRotationX}
+              rotationY={initialRotationY}
+            />
+          </div>
+          <div className="absolute bottom-4 left-4 flex flex-col items-start gap-1">
+            <div className="h-1 w-24 bg-foreground/80 rounded-full" />
+            <span className="text-xs text-foreground/80">{formatScale(scale)}</span>
+          </div>
+        </>
+      )}
     </>
   );
 }
@@ -323,5 +334,9 @@ function CesiumSettingsOverlay({
  */
 function PointCloudPanelMount() {
   const count = useViewerStore((s) => s.pointCloudAssetCount);
-  return <PointCloudPanel assetCount={count} />;
+  // Triangle total comes from the merged geometry result. The panel
+  // gates the BIM↔scan deviation compute button on triangleCount > 0
+  // so the user can't trigger an empty-BVH compute pass.
+  const triangleCount = useViewerStore((s) => s.geometryResult?.totalTriangles ?? 0);
+  return <PointCloudPanel assetCount={count} triangleCount={triangleCount} />;
 }

package/src/components/viewer/mouseHandlerTypes.ts

@@ -56,6 +56,10 @@ export interface MouseHandlerContext {
   snapEnabledRef: MutableRefObject<boolean>;
   edgeLockStateRef: MutableRefObject<EdgeLockState>;
   measurementConstraintEdgeRef: MutableRefObject<MeasurementConstraintEdge | null>;
+  /** Section tool: when true, the next click picks a face for the clip plane (issue #243). */
+  sectionPickModeRef?: MutableRefObject<boolean>;
+  /** Renderer model bounds at click time — passed to `setSectionPlaneFromFace` so the cardinal-fallback `position` percentage is correct. */
+  modelBoundsRef?: MutableRefObject<{ min: { x: number; y: number; z: number }; max: { x: number; y: number; z: number } } | null>;
 
   // Visibility refs
   hiddenEntitiesRef: MutableRefObject<Set<number>>;
@@ -101,6 +105,24 @@ export interface MouseHandlerContext {
   openContextMenu: (entityId: number | null, screenX: number, screenY: number) => void;
   hasPendingMeasurements: () => boolean;
   getPickOptions: () => { isStreaming: boolean; hiddenIds: Set<number>; isolatedIds: Set<number> | null };
+  /** Section face-pick: set the clip plane through a world-space face (issue #243). */
+  setSectionPlaneFromFace?: (
+    normal: [number, number, number],
+    point:  [number, number, number],
+    bounds?: { min: [number, number, number]; max: [number, number, number] },
+  ) => void;
+  /** Section face-pick: arm/disarm the "next click picks a face" mode. */
+  setSectionPickMode?: (enabled: boolean) => void;
+  /**
+   * Section face-pick: set the live hover-preview overlay (issue #243
+   * follow-up). Called by the dwell-aware hover handler in
+   * `useMouseControls.ts` when the cursor pauses ~200ms over a surface,
+   * and with `null` when the preview should hide (cursor leaves the
+   * canvas, moves to a different face, or pick mode is disarmed).
+   */
+  setSectionPickPreview?: (
+    preview: { normal: [number, number, number]; point: [number, number, number]; faceKey: string } | null,
+  ) => void;
 
   // Constants
   HOVER_SNAP_THROTTLE_MS: number;