@ifc-lite/viewer 1.7.0 → 1.9.0

package/src/components/viewer/LensPanel.tsx

@@ -7,18 +7,28 @@
  *
  * Shows saved lens presets and allows activating/deactivating them.
  * Users can create, edit, and delete custom lenses with full rule editing.
- * When a lens is active, a color legend displays the matched rules.
+ * Supports both manual rule-based lenses and auto-color lenses that
+ * automatically color entities by distinct values of any IFC data column.
+ * When a lens is active, a color legend displays the matched rules/values.
  * Unmatched entities are ghosted (semi-transparent) for visual context.
+ *
+ * All dropdowns are populated dynamically from the loaded model data
+ * via discoveredLensData (IFC types, property sets, quantity sets,
+ * classification systems, materials). No hardcoded IFC class lists.
  */
 
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { X, EyeOff, Palette, Check, Plus, Trash2, Pencil, Save, Download, Upload } from 'lucide-react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { X, EyeOff, Palette, Check, Plus, Trash2, Pencil, Save, Download, Upload, Sparkles, Search, ChevronDown, ArrowUpDown } from 'lucide-react';
+import { discoverDataSources } from '@ifc-lite/lens';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { useViewerStore } from '@/store';
 import { useLens } from '@/hooks/useLens';
