@it-compiles/anima 0.1.0

package/dist/core/context.d.ts

@@ -0,0 +1,70 @@
+import type { AlignOpts, Anchor, AnimCtx, BBoxHandle, FitMethods, GroupBuilder, GroupObject, LayoutBuilder, LayoutOpts, ObjRef, PinConstraint, PinMethods, ResizeMethods, ResolvedCtx, Scene, SceneObject, TransformMethods, Vec2 } from './types';
+export interface DebugGroupInfo {
+    members: SceneObject[];
+    kind: 'group' | 'layout';
+    pin?: {
+        anchor: Anchor;
+        target: Vec2;
+    };
+}
+export declare class AnimCtxImpl implements AnimCtx {
+    private base;
+    private channels;
+    private pins;
+    private scene;
+    private debugGroups;
+    /** Resolve a Vec2 expression to a concrete Vec2 */
+    private resolveVec2;
+    /** Resolve a number expression to a concrete number */
+    private resolveNum;
+    /** Create a ResolvedCtx based on current state */
+    private createResolvedCtx;
+    reset(scene: Scene): void;
+    getDebugGroups(): DebugGroupInfo[];
+    getDebugPins(): Map<SceneObject, PinConstraint>;
+    /** Get the current world position of a specific anchor on an object */
+    private getCurrentAnchorPosition;
+    private getGroupBounds;
+    /** Get the origin position of an object in world space, accounting for any existing pin */
+    private getOriginPosition;
+    private resolveGroupAnchor;
+    private getGroupCenter;
+    scale(obj: SceneObject | GroupObject): TransformMethods;
+    scaleX(obj: SceneObject): TransformMethods;
+    scaleY(obj: SceneObject): TransformMethods;
+    width(obj: SceneObject): TransformMethods;
+    height(obj: SceneObject): TransformMethods;
+    resize(obj: SceneObject): ResizeMethods;
+    fit(obj: SceneObject): FitMethods;
+    private computeWorldBounds;
+    private computeGroupWorldBounds;
+    bbox(obj: SceneObject | GroupObject): BBoxHandle;
+    rotate(obj: SceneObject | GroupObject): TransformMethods;
+    pin(obj: SceneObject | GroupObject, anchor: Anchor): PinMethods;
+    opacity(obj: SceneObject | GroupObject): TransformMethods;
+    group(...objects: SceneObject[]): GroupBuilder;
+    private trackGroupDebug;
+    /** Flatten objects for final result (extracts all SceneObjects from groups) */
+    private flattenToSceneObjects;
+    /** Get bounds for an ObjRef (single object or group) */
+    private getObjRefBounds;
+    /** Get the top-left position of an ObjRef (bounds position, not pin position) */
+    private getObjRefPosition;
+    /** Move an ObjRef by a delta (moves all members of a group together, preserving pin anchors) */
+    private moveObjRef;
+    private alignOnCrossAxis;
+    private calculateLayoutPositions;
+    layout(...args: (ObjRef | LayoutOpts)[]): LayoutBuilder;
+    inline(...args: (ObjRef | number)[]): LayoutBuilder;
+    stack(...args: (ObjRef | number)[]): LayoutBuilder;
+    paragraph(...args: (ObjRef | number)[]): LayoutBuilder;
+    /** Parse layout args - last arg may be a gap number */
+    private parseLayoutArgs;
+    /** Get anchor offset within bounds */
+    private getAnchorOffsetFromRect;
+    /** Get anchor position in world space for an ObjRef */
+    private getObjRefAnchorPosition;
+    align(...args: (ObjRef | AlignOpts)[]): LayoutBuilder;
+    center(...objects: ObjRef[]): LayoutBuilder;
+    solve(scene: Scene): ResolvedCtx;
+}

package/dist/core/define-animation.d.ts

