@ifc-lite/viewer 1.21.0 → 1.22.0

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

@@ -0,0 +1,192 @@
+/* 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/. */
+
+/**
+ * Visual proof of where the API key (and chat content) goes when a BYOK model
+ * is in use. Two stacked paths:
+ *   row 1 (active)    browser ────► api.provider.com
+ *   row 2 (blocked)   browser ─► our server ─► api.provider.com    (struck out)
+ *
+ * The shape of the diagram is the same for every provider — only the API host
+ * label rotates. Renders crisply in light and dark mode via Tailwind utility
+ * classes.
+ */
+
+interface ByokTrustDiagramProps {
+  apiHost: string;
+}
+
+export function ByokTrustDiagram({ apiHost }: ByokTrustDiagramProps) {
+  return (
+    <svg
+      viewBox="0 0 520 200"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label={`Diagram: requests go directly from your browser to ${apiHost}, not via our server.`}
+      className="w-full h-auto"
+    >
+      <defs>
+        <marker
+          id="byok-arrow-active"
+          viewBox="0 0 10 10"
+          refX="9"
+          refY="5"
+          markerUnits="strokeWidth"
+          markerWidth="8"
+          markerHeight="8"
+          orient="auto"
+        >
+          <path d="M 0 0 L 10 5 L 0 10 z" className="fill-emerald-500" />
+        </marker>
+        <marker
+          id="byok-arrow-blocked"
+          viewBox="0 0 10 10"
+          refX="9"
+          refY="5"
+          markerUnits="strokeWidth"
+          markerWidth="8"
+          markerHeight="8"
+          orient="auto"
+        >
+          <path d="M 0 0 L 10 5 L 0 10 z" className="fill-muted-foreground" />
+        </marker>
+      </defs>
+
+      {/* Row 1 — the path that's actually used */}
+      <g transform="translate(0, 18)">
+        <text x="0" y="-4" className="text-[10px] uppercase tracking-wider fill-emerald-600 dark:fill-emerald-400 font-semibold">
+          ✓ How your requests actually flow
+        </text>
+
+        {/* Browser box */}
+        <rect
+          x="2"
+          y="6"
+          width="120"
+          height="48"
+          rx="8"
+          className="fill-background stroke-emerald-500"
+          strokeWidth="1.75"
+        />
+        <text x="62" y="35" textAnchor="middle" className="text-[12px] fill-foreground font-medium">
+          Your browser
+        </text>
+
+        {/* Arrow */}
+        <line
+          x1="124"
+          y1="30"
+          x2="346"
+          y2="30"
+          className="stroke-emerald-500"
+          strokeWidth="2"
+          markerEnd="url(#byok-arrow-active)"
+        />
+        <text x="235" y="22" textAnchor="middle" className="text-[10px] fill-emerald-600 dark:fill-emerald-400 font-mono">
+          HTTPS · direct
+        </text>
+
+        {/* Provider API box (highlighted) */}
+        <rect
+          x="350"
+          y="6"
+          width="168"
+          height="48"
+          rx="8"
+          className="fill-emerald-500/10 stroke-emerald-500"
+          strokeWidth="1.75"
+        />
+        <text x="434" y="35" textAnchor="middle" className="text-[12px] fill-foreground font-mono">
+          {apiHost}
+        </text>
+      </g>
+
+      {/* Row 2 — what we are NOT doing */}
+      <g transform="translate(0, 116)" opacity="0.55">
+        <text x="0" y="-4" className="text-[10px] uppercase tracking-wider fill-destructive font-semibold" opacity="1">
+          ✗ What we never do
+        </text>
+
+        {/* Browser box (muted) */}
+        <rect
+          x="2"
+          y="6"
+          width="100"
+          height="44"
+          rx="6"
+          className="fill-background stroke-muted-foreground"
+          strokeWidth="1"
+          strokeDasharray="3 3"
+        />
+        <text x="52" y="33" textAnchor="middle" className="text-[11px] fill-muted-foreground">
+          Your browser
+        </text>
+
+        {/* Arrow 1 (muted, dashed) */}
+        <line
+          x1="104"
+          y1="28"
+          x2="186"
+          y2="28"
+          className="stroke-muted-foreground"
+          strokeWidth="1.25"
+          strokeDasharray="3 3"
+          markerEnd="url(#byok-arrow-blocked)"
+        />
+
+        {/* "Our server" box — struck through */}
+        <rect
+          x="190"
+          y="6"
+          width="120"
+          height="44"
+          rx="6"
+          className="fill-background stroke-muted-foreground"
+          strokeWidth="1"
+          strokeDasharray="3 3"
+        />
+        <text x="250" y="33" textAnchor="middle" className="text-[11px] fill-muted-foreground">
+          our server
+        </text>
+        {/* Strike-through across the "our server" box */}
+        <line
+          x1="184"
+          y1="44"
+          x2="316"
+          y2="12"
+          className="stroke-destructive"
+          strokeWidth="2.5"
+          opacity="0.85"
+        />
+
+        {/* Arrow 2 (muted, dashed) */}
+        <line
+          x1="312"
+          y1="28"
+          x2="394"
+          y2="28"
+          className="stroke-muted-foreground"
+          strokeWidth="1.25"
+          strokeDasharray="3 3"
+          markerEnd="url(#byok-arrow-blocked)"
+        />
+
+        {/* Provider API box (muted) */}
+        <rect
+          x="398"
+          y="6"
+          width="120"
+          height="44"
+          rx="6"
+          className="fill-background stroke-muted-foreground"
+          strokeWidth="1"
+          strokeDasharray="3 3"
+        />
+        <text x="458" y="33" textAnchor="middle" className="text-[11px] fill-muted-foreground font-mono">
+          {apiHost}
+        </text>
+      </g>
+    </svg>
+  );
+}

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

