@grafloria/element 0.3.18 → 0.3.19

package/src/libs/renderer/src/a11y/index.js

@@ -0,0 +1,30 @@
+"use strict";
+/**
+ * The ACCESSIBILITY layer (wave 6).
+ *
+ * Framework-free, like the rest of `libs/renderer`. The Angular canvas is a
+ * thin host: it constructs these controllers, hands them a container element
+ * and the engine, and forwards key events. All the policy lives here.
+ *
+ *  - `semantics`          — roles, roledescriptions and accessible names. Pure
+ *                           functions the RENDERER calls while building the
+ *                           VNode tree, so the semantics survive SSR + export.
+ *  - `graph-topology`     — entry points, terminals, cycles, components,
+ *                           incident-edge ordering. The structural facts.
+ *  - `diagram-outline`    — the outline model + natural-language summary.
+ *  - `outline-view`       — the hidden, AT-navigable DOM text mirror.
+ *  - `live-region`        — the managed, de-duplicated aria-live region.
+ *  - `focus-containment`  — focus never rests on off-screen geometry.
+ *  - `reduced-motion`     — the reduced-motion stylesheet, and the code that
+ *                           actually INJECTS it (it used to be a dead file).
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./semantics"), exports);
+tslib_1.__exportStar(require("./graph-topology"), exports);
+tslib_1.__exportStar(require("./diagram-outline"), exports);
+tslib_1.__exportStar(require("./outline-view"), exports);
+tslib_1.__exportStar(require("./live-region"), exports);
+tslib_1.__exportStar(require("./focus-containment"), exports);
+tslib_1.__exportStar(require("./reduced-motion"), exports);
+//# sourceMappingURL=index.js.map

package/src/libs/renderer/src/a11y/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../renderer/src/a11y/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;GAkBG;;;AAEH,sDAA4B;AAC5B,2DAAiC;AACjC,4DAAkC;AAClC,yDAA+B;AAC/B,wDAA8B;AAC9B,8DAAoC;AACpC,2DAAiC"}

package/src/libs/renderer/src/a11y/live-region.d.ts

@@ -0,0 +1,83 @@
+/**
+ * The managed `aria-live` REGION — the canvas's voice.
+ *
+ * Two live regions, not one: an AT will not reliably re-announce a node whose
+ * politeness changed, and mixing an error into the polite queue means it waits
+ * behind whatever selection chatter is already in flight. So:
+ *
+ *   - `polite`    — selection, movement, focus, connect/disconnect;
+ *   - `assertive` — validation failures and errors, which interrupt.
+ *
+ * DE-DUPLICATION is the whole design problem. A naive live region wired to a
+ * render loop says "Process node, 2 connections" sixty times a second and is
+ * worse than useless — the user turns it off. Three defences, all here:
+ *
+ *   1. IDENTICAL-MESSAGE SUPPRESSION. The same text in the same channel is
+ *      dropped, unless `force` is set (a repeated action the user *did* repeat
+ *      — nudging twice — is legitimately worth re-announcing).
+ *   2. COALESCING. Announcements inside a short window replace, rather than
+ *      queue behind, the previous one. Holding an arrow key produces the FINAL
+ *      position, not fifty intermediate ones.
+ *   3. MODEL-CHANGE DRIVEN. The controller is called on model change, never
+ *      from the render loop. `getSpeakCount()` lets a test prove a quiet frame
+ *      speaks zero times.
+ *
+ * Framework-free: takes a container, owns two divs, no Angular anywhere.
+ *
+ * Wave 6 (a11y card 5).
+ */
+export type Politeness = 'polite' | 'assertive';
+export interface LiveRegionOptions {
+    /**
+     * Announcements arriving within this many ms of the previous one REPLACE it
+     * rather than following it. 0 disables coalescing (tests use this).
+     */
+    coalesceMs?: number;
+    /** Injected clock, so tests need no timers. */
+    now?: () => number;
+    /** Injected scheduler, so tests need no real setTimeout. */
+    schedule?: (fn: () => void, ms: number) => unknown;
+    cancel?: (handle: unknown) => void;
+}
+export declare class LiveRegionController {
+    private readonly politeEl;
+    private readonly assertiveEl;
+    private readonly coalesceMs;
+    private readonly now;
+    private readonly schedule;
+    private readonly cancel;
+    private lastMessage;
+    /**
+     * When the last message was spoken. `-Infinity`, NOT 0 — with 0, the very
+     * first announcement of the session looks like it arrived inside the coalesce
+     * window of a previous announcement that never happened, so it gets deferred
+     * instead of spoken. (An injected clock starting at 0 makes this obvious; a
+     * `Date.now()` clock hides it, which is exactly why the tests inject one.)
+     */
+    private lastAt;
+    private pending;
+    private timer;
+    private speakCount;
+    constructor(container: HTMLElement, options?: LiveRegionOptions);
+    private makeRegion;
+    /** The live elements, for tests and for hosts that relocate them. */
+    getElement(politeness: Politeness): HTMLElement;
+    /** What the region currently says. */
+    getMessage(politeness: Politeness): string;
+    /** How many times we have actually written to the DOM. The thrash proof. */
+    getSpeakCount(): number;
+    /**
+     * Announce. Returns true if the message will be spoken, false if it was
+     * suppressed as a duplicate.
+     */
+    announce(message: string, politeness?: Politeness, force?: boolean): boolean;
+    /** Errors and validation failures. Always assertive, never coalesced. */
+    announceError(message: string): boolean;
+    /** Speak any coalesced message immediately. */
+    flushPending(): void;
+    private speak;
+    /** Clear both regions (e.g. on blur) without announcing anything. */
+    clear(): void;
+    private flushPendingSilently;
+    dispose(): void;
+}

