@ifc-lite/viewer 1.14.4 → 1.16.0

package/src/components/viewer/HierarchyPanel.tsx

@@ -2,7 +2,7 @@
  * 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 { useState, useCallback, useRef, useEffect } from 'react';
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import {
   Search,
@@ -46,6 +46,12 @@ export function HierarchyPanel() {
   const setStoreysSelection = useViewerStore((s) => s.setStoreysSelection);
   const clearStoreySelection = useViewerStore((s) => s.clearStoreySelection);
   const isolateEntities = useViewerStore((s) => s.isolateEntities);
+  const isolatedEntities = useViewerStore((s) => s.isolatedEntities);
+  const clearIsolation = useViewerStore((s) => s.clearIsolation);
+  const classFilter = useViewerStore((s) => s.classFilter);
+  const setClassFilter = useViewerStore((s) => s.setClassFilter);
+  const clearClassFilter = useViewerStore((s) => s.clearClassFilter);
+  const clearAllFilters = useViewerStore((s) => s.clearAllFilters);
   const setHierarchyBasketSelection = useViewerStore((s) => s.setHierarchyBasketSelection);
 
   const hiddenEntities = useViewerStore((s) => s.hiddenEntities);
@@ -54,6 +60,26 @@ export function HierarchyPanel() {
   const toggleEntityVisibility = useViewerStore((s) => s.toggleEntityVisibility);
   const clearSelection = useViewerStore((s) => s.clearSelection);
 
+  // Derive label for type isolation (from Type tab) by checking mesh ifcType
+  const typeIsolationLabel = useMemo(() => {
+    if (!isolatedEntities || isolatedEntities.size === 0) return null;
+    const sampleId = isolatedEntities.values().next().value!;
+    for (const [, model] of models) {
+      const gr = model.geometryResult;
+      if (!gr?.meshes) continue;
+      const offset = model.idOffset ?? 0;
+      const mesh = gr.meshes.find((m: { expressId: number }) => m.expressId + offset === sampleId);
+      if (mesh?.ifcType) return mesh.ifcType;
+    }
+    if (geometryResult?.meshes) {
+      const mesh = geometryResult.meshes.find((m: { expressId: number }) => m.expressId === sampleId);
+      if (mesh?.ifcType) return mesh.ifcType;
+    }
+    return `${isolatedEntities.size} elements`;
+  }, [isolatedEntities, models, geometryResult]);
+
+  const hasActiveFilters = selectedStoreys.size > 0 || isolatedEntities !== null || classFilter !== null;
+
   // Resizable panel split (percentage for storeys section, 0.5 = 50%)
   const [splitRatio, setSplitRatio] = useState(0.5);
   const [isDragging, setIsDragging] = useState(false);
@@ -198,15 +224,20 @@ export function HierarchyPanel() {
       }]);
     }
 
-    // Type group nodes - click to isolate entities, expand via chevron only
+    // Type group nodes - click to filter/isolate entities, expand via chevron only
     if (node.type === 'type-group') {
       const elements = getNodeElements(node);
       if (elements.length > 0) {
-        // Clear multi-selection highlight — isolate shows the class members,
-        // but we don't want every element highlighted/selected
+        // Clear multi-selection highlight
         setSelectedEntityIds([]);
         setSelectedEntity(resolveEntityRef(elements[0]));
-        isolateEntities(elements);
+        if (groupingMode === 'type') {
+          // Class tab → class filter (combinable with storey + type isolation)
+          setClassFilter(elements, node.ifcType || node.name);
+        } else {
+          // Type tab → type isolation (combinable with storey + class filter)
+          isolateEntities(elements);
+        }
       }
       return;
     }
@@ -357,7 +388,7 @@ export function HierarchyPanel() {
         setSelectedEntity(resolveEntityRef(globalId));
       }
     }
