@surf-kit/agent 0.2.1 → 0.3.0

package/dist/streaming/index.js

@@ -1,6 +1,9 @@
+'use client';
+
 // src/streaming/StreamingMessage/StreamingMessage.tsx
 import { useEffect as useEffect2, useRef as useRef2 } from "react";
-import { Spinner } from "@surf-kit/core";
+import { twMerge as twMerge2 } from "tailwind-merge";
+import { WaveLoader } from "@surf-kit/core";
 
 // src/hooks/useCharacterDrain.ts
 import { useState, useRef, useEffect } from "react";
@@ -29,7 +32,10 @@ function useCharacterDrain(target, msPerChar = 15) {
     const elapsed = now - lastTimeRef.current;
     const charsToAdvance = Math.floor(elapsed / msPerCharRef.current);
     if (charsToAdvance > 0 && indexRef.current < currentTarget.length) {
-      const nextIndex = Math.min(indexRef.current + charsToAdvance, currentTarget.length);
+      let nextIndex = Math.min(indexRef.current + charsToAdvance, currentTarget.length);
+      while (nextIndex < currentTarget.length && currentTarget[nextIndex - 1].trim() === "") {
+        nextIndex++;
+      }
       indexRef.current = nextIndex;
       lastTimeRef.current = now;
       setDisplayed(currentTarget.slice(0, nextIndex));
@@ -64,8 +70,77 @@ function useCharacterDrain(target, msPerChar = 15) {
   return { displayed, isDraining };
 }
 
+// src/response/ResponseMessage/ResponseMessage.tsx
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import rehypeSanitize from "rehype-sanitize";
+import { twMerge } from "tailwind-merge";
+import { jsx } from "react/jsx-runtime";
+function normalizeMarkdownLists(content) {
+  return content.replace(/:\s+-\s+/g, ":\n\n- ");
+}
+function ResponseMessage({ content, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: twMerge(
+        "text-sm leading-relaxed text-text-primary",
+        "[&_p]:my-2",
+        "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-6",
+        "[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-6",
+        "[&_li]:my-1",
+        "[&_strong]:text-text-primary [&_strong]:font-semibold",
+        "[&_em]:text-text-secondary",
+        "[&_h1]:text-lg [&_h1]:font-semibold [&_h1]:text-text-primary [&_h1]:mt-4 [&_h1]:mb-2",
+        "[&_h2]:text-base [&_h2]:font-semibold [&_h2]:text-text-primary [&_h2]:mt-3 [&_h2]:mb-1.5",
+        "[&_h3]:text-sm [&_h3]:font-semibold [&_h3]:text-accent [&_h3]:mt-2 [&_h3]:mb-1",
+        "[&_code]:bg-surface-raised [&_code]:text-accent [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-xs [&_code]:font-mono",
+        "[&_pre]:bg-surface-raised [&_pre]:border [&_pre]:border-border [&_pre]:rounded-xl [&_pre]:p-4 [&_pre]:overflow-x-auto",
+        "[&_hr]:my-3 [&_hr]:border-border",
+        "[&_blockquote]:border-l-2 [&_blockquote]:border-border-strong [&_blockquote]:pl-4 [&_blockquote]:text-text-secondary",
+        "[&_a]:text-accent [&_a]:underline-offset-2 [&_a]:hover:text-accent/80",
+        className
+      ),
+      "data-testid": "response-message",
+      children: /* @__PURE__ */ jsx(
+        ReactMarkdown,
+        {
+          rehypePlugins: [rehypeSanitize],
+          components: {
+            script: () => null,
+            iframe: () => null,
+            p: ({ children }) => /* @__PURE__ */ jsx("p", { className: "my-2", children }),
+            ul: ({ children }) => /* @__PURE__ */ jsx("ul", { className: "my-2 list-disc pl-6", children }),
+            ol: ({ children }) => /* @__PURE__ */ jsx("ol", { className: "my-2 list-decimal pl-6", children }),
+            li: ({ children, ...props }) => {
+              let content2 = children;
+              if (props.ordered) {
+                content2 = React.Children.map(children, (child, i) => {
+                  if (i === 0 && typeof child === "string") {
+                    return child.replace(/^\d+[.)]\s*/, "");
+                  }
+                  return child;
+                });
+              }
+              return /* @__PURE__ */ jsx("li", { className: "my-1", children: content2 });
+            },
+            strong: ({ children }) => /* @__PURE__ */ jsx("strong", { className: "font-semibold", children }),
+            em: ({ children }) => /* @__PURE__ */ jsx("em", { className: "italic text-text-secondary", children }),
+            h1: ({ children }) => /* @__PURE__ */ jsx("h1", { className: "text-base font-bold mt-4 mb-2", children }),
+            h2: ({ children }) => /* @__PURE__ */ jsx("h2", { className: "text-sm font-bold mt-3 mb-1", children }),
+            h3: ({ children }) => /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold mt-2 mb-1", children }),
+            hr: () => /* @__PURE__ */ jsx("hr", { className: "my-3 border-border" }),
+            code: ({ children }) => /* @__PURE__ */ jsx("code", { className: "bg-surface-sunken rounded px-1 py-0.5 text-xs font-mono", children })
+          },
+          children: normalizeMarkdownLists(content)
+        }
+      )
+    }
+  );
+}
+
 // src/streaming/StreamingMessage/StreamingMessage.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var phaseLabels = {
   idle: "",
   waiting: "Waiting...",