-import type { Lens, LensRule } from '@/store/slices/lensSlice';
-import { COMMON_IFC_CLASSES, LENS_PALETTE } from '@/store/slices/lensSlice';
+import { createLensDataProvider } from '@/lib/lens';
+import type { Lens, LensRule, LensCriteria, AutoColorSpec, AutoColorLegendEntry, DiscoveredLensData } from '@/store/slices/lensSlice';
+import {
+  LENS_PALETTE, ENTITY_ATTRIBUTE_NAMES, AUTO_COLOR_SOURCES,
+} from '@/store/slices/lensSlice';
 
 /** Format large counts compactly: 1234 → "1.2k" */
 function formatCount(n: number): string {
@@ -26,10 +36,123 @@ function formatCount(n: number): string {
   return String(n);
 }
 
+/** Human-readable label for source / criteria types (shared) */
+const TYPE_LABELS: Record<string, string> = {
+  ifcType: 'IFC Class',
+  attribute: 'Attribute',
+  property: 'Property',
+  quantity: 'Quantity',
+  classification: 'Classification',
+  material: 'Material',
+};
+
 interface LensPanelProps {
   onClose?: () => void;
 }
 
+// ─── Searchable dropdown (for large dynamic lists) ──────────────────────────
+
+function SearchableSelect({
+  value,
+  options,
+  onChange,
+  placeholder,
+  className,
+  displayFn,
+}: {
+  value: string;
+  options: readonly string[];
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  displayFn?: (v: string) => string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [filter, setFilter] = useState('');
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const filtered = useMemo(() => {
+    if (!filter) return options;
+    const q = filter.toLowerCase();
+    return options.filter(o => o.toLowerCase().includes(q));
+  }, [options, filter]);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+        setFilter('');
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  const display = displayFn ?? ((v: string) => v);
+
+  return (
+    <div ref={containerRef} className={cn('relative', className)}>
+      <button
+        type="button"
+        onClick={() => {
+          setOpen(!open);
+          if (!open) setTimeout(() => inputRef.current?.focus(), 0);
+        }}
+        className={cn(
+          'w-full flex items-center justify-between gap-1 text-left',
+          'text-xs px-1.5 py-1 bg-white dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-600 text-zinc-900 dark:text-zinc-100 rounded-sm',
+          !value && 'text-zinc-400 dark:text-zinc-500',
+        )}
+      >
+        <span className="truncate">{value ? display(value) : (placeholder ?? 'Select...')}</span>
+        <ChevronDown className="h-3 w-3 flex-shrink-0 opacity-50" />
+      </button>
+      {open && (
+        <div className="absolute z-50 top-full left-0 right-0 mt-0.5 bg-white dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-600 rounded-sm shadow-lg max-h-[200px] flex flex-col">
+          {options.length > 8 && (
+            <div className="flex items-center gap-1 px-1.5 py-1 border-b border-zinc-200 dark:border-zinc-700">
+              <Search className="h-3 w-3 text-zinc-400 flex-shrink-0" />
+              <input
+                ref={inputRef}
+                type="text"
+                value={filter}
+                onChange={(e) => setFilter(e.target.value)}
+                placeholder="Search..."
+                className="flex-1 text-xs bg-transparent border-0 outline-none text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400"
+              />
+            </div>
+          )}
+          <div className="overflow-y-auto flex-1">
+            {filtered.length === 0 && (
+              <div className="px-2 py-1.5 text-xs text-zinc-400">No matches</div>
+            )}
+            {filtered.map(opt => (
+              <button
+                key={opt}
+                type="button"
+                className={cn(
+                  'w-full text-left px-2 py-1 text-xs hover:bg-zinc-100 dark:hover:bg-zinc-700 truncate',
+                  opt === value && 'bg-primary/10 text-primary font-medium',
+                )}
+                onClick={() => {
+                  onChange(opt);
+                  setOpen(false);
+                  setFilter('');
+                }}
+              >
+                {display(opt)}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
 // ─── Rule display (read-only, clickable for isolation) ──────────────────────
 
 const RuleRow = memo(function RuleRow({
@@ -52,20 +175,16 @@ const RuleRow = memo(function RuleRow({
         'group/row relative flex items-center gap-2 pl-3 pr-3 py-1.5 text-xs',
         'border-l-2 transition-[border-color,background-color] duration-100',
         !rule.enabled && 'opacity-40',
-        // Default: transparent left border
         !isIsolated && !isEmpty && 'border-l-transparent',
-        // Hover: accent left border + subtle bg (only for clickable rows)
         isClickable && 'cursor-pointer hover:border-l-primary/70 hover:bg-zinc-100/80 dark:hover:bg-zinc-700/40',
-        // Isolated: solid accent border + bg
         isIsolated && 'border-l-primary bg-primary/8 dark:bg-primary/15',
-        // Empty: muted, non-interactive
         isEmpty && 'border-l-transparent opacity-50 cursor-default',
       )}
       role={isClickable ? 'button' : undefined}
       tabIndex={isClickable ? 0 : undefined}
       onClick={(e) => { if (isClickable) { e.stopPropagation(); onClick(); } }}
       onKeyDown={(e) => { if (isClickable && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); onClick(); } }}
-      title={isClickable ? 'Click to isolate / show only this class' : isEmpty ? 'No matching entities' : undefined}
+      title={isClickable ? 'Click to isolate / show only this group' : isEmpty ? 'No matching entities' : undefined}
     >
       <div
         className={cn(
@@ -101,57 +220,376 @@ const RuleRow = memo(function RuleRow({
   );
 });
 
-// ─── Rule editor (inline editing) ───────────────────────────────────────────
+// ─── Auto-color legend row (read-only, clickable for isolation) ─────────────
+
+const AutoColorRow = memo(function AutoColorRow({
+  entry,
+  isIsolated,
+  onClick,
+}: {
+  entry: AutoColorLegendEntry;
+  isIsolated?: boolean;
+  onClick?: () => void;
+}) {
+  const isEmpty = entry.count === 0;
+  const isClickable = !!onClick && !isEmpty;
+
+  return (
+    <div
+      className={cn(
+        'group/row relative flex items-center gap-2 pl-3 pr-3 py-1.5 text-xs',
+        'border-l-2 transition-[border-color,background-color] duration-100',
+        !isIsolated && !isEmpty && 'border-l-transparent',
+        isClickable && 'cursor-pointer hover:border-l-primary/70 hover:bg-zinc-100/80 dark:hover:bg-zinc-700/40',
+        isIsolated && 'border-l-primary bg-primary/8 dark:bg-primary/15',
+        isEmpty && 'border-l-transparent opacity-50 cursor-default',
+      )}
+      role={isClickable ? 'button' : undefined}
+      tabIndex={isClickable ? 0 : undefined}
+      onClick={(e) => { if (isClickable) { e.stopPropagation(); onClick(); } }}
+      onKeyDown={(e) => { if (isClickable && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); onClick(); } }}
+      title={isClickable ? 'Click to isolate / show only this value' : undefined}
+    >
+      <div
+        className="w-3 h-3 rounded-sm flex-shrink-0 ring-1 ring-black/10 dark:ring-white/20"
+        style={{ backgroundColor: entry.color }}
+      />
+      <span className="flex-1 truncate font-medium text-zinc-900 dark:text-zinc-50">
+        {entry.name}
+      </span>
+      {isIsolated && (
+        <span className="text-[10px] uppercase tracking-wider font-bold text-primary">
+          isolated
+        </span>
+      )}
+      <span className="text-[10px] tabular-nums font-mono min-w-[2ch] text-right text-zinc-400 dark:text-zinc-500">
+        {formatCount(entry.count)}
+      </span>
+    </div>
+  );
+});
+
+// ─── Rule editor (inline editing with criteria type selector) ────────────────
 
 function RuleEditor({
   rule,
   onChange,
   onRemove,
+  discovered,
+  onRequestDiscovery,
 }: {
   rule: LensRule;
   onChange: (patch: Partial<LensRule>) => void;
   onRemove: () => void;
+  discovered: DiscoveredLensData | null;
+  onRequestDiscovery: (categories: { properties?: boolean; quantities?: boolean; classifications?: boolean; materials?: boolean }) => void;
 }) {
+  const criteriaType = rule.criteria.type;
+
+  // Trigger lazy discovery when user selects a criteria type that needs it
+  useEffect(() => {
+    if (!discovered) return;
+    if (criteriaType === 'property' && !discovered.propertySets) {
+      onRequestDiscovery({ properties: true });
+    } else if (criteriaType === 'quantity' && !discovered.quantitySets) {
+      onRequestDiscovery({ quantities: true });
+    } else if (criteriaType === 'classification' && !discovered.classificationSystems) {
+      onRequestDiscovery({ classifications: true });
+    } else if (criteriaType === 'material' && !discovered.materials) {
+      onRequestDiscovery({ materials: true });
+    }
+  }, [criteriaType, discovered, onRequestDiscovery]);
+
+  // Derived lists from discovered data
+  const ifcClasses = useMemo(() => discovered?.classes ?? [], [discovered]);
+  const psetNames = useMemo((): string[] => {
+    if (!discovered?.propertySets) return [];
+    return Array.from(discovered.propertySets.keys()).sort();
+  }, [discovered]);
+  const selectedPsetProps = useMemo(() => {
+    if (!discovered?.propertySets || !rule.criteria.propertySet) return [];
+    return discovered.propertySets.get(rule.criteria.propertySet) ?? [];
+  }, [discovered, rule.criteria.propertySet]);
+  const qsetNames = useMemo((): string[] => {
+    if (!discovered?.quantitySets) return [];
+    return Array.from(discovered.quantitySets.keys()).sort();
+  }, [discovered]);
+  const selectedQsetQuants = useMemo(() => {
+    if (!discovered?.quantitySets || !rule.criteria.quantitySet) return [];
+    return discovered.quantitySets.get(rule.criteria.quantitySet) ?? [];
+  }, [discovered, rule.criteria.quantitySet]);
+  const classificationSystems = useMemo(() => discovered?.classificationSystems ?? [], [discovered]);
+  const materialNames = useMemo(() => discovered?.materials ?? [], [discovered]);
+
+  const handleCriteriaTypeChange = (newType: LensCriteria['type']) => {
+    const base: LensCriteria = { type: newType };
+    switch (newType) {
+      case 'ifcType':
+        base.ifcType = '';
+        break;
+      case 'attribute':
+        base.attributeName = 'Name';
+        base.operator = 'contains';
+        base.attributeValue = '';
+        break;
+      case 'property':
+        base.propertySet = '';
+        base.propertyName = '';
+        base.operator = 'contains';
+        base.propertyValue = '';
+        break;
+      case 'quantity':
+        base.quantitySet = '';
+        base.quantityName = '';
+        base.operator = 'exists';
+        break;
+      case 'classification':
+        base.classificationSystem = '';
+        base.classificationCode = '';
+        break;
+      case 'material':
+        base.materialName = '';
+        break;
+    }
+    onChange({ criteria: base, name: rule.name === 'New Rule' ? TYPE_LABELS[newType] : rule.name });
+  };
+
+  /** Derive a human-readable name from the criteria */
+  const deriveRuleName = (criteria: LensCriteria): string => {
+    switch (criteria.type) {
+      case 'ifcType': return criteria.ifcType ? criteria.ifcType.replace('Ifc', '') : 'New Rule';
+      case 'attribute': return criteria.attributeValue || criteria.attributeName || 'Attribute';
+      case 'property': return criteria.propertyName || 'Property';
+      case 'quantity': return criteria.quantityName || 'Quantity';
+      case 'classification': return criteria.classificationCode || criteria.classificationSystem || 'Classification';
+      case 'material': return criteria.materialName || 'Material';
+      default: return 'Rule';
+    }
+  };
+
+  const selectClass = 'text-xs px-1.5 py-1 bg-white dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-600 text-zinc-900 dark:text-zinc-100 rounded-sm';
+  const inputClass = 'text-xs px-1.5 py-1 bg-white dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-600 text-zinc-900 dark:text-zinc-100 rounded-sm';
+
   return (
-    <div className="flex items-center gap-1.5 px-2 py-1.5">
-      <input
-        type="color"
-        value={rule.color}
-        onChange={(e) => onChange({ color: e.target.value })}
-        className="w-6 h-6 cursor-pointer border-0 p-0 bg-transparent flex-shrink-0 rounded"
-      />
-      <select
-        value={rule.criteria.ifcType ?? ''}
-        onChange={(e) => {
-          const ifcType = e.target.value;
-          onChange({
-            criteria: { type: 'ifcType', ifcType },
-            name: ifcType ? ifcType.replace('Ifc', '') : rule.name,
-          });
-        }}
-        className="flex-1 min-w-0 text-xs px-1.5 py-1 bg-white dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-600 text-zinc-900 dark:text-zinc-100 rounded-sm"
-      >
-        <option value="">Class...</option>
-        {COMMON_IFC_CLASSES.map(t => (
-          <option key={t} value={t}>{t.replace('Ifc', '')}</option>
-        ))}
-      </select>
-      <select
-        value={rule.action}
-        onChange={(e) => onChange({ action: e.target.value as LensRule['action'] })}
-        className="text-xs px-1.5 py-1 bg-white dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-600 text-zinc-900 dark:text-zinc-100 rounded-sm w-[72px]"
-      >
-        <option value="colorize">Color</option>
-        <option value="transparent">Transp</option>
-        <option value="hide">Hide</option>
-      </select>
-      <button
-        onClick={onRemove}
-        className="text-zinc-400 hover:text-red-500 dark:text-zinc-500 dark:hover:text-red-400 p-0.5 flex-shrink-0"
-        title="Remove rule"
-      >
-        <X className="h-3.5 w-3.5" />
-      </button>
+    <div className="px-2 py-1.5 space-y-1">
+      <div className="flex items-center gap-1.5">
+        <input
+          type="color"
+          value={rule.color}
+          onChange={(e) => onChange({ color: e.target.value })}
+          className="w-6 h-6 cursor-pointer border-0 p-0 bg-transparent flex-shrink-0 rounded"
+        />
+        {/* Criteria type selector */}
+        <select
+          value={criteriaType}
+          onChange={(e) => handleCriteriaTypeChange(e.target.value as LensCriteria['type'])}
+          className={cn(selectClass, 'w-[90px]')}
+        >
+          {Object.entries(TYPE_LABELS).map(([val, label]) => (
+            <option key={val} value={val}>{label}</option>
+          ))}
+        </select>
+
+        {/* IFC Class: searchable dropdown from discovered classes */}
+        {criteriaType === 'ifcType' && (
+          <SearchableSelect
+            value={rule.criteria.ifcType ?? ''}
+            options={ifcClasses}
+            onChange={(ifcType) => {
+              onChange({
+                criteria: { ...rule.criteria, ifcType },
+                name: ifcType ? ifcType.replace('Ifc', '') : rule.name,
+              });
+            }}
+            placeholder="Class..."
+            className="flex-1 min-w-0"
+            displayFn={(v) => v.replace('Ifc', '')}
+          />
+        )}
+
+        {/* Attribute: dropdown for name, text input for value */}
+        {criteriaType === 'attribute' && (
+          <>
+            <select
+              value={rule.criteria.attributeName ?? 'Name'}
+              onChange={(e) => {
+                const updated = { ...rule.criteria, attributeName: e.target.value };
+                onChange({ criteria: updated, name: deriveRuleName(updated) });
+              }}
+              className={cn(selectClass, 'w-[80px]')}
+            >
+              {ENTITY_ATTRIBUTE_NAMES.map(a => <option key={a} value={a}>{a}</option>)}
+            </select>
+            <input
+              type="text"
+              value={rule.criteria.attributeValue ?? ''}
+              onChange={(e) => {
+                const updated = { ...rule.criteria, attributeValue: e.target.value };
+                onChange({ criteria: updated, name: deriveRuleName(updated) });
+              }}
+              placeholder="value..."
+              className={cn(inputClass, 'flex-1 min-w-0')}
+            />
+          </>
+        )}
+
+        {/* Property: searchable dropdowns for pset + property name */}
+        {criteriaType === 'property' && (
+          <>
+            <SearchableSelect
+              value={rule.criteria.propertySet ?? ''}
+              options={psetNames}
+              onChange={(pset) => onChange({ criteria: { ...rule.criteria, propertySet: pset, propertyName: '' } })}
+              placeholder="Pset..."
+              className="w-[100px]"
+            />
+            <SearchableSelect
+              value={rule.criteria.propertyName ?? ''}
+              options={selectedPsetProps}
+              onChange={(prop) => {
+                const updated = { ...rule.criteria, propertyName: prop };
+                onChange({ criteria: updated, name: deriveRuleName(updated) });
+              }}
+              placeholder="Prop..."
+              className="flex-1 min-w-0"
+            />
+          </>
+        )}
+
+        {/* Quantity: searchable dropdowns for qset + quantity name */}
+        {criteriaType === 'quantity' && (
+          <>
+            <SearchableSelect
+              value={rule.criteria.quantitySet ?? ''}
+              options={qsetNames}
+              onChange={(qset) => onChange({ criteria: { ...rule.criteria, quantitySet: qset, quantityName: '' } })}
+              placeholder="Qset..."
+              className="w-[100px]"
+            />
+            <SearchableSelect
+              value={rule.criteria.quantityName ?? ''}
+              options={selectedQsetQuants}
+              onChange={(qty) => {
+                const updated = { ...rule.criteria, quantityName: qty };
+                onChange({ criteria: updated, name: deriveRuleName(updated) });
+              }}
+              placeholder="Qty..."
+              className="flex-1 min-w-0"
+            />
+          </>
+        )}
+
+        {/* Classification: searchable dropdown for system, text input for code */}
+        {criteriaType === 'classification' && (
+          <>
+            <SearchableSelect
+              value={rule.criteria.classificationSystem ?? ''}
+              options={classificationSystems}
+              onChange={(sys) => onChange({ criteria: { ...rule.criteria, classificationSystem: sys } })}
+              placeholder="System..."
+              className="w-[100px]"
+            />
+            <input
+              type="text"
+              value={rule.criteria.classificationCode ?? ''}
+              onChange={(e) => {
+                const updated = { ...rule.criteria, classificationCode: e.target.value };
+                onChange({ criteria: updated, name: deriveRuleName(updated) });
+              }}
+              placeholder="Code..."
+              className={cn(inputClass, 'flex-1 min-w-0')}
+            />
+          </>
+        )}
+
+        {/* Material: searchable dropdown from discovered materials */}
+        {criteriaType === 'material' && (
+          <SearchableSelect
+            value={rule.criteria.materialName ?? ''}
+            options={materialNames}
+            onChange={(mat) => {
+              const updated = { ...rule.criteria, materialName: mat };
+              onChange({ criteria: updated, name: deriveRuleName(updated) });
+            }}
+            placeholder="Material..."
+            className="flex-1 min-w-0"
+          />
+        )}
+
+        <button
+          onClick={onRemove}
+          className="text-zinc-400 hover:text-red-500 dark:text-zinc-500 dark:hover:text-red-400 p-0.5 flex-shrink-0"
+          title="Remove rule"
+        >
+          <X className="h-3.5 w-3.5" />
+        </button>
+      </div>
+
+      {/* Second row: operator + value for property/quantity/attribute */}
+      {(criteriaType === 'property' || criteriaType === 'quantity') && (
+        <div className="flex items-center gap-1.5 pl-[30px]">
+          <select
+            value={rule.criteria.operator ?? 'exists'}
+            onChange={(e) => onChange({ criteria: { ...rule.criteria, operator: e.target.value as LensCriteria['operator'] } })}
+            className={cn(selectClass, 'w-[80px]')}
+          >
+            <option value="exists">Exists</option>
+            <option value="equals">Equals</option>
+            <option value="contains">Contains</option>
+          </select>
+          {rule.criteria.operator && rule.criteria.operator !== 'exists' && (
+            <input
+              type="text"
+              value={
+                criteriaType === 'property'
+                  ? (rule.criteria.propertyValue ?? '')
+                  : (rule.criteria.quantityValue ?? '')
+              }
+              onChange={(e) => {
+                const key = criteriaType === 'property' ? 'propertyValue' : 'quantityValue';
+                onChange({ criteria: { ...rule.criteria, [key]: e.target.value } });
+              }}
+              placeholder="Value..."
+              className={cn(inputClass, 'flex-1 min-w-0')}
+            />
+          )}
+          <select
+            value={rule.action}
+            onChange={(e) => onChange({ action: e.target.value as LensRule['action'] })}
+            className={cn(selectClass, 'w-[72px]')}
+          >
+            <option value="colorize">Color</option>
+            <option value="transparent">Transp</option>
+            <option value="hide">Hide</option>
+          </select>
+        </div>
+      )}
+
+      {/* Action selector for simple types */}
+      {criteriaType !== 'property' && criteriaType !== 'quantity' && (
+        <div className="flex items-center gap-1.5 pl-[30px]">
+          {criteriaType === 'attribute' && (
+            <select
+              value={rule.criteria.operator ?? 'contains'}
+              onChange={(e) => onChange({ criteria: { ...rule.criteria, operator: e.target.value as LensCriteria['operator'] } })}
+              className={cn(selectClass, 'w-[80px]')}
+            >
+              <option value="equals">Equals</option>
+              <option value="contains">Contains</option>
+              <option value="exists">Exists</option>
+            </select>
+          )}
+          <select
+            value={rule.action}
+            onChange={(e) => onChange({ action: e.target.value as LensRule['action'] })}
+            className={cn(selectClass, 'w-[72px]')}
+          >
+            <option value="colorize">Color</option>
+            <option value="transparent">Transp</option>
+            <option value="hide">Hide</option>
+          </select>
+        </div>
+      )}
     </div>
   );
 }
@@ -162,10 +600,14 @@ function LensEditor({
   initial,
   onSave,
   onCancel,
+  discovered,
+  onRequestDiscovery,
 }: {
   initial: Lens;
   onSave: (lens: Lens) => void;
   onCancel: () => void;
+  discovered: DiscoveredLensData | null;
+  onRequestDiscovery: (categories: { properties?: boolean; quantities?: boolean; classifications?: boolean; materials?: boolean }) => void;
 }) {
   const [name, setName] = useState(initial.name);
   const [rules, setRules] = useState<LensRule[]>(() =>
@@ -192,13 +634,27 @@ function LensEditor({
     setRules(rules.filter((_, i) => i !== index));
   };
 
+  /** Check if a rule has sufficient criteria to be valid */
+  const isRuleValid = (r: LensRule): boolean => {
+    const c = r.criteria;
+    switch (c.type) {
+      case 'ifcType': return !!c.ifcType;
+      case 'attribute': return !!c.attributeName;
+      case 'property': return !!c.propertySet && !!c.propertyName;
+      case 'quantity': return !!c.quantitySet && !!c.quantityName;
+      case 'classification': return !!c.classificationSystem || !!c.classificationCode;
+      case 'material': return !!c.materialName;
+      default: return false;
+    }
+  };
+
   const handleSave = () => {
-    const validRules = rules.filter(r => r.criteria.ifcType);
+    const validRules = rules.filter(isRuleValid);
     if (!name.trim() || validRules.length === 0) return;
     onSave({ ...initial, name: name.trim(), rules: validRules });
   };
 
-  const canSave = name.trim().length > 0 && rules.some(r => r.criteria.ifcType);
+  const canSave = name.trim().length > 0 && rules.some(isRuleValid);
 
   return (
     <div className="border-2 border-primary bg-white dark:bg-zinc-900 rounded-sm">
@@ -222,6 +678,8 @@ function LensEditor({
             rule={rule}
             onChange={(patch) => updateRule(i, patch)}
             onRemove={() => removeRule(i)}
+            discovered={discovered}
+            onRequestDiscovery={onRequestDiscovery}
           />
         ))}
 
@@ -259,6 +717,185 @@ function LensEditor({
   );
 }
 
+// ─── Auto-color lens editor ─────────────────────────────────────────────────
+
+function AutoColorEditor({
+  initial,
+  onSave,
+  onCancel,
+  discovered,
+  onRequestDiscovery,
+}: {
+  initial: { name: string; autoColor: AutoColorSpec };
+  onSave: (lens: Lens) => void;
+  onCancel: () => void;
+  discovered: DiscoveredLensData | null;
+  onRequestDiscovery: (categories: { properties?: boolean; quantities?: boolean; classifications?: boolean; materials?: boolean }) => void;
+}) {
+  const [name, setName] = useState(initial.name);
+  const [source, setSource] = useState<AutoColorSpec['source']>(initial.autoColor.source);
+  const [psetName, setPsetName] = useState(initial.autoColor.psetName ?? '');
+  const [propertyName, setPropertyName] = useState(initial.autoColor.propertyName ?? '');
+
+  const needsPset = source === 'property' || source === 'quantity' || source === 'classification';
+  const needsPropertyName = source === 'attribute' || source === 'property' || source === 'quantity';
+
+  // Trigger lazy discovery when source changes to a category that needs it
+  useEffect(() => {
+    if (!discovered) return;
+    if (source === 'property' && !discovered.propertySets) {
+      onRequestDiscovery({ properties: true });
+    } else if (source === 'quantity' && !discovered.quantitySets) {
+      onRequestDiscovery({ quantities: true });
+    } else if (source === 'material' && !discovered.materials) {
+      onRequestDiscovery({ materials: true });
+    } else if (source === 'classification' && !discovered.classificationSystems) {
+      onRequestDiscovery({ classifications: true });
+    }
+  }, [source, discovered, onRequestDiscovery]);
+
+  // Dynamic options from discovered data
+  const psetOptions = useMemo(() => {
+    if (!discovered) return [];
+    if (source === 'quantity') return discovered.quantitySets ? Array.from(discovered.quantitySets.keys()).sort() : [];
+    if (source === 'classification') return discovered.classificationSystems ?? [];
+    return discovered.propertySets ? Array.from(discovered.propertySets.keys()).sort() : [];
+  }, [discovered, source]);
+
+  const propertyOptions = useMemo(() => {
+    if (!discovered) return [];
+    if (source === 'property') return discovered.propertySets?.get(psetName) ?? [];
+    if (source === 'quantity') return discovered.quantitySets?.get(psetName) ?? [];
+    return [];
+  }, [discovered, source, psetName]);
+
+  const handleSave = () => {
+    if (!name.trim()) return;
+    if (needsPset && !psetName.trim()) return;
+    if (needsPropertyName && !propertyName.trim()) return;
+
+    const autoColor: AutoColorSpec = { source };
+    if (needsPset) autoColor.psetName = psetName.trim();
+    if (needsPropertyName) autoColor.propertyName = propertyName.trim();
+
+    onSave({
+      id: `lens-auto-${Date.now()}`,
+      name: name.trim(),
+      rules: [],
+      autoColor,
+    });
+  };
+
+  const canSave = name.trim().length > 0
+    && (!needsPset || psetName.trim().length > 0)
+    && (!needsPropertyName || propertyName.trim().length > 0);
+
+  const selectClass = 'text-xs px-1.5 py-1 bg-white dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-600 text-zinc-900 dark:text-zinc-100 rounded-sm';
+
+  return (
+    <div className="border-2 border-primary bg-white dark:bg-zinc-900 rounded-sm">
+      <div className="px-3 pt-3 pb-2">
+        <input
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="Auto-color lens name..."
+          className="w-full px-2 py-1.5 text-xs font-bold uppercase tracking-wider bg-zinc-50 dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-600 text-zinc-900 dark:text-zinc-100 rounded-sm placeholder:normal-case placeholder:font-normal placeholder:text-zinc-400 dark:placeholder:text-zinc-500"
+          autoFocus
+        />
+      </div>
+
+      <div className="border-t border-zinc-200 dark:border-zinc-700 px-3 py-2 space-y-2 bg-zinc-50/50 dark:bg-zinc-800/50">
+        <div className="flex items-center gap-1.5 text-xs text-zinc-600 dark:text-zinc-400">
+          <Sparkles className="h-3 w-3" />
+          <span>Auto-color by distinct values</span>
+        </div>
+
+        <div className="flex items-center gap-1.5">
+          <label className="text-[10px] uppercase tracking-wider text-zinc-500 w-[50px]">Source</label>
+          <select
+            value={source}
+            onChange={(e) => {
+              const s = e.target.value as AutoColorSpec['source'];
+              setSource(s);
+              setPsetName('');
+              setPropertyName('');
+              if (!name || name.startsWith('Color by ')) {
+                setName(`Color by ${TYPE_LABELS[s]}`);
+              }
+            }}
+            className={cn(selectClass, 'flex-1')}
+          >
+            {AUTO_COLOR_SOURCES.map(s => (
+              <option key={s} value={s}>{TYPE_LABELS[s]}</option>
+            ))}
+          </select>
+        </div>
+
+        {needsPset && (
+          <div className="flex items-center gap-1.5">
+            <label className="text-[10px] uppercase tracking-wider text-zinc-500 w-[50px]">
+              {source === 'property' ? 'Pset' : source === 'classification' ? 'System' : 'Qset'}
+            </label>
+            <SearchableSelect
+              value={psetName}
+              options={psetOptions}
+              onChange={(v) => { setPsetName(v); setPropertyName(''); }}
+              placeholder={source === 'property' ? 'Select property set...' : source === 'classification' ? 'Select system...' : 'Select quantity set...'}
+              className="flex-1"
+            />
+          </div>
+        )}
+
+        {needsPropertyName && (
+          <div className="flex items-center gap-1.5">
+            <label className="text-[10px] uppercase tracking-wider text-zinc-500 w-[50px]">Name</label>
+            {source === 'attribute' ? (
+              <select
+                value={propertyName}
+                onChange={(e) => setPropertyName(e.target.value)}
+                className={cn(selectClass, 'flex-1')}
+              >
+                <option value="">Select...</option>
+                {ENTITY_ATTRIBUTE_NAMES.map(a => <option key={a} value={a}>{a}</option>)}
+              </select>
+            ) : (
+              <SearchableSelect
+                value={propertyName}
+                options={propertyOptions}
+                onChange={setPropertyName}
+                placeholder={source === 'property' ? 'Select property...' : 'Select quantity...'}
+                className="flex-1"
+              />
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className="flex gap-1.5 p-2 border-t border-zinc-200 dark:border-zinc-700">
+        <Button
+          variant="default"
+          size="sm"
+          className="flex-1 h-7 text-[10px] uppercase tracking-wider rounded-sm"
+          onClick={handleSave}
+          disabled={!canSave}
+        >
+          <Save className="h-3 w-3 mr-1" />
+          Save
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 text-[10px] uppercase tracking-wider rounded-sm"
+          onClick={onCancel}
+        >
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+}
+
 // ─── Lens card (read-only display) ──────────────────────────────────────────
 
 function LensCard({
@@ -270,6 +907,7 @@ function LensCard({
   isolatedRuleId,
   onIsolateRule,
   ruleCounts,
+  autoColorLegend,
 }: {
   lens: Lens;
   isActive: boolean;
@@ -279,7 +917,28 @@ function LensCard({
   isolatedRuleId?: string | null;
   onIsolateRule?: (ruleId: string) => void;
   ruleCounts?: Map<string, number>;
+  autoColorLegend?: AutoColorLegendEntry[];
 }) {
+  const isAutoColor = !!lens.autoColor;
+  const enabledRuleCount = lens.rules.filter(r => r.enabled).length;
+  const [legendSort, setLegendSort] = useState<'count' | 'name-asc' | 'name-desc'>('count');
+
+  const legendToShow = useMemo(() => {
+    if (!isAutoColor || !autoColorLegend) return undefined;
+    if (legendSort === 'count') return autoColorLegend; // already sorted by count desc from engine
+    const sorted = [...autoColorLegend];
+    if (legendSort === 'name-asc') sorted.sort((a, b) => a.name.localeCompare(b.name));
+    else sorted.sort((a, b) => b.name.localeCompare(a.name));
+    return sorted;
+  }, [isAutoColor, autoColorLegend, legendSort]);
+
+  const cycleLegendSort = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    setLegendSort(prev => prev === 'count' ? 'name-asc' : prev === 'name-asc' ? 'name-desc' : 'count');
+  }, []);
+
+  const sortLabel = legendSort === 'count' ? 'Count' : legendSort === 'name-asc' ? 'A→Z' : 'Z→A';
+
   return (
     <div
       className={cn(
@@ -295,6 +954,8 @@ function LensCard({
         <div className="flex items-center gap-2 min-w-0">
           {isActive ? (
             <Check className="h-3.5 w-3.5 text-primary flex-shrink-0" />
+          ) : isAutoColor ? (
+            <Sparkles className="h-3.5 w-3.5 text-zinc-400 dark:text-zinc-500 flex-shrink-0" />
           ) : (
             <Palette className="h-3.5 w-3.5 text-zinc-400 dark:text-zinc-500 flex-shrink-0" />
           )}
@@ -303,8 +964,7 @@ function LensCard({
           </span>
         </div>
         <div className="flex items-center gap-1">
-          {/* Edit for all lenses, delete for custom only */}
-          {onEdit && (
+          {onEdit && !isAutoColor && (
             <button
               onClick={(e) => { e.stopPropagation(); onEdit(lens); }}
               className="opacity-0 group-hover:opacity-100 text-zinc-400 hover:text-zinc-700 dark:text-zinc-500 dark:hover:text-zinc-200 p-0.5"
@@ -323,13 +983,44 @@ function LensCard({
             </button>
           )}
           <span className="text-[10px] text-zinc-500 dark:text-zinc-400 font-mono ml-1">
-            {lens.rules.filter(r => r.enabled).length} rules
+            {isAutoColor
+              ? TYPE_LABELS[lens.autoColor!.source]
+              : `${enabledRuleCount} rules`}
           </span>
         </div>
       </div>
 
-      {/* Color legend (shown when active) — click rules to isolate */}
-      {isActive && (
+      {/* Auto-color legend (shown when active + auto-color lens) */}
+      {isActive && legendToShow && legendToShow.length > 0 && (
+        <div className="border-t border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/60">
+          <div className="flex items-center justify-between px-3 py-1 border-b border-zinc-200/60 dark:border-zinc-700/60">
+            <span className="text-[10px] uppercase tracking-wider text-zinc-400 dark:text-zinc-500 font-medium">
+              {legendToShow.length} values
+            </span>
+            <button
+              onClick={cycleLegendSort}
+              className="flex items-center gap-0.5 text-[10px] uppercase tracking-wider text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300"
+              title="Sort legend entries"
+            >
+              <ArrowUpDown className="h-2.5 w-2.5" />
+              {sortLabel}
+            </button>
+          </div>
+          <div className="max-h-[220px] overflow-y-auto py-0.5">
+          {legendToShow.map(entry => (
+            <AutoColorRow
+              key={entry.id}
+              entry={entry}
+              isIsolated={isolatedRuleId === entry.id}
+              onClick={onIsolateRule ? () => onIsolateRule(entry.id) : undefined}
+            />
+          ))}
+          </div>
+        </div>
+      )}
+
+      {/* Rule-based color legend (shown when active + rule lens) */}
+      {isActive && !isAutoColor && (
         <div className="border-t border-zinc-200 dark:border-zinc-700 py-0.5 bg-zinc-50 dark:bg-zinc-800/60">
           {lens.rules.map(rule => {
             const count = ruleCounts?.get(rule.id) ?? 0;
@@ -367,9 +1058,60 @@ export function LensPanel({ onClose }: LensPanelProps) {
   const lensColorMapSize = useViewerStore((s) => s.lensColorMap.size);
   const lensHiddenIdsSize = useViewerStore((s) => s.lensHiddenIds.size);
   const lensRuleCounts = useViewerStore((s) => s.lensRuleCounts);
+  const lensAutoColorLegend = useViewerStore((s) => s.lensAutoColorLegend);
+  // Discovered data from loaded models (classes = instant, rest = lazy)
+  const discoveredLensData = useViewerStore((s) => s.discoveredLensData);
+  const mergeDiscoveredData = useViewerStore((s) => s.mergeDiscoveredData);
+
+  // Track which categories are currently being discovered (prevent double-fire)
+  const discoveringRef = useRef(new Set<string>());
+
+  // Reset discovery flags when discoveredLensData changes (e.g. new model loaded)
+  useEffect(() => {
+    if (!discoveredLensData) {
+      discoveringRef.current.clear();
+    }
+  }, [discoveredLensData]);
+
+  /** Trigger lazy discovery for expensive data categories (psets, quantities, etc.) */
+  const handleRequestDiscovery = useCallback((categories: { properties?: boolean; quantities?: boolean; classifications?: boolean; materials?: boolean }) => {
+    // Skip categories already discovered or in-flight
+    const toDiscover: typeof categories = {};
+    const current = useViewerStore.getState().discoveredLensData;
+    if (!current) return;
+
+    if (categories.properties && !current.propertySets && !discoveringRef.current.has('properties')) {
+      toDiscover.properties = true;
+      discoveringRef.current.add('properties');
+    }
+    if (categories.quantities && !current.quantitySets && !discoveringRef.current.has('quantities')) {
+      toDiscover.quantities = true;
+      discoveringRef.current.add('quantities');
+    }
+    if (categories.classifications && !current.classificationSystems && !discoveringRef.current.has('classifications')) {
+      toDiscover.classifications = true;
+      discoveringRef.current.add('classifications');
+    }
+    if (categories.materials && !current.materials && !discoveringRef.current.has('materials')) {
+      toDiscover.materials = true;
+      discoveringRef.current.add('materials');
+    }
+
+    if (Object.keys(toDiscover).length === 0) return;
+
+    // Run discovery async to not block the UI
+    setTimeout(() => {
+      const { models, ifcDataStore } = useViewerStore.getState();
+      if (models.size === 0 && !ifcDataStore) return;
+      const provider = createLensDataProvider(models, ifcDataStore);
+      const result = discoverDataSources(provider, toDiscover);
+      mergeDiscoveredData(result);
+    }, 0);
+  }, [mergeDiscoveredData]);
 
   // Editor state: null = not editing, Lens object = editing/creating
   const [editingLens, setEditingLens] = useState<Lens | null>(null);
+  const [creatingAutoColor, setCreatingAutoColor] = useState(false);
   const [isolatedRuleId, setIsolatedRuleId] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -383,11 +1125,8 @@ export function LensPanel({ onClose }: LensPanelProps) {
     }
   }, [activeLensId, setActiveLens, showAll]);
 
-  /** Click a rule row in the active lens to isolate matching entities */
+  /** Click a rule/value row in the active lens to isolate matching entities */
   const handleIsolateRule = useCallback((ruleId: string) => {
-    const lens = savedLenses.find(l => l.id === activeLensId);
-    if (!lens) return;
-
     // Toggle off if clicking the already-isolated rule
     if (isolatedRuleId === ruleId) {
       setIsolatedRuleId(null);
@@ -395,20 +1134,16 @@ export function LensPanel({ onClose }: LensPanelProps) {
       return;
     }
 
-    const rule = lens.rules.find(r => r.id === ruleId);
-    if (!rule || !rule.enabled) return;
-
-    // Look up entities matched by this specific rule (not by color)
+    // Look up entities matched by this specific rule/value
     const matchingIds = useViewerStore.getState().lensRuleEntityIds.get(ruleId);
     if (!matchingIds || matchingIds.length === 0) return;
 
-    if (matchingIds.length > 0) {
-      setIsolatedRuleId(ruleId);
-      isolateEntities(matchingIds);
-    }
-  }, [activeLensId, savedLenses, isolatedRuleId, isolateEntities, clearIsolation]);
+    setIsolatedRuleId(ruleId);
+    isolateEntities(matchingIds);
+  }, [isolatedRuleId, isolateEntities, clearIsolation]);
 
   const handleNewLens = useCallback(() => {
+    setCreatingAutoColor(false);
     setEditingLens({
       id: `lens-${Date.now()}`,
       name: '',
@@ -416,19 +1151,24 @@ export function LensPanel({ onClose }: LensPanelProps) {
     });
   }, []);
 
+  const handleNewAutoColorLens = useCallback(() => {
+    setEditingLens(null);
+    setCreatingAutoColor(true);
+  }, []);
+
   const handleEditLens = useCallback((lens: Lens) => {
     setEditingLens({ ...lens, rules: lens.rules.map(r => ({ ...r })) });
   }, []);
 
   const handleSaveLens = useCallback((lens: Lens) => {
-    // Check if this is an existing lens or new
     const exists = savedLenses.some(l => l.id === lens.id);
     if (exists) {
-      updateLens(lens.id, { name: lens.name, rules: lens.rules });
+      updateLens(lens.id, { name: lens.name, rules: lens.rules, autoColor: lens.autoColor });
     } else {
       createLens(lens);
     }
     setEditingLens(null);
+    setCreatingAutoColor(false);
   }, [savedLenses, createLens, updateLens]);
 
   const handleDeleteLens = useCallback((id: string) => {
@@ -439,7 +1179,7 @@ export function LensPanel({ onClose }: LensPanelProps) {
     deleteLens(id);
   }, [activeLensId, setActiveLens, showAll, deleteLens]);
 
-  // Apply hidden entities when lens hidden IDs change (proper effect, not render side-effect)
+  // Apply hidden entities when lens hidden IDs change
   useEffect(() => {
     if (lensHiddenIdsSize > 0 && activeLensId) {
       const ids = useViewerStore.getState().lensHiddenIds;
@@ -466,7 +1206,6 @@ export function LensPanel({ onClose }: LensPanelProps) {
       try {
         const parsed = JSON.parse(reader.result as string);
         const arr: unknown[] = Array.isArray(parsed) ? parsed : [parsed];
-        // Validate each entry has required Lens structure
         const valid = arr.filter((item): item is Lens => {
           if (item === null || typeof item !== 'object') return false;
           const obj = item as Record<string, unknown>;
@@ -482,7 +1221,6 @@ export function LensPanel({ onClose }: LensPanelProps) {
       }
     };
     reader.readAsText(file);
-    // reset so same file can be re-imported
     e.target.value = '';
   }, [importLenses]);
 
@@ -555,6 +1293,8 @@ export function LensPanel({ onClose }: LensPanelProps) {
               initial={editingLens}
               onSave={handleSaveLens}
               onCancel={() => setEditingLens(null)}
+              discovered={discoveredLensData}
+              onRequestDiscovery={handleRequestDiscovery}
             />
           ) : (
             <LensCard
@@ -567,28 +1307,51 @@ export function LensPanel({ onClose }: LensPanelProps) {
               isolatedRuleId={activeLensId === lens.id ? isolatedRuleId : null}
               onIsolateRule={activeLensId === lens.id ? handleIsolateRule : undefined}
               ruleCounts={activeLensId === lens.id ? lensRuleCounts : undefined}
+              autoColorLegend={activeLensId === lens.id ? lensAutoColorLegend : undefined}
             />
           )
         ))}
 
-        {/* New lens editor (when creating) */}
+        {/* New lens editor (when creating rule-based lens) */}
         {editingLens && !savedLenses.some(l => l.id === editingLens.id) && (
           <LensEditor
             initial={editingLens}
             onSave={handleSaveLens}
             onCancel={() => setEditingLens(null)}
+            discovered={discoveredLensData}
+            onRequestDiscovery={handleRequestDiscovery}
           />
         )}
 
-        {/* New lens button */}
-        {!editingLens && (
-          <button
-            onClick={handleNewLens}
-            className="w-full border-2 border-dashed border-zinc-300 dark:border-zinc-600 hover:border-primary dark:hover:border-primary py-2.5 flex items-center justify-center gap-1.5 text-xs font-medium text-zinc-500 dark:text-zinc-400 hover:text-primary transition-colors rounded-sm"
-          >
-            <Plus className="h-3.5 w-3.5" />
-            New Lens
-          </button>
+        {/* Auto-color editor (when creating auto-color lens) */}
+        {creatingAutoColor && (
+          <AutoColorEditor
+            initial={{ name: 'Color by IFC Class', autoColor: { source: 'ifcType' } }}
+            onSave={handleSaveLens}
+            onCancel={() => setCreatingAutoColor(false)}
+            discovered={discoveredLensData}
+            onRequestDiscovery={handleRequestDiscovery}
+          />
+        )}
+
+        {/* New lens buttons */}
+        {!editingLens && !creatingAutoColor && (
+          <div className="space-y-1.5">
+            <button
+              onClick={handleNewLens}
+              className="w-full border-2 border-dashed border-zinc-300 dark:border-zinc-600 hover:border-primary dark:hover:border-primary py-2.5 flex items-center justify-center gap-1.5 text-xs font-medium text-zinc-500 dark:text-zinc-400 hover:text-primary transition-colors rounded-sm"
+            >
+              <Plus className="h-3.5 w-3.5" />
+              New Rule Lens
+            </button>
+            <button
+              onClick={handleNewAutoColorLens}
+              className="w-full border-2 border-dashed border-zinc-300 dark:border-zinc-600 hover:border-primary dark:hover:border-primary py-2.5 flex items-center justify-center gap-1.5 text-xs font-medium text-zinc-500 dark:text-zinc-400 hover:text-primary transition-colors rounded-sm"
+            >
+              <Sparkles className="h-3.5 w-3.5" />
+              New Auto-Color Lens
+            </button>
+          </div>
         )}
       </div>