animl 0.0.0-stage → 0.1.0

package/packages/core/src/svg.d.ts

@@ -0,0 +1,65 @@
+import { type DrawTree, type DrawFrame, type Geometry, type DrawColor, type DrawPaint } from './draw.js';
+export { fmt } from './draw.js';
+import type { Model } from './load.js';
+import type { Player } from './player.js';
+export interface El {
+    tag: string;
+    text?: string;
+    /**
+     * node: a `<g>` carrying one document node's transform, opacity and visibility · shape: the node's
+     * untransformed painted element inside it · wrap: earlier siblings under a knockout's mask ·
+     * mask, bg, cutg (the cut's transform group) and cut: the mask.
+     */
+    role: string;
+    key?: string;
+    index?: number;
+    node: number;
+    kids: El[];
+}
+export type Attrs = Record<string, string | null>;
+export type SVGRenderer = (frame: DrawFrame, el: El, paint: Paint, id: string) => Attrs;
+export interface SVGBackend {
+    checkStatic?(player: Player): void;
+    tree?(draw: DrawTree, tree: {
+        root: El[];
+        defs: El[];
+    }): void;
+    attrs?(frame: DrawFrame, el: El, paint: Paint, id: string, attrs: Attrs, render: SVGRenderer): void;
+}
+export declare const svgBackends: Map<string, SVGBackend>;
+export declare function registerSVGBackend(name: string, backend: SVGBackend): void;
+/**
+ * Build the element tree, plus mask definitions, for a model.
+ *
+ * Structure rules (they keep every browser's paint invalidation simple; see LOG, Firefox fix):
+ * transforms live only on `<g>` wrappers, never on painted leaves; the transform, opacity and
+ * display attributes are always present (identity is written out, never removed); and a knockout's
+ * mask sits on a wrapper with no transform of its own, attached for the document's whole life.
+ */
+export declare function sceneTree(model: Model): {
+    root: El[];
+    defs: El[];
+};
+export declare function sceneOrder(p: Player, nodes: number[]): number[];
+export interface Paint {
+    /** How a colour slot renders: as a CSS variable (web) or resolved to a value (static). */
+    slot(name: string, def: string): string;
+}
+export declare const cssSlots: Paint;
+export declare const staticSlots: (over?: Record<string, string>) => Paint;
+export declare function paintColor(value: DrawColor | undefined, paint: Paint): string;
+export declare function geometryAttrs(g: Geometry | undefined, a: Attrs): void;
+export declare function paintAttrs(fill: DrawPaint | undefined, s: DrawPaint | undefined, paint: Paint, a: Attrs, length?: number): void;
+/** Current attributes of one element. `id` prefixes mask ids so several icons can share a page. */
+export declare function attrs(p: Player | DrawFrame, el: El, paint: Paint, id: string): Attrs;
+export declare function svgAttrs(f: DrawFrame, el: El, paint: Paint, id: string): Attrs;
+/** Serialise the player's current frame to a standalone SVG document. */
+export declare function toSVG(p: Player, opts?: {
+    paint?: Paint;
+    width?: number;
+    height?: number;
+    background?: string;
+    id?: string;
+    /** Compatibility option: all SVG output now uses natural local lengths. */
+    staticLengths?: boolean;
+}): string;

package/packages/core/src/svg.js

