@flanksource/clicky-ui 0.3.10 → 0.3.11

package/dist/data/CodeBlock.cjs

@@ -3,6 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const utils = require("../lib/utils.cjs");
+const useTheme = require("../hooks/use-theme.cjs");
+const codeBlockActions = require("./code-block-actions.cjs");
+const CodeDiff = require("./CodeDiff.cjs");
 const JsonView = require("./JsonView.cjs");
 const codeHighlight = require("./code-highlight.cjs");
 const htmlUtils = require("./html-utils.cjs");
@@ -11,7 +14,13 @@ function CodeBlock({
   source = "",
   highlightedHtml,
   className,
-  jsonDefaultOpenDepth = 2
+  jsonDefaultOpenDepth = 2,
+  bare = false,
+  copyable = false,
+  downloadable = false,
+  themeToggle = false,
+  diff,
+  diffView
 }) {
   const language = (languageProp ?? "").toLowerCase().replace(/^\.+/, "");
   const chromaHtml = highlightedHtml ? htmlUtils.sanitizeHtml(highlightedHtml) : "";
@@ -19,6 +28,9 @@ function CodeBlock({
     () => language === "json" ? tryParseJson(source) : JSON_PARSE_FAILED,
     [language, source]
   );
+  const globalTheme = useTheme.useResolvedTheme();
+  const [themeOverride, setThemeOverride] = react.useState(null);
+  const effectiveTheme = themeOverride ?? globalTheme;
   const [shikiHtml, setShikiHtml] = react.useState(null);
   const wantsClientHighlight = !chromaHtml && !!language && !!source;
   react.useEffect(() => {
@@ -27,35 +39,103 @@ function CodeBlock({
       return;
     }
     let cancelled = false;
-    codeHighlight.highlightCode(source, { lang: language }).then((out) => {
+    const theme = effectiveTheme === "dark" ? "github-dark" : "github-light";
+    codeHighlight.highlightCode(source, { lang: language, theme }).then((out) => {
       if (!cancelled) setShikiHtml(out);
     });
     return () => {
       cancelled = true;
     };
-  }, [wantsClientHighlight, language, source]);
-  if (parsedJson !== JSON_PARSE_FAILED) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("overflow-hidden rounded-md border border-border bg-muted/40", className), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-border px-3 py-1.5 text-[11px] uppercase tracking-wide text-muted-foreground", children: "json" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-auto p-3 text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(JsonView.JsonView, { data: parsedJson, defaultOpenDepth: jsonDefaultOpenDepth }) })
-    ] });
-  }
-  const xmlClasses = language === "xml" || language === "xslt" || language === "html" ? " [&_.chroma_.nt]:text-pink-700 [&_.chroma_.nt]:dark:text-pink-300 [&_.chroma_.nt]:font-semibold [&_.chroma_.na]:text-amber-700 [&_.chroma_.na]:dark:text-amber-300 [&_.chroma_.s]:text-emerald-700 [&_.chroma_.s]:dark:text-emerald-300 [&_.chroma_.c]:text-slate-500 [&_.chroma_.c]:italic [&_.chroma_.cp]:text-slate-500 [&_.chroma_.cp]:italic [&_pre]:leading-relaxed" : "";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("overflow-hidden rounded-md border border-border bg-muted/40", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-border px-3 py-1.5 text-[11px] uppercase tracking-wide text-muted-foreground", children: languageProp || "text" }),
-    chromaHtml ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+  }, [wantsClientHighlight, language, source, effectiveTheme]);
+  const headerActions = /* @__PURE__ */ jsxRuntime.jsx(
+    codeBlockActions.CodeBlockActions,
+    {
+      source,
+      language: languageProp,
+      copyable,
+      downloadable,
+      theme: effectiveTheme,
+      ...themeToggle ? { onToggleTheme: () => setThemeOverride(effectiveTheme === "dark" ? "light" : "dark") } : {}
+    }
+  );
+  const overrideAttrs = themeOverride ? { "data-theme": themeOverride } : {};
+  if (diff) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CodeDiff.CodeDiff,
       {
-        className: "overflow-auto p-3 text-xs font-mono [&_.chroma]:bg-transparent [&_pre]:m-0 [&_pre]:whitespace-pre-wrap [&_pre]:bg-transparent" + xmlClasses,
-        dangerouslySetInnerHTML: { __html: chromaHtml }
+        language: languageProp,
+        view: diffView,
+        bare,
+        className,
+        ...diff
       }
-    ) : shikiHtml ? /* @__PURE__ */ jsxRuntime.jsx(
+    );
+  }
+  if (parsedJson !== JSON_PARSE_FAILED) {
+    const tree = /* @__PURE__ */ jsxRuntime.jsx(JsonView.JsonView, { data: parsedJson, defaultOpenDepth: jsonDefaultOpenDepth });
+    if (bare) return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("overflow-auto text-xs", className), children: tree });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: "overflow-auto p-3 text-xs font-mono [&_pre]:m-0 [&_pre.shiki]:!bg-transparent [&_pre]:whitespace-pre-wrap",
-        dangerouslySetInnerHTML: { __html: shikiHtml }
+        className: utils.cn("overflow-hidden rounded-md border border-border bg-muted/40", className),
+        ...overrideAttrs,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CodeBlockHeader, { label: "json", actions: headerActions }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-auto p-3 text-xs", children: tree })
+        ]
       }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "overflow-auto whitespace-pre-wrap break-words p-3 text-xs font-mono text-foreground", children: source })
