@djangocfg/ui-tools 2.1.302 → 2.1.303

package/src/components/markdown/MarkdownMessage/CodeBlock.tsx

@@ -19,18 +19,34 @@ interface CodeBlockProps {
  * branch below still ships its own button because the plain <pre>
  * has no toolbar of its own.
  */
-export const CodeBlock: React.FC<CodeBlockProps> = ({ code, language, isUser, isCompact = false }) => {
+export const CodeBlock: React.FC<CodeBlockProps> = ({ code, language, isCompact = false }) => {
   const theme = useResolvedTheme();
 
+  // Hoist derived values out of JSX (COMPONENTS.md
+  // "Data Preparation Before Render"):
+  //   `textSizeClass` — chat-density font tier, so the JSX line
+  //                     stays a one-liner.
+  // The `--code` token (ui-core/styles/theme/tokens.css) handles the
+  // palette in both themes / both bubble roles; we don't branch on
+  // `isUser` here on purpose.
+  const textSizeClass = isCompact ? 'text-xs' : 'text-sm';
+
   return (
     <div className="my-3">
       <PrettyCode
         data={code}
         language={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}
+        // Disable click-to-scroll-isolation in chat markdown: code
+        // fences here are part of an assistant reply, not a docs
+        // viewer. Forcing the user to click into a small block to
+        // scroll past it interrupts the reading flow. The standalone
+        // PrettyCode use cases (docs, diff viewers, long code panes)
+        // keep the default `true`.
+        scrollIsolation={false}
       />
     </div>
   );
@@ -38,26 +54,27 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({ code, language, isUser, is
 
 /** Simple `<pre>` fallback used when CodeBlock throws (lazy module
  *  failure, missing PrettyCode peer, etc). */
-export const CodeBlockFallback: React.FC<CodeBlockProps> = ({ code, isUser }) => (
-  <div className="relative group my-3">
-    <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"
-    />
-    <pre className={`
-      p-3 rounded text-xs font-mono overflow-x-auto
-      ${isUser ? 'bg-white/10 text-white' : 'bg-muted text-foreground'}
-    `}>
-      <code>{code}</code>
-    </pre>
-  </div>
-);
+export const CodeBlockFallback: React.FC<CodeBlockProps> = ({ code, isUser }) => {
+  // See CodeBlock above for the spirit of this layout — palette
+  // pre-computed before render.
+  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 (
+    <div className="relative group my-3">
+      <CopyButton
+        value={code}
+        variant="ghost"
+        className={copyButtonClass}
+        title="Copy code"
+      />
+      <pre className="p-3 rounded text-xs font-mono overflow-x-auto bg-code text-code-foreground border border-code-border">
+        <code>{code}</code>
+      </pre>
+    </div>
+  );
+};

package/src/components/markdown/MarkdownMessage/MarkdownMessage.story.tsx

@@ -213,6 +213,117 @@ curl -sSL cmdop.com/install.sh | bash
 
 Если что-то не работает — скажи.`;
 
+// Mermaid payload — exercises the `mermaid` fence branch in
+// components.tsx (lines 101–106). MarkdownMessage hands the code body
+// to <Mermaid> instead of PrettyCode when the fence language is
+// `mermaid`. We pick a small flowchart + a sequence diagram so the
+// story reflects what an LLM typically emits.
+const MERMAID_CONTENT = `Here's the chat session lifecycle:
+
+\`\`\`mermaid
+flowchart LR
+  A[User types] --> B[ChatProvider]
+  B --> C{streaming?}
+  C -->|yes| D[CancelMessage]
+  C -->|no| E[SendMessage]
+  D --> E
+  E --> F[Agent stream]
+  F --> G[Tokens arrive]
+  G --> H[Reducer dispatch]
+  H --> I[Bubble re-renders]
+\`\`\`
+
+And the cancel flow as a sequence:
+
+\`\`\`mermaid
+sequenceDiagram
+  participant U as User
+  participant C as ChatInput
+  participant P as ChatProvider
+  participant S as ChatService
+  U->>C: Press Enter (mid-stream)
+  C->>P: sendMessage(text)
+  P->>S: CancelMessage
+  S-->>P: STREAM_CANCELLED
+  P->>S: SendMessage(text)
+  S-->>P: STREAM_START
+\`\`\`
+
+The renderer routes \`mermaid\` fences to the diagram component;
+non-mermaid fences (above) keep going through PrettyCode.`;
+
+// Kitchen-sink: every block element the renderer can produce, in one
+// payload, so any spacing regression is visible at a glance. Pairs
+// neighbouring elements that are easy to break — `p → hr → p`,
+// `code → list`, `list → table → list`, blockquote-with-paragraphs.
+const KITCHEN_SINK = `# Top-level heading
+
+Short intro paragraph that sits right under the heading. The next
+paragraph should have a clear gap from this one, not be glued to it.
+
+Second paragraph — verifies \`p + p\` spacing.
+
+---
+
+After the divider, the next paragraph should still breathe. The
+divider itself is a soft hairline, not a heavy 1px gray bar.
+
+## Subheading h2
+
+Plain *italic*, **bold**, and \`inline code\` mid-sentence. Inline
+code should sit on the line, not push it taller.
+
+### Subheading h3
+
+A short list:
+
+- Bullet one with a [link](https://example.com)
+- Bullet two with \`inline code\`
+- Bullet three — short
+
+A numbered list:
+
+1. First step
+2. Second step with **bold** inside
+3. Third step
+
+A loose list (paragraph-wrapped \`<li>\`):
+
+- First item
+
+  with a follow-up paragraph that should NOT explode the list.
+
+- Second item, also loose.
+
+#### Heading h4
+
+> Blockquote without italic, with a left border. Lighter colour for
+> de-emphasis. Multi-line quotes wrap cleanly.
+>
+> Second paragraph inside the same blockquote.
+
+A code fence:
+
+\`\`\`go
+func add(a, b int) int {
+    // verifies code block spacing, rounded corners, dark bg
+    return a + b
+}
+\`\`\`
+
+A table — wraps inside a horizontally scrollable container:
+
+| Field | Type | Notes |
+|---|---|---|
+| id | string | UUID |
+| name | string | display name |
+| online | bool | last-heartbeat ≤ 60s |
+
+---
+
+Closing paragraph after a second divider, to verify spacing holds at
+the very end too.`;
+
 function ChatBubble({
   role,
   content,
@@ -383,3 +494,100 @@ export const ChatBubbles = () => (
     </div>
   </div>
 );
+
+// Kitchen-sink: stress-test every element the renderer can emit in a
+// single bubble. If something regresses (e.g. paragraphs collapse, hr
+// shows a heavy gray bar, table loses borders, list items glue to
+// each other), it's visible at a glance.
+//
+// Numbers in MarkdownMessage.tsx come from research on ChatGPT /
+// Claude.ai / Cursor 2025 — see KitchenSink output as the visual
+// contract. Don't tune values by feel; pair-check against this view.
+export const KitchenSink = () => (
+  <div className="mx-auto max-w-2xl space-y-6 p-6">
+    <div>
+      <h3 className="mb-2 text-sm font-semibold">
+        Every block element in one bubble
+      </h3>
+      <p className="mb-3 text-xs text-muted-foreground">
+        Visual contract for the renderer. Heading sizes downscaled
+        chat-style (h1 ≈ body), <code>p</code>/<code>ul</code>/
+        <code>ol</code>/<code>pre</code>/<code>blockquote</code>/
+        <code>hr</code>/<code>table</code> all share a coherent
+        rhythm. Loose lists keep their density — no exploded gap on
+        paragraph-wrapped <code>&lt;li&gt;</code>.
+      </p>
+      <div className="rounded-lg border border-border bg-card p-4">
+        <ChatBubble
+          role="assistant"
+          content={KITCHEN_SINK}
+          rules={subtleRules}
+        />
+      </div>
+    </div>
+
+    <div>
+      <h3 className="mb-2 text-sm font-semibold">
+        Same payload on the user-side palette
+      </h3>
+      <p className="mb-3 text-xs text-muted-foreground">
+        Verifies that <code>prose-invert</code> doesn't break any of
+        the new rules — saturated bubbles need the same spacing.
+      </p>
+      <div className="rounded-lg border border-border bg-card p-4">
+        <ChatBubble
+          role="user"
+          content={KITCHEN_SINK}
+          rules={onPrimaryRules}
+        />
+      </div>
+    </div>
+  </div>
+);
+
+// Mermaid diagrams. Live-renders the fence body via the <Mermaid>
+// tool (lazy-loaded). Useful as a manual smoke test for: (1) the
+// `language === 'mermaid'` branch in components.tsx, (2) the SVG
+// scaling inside a chat-density bubble, (3) interaction with the
+// surrounding markdown spacing rules (paragraph above/below the
+// diagram should keep the same rhythm as around a code fence).
+export const MermaidDiagrams = () => (
+  <div className="mx-auto max-w-2xl space-y-6 p-6">
+    <div>
+      <h3 className="mb-2 text-sm font-semibold">
+        Mermaid in an assistant bubble
+      </h3>
+      <p className="mb-3 text-xs text-muted-foreground">
+        Two diagrams (flowchart + sequence) wrapped in surrounding
+        prose. Verifies that <code>```mermaid</code> fences route to{' '}
+        <code>&lt;Mermaid&gt;</code> and that the SVG fits the
+        bubble's max-width without breaking the layout.
+      </p>
+      <div className="rounded-lg border border-border bg-card p-4">
+        <ChatBubble
+          role="assistant"
+          content={MERMAID_CONTENT}
+          rules={subtleRules}
+        />
+      </div>
+    </div>
+
+    <div>
+      <h3 className="mb-2 text-sm font-semibold">
+        Same payload on the user-side palette
+      </h3>
+      <p className="mb-3 text-xs text-muted-foreground">
+        On a saturated <code>bg-primary</code> bubble the diagram
+        keeps its own surface — Mermaid renders SVG with its own
+        background, independent of the bubble palette.
+      </p>
+      <div className="rounded-lg border border-border bg-card p-4">
+        <ChatBubble
+          role="user"
+          content={MERMAID_CONTENT}
+          rules={onPrimaryRules}
+        />
+      </div>
+    </div>
+  </div>
+);

package/src/components/markdown/MarkdownMessage/MarkdownMessage.tsx

@@ -177,9 +177,14 @@ export const MarkdownMessage: React.FC<MarkdownMessageProps> = ({
           ${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

package/src/components/markdown/MarkdownMessage/components.tsx

@@ -99,9 +99,15 @@ export function createMarkdownComponents(
       }
 
       if (language === 'mermaid') {
+        // Inline render fits the bubble width; the Mermaid component
+        // owns its own click-to-fullscreen modal which sizes against
+        // the viewport, so we don't cap it here. A previous version
+        // hardcoded `max-w-[600px]` and that constraint leaked into
+        // the fullscreen modal too — diagram rendered at 600px in the
+        // middle of an empty viewport.
         return (
-          <div className="my-3 max-w-full overflow-x-auto">
-            <Mermaid chart={codeContent} className="max-w-[600px] mx-auto" isCompact={isCompact} />
+          <div className="my-3 w-full">
+            <Mermaid chart={codeContent} isCompact={isCompact} />
           </div>
         );
       }
@@ -120,33 +126,82 @@ export function createMarkdownComponents(
       if (className?.includes('language-')) {
         return <code className={className}>{children}</code>;
       }
+      // Inline `<code>` uses the design system's `--code-inline`
+      // token. One semantic chip surface across both themes; on a
+      // user bubble we still palette-switch with `text-primary-
+      // foreground` because the inline chip blends INTO the bubble
+      // — there's no panel boundary like a fence has. We trade a
+      // perfect "code surface" tone here for legible body inheritance,
+      // matching ChatGPT's behaviour in coloured user bubbles.
+      const inlineCodeClass = isUser
+        ? 'bg-primary-foreground/15 text-primary-foreground'
+        : 'bg-code-inline text-code-inline-foreground';
       return (
-        <code className="px-1.5 py-0.5 rounded text-xs font-mono bg-muted text-foreground break-all">
+        <code className={`px-1 py-0.5 rounded font-mono text-[0.875em] ${inlineCodeClass} break-all`}>
           {extractTextFromChildren(children)}
         </code>
       );
     },
 
-    blockquote: ({ children }) => (
-      <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: ({ children }) => {
+      const cls = isUser
+        ? 'border-primary-foreground/40 text-primary-foreground/80'
+        : 'border-border text-muted-foreground';
+      return (
+        <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: ({ children }) => (
       <div className="overflow-x-auto my-3">
         <table className={`min-w-full ${textSize} border-collapse`}>{children}</table>
       </div>
     ),
-    thead: ({ children }) => <thead className="bg-muted/50">{children}</thead>,
+    thead: ({ children }) => (
+      <thead className={isUser ? 'bg-primary-foreground/10' : 'bg-muted/40'}>
+        {children}
+      </thead>
+    ),
     tbody: ({ children }) => <tbody>{children}</tbody>,
-    tr: ({ children }) => <tr className="border-b border-border/50">{children}</tr>,
-    th: ({ children }) => (
-      <th className="px-2 py-1 text-left font-medium break-words">{children}</th>
+    tr: ({ children }) => (
+      <tr className={isUser ? 'border-b border-primary-foreground/15' : 'border-b border-border'}>
+        {children}
+      </tr>
     ),
-    td: ({ children }) => <td className="px-2 py-1 break-words">{children}</td>,
+    th: ({ children }) => {
+      const borderCls = isUser ? 'border-primary-foreground/25' : 'border-border';
+      return (
+        <th className={`px-2 py-1.5 text-left font-semibold border-b ${borderCls} break-words`}>
+          {children}
+        </th>
+      );
+    },
+    td: ({ children }) => <td className="px-2 py-1.5 break-words">{children}</td>,
 
-    hr: () => <hr className="my-3 border-0 h-px bg-border" />,
+    // 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: () => (
+      <hr
+        className={`my-4 border-0 h-px ${
+          isUser ? 'bg-primary-foreground/20' : 'bg-border'
+        }`}
+      />
+    ),
 
     strong: ({ children }) => <strong className="font-semibold">{children}</strong>,
     em: ({ children }) => <em className="italic">{children}</em>,

package/src/tools/Mermaid/Mermaid.client.tsx

@@ -15,6 +15,14 @@ interface MermaidProps {
     isCompact?: boolean;
     /** Enable click-to-fullscreen functionality (default: true) */
     fullscreen?: boolean;
+    /**
+     * Enable the FloatingToolbar's "click to scroll" lock overlay.
+     * Defaults to `false` — Mermaid SVGs are short, the diagram itself
+     * doesn't scroll internally, and a lock overlay just steals
+     * wheel events from the page. Standalone callers can opt in if
+     * they have a reason to.
+     */
+    scrollIsolation?: boolean;
 }
 
 const Mermaid: React.FC<MermaidProps> = ({
@@ -22,6 +30,7 @@ const Mermaid: React.FC<MermaidProps> = ({
     className = '',
     isCompact = false,
     fullscreen = true,
+    scrollIsolation = false,
 }) => {
     const containerRef = useRef<HTMLDivElement>(null);
     const theme = useResolvedTheme();
@@ -58,7 +67,7 @@ const Mermaid: React.FC<MermaidProps> = ({
                 )}
 
                 {svgContent && !isRendering && (
-                    <FloatingToolbar containerRef={containerRef}>
+                    <FloatingToolbar containerRef={containerRef} scrollIsolation={scrollIsolation}>
                         <CopyAction value={chart} title="Copy source" />
                         {fullscreen && (
                             <FullscreenAction onToggle={openFullscreen} title="Fullscreen" />

package/src/tools/Mermaid/components/MermaidFullscreenModal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { X, ZoomIn, ZoomOut, RotateCcw } from 'lucide-react';
 import { TransformWrapper, TransformComponent, useControls } from 'react-zoom-pan-pinch';
@@ -47,6 +47,58 @@ export const MermaidFullscreenModal: React.FC<MermaidFullscreenModalProps> = ({
     onClose,
     onBackdropClick,
 }) => {
+    // Auto-fit scale on open. Two failure modes drove this design:
+    //
+    //   1. Stale state across re-opens. Without a reset, the second
+    //      open would still see the previous fit value in state; if
+    //      the new SVG had the same dimensions the `key` swap below
+    //      wouldn't fire and TransformWrapper would skip re-init.
+    //   2. SVG not in DOM yet at first rAF. Mermaid renders into
+    //      `fullscreenRef` after the modal portal mounts; on a fast
+    //      paint the first `querySelector('svg')` returned null and
+    //      the scale stayed at the fallback `1`. Retry across a few
+    //      frames until the bbox is real, then commit.
+    //
+    // `openSeq` increments on every open so the `key` always changes,
+    // forcing a fresh TransformWrapper instance even when the fit
+    // value happens to repeat.
+    const [initialScale, setInitialScale] = useState<number | null>(null);
+    const [openSeq, setOpenSeq] = useState(0);
+    useEffect(() => {
+        if (!isOpen) {
+            // Reset so the next open recomputes from scratch.
+            setInitialScale(null);
+            return;
+        }
+        setOpenSeq((n) => n + 1);
+        let cancelled = false;
+        let attempts = 0;
+        const tick = () => {
+            if (cancelled) return;
+            attempts += 1;
+            const svg = fullscreenRef.current?.querySelector('svg');
+            const bbox = svg?.getBoundingClientRect();
+            if (svg && bbox && bbox.width > 1 && bbox.height > 1) {
+                const targetW = window.innerWidth * 0.9;
+                const targetH = window.innerHeight * 0.9;
+                const fit = Math.min(targetW / bbox.width, targetH / bbox.height);
+                setInitialScale(Math.max(1, Math.min(fit, 6)));
+                return;
+            }
+            // Give Mermaid up to ~30 frames (~0.5s @ 60fps) to paint
+            // before settling for the unscaled fallback.
+            if (attempts < 30) {
+                requestAnimationFrame(tick);
+            } else {
+                setInitialScale(1);
+            }
+        };
+        requestAnimationFrame(tick);
+        return () => {
+            cancelled = true;
+        };
+    }, [isOpen, svgContent, fullscreenRef]);
+
     // Apply text colors
     useEffect(() => {
         if (isOpen && fullscreenRef.current) {
@@ -78,6 +130,13 @@ export const MermaidFullscreenModal: React.FC<MermaidFullscreenModalProps> = ({
 
     if (!isOpen || typeof document === 'undefined') return null;
 
+    // Hoist derived values out of JSX (COMPONENTS.md "Data Preparation
+    // Before Render"). Keeps the returned tree pure markup, makes it
+    // obvious at the top of the function which inputs feed which
+    // node, and surfaces every dependency to a reader at a glance.
+    const transformInitialScale = initialScale ?? 1;
+    const transformKey = `${openSeq}-${initialScale ?? 'pending'}`;
+
     return createPortal(
         <div
             className="fixed inset-0 z-9999 bg-background/95 backdrop-blur-sm"
@@ -93,9 +152,23 @@ export const MermaidFullscreenModal: React.FC<MermaidFullscreenModalProps> = ({
                 <X className="h-5 w-5" />
             </Button>
 
-            {/* Zoomable diagram */}
+            {/* Zoomable diagram. `key={openSeq}-${initialScale ?? 'pending'}`
+                forces a fresh TransformWrapper:
+                  - on every modal open (openSeq increments) so the
+                    re-opened modal never inherits the prior session's
+                    transform;
+                  - whenever the auto-fit value lands (null → number)
+                    so the wrapper, which only reads `initialScale`
+                    at mount time, picks up the freshly measured fit.
+                We can't gate the whole subtree on `initialScale != null`
+                because the SVG host (`fullscreenRef` div) lives inside
+                TransformComponent — without it in the DOM, the rAF
+                measure loop has nothing to read and we'd deadlock at
+                null forever. Mounting with placeholder `1` first and
+                re-mounting once we know the fit is the cheap fix. */}
             <TransformWrapper
-                initialScale={1}
+                key={transformKey}
+                initialScale={transformInitialScale}
                 minScale={0.1}
                 maxScale={10}
                 centerOnInit

package/src/tools/Mermaid/index.tsx

@@ -25,6 +25,13 @@ export interface MermaidProps {
   isCompact?: boolean;
   /** Enable click-to-fullscreen functionality (default: true) */
   fullscreen?: boolean;
+  /**
+   * Enable the FloatingToolbar's "click to scroll" lock overlay.
+   * Defaults to `false` — Mermaid diagrams don't scroll internally,
+   * so the lock overlay just steals page wheel events. See the
+   * Mermaid.client implementation for the full rationale.
+   */
+  scrollIsolation?: boolean;
 }
 
 const Mermaid: React.FC<MermaidProps> = (props) => {