@ifc-lite/viewer 1.15.0 → 1.17.0

package/src/components/viewer/Viewport.tsx

@@ -23,9 +23,9 @@ import {
   useIfcDataState,
 } from '../../hooks/useViewerSelectors.js';
 import { useModelSelection } from '../../hooks/useModelSelection.js';
+import { useLatestRef } from '../../hooks/useLatestRef.js';
 import {
   getEntityBounds,
-  getEntityCenter,
   getThemeClearColor,
   type ViewportStateRefs,
 } from '../../utils/viewportUtils.js';
@@ -127,6 +127,10 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
   const handlePickForSelectionRef = useRef(handlePickForSelection);
   useEffect(() => { handlePickForSelectionRef.current = handlePickForSelection; }, [handlePickForSelection]);
 
+  // Orbit pivot is now set dynamically at the start of each orbit drag by
+  // raycasting under the cursor (see useMouseControls/useTouchControls).
+  // No need for selection-based orbit center — cursor-based is always better.
+
   // Multi-select handler: Ctrl+Click adds/removes from multi-selection
   // Properly populates both selectedEntitiesSet (multi-model) and selectedEntityIds (legacy)
   const handleMultiSelect = useCallback((globalId: number) => {
@@ -287,8 +291,6 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     separationLinesIntensity,
     separationLinesRadius,
   ]);
-  const visualEnhancementRef = useRef<VisualEnhancementOptions>(visualEnhancement);
-
   // Animation frame ref
   const animationFrameRef = useRef<number | null>(null);
   const lastFrameTimeRef = useRef<number>(0);
@@ -337,29 +339,29 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     max: { x: 100, y: 100, z: 100 },
   });
 
-  // Coordinate info ref for camera callbacks (to access latest buildingRotation)
-  const coordinateInfoRef = useRef<CoordinateInfo | undefined>(coordinateInfo);
-
-  // Visibility state refs for animation loop
-  const hiddenEntitiesRef = useRef<Set<number>>(hiddenEntities);
-  const isolatedEntitiesRef = useRef<Set<number> | null>(isolatedEntities);
-  const selectedEntityIdRef = useRef<number | null>(selectedEntityId);
-  const selectedEntityIdsRef = useRef<Set<number> | undefined>(selectedEntityIds);
-  const selectedModelIndexRef = useRef<number | undefined>(selectedModelIndex);
+  // Refs that stay in sync with props/state automatically (no useEffect needed).
+  // Event handlers and the animation loop read .current to get the latest value.
+  const coordinateInfoRef = useLatestRef(coordinateInfo);
+  const hiddenEntitiesRef = useLatestRef(hiddenEntities);
+  const isolatedEntitiesRef = useLatestRef(isolatedEntities);
+  const selectedEntityIdRef = useLatestRef(selectedEntityId);
+  const selectedEntityIdsRef = useLatestRef(selectedEntityIds);
+  const selectedModelIndexRef = useLatestRef(selectedModelIndex);
   const activeToolRef = useRef<string>(activeTool);
-  const pendingMeasurePointRef = useRef<MeasurePoint | null>(pendingMeasurePoint);
-  const activeMeasurementRef = useRef(activeMeasurement);
-  const snapEnabledRef = useRef(snapEnabled);
-  const edgeLockStateRef = useRef(edgeLockState);
-  const measurementConstraintEdgeRef = useRef(measurementConstraintEdge);
-  const sectionPlaneRef = useRef(sectionPlane);
-  const sectionRangeRef = useRef<{ min: number; max: number } | null>(null);
-  const geometryRef = useRef<MeshData[] | null>(geometry);
+  const pendingMeasurePointRef = useLatestRef(pendingMeasurePoint);
+  const activeMeasurementRef = useLatestRef(activeMeasurement);
+  const snapEnabledRef = useLatestRef(snapEnabled);
+  const edgeLockStateRef = useLatestRef(edgeLockState);
+  const measurementConstraintEdgeRef = useLatestRef(measurementConstraintEdge);
+  const sectionPlaneRef = useLatestRef(sectionPlane);
+  const sectionRangeRef = useLatestRef(sectionRange);
+  const visualEnhancementRef = useLatestRef(visualEnhancement);
+  const geometryRef = useLatestRef(geometry);
 
   // Hover throttling
   const lastHoverCheckRef = useRef<number>(0);
   const hoverThrottleMs = 50; // Check hover every 50ms