@@ -74,14 +149,35 @@ var phaseLabels = {
   generating: "Writing...",
   verifying: "Verifying..."
 };
+var CURSOR_STYLES = `
+.sk-streaming-cursor > :not(ul,ol,blockquote):last-child::after,
+.sk-streaming-cursor > :is(ul,ol):last-child > li:last-child::after,
+.sk-streaming-cursor > blockquote:last-child > p:last-child::after {
+  content: "";
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  background: var(--color-accent, #38bdf8);
+  animation: sk-cursor-blink 0.8s steps(1) infinite;
+  margin-left: 2px;
+  vertical-align: text-bottom;
+}
+@keyframes sk-cursor-blink {
+  0%, 60% { opacity: 1; }
+  61%, 100% { opacity: 0; }
+}
+`;
 function StreamingMessage({
   stream,
   onComplete,
+  onDraining,
   showPhases = true,
   className
 }) {
   const onCompleteRef = useRef2(onComplete);
   onCompleteRef.current = onComplete;
+  const onDrainingRef = useRef2(onDraining);
+  onDrainingRef.current = onDraining;
   const wasActiveRef = useRef2(stream.active);
   useEffect2(() => {
     if (wasActiveRef.current && !stream.active) {
@@ -90,42 +186,47 @@ function StreamingMessage({
     wasActiveRef.current = stream.active;
   }, [stream.active]);
   const phaseLabel = phaseLabels[stream.phase];
-  const { displayed: displayedContent } = useCharacterDrain(stream.content);
-  return /* @__PURE__ */ jsxs("div", { className, "data-testid": "streaming-message", children: [
+  const { displayed: rawDisplayed, isDraining } = useCharacterDrain(stream.content);
+  const displayedContent = stream.active || isDraining ? rawDisplayed.trimEnd() : rawDisplayed;
+  useEffect2(() => {
+    onDrainingRef.current?.(isDraining);
+  }, [isDraining]);
+  const agentLabel = stream.agent ? stream.agent.replace("_agent", "").replace("_", " ") : null;
+  const showPhaseIndicator = showPhases && stream.active && stream.phase !== "idle" && !displayedContent;
+  const showCursor = (stream.active || isDraining) && !!displayedContent;
+  return /* @__PURE__ */ jsxs("div", { className: twMerge2("flex w-full flex-col items-start", className), "data-testid": "streaming-message", children: [
     /* @__PURE__ */ jsxs("div", { "aria-live": "assertive", className: "sr-only", children: [
       stream.active && stream.phase !== "idle" && "Response started",
       !stream.active && stream.content && "Response complete"
     ] }),
+    showCursor && /* @__PURE__ */ jsx2("style", { children: CURSOR_STYLES }),
+    agentLabel && /* @__PURE__ */ jsx2("div", { className: "text-[11px] font-display font-semibold uppercase tracking-[0.08em] text-text-muted px-1 mb-1.5", children: agentLabel }),
     /* @__PURE__ */ jsxs("div", { className: "max-w-[88%] px-4 py-3 rounded-[18px] rounded-tl-[4px] bg-surface border border-border motion-safe:animate-springFromLeft", children: [
-      showPhases && stream.active && stream.phase !== "idle" && /* @__PURE__ */ jsxs(
+      showPhaseIndicator && /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "flex items-center gap-2 mb-2 text-sm text-text-secondary",
+          className: "flex items-center gap-2 text-sm text-text-secondary",
           "data-testid": "phase-indicator",
           children: [
-            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(Spinner, { size: "sm" }) }),
-            /* @__PURE__ */ jsx("span", { children: phaseLabel })
+            /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx2(WaveLoader, { size: "sm", color: "#38bdf8" }) }),
+            /* @__PURE__ */ jsx2("span", { children: phaseLabel })
           ]
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "text-sm leading-relaxed text-text-primary whitespace-pre-wrap", children: [
-        displayedContent,
-        stream.active && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "inline-block w-0.5 h-4 bg-accent align-text-bottom animate-pulse ml-0.5",
-            "aria-hidden": "true",
-            "data-testid": "streaming-cursor"
-          }
-        )
-      ] })
+      displayedContent && /* @__PURE__ */ jsx2(
+        ResponseMessage,
+        {
+          content: displayedContent,
+          className: showCursor ? "sk-streaming-cursor" : void 0
+        }
+      )
     ] })
   ] });
 }
 
 // src/streaming/ThinkingIndicator/ThinkingIndicator.tsx
 import { useReducedMotion } from "@surf-kit/hooks";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function ThinkingIndicator({ label = "Thinking...", className }) {
   const reducedMotion = useReducedMotion();
   return /* @__PURE__ */ jsxs2(
@@ -135,11 +236,11 @@ function ThinkingIndicator({ label = "Thinking...", className }) {
       className: `inline-flex items-center gap-2 text-sm motion-safe:animate-fadeSlideUpSm ${className ?? ""}`,
       "data-testid": "thinking-indicator",
       children: [
-        /* @__PURE__ */ jsx2("span", { className: "text-text-secondary", children: label }),
+        /* @__PURE__ */ jsx3("span", { className: "text-text-secondary", children: label }),
         !reducedMotion && /* @__PURE__ */ jsxs2("span", { className: "flex gap-1", "aria-hidden": "true", "data-testid": "animated-dots", children: [
-          /* @__PURE__ */ jsx2("span", { className: "w-1.5 h-1.5 rounded-full bg-current animate-bounce [animation-delay:0ms]" }),
-          /* @__PURE__ */ jsx2("span", { className: "w-1.5 h-1.5 rounded-full bg-current animate-bounce [animation-delay:150ms]" }),
-          /* @__PURE__ */ jsx2("span", { className: "w-1.5 h-1.5 rounded-full bg-current animate-bounce [animation-delay:300ms]" })
+          /* @__PURE__ */ jsx3("span", { className: "w-1.5 h-1.5 rounded-full bg-current animate-bounce [animation-delay:0ms]" }),
+          /* @__PURE__ */ jsx3("span", { className: "w-1.5 h-1.5 rounded-full bg-current animate-bounce [animation-delay:150ms]" }),
+          /* @__PURE__ */ jsx3("span", { className: "w-1.5 h-1.5 rounded-full bg-current animate-bounce [animation-delay:300ms]" })
         ] })
       ]
     }
@@ -147,8 +248,8 @@ function ThinkingIndicator({ label = "Thinking...", className }) {
 }
 
 // src/streaming/ToolExecution/ToolExecution.tsx
-import { Spinner as Spinner2 } from "@surf-kit/core";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { WaveLoader as WaveLoader2 } from "@surf-kit/core";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var defaultLabels = {
   search: "Searching knowledge base...",
   retrieve: "Retrieving documents...",
@@ -163,16 +264,16 @@ function ToolExecution({ tool, label, className }) {
       role: "status",
       "data-testid": "tool-execution",
       children: [
-        /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx3(Spinner2, { size: "sm" }) }),
-        /* @__PURE__ */ jsx3("span", { children: displayLabel })
+        /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx4(WaveLoader2, { size: "sm", color: "#38bdf8" }) }),
+        /* @__PURE__ */ jsx4("span", { children: displayLabel })
       ]
     }
   );
 }
 
 // src/streaming/RetrievalProgress/RetrievalProgress.tsx
