@motion-script/web 0.1.0

package/dist/fills/renderer.d.ts

@@ -0,0 +1,24 @@
+import type { CanvasKit, Image as CKImage, Paint } from "@motion-script/canvaskit";
+import type { FillResolved } from "@motion-script/core";
+import type { WebStorageAdapter } from "../storage-adapter";
+import type { ShapeBounds } from "./handler";
+export interface FillRendererContext {
+    canvasKit: CanvasKit;
+    paint: Paint;
+    assets: WebStorageAdapter;
+    getShapeBounds: () => ShapeBounds | null;
+    offscreenCanvas: HTMLCanvasElement | null;
+    offscreenCtx: CanvasRenderingContext2D | null;
+    /**
+     * CKImages the renderer materialized for this fill. The handler deletes
+     * them after the fill's shapes are drawn so GPU memory is bounded to one
+     * frame's worth of textures rather than the whole cached clip.
+     */
+    transientImages: CKImage[];
+}
+export declare abstract class FillRenderer<T extends FillResolved = FillResolved> {
+    abstract applyPaint(fill: T, ctx: FillRendererContext): boolean;
+    /** Release any persistent CanvasKit objects held by this renderer. */
+    dispose(): void;
+}
+//# sourceMappingURL=renderer.d.ts.map

package/dist/fills/renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/fills/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,IAAI,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACnF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,MAAM,WAAW,mBAAmB;IAChC,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,iBAAiB,CAAC;IAC1B,cAAc,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACzC,eAAe,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC1C,YAAY,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAC9C;;;;OAIG;IACH,eAAe,EAAE,OAAO,EAAE,CAAC;CAC9B;AAED,8BAAsB,YAAY,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY;IACpE,QAAQ,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,mBAAmB,GAAG,OAAO;IAE/D,sEAAsE;IACtE,OAAO,IAAI,IAAI;CAClB"}

package/dist/fills/renderer.js

@@ -0,0 +1,5 @@
+export class FillRenderer {
+    /** Release any persistent CanvasKit objects held by this renderer. */
+    dispose() { }
+}
+//# sourceMappingURL=renderer.js.map

package/dist/fills/renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.js","sourceRoot":"","sources":["../../src/fills/renderer.ts"],"names":[],"mappings":"AAoBA,MAAM,OAAgB,YAAY;IAG9B,sEAAsE;IACtE,OAAO,KAAW,CAAC;CACtB"}

package/dist/fills/solid.d.ts

@@ -0,0 +1,7 @@
+import type { SolidFillResolved } from "@motion-script/core";
+import { FillRenderer, type FillRendererContext } from "./renderer";
+/** Flat-color fill — sets paint color components directly, no shader. */
+export declare class SolidFillRenderer extends FillRenderer<SolidFillResolved> {
+    applyPaint(fill: SolidFillResolved, ctx: FillRendererContext): boolean;
+}
+//# sourceMappingURL=solid.d.ts.map

package/dist/fills/solid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"solid.d.ts","sourceRoot":"","sources":["../../src/fills/solid.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,KAAK,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEpE,yEAAyE;AACzE,qBAAa,iBAAkB,SAAQ,YAAY,CAAC,iBAAiB,CAAC;IAClE,UAAU,CAAC,IAAI,EAAE,iBAAiB,EAAE,GAAG,EAAE,mBAAmB,GAAG,OAAO;CAazE"}

package/dist/fills/solid.js

@@ -0,0 +1,13 @@
+import { FillRenderer } from "./renderer";
+/** Flat-color fill — sets paint color components directly, no shader. */
+export class SolidFillRenderer extends FillRenderer {
+    applyPaint(fill, ctx) {
+        // setColorComponents takes scalars directly (defaults to sRGB), avoiding
+        // the per-call Float32Array that Color4f()+setColor() allocates on the
+        // wasm heap every frame for every shape.
+        ctx.paint.setColorComponents(fill.color[0], fill.color[1], fill.color[2], fill.color[3] * (fill.opacity ?? 1));
+        ctx.paint.setShader(null);
+        return true;
+    }
+}
+//# sourceMappingURL=solid.js.map