package/src/libs/renderer/src/a11y/live-region.js

@@ -0,0 +1,170 @@
+"use strict";
+/**
+ * The managed `aria-live` REGION — the canvas's voice.
+ *
+ * Two live regions, not one: an AT will not reliably re-announce a node whose
+ * politeness changed, and mixing an error into the polite queue means it waits
+ * behind whatever selection chatter is already in flight. So:
+ *
+ *   - `polite`    — selection, movement, focus, connect/disconnect;
+ *   - `assertive` — validation failures and errors, which interrupt.
+ *
+ * DE-DUPLICATION is the whole design problem. A naive live region wired to a
+ * render loop says "Process node, 2 connections" sixty times a second and is
+ * worse than useless — the user turns it off. Three defences, all here:
+ *
+ *   1. IDENTICAL-MESSAGE SUPPRESSION. The same text in the same channel is
+ *      dropped, unless `force` is set (a repeated action the user *did* repeat
+ *      — nudging twice — is legitimately worth re-announcing).
+ *   2. COALESCING. Announcements inside a short window replace, rather than
+ *      queue behind, the previous one. Holding an arrow key produces the FINAL
+ *      position, not fifty intermediate ones.
+ *   3. MODEL-CHANGE DRIVEN. The controller is called on model change, never
+ *      from the render loop. `getSpeakCount()` lets a test prove a quiet frame
+ *      speaks zero times.
+ *
+ * Framework-free: takes a container, owns two divs, no Angular anywhere.
+ *
+ * Wave 6 (a11y card 5).
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LiveRegionController = void 0;
+const VISUALLY_HIDDEN = 'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;' +
+    'clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;';
+class LiveRegionController {
+    constructor(container, options = {}) {
+        var _a, _b, _c, _d;
+        this.lastMessage = { polite: '', assertive: '' };
+        /**
+         * When the last message was spoken. `-Infinity`, NOT 0 — with 0, the very
+         * first announcement of the session looks like it arrived inside the coalesce
+         * window of a previous announcement that never happened, so it gets deferred
+         * instead of spoken. (An injected clock starting at 0 makes this obvious; a
+         * `Date.now()` clock hides it, which is exactly why the tests inject one.)
+         */
+        this.lastAt = -Infinity;
+        this.pending = null;
+        this.timer = null;
+        this.speakCount = 0;
+        this.coalesceMs = (_a = options.coalesceMs) !== null && _a !== void 0 ? _a : 120;
+        this.now = (_b = options.now) !== null && _b !== void 0 ? _b : (() => Date.now());
+        this.schedule =
+            (_c = options.schedule) !== null && _c !== void 0 ? _c : ((fn, ms) => globalThis.setTimeout(fn, ms));
+        this.cancel =
+            (_d = options.cancel) !== null && _d !== void 0 ? _d : ((handle) => globalThis.clearTimeout(handle));
+        const doc = container.ownerDocument;
+        this.politeEl = this.makeRegion(doc, 'polite');
+        this.assertiveEl = this.makeRegion(doc, 'assertive');
+        container.appendChild(this.politeEl);
+        container.appendChild(this.assertiveEl);
+    }
+    makeRegion(doc, politeness) {
+        const el = doc.createElement('div');
+        el.setAttribute('role', politeness === 'assertive' ? 'alert' : 'status');
+        el.setAttribute('aria-live', politeness);
+        // `aria-atomic` — read the whole message, not just the changed words. Without
+        // it an AT can read the diff of two similar messages, which is gibberish.
+        el.setAttribute('aria-atomic', 'true');
+        el.setAttribute('data-grafloria-live', politeness);
+        el.setAttribute('style', VISUALLY_HIDDEN);
+        return el;
+    }
+    /** The live elements, for tests and for hosts that relocate them. */
+    getElement(politeness) {
+        return politeness === 'assertive' ? this.assertiveEl : this.politeEl;
+    }
+    /** What the region currently says. */
+    getMessage(politeness) {
+        var _a;
+        return (_a = this.getElement(politeness).textContent) !== null && _a !== void 0 ? _a : '';
+    }
+    /** How many times we have actually written to the DOM. The thrash proof. */
+    getSpeakCount() {
+        return this.speakCount;
+    }
+    /**
+     * Announce. Returns true if the message will be spoken, false if it was
+     * suppressed as a duplicate.
+     */
+    announce(message, politeness = 'polite', force = false) {
+        const text = message.trim();
+        if (!text)
+            return false;
+        // (1) identical-message suppression.
+        if (!force && text === this.lastMessage[politeness])
+            return false;
+        // Errors must never wait behind a coalescing window — they interrupt.
+        if (politeness === 'assertive') {
+            this.flushPending();
+            this.speak(text, 'assertive');
+            return true;
+        }
+        const at = this.now();
+        const withinWindow = this.coalesceMs > 0 && at - this.lastAt < this.coalesceMs;
+        if (!withinWindow) {
+            this.speak(text, politeness);
+            this.lastAt = at;
+            return true;
+        }
+        // (2) coalesce: the newest message REPLACES any still-pending one, and we
+        // speak once when the window closes. Fifty arrow-key repeats → one sentence.
+        this.pending = { message: text, politeness };
+        if (this.timer === null) {
+            this.timer = this.schedule(() => {
+                this.timer = null;
+                this.flushPending();
+            }, this.coalesceMs);
+        }
+        return true;
+    }
+    /** Errors and validation failures. Always assertive, never coalesced. */
+    announceError(message) {
+        return this.announce(message, 'assertive', true);
+    }
+    /** Speak any coalesced message immediately. */
+    flushPending() {
+        if (this.timer !== null) {
+            this.cancel(this.timer);
+            this.timer = null;
+        }
+        const pending = this.pending;
+        this.pending = null;
+        if (pending) {
+            this.speak(pending.message, pending.politeness);
+            this.lastAt = this.now();
+        }
+    }
+    speak(text, politeness) {
+        const el = this.getElement(politeness);
+        // An AT only announces a live region when its content CHANGES. Re-setting
+        // the same string is a no-op to the DOM and therefore silent — which is why
+        // `force` (a legitimately repeated action) has to clear first.
+        if (el.textContent === text) {
+            el.textContent = '';
+        }
+        el.textContent = text;
+        this.lastMessage[politeness] = text;
+        this.speakCount++;
+    }
+    /** Clear both regions (e.g. on blur) without announcing anything. */
+    clear() {
+        this.flushPendingSilently();
+        this.politeEl.textContent = '';
+        this.assertiveEl.textContent = '';
+        this.lastMessage = { polite: '', assertive: '' };
+    }
+    flushPendingSilently() {
+        if (this.timer !== null) {
+            this.cancel(this.timer);
+            this.timer = null;
+        }
+        this.pending = null;
+    }
+    dispose() {
+        this.flushPendingSilently();
+        this.politeEl.remove();
+        this.assertiveEl.remove();
+    }
+}
+exports.LiveRegionController = LiveRegionController;
+//# sourceMappingURL=live-region.js.map