-  }, [selectedStoreys, setStoreysSelection, clearStoreySelection, setSelectedEntityId, setSelectedEntityIds, setSelectedEntity, setSelectedEntities, setActiveModel, toggleExpand, unifiedStoreys, models, isolateEntities, getNodeElements, setHierarchyBasketSelection, toGlobalId]);
+  }, [selectedStoreys, setStoreysSelection, clearStoreySelection, setSelectedEntityId, setSelectedEntityIds, setSelectedEntity, setSelectedEntities, setActiveModel, toggleExpand, unifiedStoreys, models, isolateEntities, getNodeElements, setHierarchyBasketSelection, toGlobalId, groupingMode, setClassFilter]);
 
   // Compute selection and visibility state for a node
   const computeNodeState = useCallback((node: TreeNode): { isSelected: boolean; nodeHidden: boolean; modelVisible?: boolean } => {
@@ -551,21 +582,44 @@ export function HierarchyPanel() {
         </div>
 
         {/* Footer status */}
-        {selectedStoreys.size > 0 ? (
+        {hasActiveFilters ? (
           <div className="p-2 border-t-2 border-zinc-200 dark:border-zinc-800 bg-primary text-white dark:bg-primary">
-            <div className="flex items-center justify-between text-xs font-medium">
-              <span className="uppercase tracking-wide">
-                {selectedStoreys.size} {selectedStoreys.size === 1 ? 'STOREY' : 'STOREYS'} FILTERED
-              </span>
-              <div className="flex items-center gap-2">
+            <div className="flex items-center justify-between text-xs font-medium gap-2">
+              <div className="flex items-center gap-1.5 flex-wrap min-w-0">
+                {selectedStoreys.size > 0 && (
+                  <span className="inline-flex items-center gap-1 bg-white/15 rounded px-1.5 py-0.5 text-[10px] uppercase tracking-wide">
+                    {selectedStoreys.size} {selectedStoreys.size === 1 ? 'Storey' : 'Storeys'}
+                    <button onClick={clearStoreySelection} className="ml-0.5 opacity-60 hover:opacity-100 text-xs leading-none" aria-label="Clear storey filter">&times;</button>
+                  </span>
+                )}
+                {classFilter !== null && (
+                  <>
+                    {selectedStoreys.size > 0 && <span className="text-[10px] opacity-50">+</span>}
+                    <span className="inline-flex items-center gap-1 bg-white/15 rounded px-1.5 py-0.5 text-[10px] uppercase tracking-wide">
+                      {classFilter.label}
+                      <button onClick={clearClassFilter} className="ml-0.5 opacity-60 hover:opacity-100 text-xs leading-none" aria-label="Clear class filter">&times;</button>
+                    </span>
+                  </>
+                )}
+                {isolatedEntities !== null && (
+                  <>
+                    {(selectedStoreys.size > 0 || classFilter !== null) && <span className="text-[10px] opacity-50">+</span>}
+                    <span className="inline-flex items-center gap-1 bg-white/15 rounded px-1.5 py-0.5 text-[10px] uppercase tracking-wide">
+                      {typeIsolationLabel}
+                      <button onClick={clearIsolation} className="ml-0.5 opacity-60 hover:opacity-100 text-xs leading-none" aria-label="Clear type filter">&times;</button>
+                    </span>
+                  </>
+                )}
+              </div>
+              <div className="flex items-center gap-2 shrink-0">
                 <span className="opacity-70 text-[10px] font-mono">ESC</span>
                 <Button
                   variant="ghost"
                   size="sm"
                   className="h-6 text-[10px] uppercase border border-white/20 hover:bg-white/20 hover:text-white rounded-none px-2"
-                  onClick={clearStoreySelection}
+                  onClick={() => { clearStoreySelection(); clearAllFilters(); }}
                 >
-                  Clear
+                  Clear all
                 </Button>
               </div>
             </div>
@@ -614,21 +668,44 @@ export function HierarchyPanel() {
       </div>
 
       {/* Footer status */}
-      {selectedStoreys.size > 0 ? (
+      {hasActiveFilters ? (
         <div className="p-2 border-t-2 border-zinc-200 dark:border-zinc-800 bg-primary text-white dark:bg-primary">
-          <div className="flex items-center justify-between text-xs font-medium">
-            <span className="uppercase tracking-wide">
-              {selectedStoreys.size} {selectedStoreys.size === 1 ? 'STOREY' : 'STOREYS'} FILTERED
-            </span>
-            <div className="flex items-center gap-2">
+          <div className="flex items-center justify-between text-xs font-medium gap-2">
+            <div className="flex items-center gap-1.5 flex-wrap min-w-0">
+              {selectedStoreys.size > 0 && (
+                <span className="inline-flex items-center gap-1 bg-white/15 rounded px-1.5 py-0.5 text-[10px] uppercase tracking-wide">
+                  {selectedStoreys.size} {selectedStoreys.size === 1 ? 'Storey' : 'Storeys'}
+                  <button onClick={clearStoreySelection} className="ml-0.5 opacity-60 hover:opacity-100 text-xs leading-none" aria-label="Clear storey filter">&times;</button>
+                </span>
+              )}
+              {classFilter !== null && (
+                <>
+                  {selectedStoreys.size > 0 && <span className="text-[10px] opacity-50">+</span>}
+                  <span className="inline-flex items-center gap-1 bg-white/15 rounded px-1.5 py-0.5 text-[10px] uppercase tracking-wide">
+                    {classFilter.label}
+                    <button onClick={clearClassFilter} className="ml-0.5 opacity-60 hover:opacity-100 text-xs leading-none" aria-label="Clear class filter">&times;</button>
+                  </span>
+                </>
+              )}
+              {isolatedEntities !== null && (
+                <>
+                  {(selectedStoreys.size > 0 || classFilter !== null) && <span className="text-[10px] opacity-50">+</span>}
+                  <span className="inline-flex items-center gap-1 bg-white/15 rounded px-1.5 py-0.5 text-[10px] uppercase tracking-wide">
+                    {typeIsolationLabel}
+                    <button onClick={clearIsolation} className="ml-0.5 opacity-60 hover:opacity-100 text-xs leading-none" aria-label="Clear type filter">&times;</button>
+                  </span>
+                </>
+              )}
+            </div>
+            <div className="flex items-center gap-2 shrink-0">
               <span className="opacity-70 text-[10px] font-mono">ESC</span>
               <Button
                 variant="ghost"
                 size="sm"
                 className="h-6 text-[10px] uppercase border border-white/20 hover:bg-white/20 hover:text-white rounded-none px-2"
-                onClick={clearStoreySelection}
+                onClick={() => { clearStoreySelection(); clearAllFilters(); }}
               >
-                Clear
+                Clear all
               </Button>
             </div>
           </div>

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/ViewportContainer.tsx

@@ -9,6 +9,7 @@ import { ToolOverlays } from './ToolOverlays';
 import { Section2DPanel } from './Section2DPanel';
 import { BasketPresentationDock } from './BasketPresentationDock';
 import { useViewerStore } from '@/store';
+import { collectIfcBuildingStoreyElementsWithIfcSpace } from '@/store/basketVisibleSet';
 import { useIfc } from '@/hooks/useIfc';
 import { useWebGPU } from '@/hooks/useWebGPU';
 import { Upload, MousePointer, Layers, Info, Command, AlertTriangle, ChevronDown, ExternalLink, Plus } from 'lucide-react';
@@ -27,6 +28,7 @@ export function ViewportContainer() {
   const selectedStoreys = useViewerStore((s) => s.selectedStoreys);
   const typeVisibility = useViewerStore((s) => s.typeVisibility);
   const isolatedEntities = useViewerStore((s) => s.isolatedEntities);
+  const classFilter = useViewerStore((s) => s.classFilter);
   // Multi-model support: get all loaded models from store (for merged geometry)
   const storeModels = useViewerStore((s) => s.models);
   const resetViewerState = useViewerStore((s) => s.resetViewerState);
@@ -251,15 +253,8 @@ export function ViewportContainer() {
   // Now supports multi-model: aggregates elements from all models for selected storeys
   // IMPORTANT: Returns globalIds (meshes use globalIds after federation registry transformation)
   const computedIsolatedIds = useMemo(() => {
-    // If manual isolation is active, use that (already contains globalIds)
-    if (isolatedEntities !== null) {
-      return isolatedEntities;
-    }
-
-    // If storeys are selected, compute combined element IDs from all selected storeys
-    // across ALL models (multi-model support)
-    // NOTE: Storey hierarchy uses original expressIds, but meshes use globalIds
-    // We must transform expressIds -> globalIds using the model's offset
+    // Compute storey isolation if storeys are selected
+    let storeyIsolation: Set<number> | null = null;
     if (selectedStoreys.size > 0) {
       const combinedGlobalIds = new Set<number>();
 
@@ -268,46 +263,56 @@ export function ViewportContainer() {
         const hierarchy = model.ifcDataStore?.spatialHierarchy;
         if (!hierarchy) continue;
 
-        // Get this model's offset directly from the model (no need for registry)
         const offset = model.idOffset ?? 0;
 
         for (const storeyId of selectedStoreys) {
-          // Note: storeyId itself might be a globalId if the user selected via mesh click,
-          // or an original ID if selected via hierarchy panel. The byStorey map uses original IDs.
-          // For now, try both the storeyId and storeyId - offset
-          const storeyElementIds = hierarchy.byStorey.get(storeyId) || hierarchy.byStorey.get(storeyId - offset);
+          const localStoreyId = hierarchy.byStorey.has(storeyId) ? storeyId : storeyId - offset;
+          const storeyElementIds = collectIfcBuildingStoreyElementsWithIfcSpace(hierarchy, localStoreyId);
           if (storeyElementIds) {
             for (const originalExpressId of storeyElementIds) {
-              // Transform to globalId
-              const globalId = originalExpressId + offset;
-              combinedGlobalIds.add(globalId);
+              combinedGlobalIds.add(originalExpressId + offset);
             }
           }
         }
       }
 
-      // Also check legacy ifcDataStore (for single-model mode without federation)
-      // In this case, offset is 0, so globalId = expressId
+      // Legacy single-model mode (offset = 0)
       if (ifcDataStore?.spatialHierarchy && storeModels.size === 0) {
         const hierarchy = ifcDataStore.spatialHierarchy;
         for (const storeyId of selectedStoreys) {
-          const storeyElementIds = hierarchy.byStorey.get(storeyId);
+          const storeyElementIds = collectIfcBuildingStoreyElementsWithIfcSpace(hierarchy, storeyId);
           if (storeyElementIds) {
             for (const id of storeyElementIds) {
-              combinedGlobalIds.add(id); // offset = 0 for legacy single-model
+              combinedGlobalIds.add(id);
             }
           }
         }
       }
 
       if (combinedGlobalIds.size > 0) {
-        return combinedGlobalIds;
+        storeyIsolation = combinedGlobalIds;
       }
     }
 
-    // No isolation active
-    return null;
-  }, [storeModels, ifcDataStore, selectedStoreys, isolatedEntities]);
+    // Collect all active filters and intersect them
+    const filters: Set<number>[] = [];
+    if (storeyIsolation !== null) filters.push(storeyIsolation);
+    if (classFilter !== null) filters.push(classFilter.ids);
+    if (isolatedEntities !== null) filters.push(isolatedEntities);
+
+    if (filters.length === 0) return null;
+    if (filters.length === 1) return filters[0];
+
+    // Intersect all active filters — start from smallest for efficiency
+    const sorted = filters.sort((a, b) => a.size - b.size);
+    const intersection = new Set<number>();
+    for (const id of sorted[0]) {
+      if (sorted.every(s => s.has(id))) {
+        intersection.add(id);
+      }
+    }
+    return intersection;
+  }, [storeModels, ifcDataStore, selectedStoreys, isolatedEntities, classFilter]);
 
   // Grid Pattern
   const GridPattern = () => (