animl 0.0.0-stage → 0.1.0

package/modules/motion/core/curves.js

@@ -0,0 +1,31 @@
+import { cubic, elastic } from "../../../packages/core/src/ease.js";
+const number = String.raw`\s*(-?(?:\d+\.?\d*|\.\d+)(?:[eE][-+]?\d+)?)\s*`;
+const elasticRE = new RegExp(`^elastic-(in|in-out)\\(${number},${number}\\)$`);
+const valueRE = new RegExp(`^value-cubic\\(${number},${number},${number},${number}\\)$`);
+function motionEase(src) {
+  const m = elasticRE.exec(src);
+  if (!m)
+    return src.startsWith("elastic-") ? "use elastic-in(a,p) or elastic-in-out(a,p)" : void 0;
+  const a = Number(m[2]), p = Number(m[3]);
+  if (!Number.isFinite(a) || !Number.isFinite(p) || a < 0 || p <= 0)
+    return "elastic needs finite a \u2265 0 and p > 0";
+  const out = elastic(a, p);
+  const inward = (u) => 1 - out(1 - u);
+  return m[1] === "in" ? inward : (u) => u < 0.5 ? inward(2 * u) / 2 : 0.5 + out(2 * u - 1) / 2;
+}
+function valueCurve(src, a, b) {
+  const m = valueRE.exec(src);
+  if (!m) return void 0;
+  const [x1, y1, x2, y2] = m.slice(1).map(Number);
+  if (![x1, y1, x2, y2].every(Number.isFinite) || x1 < 0 || x1 > 1 || x2 < 0 || x2 > 1)
+    return "value-cubic needs finite values and time handles in [0,1]";
+  const parameter = cubic(x1, 1 / 3, x2, 2 / 3);
+  return (u) => {
+    const s = parameter(u), r = 1 - s;
+    return r * r * r * a + 3 * r * r * s * y1 + 3 * r * s * s * y2 + s * s * s * b;
+  };
+}
+export {
+  motionEase,
+  valueCurve
+};

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

@@ -0,0 +1,3 @@
+import type { Module } from '../../../packages/core/src/modules.js';
+export * from './api.js';
+export declare const motion: Module;

package/modules/motion/core/index.js