package/dist/fills/solid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"solid.js","sourceRoot":"","sources":["../../src/fills/solid.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAA4B,MAAM,YAAY,CAAC;AAEpE,yEAAyE;AACzE,MAAM,OAAO,iBAAkB,SAAQ,YAA+B;IAClE,UAAU,CAAC,IAAuB,EAAE,GAAwB;QACxD,yEAAyE;QACzE,uEAAuE;QACvE,yCAAyC;QACzC,GAAG,CAAC,KAAK,CAAC,kBAAkB,CACxB,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EACb,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EACb,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EACb,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CACtC,CAAC;QACF,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QAC1B,OAAO,IAAI,CAAC;IAChB,CAAC;CACJ"}

package/dist/fills/stripe.d.ts

@@ -0,0 +1,7 @@
+import type { StripeFillResolved } from "@motion-script/core";
+import { FillRenderer, type FillRendererContext } from "./renderer";
+/** Renders a repeating diagonal-stripe pattern from a cached single-tile image. */
+export declare class StripeFillRenderer extends FillRenderer<StripeFillResolved> {
+    applyPaint(fill: StripeFillResolved, ctx: FillRendererContext): boolean;
+}
+//# sourceMappingURL=stripe.d.ts.map

package/dist/fills/stripe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stripe.d.ts","sourceRoot":"","sources":["../../src/fills/stripe.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,KAAK,mBAAmB,EAAE,MAAM,YAAY,CAAC;AA6EpE,mFAAmF;AACnF,qBAAa,kBAAmB,SAAQ,YAAY,CAAC,kBAAkB,CAAC;IACpE,UAAU,CAAC,IAAI,EAAE,kBAAkB,EAAE,GAAG,EAAE,mBAAmB,GAAG,OAAO;CAiC1E"}

package/dist/fills/stripe.js

@@ -0,0 +1,85 @@
+import { FillRenderer } from "./renderer";
+const stripeCache = new Map();
+function buildCacheKey(fill) {
+    const gap = fill.gap ?? 8;
+    const sw = fill.strokeWidth ?? 1;
+    const [r, g, b, a] = fill.color ?? [0, 0, 0, 1];
+    return `${gap}|${sw}|${r},${g},${b},${a}`;
+}
+/**
+ * Renders a stripe tile onto the offscreen 2D canvas — no rotation applied.
+ * The tile is `gap × gap` pixels with a single vertical line of `strokeWidth`
+ * at x = strokeWidth/2 (same clip-prevention offset as the SVG component).
+ * Rotation is handled by the CanvasKit shader matrix in applyPaint.
+ */
+function renderStripeTile(fill, offscreen, offscreenCtx, ck) {
+    const gap = fill.gap ?? 8;
+    const sw = fill.strokeWidth ?? 1;
+    const [cr, cg, cb, ca] = fill.color ?? [0, 0, 0, 1];
+    const cssColor = `rgba(${Math.round(cr * 255)},${Math.round(cg * 255)},${Math.round(cb * 255)},${ca})`;
+    offscreen.width = gap;
+    offscreen.height = gap;
+    offscreenCtx.clearRect(0, 0, gap, gap);
+    offscreenCtx.strokeStyle = cssColor;
+    offscreenCtx.lineWidth = sw;
+    // Vertical line at x = sw/2 — same as SVG x1={offset}
+    const offset = sw / 2;
+    offscreenCtx.beginPath();
+    offscreenCtx.moveTo(offset, 0);
+    offscreenCtx.lineTo(offset, gap);
+    offscreenCtx.stroke();
+    const imageData = offscreenCtx.getImageData(0, 0, gap, gap);
+    return ck.MakeImage({
+        width: gap,
+        height: gap,
+        alphaType: ck.AlphaType.Unpremul,
+        colorType: ck.ColorType.RGBA_8888,
+        colorSpace: ck.ColorSpace.SRGB,
+    }, imageData.data, 4 * gap);
+}
+/**
+ * Builds a 3×3 affine matrix (row-major, as CanvasKit expects) that:
+ *   1. Rotates by `angleDeg` around the shape's top-left corner
+ *   2. Translates so the pattern starts at the shape origin
+ *
+ * This is equivalent to SVG patternTransform="rotate(angle)" — the tile
+ * itself is axis-aligned; CanvasKit rotates the repeating space.
+ */
+function makeRotatedMatrix(angleDeg, tx, ty) {
+    const rad = (angleDeg * Math.PI) / 180;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    // Rotate around (tx, ty): translate to origin, rotate, translate back
+    return [
+        cos, -sin, tx - cos * tx + sin * ty,
+        sin, cos, ty - sin * tx - cos * ty,
+        0, 0, 1,
+    ];
+}
+/** Renders a repeating diagonal-stripe pattern from a cached single-tile image. */
+export class StripeFillRenderer extends FillRenderer {
+    applyPaint(fill, ctx) {
+        if (!ctx.offscreenCanvas) {
+            ctx.offscreenCanvas = document.createElement("canvas");
+            ctx.offscreenCtx = ctx.offscreenCanvas.getContext("2d");
+        }
+        if (!ctx.offscreenCtx)
+            return false;
+        const key = buildCacheKey(fill);
+        let img = stripeCache.get(key);
+        if (!img) {
+            img = renderStripeTile(fill, ctx.offscreenCanvas, ctx.offscreenCtx, ctx.canvasKit);
+            if (!img)
+                return false;
+            stripeCache.set(key, img);
+        }
+        const bounds = ctx.getShapeBounds();
+        const tx = bounds?.left ?? 0;
+        const ty = bounds?.top ?? 0;
+        const angle = fill.angle ?? -45;
+        const matrix = makeRotatedMatrix(angle, tx, ty);
+        ctx.paint.setShader(img.makeShaderOptions(ctx.canvasKit.TileMode.Repeat, ctx.canvasKit.TileMode.Repeat, ctx.canvasKit.FilterMode.Linear, ctx.canvasKit.MipmapMode.None, matrix));
+        return true;
+    }
+}
+//# sourceMappingURL=stripe.js.map

