@video-editor/renderer 0.0.1-beta.1 → 0.0.1-beta.11

package/dist/index.js

@@ -1,20 +1,20 @@
-import { createValidator as se, createResourceManager as ue } from "@video-editor/protocol";
-import { toRaw as fe, isRef as le, shallowRef as b, unref as q, ref as L, computed as de, effectScope as pe, watch as A } from "@vue/reactivity";
+import { createValidator as le, createResourceManager as de } from "@video-editor/protocol";
+import { toRaw as pe, isRef as ve, shallowRef as q, unref as L, ref as W, computed as he, effectScope as ye, watch as k } from "@vue/reactivity";
 import { MP4Clip as _ } from "@webav/av-cliper";
-import { file as ve } from "opfs-tools";
-import { Application as ye, Sprite as F, Texture as D, Graphics as Y, Container as he } from "pixi.js";
-async function me(t) {
-  const n = new ye();
+import { file as me } from "opfs-tools";
+import { Application as we, Sprite as F, Texture as R, Graphics as B, Container as Te } from "pixi.js";
+async function xe(t) {
+  const n = new we();
   return await n.init({ resizeTo: window, ...t }), n;
 }
-function we(t) {
+function Ie(t) {
   const n = /* @__PURE__ */ new Set();
   for (const a of t.tracks)
     for (const i of a.children)
       i.url && n.add(i.url);
   return n;
 }
-function Te(t, n) {
+function ge(t, n) {
   const a = [];
   return t.tracks.forEach((i, u) => {
     i.children.forEach((s, p) => {
@@ -22,189 +22,189 @@ function Te(t, n) {
     });
   }), a.sort((i, u) => i.trackIndex === u.trackIndex ? i.childIndex - u.childIndex : i.trackIndex - u.trackIndex);
 }
-function xe(t, n, a, i) {
-  const u = Me(n);
+function Me(t, n, a, i) {
+  const u = Ce(n);
   t instanceof F ? (t.anchor.set(0.5), t.width = a, t.height = i, t.x = a / 2, t.y = i / 2, t.texture.source?.addEventListener?.("error", () => {
-    t.texture = D.from(Ie(a, i));
-  }, { once: !0 })) : t instanceof Y && (t.clear(), t.rect(0, 0, a, i).fill({ color: z("url" in n && typeof n.url == "string" ? n.url : n.segmentType), alpha: B(n) ? u : 0.35 }), t.pivot.set(a / 2, i / 2), t.position.set(a / 2, i / 2)), t.alpha = u;
-  const s = Ce(n);
+    t.texture = R.from(Se(a, i));
+  }, { once: !0 })) : t instanceof B && (t.clear(), t.rect(0, 0, a, i).fill({ color: G("url" in n && typeof n.url == "string" ? n.url : n.segmentType), alpha: Q(n) ? u : 0.35 }), t.pivot.set(a / 2, i / 2), t.position.set(a / 2, i / 2)), t.alpha = u;
+  const s = Re(n);
   if (s) {
-    const [p, g] = s.position ?? [0, 0], [v, m] = s.scale ?? [1, 1], y = s.rotation?.[2] ?? 0;
-    t.position.set(a / 2 + p * a / 2, i / 2 - g * i / 2), t.scale.set(v, m), t.rotation = y / 180 * Math.PI;
+    const [p, I] = s.position ?? [0, 0], [v, y] = s.scale ?? [1, 1], h = s.rotation?.[2] ?? 0;
+    t.position.set(a / 2 + p * a / 2, i / 2 - I * i / 2), t.scale.set(v, y), t.rotation = h / 180 * Math.PI;
   }
 }
 function H(t, n) {
-  const a = new Y();
-  return a.rect(0, 0, 10, 10).fill({ color: z(n ?? t), alpha: 1 }), a;
+  const a = new B();
+  return a.rect(0, 0, 10, 10).fill({ color: G(n ?? t), alpha: 1 }), a;
 }
-function Ie(t, n, a) {
+function Se(t, n, a) {
   const i = `<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${n}"><rect width="100%" height="100%" fill="#0f172a" fill-opacity="0.8"/></svg>`;
   return `data:image/svg+xml;base64,${btoa(i)}`;
 }
-function z(t) {
+function G(t) {
   let n = 0;
   for (let a = 0; a < t.length; a++)
     n = t.charCodeAt(a) + ((n << 5) - n);
   return n & 16777215;
 }
-function ge(t) {
+function z(t) {
   const n = t.tracks.flatMap((a) => a.children.map((i) => i.endTime));
   return n.length ? Math.max(...n) : 0;
 }
-function W(t, n, a) {
+function J(t, n, a) {
   return Math.min(Math.max(t, n), a);
 }
-function J(t) {
-  const n = fe(t);
+function Y(t) {
+  const n = pe(t);
   return JSON.parse(JSON.stringify(n));
 }
-function B(t) {
+function Q(t) {
   return "opacity" in t;
 }
-function Me(t) {
-  return B(t) && typeof t.opacity == "number" ? t.opacity : 1;
+function Ce(t) {
+  return Q(t) && typeof t.opacity == "number" ? t.opacity : 1;
 }
-function Se(t) {
+function De(t) {
   return "transform" in t;
 }
-function Ce(t) {
-  if (Se(t))
+function Re(t) {
+  if (De(t))
     return t.transform;
 }
-const De = "/video-editor-res";
-async function ke(t) {
-  const n = se(), a = le(t.protocol) ? t.protocol : b(t.protocol), i = b(
-    n.verify(J(q(a)))
-  ), u = t.app ?? await me(t.appOptions), s = new he();
+const Ae = "/video-editor-res";
+async function $e(t) {
+  const n = le(), a = ve(t.protocol) ? t.protocol : q(t.protocol), i = q(
+    n.verify(Y(L(a)))
+  ), u = t.app ?? await xe(t.appOptions), s = new Te();
   u.stage.addChild(s);
-  const p = ue({ dir: t.resourceDir }), g = /* @__PURE__ */ new Set(), v = /* @__PURE__ */ new Map(), m = /* @__PURE__ */ new Map(), y = /* @__PURE__ */ new Map(), f = L(0), x = L(!1), w = de(() => ge(i.value));
-  let M, C = 0;
-  async function G(e) {
-    const { protocol: o, at: r, layer: c } = e, l = Te(o, r), I = e.app.renderer.width, d = e.app.renderer.height, h = [];
-    for (const { segment: T } of l) {
-      const P = await e.getDisplay(T);
-      P && (xe(P, T, I, d), ne(T) && await re(T, r), h.push(P));
+  const p = de({ dir: t.resourceDir }), I = /* @__PURE__ */ new Set(), v = /* @__PURE__ */ new Map(), y = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new Map(), f = W(0), T = W(!1), m = he(() => z(i.value));
+  let g, C = 0;
+  async function j(e) {
+    const { protocol: o, at: r, layer: c } = e, l = ie(o, r), x = ge(o, l), d = e.app.renderer.width, w = e.app.renderer.height, M = [];
+    for (const { segment: D } of x) {
+      const P = await e.getDisplay(D);
+      P && (Me(P, D, d, w), ae(D) && await oe(D, l), M.push(P));
     }
     c.removeChildren();
-    const S = h.filter(Boolean);
+    const S = M.filter(Boolean);
     S.length && c.addChild(...S), e.app.render();
   }
-  const O = Re(() => G({
+  const O = Ee(() => j({
     app: u,
     layer: s,
     protocol: i.value,
     at: f.value,
-    getDisplay: X
-  })), k = pe();
-  k.run(() => {
-    A(
-      () => q(a),
+    getDisplay: ee
+  })), N = ye();
+  N.run(() => {
+    k(
+      () => L(a),
       (e) => {
         try {
-          i.value = n.verify(J(e));
+          i.value = n.verify(Y(e));
         } catch (o) {
           console.error("[renderer] invalid protocol update", o);
           return;
         }
-        N(), Q(i.value), j(i.value), R(), O();
+        $(), K(i.value), X(i.value), A(), O();
       },
       { deep: !0, immediate: !0 }
-    ), A(f, () => {
-      R(), O();
-    }), A(w, () => R());
+    ), k(f, () => {
+      A(), O();
+    }), k(m, () => A());
   });
-  function R() {
-    const e = w.value;
+  function A() {
+    const e = m.value;
     e <= 0 ? f.value = 0 : f.value > e ? f.value = e : f.value < 0 && (f.value = 0);
   }
-  function Q(e) {
-    for (const o of we(e))
-      g.has(o) || (g.add(o), p.add(o).catch(() => {
+  function K(e) {
+    for (const o of Ie(e))
+      I.has(o) || (I.add(o), p.add(o).catch(() => {
       }));
   }
-  function j(e) {
+  function X(e) {
     const o = new Set(e.tracks.flatMap((r) => r.children.map((c) => c.id)));
     for (const [r, c] of v)
       o.has(r) || (c.destroy(), v.delete(r));
-    for (const [r, c] of y)
-      o.has(r) || (c.clip.destroy(), y.delete(r));
+    for (const [r, c] of h)
+      o.has(r) || (c.clip.destroy(), h.delete(r));
   }
-  function N() {
+  function $() {
     s.removeChildren();
     for (const e of v.values())
       e.destroy();
-    v.clear(), m.clear();
-    for (const { clip: e } of y.values())
+    v.clear(), y.clear();
+    for (const { clip: e } of h.values())
       e.destroy();
-    y.clear();
+    h.clear();
   }
-  function $() {
-    x.value || (x.value = !0, C = performance.now(), M = requestAnimationFrame(U));
+  function U() {
+    T.value || (T.value = !0, C = performance.now(), g = requestAnimationFrame(V));
   }
   function E() {
-    x.value = !1, M !== void 0 && cancelAnimationFrame(M), M = void 0;
+    T.value = !1, g !== void 0 && cancelAnimationFrame(g), g = void 0;
   }
-  function U() {
-    V(), x.value && (M = requestAnimationFrame(U));
+  function V() {
+    b(), T.value && (g = requestAnimationFrame(V));
   }
-  function V(e) {
-    if (!x.value && e === void 0)
+  function b(e) {
+    if (!T.value && e === void 0)
       return;
     const o = performance.now(), r = e ?? (C ? o - C : 0);
-    C = o, r !== 0 && (f.value = W(
+    C = o, r !== 0 && (f.value = J(
       f.value + r,
       0,
-      w.value || Number.POSITIVE_INFINITY
-    ), w.value > 0 && f.value >= w.value && E());
+      m.value || Number.POSITIVE_INFINITY
+    ), m.value > 0 && f.value >= m.value && E());
   }
-  function K(e) {
-    f.value = W(e, 0, w.value || Number.POSITIVE_INFINITY);
+  function Z(e) {
+    f.value = J(e, 0, m.value || Number.POSITIVE_INFINITY);
   }
-  async function X(e) {
+  async function ee(e) {
     const o = v.get(e.id);
     if (o)
       return o;
-    const r = m.get(e.id);
+    const r = y.get(e.id);
     if (r)
       return r;
-    const c = Z(e);
-    m.set(e.id, c);
+    const c = te(e);
+    y.set(e.id, c);
     const l = await c;
-    return l && v.set(e.id, l), m.delete(e.id), l;
+    return l && v.set(e.id, l), y.delete(e.id), l;
   }
-  async function Z(e) {
-    if (e.segmentType === "frames" || e.segmentType === "image") {
+  async function te(e) {
+    if (e.segmentType === "frames" || e.segmentType === "sticker") {
       if (!e.url)
         return H(e.segmentType);
       if ("type" in e && e.type === "video") {
-        const r = await te(e);
+        const r = await ne(e);
         if (r)
           return r;
       }
-      const o = await ee(e.url);
+      const o = await re(e.url);
       return o ? new F(o) : H(e.segmentType, e.url);
     }
     e.segmentType !== "text" && (e.segmentType === "effect" || e.segmentType);
   }
-  async function ee(e) {
+  async function re(e) {
     const o = e.startsWith("data:"), r = /^https?:\/\//.test(e);
     if (!o && !r)
       try {
         await p.add(e);
         const c = await p.get(e);
         if (c instanceof HTMLImageElement)
-          return D.from(c);
+          return R.from(c);
       } catch {
       }
-    return await ae(e);
+    return await se(e);
   }
-  async function te(e) {
-    const o = y.get(e.id);
+  async function ne(e) {
+    const o = h.get(e.id);
     if (o)
       return o.sprite;
     let r;
     try {
-      await p.add(e.url), r = await oe(e.url);
+      await p.add(e.url), r = await ce(e.url);
     } catch {
       r = void 0;
     }
@@ -213,10 +213,10 @@ async function ke(t) {
       if (r)
         c = new _(r);
       else {
-        const T = await fetch(e.url);
-        if (!T.body)
+        const S = await fetch(e.url);
+        if (!S.body)
           return;
-        c = new _(T.body);
+        c = new _(S.body);
       }
     } catch {
       return;
@@ -227,46 +227,55 @@ async function ke(t) {
       c.destroy();
       return;
     }
-    const { width: l, height: I } = c.meta, d = document.createElement("canvas");
-    d.width = l || 1, d.height = I || 1;
-    const h = D.from(d), S = new F(h);
-    return y.set(e.id, { clip: c, canvas: d, texture: h, sprite: S, meta: { width: l, height: I } }), S;
+    const { width: l, height: x } = c.meta, d = document.createElement("canvas");
+    d.width = l || 1, d.height = x || 1;
+    const w = R.from(d), M = new F(w);
+    return h.set(e.id, { clip: c, canvas: d, texture: w, sprite: M, meta: { width: l, height: x } }), M;
   }
-  async function re(e, o) {
-    const r = y.get(e.id);
+  async function oe(e, o) {
+    const r = h.get(e.id);
     if (r)
       try {
-        const c = e.fromTime ?? 0, l = Math.max(0, o - e.startTime + c), I = Math.floor(l * 1e3), d = await r.clip.tick(I);
+        const c = e.fromTime ?? 0, l = Math.max(0, o - e.startTime + c), x = Math.floor(l * 1e3), d = await r.clip.tick(x);
         if (d.video) {
-          const h = r.canvas.getContext("2d");
-          h && (h.drawImage(d.video, 0, 0, r.canvas.width, r.canvas.height), ie(r.texture)), d.video.close();
+          const w = r.canvas.getContext("2d");
+          w && (w.drawImage(d.video, 0, 0, r.canvas.width, r.canvas.height), ue(r.texture)), d.video.close();
         }
       } catch (c) {
         console.warn("[renderer] update video frame failed", c);
       }
   }
-  function ne(e) {
+  function ae(e) {
     return e.segmentType === "frames" && e.type === "video" && typeof e.url == "string";
   }
-  async function oe(e) {
-    const o = t.resourceDir ?? De;
+  function ie(e, o) {
+    const r = z(e);
+    if (r <= 0)
+      return 0;
+    if (o < r)
+      return o;
+    const c = Math.max(1e3 / Math.max(e.fps || 30, 1), 1);
+    return Math.max(r - c, 0);
+  }
+  async function ce(e) {
+    const o = t.resourceDir ?? Ae;
     try {
-      const r = ve(`${o}/${e}`);
+      const r = me(`${o}/${e}`);
       if (await r.exists())
         return r;
     } catch {
       return;
     }
   }
-  function ae(e) {
+  function se(e) {
     return new Promise((o) => {
       const r = new Image();
-      r.crossOrigin = "anonymous", r.onload = () => o(D.from(r)), r.onerror = () => {
+      r.crossOrigin = "anonymous", r.onload = () => o(R.from(r)), r.onerror = () => {
         console.warn("[renderer] failed to load image", e), o(void 0);
       }, r.src = e;
     });
   }
-  function ie(e) {
+  function ue(e) {
     const o = e.source;
     if ("update" in o && typeof o.update == "function") {
       o.update();
@@ -274,23 +283,23 @@ async function ke(t) {
     }
     typeof e.update == "function" && e.update();
   }
-  function ce() {
-    E(), k.stop(), N(), s.destroy({ children: !0 }), v.clear(), m.clear(), g.clear(), t.app || u.destroy();
+  function fe() {
+    E(), N.stop(), $(), s.destroy({ children: !0 }), v.clear(), y.clear(), I.clear(), t.app || u.destroy();
   }
-  return t.autoPlay && $(), {
+  return t.autoPlay && U(), {
     app: u,
     layer: s,
     currentTime: f,
-    duration: w,
-    isPlaying: x,
-    play: $,
+    duration: m,
+    isPlaying: T,
+    play: U,
     pause: E,
-    tick: V,
-    seek: K,
-    destroy: ce
+    tick: b,
+    seek: Z,
+    destroy: fe
   };
 }
-function Re(t) {
+function Ee(t) {
   let n = !1, a = !1;
   return async () => {
     if (a) {
@@ -305,6 +314,6 @@ function Re(t) {
   };
 }
 export {
-  ke as createRenderer
+  $e as createRenderer
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/2d/index.ts","../src/helpers.ts","../src/index.ts"],"sourcesContent":["/// <reference types=\"vite/client\" />\nimport type { ApplicationOptions } from 'pixi.js'\nimport { Application } from 'pixi.js'\n\ndeclare global {\n\n  // eslint-disable-next-line vars-on-top\n  var __PIXI_APP__: Application\n}\n\nexport async function createApp(opts?: Partial<ApplicationOptions>) {\n  const app = new Application()\n\n  await app.init({ resizeTo: window, ...opts })\n\n  if (import.meta.env.DEV) {\n    globalThis.__PIXI_APP__ = app\n  }\n\n  return app\n}\n","import type { ITransform, IVideoProtocol, SegmentUnion } from '@video-editor/shared'\nimport type { PixiDisplayObject } from './types'\nimport { toRaw } from '@vue/reactivity'\nimport { Graphics, Sprite, Texture } from 'pixi.js'\n\nexport function collectResourceUrls(protocol: IVideoProtocol) {\n  const urls = new Set<string>()\n  for (const track of protocol.tracks) {\n    for (const segment of track.children) {\n      if (segment.url)\n        urls.add(segment.url)\n    }\n  }\n  return urls\n}\n\nexport function collectActiveSegments(protocol: IVideoProtocol, at: number) {\n  const active: { segment: SegmentUnion, trackIndex: number, childIndex: number }[] = []\n  protocol.tracks.forEach((track, trackIndex) => {\n    track.children.forEach((segment, childIndex) => {\n      if (segment.startTime <= at && at < segment.endTime)\n        active.push({ segment, trackIndex, childIndex })\n    })\n  })\n\n  return active.sort((a, b) => {\n    if (a.trackIndex === b.trackIndex)\n      return a.childIndex - b.childIndex\n    return a.trackIndex - b.trackIndex\n  })\n}\n\nexport function applyDisplayProps(display: PixiDisplayObject, segment: SegmentUnion, width: number, height: number) {\n  const opacity = readOpacity(segment)\n  // size\n  if (display instanceof Sprite) {\n    display.anchor.set(0.5)\n    display.width = width\n    display.height = height\n    display.x = width / 2\n    display.y = height / 2\n    const src = display.texture.source as { addEventListener?: (type: string, cb: () => void, opts?: AddEventListenerOptions) => void } | undefined\n    src?.addEventListener?.('error', () => {\n      // fallback to a colored rect if texture failed\n      display.texture = Texture.from(placeholderTexture(width, height))\n    }, { once: true })\n  }\n  else if (display instanceof Graphics) {\n    display.clear()\n    display\n      .rect(0, 0, width, height)\n      .fill({ color: stringToColor('url' in segment && typeof segment.url === 'string' ? segment.url : segment.segmentType), alpha: hasOpacity(segment) ? opacity : 0.35 })\n    display.pivot.set(width / 2, height / 2)\n    display.position.set(width / 2, height / 2)\n  }\n\n  display.alpha = opacity\n\n  // simple 2D transform\n  const transform = readTransform(segment)\n  if (transform) {\n    const [px, py] = transform.position ?? [0, 0]\n    const [sx, sy] = transform.scale ?? [1, 1]\n    const rotation = transform.rotation?.[2] ?? 0\n\n    display.position.set(width / 2 + (px * width) / 2, height / 2 - (py * height) / 2)\n    display.scale.set(sx, sy)\n    display.rotation = (rotation / 180) * Math.PI\n  }\n}\n\nexport function placeholder(key: string, url?: string) {\n  const g = new Graphics()\n  g.rect(0, 0, 10, 10).fill({ color: stringToColor(url ?? key), alpha: 1 })\n  return g\n}\n\nexport function placeholderTexture(width: number, height: number, color?: string) {\n  const svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${width}\" height=\"${height}\"><rect width=\"100%\" height=\"100%\" fill=\"${color ?? '#0f172a'}\" fill-opacity=\"0.8\"/></svg>`\n  return `data:image/svg+xml;base64,${btoa(svg)}`\n}\n\nexport function stringToColor(key: string) {\n  let hash = 0\n  for (let i = 0; i < key.length; i++)\n    hash = key.charCodeAt(i) + ((hash << 5) - hash)\n  return hash & 0x00FFFFFF\n}\n\nexport function computeDuration(protocol: IVideoProtocol) {\n  const endTimes = protocol.tracks.flatMap(track => track.children.map(seg => seg.endTime))\n  return endTimes.length ? Math.max(...endTimes) : 0\n}\n\nexport function clamp(num: number, min: number, max: number) {\n  return Math.min(Math.max(num, min), max)\n}\n\nexport function cloneProtocol(protocol: IVideoProtocol) {\n  const raw = toRaw(protocol) as IVideoProtocol\n  // use JSON clone to avoid structuredClone errors on proxies (e.g., Vue reactive)\n  return JSON.parse(JSON.stringify(raw)) as IVideoProtocol\n}\n\nfunction hasOpacity(segment: SegmentUnion): segment is SegmentUnion & { opacity?: number } {\n  return 'opacity' in segment\n}\n\nfunction readOpacity(segment: SegmentUnion) {\n  if (hasOpacity(segment) && typeof segment.opacity === 'number')\n    return segment.opacity\n  return 1\n}\n\nfunction hasTransform(segment: SegmentUnion): segment is SegmentUnion & { transform?: ITransform } {\n  return 'transform' in segment\n}\n\nfunction readTransform(segment: SegmentUnion) {\n  if (hasTransform(segment))\n    return segment.transform\n  return undefined\n}\n","import type { IVideoFramesSegment, IVideoProtocol, SegmentUnion } from '@video-editor/shared'\nimport type { ComputedRef, Ref, ShallowRef } from '@vue/reactivity'\nimport type { Application, ApplicationOptions } from 'pixi.js'\nimport type { MaybeRef, PixiDisplayObject } from './types'\nimport { createResourceManager, createValidator } from '@video-editor/protocol'\nimport {\n  computed,\n  effectScope,\n  isRef,\n  ref,\n  shallowRef,\n  unref,\n  watch,\n} from '@vue/reactivity'\nimport { MP4Clip } from '@webav/av-cliper'\nimport { file as opfsFile } from 'opfs-tools'\nimport { Container, Sprite, Texture } from 'pixi.js'\nimport { createApp as create2dApp } from './2d'\nimport {\n  applyDisplayProps,\n  clamp,\n  cloneProtocol,\n  collectActiveSegments,\n  collectResourceUrls,\n  computeDuration,\n  placeholder,\n} from './helpers'\n\nconst DEFAULT_RES_DIR = '/video-editor-res'\n\nexport interface RendererOptions {\n  protocol: MaybeRef<IVideoProtocol>\n  app?: Application\n  appOptions?: Partial<ApplicationOptions>\n  resourceDir?: string\n  autoPlay?: boolean\n}\n\nexport interface Renderer {\n  app: Application\n  layer: Container\n  currentTime: Ref<number>\n  duration: ComputedRef<number>\n  isPlaying: Ref<boolean>\n  play: () => void\n  pause: () => void\n  tick: (deltaMs?: number) => void\n  seek: (time: number) => void\n  destroy: () => void\n}\n\n/**\n * Create a renderer that reacts to protocol updates and drives playback state.\n * - Pass a reactive `protocol` (Ref/readonly/normal object)\n * - Call `play/pause/seek/tick` to drive the timeline\n * - Rendering updates when `protocol` or `currentTime` changes\n */\nexport async function createRenderer(opts: RendererOptions): Promise<Renderer> {\n  const validator = createValidator()\n  const protocolInput: Ref<IVideoProtocol> | ShallowRef<IVideoProtocol>\n    = isRef(opts.protocol) ? opts.protocol : shallowRef(opts.protocol)\n  const validatedProtocol: ShallowRef<IVideoProtocol> = shallowRef(\n    validator.verify(cloneProtocol(unref(protocolInput))),\n  )\n\n  const app = opts.app ?? await create2dApp(opts.appOptions)\n  const layer = new Container()\n  app.stage.addChild(layer)\n\n  const resourceManager = createResourceManager({ dir: opts.resourceDir })\n  const resourceWarmUp = new Set<string>()\n  const displayCache = new Map<string, PixiDisplayObject>()\n  const displayLoading = new Map<string, Promise<PixiDisplayObject | undefined>>()\n  const videoEntries = new Map<string, {\n    clip: MP4Clip\n    canvas: HTMLCanvasElement\n    texture: Texture\n    sprite: Sprite\n    meta?: { width: number, height: number }\n  }>()\n\n  const currentTime = ref(0)\n  const isPlaying = ref(false)\n  const duration = computed(() => computeDuration(validatedProtocol.value))\n\n  let rafId: number | undefined\n  let lastTickAt = 0\n\n  interface RenderTask {\n    app: Application\n    layer: Container\n    protocol: IVideoProtocol\n    at: number\n    getDisplay: (segment: SegmentUnion) => Promise<PixiDisplayObject | undefined>\n  }\n\n  async function renderScene(task: RenderTask) {\n    const { protocol, at, layer } = task\n    const active = collectActiveSegments(protocol, at)\n    const stageWidth = task.app.renderer.width\n    const stageHeight = task.app.renderer.height\n\n    const renders: (PixiDisplayObject | undefined)[] = []\n    for (const { segment } of active) {\n      const display = await task.getDisplay(segment)\n      if (!display)\n        continue\n      applyDisplayProps(display, segment, stageWidth, stageHeight)\n      if (isVideoSegment(segment))\n        await updateVideoFrame(segment, at)\n      renders.push(display)\n    }\n\n    layer.removeChildren()\n    const cleaned = renders.filter(Boolean) as PixiDisplayObject[]\n    if (cleaned.length)\n      layer.addChild(...cleaned)\n    task.app.render()\n  }\n\n  const queueRender = createRenderQueue(() => renderScene({\n    app,\n    layer,\n    protocol: validatedProtocol.value,\n    at: currentTime.value,\n    getDisplay: getDisplayForSegment,\n  }))\n\n  const scope = effectScope()\n  scope.run(() => {\n    // Sync external protocol mutations into a verified snapshot the renderer can rely on.\n    watch(\n      () => unref(protocolInput),\n      (protocol) => {\n        try {\n          validatedProtocol.value = validator.verify(cloneProtocol(protocol))\n        }\n        catch (err) {\n          console.error('[renderer] invalid protocol update', err)\n          return\n        }\n        clearDisplays()\n        warmUpResources(validatedProtocol.value)\n        cleanupCache(validatedProtocol.value)\n        clampCurrentTime()\n        queueRender()\n      },\n      { deep: true, immediate: true },\n    )\n\n    // React to time changes.\n    watch(currentTime, () => {\n      clampCurrentTime()\n      queueRender()\n    })\n\n    // Keep duration/currentTime in sync with protocol updates.\n    watch(duration, () => clampCurrentTime())\n  })\n\n  function clampCurrentTime() {\n    const nextDuration = duration.value\n    if (nextDuration <= 0)\n      currentTime.value = 0\n    else if (currentTime.value > nextDuration)\n      currentTime.value = nextDuration\n    else if (currentTime.value < 0)\n      currentTime.value = 0\n  }\n\n  function warmUpResources(protocol: IVideoProtocol) {\n    for (const url of collectResourceUrls(protocol)) {\n      if (resourceWarmUp.has(url))\n        continue\n\n      resourceWarmUp.add(url)\n      resourceManager.add(url).catch(() => {\n        // noop – render will fall back to Texture.from(url)\n      })\n    }\n  }\n\n  function cleanupCache(protocol: IVideoProtocol) {\n    const ids = new Set(protocol.tracks.flatMap(track => track.children.map(seg => seg.id)))\n    for (const [id, display] of displayCache) {\n      if (ids.has(id))\n        continue\n      display.destroy()\n      displayCache.delete(id)\n    }\n    for (const [id, entry] of videoEntries) {\n      if (ids.has(id))\n        continue\n      entry.clip.destroy()\n      videoEntries.delete(id)\n    }\n  }\n\n  function clearDisplays() {\n    layer.removeChildren()\n    for (const display of displayCache.values()) {\n      display.destroy()\n    }\n    displayCache.clear()\n    displayLoading.clear()\n    for (const { clip } of videoEntries.values())\n      clip.destroy()\n    videoEntries.clear()\n  }\n\n  function play() {\n    if (isPlaying.value)\n      return\n    isPlaying.value = true\n    lastTickAt = performance.now()\n    rafId = requestAnimationFrame(loop)\n  }\n\n  function pause() {\n    isPlaying.value = false\n    if (rafId !== undefined)\n      cancelAnimationFrame(rafId)\n    rafId = undefined\n  }\n\n  function loop() {\n    tick()\n    if (isPlaying.value)\n      rafId = requestAnimationFrame(loop)\n  }\n\n  function tick(deltaMs?: number) {\n    if (!isPlaying.value && deltaMs === undefined)\n      return\n\n    const now = performance.now()\n    const delta = deltaMs ?? (lastTickAt ? now - lastTickAt : 0)\n    lastTickAt = now\n\n    if (delta === 0)\n      return\n\n    currentTime.value = clamp(\n      currentTime.value + delta,\n      0,\n      duration.value || Number.POSITIVE_INFINITY,\n    )\n\n    if (duration.value > 0 && currentTime.value >= duration.value)\n      pause()\n\n    // render happens via watch on currentTime\n  }\n\n  function seek(time: number) {\n    currentTime.value = clamp(time, 0, duration.value || Number.POSITIVE_INFINITY)\n  }\n\n  async function getDisplayForSegment(segment: SegmentUnion) {\n    const cached = displayCache.get(segment.id)\n    if (cached)\n      return cached\n\n    const loading = displayLoading.get(segment.id)\n    if (loading)\n      return loading\n\n    const promise = loadDisplay(segment)\n    displayLoading.set(segment.id, promise)\n\n    const display = await promise\n    if (display)\n      displayCache.set(segment.id, display)\n\n    displayLoading.delete(segment.id)\n    return display\n  }\n\n  async function loadDisplay(segment: SegmentUnion): Promise<PixiDisplayObject | undefined> {\n    // prioritize static resources via protocol resource manager\n    if (segment.segmentType === 'frames' || segment.segmentType === 'image') {\n      if (!segment.url)\n        return placeholder(segment.segmentType)\n\n      if ('type' in segment && segment.type === 'video') {\n        const sprite = await loadVideoSprite(segment)\n        if (sprite)\n          return sprite\n      }\n\n      const texture = await loadTexture(segment.url)\n      if (texture)\n        return new Sprite(texture)\n      return placeholder(segment.segmentType, segment.url)\n    }\n\n    if (segment.segmentType === 'text')\n      return undefined\n\n    if (segment.segmentType === 'effect' || segment.segmentType === 'filter')\n      return undefined\n\n    // audio segments do not render visuals\n    return undefined\n  }\n\n  async function loadTexture(url: string) {\n    const isDataUrl = url.startsWith('data:')\n    const isHttp = /^https?:\\/\\//.test(url)\n\n    if (!isDataUrl && !isHttp) {\n      try {\n        await resourceManager.add(url)\n        const res = await resourceManager.get(url)\n        if (res instanceof HTMLImageElement)\n          return Texture.from(res)\n      }\n      catch {\n        // fall through to direct image load\n      }\n    }\n\n    // load image directly to avoid invalid path issues with http/data URLs\n    return await loadImageTexture(url)\n  }\n\n  async function loadVideoSprite(segment: SegmentUnion & { type: 'video', url: string }): Promise<Sprite | undefined> {\n    const existing = videoEntries.get(segment.id)\n    if (existing)\n      return existing.sprite\n\n    let file\n    try {\n      await resourceManager.add(segment.url)\n      file = await getOpfsFile(segment.url)\n    }\n    catch {\n      file = undefined\n    }\n    let clip: MP4Clip\n    try {\n      if (file) {\n        clip = new MP4Clip(file)\n      }\n      else {\n        const res = await fetch(segment.url)\n        if (!res.body)\n          return undefined\n        clip = new MP4Clip(res.body)\n      }\n    }\n    catch {\n      return undefined\n    }\n\n    try {\n      await clip.ready\n    }\n    catch {\n      clip.destroy()\n      return undefined\n    }\n\n    const { width, height } = clip.meta\n    const canvas = document.createElement('canvas')\n    canvas.width = width || 1\n    canvas.height = height || 1\n    const texture = Texture.from(canvas)\n    const sprite = new Sprite(texture)\n\n    videoEntries.set(segment.id, { clip, canvas, texture, sprite, meta: { width, height } })\n    return sprite\n  }\n\n  async function updateVideoFrame(segment: IVideoFramesSegment, at: number) {\n    const entry = videoEntries.get(segment.id)\n    if (!entry)\n      return\n\n    try {\n      const offsetMs = segment.fromTime ?? 0\n      const relativeMs = Math.max(0, at - segment.startTime + offsetMs)\n      const relativeUs = Math.floor(relativeMs * 1000)\n      const res = await entry.clip.tick(relativeUs)\n      if (res.video) {\n        const ctx = entry.canvas.getContext('2d')\n        if (ctx) {\n          ctx.drawImage(res.video, 0, 0, entry.canvas.width, entry.canvas.height)\n          refreshCanvasTexture(entry.texture)\n        }\n        res.video.close()\n      }\n    }\n    catch (err) {\n      console.warn('[renderer] update video frame failed', err)\n    }\n  }\n\n  function isVideoSegment(segment: SegmentUnion): segment is IVideoFramesSegment {\n    return segment.segmentType === 'frames'\n      && segment.type === 'video'\n      && typeof segment.url === 'string'\n  }\n\n  async function getOpfsFile(url: string) {\n    const dir = opts.resourceDir ?? DEFAULT_RES_DIR\n    try {\n      const file = opfsFile(`${dir}/${url}`)\n      if (await file.exists())\n        return file\n    }\n    catch {\n      return undefined\n    }\n    return undefined\n  }\n\n  function loadImageTexture(url: string): Promise<Texture | undefined> {\n    return new Promise((resolve) => {\n      const img = new Image()\n      img.crossOrigin = 'anonymous'\n      img.onload = () => resolve(Texture.from(img))\n      img.onerror = () => {\n        console.warn('[renderer] failed to load image', url)\n        resolve(undefined)\n      }\n      img.src = url\n    })\n  }\n\n  function refreshCanvasTexture(texture: Texture) {\n    const source = texture.source\n    if ('update' in source && typeof source.update === 'function') {\n      source.update()\n      return\n    }\n\n    if (typeof texture.update === 'function')\n      texture.update()\n  }\n\n  function destroy() {\n    pause()\n    scope.stop()\n    clearDisplays()\n    layer.destroy({ children: true })\n    displayCache.clear()\n    displayLoading.clear()\n    resourceWarmUp.clear()\n    if (!opts.app)\n      app.destroy()\n  }\n\n  if (opts.autoPlay)\n    play()\n\n  return {\n    app,\n    layer,\n    currentTime,\n    duration,\n    isPlaying,\n    play,\n    pause,\n    tick,\n    seek,\n    destroy,\n  }\n}\n\nfunction createRenderQueue(job: () => Promise<void> | void) {\n  let queued = false\n  let running = false\n\n  const run = async () => {\n    if (running) {\n      queued = true\n      return\n    }\n    running = true\n    do {\n      queued = false\n      await job()\n    } while (queued)\n    running = false\n  }\n\n  return run\n}\n"],"names":["createApp","opts","app","Application","collectResourceUrls","protocol","urls","track","segment","collectActiveSegments","at","active","trackIndex","childIndex","a","b","applyDisplayProps","display","width","height","opacity","readOpacity","Sprite","Texture","placeholderTexture","Graphics","stringToColor","hasOpacity","transform","readTransform","px","py","sx","sy","rotation","placeholder","key","url","g","color","svg","hash","i","computeDuration","endTimes","seg","clamp","num","min","max","cloneProtocol","raw","toRaw","hasTransform","DEFAULT_RES_DIR","createRenderer","validator","createValidator","protocolInput","isRef","shallowRef","validatedProtocol","unref","create2dApp","layer","Container","resourceManager","createResourceManager","resourceWarmUp","displayCache","displayLoading","videoEntries","currentTime","ref","isPlaying","duration","computed","rafId","lastTickAt","renderScene","task","stageWidth","stageHeight","renders","isVideoSegment","updateVideoFrame","cleaned","queueRender","createRenderQueue","getDisplayForSegment","scope","effectScope","watch","err","clearDisplays","warmUpResources","cleanupCache","clampCurrentTime","nextDuration","ids","id","entry","clip","play","loop","pause","tick","deltaMs","now","delta","seek","time","cached","loading","promise","loadDisplay","sprite","loadVideoSprite","texture","loadTexture","isDataUrl","isHttp","res","loadImageTexture","existing","file","getOpfsFile","MP4Clip","canvas","offsetMs","relativeMs","relativeUs","ctx","refreshCanvasTexture","dir","opfsFile","resolve","img","source","destroy","job","queued","running"],"mappings":";;;;;AAUA,eAAsBA,GAAUC,GAAoC;AAClE,QAAMC,IAAM,IAAIC,GAAA;AAEhB,eAAMD,EAAI,KAAK,EAAE,UAAU,QAAQ,GAAGD,GAAM,GAMrCC;AACT;ACfO,SAASE,GAAoBC,GAA0B;AAC5D,QAAMC,wBAAW,IAAA;AACjB,aAAWC,KAASF,EAAS;AAC3B,eAAWG,KAAWD,EAAM;AAC1B,MAAIC,EAAQ,OACVF,EAAK,IAAIE,EAAQ,GAAG;AAG1B,SAAOF;AACT;AAEO,SAASG,GAAsBJ,GAA0BK,GAAY;AAC1E,QAAMC,IAA8E,CAAA;AACpF,SAAAN,EAAS,OAAO,QAAQ,CAACE,GAAOK,MAAe;AAC7C,IAAAL,EAAM,SAAS,QAAQ,CAACC,GAASK,MAAe;AAC9C,MAAIL,EAAQ,aAAaE,KAAMA,IAAKF,EAAQ,WAC1CG,EAAO,KAAK,EAAE,SAAAH,GAAS,YAAAI,GAAY,YAAAC,GAAY;AAAA,IACnD,CAAC;AAAA,EACH,CAAC,GAEMF,EAAO,KAAK,CAACG,GAAGC,MACjBD,EAAE,eAAeC,EAAE,aACdD,EAAE,aAAaC,EAAE,aACnBD,EAAE,aAAaC,EAAE,UACzB;AACH;AAEO,SAASC,GAAkBC,GAA4BT,GAAuBU,GAAeC,GAAgB;AAClH,QAAMC,IAAUC,GAAYb,CAAO;AAEnC,EAAIS,aAAmBK,KACrBL,EAAQ,OAAO,IAAI,GAAG,GACtBA,EAAQ,QAAQC,GAChBD,EAAQ,SAASE,GACjBF,EAAQ,IAAIC,IAAQ,GACpBD,EAAQ,IAAIE,IAAS,GACTF,EAAQ,QAAQ,QACvB,mBAAmB,SAAS,MAAM;AAErC,IAAAA,EAAQ,UAAUM,EAAQ,KAAKC,GAAmBN,GAAOC,CAAM,CAAC;AAAA,EAClE,GAAG,EAAE,MAAM,IAAM,KAEVF,aAAmBQ,MAC1BR,EAAQ,MAAA,GACRA,EACG,KAAK,GAAG,GAAGC,GAAOC,CAAM,EACxB,KAAK,EAAE,OAAOO,EAAc,SAASlB,KAAW,OAAOA,EAAQ,OAAQ,WAAWA,EAAQ,MAAMA,EAAQ,WAAW,GAAG,OAAOmB,EAAWnB,CAAO,IAAIY,IAAU,KAAA,CAAM,GACtKH,EAAQ,MAAM,IAAIC,IAAQ,GAAGC,IAAS,CAAC,GACvCF,EAAQ,SAAS,IAAIC,IAAQ,GAAGC,IAAS,CAAC,IAG5CF,EAAQ,QAAQG;AAGhB,QAAMQ,IAAYC,GAAcrB,CAAO;AACvC,MAAIoB,GAAW;AACb,UAAM,CAACE,GAAIC,CAAE,IAAIH,EAAU,YAAY,CAAC,GAAG,CAAC,GACtC,CAACI,GAAIC,CAAE,IAAIL,EAAU,SAAS,CAAC,GAAG,CAAC,GACnCM,IAAWN,EAAU,WAAW,CAAC,KAAK;AAE5C,IAAAX,EAAQ,SAAS,IAAIC,IAAQ,IAAKY,IAAKZ,IAAS,GAAGC,IAAS,IAAKY,IAAKZ,IAAU,CAAC,GACjFF,EAAQ,MAAM,IAAIe,GAAIC,CAAE,GACxBhB,EAAQ,WAAYiB,IAAW,MAAO,KAAK;AAAA,EAC7C;AACF;AAEO,SAASC,EAAYC,GAAaC,GAAc;AACrD,QAAMC,IAAI,IAAIb,EAAA;AACd,SAAAa,EAAE,KAAK,GAAG,GAAG,IAAI,EAAE,EAAE,KAAK,EAAE,OAAOZ,EAAcW,KAAOD,CAAG,GAAG,OAAO,GAAG,GACjEE;AACT;AAEO,SAASd,GAAmBN,GAAeC,GAAgBoB,GAAgB;AAChF,QAAMC,IAAM,kDAAkDtB,CAAK,aAAaC,CAAM;AACtF,SAAO,6BAA6B,KAAKqB,CAAG,CAAC;AAC/C;AAEO,SAASd,EAAcU,GAAa;AACzC,MAAIK,IAAO;AACX,WAASC,IAAI,GAAGA,IAAIN,EAAI,QAAQM;AAC9B,IAAAD,IAAOL,EAAI,WAAWM,CAAC,MAAMD,KAAQ,KAAKA;AAC5C,SAAOA,IAAO;AAChB;AAEO,SAASE,GAAgBtC,GAA0B;AACxD,QAAMuC,IAAWvC,EAAS,OAAO,QAAQ,CAAAE,MAASA,EAAM,SAAS,IAAI,CAAAsC,MAAOA,EAAI,OAAO,CAAC;AACxF,SAAOD,EAAS,SAAS,KAAK,IAAI,GAAGA,CAAQ,IAAI;AACnD;AAEO,SAASE,EAAMC,GAAaC,GAAaC,GAAa;AAC3D,SAAO,KAAK,IAAI,KAAK,IAAIF,GAAKC,CAAG,GAAGC,CAAG;AACzC;AAEO,SAASC,EAAc7C,GAA0B;AACtD,QAAM8C,IAAMC,GAAM/C,CAAQ;AAE1B,SAAO,KAAK,MAAM,KAAK,UAAU8C,CAAG,CAAC;AACvC;AAEA,SAASxB,EAAWnB,GAAuE;AACzF,SAAO,aAAaA;AACtB;AAEA,SAASa,GAAYb,GAAuB;AAC1C,SAAImB,EAAWnB,CAAO,KAAK,OAAOA,EAAQ,WAAY,WAC7CA,EAAQ,UACV;AACT;AAEA,SAAS6C,GAAa7C,GAA6E;AACjG,SAAO,eAAeA;AACxB;AAEA,SAASqB,GAAcrB,GAAuB;AAC5C,MAAI6C,GAAa7C,CAAO;AACtB,WAAOA,EAAQ;AAEnB;AC9FA,MAAM8C,KAAkB;AA6BxB,eAAsBC,GAAetD,GAA0C;AAC7E,QAAMuD,IAAYC,GAAA,GACZC,IACFC,GAAM1D,EAAK,QAAQ,IAAIA,EAAK,WAAW2D,EAAW3D,EAAK,QAAQ,GAC7D4D,IAAgDD;AAAA,IACpDJ,EAAU,OAAON,EAAcY,EAAMJ,CAAa,CAAC,CAAC;AAAA,EAAA,GAGhDxD,IAAMD,EAAK,OAAO,MAAM8D,GAAY9D,EAAK,UAAU,GACnD+D,IAAQ,IAAIC,GAAA;AAClB,EAAA/D,EAAI,MAAM,SAAS8D,CAAK;AAExB,QAAME,IAAkBC,GAAsB,EAAE,KAAKlE,EAAK,aAAa,GACjEmE,wBAAqB,IAAA,GACrBC,wBAAmB,IAAA,GACnBC,wBAAqB,IAAA,GACrBC,wBAAmB,IAAA,GAQnBC,IAAcC,EAAI,CAAC,GACnBC,IAAYD,EAAI,EAAK,GACrBE,IAAWC,GAAS,MAAMjC,GAAgBkB,EAAkB,KAAK,CAAC;AAExE,MAAIgB,GACAC,IAAa;AAUjB,iBAAeC,EAAYC,GAAkB;AAC3C,UAAM,EAAE,UAAA3E,GAAU,IAAAK,GAAI,OAAAsD,MAAUgB,GAC1BrE,IAASF,GAAsBJ,GAAUK,CAAE,GAC3CuE,IAAaD,EAAK,IAAI,SAAS,OAC/BE,IAAcF,EAAK,IAAI,SAAS,QAEhCG,IAA6C,CAAA;AACnD,eAAW,EAAE,SAAA3E,EAAA,KAAaG,GAAQ;AAChC,YAAMM,IAAU,MAAM+D,EAAK,WAAWxE,CAAO;AAC7C,MAAKS,MAELD,GAAkBC,GAAST,GAASyE,GAAYC,CAAW,GACvDE,GAAe5E,CAAO,KACxB,MAAM6E,GAAiB7E,GAASE,CAAE,GACpCyE,EAAQ,KAAKlE,CAAO;AAAA,IACtB;AAEA+C,IAAAA,EAAM,eAAA;AACN,UAAMsB,IAAUH,EAAQ,OAAO,OAAO;AACtC,IAAIG,EAAQ,UACVtB,EAAM,SAAS,GAAGsB,CAAO,GAC3BN,EAAK,IAAI,OAAA;AAAA,EACX;AAEA,QAAMO,IAAcC,GAAkB,MAAMT,EAAY;AAAA,IACtD,KAAA7E;AAAA,IACA,OAAA8D;AAAA,IACA,UAAUH,EAAkB;AAAA,IAC5B,IAAIW,EAAY;AAAA,IAChB,YAAYiB;AAAA,EAAA,CACb,CAAC,GAEIC,IAAQC,GAAA;AACd,EAAAD,EAAM,IAAI,MAAM;AAEd,IAAAE;AAAA,MACE,MAAM9B,EAAMJ,CAAa;AAAA,MACzB,CAACrD,MAAa;AACZ,YAAI;AACF,UAAAwD,EAAkB,QAAQL,EAAU,OAAON,EAAc7C,CAAQ,CAAC;AAAA,QACpE,SACOwF,GAAK;AACV,kBAAQ,MAAM,sCAAsCA,CAAG;AACvD;AAAA,QACF;AACA,QAAAC,EAAA,GACAC,EAAgBlC,EAAkB,KAAK,GACvCmC,EAAanC,EAAkB,KAAK,GACpCoC,EAAA,GACAV,EAAA;AAAA,MACF;AAAA,MACA,EAAE,MAAM,IAAM,WAAW,GAAA;AAAA,IAAK,GAIhCK,EAAMpB,GAAa,MAAM;AACvB,MAAAyB,EAAA,GACAV,EAAA;AAAA,IACF,CAAC,GAGDK,EAAMjB,GAAU,MAAMsB,GAAkB;AAAA,EAC1C,CAAC;AAED,WAASA,IAAmB;AAC1B,UAAMC,IAAevB,EAAS;AAC9B,IAAIuB,KAAgB,IAClB1B,EAAY,QAAQ,IACbA,EAAY,QAAQ0B,IAC3B1B,EAAY,QAAQ0B,IACb1B,EAAY,QAAQ,MAC3BA,EAAY,QAAQ;AAAA,EACxB;AAEA,WAASuB,EAAgB1F,GAA0B;AACjD,eAAWgC,KAAOjC,GAAoBC,CAAQ;AAC5C,MAAI+D,EAAe,IAAI/B,CAAG,MAG1B+B,EAAe,IAAI/B,CAAG,GACtB6B,EAAgB,IAAI7B,CAAG,EAAE,MAAM,MAAM;AAAA,MAErC,CAAC;AAAA,EAEL;AAEA,WAAS2D,EAAa3F,GAA0B;AAC9C,UAAM8F,IAAM,IAAI,IAAI9F,EAAS,OAAO,QAAQ,CAAAE,MAASA,EAAM,SAAS,IAAI,CAAAsC,MAAOA,EAAI,EAAE,CAAC,CAAC;AACvF,eAAW,CAACuD,GAAInF,CAAO,KAAKoD;AAC1B,MAAI8B,EAAI,IAAIC,CAAE,MAEdnF,EAAQ,QAAA,GACRoD,EAAa,OAAO+B,CAAE;AAExB,eAAW,CAACA,GAAIC,CAAK,KAAK9B;AACxB,MAAI4B,EAAI,IAAIC,CAAE,MAEdC,EAAM,KAAK,QAAA,GACX9B,EAAa,OAAO6B,CAAE;AAAA,EAE1B;AAEA,WAASN,IAAgB;AACvB,IAAA9B,EAAM,eAAA;AACN,eAAW/C,KAAWoD,EAAa;AACjC,MAAApD,EAAQ,QAAA;AAEV,IAAAoD,EAAa,MAAA,GACbC,EAAe,MAAA;AACf,eAAW,EAAE,MAAAgC,OAAU/B,EAAa,OAAA;AAClC,MAAA+B,EAAK,QAAA;AACP,IAAA/B,EAAa,MAAA;AAAA,EACf;AAEA,WAASgC,IAAO;AACd,IAAI7B,EAAU,UAEdA,EAAU,QAAQ,IAClBI,IAAa,YAAY,IAAA,GACzBD,IAAQ,sBAAsB2B,CAAI;AAAA,EACpC;AAEA,WAASC,IAAQ;AACf,IAAA/B,EAAU,QAAQ,IACdG,MAAU,UACZ,qBAAqBA,CAAK,GAC5BA,IAAQ;AAAA,EACV;AAEA,WAAS2B,IAAO;AACd,IAAAE,EAAA,GACIhC,EAAU,UACZG,IAAQ,sBAAsB2B,CAAI;AAAA,EACtC;AAEA,WAASE,EAAKC,GAAkB;AAC9B,QAAI,CAACjC,EAAU,SAASiC,MAAY;AAClC;AAEF,UAAMC,IAAM,YAAY,IAAA,GAClBC,IAAQF,MAAY7B,IAAa8B,IAAM9B,IAAa;AAG1D,IAFAA,IAAa8B,GAETC,MAAU,MAGdrC,EAAY,QAAQ1B;AAAA,MAClB0B,EAAY,QAAQqC;AAAA,MACpB;AAAA,MACAlC,EAAS,SAAS,OAAO;AAAA,IAAA,GAGvBA,EAAS,QAAQ,KAAKH,EAAY,SAASG,EAAS,SACtD8B,EAAA;AAAA,EAGJ;AAEA,WAASK,EAAKC,GAAc;AAC1B,IAAAvC,EAAY,QAAQ1B,EAAMiE,GAAM,GAAGpC,EAAS,SAAS,OAAO,iBAAiB;AAAA,EAC/E;AAEA,iBAAec,EAAqBjF,GAAuB;AACzD,UAAMwG,IAAS3C,EAAa,IAAI7D,EAAQ,EAAE;AAC1C,QAAIwG;AACF,aAAOA;AAET,UAAMC,IAAU3C,EAAe,IAAI9D,EAAQ,EAAE;AAC7C,QAAIyG;AACF,aAAOA;AAET,UAAMC,IAAUC,EAAY3G,CAAO;AACnC,IAAA8D,EAAe,IAAI9D,EAAQ,IAAI0G,CAAO;AAEtC,UAAMjG,IAAU,MAAMiG;AACtB,WAAIjG,KACFoD,EAAa,IAAI7D,EAAQ,IAAIS,CAAO,GAEtCqD,EAAe,OAAO9D,EAAQ,EAAE,GACzBS;AAAA,EACT;AAEA,iBAAekG,EAAY3G,GAA+D;AAExF,QAAIA,EAAQ,gBAAgB,YAAYA,EAAQ,gBAAgB,SAAS;AACvE,UAAI,CAACA,EAAQ;AACX,eAAO2B,EAAY3B,EAAQ,WAAW;AAExC,UAAI,UAAUA,KAAWA,EAAQ,SAAS,SAAS;AACjD,cAAM4G,IAAS,MAAMC,GAAgB7G,CAAO;AAC5C,YAAI4G;AACF,iBAAOA;AAAA,MACX;AAEA,YAAME,IAAU,MAAMC,GAAY/G,EAAQ,GAAG;AAC7C,aAAI8G,IACK,IAAIhG,EAAOgG,CAAO,IACpBnF,EAAY3B,EAAQ,aAAaA,EAAQ,GAAG;AAAA,IACrD;AAEA,IAAIA,EAAQ,gBAAgB,WAGxBA,EAAQ,gBAAgB,YAAYA,EAAQ;AAAA,EAKlD;AAEA,iBAAe+G,GAAYlF,GAAa;AACtC,UAAMmF,IAAYnF,EAAI,WAAW,OAAO,GAClCoF,IAAS,eAAe,KAAKpF,CAAG;AAEtC,QAAI,CAACmF,KAAa,CAACC;AACjB,UAAI;AACF,cAAMvD,EAAgB,IAAI7B,CAAG;AAC7B,cAAMqF,IAAM,MAAMxD,EAAgB,IAAI7B,CAAG;AACzC,YAAIqF,aAAe;AACjB,iBAAOnG,EAAQ,KAAKmG,CAAG;AAAA,MAC3B,QACM;AAAA,MAEN;AAIF,WAAO,MAAMC,GAAiBtF,CAAG;AAAA,EACnC;AAEA,iBAAegF,GAAgB7G,GAAqF;AAClH,UAAMoH,IAAWrD,EAAa,IAAI/D,EAAQ,EAAE;AAC5C,QAAIoH;AACF,aAAOA,EAAS;AAElB,QAAIC;AACJ,QAAI;AACF,YAAM3D,EAAgB,IAAI1D,EAAQ,GAAG,GACrCqH,IAAO,MAAMC,GAAYtH,EAAQ,GAAG;AAAA,IACtC,QACM;AACJ,MAAAqH,IAAO;AAAA,IACT;AACA,QAAIvB;AACJ,QAAI;AACF,UAAIuB;AACF,QAAAvB,IAAO,IAAIyB,EAAQF,CAAI;AAAA,WAEpB;AACH,cAAMH,IAAM,MAAM,MAAMlH,EAAQ,GAAG;AACnC,YAAI,CAACkH,EAAI;AACP;AACF,QAAApB,IAAO,IAAIyB,EAAQL,EAAI,IAAI;AAAA,MAC7B;AAAA,IACF,QACM;AACJ;AAAA,IACF;AAEA,QAAI;AACF,YAAMpB,EAAK;AAAA,IACb,QACM;AACJ,MAAAA,EAAK,QAAA;AACL;AAAA,IACF;AAEA,UAAM,EAAE,OAAApF,GAAO,QAAAC,EAAA,IAAWmF,EAAK,MACzB0B,IAAS,SAAS,cAAc,QAAQ;AAC9C,IAAAA,EAAO,QAAQ9G,KAAS,GACxB8G,EAAO,SAAS7G,KAAU;AAC1B,UAAMmG,IAAU/F,EAAQ,KAAKyG,CAAM,GAC7BZ,IAAS,IAAI9F,EAAOgG,CAAO;AAEjC,WAAA/C,EAAa,IAAI/D,EAAQ,IAAI,EAAE,MAAA8F,GAAM,QAAA0B,GAAQ,SAAAV,GAAS,QAAAF,GAAQ,MAAM,EAAE,OAAAlG,GAAO,QAAAC,EAAA,GAAU,GAChFiG;AAAA,EACT;AAEA,iBAAe/B,GAAiB7E,GAA8BE,GAAY;AACxE,UAAM2F,IAAQ9B,EAAa,IAAI/D,EAAQ,EAAE;AACzC,QAAK6F;AAGL,UAAI;AACF,cAAM4B,IAAWzH,EAAQ,YAAY,GAC/B0H,IAAa,KAAK,IAAI,GAAGxH,IAAKF,EAAQ,YAAYyH,CAAQ,GAC1DE,IAAa,KAAK,MAAMD,IAAa,GAAI,GACzCR,IAAM,MAAMrB,EAAM,KAAK,KAAK8B,CAAU;AAC5C,YAAIT,EAAI,OAAO;AACb,gBAAMU,IAAM/B,EAAM,OAAO,WAAW,IAAI;AACxC,UAAI+B,MACFA,EAAI,UAAUV,EAAI,OAAO,GAAG,GAAGrB,EAAM,OAAO,OAAOA,EAAM,OAAO,MAAM,GACtEgC,GAAqBhC,EAAM,OAAO,IAEpCqB,EAAI,MAAM,MAAA;AAAA,QACZ;AAAA,MACF,SACO7B,GAAK;AACV,gBAAQ,KAAK,wCAAwCA,CAAG;AAAA,MAC1D;AAAA,EACF;AAEA,WAAST,GAAe5E,GAAuD;AAC7E,WAAOA,EAAQ,gBAAgB,YAC1BA,EAAQ,SAAS,WACjB,OAAOA,EAAQ,OAAQ;AAAA,EAC9B;AAEA,iBAAesH,GAAYzF,GAAa;AACtC,UAAMiG,IAAMrI,EAAK,eAAeqD;AAChC,QAAI;AACF,YAAMuE,IAAOU,GAAS,GAAGD,CAAG,IAAIjG,CAAG,EAAE;AACrC,UAAI,MAAMwF,EAAK,OAAA;AACb,eAAOA;AAAAA,IACX,QACM;AACJ;AAAA,IACF;AAAA,EAEF;AAEA,WAASF,GAAiBtF,GAA2C;AACnE,WAAO,IAAI,QAAQ,CAACmG,MAAY;AAC9B,YAAMC,IAAM,IAAI,MAAA;AAChB,MAAAA,EAAI,cAAc,aAClBA,EAAI,SAAS,MAAMD,EAAQjH,EAAQ,KAAKkH,CAAG,CAAC,GAC5CA,EAAI,UAAU,MAAM;AAClB,gBAAQ,KAAK,mCAAmCpG,CAAG,GACnDmG,EAAQ,MAAS;AAAA,MACnB,GACAC,EAAI,MAAMpG;AAAA,IACZ,CAAC;AAAA,EACH;AAEA,WAASgG,GAAqBf,GAAkB;AAC9C,UAAMoB,IAASpB,EAAQ;AACvB,QAAI,YAAYoB,KAAU,OAAOA,EAAO,UAAW,YAAY;AAC7D,MAAAA,EAAO,OAAA;AACP;AAAA,IACF;AAEA,IAAI,OAAOpB,EAAQ,UAAW,cAC5BA,EAAQ,OAAA;AAAA,EACZ;AAEA,WAASqB,KAAU;AACjB,IAAAlC,EAAA,GACAf,EAAM,KAAA,GACNI,EAAA,GACA9B,EAAM,QAAQ,EAAE,UAAU,GAAA,CAAM,GAChCK,EAAa,MAAA,GACbC,EAAe,MAAA,GACfF,EAAe,MAAA,GACVnE,EAAK,OACRC,EAAI,QAAA;AAAA,EACR;AAEA,SAAID,EAAK,YACPsG,EAAA,GAEK;AAAA,IACL,KAAArG;AAAA,IACA,OAAA8D;AAAA,IACA,aAAAQ;AAAA,IACA,UAAAG;AAAA,IACA,WAAAD;AAAA,IACA,MAAA6B;AAAA,IACA,OAAAE;AAAA,IACA,MAAAC;AAAA,IACA,MAAAI;AAAA,IACA,SAAA6B;AAAA,EAAA;AAEJ;AAEA,SAASnD,GAAkBoD,GAAiC;AAC1D,MAAIC,IAAS,IACTC,IAAU;AAed,SAbY,YAAY;AACtB,QAAIA,GAAS;AACX,MAAAD,IAAS;AACT;AAAA,IACF;AACA,IAAAC,IAAU;AACV;AACE,MAAAD,IAAS,IACT,MAAMD,EAAA;AAAA,WACCC;AACT,IAAAC,IAAU;AAAA,EACZ;AAGF;"}
+{"version":3,"file":"index.js","sources":["../src/2d/index.ts","../src/helpers.ts","../src/index.ts"],"sourcesContent":["/// <reference types=\"vite/client\" />\nimport type { ApplicationOptions } from 'pixi.js'\nimport { Application } from 'pixi.js'\n\ndeclare global {\n\n  // eslint-disable-next-line vars-on-top\n  var __PIXI_APP__: Application\n}\n\nexport async function createApp(opts?: Partial<ApplicationOptions>) {\n  const app = new Application()\n\n  await app.init({ resizeTo: window, ...opts })\n\n  if (import.meta.env.DEV) {\n    globalThis.__PIXI_APP__ = app\n  }\n\n  return app\n}\n","import type { ITransform, IVideoProtocol, SegmentUnion } from '@video-editor/shared'\nimport type { PixiDisplayObject } from './types'\nimport { toRaw } from '@vue/reactivity'\nimport { Graphics, Sprite, Texture } from 'pixi.js'\n\nexport function collectResourceUrls(protocol: IVideoProtocol) {\n  const urls = new Set<string>()\n  for (const track of protocol.tracks) {\n    for (const segment of track.children) {\n      if (segment.url)\n        urls.add(segment.url)\n    }\n  }\n  return urls\n}\n\nexport function collectActiveSegments(protocol: IVideoProtocol, at: number) {\n  const active: { segment: SegmentUnion, trackIndex: number, childIndex: number }[] = []\n  protocol.tracks.forEach((track, trackIndex) => {\n    track.children.forEach((segment, childIndex) => {\n      if (segment.startTime <= at && at < segment.endTime)\n        active.push({ segment, trackIndex, childIndex })\n    })\n  })\n\n  return active.sort((a, b) => {\n    if (a.trackIndex === b.trackIndex)\n      return a.childIndex - b.childIndex\n    return a.trackIndex - b.trackIndex\n  })\n}\n\nexport function applyDisplayProps(display: PixiDisplayObject, segment: SegmentUnion, width: number, height: number) {\n  const opacity = readOpacity(segment)\n  // size\n  if (display instanceof Sprite) {\n    display.anchor.set(0.5)\n    display.width = width\n    display.height = height\n    display.x = width / 2\n    display.y = height / 2\n    const src = display.texture.source as { addEventListener?: (type: string, cb: () => void, opts?: AddEventListenerOptions) => void } | undefined\n    src?.addEventListener?.('error', () => {\n      // fallback to a colored rect if texture failed\n      display.texture = Texture.from(placeholderTexture(width, height))\n    }, { once: true })\n  }\n  else if (display instanceof Graphics) {\n    display.clear()\n    display\n      .rect(0, 0, width, height)\n      .fill({ color: stringToColor('url' in segment && typeof segment.url === 'string' ? segment.url : segment.segmentType), alpha: hasOpacity(segment) ? opacity : 0.35 })\n    display.pivot.set(width / 2, height / 2)\n    display.position.set(width / 2, height / 2)\n  }\n\n  display.alpha = opacity\n\n  // simple 2D transform\n  const transform = readTransform(segment)\n  if (transform) {\n    const [px, py] = transform.position ?? [0, 0]\n    const [sx, sy] = transform.scale ?? [1, 1]\n    const rotation = transform.rotation?.[2] ?? 0\n\n    display.position.set(width / 2 + (px * width) / 2, height / 2 - (py * height) / 2)\n    display.scale.set(sx, sy)\n    display.rotation = (rotation / 180) * Math.PI\n  }\n}\n\nexport function placeholder(key: string, url?: string) {\n  const g = new Graphics()\n  g.rect(0, 0, 10, 10).fill({ color: stringToColor(url ?? key), alpha: 1 })\n  return g\n}\n\nexport function placeholderTexture(width: number, height: number, color?: string) {\n  const svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${width}\" height=\"${height}\"><rect width=\"100%\" height=\"100%\" fill=\"${color ?? '#0f172a'}\" fill-opacity=\"0.8\"/></svg>`\n  return `data:image/svg+xml;base64,${btoa(svg)}`\n}\n\nexport function stringToColor(key: string) {\n  let hash = 0\n  for (let i = 0; i < key.length; i++)\n    hash = key.charCodeAt(i) + ((hash << 5) - hash)\n  return hash & 0x00FFFFFF\n}\n\nexport function computeDuration(protocol: IVideoProtocol) {\n  const endTimes = protocol.tracks.flatMap(track => track.children.map(seg => seg.endTime))\n  return endTimes.length ? Math.max(...endTimes) : 0\n}\n\nexport function clamp(num: number, min: number, max: number) {\n  return Math.min(Math.max(num, min), max)\n}\n\nexport function cloneProtocol(protocol: IVideoProtocol) {\n  const raw = toRaw(protocol) as IVideoProtocol\n  // use JSON clone to avoid structuredClone errors on proxies (e.g., Vue reactive)\n  return JSON.parse(JSON.stringify(raw)) as IVideoProtocol\n}\n\nfunction hasOpacity(segment: SegmentUnion): segment is SegmentUnion & { opacity?: number } {\n  return 'opacity' in segment\n}\n\nfunction readOpacity(segment: SegmentUnion) {\n  if (hasOpacity(segment) && typeof segment.opacity === 'number')\n    return segment.opacity\n  return 1\n}\n\nfunction hasTransform(segment: SegmentUnion): segment is SegmentUnion & { transform?: ITransform } {\n  return 'transform' in segment\n}\n\nfunction readTransform(segment: SegmentUnion) {\n  if (hasTransform(segment))\n    return segment.transform\n  return undefined\n}\n","import type { IVideoFramesSegment, IVideoProtocol, SegmentUnion } from '@video-editor/shared'\nimport type { ComputedRef, Ref, ShallowRef } from '@vue/reactivity'\nimport type { Application, ApplicationOptions } from 'pixi.js'\nimport type { MaybeRef, PixiDisplayObject } from './types'\nimport { createResourceManager, createValidator } from '@video-editor/protocol'\nimport {\n  computed,\n  effectScope,\n  isRef,\n  ref,\n  shallowRef,\n  unref,\n  watch,\n} from '@vue/reactivity'\nimport { MP4Clip } from '@webav/av-cliper'\nimport { file as opfsFile } from 'opfs-tools'\nimport { Container, Sprite, Texture } from 'pixi.js'\nimport { createApp as create2dApp } from './2d'\nimport {\n  applyDisplayProps,\n  clamp,\n  cloneProtocol,\n  collectActiveSegments,\n  collectResourceUrls,\n  computeDuration,\n  placeholder,\n} from './helpers'\n\nconst DEFAULT_RES_DIR = '/video-editor-res'\n\nexport interface RendererOptions {\n  protocol: MaybeRef<IVideoProtocol>\n  app?: Application\n  appOptions?: Partial<ApplicationOptions>\n  resourceDir?: string\n  autoPlay?: boolean\n}\n\nexport interface Renderer {\n  app: Application\n  layer: Container\n  currentTime: Ref<number>\n  duration: ComputedRef<number>\n  isPlaying: Ref<boolean>\n  play: () => void\n  pause: () => void\n  tick: (deltaMs?: number) => void\n  seek: (time: number) => void\n  destroy: () => void\n}\n\n/**\n * Create a renderer that reacts to protocol updates and drives playback state.\n * - Pass a reactive `protocol` (Ref/readonly/normal object)\n * - Call `play/pause/seek/tick` to drive the timeline\n * - Rendering updates when `protocol` or `currentTime` changes\n */\nexport async function createRenderer(opts: RendererOptions): Promise<Renderer> {\n  const validator = createValidator()\n  const protocolInput: Ref<IVideoProtocol> | ShallowRef<IVideoProtocol>\n    = isRef(opts.protocol) ? opts.protocol : shallowRef(opts.protocol)\n  const validatedProtocol: ShallowRef<IVideoProtocol> = shallowRef(\n    validator.verify(cloneProtocol(unref(protocolInput))),\n  )\n\n  const app = opts.app ?? await create2dApp(opts.appOptions)\n  const layer = new Container()\n  app.stage.addChild(layer)\n\n  const resourceManager = createResourceManager({ dir: opts.resourceDir })\n  const resourceWarmUp = new Set<string>()\n  const displayCache = new Map<string, PixiDisplayObject>()\n  const displayLoading = new Map<string, Promise<PixiDisplayObject | undefined>>()\n  const videoEntries = new Map<string, {\n    clip: MP4Clip\n    canvas: HTMLCanvasElement\n    texture: Texture\n    sprite: Sprite\n    meta?: { width: number, height: number }\n  }>()\n\n  const currentTime = ref(0)\n  const isPlaying = ref(false)\n  const duration = computed(() => computeDuration(validatedProtocol.value))\n\n  let rafId: number | undefined\n  let lastTickAt = 0\n\n  interface RenderTask {\n    app: Application\n    layer: Container\n    protocol: IVideoProtocol\n    at: number\n    getDisplay: (segment: SegmentUnion) => Promise<PixiDisplayObject | undefined>\n  }\n\n  async function renderScene(task: RenderTask) {\n    const { protocol, at, layer } = task\n    const renderAt = normalizeRenderTime(protocol, at)\n    const active = collectActiveSegments(protocol, renderAt)\n    const stageWidth = task.app.renderer.width\n    const stageHeight = task.app.renderer.height\n\n    const renders: (PixiDisplayObject | undefined)[] = []\n    for (const { segment } of active) {\n      const display = await task.getDisplay(segment)\n      if (!display)\n        continue\n      applyDisplayProps(display, segment, stageWidth, stageHeight)\n      if (isVideoSegment(segment))\n        await updateVideoFrame(segment, renderAt)\n      renders.push(display)\n    }\n\n    layer.removeChildren()\n    const cleaned = renders.filter(Boolean) as PixiDisplayObject[]\n    if (cleaned.length)\n      layer.addChild(...cleaned)\n    task.app.render()\n  }\n\n  const queueRender = createRenderQueue(() => renderScene({\n    app,\n    layer,\n    protocol: validatedProtocol.value,\n    at: currentTime.value,\n    getDisplay: getDisplayForSegment,\n  }))\n\n  const scope = effectScope()\n  scope.run(() => {\n    // Sync external protocol mutations into a verified snapshot the renderer can rely on.\n    watch(\n      () => unref(protocolInput),\n      (protocol) => {\n        try {\n          validatedProtocol.value = validator.verify(cloneProtocol(protocol))\n        }\n        catch (err) {\n          console.error('[renderer] invalid protocol update', err)\n          return\n        }\n        clearDisplays()\n        warmUpResources(validatedProtocol.value)\n        cleanupCache(validatedProtocol.value)\n        clampCurrentTime()\n        queueRender()\n      },\n      { deep: true, immediate: true },\n    )\n\n    // React to time changes.\n    watch(currentTime, () => {\n      clampCurrentTime()\n      queueRender()\n    })\n\n    // Keep duration/currentTime in sync with protocol updates.\n    watch(duration, () => clampCurrentTime())\n  })\n\n  function clampCurrentTime() {\n    const nextDuration = duration.value\n    if (nextDuration <= 0)\n      currentTime.value = 0\n    else if (currentTime.value > nextDuration)\n      currentTime.value = nextDuration\n    else if (currentTime.value < 0)\n      currentTime.value = 0\n  }\n\n  function warmUpResources(protocol: IVideoProtocol) {\n    for (const url of collectResourceUrls(protocol)) {\n      if (resourceWarmUp.has(url))\n        continue\n\n      resourceWarmUp.add(url)\n      resourceManager.add(url).catch(() => {\n        // noop – render will fall back to Texture.from(url)\n      })\n    }\n  }\n\n  function cleanupCache(protocol: IVideoProtocol) {\n    const ids = new Set(protocol.tracks.flatMap(track => track.children.map(seg => seg.id)))\n    for (const [id, display] of displayCache) {\n      if (ids.has(id))\n        continue\n      display.destroy()\n      displayCache.delete(id)\n    }\n    for (const [id, entry] of videoEntries) {\n      if (ids.has(id))\n        continue\n      entry.clip.destroy()\n      videoEntries.delete(id)\n    }\n  }\n\n  function clearDisplays() {\n    layer.removeChildren()\n    for (const display of displayCache.values()) {\n      display.destroy()\n    }\n    displayCache.clear()\n    displayLoading.clear()\n    for (const { clip } of videoEntries.values())\n      clip.destroy()\n    videoEntries.clear()\n  }\n\n  function play() {\n    if (isPlaying.value)\n      return\n    isPlaying.value = true\n    lastTickAt = performance.now()\n    rafId = requestAnimationFrame(loop)\n  }\n\n  function pause() {\n    isPlaying.value = false\n    if (rafId !== undefined)\n      cancelAnimationFrame(rafId)\n    rafId = undefined\n  }\n\n  function loop() {\n    tick()\n    if (isPlaying.value)\n      rafId = requestAnimationFrame(loop)\n  }\n\n  function tick(deltaMs?: number) {\n    if (!isPlaying.value && deltaMs === undefined)\n      return\n\n    const now = performance.now()\n    const delta = deltaMs ?? (lastTickAt ? now - lastTickAt : 0)\n    lastTickAt = now\n\n    if (delta === 0)\n      return\n\n    currentTime.value = clamp(\n      currentTime.value + delta,\n      0,\n      duration.value || Number.POSITIVE_INFINITY,\n    )\n\n    if (duration.value > 0 && currentTime.value >= duration.value)\n      pause()\n\n    // render happens via watch on currentTime\n  }\n\n  function seek(time: number) {\n    currentTime.value = clamp(time, 0, duration.value || Number.POSITIVE_INFINITY)\n  }\n\n  async function getDisplayForSegment(segment: SegmentUnion) {\n    const cached = displayCache.get(segment.id)\n    if (cached)\n      return cached\n\n    const loading = displayLoading.get(segment.id)\n    if (loading)\n      return loading\n\n    const promise = loadDisplay(segment)\n    displayLoading.set(segment.id, promise)\n\n    const display = await promise\n    if (display)\n      displayCache.set(segment.id, display)\n\n    displayLoading.delete(segment.id)\n    return display\n  }\n\n  async function loadDisplay(segment: SegmentUnion): Promise<PixiDisplayObject | undefined> {\n    // prioritize static resources via protocol resource manager\n    if (segment.segmentType === 'frames' || segment.segmentType === 'sticker') {\n      if (!segment.url)\n        return placeholder(segment.segmentType)\n\n      if ('type' in segment && segment.type === 'video') {\n        const sprite = await loadVideoSprite(segment)\n        if (sprite)\n          return sprite\n      }\n\n      const texture = await loadTexture(segment.url)\n      if (texture)\n        return new Sprite(texture)\n      return placeholder(segment.segmentType, segment.url)\n    }\n\n    if (segment.segmentType === 'text')\n      return undefined\n\n    if (segment.segmentType === 'effect' || segment.segmentType === 'filter')\n      return undefined\n\n    // audio segments do not render visuals\n    return undefined\n  }\n\n  async function loadTexture(url: string) {\n    const isDataUrl = url.startsWith('data:')\n    const isHttp = /^https?:\\/\\//.test(url)\n\n    if (!isDataUrl && !isHttp) {\n      try {\n        await resourceManager.add(url)\n        const res = await resourceManager.get(url)\n        if (res instanceof HTMLImageElement)\n          return Texture.from(res)\n      }\n      catch {\n        // fall through to direct image load\n      }\n    }\n\n    // load image directly to avoid invalid path issues with http/data URLs\n    return await loadImageTexture(url)\n  }\n\n  async function loadVideoSprite(segment: SegmentUnion & { type: 'video', url: string }): Promise<Sprite | undefined> {\n    const existing = videoEntries.get(segment.id)\n    if (existing)\n      return existing.sprite\n\n    let file\n    try {\n      await resourceManager.add(segment.url)\n      file = await getOpfsFile(segment.url)\n    }\n    catch {\n      file = undefined\n    }\n    let clip: MP4Clip\n    try {\n      if (file) {\n        clip = new MP4Clip(file)\n      }\n      else {\n        const res = await fetch(segment.url)\n        if (!res.body)\n          return undefined\n        clip = new MP4Clip(res.body)\n      }\n    }\n    catch {\n      return undefined\n    }\n\n    try {\n      await clip.ready\n    }\n    catch {\n      clip.destroy()\n      return undefined\n    }\n\n    const { width, height } = clip.meta\n    const canvas = document.createElement('canvas')\n    canvas.width = width || 1\n    canvas.height = height || 1\n    const texture = Texture.from(canvas)\n    const sprite = new Sprite(texture)\n\n    videoEntries.set(segment.id, { clip, canvas, texture, sprite, meta: { width, height } })\n    return sprite\n  }\n\n  async function updateVideoFrame(segment: IVideoFramesSegment, at: number) {\n    const entry = videoEntries.get(segment.id)\n    if (!entry)\n      return\n\n    try {\n      const offsetMs = segment.fromTime ?? 0\n      const relativeMs = Math.max(0, at - segment.startTime + offsetMs)\n      const relativeUs = Math.floor(relativeMs * 1000)\n      const res = await entry.clip.tick(relativeUs)\n      if (res.video) {\n        const ctx = entry.canvas.getContext('2d')\n        if (ctx) {\n          ctx.drawImage(res.video, 0, 0, entry.canvas.width, entry.canvas.height)\n          refreshCanvasTexture(entry.texture)\n        }\n        res.video.close()\n      }\n    }\n    catch (err) {\n      console.warn('[renderer] update video frame failed', err)\n    }\n  }\n\n  function isVideoSegment(segment: SegmentUnion): segment is IVideoFramesSegment {\n    return segment.segmentType === 'frames'\n      && segment.type === 'video'\n      && typeof segment.url === 'string'\n  }\n\n  function normalizeRenderTime(protocol: IVideoProtocol, at: number) {\n    const total = computeDuration(protocol)\n    if (total <= 0)\n      return 0\n    if (at < total)\n      return at\n    // Keep the last visible frame when playback reaches the end.\n    const frameWindow = Math.max(1000 / Math.max(protocol.fps || 30, 1), 1)\n    return Math.max(total - frameWindow, 0)\n  }\n\n  async function getOpfsFile(url: string) {\n    const dir = opts.resourceDir ?? DEFAULT_RES_DIR\n    try {\n      const file = opfsFile(`${dir}/${url}`)\n      if (await file.exists())\n        return file\n    }\n    catch {\n      return undefined\n    }\n    return undefined\n  }\n\n  function loadImageTexture(url: string): Promise<Texture | undefined> {\n    return new Promise((resolve) => {\n      const img = new Image()\n      img.crossOrigin = 'anonymous'\n      img.onload = () => resolve(Texture.from(img))\n      img.onerror = () => {\n        console.warn('[renderer] failed to load image', url)\n        resolve(undefined)\n      }\n      img.src = url\n    })\n  }\n\n  function refreshCanvasTexture(texture: Texture) {\n    const source = texture.source\n    if ('update' in source && typeof source.update === 'function') {\n      source.update()\n      return\n    }\n\n    if (typeof texture.update === 'function')\n      texture.update()\n  }\n\n  function destroy() {\n    pause()\n    scope.stop()\n    clearDisplays()\n    layer.destroy({ children: true })\n    displayCache.clear()\n    displayLoading.clear()\n    resourceWarmUp.clear()\n    if (!opts.app)\n      app.destroy()\n  }\n\n  if (opts.autoPlay)\n    play()\n\n  return {\n    app,\n    layer,\n    currentTime,\n    duration,\n    isPlaying,\n    play,\n    pause,\n    tick,\n    seek,\n    destroy,\n  }\n}\n\nfunction createRenderQueue(job: () => Promise<void> | void) {\n  let queued = false\n  let running = false\n\n  const run = async () => {\n    if (running) {\n      queued = true\n      return\n    }\n    running = true\n    do {\n      queued = false\n      await job()\n    } while (queued)\n    running = false\n  }\n\n  return run\n}\n"],"names":["createApp","opts","app","Application","collectResourceUrls","protocol","urls","track","segment","collectActiveSegments","at","active","trackIndex","childIndex","a","b","applyDisplayProps","display","width","height","opacity","readOpacity","Sprite","Texture","placeholderTexture","Graphics","stringToColor","hasOpacity","transform","readTransform","px","py","sx","sy","rotation","placeholder","key","url","g","color","svg","hash","i","computeDuration","endTimes","seg","clamp","num","min","max","cloneProtocol","raw","toRaw","hasTransform","DEFAULT_RES_DIR","createRenderer","validator","createValidator","protocolInput","isRef","shallowRef","validatedProtocol","unref","create2dApp","layer","Container","resourceManager","createResourceManager","resourceWarmUp","displayCache","displayLoading","videoEntries","currentTime","ref","isPlaying","duration","computed","rafId","lastTickAt","renderScene","task","renderAt","normalizeRenderTime","stageWidth","stageHeight","renders","isVideoSegment","updateVideoFrame","cleaned","queueRender","createRenderQueue","getDisplayForSegment","scope","effectScope","watch","err","clearDisplays","warmUpResources","cleanupCache","clampCurrentTime","nextDuration","ids","id","entry","clip","play","loop","pause","tick","deltaMs","now","delta","seek","time","cached","loading","promise","loadDisplay","sprite","loadVideoSprite","texture","loadTexture","isDataUrl","isHttp","res","loadImageTexture","existing","file","getOpfsFile","MP4Clip","canvas","offsetMs","relativeMs","relativeUs","ctx","refreshCanvasTexture","total","frameWindow","dir","opfsFile","resolve","img","source","destroy","job","queued","running"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@video-editor/renderer",
   "type": "module",
-  "version": "0.0.1-beta.1",
+  "version": "0.0.1-beta.11",
   "exports": {
     ".": {
       "import": "./dist/index.js"
@@ -21,8 +21,8 @@
     "@webav/av-cliper": "^1.2.7",
     "opfs-tools": "^0.7.4",
     "pixi.js": "^8.14.3",
-    "@video-editor/protocol": "0.0.1-beta.1",
-    "@video-editor/shared": "0.0.1-beta.1"
+    "@video-editor/protocol": "0.0.1-beta.11",
+    "@video-editor/shared": "0.0.1-beta.11"
   },
   "scripts": {
     "build": "vite build",