package/src/libs/renderer/src/a11y/live-region.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"live-region.js","sourceRoot":"","sources":["../../../../../../renderer/src/a11y/live-region.ts"],"names":[],"mappings":"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"}

package/src/libs/renderer/src/a11y/outline-view.d.ts

@@ -0,0 +1,62 @@
+import { type DiagramLike } from './semantics';
+import { type DiagramOutline, type OutlineNode } from './diagram-outline';
+/**
+ * The outline's DOM MIRROR: a visually-hidden, semantically-structured tree the
+ * AT virtual cursor browses with its ordinary list/tree keys.
+ *
+ * Structure (all off-screen, never focusable by Tab — the canvas owns the tab
+ * stop; this is virtual-cursor territory):
+ *
+ *   <div role="region" aria-label="Diagram outline">
+ *     <p>{natural-language summary}</p>
+ *     <ul role="tree">
+ *       <li role="treeitem" aria-level=1 aria-label="Decision, Is order valid?, …">
+ *         <ul role="group"> …children… </ul>
+ *       </li>
+ *     </ul>
+ *     <ul role="list" aria-label="Edges"> … </ul>
+ *   </div>
+ *
+ * THRASH CONTROL — the non-negotiable. `update()` is safe to call on every
+ * frame: it recomputes only the outline SIGNATURE (ids/names/states/endpoints,
+ * never geometry) and returns immediately when it is unchanged. A quiet frame,
+ * and a pure-drag frame, do ZERO DOM work. `getRebuildCount()` exists so a test
+ * can PROVE it rather than trust it.
+ *
+ * Wave 6 (a11y card 6).
+ */
+export interface OutlineViewOptions {
+    /** Accessible name of the outline region. */
+    label?: string;
+    /** Diagram type, used in the roledescription ("Flowchart diagram"). */
+    diagramType?: string;
+    /** Include the per-edge list. Default true. */
+    includeEdgeList?: boolean;
+}
+export declare class DiagramOutlineView {
+    private readonly root;
+    private readonly summaryEl;
+    private readonly treeEl;
+    private readonly edgeListEl;
+    private readonly options;
+    private signature;
+    private outline;
+    private rebuilds;
+    constructor(container: HTMLElement, options?: OutlineViewOptions);
+    /** The hidden region, for tests and hosts that want to relocate it. */
+    getElement(): HTMLElement;
+    /** How many times the DOM has actually been rebuilt. The thrash proof. */
+    getRebuildCount(): number;
+    /** The outline currently mirrored (null before the first update). */
+    getOutline(): DiagramOutline | null;
+    /**
+     * Sync the mirror to the model. Cheap and idempotent: returns false — having
+     * touched no DOM — when the topology-relevant signature is unchanged.
+     */
+    update(diagram: DiagramLike | undefined): boolean;
+    private render;
+    private renderNode;
+    dispose(): void;
+}
+/** "Decision, Is order valid?, node 3 of 12, 1 incoming, 2 outgoing, in a loop" */
+export declare function outlineNodeLabel(node: OutlineNode): string;