package/dist/fills/stripe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stripe.js","sourceRoot":"","sources":["../../src/fills/stripe.ts"],"names":[],"mappings":"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"}

package/dist/fills/video.d.ts

@@ -0,0 +1,6 @@
+import type { VideoFillResolved } from "@motion-script/core";
+import { FillRenderer, type FillRendererContext } from "./renderer";
+export declare class VideoFillRenderer extends FillRenderer<VideoFillResolved> {
+    applyPaint(fill: VideoFillResolved, ctx: FillRendererContext): boolean;
+}
+//# sourceMappingURL=video.d.ts.map

package/dist/fills/video.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../src/fills/video.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,KAAK,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAGpE,qBAAa,iBAAkB,SAAQ,YAAY,CAAC,iBAAiB,CAAC;IAClE,UAAU,CAAC,IAAI,EAAE,iBAAiB,EAAE,GAAG,EAAE,mBAAmB,GAAG,OAAO;CAQzE"}

package/dist/fills/video.js

@@ -0,0 +1,14 @@
+import { FillRenderer } from "./renderer";
+import { makeImageShader, applyMediaFilters } from "./image";
+export class VideoFillRenderer extends FillRenderer {
+    applyPaint(fill, ctx) {
+        const frame = ctx.assets.getVideoFrame(fill.src, fill.timestamp * 1_000_000);
+        if (!frame)
+            return false;
+        // Adapter-owned CKImage — see ImageFillRenderer for rationale.
+        ctx.paint.setShader(makeImageShader(frame, fill, ctx.canvasKit, ctx.getShapeBounds()));
+        applyMediaFilters(fill, ctx);
+        return true;
+    }
+}
+//# sourceMappingURL=video.js.map

package/dist/fills/video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video.js","sourceRoot":"","sources":["../../src/fills/video.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAA4B,MAAM,YAAY,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE7D,MAAM,OAAO,iBAAkB,SAAQ,YAA+B;IAClE,UAAU,CAAC,IAAuB,EAAE,GAAwB;QACxD,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,GAAI,EAAE,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,CAAC;QAC9E,IAAI,CAAC,KAAK;YAAE,OAAO,KAAK,CAAC;QACzB,+DAA+D;QAC/D,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,CAAC,SAAS,EAAE,GAAG,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;QACvF,iBAAiB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAC7B,OAAO,IAAI,CAAC;IAChB,CAAC;CACJ"}

package/dist/font-style.d.ts

