Made for AI

import { compile, createPlayer, svgDrawer, type StewDoc } from "@stew/engine";
// the playground's own check, field by field, by the types below
import { readShape } from "./clipShape";

// the text, as data: text that isn't JSON throws here
const data: unknown = JSON.parse(text);

// the shape is yours to check: data of the wrong shape can make
// compile throw. This names the first field that doesn't fit.
const shape = readShape(data);
if ("problem" in shape) throw new Error(`${shape.problem.at || "the clip"} ${shape.problem.says}`);
const doc: StewDoc = shape.doc;

// read once: what it can't play is left out and noted in skipped
const program = compile(doc);
for (const note of program.skipped) console.warn(note);

// each target is written to the elements carrying its uid
const drawer = svgDrawer(program, uid =>
  [...svg.querySelectorAll(`[data-stew-uid="${CSS.escape(uid)}"]`)]);

const player = createPlayer(program, drawer, { repeat: -1 });
player.play();

// One clip: how long it is and what moves in it.
export interface StewDoc {
    // the format version; absent = 1
    version?: 1;
    // seconds: the clip's length (one lap when it loops); Infinity = it
    // never ends (a shape's loop actions: each track keeps its own cycle)
    duration: number;
    // repeat when it ends; absent = true, as in Stew
    loop?: boolean;
    tracks: StewTrack[];
    // where each target turns, scales and skews about, in the user units of
    // the node its transforms are written to. The host measures these (or
    // bakes them into an export). Absent = that node's origin (0, 0).
    pivots?: Record<string, StewPoint>;
    // each target's own box, for an `anchor` track: its keyframes ("0 1" =
    // the box's left bottom) say where it turns about from that moment on,
    // in place of its pivot.
    boxes?: Record<string, StewBox>;
    // the path each target's `motion` track follows (Stew keeps it on the
    // element, not in the clip, so the host hands it over).
    paths?: Record<string, StewPath>;
}

export interface StewPoint { x: number; y: number }

// A target's own box, and the matrix (a, b, c, d, e, f) from its units into
// the node its transforms are written to (Stew: through its resting pose
// onto its animation layer; absent = the same units).
export interface StewBox {
    x: number;
    y: number;
    width: number;
    height: number;
    matrix?: [number, number, number, number, number, number];
}

// A path to travel. A motion track's value is how far along it the target
// is: 0 its start, 1 its end, by distance. The target's `anchor` rides the
// path; with `rotate` it also turns to face the way it goes.
export interface StewPath {
    // SVG path data, in the space it was drawn in (Stew: the artboard's)
    d: string;
    // turn to face the way it travels
    rotate?: boolean;
    // degrees added to that turn: which way the art itself faces
    rotateOffset?: number;
    // the point that rides the path, in the travelling node's own units;
    // absent = its origin
    anchor?: StewPoint;
    // the matrix (a, b, c, d, e, f) from the space the travelling node moves
    // in into the path's space - the host measures it; absent = the same
    // space. Its turn is taken off the facing, so the target faces the way
    // it goes as seen.
    frame?: [number, number, number, number, number, number];
}

// One property of one target, keyed over time.
export interface StewTrack {
    // which target: the host's name for it (Stew's data-stew-uid)
    targetUid: string;
    // what it animates: "x", "rotate", "fill"...
    property: string;
    // where it is at moments (any order: the engine sorts them)
    keyframes: StewKeyframe[];
    // seconds: the keys start over every `cycle` seconds, forever, whatever
    // the clip's length (a loop action's own lap); absent = they don't
    cycle?: number;
}

export interface StewKeyframe {
    // seconds
    time: number;
    value: number | string;
    // the ease of the stretch LEAVING this keyframe, toward the next one: a
    // name ("power2.out", "back.out(1.7)") or "cubic-bezier(x1, y1, x2, y2)".
    // Absent = DEFAULT_EASE.
    easing?: string;
}

// The ease a keyframe with none leaves along: Stew's default.
export const DEFAULT_EASE = "power1.inOut";