@effect-motion/react 0.2.0 → 0.3.0

package/dist/Player.d.ts

@@ -1,11 +1,14 @@
-import { type AnyScene, type UsePlayerOptions } from "./usePlayer";
-export interface PlayerProps extends UsePlayerOptions {
-    readonly scene: AnyScene;
-}
-/**
- * A scene player: metadata-sized SVG viewport and a transport bar with
- * play/pause, a scrubber clamped to the buffered range, a time readout,
- * and a loop toggle. Focus the player for keyboard control: Space toggles
- * playback, arrow keys step one frame.
- */
-export declare const Player: ({ scene, ...options }: PlayerProps) => import("react").JSX.Element;
+import type * as Scope from "effect/Scope";
+import type * as Runner from "effect-motion/Runner";
+import * as Scene from "effect-motion/Scene";
+export type PlayerProps = {
+    prebufferedFrames?: number;
+    autoPlay?: boolean;
+    fps?: number;
+    isInfinite?: boolean;
+    defaultRepeatMode?: boolean;
+    bufferCapacity?: number;
+    settings?: Partial<Runner.Settings>;
+    scene: Scene.Scene<never, Runner.Runner | Scope.Scope>;
+};
+export declare const Player: ({ scene, fps: fpsProp, prebufferedFrames, autoPlay, isInfinite, defaultRepeatMode, bufferCapacity, settings, }: PlayerProps) => import("react").JSX.Element;

package/dist/Player.js

@@ -1,136 +1,566 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Engine from "@effect-motion/thorvg/Engine";
+import * as Session from "@effect-motion/thorvg/Session";
+import { Cause, Context, Data, Effect, ManagedRuntime, Schedule, Semaphore, } from "effect";
+import * as Layer from "effect/Layer";
+import * as CanvasExporter from "effect-motion/CanvasExporter";
+import * as Fonts from "effect-motion/Fonts";
+import * as Images from "effect-motion/Images";
+import * as Renderer from "effect-motion/Renderer";
+import * as Scene from "effect-motion/Scene";
+import * as Time from "effect-motion/Time";
+import { useEffect, useEffectEvent, useRef, useState, } from "react";
+const thorLayer = Engine.browserLayer("https://unpkg.com/@thorvg/webcanvas@1.0.8/dist/thorvg.wasm");
+class PlayerError extends Data.TaggedError("PlayerError") {
+    static of(message) {
+        return (cause) => new PlayerError({ message, cause });
+    }
+}
 /**
- * biome-ignore-all lint/a11y/noNoninteractiveTabindex: the player root is a
- * deliberate focus target for transport shortcuts (space/arrows), like the
- * native <video> element
- * biome-ignore-all lint/a11y/noStaticElementInteractions: keyboard transport
- * is scoped to the focused player root
+ * Softened device-pixel-ratio, thorvg.web's formula: interpolate 75% of the
+ * way from 1 to the native dpr — visually indistinguishable from full dpr at
+ * a fraction of the rasterized pixels. Read per render call so moving the
+ * window across monitors picks up the new ratio.
  */
