animl-cli 0.0.0-stage → 0.1.1

package/modules/a11y-dom/AUTHORING.md

@@ -0,0 +1,35 @@
+# Native accessible controls
+
+Import `@anima-format/web/a11y-dom` (which imports `a11y-actions` and `a11y`).
+Use node `<a11y>` elements or JSON `a11y` objects as described in
+[the core authoring guide](../a11y/AUTHORING.md). No `a11y-dom` format feature is
+needed: the module is browser-only. Import `@anima-format/web/focus` and declare
+`requires="a11y focus"` for logical focus, shared focus targets and manual traversal.
+
+```xml
+<anima version="0.1" name="mute" grid="20" requires="a11y focus">
+  <bool name="muted"/>
+  <circle id="mute" cx="10" cy="10" r="8" fill="#000">
+    <a11y role="checkbox" label="Mute" checked="muted" bounds="2 2 16 16"/>
+  </circle>
+</anima>
+```
+
+Paint the control yourself; the overlay stays transparent. Bounds are world-grid
+rectangles transformed through the live SVG viewBox mapping, including fit,
+alignment and host resizing. Native buttons, checkboxes, radios, sliders and links
+supply browser keyboard behavior. Give radios a semantic `radio-group` parent.
+Tab lists add arrows and Home/End; disabled tabs are skipped. The focus module's
+policy participates when loaded. Controls with `readonly` reject actions in core;
+the overlay restores their displayed native value after a rejected action.
+
+`icon.semantics` returns a detached tree. `icon.semanticAction(id, action)` invokes
+core and steps/repaints when accepted. `anima:semantics` carries the actual diff
+(`added`, `removed`, `changed`) after a tree change. Manual
+`icon.focusNext()` / `icon.focusPrevious()` invoke the focus module's traversal
+policy and return whether focus changed. The `focus` module must be loaded.
+
+For a host-owned interface, set `a11y="off"`; tree APIs and diff events continue
+working. Removing the attribute restores the overlay from the current tree.
+Root document `a11y` remains the existing host-level API; node semantics do not
+rewrite its label, role or activation configuration.

package/modules/a11y-dom/SPEC.md

