@ripple-ui/svelte 0.0.0-stage → 0.8.2

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

@@ -0,0 +1,13 @@
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    text?: string;
+    size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl';
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    color?: string;
+    inline?: boolean;
+}
+declare const Text: import("svelte").Component<Props, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/widgets/display/Trend.svelte

@@ -0,0 +1,42 @@
+<!-- src/lib/widgets/display/Trend.svelte -->
+<script lang="ts">
+  import Delta from '../data-kit/Delta.svelte';
+  import { money, num } from '../data-kit/format.js';
+
+  type Format = 'percent' | 'number' | 'currency';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    value: number;
+    format?: Format;
+    currency?: string;
+    arrow?: boolean;
+    precision?: number;
+  }
+
+  let {
+    id, class: className, style,
+    value, format = 'percent', currency = 'USD',
+    arrow = true, precision = 1
+  }: Props = $props();
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+
+  const numeric = $derived(typeof value === 'number' ? value : Number(value) || 0);
+
+  const sign = $derived(numeric > 0 ? 'up' : numeric < 0 ? 'down' : 'flat');
+
+
+  // One number style: format.ts, signed, no forced decimals ('+$2,400', '0', '+12.4%').
+  const formatted = $derived(
+    format === 'currency'
+      ? money(numeric, currency, { sign: true, whole: true })
+      : `${num(numeric, { digits: precision, sign: true })}${format === 'percent' ? '%' : ''}`
+  );
+</script>
+
+<Delta text={formatted} dir={sign === 'flat' ? 'neutral' : sign} {arrow} class={className} {id} style={styleString} />

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

@@ -0,0 +1,14 @@
+type Format = 'percent' | 'number' | 'currency';
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    value: number;
+    format?: Format;
+    currency?: string;
+    arrow?: boolean;
+    precision?: number;
+}
+declare const Trend: import("svelte").Component<Props, {}, "">;
+type Trend = ReturnType<typeof Trend>;
+export default Trend;

