@motion-script/react 0.1.0

package/README.md

@@ -0,0 +1,67 @@
+# @motion-script/react
+
+React bindings for [Motion Script](https://motionscript.dev), drop a scene
+into your app and play it back with a `<canvas>`-based player backed by
+Skia/CanvasKit.
+
+```tsx
+import { MotionScriptProvider, MotionPlayer } from '@motion-script/react';
+import { MyScene } from './scenes/my-scene';
+
+export function App() {
+  return (
+    <MotionScriptProvider>
+      <MotionPlayer
+        initialFrame={0}
+        isPlaying
+        fps={30}
+        viewport={{ width: 1920, height: 1080 }}
+        scenes={[new MyScene()]}
+        assets={{}}
+      />
+    </MotionScriptProvider>
+  );
+}
+```
+
+## What's in here
+
+- **`MotionScriptProvider`** — initializes CanvasKit (the Skia/WASM runtime)
+  and makes it available to players via context. Wrap your app (or the part of
+  it that renders Motion Script content) in this once.
+- **`useMotionScript`** — hook for reading CanvasKit initialization state from
+  the provider.
+- **`MotionPlayer`** — renders a `Scene[]` to a `<canvas>`, drives playback
+  (play/pause/seek/speed/mute), and exposes an imperative `FrameHandle` (via
+  `ref`) for screenshotting, scrubbing, and inspecting build errors and node
+  state.
+
+This package builds on [`@motion-script/core`](../core) (the scene graph and
+animation runtime) and [`@motion-script/web`](../web) (the Skia/CanvasKit
+rendering backend).
+
+## Usage
+
+```bash
+npm install @motion-script/react
+```
+
+For a guided setup, scaffold a project instead with:
+
+```bash
+npm create motion-script@latest
+```
+
+See the [docs](https://motionscript.dev/docs) for the full feature set and API
+reference.
+
+## Development
+
+From the monorepo root:
+
+```bash
+pnpm --filter @motion-script/react build
+pnpm --filter @motion-script/react dev
+```
+
+See [CONTRIBUTING.md](../../CONTRIBUTING.md) for the architecture overview.

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { MotionScriptProvider, useMotionScript } from './ui/provider';
+export { MotionPlayer } from './ui/scene';
+export type { FrameHandle } from './ui/scene';
+export type { BuildError } from '@motion-script/core';
+//# 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":"AAKA,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9C,YAAY,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/jsx/jsx-dev-runtime.d.ts

@@ -0,0 +1,2 @@
+export { jsx, jsxDEV, Fragment } from '@motion-script/core/jsx/jsx-dev-runtime';
+//# sourceMappingURL=jsx-dev-runtime.d.ts.map

package/dist/jsx/jsx-dev-runtime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-dev-runtime.d.ts","sourceRoot":"","sources":["../../src/jsx/jsx-dev-runtime.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC"}

package/dist/jsx/jsx-dev-runtime.js

@@ -0,0 +1,2 @@
+import { Fragment, jsx, jsxDEV } from "@motion-script/core/jsx/jsx-dev-runtime";
+export { Fragment, jsx, jsxDEV };

package/dist/jsx/jsx-runtime.d.ts

@@ -0,0 +1,2 @@
+export { jsx, jsxs, Fragment } from '@motion-script/core/jsx/jsx-runtime';
+//# sourceMappingURL=jsx-runtime.d.ts.map

package/dist/jsx/jsx-runtime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-runtime.d.ts","sourceRoot":"","sources":["../../src/jsx/jsx-runtime.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC"}

package/dist/jsx/jsx-runtime.js

@@ -0,0 +1,2 @@
+import { Fragment, jsx, jsxs } from "@motion-script/core/jsx/jsx-runtime";
+export { Fragment, jsx, jsxs };

package/dist/motion-script-react.js

@@ -0,0 +1,178 @@
+import { createContext, useContext, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { WebAudioPlayer, WebMasterClock, WebMeasureScope, WebRenderContext, WebStorageAdapter, getCanvasKit } from "@motion-script/web";
+import { jsx } from "react/jsx-runtime";
+import { AssetCatalog, PlaybackController, Precomp, setTheme } from "@motion-script/core";
+//#region src/ui/provider.tsx
+var MotionScriptContext = createContext(null);
+/**
+* Loads CanvasKit once and shares it with descendants via context.
+*
+* Must wrap any tree that renders {@link MotionPlayer}, since the player
+* reads its CanvasKit instance from this provider through {@link useMotionScript}.
+*/
+function MotionScriptProvider({ wsmUrl, children }) {
+	const [canvasKit, setCanvasKit] = useState(null);
+	useEffect(() => {
+		let cancelled = false;
+		getCanvasKit(wsmUrl).then((ck) => {
+			if (!cancelled) setCanvasKit(ck);
+		}).catch(console.error);
+		return () => {
+			cancelled = true;
+		};
+	}, [wsmUrl]);
+	return /* @__PURE__ */ jsx(MotionScriptContext.Provider, {
+		value: {
+			canvasKit,
+			isInitialized: canvasKit !== null
+		},
+		children
+	});
+}
+/**
+* Reads the CanvasKit instance and readiness state from the nearest
+* {@link MotionScriptProvider}.
+*
+* @throws If called outside a {@link MotionScriptProvider}.
+*/
+function useMotionScript() {
+	const ctx = useContext(MotionScriptContext);
+	if (!ctx) throw new Error("useMotionScript must be used inside a MotionScriptProvider");
+	return ctx;
+}
+//#endregion
+//#region src/ui/scene.tsx
+/**
+* Renders a MotionScript scene graph to a canvas and drives playback.
+*
+* Must be rendered inside a {@link MotionScriptProvider}, which supplies the
+* shared CanvasKit instance this component depends on.
+*/
+function MotionPlayer({ ref, initialFrame, isPlaying, fps, viewport, scenes, assets, theme, speed = 1, muted = false, onLoadingChange, onFrameChange, onBuildErrors }) {
+	const canvasRef = useRef(null);
+	const { canvasKit, isInitialized } = useMotionScript();
+	const [controller, setController] = useState(null);
+	const controllerRef = useRef(null);
+	const onLoadingChangeRef = useRef(onLoadingChange);
+	const [, setC] = useState(0);
+	const initialFrameRef = useRef(initialFrame);
+	const onFrameChangeRef = useRef(onFrameChange);
+	const onBuildErrorsRef = useRef(onBuildErrors);
+	useEffect(() => {
+		onLoadingChangeRef.current = onLoadingChange;
+		initialFrameRef.current = initialFrame;
+		onFrameChangeRef.current = onFrameChange;
+		onBuildErrorsRef.current = onBuildErrors;
+	});
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		if (!canvas || !canvasKit) return;
+		setTheme(theme);
+		const catalog = new AssetCatalog(assets);
+		const storage = new WebStorageAdapter(canvasKit, catalog, viewport, fps);
+		const measure = new WebMeasureScope(storage);
+		const audio = new WebAudioPlayer();
+		const clock = new WebMasterClock({
+			context: audio.getContext(),
+			fps
+		});
+		const renderContext = new WebRenderContext(canvasKit, storage);
+		renderContext.mount(canvas);
+		const pc = new PlaybackController({
+			renderContext,
+			measureScope: measure,
+			storageAdapter: storage,
+			masterClock: clock,
+			precomposition: new Precomp(scenes, viewport, fps, catalog, measure),
+			audioDevice: audio,
+			assets: catalog,
+			fps,
+			viewport,
+			scenes
+		});
+		if (pc.buildErrors.length > 0) onBuildErrorsRef.current?.(pc.buildErrors);
+		pc.onTime((t) => {
+			onFrameChangeRef.current?.(Math.trunc(t * fps));
+			setC(t);
+		});
+		controllerRef.current = pc;
+		setController(pc);
+		onLoadingChangeRef.current?.(true);
+		return () => {
+			controllerRef.current = null;
+			setController(null);
+			pc.dispose();
+			renderContext.dispose();
+		};
+	}, [
+		canvasKit,
+		assets,
+		viewport,
+		fps,
+		scenes,
+		theme
+	]);
+	useEffect(() => {
+		if (!controller || isPlaying) return;
+		let cancelled = false;
+		onLoadingChangeRef.current?.(true);
+		controller.seek(initialFrame).then(() => {
+			if (cancelled) return;
+			onLoadingChangeRef.current?.(false);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		controller,
+		isPlaying,
+		initialFrame
+	]);
+	useEffect(() => {
+		if (!controller) return;
+		if (isPlaying) controller.play(speed);
+		else controller.pause();
+	}, [
+		controller,
+		isPlaying,
+		speed
+	]);
+	useEffect(() => {
+		controller?.setMuted(muted);
+	}, [controller, muted]);
+	useImperativeHandle(ref, () => ({
+		screenshot: async () => controllerRef.current?.screenshot() ?? void 0,
+		renderFrame: async (f) => {
+			const pc = controllerRef.current;
+			if (!pc) return;
+			await pc.seek(f);
+		},
+		seekWhilePlaying: (f) => controllerRef.current?.seekWhilePlaying(f),
+		getTreeState: () => controllerRef.current?.getTreeState() ?? null,
+		getNodeProps: (nodeId) => controllerRef.current?.getNodeState(nodeId) ?? null,
+		getDuration: () => controllerRef.current?.totalDuration ?? 0,
+		getSceneDurations: () => controllerRef.current?.tracks.slice() ?? [],
+		getBuildErrors: () => controllerRef.current?.buildErrors ?? []
+	}), []);
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			position: "relative",
+			width: "100%",
+			height: "100%"
+		},
+		children: /* @__PURE__ */ jsx("canvas", {
+			ref: canvasRef,
+			width: viewport.width,
+			height: viewport.height,
+			style: {
+				display: isInitialized && controller ? "block" : "none",
+				width: "100%",
+				height: "100%"
+			}
+		})
+	});
+}
+//#endregion
+export { MotionPlayer, MotionScriptProvider, useMotionScript };
+
+//# sourceMappingURL=motion-script-react.js.map

