@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/widgets/display/Qr.svelte

@@ -0,0 +1,136 @@
+<!-- src/lib/widgets/display/Qr.svelte
+     Security (review): `color`/`background` are spec-controlled and flow
+     straight into qrcode-svg, which string-concatenates them into a
+     style="fill:…" attribute with NO escaping — so a value like
+     `red" /><img src=x onerror=…>` breaks out of the attribute and injects an
+     HTML element into the {@html} sink. Two defenses: validate the colors to a
+     safe CSS-literal allowlist before they reach the generator (safeColor from
+     utils/safe-color.ts,
+     applied at BOTH the onMount and $effect call sites), and sanitizeSvg the
+     output (the HTML profile would strip <svg>, so this uses the SVG profile). -->
+<script lang="ts">
+  import { safeStyle } from '@ripple-ui/core';
+  import { onMount } from 'svelte';
+  import { cn } from '../../utils.js';
+  import { sanitizeSvg } from '../../utils/sanitize-html.js';
+  import { safeColor } from '../../utils/safe-color.js';
+
+  type ECL = 'L' | 'M' | 'Q' | 'H';
+
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    /** Payload to encode (URL, text, vCard, etc.). */
+    value: string;
+    size?: number;
+    /** Foreground (dark module) color. */
+    color?: string;
+    /** Background color. Use 'transparent' to layer the QR over a parent. */
+    background?: string;
+    /** Error correction level (more = more redundancy, larger code). */
+    ecl?: ECL;
+    /** Margin (quiet zone) in modules. */
+    padding?: number;
+    /** Optional caption shown below the code. */
+    caption?: string;
+  }
+
+  let {
+    id,
+    class: className,
+    style,
+    value,
+    size = 160,
+    color = '#000000',
+    background = '#ffffff',
+    ecl = 'M',
+    padding = 2,
+    caption
+  }: Props = $props();
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+
+  let svg = $state<string>('');
+
+  onMount(() => {
+    let cancelled = false;
+    (async () => {
+      const mod = await import('qrcode-svg');
+      if (cancelled) return;
+      const QRCode = (mod as any).default ?? mod;
+      try {
+        const qr = new QRCode({
+          content: value,
+          width: size,
+          height: size,
+          color: safeColor(color, '#000000'),
+          background: safeColor(background, '#ffffff'),
+          ecl,
+          padding,
+          join: true,
+          container: 'svg-viewbox'
+        });
+        svg = sanitizeSvg(qr.svg());
+      } catch (e) {
+        console.warn('[qr] encode failed:', e);
+        svg = '';
+      }
+    })();
+    return () => { cancelled = true; };
+  });
+
+  $effect(() => {
+    void value;
+    void size;
+    void color;
+    void background;
+    void ecl;
+    void padding;
+    if (typeof window === 'undefined') return;
+    (async () => {
+      try {
+        const mod = await import('qrcode-svg');
+        const QRCode = (mod as any).default ?? mod;
+        const qr = new QRCode({
+          content: value,
+          width: size,
+          height: size,
+          color: safeColor(color, '#000000'),
+          background: safeColor(background, '#ffffff'),
+          ecl,
+          padding,
+          join: true,
+          container: 'svg-viewbox'
+        });
+        svg = sanitizeSvg(qr.svg());
+      } catch {
+        // ignore — initial render will surface failure via onMount
+      }
+    })();
+  });
+</script>
+
+<div
+  {id}
+  class={cn('inline-flex flex-col items-center gap-1.5', className)}
+  style={styleString}
+>
+  <div
+    role="img"
+    aria-label={`QR code for ${value}`}
+    style={safeStyle(`width:${size}px; height:${size}px;`)}
+    class="rounded bg-white p-1"
+  >
+    <!-- svg is generated from validated colors (safeColor) and passed through
+         sanitizeSvg — both guards, since a sanitizer can't fix a generator fed
+         attacker text. See the security note at the top of this file. -->
+    {@html svg}
+  </div>
+  {#if caption}
+    <span class="text-xs text-muted-foreground">{caption}</span>
+  {/if}
+</div>

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

@@ -0,0 +1,22 @@
+type ECL = 'L' | 'M' | 'Q' | 'H';
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    /** Payload to encode (URL, text, vCard, etc.). */
+    value: string;
+    size?: number;
+    /** Foreground (dark module) color. */
+    color?: string;
+    /** Background color. Use 'transparent' to layer the QR over a parent. */
+    background?: string;
+    /** Error correction level (more = more redundancy, larger code). */
+    ecl?: ECL;
+    /** Margin (quiet zone) in modules. */
+    padding?: number;
+    /** Optional caption shown below the code. */
+    caption?: string;
+}
+declare const Qr: import("svelte").Component<Props, {}, "">;
+type Qr = ReturnType<typeof Qr>;
+export default Qr;

