@ifc-lite/viewer 1.15.0 → 1.17.0

package/src/components/viewer/ExportDialog.tsx

@@ -14,7 +14,7 @@
  * - IFC5 → .ifcx
  */
 
-import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
 import {
   Download,
   AlertCircle,
@@ -48,10 +48,11 @@ import {
   AlertDescription,
   AlertTitle,
 } from '@/components/ui/alert';
+import { Progress } from '@/components/ui/progress';
 import { useViewerStore } from '@/store';
 import { configureMutationView } from '@/utils/configureMutationView';
 import { toast } from '@/components/ui/toast';
-import { StepExporter, MergedExporter, Ifc5Exporter, IFC5_KNOWN_PROP_NAMES, type MergeModelInput } from '@ifc-lite/export';
+import { StepExporter, MergedExporter, Ifc5Exporter, IFC5_KNOWN_PROP_NAMES, type MergeModelInput, type ExportProgress, type StepExportProgress } from '@ifc-lite/export';
 import { MutablePropertyView } from '@ifc-lite/mutations';
 import type { IfcDataStore } from '@ifc-lite/parser';
 
@@ -87,6 +88,27 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
   const [onlyKnownProperties, setOnlyKnownProperties] = useState(true);
   const [isExporting, setIsExporting] = useState(false);
   const [exportResult, setExportResult] = useState<{ success: boolean; message: string } | null>(null);
+  const [exportProgress, setExportProgress] = useState<{
+    phase: string;
+    percent: number;
+    entitiesProcessed: number;
+    entitiesTotal: number;
+    currentModel?: string;
+  } | null>(null);
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
+  const prevProgressRef = useRef<typeof exportProgress>(null);
+
+  const scrollToBottom = useCallback(() => {
+    if (scrollAreaRef.current) {
+      scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight;
+    }
+  }, []);
+
+  // Auto-scroll when progress first appears
+  useEffect(() => {
+    if (exportProgress && !prevProgressRef.current) scrollToBottom();
+    prevProgressRef.current = exportProgress;
+  }, [exportProgress, scrollToBottom]);
 
   // Derived: is this an IFC5/IFCX export?
   const isIfc5 = schema === 'IFC5';
@@ -286,6 +308,7 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
 
     setIsExporting(true);
     setExportResult(null);
+    setExportProgress(null);
 
     try {
       // Handle merged export of all models (STEP only, not IFC5)
@@ -308,7 +331,7 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
           }
         }
 
