@ifc-lite/viewer 1.14.3 → 1.15.0

package/dist/assets/{index-C4VVJRL-.js → index-DsX-NCtx.js}

@@ -1,6 +1,6 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/browser-CRQ0bPh1.js","assets/index-Be6XjVeM.js","assets/index-DdwD4c-E.css"])))=>i.map(i=>d[i]);
-import { _ as u, b as _, d as M, __tla as __tla_0 } from "./index-Be6XjVeM.js";
-import { N as Z, m as $, __tla as __tla_1 } from "./index-Be6XjVeM.js";
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/browser-BMqEoJw4.js","assets/index-DZY6uD8A.js","assets/index-CJr7Itua.css"])))=>i.map(i=>d[i]);
+import { _ as u, b as _, d as M, __tla as __tla_0 } from "./index-DZY6uD8A.js";
+import { N as Z, m as $, __tla as __tla_1 } from "./index-DZY6uD8A.js";
 let c, y, O, V, I, C, L;
 let __tla = Promise.all([
     (()=>{
@@ -91,7 +91,7 @@ let __tla = Promise.all([
     function D() {
         return m || (m = (async ()=>{
             try {
-                const s = await u(()=>import("./browser-CRQ0bPh1.js").then((i)=>i.b), __vite__mapDeps([0,1,2])), t = s.default ?? s;
+                const s = await u(()=>import("./browser-BMqEoJw4.js").then((i)=>i.b), __vite__mapDeps([0,1,2])), t = s.default ?? s;
                 let e;
                 try {
                     e = (await u(()=>import("./esbuild-COv63sf-.js"), [])).default;

package/dist/assets/{native-bridge-DtcJqlOi.js → native-bridge-D6tKFqGO.js}

@@ -1,4 +1,4 @@
-import { _ as c, __tla as __tla_0 } from "./index-Be6XjVeM.js";
+import { _ as c, __tla as __tla_0 } from "./index-DZY6uD8A.js";
 let m;
 let __tla = Promise.all([
     (()=>{

package/dist/assets/{wasm-bridge-BJJVu9P2.js → wasm-bridge-D4kvZVDw.js}

@@ -1 +1 @@
-import{I as f,a as m}from"./index-Be6XjVeM.js";class u{bridge;initialized=!1;constructor(){this.bridge=new f}async init(){this.initialized||(await this.bridge.init(),this.initialized=!0)}isInitialized(){return this.initialized}async processGeometry(s){this.initialized||await this.init(),performance.now();const i=new m(this.bridge.getApi(),s),n=i.collectMeshes(),r=i.getBuildingRotation();performance.now();let e=0,o=0;for(const c of n)e+=c.positions.length/3,o+=c.indices.length/3;return{meshes:n,totalVertices:e,totalTriangles:o,coordinateInfo:{originShift:{x:0,y:0,z:0},originalBounds:{min:{x:0,y:0,z:0},max:{x:0,y:0,z:0}},shiftedBounds:{min:{x:0,y:0,z:0},max:{x:0,y:0,z:0}},hasLargeCoordinates:!1,buildingRotation:r}}}async processGeometryStreaming(s,i){this.initialized||await this.init();const n=performance.now(),r=new m(this.bridge.getApi(),s);let e=0,o=0,a=0;try{for await(const t of r.collectMeshesStreaming(50)){if(t&&typeof t=="object"&&"type"in t&&t.type==="colorUpdate")continue;const l=t;e+=l.length;for(const d of l)o+=d.positions.length/3,a+=d.indices.length/3;i.onBatch?.({meshes:l,progress:{processed:e,total:e,currentType:"processing"}})}}catch(t){throw i.onError?.(t instanceof Error?t:new Error(String(t))),t}const h=performance.now()-n,g={totalMeshes:e,totalVertices:o,totalTriangles:a,parseTimeMs:h*.3,geometryTimeMs:h*.7};return i.onComplete?.(g),g}getApi(){return this.bridge.getApi()}}export{u as WasmBridge};
+import{I as f,a as m}from"./index-DZY6uD8A.js";class u{bridge;initialized=!1;constructor(){this.bridge=new f}async init(){this.initialized||(await this.bridge.init(),this.initialized=!0)}isInitialized(){return this.initialized}async processGeometry(s){this.initialized||await this.init(),performance.now();const i=new m(this.bridge.getApi(),s),n=i.collectMeshes(),r=i.getBuildingRotation();performance.now();let e=0,o=0;for(const c of n)e+=c.positions.length/3,o+=c.indices.length/3;return{meshes:n,totalVertices:e,totalTriangles:o,coordinateInfo:{originShift:{x:0,y:0,z:0},originalBounds:{min:{x:0,y:0,z:0},max:{x:0,y:0,z:0}},shiftedBounds:{min:{x:0,y:0,z:0},max:{x:0,y:0,z:0}},hasLargeCoordinates:!1,buildingRotation:r}}}async processGeometryStreaming(s,i){this.initialized||await this.init();const n=performance.now(),r=new m(this.bridge.getApi(),s);let e=0,o=0,a=0;try{for await(const t of r.collectMeshesStreaming(50)){if(t&&typeof t=="object"&&"type"in t&&t.type==="colorUpdate")continue;const l=t;e+=l.length;for(const d of l)o+=d.positions.length/3,a+=d.indices.length/3;i.onBatch?.({meshes:l,progress:{processed:e,total:e,currentType:"processing"}})}}catch(t){throw i.onError?.(t instanceof Error?t:new Error(String(t))),t}const h=performance.now()-n,g={totalMeshes:e,totalVertices:o,totalTriangles:a,parseTimeMs:h*.3,geometryTimeMs:h*.7};return i.onComplete?.(g),g}getApi(){return this.bridge.getApi()}}export{u as WasmBridge};

package/dist/index.html

@@ -44,8 +44,8 @@
   <meta name="theme-color" content="#7aa2f7">
   <meta name="msapplication-TileColor" content="#1a1b26">
   <meta name="msapplication-TileImage" content="/favicon-192x192-cropped.png">
-  <script type="module" crossorigin src="/assets/index-Be6XjVeM.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-DdwD4c-E.css">
+  <script type="module" crossorigin src="/assets/index-DZY6uD8A.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-CJr7Itua.css">
 </head>
 <body>
   <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ifc-lite/viewer",
-  "version": "1.14.3",
+  "version": "1.15.0",
   "description": "IFC-Lite viewer application",
   "type": "module",
   "dependencies": {
@@ -46,15 +46,15 @@
     "@ifc-lite/cache": "^1.14.3",
     "@ifc-lite/data": "^1.14.3",
     "@ifc-lite/drawing-2d": "^1.14.3",
-    "@ifc-lite/encoding": "^1.14.3",
-    "@ifc-lite/export": "^1.14.3",
+    "@ifc-lite/encoding": "^1.14.4",
+    "@ifc-lite/export": "^1.15.0",
     "@ifc-lite/geometry": "^1.14.3",
-    "@ifc-lite/ids": "^1.14.3",
+    "@ifc-lite/ids": "^1.14.4",
     "@ifc-lite/lens": "^1.14.3",
-    "@ifc-lite/lists": "^1.14.3",
+    "@ifc-lite/lists": "^1.14.4",
     "@ifc-lite/mutations": "^1.14.3",
-    "@ifc-lite/parser": "^1.14.3",
-    "@ifc-lite/query": "^1.14.3",
+    "@ifc-lite/parser": "^2.1.0",
+    "@ifc-lite/query": "^1.14.4",
     "@ifc-lite/renderer": "^1.14.3",
     "@ifc-lite/sandbox": "^1.14.3",
     "@ifc-lite/server-client": "^1.14.3",

package/src/components/viewer/CommandPalette.tsx

@@ -218,6 +218,7 @@ function activateBottomPanel(panel: 'script' | 'list') {
   s.setListPanelVisible(false);
 
   if (!isActive) {
+    s.setRightPanelCollapsed(false);
     if (panel === 'script') s.setScriptPanelVisible(true);
     else s.setListPanelVisible(true);
   }

package/src/components/viewer/ExportDialog.tsx

@@ -51,7 +51,7 @@ import {
 import { useViewerStore } from '@/store';
 import { configureMutationView } from '@/utils/configureMutationView';
 import { toast } from '@/components/ui/toast';
-import { StepExporter, MergedExporter, Ifc5Exporter, type MergeModelInput } from '@ifc-lite/export';
+import { StepExporter, MergedExporter, Ifc5Exporter, IFC5_KNOWN_PROP_NAMES, type MergeModelInput } from '@ifc-lite/export';
 import { MutablePropertyView } from '@ifc-lite/mutations';
 import type { IfcDataStore } from '@ifc-lite/parser';
 
@@ -84,6 +84,7 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
   const [applyMutations, setApplyMutations] = useState(true);
   const [changesOnly, setChangesOnly] = useState(false);
   const [visibleOnly, setVisibleOnly] = useState(false);
+  const [onlyKnownProperties, setOnlyKnownProperties] = useState(true);
   const [isExporting, setIsExporting] = useState(false);
   const [exportResult, setExportResult] = useState<{ success: boolean; message: string } | null>(null);
 
@@ -244,6 +245,29 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
     return localIds.size > 0 ? localIds : null;
   }, [models, isolatedEntities, isolatedEntitiesByModel]);
 
+  // Detect if the model has properties that would be filtered by onlyKnownProperties.
+  // Only relevant for IFC5 exports — show the toggle only when there's something to filter.
+  const hasFilterableProperties = useMemo(() => {
+    if (!isIfc5 || !selectedModel?.ifcDataStore) return false;
+    const mutationView = getMutationView(selectedModelId);
+    const propSource = mutationView || selectedModel.ifcDataStore.properties;
+    if (!propSource) return false;
+
+    // Sample a few entities to check for unknown property names
+    const entities = selectedModel.ifcDataStore.entities;
+    const limit = Math.min(entities.count, 50);
+    for (let i = 0; i < limit; i++) {
+      const id = entities.expressId[i];
+      const psets = propSource.getForEntity(id);
+      for (const pset of psets) {
+        for (const prop of pset.properties) {
+          if (!IFC5_KNOWN_PROP_NAMES.has(prop.name)) return true;
+        }
+      }
+    }
+    return false;
+  }, [isIfc5, selectedModel, selectedModelId, getMutationView]);
+
   // Compute output format description for UI
   const outputInfo = useMemo(() => {
     if (changesOnly) {
@@ -356,6 +380,7 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
           visibleOnly: effectiveVisibleOnly,
           hiddenEntityIds: localHidden,
           isolatedEntityIds: localIsolated,
+          onlyKnownProperties,
           author: 'ifc-lite',
         });
 
@@ -440,7 +465,7 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
     } finally {
       setIsExporting(false);
     }
-  }, [selectedModel, selectedModelId, schema, isIfc5, exportScope, includeGeometry, applyMutations, changesOnly, visibleOnly, getMutationView, getLocalHiddenIds, getLocalIsolatedIds, modifiedCount, models]);
+  }, [selectedModel, selectedModelId, schema, isIfc5, exportScope, includeGeometry, applyMutations, changesOnly, visibleOnly, onlyKnownProperties, getMutationView, getLocalHiddenIds, getLocalIsolatedIds, modifiedCount, models]);
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
@@ -583,6 +608,19 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
             </div>
           )}
 
+          {/* IFC5: strict property schema filtering */}
+          {isIfc5 && hasFilterableProperties && (
+            <div className="flex items-center justify-between">
+              <div>
+                <Label>Only Known IFC5 Properties</Label>
+                <p className="text-xs text-muted-foreground">
+                  Skip properties without an official IFC5 schema (avoids viewer warnings)
+                </p>
+              </div>
+              <Switch checked={onlyKnownProperties} onCheckedChange={setOnlyKnownProperties} />
+            </div>
+          )}
+
           {/* Stats */}
           {modifiedCount > 0 && (
             <Alert>

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;
     }
@@ -319,30 +350,45 @@ export function HierarchyPanel() {
           setStoreysSelection(storeyIds);
         }
       }
+    } else if (node.type === 'IfcSpace') {
+      const spaceId = node.expressIds[0];
+      const modelId = node.modelIds[0];
+      const globalId = node.globalIds[0] ?? spaceId;
+
+      setSelectedEntityIds([]);
+
+      if (modelId && modelId !== 'legacy') {
+        setSelectedEntityId(globalId);
+        setSelectedEntity({ modelId, expressId: spaceId });
+        setActiveModel(modelId);
+      } else {
+        setSelectedEntityId(globalId);
+        setSelectedEntity({ modelId: 'legacy', expressId: spaceId });
+      }
+
+      if (node.hasChildren) {
+        toggleExpand(node.id);
+      }
     } else if (node.type === 'element') {
       // Element click - select it
-      const elementId = node.expressIds[0];  // Original expressId
+      const elementId = node.expressIds[0];
       const modelId = node.modelIds[0];
+      const globalId = node.globalIds[0] ?? elementId;
 
       // Clear multi-selection (e.g. from a prior type-group click) so only
       // this single element is highlighted, matching Viewport pick behavior
       setSelectedEntityIds([]);
 
       if (modelId !== 'legacy') {
-        // Multi-model: need to convert to globalId for renderer
-        const model = models.get(modelId);
-        const globalId = elementId + (model?.idOffset ?? 0);
         setSelectedEntityId(globalId);
         setSelectedEntity({ modelId, expressId: elementId });
         setActiveModel(modelId);
       } else {
-        // Legacy single-model: expressId = globalId (offset is 0)
-        setSelectedEntityId(elementId);
-        // Also set selectedEntity for property panel (was missing, causing blank panel)
-        setSelectedEntity(resolveEntityRef(elementId));
+        setSelectedEntityId(globalId);
+        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 } => {
@@ -352,8 +398,8 @@ export function HierarchyPanel() {
       ? node.expressIds.some(id => selectedStoreys.has(id))
       : node.type === 'IfcBuildingStorey'
         ? selectedStoreys.has(node.expressIds[0])
-        : node.type === 'element'
-          ? selectedEntityId === node.expressIds[0]
+        : node.type === 'IfcSpace' || node.type === 'element'
+          ? selectedEntityId === (node.globalIds[0] ?? node.expressIds[0])
           : node.type === 'ifc-type'
             ? (() => {
                 const typeExpressId = node.entityExpressId;
@@ -369,8 +415,8 @@ export function HierarchyPanel() {
     // Compute visibility inline - for elements check directly, for storeys use getNodeElements
     let nodeHidden = false;
     if (node.type === 'element') {
-      nodeHidden = hiddenEntities.has(node.expressIds[0]);
-    } else if (node.type === 'IfcBuildingStorey' || node.type === 'unified-storey' ||
+      nodeHidden = hiddenEntities.has(node.globalIds[0] ?? node.expressIds[0]);
+    } else if (node.type === 'IfcBuildingStorey' || node.type === 'IfcSpace' || node.type === 'unified-storey' ||
                node.type === 'type-group' || node.type === 'ifc-type' ||
                (node.type === 'model-header' && node.id.startsWith('contrib-'))) {
       const elements = getNodeElements(node);
@@ -385,7 +431,7 @@ export function HierarchyPanel() {
     }
 
     return { isSelected, nodeHidden, modelVisible };
-  }, [selectedStoreys, selectedEntityId, hiddenEntities, getNodeElements, models]);
+  }, [selectedStoreys, selectedEntityId, hiddenEntities, getNodeElements, models, toGlobalId]);
 
   if (!ifcDataStore && models.size === 0) {
     return (
@@ -536,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>
@@ -599,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>