animl 0.0.0-stage → 0.1.0

package/modules/components/manifest.js

@@ -0,0 +1,64 @@
+const after = [];
+var manifest_default = {
+  name: "components",
+  summary: "Reusable components: named sub-scenes placed as instances, with their own inputs, libraries and nested animation.",
+  after,
+  core: {
+    entry: "core/index.ts",
+    export: "components",
+    svg: "core/svg.ts",
+    svgExport: "componentsSVG"
+  },
+  web: [
+    {
+      name: "components",
+      buildOrder: 5,
+      sizeOrder: 11,
+      // P3c reset rule: 3,457 B after P8-5's shared point-tuple base (no components code change).
+      budget: 3840
+    },
+    {
+      name: "markup-components",
+      buildOrder: 8,
+      sizeOrder: 2,
+      budget: 896,
+      over: "index",
+      authoring: true
+    }
+  ],
+  adapters: {
+    "packages/core/src/modules/components/index.ts": "core/index.ts",
+    "packages/core/src/modules/components/svg.ts": "core/svg.ts",
+    "packages/web/src/components.ts": "web/index.ts",
+    "packages/web/src/markup-components.ts": "web/markup.ts",
+    "packages/markup/src/components.ts": "markup/index.ts"
+  },
+  exports: {
+    "core:./components": "packages/core/src/modules/components/index.ts",
+    "core:./components-svg": "packages/core/src/modules/components/svg.ts",
+    "web:./components": "packages/web/src/components.ts",
+    "web:./markup-components": "packages/web/src/markup-components.ts",
+    "markup:./components": "packages/markup/src/components.ts"
+  },
+  markupHook: {
+    browserName: "components",
+    slot: "componentCompiler",
+    type: "componentMarkup",
+    value: "componentMarkup"
+  },
+  tests: [
+    "modules/components/test/**/*.test.ts",
+    "packages/markup/test/compile.test.ts",
+    "packages/markup/test/corpus.test.ts",
+    "packages/markup/test/decompile.test.ts",
+    "packages/markup/test/format.test.ts",
+    "packages/markup/test/invalid.test.ts",
+    "packages/markup/test/names.test.ts"
+  ],
+  conformance: ["components-"],
+  docs: ["spec/SPEC.md", "spec/ANIML.md"]
+};
+export {
+  after,
+  manifest_default as default
+};

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

@@ -0,0 +1,12 @@
+import '../../data-artboard/markup/index.js';
+import type { Compiler, Form, Kind } from '../../../packages/markup/src/compile.js';
+import type { Element, Attr } from '../../../packages/markup/src/xml.js';
+type Json = Record<string, unknown>;
+export declare const componentMarkup: {
+    componentForm(el: Element, anima: Form): Form | undefined;
+    form(el: Element, attrs: Record<string, Kind>, required: string[]): void;
+    enter(compiler: Compiler, el: Element, _children: Element[], p: string): (() => void) | undefined;
+    node(compiler: Compiler, el: Element, a: Map<string, Attr>, o: Json, p: string): void;
+    finish(doc: Json): void;
+};
+export {};

package/modules/components/markup/index.js

