@ifc-lite/viewer 1.17.3 → 1.17.6

package/src/components/viewer/StatusBar.tsx

@@ -60,8 +60,24 @@ export function StatusBar() {
     if (!geometryResult) {
       return { elements: 0, triangles: 0 };
     }
+    // Count actual entities: for color-merged meshes, count unique entity IDs
+    let elements = 0;
+    const meshes = geometryResult.meshes;
+    if (meshes) {
+      for (let i = 0; i < meshes.length; i++) {
+        const m = meshes[i] as { entityIds?: Uint32Array };
+        if (m.entityIds && m.entityIds.length > 0) {
+          // Count unique entity IDs in this merged mesh
+          const seen = new Set<number>();
+          for (let j = 0; j < m.entityIds.length; j++) seen.add(m.entityIds[j]);
+          elements += seen.size;
+        } else {
+          elements += 1;
+        }
+      }
+    }
     return {
-      elements: geometryResult.meshes?.length ?? 0,
+      elements,
       triangles: geometryResult.totalTriangles ?? 0,
     };
   }, [geometryResult]);

package/src/components/viewer/ThemeSwitch.tsx

@@ -2,7 +2,7 @@
  * 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/. */
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useCallback } from 'react';
 import { ThemeToggle } from 'beautiful-theme-toggle';
 import { useViewerStore } from '@/store';
 
@@ -12,10 +12,22 @@ import { useViewerStore } from '@/store';
  * Bidirectional sync:
  *  - User clicks the widget  → onChange → store.setTheme
  *  - External change (keyboard shortcut / command palette) → store updates → widget.setTheme