-  const hoverTooltipsEnabledRef = useRef(hoverTooltipsEnabled);
+  const hoverTooltipsEnabledRef = useLatestRef(hoverTooltipsEnabled);
 
   // Measure tool throttling (adaptive based on raycast performance)
   const measureRaycastPendingRef = useRef(false);
@@ -388,29 +390,18 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     canvasHeight: number;
   } | null>(null);
 
-  // Keep refs in sync
-  useEffect(() => { coordinateInfoRef.current = coordinateInfo; }, [coordinateInfo]);
-  useEffect(() => { hiddenEntitiesRef.current = hiddenEntities; }, [hiddenEntities]);
-  useEffect(() => { isolatedEntitiesRef.current = isolatedEntities; }, [isolatedEntities]);
-  useEffect(() => { selectedEntityIdRef.current = selectedEntityId; }, [selectedEntityId]);
-  useEffect(() => { selectedEntityIdsRef.current = selectedEntityIds; }, [selectedEntityIds]);
-  useEffect(() => { selectedModelIndexRef.current = selectedModelIndex; }, [selectedModelIndex]);
-  useEffect(() => { activeToolRef.current = activeTool; }, [activeTool]);
-  useEffect(() => { pendingMeasurePointRef.current = pendingMeasurePoint; }, [pendingMeasurePoint]);
-  useEffect(() => { activeMeasurementRef.current = activeMeasurement; }, [activeMeasurement]);
-  useEffect(() => { snapEnabledRef.current = snapEnabled; }, [snapEnabled]);
-  useEffect(() => { edgeLockStateRef.current = edgeLockState; }, [edgeLockState]);
-  useEffect(() => { measurementConstraintEdgeRef.current = measurementConstraintEdge; }, [measurementConstraintEdge]);
-  useEffect(() => { sectionPlaneRef.current = sectionPlane; }, [sectionPlane]);
-  useEffect(() => { sectionRangeRef.current = sectionRange; }, [sectionRange]);
-  useEffect(() => { visualEnhancementRef.current = visualEnhancement; }, [visualEnhancement]);
+  // activeTool has a side effect (first-person mode), so keep as useEffect
   useEffect(() => {
-    geometryRef.current = geometry;
-  }, [geometry]);
+    activeToolRef.current = activeTool;
+    const renderer = rendererRef.current;
+    if (renderer) {
+      const isWalk = activeTool === 'walk';
+      firstPersonModeRef.current = isWalk;
+      renderer.getCamera().enableFirstPersonMode(isWalk);
+    }
+  }, [activeTool]);
   useEffect(() => {
-    hoverTooltipsEnabledRef.current = hoverTooltipsEnabled;
     if (!hoverTooltipsEnabled) {
-      // Clear hover state when disabled
       clearHover();
     }
   }, [hoverTooltipsEnabled, clearHover]);
@@ -436,8 +427,6 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     // Set cursor based on active tool
     if (activeTool === 'measure') {
       canvas.style.cursor = 'crosshair';
-    } else if (activeTool === 'pan' || activeTool === 'orbit') {
-      canvas.style.cursor = 'grab';
     } else {
       canvas.style.cursor = 'default';
     }
@@ -520,19 +509,7 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
 
       const camera = renderer.getCamera();
       const renderCurrent = () => {
-        renderer.render({
-          hiddenIds: hiddenEntitiesRef.current,
-          isolatedIds: isolatedEntitiesRef.current,
-          selectedId: selectedEntityIdRef.current,
-          selectedModelIndex: selectedModelIndexRef.current,
-          clearColor: clearColorRef.current,
-          visualEnhancement: visualEnhancementRef.current,
-          sectionPlane: activeToolRef.current === 'section' ? {
-            ...sectionPlaneRef.current,
-            min: sectionRangeRef.current?.min,
-            max: sectionRangeRef.current?.max,
-          } : undefined,
-        });
+        renderer.requestRender();
       };
 
       // Register camera callbacks for ViewCube and other controls
