@runtypelabs/persona 3.16.0 → 3.17.0

package/src/components/message-bubble.ts

@@ -7,10 +7,85 @@ import {
   AgentWidgetMessageActionsConfig,
   AgentWidgetMessageFeedback,
   LoadingIndicatorRenderContext,
-  ImageContentPart
+  ImageContentPart,
+  StopReasonKind
 } from "../types";
 import { createIconButton } from "../utils/buttons";
 import { IMAGE_ONLY_MESSAGE_FALLBACK_TEXT } from "../utils/content";
+import {
+  applyStreamBuffer,
+  createSkeletonPlaceholder,
+  createStreamCaret,
+  resolveStreamAnimation,
+  resolveStreamAnimationPlugin,
+  wrapStreamAnimation,
+} from "../utils/stream-animation";
+
+/**
+ * Default copy for the inline notice rendered when a turn ends with a
+ * non-natural stop reason. Deployers override per-reason via
+ * `config.copy.stopReasonNotice`. Returns `null` for natural completions
+ * (`end_turn`) and uninformative reasons (`unknown`) — those never render
+ * an affordance.
+ */
+export const getDefaultStopReasonNoticeCopy = (
+  stopReason: StopReasonKind
+): string | null => {
+  switch (stopReason) {
+    case "max_tool_calls":
+      return "Stopped after calling a tool. Send a follow-up to continue.";
+    case "length":
+      return "Response cut off as max tokens reached. Ask for more to continue.";
+    case "content_filter":
+      return "The provider filtered this response.";
+    case "error":
+      return "Something went wrong generating this response.";
+    case "end_turn":
+    case "unknown":
+    default:
+      return null;
+  }
+};
+
+/**
+ * Resolve the notice text for a stop reason, applying user overrides on
+ * top of the built-in defaults. Returns `null` when the reason does not
+ * warrant a notice or when the resolved string is empty (deployers can
+ * suppress per-reason by setting an empty override).
+ */
+export const resolveStopReasonNoticeText = (
+  stopReason: StopReasonKind | undefined,
+  overrides?: Partial<Record<StopReasonKind, string>>
+): string | null => {
+  if (!stopReason) return null;
+  const fallback = getDefaultStopReasonNoticeCopy(stopReason);
+  // Reasons without a default (end_turn, unknown) never render — overrides
+  // for those keys are intentionally ignored.
+  if (fallback === null) return null;
+  const override = overrides?.[stopReason];
+  const text = override !== undefined ? override : fallback;
+  if (!text) return null;
+  return text;
+};
+
+/**
+ * Build the inline notice element rendered on assistant bubbles whose
+ * turn ended with `max_tool_calls`, `length`, `content_filter`, or `error`.
+ */
+const createStopReasonNotice = (
+  stopReason: StopReasonKind,
+  text: string
+): HTMLElement => {
+  const notice = createElement(
+    "div",
+    "persona-message-stop-reason persona-text-xs persona-mt-2 persona-italic"
+  );
+  notice.setAttribute("data-stop-reason", stopReason);
+  notice.setAttribute("role", "note");
+  notice.style.opacity = "0.75";
+  notice.textContent = text;
+  return notice;
+};
 
 /** Validate that an image src URL uses a safe scheme (blocks javascript: and SVG data URIs). */
 export const isSafeImageSrc = (src: string): boolean => {
@@ -507,24 +582,107 @@ export const createStandardBubble = (
     imageParts.length > 0 && messageContentText === IMAGE_ONLY_MESSAGE_FALLBACK_TEXT;
   const shouldHideTextUntilPreviewFails = isImageOnlyFallbackMessage;
 
+  const streamAnimation = resolveStreamAnimation(
+    options?.widgetConfig?.features?.streamAnimation
+  );
+  const streamPluginOverrides =
+    options?.widgetConfig?.features?.streamAnimation?.plugins;
+  const streamPlugin =
+    message.role === "assistant" && streamAnimation.type !== "none"
+      ? resolveStreamAnimationPlugin(streamAnimation.type, streamPluginOverrides)
+      : null;
+  // Stay in "streaming-animated" mode while the plugin reports in-flight
+  // work for this message — e.g. glyph-cycle's tick loops still walking
+  // through the tail after the last token arrived. Without this, the final
+  // non-animated render rips out the cycling spans mid-animation.
+  const pluginStillAnimating =
+    message.role === "assistant" &&
+    streamPlugin?.isAnimating?.(message) === true;
+  const streamAnimationActive =
+    message.role === "assistant" &&
+    streamPlugin !== null &&
+    (Boolean(message.streaming) || pluginStillAnimating);
+
+  if (streamAnimationActive && streamPlugin?.bubbleClass) {
+    bubble.classList.add(streamPlugin.bubbleClass);
+  }
+
   // Add message content
   const contentDiv = document.createElement("div");
   contentDiv.classList.add("persona-message-content");
+
+  if (streamAnimationActive && streamPlugin) {
+    if (streamPlugin.containerClass) {
+      contentDiv.classList.add(streamPlugin.containerClass);
+    }
+    contentDiv.style.setProperty("--persona-stream-step", `${streamAnimation.speed}ms`);
+    contentDiv.style.setProperty("--persona-stream-duration", `${streamAnimation.duration}ms`);
+  }
+
+  const bufferedContent = streamAnimationActive
+    ? applyStreamBuffer(
+        message.content ?? "",
+        streamAnimation.buffer,
+        streamPlugin,
+        message,
+        Boolean(message.streaming)
+      )
+    : (message.content ?? "");
+
   const transformedContent = transform({
-    text: message.content,
+    text: bufferedContent,
     message,
     streaming: Boolean(message.streaming),
     raw: message.rawContent
   });
+
+  let animatedContent = transformedContent;
+  if (streamAnimationActive && streamPlugin?.wrap === "char") {
+    animatedContent = wrapStreamAnimation(transformedContent, "char", message.id, {
+      skipTags: streamPlugin.skipTags,
+    });
+  } else if (streamAnimationActive && streamPlugin?.wrap === "word") {
+    animatedContent = wrapStreamAnimation(transformedContent, "word", message.id, {
+      skipTags: streamPlugin.skipTags,
+    });
+  }
+
   let textContentDiv: HTMLElement | null = null;
 
   if (shouldHideTextUntilPreviewFails) {
     textContentDiv = document.createElement("div");
-    textContentDiv.innerHTML = transformedContent;
+    textContentDiv.innerHTML = animatedContent;
     textContentDiv.style.display = "none";
     contentDiv.appendChild(textContentDiv);
   } else {
-    contentDiv.innerHTML = transformedContent;
+    contentDiv.innerHTML = animatedContent;
+  }
+
+  if (
+    streamAnimationActive &&
+    streamPlugin?.useCaret &&
+    !shouldHideTextUntilPreviewFails &&
+    messageContentText
+  ) {
+    const caret = createStreamCaret();
+    // Caret must sit on the same line as the final char. Markdown wraps text
+    // in block elements (<p>, <li>, <pre>), so appending to contentDiv would
+    // drop the caret onto a fresh line. Tuck it after the last char/word span,
+    // or fall back to the last block when no spans exist yet.
+    const spans = contentDiv.querySelectorAll(
+      ".persona-stream-char, .persona-stream-word"
+    );
+    const lastSpan = spans[spans.length - 1];
+    if (lastSpan?.parentNode) {
+      lastSpan.parentNode.insertBefore(caret, lastSpan.nextSibling);
+    } else {
+      const lastChild = contentDiv.lastElementChild;
+      if (lastChild) {
+        lastChild.appendChild(caret);
+      } else {
+        contentDiv.appendChild(caret);
+      }
+    }
   }
 
   // Add inline timestamp if configured
@@ -561,19 +719,56 @@ export const createStandardBubble = (
     bubble.appendChild(timestamp);
   }
 
-  // Add typing indicator if this is a streaming assistant message
+  // Resolve the stop-reason notice (if any). Only assistant messages can
+  // carry a stop reason worth surfacing.
+  const stopReasonNoticeText =
+    message.role === "assistant"
+      ? resolveStopReasonNoticeText(
+          message.stopReason,
+          options?.widgetConfig?.copy?.stopReasonNotice
+        )
+      : null;
+
+  // Add typing indicator (or skeleton placeholder) for streaming assistant
+  // messages. Check the buffered content — a plugin's `bufferContent` may
+  // hold back the first N chars (e.g. glyph-cycle waits for 50 chars), during
+  // which the bubble would otherwise appear empty.
+  //
+  // When the `"line"` buffer strategy is paired with the skeleton placeholder,
+  // the skeleton trails below any already-revealed content to hint that more
+  // lines are on the way. It disappears on stream completion.
   if (message.streaming && message.role === "assistant") {
-    if (!message.content || !message.content.trim()) {
-      // Use custom renderer if provided, otherwise default
-      const indicator = renderLoadingIndicatorWithFallback(
-        'inline',
-        options?.loadingIndicatorRenderer,
-        options?.widgetConfig
-      );
-      if (indicator) {
-        bubble.appendChild(indicator);
+    const hasVisibleContent = Boolean(bufferedContent && bufferedContent.trim());
+    const skeletonEnabled = streamAnimation.placeholder === "skeleton";
+    const trailSkeleton =
+      skeletonEnabled && streamAnimation.buffer === "line" && hasVisibleContent;
+    if (!hasVisibleContent) {
+      if (skeletonEnabled) {
+        bubble.appendChild(createSkeletonPlaceholder());
+      } else {
+        const indicator = renderLoadingIndicatorWithFallback(
+          'inline',
+          options?.loadingIndicatorRenderer,
+          options?.widgetConfig
+        );
+        if (indicator) {
+          bubble.appendChild(indicator);
+        }
       }
+    } else if (trailSkeleton) {
+      bubble.appendChild(createSkeletonPlaceholder());
+    }
+  }
+
+  // Append the stop-reason notice for non-natural completions. When the
+  // assistant produced no text (the `max_tool_calls` empty-bubble symptom),
+  // hide the empty content div so the notice carries the entire bubble
+  // instead of trailing under a blank space.
+  if (stopReasonNoticeText && message.stopReason && !message.streaming) {
+    if (!messageContentText) {
+      contentDiv.style.display = "none";
     }
+    bubble.appendChild(createStopReasonNotice(message.stopReason, stopReasonNoticeText));
   }
 
   // Add message actions for assistant messages (only when not streaming and has content)

package/src/components/panel.ts

@@ -110,6 +110,8 @@ export interface PanelElements {
   actionsRow: HTMLElement;
   leftActions: HTMLElement;
   rightActions: HTMLElement;
+  /** Swap the send button between its send and stop appearances. */
+  setSendButtonMode: (mode: "send" | "stop") => void;
 }
 
 export const buildPanel = (config?: AgentWidgetConfig, showClose = true): PanelElements => {
@@ -230,7 +232,8 @@ export const buildPanel = (config?: AgentWidgetConfig, showClose = true): PanelE
     // Actions row layout elements
     actionsRow: composerElements.actionsRow,
     leftActions: composerElements.leftActions,
-    rightActions: composerElements.rightActions
+    rightActions: composerElements.rightActions,
+    setSendButtonMode: composerElements.setSendButtonMode
   };
 };
 

package/src/defaults.ts

@@ -137,6 +137,12 @@ export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
       expandable: true,
       loadingAnimation: "none",
     },
+    streamAnimation: {
+      type: "none",
+      placeholder: "none",
+      speed: 120,
+      duration: 1800,
+    },
   },
   suggestionChips: [
     "What can you help me with?",
@@ -251,6 +257,8 @@ export function mergeWithDefaults(
       const ca = config.features?.artifacts;
       const dsb = DEFAULT_WIDGET_CONFIG.features?.scrollToBottom;
       const csb = config.features?.scrollToBottom;
+      const dsa = DEFAULT_WIDGET_CONFIG.features?.streamAnimation;
+      const csa = config.features?.streamAnimation;
       const mergedArtifacts =
         da === undefined && ca === undefined
           ? undefined
@@ -269,11 +277,19 @@ export function mergeWithDefaults(
               ...dsb,
               ...csb,
             };
+      const mergedStreamAnimation =
+        dsa === undefined && csa === undefined
+          ? undefined
+          : {
+              ...dsa,
+              ...csa,
+            };
       return {
         ...DEFAULT_WIDGET_CONFIG.features,
         ...config.features,
         ...(mergedScrollToBottom !== undefined ? { scrollToBottom: mergedScrollToBottom } : {}),
         ...(mergedArtifacts !== undefined ? { artifacts: mergedArtifacts } : {}),
+        ...(mergedStreamAnimation !== undefined ? { streamAnimation: mergedStreamAnimation } : {}),
       };
     })(),
     suggestionChips: config.suggestionChips ?? DEFAULT_WIDGET_CONFIG.suggestionChips,

package/src/index-global.ts

@@ -0,0 +1,31 @@
+/**
+ * IIFE entry point — bundled for `<script>` tag consumers.
+ *
+ * This file re-exports everything from the main entry AND side-imports all
+ * built-in subpath animations so they register automatically. Script-tag
+ * users who include the global build don't need extra script tags or
+ * registration calls — setting `features.streamAnimation.type` to any
+ * built-in name just works.
+ *
+ * npm consumers continue to import from the main entry (`import ... from
+ * "@runtypelabs/persona"`) — those animations stay in their subpath
+ * modules so bundlers can tree-shake them.
+ */
+
+// Re-export the full public API.
+export * from "./index";
+
+// Side-import the remaining subpath animations so they're available to
+// script-tag consumers without an explicit import. (`letter-rise` and
+// `word-fade` are core built-ins and register automatically.)
+import "./animations/wipe";
+import "./animations/glyph-cycle";
+
+// Expose plugin-registration helpers on the global so custom animations
+// can be registered from inline `<script>` blocks or third-party CDN scripts.
+export {
+  registerStreamAnimationPlugin,
+  unregisterStreamAnimationPlugin,
+  listRegisteredStreamAnimations,
+} from "./utils/stream-animation";
+export type { StreamAnimationPlugin, StreamAnimationContext } from "./types";

package/src/index.ts

@@ -178,6 +178,24 @@ export type { AgentWidgetInitHandle };
 export type { AgentWidgetPlugin } from "./plugins/types";
 export { pluginRegistry } from "./plugins/registry";
 
+// Stream animation plugin API — lets consumers register custom animations
+// that match the built-in surface (typewriter, pop-bubble) and subpath
+// modules (letter-rise, word-fade, wipe, glyph-cycle).
+export {
+  registerStreamAnimationPlugin,
+  unregisterStreamAnimationPlugin,
+  listRegisteredStreamAnimations,
+} from "./utils/stream-animation";
+export type {
+  StreamAnimationPlugin,
+  StreamAnimationContext,
+  AgentWidgetStreamAnimationBuffer,
+  AgentWidgetStreamAnimationBuiltinType,
+  AgentWidgetStreamAnimationType,
+  AgentWidgetStreamAnimationFeature,
+  AgentWidgetStreamAnimationPlaceholder,
+} from "./types";
+
 // Dropdown utility exports
 export { createDropdownMenu } from "./utils/dropdown";
 export type { DropdownMenuItem, CreateDropdownOptions, DropdownMenuHandle } from "./utils/dropdown";

package/src/session.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, beforeEach } from 'vitest';
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
 import { AgentWidgetSession, AgentWidgetSessionStatus } from './session';
 import { AgentWidgetMessage } from './types';
 
