animl 0.0.0-stage → 0.1.1

package/modules/machine/core/runtime.js

@@ -0,0 +1,335 @@
+import { reached, snapTime, foldTime } from "../../../packages/core/src/time.js";
+import { sampleTrack, mixValues } from "../../../packages/core/src/player.js";
+import {
+  states,
+  anyEdges,
+  transitions,
+  compiledActions
+} from "./types.js";
+let sample = sampleTrack, mixAny = mixValues;
+function install(s, m) {
+  sample = s;
+  mixAny = m;
+}
+const clamp = (v) => Math.max(0, Math.min(1, v));
+const local = (t, time) => t.loop === "once" ? Math.min(t.duration, snapTime(time, t.duration)) : foldTime(time, t.duration, t.loop === "pingpong");
+const compare = (a, b, op) => {
+  if (op === "==") return a === b;
+  if (op === "!=") return a !== b;
+  if (op === "<") return a < b;
+  if (op === "<=") return a <= b;
+  if (op === ">") return a > b;
+  return a >= b;
+};
+class MachinePolicy {
+  p;
+  base;
+  runs = /* @__PURE__ */ new Map();
+  originalStates = /* @__PURE__ */ new WeakMap();
+  originalTransitions = /* @__PURE__ */ new WeakMap();
+  previous = /* @__PURE__ */ new Map();
+  slots;
+  constructor(p, base) {
+    this.p = p;
+    this.base = base;
+    this.slots = new Map(p.addrs.map((a, i) => [a, i]));
+    for (const [n, i] of p.model.inputs) if (i.type !== "trigger") this.previous.set(n, i.def);
+  }
+  random() {
+    return this.p.randomSource.next(this.p.model.doc.machineSeed ?? 1831565813, "machine");
+  }
+  get busy() {
+    return !!this.base?.busy;
+  }
+  states = () => this.base?.states() ?? {};
+  inspect = () => this.base?.inspect() ?? [];
+  pivot = (p, n) => this.base?.pivot(p, n) ?? p.model.nodes[n].raw.pivot ?? [0, 0];
+  original(s) {
+    return this.originalStates.get(s) ?? s;
+  }
+  transition(t) {
+    return this.originalTransitions.get(t) ?? t;
+  }
+  operand(o) {
+    if (typeof o !== "object") return o;
+    if (o.layout !== void 0) return this.p.machineLayout?.(o.layout) ?? 0;
+    if (o.focus !== void 0) return this.p.machineFocus?.(o.focus) ?? false;
+    if (o.component !== void 0) return this.p.get(o.component);
+    const [, , w, h] = this.p.model.viewBox;
+    return o.artboard === "width" ? w : o.artboard === "height" ? h : w / h;
+  }
+  allowed(t, r) {
+    const o = transitions.get(t), d = this.runs.get(r);
+    if (o?.disabled) return false;
+    if (o?.change) {
+      const a = this.previous.get(o.change.input), b = this.p.get(o.change.input);
+      if (d.changed.has(this.transition(t)) || !(o.change.mode === "changed" ? a !== b : o.change.mode === "increased" ? b > a : b < a))
+        return false;
+    }
+    return !o?.guard || compare(this.operand(o.guard.left), this.operand(o.guard.right), o.guard.op);
+  }
+  enter(run, from, to, t, carry) {
+    const r = run;
+    let d = this.runs.get(r);
+    if (!d) {
+      const cloned = r.m.states.map((s) => {
+        const c = {
+          ...s,
+          on: s.on.filter((tr) => !transitions.get(tr)?.disabled).map((tr) => {
+            const ct = { ...tr };
+            transitions.set(ct, transitions.get(tr));
+            this.originalTransitions.set(ct, tr);
+            return ct;
+          })
+        };
+        states.set(c, states.get(s));
+        this.originalStates.set(c, s);
+        return c;
+      });
+      r.m = { ...r.m, states: cloned };
+      d = { eligible: () => false, consumed: /* @__PURE__ */ new Set(), changed: /* @__PURE__ */ new Set() };
+      this.runs.set(r, d);
+      to = cloned[r.state];
+    }
+    const options = t && transitions.get(t);
+    if (from) {
+      if (options?.continue && !reached(carry, t.blend) && !this.p.reducedMotion)
+        d.outgoing = {
+          writes: r.w[r.state],
+          state: from,
+          time: r.time,
+          frozen: r.frozen,
+          reduced: d.reduced,
+          resumed: d.resumed
+        };
+      else d.outgoing = void 0;
+      this.act(states.get(from)?.exitActions);
+    }
+    const reduced = d.reduced, resumed = d.resumed ?? -1;
+    d.reduced = this.p.reducedMotion;
+    d.resumed = void 0;
+    d.pending = void 0;
+    this.act(options?.actions);
+    this.act(states.get(to)?.enterActions);
+    if (options?.change) d.changed.add(this.transition(t));
+    for (const n of t?.triggers ?? []) d.consumed.add(n);
+    d.chosen = void 0;
+    if (states.get(to)?.kind === "exit" && from) {
+      const at = r.frozen >= 0 ? r.frozen : from.play === void 0 ? 0 : this.local(this.p.model.timelines[from.play], r.time, from.speed, run);
+      r.w[r.m.states.indexOf(to)] = new Map(
+        [...r.w[r.state]].map(([k, sampler]) => {
+          const value = states.get(from)?.children ? this.blended(r, from, this.p.addrs[k], r.time, r.frozen, reduced, resumed) : sampler(at);
+          return [k, () => value];
+        })
+      );
+    }
+    this.base?.enter(
+      run,
+      from && this.original(from),
+      this.original(to),
+      t && this.transition(t),
+      carry
+    );
+    const info = states.get(to);
+    if (info?.children) {
+      const keys = new Set(
+        info.children.flatMap((c) => this.p.model.timelines[c.timeline].tracks.map((t2) => t2.addr))
+      );
+      r.w[r.m.states.indexOf(to)] = new Map(
+        [...keys].map((addr) => [this.slots.get(addr), () => this.blended(r, to, addr)])
+      );
+    }
+    if (options?.endActions) {
+      if (this.p.reducedMotion || reached(carry, t.blend)) this.act(options.endActions);
+      else d.pending = { transition: t, duration: t.blend, elapsed: carry };
+    }
+  }
+  act(a) {
+    if (!a) return;
+    this.p.act({ on: "", target: -1, pad: 0, ...compiledActions.get(a) });
+  }
+  prepare(run, s, dt, eligible) {
+    const r = run, d = this.runs.get(r);
+    d.eligible = eligible;
+    if (this.p.reducedMotion) {
+      d.reduced = true;
+      d.resumed = void 0;
+    } else if (d.resumed === void 0 && (d.reduced || r.frozen >= 0)) d.resumed = r.time;
+    d.chosen = void 0;
+    d.consumed.clear();
+    d.changed.clear();
+    this.base?.prepare(
+      run,
+      this.original(s),
+      dt,
+      (t) => !transitions.get(t)?.disabled && eligible(t)
+    );
+    if (d.pending && (this.p.reducedMotion || reached(d.pending.elapsed += dt, d.pending.duration))) {
+      this.act(transitions.get(d.pending.transition)?.endActions);
+      d.pending = void 0;
+    }
+    if (d.outgoing && r.fade) {
+      d.outgoing.time += dt;
+      const out = d.outgoing, st = out.state;
+      const time = out.frozen >= 0 ? out.frozen : st.play === void 0 ? 0 : this.childClock(this.p.model.timelines[st.play], out.time, st.speed);
+      for (const [k, sampler] of out.writes)
+        r.fade.from.set(
+          k,
+          states.get(st)?.children ? this.blended(
+            r,
+            st,
+            this.p.addrs[k],
+            out.time,
+            out.frozen,
+            out.reduced,
+            out.resumed ?? -1
+          ) : sampler(time)
+        );
+    } else d.outgoing = void 0;
+  }
+  duration(t, speed, run) {
+    return this.base?.duration(t, speed, run) ?? t.duration / speed;
+  }
+  finished(t, elapsed, run) {
+    const r = run;
+    return this.base?.finished(t, elapsed, run) ?? reached(elapsed * r.m.states[r.state].speed, t.duration);
+  }
+  local(t, time, speed, run) {
+    return this.base?.local(t, time, speed, run) ?? local(t, time * speed);
+  }
+  rest(run, s) {
+    return this.base?.rest(run, this.original(s)) ?? false;
+  }
+  gate(t, s, elapsed, run) {
+    const r = run, d = this.runs.get(r), o = transitions.get(t);
+    const eligible = (tr) => this.allowed(tr, r) && (this.base?.gate(this.transition(tr), this.original(s), elapsed, run) ?? true) && (transitions.get(tr)?.exitRatio === void 0 || reached(
+      elapsed,
+      transitions.get(tr).exitRatio === 0 ? 0 : this.duration(this.p.model.timelines[s.play], s.speed, run) * transitions.get(tr).exitRatio
+    ));
+    if (!eligible(t)) return false;
+    if (states.get(s)?.kind === "random" && !anyEdges.has(this.transition(t))) {
+      if (d.chosen === void 0) {
+        const choices = s.on.filter(
+          (tr) => !anyEdges.has(this.transition(tr)) && !tr.triggers.some((n2) => d.consumed.has(n2)) && d.eligible(tr) && eligible(tr) && (transitions.get(tr)?.weight ?? 1) > 0
+        );
+        let n = (choices.length ? this.random() : 0) * choices.reduce((a, tr) => a + (transitions.get(tr)?.weight ?? 1), 0);
+        d.chosen = choices.find((tr) => (n -= transitions.get(tr)?.weight ?? 1) < 0) ?? null;
+      }
+      if (d.chosen !== t) return false;
+    }
+    if (o?.blendRatio !== void 0)
+      t.blend = o.blendRatio === 0 ? 0 : this.duration(this.p.model.timelines[s.play], s.speed, run) * o.blendRatio;
+    return true;
+  }
+  carry(t, s, elapsed, run) {
+    if (transitions.get(this.transition(t))?.change) return 0;
+    const ratio = transitions.get(t)?.exitRatio;
+    if (ratio !== void 0)
+      return Math.max(
+        0,
+        elapsed - (ratio === 0 ? 0 : ratio * this.duration(this.p.model.timelines[s.play], s.speed, run))
+      );
+    return this.base?.carry(this.transition(t), this.original(s), elapsed, run);
+  }
+  resume(run, time) {
+    if (this.base) this.base.resume(run, time);
+    else {
+      const r = run;
+      r.time = time / r.m.states[r.state].speed;
+    }
+  }
+  reduce(t, speed, end, layer, out) {
+    if (this.base) return this.base.reduce(t, speed, end, layer, out);
+    if (end) for (const [time, name] of t.events) out.push({ name, layer, time });
+    return end ? t.duration : 0;
+  }
+  events(t, a, b, closed, layer, out, speed, run, source = t.events) {
+    if (this.base) return this.base.events(t, a, b, closed, layer, out, speed, run, source);
+    a *= speed;
+    b *= speed;
+    const found = [], d = t.duration;
+    for (const [time, name] of source) {
+      const k0 = t.loop === "once" ? 0 : Math.max(0, Math.floor(a / (t.loop === "loop" ? d : 2 * d)) - 1);
+      const k1 = t.loop === "once" ? 0 : Math.min(k0 + 1e4, Math.floor(b / (t.loop === "loop" ? d : 2 * d)) + 1);
+      const seen = /* @__PURE__ */ new Set();
+      for (let k = k0; k <= k1; k++)
+        for (const at of t.loop === "pingpong" && time !== 0 && time !== d ? [time + 2 * k * d, 2 * (k + 1) * d - time] : [time + k * (t.loop === "pingpong" ? 2 * d : d)])
+          if (!seen.has(at) && (closed ? reached(at, a) : !reached(a, at)) && reached(b, at)) {
+            seen.add(at);
+            found.push([at, time, name]);
+          }
+    }
+    found.sort((a2, b2) => a2[0] - b2[0]);
+    for (const [, time, name] of found) out.push({ name, layer, time });
+  }
+  /** Restoring full motion resumes looping blend children; reduced `once` children keep their end. */
+  held(t, reduced) {
+    return !!reduced && (this.p.reducedMotion || t.loop === "once");
+  }
+  childClock(t, elapsed, speed, reduced = false, resumed = -1) {
+    const raw = this.p.model.doc.requires?.includes("motion") ? this.p.model.doc.timelines[t.name] : {};
+    const [start, end] = raw.work ?? [0, t.duration], span = end - start, rate = speed * (raw.speed ?? 1);
+    if (reduced && t.reduced !== "play")
+      return t.reduced === "skip" ? rate < 0 ? end : start : rate < 0 ? start : end;
+    if (resumed >= 0 && t.reduced !== "play")
+      elapsed += (t.reduced === "skip" || !rate ? 0 : span / Math.abs(rate)) - resumed;
+    let x = (rate < 0 ? span : 0) + elapsed * rate;
+    if (t.loop === "once") x = Math.max(0, Math.min(span, snapTime(snapTime(x, 0), span)));
+    else x = foldTime(x, span, t.loop === "pingpong");
+    const at = start + x;
+    const q = raw.quantize;
+    if (!q || at === end) return at;
+    const tick = Math.round(at * q) / q;
+    return Math.max(start, snapTime(at, tick) === tick ? tick : Math.floor(at * q) / q);
+  }
+  blended(r, state, address, elapsed = r.time, frozen = r.frozen, reduced = this.runs.get(r)?.reduced, resumed = this.runs.get(r)?.resumed ?? -1) {
+    const info = states.get(state), children = info.children;
+    const { rest, prop } = this.p.model.addrs.get(address);
+    const mix = prop.discrete ? (a, b, w) => w > 0 ? b : a : mixAny;
+    let weights;
+    if (info.mix.mode === "1d") {
+      const x = info.axis(this.p);
+      let hi = children.findIndex((c) => c.at >= x);
+      if (hi < 0) hi = children.length - 1;
+      const lo = Math.max(0, hi - 1), u = hi === lo ? 1 : clamp((x - children[lo].at) / (children[hi].at - children[lo].at));
+      weights = children.map((_, i) => i === hi ? u : i === lo ? 1 - u : 0);
+    } else weights = children.map((c) => clamp(c.weight(this.p)));
+    const values = children.map((c) => {
+      const t = this.p.model.timelines[c.timeline], track = t.tracks.find((tr) => tr.addr === address);
+      const stopped = reduced || frozen >= 0, held = this.held(t, stopped);
+      const time = this.childClock(t, elapsed, state.speed, held, stopped && !held ? resumed : -1);
+      return track ? sample(track, time, this.p) : rest;
+    });
+    if (info.mix.mode !== "1d") {
+      let v2 = info.mix.mode === "additive" ? values[0] : rest;
+      for (let i = info.mix.mode === "additive" ? 1 : 0; i < values.length; i++)
+        if (weights[i]) v2 = mix(v2, values[i], weights[i]);
+      return v2;
+    }
+    let v = rest, total = 0;
+    for (let i = 0; i < values.length; i++)
+      if (weights[i]) {
+        const next = total + weights[i];
+        v = total === 0 ? values[i] : mix(v, values[i], weights[i] / next);
+        total = next;
+      }
+    return total < 1 ? mix(rest, v, total) : v;
+  }
+  compose(dt, values, events) {
+    const settled = this.base?.compose(dt, values, events) ?? true;
+    for (const n of this.previous.keys()) this.previous.set(n, this.p.get(n));
+    return settled && [...this.runs].every(([r]) => {
+      const s = r.m.states[r.state], info = states.get(s);
+      return !info?.children || info.children.every((c) => {
+        const t = this.p.model.timelines[c.timeline];
+        const raw = this.p.model.doc.requires?.includes("motion") ? this.p.model.doc.timelines[t.name] : {};
+        const [a, b] = raw.work ?? [0, t.duration], rate = s.speed * (raw.speed ?? 1);
+        return this.held(t, this.runs.get(r)?.reduced) && t.reduced !== "play" || rate === 0 || t.loop === "once" && reached(r.time * Math.abs(rate), b - a);
+      });
+    });
+  }
+}
+export {
+  MachinePolicy,
+  install
+};