@@ -0,0 +1,165 @@
+# Accessibility DOM overlay
+
+The optional `@anima-format/web/a11y-dom` entry imports `a11y-actions` and maps the
+`SemanticNode` forest to native elements in the icon's shadow root. It adds no
+format fields: JSON and AniML use the existing node `a11y` registry and diagnostics
+in [a11y/SPEC.md](../a11y/SPEC.md). It has no core runtime or renderer backend.
+Root document accessibility (SPEC §10) retains its existing behavior. Without this
+entry, neither the semantic DOM nor its observers and step wrapper are installed.
+
+## Elements and state
+
+| Semantic role | Native element / role |
+| --- | --- |
+| button, switch, tab | button; switch has role switch and aria-checked |
+| checkbox | input type checkbox; checked=mixed sets indeterminate |
+| radio | input type radio; name is the nearest radio-group id |
+| radio-group | div role radiogroup |
+| slider | input type range with min/max/step and numeric value; valueText sets aria-valuetext independently of numeric value |
+| link | a with href |
+| progressbar, meter | div with matching role and aria-valuemin/max/now/text; missing progressbar value omits aria-valuenow |
+| status | div role status; aria-live polite by default |
+| heading | h1–h6 according to level (default 1) |
+| toolbar, grid, row, gridcell | div with matching role; gridcells are focusable |
+| tab-list, list, list-item | div role tablist, list, listitem |
+| group, dialog, alert-dialog, text, img | div role group, dialog, alertdialog, text, img |
+
+Labels use aria-label; hint uses aria-description. Leaf non-input elements also
+carry label text (including live region text). Checked, pressed, selected,
+expanded, disabled, required, readonly, modal and live map to their ARIA attributes.
+Native controls also receive disabled. Missing states remove stale attributes.
+Hidden nodes are absent from the core tree and removed from the DOM with their
+subtrees. Opacity does not remove nodes from the accessibility tree.
+
+Every semantic element is absolutely positioned, transparent and has
+`pointer-events: none`. Pointer hit testing reaches the drawing and its listeners;
+semantic controls remain focusable and receive keyboard and assistive-technology
+activation dispatched directly on the element. Native range appearance is removed;
+thumbs and tracks have zero size and no border/background in Chromium and Firefox.
+The drawing owns all visible control ink. World-grid
+bounds map through the live SVG screen matrix relative to the host, including
+viewBox origin, fit, alignment and resizing. Nested elements offset their bounds
+by the semantic parent's world origin. For canvas output, the canvas entry exposes an internal `canvasBox(icon, bounds)` adapter to its
+retained renderer's `nodeBox(bounds)`. It maps resolved world node boxes through the current
+viewport and actual canvas client rectangle, removing backing-pixel ratio from CSS coordinates.
+The overlay derives its world-to-host mapping from that adapter; the canvas entry is optional and
+is not imported at runtime by the overlay. Fit, alignment, resize and pixel-ratio handling stay in
+the canvas backend. This maps the current semantic geometry boxes; exact stroke extents remain an
+open part of `a11y.tree-bounds`.
+
+Native click/input/change events invoke semanticAction. Radios use change, so
+activating an already-checked radio does not toggle it off. A range target is reached through
+core increase/decrease actions until reached, clamped or no progress is possible;
+there is no independent input write or toggle policy. Rejected readonly actions
+restore the native displayed state. Native keyboard behavior handles buttons,
+checkboxes, radios, ranges and links. Events within the semantic overlay do not
+also trigger root-level keyboard or drawn pointer handlers.
+
+Tabs use native buttons with role tab: Enter activates on key down and Space on
+key up through the same tap action as assistive-technology clicks. Focus alone does
+not select a tab (manual activation). An author can opt into automatic activation
+by adding a node `focus` listener that fires the same selection trigger as
+`a11y.activate` (requires `focus`), for example
+`<listener on="focus" target="week" fire="pickWeek"/>`. Selection triggers can update
+a shared selected-index data value and derive each tab's `selected` state; arrow
+roving and selection remain independent.
+
+Tab-list and radio-group supply keyboard roving: arrows move between enabled direct children,
+wrapping at the edge, Home/End choose the first/last. Current DOM focus takes
+precedence over selection for the one tab stop; otherwise the selected tab or checked radio, then first enabled
+child is used. Radio arrows select through semanticAction; tabs retain manual activation. When focus is loaded, its item ordering participates; focusing the chosen tab
+synchronizes logical focus directly without a second traversal. The host input
+capture handler leaves semantic keys to these native controls, so each key has
+one routing owner. A child control action does not also activate a semantic parent;
+a noninteractive semantic child still delegates to its enclosing control.
+This uses host routing guards; neither the overlay nor host stops
+DOM propagation. Ancestor page listeners receive keyboard and pointer events, and
+Anima calls `preventDefault()` only when its handling consumes the browser default.
+Tab navigation is
+left to the browser. Controls relations use unique semantic ids within the host shadow root,
+matching the prefixed ids in the shared tree; hidden target nodes remain absent.
+
+## Updates and focus
+
+After each step of an attached host player, the module compares the old and new
+forests with player.semanticDiff. Added elements are created; removed elements are
+deleted; changed nodes update attributes/properties in place. A tag change replaces
+the element; stable tags retain identity. Child order/parent changes move retained
+elements only when needed. A parent's changed bounds also adjust descendant offsets.
+An unchanged tree does not rebuild elements or dispatch a semantics event.
+
+With focus loaded, existing semantic elements serve as focus targets. The focus
+module creates its original small proxies only for targets without semantic nodes;
+semantic nodes omitted from the active overlay have no duplicate proxy. Native
+focus calls semanticAction(id, 'focus'); logical focus calls focus() on the same
+element. Blur leaving the host clears logical focus. The focus module continues to
+own inner-tab-stop and single-entry/exit policy. Topology and overlay-policy changes
+refresh its target map through the internal anima:overlay event.
+
+## Host API and lifecycle
+
+- `icon.semantics`: read-only getter returning a detached SemanticNode forest.
+- `icon.semanticAction(id, action)`: returns the core action result; accepted actions
+  step(0) and repaint through the same host path as scheduled steps, dispatching all
+  resulting `anima:event` (including dotted component events) and `anima:state` notifications. Unless explicitly paused, an accepted action also wakes the host
+  so queued machine entry actions and ongoing animation can finish without the focus module. Unknown ids/unavailable actions return false.
+- `anima:semantics`: CustomEvent whose detail is the actual SemanticDiff, emitted
+  after a changed tree is applied, including while the overlay is disabled.
+- `a11y="off"`: removes semantic elements. Logical APIs/events continue. Removing
+  the attribute restores the current tree. This adds no document-format spelling.
+- `icon.focusNext()` / `icon.focusPrevious()`: the optional focus web entry exposes
+  these direct calls to focusTraverse(next/previous); return false without a player.
+
+Reload/destroy restore the previous player step method and remove observers and
+elements. Late module loading attaches existing icons; future loadModel calls also
+attach, including asynchronous asset completion. A document without node a11y keeps
+its existing host accessibility behavior.
+
+## Evidence and rationale
+
+The browser is the oracle for this layer: both engines exercise native events and
+locator.ariaSnapshot() exposes actual browser accessibility roles/states. There is
+no faithful local Rive headless counterpart to a shadow-DOM overlay, so its oracle
+rows have explicit skip dispositions in REPORT.md. No Player.step output changes
+are introduced: this module consumes the existing tree and action contract.
+
+This independent implementation follows the browser-binding decision in
+DESIGN §3.4 and the size/lifecycle observations in
+[the web-runtime research](../../docs/research/rive-web-runtime.md) (§§2, 7, 8).
+It uses browser controls and Anima's existing diff/focus policies; no Rive code or
+CLI documentation text was copied.
+
+With the optional `a11y-text` entry, the same overlay consumes inferred text labels and measured
+layout bounds as specified in [a11y/TEXT.md](../a11y/TEXT.md). Renderer rebuilds restore the layer
+without advancing the player.
+
+## Optional toolbar and grid navigation
+
+Import `@anima-format/web/a11y-navigation` (includes `a11y-dom`) for native roving
+on these roles. This separate entry keeps the base overlay within its fixed budget.
+A toolbar contains direct semantic controls; a grid contains direct semantic rows,
+each containing direct gridcells. Hidden descendants are absent; disabled or
+focus-ineligible controls/cells are skipped. Structural containers are not tab stops.
+Each toolbar/grid has one tab stop: the currently focused enabled item, or the first
+enabled item. Tab/Shift+Tab leave the composite using browser navigation.
+
+Toolbar item order follows the focus module's ordering when installed, otherwise
+semantic child order. Toolbar Left/Right and Up/Down move in item order and wrap, matching the tab-list
+policy in both orientations. Home/End choose the first/last enabled item. Focus
+does not activate a control. Grid Left/Right move among enabled cells in the current
+row. Up/Down keep the authored column index in the immediately adjacent semantic
+row; if that row or an enabled cell at that column is missing, focus stays put.
+Home/End choose the first/last enabled cell in the row; Ctrl+Home/End choose the
+first/last enabled cell of the whole grid. Gridcells are implicit focus targets
+with the focus module, and remain native tab targets without it.
+
+Horizontal row edges use the row's existing `focus.edge`: `stop` (default) retains
+focus, `closed-loop` wraps within that row, and `parent-scope` delegates to the
+focus module's existing spatial traversal in the enclosing scope. Vertical grid
+edges retain focus. Handled navigation keys prevent the browser scrolling default.
+Page Up/Down always bubble unprevented for page-owned calendar/month navigation.
+Other modified shortcuts also pass through (except grid Ctrl+Home/End).
+
+Focus availability is independent of semantic visibility. A disabled focus scope
+keeps its role and semantic subtree in the accessibility tree; eligible descendants
+still focus and rove. Only semantic hidden/invisible state removes the subtree.