package/dist/widgets/display/diff-rows.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @file widgets/display/diff-rows.ts
+ * @description The row model behind display/Diff.svelte, kept out of the
+ *   component so it can be tested without the lazy `import('diff')` the widget
+ *   does.
+ *
+ *   origin: slev12397/beautiful-ui@ff0f74d components/primitives/CodeBlock.tsx
+ *   (its `DiffRow`/`CodePiece` shape, which the source writes by hand; here it is
+ *   derived from the `diff` library's parts).
+ *
+ *   Three rules, each pinned in diff-rows.test.ts:
+ *   - One gutter. A removed line keeps its old number, an added or unchanged
+ *     line shows its new one, as in the source. Numbering starts at `oldStart`
+ *     and `newStart` (1 by default), so an excerpt shows its real file lines.
+ *   - A trailing newline ends the last line; it is not an empty extra line.
+ *   - Word-level pieces only on a removed line paired with the added line that
+ *     rewrote it. Pairing walks both runs in order and takes the first added
+ *     line that keeps at least half its non-space characters, so an insertion
+ *     next to a rewrite (the source's own example) does not shift the pairs.
+ *     Anything unpaired is shown whole, untinted: a line painted end to end
+ *     says less than one left plain.
+ */
+export type DiffPart = {
+    value: string;
+    added?: boolean;
+    removed?: boolean;
+};
+export type WordDiff = (before: string, after: string) => DiffPart[];
+/** A run of text within a row. `changed` marks the words that differ. */
+export type DiffPiece = {
+    text: string;
+    changed?: boolean;
+};
+export type DiffRow = {
+    kind: 'context' | 'added' | 'removed';
+    oldNo?: number;
+    newNo?: number;
+    pieces: DiffPiece[];
+};
+/** One line of the split layout. A side is absent where the other side has no partner. */
+export type SplitRow = {
+    left?: DiffRow;
+    right?: DiffRow;
+};
+/**
+ * Unified rows from a line diff. Pass `words` to get word-level pieces on
+ * rewrites, and `oldStart`/`newStart` to number from a file's own lines.
+ */
+export declare function diffRows(parts: DiffPart[], words?: WordDiff, oldStart?: number, newStart?: number): DiffRow[];
+/** Side-by-side pairing: a removed run sits beside the added run that replaced it. */
+export declare function splitRows(rows: DiffRow[]): SplitRow[];

package/dist/widgets/display/diff-rows.js

@@ -0,0 +1,107 @@
+/**
+ * @file widgets/display/diff-rows.ts
+ * @description The row model behind display/Diff.svelte, kept out of the
+ *   component so it can be tested without the lazy `import('diff')` the widget
+ *   does.
+ *
+ *   origin: slev12397/beautiful-ui@ff0f74d components/primitives/CodeBlock.tsx
+ *   (its `DiffRow`/`CodePiece` shape, which the source writes by hand; here it is
+ *   derived from the `diff` library's parts).
+ *
+ *   Three rules, each pinned in diff-rows.test.ts:
+ *   - One gutter. A removed line keeps its old number, an added or unchanged
+ *     line shows its new one, as in the source. Numbering starts at `oldStart`
+ *     and `newStart` (1 by default), so an excerpt shows its real file lines.
+ *   - A trailing newline ends the last line; it is not an empty extra line.
+ *   - Word-level pieces only on a removed line paired with the added line that
+ *     rewrote it. Pairing walks both runs in order and takes the first added
+ *     line that keeps at least half its non-space characters, so an insertion
+ *     next to a rewrite (the source's own example) does not shift the pairs.
+ *     Anything unpaired is shown whole, untinted: a line painted end to end
+ *     says less than one left plain.
+ */
+function linesOf(value) {
+    const lines = value.split('\n');
+    return lines[lines.length - 1] === '' ? lines.slice(0, -1) : lines;
+}
+function pieces(parts, side) {
+    const drop = side === 'removed' ? 'added' : 'removed';
+    return parts.filter((p) => !p[drop]).map((p) => ({ text: p.value, changed: !!p[side] }));
+}
+const solid = (s) => s.replace(/\s/g, '').length;
+/** A rewrite, not a replacement: at least half the longer line survives. */
+function isRewrite(parts, a, b) {
+    const kept = parts.reduce((n, p) => (p.added || p.removed ? n : n + solid(p.value)), 0);
+    return kept > 0 && kept * 2 >= Math.max(solid(a), solid(b));
+}
+// ponytail: pairing is O(removed × added) word diffs when nothing matches, so a
+// hunk past this size is shown whole. A proper line-similarity alignment would lift it.
+const MAX_PAIRING = 400;
+/**
+ * Unified rows from a line diff. Pass `words` to get word-level pieces on
+ * rewrites, and `oldStart`/`newStart` to number from a file's own lines.
+ */
+export function diffRows(parts, words, oldStart = 1, newStart = 1) {
+    const rows = [];
+    let oldNo = oldStart;
+    let newNo = newStart;
+    for (let i = 0; i < parts.length; i++) {
+        const part = parts[i];
+        const lines = linesOf(part.value);
+        const next = parts[i + 1];
+        if (part.removed && next?.added && words) {
+            const added = linesOf(next.value);
+            if (lines.length * added.length <= MAX_PAIRING) {
+                const removedRows = lines.map((text) => ({ kind: 'removed', oldNo: oldNo++, pieces: [{ text }] }));
+                const addedPieces = [];
+                let from = 0;
+                lines.forEach((text, j) => {
+                    for (let k = from; k < added.length; k++) {
+                        const w = words(text, added[k]);
+                        if (!isRewrite(w, text, added[k]))
+                            continue;
+                        removedRows[j].pieces = pieces(w, 'removed');
+                        addedPieces[k] = pieces(w, 'added');
+                        from = k + 1;
+                        break;
+                    }
+                });
+                rows.push(...removedRows);
+                added.forEach((text, k) => rows.push({ kind: 'added', newNo: newNo++, pieces: addedPieces[k] ?? [{ text }] }));
+                i++;
+                continue;
+            }
+        }
+        for (const text of lines) {
+            if (part.added)
+                rows.push({ kind: 'added', newNo: newNo++, pieces: [{ text }] });
+            else if (part.removed)
+                rows.push({ kind: 'removed', oldNo: oldNo++, pieces: [{ text }] });
+            else
+                rows.push({ kind: 'context', oldNo: oldNo++, newNo: newNo++, pieces: [{ text }] });
+        }
+    }
+    return rows;
+}
+/** Side-by-side pairing: a removed run sits beside the added run that replaced it. */
+export function splitRows(rows) {
+    const out = [];
+    let i = 0;
+    while (i < rows.length) {
+        if (rows[i].kind === 'context') {
+            out.push({ left: rows[i], right: rows[i] });
+            i++;
+            continue;
+        }
+        const removed = [];
+        const added = [];
+        while (rows[i]?.kind === 'removed')
+            removed.push(rows[i++]);
+        while (rows[i]?.kind === 'added')
+            added.push(rows[i++]);
+        for (let j = 0; j < Math.max(removed.length, added.length); j++) {
+            out.push({ left: removed[j], right: added[j] });
+        }
+    }
+    return out;
+}

package/dist/widgets/display/gutter.d.ts

@@ -0,0 +1,5 @@
+export declare const GUTTER_MIN = 20;
+/** Gutter width in px for line numbers up to `lastLine`. */
+export declare function gutterWidth(lastLine: number): number;
+/** CodeBlock's gutter: 20px counting from line 1, else the wider of the first and last numbers. */
+export declare function codeBlockGutter(startLine: number, lineCount: number): number;

package/dist/widgets/display/gutter.js

@@ -0,0 +1,18 @@
+// gutter.ts — the width of the line-number gutter, shared by CodeBlock, Diff and the C4 code
+// panel's size estimate (c4/semantic.ts), so the three can never size it differently.
+//
+// 20px is the skin's gutter. Labels past what it holds take ~7px a character at 11px mono; an
+// excerpt sizes to its widest label, which is the first one when it starts below zero.
+// CodeBlock counting from line 1 keeps a fixed 20px whatever its length: that is how it has always
+// rendered, and ToolCall's long JSON results depend on it.
+export const GUTTER_MIN = 20;
+/** Gutter width in px for line numbers up to `lastLine`. */
+export function gutterWidth(lastLine) {
+    return Math.max(GUTTER_MIN, String(lastLine).length * 7);
+}
+/** CodeBlock's gutter: 20px counting from line 1, else the wider of the first and last numbers. */
+export function codeBlockGutter(startLine, lineCount) {
+    if (startLine === 1)
+        return GUTTER_MIN;
+    return Math.max(gutterWidth(startLine), gutterWidth(startLine + Math.max(0, lineCount - 1)));
+}

package/dist/widgets/display/illustration-contrast.d.ts

@@ -0,0 +1,16 @@
+export type Rgba = [r: number, g: number, b: number, a: number];
+/**
+ * Parse a CSS colour. `current` is what `currentColor` resolves to (null
+ * leaves currentColor unparsed). Returns null for anything unknown.
+ */
+export declare function parseColor(input: string | null | undefined, current?: Rgba | null): Rgba | null;
+/** `top` composited over `bottom` (the result keeps `bottom`'s alpha rule: opaque if either is). */
+export declare function over(top: Rgba, bottom: Rgba): Rgba;
+/** WCAG relative luminance of an opaque colour. */
+export declare function luminance(c: Rgba): number;
+/** WCAG contrast ratio of `fg` over an opaque `bg`, 1..21. A translucent fg is composited first. */
+export declare function contrast(fg: Rgba, bg: Rgba): number;
+/** Whichever candidate reads better on `bg`. */
+export declare function pickReadable(bg: Rgba, a: Rgba, b: Rgba): Rgba;
+/** `rgb()` / `rgba()` string for an attribute. */
+export declare function toCss([r, g, b, a]: Rgba): string;

package/dist/widgets/display/illustration-contrast.js

@@ -0,0 +1,162 @@
+// widgets/display/illustration-contrast.ts: colour maths for keeping the
+// illustration widget's text readable: parse a CSS colour, WCAG relative
+// luminance and contrast, alpha compositing, and the pick between two
+// candidate ink colours. Pure, no DOM; the DOM pass lives in
+// Illustration.svelte.
+//
+// parseColor covers what models write in SVG (#rgb, #rgba, #rrggbb,
+// #rrggbbaa, rgb()/rgba(), a small named map) and what getComputedStyle hands
+// back for Ripple's tokens (rgb(), oklch(), oklab(), color(srgb ...)).
+// Anything else, `url(#..)` and `none` included, is null so the caller leaves
+// it alone. Channels are 0..1 gamma-encoded sRGB, alpha 0..1.
+const NAMED = {
+    black: '#000',
+    white: '#fff',
+    red: '#f00',
+    green: '#008000',
+    lime: '#0f0',
+    blue: '#00f',
+    navy: '#000080',
+    yellow: '#ff0',
+    orange: '#ffa500',
+    purple: '#800080',
+    gray: '#808080',
+    grey: '#808080',
+    silver: '#c0c0c0',
+    maroon: '#800000',
+    teal: '#008080',
+    olive: '#808000',
+    aqua: '#0ff',
+    cyan: '#0ff',
+    fuchsia: '#f0f',
+    magenta: '#f0f',
+    pink: '#ffc0cb',
+    brown: '#a52a2a',
+    darkblue: '#00008b',
+    darkgreen: '#006400',
+    darkred: '#8b0000',
+    darkgray: '#a9a9a9',
+    darkgrey: '#a9a9a9',
+    lightgray: '#d3d3d3',
+    lightgrey: '#d3d3d3',
+    gold: '#ffd700',
+    indigo: '#4b0082',
+    transparent: '#0000'
+};
+const clamp01 = (v) => Math.min(1, Math.max(0, v));
+const encode = (v) => (v <= 0.0031308 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - 0.055);
+const decode = (v) => (v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4);
+/** A number or percentage; `pct` is what 100% means. */
+function num(s, pct) {
+    const n = parseFloat(s);
+    if (!Number.isFinite(n))
+        return NaN;
+    return s.trim().endsWith('%') ? (n / 100) * pct : n;
+}
+/** Split `fn(a, b, c / d)` or `fn(a b c / d)` into channel strings and alpha. */
+function args(body) {
+    const [main, slash] = body.split('/');
+    const ch = main.split(/[\s,]+/).filter(Boolean);
+    let alphaStr = slash?.trim();
+    if (!alphaStr && ch.length === 4)
+        alphaStr = ch.pop() ?? '';
+    if (ch.length !== 3)
+        return null;
+    const alpha = alphaStr ? num(alphaStr, 1) : 1;
+    return Number.isFinite(alpha) ? { ch, alpha: clamp01(alpha) } : null;
+}
+function oklabToRgb(L, a, b) {
+    const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+    const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+    const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
+    return [
+        4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+        -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+        -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+    ].map((v) => encode(clamp01(v)));
+}
+/**
+ * Parse a CSS colour. `current` is what `currentColor` resolves to (null
+ * leaves currentColor unparsed). Returns null for anything unknown.
+ */
+export function parseColor(input, current = null) {
+    if (!input)
+        return null;
+    const s = input.trim().toLowerCase();
+    if (s === 'currentcolor')
+        return current;
+    if (NAMED[s])
+        return parseColor(NAMED[s]);
+    const hex = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/.exec(s);
+    if (hex) {
+        let h = hex[1];
+        if (h.length <= 4)
+            h = h.replace(/./g, '$&$&');
+        const v = (i) => parseInt(h.slice(i, i + 2), 16) / 255;
+        return [v(0), v(2), v(4), h.length === 8 ? v(6) : 1];
+    }
+    const fn = /^([a-z]+)\((.*)\)$/.exec(s);
+    if (!fn)
+        return null;
+    const [, name, body] = fn;
+    if (name === 'color') {
+        const m = /^srgb\s+(.*)$/.exec(body.trim());
+        const p = m && args(m[1]);
+        if (!p)
+            return null;
+        const c = p.ch.map((x) => num(x, 1));
+        return c.every(Number.isFinite) ? [clamp01(c[0]), clamp01(c[1]), clamp01(c[2]), p.alpha] : null;
+    }
+    const p = args(body);
+    if (!p)
+        return null;
+    if (name === 'rgb' || name === 'rgba') {
+        const c = p.ch.map((x) => num(x, 255) / 255);
+        return c.every(Number.isFinite) ? [clamp01(c[0]), clamp01(c[1]), clamp01(c[2]), p.alpha] : null;
+    }
+    if (name === 'oklab' || name === 'oklch') {
+        const L = num(p.ch[0], 1);
+        let a, b;
+        if (name === 'oklab') {
+            a = num(p.ch[1], 0.4);
+            b = num(p.ch[2], 0.4);
+        }
+        else {
+            const C = num(p.ch[1], 0.4);
+            const H = p.ch[2] === 'none' ? 0 : (parseFloat(p.ch[2]) * Math.PI) / 180;
+            a = C * Math.cos(H);
+            b = C * Math.sin(H);
+        }
+        if (![L, a, b].every(Number.isFinite))
+            return null;
+        return [...oklabToRgb(L, a, b), p.alpha];
+    }
+    return null;
+}
+/** `top` composited over `bottom` (the result keeps `bottom`'s alpha rule: opaque if either is). */
+export function over(top, bottom) {
+    const a = top[3] + bottom[3] * (1 - top[3]);
+    if (a === 0)
+        return [0, 0, 0, 0];
+    const ch = (i) => (top[i] * top[3] + bottom[i] * bottom[3] * (1 - top[3])) / a;
+    return [ch(0), ch(1), ch(2), a];
+}
+/** WCAG relative luminance of an opaque colour. */
+export function luminance(c) {
+    return 0.2126 * decode(c[0]) + 0.7152 * decode(c[1]) + 0.0722 * decode(c[2]);
+}
+/** WCAG contrast ratio of `fg` over an opaque `bg`, 1..21. A translucent fg is composited first. */
+export function contrast(fg, bg) {
+    const f = fg[3] < 1 ? over(fg, bg) : fg;
+    const [hi, lo] = [luminance(f), luminance(bg)].sort((p, q) => q - p);
+    return (hi + 0.05) / (lo + 0.05);
+}
+/** Whichever candidate reads better on `bg`. */
+export function pickReadable(bg, a, b) {
+    return contrast(a, bg) >= contrast(b, bg) ? a : b;
+}
+/** `rgb()` / `rgba()` string for an attribute. */
+export function toCss([r, g, b, a]) {
+    const c = (v) => Math.round(v * 255);
+    return a < 1 ? `rgba(${c(r)}, ${c(g)}, ${c(b)}, ${+a.toFixed(3)})` : `rgb(${c(r)}, ${c(g)}, ${c(b)})`;
+}

package/dist/widgets/display/index.d.ts

@@ -0,0 +1,39 @@
+export { default as Text } from './Text.svelte';
+export { default as Heading } from './Heading.svelte';
+export { default as Image } from './Image.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as Progress } from './Progress.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export { default as Metric } from './Metric.svelte';
+export { default as SoulStatus } from './SoulStatus.svelte';
+export { default as Stat } from './Stat.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as Markdown } from './Markdown.svelte';
+export { default as RichTextDisplay } from './RichTextDisplay.svelte';
+export { default as CodeBlock } from './CodeBlock.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as ProsCons } from './ProsCons.svelte';
+export { default as ComparisonTable } from './ComparisonTable.svelte';
+export { default as Steps } from './Steps.svelte';
+export { default as Quote } from './Quote.svelte';
+export { default as Highlight } from './Highlight.svelte';
+export { default as DefinitionList } from './DefinitionList.svelte';
+export { default as ArticleMeta } from './ArticleMeta.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default as Loading } from './Loading.svelte';
+export { default as Chip } from './Chip.svelte';
+export { default as Kbd } from './Kbd.svelte';
+export { default as StatusDot } from './StatusDot.svelte';
+export { default as Trend } from './Trend.svelte';
+export { default as Copy } from './Copy.svelte';
+export { default as Code } from './Code.svelte';
+export { default as ProgressRing } from './ProgressRing.svelte';
+export { default as Mention } from './Mention.svelte';
+export { default as LinkPreview } from './LinkPreview.svelte';
+export { default as Qr } from './Qr.svelte';
+export { default as Diff } from './Diff.svelte';
+export { default as LedClock } from './LedClock.svelte';
+export { default as GlyphGrid } from './GlyphGrid.svelte';
+export { default as FillGrid } from './FillGrid.svelte';
+export { default as StreakBars } from './StreakBars.svelte';
+export { default as Illustration } from './Illustration.svelte';

package/dist/widgets/display/index.js

@@ -0,0 +1,40 @@
+export { default as Text } from './Text.svelte';
+export { default as Heading } from './Heading.svelte';
+export { default as Image } from './Image.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as Progress } from './Progress.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export { default as Metric } from './Metric.svelte';
+export { default as SoulStatus } from './SoulStatus.svelte';
+export { default as Stat } from './Stat.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as Markdown } from './Markdown.svelte';
+export { default as RichTextDisplay } from './RichTextDisplay.svelte';
+export { default as CodeBlock } from './CodeBlock.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as ProsCons } from './ProsCons.svelte';
+export { default as ComparisonTable } from './ComparisonTable.svelte';
+export { default as Steps } from './Steps.svelte';
+export { default as Quote } from './Quote.svelte';
+export { default as Highlight } from './Highlight.svelte';
+export { default as DefinitionList } from './DefinitionList.svelte';
+export { default as ArticleMeta } from './ArticleMeta.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default as Loading } from './Loading.svelte';
+export { default as Chip } from './Chip.svelte';
+export { default as Kbd } from './Kbd.svelte';
+export { default as StatusDot } from './StatusDot.svelte';
+export { default as Trend } from './Trend.svelte';
+export { default as Copy } from './Copy.svelte';
+export { default as Code } from './Code.svelte';
+export { default as ProgressRing } from './ProgressRing.svelte';
+export { default as Mention } from './Mention.svelte';
+export { default as LinkPreview } from './LinkPreview.svelte';
+export { default as Qr } from './Qr.svelte';
+export { default as Diff } from './Diff.svelte';
+// Console telemetry pack (feat/console-telemetry-widgets, 2026-06-13)
+export { default as LedClock } from './LedClock.svelte';
+export { default as GlyphGrid } from './GlyphGrid.svelte';
+export { default as FillGrid } from './FillGrid.svelte';
+export { default as StreakBars } from './StreakBars.svelte';
+export { default as Illustration } from './Illustration.svelte';

package/dist/widgets/display/linkify.d.ts

@@ -0,0 +1,16 @@
+export interface TextSegment {
+    /** The visible text for this segment. */
+    text: string;
+    /** Present when the segment is a clickable URL. */
+    url?: string;
+}
+/**
+ * Break `input` into ordered segments. Plain runs carry `text` only; URL runs
+ * also carry `url`. A string with no URLs yields a single plain segment, so
+ * callers can render the result uniformly.
+ *
+ * Bindings routinely deliver non-strings (numbers from `{state.x.score}`,
+ * booleans, null) — coerce through asText() instead of crashing: `matchAll`
+ * exists only on strings, and a Text widget must render whatever it is handed.
+ */
+export declare function linkifySegments(rawInput: unknown): TextSegment[];

package/dist/widgets/display/linkify.js

@@ -0,0 +1,47 @@
+// linkify.ts — split a plain-text string into text + URL segments so the
+// Text widget can render bare URLs as clickable links. Kept pure (no Svelte,
+// no DOM) so the segmentation is unit-testable on its own.
+//
+// Non-string inputs are coerced through the shared asText() idiom (a binding
+// can hand the Text widget a number/boolean/null) so .matchAll never throws.
+import { asText } from '../text-coerce';
+// http/https URLs only — the schemes a `navigate` action can safely open.
+// Stops at whitespace and characters that can't appear unescaped in a URL.
+const URL_REGEX = /https?:\/\/[^\s<>"'`]+/g;
+// Trailing punctuation is almost always sentence punctuation, not part of
+// the URL ("see https://example.com."). Trimmed off and kept as plain text.
+const TRAILING_PUNCTUATION = /[.,;:!?]+$/;
+/**
+ * Break `input` into ordered segments. Plain runs carry `text` only; URL runs
+ * also carry `url`. A string with no URLs yields a single plain segment, so
+ * callers can render the result uniformly.
+ *
+ * Bindings routinely deliver non-strings (numbers from `{state.x.score}`,
+ * booleans, null) — coerce through asText() instead of crashing: `matchAll`
+ * exists only on strings, and a Text widget must render whatever it is handed.
+ */
+export function linkifySegments(rawInput) {
+    const input = asText(rawInput);
+    if (!input)
+        return [{ text: input }];
+    const segments = [];
+    let cursor = 0;
+    for (const match of input.matchAll(URL_REGEX)) {
+        const start = match.index ?? 0;
+        if (start > cursor) {
+            segments.push({ text: input.slice(cursor, start) });
+        }
+        let url = match[0];
+        const trailing = url.match(TRAILING_PUNCTUATION)?.[0] ?? '';
+        if (trailing)
+            url = url.slice(0, -trailing.length);
+        segments.push({ text: url, url });
+        if (trailing)
+            segments.push({ text: trailing });
+        cursor = start + match[0].length;
+    }
+    if (cursor < input.length) {
+        segments.push({ text: input.slice(cursor) });
+    }
+    return segments.length > 0 ? segments : [{ text: input }];
+}

package/dist/widgets/index.d.ts

@@ -0,0 +1,30 @@
+import type { Component } from 'svelte';
+import { Container, Flex, Grid, Card, GlassCard, Tabs, Dashboard, DashboardSlot, Modal, Accordion, Sheet, Separator, PageHeader, Hero, Section, Sidebar, AppShell, Breadcrumb, Split, MasterDetail, Collapsible } from './layout/index.js';
+import { Text, Heading, Image, Badge, Progress, Avatar, Metric, Stat, SoulStatus, Skeleton, Markdown, RichTextDisplay, CodeBlock, EmptyState, ProsCons, ComparisonTable, Steps, Quote, Highlight, DefinitionList, ArticleMeta, Icon, Loading, Chip, Kbd, StatusDot, Trend, Copy, Code, ProgressRing, Mention, LinkPreview, Qr, Diff, LedClock, GlyphGrid, FillGrid, StreakBars, Illustration } from './display/index.js';
+import { Button, Input, Select, Checkbox, CheckboxGroup, Switch, Textarea, Slider, RadioGroup, Rating, FilterBar, Combobox, MultiSelect, DatePicker, TimePicker, FileUpload, Form, NumberInput, OtpInput, Segmented, ColorPicker, RichText, CodeEditor, Search, LocationPicker } from './input/index.js';
+import { Table, Chart, VirtualList, Tree, Kanban, DataGrid, Sparkline, Gauge, Funnel, Heatmap, Sankey, Treemap, GanttChart, TreeTable, Calendar, Map as MapWidget, Seismograph } from './data/index.js';
+import { If, Each } from './control/index.js';
+import { Terminal, AvatarGroup, ComparisonLayout, EntityDetail, FormLayout, WizardLayout, ChecklistLayout, ReportLayout, InvoiceLayout, OrderStatus, MenuOrder, ExecDashboard, OpsDashboard, AnalyticsDashboard, PipelineDashboard, ProjectDashboard, WordGuess, AskUserQuestions, Itinerary, Booking, GrowthProjection, BillSplit, Recipe, MealPlan, IntervalWorkout, FlashcardDeck, MemoryMatch, HabitTracker, StandupBoard, FocusTimer, Notes, MusicPlayer, IsoScene, Figure, BoardGame, Agenda, WeekSchedule, WeatherForecast, PlaceResults, ProductGrid, MediaGrid } from './composite/index.js';
+import { Alert, DropdownMenu, Toast, Tooltip, Popover, HoverCard, CommandPalette, ContextMenu, NotificationCenter, ErrorState, Coachmark } from './overlay/index.js';
+import { SourceCard, Citation, SourcesBar, DiscoverCard, FollowUp, CompanyHeader, Ticker, KvTable, Timeline, Callout, NewsCard, AnalystBar, RangeBar } from './research/index.js';
+import Workflow from './Workflow.svelte';
+import { C4Diagram } from './c4/index.js';
+import { PricingTable, SettingsList, CommentThread, AuditLog, ApiKey, BulkActionBar, SavedViews, PeoplePicker, PermissionMatrix, OrgChart, InvoiceLines } from './vertical/index.js';
+import { ModelViewer, Embed, AudioPlayer, VideoPlayer } from './media/index.js';
+import { Reveal, Parallax } from './motion/index.js';
+import { Navbar, Footer, Cta, Testimonial, FeatureGrid, Newsletter, LogoCloud, Faq, MarketingHero } from './marketing/index.js';
+import { Marquee, BorderBeam, Shimmer, AnimatedBeam, Aurora, Spotlight, BentoGrid, TextEffect } from './premium/index.js';
+import { TodoList, DrawingCanvas, Timer, Flashcard } from './interactive/index.js';
+import { StreamText, ToolCall, ReasoningTrace, ApprovalGate } from './ai/index.js';
+/** Map of widget type name → Svelte component. Internal registry format. */
+export type WidgetMap = Record<string, Component<any>>;
+export type { C4DiagramData, C4Element, C4Person, C4System, C4Container, C4Component, C4Relationship, C4Kind, C4Status, C4Marker, C4Highlight, C4Reach, C4EdgeShape, C4Flow, C4FlowStep, C4Code, C4PortView, } from './c4/index.js';
+export { childrenOf, indexTree, pathTo, codeView } from './c4/index.js';
+export type { C4Tree, CodeSide, CodeView } from './c4/index.js';
+export declare function getWidget(type: string): Component<any> | undefined;
+export declare function registerWidget(type: string, component: Component<any>): void;
+export declare function unregisterWidget(type: string): void;
+export declare function hasWidget(type: string): boolean;
+export declare function getWidgetTypes(): string[];
+export declare function resetRegistry(): void;
+export { Container, Flex, Grid, Card, GlassCard, Tabs, Dashboard, DashboardSlot, Modal, Accordion, Sheet, Separator, Alert, PageHeader, Hero, Section, EmptyState, Sidebar, AppShell, Breadcrumb, Split, MasterDetail, Collapsible, DropdownMenu, ProsCons, ComparisonTable, Steps, Quote, Highlight, DefinitionList, ArticleMeta, Text, Heading, Image, Illustration, Badge, Progress, Avatar, Metric, Stat, SoulStatus, Skeleton, Markdown, RichTextDisplay, CodeBlock, Button, Input, Select, Checkbox, CheckboxGroup, Switch, Textarea, Slider, RadioGroup, Rating, FilterBar, Combobox, MultiSelect, DatePicker, TimePicker, FileUpload, Form, NumberInput, OtpInput, Segmented, ColorPicker, RichText, CodeEditor, Search, LocationPicker, Table, Chart, VirtualList, Tree, Kanban, DataGrid, Sparkline, Gauge, Funnel, Heatmap, Sankey, Treemap, GanttChart, TreeTable, Calendar, MapWidget, ProgressRing, Mention, LinkPreview, Qr, Diff, Terminal, If, Each, SourceCard, Citation, SourcesBar, DiscoverCard, FollowUp, CompanyHeader, Ticker, KvTable, Timeline, Callout, NewsCard, AnalystBar, RangeBar, Workflow, C4Diagram, Toast, Tooltip, Popover, HoverCard, CommandPalette, ContextMenu, NotificationCenter, ErrorState, Coachmark, PricingTable, SettingsList, CommentThread, AuditLog, ApiKey, BulkActionBar, SavedViews, PeoplePicker, PermissionMatrix, OrgChart, InvoiceLines, Icon, Loading, Chip, Kbd, StatusDot, Trend, Copy, Code, AvatarGroup, ComparisonLayout, EntityDetail, FormLayout, WizardLayout, ChecklistLayout, ReportLayout, InvoiceLayout, OrderStatus, MenuOrder, ExecDashboard, OpsDashboard, AnalyticsDashboard, PipelineDashboard, ProjectDashboard, Itinerary, GrowthProjection, BillSplit, ModelViewer, Embed, AudioPlayer, VideoPlayer, Reveal, Parallax, Navbar, Footer, Cta, Testimonial, FeatureGrid, Newsletter, LogoCloud, Faq, MarketingHero, Marquee, BorderBeam, Shimmer, AnimatedBeam, Aurora, Spotlight, BentoGrid, TextEffect, TodoList, DrawingCanvas, Timer, Flashcard, AskUserQuestions, Booking, Recipe, MealPlan, IntervalWorkout, FlashcardDeck, MemoryMatch, HabitTracker, StandupBoard, FocusTimer, Notes, MusicPlayer, IsoScene, Figure, BoardGame, Agenda, WeekSchedule, WeatherForecast, PlaceResults, ProductGrid, MediaGrid, WordGuess, LedClock, GlyphGrid, FillGrid, StreakBars, Seismograph, StreamText, ToolCall, ReasoningTrace, ApprovalGate };