@djangocfg/ui-tools 2.1.301 → 2.1.303

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.301",
+  "version": "2.1.303",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -91,8 +91,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.301",
-    "@djangocfg/ui-core": "^2.1.301",
+    "@djangocfg/i18n": "^2.1.303",
+    "@djangocfg/ui-core": "^2.1.303",
     "consola": "^3.4.2",
     "lodash-es": "^4.18.1",
     "lucide-react": "^0.545.0",
@@ -140,10 +140,10 @@
     "@maplibre/maplibre-gl-geocoder": "^1.7.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.301",
+    "@djangocfg/i18n": "^2.1.303",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.301",
-    "@djangocfg/ui-core": "^2.1.301",
+    "@djangocfg/typescript-config": "^2.1.303",
+    "@djangocfg/ui-core": "^2.1.303",
     "@types/lodash-es": "^4.17.12",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^24.7.2",

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

@@ -10,33 +10,43 @@ interface CodeBlockProps {
   isCompact?: boolean;
 }
 
-/** Code block with a hover-revealed Copy button on top of PrettyCode. */
-export const CodeBlock: React.FC<CodeBlockProps> = ({ code, language, isUser, isCompact = false }) => {
+/**
+ * Markdown code block. Renders <PrettyCode> directly — its own
+ * FloatingToolbar already carries the language tag and Copy action.
+ *
+ * Earlier versions stacked an extra <CopyButton> here too, which
+ * surfaced as two copy buttons on every code fence. The fallback
+ * 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, isCompact = false }) => {
   const theme = useResolvedTheme();
 
-  return (
-    <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"
-      />
+  // 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>
   );
@@ -44,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

@@ -169,3 +169,425 @@ export const LinkRules = () => (
     </div>
   </div>
 );
+
+// Chat-style stories — exercise the plain-text fast path so short
+// one-liners and prose paragraphs don't get prose vertical margins
+// inside a chat bubble. Compare against `LongAssistantReply` below
+// to see when the heavier ReactMarkdown pipeline kicks in.
+const SHORT_USER_LINES = [
+  'Hi',
+  'А?',
+  'How do I install cmdop?',
+  'Can you ssh into vps-audi and check uptime?',
+];
+
+const SHORT_ASSISTANT_LINES = [
+  'Sure — what do you need?',
+  'Готово, запросил статус.',
+  'Done.',
+];
+
+// Crafted to make the plain-vs-markdown contrast obvious: contains
+// `*pair*` (italic in markdown), a `#hash` token (lone hash with no
+// space — NOT a heading even in markdown, kept here to show the
+// asymmetry), and embedded newlines that should survive in plain mode.
+const CONTRAST_CONTENT = `Multi
+line
+user message
+with *asterisks*
+and #hash that should NOT format`;
+
+const LONG_ASSISTANT_REPLY = `## Установка CMDOP
+
+Запусти этот скрипт:
+
+\`\`\`bash
+curl -sSL cmdop.com/install.sh | bash
+\`\`\`
+
+Дальше:
+
+1. **Войти:** \`cmdop login\`
+2. **Подключить машину:** \`cmdop connect\`
+3. **Проверить:** \`cmdop doctor\`
+
+Если что-то не работает — скажи.`;
+
+// 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,
+  rules,
+  plainText,
+}: {
+  role: 'user' | 'assistant';
+  content: string;
+  rules?: LinkRule[];
+  plainText?: boolean;
+}) {
+  const isUser = role === 'user';
+  return (
+    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'}`}>
+      <div
+        className={`max-w-[85%] rounded-xl px-3 py-2 ${
+          isUser
+            ? 'bg-primary text-primary-foreground'
+            : 'bg-card text-card-foreground border border-border'
+        }`}
+      >
+        <MarkdownMessage
+          content={content}
+          isUser={isUser}
+          linkRules={rules}
+          plainText={plainText}
+        />
+      </div>
+    </div>
+  );
+}
+
+export const ChatBubbles = () => (
+  <div className="mx-auto max-w-2xl space-y-6 p-6">
+    <div>
+      <h3 className="mb-2 text-sm font-semibold">
+        User messages — explicit <code>plainText</code>
+      </h3>
+      <p className="mb-3 text-xs text-muted-foreground">
+        ChatGPT/Claude.ai split: user-typed content stays as-typed.
+        <code> *stars* </code> aren't bold; <code># headers </code>
+        aren't headings. Newlines preserved via{' '}
+        <code>whitespace-pre-wrap</code>.
+      </p>
+      <div className="rounded-lg border border-border bg-card p-4 space-y-2">
+        {SHORT_USER_LINES.map((line, i) => (
+          <ChatBubble
+            key={`u-${i}`}
+            role="user"
+            content={line}
+            plainText
+            rules={onPrimaryRules}
+          />
+        ))}
+        <ChatBubble
+          role="user"
+          content={'Multi\nline\nuser message\nwith *asterisks*\nand #hash that should NOT format'}
+          plainText
+          rules={onPrimaryRules}
+        />
+      </div>
+    </div>
+
+    <div>
+      <h3 className="mb-2 text-sm font-semibold">
+        Heuristic auto-detect (no <code>plainText</code> prop)
+      </h3>
+      <p className="mb-3 text-xs text-muted-foreground">
+        Without <code>plainText</code>, <code>looksLikePlainProse</code>
+        decides: short / single-paragraph / no markers → flat render;
+        long / multi-paragraph / structural → full markdown. Same
+        renderer for both branches; only margins differ.
+      </p>
+      <div className="rounded-lg border border-border bg-card p-4 space-y-2">
+        {SHORT_ASSISTANT_LINES.map((line, i) => (
+          <ChatBubble
+            key={`a-${i}`}
+            role="assistant"
+            content={line}
+            rules={subtleRules}
+          />
+        ))}
+        <ChatBubble
+          role="assistant"
+          content="Sure — let me check uptime and disk on the machine and report back. Should only take a couple of seconds."
+          rules={subtleRules}
+        />
+      </div>
+    </div>
+
+    <div>
+      <h3 className="mb-2 text-sm font-semibold">
+        Bubble with mention chips
+      </h3>
+      <p className="mb-3 text-xs text-muted-foreground">
+        Content with <code>[label](cmdop://...)</code> always goes
+        through ReactMarkdown — that's how MentionChip renders.
+      </p>
+      <div className="rounded-lg border border-border bg-card p-4 space-y-2">
+        <ChatBubble
+          role="user"
+          content="Спроси у @[Vps-audi](cmdop://machine/abc-123) сколько свободного места."
+          rules={onPrimaryRules}
+        />
+        <ChatBubble
+          role="assistant"
+          content="Готово — спросил [Vps-audi](cmdop://machine/abc-123)."
+          rules={subtleRules}
+        />
+      </div>
+    </div>
+
+    <div>
+      <h3 className="mb-2 text-sm font-semibold">
+        Same content, two modes — side-by-side contrast
+      </h3>
+      <p className="mb-3 text-xs text-muted-foreground">
+        Identical input string. Left bubble forces{' '}
+        <code>plainText</code> (user-side default in cmdop):{' '}
+        <code>*asterisks*</code> stay literal, <code>#hash</code> stays
+        literal, newlines preserved verbatim. Right bubble omits{' '}
+        <code>plainText</code> so the heuristic kicks in — short
+        content but with <code>*pair*</code> markers, so it routes
+        through ReactMarkdown and renders <em>italic</em>.
+      </p>
+      <div className="grid grid-cols-2 gap-3">
+        <div className="rounded-lg border border-border bg-card p-4">
+          <div className="mb-2 text-[10px] uppercase tracking-wide text-muted-foreground">
+            plainText = true
+          </div>
+          <ChatBubble
+            role="user"
+            content={CONTRAST_CONTENT}
+            plainText
+            rules={onPrimaryRules}
+          />
+        </div>
+        <div className="rounded-lg border border-border bg-card p-4">
+          <div className="mb-2 text-[10px] uppercase tracking-wide text-muted-foreground">
+            plainText omitted → heuristic
+          </div>
+          <ChatBubble
+            role="assistant"
+            content={CONTRAST_CONTENT}
+            rules={subtleRules}
+          />
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h3 className="mb-2 text-sm font-semibold">
+        Long assistant reply (multi-paragraph + code + headings)
+      </h3>
+      <p className="mb-3 text-xs text-muted-foreground">
+        Full markdown pipeline. Tight CSS overrides
+        (<code>p+p mt-2</code>, <code>p my-0</code>) keep the bubble
+        from looking airy — defaults from Tailwind's prose are too
+        loose for chat density.
+      </p>
+      <div className="rounded-lg border border-border bg-card p-4">
+        <ChatBubble
+          role="assistant"
+          content={LONG_ASSISTANT_REPLY}
+          rules={subtleRules}
+        />
+      </div>
+    </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

@@ -10,7 +10,7 @@ import type { Components } from 'react-markdown';
 import { useCollapsibleContent } from '../useCollapsibleContent';
 import type { MarkdownMessageProps } from './types';
 import { buildSchema, buildUrlTransform } from './sanitize';
-import { hasMarkdownSyntax } from './plainText';
+import { looksLikePlainProse } from './plainText';
 import { createMarkdownComponents } from './components';
 import { CollapseToggle } from './CollapseToggle';
 import { applyPreprocess, buildLinkRulesComponent, collectProtocols } from './linkRules';
@@ -51,6 +51,7 @@ export const MarkdownMessage: React.FC<MarkdownMessageProps> = ({
   className = '',
   isUser = false,
   isCompact = false,
+  plainText,
   customComponents,
   extraHrefProtocols,
   linkRules,
@@ -121,17 +122,34 @@ export const MarkdownMessage: React.FC<MarkdownMessageProps> = ({
   const textSizeClass = isCompact ? 'text-xs' : 'text-sm';
   const proseClass = isCompact ? 'prose-xs' : 'prose-sm';
 
-  // Plain-text fast path: skip ReactMarkdown when content is pure
-  // prose. Bypassed when the caller wired up custom components or
-  // link rules — those need to fire on plain `[label](custom://…)`
-  // links the fast path would otherwise print verbatim.
-  const isPlainText =
-    !effectiveCustomComponents && !hasMarkdownSyntax(displayContent);
+  // Resolve plain-vs-markdown branch:
+  //   1. Caller-passed `plainText` wins outright (explicit beats clever).
+  //   2. Caller-supplied non-`a` customComponents force the markdown
+  //      pipeline — those overrides only matter on real markdown nodes.
+  //   3. Otherwise auto-detect via `looksLikePlainProse` (short,
+  //      single-paragraph, no markdown markers). This is the chat-bubble
+  //      WhatsApp/Telegram heuristic — "would the human have written
+  //      this in one keystroke?".
+  const customComponentsBeyondLinks = React.useMemo(() => {
+    if (!customComponents) return false;
+    return Object.keys(customComponents).some((k) => k !== 'a');
+  }, [customComponents]);
+  const isPlainText = plainText !== undefined
+    ? plainText
+    : !customComponentsBeyondLinks && looksLikePlainProse(displayContent);
 
   if (isPlainText) {
+    // <div> + whitespace-pre-wrap: respects newlines AND collapses
+    // double spaces, which is what users mean when they hit Enter
+    // twice. <span> would break flow inside a flex bubble.
+    //
+    // leading-snug (1.375), not leading-relaxed (1.625) — `pre-wrap`
+    // makes every `\n` a hard line break, so the relaxed leading
+    // turns multi-line user messages into airy ladders. snug matches
+    // WhatsApp/Telegram bubble density.
     return (
-      <span
-        className={`${textSizeClass} leading-7 break-words whitespace-pre-line font-light ${className}`}
+      <div
+        className={`${textSizeClass} leading-snug break-words whitespace-pre-wrap ${className}`}
       >
         {displayContent}
         {collapsible && shouldCollapse && (
@@ -147,7 +165,7 @@ export const MarkdownMessage: React.FC<MarkdownMessageProps> = ({
             />
           </>
         )}
-      </span>
+      </div>
     );
   }
 
@@ -157,7 +175,16 @@ export const MarkdownMessage: React.FC<MarkdownMessageProps> = ({
         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