/**
 * Shared helpers for fgraph topology renderers.
 * - HTML document shell (header + main + style block)
 * - common SVG arrow markers + base CSS shared across all 4 topologies
 *
 * Aesthetic CSS loading lives in src/utils/aesthetic-loader.ts so the chart
 * renderers (and any future deterministic renderer) can reuse it without
 * reaching across template directories.
 */
export { loadAestheticCss } from "../../utils/aesthetic-loader.js";
export declare const ARROW_MARKER_DEFS = "\n    <defs>\n      <marker id=\"fg-arr-amber\"  viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto\"><path d=\"M0,0 L10,5 L0,10 z\" class=\"mk-amber\"/></marker>\n      <marker id=\"fg-arr-cyan\"   viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto\"><path d=\"M0,0 L10,5 L0,10 z\" class=\"mk-cyan\"/></marker>\n      <marker id=\"fg-arr-purple\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto\"><path d=\"M0,0 L10,5 L0,10 z\" class=\"mk-purple\"/></marker>\n      <marker id=\"fg-arr-green\"  viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto\"><path d=\"M0,0 L10,5 L0,10 z\" class=\"mk-green\"/></marker>\n      <marker id=\"fg-arr-red\"    viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto\"><path d=\"M0,0 L10,5 L0,10 z\" class=\"mk-red\"/></marker>\n      <marker id=\"fg-arr-amber-bi\"  viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto-start-reverse\"><path d=\"M0,0 L10,5 L0,10 z\" class=\"mk-amber\"/></marker>\n      <marker id=\"fg-arr-cyan-bi\"   viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto-start-reverse\"><path d=\"M0,0 L10,5 L0,10 z\" class=\"mk-cyan\"/></marker>\n      <marker id=\"fg-arr-purple-bi\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto-start-reverse\"><path d=\"M0,0 L10,5 L0,10 z\" class=\"mk-purple\"/></marker>\n      <marker id=\"fg-arr-green-bi\"  viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto-start-reverse\"><path d=\"M0,0 L10,5 L0,10 z\" class=\"mk-green\"/></marker>\n      <marker id=\"fg-arr-red-bi\"    viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto-start-reverse\"><path d=\"M0,0 L10,5 L0,10 z\" class=\"mk-red\"/></marker>\n    </defs>";
/**
 * CSS shared by all 4 topologies — body shell + header + arrow tones +
 * arrowhead fills + edge label primitives. Per-topology CSS is appended
 * by each renderer.
 */
export declare const BASE_DIAGRAM_CSS = "\n  body {\n    background: var(--bg);\n    color: var(--text);\n    font-family: 'Inter', system-ui, sans-serif;\n    padding: 32px 24px 40px;\n    max-width: 960px;\n    margin: 0 auto;\n  }\n  header { margin-bottom: 20px; }\n  .header-eyebrow {\n    font-family: 'Space Mono', monospace;\n    font-size: 11px;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--text-muted);\n  }\n  h1 { font-size: 28px; font-weight: 700; margin: 6px 0 4px; font-family: 'Outfit', sans-serif; }\n  h1 .accent { color: var(--cyan); }\n  .header-subtitle { color: var(--text-dim); font-size: 13px; margin: 0; max-width: 740px; }\n\n  .fgraph-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 1; }\n  .fgraph-edges .fg-edge { fill: none; stroke-width: 1.6; opacity: 0.95; vector-effect: non-scaling-stroke; }\n  .fgraph-edges .fg-edge.amber  { stroke: var(--amber); }\n  .fgraph-edges .fg-edge.cyan   { stroke: var(--cyan); }\n  .fgraph-edges .fg-edge.purple { stroke: var(--purple); }\n  .fgraph-edges .fg-edge.green  { stroke: var(--green); }\n  .fgraph-edges .fg-edge.red    { stroke: var(--red); }\n  .fgraph-edges .fg-edge.dashed { stroke-dasharray: 4 3; }\n  .fgraph-edges .fg-edge.thick  { stroke-width: 2.6; }\n  .fgraph-edges .mk-amber  { fill: var(--amber); }\n  .fgraph-edges .mk-cyan   { fill: var(--cyan); }\n  .fgraph-edges .mk-purple { fill: var(--purple); }\n  .fgraph-edges .mk-green  { fill: var(--green); }\n  .fgraph-edges .mk-red    { fill: var(--red); }\n\n  .fgraph-lbl {\n    position: absolute;\n    left: calc(var(--x, 50) * 1%);\n    top:  calc(var(--y, 50) * 1%);\n    transform: translate(-50%, -50%);\n    font-family: 'Space Mono', monospace;\n    font-size: 9.5px;\n    font-weight: 700;\n    padding: 2px 6px;\n    background: var(--bg-panel);\n    border-radius: 3px;\n    pointer-events: none;\n    white-space: nowrap;\n    z-index: 3;\n  }\n  .fgraph-lbl.amber  { color: var(--amber); }\n  .fgraph-lbl.cyan   { color: var(--cyan); }\n  .fgraph-lbl.purple { color: var(--purple); }\n  .fgraph-lbl.green  { color: var(--green); }\n  .fgraph-lbl.red    { color: var(--red); }\n  .fgraph-lbl .dim   { color: var(--text-muted); font-weight: 400; }\n\n  .fgraph-legend {\n    position: absolute;\n    bottom: 10px;\n    left: 0;\n    right: 0;\n    text-align: center;\n    font-family: 'Space Mono', monospace;\n    font-size: 9.5px;\n    color: var(--text-muted);\n    pointer-events: none;\n  }";
export interface DocumentShellInput {
    title: string;
    eyebrow: string;
    subtitle?: string | undefined;
    aestheticCss: string;
    topologyCss: string;
    bodyHtml: string;
}
/**
 * Wrap a topology body in the standard fgraph HTML shell (DOCTYPE, head,
 * inlined Google fonts, aesthetic + base + per-topology CSS, header, body).
 * Returns a single-file offline-safe HTML string.
 */
export declare function renderDocumentShell({ title, eyebrow, subtitle, aestheticCss, topologyCss, bodyHtml, }: DocumentShellInput): string;
//# sourceMappingURL=_shared.d.ts.map