@designcombo/video 0.0.1 → 0.0.3

package/dist/{SharedSystems-BhqLJf5z.js → SharedSystems-s9Js69L7.js}

@@ -1,5 +1,5 @@
-import { u as Ie, m as se, M as v, G as Ee, a as De, v as ae, E as u, e as D, x as S, y as Oe, z as O, F as b, R as F, H as ne, I as Fe, t as m, c as f, j as B, w as L, J as K, K as Le, d as Y, B as y, k as U, L as He, N as C, l as M, O as w, Q as We, b as ze, V as ie, W as oe, X as le, Y as ue, C as P, Z as Ve, _ as A, $ as J, D as H, a0 as Ne, a1 as je, P as $e, h as qe, T as X, a2 as Q, a3 as Ke, a4 as Ye, a5 as Je } from "./index-BuRTeJh6.js";
-import { F as Xe, S as Qe, B as de, c as Ze } from "./colorToUniform-B0NRe8Du.js";
+import { F as Ie, u as Ee, l as se, M as v, G as De, v as Oe, S as Fe, x as ae, E as u, e as D, y as S, z as Le, H as O, I as b, R as F, J as ne, K as He, t as m, b as f, i as B, w as L, L as K, N as We, c as Y, B as y, j as U, O as ze, Q as C, k as M, V as w, W as Ve, a as Ne, X as ie, Y as oe, Z as le, _ as ue, C as P, $ as je, a0 as A, a1 as J, D as H, a2 as $e, a3 as qe, P as Ke, d as Ye, T as X, a4 as Q, a5 as Je, a6 as Xe, a7 as Qe } from "./index-BVO9qrk3.js";
+import { B as de, c as Ze } from "./colorToUniform-C2jGzNe1.js";
 var et = `in vec2 vMaskCoord;
 in vec2 vTextureCoord;
 
@@ -170,14 +170,14 @@ fn mainFragment(
     return source * a;
 }
 `;