@@ -245,3 +245,95 @@ describe('AgentWidgetSession - Message Injection', () => {
     });
   });
 });
+
+describe('AgentWidgetSession - cancel()', () => {
+  const originalFetch = global.fetch;
+
+  afterEach(() => {
+    global.fetch = originalFetch;
+    vi.restoreAllMocks();
+  });
+
+  it('aborts the in-flight dispatch and flips streaming/status back to idle', async () => {
+    let capturedSignal: AbortSignal | null = null;
+    // Fetch returns a promise that only settles when the AbortSignal fires —
+    // modeling a dispatch that's still receiving SSE tokens.
+    global.fetch = vi.fn().mockImplementation((_url: string, options: any) => {
+      capturedSignal = options.signal as AbortSignal;
+      return new Promise((_resolve, reject) => {
+        options.signal?.addEventListener('abort', () => {
+          const err = new Error('aborted');
+          err.name = 'AbortError';
+          reject(err);
+        });
+      });
+    });
+
+    let streaming = false;
+    let status: AgentWidgetSessionStatus = 'idle';
+    const session = new AgentWidgetSession(
+      { apiUrl: 'http://example.invalid/chat' },
+      {
+        onMessagesChanged: () => {},
+        onStatusChanged: (s) => { status = s; },
+        onStreamingChanged: (s) => { streaming = s; }
+      }
+    );
+
+    // Kick off the dispatch but don't await — we want it in-flight when we cancel.
+    const dispatchPromise = session.sendMessage('Hello');
+    // Let the session set up the AbortController and call fetch.
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(streaming).toBe(true);
+    expect(session.isStreaming()).toBe(true);
+    expect(capturedSignal).not.toBeNull();
+    expect(capturedSignal!.aborted).toBe(false);
+
+    session.cancel();
+
+    expect(session.isStreaming()).toBe(false);
+    expect(streaming).toBe(false);
+    expect(status).toBe('idle');
+    expect(capturedSignal!.aborted).toBe(true);
+
+    // Drain the dispatch promise so the test doesn't leak a rejection.
+    await dispatchPromise;
+  });
+
+  it('is a no-op when not streaming', () => {
+    const session = new AgentWidgetSession(
+      { apiUrl: 'http://example.invalid/chat' },
+      {
+        onMessagesChanged: () => {},
+        onStatusChanged: () => {},
+        onStreamingChanged: () => {}
+      }
+    );
+
+    expect(session.isStreaming()).toBe(false);
+    expect(() => session.cancel()).not.toThrow();
+    expect(session.isStreaming()).toBe(false);
+    expect(session.getStatus()).toBe('idle');
+  });
+
+  it('stops in-progress audio playback (TTS + voice provider) on cancel', () => {
+    const session = new AgentWidgetSession(
+      { apiUrl: 'http://example.invalid/chat' },
+      {
+        onMessagesChanged: () => {},
+        onStatusChanged: () => {},
+        onStreamingChanged: () => {}
+      }
+    );
+
+    const stopSpeakingSpy = vi.spyOn(session, 'stopSpeaking');
+    const stopVoicePlaybackSpy = vi.spyOn(session, 'stopVoicePlayback');
+
+    session.cancel();
+
+    expect(stopSpeakingSpy).toHaveBeenCalledTimes(1);
+    expect(stopVoicePlaybackSpy).toHaveBeenCalledTimes(1);
+  });
+});

