@runtypelabs/persona 3.16.0 → 3.18.0

package/README.md

@@ -939,6 +939,148 @@ Indicators are resolved in this order:
 2. **Config function** (`loadingIndicator.render` / `loadingIndicator.renderIdle`)
 3. **Default** (3-dot bouncing animation for loading, `null` for idle)
 
+### Ask User Question
+
+The `ask_user_question` feature turns a LOCAL agent tool into an interactive prompt with tappable option pills. When the agent calls the `ask_user_question` tool, the server pauses execution and emits a `step_await` event; the widget renders an answer-pill sheet over the composer; the user picks / types / dismisses; the widget POSTs the answer to `/v1/dispatch/resume` and the paused execution continues with a structured `tool_result`.
+
+This is the recommended pattern for human-in-the-loop clarifying questions. The agent-side setup (declare `ask_user_question` as a `runtimeTools` LOCAL tool and instruct the model to call it) lives in your `RuntypeFlowConfig` in the proxy — pair it with a `POST` handler that forwards to the upstream `/resume` endpoint (see `@runtypelabs/persona-proxy` and your deployment’s `resume` route).
+
+#### Configuration
+
+```ts
+features: {
+  askUserQuestion: {
+    enabled: true,             // default: true. When false, the tool falls through to the normal tool-bubble path.
+    dismissible: true,         // default: true. Shows a × close button on the sheet.
+    slideInMs: 180,            // slide-in animation duration.
+    freeTextLabel: 'Other…',
+    freeTextPlaceholder: 'Type your answer…',
+    submitLabel: 'Send',
+    styles: {
+      sheetBackground: '#ffffff',
+      sheetBorder: '#e5e7eb',
+      sheetShadow: '0 12px 28px -10px rgba(0,0,0,0.15)',
+      pillBackground: 'transparent',
+      pillBackgroundSelected: '#0f0f0f',
+      pillTextColor: '#1f2937',
+      pillTextColorSelected: '#fafafa',
+      pillBorderRadius: '999px',
+      customInputBackground: '#ffffff'
+    }
+  }
+}
+```
+
+The composer-overlay sheet is the only question UI — no transcript stub is rendered. After the user picks, the picked answer appears as a normal user bubble so the transcript reads naturally.
+
+#### DOM events
+
+The widget dispatches two events on the mount element so the host page can react without touching the plugin API:
+
+| Event | Detail |
+|---|---|
+| `persona:askUserQuestion:answered` | `{ toolUseId, answer, values, isFreeText, source }` where `source` is `'pick' \| 'multi' \| 'free-text'` |
+| `persona:askUserQuestion:dismissed` | `{ toolUseId }` |
+
+```ts
+mount.addEventListener('persona:askUserQuestion:answered', (event) => {
+  const { answer, source } = event.detail;
+  console.log('User picked', answer, 'via', source);
+});
+```
+
+#### Custom UI via the `renderAskUserQuestion` plugin hook
+
+For full control over the question UI — a modal, a sidebar form, a command palette, whatever — register a plugin with `renderAskUserQuestion`. Returning a non-null `HTMLElement` renders inline in the transcript and suppresses the built-in overlay sheet. Returning `null` falls through to the default sheet.
+
+```ts
+import type { AgentWidgetPlugin } from '@runtypelabs/persona';
+
+const customAskPlugin: AgentWidgetPlugin = {
+  id: 'custom-ask',
+  renderAskUserQuestion: ({ payload, complete, resolve, dismiss }) => {
+    const prompt = payload?.questions?.[0];
+    if (!prompt) return null; // streaming — wait for more data, or show a skeleton
+
+    const root = document.createElement('div');
+    root.className = 'my-question-card';
+
+    const q = document.createElement('p');
+    q.textContent = prompt.question ?? '';
+    root.appendChild(q);
+
+    (prompt.options ?? []).forEach((option) => {
+      const btn = document.createElement('button');
+      btn.textContent = option.label;
+      btn.addEventListener('click', () => resolve(option.label));
+      root.appendChild(btn);
+    });
+
+    if (prompt.allowFreeText !== false) {
+      const input = document.createElement('input');
+      input.placeholder = 'Other…';
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && input.value.trim()) resolve(input.value.trim());
+      });
+      root.appendChild(input);
+    }
+
+    const close = document.createElement('button');
+    close.textContent = '×';
+    close.addEventListener('click', () => dismiss());
+    root.appendChild(close);
+
+    return root;
+  }
+};
+
+initAgentWidget({
+  target: '#app',
+  config: {
+    plugins: [customAskPlugin]
+  }
+});
+```
+
+#### Type Definitions
+
+```ts
+type AskUserQuestionOption = {
+  label: string;
+  description?: string;
+};
+
+type AskUserQuestionPrompt = {
+  question: string;
+  header?: string;           // short chip label, ≤12 chars
+  options: AskUserQuestionOption[];
+  multiSelect?: boolean;     // allow multiple picks with a Submit button
+  allowFreeText?: boolean;   // show an "Other…" free-text pill
+};
+
+type AskUserQuestionPayload = {
+  questions: AskUserQuestionPrompt[];
+};
+
+// Plugin hook signature
+renderAskUserQuestion?: (context: {
+  message: AgentWidgetMessage;
+  payload: Partial<AskUserQuestionPayload> | null;  // may be partial mid-stream
+  complete: boolean;                                // true once tool-call args fully stream
+  resolve: (answer: string) => void;                // posts /resume with structured toolOutput
+  dismiss: () => void;                              // sends "(dismissed)" sentinel
+  config: AgentWidgetConfig;
+}) => HTMLElement | null;
+```
+
+For plugins that want to re-parse a tool message outside the hook context, the widget also exports a `parseAskUserQuestionPayload(message)` helper that returns `{ payload, complete }` using the same partial-JSON logic the built-in sheet uses.
+
+#### Priority chain
+
+1. **Plugin hook** (`renderAskUserQuestion` returning a non-null element) — fully owns the UI; built-in overlay is suppressed.
+2. **Built-in overlay sheet** — when the feature is enabled and no plugin handles it.
+3. **Generic tool bubble** — when `features.askUserQuestion.enabled` is `false`, the tool call renders through the normal `renderToolCall` path.
+
 ### Dropdown Menu
 
 A reusable dropdown menu utility for building custom menus in plugins, custom components, or host-page UI that matches the widget's theme.