-class rt extends Xe {
+class rt extends Ie {
   constructor(e) {
-    const { sprite: t, ...r } = e, s = new Ie(t.texture), n = new se({
+    const { sprite: t, ...r } = e, s = new Ee(t.texture), n = new se({
       uFilterMatrix: { value: new v(), type: "mat3x3<f32>" },
       uMaskClamp: { value: s.uClampFrame, type: "vec4<f32>" },
       uAlpha: { value: 1, type: "f32" },
       uInverse: { value: e.inverse ? 1 : 0, type: "f32" }
-    }), i = Ee.from({
+    }), i = De.from({
       vertex: {
         source: Z,
         entryPoint: "mainVertex"
@@ -186,7 +186,7 @@ class rt extends Xe {
         source: Z,
         entryPoint: "mainFragment"
       }
-    }), o = De.from({
+    }), o = Oe.from({
       vertex: tt,
       fragment: et,
       name: "mask-filter"
@@ -217,7 +217,7 @@ class rt extends Xe {
 }
 const W = class ce {
   constructor(e, t) {
-    this.state = Qe.for2d(), this._batchersByInstructionSet = /* @__PURE__ */ Object.create(null), this._activeBatches = /* @__PURE__ */ Object.create(null), this.renderer = e, this._adaptor = t, this._adaptor.init?.(this);
+    this.state = Fe.for2d(), this._batchersByInstructionSet = /* @__PURE__ */ Object.create(null), this._activeBatches = /* @__PURE__ */ Object.create(null), this.renderer = e, this._adaptor = t, this._adaptor.init?.(this);
   }
   static getBatcher(e) {
     return new this._availableBatchers[e]();
@@ -356,7 +356,7 @@ const Bt = {
 class at extends ne {
   constructor() {
     super(), this.filters = [new rt({
-      sprite: new Fe(m.EMPTY),
+      sprite: new He(m.EMPTY),
       inverse: !1,
       resolution: "inherit",
       antialias: "inherit"
@@ -420,7 +420,7 @@ class fe {
       const s = S.get(at);
       if (s.inverse = e.inverse, r) {
         e.mask.mask.measurable = !0;
-        const n = Oe(e.mask.mask, !0, st);
+        const n = Le(e.mask.mask, !0, st);
         e.mask.mask.measurable = !1, n.ceil();
         const i = t.renderTarget.renderTarget.colorTexture.source, o = b.getOptimalTexture(
           n.width,
@@ -665,7 +665,7 @@ class Gt {
    * @private
    */
   _systemCheck() {
-    if (!Le())
+    if (!We())
       throw new Error("Current environment does not allow unsafe-eval, please use pixi.js/unsafe-eval module to enable support.");
   }
   ensureUniformGroup(e) {
@@ -944,7 +944,7 @@ function ot(a, e, t, r, s, n) {
   return a.identity(), a.a = 1 / r * 2, a.d = i * (1 / s * 2), a.tx = -1 - e * a.a, a.ty = -i - t * a.d, a;
 }
 const x = /* @__PURE__ */ new Map();
-He.register(x);
+ze.register(x);
 function ve(a, e) {
   if (!x.has(a)) {
     const t = new m({
@@ -1061,7 +1061,7 @@ ge.defaultOptions = {
 let G = ge;
 class Dt {
   constructor(e) {
-    this.rootViewPort = new w(), this.viewport = new w(), this.onRenderTargetChange = new We("onRenderTargetChange"), this.projectionMatrix = new v(), this.defaultClearColor = [0, 0, 0, 0], this._renderSurfaceToRenderTargetHash = /* @__PURE__ */ new Map(), this._gpuRenderTargetHash = /* @__PURE__ */ Object.create(null), this._renderTargetStack = [], this._renderer = e, e.renderableGC.addManagedHash(this, "_gpuRenderTargetHash");
+    this.rootViewPort = new w(), this.viewport = new w(), this.onRenderTargetChange = new Ve("onRenderTargetChange"), this.projectionMatrix = new v(), this.defaultClearColor = [0, 0, 0, 0], this._renderSurfaceToRenderTargetHash = /* @__PURE__ */ new Map(), this._gpuRenderTargetHash = /* @__PURE__ */ Object.create(null), this._renderTargetStack = [], this._renderer = e, e.renderableGC.addManagedHash(this, "_gpuRenderTargetHash");
   }
   /** called when dev wants to finish a render pass */
   finishRenderPass() {
@@ -1244,7 +1244,7 @@ class Dt {
     this.renderTarget = null, this.renderSurface = null;
   }
 }
-class Ot extends ze {
+class Ot extends Ne {
   /**
    * Create a new Buffer Resource.
    * @param options - The options for the buffer resource
@@ -1471,7 +1471,7 @@ class ke {
           i,
           o
         );
-        d._source.style = new Ve({ scaleMode: l }), e.texture = d, e._textureBounds || (e._textureBounds = new O()), e._textureBounds.copyFrom(r), s !== e.texture && e.renderGroupParent && (e.renderGroupParent.structureDidChange = !0);
+        d._source.style = new je({ scaleMode: l }), e.texture = d, e._textureBounds || (e._textureBounds = new O()), e._textureBounds.copyFrom(r), s !== e.texture && e.renderGroupParent && (e.renderGroupParent.structureDidChange = !0);
       }
     } else e.texture && (b.returnTexture(e.texture, !0), e.texture = null);
   }
@@ -2107,9 +2107,9 @@ class Pe {
     const t = e.resolution || this._renderer.resolution, r = e.antialias || this._renderer.view.antialias, s = e.target;
     let n = e.clearColor;
     n ? n = Array.isArray(n) && n.length === 4 ? n : A.shared.setValue(n).toArray() : n = xt;
-    const i = e.frame?.copyTo(vt) || Ne(s, gt).rectangle;
+    const i = e.frame?.copyTo(vt) || $e(s, gt).rectangle;
     i.width = Math.max(i.width, 1 / t) | 0, i.height = Math.max(i.height, 1 / t) | 0;
-    const o = je.create({
+    const o = qe.create({
       ...e.textureSourceOptions,
       width: i.width,
       height: i.height,
@@ -2159,7 +2159,7 @@ class Re {
     const i = this._renderer.renderTarget.renderTarget, o = this._stackIndex ? this._globalUniformDataStack[this._stackIndex - 1] : {
       worldTransformMatrix: new v(),
       worldColor: 4294967295,
-      offset: new $e()
+      offset: new Ke()
     }, l = {
       projectionMatrix: t || this._renderer.renderTarget.projectionMatrix,
       resolution: e || i.size,
@@ -2176,7 +2176,7 @@ class Re {
       0
     ), d.update();
     let h;
-    this._renderer.renderPipes.uniformBatch ? h = this._renderer.renderPipes.uniformBatch.getUniformBindGroup(d, !1) : (h = this._bindGroupPool.pop() || new qe(), this._activeBindGroups.push(h), h.setResource(d, 0)), l.bindGroup = h, this._currentGlobalUniformData = l;
+    this._renderer.renderPipes.uniformBatch ? h = this._renderer.renderPipes.uniformBatch.getUniformBindGroup(d, !1) : (h = this._bindGroupPool.pop() || new Ye(), this._activeBindGroups.push(h), h.setResource(d, 0)), l.bindGroup = h, this._currentGlobalUniformData = l;
   }
   push(e) {
     this.bind(e), this._globalUniformDataStack[this._stackIndex++] = this._currentGlobalUniformData;
@@ -2593,7 +2593,7 @@ const q = class Ge {
     e = {
       ...Ge.defaultOptions,
       ...e
-    }, e.view && (Ke(Ye, "ViewSystem.view has been renamed to ViewSystem.canvas"), e.canvas = e.view), this.screen = new w(0, 0, e.width, e.height), this.canvas = e.canvas || H.get().createCanvas(), this.antialias = !!e.antialias, this.texture = ve(this.canvas, e), this.renderTarget = new G({
+    }, e.view && (Je(Xe, "ViewSystem.view has been renamed to ViewSystem.canvas"), e.canvas = e.view), this.screen = new w(0, 0, e.width, e.height), this.canvas = e.canvas || H.get().createCanvas(), this.antialias = !!e.antialias, this.texture = ve(this.canvas, e), this.renderTarget = new G({
       colorTextures: [this.texture],
       depth: !!e.depth,
       isRoot: !0
@@ -2661,7 +2661,7 @@ const Ft = [
   Mt,
   Pe,
   mt,
-  Je,
+  Qe,
   Ct,
   Be
 ], Lt = [

package/dist/{WebGLRenderer-BzdmWLtP.js → WebGLRenderer-C-0unSMy.js}

@@ -1,9 +1,9 @@
-import { E as d, B as v, w as m, D as S, J as j, a as ve, S as G, t as b, a6 as Be, l as K, a7 as Ae, c as p, O as L, k as B, j as A, m as U, M as $, a8 as z, a9 as Ne, aa as ye, ab as Y, ac as Ce, A as De, R as Ie, e as T } from "./index-BuRTeJh6.js";
-import { S as F, b as q } from "./colorToUniform-B0NRe8Du.js";
-import { e as Ge, G as Ue, c as Fe, b as Oe, U as Pe, R as Me, B as Z, d as N, f as Le, S as He, a as we } from "./SharedSystems-BhqLJf5z.js";
-class J {
+import { S as G, E as d, B as v, w as m, D as S, L as j, v as ve, s as U, t as b, a8 as Be, k as K, a9 as Ae, b as p, V as L, j as B, i as A, l as F, M as $, aa as z, ab as Ne, ac as ye, ad as Y, ae as Ce, A as De, R as Ie, e as T } from "./index-BVO9qrk3.js";
+import { b as q } from "./colorToUniform-C2jGzNe1.js";
+import { e as Ge, G as Ue, c as Fe, b as Oe, U as Pe, R as Me, B as Z, d as N, f as Le, S as He, a as we } from "./SharedSystems-s9Js69L7.js";
+class Q {
   constructor() {
-    this._tempState = F.for2d(), this._didUploadHash = {};
+    this._tempState = G.for2d(), this._didUploadHash = {};
   }
   init(e) {
     e.renderer.runners.contextChange.add(this);
@@ -24,7 +24,7 @@ class J {
     s.geometry.draw(r.topology, r.size, r.start);
   }
 }
-J.extension = {
+Q.extension = {
   type: [
     d.WebGLPipesAdaptor
   ],
@@ -36,7 +36,7 @@ class Ve {
     this._lastBindBaseLocation = -1, this._lastBindCallId = -1, this.buffer = e || null, this.updateID = -1, this.byteLength = -1, this.type = r;
   }
 }
-class Q {
+class J {
   /**
    * @param {Renderer} renderer - The renderer this System works for.
    */
@@ -154,7 +154,7 @@ class Q {
     this._boundBufferBases = /* @__PURE__ */ Object.create(null);
   }
 }
-Q.extension = {
+J.extension = {
   type: [
     d.WebGLSystem
   ],
@@ -618,7 +618,7 @@ const je = new Be({
   }
   init(e = {}) {
     const { useBackBuffer: r, antialias: s } = { ...se.defaultOptions, ...e };
-    this.useBackBuffer = r, this._antialias = s, this._renderer.context.supports.msaa || (m("antialiasing, is not supported on when using the back buffer"), this._antialias = !1), this._state = F.for2d();
+    this.useBackBuffer = r, this._antialias = s, this._renderer.context.supports.msaa || (m("antialiasing, is not supported on when using the back buffer"), this._antialias = !1), this._state = G.for2d();
     const n = new ve({
       vertex: `
                 attribute vec2 aPosition;
@@ -643,7 +643,7 @@ const je = new Be({
                 }`,
       name: "big-triangle"
     });
-    this._bigTriangleShader = new G({
+    this._bigTriangleShader = new U({
       glProgram: n,
       resources: {
         uTexture: b.WHITE.source
@@ -1109,7 +1109,7 @@ _e.extension = {
   type: [d.WebGLSystem],
   name: "renderTarget"
 };
-function Je(t, e) {
+function Qe(t, e) {
   const r = [], s = [`
         var g = s.groups;
         var sS = r.shader;
@@ -1126,7 +1126,7 @@ function Je(t, e) {
         `);
     for (const _ in u.resources) {
       const f = u.resources[_];
-      if (f instanceof U)
+      if (f instanceof F)
         if (f.ubo) {
           const l = t._uniformBindMap[c][Number(_)];
           r.push(`
@@ -1163,7 +1163,7 @@ function Je(t, e) {
 `);
   return new Function("r", "s", "sD", o);
 }
-class Qe {
+class Je {
   /**
    * Makes a new Pixi program.
    * @param program - webgl program
@@ -1418,7 +1418,7 @@ function at(t, e) {
       value: he(u.type, u.size)
     };
   }
-  return new Qe(n, a);
+  return new Je(n, a);
 }
 const R = {
   textureCount: 0,
@@ -1500,7 +1500,7 @@ class le {
    * @ignore
    */
   _generateShaderSync(e, r) {
-    return Je(e, r);
+    return Qe(e, r);
   }
   resetState() {
     this._activeProgram = null;
@@ -1636,7 +1636,7 @@ function ut(t, e) {
     `];
   for (const s in t.uniforms) {
     if (!e[s]) {
-      t.uniforms[s] instanceof U ? t.uniforms[s].ubo ? r.push(`
+      t.uniforms[s] instanceof F ? t.uniforms[s].ubo ? r.push(`
                         renderer.shader.bindUniformBlock(uv.${s}, "${s}");
                     `) : r.push(`
                         renderer.shader.updateUniformGroup(uv.${s});
@@ -1737,7 +1737,7 @@ function _t(t) {
 }
 const ht = 0, ft = 1, lt = 2, dt = 3, mt = 4, Et = 5, me = class I {
   constructor(e) {
-    this._invertFrontFace = !1, this.gl = null, this.stateId = 0, this.polygonOffset = 0, this.blendMode = "none", this._blendEq = !1, this.map = [], this.map[ht] = this.setBlend, this.map[ft] = this.setOffset, this.map[lt] = this.setCullFace, this.map[dt] = this.setDepthTest, this.map[mt] = this.setFrontFace, this.map[Et] = this.setDepthMask, this.checks = [], this.defaultState = F.for2d(), e.renderTarget.onRenderTargetChange.add(this);
+    this._invertFrontFace = !1, this.gl = null, this.stateId = 0, this.polygonOffset = 0, this.blendMode = "none", this._blendEq = !1, this.map = [], this.map[ht] = this.setBlend, this.map[ft] = this.setOffset, this.map[lt] = this.setCullFace, this.map[dt] = this.setDepthTest, this.map[mt] = this.setFrontFace, this.map[Et] = this.setDepthMask, this.checks = [], this.defaultState = G.for2d(), e.renderTarget.onRenderTargetChange.add(this);
   }
   onRenderTargetChange(e) {
     this._invertFrontFace = !e.isRoot, this._cullFace ? this.setFrontFace(this._frontFace) : this._frontFaceDirty = !0;
@@ -2505,7 +2505,7 @@ be.extension = {
 };
 class Se {
   contextChange(e) {
-    const r = new U({
+    const r = new F({
       uColor: { value: new Float32Array([1, 1, 1, 1]), type: "vec4<f32>" },
       uTransformMatrix: { value: new $(), type: "mat3x3<f32>" },
       uRound: { value: 0, type: "f32" }
@@ -2518,7 +2518,7 @@ class Se {
         Y
       ]
     });
-    this.shader = new G({
+    this.shader = new U({
       glProgram: n,
       resources: {
         localUniforms: r,
@@ -2562,7 +2562,7 @@ class pe {
         Y
       ]
     });
-    this._shader = new G({
+    this._shader = new U({
       glProgram: e,
       resources: {
         uTexture: b.EMPTY.source,
@@ -2607,7 +2607,7 @@ const Ct = [
   Ke,
   ke,
   ae,
-  Q,
+  J,
   be,
   _e,
   re,
@@ -2617,7 +2617,7 @@ const Ct = [
   bt,
   oe,
   ne
-], Dt = [...we], It = [J, pe, Se], ge = [], Re = [], xe = [];
+], Dt = [...we], It = [Q, pe, Se], ge = [], Re = [], xe = [];
 T.handleByNamedList(d.WebGLSystem, ge);
 T.handleByNamedList(d.WebGLPipes, Re);
 T.handleByNamedList(d.WebGLPipesAdaptor, xe);

package/dist/{WebGPURenderer-Cypu9NWE.js → WebGPURenderer-D7pcgSJJ.js}

@@ -1,7 +1,7 @@
-import { g as E, E as p, f as ae, D as S, c as C, B as T, d as ue, h as A, i as M, w as v, j as x, k as ce, l as de, m as L, n as w, M as k, o as D, p as he, q as pe, s as H, S as z, t as R, A as le, R as fe, e as B } from "./index-BuRTeJh6.js";
-import { S as F, l as ge, a as me } from "./colorToUniform-B0NRe8Du.js";
-import { c as _e, u as be, U as xe, B as ye, G as Ge, e as Se, R as Be, t as Pe, S as Te, a as Ce } from "./SharedSystems-BhqLJf5z.js";
-const y = F.for2d();
+import { S as E, g as A, E as p, f as ae, D as S, b as C, B as T, c as ue, d as L, h as M, w as v, i as x, j as ce, k as de, l as k, m as w, M as D, n as H, o as he, p as pe, q as z, s as F, t as R, A as le, R as fe, e as B } from "./index-BVO9qrk3.js";
+import { l as ge, a as me } from "./colorToUniform-C2jGzNe1.js";
+import { c as _e, u as be, U as xe, B as ye, G as Ge, e as Se, R as Be, t as Pe, S as Te, a as Ce } from "./SharedSystems-s9Js69L7.js";
+const y = E.for2d();
 class O {
   start(e, t, r) {
     const s = e.renderer, i = s.encoder, n = r.gpuProgram;
@@ -17,7 +17,7 @@ class O {
     const r = this._shader.gpuProgram, s = e.renderer, i = s.encoder;
     if (!t.bindGroup) {
       const u = t.textures;
-      t.bindGroup = E(
+      t.bindGroup = A(
         u.textures,
         u.count,
         s.limits.maxBatchableTextures
@@ -577,7 +577,7 @@ class Y {
   }
   _getBindGroup(e) {
     if (!this._bindGroups[e]) {
-      const t = new A({
+      const t = new L({
         0: this._getBufferResource(e)
       });
       this._bindGroups[e] = t;
@@ -1124,7 +1124,7 @@ g.max = {
 };
 class J {
   constructor() {
-    this.defaultState = new F(), this.defaultState.blend = !0;
+    this.defaultState = new E(), this.defaultState.blend = !0;
   }
   contextChange(e) {
     this.gpu = e;
@@ -1437,10 +1437,10 @@ class te {
   }
   _createTextureBindGroup(e) {
     const t = e.source;
-    return this._bindGroupHash[e.uid] = new A({
+    return this._bindGroupHash[e.uid] = new L({
       0: t,
       1: t.style,
-      2: new L({
+      2: new k({
         uTextureMatrix: { type: "mat3x3<f32>", value: e.textureMatrix.mapCoord }
       })
     }), this._bindGroupHash[e.uid];
@@ -1500,22 +1500,22 @@ class re {
     this._maxTextures = 0;
   }
   contextChange(e) {
-    const t = new L({
-      uTransformMatrix: { value: new k(), type: "mat3x3<f32>" },
+    const t = new k({
+      uTransformMatrix: { value: new D(), type: "mat3x3<f32>" },
       uColor: { value: new Float32Array([1, 1, 1, 1]), type: "vec4<f32>" },
       uRound: { value: 0, type: "f32" }
     });
     this._maxTextures = e.limits.maxBatchableTextures;
-    const r = D({
+    const r = H({
       name: "graphics",
       bits: [
         he,
         pe(this._maxTextures),
         ge,
-        H
+        z
       ]
     });
-    this.shader = new z({
+    this.shader = new F({
       gpuProgram: r,
       resources: {
         // added on the fly!
@@ -1544,7 +1544,7 @@ class re {
         m.topology
       )), s.groups[1] = m.bindGroup, !m.gpuBindGroup) {
         const P = m.textures;
-        m.bindGroup = E(
+        m.bindGroup = A(
           P.textures,
           P.count,
           this._maxTextures
@@ -1569,21 +1569,21 @@ re.extension = {
 };
 class se {
   init() {
-    const e = D({
+    const e = H({
       name: "mesh",
       bits: [
         me,
         Pe,
-        H
+        z
       ]
     });
-    this._shader = new z({
+    this._shader = new F({
       gpuProgram: e,
       resources: {
         uTexture: R.EMPTY._source,
         uSampler: R.EMPTY._source.style,
         textureUniforms: {
-          uTextureMatrix: { type: "mat3x3<f32>", value: new k() }
+          uTextureMatrix: { type: "mat3x3<f32>", value: new D() }
         }
       }
     });

package/dist/{browserAll-7OZQazmn.js → browserAll-D5pTiGnC.js}

@@ -1,5 +1,5 @@
-import { T as M, U as Z, P as m, r as te, E as y, b as ie, w as g, e as P, C as V } from "./index-BuRTeJh6.js";
-import "./webworkerAll-DChKIQQa.js";
+import { T as M, U as Z, P as m, r as te, E as y, a as ie, w as g, e as P, C as V } from "./index-BVO9qrk3.js";
+import "./webworkerAll-zvzmYHny.js";
 class q {
   constructor(e) {
     this._lastTransform = "", this._observer = null, this._tickerAttached = !1, this.updateTranslation = () => {

package/dist/clips/audio-clip.d.ts

@@ -21,6 +21,7 @@ interface IAudioClipOpts {
  * }),
  */
 export declare class AudioClip extends BaseClip implements IPlaybackCapable {
+    readonly type = "Audio";
     static ctx: AudioContext | null;
     ready: IClip['ready'];
     private _meta;
@@ -50,7 +51,6 @@ export declare class AudioClip extends BaseClip implements IPlaybackCapable {
     /**
      * Audio volume level (0-1) (hybrid JSON structure)
      */
-    volume: number;
     /**
      * Load an audio clip from a URL
      * @param url Audio URL

package/dist/clips/base-clip.d.ts

@@ -7,6 +7,7 @@ import { ClipJSON } from '../json-serialization';
  * and frame management
  */
 export declare abstract class BaseClip extends BaseSprite implements IClip {
+    abstract readonly type: string;
     private lastVf;
     protected destroyed: boolean;
     /**

package/dist/clips/caption-clip.d.ts

@@ -163,6 +163,7 @@ export interface ICaptionClipOpts {
  * captionClip.duration = 3e6; // 3 seconds
  */
 export declare class CaptionClip extends BaseClip implements IClip {
+    readonly type = "Caption";
     ready: IClip['ready'];
     private _meta;
     get meta(): {
@@ -216,6 +217,20 @@ export declare class CaptionClip extends BaseClip implements IClip {
      * Bottom offset from video bottom (hybrid JSON structure)
      */
     bottomOffset?: number;
+    /**
+     * Unique identifier for this clip instance
+     */
+    id: string;
+    /**
+     * Array of effects to be applied to this clip
+     * Each effect specifies key, startTime, duration, and optional targets
+     */
+    effects: Array<{
+        id: string;
+        key: string;
+        startTime: number;
+        duration: number;
+    }>;
     private opts;
     private pixiTextContainer;
     private renderTexture;
@@ -245,6 +260,18 @@ export declare class CaptionClip extends BaseClip implements IClip {
         state: 'success';
     }>;
     split(_time: number): Promise<[this, this]>;
+    addEffect(effect: {
+        id: string;
+        key: string;
+        startTime: number;
+        duration: number;
+    }): void;
+    editEffect(effectId: string, newEffectData: Partial<{
+        key: string;
+        startTime: number;
+        duration: number;
+    }>): void;
+    removeEffect(effectId: string): void;
     clone(): Promise<this>;
     destroy(): void;
     toJSON(main?: boolean): CaptionClipJSON;

package/dist/clips/effect-clip.d.ts

@@ -0,0 +1,33 @@
+import { BaseClip } from './base-clip';
+import { IClip } from './iclip';
+import { EffectKey } from '../effect/glsl/gl-effect';
+export declare class EffectClip extends BaseClip {
+    readonly type = "Effect";
+    ready: IClip['ready'];
+    private _meta;
+    get meta(): {
+        duration: number;
+        width: number;
+        height: number;
+    };
+    /**
+     * Unique identifier for this clip instance
+     */
+    id: string;
+    /**
+     * The effect configuration
+     */
+    effect: {
+        id: string;
+        key: EffectKey;
+        name: string;
+    };
+    constructor(effectKey: EffectKey);
+    clone(): Promise<this>;
+    tick(_time: number): Promise<{
+        video: ImageBitmap | undefined;
+        state: 'success';
+    }>;
+    split(_time: number): Promise<[this, this]>;
+    toJSON(main?: boolean): any;
+}

package/dist/clips/iclip.d.ts

@@ -18,6 +18,10 @@ export interface IClipMeta {
 export interface IClip extends Omit<BaseSprite, 'destroy' | 'ready'> {
     destroy: () => void;
     readonly ready: Promise<IClipMeta>;
+    /**
+     * Clip type (e.g., 'video', 'image', 'text', 'audio')
+     */
+    readonly type: string;
     /**
      * Extract data from clip at specified time
      * @param time Time in microseconds

package/dist/clips/image-clip.d.ts

@@ -26,7 +26,8 @@ type AnimateImgType = 'avif' | 'webp' | 'png' | 'gif';
  *
  * @see [Video composition](https://webav-tech.github.io/WebAV/demo/2_1-concat-video)
  */
-export declare class ImageClip extends BaseClip {
+export declare class ImageClip extends BaseClip implements IClip {
+    readonly type = "Image";
     ready: IClip['ready'];
     private _meta;
     /**
@@ -43,6 +44,20 @@ export declare class ImageClip extends BaseClip {
     private img;
     private pixiTexture;
     private frames;
+    /**
+     * Unique identifier for this clip instance
+     */
+    id: string;
+    /**
+     * Array of effects to be applied to this clip
+     * Each effect specifies key, startTime, duration, and optional targets
+     */
+    effects: Array<{
+        id: string;
+        key: string;
+        startTime: number;
+        duration: number;
+    }>;
     /**
      * Load an image clip from a URL using PixiJS Assets
      * This is optimized for Studio as it uses Texture directly
@@ -77,6 +92,18 @@ export declare class ImageClip extends BaseClip {
     }>;
     split(time: number): Promise<[this, this]>;
     clone(): Promise<this>;
+    addEffect(effect: {
+        id: string;
+        key: string;
+        startTime: number;
+        duration: number;
+    }): void;
+    editEffect(effectId: string, newEffectData: Partial<{
+        key: string;
+        startTime: number;
+        duration: number;
+    }>): void;
+    removeEffect(effectId: string): void;
     destroy(): void;
     toJSON(main?: boolean): ImageClipJSON;
     /**

package/dist/clips/index.d.ts

@@ -6,3 +6,4 @@ export * from './video-clip';
 export { VideoClip } from './video-clip';
 export type { IMP4ClipOpts } from './video-clip';
 export * from './text-clip';
+export * from './effect-clip';