@ifc-lite/viewer 1.1.6 → 1.5.0

package/src/hooks/useIfcCache.ts

@@ -0,0 +1,279 @@
+/* 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/. */
+
+/**
+ * Hook for IFC file caching operations
+ * Handles loading from and saving to binary cache for fast subsequent loads
+ *
+ * Extracted from useIfc.ts for better separation of concerns
+ */
+
+import { useCallback } from 'react';
+import {
+  BinaryCacheWriter,
+  BinaryCacheReader,
+  type IfcDataStore as CacheDataStore,
+  type GeometryData,
+} from '@ifc-lite/cache';
+import { SpatialHierarchyBuilder, extractLengthUnitScale, type IfcDataStore } from '@ifc-lite/parser';
+import { buildSpatialIndex } from '@ifc-lite/spatial';
+import type { MeshData } from '@ifc-lite/geometry';
+
+import { useViewerStore } from '../store.js';
+import { getCached, setCached, deleteCached, type CacheResult } from '../services/cacheService.js';
+import { rebuildSpatialHierarchy, rebuildOnDemandMaps } from '../utils/spatialHierarchy.js';
+import { calculateStoreyHeights } from '../utils/localParsingUtils.js';
+
+// Re-export types for convenience
+export type { CacheResult } from '../services/cacheService.js';
+export { getCached, setCached, deleteCached } from '../services/cacheService.js';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/**
+ * Progress callback for cache operations
+ */
+export interface CacheProgress {
+  phase: string;
+  percent: number;
+}
+
+/**
+ * Geometry result from cache
+ */
+export interface CacheGeometryResult {
+  meshes: MeshData[];
+  totalVertices: number;
+  totalTriangles: number;
+  coordinateInfo?: {
+    originShift: { x: number; y: number; z: number };
+    bounds: { min: { x: number; y: number; z: number }; max: { x: number; y: number; z: number } };
+  };
+}
+
+// ============================================================================
+// Hook
+// ============================================================================
+
+/**
+ * Hook providing cache loading and saving operations
+ */
+export function useIfcCache() {
+  const {
+    setProgress,
+    setIfcDataStore,
+    setGeometryResult,
+  } = useViewerStore();
+
+  /**
+   * Load from binary cache - INSTANT load for maximum speed
+   * Large cached models load all geometry at once for fastest total time
+   */
+  const loadFromCache = useCallback(async (
+    cacheResult: CacheResult,
+    fileName: string,
+    cacheKey?: string
+  ): Promise<boolean> => {
+    try {
+      const cacheLoadStart = performance.now();
+      setProgress({ phase: 'Loading from cache', percent: 10 });
+
+      // Reset geometry first so Viewport detects this as a new file
+      setGeometryResult(null);
+
+      const reader = new BinaryCacheReader();
+      const result = await reader.read(cacheResult.buffer);
+      const cacheReadTime = performance.now() - cacheLoadStart;
+
+      // Convert cache data store to viewer data store format
+      const dataStore = result.dataStore as any;
+
+      // Restore source buffer for on-demand property extraction
+      if (cacheResult.sourceBuffer) {
+        dataStore.source = new Uint8Array(cacheResult.sourceBuffer);
+
+        // Quick scan to rebuild entity index with byte offsets (needed for on-demand extraction)
+        const { StepTokenizer } = await import('@ifc-lite/parser');
+        const tokenizer = new StepTokenizer(dataStore.source);
+        const entityIndex = {
+          byId: new Map<number, any>(),
+          byType: new Map<string, number[]>(),
+        };
+
+        for (const ref of tokenizer.scanEntitiesFast()) {
+          entityIndex.byId.set(ref.expressId, {
+            expressId: ref.expressId,
+            type: ref.type,
+            byteOffset: ref.offset,
+            byteLength: ref.length,
+            lineNumber: ref.line,
+          });
+          let typeList = entityIndex.byType.get(ref.type);
+          if (!typeList) {
+            typeList = [];
+            entityIndex.byType.set(ref.type, typeList);
+          }
+          typeList.push(ref.expressId);
+        }
+        dataStore.entityIndex = entityIndex;
+
+        // Rebuild on-demand maps from relationships
+        // Pass entityIndex which contains ALL entity types including IfcPropertySet/IfcElementQuantity
+        // (the entity table may not include these since they're filtered during fresh parse)
+        const { onDemandPropertyMap, onDemandQuantityMap } = rebuildOnDemandMaps(
+          dataStore.entities,
+          dataStore.relationships,
+          dataStore.entityIndex
+        );
+        dataStore.onDemandPropertyMap = onDemandPropertyMap;
+        dataStore.onDemandQuantityMap = onDemandQuantityMap;
+      } else {
+        console.warn('[useIfcCache] No source buffer in cache - on-demand property extraction disabled');
+        dataStore.source = new Uint8Array(0);
+      }
+
+      // Rebuild spatial hierarchy from cache data (cache doesn't serialize it)
+      // Use SpatialHierarchyBuilder to extract elevations from source buffer
+      if (!dataStore.spatialHierarchy && dataStore.entities && dataStore.relationships) {
+        // Ensure we have source buffer and entityIndex for elevation extraction
+        if (dataStore.source && dataStore.source.length > 0 && dataStore.entityIndex && dataStore.strings) {
+          const lengthUnitScale = extractLengthUnitScale(dataStore.source, dataStore.entityIndex);
+          const builder = new SpatialHierarchyBuilder();
+          dataStore.spatialHierarchy = builder.build(
+            dataStore.entities,
+            dataStore.relationships,
+            dataStore.strings,
+            dataStore.source,
+            dataStore.entityIndex,
+            lengthUnitScale
+          );
+
+          // Calculate storey heights from elevation differences (fallback if no property data)
+          if (dataStore.spatialHierarchy.storeyHeights.size === 0 && dataStore.spatialHierarchy.storeyElevations.size > 1) {
+            const calculatedHeights = calculateStoreyHeights(dataStore.spatialHierarchy.storeyElevations);
+            for (const [storeyId, height] of calculatedHeights) {
+              dataStore.spatialHierarchy.storeyHeights.set(storeyId, height);
+            }
+          }
+        } else {
+          console.warn('[useIfcCache] Missing data for elevation extraction:', {
+            hasSource: !!dataStore.source,
+            sourceLength: dataStore.source?.length ?? 0,
+            hasEntityIndex: !!dataStore.entityIndex,
+            hasStrings: !!dataStore.strings,
+          });
+          // Fallback: use simplified rebuild if source data not available
+          dataStore.spatialHierarchy = rebuildSpatialHierarchy(
+            dataStore.entities,
+            dataStore.relationships
+          );
+        }
+      }
+
+      if (result.geometry) {
+        const { meshes, coordinateInfo, totalVertices, totalTriangles } = result.geometry;
+
+        // INSTANT: Set ALL geometry in ONE call - fastest for cached models
+        setGeometryResult({
+          meshes,
+          totalVertices,
+          totalTriangles,
+          coordinateInfo,
+        });
+
+        // Set data store
+        setIfcDataStore(dataStore);
+
+        // Build spatial index in background (non-blocking)
+        if (meshes.length > 0) {
+          const buildIndex = () => {
+            try {
+              const spatialIndex = buildSpatialIndex(meshes);
+              dataStore.spatialIndex = spatialIndex;
+              setIfcDataStore({ ...dataStore });
+            } catch (err) {
+              console.warn('[useIfcCache] Failed to build spatial index:', err);
+            }
+          };
+
+          if ('requestIdleCallback' in window) {
+            (window as any).requestIdleCallback(buildIndex, { timeout: 2000 });
+          } else {
+            // Fallback for browsers without requestIdleCallback
+            setTimeout(buildIndex, 100);
+          }
+        }
+      } else {
+        setIfcDataStore(dataStore);
+      }
+
+      setProgress({ phase: 'Complete (from cache)', percent: 100 });
+      const totalCacheTime = performance.now() - cacheLoadStart;
+      const meshCount = result.geometry?.meshes.length || 0;
+      console.log(`[useIfcCache] ✓ ${fileName} (cached) → ${meshCount} meshes | ${totalCacheTime.toFixed(0)}ms`);
+
+      return true;
+    } catch (err) {
+      console.error('[useIfcCache] Failed to load from cache:', err);
+      // Clear corrupted cache entry if we have the key
+      if (cacheKey) {
+        try {
+          await deleteCached(cacheKey);
+          console.log('[useIfcCache] Cleared corrupted cache entry:', cacheKey);
+        } catch {
+          // Ignore cleanup errors
+        }
+      }
+      return false;
+    }
+  }, [setProgress, setIfcDataStore, setGeometryResult]);
+
+  /**
+   * Save parsed data and geometry to cache
+   */
+  const saveToCache = useCallback(async (
+    cacheKey: string,
+    dataStore: IfcDataStore,
+    geometry: GeometryData,
+    sourceBuffer: ArrayBuffer,
+    fileName: string
+  ): Promise<void> => {
+    try {
+      console.log('[useIfcCache] Starting cache write for:', fileName);
+      const writer = new BinaryCacheWriter();
+
+      // Adapt dataStore to cache format
+      const cacheDataStore: CacheDataStore = {
+        schema: dataStore.schemaVersion === 'IFC4' ? 1 : dataStore.schemaVersion === 'IFC4X3' ? 2 : 0,
+        entityCount: dataStore.entityCount || dataStore.entities?.count || 0,
+        strings: dataStore.strings,
+        entities: dataStore.entities,
+        properties: dataStore.properties,
+        quantities: dataStore.quantities,
+        relationships: dataStore.relationships,
+        spatialHierarchy: dataStore.spatialHierarchy,
+      };
+
+      console.log('[useIfcCache] Writing cache buffer...');
+      const cacheBuffer = await writer.write(cacheDataStore, geometry, sourceBuffer, { includeGeometry: true });
+      console.log('[useIfcCache] Cache buffer written:', cacheBuffer.byteLength, 'bytes');
+
+      console.log('[useIfcCache] Saving to cache storage...');
+      await setCached(cacheKey, cacheBuffer, fileName, sourceBuffer.byteLength, sourceBuffer);
+      console.log('[useIfcCache] ✓ Cache saved successfully');
+    } catch (err) {
+      console.error('[useIfcCache] Failed to cache model:', err);
+      console.error('[useIfcCache] Error stack:', err instanceof Error ? err.stack : 'No stack trace');
+    }
+  }, []);
+
+  return {
+    loadFromCache,
+    saveToCache,
+    getCached,
+    setCached,
+  };
+}

