@djangocfg/ui-tools 2.1.302 → 2.1.304

package/dist/{chunk-47NGNO5U.mjs → chunk-6HNAPVZ2.mjs}

@@ -3,9 +3,13 @@ import React6, { lazy, createContext, useState, useMemo, useCallback, Suspense,
 import '@djangocfg/ui-core/styles/palette';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import ReactMarkdown from 'react-markdown';
+import rehypeExternalLinks from 'rehype-external-links';
 import rehypeRaw from 'rehype-raw';
 import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
+import remarkBreaks from 'remark-breaks';
+import remarkEmoji from 'remark-emoji';
 import remarkGfm from 'remark-gfm';
+import remarkSmartypants from 'remark-smartypants';
 import { CopyButton } from '@djangocfg/ui-core/components';
 import { useResolvedTheme, useSessionStorage } from '@djangocfg/ui-core/hooks';
 import consola2 from 'consola';
@@ -188,7 +192,7 @@ function hasMarkdownSyntax(text) {
   return patterns.some((p) => p.test(text));
 }
 __name(hasMarkdownSyntax, "hasMarkdownSyntax");
-var MermaidClient = lazy(() => import('./Mermaid.client-XFQ74OYN.mjs'));
+var MermaidClient = lazy(() => import('./Mermaid.client-SXRRI2YW.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 }) });
@@ -251,39 +255,38 @@ function buildUrlTransform(extraProtocols) {
   };
 }
 __name(buildUrlTransform, "buildUrlTransform");
-var CodeBlock = /* @__PURE__ */ __name(({ code, language, isUser, isCompact = false }) => {
+var CodeBlock = /* @__PURE__ */ __name(({ code, language, isCompact = false }) => {
   const theme = useResolvedTheme();
+  const textSizeClass = isCompact ? "text-xs" : "text-sm";
   return /* @__PURE__ */ jsx("div", { className: "my-3", children: /* @__PURE__ */ jsx(
     PrettyCode_default,
     {
       data: code,
       language,
-      className: isCompact ? "text-xs" : "text-sm",
-      customBg: isUser ? "bg-white/10" : "bg-muted dark:bg-muted",
+      className: textSizeClass,
+      customBg: "bg-code",
       mode: theme,
-      isCompact
+      isCompact,
+      scrollIsolation: false
     }
   ) });
 }, "CodeBlock");
-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");
+var CodeBlockFallback = /* @__PURE__ */ __name(({ code, isUser }) => {
+  const copyHoverClass = isUser ? "hover:bg-white/20 text-white" : "hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground";
+  const copyButtonClass = `absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity h-8 w-8 ${copyHoverClass}`;
+  return /* @__PURE__ */ jsxs("div", { className: "relative group my-3", children: [
+    /* @__PURE__ */ jsx(
+      CopyButton,
+      {
+        value: code,
+        variant: "ghost",
+        className: copyButtonClass,
+        title: "Copy code"
+      }
+    ),
+    /* @__PURE__ */ jsx("pre", { className: "p-3 rounded text-xs font-mono overflow-x-auto bg-code text-code-foreground border border-code-border", 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";
@@ -299,13 +302,18 @@ function createMarkdownComponents(isUser = false, isCompact = false) {
     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"),
-    a: /* @__PURE__ */ __name(({ href, children }) => /* @__PURE__ */ jsx(
+    // `target` / `rel` for external links are NOT set here — the
+    // rehype-external-links plugin tags them on the rehype side, so
+    // every `<a>` that sanitize let through gets the same security
+    // treatment regardless of which renderer (default vs linkRules
+    // override) emitted it. Doing it twice here would just duplicate
+    // attributes; doing it only here would miss the linkRules path.
+    a: /* @__PURE__ */ __name(({ href, children, ...rest }) => /* @__PURE__ */ jsx(
       "a",
       {
+        ...rest,
         href,
         className: `${textSize} ${isUser ? "text-white/90 underline hover:text-white" : "text-primary underline hover:text-primary/80"} transition-colors break-all`,
-        target: href?.startsWith("http") ? "_blank" : void 0,
-        rel: href?.startsWith("http") ? "noopener noreferrer" : void 0,
         children
       }
     ), "a"),
@@ -329,7 +337,7 @@ function createMarkdownComponents(isUser = false, isCompact = false) {
         return /* @__PURE__ */ jsx("div", { className: "my-3 p-3 bg-muted rounded text-sm text-muted-foreground", children: "No content available" });
       }
       if (language === "mermaid") {
-        return /* @__PURE__ */ jsx("div", { className: "my-3 max-w-full overflow-x-auto", children: /* @__PURE__ */ jsx(Mermaid_default, { chart: codeContent, className: "max-w-[600px] mx-auto", isCompact }) });
+        return /* @__PURE__ */ jsx("div", { className: "my-3 w-full", children: /* @__PURE__ */ jsx(Mermaid_default, { chart: codeContent, isCompact }) });
       }
       try {
         return /* @__PURE__ */ jsx(CodeBlock, { code: codeContent, language, isUser, isCompact });
@@ -342,16 +350,43 @@ function createMarkdownComponents(isUser = false, isCompact = false) {
       if (className?.includes("language-")) {
         return /* @__PURE__ */ jsx("code", { className, children });
       }
-      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) });
+      const inlineCodeClass = isUser ? "bg-primary-foreground/15 text-primary-foreground" : "bg-code-inline text-code-inline-foreground";
+      return /* @__PURE__ */ jsx("code", { className: `px-1 py-0.5 rounded font-mono text-[0.875em] ${inlineCodeClass} break-all`, children: extractTextFromChildren(children) });
     }, "code"),
-    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"),
+    // Modern chat convention drops italic on blockquotes — italic +
+    // tight bubble = hard to read. Border-left at 2px (4px reads
+    // heavy in a 320–480px bubble). On the saturated user bubble we
+    // use a primary-foreground tint; on the assistant bubble we use
+    // the muted-foreground role for de-emphasis.
+    blockquote: /* @__PURE__ */ __name(({ children }) => {
+      const cls = isUser ? "border-primary-foreground/40 text-primary-foreground/80" : "border-border text-muted-foreground";
+      return /* @__PURE__ */ jsx("blockquote", { className: `${textSize} border-l-2 pl-3 my-3 break-words ${cls}`, children });
+    }, "blockquote"),
+    // Tables: outer wrapper handles overflow, inner `<table>`
+    // inherits the chat-density text size. Borders / header use
+    // semantic tokens — `border-code-border` for the assistant
+    // (matches the code-fence panel for visual cohesion when both
+    // appear in the same reply); primary-foreground/N for the user
+    // bubble so lines read against the saturated `bg-primary`.
     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"),
+    thead: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("thead", { className: isUser ? "bg-primary-foreground/10" : "bg-muted/40", 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"),
-    hr: /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx("hr", { className: "my-3 border-0 h-px bg-border" }), "hr"),
+    tr: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("tr", { className: isUser ? "border-b border-primary-foreground/15" : "border-b border-border", children }), "tr"),
+    th: /* @__PURE__ */ __name(({ children }) => {
+      const borderCls = isUser ? "border-primary-foreground/25" : "border-border";
+      return /* @__PURE__ */ jsx("th", { className: `px-2 py-1.5 text-left font-semibold border-b ${borderCls} break-words`, children });
+    }, "th"),
+    td: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("td", { className: "px-2 py-1.5 break-words", children }), "td"),
+    // Soft separator. ChatGPT / Slack / Linear strip the visible
+    // line, Claude.ai keeps a hairline. We follow Claude — present
+    // but quiet. Palette switches by role so the hairline reads on
+    // both surfaces.
+    hr: /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx(
+      "hr",
+      {
+        className: `my-4 border-0 h-px ${isUser ? "bg-primary-foreground/20" : "bg-border"}`
+      }
+    ), "hr"),
     strong: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("strong", { className: "font-semibold", children }), "strong"),
     em: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx("em", { className: "italic", children }), "em")
   };
@@ -547,9 +582,14 @@ var MarkdownMessage = /* @__PURE__ */ __name(({
           ${isUser ? "prose-invert" : "dark:prose-invert"}
           [&>*]:leading-relaxed
           [&>*:first-child]:mt-0 [&>*:last-child]:mb-0
-          [&_p]:my-0 [&_p+p]:mt-2
-          [&_ul]:my-2 [&_ol]:my-2 [&_pre]:my-2 [&_blockquote]:my-2
-          [&_h1]:mt-3 [&_h1]:mb-1 [&_h2]:mt-3 [&_h2]:mb-1 [&_h3]:mt-2 [&_h3]:mb-1
+          [&_p]:my-2
+          [&_ul]:my-2 [&_ol]:my-2 [&_ul]:pl-5 [&_ol]:pl-5
+          [&_li]:my-1 [&_li>p]:my-0
+          [&_pre]:my-3
+          [&_h1]:mt-4 [&_h1]:mb-2 [&_h1]:text-base [&_h1]:font-semibold
+          [&_h2]:mt-3.5 [&_h2]:mb-1.5 [&_h2]:text-[15px] [&_h2]:font-semibold
+          [&_h3]:mt-3 [&_h3]:mb-1 [&_h3]:text-sm [&_h3]:font-medium
+          [&_h4]:mt-3 [&_h4]:mb-1 [&_h4]:text-sm [&_h4]:font-medium
         `,
         style: {
           // Inherit colors from parent — fixes issues with external
@@ -563,8 +603,12 @@ var MarkdownMessage = /* @__PURE__ */ __name(({
         children: /* @__PURE__ */ jsx(
           ReactMarkdown,
           {
-            remarkPlugins: [remarkGfm],
-            rehypePlugins: [rehypeRaw, [rehypeSanitize, schema]],
+            remarkPlugins: [remarkGfm, remarkBreaks, remarkSmartypants, remarkEmoji],
+            rehypePlugins: [
+              rehypeRaw,
+              [rehypeSanitize, schema],
+              [rehypeExternalLinks, { target: "_blank", rel: ["noopener", "noreferrer"] }]
+            ],
             components,
             urlTransform,
             children: displayContent
@@ -1510,5 +1554,5 @@ var PlaygroundProvider = /* @__PURE__ */ __name(({ children, config }) => {
 }, "PlaygroundProvider");
 
 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-47NGNO5U.mjs.map
-//# sourceMappingURL=chunk-47NGNO5U.mjs.map
+//# sourceMappingURL=chunk-6HNAPVZ2.mjs.map
+//# sourceMappingURL=chunk-6HNAPVZ2.mjs.map