-import { Layer } from "effect";
-import * as Effect from "effect/Effect";
-import { Svg } from "effect-motion";
-import { useEffect, useRef } from "react";
-import { usePlayer, } from "./usePlayer";
-const layers = Svg.layer.pipe(Layer.provideMerge(Svg.shapesLayer));
-// everything in the SVG DOM sink and its entity renderers is synchronous
-const renderFrame = (frame, target) => Effect.runSync(Effect.gen(function* () {
-    const renderer = yield* Svg.SvgDomRenderer.Context;
-    // no size in the config: the sink falls back to frame metadata
-    yield* renderer.render(frame, { target });
-}).pipe(Effect.provide(layers)));
-const iconProps = {
-    width: 14,
-    height: 14,
-    viewBox: "0 0 16 16",
-    fill: "currentColor",
-};
-// icons are decorative: the owning buttons carry the accessible labels
-const PlayIcon = () => (_jsx("svg", { ...iconProps, "aria-hidden": "true", children: _jsx("path", { d: "M4.5 2.5v11l9-5.5z" }) }));
-const PauseIcon = () => (_jsx("svg", { ...iconProps, "aria-hidden": "true", children: _jsx("path", { d: "M4 2.5h3v11H4zM9 2.5h3v11H9z" }) }));
-const LoopIcon = () => (_jsx("svg", { ...iconProps, "aria-hidden": "true", children: _jsx("path", { d: "M4 5h6V3l3.5 3L10 9V7H5v3H3V6a1 1 0 0 1 1-1zM12 11H6v2l-3.5-3L6 7v2h5V6h2v4a1 1 0 0 1-1 1z" }) }));
-const buttonStyle = (active) => ({
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 28,
-    height: 28,
-    padding: 0,
-    border: "none",
-    borderRadius: 6,
-    background: "transparent",
-    color: active ? "#8b9cff" : "#d6d6de",
-    cursor: "pointer",
-});
-const formatTime = (frames, frameRate) => {
-    const seconds = Math.floor(frames / frameRate);
-    return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`;
-};
+const calculateDpr = () => typeof window === "undefined" ? 1 : 1 + (window.devicePixelRatio - 1) * 0.75;
+// const layer = Layer.con
+// const runtime = ManagedRuntime.make()
+const PlayerScene = Context.Service("PlayerScene");
 /**
- * A scene player: metadata-sized SVG viewport and a transport bar with
- * play/pause, a scrubber clamped to the buffered range, a time readout,
- * and a loop toggle. Focus the player for keyboard control: Space toggles
- * playback, arrow keys step one frame.
+ * Frame-data buffer keyed by absolute frame index, retaining at most
+ * `capacity` of the most-recently-pulled frames. Frames are pulled from the
+ * scene monotonically forward (never re-derivable at a random index — the
+ * scene is a forward-only stream), so the ring drops the oldest frames once
+ * the window is full. A finite scene that fits within `capacity` behaves like
+ * a plain array (nothing is ever evicted). Seeking below the retained window
+ * clamps to `oldest` — the earliest frame still in memory.
  */
-export const Player = ({ scene, ...options }) => {
-    const player = usePlayer(scene, options);
-    const viewportRef = useRef(null);
-    // scene resolution: frame metadata once available, else explicit props
-    const sceneWidth = player.currentFrame?.width ?? options.width;
-    const sceneHeight = player.currentFrame?.height ?? options.height;
-    useEffect(() => {
-        const target = viewportRef.current;
-        if (target === null || player.currentFrame === null) {
-            return;
+class FrameRing {
+    capacity;
+    // ponytail: fixed-capacity ring keyed by absolute index. capacity=Infinity
+    // keeps everything (finite scenes that fit); a finite cap bounds memory for
+    // long/infinite scenes at the cost of losing far-back seek. Bump the cap if
+    // deep backward seeking on huge scenes ever matters.
+    slots;
+    /** total frames pulled from the scene so far (monotonic) */
+    pulled = 0;
+    constructor(capacity) {
+        this.capacity = capacity;
+        this.slots = Number.isFinite(capacity) ? new Array(capacity) : [];
+    }
+    /** oldest absolute index still retained */
+    get oldest() {
+        return Number.isFinite(this.capacity)
+            ? Math.max(0, this.pulled - this.capacity)
+            : 0;
+    }
+    has(index) {
+        return index >= this.oldest && index < this.pulled;
+    }
+    get(index) {
+        if (!this.has(index)) {
+            return undefined;
         }
-        renderFrame(player.currentFrame, target);
-        // ponytail: post-process the sink's root for responsive scaling —
-        // viewBox + CSS size lets the fixed-pixel SVG fill the viewport box;
-        // move viewBox into the sink if another consumer needs scaling
-        const svg = target.querySelector("svg");
-        if (svg !== null) {
-            svg.setAttribute("viewBox", `0 0 ${player.currentFrame.width} ${player.currentFrame.height}`);
-            svg.style.width = "100%";
-            svg.style.height = "100%";
-            svg.style.display = "block";
+        return Number.isFinite(this.capacity)
+            ? this.slots[index % this.capacity]
+            : this.slots[index];
+    }
+    /** append the next frame at the edge, evicting the oldest if full */
+    push(frame) {
+        if (Number.isFinite(this.capacity)) {
+            this.slots[this.pulled % this.capacity] = frame;
         }
-    }, [player.currentFrame]);
-    const handleKeyDown = (event) => {
-        // buttons and the scrubber already handle these keys natively
-        const tag = event.target.tagName;
-        if (tag === "BUTTON" || tag === "INPUT") {
-            return;
+        else {
+            this.slots[this.pulled] = frame;
         }
-        if (event.key === " ") {
-            event.preventDefault();
-            player.toggle();
+        this.pulled++;
+    }
+}
+const useScene = (scene, options) => {
+    // loop is read live from optsRef inside the play loop, not destructured here
+    const { fps, prebufferedFrames, autoPlay, isInfinite, settings } = options;
+    const canvasRef = useRef(null);
+    const [currentFrame, setCurrentFrame] = useState(0);
+    const [bufferedFrames, setBufferedFrames] = useState(0);
+    // null until the scene stream ends (never, for infinite scenes)
+    const [totalFrames, setTotalFrames] = useState(null);
+    const [isPlaying, setIsPlaying] = useState(false);
+    // repeat mode is player state seeded from the prop (an initial value); the
+    // user toggles it live via the repeat button
+    const [loop, setLoop] = useState(options.loop);
+    // latest option values (incl. live loop), read inside the long-lived Effect
+    // service without re-creating the runtime (which would re-run the scene)
+    const optsRef = useRef({ ...options, loop });
+    optsRef.current = { ...options, loop };
+    // One runtime per mount, DISPOSED on unmount: disposal closes the session
+    // (canvas deleted, fonts released — refcounted, so siblings keep theirs)
+    // and releases the engine (a browser no-op: the wasm module is a page
+    // singleton, design D2; two players share one module via the idempotent
+    // acquire). Held in a ref, not state, so a strict-mode remount can
+    // recreate it after the first cleanup disposed it.
+    const makeRuntime = () => ManagedRuntime.make(Layer.effectContext(Effect.gen(function* () {
+        const runningScene = yield* Scene.run(scene, {
+            ...settings,
+            frameRate: fps,
+        });
+        let currentFrame = 0;
+        let isPlaying = false;
+        // total frame count once the stream ends; null while unknown
+        let totalFramesValue = null;
+        const setTotal = (n) => {
+            totalFramesValue = n;
+            setTotalFrames(n);
+        };
+        const updateCurrentFrame = (frameIndex) => {
+            currentFrame = frameIndex;
+            setCurrentFrame(frameIndex);
+        };
+        const updateIsPlaying = (newIsPlaying) => {
+            isPlaying = newIsPlaying;
+            setIsPlaying(isPlaying);
+        };
+        const ring = new FrameRing(options.bufferCapacity);
+        const loadFrameBuffer = (requested = ring.pulled) => Effect.gen(function* () {
+            // clamp a seek that fell off the back of the ring to the
+            // oldest retained frame (can't replay a forward-only stream)
+            const index = Math.max(requested, ring.oldest);
+            const existing = ring.get(index);
+            if (existing) {
+                return { frame: existing, index };
+            }
+            if (runningScene.done && index >= ring.pulled) {
+                // finite scene fully buffered — publish the total once
+                setTotal(ring.pulled);
+                return null;
+            }
+            // pull forward until the requested index is at the edge
+            while (true) {
+                const frame = yield* Scene.step(runningScene);
+                if (!frame) {
+                    // stream ended: this is the total frame count
+                    setTotal(ring.pulled);
+                    break;
+                }
+                ring.push(frame);
+                setBufferedFrames(ring.pulled);
+                if (index <= ring.pulled - 1) {
+                    break;
+                }
+            }
+            const edge = Math.min(index, ring.pulled - 1);
+            return {
+                frame: ring.get(edge),
+                index: edge,
+            };
+        }).pipe(Effect.mapError(PlayerError.of("Error getting frame buffer")));
+        const renderSemaphore = yield* Semaphore.make(1);
+        const render = (frameIndex) => renderSemaphore.withPermitsIfAvailable(1)(Effect.gen(function* () {
+            if (!canvasRef.current) {
+                return;
+            }
+            const framebuffer = yield* loadFrameBuffer(frameIndex);
+            if (!framebuffer) {
+                return;
+            }
+            // use the resolved index, not the requested one: a seek/advance
+            // past the buffered edge resolves to the edge (clamped in
+            // loadFrameBuffer), and the playhead must reflect what's shown
+            updateCurrentFrame(framebuffer.index);
+            const renderBuffer = yield* Renderer.render(framebuffer.frame, {
+                dpr: calculateDpr(),
+            });
+            yield* CanvasExporter.toCanvas(renderBuffer, canvasRef.current);
+        }).pipe(Effect.mapError(PlayerError.of("Error exporting canvas"))));
+        const play = Effect.suspend(() => {
+            if (isPlaying)
+                return Effect.void;
+            // replaying from the end of a finished finite scene: rewind
+            const total = totalFramesValue;
+            if (total !== null && currentFrame >= total - 1) {
+                updateCurrentFrame(0);
+            }
+            isPlaying = true;
+            updateIsPlaying(true);
+            // Real-time playback clock. Each tick advances by however many
+            // whole frames of wall-clock have elapsed since the last tick
+            // (accumulator), so playback keeps real time even when a render
+            // is slow — intermediate frames are dropped, only the latest is
+            // rendered. The driver ticks a bit faster than the frame period
+            // so we never systematically miss a frame boundary; the
+            // accumulator decides whether a frame is actually due.
+            const frameMs = 1000 / fps;
+            let lastTick = null;
+            let acc = 0;
+            const tick = Effect.gen(function* () {
+                // wall-clock is intentional here: it drives real playback
+                // speed — not scene time, so the determinism rule that bans
+                // wall-clock in scenes doesn't apply.
+                const now = performance.now();
+                if (lastTick === null) {
+                    lastTick = now;
+                    return;
+                }
+                const elapsed = now - lastTick;
+                lastTick = now;
+                acc += elapsed;
+                const advance = Math.floor(acc / frameMs);
+                if (advance <= 0) {
+                    return;
+                }
+                acc -= advance * frameMs;
+                let next = currentFrame + advance;
+                const total = totalFramesValue;
+                if (total !== null && next > total - 1) {
+                    // past the end of a finite scene: wrap when looping,
+                    // else clamp to the last frame (a big `advance` from a
+                    // slow tick must not overshoot into the unbuffered void,
+                    // which would render nothing and wedge the playhead)
+                    next =
+                        optsRef.current.loop && !optsRef.current.isInfinite
+                            ? next % total
+                            : total - 1;
+                }
+                yield* render(next);
+            });
+            // small fixed spacing (quarter-frame) so the accumulator sees
+            // each frame boundary; the tick itself no-ops until a frame is due
+            const loop = Effect.repeat({
+                schedule: Schedule.spaced(Math.max(1, frameMs / 4)),
+                // keep playing until we reach the last buffered frame of a
+                // finished scene — unless looping (then wrap forever). A scene
+                // that is `done` but not yet at its last frame must keep going.
+                while: () => {
+                    if (!isPlaying)
+                        return false;
+                    const total = totalFramesValue;
+                    if (total === null)
+                        return true; // still buffering
+                    if (optsRef.current.loop && !optsRef.current.isInfinite) {
+                        return true;
+                    }
+                    return currentFrame < total - 1;
+                },
+            });
+            return loop(tick).pipe(Effect.ensuring(Effect.sync(() => updateIsPlaying(false))));
+        });
+        const pause = Effect.sync(() => {
+            isPlaying = false;
+            updateIsPlaying(false);
+        });
+        return Context.make(PlayerScene, {
+            play,
+            pause,
+            frameIndex: Effect.sync(() => currentFrame),
+            render,
+            load: (frameIndex) => loadFrameBuffer(frameIndex),
+        });
+    })).pipe(
+    // per-mount session: the canvas (sized by the render path) plus the
+    // scene's declared fonts and images, held until the runtime is
+    // disposed. Session.make awaits font/image settlement, so nothing
+    // renders (and the player can't report ready) before assets settle.
+    Layer.provideMerge(Session.layer({
+        width: 1,
+        height: 1,
+        fonts: Fonts.urlMap(scene),
+        images: Images.urlMap(scene),
+    })), Layer.provideMerge(thorLayer)));
+    const runtimeRef = useRef(null);
+    const getRuntime = () => {
+        if (runtimeRef.current === null) {
+            runtimeRef.current = makeRuntime();
         }
-        else if (event.key === "ArrowRight") {
-            event.preventDefault();
-            player.pause();
-            player.seek(player.frame + 1);
+        return runtimeRef.current;
+    };
+    useEffect(() => () => {
+        // dispose interrupts our own in-flight fibers (play loop, prebuffer);
+        // its promise then rejects with that interruption — expected teardown,
+        // never actionable from a cleanup callback
+        runtimeRef.current?.dispose().catch(() => undefined);
+        runtimeRef.current = null;
+    }, []);
+    // Disposing the runtime on unmount INTERRUPTS in-flight fibers (the play
+    // loop, prebuffering). These handlers are fire-and-forget, so a rejecting
+    // runPromise would surface as an unhandled rejection on every navigation
+    // away from a playing scene. runPromiseExit never rejects — failures come
+    // back as Exit values. Two teardown shapes are silenced: interruption-only
+    // causes (dispose cancelling our own fibers — under strict mode this
+    // happens on EVERY mount, whose first-generation runtime is disposed with
+    // render/prebuffer still in flight), and failures from a runtime that is
+    // no longer current (a stale generation's teardown noise). Everything else
+    // is a real player error and is reported.
+    const runReported = (effect) => {
+        const runtime = getRuntime();
+        return runtime.runPromiseExit(effect).then((exit) => {
+            if (exit._tag !== "Failure") {
+                return;
+            }
+            if (Cause.hasInterruptsOnly(exit.cause)) {
+                return;
+            }
+            if (runtimeRef.current !== runtime) {
+                return;
+            }
+            console.error("effect-motion player:", String(exit.cause), exit.cause);
+        });
+    };
+    const render = useEffectEvent((frameIndex) => runReported(Effect.service(PlayerScene).pipe(Effect.flatMap((e) => e.render(frameIndex)), Effect.scoped)));
+    const load = useEffectEvent((frameIndex) => runReported(Effect.service(PlayerScene).pipe(Effect.flatMap((e) => e.load(frameIndex)), Effect.scoped)));
+    const play = useEffectEvent(() => runReported(Effect.service(PlayerScene).pipe(Effect.flatMap((e) => e.play), Effect.scoped)));
+    const pause = useEffectEvent(() => runReported(Effect.service(PlayerScene).pipe(Effect.flatMap((e) => e.pause), Effect.scoped)));
+    // prebuffer + autoplay once the runtime exists. For an infinite scene we
+    // can't buffer to the end, so cap at the requested prebuffer count.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: run once on mount; render/load/play are stable useEffectEvents and the options only matter at startup
+    useEffect(() => {
+        render(0);
+        load(isInfinite ? prebufferedFrames : Math.max(prebufferedFrames, 0));
+        if (autoPlay) {
+            play();
         }
-        else if (event.key === "ArrowLeft") {
-            event.preventDefault();
-            player.pause();
-            player.seek(player.frame - 1);
+    }, []);
+    // scene time in seconds of the current frame, and total when known
+    const currentTime = Time.frameToMillis(currentFrame, fps) / 1000;
+    const totalTime = totalFrames !== null
+        ? Time.frameToMillis(totalFrames - 1, fps) / 1000
+        : null;
+    return {
+        ref: canvasRef,
+        currentFrame,
+        bufferedFrames,
+        totalFrames,
+        currentTime,
+        totalTime,
+        play,
+        pause,
+        seek: render,
+        isPlaying,
+        loop,
+        setLoop,
+        load,
+    };
+};
+// keep-everything cap for an infinite scene: enough for ~30s of backward seek
+// at 60fps, ~1MB of frame data. Bump via bufferCapacity for deeper scrubbing.
+const INFINITE_BUFFER_CAP = 1800;
+export const Player = ({ scene, fps: fpsProp = 60, 
+// default: prebuffer everything (Infinity) so the total time / progress bar
+// are known up front; an infinite scene falls back to a finite window below.
+prebufferedFrames = Number.POSITIVE_INFINITY, autoPlay = false, isInfinite = false, 
+// initial repeat mode; the player owns it after mount (toggle button)
+defaultRepeatMode = false, bufferCapacity, settings, }) => {
+    // one effective rate for both the scene run and the playback clock
+    const fps = settings?.frameRate ?? fpsProp;
+    const { ref, currentFrame, bufferedFrames, totalFrames, currentTime, totalTime, play, pause, seek, isPlaying, loop, setLoop, } = useScene(scene, {
+        fps,
+        settings,
+        // an infinite scene can never buffer to the end — window it (60 frames
+        // if the caller left prebufferedFrames unbounded)
+        prebufferedFrames: isInfinite && !Number.isFinite(prebufferedFrames)
+            ? 60
+            : prebufferedFrames,
+        autoPlay,
+        isInfinite,
+        loop: defaultRepeatMode,
+        // finite scenes keep everything (so far-back seek works); infinite
+        // scenes are windowed so memory can't grow forever
+        bufferCapacity: bufferCapacity ??
+            (isInfinite ? INFINITE_BUFFER_CAP : Number.POSITIVE_INFINITY),
+    });
+    // progress denominator: the total when known, else the buffered edge
+    const denominator = (totalFrames ?? bufferedFrames) - 1;
+    // ---- chrome state (hover/scrub only — playback state lives in useScene) ----
+    const [hovering, setHovering] = useState(false);
+    const [scrubbing, setScrubbing] = useState(false);
+    const [barHover, setBarHover] = useState(false);
+    const [bigPlayHover, setBigPlayHover] = useState(false);
+    // frame under the cursor while hovering the scrubber (for the time chip)
+    const [hoverFrame, setHoverFrame] = useState(0);
+    const barRef = useRef(null);
+    const controlsVisible = hovering || scrubbing || !isPlaying;
+    const frameAtPointer = (clientX) => {
+        const bar = barRef.current;
+        if (!bar || denominator <= 0) {
+            return 0;
         }
+        const rect = bar.getBoundingClientRect();
+        const frac = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+        return Math.round(frac * denominator);
     };
-    return (_jsxs("div", { tabIndex: 0, onKeyDown: handleKeyDown, style: {
-            display: "flex",
-            flexDirection: "column",
-            // fill the container like a video element; the aspect ratio
-            // below keeps the scene's proportions at any width
-            width: "100%",
-            background: "#101014",
-            borderRadius: 10,
-            overflow: "hidden",
-        }, children: [_jsxs("div", { style: {
-                    position: "relative",
-                    width: "100%",
-                    aspectRatio: sceneWidth !== undefined && sceneHeight !== undefined
-                        ? `${sceneWidth} / ${sceneHeight}`
-                        : undefined,
-                    minHeight: sceneHeight === undefined ? 120 : undefined,
-                }, children: [_jsx("div", { ref: viewportRef, style: { width: "100%", height: "100%" } }), player.status === "loading" ? (_jsx("div", { style: {
-                            position: "absolute",
-                            inset: 0,
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            color: "#6b6b76",
-                            fontSize: 13,
-                        }, children: "Loading\u2026" })) : null] }), _jsxs("div", { style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 8,
-                    padding: "6px 10px",
-                    background: "#1a1a20",
-                }, children: [_jsx("button", { type: "button", onClick: player.toggle, disabled: player.status !== "ready", "aria-label": player.playing ? "Pause" : "Play", style: buttonStyle(false), children: player.playing ? _jsx(PauseIcon, {}) : _jsx(PlayIcon, {}) }), _jsx("input", { type: "range", "aria-label": "Progress", min: 0, max: Math.max(0, (player.totalFrames ?? player.bufferedFrames) - 1), step: 1, value: player.frame, onChange: (event) => player.seek(Number(event.currentTarget.value)), disabled: player.status !== "ready", style: { flex: 1, accentColor: "#8b9cff", margin: 0 } }), _jsx("span", { style: {
-                            color: "#b9b9c3",
-                            fontSize: 12,
-                            fontVariantNumeric: "tabular-nums",
-                            whiteSpace: "nowrap",
-                        }, children: player.totalFrames !== null
-                            ? `${formatTime(player.frame, player.frameRate)} / ${formatTime(player.totalFrames, player.frameRate)}`
-                            : formatTime(player.frame, player.frameRate) }), _jsx("button", { type: "button", onClick: () => player.setLoop(!player.loop), "aria-label": "Loop", "aria-pressed": player.loop, style: buttonStyle(player.loop), children: _jsx(LoopIcon, {}) })] }), player.status === "error" ? (_jsxs("div", { role: "alert", style: { color: "#ff8a8a", padding: "6px 10px" }, children: ["Scene failed: ", String(player.error)] })) : null] }));
+    const playedFrac = denominator > 0 ? currentFrame / denominator : 0;
+    const bufferedFrac = denominator > 0 ? Math.min(1, (bufferedFrames - 1) / denominator) : 0;
+    // the chip tracks the cursor while hovering, the playhead while dragging
+    const chipFrame = scrubbing ? currentFrame : hoverFrame;
+    const chipFrac = denominator > 0 ? chipFrame / denominator : 0;
+    const barActive = barHover || scrubbing;
+    return (_jsxs("div", { style: S.player, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false), children: [_jsx("canvas", { ref: ref, style: S.canvas, onClick: () => (isPlaying ? pause() : play()) }), !isPlaying && (_jsx("button", { type: "button", "aria-label": "Play", style: {
+                    ...S.bigPlay,
+                    background: bigPlayHover ? ACCENT : "rgba(0, 0, 0, 0.65)",
+                }, onMouseEnter: () => setBigPlayHover(true), onMouseLeave: () => setBigPlayHover(false), onClick: () => play(), children: _jsx(PlayIcon, { size: 26 }) })), _jsx("div", { style: { ...S.gradient, opacity: controlsVisible ? 1 : 0 } }), _jsxs("div", { style: {
+                    ...S.controls,
+                    opacity: controlsVisible ? 1 : 0,
+                    pointerEvents: controlsVisible ? "auto" : "none",
+                }, children: [_jsx("button", { type: "button", "aria-label": isPlaying ? "Pause" : "Play", style: S.iconButton, onClick: () => (isPlaying ? pause() : play()), children: isPlaying ? _jsx(PauseIcon, {}) : _jsx(PlayIcon, {}) }), !isInfinite && (_jsxs("div", { ref: barRef, role: "slider", "aria-label": "Seek", "aria-valuemin": 0, "aria-valuemax": Math.max(0, denominator), "aria-valuenow": currentFrame, tabIndex: 0, style: S.scrub, onPointerDown: (e) => {
+                            e.currentTarget.setPointerCapture(e.pointerId);
+                            setScrubbing(true);
+                            seek(frameAtPointer(e.clientX));
+                        }, onPointerMove: (e) => {
+                            setHoverFrame(frameAtPointer(e.clientX));
+                            if (scrubbing) {
+                                seek(frameAtPointer(e.clientX));
+                            }
+                        }, onPointerUp: () => setScrubbing(false), onMouseEnter: () => setBarHover(true), onMouseLeave: () => setBarHover(false), onKeyDown: (e) => {
+                            // arrow keys step one second of frames
+                            if (e.key === "ArrowRight") {
+                                seek(Math.min(denominator, currentFrame + fps));
+                            }
+                            else if (e.key === "ArrowLeft") {
+                                seek(Math.max(0, currentFrame - fps));
+                            }
+                        }, children: [_jsxs("div", { style: { ...S.track, height: barActive ? 6 : 4 }, children: [_jsx("div", { style: {
+                                            ...S.trackFill,
+                                            width: `${bufferedFrac * 100}%`,
+                                            background: "rgba(255, 255, 255, 0.35)",
+                                        } }), _jsx("div", { style: {
+                                            ...S.trackFill,
+                                            width: `${playedFrac * 100}%`,
+                                            background: ACCENT,
+                                        } })] }), barActive && (_jsxs(_Fragment, { children: [_jsx("div", { style: { ...S.thumb, left: `${playedFrac * 100}%` } }), _jsx("div", { style: { ...S.chip, left: `${chipFrac * 100}%` }, children: formatTime(Time.frameToMillis(chipFrame, fps) / 1000) })] }))] })), _jsxs("span", { style: S.time, children: [formatTime(currentTime), totalTime !== null ? ` / ${formatTime(totalTime)}` : ""] }), !isInfinite && (_jsx("button", { type: "button", "aria-label": "Repeat", "aria-pressed": loop, title: loop ? "Repeat on" : "Repeat off", style: {
+                            ...S.iconButton,
+                            color: loop ? ACCENT : "rgba(255, 255, 255, 0.7)",
+                        }, onClick: () => setLoop((v) => !v), children: _jsx(RepeatIcon, {}) }))] })] }));
+};
+// ---------------------------------------------------------------------------
+// chrome: Vimeo-style player skin. Self-contained by design — inline style
+// objects and inline SVG icons only, no stylesheet/tailwind/image deps.
+// ---------------------------------------------------------------------------
+const ACCENT = "#00adef"; // Vimeo blue
+const formatTime = (seconds) => {
+    const s = Math.max(0, Math.floor(seconds));
+    return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+};
+const PlayIcon = ({ size = 18 }) => (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M7 4.5v15l13-7.5z" }) }));
+const PauseIcon = ({ size = 18 }) => (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M6.5 4.5h4v15h-4zM13.5 4.5h4v15h-4z" }) }));
+// looping arrows (stroke icon — reads as "repeat" at small sizes)
+const RepeatIcon = ({ size = 18 }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M17 2l4 4-4 4" }), _jsx("path", { d: "M3 11V9a4 4 0 0 1 4-4h14" }), _jsx("path", { d: "M7 22l-4-4 4-4" }), _jsx("path", { d: "M21 13v2a4 4 0 0 1-4 4H3" })] }));
+const S = {
+    player: {
+        position: "relative",
+        width: "100%",
+        background: "#000",
+        borderRadius: 8,
+        overflow: "hidden",
+        lineHeight: 1,
+        userSelect: "none",
+        WebkitUserSelect: "none",
+        fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+    },
+    canvas: {
+        display: "block",
+        width: "100%",
+        height: "auto",
+        cursor: "pointer",
+    },
+    bigPlay: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        width: 66,
+        height: 46,
+        border: "none",
+        borderRadius: 8,
+        color: "#fff",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: "pointer",
+        transition: "background 120ms ease",
+    },
+    gradient: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: 72,
+        background: "linear-gradient(transparent, rgba(0, 0, 0, 0.6))",
+        pointerEvents: "none",
+        transition: "opacity 200ms ease",
+    },
+    controls: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: 0,
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        padding: "0 10px 8px 6px",
+        transition: "opacity 200ms ease",
+    },
+    iconButton: {
+        border: "none",
+        background: "transparent",
+        padding: 4,
+        margin: 0,
+        color: "#fff",
+        display: "flex",
+        alignItems: "center",
+        cursor: "pointer",
+    },
+    scrub: {
+        position: "relative",
+        flex: 1,
+        display: "flex",
+        alignItems: "center",
+        height: 16,
+        cursor: "pointer",
+        touchAction: "none",
+    },
+    track: {
+        position: "relative",
+        width: "100%",
+        borderRadius: 2,
+        background: "rgba(255, 255, 255, 0.2)",
+        overflow: "hidden",
+        transition: "height 100ms ease",
+    },
+    trackFill: {
+        position: "absolute",
+        left: 0,
+        top: 0,
+        bottom: 0,
+        borderRadius: 2,
+    },
+    thumb: {
+        position: "absolute",
+        top: "50%",
+        width: 12,
+        height: 12,
+        borderRadius: "50%",
+        background: "#fff",
+        transform: "translate(-50%, -50%)",
+        boxShadow: "0 0 4px rgba(0, 0, 0, 0.4)",
+        pointerEvents: "none",
+    },
+    chip: {
+        position: "absolute",
+        bottom: 20,
+        transform: "translateX(-50%)",
+        background: "rgba(0, 0, 0, 0.85)",
+        color: "#fff",
+        fontSize: 11,
+        fontVariantNumeric: "tabular-nums",
+        padding: "4px 6px",
+        borderRadius: 4,
+        whiteSpace: "nowrap",
+        pointerEvents: "none",
+    },
+    time: {
+        // pushes itself + the repeat button to the right of the scrubber
+        marginLeft: "auto",
+        color: "#fff",
+        fontSize: 12,
+        fontVariantNumeric: "tabular-nums",
+    },
 };

package/dist/index.d.ts

@@ -1,2 +1 @@
-export { Player, type PlayerProps } from "./Player";
-export { type AnyScene, type Player as PlayerHandle, type PlayerFrame, type PlayerStatus, type UsePlayerOptions, usePlayer, } from "./usePlayer";
+export { Player, type PlayerProps } from "./Player.js";

package/dist/index.js

@@ -1,2 +1 @@
-export { Player } from "./Player";
-export { usePlayer, } from "./usePlayer";
+export { Player } from "./Player.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-motion/react",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "React bindings for effect-motion: usePlayer hook and Player component",
   "type": "module",
   "license": "MIT",
@@ -22,6 +22,10 @@
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "default": "./dist/*.js"
     }
   },
   "files": [
@@ -31,17 +35,19 @@
     "access": "public"
   },
   "dependencies": {
-    "effect-motion": "^0.2.0"
+    "@effect-motion/thorvg": "^0.1.0",
+    "effect-motion": "^0.3.0"
   },
   "peerDependencies": {
-    "effect": ">=4.0.0-beta.94",
+    "effect": ">=4.0.0-beta.98",
     "react": ">=18"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",
+    "@types/node": "^26.1.1",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
-    "effect": "4.0.0-beta.94",
+    "effect": "4.0.0-beta.98",
     "happy-dom": "^20.10.6",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
@@ -51,7 +57,7 @@
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
     "dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
-    "test": "vitest run",
+    "test": "vitest run --passWithNoTests",
     "check": "tsc --noEmit"
   }
 }

package/dist/usePlayer.d.ts

@@ -1,46 +0,0 @@
-import { type Entity, Scene } from "effect-motion";
-export type PlayerStatus = "loading" | "ready" | "error";
-/** A scene as produced by `Scene.make`, requirements erased. */
-export type AnyScene = Scene.Scene<unknown, unknown, Entity.AnyEntity>;
-export type PlayerFrame = Scene.Frame<Entity.AnyEntity>;
-export interface UsePlayerOptions {
-    readonly seed?: number | string | undefined;
-    /** frames per second of both the scene runner and the playback clock */
-    readonly frameRate?: number | undefined;
-    /** scene resolution, forwarded to the runner and stamped on frames */
-    readonly width?: number | undefined;
-    readonly height?: number | undefined;
-    /** start playing as soon as the first frame is buffered */
-    readonly autoPlay?: boolean | undefined;
-}
-export interface Player {
-    readonly status: PlayerStatus;
-    /** the failure value when `status` is "error" */
-    readonly error: unknown;
-    /** the frame to show right now (null while loading/error) */
-    readonly currentFrame: PlayerFrame | null;
-    /** current frame index */
-    readonly frame: number;
-    /** frames pulled from the scene so far */
-    readonly bufferedFrames: number;
-    /** null until the scene's stream completes (never, for infinite scenes) */
-    readonly totalFrames: number | null;
-    /** 0..1 — against totalFrames when known, else the buffered edge */
-    readonly progress: number;
-    readonly playing: boolean;
-    readonly loop: boolean;
-    readonly frameRate: number;
-    readonly play: () => void;
-    readonly pause: () => void;
-    readonly toggle: () => void;
-    readonly seek: (frame: number) => void;
-    readonly setLoop: (loop: boolean) => void;
-}
-/**
- * Prepare a scene for playback: pull frames from the scene's stream with a
- * read-ahead buffer and play them back on a rAF clock. Playback starts as
- * soon as the first frame is buffered, so long and infinite scenes play
- * without waiting for completion. Played frames are retained, so backward
- * seeking is free; forward seeking clamps to the buffered edge.
- */
-export declare const usePlayer: (scene: AnyScene, options?: UsePlayerOptions) => Player;

package/dist/usePlayer.js

@@ -1,218 +0,0 @@
-import * as Effect from "effect/Effect";
-import * as Pull from "effect/Pull";
-import * as Stream from "effect/Stream";
-import { Fonts, Scene } from "effect-motion";
-import { useCallback, useEffect, useRef, useState } from "react";
-/**
- * Prepare a scene for playback: pull frames from the scene's stream with a
- * read-ahead buffer and play them back on a rAF clock. Playback starts as
- * soon as the first frame is buffered, so long and infinite scenes play
- * without waiting for completion. Played frames are retained, so backward
- * seeking is free; forward seeking clamps to the buffered edge.
- */
-export const usePlayer = (scene, options = {}) => {
-    const { seed, frameRate = 60, width, height, autoPlay = false } = options;
-    // ponytail: the buffer is append-only and unbounded — infinite scenes
-    // grow it forever; swap in a ring buffer with a re-run-from-0 story if
-    // memory ever matters. buffer[i] never changes once present, so reading
-    // it during render is safe.
-    const bufferRef = useRef([]);
-    const [bufferedFrames, setBufferedFrames] = useState(0);
-    const [totalFrames, setTotalFrames] = useState(null);
-    const [error, setError] = useState(null);
-    const [frame, setFrame] = useState(0);
-    const [playing, setPlaying] = useState(false);
-    const [loop, setLoop] = useState(false);
-    const [fontsReady, setFontsReady] = useState(false);
-    // font preload: load the scene's declared url fonts (Fonts annotation)
-    // alongside initial buffering. Fonts cannot affect frame data, so this
-    // only gates `status` — a failed load warns and proceeds with the
-    // browser's normal fallback.
-    useEffect(() => {
-        const entries = Fonts.get(scene).filter((f) => f.src.url !== undefined);
-        if (entries.length === 0 ||
-            typeof FontFace === "undefined" ||
-            typeof document === "undefined" ||
-            document.fonts === undefined) {
-            setFontsReady(true);
-            return;
-        }
-        setFontsReady(false);
-        let cancelled = false;
-        const loads = entries.map((f) => {
-            const face = new FontFace(f.family, `url(${f.src.url})`, {
-                ...(f.weight !== undefined && { weight: String(f.weight) }),
-                ...(f.style !== undefined && { style: f.style }),
-            });
-            document.fonts.add(face);
-            return face.load().then(undefined, (err) => {
-                console.warn(`effect-motion: font "${f.family}" failed to load`, err);
-            });
-        });
-        Promise.all(loads).then(() => {
-            if (!cancelled) {
-                setFontsReady(true);
-            }
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, [scene]);
-    // latest-value refs keep the fill loop and the rAF clock out of effect
-    // deps: neither should restart on every frame or buffer growth
-    const autoPlayRef = useRef(autoPlay);
-    autoPlayRef.current = autoPlay;
-    const frameRef = useRef(frame);
-    frameRef.current = frame;
-    const totalRef = useRef(totalFrames);
-    totalRef.current = totalFrames;
-    const loopRef = useRef(loop);
-    loopRef.current = loop;
-    // fill loop: pull frames ahead of the playhead until the stream ends
-    useEffect(() => {
-        const controller = new AbortController();
-        bufferRef.current = [];
-        frameRef.current = 0;
-        setBufferedFrames(0);
-        setTotalFrames(null);
-        setError(null);
-        setFrame(0);
-        setPlaying(false);
-        const readAhead = 2 * frameRate;
-        const frames = Scene.stream(scene, {
-            frameRate,
-            ...(seed !== undefined && { seed }),
-            ...(width !== undefined && { width }),
-            ...(height !== undefined && { height }),
-        });
-        const fill = Effect.gen(function* () {
-            const pull = yield* Stream.toPull(frames);
-            let first = true;
-            while (true) {
-                if (bufferRef.current.length - frameRef.current >= readAhead) {
-                    // ponytail: 50ms poll instead of demand signalling — the
-                    // condition changes at most once per played frame; wire a
-                    // real latch if the wakeups ever show up in a profile
-                    yield* Effect.sleep(50);
-                    continue;
-                }
-                const chunk = yield* pull;
-                bufferRef.current.push(...chunk);
-                setBufferedFrames(bufferRef.current.length);
-                if (first) {
-                    first = false;
-                    if (autoPlayRef.current) {
-                        setPlaying(true);
-                    }
-                }
-            }
-        }).pipe(
-        // the pull signals stream end as a Done failure: the scene is finite
-        Pull.catchDone(() => Effect.sync(() => setTotalFrames(bufferRef.current.length))), Effect.scoped);
-        Effect.runPromise(fill, { signal: controller.signal }).then(undefined, (err) => {
-            // aborted means unmount/re-run: no state updates after that
-            if (!controller.signal.aborted) {
-                setError(err);
-            }
-        });
-        return () => controller.abort();
-    }, [scene, seed, frameRate, width, height]);
-    // playback clock: advance the index at frameRate while playing, clamped
-    // to the buffered edge — playing at the live edge waits for frames
-    useEffect(() => {
-        if (!playing) {
-            return;
-        }
-        const frameMs = 1000 / frameRate;
-        let raf = 0;
-        let last = null;
-        let acc = 0;
-        const tick = (now) => {
-            if (last !== null) {
-                acc += now - last;
-                const advance = Math.floor(acc / frameMs);
-                if (advance > 0) {
-                    acc -= advance * frameMs;
-                    setFrame((f) => {
-                        const buffered = bufferRef.current.length;
-                        if (buffered === 0) {
-                            return f;
-                        }
-                        let next = f + advance;
-                        const total = totalRef.current;
-                        if (total !== null && loopRef.current && next > total - 1) {
-                            next = next % total;
-                        }
-                        return Math.min(next, buffered - 1);
-                    });
-                }
-            }
-            last = now;
-            raf = requestAnimationFrame(tick);
-        };
-        raf = requestAnimationFrame(tick);
-        return () => cancelAnimationFrame(raf);
-    }, [playing, frameRate]);
-    // auto-pause on the last frame of a completed stream (loop wraps instead)
-    useEffect(() => {
-        if (playing && !loop && totalFrames !== null && frame >= totalFrames - 1) {
-            setPlaying(false);
-        }
-    }, [playing, loop, totalFrames, frame]);
-    const play = useCallback(() => {
-        if (bufferRef.current.length === 0) {
-            return;
-        }
-        // replay: sitting on the last frame of a finished scene means start over
-        setFrame((f) => {
-            const total = totalRef.current;
-            return total !== null && f >= total - 1 ? 0 : f;
-        });
-        setPlaying(true);
-    }, []);
-    const pause = useCallback(() => {
-        setPlaying(false);
-    }, []);
-    const toggle = useCallback(() => {
-        if (playing) {
-            pause();
-        }
-        else {
-            play();
-        }
-    }, [playing, play, pause]);
-    const seek = useCallback((target) => {
-        const buffered = bufferRef.current.length;
-        if (buffered === 0) {
-            return;
-        }
-        setFrame(Math.min(Math.max(0, Math.floor(target)), buffered - 1));
-    }, []);
-    const status = error !== null
-        ? "error"
-        : bufferedFrames > 0 && fontsReady
-            ? "ready"
-            : "loading";
-    const denominator = (totalFrames ?? bufferedFrames) - 1;
-    return {
-        status,
-        error,
-        currentFrame: bufferRef.current[frame] ?? null,
-        frame,
-        bufferedFrames,
-        totalFrames,
-        progress: denominator > 0
-            ? Math.min(frame / denominator, 1)
-            : totalFrames !== null
-                ? 1
-                : 0,
-        playing,
-        loop,
-        frameRate,
-        play,
-        pause,
-        toggle,
-        seek,
-        setLoop,
-    };
-};