@svadmin/ui 0.63.0 → 0.65.0

package/dist/components/ColumnHeaderFilter.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import type { FieldDefinition, CrudOperator } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import * as Popover from './ui/popover/index.js';
+  import { Button } from './ui/button/index.js';
+  import { Filter, Check, RotateCcw } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    field: FieldDefinition;
+    currentValue?: unknown;
+    currentOperator?: CrudOperator;
+    onapply?: (operator: CrudOperator, value: unknown) => void;
+    onclear?: () => void;
+    class?: string;
+  }
+
+  let {
+    field,
+    currentValue,
+    currentOperator = 'contains',
+    onapply,
+    onclear,
+    class: className = '',
+  }: Props = $props();
+
+  const i18n = useTranslation();
+  let open = $state(false);
+  let operator = $state<CrudOperator>(untrack(() => currentOperator));
+  let filterVal = $state<string>(untrack(() => String(currentValue ?? '')));
+
+  const hasActiveFilter = $derived(currentValue !== undefined && String(currentValue).trim().length > 0);
+
+  const applicableOperators = $derived.by(() => {
+    switch (field.type) {
+      case 'number':
+      case 'currency':
+        return [
+          { value: 'eq' as const, label: '= Equal' },
+          { value: 'gt' as const, label: '> Greater than' },
+          { value: 'gte' as const, label: '>= Greater equal' },
+          { value: 'lt' as const, label: '< Less than' },
+          { value: 'lte' as const, label: '<= Less equal' },
+        ];
+      case 'date':
+        return [
+          { value: 'eq' as const, label: '= On date' },
+          { value: 'gte' as const, label: '>= After or on' },
+          { value: 'lte' as const, label: '<= Before or on' },
+        ];
+      case 'boolean':
+        return [
+          { value: 'eq' as const, label: 'Is' },
+        ];
+      default:
+        return [
+          { value: 'contains' as const, label: 'Contains' },
+          { value: 'eq' as const, label: 'Equals' },
+          { value: 'ne' as const, label: 'Not equals' },
+        ];
+    }
+  });
+
+  function handleApply() {
+    let finalVal: unknown = filterVal.trim();
+    if (field.type === 'number' || field.type === 'currency') {
+      const num = Number(finalVal);
+      finalVal = isNaN(num) ? finalVal : num;
+    }
+    onapply?.(operator, finalVal);
+    open = false;
+  }
+
+  function handleClear() {
+    filterVal = '';
+    onclear?.();
+    open = false;
+  }
+</script>
+
+<Popover.Root bind:open>
+  <Popover.Trigger>
+    {#snippet child({ props })}
+      <button
+        {...props}
+        type="button"
+        class={cn(
+          'inline-flex items-center justify-center h-6 w-6 rounded-md transition-colors cursor-pointer',
+          hasActiveFilter
+            ? 'bg-primary/15 text-primary'
+            : 'text-muted-foreground/60 hover:text-foreground hover:bg-muted/50',
+          className
+        )}
+        aria-label="Filter {field.label}"
+      >
+        <Filter class="h-3 w-3" />
+      </button>
+    {/snippet}
+  </Popover.Trigger>
+  <Popover.Content class="w-64 p-3 text-xs" align="start">
+    <div class="space-y-3">
+      <div class="font-medium text-foreground pb-1 border-b border-border/50">
+        Filter {field.label}
+      </div>
+
+      <div class="space-y-1">
+        <label class="block text-[11px] text-muted-foreground" for="header_filter_op_{field.key}">Operator</label>
+        <select
+          id="header_filter_op_{field.key}"
+          bind:value={operator}
+          class="h-7.5 w-full rounded-md border border-input bg-background px-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        >
+          {#each applicableOperators as op (op.value)}
+            <option value={op.value}>{op.label}</option>
+          {/each}
+        </select>
+      </div>
+
+      <div class="space-y-1">
+        <label class="block text-[11px] text-muted-foreground" for="header_filter_val_{field.key}">Value</label>
+        {#if field.type === 'select' && field.options}
+          <select
+            id="header_filter_val_{field.key}"
+            bind:value={filterVal}
+            class="h-7.5 w-full rounded-md border border-input bg-background px-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          >
+            <option value="">All</option>
+            {#each field.options as opt (opt.value)}
+              <option value={String(opt.value)}>{opt.label}</option>
+            {/each}
+          </select>
+        {:else if field.type === 'boolean'}
+          <select
+            id="header_filter_val_{field.key}"
+            bind:value={filterVal}
+            class="h-7.5 w-full rounded-md border border-input bg-background px-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          >
+            <option value="">All</option>
+            <option value="true">Yes / True</option>
+            <option value="false">No / False</option>
+          </select>
+        {:else if field.type === 'date'}
+          <input
+            id="header_filter_val_{field.key}"
+            type="date"
+            bind:value={filterVal}
+            class="h-7.5 w-full rounded-md border border-input bg-background px-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          />
+        {:else}
+          <input
+            id="header_filter_val_{field.key}"
+            type="text"
+            bind:value={filterVal}
+            placeholder="Search {field.label}..."
+            class="h-7.5 w-full rounded-md border border-input bg-background px-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          />
+        {/if}
+      </div>
+
+      <div class="flex items-center justify-between pt-1 border-t border-border/50">
+        <Button
+          variant="ghost"
+          size="sm"
+          class="h-7 px-2 text-xs text-muted-foreground hover:text-foreground gap-1"
+          onclick={handleClear}
+        >
+          <RotateCcw class="h-3 w-3" />
+          {i18n.t('common.clear', { defaultValue: 'Clear' })}
+        </Button>
+        <Button size="sm" class="h-7 px-2.5 text-xs gap-1" onclick={handleApply}>
+          <Check class="h-3 w-3" />
+          {i18n.t('common.apply', { defaultValue: 'Apply' })}
+        </Button>
+      </div>
+    </div>
+  </Popover.Content>
+</Popover.Root>

package/dist/components/ColumnHeaderFilter.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { FieldDefinition, CrudOperator } from '@svadmin/core';
+interface Props {
+    field: FieldDefinition;
+    currentValue?: unknown;
+    currentOperator?: CrudOperator;
+    onapply?: (operator: CrudOperator, value: unknown) => void;
+    onclear?: () => void;
+    class?: string;
+}
+declare const ColumnHeaderFilter: import("svelte").Component<Props, {}, "">;
+type ColumnHeaderFilter = ReturnType<typeof ColumnHeaderFilter>;
+export default ColumnHeaderFilter;

package/dist/components/ColumnSettings.svelte

@@ -0,0 +1,198 @@
+<script lang="ts">
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { Button } from './ui/button/index.js';
+  import { Checkbox } from './ui/checkbox/index.js';
+  import * as Popover from './ui/popover/index.js';
+  import { SlidersHorizontal, RotateCcw, ArrowUp, ArrowDown, Search } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  export interface ColumnItem {
+    key: string;
+    label: string;
+    visible: boolean;
+    fixed?: 'left' | 'right';
+  }
+
+  interface Props {
+    columns: ColumnItem[];
+    onchange?: (columns: ColumnItem[]) => void;
+    onreset?: () => void;
+    storageKey?: string;
+    title?: string;
+    triggerVariant?: 'outline' | 'ghost' | 'secondary';
+    triggerSize?: 'default' | 'sm' | 'icon' | 'icon-sm';
+    class?: string;
+  }
+
+  let {
+    columns = $bindable([]),
+    onchange,
+    onreset,
+    storageKey,
+    title,
+    triggerVariant = 'outline',
+    triggerSize = 'sm',
+    class: className = '',
+  }: Props = $props();
+
+  const i18n = useTranslation();
+  let filterText = $state('');
+  let open = $state(false);
+
+  // Snapshot initial configuration for reset
+  let initialSnapshot = $state<ColumnItem[]>(JSON.parse(JSON.stringify(columns)));
+
+  const displayTitle = $derived(title ?? i18n.t('common.columnSettings', { defaultValue: 'Columns' }));
+  const resetLabel = $derived(i18n.t('common.reset', { defaultValue: 'Reset' }));
+
+  const filteredColumns = $derived(
+    filterText.trim()
+      ? columns.filter((c) => c.label.toLowerCase().includes(filterText.toLowerCase()) || c.key.toLowerCase().includes(filterText.toLowerCase()))
+      : columns
+  );
+
+  const allVisible = $derived(columns.every((c) => c.visible));
+  const someVisible = $derived(columns.some((c) => c.visible) && !allVisible);
+
+  function savePreference(cols: ColumnItem[]) {
+    if (storageKey && typeof window !== 'undefined') {
+      try {
+        localStorage.setItem(storageKey, JSON.stringify(cols));
+      } catch {
+        /* storage unavailable */
+      }
+    }
+  }
+
+  function toggleColumn(key: string) {
+    columns = columns.map((c) => (c.key === key ? { ...c, visible: !c.visible } : c));
+    savePreference(columns);
+    onchange?.(columns);
+  }
+
+  function toggleAll(checked: boolean) {
+    columns = columns.map((c) => ({ ...c, visible: checked }));
+    savePreference(columns);
+    onchange?.(columns);
+  }
+
+  function moveColumn(index: number, direction: 'up' | 'down') {
+    const targetIndex = direction === 'up' ? index - 1 : index + 1;
+    if (targetIndex < 0 || targetIndex >= columns.length) return;
+
+    const next = [...columns];
+    const [moved] = next.splice(index, 1);
+    next.splice(targetIndex, 0, moved);
+
+    columns = next;
+    savePreference(columns);
+    onchange?.(columns);
+  }
+
+  function handleReset() {
+    columns = JSON.parse(JSON.stringify(initialSnapshot));
+    if (storageKey && typeof window !== 'undefined') {
+      try {
+        localStorage.removeItem(storageKey);
+      } catch {
+        /* storage unavailable */
+      }
+    }
+    onreset?.();
+    onchange?.(columns);
+  }
+</script>
+
+<Popover.Root bind:open>
+  <Popover.Trigger>
+    {#snippet child({ props })}
+      <Button
+        {...props}
+        variant={triggerVariant}
+        size={triggerSize}
+        class={cn('gap-1.5 text-xs font-normal', className)}
+        aria-label={displayTitle}
+      >
+        <SlidersHorizontal class="h-3.5 w-3.5 text-muted-foreground" data-icon="inline-start" />
+        <span>{displayTitle}</span>
+      </Button>
+    {/snippet}
+  </Popover.Trigger>
+  <Popover.Content class="w-72 p-3 text-xs" align="end">
+    <!-- Header -->
+    <div class="flex items-center justify-between pb-2 border-b border-border/60">
+      <div class="flex items-center gap-2">
+        <Checkbox
+          checked={allVisible}
+          indeterminate={someVisible}
+          onCheckedChange={(checked) => toggleAll(checked === true)}
+          aria-label={i18n.t('common.selectAll', { defaultValue: 'Select All' })}
+        />
+        <span class="font-medium text-foreground">{displayTitle}</span>
+      </div>
+      <Button
+        variant="ghost"
+        size="sm"
+        class="h-6 px-1.5 text-[11px] text-muted-foreground hover:text-foreground gap-1"
+        onclick={handleReset}
+      >
+        <RotateCcw class="h-3 w-3" />
+        {resetLabel}
+      </Button>
+    </div>
+
+    <!-- Filter input if many columns -->
+    {#if columns.length > 6}
+      <div class="relative mt-2 mb-1">
+        <Search class="absolute left-2 top-2 h-3.5 w-3.5 text-muted-foreground" />
+        <input
+          type="text"
+          bind:value={filterText}
+          placeholder={i18n.t('common.search', { defaultValue: 'Search columns...' })}
+          class="h-7.5 w-full rounded-md border border-input bg-muted/40 pl-7 pr-2 text-xs placeholder:text-muted-foreground/60 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        />
+      </div>
+    {/if}
+
+    <!-- Column list with ordering -->
+    <div class="mt-2 max-h-60 overflow-y-auto space-y-1 pr-1">
+      {#each filteredColumns as col (col.key)}
+        {@const realIdx = columns.findIndex((c) => c.key === col.key)}
+        <div class="flex items-center justify-between p-1 rounded-md hover:bg-muted/50 group transition-colors">
+          <label class="flex items-center gap-2 cursor-pointer select-none truncate flex-1 pr-2">
+            <Checkbox
+              checked={col.visible}
+              onCheckedChange={() => toggleColumn(col.key)}
+            />
+            <span class="truncate text-foreground {col.visible ? '' : 'text-muted-foreground line-through opacity-60'}">
+              {col.label}
+            </span>
+          </label>
+
+          <div class="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+            <Button
+              variant="ghost"
+              size="icon"
+              class="h-5 w-5 text-muted-foreground hover:text-foreground"
+              disabled={realIdx === 0}
+              onclick={() => moveColumn(realIdx, 'up')}
+              aria-label="Move up"
+            >
+              <ArrowUp class="h-3 w-3" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="h-5 w-5 text-muted-foreground hover:text-foreground"
+              disabled={realIdx === columns.length - 1}
+              onclick={() => moveColumn(realIdx, 'down')}
+              aria-label="Move down"
+            >
+              <ArrowDown class="h-3 w-3" />
+            </Button>
+          </div>
+        </div>
+      {/each}
+    </div>
+  </Popover.Content>
+</Popover.Root>

package/dist/components/ColumnSettings.svelte.d.ts

@@ -0,0 +1,19 @@
+export interface ColumnItem {
+    key: string;
+    label: string;
+    visible: boolean;
+    fixed?: 'left' | 'right';
+}
+interface Props {
+    columns: ColumnItem[];
+    onchange?: (columns: ColumnItem[]) => void;
+    onreset?: () => void;
+    storageKey?: string;
+    title?: string;
+    triggerVariant?: 'outline' | 'ghost' | 'secondary';
+    triggerSize?: 'default' | 'sm' | 'icon' | 'icon-sm';
+    class?: string;
+}
+declare const ColumnSettings: import("svelte").Component<Props, {}, "columns">;
+type ColumnSettings = ReturnType<typeof ColumnSettings>;
+export default ColumnSettings;

package/dist/components/DecisionTable.svelte

@@ -0,0 +1,240 @@
+<script lang="ts">
+  import { Button } from './ui/button/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import { Plus, Trash2, Play, CheckCircle2 } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  export interface DecisionColumn {
+    key: string;
+    label: string;
+    type: 'condition' | 'action';
+    dataType?: 'string' | 'number' | 'boolean';
+  }
+
+  export interface DecisionRule {
+    id: string;
+    description?: string;
+    values: Record<string, string>; // e.g. { age: "> 18", score: ">= 80", result: "Approved" }
+  }
+
+  interface Props {
+    title?: string;
+    columns?: DecisionColumn[];
+    rules?: DecisionRule[];
+    hitPolicy?: 'FIRST' | 'COLLECT' | 'UNIQUE';
+    onchange?: (rules: DecisionRule[]) => void;
+    class?: string;
+  }
+
+  let {
+    title = 'Business Decision Table',
+    columns = [
+      { key: 'tier', label: 'Customer Tier', type: 'condition' },
+      { key: 'amount', label: 'Order Amount', type: 'condition' },
+      { key: 'discount', label: 'Discount %', type: 'action' },
+      { key: 'approval', label: 'Require Approval', type: 'action' },
+    ],
+    rules = $bindable([
+      { id: 'r1', description: 'VIP high volume', values: { tier: 'VIP', amount: '>= 10000', discount: '20%', approval: 'No' } },
+      { id: 'r2', description: 'VIP standard', values: { tier: 'VIP', amount: '< 10000', discount: '15%', approval: 'No' } },
+      { id: 'r3', description: 'Standard high volume', values: { tier: 'Standard', amount: '>= 10000', discount: '10%', approval: 'Yes' } },
+      { id: 'r4', description: 'Default fallback', values: { tier: '-', amount: '-', discount: '0%', approval: 'No' } },
+    ]),
+    hitPolicy = 'FIRST',
+    onchange,
+    class: className = '',
+  }: Props = $props();
+
+  let testInputs = $state<Record<string, string>>({
+    tier: 'VIP',
+    amount: '12000',
+  });
+
+  let matchedRuleId = $state<string | null>(null);
+
+  const conditionCols = $derived(columns.filter((c) => c.type === 'condition'));
+  const actionCols = $derived(columns.filter((c) => c.type === 'action'));
+
+  function updateRuleValue(ruleId: string, colKey: string, val: string) {
+    const nextRules = rules.map((r) =>
+      r.id === ruleId ? { ...r, values: { ...r.values, [colKey]: val } } : r
+    );
+    rules = nextRules;
+    onchange?.(rules);
+  }
+
+  function addRule() {
+    const newRule: DecisionRule = {
+      id: `rule_${Date.now()}`,
+      description: 'New Rule',
+      values: {},
+    };
+    for (const c of columns) {
+      newRule.values[c.key] = '-';
+    }
+    rules = [...rules, newRule];
+    onchange?.(rules);
+  }
+
+  function deleteRule(id: string) {
+    rules = rules.filter((r) => r.id !== id);
+    onchange?.(rules);
+  }
+
+  function evaluateRules() {
+    for (const r of rules) {
+      let isMatch = true;
+      for (const cond of conditionCols) {
+        const ruleVal = (r.values[cond.key] ?? '').trim();
+        const testVal = (testInputs[cond.key] ?? '').trim();
+
+        if (ruleVal === '-' || ruleVal === '') continue;
+
+        if (ruleVal.startsWith('>=')) {
+          const numR = parseFloat(ruleVal.slice(2));
+          const numT = parseFloat(testVal);
+          if (isNaN(numT) || numT < numR) isMatch = false;
+        } else if (ruleVal.startsWith('<=')) {
+          const numR = parseFloat(ruleVal.slice(2));
+          const numT = parseFloat(testVal);
+          if (isNaN(numT) || numT > numR) isMatch = false;
+        } else if (ruleVal.startsWith('>')) {
+          const numR = parseFloat(ruleVal.slice(1));
+          const numT = parseFloat(testVal);
+          if (isNaN(numT) || numT <= numR) isMatch = false;
+        } else if (ruleVal.startsWith('<')) {
+          const numR = parseFloat(ruleVal.slice(1));
+          const numT = parseFloat(testVal);
+          if (isNaN(numT) || numT >= numR) isMatch = false;
+        } else {
+          if (ruleVal.toLowerCase() !== testVal.toLowerCase()) {
+            isMatch = false;
+          }
+        }
+      }
+
+      if (isMatch) {
+        matchedRuleId = r.id;
+        return;
+      }
+    }
+    matchedRuleId = null;
+  }
+</script>
+
+<div class={cn('rounded-xl border border-border bg-card p-4 shadow-xs text-xs space-y-4', className)}>
+  <!-- Header -->
+  <div class="flex flex-wrap items-center justify-between gap-2 pb-2 border-b border-border/60">
+    <div class="flex items-center gap-2">
+      <span class="font-semibold text-foreground">{title}</span>
+      <Badge variant="outline" class="font-mono text-[10px] uppercase">Hit Policy: {hitPolicy}</Badge>
+    </div>
+
+    <Button size="sm" class="h-7 text-xs gap-1" onclick={addRule}>
+      <Plus class="h-3.5 w-3.5" />
+      Add Rule
+    </Button>
+  </div>
+
+  <!-- Decision Matrix Table -->
+  <div class="overflow-x-auto rounded-lg border border-border/60">
+    <table class="w-full border-collapse text-left">
+      <thead>
+        <!-- Top Category Header -->
+        <tr class="text-[11px] font-semibold">
+          <th rowspan="2" class="w-12 p-2 text-center border-r border-b border-border/60 bg-muted/80 text-muted-foreground">#</th>
+          <th colspan={conditionCols.length} class="p-2 border-r border-b border-border/60 bg-primary/10 text-primary text-center font-bold">
+            IF (Conditions)
+          </th>
+          <th colspan={actionCols.length} class="p-2 border-r border-b border-border/60 bg-success/10 text-success text-center font-bold">
+            THEN (Actions)
+          </th>
+          <th rowspan="2" class="w-10 p-2 text-center border-b border-border/60 bg-muted/80 text-muted-foreground">Del</th>
+        </tr>
+        <!-- Column Names Header -->
+        <tr class="bg-muted/40 text-muted-foreground border-b border-border/60 font-medium">
+          {#each conditionCols as col (col.key)}
+            <th class="p-2 border-r border-border/40 text-foreground">{col.label}</th>
+          {/each}
+          {#each actionCols as col (col.key)}
+            <th class="p-2 border-r border-border/40 text-foreground">{col.label}</th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-border/40 font-mono text-xs">
+        {#each rules as rule, idx (rule.id)}
+          {@const isMatched = matchedRuleId === rule.id}
+          <tr class={cn('hover:bg-muted/20 transition-colors', isMatched ? 'bg-success/15 font-semibold' : '')}>
+            <td class="p-2 text-center border-r border-border/40 text-muted-foreground font-sans">
+              {#if isMatched}
+                <span class="inline-flex text-success"><CheckCircle2 class="h-3.5 w-3.5" /></span>
+              {:else}
+                {idx + 1}
+              {/if}
+            </td>
+            {#each conditionCols as col (col.key)}
+              <td class="p-1.5 border-r border-border/40">
+                <input
+                  type="text"
+                  value={rule.values[col.key] ?? ''}
+                  class="h-7 w-full rounded border border-input bg-background px-2 text-xs text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  oninput={(e) => updateRuleValue(rule.id, col.key, e.currentTarget.value)}
+                />
+              </td>
+            {/each}
+            {#each actionCols as col (col.key)}
+              <td class="p-1.5 border-r border-border/40">
+                <input
+                  type="text"
+                  value={rule.values[col.key] ?? ''}
+                  class="h-7 w-full rounded border border-input bg-background px-2 text-xs font-semibold text-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  oninput={(e) => updateRuleValue(rule.id, col.key, e.currentTarget.value)}
+                />
+              </td>
+            {/each}
+            <td class="p-1.5 text-center">
+              <button
+                type="button"
+                class="text-muted-foreground hover:text-destructive transition-colors p-1 rounded border-0 bg-transparent cursor-pointer"
+                onclick={() => deleteRule(rule.id)}
+              >
+                <Trash2 class="h-3.5 w-3.5" />
+              </button>
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Live Rule Test Evaluator -->
+  <div class="p-3 rounded-lg bg-muted/30 border border-border/60 space-y-2">
+    <div class="flex items-center justify-between">
+      <span class="font-semibold text-foreground">Rule Test Runner</span>
+      <Button variant="outline" size="sm" class="h-6 text-xs gap-1" onclick={evaluateRules}>
+        <Play class="h-3 w-3" />
+        Test Execution
+      </Button>
+    </div>
+
+    <div class="flex flex-wrap items-center gap-3">
+      {#each conditionCols as cond (cond.key)}
+        <div class="flex items-center gap-1.5">
+          <span class="text-muted-foreground font-medium">{cond.label}:</span>
+          <input
+            type="text"
+            bind:value={testInputs[cond.key]}
+            class="h-6 w-24 rounded border border-input bg-background px-1.5 text-xs text-foreground focus-visible:outline-none"
+          />
+        </div>
+      {/each}
+
+      {#if matchedRuleId}
+        <div class="flex items-center gap-1 text-success font-medium">
+          <CheckCircle2 class="h-3.5 w-3.5" />
+          <span>Fired: {rules.find((r) => r.id === matchedRuleId)?.description ?? matchedRuleId}</span>
+        </div>
+      {/if}
+    </div>
+  </div>
+</div>

package/dist/components/DecisionTable.svelte.d.ts

@@ -0,0 +1,22 @@
+export interface DecisionColumn {
+    key: string;
+    label: string;
+    type: 'condition' | 'action';
+    dataType?: 'string' | 'number' | 'boolean';
+}
+export interface DecisionRule {
+    id: string;
+    description?: string;
+    values: Record<string, string>;
+}
+interface Props {
+    title?: string;
+    columns?: DecisionColumn[];
+    rules?: DecisionRule[];
+    hitPolicy?: 'FIRST' | 'COLLECT' | 'UNIQUE';
+    onchange?: (rules: DecisionRule[]) => void;
+    class?: string;
+}
+declare const DecisionTable: import("svelte").Component<Props, {}, "rules">;
+type DecisionTable = ReturnType<typeof DecisionTable>;
+export default DecisionTable;