@ifc-lite/viewer 1.27.0 → 1.28.0

package/src/components/viewer/PropertiesPanel.tsx

@@ -36,7 +36,7 @@ import { getNativeEntityDetails } from '@/services/desktop-native-metadata';
 import { configureMutationView } from '@/utils/configureMutationView';
 import { IfcQuery } from '@ifc-lite/query';
 import { MutablePropertyView } from '@ifc-lite/mutations';
-import { extractClassificationsOnDemand, extractMaterialsOnDemand, extractTypePropertiesOnDemand, extractTypeEntityOwnProperties, extractDocumentsOnDemand, extractRelationshipsOnDemand, extractGeoreferencingOnDemand, extractLengthUnitScale, getAttributeNames, type IfcDataStore } from '@ifc-lite/parser';
+import { extractClassificationsOnDemand, extractMaterialsOnDemand, extractMaterialPropertiesOnDemand, extractTypePropertiesOnDemand, extractTypeEntityOwnProperties, extractDocumentsOnDemand, extractRelationshipsOnDemand, extractGeoreferencingOnDemand, extractLengthUnitScale, getAttributeNames, type IfcDataStore, type MaterialPsetGroup } from '@ifc-lite/parser';
 import type { NewEntity } from '@ifc-lite/mutations';
 import { EntityFlags, RelationshipType, isSpatialStructureTypeName, isStoreyLikeSpatialTypeName } from '@ifc-lite/data';
 import type { EntityRef, FederatedModel } from '@/store/types';
@@ -47,6 +47,7 @@ import { QuantitySetCard } from './properties/QuantitySetCard';
 import { ModelMetadataPanel } from './properties/ModelMetadataPanel';
 import { ClassificationCard } from './properties/ClassificationCard';
 import { MaterialCard } from './properties/MaterialCard';
+import { MaterialTotalsPanel } from './properties/MaterialTotalsPanel';
 import { ScheduleCard } from './properties/ScheduleCard';
 import { TaskEditCard } from './properties/TaskEditCard';
 import { DocumentCard } from './properties/DocumentCard';
@@ -56,6 +57,17 @@ import { BsddCard } from './properties/BsddCard';
 import { GeoreferencingPanel } from './properties/GeoreferencingPanel';
 import { RawStepCard } from './properties/RawStepCard';
 
+/** IFC material *definition* classes selectable from the Materials tab. */
+const MATERIAL_DEF_TYPES = new Set([
+  'IFCMATERIAL',
+  'IFCMATERIALLAYERSET',
+  'IFCMATERIALLAYERSETUSAGE',
+  'IFCMATERIALPROFILESET',
+  'IFCMATERIALPROFILESETUSAGE',
+  'IFCMATERIALCONSTITUENTSET',
+  'IFCMATERIALLIST',
+]);
+
 type DisplayProperty = { name: string; value: unknown; isMutated: boolean };
 type DisplayPropertySet = {
   name: string;
@@ -450,6 +462,16 @@ export function PropertiesPanel() {
     return typeName.endsWith('Type');
   }, [selectedEntity, model, ifcDataStore]);
 
+  // Detect a material definition selected from the "Materials" hierarchy tab.
+  // Materials aren't products, so the EntityTable's getTypeName doesn't cover
+  // them — read the raw class from the entity index instead.
+  const selectedMaterialId = useMemo(() => {
+    if (!selectedEntity) return null;
+    const dataStore = model?.ifcDataStore ?? ifcDataStore;
+    const rawType = (dataStore as IfcDataStore | null)?.entityIndex?.byId?.get(selectedEntity.expressId)?.type;
+    return rawType && MATERIAL_DEF_TYPES.has(rawType.toUpperCase()) ? selectedEntity.expressId : null;
+  }, [selectedEntity, model, ifcDataStore]);
+
   // Unified property/quantity access - EntityNode handles on-demand extraction automatically
   // These hooks must be called before any early return to maintain hook order
   // Use MutablePropertyView as primary source when available (it handles base + mutations)