package/dist/motion-script-react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion-script-react.js","names":[],"sources":["../src/ui/provider.tsx","../src/ui/scene.tsx"],"sourcesContent":["import { createContext, useContext, useEffect, useState, type ReactNode } from \"react\";\r\nimport { getCanvasKit } from \"@motion-script/web\";\r\n\r\ntype CanvasKitInstance = Awaited<ReturnType<typeof getCanvasKit>>;\r\n\r\ntype MotionScriptContextValue = {\r\n    /** The loaded CanvasKit instance, or `null` until initialization completes. */\r\n    canvasKit: CanvasKitInstance | null;\r\n    /** Whether {@link CanvasKitInstance} has finished loading and is ready to use. */\r\n    isInitialized: boolean;\r\n};\r\n\r\nconst MotionScriptContext = createContext<MotionScriptContextValue | null>(null);\r\n\r\ntype Props = {\r\n    /** Optional URL to the CanvasKit `.wasm` binary, forwarded to `getCanvasKit`. */\r\n    wsmUrl?: string;\r\n    children: ReactNode;\r\n};\r\n\r\n/**\r\n * Loads CanvasKit once and shares it with descendants via context.\r\n *\r\n * Must wrap any tree that renders {@link MotionPlayer}, since the player\r\n * reads its CanvasKit instance from this provider through {@link useMotionScript}.\r\n */\r\nexport function MotionScriptProvider({ wsmUrl, children }: Props) {\r\n    const [canvasKit, setCanvasKit] = useState<CanvasKitInstance | null>(null);\r\n\r\n    useEffect(() => {\r\n        let cancelled = false;\r\n        getCanvasKit(wsmUrl)\r\n            .then((ck) => {\r\n                if (!cancelled) setCanvasKit(ck);\r\n            })\r\n            .catch(console.error);\r\n        return () => {\r\n            cancelled = true;\r\n        };\r\n    }, [wsmUrl]);\r\n\r\n    return (\r\n        <MotionScriptContext.Provider value={{ canvasKit, isInitialized: canvasKit !== null }}>\r\n            {children}\r\n        </MotionScriptContext.Provider>\r\n    );\r\n}\r\n\r\n/**\r\n * Reads the CanvasKit instance and readiness state from the nearest\r\n * {@link MotionScriptProvider}.\r\n *\r\n * @throws If called outside a {@link MotionScriptProvider}.\r\n */\r\nexport function useMotionScript(): MotionScriptContextValue {\r\n    const ctx = useContext(MotionScriptContext);\r\n    if (!ctx) {\r\n        throw new Error(\"useMotionScript must be used inside a MotionScriptProvider\");\r\n    }\r\n    return ctx;\r\n}\r\n","import { useEffect, useImperativeHandle, useRef, useState, type Ref } from \"react\";\n\nimport {\n    AssetCatalog,\n    PlaybackController,\n    setTheme,\n    type AssetManifest,\n    type BuildError,\n    type Color,\n    type Scene,\n    type NodeState,\n    type Size2D,\n    type TreeState,\n    Precomp,\n} from \"@motion-script/core\";\nimport {\n    WebAudioPlayer,\n    WebMasterClock,\n    WebMeasureScope,\n    WebRenderContext,\n    WebStorageAdapter,\n} from \"@motion-script/web\";\nimport { useMotionScript } from \"./provider\";\n\ntype Props = {\n    /** Imperative handle exposing playback and inspection methods; see {@link FrameHandle}. */\n    ref?: Ref<FrameHandle>;\n    /** Frame to seek to while paused. Ignored while `isPlaying` is true. */\n    initialFrame: number;\n    /** Whether the controller's clock should be running. */\n    isPlaying: boolean;\n    /** Frames per second used for playback, seeking, and time/frame conversion. */\n    fps: number;\n    /** Output canvas size in pixels. */\n    viewport: Size2D;\n    /** Scenes composed into a single timeline by an internal {@link Precomp}. */\n    scenes: Scene[];\n    /** Manifest describing the media assets referenced by `scenes`. */\n    assets: AssetManifest;\n    /** Theme color overrides applied globally before the player mounts. */\n    theme?: Record<string, Color>;\n    /** Playback rate multiplier passed to the controller. Defaults to `1`. */\n    speed?: number;\n    /** Whether audio output is muted. Defaults to `false`. */\n    muted?: boolean;\n    /** Called when the player starts/finishes loading (mount or seek). */\n    onLoadingChange?: (loading: boolean) => void;\n    /** Called on every clock tick with the current frame number. */\n    onFrameChange?: (frame: number) => void;\n    /** Called once on mount if the scene graph failed to build. */\n    onBuildErrors?: (errors: BuildError[]) => void;\n};\n\n/** Imperative API exposed by {@link MotionPlayer} via its `ref`. */\nexport interface FrameHandle {\n    /** Captures the current frame as a data URL, or `undefined` if not yet rendered. */\n    screenshot: () => Promise<string | undefined>;\n    /** Seeks to and renders a specific frame, resolving once the render completes. */\n    renderFrame: (frame: number) => Promise<void>;\n    /** Seeks to a frame without interrupting active playback. */\n    seekWhilePlaying: (frame: number) => void;\n    /** Returns the current state of a node by id, or `null` if not found. */\n    getNodeProps: (nodeId: string) => NodeState | null;\n    /** Returns a snapshot of the full scene tree state, or `null` before mount. */\n    getTreeState: () => TreeState | null;\n    /** Total duration of the composed timeline, in seconds. */\n    getDuration: () => number;\n    /** Duration of each individual scene, in seconds. */\n    getSceneDurations: () => number[];\n    /** Errors raised while building the scene graph, if any. */\n    getBuildErrors: () => BuildError[];\n}\n\n/**\n * Renders a MotionScript scene graph to a canvas and drives playback.\n *\n * Must be rendered inside a {@link MotionScriptProvider}, which supplies the\n * shared CanvasKit instance this component depends on.\n */\nexport function MotionPlayer({\n    ref,\n    initialFrame,\n    isPlaying,\n    fps,\n    viewport,\n    scenes,\n    assets,\n    theme,\n    speed = 1,\n    muted = false,\n    onLoadingChange,\n    onFrameChange,\n    onBuildErrors,\n}: Props) {\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n    const { canvasKit, isInitialized } = useMotionScript();\n\n    const [controller, setController] = useState<PlaybackController | null>(null);\n    const controllerRef = useRef<PlaybackController | null>(null);\n\n    const onLoadingChangeRef = useRef(onLoadingChange);\n    // Force a re-render on each time tick; the value itself is unused.\n    const [, setC] = useState(0);\n    const initialFrameRef = useRef(initialFrame);\n    const onFrameChangeRef = useRef(onFrameChange);\n    const onBuildErrorsRef = useRef(onBuildErrors);\n\n    // Keep callback/value refs current without touching them during render.\n    useEffect(() => {\n        onLoadingChangeRef.current = onLoadingChange;\n        initialFrameRef.current = initialFrame;\n        onFrameChangeRef.current = onFrameChange;\n        onBuildErrorsRef.current = onBuildErrors;\n    });\n\n    useEffect(() => {\n        const canvas = canvasRef.current;\n        if (!canvas || !canvasKit) return;\n        setTheme(theme);\n        const catalog = new AssetCatalog(assets);\n        const storage = new WebStorageAdapter(canvasKit, catalog, viewport, fps);\n        const measure = new WebMeasureScope(storage);\n        const audio = new WebAudioPlayer();\n        const clock = new WebMasterClock({ context: audio.getContext(), fps });\n        const renderContext = new WebRenderContext(canvasKit, storage);\n        renderContext.mount(canvas);\n\n        const pc: PlaybackController = new PlaybackController({\n            renderContext,\n            measureScope: measure,\n            storageAdapter: storage,\n            masterClock: clock,\n            precomposition: new Precomp(scenes, viewport, fps, catalog, measure),\n            audioDevice: audio,\n            assets: catalog,\n            fps,\n            viewport,\n            scenes,\n        });\n\n        if (pc.buildErrors.length > 0) {\n            onBuildErrorsRef.current?.(pc.buildErrors);\n        }\n\n        pc.onTime((t: number) => {\n            onFrameChangeRef.current?.(Math.trunc(t * fps));\n            setC(t);\n        });\n        controllerRef.current = pc;\n        setController(pc);\n\n        onLoadingChangeRef.current?.(true);\n\n        return () => {\n            controllerRef.current = null;\n            setController(null);\n            pc.dispose();\n            renderContext.dispose();\n        };\n    }, [canvasKit, assets, viewport, fps, scenes, theme]);\n\n    // Apply initialFrame changes while paused (scrubbing). When playing, the\n    // controller's own clock drives time, so we ignore prop-driven seeks.\n    useEffect(() => {\n        if (!controller || isPlaying) return;\n        let cancelled = false;\n        onLoadingChangeRef.current?.(true);\n        controller.seek(initialFrame).then(() => {\n            if (cancelled) return;\n            onLoadingChangeRef.current?.(false);\n        });\n        return () => {\n            cancelled = true;\n        };\n    }, [controller, isPlaying, initialFrame]);\n\n    useEffect(() => {\n        if (!controller) return;\n        if (isPlaying) {\n            controller.play(speed);\n        } else {\n            controller.pause();\n        }\n    }, [controller, isPlaying, speed]);\n\n    useEffect(() => {\n        controller?.setMuted(muted);\n    }, [controller, muted]);\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            screenshot: async () => controllerRef.current?.screenshot() ?? undefined,\n            renderFrame: async (f: number) => {\n                const pc = controllerRef.current;\n                if (!pc) return;\n                await pc.seek(f);\n            },\n            seekWhilePlaying: (f: number) => controllerRef.current?.seekWhilePlaying(f),\n            getTreeState: () => controllerRef.current?.getTreeState() ?? null,\n            getNodeProps: (nodeId: string) => controllerRef.current?.getNodeState(nodeId) ?? null,\n            getDuration: () => controllerRef.current?.totalDuration ?? 0,\n            getSceneDurations: () => controllerRef.current?.tracks.slice() ?? [],\n            getBuildErrors: () => controllerRef.current?.buildErrors ?? [],\n        }),\n        [],\n    );\n\n    return (\n        <div style={{ position: \"relative\", width: \"100%\", height: \"100%\" }}>\n            <canvas\n                ref={canvasRef}\n                width={viewport.width}\n                height={viewport.height}\n                style={{\n                    display: isInitialized && controller ? \"block\" : \"none\",\n                    width: \"100%\",\n                    height: \"100%\",\n                }}\n            />\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/ui/provider.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { getCanvasKit } from '@motion-script/web';
+type CanvasKitInstance = Awaited<ReturnType<typeof getCanvasKit>>;
+type MotionScriptContextValue = {
+    /** The loaded CanvasKit instance, or `null` until initialization completes. */
+    canvasKit: CanvasKitInstance | null;
+    /** Whether {@link CanvasKitInstance} has finished loading and is ready to use. */
+    isInitialized: boolean;
+};
+type Props = {
+    /** Optional URL to the CanvasKit `.wasm` binary, forwarded to `getCanvasKit`. */
+    wsmUrl?: string;
+    children: ReactNode;
+};
+/**
+ * Loads CanvasKit once and shares it with descendants via context.
+ *
+ * Must wrap any tree that renders {@link MotionPlayer}, since the player
+ * reads its CanvasKit instance from this provider through {@link useMotionScript}.
+ */
+export declare function MotionScriptProvider({ wsmUrl, children }: Props): import("react").JSX.Element;
+/**
+ * Reads the CanvasKit instance and readiness state from the nearest
+ * {@link MotionScriptProvider}.
+ *
+ * @throws If called outside a {@link MotionScriptProvider}.
+ */
+export declare function useMotionScript(): MotionScriptContextValue;
+export {};
+//# sourceMappingURL=provider.d.ts.map

