@ifc-lite/viewer 1.22.0 → 1.23.0

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';
@@ -24,7 +25,8 @@ 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, type MapConversion } from '@ifc-lite/parser';
 import { getEffectiveGeoreference } from '@/lib/geo/effective-georef';
@@ -38,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);
@@ -49,6 +56,7 @@ export function ViewportContainer() {
   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);
@@ -73,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);
@@ -118,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;
@@ -178,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.
@@ -230,8 +249,18 @@ export function ViewportContainer() {
       };
     };
 
-    // Check federated models first
-    for (const [modelId, model] of storeModels) {
+    // 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(
@@ -284,6 +313,7 @@ export function ViewportContainer() {
     mergedGeometryResult,
     cesiumPlacementDraft,
     cesiumPlacementDraftModelId,
+    anchorModelIdOverride,
   ]);
 
   // Determine whether Cesium button should be visible (model has georef or user added it via mutations).
@@ -430,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
@@ -844,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 && (
@@ -914,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" />
@@ -977,6 +1047,7 @@ export function ViewportContainer() {
       <Viewport
         geometry={filteredGeometry}
         geometryVersion={geometryVersion}
+        geometryContentVersion={geometryContentVersion}
         pointClouds={mergedPointClouds}
         coordinateInfo={mergedGeometryResult?.coordinateInfo}
         computedIsolatedIds={computedIsolatedIds}

package/src/components/viewer/ViewportOverlays.tsx

@@ -18,7 +18,9 @@ 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();
 
@@ -211,26 +213,63 @@ 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 />
     </>
   );
 }
 
