@ifc-lite/viewer 1.19.1 → 1.21.0

package/src/components/viewer/IDSPanel.tsx

@@ -72,6 +72,7 @@ import type {
   IDSRequirementResult,
 } from '@ifc-lite/ids';
 import { cn } from '@/lib/utils';
+import { IDSAuditSummary } from './IDSAuditSummary';
 import { IDSExportDialog } from './IDSExportDialog';
 import type { IDSBCFExportSettings, IDSExportProgress } from './IDSExportDialog';
 import { claimNextDesktopPanelAction, subscribeDesktopPanelActions } from '@/services/desktop-panel-actions';
@@ -452,6 +453,8 @@ export function IDSPanel({ onClose }: IDSPanelProps) {
   const {
     // State
     document,
+    auditReport,
+    auditing,
     report,
     loading,
     progress,
@@ -562,24 +565,43 @@ export function IDSPanel({ onClose }: IDSPanelProps) {
   const renderEmptyState = () => {
     if (document) return null;
 
+    // When parse failed but the auditor still produced issues, surface
+    // them here. This is the most common path for malformed input —
+    // bare "Invalid XML format" tells the user nothing actionable, but
+    // the audit lists the specific structural problems.
+    const hasAuditIssues =
+      auditReport !== null && auditReport.issues.length > 0;
+
     return (
-      <div className="flex flex-col items-center justify-center h-full p-6 text-center">
-        <FileText className="h-12 w-12 text-muted-foreground mb-4" />
-        <h3 className="font-medium text-sm mb-2">No IDS Loaded</h3>
-        <p className="text-xs text-muted-foreground mb-4">
-          Load an IDS (Information Delivery Specification) file to validate your model
-        </p>
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept=".ids,.xml"
-          className="hidden"
-          onChange={handleFileSelect}
-        />
-        <Button onClick={() => { void handleLoadIdsClick(); }}>
-          <Upload className="h-4 w-4 mr-2" />
-          Load IDS File
-        </Button>
+      <div className="flex flex-col h-full p-6">
+        {hasAuditIssues && (
+          <div className="mb-4">
+            <IDSAuditSummary report={auditReport} auditing={auditing} />
+          </div>
+        )}
+
+        <div className="flex flex-col items-center justify-center flex-1 text-center">
+          <FileText className="h-12 w-12 text-muted-foreground mb-4" />
+          <h3 className="font-medium text-sm mb-2">
+            {hasAuditIssues ? 'IDS Document Has Errors' : 'No IDS Loaded'}
+          </h3>
+          <p className="text-xs text-muted-foreground mb-4">
+            {hasAuditIssues
+              ? 'Fix the issues above and try loading again.'
+              : 'Load an IDS (Information Delivery Specification) file to validate your model'}
+          </p>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept=".ids,.xml"
+            className="hidden"
+            onChange={handleFileSelect}
+          />
+          <Button onClick={() => { void handleLoadIdsClick(); }}>
+            <Upload className="h-4 w-4 mr-2" />
+            {hasAuditIssues ? 'Load Different File' : 'Load IDS File'}
+          </Button>
+        </div>
       </div>
     );
   };
@@ -588,9 +610,15 @@ export function IDSPanel({ onClose }: IDSPanelProps) {
   const renderDocumentLoaded = () => {
     if (!document || report) return null;
 
+    // Only the document-level auditor's `error` verdict gates model
+    // validation — warnings still let the user proceed (they're style
+    // hints, not blockers). The button keeps its primary affordance
+    // unless we genuinely can't validate.
+    const auditHasErrors = auditReport?.status === 'error';
+
     return (
-      <div className="p-4">
-        <div className="rounded-lg border p-4 mb-4">
+      <div className="p-4 space-y-3">
+        <div className="rounded-lg border p-4">
           <h3 className="font-medium text-sm mb-1">{document.info.title}</h3>
           {document.info.description && (
             <p className="text-xs text-muted-foreground mb-2">{document.info.description}</p>
@@ -601,14 +629,32 @@ export function IDSPanel({ onClose }: IDSPanelProps) {
           </div>
         </div>
 
-        <Button className="w-full" onClick={runValidation} disabled={loading}>
-          {loading ? (
-            <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-          ) : (
-            <Play className="h-4 w-4 mr-2" />
+        <IDSAuditSummary report={auditReport} auditing={auditing} />
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="block">
+              <Button
+                className="w-full"
+                onClick={runValidation}
+                disabled={loading || auditHasErrors}
+                variant={auditHasErrors ? 'secondary' : 'default'}
+              >
+                {loading ? (
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                ) : (
+                  <Play className="h-4 w-4 mr-2" />
+                )}
+                Run Validation
+              </Button>
+            </span>
+          </TooltipTrigger>
+          {auditHasErrors && (
+            <TooltipContent>
+              Resolve audit errors before validating against a model.
+            </TooltipContent>
           )}
-          Run Validation
-        </Button>
+        </Tooltip>
       </div>
     );
   };
@@ -619,6 +665,14 @@ export function IDSPanel({ onClose }: IDSPanelProps) {
 
     return (
       <>
+        {/* Audit summary stays visible above the validation report so
+            users can still see authoring issues alongside model results. */}
+        {auditReport && auditReport.status !== 'valid' && (
+          <div className="p-3 border-b">
+            <IDSAuditSummary report={auditReport} auditing={false} />
+          </div>
+        )}
+
         {/* Summary Header */}
         <div className="p-3 border-b bg-muted/30">
           <div className="flex items-center gap-2 mb-2">

package/src/components/viewer/MainToolbar.tsx

@@ -29,6 +29,7 @@ import {
   Camera,
   Info,
   Layers,
+  Layers2,
   SquareX,
   Building2,
   Plus,
@@ -51,6 +52,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuCheckboxItem,
+  DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   DropdownMenuSub,
@@ -307,6 +309,12 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   const toggleHoverTooltips = useViewerStore((state) => state.toggleHoverTooltips);
   const typeVisibility = useViewerStore((state) => state.typeVisibility);
   const toggleTypeVisibility = useViewerStore((state) => state.toggleTypeVisibility);
+  // Issue #540: load-time toggle that asks the WASM bridge to merge
+  // Revit-style multilayer walls. We surface this in the Class
+  // Visibility dropdown so users discover it next to the other
+  // "what shows in the scene" controls.
+  const mergeLayers = useViewerStore((state) => state.mergeLayers);
+  const setMergeLayers = useViewerStore((state) => state.setMergeLayers);
   const resetViewerState = useViewerStore((state) => state.resetViewerState);
   const bcfPanelVisible = useViewerStore((state) => state.bcfPanelVisible);
   const setBcfPanelVisible = useViewerStore((state) => state.setBcfPanelVisible);
@@ -426,7 +434,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     // Filter to supported files (IFC, IFCX, GLB)
     const supportedFiles = Array.from(files).filter(
       f => f.name.endsWith('.ifc') || f.name.endsWith('.ifcx') || f.name.endsWith('.glb')
-        || f.name.toLowerCase().endsWith('.las') || f.name.toLowerCase().endsWith('.laz') || f.name.toLowerCase().endsWith('.ply') || f.name.toLowerCase().endsWith('.pcd') || f.name.toLowerCase().endsWith('.e57')
+        || f.name.toLowerCase().endsWith('.las') || f.name.toLowerCase().endsWith('.laz') || f.name.toLowerCase().endsWith('.ply') || f.name.toLowerCase().endsWith('.pcd') || f.name.toLowerCase().endsWith('.e57') || f.name.toLowerCase().endsWith('.pts') || f.name.toLowerCase().endsWith('.xyz')
     );
 
     if (supportedFiles.length === 0) return;
@@ -467,7 +475,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     // Filter to supported files (IFC, IFCX, GLB)
     const supportedFiles = Array.from(files).filter(
       f => f.name.endsWith('.ifc') || f.name.endsWith('.ifcx') || f.name.endsWith('.glb')
-        || f.name.toLowerCase().endsWith('.las') || f.name.toLowerCase().endsWith('.laz') || f.name.toLowerCase().endsWith('.ply') || f.name.toLowerCase().endsWith('.pcd') || f.name.toLowerCase().endsWith('.e57')
+        || f.name.toLowerCase().endsWith('.las') || f.name.toLowerCase().endsWith('.laz') || f.name.toLowerCase().endsWith('.ply') || f.name.toLowerCase().endsWith('.pcd') || f.name.toLowerCase().endsWith('.e57') || f.name.toLowerCase().endsWith('.pts') || f.name.toLowerCase().endsWith('.xyz')
     );
 
     if (supportedFiles.length === 0) return;
@@ -782,7 +790,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
         id="file-input-open"
         ref={fileInputRef}
         type="file"
-        accept=".ifc,.ifcx,.glb,.las,.laz,.ply,.pcd,.e57"
+        accept=".ifc,.ifcx,.glb,.las,.laz,.ply,.pcd,.e57,.pts,.xyz"
         multiple
         onChange={handleFileSelect}
         className="hidden"
@@ -790,7 +798,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
       <input
         ref={addModelInputRef}
         type="file"
-        accept=".ifc,.ifcx,.glb,.las,.laz,.ply,.pcd,.e57"
+        accept=".ifc,.ifcx,.glb,.las,.laz,.ply,.pcd,.e57,.pts,.xyz"
         multiple
         onChange={handleAddModelSelect}
         className="hidden"
@@ -1157,14 +1165,35 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
         <Tooltip>
           <TooltipTrigger asChild>
             <DropdownMenuTrigger asChild>
-              <Button variant="ghost" size="icon-sm" disabled={!geometryResult && models.size === 0}>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                // Stay enabled even with no model loaded — the dropdown
+                // also exposes load-time settings (Merge Multilayer
+                // Walls) that the user should be able to set BEFORE
+                // opening a file. Runtime items inside self-gate via
+                // typeGeometryExists.
+                aria-label={mergeLayers ? 'Class Visibility (Merge Multilayer Walls is on)' : 'Class Visibility'}
+                className="relative"
+              >
                 <Layers className="h-4 w-4" />
+                {mergeLayers && (
+                  // Tiny accent dot announcing that a non-default load
+                  // setting is active. Decorative — semantics live on
+                  // the button's aria-label and the tooltip.
+                  <span
+                    aria-hidden="true"
+                    className="absolute top-1 right-1 h-1.5 w-1.5 rounded-full bg-primary ring-1 ring-background"
+                  />
+                )}
               </Button>
             </DropdownMenuTrigger>
           </TooltipTrigger>
-          <TooltipContent>Class Visibility</TooltipContent>
+          <TooltipContent>
+            {mergeLayers ? 'Class Visibility · Merge Multilayer Walls is on' : 'Class Visibility'}
+          </TooltipContent>
         </Tooltip>
-        <DropdownMenuContent>
+        <DropdownMenuContent className="w-72">
           {typeGeometryExists.spaces && (
             <DropdownMenuCheckboxItem
               checked={typeVisibility.spaces}
@@ -1192,6 +1221,30 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
               Show Site
             </DropdownMenuCheckboxItem>
           )}
+
+          {/* Load-time toggles live below the runtime visibility
+              switches — they apply on next model open rather than
+              affecting the current scene. The subheader makes that
+              boundary visible at a glance. */}
+          <DropdownMenuSeparator />
+          <DropdownMenuLabel className="px-2 pt-1 pb-0.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+            Load Settings
+          </DropdownMenuLabel>
+          <DropdownMenuCheckboxItem
+            checked={mergeLayers}
+            onCheckedChange={(next) => setMergeLayers(next === true)}
+            // Use items-start so the checkmark and icon line up with
+            // the primary label while the description wraps below.
+            className="items-start gap-2 py-2"
+          >
+            <Layers2 className="h-4 w-4 mr-2 mt-0.5 shrink-0 text-primary" />
+            <div className="flex flex-col gap-0.5 min-w-0">
+              <span className="text-sm font-medium leading-tight">Merge Multilayer Walls</span>
+              <span className="text-[11px] leading-tight text-muted-foreground">
+                Render walls as 1 solid · Applies on reload
+              </span>
+            </div>
+          </DropdownMenuCheckboxItem>
         </DropdownMenuContent>
       </DropdownMenu>
 

package/src/components/viewer/MergeLayersBanner.tsx

@@ -0,0 +1,108 @@
+/* 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/. */
+
+/**
+ * Reload-to-apply banner for the "Merge Multilayer Walls" load-time
+ * toggle (issue #540). The user flips the toggle in the Class
+ * Visibility dropdown; when a model is already loaded, the UI sets
+ * `mergeLayersPendingReload` and we surface this non-modal banner
+ * above the canvas asking the user to reload.
+ *
+ * Design note: this codebase has no "reload current model" function
+ * — `useIfcLoader.loadFile` is one-shot and does not retain the
+ * source File / NativeFileHandle. The pragmatic approach here is to
+ * call `window.location.reload()` for the Reload button, which is
+ * exactly what the wording promises ("Reload model to apply") and
+ * works on both web and the Tauri shell (which keeps its window).
+ * If a true in-place reload lands later, swap the handler — the
+ * banner contract stays the same.
+ */
+import { useCallback } from 'react';
+import { Layers2, RefreshCw, X } from 'lucide-react';
+import { useViewerStore } from '@/store';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+export interface MergeLayersBannerProps {
+  /**
+   * When set, this overrides the default `window.location.reload()`
+   * fallback. Once a true "reload current model in place" path lands,
+   * the caller can pass it in here without changing the banner's
+   * visual contract.
+   */
+  onReload?: () => void;
+}
+
+export function MergeLayersBanner({ onReload }: MergeLayersBannerProps) {
+  const pending = useViewerStore((s) => s.mergeLayersPendingReload);
+  const merging = useViewerStore((s) => s.mergeLayers);
+  const dismiss = useViewerStore((s) => s.clearMergeLayersPendingReload);
+
+  const handleReload = useCallback(() => {
+    if (onReload) {
+      onReload();
+      return;
+    }
+    // Full-page reload is the only path we can guarantee works: the
+    // viewer doesn't retain the source File/handle once loading
+    // completes, so we can't re-run loadFile with the original input.
+    // The toggle is already persisted in localStorage so it will pick
+    // up the new value on the next boot.
+    if (typeof window !== 'undefined') {
+      window.location.reload();
+    }
+  }, [onReload]);
+
+  if (!pending) return null;
+
+  return (
+    // Centred non-modal overlay anchored to the top of the canvas.
+    // pointer-events-none on the wrapper lets clicks pass through
+    // unless they land on the inner card, so the underlying 3D
+    // viewport stays interactive.
+    <div className="pointer-events-none absolute top-3 left-1/2 -translate-x-1/2 z-40 max-w-[min(640px,calc(100%-1.5rem))] w-fit">
+      <div
+        role="status"
+        aria-live="polite"
+        className={cn(
+          'pointer-events-auto flex items-center gap-3 border border-primary/40 bg-background/95 backdrop-blur',
+          'px-3 py-2 shadow-[0_8px_24px_-12px_rgba(0,0,0,0.45)] rounded-md',
+          'animate-in slide-in-from-top-2 fade-in-0 duration-200',
+        )}
+      >
+        <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+          <Layers2 className="h-4 w-4" />
+        </div>
+        <div className="flex flex-col leading-tight min-w-0">
+          <span className="text-xs font-semibold text-foreground">
+            Merge Multilayer Walls {merging ? 'enabled' : 'disabled'}
+          </span>
+          <span className="text-[11px] text-muted-foreground truncate">
+            Reload model to apply the new setting.
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5 ml-2">
+          <Button
+            size="sm"
+            variant="default"
+            className="h-7 px-2.5 gap-1.5 text-[11px] font-semibold uppercase tracking-wider"
+            onClick={handleReload}
+          >
+            <RefreshCw className="h-3.5 w-3.5" />
+            Reload
+          </Button>
+          <Button
+            size="icon-sm"
+            variant="ghost"
+            className="h-7 w-7"
+            onClick={dismiss}
+            aria-label="Dismiss reload reminder"
+          >
+            <X className="h-3.5 w-3.5" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}