@@ -0,0 +1,23 @@
+import type { CanvasKit, FontStyle, Typeface, TypefaceFontProvider } from "@motion-script/canvaskit";
+/**
+ * Build a CanvasKit {@link FontStyle} from a numeric CSS font weight (100–900)
+ * and an optional italic flag. Skia's font matcher reads the `weight`/`slant`
+ * fields off this style and picks the closest registered typeface for the
+ * family — this is what makes any `fontWeight` resolve to the nearest available
+ * weight file rather than requiring an exact `family@weight` registration.
+ */
+export declare function toFontStyle(canvasKit: CanvasKit, fontWeight: number, italic?: boolean): FontStyle;
+/**
+ * Resolve the closest registered typeface for a family at the requested weight
+ * and slant. Fonts are registered under their bare family name (see
+ * {@link WebStorageAdapter.loadFont}), so the provider holds every weight of a
+ * family and Skia selects the nearest *static* file match.
+ *
+ * Note: this matcher does NOT instantiate a variable font's `wght` axis — it
+ * returns the default instance regardless of requested weight. Paragraph text
+ * gets continuous variable weight through the layout path instead (which passes
+ * `fontVariations` and draws with the run's positioned typeface); see
+ * {@link layoutParagraph}. This helper remains for static-family matching.
+ */
+export declare function resolveTypeface(canvasKit: CanvasKit, fontMgr: TypefaceFontProvider, fontFamily: string, fontWeight: number, italic?: boolean): Typeface | null;
+//# sourceMappingURL=font-style.d.ts.map

package/dist/font-style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-style.d.ts","sourceRoot":"","sources":["../src/font-style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAErG;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,UAAQ,GAAG,SAAS,CAU/F;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAC3B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,oBAAoB,EAC7B,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,EAClB,MAAM,UAAQ,GACf,QAAQ,GAAG,IAAI,CAEjB"}

package/dist/font-style.js

@@ -0,0 +1,34 @@
+/**
+ * Build a CanvasKit {@link FontStyle} from a numeric CSS font weight (100–900)
+ * and an optional italic flag. Skia's font matcher reads the `weight`/`slant`
+ * fields off this style and picks the closest registered typeface for the
+ * family — this is what makes any `fontWeight` resolve to the nearest available
+ * weight file rather than requiring an exact `family@weight` registration.
+ */
+export function toFontStyle(canvasKit, fontWeight, italic = false) {
+    // FontWeight enum entities carry their numeric CSS weight as `.value`, so a
+    // raw numeric weight can be passed straight through. We still clamp to the
+    // valid CSS range so an out-of-range tween value can't confuse the matcher.
+    const weight = { value: Math.max(1, Math.min(1000, Math.round(fontWeight))) };
+    return {
+        weight,
+        slant: italic ? canvasKit.FontSlant.Italic : canvasKit.FontSlant.Upright,
+        width: canvasKit.FontWidth.Normal,
+    };
+}
+/**
+ * Resolve the closest registered typeface for a family at the requested weight
+ * and slant. Fonts are registered under their bare family name (see
+ * {@link WebStorageAdapter.loadFont}), so the provider holds every weight of a
+ * family and Skia selects the nearest *static* file match.
+ *
+ * Note: this matcher does NOT instantiate a variable font's `wght` axis — it
+ * returns the default instance regardless of requested weight. Paragraph text
+ * gets continuous variable weight through the layout path instead (which passes
+ * `fontVariations` and draws with the run's positioned typeface); see
+ * {@link layoutParagraph}. This helper remains for static-family matching.
+ */
+export function resolveTypeface(canvasKit, fontMgr, fontFamily, fontWeight, italic = false) {
+    return fontMgr.matchFamilyStyle(fontFamily, toFontStyle(canvasKit, fontWeight, italic));
+}
+//# sourceMappingURL=font-style.js.map

package/dist/font-style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-style.js","sourceRoot":"","sources":["../src/font-style.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CAAC,SAAoB,EAAE,UAAkB,EAAE,MAAM,GAAG,KAAK;IAChF,4EAA4E;IAC5E,2EAA2E;IAC3E,4EAA4E;IAC5E,MAAM,MAAM,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,EAAyB,CAAC;IACrG,OAAO;QACH,MAAM;QACN,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,OAAO;QACxE,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,MAAM;KACpC,CAAC;AACN,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,eAAe,CAC3B,SAAoB,EACpB,OAA6B,EAC7B,UAAkB,EAClB,UAAkB,EAClB,MAAM,GAAG,KAAK;IAEd,OAAO,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE,WAAW,CAAC,SAAS,EAAE,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;AAC5F,CAAC"}

package/dist/getter.d.ts

