@flanksource/clicky-ui 0.3.27 → 0.3.29

package/dist/data/CodeBlock.cjs

@@ -32,7 +32,7 @@ function CodeBlock({
   const [themeOverride, setThemeOverride] = react.useState(null);
   const effectiveTheme = themeOverride ?? globalTheme;
   const [shikiHtml, setShikiHtml] = react.useState(null);
-  const wantsClientHighlight = !chromaHtml && !!language && !!source;
+  const wantsClientHighlight = parsedJson === JSON_PARSE_FAILED && !chromaHtml && !!language && !!source;
   react.useEffect(() => {
     if (!wantsClientHighlight) {
       setShikiHtml(null);

package/dist/data/CodeBlock.cjs.map

@@ -1 +1 @@
-{"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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"}
+{"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 =\n    parsedJson === JSON_PARSE_FAILED && !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

@@ -27,5 +27,5 @@ export type CodeBlockProps = {
     /** Diff layout when `diff` is set. Defaults to `unified`. */
     diffView?: "unified" | "split" | undefined;
 };
-export declare function CodeBlock({ language: languageProp, source, highlightedHtml, className, jsonDefaultOpenDepth, bare, copyable, downloadable, themeToggle, diff, diffView, }: 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.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":"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"}
+{"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,+BA+HhB"}

package/dist/data/CodeBlock.js

@@ -30,7 +30,7 @@ function CodeBlock({
   const [themeOverride, setThemeOverride] = useState(null);
   const effectiveTheme = themeOverride ?? globalTheme;
   const [shikiHtml, setShikiHtml] = useState(null);
-  const wantsClientHighlight = !chromaHtml && !!language && !!source;
+  const wantsClientHighlight = parsedJson === JSON_PARSE_FAILED && !chromaHtml && !!language && !!source;
   useEffect(() => {
     if (!wantsClientHighlight) {
       setShikiHtml(null);

package/dist/data/CodeBlock.js.map

@@ -1 +1 @@
-{"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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"}
+{"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 =\n    parsedJson === JSON_PARSE_FAILED && !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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"}

package/dist/data/CodeDiff.d.ts

@@ -19,6 +19,6 @@ export type CodeDiffProps = CodeDiffInput & {
     bare?: boolean | undefined;
     className?: string | undefined;
 };
-export declare function CodeDiff(props: CodeDiffProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeDiff(props: CodeDiffProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=CodeDiff.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CodeDiff.d.ts","sourceRoot":"","sources":["../../src/data/CodeDiff.tsx"],"names":[],"mappings":"AAcA,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,CAAC;AAW/C,KAAK,aAAa,GACd;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,GACvD;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG,aAAa,GAAG;IAC1C,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,8EAA8E;IAC9E,IAAI,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAChC,4DAA4D;IAC5D,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,wEAAwE;IACxE,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,CAAC;AA0BF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA6F5C"}
+{"version":3,"file":"CodeDiff.d.ts","sourceRoot":"","sources":["../../src/data/CodeDiff.tsx"],"names":[],"mappings":"AAcA,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,CAAC;AAW/C,KAAK,aAAa,GACd;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,GACvD;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG,aAAa,GAAG;IAC1C,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,8EAA8E;IAC9E,IAAI,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAChC,4DAA4D;IAC5D,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,wEAAwE;IACxE,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,CAAC;AA0BF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,+BA6F5C"}