package/src/libs/renderer/src/a11y/outline-view.js

@@ -0,0 +1,158 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DiagramOutlineView = void 0;
+exports.outlineNodeLabel = outlineNodeLabel;
+const semantics_1 = require("./semantics");
+const diagram_outline_1 = require("./diagram-outline");
+/** The visually-hidden recipe. Off-screen, but still rendered — so AT reads it.
+ *  `display:none` / `visibility:hidden` would REMOVE it from the a11y tree,
+ *  which is the classic way to ship an outline that no screen reader can see. */
+const VISUALLY_HIDDEN = 'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;' +
+    'clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;';
+class DiagramOutlineView {
+    constructor(container, options = {}) {
+        var _a, _b, _c;
+        this.signature = null;
+        this.outline = null;
+        this.rebuilds = 0;
+        this.options = {
+            label: (_a = options.label) !== null && _a !== void 0 ? _a : 'Diagram outline',
+            diagramType: (_b = options.diagramType) !== null && _b !== void 0 ? _b : '',
+            includeEdgeList: (_c = options.includeEdgeList) !== null && _c !== void 0 ? _c : true,
+        };
+        const doc = container.ownerDocument;
+        this.root = doc.createElement('div');
+        this.root.setAttribute('role', 'region');
+        this.root.setAttribute('aria-label', this.options.label);
+        this.root.setAttribute('data-grafloria-outline', '');
+        this.root.setAttribute('style', VISUALLY_HIDDEN);
+        this.summaryEl = doc.createElement('p');
+        this.summaryEl.setAttribute('data-grafloria-outline-summary', '');
+        this.treeEl = doc.createElement('ul');
+        this.treeEl.setAttribute('role', 'tree');
+        this.treeEl.setAttribute('aria-label', 'Diagram structure');
+        this.edgeListEl = doc.createElement('ul');
+        this.edgeListEl.setAttribute('role', 'list');
+        this.edgeListEl.setAttribute('aria-label', 'Edges');
+        this.root.appendChild(this.summaryEl);
+        this.root.appendChild(this.treeEl);
+        if (this.options.includeEdgeList)
+            this.root.appendChild(this.edgeListEl);
+        container.appendChild(this.root);
+    }
+    /** The hidden region, for tests and hosts that want to relocate it. */
+    getElement() {
+        return this.root;
+    }
+    /** How many times the DOM has actually been rebuilt. The thrash proof. */
+    getRebuildCount() {
+        return this.rebuilds;
+    }
+    /** The outline currently mirrored (null before the first update). */
+    getOutline() {
+        return this.outline;
+    }
+    /**
+     * Sync the mirror to the model. Cheap and idempotent: returns false — having
+     * touched no DOM — when the topology-relevant signature is unchanged.
+     */
+    update(diagram) {
+        if (!diagram)
+            return false;
+        const signature = (0, diagram_outline_1.outlineSignature)(diagram);
+        if (signature === this.signature)
+            return false;
+        this.signature = signature;
+        this.outline = (0, diagram_outline_1.buildOutline)(diagram);
+        this.rebuilds++;
+        this.render(this.outline);
+        return true;
+    }
+    render(outline) {
+        const doc = this.root.ownerDocument;
+        this.root.setAttribute('aria-roledescription', (0, semantics_1.diagramRoleDescription)(this.options.diagramType));
+        this.summaryEl.textContent = outline.summary;
+        this.treeEl.replaceChildren();
+        for (const node of outline.roots) {
+            this.treeEl.appendChild(this.renderNode(doc, node, 1));
+        }
+        if (!this.options.includeEdgeList)
+            return;
+        this.edgeListEl.replaceChildren();
+        for (const edge of outline.edges) {
+            const li = doc.createElement('li');
+            li.setAttribute('role', 'listitem');
+            li.setAttribute('data-grafloria-outline-edge', edge.linkId);
+            li.textContent = edge.text;
+            this.edgeListEl.appendChild(li);
+        }
+    }
+    renderNode(doc, node, level) {
+        const li = doc.createElement('li');
+        li.setAttribute('role', 'treeitem');
+        li.setAttribute('aria-level', String(level));
+        li.setAttribute('data-grafloria-outline-node', node.nodeId);
+        li.setAttribute('aria-label', outlineNodeLabel(node));
+        // The node's own line, then where it leads — as a nested list, so the AT
+        // user can dive into "what does this lead to?" or skip past it entirely.
+        const line = doc.createElement('span');
+        line.textContent = outlineNodeLabel(node);
+        li.appendChild(line);
+        if (node.targets.length > 0) {
+            const targets = doc.createElement('ul');
+            targets.setAttribute('role', 'list');
+            targets.setAttribute('aria-label', `Leads to, from ${node.name}`);
+            for (const target of node.targets) {
+                const item = doc.createElement('li');
+                item.setAttribute('role', 'listitem');
+                item.setAttribute('data-grafloria-outline-target', target.linkId);
+                item.textContent = targetLabel(target);
+                targets.appendChild(item);
+            }
+            li.appendChild(targets);
+        }
+        if (node.children.length > 0) {
+            const group = doc.createElement('ul');
+            group.setAttribute('role', 'group');
+            for (const child of node.children) {
+                group.appendChild(this.renderNode(doc, child, level + 1));
+            }
+            li.appendChild(group);
+        }
+        return li;
+    }
+    dispose() {
+        this.root.remove();
+        this.outline = null;
+        this.signature = null;
+    }
+}
+exports.DiagramOutlineView = DiagramOutlineView;
+/** "Decision, Is order valid?, node 3 of 12, 1 incoming, 2 outgoing, in a loop" */
+function outlineNodeLabel(node) {
+    const bits = [
+        node.roleDescription,
+        node.name,
+        `node ${node.index} of ${node.total}`,
+        `${node.incoming} incoming`,
+        `${node.outgoing} outgoing`,
+    ];
+    if (node.isEntryPoint)
+        bits.push('start of a flow');
+    if (node.isTerminal)
+        bits.push('end of a flow');
+    if (node.isIsolated)
+        bits.push('disconnected');
+    if (node.inCycle)
+        bits.push('in a loop');
+    return bits.join(', ');
+}
+function targetLabel(target) {
+    const bits = [`leads to ${target.targetName}`];
+    if (target.label)
+        bits.push(`when ${target.label}`);
+    if (target.closesCycle)
+        bits.push('closing a loop');
+    return bits.join(', ');
+}
+//# sourceMappingURL=outline-view.js.map

