@framv/video 0.1.0

package/dist/cdn.d.ts

@@ -0,0 +1,4 @@
+import "./element.js";
+export { FramvVideoElement } from "./element.js";
+export { Player } from "./player.js";
+//# sourceMappingURL=cdn.d.ts.map

package/dist/cdn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cdn.d.ts","sourceRoot":"","sources":["../src/cdn.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC"}

package/dist/cdn.js

@@ -0,0 +1,4 @@
+import "./element.js";
+export { FramvVideoElement } from "./element.js";
+export { Player } from "./player.js";
+//# sourceMappingURL=cdn.js.map

package/dist/cdn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cdn.js","sourceRoot":"","sources":["../src/cdn.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC"}

package/dist/element.d.ts

@@ -0,0 +1,49 @@
+import { Player } from "./player.js";
+/**
+ * `<framv-video>` — renders HTML content as a video.
+ *
+ * Attributes:
+ *   width     — canvas width in pixels (default: 1920)
+ *   height    — canvas height in pixels (default: 1080)
+ *   fps       — frames per second (default: 30)
+ *   duration  — total duration in seconds (default: auto from animations)
+ *   format    — export format: mp4, webm (default: mp4)
+ *   quality   — export quality 0..1 (default: 0.95)
+ *   controls  — always show toolbar
+ *   autoplay  — start playing immediately
+ *   loop      — loop playback
+ *
+ * @example
+ * ```html
+ * <framv-video width="1920" height="1080" fps="30" duration="5" controls>
+ *   <div>Your content here</div>
+ * </framv-video>
+ * ```
+ */
+export declare class FramvVideoElement extends HTMLElement {
+    static observedAttributes: string[];
+    private _player;
+    private _stage;
+    private _toolbar;
+    private _btn;
+    private _range;
+    private _time;
+    private _exportBtn;
+    private _shadow;
+    private _dragging;
+    private _exporting;
+    constructor();
+    get width(): number;
+    get height(): number;
+    get fps(): number;
+    get duration(): number;
+    get format(): string;
+    get quality(): number;
+    get player(): Player | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string, value: string): void;
+    private _adaptSize;
+    private _export;
+}
+//# sourceMappingURL=element.d.ts.map

package/dist/element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AA8DrC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,iBAAkB,SAAQ,WAAW;IAChD,MAAM,CAAC,kBAAkB,WAA6C;IAEtE,OAAO,CAAC,OAAO,CAAuB;IACtC,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,IAAI,CAAqB;IACjC,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,KAAK,CAAmB;IAChC,OAAO,CAAC,UAAU,CAAqB;IACvC,OAAO,CAAC,OAAO,CAAa;IAC5B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,UAAU,CAAS;;IAO3B,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,MAAM,IAAI,MAAM,CAEnB;IACD,IAAI,GAAG,IAAI,MAAM,CAEhB;IACD,IAAI,QAAQ,IAAI,MAAM,CAErB;IACD,IAAI,MAAM,IAAI,MAAM,CAEnB;IACD,IAAI,OAAO,IAAI,MAAM,CAEpB;IACD,IAAI,MAAM,IAAI,MAAM,GAAG,IAAI,CAE1B;IAED,iBAAiB,IAAI,IAAI;IAgFzB,oBAAoB,IAAI,IAAI;IAK5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAoBzE,OAAO,CAAC,UAAU;YASJ,OAAO;CAoDtB"}

package/dist/element.js