@@ -0,0 +1,37 @@
+import type { Scene, TimelineAPI, Timeline, AnimCtx } from './types';
+/**
+ * Function signature for defining an animation.
+ * Receives a Scene to add objects to, returns a function that builds the timeline.
+ */
+export type AnimationFn = (scene: Scene) => (t: TimelineAPI<AnimCtx>) => void;
+/**
+ * The result of defineAnimation - contains the scene and timeline.
+ */
+export interface AnimationModule {
+    scene: Scene;
+    timeline: Timeline<AnimCtx>;
+}
+/**
+ * Define an animation using a function-style API.
+ *
+ * @example
+ * ```ts
+ * import { defineAnimation, easeOut, Screen } from '@syma/anima';
+ *
+ * export default defineAnimation((scene) => {
+ *   scene.bg('#fff');
+ *   const title = scene.text('Hello', { size: 48 });
+ *
+ *   return (t) => {
+ *     t.tween(1000, easeOut, (ctx, u) => {
+ *       ctx.pin(title, 'center').to(Screen.center(), u);
+ *     });
+ *   };
+ * });
+ * ```
+ */
+export declare function defineAnimation(fn: AnimationFn): AnimationModule;
+/**
+ * Alias for defineAnimation
+ */
+export declare const createAnimation: typeof defineAnimation;

package/dist/core/easing.d.ts

@@ -0,0 +1,19 @@
+import type { EaseFn } from './types';
+/** Linear - no easing */
+export declare const linear: EaseFn;
+/** Quadratic ease in - starts slow */
+export declare const easeIn: EaseFn;
+/** Quadratic ease out - ends slow */
+export declare const easeOut: EaseFn;
+/** Quadratic ease in-out - slow at both ends */
+export declare const easeInOut: EaseFn;
+/** Circular ease in - starts very slow, accelerates */
+export declare const easeCirc: EaseFn;
+/** Back ease in - slight overshoot backwards, then forward */
+export declare const easeBack: EaseFn;
+/** Bounce ease out - bounces at the end */
+export declare const easeBounce: EaseFn;
+/** Elastic ease out - springs past target then settles */
+export declare const easeElastic: EaseFn;
+/** Overshoot ease in-out - overshoots at both ends */
+export declare const overShoot: EaseFn;

package/dist/core/index.d.ts

@@ -0,0 +1,9 @@
+export * from './types';
+export * from './math';
+export * from './easing';
+export * from './scene';
+export * from './timeline';
+export * from './context';
+export * from './player';
+export * from './video-renderer';
+export * from './define-animation';

package/dist/core/math.d.ts

@@ -0,0 +1,22 @@
+import type { Vec2 } from './types';
+export declare const Screen: {
+    width: number;
+    height: number;
+    center: () => Vec2;
+    centerX: () => number;
+    centerY: () => number;
+    topLeft: () => Vec2;
+    topRight: () => Vec2;
+    bottomLeft: () => Vec2;
+    bottomRight: () => Vec2;
+};
+export declare const vec: {
+    add: ([x1, y1]: Vec2, [x2, y2]: Vec2) => Vec2;
+    sub: ([x1, y1]: Vec2, [x2, y2]: Vec2) => Vec2;
+    lerp: ([x1, y1]: Vec2, [x2, y2]: Vec2, u: number) => Vec2;
+};
+export declare const Vec: (x: number, y: number) => Vec2;
+export declare const lerp: (a: number, b: number, u: number) => number;
+export declare const angle: (deg: number) => number;
+export declare function applySR([x, y]: Vec2, scale: number, rotate: number, // radians
+scaleX?: number, scaleY?: number): Vec2;

package/dist/core/player.d.ts