package/src/session.ts

@@ -971,6 +971,11 @@ export class AgentWidgetSession {
   public cancel() {
     this.abortController?.abort();
     this.abortController = null;
+    // Stop any in-progress audio too — when the user hits "stop", they want
+    // the assistant to actually stop talking, not just stop generating tokens.
+    // Both helpers are safe no-ops when audio isn't configured.
+    this.stopSpeaking();
+    this.stopVoicePlayback();
     this.setStreaming(false);
     this.setStatus("idle");
   }

package/src/styles/widget.css

@@ -2824,3 +2824,136 @@
     transform: translateX(0);
   }
 }
+
+/* ============================================================
+   Stream animations — reveal effects for assistant message text
+   while streaming. Opt-in via `features.streamAnimation.type`.
+   Units are staggered via `--char-index` / `--word-index`
+   (set inline on each wrapper span). Timing is configured via
+   `--persona-stream-step` and `--persona-stream-duration` on
+   the `.persona-message-content` container.
+   ============================================================ */
+
+/* Per-char/per-word spans need to be inline-block so `transform` works for
+   the rise/fade animations. Each span animates from the moment it is first
+   added to the DOM — streaming itself provides the visible stagger, so the
+   CSS animation has no per-index delay. An index-based delay would compound
+   with the stream's arrival cadence and leave later chars permanently hidden. */
+[data-persona-root] .persona-stream-char,
+[data-persona-root] .persona-stream-word {
+  display: inline-block;
+  will-change: opacity, transform, filter;
+}
+
+/* Group chars belonging to the same word so the browser treats the word as a
+   single break unit. Without this, every inline-block char introduces a break
+   opportunity and words get split mid-letter during streaming, then snap back
+   when the final content replaces the wrapped spans. */
+[data-persona-root] .persona-stream-word-group {
+  white-space: nowrap;
+}
+
+/* ---------- typewriter: fade per arriving char + blinking caret ---------- */
+@keyframes persona-stream-typewriter-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+[data-persona-root] .persona-stream-typewriter .persona-stream-char {
+  animation: persona-stream-typewriter-in var(--persona-stream-step, 120ms) ease-out both;
+}
+
+/* ---------- letter-rise: per-char translateY + fade ---------- */
+@keyframes persona-stream-letter-rise {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+[data-persona-root] .persona-stream-letter-rise .persona-stream-char {
+  animation: persona-stream-letter-rise calc(var(--persona-stream-step, 120ms) * 2)
+    ease-out both;
+}
+
+/* ---------- word-fade: per-word blur + translateY fade-in ---------- */
+@keyframes persona-stream-word-fade {
+  from { opacity: 0; filter: blur(4px); transform: translateY(3px); }
+  to { opacity: 1; filter: blur(0); transform: translateY(0); }
+}
+[data-persona-root] .persona-stream-word-fade .persona-stream-word {
+  animation: persona-stream-word-fade calc(var(--persona-stream-step, 120ms) * 3)
+    ease-out both;
+}
+
+/* The following animations live in subpath plugin modules — their CSS is
+   injected by the plugin when activated, not by the core stylesheet:
+   - `wipe`        → @runtypelabs/persona/animations/wipe
+   - `glyph-cycle` → @runtypelabs/persona/animations/glyph-cycle */
+
+/* ---------- pop-bubble: scale + opacity entrance on the bubble ---------- */
+@keyframes persona-stream-pop-in {
+  0%   { transform: scale(0.6); opacity: 0; }
+  100% { transform: scale(1);   opacity: 1; }
+}
+[data-persona-root] .persona-stream-pop {
+  transform-origin: bottom left;
+  animation: persona-stream-pop-in 400ms cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
+}
+
+/* ---------- caret used by typewriter ---------- */
+@keyframes persona-stream-blink {
+  0%, 50%      { opacity: 1; }
+  50.01%, 100% { opacity: 0; }
+}
+[data-persona-root] .persona-stream-caret {
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  margin-left: 1px;
+  vertical-align: -2px;
+  background: currentColor;
+  animation: persona-stream-blink 1s steps(1) infinite;
+}
+
+/* ---------- skeleton placeholder (pre-first-token) ---------- */
+@keyframes persona-stream-skeleton-shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+[data-persona-root] .persona-stream-skeleton {
+  padding: 2px 0;
+  /* The assistant bubble sizes to content. Give the skeleton an intrinsic
+     width so the bubble expands; the bubble's own `max-width: 85%` clamps
+     the upper bound. */
+  width: 260px;
+  max-width: 100%;
+}
+[data-persona-root] .persona-stream-skeleton-line {
+  width: 100%;
+  height: 10px;
+  border-radius: 3px;
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, currentColor 12%, transparent) 0%,
+    color-mix(in srgb, currentColor 22%, transparent) 50%,
+    color-mix(in srgb, currentColor 12%, transparent) 100%
+  );
+  background-size: 200% 100%;
+  animation: persona-stream-skeleton-shimmer 1.4s linear infinite;
+}
+
+/* ---------- reduced-motion: disable per-unit and container animations ---------- */
+@media (prefers-reduced-motion: reduce) {
+  [data-persona-root] .persona-stream-typewriter .persona-stream-char,
+  [data-persona-root] .persona-stream-letter-rise .persona-stream-char,
+  [data-persona-root] .persona-stream-word-fade .persona-stream-word,
+  [data-persona-root] .persona-stream-pop,
+  [data-persona-root] .persona-stream-caret,
+  [data-persona-root] .persona-stream-skeleton-line {
+    animation: none !important;
+    opacity: 1 !important;
+    filter: none !important;
+    transform: none !important;
+    color: inherit !important;
+    background: none !important;
+    -webkit-background-clip: border-box !important;
+            background-clip: border-box !important;
+  }
+}

package/src/testing/index.ts

@@ -0,0 +1,11 @@
+/** @runtypelabs/persona/testing — Helpers for mocking SSE streams in demos, previews, and tests. */
+
+export {
+  createMockSSEStream,
+  createMockSSEResponse,
+  buildAssistantTurnFrames,
+  type MockSSEFrame,
+  type CreateMockSSEStreamOptions,
+  type MockSSEResponseOptions,
+  type AssistantTurnFramesOptions,
+} from "./mock-stream";