package/modules/a11y-dom/examples/mute.ani

@@ -0,0 +1,28 @@
+{
+  "anima": "0.1",
+  "name": "mute",
+  "grid": 20,
+  "requires": ["a11y", "focus"],
+  "inputs": {
+    "muted": {
+      "type": "bool"
+    }
+  },
+  "nodes": [
+    {
+      "id": "mute",
+      "type": "circle",
+      "center": [10, 10],
+      "r": 8,
+      "fill": {
+        "color": "#000"
+      },
+      "a11y": {
+        "role": "checkbox",
+        "label": "Mute",
+        "checked": "muted",
+        "bounds": [2, 2, 16, 16]
+      }
+    }
+  ]
+}

package/modules/a11y-dom/examples/mute.animl

@@ -0,0 +1,6 @@
+<anima version="0.1" name="mute" grid="20" requires="a11y focus">
+  <bool name="muted"/>
+  <circle id="mute" cx="10" cy="10" r="8" fill="#000">
+    <a11y role="checkbox" label="Mute" checked="muted" bounds="2 2 16 16"/>
+  </circle>
+</anima>

package/modules/a11y-dom/examples/navigation.ani

@@ -0,0 +1,152 @@
+{
+  "anima": "0.1",
+  "name": "navigation",
+  "grid": 20,
+  "requires": ["a11y", "focus"],
+  "inputs": {
+    "bold": {
+      "type": "bool"
+    }
+  },
+  "nodes": [
+    {
+      "id": "tools",
+      "type": "group",
+      "children": [
+        {
+          "id": "bold",
+          "type": "rect",
+          "x0": 1,
+          "y0": 1,
+          "w": 4,
+          "h": 4,
+          "fill": {
+            "color": "#000"
+          },
+          "a11y": {
+            "role": "button",
+            "label": "Bold",
+            "pressed": "bold"
+          }
+        },
+        {
+          "id": "help",
+          "type": "rect",
+          "x0": 6,
+          "y0": 1,
+          "w": 4,
+          "h": 4,
+          "fill": {
+            "color": "#000"
+          },
+          "a11y": {
+            "role": "button",
+            "label": "Help"
+          }
+        }
+      ],
+      "a11y": {
+        "role": "toolbar",
+        "label": "Formatting"
+      }
+    },
+    {
+      "id": "dates",
+      "type": "group",
+      "children": [
+        {
+          "id": "week1",
+          "type": "group",
+          "children": [
+            {
+              "id": "day1",
+              "type": "rect",
+              "x0": 1,
+              "y0": 7,
+              "w": 4,
+              "h": 4,
+              "fill": {
+                "color": "#000"
+              },
+              "a11y": {
+                "role": "gridcell",
+                "label": "1"
+              }
+            },
+            {
+              "id": "day2",
+              "type": "rect",
+              "x0": 6,
+              "y0": 7,
+              "w": 4,
+              "h": 4,
+              "fill": {
+                "color": "#000"
+              },
+              "a11y": {
+                "role": "gridcell",
+                "label": "2"
+              }
+            }
+          ],
+          "a11y": {
+            "role": "row"
+          },
+          "focus": {
+            "enabled": false,
+            "scope": true,
+            "edge": "closed-loop"
+          }
+        },
+        {
+          "id": "week2",
+          "type": "group",
+          "children": [
+            {
+              "id": "day3",
+              "type": "rect",
+              "x0": 1,
+              "y0": 12,
+              "w": 4,
+              "h": 4,
+              "fill": {
+                "color": "#000"
+              },
+              "a11y": {
+                "role": "gridcell",
+                "label": "3"
+              }
+            },
+            {
+              "id": "day4",
+              "type": "rect",
+              "x0": 6,
+              "y0": 12,
+              "w": 4,
+              "h": 4,
+              "fill": {
+                "color": "#000"
+              },
+              "a11y": {
+                "role": "gridcell",
+                "label": "4"
+              }
+            }
+          ],
+          "a11y": {
+            "role": "row"
+          },
+          "focus": {
+            "enabled": false,
+            "scope": true,
+            "edge": "closed-loop"
+          }
+        }
+      ],
+      "a11y": {
+        "role": "grid",
+        "label": "Dates"
+      }
+    }
+  ]
+}