package/dist/animations/glyph-cycle.cjs

@@ -0,0 +1,279 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/animations/glyph-cycle.ts
+var glyph_cycle_exports = {};
+__export(glyph_cycle_exports, {
+  default: () => glyph_cycle_default,
+  glyphCycle: () => glyphCycle
+});
+module.exports = __toCommonJS(glyph_cycle_exports);
+
+// src/utils/stream-animation.ts
+var BUILTIN_PLUGINS = [
+  {
+    name: "typewriter",
+    containerClass: "persona-stream-typewriter",
+    wrap: "char",
+    useCaret: true
+  },
+  {
+    name: "pop-bubble",
+    bubbleClass: "persona-stream-pop",
+    wrap: "none"
+  },
+  {
+    name: "letter-rise",
+    containerClass: "persona-stream-letter-rise",
+    wrap: "char"
+  },
+  {
+    name: "word-fade",
+    containerClass: "persona-stream-word-fade",
+    wrap: "word"
+  }
+];
+var globalRegistry = /* @__PURE__ */ new Map();
+for (const plugin of BUILTIN_PLUGINS) globalRegistry.set(plugin.name, plugin);
+var registerStreamAnimationPlugin = (plugin) => {
+  globalRegistry.set(plugin.name, plugin);
+};
+
+// src/animations/glyph-cycle.ts
+var STYLES = `
+[data-persona-root] .persona-stream-glyph-cycle .persona-stream-char {
+  animation: persona-stream-glyph-cycle-fade
+    calc(var(--persona-stream-step, 120ms) * 1.5) ease-out both;
+}
+[data-persona-root] .persona-stream-glyph-cycle .persona-stream-char[data-glyph-cycle-final] {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+@keyframes persona-stream-glyph-cycle-fade {
+  from { opacity: 0.35; }
+  to   { opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-persona-root] .persona-stream-glyph-cycle .persona-stream-char {
+    animation: none !important;
+    opacity: 1 !important;
+  }
+}
+`.trim();
+var GLYPHS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#$%&@";
+var TICK_COUNT = 10;
+var BASE_TICK_MS = 120;
+var DEFAULT_STEP_MS = 120;
+var CROSS_FLICKER_PROBABILITY = 0.4;
+var BUFFER_THRESHOLD = 50;
+var getStepMs = (container) => {
+  var _a;
+  if (!container) return DEFAULT_STEP_MS;
+  const raw = (_a = container.style.getPropertyValue("--persona-stream-step")) == null ? void 0 : _a.trim();
+  const match = raw.match(/([\d.]+)\s*ms/);
+  return match ? parseFloat(match[1]) : DEFAULT_STEP_MS;
+};
+var getTickMs = (span) => {
+  const container = span.closest(".persona-stream-glyph-cycle");
+  const step = getStepMs(container);
+  return BASE_TICK_MS * step / DEFAULT_STEP_MS;
+};
+var randomGlyph = (avoid) => {
+  let ch = GLYPHS[Math.floor(Math.random() * GLYPHS.length)];
+  if (avoid && ch === avoid) {
+    ch = GLYPHS[(GLYPHS.indexOf(ch) + 1) % GLYPHS.length];
+  }
+  return ch;
+};
+var flickerLaterSiblings = (span) => {
+  const container = span.closest(".persona-stream-glyph-cycle");
+  if (!container) return;
+  const unsettled = container.querySelectorAll(
+    ".persona-stream-char[data-glyph-cycle-final]"
+  );
+  let seenSelf = false;
+  for (const other of Array.from(unsettled)) {
+    if (other === span) {
+      seenSelf = true;
+      continue;
+    }
+    if (!seenSelf) continue;
+    if (Math.random() < CROSS_FLICKER_PROBABILITY) {
+      other.textContent = randomGlyph();
+    }
+  }
+};
+var containerNextSettleAt = /* @__PURE__ */ new WeakMap();
+var DEFAULT_ARRIVAL_MS = 25;
+var STAGGER_DRAIN_FACTOR = 0.5;
+var MIN_STAGGER_MS = 6;
+var EMA_ALPHA = 0.25;
+var containerLastScheduleAt = /* @__PURE__ */ new WeakMap();
+var containerArrivalMs = /* @__PURE__ */ new WeakMap();
+var observeStagger = (container, now) => {
+  var _a;
+  if (!container) return DEFAULT_ARRIVAL_MS * STAGGER_DRAIN_FACTOR;
+  const last = containerLastScheduleAt.get(container);
+  containerLastScheduleAt.set(container, now);
+  let observed = (_a = containerArrivalMs.get(container)) != null ? _a : DEFAULT_ARRIVAL_MS;
+  if (last !== void 0) {
+    const interval = now - last;
+    if (interval > 1) {
+      observed = observed * (1 - EMA_ALPHA) + interval * EMA_ALPHA;
+      containerArrivalMs.set(container, observed);
+    }
+  }
+  return Math.max(MIN_STAGGER_MS, observed * STAGGER_DRAIN_FACTOR);
+};
+var activeCyclesByMessage = /* @__PURE__ */ new Map();
+var getMessageId = (span) => {
+  var _a;
+  const bubble = span.closest("[data-message-id]");
+  return (_a = bubble == null ? void 0 : bubble.dataset.messageId) != null ? _a : null;
+};
+var incrementActive = (messageId) => {
+  var _a;
+  if (!messageId) return;
+  activeCyclesByMessage.set(messageId, ((_a = activeCyclesByMessage.get(messageId)) != null ? _a : 0) + 1);
+};
+var decrementActive = (messageId) => {
+  var _a;
+  if (!messageId) return;
+  const count = (_a = activeCyclesByMessage.get(messageId)) != null ? _a : 0;
+  if (count <= 1) activeCyclesByMessage.delete(messageId);
+  else activeCyclesByMessage.set(messageId, count - 1);
+};
+var scheduleCycle = (span) => {
+  var _a;
+  if (span.dataset.glyphCycleScheduled === "true") return;
+  const finalChar = (_a = span.textContent) != null ? _a : "";
+  if (!finalChar || /\s/.test(finalChar)) return;
+  span.dataset.glyphCycleScheduled = "true";
+  span.dataset.glyphCycleFinal = finalChar;
+  span.setAttribute("data-preserve-runtime", "stream-glyph-cycle");
+  span.textContent = randomGlyph();
+  const messageId = getMessageId(span);
+  if (messageId) span.dataset.glyphCycleMessageId = messageId;
+  incrementActive(messageId);
+  const container = span.closest(".persona-stream-glyph-cycle");
+  const now = Date.now();
+  const staggerMs = observeStagger(container, now);
+  const tickMs = getTickMs(span);
+  const baseDurationMs = TICK_COUNT * tickMs;
+  let settleAt = now + baseDurationMs;
+  if (container) {
+    const prev = containerNextSettleAt.get(container);
+    if (prev !== void 0) settleAt = Math.max(settleAt, prev);
+    containerNextSettleAt.set(container, settleAt + staggerMs);
+  }
+  startCycle(span, finalChar, settleAt);
+};
+var startCycle = (span, finalChar, settleAt) => {
+  var _a;
+  if (span.dataset.glyphCycleStarted === "true") return;
+  span.dataset.glyphCycleStarted = "true";
+  const tickMs = getTickMs(span);
+  let lastGlyph = (_a = span.textContent) != null ? _a : void 0;
+  const step = () => {
+    var _a2;
+    if (!span.isConnected) return;
+    if (Date.now() >= settleAt) {
+      span.textContent = finalChar;
+      span.removeAttribute("data-preserve-runtime");
+      delete span.dataset.glyphCycleStarted;
+      delete span.dataset.glyphCycleFinal;
+      decrementActive((_a2 = span.dataset.glyphCycleMessageId) != null ? _a2 : null);
+      delete span.dataset.glyphCycleMessageId;
+      return;
+    }
+    const glyph = randomGlyph(lastGlyph);
+    span.textContent = glyph;
+    lastGlyph = glyph;
+    flickerLaterSiblings(span);
+    setTimeout(step, tickMs);
+  };
+  setTimeout(step, tickMs);
+};
+var processCharSpans = (root) => {
+  var _a;
+  const spans = (_a = root.querySelectorAll) == null ? void 0 : _a.call(
+    root,
+    ".persona-stream-glyph-cycle .persona-stream-char:not([data-glyph-cycle-scheduled])"
+  );
+  if (!spans) return;
+  for (const span of Array.from(spans)) {
+    scheduleCycle(span);
+  }
+};
+var isElement = (node) => node.nodeType === 1;
+var glyphCycle = {
+  name: "glyph-cycle",
+  containerClass: "persona-stream-glyph-cycle",
+  wrap: "char",
+  // Narrow the default skip list so inline `<code>` and fenced `<pre>`
+  // code blocks both render as cycling glyphs along with everything else.
+  // Links stay clickable; <script>/<style> stay untouched.
+  skipTags: ["a", "script", "style"],
+  styles: STYLES,
+  bufferContent(content) {
+    if (content.length < BUFFER_THRESHOLD) return "";
+    let boldPairs = 0;
+    let lastSafe = -1;
+    let i = 0;
+    while (i < content.length) {
+      if (content[i] === "*" && content[i + 1] === "*") {
+        boldPairs += 1;
+        i += 2;
+        continue;
+      }
+      if (/\s/.test(content[i]) && boldPairs % 2 === 0) {
+        lastSafe = i;
+      }
+      i += 1;
+    }
+    if (lastSafe < 0) return "";
+    return content.slice(0, lastSafe);
+  },
+  isAnimating(message) {
+    var _a;
+    return ((_a = activeCyclesByMessage.get(message.id)) != null ? _a : 0) > 0;
+  },
+  onAttach(root) {
+    processCharSpans(root);
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        for (const node of Array.from(mutation.addedNodes)) {
+          if (!isElement(node)) continue;
+          if (node.classList.contains("persona-stream-char") && node.closest(".persona-stream-glyph-cycle")) {
+            scheduleCycle(node);
+          } else {
+            processCharSpans(node);
+          }
+        }
+      }
+    });
+    observer.observe(root, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }
+};
+registerStreamAnimationPlugin(glyphCycle);
+var glyph_cycle_default = glyphCycle;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  glyphCycle
+});