package/src/libs/renderer/src/a11y/outline-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outline-view.js","sourceRoot":"","sources":["../../../../../../renderer/src/a11y/outline-view.ts"],"names":[],"mappings":"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"}

package/src/libs/renderer/src/a11y/reduced-motion.d.ts

@@ -0,0 +1,48 @@
+/**
+ * MOTION-PREFERENCE styles — and, more to the point, the code that actually
+ * INJECTS them.
+ *
+ * ## The dead-config bug this file exists to kill
+ *
+ * `libs/renderer/src/themes/reduced-motion.css` shipped 314 lines of careful
+ * accessibility CSS — reduced-motion fallbacks, epilepsy-safety iteration
+ * caps, performance/battery modes, a `.sr-only` recipe — and **nothing ever
+ * imported it**. Not the renderer, not the Angular host, not a bundler entry.
+ * It had never had any effect in production.
+ *
+ * Worse, it was load-bearing for a switch that DID run: `AnimationService`
+ * toggles `body.reduced-motion` whenever reduced motion is on
+ * (`animation.service.ts` → `updateAllAnimations`), and the ONLY rules for that
+ * class lived in the orphaned file. So the JS-driven path — a host turning
+ * reduced motion on from a settings toggle rather than the OS — suppressed
+ * nothing at all. The `@media (prefers-reduced-motion: reduce)` blocks
+ * elsewhere in the renderer only fire on the OS preference, so the product
+ * appeared to honour the setting while ignoring the app's own control.
+ *
+ * The CSS now lives here as a string, and `ensureMotionPreferenceStyles()` is
+ * called from `AnimationService.injectCSS()` — the same place the class is
+ * toggled. Config and consumption are finally in the same file.
+ *
+ * Wave 6 (a11y card 7).
+ */
+/** Id of the injected `<style>` element. Idempotent by construction. */
+export declare const MOTION_PREFERENCE_STYLE_ID = "grafloria-motion-preferences";
+/**
+ * Reduced motion, high contrast, performance/battery modes, epilepsy safety,
+ * and the screen-reader-only recipe.
+ *
+ * Two routes to the same behaviour, deliberately:
+ *   - `@media (prefers-reduced-motion: reduce)` — the OS preference;
+ *   - `.reduced-motion` on `<body>` — the APP's own toggle, which is what
+ *     `AnimationService` sets. Both must work; only the first used to.
+ */
+export declare const MOTION_PREFERENCE_CSS = "\n/* ==========================================================================\n   REDUCED MOTION \u2014 OS preference\n   ========================================================================== */\n@media (prefers-reduced-motion: reduce) {\n  .link-animated-marching-ants,\n  .link-animated-flow,\n  .link-animated-pulse {\n    animation: none !important;\n    stroke-dasharray: none !important;\n  }\n\n  .node-border-gradient,\n  .node-border-gradient::before,\n  .node-border-pulse,\n  .node-border-pulse-svg,\n  .node-border-breathe,\n  .node-border-shimmer,\n  .node-border-shimmer::after {\n    animation: none !important;\n  }\n\n  /* Status animations stop, but the STATIC indicator stays \u2014 a reduced-motion\n     user must not lose the information the animation was carrying. */\n  .node-status-running { animation: none !important; border-color: #3498db; box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); }\n  .node-status-running-svg { animation: none !important; stroke: #3498db; filter: drop-shadow(0 0 5px rgba(52, 152, 219, 0.5)); }\n  .node-status-error { animation: none !important; border-color: #e74c3c; box-shadow: 0 0 5px rgba(231, 76, 60, 0.5); }\n  .node-status-error-svg { animation: none !important; stroke: #e74c3c; filter: drop-shadow(0 0 5px rgba(231, 76, 60, 0.5)); }\n  .node-status-completed { animation: none !important; border-color: #27ae60; opacity: 0.8; }\n  .node-status-completed-svg { animation: none !important; stroke: #27ae60; opacity: 0.8; }\n  .node-status-warning { animation: none !important; border-color: #f39c12; background-color: rgba(243, 156, 18, 0.1); }\n  .node-status-warning-svg { animation: none !important; stroke: #f39c12; fill-opacity: 0.1; }\n  .node-status-pending { animation: none !important; opacity: 0.85; }\n  .node-status-pending-svg { animation: none !important; opacity: 0.85; }\n\n  /* Interactive feedback stays, but effectively instant. */\n  .diagram-node,\n  .diagram-link {\n    transition: opacity 0.05s ease, transform 0.05s ease;\n  }\n\n  .node-border-gradient::before { background-position: 0% center; }\n\n  * { will-change: auto !important; }\n}\n\n/* ==========================================================================\n   REDUCED MOTION \u2014 the APP's own toggle (AnimationService sets this class).\n   These rules had no stylesheet at all before wave 6.\n   ========================================================================== */\nbody.reduced-motion .diagram-node,\nbody.reduced-motion .diagram-link,\nbody.reduced-motion .link-animated-marching-ants,\nbody.reduced-motion .link-animated-flow,\nbody.reduced-motion .link-animated-pulse,\nbody.reduced-motion .node-border-gradient,\nbody.reduced-motion .node-border-gradient::before,\nbody.reduced-motion .node-border-pulse,\nbody.reduced-motion .node-border-pulse-svg,\nbody.reduced-motion .node-border-breathe,\nbody.reduced-motion .node-border-shimmer,\nbody.reduced-motion .node-border-shimmer::after,\nbody.reduced-motion .node-status-running,\nbody.reduced-motion .node-status-running-svg,\nbody.reduced-motion .node-status-error,\nbody.reduced-motion .node-status-error-svg,\nbody.reduced-motion .node-status-completed,\nbody.reduced-motion .node-status-completed-svg,\nbody.reduced-motion .node-status-warning,\nbody.reduced-motion .node-status-warning-svg,\nbody.reduced-motion .node-status-pending,\nbody.reduced-motion .node-status-pending-svg {\n  animation: none !important;\n  transition: opacity 0.05s ease, transform 0.05s ease !important;\n}\n\nbody.reduced-motion .link-animated-marching-ants,\nbody.reduced-motion .link-animated-flow,\nbody.reduced-motion .link-animated-pulse {\n  stroke-dasharray: none !important;\n}\n\nbody.reduced-motion .node-border-gradient::before {\n  background-position: 0% center;\n}\n\n/* ==========================================================================\n   HIGH CONTRAST\n   ========================================================================== */\n@media (prefers-contrast: high) {\n  .node-border-gradient,\n  .node-border-shimmer { animation: none !important; }\n\n  .link-animated-marching-ants,\n  .link-animated-flow { animation-duration: 2s !important; }\n\n  .node-status-running,\n  .node-status-error,\n  .node-status-warning { border-width: 3px; }\n}\n\n/* ==========================================================================\n   PERFORMANCE / BATTERY MODES (also AnimationService body classes)\n   ========================================================================== */\nbody.performance-mode .link-animated-marching-ants,\nbody.performance-mode .link-animated-flow { animation-duration: 2s !important; }\n\nbody.performance-mode .node-border-gradient,\nbody.performance-mode .node-border-shimmer,\nbody.performance-mode .node-border-pulse-svg { animation: none !important; }\n\nbody.performance-mode .node-border-breathe { animation-duration: 5s !important; }\n\nbody.battery-saving .link-animated-marching-ants,\nbody.battery-saving .link-animated-flow,\nbody.battery-saving .link-animated-pulse,\nbody.battery-saving .node-border-gradient,\nbody.battery-saving .node-border-shimmer,\nbody.battery-saving .node-border-pulse,\nbody.battery-saving .node-border-breathe { animation: none !important; }\n\nbody.battery-saving .node-status-running,\nbody.battery-saving .node-status-error { animation-duration: 3s !important; }\n\n/* ==========================================================================\n   EPILEPSY SAFETY \u2014 WCAG 2.3.1 (Three Flashes or Below Threshold)\n   ========================================================================== */\n.node-status-error { animation-iteration-count: 1; }\n.node-status-warning { animation-iteration-count: 3; }\n\n.link-animated-pulse,\n.node-status-running,\n.node-status-pending { animation-duration: 1.5s; }\n\nbody.animations-paused * { animation-play-state: paused !important; }\n\n/* ==========================================================================\n   SCREEN-READER-ONLY\n   ========================================================================== */\n.grafloria-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border-width: 0;\n}\n";
+/**
+ * Inject the motion-preference stylesheet once per document.
+ *
+ * Idempotent and SSR-safe: no document → no-op, and a second call finds the
+ * existing element by id and returns it.
+ */
+export declare function ensureMotionPreferenceStyles(doc?: Document): HTMLStyleElement | undefined;
+/** Remove the injected stylesheet (teardown / tests). */
+export declare function removeMotionPreferenceStyles(doc?: Document): void;