+/**
+ * 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 (
+    <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

package/src/components/viewer/chat/ByokKeyModal.tsx

@@ -49,7 +49,7 @@ import {
   type BYOKProvider,
 } from '@/lib/llm/clipboard-detect';
 
-const REPO_BLOB = 'https://github.com/louistrue/ifc-lite/blob/main';
+const REPO_BLOB = 'https://github.com/LTplus-AG/ifc-lite/blob/main';
 
 const PROVIDER_META: Record<BYOKProvider, {
   label: string;

package/src/components/viewer/properties/FederationAlignmentControls.tsx

@@ -0,0 +1,180 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * Federation alignment controls — surfaces per-model alignment status, anchor
+ * selection, and an explicit "Re-align federation" action.
+ *
+ * Lives inside GeoreferencingPanel (one instance per model). When only one
+ * model is loaded the controls are hidden — alignment is a federation concept.
+ */
+
+import { useCallback, useMemo, useState } from 'react';
+import { Anchor, RefreshCw, AlertTriangle, Check } from 'lucide-react';
+import { useViewerStore } from '@/store';
+import { useIfc } from '@/hooks/useIfc';
+import { toast } from '@/components/ui/toast';
+import { getEffectiveGeoreference } from '@/lib/geo/effective-georef';
+import type { IfcDataStore } from '@ifc-lite/parser';
+import type { FederatedModel } from '@/store/types';
+
+export interface FederationAlignmentControlsProps {
+  modelId: string;
+}
+
+function statusLabel(status: FederatedModel['federationAlignmentStatus']): {
+  text: string;
+  tone: 'anchor' | 'ok' | 'warn' | 'neutral';
+  icon: typeof Check;
+} {
+  switch (status) {
+    case 'anchor':
+      return { text: 'Federation anchor', tone: 'anchor', icon: Anchor };
+    case 'same-crs':
+      return { text: 'Aligned (same CRS)', tone: 'ok', icon: Check };
+    case 'reprojected':
+      return { text: 'Reprojected to anchor CRS', tone: 'ok', icon: Check };
+    case 'identity':
+      return { text: 'Aligned (identity)', tone: 'ok', icon: Check };
+    case 'failed':
+      return { text: 'Alignment failed', tone: 'warn', icon: AlertTriangle };
+    case 'none':
+    case undefined:
+      return { text: 'Not aligned', tone: 'neutral', icon: Anchor };
+  }
+}
+
+const toneClasses = {
+  anchor: 'border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950/40 text-amber-800 dark:text-amber-200',
+  ok: 'border-emerald-300 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-950/40 text-emerald-800 dark:text-emerald-200',
+  warn: 'border-red-300 dark:border-red-700 bg-red-50 dark:bg-red-950/40 text-red-800 dark:text-red-200',
+  neutral: 'border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-900 text-zinc-600 dark:text-zinc-400',
+} as const;
+
+export function FederationAlignmentControls({ modelId }: FederationAlignmentControlsProps) {
+  const models = useViewerStore((s) => s.models);
+  const anchorModelIdOverride = useViewerStore((s) => s.anchorModelIdOverride);
+  const setAnchorModelIdOverride = useViewerStore((s) => s.setAnchorModelIdOverride);
+  const georefMutations = useViewerStore((s) => s.georefMutations);
+  useViewerStore((s) => s.mutationVersion);
+  const { realignFederation } = useIfc();
+  const [busy, setBusy] = useState(false);
+
+  // The "effective anchor" matches findReferenceGeorefModel in useIfcFederation:
+  // honour the override if it points to a model with a valid (non-site) georef,
+  // otherwise pick the earliest-loaded model with one. Federation status alone
+  // is not enough — a model can be loaded standalone with status='none' and
+  // would otherwise show up as a fake anchor in the badge.
+  const hasValidGeoref = useCallback(
+    (model: FederatedModel | undefined): boolean => {
+      if (!model?.ifcDataStore) return false;
+      const eff = getEffectiveGeoreference(
+        model.ifcDataStore as IfcDataStore,
+        model.geometryResult?.coordinateInfo,
+        georefMutations.get(model.id),
+      );
+      return Boolean(
+        eff?.projectedCRS?.name && eff.mapConversion && eff.source !== 'siteLocation',
+      );
+    },
+    [georefMutations],
+  );
+
+  const effectiveAnchorId = useMemo<string | null>(() => {
+    if (anchorModelIdOverride && hasValidGeoref(models.get(anchorModelIdOverride))) {
+      return anchorModelIdOverride;
+    }
+    const sorted = Array.from(models.entries()).sort(
+      ([, a], [, b]) => (a.loadedAt ?? 0) - (b.loadedAt ?? 0),
+    );
+    for (const [id, model] of sorted) {
+      if (hasValidGeoref(model)) return id;
+    }
+    return null;
+  }, [models, anchorModelIdOverride, hasValidGeoref]);
+
+  const thisModel = models.get(modelId);
+  if (!thisModel) return null;
+  if (models.size < 2) return null;
+
+  const isAnchor = effectiveAnchorId === modelId;
+  const status: FederatedModel['federationAlignmentStatus'] = isAnchor
+    ? 'anchor'
+    : thisModel.federationAlignmentStatus ?? 'none';
+  const badge = statusLabel(status);
+  const Icon = badge.icon;
+
+  const handleSetAnchor = useCallback(() => {
+    setAnchorModelIdOverride(modelId);
+  }, [modelId, setAnchorModelIdOverride]);
+
+  const handleClearAnchor = useCallback(() => {
+    setAnchorModelIdOverride(null);
+  }, [setAnchorModelIdOverride]);
+
+  const handleRealign = useCallback(async () => {
+    setBusy(true);
+    try {
+      await realignFederation();
+    } catch (error) {
+      // realignFederation's happy path uses toast for per-model status; if
+      // the orchestrator itself throws (e.g. proj4 grid loader rejects), the
+      // async click handler would otherwise surface an unhandled rejection
+      // with no user feedback. Catch + log + toast so the failure mode is
+      // visible and the spinner clears.
+      console.error('[FederationAlignmentControls] re-align failed:', error);
+      toast.error(
+        error instanceof Error
+          ? `Re-align failed: ${error.message}`
+          : 'Re-align failed.',
+      );
+    } finally {
+      setBusy(false);
+    }
+  }, [realignFederation]);
+
+  return (
+    <div className="px-2 py-1.5 border-b border-zinc-100 dark:border-zinc-900">
+      <div className="flex items-center gap-2 flex-wrap">
+        <div
+          className={`inline-flex items-center gap-1 px-1.5 py-0.5 border text-[10px] font-medium ${toneClasses[badge.tone]}`}
+        >
+          <Icon className="h-2.5 w-2.5" />
+          <span>{badge.text}</span>
+        </div>
+        {!isAnchor && (
+          <button
+            type="button"
+            onClick={handleSetAnchor}
+            className="inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-300 border border-teal-300/50 dark:border-teal-700/50 hover:bg-teal-50 dark:hover:bg-teal-950/50 transition-colors"
+            title="Use this model as the federation anchor. Click 'Re-align' afterwards to apply."
+          >
+            <Anchor className="h-2.5 w-2.5" />
+            Make anchor
+          </button>
+        )}
+        {isAnchor && anchorModelIdOverride === modelId && (
+          <button
+            type="button"
+            onClick={handleClearAnchor}
+            className="inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] text-zinc-600 dark:text-zinc-400 hover:text-zinc-800 dark:hover:text-zinc-200 border border-zinc-300/50 dark:border-zinc-700/50 hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors"
+            title="Stop pinning this model as the anchor; revert to the default (earliest-loaded with georef)."
+          >
+            Unpin
+          </button>
+        )}
+        <button
+          type="button"
+          onClick={handleRealign}
+          disabled={busy}
+          className="inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] text-zinc-700 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-zinc-100 border border-zinc-300/50 dark:border-zinc-700/50 hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors disabled:opacity-50 disabled:cursor-not-allowed ml-auto"
+          title="Re-bake every model's geometry against the current anchor."
+        >
+          <RefreshCw className={`h-2.5 w-2.5 ${busy ? 'animate-spin' : ''}`} />
+          Re-align
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/viewer/properties/GeoreferencingPanel.tsx

@@ -15,6 +15,8 @@ import { computeAngleToGridNorth, type GeoreferenceInfo, type MapConversion, typ
 import { useViewerStore } from '@/store';
 import type { CoordinateInfo, GeometryResult } from '@ifc-lite/geometry';
 import { EpsgLookupDialog, type EpsgResult } from './EpsgLookupDialog';
+import { FederationAlignmentControls } from './FederationAlignmentControls';
+import { PrecisionGridBadge } from './PrecisionGridBadge';
 import { LocationMap, type PickedPosition } from './LocationMap';
 import { computeOrthogonalHeightForBaseAltitude } from '@/lib/geo/cesium-placement';
 import {
@@ -612,6 +614,9 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
           </span>
         </div>
       )}
+      {/* Federation alignment badge + anchor / re-align controls.
+          Hidden when only one model is loaded — alignment is a federation concept. */}
+      {modelId && models.size > 1 && <FederationAlignmentControls modelId={modelId} />}
       {/* CRS summary — always visible */}
       <div className="px-2 py-1.5 flex items-center gap-2">
         <Globe className="h-3 w-3 text-teal-500 shrink-0" />
@@ -624,6 +629,7 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
         {mergedCRS?.description && (
           <span className="text-[10px] font-mono text-teal-500/60 truncate">{mergedCRS.description}</span>
         )}
+        {mergedCRS?.name && <PrecisionGridBadge crsName={mergedCRS.name} />}
         {editable && (
           <EpsgLookupDialog onSelect={handleEpsgSelect}>
             <button className="flex items-center gap-1 text-[9px] text-teal-500 hover:text-teal-700 dark:hover:text-teal-300 transition-colors ml-auto shrink-0">