@@ -16,8 +16,13 @@ import { useViewerStore } from '@/store';
 import type { CoordinateInfo, GeometryResult } from '@ifc-lite/geometry';
 import { EpsgLookupDialog, type EpsgResult } from './EpsgLookupDialog';
 import { LocationMap, type PickedPosition } from './LocationMap';
-import { findClampAnchorY } from '@/lib/geo/clamp-anchor';
-import { detectScaleUnitMismatch, mergeMapConversion, mergeProjectedCRS } from '@/lib/geo/effective-georef';
+import { computeOrthogonalHeightForBaseAltitude } from '@/lib/geo/cesium-placement';
+import {
+  detectScaleUnitMismatch,
+  mergeMapConversion,
+  mergeProjectedCRS,
+  supportsStandardGeoreferencing,
+} from '@/lib/geo/effective-georef';
 import { useIfc } from '@/hooks/useIfc';
 import { toast } from '@/components/ui/toast';
 
@@ -335,9 +340,8 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
   const setGeorefField = useViewerStore(s => s.setGeorefField);
   const setGeorefFields = useViewerStore(s => s.setGeorefFields);
   const cesiumEnabled = useViewerStore(s => s.cesiumEnabled);
-  const terrainClamp = useViewerStore(s => s.cesiumTerrainClamp);
-  const setCesiumTerrainClamp = useViewerStore(s => s.setCesiumTerrainClamp);
   const cesiumTerrainHeight = useViewerStore(s => s.cesiumTerrainHeight);
+  const cesiumTerrainSource = useViewerStore(s => s.cesiumTerrainSource);
   const cesiumSourceModelId = useViewerStore(s => s.cesiumSourceModelId);
   const models = useViewerStore(s => s.models);
   const loading = useViewerStore(s => s.loading);
@@ -351,7 +355,8 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
   useViewerStore(s => s.mutationVersion);
 
   const mutations = modelId ? georefMutations?.get(modelId) : undefined;