@@ -0,0 +1,123 @@
+import "../../data-artboard/markup/index.js";
+import { ptr } from "animl";
+const componentMarkup = {
+  componentForm(el, anima) {
+    if (el.name === "output")
+      return { attrs: { name: "name", value: "string" }, required: ["name", "value"] };
+    if (el.name === "component")
+      return {
+        attrs: { name: "string", grid: "number", viewBox: 4, outputs: "json" },
+        required: ["name", "grid"],
+        children: [...anima.children.filter((n) => n !== "component" && n !== "meta"), "output"]
+      };
+  },
+  form(el, attrs, required) {
+    if (el.name === "repeat") attrs.component = "string";
+    if (el.name === "instance") {
+      required.push("component");
+      for (const a of el.attrs) if (!Object.hasOwn(attrs, a.name)) attrs[a.name] = "value";
+    }
+  },
+  enter(compiler, el, _children, p) {
+    if (el.name === "instance") {
+      const attr = compiler.nodeAttrs(el.name).find((a) => a.attr === "time");
+      if (attr) {
+        const shape = attr.shape;
+        attr.shape = { k: "str" };
+        return () => {
+          attr.shape = shape;
+        };
+      }
+    }
+    if (el.name === "repeat") {
+      const attr = compiler.nodeAttrs(el.name).find((a) => a.attr === "component");
+      const shape = attr.shape;
+      attr.shape = { k: "str" };
+      return () => {
+        attr.shape = shape;
+      };
+    }
+    if (el.name !== "component") return;
+    for (const [i, output] of _children.entries()) {
+      if (output.name !== "output") continue;
+      compiler.attrs(output, p + "/outputs");
+      const name = output.attrs.find((a) => a.name === "name");
+      if (name) compiler.map.set(p + "/outputs/" + name.value, name.valueAt);
+      _children[i] = {
+        ...output,
+        name: "bind",
+        attrs: output.attrs.map(
+          (a) => a.name === "name" ? { ...a, name: "target", value: "@output:" + a.value } : a
+        )
+      };
+    }
+    const saved = [compiler.types, compiler.eases, compiler.resolved];
+    compiler.types = /* @__PURE__ */ new Map();
+    compiler.eases = new Map(compiler.eases);
+    compiler.resolved = /* @__PURE__ */ new Map();
+    compiler.collectEases(el, p);
+    compiler.collectTypes(el, true);
+    return () => [compiler.types, compiler.eases, compiler.resolved] = saved;
+  },
+  node(compiler, el, a, o, p) {
+    if (el.name === "repeat" && typeof o.component === "string") {
+      const value = o.component;
+      if (value.startsWith("{") || value.startsWith('"')) {
+        try {
+          o.component = JSON.parse(value);
+        } catch {
+        }
+      } else if (value.includes(":"))
+        o.component = Object.fromEntries(value.split(/\s+/).map((v) => v.split(":")));
+    }
+    if (el.name === "instance") {
+      o.component = o.component?.trim();
+      const time = a.get("time");
+      if (time) {
+        let value = time.value;
+        let quoted = false;
+        if (value.startsWith('"')) {
+          try {
+            value = JSON.parse(value);
+            quoted = true;
+          } catch {
+          }
+        }
+        o.time = !quoted && value.trim() !== "" && Number.isFinite(Number(value)) ? Number(value) : value;
+      }
+      for (const [name, attr] of a)
+        if (name !== "id" && !compiler.nodeAttrs(el.name).some((a2) => a2.attr === name)) {
+          const inputs = compiler.container(o, "inputs", p, attr.valueAt);
+          compiler.put(
+            inputs,
+            name,
+            /^\{[\s\S]*\}$/.test(attr.value) ? attr.value : compiler.read(attr, "value", ptr(p + "/inputs", name)),
+            p + "/inputs",
+            attr.valueAt
+          );
+        }
+    }
+  },
+  finish(doc) {
+    for (const component of Object.values(doc.components ?? {})) {
+      const child = component;
+      for (const [key, value] of Object.entries(child.bind ?? {}))
+        if (key.startsWith("@output:")) {
+          (child.outputs ??= {})[key.slice(8)] = value;
+          Reflect.deleteProperty(child.bind, key);
+        }
+      if (child.bind && !Object.keys(child.bind).length) delete child.bind;
+      const text = JSON.stringify(child);
+      for (const key of ["colors", "glyphs"]) {
+        for (const [name, value] of Object.entries(doc[key] ?? {})) {
+          if (text.includes(JSON.stringify(name)) && !Object.hasOwn(child[key] ?? {}, name)) {
+            (child[key] ??= {})[name] = value;
+          }
+        }
+      }
+    }
+  }
+};
+export {
+  componentMarkup
+};

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

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

package/modules/components/web/index.js

@@ -0,0 +1,8 @@
+import { components } from "animl/components";
+import { componentsSVG } from "animl/components-svg";
+import "../../../packages/web/src/index.js";
+customElements.get("anima-icon").registerModule(components);
+customElements.get("anima-icon").registerSVGBackend(
+  "components",
+  componentsSVG
+);

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

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

package/modules/components/web/markup.js

@@ -0,0 +1,6 @@
+import { componentMarkup } from "animl/markup/components";
+import "../../../packages/web/src/index.js";
+customElements.get("anima-icon").registerMarkup(
+  "components",
+  componentMarkup
+);

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

