@svgrid/enterprise 2.2.1 → 2.3.1

package/src/SvAlertsPanel.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+  /**
+   * SvAlertsPanel - a drawer listing fired alerts (newest first) from the shared
+   * alertStore. Filter by severity, acknowledge, clear, and jump to the row that
+   * fired. This is the audit trail of what the rules have caught.
+   */
+  import { SvDrawer } from '@svgrid/grid'
+  import { alertStore } from './alerts/alert-store.svelte'
+  import type { AlertEvent, AlertSeverity } from './alerts/alert-types'
+
+  type Props = {
+    open?: boolean
+    onJump?: (event: AlertEvent) => void
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), onJump, onClose }: Props = $props()
+
+  let filter = $state<AlertSeverity | 'all'>('all')
+
+  const SEV_COLOR: Record<AlertSeverity, string> = {
+    info: '#3b82f6', success: '#16a34a', warning: '#d97706', error: '#dc2626',
+  }
+
+  const shown = $derived(
+    filter === 'all' ? alertStore.events : alertStore.events.filter((e) => e.severity === filter),
+  )
+
+  function timeLabel(ms: number): string {
+    try {
+      return new Date(ms).toLocaleTimeString()
+    } catch {
+      return ''
+    }
+  }
+</script>
+
+<SvDrawer bind:open side="right" size="380px" title="Alerts" onClose={() => onClose?.()}>
+  <div class="ap-toolbar">
+    <div class="ap-filters" role="group" aria-label="Filter by severity">
+      {#each ['all', 'error', 'warning', 'info', 'success'] as sev (sev)}
+        <button type="button" class:ap-on={filter === sev} onclick={() => (filter = sev as AlertSeverity | 'all')}>{sev}</button>
+      {/each}
+    </div>
+    <button type="button" class="ap-clear" onclick={() => alertStore.clear()} disabled={alertStore.events.length === 0}>Clear</button>
+  </div>
+
+  {#if shown.length === 0}
+    <div class="ap-empty">
+      <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9" /><path d="M13.7 21a2 2 0 0 1-3.4 0" />
+      </svg>
+      <p>No alerts{filter === 'all' ? ' yet' : ` at ${filter}`}.</p>
+      <span>Rules fire here as your data changes.</span>
+    </div>
+  {:else}
+    <ul class="ap-list">
+      {#each shown as event, i (event.firedAt + '-' + i)}
+        <li class="ap-item" class:ap-ack={event.acknowledged} style={`--sev: ${SEV_COLOR[event.severity]}`}>
+          <span class="ap-dot" aria-hidden="true"></span>
+          <div class="ap-content">
+            <p class="ap-msg">{event.message}</p>
+            <div class="ap-meta">
+              <span class="ap-rule">{event.ruleName}</span>
+              <span class="ap-dotsep" aria-hidden="true"></span>
+              <span>{timeLabel(event.firedAt)}</span>
+            </div>
+            <div class="ap-row-actions">
+              {#if event.rowId != null && onJump}
+                <button type="button" onclick={() => onJump?.(event)}>Go to row</button>
+              {/if}
+              {#if !event.acknowledged}
+                <button type="button" onclick={() => alertStore.acknowledge(alertStore.events.indexOf(event))}>Acknowledge</button>
+              {/if}
+            </div>
+          </div>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+
+  {#snippet footer()}
+    <button type="button" class="ap-ack-all" onclick={() => alertStore.acknowledgeAll()} disabled={alertStore.activeCount === 0}>
+      Acknowledge all ({alertStore.activeCount})
+    </button>
+  {/snippet}
+</SvDrawer>
+
+<style>
+  /* Theme-agnostic surfaces: currentColor + inherit (readable in any theme). */
+  .ap-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; font-family: var(--sg-font, inherit); color: inherit; }
+  .ap-filters { display: inline-flex; flex-wrap: wrap; gap: 4px; }
+  .ap-filters button, .ap-clear {
+    border: 1px solid color-mix(in srgb, currentColor 18%, transparent); background: transparent; border-radius: 999px;
+    padding: 3px 11px; font-size: 11px; font-weight: 500; cursor: pointer; color: inherit; opacity: 0.7;
+    text-transform: capitalize; transition: background 0.13s ease, opacity 0.13s ease, border-color 0.13s ease;
+  }
+  .ap-filters button:hover, .ap-clear:hover { background: color-mix(in srgb, currentColor 10%, transparent); opacity: 1; }
+  .ap-filters button.ap-on { background: var(--sg-accent, #4f46e5); color: #fff; border-color: transparent; opacity: 1; }
+  .ap-clear:disabled { opacity: 0.4; cursor: default; }
+
+  .ap-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; padding: 40px 12px; text-align: center; }
+  .ap-empty svg { color: var(--sg-accent, #4f46e5); opacity: 0.7; margin-bottom: 6px; }
+  .ap-empty p { margin: 0; font-weight: 600; }
+  .ap-empty span { font-size: 12px; opacity: 0.65; }
+
+  .ap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-family: var(--sg-font, inherit); color: inherit; }
+  .ap-item {
+    display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
+    border: 1px solid color-mix(in srgb, currentColor 12%, transparent); border-left: 3px solid var(--sev);
+    border-radius: 10px; padding: 10px 12px; background: color-mix(in srgb, currentColor 3%, transparent);
+    transition: box-shadow 0.14s ease;
+  }
+  .ap-item:hover { box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--sev) 55%, transparent); }
+  .ap-item.ap-ack { opacity: 0.5; }
+  .ap-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 999px; background: var(--sev); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sev) 20%, transparent); }
+  .ap-content { min-width: 0; }
+  .ap-msg { margin: 0; font-size: 13px; line-height: 1.4; }
+  .ap-meta { display: flex; align-items: center; gap: 7px; font-size: 11px; opacity: 0.55; margin-top: 5px; }
+  .ap-rule { font-weight: 600; }
+  .ap-dotsep { width: 3px; height: 3px; border-radius: 999px; background: currentColor; opacity: 0.6; }
+  .ap-row-actions { display: flex; gap: 12px; margin-top: 8px; }
+  .ap-row-actions button { border: 0; background: transparent; color: var(--sg-accent, #4f46e5); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; }
+  .ap-row-actions button:hover { text-decoration: underline; }
+
+  .ap-ack-all { width: 100%; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); background: color-mix(in srgb, currentColor 4%, transparent); border-radius: 8px; padding: 8px; font-size: 13px; font-weight: 500; cursor: pointer; color: inherit; transition: background 0.13s ease; }
+  .ap-ack-all:hover:not(:disabled) { background: color-mix(in srgb, currentColor 11%, transparent); }
+  .ap-ack-all:disabled { opacity: 0.5; cursor: default; }
+</style>

package/src/SvBoard.svelte

@@ -26,7 +26,9 @@
     loading = false,
     height,
   }: {
-    schema: EntitySchema
+    // Accept any specialized EntitySchema<T> (the type param is invariant); this is
+    // pure presentation over the schema's field metadata + plain record rows.
+    schema: EntitySchema<any>
     rows?: ReadonlyArray<Row>
     /** Show shimmer placeholders (first load) instead of columns. */
     loading?: boolean

package/src/SvExpressionEditor.svelte

@@ -0,0 +1,341 @@
+<script lang="ts">
+  /**
+   * SvExpressionEditor - authors a predicate expression, either as a structured
+   * list of conditions (default) or as free text. Live-validates and, given a
+   * `rows` sample, shows how many rows currently match. Reuses the grid UI kit
+   * (SvDropDownList / SvTextInput / SvTagsInput) so it feels like the filter row.
+   */
+  import {
+    SvDropDownList,
+    SvTextInput,
+    SvTextArea,
+    SvTagsInput,
+    type ExcelFilterOperator,
+  } from '@svgrid/grid'
+  import { evaluatePredicate } from './expressions/evaluate'
+  import {
+    ExpressionParseError,
+    parsePredicate,
+    stringifyPredicate,
+    validateExpression,
+  } from './expressions/parse'
+  import {
+    columnById,
+    isRangeOperator,
+    isSetOperator,
+    isValueless,
+    operatorsForType,
+    type ExprColumn,
+  } from './expressions/expression-columns'
+  import type { PredicateExpr } from './expressions/expression-types'
+
+  type Condition = {
+    column: string
+    op: ExcelFilterOperator
+    value: string
+    valueTo: string
+    values: string[]
+  }
+
+  type Props = {
+    columns: ReadonlyArray<ExprColumn>
+    value?: PredicateExpr
+    rows?: ReadonlyArray<Record<string, unknown>>
+    onChange?: (value: PredicateExpr) => void
+    mode?: 'builder' | 'text'
+  }
+
+  let {
+    columns,
+    value = $bindable<PredicateExpr>({ kind: 'const', value: true }),
+    rows = [],
+    onChange,
+    mode = $bindable<'builder' | 'text'>('builder'),
+  }: Props = $props()
+
+  // --- Builder <-> predicate conversion ------------------------------------
+
+  function toConditions(expr: PredicateExpr): { combinator: 'and' | 'or'; conditions: Condition[] } | null {
+    const parts =
+      expr.kind === 'and' || expr.kind === 'or' ? expr.parts : [expr]
+    const combinator = expr.kind === 'or' ? 'or' : 'and'
+    const conditions: Condition[] = []
+    for (const p of parts) {
+      if (p.kind !== 'cmp') return null // scalarCmp / nested -> text mode only
+      conditions.push({
+        column: p.column,
+        op: p.op,
+        value: p.value != null && !Array.isArray(p.value) ? String(p.value) : '',
+        valueTo: p.valueTo != null ? String(p.valueTo) : '',
+        values: Array.isArray(p.value) ? p.value.map(String) : [],
+      })
+    }
+    return { combinator, conditions }
+  }
+
+  function fromConditions(combinator: 'and' | 'or', conditions: Condition[]): PredicateExpr {
+    const parts: PredicateExpr[] = conditions.map((c) => {
+      const base = { kind: 'cmp' as const, column: c.column, op: c.op }
+      if (isValueless(c.op)) return base
+      if (isSetOperator(c.op)) return { ...base, value: c.values }
+      if (isRangeOperator(c.op)) return { ...base, value: c.value, valueTo: c.valueTo }
+      return { ...base, value: c.value }
+    })
+    if (parts.length === 0) return { kind: 'const', value: true }
+    if (parts.length === 1) return parts[0]
+    return { kind: combinator, parts }
+  }
+
+  const initial = toConditions(value)
+  let combinator = $state<'and' | 'or'>(initial?.combinator ?? 'and')
+  let conditions = $state<Condition[]>(
+    initial?.conditions ?? [freshCondition()],
+  )
+  // If the incoming value is not representable as a flat condition list, start
+  // in text mode so nothing is lost.
+  if (!initial && mode === 'builder') mode = 'text'
+
+  let text = $state(stringifyPredicate(value, columns))
+  let textError = $state<string | null>(null)
+
+  function freshCondition(): Condition {
+    const first = columns[0]
+    const ops = operatorsForType(first?.type)
+    return { column: first?.id ?? '', op: ops[0]?.value ?? 'equals', value: '', valueTo: '', values: [] }
+  }
+
+  const columnOptions = $derived(columns.map((c) => ({ value: c.id, label: c.name ?? c.id })))
+
+  function opsFor(columnId: string) {
+    const type = columnById(columns, columnId)?.type
+    return operatorsForType(type).map((o) => ({ value: o.value, label: o.label }))
+  }
+
+  // --- Emit ----------------------------------------------------------------
+
+  function emitBuilder() {
+    const expr = fromConditions(combinator, conditions)
+    value = expr
+    text = stringifyPredicate(expr, columns)
+    textError = null
+    onChange?.(expr)
+  }
+
+  function emitText() {
+    if (!text.trim()) {
+      textError = 'Expression is empty'
+      return
+    }
+    try {
+      const expr = parsePredicate(text, columns)
+      const problems = validateExpression(expr, columns)
+      textError = problems.length ? problems.join('; ') : null
+      if (!problems.length) {
+        value = expr
+        onChange?.(expr)
+      }
+    } catch (err) {
+      textError = err instanceof ExpressionParseError ? err.message : 'Invalid expression'
+    }
+  }
+
+  function addCondition() {
+    conditions = [...conditions, freshCondition()]
+    emitBuilder()
+  }
+  function removeCondition(i: number) {
+    conditions = conditions.filter((_, idx) => idx !== i)
+    if (conditions.length === 0) conditions = [freshCondition()]
+    emitBuilder()
+  }
+  function setColumn(i: number, columnId: string) {
+    const ops = opsFor(columnId)
+    conditions[i].column = columnId
+    if (!ops.some((o) => o.value === conditions[i].op)) conditions[i].op = ops[0]?.value ?? 'equals'
+    emitBuilder()
+  }
+
+  function switchMode(next: 'builder' | 'text') {
+    if (next === mode) return
+    if (next === 'text') {
+      text = stringifyPredicate(value, columns)
+      textError = null
+    } else {
+      // Re-seed the builder from the parsed text, if representable.
+      try {
+        const expr = parsePredicate(text, columns)
+        const c = toConditions(expr)
+        if (!c) {
+          textError = 'This expression uses maths or grouping - stay in text mode'
+          return
+        }
+        combinator = c.combinator
+        conditions = c.conditions
+        value = expr
+      } catch {
+        textError = 'Fix the expression before switching'
+        return
+      }
+    }
+    mode = next
+  }
+
+  // --- Live preview --------------------------------------------------------
+
+  // Cap how many rows the live "matches" counter scans. Rule editors are often
+  // opened over the full grid (100k+ rows) and this recomputes on every keystroke
+  // / condition edit, so an uncapped scan would freeze the editor. We sample the
+  // first N rows and label the count as approximate when the set is larger.
+  const PREVIEW_SAMPLE = 2000
+
+  const matchPreview = $derived.by(() => {
+    const total = rows.length
+    if (!total) return null
+    const limit = total > PREVIEW_SAMPLE ? PREVIEW_SAMPLE : total
+    try {
+      let n = 0
+      for (let i = 0; i < limit; i++) {
+        const row = rows[i]
+        if (row && evaluatePredicate(value, { row })) n++
+      }
+      return { n, sampled: limit, total }
+    } catch {
+      return null
+    }
+  })
+</script>
+
+<div class="sx-editor">
+  <div class="sx-head">
+    <div class="sx-modes" role="tablist" aria-label="Expression editor mode">
+      <button
+        type="button"
+        role="tab"
+        aria-selected={mode === 'builder'}
+        class:sx-active={mode === 'builder'}
+        onclick={() => switchMode('builder')}>Builder</button>
+      <button
+        type="button"
+        role="tab"
+        aria-selected={mode === 'text'}
+        class:sx-active={mode === 'text'}
+        onclick={() => switchMode('text')}>Text</button>
+    </div>
+    {#if matchPreview}
+      <span class="sx-match" aria-live="polite">
+        {#if matchPreview.sampled < matchPreview.total}
+          Matches ~{matchPreview.n} of first {matchPreview.sampled}
+        {:else}
+          Matches {matchPreview.n} of {matchPreview.total}
+        {/if}
+      </span>
+    {/if}
+  </div>
+
+  {#if mode === 'builder'}
+    <div class="sx-combinator">
+      Match
+      <SvDropDownList
+        size="sm"
+        options={[{ value: 'and', label: 'all' }, { value: 'or', label: 'any' }]}
+        value={combinator}
+        onChange={(v) => { combinator = v as 'and' | 'or'; emitBuilder() }}
+        ariaLabel="Combine conditions" />
+      of the following:
+    </div>
+    <div class="sx-rows">
+      {#each conditions as cond, i (i)}
+        <div class="sx-row">
+          <SvDropDownList
+            size="sm"
+            options={columnOptions}
+            value={cond.column}
+            onChange={(v) => setColumn(i, String(v))}
+            ariaLabel="Column" />
+          <SvDropDownList
+            size="sm"
+            options={opsFor(cond.column)}
+            value={cond.op}
+            onChange={(v) => { conditions[i].op = v as ExcelFilterOperator; emitBuilder() }}
+            ariaLabel="Operator" />
+          {#if isValueless(cond.op)}
+            <span class="sx-noval">-</span>
+          {:else if isSetOperator(cond.op)}
+            <SvTagsInput
+              value={cond.values}
+              onChange={(vals) => { conditions[i].values = vals; emitBuilder() }}
+              placeholder="Add value…"
+              ariaLabel="Values" />
+          {:else if isRangeOperator(cond.op)}
+            <SvTextInput
+              size="sm"
+              value={cond.value}
+              onChange={(v) => { conditions[i].value = v; emitBuilder() }}
+              placeholder="From"
+              ariaLabel="From" />
+            <SvTextInput
+              size="sm"
+              value={cond.valueTo}
+              onChange={(v) => { conditions[i].valueTo = v; emitBuilder() }}
+              placeholder="To"
+              ariaLabel="To" />
+          {:else}
+            <SvTextInput
+              size="sm"
+              value={cond.value}
+              onChange={(v) => { conditions[i].value = v; emitBuilder() }}
+              placeholder="Value"
+              ariaLabel="Value" />
+          {/if}
+          <button type="button" class="sx-del" onclick={() => removeCondition(i)} aria-label="Remove condition">✕</button>
+        </div>
+      {/each}
+    </div>
+    <button type="button" class="sx-add" onclick={addCondition}>+ Add condition</button>
+  {:else}
+    <SvTextArea
+      value={text}
+      onChange={(v) => { text = v; emitText() }}
+      rows={3}
+      placeholder={'e.g. price > 100 AND region IN ("EU", "US")'}
+      ariaLabel="Expression text" />
+    {#if textError}
+      <p class="sx-error" role="alert">{textError}</p>
+    {:else}
+      <p class="sx-hint">Use AND / OR / NOT, CONTAINS, IN (…), BETWEEN … AND …, and column maths.</p>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  /* Theme-agnostic surfaces (see SvGridAlerts): currentColor + inherit. */
+  .sx-editor {
+    display: flex; flex-direction: column; gap: 10px; font-family: var(--sg-font, inherit); color: inherit;
+    background: color-mix(in srgb, currentColor 4%, transparent);
+    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
+    border-radius: 10px; padding: 12px;
+  }
+  .sx-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+  .sx-modes { display: inline-flex; padding: 2px; border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: 8px; gap: 2px; }
+  .sx-modes button { border: 0; background: transparent; color: inherit; opacity: 0.65; padding: 4px 12px; font-size: 12px; font-weight: 500; border-radius: 6px; cursor: pointer; transition: background 0.13s ease, opacity 0.13s ease; }
+  .sx-modes button:hover { opacity: 1; }
+  .sx-modes button.sx-active { background: var(--sg-accent, #4f46e5); color: #fff; opacity: 1; }
+  .sx-match {
+    font-size: 11.5px; font-weight: 600; color: var(--sg-accent, #4f46e5);
+    background: color-mix(in srgb, var(--sg-accent, #4f46e5) 14%, transparent);
+    padding: 3px 9px; border-radius: 999px;
+  }
+  .sx-combinator { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.7; }
+  .sx-rows { display: flex; flex-direction: column; gap: 7px; }
+  .sx-row {
+    display: grid; grid-template-columns: minmax(90px, 1fr) minmax(90px, 1fr) 2fr auto; gap: 7px; align-items: center;
+    border: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius: 9px; padding: 8px;
+  }
+  .sx-noval { text-align: center; font-size: 13px; opacity: 0.5; }
+  .sx-del { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; background: transparent; color: inherit; opacity: 0.55; cursor: pointer; font-size: 13px; border-radius: 7px; transition: background 0.13s ease, color 0.13s ease, opacity 0.13s ease; }
+  .sx-del:hover { color: var(--sg-danger, #dc2626); opacity: 1; background: color-mix(in srgb, var(--sg-danger, #dc2626) 12%, transparent); }
+  .sx-add { align-self: flex-start; border: 1px dashed color-mix(in srgb, var(--sg-accent, #4f46e5) 45%, currentColor); background: transparent; color: var(--sg-accent, #4f46e5); border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.13s ease; }
+  .sx-add:hover { background: color-mix(in srgb, var(--sg-accent, #4f46e5) 10%, transparent); }
+  .sx-error { margin: 0; font-size: 12px; color: var(--sg-danger, #dc2626); }
+  .sx-hint { margin: 0; font-size: 12px; opacity: 0.55; }
+</style>

package/src/SvGridAlerts.dom.test.ts

@@ -0,0 +1,113 @@
+/**
+ * DOM tests for the alerts overlay + editors. Covers (1) the observe -> fire
+ * loop through `attachAlertEngine` (which needs the browser build for the toast
+ * store), and (2) that the Svelte surfaces mount and render without error.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvGridAlerts from './SvGridAlerts.svelte'
+import SvExpressionEditor from './SvExpressionEditor.svelte'
+import SvAlertsManager from './SvAlertsManager.svelte'
+import { attachAlertEngine } from './alerts/alert-engine-attach'
+import { alertStore } from './alerts/alert-store.svelte'
+import { createAlertRules, memoryAlertRules } from './alerts/alert-storage'
+import type { AlertRule } from './alerts/alert-types'
+import type { ExprColumn } from './expressions/expression-columns'
+
+type Row = { id: string; price: number; region: string }
+
+const columns: ExprColumn[] = [
+  { id: 'price', name: 'Price', type: 'number' },
+  { id: 'region', name: 'Region', type: 'text' },
+]
+
+const highPrice: AlertRule = {
+  id: 'r1',
+  name: 'High price',
+  enabled: true,
+  severity: 'warning',
+  scope: 'row',
+  predicate: { kind: 'cmp', column: 'price', op: 'greaterThan', value: 100 },
+  trigger: { type: 'dataChange' },
+  actions: [{ kind: 'toast', message: '{region} at {value}' }, { kind: 'highlight', style: { background: '#fee2e2' } }],
+  createdAt: 0,
+}
+
+let host: HTMLElement | null = null
+let comp: ReturnType<typeof mount> | null = null
+afterEach(() => {
+  if (comp) { unmount(comp); comp = null }
+  if (host) { host.remove(); host = null }
+  alertStore.clear()
+})
+
+function render(Component: unknown, props: Record<string, unknown>): HTMLElement {
+  host = document.createElement('div')
+  document.body.appendChild(host)
+  comp = mount(Component as never, { target: host, props })
+  flushSync()
+  return host
+}
+
+describe('attachAlertEngine observe -> fire loop', () => {
+  it('seeds silently, then fires when a row newly matches', () => {
+    const rows: Row[] = [
+      { id: 'a', price: 80, region: 'EU' },
+      { id: 'b', price: 90, region: 'US' },
+    ]
+    const attach = attachAlertEngine<Row>({
+      rules: [highPrice],
+      getRowId: (r) => r.id,
+      getData: () => rows,
+      intervalMs: 0, // drive manually
+    })
+
+    attach.tick() // initial seed - nothing above 100 yet
+    expect(alertStore.events).toHaveLength(0)
+
+    rows[0] = { ...rows[0]!, price: 130 } // 'a' crosses the threshold
+    attach.tick()
+    expect(alertStore.events.length).toBe(1)
+    expect(alertStore.events[0]!.message).toBe('EU at 130')
+
+    // Staying above the line must not re-fire.
+    attach.tick()
+    expect(alertStore.events.length).toBe(1)
+    attach.detach()
+  })
+})
+
+describe('SvGridAlerts (DOM)', () => {
+  it('renders the alerts controls', () => {
+    const el = render(SvGridAlerts, {
+      data: [{ id: 'a', price: 120, region: 'EU' }],
+      columns,
+      rules: [highPrice],
+    })
+    expect(el.querySelector('.sg-alerts-bell')).toBeTruthy()
+    expect(el.textContent).toContain('Manage alerts')
+  })
+})
+
+describe('SvExpressionEditor (DOM)', () => {
+  it('renders builder + text mode tabs', () => {
+    const el = render(SvExpressionEditor, {
+      columns,
+      value: { kind: 'cmp', column: 'price', op: 'greaterThan', value: 100 },
+      rows: [{ price: 120 }, { price: 50 }],
+    })
+    expect(el.textContent).toContain('Builder')
+    expect(el.textContent).toContain('Text')
+    // Live preview counts matches over the sample rows.
+    expect(el.textContent).toContain('Matches 1 of 2')
+  })
+})
+
+describe('SvAlertsManager (DOM)', () => {
+  it('lists persisted rules when open', () => {
+    const manager = createAlertRules(memoryAlertRules([highPrice]))
+    render(SvAlertsManager, { open: true, manager, columns })
+    // The manager renders inside a portalled modal.
+    expect(document.body.textContent).toContain('High price')
+  })
+})