-  const supportsStandardGeoreferencing = !schemaVersion?.toUpperCase().includes('2X3');
+  const isLegacySiteGeoreference = georef?.source === 'siteLocation';
+  const canUseStandardGeoreferencing = supportsStandardGeoreferencing(schemaVersion, georef);
 
   const mergedCRS = useMemo((): ProjectedCRS | undefined => {
     return mergeProjectedCRS(georef?.projectedCRS, mutations?.projectedCRS, lengthUnitScale ?? 1);
@@ -382,13 +387,6 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
     return 'm';
   }, [mergedCRS?.mapUnit]);
 
-  // Convert meters to map units (Cesium always returns meters)
-  const metersToMapUnit = useCallback((meters: number): number => {
-    if (mapUnitSuffix === 'ftUS') return meters / 0.3048006096;
-    if (mapUnitSuffix === 'ft') return meters / 0.3048;
-    return meters; // already meters
-  }, [mapUnitSuffix]);
-
   /**
    * Given a target world altitude (metres) for the model's ground floor
    * (the storey nearest elevation 0, falling back to bounds.min.y when
@@ -400,14 +398,14 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
    * world position as toggling the clamp.
    */
   const oHeightForBaseAltitude = useCallback((targetBaseAltitude: number): number => {
-    const bounds = coordinateInfo?.originalBounds;
-    const anchorY = findClampAnchorY(bounds, storeyElevations);
-    const shiftY = coordinateInfo?.originShift?.y ?? 0;
-    // RTC offset is in IFC Z-up; viewer Y-up takes its Z component.
-    const rtcYupY = coordinateInfo?.wasmRtcOffset?.z ?? 0;
-    const targetOHeightMeters = targetBaseAltitude - shiftY - rtcYupY - anchorY;
-    return Math.round(metersToMapUnit(targetOHeightMeters) * 100) / 100;
-  }, [coordinateInfo, storeyElevations, metersToMapUnit]);
+    return computeOrthogonalHeightForBaseAltitude({
+      coordinateInfo,
+      projectedCRS: mergedCRS,
+      lengthUnitScale: lengthUnitScale ?? 1,
+      storeyElevations,
+      targetBaseAltitude,
+    });
+  }, [coordinateInfo, mergedCRS, lengthUnitScale, storeyElevations]);
 
   const isMutated = useCallback((entity: 'projectedCRS' | 'mapConversion', field: string): boolean => {
     if (!mutations) return false;
@@ -467,14 +465,8 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
       ? mergedCRS?.[field as keyof ProjectedCRS]
       : mergedConversion?.[field as keyof MapConversion];
     setGeorefField(modelId, entity, field, value, oldValue as string | number | undefined);
-    // Editing OrthogonalHeight implies "I want this exact altitude" — auto
-    // -release the terrain clamp so the new value actually takes effect
-    // (with clamp on, placement is locked to terrain regardless of oHeight).
-    if (entity === 'mapConversion' && field === 'orthogonalHeight' && terrainClamp) {
-      setCesiumTerrainClamp(false);
-    }
     requestAlignmentReload();
-  }, [modelId, setGeorefField, mergedCRS, mergedConversion, requestAlignmentReload, terrainClamp, setCesiumTerrainClamp]);
+  }, [modelId, setGeorefField, mergedCRS, mergedConversion, requestAlignmentReload]);
 
   // Handle angle edit: compute and set both XAxisAbscissa and XAxisOrdinate
   const handleAngleChange = useCallback((abscissa: number, ordinate: number) => {
@@ -557,18 +549,7 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
   }, [modelId, setGeorefFields, mergedCRS, mergedConversion, mutations, initializeMapConversionDefaults, requestAlignmentReload]);
 
   const hasData = mergedCRS || mergedConversion;
-  const editable = enableEditing && !!modelId && supportsStandardGeoreferencing;
-
-  if (enableEditing && !supportsStandardGeoreferencing) {
-    return (
-      <div className="px-2 py-1.5 flex items-center gap-2">
-        <Globe className="h-3 w-3 text-zinc-400" />
-        <span className="text-[10px] text-zinc-500 dark:text-zinc-400">
-          Georeferencing editing requires IFC4 or newer. IFC2X3 does not support IfcProjectedCRS or IfcMapConversion.
-        </span>
-      </div>
-    );
-  }
+  const editable = enableEditing && !!modelId && canUseStandardGeoreferencing;
 
   // When no georef data exists, show "Add Georeferencing" in edit mode
   if (!hasData && !georef?.hasGeoreference) {
@@ -616,6 +597,21 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
           </div>
         </div>
       )}
