/**
 * Single MermaidDiagram for the unified markdown engine (dark theme only —
 * the old RichMarkdownRenderer's light-theme branch was dead code behind a
 * hardcoded `isDarkMode = true` and is deleted, not carried over).
 *
 * `mermaid` stays a dynamic import so neither chat nor content bundles pay
 * for it unless a diagram is actually rendered.
 */
import React from 'react';
/**
 * SECURITY SSOT for the mermaid renderer — the ONLY place these knobs are
 * written. `./__tests__/mermaid-security.test.ts` imports THIS constant and
 * spreads it into its own `mermaid.initialize`, so the fixture and the
 * component can no longer drift: flipping `securityLevel` to `'loose'` here
 * fails the suite (verified by doing exactly that).
 *
 * This renderer sits on the CHAT path, so the diagram source is MODEL output
 * — untrusted by construction — and the rendered SVG goes through
 * `dangerouslySetInnerHTML`. The pre-unification renderer used `'loose'`,
 * which permits raw HTML inside labels and enables mermaid's `click`
 * interaction directive: a node label like `A["<img src=x onerror=...>"]`
 * would have produced LIVE HTML.
 *
 *  - `securityLevel: 'strict'` encodes HTML tags in text and disables click
 *    handlers.
 *  - `htmlLabels: false` renders labels as SVG `<text>` instead of a
 *    foreignObject HTML subtree, so there is no HTML surface at all. Verified:
 *    no authored diagram in this repo or in the consuming hub's markdown uses
 *    HTML labels (not even `<br/>`), so 'antiscript' (which still allows tags)
 *    is not needed. (`htmlLabels` is set at the ROOT — `flowchart.htmlLabels`
 *    is deprecated in mermaid 11 and the root value takes precedence.)
 *  - `secure` is the allowlist of config keys a `%%{init}%%` directive in the
 *    diagram SOURCE may NOT override. mermaid's default list covers
 *    `securityLevel` but NOT `htmlLabels`, so model-authored source could
 *    otherwise re-enable HTML labels while `securityLevel` stayed locked.
 *    Adding `htmlLabels` (plus `secure` itself and the resource limits) closes
 *    that hole.
 *
 * jsdom NOTE: with `htmlLabels` unlocked, a `%%{init: {"htmlLabels": true}}%%`
 * directive was observed to make `mermaid.render` never settle under jsdom
 * (>60s, against a passing two-render control). This was NOT reproduced in a
 * real browser and may well be an artifact of jsdom having no layout — do not
 * read it as a confirmed browser DoS. Either way the render below is wrapped
 * in a timeout so a non-settling render surfaces the error state instead of
 * sitting on "Rendering diagram…" forever.
 */
export declare const MERMAID_SECURITY_OPTIONS: {
    htmlLabels: false;
    securityLevel: "strict";
    secure: string[];
};
/** Upper bound on a single `mermaid.render`. Generous enough that no honest
 *  diagram hits it; short enough that a wedged render becomes a visible error
 *  instead of a permanent skeleton. */
export declare const MERMAID_RENDER_TIMEOUT_MS = 15000;
/**
 * ODS-TOKENS FLAG (ODS_TOKEN_RULES §Colors / §Typography / §General):
 * `mermaidStyles` below and the `themeVariables` / `fontFamily` / `fontSize`
 * block in `MermaidDiagram` carry RAW hex colors, a literal font-family and
 * literal px font sizes.
 *
 * Reason: mermaid's configuration is not CSS — `themeVariables` is a
 * JavaScript API whose values are baked into the generated SVG as literal
 * attribute strings, so a `var(--color-…)` reference resolves to nothing
 * there. On top of that, ODS has NO 10-step categorical color ramp, and
 * mermaid's `cScale0…cScale9` requires exactly one. The palette is carried
 * over VERBATIM from the pre-unification RichMarkdownRenderer, so this is
 * parity, not new divergence; the missing categorical-ramp tokens are
 * flagged here for addition to ODS.
 *
 * Scope: this exemption covers THIS file only, and only the mermaid config
 * surface. Do NOT copy this pattern — every other style in the markdown
 * module uses ODS semantic classes.
 */
export declare const mermaidStyles = "\n  .mermaid-svg-container svg {\n    max-width: 100% !important;\n    height: auto !important;\n    min-height: 200px;\n    font-family: 'DM Sans', sans-serif !important;\n    font-size: 14px !important;\n  }\n  @media (min-width: 1520px) {\n    .mermaid-svg-container svg {\n      max-width: 900px !important;\n      max-height: 700px !important;\n      min-height: 300px;\n      font-size: 16px !important;\n    }\n  }\n  @media (min-width: 768px) and (max-width: 1519px) {\n    .mermaid-svg-container svg {\n      max-width: 700px !important;\n      max-height: 600px !important;\n      min-height: 250px;\n      font-size: 15px !important;\n    }\n  }\n  @media (max-width: 767px) {\n    .mermaid-svg-container svg {\n      max-width: 90vw !important;\n      max-height: 400px !important;\n      min-height: 200px;\n      font-size: 13px !important;\n    }\n  }\n  .mermaid-svg-container svg[width] { width: 100% !important; }\n  .mermaid-svg-container .node rect,\n  .mermaid-svg-container .node circle,\n  .mermaid-svg-container .node ellipse,\n  .mermaid-svg-container .node polygon { stroke-width: 2px !important; }\n  .mermaid-svg-container .edgePath path { stroke-width: 2px !important; }\n  @media (min-width: 768px) {\n    .mermaid-svg-container .node text,\n    .mermaid-svg-container .edgeLabel text { font-size: 14px !important; }\n  }\n  @media (min-width: 1520px) {\n    .mermaid-svg-container .node text,\n    .mermaid-svg-container .edgeLabel text { font-size: 16px !important; }\n  }\n";
export declare const MermaidDiagram: React.FC<{
    chart: string;
}>;
//# sourceMappingURL=mermaid-diagram.d.ts.map