@mastra/playground-ui 51.2.0 → 51.3.0-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @mastra/playground-ui
 
+## 51.3.0-alpha.0
+
+### Minor Changes
+
+- Added `@mastra/playground-ui/components/ai/message-reveal`, which paces a whole assistant message — prose, reasoning, tool rows, cards — on one clock, so its parts arrive in the order the model wrote them. ([#22408](https://github.com/mastra-ai/mastra/pull/22408))
+
+  Before, a renderer paced its own text with `useRevealedText`, which could only slow prose down: everything written between two passages landed at once, so a tool row appeared while the sentence before it was still being typed out.
+
+  ```tsx
+  import { useRevealedParts } from '@mastra/playground-ui/components/ai/message-reveal';
+
+  const parts = useRevealedParts(message.content.parts, streaming);
+
+  <MessageFactory message={{ ...message, content: { ...message.content, parts } }} {...renderers} />;
+  ```
+
+  The projection happens above the renderers, so none of them has to know a reveal is running.
+
+### Patch Changes
+
+- Added Storybook examples for every published Playground UI component that did not already have coverage. ([#22422](https://github.com/mastra-ai/mastra/pull/22422))
+
+- Updated dependencies [[`bae1502`](https://github.com/mastra-ai/mastra/commit/bae150254b06a4da6964d7c137af97f336362359)]:
+  - @mastra/core@1.63.1-alpha.0
+  - @mastra/client-js@1.42.3-alpha.0
+  - @mastra/react@1.4.8-alpha.0
+
 ## 51.2.0
 
 ### Minor Changes

package/dist/components/MarkdownRenderer.cjs.js

@@ -3,72 +3,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const markdownRenderer = require('../markdown-renderer-BQugZq4m.cjs');
-const React = require('react');
+const useReveal = require('../use-reveal-Sa456jZb.cjs');
+
 
-const BUFFER_MS = 1e3;
-const CORRECT_MS = 1e3;
-const FLOW_MS = 700;
-const EASE_MS = 400;
-const SLOWEST = 10;
-const FASTEST = 60;
-const MAX_LAG = 300;
-function measure(flow, now, gained) {
-  const elapsed = Math.max(0, now - flow.at);
-  flow.rate = flow.rate * Math.exp(-elapsed / FLOW_MS) + gained / (FLOW_MS / 1e3);
-  flow.at = Math.max(flow.at, now);
-  return flow.rate;
-}
-function prefersReducedMotion() {
-  if (typeof window === "undefined" || !window.matchMedia) return false;
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-function wordStops(text) {
-  const stops = [0];
-  const word = /\S+/g;
-  for (let match = word.exec(text); match; match = word.exec(text)) stops.push(match.index + match[0].length);
-  return stops;
-}
-function useRevealedText(text, streaming) {
-  const [calm] = React.useState(prefersReducedMotion);
-  const stops = React.useMemo(() => wordStops(text), [text]);
-  const words = stops.length - 1;
-  const [landed, setLanded] = React.useState(() => streaming && !calm ? 0 : words);
-  const shown = calm ? words : Math.min(words, Math.max(landed, words - MAX_LAG));
-  if (shown !== landed) setLanded(shown);
-  const chasing = shown < words;
-  const goal = React.useRef(words);
-  const cursor = React.useRef(shown);
-  const flow = React.useRef({ rate: 0, at: 0 });
-  const pace = React.useRef(SLOWEST);
-  React.useEffect(() => {
-    measure(flow.current, performance.now(), Math.max(0, words - goal.current));
-    goal.current = words;
-    if (cursor.current < shown || cursor.current > words) cursor.current = shown;
-  });
-  React.useEffect(() => {
-    if (!chasing) return;
-    let drawn = performance.now();
-    let frame = requestAnimationFrame(function step(now) {
-      const elapsed = Math.max(0, now - drawn);
-      drawn = Math.max(drawn, now);
-      const arriving = measure(flow.current, now, 0);
-      const from = cursor.current;
-      const behind = goal.current - from;
-      if (behind > 0) {
-        const held = arriving * BUFFER_MS / 1e3;
-        const aim = Math.min(FASTEST, Math.max(SLOWEST, arriving + (behind - held) * 1e3 / CORRECT_MS));
-        pace.current += (aim - pace.current) * Math.min(1, elapsed / EASE_MS);
-        cursor.current = Math.min(goal.current, Math.floor(from) + 1, from + elapsed * pace.current / 1e3);
-        if (Math.floor(cursor.current) !== Math.floor(from)) setLanded(Math.floor(cursor.current));
-      }
-      frame = requestAnimationFrame(step);
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [chasing]);
-  if (!chasing) return text;
-  return text.slice(0, stops[shown]);
-}
 
 exports.MarkdownRenderer = markdownRenderer.MarkdownRenderer;
-exports.useRevealedText = useRevealedText;
+exports.useRevealedText = useReveal.useRevealedText;
 //# sourceMappingURL=MarkdownRenderer.cjs.js.map

package/dist/components/MarkdownRenderer.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownRenderer.cjs.js","sources":["../../src/ds/components/MarkdownRenderer/use-reveal.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\n\n/** How much of the reply the reveal aims to be holding back, as time at the speed it is playing. */\nconst BUFFER_MS = 1000;\n\n/** How long it takes to work off a buffer that is too full or too empty. */\nconst CORRECT_MS = 1000;\n\n/** How long a word keeps counting towards the speed the reply is arriving at. */\nconst FLOW_MS = 700;\n\n/** How long the reveal takes to adopt a new speed, so a change of pace is never a jolt. */\nconst EASE_MS = 400;\n\n/** Words per second it will not go below: a short burst between two tool calls still reads briskly. */\nconst SLOWEST = 10;\n\n/** Words per second it will not go past: one word a frame, all a screen can draw. */\nconst FASTEST = 60;\n\n/** Words it will never fall further behind than — about five seconds at full speed. */\nconst MAX_LAG = 300;\n\ninterface Flow {\n  /** Words per second the reply is arriving at, as an exponential average. */\n  rate: number;\n  at: number;\n}\n\n/** Decays what earlier words still count for, then deposits the ones that just arrived. */\nfunction measure(flow: Flow, now: number, gained: number): number {\n  // rAF timestamps and performance.now() are sampled at different points of a\n  // frame, so a fresh loop can read time slightly behind the last deposit.\n  const elapsed = Math.max(0, now - flow.at);\n  flow.rate = flow.rate * Math.exp(-elapsed / FLOW_MS) + gained / (FLOW_MS / 1000);\n  flow.at = Math.max(flow.at, now);\n\n  return flow.rate;\n}\n\nfunction prefersReducedMotion(): boolean {\n  if (typeof window === 'undefined' || !window.matchMedia) return false;\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/** Where the reveal can cut the text: before the first word, then after each one. */\nfunction wordStops(text: string): number[] {\n  const stops = [0];\n  const word = /\\S+/g;\n\n  for (let match = word.exec(text); match; match = word.exec(text)) stops.push(match.index + match[0].length);\n\n  return stops;\n}\n\n/**\n * A jitter buffer for a streamed reply, counted in words. Chunks reach the\n * browser unevenly — a proxy flushes, a tool call ends, the model changes pace —\n * and drawing each one on arrival makes a reply lurch: ten words at once, then\n * nothing for a fifth of a second.\n *\n * So the reveal runs on its own clock: a frame loop that chunks never interrupt,\n * laying down at most one word per frame however far behind it is. It plays at\n * the speed the reply is arriving at, measured directly, and leans on that only\n * to work the buffer back to `BUFFER_MS` of held text when it drifts. Measuring\n * the speed rather than inferring it from the buffer is what lets the buffer stay\n * shallow: a reply that lasts two seconds still finds its pace in the first few\n * hundred milliseconds, where a deeper buffer would spend the whole reply filling\n * and then sprint to catch up.\n *\n * The reply it paces is whatever the caller hands it, so a caller with more than\n * prose to lay down — a tool row between two paragraphs — paces the whole of it\n * from one place and draws the rest against the same cursor.\n *\n * Nothing here reads `streaming` past the first render: a reply that stops\n * arriving is one whose measured speed decays, which winds the buffer down on its\n * own. Words, not characters, are what a reader sees land, and they are not the\n * same length: an even flow of characters still drops \"and if we do\" in one frame\n * and spends four on \"implementation\".\n */\nexport function useRevealedText(text: string, streaming: boolean): string {\n  const [calm] = useState(prefersReducedMotion);\n  const stops = useMemo(() => wordStops(text), [text]);\n  const words = stops.length - 1;\n\n  const [landed, setLanded] = useState(() => (streaming && !calm ? 0 : words));\n\n  // Winds the cursor back when a shorter reply replaces the one on screen, which\n  // no key can express: same element, same message, new text.\n  const shown = calm ? words : Math.min(words, Math.max(landed, words - MAX_LAG));\n  if (shown !== landed) setLanded(shown);\n\n  const chasing = shown < words;\n  const goal = useRef(words);\n  const cursor = useRef(shown);\n  const flow = useRef<Flow>({ rate: 0, at: 0 });\n  const pace = useRef(SLOWEST);\n\n  useEffect(() => {\n    measure(flow.current, performance.now(), Math.max(0, words - goal.current));\n    goal.current = words;\n\n    if (cursor.current < shown || cursor.current > words) cursor.current = shown;\n  });\n\n  useEffect(() => {\n    if (!chasing) return;\n\n    let drawn = performance.now();\n    let frame = requestAnimationFrame(function step(now) {\n      const elapsed = Math.max(0, now - drawn);\n      drawn = Math.max(drawn, now);\n\n      const arriving = measure(flow.current, now, 0);\n      const from = cursor.current;\n      const behind = goal.current - from;\n\n      if (behind > 0) {\n        const held = (arriving * BUFFER_MS) / 1000;\n        const aim = Math.min(FASTEST, Math.max(SLOWEST, arriving + ((behind - held) * 1000) / CORRECT_MS));\n\n        pace.current += (aim - pace.current) * Math.min(1, elapsed / EASE_MS);\n        cursor.current = Math.min(goal.current, Math.floor(from) + 1, from + (elapsed * pace.current) / 1000);\n\n        if (Math.floor(cursor.current) !== Math.floor(from)) setLanded(Math.floor(cursor.current));\n      }\n\n      frame = requestAnimationFrame(step);\n    });\n\n    return () => cancelAnimationFrame(frame);\n  }, [chasing]);\n\n  if (!chasing) return text;\n\n  return text.slice(0, stops[shown]);\n}\n"],"names":["useState","useMemo","useRef","useEffect"],"mappings":";;;;;;;AAGA,MAAM,SAAA,GAAY,GAAA;AAGlB,MAAM,UAAA,GAAa,GAAA;AAGnB,MAAM,OAAA,GAAU,GAAA;AAGhB,MAAM,OAAA,GAAU,GAAA;AAGhB,MAAM,OAAA,GAAU,EAAA;AAGhB,MAAM,OAAA,GAAU,EAAA;AAGhB,MAAM,OAAA,GAAU,GAAA;AAShB,SAAS,OAAA,CAAQ,IAAA,EAAY,GAAA,EAAa,MAAA,EAAwB;AAGhE,EAAA,MAAM,UAAU,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,GAAA,GAAM,KAAK,EAAE,CAAA;AACzC,EAAA,IAAA,CAAK,IAAA,GAAO,IAAA,CAAK,IAAA,GAAO,IAAA,CAAK,GAAA,CAAI,CAAC,OAAA,GAAU,OAAO,CAAA,GAAI,MAAA,IAAU,OAAA,GAAU,GAAA,CAAA;AAC3E,EAAA,IAAA,CAAK,EAAA,GAAK,IAAA,CAAK,GAAA,CAAI,IAAA,CAAK,IAAI,GAAG,CAAA;AAE/B,EAAA,OAAO,IAAA,CAAK,IAAA;AACd;AAEA,SAAS,oBAAA,GAAgC;AACvC,EAAA,IAAI,OAAO,MAAA,KAAW,WAAA,IAAe,CAAC,MAAA,CAAO,YAAY,OAAO,KAAA;AAChE,EAAA,OAAO,MAAA,CAAO,UAAA,CAAW,kCAAkC,CAAA,CAAE,OAAA;AAC/D;AAGA,SAAS,UAAU,IAAA,EAAwB;AACzC,EAAA,MAAM,KAAA,GAAQ,CAAC,CAAC,CAAA;AAChB,EAAA,MAAM,IAAA,GAAO,MAAA;AAEb,EAAA,KAAA,IAAS,QAAQ,IAAA,CAAK,IAAA,CAAK,IAAI,CAAA,EAAG,KAAA,EAAO,QAAQ,IAAA,CAAK,IAAA,CAAK,IAAI,CAAA,QAAS,IAAA,CAAK,KAAA,CAAM,QAAQ,KAAA,CAAM,CAAC,EAAE,MAAM,CAAA;AAE1G,EAAA,OAAO,KAAA;AACT;AA2BO,SAAS,eAAA,CAAgB,MAAc,SAAA,EAA4B;AACxE,EAAA,MAAM,CAAC,IAAI,CAAA,GAAIA,cAAA,CAAS,oBAAoB,CAAA;AAC5C,EAAA,MAAM,KAAA,GAAQC,cAAQ,MAAM,SAAA,CAAU,IAAI,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AACnD,EAAA,MAAM,KAAA,GAAQ,MAAM,MAAA,GAAS,CAAA;AAE7B,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAID,cAAA,CAAS,MAAO,SAAA,IAAa,CAAC,IAAA,GAAO,CAAA,GAAI,KAAM,CAAA;AAI3E,EAAA,MAAM,KAAA,GAAQ,IAAA,GAAO,KAAA,GAAQ,IAAA,CAAK,GAAA,CAAI,KAAA,EAAO,IAAA,CAAK,GAAA,CAAI,MAAA,EAAQ,KAAA,GAAQ,OAAO,CAAC,CAAA;AAC9E,EAAA,IAAI,KAAA,KAAU,MAAA,EAAQ,SAAA,CAAU,KAAK,CAAA;AAErC,EAAA,MAAM,UAAU,KAAA,GAAQ,KAAA;AACxB,EAAA,MAAM,IAAA,GAAOE,aAAO,KAAK,CAAA;AACzB,EAAA,MAAM,MAAA,GAASA,aAAO,KAAK,CAAA;AAC3B,EAAA,MAAM,OAAOA,YAAA,CAAa,EAAE,MAAM,CAAA,EAAG,EAAA,EAAI,GAAG,CAAA;AAC5C,EAAA,MAAM,IAAA,GAAOA,aAAO,OAAO,CAAA;AAE3B,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,IAAA,CAAK,OAAA,EAAS,WAAA,CAAY,GAAA,EAAI,EAAG,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,KAAA,GAAQ,IAAA,CAAK,OAAO,CAAC,CAAA;AAC1E,IAAA,IAAA,CAAK,OAAA,GAAU,KAAA;AAEf,IAAA,IAAI,OAAO,OAAA,GAAU,KAAA,IAAS,OAAO,OAAA,GAAU,KAAA,SAAc,OAAA,GAAU,KAAA;AAAA,EACzE,CAAC,CAAA;AAED,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAA,EAAS;AAEd,IAAA,IAAI,KAAA,GAAQ,YAAY,GAAA,EAAI;AAC5B,IAAA,IAAI,KAAA,GAAQ,qBAAA,CAAsB,SAAS,IAAA,CAAK,GAAA,EAAK;AACnD,MAAA,MAAM,OAAA,GAAU,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,MAAM,KAAK,CAAA;AACvC,MAAA,KAAA,GAAQ,IAAA,CAAK,GAAA,CAAI,KAAA,EAAO,GAAG,CAAA;AAE3B,MAAA,MAAM,QAAA,GAAW,OAAA,CAAQ,IAAA,CAAK,OAAA,EAAS,KAAK,CAAC,CAAA;AAC7C,MAAA,MAAM,OAAO,MAAA,CAAO,OAAA;AACpB,MAAA,MAAM,MAAA,GAAS,KAAK,OAAA,GAAU,IAAA;AAE9B,MAAA,IAAI,SAAS,CAAA,EAAG;AACd,QAAA,MAAM,IAAA,GAAQ,WAAW,SAAA,GAAa,GAAA;AACtC,QAAA,MAAM,GAAA,GAAM,IAAA,CAAK,GAAA,CAAI,OAAA,EAAS,IAAA,CAAK,GAAA,CAAI,OAAA,EAAS,QAAA,GAAA,CAAa,MAAA,GAAS,IAAA,IAAQ,GAAA,GAAQ,UAAU,CAAC,CAAA;AAEjG,QAAA,IAAA,CAAK,OAAA,IAAA,CAAY,MAAM,IAAA,CAAK,OAAA,IAAW,KAAK,GAAA,CAAI,CAAA,EAAG,UAAU,OAAO,CAAA;AACpE,QAAA,MAAA,CAAO,OAAA,GAAU,IAAA,CAAK,GAAA,CAAI,IAAA,CAAK,SAAS,IAAA,CAAK,KAAA,CAAM,IAAI,CAAA,GAAI,CAAA,EAAG,IAAA,GAAQ,OAAA,GAAU,IAAA,CAAK,UAAW,GAAI,CAAA;AAEpG,QAAA,IAAI,IAAA,CAAK,KAAA,CAAM,MAAA,CAAO,OAAO,MAAM,IAAA,CAAK,KAAA,CAAM,IAAI,CAAA,EAAG,SAAA,CAAU,IAAA,CAAK,KAAA,CAAM,MAAA,CAAO,OAAO,CAAC,CAAA;AAAA,MAC3F;AAEA,MAAA,KAAA,GAAQ,sBAAsB,IAAI,CAAA;AAAA,IACpC,CAAC,CAAA;AAED,IAAA,OAAO,MAAM,qBAAqB,KAAK,CAAA;AAAA,EACzC,CAAA,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAA,IAAI,CAAC,SAAS,OAAO,IAAA;AAErB,EAAA,OAAO,IAAA,CAAK,KAAA,CAAM,CAAA,EAAG,KAAA,CAAM,KAAK,CAAC,CAAA;AACnC;;;;;"}
+{"version":3,"file":"MarkdownRenderer.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/components/MarkdownRenderer.es.js

@@ -1,69 +1,3 @@
 export { M as MarkdownRenderer } from '../markdown-renderer-LOqipQki.js';
-import { useState, useMemo, useRef, useEffect } from 'react';
-
-const BUFFER_MS = 1e3;
-const CORRECT_MS = 1e3;
-const FLOW_MS = 700;
-const EASE_MS = 400;
-const SLOWEST = 10;
-const FASTEST = 60;
-const MAX_LAG = 300;
-function measure(flow, now, gained) {
-  const elapsed = Math.max(0, now - flow.at);
-  flow.rate = flow.rate * Math.exp(-elapsed / FLOW_MS) + gained / (FLOW_MS / 1e3);
-  flow.at = Math.max(flow.at, now);
-  return flow.rate;
-}
-function prefersReducedMotion() {
-  if (typeof window === "undefined" || !window.matchMedia) return false;
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-function wordStops(text) {
-  const stops = [0];
-  const word = /\S+/g;
-  for (let match = word.exec(text); match; match = word.exec(text)) stops.push(match.index + match[0].length);
-  return stops;
-}
-function useRevealedText(text, streaming) {
-  const [calm] = useState(prefersReducedMotion);
-  const stops = useMemo(() => wordStops(text), [text]);
-  const words = stops.length - 1;
-  const [landed, setLanded] = useState(() => streaming && !calm ? 0 : words);
-  const shown = calm ? words : Math.min(words, Math.max(landed, words - MAX_LAG));
-  if (shown !== landed) setLanded(shown);
-  const chasing = shown < words;
-  const goal = useRef(words);
-  const cursor = useRef(shown);
-  const flow = useRef({ rate: 0, at: 0 });
-  const pace = useRef(SLOWEST);
-  useEffect(() => {
-    measure(flow.current, performance.now(), Math.max(0, words - goal.current));
-    goal.current = words;
-    if (cursor.current < shown || cursor.current > words) cursor.current = shown;
-  });
-  useEffect(() => {
-    if (!chasing) return;
-    let drawn = performance.now();
-    let frame = requestAnimationFrame(function step(now) {
-      const elapsed = Math.max(0, now - drawn);
-      drawn = Math.max(drawn, now);
-      const arriving = measure(flow.current, now, 0);
-      const from = cursor.current;
-      const behind = goal.current - from;
-      if (behind > 0) {
-        const held = arriving * BUFFER_MS / 1e3;
-        const aim = Math.min(FASTEST, Math.max(SLOWEST, arriving + (behind - held) * 1e3 / CORRECT_MS));
-        pace.current += (aim - pace.current) * Math.min(1, elapsed / EASE_MS);
-        cursor.current = Math.min(goal.current, Math.floor(from) + 1, from + elapsed * pace.current / 1e3);
-        if (Math.floor(cursor.current) !== Math.floor(from)) setLanded(Math.floor(cursor.current));
-      }
-      frame = requestAnimationFrame(step);
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [chasing]);
-  if (!chasing) return text;
-  return text.slice(0, stops[shown]);
-}
-
-export { useRevealedText };
+export { u as useRevealedText } from '../use-reveal-d77hxHz9.js';
 //# sourceMappingURL=MarkdownRenderer.es.js.map

package/dist/components/MarkdownRenderer.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownRenderer.es.js","sources":["../../src/ds/components/MarkdownRenderer/use-reveal.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\n\n/** How much of the reply the reveal aims to be holding back, as time at the speed it is playing. */\nconst BUFFER_MS = 1000;\n\n/** How long it takes to work off a buffer that is too full or too empty. */\nconst CORRECT_MS = 1000;\n\n/** How long a word keeps counting towards the speed the reply is arriving at. */\nconst FLOW_MS = 700;\n\n/** How long the reveal takes to adopt a new speed, so a change of pace is never a jolt. */\nconst EASE_MS = 400;\n\n/** Words per second it will not go below: a short burst between two tool calls still reads briskly. */\nconst SLOWEST = 10;\n\n/** Words per second it will not go past: one word a frame, all a screen can draw. */\nconst FASTEST = 60;\n\n/** Words it will never fall further behind than — about five seconds at full speed. */\nconst MAX_LAG = 300;\n\ninterface Flow {\n  /** Words per second the reply is arriving at, as an exponential average. */\n  rate: number;\n  at: number;\n}\n\n/** Decays what earlier words still count for, then deposits the ones that just arrived. */\nfunction measure(flow: Flow, now: number, gained: number): number {\n  // rAF timestamps and performance.now() are sampled at different points of a\n  // frame, so a fresh loop can read time slightly behind the last deposit.\n  const elapsed = Math.max(0, now - flow.at);\n  flow.rate = flow.rate * Math.exp(-elapsed / FLOW_MS) + gained / (FLOW_MS / 1000);\n  flow.at = Math.max(flow.at, now);\n\n  return flow.rate;\n}\n\nfunction prefersReducedMotion(): boolean {\n  if (typeof window === 'undefined' || !window.matchMedia) return false;\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/** Where the reveal can cut the text: before the first word, then after each one. */\nfunction wordStops(text: string): number[] {\n  const stops = [0];\n  const word = /\\S+/g;\n\n  for (let match = word.exec(text); match; match = word.exec(text)) stops.push(match.index + match[0].length);\n\n  return stops;\n}\n\n/**\n * A jitter buffer for a streamed reply, counted in words. Chunks reach the\n * browser unevenly — a proxy flushes, a tool call ends, the model changes pace —\n * and drawing each one on arrival makes a reply lurch: ten words at once, then\n * nothing for a fifth of a second.\n *\n * So the reveal runs on its own clock: a frame loop that chunks never interrupt,\n * laying down at most one word per frame however far behind it is. It plays at\n * the speed the reply is arriving at, measured directly, and leans on that only\n * to work the buffer back to `BUFFER_MS` of held text when it drifts. Measuring\n * the speed rather than inferring it from the buffer is what lets the buffer stay\n * shallow: a reply that lasts two seconds still finds its pace in the first few\n * hundred milliseconds, where a deeper buffer would spend the whole reply filling\n * and then sprint to catch up.\n *\n * The reply it paces is whatever the caller hands it, so a caller with more than\n * prose to lay down — a tool row between two paragraphs — paces the whole of it\n * from one place and draws the rest against the same cursor.\n *\n * Nothing here reads `streaming` past the first render: a reply that stops\n * arriving is one whose measured speed decays, which winds the buffer down on its\n * own. Words, not characters, are what a reader sees land, and they are not the\n * same length: an even flow of characters still drops \"and if we do\" in one frame\n * and spends four on \"implementation\".\n */\nexport function useRevealedText(text: string, streaming: boolean): string {\n  const [calm] = useState(prefersReducedMotion);\n  const stops = useMemo(() => wordStops(text), [text]);\n  const words = stops.length - 1;\n\n  const [landed, setLanded] = useState(() => (streaming && !calm ? 0 : words));\n\n  // Winds the cursor back when a shorter reply replaces the one on screen, which\n  // no key can express: same element, same message, new text.\n  const shown = calm ? words : Math.min(words, Math.max(landed, words - MAX_LAG));\n  if (shown !== landed) setLanded(shown);\n\n  const chasing = shown < words;\n  const goal = useRef(words);\n  const cursor = useRef(shown);\n  const flow = useRef<Flow>({ rate: 0, at: 0 });\n  const pace = useRef(SLOWEST);\n\n  useEffect(() => {\n    measure(flow.current, performance.now(), Math.max(0, words - goal.current));\n    goal.current = words;\n\n    if (cursor.current < shown || cursor.current > words) cursor.current = shown;\n  });\n\n  useEffect(() => {\n    if (!chasing) return;\n\n    let drawn = performance.now();\n    let frame = requestAnimationFrame(function step(now) {\n      const elapsed = Math.max(0, now - drawn);\n      drawn = Math.max(drawn, now);\n\n      const arriving = measure(flow.current, now, 0);\n      const from = cursor.current;\n      const behind = goal.current - from;\n\n      if (behind > 0) {\n        const held = (arriving * BUFFER_MS) / 1000;\n        const aim = Math.min(FASTEST, Math.max(SLOWEST, arriving + ((behind - held) * 1000) / CORRECT_MS));\n\n        pace.current += (aim - pace.current) * Math.min(1, elapsed / EASE_MS);\n        cursor.current = Math.min(goal.current, Math.floor(from) + 1, from + (elapsed * pace.current) / 1000);\n\n        if (Math.floor(cursor.current) !== Math.floor(from)) setLanded(Math.floor(cursor.current));\n      }\n\n      frame = requestAnimationFrame(step);\n    });\n\n    return () => cancelAnimationFrame(frame);\n  }, [chasing]);\n\n  if (!chasing) return text;\n\n  return text.slice(0, stops[shown]);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MarkdownRenderer.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/ai/message-reveal.cjs.js

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const useReveal = require('../../use-reveal-Sa456jZb.cjs');
+
+const PASSAGE = "\n\n";
+const ROW_MARK = Array.from({ length: 6 }, () => "").join(" ");
+function partProse(part) {
+  if (part.type === "text") return part.text;
+  if (part.type === "reasoning") return part.reasoning;
+  return void 0;
+}
+function messageScript(parts) {
+  return parts.map((part) => partProse(part) ?? ROW_MARK).join(PASSAGE);
+}
+function revealedParts(parts, shown) {
+  const script = messageScript(parts);
+  if (shown.length >= script.length) return parts;
+  const revealed = [];
+  let read = 0;
+  for (const part of parts) {
+    const start = read === 0 ? 0 : read + PASSAGE.length;
+    if (part.type !== "text" && part.type !== "reasoning") {
+      read = start + ROW_MARK.length;
+      if (shown.length < read) break;
+      revealed.push(part);
+      continue;
+    }
+    const written = part.type === "text" ? part.text : part.reasoning;
+    read = start + written.length;
+    const text = shown.slice(start, read);
+    if (text === written) {
+      revealed.push(part);
+      continue;
+    }
+    if (text) revealed.push(part.type === "text" ? { ...part, text } : { ...part, reasoning: text });
+    break;
+  }
+  return revealed;
+}
+function useRevealedParts(parts, streaming) {
+  const shown = useReveal.useRevealedText(messageScript(parts), streaming);
+  return revealedParts(parts, shown);
+}
+
+exports.messageScript = messageScript;
+exports.revealedParts = revealedParts;
+exports.useRevealedParts = useRevealedParts;
+//# sourceMappingURL=message-reveal.cjs.js.map

package/dist/components/ai/message-reveal.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-reveal.cjs.js","sources":["../../../src/ds/components/ai/message-reveal/message-reveal.ts"],"sourcesContent":["import type { MastraDBMessage } from '@mastra/core/agent/message-list';\n\nimport { useRevealedText } from '../../MarkdownRenderer/use-reveal';\n\ntype MessagePart = MastraDBMessage['content']['parts'][number];\n\n/** What separates two passages of prose that were streamed as separate blocks. */\nconst PASSAGE = '\\n\\n';\n\n/**\n * A part that is not prose, written into the reveal's script as words so it takes a\n * beat on the same clock: a burst of parallel tool calls cascades in row by row, at\n * the pace the reply is moving, instead of landing as one block.\n */\nconst ROW_MARK = Array.from({ length: 6 }, () => '').join(' ');\n\n/**\n * The words a part was written as, for the kinds the model writes word by word.\n * Reasoning streams delta by delta exactly like prose, so its passage takes its\n * words' time on the clock rather than one row's beat — a beat would hold the\n * block back whole, then let it land at once and grow unpaced.\n */\nfunction partProse(part: MessagePart): string | undefined {\n  if (part.type === 'text') return part.text;\n  if (part.type === 'reasoning') return part.reasoning;\n  return undefined;\n}\n\n/** What the reveal paces: the whole message, rows and cards written in as beats between the prose. */\nexport function messageScript(parts: MessagePart[]): string {\n  return parts.map(part => partProse(part) ?? ROW_MARK).join(PASSAGE);\n}\n\n/**\n * The parts of a message a reveal has reached, `shown` being a prefix of the script.\n *\n * A reply is not only prose: a tool row, a card, a reasoning block sit between its\n * passages, and they were written in that order. Pacing the prose alone would lay a\n * sentence down word by word while the row that follows it is already on screen — so\n * every part waits its turn on the one clock, and the reader is handed the answer in\n * the order it was written.\n */\nexport function revealedParts(parts: MessagePart[], shown: string): MessagePart[] {\n  const script = messageScript(parts);\n  if (shown.length >= script.length) return parts;\n\n  const revealed: MessagePart[] = [];\n  let read = 0;\n\n  for (const part of parts) {\n    const start = read === 0 ? 0 : read + PASSAGE.length;\n\n    if (part.type !== 'text' && part.type !== 'reasoning') {\n      read = start + ROW_MARK.length;\n      if (shown.length < read) break;\n      revealed.push(part);\n      continue;\n    }\n\n    const written = part.type === 'text' ? part.text : part.reasoning;\n    read = start + written.length;\n\n    const text = shown.slice(start, read);\n    if (text === written) {\n      revealed.push(part);\n      continue;\n    }\n\n    if (text) revealed.push(part.type === 'text' ? { ...part, text } : { ...part, reasoning: text });\n    break;\n  }\n\n  return revealed;\n}\n\n/**\n * A message's parts as far as the reveal has laid them down. Hand the result to\n * `MessageFactory` in place of the message's own parts and the whole reply — prose,\n * reasoning, tool rows, cards — arrives at the pace it was written, from one clock,\n * without a renderer having to know a reveal is running.\n */\nexport function useRevealedParts(parts: MessagePart[], streaming: boolean): MessagePart[] {\n  const shown = useRevealedText(messageScript(parts), streaming);\n\n  return revealedParts(parts, shown);\n}\n"],"names":["useRevealedText"],"mappings":";;;;;;AAOA,MAAM,OAAA,GAAU,MAAA;AAOhB,MAAM,QAAA,GAAW,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,CAAA,EAAE,EAAG,MAAM,GAAG,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAQ9D,SAAS,UAAU,IAAA,EAAuC;AACxD,EAAA,IAAI,IAAA,CAAK,IAAA,KAAS,MAAA,EAAQ,OAAO,IAAA,CAAK,IAAA;AACtC,EAAA,IAAI,IAAA,CAAK,IAAA,KAAS,WAAA,EAAa,OAAO,IAAA,CAAK,SAAA;AAC3C,EAAA,OAAO,MAAA;AACT;AAGO,SAAS,cAAc,KAAA,EAA8B;AAC1D,EAAA,OAAO,KAAA,CAAM,IAAI,CAAA,IAAA,KAAQ,SAAA,CAAU,IAAI,CAAA,IAAK,QAAQ,CAAA,CAAE,IAAA,CAAK,OAAO,CAAA;AACpE;AAWO,SAAS,aAAA,CAAc,OAAsB,KAAA,EAA8B;AAChF,EAAA,MAAM,MAAA,GAAS,cAAc,KAAK,CAAA;AAClC,EAAA,IAAI,KAAA,CAAM,MAAA,IAAU,MAAA,CAAO,MAAA,EAAQ,OAAO,KAAA;AAE1C,EAAA,MAAM,WAA0B,EAAC;AACjC,EAAA,IAAI,IAAA,GAAO,CAAA;AAEX,EAAA,KAAA,MAAW,QAAQ,KAAA,EAAO;AACxB,IAAA,MAAM,KAAA,GAAQ,IAAA,KAAS,CAAA,GAAI,CAAA,GAAI,OAAO,OAAA,CAAQ,MAAA;AAE9C,IAAA,IAAI,IAAA,CAAK,IAAA,KAAS,MAAA,IAAU,IAAA,CAAK,SAAS,WAAA,EAAa;AACrD,MAAA,IAAA,GAAO,QAAQ,QAAA,CAAS,MAAA;AACxB,MAAA,IAAI,KAAA,CAAM,SAAS,IAAA,EAAM;AACzB,MAAA,QAAA,CAAS,KAAK,IAAI,CAAA;AAClB,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,UAAU,IAAA,CAAK,IAAA,KAAS,MAAA,GAAS,IAAA,CAAK,OAAO,IAAA,CAAK,SAAA;AACxD,IAAA,IAAA,GAAO,QAAQ,OAAA,CAAQ,MAAA;AAEvB,IAAA,MAAM,IAAA,GAAO,KAAA,CAAM,KAAA,CAAM,KAAA,EAAO,IAAI,CAAA;AACpC,IAAA,IAAI,SAAS,OAAA,EAAS;AACpB,MAAA,QAAA,CAAS,KAAK,IAAI,CAAA;AAClB,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,MAAM,QAAA,CAAS,IAAA,CAAK,IAAA,CAAK,IAAA,KAAS,SAAS,EAAE,GAAG,IAAA,EAAM,IAAA,KAAS,EAAE,GAAG,IAAA,EAAM,SAAA,EAAW,MAAM,CAAA;AAC/F,IAAA;AAAA,EACF;AAEA,EAAA,OAAO,QAAA;AACT;AAQO,SAAS,gBAAA,CAAiB,OAAsB,SAAA,EAAmC;AACxF,EAAA,MAAM,KAAA,GAAQA,yBAAA,CAAgB,aAAA,CAAc,KAAK,GAAG,SAAS,CAAA;AAE7D,EAAA,OAAO,aAAA,CAAc,OAAO,KAAK,CAAA;AACnC;;;;;;"}

package/dist/components/ai/message-reveal.d.ts

@@ -0,0 +1,2 @@
+export * from '../../src/ds/components/ai/message-reveal/index'
+export {}

package/dist/components/ai/message-reveal.es.js

@@ -0,0 +1,44 @@
+import { u as useRevealedText } from '../../use-reveal-d77hxHz9.js';
+
+const PASSAGE = "\n\n";
+const ROW_MARK = Array.from({ length: 6 }, () => "").join(" ");
+function partProse(part) {
+  if (part.type === "text") return part.text;
+  if (part.type === "reasoning") return part.reasoning;
+  return void 0;
+}
+function messageScript(parts) {
+  return parts.map((part) => partProse(part) ?? ROW_MARK).join(PASSAGE);
+}
+function revealedParts(parts, shown) {
+  const script = messageScript(parts);
+  if (shown.length >= script.length) return parts;
+  const revealed = [];
+  let read = 0;
+  for (const part of parts) {
+    const start = read === 0 ? 0 : read + PASSAGE.length;
+    if (part.type !== "text" && part.type !== "reasoning") {
+      read = start + ROW_MARK.length;
+      if (shown.length < read) break;
+      revealed.push(part);
+      continue;
+    }
+    const written = part.type === "text" ? part.text : part.reasoning;
+    read = start + written.length;
+    const text = shown.slice(start, read);
+    if (text === written) {
+      revealed.push(part);
+      continue;
+    }
+    if (text) revealed.push(part.type === "text" ? { ...part, text } : { ...part, reasoning: text });
+    break;
+  }
+  return revealed;
+}
+function useRevealedParts(parts, streaming) {
+  const shown = useRevealedText(messageScript(parts), streaming);
+  return revealedParts(parts, shown);
+}
+
+export { messageScript, revealedParts, useRevealedParts };
+//# sourceMappingURL=message-reveal.es.js.map

package/dist/components/ai/message-reveal.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-reveal.es.js","sources":["../../../src/ds/components/ai/message-reveal/message-reveal.ts"],"sourcesContent":["import type { MastraDBMessage } from '@mastra/core/agent/message-list';\n\nimport { useRevealedText } from '../../MarkdownRenderer/use-reveal';\n\ntype MessagePart = MastraDBMessage['content']['parts'][number];\n\n/** What separates two passages of prose that were streamed as separate blocks. */\nconst PASSAGE = '\\n\\n';\n\n/**\n * A part that is not prose, written into the reveal's script as words so it takes a\n * beat on the same clock: a burst of parallel tool calls cascades in row by row, at\n * the pace the reply is moving, instead of landing as one block.\n */\nconst ROW_MARK = Array.from({ length: 6 }, () => '').join(' ');\n\n/**\n * The words a part was written as, for the kinds the model writes word by word.\n * Reasoning streams delta by delta exactly like prose, so its passage takes its\n * words' time on the clock rather than one row's beat — a beat would hold the\n * block back whole, then let it land at once and grow unpaced.\n */\nfunction partProse(part: MessagePart): string | undefined {\n  if (part.type === 'text') return part.text;\n  if (part.type === 'reasoning') return part.reasoning;\n  return undefined;\n}\n\n/** What the reveal paces: the whole message, rows and cards written in as beats between the prose. */\nexport function messageScript(parts: MessagePart[]): string {\n  return parts.map(part => partProse(part) ?? ROW_MARK).join(PASSAGE);\n}\n\n/**\n * The parts of a message a reveal has reached, `shown` being a prefix of the script.\n *\n * A reply is not only prose: a tool row, a card, a reasoning block sit between its\n * passages, and they were written in that order. Pacing the prose alone would lay a\n * sentence down word by word while the row that follows it is already on screen — so\n * every part waits its turn on the one clock, and the reader is handed the answer in\n * the order it was written.\n */\nexport function revealedParts(parts: MessagePart[], shown: string): MessagePart[] {\n  const script = messageScript(parts);\n  if (shown.length >= script.length) return parts;\n\n  const revealed: MessagePart[] = [];\n  let read = 0;\n\n  for (const part of parts) {\n    const start = read === 0 ? 0 : read + PASSAGE.length;\n\n    if (part.type !== 'text' && part.type !== 'reasoning') {\n      read = start + ROW_MARK.length;\n      if (shown.length < read) break;\n      revealed.push(part);\n      continue;\n    }\n\n    const written = part.type === 'text' ? part.text : part.reasoning;\n    read = start + written.length;\n\n    const text = shown.slice(start, read);\n    if (text === written) {\n      revealed.push(part);\n      continue;\n    }\n\n    if (text) revealed.push(part.type === 'text' ? { ...part, text } : { ...part, reasoning: text });\n    break;\n  }\n\n  return revealed;\n}\n\n/**\n * A message's parts as far as the reveal has laid them down. Hand the result to\n * `MessageFactory` in place of the message's own parts and the whole reply — prose,\n * reasoning, tool rows, cards — arrives at the pace it was written, from one clock,\n * without a renderer having to know a reveal is running.\n */\nexport function useRevealedParts(parts: MessagePart[], streaming: boolean): MessagePart[] {\n  const shown = useRevealedText(messageScript(parts), streaming);\n\n  return revealedParts(parts, shown);\n}\n"],"names":[],"mappings":";;AAOA,MAAM,OAAA,GAAU,MAAA;AAOhB,MAAM,QAAA,GAAW,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,CAAA,EAAE,EAAG,MAAM,GAAG,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAQ9D,SAAS,UAAU,IAAA,EAAuC;AACxD,EAAA,IAAI,IAAA,CAAK,IAAA,KAAS,MAAA,EAAQ,OAAO,IAAA,CAAK,IAAA;AACtC,EAAA,IAAI,IAAA,CAAK,IAAA,KAAS,WAAA,EAAa,OAAO,IAAA,CAAK,SAAA;AAC3C,EAAA,OAAO,MAAA;AACT;AAGO,SAAS,cAAc,KAAA,EAA8B;AAC1D,EAAA,OAAO,KAAA,CAAM,IAAI,CAAA,IAAA,KAAQ,SAAA,CAAU,IAAI,CAAA,IAAK,QAAQ,CAAA,CAAE,IAAA,CAAK,OAAO,CAAA;AACpE;AAWO,SAAS,aAAA,CAAc,OAAsB,KAAA,EAA8B;AAChF,EAAA,MAAM,MAAA,GAAS,cAAc,KAAK,CAAA;AAClC,EAAA,IAAI,KAAA,CAAM,MAAA,IAAU,MAAA,CAAO,MAAA,EAAQ,OAAO,KAAA;AAE1C,EAAA,MAAM,WAA0B,EAAC;AACjC,EAAA,IAAI,IAAA,GAAO,CAAA;AAEX,EAAA,KAAA,MAAW,QAAQ,KAAA,EAAO;AACxB,IAAA,MAAM,KAAA,GAAQ,IAAA,KAAS,CAAA,GAAI,CAAA,GAAI,OAAO,OAAA,CAAQ,MAAA;AAE9C,IAAA,IAAI,IAAA,CAAK,IAAA,KAAS,MAAA,IAAU,IAAA,CAAK,SAAS,WAAA,EAAa;AACrD,MAAA,IAAA,GAAO,QAAQ,QAAA,CAAS,MAAA;AACxB,MAAA,IAAI,KAAA,CAAM,SAAS,IAAA,EAAM;AACzB,MAAA,QAAA,CAAS,KAAK,IAAI,CAAA;AAClB,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,UAAU,IAAA,CAAK,IAAA,KAAS,MAAA,GAAS,IAAA,CAAK,OAAO,IAAA,CAAK,SAAA;AACxD,IAAA,IAAA,GAAO,QAAQ,OAAA,CAAQ,MAAA;AAEvB,IAAA,MAAM,IAAA,GAAO,KAAA,CAAM,KAAA,CAAM,KAAA,EAAO,IAAI,CAAA;AACpC,IAAA,IAAI,SAAS,OAAA,EAAS;AACpB,MAAA,QAAA,CAAS,KAAK,IAAI,CAAA;AAClB,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,MAAM,QAAA,CAAS,IAAA,CAAK,IAAA,CAAK,IAAA,KAAS,SAAS,EAAE,GAAG,IAAA,EAAM,IAAA,KAAS,EAAE,GAAG,IAAA,EAAM,SAAA,EAAW,MAAM,CAAA;AAC/F,IAAA;AAAA,EACF;AAEA,EAAA,OAAO,QAAA;AACT;AAQO,SAAS,gBAAA,CAAiB,OAAsB,SAAA,EAAmC;AACxF,EAAA,MAAM,KAAA,GAAQ,eAAA,CAAgB,aAAA,CAAc,KAAK,GAAG,SAAS,CAAA;AAE7D,EAAA,OAAO,aAAA,CAAc,OAAO,KAAK,CAAA;AACnC;;;;"}

package/dist/src/ds/components/Arrival/arrival.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ArrivalScope } from './arrival';
+declare const meta: Meta<typeof ArrivalScope>;
+export default meta;
+type Story = StoryObj<typeof ArrivalScope>;
+export declare const ExistingAndNewContent: Story;

package/dist/src/ds/components/Card/card.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Card } from './Card';
+declare const meta: Meta<typeof Card>;
+export default meta;
+type Story = StoryObj<typeof Card>;
+export declare const Default: Story;
+export declare const AppearancesAndElevation: Story;
+export declare const InteractiveLinks: Story;

package/dist/src/ds/components/Columns/columns.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Columns } from './index';
+declare const meta: Meta<typeof Columns>;
+export default meta;
+type Story = StoryObj<typeof Columns>;
+export declare const ResponsiveGrid: Story;
+export declare const HorizontallyScrollable: Story;

package/dist/src/ds/components/DataDetailsPanel/data-details-panel.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { DataDetailsPanel } from './index';
+declare const meta: Meta<typeof DataDetailsPanel>;
+export default meta;
+type Story = StoryObj<typeof DataDetailsPanel>;
+export declare const Populated: Story;
+export declare const Loading: Story;
+export declare const Empty: Story;
+export declare const Collapsed: Story;

package/dist/src/ds/components/DataFilter/select-data-filter.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { SelectDataFilter } from './select-data-filter';
+declare const meta: Meta<typeof SelectDataFilter>;
+export default meta;
+type Story = StoryObj<typeof SelectDataFilter>;
+export declare const Default: Story;
+export declare const WithActiveFilters: Story;
+export declare const Disabled: Story;

package/dist/src/ds/components/DateRangeTimeline/date-range-timeline.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { DateRangeTimeline } from './DateRangeTimeline';
+declare const meta: Meta<typeof DateRangeTimeline>;
+export default meta;
+type Story = StoryObj<typeof DateRangeTimeline>;
+export declare const Default: Story;
+export declare const SingleDay: Story;
+export declare const MultiYear: Story;

package/dist/src/ds/components/ErrorState/error-state.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ErrorState } from './ErrorState';
+declare const meta: Meta<typeof ErrorState>;
+export default meta;
+type Story = StoryObj<typeof ErrorState>;
+export declare const Default: Story;
+export declare const WithRecoveryAction: Story;

package/dist/src/ds/components/ListSearch/list-search.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ListSearch } from './list-search';
+declare const meta: Meta<typeof ListSearch>;
+export default meta;
+type Story = StoryObj<typeof ListSearch>;
+export declare const Default: Story;
+export declare const PresetValue: Story;

package/dist/src/ds/components/LogsDataList/logs-data-list.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { LogsDataList } from './index';
+declare const meta: Meta<typeof LogsDataList>;
+export default meta;
+type Story = StoryObj<typeof LogsDataList>;
+export declare const Populated: Story;
+export declare const NoMatches: Story;
+export declare const Loading: Story;

package/dist/src/ds/components/MessageScroller/message-scroller.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { MessageScroller } from './message-scroller';
+declare const meta: Meta<typeof MessageScroller>;
+export default meta;
+type Story = StoryObj<typeof MessageScroller>;
+export declare const Conversation: Story;
+export declare const AutoFollow: Story;

package/dist/src/ds/components/MetricsLineChart/metrics-line-chart.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { MetricsLineChart } from './metrics-line-chart';
+declare const meta: Meta<typeof MetricsLineChart>;
+export default meta;
+type Story = StoryObj<typeof MetricsLineChart>;
+export declare const MultipleSeries: Story;
+export declare const SinglePoint: Story;
+export declare const FixedDomain: Story;

package/dist/src/ds/components/PageHeader/page-header.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { PageHeader } from './page-header';
+declare const meta: Meta<typeof PageHeader>;
+export default meta;
+type Story = StoryObj<typeof PageHeader>;
+export declare const Default: Story;
+export declare const Loading: Story;
+export declare const SmallerTitle: Story;

package/dist/src/ds/components/PageLayout/page-layout.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { PageLayout } from './index';
+declare const meta: Meta<typeof PageLayout>;
+export default meta;
+type Story = StoryObj<typeof PageLayout>;
+export declare const FullPage: Story;
+export declare const NarrowSettings: Story;
+export declare const CenteredEmptyState: Story;

package/dist/src/ds/components/PendingIndicator/pending-indicator.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { PendingIndicator } from './pending-indicator';
+declare const meta: Meta<typeof PendingIndicator>;
+export default meta;
+type Story = StoryObj<typeof PendingIndicator>;
+export declare const Default: Story;
+export declare const InConversation: Story;

package/dist/src/ds/components/PermissionDenied/permission-denied.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { PermissionDenied } from './PermissionDenied';
+declare const meta: Meta<typeof PermissionDenied>;
+export default meta;
+type Story = StoryObj<typeof PermissionDenied>;
+export declare const Default: Story;
+export declare const ResourceSpecific: Story;
+export declare const CustomRecovery: Story;

package/dist/src/ds/components/PrevNextNav/prev-next-nav.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { PrevNextNav } from './prev-next-nav';
+declare const meta: Meta<typeof PrevNextNav>;
+export default meta;
+type Story = StoryObj<typeof PrevNextNav>;
+export declare const BetweenItems: Story;
+export declare const FirstItem: Story;
+export declare const LastItem: Story;

package/dist/src/ds/components/SessionExpired/session-expired.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { SessionExpired } from './SessionExpired';
+declare const meta: Meta<typeof SessionExpired>;
+export default meta;
+type Story = StoryObj<typeof SessionExpired>;
+export declare const Default: Story;
+export declare const CustomCopy: Story;

package/dist/src/ds/components/Shimmer/shimmer.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Shimmer } from './shimmer';
+declare const meta: Meta<typeof Shimmer>;
+export default meta;
+type Story = StoryObj<typeof Shimmer>;
+export declare const Default: Story;
+export declare const ActiveToSettled: Story;

package/dist/src/ds/components/StatusBadge/status-badge.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { StatusBadge } from './StatusBadge';
+declare const meta: Meta<typeof StatusBadge>;
+export default meta;
+type Story = StoryObj<typeof StatusBadge>;
+export declare const Default: Story;
+export declare const Variants: Story;
+export declare const SizesAndPulse: Story;

package/dist/src/ds/components/ThreadList/thread-list.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ThreadList } from './thread-list';
+declare const meta: Meta<typeof ThreadList>;
+export default meta;
+type Story = StoryObj<typeof ThreadList>;
+export declare const Default: Story;
+export declare const Embedded: Story;
+export declare const Empty: Story;

package/dist/src/ds/components/ThreadRail/thread-rail.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ThreadRail } from './thread-rail';
+declare const meta: Meta<typeof ThreadRail>;
+export default meta;
+type Story = StoryObj<typeof ThreadRail>;
+export declare const ConversationTimeline: Story;
+export declare const Empty: Story;

package/dist/src/ds/components/TokenBudget/token-budget.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { TokenBudget } from './token-budget';
+declare const meta: Meta<typeof TokenBudget>;
+export default meta;
+type Story = StoryObj<typeof TokenBudget>;
+export declare const Default: Story;
+export declare const Budgets: Story;
+export declare const Details: Story;

package/dist/src/ds/components/ai/message-reveal/index.d.ts

@@ -0,0 +1 @@
+export * from './message-reveal';

package/dist/src/ds/components/ai/message-reveal/message-reveal.d.ts

@@ -0,0 +1,22 @@
+import { MastraDBMessage } from '@mastra/core/agent/message-list';
+type MessagePart = MastraDBMessage['content']['parts'][number];
+/** What the reveal paces: the whole message, rows and cards written in as beats between the prose. */
+export declare function messageScript(parts: MessagePart[]): string;
+/**
+ * The parts of a message a reveal has reached, `shown` being a prefix of the script.
+ *
+ * A reply is not only prose: a tool row, a card, a reasoning block sit between its
+ * passages, and they were written in that order. Pacing the prose alone would lay a
+ * sentence down word by word while the row that follows it is already on screen — so
+ * every part waits its turn on the one clock, and the reader is handed the answer in
+ * the order it was written.
+ */
+export declare function revealedParts(parts: MessagePart[], shown: string): MessagePart[];
+/**
+ * A message's parts as far as the reveal has laid them down. Hand the result to
+ * `MessageFactory` in place of the message's own parts and the whole reply — prose,
+ * reasoning, tool rows, cards — arrives at the pace it was written, from one clock,
+ * without a renderer having to know a reveal is running.
+ */
+export declare function useRevealedParts(parts: MessagePart[], streaming: boolean): MessagePart[];
+export {};

package/dist/style.css

@@ -1621,6 +1621,10 @@
     margin-right: var(--spacing-8);
   }
 
+  .mr-12 {
+    margin-right: var(--spacing-12);
+  }
+
   .-mb-12 {
     margin-bottom: calc(var(--spacing-12) * -1);
   }
@@ -1706,6 +1710,14 @@
     margin-left: var(--spacing-8);
   }
 
+  .ml-10 {
+    margin-left: var(--spacing-10);
+  }
+
+  .ml-12 {
+    margin-left: var(--spacing-12);
+  }
+
   .ml-\[14px\] {
     margin-left: 14px;
   }
@@ -1988,6 +2000,10 @@
     height: var(--spacing-40);
   }
 
+  .h-56 {
+    height: var(--spacing-56);
+  }
+
   .h-60 {
     height: var(--spacing-60);
   }
@@ -1996,10 +2012,18 @@
     height: var(--spacing-64);
   }
 
+  .h-72 {
+    height: var(--spacing-72);
+  }
+
   .h-80 {
     height: var(--spacing-80);
   }
 
+  .h-96 {
+    height: var(--spacing-96);
+  }
+
   .h-\[1\.8rem\] {
     height: 1.8rem;
   }
@@ -2012,6 +2036,22 @@
     height: 30vh;
   }
 
+  .h-\[32rem\] {
+    height: 32rem;
+  }
+
+  .h-\[34rem\] {
+    height: 34rem;
+  }
+
+  .h-\[36rem\] {
+    height: 36rem;
+  }
+
+  .h-\[38rem\] {
+    height: 38rem;
+  }
+
   .h-\[160px\] {
     height: 160px;
   }
@@ -2241,10 +2281,18 @@
     min-height: var(--spacing-60);
   }
 
+  .min-h-64 {
+    min-height: var(--spacing-64);
+  }
+
   .min-h-72 {
     min-height: var(--spacing-72);
   }
 
+  .min-h-\[34rem\] {
+    min-height: 34rem;
+  }
+
   .min-h-\[70cqh\] {
     min-height: 70cqh;
   }
@@ -2501,6 +2549,30 @@
     width: calc(100vw - 2rem);
   }
 
+  .w-\[min\(24rem\,calc\(100vw-2rem\)\)\] {
+    width: min(24rem, 100vw - 2rem);
+  }
+
+  .w-\[min\(34rem\,calc\(100vw-3rem\)\)\] {
+    width: min(34rem, 100vw - 3rem);
+  }
+
+  .w-\[min\(42rem\,calc\(100vw-3rem\)\)\] {
+    width: min(42rem, 100vw - 3rem);
+  }
+
+  .w-\[min\(44rem\,calc\(100vw-2rem\)\)\] {
+    width: min(44rem, 100vw - 2rem);
+  }
+
+  .w-\[min\(48rem\,calc\(100vw-3rem\)\)\] {
+    width: min(48rem, 100vw - 3rem);
+  }
+
+  .w-\[min\(52rem\,calc\(100vw-3rem\)\)\] {
+    width: min(52rem, 100vw - 3rem);
+  }
+
   .w-\[var\(--active-tab-width\)\] {
     width: var(--active-tab-width);
   }
@@ -9268,6 +9340,14 @@
       max-height: none;
     }
 
+    .md\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .md\:grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
     .md\:grid-cols-\[13rem_minmax\(0\,1fr\)\] {
       grid-template-columns: 13rem minmax(0, 1fr);
     }

package/dist/use-reveal-Sa456jZb.cjs

@@ -0,0 +1,70 @@
+'use strict';
+
+const React = require('react');
+
+const BUFFER_MS = 1e3;
+const CORRECT_MS = 1e3;
+const FLOW_MS = 700;
+const EASE_MS = 400;
+const SLOWEST = 10;
+const FASTEST = 60;
+const MAX_LAG = 300;
+function measure(flow, now, gained) {
+  const elapsed = Math.max(0, now - flow.at);
+  flow.rate = flow.rate * Math.exp(-elapsed / FLOW_MS) + gained / (FLOW_MS / 1e3);
+  flow.at = Math.max(flow.at, now);
+  return flow.rate;
+}
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function wordStops(text) {
+  const stops = [0];
+  const word = /\S+/g;
+  for (let match = word.exec(text); match; match = word.exec(text)) stops.push(match.index + match[0].length);
+  return stops;
+}
+function useRevealedText(text, streaming) {
+  const [calm] = React.useState(prefersReducedMotion);
+  const stops = React.useMemo(() => wordStops(text), [text]);
+  const words = stops.length - 1;
+  const [landed, setLanded] = React.useState(() => streaming && !calm ? 0 : words);
+  const shown = calm ? words : Math.min(words, Math.max(landed, words - MAX_LAG));
+  if (shown !== landed) setLanded(shown);
+  const chasing = shown < words;
+  const goal = React.useRef(words);
+  const cursor = React.useRef(shown);
+  const flow = React.useRef({ rate: 0, at: 0 });
+  const pace = React.useRef(SLOWEST);
+  React.useEffect(() => {
+    measure(flow.current, performance.now(), Math.max(0, words - goal.current));
+    goal.current = words;
+    if (cursor.current < shown || cursor.current > words) cursor.current = shown;
+  });
+  React.useEffect(() => {
+    if (!chasing) return;
+    let drawn = performance.now();
+    let frame = requestAnimationFrame(function step(now) {
+      const elapsed = Math.max(0, now - drawn);
+      drawn = Math.max(drawn, now);
+      const arriving = measure(flow.current, now, 0);
+      const from = cursor.current;
+      const behind = goal.current - from;
+      if (behind > 0) {
+        const held = arriving * BUFFER_MS / 1e3;
+        const aim = Math.min(FASTEST, Math.max(SLOWEST, arriving + (behind - held) * 1e3 / CORRECT_MS));
+        pace.current += (aim - pace.current) * Math.min(1, elapsed / EASE_MS);
+        cursor.current = Math.min(goal.current, Math.floor(from) + 1, from + elapsed * pace.current / 1e3);
+        if (Math.floor(cursor.current) !== Math.floor(from)) setLanded(Math.floor(cursor.current));
+      }
+      frame = requestAnimationFrame(step);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [chasing]);
+  if (!chasing) return text;
+  return text.slice(0, stops[shown]);
+}
+
+exports.useRevealedText = useRevealedText;
+//# sourceMappingURL=use-reveal-Sa456jZb.cjs.map

package/dist/use-reveal-Sa456jZb.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-reveal-Sa456jZb.cjs","sources":["../src/ds/components/MarkdownRenderer/use-reveal.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\n\n/** How much of the reply the reveal aims to be holding back, as time at the speed it is playing. */\nconst BUFFER_MS = 1000;\n\n/** How long it takes to work off a buffer that is too full or too empty. */\nconst CORRECT_MS = 1000;\n\n/** How long a word keeps counting towards the speed the reply is arriving at. */\nconst FLOW_MS = 700;\n\n/** How long the reveal takes to adopt a new speed, so a change of pace is never a jolt. */\nconst EASE_MS = 400;\n\n/** Words per second it will not go below: a short burst between two tool calls still reads briskly. */\nconst SLOWEST = 10;\n\n/** Words per second it will not go past: one word a frame, all a screen can draw. */\nconst FASTEST = 60;\n\n/** Words it will never fall further behind than — about five seconds at full speed. */\nconst MAX_LAG = 300;\n\ninterface Flow {\n  /** Words per second the reply is arriving at, as an exponential average. */\n  rate: number;\n  at: number;\n}\n\n/** Decays what earlier words still count for, then deposits the ones that just arrived. */\nfunction measure(flow: Flow, now: number, gained: number): number {\n  // rAF timestamps and performance.now() are sampled at different points of a\n  // frame, so a fresh loop can read time slightly behind the last deposit.\n  const elapsed = Math.max(0, now - flow.at);\n  flow.rate = flow.rate * Math.exp(-elapsed / FLOW_MS) + gained / (FLOW_MS / 1000);\n  flow.at = Math.max(flow.at, now);\n\n  return flow.rate;\n}\n\nfunction prefersReducedMotion(): boolean {\n  if (typeof window === 'undefined' || !window.matchMedia) return false;\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/** Where the reveal can cut the text: before the first word, then after each one. */\nfunction wordStops(text: string): number[] {\n  const stops = [0];\n  const word = /\\S+/g;\n\n  for (let match = word.exec(text); match; match = word.exec(text)) stops.push(match.index + match[0].length);\n\n  return stops;\n}\n\n/**\n * A jitter buffer for a streamed reply, counted in words. Chunks reach the\n * browser unevenly — a proxy flushes, a tool call ends, the model changes pace —\n * and drawing each one on arrival makes a reply lurch: ten words at once, then\n * nothing for a fifth of a second.\n *\n * So the reveal runs on its own clock: a frame loop that chunks never interrupt,\n * laying down at most one word per frame however far behind it is. It plays at\n * the speed the reply is arriving at, measured directly, and leans on that only\n * to work the buffer back to `BUFFER_MS` of held text when it drifts. Measuring\n * the speed rather than inferring it from the buffer is what lets the buffer stay\n * shallow: a reply that lasts two seconds still finds its pace in the first few\n * hundred milliseconds, where a deeper buffer would spend the whole reply filling\n * and then sprint to catch up.\n *\n * The reply it paces is whatever the caller hands it, so a caller with more than\n * prose to lay down — a tool row between two paragraphs — paces the whole of it\n * from one place and draws the rest against the same cursor.\n *\n * Nothing here reads `streaming` past the first render: a reply that stops\n * arriving is one whose measured speed decays, which winds the buffer down on its\n * own. Words, not characters, are what a reader sees land, and they are not the\n * same length: an even flow of characters still drops \"and if we do\" in one frame\n * and spends four on \"implementation\".\n */\nexport function useRevealedText(text: string, streaming: boolean): string {\n  const [calm] = useState(prefersReducedMotion);\n  const stops = useMemo(() => wordStops(text), [text]);\n  const words = stops.length - 1;\n\n  const [landed, setLanded] = useState(() => (streaming && !calm ? 0 : words));\n\n  // Winds the cursor back when a shorter reply replaces the one on screen, which\n  // no key can express: same element, same message, new text.\n  const shown = calm ? words : Math.min(words, Math.max(landed, words - MAX_LAG));\n  if (shown !== landed) setLanded(shown);\n\n  const chasing = shown < words;\n  const goal = useRef(words);\n  const cursor = useRef(shown);\n  const flow = useRef<Flow>({ rate: 0, at: 0 });\n  const pace = useRef(SLOWEST);\n\n  useEffect(() => {\n    measure(flow.current, performance.now(), Math.max(0, words - goal.current));\n    goal.current = words;\n\n    if (cursor.current < shown || cursor.current > words) cursor.current = shown;\n  });\n\n  useEffect(() => {\n    if (!chasing) return;\n\n    let drawn = performance.now();\n    let frame = requestAnimationFrame(function step(now) {\n      const elapsed = Math.max(0, now - drawn);\n      drawn = Math.max(drawn, now);\n\n      const arriving = measure(flow.current, now, 0);\n      const from = cursor.current;\n      const behind = goal.current - from;\n\n      if (behind > 0) {\n        const held = (arriving * BUFFER_MS) / 1000;\n        const aim = Math.min(FASTEST, Math.max(SLOWEST, arriving + ((behind - held) * 1000) / CORRECT_MS));\n\n        pace.current += (aim - pace.current) * Math.min(1, elapsed / EASE_MS);\n        cursor.current = Math.min(goal.current, Math.floor(from) + 1, from + (elapsed * pace.current) / 1000);\n\n        if (Math.floor(cursor.current) !== Math.floor(from)) setLanded(Math.floor(cursor.current));\n      }\n\n      frame = requestAnimationFrame(step);\n    });\n\n    return () => cancelAnimationFrame(frame);\n  }, [chasing]);\n\n  if (!chasing) return text;\n\n  return text.slice(0, stops[shown]);\n}\n"],"names":["useState","useMemo","useRef","useEffect"],"mappings":";;;;AAGA,MAAM,SAAA,GAAY,GAAA;AAGlB,MAAM,UAAA,GAAa,GAAA;AAGnB,MAAM,OAAA,GAAU,GAAA;AAGhB,MAAM,OAAA,GAAU,GAAA;AAGhB,MAAM,OAAA,GAAU,EAAA;AAGhB,MAAM,OAAA,GAAU,EAAA;AAGhB,MAAM,OAAA,GAAU,GAAA;AAShB,SAAS,OAAA,CAAQ,IAAA,EAAY,GAAA,EAAa,MAAA,EAAwB;AAGhE,EAAA,MAAM,UAAU,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,GAAA,GAAM,KAAK,EAAE,CAAA;AACzC,EAAA,IAAA,CAAK,IAAA,GAAO,IAAA,CAAK,IAAA,GAAO,IAAA,CAAK,GAAA,CAAI,CAAC,OAAA,GAAU,OAAO,CAAA,GAAI,MAAA,IAAU,OAAA,GAAU,GAAA,CAAA;AAC3E,EAAA,IAAA,CAAK,EAAA,GAAK,IAAA,CAAK,GAAA,CAAI,IAAA,CAAK,IAAI,GAAG,CAAA;AAE/B,EAAA,OAAO,IAAA,CAAK,IAAA;AACd;AAEA,SAAS,oBAAA,GAAgC;AACvC,EAAA,IAAI,OAAO,MAAA,KAAW,WAAA,IAAe,CAAC,MAAA,CAAO,YAAY,OAAO,KAAA;AAChE,EAAA,OAAO,MAAA,CAAO,UAAA,CAAW,kCAAkC,CAAA,CAAE,OAAA;AAC/D;AAGA,SAAS,UAAU,IAAA,EAAwB;AACzC,EAAA,MAAM,KAAA,GAAQ,CAAC,CAAC,CAAA;AAChB,EAAA,MAAM,IAAA,GAAO,MAAA;AAEb,EAAA,KAAA,IAAS,QAAQ,IAAA,CAAK,IAAA,CAAK,IAAI,CAAA,EAAG,KAAA,EAAO,QAAQ,IAAA,CAAK,IAAA,CAAK,IAAI,CAAA,QAAS,IAAA,CAAK,KAAA,CAAM,QAAQ,KAAA,CAAM,CAAC,EAAE,MAAM,CAAA;AAE1G,EAAA,OAAO,KAAA;AACT;AA2BO,SAAS,eAAA,CAAgB,MAAc,SAAA,EAA4B;AACxE,EAAA,MAAM,CAAC,IAAI,CAAA,GAAIA,cAAA,CAAS,oBAAoB,CAAA;AAC5C,EAAA,MAAM,KAAA,GAAQC,cAAQ,MAAM,SAAA,CAAU,IAAI,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AACnD,EAAA,MAAM,KAAA,GAAQ,MAAM,MAAA,GAAS,CAAA;AAE7B,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAID,cAAA,CAAS,MAAO,SAAA,IAAa,CAAC,IAAA,GAAO,CAAA,GAAI,KAAM,CAAA;AAI3E,EAAA,MAAM,KAAA,GAAQ,IAAA,GAAO,KAAA,GAAQ,IAAA,CAAK,GAAA,CAAI,KAAA,EAAO,IAAA,CAAK,GAAA,CAAI,MAAA,EAAQ,KAAA,GAAQ,OAAO,CAAC,CAAA;AAC9E,EAAA,IAAI,KAAA,KAAU,MAAA,EAAQ,SAAA,CAAU,KAAK,CAAA;AAErC,EAAA,MAAM,UAAU,KAAA,GAAQ,KAAA;AACxB,EAAA,MAAM,IAAA,GAAOE,aAAO,KAAK,CAAA;AACzB,EAAA,MAAM,MAAA,GAASA,aAAO,KAAK,CAAA;AAC3B,EAAA,MAAM,OAAOA,YAAA,CAAa,EAAE,MAAM,CAAA,EAAG,EAAA,EAAI,GAAG,CAAA;AAC5C,EAAA,MAAM,IAAA,GAAOA,aAAO,OAAO,CAAA;AAE3B,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,IAAA,CAAK,OAAA,EAAS,WAAA,CAAY,GAAA,EAAI,EAAG,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,KAAA,GAAQ,IAAA,CAAK,OAAO,CAAC,CAAA;AAC1E,IAAA,IAAA,CAAK,OAAA,GAAU,KAAA;AAEf,IAAA,IAAI,OAAO,OAAA,GAAU,KAAA,IAAS,OAAO,OAAA,GAAU,KAAA,SAAc,OAAA,GAAU,KAAA;AAAA,EACzE,CAAC,CAAA;AAED,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAA,EAAS;AAEd,IAAA,IAAI,KAAA,GAAQ,YAAY,GAAA,EAAI;AAC5B,IAAA,IAAI,KAAA,GAAQ,qBAAA,CAAsB,SAAS,IAAA,CAAK,GAAA,EAAK;AACnD,MAAA,MAAM,OAAA,GAAU,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,MAAM,KAAK,CAAA;AACvC,MAAA,KAAA,GAAQ,IAAA,CAAK,GAAA,CAAI,KAAA,EAAO,GAAG,CAAA;AAE3B,MAAA,MAAM,QAAA,GAAW,OAAA,CAAQ,IAAA,CAAK,OAAA,EAAS,KAAK,CAAC,CAAA;AAC7C,MAAA,MAAM,OAAO,MAAA,CAAO,OAAA;AACpB,MAAA,MAAM,MAAA,GAAS,KAAK,OAAA,GAAU,IAAA;AAE9B,MAAA,IAAI,SAAS,CAAA,EAAG;AACd,QAAA,MAAM,IAAA,GAAQ,WAAW,SAAA,GAAa,GAAA;AACtC,QAAA,MAAM,GAAA,GAAM,IAAA,CAAK,GAAA,CAAI,OAAA,EAAS,IAAA,CAAK,GAAA,CAAI,OAAA,EAAS,QAAA,GAAA,CAAa,MAAA,GAAS,IAAA,IAAQ,GAAA,GAAQ,UAAU,CAAC,CAAA;AAEjG,QAAA,IAAA,CAAK,OAAA,IAAA,CAAY,MAAM,IAAA,CAAK,OAAA,IAAW,KAAK,GAAA,CAAI,CAAA,EAAG,UAAU,OAAO,CAAA;AACpE,QAAA,MAAA,CAAO,OAAA,GAAU,IAAA,CAAK,GAAA,CAAI,IAAA,CAAK,SAAS,IAAA,CAAK,KAAA,CAAM,IAAI,CAAA,GAAI,CAAA,EAAG,IAAA,GAAQ,OAAA,GAAU,IAAA,CAAK,UAAW,GAAI,CAAA;AAEpG,QAAA,IAAI,IAAA,CAAK,KAAA,CAAM,MAAA,CAAO,OAAO,MAAM,IAAA,CAAK,KAAA,CAAM,IAAI,CAAA,EAAG,SAAA,CAAU,IAAA,CAAK,KAAA,CAAM,MAAA,CAAO,OAAO,CAAC,CAAA;AAAA,MAC3F;AAEA,MAAA,KAAA,GAAQ,sBAAsB,IAAI,CAAA;AAAA,IACpC,CAAC,CAAA;AAED,IAAA,OAAO,MAAM,qBAAqB,KAAK,CAAA;AAAA,EACzC,CAAA,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAA,IAAI,CAAC,SAAS,OAAO,IAAA;AAErB,EAAA,OAAO,IAAA,CAAK,KAAA,CAAM,CAAA,EAAG,KAAA,CAAM,KAAK,CAAC,CAAA;AACnC;;;;"}

package/dist/use-reveal-d77hxHz9.js

@@ -0,0 +1,68 @@
+import { useState, useMemo, useRef, useEffect } from 'react';
+
+const BUFFER_MS = 1e3;
+const CORRECT_MS = 1e3;
+const FLOW_MS = 700;
+const EASE_MS = 400;
+const SLOWEST = 10;
+const FASTEST = 60;
+const MAX_LAG = 300;
+function measure(flow, now, gained) {
+  const elapsed = Math.max(0, now - flow.at);
+  flow.rate = flow.rate * Math.exp(-elapsed / FLOW_MS) + gained / (FLOW_MS / 1e3);
+  flow.at = Math.max(flow.at, now);
+  return flow.rate;
+}
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function wordStops(text) {
+  const stops = [0];
+  const word = /\S+/g;
+  for (let match = word.exec(text); match; match = word.exec(text)) stops.push(match.index + match[0].length);
+  return stops;
+}
+function useRevealedText(text, streaming) {
+  const [calm] = useState(prefersReducedMotion);
+  const stops = useMemo(() => wordStops(text), [text]);
+  const words = stops.length - 1;
+  const [landed, setLanded] = useState(() => streaming && !calm ? 0 : words);
+  const shown = calm ? words : Math.min(words, Math.max(landed, words - MAX_LAG));
+  if (shown !== landed) setLanded(shown);
+  const chasing = shown < words;
+  const goal = useRef(words);
+  const cursor = useRef(shown);
+  const flow = useRef({ rate: 0, at: 0 });
+  const pace = useRef(SLOWEST);
+  useEffect(() => {
+    measure(flow.current, performance.now(), Math.max(0, words - goal.current));
+    goal.current = words;
+    if (cursor.current < shown || cursor.current > words) cursor.current = shown;
+  });
+  useEffect(() => {
+    if (!chasing) return;
+    let drawn = performance.now();
+    let frame = requestAnimationFrame(function step(now) {
+      const elapsed = Math.max(0, now - drawn);
+      drawn = Math.max(drawn, now);
+      const arriving = measure(flow.current, now, 0);
+      const from = cursor.current;
+      const behind = goal.current - from;
+      if (behind > 0) {
+        const held = arriving * BUFFER_MS / 1e3;
+        const aim = Math.min(FASTEST, Math.max(SLOWEST, arriving + (behind - held) * 1e3 / CORRECT_MS));
+        pace.current += (aim - pace.current) * Math.min(1, elapsed / EASE_MS);
+        cursor.current = Math.min(goal.current, Math.floor(from) + 1, from + elapsed * pace.current / 1e3);
+        if (Math.floor(cursor.current) !== Math.floor(from)) setLanded(Math.floor(cursor.current));
+      }
+      frame = requestAnimationFrame(step);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [chasing]);
+  if (!chasing) return text;
+  return text.slice(0, stops[shown]);
+}
+
+export { useRevealedText as u };
+//# sourceMappingURL=use-reveal-d77hxHz9.js.map

package/dist/use-reveal-d77hxHz9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-reveal-d77hxHz9.js","sources":["../src/ds/components/MarkdownRenderer/use-reveal.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\n\n/** How much of the reply the reveal aims to be holding back, as time at the speed it is playing. */\nconst BUFFER_MS = 1000;\n\n/** How long it takes to work off a buffer that is too full or too empty. */\nconst CORRECT_MS = 1000;\n\n/** How long a word keeps counting towards the speed the reply is arriving at. */\nconst FLOW_MS = 700;\n\n/** How long the reveal takes to adopt a new speed, so a change of pace is never a jolt. */\nconst EASE_MS = 400;\n\n/** Words per second it will not go below: a short burst between two tool calls still reads briskly. */\nconst SLOWEST = 10;\n\n/** Words per second it will not go past: one word a frame, all a screen can draw. */\nconst FASTEST = 60;\n\n/** Words it will never fall further behind than — about five seconds at full speed. */\nconst MAX_LAG = 300;\n\ninterface Flow {\n  /** Words per second the reply is arriving at, as an exponential average. */\n  rate: number;\n  at: number;\n}\n\n/** Decays what earlier words still count for, then deposits the ones that just arrived. */\nfunction measure(flow: Flow, now: number, gained: number): number {\n  // rAF timestamps and performance.now() are sampled at different points of a\n  // frame, so a fresh loop can read time slightly behind the last deposit.\n  const elapsed = Math.max(0, now - flow.at);\n  flow.rate = flow.rate * Math.exp(-elapsed / FLOW_MS) + gained / (FLOW_MS / 1000);\n  flow.at = Math.max(flow.at, now);\n\n  return flow.rate;\n}\n\nfunction prefersReducedMotion(): boolean {\n  if (typeof window === 'undefined' || !window.matchMedia) return false;\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/** Where the reveal can cut the text: before the first word, then after each one. */\nfunction wordStops(text: string): number[] {\n  const stops = [0];\n  const word = /\\S+/g;\n\n  for (let match = word.exec(text); match; match = word.exec(text)) stops.push(match.index + match[0].length);\n\n  return stops;\n}\n\n/**\n * A jitter buffer for a streamed reply, counted in words. Chunks reach the\n * browser unevenly — a proxy flushes, a tool call ends, the model changes pace —\n * and drawing each one on arrival makes a reply lurch: ten words at once, then\n * nothing for a fifth of a second.\n *\n * So the reveal runs on its own clock: a frame loop that chunks never interrupt,\n * laying down at most one word per frame however far behind it is. It plays at\n * the speed the reply is arriving at, measured directly, and leans on that only\n * to work the buffer back to `BUFFER_MS` of held text when it drifts. Measuring\n * the speed rather than inferring it from the buffer is what lets the buffer stay\n * shallow: a reply that lasts two seconds still finds its pace in the first few\n * hundred milliseconds, where a deeper buffer would spend the whole reply filling\n * and then sprint to catch up.\n *\n * The reply it paces is whatever the caller hands it, so a caller with more than\n * prose to lay down — a tool row between two paragraphs — paces the whole of it\n * from one place and draws the rest against the same cursor.\n *\n * Nothing here reads `streaming` past the first render: a reply that stops\n * arriving is one whose measured speed decays, which winds the buffer down on its\n * own. Words, not characters, are what a reader sees land, and they are not the\n * same length: an even flow of characters still drops \"and if we do\" in one frame\n * and spends four on \"implementation\".\n */\nexport function useRevealedText(text: string, streaming: boolean): string {\n  const [calm] = useState(prefersReducedMotion);\n  const stops = useMemo(() => wordStops(text), [text]);\n  const words = stops.length - 1;\n\n  const [landed, setLanded] = useState(() => (streaming && !calm ? 0 : words));\n\n  // Winds the cursor back when a shorter reply replaces the one on screen, which\n  // no key can express: same element, same message, new text.\n  const shown = calm ? words : Math.min(words, Math.max(landed, words - MAX_LAG));\n  if (shown !== landed) setLanded(shown);\n\n  const chasing = shown < words;\n  const goal = useRef(words);\n  const cursor = useRef(shown);\n  const flow = useRef<Flow>({ rate: 0, at: 0 });\n  const pace = useRef(SLOWEST);\n\n  useEffect(() => {\n    measure(flow.current, performance.now(), Math.max(0, words - goal.current));\n    goal.current = words;\n\n    if (cursor.current < shown || cursor.current > words) cursor.current = shown;\n  });\n\n  useEffect(() => {\n    if (!chasing) return;\n\n    let drawn = performance.now();\n    let frame = requestAnimationFrame(function step(now) {\n      const elapsed = Math.max(0, now - drawn);\n      drawn = Math.max(drawn, now);\n\n      const arriving = measure(flow.current, now, 0);\n      const from = cursor.current;\n      const behind = goal.current - from;\n\n      if (behind > 0) {\n        const held = (arriving * BUFFER_MS) / 1000;\n        const aim = Math.min(FASTEST, Math.max(SLOWEST, arriving + ((behind - held) * 1000) / CORRECT_MS));\n\n        pace.current += (aim - pace.current) * Math.min(1, elapsed / EASE_MS);\n        cursor.current = Math.min(goal.current, Math.floor(from) + 1, from + (elapsed * pace.current) / 1000);\n\n        if (Math.floor(cursor.current) !== Math.floor(from)) setLanded(Math.floor(cursor.current));\n      }\n\n      frame = requestAnimationFrame(step);\n    });\n\n    return () => cancelAnimationFrame(frame);\n  }, [chasing]);\n\n  if (!chasing) return text;\n\n  return text.slice(0, stops[shown]);\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "51.2.0",
+  "version": "51.3.0-alpha.0",
   "description": "Mastra Playground components",
   "sideEffects": [
     "**/*.css"
@@ -161,8 +161,8 @@
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "tailwindcss": "^4.0.0",
-    "@mastra/client-js": "^1.42.2",
-    "@mastra/react": "1.4.7"
+    "@mastra/client-js": "^1.42.3-alpha.0",
+    "@mastra/react": "1.4.8-alpha.0"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.4.1",
@@ -202,11 +202,11 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vitest": "4.1.10",
-    "@mastra/client-js": "^1.42.2",
     "@internal/lint": "0.0.127",
-    "@mastra/memory": "1.28.0",
-    "@mastra/react": "1.4.7",
-    "@mastra/core": "1.63.0"
+    "@mastra/client-js": "^1.42.3-alpha.0",
+    "@mastra/core": "1.63.1-alpha.0",
+    "@mastra/react": "1.4.8-alpha.0",
+    "@mastra/memory": "1.28.0"
   },
   "homepage": "https://mastra.ai",
   "repository": {