@@ -0,0 +1,283 @@
+import { exportElement } from "@framv/core";
+import { Player } from "./player.js";
+const STYLES = `
+  :host { display: block; position: relative; overflow: hidden; }
+  .framv-stage {
+    position: relative;
+    width: var(--framv-w, 1920px);
+    height: var(--framv-h, 1080px);
+    transform-origin: top left;
+    overflow: hidden;
+  }
+  .framv-toolbar {
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 12px;
+    background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
+    color: #fff; font: 13px/1 system-ui, monospace;
+    position: absolute; bottom: 0; left: 0; right: 0;
+    opacity: 0; transition: opacity 0.2s;
+    z-index: 10;
+  }
+  :host(:hover) .framv-toolbar,
+  :host([controls]) .framv-toolbar { opacity: 1; }
+  .framv-toolbar button {
+    background: none; border: 1px solid rgba(255,255,255,0.2);
+    color: inherit; cursor: pointer;
+    padding: 4px 10px; font: inherit; border-radius: 4px;
+  }
+  .framv-toolbar button:hover { background: rgba(255,255,255,0.15); }
+  .framv-toolbar .btn-export {
+    border-color: #ff79c6; color: #ff79c6;
+  }
+  input[type=range] {
+    flex: 1; accent-color: #ff79c6; cursor: pointer; height: 3px;
+  }
+  .framv-time { white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0.8; min-width: 100px; text-align: center; }
+  .framv-badge {
+    position: absolute; top: 8px; right: 8px;
+    background: rgba(0,0,0,0.6); color: #fff;
+    padding: 2px 8px; border-radius: 4px;
+    font: 11px system-ui; letter-spacing: 0.5px;
+    text-transform: uppercase; z-index: 5;
+  }
+  .framv-exporting-overlay {
+    position: absolute; inset: 0;
+    background: rgba(0,0,0,0.7);
+    display: flex; align-items: center; justify-content: center;
+    color: #fff; font: 16px system-ui; z-index: 20;
+  }
+  .framv-exporting-overlay .spinner {
+    width: 32px; height: 32px; border: 3px solid rgba(255,255,255,0.3);
+    border-top-color: #ff79c6; border-radius: 50%;
+    animation: framv-spin 0.8s linear infinite;
+    margin-right: 12px;
+  }
+  @keyframes framv-spin { to { transform: rotate(360deg); } }
+`;
+const fmt = (s) => {
+    const m = Math.floor(s / 60);
+    return `${m}:${String(Math.floor(s % 60)).padStart(2, "0")}`;
+};
+/**
+ * `<framv-video>` — renders HTML content as a video.
+ *
+ * Attributes:
+ *   width     — canvas width in pixels (default: 1920)
+ *   height    — canvas height in pixels (default: 1080)
+ *   fps       — frames per second (default: 30)
+ *   duration  — total duration in seconds (default: auto from animations)
+ *   format    — export format: mp4, webm (default: mp4)
+ *   quality   — export quality 0..1 (default: 0.95)
+ *   controls  — always show toolbar
+ *   autoplay  — start playing immediately
+ *   loop      — loop playback
+ *
+ * @example
+ * ```html
+ * <framv-video width="1920" height="1080" fps="30" duration="5" controls>
+ *   <div>Your content here</div>
+ * </framv-video>
+ * ```
+ */
+export class FramvVideoElement extends HTMLElement {
+    static observedAttributes = ["duration", "width", "height", "format"];
+    _player = null;
+    _stage;
+    _toolbar;
+    _btn;
+    _range;
+    _time;
+    _exportBtn;
+    _shadow;
+    _dragging = false;
+    _exporting = false;
+    constructor() {
+        super();
+        this._shadow = this.attachShadow({ mode: "open" });
+    }
+    get width() {
+        return parseInt(this.getAttribute("width") ?? "1920");
+    }
+    get height() {
+        return parseInt(this.getAttribute("height") ?? "1080");
+    }
+    get fps() {
+        return parseInt(this.getAttribute("fps") ?? "30");
+    }
+    get duration() {
+        return parseFloat(this.getAttribute("duration") ?? "5");
+    }
+    get format() {
+        return this.getAttribute("format") ?? "mp4";
+    }
+    get quality() {
+        return parseFloat(this.getAttribute("quality") ?? "0.95");
+    }
+    get player() {
+        return this._player;
+    }
+    connectedCallback() {
+        const w = this.width;
+        const h = this.height;
+        this._shadow.innerHTML = `
+      <style>${STYLES}</style>
+      <div class="framv-badge">framv video · ${this.format.toUpperCase()} · ${w}x${h}</div>
+      <div class="framv-stage" style="--framv-w:${w}px;--framv-h:${h}px">
+        <slot></slot>
+      </div>
+      <div class="framv-toolbar">
+        <button class="btn-play">▶</button>
+        <input type="range" min="0" max="1000" value="0" step="1">
+        <span class="framv-time">0:00 / 0:00</span>
+        <button class="btn-export">⬇ Export ${this.format.toUpperCase()}</button>
+      </div>
+    `;
+        this._stage = this._shadow.querySelector(".framv-stage");
+        this._toolbar = this._shadow.querySelector(".framv-toolbar");
+        this._btn = this._shadow.querySelector(".btn-play");
+        this._range = this._shadow.querySelector("input");
+        this._time = this._shadow.querySelector(".framv-time");
+        this._exportBtn = this._shadow.querySelector(".btn-export");
+        // Adapt stage size to container
+        this._adaptSize();
+        this._player = new Player(this);
+        const d = this.duration;
+        if (d > 0)
+            this._player.setDuration(d);
+        else
+            this._player.setDuration(5);
+        this._player.on("play", () => {
+            this._btn.textContent = "⏸";
+        });
+        this._player.on("pause", () => {
+            this._btn.textContent = "▶";
+        });
+        this._player.on("ended", () => {
+            this._btn.textContent = "↺";
+            if (this.hasAttribute("loop")) {
+                this._player.seek(0).then(() => this._player.play());
+            }
+        });
+        this._player.on("timeupdate", (t = 0) => {
+            if (!this._dragging)
+                this._range.value = String(Math.round((t / (this._player.duration || 1)) * 1000));
+            this._time.textContent = `${fmt(t)} / ${fmt(this._player.duration)}`;
+        });
+        this._btn.addEventListener("click", () => {
+            if (this._exporting)
+                return;
+            if (this._player.playing) {
+                this._player.pause();
+            }
+            else if (this._player.currentTime >= this._player.duration && this._player.duration > 0) {
+                this._player.seek(0).then(() => this._player.play());
+            }
+            else {
+                this._player.play();
+            }
+        });
+        this._range.addEventListener("mousedown", () => {
+            this._dragging = true;
+        });
+        this._range.addEventListener("mouseup", () => {
+            this._dragging = false;
+        });
+        this._range.addEventListener("input", () => {
+            const t = (Number(this._range.value) / 1000) * (this._player.duration || 1);
+            this._player.seek(t);
+        });
+        this._exportBtn.addEventListener("click", () => this._export());
+        if (this.hasAttribute("autoplay"))
+            this._player.play();
+        // Resize observer
+        new ResizeObserver(() => this._adaptSize()).observe(this);
+    }
+    disconnectedCallback() {
+        this._player?.destroy();
+        this._player = null;
+    }
+    attributeChangedCallback(name, _old, value) {
+        if (name === "duration" && this._player) {
+            this._player.setDuration(parseFloat(value) || 0);
+        }
+        if (name === "format" && this._toolbar) {
+            const badge = this._shadow.querySelector(".framv-badge");
+            if (badge)
+                badge.textContent = `framv video · ${this.format.toUpperCase()} · ${this.width}x${this.height}`;
+            this._exportBtn.textContent = `⬇ Export ${this.format.toUpperCase()}`;
+        }
+        if ((name === "width" || name === "height") && this._stage) {
+            const w = this.width;
+            const h = this.height;
+            this._stage.style.setProperty("--framv-w", `${w}px`);
+            this._stage.style.setProperty("--framv-h", `${h}px`);
+            const badge = this._shadow.querySelector(".framv-badge");
+            if (badge)
+                badge.textContent = `framv video · ${this.format.toUpperCase()} · ${w}x${h}`;
+            this._adaptSize();
+        }
+    }
+    _adaptSize() {
+        const w = this.width;
+        const h = this.height;
+        const containerW = this.clientWidth || w;
+        const scale = Math.min(containerW / w, 1);
+        this._stage.style.transform = `scale(${scale})`;
+        this.style.minHeight = `${h * scale}px`;
+    }
+    async _export() {
+        if (this._exporting)
+            return;
+        this._exporting = true;
+        const overlay = document.createElement("div");
+        overlay.className = "framv-exporting-overlay";
+        overlay.innerHTML = '<div class="spinner"></div><span>Exporting... 0%</span>';
+        const label = overlay.querySelector("span");
+        this._shadow.appendChild(overlay);
+        // Build a temporary container with light DOM content for the core renderer
+        const container = document.createElement("div");
+        container.style.width = `${this.width}px`;
+        container.style.height = `${this.height}px`;
+        container.style.position = "relative";
+        container.style.overflow = "hidden";
+        Array.from(this.children).forEach((child) => container.appendChild(child.cloneNode(true)));
+        try {
+            const blob = await exportElement({
+                element: container,
+                settings: {
+                    format: this.format,
+                    fps: this.fps,
+                    start: 0,
+                    end: this.duration,
+                    width: this.width,
+                    height: this.height,
+                    quality: this.quality,
+                },
+                onProgress: (p) => {
+                    label.textContent = `Exporting... ${Math.round(p * 100)}%`;
+                    return true;
+                },
+            });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = `framv-video.${this.format}`;
+            this._shadow.appendChild(a);
+            a.click();
+            a.remove();
+            URL.revokeObjectURL(url);
+        }
+        catch (err) {
+            console.error("Export failed:", err);
+            label.textContent = "Export failed. Check console.";
+        }
+        finally {
+            overlay.remove();
+            this._exporting = false;
+        }
+    }
+}
+if (!customElements.get("framv-video")) {
+    customElements.define("framv-video", FramvVideoElement);
+}
+//# sourceMappingURL=element.js.map

