animl 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Marius A. (MRoiban)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NOTICE

@@ -0,0 +1,34 @@
+Anima contains a mathematical reimplementation of the natural-corner rounding
+construction in Rive's Path::computeIdealControlPointDistance (src/shapes/path.cpp,
+https://github.com/rive-app/rive-runtime). No Rive source text is copied. The
+construction is used by modules/contour/core/index.ts; native path observations
+independently check its controls. Rive credits natural rounding by daformat:
+https://observablehq.com/@daformat/rounding-polygon-corners
+
+Anima contains an independent mathematical reimplementation of the multi-link
+inverse-kinematics strategy in Rive's IKConstraint
+(src/constraints/ik_constraint.cpp, https://github.com/rive-app/rive-runtime).
+For chains longer than two bones, modules/ik/core/index.ts applies analytic
+two-link solves in FK order against the final tip. No Rive source text is
+copied.
+
+Rive runtime — Copyright (c) 2020 Rive
+Licensed under the MIT License:
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,57 @@
-# Temporary Holding Version
+# animl
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The runtime for [Anima](https://github.com/MRoiban/anima): an open animation format (`.ani` JSON,
+written by hand or as AniML markup) for animated, interactive web UI. It includes the player, the
+AniML compiler, the `<anima-icon>` web component and every optional module (paint, state machines,
+input, text, layout, rigging and more). No dependencies.
+
+```sh
+npm install animl
+```
+
+## In a page, no build step
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/animl@0.1.0/packages/web/dist/anima-icon.js"></script>
+<anima-icon src="bell.ani" style="width: 48px; height: 48px"></anima-icon>
+```
+
+`anima-icon.js` is the base runtime; optional modules have their own bundles next to it
+(`anima-paint.js`, `anima-machine.js`, `anima-input.js`, …). `npx anima bundle --modules paint,input`
+(from [animl-cli](https://www.npmjs.com/package/animl-cli)) builds one file with just the modules a scene needs.
+
+## With a bundler
+
+```js
+import 'animl/web';
+
+const icon = document.querySelector('anima-icon');
+await icon.load({
+  anima: '0.1',
+  name: 'dot',
+  grid: 20,
+  viewBox: [0, 0, 20, 20],
+  nodes: [{ type: 'circle', id: 'dot', center: [10, 10], r: 7, fill: { color: 'currentColor' } }],
+});
+```
+
+## In Node
+
+```js
+import 'animl/all';
+import { load, Player } from 'animl';
+import { compile } from 'animl/markup';
+
+const built = compile(
+  '<anima version="0.1" name="dot" grid="20" viewBox="0 0 20 20">' +
+    '<circle id="dot" cx="10" cy="10" r="7" fill="#000"/></anima>',
+);
+if (!built.doc) throw new Error(JSON.stringify(built.diagnostics));
+const player = new Player(load(built.doc).model);
+player.step(0.5);
+console.log(player.values());
+```
+
+Write and check scenes with the `anima` command from [animl-cli](https://www.npmjs.com/package/animl-cli)
+(`anima features`, `anima search <words>`, `anima validate`, `anima render`).
+Docs: https://github.com/MRoiban/anima/tree/main/docs · Licence: MIT.

package/modules/a11y/core/bounds.d.ts

@@ -0,0 +1,8 @@
+import type { DrawNode } from '../../../packages/core/src/draw.js';
+import { type Mat } from '../../../packages/core/src/geom.js';
+import type { runtime } from './runtime.js';
+import type { Player } from '../../../packages/core/src/player.js';
+export declare let boundsScales: WeakMap<Player, [number, number]>;
+/** Geometric paint support, including trims, viewport strokes and three-sigma feather. */
+export declare function paintedBounds(node: DrawNode, matrix: Mat, scale?: [number, number]): [number, number, number, number] | undefined;
+export declare function installPaintedBounds(target: typeof runtime, modules?: ReadonlyMap<string, import('../../../packages/core/src/modules.js').Module>): void;

package/modules/a11y/core/bounds.js

@@ -0,0 +1,326 @@
+import { apply, mul, trimPolys } from "../../../packages/core/src/geom.js";
+import { parsePath, M, C, Z } from "../../../packages/core/src/path.js";
+import { drawFrame } from "../../../packages/core/src/draw.js";
+import { polylines } from "../../contour/core/effects.js";
+function geometryPath(g) {
+  if (g.d !== void 0) return g.d;
+  if (g.r !== void 0)
+    return `M${g.cx + g.r} ${g.cy}A${g.r} ${g.r} 0 1 1 ${g.cx - g.r} ${g.cy}A${g.r} ${g.r} 0 1 1 ${g.cx + g.r} ${g.cy}Z`;
+  const x = g.x ?? 0, y = g.y ?? 0, w = g.width ?? 0, h = g.height ?? 0;
+  const rx = Math.min(g.rx ?? 0, w / 2), ry = Math.min(g.rx ?? 0, h / 2);
+  const arc = `a${rx} ${ry} 0 0 1 `;
+  return rx && ry ? `M${x + rx} ${y}h${w - 2 * rx}${arc}${rx} ${ry}v${h - 2 * ry}${arc}${-rx} ${ry}h${2 * rx - w}${arc}${-rx} ${-ry}v${2 * ry - h}${arc}${rx} ${-ry}Z` : `M${x} ${y}h${w}v${h}h${-w}Z`;
+}
+let boundsScales;
+const sub = (a, b) => [a[0] - b[0], a[1] - b[1]];
+const cross = (a, b) => a[0] * b[1] - a[1] * b[0];
+const unit = (v) => {
+  const n = Math.hypot(...v);
+  return n ? [v[0] / n, v[1] / n] : [0, 0];
+};
+const normal = (v) => [-v[1], v[0]];
+const add = (p, v, r = 1) => [p[0] + v[0] * r, p[1] + v[1] * r];
+const tangent = (s, end) => {
+  const p = end ? s.at(-1) : s[0];
+  for (const q of end ? [...s].reverse().slice(1) : s.slice(1)) {
+    const v = end ? sub(p, q) : sub(q, p);
+    if (Math.hypot(...v)) return unit(v);
+  }
+  return [0, 0];
+};
+const roots = (v) => {
+  if (v.length === 2) return [];
+  const [p, q, r, s] = v;
+  const a = -p + 3 * q - 3 * r + s, b = 2 * (p - 2 * q + r), c = q - p;
+  if (Math.abs(a) < 1e-14) return b ? [-c / b] : [];
+  const d = b * b - 4 * a * c;
+  return d < 0 ? [] : [(-b + Math.sqrt(d)) / (2 * a), (-b - Math.sqrt(d)) / (2 * a)];
+};
+const at = (s, t) => s.length === 2 ? add(s[0], sub(s[1], s[0]), t) : [0, 1].map(
+  (k) => (1 - t) ** 3 * s[0][k] + 3 * (1 - t) ** 2 * t * s[1][k] + 3 * (1 - t) * t * t * s[2][k] + t ** 3 * s[3][k]
+);
+function paintedBounds(node, matrix, scale = [1, 1]) {
+  const points = [];
+  const point = (p) => points.push(apply(matrix, ...p));
+  const arc = (p, r, from, to, sweep) => {
+    point(add(p, from, r));
+    point(add(p, to, r));
+    const start = Math.atan2(from[1], from[0]);
+    const mod = (n) => (n + Math.PI * 4) % (Math.PI * 2);
+    const angle = mod(sweep * (Math.atan2(to[1], to[0]) - start));
+    for (const v of [
+      [matrix[0], matrix[2]],
+      [matrix[1], matrix[3]]
+    ]) {
+      const u = unit(v);
+      for (const sign of [1, -1]) {
+        const a = add([0, 0], u, sign);
+        if (mod(sweep * (Math.atan2(a[1], a[0]) - start)) <= angle + 1e-12) point(add(p, a, r));
+      }
+    }
+  };
+  const path = (g, paint) => {
+    if (g.d === "") return;
+    const r = paint?.kind === "stroke" ? (paint.width ?? 1) / 2 : 0;
+    const fixed = paint?.scale === "fixed";
+    const original = matrix;
+    const viewport = mul([scale[0], 0, 0, scale[1], 0, 0], matrix);
+    if (g.r !== void 0) {
+      const center = apply(matrix, g.cx, g.cy);
+      const radius = g.r + (fixed ? 0 : r);
+      const x = radius * Math.hypot(matrix[0], matrix[2]) + (fixed ? r / scale[0] : 0), y = radius * Math.hypot(matrix[1], matrix[3]) + (fixed ? r / scale[1] : 0);
+      points.push([center[0] - x, center[1] - y], [center[0] + x, center[1] + y]);
+      return;
+    }
+    if (!fixed && !g.d && g.width !== void 0 && g.rx) {
+      const rx = Math.min(g.rx, g.width / 2), ry = Math.min(g.rx, (g.height ?? 0) / 2), x = g.x ?? 0, y = g.y ?? 0;
+      if (rx && ry) {
+        const corners = [
+          [x + g.width - rx, y + g.height - ry, 0],
+          [x + rx, y + g.height - ry, 1],
+          [x + rx, y + ry, 2],
+          [x + g.width - rx, y + ry, 3]
+        ];
+        for (const [cx, cy, q] of corners) {
+          const angles = [q * Math.PI / 2, (q + 1) * Math.PI / 2];
+          for (const v of [
+            [matrix[0], matrix[2]],
+            [matrix[1], matrix[3]]
+          ]) {
+            const a = (Math.atan2(v[1] * ry, v[0] * rx) + 2 * Math.PI) % (2 * Math.PI);
+            for (const t of [a, (a + Math.PI) % (2 * Math.PI)])
+              if (t >= q * Math.PI / 2 && t <= (q + 1) * Math.PI / 2) angles.push(t);
+          }
+          for (const t of angles) {
+            const p = [cx + rx * Math.cos(t), cy + ry * Math.sin(t)];
+            point(p);
+            if (r) {
+              const n = unit([Math.cos(t) / rx, Math.sin(t) / ry]);
+              point(add(p, n, r));
+              point(add(p, n, -r));
+            }
+          }
+        }
+        return;
+      }
+    }
+    const d = geometryPath(g);
+    for (const { segs } of parsePath(d)) {
+      let ss = [];
+      let p = [0, 0], start = p, closed = false;
+      for (let i = 0; i < segs.length; ) {
+        const op = segs[i++];
+        if (op === M) {
+          p = [segs[i++], segs[i++]];
+          start = p;
+        } else if (op === Z) {
+          if (p[0] !== start[0] || p[1] !== start[1]) ss.push([p, start]);
+          closed = true;
+          p = start;
+        } else {
+          const s = [p];
+          for (let n = op === C ? 3 : 1; n--; ) s.push([segs[i++], segs[i++]]);
+          ss.push(s);
+          p = s.at(-1);
+        }
+      }
+      if (fixed) {
+        ss = ss.map((s) => s.map((p2) => apply(viewport, ...p2)));
+        matrix = [1 / scale[0], 0, 0, 1 / scale[1], 0, 0];
+      }
+      for (const s of ss) {
+        const world = s.map((p2) => apply(matrix, ...p2));
+        if (!r) {
+          point(s[0]);
+          point(s.at(-1));
+        }
+        for (let axis = 0; axis < 2; axis++)
+          for (const t of roots(world.map((p2) => p2[axis])))
+            if (t > 0 && t < 1) {
+              const p2 = at(s, t);
+              point(p2);
+              if (r) {
+                const v = unit(axis ? [matrix[1], matrix[3]] : [matrix[0], matrix[2]]);
+                point(add(p2, v, r));
+                point(add(p2, v, -r));
+              }
+            }
+        if (r)
+          for (const end of [false, true]) {
+            const p2 = end ? s.at(-1) : s[0], n = normal(tangent(s, end));
+            point(add(p2, n, r));
+            point(add(p2, n, -r));
+          }
+      }
+      if (!r || !ss.length) continue;
+      for (let i = 0; i < ss.length; i++) {
+        if (!closed && i === ss.length - 1) break;
+        const a = ss[i], b = ss[(i + 1) % ss.length], p2 = a.at(-1), u = tangent(a, true), v = tangent(b, false), turn = cross(u, v);
+        if (Math.abs(turn) < 1e-12) {
+          if (u[0] * v[0] + u[1] * v[1] < 0 && paint?.join === "round")
+            for (const w of [
+              [matrix[0], matrix[2]],
+              [matrix[1], matrix[3]]
+            ]) {
+              point(add(p2, unit(w), r));
+              point(add(p2, unit(w), -r));
+            }
+          continue;
+        }
+        const sign = turn > 0 ? -1 : 1, n = add([0, 0], normal(u), sign), m = add([0, 0], normal(v), sign);
+        if (paint?.join === "round") arc(p2, r, n, m, Math.sign(turn));
+        else if ((paint?.join ?? "miter") === "miter") {
+          const h = add([0, 0], add(n, m), 1 / (1 + n[0] * m[0] + n[1] * m[1]));
+          if (Math.hypot(...h) <= 4 + 1e-12) point(add(p2, h, r));
+        }
+      }
+      if (!closed)
+        for (const end of [false, true]) {
+          const s = ss.flat(), p2 = end ? s.at(-1) : s[0], d2 = tangent(s, end), t = add([0, 0], d2[0] || d2[1] ? d2 : [1, 0], end ? 1 : -1), n = normal(t);
+          if (paint?.cap === "round") arc(p2, r, n, add([0, 0], n, -1), -1);
+          else if (paint?.cap === "square") {
+            point(add(add(p2, t, r), n, r));
+            point(add(add(p2, t, r), n, -r));
+          }
+        }
+    }
+    matrix = original;
+  };
+  for (const p of node.paints.filter((p2) => p2.visible)) {
+    let g = p.geometry ?? node.geometry;
+    if (!g) continue;
+    if (p.trim && p.trim.end - p.trim.start < 1)
+      g = {
+        kind: "path",
+        d: trimPolys(
+          polylines(geometryPath(g)).map((pts) => ({ pts: pts.flat(), closed: false })),
+          p.trim.start + p.trim.offset,
+          p.trim.end - p.trim.start
+        ).map(
+          ({ pts }) => Array.from(
+            { length: pts.length / 2 },
+            (_, i) => (i ? "L" : "M") + pts.slice(i * 2, i * 2 + 2).join(" ")
+          ).join("")
+        ).join("")
+      };
+    const begin = points.length;
+    path(g, p);
+    const f = p.feather;
+    if (f?.enabled && points.length > begin) {
+      const b = extent(points.splice(begin));
+      const r = f.outer;
+      const [dx, dy] = apply([matrix[0], matrix[1], matrix[2], matrix[3], 0, 0], ...f.offset);
+      const rx = r * (f.space === "world" ? 1 : Math.hypot(matrix[0], matrix[2]));
+      const ry = r * (f.space === "world" ? 1 : Math.hypot(matrix[1], matrix[3]));
+      points.push(
+        [b[0] + Math.min(0, dx - rx), b[1] + Math.min(0, dy - ry)],
+        [b[0] + b[2] + Math.max(0, dx + rx), b[1] + b[3] + Math.max(0, dy + ry)]
+      );
+    }
+  }
+  if (!node.paints.length && node.geometry) path(node.geometry);
+  if (!points.length) return;
+  return extent(points);
+}
+function extent(points) {
+  const xs = points.map((p) => p[0]), ys = points.map((p) => p[1]), x = Math.min(...xs), y = Math.min(...ys);
+  return [x, y, Math.max(...xs) - x, Math.max(...ys) - y];
+}
+function installPaintedBounds(target, modules) {
+  boundsScales ??= /* @__PURE__ */ new WeakMap();
+  if (target.bounds === paintedBounds) return;
+  target.bounds = paintedBounds;
+  let previous = target.refine;
+  const refine = (entries) => {
+    previous?.(entries);
+    const scale = (entries[0] && boundsScales.get(entries[0].p)) ?? [1, 1];
+    const drawing = (e) => {
+      const n = drawFrame(e.p).nodes[e.i];
+      const contour = modules?.get("contour");
+      return {
+        ...n,
+        paints: n.paints.map((p) => ({
+          ...p,
+          geometry: contour?.undashed(
+            n.geometry,
+            (p.key ?? p.kind).split(".").reduce((o, k) => o?.[k], e.p.model.nodes[e.i].raw),
+            e.p.model.doc.effects
+          ) ?? p.geometry
+        }))
+      };
+    };
+    const children = (e) => entries.filter((c) => c.parent === e.id);
+    const union = (boxes) => {
+      const points = boxes.flatMap(
+        (b) => b ? [
+          [b[0], b[1]],
+          [b[0] + b[2], b[1] + b[3]]
+        ] : []
+      );
+      return points.length ? extent(points) : void 0;
+    };
+    const intersect = (a, b) => {
+      if (!a || !b) return a && [a[0], a[1], 0, 0];
+      const x = Math.max(a[0], b[0]), y = Math.max(a[1], b[1]);
+      return [
+        x,
+        y,
+        Math.max(0, Math.min(a[0] + a[2], b[0] + b[2]) - x),
+        Math.max(0, Math.min(a[1] + a[3], b[1] + b[3]) - y)
+      ];
+    };
+    const limits = /* @__PURE__ */ new Map();
+    const restrict = (e, box, remember = false) => {
+      const n = drawing(e);
+      for (const ref of [n.clip, n.mask?.mode.startsWith("inverted") ? void 0 : n.mask]) {
+        if (!ref) continue;
+        const src = entries.find((s) => s.p === e.p && s.i === ref.source);
+        const b = src && source(src, ref === n.clip);
+        if (remember) limits.set(e, limits.has(e) ? intersect(limits.get(e), b) : b);
+        box = intersect(box, b);
+      }
+      return box;
+    };
+    const source = (e, geometry = false) => {
+      const n = drawing(e);
+      if (!geometry && !n.visible) return;
+      const box = String(e.p.model.nodes[e.i].type) === "text" ? e.bounds : union([
+        geometry || n.paints.length ? paintedBounds(geometry ? { ...n, paints: [] } : n, e.matrix, scale) : void 0,
+        ...children(e).map((c) => source(c, geometry))
+      ]);
+      return geometry ? box : restrict(e, box);
+    };
+    for (const e of [...entries].reverse()) {
+      const n = drawing(e);
+      if (!e.config?.bounds && n.geometry && String(e.p.model.nodes[e.i].type) !== "text")
+        e.bounds = paintedBounds(n, e.matrix, scale);
+      if (!e.bounds)
+        e.bounds = union(
+          children(e).filter((c) => c.visible).map((c) => c.bounds)
+        );
+      const clipped = restrict(e, e.bounds, true);
+      if (!e.config?.bounds) e.bounds = clipped;
+    }
+    for (const e of entries) {
+      const parent = entries.find((p) => p.id === e.parent);
+      if (parent && limits.has(parent)) {
+        const b = limits.get(parent);
+        if (!e.config?.bounds) e.bounds = intersect(e.bounds, b);
+        limits.set(e, limits.has(e) ? intersect(limits.get(e), b) : b);
+      }
+    }
+  };
+  Object.defineProperty(target, "refine", {
+    configurable: true,
+    get: () => refine,
+    set: (fn) => {
+      previous = fn;
+      target.version = (target.version ?? 0) + 1;
+    }
+  });
+}
+export {
+  boundsScales,
+  installPaintedBounds,
+  paintedBounds
+};

package/modules/a11y/core/commands.d.ts

@@ -0,0 +1,3 @@
+import type { Player } from '../../../packages/core/src/player.js';
+import type { Snapshot } from '../../../packages/core/src/script.js';
+export declare function semanticCommand(p: Player, command: string, args: string[], output: unknown[], step: (dt: number) => void, snapshot: () => Snapshot): boolean;

package/modules/a11y/core/commands.js

@@ -0,0 +1,103 @@
+import { flat } from "./tree.js";
+import { modules } from "../../../packages/core/src/modules.js";
+const spaceDown = /* @__PURE__ */ new WeakMap();
+function semanticCommand(p, command, args, output, step, snapshot) {
+  if (["type", "compose", "select"].includes(command)) {
+    const module = modules.get("textinput");
+    const id = p.focused;
+    const field = id && module?.field(p, id);
+    if (!module || !id || !field) throw Error("text command needs a focused text field");
+    if (command === "select") {
+      if (args.length !== 2 || args.some((a) => !/^\d+$/.test(a)))
+        throw Error("use select <start> <end> (UTF-16 offsets)");
+      module.select(p, id, Number(args[0]), Number(args[1]));
+    } else {
+      if (args.length !== 1) throw Error("use " + command + ' "text"');
+      let value;
+      try {
+        value = JSON.parse(args[0]);
+      } catch {
+        value = args[0];
+      }
+      if (typeof value !== "string") throw Error("text must be a string");
+      const next = field.value.slice(0, field.start) + value + field.value.slice(field.end);
+      const caret = field.start + value.length;
+      if (command === "compose") module.edit(p, id, next, caret, caret, true);
+      module.edit(p, id, next, caret, caret);
+    }
+    step(0);
+    return true;
+  }
+  if (command === "key" && p.focused && p.model.doc.requires?.includes("a11y")) {
+    const tree = p.semantics?.() ?? [];
+    const nodes = flat(tree), node = nodes.find((n) => n.id === p.focused);
+    if (!node) return false;
+    if (!["down", "up", "repeat"].includes(args[0]) || args.length < 2 || args.length > 4)
+      throw Error("use key down|up|repeat <key|Space> [shift+control+alt+meta|-] [target]");
+    const mods = args[2] && args[2] !== "-" ? args[2].split("+") : [];
+    if (mods.some((m) => !["shift", "control", "alt", "meta"].includes(m)) || new Set(mods).size !== mods.length)
+      throw Error("unknown or duplicate key modifier");
+    if (mods.some((m) => m !== "shift") || args[3] && args[3] !== node.id) return false;
+    const key = args[1] === "Space" ? " " : args[1];
+    const down = args[0] !== "up";
+    const arrow = ["ArrowRight", "ArrowUp", "ArrowLeft", "ArrowDown"].indexOf(key);
+    const tabs = nodes.find(
+      (n) => ["tab-list", "radio-group"].includes(n.role) && n.children.some((c) => c.id === node.id)
+    );
+    if (node.role === "slider" && (arrow >= 0 || key === "Home" || key === "End")) {
+      if (down && arrow >= 0) p.semanticAction(node.id, arrow < 2 ? "increase" : "decrease");
+      else if (down) {
+        const action = key === "Home" ? "decrease" : "increase";
+        const count = Math.ceil((node.max - node.min) / node.step) + 1;
+        for (let i = 0; i < count && p.semanticAction(node.id, action); i++) step(0);
+      }
+    } else if (tabs && (arrow >= 0 || key === "Home" || key === "End")) {
+      if (down) {
+        const order = p.focusItems?.().map((n) => n.id);
+        const enabled = tabs.children.filter((n) => !n.states.disabled).sort((a, b) => order ? order.indexOf(a.id) - order.indexOf(b.id) : 0);
+        const at = enabled.findIndex((n) => n.id === node.id);
+        const target = key === "Home" ? enabled[0] : key === "End" ? enabled.at(-1) : enabled[(at + (arrow < 2 ? 1 : -1) + enabled.length) % enabled.length];
+        if (target) {
+          p.semanticAction(target.id, "focus");
+          if (tabs.role === "radio-group" && target.states.checked !== true)
+            p.semanticAction(target.id, "tap");
+        }
+      }
+    } else if (["button", "switch", "tab", "checkbox", "radio", "link"].includes(node.role) && (key === " " || key === "Enter")) {
+      if (key === " " && args[0] === "down") spaceDown.set(p, node.id);
+      const activate = key === " " ? !down && node.role !== "link" && spaceDown.get(p) === node.id : down && !["checkbox", "radio"].includes(node.role);
+      if (activate && !(node.role === "radio" && node.states.checked === true))
+        p.semanticAction(node.id, "tap");
+    } else if (key === "Tab") return false;
+    if (key === " " && !down) spaceDown.delete(p);
+    step(0);
+    return true;
+  }
+  if (command === "snapshot" && args.length === 1 && args[0] === "--semantics") {
+    output.push({ ...snapshot(), semantics: p.semantics?.() ?? [] });
+    return true;
+  }
+  if (command !== "semantics" && command !== "semantic") return false;
+  if (command === "semantics") {
+    if (args.length > 1) throw Error("use semantics [id]");
+    const tree = p.semantics?.() ?? [];
+    const find = (nodes) => {
+      for (const node of nodes) {
+        if (node.id === args[0]) return node;
+        const found = find(node.children);
+        if (found) return found;
+      }
+    };
+    if (args.length && !find(tree)) throw Error('unknown semantic id "' + args[0] + '"');
+    output.push(args.length ? find(tree) : tree);
+  } else {
+    if (args.length !== 2 || !["tap", "increase", "decrease", "focus"].includes(args[1]))
+      throw Error("use semantic <id> tap|increase|decrease|focus");
+    p.semanticAction?.(args[0], args[1]);
+    step(0);
+  }
+  return true;
+}
+export {
+  semanticCommand
+};

package/modules/a11y/core/index.d.ts

@@ -0,0 +1,6 @@
+import type { Module } from '../../../packages/core/src/modules.js';
+import { runtime } from './runtime.js';
+export * from './types.js';
+export declare const a11y: Module & {
+    runtime: typeof runtime;
+};

package/modules/a11y/core/index.js

@@ -0,0 +1,34 @@
+import { VERBOSE as V } from "../../../packages/core/src/flags.js";
+import { installPaintedBounds } from "./bounds.js";
+import { installTextSemantics } from "./text.js";
+import { after } from "../manifest.js";
+import { entries } from "./registry.js";
+import { validate } from "./validate.js";
+import { install, prepare, runtime } from "./runtime.js";
+export * from "./types.js";
+const a11y = {
+  name: "a11y",
+  runtime,
+  after,
+  entries,
+  init(modules, shared) {
+    install(shared.Player, modules);
+    if (V) {
+      installTextSemantics(runtime, modules);
+      installPaintedBounds(runtime, modules);
+    }
+    return {
+      ...a11y,
+      init: void 0,
+      resolve(model) {
+        prepare(model);
+      }
+    };
+  },
+  load(model, _raw, d) {
+    validate(model, d);
+  }
+};
+export {
+  a11y
+};

package/modules/a11y/core/registry.d.ts

@@ -0,0 +1,6 @@
+import type { ObjShape } from '../../../packages/core/src/registry.js';
+import type { ModuleEntry } from '../../../packages/core/src/modules.js';
+export declare const states: string[];
+export declare const roles: string[];
+export declare const shape: ObjShape;
+export declare const entries: ModuleEntry[];

package/modules/a11y/core/registry.js

@@ -0,0 +1,48 @@
+const states = "checked pressed selected expanded disabled hidden required readonly modal".split(" ");
+const roles = "button checkbox switch radio radio-group slider tab tab-list toolbar grid row gridcell link list list-item group dialog alert-dialog heading text img none progressbar meter status".split(
+  " "
+);
+const str = { k: "str" };
+const bool = { k: "alt", of: [{ k: "bool" }, str] };
+const shape = {
+  k: "obj",
+  element: "a11y",
+  req: ["role"],
+  p: {
+    role: { k: "str", of: roles },
+    label: str,
+    hint: str,
+    value: str,
+    valueText: { ...str, markup: "value-text" },
+    level: { k: "alt", of: [{ k: "num", int: true, min: 1, max: 6 }, str] },
+    href: str,
+    controls: str,
+    activate: str,
+    ...Object.fromEntries(states.map((k) => [k, bool])),
+    checkedMixed: { ...bool, markup: "checked-mixed" },
+    live: { k: "str", of: ["off", "polite", "assertive"] },
+    min: { k: "num" },
+    max: { k: "num" },
+    step: { k: "num", gt: 0 },
+    bounds: {
+      k: "tup",
+      min: 4,
+      of: [{ k: "num" }, { k: "num" }, { k: "num", min: 0 }, { k: "num", min: 0 }]
+    }
+  }
+};
+const entries = [
+  {
+    target: "node",
+    shapes: { a11y: shape },
+    elements: {
+      a11y: { shape, target: { attribute: "property", choices: ["a11y"], default: "a11y" } }
+    }
+  }
+];
+export {
+  entries,
+  roles,
+  shape,
+  states
+};