@snowcone-app/canvas 0.39.2 → 0.40.0

package/dist/{ContextualToolbars-C62As-xY.js → ContextualToolbars-_5zqlcSw.js}

@@ -278,21 +278,21 @@ const nc = oe.forwardRef(
     ...b
   }, m) => {
     var q;
-    const w = s !== void 0 ? Array.isArray(s) ? s : [s] : void 0, [y, v] = oe.useState(w ?? [r]), g = oe.useRef(!1), N = oe.useRef(null), x = oe.useCallback((B) => {
+    const w = s !== void 0 ? Array.isArray(s) ? s : [s] : void 0, [y, x] = oe.useState(w ?? [r]), g = oe.useRef(!1), N = oe.useRef(null), v = oe.useCallback((B) => {
       g.current && B.preventDefault();
     }, []), M = (B) => {
-      g.current = !0, v(B), n == null || n(B);
-    }, E = (B) => {
+      g.current = !0, x(B), n == null || n(B);
+    }, I = (B) => {
       g.current = !1, o == null || o(B);
     }, D = oe.useCallback(() => {
-      N.current || (N.current = x, document.addEventListener("touchmove", x, { passive: !1 }));
-    }, [x]), k = oe.useCallback(() => {
+      N.current || (N.current = v, document.addEventListener("touchmove", v, { passive: !1 }));
+    }, [v]), k = oe.useCallback(() => {
       g.current = !1, N.current && (document.removeEventListener("touchmove", N.current), N.current = null);
     }, []);
     oe.useEffect(() => () => {
       N.current && document.removeEventListener("touchmove", N.current);
     }, []);
-    const I = oe.Children.count(f) > 0, L = (w == null ? void 0 : w.length) ?? ((q = b.defaultValue) == null ? void 0 : q.length) ?? 1, z = oe.useMemo(
+    const E = oe.Children.count(f) > 0, L = (w == null ? void 0 : w.length) ?? ((q = b.defaultValue) == null ? void 0 : q.length) ?? 1, z = oe.useMemo(
       () => ({
         values: w ?? y,
         min: r,
@@ -307,7 +307,7 @@ const nc = oe.forwardRef(
         className: Se("sc:relative sc:flex sc:w-full sc:touch-none sc:select-none sc:items-center", e),
         value: w,
         onValueChange: M,
-        onValueCommit: E,
+        onValueCommit: I,
         onPointerDown: D,
         onPointerUp: k,
         onPointerCancel: k,
@@ -316,7 +316,7 @@ const nc = oe.forwardRef(
         max: c,
         step: i,
         ...b,
-        children: I ? f : /* @__PURE__ */ h(Ve, { children: [
+        children: E ? f : /* @__PURE__ */ h(Ve, { children: [
           /* @__PURE__ */ t(dt.Track, { className: "sc:relative sc:h-2 sc:w-full sc:grow sc:overflow-hidden sc:rounded-full sc:bg-muted", children: /* @__PURE__ */ t(dt.Range, { className: "sc:absolute sc:h-full sc:bg-primary" }) }),
           Array.from({ length: L }).map((B, U) => /* @__PURE__ */ t(
             dt.Thumb,
@@ -379,8 +379,8 @@ const Xs = ({
         y: w.touches[0].clientY
       };
     }, m = (w) => {
-      const y = Math.abs(w.touches[0].clientX - i.current.x), v = Math.abs(w.touches[0].clientY - i.current.y);
-      y > 10 && y > v && w.preventDefault();
+      const y = Math.abs(w.touches[0].clientX - i.current.x), x = Math.abs(w.touches[0].clientY - i.current.y);
+      y > 10 && y > x && w.preventDefault();
     };
     return f.addEventListener("touchstart", b, { passive: !0 }), f.addEventListener("touchmove", m, { passive: !1 }), () => {
       f.removeEventListener("touchstart", b), f.removeEventListener("touchmove", m);
@@ -447,7 +447,7 @@ const be = ({
   className: w,
   variant: y = "inline"
 }) => {
-  const v = Math.round(s);
+  const x = Math.round(s);
   return y === "stacked" ? /* @__PURE__ */ h("div", { className: St("sc:flex sc:flex-col sc:gap-2.5 sc:md:gap-1.5", w), children: [
     /* @__PURE__ */ h("div", { className: "sc:flex sc:items-center sc:justify-between", children: [
       /* @__PURE__ */ t("span", { className: "sc:text-foreground/60 sc:text-base sc:md:text-xs", children: e }),
@@ -455,7 +455,7 @@ const be = ({
         "input",
         {
           type: "number",
-          value: v,
+          value: x,
           onChange: (g) => n(Math.max(r, Math.min(c, Number(g.target.value)))),
           min: r,
           max: c,
@@ -486,7 +486,7 @@ const be = ({
       "input",
       {
         type: "number",
-        value: v,
+        value: x,
         onChange: (g) => n(Math.max(r, Math.min(c, Number(g.target.value)))),
         min: r,
         max: c,
@@ -511,7 +511,7 @@ const be = ({
       }
     ) }),
     /* @__PURE__ */ h("span", { className: "sc:text-foreground sc:text-base sc:md:text-[13px] sc:min-w-[44px] sc:md:min-w-[32px] sc:text-right", children: [
-      v,
+      x,
       f
     ] })
   ] });
@@ -529,16 +529,16 @@ const be = ({
     (y) => {
       if (y.key !== "ArrowLeft" && y.key !== "ArrowRight") return;
       y.preventDefault(), y.stopPropagation();
-      const v = i.current;
-      if (!v) return;
-      const g = Array.from(v.querySelectorAll("button[data-preset-id]")), N = document.activeElement;
-      let x = g.indexOf(N);
-      x === -1 && (x = g.findIndex((k) => k.getAttribute("aria-selected") === "true"), x === -1 && (x = 0));
+      const x = i.current;
+      if (!x) return;
+      const g = Array.from(x.querySelectorAll("button[data-preset-id]")), N = document.activeElement;
+      let v = g.indexOf(N);
+      v === -1 && (v = g.findIndex((k) => k.getAttribute("aria-selected") === "true"), v === -1 && (v = 0));
       let M;
-      y.key === "ArrowRight" ? M = x < g.length - 1 ? x + 1 : 0 : M = x > 0 ? x - 1 : g.length - 1;
-      const E = g[M];
-      E.focus(), f(E);
-      const D = E.getAttribute("data-preset-id");
+      y.key === "ArrowRight" ? M = v < g.length - 1 ? v + 1 : 0 : M = v > 0 ? v - 1 : g.length - 1;
+      const I = g[M];
+      I.focus(), f(I);
+      const D = I.getAttribute("data-preset-id");
       D !== null && n(D);
     },
     [f, n]
@@ -567,8 +567,8 @@ const be = ({
             children: /* @__PURE__ */ t("span", { className: "sc:text-xs sc:text-muted-foreground", children: "Off" })
           }
         ),
-        e.map((y, v) => {
-          const g = s === y.id, N = g || !o && !w && v === 0;
+        e.map((y, x) => {
+          const g = s === y.id, N = g || !o && !w && x === 0;
           return /* @__PURE__ */ t(
             "button",
             {
@@ -636,36 +636,36 @@ var qt = function(e, s, n) {
   var s = e.onMove, n = e.onKey, o = e.onEnd, r = oc(e, ["onMove", "onKey", "onEnd"]), c = V(null), i = Vt(s), f = Vt(n), b = Vt(o), m = V(null), w = V(!1), y = He(function() {
     var M = function(k) {
       wo(k), (Yt(k) ? k.touches.length > 0 : k.buttons > 0) && c.current ? i(Co(c.current, k, m.current)) : (D(!1), b());
-    }, E = function() {
+    }, I = function() {
       D(!1), b();
     };
     function D(k) {
-      var I = w.current, L = qs(c.current), z = k ? L.addEventListener : L.removeEventListener;
-      z(I ? "touchmove" : "mousemove", M), z(I ? "touchend" : "mouseup", E);
+      var E = w.current, L = qs(c.current), z = k ? L.addEventListener : L.removeEventListener;
+      z(E ? "touchmove" : "mousemove", M), z(E ? "touchend" : "mouseup", I);
     }
     return [function(k) {
-      var I = k.nativeEvent, L = c.current;
-      if (L && (wo(I), !function(q, B) {
+      var E = k.nativeEvent, L = c.current;
+      if (L && (wo(E), !function(q, B) {
         return B && !Yt(q);
-      }(I, w.current) && L)) {
-        if (Yt(I)) {
+      }(E, w.current) && L)) {
+        if (Yt(E)) {
           w.current = !0;
-          var z = I.changedTouches || [];
+          var z = E.changedTouches || [];
           z.length && (m.current = z[0].identifier);
         }
-        L.focus(), i(Co(L, I, m.current)), D(!0);
+        L.focus(), i(Co(L, E, m.current)), D(!0);
       }
     }, function(k) {
-      var I = k.which || k.keyCode;
-      I < 37 || I > 40 || (k.preventDefault(), f({ left: I === 39 ? 0.05 : I === 37 ? -0.05 : 0, top: I === 40 ? 0.05 : I === 38 ? -0.05 : 0 }));
+      var E = k.which || k.keyCode;
+      E < 37 || E > 40 || (k.preventDefault(), f({ left: E === 39 ? 0.05 : E === 37 ? -0.05 : 0, top: E === 40 ? 0.05 : E === 38 ? -0.05 : 0 }));
     }, function(k) {
-      var I = k.which || k.keyCode;
-      I >= 37 && I <= 40 && b();
+      var E = k.which || k.keyCode;
+      E >= 37 && E <= 40 && b();
     }, D];
-  }, [f, i, b]), v = y[0], g = y[1], N = y[2], x = y[3];
+  }, [f, i, b]), x = y[0], g = y[1], N = y[2], v = y[3];
   return Z(function() {
-    return x;
-  }, [x]), Fe.createElement("div", xs({}, r, { onTouchStart: v, onMouseDown: v, className: "react-colorful__interactive", ref: c, onKeyDown: g, onKeyUp: N, tabIndex: 0, role: "slider" }));
+    return v;
+  }, [v]), Fe.createElement("div", xs({}, r, { onTouchStart: x, onMouseDown: x, className: "react-colorful__interactive", ref: c, onKeyDown: g, onKeyUp: N, tabIndex: 0, role: "slider" }));
 }), Ps = function(e) {
   return e.filter(Boolean).join(" ");
 }, ac = function(e) {
@@ -737,10 +737,10 @@ function Pr(e, s, n, o) {
     b(function(N) {
       return Object.assign({}, N, g);
     });
-  }, []), v = S(function() {
+  }, []), x = S(function() {
     w.current && (w.current = !1, c(m.current.color));
   }, [c]);
-  return [f, y, v];
+  return [f, y, x];
 }
 var ei = typeof window < "u" ? Mo : Z, ti = function() {
   return typeof __webpack_nonce__ < "u" ? __webpack_nonce__ : void 0;
@@ -757,8 +757,8 @@ var ei = typeof window < "u" ? Mo : Z, ti = function() {
 }, ni = function(e) {
   var s = e.className, n = e.colorModel, o = e.color, r = o === void 0 ? n.defaultColor : o, c = e.onChange, i = e.onChangeEnd, f = oc(e, ["className", "colorModel", "color", "onChange", "onChangeEnd"]), b = V(null);
   si(b);
-  var m = Pr(n, r, c, i), w = m[0], y = m[1], v = m[2], g = Ps(["react-colorful", s]);
-  return Fe.createElement("div", xs({}, f, { ref: b, className: g }), Fe.createElement(Qr, { hsva: w, onChange: y, onChangeEnd: v }), Fe.createElement(Zr, { hue: w.h, onChange: y, onChangeEnd: v, className: "react-colorful__last-control" }));
+  var m = Pr(n, r, c, i), w = m[0], y = m[1], x = m[2], g = Ps(["react-colorful", s]);
+  return Fe.createElement("div", xs({}, f, { ref: b, className: g }), Fe.createElement(Qr, { hsva: w, onChange: y, onChangeEnd: x }), Fe.createElement(Zr, { hue: w.h, onChange: y, onChangeEnd: x, className: "react-colorful__last-control" }));
 }, oi = { defaultColor: "000", toHsva: Vr, fromHsva: function(e) {
   return Yr({ h: e.h, s: e.s, v: e.v, a: 1 });
 }, equal: Jr }, ic = function(e) {
@@ -776,22 +776,22 @@ const Et = Eo(({
   onOpenChange: b,
   embedded: m = !1
 }) => {
-  const [w, y] = T(!1), [v, g] = T(e), [N, x] = T(e), M = V(0), E = V(null), D = V(!1), k = V(s);
+  const [w, y] = T(!1), [x, g] = T(e), [N, v] = T(e), M = V(0), I = V(null), D = V(!1), k = V(s);
   k.current = s;
-  const I = f !== void 0 ? f : w, L = b || y;
+  const E = f !== void 0 ? f : w, L = b || y;
   Z(() => {
-    !D.current && e !== "transparent" && (g(e), x(e));
+    !D.current && e !== "transparent" && (g(e), v(e));
   }, [e]);
   const z = (X) => {
-    D.current = !0, x(X), g(X);
+    D.current = !0, v(X), g(X);
     const K = Date.now(), Y = K - M.current;
-    Y >= 16 ? (k.current({ target: { value: X } }), M.current = K, E.current && (clearTimeout(E.current), E.current = null)) : (E.current && clearTimeout(E.current), E.current = setTimeout(() => {
-      k.current({ target: { value: X } }), M.current = Date.now(), E.current = null, D.current = !1;
+    Y >= 16 ? (k.current({ target: { value: X } }), M.current = K, I.current && (clearTimeout(I.current), I.current = null)) : (I.current && clearTimeout(I.current), I.current = setTimeout(() => {
+      k.current({ target: { value: X } }), M.current = Date.now(), I.current = null, D.current = !1;
     }, 16 - Y));
   }, q = V(N);
   q.current = N, Z(() => {
     const X = () => {
-      E.current && (clearTimeout(E.current), E.current = null, k.current({ target: { value: q.current } })), setTimeout(() => {
+      I.current && (clearTimeout(I.current), I.current = null, k.current({ target: { value: q.current } })), setTimeout(() => {
         D.current = !1;
       }, 50);
     };
@@ -799,7 +799,7 @@ const Et = Eo(({
       window.removeEventListener("pointerup", X), window.removeEventListener("pointercancel", X);
     };
   }, []), Z(() => () => {
-    E.current && clearTimeout(E.current);
+    I.current && clearTimeout(I.current);
   }, []);
   const B = (X) => {
     const K = X.target.value;
@@ -847,7 +847,7 @@ const Et = Eo(({
           id: "hex-input",
           type: "text",
           className: "sc:w-24 sc:rounded-lg sc:border sc:border-divider sc:bg-field sc:px-2 sc:py-1.5 sc:text-sm sc:text-foreground sc:focus:border-primary sc:focus:outline-none",
-          value: v,
+          value: x,
           onChange: B,
           placeholder: "#000000",
           maxLength: 7
@@ -881,7 +881,7 @@ const Et = Eo(({
       )) })
     ] })
   ] });
-  return m ? de : /* @__PURE__ */ h(Qe, { open: I, onOpenChange: L, children: [
+  return m ? de : /* @__PURE__ */ h(Qe, { open: E, onOpenChange: L, children: [
     /* @__PURE__ */ t(Ge, { asChild: !0, children: /* @__PURE__ */ t(
       "button",
       {
@@ -969,15 +969,15 @@ const ri = ({
   removeBackgroundError: m = null,
   onDelete: w,
   cornerRadiusExpanded: y = !1,
-  onCornerRadiusToggle: v,
+  onCornerRadiusToggle: x,
   cropExpanded: g = !1,
   onCropToggle: N,
-  adjustExpanded: x = !1,
+  adjustExpanded: v = !1,
   onAdjustToggle: M,
-  rotationExpanded: E = !1,
+  rotationExpanded: I = !1,
   onRotationToggle: D,
   opacityExpanded: k = !1,
-  onOpacityToggle: I,
+  onOpacityToggle: E,
   strokeExpanded: L = !1,
   onStrokeToggle: z,
   shadowExpanded: q = !1,
@@ -1065,8 +1065,8 @@ const ri = ({
         },
         onMouseLeave: () => Ie(!1),
         tooltip: "Adjust",
-        tooltipDisabled: ye || x,
-        active: x || $e.adjustments,
+        tooltipDisabled: ye || v,
+        active: v || $e.adjustments,
         "data-testid": "toolbar-adjust",
         "aria-label": "Adjust"
       }
@@ -1080,8 +1080,8 @@ const ri = ({
         },
         onMouseLeave: () => p(!1),
         tooltip: "Rotate",
-        tooltipDisabled: ze || E,
-        active: E || $e.rotation
+        tooltipDisabled: ze || I,
+        active: I || $e.rotation
       }
     ),
     /* @__PURE__ */ t(
@@ -1089,7 +1089,7 @@ const ri = ({
       {
         icon: "lucide:blend",
         onClick: () => {
-          R(!0), I == null || I();
+          R(!0), E == null || E();
         },
         onMouseLeave: () => R(!1),
         tooltip: "Transparency",
@@ -1102,7 +1102,7 @@ const ri = ({
       {
         icon: "lucide:square-round-corner",
         onClick: () => {
-          we(!0), v == null || v();
+          we(!0), x == null || x();
         },
         onMouseLeave: () => we(!1),
         tooltip: "Corner Radius",
@@ -1267,15 +1267,15 @@ const ri = ({
   onDelete: m,
   rotationExpanded: w = !1,
   onRotationToggle: y,
-  cornerRadiusExpanded: v = !1,
+  cornerRadiusExpanded: x = !1,
   onCornerRadiusToggle: g,
   transparencyExpanded: N = !1,
-  onTransparencyToggle: x,
+  onTransparencyToggle: v,
   sidesExpanded: M = !1,
-  onSidesToggle: E,
+  onSidesToggle: I,
   pointsExpanded: D = !1,
   onPointsToggle: k,
-  innerRadiusExpanded: I = !1,
+  innerRadiusExpanded: E = !1,
   onInnerRadiusToggle: L,
   colorExpanded: z = !1,
   onColorToggle: q,
@@ -1360,16 +1360,16 @@ const ri = ({
         },
         onMouseLeave: () => ye(!1),
         tooltip: "Corner Radius",
-        tooltipDisabled: Ee || v,
-        active: v || Le.cornerRadius
+        tooltipDisabled: Ee || x,
+        active: x || Le.cornerRadius
       }
     ),
-    e.transformData.shapeType === "polygon" && E && /* @__PURE__ */ t(
+    e.transformData.shapeType === "polygon" && I && /* @__PURE__ */ t(
       j,
       {
         icon: "healthicons:polygon",
         onClick: () => {
-          C(!0), E();
+          C(!0), I();
         },
         onMouseLeave: () => C(!1),
         tooltip: "Sides",
@@ -1399,16 +1399,16 @@ const ri = ({
         },
         onMouseLeave: () => ke(!1),
         tooltip: "Inner Radius",
-        tooltipDisabled: G || I,
-        active: I
+        tooltipDisabled: G || E,
+        active: E
       }
     ),
-    x && /* @__PURE__ */ t(
+    v && /* @__PURE__ */ t(
       j,
       {
         icon: "lucide:blend",
         onClick: () => {
-          ze(!0), x();
+          ze(!0), v();
         },
         onMouseLeave: () => ze(!1),
         tooltip: "Transparency",
@@ -1569,7 +1569,7 @@ const ri = ({
   }, y = (z) => {
     const q = e.clone();
     q.transformData.fillColor = z, s(q), f(!1);
-  }, v = () => {
+  }, x = () => {
     const z = e.clone();
     z.transformData.strokeEnabled = !z.transformData.strokeEnabled, s(z);
   }, g = () => {
@@ -1578,7 +1578,7 @@ const ri = ({
   }, N = (z) => {
     const q = e.clone();
     q.transformData.strokeWidth = z, s(q);
-  }, x = e.transformData.strokeColor || "#000000", M = e.transformData.fillColor || "#3b82f6", E = e.transformData.strokeEnabled ?? !0, D = e.transformData.fillEnabled ?? !1, k = e.transformData.strokeWidth ?? 2, I = e.transformData.closed, L = e.transformData.points.length;
+  }, v = e.transformData.strokeColor || "#000000", M = e.transformData.fillColor || "#3b82f6", I = e.transformData.strokeEnabled ?? !0, D = e.transformData.fillEnabled ?? !1, k = e.transformData.strokeWidth ?? 2, E = e.transformData.closed, L = e.transformData.points.length;
   return /* @__PURE__ */ h("div", { className: "sc:fixed sc:top-3xl sc:left-1/2 sc:-translate-x-1/2 sc:flex sc:items-center sc:gap-md sc:px-xl sc:py-md sc:bg-bg-primary sc:rounded-xl sc:shadow-md", style: { zIndex: "var(--sc-z-dropdown)" }, children: [
     /* @__PURE__ */ h("div", { className: "sc:px-xl sc:text-base sc:text-text-muted sc:border-r sc:border-border-primary", children: [
       /* @__PURE__ */ t("span", { className: "sc:font-semibold", children: "Path" }),
@@ -1586,27 +1586,27 @@ const ri = ({
         L,
         " ",
         L === 1 ? "point" : "points",
-        I && " • Closed"
+        E && " • Closed"
       ] })
     ] }),
     /* @__PURE__ */ h(he, { delay: 300, children: [
       /* @__PURE__ */ t(me, { asChild: !0, children: /* @__PURE__ */ t(
         P,
         {
-          variant: E ? "default" : "ghost",
-          onClick: v,
+          variant: I ? "default" : "ghost",
+          onClick: x,
           className: "sc:px-xl sc:text-base",
           children: "Stroke"
         }
       ) }),
-      /* @__PURE__ */ t(ge, { children: E ? "Disable Stroke" : "Enable Stroke" })
+      /* @__PURE__ */ t(ge, { children: I ? "Disable Stroke" : "Enable Stroke" })
     ] }),
-    E && /* @__PURE__ */ h(Qe, { open: r, onOpenChange: c, children: [
+    I && /* @__PURE__ */ h(Qe, { open: r, onOpenChange: c, children: [
       /* @__PURE__ */ t(Ge, { asChild: !0, children: /* @__PURE__ */ t(
         "button",
         {
           className: "sc:w-8 sc:h-8 sc:p-xs sc:rounded-md sc:border-2 sc:border-border-primary sc:cursor-pointer sc:transition-transform sc:hover:scale-105",
-          style: { background: x },
+          style: { background: v },
           title: "Stroke Color"
         }
       ) }),
@@ -1616,7 +1616,7 @@ const ri = ({
           {
             onClick: () => w(z.color),
             "aria-label": z.name,
-            className: `sc:w-8 sc:h-8 sc:rounded-md sc:cursor-pointer sc:transition-all sc:min-h-0 sc:min-w-0 sc:p-0 ${x === z.color ? "sc:border-2 sc:border-accent-primary sc:scale-110" : "sc:border sc:border-border-primary sc:hover:scale-105"}`,
+            className: `sc:w-8 sc:h-8 sc:rounded-md sc:cursor-pointer sc:transition-all sc:min-h-0 sc:min-w-0 sc:p-0 ${v === z.color ? "sc:border-2 sc:border-accent-primary sc:scale-110" : "sc:border sc:border-border-primary sc:hover:scale-105"}`,
             style: { background: z.color }
           },
           z.color
@@ -1625,14 +1625,14 @@ const ri = ({
           "input",
           {
             type: "color",
-            value: x,
+            value: v,
             onChange: (z) => w(z.target.value),
             className: "sc:w-full sc:h-8 sc:cursor-pointer sc:rounded-md sc:border sc:border-border-primary"
           }
         )
       ] }) })
     ] }),
-    E && /* @__PURE__ */ h(Qe, { open: b, onOpenChange: m, children: [
+    I && /* @__PURE__ */ h(Qe, { open: b, onOpenChange: m, children: [
       /* @__PURE__ */ t(Ge, { asChild: !0, children: /* @__PURE__ */ h(P, { variant: "ghost", className: "sc:px-xl sc:text-base", children: [
         k,
         "px"
@@ -1723,16 +1723,16 @@ const ri = ({
   }, [e]), Z(() => {
     s !== "transparent" && y(s);
   }, [s]);
-  const v = (D) => {
+  const x = (D) => {
     y(D), r(D), o("color");
   }, g = (D) => {
     const k = D.target.value;
     y(k);
-    const I = /^#?([0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})$/, L = k.startsWith("#") ? k : `#${k}`;
-    I.test(L) && (r(L), o("color"));
+    const E = /^#?([0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})$/, L = k.startsWith("#") ? k : `#${k}`;
+    E.test(L) && (r(L), o("color"));
   }, N = () => {
     r("transparent"), o("transparent");
-  }, x = (D) => {
+  }, v = (D) => {
     c(D), o("texture");
   }, M = (D) => {
     if (m(D), D === "color")
@@ -1744,7 +1744,7 @@ const ri = ({
       }
       o("texture");
     }
-  }, E = s === "transparent";
+  }, I = s === "transparent";
   return /* @__PURE__ */ h(Qe, { open: i, onOpenChange: f, children: [
     /* @__PURE__ */ t(Ge, { asChild: !0, children: /* @__PURE__ */ t(P, { variant: i ? "default" : "ghost", "aria-label": "Background", children: /* @__PURE__ */ t(Q, { icon: le.palette, className: "sc:size-[18px]" }) }) }),
     /* @__PURE__ */ t(Ye, { className: "sc:w-auto sc:p-3", children: /* @__PURE__ */ h("div", { className: "sc:flex sc:min-w-[220px] sc:flex-col sc:gap-3", children: [
@@ -1786,7 +1786,7 @@ const ri = ({
           P,
           {
             variant: "ghost",
-            className: `sc:flex sc:w-full sc:cursor-pointer sc:items-center sc:justify-start sc:gap-2 sc:rounded-lg ${E ? "sc:bg-primary/10" : ""}`,
+            className: `sc:flex sc:w-full sc:cursor-pointer sc:items-center sc:justify-start sc:gap-2 sc:rounded-lg ${I ? "sc:bg-primary/10" : ""}`,
             onClick: N,
             children: [
               /* @__PURE__ */ t("div", { className: "transparent-pattern-small sc:h-6 sc:w-6 sc:rounded" }),
@@ -1794,7 +1794,7 @@ const ri = ({
             ]
           }
         ),
-        /* @__PURE__ */ t(ic, { color: E ? "#ffffff" : s, onChange: v }),
+        /* @__PURE__ */ t(ic, { color: I ? "#ffffff" : s, onChange: x }),
         /* @__PURE__ */ h("div", { className: "sc:flex sc:items-center sc:gap-2", children: [
           /* @__PURE__ */ t("label", { htmlFor: "bg-hex-input", className: "sc:text-sm sc:font-medium sc:uppercase sc:text-foreground/60", children: "HEX" }),
           /* @__PURE__ */ t(
@@ -1817,7 +1817,7 @@ const ri = ({
           "button",
           {
             className: `sc:flex sc:items-center sc:justify-center sc:p-1 sc:rounded-lg sc:cursor-pointer sc:transition-all sc:border-2 ${n === D.id ? "sc:border-primary" : "sc:border-transparent sc:hover:border-primary/50"}`,
-            onClick: () => x(D.id),
+            onClick: () => v(D.id),
             "aria-label": D.name,
             children: /* @__PURE__ */ t("img", { src: D.url, alt: D.name, className: "sc:w-full sc:h-full sc:rounded" })
           },
@@ -1925,7 +1925,7 @@ const dc = ({ distressTexture: e, onChange: s }) => {
     e && s({ ...e, maskType: g });
   }, y = (g) => {
     e && s({ ...e, opacity: g[0] });
-  }, v = (g) => {
+  }, x = (g) => {
     e && s({ ...e, inverted: g });
   };
   return /* @__PURE__ */ h(Vo, { open: n, onOpenChange: b, className: "sc:mb-xl", children: [
@@ -1976,7 +1976,7 @@ const dc = ({ distressTexture: e, onChange: s }) => {
         }
       ),
       /* @__PURE__ */ h("label", { className: "sc:flex sc:items-center sc:gap-2 sc:text-sm sc:text-foreground", children: [
-        /* @__PURE__ */ t(Xt, { checked: i, onCheckedChange: (g) => v(g === !0) }),
+        /* @__PURE__ */ t(Xt, { checked: i, onCheckedChange: (g) => x(g === !0) }),
         "Invert Mask"
       ] })
     ] })
@@ -1989,19 +1989,19 @@ const dc = ({ distressTexture: e, onChange: s }) => {
   onDeleteArtboard: r,
   artboardScreenBounds: c
 }) => {
-  const [i, f] = T(!1), [b, m] = T(""), [w, y] = T(!1), v = V(null), g = (B) => {
+  const [i, f] = T(!1), [b, m] = T(""), [w, y] = T(!1), x = V(null), g = (B) => {
     const U = e.clone();
     U.backgroundType = B, n(U);
   }, N = (B) => {
     const U = e.clone();
     U.backgroundColor = B, n(U);
-  }, x = (B) => {
+  }, v = (B) => {
     const U = e.clone();
     U.backgroundTexture = B, n(U);
   }, M = (B) => {
     const U = e.clone();
     U.exportBackground = B, n(U);
-  }, E = (B) => {
+  }, I = (B) => {
     const U = e.clone();
     U.distressTexture = B, n(U);
   }, D = (B) => {
@@ -2009,12 +2009,12 @@ const dc = ({ distressTexture: e, onChange: s }) => {
     U.imageMask = B, n(U);
   }, k = () => {
     f(!0), m(e.name);
-  }, I = () => {
+  }, E = () => {
     b.trim() && o(e.id, b.trim()), f(!1), m("");
   }, L = () => {
     f(!1), m("");
   }, z = (B) => {
-    B.key === "Enter" ? I() : B.key === "Escape" && L();
+    B.key === "Enter" ? E() : B.key === "Escape" && L();
   }, q = () => {
     if (s.length <= 1) {
       alert("Cannot delete the last artboard");
@@ -2023,7 +2023,7 @@ const dc = ({ distressTexture: e, onChange: s }) => {
     e.getElementCount() > 0 && !confirm(`Delete "${e.name}" with ${e.getElementCount()} element(s)?`) || r(e.id);
   };
   return Z(() => {
-    i && v.current && (v.current.focus(), v.current.select());
+    i && x.current && (x.current.focus(), x.current.select());
   }, [i]), /* @__PURE__ */ h(
     Ht,
     {
@@ -2038,7 +2038,7 @@ const dc = ({ distressTexture: e, onChange: s }) => {
           /* @__PURE__ */ t(
             "input",
             {
-              ref: v,
+              ref: x,
               type: "text",
               value: b,
               onChange: (B) => m(B.target.value),
@@ -2047,7 +2047,7 @@ const dc = ({ distressTexture: e, onChange: s }) => {
             }
           ),
           /* @__PURE__ */ h(he, { delay: 300, children: [
-            /* @__PURE__ */ t(me, { asChild: !0, children: /* @__PURE__ */ t(P, { variant: "ghost", onClick: I, "aria-label": "Save", children: /* @__PURE__ */ t(Q, { icon: le.check, className: "sc:size-4" }) }) }),
+            /* @__PURE__ */ t(me, { asChild: !0, children: /* @__PURE__ */ t(P, { variant: "ghost", onClick: E, "aria-label": "Save", children: /* @__PURE__ */ t(Q, { icon: le.check, className: "sc:size-4" }) }) }),
             /* @__PURE__ */ t(ge, { children: "Save" })
           ] }),
           /* @__PURE__ */ h(he, { delay: 300, children: [
@@ -2074,7 +2074,7 @@ const dc = ({ distressTexture: e, onChange: s }) => {
             backgroundTexture: e.backgroundTexture,
             onBackgroundTypeChange: g,
             onColorChange: N,
-            onTextureChange: x
+            onTextureChange: v
           }
         ),
         /* @__PURE__ */ t(Wt, { orientation: "vertical", className: "sc:h-6" }),
@@ -2102,7 +2102,7 @@ const dc = ({ distressTexture: e, onChange: s }) => {
               dc,
               {
                 distressTexture: e.distressTexture,
-                onChange: E
+                onChange: I
               }
             ),
             /* @__PURE__ */ t(
@@ -2134,7 +2134,7 @@ const $t = bs("FontBrowserDrawer"), fi = ({
   previewText: i,
   elements: f
 }) => {
-  const b = V(null), [m, w] = T(""), [y, v] = T("all"), [g, N] = T(0), [x, M] = T("name"), [E, D] = T("medium"), [k, I] = T("masonry"), [L, z] = T(/* @__PURE__ */ new Set()), q = V([]), B = V(!1), { onFontUpload: U } = Lo(), se = ur(
+  const b = V(null), [m, w] = T(""), [y, x] = T("all"), [g, N] = T(0), [v, M] = T("name"), [I, D] = T("medium"), [k, E] = T("masonry"), [L, z] = T(/* @__PURE__ */ new Set()), q = V([]), B = V(!1), { onFontUpload: U } = Lo(), se = ur(
     _s.subscribe,
     _s.list,
     _s.list
@@ -2191,7 +2191,7 @@ const $t = bs("FontBrowserDrawer"), fi = ({
       case "large":
         return 3;
     }
-  })(E);
+  })(I);
   Z(() => {
     const p = "font-preview-style";
     if (!document.getElementById(p)) {
@@ -2241,14 +2241,14 @@ const $t = bs("FontBrowserDrawer"), fi = ({
   Z(() => {
     o && setTimeout(() => {
       b.current && b.current.scrollIntoView({ behavior: "smooth", block: "center" });
-    }, 150), o || (w(""), v("all"), Ze.clearPreviewFonts(), z(/* @__PURE__ */ new Set()));
+    }, 150), o || (w(""), x("all"), Ze.clearPreviewFonts(), z(/* @__PURE__ */ new Set()));
   }, [o, e]), Z(() => {
     if (e && !L.has(e)) {
       const C = Ze.getAllFonts().find((R) => R.name === e);
       C && xe(C, !0);
     }
   }, [e, L, g]), Z(() => {
-    m.trim() && v("all");
+    m.trim() && x("all");
   }, [m]);
   const we = async (p) => {
     const R = Ze.getAllFonts().find(($) => $.name === p);
@@ -2276,8 +2276,8 @@ const $t = bs("FontBrowserDrawer"), fi = ({
         return ve.observe(R.current), () => ve.disconnect();
       }, [p.name, G]);
       let ke = "", H = !1;
-      x === "name" ? (ke = p.name, H = !1) : x === "preview" ? (ke = i || p.name, H = C) : (ke = i || p.name, H = !0);
-      const ae = x === "preview" && !H, Je = /* @__PURE__ */ h(
+      v === "name" ? (ke = p.name, H = !1) : v === "preview" ? (ke = i || p.name, H = C) : (ke = i || p.name, H = !0);
+      const ae = v === "preview" && !H, Je = /* @__PURE__ */ h(
         Ht,
         {
           ref: (ve) => {
@@ -2495,7 +2495,7 @@ const $t = bs("FontBrowserDrawer"), fi = ({
             /* @__PURE__ */ t(
               st,
               {
-                value: E,
+                value: I,
                 onValueChange: (p) => D(p),
                 children: /* @__PURE__ */ t(st.ListContainer, { children: /* @__PURE__ */ h(st.List, { "aria-label": "Card size", children: [
                   /* @__PURE__ */ h(st.Tab, { id: "small", className: "sc:text-xs sc:font-semibold", "aria-label": "Small card size", children: [
@@ -2520,16 +2520,16 @@ const $t = bs("FontBrowserDrawer"), fi = ({
                 onClick: () => {
                   M((p) => p === "both" ? "name" : p === "name" ? "preview" : "both");
                 },
-                "aria-label": x === "both" ? "Show font name only" : x === "name" ? "Show preview only" : "Show preview with font name",
+                "aria-label": v === "both" ? "Show font name only" : v === "name" ? "Show preview only" : "Show preview with font name",
                 className: "sc:h-10 sc:w-10 sc:p-0",
-                children: x === "both" ? /* @__PURE__ */ t(Q, { icon: "lucide:credit-card", className: "sc:size-[22px]" }) : x === "name" ? /* @__PURE__ */ t(Q, { icon: "lucide:type", className: "sc:size-[22px]" }) : /* @__PURE__ */ t(Q, { icon: "lucide:text-cursor", className: "sc:size-[22px]" })
+                children: v === "both" ? /* @__PURE__ */ t(Q, { icon: "lucide:credit-card", className: "sc:size-[22px]" }) : v === "name" ? /* @__PURE__ */ t(Q, { icon: "lucide:type", className: "sc:size-[22px]" }) : /* @__PURE__ */ t(Q, { icon: "lucide:text-cursor", className: "sc:size-[22px]" })
               }
             ),
             /* @__PURE__ */ t(
               P,
               {
                 variant: "secondary",
-                onClick: () => I(k === "grid" ? "masonry" : "grid"),
+                onClick: () => E(k === "grid" ? "masonry" : "grid"),
                 "aria-label": k === "grid" ? "Switch to masonry view" : "Switch to grid view",
                 className: "sc:h-10 sc:w-10 sc:p-0",
                 children: k === "grid" ? /* @__PURE__ */ t(Q, { icon: "lucide:grid-2x2", className: "sc:size-[22px]" }) : /* @__PURE__ */ t(Q, { icon: "lucide:grid-3x3", className: "sc:size-[22px]" })
@@ -2555,7 +2555,7 @@ const $t = bs("FontBrowserDrawer"), fi = ({
                 {
                   size: "sm",
                   variant: y === p ? "default" : "secondary",
-                  onClick: () => v(p),
+                  onClick: () => x(p),
                   className: `sc:shrink-0 ${y === p ? "" : "sc:hover:brightness-95"}`,
                   children: C
                 },
@@ -2592,7 +2592,7 @@ const $t = bs("FontBrowserDrawer"), fi = ({
                           "--font-preview": `"${p}", sans-serif`,
                           fontSize: `${15 * W}px`
                         },
-                        children: x === "name" ? p : i || p
+                        children: v === "name" ? p : i || p
                       }
                     )
                   },
@@ -2674,16 +2674,16 @@ const $t = bs("FontBrowserDrawer"), fi = ({
             id: `control-${c.key}`,
             checked: i,
             onCheckedChange: (y) => {
-              const v = e.clone();
-              v.transformData[c.key] = y, n(v);
+              const x = e.clone();
+              x.transformData[c.key] = y, n(x);
             }
           }
         ),
         /* @__PURE__ */ t(Me, { htmlFor: `control-${c.key}`, children: c.label })
       ] }, c.key);
     const f = typeof i == "number" && !isNaN(i) ? i : c.defaultInternalValue ?? 0, b = o[c.key] !== void 0 ? o[c.key] : f, m = c.toSlider ? c.toSlider(b) : b, w = (y) => {
-      const v = c.fromSlider ? c.fromSlider(y) : y;
-      return typeof v != "number" || isNaN(v) ? (pi.warn("Invalid internalValue:", v, "for control:", c.key), "0") : c.toDisplay ? c.toDisplay(v) : "isPercentage" in c && c.isPercentage ? `${(v * 100).toFixed(0)}%` : v.toFixed(1);
+      const x = c.fromSlider ? c.fromSlider(y) : y;
+      return typeof x != "number" || isNaN(x) ? (pi.warn("Invalid internalValue:", x, "for control:", c.key), "0") : c.toDisplay ? c.toDisplay(x) : "isPercentage" in c && c.isPercentage ? `${(x * 100).toFixed(0)}%` : x.toFixed(1);
     };
     return /* @__PURE__ */ h("div", { className: "sc:flex sc:flex-col sc:gap-sm", children: [
       /* @__PURE__ */ h("div", { className: "sc:flex sc:justify-between", children: [
@@ -2695,14 +2695,14 @@ const $t = bs("FontBrowserDrawer"), fi = ({
         {
           value: [m],
           onValueChange: (y) => {
-            const v = y[0], g = c.fromSlider ? c.fromSlider(v) : v;
+            const x = y[0], g = c.fromSlider ? c.fromSlider(x) : x;
             r((N) => ({ ...N, [c.key]: g }));
           },
           onChangeEnd: (y) => {
-            const v = y[0], g = e.clone();
-            g.transformData[c.key] = c.fromSlider ? c.fromSlider(v) : v, n(g), r((N) => {
-              const x = { ...N };
-              return delete x[c.key], x;
+            const x = y[0], g = e.clone();
+            g.transformData[c.key] = c.fromSlider ? c.fromSlider(x) : x, n(g), r((N) => {
+              const v = { ...N };
+              return delete v[c.key], v;
             });
           },
           min: 0,
@@ -2722,7 +2722,7 @@ const $t = bs("FontBrowserDrawer"), fi = ({
 }) => {
   const [c, i] = T(!1), f = o !== void 0 ? o : c, b = r || i, m = e.transformType, w = Nr(m), y = Tr.filter(
     (g) => g.Component && g.id !== "image" && g.id !== "group" && g.id !== "shape" && g.id !== "path"
-  ), v = (g) => {
+  ), x = (g) => {
     g !== m && s(g);
   };
   return /* @__PURE__ */ h(Qe, { open: f, onOpenChange: b, children: [
@@ -2730,7 +2730,7 @@ const $t = bs("FontBrowserDrawer"), fi = ({
     /* @__PURE__ */ t(Ye, { align: "start", className: "sc:w-[280px] sc:p-0", maxZIndex: !0, children: /* @__PURE__ */ h("div", { className: "sc:space-y-4 sc:p-6", children: [
       /* @__PURE__ */ h("div", { className: "sc:space-y-2", children: [
         /* @__PURE__ */ t(Me, { children: "Text Effect" }),
-        /* @__PURE__ */ h($r, { value: m, onValueChange: v, children: [
+        /* @__PURE__ */ h($r, { value: m, onValueChange: x, children: [
           /* @__PURE__ */ t(qo, { children: /* @__PURE__ */ t(jr, { placeholder: "Select effect" }) }),
           /* @__PURE__ */ t(Zo, { style: { zIndex: 2147483647 }, children: y.map((g) => /* @__PURE__ */ t(Qo, { value: g.id, children: g.label }, g.id)) })
         ] })
@@ -2906,15 +2906,15 @@ function Ti({
   onRotationToggle: m,
   onOpacityToggle: w,
   onFontSizeToggle: y,
-  strokeExpanded: v = !1,
+  strokeExpanded: x = !1,
   onStrokeToggle: g,
   shadowExpanded: N = !1,
-  onShadowToggle: x,
+  onShadowToggle: v,
   blendModeExpanded: M = !1,
-  onBlendModeToggle: E,
+  onBlendModeToggle: I,
   knockoutExpanded: D = !1,
   onKnockoutToggle: k,
-  distressTextureExpanded: I = !1,
+  distressTextureExpanded: E = !1,
   onDistressTextureToggle: L,
   imageMaskExpanded: z = !1,
   onImageMaskToggle: q,
@@ -2993,8 +2993,8 @@ function Ti({
         },
         onMouseLeave: () => Ce(!1),
         tooltip: "Stroke",
-        tooltipDisabled: xe || v,
-        active: v || p.stroke
+        tooltipDisabled: xe || x,
+        active: x || p.stroke
       }
     ),
     /* @__PURE__ */ t(
@@ -3023,12 +3023,12 @@ function Ti({
         active: (b == null ? void 0 : b.type) === "opacity" || p.opacity
       }
     ),
-    x && /* @__PURE__ */ t(
+    v && /* @__PURE__ */ t(
       j,
       {
         icon: "gravity-ui:square-dashed-circle",
         onClick: () => {
-          G(!0), x();
+          G(!0), v();
         },
         onMouseLeave: () => G(!1),
         tooltip: "Shadow",
@@ -3036,12 +3036,12 @@ function Ti({
         active: N || p.shadow
       }
     ),
-    E && /* @__PURE__ */ t(
+    I && /* @__PURE__ */ t(
       j,
       {
         icon: "gravity-ui:circles-intersection",
         onClick: () => {
-          H(!0), E();
+          H(!0), I();
         },
         onMouseLeave: () => H(!1),
         tooltip: "Blend Mode",
@@ -3071,8 +3071,8 @@ function Ti({
         },
         onMouseLeave: () => We(!1),
         tooltip: "Distress Texture",
-        tooltipDisabled: ve || I,
-        active: I || p.distress
+        tooltipDisabled: ve || E,
+        active: E || p.distress
       }
     ),
     q && /* @__PURE__ */ t(
@@ -3141,22 +3141,22 @@ function Si(e, s, n, o) {
       r = { radius: n * 1.2 * 2, scale: 1 }, c = o.x, i = o.y;
       break;
     case "custom":
-      const w = 200, y = n * e.text.length * 0.6, v = Math.max(y, w);
-      r = { width: v };
+      const w = 200, y = n * e.text.length * 0.6, x = Math.max(y, w);
+      r = { width: x };
       const g = n * 1.2;
-      c = o.x - v / 2, i = o.y - g / 2;
+      c = o.x - x / 2, i = o.y - g / 2;
       break;
     case "arch":
-      const N = 200, x = n * e.text.length * 0.6;
+      const N = 200, v = n * e.text.length * 0.6;
       r = {
-        width: Math.max(x, N),
+        width: Math.max(v, N),
         archHeight: Mr.archHeight
       }, c = o.x, i = o.y;
       break;
     case "wave":
-      const M = 200, E = n * e.text.length * 0.6;
+      const M = 200, I = n * e.text.length * 0.6;
       r = {
-        width: Math.max(E, M),
+        width: Math.max(I, M),
         amplitude: mo.amplitude,
         frequency: mo.frequency
       }, c = o.x, i = o.y;
@@ -3170,9 +3170,9 @@ function Si(e, s, n, o) {
       }, c = o.x, i = o.y;
       break;
     case "lean":
-      const I = 200, L = n * e.text.length * 0.6;
+      const E = 200, L = n * e.text.length * 0.6;
       r = {
-        width: Math.max(L, I),
+        width: Math.max(L, E),
         leanAmount: Dr.leanAmount
       }, c = o.x, i = o.y;
       break;
@@ -3197,11 +3197,11 @@ function Di(e = {}) {
           r(p);
     },
     [n, o, r]
-  ), f = c == null ? void 0 : c.id, b = V(void 0), [m, w] = T(32), [y, v] = T("#333333"), [g, N] = T("Arial"), [x, M] = T("center");
+  ), f = c == null ? void 0 : c.id, b = V(void 0), [m, w] = T(32), [y, x] = T("#333333"), [g, N] = T("Arial"), [v, M] = T("center");
   Z(() => {
-    f !== b.current && (b.current = f, c && c instanceof je && (c.transformType === "circle" && "getEffectiveFontSize" in c ? w(Math.round(c.getEffectiveFontSize())) : c.fontSize !== void 0 && w(Math.round(c.fontSize)), c.color !== void 0 && v(c.color), c.fontFamily !== void 0 && N(c.fontFamily), M(c.textAlign || "center")));
+    f !== b.current && (b.current = f, c && c instanceof je && (c.transformType === "circle" && "getEffectiveFontSize" in c ? w(Math.round(c.getEffectiveFontSize())) : c.fontSize !== void 0 && w(Math.round(c.fontSize)), c.color !== void 0 && x(c.color), c.fontFamily !== void 0 && N(c.fontFamily), M(c.textAlign || "center")));
   }, [f, c]);
-  const E = m, D = y, k = g, I = x, L = c instanceof je ? c : null, z = (L == null ? void 0 : L.letterSpacing) ?? 0, q = (L == null ? void 0 : L.lineHeight) ?? 1.2, B = (L == null ? void 0 : L.bold) ?? !1, U = (L == null ? void 0 : L.italic) ?? !1, se = (L == null ? void 0 : L.underline) ?? !1, J = (L == null ? void 0 : L.letterCase) ?? "none", ee = S(
+  const I = m, D = y, k = g, E = v, L = c instanceof je ? c : null, z = (L == null ? void 0 : L.letterSpacing) ?? 0, q = (L == null ? void 0 : L.lineHeight) ?? 1.2, B = (L == null ? void 0 : L.bold) ?? !1, U = (L == null ? void 0 : L.italic) ?? !1, se = (L == null ? void 0 : L.underline) ?? !1, J = (L == null ? void 0 : L.letterCase) ?? "none", ee = S(
     (p) => {
       if (w(p), !c || !(c instanceof je)) return;
       const C = c.clone();
@@ -3217,7 +3217,7 @@ function Di(e = {}) {
     [c, i]
   ), X = S(
     (p) => {
-      if (v(p), !c || !(c instanceof je)) return;
+      if (x(p), !c || !(c instanceof je)) return;
       const C = c.clone();
       C.color = p, C.richText && C.richText.clearStyleProperty("color"), i(C);
     },
@@ -3237,10 +3237,10 @@ function Di(e = {}) {
     [ee, s]
   ), ue = S(
     (p) => {
-      const C = E + p;
+      const C = I + p;
       C >= 8 && C <= 500 && Y(C);
     },
-    [E, Y]
+    [I, Y]
   ), A = S(
     (p) => {
       var R;
@@ -3305,16 +3305,16 @@ function Di(e = {}) {
     const p = J === "uppercase" ? "none" : "uppercase", C = c.clone();
     C.letterCase = p, i(C);
   }, [J, c, i]), Ee = S(() => J === "uppercase", [J]), ye = S(() => {
-    const p = ["left", "center", "right"], C = p.indexOf(I), R = p[(C + 1) % p.length];
+    const p = ["left", "center", "right"], C = p.indexOf(E), R = p[(C + 1) % p.length];
     K(R);
-  }, [I, K]), Ie = S(() => {
+  }, [E, K]), Ie = S(() => {
     var p, C, R, $;
     if ((C = (p = s == null ? void 0 : s.current) == null ? void 0 : p.isEditingText) != null && C.call(p)) {
       const G = ($ = (R = s.current).getSelectionStyle) == null ? void 0 : $.call(R);
       if (G)
         return {
           fontFamily: G.fontFamily ?? k,
-          fontSize: G.fontSize ?? E,
+          fontSize: G.fontSize ?? I,
           color: G.color ?? D,
           bold: G.bold ?? B,
           italic: G.italic ?? U,
@@ -3323,13 +3323,13 @@ function Di(e = {}) {
     }
     return {
       fontFamily: k,
-      fontSize: E,
+      fontSize: I,
       color: D,
       bold: B,
       italic: U,
       underline: se
     };
-  }, [s, k, E, D, B, U, se]), ze = S(
+  }, [s, k, I, D, B, U, se]), ze = S(
     (p) => {
       if (!c) return;
       const C = Er(p);
@@ -3340,10 +3340,10 @@ function Di(e = {}) {
     [c, i]
   );
   return {
-    fontSize: E,
+    fontSize: I,
     fontColor: D,
     fontFamily: k,
-    textAlign: I,
+    textAlign: E,
     bold: B,
     italic: U,
     underline: se,
@@ -3368,32 +3368,32 @@ function Di(e = {}) {
 }
 const Mi = bs("useLayerPreview");
 function Ei(e) {
-  var w, y, v, g, N;
+  var w, y, x, g, N;
   const { element: s, size: n = 148, backgroundColor: o = "transparent", enabled: r = !0 } = e, [c, i] = T(null), [f, b] = T(!1), m = V(null);
   return Z(() => {
     if (!r) {
       i(null), b(!1);
       return;
     }
-    let x = !0;
+    let v = !0;
     return b(!0), m.current && clearTimeout(m.current), m.current = setTimeout(() => {
       (async () => {
         try {
           if (s instanceof ot && s.imageUrl) {
             const D = new Image();
-            if (D.crossOrigin = "anonymous", await new Promise((k, I) => {
-              D.onload = () => k(), D.onerror = () => I(new Error("Failed to load image")), D.src = s.imageUrl;
-            }), !x) return;
+            if (D.crossOrigin = "anonymous", await new Promise((k, E) => {
+              D.onload = () => k(), D.onerror = () => E(new Error("Failed to load image")), D.src = s.imageUrl;
+            }), !v) return;
           }
-          const E = bo(s, {
+          const I = bo(s, {
             width: n,
             height: n,
             padding: 8,
             backgroundColor: o
           });
-          x && (i(E), b(!1));
-        } catch (E) {
-          if (Mi.warn("Failed to generate preview:", E), x) {
+          v && (i(I), b(!1));
+        } catch (I) {
+          if (Mi.warn("Failed to generate preview:", I), v) {
             const D = bo(s, {
               width: n,
               height: n,
@@ -3405,7 +3405,7 @@ function Ei(e) {
         }
       })();
     }, 50), () => {
-      x = !1, m.current && clearTimeout(m.current);
+      v = !1, m.current && clearTimeout(m.current);
     };
   }, [
     s.id,
@@ -3427,7 +3427,7 @@ function Ei(e) {
     s instanceof ot ? s.isCropping : null,
     s instanceof $s ? (w = s.transformData) == null ? void 0 : w.fillColor : null,
     s instanceof $s ? (y = s.transformData) == null ? void 0 : y.fill : null,
-    s instanceof _o ? (g = (v = s.transformData) == null ? void 0 : v.points) == null ? void 0 : g.length : null,
+    s instanceof _o ? (g = (x = s.transformData) == null ? void 0 : x.points) == null ? void 0 : g.length : null,
     s instanceof Dt ? (N = s.children) == null ? void 0 : N.length : null
   ]), { previewUrl: c, isLoading: f };
 }
@@ -3581,14 +3581,14 @@ function Fi(e, s) {
       { mode: s, count: e.length, min: ps }
     );
   const n = s === "horizontal", o = [...e].sort(
-    (y, v) => n ? y.bbox.x + y.bbox.width / 2 - (v.bbox.x + v.bbox.width / 2) : y.bbox.y + y.bbox.height / 2 - (v.bbox.y + v.bbox.height / 2)
+    (y, x) => n ? y.bbox.x + y.bbox.width / 2 - (x.bbox.x + x.bbox.width / 2) : y.bbox.y + y.bbox.height / 2 - (x.bbox.y + x.bbox.height / 2)
   ), r = o[0], c = o[o.length - 1], i = n ? c.bbox.x + c.bbox.width - r.bbox.x : c.bbox.y + c.bbox.height - r.bbox.y, f = o.reduce(
-    (y, v) => y + (n ? v.bbox.width : v.bbox.height),
+    (y, x) => y + (n ? x.bbox.width : x.bbox.height),
     0
   ), b = (i - f) / (o.length - 1), m = [];
   let w = n ? r.bbox.x : r.bbox.y;
   for (const y of o) {
-    const v = n ? y.bbox.x : y.bbox.y, g = w - v;
+    const x = n ? y.bbox.x : y.bbox.y, g = w - x;
     g !== 0 && m.push({
       id: y.id,
       x: y.x + (n ? g : 0),
@@ -3601,17 +3601,17 @@ function pc() {
   const { elements: e, multiSelection: s, selectedElement: n, artboardManager: o, executeCommandBatch: r, setElements: c } = ms(), i = He(() => (s.length > 0 ? e.filter((y) => s.includes(y.id)) : n ? [n] : []).filter((y) => !y.locked), [e, s, n]), f = S(
     (w) => {
       if (w.length === 0) return;
-      const y = new Map(i.map((g) => [g.id, g])), v = w.flatMap((g) => {
+      const y = new Map(i.map((g) => [g.id, g])), x = w.flatMap((g) => {
         const N = y.get(g.id);
         if (!N) return [];
-        const x = N.clone();
-        x.x = g.x, x.y = g.y;
-        const M = (E) => {
-          c((D) => D.map((k) => k.id === E.id ? E : k));
+        const v = N.clone();
+        v.x = g.x, v.y = g.y;
+        const M = (I) => {
+          c((D) => D.map((k) => k.id === I.id ? I : k));
         };
-        return [{ execute: () => M(x), undo: () => M(N) }];
+        return [{ execute: () => M(v), undo: () => M(N) }];
       });
-      r(v);
+      r(x);
     },
     [i, r, c]
   ), b = S(
@@ -3622,22 +3622,22 @@ function pc() {
         y: g.y,
         bbox: g.getBoundingBox()
       }));
-      let v = y.length >= Li ? fc(y) : null;
-      if (!v) {
+      let x = y.length >= Li ? fc(y) : null;
+      if (!x) {
         const g = o.getActiveArtboard();
         if (!g) return;
-        v = { x: g.x, y: g.y, width: g.width, height: g.height };
+        x = { x: g.x, y: g.y, width: g.width, height: g.height };
       }
-      f(Ai(y, w, v));
+      f(Ai(y, w, x));
     },
     [i, o, f]
   ), m = S(
     (w) => {
-      const y = i.map((v) => ({
-        id: v.id,
-        x: v.x,
-        y: v.y,
-        bbox: v.getBoundingBox()
+      const y = i.map((x) => ({
+        id: x.id,
+        x: x.x,
+        y: x.y,
+        bbox: x.getBoundingBox()
       }));
       f(Fi(y, w));
     },
@@ -3666,19 +3666,19 @@ const hc = [
   artboardScreenBounds: s,
   partAttr: n
 }) => {
-  const { elements: o, multiSelection: r, artboardManager: c, canvasRef: i, canvasEditorRef: f } = ms(), { panOffset: b } = Ro(), { canAlign: m, canDistribute: w, align: y, distribute: v } = pc(), g = V(null), [N, x] = T(null), M = He(() => {
-    const k = o.filter((I) => r.includes(I.id)).map((I) => ({ id: I.id, x: I.x, y: I.y, bbox: I.getBoundingBox() }));
+  const { elements: o, multiSelection: r, artboardManager: c, canvasRef: i, canvasEditorRef: f } = ms(), { panOffset: b } = Ro(), { canAlign: m, canDistribute: w, align: y, distribute: x } = pc(), g = V(null), [N, v] = T(null), M = He(() => {
+    const k = o.filter((E) => r.includes(E.id)).map((E) => ({ id: E.id, x: E.x, y: E.y, bbox: E.getBoundingBox() }));
     return fc(k);
   }, [o, r]);
   if (Z(() => {
     if (e !== "floating") return;
     if (!M) {
-      x(null);
+      v(null);
       return;
     }
     const k = () => {
       var A, te, De, W;
-      const I = ((A = g.current) == null ? void 0 : A.offsetWidth) || 0, L = ((te = g.current) == null ? void 0 : te.offsetHeight) || 48, z = c.getActiveArtboard(), q = (z == null ? void 0 : z.x) || 0, B = (z == null ? void 0 : z.y) || 0, U = ((W = (De = f == null ? void 0 : f.current) == null ? void 0 : De.getZoom) == null ? void 0 : W.call(De)) || 1, se = i == null ? void 0 : i.current;
+      const E = ((A = g.current) == null ? void 0 : A.offsetWidth) || 0, L = ((te = g.current) == null ? void 0 : te.offsetHeight) || 48, z = c.getActiveArtboard(), q = (z == null ? void 0 : z.x) || 0, B = (z == null ? void 0 : z.y) || 0, U = ((W = (De = f == null ? void 0 : f.current) == null ? void 0 : De.getZoom) == null ? void 0 : W.call(De)) || 1, se = i == null ? void 0 : i.current;
       let J, ee;
       if (se) {
         const xe = se.getBoundingClientRect();
@@ -3686,17 +3686,17 @@ const hc = [
       } else s ? (J = s.left + (M.x - q) * U, ee = s.top + (M.y - B) * U) : (J = window.innerWidth / 2 - M.width * U / 2, ee = window.innerHeight / 2 - M.height * U / 2);
       const de = M.width * U, X = M.height * U, K = 12;
       let Y = ee - L - K, ue = J + de / 2;
-      if (I > 0) {
-        const Ce = I / 2 + 20, we = window.innerWidth - I / 2 - 20;
+      if (E > 0) {
+        const Ce = E / 2 + 20, we = window.innerWidth - E / 2 - 20;
         ue = Math.max(Ce, Math.min(we, ue));
       }
-      Y < 10 && (Y = ee + X + K), Y = Math.min(Y, window.innerHeight - L - 10), Y = Math.max(10, Y), x({ top: Y, left: ue });
+      Y < 10 && (Y = ee + X + K), Y = Math.min(Y, window.innerHeight - L - 10), Y = Math.max(10, Y), v({ top: Y, left: ue });
     };
     return k(), window.addEventListener("resize", k), window.addEventListener("scroll", k, { passive: !0, capture: !0 }), () => {
       window.removeEventListener("resize", k), window.removeEventListener("scroll", k, { capture: !0 });
     };
   }, [e, M, c, i, f, s, b]), !m || r.length === 0) return null;
-  const E = e === "embedded" ? { borderRadius: "9999px", position: "static", display: "flex", justifyContent: "flex-start" } : N ? {
+  const I = e === "embedded" ? { borderRadius: "9999px", position: "static", display: "flex", justifyContent: "flex-start" } : N ? {
     top: `${N.top}px`,
     left: `${N.left}px`,
     position: "fixed",
@@ -3719,23 +3719,23 @@ const hc = [
       "data-testid": "multi-selection-toolbar",
       "data-mode": e,
       "data-preserve-selection": !0,
-      style: E,
+      style: I,
       children: /* @__PURE__ */ h("div", { className: "sc-toolbar-items", children: [
-        hc.map(({ mode: k, icon: I, label: L }) => /* @__PURE__ */ t(
+        hc.map(({ mode: k, icon: E, label: L }) => /* @__PURE__ */ t(
           j,
           {
-            icon: I,
+            icon: E,
             onClick: () => y(k),
             tooltip: L,
             "data-testid": `align-${k}`
           },
           k
         )),
-        w && Oi.map(({ mode: k, icon: I, label: L }) => /* @__PURE__ */ t(
+        w && Oi.map(({ mode: k, icon: E, label: L }) => /* @__PURE__ */ t(
           j,
           {
-            icon: I,
-            onClick: () => v(k),
+            icon: E,
+            onClick: () => x(k),
             tooltip: L,
             "data-testid": `distribute-${k}`
           },
@@ -3758,14 +3758,14 @@ const hc = [
   blendModeExpanded: m = !1,
   onBlendModeToggle: w,
   knockoutExpanded: y = !1,
-  onKnockoutToggle: v,
+  onKnockoutToggle: x,
   distressTextureExpanded: g = !1,
   onDistressTextureToggle: N,
-  imageMaskExpanded: x = !1,
+  imageMaskExpanded: v = !1,
   onImageMaskToggle: M,
-  onUngroup: E
+  onUngroup: I
 }) => {
-  const [D, k] = T(!1), [I, L] = T(!1), [z, q] = T(!1), [B, U] = T(!1), [se, J] = T(!1), [ee, de] = T(!1), [X, K] = T(!1), [Y, ue] = T(!1), A = vs(e ?? null);
+  const [D, k] = T(!1), [E, L] = T(!1), [z, q] = T(!1), [B, U] = T(!1), [se, J] = T(!1), [ee, de] = T(!1), [X, K] = T(!1), [Y, ue] = T(!1), A = vs(e ?? null);
   return /* @__PURE__ */ h("div", { className: "sc-toolbar-items", children: [
     /* @__PURE__ */ t(
       j,
@@ -3789,7 +3789,7 @@ const hc = [
         },
         onMouseLeave: () => L(!1),
         tooltip: "Transparency",
-        tooltipDisabled: I || o,
+        tooltipDisabled: E || o,
         active: o || A.opacity
       }
     ),
@@ -3832,12 +3832,12 @@ const hc = [
         active: m || A.blendMode
       }
     ),
-    v && /* @__PURE__ */ t(
+    x && /* @__PURE__ */ t(
       j,
       {
         icon: "lucide:scissors",
         onClick: () => {
-          de(!0), v();
+          de(!0), x();
         },
         onMouseLeave: () => de(!1),
         tooltip: "Knockout",
@@ -3867,12 +3867,12 @@ const hc = [
         },
         onMouseLeave: () => ue(!1),
         tooltip: "Image Mask",
-        tooltipDisabled: Y || x,
-        active: x || A.imageMask
+        tooltipDisabled: Y || v,
+        active: v || A.imageMask
       }
     ),
     /* @__PURE__ */ h(he, { delayDuration: 300, children: [
-      /* @__PURE__ */ t(me, { asChild: !0, children: /* @__PURE__ */ t(P, { variant: "ghost", size: "sm", onClick: E, children: "Ungroup" }) }),
+      /* @__PURE__ */ t(me, { asChild: !0, children: /* @__PURE__ */ t(P, { variant: "ghost", size: "sm", onClick: I, children: "Ungroup" }) }),
       /* @__PURE__ */ t(ge, { children: "Ungroup this group" })
     ] })
   ] });
@@ -3896,42 +3896,42 @@ const hs = ({ element: e, onElementUpdate: s, className: n }) => {
   var g, N;
   const [o, r] = T("center"), c = V(null), i = V({ x: 0, y: 0 });
   Z(() => {
-    const x = c.current;
-    if (!x) return;
+    const v = c.current;
+    if (!v) return;
     const M = (D) => {
       i.current = {
         x: D.touches[0].clientX,
         y: D.touches[0].clientY
       };
-    }, E = (D) => {
-      const k = Math.abs(D.touches[0].clientX - i.current.x), I = Math.abs(D.touches[0].clientY - i.current.y);
-      k > 10 && k > I && D.preventDefault();
+    }, I = (D) => {
+      const k = Math.abs(D.touches[0].clientX - i.current.x), E = Math.abs(D.touches[0].clientY - i.current.y);
+      k > 10 && k > E && D.preventDefault();
     };
-    return x.addEventListener("touchstart", M, { passive: !0 }), x.addEventListener("touchmove", E, { passive: !1 }), () => {
-      x.removeEventListener("touchstart", M), x.removeEventListener("touchmove", E);
+    return v.addEventListener("touchstart", M, { passive: !0 }), v.addEventListener("touchmove", I, { passive: !1 }), () => {
+      v.removeEventListener("touchstart", M), v.removeEventListener("touchmove", I);
     };
   }, []);
   const f = ((g = e.transformData) == null ? void 0 : g.cropWidth) || 1, b = ((N = e.transformData) == null ? void 0 : N.cropHeight) || 1, m = S(
-    (x, M, E, D) => {
+    (v, M, I, D) => {
       const k = e.clone();
-      k.updateCrop(x, M, E, D, !0), s(k);
+      k.updateCrop(v, M, I, D, !0), s(k);
     },
     [e, s]
   ), w = S(
-    (x, M = o) => {
-      const E = e.transformData.cropWidth, D = e.transformData.cropX, k = x - E;
-      let I = D;
-      M.includes("center") ? I = D - k / 2 : M.includes("right") && (I = D - k), I = Math.max(0, Math.min(1 - x, I)), m(I, e.transformData.cropY, x, e.transformData.cropHeight);
+    (v, M = o) => {
+      const I = e.transformData.cropWidth, D = e.transformData.cropX, k = v - I;
+      let E = D;
+      M.includes("center") ? E = D - k / 2 : M.includes("right") && (E = D - k), E = Math.max(0, Math.min(1 - v, E)), m(E, e.transformData.cropY, v, e.transformData.cropHeight);
     },
     [e, m, o]
   ), y = S(
-    (x, M = o) => {
-      const E = e.transformData.cropHeight, D = e.transformData.cropY, k = x - E;
-      let I = D;
-      M.includes("middle") || M === "center" ? I = D - k / 2 : M.includes("bottom") && (I = D - k), I = Math.max(0, Math.min(1 - x, I)), m(e.transformData.cropX, I, e.transformData.cropWidth, x);
+    (v, M = o) => {
+      const I = e.transformData.cropHeight, D = e.transformData.cropY, k = v - I;
+      let E = D;
+      M.includes("middle") || M === "center" ? E = D - k / 2 : M.includes("bottom") && (E = D - k), E = Math.max(0, Math.min(1 - v, E)), m(e.transformData.cropX, E, e.transformData.cropWidth, v);
     },
     [e, m, o]
-  ), v = [
+  ), x = [
     "top-left",
     "top-center",
     "top-right",
@@ -3952,26 +3952,26 @@ const hs = ({ element: e, onElementUpdate: s, className: n }) => {
       children: /* @__PURE__ */ t("div", { className: "sc:flex sc:flex-col sc:gap-5 sc:px-5 sc:pt-1 sc:pb-[calc(env(safe-area-inset-bottom,0px)+20px)] sc:md:gap-4 sc:md:px-4 sc:md:pt-0 sc:md:pb-[calc(env(safe-area-inset-bottom,0px)+16px)]", children: /* @__PURE__ */ h("div", { className: "sc:flex sc:items-start sc:gap-6 sc:md:gap-5", children: [
         /* @__PURE__ */ h("div", { className: "sc:flex sc:flex-col sc:gap-2", children: [
           /* @__PURE__ */ t("span", { className: "sc:text-foreground/60 sc:text-sm sc:md:text-xs", children: "Anchor" }),
-          /* @__PURE__ */ t("div", { className: "sc:grid sc:grid-cols-3 sc:gap-0.5 sc:rounded-md sc:p-1", children: v.map((x) => /* @__PURE__ */ t(
+          /* @__PURE__ */ t("div", { className: "sc:grid sc:grid-cols-3 sc:gap-0.5 sc:rounded-md sc:p-1", children: x.map((v) => /* @__PURE__ */ t(
             "button",
             {
-              onClick: () => r(x),
+              onClick: () => r(v),
               className: St(
                 "sc-crop-anchor-btn sc:size-8 sc:rounded-md sc:md:size-6 sc:md:rounded",
-                o === x && "sc-active"
+                o === v && "sc-active"
               ),
-              title: x.replace("-", " "),
+              title: v.replace("-", " "),
               children: /* @__PURE__ */ t(
                 "div",
                 {
                   className: St(
                     "sc-crop-anchor-dot sc:size-2 sc:md:size-1.5",
-                    o === x && "sc-active sc:size-2.5 sc:md:size-2"
+                    o === v && "sc-active sc:size-2.5 sc:md:size-2"
                   )
                 }
               )
             },
-            x
+            v
           )) })
         ] }),
         /* @__PURE__ */ h("div", { className: "sc:flex sc:flex-1 sc:flex-col sc:gap-4 sc:md:gap-3", children: [
@@ -3983,7 +3983,7 @@ const hs = ({ element: e, onElementUpdate: s, className: n }) => {
                 {
                   type: "number",
                   value: Math.round(f * 100),
-                  onChange: (x) => w(Math.max(10, Math.min(100, Number(x.target.value))) / 100),
+                  onChange: (v) => w(Math.max(10, Math.min(100, Number(v.target.value))) / 100),
                   min: 10,
                   max: 100,
                   className: "sc:bg-transparent sc:text-foreground sc:w-14 sc:rounded-md sc:border-none sc:px-2.5 sc:py-2 sc:text-right sc:text-base sc:md:w-14 sc:md:rounded sc:md:px-1.5 sc:md:py-1 sc:md:text-[13px]"
@@ -3994,7 +3994,7 @@ const hs = ({ element: e, onElementUpdate: s, className: n }) => {
               Te,
               {
                 value: [f * 100],
-                onValueChange: (x) => w(x[0] / 100),
+                onValueChange: (v) => w(v[0] / 100),
                 min: 10,
                 max: 100,
                 step: 1,
@@ -4013,7 +4013,7 @@ const hs = ({ element: e, onElementUpdate: s, className: n }) => {
                 {
                   type: "number",
                   value: Math.round(b * 100),
-                  onChange: (x) => y(Math.max(10, Math.min(100, Number(x.target.value))) / 100),
+                  onChange: (v) => y(Math.max(10, Math.min(100, Number(v.target.value))) / 100),
                   min: 10,
                   max: 100,
                   className: "sc:bg-transparent sc:text-foreground sc:w-14 sc:rounded-md sc:border-none sc:px-2.5 sc:py-2 sc:text-right sc:text-base sc:md:w-14 sc:md:rounded sc:md:px-1.5 sc:md:py-1 sc:md:text-[13px]"
@@ -4024,7 +4024,7 @@ const hs = ({ element: e, onElementUpdate: s, className: n }) => {
               Te,
               {
                 value: [b * 100],
-                onValueChange: (x) => y(x[0] / 100),
+                onValueChange: (v) => y(v[0] / 100),
                 min: 10,
                 max: 100,
                 step: 1,
@@ -4039,7 +4039,7 @@ const hs = ({ element: e, onElementUpdate: s, className: n }) => {
       ] }) })
     }
   );
-}, Al = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, Fl = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   CropPanel: hs,
   default: hs
@@ -4291,11 +4291,11 @@ const hs = ({ element: e, onElementUpdate: s, className: n }) => {
 }) => {
   var N;
   const i = (n == null ? void 0 : n.type) === "linear" || (n == null ? void 0 : n.type) === "radial" ? n.type : "solid", f = (n == null ? void 0 : n.type) === "linear" || (n == null ? void 0 : n.type) === "radial" ? n : null, [b, m] = T(0), w = S(
-    (x) => {
-      var E;
-      if (x === i || !o) return;
-      if (x === "solid") {
-        s(((E = f == null ? void 0 : f.stops[0]) == null ? void 0 : E.color) ?? e);
+    (v) => {
+      var I;
+      if (v === i || !o) return;
+      if (v === "solid") {
+        s(((I = f == null ? void 0 : f.stops[0]) == null ? void 0 : I.color) ?? e);
         return;
       }
       const M = f ? f.stops.map((D) => ({ ...D })) : [
@@ -4303,22 +4303,22 @@ const hs = ({ element: e, onElementUpdate: s, className: n }) => {
         { offset: 1, color: "#ffffff" }
       ];
       o(
-        x === "linear" ? { type: "linear", angle: (f == null ? void 0 : f.type) === "linear" ? f.angle : 180, stops: M } : { type: "radial", stops: M }
+        v === "linear" ? { type: "linear", angle: (f == null ? void 0 : f.type) === "linear" ? f.angle : 180, stops: M } : { type: "radial", stops: M }
       ), m(0);
     },
     [i, f, e, s, o]
   ), y = S(
-    (x) => {
+    (v) => {
       if (!f || !o) return;
-      const M = f.stops.map((E, D) => D === b ? { ...E, color: x } : { ...E });
+      const M = f.stops.map((I, D) => D === b ? { ...I, color: v } : { ...I });
       o(
         f.type === "linear" ? { type: "linear", angle: f.angle, stops: M } : { type: "radial", stops: M }
       );
     },
     [f, b, o]
-  ), v = S(
-    (x) => {
-      (f == null ? void 0 : f.type) !== "linear" || !o || o({ type: "linear", angle: x, stops: f.stops.map((M) => ({ ...M })) });
+  ), x = S(
+    (v) => {
+      (f == null ? void 0 : f.type) !== "linear" || !o || o({ type: "linear", angle: v, stops: f.stops.map((M) => ({ ...M })) });
     },
     [f, o]
   ), g = f ? ((N = f.stops[b]) == null ? void 0 : N.color) ?? e : e;
@@ -4331,25 +4331,25 @@ const hs = ({ element: e, onElementUpdate: s, className: n }) => {
       children: /* @__PURE__ */ h("div", { className: mc, children: [
         o && /* @__PURE__ */ h("div", { className: "sc:flex sc:items-center sc:gap-3", children: [
           /* @__PURE__ */ t(Me, { className: "sc:text-base sc:md:text-sm sc:font-medium", children: "Fill" }),
-          /* @__PURE__ */ t("div", { className: "sc:flex sc:rounded-md sc:border sc:border-divider sc:overflow-hidden", children: ["solid", "linear", "radial"].map((x) => /* @__PURE__ */ t(
+          /* @__PURE__ */ t("div", { className: "sc:flex sc:rounded-md sc:border sc:border-divider sc:overflow-hidden", children: ["solid", "linear", "radial"].map((v) => /* @__PURE__ */ t(
             "button",
             {
-              className: `sc:px-4 sc:py-2.5 sc:text-base sc:md:px-3 sc:md:py-1.5 sc:md:text-sm sc:transition-colors ${i === x ? "sc:bg-primary sc:text-primary-foreground" : "sc:text-foreground sc:hover:bg-muted"}`,
-              onClick: () => w(x),
-              "aria-pressed": i === x,
-              children: Gi[x]
+              className: `sc:px-4 sc:py-2.5 sc:text-base sc:md:px-3 sc:md:py-1.5 sc:md:text-sm sc:transition-colors ${i === v ? "sc:bg-primary sc:text-primary-foreground" : "sc:text-foreground sc:hover:bg-muted"}`,
+              onClick: () => w(v),
+              "aria-pressed": i === v,
+              children: Gi[v]
             },
-            x
+            v
           )) })
         ] }),
         f && /* @__PURE__ */ h(Ve, { children: [
           /* @__PURE__ */ h("div", { className: "sc:flex sc:items-center sc:gap-3", children: [
             /* @__PURE__ */ t(Me, { className: "sc:text-base sc:md:text-sm sc:font-medium", children: "Stops" }),
-            /* @__PURE__ */ t("div", { className: "sc:flex sc:items-center sc:gap-2", children: f.stops.map((x, M) => /* @__PURE__ */ t(
+            /* @__PURE__ */ t("div", { className: "sc:flex sc:items-center sc:gap-2", children: f.stops.map((v, M) => /* @__PURE__ */ t(
               "button",
               {
                 className: `sc:h-8 sc:w-8 sc:rounded-md sc:border-2 sc:transition-colors ${M === b ? "sc:border-primary" : "sc:border-divider"}`,
-                style: { backgroundColor: x.color },
+                style: { backgroundColor: v.color },
                 onClick: () => m(M),
                 "aria-label": `Edit gradient stop ${M + 1}`,
                 "aria-pressed": M === b
@@ -4362,7 +4362,7 @@ const hs = ({ element: e, onElementUpdate: s, className: n }) => {
             {
               label: "Angle",
               value: Math.round(f.angle),
-              onChange: v,
+              onChange: x,
               min: 0,
               max: 360,
               unit: "°"
@@ -4373,7 +4373,7 @@ const hs = ({ element: e, onElementUpdate: s, className: n }) => {
           Et,
           {
             value: g,
-            onChange: (x) => f ? y(x.target.value) : s(x.target.value),
+            onChange: (v) => f ? y(v.target.value) : s(v.target.value),
             documentColors: r,
             imageColors: c,
             showSquare: !0,
@@ -4563,7 +4563,7 @@ const hs = ({ element: e, onElementUpdate: s, className: n }) => {
     }
   );
 }, tl = ({ stroke: e, onChange: s, documentColors: n, imageColors: o }) => {
-  const [r, c] = T(!1), i = (e == null ? void 0 : e.enabled) ?? !1, f = (e == null ? void 0 : e.color) ?? "#000000", b = (e == null ? void 0 : e.width) ?? 5, m = (e == null ? void 0 : e.opacity) ?? 1, w = (e == null ? void 0 : e.lineCap) ?? "butt", y = (e == null ? void 0 : e.lineJoin) ?? "miter", v = S(
+  const [r, c] = T(!1), i = (e == null ? void 0 : e.enabled) ?? !1, f = (e == null ? void 0 : e.color) ?? "#000000", b = (e == null ? void 0 : e.width) ?? 5, m = (e == null ? void 0 : e.opacity) ?? 1, w = (e == null ? void 0 : e.lineCap) ?? "butt", y = (e == null ? void 0 : e.lineJoin) ?? "miter", x = S(
     (N) => {
       s(N ? { enabled: !0, color: f, width: b, lineCap: w, lineJoin: y, opacity: m } : void 0);
     },
@@ -4583,7 +4583,7 @@ const hs = ({ element: e, onElementUpdate: s, className: n }) => {
       children: /* @__PURE__ */ h("div", { className: Ue, children: [
         /* @__PURE__ */ h("div", { className: "sc:flex sc:items-center sc:justify-between", children: [
           /* @__PURE__ */ t(Me, { className: "sc:text-foreground/70 sc:text-base sc:md:text-[13px]", children: "Stroke" }),
-          /* @__PURE__ */ t(bt, { checked: i, onCheckedChange: v })
+          /* @__PURE__ */ t(bt, { checked: i, onCheckedChange: x })
         ] }),
         i && /* @__PURE__ */ h(Ve, { children: [
           /* @__PURE__ */ h("div", { className: "sc:flex sc:items-center sc:justify-between", children: [
@@ -4670,13 +4670,13 @@ const hs = ({ element: e, onElementUpdate: s, className: n }) => {
   opacity: 0.5
 }, sl = ({ shadow: e, onChange: s, documentColors: n, imageColors: o }) => {
   const r = (e == null ? void 0 : e.enabled) ?? !1, c = (e == null ? void 0 : e.color) ?? jt.color, i = (e == null ? void 0 : e.blur) ?? jt.blur, f = (e == null ? void 0 : e.offsetX) ?? jt.offsetX, b = (e == null ? void 0 : e.offsetY) ?? jt.offsetY, m = (e == null ? void 0 : e.opacity) ?? jt.opacity, w = S(
-    (v) => {
-      s(v ? { enabled: !0, color: c, blur: i, offsetX: f, offsetY: b, opacity: m } : void 0);
+    (x) => {
+      s(x ? { enabled: !0, color: c, blur: i, offsetX: f, offsetY: b, opacity: m } : void 0);
     },
     [s, c, i, f, b, m]
   ), y = S(
-    (v) => {
-      e && s({ ...e, ...v });
+    (x) => {
+      e && s({ ...e, ...x });
     },
     [e, s]
   );
@@ -4699,7 +4699,7 @@ const hs = ({ element: e, onElementUpdate: s, className: n }) => {
               Et,
               {
                 value: c,
-                onChange: (v) => y({ color: v.target.value }),
+                onChange: (x) => y({ color: x.target.value }),
                 documentColors: n,
                 imageColors: o,
                 showSquare: !0
@@ -4711,7 +4711,7 @@ const hs = ({ element: e, onElementUpdate: s, className: n }) => {
             {
               label: "Blur",
               value: i,
-              onChange: (v) => y({ blur: v }),
+              onChange: (x) => y({ blur: x }),
               min: 0,
               max: 100,
               unit: "px"
@@ -4722,7 +4722,7 @@ const hs = ({ element: e, onElementUpdate: s, className: n }) => {
             {
               label: "Offset X",
               value: f,
-              onChange: (v) => y({ offsetX: v }),
+              onChange: (x) => y({ offsetX: x }),
               min: -100,
               max: 100,
               unit: "px"
@@ -4733,7 +4733,7 @@ const hs = ({ element: e, onElementUpdate: s, className: n }) => {
             {
               label: "Offset Y",
               value: b,
-              onChange: (v) => y({ offsetY: v }),
+              onChange: (x) => y({ offsetY: x }),
               min: -100,
               max: 100,
               unit: "px"
@@ -4744,7 +4744,7 @@ const hs = ({ element: e, onElementUpdate: s, className: n }) => {
             {
               label: "Opacity",
               value: Math.round(m * 100),
-              onChange: (v) => y({ opacity: v / 100 }),
+              onChange: (x) => y({ opacity: x / 100 }),
               min: 0,
               max: 100,
               unit: "%"
@@ -4872,15 +4872,15 @@ const hs = ({ element: e, onElementUpdate: s, className: n }) => {
   isRotationPanelOpen: m,
   isOpacityPanelOpen: w,
   isAdjustPanelOpen: y,
-  isFontSizePanelOpen: v,
+  isFontSizePanelOpen: x,
   isShapeCornerRadiusPanelOpen: g,
   isShapeTransparencyPanelOpen: N,
-  isShapeSidesPanelOpen: x,
+  isShapeSidesPanelOpen: v,
   isShapePointsPanelOpen: M,
-  isShapeInnerRadiusPanelOpen: E,
+  isShapeInnerRadiusPanelOpen: I,
   isShapeColorPanelOpen: D,
   isTextColorPanelOpen: k,
-  isStrokePanelOpen: I,
+  isStrokePanelOpen: E,
   isShadowPanelOpen: L,
   isBlendModePanelOpen: z,
   isKnockoutPanelOpen: q,
@@ -4945,15 +4945,15 @@ const hs = ({ element: e, onElementUpdate: s, className: n }) => {
       /* @__PURE__ */ t(Ae, { isOpen: m, children: de }),
       /* @__PURE__ */ t(Ae, { isOpen: w, children: X }),
       /* @__PURE__ */ t(Ae, { isOpen: y, children: K }),
-      /* @__PURE__ */ t(Ae, { isOpen: v, children: Y }),
+      /* @__PURE__ */ t(Ae, { isOpen: x, children: Y }),
       /* @__PURE__ */ t(Ae, { isOpen: g, children: ue }),
       /* @__PURE__ */ t(Ae, { isOpen: N, children: A }),
-      /* @__PURE__ */ t(Ae, { isOpen: x, children: te }),
+      /* @__PURE__ */ t(Ae, { isOpen: v, children: te }),
       /* @__PURE__ */ t(Ae, { isOpen: M, children: De }),
-      /* @__PURE__ */ t(Ae, { isOpen: E, children: W }),
+      /* @__PURE__ */ t(Ae, { isOpen: I, children: W }),
       /* @__PURE__ */ t(No, { isOpen: D, children: xe }),
       /* @__PURE__ */ t(No, { isOpen: k, children: Ce }),
-      /* @__PURE__ */ t(Ae, { isOpen: I, children: we }),
+      /* @__PURE__ */ t(Ae, { isOpen: E, children: we }),
       /* @__PURE__ */ t(Ae, { isOpen: L, children: Re }),
       /* @__PURE__ */ t(Ae, { isOpen: z, children: Ee }),
       /* @__PURE__ */ t(Ae, { isOpen: q, children: ye }),
@@ -5155,7 +5155,14 @@ const Us = (e) => e.toString(16).padStart(2, "0");
 function xl(e) {
   return `#${Us(e.r)}${Us(e.g)}${Us(e.b)}`;
 }
-async function vl(e, s = 5) {
+function vl(e, s = 5) {
+  if (e.length === 0 || s <= 0) return [];
+  const n = Math.max(s * 4, 16), o = gl(e, n);
+  o.sort((c, i) => i.pixels.length - c.pixels.length);
+  const r = o.map((c) => ml(c.pixels));
+  return yl(r, s, 50).map(xl);
+}
+async function Cl(e, s = 5) {
   if (!e) return [];
   const n = fs.get(e);
   if (n) return n;
@@ -5163,7 +5170,7 @@ async function vl(e, s = 5) {
   if (o) return o;
   const r = (async () => {
     try {
-      const c = await Cl(e), i = 48, b = (typeof OffscreenCanvas < "u" ? new OffscreenCanvas(i, i) : (() => {
+      const c = await wl(e), i = 48, b = (typeof OffscreenCanvas < "u" ? new OffscreenCanvas(i, i) : (() => {
         const x = document.createElement("canvas");
         return x.width = i, x.height = i, x;
       })()).getContext("2d");
@@ -5172,15 +5179,13 @@ async function vl(e, s = 5) {
       const { data: m } = b.getImageData(0, 0, i, i), w = [];
       for (let x = 0; x < m.length; x += 4) {
         if (m[x + 3] < 128) continue;
-        const E = m[x], D = m[x + 1], k = m[x + 2];
-        E > 240 && D > 240 && k > 240 || w.push({ r: E, g: D, b: k });
+        const N = m[x], v = m[x + 1], M = m[x + 2];
+        N > 240 && v > 240 && M > 240 || w.push({ r: N, g: v, b: M });
       }
       if (w.length === 0)
         return fs.set(e, []), [];
-      const y = Math.max(s * 4, 16), v = gl(w, y);
-      v.sort((x, M) => M.pixels.length - x.pixels.length);
-      const g = v.map((x) => ml(x.pixels)), N = yl(g, s, 50).map(xl);
-      return fs.set(e, N), N;
+      const y = vl(w, s);
+      return fs.set(e, y), y;
     } catch {
       return fs.set(e, []), [];
     } finally {
@@ -5189,13 +5194,13 @@ async function vl(e, s = 5) {
   })();
   return Bs.set(e, r), r;
 }
-function Cl(e) {
+function wl(e) {
   return new Promise((s, n) => {
     const o = new Image();
     o.crossOrigin = "anonymous", o.onload = () => s(o), o.onerror = () => n(new Error(`Failed to load image: ${e}`)), o.src = e;
   });
 }
-async function wl(e, s = 5) {
+async function kl(e, s = 5) {
   const n = [], o = /* @__PURE__ */ new Set(), r = (b) => {
     if (b instanceof ot) {
       const m = b.imageUrl;
@@ -5206,22 +5211,22 @@ async function wl(e, s = 5) {
   for (const b of e) r(b);
   if (n.length === 0) return [];
   const c = await Promise.all(
-    n.map((b) => vl(b, s))
+    n.map((b) => Cl(b, s))
   ), i = [], f = /* @__PURE__ */ new Set();
   for (const b of c)
     for (const m of b)
       f.has(m) || (f.add(m), i.push(m));
   return i;
 }
-const So = bs("ContextualToolbars"), kl = "Background removal is temporarily unavailable.";
-function Tl(e, s) {
+const So = bs("ContextualToolbars"), Tl = "Background removal is temporarily unavailable.";
+function Nl(e, s) {
   const n = e instanceof Error ? e.message : "";
   return !n || /VITE_|NEXT_PUBLIC_|\.env/i.test(n) ? s : n;
 }
 const Do = ({ services: e, ...s }) => {
-  const n = /* @__PURE__ */ t(Nl, { ...s });
+  const n = /* @__PURE__ */ t(Sl, { ...s });
   return e ? /* @__PURE__ */ t(br, { services: e, children: n }) : n;
-}, Nl = ({
+}, Sl = ({
   mode: e = "floating",
   onOpenGlyphBrowser: s,
   onChangeImage: n,
@@ -5234,15 +5239,15 @@ const Do = ({ services: e, ...s }) => {
   onArtboardUpdate: m,
   artboardScreenBounds: w,
   maxWidth: y,
-  transparent: v = !1,
+  transparent: x = !1,
   onPanelExpandChange: g,
   defaultExpandedPanel: N,
-  onExpandedPanelTypeChange: x,
+  onExpandedPanelTypeChange: v,
   onOpenCropDrawer: M,
-  onOpenCornerRadiusDrawer: E,
+  onOpenCornerRadiusDrawer: I,
   closeButtonStyle: D = "icon",
   emptyStateMessage: k = "Tap an element to select and edit",
-  emptyStateRender: I,
+  emptyStateRender: E,
   editArtboardMode: L = !1,
   onEditArtboardModeChange: z,
   onLayerThumbnailClick: q,
@@ -5335,7 +5340,7 @@ const Do = ({ services: e, ...s }) => {
     mn(!0), Ds(null), p(a.imageUrl).then((F) => {
       zt.current && bn(u, F);
     }).catch((F) => {
-      So.error("Error removing background:", F), zt.current && Ds(Tl(F, kl));
+      So.error("Error removing background:", F), zt.current && Ds(Nl(F, Tl));
     }).finally(() => {
       zt.current && mn(!1);
     });
@@ -5397,10 +5402,10 @@ const Do = ({ services: e, ...s }) => {
       (a) => (a == null ? void 0 : a.type) === "align" ? null : { type: "align", icon: "gravity-ui:objects-align-center-vertical", label: "Position" }
     );
   }, []), zc = S(() => {
-    E ? E() : ce(
+    I ? I() : ce(
       (a) => (a == null ? void 0 : a.type) === "cornerRadius" ? null : { type: "cornerRadius", icon: "lucide:square-round-corner", label: "Corner Radius" }
     );
-  }, [E]), Lc = S(() => {
+  }, [I]), Lc = S(() => {
     M ? M() : ce((a) => (a == null ? void 0 : a.type) === "crop" ? null : { type: "crop", icon: "lucide:crop", label: "Crop" });
   }, [M]), Jt = S(() => {
     ce(
@@ -5700,10 +5705,10 @@ const Do = ({ services: e, ...s }) => {
     o ? o() : $e(!0);
   }, [o]);
   Z(() => {
-    g == null || g(l !== null), x == null || x(
+    g == null || g(l !== null), v == null || v(
       (l == null ? void 0 : l.type) ?? null
     );
-  }, [l, g, x]), Z(() => {
+  }, [l, g, v]), Z(() => {
     const a = (l == null ? void 0 : l.type) ?? null;
     a !== Zt.current && (Zt.current = a, de(a));
   }, [l, de]), Z(() => {
@@ -5875,7 +5880,7 @@ const Do = ({ services: e, ...s }) => {
       return;
     }
     let a = !1;
-    return wl(Y).then((u) => {
+    return kl(Y).then((u) => {
       a || Tn(u);
     }), () => {
       a = !0;
@@ -6198,7 +6203,7 @@ const Do = ({ services: e, ...s }) => {
       "data-sc-part": B,
       "data-mode": e,
       "data-wrap": y ? "" : void 0,
-      "data-transparent": v ? "" : void 0,
+      "data-transparent": x ? "" : void 0,
       "data-panel-expanded": l ? "" : void 0,
       "data-preserve-selection": !0,
       style: {
@@ -6310,7 +6315,7 @@ const Do = ({ services: e, ...s }) => {
       onOpacityChange: ia,
       onInvertedChange: la
     }
-  ) : null, er = e === "embedded" && !A && !L ? I ? /* @__PURE__ */ t("div", { className: "toolbar-empty-state", children: I }) : k !== null ? /* @__PURE__ */ t(
+  ) : null, er = e === "embedded" && !A && !L ? E ? /* @__PURE__ */ t("div", { className: "toolbar-empty-state", children: E }) : k !== null ? /* @__PURE__ */ t(
     "div",
     {
       className: "toolbar-empty-state",
@@ -6491,7 +6496,7 @@ const Do = ({ services: e, ...s }) => {
       }
     )
   ] });
-}, Fl = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, Ol = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   ContextualToolbars: Do,
   default: Do
@@ -6525,8 +6530,8 @@ export {
   bt as o,
   Xo as p,
   Te as q,
-  Al as r,
-  Fl as s,
+  Fl as r,
+  Ol as s,
   Ei as u
 };
-//# sourceMappingURL=ContextualToolbars-C62As-xY.js.map
+//# sourceMappingURL=ContextualToolbars-_5zqlcSw.js.map