@ifc-lite/viewer 1.6.0 → 1.7.0

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

@@ -0,0 +1,335 @@
+/* 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/. */
+
+/**
+ * Model metadata panel - displays file info, schema version, entity counts,
+ * coordinate system info, and project information.
+ */
+
+import { useMemo } from 'react';
+import {
+  Layers,
+  FileText,
+  Tag,
+  FileBox,
+  Clock,
+  HardDrive,
+  Hash,
+  Database,
+  Building2,
+  Globe,
+  Ruler,
+} from 'lucide-react';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { PropertySetCard } from './PropertySetCard';
+import type { PropertySet } from './encodingUtils';
+import type { FederatedModel } from '@/store/types';
+import { extractGeoreferencingOnDemand, extractLengthUnitScale, type IfcDataStore } from '@ifc-lite/parser';
+
+/** Model metadata panel - displays file info, schema version, entity counts, etc. */
+export function ModelMetadataPanel({ model }: { model: FederatedModel }) {
+  const dataStore = model.ifcDataStore;
+
+  // Format file size
+  const formatFileSize = (bytes: number): string => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+  };
+
+  // Format date
+  const formatDate = (timestamp: number): string => {
+    return new Date(timestamp).toLocaleString();
+  };
+
+  // Get IfcProject data if available
+  const projectData = useMemo(() => {
+    if (!dataStore?.spatialHierarchy?.project) return null;
+    const project = dataStore.spatialHierarchy.project;
+    const projectId = project.expressId;
+
+    // Get project entity attributes
+    const name = dataStore.entities.getName(projectId);
+    const globalId = dataStore.entities.getGlobalId(projectId);
+    const description = dataStore.entities.getDescription(projectId);
+
+    // Get project properties
+    const properties: PropertySet[] = [];
+    if (dataStore.properties) {
+      for (const pset of dataStore.properties.getForEntity(projectId)) {
+        properties.push({
+          name: pset.name,
+          properties: pset.properties.map(p => ({ name: p.name, value: p.value })),
+        });
+      }
+    }
+
+    return { name, globalId, description, properties };
+  }, [dataStore]);
+
+  // Count storeys and elements
+  const stats = useMemo(() => {
+    if (!dataStore?.spatialHierarchy) {
+      return { storeys: 0, elementsWithGeometry: 0 };
+    }
+    const storeys = dataStore.spatialHierarchy.byStorey.size;
+    let elementsWithGeometry = 0;
+    for (const elements of dataStore.spatialHierarchy.byStorey.values()) {
+      elementsWithGeometry += (elements as number[]).length;
+    }
+    return { storeys, elementsWithGeometry };
+  }, [dataStore]);
+
+  // Extract georeferencing info
+  const georef = useMemo(() => {
+    if (!dataStore) return null;
+    const info = extractGeoreferencingOnDemand(dataStore as IfcDataStore);
+    return info?.hasGeoreference ? info : null;
+  }, [dataStore]);
+
+  // Extract length unit scale
+  const unitInfo = useMemo(() => {
+    if (!dataStore?.source?.length || !dataStore?.entityIndex) return null;
+    const scale = extractLengthUnitScale(dataStore.source, dataStore.entityIndex);
+    let unitName = 'Meters';
+    if (Math.abs(scale - 0.001) < 0.0001) unitName = 'Millimeters';
+    else if (Math.abs(scale - 0.01) < 0.001) unitName = 'Centimeters';
+    else if (Math.abs(scale - 0.0254) < 0.001) unitName = 'Inches';
+    else if (Math.abs(scale - 0.3048) < 0.01) unitName = 'Feet';
+    return { scale, unitName };
+  }, [dataStore]);
+
+  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-zinc-50 dark:bg-black space-y-3">
+        <div className="flex items-start gap-3">
+          <div className="p-2 border-2 border-primary/30 bg-primary/10 shrink-0 shadow-[2px_2px_0px_0px_rgba(0,0,0,0.1)] dark:shadow-[2px_2px_0px_0px_rgba(255,255,255,0.1)]">
+            <FileBox className="h-5 w-5 text-primary" />
+          </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">
+              {model.name}
+            </h3>
+            <p className="text-xs font-mono text-zinc-500 dark:text-zinc-400">IFC Model</p>
+          </div>
+        </div>
+
+        {/* Schema badge */}
+        <div className="flex items-center gap-2">
+          <span className="text-[10px] font-mono bg-primary/10 border border-primary/30 px-2 py-1 text-primary font-bold uppercase">
+            {model.schemaVersion}
+          </span>
+        </div>
+      </div>
+
+      <ScrollArea className="flex-1">
+        {/* File Information */}
+        <div className="border-b border-zinc-200 dark:border-zinc-800">
+          <div className="p-3 bg-zinc-50 dark:bg-zinc-900/50">
+            <h4 className="font-bold text-xs uppercase tracking-wide text-zinc-700 dark:text-zinc-300">
+              File Information
+            </h4>
+          </div>
+          <div className="divide-y divide-zinc-100 dark:divide-zinc-900">
+            <div className="flex items-center gap-3 px-3 py-2">
+              <HardDrive className="h-3.5 w-3.5 text-zinc-400 shrink-0" />
+              <span className="text-xs text-zinc-500">File Size</span>
+              <span className="text-xs font-mono text-zinc-900 dark:text-zinc-100 ml-auto">
+                {formatFileSize(model.fileSize)}
+              </span>
+            </div>
+            <div className="flex items-center gap-3 px-3 py-2">
+              <Clock className="h-3.5 w-3.5 text-zinc-400 shrink-0" />
+              <span className="text-xs text-zinc-500">Loaded At</span>
+              <span className="text-xs font-mono text-zinc-900 dark:text-zinc-100 ml-auto">
+                {formatDate(model.loadedAt)}
+              </span>
+            </div>
+            {dataStore && (
+              <div className="flex items-center gap-3 px-3 py-2">
+                <Clock className="h-3.5 w-3.5 text-zinc-400 shrink-0" />
+                <span className="text-xs text-zinc-500">Parse Time</span>
+                <span className="text-xs font-mono text-zinc-900 dark:text-zinc-100 ml-auto">
+                  {dataStore.parseTime.toFixed(0)} ms
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Length Unit */}
+        {unitInfo && (
+          <div className="border-b border-zinc-200 dark:border-zinc-800">
+            <div className="flex items-center gap-3 px-3 py-2.5 bg-amber-50/50 dark:bg-amber-950/20">
+              <Ruler className="h-3.5 w-3.5 text-amber-600 dark:text-amber-400 shrink-0" />
+              <span className="text-xs font-bold text-amber-700 dark:text-amber-400 uppercase tracking-wide">Length Unit</span>
+              <span className="text-xs font-mono text-amber-800 dark:text-amber-300 ml-auto">
+                {unitInfo.unitName} ({unitInfo.scale})
+              </span>
+            </div>
+          </div>
+        )}
+
+        {/* Entity Statistics */}
+        <div className="border-b border-zinc-200 dark:border-zinc-800">
+          <div className="p-3 bg-zinc-50 dark:bg-zinc-900/50">
+            <h4 className="font-bold text-xs uppercase tracking-wide text-zinc-700 dark:text-zinc-300">
+              Statistics
+            </h4>
+          </div>
+          <div className="divide-y divide-zinc-100 dark:divide-zinc-900">
+            <div className="flex items-center gap-3 px-3 py-2">
+              <Database className="h-3.5 w-3.5 text-zinc-400 shrink-0" />
+              <span className="text-xs text-zinc-500">Total Entities</span>
+              <span className="text-xs font-mono text-zinc-900 dark:text-zinc-100 ml-auto">
+                {dataStore?.entityCount?.toLocaleString() ?? 'N/A'}
+              </span>
+            </div>
+            <div className="flex items-center gap-3 px-3 py-2">
+              <Layers className="h-3.5 w-3.5 text-zinc-400 shrink-0" />
+              <span className="text-xs text-zinc-500">Building Storeys</span>
+              <span className="text-xs font-mono text-zinc-900 dark:text-zinc-100 ml-auto">
+                {stats.storeys}
+              </span>
+            </div>
+            <div className="flex items-center gap-3 px-3 py-2">
+              <Building2 className="h-3.5 w-3.5 text-zinc-400 shrink-0" />
+              <span className="text-xs text-zinc-500">Elements with Geometry</span>
+              <span className="text-xs font-mono text-zinc-900 dark:text-zinc-100 ml-auto">
+                {stats.elementsWithGeometry.toLocaleString()}
+              </span>
+            </div>
+            <div className="flex items-center gap-3 px-3 py-2">
+              <Hash className="h-3.5 w-3.5 text-zinc-400 shrink-0" />
+              <span className="text-xs text-zinc-500">Max Express ID</span>
+              <span className="text-xs font-mono text-zinc-900 dark:text-zinc-100 ml-auto">
+                {model.maxExpressId.toLocaleString()}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Georeferencing */}
+        {georef && (
+          <div className="border-b border-zinc-200 dark:border-zinc-800">
+            <div className="p-3 bg-teal-50/50 dark:bg-teal-950/20">
+              <div className="flex items-center gap-2">
+                <Globe className="h-3.5 w-3.5 text-teal-600 dark:text-teal-400" />
+                <h4 className="font-bold text-xs uppercase tracking-wide text-teal-700 dark:text-teal-300">
+                  Georeferencing
+                </h4>
+              </div>
+            </div>
+            <div className="divide-y divide-zinc-100 dark:divide-zinc-900">
+              {georef.projectedCRS?.name && (
+                <div className="flex items-center gap-3 px-3 py-2">
+                  <span className="text-xs text-zinc-500 shrink-0">CRS</span>
+                  <span className="text-xs font-mono text-teal-700 dark:text-teal-400 ml-auto truncate max-w-[65%]">
+                    {georef.projectedCRS.name}
+                  </span>
+                </div>
+              )}
+              {georef.projectedCRS?.geodeticDatum && (
+                <div className="flex items-center gap-3 px-3 py-2">
+                  <span className="text-xs text-zinc-500 shrink-0">Geodetic Datum</span>
+                  <span className="text-xs font-mono text-teal-700 dark:text-teal-400 ml-auto">
+                    {georef.projectedCRS.geodeticDatum}
+                  </span>
+                </div>
+              )}
+              {georef.projectedCRS?.mapProjection && (
+                <div className="flex items-center gap-3 px-3 py-2">
+                  <span className="text-xs text-zinc-500 shrink-0">Projection</span>
+                  <span className="text-xs font-mono text-teal-700 dark:text-teal-400 ml-auto truncate max-w-[65%]">
+                    {georef.projectedCRS.mapProjection}
+                  </span>
+                </div>
+              )}
+              {georef.mapConversion && (
+                <>
+                  <div className="flex items-center gap-3 px-3 py-2">
+                    <span className="text-xs text-zinc-500 shrink-0">Eastings</span>
+                    <span className="text-xs font-mono text-teal-700 dark:text-teal-400 ml-auto tabular-nums">
+                      {georef.mapConversion.eastings.toFixed(3)}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-3 px-3 py-2">
+                    <span className="text-xs text-zinc-500 shrink-0">Northings</span>
+                    <span className="text-xs font-mono text-teal-700 dark:text-teal-400 ml-auto tabular-nums">
+                      {georef.mapConversion.northings.toFixed(3)}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-3 px-3 py-2">
+                    <span className="text-xs text-zinc-500 shrink-0">Height</span>
+                    <span className="text-xs font-mono text-teal-700 dark:text-teal-400 ml-auto tabular-nums">
+                      {georef.mapConversion.orthogonalHeight.toFixed(3)}
+                    </span>
+                  </div>
+                  {georef.mapConversion.scale != null && georef.mapConversion.scale !== 1.0 && (
+                    <div className="flex items-center gap-3 px-3 py-2">
+                      <span className="text-xs text-zinc-500 shrink-0">Scale</span>
+                      <span className="text-xs font-mono text-teal-700 dark:text-teal-400 ml-auto">
+                        {georef.mapConversion.scale}
+                      </span>
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* IfcProject Data */}
+        {projectData && (
+          <div className="border-b border-zinc-200 dark:border-zinc-800">
+            <div className="p-3 bg-zinc-50 dark:bg-zinc-900/50">
+              <h4 className="font-bold text-xs uppercase tracking-wide text-zinc-700 dark:text-zinc-300">
+                Project Information
+              </h4>
+            </div>
+            <div className="divide-y divide-zinc-100 dark:divide-zinc-900">
+              {projectData.name && (
+                <div className="flex items-center gap-3 px-3 py-2">
+                  <Tag className="h-3.5 w-3.5 text-zinc-400 shrink-0" />
+                  <span className="text-xs text-zinc-500">Name</span>
+                  <span className="text-xs font-medium text-zinc-900 dark:text-zinc-100 ml-auto truncate max-w-[60%]">
+                    {projectData.name}
+                  </span>
+                </div>
+              )}
+              {projectData.description && (
+                <div className="flex items-start gap-3 px-3 py-2">
+                  <FileText className="h-3.5 w-3.5 text-zinc-400 shrink-0 mt-0.5" />
+                  <span className="text-xs text-zinc-500 shrink-0">Description</span>
+                  <span className="text-xs text-zinc-900 dark:text-zinc-100 ml-auto text-right max-w-[60%]">
+                    {projectData.description}
+                  </span>
+                </div>
+              )}
+              {projectData.globalId && (
+                <div className="flex items-center gap-3 px-3 py-2">
+                  <Hash className="h-3.5 w-3.5 text-zinc-400 shrink-0" />
+                  <span className="text-xs text-zinc-500">GlobalId</span>
+                  <code className="text-[10px] font-mono text-zinc-600 dark:text-zinc-400 ml-auto truncate max-w-[60%]">
+                    {projectData.globalId}
+                  </code>
+                </div>
+              )}
+            </div>
+
+            {/* Project Properties */}
+            {projectData.properties.length > 0 && (
+              <div className="p-3 pt-0 space-y-2">
+                {projectData.properties.map((pset) => (
+                  <PropertySetCard key={pset.name} pset={pset} />
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </ScrollArea>
+    </div>
+  );
+}

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

@@ -0,0 +1,132 @@
+/* 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/. */
+
+/**
+ * Property set display component with edit support.
+ */
+
+import { Sparkles, PenLine } from 'lucide-react';
+import { PropertyEditor } from '../PropertyEditor';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Badge } from '@/components/ui/badge';
+import { decodeIfcString, parsePropertyValue } from './encodingUtils';
+import type { PropertySet } from './encodingUtils';
+
+export interface PropertySetCardProps {
+  pset: PropertySet;
+  modelId?: string;
+  entityId?: number;
+  enableEditing?: boolean;
+}
+
+export function PropertySetCard({ pset, modelId, entityId, enableEditing }: PropertySetCardProps) {
+  // Check if any property in this set is mutated
+  const hasMutations = pset.properties.some(p => p.isMutated);
+  const isNewPset = pset.isNewPset;
+
+  // Dynamic styling based on mutation state
+  const borderClass = isNewPset
+    ? 'border-2 border-amber-400/50 dark:border-amber-500/30'
+    : hasMutations
+    ? 'border-2 border-purple-300/50 dark:border-purple-500/30'
+    : 'border-2 border-zinc-200 dark:border-zinc-800';
+
+  const bgClass = isNewPset
+    ? 'bg-amber-50/30 dark:bg-amber-950/20'
+    : hasMutations
+    ? 'bg-purple-50/20 dark:bg-purple-950/10'
+    : 'bg-white dark:bg-zinc-950';
+
+  return (
+    <Collapsible defaultOpen className={`${borderClass} ${bgClass} group w-full max-w-full overflow-hidden`}>
+      <CollapsibleTrigger className="flex items-center gap-2 w-full p-2.5 hover:bg-zinc-50 dark:hover:bg-zinc-900 text-left transition-colors overflow-hidden">
+        {isNewPset && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Sparkles className="h-3.5 w-3.5 text-amber-500 shrink-0" />
+            </TooltipTrigger>
+            <TooltipContent>New property set (not in original model)</TooltipContent>
+          </Tooltip>
+        )}
+        {hasMutations && !isNewPset && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <PenLine className="h-3.5 w-3.5 text-purple-500 shrink-0" />
+            </TooltipTrigger>
+            <TooltipContent>Has modified properties</TooltipContent>
+          </Tooltip>
+        )}
+        <span className="font-bold text-xs text-zinc-900 dark:text-zinc-100 truncate flex-1 min-w-0">{decodeIfcString(pset.name)}</span>
+        <span className="text-[10px] font-mono bg-zinc-100 dark:bg-zinc-900 px-1.5 py-0.5 border border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400 shrink-0">{pset.properties.length}</span>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="border-t-2 border-zinc-200 dark:border-zinc-800 divide-y divide-zinc-100 dark:divide-zinc-900">
+          {pset.properties.map((prop: { name: string; value: unknown; isMutated?: boolean }) => {
+            const parsed = parsePropertyValue(prop.value);
+            const decodedName = decodeIfcString(prop.name);
+            const isMutated = prop.isMutated;
+
+            return (
+              <div
+                key={prop.name}
+                className={`flex items-start justify-between gap-2 px-3 py-2 text-xs group/prop ${
+                  isMutated
+                    ? 'bg-purple-50/50 dark:bg-purple-950/30 hover:bg-purple-100/50 dark:hover:bg-purple-900/30'
+                    : 'hover:bg-zinc-50/50 dark:hover:bg-zinc-900/50'
+                }`}
+              >
+                <div className="flex flex-col gap-0.5 flex-1 min-w-0">
+                  {/* Property name with type tooltip and mutation indicator */}
+                  <div className="flex items-center gap-1.5">
+                    {isMutated && (
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Badge variant="secondary" className="h-4 px-1 text-[9px] bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300 border-purple-200 dark:border-purple-700">
+                            edited
+                          </Badge>
+                        </TooltipTrigger>
+                        <TooltipContent>This property has been modified</TooltipContent>
+                      </Tooltip>
+                    )}
+                    {parsed.ifcType ? (
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <span className={`font-medium cursor-help break-words ${isMutated ? 'text-purple-600 dark:text-purple-400' : 'text-zinc-500 dark:text-zinc-400'}`}>
+                            {decodedName}
+                          </span>
+                        </TooltipTrigger>
+                        <TooltipContent side="top" className="text-[10px]">
+                          <span className="text-zinc-400">{parsed.ifcType}</span>
+                        </TooltipContent>
+                      </Tooltip>
+                    ) : (
+                      <span className={`font-medium break-words ${isMutated ? 'text-purple-600 dark:text-purple-400' : 'text-zinc-500 dark:text-zinc-400'}`}>
+                        {decodedName}
+                      </span>
+                    )}
+                  </div>
+                  {/* Property value - use PropertyEditor if editing enabled */}
+                  {enableEditing && modelId && entityId ? (
+                    <PropertyEditor
+                      modelId={modelId}
+                      entityId={entityId}
+                      psetName={pset.name}
+                      propName={prop.name}
+                      currentValue={prop.value}
+                    />
+                  ) : (
+                    <span className={`font-mono select-all break-words ${isMutated ? 'text-purple-900 dark:text-purple-100 font-semibold' : 'text-zinc-900 dark:text-zinc-100'}`}>
+                      {parsed.displayValue}
+                    </span>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

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

@@ -0,0 +1,79 @@
+/* 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/. */
+
+/**
+ * Quantity set display component for IFC element quantities.
+ */
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { decodeIfcString } from './encodingUtils';
+import type { QuantitySet } from './encodingUtils';
+
+/** Maps quantity type to friendly name for tooltip */
+const QUANTITY_TYPE_NAMES: Record<number, string> = {
+  0: 'Length',
+  1: 'Area',
+  2: 'Volume',
+  3: 'Count',
+  4: 'Weight',
+  5: 'Time',
+};
+
+export function QuantitySetCard({ qset }: { qset: QuantitySet }) {
+  const formatValue = (value: number, type: number): string => {
+    const formatted = value.toLocaleString(undefined, { maximumFractionDigits: 3 });
+    switch (type) {
+      case 0: return `${formatted} m`;
+      case 1: return `${formatted} m\u00B2`;
+      case 2: return `${formatted} m\u00B3`;
+      case 3: return formatted;
+      case 4: return `${formatted} kg`;
+      case 5: return `${formatted} s`;
+      default: return formatted;
+    }
+  };
+
+  return (
+    <Collapsible defaultOpen className="border-2 border-blue-200 dark:border-blue-800 bg-blue-50/20 dark:bg-blue-950/20 w-full max-w-full overflow-hidden">
+      <CollapsibleTrigger className="flex items-center gap-2 w-full p-2.5 hover:bg-blue-50 dark:hover:bg-blue-900/30 text-left transition-colors overflow-hidden">
+        <span className="font-bold text-xs text-blue-700 dark:text-blue-400 truncate flex-1 min-w-0">{decodeIfcString(qset.name)}</span>
+        <span className="text-[10px] font-mono bg-blue-100 dark:bg-blue-900/50 px-1.5 py-0.5 border border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300 shrink-0">{qset.quantities.length}</span>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="border-t-2 border-blue-200 dark:border-blue-800 divide-y divide-blue-100 dark:divide-blue-900/30">
+          {qset.quantities.map((q: { name: string; value: number; type: number }, index: number) => {
+            const decodedName = decodeIfcString(q.name);
+            const typeName = QUANTITY_TYPE_NAMES[q.type];
+            return (
+              <div key={`${q.name}-${index}`} className="flex flex-col gap-0.5 px-3 py-2 text-xs hover:bg-blue-50/50 dark:hover:bg-blue-900/20">
+                {/* Quantity name with type tooltip */}
+                {typeName ? (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <span className="text-zinc-500 dark:text-zinc-400 font-medium cursor-help break-words">
+                        {decodedName}
+                      </span>
+                    </TooltipTrigger>
+                    <TooltipContent side="top" className="text-[10px]">
+                      <span className="text-zinc-400">{typeName}</span>
+                    </TooltipContent>
+                  </Tooltip>
+                ) : (
+                  <span className="text-zinc-500 dark:text-zinc-400 font-medium break-words">
+                    {decodedName}
+                  </span>
+                )}
+                {/* Quantity value */}
+                <span className="font-mono text-blue-700 dark:text-blue-400 select-all break-words">
+                  {formatValue(q.value, q.type)}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

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

@@ -0,0 +1,100 @@
+/* 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/. */
+
+/**
+ * Relationships display component for IFC element structural relationships.
+ */
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { Link2 } from 'lucide-react';
+import type { EntityRelationships } from '@ifc-lite/parser';
+
+interface RelationshipsCardProps {
+  relationships: EntityRelationships;
+  onSelectEntity?: (entityId: number) => void;
+}
+
+export function RelationshipsCard({ relationships, onSelectEntity }: RelationshipsCardProps) {
+  const { voids, fills, groups, connections } = relationships;
+  const totalCount = voids.length + fills.length + groups.length + connections.length;
+
+  if (totalCount === 0) return null;
+
+  return (
+    <Collapsible defaultOpen className="border-2 border-zinc-300 dark:border-zinc-700 bg-zinc-50/20 dark:bg-zinc-950/20 w-full max-w-full overflow-hidden">
+      <CollapsibleTrigger className="flex items-center gap-2 w-full p-2.5 hover:bg-zinc-100 dark:hover:bg-zinc-800/30 text-left transition-colors overflow-hidden">
+        <Link2 className="h-3.5 w-3.5 text-zinc-600 dark:text-zinc-400 shrink-0" />
+        <span className="font-bold text-xs text-zinc-700 dark:text-zinc-300 truncate flex-1 min-w-0">
+          Relationships
+        </span>
+        <span className="text-[10px] font-mono bg-zinc-200 dark:bg-zinc-800 px-1.5 py-0.5 border border-zinc-300 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 shrink-0">
+          {totalCount}
+        </span>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="border-t-2 border-zinc-300 dark:border-zinc-700 divide-y divide-zinc-200 dark:divide-zinc-800">
+          {voids.length > 0 && (
+            <div className="px-3 py-2">
+              <div className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider mb-1">
+                Openings ({voids.length})
+              </div>
+              {voids.map((item) => (
+                <RelItem key={item.id} item={item} onSelect={onSelectEntity} />
+              ))}
+            </div>
+          )}
+          {fills.length > 0 && (
+            <div className="px-3 py-2">
+              <div className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider mb-1">
+                Fills ({fills.length})
+              </div>
+              {fills.map((item) => (
+                <RelItem key={item.id} item={item} onSelect={onSelectEntity} />
+              ))}
+            </div>
+          )}
+          {groups.length > 0 && (
+            <div className="px-3 py-2">
+              <div className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider mb-1">
+                Groups ({groups.length})
+              </div>
+              {groups.map((item) => (
+                <div key={item.id} className="text-xs font-mono text-zinc-600 dark:text-zinc-400 py-0.5">
+                  {item.name || `Group #${item.id}`}
+                </div>
+              ))}
+            </div>
+          )}
+          {connections.length > 0 && (
+            <div className="px-3 py-2">
+              <div className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider mb-1">
+                Connections ({connections.length})
+              </div>
+              {connections.map((item) => (
+                <RelItem key={item.id} item={item} onSelect={onSelectEntity} />
+              ))}
+            </div>
+          )}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+function RelItem({ item, onSelect }: {
+  item: { id: number; name?: string; type: string };
+  onSelect?: (id: number) => void;
+}) {
+  return (
+    <button
+      className="flex items-center gap-2 text-xs py-0.5 w-full text-left hover:text-primary transition-colors"
+      onClick={() => onSelect?.(item.id)}
+      type="button"
+    >
+      <span className="font-mono text-zinc-500 dark:text-zinc-500 text-[10px]">#{item.id}</span>
+      <span className="text-zinc-600 dark:text-zinc-400 truncate">{item.name || item.type}</span>
+      <span className="text-[10px] text-zinc-400 ml-auto shrink-0">{item.type}</span>
+    </button>
+  );
+}