@djangocfg/ui-tools 2.1.297 → 2.1.299

package/dist/{chunk-DKJTH4GE.mjs → chunk-CKD7GNE5.mjs}

@@ -1,5 +1,5 @@
 import { __name } from './chunk-CGILA3WO.mjs';
-import React3, { lazy, createContext, useState, useMemo, useCallback, Suspense, useContext, useReducer, useRef, useEffect } from 'react';
+import React6, { lazy, createContext, useState, useMemo, useCallback, Suspense, useContext, useReducer, useRef, useEffect } from 'react';
 import '@djangocfg/ui-core/styles/palette';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import ReactMarkdown from 'react-markdown';
@@ -7,25 +7,10 @@ import rehypeRaw from 'rehype-raw';
 import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
 import remarkGfm from 'remark-gfm';
 import { CopyButton } from '@djangocfg/ui-core/components';
-import { useSessionStorage, useResolvedTheme } from '@djangocfg/ui-core/hooks';
+import { useResolvedTheme, useSessionStorage } from '@djangocfg/ui-core/hooks';
 import consola2 from 'consola';
 import { sample } from 'openapi-sampler';
 
-var MermaidClient = lazy(() => import('./Mermaid.client-XFQ74OYN.mjs'));
-var LoadingFallback = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center min-h-[100px]", children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-6 w-6 border-b-2 border-primary" }) }), "LoadingFallback");
-var Mermaid = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingFallback, {}), children: /* @__PURE__ */ jsx(MermaidClient, { ...props }) });
-}, "Mermaid");
-var Mermaid_default = Mermaid;
-var PrettyCodeClient = lazy(() => import('./PrettyCode.client-SPMTQEG4.mjs'));
-var LoadingFallback2 = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx("div", { className: "relative rounded-sm border border-border overflow-hidden bg-muted dark:bg-zinc-900", children: /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-  /* @__PURE__ */ jsx("div", { className: "animate-pulse h-4 w-4 rounded-full bg-muted-foreground/20" }),
-  /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Loading code..." })
-] }) }) }), "LoadingFallback");
-var PrettyCode = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingFallback2, {}), children: /* @__PURE__ */ jsx(PrettyCodeClient, { ...props }) });
-}, "PrettyCode");
-var PrettyCode_default = PrettyCode;
 function smartTruncate(content, maxLength) {
   if (content.length <= maxLength) {
     return content;
@@ -141,6 +126,72 @@ function useCollapsibleContent(content, options = {}) {
   };
 }
 __name(useCollapsibleContent, "useCollapsibleContent");
+function extractTextFromChildren(children) {
+  if (typeof children === "string") return children;
+  if (typeof children === "number") return String(children);
+  if (React6.isValidElement(children)) {
+    const props = children.props;
+    return extractTextFromChildren(props.children);
+  }
+  if (Array.isArray(children)) {
+    return children.map(extractTextFromChildren).join("");
+  }
+  return "";
+}
+__name(extractTextFromChildren, "extractTextFromChildren");
+function hasMarkdownSyntax(text) {
+  if (text.trim().includes("\n")) return true;
+  if (/<\/?[a-zA-Z][a-zA-Z0-9-]*(\s[^>]*)?\/?>/.test(text)) return true;
+  const patterns = [
+    /^#{1,6}\s/m,
+    // Headers
+    /\*\*[^*]+\*\*/,
+    // Bold
+    /\*[^*]+\*/,
+    // Italic
+    /__[^_]+__/,
+    // Bold (underscore)
+    /_[^_]+_/,
+    // Italic (underscore)
+    /\[.+\]\(.+\)/,
+    // Links
+    /!\[.*\]\(.+\)/,
+    // Images
+    /```[\s\S]*```/,
+    // Code blocks
+    /`[^`]+`/,
+    // Inline code
+    /^\s*[-*+]\s/m,
+    // Unordered lists
+    /^\s*\d+\.\s/m,
+    // Ordered lists
+    /^\s*>/m,
+    // Blockquotes
+    /\|.+\|/,
+    // Tables
+    /^---+$/m,
+    // Horizontal rules
+    /~~[^~]+~~/
+    // Strikethrough
+  ];
+  return patterns.some((p) => p.test(text));
+}
+__name(hasMarkdownSyntax, "hasMarkdownSyntax");
+var MermaidClient = lazy(() => import('./Mermaid.client-XFQ74OYN.mjs'));
+var LoadingFallback = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center min-h-[100px]", children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-6 w-6 border-b-2 border-primary" }) }), "LoadingFallback");
+var Mermaid = /* @__PURE__ */ __name((props) => {
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingFallback, {}), children: /* @__PURE__ */ jsx(MermaidClient, { ...props }) });
+}, "Mermaid");
+var Mermaid_default = Mermaid;
+var PrettyCodeClient = lazy(() => import('./PrettyCode.client-SPMTQEG4.mjs'));
+var LoadingFallback2 = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx("div", { className: "relative rounded-sm border border-border overflow-hidden bg-muted dark:bg-zinc-900", children: /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+  /* @__PURE__ */ jsx("div", { className: "animate-pulse h-4 w-4 rounded-full bg-muted-foreground/20" }),
+  /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Loading code..." })
+] }) }) }), "LoadingFallback");
+var PrettyCode = /* @__PURE__ */ __name((props) => {
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingFallback2, {}), children: /* @__PURE__ */ jsx(PrettyCodeClient, { ...props }) });
+}, "PrettyCode");
+var PrettyCode_default = PrettyCode;
 var HTML_SCHEMA_BASE = {
   ...defaultSchema,
   tagNames: [
@@ -174,22 +225,21 @@ function buildSchema(extraProtocols) {
   };
 }
 __name(buildSchema, "buildSchema");
-var extractTextFromChildren = /* @__PURE__ */ __name((children) => {
-  if (typeof children === "string") {
-    return children;
-  }
-  if (typeof children === "number") {
-    return String(children);
-  }
-  if (React3.isValidElement(children)) {
-    const props = children.props;
-    return extractTextFromChildren(props.children);
-  }
-  if (Array.isArray(children)) {
-    return children.map(extractTextFromChildren).join("");
-  }
-  return "";
-}, "extractTextFromChildren");
+function buildUrlTransform(extraProtocols) {
+  if (!extraProtocols || extraProtocols.length === 0) return void 0;
+  const lower = extraProtocols.map((p) => p.toLowerCase() + ":");
+  return (url) => {
+    const u = url.trim().toLowerCase();
+    for (const p of lower) {
+      if (u.startsWith(p)) return url;
+    }
+    if (/^(https?:|mailto:|tel:|xmpp:|irc:|ircs:|#|\/|\.\/|\.\.\/|\?)/i.test(u) || /^[a-z0-9._~!$&'()*+,;=:@%-]+$/i.test(u)) {
+      return url;
+    }
+    return "";
+  };
+}
+__name(buildUrlTransform, "buildUrlTransform");
 var CodeBlock = /* @__PURE__ */ __name(({ code, language, isUser, isCompact = false }) => {
   const theme = useResolvedTheme();
   return /* @__PURE__ */ jsxs("div", { className: "relative group my-3", children: [
@@ -219,25 +269,40 @@ var CodeBlock = /* @__PURE__ */ __name(({ code, language, isUser, isCompact = fa
     )
   ] });
 }, "CodeBlock");
-var createMarkdownComponents = /* @__PURE__ */ __name((isUser = false, isCompact = false) => {
+var CodeBlockFallback = /* @__PURE__ */ __name(({ code, isUser }) => /* @__PURE__ */ jsxs("div", { className: "relative group my-3", children: [
+  /* @__PURE__ */ jsx(
+    CopyButton,
+    {
+      value: code,
+      variant: "ghost",
+      className: `
+        absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity
+        h-8 w-8
+        ${isUser ? "hover:bg-white/20 text-white" : "hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground"}
+      `,
+      title: "Copy code"
+    }
+  ),
+  /* @__PURE__ */ jsx("pre", { className: `
+      p-3 rounded text-xs font-mono overflow-x-auto
+      ${isUser ? "bg-white/10 text-white" : "bg-muted text-foreground"}
+    `, children: /* @__PURE__ */ jsx("code", { children: code }) })
+] }), "CodeBlockFallback");
+function createMarkdownComponents(isUser = false, isCompact = false) {
   const textSize = isCompact ? "text-xs" : "text-sm";
   const headingBase = isCompact ? "text-sm" : "text-base";
   const headingSm = isCompact ? "text-xs" : "text-sm";
   return {
-    // Headings - scaled for chat context
     h1: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("h1", { className: `${headingBase} font-bold mb-2 mt-3 first:mt-0`, children }), "h1"),
     h2: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("h2", { className: `${headingSm} font-bold mb-2 mt-3 first:mt-0`, children }), "h2"),
     h3: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("h3", { className: `${headingSm} font-semibold mb-1 mt-2 first:mt-0`, children }), "h3"),
     h4: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("h4", { className: `${headingSm} font-semibold mb-1 mt-2 first:mt-0`, children }), "h4"),
     h5: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("h5", { className: `${headingSm} font-medium mb-1 mt-2 first:mt-0`, children }), "h5"),
     h6: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("h6", { className: `${headingSm} font-medium mb-1 mt-2 first:mt-0`, children }), "h6"),
-    // Paragraphs - optimized for chat readability
     p: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("p", { className: `${textSize} mb-4 last:mb-0 leading-7 break-words font-light`, children }), "p"),
-    // Lists - compact
     ul: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("ul", { className: `list-disc list-inside mb-2 space-y-1 ${textSize}`, children }), "ul"),
     ol: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("ol", { className: `list-decimal list-inside mb-2 space-y-1 ${textSize}`, children }), "ol"),
     li: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("li", { className: "break-words", children }), "li"),
-    // Links - appropriate for chat context
     a: /* @__PURE__ */ __name(({ href, children }) => /* @__PURE__ */ jsx(
       "a",
       {
@@ -248,11 +313,10 @@ var createMarkdownComponents = /* @__PURE__ */ __name((isUser = false, isCompact
         children
       }
     ), "a"),
-    // Code blocks - using CodeBlock component with copy functionality
     pre: /* @__PURE__ */ __name(({ children }) => {
       let codeContent = "";
       let language = "plaintext";
-      if (React3.isValidElement(children)) {
+      if (React6.isValidElement(children)) {
         const child = children;
         if (child.type === "code" || typeof child.type === "function" && child.type.name === "code") {
           const codeProps = child.props;
@@ -275,92 +339,28 @@ var createMarkdownComponents = /* @__PURE__ */ __name((isUser = false, isCompact
         return /* @__PURE__ */ jsx(CodeBlock, { code: codeContent, language, isUser, isCompact });
       } catch (error) {
         console.warn("CodeBlock failed, using fallback:", error);
-        return /* @__PURE__ */ jsxs("div", { className: "relative group my-3", children: [
-          /* @__PURE__ */ jsx(
-            CopyButton,
-            {
-              value: codeContent,
-              variant: "ghost",
-              className: `
-              absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity
-              h-8 w-8
-              ${isUser ? "hover:bg-white/20 text-white" : "hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground"}
-            `,
-              title: "Copy code"
-            }
-          ),
-          /* @__PURE__ */ jsx("pre", { className: `
-            p-3 rounded text-xs font-mono overflow-x-auto
-            ${isUser ? "bg-white/10 text-white" : "bg-muted text-foreground"}
-          `, children: /* @__PURE__ */ jsx("code", { children: codeContent }) })
-        ] });
+        return /* @__PURE__ */ jsx(CodeBlockFallback, { code: codeContent, language, isUser, isCompact });
       }
     }, "pre"),
-    // Inline code
     code: /* @__PURE__ */ __name(({ children, className }) => {
       if (className?.includes("language-")) {
         return /* @__PURE__ */ jsx("code", { className, children });
       }
-      const codeContent = extractTextFromChildren(children);
-      return /* @__PURE__ */ jsx("code", { className: "px-1.5 py-0.5 rounded text-xs font-mono bg-muted text-foreground break-all", children: codeContent });
+      return /* @__PURE__ */ jsx("code", { className: "px-1.5 py-0.5 rounded text-xs font-mono bg-muted text-foreground break-all", children: extractTextFromChildren(children) });
     }, "code"),
-    // Blockquotes
     blockquote: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("blockquote", { className: `${textSize} border-l-2 border-border pl-3 my-2 italic text-muted-foreground break-words`, children }), "blockquote"),
-    // Tables - compact for chat
     table: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("div", { className: "overflow-x-auto my-3", children: /* @__PURE__ */ jsx("table", { className: `min-w-full ${textSize} border-collapse`, children }) }), "table"),
     thead: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("thead", { className: "bg-muted/50", children }), "thead"),
     tbody: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("tbody", { children }), "tbody"),
     tr: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("tr", { className: "border-b border-border/50", children }), "tr"),
     th: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("th", { className: "px-2 py-1 text-left font-medium break-words", children }), "th"),
     td: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("td", { className: "px-2 py-1 break-words", children }), "td"),
-    // Horizontal rule
     hr: /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx("hr", { className: "my-3 border-0 h-px bg-border" }), "hr"),
-    // Strong and emphasis
     strong: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("strong", { className: "font-semibold", children }), "strong"),
     em: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("em", { className: "italic", children }), "em")
   };
-}, "createMarkdownComponents");
-var hasMarkdownSyntax = /* @__PURE__ */ __name((text) => {
-  if (text.trim().includes("\n")) {
-    return true;
-  }
-  if (/<\/?[a-zA-Z][a-zA-Z0-9-]*(\s[^>]*)?\/?>/.test(text)) {
-    return true;
-  }
-  const markdownPatterns = [
-    /^#{1,6}\s/m,
-    // Headers
-    /\*\*[^*]+\*\*/,
-    // Bold
-    /\*[^*]+\*/,
-    // Italic
-    /__[^_]+__/,
-    // Bold (underscore)
-    /_[^_]+_/,
-    // Italic (underscore)
-    /\[.+\]\(.+\)/,
-    // Links
-    /!\[.*\]\(.+\)/,
-    // Images
-    /```[\s\S]*```/,
-    // Code blocks
-    /`[^`]+`/,
-    // Inline code
-    /^\s*[-*+]\s/m,
-    // Unordered lists
-    /^\s*\d+\.\s/m,
-    // Ordered lists
-    /^\s*>/m,
-    // Blockquotes
-    /\|.+\|/,
-    // Tables
-    /^---+$/m,
-    // Horizontal rules
-    /~~[^~]+~~/
-    // Strikethrough
-  ];
-  return markdownPatterns.some((pattern) => pattern.test(text));
-}, "hasMarkdownSyntax");
+}
+__name(createMarkdownComponents, "createMarkdownComponents");
 var CollapseToggle = /* @__PURE__ */ __name(({
   isCollapsed,
   onClick,
@@ -384,48 +384,77 @@ var CollapseToggle = /* @__PURE__ */ __name(({
       `,
       children: isCollapsed ? /* @__PURE__ */ jsxs(Fragment, { children: [
         readMoreLabel,
-        /* @__PURE__ */ jsx(
-          "svg",
-          {
-            className: "w-3 h-3",
-            fill: "none",
-            stroke: "currentColor",
-            viewBox: "0 0 24 24",
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: 2,
-                d: "M19 9l-7 7-7-7"
-              }
-            )
-          }
-        )
+        /* @__PURE__ */ jsx(Chevron, { direction: "down" })
       ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         showLessLabel,
-        /* @__PURE__ */ jsx(
-          "svg",
-          {
-            className: "w-3 h-3",
-            fill: "none",
-            stroke: "currentColor",
-            viewBox: "0 0 24 24",
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: 2,
-                d: "M5 15l7-7 7 7"
-              }
-            )
-          }
-        )
+        /* @__PURE__ */ jsx(Chevron, { direction: "up" })
       ] })
     }
   );
 }, "CollapseToggle");
+function Chevron({ direction }) {
+  return /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: direction === "down" ? "M19 9l-7 7-7-7" : "M5 15l7-7 7 7"
+    }
+  ) });
+}
+__name(Chevron, "Chevron");
+function applyPreprocess(source, rules) {
+  if (!rules || rules.length === 0) return source;
+  let s = source;
+  for (const rule of rules) {
+    if (!rule.preprocess) continue;
+    try {
+      s = rule.preprocess(s);
+    } catch (err) {
+      console.warn(
+        `[MarkdownMessage] linkRule "${rule.name ?? "(anonymous)"}" preprocess threw; skipping`,
+        err
+      );
+    }
+  }
+  return s;
+}
+__name(applyPreprocess, "applyPreprocess");
+function collectProtocols(extraHrefProtocols, rules) {
+  const set = /* @__PURE__ */ new Set();
+  if (extraHrefProtocols) for (const p of extraHrefProtocols) set.add(p);
+  if (rules) {
+    for (const r of rules) {
+      if (r.protocols) for (const p of r.protocols) set.add(p);
+    }
+  }
+  return set.size === 0 ? void 0 : Array.from(set);
+}
+__name(collectProtocols, "collectProtocols");
+function buildLinkRulesComponent(rules, isUser, callerA) {
+  const Renderer = /* @__PURE__ */ __name((props) => {
+    const { href, children } = props;
+    if (typeof href === "string") {
+      for (const rule of rules) {
+        if (rule.match(href)) {
+          return React6.createElement(
+            React6.Fragment,
+            null,
+            rule.render({ href, children, isUser })
+          );
+        }
+      }
+    }
+    if (callerA && typeof callerA === "function") {
+      const Caller = callerA;
+      return React6.createElement(Caller, props);
+    }
+    return React6.createElement("a", props, children);
+  }, "Renderer");
+  return Renderer;
+}
+__name(buildLinkRulesComponent, "buildLinkRulesComponent");
 var MarkdownMessage = /* @__PURE__ */ __name(({
   content,
   className = "",
@@ -433,6 +462,7 @@ var MarkdownMessage = /* @__PURE__ */ __name(({
   isCompact = false,
   customComponents,
   extraHrefProtocols,
+  linkRules,
   collapsible = false,
   maxLength,
   maxLines,
@@ -441,53 +471,71 @@ var MarkdownMessage = /* @__PURE__ */ __name(({
   defaultExpanded = false,
   onCollapseChange
 }) => {
-  const trimmedContent = content.trim();
-  const collapsibleOptions = React3.useMemo(() => {
+  const preprocessed = React6.useMemo(
+    () => applyPreprocess(content, linkRules),
+    [content, linkRules]
+  );
+  const effectiveProtocols = React6.useMemo(
+    () => collectProtocols(extraHrefProtocols, linkRules),
+    [extraHrefProtocols, linkRules]
+  );
+  const effectiveCustomComponents = React6.useMemo(() => {
+    if (!linkRules || linkRules.length === 0) return customComponents;
+    const callerA = customComponents?.a;
+    const aRenderer = buildLinkRulesComponent(linkRules, isUser, callerA);
+    return { ...customComponents ?? {}, a: aRenderer };
+  }, [customComponents, linkRules, isUser]);
+  const trimmedContent = preprocessed.trim();
+  const collapsibleOptions = React6.useMemo(() => {
     if (!collapsible) return {};
-    const effectiveMaxLength = maxLength ?? 1e3;
-    const effectiveMaxLines = maxLines ?? 10;
-    return { maxLength: effectiveMaxLength, maxLines: effectiveMaxLines, defaultExpanded };
+    return {
+      maxLength: maxLength ?? 1e3,
+      maxLines: maxLines ?? 10,
+      defaultExpanded
+    };
   }, [collapsible, maxLength, maxLines, defaultExpanded]);
-  const {
-    isCollapsed,
-    toggleCollapsed,
-    displayContent,
-    shouldCollapse
-  } = useCollapsibleContent(
-    trimmedContent,
-    collapsible ? collapsibleOptions : {}
-  );
-  React3.useEffect(() => {
+  const { isCollapsed, toggleCollapsed, displayContent, shouldCollapse } = useCollapsibleContent(trimmedContent, collapsible ? collapsibleOptions : {});
+  React6.useEffect(() => {
     if (collapsible && shouldCollapse && onCollapseChange) {
       onCollapseChange(isCollapsed);
     }
   }, [isCollapsed, collapsible, shouldCollapse, onCollapseChange]);
-  const components = React3.useMemo(() => {
+  const components = React6.useMemo(() => {
     const base = createMarkdownComponents(isUser, isCompact);
-    return customComponents ? { ...base, ...customComponents } : base;
-  }, [isUser, isCompact, customComponents]);
-  const schema = React3.useMemo(() => buildSchema(extraHrefProtocols), [extraHrefProtocols]);
+    return effectiveCustomComponents ? { ...base, ...effectiveCustomComponents } : base;
+  }, [isUser, isCompact, effectiveCustomComponents]);
+  const schema = React6.useMemo(() => buildSchema(effectiveProtocols), [effectiveProtocols]);
+  const urlTransform = React6.useMemo(
+    () => buildUrlTransform(effectiveProtocols),
+    [effectiveProtocols]
+  );
   const textSizeClass = isCompact ? "text-xs" : "text-sm";
   const proseClass = isCompact ? "prose-xs" : "prose-sm";
-  const isPlainText = !customComponents && !hasMarkdownSyntax(displayContent);
+  const isPlainText = !effectiveCustomComponents && !hasMarkdownSyntax(displayContent);
   if (isPlainText) {
-    return /* @__PURE__ */ jsxs("span", { className: `${textSizeClass} leading-7 break-words whitespace-pre-line font-light ${className}`, children: [
-      displayContent,
-      collapsible && shouldCollapse && /* @__PURE__ */ jsxs(Fragment, { children: [
-        isCollapsed && "... ",
-        /* @__PURE__ */ jsx(
-          CollapseToggle,
-          {
-            isCollapsed,
-            onClick: toggleCollapsed,
-            readMoreLabel,
-            showLessLabel,
-            isUser,
-            isCompact
-          }
-        )
-      ] })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: `${textSizeClass} leading-7 break-words whitespace-pre-line font-light ${className}`,
+        children: [
+          displayContent,
+          collapsible && shouldCollapse && /* @__PURE__ */ jsxs(Fragment, { children: [
+            isCollapsed && "... ",
+            /* @__PURE__ */ jsx(
+              CollapseToggle,
+              {
+                isCollapsed,
+                onClick: toggleCollapsed,
+                readMoreLabel,
+                showLessLabel,
+                isUser,
+                isCompact
+              }
+            )
+          ] })
+        ]
+      }
+    );
   }
   return /* @__PURE__ */ jsxs("div", { className, children: [
     /* @__PURE__ */ jsx(
@@ -499,7 +547,8 @@ var MarkdownMessage = /* @__PURE__ */ __name(({
           [&>*]:leading-7
         `,
         style: {
-          // Inherit colors from parent - fixes issues with external CSS variables
+          // Inherit colors from parent — fixes issues with external
+          // CSS variables overriding prose tokens.
           "--tw-prose-body": "inherit",
           "--tw-prose-headings": "inherit",
           "--tw-prose-bold": "inherit",
@@ -512,6 +561,7 @@ var MarkdownMessage = /* @__PURE__ */ __name(({
             remarkPlugins: [remarkGfm],
             rehypePlugins: [rehypeRaw, [rehypeSanitize, schema]],
             components,
+            urlTransform,
             children: displayContent
           }
         )
@@ -1284,7 +1334,7 @@ var usePlaygroundContext = /* @__PURE__ */ __name(() => {
 var PlaygroundProvider = /* @__PURE__ */ __name(({ children, config }) => {
   const [state, dispatch] = useReducer(reducer, void 0, createInitialState);
   const abortControllerRef = useRef(null);
-  const apiKeys = React3.useMemo(
+  const apiKeys = React6.useMemo(
     () => config.apiKeys ?? [],
     [config.apiKeys]
   );
@@ -1454,6 +1504,6 @@ var PlaygroundProvider = /* @__PURE__ */ __name(({ children, config }) => {
   return /* @__PURE__ */ jsx(PlaygroundContext.Provider, { value: contextValue, children });
 }, "PlaygroundProvider");
 
-export { CODE_SAMPLE_TARGETS, MarkdownMessage, Mermaid_default, PlaygroundProvider, PrettyCode_default, UrlBuilder, buildHarRequest, deduplicateEndpoints, dereferenceSchema, endpointToMarkdown, findApiKeyById, formatBytes, isValidJson, joinUrl, parseRequestHeaders, relativePath, renderSnippet, resolveAbsolute, resolveBaseUrl, sampleSchemaJson, toCompactJson, toMarkdown, toRawJson, useCollapsibleContent, usePlaygroundContext };
-//# sourceMappingURL=chunk-DKJTH4GE.mjs.map
-//# sourceMappingURL=chunk-DKJTH4GE.mjs.map
+export { CODE_SAMPLE_TARGETS, MarkdownMessage, Mermaid_default, PlaygroundProvider, PrettyCode_default, UrlBuilder, buildHarRequest, deduplicateEndpoints, dereferenceSchema, endpointToMarkdown, extractTextFromChildren, findApiKeyById, formatBytes, isValidJson, joinUrl, parseRequestHeaders, relativePath, renderSnippet, resolveAbsolute, resolveBaseUrl, sampleSchemaJson, toCompactJson, toMarkdown, toRawJson, useCollapsibleContent, usePlaygroundContext };
+//# sourceMappingURL=chunk-CKD7GNE5.mjs.map
+//# sourceMappingURL=chunk-CKD7GNE5.mjs.map