-import { Spinner as Spinner3 } from "@surf-kit/core";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { WaveLoader as WaveLoader3 } from "@surf-kit/core";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function RetrievalProgress({ sources, isActive, className }) {
   return /* @__PURE__ */ jsxs4(
     "div",
@@ -183,18 +284,18 @@ function RetrievalProgress({ sources, isActive, className }) {
       "data-testid": "retrieval-progress",
       children: [
         isActive && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 text-sm text-text-secondary", children: [
-          /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx4(Spinner3, { size: "sm" }) }),
-          /* @__PURE__ */ jsx4("span", { children: "Retrieving sources..." })
+          /* @__PURE__ */ jsx5("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx5(WaveLoader3, { size: "sm", color: "#38bdf8" }) }),
+          /* @__PURE__ */ jsx5("span", { children: "Retrieving sources..." })
         ] }),
-        sources.length > 0 && /* @__PURE__ */ jsx4("ul", { className: "space-y-1", "data-testid": "source-list", children: sources.map((source, index) => /* @__PURE__ */ jsxs4(
+        sources.length > 0 && /* @__PURE__ */ jsx5("ul", { className: "space-y-1", "data-testid": "source-list", children: sources.map((source, index) => /* @__PURE__ */ jsxs4(
           "li",
           {
             className: "text-sm text-text-secondary flex items-center gap-2 animate-in fade-in slide-in-from-left-2",
             style: { animationDelay: `${index * 100}ms`, animationFillMode: "both" },
             "data-testid": "retrieval-source-item",
             children: [
-              /* @__PURE__ */ jsx4("span", { className: "w-1.5 h-1.5 rounded-full bg-accent flex-shrink-0", "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx4("span", { className: "truncate", children: source.title })
+              /* @__PURE__ */ jsx5("span", { className: "w-1.5 h-1.5 rounded-full bg-accent flex-shrink-0", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx5("span", { className: "truncate", children: source.title })
             ]
           },
           source.document_id
@@ -205,7 +306,7 @@ function RetrievalProgress({ sources, isActive, className }) {
 }
 
 // src/streaming/VerificationProgress/VerificationProgress.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function VerificationProgress({
   isActive,
   label = "Checking accuracy...",
@@ -228,12 +329,12 @@ function VerificationProgress({
             viewBox: "0 0 24 24",
             "aria-hidden": "true",
             children: [
-              /* @__PURE__ */ jsx5("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-              /* @__PURE__ */ jsx5("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+              /* @__PURE__ */ jsx6("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+              /* @__PURE__ */ jsx6("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx5("span", { className: "text-accent animate-pulse", children: label })
+        /* @__PURE__ */ jsx6("span", { className: "text-accent animate-pulse", children: label })
       ]
     }
   );
@@ -241,7 +342,7 @@ function VerificationProgress({
 
 // src/streaming/TypewriterText/TypewriterText.tsx
 import { useEffect as useEffect3, useState as useState2 } from "react";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function TypewriterText({
   text,
   speed = 30,
@@ -276,14 +377,14 @@ function TypewriterText({
   }, [text, speed, delay, onComplete]);
   return /* @__PURE__ */ jsxs6("span", { className, children: [
     displayedText,
-    showCursor && !isComplete && /* @__PURE__ */ jsx6("span", { className: "typewriter-cursor", "aria-hidden": "true" })
+    showCursor && !isComplete && /* @__PURE__ */ jsx7("span", { className: "typewriter-cursor", "aria-hidden": "true" })
   ] });
 }
 
 // src/streaming/TypingIndicator/TypingIndicator.tsx
-import { twMerge } from "tailwind-merge";
+import { twMerge as twMerge3 } from "tailwind-merge";
 import { useReducedMotion as useReducedMotion2 } from "@surf-kit/hooks";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var bounceKeyframes = `
 @keyframes typing-bounce {
   0%, 80%, 100% { transform: translateY(0); }
@@ -301,12 +402,12 @@ function TypingIndicator({
     {
       role: "status",
       "aria-label": label ?? "typing",
-      className: twMerge("inline-flex items-center gap-2", className),
+      className: twMerge3("inline-flex items-center gap-2", className),
       "data-testid": "typing-indicator",
       children: [
-        !reducedMotion && /* @__PURE__ */ jsx7("style", { children: bounceKeyframes }),
-        label && /* @__PURE__ */ jsx7("span", { className: "text-sm text-text-secondary", children: label }),
-        /* @__PURE__ */ jsx7("span", { className: "flex gap-1", "data-testid": "typing-dots", children: Array.from({ length: dotCount }, (_, i) => /* @__PURE__ */ jsx7(
+        !reducedMotion && /* @__PURE__ */ jsx8("style", { children: bounceKeyframes }),
+        label && /* @__PURE__ */ jsx8("span", { className: "text-sm text-text-secondary", children: label }),
+        /* @__PURE__ */ jsx8("span", { className: "flex gap-1", "data-testid": "typing-dots", children: Array.from({ length: dotCount }, (_, i) => /* @__PURE__ */ jsx8(
           "span",
           {
             className: "w-2 h-2 rounded-full bg-text-secondary",
@@ -323,9 +424,9 @@ function TypingIndicator({
 }
 
 // src/streaming/TextGlimmer/TextGlimmer.tsx
-import { twMerge as twMerge2 } from "tailwind-merge";
+import { twMerge as twMerge4 } from "tailwind-merge";
 import { useReducedMotion as useReducedMotion3 } from "@surf-kit/hooks";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var shimmerKeyframes = `
 @keyframes text-shimmer {
   0% { background-position: 200% 0; }
@@ -340,11 +441,11 @@ function TextGlimmer({ lines = 3, className }) {
     {
       role: "status",
       "aria-label": "Loading",
-      className: twMerge2("flex flex-col gap-2", className),
+      className: twMerge4("flex flex-col gap-2", className),
       "data-testid": "text-glimmer",
       children: [
-        !reducedMotion && /* @__PURE__ */ jsx8("style", { children: shimmerKeyframes }),
-        Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx8(
+        !reducedMotion && /* @__PURE__ */ jsx9("style", { children: shimmerKeyframes }),
+        Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx9(
           "div",
           {
             className: "h-3 rounded bg-surface-raised",
@@ -366,9 +467,9 @@ function TextGlimmer({ lines = 3, className }) {
 }
 
 // src/streaming/StreamingList/StreamingList.tsx
-import { twMerge as twMerge3 } from "tailwind-merge";
+import { twMerge as twMerge5 } from "tailwind-merge";
 import { useReducedMotion as useReducedMotion4 } from "@surf-kit/hooks";
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var fadeSlideInKeyframes = `
 @keyframes fadeSlideIn {
   from { opacity: 0; transform: translateY(8px); }
@@ -384,17 +485,17 @@ function StreamingList({
 }) {
   const reducedMotion = useReducedMotion4();
   if (items.length === 0 && !isStreaming) {
-    return emptyMessage ? /* @__PURE__ */ jsx9("p", { className: twMerge3("text-sm text-text-secondary", className), "data-testid": "streaming-list-empty", children: emptyMessage }) : null;
+    return emptyMessage ? /* @__PURE__ */ jsx10("p", { className: twMerge5("text-sm text-text-secondary", className), "data-testid": "streaming-list-empty", children: emptyMessage }) : null;
   }
   return /* @__PURE__ */ jsxs9(
     "ul",
     {
       "aria-live": "polite",
-      className: twMerge3("list-none p-0 m-0", className),
+      className: twMerge5("list-none p-0 m-0", className),
       "data-testid": "streaming-list",
       children: [
-        !reducedMotion && /* @__PURE__ */ jsx9("style", { children: fadeSlideInKeyframes }),
-        items.map((item, index) => /* @__PURE__ */ jsx9(
+        !reducedMotion && /* @__PURE__ */ jsx10("style", { children: fadeSlideInKeyframes }),
+        items.map((item, index) => /* @__PURE__ */ jsx10(
           "li",
           {
             style: reducedMotion ? void 0 : { animation: "fadeSlideIn 0.3s ease-out" },
@@ -403,16 +504,16 @@ function StreamingList({
           },
           index
         )),
-        isStreaming && /* @__PURE__ */ jsx9("li", { "data-testid": "streaming-list-loading", children: /* @__PURE__ */ jsx9(TypingIndicator, {}) })
+        isStreaming && /* @__PURE__ */ jsx10("li", { "data-testid": "streaming-list-loading", children: /* @__PURE__ */ jsx10(TypingIndicator, {}) })
       ]
     }
   );
 }
 
 // src/streaming/StreamingStructure/StreamingStructure.tsx
-import { twMerge as twMerge4 } from "tailwind-merge";
+import { twMerge as twMerge6 } from "tailwind-merge";
 import { useReducedMotion as useReducedMotion5 } from "@surf-kit/hooks";
-import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var fadeSlideInKeyframes2 = `
 @keyframes fadeSlideIn {
   from { opacity: 0; transform: translateY(8px); }
@@ -421,13 +522,13 @@ var fadeSlideInKeyframes2 = `
 `;
 function renderValue(value, reducedMotion) {
   if (value === null) {
-    return /* @__PURE__ */ jsx10("span", { className: "italic text-text-secondary", children: "null" });
+    return /* @__PURE__ */ jsx11("span", { className: "italic text-text-secondary", children: "null" });
   }
   if (value === void 0) {
-    return /* @__PURE__ */ jsx10("span", { className: "italic text-text-secondary", children: "undefined" });
+    return /* @__PURE__ */ jsx11("span", { className: "italic text-text-secondary", children: "undefined" });
   }
   if (Array.isArray(value)) {
-    return /* @__PURE__ */ jsx10("ol", { className: "list-decimal pl-4 m-0", children: value.map((item, i) => /* @__PURE__ */ jsx10("li", { className: "text-text-secondary text-sm", children: renderValue(item, reducedMotion) }, i)) });
+    return /* @__PURE__ */ jsx11("ol", { className: "list-decimal pl-4 m-0", children: value.map((item, i) => /* @__PURE__ */ jsx11("li", { className: "text-text-secondary text-sm", children: renderValue(item, reducedMotion) }, i)) });
   }
   if (typeof value === "object") {
     return renderNestedDl(value, reducedMotion);
@@ -436,13 +537,13 @@ function renderValue(value, reducedMotion) {
 }
 function renderNestedDl(data, reducedMotion) {
   const entries = Object.entries(data);
-  return /* @__PURE__ */ jsx10("dl", { className: "pl-4 m-0", "data-testid": "streaming-structure-nested", children: entries.map(([key, value]) => /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsx11("dl", { className: "pl-4 m-0", "data-testid": "streaming-structure-nested", children: entries.map(([key, value]) => /* @__PURE__ */ jsxs10(
     "div",
     {
       style: reducedMotion ? void 0 : { animation: "fadeSlideIn 0.3s ease-out" },
       children: [
-        /* @__PURE__ */ jsx10("dt", { className: "font-medium text-text-primary text-sm", children: key }),
-        /* @__PURE__ */ jsx10("dd", { className: "text-text-secondary text-sm ml-0 mb-3", children: renderValue(value, reducedMotion) })
+        /* @__PURE__ */ jsx11("dt", { className: "font-medium text-text-primary text-sm", children: key }),
+        /* @__PURE__ */ jsx11("dd", { className: "text-text-secondary text-sm ml-0 mb-3", children: renderValue(value, reducedMotion) })
       ]
     },
     key
@@ -459,23 +560,23 @@ function StreamingStructure({
     "dl",
     {
       "aria-live": "polite",
-      className: twMerge4("m-0", className),
+      className: twMerge6("m-0", className),
       "data-testid": "streaming-structure",
       children: [
-        !reducedMotion && /* @__PURE__ */ jsx10("style", { children: fadeSlideInKeyframes2 }),
+        !reducedMotion && /* @__PURE__ */ jsx11("style", { children: fadeSlideInKeyframes2 }),
         entries.map(([key, value]) => /* @__PURE__ */ jsxs10(
           "div",
           {
             style: reducedMotion ? void 0 : { animation: "fadeSlideIn 0.3s ease-out" },
             "data-testid": "streaming-structure-entry",
             children: [
-              /* @__PURE__ */ jsx10("dt", { className: "font-medium text-text-primary text-sm", children: key }),
-              /* @__PURE__ */ jsx10("dd", { className: "text-text-secondary text-sm ml-0 mb-3", children: renderValue(value, reducedMotion) })
+              /* @__PURE__ */ jsx11("dt", { className: "font-medium text-text-primary text-sm", children: key }),
+              /* @__PURE__ */ jsx11("dd", { className: "text-text-secondary text-sm ml-0 mb-3", children: renderValue(value, reducedMotion) })
             ]
           },
           key
         )),
-        isStreaming && /* @__PURE__ */ jsx10("div", { "data-testid": "streaming-structure-loading", children: /* @__PURE__ */ jsx10(TextGlimmer, { lines: 1 }) })
+        isStreaming && /* @__PURE__ */ jsx11("div", { "data-testid": "streaming-structure-loading", children: /* @__PURE__ */ jsx11(TextGlimmer, { lines: 1 }) })
       ]
     }
   );