+    );
+  }
+  const xmlClasses = language === "xml" || language === "xslt" || language === "html" ? " [&_.chroma_.nt]:text-pink-700 [&_.chroma_.nt]:dark:text-pink-300 [&_.chroma_.nt]:font-semibold [&_.chroma_.na]:text-amber-700 [&_.chroma_.na]:dark:text-amber-300 [&_.chroma_.s]:text-emerald-700 [&_.chroma_.s]:dark:text-emerald-300 [&_.chroma_.c]:text-slate-500 [&_.chroma_.c]:italic [&_.chroma_.cp]:text-slate-500 [&_.chroma_.cp]:italic [&_pre]:leading-relaxed" : "";
+  const pad = bare ? void 0 : "p-3";
+  const body = chromaHtml ? /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils.cn(
+        "overflow-auto text-xs font-mono [&_.chroma]:bg-transparent [&_pre]:m-0 [&_pre]:whitespace-pre-wrap [&_pre]:bg-transparent" + xmlClasses,
+        pad,
+        bare && className
+      ),
+      dangerouslySetInnerHTML: { __html: chromaHtml }
+    }
+  ) : shikiHtml ? /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils.cn(
+        "overflow-auto text-xs font-mono [&_pre]:m-0 [&_pre.shiki]:!bg-transparent [&_pre]:whitespace-pre-wrap",
+        pad,
+        bare && className
+      ),
+      dangerouslySetInnerHTML: { __html: shikiHtml }
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    "pre",
+    {
+      className: utils.cn(
+        "overflow-auto whitespace-pre-wrap break-words text-xs font-mono text-foreground",
+        pad,
+        bare && className
+      ),
+      children: source
+    }
+  );
+  if (bare) return body;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn("overflow-hidden rounded-md border border-border bg-muted/40", className),
+      ...overrideAttrs,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CodeBlockHeader, { label: languageProp || "text", actions: headerActions }),
+        body
+      ]
+    }
+  );
+}
+function CodeBlockHeader({ label, actions }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border px-3 py-1.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] uppercase tracking-wide text-muted-foreground", children: label }),
+    actions
   ] });
 }
 const JSON_PARSE_FAILED = Symbol("json-parse-failed");

