@grafloria/element 0.3.18 → 0.3.20

package/src/libs/renderer/src/canvas/render-backend.d.ts

@@ -0,0 +1,133 @@
+import type { DiagramEngine } from '@grafloria/engine';
+import type { Rectangle } from '../types/geometry.types';
+import type { SVGRendererConfig } from '../types/renderer.interface';
+import type { Theme } from '../types/theme.types';
+import type { VNode } from '../types/vnode.types';
+import { SVGRenderer } from '../svg/svg-renderer';
+import { CanvasRenderer, type CanvasPick } from './canvas-renderer';
+import { type CanvasHazard, type CanvasSafety } from './tier-policy';
+export type BackendMode = 'svg' | 'canvas';
+export interface RenderBackendOptions {
+    /** Initial backend. Default 'svg' — the historical behaviour. */
+    mode?: BackendMode;
+    theme?: Theme;
+    /** Config for the shared VNode producer. */
+    producerConfig?: SVGRendererConfig;
+    devicePixelRatio?: number;
+    enableHitDetection?: boolean;
+    enableDirtyRegions?: boolean;
+    /**
+     * Wave 8 — Card 5: REFUSE a switch to canvas that would take something away.
+     *
+     * Canvas mode has no accessibility semantics, cannot paint HTML nodes, and drops DOM
+     * focus when it swaps the element out. Since wave 4, `setMode('canvas')` has done all
+     * three silently. With this on (the default), it refuses instead, and says why.
+     *
+     * `setMode(mode, { force: true })` overrides — a host that means it can still have it.
+     */
+    guardCanvas?: boolean;
+    /** Told when the backend refuses a canvas switch, and what it would have cost. */
+    onCanvasRefused?: (event: CanvasRefusedEvent) => void;
+}
+export interface CanvasRefusedEvent {
+    hazards: readonly CanvasHazard[];
+    explanation: string;
+}
+/**
+ * One diagram, two backends, one VNode tree.
+ *
+ * The host owns a container element; the backend owns whatever goes inside it
+ * (`<svg>` or `<canvas>`) and swaps that out on `setMode`.
+ */
+export declare class DiagramRenderBackend {
+    private mode;
+    private readonly engine;
+    private readonly container;
+    private readonly options;
+    /** THE producer. Shared by both backends; never rebuilt on a mode switch. */
+    private readonly producer;
+    private theme;
+    private svgElement;
+    private patcher;
+    private canvasElement;
+    private canvasRenderer;
+    private readonly resolver;
+    private readonly painter;
+    private lastTree;
+    private hitRecords;
+    private lastViewport;
+    private lastZoom;
+    private disposed;
+    /** Refuse a canvas switch that would cost this diagram its a11y, focus or HTML nodes. */
+    private readonly guardCanvas;
+    /**
+     * The host has declared an assistive-technology surface live for this diagram.
+     * Explicit, and additionally AUTO-DETECTED from the outline view's DOM marker.
+     */
+    private a11yActive;
+    constructor(engine: DiagramEngine, container: Element, options?: RenderBackendOptions);
+    getMode(): BackendMode;
+    /** The renderer currently driving the picture. */
+    getRenderer(): SVGRenderer | CanvasRenderer;
+    /** The shared VNode producer (identical object in both modes). */
+    getProducer(): SVGRenderer;
+    /**
+     * Switch backend on a LIVE diagram. The producer, the engine, the theme and
+     * the camera all survive; only the paint target changes. The next `render()`
+     * repaints from scratch into the new target.
+     *
+     * Wave 8 — Card 5: a switch TO canvas is now REFUSED when it would take something away
+     * (an AT surface is live, focus is inside the diagram, or the scene has HTML nodes
+     * canvas cannot paint). Returns whether the switch happened. Going back to SVG is never
+     * refused — that direction can only ever restore what canvas lacks.
+     *
+     * `setMode('canvas', { force: true })` overrides the guard. A host that has taken the
+     * decision knowingly can still have it; what it cannot do is take it by accident.
+     */
+    setMode(mode: BackendMode, options?: {
+        force?: boolean;
+    }): boolean;
+    render(viewport: Rectangle, zoom: number): VNode;
+    /** What canvas mode would cost this diagram right now. `safe` iff it would cost nothing. */
+    canvasSafety(): CanvasSafety;
+    /**
+     * Tell the backend an assistive-technology surface is live for this diagram (an outline
+     * view, a live region, keyboard navigation).
+     *
+     * While it is, `setMode('canvas')` is refused — and if we are ALREADY on canvas, this
+     * immediately returns the diagram to SVG rather than waiting for the next frame. A
+     * screen reader that arrives mid-session gets its semantics back at once.
+     */
+    setAccessibilityActive(active: boolean): void;
+    /**
+     * Is an AT surface live — declared by the host, or detected in the DOM?
+     *
+     * Detected as well as declared, deliberately. The wave-6 outline view marks its hidden
+     * AT mirror with `[data-grafloria-outline]`; if one exists, somebody is reading this diagram
+     * with assistive technology whether or not the host remembered to say so. The failure
+     * mode here is a screen-reader user silently losing their diagram, which is not a thing
+     * to leave to a host's memory.
+     */
+    private isA11yEngaged;
+    /** Does DOM focus currently sit inside the diagram? */
+    private isFocusInside;
+    /**
+     * Does the scene contain nodes the canvas backend cannot paint?
+     *
+     * Canvas has no way to rasterise a DOM subtree, so an HTML/foreignObject node simply
+     * stops being drawn. Switching with one on screen would silently delete content.
+     *
+     * Asked of the last VNODE TREE rather than of `CanvasRenderer.getUnpaintableNodes()`,
+     * because that list only exists once canvas mode has ALREADY painted — by which point
+     * the HTML node has already been dropped for a frame. The question has to be answerable
+     * from SVG mode, BEFORE we switch.
+     */
+    private hasForeignObject;
+    hitTest(worldX: number, worldY: number): CanvasPick | null;
+    setTheme(theme: Theme): void;
+    dispose(): void;
+    private mount;
+    private unmount;
+    /** Build the hit records from the last tree, lazily, and pick from them. */
+    private geometricPick;
+}

