@ifc-lite/viewer 1.17.3 → 1.17.6

package/src/components/viewer/DesktopEntitlementBanner.tsx

@@ -0,0 +1,74 @@
+/* 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/. */
+
+import { AlertTriangle, Clock3, WifiOff } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useViewerStore } from '@/store';
+import { buildDesktopUpgradeUrl, hasDesktopPro } from '@/lib/desktop-product';
+import { navigateToPath } from '@/services/app-navigation';
+
+function formatDate(timestamp: number | null): string | null {
+  if (!timestamp || !Number.isFinite(timestamp)) {
+    return null;
+  }
+  return new Date(timestamp).toLocaleDateString();
+}
+
+export function DesktopEntitlementBanner() {
+  const entitlement = useViewerStore((s) => s.desktopEntitlement);
+
+  if (entitlement.status === 'active' || entitlement.status === 'anonymous') {
+    return null;
+  }
+
+  if (entitlement.status === 'trial') {
+    return (
+      <div className="flex items-center justify-between gap-3 border-b bg-amber-50 px-4 py-2 text-sm text-amber-900 dark:bg-amber-950/60 dark:text-amber-200">
+        <div className="flex items-center gap-2 min-w-0">
+          <Clock3 className="h-4 w-4 shrink-0" />
+          <span className="truncate">
+            Desktop Pro trial active{formatDate(entitlement.trialEndsAt) ? ` until ${formatDate(entitlement.trialEndsAt)}` : ''}.
+          </span>
+        </div>
+        <Button variant="outline" size="sm" onClick={() => navigateToPath('/settings')}>
+          View Plan
+        </Button>
+      </div>
+    );
+  }
+
+  if (entitlement.status === 'grace_offline') {
+    return (
+      <div className="flex items-center justify-between gap-3 border-b bg-blue-50 px-4 py-2 text-sm text-blue-900 dark:bg-blue-950/60 dark:text-blue-200">
+        <div className="flex items-center gap-2 min-w-0">
+          <WifiOff className="h-4 w-4 shrink-0" />
+          <span className="truncate">
+            Offline grace active{formatDate(entitlement.graceUntil) ? ` until ${formatDate(entitlement.graceUntil)}` : ''}. Pro features remain available from the last validated plan.
+          </span>
+        </div>
+        <Button variant="outline" size="sm" onClick={() => navigateToPath('/settings')}>
+          View Plan
+        </Button>
+      </div>
+    );
+  }
+
+  if (!hasDesktopPro(entitlement)) {
+    return (
+      <div className="flex items-center justify-between gap-3 border-b bg-muted/60 px-4 py-2 text-sm text-foreground">
+        <div className="flex items-center gap-2 min-w-0">
+          <AlertTriangle className="h-4 w-4 shrink-0 text-amber-600 dark:text-amber-400" />
+          <span className="truncate">
+            Desktop Pro is not active. Core viewing stays available; advanced features are locked.
+          </span>
+        </div>
+        <Button variant="default" size="sm" onClick={() => navigateToPath(buildDesktopUpgradeUrl())}>
+          Upgrade
+        </Button>
+      </div>
+    );
+  }
+
+  return null;
+}

package/src/components/viewer/ExportChangesButton.tsx

@@ -18,6 +18,7 @@ import { StepExporter } from '@ifc-lite/export';
 import { MutablePropertyView } from '@ifc-lite/mutations';
 import type { IfcDataStore } from '@ifc-lite/parser';
 import { toast } from '@/components/ui/toast';