+      {/* Only flag the legacy-site / unsupported-schema state when there is
+          actually nothing extractable to show. If we have a projectedCRS or
+          mapConversion (even partially), the data sections below speak for
+          themselves — the schema notice is just noise that contradicts the
+          live data the properties panel already renders. */}
+      {!canUseStandardGeoreferencing && !mergedCRS && !mergedConversion && (
+        <div className="px-3 py-1.5 flex items-center gap-2 border-b border-zinc-100 dark:border-zinc-900">
+          <Globe className="h-3 w-3 text-zinc-400 shrink-0" />
+          <span className="text-[10px] text-zinc-500 dark:text-zinc-400">
+            {isLegacySiteGeoreference
+              ? 'Showing legacy IfcSite geolocation from IFC2X3. This view is read-only.'
+              : 'Georeferencing editing requires IFC4 or newer. IFC2X3 does not support IfcProjectedCRS or IfcMapConversion.'}
+          </span>
+        </div>
+      )}
       {/* 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" />
@@ -751,28 +747,25 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
         </div>
       )}
 
-      {/* Terrain clamp toggle — only when Cesium overlay is active */}
+      {/* Sampled surface height — only when Cesium overlay is active */}
       {cesiumEnabled && isActiveCesiumModel && mergedConversion && (
         <div className="px-3 py-1.5 border-t border-zinc-100 dark:border-zinc-900 space-y-1">
           <div className="flex items-center gap-2">
             <Mountain className="h-3 w-3 text-teal-500 shrink-0" />
-            <label className="flex items-center gap-1.5 cursor-pointer flex-1">
-              <input
-                type="checkbox"
-                checked={terrainClamp}
-                onChange={(e) => setCesiumTerrainClamp(e.target.checked)}
-                className="accent-teal-500 h-3 w-3"
-              />
-              <span className="text-[10px] text-zinc-600 dark:text-zinc-400">Clamp to terrain</span>
-            </label>
+            <span className="text-[10px] text-zinc-600 dark:text-zinc-400 flex-1">Visible surface height</span>
             {cesiumTerrainHeight !== null ? (
-              <span className="text-[9px] font-mono text-teal-500">
+              <span className="text-[9px] font-mono text-teal-500" title={cesiumTerrainSource ?? undefined}>
                 {cesiumTerrainHeight.toFixed(1)} m
               </span>
             ) : (
               <span className="text-[9px] font-mono text-zinc-400">querying...</span>
             )}
           </div>
+          {cesiumTerrainSource && (
+            <div className="ml-5 text-[9px] text-zinc-500 dark:text-zinc-400">
+              sampled via {cesiumTerrainSource}
+            </div>
+          )}
           {cesiumTerrainHeight !== null && editable && modelId && (
             <div className="flex items-center gap-1 ml-5">
               <button
@@ -780,7 +773,7 @@ export function GeoreferencingPanel({ georef, modelId, enableEditing, schemaVers
                 className="text-[9px] text-teal-500 hover:text-teal-700 dark:hover:text-teal-300 transition-colors flex items-center gap-0.5"
               >
                 <Mountain className="h-2.5 w-2.5" />
-                Set OrthogonalHeight to {cesiumTerrainHeight.toFixed(1)} m
+                Set OrthogonalHeight to sampled terrain height ({cesiumTerrainHeight.toFixed(1)} m)
               </button>
             </div>
           )}
@@ -809,6 +802,7 @@ function TerrainHeightButton({ modelId, editable, onApply }: {
 }) {
   const cesiumEnabled = useViewerStore(s => s.cesiumEnabled);
   const terrainHeight = useViewerStore(s => s.cesiumTerrainHeight);
+  const terrainSource = useViewerStore(s => s.cesiumTerrainSource);
   const sourceModelId = useViewerStore(s => s.cesiumSourceModelId);
 
   // Only show when this panel's model is the active Cesium model
@@ -828,7 +822,10 @@ function TerrainHeightButton({ modelId, editable, onApply }: {
           <span>{terrainHeight.toFixed(1)} m</span>
         </button>
       </TooltipTrigger>
-      <TooltipContent>Set OrthogonalHeight to Cesium terrain elevation ({terrainHeight.toFixed(1)} m)</TooltipContent>
+      <TooltipContent>
+        Set OrthogonalHeight to sampled terrain height ({terrainHeight.toFixed(1)} m
+        {terrainSource ? ` via ${terrainSource}` : ''})
+      </TooltipContent>
     </Tooltip>
   );
 }

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

@@ -124,7 +124,12 @@ export function ModelMetadataPanel({ model }: { model: FederatedModel }) {
         </div>
       </div>
 
-      <ScrollArea className="flex-1">
+      {/* `min-h-0` is required: without it `flex-1` falls back to
+          min-height:auto and the ScrollArea grows past the panel's
+          height instead of constraining the inner viewport, so the map
+          (and any tall content underneath) overflowed past the right
+          panel's clip box. */}
+      <ScrollArea className="flex-1 min-h-0">
         {/* File Information */}
         <div className="border-b border-zinc-200 dark:border-zinc-800">
           <div className="p-3 bg-zinc-50 dark:bg-zinc-900/50">
@@ -172,49 +177,11 @@ export function ModelMetadataPanel({ model }: { model: FederatedModel }) {
           </div>
         )}
 
-        {/* Entity Statistics */}
-        <div className="border-b border-zinc-200 dark:border-zinc-800">
-          <div className="p-3 bg-zinc-50 dark:bg-zinc-900/50">
-            <h4 className="font-bold text-xs uppercase tracking-wide text-zinc-700 dark:text-zinc-300">
-              Statistics
-            </h4>
-          </div>
-          <div className="divide-y divide-zinc-100 dark:divide-zinc-900">
-            <div className="flex items-center gap-3 px-3 py-2">
-              <Database className="h-3.5 w-3.5 text-zinc-400 shrink-0" />
-              <span className="text-xs text-zinc-500">Total Entities</span>
-              <span className="text-xs font-mono text-zinc-900 dark:text-zinc-100 ml-auto">
-                {dataStore?.entityCount?.toLocaleString() ?? 'N/A'}
-              </span>
-            </div>
-            <div className="flex items-center gap-3 px-3 py-2">
-              <Layers className="h-3.5 w-3.5 text-zinc-400 shrink-0" />
-              <span className="text-xs text-zinc-500">Building Storeys</span>
-              <span className="text-xs font-mono text-zinc-900 dark:text-zinc-100 ml-auto">
-                {stats.storeys}
-              </span>
-            </div>
-            <div className="flex items-center gap-3 px-3 py-2">
-              <Building2 className="h-3.5 w-3.5 text-zinc-400 shrink-0" />
-              <span className="text-xs text-zinc-500">Elements with Geometry</span>
-              <span className="text-xs font-mono text-zinc-900 dark:text-zinc-100 ml-auto">
-                {stats.elementsWithGeometry.toLocaleString()}
-              </span>
-            </div>
-            <div className="flex items-center gap-3 px-3 py-2">
-              <Hash className="h-3.5 w-3.5 text-zinc-400 shrink-0" />
-              <span className="text-xs text-zinc-500">Max Express ID</span>
-              <span className="text-xs font-mono text-zinc-900 dark:text-zinc-100 ml-auto">
-                {model.maxExpressId.toLocaleString()}
-              </span>
-            </div>
-          </div>
-        </div>
-
-        {/* Georeferencing */}
-        <GeoreferencingPanel georef={georef} modelId={model.id} enableEditing schemaVersion={model.schemaVersion} coordinateInfo={model.geometryResult?.coordinateInfo} geometryResult={model.geometryResult} lengthUnitScale={unitInfo?.scale} />
-
-        {/* IfcProject Data */}
+        {/* IfcProject Data — placed near the top so the model's name,
+            description, and project-level psets are the first thing users
+            see after file info. Previously the section was at the bottom
+            of the panel (below the map), which buried critical project
+            identity below scrollable georeferencing content. */}
         {projectData && (
           <div className="border-b border-zinc-200 dark:border-zinc-800">
             <div className="p-3 bg-zinc-50 dark:bg-zinc-900/50">
@@ -262,6 +229,50 @@ export function ModelMetadataPanel({ model }: { model: FederatedModel }) {
             )}
           </div>
         )}
+
+        {/* Entity Statistics */}
+        <div className="border-b border-zinc-200 dark:border-zinc-800">
+          <div className="p-3 bg-zinc-50 dark:bg-zinc-900/50">
+            <h4 className="font-bold text-xs uppercase tracking-wide text-zinc-700 dark:text-zinc-300">
+              Statistics
+            </h4>
+          </div>
+          <div className="divide-y divide-zinc-100 dark:divide-zinc-900">
+            <div className="flex items-center gap-3 px-3 py-2">
+              <Database className="h-3.5 w-3.5 text-zinc-400 shrink-0" />
+              <span className="text-xs text-zinc-500">Total Entities</span>
+              <span className="text-xs font-mono text-zinc-900 dark:text-zinc-100 ml-auto">
+                {dataStore?.entityCount?.toLocaleString() ?? 'N/A'}
+              </span>
+            </div>
+            <div className="flex items-center gap-3 px-3 py-2">
+              <Layers className="h-3.5 w-3.5 text-zinc-400 shrink-0" />
+              <span className="text-xs text-zinc-500">Building Storeys</span>
+              <span className="text-xs font-mono text-zinc-900 dark:text-zinc-100 ml-auto">
+                {stats.storeys}
+              </span>
+            </div>
+            <div className="flex items-center gap-3 px-3 py-2">
+              <Building2 className="h-3.5 w-3.5 text-zinc-400 shrink-0" />
+              <span className="text-xs text-zinc-500">Elements with Geometry</span>
+              <span className="text-xs font-mono text-zinc-900 dark:text-zinc-100 ml-auto">
+                {stats.elementsWithGeometry.toLocaleString()}
+              </span>
+            </div>
+            <div className="flex items-center gap-3 px-3 py-2">
+              <Hash className="h-3.5 w-3.5 text-zinc-400 shrink-0" />
+              <span className="text-xs text-zinc-500">Max Express ID</span>
+              <span className="text-xs font-mono text-zinc-900 dark:text-zinc-100 ml-auto">
+                {model.maxExpressId.toLocaleString()}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Georeferencing — kept at the bottom because it embeds a
+            tall location map; placing it earlier would push the
+            statistics + project metadata below the fold. */}
+        <GeoreferencingPanel georef={georef} modelId={model.id} enableEditing schemaVersion={model.schemaVersion} coordinateInfo={model.geometryResult?.coordinateInfo} geometryResult={model.geometryResult} lengthUnitScale={unitInfo?.scale} />
       </ScrollArea>
     </div>
   );

package/src/components/viewer/selectionHandlers.ts

@@ -564,7 +564,13 @@ export function commitAddElementSlabPolygon(): void {
  */
 export async function handleContextMenu(ctx: MouseHandlerContext, e: MouseEvent): Promise<void> {
   e.preventDefault();
-  const { canvas, renderer } = ctx;
+  const { canvas, renderer, mouseState } = ctx;
+  // Right-drag is the pan gesture (see useMouseControls). Some browsers
+  // still fire `contextmenu` after a tiny right-drag — skip when the
+  // user actually moved, so panning never accidentally pops the menu.
+  if (mouseState.didDrag) {
+    return;
+  }
   const rect = canvas.getBoundingClientRect();
   const x = e.clientX - rect.left;
   const y = e.clientY - rect.top;