@fragments-sdk/ui 0.9.5 → 0.9.6

package/src/components/CodeBlock/index.tsx

@@ -1,12 +1,14 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import { useState, useCallback, useEffect, useMemo } from 'react';
+import * as React from "react";
+import { useState, useCallback, useEffect, useMemo } from "react";
 // ============================================
 // Lazy-loaded dependency (shiki)
 // ============================================
 
-let _codeToHtml: ((code: string, options: { lang: string; theme: string }) => Promise<string>) | null = null;
+let _codeToHtml:
+  | ((code: string, options: { lang: string; theme: string }) => Promise<string>)
+  | null = null;
 let _shikiLoaded = false;
 let _shikiFailed = false;
 
@@ -15,66 +17,66 @@ function loadShikiDeps() {
   _shikiLoaded = true;
   try {
     // eslint-disable-next-line @typescript-eslint/no-require-imports
-    const shiki = require('shiki');
+    const shiki = require("shiki");
     _codeToHtml = shiki.codeToHtml;
   } catch {
     _shikiFailed = true;
   }
 }
-import { TabsRoot, TabsList, Tab, TabsPanel } from '../Tabs';
-import { Button } from '../Button';
-import styles from './CodeBlock.module.scss';
-import '../../styles/globals.scss';
+import { TabsRoot, TabsList, Tab, TabsPanel } from "../Tabs";
+import { Button } from "../Button";
+import styles from "./CodeBlock.module.scss";
+import "../../styles/globals.scss";
 
 export type CodeBlockLanguage =
-  | 'tsx'
-  | 'typescript'
-  | 'javascript'
-  | 'jsx'
-  | 'bash'
-  | 'shell'
-  | 'css'
-  | 'scss'
-  | 'sass'
-  | 'json'
-  | 'html'
-  | 'xml'
-  | 'markdown'
-  | 'md'
-  | 'yaml'
-  | 'yml'
-  | 'python'
-  | 'py'
-  | 'ruby'
-  | 'go'
-  | 'rust'
-  | 'java'
-  | 'kotlin'
-  | 'swift'
-  | 'c'
-  | 'cpp'
-  | 'csharp'
-  | 'php'
-  | 'sql'
-  | 'graphql'
-  | 'diff'
-  | 'plaintext';
+  | "tsx"
+  | "typescript"
+  | "javascript"
+  | "jsx"
+  | "bash"
+  | "shell"
+  | "css"
+  | "scss"
+  | "sass"
+  | "json"
+  | "html"
+  | "xml"
+  | "markdown"
+  | "md"
+  | "yaml"
+  | "yml"
+  | "python"
+  | "py"
+  | "ruby"
+  | "go"
+  | "rust"
+  | "java"
+  | "kotlin"
+  | "swift"
+  | "c"
+  | "cpp"
+  | "csharp"
+  | "php"
+  | "sql"
+  | "graphql"
+  | "diff"
+  | "plaintext";
 
 /** Available syntax highlighting themes */
 export type CodeBlockTheme =
-  | 'synthwave-84'
-  | 'github-dark'
-  | 'github-light'
-  | 'one-dark-pro'
-  | 'dracula'
-  | 'nord'
-  | 'monokai'
-  | 'vitesse-dark'
-  | 'vitesse-light'
-  | 'min-dark'
-  | 'min-light';
-
-export type CodeBlockCopyPlacement = 'auto' | 'header' | 'overlay';
+  | "synthwave-84"
+  | "github-dark"
+  | "github-light"
+  | "one-dark-pro"
+  | "dracula"
+  | "nord"
+  | "monokai"
+  | "vitesse-dark"
+  | "vitesse-light"
+  | "min-dark"
+  | "min-light";
+
+export type CodeBlockCopyPlacement = "auto" | "header" | "overlay";
 
 export interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Code string to display */