@@ -0,0 +1,182 @@
+import {
+  geometryLength,
+  drawTree,
+  drawFrame,
+  drawOrder,
+  fmt
+} from "./draw.js";
+import { fmt as fmt2 } from "./draw.js";
+import { modules } from "./modules.js";
+const svgBackends = /* @__PURE__ */ new Map();
+function registerSVGBackend(name, backend) {
+  svgBackends.set(name, backend);
+  const order = [...modules.keys()], rank = (n) => order.indexOf(n.replace("-", "")) >>> 0;
+  const sorted = [...svgBackends].sort((a, b) => rank(a[0]) - rank(b[0]));
+  svgBackends.clear();
+  for (const [n, b] of sorted) svgBackends.set(n, b);
+}
+function sceneTree(model) {
+  const draw = drawTree(model);
+  const defs = [];
+  const leaf = (i, role) => ({
+    tag: draw.nodes[i].kind,
+    role,
+    node: i,
+    kids: []
+  });
+  const build = (list) => {
+    let out = [];
+    for (const i of list) {
+      const n = draw.nodes[i];
+      if (n.knockout !== void 0 && out.length) {
+        out = [{ tag: "g", role: "wrap", node: i, kids: out }];
+        defs.push({
+          tag: "mask",
+          role: "mask",
+          node: i,
+          kids: [
+            { tag: "rect", role: "bg", node: i, kids: [] },
+            { tag: "g", role: "cutg", node: i, kids: [leaf(i, "cut")] }
+          ]
+        });
+      }
+      out.push({
+        tag: "g",
+        role: "node",
+        node: i,
+        kids: n.kind === "group" ? build(n.children) : [leaf(i, "shape")]
+      });
+    }
+    return out;
+  };
+  const roots = draw.roots;
+  const tree = { root: build(roots), defs };
+  for (const b of svgBackends.values()) b.tree?.(draw, tree);
+  return tree;
+}
+function sceneOrder(p, nodes) {
+  return drawOrder(drawFrame(p), nodes);
+}
+const entry = (v) => Math.abs(v) < 1e-9 ? "0" : Math.abs(v) < 1e-3 ? String(Number(v.toPrecision(6))) : fmt(v);
+const matrix = (m) => `matrix(${m.map(entry).join(" ")})`;
+const cssSlots = { slot: (name, def) => `var(--anima-${name}, ${def})` };
+const staticSlots = (over = {}) => ({
+  slot: (name, def) => over[name] ?? def
+});
+function paintColor(value, paint) {
+  return typeof value === "object" ? paint.slot(value.slot, value.fallback) : value;
+}
+function geometryAttrs(g, a) {
+  if (!g) return;
+  for (const k in g)
+    if (k !== "kind" && k !== "image") {
+      const v = g[k];
+      a[k] = k === "rx" && !v ? null : typeof v === "number" ? fmt(v) : v;
+    }
+}
+function paintAttrs(fill, s, paint, a, length = 1) {
+  a.fill = fill ? paintColor(fill.color, paint) : "none";
+  a["fill-rule"] = fill?.rule === "evenodd" ? "evenodd" : null;
+  if (s) {
+    const t = s.trim;
+    const len = Math.min(1, (t?.end ?? 1) - (t?.start ?? 0)), start = t ? ((t.start + t.offset) % 1 + 1) % 1 : 0, wraps = start + len > 1;
+    Object.assign(a, {
+      stroke: len > 0 ? paintColor(s.color, paint) : "none",
+      "stroke-width": fmt(s.width),
+      "stroke-linecap": s.cap,
+      "stroke-linejoin": s.join,
+      pathLength: null,
+      "stroke-dasharray": t && len < 1 ? `${fmt(len * length)} ${fmt((wraps ? 1 - len : 2) * length)}` : null,
+      "stroke-dashoffset": t && len < 1 ? fmt(-start * length) : null
+    });
+  }
+}
+function attrs(p, el, paint, id) {
+  return svgAttrs("tree" in p ? p : drawFrame(p), el, paint, id);
+}
+function svgAttrs(f, el, paint, id) {
+  const a = coreAttrs(f, el, paint, id);
+  for (const b of svgBackends.values()) b.attrs?.(f, el, paint, id, a, svgAttrs);
+  return a;
+}
+function coreAttrs(f, el, paint, id) {
+  if (el.role.startsWith("module:")) return {};
+  const i = el.node, n = f.nodes[i], entry2 = f.tree.nodes[i];
+  if (el.role === "wrap") return { mask: `url(#${id}k${i})` };
+  if (el.role === "mask" || el.role === "bg") {
+    const [x, y, w, h] = f.viewBox;
+    const box = { x: fmt(x - w), y: fmt(y - h), width: fmt(3 * w), height: fmt(3 * h) };
+    return el.role === "bg" ? { ...box, fill: "#fff" } : { id: `${id}k${i}`, maskUnits: "userSpaceOnUse", ...box };
+  }
+  if (el.role === "node" || el.role === "cutg")
+    return {
+      transform: matrix(n.transform),
+      opacity: fmt(n.opacity),
+      display: n.visible ? "inline" : "none"
+    };
+  const a = {};
+  geometryAttrs(n.geometry, a);
+  const fill = n.paints.find((p) => p.kind === "fill"), stroke = n.paints.find((p) => p.kind === "stroke");
+  if (el.role === "cut") {
+    const width = (stroke?.width ?? 0) + 2 * entry2.knockout;
+    return Object.assign(a, {
+      fill: fill ? "#000" : "none",
+      "fill-rule": fill?.rule === "evenodd" ? "evenodd" : null,
+      // A node with neither paint draws nothing, so it cuts nothing (spec §4).
+      stroke: width > 0 && (fill || stroke) ? "#000" : "none",
+      "stroke-width": fmt(width),
+      "stroke-linejoin": "round",
+      "stroke-linecap": "round"
+    });
+  }
+  paintAttrs(
+    fill,
+    stroke,
+    paint,
+    a,
+    stroke?.trim && stroke.trim.end - stroke.trim.start < 1 ? geometryLength(n.geometry, entry2) : 1
+  );
+  return a;
+}
+const esc = (s) => s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+function toSVG(p, opts = {}) {
+  for (const backend of svgBackends.values()) backend.checkStatic?.(p);
+  const paint = opts.paint ?? staticSlots();
+  const id = opts.id ?? "a";
+  const { root, defs } = sceneTree(p.model);
+  const frame = drawFrame(p);
+  const ordered = (els) => {
+    if (new Set(els.map((el) => el.node)).size !== els.length) return els;
+    const out = sceneOrder(
+      p,
+      els.map((el) => el.node)
+    );
+    return out.map((i) => els.find((el) => el.node === i));
+  };
+  const ser = (el) => {
+    const a = svgAttrs(frame, el, paint, id);
+    const at = Object.entries(a).filter(([, v]) => v !== null).map(([k, v]) => ` ${k}="${esc(v)}"`).join("");
+    if (el.text !== void 0) return `<${el.tag}${at}>${esc(el.text)}</${el.tag}>`;
+    return el.kids.length ? `<${el.tag}${at}>${ordered(el.kids).map(ser).join("")}</${el.tag}>` : `<${el.tag}${at}/>`;
+  };
+  const [x, y, w, h] = p.model.viewBox;
+  const size = (opts.width ? ` width="${opts.width}"` : "") + (opts.height ? ` height="${opts.height}"` : "");
+  const bg = opts.background ? `<rect x="${fmt(x)}" y="${fmt(y)}" width="${fmt(w)}" height="${fmt(h)}" fill="${esc(opts.background)}"/>` : "";
+  const defsText = defs.length ? `<defs>${defs.map(ser).join("")}</defs>` : "";
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${[x, y, w, h].map(fmt).join(" ")}"${size}>${defsText}${bg}${ordered(root).map(ser).join("")}</svg>`;
+}
+export {
+  attrs,
+  cssSlots,
+  fmt2 as fmt,
+  geometryAttrs,
+  paintAttrs,
+  paintColor,
+  registerSVGBackend,
+  sceneOrder,
+  sceneTree,
+  staticSlots,
+  svgAttrs,
+  svgBackends,
+  toSVG
+};