package/dist/data/CodeBlock.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.cjs","sources":["../../src/data/CodeBlock.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { JsonView } from \"./JsonView\";\nimport { highlightCode } from \"./code-highlight\";\nimport { sanitizeHtml } from \"./html-utils\";\n\nexport type CodeBlockProps = {\n  /** Language label and highlighter hint, e.g. `json`, `tsx`, or `bash`. */\n  language?: string | undefined;\n  /** Raw source code to render or highlight. */\n  source?: string | undefined;\n  /** Trusted server-rendered highlighted HTML, sanitized before rendering. */\n  highlightedHtml?: string | undefined;\n  /** Classes applied to the code block shell. */\n  className?: string | undefined;\n  /** Default expansion depth when rendering JSON as a tree. */\n  jsonDefaultOpenDepth?: number | undefined;\n};\n\nexport function CodeBlock({\n  language: languageProp,\n  source = \"\",\n  highlightedHtml,\n  className,\n  jsonDefaultOpenDepth = 2,\n}: CodeBlockProps) {\n  const language = (languageProp ?? \"\").toLowerCase().replace(/^\\.+/, \"\");\n  const chromaHtml = highlightedHtml ? sanitizeHtml(highlightedHtml) : \"\";\n  const parsedJson = useMemo(\n    () => (language === \"json\" ? tryParseJson(source) : JSON_PARSE_FAILED),\n    [language, source],\n  );\n  const [shikiHtml, setShikiHtml] = useState<string | null>(null);\n  const wantsClientHighlight = !chromaHtml && !!language && !!source;\n\n  useEffect(() => {\n    if (!wantsClientHighlight) {\n      setShikiHtml(null);\n      return;\n    }\n\n    let cancelled = false;\n    highlightCode(source, { lang: language }).then((out) => {\n      if (!cancelled) setShikiHtml(out);\n    });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [wantsClientHighlight, language, source]);\n\n  if (parsedJson !== JSON_PARSE_FAILED) {\n    return (\n      <div className={cn(\"overflow-hidden rounded-md border border-border bg-muted/40\", className)}>\n        <div className=\"border-b border-border px-3 py-1.5 text-[11px] uppercase tracking-wide text-muted-foreground\">\n          json\n        </div>\n        <div className=\"overflow-auto p-3 text-xs\">\n          <JsonView data={parsedJson} defaultOpenDepth={jsonDefaultOpenDepth} />\n        </div>\n      </div>\n    );\n  }\n\n  const xmlClasses =\n    language === \"xml\" || language === \"xslt\" || language === \"html\"\n      ? \" [&_.chroma_.nt]:text-pink-700 [&_.chroma_.nt]:dark:text-pink-300 [&_.chroma_.nt]:font-semibold\" +\n        \" [&_.chroma_.na]:text-amber-700 [&_.chroma_.na]:dark:text-amber-300\" +\n        \" [&_.chroma_.s]:text-emerald-700 [&_.chroma_.s]:dark:text-emerald-300\" +\n        \" [&_.chroma_.c]:text-slate-500 [&_.chroma_.c]:italic\" +\n        \" [&_.chroma_.cp]:text-slate-500 [&_.chroma_.cp]:italic\" +\n        \" [&_pre]:leading-relaxed\"\n      : \"\";\n\n  return (\n    <div className={cn(\"overflow-hidden rounded-md border border-border bg-muted/40\", className)}>\n      <div className=\"border-b border-border px-3 py-1.5 text-[11px] uppercase tracking-wide text-muted-foreground\">\n        {languageProp || \"text\"}\n      </div>\n      {chromaHtml ? (\n        <div\n          className={\n            \"overflow-auto p-3 text-xs font-mono [&_.chroma]:bg-transparent [&_pre]:m-0 [&_pre]:whitespace-pre-wrap [&_pre]:bg-transparent\" +\n            xmlClasses\n          }\n          dangerouslySetInnerHTML={{ __html: chromaHtml }}\n        />\n      ) : shikiHtml ? (\n        <div\n          className=\"overflow-auto p-3 text-xs font-mono [&_pre]:m-0 [&_pre.shiki]:!bg-transparent [&_pre]:whitespace-pre-wrap\"\n          dangerouslySetInnerHTML={{ __html: shikiHtml }}\n        />\n      ) : (\n        <pre className=\"overflow-auto whitespace-pre-wrap break-words p-3 text-xs font-mono text-foreground\">\n          {source}\n        </pre>\n      )}\n    </div>\n  );\n}\n\nconst JSON_PARSE_FAILED: unique symbol = Symbol(\"json-parse-failed\");\n\nfunction tryParseJson(source: string): unknown | typeof JSON_PARSE_FAILED {\n  const trimmed = source.trim();\n  if (!trimmed) return JSON_PARSE_FAILED;\n  try {\n    return JSON.parse(trimmed);\n  } catch {\n    return JSON_PARSE_FAILED;\n  }\n}\n"],"names":["sanitizeHtml","useMemo","useState","useEffect","highlightCode","cn","jsx","JsonView"],"mappings":";;;;;;;;AAmBO,SAAS,UAAU;AAAA,EACxB,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,uBAAuB;AACzB,GAAmB;AACjB,QAAM,YAAY,gBAAgB,IAAI,cAAc,QAAQ,QAAQ,EAAE;AACtE,QAAM,aAAa,kBAAkBA,uBAAa,eAAe,IAAI;AACrE,QAAM,aAAaC,MAAAA;AAAAA,IACjB,MAAO,aAAa,SAAS,aAAa,MAAM,IAAI;AAAA,IACpD,CAAC,UAAU,MAAM;AAAA,EAAA;AAEnB,QAAM,CAAC,WAAW,YAAY,IAAIC,MAAAA,SAAwB,IAAI;AAC9D,QAAM,uBAAuB,CAAC,cAAc,CAAC,CAAC,YAAY,CAAC,CAAC;AAE5DC,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,sBAAsB;AACzB,mBAAa,IAAI;AACjB;AAAA,IACF;AAEA,QAAI,YAAY;AAChBC,kBAAAA,cAAc,QAAQ,EAAE,MAAM,SAAA,CAAU,EAAE,KAAK,CAAC,QAAQ;AACtD,UAAI,CAAC,UAAW,cAAa,GAAG;AAAA,IAClC,CAAC;AAED,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,sBAAsB,UAAU,MAAM,CAAC;AAE3C,MAAI,eAAe,mBAAmB;AACpC,2CACG,OAAA,EAAI,WAAWC,MAAAA,GAAG,+DAA+D,SAAS,GACzF,UAAA;AAAA,MAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAU,gGAA+F,UAAA,QAE9G;AAAA,MACAA,2BAAAA,IAAC,OAAA,EAAI,WAAU,6BACb,UAAAA,2BAAAA,IAACC,SAAAA,YAAS,MAAM,YAAY,kBAAkB,qBAAA,CAAsB,EAAA,CACtE;AAAA,IAAA,GACF;AAAA,EAEJ;AAEA,QAAM,aACJ,aAAa,SAAS,aAAa,UAAU,aAAa,SACtD,8WAMA;AAEN,yCACG,OAAA,EAAI,WAAWF,MAAAA,GAAG,+DAA+D,SAAS,GACzF,UAAA;AAAA,IAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAU,gGACZ,UAAA,gBAAgB,QACnB;AAAA,IACC,aACCA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WACE,kIACA;AAAA,QAEF,yBAAyB,EAAE,QAAQ,WAAA;AAAA,MAAW;AAAA,IAAA,IAE9C,YACFA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,yBAAyB,EAAE,QAAQ,UAAA;AAAA,MAAU;AAAA,IAAA,IAG/CA,2BAAAA,IAAC,OAAA,EAAI,WAAU,uFACZ,UAAA,OAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AAEA,MAAM,oBAAmC,OAAO,mBAAmB;AAEnE,SAAS,aAAa,QAAoD;AACxE,QAAM,UAAU,OAAO,KAAA;AACvB,MAAI,CAAC,QAAS,QAAO;AACrB,MAAI;AACF,WAAO,KAAK,MAAM,OAAO;AAAA,EAC3B,QAAQ;AACN,WAAO;AAAA,EACT;AACF;;"}
+{"version":3,"file":"CodeBlock.cjs","sources":["../../src/data/CodeBlock.tsx"],"sourcesContent":["import { useEffect, useMemo, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { useResolvedTheme, type ResolvedTheme } from \"../hooks/use-theme\";\nimport { CodeBlockActions } from \"./code-block-actions\";\nimport { CodeDiff } from \"./CodeDiff\";\nimport { JsonView } from \"./JsonView\";\nimport { highlightCode } from \"./code-highlight\";\nimport { sanitizeHtml } from \"./html-utils\";\n\nexport type CodeBlockProps = {\n  /** Language label and highlighter hint, e.g. `json`, `tsx`, or `bash`. */\n  language?: string | undefined;\n  /** Raw source code to render or highlight. */\n  source?: string | undefined;\n  /** Trusted server-rendered highlighted HTML, sanitized before rendering. */\n  highlightedHtml?: string | undefined;\n  /** Classes applied to the code block shell. */\n  className?: string | undefined;\n  /** Default expansion depth when rendering JSON as a tree. */\n  jsonDefaultOpenDepth?: number | undefined;\n  /** Render only the code — no border, background, or language header. */\n  bare?: boolean | undefined;\n  /** Show a copy-to-clipboard button in the header (ignored when `bare`). */\n  copyable?: boolean | undefined;\n  /** Show a download button in the header (ignored when `bare`). */\n  downloadable?: boolean | undefined;\n  /** Show a per-block light/dark theme toggle in the header (ignored when `bare`). */\n  themeToggle?: boolean | undefined;\n  /** Render a language-aware diff instead of highlighting `source`. */\n  diff?: { original: string; modified: string } | { unified: string } | undefined;\n  /** Diff layout when `diff` is set. Defaults to `unified`. */\n  diffView?: \"unified\" | \"split\" | undefined;\n};\n\nexport function CodeBlock({\n  language: languageProp,\n  source = \"\",\n  highlightedHtml,\n  className,\n  jsonDefaultOpenDepth = 2,\n  bare = false,\n  copyable = false,\n  downloadable = false,\n  themeToggle = false,\n  diff,\n  diffView,\n}: CodeBlockProps) {\n  const language = (languageProp ?? \"\").toLowerCase().replace(/^\\.+/, \"\");\n  const chromaHtml = highlightedHtml ? sanitizeHtml(highlightedHtml) : \"\";\n  const parsedJson = useMemo(\n    () => (language === \"json\" ? tryParseJson(source) : JSON_PARSE_FAILED),\n    [language, source],\n  );\n  // The block follows the global app theme by default; a per-block override\n  // (set by the header toggle) wins over it and re-highlights just this block.\n  const globalTheme = useResolvedTheme();\n  const [themeOverride, setThemeOverride] = useState<ResolvedTheme | null>(null);\n  const effectiveTheme = themeOverride ?? globalTheme;\n  const [shikiHtml, setShikiHtml] = useState<string | null>(null);\n  const wantsClientHighlight = !chromaHtml && !!language && !!source;\n\n  useEffect(() => {\n    if (!wantsClientHighlight) {\n      setShikiHtml(null);\n      return;\n    }\n\n    let cancelled = false;\n    const theme = effectiveTheme === \"dark\" ? \"github-dark\" : \"github-light\";\n    highlightCode(source, { lang: language, theme }).then((out) => {\n      if (!cancelled) setShikiHtml(out);\n    });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [wantsClientHighlight, language, source, effectiveTheme]);\n\n  const headerActions = (\n    <CodeBlockActions\n      source={source}\n      language={languageProp}\n      copyable={copyable}\n      downloadable={downloadable}\n      theme={effectiveTheme}\n      {...(themeToggle\n        ? { onToggleTheme: () => setThemeOverride(effectiveTheme === \"dark\" ? \"light\" : \"dark\") }\n        : {})}\n    />\n  );\n  // Re-scope theme tokens (shell background/border/label) to the override so an\n  // overridden block stays visually coherent with its re-highlighted code.\n  const overrideAttrs = themeOverride ? { \"data-theme\": themeOverride } : {};\n\n  if (diff) {\n    return (\n      <CodeDiff\n        language={languageProp}\n        view={diffView}\n        bare={bare}\n        className={className}\n        {...diff}\n      />\n    );\n  }\n\n  if (parsedJson !== JSON_PARSE_FAILED) {\n    const tree = <JsonView data={parsedJson} defaultOpenDepth={jsonDefaultOpenDepth} />;\n    if (bare) return <div className={cn(\"overflow-auto text-xs\", className)}>{tree}</div>;\n    return (\n      <div\n        className={cn(\"overflow-hidden rounded-md border border-border bg-muted/40\", className)}\n        {...overrideAttrs}\n      >\n        <CodeBlockHeader label=\"json\" actions={headerActions} />\n        <div className=\"overflow-auto p-3 text-xs\">{tree}</div>\n      </div>\n    );\n  }\n\n  const xmlClasses =\n    language === \"xml\" || language === \"xslt\" || language === \"html\"\n      ? \" [&_.chroma_.nt]:text-pink-700 [&_.chroma_.nt]:dark:text-pink-300 [&_.chroma_.nt]:font-semibold\" +\n        \" [&_.chroma_.na]:text-amber-700 [&_.chroma_.na]:dark:text-amber-300\" +\n        \" [&_.chroma_.s]:text-emerald-700 [&_.chroma_.s]:dark:text-emerald-300\" +\n        \" [&_.chroma_.c]:text-slate-500 [&_.chroma_.c]:italic\" +\n        \" [&_.chroma_.cp]:text-slate-500 [&_.chroma_.cp]:italic\" +\n        \" [&_pre]:leading-relaxed\"\n      : \"\";\n\n  const pad = bare ? undefined : \"p-3\";\n  const body = chromaHtml ? (\n    <div\n      className={cn(\n        \"overflow-auto text-xs font-mono [&_.chroma]:bg-transparent [&_pre]:m-0 [&_pre]:whitespace-pre-wrap [&_pre]:bg-transparent\" +\n          xmlClasses,\n        pad,\n        bare && className,\n      )}\n      dangerouslySetInnerHTML={{ __html: chromaHtml }}\n    />\n  ) : shikiHtml ? (\n    <div\n      className={cn(\n        \"overflow-auto text-xs font-mono [&_pre]:m-0 [&_pre.shiki]:!bg-transparent [&_pre]:whitespace-pre-wrap\",\n        pad,\n        bare && className,\n      )}\n      dangerouslySetInnerHTML={{ __html: shikiHtml }}\n    />\n  ) : (\n    <pre\n      className={cn(\n        \"overflow-auto whitespace-pre-wrap break-words text-xs font-mono text-foreground\",\n        pad,\n        bare && className,\n      )}\n    >\n      {source}\n    </pre>\n  );\n\n  if (bare) return body;\n  return (\n    <div\n      className={cn(\"overflow-hidden rounded-md border border-border bg-muted/40\", className)}\n      {...overrideAttrs}\n    >\n      <CodeBlockHeader label={languageProp || \"text\"} actions={headerActions} />\n      {body}\n    </div>\n  );\n}\n\nfunction CodeBlockHeader({ label, actions }: { label: string; actions: ReactNode }) {\n  return (\n    <div className=\"flex items-center justify-between gap-2 border-b border-border px-3 py-1.5\">\n      <span className=\"text-[11px] uppercase tracking-wide text-muted-foreground\">{label}</span>\n      {actions}\n    </div>\n  );\n}\n\nconst JSON_PARSE_FAILED: unique symbol = Symbol(\"json-parse-failed\");\n\nfunction tryParseJson(source: string): unknown | typeof JSON_PARSE_FAILED {\n  const trimmed = source.trim();\n  if (!trimmed) return JSON_PARSE_FAILED;\n  try {\n    return JSON.parse(trimmed);\n  } catch {\n    return JSON_PARSE_FAILED;\n  }\n}\n"],"names":["sanitizeHtml","useMemo","useResolvedTheme","useState","useEffect","highlightCode","jsx","CodeBlockActions","CodeDiff","JsonView","cn","jsxs"],"mappings":"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"}