package/dist/element.js.map

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

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { FramvVideoElement } from "./element.js";
+export { Player } from "./player.js";
+export type { PlayerEvent, PlayerEventCallback } from "./types.js";
+//# 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":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { FramvVideoElement } from "./element.js";
+export { Player } from "./player.js";
+//# 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,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC"}

package/dist/player.d.ts

@@ -0,0 +1,50 @@
+import type { PlayerEvent, PlayerEventCallback } from "./types.js";
+/**
+ * Player wraps any HTMLElement or SVGSVGElement and provides seek/play/pause
+ * controls for its timeline animations.
+ *
+ * Works with:
+ * - CSS @keyframes / Web Animations API on any HTML element
+ * - SVG SMIL animations (setCurrentTime / unpauseAnimations / pauseAnimations)
+ * - HTMLMediaElement (audio/video) with optional `data-media-start` offset
+ * - Custom elements that expose a `draw(time: number)` method
+ *
+ * @example
+ * ```ts
+ * const player = new Player(document.querySelector('#content')!);
+ * player.setDuration(10);
+ * await player.seek(2.5);
+ * await player.play();
+ * player.on('timeupdate', (t) => console.log(t));
+ * ```
+ */
+export declare class Player {
+    /** The root element whose animations this player controls. Can be any HTML element (div, section, etc.) or SVGSVGElement. */
+    private _element;
+    private _currentTime;
+    private _duration;
+    private _playing;
+    private _rafId;
+    private _lastRafTime;
+    private _listeners;
+    constructor(element: HTMLElement | SVGSVGElement);
+    get currentTime(): number;
+    get duration(): number;
+    get playing(): boolean;
+    setDuration(duration: number): void;
+    play(): Promise<void>;
+    pause(): void;
+    seek(time: number): Promise<void>;
+    destroy(): void;
+    on(event: PlayerEvent, cb: PlayerEventCallback): () => void;
+    private _startRafLoop;
+    private _stopRafLoop;
+    private _playElement;
+    private _pauseElement;
+    private _seekElement;
+    private _playMedia;
+    private _seekMedia;
+    private _getMediaStartTime;
+    private _emit;
+}
+//# sourceMappingURL=player.d.ts.map

