@flanksource/clicky-ui 0.3.44 → 0.3.45

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  /** 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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"}
+{"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  /** Display format for parsed JSON values. */\n  jsonFormat?: \"json\" | \"yaml\" | 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  jsonFormat = \"json\",\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} format={jsonFormat} 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={jsonFormat} 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

@@ -9,6 +9,8 @@ export type CodeBlockProps = {
     className?: string | undefined;
     /** Default expansion depth when rendering JSON as a tree. */
     jsonDefaultOpenDepth?: number | undefined;
+    /** Display format for parsed JSON values. */
+    jsonFormat?: "json" | "yaml" | 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`). */
@@ -38,5 +40,5 @@ export type CodeBlockProps = {
      */
     inline?: boolean | undefined;
 };
-export declare function CodeBlock({ language: languageProp, source, highlightedHtml, className, jsonDefaultOpenDepth, bare, copyable, downloadable, downloadFilename, themeToggle, diff, diffView, inline, }: CodeBlockProps): import("react").JSX.Element;
+export declare function CodeBlock({ language: languageProp, source, highlightedHtml, className, jsonDefaultOpenDepth, jsonFormat, 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,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"}
+{"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,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACzC,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,UAAmB,EACnB,IAAY,EACZ,QAAgB,EAChB,YAAoB,EACpB,gBAAgB,EAChB,WAAmB,EACnB,IAAI,EACJ,QAAQ,EACR,MAAc,GACf,EAAE,cAAc,+BAyJhB"}

package/dist/data/CodeBlock.js

@@ -15,6 +15,7 @@ function CodeBlock({
   highlightedHtml,
   className,
   jsonDefaultOpenDepth = 2,
+  jsonFormat = "json",
   bare = false,
   copyable = false,
   downloadable = false,
@@ -96,7 +97,7 @@ function CodeBlock({
     );
   }
   if (parsedJson !== JSON_PARSE_FAILED) {
-    const tree = /* @__PURE__ */ jsx(JsonView, { data: parsedJson, defaultOpenDepth: jsonDefaultOpenDepth });
+    const tree = /* @__PURE__ */ jsx(JsonView, { data: parsedJson, format: jsonFormat, defaultOpenDepth: jsonDefaultOpenDepth });
     if (bare) return /* @__PURE__ */ jsx("div", { className: cn("overflow-auto text-xs", className), children: tree });
     return /* @__PURE__ */ jsxs(
       "div",
@@ -104,7 +105,7 @@ function CodeBlock({
         className: cn("overflow-hidden rounded-md border border-border bg-muted/40", className),
         ...overrideAttrs,
         children: [
-          /* @__PURE__ */ jsx(CodeBlockHeader, { label: "json", actions: headerActions }),
+          /* @__PURE__ */ jsx(CodeBlockHeader, { label: jsonFormat, actions: headerActions }),
           /* @__PURE__ */ jsx("div", { className: "overflow-auto p-3 text-xs", children: tree })
         ]
       }

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  /** 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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"}
+{"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  /** Display format for parsed JSON values. */\n  jsonFormat?: \"json\" | \"yaml\" | 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  jsonFormat = \"json\",\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} format={jsonFormat} 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={jsonFormat} 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":";;;;;;;;;AAiDA,MAAM,sBAAsB;AAC5B,MAAM,qBAAqB;AAEpB,SAAS,UAAU;AAAA,EACxB,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB,aAAa;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,eAAe;AAAA,EACf;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,SAAS;AACX,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;AAInB,QAAM,cAAc,iBAAA;AACpB,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAA+B,IAAI;AAC7E,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAwB,IAAI;AAC9D,QAAM,uBACJ,eAAe,qBAAqB,CAAC,cAAc,CAAC,CAAC,YAAY,CAAC,CAAC;AACrE,QAAM,aAAa;AAAA,IACjB,MAAO,SAAS,OAAO,QAAQ,QAAQ,GAAG,EAAE,SAAS;AAAA,IACrD,CAAC,QAAQ,MAAM;AAAA,EAAA;AAEjB,QAAM,kBAAkB,SAAS,WAAW,MAAM,GAAG,mBAAmB,IAAI;AAE5E,YAAU,MAAM;AACd,QAAI,CAAC,sBAAsB;AACzB,mBAAa,IAAI;AACjB;AAAA,IACF;AAEA,QAAI,YAAY;AAChB,UAAM,QAAQ,mBAAmB,SAAS,gBAAgB;AAC1D,kBAAc,iBAAiB,EAAE,MAAM,UAAU,OAAO,EAAE,KAAK,CAAC,QAAQ;AACtE,UAAI,CAAC,UAAW,cAAa,GAAG;AAAA,IAClC,CAAC;AAED,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,sBAAsB,UAAU,iBAAiB,cAAc,CAAC;AAEpE,QAAM,gBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACN,GAAI,cACD,EAAE,eAAe,MAAM,iBAAiB,mBAAmB,SAAS,UAAU,MAAM,MACpF,CAAA;AAAA,IAAC;AAAA,EAAA;AAKT,QAAM,gBAAgB,gBAAgB,EAAE,cAAc,cAAA,IAAkB,CAAA;AAExE,MAAI,QAAQ;AACV,UAAM,OAAO,cAAc;AAC3B,UAAM,QACJ,WAAW,SAAS,qBAChB,GAAG,WAAW,MAAM,GAAG,kBAAkB,CAAC,MAC1C;AACN,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,QAAQ;AAAA,QAAA;AAAA,QAEV;AAAA,QAEC,UAAA,2BAAQ,QAAA,EAAK,yBAAyB,EAAE,QAAQ,KAAA,GAAQ,IAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAGpE;AAEA,MAAI,MAAM;AACR,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAU;AAAA,QACV,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AAEA,MAAI,eAAe,mBAAmB;AACpC,UAAM,2BAAQ,UAAA,EAAS,MAAM,YAAY,QAAQ,YAAY,kBAAkB,sBAAsB;AACrG,QAAI,aAAa,oBAAC,OAAA,EAAI,WAAW,GAAG,yBAAyB,SAAS,GAAI,UAAA,KAAA,CAAK;AAC/E,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,+DAA+D,SAAS;AAAA,QACrF,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,iBAAA,EAAgB,OAAO,YAAY,SAAS,eAAe;AAAA,UAC5D,oBAAC,OAAA,EAAI,WAAU,6BAA6B,UAAA,KAAA,CAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGvD;AAEA,QAAM,aACJ,aAAa,SAAS,aAAa,UAAU,aAAa,SACtD,8WAMA;AAEN,QAAM,MAAM,OAAO,SAAY;AAC/B,QAAM,OAAO,aACX;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,8HACE;AAAA,QACF;AAAA,QACA,QAAQ;AAAA,MAAA;AAAA,MAEV,yBAAyB,EAAE,QAAQ,WAAA;AAAA,IAAW;AAAA,EAAA,IAE9C,YACF;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,MAAA;AAAA,MAEV,yBAAyB,EAAE,QAAQ,UAAA;AAAA,IAAU;AAAA,EAAA,IAG/C;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,MAAA;AAAA,MAGT,UAAA;AAAA,IAAA;AAAA,EAAA;AAIL,MAAI,KAAM,QAAO;AACjB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,+DAA+D,SAAS;AAAA,MACrF,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,iBAAA,EAAgB,OAAO,gBAAgB,QAAQ,SAAS,eAAe;AAAA,QACvE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,gBAAgB,EAAE,OAAO,WAAkD;AAClF,SACE,qBAAC,OAAA,EAAI,WAAU,8EACb,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAU,6DAA6D,UAAA,OAAM;AAAA,IAClF;AAAA,EAAA,GACH;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;"}

package/dist/data/GraphDiagram.cjs

@@ -18,6 +18,11 @@ const UiFullscreen = require("../icons/components/UiFullscreen.cjs");
 const UiHome = require("../icons/components/UiHome.cjs");
 const DEFAULT_NODE_WIDTH = 168;
 const DEFAULT_NODE_HEIGHT = 60;
+const DEFAULT_COMPACT_NODE_HEIGHT = 24;
+function compactHeights(nodes, layout, compactNodeHeight) {
+  if (layout !== "columns") return {};
+  return Object.fromEntries(nodes.filter((node) => node.size === "compact").map((node) => [node.id, compactNodeHeight]));
+}
 function assertEdgesReferenceKnownNodes(nodes, edges) {
   const ids = new Set(nodes.map((node) => node.id));
   for (const edge of edges) {
@@ -35,7 +40,7 @@ function requireLevel(node) {
   }
   return node.level;
 }
-function layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, columnGap, rowGap }) {
+function layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, compactNodeHeight, columnGap, rowGap }) {
   switch (layout) {
     case "ring":
       return { ...graphLayout.ringLayout(nodes, { nodeWidth, nodeHeight }), groups: [] };
@@ -44,12 +49,14 @@ function layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, columnGap, r
         nodes.map((node) => ({
           id: node.id,
           level: requireLevel(node),
-          ...node.group !== void 0 ? { group: node.group } : {}
+          ...node.group !== void 0 ? { group: node.group } : {},
+          ...node.size === "compact" ? { compact: true } : {}
         })),
         edges,
         {
           nodeWidth,
           nodeHeight,
+          compactNodeHeight,
           ...columnGap !== void 0 ? { columnGap } : {},
           ...rowGap !== void 0 ? { rowGap } : {}
         }
@@ -94,9 +101,11 @@ function GraphDiagram({
   groups,
   nodeWidth = DEFAULT_NODE_WIDTH,
   nodeHeight = DEFAULT_NODE_HEIGHT,
+  compactNodeHeight = DEFAULT_COMPACT_NODE_HEIGHT,
   columnGap,
   rowGap,
   zoomable = false,
+  wheelZoom = "modifier",
   fitMinScale,
   focusId,
   maxHeight,
@@ -106,15 +115,17 @@ function GraphDiagram({
   assertEdgesReferenceKnownNodes(nodes, edges);
   const markerPrefix = `graph-diagram-${react.useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
   const { width, height, positions, groups: groupBoxes } = react.useMemo(
-    () => layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, columnGap, rowGap }),
-    [layout, nodes, edges, nodeWidth, nodeHeight, columnGap, rowGap]
+    () => layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, compactNodeHeight, columnGap, rowGap }),
+    [layout, nodes, edges, nodeWidth, nodeHeight, compactNodeHeight, columnGap, rowGap]
   );
