@ifc-lite/viewer 1.25.2 → 1.27.0

package/src/components/viewer/SearchModal.filter.editors.tsx

@@ -0,0 +1,503 @@
+/* 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/. */
+
+/**
+ * Per-rule chip editors for the filter builder. Split out of
+ * `SearchModal.filter.builder.tsx` (which keeps the toolbar / preset /
+ * run-state orchestration) to stay under the module size cap. `RuleRow`
+ * dispatches to the right per-kind editor; the builder only imports
+ * `RuleRow` and `RULE_KIND_LABEL`.
+ */
+
+import { useMemo } from 'react';
+import { Trash2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from '@/components/ui/dropdown-menu';
+import {
+  Rule,
+  type FilterRule,
+  type SetOp,
+  type StringOp,
+  type ValueOp,
+  type NumericOp,
+  type ClassificationOp,
+} from '@/lib/search/filter-rules';
+import { ComboInput } from '@/components/ui/combo-input';
+import { propValueKey, type FilterValueSchema } from '@/lib/search/filter-schema';
+
+const NO_OPTIONS: readonly string[] = [];
+
+// ── Op constants ──────────────────────────────────────────────────────
+
+const SET_OPS: SetOp[] = ['in', 'notIn'];
+const STRING_OPS: StringOp[] = ['eq', 'ne', 'contains', 'notContains', 'startsWith'];
+const VALUE_OPS: ValueOp[] = [
+  'eq', 'ne', 'contains', 'notContains', 'gt', 'gte', 'lt', 'lte', 'isSet', 'isNotSet',
+];
+const NUMERIC_OPS: NumericOp[] = ['eq', 'ne', 'gt', 'gte', 'lt', 'lte'];
+const CLASSIFICATION_OPS: ClassificationOp[] = [
+  'contains', 'eq', 'ne', 'notContains', 'isSet', 'isNotSet',
+];
+
+const OP_LABEL: Record<string, string> = {
+  in: 'is one of',  notIn: 'is not one of',
+  eq: '=', ne: '≠',
+  contains: 'contains', notContains: 'does not contain',
+  startsWith: 'starts with',
+  gt: '>', gte: '≥', lt: '<', lte: '≤',
+  isSet: 'is set', isNotSet: 'is not set',
+};
+
+export const RULE_KIND_LABEL: Record<FilterRule['kind'], string> = {
+  storey:          'Storey',
+  ifcType:         'IFC Type',
+  predefinedType:  'Predefined Type',
+  name:            'Name',
+  property:        'Property',
+  quantity:        'Quantity',
+  material:        'Material',
+  classification:  'Classification',
+  elevation:       'Elevation',
+};
+
+// ── Rule row dispatcher ───────────────────────────────────────────────
+
+export interface RuleRowProps {
+  rule: FilterRule;
+  ifcTypeOptions: string[];
+  storeyOptions: ReadonlyArray<readonly [string, number | null]>;
+  psetQto: { psets: ReadonlyArray<readonly [string, ReadonlyArray<string>]>; qtos: ReadonlyArray<readonly [string, ReadonlyArray<readonly [string, string]>]> } | null;
+  /** Distinct model values for value suggestions (materials, classifications, property values). */
+  valueSchema: FilterValueSchema | null;
+  onChange: (next: FilterRule) => void;
+  onRemove: () => void;
+}
+
+export function RuleRow({ rule, ifcTypeOptions, storeyOptions, psetQto, valueSchema, onChange, onRemove }: RuleRowProps) {
+  return (
+    <div className="flex flex-wrap items-center gap-1.5 rounded border border-zinc-200 bg-white px-2 py-1.5 dark:border-zinc-800 dark:bg-zinc-950">
+      <span className="rounded bg-zinc-100 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">
+        {RULE_KIND_LABEL[rule.kind]}
+      </span>
+
+      {rule.kind === 'storey' && (
+        <SetRuleEditor
+          values={rule.values}
+          op={rule.op}
+          options={storeyOptions.map(([name, elev]) => ({
+            label: elev != null ? `${name} (${elev.toFixed(2)} m)` : name,
+            value: name,
+          }))}
+          onChange={(values, op) => onChange(Rule.storey(values, op))}
+        />
+      )}
+
+      {rule.kind === 'ifcType' && (
+        <SetRuleEditor
+          values={rule.values}
+          op={rule.op}
+          options={ifcTypeOptions.map((t) => ({ label: t, value: t }))}
+          onChange={(values, op) => onChange(Rule.ifcType(values, op))}
+        />
+      )}
+
+      {rule.kind === 'predefinedType' && (
+        <PredefinedTypeEditor
+          values={rule.values}
+          op={rule.op}
+          onChange={(values, op) => onChange(Rule.predefinedType(values, op))}
+        />
+      )}
+
+      {rule.kind === 'name' && (
+        <NameEditor
+          op={rule.op}
+          value={rule.value}
+          onChange={(op, value) => onChange(Rule.name(op, value))}
+        />
+      )}
+
+      {rule.kind === 'property' && (
+        <PropertyEditor rule={rule} psetQto={psetQto} valueSchema={valueSchema} onChange={onChange} />
+      )}
+
+      {rule.kind === 'quantity' && (
+        <QuantityEditor rule={rule} psetQto={psetQto} onChange={onChange} />
+      )}
+
+      {rule.kind === 'material' && (
+        <MaterialEditor
+          op={rule.op}
+          value={rule.value}
+          options={valueSchema?.materials ?? NO_OPTIONS}
+          onChange={(op, value) => onChange(Rule.material(op, value))}
+        />
+      )}
+
+      {rule.kind === 'classification' && (
+        <ClassificationEditor rule={rule} valueSchema={valueSchema} onChange={onChange} />
+      )}
+
+      {rule.kind === 'elevation' && (
+        <ElevationEditor
+          op={rule.op}
+          value={rule.value}
+          onChange={(op, value) => onChange(Rule.elevation(op, value))}
+        />
+      )}
+
+      <button
+        type="button"
+        onClick={onRemove}
+        aria-label="Remove rule"
+        className="ml-auto rounded p-1 text-muted-foreground hover:bg-zinc-100 hover:text-foreground dark:hover:bg-zinc-800"
+      >
+        <Trash2 className="h-3 w-3" />
+      </button>
+    </div>
+  );
+}
+
+// ── Per-kind editors ──────────────────────────────────────────────────
+
+interface SetRuleEditorProps {
+  values: string[];
+  op: SetOp;
+  options: Array<{ label: string; value: string }>;
+  onChange: (values: string[], op: SetOp) => void;
+}
+
+function SetRuleEditor({ values, op, options, onChange }: SetRuleEditorProps) {
+  const toggle = (v: string) => {
+    const next = values.includes(v) ? values.filter((x) => x !== v) : [...values, v];
+    onChange(next, op);
+  };
+  return (
+    <>
+      <OpDropdown ops={SET_OPS} value={op} onChange={(next) => onChange(values, next)} />
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" size="sm" className="h-7 gap-1 text-xs font-mono">
+            {values.length === 0 ? 'Pick values…' : `${values.length} selected`}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="max-h-72 overflow-y-auto">
+          {options.length === 0 && (
+            <DropdownMenuItem disabled className="text-muted-foreground italic">
+              No options available — load a model first.
+            </DropdownMenuItem>
+          )}
+          {options.map((o) => (
+            <DropdownMenuItem
+              key={o.value}
+              onSelect={(e) => {
+                // Keep the menu open for multi-select.
+                e.preventDefault();
+                toggle(o.value);
+              }}
+              className="font-mono"
+            >
+              <span className="mr-2 inline-block w-3 text-center">
+                {values.includes(o.value) ? '✓' : ''}
+              </span>
+              {o.label}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {values.length > 0 && (
+        <div className="flex flex-wrap items-center gap-1">
+          {values.map((v) => (
+            <span
+              key={v}
+              className="inline-flex items-center gap-1 rounded bg-zinc-100 px-1.5 py-0.5 text-[10px] font-mono dark:bg-zinc-800"
+            >
+              {v}
+              <button
+                type="button"
+                aria-label={`Remove ${v}`}
+                onClick={() => toggle(v)}
+                className="text-muted-foreground hover:text-foreground"
+              >
+                ×
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+    </>
+  );
+}
+
+function PredefinedTypeEditor({
+  values,
+  op,
+  onChange,
+}: {
+  values: string[];
+  op: SetOp;
+  onChange: (values: string[], op: SetOp) => void;
+}) {
+  // Predefined types aren't materialised in the parser today — pick
+  // them via free-text. The user enters comma-separated values.
+  const text = values.join(', ');
+  return (
+    <>
+      <OpDropdown ops={SET_OPS} value={op} onChange={(next) => onChange(values, next)} />
+      <Input
+        placeholder="e.g. SOLIDWALL, PARTITIONING"
+        value={text}
+        onChange={(e) =>
+          onChange(
+            e.target.value.split(',').map((s) => s.trim()).filter((s) => s.length > 0),
+            op,
+          )
+        }
+        className="h-7 w-72 text-xs font-mono"
+      />
+    </>
+  );
+}
+
+function NameEditor({
+  op,
+  value,
+  onChange,
+}: {
+  op: StringOp;
+  value: string;
+  onChange: (op: StringOp, value: string) => void;
+}) {
+  return (
+    <>
+      <OpDropdown ops={STRING_OPS} value={op} onChange={(next) => onChange(next, value)} />
+      <Input
+        placeholder="text"
+        value={value}
+        onChange={(e) => onChange(op, e.target.value)}
+        className="h-7 w-56 text-xs font-mono"
+      />
+    </>
+  );
+}
+
+interface PropertyEditorProps {
+  rule: Extract<FilterRule, { kind: 'property' }>;
+  psetQto: RuleRowProps['psetQto'];
+  valueSchema: FilterValueSchema | null;
+  onChange: (next: FilterRule) => void;
+}
+
+function PropertyEditor({ rule, psetQto, valueSchema, onChange }: PropertyEditorProps) {
+  const psetNames = useMemo(() => (psetQto ? psetQto.psets.map(([n]) => n) : []), [psetQto]);
+  const propNames = useMemo(() => {
+    if (!psetQto) return [];
+    const entry = psetQto.psets.find(([n]) => n === rule.setName);
+    return entry ? Array.from(entry[1]) : [];
+  }, [psetQto, rule.setName]);
+  const valueOptions = useMemo(
+    () => valueSchema?.propertyValues.get(propValueKey(rule.setName, rule.propertyName)) ?? NO_OPTIONS,
+    [valueSchema, rule.setName, rule.propertyName],
+  );
+
+  const valueless = rule.op === 'isSet' || rule.op === 'isNotSet';
+
+  return (
+    <>
+      <ComboInput
+        placeholder="Pset_… (e.g. Pset_WallCommon)"
+        value={rule.setName}
+        options={psetNames}
+        className="h-7 w-52 text-xs font-mono"
+        onChange={(next) => onChange({ ...rule, setName: next, propertyName: '' })}
+      />
+      <span className="text-muted-foreground">.</span>
+      <ComboInput
+        placeholder="prop name"
+        value={rule.propertyName}
+        options={propNames}
+        className="h-7 w-44 text-xs font-mono"
+        onChange={(next) => onChange({ ...rule, propertyName: next })}
+      />
+      <OpDropdown ops={VALUE_OPS} value={rule.op} onChange={(next) => onChange({ ...rule, op: next })} />
+      {!valueless && (
+        <ComboInput
+          placeholder="value"
+          value={rule.value}
+          options={valueOptions}
+          className="h-7 w-44 text-xs font-mono"
+          onChange={(value) => onChange({ ...rule, value })}
+        />
+      )}
+    </>
+  );
+}
+
+interface QuantityEditorProps {
+  rule: Extract<FilterRule, { kind: 'quantity' }>;
+  psetQto: RuleRowProps['psetQto'];
+  onChange: (next: FilterRule) => void;
+}
+
+function QuantityEditor({ rule, psetQto, onChange }: QuantityEditorProps) {
+  const qsetNames = useMemo(() => (psetQto ? psetQto.qtos.map(([n]) => n) : []), [psetQto]);
+  const qtyNames = useMemo(() => {
+    if (!psetQto) return [];
+    const entry = psetQto.qtos.find(([n]) => n === rule.setName);
+    return entry ? entry[1].map(([n]) => n) : [];
+  }, [psetQto, rule.setName]);
+
+  return (
+    <>
+      <ComboInput
+        placeholder="Qto_… (e.g. Qto_WallBaseQuantities)"
+        value={rule.setName}
+        options={qsetNames}
+        className="h-7 w-56 text-xs font-mono"
+        onChange={(next) => onChange({ ...rule, setName: next, quantityName: '' })}
+      />
+      <span className="text-muted-foreground">.</span>
+      <ComboInput
+        placeholder="quantity name"
+        value={rule.quantityName}
+        options={qtyNames}
+        className="h-7 w-44 text-xs font-mono"
+        onChange={(next) => onChange({ ...rule, quantityName: next })}
+      />
+      <OpDropdown ops={NUMERIC_OPS} value={rule.op} onChange={(next) => onChange({ ...rule, op: next })} />
+      <Input
+        type="number"
+        placeholder="value"
+        value={rule.value}
+        onChange={(e) => onChange({ ...rule, value: Number.parseFloat(e.target.value) || 0 })}
+        className="h-7 w-32 text-xs font-mono"
+      />
+    </>
+  );
+}
+
+function MaterialEditor({
+  op,
+  value,
+  options,
+  onChange,
+}: {
+  op: StringOp;
+  value: string;
+  options: ReadonlyArray<string>;
+  onChange: (op: StringOp, value: string) => void;
+}) {
+  return (
+    <>
+      <OpDropdown ops={STRING_OPS} value={op} onChange={(next) => onChange(next, value)} />
+      <ComboInput
+        placeholder="material name (e.g. Concrete)"
+        value={value}
+        options={options}
+        className="h-7 w-56 text-xs font-mono"
+        onChange={(v) => onChange(op, v)}
+      />
+    </>
+  );
+}
+
+function ClassificationEditor({
+  rule,
+  valueSchema,
+  onChange,
+}: {
+  rule: Extract<FilterRule, { kind: 'classification' }>;
+  valueSchema: FilterValueSchema | null;
+  onChange: (next: FilterRule) => void;
+}) {
+  const valueless = rule.op === 'isSet' || rule.op === 'isNotSet';
+  return (
+    <>
+      <ComboInput
+        placeholder="system (optional)"
+        value={rule.system ?? ''}
+        options={valueSchema?.classificationSystems ?? NO_OPTIONS}
+        className="h-7 w-40 text-xs font-mono"
+        aria-label="Classification system — leave blank for any"
+        onChange={(v) => onChange(Rule.classification(v, rule.op, rule.value))}
+      />
+      <OpDropdown
+        ops={CLASSIFICATION_OPS}
+        value={rule.op}
+        onChange={(next) => onChange(Rule.classification(rule.system ?? '', next, rule.value))}
+      />
+      {!valueless && (
+        <ComboInput
+          placeholder="code or name"
+          value={rule.value}
+          options={valueSchema?.classifications ?? NO_OPTIONS}
+          className="h-7 w-44 text-xs font-mono"
+          onChange={(v) => onChange(Rule.classification(rule.system ?? '', rule.op, v))}
+        />
+      )}
+    </>
+  );
+}
+
+function ElevationEditor({
+  op,
+  value,
+  onChange,
+}: {
+  op: NumericOp;
+  value: number;
+  onChange: (op: NumericOp, value: number) => void;
+}) {
+  return (
+    <>
+      <OpDropdown ops={NUMERIC_OPS} value={op} onChange={(next) => onChange(next, value)} />
+      <Input
+        type="number"
+        step="any"
+        placeholder="metres"
+        value={value}
+        onChange={(e) => onChange(op, Number.parseFloat(e.target.value) || 0)}
+        className="h-7 w-28 text-xs font-mono"
+      />
+      <span className="text-[10px] text-muted-foreground">m (storey elevation)</span>
+    </>
+  );
+}
+
+// ── Building-block widgets ───────────────────────────────────────────
+
+function OpDropdown<T extends string>({
+  ops,
+  value,
+  onChange,
+}: {
+  ops: ReadonlyArray<T>;
+  value: T;
+  onChange: (next: T) => void;
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm" className="h-7 min-w-[3.5rem] gap-1 text-xs font-mono">
+          {OP_LABEL[value] ?? value}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        {ops.map((op) => (
+          <DropdownMenuItem key={op} onSelect={() => onChange(op)} className="font-mono">
+            {OP_LABEL[op] ?? op}
+            <span className="ml-2 text-[10px] text-muted-foreground">{op}</span>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+

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

@@ -21,7 +21,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { Play, AlertCircle, Download } from 'lucide-react';
+import { Play, AlertCircle, Download, ListPlus } from 'lucide-react';
 import { useShallow } from 'zustand/react/shallow';
 import { useViewerStore } from '@/store';
 import { toGlobalIdFromModels } from '@/store/globalId';
@@ -37,6 +37,7 @@ import { evaluateFilterRulesFederated } from '@/lib/search/filter-evaluate';
 import { runTier0Scan, type ScanModel } from '@/lib/search/tier0-scan';
 import { queryTier1Indexes, type Tier1Index } from '@/lib/search/tier1-index';
 import { downloadResult } from '@/lib/search/result-export';
+import type { ListDefinition } from '@/lib/lists';
 import { SearchModalFilterBuilder } from './SearchModal.filter.builder';
 
 /** Rows per virtualizer page — tuned for the result table row height. */
@@ -65,6 +66,9 @@ export function SearchModalFilter() {
     setSelectedEntity,
     setSelectedEntityId,
     cameraCallbacks,
+    setPendingListDraft,
+    setListPanelVisible,
+    setSearchModalOpen,
   } = useViewerStore(
     useShallow((s) => ({
       searchFilter: s.searchFilter,
@@ -81,6 +85,9 @@ export function SearchModalFilter() {
       setSelectedEntity: s.setSelectedEntity,
       setSelectedEntityId: s.setSelectedEntityId,
       cameraCallbacks: s.cameraCallbacks,
+      setPendingListDraft: s.setPendingListDraft,
+      setListPanelVisible: s.setListPanelVisible,
+      setSearchModalOpen: s.setSearchModalOpen,
     })),
   );
 
@@ -257,6 +264,52 @@ export function SearchModalFilter() {
     downloadResult(searchFilterResult, format);
   }, [searchFilterResult]);
 
+  /** Freeze the current filter result into a new list — a per-model snapshot
+   *  of the matched express IDs — and open the list builder to configure
+   *  columns. Keyed by model so federated results don't over-select when
+   *  local express IDs collide across files. */
+  const handleCreateList = useCallback(() => {
+    const result = searchFilterResult;
+    if (!result || result.rows.length === 0) return;
+    const idIdx = result.columns.indexOf('express_id');
+    if (idIdx < 0) return;
+    const modelIdx = result.columns.indexOf('model_id'); // only present for multi-model runs
+
+    const byModel: Record<string, number[]> = {};
+    const seen = new Set<string>();
+    for (const row of result.rows) {
+      const id = Number(row[idIdx]);
+      if (!Number.isFinite(id) || id <= 0) continue;
+      const modelId = modelIdx >= 0 && typeof row[modelIdx] === 'string'
+        ? (row[modelIdx] as string)
+        : (activeModelId ?? 'default');
+      const key = `${modelId}:${id}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      (byModel[modelId] ??= []).push(id);
+    }
+    const total = Object.values(byModel).reduce((n, ids) => n + ids.length, 0);
+    if (total === 0) return;
+
+    const now = Date.now();
+    const draft: ListDefinition = {
+      id: crypto.randomUUID(),
+      name: 'Filter result',
+      createdAt: now,
+      updatedAt: now,
+      entityTypes: [],
+      expressIdsByModel: byModel,
+      conditions: [],
+      columns: [
+        { id: 'attr-name', source: 'attribute', propertyName: 'Name', label: 'Name' },
+        { id: 'attr-class', source: 'attribute', propertyName: 'Class', label: 'Class' },
+      ],
+    };
+    setPendingListDraft(draft);
+    setListPanelVisible(true);
+    setSearchModalOpen(false);
+  }, [searchFilterResult, activeModelId, setPendingListDraft, setListPanelVisible, setSearchModalOpen]);
+
   if (!activeStore) {
     return (
       <div className="flex flex-1 items-center justify-center p-8 text-center text-sm text-muted-foreground">
@@ -319,6 +372,16 @@ export function SearchModalFilter() {
         )}
 
         <div className="ml-auto flex items-center gap-1.5">
+          <Button
+            variant="ghost"
+            size="sm"
+            disabled={!searchFilterResult || searchFilterResult.rows.length === 0}
+            onClick={handleCreateList}
+            className="h-7 gap-1 text-xs"
+            title="Freeze these results into a new list"
+          >
+            <ListPlus className="h-3 w-3" /> Create list
+          </Button>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button

package/src/components/viewer/SearchModal.tsx

@@ -45,19 +45,21 @@ export function SearchModal() {
   const {
     searchQuery,
     searchModalOpen,
+    searchModalTab,
     searchIndexes,
     models,
     setSearchModalOpen,
-    toggleSearchModal,
+    setSearchModalTab,
     setSearchQuery,
   } = useViewerStore(
     useShallow((s) => ({
       searchQuery: s.searchQuery,
       searchModalOpen: s.searchModalOpen,
+      searchModalTab: s.searchModalTab,
       searchIndexes: s.searchIndexes,
       models: s.models,
       setSearchModalOpen: s.setSearchModalOpen,
-      toggleSearchModal: s.toggleSearchModal,
+      setSearchModalTab: s.setSearchModalTab,
       setSearchQuery: s.setSearchQuery,
     })),
   );
@@ -125,19 +127,26 @@ export function SearchModal() {
     return out;
   }, [tier0Models, tier1Indexes, debouncedQuery]);
 
-  /** Global ⌘⇧F / Ctrl+⇧F toggle — opens from anywhere, also closes when open. */
+  /** Global ⌘⇧F / Ctrl+⇧F toggle — opens from anywhere, also closes when open.
+   *  This is a text-search entry point, so opening always lands on the Search
+   *  tab (the controlled tab otherwise remembers the last-used Filter tab). */
   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();
+        if (searchModalOpen) {
+          setSearchModalOpen(false);
+        } else {
+          setSearchModalTab('search');
+          setSearchModalOpen(true);
+        }
       }
     };
     window.addEventListener('keydown', handler);
     return () => window.removeEventListener('keydown', handler);
-  }, [toggleSearchModal]);
+  }, [searchModalOpen, setSearchModalOpen, setSearchModalTab]);
 
   /**
    * Record the query in recents on the modal-close *transition* — once
@@ -189,7 +198,11 @@ export function SearchModal() {
         onEscapeKeyDown={close}
       >
         <DialogTitle className="sr-only">Advanced Search</DialogTitle>
-        <Tabs defaultValue="search" className="flex flex-col flex-1 min-h-0">
+        <Tabs
+          value={searchModalTab}
+          onValueChange={(v) => setSearchModalTab(v as typeof searchModalTab)}
+          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">

package/src/components/viewer/ViewerLayout.tsx

@@ -28,6 +28,7 @@ import { HoverTooltip } from './HoverTooltip';
 import { BCFPanel } from './BCFPanel';
 import { IDSPanel } from './IDSPanel';
 import { LensPanel } from './LensPanel';
+import { ClashPanel } from './ClashPanel';
 import { ListPanel } from './lists/ListPanel';
 import { ScriptPanel } from './ScriptPanel';
 import { GanttPanel } from './schedule/GanttPanel';
@@ -132,6 +133,8 @@ export function ViewerLayout() {
   const setListPanelVisible = useViewerStore((s) => s.setListPanelVisible);
   const lensPanelVisible = useViewerStore((s) => s.lensPanelVisible);
   const setLensPanelVisible = useViewerStore((s) => s.setLensPanelVisible);
+  const clashPanelVisible = useViewerStore((s) => s.clashPanelVisible);
+  const setClashPanelVisible = useViewerStore((s) => s.setClashPanelVisible);
   const scriptPanelVisible = useViewerStore((s) => s.scriptPanelVisible);
   const setScriptPanelVisible = useViewerStore((s) => s.setScriptPanelVisible);
   const ganttPanelVisible = useViewerStore((s) => s.ganttPanelVisible);
@@ -342,6 +345,8 @@ export function ViewerLayout() {
                       <AddElementPanel onClose={() => setActiveTool('select')} />
                     ) : lensPanelVisible ? (
                       <LensPanel onClose={() => setLensPanelVisible(false)} />
+                    ) : clashPanelVisible ? (
+                      <ClashPanel onClose={() => setClashPanelVisible(false)} />
                     ) : idsPanelVisible ? (
                       <IDSPanel onClose={() => setIdsPanelVisible(false)} />
                     ) : bcfPanelVisible ? (