@cliquify.me/timeline 3.1.16 → 3.1.18

package/dist/index.es.js

@@ -120,10 +120,10 @@ void main(){}`), r = t.createShader(t.FRAGMENT_SHADER);
 const zl = {};
 let fo;
 const Gt = () => fo || (fo = { document, window, isTouchSupported: "ontouchstart" in window || "ontouchstart" in document || window && window.navigator && window.navigator.maxTouchPoints > 0, WebGLProbe: new Xl(), dispose() {
-}, copyPasteData: zl }), Cs = () => Gt().document, ui = () => Gt().window, La = () => {
+}, copyPasteData: zl }), ks = () => Gt().document, ui = () => Gt().window, La = () => {
   var i;
   return Math.max((i = A.devicePixelRatio) !== null && i !== void 0 ? i : ui().devicePixelRatio, 1);
-}, Xs = new class {
+}, Hs = new class {
   constructor() {
     y(this, "charWidthsCache", {}), y(this, "boundsOfCurveCache", {});
   }
@@ -143,7 +143,7 @@ const Gt = () => fo || (fo = { document, window, isTouchSupported: "ontouchstart
 }(), tn = "6.3.0";
 function Be() {
 }
-const Se = Math.PI / 2, ce = 2 * Math.PI, Dn = Math.PI / 180, ut = Object.freeze([1, 0, 0, 1, 0, 0]), In = 16, me = 0.4477152502, j = "center", F = "left", gt = "top", en = "bottom", Z = "right", pt = "none", jn = /\r?\n/, Fa = "moving", di = "scaling", Ra = "rotating", En = "rotate", Ba = "skewing", $s = "resizing", Wa = "modifyPoly", Hl = "modifyPath", Nr = "changed", fi = "scale", dt = "scaleX", St = "scaleY", Os = "skewX", ks = "skewY", rt = "fill", mt = "stroke", Ur = "modified", $e = "json", Ai = "svg", C = new class {
+const Se = Math.PI / 2, ce = 2 * Math.PI, Dn = Math.PI / 180, ut = Object.freeze([1, 0, 0, 1, 0, 0]), In = 16, me = 0.4477152502, j = "center", F = "left", gt = "top", en = "bottom", Z = "right", pt = "none", jn = /\r?\n/, Fa = "moving", di = "scaling", Ra = "rotating", En = "rotate", Ba = "skewing", Ks = "resizing", Wa = "modifyPoly", Hl = "modifyPath", $r = "changed", fi = "scale", dt = "scaleX", St = "scaleY", Ms = "skewX", Ds = "skewY", rt = "fill", mt = "stroke", qr = "modified", $e = "json", Ai = "svg", C = new class {
   constructor() {
     this[$e] = /* @__PURE__ */ new Map(), this[Ai] = /* @__PURE__ */ new Map();
   }
@@ -164,7 +164,7 @@ const Se = Math.PI / 2, ce = 2 * Math.PI, Dn = Math.PI / 180, ut = Object.freeze
   setSVGClass(i, t) {
     this[Ai].set(t ?? i.type.toLowerCase(), i);
   }
-}(), $r = new class extends Array {
+}(), Kr = new class extends Array {
   remove(i) {
     const t = this.indexOf(i);
     t > -1 && this.splice(t, 1);
@@ -376,7 +376,7 @@ class _ {
     return new _(t[0] * this.x + t[2] * this.y + (e ? 0 : t[4]), t[1] * this.x + t[3] * this.y + (e ? 0 : t[5]));
   }
 }
-const Pn = new _(0, 0), Vr = (i) => !!i && Array.isArray(i._objects);
+const Pn = new _(0, 0), Nr = (i) => !!i && Array.isArray(i._objects);
 function Xa(i) {
   class t extends i {
     constructor() {
@@ -510,7 +510,7 @@ class za extends Yl {
     return this[t];
   }
 }
-function zs(i) {
+function Ys(i) {
   return ui().requestAnimationFrame(i);
 }
 function Ha(i) {
@@ -518,10 +518,10 @@ function Ha(i) {
 }
 let Vl = 0;
 const Te = () => Vl++, J = () => {
-  const i = Cs().createElement("canvas");
+  const i = ks().createElement("canvas");
   if (!i || i.getContext === void 0) throw new Xt("Failed to create `canvas` element");
   return i;
-}, Ya = () => Cs().createElement("img"), An = (i, t, e) => i.toDataURL("image/".concat(t), e), q = (i) => i * Dn, xe = (i) => i / Dn, Va = (i) => i.every((t, e) => t === ut[e]), at = (i, t, e) => new _(i).transform(t, e), _t = (i) => {
+}, Ya = () => ks().createElement("img"), An = (i, t, e) => i.toDataURL("image/".concat(t), e), q = (i) => i * Dn, xe = (i) => i / Dn, Va = (i) => i.every((t, e) => t === ut[e]), at = (i, t, e) => new _(i).transform(t, e), _t = (i) => {
   const t = 1 / (i[0] * i[3] - i[1] * i[2]), e = [t * i[3], -t * i[1], -t * i[2], t * i[0], 0, 0], { x: s, y: r } = new _(i[4], i[5]).transform(e, !0);
   return e[4] = -s, e[5] = -r, e;
 }, K = (i, t, e) => [i[0] * t[0] + i[2] * t[1], i[1] * t[0] + i[3] * t[1], i[0] * t[2] + i[2] * t[3], i[1] * t[2] + i[3] * t[3], e ? 0 : i[0] * t[4] + i[2] * t[5] + i[4], e ? 0 : i[1] * t[4] + i[3] * t[5] + i[5]], gi = (i, t) => i.reduceRight((e, s) => s && e ? K(s, e, t) : s || e, void 0) || ut.concat(), Ga = (i) => {
@@ -530,26 +530,26 @@ const Te = () => Vl++, J = () => {
 }, vs = (i) => {
   const t = Ga(i), e = Math.pow(i[0], 2) + Math.pow(i[1], 2), s = Math.sqrt(e), r = (i[0] * i[3] - i[2] * i[1]) / s, n = Math.atan2(i[0] * i[2] + i[1] * i[3], e);
   return { angle: xe(t), scaleX: s, scaleY: r, skewX: xe(n), skewY: 0, translateX: i[4] || 0, translateY: i[5] || 0 };
-}, Ms = function(i) {
+}, Is = function(i) {
   return [1, 0, 0, 1, i, arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0];
 };
-function Ds() {
+function js() {
   let { angle: i = 0 } = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, { x: t = 0, y: e = 0 } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
   const s = q(i), r = Ft(s), n = Rt(s);
   return [r, n, -n, r, t ? t - (r * t - n * e) : 0, e ? e - (n * t + r * e) : 0];
 }
 const pi = function(i) {
   return [i, 0, 0, arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : i, 0, 0];
-}, Na = (i) => Math.tan(q(i)), Ln = (i) => [1, 0, Na(i), 1, 0, 0], Fn = (i) => [1, Na(i), 0, 1, 0, 0], ar = (i) => {
+}, Na = (i) => Math.tan(q(i)), Ln = (i) => [1, 0, Na(i), 1, 0, 0], Fn = (i) => [1, Na(i), 0, 1, 0, 0], hr = (i) => {
   let { scaleX: t = 1, scaleY: e = 1, flipX: s = !1, flipY: r = !1, skewX: n = 0, skewY: o = 0 } = i, a = pi(s ? -t : t, r ? -e : e);
   return n && (a = K(a, Ln(n), !0)), o && (a = K(a, Fn(o), !0)), a;
 }, Ua = (i) => {
   const { translateX: t = 0, translateY: e = 0, angle: s = 0 } = i;
-  let r = Ms(t, e);
-  s && (r = K(r, Ds({ angle: s })));
-  const n = ar(i);
+  let r = Is(t, e);
+  s && (r = K(r, js({ angle: s })));
+  const n = hr(i);
   return Va(n) || (r = K(r, n)), r;
-}, Hs = function(i) {
+}, Vs = function(i) {
   let { signal: t, crossOrigin: e = null } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
   return new Promise(function(s, r) {
     if (t && t.aborted) return r(new Aa("loadImage"));
@@ -577,7 +577,7 @@ const pi = function(i) {
       t && t.removeEventListener("abort", r);
     });
   });
-}, cr = function(i) {
+}, lr = function(i) {
   let { signal: t } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
   return new Promise((e, s) => {
     const r = [];
@@ -620,7 +620,7 @@ const pi = function(i) {
 }, mo = function() {
   let i = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "1";
   return parseFloat(i) / (i.endsWith("%") ? 100 : 1);
-}, vr = (i) => Math.min(Math.round(i), 255).toString(16).toUpperCase().padStart(2, "0"), vo = (i) => {
+}, br = (i) => Math.min(Math.round(i), 255).toString(16).toUpperCase().padStart(2, "0"), vo = (i) => {
   let [t, e, s, r = 1] = i;
   const n = Math.round(0.3 * t + 0.59 * e + 0.11 * s);
   return [n, n, n, r];
@@ -663,7 +663,7 @@ class B {
   }
   toHexa() {
     const [t, e, s, r] = this.getSource();
-    return "".concat(vr(t)).concat(vr(e)).concat(vr(s)).concat(vr(Math.round(255 * r)));
+    return "".concat(br(t)).concat(br(e)).concat(br(s)).concat(br(Math.round(255 * r)));
   }
   getAlpha() {
     return this.getSource()[3];
@@ -757,7 +757,7 @@ const E = (i, t) => parseFloat(Number(i).toFixed(t)), We = function(i) {
   const [t, e] = i.trim().split(" "), [s, r] = (n = t) && n !== pt ? [n.slice(1, 4), n.slice(5, 8)] : n === pt ? [n, n] : ["Mid", "Mid"];
   var n;
   return { meetOrSlice: e || "meet", alignX: s, alignY: r };
-}, qs = (i) => "matrix(" + i.map((t) => E(t, A.NUM_FRACTION_DIGITS)).join(" ") + ")", Ks = function(i, t) {
+}, Zs = (i) => "matrix(" + i.map((t) => E(t, A.NUM_FRACTION_DIGITS)).join(" ") + ")", Js = function(i, t) {
   let e, s, r = !(arguments.length > 2 && arguments[2] !== void 0) || arguments[2];
   if (t) if (t.toLive) e = "url(#SVGID_".concat(t.id, ")");
   else {
@@ -780,7 +780,7 @@ const Pt = (i) => i.ownerDocument || null, Za = (i) => {
   var t;
   return ((t = i.ownerDocument) === null || t === void 0 ? void 0 : t.defaultView) || null;
 };
-function Ys(i, t) {
+function Gs(i, t) {
   const e = i.style;
   e && (typeof t == "string" ? i.style.cssText += ";" + t : Object.entries(t).forEach((s) => {
     let [r, n] = s;
@@ -804,7 +804,7 @@ class Qa {
     this.lower = { el: e, ctx: e.getContext("2d") };
   }
   createLowerCanvas(t) {
-    const e = (s = t) && s.getContext !== void 0 ? t : t && Cs().getElementById(t) || J();
+    const e = (s = t) && s.getContext !== void 0 ? t : t && ks().getElementById(t) || J();
     var s;
     if (e.hasAttribute("data-fabric")) throw new Xt("Trying to initialize a canvas that has already been initialized. Did you forget to dispose the canvas?");
     return this._originalCanvasStyle = e.style.cssText, e.setAttribute("data-fabric", "main"), e.classList.add("lower-canvas"), e;
@@ -840,7 +840,7 @@ class Qa {
   }
 }
 const Gl = { backgroundVpt: !0, backgroundColor: "", overlayVpt: !0, overlayColor: "", includeDefaultValues: !0, svgViewportTransformation: !0, renderOnAddRemove: !0, skipOffscreen: !0, enableRetinaScaling: !0, imageSmoothingEnabled: !0, controlsAboveOverlay: !1, allowTouchScrolling: !1, viewportTransform: [...ut] };
-class hr extends Xa(za) {
+class ur extends Xa(za) {
   get lowerCanvasEl() {
     var t;
     return (t = this.elements.lower) === null || t === void 0 ? void 0 : t.el;
@@ -850,7 +850,7 @@ class hr extends Xa(za) {
     return (t = this.elements.lower) === null || t === void 0 ? void 0 : t.ctx;
   }
   static getDefaults() {
-    return hr.ownDefaults;
+    return ur.ownDefaults;
   }
   constructor(t) {
     let e = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
@@ -952,7 +952,7 @@ Resulting to default behavior: removing object from previous canvas and adding t
     this.nextRenderHandle = 0, this.renderAll();
   }
   requestRenderAll() {
-    this.nextRenderHandle || this.disposed || this.destroyed || (this.nextRenderHandle = zs(() => this.renderAndReset()));
+    this.nextRenderHandle || this.disposed || this.destroyed || (this.nextRenderHandle = Ys(() => this.renderAndReset()));
   }
   calcViewportBoundaries() {
     const t = this.width, e = this.height, s = _t(this.viewportTransform), r = at({ x: 0, y: 0 }, s), n = at({ x: t, y: e }, s), o = r.min(n), a = r.max(n);
@@ -1093,14 +1093,14 @@ Resulting to default behavior: removing object from previous canvas and adding t
       const e = this["".concat(t, "Color")];
       if (Ct(e)) {
         const s = this["".concat(t, "Vpt")], r = this.viewportTransform, n = { isType: () => !1, width: this.width / (s ? r[0] : 1), height: this.height / (s ? r[3] : 1) };
-        return e.toSVG(n, { additionalTransform: s ? qs(r) : "" });
+        return e.toSVG(n, { additionalTransform: s ? Zs(r) : "" });
       }
     }).join("");
   }
   createSVGFontFacesMarkup() {
     const t = [], e = {}, s = A.fontPaths;
     this._objects.forEach(function n(o) {
-      t.push(o), Vr(o) && o._objects.forEach(n);
+      t.push(o), Nr(o) && o._objects.forEach(n);
     }), t.forEach((n) => {
       if (!qa(n)) return;
       const { styles: o, fontFamily: a } = n;
@@ -1135,7 +1135,7 @@ Resulting to default behavior: removing object from previous canvas and adding t
   _setSVGBgOverlayColor(t, e) {
     const s = this["".concat(e, "Color")];
     if (s) if (Ct(s)) {
-      const r = s.repeat || "", n = this.width, o = this.height, a = this["".concat(e, "Vpt")] ? qs(_t(this.viewportTransform)) : "";
+      const r = s.repeat || "", n = this.width, o = this.height, a = this["".concat(e, "Vpt")] ? Zs(_t(this.viewportTransform)) : "";
       t.push('<rect transform="'.concat(a, " translate(").concat(n / 2, ",").concat(o / 2, ')" x="').concat(s.offsetX - n / 2, '" y="').concat(s.offsetY - o / 2, '" width="').concat(r !== "repeat-y" && r !== "no-repeat" || !bo(s) ? n : s.source.width, '" height="').concat(r !== "repeat-x" && r !== "no-repeat" || !bo(s) ? o : s.source.height, '" fill="url(#SVGID_').concat(s.id, `)"></rect>
 `));
     } else t.push('<rect x="0" y="0" width="100%" height="100%" ', 'fill="', s, '"', `></rect>
@@ -1145,7 +1145,7 @@ Resulting to default behavior: removing object from previous canvas and adding t
     let { signal: s } = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
     if (!t) return Promise.reject(new Xt("`json` is undefined"));
     const r = typeof t == "string" ? JSON.parse(t) : t, { objects: n = [], backgroundImage: o, background: a, overlayImage: c, overlay: h, clipPath: l } = r, u = this.renderOnAddRemove;