package/modules/machine/core/svg.d.ts

@@ -0,0 +1,2 @@
+import type { SVGBackend } from '../../../packages/core/src/svg.js';
+export declare const machineSVG: SVGBackend;

package/modules/machine/core/svg.js

@@ -0,0 +1,4 @@
+const machineSVG = {};
+export {
+  machineSVG
+};

package/modules/machine/core/types.d.ts

@@ -0,0 +1,83 @@
+import type { ActionM, LayerM, StateM, TransitionM, Value } from '../../../packages/core/src/load.js';
+import type { Player } from '../../../packages/core/src/player.js';
+export interface Actions {
+    fire?: string | string[];
+    set?: Record<string, number | boolean | string>;
+    toggle?: string | string[];
+    emit?: string;
+}
+export declare const compiledActions: WeakMap<Actions, ActionM>;
+export type Source = number | string | {
+    bind: string;
+};
+export type Operand = number | boolean | {
+    artboard?: 'width' | 'height' | 'aspect';
+    component?: string;
+    focus?: string;
+    layout?: string;
+};
+export interface TransitionOptions {
+    disabled?: boolean;
+    weight?: number;
+    continue?: boolean;
+    exitRatio?: number;
+    blendRatio?: number;
+    actions?: Actions;
+    endActions?: Actions;
+    change?: {
+        input: string;
+        mode: 'changed' | 'increased' | 'decreased';
+    };
+    guard?: {
+        left: Operand;
+        right: Operand;
+        op: '==' | '!=' | '<' | '<=' | '>' | '>=';
+    };
+}
+export interface StateOptions {
+    kind?: 'entry' | 'exit' | 'any' | 'random';
+    reset?: boolean;
+    enterActions?: Actions;
+    exitActions?: Actions;
+    mix?: {
+        mode: '1d' | 'direct' | 'additive';
+        axis?: Source;
+        exit?: number;
+        children: {
+            play: string;
+            at?: number;
+            weight?: Source;
+        }[];
+    };
+}
+export interface Run {
+    m: LayerM;
+    state: number;
+    time: number;
+    frozen: number;
+    w: Map<number, (time: number) => Value>[];
+    fade: null | {
+        from: Map<number, Value>;
+        t: number;
+        dur: number;
+    };
+}
+export interface StateInfo extends StateOptions {
+    children?: {
+        timeline: number;
+        at: number;
+        weight: (p: Player) => number;
+    }[];
+    axis?: (p: Player) => number;
+}
+export declare const states: WeakMap<StateM, StateInfo>;
+export declare const transitions: WeakMap<TransitionM, TransitionOptions>;
+/** Edges inherited from any states: searched first, outside a random state's weighted pick. */
+export declare const anyEdges: WeakSet<TransitionM>;
+declare module '../../../packages/core/src/player.ts' {
+    interface Player {
+        /** Focus module supplies this live reader and wakes onChange after focus changes. */
+        machineFocus?: (target: string) => boolean;
+        machineLayout?: (target: string) => number;
+    }
+}