package/dist/data/CodeBlock.d.ts

@@ -9,6 +9,23 @@ export type CodeBlockProps = {
     className?: string | undefined;
     /** Default expansion depth when rendering JSON as a tree. */
     jsonDefaultOpenDepth?: number | undefined;
+    /** Render only the code — no border, background, or language header. */
+    bare?: boolean | undefined;
+    /** Show a copy-to-clipboard button in the header (ignored when `bare`). */
+    copyable?: boolean | undefined;
+    /** Show a download button in the header (ignored when `bare`). */
+    downloadable?: boolean | undefined;
+    /** Show a per-block light/dark theme toggle in the header (ignored when `bare`). */
+    themeToggle?: boolean | undefined;
+    /** Render a language-aware diff instead of highlighting `source`. */
+    diff?: {
+        original: string;
+        modified: string;
+    } | {
+        unified: string;
+    } | undefined;
+    /** Diff layout when `diff` is set. Defaults to `unified`. */
+    diffView?: "unified" | "split" | undefined;
 };
-export declare function CodeBlock({ language: languageProp, source, highlightedHtml, className, jsonDefaultOpenDepth, }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeBlock({ language: languageProp, source, highlightedHtml, className, jsonDefaultOpenDepth, bare, copyable, downloadable, themeToggle, diff, diffView, }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CodeBlock.d.ts.map

package/dist/data/CodeBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/data/CodeBlock.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,cAAc,GAAG;IAC3B,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,4EAA4E;IAC5E,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,6DAA6D;IAC7D,oBAAoB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3C,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EAAE,YAAY,EACtB,MAAW,EACX,eAAe,EACf,SAAS,EACT,oBAAwB,GACzB,EAAE,cAAc,2CA0EhB"}
+{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/data/CodeBlock.tsx"],"names":[],"mappings":"AASA,MAAM,MAAM,cAAc,GAAG;IAC3B,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,4EAA4E;IAC5E,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,6DAA6D;IAC7D,oBAAoB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,wEAAwE;IACxE,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,kEAAkE;IAClE,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC,oFAAoF;IACpF,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,qEAAqE;IACrE,IAAI,CAAC,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC;IAChF,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;CAC5C,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EAAE,YAAY,EACtB,MAAW,EACX,eAAe,EACf,SAAS,EACT,oBAAwB,EACxB,IAAY,EACZ,QAAgB,EAChB,YAAoB,EACpB,WAAmB,EACnB,IAAI,EACJ,QAAQ,GACT,EAAE,cAAc,2CA8HhB"}

package/dist/data/CodeBlock.js

@@ -1,6 +1,9 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState, useEffect } from "react";
 import { cn } from "../lib/utils.js";
+import { useResolvedTheme } from "../hooks/use-theme.js";
+import { CodeBlockActions } from "./code-block-actions.js";
+import { CodeDiff } from "./CodeDiff.js";
 import { JsonView } from "./JsonView.js";
 import { highlightCode } from "./code-highlight.js";
 import { sanitizeHtml } from "./html-utils.js";
@@ -9,7 +12,13 @@ function CodeBlock({
   source = "",
   highlightedHtml,
   className,
-  jsonDefaultOpenDepth = 2
+  jsonDefaultOpenDepth = 2,
+  bare = false,
+  copyable = false,
+  downloadable = false,
+  themeToggle = false,
+  diff,
+  diffView
 }) {
   const language = (languageProp ?? "").toLowerCase().replace(/^\.+/, "");
   const chromaHtml = highlightedHtml ? sanitizeHtml(highlightedHtml) : "";
@@ -17,6 +26,9 @@ function CodeBlock({
     () => language === "json" ? tryParseJson(source) : JSON_PARSE_FAILED,
     [language, source]
   );
+  const globalTheme = useResolvedTheme();
+  const [themeOverride, setThemeOverride] = useState(null);
+  const effectiveTheme = themeOverride ?? globalTheme;
   const [shikiHtml, setShikiHtml] = useState(null);
   const wantsClientHighlight = !chromaHtml && !!language && !!source;
   useEffect(() => {
@@ -25,35 +37,103 @@ function CodeBlock({
       return;
     }
     let cancelled = false;
-    highlightCode(source, { lang: language }).then((out) => {
+    const theme = effectiveTheme === "dark" ? "github-dark" : "github-light";
+    highlightCode(source, { lang: language, theme }).then((out) => {
       if (!cancelled) setShikiHtml(out);
     });
     return () => {
       cancelled = true;
     };
-  }, [wantsClientHighlight, language, source]);
-  if (parsedJson !== JSON_PARSE_FAILED) {
-    return /* @__PURE__ */ jsxs("div", { className: cn("overflow-hidden rounded-md border border-border bg-muted/40", className), children: [
-      /* @__PURE__ */ jsx("div", { className: "border-b border-border px-3 py-1.5 text-[11px] uppercase tracking-wide text-muted-foreground", children: "json" }),
-      /* @__PURE__ */ jsx("div", { className: "overflow-auto p-3 text-xs", children: /* @__PURE__ */ jsx(JsonView, { data: parsedJson, defaultOpenDepth: jsonDefaultOpenDepth }) })
-    ] });
-  }
-  const xmlClasses = language === "xml" || language === "xslt" || language === "html" ? " [&_.chroma_.nt]:text-pink-700 [&_.chroma_.nt]:dark:text-pink-300 [&_.chroma_.nt]:font-semibold [&_.chroma_.na]:text-amber-700 [&_.chroma_.na]:dark:text-amber-300 [&_.chroma_.s]:text-emerald-700 [&_.chroma_.s]:dark:text-emerald-300 [&_.chroma_.c]:text-slate-500 [&_.chroma_.c]:italic [&_.chroma_.cp]:text-slate-500 [&_.chroma_.cp]:italic [&_pre]:leading-relaxed" : "";
-  return /* @__PURE__ */ jsxs("div", { className: cn("overflow-hidden rounded-md border border-border bg-muted/40", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "border-b border-border px-3 py-1.5 text-[11px] uppercase tracking-wide text-muted-foreground", children: languageProp || "text" }),
-    chromaHtml ? /* @__PURE__ */ jsx(
-      "div",
+  }, [wantsClientHighlight, language, source, effectiveTheme]);
+  const headerActions = /* @__PURE__ */ jsx(
+    CodeBlockActions,
+    {
+      source,
+      language: languageProp,
+      copyable,
+      downloadable,
+      theme: effectiveTheme,
+      ...themeToggle ? { onToggleTheme: () => setThemeOverride(effectiveTheme === "dark" ? "light" : "dark") } : {}
+    }
+  );
+  const overrideAttrs = themeOverride ? { "data-theme": themeOverride } : {};
+  if (diff) {
+    return /* @__PURE__ */ jsx(
+      CodeDiff,
       {
-        className: "overflow-auto p-3 text-xs font-mono [&_.chroma]:bg-transparent [&_pre]:m-0 [&_pre]:whitespace-pre-wrap [&_pre]:bg-transparent" + xmlClasses,
-        dangerouslySetInnerHTML: { __html: chromaHtml }
+        language: languageProp,
+        view: diffView,
+        bare,
+        className,
+        ...diff
       }
-    ) : shikiHtml ? /* @__PURE__ */ jsx(
+    );
+  }
+  if (parsedJson !== JSON_PARSE_FAILED) {
+    const tree = /* @__PURE__ */ jsx(JsonView, { data: parsedJson, defaultOpenDepth: jsonDefaultOpenDepth });
+    if (bare) return /* @__PURE__ */ jsx("div", { className: cn("overflow-auto text-xs", className), children: tree });
+    return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "overflow-auto p-3 text-xs font-mono [&_pre]:m-0 [&_pre.shiki]:!bg-transparent [&_pre]:whitespace-pre-wrap",
-        dangerouslySetInnerHTML: { __html: shikiHtml }
+        className: cn("overflow-hidden rounded-md border border-border bg-muted/40", className),
+        ...overrideAttrs,
+        children: [
+          /* @__PURE__ */ jsx(CodeBlockHeader, { label: "json", actions: headerActions }),
+          /* @__PURE__ */ jsx("div", { className: "overflow-auto p-3 text-xs", children: tree })
+        ]
       }
-    ) : /* @__PURE__ */ jsx("pre", { className: "overflow-auto whitespace-pre-wrap break-words p-3 text-xs font-mono text-foreground", children: source })
+    );
+  }
+  const xmlClasses = language === "xml" || language === "xslt" || language === "html" ? " [&_.chroma_.nt]:text-pink-700 [&_.chroma_.nt]:dark:text-pink-300 [&_.chroma_.nt]:font-semibold [&_.chroma_.na]:text-amber-700 [&_.chroma_.na]:dark:text-amber-300 [&_.chroma_.s]:text-emerald-700 [&_.chroma_.s]:dark:text-emerald-300 [&_.chroma_.c]:text-slate-500 [&_.chroma_.c]:italic [&_.chroma_.cp]:text-slate-500 [&_.chroma_.cp]:italic [&_pre]:leading-relaxed" : "";
+  const pad = bare ? void 0 : "p-3";
+  const body = chromaHtml ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "overflow-auto text-xs font-mono [&_.chroma]:bg-transparent [&_pre]:m-0 [&_pre]:whitespace-pre-wrap [&_pre]:bg-transparent" + xmlClasses,
+        pad,
+        bare && className
+      ),
+      dangerouslySetInnerHTML: { __html: chromaHtml }
+    }
+  ) : shikiHtml ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "overflow-auto text-xs font-mono [&_pre]:m-0 [&_pre.shiki]:!bg-transparent [&_pre]:whitespace-pre-wrap",
+        pad,
+        bare && className
+      ),
+      dangerouslySetInnerHTML: { __html: shikiHtml }
+    }
+  ) : /* @__PURE__ */ jsx(
+    "pre",
+    {
+      className: cn(
+        "overflow-auto whitespace-pre-wrap break-words text-xs font-mono text-foreground",
+        pad,
+        bare && className
+      ),
+      children: source
+    }
+  );
+  if (bare) return body;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("overflow-hidden rounded-md border border-border bg-muted/40", className),
+      ...overrideAttrs,
+      children: [
+        /* @__PURE__ */ jsx(CodeBlockHeader, { label: languageProp || "text", actions: headerActions }),
+        body
+      ]
+    }
+  );
+}
+function CodeBlockHeader({ label, actions }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border px-3 py-1.5", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-[11px] uppercase tracking-wide text-muted-foreground", children: label }),
+    actions
   ] });
 }
 const JSON_PARSE_FAILED = Symbol("json-parse-failed");