package/dist/player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"player.d.ts","sourceRoot":"","sources":["../src/player.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEnE;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,MAAM;IACjB,6HAA6H;IAC7H,OAAO,CAAC,QAAQ,CAA8B;IAC9C,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAO,CAAC,MAAM,CAAuB;IACrC,OAAO,CAAC,YAAY,CAAuB;IAE3C,OAAO,CAAC,UAAU,CAAyD;gBAE/D,OAAO,EAAE,WAAW,GAAG,aAAa;IAMhD,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAQ7B,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAS3B,KAAK,IAAI,IAAI;IASP,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IASvC,OAAO,IAAI,IAAI;IAOf,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,mBAAmB,GAAG,MAAM,IAAI;IAa3D,OAAO,CAAC,aAAa;IAqCrB,OAAO,CAAC,YAAY;YAUN,YAAY;IAgB1B,OAAO,CAAC,aAAa;YAmBP,YAAY;YAmBZ,UAAU;IAyBxB,OAAO,CAAC,UAAU;IAwBlB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,KAAK;CAGd"}

package/dist/player.js

@@ -0,0 +1,231 @@
+/**
+ * Player wraps any HTMLElement or SVGSVGElement and provides seek/play/pause
+ * controls for its timeline animations.
+ *
+ * Works with:
+ * - CSS @keyframes / Web Animations API on any HTML element
+ * - SVG SMIL animations (setCurrentTime / unpauseAnimations / pauseAnimations)
+ * - HTMLMediaElement (audio/video) with optional `data-media-start` offset
+ * - Custom elements that expose a `draw(time: number)` method
+ *
+ * @example
+ * ```ts
+ * const player = new Player(document.querySelector('#content')!);
+ * player.setDuration(10);
+ * await player.seek(2.5);
+ * await player.play();
+ * player.on('timeupdate', (t) => console.log(t));
+ * ```
+ */
+export class Player {
+    /** The root element whose animations this player controls. Can be any HTML element (div, section, etc.) or SVGSVGElement. */
+    _element;
+    _currentTime = 0;
+    _duration = 0;
+    _playing = false;
+    _rafId = null;
+    _lastRafTime = null;
+    _listeners = new Map();
+    constructor(element) {
+        this._element = element;
+    }
+    // ─── State ───────────────────────────────────────────────────────────────
+    get currentTime() {
+        return this._currentTime;
+    }
+    get duration() {
+        return this._duration;
+    }
+    get playing() {
+        return this._playing;
+    }
+    setDuration(duration) {
+        if (duration >= 0) {
+            this._duration = duration;
+        }
+    }
+    // ─── Controls ────────────────────────────────────────────────────────────
+    async play() {
+        if (this._playing)
+            return;
+        this._playing = true;
+        await this._playElement(this._element);
+        this._startRafLoop();
+        this._emit("play");
+    }
+    pause() {
+        if (!this._playing)
+            return;
+        this._playing = false;
+        this._stopRafLoop();
+        this._pauseElement(this._element);
+        this._emit("pause");
+    }
+    async seek(time) {
+        const clamped = this._duration > 0 ? Math.max(0, Math.min(time, this._duration)) : Math.max(0, time);
+        this._currentTime = clamped;
+        await this._seekElement(this._element, clamped);
+        this._emit("seek", clamped);
+        this._emit("timeupdate", clamped);
+    }
+    destroy() {
+        this.pause();
+        this._listeners.clear();
+    }
+    // ─── Events ──────────────────────────────────────────────────────────────
+    on(event, cb) {
+        if (!this._listeners.has(event)) {
+            this._listeners.set(event, new Set());
+        }
+        this._listeners.get(event).add(cb);
+        return () => {
+            this._listeners.get(event)?.delete(cb);
+        };
+    }
+    // ─── Internal: rAF loop ──────────────────────────────────────────────────
+    _startRafLoop() {
+        this._lastRafTime = null;
+        const tick = (now) => {
+            if (!this._playing)
+                return;
+            if (this._lastRafTime !== null) {
+                const delta = (now - this._lastRafTime) / 1000; // seconds
+                this._currentTime += delta;
+                if (this._duration > 0 && this._currentTime >= this._duration) {
+                    this._currentTime = this._duration;
+                    this._emit("timeupdate", this._currentTime);
+                    this._playing = false;
+                    this._stopRafLoop();
+                    this._pauseElement(this._element);
+                    this._emit("ended");
+                    return;
+                }
+            }
+            this._lastRafTime = now;
+            // Call draw(time) on elements that expose it
+            const all = [this._element, ...Array.from(this._element.querySelectorAll("*"))];
+            for (const el of all) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if (typeof el.draw === "function")
+                    el.draw(this._currentTime);
+            }
+            this._emit("timeupdate", this._currentTime);
+            this._rafId = requestAnimationFrame(tick);
+        };
+        this._rafId = requestAnimationFrame(tick);
+    }
+    _stopRafLoop() {
+        if (this._rafId !== null) {
+            cancelAnimationFrame(this._rafId);
+            this._rafId = null;
+        }
+        this._lastRafTime = null;
+    }
+    // ─── Internal: element control ───────────────────────────────────────────
+    async _playElement(element) {
+        const all = [element, ...Array.from(element.querySelectorAll("*"))];
+        for (const el of all) {
+            if (el instanceof SVGSVGElement) {
+                el.unpauseAnimations();
+            }
+            else if (el instanceof HTMLMediaElement) {
+                await this._playMedia(el);
+            }
+            else if (el.getAnimations?.().length > 0) {
+                el.getAnimations().forEach((a) => a.play());
+            }
+        }
+        // Script-driven elements (custom `draw` method) are handled by the rAF loop
+    }
+    _pauseElement(element) {
+        const all = [element, ...Array.from(element.querySelectorAll("*"))];
+        for (const el of all) {
+            if (el instanceof SVGSVGElement) {
+                el.pauseAnimations();
+            }
+            else if (el instanceof HTMLMediaElement) {
+                el.pause();
+                const extEl = el;
+                if (extEl._autoplayTimeout) {
+                    clearTimeout(extEl._autoplayTimeout);
+                    delete extEl._autoplayTimeout;
+                }
+            }
+            else if (el.getAnimations?.().length > 0) {
+                el.getAnimations().forEach((a) => a.pause());
+            }
+        }
+    }
+    async _seekElement(element, time) {
+        const all = [element, ...Array.from(element.querySelectorAll("*"))];
+        const promises = [];
+        for (const el of all) {
+            if (el instanceof SVGSVGElement) {
+                el.setCurrentTime(time);
+            }
+            else if (el instanceof HTMLMediaElement) {
+                promises.push(this._seekMedia(el, time));
+            }
+            else if (el.getAnimations?.().length > 0) {
+                el.getAnimations().forEach((a) => {
+                    a.currentTime = time * 1000;
+                });
+            }
+        }
+        await Promise.all(promises);
+    }
+    async _playMedia(el) {
+        const startTime = this._getMediaStartTime(el);
+        const now = this._currentTime;
+        if (startTime > 0) {
+            if (now >= startTime) {
+                await this._seekMedia(el, now);
+                await el.play().catch(() => undefined);
+            }
+            else {
+                const extEl = el;
+                extEl._autoplayTimeout = setTimeout(async () => {
+                    await el.play().catch(() => undefined);
+                }, (startTime - now) * 1000);
+            }
+        }
+        else if (startTime < 0) {
+            await this._seekMedia(el, now);
+            await el.play().catch(() => undefined);
+        }
+        else {
+            await el.play().catch(() => undefined);
+        }
+    }
+    _seekMedia(el, containerTime) {
+        return new Promise((resolve) => {
+            const startTime = this._getMediaStartTime(el);
+            let adjusted;
+            if (startTime > 0) {
+                adjusted = containerTime >= startTime ? containerTime - startTime : 0;
+            }
+            else if (startTime < 0) {
+                adjusted = containerTime + Math.abs(startTime);
+            }
+            else {
+                adjusted = containerTime;
+            }
+            const target = el.loop && el.duration > 0 ? adjusted % el.duration : Math.min(adjusted, el.duration || 0);
+            const onSeeked = () => {
+                el.removeEventListener("seeked", onSeeked);
+                resolve();
+            };
+            el.addEventListener("seeked", onSeeked);
+            el.currentTime = target;
+        });
+    }
+    _getMediaStartTime(el) {
+        const attr = el.getAttribute("data-media-start");
+        return attr ? parseFloat(attr) : 0;
+    }
+    // ─── Internal: emit ──────────────────────────────────────────────────────
+    _emit(event, time) {
+        this._listeners.get(event)?.forEach((cb) => cb(time));
+    }
+}
+//# sourceMappingURL=player.js.map