package/modules/machine/core/types.js

@@ -0,0 +1,10 @@
+const compiledActions = /* @__PURE__ */ new WeakMap();
+const states = /* @__PURE__ */ new WeakMap();
+const transitions = /* @__PURE__ */ new WeakMap();
+const anyEdges = /* @__PURE__ */ new WeakSet();
+export {
+  anyEdges,
+  compiledActions,
+  states,
+  transitions
+};

package/modules/machine/manifest.d.ts

@@ -0,0 +1,31 @@
+export declare const after: string[];
+declare const _default: {
+    after: string[];
+    name: string;
+    summary: string;
+    core: {
+        entry: string;
+        export: string;
+        svg: string;
+        svgExport: string;
+    };
+    web: {
+        name: string;
+        budget: number;
+    }[];
+    adapters: {
+        'packages/core/src/modules/machine/index.ts': string;
+        'packages/core/src/modules/machine/svg.ts': string;
+        'packages/markup/src/machine.ts': string;
+        'packages/web/src/machine.ts': string;
+    };
+    exports: {
+        'core:./machine': string;
+        'markup:./machine': string;
+        'web:./machine': string;
+    };
+    tests: string[];
+    conformance: string[];
+    docs: string[];
+};
+export default _default;

package/modules/machine/manifest.js