@@ -0,0 +1,9 @@
+import { type CanvasKit } from "@motion-script/canvaskit";
+/**
+ * Loads and caches the CanvasKit wasm module (memoized — concurrent callers
+ * share the same init promise, and once resolved every call returns the same
+ * instance). `wasmUrl` defaults to a CDN so consumers don't have to host the
+ * binary themselves; pass a local URL to use the bundled/copied wasm instead.
+ */
+export declare function getCanvasKit(wasmUrl?: string): Promise<CanvasKit>;
+//# sourceMappingURL=getter.d.ts.map

package/dist/getter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getter.d.ts","sourceRoot":"","sources":["../src/getter.ts"],"names":[],"mappings":"AACA,OAAsB,EAAE,KAAK,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAQzE;;;;;GAKG;AACH,wBAAsB,YAAY,CAAC,OAAO,GAAE,MAAoB,GAAG,OAAO,CAAC,SAAS,CAAC,CAWpF"}

package/dist/getter.js

@@ -0,0 +1,26 @@
+// @motion-script/core/src/engine.ts
+import CanvasKitInit from "@motion-script/canvaskit";
+let canvasKit = null;
+let initPromise = null;
+// Default to unpkg so beginners don't have to configure anything
+const DEFAULT_CDN = "https://unpkg.com/canvaskit-wasm@latest/bin/canvaskit.wasm";
+/**
+ * Loads and caches the CanvasKit wasm module (memoized — concurrent callers
+ * share the same init promise, and once resolved every call returns the same
+ * instance). `wasmUrl` defaults to a CDN so consumers don't have to host the
+ * binary themselves; pass a local URL to use the bundled/copied wasm instead.
+ */
+export async function getCanvasKit(wasmUrl = DEFAULT_CDN) {
+    if (canvasKit)
+        return canvasKit;
+    if (initPromise)
+        return initPromise;
+    initPromise = CanvasKitInit({
+        locateFile: () => wasmUrl,
+    }).then((ck) => {
+        canvasKit = ck;
+        return ck;
+    });
+    return initPromise;
+}
+//# sourceMappingURL=getter.js.map

package/dist/getter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getter.js","sourceRoot":"","sources":["../src/getter.ts"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,OAAO,aAAiC,MAAM,0BAA0B,CAAC;AAEzE,IAAI,SAAS,GAAqB,IAAI,CAAC;AACvC,IAAI,WAAW,GAA8B,IAAI,CAAC;AAElD,iEAAiE;AACjE,MAAM,WAAW,GAAG,4DAA4D,CAAC;AAEjF;;;;;GAKG;AACH,MAAM,CAAC,KAAK,UAAU,YAAY,CAAC,UAAkB,WAAW;IAC5D,IAAI,SAAS;QAAE,OAAO,SAAS,CAAC;IAChC,IAAI,WAAW;QAAE,OAAO,WAAW,CAAC;IAEpC,WAAW,GAAG,aAAa,CAAC;QACxB,UAAU,EAAE,GAAG,EAAE,CAAC,OAAO;KAC5B,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE;QACX,SAAS,GAAG,EAAE,CAAC;QACf,OAAO,EAAE,CAAC;IACd,CAAC,CAAC,CAAC;IACH,OAAO,WAAW,CAAC;AACvB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { WebRenderContext } from "./render-context";
+export { WebStorageAdapter } from "./storage-adapter";
+export { getCanvasKit } from "./getter";
+export { CanvasKitEffect, CanvasKitEffectRegistry } from "./effects";
+export { exportScenesAsVideo, type ExportParams, type ExportProgressCallback } from "./exporter";
+export { WebAudioDevice as WebAudioPlayer } from "./audio/player";
+export { WebMeasureScope } from "./measure-scope";
+export { WebMasterClock } from "./master-clock";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAC;AACrE,OAAO,EAAE,mBAAmB,EAAE,KAAK,YAAY,EAAE,KAAK,sBAAsB,EAAE,MAAM,YAAY,CAAC;AACjG,OAAO,EAAE,cAAc,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -0,0 +1,11 @@
+// @motion-script/web — CanvasKit/Skia-based renderer for @motion-script/core,
+// running in the browser (canvas mount, video export, audio playback/clock).
+export { WebRenderContext } from "./render-context";
+export { WebStorageAdapter } from "./storage-adapter";
+export { getCanvasKit } from "./getter";
+export { CanvasKitEffect, CanvasKitEffectRegistry } from "./effects";
+export { exportScenesAsVideo } from "./exporter";
+export { WebAudioDevice as WebAudioPlayer } from "./audio/player";
+export { WebMeasureScope } from "./measure-scope";
+export { WebMasterClock } from "./master-clock";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,6EAA6E;AAE7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAC;AACrE,OAAO,EAAE,mBAAmB,EAAkD,MAAM,YAAY,CAAC;AACjG,OAAO,EAAE,cAAc,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/master-clock.d.ts

