@djangocfg/ui-tools 2.1.302 → 2.1.304

package/dist/{chunk-M4BLG3RZ.cjs → chunk-FYLR232K.cjs}

@@ -5,9 +5,13 @@ var React6 = require('react');
 require('@djangocfg/ui-core/styles/palette');
 var jsxRuntime = require('react/jsx-runtime');
 var ReactMarkdown = require('react-markdown');
+var rehypeExternalLinks = require('rehype-external-links');
 var rehypeRaw = require('rehype-raw');
 var rehypeSanitize = require('rehype-sanitize');
+var remarkBreaks = require('remark-breaks');
+var remarkEmoji = require('remark-emoji');
 var remarkGfm = require('remark-gfm');
+var remarkSmartypants = require('remark-smartypants');
 var components = require('@djangocfg/ui-core/components');
 var hooks = require('@djangocfg/ui-core/hooks');
 var consola2 = require('consola');
@@ -17,9 +21,13 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React6__default = /*#__PURE__*/_interopDefault(React6);
 var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
+var rehypeExternalLinks__default = /*#__PURE__*/_interopDefault(rehypeExternalLinks);
 var rehypeRaw__default = /*#__PURE__*/_interopDefault(rehypeRaw);
 var rehypeSanitize__default = /*#__PURE__*/_interopDefault(rehypeSanitize);
+var remarkBreaks__default = /*#__PURE__*/_interopDefault(remarkBreaks);
+var remarkEmoji__default = /*#__PURE__*/_interopDefault(remarkEmoji);
 var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
+var remarkSmartypants__default = /*#__PURE__*/_interopDefault(remarkSmartypants);
 var consola2__default = /*#__PURE__*/_interopDefault(consola2);
 
 function smartTruncate(content, maxLength) {
@@ -199,7 +207,7 @@ function hasMarkdownSyntax(text) {
   return patterns.some((p) => p.test(text));
 }
 chunkWGEGR3DF_cjs.__name(hasMarkdownSyntax, "hasMarkdownSyntax");
-var MermaidClient = React6.lazy(() => import('./Mermaid.client-RSWUUHIL.cjs'));
+var MermaidClient = React6.lazy(() => import('./Mermaid.client-W76R5AKJ.cjs'));
 var LoadingFallback = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center min-h-[100px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-6 w-6 border-b-2 border-primary" }) }), "LoadingFallback");
 var Mermaid = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(React6.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(LoadingFallback, {}), children: /* @__PURE__ */ jsxRuntime.jsx(MermaidClient, { ...props }) });
@@ -262,39 +270,38 @@ function buildUrlTransform(extraProtocols) {
   };
 }
 chunkWGEGR3DF_cjs.__name(buildUrlTransform, "buildUrlTransform");
-var CodeBlock = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ code, language, isUser, isCompact = false }) => {
+var CodeBlock = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ code, language, isCompact = false }) => {
   const theme = hooks.useResolvedTheme();
+  const textSizeClass = isCompact ? "text-xs" : "text-sm";
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-3", children: /* @__PURE__ */ jsxRuntime.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__ */ chunkWGEGR3DF_cjs.__name(({ code, isUser }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group my-3", children: [
-  /* @__PURE__ */ jsxRuntime.jsx(
-    components.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("code", { children: code }) })
-] }), "CodeBlockFallback");
+var CodeBlockFallback = /* @__PURE__ */ chunkWGEGR3DF_cjs.__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__ */ jsxRuntime.jsxs("div", { className: "relative group my-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      components.CopyButton,
+      {
+        value: code,
+        variant: "ghost",
+        className: copyButtonClass,
+        title: "Copy code"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "p-3 rounded text-xs font-mono overflow-x-auto bg-code text-code-foreground border border-code-border", children: /* @__PURE__ */ jsxRuntime.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";
@@ -310,13 +317,18 @@ function createMarkdownComponents(isUser = false, isCompact = false) {
     ul: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ children }) => /* @__PURE__ */ jsxRuntime.jsx("ul", { className: `list-disc list-inside mb-2 space-y-1 ${textSize}`, children }), "ul"),
     ol: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ children }) => /* @__PURE__ */ jsxRuntime.jsx("ol", { className: `list-decimal list-inside mb-2 space-y-1 ${textSize}`, children }), "ol"),
     li: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ children }) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "break-words", children }), "li"),
