@djangocfg/widget-code 0.1.1

package/src/markdown-message/types.ts

@@ -0,0 +1,168 @@
+import type React from 'react';
+import type { Components } from 'react-markdown';
+
+/**
+ * Declarative rule for handling a custom URL scheme inside markdown.
+ *
+ * Each rule owns one href shape (e.g. `cmdop://machine/<uuid>`,
+ * `obsidian://open?path=…`) and decides:
+ *
+ *   1. Whether the URL scheme survives sanitize (`protocols`).
+ *   2. How to massage the source markdown before render
+ *      (`preprocess` — optional; useful for stripping decorative
+ *      prefixes like the `@` in `@[label](href)` so the chip alone
+ *      reads as the mention indicator).
+ *   3. Which links it owns (`match`), and how to render them
+ *      (`render`, returning JSX).
+ *
+ * Rules compose: pass an array, and the renderer iterates top-to-bottom
+ * picking the first `match` hit per `<a>`. Anything no rule claims
+ * falls through to the built-in chat-link styling (or to a custom
+ * `customComponents.a` if both are provided).
+ *
+ * Prefer `linkRules` over `customComponents` + `extraHrefProtocols` —
+ * it's the same pieces with the boilerplate removed.
+ */
+export interface LinkRule {
+  /** Pre-process the raw markdown source before any rendering happens.
+   *  Pure / synchronous; identity-return when no transform applies. */
+  preprocess?: (source: string) => string;
+  /** Predicate against the resolved href. */
+  match: (href: string) => boolean;
+  /** Render the link this rule owns. `children` is the link's label
+   *  (markdown-rendered React content). */
+  render: (props: {
+    href: string;
+    children: React.ReactNode;
+    isUser: boolean;
+  }) => React.ReactNode;
+  /** URL scheme(s) to whitelist on the sanitize side, e.g. `['cmdop']`.
+   *  Bare schemes only — no `://`. Optional; omit for `http(s)` rules. */
+  protocols?: readonly string[];
+  /** Diagnostic label, surfaced in dev warnings. Optional. */
+  name?: string;
+}
+
+export interface MarkdownMessageProps {
+  /** Markdown content to render */
+  content: string;
+  /** Additional CSS classes */
+  className?: string;
+  /** Whether the message is from the user (affects styling) */
+  isUser?: boolean;
+  /**
+   * Body text size — drives `<p>/<li>/<table>` etc. and scales
+   * headings a notch above the body.
+   *
+   * - `xs` — text-xs (12px), dense
+   * - `sm` — text-sm (14px), default
+   * - `base` — text-base (16px), large / `appearance="full"` chats
+   *
+   * When set, `size` wins over `isCompact`.
+   * @default 'sm'
+   */
+  size?: 'xs' | 'sm' | 'base';
+  /**
+   * Use compact size (text-xs instead of text-sm).
+   * @deprecated Use `size` instead — `isCompact` maps to
+   * `size="xs"` (true) / `size="sm"` (false) and is ignored when
+   * `size` is set explicitly.
+   */
+  isCompact?: boolean;
+  /**
+   * Force the plain-text rendering path (single `<div>` with
+   * `white-space: pre-wrap`, no ReactMarkdown). Use this for
+   * user-authored content where markdown shouldn't be parsed.
+   *
+   * When `undefined` (default) we run a small heuristic
+   * (`looksLikePlainProse`): short single-paragraph text without
+   * markdown markers → plain; everything else → ReactMarkdown.
+   *
+   * Pass an explicit `true` / `false` to opt out of the heuristic
+   * entirely.
+   */
+  plainText?: boolean;
+  /**
+   * Per-tag overrides merged on top of the built-in renderers.
+   *
+   * Use this when you need custom rendering for a specific tag without
+   * losing the chat-tuned defaults (links, code blocks with copy, etc).
+   *
+   * For custom URL-scheme link handling, prefer `linkRules` — it's the
+   * same ergonomics with the per-consumer boilerplate removed.
+   */
+  customComponents?: Partial<Components>;
+  /**
+   * Extra URL protocols allowed in `<a href>` after sanitize.
+   *
+   * The default schema strips anything that isn't
+   * `http(s)/mailto/xmpp/irc(s)` — your custom renderer would receive
+   * `href={undefined}` for `cmdop://…` / `obsidian://…` etc. Listing
+   * the bare scheme here (e.g. `'cmdop'`, NOT `'cmdop://'`) opts it in.
+   *
+   * Use carefully: every protocol you add increases what the rendered
+   * HTML can do via clicks. Stick to schemes you control.
+   */
+  extraHrefProtocols?: readonly string[];
+  /**
+   * Declarative link rules — preferred over `customComponents` +
+   * `extraHrefProtocols` for chat-style apps that want pluggable
+   * URL-scheme handling without re-implementing the custom-`a`
+   * boilerplate per consumer.
+   *
+   * If you provide both `linkRules` and `extraHrefProtocols`, the
+   * effective protocol list is the union of the two.
+   */
+  linkRules?: readonly LinkRule[];
+  /**
+   * Enable collapsible "Read more..." functionality
+   * @default false
+   */
+  collapsible?: boolean;
+  /** Maximum character length before showing "Read more...". */
+  maxLength?: number;
+  /** Maximum number of lines before showing "Read more...". */
+  maxLines?: number;
+  /** Custom "Read more" button text. @default "Read more..." */
+  readMoreLabel?: string;
+  /** Custom "Show less" button text. @default "Show less" */
+  showLessLabel?: string;
+  /** Start expanded (only when `collapsible` is true). @default false */
+  defaultExpanded?: boolean;
+  /** Callback when collapsed state changes */
+  onCollapseChange?: (isCollapsed: boolean) => void;
+  /**
+   * Live-streaming mode. When `true`, the content is treated as a
+   * partial markdown document still receiving tokens:
+   *
+   * - Completed top-level blocks render as memoized markdown (blocks
+   *   0..N-1 don't re-parse as new tokens land → ~O(n), not O(n²)).
+   * - The trailing in-flight block is held back as raw `whitespace-pre-wrap`
+   *   text until it reaches a safe boundary (a newline), so half-written
+   *   `**bold` / `[link](` don't flash formatted-then-broken.
+   * - An unterminated fenced code block renders as an in-progress code
+   *   block instead of swallowing the rest of the message.
+   *
+   * Ignored when `plainText` is `true` (plain wins outright) or when
+   * `collapsible` is set (collapsing is a post-stream concern). Has no
+   * effect on the finished message — pass `false` (the default) once the
+   * stream completes to get a single fully-parsed render.
+   *
+   * @default false
+   */
+  streaming?: boolean;
+  /**
+   * Code-fence surface palette.
+   *
+   * @default 'auto' — follow the host theme, the same resolution
+   * `PrettyCode` performs on its own. `'dark'` / `'light'` PIN the palette
+   * regardless of theme (e.g. printing on a light page).
+   *
+   * This defaulted to `'dark'`, which pinned every chat fence dark even in
+   * the light theme. `PrettyCode` treats `mode` as an explicit override
+   * (`mode ?? resolvedTheme`), so the pin also reached `CodePanelHeader`
+   * via `dark={isDarkMode}` — the "typescript" label and copy icon rendered
+   * in `text-white/40` on the panel, i.e. near-white on near-white.
+   */
+  codeTheme?: 'dark' | 'light' | 'auto';
+}