@@ -0,0 +1,76 @@
+const after = ["components", "bind", "motion"];
+var manifest_default = {
+  ...{
+    name: "machine",
+    summary: "State machines: layers, states, transitions with conditions, blending and actions.",
+    after: [],
+    core: {
+      entry: "core/index.ts",
+      export: "machine",
+      svg: "core/svg.ts",
+      svgExport: "machineSVG"
+    },
+    web: [{ name: "machine", budget: 6720 }],
+    adapters: {
+      "packages/core/src/modules/machine/index.ts": "core/index.ts",
+      "packages/core/src/modules/machine/svg.ts": "core/svg.ts",
+      "packages/markup/src/machine.ts": "markup/index.ts",
+      "packages/web/src/machine.ts": "web/index.ts"
+    },
+    exports: {
+      "core:./machine": "packages/core/src/modules/machine/index.ts",
+      "markup:./machine": "packages/markup/src/machine.ts",
+      "web:./machine": "packages/web/src/machine.ts"
+    },
+    tests: [
+      "modules/machine/test/**/*.test.ts",
+      "packages/markup/test/corpus.test.ts",
+      "packages/markup/test/names.test.ts",
+      "packages/markup/test/module-fields.test.ts",
+      "packages/markup/test/compile.test.ts",
+      "packages/markup/test/decompile.test.ts",
+      "packages/markup/test/format.test.ts"
+    ],
+    conformance: [
+      "machine-",
+      "state-machine-any-state",
+      "state-machine-blend-1d-data",
+      "state-machine-blend-1d-input",
+      "state-machine-blend-additive",
+      "state-machine-blend-direct",
+      "state-machine-blend-exit-clock",
+      "state-machine-blend-weight-constant",
+      "state-machine-blend-weight-data",
+      "state-machine-blend-weight-input",
+      "state-machine-condition-artboard",
+      "state-machine-condition-component",
+      "state-machine-condition-focus",
+      "state-machine-continue-on-exit",
+      "state-machine-entry-state",
+      "state-machine-exit-state",
+      "state-machine-exit-time-relative",
+      "state-machine-state-entry-actions",
+      "state-machine-state-exit-actions",
+      "state-machine-state-random",
+      "state-machine-state-reset",
+      "state-machine-transition-actions",
+      "state-machine-transition-disabled",
+      "state-machine-transition-duration-relative",
+      "state-machine-transition-end-actions",
+      "state-machine-transition-random-weight",
+      "state-machine-condition-data",
+      "state-machine-literal-asset",
+      "state-machine-literal-boolean",
+      "state-machine-literal-color",
+      "state-machine-literal-enum",
+      "state-machine-literal-string",
+      "state-machine-literal-trigger"
+    ],
+    docs: ["spec/SPEC.md"]
+  },
+  after
+};
+export {
+  after,
+  manifest_default as default
+};