-    a: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ href, children }) => /* @__PURE__ */ jsxRuntime.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__ */ chunkWGEGR3DF_cjs.__name(({ href, children, ...rest }) => /* @__PURE__ */ jsxRuntime.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"),
@@ -340,7 +352,7 @@ function createMarkdownComponents(isUser = false, isCompact = false) {
         return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-3 p-3 bg-muted rounded text-sm text-muted-foreground", children: "No content available" });
       }
       if (language === "mermaid") {
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-3 max-w-full overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsx(Mermaid_default, { chart: codeContent, className: "max-w-[600px] mx-auto", isCompact }) });
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-3 w-full", children: /* @__PURE__ */ jsxRuntime.jsx(Mermaid_default, { chart: codeContent, isCompact }) });
       }
       try {
         return /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { code: codeContent, language, isUser, isCompact });
@@ -353,16 +365,43 @@ function createMarkdownComponents(isUser = false, isCompact = false) {
       if (className?.includes("language-")) {
         return /* @__PURE__ */ jsxRuntime.jsx("code", { className, children });
       }
-      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("code", { className: `px-1 py-0.5 rounded font-mono text-[0.875em] ${inlineCodeClass} break-all`, children: extractTextFromChildren(children) });
     }, "code"),
-    blockquote: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ children }) => /* @__PURE__ */ jsxRuntime.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__ */ chunkWGEGR3DF_cjs.__name(({ children }) => {
+      const cls = isUser ? "border-primary-foreground/40 text-primary-foreground/80" : "border-border text-muted-foreground";
+      return /* @__PURE__ */ jsxRuntime.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__ */ chunkWGEGR3DF_cjs.__name(({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto my-3", children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: `min-w-full ${textSize} border-collapse`, children }) }), "table"),
-    thead: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ children }) => /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-muted/50", children }), "thead"),
+    thead: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ children }) => /* @__PURE__ */ jsxRuntime.jsx("thead", { className: isUser ? "bg-primary-foreground/10" : "bg-muted/40", children }), "thead"),
     tbody: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ children }) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { children }), "tbody"),
-    tr: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ children }) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b border-border/50", children }), "tr"),
-    th: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ children }) => /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-2 py-1 text-left font-medium break-words", children }), "th"),
-    td: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ children }) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-2 py-1 break-words", children }), "td"),
-    hr: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "my-3 border-0 h-px bg-border" }), "hr"),
+    tr: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ children }) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: isUser ? "border-b border-primary-foreground/15" : "border-b border-border", children }), "tr"),
+    th: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ children }) => {
+      const borderCls = isUser ? "border-primary-foreground/25" : "border-border";
+      return /* @__PURE__ */ jsxRuntime.jsx("th", { className: `px-2 py-1.5 text-left font-semibold border-b ${borderCls} break-words`, children });
+    }, "th"),
+    td: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ children }) => /* @__PURE__ */ jsxRuntime.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__ */ chunkWGEGR3DF_cjs.__name(() => /* @__PURE__ */ jsxRuntime.jsx(
+      "hr",
+      {
+        className: `my-4 border-0 h-px ${isUser ? "bg-primary-foreground/20" : "bg-border"}`
+      }
+    ), "hr"),
     strong: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ children }) => /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "font-semibold", children }), "strong"),
     em: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ children }) => /* @__PURE__ */ jsxRuntime.jsx("em", { className: "italic", children }), "em")
   };
@@ -558,9 +597,14 @@ var MarkdownMessage = /* @__PURE__ */ chunkWGEGR3DF_cjs.__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
@@ -574,8 +618,12 @@ var MarkdownMessage = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({
         children: /* @__PURE__ */ jsxRuntime.jsx(
           ReactMarkdown__default.default,
           {
-            remarkPlugins: [remarkGfm__default.default],
-            rehypePlugins: [rehypeRaw__default.default, [rehypeSanitize__default.default, schema]],
+            remarkPlugins: [remarkGfm__default.default, remarkBreaks__default.default, remarkSmartypants__default.default, remarkEmoji__default.default],
+            rehypePlugins: [
+              rehypeRaw__default.default,
+              [rehypeSanitize__default.default, schema],
+              [rehypeExternalLinks__default.default, { target: "_blank", rel: ["noopener", "noreferrer"] }]
+            ],
             components,
             urlTransform,
             children: displayContent
@@ -1546,5 +1594,5 @@ exports.toMarkdown = toMarkdown;
 exports.toRawJson = toRawJson;
 exports.useCollapsibleContent = useCollapsibleContent;
 exports.usePlaygroundContext = usePlaygroundContext;
-//# sourceMappingURL=chunk-M4BLG3RZ.cjs.map
-//# sourceMappingURL=chunk-M4BLG3RZ.cjs.map
+//# sourceMappingURL=chunk-FYLR232K.cjs.map
+//# sourceMappingURL=chunk-FYLR232K.cjs.map