package/packages/core/src/time.d.ts

@@ -0,0 +1,7 @@
+export declare const TIME_EPSILON = 1e-9;
+export declare const reached: (time: number, boundary: number) => boolean;
+export declare const snapTime: (time: number, boundary: number) => number;
+/** Floor a time/span ratio, recognizing a reached grid tick before division rounding. */
+export declare const timeFloor: (time: number, span: number) => number;
+/** Fold by span segments so a reached turn/seam returns an exact endpoint. */
+export declare const foldTime: (time: number, span: number, pingpong: boolean) => number;

package/packages/core/src/time.js

@@ -0,0 +1,19 @@
+const TIME_EPSILON = 1e-9;
+const reached = (time, boundary) => time >= boundary - TIME_EPSILON;
+const snapTime = (time, boundary) => Math.abs(time - boundary) <= TIME_EPSILON ? boundary : time;
+const timeFloor = (time, span) => {
+  const tick = Math.round(time / span);
+  return snapTime(time, tick * span) === tick * span ? tick : Math.floor(time / span);
+};
+const foldTime = (time, span, pingpong) => {
+  const segment = timeFloor(time, span);
+  const local = snapTime(time - segment * span, 0);
+  return pingpong && Math.abs(segment % 2) === 1 ? span - local : local;
+};
+export {
+  TIME_EPSILON,
+  foldTime,
+  reached,
+  snapTime,
+  timeFloor
+};

package/packages/markup/src/a11y.d.ts

@@ -0,0 +1 @@
+export * from '../../../modules/a11y/markup/index.js';

package/packages/markup/src/a11y.js

@@ -0,0 +1 @@
+export * from "../../../modules/a11y/markup/index.js";

package/packages/markup/src/async.d.ts

