@ifc-lite/viewer 1.27.0 → 1.28.1

package/src/components/viewer/ViewportContainer.tsx

@@ -19,10 +19,7 @@ import { toGlobalIdFromModels } from '@/store/globalId';
 import { collectIfcBuildingStoreyElementsWithIfcSpace } from '@/store/basketVisibleSet';
 import { useIfc } from '@/hooks/useIfc';
 import { useWebGPU } from '@/hooks/useWebGPU';
-import { openIfcFileDialog } from '@/services/file-dialog';
-import { logToDesktopTerminal } from '@/services/desktop-logger';
 import { cacheFileBlobs, formatFileSize, getCachedFile, getRecentFiles, recordRecentFiles, type RecentFileEntry } from '@/lib/recent-files';
-import { isTauri } from '@/lib/platform';
 import { toast } from '@/components/ui/toast';
 import { describeUnsupportedFormat } from '@/hooks/ingest/pointCloudIngest';
 import { Upload, MousePointer, Layers, Info, Command, AlertTriangle, ChevronDown, ExternalLink, Plus, Clock3, Sparkles, ArrowUpRight, PackagePlus } from 'lucide-react';
@@ -69,6 +66,7 @@ export function ViewportContainer() {
   const releaseGeometryMemory = useViewerStore((s) => s.releaseGeometryMemory);
   const selectedStoreys = useViewerStore((s) => s.selectedStoreys);
   const typeVisibility = useViewerStore((s) => s.typeVisibility);
+  const typeViewMode = useViewerStore((s) => s.typeViewMode);
   const isolatedEntities = useViewerStore((s) => s.isolatedEntities);
   const classFilter = useViewerStore((s) => s.classFilter);
   const resetViewerState = useViewerStore((s) => s.resetViewerState);
@@ -392,20 +390,6 @@ export function ViewportContainer() {
     setCesiumSourceModelId(georef?.sourceModelId ?? null);
   }, [georef?.sourceModelId, setCesiumSourceModelId]);
 