@@ -0,0 +1,20 @@
+import type { AnimCtx, Scene, Timeline } from './types';
+export interface Player {
+    play(): void;
+    pause(): void;
+    stop(): void;
+    seek(timeMs: number): void;
+    renderAt(timeMs: number): void;
+    isPlaying: boolean;
+    currentTime: number;
+    duration: number;
+    debug: boolean;
+    onTimeUpdate: ((time: number) => void) | null;
+    onError: ((error: Error) => void) | null;
+    dispose(): void;
+}
+export interface PlayerOptions {
+    scene: Scene;
+    timeline: Timeline<AnimCtx>;
+}
+export declare function makePlayer(canvas: HTMLCanvasElement, opts: PlayerOptions): Player;

package/dist/core/scene.d.ts

@@ -0,0 +1,2 @@
+import type { Scene } from './types';
+export declare function makeScene(): Scene;

package/dist/core/timeline.d.ts

@@ -0,0 +1,2 @@
+import type { AnimCtx, Timeline, TimelineAPI } from './types';
+export declare function timeline(build: (api: TimelineAPI<AnimCtx>) => void): Timeline<AnimCtx>;

package/dist/core/types.d.ts

@@ -0,0 +1,240 @@
+export type Vec2 = readonly [number, number];
+/** Lazy expression that evaluates to Vec2 using resolved context */
+export type Vec2Expr = Vec2 | ((ctx: ResolvedCtx) => Vec2);
+/** Lazy expression that evaluates to Rect using resolved context */
+export type RectExpr = Rect | ((ctx: ResolvedCtx) => Rect);
+/** Lazy expression that evaluates to number using resolved context */
+export type NumExpr = number | ((ctx: ResolvedCtx) => number);
+/** Helper to check if value is an expression (function) */
+export declare function isExpr<T>(v: T | ((ctx: ResolvedCtx) => T)): v is (ctx: ResolvedCtx) => T;
+export type Anchor = "origin" | "topLeft" | "top" | "topRight" | "left" | "center" | "right" | "bottomLeft" | "bottom" | "bottomRight" | "baselineLeft" | "baseline";
+export interface SceneObject {
+    readonly id: symbol;
+}
+export interface GroupObject extends SceneObject {
+    readonly members: SceneObject[];
+    readonly isGroup: true;
+}
+export type ObjRef = SceneObject | GroupObject;
+export declare function isGroup(obj: SceneObject): obj is GroupObject;
+export interface Transform {
+    translate: Vec2;
+    rotate: number;
+    scale: number;
+    scaleX?: number;
+    scaleY?: number;
+}
+export interface Rect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export interface TextOpts {
+    at?: Vec2;
+    pin?: Anchor;
+    font?: string;
+    size?: number;
+    color?: string;
+}
+export interface ImageOpts {
+    at?: Vec2;
+    pin?: Anchor;
+    width?: number;
+    height?: number;
+}
+export interface RectOpts {
+    at?: Vec2;
+    pin?: Anchor;
+    width: number;
+    height: number;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    cornerRadius?: number;
+}
+export interface ResolvedCtx {
+    getTransform(obj: SceneObject): Transform;
+    getOpacity(obj: SceneObject): number;
+}
+export type ImageSource = {
+    kind: "url";
+    src: string;
+} | {
+    kind: "image";
+    image: HTMLImageElement;
+} | {
+    kind: "bitmap";
+    bitmap: ImageBitmap;
+} | {
+    kind: "canvas";
+    canvas: HTMLCanvasElement;
+};
+export interface Scene {
+    text(content: string, opts?: TextOpts): SceneObject;
+    rect(opts: RectOpts): SceneObject;
+    bg(color: string): SceneObject;
+    image(src: string | HTMLImageElement | ImageBitmap | HTMLCanvasElement | ImageSource, opts: ImageOpts): SceneObject;
+    objects(): Iterable<SceneObject>;
+    getBounds(obj: SceneObject): Rect;
+    getBaseline(obj: SceneObject): number | null;
+    resolveAnchor(obj: SceneObject, anchor: Anchor): Vec2;
+    getInitialTransform(obj: SceneObject): Transform;
+    render(ctx: ResolvedCtx, canvas: HTMLCanvasElement, dpr?: number): void;
+}
+export type EaseFn = (u: number) => number;
+export type BodyFn<TCtx> = (ctx: TCtx, u: number) => void;
+export type InstantBodyFn<TCtx> = (ctx: TCtx) => void;
+export interface Segment<TCtx> {
+    start: number;
+    end: number;
+    ease: EaseFn;
+    body: BodyFn<TCtx>;
+}
+export interface TimelineAPI<TCtx> {
+    seq(fn: () => void): void;
+    mark(name: string): void;
+    tween(dur: number, ease: EaseFn | null | undefined, body: BodyFn<TCtx>): void;
+    instant(body: InstantBodyFn<TCtx>): void;
+    /** Wait/pause for a duration (sugar for tween with no-op body) */
+    wait(dur: number): void;
+    with(name: string, offsetMs: number, fn: () => void): void;
+    overlap(offsetMs: number, fn: () => void): void;
+    par(fn: () => void): void;
+}
+export interface Timeline<TCtx> {
+    duration: number;
+    segs: Segment<TCtx>[];
+    evaluate(tMs: number, ctx: TCtx): void;
+}
+export interface TransformMethods {
+    to(v: NumExpr, u: number): void;
+    by(delta: NumExpr, u: number): void;
+}
+/** Target for resize - can be a number (width-based uniform) or an object */
+export type ResizeTarget = number | {
+    width: number;
+} | {
+    height: number;
+} | {
+    width: number;
+    height: number;
+} | {
+    fit: number;
+};
+/** Resize target that supports expressions */
+export type ResizeTargetExpr = NumExpr | {
+    width: NumExpr;
+} | {
+    height: NumExpr;
+} | {
+    width: NumExpr;
+    height: NumExpr;
+} | {
+    fit: NumExpr;
+};
+/** Methods for pixel-based resizing */
+export interface ResizeMethods {
+    to(target: ResizeTargetExpr, u: number): void;
+    by(delta: ResizeTargetExpr, u: number): void;
+}
+/** Options for toBBox */
+export interface FitToBBoxOpts {
+    pad?: Padding;
+}
+/** Methods for fitting an object to a bounding box (resize + center pin) */
+export interface FitMethods {
+    /** Fit to an existing BBoxHandle */
+    to(bbox: BBoxHandle, u: number): void;
+    /** Measure a group/object and fit to it */
+    toBBox(target: SceneObject | GroupObject, u: number, opts?: FitToBBoxOpts): void;
+}
+/** Padding specification - uniform number or per-side values */
+export type Padding = number | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+/** Handle for measured bounding box - returns lazy expressions */
+export interface BBoxHandle {
+    /** Add uniform or per-side padding */
+    pad(p: Padding): BBoxHandle;
+    /** Get size as [width, height] */
+    size(): Vec2Expr;
+    /** Get width in pixels */
+    width(): NumExpr;
+    /** Get height in pixels */
+    height(): NumExpr;
+    /** Get { width, height } for use with resize().to() */
+    whSize(): {
+        width: NumExpr;
+        height: NumExpr;
+    };
+    /** Get center point */
+    center(): Vec2Expr;
+    /** Get position of any anchor on the bbox */
+    anchor(a: Anchor): Vec2Expr;
+    /** Get the raw rect */
+    toRect(): RectExpr;
+}
+export interface PinMethods {
+    to(pos: Vec2Expr, u: number): void;
+    by(delta: Vec2Expr, u: number): void;
+}
+export interface GroupBuilder extends GroupObject {
+    pin(anchor: Anchor): PinMethods;
+    scale(): TransformMethods;
+    rotate(): TransformMethods;
+    opacity(): TransformMethods;
+}
+export interface LayoutOpts {
+    axis?: "x" | "y";
+    align?: Anchor;
+    gap?: number;
+}
+export interface AlignOpts {
+    anchor?: Anchor;
+}
+export interface LayoutBuilder {
+    to(u: number): GroupBuilder;
+}
+export interface AnimCtx {
+    pin(obj: SceneObject | GroupObject, anchor: Anchor): PinMethods;
+    scale(obj: SceneObject | GroupObject): TransformMethods;
+    scaleX(obj: SceneObject): TransformMethods;
+    scaleY(obj: SceneObject): TransformMethods;
+    rotate(obj: SceneObject | GroupObject): TransformMethods;
+    opacity(obj: SceneObject | GroupObject): TransformMethods;
+    /** Set width in pixels (converts to scaleX internally) */
+    width(obj: SceneObject): TransformMethods;
+    /** Set height in pixels (converts to scaleY internally) */
+    height(obj: SceneObject): TransformMethods;
+    /** Resize in pixels - uniform or non-uniform */
+    resize(obj: SceneObject): ResizeMethods;
+    /** Fit object to a bounding box (resize + center pin) */
+    fit(obj: SceneObject): FitMethods;
+    /** Measure the bounding box of an object or group */
+    bbox(obj: SceneObject | GroupObject): BBoxHandle;
+    group(...objects: SceneObject[]): GroupBuilder;
+    layout(...args: (ObjRef | LayoutOpts)[]): LayoutBuilder;
+    inline(...objects: ObjRef[]): LayoutBuilder;
+    stack(...objects: ObjRef[]): LayoutBuilder;
+    paragraph(...objects: ObjRef[]): LayoutBuilder;
+    align(...args: (ObjRef | AlignOpts)[]): LayoutBuilder;
+    center(...objects: ObjRef[]): LayoutBuilder;
+}
+export interface PinConstraint {
+    anchor: Anchor;
+    world: Vec2;
+    weight?: number;
+    priority?: number;
+    source?: string;
+}
+export interface ChannelState {
+    scale?: number;
+    scaleX?: number;
+    scaleY?: number;
+    rotate?: number;
+    opacity?: number;
+}