package/modules/machine/markup/index.d.ts

@@ -0,0 +1 @@
+export {};

package/modules/machine/web/index.d.ts

@@ -0,0 +1 @@
+import '../../../packages/web/src/index.js';

package/modules/machine/web/index.js

@@ -0,0 +1,5 @@
+import { machine } from "../core/index.js";
+import { machineSVG } from "../core/svg.js";
+import "../../../packages/web/src/index.js";
+customElements.get("anima-icon").registerModule(machine);
+customElements.get("anima-icon").registerSVGBackend("machine", machineSVG);

package/modules/markup/web/hooks.d.ts

@@ -0,0 +1,3 @@
+import './index.js';
+import '../../markup-animation/web/index.js';
+export { compileAsync } from './index.js';

package/modules/markup/web/hooks.js

@@ -0,0 +1,35 @@
+import "./index.js";
+import "../../markup-animation/web/index.js";
+import { paintMarkup, structuralMarkup } from "../../paint/markup/index.js";
+import { componentMarkup } from "../../components/markup/index.js";
+import { bindMarkup } from "../../bind/markup/index.js";
+import { converterCompiler } from "../../markup-hooks/markup/convert.js";
+import { eventsMarkup } from "../../markup-hooks/markup/events.js";
+import { motionMarkup } from "../../markup-hooks/markup/motion.js";
+import { dataMarkup } from "../../markup-hooks/markup/data.js";
+const Icon = customElements.get("anima-icon");
+const hooks = [
+  ["components", "components", componentMarkup],
+  ["bind", "bind", bindMarkup],
+  ["convert", "convert", converterCompiler],
+  ["events", "events", eventsMarkup],
+  ["motion", "motion", motionMarkup],
+  ["data", "data", dataMarkup],
+  ["paint", "paint", paintMarkup],
+  ["focus", "paint", structuralMarkup]
+];
+function install() {
+  for (const [module, slot, hook] of hooks)
+    if (Icon.modules.has(module) && Icon.markupHooks[slot] !== hook)
+      Icon.registerMarkup(slot, hook);
+}
+const register = Icon.registerModule;
+Icon.registerModule = function(module) {
+  register.call(this, module);
+  install();
+};
+install();
+import { compileAsync } from "./index.js";
+export {
+  compileAsync
+};