@@ -0,0 +1,42 @@
+import { MasterClock } from "@motion-script/core";
+/**
+ * MasterClock backed by a Web Audio AudioContext. Scene time advances in
+ * lock-step with `audioContext.currentTime`, so any AudioBufferSourceNodes
+ * scheduled on the same context play perfectly in sync.
+ *
+ * When paused we suspend the context (audio stops, currentTime freezes);
+ * when playing we resume and a rAF loop publishes ticks at the target fps.
+ *
+ * A single silent buffer covering the full timeline is started on play(),
+ * which keeps the context active and gives the browser a stable audio
+ * graph to schedule against even on scenes that contain no audio nodes.
+ */
+export declare class WebMasterClock extends MasterClock {
+    private context;
+    private ownsContext;
+    private fps;
+    private playStartCtxTime;
+    private seekOffset;
+    private speed;
+    private reverse;
+    private rafId;
+    private silentSource;
+    constructor(opts: {
+        context?: AudioContext;
+        fps: number;
+    });
+    getContext(): AudioContext;
+    seek(t: number): void;
+    /** Resumes the (possibly suspended) context, anchors elapsed-time tracking to the current `context.currentTime`, and starts the silent ticker + rAF tick loop. */
+    play(speed?: number, reverse?: boolean): Promise<void>;
+    /** Stops the tick loop and silent ticker, then suspends the context — freezing `currentTime` so elapsed-time math stays correct across the pause. */
+    pause(): void;
+    /** (Re)starts the silent buffer source covering the remaining timeline — keeps the AudioContext active and gives a stable graph for other AudioBufferSourceNodes to schedule against, per the class-level note. */
+    private startSilentTicker;
+    private stopSilentTicker;
+    /** Drives ticks off `requestAnimationFrame`, deriving scene time from elapsed `context.currentTime` (so it stays sample-accurate) and only firing `tick()` when a full frame interval has elapsed. */
+    private startLoop;
+    private stopLoop;
+    dispose(): void;
+}
+//# sourceMappingURL=master-clock.d.ts.map

package/dist/master-clock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"master-clock.d.ts","sourceRoot":"","sources":["../src/master-clock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD;;;;;;;;;;;GAWG;AACH,qBAAa,cAAe,SAAQ,WAAW;IAC3C,OAAO,CAAC,OAAO,CAAe;IAC9B,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,GAAG,CAAS;IAEpB,OAAO,CAAC,gBAAgB,CAAa;IACrC,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,KAAK,CAAa;IAC1B,OAAO,CAAC,OAAO,CAAkB;IAEjC,OAAO,CAAC,KAAK,CAAuB;IACpC,OAAO,CAAC,YAAY,CAAsC;gBAE9C,IAAI,EAAE;QAAE,OAAO,CAAC,EAAE,YAAY,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE;IAOzD,UAAU,IAAI,YAAY;IAI1B,IAAI,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAOrB,kKAAkK;IAC5J,IAAI,CAAC,KAAK,GAAE,MAAU,EAAE,OAAO,GAAE,OAAe,GAAG,OAAO,CAAC,IAAI,CAAC;IAetE,qJAAqJ;IACrJ,KAAK,IAAI,IAAI;IAUb,mNAAmN;IACnN,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,gBAAgB;IAaxB,sMAAsM;IACtM,OAAO,CAAC,SAAS;IAkCjB,OAAO,CAAC,QAAQ;IAOhB,OAAO,IAAI,IAAI;CAQlB"}

package/dist/master-clock.js