@@ -689,6 +666,10 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
   // Sync on every render since mouseState is mutated directly by event handlers
   mouseIsDraggingRef.current = mouseStateRef.current.isDragging;
 
+  // isInteracting: set by mouse/touch controls during drag, cleared on mouseup/touchend.
+  // The animation loop reads this to skip post-processing during rapid camera movement.
+  const isInteractingRef = useRef(false);
+
   // ===== Extracted hooks =====
   useMouseControls({
     canvasRef,
@@ -716,6 +697,7 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     hoverTooltipsEnabledRef,
     lastRenderTimeRef,
     renderPendingRef,
+    isInteractingRef,
     lastClickTimeRef,
     lastClickPosRef,
     lastCameraStateRef,
@@ -762,6 +744,7 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     sectionPlaneRef,
     sectionRangeRef,
     geometryRef,
+    isInteractingRef,
     handlePickForSelection: (pickResult) => handlePickForSelectionRef.current(pickResult),
     getPickOptions,
   });
@@ -802,6 +785,9 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     sectionPlaneRef,
     sectionRangeRef,
     visualEnhancementRef,
+    selectedEntityIdsRef,
+    coordinateInfoRef,
+    isInteractingRef,
     lastCameraStateRef,
     updateCameraRotationRealtime,
     calculateScale,

package/src/components/viewer/ViewportContainer.tsx

@@ -8,6 +8,7 @@ import { ViewportOverlays } from './ViewportOverlays';
 import { ToolOverlays } from './ToolOverlays';
 import { Section2DPanel } from './Section2DPanel';
 import { BasketPresentationDock } from './BasketPresentationDock';
+import { BCFOverlay } from './bcf/BCFOverlay';
 import { useViewerStore } from '@/store';
 import { collectIfcBuildingStoreyElementsWithIfcSpace } from '@/store/basketVisibleSet';
 import { useIfc } from '@/hooks/useIfc';