@@ -627,6 +649,17 @@ export function PropertiesPanel() {
     return extractMaterialsOnDemand(dataStore as IfcDataStore, lookupExpressId);
   }, [selectedEntity, lookupExpressId, model, ifcDataStore]);
 
+  // Property sets attached to the selected entity's material(s) via
+  // IfcMaterialProperties (e.g. Pset_MaterialConcrete). These live on the
+  // IfcMaterial — not on the object — so they never surface through the
+  // occurrence/type pset paths; resolve them through the material association.
+  const materialProperties: MaterialPsetGroup[] = useMemo(() => {
+    if (!selectedEntity || lookupExpressId === null) return [];
+    const dataStore = model?.ifcDataStore ?? ifcDataStore;
+    if (!dataStore) return [];
+    return extractMaterialPropertiesOnDemand(dataStore as IfcDataStore, lookupExpressId);
+  }, [selectedEntity, lookupExpressId, model, ifcDataStore]);
+
   // Extract documents for the selected entity from the IFC data store
   const documents = useMemo(() => {
     if (!selectedEntity || lookupExpressId === null) return [];
@@ -1002,6 +1035,7 @@ export function PropertiesPanel() {
   const renderedAttributes = isNativeLazySelection ? [] : attributes;
   const renderedClassifications = isNativeLazySelection ? [] : classifications;
   const renderedMaterialInfo = isNativeLazySelection ? null : materialInfo;
+  const renderedMaterialProperties = isNativeLazySelection ? [] : materialProperties;
   const renderedDocuments = isNativeLazySelection ? [] : documents;
   const renderedEntityRelationships = isNativeLazySelection ? null : entityRelationships;
   const renderedGeoref = isNativeLazySelection ? null : georef;
@@ -1053,6 +1087,12 @@ export function PropertiesPanel() {
     }
   }
 
+  // Material selected from the "Materials" hierarchy tab — show the material's
+  // own property sets plus quantities aggregated across all using elements.
+  if (selectedMaterialId !== null && selectedEntity) {
+    return <MaterialTotalsPanel materialId={selectedMaterialId} modelId={selectedEntity.modelId} />;
+  }
+
   // Multi-entity selection (unified storeys) - render combined view
   if (selectedEntities.length > 1) {
     return (
@@ -1481,6 +1521,7 @@ export function PropertiesPanel() {
             {renderedMergedProperties.length === 0
               && renderedClassifications.length === 0
               && !renderedMaterialInfo
+              && renderedMaterialProperties.length === 0
               && renderedDocuments.length === 0
               && !renderedEntityRelationships
               && !hasScheduleForSelection ? (
@@ -1560,10 +1601,38 @@ export function PropertiesPanel() {
                   </>
                 )}
 
+                {/* Material Property Sets (Pset_Material* attached to the
+                    IfcMaterial via IfcMaterialProperties). Grouped per material,
+                    mirroring the Type Properties block. */}
+                {renderedMaterialProperties.length > 0 && (
+                  <>
+                    {(renderedMergedProperties.length > 0 || renderedClassifications.length > 0 || renderedMaterialInfo) && (
+                      <div className="border-t border-amber-200 dark:border-amber-800/50 pt-2 mt-2" />
+                    )}
+                    {renderedMaterialProperties.map((group) => (
+                      <div key={`matpset-${group.materialId}`} className="space-y-3">
+                        <div className="flex items-center gap-2 px-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 ({group.materialName})</span>
+                        </div>
+                        {group.psets.map((pset) => (
+                          <PropertySetCard
+                            key={`matpset-${group.materialId}-${pset.name}`}
+                            pset={{
+                              name: pset.name,
+                              properties: pset.properties.map((p) => ({ name: p.name, value: p.value, isMutated: false })),
+                            }}
+                          />
+                        ))}
+                      </div>
+                    ))}
+                  </>
+                )}
+
                 {/* Documents */}
                 {renderedDocuments.length > 0 && (
                   <>
-                    {(renderedMergedProperties.length > 0 || renderedClassifications.length > 0 || renderedMaterialInfo) && (
+                    {(renderedMergedProperties.length > 0 || renderedClassifications.length > 0 || renderedMaterialInfo || renderedMaterialProperties.length > 0) && (
                       <div className="border-t border-zinc-200 dark:border-zinc-800 pt-2 mt-2" />
                     )}
                     {renderedDocuments.map((doc, i) => (

package/src/components/viewer/ViewerLayout.tsx

@@ -29,6 +29,7 @@ import { BCFPanel } from './BCFPanel';
 import { IDSPanel } from './IDSPanel';
 import { LensPanel } from './LensPanel';
 import { ClashPanel } from './ClashPanel';
+import { ComparePanel } from './ComparePanel';
 import { ListPanel } from './lists/ListPanel';
 import { ScriptPanel } from './ScriptPanel';
 import { GanttPanel } from './schedule/GanttPanel';
@@ -135,6 +136,8 @@ export function ViewerLayout() {
   const setLensPanelVisible = useViewerStore((s) => s.setLensPanelVisible);
   const clashPanelVisible = useViewerStore((s) => s.clashPanelVisible);
   const setClashPanelVisible = useViewerStore((s) => s.setClashPanelVisible);
+  const comparePanelVisible = useViewerStore((s) => s.comparePanelVisible);
+  const setComparePanelVisible = useViewerStore((s) => s.setComparePanelVisible);
   const scriptPanelVisible = useViewerStore((s) => s.scriptPanelVisible);
   const setScriptPanelVisible = useViewerStore((s) => s.setScriptPanelVisible);
   const ganttPanelVisible = useViewerStore((s) => s.ganttPanelVisible);
@@ -347,6 +350,8 @@ export function ViewerLayout() {
                       <LensPanel onClose={() => setLensPanelVisible(false)} />
                     ) : clashPanelVisible ? (
                       <ClashPanel onClose={() => setClashPanelVisible(false)} />
+                    ) : comparePanelVisible ? (
+                      <ComparePanel onClose={() => setComparePanelVisible(false)} />
                     ) : idsPanelVisible ? (
                       <IDSPanel onClose={() => setIdsPanelVisible(false)} />
                     ) : bcfPanelVisible ? (

package/src/components/viewer/Viewport.tsx

@@ -808,6 +808,9 @@ export function Viewport({
       }
       setIsInitialized(false);
       rendererRef.current = null;
+      // Free all WebGPU resources held by this renderer instance.
+      // destroy() is idempotent, so this is safe even if init() rejected.
+      renderer.destroy();
       // Clear BCF global refs to prevent memory leaks
       clearGlobalRefs();
     };

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/hooks/federationLoadGate.test.ts

@@ -59,11 +59,21 @@ describe('federationLoadGate', () => {
     const bPromise = acquireFederationLoadSlot(50).then((id) => { order.push('b'); return id; });
 
     await new Promise((r) => setTimeout(r, 10));
+    // Releasing the blocker frees the budget for the head of the FIFO queue.
+    // A 2048 MB load costs more than the whole budget, so the first-queued load
+    // is admitted alone (single-file exception) and the 50 MB load stays queued
+    // until it releases. Awaiting them together would deadlock — and asserting
+    // that B does NOT wake alongside A is exactly what proves the gate respects
+    // the budget during the drain (the regression this guards against).
     releaseFederationLoadSlot(blocker);
 
-    const [a, b] = await Promise.all([aPromise, bPromise]);
-    assert.strictEqual(order[0], 'a');
+    const a = await aPromise;
+    assert.deepStrictEqual(order, ['a']);
+    assert.strictEqual(__getFederationLoadGateStats().queuedCount, 1);
+
     releaseFederationLoadSlot(a);
+    const b = await bPromise;
+    assert.deepStrictEqual(order, ['a', 'b']);
     releaseFederationLoadSlot(b);
   });