package/dist/widgets/display/Quote.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { safeUrl } from '@ripple-ui/core';
+  import { cn } from '../../utils.js';
+  import QuoteIcon from '@lucide/svelte/icons/quote';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    text: string;
+    /** Optional alias for `text`. */
+    quote?: string;
+    author?: string;
+    role?: string;
+    avatar?: string;
+    /** Hide the leading quote glyph. */
+    hideIcon?: boolean;
+  }
+
+  let {
+    id, class: className, style,
+    text, quote, author, role, avatar, hideIcon = false
+  }: Props = $props();
+
+  const body = $derived(text ?? quote ?? '');
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+</script>
+
+<figure
+  {id}
+  class={cn('flex flex-col gap-4 rounded-lg border border-border bg-card/40 p-5', className)}
+  style={styleString}
+>
+  {#if !hideIcon}
+    <QuoteIcon size={22} class="text-muted-foreground/60" />
+  {/if}
+  <blockquote class="text-base md:text-lg leading-relaxed">
+    {body}
+  </blockquote>
+  {#if author || role}
+    <figcaption class="flex items-center gap-3">
+      {#if avatar}
+        <img src={safeUrl(avatar, { kind: 'resource' })} alt={author ?? ''} class="size-9 rounded-full object-cover" />
+      {/if}
+      <div class="flex flex-col">
+        {#if author}<span class="text-sm font-semibold">{author}</span>{/if}
+        {#if role}<span class="text-xs text-muted-foreground">{role}</span>{/if}
+      </div>
+    </figcaption>
+  {/if}
+</figure>

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

@@ -0,0 +1,16 @@
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    text: string;
+    /** Optional alias for `text`. */
+    quote?: string;
+    author?: string;
+    role?: string;
+    avatar?: string;
+    /** Hide the leading quote glyph. */
+    hideIcon?: boolean;
+}
+declare const Quote: import("svelte").Component<Props, {}, "">;
+type Quote = ReturnType<typeof Quote>;
+export default Quote;

package/dist/widgets/display/RichTextDisplay.svelte

@@ -0,0 +1,73 @@
+<!--
+  @file widgets/display/RichTextDisplay.svelte
+  @description DISPLAY widget that renders a trusted rich-HTML string (e.g. the
+    structural HTML TipTap StarterKit emits) via `{@html}`, wrapped in the same
+    prose Tailwind classes Markdown.svelte uses. This is the read/render half of
+    the editor's rich-text inline edit (PIECE 1): the inline editor mounts a
+    TipTap editor ON this element to author the `html` prop, and this component
+    paints the committed result.
+
+    HTML posture: matches Markdown.svelte — the `html` is DOMPurify-sanitized
+    (HTML profile) before `{@html}`, because spec content can be LLM-authored and
+    untrusted. StarterKit's structural output (p / strong / em / lists / headings /
+    blockquote / code) survives the profile unchanged; scripts / on* handlers /
+    javascript: URIs are stripped. See utils/sanitize-html.ts.
+
+    The `{@html html}` is the SOLE child of the id-bearing div on purpose: Svelte 5
+    compiles a lone `{@html}` to the `is_controlled` path (`element.innerHTML = value`),
+    which (a) lets the inline editor clear/replace the element while TipTap is mounted
+    and (b) repaints correctly on the next `html` prop change. Do not add sibling
+    nodes inside this div or that optimization is lost.
+  @created 2026-06-30 (editor chrome PIECE 1 — TipTap rich-HTML inline editing)
+-->
+<script lang="ts">
+  import { cn } from '../../utils.js';
+  import { sanitizeHtml } from '../../utils/sanitize-html.js';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    /** Rich HTML to render (e.g. TipTap StarterKit output). Spec-controlled and
+     *  possibly LLM-authored, so it is sanitized before {@html}. */
+    html?: string;
+  }
+
+  let { id, class: className, style, html = '' }: Props = $props();
+
+  // Sanitize before {@html}. Structural TipTap/StarterKit markup survives the
+  // HTML profile; scripts / on* handlers / javascript: URIs are stripped. Still a
+  // lone {@html} expression, so Svelte's is_controlled (element.innerHTML) path —
+  // which the inline editor relies on — is preserved.
+  const safeHtml = $derived(sanitizeHtml(html));
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+</script>
+
+<div
+  {id}
+  class={cn(
+    'ripple-richtext text-sm leading-relaxed',
+    '[&_h1]:text-2xl [&_h1]:font-semibold [&_h1]:mt-3 [&_h1]:mb-2',
+    '[&_h2]:text-xl [&_h2]:font-semibold [&_h2]:mt-3 [&_h2]:mb-2',
+    '[&_h3]:text-lg [&_h3]:font-semibold [&_h3]:mt-2 [&_h3]:mb-1',
+    '[&_p]:my-2 [&_ul]:my-2 [&_ol]:my-2',
+    '[&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5',
+    '[&_li]:my-1',
+    '[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2 hover:[&_a]:opacity-80',
+    '[&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-[0.85em]',
+    '[&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:overflow-x-auto [&_pre]:my-3',
+    '[&_pre>code]:bg-transparent [&_pre>code]:p-0 [&_pre>code]:text-[0.85em]',
+    '[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:italic [&_blockquote]:text-muted-foreground',
+    '[&_table]:w-full [&_table]:border-collapse [&_table]:my-3',
+    '[&_th]:border-b [&_th]:border-border [&_th]:p-2 [&_th]:text-left [&_th]:font-semibold',
+    '[&_td]:border-b [&_td]:border-border/50 [&_td]:p-2',
+    '[&_hr]:my-4 [&_hr]:border-border',
+    className
+  )}
+  style={styleString}
+>
+  {@html safeHtml}
+</div>

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

@@ -0,0 +1,11 @@
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    /** Rich HTML to render (e.g. TipTap StarterKit output). Spec-controlled and
+     *  possibly LLM-authored, so it is sanitized before {@html}. */
+    html?: string;
+}
+declare const RichTextDisplay: import("svelte").Component<Props, {}, "">;
+type RichTextDisplay = ReturnType<typeof RichTextDisplay>;
+export default RichTextDisplay;

package/dist/widgets/display/Skeleton.svelte

@@ -0,0 +1,36 @@
+<!--
+  Skeleton.svelte: minimal loading placeholder, also shown by Ripple while a
+  streaming spec hasn't produced its first valid parse yet.
+  Variants: card (default, its own bordered box), dashboard, text, none. The
+  text and dashboard blocks carry no padding, so they start on the content
+  edge where the real content will land.
+-->
+<script lang="ts">
+  interface Props {
+    variant?: 'card' | 'dashboard' | 'text' | 'none';
+    class?: string;
+  }
+
+  let { variant = 'card', class: className = '' }: Props = $props();
+</script>
+
+{#if variant === 'none'}
+  <!-- render nothing — for callers who handle loading externally -->
+{:else if variant === 'text'}
+  <div class="rskeleton rskeleton--text animate-pulse space-y-2 {className}">
+    <div class="h-4 bg-ripple-track rounded w-3/4"></div>
+    <div class="h-4 bg-ripple-track rounded w-1/2"></div>
+  </div>
+{:else if variant === 'dashboard'}
+  <div class="rskeleton rskeleton--dashboard animate-pulse grid grid-cols-3 gap-3 {className}">
+    {#each Array(6) as _, i (i)}
+      <div class="h-24 bg-ripple-track rounded"></div>
+    {/each}
+  </div>
+{:else}
+  <div class="rskeleton rskeleton--card animate-pulse rounded-lg border border-border p-4 space-y-3 {className}">
+    <div class="h-5 bg-ripple-track rounded w-1/3"></div>
+    <div class="h-4 bg-ripple-track rounded w-full"></div>
+    <div class="h-4 bg-ripple-track rounded w-5/6"></div>
+  </div>
+{/if}

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

@@ -0,0 +1,7 @@
+interface Props {
+    variant?: 'card' | 'dashboard' | 'text' | 'none';
+    class?: string;
+}
+declare const Skeleton: import("svelte").Component<Props, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/widgets/display/SoulStatus.svelte

@@ -0,0 +1,148 @@
+<!-- SoulStatus.svelte — Compact/expanded display widget for an agent's soul state -->
+<!-- 2026-06-27: forward node id — bind id + data-ripple-node on each variant's root div
+     so the visual editor can select this widget directly (SP-0 id-forwarding codemod). -->
+<script lang="ts">
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    id?: string;
+    name?: string;
+    role?: string;
+    initials?: string;
+    color?: string;
+    mood?: string;
+    energy?: number;
+    memories?: number;
+    lastAction?: string;
+    status?: 'online' | 'offline' | 'busy';
+    compact?: boolean;
+    class?: string;
+  }
+
+  let {
+    id,
+    name = 'Agent',
+    role = '',
+    initials = '',
+    color = '#6366f1',
+    mood = '',
+    energy = 100,
+    memories = 0,
+    lastAction = '',
+    status = 'online',
+    compact = true,
+    class: className
+  }: Props = $props();
+
+  const displayInitials = $derived(
+    initials || name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase()
+  );
+
+  const statusColor = $derived(
+    status === 'online' ? 'bg-ripple-success'
+    : status === 'busy' ? 'bg-ripple-warning'
+    : 'bg-gray-400'
+  );
+
+  const energyClamped = $derived(Math.max(0, Math.min(100, energy)));
+</script>
+
+{#if compact}
+  <div {id} data-ripple-node={id} class={cn('flex items-center gap-2.5', className)}>
+    <!-- Avatar with status dot -->
+    <div class="relative shrink-0">
+      <div
+        class="flex items-center justify-center w-7 h-7 rounded-lg text-[11px] font-semibold text-white select-none"
+        style:background-color={color}
+      >
+        {displayInitials}
+      </div>
+      <span class={cn('absolute -bottom-0.5 -right-0.5 w-2 h-2 rounded-full ring-2 ring-background', statusColor)}></span>
+    </div>
+
+    <!-- Name -->
+    <span class="text-sm font-medium text-foreground truncate">{name}</span>
+
+    <!-- Mood badge -->
+    {#if mood}
+      <span class="text-[10px] font-medium text-muted-foreground bg-muted px-1.5 py-0.5 rounded-md shrink-0">
+        {mood}
+      </span>
+    {/if}
+
+    <!-- Inline energy bar -->
+    <div class="flex items-center gap-1.5 ml-auto shrink-0">
+      <div class="w-16 h-1.5 rounded-full bg-muted overflow-hidden">
+        <div
+          class="h-full rounded-full bg-ripple-info transition-all duration-300"
+          style:width="{energyClamped}%"
+        ></div>
+      </div>
+      <span class="text-[10px] text-muted-foreground tabular-nums">{energyClamped}%</span>
+    </div>
+  </div>
+{:else}
+  <div {id} data-ripple-node={id} class={cn('flex flex-col gap-3 rounded-lg border border-border/50 bg-transparent p-3', className)}>
+    <!-- Header: avatar + name/role -->
+    <div class="flex items-center gap-2.5">
+      <div class="relative shrink-0">
+        <div
+          class="flex items-center justify-center w-9 h-9 rounded-lg text-xs font-semibold text-white select-none"
+          style:background-color={color}
+        >
+          {displayInitials}
+        </div>
+        <span class={cn('absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full ring-2 ring-background', statusColor)}></span>
+      </div>
+      <div class="flex flex-col min-w-0">
+        <span class="text-sm font-semibold text-foreground truncate">{name}</span>
+        {#if role}
+          <span class="text-xs text-muted-foreground truncate">{role}</span>
+        {/if}
+      </div>
+    </div>
+
+    <!-- Rows -->
+    <div class="flex flex-col gap-2">
+      <!-- Mood -->
+      {#if mood}
+        <div class="flex items-center justify-between">
+          <span class="text-xs text-muted-foreground">Mood</span>
+          <span class="text-[11px] font-medium text-muted-foreground bg-muted px-1.5 py-0.5 rounded-md">
+            {mood}
+          </span>
+        </div>
+      {/if}
+
+      <!-- Energy -->
+      <div class="flex items-center justify-between gap-3">
+        <span class="text-xs text-muted-foreground">Energy</span>
+        <div class="flex items-center gap-2 flex-1 justify-end">
+          <div class="w-24 h-1.5 rounded-full bg-muted overflow-hidden">
+            <div
+              class="h-full rounded-full bg-ripple-info transition-all duration-300"
+              style:width="{energyClamped}%"
+            ></div>
+          </div>
+          <span class="text-[11px] text-muted-foreground tabular-nums w-7 text-right">{energyClamped}%</span>
+        </div>
+      </div>
+
+      <!-- Memories -->
+      {#if memories > 0}
+        <div class="flex items-center justify-between">
+          <span class="text-xs text-muted-foreground">Memories</span>
+          <span class="text-xs font-medium text-foreground tabular-nums">{memories.toLocaleString()}</span>
+        </div>
+      {/if}
+
+      <!-- Last Action -->
+      {#if lastAction}
+        <div class="flex items-center justify-between gap-2">
+          <span class="text-xs text-muted-foreground shrink-0">Last Action</span>
+          <span class="text-xs text-foreground truncate text-right">{lastAction}</span>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

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

@@ -0,0 +1,17 @@
+interface Props {
+    id?: string;
+    name?: string;
+    role?: string;
+    initials?: string;
+    color?: string;
+    mood?: string;
+    energy?: number;
+    memories?: number;
+    lastAction?: string;
+    status?: 'online' | 'offline' | 'busy';
+    compact?: boolean;
+    class?: string;
+}
+declare const SoulStatus: import("svelte").Component<Props, {}, "">;
+type SoulStatus = ReturnType<typeof SoulStatus>;
+export default SoulStatus;