@grafloria/element 0.3.20 → 0.3.21

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

@@ -1,170 +0,0 @@
-"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

@@ -1,62 +0,0 @@
-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

@@ -1,158 +0,0 @@
-"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

@@ -1,48 +0,0 @@
-/**
- * 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

@@ -1,223 +0,0 @@
-"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