@flanksource/clicky-ui 0.3.36 → 0.3.37

package/dist/data/CodeBlock.cjs

@@ -9,6 +9,8 @@ const CodeDiff = require("./CodeDiff.cjs");
 const JsonView = require("./JsonView.cjs");
 const codeHighlight = require("./code-highlight.cjs");
 const htmlUtils = require("./html-utils.cjs");
+const INLINE_RENDER_CHARS = 500;
+const INLINE_TITLE_CHARS = 2e3;
 function CodeBlock({
   language: languageProp,
   source = "",
@@ -18,9 +20,11 @@ function CodeBlock({
   bare = false,
   copyable = false,
   downloadable = false,
+  downloadFilename,
   themeToggle = false,
   diff,
-  diffView
+  diffView,
+  inline = false
 }) {
   const language = (languageProp ?? "").toLowerCase().replace(/^\.+/, "");
   const chromaHtml = highlightedHtml ? htmlUtils.sanitizeHtml(highlightedHtml) : "";
@@ -33,6 +37,11 @@ function CodeBlock({
   const effectiveTheme = themeOverride ?? globalTheme;
   const [shikiHtml, setShikiHtml] = react.useState(null);
   const wantsClientHighlight = parsedJson === JSON_PARSE_FAILED && !chromaHtml && !!language && !!source;
+  const singleLine = react.useMemo(
+    () => inline ? source.replace(/\s+/g, " ").trim() : "",
+    [inline, source]
+  );
+  const highlightSource = inline ? singleLine.slice(0, INLINE_RENDER_CHARS) : source;
   react.useEffect(() => {
     if (!wantsClientHighlight) {
       setShikiHtml(null);
@@ -40,13 +49,13 @@ function CodeBlock({
     }
     let cancelled = false;
     const theme = effectiveTheme === "dark" ? "github-dark" : "github-light";
-    codeHighlight.highlightCode(source, { lang: language, theme }).then((out) => {
+    codeHighlight.highlightCode(highlightSource, { lang: language, theme }).then((out) => {
       if (!cancelled) setShikiHtml(out);
     });
     return () => {
       cancelled = true;
     };
-  }, [wantsClientHighlight, language, source, effectiveTheme]);
+  }, [wantsClientHighlight, language, highlightSource, effectiveTheme]);
   const headerActions = /* @__PURE__ */ jsxRuntime.jsx(
     codeBlockActions.CodeBlockActions,
     {
@@ -54,11 +63,28 @@ function CodeBlock({
       language: languageProp,
       copyable,
       downloadable,
+      downloadFilename,
       theme: effectiveTheme,
       ...themeToggle ? { onToggleTheme: () => setThemeOverride(effectiveTheme === "dark" ? "light" : "dark") } : {}
     }
   );
   const overrideAttrs = themeOverride ? { "data-theme": themeOverride } : {};
+  if (inline) {
+    const html = chromaHtml || shikiHtml;
+    const title = singleLine.length > INLINE_TITLE_CHARS ? `${singleLine.slice(0, INLINE_TITLE_CHARS)}…` : singleLine;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "code",
+      {
+        className: utils.cn(
+          "block max-w-full truncate font-mono text-xs text-foreground",
+          className,
+          html && "[&_pre]:inline [&_pre]:whitespace-pre [&_.chroma]:bg-transparent"
+        ),
+        title,
+        children: html ? /* @__PURE__ */ jsxRuntime.jsx("span", { dangerouslySetInnerHTML: { __html: html } }) : highlightSource
+      }
+    );
+  }
   if (diff) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       CodeDiff.CodeDiff,

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 =\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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"}
+{"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  /** Name of the downloaded file. Defaults to `snippet.<extension of language>`. */\n  downloadFilename?: string | 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   * Render as a single truncated line for a table cell: no border, header, or\n   * wrap, whitespace collapsed to one line, syntax-colored when highlighting\n   * is available, with the collapsed source (up to 2,000 chars) in a title\n   * tooltip. Only the leading 500 chars are rendered and highlighted — the\n   * cell clips long before that. The full block is what a row-detail dialog\n   * should show instead.\n   */\n  inline?: boolean | undefined;\n};\n\n// A captured SQL statement can run to tens of thousands of characters on one\n// line; highlighting all of it for a one-line cell cost ~220 ms a statement.\nconst INLINE_RENDER_CHARS = 500;\nconst INLINE_TITLE_CHARS = 2000;\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  downloadFilename,\n  themeToggle = false,\n  diff,\n  diffView,\n  inline = false,\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  const singleLine = useMemo(\n    () => (inline ? source.replace(/\\s+/g, \" \").trim() : \"\"),\n    [inline, source],\n  );\n  const highlightSource = inline ? singleLine.slice(0, INLINE_RENDER_CHARS) : 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(highlightSource, { lang: language, theme }).then((out) => {\n      if (!cancelled) setShikiHtml(out);\n    });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [wantsClientHighlight, language, highlightSource, effectiveTheme]);\n\n  const headerActions = (\n    <CodeBlockActions\n      source={source}\n      language={languageProp}\n      copyable={copyable}\n      downloadable={downloadable}\n      downloadFilename={downloadFilename}\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 (inline) {\n    const html = chromaHtml || shikiHtml;\n    const title =\n      singleLine.length > INLINE_TITLE_CHARS\n        ? `${singleLine.slice(0, INLINE_TITLE_CHARS)}…`\n        : singleLine;\n    return (\n      <code\n        className={cn(\n          \"block max-w-full truncate font-mono text-xs text-foreground\",\n          className,\n          html && \"[&_pre]:inline [&_pre]:whitespace-pre [&_.chroma]:bg-transparent\",\n        )}\n        title={title}\n      >\n        {html ? <span dangerouslySetInnerHTML={{ __html: html }} /> : highlightSource}\n      </code>\n    );\n  }\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","cn","CodeDiff","JsonView","jsxs"],"mappings":"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"}

package/dist/data/CodeBlock.d.ts

@@ -15,6 +15,8 @@ export type CodeBlockProps = {
     copyable?: boolean | undefined;
     /** Show a download button in the header (ignored when `bare`). */
     downloadable?: boolean | undefined;
+    /** Name of the downloaded file. Defaults to `snippet.<extension of language>`. */
+    downloadFilename?: string | 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`. */
@@ -26,6 +28,15 @@ export type CodeBlockProps = {
     } | undefined;
     /** Diff layout when `diff` is set. Defaults to `unified`. */
     diffView?: "unified" | "split" | undefined;
+    /**
+     * Render as a single truncated line for a table cell: no border, header, or
+     * wrap, whitespace collapsed to one line, syntax-colored when highlighting
+     * is available, with the collapsed source (up to 2,000 chars) in a title
+     * tooltip. Only the leading 500 chars are rendered and highlighted — the
+     * cell clips long before that. The full block is what a row-detail dialog
+     * should show instead.
+     */
+    inline?: boolean | undefined;
 };
-export declare function CodeBlock({ language: languageProp, source, highlightedHtml, className, jsonDefaultOpenDepth, bare, copyable, downloadable, themeToggle, diff, diffView, }: CodeBlockProps): import("react").JSX.Element;
+export declare function CodeBlock({ language: languageProp, source, highlightedHtml, className, jsonDefaultOpenDepth, bare, copyable, downloadable, downloadFilename, themeToggle, diff, diffView, inline, }: 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,+BA+HhB"}
+{"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,kFAAkF;IAClF,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,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;IAC3C;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC9B,CAAC;AAOF,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EAAE,YAAY,EACtB,MAAW,EACX,eAAe,EACf,SAAS,EACT,oBAAwB,EACxB,IAAY,EACZ,QAAgB,EAChB,YAAoB,EACpB,gBAAgB,EAChB,WAAmB,EACnB,IAAI,EACJ,QAAQ,EACR,MAAc,GACf,EAAE,cAAc,+BAyJhB"}

package/dist/data/CodeBlock.js

@@ -7,6 +7,8 @@ import { CodeDiff } from "./CodeDiff.js";
 import { JsonView } from "./JsonView.js";
 import { highlightCode } from "./code-highlight.js";
 import { sanitizeHtml } from "./html-utils.js";
+const INLINE_RENDER_CHARS = 500;
+const INLINE_TITLE_CHARS = 2e3;
 function CodeBlock({
   language: languageProp,
   source = "",
@@ -16,9 +18,11 @@ function CodeBlock({
   bare = false,
   copyable = false,
   downloadable = false,
+  downloadFilename,
   themeToggle = false,
   diff,
-  diffView
+  diffView,
+  inline = false
 }) {
   const language = (languageProp ?? "").toLowerCase().replace(/^\.+/, "");
   const chromaHtml = highlightedHtml ? sanitizeHtml(highlightedHtml) : "";
@@ -31,6 +35,11 @@ function CodeBlock({
   const effectiveTheme = themeOverride ?? globalTheme;
   const [shikiHtml, setShikiHtml] = useState(null);
   const wantsClientHighlight = parsedJson === JSON_PARSE_FAILED && !chromaHtml && !!language && !!source;
+  const singleLine = useMemo(
+    () => inline ? source.replace(/\s+/g, " ").trim() : "",
+    [inline, source]
+  );
+  const highlightSource = inline ? singleLine.slice(0, INLINE_RENDER_CHARS) : source;
   useEffect(() => {
     if (!wantsClientHighlight) {
       setShikiHtml(null);
@@ -38,13 +47,13 @@ function CodeBlock({
     }
     let cancelled = false;
     const theme = effectiveTheme === "dark" ? "github-dark" : "github-light";
-    highlightCode(source, { lang: language, theme }).then((out) => {
+    highlightCode(highlightSource, { lang: language, theme }).then((out) => {
       if (!cancelled) setShikiHtml(out);
     });
     return () => {
       cancelled = true;
     };
-  }, [wantsClientHighlight, language, source, effectiveTheme]);
+  }, [wantsClientHighlight, language, highlightSource, effectiveTheme]);
   const headerActions = /* @__PURE__ */ jsx(
     CodeBlockActions,
     {
@@ -52,11 +61,28 @@ function CodeBlock({
       language: languageProp,
       copyable,
       downloadable,
+      downloadFilename,
       theme: effectiveTheme,
       ...themeToggle ? { onToggleTheme: () => setThemeOverride(effectiveTheme === "dark" ? "light" : "dark") } : {}
     }
   );
   const overrideAttrs = themeOverride ? { "data-theme": themeOverride } : {};
+  if (inline) {
+    const html = chromaHtml || shikiHtml;
+    const title = singleLine.length > INLINE_TITLE_CHARS ? `${singleLine.slice(0, INLINE_TITLE_CHARS)}…` : singleLine;
+    return /* @__PURE__ */ jsx(
+      "code",
+      {
+        className: cn(
+          "block max-w-full truncate font-mono text-xs text-foreground",
+          className,
+          html && "[&_pre]:inline [&_pre]:whitespace-pre [&_.chroma]:bg-transparent"
+        ),
+        title,
+        children: html ? /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: html } }) : highlightSource
+      }
+    );
+  }
   if (diff) {
     return /* @__PURE__ */ jsx(
       CodeDiff,

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 =\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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"}
+{"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  /** Name of the downloaded file. Defaults to `snippet.<extension of language>`. */\n  downloadFilename?: string | 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   * Render as a single truncated line for a table cell: no border, header, or\n   * wrap, whitespace collapsed to one line, syntax-colored when highlighting\n   * is available, with the collapsed source (up to 2,000 chars) in a title\n   * tooltip. Only the leading 500 chars are rendered and highlighted — the\n   * cell clips long before that. The full block is what a row-detail dialog\n   * should show instead.\n   */\n  inline?: boolean | undefined;\n};\n\n// A captured SQL statement can run to tens of thousands of characters on one\n// line; highlighting all of it for a one-line cell cost ~220 ms a statement.\nconst INLINE_RENDER_CHARS = 500;\nconst INLINE_TITLE_CHARS = 2000;\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  downloadFilename,\n  themeToggle = false,\n  diff,\n  diffView,\n  inline = false,\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  const singleLine = useMemo(\n    () => (inline ? source.replace(/\\s+/g, \" \").trim() : \"\"),\n    [inline, source],\n  );\n  const highlightSource = inline ? singleLine.slice(0, INLINE_RENDER_CHARS) : 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(highlightSource, { lang: language, theme }).then((out) => {\n      if (!cancelled) setShikiHtml(out);\n    });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [wantsClientHighlight, language, highlightSource, effectiveTheme]);\n\n  const headerActions = (\n    <CodeBlockActions\n      source={source}\n      language={languageProp}\n      copyable={copyable}\n      downloadable={downloadable}\n      downloadFilename={downloadFilename}\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 (inline) {\n    const html = chromaHtml || shikiHtml;\n    const title =\n      singleLine.length > INLINE_TITLE_CHARS\n        ? `${singleLine.slice(0, INLINE_TITLE_CHARS)}…`\n        : singleLine;\n    return (\n      <code\n        className={cn(\n          \"block max-w-full truncate font-mono text-xs text-foreground\",\n          className,\n          html && \"[&_pre]:inline [&_pre]:whitespace-pre [&_.chroma]:bg-transparent\",\n        )}\n        title={title}\n      >\n        {html ? <span dangerouslySetInnerHTML={{ __html: html }} /> : highlightSource}\n      </code>\n    );\n  }\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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"}