@@ -0,0 +1,134 @@
+import { MasterClock } from "@motion-script/core";
+/**
+ * MasterClock backed by a Web Audio AudioContext. Scene time advances in
+ * lock-step with `audioContext.currentTime`, so any AudioBufferSourceNodes
+ * scheduled on the same context play perfectly in sync.
+ *
+ * When paused we suspend the context (audio stops, currentTime freezes);
+ * when playing we resume and a rAF loop publishes ticks at the target fps.
+ *
+ * A single silent buffer covering the full timeline is started on play(),
+ * which keeps the context active and gives the browser a stable audio
+ * graph to schedule against even on scenes that contain no audio nodes.
+ */
+export class WebMasterClock extends MasterClock {
+    context;
+    ownsContext;
+    fps;
+    playStartCtxTime = 0;
+    seekOffset = 0;
+    speed = 1;
+    reverse = false;
+    rafId = null;
+    silentSource = null;
+    constructor(opts) {
+        super();
+        this.context = opts.context ?? new AudioContext();
+        this.ownsContext = !opts.context;
+        this.fps = opts.fps;
+    }
+    getContext() {
+        return this.context;
+    }
+    seek(t) {
+        const clamped = Math.max(0, Math.min(t, this.duration));
+        this.seekOffset = clamped;
+        this.playStartCtxTime = this.context.currentTime;
+        this.setCurrentTime(clamped);
+    }
+    /** Resumes the (possibly suspended) context, anchors elapsed-time tracking to the current `context.currentTime`, and starts the silent ticker + rAF tick loop. */
+    async play(speed = 1, reverse = false) {
+        this.speed = speed;
+        this.reverse = reverse;
+        this.seekOffset = this.currentTime;
+        if (this.context.state === "suspended") {
+            await this.context.resume();
+        }
+        this.playStartCtxTime = this.context.currentTime;
+        this.startSilentTicker();
+        super.play(speed, reverse);
+        this.startLoop();
+    }
+    /** Stops the tick loop and silent ticker, then suspends the context — freezing `currentTime` so elapsed-time math stays correct across the pause. */
+    pause() {
+        this.seekOffset = this.currentTime;
+        this.stopLoop();
+        this.stopSilentTicker();
+        if (this.context.state === "running") {
+            this.context.suspend();
+        }
+        super.pause();
+    }
+    /** (Re)starts the silent buffer source covering the remaining timeline — keeps the AudioContext active and gives a stable graph for other AudioBufferSourceNodes to schedule against, per the class-level note. */
+    startSilentTicker() {
+        this.stopSilentTicker();
+        const remaining = Math.max(0.001, this.duration - this.seekOffset);
+        const sampleRate = this.context.sampleRate;
+        const buffer = this.context.createBuffer(1, Math.ceil(remaining * sampleRate), sampleRate);
+        const source = this.context.createBufferSource();
+        source.buffer = buffer;
+        source.connect(this.context.destination);
+        source.start();
+        this.silentSource = source;
+    }
+    stopSilentTicker() {
+        if (this.silentSource) {
+            try {
+                this.silentSource.onended = null;
+                this.silentSource.stop();
+                this.silentSource.disconnect();
+            }
+            catch {
+                // already stopped
+            }
+            this.silentSource = null;
+        }
+    }
+    /** Drives ticks off `requestAnimationFrame`, deriving scene time from elapsed `context.currentTime` (so it stays sample-accurate) and only firing `tick()` when a full frame interval has elapsed. */
+    startLoop() {
+        if (this.rafId !== null)
+            return;
+        const frameDt = 1 / this.fps;
+        let lastTickTime = this.currentTime;
+        const loop = async () => {
+            const elapsed = (this.context.currentTime - this.playStartCtxTime) * this.speed;
+            const next = this.reverse
+                ? this.seekOffset - elapsed
+                : this.seekOffset + elapsed;
+            const clamped = Math.max(0, Math.min(next, this.duration));
+            this.setCurrentTime(clamped);
+            if (Math.abs(clamped - lastTickTime) >= frameDt) {
+                lastTickTime = clamped;
+                // Await so that a slow tick (asset load on a scene
+                // boundary) doesn't queue a second concurrent tick.
+                await this.tick();
+            }
+            const ended = this.reverse ? clamped <= 0 : clamped >= this.duration;
+            if (ended) {
+                this.rafId = null;
+                return;
+            }
+            // If pause() cleared the rafId while we were awaiting tick(),
+            // do not resume the loop.
+            if (this.rafId === null)
+                return;
+            this.rafId = requestAnimationFrame(loop);
+        };
+        this.rafId = requestAnimationFrame(loop);
+    }
+    stopLoop() {
+        if (this.rafId !== null) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
+    }
+    dispose() {
+        this.stopLoop();
+        this.stopSilentTicker();
+        if (this.ownsContext) {
+            this.context.close();
+        }
+        super.dispose();
+    }
+}
+//# sourceMappingURL=master-clock.js.map

