@svgrid/enterprise 2.2.0 → 2.3.0

package/package.json

@@ -4,8 +4,8 @@
     "type": "commercial",
     "url": "https://svgrid.com/pricing"
   },
-  "version": "2.2.0",
-  "description": "Pro feature pack for sv-grid: data export (Excel, PDF, CSV, TSV, HTML), import (xlsx, CSV, TSV, JSON), pivot table + designer, AI assistant (BYO model), and printing. Requires a paid license key.",
+  "version": "2.3.0",
+  "description": "Enterprise feature pack for SvGrid: Excel (xlsx), PDF, CSV, TSV and HTML export, Excel/CSV/JSON import, pivot tables with a drag-and-drop designer, paginated print, Kanban board and scheduler views. Requires a paid license key.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "jQWidgets <sales@jqwidgets.com>",
   "homepage": "https://svgrid.com/pricing",
@@ -26,11 +26,6 @@
       "svelte": "./src/print.ts",
       "import": "./src/print.ts"
     },
-    "./ai": {
-      "types": "./src/ai.ts",
-      "svelte": "./src/ai.ts",
-      "import": "./src/ai.ts"
-    },
     "./import": {
       "types": "./src/import.ts",
       "svelte": "./src/import.ts",
@@ -69,7 +64,7 @@
     "svelte": "^5.0.0",
     "jszip": "^3.10.0",
     "pdfmake": "^0.2.0",
-    "@svgrid/grid": "^2.2.0"
+    "@svgrid/grid": "^2.2.27"
   },
   "peerDependenciesMeta": {
     "jszip": {
@@ -86,13 +81,39 @@
     "svelte": "^5.55.5",
     "typescript": "6.0.3",
     "vite": "^8.0.10",
-    "@svgrid/grid": "^2.2.0"
+    "@svgrid/grid": "^2.2.27"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sv-grid/sv-grid.git",
+    "directory": "packages/enterprise"
   },
+  "keywords": [
+    "svelte",
+    "svelte5",
+    "sveltekit",
+    "data grid",
+    "datagrid",
+    "data table",
+    "excel export",
+    "xlsx",
+    "pdf export",
+    "csv",
+    "pivot table",
+    "pivot",
+    "import",
+    "print",
+    "kanban",
+    "scheduler",
+    "svgrid",
+    "sv-grid"
+  ],
   "scripts": {
     "test": "vitest run",
     "test:types": "tsc -p tsconfig.json --noEmit",
     "build": "node ./scripts/build-cdn.mjs && node ./scripts/build-node.mjs",
     "build:cdn": "node ./scripts/build-cdn.mjs",
-    "build:node": "node ./scripts/build-node.mjs"
+    "build:node": "node ./scripts/build-node.mjs",
+    "extract:ui-props": "node scripts/extract-ui-props.mjs"
   }
 }

package/src/SvAlertRuleEditor.svelte