package/modules/a11y-dom/examples/navigation.animl

@@ -0,0 +1,35 @@
+<anima version="0.1" name="navigation" grid="20" requires="a11y focus">
+  <bool name="bold"/>
+  <group id="tools">
+    <a11y role="toolbar" label="Formatting"/>
+    <rect id="bold" x0="1" y0="1" width="4" height="4" fill="#000">
+      <a11y role="button" label="Bold" pressed="bold"/>
+    </rect>
+    <rect id="help" x0="6" y0="1" width="4" height="4" fill="#000">
+      <a11y role="button" label="Help"/>
+    </rect>
+  </group>
+  <group id="dates">
+    <a11y role="grid" label="Dates"/>
+    <group id="week1">
+      <a11y role="row"/>
+      <focus enabled="false" scope="true" edge="closed-loop"/>
+      <rect id="day1" x0="1" y0="7" width="4" height="4" fill="#000">
+        <a11y role="gridcell" label="1"/>
+      </rect>
+      <rect id="day2" x0="6" y0="7" width="4" height="4" fill="#000">
+        <a11y role="gridcell" label="2"/>
+      </rect>
+    </group>
+    <group id="week2">
+      <a11y role="row"/>
+      <focus enabled="false" scope="true" edge="closed-loop"/>
+      <rect id="day3" x0="1" y0="12" width="4" height="4" fill="#000">
+        <a11y role="gridcell" label="3"/>
+      </rect>
+      <rect id="day4" x0="6" y0="12" width="4" height="4" fill="#000">
+        <a11y role="gridcell" label="4"/>
+      </rect>
+    </group>
+  </group>
+</anima>