-        const result = mergedExporter.export({
+        const result = await mergedExporter.exportAsync({
           schema,
           projectStrategy: 'keep-first',
           visibleOnly,
@@ -316,8 +339,19 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
           isolatedEntityIdsByModel: isolatedByModel,
           description: `Merged export of ${mergeInputs.length} models from ifc-lite`,
           application: 'ifc-lite',
+          onProgress: (p: ExportProgress) => setExportProgress({
+            phase: p.phase === 'preparing' ? 'Preparing models...'
+              : p.phase === 'entities' ? `Processing entities${p.currentModel ? ` (${p.currentModel})` : ''}...`
+              : 'Assembling file...',
+            percent: p.percent,
+            entitiesProcessed: p.entitiesProcessed,
+            entitiesTotal: p.entitiesTotal,
+            currentModel: p.currentModel,
+          }),
         });
 
+        setExportProgress(null);
+
         const blob = new Blob([result.content], { type: 'text/plain' });
         const url = URL.createObjectURL(blob);
         const a = document.createElement('a');
@@ -328,7 +362,7 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
         document.body.removeChild(a);
         URL.revokeObjectURL(url);
 
-        const msg = `Merged ${result.stats.modelCount} models, ${result.stats.totalEntityCount} entities`;
+        const msg = `Merged ${result.stats.modelCount} models, ${result.stats.totalEntityCount.toLocaleString()} entities`;
         setExportResult({ success: true, message: msg });
         toast.success(msg);
         return;
@@ -431,7 +465,7 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
         const localHidden = visibleOnly ? getLocalHiddenIds(selectedModelId) : undefined;
         const localIsolated = visibleOnly ? getLocalIsolatedIds(selectedModelId) : undefined;
 
-        const result = exporter.export({
+        const result = await exporter.exportAsync({
           schema,
           includeGeometry,
           applyMutations,
@@ -440,8 +474,18 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
           isolatedEntityIds: localIsolated,
           description: `Exported from ifc-lite with ${modifiedCount} modifications`,
           application: 'ifc-lite',
+          onProgress: (p: StepExportProgress) => setExportProgress({
+            phase: p.phase === 'preparing' ? 'Preparing export...'
+              : p.phase === 'entities' ? 'Processing entities...'
+              : 'Assembling file...',
+            percent: p.percent,
+            entitiesProcessed: p.entitiesProcessed,
+            entitiesTotal: p.entitiesTotal,
+          }),
         });
 
+        setExportProgress(null);
+
         const blob = new Blob([result.content], { type: 'text/plain' });
         const url = URL.createObjectURL(blob);
         const a = document.createElement('a');
@@ -488,7 +532,7 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
           </DialogDescription>
         </DialogHeader>
 
-        <div className="grid gap-4 py-4">
+        <div ref={scrollAreaRef} className="grid gap-4 py-4 max-h-[60vh] overflow-y-auto">
           {/* Scope selector (only for STEP schemas with multiple models) */}
           {!isIfc5 && !changesOnly && modelList.length > 1 && (
             <div className="flex items-center gap-4">
@@ -632,6 +676,22 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
             </Alert>
           )}
 
+          {/* Export Progress */}
+          {isExporting && exportProgress && (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between text-sm text-muted-foreground">
+                <span className="flex items-center gap-2">
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  {exportProgress.phase}
+                </span>
+                <span>
+                  {exportProgress.entitiesProcessed.toLocaleString()} / {exportProgress.entitiesTotal.toLocaleString()} entities
+                </span>
+              </div>
+              <Progress value={exportProgress.percent * 100} />
+            </div>
+          )}
+
           {/* Export result */}
           {exportResult && (
             <Alert variant={exportResult.success ? 'default' : 'destructive'}>

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, ShieldCheck } 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;
@@ -34,86 +33,216 @@ const TYPE_CONFIG = {
   perf: { icon: Zap, className: 'text-blue-500' },
 } as const;
 
+function PrivacyBanner() {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div className="pt-2 border-t">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="flex items-center gap-2 w-full rounded-md bg-emerald-500/10 px-2.5 py-1.5 text-left transition-colors hover:bg-emerald-500/15"
+      >
+        <ShieldCheck className="h-3.5 w-3.5 text-emerald-500 shrink-0" />
+        <span className="text-xs font-medium">Your IFC data never leaves your device.</span>
+        {expanded ? (
+          <ChevronDown className="h-3 w-3 ml-auto shrink-0 text-muted-foreground" />
+        ) : (
+          <ChevronRight className="h-3 w-3 ml-auto shrink-0 text-muted-foreground" />
+        )}
+      </button>
+      {expanded && (
+        <div className="mt-1.5 ml-1 space-y-1 text-xs text-muted-foreground">
+          <p>
+            All files are processed locally in the browser with{' '}
+            <a
+              href="https://webassembly.org/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline hover:text-foreground transition-colors"
+            >
+              WebAssembly (WASM)
+            </a>
+            {' '}&ndash; no server upload, near-native speed.
+          </p>
+          <p className="text-[11px] italic">
+            Verify: press <kbd className="px-1 py-0.5 bg-muted rounded border font-mono text-[10px]">F12</kbd> &rarr; Network tab &rarr; no IFC data transmitted.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
 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>
+
+      {/* Privacy & Security */}
+      <PrivacyBanner />
+
+      {/* 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]);
+
+  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 (releases.length === 0) {
+  if (timeline.length === 0) {
     return (
       <div className="text-center py-8 text-sm text-muted-foreground">
         No release history available.
@@ -122,43 +251,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/MainToolbar.tsx

@@ -7,8 +7,6 @@ import {
   FolderOpen,
   Download,
   MousePointer2,
-  Hand,
-  Rotate3d,
   PersonStanding,
   Ruler,
   Scissors,
@@ -71,7 +69,7 @@ import { recordRecentFiles, cacheFileBlobs } from '@/lib/recent-files';
 import { ThemeSwitch } from './ThemeSwitch';
 import { toast } from '@/components/ui/toast';
 
-type Tool = 'select' | 'pan' | 'orbit' | 'walk' | 'measure' | 'section';
+type Tool = 'select' | 'walk' | 'measure' | 'section';
 type WorkspacePanel = 'script' | 'list' | 'bcf' | 'ids' | 'lens';
 
 // #region FIX: Move ToolButton OUTSIDE MainToolbar to prevent recreation on every render
@@ -741,8 +739,6 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
 
       {/* ── Navigation Tools ── */}
       <ToolButton tool="select" icon={MousePointer2} label="Select" shortcut="V" activeTool={activeTool} onToolChange={setActiveTool} />
-      <ToolButton tool="pan" icon={Hand} label="Pan" shortcut="P" activeTool={activeTool} onToolChange={setActiveTool} />
-      <ToolButton tool="orbit" icon={Rotate3d} label="Orbit" shortcut="O" activeTool={activeTool} onToolChange={setActiveTool} />
       <ToolButton tool="walk" icon={PersonStanding} label="Walk Mode" shortcut="C" activeTool={activeTool} onToolChange={setActiveTool} />
 
       <Separator orientation="vertical" className="h-6 mx-1" />