-  useEffect(() => {
-    // Recent files are a desktop-only feature — the web viewer should not
-    // show previously opened files in the landing page empty state.
-    if (!isTauri()) return;
-
-    const refreshRecentFiles = () => {
-      setRecentFiles(getRecentFiles().slice(0, 3));
-    };
-
-    refreshRecentFiles();
-    window.addEventListener('focus', refreshRecentFiles);
-    return () => window.removeEventListener('focus', refreshRecentFiles);
-  }, []);
-
   const handleDragOver = useCallback((e: React.DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -504,7 +488,6 @@ export function ViewportContainer() {
 
   const handleStartBlank = useCallback(async () => {
     if (!webgpu.supported) return;
-    void logToDesktopTerminal('info', '[ViewportContainer] Start blank IFC clicked');
     const file = createBlankIfcFile();
     // Must await: loadFile() calls resetViewerState() internally which
     // resets activeTool back to 'select'. Setting addElement before that
@@ -526,6 +509,7 @@ export function ViewportContainer() {
   const filteredSourceLenRef = useRef(0);
   const filteredSourceRef = useRef<MeshData[] | null>(null);
   const filteredTypeVisRef = useRef(typeVisibility);
+  const filteredTypeModeRef = useRef(typeViewMode);
   const filteredVersionRef = useRef(0);
 
   const filteredGeometry = useMemo(() => {
@@ -540,18 +524,21 @@ export function ViewportContainer() {
     const allMeshes = mergedGeometryResult.meshes;
     const cache = filteredCacheRef.current;
 
-    // Full rebuild if: type visibility changed, source shrunk (new file), or empty cache
+    // Full rebuild if: type visibility changed, view mode changed, source shrunk
+    // (new file), or empty cache
     const prevVis = filteredTypeVisRef.current;
     const typeVisChanged =
       prevVis.spaces !== typeVisibility.spaces ||
       prevVis.openings !== typeVisibility.openings ||
-      prevVis.site !== typeVisibility.site;
+      prevVis.site !== typeVisibility.site ||
+      filteredTypeModeRef.current !== typeViewMode;
     const sourceChanged = filteredSourceRef.current !== allMeshes;
     if (typeVisChanged || sourceChanged || allMeshes.length < filteredSourceLenRef.current) {
       cache.length = 0;
       filteredSourceLenRef.current = 0;
       filteredSourceRef.current = allMeshes;
       filteredTypeVisRef.current = typeVisibility;
+      filteredTypeModeRef.current = typeViewMode;
     }
 
     const needsFilter = !typeVisibility.spaces || !typeVisibility.openings || !typeVisibility.site;
@@ -562,6 +549,18 @@ export function ViewportContainer() {
       const mesh = allMeshes[i];
       const ifcType = mesh.ifcType;
 
+      // Model/Types view switch (#957 follow-up). geometryClass: 0 = occurrence,
+      // 1 = orphan type (no occurrence — shown in BOTH modes since it's the only
+      // geometry), 2 = instanced type-library shape. In 'model' mode hide class 2
+      // (else the AC20 duplicate boxes at the MappingOrigin reappear); in 'types'
+      // mode hide occurrences (class 0) so only the type library shows.
+      const geometryClass = mesh.geometryClass ?? 0;
+      if (typeViewMode === 'types') {
+        if (geometryClass === 0) continue;
+      } else if (geometryClass === 2) {
+        continue;
+      }
+
       if (needsFilter) {
         if (ifcType === 'IfcSpace' && !typeVisibility.spaces) continue;
         if (ifcType === 'IfcOpeningElement' && !typeVisibility.openings) continue;
@@ -588,7 +587,7 @@ export function ViewportContainer() {
     // Return the same array reference — downstream change detection uses
     // geometryVersion (which increments each batch) instead of array identity.
     return cache;
-  }, [mergedGeometryResult, typeVisibility]);
+  }, [mergedGeometryResult, typeVisibility, typeViewMode]);
 
   // Version counter that changes every batch — triggers useGeometryStreaming
   // without requiring a new geometry array reference.
@@ -882,27 +881,10 @@ export function ViewportContainer() {
             */}
             {/* Track 1 — open / drag */}
             <button
-              onClick={async () => {
+              onClick={() => {
                 if (!webgpu.supported) {
                   return;
                 }
-
-                void logToDesktopTerminal('info', '[ViewportContainer] Empty-state open button clicked');
-                const file = await openIfcFileDialog();
-                if (file) {
-                  void logToDesktopTerminal('info', `[ViewportContainer] Native dialog selected ${file.path}`);
-                  recordRecentFiles([{
-                    name: file.name,
-                    size: file.size,
-                    path: file.path,
-                    modifiedMs: file.modifiedMs ?? null,
-                  }]);
-                  setRecentFiles(getRecentFiles().slice(0, 3));
-                  loadFile(file);
-                  return;
-                }
-
-                void logToDesktopTerminal('info', '[ViewportContainer] Falling back to browser file input');
                 fileInputRef.current?.click();
               }}
               disabled={!webgpu.supported || webgpu.checking}
@@ -1064,7 +1046,7 @@ export function ViewportContainer() {
       )}
 
       {/* Cesium 3D world context overlay — rendered behind the WebGPU canvas (web only) */}
-      {cesiumEnabled && georef && !isTauri() && (
+      {cesiumEnabled && georef && (
         <CesiumOverlay
           mapConversion={georef.mapConversion}
           cameraMapConversion={georef.baseMapConversion}
@@ -1075,7 +1057,7 @@ export function ViewportContainer() {
           storeyElevations={georef.storeyElevations}
         />
       )}
-      {cesiumEnabled && georef?.mapConversion && !isTauri() && georef.baseMapConversion && (
+      {cesiumEnabled && georef?.mapConversion && georef.baseMapConversion && (
         <CesiumPlacementEditor
           modelId={georef.sourceModelId}
           mapConversion={georef.mapConversion}
@@ -1094,7 +1076,7 @@ export function ViewportContainer() {
         coordinateInfo={mergedGeometryResult?.coordinateInfo}
         computedIsolatedIds={computedIsolatedIds}
         modelIdToIndex={modelIdToIndex}
-        cesiumActive={cesiumEnabled && georef !== null && !isTauri()}
+        cesiumActive={cesiumEnabled && georef !== null}
         releaseGeometryAfterStream={false}
         onGeometryReleased={releaseGeometryMemory}
       />

package/src/components/viewer/ViewportOverlays.tsx

@@ -15,15 +15,12 @@ import { useViewerStore } from '@/store';
 import { goHomeFromStore } from '@/store/homeView';
 import { useIfc } from '@/hooks/useIfc';
 import { cn } from '@/lib/utils';
-import { isTauri } from '@/lib/platform';
 import { ViewCube, type ViewCubeRef } from './ViewCube';
 import { AxisHelper, type AxisHelperRef } from './AxisHelper';
 import { BasepointOverlay } from './BasepointOverlay';
 import { PointCloudPanel } from './PointCloudPanel';
 import { Crosshair } from 'lucide-react';
 
-const isDesktop = isTauri();
-
 export function ViewportOverlays({ hideViewCube = false }: { hideViewCube?: boolean } = {}) {
   const selectedStoreys = useViewerStore((s) => s.selectedStoreys);
   const hiddenEntities = useViewerStore((s) => s.hiddenEntities);
@@ -144,7 +141,7 @@ export function ViewportOverlays({ hideViewCube = false }: { hideViewCube?: bool
     <>
       <PointCloudPanelMount />
       {/* Bottom-right: Navigation controls (hidden when Cesium active — Cesium is web-only) */}
-      {!(cesiumEnabled && !isDesktop) && (
+      {!cesiumEnabled && (
         <div
           className={cn(
             'absolute flex flex-col gap-1 bg-background/90 backdrop-blur-sm border p-1',

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

@@ -275,7 +275,7 @@ export function HierarchyNode({
         {/* Name */}
         <span className={cn(
           'flex-1 text-sm truncate ml-1.5',
-          isSpatialContainer(node.type) || node.type === 'IfcBuildingStorey' || node.type === 'IfcSpace' || node.type === 'unified-storey' || node.type === 'type-group'
+          isSpatialContainer(node.type) || node.type === 'IfcBuildingStorey' || node.type === 'IfcSpace' || node.type === 'unified-storey' || node.type === 'type-group' || node.type === 'material-group'
             ? 'font-medium text-zinc-900 dark:text-zinc-100'
             : 'text-zinc-700 dark:text-zinc-300',
           nodeHidden && 'line-through decoration-zinc-400 dark:decoration-zinc-600'
@@ -306,11 +306,11 @@ export function HierarchyNode({
           <Tooltip>
             <TooltipTrigger asChild>
               <span className="text-[10px] font-mono bg-zinc-100 dark:bg-zinc-950 px-1.5 py-0.5 border border-zinc-200 dark:border-zinc-800 text-zinc-500 dark:text-zinc-400 rounded-none">
-                {node.elementCount}
+                {node.elementCount.toLocaleString()}
               </span>
             </TooltipTrigger>
             <TooltipContent>
-              <p className="text-xs">{node.elementCount} {node.elementCount === 1 ? 'element' : 'elements'}</p>
+              <p className="text-xs">{node.elementCount.toLocaleString()} {node.elementCount === 1 ? 'element' : 'elements'}</p>
             </TooltipContent>
           </Tooltip>
         )}

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

@@ -140,6 +140,15 @@ export const IFC_ICON_CODEPOINTS: Record<string, string> = {
   IfcTrackElement: '\ue260', // "linear_scale"
   IfcVehicle: '\ue531', // "directions_car"
 
+  // Materials (Materials hierarchy tab)
+  IfcMaterial: '\ue4f4', // "texture"
+  IfcMaterialLayerSet: '\ue8fe', // "layers"
+  IfcMaterialLayerSetUsage: '\ue8fe',
+  IfcMaterialProfileSet: '\ue8fe',
+  IfcMaterialProfileSetUsage: '\ue8fe',
+  IfcMaterialConstituentSet: '\ue4f4',
+  IfcMaterialList: '\ue4f4',
+
   // Proxy / generic fallback
   IfcProduct: '\ue047',
   IfcBuildingElementProxy: '\ue047',

package/src/components/viewer/hierarchy/treeDataBuilder.ts

@@ -12,6 +12,7 @@ import {
   type SpatialNode,
 } from '@ifc-lite/data';
 import type { IfcDataStore } from '@ifc-lite/parser';
+import { buildMaterialUsageIndex } from '@ifc-lite/parser';
 import { useViewerStore, type FederatedModel } from '@/store';
 import { toGlobalIdFromModels } from '@/store/globalId';
 import type { TreeNode, NodeType, StoreyData, UnifiedStorey } from './types';
@@ -712,6 +713,92 @@ export function buildIfcTypeTree(
   return nodes;
 }
 
+/**
+ * Build a flat "By Material" tree: one row per base material (IfcMaterial),
+ * grouped by name so the same-named material across federated models merges.
+ * Each row carries the using elements' global ids for click-to-isolate and the
+ * representative material express id for the properties panel. Mirrors
+ * {@link buildIfcTypeTree} but keyed on the parser's material usage index.
+ */
+export function buildMaterialTree(
+  models: Map<string, FederatedModel>,
+  ifcDataStore: IfcDataStore | null | undefined,
+  _expandedNodes: Set<string>,
+  _isMultiModel: boolean,
+  geometricIds?: Set<number>,
+): TreeNode[] {
+  interface MatEntry {
+    name: string;
+    ifcClass: string;
+    materialId: number;          // representative material express id
+    modelIds: Set<string>;       // contributing models (insertion order)
+    elements: Map<number, number>; // globalId -> expressId (deduped)
+  }
+
+  const byName = new Map<string, MatEntry>();
+  const applyGeomFilter = !!geometricIds && geometricIds.size > 0;
+
+  const processDataStore = (dataStore: IfcDataStore, modelId: string) => {
+    const usage = buildMaterialUsageIndex(dataStore);
+    for (const u of usage.values()) {
+      let entry = byName.get(u.name);
+      if (!entry) {
+        // Invariant: the representative `materialId` and the first entry in
+        // `modelIds` come from the SAME (first-contributing) model, so the click
+        // handler's `node.modelIds[0]` + `node.entityExpressId` always resolve a
+        // valid (model, material) pair. Sets preserve insertion order.
+        entry = {
+          name: u.name,
+          ifcClass: u.ifcClass,
+          materialId: u.id,
+          modelIds: new Set([modelId]),
+          elements: new Map(),
+        };
+        byName.set(u.name, entry);
+      } else {
+        entry.modelIds.add(modelId);
+      }
+      for (const { entityId } of u.entries) {
+        const globalId = resolveTreeGlobalId(modelId, entityId, models);
+        if (applyGeomFilter && !geometricIds!.has(globalId)) continue;
+        entry.elements.set(globalId, entityId);
+      }
+    }
+  };
+
+  if (models.size > 0) {
+    for (const [modelId, model] of models) {
+      if (model.ifcDataStore) processDataStore(model.ifcDataStore, modelId);
+    }
+  } else if (ifcDataStore) {
+    processDataStore(ifcDataStore, 'legacy');
+  }
+
+  const nodes: TreeNode[] = [];
+  const names = Array.from(byName.keys()).sort((a, b) => a.localeCompare(b));
+  for (const name of names) {
+    const entry = byName.get(name)!;
+    if (entry.elements.size === 0) continue; // skip materials with no visible elements (dead clicks)
+    nodes.push({
+      id: `material-${name}`,
+      expressIds: Array.from(entry.elements.values()),
+      globalIds: Array.from(entry.elements.keys()),
+      entityExpressId: entry.materialId,
+      modelIds: Array.from(entry.modelIds),
+      name,
+      type: 'material-group',
+      ifcType: entry.ifcClass,
+      depth: 0,
+      hasChildren: false,
+      isExpanded: false,
+      isVisible: true,
+      elementCount: entry.elements.size,
+    });
+  }
+
+  return nodes;
+}
+
 /** Filter nodes based on search query */
 export function filterNodes(nodes: TreeNode[], searchQuery: string): TreeNode[] {
   if (!searchQuery.trim()) return nodes;

package/src/components/viewer/hierarchy/types.ts

@@ -22,6 +22,7 @@ export type NodeType =
   | 'IfcSpace'            // Space node
   | 'type-group'          // IFC class grouping header (e.g., "IfcWall (47)")
   | 'ifc-type'            // IFC type entity node (e.g., "IfcWallType/W01")
+  | 'material-group'      // Material grouping (e.g., "Concrete (47)") from the Materials tab
   | 'element';            // Individual element
 
 export interface TreeNode {

package/src/components/viewer/hierarchy/useHierarchyTree.ts

@@ -13,11 +13,12 @@ import {
   buildTreeData,
   buildTypeTree,
   buildIfcTypeTree,
+  buildMaterialTree,
   filterNodes,
   splitNodes,
 } from './treeDataBuilder';
 
-export type GroupingMode = 'spatial' | 'type' | 'ifc-type';
+export type GroupingMode = 'spatial' | 'type' | 'ifc-type' | 'material';
 
 interface UseHierarchyTreeParams {
   models: Map<string, FederatedModel>;
@@ -192,6 +193,9 @@ export function useHierarchyTree({ models, ifcDataStore, isMultiModel, geometryR
       if (groupingMode === 'ifc-type') {
         return buildIfcTypeTree(models, ifcDataStore, expandedNodes, isMultiModel, geometricIds);
       }
+      if (groupingMode === 'material') {
+        return buildMaterialTree(models, ifcDataStore, expandedNodes, isMultiModel, geometricIds);
+      }
       return buildTreeData(models, ifcDataStore, expandedNodes, isMultiModel, unifiedStoreys);
     },
     [models, ifcDataStore, expandedNodes, isMultiModel, unifiedStoreys, groupingMode, geometricIds]
@@ -223,7 +227,7 @@ export function useHierarchyTree({ models, ifcDataStore, isMultiModel, geometryR
 
   // Get all elements for a node (handles type groups, ifc-type, unified storeys, single storeys, model contributions, and elements)
   const getNodeElements = useCallback((node: TreeNode): number[] => {
-    if (node.type === 'type-group' || node.type === 'ifc-type') {
+    if (node.type === 'type-group' || node.type === 'ifc-type' || node.type === 'material-group') {
       // GlobalIds are pre-stored on the node during tree construction — O(1)
       return node.globalIds;
     }

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

@@ -0,0 +1,283 @@
+/* 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/. */
+
+/**
+ * Material totals panel — shown when a material is selected from the
+ * "Materials" hierarchy tab. Surfaces the material's own property sets
+ * (IfcMaterialProperties) plus quantities aggregated across every element that
+ * uses the material. Volumes/areas are apportioned by each element's material
+ * share (layer thickness / constituent fraction), so a layered wall's volume is
+ * split between its concrete and insulation rather than double-counted.
+ */
+
+import { useMemo } from 'react';
+import { Layers, Calculator, Boxes, Info } from 'lucide-react';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { useIfc } from '@/hooks/useIfc';
+import {
+  buildMaterialUsageIndex,
+  getMaterialDisplay,
+  extractMaterialPropertiesForMaterialId,
+  extractQuantitiesOnDemand,
+  type IfcDataStore,
+} from '@ifc-lite/parser';
+import { QuantityType } from '@ifc-lite/data';
+import { PropertySetCard } from './PropertySetCard';
+import type { PropertySet } from './encodingUtils';
+
+interface MaterialTotals {
+  /** Number of elements using this material (across all loaded models). */
+  elementCount: number;
+  /** Elements that contributed at least one volume quantity. */
+  elementsWithVolume: number;
+  volume: number;
+  hasVolume: boolean;
+  area: number;
+  hasArea: boolean;
+  weight: number;
+  hasWeight: boolean;
+  /** Element count per IFC class, sorted desc. */
+  byClass: Array<{ ifcClass: string; count: number }>;
+}
+
+/** Pick a quantity value by candidate names (case-insensitive), else by type. */
+function pickQuantity(
+  byName: Map<string, number>,
+  candidates: string[],
+): number | undefined {
+  for (const c of candidates) {
+    const v = byName.get(c);
+    if (v !== undefined) return v;
+  }
+  return undefined;
+}
+
+/** Format an aggregated quantity with magnitude-appropriate precision. */
+function formatNumber(value: number): string {
+  if (value === 0) return '0';
+  if (Math.abs(value) >= 1000) return value.toLocaleString(undefined, { maximumFractionDigits: 0 });
+  if (Math.abs(value) >= 1) return value.toLocaleString(undefined, { maximumFractionDigits: 2 });
+  return value.toLocaleString(undefined, { maximumFractionDigits: 4 });
+}
+
+export function MaterialTotalsPanel({ materialId, modelId }: { materialId: number; modelId: string }) {
+  const { ifcDataStore, models } = useIfc();
+
+  // The store the selected material lives in, plus every loaded store (so the
+  // totals merge same-named materials across a federation).
+  const { selectedStore, allStores } = useMemo(() => {
+    const stores: IfcDataStore[] = [];
+    if (models.size > 0) {
+      for (const [, m] of models) {
+        if (m.ifcDataStore) stores.push(m.ifcDataStore as IfcDataStore);
+      }
+    } else if (ifcDataStore) {
+      stores.push(ifcDataStore as IfcDataStore);
+    }
+    const sel = modelId !== 'legacy'
+      ? (models.get(modelId)?.ifcDataStore as IfcDataStore | undefined) ?? (ifcDataStore as IfcDataStore | null) ?? undefined
+      : (ifcDataStore as IfcDataStore | null) ?? undefined;
+    return { selectedStore: sel, allStores: stores.length > 0 ? stores : (sel ? [sel] : []) };
+  }, [models, ifcDataStore, modelId]);
+
+  const display = useMemo(() => {
+    if (!selectedStore) return { name: `Material #${materialId}`, type: 'IfcMaterial' };
+    return getMaterialDisplay(selectedStore, materialId);
+  }, [selectedStore, materialId]);
+
+  // The material's own property sets (Pset_Material*).
+  const psetGroups = useMemo(() => {
+    if (!selectedStore) return [];
+    return extractMaterialPropertiesForMaterialId(selectedStore, materialId);
+  }, [selectedStore, materialId]);
+
+  // Aggregate quantities across all elements using a material of this name.
+  const totals = useMemo<MaterialTotals>(() => {
+    const result: MaterialTotals = {
+      elementCount: 0,
+      elementsWithVolume: 0,
+      volume: 0,
+      hasVolume: false,
+      area: 0,
+      hasArea: false,
+      weight: 0,
+      hasWeight: false,
+      byClass: [],
+    };
+    const classCounts = new Map<string, number>();
+    const targetName = display.name;
+
+    for (const store of allStores) {
+      const usageIndex = buildMaterialUsageIndex(store);
+      // Forward map of entity -> quantity-set ids (when on-demand parsing is
+      // active). Used to skip the per-element extractor allocation for elements
+      // that carry no quantities — the common case in large models, so a
+      // material used by thousands of elements only pays the parse cost for the
+      // subset that actually has Qto data.
+      const qMap = store.onDemandQuantityMap;
+      for (const usage of usageIndex.values()) {
+        if (usage.name !== targetName) continue;
+        for (const { entityId, weight } of usage.entries) {
+          result.elementCount += 1;
+
+          const ifcClass = store.entityIndex.byId.get(entityId)?.type || usage.ifcClass;
+          classCounts.set(ifcClass, (classCounts.get(ifcClass) ?? 0) + 1);
+
+          if (qMap && !qMap.get(entityId)?.length) continue; // no quantities — skip extraction
+          const qsets = extractQuantitiesOnDemand(store, entityId);
+          if (qsets.length === 0) continue;
+          const volByName = new Map<string, number>();
+          const areaByName = new Map<string, number>();
+          const weightByName = new Map<string, number>();
+          for (const qset of qsets) {
+            for (const q of qset.quantities) {
+              const key = q.name.toLowerCase();
+              if (q.type === QuantityType.Volume) volByName.set(key, q.value);
+              else if (q.type === QuantityType.Area) areaByName.set(key, q.value);
+              else if (q.type === QuantityType.Weight) weightByName.set(key, q.value);
+            }
+          }
+
+          const vol = pickQuantity(volByName, ['netvolume', 'grossvolume', 'volume'])
+            ?? (volByName.size > 0 ? [...volByName.values()][0] : undefined);
+          if (vol !== undefined) {
+            result.volume += vol * weight;
+            result.hasVolume = true;
+            result.elementsWithVolume += 1;
+          }
+
+          const area = pickQuantity(areaByName, ['netarea', 'grossarea', 'netsidearea', 'grosssidearea', 'netfloorarea', 'grossfloorarea', 'area']);
+          if (area !== undefined) {
+            result.area += area * weight;
+            result.hasArea = true;
+          }
+
+          const wt = pickQuantity(weightByName, ['netweight', 'grossweight', 'weight']);
+          if (wt !== undefined) {
+            result.weight += wt * weight;
+            result.hasWeight = true;
+          }
+        }
+      }
+    }
+
+    result.byClass = [...classCounts.entries()]
+      .map(([ifcClass, count]) => ({ ifcClass, count }))
+      .sort((a, b) => b.count - a.count);
+    return result;
+  }, [allStores, display.name]);
+
+  const psetCount = psetGroups.reduce((sum, g) => sum + g.psets.length, 0);
+
+  return (
+    <div className="h-full flex flex-col border-l-2 border-zinc-200 dark:border-zinc-800 bg-white dark:bg-black">
+      {/* Header */}
+      <div className="p-4 border-b-2 border-zinc-200 dark:border-zinc-800 bg-amber-50/40 dark:bg-amber-950/20 space-y-2">
+        <div className="flex items-start gap-3">
+          <div className="p-2 border-2 border-amber-200 dark:border-amber-800 bg-white dark:bg-zinc-950 shrink-0">
+            <Layers className="h-5 w-5 text-amber-600 dark:text-amber-400" />
+          </div>
+          <div className="flex-1 min-w-0 pt-0.5">
+            <h3 className="font-bold text-sm truncate uppercase tracking-tight text-zinc-900 dark:text-zinc-100 min-w-0">
+              {display.name}
+            </h3>
+            <p className="text-xs font-mono text-amber-600/80 dark:text-amber-400/80">{display.type}</p>
+          </div>
+        </div>
+      </div>
+
+      <ScrollArea className="flex-1 bg-white dark:bg-black">
+        <div className="p-3 space-y-3 w-full overflow-hidden">
+          {/* Totals */}
+          <div className="border-2 border-amber-200 dark:border-amber-800 bg-amber-50/20 dark:bg-amber-950/20">
+            <div className="flex items-center gap-2 px-2.5 py-2 border-b-2 border-amber-200 dark:border-amber-800">
+              <Calculator className="h-3.5 w-3.5 text-amber-600 dark:text-amber-400 shrink-0" />
+              <span className="font-bold text-xs text-amber-700 dark:text-amber-400 uppercase tracking-wide">Totals</span>
+            </div>
+            <div className="divide-y divide-amber-100 dark:divide-amber-900/30">
+              <TotalRow label="Elements" value={totals.elementCount.toLocaleString()} />
+              {totals.hasVolume && (
+                <TotalRow label="Volume" value={`${formatNumber(totals.volume)} m³`} />
+              )}
+              {totals.hasArea && (
+                <TotalRow label="Area" value={`${formatNumber(totals.area)} m²`} />
+              )}
+              {totals.hasWeight && (
+                <TotalRow label="Weight" value={`${formatNumber(totals.weight)} kg`} />
+              )}
+            </div>
+            {totals.elementCount > 0 && !totals.hasVolume && (
+              <div className="flex items-start gap-1.5 px-2.5 py-2 text-[10px] text-zinc-500 dark:text-zinc-400 border-t border-amber-100 dark:border-amber-900/30">
+                <Info className="h-3 w-3 shrink-0 mt-px" />
+                <span>No volume quantities (Qto_*) found on these elements.</span>
+              </div>
+            )}
+            {totals.hasVolume && totals.elementsWithVolume < totals.elementCount && (
+              <div className="flex items-start gap-1.5 px-2.5 py-2 text-[10px] text-zinc-500 dark:text-zinc-400 border-t border-amber-100 dark:border-amber-900/30">
+                <Info className="h-3 w-3 shrink-0 mt-px" />
+                <span>
+                  Volume from {totals.elementsWithVolume.toLocaleString()} of {totals.elementCount.toLocaleString()} elements with reported quantities;
+                  multi-material elements are split by layer thickness / constituent fraction.
+                </span>
+              </div>
+            )}
+          </div>
+
+          {/* Breakdown by class */}
+          {totals.byClass.length > 0 && (
+            <div className="border border-zinc-200 dark:border-zinc-800">
+              <div className="flex items-center gap-2 px-2.5 py-2 border-b border-zinc-200 dark:border-zinc-800">
+                <Boxes className="h-3.5 w-3.5 text-zinc-500 shrink-0" />
+                <span className="font-bold text-xs text-zinc-600 dark:text-zinc-300 uppercase tracking-wide">By Class</span>
+              </div>
+              <div className="divide-y divide-zinc-100 dark:divide-zinc-900">
+                {totals.byClass.map((c) => (
+                  <div key={c.ifcClass} className="flex items-center justify-between px-2.5 py-1.5 text-xs">
+                    <span className="font-mono text-zinc-600 dark:text-zinc-400 truncate">{c.ifcClass}</span>
+                    <span className="font-mono text-zinc-900 dark:text-zinc-100">{c.count.toLocaleString()}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Material property sets */}
+          {psetCount > 0 && (
+            <div className="space-y-3">
+              <div className="flex items-center gap-2 px-1 pt-1 pb-0.5 text-[11px] text-amber-600/70 dark:text-amber-400/60 uppercase tracking-wider font-semibold">
+                <Layers className="h-3 w-3 shrink-0" />
+                <span className="truncate">Material Properties</span>
+              </div>
+              {psetGroups.map((group) =>
+                group.psets.map((pset) => {
+                  const psetView: PropertySet = {
+                    name: pset.name,
+                    properties: pset.properties.map((p) => ({ name: p.name, value: p.value, isMutated: false })),
+                  };
+                  return <PropertySetCard key={`${group.materialId}-${pset.name}`} pset={psetView} />;
+                }),
+              )}
+            </div>
+          )}
+
+          {psetCount === 0 && totals.elementCount === 0 && (
+            <p className="text-sm text-zinc-500 dark:text-zinc-500 text-center py-8 font-mono">
+              No data for this material
+            </p>
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}
+
+/** A single label/value row in the material totals card. */
+function TotalRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-center justify-between px-2.5 py-2 text-xs">
+      <span className="text-zinc-500 dark:text-zinc-400 font-medium">{label}</span>
+      <span className="font-mono font-semibold text-amber-700 dark:text-amber-300 tabular-nums">{value}</span>
+    </div>
+  );
+}

package/src/components/viewer/useGeometryStreaming.ts

@@ -21,7 +21,6 @@
 import { useEffect, useRef, type MutableRefObject } from 'react';
 import type { Renderer } from '@ifc-lite/renderer';
 import type { MeshData, CoordinateInfo } from '@ifc-lite/geometry';
-import { logToDesktopTerminal } from '@/services/desktop-logger';
 import { toast } from '../ui/toast.js';
 
 // Session-scoped flag so the linear-infrastructure hint fires at most once
@@ -87,7 +86,6 @@ const MAX_VALID_COORD = 10000;
 
 function traceGeometrySync(message: string): void {
   console.log(`[GeomSync] ${message}`);
-  void logToDesktopTerminal('info', `[GeomSync] ${message}`);
 }
 
 export function useGeometryStreaming(params: UseGeometryStreamingParams): void {