package/modules/a11y-dom/manifest.source

@@ -0,0 +1,22 @@
+export const after = ['a11y-actions'];
+export default {
+  name: 'a11y-dom',
+  summary:
+    'Browser entry: mirrors the semantic tree as real ARIA elements inside <anima-icon> for screen readers.',
+  after,
+  web: [
+    { name: 'a11y-dom', budget: 2176, over: 'a11y-actions' },
+    { name: 'a11y-navigation', budget: 1536, over: 'a11y-dom' },
+  ],
+  adapters: {
+    'packages/web/src/a11y-dom.ts': 'web/index.ts',
+    'packages/web/src/a11y-navigation.ts': 'web/navigation.ts',
+  },
+  exports: {
+    'web:./a11y-dom': 'packages/web/src/a11y-dom.ts',
+    'web:./a11y-navigation': 'packages/web/src/a11y-navigation.ts',
+  },
+  tests: ['modules/a11y-dom/test/**/*.test.ts'],
+  conformance: [],
+  docs: ['modules/a11y-dom/SPEC.md'],
+};

package/modules/assetio/SPEC.md

@@ -0,0 +1,16 @@
+# Asset host IO
+
+Internal split of the assets browser entry: source resolution, policy and image preloading.
+`@anima-format/web/assets` imports this entry automatically; no additional `requires` token
+or document fields. Core remains pure and DOM-free. The independent byte budget measures
+this IO separately; assets is measured over assetio. This follows the optional host consumer
+boundary in [web research](../../docs/research/rive-web-runtime.md) §1.
+
+Asset I/O composes a previously installed `AnimaIcon.loadAssets` loader rather than replacing it.
+This preserves font preloading when the fonts entry arrives first. All composed loaders finish
+before scene instantiation. No font decoding policy lives in assetio; it remains in fonts.
+
+Successful browser resource loading returns a player initializer to the base web host. Each host's
+resolved catalog is attached to its own root, nested and repeated players before drawing, including
+players created after initialization. Compiled model reuse never replaces another host's catalog.
+The initial records are shared read-only; resource replacement installs a player-local copy.

package/modules/assetio/manifest.source

@@ -0,0 +1,12 @@
+export default {
+  name: 'assetio',
+  summary:
+    'Browser entry: image source resolution, loading policy and preloading for the assets feature.',
+  after: [],
+  web: [{ name: 'assetio', budget: 768 }],
+  adapters: { 'packages/web/src/assetio.ts': 'web/index.ts' },
+  exports: { 'web:./assetio': 'packages/web/src/assetio.ts' },
+  tests: ['modules/assets/test/**/*.test.ts', 'modules/fonts/test/web/fonts.test.ts'],
+  conformance: [],
+  docs: ['modules/assetio/SPEC.md'],
+};

