@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/widgets/display/Stat.svelte

@@ -0,0 +1,232 @@
+<!--
+  Stat.svelte: single metric display (label + formatted value + optional delta).
+  In a grid or dashboard tile the value takes the tile value size metric uses
+  (`size: sm` is the one smaller step) and, under 140px of tile, swaps to the
+  compact form ('$45.2K') while a two-part delta drops to its percent alone;
+  the delta pill stays on one line. Values are model output, so formatValue never paints "NaN" (non-finite
+  numbers render blank, strings pass through verbatim) and a plain number is
+  rounded for display by magnitude (0 decimals from 100, 1 from 10, else 2)
+  unless `decimals` / `precision` pins the digits. Status-coloured text uses
+  the readable text tokens (text-ripple-*-text); raw tones are fills only.
+-->
+<script lang="ts">
+  import { tv } from 'tailwind-variants';
+  import { cn } from '../../utils.js';
+  import Delta from '../data-kit/Delta.svelte';
+
+  type DirectionInput = 'up' | 'down' | 'neutral' | 'auto' | 'up-good' | 'down-good';
+  type DirectionResolved = 'up' | 'down' | 'neutral';
+  type Sentiment = 'positive' | 'negative' | 'neutral';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    label?: string;
+    value: number | string;
+    format?: 'number' | 'currency' | 'percent' | 'compact';
+    currency?: string;
+    locale?: string;
+    precision?: number;
+    /** Max fraction digits for the value and delta. Overrides the magnitude-based default. */
+    decimals?: number;
+    delta?: number;
+    deltaPercent?: number;
+    deltaFormat?: 'absolute' | 'percent' | 'both';
+    direction?: DirectionInput;
+    size?: 'sm' | 'md' | 'lg';
+    align?: 'left' | 'right';
+  }
+
+  let {
+    id,
+    class: className,
+    label,
+    value,
+    format = 'number',
+    currency = 'USD',
+    locale,
+    precision,
+    decimals,
+    delta,
+    deltaPercent,
+    deltaFormat = 'percent',
+    direction = 'auto',
+    size = 'md',
+    align = 'left',
+  }: Props = $props();
+
+  function formatValue(v: number | string, compact = false): string {
+    // Strings pass through untouched (existing behavior): a numeric string
+    // like "125000" (httpbin echoes query params as strings) renders as
+    // "125000", and a non-numeric string ("pending") renders verbatim.
+    if (typeof v === 'string') return v;
+    // Guard against undefined / null / objects — a binding resolving to a
+    // non-number (e.g. before an async source hydrates, or a missing response
+    // field). Intl.NumberFormat.format() would coerce these to NaN and paint
+    // the literal "NaN"; a widget must never do that. Render blank instead.
+    if (typeof v !== 'number' || !Number.isFinite(v)) return '';
+    const opts: Intl.NumberFormatOptions = {};
+    if (decimals !== undefined) {
+      opts.maximumFractionDigits = decimals;
+    } else if (precision !== undefined) {
+      opts.minimumFractionDigits = precision;
+      opts.maximumFractionDigits = precision;
+    } else if (format === 'number') {
+      const a = Math.abs(v);
+      opts.maximumFractionDigits = a >= 100 ? 0 : a >= 10 ? 1 : 2;
+    }
+    switch (format) {
+      case 'currency':
+        opts.style = 'currency';
+        opts.currency = currency;
+        if (precision === undefined && decimals === undefined) {
+          opts.minimumFractionDigits = 2;
+          opts.maximumFractionDigits = 2;
+        }
+        break;
+      case 'percent':
+        opts.style = 'percent';
+        if (precision === undefined && decimals === undefined) {
+          opts.maximumFractionDigits = 1;
+        }
+        break;
+      case 'compact':
+        opts.notation = 'compact';
+        break;
+    }
+    if (compact && format !== 'percent') {
+      Object.assign(opts, { notation: 'compact', minimumFractionDigits: 0, maximumFractionDigits: 1 });
+    }
+    return new Intl.NumberFormat(locale, opts).format(v);
+  }
+
+  function resolveDirection(): { dir: DirectionResolved; sentiment: Sentiment } {
+    const referenceDelta = delta ?? deltaPercent ?? 0;
+    if (direction === 'up') return { dir: 'up', sentiment: 'positive' };
+    if (direction === 'down') return { dir: 'down', sentiment: 'negative' };
+    if (direction === 'neutral') return { dir: 'neutral', sentiment: 'neutral' };
+    if (direction === 'auto') {
+      if (referenceDelta > 0) return { dir: 'up', sentiment: 'positive' };
+      if (referenceDelta < 0) return { dir: 'down', sentiment: 'negative' };
+      return { dir: 'neutral', sentiment: 'neutral' };
+    }
+    if (direction === 'up-good') {
+      if (referenceDelta > 0) return { dir: 'up', sentiment: 'positive' };
+      if (referenceDelta < 0) return { dir: 'down', sentiment: 'negative' };
+      return { dir: 'neutral', sentiment: 'neutral' };
+    }
+    // down-good: up = bad, down = good
+    if (referenceDelta > 0) return { dir: 'up', sentiment: 'negative' };
+    if (referenceDelta < 0) return { dir: 'down', sentiment: 'positive' };
+    return { dir: 'neutral', sentiment: 'neutral' };
+  }
+
+  function formatDelta(compact = false): string {
+    const absPart =
+      delta !== undefined ? `${delta > 0 ? '+' : ''}${formatValue(delta, compact)}` : '';
+    const pctPart =
+      deltaPercent !== undefined
+        ? `${deltaPercent > 0 ? '+' : ''}${deltaPercent}%`
+        : '';
+    if (deltaFormat === 'absolute') return absPart || pctPart;
+    if (deltaFormat === 'percent') return pctPart || absPart;
+    if (absPart && pctPart) return `${absPart} (${pctPart})`;
+    return absPart || pctPart;
+  }
+
+  const resolved = $derived(resolveDirection());
+  const hasDelta = $derived(delta !== undefined || deltaPercent !== undefined);
+  const displayValue = $derived(formatValue(value));
+  const displayDelta = $derived(hasDelta ? formatDelta() : '');
+  // The narrow-tile forms ('$45.2K'), shown by a container query under 140px.
+  const compactValue = $derived.by(() => {
+    // Only a long value swaps ('$45,230.00'); '1,240' still fits a narrow tile.
+    const c = displayValue.length > 7 ? formatValue(value, true) : displayValue;
+    return c !== displayValue ? c : '';
+  });
+  const compactDelta = $derived.by(() => {
+    if (!hasDelta) return '';
+    const pct = deltaPercent !== undefined ? `${deltaPercent > 0 ? '+' : ''}${deltaPercent}%` : '';
+    const c = deltaFormat === 'both' && delta !== undefined && pct ? pct
+      : displayDelta.length > 7 ? formatDelta(true) : displayDelta;
+    return c !== displayDelta ? c : '';
+  });
+
+  const root = tv({
+    base: 'flex flex-col min-w-0',
+    variants: {
+      size: {
+        sm: 'gap-[2px]',
+        md: 'gap-1',
+        lg: 'gap-1.5',
+      },
+      align: {
+        left: 'items-start text-left',
+        right: 'items-end text-right',
+      },
+    },
+    defaultVariants: { size: 'md', align: 'left' },
+  });
+
+  const labelCls = tv({
+    base: 'text-muted-foreground font-medium',
+    variants: {
+      size: { sm: 'text-[11px]', md: 'text-xs', lg: 'text-sm' },
+    },
+    defaultVariants: { size: 'md' },
+  });
+
+  const valueCls = tv({
+    base: 'font-semibold tabular-nums leading-tight',
+    variants: {
+      size: { sm: 'text-body', md: 'text-title-3', lg: 'text-title-2' },
+    },
+    defaultVariants: { size: 'md' },
+  });
+
+
+  const iconSize = $derived(size === 'sm' ? 12 : size === 'lg' ? 14 : 12);
+</script>
+
+<div
+  {id}
+  class={cn(root({ size, align }), className)}
+  data-size={size}
+  data-ripple-tile
+  data-direction={resolved.dir}
+  data-sentiment={resolved.sentiment}
+>
+  {#if label}
+    <span class={labelCls({ size })}>{label}</span>
+  {/if}
+  <div data-ripple-tile-value class="flex max-w-full min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+    <span data-slot="stat-value" class={cn(valueCls({ size }), 'stat-fit', compactValue && 'stat-full')}>{displayValue}</span>
+    {#if compactValue}
+      <span data-slot="stat-value-compact" class={cn(valueCls({ size }), 'stat-fit stat-compact')}>{compactValue}</span>
+    {/if}
+    {#if hasDelta}
+      <Delta text={displayDelta} dir={resolved.dir} sentiment={resolved.sentiment} size={iconSize} slot="stat-delta" class={compactDelta ? 'stat-full' : undefined} />
+      {#if compactDelta}
+        <Delta text={compactDelta} dir={resolved.dir} sentiment={resolved.sentiment} size={iconSize} slot="stat-delta-compact" class="stat-compact" />
+      {/if}
+    {/if}
+  </div>
+</div>
+
+<style>
+  /* Sized from the tile's own box (grid and dashboard make tiles containers):
+     md and lg take metric's tile value size, sm stays one step smaller, and
+     under 140px the compact forms replace the full ones. */
+  .stat-fit { font-size: var(--stat-fs); line-height: 1.25; }
+  [data-size='sm'] .stat-fit { --stat-fs: var(--text-body); }
+  [data-size='md'] .stat-fit { --stat-fs: var(--text-title-3); }
+  [data-size='lg'] .stat-fit { --stat-fs: var(--text-title-2); }
+  :global(:is(.rdash, .rgrid)) > [data-ripple-tile]:not([data-size='sm']) .stat-fit {
+    font-size: clamp(var(--text-body), 22cqi, var(--text-title-3));
+  }
+  [data-ripple-tile-value] > :global(.stat-compact) { display: none; }
+  @container (max-width: 139px) {
+    [data-ripple-tile-value] > :global(.stat-full) { display: none; }
+    [data-ripple-tile-value] > :global(.stat-compact) { display: inline-flex; }
+  }
+</style>

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

@@ -0,0 +1,22 @@
+type DirectionInput = 'up' | 'down' | 'neutral' | 'auto' | 'up-good' | 'down-good';
+interface Props {
+    id?: string;
+    class?: string;
+    label?: string;
+    value: number | string;
+    format?: 'number' | 'currency' | 'percent' | 'compact';
+    currency?: string;
+    locale?: string;
+    precision?: number;
+    /** Max fraction digits for the value and delta. Overrides the magnitude-based default. */
+    decimals?: number;
+    delta?: number;
+    deltaPercent?: number;
+    deltaFormat?: 'absolute' | 'percent' | 'both';
+    direction?: DirectionInput;
+    size?: 'sm' | 'md' | 'lg';
+    align?: 'left' | 'right';
+}
+declare const Stat: import("svelte").Component<Props, {}, "">;
+type Stat = ReturnType<typeof Stat>;
+export default Stat;

package/dist/widgets/display/StatusDot.svelte

@@ -0,0 +1,53 @@
+<!-- src/lib/widgets/display/StatusDot.svelte -->
+<script lang="ts">
+  import { safeStyle } from '@ripple-ui/core';
+  import { cn } from '../../utils.js';
+
+  type Variant = 'online' | 'offline' | 'busy' | 'away' | 'custom';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    variant?: Variant;
+    color?: string;
+    label?: string;
+    pulse?: boolean;
+    size?: number;
+  }
+
+  let {
+    id, class: className, style,
+    variant = 'online', color, label, pulse = false, size = 8
+  }: Props = $props();
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+
+  const dotColor = $derived(
+    variant === 'custom' ? (color ?? '#6b7280')
+    : variant === 'offline' ? '#9ca3af'
+    : variant === 'busy' ? '#ef4444'
+    : variant === 'away' ? '#f59e0b'
+    : '#10b981' // online
+  );
+</script>
+
+<span {id} class={cn('inline-flex items-center gap-1.5', className)} style={styleString}>
+  <span class="relative inline-flex" style={safeStyle(`width:${size}px;height:${size}px`)}>
+    {#if pulse}
+      <span
+        class="absolute inset-0 rounded-full opacity-60 animate-ping"
+        style={safeStyle(`background-color:${dotColor}`)}
+      ></span>
+    {/if}
+    <span
+      class="relative inline-block rounded-full"
+      style={safeStyle(`width:${size}px;height:${size}px;background-color:${dotColor}`)}
+    ></span>
+  </span>
+  {#if label}
+    <span class="text-xs text-foreground">{label}</span>
+  {/if}
+</span>

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

@@ -0,0 +1,14 @@
+type Variant = 'online' | 'offline' | 'busy' | 'away' | 'custom';
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    variant?: Variant;
+    color?: string;
+    label?: string;
+    pulse?: boolean;
+    size?: number;
+}
+declare const StatusDot: import("svelte").Component<Props, {}, "">;
+type StatusDot = ReturnType<typeof StatusDot>;
+export default StatusDot;

package/dist/widgets/display/Steps.svelte

@@ -0,0 +1,117 @@
+<!-- widgets/display/Steps.svelte — the `steps` widget: a numbered process as an ordered list,
+     vertical (pips joined by a rule) or horizontal (pips joined by a line from md up).
+     Each step may carry a `status` ('done' | 'current' | 'upcoming' | 'failed'), set per step
+     so a lifecycle can show an earlier step not done while a later one runs. The current step
+     gets aria-current="step"; done and failed pips draw a check or a cross with a spoken label
+     ("Done", "Failed"), so state is never colour alone; an explicit `number` still wins over the
+     glyph. Status styling is on --ripple-* tokens (accent fill for done, an accent ring with the
+     surface ink for current, since accent text misses 4.5:1 on dark; error for
+     failed, muted for upcoming) and its colour change honours reduced motion.
+     A step without a status renders exactly as it always has (Steps.test.ts pins the classes). -->
+<script lang="ts">
+  import { cn } from '../../utils.js';
+  import CheckIcon from '@lucide/svelte/icons/check';
+  import XIcon from '@lucide/svelte/icons/x';
+
+  type Status = 'done' | 'current' | 'upcoming' | 'failed';
+
+  interface Step {
+    title: string;
+    description?: string;
+    /** Optional explicit number; otherwise auto-incremented. */
+    number?: number | string;
+    /** Where this step stands. Omit for a plain numbered list. */
+    status?: Status;
+  }
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    steps?: Step[];
+    /** "vertical" (default) or "horizontal" pip layout. */
+    orientation?: 'vertical' | 'horizontal';
+  }
+
+  let {
+    id, class: className, style,
+    steps = [], orientation = 'vertical'
+  }: Props = $props();
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+
+  const MOTION = 'transition-colors duration-200 ease-ripple-out motion-reduce:transition-none';
+  const PIP: Record<Status, string> = {
+    done: `border-ripple-accent bg-ripple-accent text-ripple-accent-foreground ${MOTION}`,
+    current: `border-ripple-accent bg-ripple-surface text-ripple-surface-foreground ring-2 ring-ripple-accent/30 ${MOTION}`,
+    upcoming: `border-ripple-border bg-ripple-surface text-ripple-muted-foreground ${MOTION}`,
+    failed: `border-ripple-error bg-ripple-error text-ripple-error-foreground ${MOTION}`,
+  };
+  const pipClass = (base: string, s?: Status) => cn(base, s && PIP[s]);
+  const titleClass = (s?: Status) =>
+    cn('text-sm font-semibold', s === 'upcoming' && 'text-ripple-muted-foreground', s === 'failed' && 'text-ripple-error-text');
+</script>
+
+{#snippet mark(step: Step, i: number)}
+  {#if step.number == null && step.status === 'done'}
+    <CheckIcon size={14} strokeWidth={2.5} aria-hidden="true" /><span class="sr-only">Done</span>
+  {:else if step.number == null && step.status === 'failed'}
+    <XIcon size={14} strokeWidth={2.5} aria-hidden="true" /><span class="sr-only">Failed</span>
+  {:else}
+    {step.number ?? i + 1}
+  {/if}
+{/snippet}
+
+{#if orientation === 'horizontal'}
+  <ol
+    {id}
+    class={cn('flex w-full items-stretch', className)}
+    style={styleString}
+  >
+    {#each steps as step, i}
+      <li class="flex-1 flex items-start gap-3" aria-current={step.status === 'current' ? 'step' : undefined} data-status={step.status}>
+        <div class="flex flex-col items-center">
+          <div class={pipClass('flex size-7 items-center justify-center rounded-full border border-border bg-card text-sm font-semibold tabular-nums', step.status)}>
+            {@render mark(step, i)}
+          </div>
+        </div>
+        <div class="flex-1 pt-0.5">
+          <div class={titleClass(step.status)}>{step.title}</div>
+          {#if step.description}
+            <p class="text-sm text-muted-foreground mt-0.5">{step.description}</p>
+          {/if}
+        </div>
+        {#if i < steps.length - 1}
+          <div class={cn('hidden md:block border-t border-border flex-1 mt-3.5', step.status === 'done' && 'border-ripple-accent')}></div>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+{:else}
+  <ol
+    {id}
+    class={cn('flex flex-col gap-0', className)}
+    style={styleString}
+  >
+    {#each steps as step, i}
+      <li class="flex gap-3" aria-current={step.status === 'current' ? 'step' : undefined} data-status={step.status}>
+        <div class="flex flex-col items-center">
+          <div class={pipClass('flex size-7 shrink-0 items-center justify-center rounded-full border border-border bg-card text-sm font-semibold tabular-nums', step.status)}>
+            {@render mark(step, i)}
+          </div>
+          {#if i < steps.length - 1}
+            <div class={cn('w-px flex-1 bg-border mt-1 mb-1 min-h-3', step.status === 'done' && 'bg-ripple-accent')}></div>
+          {/if}
+        </div>
+        <div class="pb-4 flex-1 pt-0.5">
+          <div class={titleClass(step.status)}>{step.title}</div>
+          {#if step.description}
+            <p class="text-sm text-muted-foreground mt-1">{step.description}</p>
+          {/if}
+        </div>
+      </li>
+    {/each}
+  </ol>
+{/if}

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

@@ -0,0 +1,20 @@
+type Status = 'done' | 'current' | 'upcoming' | 'failed';
+interface Step {
+    title: string;
+    description?: string;
+    /** Optional explicit number; otherwise auto-incremented. */
+    number?: number | string;
+    /** Where this step stands. Omit for a plain numbered list. */
+    status?: Status;
+}
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    steps?: Step[];
+    /** "vertical" (default) or "horizontal" pip layout. */
+    orientation?: 'vertical' | 'horizontal';
+}
+declare const Steps: import("svelte").Component<Props, {}, "">;
+type Steps = ReturnType<typeof Steps>;
+export default Steps;

package/dist/widgets/display/StreakBars.svelte

@@ -0,0 +1,92 @@
+<!--
+  src/lib/widgets/display/StreakBars.svelte
+  Created 2026-06-13 (feat/console-telemetry-widgets): nullframe-style streak row.
+  A row of discrete segments, each colored per a values[] array (or all one color
+  for a simple streak). Drives the amber "CLEAN RUN" streak indicator. Pure CSS —
+  fully SSR-safe, no JS.
+-->
+<script lang="ts">
+  import { safeStyle } from '@ripple-ui/core';
+  import { cn } from '../../utils.js';
+
+  type Seg = number | { intensity?: number; color?: string; on?: boolean };
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    /**
+     * Either a count of segments (with `filled` controlling how many are lit),
+     * or an explicit array of per-segment values/objects.
+     */
+    values?: Seg[];
+    /** When `values` is omitted, render `count` segments. Default 14. */
+    count?: number;
+    /** When using `count`, how many leading segments are lit. Default = count. */
+    filled?: number;
+    /** Base segment color. Default the accent (amber) token. */
+    color?: string;
+    /** Segment height in px. Default 14. */
+    height?: number;
+    /** Gap in px. Default 3. */
+    gap?: number;
+  }
+
+  let {
+    id,
+    class: className,
+    style,
+    values,
+    count = 14,
+    filled,
+    color = 'var(--ripple-accent)',
+    height = 14,
+    gap = 3,
+  }: Props = $props();
+
+  type Resolved = { key: number; bg: string; opacity: number };
+
+  const segments = $derived.by<Resolved[]>(() => {
+    if (values && values.length) {
+      return values.map((v, i) => {
+        if (typeof v === 'number') {
+          const lit = v > 0;
+          return { key: i, bg: lit ? color : 'var(--ripple-track)', opacity: lit ? Math.min(1, 0.3 + v * 0.7) : 1 };
+        }
+        const on = v.on ?? (v.intensity ?? 0) > 0;
+        return {
+          key: i,
+          bg: on ? (v.color ?? color) : 'var(--ripple-track)',
+          opacity: on ? Math.min(1, 0.3 + (v.intensity ?? 1) * 0.7) : 1,
+        };
+      });
+    }
+    const lit = filled ?? count;
+    return Array.from({ length: count }, (_, i) => ({
+      key: i,
+      bg: i < lit ? color : 'var(--ripple-track)',
+      opacity: 1,
+    }));
+  });
+
+  const styleString = $derived(
+    [`gap: ${gap}px`, style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : '']
+      .filter(Boolean)
+      .join(';')
+  );
+</script>
+
+<div
+  {id}
+  class={cn('flex w-full items-center', className)}
+  style={styleString}
+  role="img"
+  aria-label="Streak"
+>
+  {#each segments as s (s.key)}
+    <span
+      class="flex-1 rounded-[1px]"
+      style={safeStyle(`height:${height}px; background:${s.bg}; opacity:${s.opacity}`)}
+    ></span>
+  {/each}
+</div>

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

@@ -0,0 +1,28 @@
+type Seg = number | {
+    intensity?: number;
+    color?: string;
+    on?: boolean;
+};
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    /**
+     * Either a count of segments (with `filled` controlling how many are lit),
+     * or an explicit array of per-segment values/objects.
+     */
+    values?: Seg[];
+    /** When `values` is omitted, render `count` segments. Default 14. */
+    count?: number;
+    /** When using `count`, how many leading segments are lit. Default = count. */
+    filled?: number;
+    /** Base segment color. Default the accent (amber) token. */
+    color?: string;
+    /** Segment height in px. Default 14. */
+    height?: number;
+    /** Gap in px. Default 3. */
+    gap?: number;
+}
+declare const StreakBars: import("svelte").Component<Props, {}, "">;
+type StreakBars = ReturnType<typeof StreakBars>;
+export default StreakBars;

package/dist/widgets/display/Text.svelte

@@ -0,0 +1,98 @@
+<!--
+  Text.svelte: a paragraph (or inline span) of body copy. Every size uses the UI
+  sans (--font-sans); monospace is for code only. Bare URLs become links that
+  route through the host's navigate action when there is one. A short value
+  does not shrink in a flex row, so it never wraps onto two lines.
+-->
+<script lang="ts">
+  import { safeUrl } from '@ripple-ui/core';
+  import { getContext } from 'svelte';
+  import { cn } from '../../utils.js';
+  import { asText } from '../text-coerce';
+  import { linkifySegments } from './linkify.js';
+  import type { EventDispatcher } from '@ripple-ui/core';
+  import type { StateManager } from '../../core/state-manager.svelte.js';
+
+  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;
+  }
+
+  let {
+    id, class: className, style, text = '', size = 'base',
+    weight = 'normal', color, inline = false
+  }: Props = $props();
+
+  // Host wiring — present when rendered inside a Ripple tree, absent for
+  // standalone widget usage. When present, URL clicks route through the
+  // `navigate` action so the host decides how to open them (in paw the host
+  // opens external URLs in the system browser). With no host, the plain
+  // `<a target="_blank">` fallback takes over.
+  const events = getContext<EventDispatcher | undefined>('ui-events');
+  const stateManager = getContext<StateManager | undefined>('ui-state');
+
+  // Bare URLs in the text become clickable links; plain text is unchanged.
+  const segments = $derived(linkifySegments(text));
+
+  function handleLinkClick(e: MouseEvent, url: string): void {
+    // Leave modified / non-primary clicks to the browser so open-in-new-tab,
+    // middle-click, and the right-click menu keep working via the `<a href>`.
+    if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+    if (!events) return; // no host — native <a target="_blank"> handles it
+    e.preventDefault();
+    void events.dispatch({ action: 'navigate', url }, { state: stateManager?.state ?? {} });
+  }
+
+  const sizeClasses: Record<string, string> = {
+    xs: 'text-xs text-muted-foreground',
+    sm: 'text-sm text-muted-foreground',
+    base: 'text-sm text-foreground',
+    lg: 'text-base text-foreground',
+    xl: 'text-lg text-foreground',
+    '2xl': 'text-xl text-foreground',
+    '3xl': 'text-2xl text-foreground',
+  };
+
+  const weightClasses: Record<string, string> = {
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+  };
+
+  const styleString = $derived.by(() => {
+    const styles: string[] = [];
+    // `color` is string-typed, but a binding can deliver a number — coerce
+    // before .startsWith (which exists only on strings) so a non-string color
+    // never crashes SSR/prerender. asText('') for null/undefined short-circuits
+    // both checks to false, matching the prior optional-chaining behavior.
+    const colorText = asText(color);
+    if (colorText.startsWith('#') || colorText.startsWith('rgb')) {
+      styles.push(`color:${colorText}`);
+    }
+    if (style) {
+      styles.push(...Object.entries(style).map(([k, v]) => `${k}:${v}`));
+    }
+    return styles.length > 0 ? styles.join(';') : undefined;
+  });
+
+  // A short value ("12 events") keeps its width in a flex row instead of being
+  // squeezed onto two lines; longer copy still wraps.
+  const short = $derived(String(text ?? '').length <= 24 ? 'shrink-0' : undefined);
+
+  const linkClass = 'text-primary underline underline-offset-2 hover:text-primary/80 break-words';
+</script>
+
+{#snippet body()}{#each segments as seg}{#if seg.url}{@const url = seg.url}<a href={safeUrl(url)} target="_blank" rel="noopener noreferrer" class={linkClass} onclick={(e) => handleLinkClick(e, url)}>{seg.text}</a>{:else}{seg.text}{/if}{/each}{/snippet}
+
+{#if inline}
+  <span {id} class={cn('m-0', short, sizeClasses[size], weightClasses[weight], className)} style={styleString}>{@render body()}</span>
+{:else}
+  <p {id} class={cn('m-0', short, sizeClasses[size], weightClasses[weight], className)} style={styleString}>{@render body()}</p>
+{/if}