package/dist/animations/glyph-cycle.d.cts

@@ -0,0 +1,5 @@
+import { S as StreamAnimationPlugin } from './types-cwY5HaFD.cjs';
+
+declare const glyphCycle: StreamAnimationPlugin;
+
+export { glyphCycle as default, glyphCycle };

package/dist/animations/glyph-cycle.d.ts

@@ -0,0 +1,5 @@
+import { S as StreamAnimationPlugin } from './types-cwY5HaFD.js';
+
+declare const glyphCycle: StreamAnimationPlugin;
+
+export { glyphCycle as default, glyphCycle };

package/dist/animations/glyph-cycle.js

@@ -0,0 +1,252 @@
+// src/utils/stream-animation.ts
+var BUILTIN_PLUGINS = [
+  {
+    name: "typewriter",
+    containerClass: "persona-stream-typewriter",
+    wrap: "char",
+    useCaret: true
+  },
+  {
+    name: "pop-bubble",
+    bubbleClass: "persona-stream-pop",
+    wrap: "none"
+  },
+  {
+    name: "letter-rise",
+    containerClass: "persona-stream-letter-rise",
+    wrap: "char"
+  },
+  {
+    name: "word-fade",
+    containerClass: "persona-stream-word-fade",
+    wrap: "word"
+  }
+];
+var globalRegistry = /* @__PURE__ */ new Map();
+for (const plugin of BUILTIN_PLUGINS) globalRegistry.set(plugin.name, plugin);
+var registerStreamAnimationPlugin = (plugin) => {
+  globalRegistry.set(plugin.name, plugin);
+};
+
+// src/animations/glyph-cycle.ts
+var STYLES = `
+[data-persona-root] .persona-stream-glyph-cycle .persona-stream-char {
+  animation: persona-stream-glyph-cycle-fade
+    calc(var(--persona-stream-step, 120ms) * 1.5) ease-out both;
+}
+[data-persona-root] .persona-stream-glyph-cycle .persona-stream-char[data-glyph-cycle-final] {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+@keyframes persona-stream-glyph-cycle-fade {
+  from { opacity: 0.35; }
+  to   { opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-persona-root] .persona-stream-glyph-cycle .persona-stream-char {
+    animation: none !important;
+    opacity: 1 !important;
+  }
+}
+`.trim();
+var GLYPHS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#$%&@";
+var TICK_COUNT = 10;
+var BASE_TICK_MS = 120;
+var DEFAULT_STEP_MS = 120;
+var CROSS_FLICKER_PROBABILITY = 0.4;
+var BUFFER_THRESHOLD = 50;
+var getStepMs = (container) => {
+  var _a;
+  if (!container) return DEFAULT_STEP_MS;
+  const raw = (_a = container.style.getPropertyValue("--persona-stream-step")) == null ? void 0 : _a.trim();
+  const match = raw.match(/([\d.]+)\s*ms/);
+  return match ? parseFloat(match[1]) : DEFAULT_STEP_MS;
+};
+var getTickMs = (span) => {
+  const container = span.closest(".persona-stream-glyph-cycle");
+  const step = getStepMs(container);
+  return BASE_TICK_MS * step / DEFAULT_STEP_MS;
+};
+var randomGlyph = (avoid) => {
+  let ch = GLYPHS[Math.floor(Math.random() * GLYPHS.length)];
+  if (avoid && ch === avoid) {
+    ch = GLYPHS[(GLYPHS.indexOf(ch) + 1) % GLYPHS.length];
+  }
+  return ch;
+};
+var flickerLaterSiblings = (span) => {
+  const container = span.closest(".persona-stream-glyph-cycle");
+  if (!container) return;
+  const unsettled = container.querySelectorAll(
+    ".persona-stream-char[data-glyph-cycle-final]"
+  );
+  let seenSelf = false;
+  for (const other of Array.from(unsettled)) {
+    if (other === span) {
+      seenSelf = true;
+      continue;
+    }
+    if (!seenSelf) continue;
+    if (Math.random() < CROSS_FLICKER_PROBABILITY) {
+      other.textContent = randomGlyph();
+    }
+  }
+};
+var containerNextSettleAt = /* @__PURE__ */ new WeakMap();
+var DEFAULT_ARRIVAL_MS = 25;
+var STAGGER_DRAIN_FACTOR = 0.5;
+var MIN_STAGGER_MS = 6;
+var EMA_ALPHA = 0.25;
+var containerLastScheduleAt = /* @__PURE__ */ new WeakMap();
+var containerArrivalMs = /* @__PURE__ */ new WeakMap();
+var observeStagger = (container, now) => {
+  var _a;
+  if (!container) return DEFAULT_ARRIVAL_MS * STAGGER_DRAIN_FACTOR;
+  const last = containerLastScheduleAt.get(container);
+  containerLastScheduleAt.set(container, now);
+  let observed = (_a = containerArrivalMs.get(container)) != null ? _a : DEFAULT_ARRIVAL_MS;
+  if (last !== void 0) {
+    const interval = now - last;
+    if (interval > 1) {
+      observed = observed * (1 - EMA_ALPHA) + interval * EMA_ALPHA;
+      containerArrivalMs.set(container, observed);
+    }
+  }
+  return Math.max(MIN_STAGGER_MS, observed * STAGGER_DRAIN_FACTOR);
+};
+var activeCyclesByMessage = /* @__PURE__ */ new Map();
+var getMessageId = (span) => {
+  var _a;
+  const bubble = span.closest("[data-message-id]");
+  return (_a = bubble == null ? void 0 : bubble.dataset.messageId) != null ? _a : null;
+};
+var incrementActive = (messageId) => {
+  var _a;
+  if (!messageId) return;
+  activeCyclesByMessage.set(messageId, ((_a = activeCyclesByMessage.get(messageId)) != null ? _a : 0) + 1);
+};
+var decrementActive = (messageId) => {
+  var _a;
+  if (!messageId) return;
+  const count = (_a = activeCyclesByMessage.get(messageId)) != null ? _a : 0;
+  if (count <= 1) activeCyclesByMessage.delete(messageId);
+  else activeCyclesByMessage.set(messageId, count - 1);
+};
+var scheduleCycle = (span) => {
+  var _a;
+  if (span.dataset.glyphCycleScheduled === "true") return;
+  const finalChar = (_a = span.textContent) != null ? _a : "";
+  if (!finalChar || /\s/.test(finalChar)) return;
+  span.dataset.glyphCycleScheduled = "true";
+  span.dataset.glyphCycleFinal = finalChar;
+  span.setAttribute("data-preserve-runtime", "stream-glyph-cycle");
+  span.textContent = randomGlyph();
+  const messageId = getMessageId(span);
+  if (messageId) span.dataset.glyphCycleMessageId = messageId;
+  incrementActive(messageId);
+  const container = span.closest(".persona-stream-glyph-cycle");
+  const now = Date.now();
+  const staggerMs = observeStagger(container, now);
+  const tickMs = getTickMs(span);
+  const baseDurationMs = TICK_COUNT * tickMs;
+  let settleAt = now + baseDurationMs;
+  if (container) {
+    const prev = containerNextSettleAt.get(container);
+    if (prev !== void 0) settleAt = Math.max(settleAt, prev);
+    containerNextSettleAt.set(container, settleAt + staggerMs);
+  }
+  startCycle(span, finalChar, settleAt);
+};
+var startCycle = (span, finalChar, settleAt) => {
+  var _a;
+  if (span.dataset.glyphCycleStarted === "true") return;
+  span.dataset.glyphCycleStarted = "true";
+  const tickMs = getTickMs(span);
+  let lastGlyph = (_a = span.textContent) != null ? _a : void 0;
+  const step = () => {
+    var _a2;
+    if (!span.isConnected) return;
+    if (Date.now() >= settleAt) {
+      span.textContent = finalChar;
+      span.removeAttribute("data-preserve-runtime");
+      delete span.dataset.glyphCycleStarted;
+      delete span.dataset.glyphCycleFinal;
+      decrementActive((_a2 = span.dataset.glyphCycleMessageId) != null ? _a2 : null);
+      delete span.dataset.glyphCycleMessageId;
+      return;
+    }
+    const glyph = randomGlyph(lastGlyph);
+    span.textContent = glyph;
+    lastGlyph = glyph;
+    flickerLaterSiblings(span);
+    setTimeout(step, tickMs);
+  };
+  setTimeout(step, tickMs);
+};
+var processCharSpans = (root) => {
+  var _a;
+  const spans = (_a = root.querySelectorAll) == null ? void 0 : _a.call(
+    root,
+    ".persona-stream-glyph-cycle .persona-stream-char:not([data-glyph-cycle-scheduled])"
+  );
+  if (!spans) return;
+  for (const span of Array.from(spans)) {
+    scheduleCycle(span);
+  }
+};
+var isElement = (node) => node.nodeType === 1;
+var glyphCycle = {
+  name: "glyph-cycle",
+  containerClass: "persona-stream-glyph-cycle",
+  wrap: "char",
+  // Narrow the default skip list so inline `<code>` and fenced `<pre>`
+  // code blocks both render as cycling glyphs along with everything else.
+  // Links stay clickable; <script>/<style> stay untouched.
+  skipTags: ["a", "script", "style"],
+  styles: STYLES,
+  bufferContent(content) {
+    if (content.length < BUFFER_THRESHOLD) return "";
+    let boldPairs = 0;
+    let lastSafe = -1;
+    let i = 0;
+    while (i < content.length) {
+      if (content[i] === "*" && content[i + 1] === "*") {
+        boldPairs += 1;
+        i += 2;
+        continue;
+      }
+      if (/\s/.test(content[i]) && boldPairs % 2 === 0) {
+        lastSafe = i;
+      }
+      i += 1;
+    }
+    if (lastSafe < 0) return "";
+    return content.slice(0, lastSafe);
+  },
+  isAnimating(message) {
+    var _a;
+    return ((_a = activeCyclesByMessage.get(message.id)) != null ? _a : 0) > 0;
+  },
+  onAttach(root) {
+    processCharSpans(root);
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        for (const node of Array.from(mutation.addedNodes)) {
+          if (!isElement(node)) continue;
+          if (node.classList.contains("persona-stream-char") && node.closest(".persona-stream-glyph-cycle")) {
+            scheduleCycle(node);
+          } else {
+            processCharSpans(node);
+          }
+        }
+      }
+    });
+    observer.observe(root, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }
+};
+registerStreamAnimationPlugin(glyphCycle);
+var glyph_cycle_default = glyphCycle;
+export {
+  glyph_cycle_default as default,
+  glyphCycle
+};