@@ -0,0 +1,294 @@
+<script lang="ts">
+  /**
+   * SvAlertRuleEditor - a modal that authors a single alert rule: name /
+   * severity / scope, the trigger (data change, relative change, validation,
+   * scheduled), the predicate (embedded SvExpressionEditor), and the actions
+   * (toast / badge / highlight / flash / prevent-edit / log). Reuses the grid
+   * UI kit so it matches the rest of the app.
+   */
+  import { SvModal, SvField, SvTextInput, SvDropDownList, SvColorInput, SvTagsInput } from '@svgrid/grid'
+  import SvExpressionEditor from './SvExpressionEditor.svelte'
+  import { CRON_PRESETS } from './scheduling'
+  import type { ExprColumn } from './expressions/expression-columns'
+  import type { PredicateExpr } from './expressions/expression-types'
+  import type {
+    AlertAction,
+    AlertActionKind,
+    AlertRule,
+    AlertScope,
+    AlertSeverity,
+    AlertTrigger,
+  } from './alerts/alert-types'
+
+  type Props = {
+    open?: boolean
+    columns: ReadonlyArray<ExprColumn>
+    rule?: AlertRule | null
+    rows?: ReadonlyArray<Record<string, unknown>>
+    onSave?: (rule: AlertRule) => void
+    onClose?: () => void
+  }
+
+  let {
+    open = $bindable(false),
+    columns,
+    rule = null,
+    rows = [],
+    onSave,
+    onClose,
+  }: Props = $props()
+
+  const ACTION_KINDS: { kind: AlertActionKind; label: string }[] = [
+    { kind: 'toast', label: 'Toast notification' },
+    { kind: 'highlight', label: 'Highlight row/cell' },
+    { kind: 'badge', label: 'Colour badge' },
+    { kind: 'cellFlash', label: 'Flash the cell' },
+    { kind: 'preventEdit', label: 'Prevent the edit' },
+    { kind: 'log', label: 'Log only' },
+  ]
+
+  const TRIGGERS = [
+    { value: 'dataChange', label: 'When data matches' },
+    { value: 'relativeChange', label: 'When a value moves' },
+    { value: 'validation', label: 'On edit (validation)' },
+    { value: 'scheduled', label: 'On a schedule' },
+  ]
+
+  const CHANGE_KINDS = [
+    { value: 'changed', label: 'changed at all' },
+    { value: 'delta', label: 'moved by (absolute)' },
+    { value: 'percentChange', label: 'moved by (percent)' },
+    { value: 'crossed', label: 'crossed a threshold' },
+  ]
+
+  // --- Draft state ---------------------------------------------------------
+
+  let name = $state('')
+  let severity = $state<AlertSeverity>('warning')
+  let scope = $state<AlertScope>('row')
+  let triggerType = $state<AlertTrigger['type']>('dataChange')
+  let predicate = $state<PredicateExpr>({ kind: 'const', value: true })
+  let selected = $state<Set<AlertActionKind>>(new Set(['toast']))
+  let message = $state('')
+  let background = $state('#fee2e2')
+  let color = $state('#991b1b')
+  let targetColumns = $state<string[]>([])
+
+  // relativeChange draft
+  let changeKind = $state<'changed' | 'delta' | 'percentChange' | 'crossed'>('percentChange')
+  let changeColumn = $state('')
+  let changeOp = $state<'>' | '<' | '>=' | '<='>('>')
+  let changeValue = $state('5')
+  let changeAbs = $state(true)
+  let changeDirection = $state<'above' | 'below'>('above')
+
+  // scheduled draft
+  let cron = $state(CRON_PRESETS[3].cron)
+
+  let createdAt = $state(0)
+  let ruleId = $state('')
+
+  // Re-seed the draft each time the modal opens.
+  let wasOpen = $state(false)
+  $effect(() => {
+    if (open && !wasOpen) seed()
+    wasOpen = open
+  })
+
+  function seed() {
+    name = rule?.name ?? ''
+    severity = rule?.severity ?? 'warning'
+    scope = rule?.scope ?? 'row'
+    triggerType = rule?.trigger.type ?? 'dataChange'
+    predicate = rule?.predicate ?? { kind: 'const', value: true }
+    selected = new Set(rule?.actions.map((a) => a.kind) ?? ['toast'])
+    message = rule?.actions.find((a) => a.message)?.message ?? ''
+    const styled = rule?.actions.find((a) => a.style)
+    background = styled?.style?.background ?? '#fee2e2'
+    color = styled?.style?.color ?? '#991b1b'
+    targetColumns = rule?.columns ?? []
+    createdAt = rule?.createdAt ?? Date.now()
+    ruleId = rule?.id ?? `alert-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`
+    changeColumn = columns[0]?.id ?? ''
+    if (rule?.trigger.type === 'relativeChange') {
+      const e = rule.trigger.expr
+      changeKind = e.kind
+      changeColumn = e.column
+      if (e.kind === 'delta' || e.kind === 'percentChange') {
+        changeOp = e.op as '>' | '<' | '>=' | '<='
+        changeValue = String(e.value)
+        changeAbs = e.abs ?? false
+      } else if (e.kind === 'crossed') {
+        changeValue = String(e.threshold)
+        changeDirection = e.direction
+      }
+    }
+    if (rule?.trigger.type === 'scheduled') cron = rule.trigger.schedule.cron ?? CRON_PRESETS[3].cron
+  }
+
+  function toggle(kind: AlertActionKind, on: boolean) {
+    const next = new Set(selected)
+    if (on) next.add(kind)
+    else next.delete(kind)
+    selected = next
+  }
+
+  const showStyle = $derived(selected.has('highlight') || selected.has('badge'))
+  const showTargets = $derived(showStyle || selected.has('cellFlash') || scope === 'cell')
+
+  function buildTrigger(): AlertTrigger {
+    if (triggerType === 'relativeChange') {
+      const column = changeColumn
+      const value = Number(changeValue)
+      if (changeKind === 'changed') return { type: 'relativeChange', expr: { kind: 'changed', column } }
+      if (changeKind === 'crossed')
+        return { type: 'relativeChange', expr: { kind: 'crossed', column, threshold: value, direction: changeDirection } }
+      return { type: 'relativeChange', expr: { kind: changeKind, column, op: changeOp, value, abs: changeAbs } }
+    }
+    if (triggerType === 'scheduled') return { type: 'scheduled', schedule: { id: ruleId, cron } }
+    if (triggerType === 'validation') return { type: 'validation' }
+    return { type: 'dataChange' }
+  }
+
+  function buildActions(): AlertAction[] {
+    const cols = targetColumns.length ? targetColumns : undefined
+    return [...selected].map((kind) => {
+      const action: AlertAction = { kind }
+      if (message && (kind === 'toast' || kind === 'log' || kind === 'preventEdit')) action.message = message
+      if (kind === 'highlight' || kind === 'badge') {
+        action.style = { background, color }
+        if (cols) action.columns = cols
+      }
+      if (kind === 'cellFlash' && cols) action.columns = cols
+      return action
+    })
+  }
+
+  function save() {
+    if (!name.trim()) { name = 'Untitled alert' }
+    const built: AlertRule = {
+      id: ruleId,
+      name: name.trim(),
+      enabled: rule?.enabled ?? true,
+      severity,
+      scope,
+      predicate,
+      trigger: buildTrigger(),
+      actions: buildActions(),
+      ...(targetColumns.length ? { columns: targetColumns } : {}),
+      createdAt,
+    }
+    onSave?.(built)
+    open = false
+    onClose?.()
+  }
+</script>
+
+<SvModal bind:open size="lg" title={rule ? 'Edit alert rule' : 'New alert rule'} onClose={() => onClose?.()}>
+  <div class="ar-body">
+    <div class="ar-grid">
+      <SvField label="Name">
+        <SvTextInput value={name} onChange={(v) => (name = v)} placeholder="e.g. Price spike" />
+      </SvField>
+      <SvField label="Severity">
+        <SvDropDownList
+          options={[{ value: 'info', label: 'Info' }, { value: 'success', label: 'Success' }, { value: 'warning', label: 'Warning' }, { value: 'error', label: 'Error' }]}
+          value={severity}
+          onChange={(v) => (severity = v as AlertSeverity)} />
+      </SvField>
+      <SvField label="Scope">
+        <SvDropDownList
+          options={[{ value: 'row', label: 'Row' }, { value: 'cell', label: 'Cell' }, { value: 'aggregate', label: 'Aggregate' }]}
+          value={scope}
+          onChange={(v) => (scope = v as AlertScope)} />
+      </SvField>
+      <SvField label="Trigger">
+        <SvDropDownList options={TRIGGERS} value={triggerType} onChange={(v) => (triggerType = v as AlertTrigger['type'])} />
+      </SvField>
+    </div>
+
+    {#if triggerType === 'relativeChange'}
+      <fieldset class="ar-fieldset">
+        <legend>Value movement</legend>
+        <div class="ar-change">
+          <SvDropDownList size="sm" options={columns.map((c) => ({ value: c.id, label: c.name ?? c.id }))} value={changeColumn} onChange={(v) => (changeColumn = String(v))} ariaLabel="Column" />
+          <SvDropDownList size="sm" options={CHANGE_KINDS} value={changeKind} onChange={(v) => (changeKind = v as typeof changeKind)} ariaLabel="Change kind" />
+          {#if changeKind === 'delta' || changeKind === 'percentChange'}
+            <SvDropDownList size="sm" options={[{ value: '>', label: '>' }, { value: '<', label: '<' }, { value: '>=', label: '>=' }, { value: '<=', label: '<=' }]} value={changeOp} onChange={(v) => (changeOp = v as typeof changeOp)} ariaLabel="Operator" />
+            <SvTextInput size="sm" value={changeValue} onChange={(v) => (changeValue = v)} placeholder={changeKind === 'percentChange' ? '%' : 'amount'} ariaLabel="Amount" />
+            <label class="ar-check"><input type="checkbox" checked={changeAbs} onchange={(e) => (changeAbs = e.currentTarget.checked)} /> absolute</label>
+          {:else if changeKind === 'crossed'}
+            <SvDropDownList size="sm" options={[{ value: 'above', label: 'upward through' }, { value: 'below', label: 'downward through' }]} value={changeDirection} onChange={(v) => (changeDirection = v as typeof changeDirection)} ariaLabel="Direction" />
+            <SvTextInput size="sm" value={changeValue} onChange={(v) => (changeValue = v)} placeholder="threshold" ariaLabel="Threshold" />
+          {/if}
+        </div>
+      </fieldset>
+    {:else if triggerType === 'scheduled'}
+      <SvField label="Schedule">
+        <SvDropDownList options={CRON_PRESETS.map((p) => ({ value: p.cron, label: p.label }))} value={cron} onChange={(v) => (cron = String(v))} />
+      </SvField>
+    {/if}
+
+    <SvField label={triggerType === 'validation' ? 'Reject the edit when' : 'Condition'}>
+      <SvExpressionEditor {columns} bind:value={predicate} {rows} />
+    </SvField>
+
+    <fieldset class="ar-fieldset">
+      <legend>When it fires</legend>
+      <div class="ar-actions">
+        {#each ACTION_KINDS as a (a.kind)}
+          <label class="ar-check">
+            <input type="checkbox" checked={selected.has(a.kind)} onchange={(e) => toggle(a.kind, e.currentTarget.checked)} />
+            {a.label}
+          </label>
+        {/each}
+      </div>
+      <div class="ar-message">
+        <SvField label="Message (tokens: {'{value}'}, {'{column}'}, {'{field}'})">
+          <SvTextInput value={message} onChange={(v) => (message = v)} placeholder="e.g. {'{'}region{'}'} price hit {'{'}value{'}'}" />
+        </SvField>
+      </div>
+      {#if showStyle}
+        <div class="ar-style">
+          <SvField label="Background"><SvColorInput value={background} onChange={(v) => (background = v)} /></SvField>
+          <SvField label="Text"><SvColorInput value={color} onChange={(v) => (color = v)} /></SvField>
+        </div>
+      {/if}
+      {#if showTargets}
+        <SvField label="Target columns (blank = whole row)">
+          <SvTagsInput value={targetColumns} onChange={(v) => (targetColumns = v)} placeholder="column id…" />
+        </SvField>
+      {/if}
+    </fieldset>
+  </div>
+
+  {#snippet footer()}
+    <button type="button" class="ar-btn ar-ghost" onclick={() => { open = false; onClose?.() }}>Cancel</button>
+    <button type="button" class="ar-btn ar-primary" onclick={save}>{rule ? 'Save changes' : 'Create alert'}</button>
+  {/snippet}
+</SvModal>
+
+<style>
+  /* Theme-agnostic surfaces: currentColor + inherit (readable in any theme). */
+  .ar-body { display: flex; flex-direction: column; gap: 14px; max-height: 64vh; overflow: auto; padding: 2px; font-family: var(--sg-font, inherit); color: inherit; }
+  .ar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+  .ar-fieldset { border: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius: 10px; padding: 12px 14px 14px; margin: 0; background: color-mix(in srgb, currentColor 3%, transparent); }
+  .ar-fieldset legend { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; opacity: 0.6; padding: 0 6px; }
+  .ar-change { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
+  .ar-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
+  .ar-check {
+    display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: inherit;
+    padding: 7px 10px; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-radius: 8px;
+    background: color-mix(in srgb, currentColor 3%, transparent);
+    cursor: pointer; transition: border-color 0.13s ease, background 0.13s ease;
+  }
+  .ar-check:hover { border-color: color-mix(in srgb, var(--sg-accent, #4f46e5) 45%, currentColor); background: color-mix(in srgb, var(--sg-accent, #4f46e5) 7%, transparent); }
+  .ar-check input { accent-color: var(--sg-accent, #4f46e5); width: 15px; height: 15px; }
+  .ar-message { margin-top: 10px; }
+  .ar-style { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
+  .ar-btn { border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: background 0.14s ease, border-color 0.14s ease, filter 0.14s ease; }
+  .ar-ghost { background: color-mix(in srgb, currentColor 5%, transparent); border-color: color-mix(in srgb, currentColor 22%, transparent); color: inherit; }
+  .ar-ghost:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
+  .ar-primary { background: var(--sg-accent, #4f46e5); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.12); }
+  .ar-primary:hover { filter: brightness(1.08); }
+</style>

package/src/SvAlertsManager.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">
+  /**
+   * SvAlertsManager - the rule list. Enable/disable, edit, delete, create, and
+   * share (export/import JSON) alert rules. Editing opens SvAlertRuleEditor.
+   * Operates through an AlertRulesManager (persistence) and emits the updated
+   * list so the running engine can re-sync.
+   */
+  import { SvModal, SvSwitchButton, toast } from '@svgrid/grid'
+  import SvAlertRuleEditor from './SvAlertRuleEditor.svelte'
+  import { stringifyPredicate } from './expressions/parse'
+  import type { ExprColumn } from './expressions/expression-columns'
+  import type { AlertRulesManager } from './alerts/alert-storage'
+  import type { AlertRule, AlertSeverity } from './alerts/alert-types'
+
+  type Props = {
+    open?: boolean
+    manager: AlertRulesManager
+    columns: ReadonlyArray<ExprColumn>
+    rows?: ReadonlyArray<Record<string, unknown>>
+    onChange?: (rules: AlertRule[]) => void
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), manager, columns, rows = [], onChange, onClose }: Props = $props()
+
+  let rules = $state<AlertRule[]>(manager.list())
+  let editing = $state<AlertRule | null>(null)
+  let editorOpen = $state(false)
+  let fileInput = $state<HTMLInputElement | null>(null)
+
+  // Re-read the persisted list whenever the manager modal opens.
+  let wasOpen = $state(false)
+  $effect(() => {
+    if (open && !wasOpen) rules = manager.list()
+    wasOpen = open
+  })
+
+  const SEV_COLOR: Record<AlertSeverity, string> = {
+    info: '#3b82f6', success: '#16a34a', warning: '#d97706', error: '#dc2626',
+  }
+  const SEV_LABEL: Record<AlertSeverity, string> = {
+    info: 'Info', success: 'Success', warning: 'Warning', error: 'Critical',
+  }
+
+  function sync() {
+    rules = manager.list()
+    onChange?.(rules)
+  }
+
+  function newRule() {
+    editing = null
+    editorOpen = true
+  }
+  function editRule(rule: AlertRule) {
+    editing = rule
+    editorOpen = true
+  }
+  function onSaved(rule: AlertRule) {
+    manager.save(rule)
+    sync()
+  }
+  function toggle(rule: AlertRule) {
+    manager.toggle(rule.id)
+    sync()
+  }
+  function remove(rule: AlertRule) {
+    manager.remove(rule.id)
+    sync()
+  }
+
+  function exportRules() {
+    const json = manager.export()
+    const blob = new Blob([json], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'alert-rules.json'
+    a.click()
+    URL.revokeObjectURL(url)
+    toast.success('Exported alert rules')
+  }
+  function importRules(e: Event) {
+    const file = (e.currentTarget as HTMLInputElement).files?.[0]
+    if (!file) return
+    const reader = new FileReader()
+    reader.onload = () => {
+      try {
+        manager.import(String(reader.result))
+        sync()
+        toast.success('Imported alert rules')
+      } catch {
+        toast.error('Could not import - invalid file')
+      }
+    }
+    reader.readAsText(file)
+  }
+
+  function triggerText(rule: AlertRule): string {
+    switch (rule.trigger.type) {
+      case 'relativeChange': return 'on movement'
+      case 'validation': return 'on edit'
+      case 'scheduled': return 'scheduled'
+      default: return 'on match'
+    }
+  }
+</script>
+
+<SvModal bind:open size="lg" title="Alert rules" onClose={() => onClose?.()}>
+  <div class="am-body">
+    {#if rules.length === 0}
+      <div class="am-empty">
+        <svg viewBox="0 0 24 24" width="34" height="34" 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 class="am-empty-title">No alert rules yet</p>
+        <p class="am-empty-sub">Create one to get a toast, a highlight, or a flash the moment your data crosses a line.</p>
+        <button type="button" class="am-btn am-primary" onclick={newRule}>+ New alert</button>
+      </div>
+    {:else}
+      <ul class="am-list">
+        {#each rules as rule (rule.id)}
+          <li class="am-item" class:am-off={!rule.enabled} style={`--sev: ${SEV_COLOR[rule.severity]}`}>
+            <span class="am-strip" aria-hidden="true"></span>
+            <SvSwitchButton checked={rule.enabled} onChange={() => toggle(rule)} ariaLabel={`Enable ${rule.name}`} />
+            <button type="button" class="am-main" onclick={() => editRule(rule)}>
+              <div class="am-title">
+                <span class="am-name">{rule.name}</span>
+                <span class="am-sev">{SEV_LABEL[rule.severity]}</span>
+                <span class="am-trigger">{triggerText(rule)}</span>
+              </div>
+              <code class="am-expr">{stringifyPredicate(rule.predicate, columns)}</code>
+            </button>
+            <div class="am-tools">
+              <button type="button" class="am-icon" onclick={() => editRule(rule)} aria-label={`Edit ${rule.name}`} title="Edit">
+                <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9" /><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" /></svg>
+              </button>
+              <button type="button" class="am-icon am-danger" onclick={() => remove(rule)} aria-label={`Delete ${rule.name}`} title="Delete">
+                <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m2 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" /></svg>
+              </button>
+            </div>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+
+  {#snippet footer()}
+    <div class="am-footer">
+      <div class="am-share">
+        <button type="button" class="am-btn am-ghost" onclick={exportRules}>Export</button>
+        <button type="button" class="am-btn am-ghost" onclick={() => fileInput?.click()}>Import</button>
+        <input bind:this={fileInput} type="file" accept="application/json" hidden onchange={importRules} />
+      </div>
+      <button type="button" class="am-btn am-primary" onclick={newRule}>+ New alert</button>
+    </div>
+  {/snippet}
+</SvModal>
+
+<SvAlertRuleEditor bind:open={editorOpen} {columns} rule={editing} {rows} onSave={onSaved} />
+
+<style>
+  /* Theme-agnostic surfaces: currentColor + inherit (readable in any theme). */
+  .am-body { min-width: 540px; max-width: 640px; max-height: 60vh; overflow: auto; font-family: var(--sg-font, inherit); color: inherit; }
+
+  .am-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 44px 24px; text-align: center; }
+  .am-empty svg { color: var(--sg-accent, #4f46e5); opacity: 0.75; margin-bottom: 4px; }
+  .am-empty-title { margin: 0; font-size: 15px; font-weight: 600; }
+  .am-empty-sub { margin: 0 0 8px; font-size: 13px; max-width: 34ch; line-height: 1.5; opacity: 0.65; }
+
+  .am-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+  .am-item {
+    position: relative; display: grid; grid-template-columns: auto auto 1fr auto; gap: 12px; align-items: center;
+    padding: 11px 12px 11px 16px;
+    background: color-mix(in srgb, currentColor 3%, transparent);
+    border: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius: 11px; overflow: hidden;
+    transition: border-color 0.14s ease, box-shadow 0.14s ease;
+  }
+  .am-item:hover { border-color: color-mix(in srgb, var(--sev) 55%, transparent); box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--sev) 60%, transparent); }
+  .am-item.am-off { opacity: 0.55; }
+  .am-strip { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sev); }
+
+  .am-main { flex: 1; min-width: 0; text-align: left; border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; color: inherit; }
+  .am-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+  .am-name { font-weight: 600; font-size: 14px; }
+  .am-sev {
+    font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
+    color: var(--sev); background: color-mix(in srgb, var(--sev) 16%, transparent);
+    padding: 2px 7px; border-radius: 999px;
+  }
+  .am-trigger { font-size: 11px; opacity: 0.55; text-transform: uppercase; letter-spacing: 0.04em; }
+  .am-expr { display: block; font-size: 12px; opacity: 0.7; margin-top: 4px; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+
+  .am-tools { display: flex; gap: 4px; }
+  .am-icon {
+    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
+    border: 1px solid transparent; background: transparent; border-radius: 8px; cursor: pointer;
+    color: inherit; opacity: 0.6; transition: background 0.13s ease, opacity 0.13s ease, border-color 0.13s ease, color 0.13s ease;
+  }
+  .am-icon:hover { background: color-mix(in srgb, currentColor 10%, transparent); opacity: 1; border-color: color-mix(in srgb, currentColor 15%, transparent); }
+  .am-icon.am-danger:hover { color: var(--sg-danger, #dc2626); opacity: 1; background: color-mix(in srgb, var(--sg-danger, #dc2626) 12%, transparent); border-color: color-mix(in srgb, var(--sg-danger, #dc2626) 35%, transparent); }
+
+  .am-footer { display: flex; justify-content: space-between; align-items: center; width: 100%; }
+  .am-share { display: flex; gap: 6px; }
+  .am-btn { border-radius: 8px; padding: 7px 15px; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: background 0.14s ease, border-color 0.14s ease, filter 0.14s ease; }
+  .am-ghost { background: color-mix(in srgb, currentColor 5%, transparent); border-color: color-mix(in srgb, currentColor 22%, transparent); color: inherit; }
+  .am-ghost:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
+  .am-primary { background: var(--sg-accent, #4f46e5); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.12); }
+  .am-primary:hover { filter: brightness(1.08); }
+</style>