package/dist/data/CodeBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.js","sources":["../../src/data/CodeBlock.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { JsonView } from \"./JsonView\";\nimport { highlightCode } from \"./code-highlight\";\nimport { sanitizeHtml } from \"./html-utils\";\n\nexport type CodeBlockProps = {\n  /** Language label and highlighter hint, e.g. `json`, `tsx`, or `bash`. */\n  language?: string | undefined;\n  /** Raw source code to render or highlight. */\n  source?: string | undefined;\n  /** Trusted server-rendered highlighted HTML, sanitized before rendering. */\n  highlightedHtml?: string | undefined;\n  /** Classes applied to the code block shell. */\n  className?: string | undefined;\n  /** Default expansion depth when rendering JSON as a tree. */\n  jsonDefaultOpenDepth?: number | undefined;\n};\n\nexport function CodeBlock({\n  language: languageProp,\n  source = \"\",\n  highlightedHtml,\n  className,\n  jsonDefaultOpenDepth = 2,\n}: CodeBlockProps) {\n  const language = (languageProp ?? \"\").toLowerCase().replace(/^\\.+/, \"\");\n  const chromaHtml = highlightedHtml ? sanitizeHtml(highlightedHtml) : \"\";\n  const parsedJson = useMemo(\n    () => (language === \"json\" ? tryParseJson(source) : JSON_PARSE_FAILED),\n    [language, source],\n  );\n  const [shikiHtml, setShikiHtml] = useState<string | null>(null);\n  const wantsClientHighlight = !chromaHtml && !!language && !!source;\n\n  useEffect(() => {\n    if (!wantsClientHighlight) {\n      setShikiHtml(null);\n      return;\n    }\n\n    let cancelled = false;\n    highlightCode(source, { lang: language }).then((out) => {\n      if (!cancelled) setShikiHtml(out);\n    });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [wantsClientHighlight, language, source]);\n\n  if (parsedJson !== JSON_PARSE_FAILED) {\n    return (\n      <div className={cn(\"overflow-hidden rounded-md border border-border bg-muted/40\", className)}>\n        <div className=\"border-b border-border px-3 py-1.5 text-[11px] uppercase tracking-wide text-muted-foreground\">\n          json\n        </div>\n        <div className=\"overflow-auto p-3 text-xs\">\n          <JsonView data={parsedJson} defaultOpenDepth={jsonDefaultOpenDepth} />\n        </div>\n      </div>\n    );\n  }\n\n  const xmlClasses =\n    language === \"xml\" || language === \"xslt\" || language === \"html\"\n      ? \" [&_.chroma_.nt]:text-pink-700 [&_.chroma_.nt]:dark:text-pink-300 [&_.chroma_.nt]:font-semibold\" +\n        \" [&_.chroma_.na]:text-amber-700 [&_.chroma_.na]:dark:text-amber-300\" +\n        \" [&_.chroma_.s]:text-emerald-700 [&_.chroma_.s]:dark:text-emerald-300\" +\n        \" [&_.chroma_.c]:text-slate-500 [&_.chroma_.c]:italic\" +\n        \" [&_.chroma_.cp]:text-slate-500 [&_.chroma_.cp]:italic\" +\n        \" [&_pre]:leading-relaxed\"\n      : \"\";\n\n  return (\n    <div className={cn(\"overflow-hidden rounded-md border border-border bg-muted/40\", className)}>\n      <div className=\"border-b border-border px-3 py-1.5 text-[11px] uppercase tracking-wide text-muted-foreground\">\n        {languageProp || \"text\"}\n      </div>\n      {chromaHtml ? (\n        <div\n          className={\n            \"overflow-auto p-3 text-xs font-mono [&_.chroma]:bg-transparent [&_pre]:m-0 [&_pre]:whitespace-pre-wrap [&_pre]:bg-transparent\" +\n            xmlClasses\n          }\n          dangerouslySetInnerHTML={{ __html: chromaHtml }}\n        />\n      ) : shikiHtml ? (\n        <div\n          className=\"overflow-auto p-3 text-xs font-mono [&_pre]:m-0 [&_pre.shiki]:!bg-transparent [&_pre]:whitespace-pre-wrap\"\n          dangerouslySetInnerHTML={{ __html: shikiHtml }}\n        />\n      ) : (\n        <pre className=\"overflow-auto whitespace-pre-wrap break-words p-3 text-xs font-mono text-foreground\">\n          {source}\n        </pre>\n      )}\n    </div>\n  );\n}\n\nconst JSON_PARSE_FAILED: unique symbol = Symbol(\"json-parse-failed\");\n\nfunction tryParseJson(source: string): unknown | typeof JSON_PARSE_FAILED {\n  const trimmed = source.trim();\n  if (!trimmed) return JSON_PARSE_FAILED;\n  try {\n    return JSON.parse(trimmed);\n  } catch {\n    return JSON_PARSE_FAILED;\n  }\n}\n"],"names":[],"mappings":";;;;;;AAmBO,SAAS,UAAU;AAAA,EACxB,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,uBAAuB;AACzB,GAAmB;AACjB,QAAM,YAAY,gBAAgB,IAAI,cAAc,QAAQ,QAAQ,EAAE;AACtE,QAAM,aAAa,kBAAkB,aAAa,eAAe,IAAI;AACrE,QAAM,aAAa;AAAA,IACjB,MAAO,aAAa,SAAS,aAAa,MAAM,IAAI;AAAA,IACpD,CAAC,UAAU,MAAM;AAAA,EAAA;AAEnB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAwB,IAAI;AAC9D,QAAM,uBAAuB,CAAC,cAAc,CAAC,CAAC,YAAY,CAAC,CAAC;AAE5D,YAAU,MAAM;AACd,QAAI,CAAC,sBAAsB;AACzB,mBAAa,IAAI;AACjB;AAAA,IACF;AAEA,QAAI,YAAY;AAChB,kBAAc,QAAQ,EAAE,MAAM,SAAA,CAAU,EAAE,KAAK,CAAC,QAAQ;AACtD,UAAI,CAAC,UAAW,cAAa,GAAG;AAAA,IAClC,CAAC;AAED,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,sBAAsB,UAAU,MAAM,CAAC;AAE3C,MAAI,eAAe,mBAAmB;AACpC,gCACG,OAAA,EAAI,WAAW,GAAG,+DAA+D,SAAS,GACzF,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,gGAA+F,UAAA,QAE9G;AAAA,MACA,oBAAC,OAAA,EAAI,WAAU,6BACb,UAAA,oBAAC,YAAS,MAAM,YAAY,kBAAkB,qBAAA,CAAsB,EAAA,CACtE;AAAA,IAAA,GACF;AAAA,EAEJ;AAEA,QAAM,aACJ,aAAa,SAAS,aAAa,UAAU,aAAa,SACtD,8WAMA;AAEN,8BACG,OAAA,EAAI,WAAW,GAAG,+DAA+D,SAAS,GACzF,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAU,gGACZ,UAAA,gBAAgB,QACnB;AAAA,IACC,aACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WACE,kIACA;AAAA,QAEF,yBAAyB,EAAE,QAAQ,WAAA;AAAA,MAAW;AAAA,IAAA,IAE9C,YACF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,yBAAyB,EAAE,QAAQ,UAAA;AAAA,MAAU;AAAA,IAAA,IAG/C,oBAAC,OAAA,EAAI,WAAU,uFACZ,UAAA,OAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AAEA,MAAM,oBAAmC,OAAO,mBAAmB;AAEnE,SAAS,aAAa,QAAoD;AACxE,QAAM,UAAU,OAAO,KAAA;AACvB,MAAI,CAAC,QAAS,QAAO;AACrB,MAAI;AACF,WAAO,KAAK,MAAM,OAAO;AAAA,EAC3B,QAAQ;AACN,WAAO;AAAA,EACT;AACF;"}
+{"version":3,"file":"CodeBlock.js","sources":["../../src/data/CodeBlock.tsx"],"sourcesContent":["import { useEffect, useMemo, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { useResolvedTheme, type ResolvedTheme } from \"../hooks/use-theme\";\nimport { CodeBlockActions } from \"./code-block-actions\";\nimport { CodeDiff } from \"./CodeDiff\";\nimport { JsonView } from \"./JsonView\";\nimport { highlightCode } from \"./code-highlight\";\nimport { sanitizeHtml } from \"./html-utils\";\n\nexport type CodeBlockProps = {\n  /** Language label and highlighter hint, e.g. `json`, `tsx`, or `bash`. */\n  language?: string | undefined;\n  /** Raw source code to render or highlight. */\n  source?: string | undefined;\n  /** Trusted server-rendered highlighted HTML, sanitized before rendering. */\n  highlightedHtml?: string | undefined;\n  /** Classes applied to the code block shell. */\n  className?: string | undefined;\n  /** Default expansion depth when rendering JSON as a tree. */\n  jsonDefaultOpenDepth?: number | undefined;\n  /** Render only the code — no border, background, or language header. */\n  bare?: boolean | undefined;\n  /** Show a copy-to-clipboard button in the header (ignored when `bare`). */\n  copyable?: boolean | undefined;\n  /** Show a download button in the header (ignored when `bare`). */\n  downloadable?: boolean | undefined;\n  /** Show a per-block light/dark theme toggle in the header (ignored when `bare`). */\n  themeToggle?: boolean | undefined;\n  /** Render a language-aware diff instead of highlighting `source`. */\n  diff?: { original: string; modified: string } | { unified: string } | undefined;\n  /** Diff layout when `diff` is set. Defaults to `unified`. */\n  diffView?: \"unified\" | \"split\" | undefined;\n};\n\nexport function CodeBlock({\n  language: languageProp,\n  source = \"\",\n  highlightedHtml,\n  className,\n  jsonDefaultOpenDepth = 2,\n  bare = false,\n  copyable = false,\n  downloadable = false,\n  themeToggle = false,\n  diff,\n  diffView,\n}: CodeBlockProps) {\n  const language = (languageProp ?? \"\").toLowerCase().replace(/^\\.+/, \"\");\n  const chromaHtml = highlightedHtml ? sanitizeHtml(highlightedHtml) : \"\";\n  const parsedJson = useMemo(\n    () => (language === \"json\" ? tryParseJson(source) : JSON_PARSE_FAILED),\n    [language, source],\n  );\n  // The block follows the global app theme by default; a per-block override\n  // (set by the header toggle) wins over it and re-highlights just this block.\n  const globalTheme = useResolvedTheme();\n  const [themeOverride, setThemeOverride] = useState<ResolvedTheme | null>(null);\n  const effectiveTheme = themeOverride ?? globalTheme;\n  const [shikiHtml, setShikiHtml] = useState<string | null>(null);\n  const wantsClientHighlight = !chromaHtml && !!language && !!source;\n\n  useEffect(() => {\n    if (!wantsClientHighlight) {\n      setShikiHtml(null);\n      return;\n    }\n\n    let cancelled = false;\n    const theme = effectiveTheme === \"dark\" ? \"github-dark\" : \"github-light\";\n    highlightCode(source, { lang: language, theme }).then((out) => {\n      if (!cancelled) setShikiHtml(out);\n    });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [wantsClientHighlight, language, source, effectiveTheme]);\n\n  const headerActions = (\n    <CodeBlockActions\n      source={source}\n      language={languageProp}\n      copyable={copyable}\n      downloadable={downloadable}\n      theme={effectiveTheme}\n      {...(themeToggle\n        ? { onToggleTheme: () => setThemeOverride(effectiveTheme === \"dark\" ? \"light\" : \"dark\") }\n        : {})}\n    />\n  );\n  // Re-scope theme tokens (shell background/border/label) to the override so an\n  // overridden block stays visually coherent with its re-highlighted code.\n  const overrideAttrs = themeOverride ? { \"data-theme\": themeOverride } : {};\n\n  if (diff) {\n    return (\n      <CodeDiff\n        language={languageProp}\n        view={diffView}\n        bare={bare}\n        className={className}\n        {...diff}\n      />\n    );\n  }\n\n  if (parsedJson !== JSON_PARSE_FAILED) {\n    const tree = <JsonView data={parsedJson} defaultOpenDepth={jsonDefaultOpenDepth} />;\n    if (bare) return <div className={cn(\"overflow-auto text-xs\", className)}>{tree}</div>;\n    return (\n      <div\n        className={cn(\"overflow-hidden rounded-md border border-border bg-muted/40\", className)}\n        {...overrideAttrs}\n      >\n        <CodeBlockHeader label=\"json\" actions={headerActions} />\n        <div className=\"overflow-auto p-3 text-xs\">{tree}</div>\n      </div>\n    );\n  }\n\n  const xmlClasses =\n    language === \"xml\" || language === \"xslt\" || language === \"html\"\n      ? \" [&_.chroma_.nt]:text-pink-700 [&_.chroma_.nt]:dark:text-pink-300 [&_.chroma_.nt]:font-semibold\" +\n        \" [&_.chroma_.na]:text-amber-700 [&_.chroma_.na]:dark:text-amber-300\" +\n        \" [&_.chroma_.s]:text-emerald-700 [&_.chroma_.s]:dark:text-emerald-300\" +\n        \" [&_.chroma_.c]:text-slate-500 [&_.chroma_.c]:italic\" +\n        \" [&_.chroma_.cp]:text-slate-500 [&_.chroma_.cp]:italic\" +\n        \" [&_pre]:leading-relaxed\"\n      : \"\";\n\n  const pad = bare ? undefined : \"p-3\";\n  const body = chromaHtml ? (\n    <div\n      className={cn(\n        \"overflow-auto text-xs font-mono [&_.chroma]:bg-transparent [&_pre]:m-0 [&_pre]:whitespace-pre-wrap [&_pre]:bg-transparent\" +\n          xmlClasses,\n        pad,\n        bare && className,\n      )}\n      dangerouslySetInnerHTML={{ __html: chromaHtml }}\n    />\n  ) : shikiHtml ? (\n    <div\n      className={cn(\n        \"overflow-auto text-xs font-mono [&_pre]:m-0 [&_pre.shiki]:!bg-transparent [&_pre]:whitespace-pre-wrap\",\n        pad,\n        bare && className,\n      )}\n      dangerouslySetInnerHTML={{ __html: shikiHtml }}\n    />\n  ) : (\n    <pre\n      className={cn(\n        \"overflow-auto whitespace-pre-wrap break-words text-xs font-mono text-foreground\",\n        pad,\n        bare && className,\n      )}\n    >\n      {source}\n    </pre>\n  );\n\n  if (bare) return body;\n  return (\n    <div\n      className={cn(\"overflow-hidden rounded-md border border-border bg-muted/40\", className)}\n      {...overrideAttrs}\n    >\n      <CodeBlockHeader label={languageProp || \"text\"} actions={headerActions} />\n      {body}\n    </div>\n  );\n}\n\nfunction CodeBlockHeader({ label, actions }: { label: string; actions: ReactNode }) {\n  return (\n    <div className=\"flex items-center justify-between gap-2 border-b border-border px-3 py-1.5\">\n      <span className=\"text-[11px] uppercase tracking-wide text-muted-foreground\">{label}</span>\n      {actions}\n    </div>\n  );\n}\n\nconst JSON_PARSE_FAILED: unique symbol = Symbol(\"json-parse-failed\");\n\nfunction tryParseJson(source: string): unknown | typeof JSON_PARSE_FAILED {\n  const trimmed = source.trim();\n  if (!trimmed) return JSON_PARSE_FAILED;\n  try {\n    return JSON.parse(trimmed);\n  } catch {\n    return JSON_PARSE_FAILED;\n  }\n}\n"],"names":[],"mappings":"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"}