package/modules/assets/SPEC.md

@@ -0,0 +1,23 @@
+# Assets contract index
+
+The normative contract is [spec/SPEC.md](../../spec/SPEC.md), chapters **assets**, **P5b asset
+pipeline** and **Image wrapping (P5b)**. AniML field descriptors and JSON shapes live in
+core/index.ts; source maps to src. Media byte access lives in modules/media; playback clips live
+in modules/events. Sampling is optional paint-sampling/SVG or Canvas, never added to image-only
+or audio-free entry points.
+
+P5b-7 changes no declaration shape or deterministic player semantics. It supplies nearest clamp
+edge extension, Canvas bilinear clamp and command-scoped CLI codec ownership. SVG combinations
+without a faithful form report unsupported-render as specified in the normative chapter.
+
+Evidence and native limitations are in REPORT.md and probes/row-dispositions.json. A native
+skip describes a missing observation route; it is not evidence of native equality. Historical
+failure measurements and all oracle limits remain unchanged.
+
+## Data image resource selection
+
+An image's discrete string `asset` slot can be bound to an image data property with `data bind`.
+The JSON field and AniML name are both `asset`; `<bind target="pic.asset" value="$picture"/>`
+uses the same slot as a JSON binding object. Rendering resolves a player-local replacement
+catalog before model resources. An unavailable or non-image runtime ID uses the authored image
+as a deterministic fallback; authored unknown/non-image assets retain their existing diagnostics.

package/modules/assets/capabilities/assets-audio/example.ani

@@ -0,0 +1,60 @@
+{
+  "anima": "0.1",
+  "name": "assets-audio",
+  "grid": 24,
+  "requires": ["assets", "paint", "events"],
+  "nodes": [
+    {
+      "id": "photo",
+      "type": "image",
+      "x0": 0,
+      "y0": 0,
+      "asset": "photo",
+      "width": 4,
+      "height": 4
+    }
+  ],
+  "timelines": {
+    "resize": {
+      "duration": 1,
+      "tracks": {
+        "photo.width": [
+          [0, 4],
+          [1, 8]
+        ]
+      },
+      "events": [
+        [0.5, "ping"]
+      ]
+    }
+  },
+  "machine": {
+    "layers": {
+      "main": {
+        "initial": "active",
+        "states": {
+          "active": {
+            "play": "resize"
+          }
+        }
+      }
+    }
+  },
+  "assets": {
+    "photo": {
+      "type": "image",
+      "source": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAAG0lEQVR4AWP8r8HwnwEPYGIgAJgYCAAmBgIAABjwAi5tDXySAAAAAElFTkSuQmCC",
+      "width": 8,
+      "height": 4
+    },
+    "tone": {
+      "type": "audio",
+      "source": "data:audio/wav;base64,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"
+    }
+  },
+  "eventDefs": {
+    "ping": {
+      "audio": "tone"
+    }
+  }
+}

package/modules/assets/capabilities/assets-audio/example.animl

@@ -0,0 +1,16 @@
+<anima version="0.1" name="assets-audio" grid="24" requires="assets paint events">
+  <asset name="photo" type="image"
+      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAAG0lEQVR4AWP8r8HwnwEPYGIgAJgYCAAmBgIAABjwAi5tDXySAAAAAElFTkSuQmCC"
+      width="8" height="4"/>
+  <asset name="tone" type="audio"
+      src="data:audio/wav;base64,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"/>
+  <image id="photo" asset="photo" x0="0" y0="0" width="4" height="4"/>
+  <event-def name="ping" audio="tone"/>
+  <timeline name="resize" duration="1">
+    <track target="photo.width">0 4; 1 8</track>
+    <event at="0.5" name="ping"/>
+  </timeline>
+  <layer name="main" initial="active">
+    <state name="active" play="resize"/>
+  </layer>
+</anima>