@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/widgets/display/Mention.svelte

@@ -0,0 +1,139 @@
+<!-- src/lib/widgets/display/Mention.svelte
+     An @handle pill: the accent at 10% behind --ripple-accent-text (never the
+     fill token as text), so it reads as a faint wash in both themes. A linked
+     mention deepens to 15% and underlines on hover; the hover card is optional.
+     `name` is coerced and stripped of leading @, so "@dana" never shows "@@";
+     an empty name renders nothing. Only a safeUrl-approved href becomes a
+     link; anything else (javascript:, junk) renders the plain pill. The pill
+     is w-fit, so a column flex (align-items: stretch) cannot widen it into a
+     full-width band; it sizes to the handle like a Badge. -->
+<script lang="ts">
+  import { safeUrl } from '@ripple-ui/core';
+  import * as HC from '../../components/ui/hover-card/index.js';
+  import { cn } from '../../utils.js';
+  import { asText } from '../text-coerce';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    /** Username (no @ — added automatically). */
+    name: string;
+    /** Display name shown in the hover card header. */
+    displayName?: string;
+    /** Optional avatar URL. */
+    avatar?: string;
+    /** Optional role / title shown in the hover card. */
+    role?: string;
+    /** Hover-card body. */
+    bio?: string;
+    href?: string;
+    /** Disable the hover card — render plain inline pill only. */
+    plain?: boolean;
+  }
+
+  let {
+    id,
+    class: className,
+    style,
+    name,
+    displayName,
+    avatar,
+    role,
+    bio,
+    href,
+    plain = false
+  }: Props = $props();
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+
+  // `name`/`displayName` are string-typed but a binding can deliver a number —
+  // coerce before .split so initials derivation never crashes the canvas.
+  function initials(s: unknown): string {
+    return asText(s)
+      .split(/\s+/)
+      .map((w) => w[0])
+      .filter(Boolean)
+      .slice(0, 2)
+      .join('')
+      .toUpperCase();
+  }
+
+  const bare = $derived(asText(name).trim().replace(/^@+/, ''));
+  const handle = $derived(`@${bare}`);
+  const link = $derived(safeUrl(href));
+  // [overflow-wrap:anywhere] lets a very long handle break inside the card.
+  const pill =
+    'inline-flex w-fit max-w-full items-center gap-0.5 rounded-md bg-primary/10 text-ripple-accent-text font-medium px-1.5 py-0 text-[0.95em] [overflow-wrap:anywhere]';
+  const linked = 'hover:bg-primary/15 hover:underline underline-offset-2 transition-colors';
+</script>
+
+{#if !bare}
+  <!-- No name: nothing to mention. -->
+{:else if plain || (!displayName && !bio && !role && !avatar)}
+  {#if link}
+    <a
+      {id}
+      href={safeUrl(href)}
+      class={cn(pill, linked, className)}
+      style={styleString}
+    >
+      {handle}
+    </a>
+  {:else}
+    <span
+      {id}
+      class={cn(pill, className)}
+      style={styleString}
+    >
+      {handle}
+    </span>
+  {/if}
+{:else}
+  <HC.Root>
+    <HC.Trigger>
+      {#snippet child({ props: triggerProps })}
+        {#if link}
+          <a
+            {...triggerProps}
+            {id}
+            href={safeUrl(href)}
+            class={cn(pill, linked, className)}
+            style={styleString}
+          >
+            {handle}
+          </a>
+        {:else}
+          <span
+            {...triggerProps}
+            {id}
+            class={cn(pill, 'hover:bg-primary/15 transition-colors cursor-default', className)}
+            style={styleString}
+          >
+            {handle}
+          </span>
+        {/if}
+      {/snippet}
+    </HC.Trigger>
+    <HC.Content class="w-64 p-3">
+      <div class="flex items-start gap-3">
+        {#if avatar}
+          <img src={safeUrl(avatar, { kind: 'resource' })} alt={displayName ?? bare} class="h-10 w-10 rounded-full object-cover shrink-0" />
+        {:else}
+          <span class="grid place-items-center h-10 w-10 rounded-full bg-primary/15 text-ripple-accent-text text-xs font-bold shrink-0">
+            {initials(displayName ?? bare)}
+          </span>
+        {/if}
+        <div class="min-w-0 flex-1">
+          <div class="text-sm font-semibold truncate">{displayName ?? bare}</div>
+          <div class="text-xs text-muted-foreground truncate">{handle}{role ? ` · ${role}` : ''}</div>
+          {#if bio}
+            <p class="mt-1.5 text-xs">{bio}</p>
+          {/if}
+        </div>
+      </div>
+    </HC.Content>
+  </HC.Root>
+{/if}

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

@@ -0,0 +1,21 @@
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    /** Username (no @ — added automatically). */
+    name: string;
+    /** Display name shown in the hover card header. */
+    displayName?: string;
+    /** Optional avatar URL. */
+    avatar?: string;
+    /** Optional role / title shown in the hover card. */
+    role?: string;
+    /** Hover-card body. */
+    bio?: string;
+    href?: string;
+    /** Disable the hover card — render plain inline pill only. */
+    plain?: boolean;
+}
+declare const Mention: import("svelte").Component<Props, {}, "">;
+type Mention = ReturnType<typeof Mention>;
+export default Mention;

package/dist/widgets/display/Metric.svelte

@@ -0,0 +1,106 @@
+<!--
+  Metric.svelte: a labelled value with an optional trend pill and description.
+  Variants: default (label, value, trend, description stacked), compact (value
+  and trend with the label at the right) and horizontal (label left, value
+  right). Every variant forwards the node id (id + data-ripple-node).
+  As a tile (a direct child of grid or dashboard, which make tiles containers)
+  every variant stacks label first, top-aligned, with the one tile value size
+  (title-3, stepping down in a narrow tile) that stat tiles share, so a sheet of
+  tiles sets every number in one style.
+  A 7-figure number steps its font down with the tile and, under 100px, swaps
+  to the compact form ('12.8M'). The value is never clipped.
+-->
+<script lang="ts">
+  import { cn } from '../../utils.js';
+  import { asText } from '../text-coerce';
+  import { num } from '../data-kit/format.js';
+  import Delta from '../data-kit/Delta.svelte';
+
+  interface Props {
+    id?: string;
+    label: string;
+    value: string | number;
+    trend?: string;
+    description?: string;
+    /** Layout direction */
+    variant?: 'default' | 'compact' | 'horizontal';
+    class?: string;
+  }
+
+  let {
+    id, label, value, trend, description,
+    variant = 'default', class: className
+  }: Props = $props();
+
+  // A numeric binding has no .startsWith, so coerce before the sign check.
+  const trendText = $derived(asText(trend));
+  const dir = $derived(
+    trendText.startsWith('+') ? 'up' as const
+    : trendText.startsWith('-') || trendText.startsWith('−') ? 'down' as const
+    : 'neutral' as const
+  );
+  // Numbers get thousands separators; strings ("$48.2k", "1h 12m") are the model's own format.
+  const shown = $derived(typeof value === 'number' ? num(value) : value);
+  const compact = $derived.by(() => {
+    if (typeof value !== 'number') return '';
+    const c = num(value, { compact: true });
+    return c !== shown ? c : '';
+  });
+</script>
+
+{#snippet val(cls: string)}
+  <span class={cn(cls, 'm-fit font-semibold tabular-nums', compact && 'm-full')}>{shown}</span>
+  {#if compact}<span class={cn(cls, 'm-fit m-compact font-semibold tabular-nums')}>{compact}</span>{/if}
+  {#if trend}<Delta text={trendText} {dir} />{/if}
+{/snippet}
+
+{#if variant === 'horizontal'}
+  <div {id} data-ripple-node={id} data-ripple-tile data-variant="horizontal" class={cn('m-root flex items-center justify-between gap-4', className)}>
+    <span class="m-label text-sm text-muted-foreground">{label}</span>
+    <div class="m-row flex min-w-0 items-center gap-2">{@render val('text-body')}</div>
+  </div>
+{:else if variant === 'compact'}
+  <div {id} data-ripple-node={id} data-ripple-tile data-variant="compact" class={cn('m-root flex items-baseline gap-2', className)}>
+    <div class="m-row flex min-w-0 items-baseline gap-2">{@render val('text-title-3')}</div>
+    <span class="m-label ml-auto text-xs text-muted-foreground">{label}</span>
+  </div>
+{:else}
+  <div {id} data-ripple-node={id} data-ripple-tile data-variant="default" class={cn('m-root flex min-w-0 flex-col gap-1', className)}>
+    <span class="m-label text-xs font-medium text-muted-foreground">{label}</span>
+    <div class="m-row flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">{@render val('text-title-2')}</div>
+    {#if description}<span class="text-xs text-muted-foreground">{description}</span>{/if}
+  </div>
+{/if}
+
+<style>
+  .m-compact { display: none; }
+  /* As a tile: label first, top-aligned, one value size from the tile's box. */
+  :global(:is(.rdash, .rgrid)) > .m-root {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 4px;
+    min-width: 0;
+  }
+  :global(:is(.rdash, .rgrid)) > .m-root > .m-label {
+    order: -1;
+    margin-left: 0;
+    font-size: var(--text-callout);
+    line-height: var(--lh-callout);
+    font-weight: 500;
+  }
+  :global(:is(.rdash, .rgrid)) > .m-root > .m-row {
+    flex-wrap: wrap;
+    align-items: center;
+    row-gap: 4px;
+    max-width: 100%;
+  }
+  :global(:is(.rdash, .rgrid)) > .m-root .m-fit {
+    font-size: clamp(var(--text-body), 22cqi, var(--text-title-3));
+    line-height: 1.25;
+  }
+  @container (max-width: 99px) {
+    .m-full { display: none; }
+    .m-compact { display: inline; }
+  }
+</style>

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

@@ -0,0 +1,13 @@
+interface Props {
+    id?: string;
+    label: string;
+    value: string | number;
+    trend?: string;
+    description?: string;
+    /** Layout direction */
+    variant?: 'default' | 'compact' | 'horizontal';
+    class?: string;
+}
+declare const Metric: import("svelte").Component<Props, {}, "">;
+type Metric = ReturnType<typeof Metric>;
+export default Metric;

package/dist/widgets/display/Progress.svelte

@@ -0,0 +1,72 @@
+<!-- src/lib/widgets/display/Progress.svelte
+     Horizontal progress bar. The shadcn <Progress> wrapper forwards only
+     value/max/class, so a display:contents element (no layout box) carries
+     id + data-ripple-node for editor selection. With `label`, a row above the
+     bar shows the label left and the percent right in tabular figures; without
+     it the bar lays out exactly as a bare bar. -->
+<script lang="ts">
+  import { cn } from '../../utils.js';
+  import { Progress } from '../../components/ui/progress/index.js';
+
+  interface Props {
+    id?: string;
+    value?: number;
+    max?: number;
+    /** Bar color override */
+    color?: string;
+    /** Height variant */
+    variant?: 'default' | 'thin' | 'thick';
+    /** Optional label row above the bar (label left, percent right). */
+    label?: string;
+    class?: string;
+    style?: Record<string, string>;
+  }
+
+  let {
+    id, value = 0, max = 100, color, variant = 'default', label,
+    class: className, style
+  }: Props = $props();
+
+  const variantClass = $derived({
+    'default': '',
+    'thin': 'h-0.5',
+    'thick': 'h-2',
+  }[variant]);
+
+  const percent = $derived(
+    max > 0 && Number.isFinite(value) ? Math.round(Math.min(100, Math.max(0, (value / max) * 100))) : 0
+  );
+
+  const styleString = $derived.by(() => {
+    const s: string[] = [];
+    if (color) s.push(`--progress-color:${color}`);
+    if (style) s.push(...Object.entries(style).map(([k, v]) => `${k}:${v}`));
+    return s.length > 0 ? s.join(';') : undefined;
+  });
+</script>
+
+{#snippet bar()}
+  <Progress
+    {value}
+    {max}
+    class={cn(variantClass, color ? '[&_[data-slot=progress-indicator]]:bg-[var(--progress-color)]' : '', className)}
+    style={styleString}
+  />
+{/snippet}
+
+<!-- display:contents wrapper generates no layout box; it exists only to carry
+     the node id for editor selection. A labelled bar gets one block box so the
+     label row and the bar stay together inside a row layout. -->
+<div {id} data-ripple-node={id} style="display: contents">
+  {#if label}
+    <div class="w-full min-w-0">
+      <div class="mb-1.5 flex items-baseline justify-between gap-3 text-sm">
+        <span class="min-w-0 truncate font-medium">{label}</span>
+        <span class="shrink-0 tabular-nums text-muted-foreground">{percent}%</span>
+      </div>
+      {@render bar()}
+    </div>
+  {:else}
+    {@render bar()}
+  {/if}
+</div>

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

@@ -0,0 +1,17 @@
+import { Progress } from '../../components/ui/progress/index.js';
+interface Props {
+    id?: string;
+    value?: number;
+    max?: number;
+    /** Bar color override */
+    color?: string;
+    /** Height variant */
+    variant?: 'default' | 'thin' | 'thick';
+    /** Optional label row above the bar (label left, percent right). */
+    label?: string;
+    class?: string;
+    style?: Record<string, string>;
+}
+declare const Progress: import("svelte").Component<Props, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/widgets/display/ProgressRing.svelte

@@ -0,0 +1,116 @@
+<!-- origin: slev12397/beautiful-ui@ff0f74d components/atoms/ProgressRing.tsx
+
+     2026-09-16 — re-skinned against the source atom, and against the copy of this
+     geometry already living in widgets/ai/TaskRows.svelte. The two now agree:
+     track on `stroke-ripple-border`, a round cap, and the dasharray arc.
+
+     What moved: track `stroke-muted` → `stroke-ripple-border`; arc
+     `stroke-primary` → `stroke-ripple-accent`; the dashoffset transition from
+     300ms `ease-out` to the source's 400ms on `ease-ripple-out`, with the
+     reduced-motion guard Segmented already uses; centre label onto
+     `text-ripple-surface-foreground`.
+
+     What did NOT move: `thickness` stays at 6. The source ring is 2px on a 28px
+     box because it is a fixed task badge; this widget defaults to 64px and its
+     stroke is a documented prop default, so changing it would restyle every
+     existing spec for no source mandate. A caller wanting the source's hairline
+     passes `thickness={2}`.
+
+     The source's `tone` enum (orange | green | red | accent) did not come across
+     — `color` already accepts any CSS colour, and a tone enum would be a new
+     prop. Default arc is accent, not the source's orange: a general-purpose
+     meter should not read as a warning. -->
+
+<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 0..max. */
+    value?: number;
+    max?: number;
+    size?: number;
+    /** Stroke width in px. */
+    thickness?: number;
+    /** Foreground color. */
+    color?: string;
+    /** Background track color. */
+    trackColor?: string;
+    /** Inner content — defaults to "{percent}%". */
+    label?: string;
+    /** Hide the centered label. */
+    hideLabel?: boolean;
+  }
+
+  let {
+    id,
+    class: className,
+    style,
+    value = 0,
+    max = 100,
+    size = 64,
+    thickness = 6,
+    color,
+    trackColor,
+    label,
+    hideLabel = false
+  }: Props = $props();
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+
+  const pct = $derived(Math.max(0, Math.min(1, value / (max || 1))));
+  const radius = $derived((size - thickness) / 2);
+  const circumference = $derived(2 * Math.PI * radius);
+  const offset = $derived(circumference * (1 - pct));
+  const center = $derived(size / 2);
+  const displayLabel = $derived(label ?? `${Math.round(pct * 100)}%`);
+</script>
+
+<div
+  {id}
+  class={cn('relative inline-grid place-items-center', className)}
+  style={safeStyle(`width:${size}px; height:${size}px; ${styleString ?? ''}`)}
+  role="meter"
+  aria-valuemin={0}
+  aria-valuemax={max}
+  aria-valuenow={value}
+>
+  <svg width={size} height={size} class="transform -rotate-90">
+    <circle
+      cx={center}
+      cy={center}
+      r={radius}
+      fill="none"
+      stroke-width={thickness}
+      class={cn(!trackColor && 'stroke-ripple-border')}
+      stroke={trackColor}
+    />
+    <circle
+      cx={center}
+      cy={center}
+      r={radius}
+      fill="none"
+      stroke-width={thickness}
+      stroke-linecap="round"
+      stroke-dasharray={circumference}
+      stroke-dashoffset={offset}
+      class={cn(
+        'transition-[stroke-dashoffset] duration-[400ms] ease-ripple-out motion-reduce:transition-none',
+        !color && 'stroke-ripple-accent'
+      )}
+      stroke={color}
+    />
+  </svg>
+  {#if !hideLabel}
+    <span
+      class="absolute inset-0 grid place-items-center text-xs font-semibold tabular-nums text-ripple-surface-foreground"
+    >
+      {displayLabel}
+    </span>
+  {/if}
+</div>

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

@@ -0,0 +1,22 @@
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    /** Current value 0..max. */
+    value?: number;
+    max?: number;
+    size?: number;
+    /** Stroke width in px. */
+    thickness?: number;
+    /** Foreground color. */
+    color?: string;
+    /** Background track color. */
+    trackColor?: string;
+    /** Inner content — defaults to "{percent}%". */
+    label?: string;
+    /** Hide the centered label. */
+    hideLabel?: boolean;
+}
+declare const ProgressRing: import("svelte").Component<Props, {}, "">;
+type ProgressRing = ReturnType<typeof ProgressRing>;
+export default ProgressRing;

package/dist/widgets/display/ProsCons.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { cn } from '../../utils.js';
+  import CheckIcon from '@lucide/svelte/icons/check';
+  import XIcon from '@lucide/svelte/icons/x';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    pros?: string[];
+    cons?: string[];
+    prosLabel?: string;
+    consLabel?: string;
+  }
+
+  let {
+    id, class: className, style,
+    pros = [], cons = [],
+    prosLabel = 'Pros', consLabel = 'Cons'
+  }: Props = $props();
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+</script>
+
+<div
+  {id}
+  class={cn('grid gap-4 md:grid-cols-2', className)}
+  style={styleString}
+>
+  <div class="rounded-md border border-border p-3">
+    <div class="mb-2 inline-flex items-center gap-1.5 text-sm font-semibold text-emerald-600 dark:text-emerald-400">
+      <CheckIcon size={14} />
+      <span>{prosLabel}</span>
+    </div>
+    <ul class="flex flex-col gap-1.5 text-sm">
+      {#each pros as p}
+        <li class="flex items-start gap-2">
+          <CheckIcon size={14} class="mt-0.5 shrink-0 text-emerald-600 dark:text-emerald-400" />
+          <span>{p}</span>
+        </li>
+      {/each}
+    </ul>
+  </div>
+  <div class="rounded-md border border-border p-3">
+    <div class="mb-2 inline-flex items-center gap-1.5 text-sm font-semibold text-rose-600 dark:text-rose-400">
+      <XIcon size={14} />
+      <span>{consLabel}</span>
+    </div>
+    <ul class="flex flex-col gap-1.5 text-sm">
+      {#each cons as c}
+        <li class="flex items-start gap-2">
+          <XIcon size={14} class="mt-0.5 shrink-0 text-rose-600 dark:text-rose-400" />
+          <span>{c}</span>
+        </li>
+      {/each}
+    </ul>
+  </div>
+</div>

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

@@ -0,0 +1,12 @@
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    pros?: string[];
+    cons?: string[];
+    prosLabel?: string;
+    consLabel?: string;
+}
+declare const ProsCons: import("svelte").Component<Props, {}, "">;
+type ProsCons = ReturnType<typeof ProsCons>;
+export default ProsCons;