package/src/hooks/useKeyboardShortcuts.ts

@@ -18,12 +18,20 @@ export function useKeyboardShortcuts(options: KeyboardShortcutsOptions = {}) {
 
   const selectedEntityId = useViewerStore((s) => s.selectedEntityId);
   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 showAll = useViewerStore((s) => s.showAll);
+  const clearStoreySelection = useViewerStore((s) => s.clearStoreySelection);
   const toggleTheme = useViewerStore((s) => s.toggleTheme);
 
+  // Measure tool specific actions
+  const activeMeasurement = useViewerStore((s) => s.activeMeasurement);
+  const cancelMeasurement = useViewerStore((s) => s.cancelMeasurement);
+  const clearMeasurements = useViewerStore((s) => s.clearMeasurements);
+  const toggleSnap = useViewerStore((s) => s.toggleSnap);
+
   const handleKeyDown = useCallback((e: KeyboardEvent) => {
     // Ignore if typing in an input or textarea
     const target = e.target as HTMLElement;
@@ -65,10 +73,6 @@ export function useKeyboardShortcuts(options: KeyboardShortcutsOptions = {}) {
       e.preventDefault();
       setActiveTool('section');
     }
-    if (key === 'b' && !ctrl && !shift) {
-      e.preventDefault();
-      setActiveTool('boxselect');
-    }
 
     // Visibility controls
     if (key === 'i' && !ctrl && !shift && selectedEntityId) {
@@ -82,6 +86,35 @@ export function useKeyboardShortcuts(options: KeyboardShortcutsOptions = {}) {
     if (key === 'a' && !ctrl && !shift) {
       e.preventDefault();
       showAll();
+      clearStoreySelection(); // Also clear storey filtering
+    }
+
+    // Measure tool shortcuts
+    if (activeTool === 'measure') {
+      // Cancel active measurement with ESC
+      if (key === 'escape' && activeMeasurement) {
+        e.preventDefault();
+        cancelMeasurement();
+        return;
+      }
+      // Clear all measurements with Ctrl+C or Cmd+C
+      if (key === 'c' && ctrl && !shift) {
+        e.preventDefault();
+        clearMeasurements();
+        return;
+      }
+      // Toggle snapping with S
+      if (key === 's' && !ctrl && !shift) {
+        e.preventDefault();
+        toggleSnap();
+        return;
+      }
+      // Delete/Backspace clears measurements (when nothing is selected)
+      if ((key === 'delete' || key === 'backspace') && !ctrl && !shift && !selectedEntityId) {
+        e.preventDefault();
+        clearMeasurements();
+        return;
+      }
     }
 
     // Selection - Escape clears selection and switches to select tool
@@ -89,6 +122,7 @@ export function useKeyboardShortcuts(options: KeyboardShortcutsOptions = {}) {
       e.preventDefault();
       setSelectedEntityId(null);
       showAll();
+      clearStoreySelection(); // Also clear storey filtering
       setActiveTool('select');
     }
 
@@ -103,11 +137,17 @@ export function useKeyboardShortcuts(options: KeyboardShortcutsOptions = {}) {
   }, [
     selectedEntityId,
     setSelectedEntityId,
+    activeTool,
     setActiveTool,
     isolateEntity,
     hideEntity,
     showAll,
+    clearStoreySelection,
     toggleTheme,
+    activeMeasurement,
+    cancelMeasurement,
+    clearMeasurements,
+    toggleSnap,
   ]);
 
   useEffect(() => {
@@ -123,20 +163,22 @@ export function useKeyboardShortcuts(options: KeyboardShortcutsOptions = {}) {
 // Export shortcut definitions for UI display
 export const KEYBOARD_SHORTCUTS = [
   { key: 'V', description: 'Select tool', category: 'Tools' },
-  { key: 'B', description: 'Box select tool', category: 'Tools' },
   { key: 'P', description: 'Pan tool', category: 'Tools' },
   { key: 'O', description: 'Orbit tool', category: 'Tools' },
   { key: 'C', description: 'Walk mode', category: 'Tools' },
   { key: 'M', description: 'Measure tool', category: 'Tools' },
   { key: 'X', description: 'Section tool', category: 'Tools' },
+  { 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', category: 'Visibility' },
+  { key: 'A', description: 'Show all (reset filters)', 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: '0-6', description: 'Preset views', category: 'Camera' },
   { key: 'T', description: 'Toggle theme', category: 'UI' },
-  { key: 'Esc', description: 'Clear selection & switch to Select tool', category: 'Selection' },
-  { key: '?', description: 'Show keyboard shortcuts', category: 'Help' },
+  { key: 'Esc', description: 'Reset all (clear selection, filters, isolation)', category: 'Selection' },
+  { key: '?', description: 'Show info panel', category: 'Help' },
 ] as const;

package/src/hooks/useModelSelection.ts

@@ -0,0 +1,61 @@
+/* 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/. */
+
+/**
+ * Hook to sync selectedEntityId with selectedEntity (model-aware selection)
+ *
+ * When an entity is selected (via click or other means), this hook:
+ * 1. Watches for changes to selectedEntityId (which is now a globalId)
+ * 2. Uses store-based resolver to find (modelId, originalExpressId)
+ * 3. Updates selectedEntity with { modelId, expressId } for PropertiesPanel
+ *
+ * IMPORTANT: selectedEntityId is a globalId (transformed at load time)
+ * The EntityRef.expressId is the ORIGINAL expressId for property lookup
+ *
+ * NOTE: We use resolveGlobalIdFromModels (store-based) instead of the singleton
+ * federationRegistry because it's more reliable - the Zustand store is always
+ * in sync with React, whereas the singleton might have bundling issues.
+ */
+
+import { useEffect } from 'react';
+import { useViewerStore } from '../store.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) {
+      // Don't clear selectedEntity when selectedEntityId is null
+      // This allows selectedModelId to remain set when clicking model headers
+      // The model selection flow: setSelectedModelId -> sets selectedEntityId=null
+      // If we called setSelectedEntity(null) here, it would clear selectedModelId
+      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]);
+}

package/src/hooks/useViewerSelectors.ts

@@ -0,0 +1,218 @@
+/* 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/. */
+
+/**
+ * Organized store selectors for the Viewport component
+ * Groups 47+ store subscriptions into logical categories for better maintainability
+ * Extracted from Viewport.tsx for reusability
+ */
+
+import { useViewerStore } from '../store.js';
+
+/**
+ * Selection-related store state and actions
+ */
+export function useSelectionState() {
+  const selectedEntityId = useViewerStore((state) => state.selectedEntityId);
+  const selectedEntityIds = useViewerStore((state) => state.selectedEntityIds);
+  const setSelectedEntityId = useViewerStore((state) => state.setSelectedEntityId);
+  const setSelectedEntity = useViewerStore((state) => state.setSelectedEntity);
+  const toggleSelection = useViewerStore((state) => state.toggleSelection);
+  const models = useViewerStore((state) => state.models);
+
+  return {
+    selectedEntityId,
+    selectedEntityIds,
+    setSelectedEntityId,
+    setSelectedEntity,
+    toggleSelection,
+    models,
+  };
+}
+
+/**
+ * Visibility-related store state (hidden/isolated entities)
+ */
+export function useVisibilityState() {
+  const hiddenEntities = useViewerStore((state) => state.hiddenEntities);
+  const isolatedEntities = useViewerStore((state) => state.isolatedEntities);
+
+  return {
+    hiddenEntities,
+    isolatedEntities,
+  };
+}
+
+/**
+ * Tool-related store state and actions
+ */
+export function useToolState() {
+  const activeTool = useViewerStore((state) => state.activeTool);
+  const sectionPlane = useViewerStore((state) => state.sectionPlane);
+
+  return {
+    activeTool,
+    sectionPlane,
+  };
+}
+
+/**
+ * Measurement-related store state and actions
+ */
+export function useMeasurementState() {
+  // Basic measurement state
+  const measurements = useViewerStore((state) => state.measurements);
+  const pendingMeasurePoint = useViewerStore((state) => state.pendingMeasurePoint);
+  const activeMeasurement = useViewerStore((state) => state.activeMeasurement);
+
+  // Measurement actions
+  const addMeasurePoint = useViewerStore((state) => state.addMeasurePoint);
+  const completeMeasurement = useViewerStore((state) => state.completeMeasurement);
+  const startMeasurement = useViewerStore((state) => state.startMeasurement);
+  const updateMeasurement = useViewerStore((state) => state.updateMeasurement);
+  const finalizeMeasurement = useViewerStore((state) => state.finalizeMeasurement);
+  const cancelMeasurement = useViewerStore((state) => state.cancelMeasurement);
+  const updateMeasurementScreenCoords = useViewerStore((state) => state.updateMeasurementScreenCoords);
+
+  // Snap state
+  const snapEnabled = useViewerStore((state) => state.snapEnabled);
+  const setSnapTarget = useViewerStore((state) => state.setSnapTarget);
+  const setSnapVisualization = useViewerStore((state) => state.setSnapVisualization);
+
+  // Edge lock state for magnetic snapping
+  const edgeLockState = useViewerStore((state) => state.edgeLockState);
+  const setEdgeLock = useViewerStore((state) => state.setEdgeLock);
+  const updateEdgeLockPosition = useViewerStore((state) => state.updateEdgeLockPosition);
+  const clearEdgeLock = useViewerStore((state) => state.clearEdgeLock);
+  const incrementEdgeLockStrength = useViewerStore((state) => state.incrementEdgeLockStrength);
+
+  // Orthogonal constraint for shift+drag measurements
+  const measurementConstraintEdge = useViewerStore((state) => state.measurementConstraintEdge);
+  const setMeasurementConstraintEdge = useViewerStore((state) => state.setMeasurementConstraintEdge);
+  const updateConstraintActiveAxis = useViewerStore((state) => state.updateConstraintActiveAxis);
+  const clearMeasurementConstraintEdge = useViewerStore((state) => state.clearMeasurementConstraintEdge);
+
+  return {
+    // State
+    measurements,
+    pendingMeasurePoint,
+    activeMeasurement,
+    snapEnabled,
+    edgeLockState,
+    measurementConstraintEdge,
+
+    // Actions
+    addMeasurePoint,
+    completeMeasurement,
+    startMeasurement,
+    updateMeasurement,
+    finalizeMeasurement,
+    cancelMeasurement,
+    updateMeasurementScreenCoords,
+    setSnapTarget,
+    setSnapVisualization,
+    setEdgeLock,
+    updateEdgeLockPosition,
+    clearEdgeLock,
+    incrementEdgeLockStrength,
+    setMeasurementConstraintEdge,
+    updateConstraintActiveAxis,
+    clearMeasurementConstraintEdge,
+  };
+}
+
+/**
+ * Camera-related store actions
+ */
+export function useCameraState() {
+  const updateCameraRotationRealtime = useViewerStore((state) => state.updateCameraRotationRealtime);
+  const updateScaleRealtime = useViewerStore((state) => state.updateScaleRealtime);
+  const setCameraCallbacks = useViewerStore((state) => state.setCameraCallbacks);
+
+  return {
+    updateCameraRotationRealtime,
+    updateScaleRealtime,
+    setCameraCallbacks,
+  };
+}
+
+/**
+ * Hover/tooltip-related store state and actions
+ */
+export function useHoverState() {
+  const hoverTooltipsEnabled = useViewerStore((state) => state.hoverTooltipsEnabled);
+  const setHoverState = useViewerStore((state) => state.setHoverState);
+  const clearHover = useViewerStore((state) => state.clearHover);
+
+  return {
+    hoverTooltipsEnabled,
+    setHoverState,
+    clearHover,
+  };
+}
+
+/**
+ * Theme-related store state
+ */
+export function useThemeState() {
+  const theme = useViewerStore((state) => state.theme);
+
+  return {
+    theme,
+  };
+}
+
+/**
+ * Context menu-related store actions
+ */
+export function useContextMenuState() {
+  const openContextMenu = useViewerStore((state) => state.openContextMenu);
+
+  return {
+    openContextMenu,
+  };
+}
+
+/**
+ * Color update-related store state and actions
+ */
+export function useColorUpdateState() {
+  const pendingColorUpdates = useViewerStore((state) => state.pendingColorUpdates);
+  const clearPendingColorUpdates = useViewerStore((state) => state.clearPendingColorUpdates);
+
+  return {
+    pendingColorUpdates,
+    clearPendingColorUpdates,
+  };
+}
+
+/**
+ * IFC data store state
+ */
+export function useIfcDataState() {
+  const ifcDataStore = useViewerStore((state) => state.ifcDataStore);
+
+  return {
+    ifcDataStore,
+  };
+}
+
+/**
+ * All viewport-related selectors combined
+ * Use individual hooks above for more granular control
+ */
+export function useViewerSelectors() {
+  return {
+    selection: useSelectionState(),
+    visibility: useVisibilityState(),
+    tools: useToolState(),
+    measurement: useMeasurementState(),
+    camera: useCameraState(),
+    hover: useHoverState(),
+    theme: useThemeState(),
+    contextMenu: useContextMenuState(),
+    colorUpdates: useColorUpdateState(),
+    ifcData: useIfcDataState(),
+  };
+}