@ifc-lite/viewer 1.21.0 → 1.22.1

package/src/components/viewer/Viewport.tsx

@@ -46,6 +46,9 @@ interface ViewportProps {
   /** Monotonic counter that increments when geometry changes — used to trigger
    *  streaming effects even when the geometry array reference is stable. */
   geometryVersion?: number;
+  /** Bumps when existing mesh vertex/normal data has been mutated in place
+   *  (e.g. realignFederation). Forces the streaming hook to re-upload buffers. */
+  geometryContentVersion?: number;
   /** Point cloud assets aggregated across visible federated models. */
   pointClouds?: ReadonlyArray<PointCloudAsset> | null;
   coordinateInfo?: CoordinateInfo;
@@ -61,6 +64,7 @@ interface ViewportProps {
 export function Viewport({
   geometry,
   geometryVersion,
+  geometryContentVersion,
   pointClouds,
   coordinateInfo,
   computedIsolatedIds,
@@ -267,8 +271,12 @@ export function Viewport({
   const {
     pendingColorUpdates,
     pendingMeshColorUpdates,
+    pendingMeshRemovals,
+    pendingMeshTranslations,
     clearPendingColorUpdates,
     clearPendingMeshColorUpdates,
+    clearPendingMeshRemovals,
+    clearPendingMeshTranslations,
   } = useColorUpdateState();
 
   // IFC data state
@@ -567,12 +575,17 @@ export function Viewport({
       return Math.max(64, Math.floor(size / 64) * 64);
     };
 
+    // Cap at the conservative WebGPU floor; the renderer re-clamps using the actual
+    // adapter limit once the device is initialized. Without this, tall iframe layouts
+    // can ask for canvas dimensions that exceed 8192 and every texture creation fails.
+    const MAX_CANVAS_DIM = 8192;
+
     // 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));
+    const width = Math.min(MAX_CANVAS_DIM, alignToWebGPU(Math.max(1, Math.floor(rect.width))));
+    const height = Math.min(MAX_CANVAS_DIM, Math.max(1, Math.floor(rect.height)));
     canvas.width = width;
     canvas.height = height;
 
@@ -651,6 +664,33 @@ export function Viewport({
           if (!c) return null;
           return camera.projectToScreen(worldPos, c.width, c.height);
         },
+        unprojectToFloor: (clientX, clientY, worldY) => {
+          // Inverse of projectToScreen, but only against a horizontal
+          // plane at the given world Y. `unprojectToRay` expects
+          // drawing-buffer coords (c.width / c.height) — same space
+          // `projectToScreen` uses above — so we scale the CSS-space
+          // cursor delta by DPR before handing it over. This matches
+          // what raycastStoreyFloor does for the mouse handlers
+          // (after #723 — see the matching fix there).
+          const c = canvasRef.current;
+          if (!c) return null;
+          const rect = c.getBoundingClientRect();
+          const cssX = clientX - rect.left;
+          const cssY = clientY - rect.top;
+          const x = (cssX / rect.width) * c.width;
+          const y = (cssY / rect.height) * c.height;
+          const ray = camera.unprojectToRay(x, y, c.width, c.height);
+          if (!ray) return null;
+          const dy = ray.direction.y;
+          if (Math.abs(dy) < 1e-6) return null;
+          const t = (worldY - ray.origin.y) / dy;
+          if (!Number.isFinite(t) || t <= 0) return null;
+          return {
+            x: ray.origin.x + ray.direction.x * t,
+            y: worldY,
+            z: ray.origin.z + ray.direction.z * t,
+          };
+        },
         setProjectionMode: (mode) => {
           camera.setProjectionMode(mode);
           renderCurrent();
@@ -700,8 +740,8 @@ export function Viewport({
       resizeObserver = new ResizeObserver(() => {
         if (aborted) return;
         const rect = canvas.getBoundingClientRect();
-        const w = alignToWebGPU(Math.max(1, Math.floor(rect.width)));
-        const h = Math.max(1, Math.floor(rect.height));
+        const w = Math.min(MAX_CANVAS_DIM, alignToWebGPU(Math.max(1, Math.floor(rect.width))));
+        const h = Math.min(MAX_CANVAS_DIM, Math.max(1, Math.floor(rect.height)));
         renderer.resize(w, h);
         renderCurrent();
       });
@@ -896,13 +936,18 @@ export function Viewport({
     isInitialized,
     geometry,
     geometryVersion,
+    geometryContentVersion,
     coordinateInfo,
     isStreaming,
     geometryBoundsRef,
     pendingColorUpdates,
     pendingMeshColorUpdates,
+    pendingMeshRemovals,
+    pendingMeshTranslations,
     clearPendingColorUpdates,
     clearPendingMeshColorUpdates,
+    clearPendingMeshRemovals,
+    clearPendingMeshTranslations,
     clearColorRef,
     releaseGeometryAfterFinalize: releaseGeometryAfterStream,
     onGeometryReleased,

package/src/components/viewer/ViewportContainer.tsx

@@ -3,6 +3,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import { useMemo, useRef, useState, useCallback, useEffect, useSyncExternalStore } from 'react';
+import { useLevelDisplayEffect } from '@/hooks/useLevelDisplayEffect';
 import { Viewport } from './Viewport';
 import { ViewportOverlays } from './ViewportOverlays';
 import { MergeLayersBanner } from './MergeLayersBanner';
@@ -12,6 +13,7 @@ import { Section2DPanel } from './Section2DPanel';
 import { BasketPresentationDock } from './BasketPresentationDock';
 import { BCFOverlay } from './bcf/BCFOverlay';
 import { CesiumOverlay } from './CesiumOverlay';
+import { CesiumPlacementEditor } from './CesiumPlacementEditor';
 import { getViewerStoreApi, useViewerStore } from '@/store';
 import { toGlobalIdFromModels } from '@/store/globalId';
 import { collectIfcBuildingStoreyElementsWithIfcSpace } from '@/store/basketVisibleSet';
@@ -23,9 +25,10 @@ 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, Sparkles, ArrowUpRight } from 'lucide-react';
+import { Upload, MousePointer, Layers, Info, Command, AlertTriangle, ChevronDown, ExternalLink, Plus, Clock3, Sparkles, ArrowUpRight, PackagePlus } from 'lucide-react';
+import { createBlankIfcFile } from '@/utils/createBlankIfc';
 import type { MeshData, CoordinateInfo, GeometryResult, PointCloudAsset } from '@ifc-lite/geometry';
-import { type IfcDataStore } from '@ifc-lite/parser';
+import { type IfcDataStore, type MapConversion } from '@ifc-lite/parser';
 import { getEffectiveGeoreference } from '@/lib/geo/effective-georef';
 
 const ZERO_VEC3 = { x: 0, y: 0, z: 0 };
@@ -37,7 +40,12 @@ const DEFAULT_COORDINATE_INFO: CoordinateInfo = {
 };
 
 export function ViewportContainer() {
+  // Drive Stacked / Solo / Exploded level display from the slice.
+  // Mount-once hook — it self-gates on mode + gap + model changes.
+  useLevelDisplayEffect();
+
   const { loadFile, loading, clearAllModels, loadFilesSequentially } = useIfc();
+  const setActiveTool = useViewerStore((s) => s.setActiveTool);
   const releaseGeometryMemory = useViewerStore((s) => s.releaseGeometryMemory);
   const selectedStoreys = useViewerStore((s) => s.selectedStoreys);
   const typeVisibility = useViewerStore((s) => s.typeVisibility);
@@ -46,6 +54,9 @@ export function ViewportContainer() {
   const resetViewerState = useViewerStore((s) => s.resetViewerState);
   const bcfOverlayVisible = useViewerStore((s) => s.bcfOverlayVisible);
   const cesiumEnabled = useViewerStore((s) => s.cesiumEnabled);
+  const cesiumPlacementDraft = useViewerStore((s) => s.cesiumPlacementDraft);
+  const cesiumPlacementDraftModelId = useViewerStore((s) => s.cesiumPlacementDraftModelId);
+  const anchorModelIdOverride = useViewerStore((s) => s.anchorModelIdOverride);
   const georefMutations = useViewerStore((s) => s.georefMutations);
   const setCesiumSourceModelId = useViewerStore((s) => s.setCesiumSourceModelId);
   const setCesiumAvailable = useViewerStore((s) => s.setCesiumAvailable);
@@ -70,8 +81,10 @@ export function ViewportContainer() {
     models,
     boundedGeometryMode,
     geometryUpdateTick,
+    geometryContentVersion,
   } = viewportStoreState;
   const storeModels = models;
+  const mergedContentVersionRef = useRef(geometryContentVersion);
 
   // Check if we have models loaded (for determining add vs replace behavior)
   const hasModelsLoaded = models.size > 0 || (geometryResult?.meshes && geometryResult.meshes.length > 0);
@@ -115,6 +128,15 @@ export function ViewportContainer() {
         shouldRebuild = true;
       }
 
+      // An external content version bump (e.g. realignFederation re-baked
+      // vertices in place) requires a full cache rebuild — length/visibility
+      // triggers above can't detect in-place mutation. Compare against the
+      // last version we honoured; rebuild when it bumps.
+      if (mergedContentVersionRef.current !== geometryContentVersion) {
+        shouldRebuild = true;
+        mergedContentVersionRef.current = geometryContentVersion;
+      }
+
       for (const [modelId, model] of storeModels) {
         const modelGeometry = model.geometryResult;
         const meshCount = model.visible ? (modelGeometry?.meshes.length ?? 0) : 0;
@@ -175,7 +197,7 @@ export function ViewportContainer() {
 
     // Legacy mode (no federation): use original geometryResult
     return geometryResult;
-  }, [storeModels, geometryResult, modelIdToIndex]);
+  }, [storeModels, geometryResult, modelIdToIndex, geometryContentVersion]);
 
   /**
    * Aggregate point clouds across visible models.
@@ -206,8 +228,39 @@ export function ViewportContainer() {
   const georef = useMemo(() => {
     if (!cesiumEnabled) return null;
 
-    // Check federated models first
-    for (const [modelId, model] of storeModels) {
+    const applyPlacementDraft = <T extends { mapConversion?: MapConversion }>(
+      modelId: string,
+      effective: T,
+    ): T & { baseMapConversion?: T['mapConversion'] } => {
+      const preview = cesiumPlacementDraftModelId === modelId ? cesiumPlacementDraft : null;
+      if (!preview || !effective.mapConversion) {
+        return {
+          ...effective,
+          baseMapConversion: effective.mapConversion,
+        };
+      }
+      return {
+        ...effective,
+        baseMapConversion: effective.mapConversion,
+        mapConversion: {
+          ...effective.mapConversion,
+          ...preview,
+        },
+      };
+    };
+
+    // Check federated models, preferring the user-pinned anchor when present.
+    // Matches findReferenceGeorefModel() in useIfcFederation so the Cesium bridge
+    // and the parse-time alignment agree on which model drives the world frame.
+    const orderedModels = (() => {
+      if (!anchorModelIdOverride) return Array.from(storeModels);
+      const entries = Array.from(storeModels);
+      const anchorIdx = entries.findIndex(([id]) => id === anchorModelIdOverride);
+      if (anchorIdx <= 0) return entries;
+      const reordered = [entries[anchorIdx], ...entries.slice(0, anchorIdx), ...entries.slice(anchorIdx + 1)];
+      return reordered;
+    })();
+    for (const [modelId, model] of orderedModels) {
       const ds = model.ifcDataStore;
       if (!ds) continue;
       const effective = getEffectiveGeoreference(
@@ -215,9 +268,14 @@ export function ViewportContainer() {
         model.geometryResult?.coordinateInfo,
         georefMutations.get(modelId),
       );
-      if (effective?.projectedCRS?.name && effective.mapConversion) {
+      if (
+        effective?.projectedCRS?.name
+        && effective.mapConversion
+        && effective.source !== 'siteLocation'
+      ) {
+        const previewed = applyPlacementDraft(modelId, effective);
         return {
-          ...effective,
+          ...previewed,
           sourceModelId: modelId,
           storeyElevations: ds.spatialHierarchy?.storeyElevations,
         };
@@ -231,9 +289,14 @@ export function ViewportContainer() {
         mergedGeometryResult?.coordinateInfo,
         georefMutations.get('__legacy__'),
       );
-      if (effective?.projectedCRS?.name && effective.mapConversion) {
+      if (
+        effective?.projectedCRS?.name
+        && effective.mapConversion
+        && effective.source !== 'siteLocation'
+      ) {
+        const previewed = applyPlacementDraft('__legacy__', effective);
         return {
-          ...effective,
+          ...previewed,
           sourceModelId: '__legacy__',
           storeyElevations: ifcDataStore.spatialHierarchy?.storeyElevations,
         };
@@ -241,7 +304,17 @@ export function ViewportContainer() {
     }
 
     return null;
-  }, [cesiumEnabled, storeModels, ifcDataStore, georefMutations, mutationVersion, mergedGeometryResult]);
+  }, [
+    cesiumEnabled,
+    storeModels,
+    ifcDataStore,
+    georefMutations,
+    mutationVersion,
+    mergedGeometryResult,
+    cesiumPlacementDraft,
+    cesiumPlacementDraftModelId,
+    anchorModelIdOverride,
+  ]);
 
   // Determine whether Cesium button should be visible (model has georef or user added it via mutations).
   // Runs independently of cesiumEnabled so the button appears/disappears reactively.
@@ -256,7 +329,7 @@ export function ViewportContainer() {
           model.geometryResult?.coordinateInfo,
           georefMutations.get(modelId),
         );
-        if (effective?.projectedCRS?.name) return true;
+        if (effective?.projectedCRS?.name && effective.source !== 'siteLocation') return true;
       }
       // Fallback to legacy single-model
       if (ifcDataStore) {
@@ -265,7 +338,7 @@ export function ViewportContainer() {
           mergedGeometryResult?.coordinateInfo,
           georefMutations.get('__legacy__'),
         );
-        if (effective?.projectedCRS?.name) return true;
+        if (effective?.projectedCRS?.name && effective.source !== 'siteLocation') return true;
       }
       return false;
     }
@@ -387,6 +460,17 @@ export function ViewportContainer() {
     e.target.value = '';
   }, [loadFile, loadFilesSequentially, resetViewerState, clearAllModels, webgpu.supported]);
 
+  const handleStartBlank = useCallback(async () => {
+    if (!webgpu.supported) return;
+    void logToDesktopTerminal('info', '[ViewportContainer] Start blank IFC clicked');
+    const file = createBlankIfcFile();
+    // Must await: loadFile() calls resetViewerState() internally which
+    // resets activeTool back to 'select'. Setting addElement before that
+    // races and leaves the user in select mode despite the click.
+    await loadFile(file);
+    setActiveTool('addElement');
+  }, [webgpu.supported, loadFile, setActiveTool]);
+
   const hasGeometry = mergedGeometryResult?.meshes && mergedGeometryResult.meshes.length > 0;
 
   // Check if any models are loaded (even if hidden) - used to show empty 3D vs starting UI
@@ -442,14 +526,13 @@ export function ViewportContainer() {
         if (ifcType === 'IfcSite' && !typeVisibility.site) continue;
       }
 
-      if (ifcType === 'IfcSpace' || ifcType === 'IfcOpeningElement') {
-        cache.push({
-          ...mesh,
-          color: [mesh.color[0], mesh.color[1], mesh.color[2], Math.min(mesh.color[3] * 0.3, 0.3)],
-        });
-      } else {
-        cache.push(mesh);
-      }
+      // Mesh alpha flows through unchanged. The previous code re-multiplied
+      // IfcSpace / IfcOpeningElement alpha down to <= 0.3 here, which stomped
+      // lens / Pset colour rules even when the user explicitly chose alpha 1.0.
+      // Defaults still come from styling.rs / default-materials.ts; the
+      // renderer promotes overridden entities to the opaque pipeline so the
+      // overlay paint pass finds matching depth. See issue #677.
+      cache.push(mesh);
     }
 
     filteredSourceLenRef.current = allMeshes.length;
@@ -802,20 +885,37 @@ export function ViewportContainer() {
               <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>
+            {/* Track 2 — two peer pills that both answer "I don't have a
+                file to open": start a fresh project, or hand the wheel to
+                an LLM via MCP. Both share the same dashed-pill silhouette
+                so they read as siblings, with the file-open CTA above
+                staying visually dominant. */}
+            <div className="flex flex-wrap items-center justify-center gap-2">
+              <button
+                type="button"
+                onClick={() => { void handleStartBlank(); }}
+                disabled={!webgpu.supported || webgpu.checking}
+                className={`group inline-flex items-center gap-1.5 px-3 py-1.5 font-mono text-[11px] border border-dashed transition-all ${
+                  !webgpu.supported || webgpu.checking
+                    ? 'border-zinc-200 dark:border-[#3b4261]/50 text-zinc-300 dark:text-[#565f89]/50 cursor-not-allowed'
+                    : 'border-zinc-300 dark:border-[#3b4261] text-zinc-500 dark:text-[#7a82a5] hover:border-primary hover:text-primary cursor-pointer'
+                }`}
+              >
+                <PackagePlus className="h-3 w-3 transition-transform group-enabled:group-hover:-translate-y-0.5" />
+                <span>Start blank</span>
+              </button>
+              <a
+                href="/mcp"
+                className="group inline-flex 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>
+            </div>
 
             <p className="mt-1.5 text-[10px] font-mono text-center text-zinc-400 dark:text-[#565f89]">
-              via MCP · install or try the playground
+              new untitled project · or LLM via MCP
             </p>
 
             {recentFiles.length > 0 && (
@@ -872,7 +972,19 @@ export function ViewportContainer() {
             ))}
           </div>
 
-          {/* Footer */}
+          {/* Footer chips — left: discovery link to the marketing site for first-time
+              visitors, right: shortcuts cue for power users. Both desktop-only. */}
+          <div className="absolute bottom-8 left-8 hidden md:block">
+            <a
+              href="https://ifclite.dev"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="group inline-flex items-center gap-2 text-xs font-mono px-3 py-1.5 bg-zinc-100 dark:bg-[#1f2335] border border-zinc-300 dark:border-[#3b4261] text-zinc-500 dark:text-[#565f89] hover:border-primary hover:text-primary transition-colors"
+            >
+              <span>New here?</span>
+              <span className="font-bold text-primary group-hover:translate-x-0.5 transition-transform">ifclite.dev →</span>
+            </a>
+          </div>
           <div className="absolute bottom-8 right-8 hidden md:block">
             <div className="flex items-center gap-2 text-xs font-mono px-3 py-1.5 bg-zinc-100 dark:bg-[#1f2335] border border-zinc-300 dark:border-[#3b4261] text-zinc-500 dark:text-[#565f89]">
               <Command className="h-3 w-3" />
@@ -913,6 +1025,7 @@ export function ViewportContainer() {
       {cesiumEnabled && georef && !isTauri() && (
         <CesiumOverlay
           mapConversion={georef.mapConversion}
+          cameraMapConversion={georef.baseMapConversion}
           projectedCRS={georef.projectedCRS}
           coordinateInfo={georef.coordinateInfo}
           geometryResult={mergedGeometryResult}
@@ -920,9 +1033,21 @@ export function ViewportContainer() {
           storeyElevations={georef.storeyElevations}
         />
       )}
+      {cesiumEnabled && georef?.mapConversion && !isTauri() && georef.baseMapConversion && (
+        <CesiumPlacementEditor
+          modelId={georef.sourceModelId}
+          mapConversion={georef.mapConversion}
+          baseMapConversion={georef.baseMapConversion}
+          projectedCRS={georef.projectedCRS}
+          coordinateInfo={georef.coordinateInfo}
+          lengthUnitScale={georef.lengthUnitScale}
+          storeyElevations={georef.storeyElevations}
+        />
+      )}
       <Viewport
         geometry={filteredGeometry}
         geometryVersion={geometryVersion}
+        geometryContentVersion={geometryContentVersion}
         pointClouds={mergedPointClouds}
         coordinateInfo={mergedGeometryResult?.coordinateInfo}
         computedIsolatedIds={computedIsolatedIds}

package/src/components/viewer/ViewportOverlays.tsx

@@ -8,23 +8,19 @@ import {
   ZoomIn,
   ZoomOut,
   Layers,
-  Globe2,
-  Mountain,
-  Building2,
-  Satellite,
-  X,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useViewerStore } from '@/store';
-import type { CesiumDataSource } from '@/store/slices/cesiumSlice';
 import { goHomeFromStore } from '@/store/homeView';
 import { useIfc } from '@/hooks/useIfc';
 import { cn } from '@/lib/utils';
 import { isTauri } from '@/lib/platform';
 import { ViewCube, type ViewCubeRef } from './ViewCube';
 import { AxisHelper, type AxisHelperRef } from './AxisHelper';
+import { BasepointOverlay } from './BasepointOverlay';
 import { PointCloudPanel } from './PointCloudPanel';
+import { Crosshair } from 'lucide-react';
 
 const isDesktop = isTauri();
 
@@ -41,11 +37,6 @@ export function ViewportOverlays({ hideViewCube = false }: { hideViewCube?: bool
 
   // Cesium state
   const cesiumEnabled = useViewerStore((s) => s.cesiumEnabled);
-  const cesiumDataSource = useViewerStore((s) => s.cesiumDataSource);
-  const setCesiumDataSource = useViewerStore((s) => s.setCesiumDataSource);
-  const cesiumTerrainEnabled = useViewerStore((s) => s.cesiumTerrainEnabled);
-  const setCesiumTerrainEnabled = useViewerStore((s) => s.setCesiumTerrainEnabled);
-  const toggleCesium = useViewerStore((s) => s.toggleCesium);
 
   // Use refs for rotation to avoid re-renders - ViewCube updates itself directly
   const cameraRotationRef = useRef({ azimuth: 45, elevation: 25 });
@@ -152,16 +143,8 @@ export function ViewportOverlays({ hideViewCube = false }: { hideViewCube?: bool
   return (
     <>
       <PointCloudPanelMount />
-      {/* Bottom-right: Cesium settings overlay OR Navigation controls (Cesium is web-only) */}
-      {cesiumEnabled && !isDesktop ? (
-        <CesiumSettingsOverlay
-          dataSource={cesiumDataSource}
-          onDataSourceChange={setCesiumDataSource}
-          terrainEnabled={cesiumTerrainEnabled}
-          onTerrainChange={setCesiumTerrainEnabled}
-          onClose={toggleCesium}
-        />
-      ) : (
+      {/* Bottom-right: Navigation controls (hidden when Cesium active — Cesium is web-only) */}
+      {!(cesiumEnabled && !isDesktop) && (
         <div
           className={cn(
             'absolute flex flex-col gap-1 bg-background/90 backdrop-blur-sm border p-1',
@@ -230,104 +213,64 @@ export function ViewportOverlays({ hideViewCube = false }: { hideViewCube?: bool
         </div>
       )}
 
-      {/* Axis Helper + Scale Bar — desktop only; mobile keeps the viewport unobstructed */}
+      {/* Basepoint toggle + 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="absolute bottom-4 left-4 flex flex-col-reverse items-start gap-3">
+          <div className="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>
-        </>
+          <AxisHelper
+            ref={axisHelperRef}
+            rotationX={initialRotationX}
+            rotationY={initialRotationY}
+          />
+          <BasepointToggleButton />
+        </div>
       )}
+
+      {/* Per-model IFC (0,0,0) markers — toggled via BasepointToggleButton.
+          Hidden by default; component returns null when the toggle is off. */}
+      <BasepointOverlay />
     </>
   );
 }
 
-/* ------------------------------------------------------------------ */
-/*  Cesium Settings Overlay — replaces nav controls when Cesium is on  */
-/* ------------------------------------------------------------------ */
-
-const DATA_SOURCES: { value: CesiumDataSource; label: string; icon: typeof Globe2 }[] = [
-  { value: 'google-photorealistic', label: 'Google 3D', icon: Globe2 },
-  { value: 'osm-buildings', label: 'OSM', icon: Building2 },
-  { value: 'bing-aerial', label: 'Aerial', icon: Satellite },
-];
-
-function CesiumSettingsOverlay({
-  dataSource,
-  onDataSourceChange,
-  terrainEnabled,
-  onTerrainChange,
-  onClose,
-}: {
-  dataSource: CesiumDataSource;
-  onDataSourceChange: (ds: CesiumDataSource) => void;
-  terrainEnabled: boolean;
-  onTerrainChange: (enabled: boolean) => void;
-  onClose: () => void;
-}) {
+/**
+ * Toggle for the per-model IFC-origin overlay. Sits next to the AxisHelper so
+ * it's discoverable in the same "scene reference" cluster.
+ */
+function BasepointToggleButton() {
+  const showModelBasepoints = useViewerStore((s) => s.showModelBasepoints);
+  const toggleShowModelBasepoints = useViewerStore((s) => s.toggleShowModelBasepoints);
+  const modelCount = useViewerStore((s) => s.models.size);
+  if (modelCount === 0) return null;
   return (
-    <div className="absolute bottom-4 right-4 z-10 pointer-events-auto bg-background/90 backdrop-blur-sm rounded-lg border shadow-lg p-2 flex flex-col gap-2 min-w-[160px]">
-      {/* Header */}
-      <div className="flex items-center justify-between gap-2">
-        <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-          3D World
-        </span>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="ghost" size="icon-sm" className="h-5 w-5" onClick={onClose}>
-              <X className="h-3 w-3" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent side="left">Disable Cesium overlay</TooltipContent>
-        </Tooltip>
-      </div>
-
-      {/* Data Source Buttons */}
-      <div className="flex flex-col gap-0.5">
-        {DATA_SOURCES.map((ds) => {
-          const Icon = ds.icon;
-          const active = dataSource === ds.value;
-          return (
-            <button
-              key={ds.value}
-              onClick={() => onDataSourceChange(ds.value)}
-              className={cn(
-                'flex items-center gap-2 px-2 py-1.5 rounded text-xs transition-colors text-left',
-                active
-                  ? 'bg-teal-600 text-white'
-                  : 'hover:bg-muted text-foreground/80',
-              )}
-            >
-              <Icon className="h-3.5 w-3.5 shrink-0" />
-              {ds.label}
-            </button>
-          );
-        })}
-      </div>
-
-      {/* Terrain Toggle */}
-      <label className="flex items-center gap-2 px-2 py-1 cursor-pointer border-t border-border pt-2">
-        <Mountain className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
-        <span className="text-xs text-foreground/80">Terrain</span>
-        <input
-          type="checkbox"
-          checked={terrainEnabled}
-          onChange={(e) => onTerrainChange(e.target.checked)}
-          className="ml-auto accent-teal-500"
-        />
-      </label>
-    </div>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={toggleShowModelBasepoints}
+          aria-label={showModelBasepoints ? 'Hide model basepoints' : 'Show model basepoints'}
+          className={cn(
+            'h-6 w-6 inline-flex items-center justify-center border transition-colors',
+            showModelBasepoints
+              ? 'border-amber-500 bg-amber-50 dark:bg-amber-950/40 text-amber-700 dark:text-amber-300'
+              : 'border-zinc-300 dark:border-zinc-700 bg-white/80 dark:bg-zinc-900/80 text-zinc-600 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800',
+          )}
+          aria-pressed={showModelBasepoints}
+        >
+          <Crosshair className="h-3 w-3" />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="top" className="text-xs">
+        {showModelBasepoints ? 'Hide model basepoints' : 'Show model basepoints (IFC 0,0,0)'}
+      </TooltipContent>
+    </Tooltip>
   );
 }
 
+
 /**
  * Tiny indirection so the panel can subscribe to its own slice without
  * pulling extra state into the parent overlay component.