@@ -0,0 +1,340 @@
+import { after } from "../manifest.js";
+import { load } from "../../../packages/core/src/load.js";
+import { Player } from "../../../packages/core/src/player.js";
+import { reached, snapTime } from "../../../packages/core/src/time.js";
+import { linear } from "../../../packages/core/src/ease.js";
+import { ptr, Diags } from "../../../packages/core/src/diag.js";
+import { VERBOSE as V } from "../../../packages/core/src/flags.js";
+import { entries } from "./registry.js";
+import { motionEase, valueCurve } from "./curves.js";
+import { stateControls, syncs, nextExits } from "./control.js";
+import { timing, bounds } from "./clock.js";
+import { exits, install, MotionRuntime } from "./api.js";
+export * from "./api.js";
+let Loader = load, PlayerClass = Player, modules;
+const error = (d, code, p, message, hint) => d.err(code, p, V && message, V && hint);
+function typed(addr, v, p, d, model) {
+  const t = addr.prop.type;
+  if (t === "number") return typeof v === "number" ? v : void 0;
+  if (t === "int" || t === "uint") {
+    const lo = t === "int" ? -2147483648 : 0, hi = t === "int" ? 2147483647 : 4294967295;
+    if (typeof v !== "number" || !Number.isInteger(v) || v < lo || v > hi)
+      return void error(
+        d,
+        "motion-integer",
+        p,
+        `expected a 32-bit ${t}`,
+        `use an integer in [${lo}, ${hi}]`
+      );
+  } else if (t === "string" || t === "reference") {
+    if (typeof v !== "string")
+      return void error(d, "value-type", p, "expected a string", "use a JSON string");
+    if (t === "reference" && model && !model.ids.has(v))
+      return void error(d, "motion-reference", p, `unknown node ${v}`, "name an existing node id");
+  } else return;
+  return v;
+}
+const motion = {
+  name: "motion",
+  after,
+  entries,
+  init(_modules, shared) {
+    modules = _modules;
+    Loader = shared.load;
+    PlayerClass = shared.Player;
+    install(PlayerClass, shared.sampleTrack, shared.mixValues, shared.resolveAddress);
+    return {
+      ...motion,
+      init: void 0,
+      entries: [
+        ...entries,
+        {
+          target: "document",
+          shapes: {
+            machines: {
+              k: "map",
+              of: shared.DOC.p.machine,
+              key: /^[a-z][a-zA-Z0-9-]*$/,
+              feature: "motion"
+            }
+          }
+        }
+      ]
+    };
+  },
+  model(node, key) {
+    if (key === "pivotX" || key === "pivotY")
+      return {
+        prop: { type: "number", feature: "motion" },
+        rest: node.raw[key] ?? node.raw.pivot?.[key === "pivotX" ? 0 : 1] ?? 0
+      };
+    const m = /^channels\.([a-z][a-zA-Z0-9-]*)$/.exec(key), channel = m && node.raw.channels?.[m[1]];
+    if (channel)
+      return {
+        prop: { type: channel.type, feature: "motion", discrete: true },
+        rest: channel.value
+      };
+  },
+  value: typed,
+  ease(source, p, d) {
+    const result = motionEase(source);
+    if (result === void 0 && !source.startsWith("value-cubic")) return;
+    if (!d.features?.includes("motion"))
+      error(d, "undeclared-feature", p, "ease requires motion", 'add "motion" to "requires"');
+    if (typeof result === "string")
+      error(d, "bad-ease", p, result, "check the motion ease syntax and argument ranges");
+    return typeof result === "function" ? result : linear;
+  },
+  resolve(model) {
+    if (!model.doc.requires?.includes("motion") || !model.doc.requires.includes("data")) return;
+    const previous = model.keyValue;
+    model.keyValue = (addr, raw, at, d) => {
+      if (typeof raw !== "string" || !raw.startsWith("$")) return previous?.(addr, raw, at, d);
+      const input = model.inputs.get(raw), kind = addr.prop.type, expected = ["int", "uint"].includes(kind) ? "number" : kind === "reference" ? "string" : kind;
+      if (!input || input.type !== expected) {
+        error(
+          d,
+          "data-keyframe",
+          at,
+          "key value needs a compatible scalar data path",
+          "declare data and use a $path matching the animated property type"
+        );
+        return addr.rest;
+      }
+      return (player) => {
+        const value = player.get(raw);
+        if (value === void 0 && raw.startsWith("$parent.") && !modules?.get("lists")?.parents?.has(player))
+          return addr.rest;
+        if (input.accepts && !input.accepts(value) || ["int", "uint", "reference"].includes(kind) && typed(addr, value, at, new Diags(), model) === void 0)
+          throw Object.assign(new Error("invalid data keyframe value"), {
+            code: "data-keyframe",
+            pointer: at,
+            hint: "use a value matching the animated property type"
+          });
+        return value;
+      };
+    };
+  },
+  track(track, addr, keys, p, d) {
+    if (!d.features?.includes("motion")) return;
+    const kind = addr.prop.type;
+    const discrete = ["int", "uint", "string", "reference"].includes(kind);
+    const curves = keys.map((k, i) => {
+      const src = k[2];
+      if (discrete && src !== void 0 && src !== "hold")
+        error(
+          d,
+          "bad-ease",
+          `${p}/${i}/2`,
+          "typed channels are hold-only",
+          "omit the ease or use hold"
+        );
+      if (typeof src !== "string" || !src.startsWith("value-cubic")) return;
+      if (kind !== "number") {
+        error(
+          d,
+          "bad-ease",
+          `${p}/${i}/2`,
+          "value-cubic requires a number",
+          "use a numeric property"
+        );
+        return;
+      }
+      const curve = valueCurve(
+        src,
+        track.values[i],
+        track.values[Math.min(i + 1, keys.length - 1)]
+      );
+      if (typeof curve !== "function") {
+        error(
+          d,
+          "bad-ease",
+          `${p}/${i}/2`,
+          typeof curve === "string" ? curve : "invalid value-cubic",
+          "use value-cubic(x1,y1,x2,y2)"
+        );
+        return;
+      }
+      return curve;
+    });
+    if (discrete || curves.some(Boolean))
+      track.sample = (time, player) => {
+        const read = (i2) => {
+          const value = track.values[i2];
+          return typeof value === "function" ? value(player) : value;
+        };
+        let i = 0;
+        while (i < track.times.length - 1 && reached(time, track.times[i + 1])) i++;
+        if (discrete || time <= track.times[0] || i === track.times.length - 1) return read(i);
+        time = snapTime(time, track.times[i]);
+        const u = (time - track.times[i]) / (track.times[i + 1] - track.times[i]);
+        if (curves[i]) {
+          const dynamic = typeof track.values[i] === "function" || typeof track.values[i + 1] === "function";
+          const curve = dynamic ? valueCurve(keys[i][2], read(i), read(i + 1)) : curves[i];
+          return curve(u);
+        }
+        const a = read(i), b = read(i + 1);
+        return a + (b - a) * track.eases[i](u);
+      };
+  },
+  load(model, raw, d) {
+    if (!raw.requires?.includes("motion")) return;
+    model.timelines.forEach((t) => {
+      const r = raw.timelines[t.name], p = ptr("/timelines", t.name);
+      timing.set(t, { speed: r.speed, quantize: r.quantize, work: r.work });
+      if (r.work && !(r.work[0] >= 0 && r.work[0] < r.work[1] && r.work[1] <= t.duration))
+        error(
+          d,
+          "motion-work",
+          p + "/work",
+          "work area must lie inside the duration",
+          "use 0 \u2264 start < end \u2264 duration"
+        );
+      for (const tr of t.tracks) {
+        const a = model.addrs.get(tr.addr);
+        if (a.prop.type === "reference")
+          tr.values.forEach(
+            (v, i) => typeof v !== "function" && typed(a, v, ptr(p + "/tracks", tr.addr) + `/${i}/1`, d, model)
+          );
+      }
+    });
+    const paths = /* @__PURE__ */ new Map();
+    const walk = (nodes, base) => nodes.forEach((n, i) => {
+      const p = base + "/" + i;
+      paths.set(n, p);
+      const children = n.children;
+      if (children) walk(children, p + "/children");
+    });
+    walk(raw.nodes, "/nodes");
+    for (const [i, n] of model.nodes.entries())
+      for (const [name, c] of Object.entries(n.raw.channels ?? {})) {
+        typed(
+          { node: i, key: "channels." + name, prop: { type: c.type }, rest: 0 },
+          c.value,
+          ptr(paths.get(n.raw) + "/channels", name) + "/value",
+          d,
+          model
+        );
+      }
+    model.layers.forEach(
+      (layer) => layer.states.forEach((state) => {
+        const sp = ptr(ptr("/machine/layers", layer.name) + "/states", state.name);
+        const r = raw.machine.layers[layer.name].states[state.name];
+        stateControls.set(state, { hold: r.hold });
+        if ((r.hold !== void 0 || r.time !== void 0) && state.play === void 0)
+          error(
+            d,
+            "motion-control",
+            sp,
+            "clock controls need a play state",
+            "add play or remove hold/time"
+          );
+        if (r.hold && r.time !== void 0)
+          error(
+            d,
+            "motion-control",
+            sp + "/time",
+            "hold and time are exclusive",
+            "choose a held or input-controlled clock"
+          );
+        if (r.time !== void 0 && !raw.requires?.includes("bind"))
+          error(
+            d,
+            "undeclared-feature",
+            sp + "/time",
+            "time expressions require bind",
+            'add "bind" to requires'
+          );
+        for (const [i, tr] of state.on.entries()) {
+          const source = r.on[i], p = sp + "/on/" + i;
+          if (source.sync) {
+            if (state.play === void 0 || layer.states[tr.to].play !== state.play)
+              error(
+                d,
+                "motion-sync",
+                p + "/sync",
+                "sync needs the same source and target timeline",
+                "use play states naming the same timeline"
+              );
+            else syncs.add(tr);
+          }
+          if (source.exitNext !== void 0) {
+            if (state.play === void 0 || r.hold || r.time !== void 0 || source.exit !== void 0 || source.exitFraction !== void 0 || tr.terms.some((x) => x.k === "end" || x.k === "after") || tr.triggers.length)
+              error(
+                d,
+                "motion-exit",
+                p + "/exitNext",
+                "exitNext needs an autonomous play clock and persistent input condition, without other time gates",
+                "use bool/number conditions and a playing source; omit exit/exitFraction"
+              );
+            else nextExits.set(tr, source.exitNext);
+          }
+          if (source.ease?.startsWith("value-cubic"))
+            error(
+              d,
+              "bad-ease",
+              p + "/ease",
+              "a value curve cannot ease a transition",
+              "use a weight ease"
+            );
+          if (source.exit !== void 0 && source.exitFraction !== void 0)
+            error(
+              d,
+              "motion-exit",
+              p,
+              "exit and exitFraction are exclusive",
+              "choose one exit unit"
+            );
+          const threshold = source.exit ?? (source.exitFraction === void 0 || state.play === void 0 ? void 0 : source.exitFraction * (bounds(model.timelines[state.play])[1] - bounds(model.timelines[state.play])[0]));
+          if (source.exit !== void 0 || source.exitFraction !== void 0) {
+            if (state.play === void 0 || threshold > bounds(model.timelines[state.play])[1] - bounds(model.timelines[state.play])[0])
+              error(
+                d,
+                "motion-exit",
+                p + (source.exit !== void 0 ? "/exit" : "/exitFraction"),
+                "exit needs a source animation and lies within its work span",
+                "use a play state and exit \u2264 work duration"
+              );
+            else exits.set(tr, threshold);
+          }
+        }
+        if (state.pose) {
+          for (const [a, v] of state.pose)
+            if (model.addrs.get(a).prop.type === "reference")
+              typed(model.addrs.get(a), v, ptr(sp + "/pose", a), d, model);
+        }
+      })
+    );
+    for (const addr of model.addrs.values())
+      if (addr.prop.type === "bool") addr.prop = { ...addr.prop, discrete: true };
+    const definitions = /* @__PURE__ */ new Map();
+    for (const [name, machine] of Object.entries(raw.machines ?? {})) {
+      if (name === "$comment") continue;
+      const doc = { ...raw, machine };
+      delete doc.machines;
+      const result = Loader(doc);
+      for (const diagnostic of result.diagnostics) {
+        if (diagnostic.severity !== "error") continue;
+        const pointer = diagnostic.pointer.startsWith("/machine/") ? ptr("/machines", name) + diagnostic.pointer.slice("/machine".length) : diagnostic.pointer;
+        if (!d.list.some((d2) => d2.code === diagnostic.code && d2.pointer === pointer))
+          d.err(diagnostic.code, pointer, diagnostic.message, diagnostic.hint);
+      }
+      if (result.model) {
+        for (const name2 of model.inputs.keys()) {
+          const pointer = ptr("/inputs", name2);
+          if (!result.diagnostics.some((d2) => d2.code === "unused-input" && d2.pointer === pointer)) {
+            const i = d.list.findIndex((d2) => d2.code === "unused-input" && d2.pointer === pointer);
+            if (i >= 0) d.list.splice(i, 1);
+          }
+        }
+        definitions.set(name, result.model);
+        for (const [a, addr] of result.model.addrs)
+          if (!model.addrs.has(a)) model.addrs.set(a, addr);
+      }
+    }
+    model.playback = (p) => new MotionRuntime(p, definitions, PlayerClass);
+  }
+};
+export {
+  motion
+};

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