package/dist/master-clock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"master-clock.js","sourceRoot":"","sources":["../src/master-clock.ts"],"names":[],"mappings":"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"}

package/dist/measure-scope.d.ts

@@ -0,0 +1,14 @@
+import { FontStyle, MeasureScope } from "@motion-script/core";
+import { WebStorageAdapter } from "./storage-adapter";
+/**
+ * {@link MeasureScope} implementation used by layout (auto/hug sizing) to
+ * measure text width before drawing — routes through the same paragraph
+ * layout path as rendering so the measured width matches the drawn width
+ * exactly, including letter-spacing and font-matching behavior.
+ */
+export declare class WebMeasureScope extends MeasureScope {
+    private storageAdapter;
+    constructor(storageAdapter: WebStorageAdapter);
+    measureText(text: string, fontSize: number, fontFamily: string, fontWeight?: number, letterSpacing?: number, fontStyle?: FontStyle): number;
+}
+//# sourceMappingURL=measure-scope.d.ts.map

package/dist/measure-scope.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"measure-scope.d.ts","sourceRoot":"","sources":["../src/measure-scope.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAGtD;;;;;GAKG;AACH,qBAAa,eAAgB,SAAQ,YAAY;IAC7C,OAAO,CAAC,cAAc,CAAoB;gBAE9B,cAAc,EAAE,iBAAiB;IAK7C,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,GAAE,MAAY,EAAE,aAAa,GAAE,MAAU,EAAE,SAAS,GAAE,SAAoB,GAAG,MAAM;CAgBhK"}

package/dist/measure-scope.js

@@ -0,0 +1,29 @@
+import { MeasureScope } from "@motion-script/core";
+import { layoutParagraph } from "./shapes/paragraph-layout";
+/**
+ * {@link MeasureScope} implementation used by layout (auto/hug sizing) to
+ * measure text width before drawing — routes through the same paragraph
+ * layout path as rendering so the measured width matches the drawn width
+ * exactly, including letter-spacing and font-matching behavior.
+ */
+export class WebMeasureScope extends MeasureScope {
+    storageAdapter;
+    constructor(storageAdapter) {
+        super();
+        this.storageAdapter = storageAdapter;
+    }
+    measureText(text, fontSize, fontFamily, fontWeight = 400, letterSpacing = 0, fontStyle = 'normal') {
+        if (text.length === 0)
+            return 0;
+        const ck = this.storageAdapter.getCanvasKit();
+        const fontMgr = this.storageAdapter.getFontMgr();
+        // Measure through the same paragraph layout used to render, so hug/auto
+        // sizing matches the drawn width exactly (incl. letter spacing semantics).
+        const layout = layoutParagraph(ck, fontMgr, [{ text, fontFamily, fontSize, fontWeight, letterSpacing, fontStyle }], { align: 'center', lineHeight: 1, maxWidth: Infinity, originX: 0, originY: 0 });
+        const w = layout.width;
+        for (const f of layout.fonts)
+            f.delete();
+        return w;
+    }
+}
+//# sourceMappingURL=measure-scope.js.map

package/dist/measure-scope.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"measure-scope.js","sourceRoot":"","sources":["../src/measure-scope.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAE9D,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5D;;;;;GAKG;AACH,MAAM,OAAO,eAAgB,SAAQ,YAAY;IACrC,cAAc,CAAoB;IAE1C,YAAY,cAAiC;QACzC,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;IACzC,CAAC;IAED,WAAW,CAAC,IAAY,EAAE,QAAgB,EAAE,UAAkB,EAAE,aAAqB,GAAG,EAAE,gBAAwB,CAAC,EAAE,YAAuB,QAAQ;QAChJ,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,CAAC,CAAC;QAChC,MAAM,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC;QAC9C,MAAM,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;QACjD,wEAAwE;QACxE,2EAA2E;QAC3E,MAAM,MAAM,GAAG,eAAe,CAC1B,EAAE,EACF,OAAO,EACP,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,EACtE,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CACjF,CAAC;QACF,MAAM,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC;QACvB,KAAK,MAAM,CAAC,IAAI,MAAM,CAAC,KAAK;YAAE,CAAC,CAAC,MAAM,EAAE,CAAC;QACzC,OAAO,CAAC,CAAC;IACb,CAAC;CACJ"}