package/modules/markup/web/index.d.ts

@@ -0,0 +1,5 @@
+import { libraryCompiler } from 'animl/markup/library-hooks';
+import { compileAsync as compileAsyncBrowser } from 'animl/markup/browser';
+import '../../../packages/web/src/index.js';
+export declare function registerLibraries(hooks: typeof libraryCompiler): void;
+export declare const compileAsync: typeof compileAsyncBrowser;

package/modules/markup/web/index.js

@@ -0,0 +1,40 @@
+import { libraryCompiler } from "animl/markup/library-hooks";
+import { prepareModuleMarkup } from "animl/markup/module-hooks";
+import { registerModule, DOC, FILL, STROKE } from "animl";
+import { compile, compileAsync as compileAsyncBrowser } from "animl/markup/browser";
+import "../../../packages/web/src/index.js";
+const Icon = customElements.get("anima-icon");
+function registerLibraries(hooks) {
+  Icon.registerMarkup("libraries", hooks);
+}
+function prepare() {
+  Object.assign(libraryCompiler, Icon.markupHooks.libraries);
+  prepareModuleMarkup(Icon.markupHooks);
+  for (const m of Icon.modules.values()) registerModule(m);
+  const registry = { DOC, FILL, STROKE };
+  for (const [key, shape] of Object.entries(Icon.registry))
+    Object.assign(registry[key], shape, { p: { ...shape.p } });
+}
+const compileAsync = (source, opts) => {
+  prepare();
+  return compileAsyncBrowser(source, opts);
+};
+Icon.compiler = (source) => {
+  prepare();
+  return compile(source);
+};
+Icon.compilerAsync = (source, file) => {
+  return compileAsync(source, {
+    file,
+    resolve: async (path) => {
+      const response = await fetch(path);
+      if (!response.ok) throw Error(`cannot fetch ${path}`);
+      return response.text();
+    }
+  });
+};
+Icon.refresh();
+export {
+  compileAsync,
+  registerLibraries
+};

package/modules/markup-animation/markup/index.d.ts

@@ -0,0 +1,10 @@
+import type { Compiler, Kind } from '../../../packages/markup/src/compile.js';
+import type { Element } from '../../../packages/markup/src/xml.js';
+declare function frames(c: Compiler, el: Element, p: string, keyValue?: (source: string) => string | undefined): unknown[];
+declare function collectEases(c: Compiler, el: Element, p: string): void;
+export declare const animationMarkup: {
+    frames: typeof frames;
+    collectEases: typeof collectEases;
+    read(c: Compiler, s: string, kind: Kind): unknown;
+};
+export {};