@ifc-lite/viewer 1.7.0 → 1.9.0

package/src/hooks/useKeyboardShortcuts.ts

@@ -7,12 +7,49 @@
  */
 
 import { useEffect, useCallback } from 'react';
-import { useViewerStore } from '@/store';
+import { useViewerStore, stringToEntityRef } from '@/store';
+import type { EntityRef } from '@/store';
 
 interface KeyboardShortcutsOptions {
   enabled?: boolean;
 }
 
+/** Clear multi-select state so subsequent operations use single-entity selectedEntity */
+function clearMultiSelect(): void {
+  const state = useViewerStore.getState();
+  if (state.selectedEntitiesSet.size > 0) {
+    useViewerStore.setState({ selectedEntitiesSet: new Set(), selectedEntityIds: new Set() });
+  }
+}
+
+/** Get all selected global IDs — multi-select if available, else single selectedEntityId */
+function getAllSelectedGlobalIds(): number[] {
+  const state = useViewerStore.getState();
+  if (state.selectedEntityIds.size > 0) {
+    return Array.from(state.selectedEntityIds);
+  }
+  if (state.selectedEntityId !== null) {
+    return [state.selectedEntityId];
+  }
+  return [];
+}
+
+/** Get current selection as EntityRef[] — multi-select if available, else single */
+function getSelectionRefsFromStore(): EntityRef[] {
+  const state = useViewerStore.getState();
+  if (state.selectedEntitiesSet.size > 0) {
+    const refs: EntityRef[] = [];
+    for (const str of state.selectedEntitiesSet) {
+      refs.push(stringToEntityRef(str));
+    }
+    return refs;
+  }
+  if (state.selectedEntity) {
+    return [state.selectedEntity];
+  }
+  return [];
+}
+
 export function useKeyboardShortcuts(options: KeyboardShortcutsOptions = {}) {
   const { enabled = true } = options;
 
@@ -20,12 +57,18 @@ export function useKeyboardShortcuts(options: KeyboardShortcutsOptions = {}) {
   const setSelectedEntityId = useViewerStore((s) => s.setSelectedEntityId);
   const activeTool = useViewerStore((s) => s.activeTool);
   const setActiveTool = useViewerStore((s) => s.setActiveTool);
-  const isolateEntity = useViewerStore((s) => s.isolateEntity);
-  const hideEntity = useViewerStore((s) => s.hideEntity);
+  const hideEntities = useViewerStore((s) => s.hideEntities);
   const showAll = useViewerStore((s) => s.showAll);
   const clearStoreySelection = useViewerStore((s) => s.clearStoreySelection);
   const toggleTheme = useViewerStore((s) => s.toggleTheme);
 
+  // Basket actions
+  const setBasket = useViewerStore((s) => s.setBasket);
+  const addToBasket = useViewerStore((s) => s.addToBasket);
+  const removeFromBasket = useViewerStore((s) => s.removeFromBasket);
+  const clearBasket = useViewerStore((s) => s.clearBasket);
+  const showPinboard = useViewerStore((s) => s.showPinboard);
+
   // Measure tool specific actions
   const activeMeasurement = useViewerStore((s) => s.activeMeasurement);
   const cancelMeasurement = useViewerStore((s) => s.cancelMeasurement);
@@ -74,18 +117,67 @@ export function useKeyboardShortcuts(options: KeyboardShortcutsOptions = {}) {
       setActiveTool('section');
     }
 
-    // Visibility controls
-    if (key === 'i' && !ctrl && !shift && selectedEntityId) {
+    // Basket / Visibility controls
+    // I = Set basket (isolate selection as basket), or re-apply basket if no selection
+    if (key === 'i' && !ctrl && !shift) {
+      const state = useViewerStore.getState();
+      // If basket already exists and user hasn't explicitly multi-selected,
+      // re-apply the basket instead of replacing it with a stale single selection.
+      if (state.pinboardEntities.size > 0 && state.selectedEntitiesSet.size === 0) {
+        e.preventDefault();
+        showPinboard();
+      } else {
+        const refs = getSelectionRefsFromStore();
+        if (refs.length > 0) {
+          e.preventDefault();
+          setBasket(refs);
+          // Consume multi-select so subsequent − removes a single entity
+          clearMultiSelect();
+        }
+      }
+    }
+
+    // + or = (with shift) = Add to basket
+    if ((e.key === '+' || (e.key === '=' && shift)) && !ctrl) {
+      e.preventDefault();
+      const refs = getSelectionRefsFromStore();
+      if (refs.length > 0) {
+        addToBasket(refs);
+        // Consume multi-select so subsequent − removes a single entity
+        clearMultiSelect();
+      }
+    }
+
+    // - or _ = Remove from basket
+    if ((e.key === '-' || e.key === '_') && !ctrl) {
       e.preventDefault();
-      isolateEntity(selectedEntityId);
+      const refs = getSelectionRefsFromStore();
+      if (refs.length > 0) {
+        removeFromBasket(refs);
+        // Consume multi-select after removal
+        clearMultiSelect();
+      }
     }
+
     if ((key === 'delete' || key === 'backspace') && !ctrl && !shift && selectedEntityId) {
       e.preventDefault();
-      hideEntity(selectedEntityId);
+      const ids = getAllSelectedGlobalIds();
+      hideEntities(ids);
+      clearMultiSelect();
+    }
+    // Space to hide — skip when focused on buttons/selects/links where Space has native behavior
+    if (key === ' ' && !ctrl && !shift && selectedEntityId) {
+      const tag = document.activeElement?.tagName;
+      if (tag !== 'BUTTON' && tag !== 'SELECT' && tag !== 'A') {
+        e.preventDefault();
+        const ids = getAllSelectedGlobalIds();
+        hideEntities(ids);
+        clearMultiSelect();
+      }
     }
     if (key === 'a' && !ctrl && !shift) {
       e.preventDefault();
-      showAll();
+      showAll();             // Clear hiddenEntities + isolatedEntities (basket preserved)
       clearStoreySelection(); // Also clear storey filtering
     }
 
@@ -121,6 +213,7 @@ export function useKeyboardShortcuts(options: KeyboardShortcutsOptions = {}) {
     if (key === 'escape') {
       e.preventDefault();
       setSelectedEntityId(null);
+      clearBasket();
       showAll();
       clearStoreySelection(); // Also clear storey filtering
       setActiveTool('select');
@@ -139,8 +232,12 @@ export function useKeyboardShortcuts(options: KeyboardShortcutsOptions = {}) {
     setSelectedEntityId,
     activeTool,
     setActiveTool,
-    isolateEntity,
-    hideEntity,
+    setBasket,
+    addToBasket,
+    removeFromBasket,
+    clearBasket,
+    showPinboard,
+    hideEntities,
     showAll,
     clearStoreySelection,
     toggleTheme,
@@ -171,14 +268,17 @@ export const KEYBOARD_SHORTCUTS = [
   { key: 'S', description: 'Toggle snapping (Measure tool)', category: 'Tools' },
   { key: 'Esc', description: 'Cancel measurement (Measure tool)', category: 'Tools' },
   { key: 'Ctrl+C', description: 'Clear measurements (Measure tool)', category: 'Tools' },
-  { key: 'I', description: 'Isolate selection', category: 'Visibility' },
-  { key: 'Del', description: 'Hide selection', category: 'Visibility' },
-  { key: 'A', description: 'Show all (reset filters)', category: 'Visibility' },
+  { key: 'I', description: 'Set basket (isolate selection)', category: 'Visibility' },
+  { key: '+', description: 'Add selection to basket', category: 'Visibility' },
+  { key: '−', description: 'Remove selection from basket', category: 'Visibility' },
+  { key: 'Del / Space', description: 'Hide selection', category: 'Visibility' },
+  { key: 'A', description: 'Show all (clear filters, keep basket)', category: 'Visibility' },
   { key: 'H', description: 'Home (Isometric view)', category: 'Camera' },
   { key: 'Z', description: 'Fit all (zoom extents)', category: 'Camera' },
   { key: 'F', description: 'Frame selection', category: 'Camera' },
   { key: '1-6', description: 'Preset views', category: 'Camera' },
   { key: 'T', description: 'Toggle theme', category: 'UI' },
-  { key: 'Esc', description: 'Reset all (clear selection, filters, isolation)', category: 'Selection' },
+  { key: 'Esc', description: 'Reset all (clear selection, basket, isolation)', category: 'Selection' },
+  { key: 'Ctrl+K', description: 'Command palette', category: 'UI' },
   { key: '?', description: 'Show info panel', category: 'Help' },
 ] as const;

package/src/hooks/useLens.ts

@@ -10,78 +10,55 @@
  * Unmatched entities with geometry are ghosted (semi-transparent).
  *
  * The pure evaluation logic lives in @ifc-lite/lens — this hook handles
- * React lifecycle, original-color capture/restore, and Zustand integration.
+ * React lifecycle and Zustand integration.
  *
  * Performance notes:
  * - Does NOT subscribe to `models` or `ifcDataStore` — reads them from
  *   getState() only when the active lens changes. This prevents re-evaluation
  *   during model loading.
- * - Uses `setPendingColorUpdates` instead of `updateMeshColors` to avoid
- *   cloning the entire mesh array (O(n) mesh copies) on every lens switch.
- * - Original mesh colors are captured once and restored on deactivation.
+ * - Uses color overlay system: pendingColorUpdates triggers
+ *   scene.setColorOverrides() which builds overlay batches rendered on top
+ *   of original geometry. Original batches are NEVER modified — clearing
+ *   lens is instant (no batch rebuild).
  */
 
-import { useEffect, useRef, useCallback } from 'react';
-import { evaluateLens, rgbaToHex, isGhostColor } from '@ifc-lite/lens';
-import type { RGBAColor } from '@ifc-lite/lens';
+import { useEffect, useRef, useMemo } from 'react';
+import { evaluateLens, evaluateAutoColorLens, rgbaToHex, isGhostColor } from '@ifc-lite/lens';
+import type { AutoColorEvaluationResult } from '@ifc-lite/lens';
 import { useViewerStore } from '@/store';
 import { createLensDataProvider } from '@/lib/lens';
+import { useLensDiscovery } from './useLensDiscovery';
 
 export function useLens() {
   const activeLensId = useViewerStore((s) => s.activeLensId);
   const savedLenses = useViewerStore((s) => s.savedLenses);
 
-  // Track the previously active lens to detect deactivation
-  const prevLensIdRef = useRef<string | null>(null);
-  // Track original colors to restore when lens is deactivated
-  const originalColorsRef = useRef<Map<number, RGBAColor> | null>(null);
-
-  /** Collect original mesh colors from all geometry sources (federation + legacy) */
-  const captureOriginalColors = useCallback(() => {
-    const state = useViewerStore.getState();
-    const originals = new Map<number, RGBAColor>();
-
-    // Federation mode: collect from all model geometries
-    if (state.models.size > 0) {
-      for (const [, model] of state.models) {
-        if (model.geometryResult?.meshes) {
-          for (const mesh of model.geometryResult.meshes) {
-            if (mesh.color) {
-              originals.set(mesh.expressId, mesh.color as RGBAColor);
-            }
-          }
-        }
-      }
-    }
+  // Derive the active lens object — only re-evaluates when activeLensId or
+  // the active lens entry itself changes, not when unrelated lenses are edited.
+  const activeLens = useMemo(
+    () => savedLenses.find(l => l.id === activeLensId) ?? null,
+    [activeLensId, savedLenses],
+  );
 
-    // Legacy mode: collect from store geometryResult
-    if (state.geometryResult?.meshes) {
-      for (const mesh of state.geometryResult.meshes) {
-        if (mesh.color) {
-          originals.set(mesh.expressId, mesh.color as RGBAColor);
-        }
-      }
-    }
+  // Run data discovery when models change (populates discoveredLensData in store)
+  useLensDiscovery();
 
-    return originals;
-  }, []);
+  // Track the previously active lens to detect deactivation
+  const prevLensIdRef = useRef<string | null>(null);
 
   useEffect(() => {
-    const activeLens = savedLenses.find(l => l.id === activeLensId) ?? null;
 
-    // Lens deactivated — restore original colors
+    // Lens deactivated — clear overlay (instant, no batch rebuild)
     if (!activeLens && prevLensIdRef.current !== null) {
       prevLensIdRef.current = null;
       useViewerStore.getState().setLensColorMap(new Map());
       useViewerStore.getState().setLensHiddenIds(new Set());
       useViewerStore.getState().setLensRuleCounts(new Map());
       useViewerStore.getState().setLensRuleEntityIds(new Map());
+      useViewerStore.getState().setLensAutoColorLegend([]);
 
-      // Restore original mesh colors via lightweight pending path
-      if (originalColorsRef.current && originalColorsRef.current.size > 0) {
-        useViewerStore.getState().setPendingColorUpdates(originalColorsRef.current);
-      }
-      originalColorsRef.current = null;
+      // Send empty map to signal "clear overlays" to useGeometryStreaming
+      useViewerStore.getState().setPendingColorUpdates(new Map());
       return;
     }
 
@@ -92,16 +69,18 @@ export function useLens() {
     const { models, ifcDataStore } = useViewerStore.getState();
     if (models.size === 0 && !ifcDataStore) return;
 
-    // Save original colors before first lens application
-    if (prevLensIdRef.current === null) {
-      originalColorsRef.current = captureOriginalColors();
-    }
-
     prevLensIdRef.current = activeLensId;
 
     // Create data provider and evaluate lens using @ifc-lite/lens package
     const provider = createLensDataProvider(models, ifcDataStore);
-    const { colorMap, hiddenIds, ruleCounts, ruleEntityIds } = evaluateLens(activeLens, provider);
+
+    // Dispatch: auto-color mode vs. rule-based mode
+    const isAutoColor = !!activeLens.autoColor;
+    const result = isAutoColor
+      ? evaluateAutoColorLens(activeLens.autoColor!, provider)
+      : evaluateLens(activeLens, provider);
+
+    const { colorMap, hiddenIds, ruleCounts, ruleEntityIds } = result;
 
     // Build hex color map for UI legend (exclude ghost entries)
     const hexColorMap = new Map<number, string>();
@@ -115,12 +94,18 @@ export function useLens() {
     useViewerStore.getState().setLensRuleCounts(ruleCounts);
     useViewerStore.getState().setLensRuleEntityIds(ruleEntityIds);
 
-    // Apply ALL colors to renderer via pendingColorUpdates only —
-    // no mesh cloning needed, the renderer picks these up directly
+    // Store auto-color legend entries for UI display
+    if (isAutoColor && 'legend' in result) {
+      useViewerStore.getState().setLensAutoColorLegend((result as AutoColorEvaluationResult).legend);
+    } else {
+      useViewerStore.getState().setLensAutoColorLegend([]);
+    }
+
+    // Apply colors via overlay system — original batches are never modified
     if (colorMap.size > 0) {
       useViewerStore.getState().setPendingColorUpdates(colorMap);
     }
-  }, [activeLensId, savedLenses, captureOriginalColors]);
+  }, [activeLensId, activeLens]);
 
   return {
     activeLensId,

package/src/hooks/useLensDiscovery.ts

@@ -0,0 +1,46 @@
+/* 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/. */
+
+/**
+ * Lens class discovery hook — INSTANT, zero loading impact.
+ *
+ * Only discovers IFC class names from the entity table (O(n) array scan,
+ * no STEP buffer parsing). Property sets, quantities, materials, and
+ * classifications are discovered lazily on-demand when the user opens
+ * a dropdown that needs them — see `useLazyDiscovery` in LensPanel.
+ */
+
+import { useEffect } from 'react';
+import { discoverClasses } from '@ifc-lite/lens';
+import { useViewerStore } from '@/store';
+import { createLensDataProvider } from '@/lib/lens';
+
+/**
+ * Discover IFC classes when models change (instant).
+ * Stores result in `discoveredLensData.classes` on the lens slice.
+ */
+export function useLensDiscovery(): void {
+  const modelCount = useViewerStore((s) => s.models.size);
+  const ifcDataStore = useViewerStore((s) => s.ifcDataStore);
+  const setDiscoveredLensData = useViewerStore((s) => s.setDiscoveredLensData);
+
+  useEffect(() => {
+    const { models, ifcDataStore: ds } = useViewerStore.getState();
+    if (models.size === 0 && !ds) {
+      setDiscoveredLensData(null);
+      return;
+    }
+
+    // Instant: just reads type names from entity arrays, no STEP parsing
+    const provider = createLensDataProvider(models, ds);
+    const classes = discoverClasses(provider);
+    setDiscoveredLensData({
+      classes,
+      propertySets: null,    // lazy — discovered on-demand
+      quantitySets: null,    // lazy — discovered on-demand
+      classificationSystems: null, // lazy — discovered on-demand
+      materials: null,       // lazy — discovered on-demand
+    });
+  }, [modelCount, ifcDataStore, setDiscoveredLensData]);
+}

package/src/hooks/useModelSelection.ts

@@ -20,14 +20,13 @@
 
 import { useEffect } from 'react';
 import { useViewerStore } from '../store.js';
+import { resolveEntityRef } from '../store/resolveEntityRef.js';
 
 export function useModelSelection() {
   const selectedEntityId = useViewerStore((s) => s.selectedEntityId);
   const setSelectedEntity = useViewerStore((s) => s.setSelectedEntity);
   // Subscribe to models for reactivity (when models are added/removed)
   const models = useViewerStore((s) => s.models);
-  // Use the bulletproof store-based resolver
-  const resolveGlobalIdFromModels = useViewerStore((s) => s.resolveGlobalIdFromModels);
 
   useEffect(() => {
     if (selectedEntityId === null) {
@@ -38,24 +37,8 @@ export function useModelSelection() {
       return;
     }
 
-    // selectedEntityId is now a globalId
-    // Resolve it back to (modelId, originalExpressId) using the store-based resolver
-    // This is more reliable than the singleton registry which might have bundling issues
-    const resolved = resolveGlobalIdFromModels(selectedEntityId);
-    if (resolved) {
-      // Set EntityRef with ORIGINAL expressId (for property lookup in IfcDataStore)
-      setSelectedEntity({ modelId: resolved.modelId, expressId: resolved.expressId });
-    } else {
-      // Fallback for single-model mode (offset = 0, globalId = expressId)
-      // In this case, try to find the first model and use the globalId as expressId
-      if (models.size > 0) {
-        const firstModelId = Array.from(models.keys())[0];
-        setSelectedEntity({ modelId: firstModelId, expressId: selectedEntityId });
-      } else {
-        // Legacy single-model mode: use 'legacy' as modelId
-        // This allows PropertiesPanel to fall back to the legacy query
-        setSelectedEntity({ modelId: 'legacy', expressId: selectedEntityId });
-      }
-    }
-  }, [selectedEntityId, setSelectedEntity, models, resolveGlobalIdFromModels]);
+    // Single source of truth: resolveEntityRef handles globalId → EntityRef
+    // including fallback for single-model mode (offset 0). Always returns an EntityRef.
+    setSelectedEntity(resolveEntityRef(selectedEntityId));
+  }, [selectedEntityId, setSelectedEntity, models]);
 }

package/src/hooks/useSandbox.ts

@@ -0,0 +1,113 @@
+/* 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/. */
+
+/**
+ * useSandbox — React hook for executing scripts in a QuickJS sandbox.
+ *
+ * Creates a fresh sandbox context per execution for full isolation.
+ * The WASM module is cached across the session (cheap to reuse),
+ * but each script runs in a clean context with no leaked state.
+ */
+
+import { useCallback, useEffect, useRef } from 'react';
+import { useBim } from '../sdk/BimProvider.js';
+import { useViewerStore } from '../store/index.js';
+import type { Sandbox, ScriptResult, SandboxConfig } from '@ifc-lite/sandbox';
+
+/** Type guard for ScriptError shape (has logs + durationMs) */
+function isScriptError(err: unknown): err is { message: string; logs: Array<{ level: string; args: unknown[]; timestamp: number }>; durationMs: number } {
+  return (
+    err !== null &&
+    typeof err === 'object' &&
+    'logs' in err &&
+    Array.isArray((err as Record<string, unknown>).logs) &&
+    'durationMs' in err &&
+    typeof (err as Record<string, unknown>).durationMs === 'number'
+  );
+}
+
+/**
+ * Hook that provides a sandbox execution interface.
+ *
+ * Each execute() call creates a fresh QuickJS context for full isolation —
+ * scripts cannot leak global state between runs. The WASM module itself
+ * is cached (loaded once per app lifetime, ~1ms context creation overhead).
+ */
+export function useSandbox(config?: SandboxConfig) {
+  const bim = useBim();
+  const activeSandboxRef = useRef<Sandbox | null>(null);
+
+  const setExecutionState = useViewerStore((s) => s.setScriptExecutionState);
+  const setResult = useViewerStore((s) => s.setScriptResult);
+  const setError = useViewerStore((s) => s.setScriptError);
+
+  /** Execute a script in an isolated sandbox context */
+  const execute = useCallback(async (code: string): Promise<ScriptResult | null> => {
+    setExecutionState('running');
+    setError(null);
+
+    let sandbox: Sandbox | null = null;
+    try {
+      // Create a fresh sandbox for every execution — full isolation
+      const { createSandbox } = await import('@ifc-lite/sandbox');
+      sandbox = await createSandbox(bim, {
+        permissions: { model: true, query: true, viewer: true, mutate: true, lens: true, export: true, ...config?.permissions },
+        limits: { timeoutMs: 30_000, ...config?.limits },
+      });
+      activeSandboxRef.current = sandbox;
+
+      const result = await sandbox.eval(code);
+      setResult({
+        value: result.value,
+        logs: result.logs,
+        durationMs: result.durationMs,
+      });
+      return result;
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : String(err);
+      setError(message);
+
+      // If the error is a ScriptError with captured logs, preserve them
+      if (isScriptError(err)) {
+        setResult({
+          value: undefined,
+          logs: err.logs as ScriptResult['logs'],
+          durationMs: err.durationMs,
+        });
+      }
+      return null;
+    } finally {
+      // Always dispose the sandbox after execution
+      if (sandbox) {
+        sandbox.dispose();
+      }
+      if (activeSandboxRef.current === sandbox) {
+        activeSandboxRef.current = null;
+      }
+    }
+  }, [bim, config?.permissions, config?.limits, setExecutionState, setResult, setError]);
+
+  /** Reset clears any active sandbox (no-op if none running) */
+  const reset = useCallback(() => {
+    if (activeSandboxRef.current) {
+      activeSandboxRef.current.dispose();
+      activeSandboxRef.current = null;
+    }
+    setExecutionState('idle');
+    setResult(null);
+    setError(null);
+  }, [setExecutionState, setResult, setError]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (activeSandboxRef.current) {
+        activeSandboxRef.current.dispose();
+        activeSandboxRef.current = null;
+      }
+    };
+  }, []);
+
+  return { execute, reset };
+}

package/src/index.css

@@ -187,10 +187,16 @@ body {
   color: var(--tokyo-comment) !important;
 }
 
-.dark .text-zinc-200 {
+.dark .text-zinc-200,
+.dark .text-zinc-300 {
   color: var(--tokyo-fg-dark) !important;
 }
 
+.dark .text-zinc-700,
+.dark .text-zinc-800 {
+  color: var(--tokyo-fg) !important;
+}
+
 /* Primary accent */
 .dark .bg-primary {
   background-color: var(--tokyo-blue) !important;