@grafloria/element 0.3.18 → 0.3.20

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/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/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;

package/src/libs/renderer/src/a11y/reduced-motion.js

@@ -0,0 +1,223 @@
+"use strict";
+/**
+ * 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).
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MOTION_PREFERENCE_CSS = exports.MOTION_PREFERENCE_STYLE_ID = void 0;
+exports.ensureMotionPreferenceStyles = ensureMotionPreferenceStyles;
+exports.removeMotionPreferenceStyles = removeMotionPreferenceStyles;
+const platform_1 = require("../platform/platform");
+/** Id of the injected `<style>` element. Idempotent by construction. */
+exports.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.
+ */
+exports.MOTION_PREFERENCE_CSS = `
+/* ==========================================================================
+   REDUCED MOTION — OS preference
+   ========================================================================== */
+@media (prefers-reduced-motion: reduce) {
+  .link-animated-marching-ants,
+  .link-animated-flow,
+  .link-animated-pulse {
+    animation: none !important;
+    stroke-dasharray: none !important;
+  }
+
+  .node-border-gradient,
+  .node-border-gradient::before,
+  .node-border-pulse,
+  .node-border-pulse-svg,
+  .node-border-breathe,
+  .node-border-shimmer,
+  .node-border-shimmer::after {
+    animation: none !important;
+  }
+
+  /* Status animations stop, but the STATIC indicator stays — a reduced-motion
+     user must not lose the information the animation was carrying. */
+  .node-status-running { animation: none !important; border-color: #3498db; box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); }
+  .node-status-running-svg { animation: none !important; stroke: #3498db; filter: drop-shadow(0 0 5px rgba(52, 152, 219, 0.5)); }
+  .node-status-error { animation: none !important; border-color: #e74c3c; box-shadow: 0 0 5px rgba(231, 76, 60, 0.5); }
+  .node-status-error-svg { animation: none !important; stroke: #e74c3c; filter: drop-shadow(0 0 5px rgba(231, 76, 60, 0.5)); }
+  .node-status-completed { animation: none !important; border-color: #27ae60; opacity: 0.8; }
+  .node-status-completed-svg { animation: none !important; stroke: #27ae60; opacity: 0.8; }
+  .node-status-warning { animation: none !important; border-color: #f39c12; background-color: rgba(243, 156, 18, 0.1); }
+  .node-status-warning-svg { animation: none !important; stroke: #f39c12; fill-opacity: 0.1; }
+  .node-status-pending { animation: none !important; opacity: 0.85; }
+  .node-status-pending-svg { animation: none !important; opacity: 0.85; }
+
+  /* Interactive feedback stays, but effectively instant. */
+  .diagram-node,
+  .diagram-link {
+    transition: opacity 0.05s ease, transform 0.05s ease;
+  }
+
+  .node-border-gradient::before { background-position: 0% center; }
+
+  * { will-change: auto !important; }
+}
+
+/* ==========================================================================
+   REDUCED MOTION — the APP's own toggle (AnimationService sets this class).
+   These rules had no stylesheet at all before wave 6.
+   ========================================================================== */
+body.reduced-motion .diagram-node,
+body.reduced-motion .diagram-link,
+body.reduced-motion .link-animated-marching-ants,
+body.reduced-motion .link-animated-flow,
+body.reduced-motion .link-animated-pulse,
+body.reduced-motion .node-border-gradient,
+body.reduced-motion .node-border-gradient::before,
+body.reduced-motion .node-border-pulse,
+body.reduced-motion .node-border-pulse-svg,
+body.reduced-motion .node-border-breathe,
+body.reduced-motion .node-border-shimmer,
+body.reduced-motion .node-border-shimmer::after,
+body.reduced-motion .node-status-running,
+body.reduced-motion .node-status-running-svg,
+body.reduced-motion .node-status-error,
+body.reduced-motion .node-status-error-svg,
+body.reduced-motion .node-status-completed,
+body.reduced-motion .node-status-completed-svg,
+body.reduced-motion .node-status-warning,
+body.reduced-motion .node-status-warning-svg,
+body.reduced-motion .node-status-pending,
+body.reduced-motion .node-status-pending-svg {
+  animation: none !important;
+  transition: opacity 0.05s ease, transform 0.05s ease !important;
+}
+
+body.reduced-motion .link-animated-marching-ants,
+body.reduced-motion .link-animated-flow,
+body.reduced-motion .link-animated-pulse {
+  stroke-dasharray: none !important;
+}
+
+body.reduced-motion .node-border-gradient::before {
+  background-position: 0% center;
+}
+
+/* ==========================================================================
+   HIGH CONTRAST
+   ========================================================================== */
+@media (prefers-contrast: high) {
+  .node-border-gradient,
+  .node-border-shimmer { animation: none !important; }
+
+  .link-animated-marching-ants,
+  .link-animated-flow { animation-duration: 2s !important; }
+
+  .node-status-running,
+  .node-status-error,
+  .node-status-warning { border-width: 3px; }
+}
+
+/* ==========================================================================
+   PERFORMANCE / BATTERY MODES (also AnimationService body classes)
+   ========================================================================== */
+body.performance-mode .link-animated-marching-ants,
+body.performance-mode .link-animated-flow { animation-duration: 2s !important; }
+
+body.performance-mode .node-border-gradient,
+body.performance-mode .node-border-shimmer,
+body.performance-mode .node-border-pulse-svg { animation: none !important; }
+
+body.performance-mode .node-border-breathe { animation-duration: 5s !important; }
+
+body.battery-saving .link-animated-marching-ants,
+body.battery-saving .link-animated-flow,
+body.battery-saving .link-animated-pulse,
+body.battery-saving .node-border-gradient,
+body.battery-saving .node-border-shimmer,
+body.battery-saving .node-border-pulse,
+body.battery-saving .node-border-breathe { animation: none !important; }
+
+body.battery-saving .node-status-running,
+body.battery-saving .node-status-error { animation-duration: 3s !important; }
+
+/* ==========================================================================
+   EPILEPSY SAFETY — WCAG 2.3.1 (Three Flashes or Below Threshold)
+   ========================================================================== */
+.node-status-error { animation-iteration-count: 1; }
+.node-status-warning { animation-iteration-count: 3; }
+
+.link-animated-pulse,
+.node-status-running,
+.node-status-pending { animation-duration: 1.5s; }
+
+body.animations-paused * { animation-play-state: paused !important; }
+
+/* ==========================================================================
+   SCREEN-READER-ONLY
+   ========================================================================== */
+.grafloria-sr-only {
+  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-width: 0;
+}
+`;
+/**
+ * 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.
+ */
+function ensureMotionPreferenceStyles(doc) {
+    var _a;
+    const target = doc !== null && doc !== void 0 ? doc : (0, platform_1.getDocument)();
+    if (!target)
+        return undefined;
+    const existing = target.getElementById(exports.MOTION_PREFERENCE_STYLE_ID);
+    if (existing)
+        return existing;
+    const style = target.createElement('style');
+    style.id = exports.MOTION_PREFERENCE_STYLE_ID;
+    style.textContent = exports.MOTION_PREFERENCE_CSS;
+    ((_a = target.head) !== null && _a !== void 0 ? _a : target.documentElement).appendChild(style);
+    return style;
+}
+/** Remove the injected stylesheet (teardown / tests). */
+function removeMotionPreferenceStyles(doc) {
+    var _a;
+    const target = doc !== null && doc !== void 0 ? doc : (0, platform_1.getDocument)();
+    (_a = target === null || target === void 0 ? void 0 : target.getElementById(exports.MOTION_PREFERENCE_STYLE_ID)) === null || _a === void 0 ? void 0 : _a.remove();
+}
+//# sourceMappingURL=reduced-motion.js.map