@@ -0,0 +1,7 @@
+declare module '../../../packages/core/src/player.ts' {
+    interface Player {
+        paintRank?: (node: number) => number;
+    }
+}
+import { type Module } from '../../../packages/core/src/modules.js';
+export declare const composite: Module;

package/modules/composite/core/index.js

@@ -0,0 +1,314 @@
+import { after } from "../manifest.js";
+import { parseHex } from "../../../packages/core/src/color.js";
+import { VERBOSE as V } from "../../../packages/core/src/flags.js";
+const str = (of) => ({ k: "str", of });
+const bool = { k: "bool" };
+const object = (p, req = []) => ({ k: "obj", p, req });
+const blends = "normal multiply screen overlay darken lighten color-dodge color-burn hard-light soft-light difference exclusion hue saturation color luminosity".split(
+  " "
+);
+const mask = object(
+  {
+    source: str(),
+    mode: str(["alpha", "luminance", "inverted-alpha", "inverted-luminance"]),
+    sourceDraws: { ...bool, markup: "source-draws" }
+  },
+  ["source", "mode", "sourceDraws"]
+);
+const clip = object(
+  { source: str(), rule: { ...str(["nonzero", "evenodd"]), default: "nonzero" } },
+  ["source"]
+);
+const order = object({ target: str(), position: str(["before", "after"]), active: bool }, [
+  "target",
+  "position"
+]);
+import { drawPaint } from "../../../packages/core/src/draw.js";
+let registry;
+let shapes;
+const composite = {
+  name: "composite",
+  after,
+  init: (modules, shared) => {
+    registry = modules;
+    shapes = shared;
+    return { ...composite, init: void 0, entries: compositeEntries() };
+  },
+  entries: [],
+  load(m, _raw, d) {
+    if (m.nodes.some((n) => n.raw.drawOrder)) {
+      const previous = m.nesting;
+      m.nesting = (p) => {
+        let revision = -1, ranks;
+        p.paintRank = (i) => {
+          if (revision !== p.drawRevision) {
+            ranks = ordered(p);
+            revision = p.drawRevision;
+          }
+          return ranks[i] ?? i;
+        };
+        return previous?.(p);
+      };
+    }
+    const paths = [], counts = /* @__PURE__ */ new Map();
+    const reaches = (from, target, seen = /* @__PURE__ */ new Set()) => {
+      if (from === target) return true;
+      if (seen.has(from)) return false;
+      seen.add(from);
+      const n = m.nodes[from];
+      const source = m.ids.get(n.raw.mask?.source);
+      return [...n.children, ...source === void 0 ? [] : [source]].some(
+        (i) => reaches(i, target, seen)
+      );
+    };
+    m.nodes.forEach((n, i) => {
+      const j = counts.get(n.parent) ?? 0;
+      counts.set(n.parent, j + 1);
+      const path = paths[i] = (n.parent < 0 ? "/nodes" : paths[n.parent] + "/children") + "/" + j;
+      const error = (code, key, message, hint = V && "choose a valid sibling source") => d.err(code, path + "/" + key, V && message, V && hint);
+      for (const key of ["mask", "clip", "drawOrder"]) {
+        const r = n.raw[key];
+        if (!r) continue;
+        const s = m.ids.get(r.source ?? r.target);
+        if (s === void 0) {
+          error(
+            "unknown-source",
+            key + (key === "drawOrder" ? "/target" : "/source"),
+            V && "unknown source node"
+          );
+          continue;
+        }
+        if (key === "mask" && s !== i && reaches(s, i))
+          error(
+            "reference-cycle",
+            key,
+            V && "mask subtree reference cycle",
+            V && "remove the cyclic reference"
+          );
+        if (s === i) error("self-reference", key, V && "a node cannot reference itself");
+        if (key === "clip" && !shapes.PAINTED.includes(m.nodes[s].type))
+          error(
+            "clip-source-not-painted",
+            key + "/source",
+            V && "clip source must have an outline",
+            V && "choose a painted node"
+          );
+        if (key === "drawOrder" && (m.nodes[s].parent !== n.parent || m.nodes.some((other) => other.parent === n.parent && other.raw.knockout !== void 0)))
+          error(
+            "bad-draw-target",
+            key,
+            V && "draw target must be a sibling without knockout",
+            V && "use ordinary sibling nodes"
+          );
+        const seen = /* @__PURE__ */ new Set([i]);
+        let at = s;
+        while (at !== void 0) {
+          if (seen.has(at)) {
+            if (s !== i)
+              error(
+                "reference-cycle",
+                key,
+                V && "reference cycle",
+                V && "remove the cyclic reference"
+              );
+            break;
+          }
+          seen.add(at);
+          const next = m.nodes[at].raw[key];
+          at = next ? m.ids.get(next.source ?? next.target) : void 0;
+        }
+      }
+      if (n.raw.paints && (n.raw.fill || n.raw.stroke))
+        error(
+          "paint-conflict",
+          "paints",
+          V && "paints replaces fill and stroke",
+          V && "remove single fill and stroke"
+        );
+      n.raw.paints?.forEach((entry, j2) => {
+        const kind = entry.fill ? "fill" : "stroke";
+        const raw = entry[kind];
+        if (raw) {
+          const diagnosticStart = d.list.length;
+          registry.get("paint")?.load?.({ ...m, nodes: [{ ...n, raw: { [kind]: raw }, parent: -1 }] }, _raw, d);
+          for (const diagnostic of d.list.slice(diagnosticStart))
+            diagnostic.pointer = diagnostic.pointer.replace("/nodes/0/", `${path}/paints/${j2}/`);
+          const colors = raw.type ? (raw.stops ?? []).map((v) => v.color) : [raw.color];
+          for (const c of colors)
+            if (typeof c === "string" && !parseHex(c) && c !== "currentColor" && !Object.hasOwn(m.colors, c))
+              error(
+                "bad-color",
+                `paints/${j2}/${kind}/color`,
+                V && "unknown paint colour",
+                V && "use a hex colour or declared slot"
+              );
+          if (kind === "stroke" && raw.position && raw.position !== "center")
+            error(
+              "bad-value",
+              `paints/${j2}/stroke/position`,
+              V && "multiple paints currently use centered strokes",
+              V && "use stroke.position on a single stroke"
+            );
+        }
+        if (Object.keys(entry).filter((k) => k !== "$comment").length !== 1)
+          error(
+            "paint-conflict",
+            `paints/${j2}`,
+            V && "one fill or stroke per paint",
+            V && "split paints into separate entries"
+          );
+      });
+    });
+  },
+  model(n, key) {
+    if (key === "drawOrder.active" && n.raw.drawOrder)
+      return {
+        prop: { type: "bool", def: true, feature: "composite" },
+        rest: n.raw.drawOrder.active ?? true
+      };
+    const match = /^paints\.(0|[1-9][0-9]*)\.(fill|stroke)\.(.+)$/.exec(key);
+    if (!match) return;
+    const raw = n.raw.paints?.[+match[1]]?.[match[2]];
+    if (!raw) return;
+    const field = match[3];
+    const nested = registry.get("paint")?.model?.({ ...n, raw: { [match[2]]: raw } }, match[2] + "." + field);
+    if (nested) return nested;
+    const prop = field === "visible" ? { type: "bool", def: true } : shapes.PAINT[match[2]][field];
+    if (!prop || raw[field] === void 0 && prop.def === void 0) return;
+    return {
+      prop: { ...prop, feature: "composite" },
+      rest: prop.type === "color" ? parseHex(raw[field]) ?? raw[field] : raw[field] ?? prop.def
+    };
+  },
+  draw: {
+    tree(m, t) {
+      const ancestors = (i) => i < 0 ? [] : [i, ...ancestors(m.nodes[i].parent)];
+      for (let i = 0; i < m.nodes.length; i++) t.nodes[i].dependencies = ancestors(i);
+      m.nodes.forEach((n, i) => {
+        const r = n.raw, node = t.nodes[i];
+        node.blend = r.blend;
+        node.mask = r.mask ? { ...r.mask, source: m.ids.get(r.mask.source) } : void 0;
+        node.clip = r.clip ? {
+          rule: clip.p.rule.default,
+          ...r.clip,
+          source: m.ids.get(r.clip.source)
+        } : void 0;
+        for (const kind of ["mask", "clip"])
+          if (node[kind]) {
+            const source = node[kind].source;
+            t.resources.push({ node: i, kind, source });
+            t.nodes[source].dependencies.push(...ancestors(n.parent));
+          }
+        node.position = r.stroke?.position;
+        node.paints = r.paints?.map((entry) => {
+          const kind = entry.fill ? "fill" : "stroke", p = entry[kind];
+          const paint = { ...p, kind, visible: true };
+          if (p.type && String(p.type) !== "image")
+            t.resources.push({
+              node: i,
+              kind: "gradient",
+              key: `paints.${r.paints.indexOf(entry)}.${kind}`,
+              paint
+            });
+          return paint;
+        });
+      });
+    },
+    frame(p, i, data, entry, frame) {
+      const r = p.model.nodes[i].raw;
+      data.world = p.world(i);
+      data.blend = entry.blend;
+      data.mask = entry.mask;
+      data.clip = entry.clip;
+      if (frame.orderRevision !== p.drawRevision) {
+        frame.order = ordered(p);
+        frame.orderRevision = p.drawRevision;
+      }
+      for (const paint of data.paints) {
+        paint.visible = p.prop(i, paint.kind + ".visible") !== false;
+        if (paint.kind === "stroke") paint.position = r.stroke.position;
+      }
+      if (r.paints)
+        data.paints = r.paints.map((_entry, index) => {
+          const kind = r.paints[index].fill ? "fill" : "stroke";
+          const paint = drawPaint(p, i, kind, `paints.${index}.${kind}`, r.paints[index][kind]);
+          const sample = { ...data, paints: [paint] };
+          for (const m of p.model.drawModules)
+            if (m.name !== "composite") m.draw?.frame?.(p, i, sample, entry, frame);
+          paint.visible = p.prop(i, `paints.${index}.${kind}.visible`) !== false;
+          return paint;
+        });
+    }
+  }
+};
+function compositeEntries() {
+  const { FILL, STROKE } = shapes;
+  const form = (shape, key, wrapper) => ({
+    shape,
+    target: {
+      attribute: "for",
+      default: key,
+      choices: [key],
+      ...wrapper ? { array: true, wrapper } : {}
+    }
+  });
+  const elements = {
+    mask: form(mask, "mask"),
+    clip: form(clip, "clip"),
+    drawOrder: form(order, "drawOrder"),
+    fillPaint: form(FILL, "paints", "fill"),
+    strokePaint: form(STROKE, "paints", "stroke")
+  };
+  return [
+    ...["fill", "stroke"].map((target) => ({
+      target,
+      shapes: { visible: { k: "bool", markup: target + "-visible" } },
+      props: { visible: { type: "bool", def: true } }
+    })),
+    {
+      target: "stroke",
+      shapes: {
+        position: { ...str(["center", "inside", "outside"]), markup: "stroke-position" }
+      }
+    },
+    {
+      target: "node",
+      elements,
+      shapes: {
+        blend: { ...str(blends), markup: "mix-blend-mode" },
+        mask: { ...mask, element: "mask" },
+        clip: { ...clip, element: "clip" },
+        drawOrder: { ...order, element: "drawOrder", markup: "draw-order" }
+      }
+    },
+    {
+      target: "painted",
+      shapes: {
+        paints: { k: "arr", min: 1, element: "paints", of: object({ fill: FILL, stroke: STROKE }) }
+      }
+    }
+  ];
+}
+function ordered(p) {
+  const ranks = [];
+  let rank = 0;
+  const visit = (children) => {
+    const out = [...children];
+    for (const i of children) {
+      const r = p.model.nodes[i].raw.drawOrder;
+      if (!r || p.prop(i, "drawOrder.active") === false) continue;
+      const target = p.model.ids.get(r.target);
+      out.splice(out.indexOf(i), 1);
+      out.splice(out.indexOf(target) + (r.position === "after" ? 1 : 0), 0, i);
+    }
+    for (const i of out) {
+      ranks[i] = rank++;
+      visit(p.model.nodes[i].children);
+    }
+  };
+  visit(p.model.draw.roots);
+  return ranks;
+}
+export {
+  composite
+};

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

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