@@ -0,0 +1,2 @@
+import type { ModuleEntry } from '../../../packages/core/src/modules.js';
+export declare const entries: ModuleEntry[];

package/modules/motion/core/registry.js

@@ -0,0 +1,56 @@
+import { entries as dataKeys } from "../capabilities/data-bind-keyframes/registry.js";
+const n = { k: "num" };
+const entries = [
+  ...dataKeys,
+  {
+    target: "node",
+    elements: {
+      channel: {
+        shape: {
+          k: "obj",
+          p: { name: { k: "str" }, type: { k: "str" }, value: { k: "any" } },
+          req: ["name", "type", "value"]
+        }
+      },
+      machine: { shape: { k: "obj", p: { name: { k: "str" } }, req: ["name"] } }
+    },
+    shapes: {
+      pivotX: n,
+      pivotY: n,
+      channels: {
+        k: "map",
+        key: /^[a-z][a-zA-Z0-9-]*$/,
+        of: {
+          k: "obj",
+          p: {
+            type: { k: "str", of: ["int", "uint", "string", "reference"] },
+            value: { k: "alt", of: [n, { k: "str" }] }
+          },
+          req: ["type", "value"]
+        },
+        element: "channel"
+      }
+    },
+    props: { pivotX: { type: "number", def: 0 }, pivotY: { type: "number", def: 0 } }
+  },
+  {
+    target: "timeline",
+    shapes: { speed: n, quantize: { k: "num", gt: 0 }, work: { k: "tup", of: [n, n], min: 2 } }
+  },
+  {
+    target: "state",
+    shapes: { speed: { k: "num", feature: "" }, hold: { k: "bool" }, time: { k: "str" } }
+  },
+  {
+    target: "transition",
+    shapes: {
+      exit: { k: "num", min: 0 },
+      exitFraction: { k: "num", min: 0, max: 1 },
+      sync: { k: "bool" },
+      exitNext: { k: "str", of: ["step", "loop"] }
+    }
+  }
+];
+export {
+  entries
+};

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

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