package/src/libs/renderer/src/canvas/render-backend.js

@@ -0,0 +1,339 @@
+"use strict";
+// render-backend.ts — the per-diagram, runtime-switchable backend.
+//
+//     backend.setMode('canvas')   // scale: 10k+ elements, O(1) picking
+//     backend.setMode('svg')      // text selection, accessibility, CSS, export
+//
+// Both modes are driven by ONE `SVGRenderer` — the VNode producer — which is
+// what makes the switch cheap and safe: the diagram, the styles, the routing,
+// the LOD tiers and the culling are all computed once, in a backend-agnostic
+// form, and only the CONSUMER of that tree changes:
+//
+//        DiagramEngine
+//             │
+//        SVGRenderer.render(viewport, zoom)  ──►  VNode tree
+//             │                                      │
+//             ├── svg mode ──►  VNodePatcher   ──►  SVG DOM
+//             └── canvas mode ─►  VNodePainter ──►  Canvas 2D  (+ hit canvas)
+//
+// HIT-TESTING IS SHARED. Both modes answer `hitTest(worldX, worldY)` from the
+// SAME hit records, produced from the SAME VNode tree by the SAME painter pass.
+// Canvas mode additionally has the colour-keyed pixel accelerator; when it is
+// available the two agree (asserted in the specs and in the browser e2e), and
+// when it is not, canvas mode simply uses the shared geometric path that SVG
+// mode uses. A backend switch therefore cannot change what is under the cursor.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DiagramRenderBackend = void 0;
+const themes_1 = require("../themes");
+const svg_renderer_1 = require("../svg/svg-renderer");
+const patch_1 = require("../vnode/patch");
+const canvas_renderer_1 = require("./canvas-renderer");
+const style_resolution_1 = require("./style-resolution");
+const canvas_context_1 = require("./canvas-context");
+const vnode_painter_1 = require("./vnode-painter");
+const path_geometry_1 = require("./path-geometry");
+const tier_policy_1 = require("./tier-policy");
+// The SAME predicate the painter uses to decide a node is unpaintable — so the guard
+// that refuses to step down and the painter that would have dropped the node cannot
+// disagree about what a foreignObject is.
+const foreign_object_1 = require("../vnode/foreign-object");
+/**
+ * One diagram, two backends, one VNode tree.
+ *
+ * The host owns a container element; the backend owns whatever goes inside it
+ * (`<svg>` or `<canvas>`) and swaps that out on `setMode`.
+ */
+class DiagramRenderBackend {
+    constructor(engine, container, options = {}) {
+        var _a, _b, _c;
+        // svg mode
+        this.svgElement = null;
+        this.patcher = null;
+        // canvas mode
+        this.canvasElement = null;
+        this.canvasRenderer = null;
+        this.lastTree = null;
+        this.hitRecords = null;
+        this.lastViewport = { x: 0, y: 0, width: 0, height: 0 };
+        this.lastZoom = 1;
+        this.disposed = false;
+        /**
+         * The host has declared an assistive-technology surface live for this diagram.
+         * Explicit, and additionally AUTO-DETECTED from the outline view's DOM marker.
+         */
+        this.a11yActive = false;
+        this.engine = engine;
+        this.container = container;
+        this.options = options;
+        this.mode = (_a = options.mode) !== null && _a !== void 0 ? _a : 'svg';
+        this.theme = (_b = options.theme) !== null && _b !== void 0 ? _b : themes_1.LIGHT_THEME;
+        this.guardCanvas = (_c = options.guardCanvas) !== null && _c !== void 0 ? _c : true;
+        this.producer = new svg_renderer_1.SVGRenderer(engine, options.producerConfig, this.theme);
+        this.resolver = new style_resolution_1.CanvasStyleResolver({
+            theme: this.theme,
+            varOverrides: (0, style_resolution_1.readCssVarOverrides)(container),
+        });
+        this.painter = new vnode_painter_1.VNodePainter(this.resolver);
+        this.mount();
+    }
+    getMode() {
+        return this.mode;
+    }
+    /** The renderer currently driving the picture. */
+    getRenderer() {
+        return this.mode === 'canvas' && this.canvasRenderer ? this.canvasRenderer : this.producer;
+    }
+    /** The shared VNode producer (identical object in both modes). */
+    getProducer() {
+        return this.producer;
+    }
+    /**
+     * Switch backend on a LIVE diagram. The producer, the engine, the theme and
+     * the camera all survive; only the paint target changes. The next `render()`
+     * repaints from scratch into the new target.
+     *
+     * Wave 8 — Card 5: a switch TO canvas is now REFUSED when it would take something away
+     * (an AT surface is live, focus is inside the diagram, or the scene has HTML nodes
+     * canvas cannot paint). Returns whether the switch happened. Going back to SVG is never
+     * refused — that direction can only ever restore what canvas lacks.
+     *
+     * `setMode('canvas', { force: true })` overrides the guard. A host that has taken the
+     * decision knowingly can still have it; what it cannot do is take it by accident.
+     */
+    setMode(mode, options = {}) {
+        var _a, _b;
+        if (mode === this.mode || this.disposed)
+            return false;
+        if (mode === 'canvas' && this.guardCanvas && !options.force) {
+            const safety = this.canvasSafety();
+            if (!safety.safe) {
+                const explanation = (0, tier_policy_1.explainHazards)(safety.hazards);
+                (_b = (_a = this.options).onCanvasRefused) === null || _b === void 0 ? void 0 : _b.call(_a, { hazards: safety.hazards, explanation });
+                // Loud, because the alternative is a screen-reader user silently losing their
+                // diagram and nobody finding out.
+                console.warn(`[grafloria] refusing to switch to the canvas backend: ${explanation}. ` +
+                    `Pass { force: true } to override.`);
+                return false;
+            }
+        }
+        this.unmount();
+        this.mode = mode;
+        this.mount();
+        // Re-render immediately so the switch is visible without waiting for the
+        // host's next frame (a mode toggle that leaves a blank canvas until the user
+        // pans is not a switch, it is a bug).
+        if (this.lastViewport.width > 0) {
+            this.render(this.lastViewport, this.lastZoom);
+        }
+        return true;
+    }
+    render(viewport, zoom) {
+        this.lastViewport = Object.assign({}, viewport);
+        this.lastZoom = zoom;
+        this.hitRecords = null;
+        if (this.mode === 'canvas' && this.canvasRenderer) {
+            const tree = this.canvasRenderer.render(viewport, zoom);
+            this.lastTree = tree;
+            return tree;
+        }
+        const tree = this.producer.render(viewport, zoom);
+        this.lastTree = tree;
+        if (this.patcher && this.svgElement) {
+            this.patcher.reconcile(this.svgElement, tree);
+        }
+        return tree;
+    }
+    // =========================================================================
+    // Wave 8 — Card 5: the canvas SAFETY guard
+    //
+    // Not a performance feature. The automatic far-zoom tier this card asked for was built,
+    // measured and deleted — see the header of `tier-policy.ts` for the numbers that killed
+    // it. What is left is the thing the measurement did NOT excuse: since wave 4 this class
+    // has let a host switch to canvas and silently take away a screen-reader user's entire
+    // diagram. That was true before this card and would have stayed true after it.
+    // =========================================================================
+    /** What canvas mode would cost this diagram right now. `safe` iff it would cost nothing. */
+    canvasSafety() {
+        return (0, tier_policy_1.canvasSafety)({
+            a11yActive: this.isA11yEngaged(),
+            focusInside: this.isFocusInside(),
+            hasForeignObject: this.hasForeignObject(),
+        });
+    }
+    /**
+     * Tell the backend an assistive-technology surface is live for this diagram (an outline
+     * view, a live region, keyboard navigation).
+     *
+     * While it is, `setMode('canvas')` is refused — and if we are ALREADY on canvas, this
+     * immediately returns the diagram to SVG rather than waiting for the next frame. A
+     * screen reader that arrives mid-session gets its semantics back at once.
+     */
+    setAccessibilityActive(active) {
+        this.a11yActive = active;
+        if (active && this.guardCanvas && this.mode === 'canvas') {
+            // Going back to SVG can lose nothing, so it is never guarded and never refused.
+            this.unmount();
+            this.mode = 'svg';
+            this.mount();
+            if (this.lastViewport.width > 0)
+                this.render(this.lastViewport, this.lastZoom);
+        }
+    }
+    /**
+     * Is an AT surface live — declared by the host, or detected in the DOM?
+     *
+     * Detected as well as declared, deliberately. The wave-6 outline view marks its hidden
+     * AT mirror with `[data-grafloria-outline]`; if one exists, somebody is reading this diagram
+     * with assistive technology whether or not the host remembered to say so. The failure
+     * mode here is a screen-reader user silently losing their diagram, which is not a thing
+     * to leave to a host's memory.
+     */
+    isA11yEngaged() {
+        var _a, _b;
+        if (this.a11yActive)
+            return true;
+        const scope = (_a = this.container.parentElement) !== null && _a !== void 0 ? _a : this.container;
+        return !!((_b = scope.querySelector) === null || _b === void 0 ? void 0 : _b.call(scope, '[data-grafloria-outline]'));
+    }
+    /** Does DOM focus currently sit inside the diagram? */
+    isFocusInside() {
+        const doc = this.container.ownerDocument;
+        const active = doc === null || doc === void 0 ? void 0 : doc.activeElement;
+        if (!active || active === (doc === null || doc === void 0 ? void 0 : doc.body))
+            return false;
+        return this.container.contains(active);
+    }
+    /**
+     * Does the scene contain nodes the canvas backend cannot paint?
+     *
+     * Canvas has no way to rasterise a DOM subtree, so an HTML/foreignObject node simply
+     * stops being drawn. Switching with one on screen would silently delete content.
+     *
+     * Asked of the last VNODE TREE rather than of `CanvasRenderer.getUnpaintableNodes()`,
+     * because that list only exists once canvas mode has ALREADY painted — by which point
+     * the HTML node has already been dropped for a frame. The question has to be answerable
+     * from SVG mode, BEFORE we switch.
+     */
+    hasForeignObject() {
+        return this.lastTree ? treeHasForeignObject(this.lastTree) : false;
+    }
+    hitTest(worldX, worldY) {
+        if (this.mode === 'canvas' && this.canvasRenderer) {
+            return this.canvasRenderer.pick(worldX, worldY);
+        }
+        const record = this.geometricPick(worldX, worldY);
+        return record ? { kind: record.kind, id: record.id, vnode: record.vnode } : null;
+    }
+    setTheme(theme) {
+        this.theme = theme;
+        this.resolver.setTheme(theme, (0, style_resolution_1.readCssVarOverrides)(this.container));
+        this.hitRecords = null;
+        if (this.canvasRenderer) {
+            this.canvasRenderer.setTheme(theme);
+        }
+        else {
+            this.producer.setTheme(theme);
+        }
+    }
+    dispose() {
+        if (this.disposed)
+            return;
+        this.disposed = true;
+        this.unmount();
+        this.producer.dispose();
+        this.lastTree = null;
+        this.hitRecords = null;
+    }
+    // -------------------------------------------------------------------------
+    mount() {
+        const doc = this.container.ownerDocument;
+        if (!doc)
+            return;
+        if (this.mode === 'svg') {
+            const svg = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svg.setAttribute('width', '100%');
+            svg.setAttribute('height', '100%');
+            this.container.appendChild(svg);
+            this.svgElement = svg;
+            this.patcher = new patch_1.VNodePatcher({ document: doc });
+            return;
+        }
+        const canvas = doc.createElement('canvas');
+        if (canvas.style) {
+            canvas.style['display'] = 'block';
+        }
+        this.container.appendChild(canvas);
+        this.canvasElement = canvas;
+        this.canvasRenderer = new canvas_renderer_1.CanvasRenderer(this.engine, {
+            canvas,
+            theme: this.theme,
+            // THE point of the shared producer: no second scene, no second style
+            // pipeline, no re-layout — the switch is a change of paint target only.
+            producer: this.producer,
+            devicePixelRatio: this.options.devicePixelRatio,
+            enableHitDetection: this.options.enableHitDetection,
+            enableDirtyRegions: this.options.enableDirtyRegions,
+            styleHost: this.container,
+        });
+    }
+    unmount() {
+        var _a, _b, _c;
+        if (this.svgElement) {
+            (_a = this.patcher) === null || _a === void 0 ? void 0 : _a.unmount(this.svgElement);
+            this.svgElement.remove();
+            this.svgElement = null;
+            this.patcher = null;
+        }
+        if (this.canvasRenderer) {
+            // Does NOT dispose the shared producer (CanvasRenderer only owns a
+            // producer it created itself).
+            this.canvasRenderer.dispose();
+            this.canvasRenderer = null;
+        }
+        if (this.canvasElement) {
+            (_c = (_b = this.canvasElement).remove) === null || _c === void 0 ? void 0 : _c.call(_b);
+            this.canvasElement = null;
+        }
+    }
+    /** Build the hit records from the last tree, lazily, and pick from them. */
+    geometricPick(x, y) {
+        if (!this.lastTree)
+            return null;
+        if (!this.hitRecords) {
+            this.hitRecords = this.painter.paint(canvas_context_1.NULL_CONTEXT, this.lastTree, {
+                worldToDevice: path_geometry_1.IDENTITY,
+                measureOnly: true,
+            }).hitRecords;
+        }
+        const query = { x, y };
+        for (let i = this.hitRecords.length - 1; i >= 0; i--) {
+            const record = this.hitRecords[i];
+            if (record.filled) {
+                if ((0, path_geometry_1.pointInPath)(record.cmds, query))
+                    return record;
+            }
+            else if ((0, path_geometry_1.distanceToPath)(record.cmds, query) <= record.tolerance) {
+                return record;
+            }
+        }
+        return null;
+    }
+}
+exports.DiagramRenderBackend = DiagramRenderBackend;
+/**
+ * Is there a foreignObject anywhere in this tree?
+ *
+ * Short-circuits on the first hit: one unpaintable node is enough to veto canvas, and
+ * this runs on every frame that auto-tiering is enabled.
+ */
+function treeHasForeignObject(vnode) {
+    var _a;
+    if ((0, foreign_object_1.isForeignObject)(vnode))
+        return true;
+    for (const child of (_a = vnode.children) !== null && _a !== void 0 ? _a : []) {
+        if (child && typeof child === 'object' && treeHasForeignObject(child))
+            return true;
+    }
+    return false;
+}
+//# sourceMappingURL=render-backend.js.map