package/dist/ui/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../src/ui/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvF,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,KAAK,iBAAiB,GAAG,OAAO,CAAC,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC;AAElE,KAAK,wBAAwB,GAAG;IAC5B,+EAA+E;IAC/E,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC,kFAAkF;IAClF,aAAa,EAAE,OAAO,CAAC;CAC1B,CAAC;AAIF,KAAK,KAAK,GAAG;IACT,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,KAAK,+BAoB/D;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,IAAI,wBAAwB,CAM1D"}

package/dist/ui/scene.d.ts

@@ -0,0 +1,58 @@
+import { Ref } from 'react';
+import { AssetManifest, BuildError, Color, Scene, NodeState, Size2D, TreeState } from '@motion-script/core';
+type Props = {
+    /** Imperative handle exposing playback and inspection methods; see {@link FrameHandle}. */
+    ref?: Ref<FrameHandle>;
+    /** Frame to seek to while paused. Ignored while `isPlaying` is true. */
+    initialFrame: number;
+    /** Whether the controller's clock should be running. */
+    isPlaying: boolean;
+    /** Frames per second used for playback, seeking, and time/frame conversion. */
+    fps: number;
+    /** Output canvas size in pixels. */
+    viewport: Size2D;
+    /** Scenes composed into a single timeline by an internal {@link Precomp}. */
+    scenes: Scene[];
+    /** Manifest describing the media assets referenced by `scenes`. */
+    assets: AssetManifest;
+    /** Theme color overrides applied globally before the player mounts. */
+    theme?: Record<string, Color>;
+    /** Playback rate multiplier passed to the controller. Defaults to `1`. */
+    speed?: number;
+    /** Whether audio output is muted. Defaults to `false`. */
+    muted?: boolean;
+    /** Called when the player starts/finishes loading (mount or seek). */
+    onLoadingChange?: (loading: boolean) => void;
+    /** Called on every clock tick with the current frame number. */
+    onFrameChange?: (frame: number) => void;
+    /** Called once on mount if the scene graph failed to build. */
+    onBuildErrors?: (errors: BuildError[]) => void;
+};
+/** Imperative API exposed by {@link MotionPlayer} via its `ref`. */
+export interface FrameHandle {
+    /** Captures the current frame as a data URL, or `undefined` if not yet rendered. */
+    screenshot: () => Promise<string | undefined>;
+    /** Seeks to and renders a specific frame, resolving once the render completes. */
+    renderFrame: (frame: number) => Promise<void>;
+    /** Seeks to a frame without interrupting active playback. */
+    seekWhilePlaying: (frame: number) => void;
+    /** Returns the current state of a node by id, or `null` if not found. */
+    getNodeProps: (nodeId: string) => NodeState | null;
+    /** Returns a snapshot of the full scene tree state, or `null` before mount. */
+    getTreeState: () => TreeState | null;
+    /** Total duration of the composed timeline, in seconds. */
+    getDuration: () => number;
+    /** Duration of each individual scene, in seconds. */
+    getSceneDurations: () => number[];
+    /** Errors raised while building the scene graph, if any. */
+    getBuildErrors: () => BuildError[];
+}
+/**
+ * Renders a MotionScript scene graph to a canvas and drives playback.
+ *
+ * Must be rendered inside a {@link MotionScriptProvider}, which supplies the
+ * shared CanvasKit instance this component depends on.
+ */
+export declare function MotionPlayer({ ref, initialFrame, isPlaying, fps, viewport, scenes, assets, theme, speed, muted, onLoadingChange, onFrameChange, onBuildErrors, }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=scene.d.ts.map

package/dist/ui/scene.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scene.d.ts","sourceRoot":"","sources":["../../src/ui/scene.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoD,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,EAIH,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,KAAK,EACV,KAAK,KAAK,EACV,KAAK,SAAS,EACd,KAAK,MAAM,EACX,KAAK,SAAS,EAEjB,MAAM,qBAAqB,CAAC;AAU7B,KAAK,KAAK,GAAG;IACT,2FAA2F;IAC3F,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB,wEAAwE;IACxE,YAAY,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,SAAS,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,GAAG,EAAE,MAAM,CAAC;IACZ,oCAAoC;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,6EAA6E;IAC7E,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,mEAAmE;IACnE,MAAM,EAAE,aAAa,CAAC;IACtB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC9B,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,sEAAsE;IACtE,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,gEAAgE;IAChE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,+DAA+D;IAC/D,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,oEAAoE;AACpE,MAAM,WAAW,WAAW;IACxB,oFAAoF;IACpF,UAAU,EAAE,MAAM,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC9C,kFAAkF;IAClF,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9C,6DAA6D;IAC7D,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,yEAAyE;IACzE,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,SAAS,GAAG,IAAI,CAAC;IACnD,+EAA+E;IAC/E,YAAY,EAAE,MAAM,SAAS,GAAG,IAAI,CAAC;IACrC,2DAA2D;IAC3D,WAAW,EAAE,MAAM,MAAM,CAAC;IAC1B,qDAAqD;IACrD,iBAAiB,EAAE,MAAM,MAAM,EAAE,CAAC;IAClC,4DAA4D;IAC5D,cAAc,EAAE,MAAM,UAAU,EAAE,CAAC;CACtC;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EACzB,GAAG,EACH,YAAY,EACZ,SAAS,EACT,GAAG,EACH,QAAQ,EACR,MAAM,EACN,MAAM,EACN,KAAK,EACL,KAAS,EACT,KAAa,EACb,eAAe,EACf,aAAa,EACb,aAAa,GAChB,EAAE,KAAK,+BAiIP"}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@motion-script/react",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "React bindings for Motion Script.",
+  "license": "Apache-2.0",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "predev": "node ../../scripts/copy-wasm.js",
+    "build": "eslint . && tsc -b && vite build",
+    "lint": "eslint .",
+    "typecheck": "tsc -b",
+    "clean": "rimraf --glob dist .turbo *.tsbuildinfo && tsc -b --clean",
+    "preview": "vite preview"
+  },
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/motion-script-react.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/motion-script-react.js"
+    },
+    "./jsx/jsx-runtime": {
+      "types": "./dist/jsx/jsx-runtime.d.ts",
+      "import": "./dist/jsx/jsx-runtime.js"
+    },
+    "./jsx/jsx-dev-runtime": {
+      "types": "./dist/jsx/jsx-dev-runtime.d.ts",
+      "import": "./dist/jsx/jsx-dev-runtime.js"
+    }
+  },
+  "peerDependencies": {
+    "react": "catalog:",
+    "react-dom": "catalog:"
+  },
+  "dependencies": {
+    "@motion-script/core": "workspace:*",
+    "@motion-script/web": "workspace:*"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@vitejs/plugin-react": "catalog:",
+    "@motion-script/canvaskit": "workspace:*",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "typescript": "catalog:",
+    "typescript-eslint": "^8.48.0",
+    "vite": "catalog:",
+    "vite-plugin-dts": "catalog:"
+  }
+}