@@ -0,0 +1,4 @@
+import { type AsyncCompileOptions } from './library-hooks.js';
+import type { CompileResult } from './index.js';
+/** Async hosts use the registered resolver layer, if present. */
+export declare function compileAsync(source: string, opts: AsyncCompileOptions): Promise<CompileResult>;

package/packages/markup/src/async.js

@@ -0,0 +1,8 @@
+import { compile } from "./compile.js";
+import { libraryCompiler } from "./library-hooks.js";
+async function compileAsync(source, opts) {
+  return libraryCompiler.async ? libraryCompiler.async(source, opts, compile) : compile(source, { file: opts.file, validate: opts.validate });
+}
+export {
+  compileAsync
+};

package/packages/markup/src/bind.d.ts

@@ -0,0 +1 @@
+export * from '../../../modules/bind/markup/index.js';

package/packages/markup/src/bind.js

@@ -0,0 +1 @@
+export * from "../../../modules/bind/markup/index.js";

package/packages/markup/src/browser.d.ts

@@ -0,0 +1,2 @@
+export { compile } from './compile.js';
+export { compileAsync } from './async.js';

package/packages/markup/src/browser.js

@@ -0,0 +1,6 @@
+import { compile } from "./compile.js";
+import { compileAsync } from "./async.js";
+export {
+  compile,
+  compileAsync
+};

package/packages/markup/src/colormix.d.ts

@@ -0,0 +1 @@
+export * from '../../../modules/colormix/markup/index.js';

package/packages/markup/src/colormix.js

@@ -0,0 +1 @@
+export * from "../../../modules/colormix/markup/index.js";

package/packages/markup/src/compile.d.ts

@@ -0,0 +1,60 @@
+import { type NodeType } from 'animl';
+import type { CompileOptions, CompileResult, MarkupDiagnostic } from './index.js';
+import { type NodeField } from './names.js';
+import { type Attr, type Element, type Pos, type XmlDocument } from './xml.js';
+type Json = Record<string, unknown>;
+export type Kind = 'json' | 'mixed' | 'string' | 'name' | 'number' | 'boolean' | 'value' | 'color' | 'names' | 'indices' | 'lengths' | 'set' | 'ease' | 'json' | 'condition' | number;
+export interface Form {
+    attrs: Record<string, Kind>;
+    required?: string[];
+    children?: readonly string[];
+}
+export declare class Compiler {
+    readonly elements: Record<string, import("animl").ElementForm>;
+    readonly builtins: string[];
+    readonly diagnostics: MarkupDiagnostic[];
+    readonly map: Map<string, Pos>;
+    types: Map<string, "path" | "group" | "circle" | "rect" | "arc">;
+    private readonly fieldIndex;
+    private fields;
+    nodeAttrs: (type: NodeType) => NodeField[];
+    eases: Map<string, Attr>;
+    resolved: Map<string, string>;
+    readonly resolving: Set<string>;
+    private readonly finalEases;
+    xml: XmlDocument | undefined;
+    private opts;
+    constructor(opts: CompileOptions);
+    error(code: string, p: string, at: Pos, message: string, hint?: string): void;
+    unavailable(feature: string, entry: string, p: string, at: Pos): void;
+    get failed(): boolean;
+    private mark;
+    put(o: Json, key: string, value: unknown, p: string, at: Pos): void;
+    container(o: Json, key: string, p: string, at: Pos): Json;
+    private append;
+    address(s: string): string;
+    private readonly forms;
+    private form;
+    private formFor;
+    private kind;
+    attrs(el: Element, p: string): Map<string, Attr>;
+    children(el: Element, p: string): Element[];
+    private comment;
+    num(s: string): number;
+    private color;
+    scalar(s: string, color?: boolean): number | boolean | string;
+    read(a: Attr, kind: Kind, p: string): unknown;
+    private copy;
+    addNamed(o: Json, key: string, el: Element, p: string, at: Pos): boolean;
+    build(el: Element, p: string): unknown;
+    private rootChild;
+    private copyNode;
+    collectTypes(el: Element, scoped?: boolean): void;
+    collectEases(el: Element, p: string): void;
+    run(source: string): CompileResult;
+    result(): CompileResult;
+    unexpected(e: unknown): CompileResult;
+}
+/** Compile AniML to canonical .ani with a source map. Never throws on malformed source. */
+export declare function compile(source: string, opts?: CompileOptions): CompileResult;
+export {};