@ifc-lite/viewer 1.15.0 → 1.16.0

package/src/components/viewer/KeyboardShortcutsDialog.tsx

@@ -3,13 +3,12 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import { useState, useEffect, useCallback, useMemo } from 'react';
-import { X, Info, Keyboard, Github, ExternalLink, Sparkles, ChevronDown, Zap, Wrench, Plus } from 'lucide-react';
+import { X, Info, Keyboard, Github, ExternalLink, Sparkles, ChevronDown, ChevronRight, Zap, Wrench, Plus, Package } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import { KEYBOARD_SHORTCUTS } from '@/hooks/useKeyboardShortcuts';
 
 const GITHUB_URL = 'https://github.com/louistrue/ifc-lite';
-const INITIAL_RELEASE_COUNT = 5;
 
 interface InfoDialogProps {
   open: boolean;
@@ -35,85 +34,172 @@ const TYPE_CONFIG = {
 } as const;
 
 function AboutTab() {
+  const [showPackages, setShowPackages] = useState(false);
+  const packageVersions = __PACKAGE_VERSIONS__;
+
   return (
-    <div className="space-y-4">
+    <div className="space-y-3">
       {/* Header */}
-      <div className="text-center pb-4 border-b">
+      <div className="text-center pb-2 border-b">
         <h3 className="text-xl font-bold">ifc-lite</h3>
-        <p className="text-sm text-muted-foreground mt-1">
-          Version {__APP_VERSION__}
-        </p>
         <p className="text-xs text-muted-foreground mt-0.5">
-          Built {formatBuildDate(__BUILD_DATE__)}
-        </p>
-      </div>
-
-      {/* Description */}
-      <div className="space-y-2">
-        <p className="text-sm">
-          A high-performance IFC viewer for BIM models, built with WebGPU.
+          v{__APP_VERSION__} &middot; {formatBuildDate(__BUILD_DATE__)}
         </p>
       </div>
 
-      {/* Features */}
-      <div className="space-y-2">
-        <h4 className="text-sm font-medium">Features</h4>
-        <ul className="text-sm text-muted-foreground space-y-1 list-disc list-inside">
-          <li>WebGPU-accelerated 3D rendering</li>
-          <li>IFC4 and IFC5/IFCX format support</li>
-          <li>Multi-model federation</li>
-          <li>Spatial hierarchy navigation</li>
-          <li>Section planes and measurements</li>
-          <li>Property inspection</li>
-        </ul>
-      </div>
-
       {/* Links */}
-      <div className="pt-4 border-t space-y-2">
+      <div className="flex items-center justify-center gap-4 text-xs">
         <a
           href={GITHUB_URL}
           target="_blank"
           rel="noopener noreferrer"
-          className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+          className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-colors"
         >
-          <Github className="h-4 w-4" />
-          <span>View on GitHub</span>
-          <ExternalLink className="h-3 w-3" />
+          <Github className="h-3.5 w-3.5" />
+          GitHub
         </a>
         <a
           href={`${GITHUB_URL}/issues`}
           target="_blank"
           rel="noopener noreferrer"
-          className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+          className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-colors"
         >
-          <span className="w-4 text-center">🐛</span>
-          <span>Report an issue</span>
+          Report issue
           <ExternalLink className="h-3 w-3" />
         </a>
+        <span className="text-muted-foreground">MPL-2.0</span>
       </div>
 
-      {/* License */}
-      <div className="pt-4 border-t">
-        <p className="text-xs text-muted-foreground text-center">
-          Licensed under Mozilla Public License 2.0
-        </p>
+      {/* Feature chips */}
+      <div className="flex flex-wrap gap-1 justify-center pt-2 border-t">
+        {[
+          'WebGPU', 'IFC2x3', 'IFC4', 'IFC4X3', 'IFC5/IFCX',
+          'Federation', 'Measurements', 'Sections',
+          'Properties', 'Data tables', 'Lens rules', 'IDS',
+          '2D drawings', 'BCF', 'Scripting', 'AI assistant',
+          'glTF export', 'CSV', 'Parquet',
+        ].map((tag) => (
+          <span
+            key={tag}
+            className="px-2 py-0.5 text-[11px] rounded-full bg-muted/60 text-muted-foreground"
+          >
+            {tag}
+          </span>
+        ))}
       </div>
+
+      {/* Package Versions */}
+      {packageVersions.length > 0 && (
+        <div className="pt-2 border-t">
+          <button
+            onClick={() => setShowPackages(!showPackages)}
+            className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {showPackages ? (
+              <ChevronDown className="h-3 w-3" />
+            ) : (
+              <ChevronRight className="h-3 w-3" />
+            )}
+            <Package className="h-3 w-3" />
+            {packageVersions.length} packages
+          </button>
+          {showPackages && (
+            <div className="rounded-md border bg-muted/30 p-2 mt-1.5 max-h-48 overflow-y-auto">
+              <div className="grid grid-cols-2 gap-x-4 gap-y-0.5">
+                {packageVersions.map((pkg) => (
+                  <div
+                    key={pkg.name}
+                    className="flex items-center justify-between text-xs py-0.5 px-1 min-w-0"
+                  >
+                    <span className="text-muted-foreground font-mono truncate mr-2">
+                      {pkg.name.replace('@ifc-lite/', '')}
+                    </span>
+                    <span className="font-mono shrink-0 tabular-nums">{pkg.version}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 }
 
+function formatPkgName(name: string): string {
+  return name.replace('@ifc-lite/', '');
+}
+
+type TimelineEntry = {
+  version: string;
+  isViewerVersion: boolean;
+  entries: Array<{ pkg: string; highlights: typeof __RELEASE_HISTORY__[0]['releases'][0]['highlights'] }>;
+};
+
+const compareSemver = (a: string, b: string) => {
+  const pa = a.split('.').map(Number);
+  const pb = b.split('.').map(Number);
+  for (let i = 0; i < 3; i++) {
+    if ((pa[i] || 0) !== (pb[i] || 0)) return (pb[i] || 0) - (pa[i] || 0);
+  }
+  return 0;
+};
+
+/** Merge all per-package changelogs into a unified timeline grouped by version. */
+function buildTimeline(
+  packageChangelogs: typeof __RELEASE_HISTORY__,
+  viewerVersion: string
+): TimelineEntry[] {
+  type Highlights = typeof __RELEASE_HISTORY__[0]['releases'][0]['highlights'];
+  const versionMap = new Map<string, Map<string, Highlights>>();
+
+  for (const pkg of packageChangelogs) {
+    for (const release of pkg.releases) {
+      if (!versionMap.has(release.version)) {
+        versionMap.set(release.version, new Map());
+      }
+      versionMap.get(release.version)!.set(pkg.name, release.highlights);
+    }
+  }
+
+  return Array.from(versionMap.entries())
+    .sort(([a], [b]) => compareSemver(a, b))
+    .map(([version, pkgMap]) => ({
+      version,
+      isViewerVersion: version === viewerVersion,
+      entries: Array.from(pkgMap.entries())
+        .sort(([a], [b]) => a.localeCompare(b))
+        .map(([pkg, highlights]) => ({ pkg, highlights })),
+    }));
+}
+
 function WhatsNewTab() {
-  const [showAll, setShowAll] = useState(false);
-  const releases = __RELEASE_HISTORY__;
+  const packageChangelogs = __RELEASE_HISTORY__;
+  const viewerVersion = __APP_VERSION__;
+  const [expandedVersions, setExpandedVersions] = useState<Set<string>>(() => new Set());
 
-  const visibleReleases = useMemo(
-    () => (showAll ? releases : releases.slice(0, INITIAL_RELEASE_COUNT)),
-    [releases, showAll]
+  const timeline = useMemo(
+    () => buildTimeline(packageChangelogs, viewerVersion),
+    [packageChangelogs, viewerVersion]
   );
 
-  const hasMore = releases.length > INITIAL_RELEASE_COUNT;
+  // Auto-expand the first version with actual changes
+  useEffect(() => {
+    if (timeline.length > 0 && expandedVersions.size === 0) {
+      setExpandedVersions(new Set([timeline[0].version]));
+    }
+  }, [timeline]);
 
-  if (releases.length === 0) {
+  const toggleVersion = useCallback((version: string) => {
+    setExpandedVersions((prev) => {
+      const next = new Set(prev);
+      if (next.has(version)) next.delete(version);
+      else next.add(version);
+      return next;
+    });
+  }, []);
+
+  if (timeline.length === 0) {
     return (
       <div className="text-center py-8 text-sm text-muted-foreground">
         No release history available.
@@ -122,43 +208,59 @@ function WhatsNewTab() {
   }
 
   return (
-    <div className="space-y-4">
-      {visibleReleases.map((release, i) => (
-        <div key={release.version}>
-          <div className="flex items-center gap-2 mb-1.5">
-            <span className="text-sm font-semibold">v{release.version}</span>
-            {i === 0 && (
-              <span className="px-1.5 py-0.5 text-[10px] font-medium bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 rounded">
-                latest
+    <div className="space-y-1">
+      {timeline.map((release) => {
+        const isExpanded = expandedVersions.has(release.version);
+        const totalHighlights = release.entries.reduce((s, e) => s + e.highlights.length, 0);
+        return (
+          <div key={release.version}>
+            <button
+              onClick={() => toggleVersion(release.version)}
+              className="flex items-center gap-2 w-full py-1.5 px-1 text-left hover:bg-muted/40 transition-colors rounded"
+            >
+              {isExpanded ? (
+                <ChevronDown className="h-3 w-3 shrink-0 text-muted-foreground" />
+              ) : (
+                <ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground" />
+              )}
+              <span className="text-sm font-semibold">v{release.version}</span>
+              {release.isViewerVersion && (
+                <span className="px-1.5 py-0.5 text-[10px] font-medium bg-sky-500/15 text-sky-600 dark:text-sky-400 rounded">
+                  viewer
+                </span>
+              )}
+              <span className="text-xs text-muted-foreground ml-auto">
+                {totalHighlights} change{totalHighlights !== 1 ? 's' : ''}
               </span>
+            </button>
+            {isExpanded && (
+              <div className="ml-5 pb-2 space-y-2">
+                {release.entries.map(({ pkg, highlights }) => (
+                  <div key={pkg}>
+                    <span className="text-xs font-medium font-mono text-muted-foreground">
+                      {formatPkgName(pkg)}
+                    </span>
+                    <ul className="space-y-0.5 mt-0.5">
+                      {highlights.map((h) => {
+                        const { icon: Icon, className } = TYPE_CONFIG[h.type];
+                        return (
+                          <li
+                            key={h.text}
+                            className="flex items-start gap-1.5 text-sm text-muted-foreground"
+                          >
+                            <Icon className={`h-3 w-3 mt-0.5 shrink-0 ${className}`} />
+                            <span>{h.text}</span>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  </div>
+                ))}
+              </div>
             )}
           </div>
-          <ul className="space-y-1 ml-0.5">
-            {release.highlights.map((h) => {
-              const { icon: Icon, className } = TYPE_CONFIG[h.type];
-              return (
-                <li key={h.text} className="flex items-start gap-2 text-sm text-muted-foreground">
-                  <Icon className={`h-3.5 w-3.5 mt-0.5 shrink-0 ${className}`} />
-                  <span>{h.text}</span>
-                </li>
-              );
-            })}
-          </ul>
-          {i < visibleReleases.length - 1 && (
-            <div className="border-b mt-3" />
-          )}
-        </div>
-      ))}
-
-      {hasMore && !showAll && (
-        <button
-          onClick={() => setShowAll(true)}
-          className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors mx-auto"
-        >
-          <ChevronDown className="h-3.5 w-3.5" />
-          Show all {releases.length} releases
-        </button>
-      )}
+        );
+      })}
 
       {/* Legend */}
       <div className="pt-3 border-t flex items-center justify-center gap-4 text-[11px] text-muted-foreground">

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

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

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

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

package/src/hooks/useIfcCache.ts

@@ -16,7 +16,7 @@ import {
   type IfcDataStore as CacheDataStore,
   type GeometryData,
 } from '@ifc-lite/cache';
-import { SpatialHierarchyBuilder, StepTokenizer, extractLengthUnitScale, type IfcDataStore } from '@ifc-lite/parser';
+import { SpatialHierarchyBuilder, StepTokenizer, buildCompactEntityIndex, extractLengthUnitScale, type IfcDataStore } from '@ifc-lite/parser';
 import { buildSpatialIndex } from '@ifc-lite/spatial';
 import type { MeshData } from '@ifc-lite/geometry';
 
@@ -102,27 +102,27 @@ export function useIfcCache() {
 
         // Quick scan to rebuild entity index with byte offsets (needed for on-demand extraction)
         const tokenizer = new StepTokenizer(dataStore.source);
-        const entityIndex = {
-          byId: new Map<number, any>(),
-          byType: new Map<string, number[]>(),
-        };
+        const entityRefs: Array<{ expressId: number; type: string; byteOffset: number; byteLength: number; lineNumber: number }> = [];
+        const byType = new Map<string, number[]>();
 
         for (const ref of tokenizer.scanEntitiesFast()) {
-          entityIndex.byId.set(ref.expressId, {
+          entityRefs.push({
             expressId: ref.expressId,
             type: ref.type,
             byteOffset: ref.offset,
             byteLength: ref.length,
             lineNumber: ref.line,
           });
-          let typeList = entityIndex.byType.get(ref.type);
+          let typeList = byType.get(ref.type);
           if (!typeList) {
             typeList = [];
-            entityIndex.byType.set(ref.type, typeList);
+            byType.set(ref.type, typeList);
           }
           typeList.push(ref.expressId);
         }
-        dataStore.entityIndex = entityIndex;
+        // Use compact entity index (typed arrays) for lower memory usage
+        const compactByIdIndex = buildCompactEntityIndex(entityRefs);
+        dataStore.entityIndex = { byId: compactByIdIndex, byType };
 
         // Rebuild on-demand maps from relationships
         // Pass entityIndex which contains ALL entity types including IfcPropertySet/IfcElementQuantity

package/src/hooks/useKeyboardShortcuts.ts

@@ -6,7 +6,7 @@
  * Global keyboard shortcuts for the viewer
  */
 
-import { useEffect, useCallback } from 'react';
+import { useEffect, useCallback, useRef } from 'react';
 import { useViewerStore } from '@/store';
 import { resetVisibilityForHomeFromStore } from '@/store/homeView';
 import {
@@ -33,9 +33,14 @@ function getAllSelectedGlobalIds(): number[] {
   return [];
 }
 
+/** Double-escape threshold in milliseconds */
+const DOUBLE_ESCAPE_MS = 500;
+
 export function useKeyboardShortcuts(options: KeyboardShortcutsOptions = {}) {
   const { enabled = true } = options;
 
+  const lastEscapeRef = useRef<number>(0);
+
   const selectedEntityId = useViewerStore((s) => s.selectedEntityId);
   const setSelectedEntityId = useViewerStore((s) => s.setSelectedEntityId);
   const activeTool = useViewerStore((s) => s.activeTool);
@@ -181,9 +186,29 @@ export function useKeyboardShortcuts(options: KeyboardShortcutsOptions = {}) {
       }
     }
 
-    // Selection - Escape clears selection and switches to select tool
+    // Escape: first press clears selection/tool, double-press closes all panels
     if (key === 'escape') {
       e.preventDefault();
+      const now = Date.now();
+      const timeSinceLastEscape = now - lastEscapeRef.current;
+      lastEscapeRef.current = now;
+
+      if (timeSinceLastEscape < DOUBLE_ESCAPE_MS) {
+        // Double-escape: close all panels, return to starting view
+        const state = useViewerStore.getState();
+        state.setBcfPanelVisible(false);
+        state.setIdsPanelVisible(false);
+        state.setLensPanelVisible(false);
+        state.setScriptPanelVisible(false);
+        state.setListPanelVisible(false);
+        state.setDrawing2DPanelVisible(false);
+        state.setOverridesPanelVisible(false);
+        state.setChatPanelVisible(false);
+        state.setSheetPanelVisible(false);
+        state.setLeftPanelCollapsed(false);
+        state.setRightPanelCollapsed(false);
+      }
+
       setSelectedEntityId(null);
       resetVisibilityForHomeFromStore();
       setActiveTool('select');
@@ -246,6 +271,7 @@ export const KEYBOARD_SHORTCUTS = [
   { key: '1-6', description: 'Preset views', category: 'Camera' },
   { key: 'T', description: 'Toggle theme', category: 'UI' },
   { key: 'Esc', description: 'Reset all (clear selection, basket, isolation)', category: 'Selection' },
+  { key: 'Esc Esc', description: 'Close all panels (return to starting view)', category: 'UI' },
   { key: 'Ctrl+K', description: 'Command palette', category: 'UI' },
   { key: '?', description: 'Show info panel', category: 'Help' },
 ] as const;