package/dist/core/video-renderer.d.ts

@@ -0,0 +1,21 @@
+import type { Scene, Timeline, AnimCtx } from './types';
+export interface RenderOptions {
+    scene: Scene;
+    timeline: Timeline<AnimCtx>;
+    fps: number;
+    bitrate: number;
+    scale: number;
+    onProgress: (progress: number, frame: number, totalFrames: number) => void;
+}
+export interface RenderResult {
+    blob: Blob;
+    duration: number;
+    frames: number;
+}
+export interface RenderController {
+    start(): Promise<RenderResult>;
+    cancel(): void;
+}
+export declare function isWebCodecsSupported(): boolean;
+export declare function createVideoRenderer(options: RenderOptions): RenderController;
+export declare function downloadBlob(blob: Blob, filename: string): void;

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export type { Vec2, Vec2Expr, NumExpr, RectExpr, Anchor, SceneObject, GroupObject, ObjRef, Scene, Timeline, TimelineAPI, AnimCtx, EaseFn, Transform, Rect, TextOpts, RectOpts, ImageOpts, ImageSource, LayoutOpts, AlignOpts, Padding, PinMethods, TransformMethods, ResizeMethods, FitMethods, BBoxHandle, GroupBuilder, LayoutBuilder, ResolvedCtx, } from './core';
+export { isGroup, isExpr } from './core';
+export { makeScene } from './core';
+export { timeline } from './core';
+export { defineAnimation, createAnimation } from './core';
+export type { AnimationFn, AnimationModule } from './core';
+export { makePlayer } from './core';
+export type { Player, PlayerOptions } from './core';
+export { linear, easeIn, easeOut, easeInOut, easeCirc, easeBack, easeBounce, easeElastic, overShoot, } from './core';
+export { Vec, vec, Screen, lerp, angle } from './core';
+export { createVideoRenderer, isWebCodecsSupported, downloadBlob, } from './core';
+export type { RenderOptions, RenderResult, RenderController } from './core';