package/modules/motion/core/svg.js

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

package/modules/motion/manifest.d.ts

@@ -0,0 +1,37 @@
+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/motion/index.ts': string;
+        'packages/core/src/modules/motion/svg.ts': string;
+        'packages/markup/src/motion.ts': string;
+        'packages/web/src/motion.ts': string;
+    };
+    exports: {
+        'core:./motion': string;
+        'markup:./motion': string;
+        'web:./motion': string;
+    };
+    markupHook: {
+        slot: string;
+        type: string;
+        value: string;
+        browserName: string;
+    };
+    tests: string[];
+    conformance: string[];
+    docs: string[];
+};
+export default _default;

package/modules/motion/manifest.js

@@ -0,0 +1,69 @@
+const after = [];
+var manifest_default = {
+  ...{
+    name: "motion",
+    summary: "Timeline control: play, pause, seek, scrub, reverse, work areas, loop overrides and quantized playback.",
+    after: [],
+    core: { entry: "core/index.ts", export: "motion", svg: "core/svg.ts", svgExport: "motionSVG" },
+    web: [{ name: "motion", budget: 6528 }],
+    adapters: {
+      "packages/core/src/modules/motion/index.ts": "core/index.ts",
+      "packages/core/src/modules/motion/svg.ts": "core/svg.ts",
+      "packages/markup/src/motion.ts": "markup/index.ts",
+      "packages/web/src/motion.ts": "web/index.ts"
+    },
+    exports: {
+      "core:./motion": "packages/core/src/modules/motion/index.ts",
+      "markup:./motion": "packages/markup/src/motion.ts",
+      "web:./motion": "packages/web/src/motion.ts"
+    },
+    markupHook: {
+      slot: "motionCompiler",
+      type: "motionMarkup",
+      value: "motionMarkup",
+      browserName: "motion"
+    },
+    tests: [
+      "modules/motion/test/**/*.test.ts",
+      "packages/markup/test/corpus.test.ts",
+      "packages/markup/test/names.test.ts",
+      "packages/markup/test/compile.test.ts",
+      "packages/markup/test/decompile.test.ts",
+      "packages/markup/test/format.test.ts"
+    ],
+    conformance: [
+      "motion-",
+      "reduced-motion",
+      "animation-cubic-value",
+      "animation-elastic-in",
+      "animation-elastic-in-out",
+      "animation-host-loop-override",
+      "animation-host-play-pause-stop",
+      "animation-keys-reference",
+      "animation-keys-signed-integer",
+      "animation-keys-string",
+      "animation-keys-unsigned-integer",
+      "animation-mix-discrete",
+      "animation-mix-numeric",
+      "animation-quantized-playback",
+      "animation-reverse",
+      "animation-seek",
+      "animation-work-area",
+      "host-api-animation-metadata",
+      "host-api-low-level-animation",
+      "host-api-low-level-scene-query",
+      "host-api-multi-state-machine",
+      "host-api-scrub",
+      "state-machine-exit-time-seconds",
+      "transforms-origin-animation",
+      "data-bind-keyframes",
+      "data-bind-keyframes-blend"
+    ],
+    docs: ["spec/SPEC.md", "spec/ANIML.md", "docs/WEB.md"]
+  },
+  after
+};
+export {
+  after,
+  manifest_default as default
+};

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

