@ifc-lite/viewer 1.17.6 → 1.18.0

package/src/components/viewer/SearchModal.text.tsx

@@ -0,0 +1,388 @@
+/* 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/. */
+
+/**
+ * SearchModal.text — the Search tab content.
+ *
+ * Chip filters (field match type + per-model include) narrow the pool
+ * of results provided by the parent modal, which owns the scan + merge.
+ * The result list is virtualized via @tanstack/react-virtual so 5000
+ * rows render at constant cost. Batch actions route through the
+ * existing selection / visibility slices.
+ */
+
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { Crosshair, SquareX, ListChecks, Filter } from 'lucide-react';
+import { useShallow } from 'zustand/react/shallow';
+import { useViewerStore } from '@/store';
+import { toGlobalIdFromModels } from '@/store/globalId';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import type { SearchResult } from '@/lib/search/tier0-scan';
+import type { SearchFieldFilter } from '@/store/slices/searchSlice';
+
+const ROW_HEIGHT = 36;
+
+const FIELD_FILTERS: { value: SearchFieldFilter; label: string }[] = [
+  { value: 'all', label: 'All' },
+  { value: 'name', label: 'Name' },
+  { value: 'type', label: 'Type' },
+  { value: 'globalId', label: 'GUID' },
+  { value: 'description', label: 'Description' },
+  { value: 'objectType', label: 'ObjectType' },
+];
+
+export interface SearchModalTextProps {
+  /** Full result pool from the parent modal (before filter chips). */
+  results: SearchResult[];
+  /** All modelIds currently loaded (for the model-filter chips). */
+  availableModelIds: readonly string[];
+  /** Close the parent modal — invoked on Enter-commit from a row. */
+  onClose: () => void;
+}
+
+export function SearchModalText({ results, availableModelIds, onClose }: SearchModalTextProps) {
+  const {
+    searchFieldFilter,
+    searchModelFilter,
+    searchQuery,
+    searchHighlightIndex,
+    selectedEntitiesSet,
+    models,
+    setSearchFieldFilter,
+    toggleSearchModelFilter,
+    clearSearchModelFilter,
+    setSearchHighlightIndex,
+    setSelectedEntity,
+    setSelectedEntityId,
+    addEntitiesToSelection,
+    toggleEntitySelection,
+    clearEntitySelection,
+    enterVimCycle,
+    cameraCallbacks,
+  } = useViewerStore(
+    useShallow((s) => ({
+      searchFieldFilter: s.searchFieldFilter,
+      searchModelFilter: s.searchModelFilter,
+      searchQuery: s.searchQuery,
+      searchHighlightIndex: s.searchHighlightIndex,
+      selectedEntitiesSet: s.selectedEntitiesSet,
+      models: s.models,
+      setSearchFieldFilter: s.setSearchFieldFilter,
+      toggleSearchModelFilter: s.toggleSearchModelFilter,
+      clearSearchModelFilter: s.clearSearchModelFilter,
+      setSearchHighlightIndex: s.setSearchHighlightIndex,
+      setSelectedEntity: s.setSelectedEntity,
+      setSelectedEntityId: s.setSelectedEntityId,
+      addEntitiesToSelection: s.addEntitiesToSelection,
+      toggleEntitySelection: s.toggleEntitySelection,
+      clearEntitySelection: s.clearEntitySelection,
+      enterVimCycle: s.enterVimCycle,
+      cameraCallbacks: s.cameraCallbacks,
+    })),
+  );
+
+  // Filter the result pool by the active chip selections.
+  const filtered = useMemo(() => {
+    return results.filter((r) => {
+      if (searchFieldFilter !== 'all' && r.matchField !== searchFieldFilter) return false;
+      if (searchModelFilter && !searchModelFilter.has(r.modelId)) return false;
+      return true;
+    });
+  }, [results, searchFieldFilter, searchModelFilter]);
+
+  // Virtualized list setup. `count` tracks filtered.length; scrollElement
+  // is the parent div the virtualizer measures.
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const virtualizer = useVirtualizer({
+    count: filtered.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => ROW_HEIGHT,
+    overscan: 10,
+  });
+
+  // Keep the highlight index in range as filtered results change.
+  useEffect(() => {
+    if (filtered.length === 0) {
+      if (searchHighlightIndex !== 0) setSearchHighlightIndex(0);
+      return;
+    }
+    if (searchHighlightIndex >= filtered.length) {
+      setSearchHighlightIndex(Math.max(0, filtered.length - 1));
+    }
+  }, [filtered, searchHighlightIndex, setSearchHighlightIndex]);
+
+  // Scroll the highlighted row into view when it moves.
+  useEffect(() => {
+    if (filtered.length === 0) return;
+    virtualizer.scrollToIndex(searchHighlightIndex, { align: 'auto' });
+  }, [searchHighlightIndex, filtered.length, virtualizer]);
+
+  /** Primary "click row" handler — selects + frames + enters vim cycle. */
+  const commit = useCallback(
+    (r: SearchResult, indexInFiltered: number) => {
+      const ref = { modelId: r.modelId, expressId: r.expressId };
+      const isLegacy = r.modelId === 'legacy' || r.modelId === '__legacy__' || models.size === 0;
+      const globalId = isLegacy ? r.expressId : toGlobalIdFromModels(models, r.modelId, r.expressId);
+      setSelectedEntityId(globalId);
+      setSelectedEntity(ref);
+      if (cameraCallbacks.frameSelection) {
+        window.setTimeout(() => cameraCallbacks.frameSelection?.(), 50);
+      }
+      enterVimCycle(searchQuery, filtered, indexInFiltered);
+      onClose();
+    },
+    [
+      cameraCallbacks,
+      enterVimCycle,
+      filtered,
+      models,
+      onClose,
+      searchQuery,
+      setSelectedEntity,
+      setSelectedEntityId,
+    ],
+  );
+
+  /**
+   * Additive toggle — adds OR removes from multi-selection without
+   * closing. Uses `toggleEntitySelection` so a second Shift+Enter (or
+   * a second checkbox click on the same row) deselects, rather than
+   * being a no-op that forces the user to clear the entire selection.
+   */
+  const toggleAdditive = useCallback(
+    (r: SearchResult) => {
+      toggleEntitySelection({ modelId: r.modelId, expressId: r.expressId });
+    },
+    [toggleEntitySelection],
+  );
+
+  /**
+   * Batch: add every filtered result to multi-selection in a single
+   * Zustand `set`. The naïve loop over `addEntityToSelection` triggered
+   * one re-render per row — visibly janky on a 5K-row filtered set.
+   */
+  const selectAll = useCallback(() => {
+    if (filtered.length === 0) return;
+    addEntitiesToSelection(
+      filtered.map((r) => ({ modelId: r.modelId, expressId: r.expressId })),
+    );
+  }, [addEntitiesToSelection, filtered]);
+
+  /** Batch: frame whatever is the primary selection (if any). */
+  const frame = useCallback(() => {
+    cameraCallbacks.frameSelection?.();
+  }, [cameraCallbacks]);
+
+  const multiCount = selectedEntitiesSet.size;
+  const hasModelChips = availableModelIds.length > 1;
+
+  return (
+    <div className="flex flex-1 min-h-0 flex-col">
+      {/* ── Chip filters ── */}
+      <div className="flex flex-wrap items-center gap-1.5 border-b px-4 py-2 text-xs">
+        <Filter className="h-3 w-3 text-muted-foreground" />
+        <span className="mr-1 text-muted-foreground">Field:</span>
+        {FIELD_FILTERS.map((f) => (
+          <button
+            key={f.value}
+            type="button"
+            onClick={() => setSearchFieldFilter(f.value)}
+            className={cn(
+              'rounded border px-2 py-0.5 transition-colors',
+              searchFieldFilter === f.value
+                ? 'border-primary bg-primary/10 text-primary'
+                : 'border-zinc-300 hover:bg-zinc-100 dark:border-zinc-700 dark:hover:bg-zinc-800',
+            )}
+          >
+            {f.label}
+          </button>
+        ))}
+        {hasModelChips && (
+          <>
+            <span className="mx-2 h-4 w-px bg-zinc-300 dark:bg-zinc-700" />
+            <span className="mr-1 text-muted-foreground">Models:</span>
+            {availableModelIds.map((id) => {
+              const included = searchModelFilter === null || searchModelFilter.has(id);
+              const model = models.get(id);
+              const label = model?.name ?? id.slice(0, 6);
+              return (
+                <button
+                  key={id}
+                  type="button"
+                  onClick={() => toggleSearchModelFilter(id, availableModelIds)}
+                  className={cn(
+                    'rounded border px-2 py-0.5 transition-colors',
+                    included
+                      ? 'border-primary bg-primary/10 text-primary'
+                      : 'border-zinc-300 text-muted-foreground line-through hover:bg-zinc-100 dark:border-zinc-700 dark:hover:bg-zinc-800',
+                  )}
+                  title={id}
+                >
+                  {label}
+                </button>
+              );
+            })}
+            {searchModelFilter !== null && (
+              <button
+                type="button"
+                onClick={clearSearchModelFilter}
+                className="ml-1 text-[10px] text-muted-foreground underline hover:text-foreground"
+              >
+                reset
+              </button>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* ── Virtualized results list ── */}
+      <div
+        ref={scrollRef}
+        className="flex-1 min-h-0 overflow-y-auto"
+        role="listbox"
+        aria-label="Search results"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (filtered.length === 0) return;
+          if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            const next = (searchHighlightIndex + 1) % filtered.length;
+            setSearchHighlightIndex(next);
+          } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            const next = (searchHighlightIndex - 1 + filtered.length) % filtered.length;
+            setSearchHighlightIndex(next);
+          } else if (e.key === 'Enter') {
+            e.preventDefault();
+            const target = filtered[searchHighlightIndex];
+            if (target) {
+              if (e.shiftKey) toggleAdditive(target);
+              else commit(target, searchHighlightIndex);
+            }
+          }
+        }}
+      >
+        {filtered.length === 0 ? (
+          <div className="px-4 py-8 text-center text-xs text-muted-foreground">
+            {results.length === 0
+              ? 'Start typing to search — GlobalIds, names, IFC types, descriptions.'
+              : 'No results match the active filters. Clear chips to widen the search.'}
+          </div>
+        ) : (
+          <div style={{ height: virtualizer.getTotalSize(), position: 'relative' }}>
+            {virtualizer.getVirtualItems().map((vRow) => {
+              const r = filtered[vRow.index];
+              const key = `${r.modelId}:${r.expressId}`;
+              const isChecked = selectedEntitiesSet.has(key);
+              const isHighlighted = vRow.index === searchHighlightIndex;
+              return (
+                <div
+                  key={key}
+                  role="option"
+                  aria-selected={isHighlighted}
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: vRow.size,
+                    transform: `translateY(${vRow.start}px)`,
+                  }}
+                  className={cn(
+                    'flex items-center gap-2 border-b border-zinc-100 px-4 text-xs dark:border-zinc-900',
+                    isHighlighted && 'bg-zinc-100 dark:bg-zinc-800',
+                  )}
+                  onMouseEnter={() => setSearchHighlightIndex(vRow.index)}
+                  onClick={(e) => {
+                    if (e.shiftKey) toggleAdditive(r);
+                    else commit(r, vRow.index);
+                  }}
+                >
+                  <input
+                    type="checkbox"
+                    checked={isChecked}
+                    onClick={(e) => e.stopPropagation()}
+                    onChange={() => toggleAdditive(r)}
+                    aria-label={`Toggle ${r.name || r.globalId} in selection`}
+                    className="shrink-0 cursor-pointer"
+                  />
+                  <Badge variant="secondary" className="shrink-0 font-mono text-[10px] uppercase">
+                    {r.typeName}
+                  </Badge>
+                  <span className="min-w-0 flex-1 truncate font-medium">
+                    {r.name || <span className="italic text-muted-foreground">unnamed</span>}
+                  </span>
+                  {r.globalId && (
+                    <span className="shrink-0 font-mono text-[10px] text-muted-foreground">
+                      {r.globalId.slice(0, 10)}…
+                    </span>
+                  )}
+                  {availableModelIds.length > 1 && (
+                    <span className="shrink-0 rounded border border-zinc-300 px-1 py-0.5 text-[10px] text-muted-foreground dark:border-zinc-700">
+                      {(models.get(r.modelId)?.name ?? r.modelId).slice(0, 8)}
+                    </span>
+                  )}
+                  <span className="shrink-0 text-[10px] uppercase text-muted-foreground opacity-60">
+                    {r.matchField}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* ── Footer: counts + batch actions ── */}
+      <div className="flex flex-wrap items-center gap-2 border-t px-4 py-2 text-xs">
+        <span className="text-muted-foreground">
+          {filtered.length} result{filtered.length === 1 ? '' : 's'}
+          {filtered.length !== results.length && (
+            <span className="ml-1 opacity-70">(of {results.length})</span>
+          )}
+          {multiCount > 0 && (
+            <span className="ml-2 font-medium text-foreground">· {multiCount} selected</span>
+          )}
+        </span>
+        <div className="ml-auto flex items-center gap-1.5">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={frame}
+            disabled={!cameraCallbacks.frameSelection}
+            title="Frame primary selection"
+            className="h-7 gap-1 text-xs"
+          >
+            <Crosshair className="h-3 w-3" />
+            Frame
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={selectAll}
+            disabled={filtered.length === 0}
+            title={`Add all ${filtered.length} results to multi-selection`}
+            className="h-7 gap-1 text-xs"
+          >
+            <ListChecks className="h-3 w-3" />
+            Select all
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={clearEntitySelection}
+            disabled={multiCount === 0}
+            title="Clear multi-selection"
+            className="h-7 gap-1 text-xs"
+          >
+            <SquareX className="h-3 w-3" />
+            Clear
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/viewer/SearchModal.tsx

@@ -0,0 +1,235 @@
+/* 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/. */
+
+/**
+ * SearchModal — advanced search (⌘⇧F / Ctrl+Shift+F).
+ *
+ * Shares `searchSlice.searchQuery` with the inline field, so the modal
+ * can never "lose" what you've already typed — open it and the query is
+ * already there, adjust it and closing the modal leaves the inline in
+ * sync. The tab switcher has a "Search" tab (P3) and a "SQL" tab stub
+ * reserved for P4. All search engines (Tier-0 linear scan, Tier-1 token
+ * index) are reused — the modal just renders a bigger, unfiltered,
+ * virtualized version of what the inline popover shows.
+ *
+ * Keyboard (inside the modal):
+ *   • ↑ / ↓        — navigate result rows
+ *   • Enter        — commit (select + frame + enter vim cycle + close)
+ *   • ⇧Enter       — toggle row in multi-selection (stays open)
+ *   • Esc          — close modal
+ *   • ⌘⇧F / Ctrl+⇧F — toggle modal closed (symmetric with open)
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Search, SlidersHorizontal } from 'lucide-react';
+import { useShallow } from 'zustand/react/shallow';
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { useViewerStore } from '@/store';
+import { runTier0Scan, type SearchResult, type ScanModel } from '@/lib/search/tier0-scan';
+import { queryTier1Indexes, type Tier1Index } from '@/lib/search/tier1-index';
+import { useSearchIndex } from '@/hooks/useSearchIndex';
+import { pushRecentSearch } from '@/lib/search/recent-searches';
+import { SearchModalText } from './SearchModal.text';
+import { SearchModalFilter } from './SearchModal.filter';
+
+/** Modal-side result cap. Well above what any user scrolls through, small
+ *  enough that the score/merge arrays stay cheap. Virtualization keeps
+ *  DOM cost constant regardless. */
+const RESULT_LIMIT_MODAL = 5000;
+const DEBOUNCE_MS = 80;
+
+export function SearchModal() {
+  const {
+    searchQuery,
+    searchModalOpen,
+    searchIndexes,
+    models,
+    setSearchModalOpen,
+    toggleSearchModal,
+    setSearchQuery,
+  } = useViewerStore(
+    useShallow((s) => ({
+      searchQuery: s.searchQuery,
+      searchModalOpen: s.searchModalOpen,
+      searchIndexes: s.searchIndexes,
+      models: s.models,
+      setSearchModalOpen: s.setSearchModalOpen,
+      toggleSearchModal: s.toggleSearchModal,
+      setSearchQuery: s.setSearchQuery,
+    })),
+  );
+
+  // Make sure Tier-1 indexes continue building while the modal is open
+  // (the inline also mounts this hook — cheap re-registration).
+  useSearchIndex();
+
+  // Debounce the query the same way the inline does, so fast typing
+  // inside the modal doesn't re-scan per keystroke.
+  const [debouncedQuery, setDebouncedQuery] = useState(searchQuery);
+  useEffect(() => {
+    const handle = window.setTimeout(() => setDebouncedQuery(searchQuery), DEBOUNCE_MS);
+    return () => window.clearTimeout(handle);
+  }, [searchQuery]);
+
+  // Split models into the two search tiers. Same logic as SearchInline.
+  const { tier0Models, tier1Indexes, availableModelIds } = useMemo(() => {
+    const t0: ScanModel[] = [];
+    const t1: Tier1Index[] = [];
+    const ids: string[] = [];
+    for (const m of models.values()) {
+      if (!m.ifcDataStore) continue;
+      ids.push(m.id);
+      const record = searchIndexes.get(m.id);
+      if (record?.status === 'ready' && record.index) {
+        t1.push(record.index);
+      } else {
+        t0.push({ id: m.id, ifcDataStore: m.ifcDataStore });
+      }
+    }
+    return { tier0Models: t0, tier1Indexes: t1, availableModelIds: ids };
+  }, [models, searchIndexes]);
+
+  // Full result pool (pre-filter). Filtering happens inside the tab.
+  const results = useMemo<SearchResult[]>(() => {
+    if (!debouncedQuery.trim()) return [];
+    if (tier0Models.length === 0 && tier1Indexes.length === 0) return [];
+
+    const t1Results = tier1Indexes.length > 0
+      ? queryTier1Indexes(tier1Indexes, debouncedQuery, { limit: RESULT_LIMIT_MODAL })
+      : [];
+    const t0Results = tier0Models.length > 0
+      ? runTier0Scan(tier0Models, debouncedQuery, { limit: RESULT_LIMIT_MODAL })
+      : [];
+
+    if (t1Results.length === 0) return t0Results;
+    if (t0Results.length === 0) return t1Results;
+
+    const combined = [...t1Results, ...t0Results];
+    combined.sort((a, b) => {
+      if (b.score !== a.score) return b.score - a.score;
+      if (a.modelId !== b.modelId) return a.modelId < b.modelId ? -1 : 1;
+      return a.expressId - b.expressId;
+    });
+    const seen = new Set<string>();
+    const out: SearchResult[] = [];
+    for (const r of combined) {
+      const key = `${r.modelId}:${r.expressId}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      out.push(r);
+      if (out.length >= RESULT_LIMIT_MODAL) break;
+    }
+    return out;
+  }, [tier0Models, tier1Indexes, debouncedQuery]);
+
+  /** Global ⌘⇧F / Ctrl+⇧F toggle — opens from anywhere, also closes when open. */
+  useEffect(() => {
+    const handler = (e: globalThis.KeyboardEvent) => {
+      const isAdvancedShortcut =
+        (e.ctrlKey || e.metaKey) && e.shiftKey && (e.key === 'f' || e.key === 'F');
+      if (isAdvancedShortcut) {
+        e.preventDefault();
+        toggleSearchModal();
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [toggleSearchModal]);
+
+  /**
+   * Record the query in recents on the modal-close *transition* — once
+   * per close, with the final query at that moment. We watch only
+   * `searchModalOpen` (not `searchQuery`) so typing in the inline bar
+   * while the modal is closed never fires this effect; without that
+   * gate, every keystroke in the inline bar (which shares `searchQuery`
+   * with the modal) would push a partial-prefix recent.
+   *
+   * `prevOpenRef` distinguishes the "opened then closed" transition
+   * from the initial mount where `searchModalOpen` is already false.
+   */
+  const prevOpenRef = useRef(searchModalOpen);
+  useEffect(() => {
+    const wasOpen = prevOpenRef.current;
+    prevOpenRef.current = searchModalOpen;
+    if (wasOpen && !searchModalOpen) {
+      // Use the latest searchQuery via a fresh read — depending on it
+      // would re-fire this effect on every keystroke. Since the close
+      // transition is what we care about, the latest value at close
+      // time is the right thing to record.
+      const q = searchQuery.trim();
+      if (q) pushRecentSearch(q);
+    }
+  }, [searchModalOpen, searchQuery]);
+
+  // Auto-select the input on open so typing is immediate.
+  const inputRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    if (searchModalOpen) {
+      // Next tick so Radix Dialog has mounted the content.
+      const t = window.setTimeout(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      }, 10);
+      return () => window.clearTimeout(t);
+    }
+  }, [searchModalOpen]);
+
+  const close = useCallback(() => setSearchModalOpen(false), [setSearchModalOpen]);
+
+  if (!searchModalOpen) return null;
+
+  return (
+    <Dialog open={searchModalOpen} onOpenChange={(open) => setSearchModalOpen(open)}>
+      <DialogContent
+        hideCloseButton
+        className="max-w-4xl h-[80vh] p-0 gap-0 flex flex-col"
+        onEscapeKeyDown={close}
+      >
+        <DialogTitle className="sr-only">Advanced Search</DialogTitle>
+        <Tabs defaultValue="search" className="flex flex-col flex-1 min-h-0">
+          <div className="flex items-center justify-between border-b px-4 py-3">
+            <TabsList>
+              <TabsTrigger value="search">
+                <Search className="h-3.5 w-3.5 mr-1.5" />
+                Search
+              </TabsTrigger>
+              <TabsTrigger value="filter">
+                <SlidersHorizontal className="h-3.5 w-3.5 mr-1.5" />
+                Filter
+              </TabsTrigger>
+            </TabsList>
+            <div className="text-[11px] text-muted-foreground">
+              <kbd className="rounded border border-zinc-300 bg-zinc-100 px-1 font-mono text-[10px] dark:border-zinc-700 dark:bg-zinc-900">Esc</kbd>
+              <span className="ml-1">close</span>
+            </div>
+          </div>
+          <TabsContent value="search" className="flex-1 min-h-0 mt-0 flex flex-col">
+            <div className="border-b px-4 py-3">
+              <Input
+                ref={inputRef}
+                type="text"
+                placeholder="Search GUID, name, type, description, objectType…"
+                value={searchQuery}
+                leftIcon={<Search className="h-4 w-4" />}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="h-10 text-sm"
+                aria-label="Advanced search query"
+              />
+            </div>
+            <SearchModalText
+              results={results}
+              availableModelIds={availableModelIds}
+              onClose={close}
+            />
+          </TabsContent>
+          <TabsContent value="filter" className="flex-1 min-h-0 mt-0 flex">
+            <SearchModalFilter />
+          </TabsContent>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/viewer/ToolOverlays.tsx

@@ -9,6 +9,7 @@
 import { useViewerStore } from '@/store';
 import { MeasureOverlay } from './tools/MeasurePanel';
 import { SectionOverlay } from './tools/SectionPanel';
+import { AddElementOverlay } from './tools/AddElementOverlay';
 
 export function ToolOverlays() {
   const activeTool = useViewerStore((s) => s.activeTool);
@@ -21,5 +22,9 @@ export function ToolOverlays() {
     return <SectionOverlay />;
   }
 
+  if (activeTool === 'addElement') {
+    return <AddElementOverlay />;
+  }
+
   return null;
 }