@@ -200,11 +202,11 @@ function ChevronUpIcon({ className }: { className?: string }) {
 
 function escapeHtml(str: string): string {
   return str
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#039;');
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
 }
 
 /**
@@ -212,12 +214,12 @@ function escapeHtml(str: string): string {
  * This handles template literals that have extra indentation from code formatting.
  */
 function dedent(str: string): string {
-  const lines = str.split('\n');
+  const lines = str.split("\n");
 
   // Find the minimum indentation (ignoring empty lines)
   let minIndent = Infinity;
   for (const line of lines) {
-    if (line.trim() === '') continue;
+    if (line.trim() === "") continue;
     const match = line.match(/^(\s*)/);
     if (match) {
       minIndent = Math.min(minIndent, match[1].length);
@@ -230,16 +232,14 @@ function dedent(str: string): string {
   }
 
   // Remove the common indentation from all lines
-  return lines
-    .map(line => line.slice(minIndent))
-    .join('\n');
+  return lines.map((line) => line.slice(minIndent)).join("\n");
 }
 
 /**
  * Normalize indentation while handling JSX where first line is already at column 0.
  */
 function normalizeIndentation(str: string): string {
-  const lines = str.split('\n');
+  const lines = str.split("\n");
   if (lines.length <= 1) return str;
 
   let minIndent = Infinity;
@@ -260,18 +260,18 @@ function normalizeIndentation(str: string): string {
 
   return lines
     .map((line) => line.slice(Math.min(minIndent, line.match(/^(\s*)/)?.[1].length ?? 0)))
-    .join('\n');
+    .join("\n");
 }
 
 function trimTrailingWhitespace(str: string): string {
   return str
-    .split('\n')
-    .map((line) => line.replace(/[ \t]+$/g, ''))
-    .join('\n');
+    .split("\n")
+    .map((line) => line.replace(/[ \t]+$/g, ""))
+    .join("\n");
 }
 
 function findTagEnd(line: string): number {
-  let quote: '"' | '\'' | '`' | null = null;
+  let quote: '"' | "'" | "`" | null = null;
   let escaped = false;
   let braceDepth = 0;
   let bracketDepth = 0;
@@ -281,7 +281,7 @@ function findTagEnd(line: string): number {
     const char = line[i];
 
     if (quote) {
-      if (char === '\\' && !escaped) {
+      if (char === "\\" && !escaped) {
         escaped = true;
         continue;
       }
@@ -292,18 +292,18 @@ function findTagEnd(line: string): number {
       continue;
     }
 
-    if (char === '"' || char === '\'' || char === '`') {
+    if (char === '"' || char === "'" || char === "`") {
       quote = char;
       continue;
     }
 
-    if (char === '{') braceDepth += 1;
-    else if (char === '}') braceDepth = Math.max(0, braceDepth - 1);
-    else if (char === '[') bracketDepth += 1;
-    else if (char === ']') bracketDepth = Math.max(0, bracketDepth - 1);
-    else if (char === '(') parenDepth += 1;
-    else if (char === ')') parenDepth = Math.max(0, parenDepth - 1);
-    else if (char === '>' && braceDepth === 0 && bracketDepth === 0 && parenDepth === 0) {
+    if (char === "{") braceDepth += 1;
+    else if (char === "}") braceDepth = Math.max(0, braceDepth - 1);
+    else if (char === "[") bracketDepth += 1;
+    else if (char === "]") bracketDepth = Math.max(0, bracketDepth - 1);
+    else if (char === "(") parenDepth += 1;
+    else if (char === ")") parenDepth = Math.max(0, parenDepth - 1);
+    else if (char === ">" && braceDepth === 0 && bracketDepth === 0 && parenDepth === 0) {
       return i;
     }
   }
@@ -313,8 +313,8 @@ function findTagEnd(line: string): number {
 
 function splitJsxAttributes(attrs: string): string[] {
   const parts: string[] = [];
-  let current = '';
-  let quote: '"' | '\'' | '`' | null = null;
+  let current = "";
+  let quote: '"' | "'" | "`" | null = null;
   let escaped = false;
   let braceDepth = 0;
   let bracketDepth = 0;
@@ -323,7 +323,7 @@ function splitJsxAttributes(attrs: string): string[] {
   for (const char of attrs) {
     if (quote) {
       current += char;
-      if (char === '\\' && !escaped) {
+      if (char === "\\" && !escaped) {
         escaped = true;
         continue;
       }
@@ -334,23 +334,23 @@ function splitJsxAttributes(attrs: string): string[] {
       continue;
     }
 
-    if (char === '"' || char === '\'' || char === '`') {
+    if (char === '"' || char === "'" || char === "`") {
       quote = char;
       current += char;
       continue;
     }
 
-    if (char === '{') braceDepth += 1;
-    else if (char === '}') braceDepth = Math.max(0, braceDepth - 1);
-    else if (char === '[') bracketDepth += 1;
-    else if (char === ']') bracketDepth = Math.max(0, bracketDepth - 1);
-    else if (char === '(') parenDepth += 1;
-    else if (char === ')') parenDepth = Math.max(0, parenDepth - 1);
+    if (char === "{") braceDepth += 1;
+    else if (char === "}") braceDepth = Math.max(0, braceDepth - 1);
+    else if (char === "[") bracketDepth += 1;
+    else if (char === "]") bracketDepth = Math.max(0, bracketDepth - 1);
+    else if (char === "(") parenDepth += 1;
+    else if (char === ")") parenDepth = Math.max(0, parenDepth - 1);
 
     if (/\s/.test(char) && braceDepth === 0 && bracketDepth === 0 && parenDepth === 0) {
       if (current.trim().length > 0) {
         parts.push(current.trim());
-        current = '';
+        current = "";
       }
       continue;
     }
@@ -369,14 +369,14 @@ function formatLongJsxTagLine(line: string): string {
   const maxInlineLength = 110;
   if (line.length <= maxInlineLength) return line;
 
-  const indent = line.match(/^(\s*)/)?.[1] ?? '';
+  const indent = line.match(/^(\s*)/)?.[1] ?? "";
   const trimmed = line.trimStart();
 
   if (
-    !trimmed.startsWith('<')
-    || trimmed.startsWith('</')
-    || trimmed.startsWith('<!')
-    || trimmed.startsWith('<?')
+    !trimmed.startsWith("<") ||
+    trimmed.startsWith("</") ||
+    trimmed.startsWith("<!") ||
+    trimmed.startsWith("<?")
   ) {
     return line;
   }
@@ -386,7 +386,7 @@ function formatLongJsxTagLine(line: string): string {
   if (trimmed.slice(tagEnd + 1).trim().length > 0) return line;
 
   const rawTagBody = trimmed.slice(1, tagEnd).trim();
-  const isSelfClosing = rawTagBody.endsWith('/');
+  const isSelfClosing = rawTagBody.endsWith("/");
   const tagBody = isSelfClosing ? rawTagBody.slice(0, -1).trimEnd() : rawTagBody;
   const firstSpace = tagBody.search(/\s/);
   if (firstSpace === -1) return line;
@@ -395,31 +395,31 @@ function formatLongJsxTagLine(line: string): string {
   if (!/^[A-Za-z][\w.:-]*$/.test(tagName)) return line;
 
   const attrsSource = tagBody.slice(firstSpace).trim();
-  if (!attrsSource.includes('=') && !attrsSource.includes('{...')) return line;
+  if (!attrsSource.includes("=") && !attrsSource.includes("{...")) return line;
 
   const attrs = splitJsxAttributes(attrsSource);
   if (attrs.length === 0) return line;
 
   const attrIndent = `${indent}  `;
-  const close = isSelfClosing ? '/>' : '>';
+  const close = isSelfClosing ? "/>" : ">";
 
   return [
     `${indent}<${tagName}`,
     ...attrs.map((attr) => `${attrIndent}${attr}`),
     `${indent}${close}`,
-  ].join('\n');
+  ].join("\n");
 }
 
 function formatLongJsxTags(code: string): string {
   return code
-    .split('\n')
-    .flatMap((line) => formatLongJsxTagLine(line).split('\n'))
-    .join('\n');
+    .split("\n")
+    .flatMap((line) => formatLongJsxTagLine(line).split("\n"))
+    .join("\n");
 }
 
 function normalizeCode(code: string): string {
   const trimmed = code.trim();
-  if (trimmed.length === 0) return '';
+  if (trimmed.length === 0) return "";
 
   const normalized = normalizeIndentation(trimmed);
   const dedented = dedent(normalized);
@@ -436,9 +436,9 @@ function parseLineSpec(spec?: (number | string)[]): Set<number> {
   if (!spec) return lines;
 
   for (const item of spec) {
-    if (typeof item === 'number') {
+    if (typeof item === "number") {
       lines.add(item);
-    } else if (typeof item === 'string') {
+    } else if (typeof item === "string") {
       const rangeMatch = item.match(/^(\d+)-(\d+)$/);
       if (rangeMatch) {
         const start = parseInt(rangeMatch[1], 10);
@@ -483,7 +483,7 @@ function processShikiHtml(html: string, options: ProcessOptions): string {
   if (!codeMatch) return html;
 
   const codeContent = codeMatch[1];
-  const lines = codeContent.split('\n');
+  const lines = codeContent.split("\n");
 
   // Process each line
   const processedLines = lines.map((line, index) => {
@@ -493,265 +493,263 @@ function processShikiHtml(html: string, options: ProcessOptions): string {
     const isAdded = addedLines.has(lineNum);
     const isRemoved = removedLines.has(lineNum);
 
-    const lineClasses = ['line'];
-    if (isHighlighted) lineClasses.push('highlighted');
-    if (isAdded) lineClasses.push('diff-added');
-    if (isRemoved) lineClasses.push('diff-removed');
+    const lineClasses = ["line"];
+    if (isHighlighted) lineClasses.push("highlighted");
+    if (isAdded) lineClasses.push("diff-added");
+    if (isRemoved) lineClasses.push("diff-removed");
 
-    const lineClass = lineClasses.join(' ');
-    const diffMarker = isAdded ? '+' : isRemoved ? '-' : ' ';
+    const lineClass = lineClasses.join(" ");
+    const diffMarker = isAdded ? "+" : isRemoved ? "-" : " ";
 
     if (showLineNumbers || hasDiff) {
       const lineNumHtml = showLineNumbers
         ? `<span class="line-number">${displayLineNum}</span>`
-        : '';
-      const diffMarkerHtml = hasDiff
-        ? `<span class="diff-marker">${diffMarker}</span>`
-        : '';
+        : "";
+      const diffMarkerHtml = hasDiff ? `<span class="diff-marker">${diffMarker}</span>` : "";
       return `<span class="${lineClass}">${lineNumHtml}${diffMarkerHtml}${line}</span>`;
     }
     return `<span class="${lineClass}">${line}</span>`;
   });
 
   // Reconstruct the HTML
-  return html.replace(
-    /<code[^>]*>[\s\S]*?<\/code>/,
-    `<code>${processedLines.join('\n')}</code>`
-  );
+  return html.replace(/<code[^>]*>[\s\S]*?<\/code>/, `<code>${processedLines.join("\n")}</code>`);
 }
 
-const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(
-  function CodeBlock(
-    {
-      code,
-      language = 'tsx',
-      theme = 'one-dark-pro',
-      showCopy = true,
-      title,
-      filename,
-      caption,
-      showLineNumbers = false,
-      startLineNumber = 1,
-      highlightLines,
-      addedLines,
-      removedLines,
-      wordWrap = false,
-      maxHeight,
-      collapsible = false,
-      defaultCollapsed = false,
-      collapsedLines = 5,
-      compact = false,
-      persistentCopy = false,
-      copyPlacement = 'auto',
-      onCopy,
-      className,
-      ...htmlProps
-    },
-    ref
-  ) {
-    const [copied, setCopied] = useState(false);
-    const [highlightedHtml, setHighlightedHtml] = useState<string>('');
-    const [isLoading, setIsLoading] = useState(true);
-    const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
-
-    const trimmedCode = useMemo(() => normalizeCode(code), [code]);
-    const codeLines = trimmedCode.split('\n');
-    const totalLines = codeLines.length;
-    const shouldShowCollapse = collapsible && totalLines > collapsedLines;
-
-    // Compute visible code when collapsed
-    const visibleCode = shouldShowCollapse && isCollapsed
-      ? codeLines.slice(0, collapsedLines).join('\n')
-      : trimmedCode;
-
-    const highlightSet = useMemo(() => parseLineSpec(highlightLines), [highlightLines]);
-    const addedSet = useMemo(() => parseLineSpec(addedLines), [addedLines]);
-    const removedSet = useMemo(() => parseLineSpec(removedLines), [removedLines]);
-    const hasDiff = addedSet.size > 0 || removedSet.size > 0;
-    const resolvedCopyPlacement = copyPlacement === 'auto'
-      ? (filename ? 'header' : 'overlay')
-      : copyPlacement;
-    const shouldShowHeaderCopy = showCopy && !persistentCopy && resolvedCopyPlacement === 'header';
-    const shouldShowOverlayCopy = showCopy && !persistentCopy && resolvedCopyPlacement === 'overlay';
-    const shouldRenderHeader = Boolean(filename) || shouldShowHeaderCopy;
-
-    // Apply syntax highlighting
-    useEffect(() => {
-      let cancelled = false;
-      setIsLoading(true);
-
-      loadShikiDeps();
-
-      if (_shikiFailed || !_codeToHtml) {
-        if (_shikiFailed && process.env.NODE_ENV === 'development') {
-          console.warn(
-            '[@fragments-sdk/ui] CodeBlock: shiki is not installed. ' +
-            'Install it with: npm install shiki'
-          );
-        }
-        // Fallback to plain text without syntax highlighting
-        setHighlightedHtml(
-          `<pre class="shiki"><code>${escapeHtml(visibleCode)}</code></pre>`
+const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(function CodeBlock(
+  {
+    code,
+    language = "tsx",
+    theme = "one-dark-pro",
+    showCopy = true,
+    title,
+    filename,
+    caption,
+    showLineNumbers = false,
+    startLineNumber = 1,
+    highlightLines,
+    addedLines,
+    removedLines,
+    wordWrap = false,
+    maxHeight,
+    collapsible = false,
+    defaultCollapsed = false,
+    collapsedLines = 5,
+    compact = false,
+    persistentCopy = false,
+    copyPlacement = "auto",
+    onCopy,
+    className,
+    ...htmlProps
+  },
+  ref
+) {
+  const [copied, setCopied] = useState(false);
+  const [highlightedHtml, setHighlightedHtml] = useState<string>("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+
+  const trimmedCode = useMemo(() => normalizeCode(code), [code]);
+  const codeLines = trimmedCode.split("\n");
+  const totalLines = codeLines.length;
+  const shouldShowCollapse = collapsible && totalLines > collapsedLines;
+
+  // Compute visible code when collapsed
+  const visibleCode =
+    shouldShowCollapse && isCollapsed ? codeLines.slice(0, collapsedLines).join("\n") : trimmedCode;
+
+  const highlightSet = useMemo(() => parseLineSpec(highlightLines), [highlightLines]);
+  const addedSet = useMemo(() => parseLineSpec(addedLines), [addedLines]);
+  const removedSet = useMemo(() => parseLineSpec(removedLines), [removedLines]);
+  const hasDiff = addedSet.size > 0 || removedSet.size > 0;
+  const resolvedCopyPlacement =
+    copyPlacement === "auto" ? (filename ? "header" : "overlay") : copyPlacement;
+  const shouldShowHeaderCopy = showCopy && !persistentCopy && resolvedCopyPlacement === "header";
+  const shouldShowOverlayCopy = showCopy && !persistentCopy && resolvedCopyPlacement === "overlay";
+  const shouldRenderHeader = Boolean(filename) || shouldShowHeaderCopy;
+
+  // Apply syntax highlighting
+  useEffect(() => {
+    let cancelled = false;
+    setIsLoading(true);
+
+    loadShikiDeps();
+
+    if (_shikiFailed || !_codeToHtml) {
+      if (_shikiFailed && process.env.NODE_ENV === "development") {
+        console.warn(
+          "[@fragments-sdk/ui] CodeBlock: shiki is not installed. " +
+            "Install it with: npm install shiki"
         );
-        setIsLoading(false);
-        return;
       }
+      // Fallback to plain text without syntax highlighting
+      setHighlightedHtml(`<pre class="shiki"><code>${escapeHtml(visibleCode)}</code></pre>`);
+      setIsLoading(false);
+      return;
+    }
 
-      _codeToHtml(visibleCode, {
-        lang: language,
-        theme,
+    _codeToHtml(visibleCode, {
+      lang: language,
+      theme,
+    })
+      .then((html) => {
+        if (!cancelled) {
+          const processed = processShikiHtml(html, {
+            showLineNumbers,
+            startLineNumber,
+            highlightLines: highlightSet,
+            addedLines: addedSet,
+            removedLines: removedSet,
+          });
+          setHighlightedHtml(processed);
+          setIsLoading(false);
+        }
       })
-        .then((html) => {
-          if (!cancelled) {
-            const processed = processShikiHtml(html, {
-              showLineNumbers,
-              startLineNumber,
-              highlightLines: highlightSet,
-              addedLines: addedSet,
-              removedLines: removedSet,
-            });
-            setHighlightedHtml(processed);
-            setIsLoading(false);
-          }
-        })
-        .catch((err) => {
-          if (process.env.NODE_ENV !== 'production') {
-            console.error('Syntax highlighting failed:', err);
-          }
-          if (!cancelled) {
-            // Fallback to plain text
-            setHighlightedHtml(
-              `<pre class="shiki"><code>${escapeHtml(visibleCode)}</code></pre>`
-            );
-            setIsLoading(false);
-          }
-        });
-
-      return () => {
-        cancelled = true;
-      };
-    }, [visibleCode, language, theme, showLineNumbers, startLineNumber, highlightSet, addedSet, removedSet]);
-
-    const handleCopy = useCallback(async () => {
-      try {
-        // Always copy the full code, even when collapsed
-        await navigator.clipboard.writeText(trimmedCode);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
-        onCopy?.();
-      } catch (err) {
-        if (process.env.NODE_ENV !== 'production') {
-          console.error('Failed to copy:', err);
+      .catch((err) => {
+        if (process.env.NODE_ENV !== "production") {
+          console.error("Syntax highlighting failed:", err);
         }
+        if (!cancelled) {
+          // Fallback to plain text
+          setHighlightedHtml(`<pre class="shiki"><code>${escapeHtml(visibleCode)}</code></pre>`);
+          setIsLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    visibleCode,
+    language,
+    theme,
+    showLineNumbers,
+    startLineNumber,
+    highlightSet,
+    addedSet,
+    removedSet,
+  ]);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      // Always copy the full code, even when collapsed
+      await navigator.clipboard.writeText(trimmedCode);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+      onCopy?.();
+    } catch (err) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("Failed to copy:", err);
       }
-    }, [trimmedCode, onCopy]);
-
-    const toggleCollapsed = useCallback(() => {
-      setIsCollapsed((prev) => !prev);
-    }, []);
-
-    const classNames = [
-      styles.container,
-      showLineNumbers && styles.withLineNumbers,
-      hasDiff && styles.withDiff,
-      wordWrap && styles.wordWrap,
-      compact && styles.compact,
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ');
-
-    const wrapperClasses = [
-      styles.wrapper,
-      persistentCopy && styles.persistentCopyWrapper,
-      shouldShowOverlayCopy && styles.withCopyOverlay,
-    ].filter(Boolean).join(' ');
-
-    const codeContainerStyle: React.CSSProperties = maxHeight
-      ? { maxHeight, overflow: 'auto' }
-      : {};
-
-    return (
-      <div ref={ref} {...htmlProps} className={classNames} data-theme="dark">
-        {title && <div className={styles.title}>{title}</div>}
-        <div className={wrapperClasses}>
-          {shouldRenderHeader && (
-            <div className={styles.header}>
-              <span className={styles.filename}>{filename ?? ''}</span>
-              {shouldShowHeaderCopy && (
-                <button
-                  type="button"
-                  onClick={handleCopy}
-                  className={`${styles.copyButton} ${copied ? styles.copied : ''}`}
-                  aria-label={copied ? 'Copied!' : 'Copy code'}
-                >
-                  {copied ? <CheckIcon className={styles.icon} /> : <CopyIcon className={styles.icon} />}
-                </button>
-              )}
-            </div>
-          )}
-          {shouldShowOverlayCopy && (
-            <button
-              type="button"
-              onClick={handleCopy}
-              className={`${styles.copyButton} ${styles.copyOverlay} ${copied ? styles.copied : ''}`}
-              aria-label={copied ? 'Copied!' : 'Copy code'}
-            >
-              {copied ? <CheckIcon className={styles.icon} /> : <CopyIcon className={styles.icon} />}
-            </button>
-          )}
-          {isLoading ? (
-            <div className={styles.loading} style={codeContainerStyle}>
-              <pre>
-                <code>{visibleCode}</code>
-              </pre>
-            </div>
-          ) : (
-            <div
-              className={styles.codeContainer}
-              style={codeContainerStyle}
-              dangerouslySetInnerHTML={{ __html: highlightedHtml }}
-            />
-          )}
-          {persistentCopy && (
-            <div className={styles.persistentCopy}>
-              <Button
-                size="sm"
+    }
+  }, [trimmedCode, onCopy]);
+
+  const toggleCollapsed = useCallback(() => {
+    setIsCollapsed((prev) => !prev);
+  }, []);
+
+  const classNames = [
+    styles.container,
+    showLineNumbers && styles.withLineNumbers,
+    hasDiff && styles.withDiff,
+    wordWrap && styles.wordWrap,
+    compact && styles.compact,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const wrapperClasses = [
+    styles.wrapper,
+    persistentCopy && styles.persistentCopyWrapper,
+    shouldShowOverlayCopy && styles.withCopyOverlay,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const codeContainerStyle: React.CSSProperties = maxHeight ? { maxHeight, overflow: "auto" } : {};
+
+  return (
+    <div ref={ref} {...htmlProps} className={classNames} data-theme="dark">
+      {title && <div className={styles.title}>{title}</div>}
+      <div className={wrapperClasses}>
+        {shouldRenderHeader && (
+          <div className={styles.header}>
+            <span className={styles.filename}>{filename ?? ""}</span>
+            {shouldShowHeaderCopy && (
+              <button
+                type="button"
                 onClick={handleCopy}
-                aria-label={copied ? 'Copied!' : 'Copy code'}
-                icon={copied ? true : false}
+                className={`${styles.copyButton} ${copied ? styles.copied : ""}`}
+                aria-label={copied ? "Copied!" : "Copy code"}
               >
-                {copied ? <CheckIcon className={styles.icon} /> : <CopyIcon className={styles.icon} />}
-              </Button>
-            </div>
-          )}
-          {shouldShowCollapse && (
-            <button
-              type="button"
-              onClick={toggleCollapsed}
-              className={styles.collapseButton}
-              aria-expanded={!isCollapsed}
-              aria-label={isCollapsed ? 'Expand code' : 'Collapse code'}
-            >
-              {isCollapsed ? (
-                <>
-                  <ChevronDownIcon className={styles.icon} />
-                  <span>Show {totalLines - collapsedLines} more lines</span>
-                </>
-              ) : (
-                <>
-                  <ChevronUpIcon className={styles.icon} />
-                  <span>Show less</span>
-                </>
-              )}
-            </button>
-          )}
-        </div>
-        {caption && <div className={styles.caption}>{caption}</div>}
+                {copied ? (
+                  <CheckIcon className={styles.icon} />
+                ) : (
+                  <CopyIcon className={styles.icon} />
+                )}
+              </button>
+            )}
+          </div>
+        )}
+        {shouldShowOverlayCopy && (
+          <button
+            type="button"
+            onClick={handleCopy}
+            className={`${styles.copyButton} ${styles.copyOverlay} ${copied ? styles.copied : ""}`}
+            aria-label={copied ? "Copied!" : "Copy code"}
+          >
+            {copied ? <CheckIcon className={styles.icon} /> : <CopyIcon className={styles.icon} />}
+          </button>
+        )}
+        {isLoading ? (
+          <div className={styles.loading} style={codeContainerStyle}>
+            <pre>
+              <code>{visibleCode}</code>
+            </pre>
+          </div>
+        ) : (
+          <div
+            className={styles.codeContainer}
+            style={codeContainerStyle}
+            dangerouslySetInnerHTML={{ __html: highlightedHtml }}
+          />
+        )}
+        {persistentCopy && (
+          <button
+            type="button"
+            onClick={handleCopy}
+            className={`${styles.persistentCopy} ${styles.copyButton} ${styles.copyOverlay} ${copied ? styles.copied : ""}`}
+            aria-label={copied ? "Copied!" : "Copy code"}
+          >
+            {copied ? <CheckIcon className={styles.icon} /> : <CopyIcon className={styles.icon} />}
+          </button>
+        )}
+        {shouldShowCollapse && (
+          <button
+            type="button"
+            onClick={toggleCollapsed}
+            className={styles.collapseButton}
+            aria-expanded={!isCollapsed}
+            aria-label={isCollapsed ? "Expand code" : "Collapse code"}
+          >
+            {isCollapsed ? (
+              <>
+                <ChevronDownIcon className={styles.icon} />
+                <span>Show {totalLines - collapsedLines} more lines</span>
+              </>
+            ) : (
+              <>
+                <ChevronUpIcon className={styles.icon} />
+                <span>Show less</span>
+              </>
+            )}
+          </button>
+        )}
       </div>
-    );
-  }
-);
+      {caption && <div className={styles.caption}>{caption}</div>}
+    </div>
+  );
+});
 
 // ============================================
 // Tabbed Code Block
@@ -780,7 +778,7 @@ export interface TabbedCodeBlockProps {
   /** Syntax highlighting theme (applies to all tabs) */
   theme?: CodeBlockTheme;
   /** Tab list visual style */
-  tabsVariant?: 'underline' | 'pills';
+  tabsVariant?: "underline" | "pills";
   /** Enable word wrapping for long lines */
   wordWrap?: boolean;
   /** Maximum height in pixels (enables scrolling) */
@@ -795,16 +793,16 @@ function TabbedCodeBlock({
   tabs,
   defaultTab,
   showCopy = true,
-  copyPlacement = 'auto',
+  copyPlacement = "auto",
   showLineNumbers = false,
   theme,
-  tabsVariant = 'pills',
+  tabsVariant = "pills",
   wordWrap,
   maxHeight,
   className,
   onCopy,
 }: TabbedCodeBlockProps) {
-  const defaultValue = defaultTab || tabs[0]?.label || '';
+  const defaultValue = defaultTab || tabs[0]?.label || "";
 
   return (
     <div className={className}>