+  const nodeHeights = react.useMemo(() => compactHeights(nodes, layout, compactNodeHeight), [nodes, layout, compactNodeHeight]);
   const routes = react.useMemo(
-    () => graphEdgeRouting.routeEdges(edges, positions, { nodeWidth, nodeHeight }, { anchor: layout === "columns" ? "side" : "center" }),
-    [edges, positions, nodeWidth, nodeHeight, layout]
+    () => graphEdgeRouting.routeEdges(edges, positions, { nodeWidth, nodeHeight, nodeHeights }, { anchor: layout === "columns" ? "side" : "center" }),
+    [edges, positions, nodeWidth, nodeHeight, nodeHeights, layout]
   );
   const panZoom = usePanZoom.usePanZoom({
     enabled: zoomable,
+    wheel: wheelZoom,
     contentWidth: width,
     contentHeight: height,
     opening: openingFit(positions, fitMinScale, focusId)
@@ -169,6 +180,7 @@ function GraphDiagram({
                     place,
                     nodeWidth,
                     nodeHeight,
+                    nodeHeights,
                     selectedId,
                     onNodeSelect,
                     onNodeExpand,

package/dist/data/GraphDiagram.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GraphDiagram.cjs","sources":["../../src/data/GraphDiagram.tsx"],"sourcesContent":["import { useId, useMemo, type CSSProperties } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { IconButton } from \"../components/IconButton\";\nimport { UiFullscreen, UiHome, UiZoomIn, UiZoomOut } from \"../icons\";\nimport { columnsLayout, type ColumnsLayoutResult } from \"./graph-columns-layout\";\nimport { ringLayout, routeEdges, type GraphLayoutPosition } from \"./graph-layout\";\nimport { GraphDiagramEdgeLabels, GraphDiagramEdgePaths } from \"./GraphDiagramEdges\";\nimport { GraphDiagramGroupBoxes, GraphDiagramNodes } from \"./GraphDiagramNodes\";\nimport {\n  requireEntry,\n  type GraphDiagramEdge,\n  type GraphDiagramEdgeFocus,\n  type GraphDiagramGroup,\n  type GraphDiagramLayout,\n  type GraphDiagramNode,\n  type GraphPlacer,\n} from \"./graph-diagram-model\";\nimport { useEdgeFocus } from \"./use-edge-focus\";\nimport { usePanZoom, type FitOptions, type PanZoom } from \"./use-pan-zoom\";\n\nexport type {\n  GraphDiagramEdge,\n  GraphDiagramEdgeFocus,\n  GraphDiagramGroup,\n  GraphDiagramLayout,\n  GraphDiagramNode,\n} from \"./graph-diagram-model\";\n\n// GraphDiagram renders a generic, type-agnostic node/edge diagram. It knows\n// nothing about the domain: a producer maps its data into\n// GraphDiagramNode/GraphDiagramEdge and gets layout, edge routing and\n// selection behaviour.\n//\n// \"ring\" suits a small cycle of resources and processes — relationships with\n// back edges or reciprocal pairs. \"columns\" suits a directed graph with a\n// natural depth (a call graph, a dependency chain): nodes sit in the column of\n// their `level`, grouped and boxed by `group`.\n//\n// The \"columns\" layout, and any zoomable diagram, is drawn at its natural\n// pixel size so node boxes, edges and group boxes share one coordinate system\n// at every container width and zoom level. A non-zoomable \"ring\" keeps scaling\n// its node positions to the container width.\n\nexport interface GraphDiagramProps {\n  nodes: GraphDiagramNode[];\n  edges: GraphDiagramEdge[];\n  /** Defaults to \"ring\". \"columns\" needs a `level` on every node. */\n  layout?: GraphDiagramLayout;\n  selectedId?: string;\n  onNodeSelect?: (id: string) => void;\n  /** Called by a node's `+N` control (see `expandCount`); does not select the node. */\n  onNodeExpand?: (id: string) => void;\n  selectedEdgeId?: string;\n  /** Makes edges, and their label pills, selectable. */\n  onEdgeSelect?: (id: string) => void;\n  /**\n   * Whether an edge shows its pill only while in focus, and fades while another is. Defaults to\n   * \"auto\": a diagram with more than 32 edges is focused, a smaller one shows everything.\n   */\n  edgeFocus?: GraphDiagramEdgeFocus;\n  /** \"columns\" layout: captions for the group rectangles. A group without an entry shows its id. */\n  groups?: GraphDiagramGroup[];\n  nodeWidth?: number;\n  nodeHeight?: number;\n  /** \"columns\" layout: horizontal gap between columns in px. Leave room for edge label pills. */\n  columnGap?: number;\n  /** \"columns\" layout: vertical gap between stacked nodes in px. */\n  rowGap?: number;\n  /** Ctrl/meta + wheel (or pinch) zooms, dragging the background pans, and zoom controls appear. */\n  zoomable?: boolean;\n  /**\n   * Zoomable: the smallest scale the diagram opens at, so its text stays readable. A diagram too\n   * large for it opens overflowing, centred on `focusId`, and is panned to reach the rest. `Fit to\n   * view` still shows everything, and `Reset view` returns here. Unset, the diagram opens whole.\n   */\n  fitMinScale?: number;\n  /** Zoomable: the node an overflowing diagram opens centred on. Defaults to the diagram's centre. */\n  focusId?: string;\n  maxHeight?: number | string;\n  ariaLabel: string;\n  className?: string;\n}\n\nconst DEFAULT_NODE_WIDTH = 168;\nconst DEFAULT_NODE_HEIGHT = 60;\n\ninterface LayoutOptions {\n  layout: GraphDiagramLayout;\n  nodeWidth: number;\n  nodeHeight: number;\n  columnGap: number | undefined;\n  rowGap: number | undefined;\n}\n\nfunction assertEdgesReferenceKnownNodes(nodes: GraphDiagramNode[], edges: GraphDiagramEdge[]): void {\n  const ids = new Set(nodes.map((node) => node.id));\n  for (const edge of edges) {\n    if (!ids.has(edge.from)) {\n      throw new Error(`GraphDiagram: edge \"${edge.id}\" references unknown node \"${edge.from}\"`);\n    }\n    if (!ids.has(edge.to)) {\n      throw new Error(`GraphDiagram: edge \"${edge.id}\" references unknown node \"${edge.to}\"`);\n    }\n  }\n}\n\nfunction requireLevel(node: GraphDiagramNode): number {\n  if (node.level === undefined || !Number.isFinite(node.level)) {\n    throw new Error(`GraphDiagram: node \"${node.id}\" needs a finite level for the \"columns\" layout`);\n  }\n  return node.level;\n}\n\nfunction layoutNodes(\n  nodes: GraphDiagramNode[],\n  edges: GraphDiagramEdge[],\n  { layout, nodeWidth, nodeHeight, columnGap, rowGap }: LayoutOptions,\n): ColumnsLayoutResult {\n  switch (layout) {\n    case \"ring\":\n      return { ...ringLayout(nodes, { nodeWidth, nodeHeight }), groups: [] };\n    case \"columns\":\n      return columnsLayout(\n        nodes.map((node) => ({\n          id: node.id,\n          level: requireLevel(node),\n          ...(node.group !== undefined ? { group: node.group } : {}),\n        })),\n        edges,\n        {\n          nodeWidth,\n          nodeHeight,\n          ...(columnGap !== undefined ? { columnGap } : {}),\n          ...(rowGap !== undefined ? { rowGap } : {}),\n        },\n      );\n    default:\n      throw new Error(`GraphDiagram: unknown layout \"${layout satisfies never}\"`);\n  }\n}\n\nfunction toPercent(value: number, extent: number): string {\n  return `${(value / extent) * 100}%`;\n}\n\nfunction stageStyle(size: { width: number; height: number }, natural: boolean, panZoom: PanZoom | undefined): CSSProperties {\n  if (!natural) return { aspectRatio: `${size.width} / ${size.height}` };\n  if (!panZoom) return size;\n  const { x, y, scale } = panZoom.transform;\n  return { ...size, transform: `translate(${x}px, ${y}px) scale(${scale})`, transformOrigin: \"0 0\" };\n}\n\n/** `resettable`: the diagram opens at another view than the whole of it, so there is one to return to. */\nfunction ZoomControls({ panZoom, resettable }: { panZoom: PanZoom; resettable: boolean }) {\n  return (\n    <div className=\"absolute right-2 top-2 flex cursor-default gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-sm\">\n      <IconButton icon={UiZoomOut} label=\"Zoom out\" className=\"size-6\" onClick={panZoom.zoomOut} />\n      <IconButton icon={UiZoomIn} label=\"Zoom in\" className=\"size-6\" onClick={panZoom.zoomIn} />\n      <IconButton icon={UiFullscreen} label=\"Fit to view\" className=\"size-6\" onClick={panZoom.fit} />\n      {resettable && <IconButton icon={UiHome} label=\"Reset view\" className=\"size-6\" onClick={panZoom.reset} />}\n    </div>\n  );\n}\n\n/** How a zoomable diagram opens: no smaller than `fitMinScale`, centred on the `focusId` node. */\nfunction openingFit(\n  positions: Record<string, GraphLayoutPosition>,\n  fitMinScale: number | undefined,\n  focusId: string | undefined,\n): FitOptions {\n  return {\n    ...(fitMinScale !== undefined ? { minScale: fitMinScale } : {}),\n    ...(focusId !== undefined ? { focus: requireEntry(positions, focusId, \"layout position\") } : {}),\n  };\n}\n\nexport function GraphDiagram({\n  nodes,\n  edges,\n  layout = \"ring\",\n  selectedId,\n  onNodeSelect,\n  onNodeExpand,\n  selectedEdgeId,\n  onEdgeSelect,\n  edgeFocus = \"auto\",\n  groups,\n  nodeWidth = DEFAULT_NODE_WIDTH,\n  nodeHeight = DEFAULT_NODE_HEIGHT,\n  columnGap,\n  rowGap,\n  zoomable = false,\n  fitMinScale,\n  focusId,\n  maxHeight,\n  ariaLabel,\n  className,\n}: GraphDiagramProps) {\n  assertEdgesReferenceKnownNodes(nodes, edges);\n  const markerPrefix = `graph-diagram-${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n\n  const { width, height, positions, groups: groupBoxes } = useMemo(\n    () => layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, columnGap, rowGap }),\n    [layout, nodes, edges, nodeWidth, nodeHeight, columnGap, rowGap],\n  );\n  const routes = useMemo(\n    () =>\n      routeEdges(edges, positions, { nodeWidth, nodeHeight }, { anchor: layout === \"columns\" ? \"side\" : \"center\" }),\n    [edges, positions, nodeWidth, nodeHeight, layout],\n  );\n\n  const panZoom = usePanZoom({\n    enabled: zoomable,\n    contentWidth: width,\n    contentHeight: height,\n    opening: openingFit(positions, fitMinScale, focusId),\n  });\n  const natural = layout === \"columns\" || zoomable;\n  const place: GraphPlacer = natural\n    ? ({ x, y }) => ({ left: x, top: y })\n    : ({ x, y }) => ({ left: toPercent(x, width), top: toPercent(y, height) });\n  const focus = useEdgeFocus({ mode: edgeFocus, edges, selectedId, selectedEdgeId });\n  const edgeSelection = { selectedEdgeId, onEdgeSelect, focus: focus.state };\n\n  return (\n    <div\n      ref={panZoom.viewportRef}\n      className={cn(\n        \"w-full\",\n        zoomable ? \"relative touch-none overflow-hidden\" : \"overflow-auto\",\n        zoomable && (panZoom.panning ? \"cursor-grabbing select-none\" : \"cursor-grab\"),\n        className,\n      )}\n      style={maxHeight != null ? { maxHeight } : undefined}\n      {...panZoom.handlers}\n    >\n      <div\n        ref={panZoom.contentRef}\n        data-graph-stage=\"\"\n        className={cn(\"relative\", natural ? !zoomable && \"mx-auto\" : \"w-full\")}\n        style={stageStyle({ width, height }, natural, zoomable ? panZoom : undefined)}\n      >\n        <GraphDiagramGroupBoxes boxes={groupBoxes} groups={groups} />\n        <GraphDiagramEdgePaths\n          edges={edges}\n          nodes={nodes}\n          routes={routes}\n          width={width}\n          height={height}\n          ariaLabel={ariaLabel}\n          markerPrefix={markerPrefix}\n          onEdgeHover={focus.onEdgeHover}\n          {...edgeSelection}\n        />\n        <div className=\"pointer-events-none absolute inset-0\">\n          <GraphDiagramEdgeLabels edges={edges} routes={routes} place={place} spread={natural} {...edgeSelection} />\n          <GraphDiagramNodes\n            nodes={nodes}\n            positions={positions}\n            place={place}\n            nodeWidth={nodeWidth}\n            nodeHeight={nodeHeight}\n            selectedId={selectedId}\n            onNodeSelect={onNodeSelect}\n            onNodeExpand={onNodeExpand}\n            onNodeHover={focus.onNodeHover}\n          />\n        </div>\n      </div>\n      {zoomable && <ZoomControls panZoom={panZoom} resettable={fitMinScale !== undefined} />}\n    </div>\n  );\n}\n"],"names":["ringLayout","columnsLayout","jsxs","jsx","IconButton","UiZoomOut","UiZoomIn","UiFullscreen","UiHome","requireEntry","useId","useMemo","routeEdges","usePanZoom","useEdgeFocus","cn","GraphDiagramGroupBoxes","GraphDiagramEdgePaths","GraphDiagramEdgeLabels","GraphDiagramNodes"],"mappings":"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"}
+{"version":3,"file":"GraphDiagram.cjs","sources":["../../src/data/GraphDiagram.tsx"],"sourcesContent":["import { useId, useMemo, type CSSProperties } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { IconButton } from \"../components/IconButton\";\nimport { UiFullscreen, UiHome, UiZoomIn, UiZoomOut } from \"../icons\";\nimport { columnsLayout, type ColumnsLayoutResult } from \"./graph-columns-layout\";\nimport { ringLayout, routeEdges, type GraphLayoutPosition } from \"./graph-layout\";\nimport { GraphDiagramEdgeLabels, GraphDiagramEdgePaths } from \"./GraphDiagramEdges\";\nimport { GraphDiagramGroupBoxes, GraphDiagramNodes } from \"./GraphDiagramNodes\";\nimport {\n  requireEntry,\n  type GraphDiagramEdge,\n  type GraphDiagramEdgeFocus,\n  type GraphDiagramGroup,\n  type GraphDiagramLayout,\n  type GraphDiagramNode,\n  type GraphPlacer,\n} from \"./graph-diagram-model\";\nimport { useEdgeFocus } from \"./use-edge-focus\";\nimport { usePanZoom, type FitOptions, type PanZoom, type WheelMode } from \"./use-pan-zoom\";\n\nexport type {\n  GraphDiagramEdge,\n  GraphDiagramEdgeFocus,\n  GraphDiagramGroup,\n  GraphDiagramLayout,\n  GraphDiagramNode,\n} from \"./graph-diagram-model\";\n\n// GraphDiagram renders a generic, type-agnostic node/edge diagram. It knows\n// nothing about the domain: a producer maps its data into\n// GraphDiagramNode/GraphDiagramEdge and gets layout, edge routing and\n// selection behaviour.\n//\n// \"ring\" suits a small cycle of resources and processes — relationships with\n// back edges or reciprocal pairs. \"columns\" suits a directed graph with a\n// natural depth (a call graph, a dependency chain): nodes sit in the column of\n// their `level`, grouped and boxed by `group`.\n//\n// The \"columns\" layout, and any zoomable diagram, is drawn at its natural\n// pixel size so node boxes, edges and group boxes share one coordinate system\n// at every container width and zoom level. A non-zoomable \"ring\" keeps scaling\n// its node positions to the container width.\n\nexport interface GraphDiagramProps {\n  nodes: GraphDiagramNode[];\n  edges: GraphDiagramEdge[];\n  /** Defaults to \"ring\". \"columns\" needs a `level` on every node. */\n  layout?: GraphDiagramLayout;\n  selectedId?: string;\n  onNodeSelect?: (id: string) => void;\n  /** Called by a node's `+N` control (see `expandCount`); does not select the node. */\n  onNodeExpand?: (id: string) => void;\n  selectedEdgeId?: string;\n  /** Makes edges, and their label pills, selectable. */\n  onEdgeSelect?: (id: string) => void;\n  /**\n   * Whether an edge shows its pill only while in focus, and fades while another is. Defaults to\n   * \"auto\": a diagram with more than 32 edges is focused, a smaller one shows everything.\n   */\n  edgeFocus?: GraphDiagramEdgeFocus;\n  /** \"columns\" layout: captions for the group rectangles. A group without an entry shows its id. */\n  groups?: GraphDiagramGroup[];\n  nodeWidth?: number;\n  nodeHeight?: number;\n  /**\n   * \"columns\" layout: the height of a node with `size: \"compact\"`, drawn on one line. A group of only\n   * compact nodes stacks them closer and pads them tighter. Defaults to 24.\n   */\n  compactNodeHeight?: number;\n  /** \"columns\" layout: horizontal gap between columns in px. Leave room for edge label pills. */\n  columnGap?: number;\n  /** \"columns\" layout: vertical gap between stacked nodes in px. */\n  rowGap?: number;\n  /** Ctrl/meta + wheel (or pinch) zooms, dragging the background pans, and zoom controls appear. */\n  zoomable?: boolean;\n  /** Zoomable: \"zoom\" makes a plain mouse wheel zoom too, for a diagram that fills its pane. Defaults to \"modifier\". */\n  wheelZoom?: WheelMode;\n  /**\n   * Zoomable: the smallest scale the diagram opens at, so its text stays readable. A diagram too\n   * large for it opens overflowing, centred on `focusId`, and is panned to reach the rest. `Fit to\n   * view` still shows everything, and `Reset view` returns here. Unset, the diagram opens whole.\n   */\n  fitMinScale?: number;\n  /** Zoomable: the node an overflowing diagram opens centred on. Defaults to the diagram's centre. */\n  focusId?: string;\n  maxHeight?: number | string;\n  ariaLabel: string;\n  className?: string;\n}\n\nconst DEFAULT_NODE_WIDTH = 168;\nconst DEFAULT_NODE_HEIGHT = 60;\nconst DEFAULT_COMPACT_NODE_HEIGHT = 24;\n\ninterface LayoutOptions {\n  layout: GraphDiagramLayout;\n  nodeWidth: number;\n  nodeHeight: number;\n  compactNodeHeight: number;\n  columnGap: number | undefined;\n  rowGap: number | undefined;\n}\n\n/** The heights of the nodes not drawn at the node height: the compact ones, in the \"columns\" layout. */\nfunction compactHeights(nodes: GraphDiagramNode[], layout: GraphDiagramLayout, compactNodeHeight: number): Record<string, number> {\n  if (layout !== \"columns\") return {};\n  return Object.fromEntries(nodes.filter((node) => node.size === \"compact\").map((node) => [node.id, compactNodeHeight]));\n}\n\nfunction assertEdgesReferenceKnownNodes(nodes: GraphDiagramNode[], edges: GraphDiagramEdge[]): void {\n  const ids = new Set(nodes.map((node) => node.id));\n  for (const edge of edges) {\n    if (!ids.has(edge.from)) {\n      throw new Error(`GraphDiagram: edge \"${edge.id}\" references unknown node \"${edge.from}\"`);\n    }\n    if (!ids.has(edge.to)) {\n      throw new Error(`GraphDiagram: edge \"${edge.id}\" references unknown node \"${edge.to}\"`);\n    }\n  }\n}\n\nfunction requireLevel(node: GraphDiagramNode): number {\n  if (node.level === undefined || !Number.isFinite(node.level)) {\n    throw new Error(`GraphDiagram: node \"${node.id}\" needs a finite level for the \"columns\" layout`);\n  }\n  return node.level;\n}\n\nfunction layoutNodes(\n  nodes: GraphDiagramNode[],\n  edges: GraphDiagramEdge[],\n  { layout, nodeWidth, nodeHeight, compactNodeHeight, columnGap, rowGap }: LayoutOptions,\n): ColumnsLayoutResult {\n  switch (layout) {\n    case \"ring\":\n      return { ...ringLayout(nodes, { nodeWidth, nodeHeight }), groups: [] };\n    case \"columns\":\n      return columnsLayout(\n        nodes.map((node) => ({\n          id: node.id,\n          level: requireLevel(node),\n          ...(node.group !== undefined ? { group: node.group } : {}),\n          ...(node.size === \"compact\" ? { compact: true } : {}),\n        })),\n        edges,\n        {\n          nodeWidth,\n          nodeHeight,\n          compactNodeHeight,\n          ...(columnGap !== undefined ? { columnGap } : {}),\n          ...(rowGap !== undefined ? { rowGap } : {}),\n        },\n      );\n    default:\n      throw new Error(`GraphDiagram: unknown layout \"${layout satisfies never}\"`);\n  }\n}\n\nfunction toPercent(value: number, extent: number): string {\n  return `${(value / extent) * 100}%`;\n}\n\nfunction stageStyle(size: { width: number; height: number }, natural: boolean, panZoom: PanZoom | undefined): CSSProperties {\n  if (!natural) return { aspectRatio: `${size.width} / ${size.height}` };\n  if (!panZoom) return size;\n  const { x, y, scale } = panZoom.transform;\n  return { ...size, transform: `translate(${x}px, ${y}px) scale(${scale})`, transformOrigin: \"0 0\" };\n}\n\n/** `resettable`: the diagram opens at another view than the whole of it, so there is one to return to. */\nfunction ZoomControls({ panZoom, resettable }: { panZoom: PanZoom; resettable: boolean }) {\n  return (\n    <div className=\"absolute right-2 top-2 flex cursor-default gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-sm\">\n      <IconButton icon={UiZoomOut} label=\"Zoom out\" className=\"size-6\" onClick={panZoom.zoomOut} />\n      <IconButton icon={UiZoomIn} label=\"Zoom in\" className=\"size-6\" onClick={panZoom.zoomIn} />\n      <IconButton icon={UiFullscreen} label=\"Fit to view\" className=\"size-6\" onClick={panZoom.fit} />\n      {resettable && <IconButton icon={UiHome} label=\"Reset view\" className=\"size-6\" onClick={panZoom.reset} />}\n    </div>\n  );\n}\n\n/** How a zoomable diagram opens: no smaller than `fitMinScale`, centred on the `focusId` node. */\nfunction openingFit(\n  positions: Record<string, GraphLayoutPosition>,\n  fitMinScale: number | undefined,\n  focusId: string | undefined,\n): FitOptions {\n  return {\n    ...(fitMinScale !== undefined ? { minScale: fitMinScale } : {}),\n    ...(focusId !== undefined ? { focus: requireEntry(positions, focusId, \"layout position\") } : {}),\n  };\n}\n\nexport function GraphDiagram({\n  nodes,\n  edges,\n  layout = \"ring\",\n  selectedId,\n  onNodeSelect,\n  onNodeExpand,\n  selectedEdgeId,\n  onEdgeSelect,\n  edgeFocus = \"auto\",\n  groups,\n  nodeWidth = DEFAULT_NODE_WIDTH,\n  nodeHeight = DEFAULT_NODE_HEIGHT,\n  compactNodeHeight = DEFAULT_COMPACT_NODE_HEIGHT,\n  columnGap,\n  rowGap,\n  zoomable = false,\n  wheelZoom = \"modifier\",\n  fitMinScale,\n  focusId,\n  maxHeight,\n  ariaLabel,\n  className,\n}: GraphDiagramProps) {\n  assertEdgesReferenceKnownNodes(nodes, edges);\n  const markerPrefix = `graph-diagram-${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n\n  const { width, height, positions, groups: groupBoxes } = useMemo(\n    () => layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, compactNodeHeight, columnGap, rowGap }),\n    [layout, nodes, edges, nodeWidth, nodeHeight, compactNodeHeight, columnGap, rowGap],\n  );\n  const nodeHeights = useMemo(() => compactHeights(nodes, layout, compactNodeHeight), [nodes, layout, compactNodeHeight]);\n  const routes = useMemo(\n    () =>\n      routeEdges(edges, positions, { nodeWidth, nodeHeight, nodeHeights }, { anchor: layout === \"columns\" ? \"side\" : \"center\" }),\n    [edges, positions, nodeWidth, nodeHeight, nodeHeights, layout],\n  );\n\n  const panZoom = usePanZoom({\n    enabled: zoomable,\n    wheel: wheelZoom,\n    contentWidth: width,\n    contentHeight: height,\n    opening: openingFit(positions, fitMinScale, focusId),\n  });\n  const natural = layout === \"columns\" || zoomable;\n  const place: GraphPlacer = natural\n    ? ({ x, y }) => ({ left: x, top: y })\n    : ({ x, y }) => ({ left: toPercent(x, width), top: toPercent(y, height) });\n  const focus = useEdgeFocus({ mode: edgeFocus, edges, selectedId, selectedEdgeId });\n  const edgeSelection = { selectedEdgeId, onEdgeSelect, focus: focus.state };\n\n  return (\n    <div\n      ref={panZoom.viewportRef}\n      className={cn(\n        \"w-full\",\n        zoomable ? \"relative touch-none overflow-hidden\" : \"overflow-auto\",\n        zoomable && (panZoom.panning ? \"cursor-grabbing select-none\" : \"cursor-grab\"),\n        className,\n      )}\n      style={maxHeight != null ? { maxHeight } : undefined}\n      {...panZoom.handlers}\n    >\n      <div\n        ref={panZoom.contentRef}\n        data-graph-stage=\"\"\n        className={cn(\"relative\", natural ? !zoomable && \"mx-auto\" : \"w-full\")}\n        style={stageStyle({ width, height }, natural, zoomable ? panZoom : undefined)}\n      >\n        <GraphDiagramGroupBoxes boxes={groupBoxes} groups={groups} />\n        <GraphDiagramEdgePaths\n          edges={edges}\n          nodes={nodes}\n          routes={routes}\n          width={width}\n          height={height}\n          ariaLabel={ariaLabel}\n          markerPrefix={markerPrefix}\n          onEdgeHover={focus.onEdgeHover}\n          {...edgeSelection}\n        />\n        <div className=\"pointer-events-none absolute inset-0\">\n          <GraphDiagramEdgeLabels edges={edges} routes={routes} place={place} spread={natural} {...edgeSelection} />\n          <GraphDiagramNodes\n            nodes={nodes}\n            positions={positions}\n            place={place}\n            nodeWidth={nodeWidth}\n            nodeHeight={nodeHeight}\n            nodeHeights={nodeHeights}\n            selectedId={selectedId}\n            onNodeSelect={onNodeSelect}\n            onNodeExpand={onNodeExpand}\n            onNodeHover={focus.onNodeHover}\n          />\n        </div>\n      </div>\n      {zoomable && <ZoomControls panZoom={panZoom} resettable={fitMinScale !== undefined} />}\n    </div>\n  );\n}\n"],"names":["ringLayout","columnsLayout","jsxs","jsx","IconButton","UiZoomOut","UiZoomIn","UiFullscreen","UiHome","requireEntry","useId","useMemo","routeEdges","usePanZoom","useEdgeFocus","cn","GraphDiagramGroupBoxes","GraphDiagramEdgePaths","GraphDiagramEdgeLabels","GraphDiagramNodes"],"mappings":"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"}

package/dist/data/GraphDiagram.d.ts

@@ -1,4 +1,5 @@
 import { GraphDiagramEdge, GraphDiagramEdgeFocus, GraphDiagramGroup, GraphDiagramLayout, GraphDiagramNode } from './graph-diagram-model.js';
+import { WheelMode } from './use-pan-zoom.js';
 export type { GraphDiagramEdge, GraphDiagramEdgeFocus, GraphDiagramGroup, GraphDiagramLayout, GraphDiagramNode, } from './graph-diagram-model.js';
 export interface GraphDiagramProps {
     nodes: GraphDiagramNode[];
@@ -21,12 +22,19 @@ export interface GraphDiagramProps {
     groups?: GraphDiagramGroup[];
     nodeWidth?: number;
     nodeHeight?: number;
+    /**
+     * "columns" layout: the height of a node with `size: "compact"`, drawn on one line. A group of only
+     * compact nodes stacks them closer and pads them tighter. Defaults to 24.
+     */
+    compactNodeHeight?: number;
     /** "columns" layout: horizontal gap between columns in px. Leave room for edge label pills. */
     columnGap?: number;
     /** "columns" layout: vertical gap between stacked nodes in px. */
     rowGap?: number;
     /** Ctrl/meta + wheel (or pinch) zooms, dragging the background pans, and zoom controls appear. */
     zoomable?: boolean;
+    /** Zoomable: "zoom" makes a plain mouse wheel zoom too, for a diagram that fills its pane. Defaults to "modifier". */
+    wheelZoom?: WheelMode;
     /**
      * Zoomable: the smallest scale the diagram opens at, so its text stays readable. A diagram too
      * large for it opens overflowing, centred on `focusId`, and is panned to reach the rest. `Fit to
@@ -39,5 +47,5 @@ export interface GraphDiagramProps {
     ariaLabel: string;
     className?: string;
 }
-export declare function GraphDiagram({ nodes, edges, layout, selectedId, onNodeSelect, onNodeExpand, selectedEdgeId, onEdgeSelect, edgeFocus, groups, nodeWidth, nodeHeight, columnGap, rowGap, zoomable, fitMinScale, focusId, maxHeight, ariaLabel, className, }: GraphDiagramProps): import("react").JSX.Element;
+export declare function GraphDiagram({ nodes, edges, layout, selectedId, onNodeSelect, onNodeExpand, selectedEdgeId, onEdgeSelect, edgeFocus, groups, nodeWidth, nodeHeight, compactNodeHeight, columnGap, rowGap, zoomable, wheelZoom, fitMinScale, focusId, maxHeight, ariaLabel, className, }: GraphDiagramProps): import("react").JSX.Element;
 //# sourceMappingURL=GraphDiagram.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"GraphDiagram.d.ts","sourceRoot":"","sources":["../../src/data/GraphDiagram.tsx"],"names":[],"mappings":"AAQA,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EAEtB,MAAM,uBAAuB,CAAC;AAI/B,YAAY,EACV,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,uBAAuB,CAAC;AAiB/B,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,mEAAmE;IACnE,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,qFAAqF;IACrF,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sDAAsD;IACtD,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAClC,kGAAkG;IAClG,MAAM,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+FAA+F;IAC/F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kGAAkG;IAClG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oGAAoG;IACpG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+FD,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,MAAe,EACf,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,SAAkB,EAClB,MAAM,EACN,SAA8B,EAC9B,UAAgC,EAChC,SAAS,EACT,MAAM,EACN,QAAgB,EAChB,WAAW,EACX,OAAO,EACP,SAAS,EACT,SAAS,EACT,SAAS,GACV,EAAE,iBAAiB,+BA2EnB"}
+{"version":3,"file":"GraphDiagram.d.ts","sourceRoot":"","sources":["../../src/data/GraphDiagram.tsx"],"names":[],"mappings":"AAQA,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EAEtB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAA6C,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3F,YAAY,EACV,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,uBAAuB,CAAC;AAiB/B,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,mEAAmE;IACnE,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,qFAAqF;IACrF,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sDAAsD;IACtD,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAClC,kGAAkG;IAClG,MAAM,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,+FAA+F;IAC/F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kGAAkG;IAClG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sHAAsH;IACtH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oGAAoG;IACpG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyGD,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,MAAe,EACf,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,SAAkB,EAClB,MAAM,EACN,SAA8B,EAC9B,UAAgC,EAChC,iBAA+C,EAC/C,SAAS,EACT,MAAM,EACN,QAAgB,EAChB,SAAsB,EACtB,WAAW,EACX,OAAO,EACP,SAAS,EACT,SAAS,EACT,SAAS,GACV,EAAE,iBAAiB,+BA8EnB"}

package/dist/data/GraphDiagram.js

@@ -16,6 +16,11 @@ import { UiFullscreen } from "../icons/components/UiFullscreen.js";
 import { UiHome } from "../icons/components/UiHome.js";
 const DEFAULT_NODE_WIDTH = 168;
 const DEFAULT_NODE_HEIGHT = 60;
+const DEFAULT_COMPACT_NODE_HEIGHT = 24;
+function compactHeights(nodes, layout, compactNodeHeight) {
+  if (layout !== "columns") return {};
+  return Object.fromEntries(nodes.filter((node) => node.size === "compact").map((node) => [node.id, compactNodeHeight]));
+}
 function assertEdgesReferenceKnownNodes(nodes, edges) {
   const ids = new Set(nodes.map((node) => node.id));
   for (const edge of edges) {
@@ -33,7 +38,7 @@ function requireLevel(node) {
   }
   return node.level;
 }
-function layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, columnGap, rowGap }) {
+function layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, compactNodeHeight, columnGap, rowGap }) {
   switch (layout) {
     case "ring":
       return { ...ringLayout(nodes, { nodeWidth, nodeHeight }), groups: [] };
@@ -42,12 +47,14 @@ function layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, columnGap, r
         nodes.map((node) => ({
           id: node.id,
           level: requireLevel(node),
-          ...node.group !== void 0 ? { group: node.group } : {}
+          ...node.group !== void 0 ? { group: node.group } : {},
+          ...node.size === "compact" ? { compact: true } : {}
         })),
         edges,
         {
           nodeWidth,
           nodeHeight,
+          compactNodeHeight,
           ...columnGap !== void 0 ? { columnGap } : {},
           ...rowGap !== void 0 ? { rowGap } : {}
         }
@@ -92,9 +99,11 @@ function GraphDiagram({
   groups,
   nodeWidth = DEFAULT_NODE_WIDTH,
   nodeHeight = DEFAULT_NODE_HEIGHT,
+  compactNodeHeight = DEFAULT_COMPACT_NODE_HEIGHT,
   columnGap,
   rowGap,
   zoomable = false,
+  wheelZoom = "modifier",
   fitMinScale,
   focusId,
   maxHeight,
@@ -104,15 +113,17 @@ function GraphDiagram({
   assertEdgesReferenceKnownNodes(nodes, edges);
   const markerPrefix = `graph-diagram-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
   const { width, height, positions, groups: groupBoxes } = useMemo(
-    () => layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, columnGap, rowGap }),
-    [layout, nodes, edges, nodeWidth, nodeHeight, columnGap, rowGap]
+    () => layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, compactNodeHeight, columnGap, rowGap }),
+    [layout, nodes, edges, nodeWidth, nodeHeight, compactNodeHeight, columnGap, rowGap]
   );
+  const nodeHeights = useMemo(() => compactHeights(nodes, layout, compactNodeHeight), [nodes, layout, compactNodeHeight]);
   const routes = useMemo(
-    () => routeEdges(edges, positions, { nodeWidth, nodeHeight }, { anchor: layout === "columns" ? "side" : "center" }),
-    [edges, positions, nodeWidth, nodeHeight, layout]
+    () => routeEdges(edges, positions, { nodeWidth, nodeHeight, nodeHeights }, { anchor: layout === "columns" ? "side" : "center" }),
+    [edges, positions, nodeWidth, nodeHeight, nodeHeights, layout]
   );
   const panZoom = usePanZoom({
     enabled: zoomable,
+    wheel: wheelZoom,
     contentWidth: width,
     contentHeight: height,
     opening: openingFit(positions, fitMinScale, focusId)
@@ -167,6 +178,7 @@ function GraphDiagram({
                     place,
                     nodeWidth,
                     nodeHeight,
+                    nodeHeights,
                     selectedId,
                     onNodeSelect,
                     onNodeExpand,

package/dist/data/GraphDiagram.js.map

@@ -1 +1 @@
-{"version":3,"file":"GraphDiagram.js","sources":["../../src/data/GraphDiagram.tsx"],"sourcesContent":["import { useId, useMemo, type CSSProperties } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { IconButton } from \"../components/IconButton\";\nimport { UiFullscreen, UiHome, UiZoomIn, UiZoomOut } from \"../icons\";\nimport { columnsLayout, type ColumnsLayoutResult } from \"./graph-columns-layout\";\nimport { ringLayout, routeEdges, type GraphLayoutPosition } from \"./graph-layout\";\nimport { GraphDiagramEdgeLabels, GraphDiagramEdgePaths } from \"./GraphDiagramEdges\";\nimport { GraphDiagramGroupBoxes, GraphDiagramNodes } from \"./GraphDiagramNodes\";\nimport {\n  requireEntry,\n  type GraphDiagramEdge,\n  type GraphDiagramEdgeFocus,\n  type GraphDiagramGroup,\n  type GraphDiagramLayout,\n  type GraphDiagramNode,\n  type GraphPlacer,\n} from \"./graph-diagram-model\";\nimport { useEdgeFocus } from \"./use-edge-focus\";\nimport { usePanZoom, type FitOptions, type PanZoom } from \"./use-pan-zoom\";\n\nexport type {\n  GraphDiagramEdge,\n  GraphDiagramEdgeFocus,\n  GraphDiagramGroup,\n  GraphDiagramLayout,\n  GraphDiagramNode,\n} from \"./graph-diagram-model\";\n\n// GraphDiagram renders a generic, type-agnostic node/edge diagram. It knows\n// nothing about the domain: a producer maps its data into\n// GraphDiagramNode/GraphDiagramEdge and gets layout, edge routing and\n// selection behaviour.\n//\n// \"ring\" suits a small cycle of resources and processes — relationships with\n// back edges or reciprocal pairs. \"columns\" suits a directed graph with a\n// natural depth (a call graph, a dependency chain): nodes sit in the column of\n// their `level`, grouped and boxed by `group`.\n//\n// The \"columns\" layout, and any zoomable diagram, is drawn at its natural\n// pixel size so node boxes, edges and group boxes share one coordinate system\n// at every container width and zoom level. A non-zoomable \"ring\" keeps scaling\n// its node positions to the container width.\n\nexport interface GraphDiagramProps {\n  nodes: GraphDiagramNode[];\n  edges: GraphDiagramEdge[];\n  /** Defaults to \"ring\". \"columns\" needs a `level` on every node. */\n  layout?: GraphDiagramLayout;\n  selectedId?: string;\n  onNodeSelect?: (id: string) => void;\n  /** Called by a node's `+N` control (see `expandCount`); does not select the node. */\n  onNodeExpand?: (id: string) => void;\n  selectedEdgeId?: string;\n  /** Makes edges, and their label pills, selectable. */\n  onEdgeSelect?: (id: string) => void;\n  /**\n   * Whether an edge shows its pill only while in focus, and fades while another is. Defaults to\n   * \"auto\": a diagram with more than 32 edges is focused, a smaller one shows everything.\n   */\n  edgeFocus?: GraphDiagramEdgeFocus;\n  /** \"columns\" layout: captions for the group rectangles. A group without an entry shows its id. */\n  groups?: GraphDiagramGroup[];\n  nodeWidth?: number;\n  nodeHeight?: number;\n  /** \"columns\" layout: horizontal gap between columns in px. Leave room for edge label pills. */\n  columnGap?: number;\n  /** \"columns\" layout: vertical gap between stacked nodes in px. */\n  rowGap?: number;\n  /** Ctrl/meta + wheel (or pinch) zooms, dragging the background pans, and zoom controls appear. */\n  zoomable?: boolean;\n  /**\n   * Zoomable: the smallest scale the diagram opens at, so its text stays readable. A diagram too\n   * large for it opens overflowing, centred on `focusId`, and is panned to reach the rest. `Fit to\n   * view` still shows everything, and `Reset view` returns here. Unset, the diagram opens whole.\n   */\n  fitMinScale?: number;\n  /** Zoomable: the node an overflowing diagram opens centred on. Defaults to the diagram's centre. */\n  focusId?: string;\n  maxHeight?: number | string;\n  ariaLabel: string;\n  className?: string;\n}\n\nconst DEFAULT_NODE_WIDTH = 168;\nconst DEFAULT_NODE_HEIGHT = 60;\n\ninterface LayoutOptions {\n  layout: GraphDiagramLayout;\n  nodeWidth: number;\n  nodeHeight: number;\n  columnGap: number | undefined;\n  rowGap: number | undefined;\n}\n\nfunction assertEdgesReferenceKnownNodes(nodes: GraphDiagramNode[], edges: GraphDiagramEdge[]): void {\n  const ids = new Set(nodes.map((node) => node.id));\n  for (const edge of edges) {\n    if (!ids.has(edge.from)) {\n      throw new Error(`GraphDiagram: edge \"${edge.id}\" references unknown node \"${edge.from}\"`);\n    }\n    if (!ids.has(edge.to)) {\n      throw new Error(`GraphDiagram: edge \"${edge.id}\" references unknown node \"${edge.to}\"`);\n    }\n  }\n}\n\nfunction requireLevel(node: GraphDiagramNode): number {\n  if (node.level === undefined || !Number.isFinite(node.level)) {\n    throw new Error(`GraphDiagram: node \"${node.id}\" needs a finite level for the \"columns\" layout`);\n  }\n  return node.level;\n}\n\nfunction layoutNodes(\n  nodes: GraphDiagramNode[],\n  edges: GraphDiagramEdge[],\n  { layout, nodeWidth, nodeHeight, columnGap, rowGap }: LayoutOptions,\n): ColumnsLayoutResult {\n  switch (layout) {\n    case \"ring\":\n      return { ...ringLayout(nodes, { nodeWidth, nodeHeight }), groups: [] };\n    case \"columns\":\n      return columnsLayout(\n        nodes.map((node) => ({\n          id: node.id,\n          level: requireLevel(node),\n          ...(node.group !== undefined ? { group: node.group } : {}),\n        })),\n        edges,\n        {\n          nodeWidth,\n          nodeHeight,\n          ...(columnGap !== undefined ? { columnGap } : {}),\n          ...(rowGap !== undefined ? { rowGap } : {}),\n        },\n      );\n    default:\n      throw new Error(`GraphDiagram: unknown layout \"${layout satisfies never}\"`);\n  }\n}\n\nfunction toPercent(value: number, extent: number): string {\n  return `${(value / extent) * 100}%`;\n}\n\nfunction stageStyle(size: { width: number; height: number }, natural: boolean, panZoom: PanZoom | undefined): CSSProperties {\n  if (!natural) return { aspectRatio: `${size.width} / ${size.height}` };\n  if (!panZoom) return size;\n  const { x, y, scale } = panZoom.transform;\n  return { ...size, transform: `translate(${x}px, ${y}px) scale(${scale})`, transformOrigin: \"0 0\" };\n}\n\n/** `resettable`: the diagram opens at another view than the whole of it, so there is one to return to. */\nfunction ZoomControls({ panZoom, resettable }: { panZoom: PanZoom; resettable: boolean }) {\n  return (\n    <div className=\"absolute right-2 top-2 flex cursor-default gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-sm\">\n      <IconButton icon={UiZoomOut} label=\"Zoom out\" className=\"size-6\" onClick={panZoom.zoomOut} />\n      <IconButton icon={UiZoomIn} label=\"Zoom in\" className=\"size-6\" onClick={panZoom.zoomIn} />\n      <IconButton icon={UiFullscreen} label=\"Fit to view\" className=\"size-6\" onClick={panZoom.fit} />\n      {resettable && <IconButton icon={UiHome} label=\"Reset view\" className=\"size-6\" onClick={panZoom.reset} />}\n    </div>\n  );\n}\n\n/** How a zoomable diagram opens: no smaller than `fitMinScale`, centred on the `focusId` node. */\nfunction openingFit(\n  positions: Record<string, GraphLayoutPosition>,\n  fitMinScale: number | undefined,\n  focusId: string | undefined,\n): FitOptions {\n  return {\n    ...(fitMinScale !== undefined ? { minScale: fitMinScale } : {}),\n    ...(focusId !== undefined ? { focus: requireEntry(positions, focusId, \"layout position\") } : {}),\n  };\n}\n\nexport function GraphDiagram({\n  nodes,\n  edges,\n  layout = \"ring\",\n  selectedId,\n  onNodeSelect,\n  onNodeExpand,\n  selectedEdgeId,\n  onEdgeSelect,\n  edgeFocus = \"auto\",\n  groups,\n  nodeWidth = DEFAULT_NODE_WIDTH,\n  nodeHeight = DEFAULT_NODE_HEIGHT,\n  columnGap,\n  rowGap,\n  zoomable = false,\n  fitMinScale,\n  focusId,\n  maxHeight,\n  ariaLabel,\n  className,\n}: GraphDiagramProps) {\n  assertEdgesReferenceKnownNodes(nodes, edges);\n  const markerPrefix = `graph-diagram-${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n\n  const { width, height, positions, groups: groupBoxes } = useMemo(\n    () => layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, columnGap, rowGap }),\n    [layout, nodes, edges, nodeWidth, nodeHeight, columnGap, rowGap],\n  );\n  const routes = useMemo(\n    () =>\n      routeEdges(edges, positions, { nodeWidth, nodeHeight }, { anchor: layout === \"columns\" ? \"side\" : \"center\" }),\n    [edges, positions, nodeWidth, nodeHeight, layout],\n  );\n\n  const panZoom = usePanZoom({\n    enabled: zoomable,\n    contentWidth: width,\n    contentHeight: height,\n    opening: openingFit(positions, fitMinScale, focusId),\n  });\n  const natural = layout === \"columns\" || zoomable;\n  const place: GraphPlacer = natural\n    ? ({ x, y }) => ({ left: x, top: y })\n    : ({ x, y }) => ({ left: toPercent(x, width), top: toPercent(y, height) });\n  const focus = useEdgeFocus({ mode: edgeFocus, edges, selectedId, selectedEdgeId });\n  const edgeSelection = { selectedEdgeId, onEdgeSelect, focus: focus.state };\n\n  return (\n    <div\n      ref={panZoom.viewportRef}\n      className={cn(\n        \"w-full\",\n        zoomable ? \"relative touch-none overflow-hidden\" : \"overflow-auto\",\n        zoomable && (panZoom.panning ? \"cursor-grabbing select-none\" : \"cursor-grab\"),\n        className,\n      )}\n      style={maxHeight != null ? { maxHeight } : undefined}\n      {...panZoom.handlers}\n    >\n      <div\n        ref={panZoom.contentRef}\n        data-graph-stage=\"\"\n        className={cn(\"relative\", natural ? !zoomable && \"mx-auto\" : \"w-full\")}\n        style={stageStyle({ width, height }, natural, zoomable ? panZoom : undefined)}\n      >\n        <GraphDiagramGroupBoxes boxes={groupBoxes} groups={groups} />\n        <GraphDiagramEdgePaths\n          edges={edges}\n          nodes={nodes}\n          routes={routes}\n          width={width}\n          height={height}\n          ariaLabel={ariaLabel}\n          markerPrefix={markerPrefix}\n          onEdgeHover={focus.onEdgeHover}\n          {...edgeSelection}\n        />\n        <div className=\"pointer-events-none absolute inset-0\">\n          <GraphDiagramEdgeLabels edges={edges} routes={routes} place={place} spread={natural} {...edgeSelection} />\n          <GraphDiagramNodes\n            nodes={nodes}\n            positions={positions}\n            place={place}\n            nodeWidth={nodeWidth}\n            nodeHeight={nodeHeight}\n            selectedId={selectedId}\n            onNodeSelect={onNodeSelect}\n            onNodeExpand={onNodeExpand}\n            onNodeHover={focus.onNodeHover}\n          />\n        </div>\n      </div>\n      {zoomable && <ZoomControls panZoom={panZoom} resettable={fitMinScale !== undefined} />}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"GraphDiagram.js","sources":["../../src/data/GraphDiagram.tsx"],"sourcesContent":["import { useId, useMemo, type CSSProperties } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { IconButton } from \"../components/IconButton\";\nimport { UiFullscreen, UiHome, UiZoomIn, UiZoomOut } from \"../icons\";\nimport { columnsLayout, type ColumnsLayoutResult } from \"./graph-columns-layout\";\nimport { ringLayout, routeEdges, type GraphLayoutPosition } from \"./graph-layout\";\nimport { GraphDiagramEdgeLabels, GraphDiagramEdgePaths } from \"./GraphDiagramEdges\";\nimport { GraphDiagramGroupBoxes, GraphDiagramNodes } from \"./GraphDiagramNodes\";\nimport {\n  requireEntry,\n  type GraphDiagramEdge,\n  type GraphDiagramEdgeFocus,\n  type GraphDiagramGroup,\n  type GraphDiagramLayout,\n  type GraphDiagramNode,\n  type GraphPlacer,\n} from \"./graph-diagram-model\";\nimport { useEdgeFocus } from \"./use-edge-focus\";\nimport { usePanZoom, type FitOptions, type PanZoom, type WheelMode } from \"./use-pan-zoom\";\n\nexport type {\n  GraphDiagramEdge,\n  GraphDiagramEdgeFocus,\n  GraphDiagramGroup,\n  GraphDiagramLayout,\n  GraphDiagramNode,\n} from \"./graph-diagram-model\";\n\n// GraphDiagram renders a generic, type-agnostic node/edge diagram. It knows\n// nothing about the domain: a producer maps its data into\n// GraphDiagramNode/GraphDiagramEdge and gets layout, edge routing and\n// selection behaviour.\n//\n// \"ring\" suits a small cycle of resources and processes — relationships with\n// back edges or reciprocal pairs. \"columns\" suits a directed graph with a\n// natural depth (a call graph, a dependency chain): nodes sit in the column of\n// their `level`, grouped and boxed by `group`.\n//\n// The \"columns\" layout, and any zoomable diagram, is drawn at its natural\n// pixel size so node boxes, edges and group boxes share one coordinate system\n// at every container width and zoom level. A non-zoomable \"ring\" keeps scaling\n// its node positions to the container width.\n\nexport interface GraphDiagramProps {\n  nodes: GraphDiagramNode[];\n  edges: GraphDiagramEdge[];\n  /** Defaults to \"ring\". \"columns\" needs a `level` on every node. */\n  layout?: GraphDiagramLayout;\n  selectedId?: string;\n  onNodeSelect?: (id: string) => void;\n  /** Called by a node's `+N` control (see `expandCount`); does not select the node. */\n  onNodeExpand?: (id: string) => void;\n  selectedEdgeId?: string;\n  /** Makes edges, and their label pills, selectable. */\n  onEdgeSelect?: (id: string) => void;\n  /**\n   * Whether an edge shows its pill only while in focus, and fades while another is. Defaults to\n   * \"auto\": a diagram with more than 32 edges is focused, a smaller one shows everything.\n   */\n  edgeFocus?: GraphDiagramEdgeFocus;\n  /** \"columns\" layout: captions for the group rectangles. A group without an entry shows its id. */\n  groups?: GraphDiagramGroup[];\n  nodeWidth?: number;\n  nodeHeight?: number;\n  /**\n   * \"columns\" layout: the height of a node with `size: \"compact\"`, drawn on one line. A group of only\n   * compact nodes stacks them closer and pads them tighter. Defaults to 24.\n   */\n  compactNodeHeight?: number;\n  /** \"columns\" layout: horizontal gap between columns in px. Leave room for edge label pills. */\n  columnGap?: number;\n  /** \"columns\" layout: vertical gap between stacked nodes in px. */\n  rowGap?: number;\n  /** Ctrl/meta + wheel (or pinch) zooms, dragging the background pans, and zoom controls appear. */\n  zoomable?: boolean;\n  /** Zoomable: \"zoom\" makes a plain mouse wheel zoom too, for a diagram that fills its pane. Defaults to \"modifier\". */\n  wheelZoom?: WheelMode;\n  /**\n   * Zoomable: the smallest scale the diagram opens at, so its text stays readable. A diagram too\n   * large for it opens overflowing, centred on `focusId`, and is panned to reach the rest. `Fit to\n   * view` still shows everything, and `Reset view` returns here. Unset, the diagram opens whole.\n   */\n  fitMinScale?: number;\n  /** Zoomable: the node an overflowing diagram opens centred on. Defaults to the diagram's centre. */\n  focusId?: string;\n  maxHeight?: number | string;\n  ariaLabel: string;\n  className?: string;\n}\n\nconst DEFAULT_NODE_WIDTH = 168;\nconst DEFAULT_NODE_HEIGHT = 60;\nconst DEFAULT_COMPACT_NODE_HEIGHT = 24;\n\ninterface LayoutOptions {\n  layout: GraphDiagramLayout;\n  nodeWidth: number;\n  nodeHeight: number;\n  compactNodeHeight: number;\n  columnGap: number | undefined;\n  rowGap: number | undefined;\n}\n\n/** The heights of the nodes not drawn at the node height: the compact ones, in the \"columns\" layout. */\nfunction compactHeights(nodes: GraphDiagramNode[], layout: GraphDiagramLayout, compactNodeHeight: number): Record<string, number> {\n  if (layout !== \"columns\") return {};\n  return Object.fromEntries(nodes.filter((node) => node.size === \"compact\").map((node) => [node.id, compactNodeHeight]));\n}\n\nfunction assertEdgesReferenceKnownNodes(nodes: GraphDiagramNode[], edges: GraphDiagramEdge[]): void {\n  const ids = new Set(nodes.map((node) => node.id));\n  for (const edge of edges) {\n    if (!ids.has(edge.from)) {\n      throw new Error(`GraphDiagram: edge \"${edge.id}\" references unknown node \"${edge.from}\"`);\n    }\n    if (!ids.has(edge.to)) {\n      throw new Error(`GraphDiagram: edge \"${edge.id}\" references unknown node \"${edge.to}\"`);\n    }\n  }\n}\n\nfunction requireLevel(node: GraphDiagramNode): number {\n  if (node.level === undefined || !Number.isFinite(node.level)) {\n    throw new Error(`GraphDiagram: node \"${node.id}\" needs a finite level for the \"columns\" layout`);\n  }\n  return node.level;\n}\n\nfunction layoutNodes(\n  nodes: GraphDiagramNode[],\n  edges: GraphDiagramEdge[],\n  { layout, nodeWidth, nodeHeight, compactNodeHeight, columnGap, rowGap }: LayoutOptions,\n): ColumnsLayoutResult {\n  switch (layout) {\n    case \"ring\":\n      return { ...ringLayout(nodes, { nodeWidth, nodeHeight }), groups: [] };\n    case \"columns\":\n      return columnsLayout(\n        nodes.map((node) => ({\n          id: node.id,\n          level: requireLevel(node),\n          ...(node.group !== undefined ? { group: node.group } : {}),\n          ...(node.size === \"compact\" ? { compact: true } : {}),\n        })),\n        edges,\n        {\n          nodeWidth,\n          nodeHeight,\n          compactNodeHeight,\n          ...(columnGap !== undefined ? { columnGap } : {}),\n          ...(rowGap !== undefined ? { rowGap } : {}),\n        },\n      );\n    default:\n      throw new Error(`GraphDiagram: unknown layout \"${layout satisfies never}\"`);\n  }\n}\n\nfunction toPercent(value: number, extent: number): string {\n  return `${(value / extent) * 100}%`;\n}\n\nfunction stageStyle(size: { width: number; height: number }, natural: boolean, panZoom: PanZoom | undefined): CSSProperties {\n  if (!natural) return { aspectRatio: `${size.width} / ${size.height}` };\n  if (!panZoom) return size;\n  const { x, y, scale } = panZoom.transform;\n  return { ...size, transform: `translate(${x}px, ${y}px) scale(${scale})`, transformOrigin: \"0 0\" };\n}\n\n/** `resettable`: the diagram opens at another view than the whole of it, so there is one to return to. */\nfunction ZoomControls({ panZoom, resettable }: { panZoom: PanZoom; resettable: boolean }) {\n  return (\n    <div className=\"absolute right-2 top-2 flex cursor-default gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-sm\">\n      <IconButton icon={UiZoomOut} label=\"Zoom out\" className=\"size-6\" onClick={panZoom.zoomOut} />\n      <IconButton icon={UiZoomIn} label=\"Zoom in\" className=\"size-6\" onClick={panZoom.zoomIn} />\n      <IconButton icon={UiFullscreen} label=\"Fit to view\" className=\"size-6\" onClick={panZoom.fit} />\n      {resettable && <IconButton icon={UiHome} label=\"Reset view\" className=\"size-6\" onClick={panZoom.reset} />}\n    </div>\n  );\n}\n\n/** How a zoomable diagram opens: no smaller than `fitMinScale`, centred on the `focusId` node. */\nfunction openingFit(\n  positions: Record<string, GraphLayoutPosition>,\n  fitMinScale: number | undefined,\n  focusId: string | undefined,\n): FitOptions {\n  return {\n    ...(fitMinScale !== undefined ? { minScale: fitMinScale } : {}),\n    ...(focusId !== undefined ? { focus: requireEntry(positions, focusId, \"layout position\") } : {}),\n  };\n}\n\nexport function GraphDiagram({\n  nodes,\n  edges,\n  layout = \"ring\",\n  selectedId,\n  onNodeSelect,\n  onNodeExpand,\n  selectedEdgeId,\n  onEdgeSelect,\n  edgeFocus = \"auto\",\n  groups,\n  nodeWidth = DEFAULT_NODE_WIDTH,\n  nodeHeight = DEFAULT_NODE_HEIGHT,\n  compactNodeHeight = DEFAULT_COMPACT_NODE_HEIGHT,\n  columnGap,\n  rowGap,\n  zoomable = false,\n  wheelZoom = \"modifier\",\n  fitMinScale,\n  focusId,\n  maxHeight,\n  ariaLabel,\n  className,\n}: GraphDiagramProps) {\n  assertEdgesReferenceKnownNodes(nodes, edges);\n  const markerPrefix = `graph-diagram-${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n\n  const { width, height, positions, groups: groupBoxes } = useMemo(\n    () => layoutNodes(nodes, edges, { layout, nodeWidth, nodeHeight, compactNodeHeight, columnGap, rowGap }),\n    [layout, nodes, edges, nodeWidth, nodeHeight, compactNodeHeight, columnGap, rowGap],\n  );\n  const nodeHeights = useMemo(() => compactHeights(nodes, layout, compactNodeHeight), [nodes, layout, compactNodeHeight]);\n  const routes = useMemo(\n    () =>\n      routeEdges(edges, positions, { nodeWidth, nodeHeight, nodeHeights }, { anchor: layout === \"columns\" ? \"side\" : \"center\" }),\n    [edges, positions, nodeWidth, nodeHeight, nodeHeights, layout],\n  );\n\n  const panZoom = usePanZoom({\n    enabled: zoomable,\n    wheel: wheelZoom,\n    contentWidth: width,\n    contentHeight: height,\n    opening: openingFit(positions, fitMinScale, focusId),\n  });\n  const natural = layout === \"columns\" || zoomable;\n  const place: GraphPlacer = natural\n    ? ({ x, y }) => ({ left: x, top: y })\n    : ({ x, y }) => ({ left: toPercent(x, width), top: toPercent(y, height) });\n  const focus = useEdgeFocus({ mode: edgeFocus, edges, selectedId, selectedEdgeId });\n  const edgeSelection = { selectedEdgeId, onEdgeSelect, focus: focus.state };\n\n  return (\n    <div\n      ref={panZoom.viewportRef}\n      className={cn(\n        \"w-full\",\n        zoomable ? \"relative touch-none overflow-hidden\" : \"overflow-auto\",\n        zoomable && (panZoom.panning ? \"cursor-grabbing select-none\" : \"cursor-grab\"),\n        className,\n      )}\n      style={maxHeight != null ? { maxHeight } : undefined}\n      {...panZoom.handlers}\n    >\n      <div\n        ref={panZoom.contentRef}\n        data-graph-stage=\"\"\n        className={cn(\"relative\", natural ? !zoomable && \"mx-auto\" : \"w-full\")}\n        style={stageStyle({ width, height }, natural, zoomable ? panZoom : undefined)}\n      >\n        <GraphDiagramGroupBoxes boxes={groupBoxes} groups={groups} />\n        <GraphDiagramEdgePaths\n          edges={edges}\n          nodes={nodes}\n          routes={routes}\n          width={width}\n          height={height}\n          ariaLabel={ariaLabel}\n          markerPrefix={markerPrefix}\n          onEdgeHover={focus.onEdgeHover}\n          {...edgeSelection}\n        />\n        <div className=\"pointer-events-none absolute inset-0\">\n          <GraphDiagramEdgeLabels edges={edges} routes={routes} place={place} spread={natural} {...edgeSelection} />\n          <GraphDiagramNodes\n            nodes={nodes}\n            positions={positions}\n            place={place}\n            nodeWidth={nodeWidth}\n            nodeHeight={nodeHeight}\n            nodeHeights={nodeHeights}\n            selectedId={selectedId}\n            onNodeSelect={onNodeSelect}\n            onNodeExpand={onNodeExpand}\n            onNodeHover={focus.onNodeHover}\n          />\n        </div>\n      </div>\n      {zoomable && <ZoomControls panZoom={panZoom} resettable={fitMinScale !== undefined} />}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}