package/src/panel-header/CodePanelHeader.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+/**
+ * CodePanelHeader — a slim, persistent header bar for the code panel
+ * (PrettyCode), GitHub / ChatGPT style: the detected language on the left,
+ * a copy button on the right. In flow (not an absolute hover overlay), so
+ * the copy button never floats over the code.
+ *
+ * Code panels are usually DARK (like the map basemap is always light), so
+ * the header defaults to FIXED on-dark colors — theme tokens
+ * (`text-foreground`, `border-border`) would render dark-on-dark / an
+ * over-bright divider on the dark panel. Pass `dark={false}` for a
+ * light-surfaced panel, which switches to muted semantic tokens.
+ */
+
+import { useCallback, useState, type ReactNode } from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+import { Check, Copy, Maximize2 } from 'lucide-react';
+
+export interface CodePanelHeaderProps {
+  /** Display label on the left (e.g. "typescript", "json", "bash"). */
+  language?: ReactNode;
+  /** Text copied when the copy button is pressed. Omit to hide copy. */
+  copyValue?: string;
+  /** a11y label for the copy button. */
+  copyLabel?: string;
+  /** When set, an expand (⤢) button is shown that calls this — used to open
+   *  the panel full-screen when it's height-capped. */
+  onExpand?: () => void;
+  /** a11y / tooltip label for the expand button. */
+  expandLabel?: string;
+  /** Extra trailing actions, rendered left of the copy button. */
+  actions?: ReactNode;
+  /** Dark panel (default). `false` → light-surface muted tokens. */
+  dark?: boolean;
+  className?: string;
+}
+
+export function CodePanelHeader({
+  language,
+  copyValue,
+  copyLabel = 'Copy',
+  onExpand,
+  expandLabel = 'Expand',
+  actions,
+  dark = true,
+  className,
+}: CodePanelHeaderProps) {
+  const [copied, setCopied] = useState(false);
+
+  const onCopy = useCallback(() => {
+    if (copyValue == null) return;
+    void navigator.clipboard?.writeText(copyValue).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1400);
+    });
+  }, [copyValue]);
+
+  // Fixed on-dark vs semantic light. The hairline is faint so it never
+  // reads as a heavy rule across the panel.
+  const dividerCls = dark ? 'border-white/[0.06]' : 'border-border/60';
+  const labelCls = dark ? 'text-white/40' : 'text-muted-foreground';
+  const btnCls = dark
+    ? 'text-white/45 hover:bg-white/10 hover:text-white/80 focus-visible:ring-white/40'
+    : 'text-muted-foreground hover:bg-foreground/10 hover:text-foreground focus-visible:ring-ring';
+
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-between gap-2 border-b px-3 py-1',
+        dividerCls,
+        className,
+      )}
+    >
+      <span
+        className={cn(
+          'min-w-0 truncate font-mono text-[11px] lowercase tracking-wide',
+          labelCls,
+        )}
+      >
+        {language}
+      </span>
+
+      <div className="flex shrink-0 items-center gap-0.5">
+        {actions}
+        {onExpand ? (
+          <button
+            type="button"
+            onClick={onExpand}
+            aria-label={expandLabel}
+            title={expandLabel}
+            className={cn(
+              'inline-flex size-5 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-1',
+              btnCls,
+            )}
+          >
+            <Maximize2 className="size-3" aria-hidden />
+          </button>
+        ) : null}
+        {copyValue != null ? (
+          <button
+            type="button"
+            onClick={onCopy}
+            aria-label={copyLabel}
+            className={cn(
+              'inline-flex size-5 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-1',
+              btnCls,
+            )}
+          >
+            {copied ? (
+              <Check className="size-3" aria-hidden />
+            ) : (
+              <Copy className="size-3" aria-hidden />
+            )}
+          </button>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/panel-header/index.ts

@@ -0,0 +1 @@
+export { CodePanelHeader, type CodePanelHeaderProps } from './CodePanelHeader';

package/src/pretty-code/PrettyCode.client.tsx

@@ -0,0 +1,402 @@
+'use client';
+
+import { Highlight, Language, themes } from 'prism-react-renderer';
+import React, { useMemo, useRef } from 'react';
+
+import { useAppT } from '@djangocfg/i18n';
+import { useResolvedTheme } from '@djangocfg/ui-core/hooks';
+import { CodePanelHeader } from '../panel-header';
+
+// Surface palette — driven by the ui-core `--code*` semantic tokens so the
+// code panel matches the rest of the theme system (neutral, preset-aware)
+// instead of a hard-coded GitHub blue. The tokens are already tuned per
+// theme (`light.css` / `dark.css`): a near-white gray in light, a near-black
+// gray in dark — so the surface stays a calm neutral in either mode and never
+// reads blue. Syntax colors still come from Prism's vsDark/github palettes.
+const CODE_SURFACE_BG = 'var(--code)';
+const CODE_INLINE_BG = 'var(--code-inline)';
+
+// Corner radius comes from the ui-core token scale, never a hard-coded
+// Tailwind step: `--radius-popover` is the container tier (the same one
+// nav popovers and menu surfaces use), so the panel re-rounds with the
+// active preset (`dense`, `windows`, …) instead of pinning 0.5rem forever.
+const CODE_SURFACE_RADIUS = 'var(--radius-popover)';
+
+// The panel is BORDERLESS: `--code` already separates it from the page in both
+// themes (96% on a 98% light page, 9% on a 14.5% dark one), so a border only
+// added a second boundary around a shape the fill had already drawn — most
+// visible when the panel nests inside another card, where the two frames
+// competed. Contrast does the separating; `--code-border` stays defined in the
+// theme for hosts that genuinely need an outline.
+
+// Load extra Prism grammars (``bash``, ``ruby``, ``java``, ``php``)
+// that aren't in ``prism-react-renderer``'s default bundle. The hook
+// below subscribes to its ready state and re-renders this component
+// once loading completes, so the first tab click gets highlighted
+// correctly even if it happened before the dynamic import resolved.
+import { useEnsurePrismLanguages } from './registerPrismLanguages';
+
+interface PrettyCodeProps {
+  data: string | object;
+  language: Language;
+  className?: string;
+  /**
+   * Force a specific Prism palette + surface. **Defaults to the resolved
+   * host theme** (light → light surface + GitHub palette, dark → dark
+   * surface + vsDark palette), so the panel matches the rest of the UI and
+   * its `--code*` tokens. Pass `mode` explicitly only to pin a palette
+   * regardless of theme — e.g. printing a PDF on a light page.
+   */
+  mode?: 'dark' | 'light';
+  inline?: boolean;
+  customBg?: string; // Custom background class
+  isCompact?: boolean; // Compact mode for smaller font sizes
+  /** @deprecated No-op since the toolbar moved into a persistent
+   *  `CodePanelHeader` (no scroll-capturing overlay). Kept for API
+   *  back-compat; will be removed in a future major. */
+  scrollIsolation?: boolean;
+  /**
+   * Line count at which the viewer starts to scroll instead of growing.
+   * ``undefined`` (default) = always grows to fit content, no scroll.
+   * Set e.g. ``50`` to cap short snippets inline and scroll long ones.
+   */
+  maxLines?: number;
+  /**
+   * When set, an expand (⤢) button appears in the header — but ONLY while
+   * the content is actually height-capped (i.e. exceeds `maxLines`). Lets a
+   * host open the full code full-screen. No-op when the code fits.
+   */
+  onExpand?: () => void;
+  /**
+   * Visual variant. ``"card"`` (default) ships full chrome (border,
+   * background, hover toolbar, optional internal scroll). ``"plain"``
+   * is chrome-less — use when embedding inside another scroll
+   * container so the surface manages its own chrome and scroll. */
+  variant?: 'card' | 'plain';
+}
+
+const PrettyCode = ({ data, language, className, mode, inline = false, customBg, isCompact = false, maxLines, onExpand, variant = 'card' }: PrettyCodeProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const t = useAppT();
+
+  // Default to the host theme so the surface (`--code*` tokens) and the Prism
+  // palette move together; an explicit `mode` prop still pins a palette.
+  const resolvedTheme = useResolvedTheme();
+  const effectiveMode = mode ?? (resolvedTheme === 'light' ? 'light' : 'dark');
+
+  // Subscribe to the extra-grammars ready state. When ``bash`` /
+  // ``ruby`` / ``java`` / ``php`` finish loading, this hook triggers a
+  // re-render so the code block picks up the new grammar.
+  useEnsurePrismLanguages();
+
+  const labels = useMemo(() => ({
+    copyCode: t('tools.code.copyCode'),
+    noContent: t('tools.code.noContent'),
+  }), [t]);
+
+  // Font size based on compact mode
+  const fontSize = isCompact ? '0.75rem' : '0.875rem'; // 12px vs 14px
+
+  const isDarkMode = effectiveMode !== 'light';
+  const prismTheme = isDarkMode ? themes.vsDark : themes.github;
+  // The surface now reads the `--code*` tokens in BOTH modes — they already
+  // carry the right neutral per theme, so the panel matches the UI and never
+  // reads blue. (Previously light mode fell back to `bg-card` and dark mode
+  // hard-coded GitHub's #0d1117.)
+  const surfaceStyle = { backgroundColor: CODE_SURFACE_BG, borderRadius: CODE_SURFACE_RADIUS };
+  const inlineSurfaceStyle = { backgroundColor: CODE_INLINE_BG };
+
+  // Convert form object to JSON string with proper formatting
+  const contentJson = typeof data === 'string' ? data : JSON.stringify(data || {}, null, 2);
+
+  // Enable scroll only when content exceeds maxLines. Otherwise the block
+  // grows to fit — short snippets feel natural, long ones get a cap.
+  const lineCount = contentJson ? contentJson.split('\n').length : 0;
+  const lineHeightRatio = isCompact ? 1.4 : 1.5;
+  const fontSizePx = isCompact ? 12 : 14;
+  // Vertical padding of the <pre> (top + bottom, in px) — keep in sync
+  // with the padding string below.
+  const verticalPadPx = 16 + 12; // 1rem top + 0.75rem bottom (≈)
+  const shouldScroll = maxLines !== undefined && lineCount > maxLines;
+  const maxHeightPx = maxLines !== undefined
+    ? maxLines * fontSizePx * lineHeightRatio + verticalPadPx
+    : undefined;
+  
+  // Handle empty content
+  if (!contentJson || contentJson.trim() === '') {
+    const emptyBgClass = customBg || '';
+    return (
+      <div
+        // Same borderless token-rounded surface as the populated panel — the
+        // empty state used `rounded-sm`, so a panel visibly changed shape as
+        // soon as content arrived.
+        className={`relative h-full rounded-[var(--radius-popover)] ${emptyBgClass} ${className || ''}`}
+        style={customBg ? undefined : surfaceStyle}
+      >
+        <div className="h-full overflow-auto p-4">
+          <p
+            className="text-sm italic text-muted-foreground"
+            role="status"
+          >
+            {labels.noContent}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // Get display name for language badge
+  const getLanguageDisplayName = (lang: string): string => {
+    switch (lang.toLowerCase()) {
+      case 'bash':
+      case 'shell':
+        return 'Bash';
+      case 'python':
+      case 'py':
+        return 'Python';
+      case 'javascript':
+      case 'js':
+        return 'JavaScript';
+      case 'typescript':
+      case 'ts':
+        return 'TypeScript';
+      case 'json':
+        return 'JSON';
+      case 'yaml':
+      case 'yml':
+        return 'YAML';
+      case 'html':
+        return 'HTML';
+      case 'css':
+        return 'CSS';
+      case 'sql':
+        return 'SQL';
+      case 'xml':
+        return 'XML';
+      case 'markdown':
+      case 'md':
+        return 'Markdown';
+      case 'plaintext':
+      case 'text':
+        return 'Text';
+      case 'mermaid':
+        return 'Mermaid';
+      case 'ruby':
+      case 'rb':
+        return 'Ruby';
+      case 'java':
+        return 'Java';
+      case 'php':
+        return 'PHP';
+      case 'go':
+      case 'golang':
+        return 'Go';
+      default:
+        return lang.charAt(0).toUpperCase() + lang.slice(1);
+    }
+  };
+
+  // Normalize language for Prism - use only basic supported languages
+  const normalizedLanguage = (() => {
+    const lang = language.toLowerCase();
+    
+    // Try basic languages that are definitely supported
+    switch (lang) {
+      case 'javascript':
+      case 'js':
+        return 'javascript';
+      case 'typescript':
+      case 'ts':
+        return 'typescript'; // Try TypeScript first
+      case 'python':
+      case 'py':
+        return 'python';
+      case 'json':
+        return 'json';
+      case 'css':
+        return 'css';
+      case 'html':
+        return 'markup';
+      case 'xml':
+        return 'markup';
+      case 'bash':
+      case 'shell':
+      case 'sh':
+        return 'bash';
+      case 'ruby':
+      case 'rb':
+        return 'ruby';
+      case 'java':
+        return 'java';
+      case 'php':
+        return 'php';
+      case 'go':
+      case 'golang':
+        return 'go';
+      case 'sql':
+        return 'sql';
+      case 'yaml':
+      case 'yml':
+        return 'yaml';
+      case 'markdown':
+      case 'md':
+        return 'markdown';
+      case 'mermaid':
+        return 'text'; // Mermaid is handled separately in MarkdownMessage
+      default:
+        // For unknown languages, try to use the original name first
+        // If it doesn't work, Prism will fallback to plain text
+        return lang || 'text';
+    }
+  })();
+
+  const displayLanguage = getLanguageDisplayName(language);
+
+  // Plain variant — chrome-less render for embedding inside other
+  // scroll containers. No border, no background, no hover toolbar, no
+  // internal scroll. The caller's ScrollArea/panel owns the chrome
+  // and scroll responsibilities.
+  if (variant === 'plain') {
+    return (
+      <Highlight theme={prismTheme} code={contentJson} language={normalizedLanguage as Language}>
+        {({ className: prismClassName, style, tokens, getLineProps, getTokenProps }) => {
+          const { backgroundColor: _bg, ...restStyle } = style;
+          return (
+            <pre
+              className={`${prismClassName} ${className || ''}`}
+              style={{
+                ...restStyle,
+                background: 'transparent',
+                margin: 0,
+                padding: isCompact ? '0.75rem 1rem' : '1rem',
+                fontSize,
+                lineHeight: lineHeightRatio,
+                fontFamily: 'monospace',
+                // ``break-all`` (not ``break-word``) so long unbroken
+                // strings without whitespace — typical of escaped
+                // JSON bodies in generated code samples — wrap at any
+                // character rather than overflowing the container.
+                whiteSpace: 'pre-wrap',
+                wordBreak: 'break-all',
+                overflowWrap: 'anywhere',
+                // Hard cap on width — parents (grid cells, panels)
+                // should constrain us but some callers render inside
+                // ``flex: 1 1 auto`` which lets the pre grow past
+                // intended bounds. ``max-width: 100%`` pins to parent.
+                maxWidth: '100%',
+              }}
+            >
+              {tokens.map((line, i) => (
+                <div key={i} {...getLineProps({ line })}>
+                  {line.map((token, key) => (
+                    <span key={key} {...getTokenProps({ token })} />
+                  ))}
+                </div>
+              ))}
+            </pre>
+          );
+        }}
+      </Highlight>
+    );
+  }
+
+  if (inline) {
+    // Inline chip surface also comes from `--code-inline` via inlineSurfaceStyle.
+    const inlineBgClass = customBg || '';
+    return (
+      <Highlight theme={prismTheme} code={contentJson} language={normalizedLanguage as Language}>
+        {({ className: prismClassName, style, tokens, getTokenProps }) => (
+          <code
+            // `--radius-sm`, not the panel's container radius: an inline chip
+            // sits inside a line of prose, so it rounds like a small control
+            // rather than like a card.
+            className={`${prismClassName} ${inlineBgClass} px-2 py-1 rounded-[var(--radius-sm)] ${isCompact ? 'text-xs' : 'text-sm'} font-mono inline-block ${className || ''}`}
+            style={{
+              ...style,
+              ...(customBg ? undefined : inlineSurfaceStyle),
+              fontSize,
+              fontFamily: 'monospace',
+            }}
+          >
+            {tokens.map((line, i) =>
+              line.map((token, key) => (
+                <span key={`${i}-${key}`} {...getTokenProps({ token })} />
+              )),
+            )}
+          </code>
+        )}
+      </Highlight>
+    );
+  }
+
+  // Surface comes from the `--code*` tokens via `surfaceStyle` (both modes),
+  // unless the host pins its own `customBg` class.
+  const bgClass = customBg || '';
+
+  return (
+    <div
+      ref={containerRef}
+      // Radius lives in the CLASS, not in `surfaceStyle`: a host passing
+      // `customBg` drops the inline style entirely (see below), and the panel
+      // must stay rounded either way. Borderless by design — see the note on
+      // CODE_SURFACE_RADIUS.
+      className={`group relative overflow-hidden rounded-[var(--radius-popover)] ${bgClass} ${className || ''}`}
+      style={customBg ? undefined : surfaceStyle}
+    >
+      {/* Persistent header bar (GitHub / ChatGPT style): language label
+          left, copy button right, in flow — never floats over the code. */}
+      <CodePanelHeader
+        language={displayLanguage}
+        copyValue={contentJson}
+        copyLabel={labels.copyCode}
+        dark={isDarkMode}
+        // Expand only matters when the code is actually height-capped.
+        onExpand={onExpand && shouldScroll ? onExpand : undefined}
+      />
+
+      <div
+        className={shouldScroll ? 'h-full overflow-auto' : ''}
+        style={shouldScroll ? { maxHeight: maxHeightPx } : undefined}
+        // When the viewer scrolls internally, make it keyboard-reachable
+        // so users without a wheel/trackpad can scroll with arrow keys.
+        {...(shouldScroll
+          ? { tabIndex: 0, role: 'region', 'aria-label': displayLanguage }
+          : {})}
+      >
+        <Highlight theme={prismTheme} code={contentJson} language={normalizedLanguage as Language}>
+          {({ className: prismClassName, style, tokens, getLineProps, getTokenProps }) => {
+            // Remove background from Prism theme - we use our own via CSS
+            const { backgroundColor: _bg, ...restStyle } = style;
+            return (
+            <pre
+              className={prismClassName}
+              style={{
+                ...restStyle,
+                margin: 0,
+                // The header now occupies the top; the code body just needs
+                // even padding (no extra top room for an overlay anymore).
+                padding: '0.875rem 1rem',
+                fontSize,
+                lineHeight: lineHeightRatio,
+                fontFamily: 'monospace',
+                whiteSpace: 'pre-wrap',
+                wordBreak: 'break-word',
+                overflowWrap: 'break-word',
+              }}
+            >
+              {tokens.map((line, i) => (
+                <div key={i} {...getLineProps({ line })}>
+                  {line.map((token, key) => (
+                    <span key={key} {...getTokenProps({ token })} />
+                  ))}
+                </div>
+              ))}
+            </pre>
+          )}}
+        </Highlight>
+      </div>
+    </div>
+  );
+};
+
+export default PrettyCode;