+import { ensureModelExportReady } from '@/services/desktop-export';
 
 interface ExportChangesButtonProps {
   /** Optional custom class name */
@@ -124,6 +125,10 @@ export function ExportChangesButton({ className }: ExportChangesButtonProps) {
 
     try {
       const mutationView = getMutationView(modelInfo.id);
+      const exportDataStore = await ensureModelExportReady(modelInfo.id);
+      if (!exportDataStore) {
+        throw new Error('Model data is unavailable for export');
+      }
 
       // Determine schema version
       const schemaVersion = modelInfo.schemaVersion || 'IFC4';
@@ -131,7 +136,7 @@ export function ExportChangesButton({ className }: ExportChangesButtonProps) {
                    : schemaVersion.includes('4X3') ? 'IFC4X3'
                    : 'IFC4';
 
-      const exporter = new StepExporter(modelInfo.ifcDataStore, mutationView || undefined);
+      const exporter = new StepExporter(exportDataStore, mutationView || undefined);
       const georefMutations = useViewerStore.getState().georefMutations?.get(modelInfo.id) ?? undefined;
       const result = exporter.export({
         schema: schema as 'IFC2X3' | 'IFC4' | 'IFC4X3',

package/src/components/viewer/ExportDialog.tsx

@@ -52,6 +52,7 @@ import { Progress } from '@/components/ui/progress';
 import { useViewerStore } from '@/store';
 import { configureMutationView } from '@/utils/configureMutationView';
 import { toast } from '@/components/ui/toast';
+import { ensureModelExportReady } from '@/services/desktop-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';
@@ -320,11 +321,21 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
     try {
       // Handle merged export of all models (STEP only, not IFC5)
       if (!isIfc5 && exportScope === 'merged' && !changesOnly) {
-        const mergeInputs: MergeModelInput[] = Array.from(models.values()).map((m) => ({
-          id: m.id,
-          name: m.name,
-          dataStore: m.ifcDataStore,
-        }));
+        const hydratedModels = await Promise.all(Array.from(models.values()).map(async (model) => ({
+          model,
+          dataStore: await ensureModelExportReady(model.id),
+        })));
+        const mergeInputs: MergeModelInput[] = [];
+        for (const entry of hydratedModels) {
+          if (!entry.dataStore) {
+            continue;
+          }
+          mergeInputs.push({
+            id: entry.model.id,
+            name: entry.model.name,
+            dataStore: entry.dataStore,
+          });
+        }
 
         const mergedExporter = new MergedExporter(mergeInputs);
 
@@ -467,7 +478,12 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
 
       // ── Pre-IFC5 full export → STEP ──────────────────────────────────
       } else {
-        const exporter = new StepExporter(selectedModel.ifcDataStore, mutationView || undefined);
+        const exportDataStore = await ensureModelExportReady(selectedModelId);
+        if (!exportDataStore) {
+          throw new Error('Model data is unavailable for export');
+        }
+
+        const exporter = new StepExporter(exportDataStore, mutationView || undefined);
 
         const localHidden = visibleOnly ? getLocalHiddenIds(selectedModelId) : undefined;
         const localIsolated = visibleOnly ? getLocalIsolatedIds(selectedModelId) : undefined;

package/src/components/viewer/HierarchyPanel.tsx

@@ -18,6 +18,7 @@ import { cn } from '@/lib/utils';
 import { useViewerStore, resolveEntityRef } from '@/store';
 import { toGlobalIdFromModels } from '@/store/globalId';
 import { useIfc } from '@/hooks/useIfc';
+import { getNativeMetadataChildren, searchNativeMetadataEntities } from '@/services/desktop-native-metadata';
 
 import type { TreeNode } from './hierarchy/types';
 import { isSpatialContainer } from './hierarchy/types';
@@ -36,6 +37,7 @@ export function HierarchyPanel() {
     removeModel,
   } = useIfc();
   const selectedEntityId = useViewerStore((s) => s.selectedEntityId);
+  const selectedEntity = useViewerStore((s) => s.selectedEntity);
   const setSelectedEntityId = useViewerStore((s) => s.setSelectedEntityId);
   const setSelectedEntityIds = useViewerStore((s) => s.setSelectedEntityIds);
   const setSelectedEntity = useViewerStore((s) => s.setSelectedEntity);
@@ -89,6 +91,33 @@ export function HierarchyPanel() {
 
   // Check if we have multiple models loaded
   const isMultiModel = models.size > 1;
+  const nativeLazyModel = useMemo(() => {
+    if (models.size !== 1) return null;
+    const [, model] = Array.from(models.entries())[0];
+    if (!model.nativeMetadata) return null;
+    return model.ifcDataStore?.spatialHierarchy ? null : model;
+  }, [models]);
+  const [nativeChildren, setNativeChildren] = useState<Record<number, Array<{
+    expressId: number;
+    type: string;
+    name: string;
+    globalId?: string | null;
+    kind: 'spatial' | 'element';
+    hasChildren: boolean;
+    elementCount?: number;
+    elevation?: number | null;
+  }>>>({});
+  const [nativeExpanded, setNativeExpanded] = useState<Set<number>>(new Set());
+  const [nativeSearchResults, setNativeSearchResults] = useState<Array<{
+    expressId: number;
+    type: string;
+    name: string;
+    globalId?: string | null;
+    kind: 'spatial' | 'element';
+    hasChildren: boolean;
+    elementCount?: number;
+    elevation?: number | null;
+  }>>([]);
 
   // Use extracted hook for tree data management
   const {
@@ -166,6 +195,29 @@ export function HierarchyPanel() {
     };
   }, [isDragging]);
 
+  useEffect(() => {
+    if (!nativeLazyModel?.nativeMetadata) {
+      setNativeSearchResults([]);
+      return;
+    }
+    const query = searchQuery.trim();
+    if (!query) {
+      setNativeSearchResults([]);
+      return;
+    }
+    let cancelled = false;
+    void searchNativeMetadataEntities(nativeLazyModel.nativeMetadata.cacheKey, query, 200)
+      .then((results) => {
+        if (!cancelled) setNativeSearchResults(results);
+      })
+      .catch(() => {
+        if (!cancelled) setNativeSearchResults([]);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [nativeLazyModel, searchQuery]);
+
   // Toggle visibility for a node
   const handleVisibilityToggle = useCallback((node: TreeNode) => {
     const elements = getNodeElements(node);
@@ -452,6 +504,150 @@ export function HierarchyPanel() {
     );
   }
 
+  const singleModel = models.size === 1 ? Array.from(models.values())[0] : null;
+  if (!ifcDataStore && singleModel && !nativeLazyModel) {
+    const metadataState = singleModel.metadataLoadState;
+    const message = metadataState === 'error'
+      ? (singleModel.loadError || 'Native metadata failed to load.')
+      : metadataState === 'bootstrapping'
+        ? 'Native spatial metadata is loading.'
+        : 'Spatial metadata will appear once bootstrap completes.';
+    return (
+      <div className="h-full flex flex-col border-r-2 border-zinc-200 dark:border-zinc-800 bg-white dark:bg-black">
+        <div className="p-3 border-b-2 border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-black">
+          <h2 className="font-bold uppercase tracking-wider text-xs text-zinc-900 dark:text-zinc-100">Hierarchy</h2>
+        </div>
+        <div className="flex-1 flex items-center justify-center p-6 text-center">
+          <div className="max-w-[220px] text-xs text-zinc-500 dark:text-zinc-400">
+            {message}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (nativeLazyModel?.nativeMetadata) {
+    const nativeMetadata = nativeLazyModel.nativeMetadata;
+    const nativeSelectedGlobalId =
+      selectedEntity?.modelId === nativeLazyModel.id
+        ? toGlobalId(nativeLazyModel.id, selectedEntity.expressId)
+        : null;
+
+    const selectNativeEntity = (expressId: number) => {
+      const globalId = toGlobalId(nativeLazyModel.id, expressId);
+      setSelectedEntityIds([]);
+      setSelectedEntityId(globalId);
+      setSelectedEntity({
+        modelId: nativeLazyModel.id,
+        expressId,
+      });
+      setActiveModel(nativeLazyModel.id);
+    };
+
+    const toggleNativeNode = async (expressId: number) => {
+      setNativeExpanded((prev) => {
+        const next = new Set(prev);
+        if (next.has(expressId)) {
+          next.delete(expressId);
+        } else {
+          next.add(expressId);
+        }
+        return next;
+      });
+      if (nativeChildren[expressId]) return;
+      try {
+        const children = await getNativeMetadataChildren(nativeMetadata.cacheKey, expressId);
+        setNativeChildren((prev) => ({ ...prev, [expressId]: children }));
+      } catch {
+        setNativeChildren((prev) => ({ ...prev, [expressId]: [] }));
+      }
+    };
+
+    const renderNativeSummary = (
+      summary: {
+        expressId: number;
+        type: string;
+        name: string;
+        kind: 'spatial' | 'element';
+        hasChildren: boolean;
+        elementCount?: number;
+      },
+      depth: number,
+    ): JSX.Element => {
+      const expanded = nativeExpanded.has(summary.expressId);
+      return (
+        <div key={`${summary.kind}-${summary.expressId}`}>
+          <button
+            type="button"
+            className={cn(
+              'w-full flex items-center gap-2 px-3 py-2 text-left border-b border-zinc-100 dark:border-zinc-900 hover:bg-zinc-50 dark:hover:bg-zinc-950',
+              nativeSelectedGlobalId === toGlobalId(nativeLazyModel.id, summary.expressId) && 'bg-primary/10 text-primary'
+            )}
+            style={{ paddingLeft: `${12 + depth * 16}px` }}
+            onClick={() => selectNativeEntity(summary.expressId)}
+          >
+            {summary.hasChildren ? (
+              <span
+                className="w-4 text-center text-xs text-zinc-500"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  void toggleNativeNode(summary.expressId);
+                }}
+              >
+                {expanded ? 'v' : '>'}
+              </span>
+            ) : (
+              <span className="w-4" />
+            )}
+            <span className="truncate flex-1 text-sm">{summary.name || `${summary.type} #${summary.expressId}`}</span>
+            <span className="text-[10px] uppercase tracking-wide text-zinc-500">{summary.type}</span>
+            {typeof summary.elementCount === 'number' && summary.elementCount > 0 && (
+              <span className="text-[10px] text-zinc-400">{summary.elementCount}</span>
+            )}
+          </button>
+          {expanded && (nativeChildren[summary.expressId] ?? []).map((child) => renderNativeSummary(child, depth + 1))}
+        </div>
+      );
+    };
+
+    return (
+      <div className="h-full flex flex-col border-r-2 border-zinc-200 dark:border-zinc-800 bg-white dark:bg-black">
+        <div className="p-3 border-b-2 border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-black">
+          <Input
+            placeholder="Search..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            leftIcon={<Search className="h-4 w-4" />}
+            className="h-9 text-sm rounded-none border-2 border-zinc-200 dark:border-zinc-800 focus:border-primary focus:ring-0 bg-white dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-600"
+          />
+        </div>
+        <SectionHeader
+          icon={Building2}
+          title={searchQuery.trim() ? 'Search Results' : 'Hierarchy'}
+          count={searchQuery.trim() ? nativeSearchResults.length : 1}
+        />
+        <div className="flex-1 overflow-auto scrollbar-thin bg-white dark:bg-black">
+          {searchQuery.trim()
+            ? nativeSearchResults.map((result) => renderNativeSummary(result, 0))
+            : nativeMetadata.spatialTree
+              ? renderNativeSummary(nativeMetadata.spatialTree, 0)
+              : (
+                <div className="p-4 text-xs text-zinc-500">
+                  {nativeLazyModel.metadataLoadState === 'error'
+                    ? (nativeLazyModel.loadError || 'Native spatial metadata is unavailable for this model.')
+                    : nativeLazyModel.metadataLoadState === 'bootstrapping'
+                      ? 'Native spatial metadata is still loading.'
+                      : 'Native spatial metadata tree is unavailable for this model.'}
+                </div>
+              )}
+        </div>
+        <div className="p-2 border-t-2 border-zinc-200 dark:border-zinc-800 text-[10px] uppercase tracking-wide text-zinc-500 dark:text-zinc-500 text-center bg-zinc-50 dark:bg-black font-mono">
+          On-demand desktop metadata
+        </div>
+      </div>
+    );
+  }
+
   // Helper to render a node via the extracted HierarchyNode component
   const renderNode = (node: TreeNode, virtualRow: { index: number; size: number; start: number }) => {
     const { isSelected, nodeHidden, modelVisible } = computeNodeState(node);

package/src/components/viewer/IDSPanel.tsx

@@ -15,7 +15,7 @@
  * - Multi-language support (EN/DE/FR)
  */
 
-import React, { useCallback, useState, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useState, useMemo, useRef } from 'react';
 import {
   X,
   Upload,
@@ -65,6 +65,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { useIDS } from '@/hooks/useIDS';
+import { openGenericFileDialog } from '@/services/file-dialog';
 import type {
   IDSSpecificationResult,
   IDSEntityResult,
@@ -73,6 +74,7 @@ import type {
 import { cn } from '@/lib/utils';
 import { IDSExportDialog } from './IDSExportDialog';
 import type { IDSBCFExportSettings, IDSExportProgress } from './IDSExportDialog';
+import { claimNextDesktopPanelAction, subscribeDesktopPanelActions } from '@/services/desktop-panel-actions';
 
 // ============================================================================
 // Types
@@ -485,6 +487,53 @@ export function IDSPanel({ onClose }: IDSPanelProps) {
     e.target.value = '';
   }, [loadIDSFile]);
 
+  const loadIdsFromDialog = useCallback(async (): Promise<boolean> => {
+    const file = await openGenericFileDialog({
+      title: 'Open IDS File',
+      filters: [
+        { name: 'IDS Files', extensions: ['ids', 'xml'] },
+        { name: 'All Files', extensions: ['*'] },
+      ],
+    });
+    if (file) {
+      await loadIDSFile(file);
+      return true;
+    }
+    return false;
+  }, [loadIDSFile]);
+
+  const handleLoadIdsClick = useCallback(async () => {
+    const loaded = await loadIdsFromDialog();
+    if (loaded) {
+      return;
+    }
+    fileInputRef.current?.click();
+  }, [loadIdsFromDialog]);
+
+  const handleDesktopRunValidation = useCallback(async () => {
+    if (!document) {
+      const loaded = await loadIdsFromDialog();
+      if (!loaded) {
+        return;
+      }
+    }
+    await runValidation();
+  }, [document, loadIdsFromDialog, runValidation]);
+
+  useEffect(() => {
+    const drainDesktopActions = () => {
+      if (claimNextDesktopPanelAction('ids-open')) {
+        void loadIdsFromDialog();
+      }
+      if (claimNextDesktopPanelAction('ids-run-validation')) {
+        void handleDesktopRunValidation();
+      }
+    };
+
+    drainDesktopActions();
+    return subscribeDesktopPanelActions(drainDesktopActions);
+  }, [handleDesktopRunValidation, loadIdsFromDialog]);
+
   // Handle entity click
   const handleEntityClick = useCallback((modelId: string, expressId: number) => {
     selectEntity(modelId, expressId);
@@ -527,7 +576,7 @@ export function IDSPanel({ onClose }: IDSPanelProps) {
           className="hidden"
           onChange={handleFileSelect}
         />
-        <Button onClick={() => fileInputRef.current?.click()}>
+        <Button onClick={() => { void handleLoadIdsClick(); }}>
           <Upload className="h-4 w-4 mr-2" />
           Load IDS File
         </Button>
@@ -707,7 +756,7 @@ export function IDSPanel({ onClose }: IDSPanelProps) {
                     variant="ghost"
                     size="sm"
                     className="h-7 w-7 p-0"
-                    onClick={() => fileInputRef.current?.click()}
+                    onClick={() => { void handleLoadIdsClick(); }}
                   >
                     <Upload className="h-3 w-3" />
                   </Button>

package/src/components/viewer/KeyboardShortcutsDialog.tsx

@@ -75,7 +75,7 @@ function PrivacyBanner() {
 
 function AboutTab() {
   const [showPackages, setShowPackages] = useState(false);
-  const packageVersions = __PACKAGE_VERSIONS__;
+  const packageVersions = typeof __PACKAGE_VERSIONS__ !== 'undefined' ? __PACKAGE_VERSIONS__ : [];
 
   return (
     <div className="space-y-3">