@@ -0,0 +1,15 @@
+import type { LayoutElement } from '../../../packages/markup/src/layout.js';
+type Obj = Record<string, unknown>;
+export declare const motionMarkup: {
+    channels(n: Obj): LayoutElement[];
+    form(el: import("animl/markup").Element, base: import("animl/markup/compile.ts").Form): import("animl/markup/compile.ts").Form;
+    keyValue(source: string): string | undefined;
+    frames(c: import("animl/markup/compile.ts").Compiler, el: import("animl/markup").Element, children: import("animl/markup").Element[], p: string): unknown[][] | undefined;
+    node(c: import("animl/markup/compile.ts").Compiler, el: import("animl/markup").Element, children: import("animl/markup").Element[], o: {
+        [x: string]: unknown;
+    }, p: string): void;
+    rootChild(c: import("animl/markup/compile.ts").Compiler, el: import("animl/markup").Element, o: {
+        [x: string]: unknown;
+    }, p: string): boolean;
+};
+export {};

package/modules/motion/markup/index.js

@@ -0,0 +1,18 @@
+import { motionMarkup as compiler } from "../../markup-hooks/markup/motion.js";
+const motionMarkup = {
+  ...compiler,
+  channels(n) {
+    return Object.entries(n.channels ?? {}).filter(([n2]) => n2 !== "$comment").map(([name, c]) => ({
+      name: "channel",
+      attrs: [
+        ["name", name],
+        ["type", c.type],
+        ["value", typeof c.value === "string" ? JSON.stringify(c.value) : String(c.value)]
+      ],
+      children: []
+    }));
+  }
+};
+export {
+  motionMarkup
+};

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

