@shotstack/shotstack-studio 2.14.0 → 2.14.1

package/dist/shotstack-studio.es.js

@@ -11,7 +11,7 @@ import "pixi.js/text-html";
 import "pixi.js/sprite-tiling";
 import "pixi.js/filters";
 import "pixi.js/mesh";
-const bA = "2.13.3", vA = {
+const bA = "2.14.0", vA = {
   version: bA
 };
 function M1(e, t, i) {
@@ -67390,20 +67390,24 @@ class Aa extends Ga {
           style: {
             ...o.style || {},
             letterSpacing: n.letterSpacing,
-            wordSpacing: n.wordSpacing,
+            ...this.supportsWordSpacing() ? { wordSpacing: n.wordSpacing } : {},
             lineHeight: n.lineHeight
           }
         };
         this.edit.updateClipInDocument(a, { asset: l }), this.edit.resolveClip(a);
       } else
         this.updateClipProperty({
-          style: { letterSpacing: n.letterSpacing, wordSpacing: n.wordSpacing, lineHeight: n.lineHeight }
+          style: {
+            letterSpacing: n.letterSpacing,
+            ...this.supportsWordSpacing() ? { wordSpacing: n.wordSpacing } : {},
+            lineHeight: n.lineHeight
+          }
         });
     }), this.spacingPanel.onDragEnd(() => {
       const n = this.dragManager.end("spacing-panel");
       if (!n || !this.spacingPanel) return;
       const { clipId: s } = n, a = this.spacingPanel.getState(), o = structuredClone(n.initialState);
-      o.asset && (o.asset.type === "rich-text" || o.asset.type === "rich-caption") && o.asset.style && (o.asset.style.letterSpacing = a.letterSpacing, o.asset.style.wordSpacing = a.wordSpacing, o.asset.style.lineHeight = a.lineHeight), this.edit.commitClipUpdate(s, n.initialState, o);
+      o.asset && (o.asset.type === "rich-text" || o.asset.type === "rich-caption") && o.asset.style && (o.asset.style.letterSpacing = a.letterSpacing, this.supportsWordSpacing() && (o.asset.style.wordSpacing = a.wordSpacing), o.asset.style.lineHeight = a.lineHeight), this.edit.commitClipUpdate(s, n.initialState, o);
     }), this.spacingPanel.mount(r)), this.animationPopup = this.container.querySelector("[data-animation-popup]"), this.animationDurationSlider = this.container.querySelector("[data-animation-duration]"), this.animationDurationValue = this.container.querySelector("[data-animation-duration-value]"), this.animationStyleSection = this.container.querySelector("[data-animation-style-section]"), this.animationDirectionSection = this.container.querySelector("[data-animation-direction-section]"), this.transitionPopup = this.container.querySelector("[data-transition-popup]"), this.effectPopup = this.container.querySelector("[data-effect-popup]"), this.transitionPopup && (this.transitionPanel = new rn(), this.transitionPanel.onChange(() => {
       const n = this.transitionPanel?.getClipValue();
       this.applyClipUpdate({ transition: n });
@@ -67687,6 +67691,13 @@ class Aa extends Ga {
   createSpacingPanel() {
     return new g1();
   }
+  /**
+   * Whether this toolbar's asset type accepts `style.wordSpacing`. Rich-caption
+   * does not — its schema rejects the key, so it must never be written.
+   */
+  supportsWordSpacing() {
+    return !0;
+  }
   createFontColorPicker() {
     return new rA();
   }
@@ -68207,7 +68218,10 @@ class OQ extends Aa {
     return new iA({});
   }
   createSpacingPanel() {
-    return new g1({ showWordSpacing: !0 });
+    return new g1();
+  }
+  supportsWordSpacing() {
+    return !1;
   }
   createFontColorPicker() {
     return new rA({ hideGradient: !0 });

package/dist/shotstack-studio.umd.js

@@ -1,4 +1,4 @@
-(function(zi,un){typeof exports=="object"&&typeof module<"u"?un(exports,require("pixi.js"),require("howler"),require("pixi-filters"),require("opentype.js"),require("pixi.js/app"),require("pixi.js/events"),require("pixi.js/graphics"),require("pixi.js/text"),require("pixi.js/text-html"),require("pixi.js/sprite-tiling"),require("pixi.js/filters"),require("pixi.js/mesh")):typeof define=="function"&&define.amd?define(["exports","pixi.js","howler","pixi-filters","opentype.js","pixi.js/app","pixi.js/events","pixi.js/graphics","pixi.js/text","pixi.js/text-html","pixi.js/sprite-tiling","pixi.js/filters","pixi.js/mesh"],un):(zi=typeof globalThis<"u"?globalThis:zi||self,un(zi.ShotstackStudio={},zi.PIXI,zi.Howler,zi.PIXI,zi.opentype))})(this,function(zi,un,pA,mA,gA){"use strict";var $n=typeof document<"u"?document.currentScript:null;function mc(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const i in e)if(i!=="default"){const r=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,r.get?r:{enumerable:!0,get:()=>e[i]})}}return t.default=e,Object.freeze(t)}const K=mc(un),x1=mc(pA),al=mc(mA),Th=mc(gA),yA={version:"2.13.3"};function C1(e,t,i){const r=1-e;return 3*r*r*e*t+3*r*e*e*i+e*e*e}class bA{curves={};constructor(){this.initializeCurves()}initializeCurves(){this.curves={smooth:[[.5,0],[.5,1]],ease:[[.25,.1],[.25,1]],easeIn:[[.42,0],[1,1]],easeOut:[[0,0],[.58,1]],easeInOut:[[.42,0],[.58,1]],easeInQuad:[[.55,.085],[.68,.53]],easeInCubic:[[.55,.055],[.675,.19]],easeInQuart:[[.895,.03],[.685,.22]],easeInQuint:[[.755,.05],[.855,.06]],easeInSine:[[.47,0],[.745,.715]],easeInExpo:[[.95,.05],[.795,.035]],easeInCirc:[[.6,.04],[.98,.335]],easeInBack:[[.6,-.28],[.735,.045]],easeOutQuad:[[.25,.46],[.45,.94]],easeOutCubic:[[.215,.61],[.355,1]],easeOutQuart:[[.165,.84],[.44,1]],easeOutQuint:[[.23,1],[.32,1]],easeOutSine:[[.39,.575],[.565,1]],easeOutExpo:[[.19,1],[.22,1]],easeOutCirc:[[.075,.82],[.165,1]],easeOutBack:[[.175,.885],[.32,1.275]],easeInOutQuad:[[.455,.03],[.515,.955]],easeInOutCubic:[[.645,.045],[.355,1]],easeInOutQuart:[[.77,0],[.175,1]],easeInOutQuint:[[.86,0],[.07,1]],easeInOutSine:[[.445,.05],[.55,.95]],easeInOutExpo:[[1,0],[0,1]],easeInOutCirc:[[.785,.135],[.15,.86]],easeInOutBack:[[.68,-.55],[.265,1.55]]}}getValue(t,i,r,n){if(r<=0)return t;if(r>=1)return i;const s=this.curves[n??""]??this.curves.ease,[[a,o],[l,u]]=s,c=this.solveForT(r,a,l),f=C1(c,o,u);return t+(i-t)*f}solveForT(t,i,r){let n=0,s=1,a=t;for(let o=0;o<24;o+=1){const l=C1(a,i,r)-t;if(Math.abs(l)<1e-5)break;l<0?n=a:s=a,a=(n+s)/2}return a}}class sa{property;length;cubicBuilder;cachedIndex=0;constructor(t,i,r=0){this.property=this.createKeyframes(t,i,r),this.length=i,this.cubicBuilder=new bA}getValue(t){const i=this.findKeyframe(t);if(!i){if(this.property.length>0){if(t>=this.length)return this.property[this.property.length-1].to;if(t<0)return this.property[0].from}return 1}const r=(t-i.start)/i.length;switch(i.interpolation){case"bezier":return this.cubicBuilder.getValue(i.from,i.to,r,i.easing);case"constant":return i.from;case"linear":default:return i.from+(i.to-i.from)*r}}findKeyframe(t){const i=this.property;if(i.length===0)return;const r=i[this.cachedIndex];if(r){const o=r.start+r.length;if(Number.isFinite(o)&&t>=r.start&&t<o)return r}const n=this.cachedIndex+1;if(n<i.length){const o=i[n],l=o.start+o.length;if(Number.isFinite(l)&&t>=o.start&&t<l)return this.cachedIndex=n,o}const s=this.cachedIndex-1;if(s>=0){const o=i[s],l=o.start+o.length;if(Number.isFinite(l)&&t>=o.start&&t<l)return this.cachedIndex=s,o}const a=this.binarySearchKeyframe(t);if(a!==-1)return this.cachedIndex=a,i[a]}binarySearchKeyframe(t){const i=this.property;let r=0,n=i.length-1;for(;r<=n;){const s=Math.floor((r+n)/2),a=i[s],o=a.start+a.length;if(!Number.isFinite(o)||t>=o)r=s+1;else if(t<a.start)n=s-1;else return s}return-1}createKeyframes(t,i,r=0){if(typeof t=="number")return[{start:0,length:i,from:t,to:t}];if(!t.length)throw new Error("Keyframes should have at least one value.");const n=this.createNormalizedKeyframes(t);return this.validateKeyframes(n),this.insertFillerKeyframes(n,i,r)}createNormalizedKeyframes(t){return t.filter(i=>typeof i.start=="number"&&typeof i.length=="number").toSorted((i,r)=>i.start-r.start).map(i=>({start:i.start,length:i.length,from:typeof i.from=="number"?i.from:0,to:typeof i.to=="number"?i.to:0,interpolation:i.interpolation,easing:i.easing}))}validateKeyframes(t){for(let i=0;i<t.length;i+=1){const r=t[i],n=t[i+1];if(!n){if(r.start+r.length>this.length)throw new Error("Last keyframe exceeds the maximum duration.");break}if(r.start+r.length>n.start)throw new Error("Overlapping keyframes detected.")}}insertFillerKeyframes(t,i,r=0){const n=[];for(let s=0;s<t.length;s+=1){const a=t[s],o=t[s+1];if(s===0&&a.start!==0){const c={start:0,length:a.start,from:r,to:a.from};n.push(c)}if(n.push(a),!o){if(a.start+a.length<i){const f=a.start+a.length,d={start:f,length:i-f,from:a.to,to:a.to};n.push(d)}break}if(a.start+a.length!==o.start){const c=a.start+a.length,f=o.start-c,d={start:c,length:f,from:a.to,to:o.from};n.push(d)}}return n}}class aa{baseValue;mode;layers=[];length;clampRange;constructor(t,i,r,n){this.baseValue=t,this.length=i,this.mode=r,this.clampRange=n}addLayer(t){if(t.length===0)return;const i=this.mode==="additive"?0:1;this.layers.push(new sa(t,this.length,i))}getValue(t){if(this.layers.length===0)return this.baseValue;if(this.mode==="additive"){let r=this.baseValue;for(const n of this.layers)r+=n.getValue(t);return r}let i=this.baseValue;for(const r of this.layers)i*=r.getValue(t);return this.clampRange&&(i=Math.max(this.clampRange.min,Math.min(this.clampRange.max,i))),i}}class vA{clipConfiguration;effectPreset;constructor(t){this.clipConfiguration=t;const[i,r]=(t.effect??"").split(/(Slow|Fast)/);this.effectPreset={name:i,speed:r}}buildRelative(t,i){const r=[],n=[],s=[],a=[],o=[],{effect:l,length:u}=this.clipConfiguration;if(!l)return{offsetXKeyframes:r,offsetYKeyframes:n,opacityKeyframes:s,scaleKeyframes:a,rotationKeyframes:o};const c=0,f=this.getPresetName();switch(f){case"zoomIn":{const d=this.getZoomSpeed();a.push({from:1,to:d,start:c,length:u,interpolation:"linear"});break}case"zoomOut":{const d=this.getZoomSpeed();a.push({from:d,to:1,start:c,length:u,interpolation:"linear"});break}case"slideLeft":case"slideRight":case"slideUp":case"slideDown":{const d=f==="slideLeft"||f==="slideRight",h=f==="slideLeft"||f==="slideUp",m=this.getFittedSize(t,i),v=d?t.width:t.height,g=d?m.width:m.height;let w=this.getSlideStart();const C=v+v*w*2;if(g<C){const k=C/g;a.push({from:k,to:k,start:c,length:u,interpolation:"linear"})}else w=(g-v)/2/v;const[x,_]=h?[w,-w]:[-w,w];(d?r:n).push({from:x,to:_,start:c,length:u});break}}return{offsetXKeyframes:r,offsetYKeyframes:n,opacityKeyframes:s,scaleKeyframes:a,rotationKeyframes:o}}getPresetName(){return this.effectPreset.name}getZoomSpeed(){const{name:t,speed:i}=this.effectPreset;if(t.startsWith("zoom"))switch(i){case"Slow":return 1.1;case"Fast":return 1.7;default:return 1.3}return 0}getSlideStart(){const{name:t,speed:i}=this.effectPreset;if(t.startsWith("slide"))switch(i){case"Slow":return .03;case"Fast":return .2;default:return .12}return 0}getFittedSize(t,i){switch(this.clipConfiguration.fit??"crop"){case"cover":case"crop":{const n=Math.max(t.width/i.width,t.height/i.height);return{width:i.width*n,height:i.height*n}}case"contain":{const n=Math.min(t.width/i.width,t.height/i.height);return{width:i.width*n,height:i.height*n}}case"none":default:return i}}}class wA{clipConfiguration;inPreset;outPreset;constructor(t){this.clipConfiguration=t,this.inPreset=this.parseTransition(t.transition?.in),this.outPreset=this.parseTransition(t.transition?.out)}parseTransition(t){const[i,r]=(t??"").split(/(Slow|Fast|VeryFast)/);return{name:i,speed:r}}buildRelative(){return{in:this.buildTransitionKeyframes("in"),out:this.buildTransitionKeyframes("out")}}createEmptyKeyframeSet(){return{offsetXKeyframes:[],offsetYKeyframes:[],opacityKeyframes:[],scaleKeyframes:[],rotationKeyframes:[],maskXKeyframes:[],brightnessKeyframes:[],wipeFromRight:!1}}buildTransitionKeyframes(t){const i=this.createEmptyKeyframeSet();if(!(t==="in"?this.clipConfiguration.transition?.in:this.clipConfiguration.transition?.out))return i;const n=this.getPresetLength(t),s=t==="in"?0:this.clipConfiguration.length-n,a=this.getPresetName(t),o=t==="in";switch(a){case"fade":{const[l,u]=o?[0,1]:[1,0];i.opacityKeyframes.push({from:l,to:u,start:s,length:n,interpolation:"bezier",easing:"easeInOut"});break}case"zoom":{const[l,u]=o?[10,1]:[1,10],[c,f]=o?[0,1]:[1,0],d=o?"easeIn":"easeOut";o?i.scaleKeyframes.push({from:l,to:u,start:s,length:n,interpolation:"linear"}):i.scaleKeyframes.push({from:l,to:u,start:s,length:n,interpolation:"bezier",easing:d}),i.opacityKeyframes.push({from:c,to:f,start:s,length:n,interpolation:"bezier",easing:d});break}case"slideLeft":case"slideRight":case"slideUp":case"slideDown":{const l=a==="slideLeft"||a==="slideRight",u=a==="slideLeft"||a==="slideUp",c=.025,[f,d]=o?[u?c:-c,0]:[0,u?-c:c],h=o?"linear":"bezier",[m,v]=o?[0,1]:[1,0];(l?i.offsetXKeyframes:i.offsetYKeyframes).push(o?{from:f,to:d,start:s,length:n,interpolation:h}:{from:f,to:d,start:s,length:n,interpolation:h,easing:"ease"}),i.opacityKeyframes.push({from:m,to:v,start:s,length:n,interpolation:"bezier",easing:"ease"});break}case"carouselLeft":case"carouselRight":case"carouselUp":case"carouselDown":{const l=a==="carouselLeft"||a==="carouselRight",u=a==="carouselLeft"||a==="carouselUp",c=l&&1||(o?1.05:1.1),[f,d]=o?[u?c:-c,0]:[0,u?-c:c];(l?i.offsetXKeyframes:i.offsetYKeyframes).push(o?{from:f,to:d,start:s,length:n,interpolation:"linear"}:{from:f,to:d,start:s,length:n,interpolation:"bezier",easing:"ease"});break}case"reveal":{const[l,u]=o?[0,1]:[1,0];i.maskXKeyframes.push({from:l,to:u,start:s,length:n,interpolation:"bezier",easing:"ease"});break}case"wipeLeft":case"wipeRight":{const[l,u]=o?[1,-1]:[-1,1];i.brightnessKeyframes.push({from:l,to:u,start:s,length:n,interpolation:"bezier",easing:"easeInOut"}),i.wipeFromRight=a==="wipeLeft"?o:!o;break}}return i}getPresetName(t){return t==="in"?this.inPreset.name:this.outPreset.name}getPresetLength(t){const{name:i,speed:r}=t==="in"?this.inPreset:this.outPreset,n=i.startsWith("carousel"),s=i.startsWith("slide");if(i==="zoom")return .4;switch(r){case"Slow":return 2;case"Fast":return n||s?.25:.5;case"VeryFast":return .25;default:return n||s?.5:1}}}const k1="1.1764706",xA=`
+(function(zi,un){typeof exports=="object"&&typeof module<"u"?un(exports,require("pixi.js"),require("howler"),require("pixi-filters"),require("opentype.js"),require("pixi.js/app"),require("pixi.js/events"),require("pixi.js/graphics"),require("pixi.js/text"),require("pixi.js/text-html"),require("pixi.js/sprite-tiling"),require("pixi.js/filters"),require("pixi.js/mesh")):typeof define=="function"&&define.amd?define(["exports","pixi.js","howler","pixi-filters","opentype.js","pixi.js/app","pixi.js/events","pixi.js/graphics","pixi.js/text","pixi.js/text-html","pixi.js/sprite-tiling","pixi.js/filters","pixi.js/mesh"],un):(zi=typeof globalThis<"u"?globalThis:zi||self,un(zi.ShotstackStudio={},zi.PIXI,zi.Howler,zi.PIXI,zi.opentype))})(this,function(zi,un,pA,mA,gA){"use strict";var $n=typeof document<"u"?document.currentScript:null;function mc(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const i in e)if(i!=="default"){const r=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,r.get?r:{enumerable:!0,get:()=>e[i]})}}return t.default=e,Object.freeze(t)}const K=mc(un),x1=mc(pA),al=mc(mA),Th=mc(gA),yA={version:"2.14.0"};function C1(e,t,i){const r=1-e;return 3*r*r*e*t+3*r*e*e*i+e*e*e}class bA{curves={};constructor(){this.initializeCurves()}initializeCurves(){this.curves={smooth:[[.5,0],[.5,1]],ease:[[.25,.1],[.25,1]],easeIn:[[.42,0],[1,1]],easeOut:[[0,0],[.58,1]],easeInOut:[[.42,0],[.58,1]],easeInQuad:[[.55,.085],[.68,.53]],easeInCubic:[[.55,.055],[.675,.19]],easeInQuart:[[.895,.03],[.685,.22]],easeInQuint:[[.755,.05],[.855,.06]],easeInSine:[[.47,0],[.745,.715]],easeInExpo:[[.95,.05],[.795,.035]],easeInCirc:[[.6,.04],[.98,.335]],easeInBack:[[.6,-.28],[.735,.045]],easeOutQuad:[[.25,.46],[.45,.94]],easeOutCubic:[[.215,.61],[.355,1]],easeOutQuart:[[.165,.84],[.44,1]],easeOutQuint:[[.23,1],[.32,1]],easeOutSine:[[.39,.575],[.565,1]],easeOutExpo:[[.19,1],[.22,1]],easeOutCirc:[[.075,.82],[.165,1]],easeOutBack:[[.175,.885],[.32,1.275]],easeInOutQuad:[[.455,.03],[.515,.955]],easeInOutCubic:[[.645,.045],[.355,1]],easeInOutQuart:[[.77,0],[.175,1]],easeInOutQuint:[[.86,0],[.07,1]],easeInOutSine:[[.445,.05],[.55,.95]],easeInOutExpo:[[1,0],[0,1]],easeInOutCirc:[[.785,.135],[.15,.86]],easeInOutBack:[[.68,-.55],[.265,1.55]]}}getValue(t,i,r,n){if(r<=0)return t;if(r>=1)return i;const s=this.curves[n??""]??this.curves.ease,[[a,o],[l,u]]=s,c=this.solveForT(r,a,l),f=C1(c,o,u);return t+(i-t)*f}solveForT(t,i,r){let n=0,s=1,a=t;for(let o=0;o<24;o+=1){const l=C1(a,i,r)-t;if(Math.abs(l)<1e-5)break;l<0?n=a:s=a,a=(n+s)/2}return a}}class sa{property;length;cubicBuilder;cachedIndex=0;constructor(t,i,r=0){this.property=this.createKeyframes(t,i,r),this.length=i,this.cubicBuilder=new bA}getValue(t){const i=this.findKeyframe(t);if(!i){if(this.property.length>0){if(t>=this.length)return this.property[this.property.length-1].to;if(t<0)return this.property[0].from}return 1}const r=(t-i.start)/i.length;switch(i.interpolation){case"bezier":return this.cubicBuilder.getValue(i.from,i.to,r,i.easing);case"constant":return i.from;case"linear":default:return i.from+(i.to-i.from)*r}}findKeyframe(t){const i=this.property;if(i.length===0)return;const r=i[this.cachedIndex];if(r){const o=r.start+r.length;if(Number.isFinite(o)&&t>=r.start&&t<o)return r}const n=this.cachedIndex+1;if(n<i.length){const o=i[n],l=o.start+o.length;if(Number.isFinite(l)&&t>=o.start&&t<l)return this.cachedIndex=n,o}const s=this.cachedIndex-1;if(s>=0){const o=i[s],l=o.start+o.length;if(Number.isFinite(l)&&t>=o.start&&t<l)return this.cachedIndex=s,o}const a=this.binarySearchKeyframe(t);if(a!==-1)return this.cachedIndex=a,i[a]}binarySearchKeyframe(t){const i=this.property;let r=0,n=i.length-1;for(;r<=n;){const s=Math.floor((r+n)/2),a=i[s],o=a.start+a.length;if(!Number.isFinite(o)||t>=o)r=s+1;else if(t<a.start)n=s-1;else return s}return-1}createKeyframes(t,i,r=0){if(typeof t=="number")return[{start:0,length:i,from:t,to:t}];if(!t.length)throw new Error("Keyframes should have at least one value.");const n=this.createNormalizedKeyframes(t);return this.validateKeyframes(n),this.insertFillerKeyframes(n,i,r)}createNormalizedKeyframes(t){return t.filter(i=>typeof i.start=="number"&&typeof i.length=="number").toSorted((i,r)=>i.start-r.start).map(i=>({start:i.start,length:i.length,from:typeof i.from=="number"?i.from:0,to:typeof i.to=="number"?i.to:0,interpolation:i.interpolation,easing:i.easing}))}validateKeyframes(t){for(let i=0;i<t.length;i+=1){const r=t[i],n=t[i+1];if(!n){if(r.start+r.length>this.length)throw new Error("Last keyframe exceeds the maximum duration.");break}if(r.start+r.length>n.start)throw new Error("Overlapping keyframes detected.")}}insertFillerKeyframes(t,i,r=0){const n=[];for(let s=0;s<t.length;s+=1){const a=t[s],o=t[s+1];if(s===0&&a.start!==0){const c={start:0,length:a.start,from:r,to:a.from};n.push(c)}if(n.push(a),!o){if(a.start+a.length<i){const f=a.start+a.length,d={start:f,length:i-f,from:a.to,to:a.to};n.push(d)}break}if(a.start+a.length!==o.start){const c=a.start+a.length,f=o.start-c,d={start:c,length:f,from:a.to,to:o.from};n.push(d)}}return n}}class aa{baseValue;mode;layers=[];length;clampRange;constructor(t,i,r,n){this.baseValue=t,this.length=i,this.mode=r,this.clampRange=n}addLayer(t){if(t.length===0)return;const i=this.mode==="additive"?0:1;this.layers.push(new sa(t,this.length,i))}getValue(t){if(this.layers.length===0)return this.baseValue;if(this.mode==="additive"){let r=this.baseValue;for(const n of this.layers)r+=n.getValue(t);return r}let i=this.baseValue;for(const r of this.layers)i*=r.getValue(t);return this.clampRange&&(i=Math.max(this.clampRange.min,Math.min(this.clampRange.max,i))),i}}class vA{clipConfiguration;effectPreset;constructor(t){this.clipConfiguration=t;const[i,r]=(t.effect??"").split(/(Slow|Fast)/);this.effectPreset={name:i,speed:r}}buildRelative(t,i){const r=[],n=[],s=[],a=[],o=[],{effect:l,length:u}=this.clipConfiguration;if(!l)return{offsetXKeyframes:r,offsetYKeyframes:n,opacityKeyframes:s,scaleKeyframes:a,rotationKeyframes:o};const c=0,f=this.getPresetName();switch(f){case"zoomIn":{const d=this.getZoomSpeed();a.push({from:1,to:d,start:c,length:u,interpolation:"linear"});break}case"zoomOut":{const d=this.getZoomSpeed();a.push({from:d,to:1,start:c,length:u,interpolation:"linear"});break}case"slideLeft":case"slideRight":case"slideUp":case"slideDown":{const d=f==="slideLeft"||f==="slideRight",h=f==="slideLeft"||f==="slideUp",m=this.getFittedSize(t,i),v=d?t.width:t.height,g=d?m.width:m.height;let w=this.getSlideStart();const C=v+v*w*2;if(g<C){const k=C/g;a.push({from:k,to:k,start:c,length:u,interpolation:"linear"})}else w=(g-v)/2/v;const[x,_]=h?[w,-w]:[-w,w];(d?r:n).push({from:x,to:_,start:c,length:u});break}}return{offsetXKeyframes:r,offsetYKeyframes:n,opacityKeyframes:s,scaleKeyframes:a,rotationKeyframes:o}}getPresetName(){return this.effectPreset.name}getZoomSpeed(){const{name:t,speed:i}=this.effectPreset;if(t.startsWith("zoom"))switch(i){case"Slow":return 1.1;case"Fast":return 1.7;default:return 1.3}return 0}getSlideStart(){const{name:t,speed:i}=this.effectPreset;if(t.startsWith("slide"))switch(i){case"Slow":return .03;case"Fast":return .2;default:return .12}return 0}getFittedSize(t,i){switch(this.clipConfiguration.fit??"crop"){case"cover":case"crop":{const n=Math.max(t.width/i.width,t.height/i.height);return{width:i.width*n,height:i.height*n}}case"contain":{const n=Math.min(t.width/i.width,t.height/i.height);return{width:i.width*n,height:i.height*n}}case"none":default:return i}}}class wA{clipConfiguration;inPreset;outPreset;constructor(t){this.clipConfiguration=t,this.inPreset=this.parseTransition(t.transition?.in),this.outPreset=this.parseTransition(t.transition?.out)}parseTransition(t){const[i,r]=(t??"").split(/(Slow|Fast|VeryFast)/);return{name:i,speed:r}}buildRelative(){return{in:this.buildTransitionKeyframes("in"),out:this.buildTransitionKeyframes("out")}}createEmptyKeyframeSet(){return{offsetXKeyframes:[],offsetYKeyframes:[],opacityKeyframes:[],scaleKeyframes:[],rotationKeyframes:[],maskXKeyframes:[],brightnessKeyframes:[],wipeFromRight:!1}}buildTransitionKeyframes(t){const i=this.createEmptyKeyframeSet();if(!(t==="in"?this.clipConfiguration.transition?.in:this.clipConfiguration.transition?.out))return i;const n=this.getPresetLength(t),s=t==="in"?0:this.clipConfiguration.length-n,a=this.getPresetName(t),o=t==="in";switch(a){case"fade":{const[l,u]=o?[0,1]:[1,0];i.opacityKeyframes.push({from:l,to:u,start:s,length:n,interpolation:"bezier",easing:"easeInOut"});break}case"zoom":{const[l,u]=o?[10,1]:[1,10],[c,f]=o?[0,1]:[1,0],d=o?"easeIn":"easeOut";o?i.scaleKeyframes.push({from:l,to:u,start:s,length:n,interpolation:"linear"}):i.scaleKeyframes.push({from:l,to:u,start:s,length:n,interpolation:"bezier",easing:d}),i.opacityKeyframes.push({from:c,to:f,start:s,length:n,interpolation:"bezier",easing:d});break}case"slideLeft":case"slideRight":case"slideUp":case"slideDown":{const l=a==="slideLeft"||a==="slideRight",u=a==="slideLeft"||a==="slideUp",c=.025,[f,d]=o?[u?c:-c,0]:[0,u?-c:c],h=o?"linear":"bezier",[m,v]=o?[0,1]:[1,0];(l?i.offsetXKeyframes:i.offsetYKeyframes).push(o?{from:f,to:d,start:s,length:n,interpolation:h}:{from:f,to:d,start:s,length:n,interpolation:h,easing:"ease"}),i.opacityKeyframes.push({from:m,to:v,start:s,length:n,interpolation:"bezier",easing:"ease"});break}case"carouselLeft":case"carouselRight":case"carouselUp":case"carouselDown":{const l=a==="carouselLeft"||a==="carouselRight",u=a==="carouselLeft"||a==="carouselUp",c=l&&1||(o?1.05:1.1),[f,d]=o?[u?c:-c,0]:[0,u?-c:c];(l?i.offsetXKeyframes:i.offsetYKeyframes).push(o?{from:f,to:d,start:s,length:n,interpolation:"linear"}:{from:f,to:d,start:s,length:n,interpolation:"bezier",easing:"ease"});break}case"reveal":{const[l,u]=o?[0,1]:[1,0];i.maskXKeyframes.push({from:l,to:u,start:s,length:n,interpolation:"bezier",easing:"ease"});break}case"wipeLeft":case"wipeRight":{const[l,u]=o?[1,-1]:[-1,1];i.brightnessKeyframes.push({from:l,to:u,start:s,length:n,interpolation:"bezier",easing:"easeInOut"}),i.wipeFromRight=a==="wipeLeft"?o:!o;break}}return i}getPresetName(t){return t==="in"?this.inPreset.name:this.outPreset.name}getPresetLength(t){const{name:i,speed:r}=t==="in"?this.inPreset:this.outPreset,n=i.startsWith("carousel"),s=i.startsWith("slide");if(i==="zoom")return .4;switch(r){case"Slow":return 2;case"Fast":return n||s?.25:.5;case"VeryFast":return .25;default:return n||s?.5:1}}}const k1="1.1764706",xA=`
 in vec2 vTextureCoord;
 out vec4 finalColor;
 
@@ -1466,7 +1466,7 @@ Please check your media files.`}class oE{element;options;currentState=null;curre
 				<button data-action="effect-toggle" class="ss-toolbar-btn ss-toolbar-btn--text-edit" title="Effect">Effect</button>
 				<div data-effect-popup class="ss-toolbar-popup ss-toolbar-popup--effect"></div>
 			</div>
-		`,this.sizeInput=this.container.querySelector("[data-size-input]"),this.sizePopup=this.container.querySelector("[data-size-popup]"),this.weightDropdown=this.container.querySelector(".ss-toolbar-dropdown--weight"),this.weightPopup=this.container.querySelector("[data-weight-popup]"),this.weightPreview=this.container.querySelector("[data-weight-preview]"),this.buildWeightPopup(),this.fontPopup=this.container.querySelector("[data-font-popup]"),this.fontPreview=this.container.querySelector("[data-font-preview]"),this.alignIcon=this.container.querySelector("[data-align-icon]"),this.verticalAlignIcon=this.container.querySelector("[data-vertical-align-icon]"),this.transformBtn=this.container.querySelector("[data-action='transform']"),this.underlineBtn=this.container.querySelector("[data-action='underline']"),this.linethroughBtn=this.container.querySelector("[data-action='linethrough']"),this.textEditPopup=this.container.querySelector("[data-text-edit-popup]"),this.textEditArea=this.container.querySelector("[data-text-edit-area]"),this.autocompletePopup=this.container.querySelector("[data-autocomplete-popup]"),this.autocompleteItems=this.container.querySelector("[data-autocomplete-items]"),this.autocompleteItems?.addEventListener("click",n=>{const s=n.target.closest("[data-var-name]");if(!s)return;n.stopPropagation();const{varName:a}=s.dataset;a&&this.insertVariable(a)}),this.boundHandleClick=this.handleClick.bind(this),this.container.addEventListener("click",this.boundHandleClick),this.sizeInput?.addEventListener("click",n=>{n.stopPropagation(),this.toggleSizePopup()}),this.sizeInput?.addEventListener("blur",()=>this.applyManualSize()),this.sizeInput?.addEventListener("keydown",n=>{n.key==="Enter"&&(this.applyManualSize(),this.sizeInput?.blur(),this.closeAllPopups())}),this.buildSizePopup(),this.colorDisplay=this.container.querySelector("[data-color-display]"),this.fontColorPopup=this.container.querySelector("[data-font-color-popup]");const i=this.container.querySelector("[data-font-color-picker]");i&&(this.fontColorPicker=this.createFontColorPicker(),this.fontColorPicker.mount(i),this.fontColorPicker.onChange(n=>{this.updateFontColorProperty(n)})),this.spacingPopup=this.container.querySelector("[data-spacing-popup]");const r=this.container.querySelector("[data-spacing-panel-container]");if(r&&(this.spacingPanel=this.createSpacingPanel(),this.spacingPanel.onDragStart(()=>{const n=this.captureClipState();n&&this.dragManager.start("spacing-panel",n.clipId,n.initialState)}),this.spacingPanel.onChange(n=>{if(this.spacingPanel?.isDragging()??!1){const a=this.edit.getClipId(this.selectedTrackIdx,this.selectedClipIdx);if(!a)return;const o=this.getCurrentAsset();if(!o)return;const l={...o,style:{...o.style||{},letterSpacing:n.letterSpacing,wordSpacing:n.wordSpacing,lineHeight:n.lineHeight}};this.edit.updateClipInDocument(a,{asset:l}),this.edit.resolveClip(a)}else this.updateClipProperty({style:{letterSpacing:n.letterSpacing,wordSpacing:n.wordSpacing,lineHeight:n.lineHeight}})}),this.spacingPanel.onDragEnd(()=>{const n=this.dragManager.end("spacing-panel");if(!n||!this.spacingPanel)return;const{clipId:s}=n,a=this.spacingPanel.getState(),o=structuredClone(n.initialState);o.asset&&(o.asset.type==="rich-text"||o.asset.type==="rich-caption")&&o.asset.style&&(o.asset.style.letterSpacing=a.letterSpacing,o.asset.style.wordSpacing=a.wordSpacing,o.asset.style.lineHeight=a.lineHeight),this.edit.commitClipUpdate(s,n.initialState,o)}),this.spacingPanel.mount(r)),this.animationPopup=this.container.querySelector("[data-animation-popup]"),this.animationDurationSlider=this.container.querySelector("[data-animation-duration]"),this.animationDurationValue=this.container.querySelector("[data-animation-duration-value]"),this.animationStyleSection=this.container.querySelector("[data-animation-style-section]"),this.animationDirectionSection=this.container.querySelector("[data-animation-direction-section]"),this.transitionPopup=this.container.querySelector("[data-transition-popup]"),this.effectPopup=this.container.querySelector("[data-effect-popup]"),this.transitionPopup&&(this.transitionPanel=new sn,this.transitionPanel.onChange(()=>{const n=this.transitionPanel?.getClipValue();this.applyClipUpdate({transition:n})}),this.transitionPanel.mount(this.transitionPopup)),this.effectPopup&&(this.effectPanel=new nn,this.effectPanel.onChange(()=>{const n=this.effectPanel?.getClipValue();this.applyClipUpdate({effect:n})}),this.effectPanel.mount(this.effectPopup)),this.container.querySelectorAll("[data-preset]").forEach(n=>{n.addEventListener("click",()=>{const s=n.dataset.preset;s&&this.updateAnimationProperty({preset:s})})}),this.animationDurationSlider?.addEventListener("pointerdown",()=>{const n=this.captureClipState();n&&this.dragManager.start("animation-duration",n.clipId,n.initialState)}),this.animationDurationSlider?.addEventListener("input",n=>{const s=parseFloat(n.target.value);this.currentAnimationDuration=s,this.animationDurationValue&&(this.animationDurationValue.textContent=`${s.toFixed(1)}s`),this.updateAnimationLive({duration:s})}),this.animationDurationSlider?.addEventListener("change",()=>{const n=this.dragManager.end("animation-duration");if(!n)return;const{clipId:s}=n,a=structuredClone(n.initialState);a.asset&&a.asset.type==="rich-text"&&(a.asset.animation||(a.asset.animation={preset:"fadeIn"}),a.asset.animation.duration=this.currentAnimationDuration),this.edit.commitClipUpdate(s,n.initialState,a)}),this.container.querySelectorAll("[data-animation-style]").forEach(n=>{n.addEventListener("click",()=>{const s=n.dataset.animationStyle;s&&this.updateAnimationProperty({style:s})})}),this.container.querySelectorAll("[data-animation-direction]").forEach(n=>{n.addEventListener("click",()=>{const s=n.dataset.animationDirection;s&&this.updateAnimationProperty({direction:s})})}),this.stylePopup=this.container.querySelector("[data-style-popup]"),this.stylePopup){this.stylePanel=this.createStylePanel(),this.stylePanel.onDragStart(()=>{const s=this.captureClipState();s&&this.dragManager.start("style-panel",s.clipId,s.initialState)}),this.stylePanel.onBorderChange(s=>{if(this.stylePanel?.isDragging()??!1){const o=this.edit.getClipId(this.selectedTrackIdx,this.selectedClipIdx);if(!o)return;const l=this.getCurrentAsset();if(!l)return;const u={...l,border:{width:s.width,color:s.color,opacity:s.opacity/100,radius:s.radius}};this.edit.updateClipInDocument(o,{asset:u}),this.edit.resolveClip(o)}else this.updateBorderProperty({width:s.width,color:s.color,opacity:s.opacity/100,radius:s.radius})}),this.stylePanel.onStrokeChange(s=>{const a=this.stylePanel?.isDragging()??!1,o=s.width>0?{width:s.width,color:s.color,opacity:s.opacity/100}:void 0;if(a){const l=this.edit.getClipId(this.selectedTrackIdx,this.selectedClipIdx);if(!l)return;const u=this.getCurrentAsset();if(!u)return;const c={...u,stroke:o};this.edit.updateClipInDocument(l,{asset:c}),this.edit.resolveClip(l)}else this.updateClipProperty({stroke:o})}),this.stylePanel.onPaddingChange(s=>{if(this.stylePanel?.isDragging()??!1){const o=this.edit.getClipId(this.selectedTrackIdx,this.selectedClipIdx);if(!o)return;const l=this.getCurrentAsset();if(!l)return;const u={...l,padding:s};this.edit.updateClipInDocument(o,{asset:u}),this.edit.resolveClip(o)}else this.updatePaddingProperty(s)}),this.stylePanel.onShadowChange(s=>{const a=this.stylePanel?.isDragging()??!1,o=s.enabled?{offsetX:s.offsetX,offsetY:s.offsetY,blur:s.blur,color:s.color,opacity:s.opacity/100}:void 0;if(a){const l=this.edit.getClipId(this.selectedTrackIdx,this.selectedClipIdx);if(!l)return;const u=this.getCurrentAsset();if(!u)return;const c={...u,shadow:o};this.edit.updateClipInDocument(l,{asset:c}),this.edit.resolveClip(l)}else s.enabled?this.updateShadowProperty(o):this.updateClipProperty({shadow:void 0})}),this.stylePanel.onDragEnd(()=>{const s=this.dragManager.end("style-panel");if(!s)return;const{clipId:a}=s;if(!this.stylePanel)return;const o=this.stylePanel.getState(),l=structuredClone(s.initialState);if(l.asset&&(l.asset.type==="rich-text"||l.asset.type==="rich-caption")){const u=l.asset;l.asset.type==="rich-text"&&(u.border={width:o.border.width,color:o.border.color,opacity:o.border.opacity/100,radius:o.border.radius}),u.padding=o.padding,u.shadow=o.shadow.enabled?{offsetX:o.shadow.offsetX,offsetY:o.shadow.offsetY,blur:o.shadow.blur,color:o.shadow.color,opacity:o.shadow.opacity/100}:void 0,u.stroke=o.stroke.width>0?{width:o.stroke.width,color:o.stroke.color,opacity:o.stroke.opacity/100}:void 0}this.edit.commitClipUpdate(a,s.initialState,l)}),this.stylePanel.mount(this.stylePopup);const n=this.stylePanel.getFillColorPickerMount();n&&(this.backgroundColorPicker=new kQ,this.backgroundColorPicker.mount(n),this.backgroundColorPicker.onDragStart(s=>{const a=this.captureClipState();a&&this.dragManager.start(s,a.clipId,a.initialState)}),this.backgroundColorPicker.onChange((s,a,o,l)=>{if(this.dragManager.get(s)){const c=this.edit.getClipId(this.selectedTrackIdx,this.selectedClipIdx);if(!c)return;const f=this.getCurrentAsset();if(!f)return;if(a){const d=f.background||{color:"#FFFFFF",opacity:1,borderRadius:0},h={...f,background:{...d,color:o,opacity:l}};this.edit.updateClipInDocument(c,{asset:h})}else{const d={...f};delete d.background,this.edit.updateClipInDocument(c,{asset:d})}this.edit.resolveClip(c)}else a?this.updateBackgroundProperty({color:o,opacity:l}):this.removeBackgroundProperty()}),this.backgroundColorPicker.onDragEnd(s=>{const a=this.dragManager.end(s);if(!a)return;const{clipId:o}=a,l=structuredClone(a.initialState);if(l.asset&&(l.asset.type==="rich-text"||l.asset.type==="rich-caption")){const u=this.backgroundColorPicker?.isEnabled()??!1,c=this.backgroundColorPicker?.getColor()??"#FFFFFF",f=this.backgroundColorPicker?.getOpacity()??1;u?l.asset.background={color:c,opacity:f,borderRadius:l.asset.background?.borderRadius??0}:delete l.asset.background}this.edit.commitClipUpdate(o,a.initialState,l)}))}this.showMergeFields&&(this.mergeFieldManager=new gE(this,ja.PROPERTY_DEFAULTS),this.mergeFieldManager.init()),this.textEditArea?.addEventListener("input",()=>{this.checkAutocomplete(),this.debouncedApplyTextEdit()}),this.textEditArea?.addEventListener("keydown",n=>{if(this.autocompleteVisible){if(n.key==="ArrowDown"){n.preventDefault();const s=this.getFilteredFieldCount();this.selectedAutocompleteIndex=Math.min(this.selectedAutocompleteIndex+1,s-1),this.showAutocomplete();return}if(n.key==="ArrowUp"){n.preventDefault(),this.selectedAutocompleteIndex=Math.max(this.selectedAutocompleteIndex-1,0),this.showAutocomplete();return}if(n.key==="Enter"||n.key==="Tab"){n.preventDefault(),this.insertSelectedVariable();return}if(n.key==="Escape"){n.preventDefault(),this.hideAutocomplete();return}}n.key==="Enter"&&(n.ctrlKey||n.metaKey)&&(n.preventDefault(),this.textEditDebounceTimer&&(clearTimeout(this.textEditDebounceTimer),this.textEditDebounceTimer=null),this.applyTextEdit(),this.closeAllPopups()),n.key==="Escape"&&this.closeAllPopups()}),this.setupOutsideClickHandler(),this.enableDrag(),this.appendDeleteButton(),t.style.position="relative",t.insertBefore(this.container,t.firstChild),this.unsubFontCapabilities=this.edit.getInternalEvents().on(Ot.FontCapabilitiesChanged,()=>{this.container?.style.display!=="none"&&this.syncState()}),this.unsubMergeFieldChanged=this.edit.getInternalEvents().on(Q.MergeFieldChanged,()=>{this.container?.style.display!=="none"&&this.showMergeFields&&this.mergeFieldManager?.hasLabels&&this.mergeFieldManager.sync()}),this.unsubCanvasDoubleClick=this.edit.getInternalEvents().on(Ot.CanvasClipDoubleClicked,()=>{this.selectedTrackIdx<0||this.selectedClipIdx<0||!this.container||!this.container.classList.contains("visible")||this.openTextEditPopup()})}static PROPERTY_DEFAULTS={"asset.font.color":"#ffffff","asset.font.opacity":"1","asset.font.background":"#FFFF00","asset.border.width":"0","asset.border.color":"#000000","asset.border.radius":"0","asset.padding.top":"0","asset.padding.right":"0","asset.padding.bottom":"0","asset.padding.left":"0","asset.shadow.offsetX":"0","asset.shadow.offsetY":"0","asset.shadow.color":"#000000","asset.style.letterSpacing":"0","asset.style.lineHeight":"1.2"};handleClick(t){const r=t.target.closest("button");if(!r)return;const{action:n}=r.dataset;if(!n)return;const s=this.getCurrentAsset();if(s)switch(n){case"size-down":this.updateSize((s.font?.size??48)-4);break;case"size-up":this.updateSize((s.font?.size??48)+4);break;case"weight-toggle":this.toggleWeightPopup();break;case"font-toggle":this.toggleFontPopup();break;case"text-edit-toggle":this.toggleTextEditPopup();break;case"spacing-toggle":this.toggleSpacingPopup();break;case"style-toggle":this.togglePopup(this.stylePopup);break;case"font-color-toggle":this.toggleFontColorPopup();break;case"align-cycle":this.cycleAlignment(s);break;case"vertical-align-cycle":this.cycleVerticalAlignment(s);break;case"transform":this.cycleTransform(s);break;case"underline":this.toggleUnderline(s);break;case"linethrough":this.toggleLinethrough(s);break;case"animation-toggle":this.toggleAnimationPopup();break;case"animation-clear":this.updateClipProperty({animation:void 0}),this.closeAllPopups();break;case"transition-toggle":this.togglePopup(this.transitionPopup);break;case"effect-toggle":this.togglePopup(this.effectPopup);break}}createStylePanel(t={}){return new bE(t)}createSpacingPanel(){return new Jy}createFontColorPicker(){return new wE}getCurrentAsset(){const t=this.edit.getResolvedClip(this.selectedTrackIdx,this.selectedClipIdx);return t?t.asset:null}updateSize(t){const i=Math.max(8,Math.min(500,t));this.updateClipProperty({font:{size:i}})}static FONT_WEIGHTS=[{name:"Light",value:300},{name:"Regular",value:400},{name:"Medium",value:500},{name:"Bold",value:700},{name:"Black",value:900}];static CHECKMARK_SVG='<svg class="ss-toolbar-weight-check" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>';normalizeWeight(t){return typeof t=="number"?t:typeof t=="string"&&parseInt(t,10)||400}getWeightName(t){const i=this.normalizeWeight(t);return ja.FONT_WEIGHTS.find(n=>n.value===i)?.name??"Regular"}toggleWeightPopup(){this.togglePopup(this.weightPopup,()=>this.updateWeightPopupState())}buildWeightPopup(){this.weightPopup&&(this.weightPopup.innerHTML=ja.FONT_WEIGHTS.map(({name:t,value:i})=>`
+		`,this.sizeInput=this.container.querySelector("[data-size-input]"),this.sizePopup=this.container.querySelector("[data-size-popup]"),this.weightDropdown=this.container.querySelector(".ss-toolbar-dropdown--weight"),this.weightPopup=this.container.querySelector("[data-weight-popup]"),this.weightPreview=this.container.querySelector("[data-weight-preview]"),this.buildWeightPopup(),this.fontPopup=this.container.querySelector("[data-font-popup]"),this.fontPreview=this.container.querySelector("[data-font-preview]"),this.alignIcon=this.container.querySelector("[data-align-icon]"),this.verticalAlignIcon=this.container.querySelector("[data-vertical-align-icon]"),this.transformBtn=this.container.querySelector("[data-action='transform']"),this.underlineBtn=this.container.querySelector("[data-action='underline']"),this.linethroughBtn=this.container.querySelector("[data-action='linethrough']"),this.textEditPopup=this.container.querySelector("[data-text-edit-popup]"),this.textEditArea=this.container.querySelector("[data-text-edit-area]"),this.autocompletePopup=this.container.querySelector("[data-autocomplete-popup]"),this.autocompleteItems=this.container.querySelector("[data-autocomplete-items]"),this.autocompleteItems?.addEventListener("click",n=>{const s=n.target.closest("[data-var-name]");if(!s)return;n.stopPropagation();const{varName:a}=s.dataset;a&&this.insertVariable(a)}),this.boundHandleClick=this.handleClick.bind(this),this.container.addEventListener("click",this.boundHandleClick),this.sizeInput?.addEventListener("click",n=>{n.stopPropagation(),this.toggleSizePopup()}),this.sizeInput?.addEventListener("blur",()=>this.applyManualSize()),this.sizeInput?.addEventListener("keydown",n=>{n.key==="Enter"&&(this.applyManualSize(),this.sizeInput?.blur(),this.closeAllPopups())}),this.buildSizePopup(),this.colorDisplay=this.container.querySelector("[data-color-display]"),this.fontColorPopup=this.container.querySelector("[data-font-color-popup]");const i=this.container.querySelector("[data-font-color-picker]");i&&(this.fontColorPicker=this.createFontColorPicker(),this.fontColorPicker.mount(i),this.fontColorPicker.onChange(n=>{this.updateFontColorProperty(n)})),this.spacingPopup=this.container.querySelector("[data-spacing-popup]");const r=this.container.querySelector("[data-spacing-panel-container]");if(r&&(this.spacingPanel=this.createSpacingPanel(),this.spacingPanel.onDragStart(()=>{const n=this.captureClipState();n&&this.dragManager.start("spacing-panel",n.clipId,n.initialState)}),this.spacingPanel.onChange(n=>{if(this.spacingPanel?.isDragging()??!1){const a=this.edit.getClipId(this.selectedTrackIdx,this.selectedClipIdx);if(!a)return;const o=this.getCurrentAsset();if(!o)return;const l={...o,style:{...o.style||{},letterSpacing:n.letterSpacing,...this.supportsWordSpacing()?{wordSpacing:n.wordSpacing}:{},lineHeight:n.lineHeight}};this.edit.updateClipInDocument(a,{asset:l}),this.edit.resolveClip(a)}else this.updateClipProperty({style:{letterSpacing:n.letterSpacing,...this.supportsWordSpacing()?{wordSpacing:n.wordSpacing}:{},lineHeight:n.lineHeight}})}),this.spacingPanel.onDragEnd(()=>{const n=this.dragManager.end("spacing-panel");if(!n||!this.spacingPanel)return;const{clipId:s}=n,a=this.spacingPanel.getState(),o=structuredClone(n.initialState);o.asset&&(o.asset.type==="rich-text"||o.asset.type==="rich-caption")&&o.asset.style&&(o.asset.style.letterSpacing=a.letterSpacing,this.supportsWordSpacing()&&(o.asset.style.wordSpacing=a.wordSpacing),o.asset.style.lineHeight=a.lineHeight),this.edit.commitClipUpdate(s,n.initialState,o)}),this.spacingPanel.mount(r)),this.animationPopup=this.container.querySelector("[data-animation-popup]"),this.animationDurationSlider=this.container.querySelector("[data-animation-duration]"),this.animationDurationValue=this.container.querySelector("[data-animation-duration-value]"),this.animationStyleSection=this.container.querySelector("[data-animation-style-section]"),this.animationDirectionSection=this.container.querySelector("[data-animation-direction-section]"),this.transitionPopup=this.container.querySelector("[data-transition-popup]"),this.effectPopup=this.container.querySelector("[data-effect-popup]"),this.transitionPopup&&(this.transitionPanel=new sn,this.transitionPanel.onChange(()=>{const n=this.transitionPanel?.getClipValue();this.applyClipUpdate({transition:n})}),this.transitionPanel.mount(this.transitionPopup)),this.effectPopup&&(this.effectPanel=new nn,this.effectPanel.onChange(()=>{const n=this.effectPanel?.getClipValue();this.applyClipUpdate({effect:n})}),this.effectPanel.mount(this.effectPopup)),this.container.querySelectorAll("[data-preset]").forEach(n=>{n.addEventListener("click",()=>{const s=n.dataset.preset;s&&this.updateAnimationProperty({preset:s})})}),this.animationDurationSlider?.addEventListener("pointerdown",()=>{const n=this.captureClipState();n&&this.dragManager.start("animation-duration",n.clipId,n.initialState)}),this.animationDurationSlider?.addEventListener("input",n=>{const s=parseFloat(n.target.value);this.currentAnimationDuration=s,this.animationDurationValue&&(this.animationDurationValue.textContent=`${s.toFixed(1)}s`),this.updateAnimationLive({duration:s})}),this.animationDurationSlider?.addEventListener("change",()=>{const n=this.dragManager.end("animation-duration");if(!n)return;const{clipId:s}=n,a=structuredClone(n.initialState);a.asset&&a.asset.type==="rich-text"&&(a.asset.animation||(a.asset.animation={preset:"fadeIn"}),a.asset.animation.duration=this.currentAnimationDuration),this.edit.commitClipUpdate(s,n.initialState,a)}),this.container.querySelectorAll("[data-animation-style]").forEach(n=>{n.addEventListener("click",()=>{const s=n.dataset.animationStyle;s&&this.updateAnimationProperty({style:s})})}),this.container.querySelectorAll("[data-animation-direction]").forEach(n=>{n.addEventListener("click",()=>{const s=n.dataset.animationDirection;s&&this.updateAnimationProperty({direction:s})})}),this.stylePopup=this.container.querySelector("[data-style-popup]"),this.stylePopup){this.stylePanel=this.createStylePanel(),this.stylePanel.onDragStart(()=>{const s=this.captureClipState();s&&this.dragManager.start("style-panel",s.clipId,s.initialState)}),this.stylePanel.onBorderChange(s=>{if(this.stylePanel?.isDragging()??!1){const o=this.edit.getClipId(this.selectedTrackIdx,this.selectedClipIdx);if(!o)return;const l=this.getCurrentAsset();if(!l)return;const u={...l,border:{width:s.width,color:s.color,opacity:s.opacity/100,radius:s.radius}};this.edit.updateClipInDocument(o,{asset:u}),this.edit.resolveClip(o)}else this.updateBorderProperty({width:s.width,color:s.color,opacity:s.opacity/100,radius:s.radius})}),this.stylePanel.onStrokeChange(s=>{const a=this.stylePanel?.isDragging()??!1,o=s.width>0?{width:s.width,color:s.color,opacity:s.opacity/100}:void 0;if(a){const l=this.edit.getClipId(this.selectedTrackIdx,this.selectedClipIdx);if(!l)return;const u=this.getCurrentAsset();if(!u)return;const c={...u,stroke:o};this.edit.updateClipInDocument(l,{asset:c}),this.edit.resolveClip(l)}else this.updateClipProperty({stroke:o})}),this.stylePanel.onPaddingChange(s=>{if(this.stylePanel?.isDragging()??!1){const o=this.edit.getClipId(this.selectedTrackIdx,this.selectedClipIdx);if(!o)return;const l=this.getCurrentAsset();if(!l)return;const u={...l,padding:s};this.edit.updateClipInDocument(o,{asset:u}),this.edit.resolveClip(o)}else this.updatePaddingProperty(s)}),this.stylePanel.onShadowChange(s=>{const a=this.stylePanel?.isDragging()??!1,o=s.enabled?{offsetX:s.offsetX,offsetY:s.offsetY,blur:s.blur,color:s.color,opacity:s.opacity/100}:void 0;if(a){const l=this.edit.getClipId(this.selectedTrackIdx,this.selectedClipIdx);if(!l)return;const u=this.getCurrentAsset();if(!u)return;const c={...u,shadow:o};this.edit.updateClipInDocument(l,{asset:c}),this.edit.resolveClip(l)}else s.enabled?this.updateShadowProperty(o):this.updateClipProperty({shadow:void 0})}),this.stylePanel.onDragEnd(()=>{const s=this.dragManager.end("style-panel");if(!s)return;const{clipId:a}=s;if(!this.stylePanel)return;const o=this.stylePanel.getState(),l=structuredClone(s.initialState);if(l.asset&&(l.asset.type==="rich-text"||l.asset.type==="rich-caption")){const u=l.asset;l.asset.type==="rich-text"&&(u.border={width:o.border.width,color:o.border.color,opacity:o.border.opacity/100,radius:o.border.radius}),u.padding=o.padding,u.shadow=o.shadow.enabled?{offsetX:o.shadow.offsetX,offsetY:o.shadow.offsetY,blur:o.shadow.blur,color:o.shadow.color,opacity:o.shadow.opacity/100}:void 0,u.stroke=o.stroke.width>0?{width:o.stroke.width,color:o.stroke.color,opacity:o.stroke.opacity/100}:void 0}this.edit.commitClipUpdate(a,s.initialState,l)}),this.stylePanel.mount(this.stylePopup);const n=this.stylePanel.getFillColorPickerMount();n&&(this.backgroundColorPicker=new kQ,this.backgroundColorPicker.mount(n),this.backgroundColorPicker.onDragStart(s=>{const a=this.captureClipState();a&&this.dragManager.start(s,a.clipId,a.initialState)}),this.backgroundColorPicker.onChange((s,a,o,l)=>{if(this.dragManager.get(s)){const c=this.edit.getClipId(this.selectedTrackIdx,this.selectedClipIdx);if(!c)return;const f=this.getCurrentAsset();if(!f)return;if(a){const d=f.background||{color:"#FFFFFF",opacity:1,borderRadius:0},h={...f,background:{...d,color:o,opacity:l}};this.edit.updateClipInDocument(c,{asset:h})}else{const d={...f};delete d.background,this.edit.updateClipInDocument(c,{asset:d})}this.edit.resolveClip(c)}else a?this.updateBackgroundProperty({color:o,opacity:l}):this.removeBackgroundProperty()}),this.backgroundColorPicker.onDragEnd(s=>{const a=this.dragManager.end(s);if(!a)return;const{clipId:o}=a,l=structuredClone(a.initialState);if(l.asset&&(l.asset.type==="rich-text"||l.asset.type==="rich-caption")){const u=this.backgroundColorPicker?.isEnabled()??!1,c=this.backgroundColorPicker?.getColor()??"#FFFFFF",f=this.backgroundColorPicker?.getOpacity()??1;u?l.asset.background={color:c,opacity:f,borderRadius:l.asset.background?.borderRadius??0}:delete l.asset.background}this.edit.commitClipUpdate(o,a.initialState,l)}))}this.showMergeFields&&(this.mergeFieldManager=new gE(this,ja.PROPERTY_DEFAULTS),this.mergeFieldManager.init()),this.textEditArea?.addEventListener("input",()=>{this.checkAutocomplete(),this.debouncedApplyTextEdit()}),this.textEditArea?.addEventListener("keydown",n=>{if(this.autocompleteVisible){if(n.key==="ArrowDown"){n.preventDefault();const s=this.getFilteredFieldCount();this.selectedAutocompleteIndex=Math.min(this.selectedAutocompleteIndex+1,s-1),this.showAutocomplete();return}if(n.key==="ArrowUp"){n.preventDefault(),this.selectedAutocompleteIndex=Math.max(this.selectedAutocompleteIndex-1,0),this.showAutocomplete();return}if(n.key==="Enter"||n.key==="Tab"){n.preventDefault(),this.insertSelectedVariable();return}if(n.key==="Escape"){n.preventDefault(),this.hideAutocomplete();return}}n.key==="Enter"&&(n.ctrlKey||n.metaKey)&&(n.preventDefault(),this.textEditDebounceTimer&&(clearTimeout(this.textEditDebounceTimer),this.textEditDebounceTimer=null),this.applyTextEdit(),this.closeAllPopups()),n.key==="Escape"&&this.closeAllPopups()}),this.setupOutsideClickHandler(),this.enableDrag(),this.appendDeleteButton(),t.style.position="relative",t.insertBefore(this.container,t.firstChild),this.unsubFontCapabilities=this.edit.getInternalEvents().on(Ot.FontCapabilitiesChanged,()=>{this.container?.style.display!=="none"&&this.syncState()}),this.unsubMergeFieldChanged=this.edit.getInternalEvents().on(Q.MergeFieldChanged,()=>{this.container?.style.display!=="none"&&this.showMergeFields&&this.mergeFieldManager?.hasLabels&&this.mergeFieldManager.sync()}),this.unsubCanvasDoubleClick=this.edit.getInternalEvents().on(Ot.CanvasClipDoubleClicked,()=>{this.selectedTrackIdx<0||this.selectedClipIdx<0||!this.container||!this.container.classList.contains("visible")||this.openTextEditPopup()})}static PROPERTY_DEFAULTS={"asset.font.color":"#ffffff","asset.font.opacity":"1","asset.font.background":"#FFFF00","asset.border.width":"0","asset.border.color":"#000000","asset.border.radius":"0","asset.padding.top":"0","asset.padding.right":"0","asset.padding.bottom":"0","asset.padding.left":"0","asset.shadow.offsetX":"0","asset.shadow.offsetY":"0","asset.shadow.color":"#000000","asset.style.letterSpacing":"0","asset.style.lineHeight":"1.2"};handleClick(t){const r=t.target.closest("button");if(!r)return;const{action:n}=r.dataset;if(!n)return;const s=this.getCurrentAsset();if(s)switch(n){case"size-down":this.updateSize((s.font?.size??48)-4);break;case"size-up":this.updateSize((s.font?.size??48)+4);break;case"weight-toggle":this.toggleWeightPopup();break;case"font-toggle":this.toggleFontPopup();break;case"text-edit-toggle":this.toggleTextEditPopup();break;case"spacing-toggle":this.toggleSpacingPopup();break;case"style-toggle":this.togglePopup(this.stylePopup);break;case"font-color-toggle":this.toggleFontColorPopup();break;case"align-cycle":this.cycleAlignment(s);break;case"vertical-align-cycle":this.cycleVerticalAlignment(s);break;case"transform":this.cycleTransform(s);break;case"underline":this.toggleUnderline(s);break;case"linethrough":this.toggleLinethrough(s);break;case"animation-toggle":this.toggleAnimationPopup();break;case"animation-clear":this.updateClipProperty({animation:void 0}),this.closeAllPopups();break;case"transition-toggle":this.togglePopup(this.transitionPopup);break;case"effect-toggle":this.togglePopup(this.effectPopup);break}}createStylePanel(t={}){return new bE(t)}createSpacingPanel(){return new Jy}supportsWordSpacing(){return!0}createFontColorPicker(){return new wE}getCurrentAsset(){const t=this.edit.getResolvedClip(this.selectedTrackIdx,this.selectedClipIdx);return t?t.asset:null}updateSize(t){const i=Math.max(8,Math.min(500,t));this.updateClipProperty({font:{size:i}})}static FONT_WEIGHTS=[{name:"Light",value:300},{name:"Regular",value:400},{name:"Medium",value:500},{name:"Bold",value:700},{name:"Black",value:900}];static CHECKMARK_SVG='<svg class="ss-toolbar-weight-check" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>';normalizeWeight(t){return typeof t=="number"?t:typeof t=="string"&&parseInt(t,10)||400}getWeightName(t){const i=this.normalizeWeight(t);return ja.FONT_WEIGHTS.find(n=>n.value===i)?.name??"Regular"}toggleWeightPopup(){this.togglePopup(this.weightPopup,()=>this.updateWeightPopupState())}buildWeightPopup(){this.weightPopup&&(this.weightPopup.innerHTML=ja.FONT_WEIGHTS.map(({name:t,value:i})=>`
 				<div class="ss-toolbar-weight-item" data-weight="${i}">
 					<span class="ss-toolbar-weight-name" style="font-weight: ${i}">${t}</span>
 					<span class="ss-toolbar-weight-check-slot"></span>
@@ -1477,7 +1477,7 @@ Please check your media files.`}class oE{element;options;currentState=null;curre
 				<span class="ss-autocomplete-var">{{ ${r.name} }}</span>
 				${r.defaultValue?`<span class="ss-autocomplete-preview">${r.defaultValue}</span>`:""}
 			</div>
-		`).join(""),this.autocompletePopup.classList.add("visible"),this.autocompleteVisible=!0}hideAutocomplete(){this.autocompletePopup&&this.autocompletePopup.classList.remove("visible"),this.autocompleteVisible=!1,this.selectedAutocompleteIndex=0}insertVariable(t){if(!this.textEditArea)return;const i=this.textEditArea.value.substring(0,this.autocompleteStartPos),r=this.textEditArea.value.substring(this.textEditArea.selectionStart),n=`${i}{{ ${t} }}${r}`,a=this.getShotstackEdit()?.mergeFields.get(t)?.defaultValue??`{{ ${t} }}`,o=`${i}${a}${r}`;this.textEditArea.value=n;const l=this.autocompleteStartPos+t.length+6;this.textEditArea.selectionStart=l,this.textEditArea.selectionEnd=l,this.textEditArea.focus(),this.hideAutocomplete();const u=this.edit.getDocument(),c=this.edit.getClipId(this.selectedTrackIdx,this.selectedClipIdx);if(c&&u){const f={placeholder:n,resolvedValue:o};u.setClipBinding(c,"asset.text",f)}this.edit.updateClip(this.selectedTrackIdx,this.selectedClipIdx,{asset:{text:o}}),this.syncState()}insertSelectedVariable(){const t=this.autocompleteItems?.querySelector(".selected");if(!t)return;const{varName:i}=t.dataset;i&&this.insertVariable(i)}getFilteredFieldCount(){return(this.getShotstackEdit()?.mergeFields.getAll()??[]).filter(i=>i.name.toUpperCase().includes(this.autocompleteFilter)).length}buildFontPicker(){if(!this.fontPopup)return;this.fontPicker&&(this.fontPicker.destroy(),this.fontPicker=null);const i=this.getCurrentAsset()?.font?.family,n=this.edit.getDocument()?.getFonts()??[];this.fontPicker=new PQ({selectedFilename:i,timelineFonts:n,fontMetadata:this.edit.getFontMetadata(),onSelect:s=>this.selectFont(s),onClose:()=>this.closeAllPopups()}),this.fontPopup.innerHTML="",this.fontPopup.appendChild(this.fontPicker.getElement())}getDisplayName(t){const i=gu.get(t);if(i)return i.displayName;const r=this.edit.getFontMetadata();for(const[n,s]of r){const a=s.baseFamilyName.replace(/^["']+|["']+$/g,""),o=n.split("/").pop()?.replace(/\.(ttf|otf|woff|woff2)$/i,"")??"";if(t===o||t===a)return a}return t.replace(/-VariableFont$/i,"").replace(/-/g," ")}updateAnimationLive(t){const i=this.edit.getClipId(this.selectedTrackIdx,this.selectedClipIdx);if(!i)return;const r=this.getCurrentAsset();if(!r)return;const s={...r.animation||{preset:"fadeIn"},...t},a={...r,animation:s};this.edit.updateClipInDocument(i,{asset:a}),this.edit.resolveClip(i)}captureClipState(){const t=this.edit.getResolvedClip(this.selectedTrackIdx,this.selectedClipIdx),i=this.edit.getClipId(this.selectedTrackIdx,this.selectedClipIdx);return t&&i?{clipId:i,initialState:structuredClone(t)}:null}selectFont(t){const i=this.edit.getDocument();i&&i.addFont(t.url),this.updateClipProperty({font:{family:t.filename}}),this.edit.pruneUnusedFonts(),this.closeAllPopups()}cycleAlignment(t){const i=t.align?.horizontal??"center",r=["left","center","right"],s=(r.indexOf(i)+1)%r.length;this.updateAlignment(r[s])}updateAlignment(t){this.updateClipProperty({align:{horizontal:t}}),this.updateAlignIcon(t)}updateAlignIcon(t){if(!this.alignIcon)return;const i={left:"M3 5h18v2H3V5zm0 4h12v2H3V9zm0 4h18v2H3v-2zm0 4h12v2H3v-2z",center:"M3 5h18v2H3V5zm3 4h12v2H6V9zm-3 4h18v2H3v-2zm3 4h12v2H6v-2z",right:"M3 5h18v2H3V5zm6 4h12v2H9V9zm-6 4h18v2H3v-2zm6 4h12v2H9v-2z"},r=this.alignIcon.querySelector("path");r&&r.setAttribute("d",i[t])}cycleVerticalAlignment(t){const i=t.align?.vertical??"middle",r=["top","middle","bottom"],s=(r.indexOf(i)+1)%r.length,a=r[s];this.updateClipProperty({align:{vertical:a}}),this.updateVerticalAlignIcon(a)}updateVerticalAlignIcon(t){if(!this.verticalAlignIcon)return;const i={top:"M3 3h18v2H3V3zm3 4h12v2H6V7zm-3 4h18v2H3v-2z",middle:"M3 7h18v2H3V7zm3 4h12v2H6v-2zm-3 4h18v2H3v-2z",bottom:"M3 11h18v2H3v-2zm3 4h12v2H6v-2zm-3 4h18v2H3v-2z"},r=this.verticalAlignIcon.querySelector("path");r&&r.setAttribute("d",i[t])}cycleTransform(t){const i=t.style?.textTransform??"none",r=["none","uppercase","lowercase"],s=(r.indexOf(i)+1)%r.length;this.updateClipProperty({style:{textTransform:r[s]}})}toggleUnderline(t){const r=(t.style?.textDecoration??"none")==="underline"?"none":"underline";this.updateClipProperty({style:{textDecoration:r}})}toggleLinethrough(t){const r=(t.style?.textDecoration??"none")==="line-through"?"none":"line-through";this.updateClipProperty({style:{textDecoration:r}})}updateBorderProperty(t){const i=this.getCurrentAsset();if(!i)return;const n={...i.border||{width:0,color:"#000000",opacity:1,radius:0},...t};this.updateClipProperty({border:n})}updateShadowProperty(t){const i=this.getCurrentAsset();if(!i)return;const n={...i.shadow||{offsetX:0,offsetY:0,blur:0,color:"#000000",opacity:.5},...t};this.updateClipProperty({shadow:n})}updateAnimationProperty(t){const i=this.getCurrentAsset();if(!i)return;const n={...i.animation||{preset:"fadeIn"},...t};this.updateClipProperty({animation:n}),t.preset&&this.updateAnimationSections(t.preset)}updateAnimationSections(t){const i=["typewriter","shift","fadeIn","slideIn"],r=["ascend","shift","slideIn"];this.animationStyleSection&&(this.animationStyleSection.style.display=t&&i.includes(t)?"block":"none"),this.animationDirectionSection&&(this.animationDirectionSection.style.display=t&&r.includes(t)?"block":"none")}updateBackgroundProperty(t){const i=this.getCurrentAsset();if(!i)return;const n={...i.background||{color:"#FFFFFF",opacity:1,borderRadius:0},...t};this.updateClipProperty({background:n})}removeBackgroundProperty(){this.getCurrentAsset()&&this.updateClipProperty({background:void 0})}updatePaddingProperty(t){const i=this.getCurrentAsset();if(!i)return;let r;typeof i.padding=="number"?r={top:i.padding,right:i.padding,bottom:i.padding,left:i.padding}:i.padding?r={top:i.padding.top??0,right:i.padding.right??0,bottom:i.padding.bottom??0,left:i.padding.left??0}:r={top:0,right:0,bottom:0,left:0};const n={...r,...t},s=n.top===n.right&&n.right===n.bottom&&n.bottom===n.left;if(n.top===0&&n.right===0&&n.bottom===0&&n.left===0){const{padding:a,...o}=i;this.updateClipProperty(o)}else s?this.updateClipProperty({padding:n.top}):this.updateClipProperty({padding:n})}updateFontColorProperty(t){const i=this.getCurrentAsset();if(!i)return;const n={...i.font||{}};if(t.color!==void 0&&(n.color=t.color),t.opacity!==void 0&&(n.opacity=t.opacity),"background"in t&&(n.background=t.background),t.gradient!==void 0){const a=i.style||{};this.updateClipProperty({font:n,style:{...a,gradient:t.gradient}});return}const s=i.style||{};if((t.color!==void 0||t.opacity!==void 0)&&s.gradient){this.updateClipProperty({font:n,style:{...s,gradient:void 0}});return}this.updateClipProperty({font:n})}updateClipProperty(t){const i={asset:t};this.edit.updateClip(this.selectedTrackIdx,this.selectedClipIdx,i),this.syncState()}applyClipUpdate(t){this.selectedTrackIdx>=0&&this.selectedClipIdx>=0&&this.edit.updateClip(this.selectedTrackIdx,this.selectedClipIdx,t)}getPopupList(){return[this.sizePopup,this.weightPopup,this.spacingPopup,this.stylePopup,this.fontPopup,this.textEditPopup,this.fontColorPopup,this.animationPopup,this.transitionPopup,this.effectPopup]}syncState(){const t=this.edit.getClipId(this.selectedTrackIdx,this.selectedClipIdx);this.lastSyncedClipId!==t&&(this.dragManager.clear(),this.lastSyncedClipId=t);const r=this.getCurrentAsset();if(!r)return;if(this.weightPreview&&(this.weightPreview.textContent=this.getWeightName(r.font?.weight)),this.weightDropdown){const f=gu.get(r.font?.family??""),d=!f||f.isVariable;this.weightDropdown.style.display=d?"":"none"}if(this.sizeInput&&(this.sizeInput.value=String(r.font?.size??48)),this.fontPreview){const f=r.font?.family??"Open Sans";this.fontPreview.textContent=this.getDisplayName(f),this.fontPreview.style.fontFamily=`'${f}', sans-serif`}if(this.colorDisplay){const f=r.font?.color??"#000000";this.colorDisplay.style.backgroundColor=f}this.spacingPanel?.setState(r.style?.letterSpacing??0,r.style?.wordSpacing??0,r.style?.lineHeight??1.2);const n=r.align?.horizontal??"center";this.updateAlignIcon(n);const s=r.align?.vertical??"middle";this.updateVerticalAlignIcon(s);const a=r.style?.textTransform??"none";if(this.transformBtn){let f="Aa";a==="uppercase"?f="AA":a==="lowercase"&&(f="aa"),this.transformBtn.textContent=f,this.setButtonActive(this.transformBtn,a!=="none")}const o=r.style?.textDecoration==="underline";this.setButtonActive(this.underlineBtn,o);const l=r.style?.textDecoration==="line-through";if(this.setButtonActive(this.linethroughBtn,l),this.stylePanel){const{border:f}=r;this.stylePanel.setBorderState({width:f?.width??0,color:f?.color??"#000000",opacity:Math.round((f?.opacity??1)*100),radius:f?.radius??0});const{shadow:d}=r;this.stylePanel.setShadowState({enabled:!!d,offsetX:d?.offsetX??0,offsetY:d?.offsetY??0,blur:d?.blur??4,color:d?.color??"#000000",opacity:d?Math.round((d.opacity??1)*100):50});const{stroke:h}=r;this.stylePanel.setStrokeState({width:h?.width??0,color:h?.color??"#000000",opacity:Math.round((h?.opacity??1)*100)})}if(this.backgroundColorPicker){const{background:f}=r,d=!!f;this.backgroundColorPicker.setEnabled(d),this.backgroundColorPicker.setColor(f?.color||"#FFFFFF"),this.backgroundColorPicker.setOpacity((f?.opacity??1)*100)}const{animation:u}=r;if(this.container?.querySelectorAll("[data-preset]").forEach(f=>{this.setButtonActive(f,f.dataset.preset===u?.preset)}),this.animationDurationSlider&&this.animationDurationValue){const f=u?.duration??1;this.animationDurationSlider.value=String(f),this.animationDurationValue.textContent=`${f.toFixed(1)}s`}if(this.container?.querySelectorAll("[data-animation-style]").forEach(f=>{this.setButtonActive(f,f.dataset.animationStyle===u?.style)}),this.container?.querySelectorAll("[data-animation-direction]").forEach(f=>{this.setButtonActive(f,f.dataset.animationDirection===u?.direction)}),this.updateAnimationSections(u?.preset),this.stylePanel){const f=typeof r.padding=="number"?{top:r.padding,right:r.padding,bottom:r.padding,left:r.padding}:{top:r.padding?.top??0,right:r.padding?.right??0,bottom:r.padding?.bottom??0,left:r.padding?.left??0};this.stylePanel.setPaddingState(f)}const c=this.edit.getClip(this.selectedTrackIdx,this.selectedClipIdx);this.transitionPanel?.setFromClip(c?.transition),this.effectPanel?.setFromClip(c?.effect??""),this.showMergeFields&&this.mergeFieldManager?.hasLabels&&this.mergeFieldManager.sync()}dispose(){this.dragManager.clear(),this.lastSyncedClipId=null,this.unsubFontCapabilities?.(),this.unsubFontCapabilities=null,this.unsubMergeFieldChanged?.(),this.unsubMergeFieldChanged=null,this.unsubCanvasDoubleClick?.(),this.unsubCanvasDoubleClick=null,this.boundHandleClick&&(this.container?.removeEventListener("click",this.boundHandleClick),this.boundHandleClick=null),super.dispose(),this.sizeInput=null,this.sizePopup=null,this.weightPopup=null,this.weightPreview=null,this.fontPopup=null,this.fontPreview=null,this.fontPicker?.destroy(),this.fontPicker=null,this.fontColorPicker?.dispose(),this.fontColorPicker=null,this.fontColorPopup=null,this.colorDisplay=null,this.spacingPopup=null,this.spacingPanel?.dispose(),this.spacingPanel=null,this.stylePopup=null,this.stylePanel?.dispose(),this.stylePanel=null,this.alignIcon=null,this.verticalAlignIcon=null,this.transformBtn=null,this.underlineBtn=null,this.linethroughBtn=null,this.textEditPopup=null,this.textEditArea=null,this.textEditDebounceTimer&&(clearTimeout(this.textEditDebounceTimer),this.textEditDebounceTimer=null),this.animationPopup=null,this.animationDurationSlider=null,this.animationDurationValue=null,this.animationStyleSection=null,this.animationDirectionSection=null,this.backgroundColorPicker?.dispose(),this.backgroundColorPicker=null,this.backgroundPopup=null,this.transitionPanel?.dispose(),this.transitionPanel=null,this.transitionPopup=null,this.effectPanel?.dispose(),this.effectPanel=null,this.effectPopup=null,this.mergeFieldManager?.dispose(),this.mergeFieldManager=null}}class FQ extends ja{wordAnimPopup=null;activeWordPopup=null;sourcePopup=null;sourceListContainer=null;sourceDot=null;wordAnimDirectionSection=null;activeColorToggle=null;activeColorInput=null;activeOpacitySlider=null;activeOpacityValue=null;activeHighlightToggle=null;activeHighlightInput=null;activeStrokeToggle=null;activeStrokeWidthSlider=null;activeStrokeWidthValue=null;activeStrokeColorInput=null;activeStrokeOpacitySlider=null;activeStrokeOpacityValue=null;activeShadowToggle=null;activeShadowOffsetXSlider=null;activeShadowOffsetXValue=null;activeShadowOffsetYSlider=null;activeShadowOffsetYValue=null;activeShadowColorInput=null;activeShadowOpacitySlider=null;activeShadowOpacityValue=null;activeTextDecorationBtns=null;activeWordTabs=null;activeWordPanels=null;createStylePanel(){return new bE({})}createSpacingPanel(){return new Jy({showWordSpacing:!0})}createFontColorPicker(){return new wE({hideGradient:!0})}mount(t){super.mount(t),this.container&&(["text-edit-toggle","animation-toggle","transition-toggle","effect-toggle"].forEach(i=>{const r=this.container.querySelector(`[data-action="${i}"]`);if(!r)return;const n=r.closest(".ss-toolbar-dropdown");(n??r).style.display="none"}),this.injectCaptionControls(),this.appendDeleteButton())}dispose(){super.dispose(),this.wordAnimPopup=null,this.activeWordPopup=null,this.wordAnimDirectionSection=null,this.activeColorToggle=null,this.activeColorInput=null,this.activeOpacitySlider=null,this.activeOpacityValue=null,this.activeHighlightToggle=null,this.activeHighlightInput=null,this.activeStrokeToggle=null,this.activeStrokeWidthSlider=null,this.activeStrokeWidthValue=null,this.activeStrokeColorInput=null,this.activeStrokeOpacitySlider=null,this.activeStrokeOpacityValue=null,this.activeShadowToggle=null,this.activeShadowOffsetXSlider=null,this.activeShadowOffsetXValue=null,this.activeShadowOffsetYSlider=null,this.activeShadowOffsetYValue=null,this.activeShadowColorInput=null,this.activeShadowOpacitySlider=null,this.activeShadowOpacityValue=null,this.activeTextDecorationBtns=null,this.activeWordTabs=null,this.activeWordPanels=null,this.sourcePopup=null,this.sourceListContainer=null,this.sourceDot=null}handleClick(t){const i=t.target.closest("button");if(!i)return;const{action:r}=i.dataset;if(r){switch(r){case"caption-source-toggle":this.togglePopup(this.sourcePopup,()=>this.populateSourceList());return;case"caption-word-anim-toggle":this.togglePopup(this.wordAnimPopup);return;case"active-word-toggle":this.togglePopup(this.activeWordPopup);return}super.handleClick(t)}}getPopupList(){return[...super.getPopupList(),this.wordAnimPopup,this.activeWordPopup,this.sourcePopup]}syncState(){super.syncState();const t=this.getCaptionAsset();if(!t)return;const i=t.animation,r=i?.style??"karaoke";this.container?.querySelectorAll("[data-caption-word-style]").forEach(S=>{this.setButtonActive(S,S.dataset.captionWordStyle===r)}),this.wordAnimDirectionSection&&(this.wordAnimDirectionSection.style.display=r==="slide"?"":"none");const n=i?.direction??"up";this.container?.querySelectorAll("[data-caption-word-direction]").forEach(S=>{this.setButtonActive(S,S.dataset.captionWordDirection===n)});const s=t.active,a=t.font,o=t.stroke,l=s?.font?.textDecoration;this.activeTextDecorationBtns?.forEach(S=>{this.setButtonActive(S,S.dataset.activeTextDecoration===(l??"none"))});const u=s?.font?.color!==void 0;this.activeColorToggle&&(this.activeColorToggle.checked=u),this.activeColorInput&&(this.activeColorInput.value=u?s.font.color??"#ffff00":a?.color??"#ffffff",this.activeColorInput.disabled=!u,this.activeColorInput.style.opacity=u?"1":"0.3");const c=Math.round((u?s?.font?.opacity??1:a?.opacity??1)*100);this.activeOpacitySlider&&(this.activeOpacitySlider.value=String(c),this.activeOpacitySlider.disabled=!u),this.activeOpacityValue&&(this.activeOpacityValue.textContent=`${c}%`);const f=s?.font?.background,d=a?.background,h=f!==void 0;this.activeHighlightToggle&&(this.activeHighlightToggle.checked=h),this.activeHighlightInput&&(this.activeHighlightInput.value=h?f:d??"#000000",this.activeHighlightInput.disabled=!h,this.activeHighlightInput.style.opacity=h?"1":"0.3");const m=s?.stroke,v=typeof m=="object";this.activeStrokeToggle&&(this.activeStrokeToggle.checked=v);const g=v?m.width??0:o?.width??0;this.activeStrokeWidthSlider&&(this.activeStrokeWidthSlider.value=String(g),this.activeStrokeWidthSlider.disabled=!v),this.activeStrokeWidthValue&&(this.activeStrokeWidthValue.textContent=String(g)),this.activeStrokeColorInput&&(this.activeStrokeColorInput.value=v?m.color??"#000000":o?.color??"#000000",this.activeStrokeColorInput.disabled=!v,this.activeStrokeColorInput.style.opacity=v?"1":"0.3");const w=Math.round((v?m.opacity??1:o?.opacity??1)*100);this.activeStrokeOpacitySlider&&(this.activeStrokeOpacitySlider.value=String(w),this.activeStrokeOpacitySlider.disabled=!v),this.activeStrokeOpacityValue&&(this.activeStrokeOpacityValue.textContent=`${w}%`);const C=s?.shadow,x=typeof C=="object";this.activeShadowToggle&&(this.activeShadowToggle.checked=x),this.activeShadowOffsetXSlider&&(this.activeShadowOffsetXSlider.value=String(x?C.offsetX??2:2),this.activeShadowOffsetXSlider.disabled=!x),this.activeShadowOffsetXValue&&(this.activeShadowOffsetXValue.textContent=String(x?C.offsetX??2:2)),this.activeShadowOffsetYSlider&&(this.activeShadowOffsetYSlider.value=String(x?C.offsetY??2:2),this.activeShadowOffsetYSlider.disabled=!x),this.activeShadowOffsetYValue&&(this.activeShadowOffsetYValue.textContent=String(x?C.offsetY??2:2)),this.activeShadowColorInput&&(this.activeShadowColorInput.value=x?C.color??"#000000":"#000000",this.activeShadowColorInput.disabled=!x,this.activeShadowColorInput.style.opacity=x?"1":"0.3");const _=Math.round((x?C.opacity??.5:.5)*100);if(this.activeShadowOpacitySlider&&(this.activeShadowOpacitySlider.value=String(_),this.activeShadowOpacitySlider.disabled=!x),this.activeShadowOpacityValue&&(this.activeShadowOpacityValue.textContent=`${_}%`),this.sourceDot){const S=U6(this.edit,this.selectedTrackIdx,this.selectedClipIdx);this.sourceDot.classList.toggle("linked",!!S)}}getCaptionAsset(){const t=this.edit.getResolvedClip(this.selectedTrackIdx,this.selectedClipIdx);return t?t.asset:null}injectCaptionControls(){if(!this.container)return;const t=document.createDocumentFragment(),i=document.createElement("div");i.className="ss-toolbar-dropdown",i.innerHTML=`
+		`).join(""),this.autocompletePopup.classList.add("visible"),this.autocompleteVisible=!0}hideAutocomplete(){this.autocompletePopup&&this.autocompletePopup.classList.remove("visible"),this.autocompleteVisible=!1,this.selectedAutocompleteIndex=0}insertVariable(t){if(!this.textEditArea)return;const i=this.textEditArea.value.substring(0,this.autocompleteStartPos),r=this.textEditArea.value.substring(this.textEditArea.selectionStart),n=`${i}{{ ${t} }}${r}`,a=this.getShotstackEdit()?.mergeFields.get(t)?.defaultValue??`{{ ${t} }}`,o=`${i}${a}${r}`;this.textEditArea.value=n;const l=this.autocompleteStartPos+t.length+6;this.textEditArea.selectionStart=l,this.textEditArea.selectionEnd=l,this.textEditArea.focus(),this.hideAutocomplete();const u=this.edit.getDocument(),c=this.edit.getClipId(this.selectedTrackIdx,this.selectedClipIdx);if(c&&u){const f={placeholder:n,resolvedValue:o};u.setClipBinding(c,"asset.text",f)}this.edit.updateClip(this.selectedTrackIdx,this.selectedClipIdx,{asset:{text:o}}),this.syncState()}insertSelectedVariable(){const t=this.autocompleteItems?.querySelector(".selected");if(!t)return;const{varName:i}=t.dataset;i&&this.insertVariable(i)}getFilteredFieldCount(){return(this.getShotstackEdit()?.mergeFields.getAll()??[]).filter(i=>i.name.toUpperCase().includes(this.autocompleteFilter)).length}buildFontPicker(){if(!this.fontPopup)return;this.fontPicker&&(this.fontPicker.destroy(),this.fontPicker=null);const i=this.getCurrentAsset()?.font?.family,n=this.edit.getDocument()?.getFonts()??[];this.fontPicker=new PQ({selectedFilename:i,timelineFonts:n,fontMetadata:this.edit.getFontMetadata(),onSelect:s=>this.selectFont(s),onClose:()=>this.closeAllPopups()}),this.fontPopup.innerHTML="",this.fontPopup.appendChild(this.fontPicker.getElement())}getDisplayName(t){const i=gu.get(t);if(i)return i.displayName;const r=this.edit.getFontMetadata();for(const[n,s]of r){const a=s.baseFamilyName.replace(/^["']+|["']+$/g,""),o=n.split("/").pop()?.replace(/\.(ttf|otf|woff|woff2)$/i,"")??"";if(t===o||t===a)return a}return t.replace(/-VariableFont$/i,"").replace(/-/g," ")}updateAnimationLive(t){const i=this.edit.getClipId(this.selectedTrackIdx,this.selectedClipIdx);if(!i)return;const r=this.getCurrentAsset();if(!r)return;const s={...r.animation||{preset:"fadeIn"},...t},a={...r,animation:s};this.edit.updateClipInDocument(i,{asset:a}),this.edit.resolveClip(i)}captureClipState(){const t=this.edit.getResolvedClip(this.selectedTrackIdx,this.selectedClipIdx),i=this.edit.getClipId(this.selectedTrackIdx,this.selectedClipIdx);return t&&i?{clipId:i,initialState:structuredClone(t)}:null}selectFont(t){const i=this.edit.getDocument();i&&i.addFont(t.url),this.updateClipProperty({font:{family:t.filename}}),this.edit.pruneUnusedFonts(),this.closeAllPopups()}cycleAlignment(t){const i=t.align?.horizontal??"center",r=["left","center","right"],s=(r.indexOf(i)+1)%r.length;this.updateAlignment(r[s])}updateAlignment(t){this.updateClipProperty({align:{horizontal:t}}),this.updateAlignIcon(t)}updateAlignIcon(t){if(!this.alignIcon)return;const i={left:"M3 5h18v2H3V5zm0 4h12v2H3V9zm0 4h18v2H3v-2zm0 4h12v2H3v-2z",center:"M3 5h18v2H3V5zm3 4h12v2H6V9zm-3 4h18v2H3v-2zm3 4h12v2H6v-2z",right:"M3 5h18v2H3V5zm6 4h12v2H9V9zm-6 4h18v2H3v-2zm6 4h12v2H9v-2z"},r=this.alignIcon.querySelector("path");r&&r.setAttribute("d",i[t])}cycleVerticalAlignment(t){const i=t.align?.vertical??"middle",r=["top","middle","bottom"],s=(r.indexOf(i)+1)%r.length,a=r[s];this.updateClipProperty({align:{vertical:a}}),this.updateVerticalAlignIcon(a)}updateVerticalAlignIcon(t){if(!this.verticalAlignIcon)return;const i={top:"M3 3h18v2H3V3zm3 4h12v2H6V7zm-3 4h18v2H3v-2z",middle:"M3 7h18v2H3V7zm3 4h12v2H6v-2zm-3 4h18v2H3v-2z",bottom:"M3 11h18v2H3v-2zm3 4h12v2H6v-2zm-3 4h18v2H3v-2z"},r=this.verticalAlignIcon.querySelector("path");r&&r.setAttribute("d",i[t])}cycleTransform(t){const i=t.style?.textTransform??"none",r=["none","uppercase","lowercase"],s=(r.indexOf(i)+1)%r.length;this.updateClipProperty({style:{textTransform:r[s]}})}toggleUnderline(t){const r=(t.style?.textDecoration??"none")==="underline"?"none":"underline";this.updateClipProperty({style:{textDecoration:r}})}toggleLinethrough(t){const r=(t.style?.textDecoration??"none")==="line-through"?"none":"line-through";this.updateClipProperty({style:{textDecoration:r}})}updateBorderProperty(t){const i=this.getCurrentAsset();if(!i)return;const n={...i.border||{width:0,color:"#000000",opacity:1,radius:0},...t};this.updateClipProperty({border:n})}updateShadowProperty(t){const i=this.getCurrentAsset();if(!i)return;const n={...i.shadow||{offsetX:0,offsetY:0,blur:0,color:"#000000",opacity:.5},...t};this.updateClipProperty({shadow:n})}updateAnimationProperty(t){const i=this.getCurrentAsset();if(!i)return;const n={...i.animation||{preset:"fadeIn"},...t};this.updateClipProperty({animation:n}),t.preset&&this.updateAnimationSections(t.preset)}updateAnimationSections(t){const i=["typewriter","shift","fadeIn","slideIn"],r=["ascend","shift","slideIn"];this.animationStyleSection&&(this.animationStyleSection.style.display=t&&i.includes(t)?"block":"none"),this.animationDirectionSection&&(this.animationDirectionSection.style.display=t&&r.includes(t)?"block":"none")}updateBackgroundProperty(t){const i=this.getCurrentAsset();if(!i)return;const n={...i.background||{color:"#FFFFFF",opacity:1,borderRadius:0},...t};this.updateClipProperty({background:n})}removeBackgroundProperty(){this.getCurrentAsset()&&this.updateClipProperty({background:void 0})}updatePaddingProperty(t){const i=this.getCurrentAsset();if(!i)return;let r;typeof i.padding=="number"?r={top:i.padding,right:i.padding,bottom:i.padding,left:i.padding}:i.padding?r={top:i.padding.top??0,right:i.padding.right??0,bottom:i.padding.bottom??0,left:i.padding.left??0}:r={top:0,right:0,bottom:0,left:0};const n={...r,...t},s=n.top===n.right&&n.right===n.bottom&&n.bottom===n.left;if(n.top===0&&n.right===0&&n.bottom===0&&n.left===0){const{padding:a,...o}=i;this.updateClipProperty(o)}else s?this.updateClipProperty({padding:n.top}):this.updateClipProperty({padding:n})}updateFontColorProperty(t){const i=this.getCurrentAsset();if(!i)return;const n={...i.font||{}};if(t.color!==void 0&&(n.color=t.color),t.opacity!==void 0&&(n.opacity=t.opacity),"background"in t&&(n.background=t.background),t.gradient!==void 0){const a=i.style||{};this.updateClipProperty({font:n,style:{...a,gradient:t.gradient}});return}const s=i.style||{};if((t.color!==void 0||t.opacity!==void 0)&&s.gradient){this.updateClipProperty({font:n,style:{...s,gradient:void 0}});return}this.updateClipProperty({font:n})}updateClipProperty(t){const i={asset:t};this.edit.updateClip(this.selectedTrackIdx,this.selectedClipIdx,i),this.syncState()}applyClipUpdate(t){this.selectedTrackIdx>=0&&this.selectedClipIdx>=0&&this.edit.updateClip(this.selectedTrackIdx,this.selectedClipIdx,t)}getPopupList(){return[this.sizePopup,this.weightPopup,this.spacingPopup,this.stylePopup,this.fontPopup,this.textEditPopup,this.fontColorPopup,this.animationPopup,this.transitionPopup,this.effectPopup]}syncState(){const t=this.edit.getClipId(this.selectedTrackIdx,this.selectedClipIdx);this.lastSyncedClipId!==t&&(this.dragManager.clear(),this.lastSyncedClipId=t);const r=this.getCurrentAsset();if(!r)return;if(this.weightPreview&&(this.weightPreview.textContent=this.getWeightName(r.font?.weight)),this.weightDropdown){const f=gu.get(r.font?.family??""),d=!f||f.isVariable;this.weightDropdown.style.display=d?"":"none"}if(this.sizeInput&&(this.sizeInput.value=String(r.font?.size??48)),this.fontPreview){const f=r.font?.family??"Open Sans";this.fontPreview.textContent=this.getDisplayName(f),this.fontPreview.style.fontFamily=`'${f}', sans-serif`}if(this.colorDisplay){const f=r.font?.color??"#000000";this.colorDisplay.style.backgroundColor=f}this.spacingPanel?.setState(r.style?.letterSpacing??0,r.style?.wordSpacing??0,r.style?.lineHeight??1.2);const n=r.align?.horizontal??"center";this.updateAlignIcon(n);const s=r.align?.vertical??"middle";this.updateVerticalAlignIcon(s);const a=r.style?.textTransform??"none";if(this.transformBtn){let f="Aa";a==="uppercase"?f="AA":a==="lowercase"&&(f="aa"),this.transformBtn.textContent=f,this.setButtonActive(this.transformBtn,a!=="none")}const o=r.style?.textDecoration==="underline";this.setButtonActive(this.underlineBtn,o);const l=r.style?.textDecoration==="line-through";if(this.setButtonActive(this.linethroughBtn,l),this.stylePanel){const{border:f}=r;this.stylePanel.setBorderState({width:f?.width??0,color:f?.color??"#000000",opacity:Math.round((f?.opacity??1)*100),radius:f?.radius??0});const{shadow:d}=r;this.stylePanel.setShadowState({enabled:!!d,offsetX:d?.offsetX??0,offsetY:d?.offsetY??0,blur:d?.blur??4,color:d?.color??"#000000",opacity:d?Math.round((d.opacity??1)*100):50});const{stroke:h}=r;this.stylePanel.setStrokeState({width:h?.width??0,color:h?.color??"#000000",opacity:Math.round((h?.opacity??1)*100)})}if(this.backgroundColorPicker){const{background:f}=r,d=!!f;this.backgroundColorPicker.setEnabled(d),this.backgroundColorPicker.setColor(f?.color||"#FFFFFF"),this.backgroundColorPicker.setOpacity((f?.opacity??1)*100)}const{animation:u}=r;if(this.container?.querySelectorAll("[data-preset]").forEach(f=>{this.setButtonActive(f,f.dataset.preset===u?.preset)}),this.animationDurationSlider&&this.animationDurationValue){const f=u?.duration??1;this.animationDurationSlider.value=String(f),this.animationDurationValue.textContent=`${f.toFixed(1)}s`}if(this.container?.querySelectorAll("[data-animation-style]").forEach(f=>{this.setButtonActive(f,f.dataset.animationStyle===u?.style)}),this.container?.querySelectorAll("[data-animation-direction]").forEach(f=>{this.setButtonActive(f,f.dataset.animationDirection===u?.direction)}),this.updateAnimationSections(u?.preset),this.stylePanel){const f=typeof r.padding=="number"?{top:r.padding,right:r.padding,bottom:r.padding,left:r.padding}:{top:r.padding?.top??0,right:r.padding?.right??0,bottom:r.padding?.bottom??0,left:r.padding?.left??0};this.stylePanel.setPaddingState(f)}const c=this.edit.getClip(this.selectedTrackIdx,this.selectedClipIdx);this.transitionPanel?.setFromClip(c?.transition),this.effectPanel?.setFromClip(c?.effect??""),this.showMergeFields&&this.mergeFieldManager?.hasLabels&&this.mergeFieldManager.sync()}dispose(){this.dragManager.clear(),this.lastSyncedClipId=null,this.unsubFontCapabilities?.(),this.unsubFontCapabilities=null,this.unsubMergeFieldChanged?.(),this.unsubMergeFieldChanged=null,this.unsubCanvasDoubleClick?.(),this.unsubCanvasDoubleClick=null,this.boundHandleClick&&(this.container?.removeEventListener("click",this.boundHandleClick),this.boundHandleClick=null),super.dispose(),this.sizeInput=null,this.sizePopup=null,this.weightPopup=null,this.weightPreview=null,this.fontPopup=null,this.fontPreview=null,this.fontPicker?.destroy(),this.fontPicker=null,this.fontColorPicker?.dispose(),this.fontColorPicker=null,this.fontColorPopup=null,this.colorDisplay=null,this.spacingPopup=null,this.spacingPanel?.dispose(),this.spacingPanel=null,this.stylePopup=null,this.stylePanel?.dispose(),this.stylePanel=null,this.alignIcon=null,this.verticalAlignIcon=null,this.transformBtn=null,this.underlineBtn=null,this.linethroughBtn=null,this.textEditPopup=null,this.textEditArea=null,this.textEditDebounceTimer&&(clearTimeout(this.textEditDebounceTimer),this.textEditDebounceTimer=null),this.animationPopup=null,this.animationDurationSlider=null,this.animationDurationValue=null,this.animationStyleSection=null,this.animationDirectionSection=null,this.backgroundColorPicker?.dispose(),this.backgroundColorPicker=null,this.backgroundPopup=null,this.transitionPanel?.dispose(),this.transitionPanel=null,this.transitionPopup=null,this.effectPanel?.dispose(),this.effectPanel=null,this.effectPopup=null,this.mergeFieldManager?.dispose(),this.mergeFieldManager=null}}class FQ extends ja{wordAnimPopup=null;activeWordPopup=null;sourcePopup=null;sourceListContainer=null;sourceDot=null;wordAnimDirectionSection=null;activeColorToggle=null;activeColorInput=null;activeOpacitySlider=null;activeOpacityValue=null;activeHighlightToggle=null;activeHighlightInput=null;activeStrokeToggle=null;activeStrokeWidthSlider=null;activeStrokeWidthValue=null;activeStrokeColorInput=null;activeStrokeOpacitySlider=null;activeStrokeOpacityValue=null;activeShadowToggle=null;activeShadowOffsetXSlider=null;activeShadowOffsetXValue=null;activeShadowOffsetYSlider=null;activeShadowOffsetYValue=null;activeShadowColorInput=null;activeShadowOpacitySlider=null;activeShadowOpacityValue=null;activeTextDecorationBtns=null;activeWordTabs=null;activeWordPanels=null;createStylePanel(){return new bE({})}createSpacingPanel(){return new Jy}supportsWordSpacing(){return!1}createFontColorPicker(){return new wE({hideGradient:!0})}mount(t){super.mount(t),this.container&&(["text-edit-toggle","animation-toggle","transition-toggle","effect-toggle"].forEach(i=>{const r=this.container.querySelector(`[data-action="${i}"]`);if(!r)return;const n=r.closest(".ss-toolbar-dropdown");(n??r).style.display="none"}),this.injectCaptionControls(),this.appendDeleteButton())}dispose(){super.dispose(),this.wordAnimPopup=null,this.activeWordPopup=null,this.wordAnimDirectionSection=null,this.activeColorToggle=null,this.activeColorInput=null,this.activeOpacitySlider=null,this.activeOpacityValue=null,this.activeHighlightToggle=null,this.activeHighlightInput=null,this.activeStrokeToggle=null,this.activeStrokeWidthSlider=null,this.activeStrokeWidthValue=null,this.activeStrokeColorInput=null,this.activeStrokeOpacitySlider=null,this.activeStrokeOpacityValue=null,this.activeShadowToggle=null,this.activeShadowOffsetXSlider=null,this.activeShadowOffsetXValue=null,this.activeShadowOffsetYSlider=null,this.activeShadowOffsetYValue=null,this.activeShadowColorInput=null,this.activeShadowOpacitySlider=null,this.activeShadowOpacityValue=null,this.activeTextDecorationBtns=null,this.activeWordTabs=null,this.activeWordPanels=null,this.sourcePopup=null,this.sourceListContainer=null,this.sourceDot=null}handleClick(t){const i=t.target.closest("button");if(!i)return;const{action:r}=i.dataset;if(r){switch(r){case"caption-source-toggle":this.togglePopup(this.sourcePopup,()=>this.populateSourceList());return;case"caption-word-anim-toggle":this.togglePopup(this.wordAnimPopup);return;case"active-word-toggle":this.togglePopup(this.activeWordPopup);return}super.handleClick(t)}}getPopupList(){return[...super.getPopupList(),this.wordAnimPopup,this.activeWordPopup,this.sourcePopup]}syncState(){super.syncState();const t=this.getCaptionAsset();if(!t)return;const i=t.animation,r=i?.style??"karaoke";this.container?.querySelectorAll("[data-caption-word-style]").forEach(S=>{this.setButtonActive(S,S.dataset.captionWordStyle===r)}),this.wordAnimDirectionSection&&(this.wordAnimDirectionSection.style.display=r==="slide"?"":"none");const n=i?.direction??"up";this.container?.querySelectorAll("[data-caption-word-direction]").forEach(S=>{this.setButtonActive(S,S.dataset.captionWordDirection===n)});const s=t.active,a=t.font,o=t.stroke,l=s?.font?.textDecoration;this.activeTextDecorationBtns?.forEach(S=>{this.setButtonActive(S,S.dataset.activeTextDecoration===(l??"none"))});const u=s?.font?.color!==void 0;this.activeColorToggle&&(this.activeColorToggle.checked=u),this.activeColorInput&&(this.activeColorInput.value=u?s.font.color??"#ffff00":a?.color??"#ffffff",this.activeColorInput.disabled=!u,this.activeColorInput.style.opacity=u?"1":"0.3");const c=Math.round((u?s?.font?.opacity??1:a?.opacity??1)*100);this.activeOpacitySlider&&(this.activeOpacitySlider.value=String(c),this.activeOpacitySlider.disabled=!u),this.activeOpacityValue&&(this.activeOpacityValue.textContent=`${c}%`);const f=s?.font?.background,d=a?.background,h=f!==void 0;this.activeHighlightToggle&&(this.activeHighlightToggle.checked=h),this.activeHighlightInput&&(this.activeHighlightInput.value=h?f:d??"#000000",this.activeHighlightInput.disabled=!h,this.activeHighlightInput.style.opacity=h?"1":"0.3");const m=s?.stroke,v=typeof m=="object";this.activeStrokeToggle&&(this.activeStrokeToggle.checked=v);const g=v?m.width??0:o?.width??0;this.activeStrokeWidthSlider&&(this.activeStrokeWidthSlider.value=String(g),this.activeStrokeWidthSlider.disabled=!v),this.activeStrokeWidthValue&&(this.activeStrokeWidthValue.textContent=String(g)),this.activeStrokeColorInput&&(this.activeStrokeColorInput.value=v?m.color??"#000000":o?.color??"#000000",this.activeStrokeColorInput.disabled=!v,this.activeStrokeColorInput.style.opacity=v?"1":"0.3");const w=Math.round((v?m.opacity??1:o?.opacity??1)*100);this.activeStrokeOpacitySlider&&(this.activeStrokeOpacitySlider.value=String(w),this.activeStrokeOpacitySlider.disabled=!v),this.activeStrokeOpacityValue&&(this.activeStrokeOpacityValue.textContent=`${w}%`);const C=s?.shadow,x=typeof C=="object";this.activeShadowToggle&&(this.activeShadowToggle.checked=x),this.activeShadowOffsetXSlider&&(this.activeShadowOffsetXSlider.value=String(x?C.offsetX??2:2),this.activeShadowOffsetXSlider.disabled=!x),this.activeShadowOffsetXValue&&(this.activeShadowOffsetXValue.textContent=String(x?C.offsetX??2:2)),this.activeShadowOffsetYSlider&&(this.activeShadowOffsetYSlider.value=String(x?C.offsetY??2:2),this.activeShadowOffsetYSlider.disabled=!x),this.activeShadowOffsetYValue&&(this.activeShadowOffsetYValue.textContent=String(x?C.offsetY??2:2)),this.activeShadowColorInput&&(this.activeShadowColorInput.value=x?C.color??"#000000":"#000000",this.activeShadowColorInput.disabled=!x,this.activeShadowColorInput.style.opacity=x?"1":"0.3");const _=Math.round((x?C.opacity??.5:.5)*100);if(this.activeShadowOpacitySlider&&(this.activeShadowOpacitySlider.value=String(_),this.activeShadowOpacitySlider.disabled=!x),this.activeShadowOpacityValue&&(this.activeShadowOpacityValue.textContent=`${_}%`),this.sourceDot){const S=U6(this.edit,this.selectedTrackIdx,this.selectedClipIdx);this.sourceDot.classList.toggle("linked",!!S)}}getCaptionAsset(){const t=this.edit.getResolvedClip(this.selectedTrackIdx,this.selectedClipIdx);return t?t.asset:null}injectCaptionControls(){if(!this.container)return;const t=document.createDocumentFragment(),i=document.createElement("div");i.className="ss-toolbar-dropdown",i.innerHTML=`
 			<button data-action="caption-source-toggle"
 				class="ss-toolbar-btn ss-toolbar-btn--text-edit"
 				title="Caption source">

package/package.json

@@ -6,7 +6,7 @@
 		"dazzatron",
 		"kratos2k7"
 	],
-	"version": "2.14.0",
+	"version": "2.14.1",
 	"description": "A video editing library for creating and editing videos with Shotstack",
 	"type": "module",
 	"main": "dist/shotstack-studio.umd.js",