@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/widgets/display/Copy.svelte

@@ -0,0 +1,88 @@
+<!-- src/lib/widgets/display/Copy.svelte
+     Copy-to-clipboard atom: the value sits in a monospace code well (one line,
+     truncated with the full text in a title) and the copy button is pinned to
+     the well's right end, so a reader sees WHAT they copy, not a lone button.
+     `label` names the button; it collapses to the icon under 360px container
+     width so the value keeps the room. -->
+<script lang="ts">
+  import { cn } from '../../utils.js';
+  import CopyIcon from '@lucide/svelte/icons/copy';
+  import CheckIcon from '@lucide/svelte/icons/check';
+
+  type Size = 'sm' | 'md';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    value: string;
+    label?: string;
+    size?: Size;
+  }
+
+  let { id, class: className, style, value, label, size = 'md' }: Props = $props();
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+
+  let copied = $state(false);
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  $effect(() => {
+    return () => {
+      if (timer) clearTimeout(timer);
+    };
+  });
+
+  async function copy() {
+    if (!value) return;
+    try {
+      await navigator.clipboard.writeText(value);
+      copied = true;
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => (copied = false), 1500);
+    } catch (e) {
+      console.warn('[ripple/copy] clipboard write failed:', e);
+    }
+  }
+
+  const sm = $derived(size === 'sm');
+  const iconSize = $derived(sm ? 12 : 14);
+</script>
+
+<div
+  {id}
+  class={cn(
+    '@container/copy flex w-full max-w-full min-w-0 items-center rounded-md border border-border bg-muted/60',
+    sm ? 'h-8 gap-1 pl-2.5 pr-1' : 'h-9 gap-2 pl-3 pr-1',
+    className
+  )}
+  style={styleString}
+>
+  <code
+    class={cn('min-w-0 flex-1 truncate font-mono text-foreground', sm ? 'text-[12px]' : 'text-[13px]')}
+    title={value}
+  >{value}</code>
+  <button
+    type="button"
+    class={cn(
+      'inline-flex shrink-0 items-center gap-1.5 rounded text-muted-foreground transition-colors',
+      'hover:bg-background hover:text-foreground active:scale-[0.97]',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60',
+      sm ? 'h-6 px-1.5 text-[11px]' : 'h-7 px-2 text-xs font-medium',
+      copied && 'text-ripple-success-text hover:text-ripple-success-text'
+    )}
+    onclick={copy}
+    aria-label={copied ? 'Copied' : (label ? `Copy ${label}` : 'Copy to clipboard')}
+  >
+    {#if copied}
+      <CheckIcon size={iconSize} />
+    {:else}
+      <CopyIcon size={iconSize} />
+    {/if}
+    {#if label}
+      <span class="hidden @[360px]/copy:inline">{copied ? 'Copied' : label}</span>
+    {/if}
+  </button>
+</div>

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

@@ -0,0 +1,12 @@
+type Size = 'sm' | 'md';
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    value: string;
+    label?: string;
+    size?: Size;
+}
+declare const Copy: import("svelte").Component<Props, {}, "">;
+type Copy = ReturnType<typeof Copy>;
+export default Copy;

package/dist/widgets/display/DefinitionList.svelte

@@ -0,0 +1,59 @@
+<!--
+  DefinitionList.svelte: term/definition pairs, inline (two columns) or
+  stacked (term above). An empty definition renders a muted 'Not set', so its
+  term never reads as an orphaned heading.
+-->
+<script lang="ts">
+  import { cn } from '../../utils.js';
+
+  interface Item {
+    term: string;
+    definition: string;
+  }
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    items?: Item[];
+    /** Layout: "stacked" (term above definition) or "inline" (term/definition in two columns). */
+    layout?: 'stacked' | 'inline';
+  }
+
+  let {
+    id, class: className, style,
+    items = [], layout = 'inline'
+  }: Props = $props();
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+</script>
+
+{#snippet def(text: string)}
+  {#if String(text ?? '').trim()}<dd>{text}</dd>{:else}<dd class="text-muted-foreground">Not set</dd>{/if}
+{/snippet}
+
+<dl
+  {id}
+  class={cn(
+    'text-sm',
+    layout === 'inline'
+      ? 'grid grid-cols-[max-content_1fr] gap-x-4 gap-y-2'
+      : 'flex flex-col gap-3',
+    className
+  )}
+  style={styleString}
+>
+  {#each items as item}
+    {#if layout === 'inline'}
+      <dt class="font-medium text-muted-foreground">{item.term}</dt>
+      {@render def(item.definition)}
+    {:else}
+      <div class="flex flex-col gap-0.5">
+        <dt class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{item.term}</dt>
+        {@render def(item.definition)}
+      </div>
+    {/if}
+  {/each}
+</dl>

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

@@ -0,0 +1,15 @@
+interface Item {
+    term: string;
+    definition: string;
+}
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    items?: Item[];
+    /** Layout: "stacked" (term above definition) or "inline" (term/definition in two columns). */
+    layout?: 'stacked' | 'inline';
+}
+declare const DefinitionList: import("svelte").Component<Props, {}, "">;
+type DefinitionList = ReturnType<typeof DefinitionList>;
+export default DefinitionList;

package/dist/widgets/display/Diff.svelte

@@ -0,0 +1,236 @@
+<!-- src/lib/widgets/display/Diff.svelte
+     origin: slev12397/beautiful-ui@ff0f74d components/primitives/CodeBlock.tsx
+
+     A text diff in CodeBlock's frame, so the two read as one component in two
+     modes: ring and ripple radius, a 36px header (code glyph, mono `title`, the
+     `+N −N` stat), a 20px gutter with a 1px rule, 12.5px mono on 1.65, lines
+     that wrap. `diff` is imported lazily; the row model lives in diff-rows.ts.
+
+     Lines mode shows one gutter column (a removed line keeps its old number,
+     everything else shows its new one), numbered from `oldStart` / `newStart`
+     (1 by default) so an excerpt shows its real file lines. A changed line gets
+     a 3px bar down its left (solid for an addition, hatched for a removal), a
+     10% row tint, and a word tint on the words a rewrite actually changed.
+     `split` pairs a removed run beside the added run that replaced it, one grid
+     row per line so the two sides stay level when a line wraps. `words` and
+     `chars` modes render inline with the same word tint.
+
+     For legibility:
+     - A `+`/`−` sign column, so add and remove never rest on colour alone.
+     - Text on a changed line is the foreground colour (muted text on a 10% tint
+       measures 4.16:1 on a white card).
+     - Gutter numbers, signs and the header stat mix the status colour 50/50
+       with the foreground, which darkens them in light themes and lightens them
+       in dark ones without a `dark:` variant.
+     - No syntax colouring: there is no `language` prop, and CodeBlock's rule is
+       that a block nobody labelled as code stays uncoloured.
+     - The gutter is 20px up to two-digit line numbers and ~7px a digit past
+       that (21px at three digits), from display/gutter.ts.
+
+     No shadow and no max width: a ripple widget sizes to its host's layout. -->
+<script lang="ts">
+  import { cn } from '../../utils.js';
+  import { asText } from '../text-coerce';
+  import FileIcon from '@lucide/svelte/icons/code-xml';
+  import { diffRows, splitRows, type DiffPart, type DiffRow } from './diff-rows.js';
+  import { gutterWidth } from './gutter.js';
+
+  type Mode = 'lines' | 'words' | 'chars';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    /** "Before" text. */
+    before?: string;
+    /** "After" text. */
+    after?: string;
+    /** Diff granularity. */
+    mode?: Mode;
+    /** Layout: 'unified' (single column) or 'split' (side-by-side). */
+    layout?: 'unified' | 'split';
+    /** Show line numbers (lines mode only). */
+    showLineNumbers?: boolean;
+    title?: string;
+    /** File line number of the first `before` line (lines mode). */
+    oldStart?: number;
+    /** File line number of the first `after` line (lines mode). */
+    newStart?: number;
+  }
+
+  let {
+    id,
+    class: className,
+    style,
+    before = '',
+    after = '',
+    mode = 'lines',
+    layout = 'unified',
+    showLineNumbers = true,
+    title,
+    oldStart = 1,
+    newStart = 1
+  }: Props = $props();
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+
+  let parts = $state<DiffPart[]>([]);
+  let rows = $state<DiffRow[]>([]);
+
+  async function compute() {
+    const mod = await import('diff');
+    // `before`/`after` are string-typed but a binding can deliver a number —
+    // coerce before handing them to the diff lib (string-only contract).
+    const a = asText(before);
+    const b = asText(after);
+    if (mode === 'words') parts = mod.diffWords(a, b);
+    else if (mode === 'chars') parts = mod.diffChars(a, b);
+    else rows = diffRows(mod.diffLines(a, b), mod.diffWordsWithSpace, oldStart, newStart);
+  }
+
+  $effect(() => {
+    void before;
+    void after;
+    void mode;
+    void oldStart;
+    void newStart;
+    compute();
+  });
+
+  const pairs = $derived(layout === 'split' ? splitRows(rows) : []);
+  const unified = $derived(layout === 'unified' || mode !== 'lines');
+  const added = $derived(rows.filter((r) => r.kind === 'added').length);
+  const removed = $derived(rows.filter((r) => r.kind === 'removed').length);
+
+  const gutter = $derived(gutterWidth(rows.reduce((n, r) => Math.max(n, r.oldNo ?? 0, r.newNo ?? 0), 0)));
+  const columns = $derived(`${showLineNumbers ? `${gutter}px ` : ''}16px minmax(0,1fr)`);
+</script>
+
+{#snippet line(row: DiffRow | undefined, no: number | undefined)}
+  {@const add = row?.kind === 'added'}
+  {@const del = row?.kind === 'removed'}
+  <div
+    class={cn(
+      'relative grid items-start',
+      add && 'bg-ripple-success/10 text-ripple-surface-foreground',
+      del && 'bg-ripple-error/10 text-ripple-surface-foreground'
+    )}
+    style:grid-template-columns={columns}
+  >
+    {#if add}
+      <span aria-hidden="true" class="absolute inset-y-0 left-0 w-[3px] bg-ripple-success"></span>
+    {:else if del}
+      <span aria-hidden="true" class="ripple-diff-hatch absolute inset-y-0 left-0 w-[3px]"></span>
+    {/if}
+    {#if showLineNumbers}
+      <span
+        class="select-none text-center text-[11px] tabular-nums"
+        class:ripple-diff-add-ink={add}
+        class:ripple-diff-del-ink={del}>{no ?? ''}</span
+      >
+    {/if}
+    <span class="select-none text-center" class:ripple-diff-add-ink={add} class:ripple-diff-del-ink={del}
+      >{add ? '+' : del ? '−' : ''}</span
+    >
+    <code class="pr-3 break-words whitespace-pre-wrap"
+      >{#each row?.pieces ?? [] as piece}<span
+          class={piece.changed
+            ? cn(
+                'rounded-[3px] -mx-px px-0.5 box-decoration-clone',
+                add ? 'bg-ripple-success/18' : 'bg-ripple-error/18'
+              )
+            : undefined}>{piece.text}</span
+        >{/each}</code
+    >
+  </div>
+{/snippet}
+
+<div
+  {id}
+  class={cn('overflow-hidden rounded-ripple bg-ripple-surface ring-1 ring-ripple-border', className)}
+  style={styleString}
+>
+  {#if title}
+    <div class="flex h-9 items-center gap-2 border-b border-ripple-border px-4 text-[12.5px]">
+      <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}</span>
+      </span>
+      {#if mode === 'lines'}
+        <span class="ml-auto inline-flex items-center gap-2 font-mono text-[12px] leading-none tabular-nums">
+          <span class="ripple-diff-add-ink">+{added}</span>
+          <span class="ripple-diff-del-ink">−{removed}</span>
+        </span>
+      {/if}
+    </div>
+  {/if}
+
+  {#if mode !== 'lines'}
+    <!-- Inline word/char diff: the source's word tint, with a strike on removals. -->
+    <div
+      class="px-4 py-3 font-mono text-[12.5px] leading-[1.65] whitespace-pre-wrap break-words text-ripple-muted-foreground"
+    >
+      {#each parts as p, i (i)}
+        {#if p.added}
+          <span
+            class="rounded-[3px] -mx-px px-0.5 box-decoration-clone bg-ripple-success/18 text-ripple-surface-foreground"
+            >{p.value}</span
+          >
+        {:else if p.removed}
+          <span
+            class="rounded-[3px] -mx-px px-0.5 box-decoration-clone bg-ripple-error/18 text-ripple-surface-foreground line-through"
+            >{p.value}</span
+          >
+        {:else}
+          <span>{p.value}</span>
+        {/if}
+      {/each}
+    </div>
+  {:else if unified}
+    <div class="relative py-3 font-mono text-[12.5px] leading-[1.65] text-ripple-muted-foreground">
+      {#if showLineNumbers}
+        <span class="pointer-events-none absolute inset-y-0 w-px bg-ripple-border" style:left="{gutter}px"></span>
+      {/if}
+      {#each rows as row, i (i)}
+        {@render line(row, row.kind === 'removed' ? row.oldNo : row.newNo)}
+      {/each}
+    </div>
+  {:else}
+    <div class="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-1/2 w-px bg-ripple-border"></span>
+      {#if showLineNumbers}
+        <span class="pointer-events-none absolute inset-y-0 w-px bg-ripple-border" style:left="{gutter}px"></span>
+        <span
+          class="pointer-events-none absolute inset-y-0 w-px bg-ripple-border"
+          style:left="calc(50% + {gutter}px)"
+        ></span>
+      {/if}
+      {#each pairs as pair, i (i)}
+        <div class="grid grid-cols-2">
+          {@render line(pair.left, pair.left?.oldNo)}
+          {@render line(pair.right, pair.right?.newNo)}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .ripple-diff-hatch {
+    background: repeating-linear-gradient(
+      45deg,
+      var(--ripple-error) 0,
+      var(--ripple-error) 1.5px,
+      transparent 1.5px,
+      transparent 3px
+    );
+  }
+  .ripple-diff-add-ink {
+    color: color-mix(in oklab, var(--ripple-success) 50%, var(--ripple-surface-foreground));
+  }
+  .ripple-diff-del-ink {
+    color: color-mix(in oklab, var(--ripple-error) 50%, var(--ripple-surface-foreground));
+  }
+</style>

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

@@ -0,0 +1,24 @@
+type Mode = 'lines' | 'words' | 'chars';
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    /** "Before" text. */
+    before?: string;
+    /** "After" text. */
+    after?: string;
+    /** Diff granularity. */
+    mode?: Mode;
+    /** Layout: 'unified' (single column) or 'split' (side-by-side). */
+    layout?: 'unified' | 'split';
+    /** Show line numbers (lines mode only). */
+    showLineNumbers?: boolean;
+    title?: string;
+    /** File line number of the first `before` line (lines mode). */
+    oldStart?: number;
+    /** File line number of the first `after` line (lines mode). */
+    newStart?: number;
+}
+declare const Diff: import("svelte").Component<Props, {}, "">;
+type Diff = ReturnType<typeof Diff>;
+export default Diff;

package/dist/widgets/display/EmptyState.svelte

@@ -0,0 +1,119 @@
+<!--
+  EmptyState.svelte — dashed-border empty placeholder with an icon, title, description.
+  Updated 2026-09-26 (feature pages canon, F1 / G2): additive props for feature
+  pages. `icon` also takes a snippet (the string names keep working), `size`
+  'sm' is the compact inline variant ('md', the default, is the full-pane one),
+  `tone` 'error' paints the icon with the error tokens, defaults it to the alert
+  glyph and sets role="alert", and an `actions` snippet renders a CTA row after
+  children. Colours moved to ripple tokens; the md layout is unchanged.
+  Updated 2026-07-08: widened the `icon` union (+columns/check-square/file-text/clock/table)
+  and their $derived mapping so the intent layouts render the real icon instead of hitting a
+  type error and falling back to the inbox glyph.
+  Updated 2026-09-12: body gate is `hasChildren || children` with an optional
+  `children?.()` call, so a hand-written Svelte caller that passes children but no
+  `hasChildren` renders them. The spec renderer's `hasChildren` path is unchanged.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import InboxIcon from '@lucide/svelte/icons/inbox';
+  import SearchXIcon from '@lucide/svelte/icons/search-x';
+  import FileXIcon from '@lucide/svelte/icons/file-x';
+  import AlertOctagonIcon from '@lucide/svelte/icons/octagon-alert';
+  import ColumnsIcon from '@lucide/svelte/icons/columns';
+  import CheckSquareIcon from '@lucide/svelte/icons/check-square';
+  import FileTextIcon from '@lucide/svelte/icons/file-text';
+  import ClockIcon from '@lucide/svelte/icons/clock';
+  import TableIcon from '@lucide/svelte/icons/table';
+
+  type IconName = 'inbox' | 'search' | 'file' | 'error' | 'columns' | 'check-square' | 'file-text' | 'clock' | 'table';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    title: string;
+    description?: string;
+    /** Lucide icon shorthand (inbox / search / file / error, plus layout icons columns / check-square / file-text / clock / table), or a snippet. */
+    icon?: IconName | Snippet;
+    /** 'md' = full-pane (default); 'sm' = compact, inline in a list or card. */
+    size?: 'sm' | 'md';
+    /** 'error' = a failed load: error-tinted icon, alert glyph by default, role="alert". */
+    tone?: 'default' | 'error';
+    /** CTA row (buttons). */
+    actions?: Snippet;
+    /** Default-slot for CTAs (e.g., a button). */
+    children?: Snippet;
+    hasChildren?: boolean;
+  }
+
+  let {
+    id, class: className, style,
+    title, description, icon, size = 'md', tone = 'default', actions, children, hasChildren = false
+  }: Props = $props();
+
+  const iconSnippet = $derived(typeof icon === 'function' ? icon : undefined);
+  const iconName = $derived<IconName>(
+    typeof icon === 'string' ? icon : tone === 'error' ? 'error' : 'inbox'
+  );
+
+  const Icon = $derived(
+    iconName === 'search' ? SearchXIcon
+      : iconName === 'file' ? FileXIcon
+      : iconName === 'error' ? AlertOctagonIcon
+      : iconName === 'columns' ? ColumnsIcon
+      : iconName === 'check-square' ? CheckSquareIcon
+      : iconName === 'file-text' ? FileTextIcon
+      : iconName === 'clock' ? ClockIcon
+      : iconName === 'table' ? TableIcon
+      : InboxIcon
+  );
+
+  const sm = $derived(size === 'sm');
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+</script>
+
+<div
+  {id}
+  data-empty-state
+  data-size={size}
+  data-tone={tone}
+  role={tone === 'error' ? 'alert' : undefined}
+  class={cn(
+    'flex flex-col items-center justify-center rounded-lg border border-dashed border-ripple-border text-center',
+    sm ? 'gap-2 p-4' : 'gap-3 p-8',
+    tone === 'error' ? 'bg-ripple-error/5' : 'bg-ripple-muted/20',
+    className
+  )}
+  style={styleString}
+>
+  <div
+    data-empty-icon
+    class={cn(
+      'flex items-center justify-center rounded-full',
+      sm ? 'size-8' : 'size-10',
+      tone === 'error' ? 'bg-ripple-error/10 text-ripple-error-text' : 'bg-ripple-muted text-ripple-muted-foreground'
+    )}
+  >
+    {#if iconSnippet}
+      {@render iconSnippet()}
+    {:else}
+      <Icon size={sm ? 16 : 20} />
+    {/if}
+  </div>
+  <div class="flex flex-col gap-1">
+    <h3 class={cn('font-semibold text-ripple-surface-foreground', sm ? 'text-[13px]' : 'text-sm')}>{title}</h3>
+    {#if description}
+      <p class={cn('max-w-sm text-ripple-muted-foreground', sm ? 'text-[12px]' : 'text-sm')}>{description}</p>
+    {/if}
+  </div>
+  {#if hasChildren || children}
+    <div class="mt-1">{@render children?.()}</div>
+  {/if}
+  {#if typeof actions === 'function'}
+    <div data-empty-actions class="mt-1 flex flex-wrap items-center justify-center gap-2">{@render actions()}</div>
+  {/if}
+</div>

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

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+type IconName = 'inbox' | 'search' | 'file' | 'error' | 'columns' | 'check-square' | 'file-text' | 'clock' | 'table';
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    title: string;
+    description?: string;
+    /** Lucide icon shorthand (inbox / search / file / error, plus layout icons columns / check-square / file-text / clock / table), or a snippet. */
+    icon?: IconName | Snippet;
+    /** 'md' = full-pane (default); 'sm' = compact, inline in a list or card. */
+    size?: 'sm' | 'md';
+    /** 'error' = a failed load: error-tinted icon, alert glyph by default, role="alert". */
+    tone?: 'default' | 'error';
+    /** CTA row (buttons). */
+    actions?: Snippet;
+    /** Default-slot for CTAs (e.g., a button). */
+    children?: Snippet;
+    hasChildren?: boolean;
+}
+declare const EmptyState: import("svelte").Component<Props, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/widgets/display/FillGrid.svelte

@@ -0,0 +1,82 @@
+<!--
+  src/lib/widgets/display/FillGrid.svelte
+  Created 2026-06-13 (feat/console-telemetry-widgets): nullframe-style heap meter.
+  A row (or matrix) of M discrete cells; the first N are "filled" per value/max,
+  the rest render as faint ghost cells. Used for the MEMORY/heap and BATTERY-style
+  segment readouts. Pure CSS — fully SSR-safe, no JS.
+-->
+<script lang="ts">
+  import { safeStyle } from '@ripple-ui/core';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    /** Current value (number of cells to fill = round(value/max * total)). */
+    value?: number;
+    /** Max value. Default 100. */
+    max?: number;
+    /** Total number of cells. Default 24. */
+    total?: number;
+    /** Number of columns. Omit for a single row. */
+    cols?: number;
+    /** Filled-cell color. Default the primary token. */
+    color?: string;
+    /** Cell height in px. Default 12. */
+    cellHeight?: number;
+    /** Gap between cells in px. Default 3. */
+    gap?: number;
+  }
+
+  let {
+    id,
+    class: className,
+    style,
+    value = 0,
+    max = 100,
+    total = 24,
+    cols,
+    color = 'var(--ripple-accent)',
+    cellHeight = 12,
+    gap = 3,
+  }: Props = $props();
+
+  const filled = $derived(
+    Math.max(0, Math.min(total, Math.round((value / (max || 1)) * total)))
+  );
+
+  const cells = $derived(
+    Array.from({ length: total }, (_, i) => ({ key: i, on: i < filled }))
+  );
+
+  const styleString = $derived(
+    [
+      cols
+        ? `grid-template-columns: repeat(${cols}, minmax(0, 1fr))`
+        : `grid-template-columns: repeat(${total}, minmax(0, 1fr))`,
+      `gap: ${gap}px`,
+      style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : '',
+    ]
+      .filter(Boolean)
+      .join(';')
+  );
+</script>
+
+<div
+  {id}
+  class={cn('grid w-full', className)}
+  style={styleString}
+  role="meter"
+  aria-valuemin={0}
+  aria-valuemax={max}
+  aria-valuenow={value}
+  aria-label="Fill meter"
+>
+  {#each cells as c (c.key)}
+    <span
+      class="rounded-[1px]"
+      style={safeStyle(`height:${cellHeight}px; background:${c.on ? color : 'var(--ripple-track)'}`)}
+    ></span>
+  {/each}
+</div>

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

@@ -0,0 +1,22 @@
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    /** Current value (number of cells to fill = round(value/max * total)). */
+    value?: number;
+    /** Max value. Default 100. */
+    max?: number;
+    /** Total number of cells. Default 24. */
+    total?: number;
+    /** Number of columns. Omit for a single row. */
+    cols?: number;
+    /** Filled-cell color. Default the primary token. */
+    color?: string;
+    /** Cell height in px. Default 12. */
+    cellHeight?: number;
+    /** Gap between cells in px. Default 3. */
+    gap?: number;
+}
+declare const FillGrid: import("svelte").Component<Props, {}, "">;
+type FillGrid = ReturnType<typeof FillGrid>;
+export default FillGrid;