package/src/libs/renderer/src/canvas/style-resolution.d.ts

@@ -0,0 +1,101 @@
+import type { Theme } from '../types/theme.types';
+import type { VNodeProps } from '../types/vnode.types';
+/** Everything the painter needs to know to draw one element. */
+export interface ComputedStyle {
+    fill?: string;
+    stroke?: string;
+    strokeWidth: number;
+    strokeDasharray?: number[];
+    /** Element opacity, already multiplied down the group chain. */
+    opacity: number;
+    fillOpacity?: number;
+    strokeOpacity?: number;
+    fontFamily: string;
+    fontSize: number;
+    fontWeight: string;
+    fontStyle: string;
+    textAnchor: 'start' | 'middle' | 'end';
+    dominantBaseline: string;
+    /** `display: none` / `visibility: hidden` → not painted at all. */
+    visible: boolean;
+    /** CSS filter string (e.g. `blur(4px)`), passed through when supported. */
+    filter?: string;
+    /** `clip-path: url(#id)` → the referenced clip id. */
+    clipPathId?: string;
+}
+/** Style values that INHERIT from a parent element in SVG. */
+export declare const INHERITED_DEFAULTS: ComputedStyle;
+/** `"2px"` / `2` / `"2"` → 2. Returns `undefined` for anything unparseable. */
+export declare function toNumber(value: unknown): number | undefined;
+/** `"5,5"` / `"5 5"` / `[5,5]` → `[5, 5]`. `"none"` → `[]`. */
+export declare function parseDashArray(value: unknown): number[] | undefined;
+/**
+ * Parse an inline `style` — the renderer emits BOTH forms: a CSS string
+ * (`"fill: red; stroke-width: 2"`, from the shape registry and the link style
+ * computation) and an object (`{ cursor: 'move' }`, from the interaction
+ * overlays). Both are normalised to kebab-case CSS declarations here.
+ */
+export declare function parseInlineStyle(style: unknown): Record<string, string>;
+/** The class tokens on an element (`className` prop, space separated). */
+export declare function classListOf(props: VNodeProps | undefined): string[];
+export interface StyleResolverOptions {
+    theme: Theme;
+    /**
+     * CSS custom-property overrides — normally read off the diagram's host element
+     * with {@link readCssVarOverrides}, so a host that redefines `--grafloria-*` in its
+     * own stylesheet gets the same paint on canvas as it does on SVG.
+     */
+    varOverrides?: Record<string, string>;
+}
+/**
+ * Resolves VNode props → concrete paint values, reproducing the SVG cascade.
+ * The CLASS-RULE layer is the export card's flattener; this adds priority order,
+ * inheritance and typed parsing on top.
+ */
+export declare class CanvasStyleResolver {
+    private theme;
+    private classRules;
+    /** Declarations dropped because a variable could not be resolved. */
+    readonly warnings: string[];
+    constructor(options: StyleResolverOptions);
+    /**
+     * Build the class-rule resolver for a theme.
+     *
+     * `createClassStyleResolver` bakes `resolveThemeVars(theme)` in, so the honest
+     * way to honour a host's `--grafloria-*` OVERRIDES is to hand it a theme that reads
+     * back the overridden values — rather than forking the flattener, or
+     * post-processing its output (which could not tell a colour that came from an
+     * overridden token apart from an identical colour that did not).
+     */
+    private compile;
+    setTheme(theme: Theme, varOverrides?: Record<string, string>): void;
+    getTheme(): Theme;
+    /** The root style every diagram starts from (theme font, no paint inherited). */
+    rootStyle(): ComputedStyle;
+    /**
+     * Compute an element's style: inherit from the parent, then apply
+     * presentation attributes < matched class rules < inline style.
+     */
+    resolve(props: VNodeProps | undefined, inherited: ComputedStyle): ComputedStyle;
+}
+/**
+ * Read the `--grafloria-*` values ACTUALLY COMPUTED on a host element.
+ *
+ * This is what makes canvas mode honour a host that overrides the theme through
+ * CSS (`.dark-mode [data-grafloria-instance] { --grafloria-node-fill: #222 }`) — the
+ * variable is resolved by the browser's own cascade and handed to the canvas
+ * resolver as a concrete value. Returns `{}` in a headless environment.
+ */
+export declare function readCssVarOverrides(element: Element | null | undefined): Record<string, string>;
+/** Build the canvas `font` shorthand from a resolved style. */
+export declare function fontString(style: ComputedStyle): string;
+/** SVG `text-anchor` → canvas `textAlign`. */
+export declare function textAlignFor(anchor: ComputedStyle['textAnchor']): CanvasTextAlign;
+/**
+ * SVG `dominant-baseline` → canvas `textBaseline`.
+ *
+ * The renderer only ever emits `middle` (centred labels), `hanging` (top-aligned
+ * text blocks) and `baseline`; anything else falls back to the canvas default,
+ * which is what an unset `dominant-baseline` means in SVG too.
+ */
+export declare function textBaselineFor(baseline: string | undefined): CanvasTextBaseline;