@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/widgets/research/Timeline.svelte

@@ -0,0 +1,154 @@
+<!-- 2026-06-27: forward node id — bind id + data-ripple-node on root for editor selection (SP-0 id-forwarding codemod). -->
+<script lang="ts">
+  import { safeStyle } from '@ripple-ui/core';
+  import { cn } from '../../utils.js';
+  import { safeArray } from '../../utils/safe-props.js';
+
+  interface TimelineEvent {
+    /** Date or time label */
+    date: string;
+    /** Event title */
+    title: string;
+    /** Optional detail text */
+    detail?: string;
+    /** Dot color or event type */
+    type?: 'default' | 'success' | 'warning' | 'error' | 'info';
+    /** Custom dot color */
+    color?: string;
+  }
+
+  interface Props {
+    /** Spec node id, forwarded by NodeRenderer for editor selection. */
+    id?: string;
+    events: TimelineEvent[];
+    /** Max events to show before truncating */
+    maxItems?: number;
+    /** Visual density. 'compact' hides the rail, tightens spacing — use for activity streams. */
+    density?: 'comfortable' | 'compact';
+    class?: string;
+  }
+
+  let {
+    id,
+    events: rawEvents = [],
+    maxItems,
+    density = 'comfortable',
+    class: className,
+  }: Props = $props();
+
+  const events = $derived(safeArray<TimelineEvent>(rawEvents, { widget: 'timeline', key: 'events' }));
+  const visible = $derived(maxItems ? events.slice(0, maxItems) : events);
+
+  const typeColors: Record<string, string> = {
+    default: 'var(--muted-foreground)',
+    success: '#22c55e',
+    warning: '#f59e0b',
+    error: '#ef4444',
+    info: '#3b82f6',
+  };
+
+  function dotColor(ev: TimelineEvent): string {
+    if (ev.color) return ev.color;
+    return typeColors[ev.type ?? 'default'];
+  }
+</script>
+
+<div {id} data-ripple-node={id} class={cn('rtl', density === 'compact' && 'rtl--compact', className)}>
+  {#each visible as ev, i}
+    <div class="rtl-item">
+      <div class="rtl-rail">
+        <span class="rtl-dot" style={safeStyle(`background:${dotColor(ev)}`)}></span>
+        {#if i < visible.length - 1}
+          <span class="rtl-line"></span>
+        {/if}
+      </div>
+      <div class="rtl-content">
+        <span class="rtl-date">{ev.date}</span>
+        <span class="rtl-title">{ev.title}</span>
+        {#if ev.detail}
+          <p class="rtl-detail">{ev.detail}</p>
+        {/if}
+      </div>
+    </div>
+  {/each}
+  {#if maxItems && events.length > maxItems}
+    <div class="rtl-more">+{events.length - maxItems} more</div>
+  {/if}
+</div>
+
+<style>
+  .rtl {
+    display: flex;
+    flex-direction: column;
+  }
+  .rtl-item {
+    display: flex;
+    gap: 12px;
+    min-height: 0;
+  }
+  .rtl-rail {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 12px;
+    flex-shrink: 0;
+    padding-top: 4px;
+  }
+  .rtl-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    box-shadow: 0 0 0 2px var(--card);
+  }
+  .rtl-line {
+    width: 1.5px;
+    flex: 1;
+    background: var(--border);
+    min-height: 12px;
+  }
+  .rtl-content {
+    padding-bottom: 16px;
+    min-width: 0;
+  }
+  .rtl-date {
+    display: block;
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--muted-foreground);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    margin-bottom: 2px;
+    font-family: "JetBrains Mono Variable", "SF Mono", ui-monospace, monospace;
+  }
+  .rtl-title {
+    display: block;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--foreground);
+    line-height: 1.35;
+  }
+  .rtl-detail {
+    font-size: 12px;
+    color: var(--muted-foreground);
+    line-height: 1.45;
+    margin: 3px 0 0;
+  }
+  .rtl-more {
+    font-size: 11px;
+    color: var(--muted-foreground);
+    padding-left: 24px;
+    font-weight: 500;
+  }
+
+  /* Compact density — activity-stream layout. No rail, tighter rows, smaller dot. */
+  .rtl--compact .rtl-rail { padding-top: 6px; }
+  .rtl--compact .rtl-dot {
+    width: 6px;
+    height: 6px;
+    box-shadow: none;
+  }
+  .rtl--compact .rtl-line { display: none; }
+  .rtl--compact .rtl-content { padding-bottom: 4px; }
+  .rtl--compact .rtl-title { font-size: 12px; }
+</style>

package/dist/widgets/research/Timeline.svelte.d.ts

@@ -0,0 +1,25 @@
+interface TimelineEvent {
+    /** Date or time label */
+    date: string;
+    /** Event title */
+    title: string;
+    /** Optional detail text */
+    detail?: string;
+    /** Dot color or event type */
+    type?: 'default' | 'success' | 'warning' | 'error' | 'info';
+    /** Custom dot color */
+    color?: string;
+}
+interface Props {
+    /** Spec node id, forwarded by NodeRenderer for editor selection. */
+    id?: string;
+    events: TimelineEvent[];
+    /** Max events to show before truncating */
+    maxItems?: number;
+    /** Visual density. 'compact' hides the rail, tightens spacing — use for activity streams. */
+    density?: 'comfortable' | 'compact';
+    class?: string;
+}
+declare const Timeline: import("svelte").Component<Props, {}, "">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

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

@@ -0,0 +1,13 @@
+export { default as SourceCard } from './SourceCard.svelte';
+export { default as Citation } from './Citation.svelte';
+export { default as SourcesBar } from './SourcesBar.svelte';
+export { default as DiscoverCard } from './DiscoverCard.svelte';
+export { default as FollowUp } from './FollowUp.svelte';
+export { default as CompanyHeader } from './CompanyHeader.svelte';
+export { default as Ticker } from './Ticker.svelte';
+export { default as KvTable } from './KvTable.svelte';
+export { default as Timeline } from './Timeline.svelte';
+export { default as Callout } from './Callout.svelte';
+export { default as NewsCard } from './NewsCard.svelte';
+export { default as AnalystBar } from './AnalystBar.svelte';
+export { default as RangeBar } from './RangeBar.svelte';

package/dist/widgets/research/index.js

@@ -0,0 +1,13 @@
+export { default as SourceCard } from './SourceCard.svelte';
+export { default as Citation } from './Citation.svelte';
+export { default as SourcesBar } from './SourcesBar.svelte';
+export { default as DiscoverCard } from './DiscoverCard.svelte';
+export { default as FollowUp } from './FollowUp.svelte';
+export { default as CompanyHeader } from './CompanyHeader.svelte';
+export { default as Ticker } from './Ticker.svelte';
+export { default as KvTable } from './KvTable.svelte';
+export { default as Timeline } from './Timeline.svelte';
+export { default as Callout } from './Callout.svelte';
+export { default as NewsCard } from './NewsCard.svelte';
+export { default as AnalystBar } from './AnalystBar.svelte';
+export { default as RangeBar } from './RangeBar.svelte';

package/dist/widgets/research/sources.d.ts

@@ -0,0 +1,37 @@
+export interface SourceView {
+    /** Display name: plain text, or the hostname when the name is itself a URL. */
+    name: string;
+    /** Full text for the `title` tooltip. */
+    title: string;
+    /** Absolute http(s) URL, only when the source is linkable. */
+    href?: string;
+    /** Hostname with a leading www. stripped, when linkable. */
+    host?: string;
+    /** Model-supplied favicon (a string; the template still runs it through safeUrl). */
+    favicon?: string;
+    /** Model-supplied colour, used as the mark's tint hue. */
+    color?: string;
+    /** First grapheme for the letter mark. */
+    initial: string;
+}
+export interface SourcesModel {
+    items: SourceView[];
+    displayCount: number;
+    label: string;
+    /** Count the bar claims but does not list ("and 43 more not listed"). */
+    unlisted: number;
+    /** True when there is a usable `count` but no listable entry. */
+    countOnly: boolean;
+}
+/** An absolute http(s) URL from a model-written url, else undefined. */
+export declare function linkable(v: unknown): string | undefined;
+/** Hostname of an absolute URL with a leading www. stripped. */
+export declare function hostOf(href: string): string;
+/** First readable grapheme: a letter, digit or emoji, never a lone quote or bracket. */
+export declare function initialOf(name: string): string;
+/** Everything the bar shows, from raw props. Never throws. */
+export declare function sourcesModel(sources: unknown, count?: unknown, label?: unknown): SourcesModel;
+/** Accessible name of the summary: "12 sources: A, B, C and 9 more". */
+export declare function summaryName(m: SourcesModel, shown?: number): string;
+/** Copy and share text: one numbered line per listed source, "1. Name, url". */
+export declare function copyText(items: readonly SourceView[]): string;

package/dist/widgets/research/sources.js

@@ -0,0 +1,141 @@
+// research/sources.ts: the data half of sources-bar. Model output is messy
+// (numbers and objects as names, bare strings as entries, schemeless or
+// `javascript:` URLs, a count that disagrees with the list), so every rule
+// for turning `sources` / `count` / `label` into what the bar shows lives
+// here as pure functions that never throw. The component only lays it out.
+//
+// Rules worth knowing before you change one:
+// - A source links only when its URL is absolute http(s) after normalisation.
+//   A schemeless URL whose first segment has a dot gets https:// prefixed;
+//   anything else (a relative path, `javascript:`, `mailto:`) stays plain.
+// - Duplicates are kept: two rows with the same name are two citations.
+// - displayCount is max(valid entries, count); a smaller, negative or
+//   non-numeric count is ignored, never printed raw.
+import { safeUrl } from '@ripple-ui/core';
+import { finite, plain } from '../data-kit/format.js';
+const SCHEME = /^[a-z][a-z0-9+.-]*:/i;
+const str = (v) => {
+    if (typeof v !== 'string')
+        return undefined;
+    const s = v.trim();
+    return s === '' ? undefined : s;
+};
+/** An absolute http(s) URL from a model-written url, else undefined. */
+export function linkable(v) {
+    let s = str(v);
+    if (!s || /\s/.test(s))
+        return undefined;
+    if (!SCHEME.test(s)) {
+        const first = s.split(/[/?#]/, 1)[0];
+        if (!first.includes('.') || s.startsWith('/') || s.startsWith('.'))
+            return undefined;
+        s = `https://${s}`;
+    }
+    const safe = safeUrl(s, { kind: 'link' });
+    if (!safe)
+        return undefined;
+    try {
+        const u = new URL(safe);
+        return (u.protocol === 'http:' || u.protocol === 'https:') && u.hostname ? safe : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+/** Hostname of an absolute URL with a leading www. stripped. */
+export function hostOf(href) {
+    try {
+        return new URL(href).hostname.replace(/^www\./i, '');
+    }
+    catch {
+        return href;
+    }
+}
+function graphemes(s) {
+    const Seg = Intl.Segmenter;
+    if (Seg)
+        return Array.from(new Seg(undefined, { granularity: 'grapheme' }).segment(s), (g) => g.segment);
+    return Array.from(s);
+}
+const READABLE = /[\p{L}\p{N}\p{Extended_Pictographic}]/u;
+/** First readable grapheme: a letter, digit or emoji, never a lone quote or bracket. */
+export function initialOf(name) {
+    const gs = graphemes(name.trim());
+    const g = gs.find((x) => READABLE.test(x)) ?? gs[0] ?? '';
+    return g.toUpperCase();
+}
+/** A colour string safe to drop into one inline declaration. */
+function colorOf(v) {
+    const s = str(v);
+    if (!s || !/^[#\w\s(),.%/+-]+$/.test(s) || /url\(|expression\(/i.test(s))
+        return undefined;
+    // Inside color-mix() with var() an unknown colour would void the whole fill,
+    // so where the browser can tell, an unknown one falls back to the name tint.
+    return typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && !CSS.supports('color', s) ? undefined : s;
+}
+function nameOf(v) {
+    if (typeof v === 'number')
+        return Number.isFinite(v) ? String(v) : undefined;
+    if (typeof v !== 'string')
+        return undefined;
+    const s = plain(v);
+    return s === '' ? undefined : s;
+}
+function toView(entry) {
+    const e = typeof entry === 'string' || typeof entry === 'number'
+        ? { name: entry }
+        : entry && typeof entry === 'object' && !Array.isArray(entry)
+            ? Object.fromEntries(Object.entries(entry))
+            : {};
+    const href = linkable(e.url);
+    let name = nameOf(e.name);
+    let title = name ?? '';
+    if (name && /^(https?:\/\/|www\.)/i.test(name)) {
+        const asUrl = linkable(name);
+        if (asUrl)
+            name = hostOf(asUrl);
+    }
+    if (!name && href) {
+        name = hostOf(href);
+        title = href;
+    }
+    if (!name)
+        return undefined;
+    return {
+        name,
+        title: title || name,
+        href,
+        host: href ? hostOf(href) : undefined,
+        favicon: str(e.favicon),
+        color: colorOf(e.color),
+        initial: initialOf(name)
+    };
+}
+/** Everything the bar shows, from raw props. Never throws. */
+export function sourcesModel(sources, count, label) {
+    const items = (Array.isArray(sources) ? sources : [])
+        .map(toView)
+        .filter((s) => !!s);
+    const c = finite(count);
+    const claimed = c !== undefined && c > 0 ? Math.floor(c) : 0;
+    const displayCount = Math.max(items.length, claimed);
+    const custom = typeof label === 'string' ? label.trim() : '';
+    return {
+        items,
+        displayCount,
+        label: custom || (displayCount === 1 ? 'source' : 'sources'),
+        unlisted: displayCount - items.length,
+        countOnly: items.length === 0 && displayCount > 0
+    };
+}
+/** Accessible name of the summary: "12 sources: A, B, C and 9 more". */
+export function summaryName(m, shown = 3) {
+    const head = m.items.slice(0, shown).map((s) => s.name);
+    const rest = m.displayCount - head.length;
+    const list = head.join(', ') + (rest > 0 ? ` and ${rest} more` : '');
+    return `${m.displayCount} ${m.label}${list ? `: ${list}` : ''}`;
+}
+/** Copy and share text: one numbered line per listed source, "1. Name, url". */
+export function copyText(items) {
+    return items.map((s, i) => `${i + 1}. ${s.name}${s.href ? `, ${s.href}` : ''}`).join('\n');
+}

package/dist/widgets/text-coerce.d.ts

@@ -0,0 +1 @@
+export { asText } from '@ripple-ui/core';

package/dist/widgets/text-coerce.js

@@ -0,0 +1,7 @@
+// text-coerce.ts — re-export of asText, which lives in @ripple-ui/core.
+//
+// Created 2026-09-17 (ripple #119 merge of main): the implementation moved to
+// packages/core/src/core/text-coerce.ts because the engine now calls it and
+// core cannot import from the renderer. This file keeps every widget's
+// `$lib/widgets/text-coerce` import working, with one source of truth.
+export { asText } from '@ripple-ui/core';

package/dist/widgets/validate-catalog-bound.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @file widgets/validate-catalog-bound.ts
+ * @description `validateCatalog` and `specIssues` bound to the Svelte widget
+ * registry.
+ *
+ * The engine's versions take the catalog as a parameter so that
+ * @ripple-ui/core does not depend on a renderer's widget registry. This
+ * module supplies the missing half for the Svelte renderer: callers pass no
+ * catalog and are checked against the built-in widget catalog.
+ *
+ * `getWidgetTypes()` is read at CALL time, not at import time, so widgets
+ * registered later via `registerWidget` are still counted.
+ */
+import { type SpecIssue, type UnknownNode, type ValidateCatalogOptions, type UINode, type UISpec } from '@ripple-ui/core';
+export type { SpecIssue, UnknownNode, ValidateCatalogOptions };
+/**
+ * Walk a spec and report every node whose `type` is not renderable by this
+ * renderer. Identical signature and behaviour to the pre-split function.
+ */
+export declare function validateCatalog(spec: UISpec | UINode | null | undefined, opts?: ValidateCatalogOptions): UnknownNode[];
+/**
+ * Schema and catalog problems in a spec, one model-actionable message each,
+ * checked against this renderer's widget catalog. Pair with
+ * `formatSpecIssues` to feed them back to the model.
+ */
+export declare function specIssues(spec: unknown, opts?: ValidateCatalogOptions): SpecIssue[];

package/dist/widgets/validate-catalog-bound.js

@@ -0,0 +1,36 @@
+/**
+ * @file widgets/validate-catalog-bound.ts
+ * @description `validateCatalog` and `specIssues` bound to the Svelte widget
+ * registry.
+ *
+ * The engine's versions take the catalog as a parameter so that
+ * @ripple-ui/core does not depend on a renderer's widget registry. This
+ * module supplies the missing half for the Svelte renderer: callers pass no
+ * catalog and are checked against the built-in widget catalog.
+ *
+ * `getWidgetTypes()` is read at CALL time, not at import time, so widgets
+ * registered later via `registerWidget` are still counted.
+ */
+import { validateCatalog as validateCatalogCore, specIssues as specIssuesCore } from '@ripple-ui/core';
+import { getWidgetTypes } from './index.js';
+/**
+ * Walk a spec and report every node whose `type` is not renderable by this
+ * renderer. Identical signature and behaviour to the pre-split function.
+ */
+export function validateCatalog(spec, opts = {}) {
+    return validateCatalogCore(spec, {
+        ...opts,
+        widgetTypes: opts.widgetTypes ?? getWidgetTypes()
+    });
+}
+/**
+ * Schema and catalog problems in a spec, one model-actionable message each,
+ * checked against this renderer's widget catalog. Pair with
+ * `formatSpecIssues` to feed them back to the model.
+ */
+export function specIssues(spec, opts = {}) {
+    return specIssuesCore(spec, {
+        ...opts,
+        widgetTypes: opts.widgetTypes ?? getWidgetTypes()
+    });
+}

package/dist/widgets/vertical/ApiKey.svelte

@@ -0,0 +1,131 @@
+<!-- src/lib/widgets/vertical/ApiKey.svelte -->
+<script lang="ts">
+  import { cn } from '../../utils.js';
+  import { asText } from '../text-coerce';
+  import EyeIcon from '@lucide/svelte/icons/eye';
+  import EyeOffIcon from '@lucide/svelte/icons/eye-off';
+  import CopyIcon from '@lucide/svelte/icons/copy';
+  import CheckIcon from '@lucide/svelte/icons/check';
+  import RefreshIcon from '@lucide/svelte/icons/refresh-cw';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    label?: string;
+    /** The secret value. */
+    value?: string;
+    /** Hide rotate button. */
+    hideRotate?: boolean;
+    /** Hide reveal toggle. */
+    hideReveal?: boolean;
+    /** Optional description shown under the label. */
+    description?: string;
+    /** Number of trailing characters to show even when masked. */
+    revealLast?: number;
+    onrotate?: () => void;
+    oncopy?: () => void;
+  }
+
+  let {
+    id,
+    class: className,
+    style,
+    label = 'API key',
+    value = '',
+    hideRotate = false,
+    hideReveal = false,
+    description,
+    revealLast = 4,
+    onrotate,
+    oncopy
+  }: Props = $props();
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+
+  let visible = $state(false);
+  let copied = $state(false);
+
+  // `value` is string-typed but a binding can deliver a number — coerce once so
+  // .length/.slice (string-only) never crash the canvas.
+  const secret = $derived(asText(value));
+
+  const masked = $derived.by(() => {
+    if (!secret) return '';
+    if (visible) return secret;
+    if (secret.length <= revealLast) return '•'.repeat(secret.length);
+    return '•'.repeat(Math.min(secret.length - revealLast, 24)) + secret.slice(-revealLast);
+  });
+
+  async function copy() {
+    if (!secret) return;
+    try {
+      await navigator.clipboard.writeText(secret);
+    } catch {
+      // ignore — environment may not allow clipboard
+    }
+    copied = true;
+    oncopy?.();
+    setTimeout(() => (copied = false), 1200);
+  }
+</script>
+
+<div
+  {id}
+  class={cn('flex flex-col gap-1.5', className)}
+  style={styleString}
+>
+  {#if label}
+    <div class="flex items-baseline justify-between">
+      <span class="text-sm font-medium">{label}</span>
+      {#if description}
+        <span class="text-xs text-muted-foreground">{description}</span>
+      {/if}
+    </div>
+  {/if}
+
+  <div class="inline-flex items-center gap-1 rounded-md border border-input bg-background px-2 h-9 shadow-xs font-mono text-sm">
+    <span class="flex-1 min-w-0 truncate tabular-nums">{masked || '—'}</span>
+
+    {#if !hideReveal}
+      <button
+        type="button"
+        class="rounded p-1.5 hover:bg-muted transition-colors"
+        aria-label={visible ? 'Hide secret' : 'Reveal secret'}
+        onclick={() => (visible = !visible)}
+      >
+        {#if visible}
+          <EyeOffIcon size={14} />
+        {:else}
+          <EyeIcon size={14} />
+        {/if}
+      </button>
+    {/if}
+
+    <button
+      type="button"
+      class="rounded p-1.5 hover:bg-muted transition-colors"
+      aria-label="Copy secret"
+      onclick={copy}
+    >
+      {#if copied}
+        <CheckIcon size={14} class="text-emerald-500" />
+      {:else}
+        <CopyIcon size={14} />
+      {/if}
+    </button>
+
+    {#if !hideRotate}
+      <button
+        type="button"
+        class="rounded p-1.5 hover:bg-muted transition-colors"
+        aria-label="Rotate secret"
+        onclick={() => onrotate?.()}
+      >
+        <RefreshIcon size={14} />
+      </button>
+    {/if}
+  </div>
+</div>

package/dist/widgets/vertical/ApiKey.svelte.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    label?: string;
+    /** The secret value. */
+    value?: string;
+    /** Hide rotate button. */
+    hideRotate?: boolean;
+    /** Hide reveal toggle. */
+    hideReveal?: boolean;
+    /** Optional description shown under the label. */
+    description?: string;
+    /** Number of trailing characters to show even when masked. */
+    revealLast?: number;
+    onrotate?: () => void;
+    oncopy?: () => void;
+}
+declare const ApiKey: import("svelte").Component<Props, {}, "">;
+type ApiKey = ReturnType<typeof ApiKey>;
+export default ApiKey;