@djangocfg/ui-tools 2.1.301 → 2.1.303

package/dist/{chunk-SEXWBCLX.cjs → chunk-PFKR6ZPZ.cjs}

@@ -150,6 +150,17 @@ function extractTextFromChildren(children) {
   return "";
 }
 chunkWGEGR3DF_cjs.__name(extractTextFromChildren, "extractTextFromChildren");
+function looksLikePlainProse(text) {
+  const trimmed = text.trim();
+  if (trimmed.length === 0) return true;
+  if (trimmed.length > 500) return false;
+  if (/\n\s*\n/.test(trimmed)) return false;
+  const newlineCount = (trimmed.match(/\n/g) || []).length;
+  if (newlineCount > 4) return false;
+  if (hasMarkdownSyntax(trimmed)) return false;
+  return true;
+}
+chunkWGEGR3DF_cjs.__name(looksLikePlainProse, "looksLikePlainProse");
 function hasMarkdownSyntax(text) {
   if (text.trim().includes("\n")) return true;
   if (/<\/?[a-zA-Z][a-zA-Z0-9-]*(\s[^>]*)?\/?>/.test(text)) return true;
@@ -188,7 +199,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 }) });
@@ -251,54 +262,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: textSizeClass,
+      customBg: "bg-code",
+      mode: theme,
+      isCompact,
+      scrollIsolation: false
+    }
+  ) });
+}, "CodeBlock");
+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: `
-          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"}
-        `,
+        className: copyButtonClass,
         title: "Copy code"
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      PrettyCode_default,
-      {
-        data: code,
-        language,
-        className: isCompact ? "text-xs" : "text-sm",
-        customBg: isUser ? "bg-white/10" : "bg-muted dark:bg-muted",
-        mode: theme,
-        isCompact
-      }
-    )
+    /* @__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 }) })
   ] });
-}, "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");
+}, "CodeBlockFallback");
 function createMarkdownComponents(isUser = false, isCompact = false) {
   const textSize = isCompact ? "text-xs" : "text-sm";
   const headingBase = isCompact ? "text-sm" : "text-base";
@@ -344,7 +339,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 });
@@ -357,16 +352,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")
   };
@@ -471,6 +493,7 @@ var MarkdownMessage = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({
   className = "",
   isUser = false,
   isCompact = false,
+  plainText,
   customComponents,
   extraHrefProtocols,
   linkRules,
@@ -522,12 +545,16 @@ var MarkdownMessage = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({
   );
   const textSizeClass = isCompact ? "text-xs" : "text-sm";
   const proseClass = isCompact ? "prose-xs" : "prose-sm";
-  const isPlainText = !effectiveCustomComponents && !hasMarkdownSyntax(displayContent);
+  const customComponentsBeyondLinks = React6__default.default.useMemo(() => {
+    if (!customComponents) return false;
+    return Object.keys(customComponents).some((k) => k !== "a");
+  }, [customComponents]);
+  const isPlainText = plainText !== void 0 ? plainText : !customComponentsBeyondLinks && looksLikePlainProse(displayContent);
   if (isPlainText) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      "span",
+      "div",
       {
-        className: `${textSizeClass} leading-7 break-words whitespace-pre-line font-light ${className}`,
+        className: `${textSizeClass} leading-snug break-words whitespace-pre-wrap ${className}`,
         children: [
           displayContent,
           collapsible && shouldCollapse && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -555,7 +582,16 @@ var MarkdownMessage = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({
         className: `
           prose ${proseClass} max-w-none break-words overflow-hidden ${textSizeClass}
           ${isUser ? "prose-invert" : "dark:prose-invert"}
-          [&>*]:leading-7
+          [&>*]:leading-relaxed
+          [&>*:first-child]:mt-0 [&>*:last-child]:mb-0
+          [&_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
@@ -1541,5 +1577,5 @@ exports.toMarkdown = toMarkdown;
 exports.toRawJson = toRawJson;
 exports.useCollapsibleContent = useCollapsibleContent;
 exports.usePlaygroundContext = usePlaygroundContext;
-//# sourceMappingURL=chunk-SEXWBCLX.cjs.map
-//# sourceMappingURL=chunk-SEXWBCLX.cjs.map
+//# sourceMappingURL=chunk-PFKR6ZPZ.cjs.map
+//# sourceMappingURL=chunk-PFKR6ZPZ.cjs.map