-    return this.renderOnAddRemove = !1, Promise.all([ys(n, { reviver: e, signal: s }), cr({ backgroundImage: o, backgroundColor: a, overlayImage: c, overlayColor: h, clipPath: l }, { signal: s })]).then((d) => {
+    return this.renderOnAddRemove = !1, Promise.all([ys(n, { reviver: e, signal: s }), lr({ backgroundImage: o, backgroundColor: a, overlayImage: c, overlayColor: h, clipPath: l }, { signal: s })]).then((d) => {
       let [f, g] = d;
       return this.clear(), this.add(...f), this.set(r), this.set(g), this.renderOnAddRemove = u, this;
     });
@@ -1169,7 +1169,7 @@ Resulting to default behavior: removing object from previous canvas and adding t
     return b.width = a, b.height = c, this.enableRetinaScaling = !1, this.viewportTransform = p, this.width = a, this.height = c, this.skipControlsDrawing = !0, this.calcViewportBoundaries(), this.renderCanvas(b.getContext("2d"), S), this.viewportTransform = g, this.width = l, this.height = u, this.calcViewportBoundaries(), this.enableRetinaScaling = m, this.skipControlsDrawing = d, b;
   }
   dispose() {
-    return !this.disposed && this.elements.cleanupDOM({ width: this.width, height: this.height }), $r.cancelByCanvas(this), this.disposed = !0, new Promise((t, e) => {
+    return !this.disposed && this.elements.cleanupDOM({ width: this.width, height: this.height }), Kr.cancelByCanvas(this), this.disposed = !0, new Promise((t, e) => {
       const s = () => {
         this.destroy(), t(!0);
       };
@@ -1183,14 +1183,14 @@ Resulting to default behavior: removing object from previous canvas and adding t
     return "#<Canvas (".concat(this.complexity(), "): { objects: ").concat(this._objects.length, " }>");
   }
 }
-y(hr, "ownDefaults", Gl);
+y(ur, "ownDefaults", Gl);
 const Nl = ["touchstart", "touchmove", "touchend"], tc = (i) => {
   const t = Ka(i.target), e = function(s) {
     const r = s.changedTouches;
     return r && r[0] ? r[0] : s;
   }(i);
   return new _(e.clientX + t.left, e.clientY + t.top);
-}, qr = (i) => Nl.includes(i.type) || i.pointerType === "touch", rn = (i) => {
+}, Zr = (i) => Nl.includes(i.type) || i.pointerType === "touch", rn = (i) => {
   i.preventDefault(), i.stopPropagation();
 }, Ht = (i) => {
   if (i.length === 0) return { left: 0, top: 0, width: 0, height: 0 };
@@ -1207,23 +1207,23 @@ const Nl = ["touchstart", "touchmove", "touchend"], tc = (i) => {
 }, Bn = (i) => ({ scaleX: i.scaleX, scaleY: i.scaleY, skewX: i.skewX, skewY: i.skewY, angle: i.angle, left: i.left, flipX: i.flipX, flipY: i.flipY, top: i.top }), mi = (i, t, e) => {
   const s = i / 2, r = t / 2, n = [new _(-s, -r), new _(s, -r), new _(-s, r), new _(s, r)].map((a) => a.transform(e)), o = Ht(n);
   return new _(o.width, o.height);
-}, lr = function() {
+}, dr = function() {
   let i = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : ut;
   return K(_t(arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : ut), i);
 }, ne = function(i) {
   let t = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : ut, e = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : ut;
-  return i.transform(lr(t, e));
+  return i.transform(dr(t, e));
 }, rc = function(i) {
   let t = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : ut, e = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : ut;
-  return i.transform(lr(t, e), !0);
+  return i.transform(dr(t, e), !0);
 }, nn = (i, t, e) => {
-  const s = lr(t, e);
+  const s = dr(t, e);
   return bs(i, K(s, i.calcOwnMatrix())), s;
 }, Wn = (i, t) => {
   var e;
   const { transform: { target: s } } = t;
   (e = s.canvas) === null || e === void 0 || e.fire("object:".concat(i), v(v({}, t), {}, { target: s })), s.fire(i, t);
-}, $l = { left: -0.5, top: -0.5, center: 0, bottom: 0.5, right: 0.5 }, st = (i) => typeof i == "string" ? $l[i] : i - 0.5, Kr = "not-allowed";
+}, $l = { left: -0.5, top: -0.5, center: 0, bottom: 0.5, right: 0.5 }, st = (i) => typeof i == "string" ? $l[i] : i - 0.5, Jr = "not-allowed";
 function ic(i) {
   return st(i.originX) === st(j) && st(i.originY) === st(j);
 }
@@ -1250,8 +1250,8 @@ const oc = (i, t, e, s) => {
 };
 class ac {
   getSvgStyles(t) {
-    const e = this.fillRule ? this.fillRule : "nonzero", s = this.strokeWidth ? this.strokeWidth : "0", r = this.strokeDashArray ? this.strokeDashArray.join(" ") : pt, n = this.strokeDashOffset ? this.strokeDashOffset : "0", o = this.strokeLineCap ? this.strokeLineCap : "butt", a = this.strokeLineJoin ? this.strokeLineJoin : "miter", c = this.strokeMiterLimit ? this.strokeMiterLimit : "4", h = this.opacity !== void 0 ? this.opacity : "1", l = this.visible ? "" : " visibility: hidden;", u = t ? "" : this.getSvgFilter(), d = Ks(rt, this.fill);
-    return [Ks(mt, this.stroke), "stroke-width: ", s, "; ", "stroke-dasharray: ", r, "; ", "stroke-linecap: ", o, "; ", "stroke-dashoffset: ", n, "; ", "stroke-linejoin: ", a, "; ", "stroke-miterlimit: ", c, "; ", d, "fill-rule: ", e, "; ", "opacity: ", h, ";", u, l].join("");
+    const e = this.fillRule ? this.fillRule : "nonzero", s = this.strokeWidth ? this.strokeWidth : "0", r = this.strokeDashArray ? this.strokeDashArray.join(" ") : pt, n = this.strokeDashOffset ? this.strokeDashOffset : "0", o = this.strokeLineCap ? this.strokeLineCap : "butt", a = this.strokeLineJoin ? this.strokeLineJoin : "miter", c = this.strokeMiterLimit ? this.strokeMiterLimit : "4", h = this.opacity !== void 0 ? this.opacity : "1", l = this.visible ? "" : " visibility: hidden;", u = t ? "" : this.getSvgFilter(), d = Js(rt, this.fill);
+    return [Js(mt, this.stroke), "stroke-width: ", s, "; ", "stroke-dasharray: ", r, "; ", "stroke-linecap: ", o, "; ", "stroke-dashoffset: ", n, "; ", "stroke-linejoin: ", a, "; ", "stroke-miterlimit: ", c, "; ", d, "fill-rule: ", e, "; ", "opacity: ", h, ";", u, l].join("");
   }
   getSvgFilter() {
     return this.shadow ? "filter: url(#SVGID_".concat(this.shadow.id, ");") : "";
@@ -1261,7 +1261,7 @@ class ac {
   }
   getSvgTransform(t) {
     let e = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "";
-    const s = t ? this.calcTransformMatrix() : this.calcOwnMatrix(), r = 'transform="'.concat(qs(s));
+    const s = t ? this.calcTransformMatrix() : this.calcOwnMatrix(), r = 'transform="'.concat(Zs(s));
     return "".concat(r).concat(e, '" ');
   }
   _toSVG(t) {
@@ -1347,19 +1347,19 @@ class zn {
     const t = (e) => {
       this._state === "pending" && (this.startTime = e || +/* @__PURE__ */ new Date(), this._state = "running", this._onStart(), this.tick(this.startTime));
     };
-    this.register(), this.delay > 0 ? setTimeout(() => zs(t), this.delay) : zs(t);
+    this.register(), this.delay > 0 ? setTimeout(() => Ys(t), this.delay) : Ys(t);
   }
   tick(t) {
     const e = (t || +/* @__PURE__ */ new Date()) - this.startTime, s = Math.min(e, this.duration);
     this.durationProgress = s / this.duration;
     const { value: r, valueProgress: n } = this.calculate(s);
-    this.value = Object.freeze(r), this.valueProgress = n, this._state !== "aborted" && (this._abort(this.value, this.valueProgress, this.durationProgress) ? (this._state = "aborted", this.unregister()) : e >= this.duration ? (this.durationProgress = this.valueProgress = 1, this._onChange(this.endValue, this.valueProgress, this.durationProgress), this._state = "completed", this._onComplete(this.endValue, this.valueProgress, this.durationProgress), this.unregister()) : (this._onChange(this.value, this.valueProgress, this.durationProgress), zs(this.tick)));
+    this.value = Object.freeze(r), this.valueProgress = n, this._state !== "aborted" && (this._abort(this.value, this.valueProgress, this.durationProgress) ? (this._state = "aborted", this.unregister()) : e >= this.duration ? (this.durationProgress = this.valueProgress = 1, this._onChange(this.endValue, this.valueProgress, this.durationProgress), this._state = "completed", this._onComplete(this.endValue, this.valueProgress, this.durationProgress), this.unregister()) : (this._onChange(this.value, this.valueProgress, this.durationProgress), Ys(this.tick)));
   }
   register() {
-    $r.push(this);
+    Kr.push(this);
   }
   unregister() {
-    $r.remove(this);
+    Kr.remove(this);
   }
   abort() {
     this._state = "aborted", this.unregister();
@@ -1407,7 +1407,7 @@ function hc(i) {
   const t = new ru(i);
   return t.start(), t;
 }
-const iu = new _(1, 0), lc = new _(), Yn = (i, t) => i.rotate(t), Zr = (i, t) => new _(t).subtract(i), Jr = (i) => i.distanceFrom(lc), Qr = (i, t) => Math.atan2(gs(i, t), dc(i, t)), uc = (i) => Qr(iu, i), yi = (i) => i.eq(lc) ? i : i.scalarDivide(Jr(i)), Vn = function(i) {
+const iu = new _(1, 0), lc = new _(), Yn = (i, t) => i.rotate(t), Qr = (i, t) => new _(t).subtract(i), ti = (i) => i.distanceFrom(lc), ei = (i, t) => Math.atan2(gs(i, t), dc(i, t)), uc = (i) => ei(iu, i), yi = (i) => i.eq(lc) ? i : i.scalarDivide(ti(i)), Vn = function(i) {
   let t = !(arguments.length > 1 && arguments[1] !== void 0) || arguments[1];
   return yi(new _(-i.y, i.x).scalarMultiply(t ? 1 : -1));
 }, gs = (i, t) => i.x * t.y - i.y * t.x, dc = (i, t) => i.x * t.x + i.y * t.y, an = (i, t, e) => {
@@ -1432,7 +1432,7 @@ class U {
     if (e.x === s.x) return t.x === e.x && (r || t.y >= Math.min(e.y, s.y) && t.y <= Math.max(e.y, s.y));
     if (e.y === s.y) return t.y === e.y && (r || t.x >= Math.min(e.x, s.x) && t.x <= Math.max(e.x, s.x));
     {
-      const n = Zr(e, s), o = Zr(e, t).divide(n);
+      const n = Qr(e, s), o = Qr(e, t).divide(n);
       return r ? Math.abs(o.x) === Math.abs(o.y) : o.x === o.y && o.x >= 0 && o.x <= 1;
     }
   }
@@ -1498,7 +1498,7 @@ class nu extends za {
     this.strokeUniform && (r = 0, n = s);
     const o = e.width + r, a = e.height + r;
     let c;
-    return c = e.skewX === 0 && e.skewY === 0 ? new _(o * e.scaleX, a * e.scaleY) : mi(o, a, ar(e)), c.scalarAdd(n);
+    return c = e.skewX === 0 && e.skewY === 0 ? new _(o * e.scaleX, a * e.scaleY) : mi(o, a, hr(e)), c.scalarAdd(n);
   }
   translateToGivenOrigin(t, e, s, r, n) {
     let o = t.x, a = t.y;
@@ -1647,7 +1647,7 @@ class ou extends nu {
     return ((t = this.canvas) === null || t === void 0 ? void 0 : t.viewportTransform) || ut.concat();
   }
   calcACoords() {
-    const t = Ds({ angle: this.angle }), { x: e, y: s } = this.getRelativeCenterPoint(), r = Ms(e, s), n = K(r, t), o = this._getTransformedDimensions(), a = o.x / 2, c = o.y / 2;
+    const t = js({ angle: this.angle }), { x: e, y: s } = this.getRelativeCenterPoint(), r = Is(e, s), n = K(r, t), o = this._getTransformedDimensions(), a = o.x / 2, c = o.y / 2;
     return { tl: at({ x: -a, y: -c }, n), tr: at({ x: a, y: -c }, n), bl: at({ x: -a, y: c }, n), br: at({ x: a, y: c }, n) };
   }
   setCoords() {
@@ -1781,7 +1781,7 @@ class oe {
   }
 }
 y(oe, "ownDefaults", { color: "rgb(0,0,0)", blur: 0, offsetX: 0, offsetY: 0, affectStroke: !1, includeDefaultValues: !0, nonScaling: !1 }), y(oe, "type", "shadow"), C.setClass(oe, "shadow");
-const hu = [gt, F, dt, St, "flipX", "flipY", "originX", "originY", "angle", "opacity", "globalCompositeOperation", "shadow", "visible", Os, ks], le = [rt, mt, "strokeWidth", "strokeDashArray", "width", "height", "paintFirst", "strokeUniform", "strokeLineCap", "strokeDashOffset", "strokeLineJoin", "strokeMiterLimit", "backgroundColor", "clipPath"], lu = { top: 0, left: 0, width: 0, height: 0, angle: 0, flipX: !1, flipY: !1, scaleX: 1, scaleY: 1, minScaleLimit: 0, skewX: 0, skewY: 0, originX: F, originY: gt, strokeWidth: 1, strokeUniform: !1, padding: 0, opacity: 1, paintFirst: rt, fill: "rgb(0,0,0)", fillRule: "nonzero", stroke: null, strokeDashArray: null, strokeDashOffset: 0, strokeLineCap: "butt", strokeLineJoin: "miter", strokeMiterLimit: 4, globalCompositeOperation: "source-over", backgroundColor: "", shadow: null, visible: !0, includeDefaultValues: !0, excludeFromExport: !1, objectCaching: !0, clipPath: void 0, inverted: !1, absolutePositioned: !1, centeredRotation: !0, centeredScaling: !1, dirty: !0 }, uu = ["type"], du = ["extraParam"];
+const hu = [gt, F, dt, St, "flipX", "flipY", "originX", "originY", "angle", "opacity", "globalCompositeOperation", "shadow", "visible", Ms, Ds], le = [rt, mt, "strokeWidth", "strokeDashArray", "width", "height", "paintFirst", "strokeUniform", "strokeLineCap", "strokeDashOffset", "strokeLineJoin", "strokeMiterLimit", "backgroundColor", "clipPath"], lu = { top: 0, left: 0, width: 0, height: 0, angle: 0, flipX: !1, flipY: !1, scaleX: 1, scaleY: 1, minScaleLimit: 0, skewX: 0, skewY: 0, originX: F, originY: gt, strokeWidth: 1, strokeUniform: !1, padding: 0, opacity: 1, paintFirst: rt, fill: "rgb(0,0,0)", fillRule: "nonzero", stroke: null, strokeDashArray: null, strokeDashOffset: 0, strokeLineCap: "butt", strokeLineJoin: "miter", strokeMiterLimit: 4, globalCompositeOperation: "source-over", backgroundColor: "", shadow: null, visible: !0, includeDefaultValues: !0, excludeFromExport: !1, objectCaching: !0, clipPath: void 0, inverted: !1, absolutePositioned: !1, centeredRotation: !0, centeredScaling: !1, dirty: !0 }, uu = ["type"], du = ["extraParam"];
 let je = class cn extends fc {
   static getDefaults() {
     return cn.ownDefaults;
@@ -1802,7 +1802,7 @@ let je = class cn extends fc {
   _limitCacheSize(t) {
     const e = t.width, s = t.height, r = A.maxCacheSideLimit, n = A.minCacheSideLimit;
     if (e <= r && s <= r && e * s <= A.perfLimitSizeTotal) return e < n && (t.width = n), s < n && (t.height = n), t;
-    const o = e / s, [a, c] = Xs.limitDimsByArea(o), h = Xe(n, a, r), l = Xe(n, c, r);
+    const o = e / s, [a, c] = Hs.limitDimsByArea(o), h = Xe(n, a, r), l = Xe(n, c, r);
     return e > h && (t.zoomX /= e / h, t.width = h, t.capped = !0), s > l && (t.zoomY /= s / l, t.height = l, t.capped = !0), t;
   }
   _getCacheCanvasDimensions() {
@@ -1995,7 +1995,7 @@ let je = class cn extends fc {
   }
   toCanvasElement() {
     let t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    const e = Bn(this), s = this.group, r = this.shadow, n = Math.abs, o = t.enableRetinaScaling ? La() : 1, a = (t.multiplier || 1) * o, c = t.canvasProvider || ((S) => new hr(S, { enableRetinaScaling: !1, renderOnAddRemove: !1, skipOffscreen: !1 }));
+    const e = Bn(this), s = this.group, r = this.shadow, n = Math.abs, o = t.enableRetinaScaling ? La() : 1, a = (t.multiplier || 1) * o, c = t.canvasProvider || ((S) => new ur(S, { enableRetinaScaling: !1, renderOnAddRemove: !1, skipOffscreen: !1 }));
     delete this.group, t.withoutTransform && sc(this), t.withoutShadow && (this.shadow = null), t.viewportTransform && nn(this, this.getViewportTransform()), this.setCoords();
     const h = J(), l = this.getBoundingRect(), u = this.shadow, d = new _();
     if (u) {
@@ -2042,11 +2042,11 @@ let je = class cn extends fc {
     this.globalCompositeOperation && (t.globalCompositeOperation = this.globalCompositeOperation);
   }
   dispose() {
-    $r.cancelByTarget(this), this.off(), this._set("canvas", void 0), this._cacheCanvas && Gt().dispose(this._cacheCanvas), this._cacheCanvas = void 0, this._cacheContext = null;
+    Kr.cancelByTarget(this), this.off(), this._set("canvas", void 0), this._cacheCanvas && Gt().dispose(this._cacheCanvas), this._cacheCanvas = void 0, this._cacheContext = null;
   }
   static _fromObject(t) {
     let e = N(t, uu), s = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, { extraParam: r } = s, n = N(s, du);
-    return cr(e, n).then((o) => r ? (delete o[r], new this(e[r], o)) : new this(o));
+    return lr(e, n).then((o) => r ? (delete o[r], new this(e[r], o)) : new this(o));
   }
   static fromObject(t, e) {
     return this._fromObject(t, e);
@@ -2063,7 +2063,7 @@ function Ve(i) {
     return n.setPositionByOrigin(h, e.originX, e.originY), l;
   };
 }
-const hn = Oe($s, Ve((i, t, e, s) => {
+const hn = Oe(Ks, Ve((i, t, e, s) => {
   const r = vi(t, t.originX, t.originY, e, s);
   if (st(t.originX) === st(j) || st(t.originX) === st(Z) && r.x < 0 || st(t.originX) === st(F) && r.x > 0) {
     const { target: n } = t, o = n.strokeWidth / (n.strokeUniform ? n.scaleX : 1), a = ic(t) ? 2 : 1, c = n.width, h = Math.ceil(Math.abs(r.x * a / n.scaleX) - o);
@@ -2119,14 +2119,14 @@ class $ {
     return new _(this.x * t.x + this.offsetX, this.y * t.y + this.offsetY).transform(e);
   }
   calcCornerCoords(t, e, s, r, n, o) {
-    const a = gi([Ms(s, r), Ds({ angle: t }), pi((n ? this.touchSizeX : this.sizeX) || e, (n ? this.touchSizeY : this.sizeY) || e)]);
+    const a = gi([Is(s, r), js({ angle: t }), pi((n ? this.touchSizeX : this.sizeX) || e, (n ? this.touchSizeY : this.sizeY) || e)]);
     return { tl: new _(-0.5, -0.5).transform(a), tr: new _(0.5, -0.5).transform(a), br: new _(0.5, 0.5).transform(a), bl: new _(-0.5, 0.5).transform(a) };
   }
   render(t, e, s, r, n) {
     ((r = r || {}).cornerStyle || n.cornerStyle) === "circle" ? gc.call(this, t, e, s, r, n) : pc.call(this, t, e, s, r, n);
   }
 }
-const mc = (i, t, e) => e.lockRotation ? Kr : t.cursorStyle, vc = Oe(Ra, Ve((i, t, e, s) => {
+const mc = (i, t, e) => e.lockRotation ? Jr : t.cursorStyle, vc = Oe(Ra, Ve((i, t, e, s) => {
   let { target: r, ex: n, ey: o, theta: a, originX: c, originY: h } = t;
   const l = r.translateToOriginPoint(r.getRelativeCenterPoint(), c, h);
   if (Lt(r, "lockRotation")) return !1;
@@ -2152,7 +2152,7 @@ function bc(i, t, e) {
 }
 const fu = ["e", "se", "s", "sw", "w", "nw", "n", "ne", "e"], Ze = (i, t, e) => {
   const s = yc(i, e);
-  if (bc(e, t.x !== 0 && t.y === 0 ? "x" : t.x === 0 && t.y !== 0 ? "y" : "", s)) return Kr;
+  if (bc(e, t.x !== 0 && t.y === 0 ? "x" : t.x === 0 && t.y !== 0 ? "y" : "", s)) return Jr;
   const r = nc(e, t);
   return "".concat(fu[r], "-resize");
 };
@@ -2173,8 +2173,8 @@ function Nn(i, t, e, s) {
   const g = n.scaleX, p = n.scaleY;
   return o ? (o === "x" && n.set(dt, h), o === "y" && n.set(St, l)) : (!Lt(n, "lockScalingX") && n.set(dt, h), !Lt(n, "lockScalingY") && n.set(St, l)), g !== n.scaleX || p !== n.scaleY;
 }
-const Fs = Oe(di, Ve((i, t, e, s) => Nn(i, t, e, s))), _c = Oe(di, Ve((i, t, e, s) => Nn(i, t, e, s, { by: "x" }))), Sc = Oe(di, Ve((i, t, e, s) => Nn(i, t, e, s, { by: "y" }))), gu = ["target", "ex", "ey", "skewingSide"], Xi = { x: { counterAxis: "y", scale: dt, skew: Os, lockSkewing: "lockSkewingX", origin: "originX", flip: "flipX" }, y: { counterAxis: "x", scale: St, skew: ks, lockSkewing: "lockSkewingY", origin: "originY", flip: "flipY" } }, pu = ["ns", "nesw", "ew", "nwse"], Tc = (i, t, e) => {
-  if (t.x !== 0 && Lt(e, "lockSkewingY") || t.y !== 0 && Lt(e, "lockSkewingX")) return Kr;
+const Bs = Oe(di, Ve((i, t, e, s) => Nn(i, t, e, s))), _c = Oe(di, Ve((i, t, e, s) => Nn(i, t, e, s, { by: "x" }))), Sc = Oe(di, Ve((i, t, e, s) => Nn(i, t, e, s, { by: "y" }))), gu = ["target", "ex", "ey", "skewingSide"], Xi = { x: { counterAxis: "y", scale: dt, skew: Ms, lockSkewing: "lockSkewingX", origin: "originX", flip: "flipX" }, y: { counterAxis: "x", scale: St, skew: Ds, lockSkewing: "lockSkewingY", origin: "originY", flip: "flipY" } }, pu = ["ns", "nesw", "ew", "nwse"], Tc = (i, t, e) => {
+  if (t.x !== 0 && Lt(e, "lockSkewingY") || t.y !== 0 && Lt(e, "lockSkewingX")) return Jr;
   const s = nc(e, t) % 4;
   return "".concat(pu[s], "-resize");
 };
@@ -2186,28 +2186,28 @@ function xc(i, t, e, s, r) {
     let { target: M, ex: P, ey: W, skewingSide: nt } = x, R = N(x, gu);
     const { skew: X } = Xi[O], tt = D.subtract(new _(P, W)).divide(new _(M.scaleX, M.scaleY))[O], Dt = M[X], Tt = R[X], Jt = Math.tan(q(Tt)), Qt = O === "y" ? M._getTransformedDimensions({ scaleX: 1, scaleY: 1, skewX: 0 }).x : M._getTransformedDimensions({ scaleX: 1, scaleY: 1 }).y, Me = 2 * tt * nt / Math.max(Qt, 1) + Jt, De = xe(Math.atan(Me));
     M.set(X, De);
-    const pr = Dt !== M[X];
-    if (pr && O === "y") {
-      const { skewX: Ei, scaleX: Ps } = M, ge = M._getTransformedDimensions({ skewY: Dt }), mr = M._getTransformedDimensions(), Ie = Ei !== 0 ? ge.x / mr.x : 1;
-      Ie !== 1 && M.set(dt, Ie * Ps);
+    const vr = Dt !== M[X];
+    if (vr && O === "y") {
+      const { skewX: Ei, scaleX: Ls } = M, ge = M._getTransformedDimensions({ skewY: Dt }), yr = M._getTransformedDimensions(), Ie = Ei !== 0 ? ge.x / yr.x : 1;
+      Ie !== 1 && M.set(dt, Ie * Ls);
     }
-    return pr;
+    return vr;
   }(i, S, new _(w, k))))(t, v(v({}, e), {}, { [a]: p, skewingSide: g }), s, r);
 }
 const wc = (i, t, e, s) => xc("x", i, t, e, s), Cc = (i, t, e, s) => xc("y", i, t, e, s);
 function _i(i, t) {
   return i[t.canvas.altActionKey];
 }
-const Rs = (i, t, e) => {
+const Ws = (i, t, e) => {
   const s = _i(i, e);
-  return t.x === 0 ? s ? Os : St : t.y === 0 ? s ? ks : dt : "";
-}, Le = (i, t, e) => _i(i, e) ? Tc(0, t, e) : Ze(i, t, e), ln = (i, t, e, s) => _i(i, t.target) ? Cc(i, t, e, s) : _c(i, t, e, s), un = (i, t, e, s) => _i(i, t.target) ? wc(i, t, e, s) : Sc(i, t, e, s), Un = () => ({ ml: new $({ x: -0.5, y: 0, cursorStyleHandler: Le, actionHandler: ln, getActionName: Rs }), mr: new $({ x: 0.5, y: 0, cursorStyleHandler: Le, actionHandler: ln, getActionName: Rs }), mb: new $({ x: 0, y: 0.5, cursorStyleHandler: Le, actionHandler: un, getActionName: Rs }), mt: new $({ x: 0, y: -0.5, cursorStyleHandler: Le, actionHandler: un, getActionName: Rs }), tl: new $({ x: -0.5, y: -0.5, cursorStyleHandler: Ze, actionHandler: Fs }), tr: new $({ x: 0.5, y: -0.5, cursorStyleHandler: Ze, actionHandler: Fs }), bl: new $({ x: -0.5, y: 0.5, cursorStyleHandler: Ze, actionHandler: Fs }), br: new $({ x: 0.5, y: 0.5, cursorStyleHandler: Ze, actionHandler: Fs }), mtr: new $({ x: 0, y: -0.5, actionHandler: vc, cursorStyleHandler: mc, offsetY: -40, withConnection: !0, actionName: En }) }), Oc = () => ({ mr: new $({ x: 0.5, y: 0, actionHandler: hn, cursorStyleHandler: Le, actionName: $s }), ml: new $({ x: -0.5, y: 0, actionHandler: hn, cursorStyleHandler: Le, actionName: $s }) }), kc = () => v(v({}, Un()), Oc());
-class Zs extends je {
+  return t.x === 0 ? s ? Ms : St : t.y === 0 ? s ? Ds : dt : "";
+}, Le = (i, t, e) => _i(i, e) ? Tc(0, t, e) : Ze(i, t, e), ln = (i, t, e, s) => _i(i, t.target) ? Cc(i, t, e, s) : _c(i, t, e, s), un = (i, t, e, s) => _i(i, t.target) ? wc(i, t, e, s) : Sc(i, t, e, s), Un = () => ({ ml: new $({ x: -0.5, y: 0, cursorStyleHandler: Le, actionHandler: ln, getActionName: Ws }), mr: new $({ x: 0.5, y: 0, cursorStyleHandler: Le, actionHandler: ln, getActionName: Ws }), mb: new $({ x: 0, y: 0.5, cursorStyleHandler: Le, actionHandler: un, getActionName: Ws }), mt: new $({ x: 0, y: -0.5, cursorStyleHandler: Le, actionHandler: un, getActionName: Ws }), tl: new $({ x: -0.5, y: -0.5, cursorStyleHandler: Ze, actionHandler: Bs }), tr: new $({ x: 0.5, y: -0.5, cursorStyleHandler: Ze, actionHandler: Bs }), bl: new $({ x: -0.5, y: 0.5, cursorStyleHandler: Ze, actionHandler: Bs }), br: new $({ x: 0.5, y: 0.5, cursorStyleHandler: Ze, actionHandler: Bs }), mtr: new $({ x: 0, y: -0.5, actionHandler: vc, cursorStyleHandler: mc, offsetY: -40, withConnection: !0, actionName: En }) }), Oc = () => ({ mr: new $({ x: 0.5, y: 0, actionHandler: hn, cursorStyleHandler: Le, actionName: Ks }), ml: new $({ x: -0.5, y: 0, actionHandler: hn, cursorStyleHandler: Le, actionName: Ks }) }), kc = () => v(v({}, Un()), Oc());
+class Qs extends je {
   static getDefaults() {
-    return v(v({}, super.getDefaults()), Zs.ownDefaults);
+    return v(v({}, super.getDefaults()), Qs.ownDefaults);
   }
   constructor(t) {
-    super(), Object.assign(this, this.constructor.createControls(), Zs.ownDefaults), this.setOptions(t);
+    super(), Object.assign(this, this.constructor.createControls(), Qs.ownDefaults), this.setOptions(t);
   }
   static createControls() {
     return { controls: Un() };
@@ -2235,7 +2235,7 @@ class Zs extends je {
     }
   }
   calcOCoords() {
-    const t = this.getViewportTransform(), e = this.getCenterPoint(), s = Ms(e.x, e.y), r = Ds({ angle: this.getTotalAngle() - (this.group && this.flipX ? 180 : 0) }), n = K(s, r), o = K(t, n), a = K(o, [1 / t[0], 0, 0, 1 / t[3], 0, 0]), c = this.group ? vs(this.calcTransformMatrix()) : void 0;
+    const t = this.getViewportTransform(), e = this.getCenterPoint(), s = Is(e.x, e.y), r = js({ angle: this.getTotalAngle() - (this.group && this.flipX ? 180 : 0) }), n = K(s, r), o = K(t, n), a = K(o, [1 / t[0], 0, 0, 1 / t[3], 0, 0]), c = this.group ? vs(this.calcTransformMatrix()) : void 0;
     c && (c.scaleX = Math.abs(c.scaleX), c.scaleY = Math.abs(c.scaleY));
     const h = this._calculateCurrentDimensions(c), l = {};
     return this.forEachControl((u, d) => {
@@ -2275,7 +2275,7 @@ class Zs extends je {
   drawBorders(t, e, s) {
     let r;
     if (s && s.forActiveSelection || this.group) {
-      const n = mi(this.width, this.height, ar(e)), o = this.isStrokeAccountedForInDimensions() ? Pn : (this.strokeUniform ? new _().scalarAdd(this.canvas ? this.canvas.getZoom() : 1) : new _(e.scaleX, e.scaleY)).scalarMultiply(this.strokeWidth);
+      const n = mi(this.width, this.height, hr(e)), o = this.isStrokeAccountedForInDimensions() ? Pn : (this.strokeUniform ? new _().scalarAdd(this.canvas ? this.canvas.getZoom() : 1) : new _(e.scaleX, e.scaleY)).scalarMultiply(this.strokeWidth);
       r = n.add(o).scalarAdd(this.borderScaleFactor).scalarAdd(2 * this.padding);
     } else r = this._calculateCurrentDimensions().scalarAdd(this.borderScaleFactor);
     this._drawBorders(t, r, s);
@@ -2346,8 +2346,8 @@ function Mc(i, t) {
     });
   }), i;
 }
-y(Zs, "ownDefaults", { noScaleCache: !0, lockMovementX: !1, lockMovementY: !1, lockRotation: !1, lockScalingX: !1, lockScalingY: !1, lockSkewingX: !1, lockSkewingY: !1, lockScalingFlip: !1, cornerSize: 13, touchCornerSize: 24, transparentCorners: !0, cornerColor: "rgb(178,204,255)", cornerStrokeColor: "", cornerStyle: "rect", cornerDashArray: null, hasControls: !0, borderColor: "rgb(178,204,255)", borderDashArray: null, borderOpacityWhenMoving: 0.4, borderScaleFactor: 1, hasBorders: !0, selectionBackgroundColor: "", selectable: !0, evented: !0, perPixelTargetFind: !1, activeOn: "down", hoverCursor: null, moveCursor: null });
-class ot extends Zs {
+y(Qs, "ownDefaults", { noScaleCache: !0, lockMovementX: !1, lockMovementY: !1, lockRotation: !1, lockScalingX: !1, lockScalingY: !1, lockSkewingX: !1, lockSkewingY: !1, lockScalingFlip: !1, cornerSize: 13, touchCornerSize: 24, transparentCorners: !0, cornerColor: "rgb(178,204,255)", cornerStrokeColor: "", cornerStyle: "rect", cornerDashArray: null, hasControls: !0, borderColor: "rgb(178,204,255)", borderDashArray: null, borderOpacityWhenMoving: 0.4, borderScaleFactor: 1, hasBorders: !0, selectionBackgroundColor: "", selectable: !0, evented: !0, perPixelTargetFind: !1, activeOn: "down", hoverCursor: null, moveCursor: null });
+class ot extends Qs {
 }
 Mc(ot, [ac]), C.setClass(ot), C.setClass(ot, "object");
 const Dc = (i, t, e, s) => {
@@ -2361,7 +2361,7 @@ class Ic {
     this.options = t, this.strokeProjectionMagnitude = this.options.strokeWidth / 2, this.scale = new _(this.options.scaleX, this.options.scaleY), this.strokeUniformScalar = this.options.strokeUniform ? new _(1 / this.options.scaleX, 1 / this.options.scaleY) : new _(1, 1);
   }
   createSideVector(t, e) {
-    const s = Zr(t, e);
+    const s = Qr(t, e);
     return this.options.strokeUniform ? s.multiply(this.scale) : s;
   }
   projectOrthogonally(t, e, s) {
@@ -2381,11 +2381,11 @@ class Ic {
 const mu = new _();
 class ps extends Ic {
   static getOrthogonalRotationFactor(t, e) {
-    const s = e ? Qr(t, e) : uc(t);
+    const s = e ? ei(t, e) : uc(t);
     return Math.abs(s) < Se ? -1 : 1;
   }
   constructor(t, e, s, r) {
-    super(r), y(this, "AB", void 0), y(this, "AC", void 0), y(this, "alpha", void 0), y(this, "bisector", void 0), this.A = new _(t), this.B = new _(e), this.C = new _(s), this.AB = this.createSideVector(this.A, this.B), this.AC = this.createSideVector(this.A, this.C), this.alpha = Qr(this.AB, this.AC), this.bisector = yi(Yn(this.AB.eq(mu) ? this.AC : this.AB, this.alpha / 2));
+    super(r), y(this, "AB", void 0), y(this, "AC", void 0), y(this, "alpha", void 0), y(this, "bisector", void 0), this.A = new _(t), this.B = new _(e), this.C = new _(s), this.AB = this.createSideVector(this.A, this.B), this.AC = this.createSideVector(this.A, this.C), this.alpha = ei(this.AB, this.AC), this.bisector = yi(Yn(this.AB.eq(mu) ? this.AC : this.AB, this.alpha / 2));
   }
   calcOrthogonalProjection(t, e) {
     let s = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : this.strokeProjectionMagnitude;
@@ -2399,8 +2399,8 @@ class ps extends Ic {
     }), t;
   }
   projectMiter() {
-    const t = [], e = Math.abs(this.alpha), s = 1 / Math.sin(e / 2), r = this.scaleUnitVector(this.bisector, -this.strokeProjectionMagnitude * s), n = this.options.strokeUniform ? Jr(this.scaleUnitVector(this.bisector, this.options.strokeMiterLimit)) : this.options.strokeMiterLimit;
-    return Jr(r) / this.strokeProjectionMagnitude <= n && t.push(this.applySkew(this.A.add(r))), t.push(...this.projectBevel()), t;
+    const t = [], e = Math.abs(this.alpha), s = 1 / Math.sin(e / 2), r = this.scaleUnitVector(this.bisector, -this.strokeProjectionMagnitude * s), n = this.options.strokeUniform ? ti(this.scaleUnitVector(this.bisector, this.options.strokeMiterLimit)) : this.options.strokeMiterLimit;
+    return ti(r) / this.strokeProjectionMagnitude <= n && t.push(this.applySkew(this.A.add(r))), t.push(...this.projectBevel()), t;
   }
   projectRoundNoSkew(t, e) {
     const s = [], r = new _(ps.getOrthogonalRotationFactor(this.bisector), ps.getOrthogonalRotationFactor(new _(this.bisector.y, this.bisector.x)));
@@ -2588,18 +2588,18 @@ function dn(i) {
     const n = s.filter((g) => !!g), [, o, ...a] = n, [c, h, l, u, d, f] = a.map((g) => parseFloat(g));
     switch (o) {
       case "translate":
-        r = Ms(c, h);
+        r = Is(c, h);
         break;
       case En:
-        r = Ds({ angle: c }, { x: h, y: l });
+        r = js({ angle: c }, { x: h, y: l });
         break;
       case fi:
         r = pi(c, h);
         break;
-      case Os:
+      case Ms:
         r = Ln(c);
         break;
-      case ks:
+      case Ds:
         r = Fn(c);
         break;
       case "matrix":
@@ -2720,8 +2720,8 @@ class z extends ot {
   }
 }
 y(z, "type", "Rect"), y(z, "cacheProperties", [...le, ...Fc]), y(z, "ownDefaults", { rx: 0, ry: 0 }), y(z, "ATTRIBUTE_NAMES", [...ke, "x", "y", "rx", "ry", "width", "height"]), C.setClass(z), C.setSVGClass(z);
-const re = "initialization", ti = "added", Kn = "removed", ei = "imperative", Rc = (i, t) => {
-  const { strokeUniform: e, strokeWidth: s, width: r, height: n, group: o } = t, a = o && o !== i ? lr(o.calcTransformMatrix(), i.calcTransformMatrix()) : null, c = a ? t.getRelativeCenterPoint().transform(a) : t.getRelativeCenterPoint(), h = !t.isStrokeAccountedForInDimensions(), l = e && h ? rc(new _(s, s), void 0, i.calcTransformMatrix()) : Pn, u = !e && h ? s : 0, d = mi(r + u, n + u, gi([a, t.calcOwnMatrix()], !0)).add(l).scalarDivide(2);
+const re = "initialization", si = "added", Kn = "removed", ri = "imperative", Rc = (i, t) => {
+  const { strokeUniform: e, strokeWidth: s, width: r, height: n, group: o } = t, a = o && o !== i ? dr(o.calcTransformMatrix(), i.calcTransformMatrix()) : null, c = a ? t.getRelativeCenterPoint().transform(a) : t.getRelativeCenterPoint(), h = !t.isStrokeAccountedForInDimensions(), l = e && h ? rc(new _(s, s), void 0, i.calcTransformMatrix()) : Pn, u = !e && h ? s : 0, d = mi(r + u, n + u, gi([a, t.calcOwnMatrix()], !0)).add(l).scalarDivide(2);
   return [c.subtract(d), c.add(d)];
 };
 class xi {
@@ -2730,7 +2730,7 @@ class xi {
   }
   shouldPerformLayout(t) {
     let { type: e, prevStrategy: s, strategy: r } = t;
-    return e === re || e === ei || !!s && r !== s;
+    return e === re || e === ri || !!s && r !== s;
   }
   shouldLayoutClipPath(t) {
     let { type: e, target: { clipPath: s } } = t;
@@ -2741,7 +2741,7 @@ class xi {
   }
   calcBoundingBox(t, e) {
     const { type: s, target: r } = e;
-    if (s === ei && e.overrides) return e.overrides;
+    if (s === ri && e.overrides) return e.overrides;
     if (t.length === 0) return;
     const { left: n, top: o, width: a, height: c } = Ht(t.map((u) => Rc(r, u)).reduce((u, d) => u.concat(d), [])), h = new _(a, c), l = new _(n, o).add(h.scalarDivide(2));
     if (s === re) {
@@ -2759,7 +2759,7 @@ class fn extends xi {
 }
 y(fn, "type", "fit-content"), C.setClass(fn);
 const Wu = ["strategy"], Xu = ["target", "strategy", "bubbles", "prevStrategy"], Bc = "layoutManager";
-class Js {
+class tr {
   constructor() {
     let t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : new fn();
     y(this, "strategy", void 0), this.strategy = t, this._subscriptions = /* @__PURE__ */ new Map();
@@ -2774,7 +2774,7 @@ class Js {
   }
   attachHandlers(t, e) {
     const { target: s } = e;
-    return [Ur, Fa, $s, Ra, di, Ba, Nr, Wa, Hl].map((r) => t.on(r, (n) => this.performLayout(r === Ur ? { type: "object_modified", trigger: r, e: n, target: s } : { type: "object_modifying", trigger: r, e: n, target: s })));
+    return [qr, Fa, Ks, Ra, di, Ba, $r, Wa, Hl].map((r) => t.on(r, (n) => this.performLayout(r === qr ? { type: "object_modified", trigger: r, e: n, target: s } : { type: "object_modifying", trigger: r, e: n, target: s })));
   }
   subscribe(t, e) {
     this.unsubscribe(t, e);
@@ -2792,7 +2792,7 @@ class Js {
   }
   onBeforeLayout(t) {
     const { target: e, type: s } = t, { canvas: r } = e;
-    if (s === re || s === ti ? this.subscribeTargets(t) : s === Kn && this.unsubscribeTargets(t), e.fire("layout:before", { context: t }), r && r.fire("object:layout:before", { target: e, context: t }), s === ei && t.deep) {
+    if (s === re || s === si ? this.subscribeTargets(t) : s === Kn && this.unsubscribeTargets(t), e.fire("layout:before", { context: t }), r && r.fire("object:layout:before", { target: e, context: t }), s === ri && t.deep) {
       const n = N(t, Wu);
       e.forEachObject((o) => o.layoutManager && o.layoutManager.performLayout(v(v({}, n), {}, { bubbles: !1, target: o })));
     }
@@ -2835,9 +2835,9 @@ class Js {
     return this.toObject();
   }
 }
-C.setClass(Js, Bc);
+C.setClass(tr, Bc);
 const zu = ["type", "objects", "layoutManager"];
-class Hu extends Js {
+class Hu extends tr {
   performLayout() {
   }
 }
@@ -2853,7 +2853,7 @@ class Yt extends Xa(ot) {
     var s;
     this._objects = [...t], this.__objectSelectionTracker = this.__objectSelectionMonitor.bind(this, !0), this.__objectSelectionDisposer = this.__objectSelectionMonitor.bind(this, !1), this.forEachObject((r) => {
       this.enterGroup(r, !1);
-    }), this.layoutManager = (s = e.layoutManager) !== null && s !== void 0 ? s : new Js(), this.layoutManager.performLayout({ type: re, target: this, targets: [...t], x: e.left, y: e.top });
+    }), this.layoutManager = (s = e.layoutManager) !== null && s !== void 0 ? s : new tr(), this.layoutManager.performLayout({ type: re, target: this, targets: [...t], x: e.left, y: e.top });
   }
   canEnterGroup(t) {
     return t === this || this.isDescendantOf(t) ? (_e("error", "Group: circular object trees are not supported, this call has no effect"), !1) : this._objects.indexOf(t) === -1 || (_e("error", "Group: duplicate objects are not supported inside group, this call has no effect"), !1);
@@ -2864,12 +2864,12 @@ class Yt extends Xa(ot) {
   add() {
     for (var t = arguments.length, e = new Array(t), s = 0; s < t; s++) e[s] = arguments[s];
     const r = this._filterObjectsBeforeEnteringGroup(e), n = super.add(...r);
-    return this._onAfterObjectsChange(ti, r), n;
+    return this._onAfterObjectsChange(si, r), n;
   }
   insertAt(t) {
     for (var e = arguments.length, s = new Array(e > 1 ? e - 1 : 0), r = 1; r < e; r++) s[r - 1] = arguments[r];
     const n = this._filterObjectsBeforeEnteringGroup(s), o = super.insertAt(t, ...n);
-    return this._onAfterObjectsChange(ti, n), o;
+    return this._onAfterObjectsChange(si, n), o;
   }
   remove() {
     const t = super.remove(...arguments);
@@ -2955,7 +2955,7 @@ class Yt extends Xa(ot) {
   }
   triggerLayout() {
     let t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    this.layoutManager.performLayout(v({ target: this, type: ei }, t));
+    this.layoutManager.performLayout(v({ target: this, type: ri }, t));
   }
   render(t) {
     this._transformDone = !0, super.render(t), this._transformDone = !1;
@@ -3011,13 +3011,13 @@ class Yt extends Xa(ot) {
   }
   static fromObject(t, e) {
     let { type: s, objects: r = [], layoutManager: n } = t, o = N(t, zu);
-    return Promise.all([ys(r, e), cr(o, e)]).then((a) => {
+    return Promise.all([ys(r, e), lr(o, e)]).then((a) => {
       let [c, h] = a;
       const l = new this(c, v(v(v({}, o), h), {}, { layoutManager: new Hu() }));
       if (n) {
         const u = C.getClass(n.type), d = C.getClass(n.strategy);
         l.layoutManager = new u(new d());
-      } else l.layoutManager = new Js();
+      } else l.layoutManager = new tr();
       return l.layoutManager.subscribeTargets({ type: re, target: l, targets: l.getObjects() }), l.setCoords(), l;
     });
   }
@@ -3034,7 +3034,7 @@ const H = "(".concat(_s, ")"), Yu = "(M) (?:".concat(H, " ").concat(H, " ?)+"),
 };
 function gn(i, t, e, s, r, n, o, a) {
   let c;
-  if (A.cachesBoundsOfCurve && (c = [...arguments].join(), Xs.boundsOfCurveCache[c])) return Xs.boundsOfCurveCache[c];
+  if (A.cachesBoundsOfCurve && (c = [...arguments].join(), Hs.boundsOfCurveCache[c])) return Hs.boundsOfCurveCache[c];
   const h = Math.sqrt, l = Math.abs, u = [], d = [[0, 0], [0, 0]];
   let f = 6 * i - 12 * e + 6 * r, g = -3 * i + 9 * e - 9 * r + 3 * o, p = 3 * e - 3 * i;
   for (let k = 0; k < 2; ++k) {
@@ -3059,7 +3059,7 @@ function gn(i, t, e, s, r, n, o, a) {
   }
   d[0][b] = i, d[1][b] = t, d[0][b + 1] = o, d[1][b + 1] = a;
   const w = [new _(Math.min(...d[0]), Math.min(...d[1])), new _(Math.max(...d[0]), Math.max(...d[1]))];
-  return A.cachesBoundsOfCurve && (Xs.boundsOfCurveCache[c] = w), w;
+  return A.cachesBoundsOfCurve && (Hs.boundsOfCurveCache[c] = w), w;
 }
 const ed = (i, t, e) => {
   let [s, r, n, o, a, c, h, l] = e;
@@ -3072,12 +3072,12 @@ const ed = (i, t, e) => {
       const pe = Math.sqrt(1 - Tt / (R * X));
       Jt *= pe, Qt *= pe;
     } else O = (m === b ? -1 : 1) * Math.sqrt(Tt / (R * tt + X * Dt));
-    const Me = O * Jt * nt / Qt, De = -O * Qt * W / Jt, pr = P * Me - M * De + 0.5 * d, Ei = M * Me + P * De + 0.5 * f;
-    let Ps = Wo(1, 0, (W - Me) / Jt, (nt - De) / Qt), ge = Wo((W - Me) / Jt, (nt - De) / Qt, (-W - Me) / Jt, (-nt - De) / Qt);
+    const Me = O * Jt * nt / Qt, De = -O * Qt * W / Jt, vr = P * Me - M * De + 0.5 * d, Ei = M * Me + P * De + 0.5 * f;
+    let Ls = Wo(1, 0, (W - Me) / Jt, (nt - De) / Qt), ge = Wo((W - Me) / Jt, (nt - De) / Qt, (-W - Me) / Jt, (-nt - De) / Qt);
     b === 0 && ge > 0 ? ge -= 2 * x : b === 1 && ge < 0 && (ge += 2 * x);
-    const mr = Math.ceil(Math.abs(ge / x * 2)), Ie = [], As = ge / mr, Fl = 8 / 3 * Math.sin(As / 4) * Math.sin(As / 4) / Math.sin(As / 2);
-    let Pi = Ps + As;
-    for (let pe = 0; pe < mr; pe++) Ie[pe] = td(Ps, Pi, P, M, Jt, Qt, pr, Ei, Fl, w, k), w = Ie[pe][5], k = Ie[pe][6], Ps = Pi, Pi += As;
+    const yr = Math.ceil(Math.abs(ge / x * 2)), Ie = [], Fs = ge / yr, Fl = 8 / 3 * Math.sin(Fs / 4) * Math.sin(Fs / 4) / Math.sin(Fs / 2);
+    let Pi = Ls + Fs;
+    for (let pe = 0; pe < yr; pe++) Ie[pe] = td(Ls, Pi, P, M, Jt, Qt, vr, Ei, Fl, w, k), w = Ie[pe][5], k = Ie[pe][6], Ls = Pi, Pi += Fs;
     return Ie;
   })(h - i, l - t, r, n, a, c, o);
   for (let d = 0, f = u.length; d < f; d++) u[d][1] += i, u[d][2] += t, u[d][3] += i, u[d][4] += t, u[d][5] += i, u[d][6] += t;
@@ -3142,7 +3142,7 @@ const ed = (i, t, e) => {
     u ? (n.push(u), o = u[0]) : o = "";
   }
   return n;
-}, si = (i, t, e, s) => Math.sqrt((e - i) ** 2 + (s - t) ** 2), Yc = (i, t, e, s, r, n, o, a) => (c) => {
+}, ii = (i, t, e, s) => Math.sqrt((e - i) ** 2 + (s - t) ** 2), Yc = (i, t, e, s, r, n, o, a) => (c) => {
   const h = c ** 3, l = ((f) => 3 * f ** 2 * (1 - f))(c), u = ((f) => 3 * f * (1 - f) ** 2)(c), d = ((f) => (1 - f) ** 3)(c);
   return new _(o * h + r * l + e * u + i * d, a * h + n * l + s * u + t * d);
 }, Vc = (i) => i ** 2, Gc = (i) => 2 * i * (1 - i), Nc = (i) => (1 - i) ** 2, sd = (i, t, e, s, r, n, o, a) => (c) => {
@@ -3158,13 +3158,13 @@ const ed = (i, t, e) => {
   let s = new _(t, e), r = 0;
   for (let n = 1; n <= 100; n += 1) {
     const o = i(n / 100);
-    r += si(s.x, s.y, o.x, o.y), s = o;
+    r += ii(s.x, s.y, o.x, o.y), s = o;
   }
   return r;
 }, nd = (i, t) => {
   let e, s = 0, r = 0, n = { x: i.x, y: i.y }, o = v({}, n), a = 0.01, c = 0;
   const h = i.iterator, l = i.angleFinder;
-  for (; r < t && a > 1e-4; ) o = h(s), c = s, e = si(n.x, n.y, o.x, o.y), e + r > t ? (s -= a, a /= 2) : (n = o, s += a, r += e);
+  for (; r < t && a > 1e-4; ) o = h(s), c = s, e = ii(n.x, n.y, o.x, o.y), e + r > t ? (s -= a, a /= 2) : (n = o, s += a, r += e);
   return v(v({}, o), {}, { angle: l(c) });
 }, Zn = (i) => {
   let t, e, s = 0, r = 0, n = 0, o = 0, a = 0;
@@ -3176,7 +3176,7 @@ const ed = (i, t, e) => {
         e = l, e.x = o = r = h[1], e.y = a = n = h[2];
         break;
       case "L":
-        e = l, e.length = si(r, n, h[1], h[2]), r = h[1], n = h[2];
+        e = l, e.length = ii(r, n, h[1], h[2]), r = h[1], n = h[2];
         break;
       case "C":
         t = Yc(r, n, h[1], h[2], h[3], h[4], h[5], h[6]), e = l, e.iterator = t, e.angleFinder = sd(r, n, h[1], h[2], h[3], h[4], h[5], h[6]), e.length = Xo(t, r, n), r = h[5], n = h[6];
@@ -3185,7 +3185,7 @@ const ed = (i, t, e) => {
         t = rd(r, n, h[1], h[2], h[3], h[4]), e = l, e.iterator = t, e.angleFinder = id(r, n, h[1], h[2], h[3], h[4]), e.length = Xo(t, r, n), r = h[3], n = h[4];
         break;
       case "Z":
-        e = l, e.destX = o, e.destY = a, e.length = si(r, n, o, a), r = o, n = a;
+        e = l, e.destX = o, e.destY = a, e.length = ii(r, n, o, a), r = o, n = a;
     }
     s += e.length, c.push(e);
   }
@@ -3262,11 +3262,11 @@ const ud = (i, t) => {
     }
   })(i), e = e.transform(i.transformMatrix)), delete i.transformMatrix, t && (i.scaleX *= t.scaleX, i.scaleY *= t.scaleY, i.cropX = t.cropX, i.cropY = t.cropY, e.x += t.offsetLeft, e.y += t.offsetTop, i.width = t.width, i.height = t.height), i.setPositionByOrigin(e, j, j);
 };
-var dd = Object.freeze({ __proto__: null, addTransformToObject: ec, animate: Hn, animateColor: hc, applyTransformToObject: bs, calcAngleBetweenVectors: Qr, calcDimensionsMatrix: ar, calcPlaneChangeMatrix: lr, calcVectorRotation: uc, cancelAnimFrame: Ha, capValue: Xe, composeMatrix: Ua, copyCanvasElement: (i) => {
+var dd = Object.freeze({ __proto__: null, addTransformToObject: ec, animate: Hn, animateColor: hc, applyTransformToObject: bs, calcAngleBetweenVectors: ei, calcDimensionsMatrix: hr, calcPlaneChangeMatrix: dr, calcVectorRotation: uc, cancelAnimFrame: Ha, capValue: Xe, composeMatrix: Ua, copyCanvasElement: (i) => {
   var t;
   const e = J();
   return e.width = i.width, e.height = i.height, (t = e.getContext("2d")) === null || t === void 0 || t.drawImage(i, 0, 0), e;
-}, cos: Ft, createCanvasElement: J, createImage: Ya, createRotateMatrix: Ds, createScaleMatrix: pi, createSkewXMatrix: Ln, createSkewYMatrix: Fn, createTranslateMatrix: Ms, createVector: Zr, crossProduct: gs, degreesToRadians: q, dotProduct: dc, ease: ql, enlivenObjectEnlivables: cr, enlivenObjects: ys, findScaleToCover: Xc, findScaleToFit: Wc, getBoundsOfCurve: gn, getOrthonormalVector: Vn, getPathSegmentsInfo: Zn, getPointOnPath: Uc, getPointer: tc, getRandomInt: hd, getRegularPolygonPath: (i, t) => {
+}, cos: Ft, createCanvasElement: J, createImage: Ya, createRotateMatrix: js, createScaleMatrix: pi, createSkewXMatrix: Ln, createSkewYMatrix: Fn, createTranslateMatrix: Is, createVector: Qr, crossProduct: gs, degreesToRadians: q, dotProduct: dc, ease: ql, enlivenObjectEnlivables: lr, enlivenObjects: ys, findScaleToCover: Xc, findScaleToFit: Wc, getBoundsOfCurve: gn, getOrthonormalVector: Vn, getPathSegmentsInfo: Zn, getPointOnPath: Uc, getPointer: tc, getRandomInt: hd, getRegularPolygonPath: (i, t) => {
   const e = 2 * Math.PI / i;
   let s = -Se;
   i % 2 == 0 && (s += e / 2);
@@ -3287,7 +3287,7 @@ var dd = Object.freeze({ __proto__: null, addTransformToObject: ec, animate: Hn,
       return t.concat(["offset", "stop-color", "stop-opacity"]);
   }
   return t;
-}, getUnitVector: yi, groupSVGElements: (i, t) => i && i.length === 1 ? i[0] : new Yt(i, t), hasStyleChanged: Ti, invertTransform: _t, isBetweenVectors: an, isIdentityMatrix: Va, isTouchEvent: qr, isTransparent: Dc, joinPath: qc, loadImage: Hs, magnitude: Jr, makeBoundingBoxFromPoints: Ht, makePathSimpler: Hc, matrixToSVG: qs, mergeClipPaths: (i, t) => {
+}, getUnitVector: yi, groupSVGElements: (i, t) => i && i.length === 1 ? i[0] : new Yt(i, t), hasStyleChanged: Ti, invertTransform: _t, isBetweenVectors: an, isIdentityMatrix: Va, isTouchEvent: Zr, isTransparent: Dc, joinPath: qc, loadImage: Vs, magnitude: ti, makeBoundingBoxFromPoints: Ht, makePathSimpler: Hc, matrixToSVG: Zs, mergeClipPaths: (i, t) => {
   var e;
   let s = i, r = t;
   s.inverted && !r.inverted && (s = t, r = i), nn(r, (e = r.group) === null || e === void 0 ? void 0 : e.calcTransformMatrix(), s.calcTransformMatrix());
@@ -3296,7 +3296,7 @@ var dd = Object.freeze({ __proto__: null, addTransformToObject: ec, animate: Hn,
 }, multiplyTransformMatrices: K, multiplyTransformMatrixArray: gi, parsePath: $c, parsePreserveAspectRatioAttribute: $a, parseUnit: We, pick: Ye, projectStrokeOnPoints: jc, qrDecompose: vs, radiansToDegrees: xe, removeFromArray: Ee, removeTransformFromObject: (i, t) => {
   const e = _t(t), s = K(e, i.calcOwnMatrix());
   bs(i, s);
-}, removeTransformMatrixForSvgParsing: ud, request: ld, requestAnimFrame: zs, resetObjectTransform: sc, rotatePoint: (i, t, e) => i.rotate(e, t), rotateVector: Yn, saveObjectTransform: Bn, sendObjectToPlane: nn, sendPointToPlane: ne, sendVectorToPlane: rc, setStyle: Ys, sin: Rt, sizeAfterTransform: mi, string: yu, stylesFromArray: Ac, stylesToArray: Pc, toDataURL: An, toFixed: E, transformPath: (i, t, e) => (e && (t = K(t, [1, 0, 0, 1, -e.x, -e.y])), i.map((s) => {
+}, removeTransformMatrixForSvgParsing: ud, request: ld, requestAnimFrame: Ys, resetObjectTransform: sc, rotatePoint: (i, t, e) => i.rotate(e, t), rotateVector: Yn, saveObjectTransform: Bn, sendObjectToPlane: nn, sendPointToPlane: ne, sendVectorToPlane: rc, setStyle: Gs, sin: Rt, sizeAfterTransform: mi, string: yu, stylesFromArray: Ac, stylesToArray: Pc, toDataURL: An, toFixed: E, transformPath: (i, t, e) => (e && (t = K(t, [1, 0, 0, 1, -e.x, -e.y])), i.map((s) => {
   const r = [...s];
   for (let n = 1; n < s.length - 1; n += 2) {
     const { x: o, y: a } = at({ x: s[n], y: s[n + 1] }, t);
@@ -3318,14 +3318,14 @@ class fd extends Qa {
     return e.className = t.className, e.classList.remove("lower-canvas"), e.classList.add("upper-canvas"), e.setAttribute("data-fabric", "top"), e.style.cssText = t.style.cssText, e.setAttribute("draggable", "true"), e;
   }
   createContainerElement() {
-    const t = Cs().createElement("div");
-    return t.setAttribute("data-fabric", "wrapper"), Ys(t, { position: "relative" }), _o(t), t;
+    const t = ks().createElement("div");
+    return t.setAttribute("data-fabric", "wrapper"), Gs(t, { position: "relative" }), _o(t), t;
   }
   applyCanvasStyle(t, e) {
     let { allowTouchScrolling: s } = e;
-    Ys(t, { position: "absolute", left: "0", top: "0" }), function(r, n) {
+    Gs(t, { position: "absolute", left: "0", top: "0" }), function(r, n) {
       const o = n ? "manipulation" : pt;
-      Ys(r, { "touch-action": o, "-ms-touch-action": o });
+      Gs(r, { "touch-action": o, "-ms-touch-action": o });
     }(t, s), _o(t);
   }
   setDimensions(t, e) {
@@ -3344,7 +3344,7 @@ class fd extends Qa {
     super.dispose(), Gt().dispose(this.upper.el), delete this.upper, delete this.container;
   }
 }
-class wi extends hr {
+class wi extends ur {
   constructor() {
     super(...arguments), y(this, "targets", []), y(this, "_hoveredTargets", []), y(this, "_objectsToRender", void 0), y(this, "_currentTransform", null), y(this, "_groupSelector", null), y(this, "contextTopDirty", !1);
   }
@@ -3412,7 +3412,7 @@ class wi extends hr {
   _shouldCenterTransform(t, e, s) {
     if (!t) return;
     let r;
-    return e === fi || e === dt || e === St || e === $s ? r = this.centeredScaling || t.centeredScaling : e === En && (r = this.centeredRotation || t.centeredRotation), r ? !s : s;
+    return e === fi || e === dt || e === St || e === Ks ? r = this.centeredScaling || t.centeredScaling : e === En && (r = this.centeredRotation || t.centeredRotation), r ? !s : s;
   }
   _getOriginFromCorner(t, e) {
     const s = { x: t.originX, y: t.originY };
@@ -3439,7 +3439,7 @@ class wi extends hr {
     if (this.skipTargetFind) return;
     const e = this.getViewportPoint(t), s = this._activeObject, r = this.getActiveObjects();
     if (this.targets = [], s && r.length >= 1) {
-      if (s.findControl(e, qr(t)) || r.length > 1 && this.searchPossibleTargets([s], e)) return s;
+      if (s.findControl(e, Zr(t)) || r.length > 1 && this.searchPossibleTargets([s], e)) return s;
       if (s === this.searchPossibleTargets([s], e)) {
         if (this.preserveObjectStacking) {
           const n = this.targets;
@@ -3469,7 +3469,7 @@ class wi extends hr {
     for (; s--; ) {
       const r = t[s];
       if (this._checkTarget(r, e)) {
-        if (Vr(r) && r.subTargetCheck) {
+        if (Nr(r) && r.subTargetCheck) {
           const n = this._searchPossibleTargets(r._objects, e);
           n && this.targets.push(n);
         }
@@ -3479,11 +3479,11 @@ class wi extends hr {
   }
   searchPossibleTargets(t, e) {
     const s = this._searchPossibleTargets(t, e);
-    if (s && Vr(s) && s.interactive && this.targets[0]) {
+    if (s && Nr(s) && s.interactive && this.targets[0]) {
       const r = this.targets;
       for (let n = r.length - 1; n > 0; n--) {
         const o = r[n];
-        if (!Vr(o) || !o.interactive) return o;
+        if (!Nr(o) || !o.interactive) return o;
       }
       return r[0];
     }
@@ -3560,7 +3560,7 @@ class wi extends hr {
   }
   _finalizeCurrentTransform(t) {
     const e = this._currentTransform, s = e.target, r = { e: t, target: s, transform: e, action: e.action };
-    s._scaling && (s._scaling = !1), s.setCoords(), e.actionPerformed && (this.fire("object:modified", r), s.fire(Ur, r));
+    s._scaling && (s._scaling = !1), s.setCoords(), e.actionPerformed && (this.fire("object:modified", r), s.fire(qr, r));
   }
   setViewportTransform(t) {
     super.setViewportTransform(t);
@@ -3585,7 +3585,7 @@ class wi extends hr {
   _realizeGroupTransformOnObject(t) {
     const { group: e } = t;
     if (e && Pe(e) && this._activeObject === e) {
-      const s = Ye(t, ["angle", "flipX", "flipY", F, dt, St, Os, ks, gt]);
+      const s = Ye(t, ["angle", "flipX", "flipY", F, dt, St, Ms, Ds, gt]);
       return ec(t, e.calcOwnMatrix()), s;
     }
     return {};
@@ -3789,7 +3789,7 @@ class pn extends wi {
       this.handleSelection(t), h || (h = this._shouldRender(n) || !l && n === this._activeObject);
     }
     if (n) {
-      const l = n.findControl(this.getViewportPoint(t), qr(t)), { key: u, control: d } = l || {};
+      const l = n.findControl(this.getViewportPoint(t), Zr(t)), { key: u, control: d } = l || {};
       if (c = u, n.selectable && n !== this._activeObject && n.activeOn === "up") this.setActiveObject(n, t), h = !0;
       else if (d) {
         const f = d.getMouseUpHandler(t, n, d);
@@ -3845,7 +3845,7 @@ class pn extends wi {
     if (e) {
       const o = e === this._activeObject;
       e.selectable && e.activeOn === "down" && this.setActiveObject(e, t);
-      const a = e.findControl(this.getViewportPoint(t), qr(t));
+      const a = e.findControl(this.getViewportPoint(t), Zr(t));
       if (e === this._activeObject && (a || !n)) {
         this._setupCurrentTransform(t, e, o);
         const c = a ? a.control : void 0, h = this.getScenePoint(t), l = c && c.getMouseDownHandler(t, e, c);
@@ -4006,7 +4006,7 @@ function xd(i, t) {
     return { x1: It(e, "fx") || It(e, "cx") || "50%", y1: It(e, "fy") || It(e, "cy") || "50%", r1: 0, x2: It(e, "cx") || "50%", y2: It(e, "cy") || "50%", r2: It(e, "r") || "50%" };
   }(i), v(v({}, t), {}, { gradientUnits: th(i) }));
 }
-class yr {
+class _r {
   constructor(t) {
     const { type: e = "linear", gradientUnits: s = "pixels", coords: r = {}, colorStops: n = [], offsetX: o = 0, offsetY: a = 0, gradientTransform: c, id: h } = t || {};
     Object.assign(this, { type: e, gradientUnits: s, coords: v(v({}, e === "radial" ? vd : Kc), r), colorStops: n, offsetX: o, offsetY: a, gradientTransform: c, id: h ? "".concat(h, "_").concat(Te()) : Te() });
@@ -4027,7 +4027,7 @@ class yr {
     let a = -this.offsetX, c = -this.offsetY;
     var h;
     n === "objectBoundingBox" ? (a /= t.width, c /= t.height) : (a += t.width / 2, c += t.height / 2), (h = t) && typeof h._renderPathCommands == "function" && this.gradientUnits !== "percentage" && (a -= t.pathOffset.x, c -= t.pathOffset.y), r[4] -= a, r[5] -= c;
-    const l = ['id="SVGID_'.concat(this.id, '"'), 'gradientUnits="'.concat(n, '"'), 'gradientTransform="'.concat(e ? e + " " : "").concat(qs(r), '"'), ""].join(" ");
+    const l = ['id="SVGID_'.concat(this.id, '"'), 'gradientUnits="'.concat(n, '"'), 'gradientTransform="'.concat(e ? e + " " : "").concat(Zs(r), '"'), ""].join(" ");
     if (this.type === "linear") {
       const { x1: u, y1: d, x2: f, y2: g } = this.coords;
       s.push("<linearGradient ", l, ' x1="', u, '" y1="', d, '" x2="', f, '" y2="', g, `">
@@ -4069,7 +4069,7 @@ class yr {
     return new this(v({ id: t.getAttribute("id") || void 0, type: Qc(t), coords: xd(t, { width: s.viewBoxWidth || s.width, height: s.viewBoxHeight || s.height }), colorStops: Td(t, s.opacity), gradientUnits: r, gradientTransform: dn(t.getAttribute("gradientTransform") || "") }, r === "pixels" ? { offsetX: e.width / 2 - n.x, offsetY: e.height / 2 - n.y } : { offsetX: 0, offsetY: 0 }));
   }
 }
-y(yr, "type", "Gradient"), C.setClass(yr, "gradient"), C.setClass(yr, "linear"), C.setClass(yr, "radial");
+y(_r, "type", "Gradient"), C.setClass(_r, "gradient"), C.setClass(_r, "linear"), C.setClass(_r, "radial");
 const wd = ["type", "source", "patternTransform"];
 class zi {
   get type() {
@@ -4106,7 +4106,7 @@ class zi {
   }
   static async fromObject(t, e) {
     let { type: s, source: r, patternTransform: n } = t, o = N(t, wd);
-    const a = await Hs(r, v(v({}, e), {}, { crossOrigin: o.crossOrigin }));
+    const a = await Vs(r, v(v({}, e), {}, { crossOrigin: o.crossOrigin }));
     return new this(v(v({}, o), {}, { patternTransform: n && n.slice(0), source: a }));
   }
 }
@@ -4406,7 +4406,7 @@ class jt extends ot {
     t = v({ scaleX: this.scaleX, scaleY: this.scaleY, skewX: this.skewX, skewY: this.skewY, strokeLineCap: this.strokeLineCap, strokeLineJoin: this.strokeLineJoin, strokeMiterLimit: this.strokeMiterLimit, strokeUniform: this.strokeUniform, strokeWidth: this.strokeWidth }, t || {});
     const e = this.exactBoundingBox ? this._projectStrokeOnPoints(t).map((h) => h.projectedPoint) : this.points;
     if (e.length === 0) return { left: 0, top: 0, width: 0, height: 0, pathOffset: new _(), strokeOffset: new _(), strokeDiff: new _() };
-    const s = Ht(e), r = ar(v(v({}, t), {}, { scaleX: 1, scaleY: 1 })), n = Ht(this.points.map((h) => at(h, r, !0))), o = new _(this.scaleX, this.scaleY);
+    const s = Ht(e), r = hr(v(v({}, t), {}, { scaleX: 1, scaleY: 1 })), n = Ht(this.points.map((h) => at(h, r, !0))), o = new _(this.scaleX, this.scaleY);
     let a = s.left + s.width / 2, c = s.top + s.height / 2;
     return this.exactBoundingBox && (a -= c * Math.tan(q(this.skewX)), c -= a * Math.tan(q(this.skewY))), v(v({}, s), {}, { pathOffset: new _(a, c), strokeOffset: new _(n.left, n.top).subtract(new _(s.left, s.top)).multiply(o), strokeDiff: new _(s.width, s.height).subtract(new _(n.width, n.height)).multiply(o) });
   }
@@ -4481,14 +4481,14 @@ class jt extends ot {
     return this._fromObject(t, { extraParam: "points" });
   }
 }
-y(jt, "ownDefaults", rh), y(jt, "type", "Polyline"), y(jt, "layoutProperties", [Os, ks, "strokeLineCap", "strokeLineJoin", "strokeMiterLimit", "strokeWidth", "strokeUniform", "points"]), y(jt, "cacheProperties", [...le, "points"]), y(jt, "ATTRIBUTE_NAMES", [...ke]), C.setClass(jt), C.setSVGClass(jt);
-class br extends jt {
+y(jt, "ownDefaults", rh), y(jt, "type", "Polyline"), y(jt, "layoutProperties", [Ms, Ds, "strokeLineCap", "strokeLineJoin", "strokeMiterLimit", "strokeWidth", "strokeUniform", "points"]), y(jt, "cacheProperties", [...le, "points"]), y(jt, "ATTRIBUTE_NAMES", [...ke]), C.setClass(jt), C.setSVGClass(jt);
+class Sr extends jt {
   isOpen() {
     return !1;
   }
 }
-y(br, "ownDefaults", rh), y(br, "type", "Polygon"), C.setClass(br), C.setSVGClass(br);
-const ih = ["fontSize", "fontWeight", "fontFamily", "fontStyle"], nh = ["underline", "overline", "linethrough"], oh = [...ih, "lineHeight", "text", "charSpacing", "textAlign", "styles", "path", "pathStartOffset", "pathSide", "pathAlign"], ah = [...oh, ...nh, "textBackgroundColor", "direction"], Ed = [...ih, ...nh, mt, "strokeWidth", rt, "deltaY", "textBackgroundColor"], Pd = { _reNewline: jn, _reSpacesAndTabs: /[ \t\r]/g, _reSpaceAndTab: /[ \t\r]/, _reWords: /\S+/g, fontSize: 40, fontWeight: "normal", fontFamily: "Times New Roman", underline: !1, overline: !1, linethrough: !1, textAlign: F, fontStyle: "normal", lineHeight: 1.16, superscript: { size: 0.6, baseline: -0.35 }, subscript: { size: 0.6, baseline: 0.11 }, textBackgroundColor: "", stroke: null, shadow: null, path: void 0, pathStartOffset: 0, pathSide: F, pathAlign: "baseline", _fontSizeFraction: 0.222, offsets: { underline: 0.1, linethrough: -0.315, overline: -0.88 }, _fontSizeMult: 1.13, charSpacing: 0, deltaY: 0, direction: "ltr", CACHE_FONT_SIZE: 400, MIN_TEXT_WIDTH: 2 }, Wt = "justify", ri = "justify-left", Vs = "justify-right", Gs = "justify-center";
+y(Sr, "ownDefaults", rh), y(Sr, "type", "Polygon"), C.setClass(Sr), C.setSVGClass(Sr);
+const ih = ["fontSize", "fontWeight", "fontFamily", "fontStyle"], nh = ["underline", "overline", "linethrough"], oh = [...ih, "lineHeight", "text", "charSpacing", "textAlign", "styles", "path", "pathStartOffset", "pathSide", "pathAlign"], ah = [...oh, ...nh, "textBackgroundColor", "direction"], Ed = [...ih, ...nh, mt, "strokeWidth", rt, "deltaY", "textBackgroundColor"], Pd = { _reNewline: jn, _reSpacesAndTabs: /[ \t\r]/g, _reSpaceAndTab: /[ \t\r]/, _reWords: /\S+/g, fontSize: 40, fontWeight: "normal", fontFamily: "Times New Roman", underline: !1, overline: !1, linethrough: !1, textAlign: F, fontStyle: "normal", lineHeight: 1.16, superscript: { size: 0.6, baseline: -0.35 }, subscript: { size: 0.6, baseline: 0.11 }, textBackgroundColor: "", stroke: null, shadow: null, path: void 0, pathStartOffset: 0, pathSide: F, pathAlign: "baseline", _fontSizeFraction: 0.222, offsets: { underline: 0.1, linethrough: -0.315, overline: -0.88 }, _fontSizeMult: 1.13, charSpacing: 0, deltaY: 0, direction: "ltr", CACHE_FONT_SIZE: 400, MIN_TEXT_WIDTH: 2 }, Wt = "justify", ni = "justify-left", Ns = "justify-right", Us = "justify-center";
 class ch extends ot {
   isEmptyStyles(t) {
     if (!this.styles || t !== void 0 && !this.styles[t]) return !0;
@@ -4574,7 +4574,7 @@ const Ad = /  +/g, Ld = /"/g;
 function Hi(i, t, e, s, r) {
   return "		".concat(function(n, o) {
     let { left: a, top: c, width: h, height: l } = o, u = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : A.NUM_FRACTION_DIGITS;
-    const d = Ks(rt, n, !1), [f, g, p, m] = [a, c, h, l].map((b) => E(b, u));
+    const d = Js(rt, n, !1), [f, g, p, m] = [a, c, h, l].map((b) => E(b, u));
     return "<rect ".concat(d, ' x="').concat(f, '" y="').concat(g, '" width="').concat(p, '" height="').concat(m, '"></rect>');
   }(i, { left: t, top: e, width: s, height: r }), `
 `);
@@ -4680,7 +4680,7 @@ class ht extends ch {
     t.fillStyle = e, this._removeShadow(t);
   }
   _measureChar(t, e, s, r) {
-    const n = Xs.getFontCache(e), o = this._getFontDeclaration(e), a = s + t, c = s && o === this._getFontDeclaration(r), h = e.fontSize / this.CACHE_FONT_SIZE;
+    const n = Hs.getFontCache(e), o = this._getFontDeclaration(e), a = s + t, c = s && o === this._getFontDeclaration(r), h = e.fontSize / this.CACHE_FONT_SIZE;
     let l, u, d, f;
     if (s && n[s] !== void 0 && (d = n[s]), n[t] !== void 0 && (f = l = n[t]), c && n[a] !== void 0 && (u = n[a], f = u - d), l === void 0 || d === void 0 || u === void 0) {
       const g = function() {
@@ -4825,7 +4825,7 @@ class ht extends ch {
   _getLineLeftOffset(t) {
     const e = this.getLineWidth(t), s = this.width - e, r = this.textAlign, n = this.direction, o = this.isEndOfWrapping(t);
     let a = 0;
-    return r === Wt || r === Gs && !o || r === Vs && !o || r === ri && !o ? 0 : (r === j && (a = s / 2), r === Z && (a = s), r === Gs && (a = s / 2), r === Vs && (a = s), n === "rtl" && (r === Z || r === Wt || r === Vs ? a = 0 : r === F || r === ri ? a = -s : r !== j && r !== Gs || (a = -s / 2)), a);
+    return r === Wt || r === Us && !o || r === Ns && !o || r === ni && !o ? 0 : (r === j && (a = s / 2), r === Z && (a = s), r === Us && (a = s / 2), r === Ns && (a = s), n === "rtl" && (r === Z || r === Wt || r === Ns ? a = 0 : r === F || r === ni ? a = -s : r !== j && r !== Us || (a = -s / 2)), a);
   }
   _clearCache() {
     this._forceClearCache = !1, this.__lineWidths = [], this.__lineHeights = [], this.__charBounds = [];
@@ -4967,7 +4967,7 @@ y(ht, "textLayoutProperties", oh), y(ht, "cacheProperties", [...le, ...ah]), y(h
   }
   getSvgSpanStyles(i, t) {
     const { fontFamily: e, strokeWidth: s, stroke: r, fill: n, fontSize: o, fontStyle: a, fontWeight: c, deltaY: h } = i, l = this.getSvgTextDecoration(i);
-    return [r ? Ks(mt, r) : "", s ? "stroke-width: ".concat(s, "; ") : "", e ? "font-family: ".concat(e.includes("'") || e.includes('"') ? e : "'".concat(e, "'"), "; ") : "", o ? "font-size: ".concat(o, "px; ") : "", a ? "font-style: ".concat(a, "; ") : "", c ? "font-weight: ".concat(c, "; ") : "", l && "text-decoration: ".concat(l, "; "), n ? Ks(rt, n) : "", h ? "baseline-shift: ".concat(-h, "; ") : "", t ? "white-space: pre; " : ""].join("");
+    return [r ? Js(mt, r) : "", s ? "stroke-width: ".concat(s, "; ") : "", e ? "font-family: ".concat(e.includes("'") || e.includes('"') ? e : "'".concat(e, "'"), "; ") : "", o ? "font-size: ".concat(o, "px; ") : "", a ? "font-style: ".concat(a, "; ") : "", c ? "font-weight: ".concat(c, "; ") : "", l && "text-decoration: ".concat(l, "; "), n ? Js(rt, n) : "", h ? "baseline-shift: ".concat(-h, "; ") : "", t ? "white-space: pre; " : ""].join("");
   }
   getSvgTextDecoration(i) {
     return ["overline", "underline", "line-through"].filter((t) => i[t.replace("-", "")]).join(" ");
@@ -5006,7 +5006,7 @@ class Rd {
     const w = { stroke: "transparent", fill: "transparent", textBackgroundColor: "transparent" };
     o.setSelectionStyles(w, 0, r), o.setSelectionStyles(w, n, o.text.length), o.dirty = !0;
     const k = o.toCanvasElement({ enableRetinaScaling: a.enableRetinaScaling, viewportTransform: !0 });
-    o.backgroundColor = b, o.styles = S, o.dirty = !0, Ys(k, { position: "fixed", left: "".concat(-k.width, "px"), border: pt, width: "".concat(k.width / d, "px"), height: "".concat(k.height / d, "px") }), this.__dragImageDisposer && this.__dragImageDisposer(), this.__dragImageDisposer = () => {
+    o.backgroundColor = b, o.styles = S, o.dirty = !0, Gs(k, { position: "fixed", left: "".concat(-k.width, "px"), border: pt, width: "".concat(k.width / d, "px"), height: "".concat(k.height / d, "px") }), this.__dragImageDisposer && this.__dragImageDisposer(), this.__dragImageDisposer = () => {
       k.remove();
     }, Pt(t.target || this.target.hiddenTextarea).body.appendChild(k), (s = t.dataTransfer) === null || s === void 0 || s.setDragImage(k, m.x, m.y);
   }
@@ -5057,7 +5057,7 @@ class Rd {
         const d = this.__dragStartSelection.selectionStart, f = this.__dragStartSelection.selectionEnd;
         c > d && c <= f ? c = d : c > f && (c -= f - d), o.removeChars(d, f), delete this.__dragStartSelection;
       }
-      o._reNewline.test(l) && (o._reNewline.test(o._text[c]) || c === o._text.length) && (n = n.trimEnd()), t.didDrop = !0, t.dropTarget = o, o.insertChars(n, h, c), a.setActiveObject(o), o.enterEditing(s), o.selectionStart = Math.min(c + u, o._text.length), o.selectionEnd = Math.min(o.selectionStart + n.length, o._text.length), o.hiddenTextarea.value = o.text, o._updateTextarea(), o.hiddenTextarea.focus(), o.fire(Nr, { index: c + u, action: "drop" }), a.fire("text:changed", { target: o }), a.contextTopDirty = !0, a.requestRenderAll();
+      o._reNewline.test(l) && (o._reNewline.test(o._text[c]) || c === o._text.length) && (n = n.trimEnd()), t.didDrop = !0, t.dropTarget = o, o.insertChars(n, h, c), a.setActiveObject(o), o.enterEditing(s), o.selectionStart = Math.min(c + u, o._text.length), o.selectionEnd = Math.min(o.selectionStart + n.length, o._text.length), o.hiddenTextarea.value = o.text, o._updateTextarea(), o.hiddenTextarea.focus(), o.fire($r, { index: c + u, action: "drop" }), a.fire("text:changed", { target: o }), a.contextTopDirty = !0, a.requestRenderAll();
     }
   }
   dragEndHandler(t) {
@@ -5065,7 +5065,7 @@ class Rd {
     if (this.isActive() && this.__dragStartFired && this.__dragStartSelection) {
       var s;
       const r = this.target, n = this.target.canvas, { selectionStart: o, selectionEnd: a } = this.__dragStartSelection, c = ((s = e.dataTransfer) === null || s === void 0 ? void 0 : s.dropEffect) || pt;
-      c === pt ? (r.selectionStart = o, r.selectionEnd = a, r._updateTextarea(), r.hiddenTextarea.focus()) : (r.clearContextTop(), c === "move" && (r.removeChars(o, a), r.selectionStart = r.selectionEnd = o, r.hiddenTextarea && (r.hiddenTextarea.value = r.text), r._updateTextarea(), r.fire(Nr, { index: o, action: "dragend" }), n.fire("text:changed", { target: r }), n.requestRenderAll()), r.exitEditing());
+      c === pt ? (r.selectionStart = o, r.selectionEnd = a, r._updateTextarea(), r.hiddenTextarea.focus()) : (r.clearContextTop(), c === "move" && (r.removeChars(o, a), r.selectionStart = r.selectionEnd = o, r.hiddenTextarea && (r.hiddenTextarea.value = r.text), r._updateTextarea(), r.fire($r, { index: o, action: "dragend" }), n.fire("text:changed", { target: r }), n.requestRenderAll()), r.exitEditing());
     }
     this.__dragImageDisposer && this.__dragImageDisposer(), delete this.__dragImageDisposer, delete this.__dragStartSelection, this.__isDraggingOver = !1;
   }
@@ -5216,7 +5216,7 @@ class Bd extends ht {
   }
   exitEditing() {
     const t = this._textBeforeEdit !== this.text;
-    return this._exitEditing(), this.selectionEnd = this.selectionStart, this._restoreEditingProps(), this._forceClearCache && (this.initDimensions(), this.setCoords()), this.fire("editing:exited"), t && this.fire(Ur), this.canvas && (this.canvas.fire("text:editing:exited", { target: this }), t && this.canvas.fire("object:modified", { target: this })), this;
+    return this._exitEditing(), this.selectionEnd = this.selectionStart, this._restoreEditingProps(), this._forceClearCache && (this.initDimensions(), this.setCoords()), this.fire("editing:exited"), t && this.fire(qr), this.canvas && (this.canvas.fire("text:editing:exited", { target: this }), t && this.canvas.fire("object:modified", { target: this })), this;
   }
   _removeExtraneousStyles() {
     for (const t in this.styles) this._textLines[t] || delete this.styles[t];
@@ -5300,7 +5300,7 @@ class Bd extends ht {
 }
 class Wd extends Bd {
   initHiddenTextarea() {
-    const t = this.canvas && Pt(this.canvas.getElement()) || Cs(), e = t.createElement("textarea");
+    const t = this.canvas && Pt(this.canvas.getElement()) || ks(), e = t.createElement("textarea");
     Object.entries({ autocapitalize: "off", autocorrect: "off", autocomplete: "off", spellcheck: "false", "data-fabric": "textarea", wrap: "off" }).map((o) => {
       let [a, c] = o;
       return e.setAttribute(a, c);
@@ -5331,7 +5331,7 @@ class Wd extends Bd {
     const e = this.fromPaste;
     if (this.fromPaste = !1, t && t.stopPropagation(), !this.isEditing) return;
     const s = () => {
-      this.updateFromTextArea(), this.fire(Nr), this.canvas && (this.canvas.fire("text:changed", { target: this }), this.canvas.requestRenderAll());
+      this.updateFromTextArea(), this.fire($r), this.canvas && (this.canvas.fire("text:changed", { target: this }), this.canvas.requestRenderAll());
     };
     if (this.hiddenTextarea.value === "") return this.styles = {}, void s();
     const r = this._splitTextIntoLines(this.hiddenTextarea.value).graphemeText, n = this._text.length, o = r.length, a = this.selectionStart, c = this.selectionEnd, h = a !== c;
@@ -5525,7 +5525,7 @@ class Xd extends Wd {
     return Math.min(this.flipX ? a - r : r, this._text.length);
   }
 }
-const _r = "moveCursorUp", Sr = "moveCursorDown", Tr = "moveCursorLeft", xr = "moveCursorRight", wr = "exitEditing", zd = v({ selectionStart: 0, selectionEnd: 0, selectionColor: "rgba(17,119,255,0.3)", isEditing: !1, editable: !0, editingBorderColor: "rgba(102,153,255,0.25)", cursorWidth: 2, cursorColor: "", cursorDelay: 1e3, cursorDuration: 600, caching: !0, hiddenTextareaContainer: null, keysMap: { 9: wr, 27: wr, 33: _r, 34: Sr, 35: xr, 36: Tr, 37: Tr, 38: _r, 39: xr, 40: Sr }, keysMapRtl: { 9: wr, 27: wr, 33: _r, 34: Sr, 35: Tr, 36: xr, 37: xr, 38: _r, 39: Tr, 40: Sr }, ctrlKeysMapDown: { 65: "selectAll" }, ctrlKeysMapUp: { 67: "copy", 88: "cut" } }, { _selectionDirection: null, _reSpace: /\s|\r?\n/, inCompositionMode: !1 });
+const Tr = "moveCursorUp", xr = "moveCursorDown", wr = "moveCursorLeft", Cr = "moveCursorRight", Or = "exitEditing", zd = v({ selectionStart: 0, selectionEnd: 0, selectionColor: "rgba(17,119,255,0.3)", isEditing: !1, editable: !0, editingBorderColor: "rgba(102,153,255,0.25)", cursorWidth: 2, cursorColor: "", cursorDelay: 1e3, cursorDuration: 600, caching: !0, hiddenTextareaContainer: null, keysMap: { 9: Or, 27: Or, 33: Tr, 34: xr, 35: Cr, 36: wr, 37: wr, 38: Tr, 39: Cr, 40: xr }, keysMapRtl: { 9: Or, 27: Or, 33: Tr, 34: xr, 35: wr, 36: Cr, 37: Cr, 38: Tr, 39: wr, 40: xr }, ctrlKeysMapDown: { 65: "selectAll" }, ctrlKeysMapUp: { 67: "copy", 88: "cut" } }, { _selectionDirection: null, _reSpace: /\s|\r?\n/, inCompositionMode: !1 });
 class ie extends Xd {
   static getDefaults() {
     return v(v({}, super.getDefaults()), ie.ownDefaults);
@@ -5598,7 +5598,7 @@ class ie extends Xd {
     const o = this._getLineLeftOffset(n), a = this.__charBounds[n][r];
     a && (s = a.left), this.charSpacing !== 0 && r === this._textLines[n].length && (s -= this._getWidthOfCharSpacing());
     const c = { top: e, left: o + (s > 0 ? s : 0) };
-    return this.direction === "rtl" && (this.textAlign === Z || this.textAlign === Wt || this.textAlign === Vs ? c.left *= -1 : this.textAlign === F || this.textAlign === ri ? c.left = o - (s > 0 ? s : 0) : this.textAlign !== j && this.textAlign !== Gs || (c.left = o - (s > 0 ? s : 0))), c;
+    return this.direction === "rtl" && (this.textAlign === Z || this.textAlign === Wt || this.textAlign === Ns ? c.left *= -1 : this.textAlign === F || this.textAlign === ni ? c.left = o - (s > 0 ? s : 0) : this.textAlign !== j && this.textAlign !== Us || (c.left = o - (s > 0 ? s : 0))), c;
   }
   renderCursorAt(t) {
     const e = this._getCursorBoundaries(t, !0);
@@ -5637,7 +5637,7 @@ class ie extends Xd {
       m = p, (this.lineHeight < 1 || f === l && this.lineHeight > 1) && (p /= this.lineHeight);
       let w = s.left + g + b, k = p, O = 0;
       const x = S - b;
-      this.inCompositionMode ? (t.fillStyle = this.compositionColor || "black", k = 1, O = p) : t.fillStyle = this.selectionColor, this.direction === "rtl" && (this.textAlign === Z || this.textAlign === Wt || this.textAlign === Vs ? w = this.width - w - x : this.textAlign === F || this.textAlign === ri ? w = s.left + g - S : this.textAlign !== j && this.textAlign !== Gs || (w = s.left + g - S)), t.fillRect(w, s.top + s.topOffset + O, x, k), s.topOffset += m;
+      this.inCompositionMode ? (t.fillStyle = this.compositionColor || "black", k = 1, O = p) : t.fillStyle = this.selectionColor, this.direction === "rtl" && (this.textAlign === Z || this.textAlign === Wt || this.textAlign === Ns ? w = this.width - w - x : this.textAlign === F || this.textAlign === ni ? w = s.left + g - S : this.textAlign !== j && this.textAlign !== Us || (w = s.left + g - S)), t.fillRect(w, s.top + s.topOffset + O, x, k), s.topOffset += m;
     }
   }
   getCurrentCharFontSize() {
@@ -5822,7 +5822,7 @@ class Yo extends xi {
   }
 }
 y(Yo, "type", "fixed"), C.setClass(Yo);
-class Hd extends Js {
+class Hd extends tr {
   subscribeTargets(t) {
     const e = t.target;
     t.targets.reduce((s, r) => (r.parent && s.add(r.parent), s), /* @__PURE__ */ new Set()).forEach((s) => {
@@ -5874,7 +5874,7 @@ class Ot extends Yt {
       const { parent: n } = r;
       n && s.add(n);
     }), t === Kn ? s.forEach((r) => {
-      r._onAfterObjectsChange(ti, e);
+      r._onAfterObjectsChange(si, e);
     }) : s.forEach((r) => {
       r._set("dirty", !0);
     });
@@ -6004,7 +6004,7 @@ class wt extends ot {
     return v(v({}, super.getDefaults()), wt.ownDefaults);
   }
   constructor(t, e) {
-    super(), y(this, "_lastScaleX", 1), y(this, "_lastScaleY", 1), y(this, "_filterScalingX", 1), y(this, "_filterScalingY", 1), this.filters = [], Object.assign(this, wt.ownDefaults), this.setOptions(e), this.cacheKey = "texture".concat(Te()), this.setElement(typeof t == "string" ? (this.canvas && Pt(this.canvas.getElement()) || Cs()).getElementById(t) : t, e);
+    super(), y(this, "_lastScaleX", 1), y(this, "_lastScaleY", 1), y(this, "_filterScalingX", 1), y(this, "_filterScalingY", 1), this.filters = [], Object.assign(this, wt.ownDefaults), this.setOptions(e), this.cacheKey = "texture".concat(Te()), this.setElement(typeof t == "string" ? (this.canvas && Pt(this.canvas.getElement()) || ks()).getElementById(t) : t, e);
   }
   getElement() {
     return this._element;
@@ -6073,7 +6073,7 @@ class wt extends ot {
   }
   setSrc(t) {
     let { crossOrigin: e, signal: s } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-    return Hs(t, { crossOrigin: e, signal: s }).then((r) => {
+    return Vs(t, { crossOrigin: e, signal: s }).then((r) => {
       e !== void 0 && this.set({ crossOrigin: e }), this.setElement(r);
     });
   }
@@ -6130,14 +6130,14 @@ class wt extends ot {
   }
   static fromObject(t, e) {
     let { filters: s, resizeFilter: r, src: n, crossOrigin: o, type: a } = t, c = N(t, Gd);
-    return Promise.all([Hs(n, v(v({}, e), {}, { crossOrigin: o })), s && ys(s, e), r && ys([r], e), cr(c, e)]).then((h) => {
+    return Promise.all([Vs(n, v(v({}, e), {}, { crossOrigin: o })), s && ys(s, e), r && ys([r], e), lr(c, e)]).then((h) => {
       let [l, u = [], [d] = [], f = {}] = h;
       return new this(l, v(v({}, c), {}, { src: n, filters: u, resizeFilter: d }, f));
     });
   }
   static fromURL(t) {
     let { crossOrigin: e = null, signal: s } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, r = arguments.length > 2 ? arguments[2] : void 0;
-    return Hs(t, { crossOrigin: e, signal: s }).then((n) => new this(n, r));
+    return Vs(t, { crossOrigin: e, signal: s }).then((n) => new this(n, r));
   }
   static async fromElement(t) {
     let e = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, s = arguments.length > 2 ? arguments[2] : void 0;
@@ -6197,19 +6197,19 @@ class $d extends gh {
     t.lineTo(d.x, d.y), t.stroke(), t.restore(), super.render(t, e, s, r, n);
   }
 }
-const Cr = (i, t, e, s, r, n) => new (e ? $d : gh)(v(v({ commandIndex: i, pointIndex: t, actionName: "modifyPath", positionHandler: Nd, actionHandler: Ud, connectToCommandIndex: r, connectToPointIndex: n }, s), e ? s.controlPointStyle : s.pointStyle));
-var Is = Object.freeze({ __proto__: null, changeWidth: hn, createObjectDefaultControls: Un, createPathControls: function(i) {
+const kr = (i, t, e, s, r, n) => new (e ? $d : gh)(v(v({ commandIndex: i, pointIndex: t, actionName: "modifyPath", positionHandler: Nd, actionHandler: Ud, connectToCommandIndex: r, connectToPointIndex: n }, s), e ? s.controlPointStyle : s.pointStyle));
+var Es = Object.freeze({ __proto__: null, changeWidth: hn, createObjectDefaultControls: Un, createPathControls: function(i) {
   let t = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
   const e = {};
   let s = "M";
   return i.path.forEach((r, n) => {
     const o = r[0];
-    switch (o !== "Z" && (e["c_".concat(n, "_").concat(o)] = Cr(n, r.length - 2, !1, t)), o) {
+    switch (o !== "Z" && (e["c_".concat(n, "_").concat(o)] = kr(n, r.length - 2, !1, t)), o) {
       case "C":
-        e["c_".concat(n, "_C_CP_1")] = Cr(n, 1, !0, t, n - 1, /* @__PURE__ */ ((a) => a === "C" ? 5 : a === "Q" ? 3 : 1)(s)), e["c_".concat(n, "_C_CP_2")] = Cr(n, 3, !0, t, n, 5);
+        e["c_".concat(n, "_C_CP_1")] = kr(n, 1, !0, t, n - 1, /* @__PURE__ */ ((a) => a === "C" ? 5 : a === "Q" ? 3 : 1)(s)), e["c_".concat(n, "_C_CP_2")] = kr(n, 3, !0, t, n, 5);
         break;
       case "Q":
-        e["c_".concat(n, "_Q_CP_1")] = Cr(n, 1, !0, t, n, 3);
+        e["c_".concat(n, "_Q_CP_1")] = kr(n, 1, !0, t, n, 3);
     }
     s = o;
   }), e;
@@ -6218,7 +6218,7 @@ var Is = Object.freeze({ __proto__: null, changeWidth: hn, createObjectDefaultCo
   const e = {};
   for (let s = 0; s < (typeof i == "number" ? i : i.points.length); s++) e["p".concat(s)] = new $(v({ actionName: uh, positionHandler: Vo(s), actionHandler: Go(s) }, t));
   return e;
-}, createPolyPositionHandler: Vo, createResizeControls: Oc, createTextboxDefaultControls: kc, dragHandler: oc, factoryPolyActionHandler: fh, getLocalPoint: vi, polyActionHandler: dh, renderCircleControl: gc, renderSquareControl: pc, rotationStyleHandler: mc, rotationWithSnapping: vc, scaleCursorStyleHandler: Ze, scaleOrSkewActionName: Rs, scaleSkewCursorStyleHandler: Le, scalingEqually: Fs, scalingX: _c, scalingXOrSkewingY: ln, scalingY: Sc, scalingYOrSkewingX: un, skewCursorStyleHandler: Tc, skewHandlerX: wc, skewHandlerY: Cc, wrapWithFireEvent: Oe, wrapWithFixedAnchor: Ve });
+}, createPolyPositionHandler: Vo, createResizeControls: Oc, createTextboxDefaultControls: kc, dragHandler: oc, factoryPolyActionHandler: fh, getLocalPoint: vi, polyActionHandler: dh, renderCircleControl: gc, renderSquareControl: pc, rotationStyleHandler: mc, rotationWithSnapping: vc, scaleCursorStyleHandler: Ze, scaleOrSkewActionName: Ws, scaleSkewCursorStyleHandler: Le, scalingEqually: Bs, scalingX: _c, scalingXOrSkewingY: ln, scalingY: Sc, scalingYOrSkewingX: un, skewCursorStyleHandler: Tc, skewHandlerX: wc, skewHandlerY: Cc, wrapWithFireEvent: Oe, wrapWithFixedAnchor: Ve });
 const Ci = (i) => i.webgl !== void 0, Jn = "precision highp float", qd = `
     `.concat(Jn, `;
     varying vec2 vTexCoord;
@@ -6355,7 +6355,7 @@ const Qd = { multiply: `gl_FragColor.rgb *= uColor.rgb;
     gl_FragColor.rgb *= (1.0 - uColor.a);
     gl_FragColor.rgb += uColor.rgb;
     ` };
-class Or extends it {
+class Mr extends it {
   getCacheKey() {
     return "".concat(this.type, "_").concat(this.mode);
   }
@@ -6417,7 +6417,7 @@ class Or extends it {
     s[0] = this.alpha * s[0] / 255, s[1] = this.alpha * s[1] / 255, s[2] = this.alpha * s[2] / 255, s[3] = this.alpha, t.uniform4fv(e.uColor, s);
   }
 }
-y(Or, "defaults", { color: "#F95C63", mode: "multiply", alpha: 1 }), y(Or, "type", "BlendColor"), y(Or, "uniformLocations", ["uColor"]), C.setClass(Or);
+y(Mr, "defaults", { color: "#F95C63", mode: "multiply", alpha: 1 }), y(Mr, "type", "BlendColor"), y(Mr, "uniformLocations", ["uColor"]), C.setClass(Mr);
 const tf = { multiply: `
     precision highp float;
     uniform sampler2D uTexture;
@@ -6445,7 +6445,7 @@ const tf = { multiply: `
       gl_FragColor = color;
     }
     ` }, ef = ["type", "image"];
-class kr extends it {
+class Dr extends it {
   getCacheKey() {
     return "".concat(this.type, "_").concat(this.mode);
   }
@@ -6506,8 +6506,8 @@ class kr extends it {
     return wt.fromObject(r, e).then((o) => new this(v(v({}, n), {}, { image: o })));
   }
 }
-y(kr, "type", "BlendImage"), y(kr, "defaults", { mode: "multiply", alpha: 1 }), y(kr, "uniformLocations", ["uTransformMatrix", "uImage"]), C.setClass(kr);
-class Mr extends it {
+y(Dr, "type", "BlendImage"), y(Dr, "defaults", { mode: "multiply", alpha: 1 }), y(Dr, "uniformLocations", ["uTransformMatrix", "uImage"]), C.setClass(Dr);
+class Ir extends it {
   getFragmentSource() {
     return `
     precision highp float;
@@ -6569,8 +6569,8 @@ class Mr extends it {
     return this.horizontal ? e[0] = s : e[1] = s, e;
   }
 }
-y(Mr, "type", "Blur"), y(Mr, "defaults", { blur: 0 }), y(Mr, "uniformLocations", ["uDelta"]), C.setClass(Mr);
-class Dr extends it {
+y(Ir, "type", "Blur"), y(Ir, "defaults", { blur: 0 }), y(Ir, "uniformLocations", ["uDelta"]), C.setClass(Ir);
+class jr extends it {
   getFragmentSource() {
     return `
   precision highp float;
@@ -6596,7 +6596,7 @@ class Dr extends it {
     t.uniform1f(e.uBrightness, this.brightness);
   }
 }
-y(Dr, "type", "Brightness"), y(Dr, "defaults", { brightness: 0 }), y(Dr, "uniformLocations", ["uBrightness"]), C.setClass(Dr);
+y(jr, "type", "Brightness"), y(jr, "defaults", { brightness: 0 }), y(jr, "uniformLocations", ["uBrightness"]), C.setClass(jr);
 class Qe extends it {
   getFragmentSource() {
     return `
@@ -6669,7 +6669,7 @@ class No extends it {
   }
 }
 y(No, "type", "Composed"), C.setClass(No);
-class Ir extends it {
+class Er extends it {
   getFragmentSource() {
     return `
   precision highp float;
@@ -6695,7 +6695,7 @@ class Ir extends it {
     t.uniform1f(e.uContrast, this.contrast);
   }
 }
-y(Ir, "type", "Contrast"), y(Ir, "defaults", { contrast: 0 }), y(Ir, "uniformLocations", ["uContrast"]), C.setClass(Ir);
+y(Er, "type", "Contrast"), y(Er, "defaults", { contrast: 0 }), y(Er, "uniformLocations", ["uContrast"]), C.setClass(Er);
 const sf = { Convolute_3_1: `
     precision highp float;
     uniform sampler2D uTexture;
@@ -6841,7 +6841,7 @@ const sf = { Convolute_3_1: `
       gl_FragColor.a = alpha;
     }
     ` };
-class jr extends it {
+class Pr extends it {
   getCacheKey() {
     return "".concat(this.type, "_").concat(Math.sqrt(this.matrix.length), "_").concat(this.opaque ? 1 : 0);
   }
@@ -6864,9 +6864,9 @@ class jr extends it {
     return v(v({}, super.toObject()), {}, { opaque: this.opaque, matrix: [...this.matrix] });
   }
 }
-y(jr, "type", "Convolute"), y(jr, "defaults", { opaque: !1, matrix: [0, 0, 0, 0, 1, 0, 0, 0, 0] }), y(jr, "uniformLocations", ["uMatrix", "uOpaque", "uHalfSize", "uSize"]), C.setClass(jr);
+y(Pr, "type", "Convolute"), y(Pr, "defaults", { opaque: !1, matrix: [0, 0, 0, 0, 1, 0, 0, 0, 0] }), y(Pr, "uniformLocations", ["uMatrix", "uOpaque", "uHalfSize", "uSize"]), C.setClass(Pr);
 const ph = "Gamma";
-class Er extends it {
+class Ar extends it {
   getFragmentSource() {
     return `
   precision highp float;
@@ -6907,7 +6907,7 @@ class Er extends it {
     return { type: ph, gamma: this.gamma.concat() };
   }
 }
-y(Er, "type", ph), y(Er, "defaults", { gamma: [1, 1, 1] }), y(Er, "uniformLocations", ["uGamma"]), C.setClass(Er);
+y(Ar, "type", ph), y(Ar, "defaults", { gamma: [1, 1, 1] }), y(Ar, "uniformLocations", ["uGamma"]), C.setClass(Ar);
 const rf = { average: `
     precision highp float;
     uniform sampler2D uTexture;
@@ -6938,7 +6938,7 @@ const rf = { average: `
       gl_FragColor = vec4(average, average, average, col.a);
     }
     ` };
-class Pr extends it {
+class Lr extends it {
   applyTo2d(t) {
     let { imageData: { data: e } } = t;
     for (let s, r = 0; r < e.length; r += 4) {
@@ -6968,7 +6968,7 @@ class Pr extends it {
     return !1;
   }
 }
-y(Pr, "type", "Grayscale"), y(Pr, "defaults", { mode: "average" }), y(Pr, "uniformLocations", ["uMode"]), C.setClass(Pr);
+y(Lr, "type", "Grayscale"), y(Lr, "defaults", { mode: "average" }), y(Lr, "uniformLocations", ["uMode"]), C.setClass(Lr);
 class Ui extends Qe {
   calculateMatrix() {
     const t = this.rotation * Math.PI, e = Ft(t), s = Rt(t), r = 1 / 3, n = Math.sqrt(r) * s, o = 1 - e;
@@ -6985,7 +6985,7 @@ class Ui extends Qe {
   }
 }
 y(Ui, "type", "HueRotation"), y(Ui, "defaults", { rotation: 0 }), C.setClass(Ui);
-class Ar extends it {
+class Fr extends it {
   applyTo2d(t) {
     let { imageData: { data: e } } = t;
     for (let s = 0; s < e.length; s += 4) e[s] = 255 - e[s], e[s + 1] = 255 - e[s + 1], e[s + 2] = 255 - e[s + 2], this.alpha && (e[s + 3] = 255 - e[s + 3]);
@@ -7018,8 +7018,8 @@ class Ar extends it {
     t.uniform1i(e.uInvert, Number(this.invert)), t.uniform1i(e.uAlpha, Number(this.alpha));
   }
 }
-y(Ar, "type", "Invert"), y(Ar, "defaults", { alpha: !1, invert: !0 }), y(Ar, "uniformLocations", ["uInvert", "uAlpha"]), C.setClass(Ar);
-class Lr extends it {
+y(Fr, "type", "Invert"), y(Fr, "defaults", { alpha: !1, invert: !0 }), y(Fr, "uniformLocations", ["uInvert", "uAlpha"]), C.setClass(Fr);
+class Rr extends it {
   getFragmentSource() {
     return `
   precision highp float;
@@ -7053,8 +7053,8 @@ class Lr extends it {
     return this.noise === 0;
   }
 }
-y(Lr, "type", "Noise"), y(Lr, "defaults", { noise: 0 }), y(Lr, "uniformLocations", ["uNoise", "uSeed"]), C.setClass(Lr);
-class Fr extends it {
+y(Rr, "type", "Noise"), y(Rr, "defaults", { noise: 0 }), y(Rr, "uniformLocations", ["uNoise", "uSeed"]), C.setClass(Rr);
+class Br extends it {
   applyTo2d(t) {
     let { imageData: { data: e, width: s, height: r } } = t;
     for (let n = 0; n < r; n += this.blocksize) for (let o = 0; o < s; o += this.blocksize) {
@@ -7093,8 +7093,8 @@ class Fr extends it {
     t.uniform1f(e.uBlocksize, this.blocksize);
   }
 }
-y(Fr, "type", "Pixelate"), y(Fr, "defaults", { blocksize: 4 }), y(Fr, "uniformLocations", ["uBlocksize"]), C.setClass(Fr);
-class Rr extends it {
+y(Br, "type", "Pixelate"), y(Br, "defaults", { blocksize: 4 }), y(Br, "uniformLocations", ["uBlocksize"]), C.setClass(Br);
+class Wr extends it {
   getFragmentSource() {
     return `
 precision highp float;
@@ -7123,8 +7123,8 @@ void main() {
     t.uniform4fv(e.uLow, n), t.uniform4fv(e.uHigh, o);
   }
 }
-y(Rr, "type", "RemoveColor"), y(Rr, "defaults", { color: "#FFFFFF", distance: 0.02, useAlpha: !1 }), y(Rr, "uniformLocations", ["uLow", "uHigh"]), C.setClass(Rr);
-class Br extends it {
+y(Wr, "type", "RemoveColor"), y(Wr, "defaults", { color: "#FFFFFF", distance: 0.02, useAlpha: !1 }), y(Wr, "uniformLocations", ["uLow", "uHigh"]), C.setClass(Wr);
+class Xr extends it {
   sendUniformData(t, e) {
     t.uniform2fv(e.uDelta, this.horizontal ? [1 / this.width, 0] : [0, 1 / this.height]), t.uniform1fv(e.uTaps, this.taps);
   }
@@ -7243,8 +7243,8 @@ class Br extends it {
     return u;
   }
 }
-y(Br, "type", "Resize"), y(Br, "defaults", { resizeType: "hermite", scaleX: 1, scaleY: 1, lanczosLobes: 3 }), y(Br, "uniformLocations", ["uDelta", "uTaps"]), C.setClass(Br);
-class Wr extends it {
+y(Xr, "type", "Resize"), y(Xr, "defaults", { resizeType: "hermite", scaleX: 1, scaleY: 1, lanczosLobes: 3 }), y(Xr, "uniformLocations", ["uDelta", "uTaps"]), C.setClass(Xr);
+class zr extends it {
   getFragmentSource() {
     return `
   precision highp float;
@@ -7277,8 +7277,8 @@ class Wr extends it {
     return this.saturation === 0;
   }
 }
-y(Wr, "type", "Saturation"), y(Wr, "defaults", { saturation: 0 }), y(Wr, "uniformLocations", ["uSaturation"]), C.setClass(Wr);
-class Xr extends it {
+y(zr, "type", "Saturation"), y(zr, "defaults", { saturation: 0 }), y(zr, "uniformLocations", ["uSaturation"]), C.setClass(zr);
+class Hr extends it {
   getFragmentSource() {
     return `
   precision highp float;
@@ -7312,7 +7312,7 @@ class Xr extends it {
     return this.vibrance === 0;
   }
 }
-y(Xr, "type", "Vibrance"), y(Xr, "defaults", { vibrance: 0 }), y(Xr, "uniformLocations", ["uVibrance"]), C.setClass(Xr);
+y(Hr, "type", "Vibrance"), y(Hr, "defaults", { vibrance: 0 }), y(Hr, "uniformLocations", ["uVibrance"]), C.setClass(Hr);
 function Nt(i, t, e, s, r) {
   const c = r.canvas.viewportTransform;
   i.save(), this.controlOrientation === "left" ? i.translate(
@@ -7349,8 +7349,8 @@ const Mt = 1, vt = "rgba(255, 255, 255,1.0)", Uo = [
   center: 0,
   bottom: 0.5,
   right: 0.5
-}, L = (i) => typeof i == "string" ? of[i] : i - 0.5, ze = "center", ur = "left", cb = "top", hb = "bottom", dr = "right", lb = "none";
-function fr(i) {
+}, L = (i) => typeof i == "string" ? of[i] : i - 0.5, ze = "center", fr = "left", cb = "top", hb = "bottom", gr = "right", lb = "none";
+function pr(i) {
   return L(i.originX) === L(ze) && L(i.originY) === L(ze);
 }
 function Oi(i) {
@@ -7378,7 +7378,7 @@ function ub(i, t = 1) {
 const vh = (i) => Object.keys(i).reduce((t, e) => {
   const { display: s, playbackRate: r } = i[e];
   return Math.max(t, s.to / (r || 1));
-}, 0), { wrapWithFireEvent: lf, getLocalPoint: uf } = Is, df = (i, t, e, s) => {
+}, 0), { wrapWithFireEvent: lf, getLocalPoint: uf } = Es, df = (i, t, e, s) => {
   const r = uf(
     t,
     t.originX,
@@ -7386,8 +7386,8 @@ const vh = (i) => Object.keys(i).reduce((t, e) => {
     e,
     s
   );
-  if (L(t.originX) === L(ze) || L(t.originX) === L(dr) && r.x < 0 || L(t.originX) === L(ur) && r.x > 0) {
-    let { target: n } = t, o = n.strokeWidth / (n.strokeUniform ? n.scaleX : 1), a = fr(t) ? 2 : 1, c = n.width, h = Math.ceil(
+  if (L(t.originX) === L(ze) || L(t.originX) === L(gr) && r.x < 0 || L(t.originX) === L(fr) && r.x > 0) {
+    let { target: n } = t, o = n.strokeWidth / (n.strokeUniform ? n.scaleX : 1), a = pr(t) ? 2 : 1, c = n.width, h = Math.ceil(
       Math.abs(r.x * a / n.scaleX) - o
     );
     if (t.corner === "mr") {
@@ -7432,7 +7432,7 @@ const vh = (i) => Object.keys(i).reduce((t, e) => {
 }, yn = lf(
   "resizing",
   Oi(df)
-), { wrapWithFireEvent: ff, getLocalPoint: gf, wrapWithFixedAnchor: pf } = Is, mf = (i, t, e, s) => {
+), { wrapWithFireEvent: ff, getLocalPoint: gf, wrapWithFixedAnchor: pf } = Es, mf = (i, t, e, s) => {
   const r = gf(
     t,
     t.originX,
@@ -7440,8 +7440,8 @@ const vh = (i) => Object.keys(i).reduce((t, e) => {
     e,
     s
   );
-  if (L(t.originX) === L(ze) || L(t.originX) === L(dr) && r.x < 0 || L(t.originX) === L(ur) && r.x > 0) {
-    const { target: n } = t, o = n.strokeWidth / (n.strokeUniform ? n.scaleX : 1), a = fr(t) ? 2 : 1, c = n.width, h = Math.ceil(
+  if (L(t.originX) === L(ze) || L(t.originX) === L(gr) && r.x < 0 || L(t.originX) === L(fr) && r.x > 0) {
+    const { target: n } = t, o = n.strokeWidth / (n.strokeUniform ? n.scaleX : 1), a = pr(t) ? 2 : 1, c = n.width, h = Math.ceil(
       Math.abs(r.x * a / n.scaleX) - o
     ), l = t.corner === "ml";
     if (n.left < 0) return !1;
@@ -7456,7 +7456,7 @@ const vh = (i) => Object.keys(i).reduce((t, e) => {
 }, bn = ff(
   "resizing",
   pf(mf)
-), { wrapWithFireEvent: vf, getLocalPoint: yf } = Is, bf = (i, t, e, s) => {
+), { wrapWithFireEvent: vf, getLocalPoint: yf } = Es, bf = (i, t, e, s) => {
   const r = yf(
     t,
     t.originX,
@@ -7464,8 +7464,8 @@ const vh = (i) => Object.keys(i).reduce((t, e) => {
     e,
     s
   );
-  if (L(t.originX) === L(ze) || L(t.originX) === L(dr) && r.x < 0 || L(t.originX) === L(ur) && r.x > 0) {
-    const { target: n } = t, o = n.strokeWidth / (n.strokeUniform ? n.scaleX : 1), a = fr(t) ? 2 : 1, c = n.width, h = Math.ceil(
+  if (L(t.originX) === L(ze) || L(t.originX) === L(gr) && r.x < 0 || L(t.originX) === L(fr) && r.x > 0) {
+    const { target: n } = t, o = n.strokeWidth / (n.strokeUniform ? n.scaleX : 1), a = pr(t) ? 2 : 1, c = n.width, h = Math.ceil(
       Math.abs(r.x * a / n.scaleX) - o
     ), l = G(
       h,
@@ -7478,7 +7478,7 @@ const vh = (i) => Object.keys(i).reduce((t, e) => {
 }, _n = vf(
   "resizing",
   Oi(bf)
-), { wrapWithFireEvent: _f, getLocalPoint: Sf } = Is, Tf = (i, t, e, s) => {
+), { wrapWithFireEvent: _f, getLocalPoint: Sf } = Es, Tf = (i, t, e, s) => {
   const r = Sf(
     t,
     t.originX,
@@ -7486,8 +7486,8 @@ const vh = (i) => Object.keys(i).reduce((t, e) => {
     e,
     s
   );
-  if (L(t.originX) === L(ze) || L(t.originX) === L(dr) && r.x < 0 || L(t.originX) === L(ur) && r.x > 0) {
-    let { target: n } = t, o = n.strokeWidth / (n.strokeUniform ? n.scaleX : 1), a = fr(t) ? 2 : 1, c = n.width, h = Math.ceil(
+  if (L(t.originX) === L(ze) || L(t.originX) === L(gr) && r.x < 0 || L(t.originX) === L(fr) && r.x > 0) {
+    let { target: n } = t, o = n.strokeWidth / (n.strokeUniform ? n.scaleX : 1), a = pr(t) ? 2 : 1, c = n.width, h = Math.ceil(
       Math.abs(r.x * a / n.scaleX) - o
     );
     if (t.corner === "mr") {
@@ -7516,7 +7516,7 @@ const vh = (i) => Object.keys(i).reduce((t, e) => {
 }, qo = _f(
   "resizing",
   Oi(Tf)
-), { scaleSkewCursorStyleHandler: Ut } = Is, js = () => ({
+), { scaleSkewCursorStyleHandler: Ut } = Es, Ps = () => ({
   mr: new $({
     x: 0.5,
     y: 0,
@@ -7612,18 +7612,18 @@ const vh = (i) => Object.keys(i).reduce((t, e) => {
     controlOrientation: "left"
   })
 }), Of = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
-let gr = (i = 21) => {
+let mr = (i = 21) => {
   let t = "", e = crypto.getRandomValues(new Uint8Array(i |= 0));
   for (; i--; )
     t += Of[e[i] & 63];
   return t;
 };
-function Bs(i = 16) {
+function Xs(i = 16) {
   const t = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ", e = t.charAt(Math.floor(Math.random() * t.length));
-  let s = gr(i - 1);
+  let s = mr(i - 1);
   return s = s.replace(/[^a-zA-Z0-9]/g, "").slice(0, i - 1), e + s;
 }
-const { wrapWithFireEvent: kf, getLocalPoint: Mf } = Is, Df = (i, t, e, s) => {
+const { wrapWithFireEvent: kf, getLocalPoint: Mf } = Es, Df = (i, t, e, s) => {
   const r = Mf(
     t,
     t.originX,
@@ -7631,8 +7631,8 @@ const { wrapWithFireEvent: kf, getLocalPoint: Mf } = Is, Df = (i, t, e, s) => {
     e,
     s
   );
-  if (L(t.originX) === L(ze) || L(t.originX) === L(dr) && r.x < 0 || L(t.originX) === L(ur) && r.x > 0) {
-    let { target: n } = t, o = n.strokeWidth / (n.strokeUniform ? n.scaleX : 1), a = fr(t) ? 2 : 1, c = n.width, h = Math.ceil(
+  if (L(t.originX) === L(ze) || L(t.originX) === L(gr) && r.x < 0 || L(t.originX) === L(fr) && r.x > 0) {
+    let { target: n } = t, o = n.strokeWidth / (n.strokeUniform ? n.scaleX : 1), a = pr(t) ? 2 : 1, c = n.width, h = Math.ceil(
       Math.abs(r.x * a / n.scaleX) - o
     );
     if (t.corner === "mr") {
@@ -7686,7 +7686,7 @@ const { wrapWithFireEvent: kf, getLocalPoint: Mf } = Is, Df = (i, t, e, s) => {
     Object.assign(this, ts.ownDefaults), this.id = e.id, this.src = e.src, this.display = e.display, this.tScale = e.tScale;
   }
   static createControls() {
-    return { controls: js() };
+    return { controls: Ps() };
   }
   static getDefaults() {
     return {
@@ -7725,8 +7725,8 @@ T(ts, "type", "Image"), T(ts, "ownDefaults", {
   hoverCursor: "default",
   fill: "#27272a"
 });
-let Qs = ts;
-C.setClass(Qs, "Image");
+let er = ts;
+C.setClass(er, "Image");
 class bt extends z {
   constructor(e) {
     super(e);
@@ -7827,7 +7827,7 @@ const ss = class ss extends z {
     Object.assign(this, ss.ownDefaults), this.id = e.id, this.borderColor = "transparent", this.stroke = "transparent", this.strokeWidth = 0, this.tScale = e.tScale, this.display = e.display, this.text = e.text;
   }
   static createControls() {
-    return { controls: js() };
+    return { controls: Ps() };
   }
   static getDefaults() {
     return {
@@ -7863,8 +7863,8 @@ T(ss, "type", "Text"), T(ss, "ownDefaults", {
   borderOpacityWhenMoving: 1,
   hoverCursor: "default"
 });
-let tr = ss;
-C.setClass(tr, "Text");
+let sr = ss;
+C.setClass(sr, "Text");
 const If = {
   selectable: !1,
   evented: !1,
@@ -8032,8 +8032,8 @@ T(ns, "type", "Placeholder"), T(ns, "ownDefaults", {
   strokeDashArray: [5, 1],
   evented: !1
 });
-let er = ns;
-C.setClass(er, "Placeholder");
+let rr = ns;
+C.setClass(rr, "Placeholder");
 const os = class os extends z {
   constructor(e) {
     super(e);
@@ -8097,7 +8097,7 @@ const as = class as extends z {
     Object.assign(this, as.ownDefaults), this.id = e.id, this.borderColor = "transparent", this.stroke = "transparent", this.strokeWidth = 0, this.tScale = e.tScale, this.display = e.display, this.text = e.text;
   }
   static createControls() {
-    return { controls: js() };
+    return { controls: Ps() };
   }
   static getDefaults() {
     return {
@@ -8133,8 +8133,8 @@ T(as, "type", "Caption"), T(as, "ownDefaults", {
   borderOpacityWhenMoving: 1,
   hoverCursor: "default"
 });
-let sr = as;
-C.setClass(sr, "Caption");
+let ir = as;
+C.setClass(ir, "Caption");
 const cs = class cs extends z {
   constructor(e) {
     super(e);
@@ -8182,21 +8182,17 @@ T(cs, "type", "Template"), T(cs, "ownDefaults", {
 });
 let zt = cs;
 C.setClass(zt, "Template");
-function Pf(i) {
-  const t = Math.floor(i / 1e3), e = Math.floor(t / 60), s = t % 60, r = String(e).padStart(2, "0"), n = String(s).padStart(2, "0");
-  return `${r}:${n}`;
-}
 const hs = class hs extends z {
   constructor(e) {
     super(e);
-    T(this, "duration");
-    T(this, "fromId");
-    T(this, "toId");
+    T(this, "itemType", "illustration");
+    T(this, "src");
     T(this, "isSelected", !1);
-    T(this, "name");
-    T(this, "durationString");
-    T(this, "itemType");
-    Object.assign(this, hs.ownDefaults), this.id = e.id, this.fill = "#27272a", this.name = e.type.toUpperCase(), this.durationString = Pf(e.duration), this.itemType = e.type;
+    T(this, "svgString", "");
+    Object.assign(this, hs.ownDefaults), this.id = e.id, this.borderColor = "transparent", this.stroke = "transparent", this.strokeWidth = 0, this.tScale = e.tScale, this.display = e.display, this.src = e.src, this.svgString = e.svgString;
+  }
+  static createControls() {
+    return { controls: Ps() };
   }
   static getDefaults() {
     return {
@@ -8204,96 +8200,51 @@ const hs = class hs extends z {
       ...hs.ownDefaults
     };
   }
+  setSelected(e) {
+    this.isSelected = e, this.set({ dirty: !0 });
+  }
+  // add custom text to the track item
   _render(e) {
-    e.save(), super._render(e), e.beginPath(), e.rect(-this.width / 2, -this.height / 2, this.width, this.height), e.clip(), this.drawTextIdentity(e), e.restore();
+    super._render(e), this.updateSelected(e);
   }
-  drawTextIdentity(e) {
-    e.font = "600 12px 'Geist variable'", e.textAlign = "left";
-    const s = e.measureText(this.name).width, r = e.measureText(this.durationString).width, n = 8, o = 4, a = 4 - this.height / 2, c = 20, h = 4, l = 4 - this.width / 2, u = s + n * 2;
-    this.drawRoundedRect(
-      e,
-      l,
-      a,
-      u,
-      c,
-      h
-    ), e.fillStyle = "#f4f4f5", e.fillText(this.name, l + n, a + 14);
-    const d = l + u + o, f = r + n * 2;
-    this.drawRoundedRect(
-      e,
-      d,
-      a,
-      f,
-      c,
-      h
-    ), e.fillStyle = "#f4f4f5", e.fillText(this.durationString, d + n, a + 14);
+  updateSelected(e) {
+    this.isSelected && (e.save(), e.beginPath(), e.roundRect(
+      -this.width / 2,
+      -this.height / 2,
+      this.width,
+      this.height,
+      6
+    ), e.lineWidth = Mt, e.strokeStyle = vt, e.stroke(), e.restore());
   }
-  drawRoundedRect(e, s, r, n, o, a) {
-    e.fillStyle = "rgba(0, 0, 0, 0.5)", e.roundRect ? (e.beginPath(), e.roundRect(s, r, n, o, a), e.fill()) : e.fillRect(s, r, n, o);
+  setSrc(e) {
+    this.src = e, this.set({ dirty: !0 });
   }
 };
-T(hs, "type", "PreviewTrackItem"), T(hs, "ownDefaults", {
+T(hs, "type", "Illustration"), T(hs, "ownDefaults", {
+  rx: 6,
+  ry: 6,
   objectCaching: !1,
   borderColor: "transparent",
   stroke: "transparent",
   strokeWidth: 0,
+  fill: "#27272a",
   borderOpacityWhenMoving: 1,
   hoverCursor: "default",
-  rx: 4,
-  ry: 4
+  svgString: ""
 });
-let we = hs;
-C.setClass(we, "PreviewTrackItem");
-class Af {
-  constructor() {
-    T(this, "___eventListeners", {});
-    T(this, "___activeObjects", []);
-  }
-  resize(t, { force: e } = { force: !1 }) {
-    var s;
-    this.lowerCanvasEl && (this.setDimensions(t), e && this.renderTracks(), (s = this.onResizeCanvas) == null || s.call(this, {
-      width: this.width,
-      height: this.height
-    }));
-  }
-  pauseEventListeners() {
-    this.___eventListeners = this.__eventListeners, this.__eventListeners = {};
-    const t = this.getActiveObjects();
-    this.discardActiveObject(), this.___activeObjects = t;
-  }
-  resumeEventListeners() {
-    this.__eventListeners = this.___eventListeners, this.___eventListeners = {};
-    const t = this.___activeObjects;
-    if (!t.length)
-      return this.requestRenderAll(), !1;
-    if (t.length === 1)
-      this.setActiveObject(t[0]);
-    else {
-      const e = new Ot(t);
-      this.setActiveObject(e);
-    }
-    this.requestRenderAll();
-  }
-  updateCachingActiveObjects(t) {
-    const e = this.___activeObjects;
-    this.___activeObjects = e.map((s) => {
-      const r = t.find((n) => n.id === s.id);
-      return r || s;
-    });
-  }
-}
-function rr(i, t) {
-  return i.map((e) => ({
-    ...e,
-    items: e.items.filter((s) => !t.includes(s))
-  }));
-}
+let Ts = hs;
+C.setClass(Ts, "Illustration");
 const ls = class ls extends z {
   constructor(e) {
     super(e);
-    T(this, "itemType", "composition");
+    T(this, "itemType", "shape");
+    T(this, "src");
     T(this, "isSelected", !1);
-    Object.assign(this, ls.ownDefaults), this.id = e.id, this.borderColor = "transparent", this.stroke = "transparent", this.strokeWidth = 0, this.tScale = e.tScale, this.display = e.display;
+    T(this, "backgroundColorDiv", "#808080");
+    Object.assign(this, ls.ownDefaults), this.id = e.id, this.borderColor = "transparent", this.stroke = "transparent", this.strokeWidth = 0, this.tScale = e.tScale, this.display = e.display, this.src = e.src, this.backgroundColorDiv = e.backgroundColorDiv || "#808080";
+  }
+  static createControls() {
+    return { controls: Ps() };
   }
   static getDefaults() {
     return {
@@ -8301,9 +8252,6 @@ const ls = class ls extends z {
       ...ls.ownDefaults
     };
   }
-  static createControls() {
-    return { controls: js() };
-  }
   setSelected(e) {
     this.isSelected = e, this.set({ dirty: !0 });
   }
@@ -8320,8 +8268,11 @@ const ls = class ls extends z {
       6
     ), e.lineWidth = Mt, e.strokeStyle = vt, e.stroke(), e.restore());
   }
+  setSrc(e) {
+    this.src = e, this.set({ dirty: !0 });
+  }
 };
-T(ls, "type", "Composition"), T(ls, "ownDefaults", {
+T(ls, "type", "Shape"), T(ls, "ownDefaults", {
   rx: 6,
   ry: 6,
   objectCaching: !1,
@@ -8330,20 +8281,17 @@ T(ls, "type", "Composition"), T(ls, "ownDefaults", {
   strokeWidth: 0,
   fill: "#27272a",
   borderOpacityWhenMoving: 1,
-  hoverCursor: "default"
+  hoverCursor: "default",
+  backgroundColordDiv: "#808080"
 });
-let ii = ls;
-C.setClass(ii, "Composition");
+let xs = ls;
+C.setClass(xs, "Shape");
 const us = class us extends z {
   constructor(e) {
     super(e);
-    T(this, "itemType", "illustration");
-    T(this, "src");
+    T(this, "itemType", "composition");
     T(this, "isSelected", !1);
-    Object.assign(this, us.ownDefaults), this.id = e.id, this.borderColor = "transparent", this.stroke = "transparent", this.strokeWidth = 0, this.tScale = e.tScale, this.display = e.display, this.src = e.src;
-  }
-  static createControls() {
-    return { controls: js() };
+    Object.assign(this, us.ownDefaults), this.id = e.id, this.borderColor = "transparent", this.stroke = "transparent", this.strokeWidth = 0, this.tScale = e.tScale, this.display = e.display;
   }
   static getDefaults() {
     return {
@@ -8351,6 +8299,9 @@ const us = class us extends z {
       ...us.ownDefaults
     };
   }
+  static createControls() {
+    return { controls: Ps() };
+  }
   setSelected(e) {
     this.isSelected = e, this.set({ dirty: !0 });
   }
@@ -8367,11 +8318,8 @@ const us = class us extends z {
       6
     ), e.lineWidth = Mt, e.strokeStyle = vt, e.stroke(), e.restore());
   }
-  setSrc(e) {
-    this.src = e, this.set({ dirty: !0 });
-  }
 };
-T(us, "type", "Illustration"), T(us, "ownDefaults", {
+T(us, "type", "Composition"), T(us, "ownDefaults", {
   rx: 6,
   ry: 6,
   objectCaching: !1,
@@ -8382,18 +8330,23 @@ T(us, "type", "Illustration"), T(us, "ownDefaults", {
   borderOpacityWhenMoving: 1,
   hoverCursor: "default"
 });
-let ni = us;
-C.setClass(ni, "Illustration");
+let oi = us;
+C.setClass(oi, "Composition");
+function Pf(i) {
+  const t = Math.floor(i / 1e3), e = Math.floor(t / 60), s = t % 60, r = String(e).padStart(2, "0"), n = String(s).padStart(2, "0");
+  return `${r}:${n}`;
+}
 const ds = class ds extends z {
   constructor(e) {
     super(e);
-    T(this, "itemType", "shape");
-    T(this, "src");
+    T(this, "duration");
+    T(this, "fromId");
+    T(this, "toId");
     T(this, "isSelected", !1);
-    Object.assign(this, ds.ownDefaults), this.id = e.id, this.borderColor = "transparent", this.stroke = "transparent", this.strokeWidth = 0, this.tScale = e.tScale, this.display = e.display, this.src = e.src;
-  }
-  static createControls() {
-    return { controls: js() };
+    T(this, "name");
+    T(this, "durationString");
+    T(this, "itemType");
+    Object.assign(this, ds.ownDefaults), this.id = e.id, this.fill = "#27272a", this.name = e.type.toUpperCase(), this.durationString = Pf(e.duration), this.itemType = e.type;
   }
   static getDefaults() {
     return {
@@ -8401,39 +8354,90 @@ const ds = class ds extends z {
       ...ds.ownDefaults
     };
   }
-  setSelected(e) {
-    this.isSelected = e, this.set({ dirty: !0 });
-  }
-  // add custom text to the track item
   _render(e) {
-    super._render(e), this.updateSelected(e);
+    e.save(), super._render(e), e.beginPath(), e.rect(-this.width / 2, -this.height / 2, this.width, this.height), e.clip(), this.drawTextIdentity(e), e.restore();
   }
-  updateSelected(e) {
-    this.isSelected && (e.save(), e.beginPath(), e.roundRect(
-      -this.width / 2,
-      -this.height / 2,
-      this.width,
-      this.height,
-      6
-    ), e.lineWidth = Mt, e.strokeStyle = vt, e.stroke(), e.restore());
+  drawTextIdentity(e) {
+    e.font = "600 12px 'Geist variable'", e.textAlign = "left";
+    const s = e.measureText(this.name).width, r = e.measureText(this.durationString).width, n = 8, o = 4, a = 4 - this.height / 2, c = 20, h = 4, l = 4 - this.width / 2, u = s + n * 2;
+    this.drawRoundedRect(
+      e,
+      l,
+      a,
+      u,
+      c,
+      h
+    ), e.fillStyle = "#f4f4f5", e.fillText(this.name, l + n, a + 14);
+    const d = l + u + o, f = r + n * 2;
+    this.drawRoundedRect(
+      e,
+      d,
+      a,
+      f,
+      c,
+      h
+    ), e.fillStyle = "#f4f4f5", e.fillText(this.durationString, d + n, a + 14);
   }
-  setSrc(e) {
-    this.src = e, this.set({ dirty: !0 });
+  drawRoundedRect(e, s, r, n, o, a) {
+    e.fillStyle = "rgba(0, 0, 0, 0.5)", e.roundRect ? (e.beginPath(), e.roundRect(s, r, n, o, a), e.fill()) : e.fillRect(s, r, n, o);
   }
 };
-T(ds, "type", "Shape"), T(ds, "ownDefaults", {
-  rx: 6,
-  ry: 6,
+T(ds, "type", "PreviewTrackItem"), T(ds, "ownDefaults", {
   objectCaching: !1,
   borderColor: "transparent",
   stroke: "transparent",
   strokeWidth: 0,
-  fill: "#27272a",
   borderOpacityWhenMoving: 1,
-  hoverCursor: "default"
+  hoverCursor: "default",
+  rx: 4,
+  ry: 4
 });
-let oi = ds;
-C.setClass(oi, "Shape");
+let we = ds;
+C.setClass(we, "PreviewTrackItem");
+class Af {
+  constructor() {
+    T(this, "___eventListeners", {});
+    T(this, "___activeObjects", []);
+  }
+  resize(t, { force: e } = { force: !1 }) {
+    var s;
+    this.lowerCanvasEl && (this.setDimensions(t), e && this.renderTracks(), (s = this.onResizeCanvas) == null || s.call(this, {
+      width: this.width,
+      height: this.height
+    }));
+  }
+  pauseEventListeners() {
+    this.___eventListeners = this.__eventListeners, this.__eventListeners = {};
+    const t = this.getActiveObjects();
+    this.discardActiveObject(), this.___activeObjects = t;
+  }
+  resumeEventListeners() {
+    this.__eventListeners = this.___eventListeners, this.___eventListeners = {};
+    const t = this.___activeObjects;
+    if (!t.length)
+      return this.requestRenderAll(), !1;
+    if (t.length === 1)
+      this.setActiveObject(t[0]);
+    else {
+      const e = new Ot(t);
+      this.setActiveObject(e);
+    }
+    this.requestRenderAll();
+  }
+  updateCachingActiveObjects(t) {
+    const e = this.___activeObjects;
+    this.___activeObjects = e.map((s) => {
+      const r = t.find((n) => n.id === s.id);
+      return r || s;
+    });
+  }
+}
+function nr(i, t) {
+  return i.map((e) => ({
+    ...e,
+    items: e.items.filter((s) => !t.includes(s))
+  }));
+}
 const Lf = (i, t) => {
   var a;
   const e = I(i.display.from, t.tScale), s = I(
@@ -8457,7 +8461,7 @@ const Lf = (i, t) => {
     metadata: i.metadata
   });
 }, Ff = (i, t) => {
-  const e = i.display, s = I(e.from, t.tScale), r = I(e.to - e.from, t.tScale), n = t.sizesMap.text, o = C.getClass("Text") || tr;
+  const e = i.display, s = I(e.from, t.tScale), r = I(e.to - e.from, t.tScale), n = t.sizesMap.text, o = C.getClass("Text") || sr;
   return new o({
     width: r,
     height: n,
@@ -8469,7 +8473,7 @@ const Lf = (i, t) => {
     tScale: t.tScale
   });
 }, Rf = (i, t) => {
-  const e = i.display, s = I(e.from, t.tScale), r = I(e.to - e.from, t.tScale), n = t.sizesMap.caption, o = C.getClass("Caption") || sr;
+  const e = i.display, s = I(e.from, t.tScale), r = I(e.to - e.from, t.tScale), n = t.sizesMap.caption, o = C.getClass("Caption") || ir;
   return new o({
     width: r,
     height: n,
@@ -8484,7 +8488,7 @@ const Lf = (i, t) => {
   const e = I(i.display.from, t.tScale), s = I(
     i.display.to - (i.display.from || 5e3),
     t.tScale
-  ), r = t.sizesMap.image, n = C.getClass("Image") || Qs;
+  ), r = t.sizesMap.image, n = C.getClass("Image") || er;
   return new n({
     width: s,
     height: r,
@@ -8527,7 +8531,7 @@ const Lf = (i, t) => {
     trim: i.trim || i.display
   });
 }, zf = (i, t) => {
-  const e = i.display, s = I(e.from, t.tScale), r = I(e.to - e.from, t.tScale), n = 32, o = C.getClass("Composition") || ii;
+  const e = i.display, s = I(e.from, t.tScale), r = I(e.to - e.from, t.tScale), n = 32, o = C.getClass("Composition") || oi;
   return new o({
     width: r,
     height: n,
@@ -8542,7 +8546,7 @@ const Lf = (i, t) => {
   const e = I(i.display.from, t.tScale), s = I(
     i.display.to - (i.display.from || 5e3),
     t.tScale
-  ), r = t.sizesMap.illustration, n = C.getClass("Illustration") || ni;
+  ), r = t.sizesMap.illustration, n = C.getClass("Illustration") || Ts;
   return new n({
     width: s,
     height: r,
@@ -8551,13 +8555,14 @@ const Lf = (i, t) => {
     tScale: t.tScale,
     top: 10,
     left: e,
-    display: i.display
+    display: i.display,
+    svgString: i.details.svgString
   });
 }, Yf = (i, t) => {
   const e = I(i.display.from, t.tScale), s = I(
     i.display.to - (i.display.from || 5e3),
     t.tScale
-  ), r = t.sizesMap.shape, n = C.getClass("Shape") || oi;
+  ), r = t.sizesMap.shape, n = C.getClass("Shape") || xs;
   return new n({
     width: s,
     height: r,
@@ -8566,7 +8571,8 @@ const Lf = (i, t) => {
     tScale: t.tScale,
     top: 10,
     left: e,
-    display: i.display
+    display: i.display,
+    backgroundColorDiv: i.details.backgroundColor
   });
 }, Vf = (i, t) => {
   if (i.type === "caption") return Rf(i, t);
@@ -8581,23 +8587,23 @@ const Lf = (i, t) => {
   if (i.type === "composition")
     return zf(i, t);
 };
-var bh = typeof global == "object" && global && global.Object === Object && global, Gf = typeof self == "object" && self && self.Object === Object && self, Bt = bh || Gf || Function("return this")(), kt = Bt.Symbol, _h = Object.prototype, Nf = _h.hasOwnProperty, Uf = _h.toString, Ls = kt ? kt.toStringTag : void 0;
+var bh = typeof global == "object" && global && global.Object === Object && global, Gf = typeof self == "object" && self && self.Object === Object && self, Bt = bh || Gf || Function("return this")(), kt = Bt.Symbol, _h = Object.prototype, Nf = _h.hasOwnProperty, Uf = _h.toString, Rs = kt ? kt.toStringTag : void 0;
 function $f(i) {
-  var t = Nf.call(i, Ls), e = i[Ls];
+  var t = Nf.call(i, Rs), e = i[Rs];
   try {
-    i[Ls] = void 0;
+    i[Rs] = void 0;
     var s = !0;
   } catch {
   }
   var r = Uf.call(i);
-  return s && (t ? i[Ls] = e : delete i[Ls]), r;
+  return s && (t ? i[Rs] = e : delete i[Rs]), r;
 }
 var qf = Object.prototype, Kf = qf.toString;
 function Zf(i) {
   return Kf.call(i);
 }
 var Jf = "[object Null]", Qf = "[object Undefined]", Ko = kt ? kt.toStringTag : void 0;
-function Es(i) {
+function As(i) {
   return i == null ? i === void 0 ? Qf : Jf : Ko && Ko in Object(i) ? $f(i) : Zf(i);
 }
 function Ce(i) {
@@ -8605,7 +8611,7 @@ function Ce(i) {
 }
 var tg = "[object Symbol]";
 function ki(i) {
-  return typeof i == "symbol" || Ce(i) && Es(i) == tg;
+  return typeof i == "symbol" || Ce(i) && As(i) == tg;
 }
 function eg(i, t) {
   for (var e = -1, s = i == null ? 0 : i.length, r = Array(s); ++e < s; )
@@ -8660,7 +8666,7 @@ var ug = "[object AsyncFunction]", dg = "[object Function]", fg = "[object Gener
 function Th(i) {
   if (!Kt(i))
     return !1;
-  var t = Es(i);
+  var t = As(i);
   return t == dg || t == fg || t == ug || t == gg;
 }
 var $i = Bt["__core-js_shared__"], ea = function() {
@@ -8814,7 +8820,7 @@ function Ng(i, t) {
 }
 var Ug = "[object Arguments]";
 function ia(i) {
-  return Ce(i) && Es(i) == Ug;
+  return Ce(i) && As(i) == Ug;
 }
 var Ch = Object.prototype, $g = Ch.hasOwnProperty, qg = Ch.propertyIsEnumerable, so = ia(/* @__PURE__ */ function() {
   return arguments;
@@ -8828,20 +8834,20 @@ var Oh = typeof exports == "object" && exports && !exports.nodeType && exports,
 V[gp] = V[pp] = V[mp] = V[vp] = V[yp] = V[bp] = V[_p] = V[Sp] = V[Tp] = !0;
 V[Qg] = V[tp] = V[dp] = V[ep] = V[fp] = V[sp] = V[rp] = V[ip] = V[np] = V[op] = V[ap] = V[cp] = V[hp] = V[lp] = V[up] = !1;
 function xp(i) {
-  return Ce(i) && eo(i.length) && !!V[Es(i)];
+  return Ce(i) && eo(i.length) && !!V[As(i)];
 }
 function ro(i) {
   return function(t) {
     return i(t);
   };
 }
-var kh = typeof exports == "object" && exports && !exports.nodeType && exports, Ns = kh && typeof module == "object" && module && !module.nodeType && module, wp = Ns && Ns.exports === kh, qi = wp && bh.process, Ts = function() {
+var kh = typeof exports == "object" && exports && !exports.nodeType && exports, $s = kh && typeof module == "object" && module && !module.nodeType && module, wp = $s && $s.exports === kh, qi = wp && bh.process, ws = function() {
   try {
-    var i = Ns && Ns.require && Ns.require("util").types;
+    var i = $s && $s.require && $s.require("util").types;
     return i || qi && qi.binding && qi.binding("util");
   } catch {
   }
-}(), aa = Ts && Ts.isTypedArray, Mh = aa ? ro(aa) : xp, Cp = Object.prototype, Op = Cp.hasOwnProperty;
+}(), aa = ws && ws.isTypedArray, Mh = aa ? ro(aa) : xp, Cp = Object.prototype, Op = Cp.hasOwnProperty;
 function kp(i, t) {
   var e = qt(i), s = !e && so(i), r = !e && !s && ci(i), n = !e && !s && !r && Mh(i), o = e || s || r || n, a = o ? Ng(i.length, String) : [], c = a.length;
   for (var h in i)
@@ -8876,9 +8882,9 @@ function Lp(i, t) {
   var e = typeof i;
   return e == "number" || e == "symbol" || e == "boolean" || i == null || ki(i) ? !0 : Ap.test(i) || !Pp.test(i) || t != null && i in Object(t);
 }
-var ir = Ue(Object, "create");
+var or = Ue(Object, "create");
 function Fp() {
-  this.__data__ = ir ? ir(null) : {}, this.size = 0;
+  this.__data__ = or ? or(null) : {}, this.size = 0;
 }
 function Rp(i) {
   var t = this.has(i) && delete this.__data__[i];
@@ -8887,7 +8893,7 @@ function Rp(i) {
 var Bp = "__lodash_hash_undefined__", Wp = Object.prototype, Xp = Wp.hasOwnProperty;
 function zp(i) {
   var t = this.__data__;
-  if (ir) {
+  if (or) {
     var e = t[i];
     return e === Bp ? void 0 : e;
   }
@@ -8896,12 +8902,12 @@ function zp(i) {
 var Hp = Object.prototype, Yp = Hp.hasOwnProperty;
 function Vp(i) {
   var t = this.__data__;
-  return ir ? t[i] !== void 0 : Yp.call(t, i);
+  return or ? t[i] !== void 0 : Yp.call(t, i);
 }
 var Gp = "__lodash_hash_undefined__";
 function Np(i, t) {
   var e = this.__data__;
-  return this.size += this.has(i) ? 0 : 1, e[i] = ir && t === void 0 ? Gp : t, this;
+  return this.size += this.has(i) ? 0 : 1, e[i] = or && t === void 0 ? Gp : t, this;
 }
 function He(i) {
   var t = -1, e = i == null ? 0 : i.length;
@@ -8955,11 +8961,11 @@ de.prototype.delete = Kp;
 de.prototype.get = Zp;
 de.prototype.has = Jp;
 de.prototype.set = Qp;
-var nr = Ue(Bt, "Map");
+var ar = Ue(Bt, "Map");
 function tm() {
   this.size = 0, this.__data__ = {
     hash: new He(),
-    map: new (nr || de)(),
+    map: new (ar || de)(),
     string: new He()
   };
 }
@@ -9085,7 +9091,7 @@ function xm(i, t) {
   var e = this.__data__;
   if (e instanceof de) {
     var s = e.__data__;
-    if (!nr || s.length < Tm - 1)
+    if (!ar || s.length < Tm - 1)
       return s.push([i, t]), this.size = ++e.size, this;
     e = this.__data__ = new fe(s);
   }
@@ -9127,9 +9133,9 @@ function jm(i, t, e) {
 function xn(i) {
   return jm(i, Ep, Im);
 }
-var wn = Ue(Bt, "DataView"), Cn = Ue(Bt, "Promise"), On = Ue(Bt, "Set"), da = "[object Map]", Em = "[object Object]", fa = "[object Promise]", ga = "[object Set]", pa = "[object WeakMap]", ma = "[object DataView]", Pm = Ne(wn), Am = Ne(nr), Lm = Ne(Cn), Fm = Ne(On), Rm = Ne(Tn), Et = Es;
-(wn && Et(new wn(new ArrayBuffer(1))) != ma || nr && Et(new nr()) != da || Cn && Et(Cn.resolve()) != fa || On && Et(new On()) != ga || Tn && Et(new Tn()) != pa) && (Et = function(i) {
-  var t = Es(i), e = t == Em ? i.constructor : void 0, s = e ? Ne(e) : "";
+var wn = Ue(Bt, "DataView"), Cn = Ue(Bt, "Promise"), On = Ue(Bt, "Set"), da = "[object Map]", Em = "[object Object]", fa = "[object Promise]", ga = "[object Set]", pa = "[object WeakMap]", ma = "[object DataView]", Pm = Ne(wn), Am = Ne(ar), Lm = Ne(Cn), Fm = Ne(On), Rm = Ne(Tn), Et = As;
+(wn && Et(new wn(new ArrayBuffer(1))) != ma || ar && Et(new ar()) != da || Cn && Et(Cn.resolve()) != fa || On && Et(new On()) != ga || Tn && Et(new Tn()) != pa) && (Et = function(i) {
+  var t = As(i), e = t == Em ? i.constructor : void 0, s = e ? Ne(e) : "";
   if (s)
     switch (s) {
       case Pm:
@@ -9213,14 +9219,14 @@ var fv = "[object Map]";
 function gv(i) {
   return Ce(i) && Et(i) == fv;
 }
-var ba = Ts && Ts.isMap, pv = ba ? ro(ba) : gv, mv = "[object Set]";
+var ba = ws && ws.isMap, pv = ba ? ro(ba) : gv, mv = "[object Set]";
 function vv(i) {
   return Ce(i) && Et(i) == mv;
 }
-var _a = Ts && Ts.isSet, yv = _a ? ro(_a) : vv, Eh = "[object Arguments]", bv = "[object Array]", _v = "[object Boolean]", Sv = "[object Date]", Tv = "[object Error]", Ph = "[object Function]", xv = "[object GeneratorFunction]", wv = "[object Map]", Cv = "[object Number]", Ah = "[object Object]", Ov = "[object RegExp]", kv = "[object Set]", Mv = "[object String]", Dv = "[object Symbol]", Iv = "[object WeakMap]", jv = "[object ArrayBuffer]", Ev = "[object DataView]", Pv = "[object Float32Array]", Av = "[object Float64Array]", Lv = "[object Int8Array]", Fv = "[object Int16Array]", Rv = "[object Int32Array]", Bv = "[object Uint8Array]", Wv = "[object Uint8ClampedArray]", Xv = "[object Uint16Array]", zv = "[object Uint32Array]", Y = {};
+var _a = ws && ws.isSet, yv = _a ? ro(_a) : vv, Eh = "[object Arguments]", bv = "[object Array]", _v = "[object Boolean]", Sv = "[object Date]", Tv = "[object Error]", Ph = "[object Function]", xv = "[object GeneratorFunction]", wv = "[object Map]", Cv = "[object Number]", Ah = "[object Object]", Ov = "[object RegExp]", kv = "[object Set]", Mv = "[object String]", Dv = "[object Symbol]", Iv = "[object WeakMap]", jv = "[object ArrayBuffer]", Ev = "[object DataView]", Pv = "[object Float32Array]", Av = "[object Float64Array]", Lv = "[object Int8Array]", Fv = "[object Int16Array]", Rv = "[object Int32Array]", Bv = "[object Uint8Array]", Wv = "[object Uint8ClampedArray]", Xv = "[object Uint16Array]", zv = "[object Uint32Array]", Y = {};
 Y[Eh] = Y[bv] = Y[jv] = Y[Ev] = Y[_v] = Y[Sv] = Y[Pv] = Y[Av] = Y[Lv] = Y[Fv] = Y[Rv] = Y[wv] = Y[Cv] = Y[Ah] = Y[Ov] = Y[kv] = Y[Mv] = Y[Dv] = Y[Bv] = Y[Wv] = Y[Xv] = Y[zv] = !0;
 Y[Tv] = Y[Ph] = Y[Iv] = !1;
-function Gr(i, t, e, s, r, n) {
+function Ur(i, t, e, s, r, n) {
   var o;
   if (o !== void 0)
     return o;
@@ -9246,18 +9252,18 @@ function Gr(i, t, e, s, r, n) {
   if (l)
     return l;
   n.set(i, o), yv(i) ? i.forEach(function(f) {
-    o.add(Gr(f, t, e, f, i, n));
+    o.add(Ur(f, t, e, f, i, n));
   }) : pv(i) && i.forEach(function(f, g) {
-    o.set(g, Gr(f, t, e, g, i, n));
+    o.set(g, Ur(f, t, e, g, i, n));
   });
   var u = xn, d = a ? void 0 : u(i);
   return Fg(d || i, function(f, g) {
-    d && (g = f, f = i[g]), xh(o, g, Gr(f, t, e, g, i, n));
+    d && (g = f, f = i[g]), xh(o, g, Ur(f, t, e, g, i, n));
   }), o;
 }
 var Hv = 1, Yv = 4;
 function Vt(i) {
-  return Gr(i, Hv | Yv);
+  return Ur(i, Hv | Yv);
 }
 var Vv = "__lodash_hash_undefined__";
 function Gv(i) {
@@ -9396,11 +9402,11 @@ function my(i, t, e, s, r, n) {
   }
   return n.delete(i), n.delete(t), p;
 }
-var vy = 1, Ta = "[object Arguments]", xa = "[object Array]", zr = "[object Object]", yy = Object.prototype, wa = yy.hasOwnProperty;
+var vy = 1, Ta = "[object Arguments]", xa = "[object Array]", Yr = "[object Object]", yy = Object.prototype, wa = yy.hasOwnProperty;
 function by(i, t, e, s, r, n) {
   var o = qt(i), a = qt(t), c = o ? xa : Et(i), h = a ? xa : Et(t);
-  c = c == Ta ? zr : c, h = h == Ta ? zr : h;
-  var l = c == zr, u = h == zr, d = c == h;
+  c = c == Ta ? Yr : c, h = h == Ta ? Yr : h;
+  var l = c == Yr, u = h == Yr, d = c == h;
   if (d && ci(i)) {
     if (!ci(t))
       return !1;
@@ -9540,7 +9546,7 @@ const Ay = (i, t) => {
     if (!s.has(r))
       return !1;
   return !0;
-}, xs = (i) => {
+}, Cs = (i) => {
   const { trackItemIds: t, transitionsMap: e, trackItemsMap: s } = i, r = /* @__PURE__ */ new Map();
   Object.values(e).forEach((c) => {
     var u, d;
@@ -9799,7 +9805,7 @@ class Fy {
   deleteTrackItemById(t) {
     const e = t, s = this.getObjects().filter(
       (a) => t.includes(a.id)
-    ), r = rr(this.tracks, e), n = {};
+    ), r = nr(this.tracks, e), n = {};
     Object.keys(this.trackItemsMap).forEach((a) => {
       e.includes(a) || (n[a] = this.trackItemsMap[a]);
     });
@@ -9811,7 +9817,7 @@ class Fy {
   deleteActiveTrackItem() {
     const t = this.getActiveObjects();
     if (!t.length) return !1;
-    const e = t.map((o) => o.id), s = rr(this.tracks, e), r = {};
+    const e = t.map((o) => o.id), s = nr(this.tracks, e), r = {};
     Object.keys(this.trackItemsMap).forEach((o) => {
       e.includes(o) || (r[o] = this.trackItemsMap[o]);
     });
@@ -9904,7 +9910,7 @@ class Fy {
       this.transitionsMap,
       this.positionAfterTransform,
       t
-    ), c = xs({
+    ), c = Cs({
       trackItemIds: this.trackItemIds,
       transitionsMap: a,
       trackItemsMap: this.trackItemsMap
@@ -10015,7 +10021,7 @@ class Ry {
         return n.items.push(t.id), e;
     }
     const r = {
-      id: gr(),
+      id: mr(),
       items: [t.id],
       type: t.type,
       accepts: this.acceptsMap[t.type],
@@ -10207,11 +10213,11 @@ function By(i) {
 function Wy(i) {
   i.off("object:resizing", Rh.bind(i));
 }
-const Us = 100, Ji = 0, Hr = 5, Oa = 3, Xy = 25, ms = {
+const qs = 100, Ji = 0, Vr = 5, Oa = 3, Xy = 25, ms = {
   scrollInterval: null
 };
 function ka(i) {
-  const t = Xy - Oa, e = (Us - i) / Us;
+  const t = Xy - Oa, e = (qs - i) / qs;
   return Oa + t * e;
 }
 function zy(i, t) {
@@ -10219,15 +10225,15 @@ function zy(i, t) {
   const e = t.target, s = e.getBoundingRect();
   ms.scrollInterval = setInterval(() => {
     const r = i.viewportTransform, n = i.getViewportPoint(t.e);
-    if (n.x > i.width - Us && e.left + s.width < i.bounding.width) {
+    if (n.x > i.width - qs && e.left + s.width < i.bounding.width) {
       const o = ka(i.width - n.x);
       e.set("left", e.left + o), i.setViewportPos(r[4] - o, r[5]);
     }
-    if (n.x < Us && e.left > 0 && r[4] < Us) {
+    if (n.x < qs && e.left > 0 && r[4] < qs) {
       const o = ka(n.x);
       e.set("left", e.left - o), i.setViewportPos(r[4] + o, r[5]);
     }
-    n.y > i.height - Ji && e.top + s.height < i.bounding.height + 80 && (e.set("top", e.top + Hr), i.setViewportPos(r[4], r[5] - Hr)), n.y < Ji && e.top > -80 && -r[5] > Ji && (e.set("top", e.top - Hr), i.setViewportPos(r[4], r[5] + Hr)), e.setCoords(), i.requestRenderAll();
+    n.y > i.height - Ji && e.top + s.height < i.bounding.height + 80 && (e.set("top", e.top + Vr), i.setViewportPos(r[4], r[5] - Vr)), n.y < Ji && e.top > -80 && -r[5] > Ji && (e.set("top", e.top - Vr), i.setViewportPos(r[4], r[5] + Vr)), e.setCoords(), i.requestRenderAll();
   }, 16);
 }
 function Hy() {
@@ -10576,7 +10582,7 @@ function Jh(i) {
       top: d.top,
       left: d.left
     };
-    const f = new er({
+    const f = new rr({
       id: `${u.id}-placeholder`,
       left: d.left,
       top: d.top,
@@ -10659,7 +10665,7 @@ T(fs, "type", "TransitionGuide"), T(fs, "ownDefaults", {
   rx: 8,
   ry: 8
 });
-let or = fs;
+let cr = fs;
 const e0 = [
   "text",
   "image",
@@ -10804,7 +10810,7 @@ const h0 = (i, t) => {
         c.push(g);
       }), e.placeholderMovingObjects.forEach((d, f) => {
         const g = d.draggedObject;
-        if (g instanceof or) {
+        if (g instanceof cr) {
           d.visible = !1;
           return;
         }
@@ -11040,7 +11046,7 @@ const S0 = (i) => {
   "caption",
   "text"
 ];
-let et, Ws, ws = [];
+let et, zs, Os = [];
 function j0(i, t) {
   let e = 1 / 0, s = null;
   const r = new _(i.x, i.y);
@@ -11061,7 +11067,7 @@ const E0 = ({
   duration: o
 }) => {
   if (n === "transition")
-    return new or({
+    return new cr({
       top: 0,
       left: 0,
       height: 48,
@@ -11096,7 +11102,7 @@ function cl(i) {
     top: 0,
     type: s,
     duration: r
-  }), et.visible = !1, s === "transition" && (ws = n.getObjects("Transition"), ws.forEach((g) => {
+  }), et.visible = !1, s === "transition" && (Os = n.getObjects("Transition"), Os.forEach((g) => {
     g.visible = !0;
   }));
   const c = Q();
@@ -11127,7 +11133,7 @@ function cl(i) {
       top: p.top,
       left: p.left
     };
-    const m = new er({
+    const m = new rr({
       id: `${g.id}-placeholder`,
       left: p.left,
       top: p.top,
@@ -11145,7 +11151,7 @@ function ll() {
   if (hl(this), ct({ draggingOverTrack: null, isPointerOverHelperTrack: !1 }), !et) return;
   se(ol);
   const i = this;
-  ws.forEach((t) => {
+  Os.forEach((t) => {
     t.strokeDashArray = [], t.setSelected(!1), t.kind === "none" && (t.visible = !1);
   }), i.getObjects("Helper", "Track").forEach((t) => {
     t.setSelected && t.setSelected(!1);
@@ -11153,15 +11159,15 @@ function ll() {
 }
 function ul(i) {
   const t = Q(), e = t.placeholderMovingObjects[0];
-  if (e.visible || (et.visible = !0, e.visible = !0), t.activeObjects[0] instanceof or && (e.visible = !1), !et) return !1;
+  if (e.visible || (et.visible = !0, e.visible = !0), t.activeObjects[0] instanceof cr && (e.visible = !1), !et) return !1;
   i.e.preventDefault();
   const s = this, r = s.getViewportPoint(i.e), n = [...this.viewportTransform];
   et.set({
     left: r.x - 16 - n[4],
     top: r.y - n[5] - et.height / 2
   });
-  const o = j0(r, ws);
-  o && (Ws = o, o.strokeDashArray = [5, 1], o.setSelected(!0)), ws.forEach((c) => {
+  const o = j0(r, Os);
+  o && (zs = o, o.strokeDashArray = [5, 1], o.setSelected(!0)), Os.forEach((c) => {
     c !== o && c.setSelected(!1);
   }), ct({ isDragOver: !0 }), et.setCoords();
   const a = {
@@ -11195,36 +11201,36 @@ function dl(i) {
         const l = Qi(s, this.getObjects("Track"));
         if (s.magnetic) {
           const u = e.initialTrackPoints[e.initialTrackPoints.length - 1], d = G(u, t.tScale);
-          Yr(n, l, d);
-        } else Yr(n, l, c);
+          Gr(n, l, d);
+        } else Gr(n, l, c);
       } else {
         const l = i.viewportPoint, u = [...t.viewportTransform], d = l.y - u[5], g = t.getObjects("Helper").reduce(
           (m, b) => Math.abs(b.top - d) < Math.abs(m.top - d) ? b : m
         ), p = Qi(g, this.getObjects("Track"));
-        Yr(n, p, c, !0);
+        Gr(n, p, c, !0);
       }
     else {
       const h = Qi(
         s,
         this.getObjects("Track")
       );
-      Yr(n, h, c, !0);
+      Gr(n, h, c, !0);
     }
     this.remove(a), this.requestRenderAll();
     return;
   }
   if (et) {
-    if (Ws) {
-      const a = Ws.id, c = jy(n, ["kind", "direction"]);
+    if (zs) {
+      const a = zs.id, c = jy(n, ["kind", "direction"]);
       Object.keys(c).forEach((S) => {
-        S === "kind" ? Ws.kind = c[S] : Ws[S] = c[S];
+        S === "kind" ? zs.kind = c[S] : zs[S] = c[S];
       });
       const h = Vt(this.trackItemIds), l = Vt(this.transitionsMap), u = Vt(this.trackItemsMap);
       l[a] = {
         ...l[a],
         ...c
       };
-      const d = xs({
+      const d = Cs({
         trackItemIds: h,
         transitionsMap: l,
         trackItemsMap: u
@@ -11237,13 +11243,13 @@ function dl(i) {
       this.trackItemsMap = b, this.transitionsMap[a] = {
         ...this.transitionsMap[a],
         ...c
-      }, this.transitionGroups = xs({
+      }, this.transitionGroups = Cs({
         trackItemIds: this.trackItemIds,
         transitionsMap: this.transitionsMap,
         trackItemsMap: this.trackItemsMap
       }), this.updateTrackItemCoords(), this.adjustMagneticTrack(), this.calcBounding(), this.updateTransitions(), this.refreshTrackLayout(), this.updateState({ kind: "add:transition", updateHistory: !0 });
     }
-    ws.forEach((a) => {
+    Os.forEach((a) => {
       a.strokeDashArray = [], a.setSelected(!1), a.kind === "none" && (a.visible = !1);
     }), t.remove(et), t.requestRenderAll(), se(ol);
   }
@@ -11279,32 +11285,32 @@ const P0 = (i) => {
     const h = Math.abs(a.top - r), l = Math.abs(e[o].top - r);
     return h < l ? c : o;
   }, 0);
-}, Yr = (i, t, e, s) => {
+}, Gr = (i, t, e, s) => {
   i.type === "image" ? se(M0, {
     payload: {
       ...i,
-      id: Bs(),
+      id: Xs(),
       display: { from: e }
     },
     options: { trackIndex: t, isNewTrack: s }
   }) : i.type === "video" ? se(k0, {
     payload: {
       ...i,
-      id: Bs(),
+      id: Xs(),
       display: { from: e }
     },
     options: { trackIndex: t, isNewTrack: s }
   }) : i.type === "audio" ? se(O0, {
     payload: {
       ...i,
-      id: Bs(),
+      id: Xs(),
       display: { from: e }
     },
     options: { trackIndex: t, isNewTrack: s }
   }) : i.type === "text" && se(D0, {
     payload: {
       ...i,
-      id: Bs(),
+      id: Xs(),
       display: { from: e }
     },
     options: { trackIndex: t, isNewTrack: s }
@@ -11539,7 +11545,7 @@ class N0 {
       }
     }), this.transitionIds = n, this.transitionsMap = r, this.renderTransitions();
     const o = this.getObjects("Transition");
-    this.updateCachingActiveObjects(o), this.transitionGroups = xs({
+    this.updateCachingActiveObjects(o), this.transitionGroups = Cs({
       trackItemIds: this.trackItemIds,
       transitionsMap: this.transitionsMap,
       trackItemsMap: this.trackItemsMap
@@ -11550,14 +11556,14 @@ function wl(i) {
   const { secondaryTracks: t, primaryTracks: e, primaryPositions: s } = i, { positions: r, trackIndex: n } = s, o = n === -1 ? this.tracks.length : n, [a] = Object.keys(e), c = this.tracks.find(
     (p) => p.id === a
   ), h = e[a], l = {
-    id: Bs(),
+    id: Xs(),
     items: h.objects.map((p) => p.id),
     type: c.type,
     accepts: c.accepts
   }, u = oo(
     Object.keys(t).map((p) => t[p].objects.map((m) => m.id))
   );
-  let d = rr(this.tracks, [
+  let d = nr(this.tracks, [
     ...Object.keys(r),
     ...u
   ]);
@@ -11566,7 +11572,7 @@ function wl(i) {
     const { objects: m, index: b } = t[p], S = this.tracks.find(
       (O) => O.id === p
     ), w = m.map((O) => O.id).filter((O) => !this.transitionIds.includes(O)), k = {
-      id: gr(),
+      id: mr(),
       items: w,
       type: S.type,
       accepts: S.accepts,
@@ -11590,7 +11596,7 @@ function Cl(i) {
   const u = this.tracks.findIndex((b) => b.id === n), d = oo(
     Object.keys(e).map((b) => e[b].objects.map((S) => S.id))
   );
-  let f = rr(this.tracks, [
+  let f = nr(this.tracks, [
     ...Object.keys(o),
     ...d
   ]);
@@ -11610,7 +11616,7 @@ function Cl(i) {
     const { objects: S, index: w } = e[b], k = S.filter((D) => D.type !== "transition").map((D) => D.id), [O] = k, x = this.trackItemsMap[O];
     if (t && x) {
       const D = {
-        id: gr(),
+        id: mr(),
         items: k,
         type: x.type,
         accepts: this.acceptsMap[x.type],
@@ -11638,8 +11644,8 @@ function Ol({
       (n) => n.items.includes(e)
     );
     if (t) {
-      const n = rr(this.tracks, i), o = {
-        id: gr(),
+      const n = nr(this.tracks, i), o = {
+        id: mr(),
         items: [e],
         type: r.type,
         accepts: r.accepts
@@ -11788,10 +11794,10 @@ const sb = (i) => {
     e.forEach((o) => {
       const a = r[o.id];
       if (a)
-        if (o instanceof bt || o instanceof Qs || o instanceof ft) {
-          if (a.type === "video" || a.type === "image" || a.type === "audio") {
+        if (o instanceof bt || o instanceof er || o instanceof ft || o instanceof xs || o instanceof Ts) {
+          if (a.type === "video" || a.type === "image" || a.type === "audio" || a.type === "shape" || a.type === "illustration") {
             const c = n[o.id];
-            if (o.src !== a.details.src && o.setSrc && o.setSrc(a.details.src), a.type === "video" || a.type === "audio") {
+            if (o.src !== a.details.src && o.setSrc && o.setSrc(a.details.src), o instanceof xs && a.type === "shape" && o.backgroundColorDiv !== a.details.backgroundColor && (o.backgroundColorDiv = a.details.backgroundColor, o.setSrc(a.details.src)), o instanceof Ts && a.type === "illustration" && (o.svgString = a.details.svgString, o.setSrc(a.details.src)), a.type === "video" || a.type === "audio") {
               const l = c.display.to - c.display.from, u = I(
                 l,
                 i.scale.zoom,
@@ -11805,10 +11811,10 @@ const sb = (i) => {
               }), o.setCoords();
             }
           }
-        } else (o instanceof tr || o instanceof sr) && (a.type === "text" || a.type === "caption") && o.set({ text: a.details.text });
+        } else (o instanceof sr || o instanceof ir) && (a.type === "text" || a.type === "caption") && o.set({ text: a.details.text });
     }), i.requestRenderAll();
   }), Il = i.state.subscribeToHistory((t) => {
-    i.tracks = t.tracks, i.trackItemsMap = t.trackItemsMap, i.trackItemIds = t.trackItemIds, i.trackItemDetailsMap = t.trackItemDetailsMap, i.transitionIds = t.transitionIds, i.transitionsMap = t.transitionsMap, i.transitionGroups = xs({
+    i.tracks = t.tracks, i.trackItemsMap = t.trackItemsMap, i.trackItemIds = t.trackItemIds, i.trackItemDetailsMap = t.trackItemDetailsMap, i.transitionIds = t.transitionIds, i.transitionsMap = t.transitionsMap, i.transitionGroups = Cs({
       trackItemIds: i.trackItemIds,
       transitionsMap: i.transitionsMap,
       trackItemsMap: i.trackItemsMap
@@ -11827,7 +11833,7 @@ const sb = (i) => {
         };
         i.addTrackItem(a);
       }
-    }), i.trackItemIds = e.trackItemIds, i.activeIds = e.activeIds, i.transitionGroups = xs({
+    }), i.trackItemIds = e.trackItemIds, i.activeIds = e.activeIds, i.transitionGroups = Cs({
       trackItemIds: i.trackItemIds,
       transitionsMap: i.transitionsMap,
       trackItemsMap: i.trackItemsMap
@@ -12181,45 +12187,48 @@ export {
   ft as Audio,
   hb as BOTTOM,
   ze as CENTER,
-  sr as Caption,
+  ir as Caption,
+  oi as Composition,
   $ as Control,
   ol as DRAG_END,
   nl as DRAG_PREFIX,
   x0 as DRAG_START,
   ot as FabricObject,
   Ss as Helper,
-  Qs as Image,
-  ur as LEFT,
+  Ts as Illustration,
+  er as Image,
+  fr as LEFT,
   lb as NONE,
   zi as Pattern,
-  er as Placeholder,
+  rr as Placeholder,
   we as PreviewTrackItem,
-  dr as RIGHT,
+  gr as RIGHT,
   z as Rect,
   J0 as SIZES_MAP,
+  xs as Shape,
   w0 as TIMELINE_BOUNDING_CHANGED,
   al as TIMELINE_PREFIX,
   C0 as TIMELINE_SEEK,
   cb as TOP,
   zt as Template,
-  tr as Text,
+  sr as Text,
   he as Track,
   $t as Transition,
   bt as Video,
   ub as calculateTimelineWidth,
   bn as changeWidth,
   C as classRegistry,
-  Is as controlsUtils,
+  Es as controlsUtils,
   wf as createAudioControls,
   Cf as createMediaControls,
-  js as createResizeControls,
+  Ps as createResizeControls,
   xf as createTemplateControls,
   yh as createTransitionControls,
   nb as default,
   Nt as drawVerticalLine,
-  Bs as generateId,
+  Xs as generateId,
   vh as getDuration,
-  fr as isTransformCentered,
+  pr as isTransformCentered,
   db as resize,
   L as resolveOrigin,
   I as timeMsToUnits,