+ *
+ * Secret colorful mode:
+ *  - Hold Shift while clicking → toggles the hidden "colorful" theme
+ *  - The sun/moon widget can't represent a third state, so it shows "sun" (day vibes)
+ *    while the colorful gradient takes over the world.
  */
 export function ThemeSwitch() {
   const containerRef = useRef<HTMLDivElement>(null);
   const toggleRef = useRef<ThemeToggle | null>(null);
+  // Track whether Shift was held during the click so we can intercept in onChange
+  const shiftHeldRef = useRef(false);
+
+  // Capture shift key state on pointerdown (fires before the widget's internal click handler)
+  const handlePointerDown = useCallback((e: React.PointerEvent) => {
+    shiftHeldRef.current = e.shiftKey;
+  }, []);
 
   useEffect(() => {
     if (!containerRef.current) return;
@@ -25,9 +37,36 @@ export function ThemeSwitch() {
     const toggle = new ThemeToggle({
       element: containerRef.current,
       size: 80,
-      initialState: currentTheme,
-      onChange: (state) => {
-        useViewerStore.getState().setTheme(state);
+      // Colorful → show sun (it's a bright/day-ish theme)
+      initialState: currentTheme === 'dark' ? 'dark' : 'light',
+      onChange: (widgetState) => {
+        const store = useViewerStore.getState();
+
+        if (shiftHeldRef.current) {
+          // Secret shift-click: toggle colorful mode
+          shiftHeldRef.current = false;
+          store.toggleColorful();
+
+          // Sync widget visual: colorful → sun, otherwise follow the new theme
+          const newTheme = useViewerStore.getState().theme;
+          const widgetTarget = newTheme === 'dark' ? 'dark' : 'light';
+          if (toggleRef.current && toggleRef.current.getTheme() !== widgetTarget) {
+            toggleRef.current.setTheme(widgetTarget, false);
+          }
+          return;
+        }
+
+        // Normal click: dark ↔ light (if colorful, drops to dark)
+        shiftHeldRef.current = false;
+        store.toggleTheme();
+
+        // The widget already animated to widgetState, but toggleTheme may have
+        // produced a different result (e.g. colorful → dark). Reconcile:
+        const newTheme = useViewerStore.getState().theme;
+        const expectedWidget = newTheme === 'dark' ? 'dark' : 'light';
+        if (toggleRef.current && widgetState !== expectedWidget) {
+          toggleRef.current.setTheme(expectedWidget, false);
+        }
       },
     });
 
@@ -38,8 +77,9 @@ export function ThemeSwitch() {
     const unsub = useViewerStore.subscribe((state) => {
       if (state.theme !== prevTheme) {
         prevTheme = state.theme;
-        if (toggleRef.current && toggleRef.current.getTheme() !== state.theme) {
-          toggleRef.current.setTheme(state.theme, false);
+        const widgetTarget = state.theme === 'dark' ? 'dark' : 'light';
+        if (toggleRef.current && toggleRef.current.getTheme() !== widgetTarget) {
+          toggleRef.current.setTheme(widgetTarget, false);
         }
       }
     });
@@ -51,5 +91,21 @@ export function ThemeSwitch() {
     };
   }, []);
 
-  return <div ref={containerRef} className="flex items-center cursor-pointer opacity-80 hover:opacity-100 transition-opacity" />;
+  const theme = useViewerStore((s) => s.theme);
+  const isColorful = theme === 'colorful';
+
+  return (
+    <div
+      ref={containerRef}
+      onPointerDown={handlePointerDown}
+      className={`flex items-center cursor-pointer transition-all duration-300 ${
+        isColorful
+          ? 'opacity-100 scale-110'
+          : 'opacity-80 hover:opacity-100'
+      }`}
+      style={isColorful ? {
+        filter: 'drop-shadow(0 0 6px rgba(157,124,216,0.5)) drop-shadow(0 0 12px rgba(255,158,100,0.25))',
+      } : undefined}
+    />
+  );
 }

package/src/components/viewer/ViewerLayout.tsx

@@ -2,7 +2,7 @@
  * 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/. */
 
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';
 import { Panel, Group as PanelGroup, Separator as PanelResizeHandle } from 'react-resizable-panels';
 import type { PanelImperativeHandle } from 'react-resizable-panels';
 import { TooltipProvider } from '@/components/ui/tooltip';
@@ -22,6 +22,13 @@ import { LensPanel } from './LensPanel';
 import { ListPanel } from './lists/ListPanel';
 import { ScriptPanel } from './ScriptPanel';
 import { CommandPalette } from './CommandPalette';
+import { DesktopEntitlementBanner } from './DesktopEntitlementBanner';
+import {
+  closeActiveAnalysisExtension,
+  getAnalysisExtensionById,
+  getAnalysisExtensionsSnapshot,
+  subscribeAnalysisExtensions,
+} from '@/services/analysis-extensions';
 
 const BOTTOM_PANEL_MIN_HEIGHT = 120;
 const BOTTOM_PANEL_DEFAULT_HEIGHT = 300;
@@ -47,6 +54,18 @@ export function ViewerLayout() {
     return () => window.removeEventListener('keydown', handler);
   }, []);
 
+  useEffect(() => {
+    const openCommandPalette = () => setCommandPaletteOpen(true);
+    const showShortcuts = () => shortcutsDialog.toggle();
+
+    window.addEventListener('ifc-lite:open-command-palette', openCommandPalette);
+    window.addEventListener('ifc-lite:show-shortcuts', showShortcuts);
+    return () => {
+      window.removeEventListener('ifc-lite:open-command-palette', openCommandPalette);
+      window.removeEventListener('ifc-lite:show-shortcuts', showShortcuts);
+    };
+  }, [shortcutsDialog]);
+
   // Initialize theme on mount
   const theme = useViewerStore((s) => s.theme);
   const isMobile = useViewerStore((s) => s.isMobile);
@@ -65,6 +84,18 @@ export function ViewerLayout() {
   const setLensPanelVisible = useViewerStore((s) => s.setLensPanelVisible);
   const scriptPanelVisible = useViewerStore((s) => s.scriptPanelVisible);
   const setScriptPanelVisible = useViewerStore((s) => s.setScriptPanelVisible);
+  const analysisExtensionState = useSyncExternalStore(
+    subscribeAnalysisExtensions,
+    getAnalysisExtensionsSnapshot,
+    getAnalysisExtensionsSnapshot,
+  );
+  const activeAnalysisExtension = getAnalysisExtensionById(analysisExtensionState.activeId);
+  const activeRightAnalysisExtension = (activeAnalysisExtension?.placement ?? 'right') === 'right'
+    ? activeAnalysisExtension
+    : null;
+  const activeBottomAnalysisExtension = activeAnalysisExtension?.placement === 'bottom'
+    ? activeAnalysisExtension
+    : null;
 
   // Panel refs for programmatic collapse/expand (command palette, keyboard shortcuts)
   const leftPanelRef = useRef<PanelImperativeHandle>(null);
@@ -155,6 +186,7 @@ export function ViewerLayout() {
   // Keep DOM class in sync when theme changes (initial class is set by inline script in index.html)
   useEffect(() => {
     document.documentElement.classList.toggle('dark', theme === 'dark');
+    document.documentElement.classList.toggle('colorful', theme === 'colorful');
   }, [theme]);
 
 
@@ -171,6 +203,7 @@ export function ViewerLayout() {
 
         {/* Main Toolbar */}
         <MainToolbar onShowShortcuts={shortcutsDialog.toggle} />
+        <DesktopEntitlementBanner />
 
         {/* Main Content Area - Desktop Layout */}
         {!isMobile && (
@@ -221,7 +254,9 @@ export function ViewerLayout() {
                   }}
                 >
                   <div className="h-full w-full overflow-hidden panel-container">
-                    {lensPanelVisible ? (
+                    {activeRightAnalysisExtension ? (
+                      activeRightAnalysisExtension.renderPanel({ onClose: closeActiveAnalysisExtension })
+                    ) : lensPanelVisible ? (
                       <LensPanel onClose={() => setLensPanelVisible(false)} />
                     ) : idsPanelVisible ? (
                       <IDSPanel onClose={() => setIdsPanelVisible(false)} />
@@ -236,7 +271,7 @@ export function ViewerLayout() {
             </div>
 
             {/* Bottom Panel - Lists or Script (custom resizable, outside PanelGroup) */}
-            {(listPanelVisible || scriptPanelVisible) && (
+            {(listPanelVisible || scriptPanelVisible || !!activeBottomAnalysisExtension) && (
               <div style={{ height: bottomHeight, flexShrink: 0 }} className="relative">
                 {/* Drag handle */}
                 <div
@@ -244,7 +279,9 @@ export function ViewerLayout() {
                   onMouseDown={handleResizeStart}
                 />
                 <div className="h-full w-full overflow-hidden border-t pt-1.5">
-                  {scriptPanelVisible ? (
+                  {activeBottomAnalysisExtension ? (
+                    activeBottomAnalysisExtension.renderPanel({ onClose: closeActiveAnalysisExtension })
+                  ) : scriptPanelVisible ? (
                     <ScriptPanel onClose={() => setScriptPanelVisible(false)} />
                   ) : (
                     <ListPanel onClose={() => setListPanelVisible(false)} />
@@ -289,7 +326,7 @@ export function ViewerLayout() {
               <div className="absolute inset-x-0 bottom-0 h-[50vh] bg-background border-t rounded-t-xl shadow-xl z-40 animate-in slide-in-from-bottom">
                 <div className="flex items-center justify-between p-2 border-b">
                   <span className="font-medium text-sm">
-                    {scriptPanelVisible ? 'Script' : listPanelVisible ? 'Lists' : lensPanelVisible ? 'Lens' : idsPanelVisible ? 'IDS Validation' : bcfPanelVisible ? 'BCF Issues' : 'Properties'}
+                    {activeAnalysisExtension ? activeAnalysisExtension.label : scriptPanelVisible ? 'Script' : listPanelVisible ? 'Lists' : lensPanelVisible ? 'Lens' : idsPanelVisible ? 'IDS Validation' : bcfPanelVisible ? 'BCF Issues' : 'Properties'}
                   </span>
                   <button
                     className="p-1 hover:bg-muted rounded"
@@ -300,6 +337,7 @@ export function ViewerLayout() {
                       if (bcfPanelVisible) setBcfPanelVisible(false);
                       if (lensPanelVisible) setLensPanelVisible(false);
                       if (idsPanelVisible) setIdsPanelVisible(false);
+                      if (activeAnalysisExtension) closeActiveAnalysisExtension();
                     }}
                   >
                     <span className="sr-only">Close</span>
@@ -309,7 +347,11 @@ export function ViewerLayout() {
                   </button>
                 </div>
                 <div className="h-[calc(50vh-48px)] overflow-auto">
-                  {scriptPanelVisible ? (
+                  {activeBottomAnalysisExtension ? (
+                    activeBottomAnalysisExtension.renderPanel({ onClose: closeActiveAnalysisExtension })
+                  ) : activeRightAnalysisExtension ? (
+                    activeRightAnalysisExtension.renderPanel({ onClose: closeActiveAnalysisExtension })
+                  ) : scriptPanelVisible ? (
                     <ScriptPanel onClose={() => setScriptPanelVisible(false)} />
                   ) : listPanelVisible ? (
                     <ListPanel onClose={() => setListPanelVisible(false)} />

package/src/components/viewer/Viewport.tsx

@@ -46,9 +46,23 @@ interface ViewportProps {
   coordinateInfo?: CoordinateInfo;
   computedIsolatedIds?: Set<number> | null;
   modelIdToIndex?: Map<string, number>;
+  /** When true, the WebGPU canvas uses a transparent clear color so the
+   *  CesiumJS globe behind it is visible. */
+  cesiumActive?: boolean;
+  releaseGeometryAfterStream?: boolean;
+  onGeometryReleased?: () => void;
 }
 
-export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIsolatedIds, modelIdToIndex }: ViewportProps) {
+export function Viewport({
+  geometry,
+  geometryVersion,
+  coordinateInfo,
+  computedIsolatedIds,
+  modelIdToIndex,
+  cesiumActive,
+  releaseGeometryAfterStream = false,
+  onGeometryReleased,
+}: ViewportProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const rendererRef = useRef<Renderer | null>(null);
   const [isInitialized, setIsInitialized] = useState(false);
@@ -94,7 +108,7 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
   }, [modelIdToIndex]);
 
   // Compute selectedModelIndex for renderer (multi-model selection highlighting)
-  const selectedModelIndex = selectedEntity && modelIdToIndex
+  const selectedModelIndex = models.size > 1 && selectedEntity && modelIdToIndex
     ? modelIdToIndex.get(selectedEntity.modelId) ?? undefined
     : undefined;
 
@@ -114,12 +128,13 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     }
 
     const globalId = pickResult.expressId;
+    const resolvedRef = resolveEntityRef(globalId);
 
     // Set globalId for renderer (highlighting uses globalIds directly)
     setSelectedEntityId(globalId);
 
     // Resolve globalId → EntityRef for property panel (single source of truth, never null)
-    setSelectedEntity(resolveEntityRef(globalId));
+    setSelectedEntity(resolvedRef);
   }, [setSelectedEntityId, setSelectedEntity]);
 
   // Ref to always access latest handlePickForSelection from event handlers
@@ -291,6 +306,17 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     separationLinesIntensity,
     separationLinesRadius,
   ]);
+
+  // Override clear color when Cesium overlay is active (transparent background)
+  useEffect(() => {
+    if (cesiumActive) {
+      clearColorRef.current = [0, 0, 0, 0]; // fully transparent
+    } else {
+      clearColorRef.current = getThemeClearColor(theme as 'light' | 'dark' | 'colorful');
+    }
+    rendererRef.current?.requestRender();
+  }, [cesiumActive, theme]);
+
   // Animation frame ref
   const animationFrameRef = useRef<number | null>(null);
   const lastFrameTimeRef = useRef<number>(0);
@@ -356,6 +382,11 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
   const sectionPlaneRef = useLatestRef(sectionPlane);
   const sectionRangeRef = useLatestRef(sectionRange);
   const visualEnhancementRef = useLatestRef(visualEnhancement);
+
+  // Terrain clip Y from Cesium store (read as ref for animation loop)
+  const cesiumTerrainClipY = useViewerStore((s) => s.cesiumTerrainClipY);
+  const fastZoomRef = useLatestRef(!!cesiumActive);
+  const terrainClipYRef = useLatestRef(cesiumActive ? cesiumTerrainClipY : null);
   const geometryRef = useLatestRef(geometry);
 
   // Hover throttling
@@ -457,8 +488,10 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
 
   // Helper: get pick options with visibility filtering
   const getPickOptions = () => {
-    const currentProgress = useViewerStore.getState().progress;
-    const currentIsStreaming = currentProgress !== null && currentProgress.percent < 100;
+    const currentState = useViewerStore.getState();
+    const currentProgress = currentState.progress;
+    const currentIsStreaming = currentState.geometryStreamingActive
+      || (currentProgress !== null && currentProgress.percent < 100);
     return {
       isStreaming: currentIsStreaming,
       hiddenIds: hiddenEntitiesRef.current,
@@ -656,8 +689,7 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
   const showHiddenLines = useViewerStore((s) => s.drawing2DDisplayOptions.showHiddenLines);
 
   // ===== Streaming progress =====
-  const progress = useViewerStore((state) => state.progress);
-  const isStreaming = progress !== null && progress.percent < 100;
+  const isStreaming = useViewerStore((state) => state.geometryStreamingActive);
 
   // Mouse isDragging proxy ref for animation loop
   // The animation loop reads this to decide whether to update rotation
@@ -728,6 +760,7 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     RENDER_THROTTLE_MS_SMALL,
     RENDER_THROTTLE_MS_LARGE,
     RENDER_THROTTLE_MS_HUGE,
+    fastZoomRef,
   });
 
   useTouchControls({
@@ -777,6 +810,7 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     lastFrameTimeRef,
     mouseIsDraggingRef,
     activeToolRef,
+    terrainClipYRef,
     hiddenEntitiesRef,
     isolatedEntitiesRef,
     selectedEntityIdRef,
@@ -808,6 +842,8 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     clearPendingColorUpdates,
     clearPendingMeshColorUpdates,
     clearColorRef,
+    releaseGeometryAfterFinalize: releaseGeometryAfterStream,
+    onGeometryReleased,
   });
 
   useRenderUpdates({
@@ -838,12 +874,29 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     showHiddenLines,
   });
 
+  // Hide WebGPU canvas immediately when Cesium is active.
+  // The model will be rendered by Cesium (as GLB) for correct positioning.
+  // Canvas stays in the DOM for picking/interaction.
+
+  // Colorful mode: transparent WebGPU clear colour + CSS gradient on the
+  // canvas element.  The gradient is the *CSS background* of the <canvas>;
+  // premultiplied-alpha compositing shows it through transparent clear-colour
+  // regions while opaque model fragments (alpha=1) stay fully visible.
+  const canvasStyle = cesiumActive
+    ? { opacity: 0 }
+    : theme === 'colorful'
+      ? {
+          background: 'linear-gradient(180deg, #4a5a8a 0%, #6272a8 10%, #7e8dba 20%, #9aa3c8 32%, #b5b8d1 44%, #cdc3d4 56%, #dcccc8 68%, #e8d5be 80%, #f0ddb8 92%, #f5e2b6 100%)',
+        }
+      : undefined;
+
   return (
     <canvas
       ref={canvasRef}
       data-viewport="main"
       tabIndex={-1}
-      className="w-full h-full block"
+      className={`w-full h-full block ${cesiumActive ? 'relative z-[1]' : ''}`}
+      style={canvasStyle}
       onPointerDown={focusViewportForKeyboardShortcuts}
     />
   );