@@ -0,0 +1,7 @@
+import type { MotionAPI } from '../core/api.js';
+import '../../../packages/web/src/index.js';
+declare module '../../../packages/web/src/index.ts' {
+    interface AnimaIcon extends MotionAPI {
+        readonly animations: MotionAPI['animations'];
+    }
+}

package/modules/motion/web/index.js

@@ -0,0 +1,26 @@
+import { motion } from "../core/index.js";
+import "../../../packages/web/src/index.js";
+const Icon = customElements.get("anima-icon");
+Icon.registerModule(motion);
+for (const key of [
+  "timeline",
+  "createTimeline",
+  "machine",
+  "node",
+  "seek",
+  "scrub",
+  "applyTimeline"
+])
+  Object.defineProperty(Icon.prototype, key, {
+    configurable: true,
+    value: function(...args) {
+      if (!this.player) throw Error("anima: empty icon");
+      return Reflect.apply(this.player[key], this.player, args);
+    }
+  });
+Object.defineProperty(Icon.prototype, "animations", {
+  configurable: true,
+  get() {
+    return this.player?.animations ?? [];
+  }
+});

package/modules/nested/capabilities/components-nested-remap/registry.d.ts

@@ -0,0 +1,2 @@
+import type { ModuleEntry } from '../../../../packages/core/src/modules.js';
+export declare const entries: ModuleEntry[];