@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/widgets/display/Badge.svelte

@@ -0,0 +1,72 @@
+<!-- src/lib/widgets/display/Badge.svelte
+     origin: slev12397/beautiful-ui@ff0f74d components/atoms/StatusPill.tsx
+
+     A short label pill. Geometry is the source pill (rounded-full, min-h-6,
+     px-2.5, 13px medium) and every variant is a tint: the tone at 10% behind
+     the tone's readable -text token. Text never uses a fill token (accent or
+     status), which measures 2.8 to 4:1 as text; the -text tokens reach 4.5:1
+     on card, muted and tinted grounds (guarded by ui/status-text.test.ts).
+     A long label wraps inside the card (an unbroken URL breaks anywhere) and
+     the 12px radius keeps a one-line badge a full pill. An empty label
+     renders nothing, and a variant outside the enum falls back to the
+     default accent tint, not the outline look. Classes ride
+     `class` through twMerge so the shared shadcn badge stays untouched; the
+     node id is forwarded as id + data-ripple-node for the visual editor.
+-->
+<script lang="ts">
+  import { cn } from '../../utils.js';
+  import { Badge } from '../../components/ui/badge/index.js';
+  import { asText } from '../text-coerce';
+
+  interface Props {
+    id?: string;
+    text?: string;
+    variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning';
+    class?: string;
+  }
+
+  let { id, text = '', variant = 'default', class: className }: Props = $props();
+
+  // The source pill's geometry and rhythm, overriding the shadcn base
+  // (h-5 / rounded-4xl / px-2 / text-xs) through twMerge.
+  const pill =
+    'h-auto min-h-6 max-w-full min-w-0 gap-1.5 rounded-[12px] px-2.5 py-1 text-[13px] leading-[1.25] font-medium whitespace-normal text-left [overflow-wrap:anywhere]';
+
+  // Tint per tone. `destructive` is left out on purpose: the shadcn variant is
+  // already bg-destructive/10 + text-ripple-error-text, i.e. the same tint shape.
+  // Known gap (translation doc §7, not fixed here): destructive routes to the
+  // host's --destructive while success/warning use ripple tokens, so a
+  // rethemed host gets a red that does not match its siblings.
+  const variantMap: Record<string, string> = {
+    default: 'bg-ripple-accent/10 text-ripple-accent-text border-transparent',
+    secondary: 'bg-ripple-muted text-ripple-muted-foreground border-transparent',
+    success: 'bg-ripple-success/10 text-ripple-success-text border-transparent',
+    warning: 'bg-ripple-warning/10 text-ripple-warning-text border-transparent',
+  };
+
+  // Anything outside the enum ('primary', typos) reads as the default tint.
+  const tone = $derived(
+    Object.hasOwn(variantMap, variant) || variant === 'destructive' || variant === 'outline' ? variant : 'default'
+  );
+
+  const shadcnVariant = $derived(
+    ['default', 'secondary', 'destructive', 'outline'].includes(tone)
+      ? tone as 'default' | 'secondary' | 'destructive' | 'outline'
+      : 'outline'
+  );
+
+  const extraClass = $derived(variantMap[tone] ?? '');
+
+  // Bindings deliver numbers/booleans as readily as strings ({state.x.score}).
+  // Coerce before the emptiness check — .trim() exists only on strings, and a
+  // non-string prop must render, not crash the canvas.
+  const label = $derived(asText(text));
+</script>
+
+<!-- Empty guard: an empty badge (no text) would render as a bare bordered pill —
+     a stray-circle artifact in cards. Render nothing when there's no content. -->
+{#if label.trim()}
+  <Badge {id} data-ripple-node={id} variant={shadcnVariant} class={cn(pill, extraClass, className)}>
+    {label}
+  </Badge>
+{/if}

package/dist/widgets/display/Badge.svelte.d.ts

@@ -0,0 +1,10 @@
+import { Badge } from '../../components/ui/badge/index.js';
+interface Props {
+    id?: string;
+    text?: string;
+    variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning';
+    class?: string;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/widgets/display/Chip.svelte

@@ -0,0 +1,142 @@
+<!--
+  src/lib/widgets/display/Chip.svelte
+  origin: slev12397/beautiful-ui@ff0f74d components/atoms/Chip.tsx
+
+  A tag (registered as both `chip` and `tag`). Source geometry: rounded-md,
+  tight padding, 11/12px medium, borderless tint that carries the tone. Text
+  uses the readable -text tokens (accent and status), never a fill token.
+  Not a code token: the source's monospace identity stays with Code and Kbd.
+
+  A closable chip's X is its own small square hit area with a hover wash, so
+  it reads as "remove" and never fires the body click. A long label wraps
+  inside the card. With no children and no
+  label (after coercing numbers) the chip renders nothing, so a bad spec
+  never leaves an empty tint or a bare X. The children branch gates on
+  `children` alone; NodeRenderer passes it only when the node has kids.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import XIcon from '@lucide/svelte/icons/x';
+  import { asText } from '../text-coerce';
+
+  type Variant = 'default' | 'primary' | 'success' | 'warning' | 'destructive';
+  type Size = 'sm' | 'md';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    label?: string;
+    variant?: Variant;
+    size?: Size;
+    closable?: boolean;
+    onclose?: () => void;
+    /** Body click — wired by NodeRenderer when spec uses `on_click`. */
+    onclick?: (e: MouseEvent) => void;
+    children?: Snippet;
+    hasChildren?: boolean;
+  }
+
+  let {
+    id, class: className, style, label,
+    variant = 'default', size = 'md', closable = false, onclose, onclick,
+    children, hasChildren = false
+  }: Props = $props();
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+
+  // Bindings deliver numbers as readily as strings; `42` is a label, '' is not.
+  const text = $derived(asText(label));
+
+  // Borderless tints, per the source. The accent tint takes
+  // text-ripple-accent-text: the raw accent is a fill (3 to 4:1 as text on
+  // these tints), and --ripple-accent-foreground is the on-fill colour (white
+  // on a 10% tint). The -text token reaches 4.5:1 on every ground, at rest
+  // and under the hover wash.
+  const variantClass = $derived(
+    variant === 'primary' ? 'bg-ripple-accent/10 text-ripple-accent-text'
+    : variant === 'success' ? 'bg-ripple-success/10 text-ripple-success-text'
+    : variant === 'warning' ? 'bg-ripple-warning/10 text-ripple-warning-text'
+    : variant === 'destructive' ? 'bg-ripple-error/10 text-ripple-error-text'
+    : 'bg-ripple-muted text-ripple-muted-foreground'
+  );
+
+  const sizeClass = $derived(
+    size === 'sm' ? 'text-[11px] px-1.5 py-0.5 gap-1' : 'text-[12px] px-2 py-0.5 gap-1.5'
+  );
+  // The X sits in the right padding, so the chip keeps its outer rhythm.
+  const closeClass = $derived(
+    cn(
+      'inline-grid shrink-0 place-items-center rounded-[4px] p-0.5 opacity-70 transition-[opacity,background-color] duration-150 ease-ripple-out',
+      'hover:opacity-100 hover:bg-current/15 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ripple-ring',
+      size === 'sm' ? '-my-0.5 -mr-1' : '-my-0.5 -mr-1.5'
+    )
+  );
+  const base = 'inline-flex max-w-full min-w-0 items-center rounded-md font-medium leading-[1.25] text-left [overflow-wrap:anywhere]';
+  const show = $derived(!!children || text.trim() !== '');
+
+  const iconSize = $derived(size === 'sm' ? 10 : 12);
+</script>
+
+{#if !show}
+  <!-- No label and no children: nothing to show. -->
+{:else if onclick}
+  <button
+    type="button"
+    {id}
+    onclick={(e) => {
+      // Don't fire body click when the close X is clicked.
+      if ((e.target as HTMLElement).closest('[data-chip-close]')) return;
+      onclick?.(e);
+    }}
+    class={cn(
+      base, 'cursor-pointer transition-colors duration-150 ease-ripple-out hover:brightness-95',
+      variantClass, sizeClass, className
+    )}
+    style={styleString}
+  >
+    {#if children}
+      {@render children()}
+    {:else}
+      <span class="min-w-0">{text}</span>
+    {/if}
+    {#if closable}
+      <span
+        role="button"
+        tabindex="-1"
+        data-chip-close
+        class={closeClass}
+        aria-label={text ? `Remove ${text}` : 'Remove'}
+        onclick={(e) => { e.stopPropagation(); onclose?.(); }}
+        onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onclose?.(); } }}
+      >
+        <XIcon size={iconSize} />
+      </span>
+    {/if}
+  </button>
+{:else}
+  <span
+    {id}
+    class={cn(base, variantClass, sizeClass, className)}
+    style={styleString}
+  >
+    {#if children}
+      {@render children()}
+    {:else}
+      <span class="min-w-0">{text}</span>
+    {/if}
+    {#if closable}
+      <button
+        type="button"
+        class={closeClass}
+        aria-label={text ? `Remove ${text}` : 'Remove'}
+        onclick={() => onclose?.()}
+      >
+        <XIcon size={iconSize} />
+      </button>
+    {/if}
+  </span>
+{/if}

package/dist/widgets/display/Chip.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+type Variant = 'default' | 'primary' | 'success' | 'warning' | 'destructive';
+type Size = 'sm' | 'md';
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    label?: string;
+    variant?: Variant;
+    size?: Size;
+    closable?: boolean;
+    onclose?: () => void;
+    /** Body click — wired by NodeRenderer when spec uses `on_click`. */
+    onclick?: (e: MouseEvent) => void;
+    children?: Snippet;
+    hasChildren?: boolean;
+}
+declare const Chip: import("svelte").Component<Props, {}, "">;
+type Chip = ReturnType<typeof Chip>;
+export default Chip;

package/dist/widgets/display/Code.svelte

@@ -0,0 +1,39 @@
+<!--
+  src/lib/widgets/display/Code.svelte
+  Updated 2026-09-12: the children branch gates on `children` alone, not
+  `hasChildren && children`, so a hand-written Svelte caller that passes
+  children renders them. Gating on `hasChildren` here would drop the
+  fallback branch below; NodeRenderer now only passes `children` when the
+  spec node actually has default kids, which makes the snippet truthful.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    value?: string;
+    children?: Snippet;
+    hasChildren?: boolean;
+  }
+
+  let { id, class: className, style, value, children, hasChildren = false }: Props = $props();
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+</script>
+
+<code
+  {id}
+  class={cn('px-1 py-0.5 rounded bg-ripple-track text-[0.875em] font-mono text-foreground', className)}
+  style={styleString}
+>
+  {#if children}
+    {@render children()}
+  {:else if value}
+    {value}
+  {/if}
+</code>

package/dist/widgets/display/Code.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    value?: string;
+    children?: Snippet;
+    hasChildren?: boolean;
+}
+declare const Code: import("svelte").Component<Props, {}, "">;
+type Code = ReturnType<typeof Code>;
+export default Code;

package/dist/widgets/display/CodeBlock.svelte

@@ -0,0 +1,234 @@
+<!-- origin: slev12397/beautiful-ui@ff0f74d components/primitives/CodeBlock.tsx
+
+     A code panel: a ringed frame on the surface, a 36px header (code glyph, an
+     optional file `title`, the `language` label, a copy button), and a body
+     that is a grid with one row per line: a line-number gutter with a 1px rule
+     down it, 12.5px mono on 1.65 leading, lines wrapping instead of scrolling.
+     ToolCall renders it for its Arguments and Result sections; display/Diff.svelte
+     is the same frame in diff mode.
+
+     The highlighter is a small regex pass (keywords, calls, strings, numbers)
+     rendered as spans from the template, never raw HTML, so a code string cannot
+     inject markup. A number colours only when it stands alone: digits joined to a
+     word by `-` or `.` (a path's user-1, a version tail) stay part of that word.
+     A quoted string followed by a colon is coloured as a name, so
+     JSON keys and values differ. A block with no `language` stays uncoloured:
+     ToolCall passes an empty language for a plain-string result, and prose is
+     not code. Strings, numbers and keywords use prefixed global rules that mix
+     the status hue with the surface ink, so they clear 4.5:1 in light and dark.
+
+     Optional props, all off by default (the default render must not change,
+     ToolCall depends on it): `startLine` numbers rows from a real file line (the
+     gutter then fits the numbers, display/gutter.ts), `highlight` tints an inclusive
+     [first, last] range in `highlightTone`, `title` puts a file name in the
+     header with the language beside it, and `compact` tightens the header and
+     body for an inspector or side panel.
+
+     Line numbers carry `select-none` so copying the rendered text skips them.
+     No shadow and no max width: a ripple widget sizes to its host's layout.
+-->
+<script lang="ts">
+  import { safeStyle } from '@ripple-ui/core';
+  import { cn } from '../../utils.js';
+  import CopyIcon from '@lucide/svelte/icons/copy';
+  import CheckIcon from '@lucide/svelte/icons/check';
+  import FileIcon from '@lucide/svelte/icons/code-xml';
+  import { codeBlockGutter, GUTTER_MIN } from './gutter.js';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    code?: string;
+    /** Alias for `code`. */
+    text?: string;
+    language?: string;
+    /** Hide the language label even if provided. */
+    hideLanguage?: boolean;
+    /** Hide the copy button. */
+    hideCopy?: boolean;
+    /** Number of the first line, for an excerpt of a longer file. */
+    startLine?: number;
+    /** Inclusive [first, last] line numbers to tint. */
+    highlight?: [number, number];
+    highlightTone?: 'accent' | 'added' | 'removed';
+    /** File name shown in the header, with the language label beside it. */
+    title?: string;
+    /** Tighter header, padding and leading, for an inspector or side panel. */
+    compact?: boolean;
+  }
+
+  let {
+    id, class: className, style, code, text,
+    language, hideLanguage = false, hideCopy = false,
+    startLine = 1, highlight: highlightRange, highlightTone = 'accent',
+    title, compact = false
+  }: Props = $props();
+
+  const source = $derived(code ?? text ?? '');
+  // One trailing newline is an artifact of the fence, not an empty last line.
+  // An empty block gets no rows at all rather than a numbered blank one.
+  const lines = $derived(source ? source.replace(/\n$/, '').split('\n') : []);
+
+  const gutter = $derived(codeBlockGutter(startLine, lines.length));
+  const toneClass = $derived(
+    highlightTone === 'added' ? 'bg-ripple-success/10'
+    : highlightTone === 'removed' ? 'bg-ripple-error/10'
+    : 'bg-ripple-accent/10'
+  );
+  const marked = (n: number) => !!highlightRange && n >= highlightRange[0] && n <= highlightRange[1];
+
+  let copied = $state(false);
+  let copyTimer: ReturnType<typeof setTimeout> | null = null;
+
+  async function copy() {
+    if (!source) return;
+    try {
+      await navigator.clipboard.writeText(source);
+      copied = true;
+      if (copyTimer) clearTimeout(copyTimer);
+      copyTimer = setTimeout(() => (copied = false), 1500);
+    } catch (e) {
+      console.warn('[ripple/code-block] clipboard write failed:', e);
+    }
+  }
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+
+  const showLanguage = $derived(!!language && !hideLanguage);
+  const showHeader = $derived(showLanguage || !!title || !hideCopy);
+
+  /* The source's highlighter, ported. Keywords, function calls, strings and
+     numbers — deliberately light; this is colour, not a parser. */
+  const KEYWORDS = new Set([
+    'import', 'from', 'export', 'default', 'async', 'function', 'const', 'let',
+    'var', 'await', 'return', 'if', 'else', 'for', 'while', 'new', 'throw',
+    'try', 'catch', 'null', 'true', 'false', 'undefined'
+  ]);
+
+  // A number stands alone: not touching a word char, nor joined to one by `-` or `.`
+  // (prakash-1, v0.4.18, 2026-10-07 are words). ponytail: unspaced subtraction (`i-1`)
+  // reads as a word too; a per-language rule is the upgrade if that matters.
+  const TOKEN =
+    /("(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`[^`]*`|(?<![\w$]|[\w$][-.])\d+(?:\.\d+)*(?![\w$]|[-.][\w$])|\b(?:import|from|export|default|async|function|const|let|var|await|return|if|else|for|while|new|throw|try|catch|null|true|false|undefined)\b|[A-Za-z_$][\w$]*(?=\s*\())/g;
+
+  const NAME = 'text-ripple-surface-foreground font-medium';
+
+  function tokenClass(tok: string, rest: string): string {
+    const quoted = /^["'`]/.test(tok);
+    // A quoted string followed by a colon is a key, not a value. The source only
+    // ever renders TypeScript so it never hit this; ToolCall passes JSON, where
+    // without it every key and value lands on the same colour.
+    if (quoted && /^\s*:/.test(rest)) return NAME;
+    if (quoted || /^\d/.test(tok)) return 'text-ripple-warning-text ripple-code-literal';
+    if (KEYWORDS.has(tok)) return 'text-ripple-accent ripple-code-keyword';
+    return NAME;
+  }
+
+  function highlight(line: string): { text: string; cls: string }[] {
+    // No language means the caller did not say this is code, and ToolCall passes
+    // exactly that for a plain-string result. Tokenizing prose paints `for`,
+    // `if`, `return` and every number as syntax, so an unlabelled block stays
+    // uncoloured.
+    if (!language) return [{ text: line, cls: '' }];
+    const out: { text: string; cls: string }[] = [];
+    let last = 0;
+    for (const m of line.matchAll(TOKEN)) {
+      const idx = m.index ?? 0;
+      const tok = m[0];
+      if (idx > last) out.push({ text: line.slice(last, idx), cls: '' });
+      out.push({ text: tok, cls: tokenClass(tok, line.slice(idx + tok.length)) });
+      last = idx + tok.length;
+    }
+    if (last < line.length) out.push({ text: line.slice(last), cls: '' });
+    return out;
+  }
+</script>
+
+<div
+  {id}
+  class={cn(
+    'relative group overflow-hidden rounded-ripple bg-ripple-surface ring-1 ring-ripple-border',
+    className
+  )}
+  style={styleString}
+>
+  {#if showHeader}
+    <div
+      class={compact
+        ? 'flex h-8 items-center gap-2 border-b border-ripple-border px-3 text-[12px]'
+        : 'flex h-9 items-center gap-2 border-b border-ripple-border px-4 text-[12.5px]'}
+    >
+      {#if title || showLanguage}
+        <span class="inline-flex min-w-0 items-center gap-[7px]">
+          <FileIcon size={15} class="shrink-0 text-ripple-muted-foreground" aria-hidden="true" />
+          <span class="truncate font-mono leading-none text-ripple-surface-foreground">{title || language}</span>
+          {#if title && showLanguage}
+            <span class="shrink-0 font-mono text-[11px] leading-none text-ripple-muted-foreground">{language}</span>
+          {/if}
+        </span>
+      {/if}
+      {#if !hideCopy}
+        <button
+          type="button"
+          onclick={copy}
+          class={cn(
+            '-mr-1 ml-auto flex h-6 items-center gap-1 rounded-md px-1.5 text-[12px] font-medium transition-colors duration-100 ease-ripple-out hover:bg-ripple-accent/10',
+            copied
+              ? 'text-ripple-success-text'
+              : 'text-ripple-muted-foreground hover:text-ripple-surface-foreground'
+          )}
+          aria-label="Copy code"
+        >
+          {#if copied}
+            <CheckIcon size={11} />
+            <span>Copied</span>
+          {:else}
+            <CopyIcon size={11} />
+            <span>Copy</span>
+          {/if}
+        </button>
+      {/if}
+    </div>
+  {/if}
+
+  <div
+    class={compact
+      ? 'relative py-1.5 font-mono text-[12px] leading-[1.5] text-ripple-muted-foreground'
+      : 'relative py-3 font-mono text-[12.5px] leading-[1.65] text-ripple-muted-foreground'}
+  >
+    <span
+      class="pointer-events-none absolute inset-y-0 left-5 w-px bg-ripple-border"
+      style={safeStyle(gutter === GUTTER_MIN ? undefined : `left: ${gutter}px`)}
+    ></span>
+    {#each lines as line, i (i)}
+      <div
+        class={cn('grid grid-cols-[20px_minmax(0,1fr)] items-start', marked(startLine + i) && toneClass)}
+        style={safeStyle(gutter === GUTTER_MIN ? undefined : `grid-template-columns: ${gutter}px minmax(0, 1fr)`)}
+        data-highlight={marked(startLine + i) ? highlightTone : undefined}
+      >
+        <span class="select-none text-center text-[11px] text-ripple-muted-foreground">{startLine + i}</span>
+        <code class="pr-3 pl-1 break-words whitespace-pre-wrap"
+          >{#each highlight(line) as piece}<span class={piece.cls}>{piece.text}</span>{/each}</code
+        >
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  /* Readable amber: the warning hue pulled halfway toward the surface ink. See
+     the header for why. var(--ripple-*), never var(--color-*). Global and
+     prefixed rather than scoped: a scoped selector against the dynamic class
+     would stamp a hash class onto every token span, including the ones an
+     unlabelled block leaves deliberately class-free. */
+  :global(.ripple-code-literal) {
+    color: color-mix(in oklab, var(--ripple-warning) 50%, var(--ripple-surface-foreground));
+  }
+  /* Keywords: the accent pulled 30% toward the ink, enough to clear 4.5:1 in dark. */
+  :global(.ripple-code-keyword) {
+    color: color-mix(in oklab, var(--ripple-accent) 70%, var(--ripple-surface-foreground));
+  }
+</style>

package/dist/widgets/display/CodeBlock.svelte.d.ts

@@ -0,0 +1,25 @@
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    code?: string;
+    /** Alias for `code`. */
+    text?: string;
+    language?: string;
+    /** Hide the language label even if provided. */
+    hideLanguage?: boolean;
+    /** Hide the copy button. */
+    hideCopy?: boolean;
+    /** Number of the first line, for an excerpt of a longer file. */
+    startLine?: number;
+    /** Inclusive [first, last] line numbers to tint. */
+    highlight?: [number, number];
+    highlightTone?: 'accent' | 'added' | 'removed';
+    /** File name shown in the header, with the language label beside it. */
+    title?: string;
+    /** Tighter header, padding and leading, for an inspector or side panel. */
+    compact?: boolean;
+}
+declare const CodeBlock: import("svelte").Component<Props, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/widgets/display/ComparisonTable.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import { cn } from '../../utils.js';
+  import CheckIcon from '@lucide/svelte/icons/check';
+  import MinusIcon from '@lucide/svelte/icons/minus';
+  import * as Table from '../../components/ui/table/index.js';
+
+  interface Column {
+    key: string;
+    label: string;
+    /** Mark this column as the highlighted/recommended option. */
+    highlight?: boolean;
+  }
+
+  interface Row {
+    feature: string;
+    /** Each column key maps to a cell value: boolean, string, or number. */
+    [key: string]: unknown;
+  }
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    /** First column header label (the row label). Default "Feature". */
+    label?: string;
+    columns?: Column[];
+    rows?: Row[];
+  }
+
+  let {
+    id, class: className, style,
+    label = 'Feature', columns = [], rows = []
+  }: Props = $props();
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+</script>
+
+<div
+  {id}
+  class={cn('rounded-md border border-border overflow-hidden', className)}
+  style={styleString}
+>
+  <Table.Root>
+    <Table.Header>
+      <Table.Row>
+        <Table.Head>{label}</Table.Head>
+        {#each columns as c}
+          <Table.Head class={c.highlight ? 'bg-primary/5 font-semibold' : ''}>{c.label}</Table.Head>
+        {/each}
+      </Table.Row>
+    </Table.Header>
+    <Table.Body>
+      {#each rows as row}
+        <Table.Row>
+          <Table.Cell class="font-medium">{row.feature}</Table.Cell>
+          {#each columns as c}
+            {@const v = row[c.key]}
+            <Table.Cell class={c.highlight ? 'bg-primary/5' : ''}>
+              {#if v === true}
+                <CheckIcon size={16} class="text-emerald-600 dark:text-emerald-400" />
+              {:else if v === false || v === undefined || v === null}
+                <MinusIcon size={16} class="text-muted-foreground" />
+              {:else}
+                <span class="text-sm">{v}</span>
+              {/if}
+            </Table.Cell>
+          {/each}
+        </Table.Row>
+      {/each}
+    </Table.Body>
+  </Table.Root>
+</div>

package/dist/widgets/display/ComparisonTable.svelte.d.ts

@@ -0,0 +1,23 @@
+interface Column {
+    key: string;
+    label: string;
+    /** Mark this column as the highlighted/recommended option. */
+    highlight?: boolean;
+}
+interface Row {
+    feature: string;
+    /** Each column key maps to a cell value: boolean, string, or number. */
+    [key: string]: unknown;
+}
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    /** First column header label (the row label). Default "Feature". */
+    label?: string;
+    columns?: Column[];
+    rows?: Row[];
+}
+declare const ComparisonTable: import("svelte").Component<Props, {}, "">;
+type ComparisonTable = ReturnType<typeof ComparisonTable>;
+export default ComparisonTable;