@@ -32,6 +33,7 @@ export function ViewportContainer() {
   // Multi-model support: get all loaded models from store (for merged geometry)
   const storeModels = useViewerStore((s) => s.models);
   const resetViewerState = useViewerStore((s) => s.resetViewerState);
+  const bcfOverlayVisible = useViewerStore((s) => s.bcfOverlayVisible);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [isDragging, setIsDragging] = useState(false);
   const [showTroubleshooting, setShowTroubleshooting] = useState(false);
@@ -611,6 +613,7 @@ export function ViewportContainer() {
         computedIsolatedIds={computedIsolatedIds}
         modelIdToIndex={modelIdToIndex}
       />
+      {bcfOverlayVisible && <BCFOverlay />}
       <ViewportOverlays />
       <ToolOverlays />
       <BasketPresentationDock />

package/src/components/viewer/ViewportOverlays.tsx

@@ -18,7 +18,7 @@ import { cn } from '@/lib/utils';
 import { ViewCube, type ViewCubeRef } from './ViewCube';
 import { AxisHelper, type AxisHelperRef } from './AxisHelper';
 
-export function ViewportOverlays() {
+export function ViewportOverlays({ hideViewCube = false }: { hideViewCube?: boolean } = {}) {
   const selectedStoreys = useViewerStore((s) => s.selectedStoreys);
   const hiddenEntities = useViewerStore((s) => s.hiddenEntities);
   const isolatedEntities = useViewerStore((s) => s.isolatedEntities);
@@ -180,15 +180,17 @@ export function ViewportOverlays() {
       )}
 
       {/* ViewCube (top-right) */}
-      <div className="absolute top-6 right-6">
-        <ViewCube
-          ref={viewCubeRef}
-          onViewChange={handleViewChange}
-          onDrag={(deltaX, deltaY) => cameraCallbacks.orbit?.(deltaX, deltaY)}
-          rotationX={initialRotationX}
-          rotationY={initialRotationY}
-        />
-      </div>
+      {!hideViewCube && (
+        <div className="absolute top-6 right-6">
+          <ViewCube
+            ref={viewCubeRef}
+            onViewChange={handleViewChange}
+            onDrag={(deltaX, deltaY) => cameraCallbacks.orbit?.(deltaX, deltaY)}
+            rotationX={initialRotationX}
+            rotationY={initialRotationY}
+          />
+        </div>
+      )}
 
       {/* Axis Helper (bottom-left, above scale bar) - IFC Z-up convention */}
       <div className="absolute bottom-16 left-4">

package/src/components/viewer/bcf/BCFOverlay.tsx

@@ -0,0 +1,254 @@
+/* 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/. */
+
+/**
+ * BCFOverlay — renders BCF topic markers as 3D-positioned overlays in the viewport.
+ *
+ * Connects:
+ *   - Zustand store (BCF topics, active topic)
+ *   - Renderer (camera projection, entity bounds)
+ *   - BCFOverlayRenderer (pure DOM marker rendering)
+ *   - BCF panel (click marker → open topic, bidirectional sync)
+ *
+ * KEY DESIGN: Bounds lookup queries the renderer Scene directly via a
+ * mutable ref (not React state). Marker computation is triggered by an
+ * `overlayReady` counter that bumps once the renderer is available AND
+ * when loading completes (ensuring bounding boxes are cached).
+ * The camera's current distance is passed as `targetDistance` so fallback
+ * markers land at the orbit center — not at hardcoded 10 units.
+ */
+
+import { useEffect, useRef, useCallback, useMemo, useState } from 'react';
+import { useViewerStore } from '@/store';
+import { getGlobalRenderer } from '@/hooks/useBCF';
+import { globalIdToExpressId as globalIdToExpressIdLookup } from '@/hooks/bcfIdLookup';
+import {
+  computeMarkerPositions,
+  BCFOverlayRenderer,
+  type BCFOverlayProjection,
+  type OverlayBBox,
+  type OverlayPoint3D,
+  type EntityBoundsLookup,
+} from '@ifc-lite/bcf';
+import type { Renderer } from '@ifc-lite/renderer';
+
+// ============================================================================
+// WebGPU projection adapter
+// ============================================================================
+
+function createWebGPUProjection(
+  renderer: Renderer,
+  canvas: HTMLCanvasElement,
+): BCFOverlayProjection {
+  let prevPosX = NaN;
+  let prevPosY = NaN;
+  let prevPosZ = NaN;
+  let prevTgtX = NaN;
+  let prevTgtY = NaN;
+  let prevTgtZ = NaN;
+  let prevWidth = 0;
+  let prevHeight = 0;
+
+  const listeners = new Set<() => void>();
+  let rafId: number | null = null;
+  let listenerCount = 0;
+
+  function poll() {
+    rafId = requestAnimationFrame(poll);
+    const cam = renderer.getCamera();
+    const pos = cam.getPosition();
+    const tgt = cam.getTarget();
+    const w = canvas.clientWidth;
+    const h = canvas.clientHeight;
+
+    if (
+      pos.x !== prevPosX || pos.y !== prevPosY || pos.z !== prevPosZ ||
+      tgt.x !== prevTgtX || tgt.y !== prevTgtY || tgt.z !== prevTgtZ ||
+      w !== prevWidth || h !== prevHeight
+    ) {
+      prevPosX = pos.x; prevPosY = pos.y; prevPosZ = pos.z;
+      prevTgtX = tgt.x; prevTgtY = tgt.y; prevTgtZ = tgt.z;
+      prevWidth = w; prevHeight = h;
+      for (const cb of listeners) cb();
+    }
+  }
+
+  return {
+    projectToScreen(worldPos: OverlayPoint3D) {
+      return renderer.getCamera().projectToScreen(
+        worldPos,
+        canvas.clientWidth,
+        canvas.clientHeight,
+      );
+    },
+
+    getEntityBounds(expressId: number): OverlayBBox | null {
+      return renderer.getScene().getEntityBoundingBox(expressId);
+    },
+
+    getCanvasSize() {
+      return { width: canvas.clientWidth, height: canvas.clientHeight };
+    },
+
+    getCameraPosition(): OverlayPoint3D {
+      return renderer.getCamera().getPosition();
+    },
+
+    onCameraChange(callback: () => void) {
+      listeners.add(callback);
+      listenerCount++;
+      if (listenerCount === 1) rafId = requestAnimationFrame(poll);
+      return () => {
+        listeners.delete(callback);
+        listenerCount--;
+        if (listenerCount === 0 && rafId !== null) {
+          cancelAnimationFrame(rafId);
+          rafId = null;
+        }
+      };
+    },
+  };
+}
+
+// ============================================================================
+// React Component
+// ============================================================================
+
+export function BCFOverlay() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const overlayRef = useRef<BCFOverlayRenderer | null>(null);
+  const rendererRef = useRef<Renderer | null>(null);
+
+  // Bumped when overlay/renderer is ready or geometry finishes loading,
+  // triggering marker recomputation with real bounding boxes.
+  const [overlayReady, setOverlayReady] = useState(0);
+
+  // Store selectors
+  const bcfProject = useViewerStore((s) => s.bcfProject);
+  const activeTopicId = useViewerStore((s) => s.activeTopicId);
+  const setActiveTopic = useViewerStore((s) => s.setActiveTopic);
+  const setBcfPanelVisible = useViewerStore((s) => s.setBcfPanelVisible);
+  const models = useViewerStore((s) => s.models);
+  const loading = useViewerStore((s) => s.loading);
+  const ifcDataStore = useViewerStore((s) => s.ifcDataStore);
+
+  // GlobalId → expressId lookup (delegates to shared utility)
+  const globalIdToExpressId = useCallback(
+    (globalIdString: string) =>
+      globalIdToExpressIdLookup(globalIdString, models, ifcDataStore),
+    [models, ifcDataStore],
+  );
+
+  // Bounds lookup — queries the renderer Scene directly
+  const boundsLookup: EntityBoundsLookup = useCallback(
+    (ifcGuid: string): OverlayBBox | null => {
+      const r = rendererRef.current;
+      if (!r) return null;
+      const result = globalIdToExpressId(ifcGuid);
+      if (!result) return null;
+      return r.getScene().getEntityBoundingBox(result.expressId);
+    },
+    [globalIdToExpressId],
+  );
+
+  // Get current camera distance (for proper fallback marker placement)
+  const getCameraDistance = useCallback((): number => {
+    const r = rendererRef.current;
+    if (!r) return 50; // safe default
+    return r.getCamera().getDistance();
+  }, []);
+
+  // Topics list
+  const topics = (() => {
+    if (!bcfProject) return [];
+    return Array.from(bcfProject.topics.values());
+  })();
+
+  // Compute markers — recomputes when topics, bounds, loading, or readiness changes
+  const markers = useMemo(
+    () => computeMarkerPositions(topics, boundsLookup, {
+      targetDistance: getCameraDistance(),
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [topics, boundsLookup, overlayReady, loading],
+  );
+
+  // Initialize overlay renderer
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const renderer = getGlobalRenderer();
+    if (!renderer) return;
+
+    const canvas = container.closest('[data-viewport]')?.querySelector('canvas') as HTMLCanvasElement | null;
+    if (!canvas) return;
+
+    rendererRef.current = renderer;
+
+    const projection = createWebGPUProjection(renderer, canvas);
+    const overlay = new BCFOverlayRenderer(container, projection, {
+      showConnectors: true,
+      showTooltips: true,
+      verticalOffset: 36,
+    });
+    overlayRef.current = overlay;
+
+    // Trigger marker recomputation now that renderer is available
+    setOverlayReady((n) => n + 1);
+
+    return () => {
+      overlay.dispose();
+      overlayRef.current = null;
+      rendererRef.current = null;
+    };
+  }, [models]);
+
+  // Recompute markers when loading finishes (bounding boxes get cached)
+  useEffect(() => {
+    if (!loading && rendererRef.current) {
+      setOverlayReady((n) => n + 1);
+    }
+  }, [loading]);
+
+  // Push markers to overlay renderer
+  useEffect(() => {
+    overlayRef.current?.setMarkers(markers);
+  }, [markers, overlayReady]);
+
+  // Sync active marker
+  useEffect(() => {
+    overlayRef.current?.setActiveMarker(activeTopicId);
+  }, [activeTopicId, overlayReady]);
+
+  // Visibility — reproject markers when becoming visible so they don't
+  // sit at stale positions until the next camera move.
+  useEffect(() => {
+    const overlay = overlayRef.current;
+    if (!overlay) return;
+    const hasTopics = bcfProject !== null && bcfProject.topics.size > 0;
+    overlay.setVisible(hasTopics);
+    if (hasTopics) overlay.updatePositions();
+  }, [bcfProject, overlayReady]);
+
+  // Click handler — read bcfPanelVisible from store inside callback to
+  // avoid re-registering the handler on every panel toggle.
+  useEffect(() => {
+    const overlay = overlayRef.current;
+    if (!overlay) return;
+    return overlay.onMarkerClick((topicGuid) => {
+      setActiveTopic(topicGuid);
+      const panelVisible = useViewerStore.getState().bcfPanelVisible;
+      if (!panelVisible) setBcfPanelVisible(true);
+    });
+  }, [overlayReady, setActiveTopic, setBcfPanelVisible]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="absolute inset-0 pointer-events-none z-20"
+      data-bcf-overlay
+    />
+  );
+}

package/src/components/viewer/hierarchy/HierarchyNode.tsx

@@ -4,13 +4,7 @@
 
 import {
   ChevronRight,
-  Building2,
   Layers,
-  MapPin,
-  FolderKanban,
-  Square,
-  Box,
-  DoorOpen,
   Eye,
   EyeOff,
   FileBox,
@@ -20,21 +14,21 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip
 import { cn } from '@/lib/utils';
 import type { TreeNode } from './types';
 import { isSpatialContainer } from './types';
+import { IFC_ICON_CODEPOINTS, IFC_ICON_DEFAULT } from './ifc-icons';
 
-const TYPE_ICONS: Record<string, React.ElementType> = {
+/**
+ * Resolve the Material Symbols code point for a given IFC type string.
+ * Falls back to the generic product icon for unmapped classes.
+ */
+function getIfcIconCodepoint(ifcType: string | undefined): string {
+  if (!ifcType) return IFC_ICON_DEFAULT;
+  return IFC_ICON_CODEPOINTS[ifcType] ?? IFC_ICON_DEFAULT;
+}
+
+/** Lucide fallback icons for non-IFC node types */
+const NODE_TYPE_ICONS: Record<string, React.ElementType> = {
   'unified-storey': Layers,
   'model-header': FileBox,
-  'ifc-type': Building2,
-  IfcProject: FolderKanban,
-  IfcSite: MapPin,
-  IfcBuilding: Building2,
-  IfcBuildingStorey: Layers,
-  IfcSpace: Box,
-  IfcWall: Square,
-  IfcWallStandardCase: Square,
-  IfcDoor: DoorOpen,
-  element: Box,
-  default: Box,
 };
 
 export interface HierarchyNodeProps {
@@ -69,7 +63,9 @@ export function HierarchyNode({
   onModelHeaderClick,
 }: HierarchyNodeProps) {
   const resolvedType = node.ifcType || node.type;
-  const Icon = TYPE_ICONS[resolvedType] || TYPE_ICONS[node.type] || TYPE_ICONS.default;
+  // Use Lucide icon for non-IFC structural nodes, Material Symbols for IFC classes
+  const LucideIcon = NODE_TYPE_ICONS[node.type];
+  const iconCodepoint = getIfcIconCodepoint(resolvedType);
 
   // Model header nodes (for visibility control and expansion)
   if (node.type === 'model-header' && node.id.startsWith('model-')) {
@@ -259,7 +255,17 @@ export function HierarchyNode({
         {/* Type Icon */}
         <Tooltip>
           <TooltipTrigger asChild>
-            <Icon className="h-3.5 w-3.5 shrink-0 text-zinc-500 dark:text-zinc-400" />
+            {LucideIcon ? (
+              <LucideIcon className="h-3.5 w-3.5 shrink-0 text-zinc-500 dark:text-zinc-400" />
+            ) : (
+              <span
+                className="material-symbols-outlined shrink-0 leading-none text-zinc-500 dark:text-zinc-400"
+                style={{ fontSize: '14px' }}
+                aria-hidden="true"
+              >
+                {iconCodepoint}
+              </span>
+            )}
           </TooltipTrigger>
           <TooltipContent>
             <p className="text-xs">{resolvedType}</p>

package/src/components/viewer/hierarchy/ifc-icons.ts

@@ -0,0 +1,90 @@
+/* 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/. */
+
+/**
+ * IFC class to Material Symbols icon code point mapping.
+ * Based on https://github.com/AECgeeks/ifc-icons (MIT license).
+ *
+ * Values are Unicode code points for the Material Symbols Outlined font.
+ */
+export const IFC_ICON_CODEPOINTS: Record<string, string> = {
+  // Spatial / context
+  IfcContext: '\uf1c4',
+  IfcProject: '\uf1c4',
+  IfcProjectLibrary: '\uf1c4',
+  IfcSite: '\ue80b',
+  IfcBuilding: '\uea40',
+  IfcBuildingStorey: '\ue8fe',
+  IfcSpace: '\ueff4',
+
+  // Structural
+  IfcBeam: '\uf108',
+  IfcBeamStandardCase: '\uf108',
+  IfcColumn: '\ue233',
+  IfcColumnStandardCase: '\ue233',
+  IfcWall: '\ue3c0',
+  IfcWallStandardCase: '\ue3c0',
+  IfcWallElementedCase: '\ue3c0',
+  IfcSlab: '\ue229',
+  IfcSlabStandardCase: '\ue229',
+  IfcSlabElementedCase: '\ue229',
+  IfcRoof: '\uf201',
+  IfcFooting: '\uf200',
+  IfcPile: '\ue047',
+  IfcPlate: '\ue047',
+  IfcPlateStandardCase: '\ue047',
+  IfcMember: '\ue047',
+  IfcMemberStandardCase: '\ue047',
+
+  // Openings & access
+  IfcDoor: '\ueb4f',
+  IfcDoorStandardCase: '\ueb4f',
+  IfcWindow: '\uf088',
+  IfcWindowStandardCase: '\uf088',
+  IfcOpeningElement: '\ue3c6',
+  IfcOpeningStandardCase: '\ue3c6',
+  IfcCurtainWall: '\ue047',
+
+  // Vertical circulation
+  IfcStair: '\uf1a9',
+  IfcStairFlight: '\uf1a9',
+  IfcRamp: '\ue86b',
+  IfcRampFlight: '\ue86b',
+  IfcRailing: '\ue58f',
+
+  // Furnishing
+  IfcFurnishingElement: '\uea45',
+  IfcFurniture: '\uea45',
+  IfcSystemFurnitureElement: '\uea45',
+
+  // MEP terminals
+  IfcAirTerminal: '\uefd8',
+  IfcLamp: '\uf02a',
+  IfcLightFixture: '\uf02a',
+  IfcSanitaryTerminal: '\uea41',
+  IfcSpaceHeater: '\uf076',
+  IfcAudioVisualAppliance: '\ue333',
+  IfcSensor: '\ue51e',
+
+  // Assemblies & misc
+  IfcElementAssembly: '\ue9b0',
+  IfcTransportElement: '\uf1a0',
+  IfcGrid: '\uf015',
+  IfcPort: '\ue8c0',
+  IfcDistributionPort: '\ue8c0',
+  IfcAnnotation: '\ue3c9',
+
+  // Civil / geographic
+  IfcCivilElement: '\uea99',
+  IfcGeographicElement: '\uea99',
+  IfcLinearElement: '\uebaa',
+
+  // Proxy / generic fallback
+  IfcProduct: '\ue047',
+  IfcBuildingElementProxy: '\ue047',
+  IfcProxy: '\ue047',
+};
+
+/** Default code point for unmapped IFC classes (Material Symbols "widgets" / generic product) */
+export const IFC_ICON_DEFAULT = '\ue047';