@ifc-lite/viewer 1.6.0 → 1.7.0

package/src/components/viewer/lists/ListResultsTable.tsx

@@ -0,0 +1,193 @@
+/* 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/. */
+
+/**
+ * ListResultsTable - Virtualized table displaying list execution results
+ *
+ * PERF: Uses @tanstack/react-virtual for efficient rendering of large result sets.
+ * Only renders visible rows, supports 100K+ rows smoothly.
+ * Clicking a row selects the entity in the 3D viewer.
+ */
+
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { ArrowUp, ArrowDown, Search } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { useViewerStore } from '@/store';
+import type { ListResult, ListRow, CellValue } from '@ifc-lite/lists';
+import { cn } from '@/lib/utils';
+
+interface ListResultsTableProps {
+  result: ListResult;
+}
+
+export function ListResultsTable({ result }: ListResultsTableProps) {
+  const parentRef = useRef<HTMLDivElement>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [sortCol, setSortCol] = useState<number | null>(null);
+  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');
+
+  const setSelectedEntityId = useViewerStore((s) => s.setSelectedEntityId);
+  const setSelectedEntity = useViewerStore((s) => s.setSelectedEntity);
+  const selectedEntityId = useViewerStore((s) => s.selectedEntityId);
+
+  // Filter rows by search query
+  const filteredRows = useMemo(() => {
+    if (!searchQuery) return result.rows;
+    const q = searchQuery.toLowerCase();
+    return result.rows.filter(row =>
+      row.values.some(v => v !== null && String(v).toLowerCase().includes(q))
+    );
+  }, [result.rows, searchQuery]);
+
+  // Sort rows
+  const sortedRows = useMemo(() => {
+    if (sortCol === null) return filteredRows;
+    const sorted = [...filteredRows];
+    sorted.sort((a, b) => {
+      const va = a.values[sortCol];
+      const vb = b.values[sortCol];
+      return compareCells(va, vb) * (sortDir === 'asc' ? 1 : -1);
+    });
+    return sorted;
+  }, [filteredRows, sortCol, sortDir]);
+
+  const handleHeaderClick = useCallback((colIndex: number) => {
+    if (sortCol === colIndex) {
+      setSortDir(prev => prev === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortCol(colIndex);
+      setSortDir('asc');
+    }
+  }, [sortCol]);
+
+  const handleRowClick = useCallback((row: ListRow) => {
+    setSelectedEntity({ modelId: row.modelId, expressId: row.entityId });
+    // For single-model, selectedEntityId is the expressId
+    // For multi-model, we'd need the global ID, but we set expressId for now
+    setSelectedEntityId(row.entityId);
+  }, [setSelectedEntity, setSelectedEntityId]);
+
+  // Column widths
+  const columnWidths = useMemo(() => {
+    return result.columns.map(col => {
+      const label = col.label ?? col.propertyName;
+      // Estimate width: min 80px, max 250px, based on header + content
+      return Math.max(80, Math.min(250, label.length * 8 + 40));
+    });
+  }, [result.columns]);
+
+  const totalWidth = useMemo(() => columnWidths.reduce((a, b) => a + b, 0), [columnWidths]);
+
+  const virtualizer = useVirtualizer({
+    count: sortedRows.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 28,
+    overscan: 20,
+  });
+
+  return (
+    <div className="flex-1 flex flex-col min-h-0">
+      {/* Search bar */}
+      <div className="flex items-center gap-2 px-3 py-1.5 border-b">
+        <Search className="h-3.5 w-3.5 text-muted-foreground" />
+        <Input
+          placeholder="Filter results..."
+          value={searchQuery}
+          onChange={e => setSearchQuery(e.target.value)}
+          className="h-7 text-xs border-0 shadow-none focus-visible:ring-0 px-0"
+        />
+        <span className="text-xs text-muted-foreground whitespace-nowrap">
+          {sortedRows.length}{searchQuery ? ` / ${result.rows.length}` : ''} rows
+        </span>
+      </div>
+
+      {/* Table */}
+      <div ref={parentRef} className="flex-1 overflow-auto min-h-0">
+        <div style={{ minWidth: totalWidth }}>
+          {/* Header */}
+          <div className="flex sticky top-0 bg-muted/80 backdrop-blur-sm border-b z-10">
+            {result.columns.map((col, colIdx) => (
+              <button
+                key={col.id}
+                className="flex items-center gap-1 px-2 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground border-r border-border/50 shrink-0"
+                style={{ width: columnWidths[colIdx] }}
+                onClick={() => handleHeaderClick(colIdx)}
+              >
+                <span className="truncate">
+                  {col.label ?? col.propertyName}
+                </span>
+                {sortCol === colIdx && (
+                  sortDir === 'asc'
+                    ? <ArrowUp className="h-3 w-3 shrink-0" />
+                    : <ArrowDown className="h-3 w-3 shrink-0" />
+                )}
+              </button>
+            ))}
+          </div>
+
+          {/* Virtualized rows */}
+          <div
+            style={{
+              height: `${virtualizer.getTotalSize()}px`,
+              width: '100%',
+              position: 'relative',
+            }}
+          >
+            {virtualizer.getVirtualItems().map(virtualRow => {
+              const row = sortedRows[virtualRow.index];
+              const isSelected = row.entityId === selectedEntityId;
+
+              return (
+                <div
+                  key={virtualRow.key}
+                  data-index={virtualRow.index}
+                  ref={virtualizer.measureElement}
+                  className={cn(
+                    'flex absolute top-0 left-0 w-full border-b border-border/30 cursor-pointer hover:bg-muted/40',
+                    isSelected && 'bg-primary/10'
+                  )}
+                  style={{
+                    transform: `translateY(${virtualRow.start}px)`,
+                  }}
+                  onClick={() => handleRowClick(row)}
+                >
+                  {row.values.map((value, colIdx) => (
+                    <div
+                      key={colIdx}
+                      className="px-2 py-1 text-xs truncate border-r border-border/20 shrink-0"
+                      style={{ width: columnWidths[colIdx] }}
+                      title={value !== null ? String(value) : ''}
+                    >
+                      {formatCellValue(value)}
+                    </div>
+                  ))}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function formatCellValue(value: CellValue): string {
+  if (value === null || value === undefined) return '';
+  if (typeof value === 'boolean') return value ? 'Yes' : 'No';
+  if (typeof value === 'number') {
+    // Format numbers: integers as-is, decimals with up to 4 decimal places
+    if (Number.isInteger(value)) return String(value);
+    return value.toFixed(4).replace(/\.?0+$/, '');
+  }
+  return String(value);
+}
+
+function compareCells(a: CellValue, b: CellValue): number {
+  if (a === null && b === null) return 0;
+  if (a === null) return -1;
+  if (b === null) return 1;
+  if (typeof a === 'number' && typeof b === 'number') return a - b;
+  return String(a).localeCompare(String(b));
+}

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

@@ -0,0 +1,70 @@
+/* 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/. */
+
+/**
+ * Classification display component for IFC element classifications.
+ */
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { Tag } from 'lucide-react';
+import type { ClassificationInfo } from '@ifc-lite/parser';
+
+export function ClassificationCard({ classification }: { classification: ClassificationInfo }) {
+  const displayName = classification.identification || classification.name || 'Unknown';
+  const systemName = classification.system;
+
+  return (
+    <Collapsible defaultOpen className="border-2 border-emerald-200 dark:border-emerald-800 bg-emerald-50/20 dark:bg-emerald-950/20 w-full max-w-full overflow-hidden">
+      <CollapsibleTrigger className="flex items-center gap-2 w-full p-2.5 hover:bg-emerald-50 dark:hover:bg-emerald-900/30 text-left transition-colors overflow-hidden">
+        <Tag className="h-3.5 w-3.5 text-emerald-600 dark:text-emerald-400 shrink-0" />
+        <span className="font-bold text-xs text-emerald-700 dark:text-emerald-400 truncate flex-1 min-w-0">
+          {systemName || 'Classification'}
+        </span>
+        <span className="text-[10px] font-mono bg-emerald-100 dark:bg-emerald-900/50 px-1.5 py-0.5 border border-emerald-200 dark:border-emerald-800 text-emerald-700 dark:text-emerald-300 shrink-0">
+          {displayName}
+        </span>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="border-t-2 border-emerald-200 dark:border-emerald-800 divide-y divide-emerald-100 dark:divide-emerald-900/30">
+          {classification.identification && (
+            <div className="flex flex-col gap-0.5 px-3 py-2 text-xs hover:bg-emerald-50/50 dark:hover:bg-emerald-900/20">
+              <span className="text-zinc-500 dark:text-zinc-400 font-medium">Identification</span>
+              <span className="font-mono text-emerald-700 dark:text-emerald-400 select-all break-words">{classification.identification}</span>
+            </div>
+          )}
+          {classification.name && (
+            <div className="flex flex-col gap-0.5 px-3 py-2 text-xs hover:bg-emerald-50/50 dark:hover:bg-emerald-900/20">
+              <span className="text-zinc-500 dark:text-zinc-400 font-medium">Name</span>
+              <span className="font-mono text-emerald-700 dark:text-emerald-400 select-all break-words">{classification.name}</span>
+            </div>
+          )}
+          {classification.system && (
+            <div className="flex flex-col gap-0.5 px-3 py-2 text-xs hover:bg-emerald-50/50 dark:hover:bg-emerald-900/20">
+              <span className="text-zinc-500 dark:text-zinc-400 font-medium">System</span>
+              <span className="font-mono text-emerald-700 dark:text-emerald-400 select-all break-words">{classification.system}</span>
+            </div>
+          )}
+          {classification.location && (
+            <div className="flex flex-col gap-0.5 px-3 py-2 text-xs hover:bg-emerald-50/50 dark:hover:bg-emerald-900/20">
+              <span className="text-zinc-500 dark:text-zinc-400 font-medium">Location</span>
+              <span className="font-mono text-emerald-700 dark:text-emerald-400 select-all break-words">{classification.location}</span>
+            </div>
+          )}
+          {classification.path && classification.path.length > 0 && (
+            <div className="flex flex-col gap-0.5 px-3 py-2 text-xs hover:bg-emerald-50/50 dark:hover:bg-emerald-900/20">
+              <span className="text-zinc-500 dark:text-zinc-400 font-medium">Path</span>
+              <span className="font-mono text-emerald-700 dark:text-emerald-400 select-all break-words">{classification.path.join(' > ')}</span>
+            </div>
+          )}
+          {classification.description && (
+            <div className="flex flex-col gap-0.5 px-3 py-2 text-xs hover:bg-emerald-50/50 dark:hover:bg-emerald-900/20">
+              <span className="text-zinc-500 dark:text-zinc-400 font-medium">Description</span>
+              <span className="font-mono text-emerald-700 dark:text-emerald-400 select-all break-words">{classification.description}</span>
+            </div>
+          )}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

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

@@ -0,0 +1,49 @@
+/* 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/. */
+
+/**
+ * Coordinate display components for entity position information.
+ */
+
+import { Copy, Check } from 'lucide-react';
+
+/** Inline coordinate value with dim axis label */
+export function CoordVal({ axis, value }: { axis: string; value: number }) {
+  return (
+    <span className="whitespace-nowrap"><span className="opacity-50">{axis}</span>{'\u2009'}{value.toFixed(3)}</span>
+  );
+}
+
+/** Copyable coordinate row: label + values with copy button hugging the values */
+export function CoordRow({ label, values, primary, copyLabel, coordCopied, onCopy }: {
+  label: string;
+  values: { axis: string; value: number }[];
+  primary?: boolean;
+  copyLabel: string;
+  coordCopied: string | null;
+  onCopy: (label: string, text: string) => void;
+}) {
+  const isCopied = coordCopied === copyLabel;
+  const copyText = values.map(v => v.value.toFixed(3)).join(', ');
+  return (
+    <div className="flex items-start gap-1.5 group min-w-0">
+      {label && (
+        <span className={`text-[9px] font-medium uppercase tracking-wider w-[34px] shrink-0 pt-px ${primary ? 'text-muted-foreground' : 'text-muted-foreground/50'}`}>
+          {label}
+        </span>
+      )}
+      <span className={`font-mono text-[10px] min-w-0 tabular-nums leading-relaxed ${primary ? 'text-foreground' : 'text-muted-foreground/60'}`}>
+        {values.map((v, i) => (
+          <span key={v.axis}>{i > 0 && <>{' '}</>}<CoordVal axis={v.axis} value={v.value} /></span>
+        ))}
+      </span>
+      <button
+        className={`shrink-0 p-0.5 rounded mt-px transition-colors ${isCopied ? 'text-emerald-500' : 'text-muted-foreground/30 opacity-0 group-hover:opacity-100 hover:text-muted-foreground'}`}
+        onClick={(e) => { e.stopPropagation(); onCopy(copyLabel, copyText); }}
+      >
+        {isCopied ? <Check className="h-2.5 w-2.5" /> : <Copy className="h-2.5 w-2.5" />}
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,89 @@
+/* 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/. */
+
+/**
+ * Document display component for IFC document references.
+ */
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { FileText } from 'lucide-react';
+import type { DocumentInfo } from '@ifc-lite/parser';
+
+export function DocumentCard({ document }: { document: DocumentInfo }) {
+  const displayName = document.name || document.identification || 'Document';
+  const isUrl = document.location?.startsWith('http://') || document.location?.startsWith('https://');
+
+  return (
+    <Collapsible defaultOpen className="border-2 border-sky-200 dark:border-sky-800 bg-sky-50/20 dark:bg-sky-950/20 w-full max-w-full overflow-hidden">
+      <CollapsibleTrigger className="flex items-center gap-2 w-full p-2.5 hover:bg-sky-50 dark:hover:bg-sky-900/30 text-left transition-colors overflow-hidden">
+        <FileText className="h-3.5 w-3.5 text-sky-600 dark:text-sky-400 shrink-0" />
+        <span className="font-bold text-xs text-sky-700 dark:text-sky-400 truncate flex-1 min-w-0">
+          {displayName}
+        </span>
+        {document.revision && (
+          <span className="text-[10px] font-mono bg-sky-100 dark:bg-sky-900/50 px-1.5 py-0.5 border border-sky-200 dark:border-sky-800 text-sky-700 dark:text-sky-300 shrink-0">
+            {document.revision}
+          </span>
+        )}
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="border-t-2 border-sky-200 dark:border-sky-800 divide-y divide-sky-100 dark:divide-sky-900/30">
+          {document.identification && (
+            <div className="flex flex-col gap-0.5 px-3 py-2 text-xs hover:bg-sky-50/50 dark:hover:bg-sky-900/20">
+              <span className="text-zinc-500 dark:text-zinc-400 font-medium">Identification</span>
+              <span className="font-mono text-sky-700 dark:text-sky-400 select-all break-words">{document.identification}</span>
+            </div>
+          )}
+          {document.name && (
+            <div className="flex flex-col gap-0.5 px-3 py-2 text-xs hover:bg-sky-50/50 dark:hover:bg-sky-900/20">
+              <span className="text-zinc-500 dark:text-zinc-400 font-medium">Name</span>
+              <span className="font-mono text-sky-700 dark:text-sky-400 select-all break-words">{document.name}</span>
+            </div>
+          )}
+          {document.description && (
+            <div className="flex flex-col gap-0.5 px-3 py-2 text-xs hover:bg-sky-50/50 dark:hover:bg-sky-900/20">
+              <span className="text-zinc-500 dark:text-zinc-400 font-medium">Description</span>
+              <span className="font-mono text-sky-700 dark:text-sky-400 select-all break-words">{document.description}</span>
+            </div>
+          )}
+          {document.location && (
+            <div className="flex flex-col gap-0.5 px-3 py-2 text-xs hover:bg-sky-50/50 dark:hover:bg-sky-900/20">
+              <span className="text-zinc-500 dark:text-zinc-400 font-medium">Location</span>
+              {isUrl ? (
+                <a
+                  href={document.location}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="font-mono text-sky-600 dark:text-sky-400 underline hover:text-sky-800 dark:hover:text-sky-300 break-all"
+                >
+                  {document.location}
+                </a>
+              ) : (
+                <span className="font-mono text-sky-700 dark:text-sky-400 select-all break-words">{document.location}</span>
+              )}
+            </div>
+          )}
+          {document.purpose && (
+            <div className="flex flex-col gap-0.5 px-3 py-2 text-xs hover:bg-sky-50/50 dark:hover:bg-sky-900/20">
+              <span className="text-zinc-500 dark:text-zinc-400 font-medium">Purpose</span>
+              <span className="font-mono text-sky-700 dark:text-sky-400 select-all break-words">{document.purpose}</span>
+            </div>
+          )}
+          {document.intendedUse && (
+            <div className="flex flex-col gap-0.5 px-3 py-2 text-xs hover:bg-sky-50/50 dark:hover:bg-sky-900/20">
+              <span className="text-zinc-500 dark:text-zinc-400 font-medium">Intended Use</span>
+              <span className="font-mono text-sky-700 dark:text-sky-400 select-all break-words">{document.intendedUse}</span>
+            </div>
+          )}
+          {document.revision && (
+            <div className="flex flex-col gap-0.5 px-3 py-2 text-xs hover:bg-sky-50/50 dark:hover:bg-sky-900/20">
+              <span className="text-zinc-500 dark:text-zinc-400 font-medium">Revision</span>
+              <span className="font-mono text-sky-700 dark:text-sky-400 select-all break-words">{document.revision}</span>
+            </div>
+          )}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

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

@@ -0,0 +1,201 @@
+/* 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 display component for IFC element materials.
+ * Handles all IFC material types: direct, layer sets, profile sets,
+ * constituent sets, and material lists.
+ */
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { Layers } from 'lucide-react';
+import type { MaterialInfo } from '@ifc-lite/parser';
+
+const TYPE_LABELS: Record<string, string> = {
+  Material: 'Material',
+  MaterialLayerSet: 'Layer Set',
+  MaterialProfileSet: 'Profile Set',
+  MaterialConstituentSet: 'Constituent Set',
+  MaterialList: 'Material List',
+};
+
+export function MaterialCard({ material }: { material: MaterialInfo }) {
+  const typeLabel = TYPE_LABELS[material.type] || material.type;
+  const displayName = material.name || typeLabel;
+
+  return (
+    <Collapsible defaultOpen className="border-2 border-amber-200 dark:border-amber-800 bg-amber-50/20 dark:bg-amber-950/20 w-full max-w-full overflow-hidden">
+      <CollapsibleTrigger className="flex items-center gap-2 w-full p-2.5 hover:bg-amber-50 dark:hover:bg-amber-900/30 text-left transition-colors overflow-hidden">
+        <Layers 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 truncate flex-1 min-w-0">
+          {displayName}
+        </span>
+        <span className="text-[10px] font-mono bg-amber-100 dark:bg-amber-900/50 px-1.5 py-0.5 border border-amber-200 dark:border-amber-800 text-amber-700 dark:text-amber-300 shrink-0">
+          {typeLabel}
+        </span>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="border-t-2 border-amber-200 dark:border-amber-800 divide-y divide-amber-100 dark:divide-amber-900/30">
+          {/* Direct material */}
+          {material.type === 'Material' && (
+            <>
+              {material.name && (
+                <MaterialRow label="Name" value={material.name} />
+              )}
+              {material.description && (
+                <MaterialRow label="Description" value={material.description} />
+              )}
+            </>
+          )}
+
+          {/* Layer Set */}
+          {material.type === 'MaterialLayerSet' && material.layers && (
+            <>
+              {material.name && <MaterialRow label="Set Name" value={material.name} />}
+              {material.layers.map((layer, i) => (
+                <div key={i} className="px-3 py-2 text-xs hover:bg-amber-50/50 dark:hover:bg-amber-900/20">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="font-medium text-amber-700 dark:text-amber-400">
+                      Layer {i + 1}
+                    </span>
+                    {layer.thickness !== undefined && (
+                      <span className="text-[10px] font-mono bg-amber-100 dark:bg-amber-900/50 px-1 py-0.5 border border-amber-200 dark:border-amber-800 text-amber-600 dark:text-amber-300">
+                        {formatThickness(layer.thickness)}
+                      </span>
+                    )}
+                  </div>
+                  <div className="grid grid-cols-[minmax(60px,auto)_1fr] gap-x-2 gap-y-0.5 ml-2">
+                    {layer.materialName && (
+                      <>
+                        <span className="text-zinc-400">Material</span>
+                        <span className="font-mono text-amber-700 dark:text-amber-400 break-words">{layer.materialName}</span>
+                      </>
+                    )}
+                    {layer.name && (
+                      <>
+                        <span className="text-zinc-400">Name</span>
+                        <span className="font-mono text-amber-700 dark:text-amber-400 break-words">{layer.name}</span>
+                      </>
+                    )}
+                    {layer.category && (
+                      <>
+                        <span className="text-zinc-400">Category</span>
+                        <span className="font-mono text-amber-700 dark:text-amber-400 break-words">{layer.category}</span>
+                      </>
+                    )}
+                    {layer.isVentilated && (
+                      <>
+                        <span className="text-zinc-400">Ventilated</span>
+                        <span className="font-mono text-amber-700 dark:text-amber-400">Yes</span>
+                      </>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </>
+          )}
+
+          {/* Profile Set */}
+          {material.type === 'MaterialProfileSet' && material.profiles && (
+            <>
+              {material.name && <MaterialRow label="Set Name" value={material.name} />}
+              {material.profiles.map((profile, i) => (
+                <div key={i} className="px-3 py-2 text-xs hover:bg-amber-50/50 dark:hover:bg-amber-900/20">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="font-medium text-amber-700 dark:text-amber-400">
+                      Profile {i + 1}
+                    </span>
+                  </div>
+                  <div className="grid grid-cols-[minmax(60px,auto)_1fr] gap-x-2 gap-y-0.5 ml-2">
+                    {profile.materialName && (
+                      <>
+                        <span className="text-zinc-400">Material</span>
+                        <span className="font-mono text-amber-700 dark:text-amber-400 break-words">{profile.materialName}</span>
+                      </>
+                    )}
+                    {profile.name && (
+                      <>
+                        <span className="text-zinc-400">Name</span>
+                        <span className="font-mono text-amber-700 dark:text-amber-400 break-words">{profile.name}</span>
+                      </>
+                    )}
+                    {profile.category && (
+                      <>
+                        <span className="text-zinc-400">Category</span>
+                        <span className="font-mono text-amber-700 dark:text-amber-400 break-words">{profile.category}</span>
+                      </>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </>
+          )}
+
+          {/* Constituent Set */}
+          {material.type === 'MaterialConstituentSet' && material.constituents && (
+            <>
+              {material.name && <MaterialRow label="Set Name" value={material.name} />}
+              {material.constituents.map((constituent, i) => (
+                <div key={i} className="px-3 py-2 text-xs hover:bg-amber-50/50 dark:hover:bg-amber-900/20">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="font-medium text-amber-700 dark:text-amber-400">
+                      {constituent.name || `Constituent ${i + 1}`}
+                    </span>
+                    {constituent.fraction !== undefined && (
+                      <span className="text-[10px] font-mono bg-amber-100 dark:bg-amber-900/50 px-1 py-0.5 border border-amber-200 dark:border-amber-800 text-amber-600 dark:text-amber-300">
+                        {(constituent.fraction * 100).toFixed(1)}%
+                      </span>
+                    )}
+                  </div>
+                  <div className="grid grid-cols-[minmax(60px,auto)_1fr] gap-x-2 gap-y-0.5 ml-2">
+                    {constituent.materialName && (
+                      <>
+                        <span className="text-zinc-400">Material</span>
+                        <span className="font-mono text-amber-700 dark:text-amber-400 break-words">{constituent.materialName}</span>
+                      </>
+                    )}
+                    {constituent.category && (
+                      <>
+                        <span className="text-zinc-400">Category</span>
+                        <span className="font-mono text-amber-700 dark:text-amber-400 break-words">{constituent.category}</span>
+                      </>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </>
+          )}
+
+          {/* Material List */}
+          {material.type === 'MaterialList' && material.materials && (
+            <>
+              {material.materials.map((name, i) => (
+                <MaterialRow key={i} label={`Material ${i + 1}`} value={name} />
+              ))}
+            </>
+          )}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+function MaterialRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex flex-col gap-0.5 px-3 py-2 text-xs hover:bg-amber-50/50 dark:hover:bg-amber-900/20">
+      <span className="text-zinc-500 dark:text-zinc-400 font-medium">{label}</span>
+      <span className="font-mono text-amber-700 dark:text-amber-400 select-all break-words">{value}</span>
+    </div>
+  );
+}
+
+function formatThickness(thickness: number): string {
+  if (thickness <= 0) return `${thickness.toFixed(1)} m`;
+  if (thickness >= 1) {
+    return `${thickness.toFixed(1)} m`;
+  }
+  // Show in mm for sub-meter thicknesses
+  const mm = thickness * 1000;
+  return `${mm.toFixed(1)} mm`;
+}