@designcombo/video 0.0.1 → 0.0.2

package/dist/{SharedSystems-BhqLJf5z.js → SharedSystems-BWe03l6N.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-C333riU-.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-CKduQ9yw.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-C333riU-.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-BWe03l6N.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-BSX8DZj-.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-C333riU-.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-BWe03l6N.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-CwPYLzJJ.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-C333riU-.js";
+import "./webworkerAll-aNnyDpl9.js";
 class q {
   constructor(e) {
     this._lastTransform = "", this._observer = null, this._tickerAttached = !1, this.updateTranslation = () => {

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

@@ -29,7 +29,7 @@ export interface ICaptionClipOpts {
      * @default '#ffffff'
      */
     fill?: string | number | {
-        type: 'gradient';
+        type: "gradient";
         x0: number;
         y0: number;
         x1: number;
@@ -104,7 +104,7 @@ export interface ICaptionClipOpts {
     stroke?: string | number | {
         color: string | number;
         width: number;
-        join?: 'miter' | 'round' | 'bevel';
+        join?: "miter" | "round" | "bevel";
     };
     /**
      * Stroke width in pixels (used when stroke is a simple color)
@@ -115,7 +115,7 @@ export interface ICaptionClipOpts {
      * Text alignment ('left', 'center', 'right')
      * @default 'center'
      */
-    align?: 'left' | 'center' | 'right';
+    align?: "left" | "center" | "right";
     /**
      * Drop shadow configuration
      */
@@ -163,7 +163,7 @@ export interface ICaptionClipOpts {
  * captionClip.duration = 3e6; // 3 seconds
  */
 export declare class CaptionClip extends BaseClip implements IClip {
-    ready: IClip['ready'];
+    ready: IClip["ready"];
     private _meta;
     get meta(): {
         duration: number;
@@ -216,6 +216,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;
@@ -225,7 +239,7 @@ export declare class CaptionClip extends BaseClip implements IClip {
     private externalRenderer;
     private pixiApp;
     private originalOpts;
-    constructor(text: string, opts?: ICaptionClipOpts, renderer?: Application['renderer']);
+    constructor(text: string, opts?: ICaptionClipOpts, renderer?: Application["renderer"]);
     private lastLoggedTime;
     updateState(currentTime: number): void;
     /**
@@ -238,13 +252,25 @@ export declare class CaptionClip extends BaseClip implements IClip {
     /**
      * Set an external renderer (e.g., from Studio) to avoid creating our own Pixi App
      */
-    setRenderer(renderer: Application['renderer']): void;
+    setRenderer(renderer: Application["renderer"]): void;
     private getRenderer;
     tick(time: number): Promise<{
         video: ImageBitmap;
-        state: 'success';
+        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/image-clip.d.ts

@@ -43,6 +43,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 +91,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/text-clip.d.ts

@@ -28,7 +28,7 @@ export interface ITextClipOpts {
      * @default '#ffffff'
      */
     fill?: string | number | {
-        type: 'gradient';
+        type: "gradient";
         x0: number;
         y0: number;
         x1: number;
@@ -44,8 +44,8 @@ export interface ITextClipOpts {
     stroke?: string | number | {
         color: string | number;
         width: number;
-        join?: 'miter' | 'round' | 'bevel';
-        cap?: 'butt' | 'round' | 'square';
+        join?: "miter" | "round" | "bevel";
+        cap?: "butt" | "round" | "square";
         miterLimit?: number;
     };
     /**
@@ -57,7 +57,7 @@ export interface ITextClipOpts {
      * Text alignment ('left', 'center', 'right')
      * @default 'left'
      */
-    align?: 'left' | 'center' | 'right';
+    align?: "left" | "center" | "right";
     /**
      * Drop shadow configuration
      */
@@ -108,7 +108,7 @@ export interface ITextClipOpts {
  * textClip.duration = 5e6; // 5 seconds
  */
 export declare class TextClip extends BaseClip {
-    ready: IClip['ready'];
+    ready: IClip["ready"];
     private _meta;
     get meta(): {
         duration: number;
@@ -171,13 +171,27 @@ export declare class TextClip extends BaseClip {
     private externalRenderer;
     private pixiApp;
     private originalOpts;
-    constructor(text: string, opts?: ITextClipOpts, renderer?: Application['renderer']);
+    /**
+     * 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;
+    }>;
+    constructor(text: string, opts?: ITextClipOpts, renderer?: Application["renderer"]);
     /**
      * Set an external renderer (e.g., from Studio) to avoid creating our own Pixi App
      * This is an optimization for Studio preview
      * Can be called before ready() completes
      */
-    setRenderer(renderer: Application['renderer']): void;
+    setRenderer(renderer: Application["renderer"]): void;
     /**
      * Get the renderer for rendering text to RenderTexture
      * Creates a minimal renderer as fallback if no external renderer is provided
@@ -192,9 +206,21 @@ export declare class TextClip extends BaseClip {
     getTexture(): Promise<Texture | null>;
     tick(_time: number): Promise<{
         video: ImageBitmap;
-        state: 'success';
+        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>;
     /**
      * Update text styling options and refresh the texture