@snowcone-app/canvas 0.36.4 → 0.37.0

package/dist/{ImagePanel-DK3Zflyc.js → ImagePanel-DLxIDKV-.js}

@@ -1,18 +1,18 @@
 import { jsx as e, jsxs as t, Fragment as le } from "react/jsx-runtime";
-import * as es from "react";
-import Be, { useMemo as $e, useState as r, useRef as M, useEffect as ie, useCallback as fe } from "react";
-import { u as ss, g as ts } from "./design-builder-CqgTpp9B.js";
-import { o as cs, N as as, d as je, W as rs, I as p, O as me, B as W, u as ns, X as os, C as is } from "./useCommands-DC6ZPY1n.js";
-import { c as Ge, I as ls } from "./FontAnalyzer-CEYA_6fY.js";
-import { T as C, S as ze, a as Ie, I as Re, L as ke } from "./custom-icons-wZuopKx7.js";
-import { a as ds } from "./guards-DldCuuJq.js";
-const He = es.forwardRef(
-  ({ className: d, isInvalid: a, disabled: x, readOnly: k, required: u, variant: A, ...c }, g) => {
-    const o = cs(), i = A ?? (o.variant === "default" ? "filled" : "default");
+import * as ss from "react";
+import $e, { useMemo as je, useState as r, useRef as M, useEffect as ie, useCallback as fe } from "react";
+import { u as ts, g as cs } from "./design-builder-CqgTpp9B.js";
+import { o as as, N as rs, d as Ge, W as ns, I as p, O as me, B as Y, u as os, X as is, C as ls } from "./useCommands-CQi4Pyd2.js";
+import { c as He, I as ds } from "./FontAnalyzer-CEYA_6fY.js";
+import { T as C, S as Pe, a as Ie, I as Ce, L as Ee } from "./custom-icons-D51KIAfz.js";
+import { a as us } from "./guards-DldCuuJq.js";
+const _e = ss.forwardRef(
+  ({ className: d, isInvalid: a, disabled: x, readOnly: E, required: u, variant: A, ...c }, g) => {
+    const o = as(), i = A ?? (o.variant === "default" ? "filled" : "default");
     return /* @__PURE__ */ e(
       "textarea",
       {
-        className: as(
+        className: rs(
           "sc:flex sc:min-h-[80px] sc:w-full sc:rounded-input sc:px-2.5 sc:py-2 sc:text-sm sc:transition-colors",
           "sc:text-foreground sc:border-none",
           "sc:placeholder:text-foreground/50",
@@ -26,7 +26,7 @@ const He = es.forwardRef(
         ),
         ref: g,
         disabled: x,
-        readOnly: k,
+        readOnly: E,
         required: u,
         "aria-invalid": a,
         ...c
@@ -34,18 +34,18 @@ const He = es.forwardRef(
     );
   }
 );
-He.displayName = "Textarea";
-const _e = He;
-_e.displayName = "TextArea";
-const xe = Ge("ImageBrowser"), us = "Image search is temporarily unavailable.", Pe = "Image generation is temporarily unavailable.", ms = "Vector search is temporarily unavailable.", Ve = "Background removal is temporarily unavailable.";
-function fs(d, a) {
+_e.displayName = "Textarea";
+const Fe = _e;
+Fe.displayName = "TextArea";
+const xe = He("ImageBrowser"), ms = "Image search is temporarily unavailable.", Ve = "Image generation is temporarily unavailable.", fs = "Vector search is temporarily unavailable.", Ue = "Background removal is temporarily unavailable.";
+function gs(d, a) {
   const x = d instanceof Error ? d.message : "";
   return !x || /VITE_|NEXT_PUBLIC_|\.env/i.test(x) ? a : x;
 }
-const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x, fixedHeight: k = !1 }) {
+const hs = "1px", Se = "1px", ke = { contentVisibility: "auto", contain: "paint" }, De = $e.memo(function({ image: a, onImageSelect: x, fixedHeight: E = !1 }) {
   const [u, A] = r(!1), [c, g] = r(!1), [o, i] = r("top"), b = M(null), h = M(null), U = M(null), N = M(!0), [T, v] = r(!1), w = M(null), S = () => {
     c || x(a);
-  }, Y = (R) => {
+  }, W = (R) => {
     if (!U.current) return "top";
     const m = U.current.getBoundingClientRect(), Z = R.clientX - m.left, z = R.clientY - m.top, y = m.width, L = m.height, P = {
       top: z,
@@ -55,7 +55,7 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
     }, J = Math.min(P.top, P.bottom, P.left, P.right);
     return J === P.top ? "top" : J === P.bottom ? "bottom" : J === P.left ? "left" : "right";
   }, se = (R) => {
-    const m = Y(R);
+    const m = W(R);
     w.current && (cancelAnimationFrame(w.current), w.current = null), m !== o ? (v(!0), i(m), w.current = requestAnimationFrame(() => {
       w.current = requestAnimationFrame(() => {
         v(!1), A(!0), w.current = null;
@@ -63,9 +63,9 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
     })) : (i(m), A(!0)), N.current = !1;
   }, Q = (R) => {
     w.current && (cancelAnimationFrame(w.current), w.current = null);
-    const m = Y(R);
+    const m = W(R);
     i(m), v(!1), A(!1);
-  }, E = () => {
+  }, k = () => {
     h.current && (clearTimeout(h.current), h.current = null), b.current = setTimeout(() => {
       g(!0);
     }, 400);
@@ -76,7 +76,7 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
   }, _ = () => {
     g(!1);
   }, D = a.source === "unsplash" ? "Unsplash" : "Pixabay", ce = u || c, q = () => {
-    if (!u) return `scale(${1.12})`;
+    if (!u) return "none";
     switch (o) {
       case "top":
         return `scale(${1.12}) translateY(5%)`;
@@ -97,26 +97,26 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
       onClick: S,
       onMouseEnter: se,
       onMouseLeave: Q,
-      className: `sc:group sc:relative sc:cursor-pointer sc:overflow-hidden ${k ? "sc:h-full sc:rounded-xs" : "sc:break-inside-avoid sc:rounded-lg"}`,
+      className: `sc:group sc:relative sc:cursor-pointer sc:overflow-hidden ${E ? "sc:h-full sc:rounded-xs" : "sc:break-inside-avoid sc:rounded-lg"}`,
       children: [
         /* @__PURE__ */ e(
           "img",
           {
             src: a.urls.small,
             alt: a.alt || "Image",
-            className: `sc:duration-500 sc:ease-out ${T ? "sc:transition-none" : "sc:transition-transform"} ${k ? "sc:h-full sc:w-full sc:object-cover" : "sc:w-full sc:object-cover"}`,
+            className: `sc:duration-500 sc:ease-out ${T ? "sc:transition-none" : "sc:transition-transform"} ${E ? "sc:h-full sc:w-full sc:object-cover" : "sc:w-full sc:object-cover"}`,
             style: {
               transform: q(),
-              filter: u ? "brightness(1)" : "brightness(0.95)"
+              filter: u ? "brightness(1.04)" : void 0
             }
           }
         ),
         /* @__PURE__ */ e("div", { className: "sc:absolute sc:top-2 sc:right-2 sc:z-10", children: /* @__PURE__ */ e(
           "button",
           {
-            className: `sc:relative sc:flex sc:h-6 sc:w-6 sc:items-center sc:justify-center sc:rounded-full sc:bg-black/30 sc:backdrop-blur-sm sc:transition-all sc:duration-300 sc:ease-in-out sc:hover:scale-110 ${ce ? "sc:opacity-100" : "sc:pointer-events-none sc:opacity-0"}`,
+            className: `sc:relative sc:flex sc:h-6 sc:w-6 sc:items-center sc:justify-center sc:rounded-full sc:bg-black/50 sc:transition-all sc:duration-300 sc:ease-in-out sc:hover:scale-110 ${ce ? "sc:opacity-100" : "sc:pointer-events-none sc:opacity-0"}`,
             "aria-label": "Image info",
-            onMouseEnter: E,
+            onMouseEnter: k,
             onMouseLeave: te,
             children: /* @__PURE__ */ e(p, { icon: "lucide:aperture", className: "sc:size-4 sc:text-white/80" })
           }
@@ -176,7 +176,7 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
       ]
     }
   );
-}), De = Be.memo(function({ vector: a, onVectorSelect: x, fixedHeight: k = !1 }) {
+}), Be = $e.memo(function({ vector: a, onVectorSelect: x, fixedHeight: E = !1 }) {
   const [u, A] = r(!1), [c, g] = r(!1), o = M(null), i = M(null), b = () => {
     c || x(a);
   }, h = () => {
@@ -196,12 +196,12 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
       onClick: b,
       onMouseEnter: () => A(!0),
       onMouseLeave: () => A(!1),
-      className: `sc:group sc:relative sc:cursor-pointer sc:overflow-hidden sc:bg-white/10 sc:transition-all sc:duration-300 ${k ? "sc:h-full sc:rounded-xs" : "sc:break-inside-avoid sc:rounded-lg"} ${u ? "sc:scale-105 sc:bg-white/20" : ""}`,
+      className: `sc:group sc:relative sc:cursor-pointer sc:overflow-hidden sc:bg-white/10 sc:transition-all sc:duration-300 ${E ? "sc:h-full sc:rounded-xs" : "sc:break-inside-avoid sc:rounded-lg"} ${u ? "sc:scale-105 sc:bg-white/20" : ""}`,
       children: [
         /* @__PURE__ */ e(
           "div",
           {
-            className: `sc:flex sc:items-center sc:justify-center sc:p-6 sc:transition-all sc:duration-300 ${k ? "sc:h-full sc:w-full" : "sc:aspect-square sc:w-full"}`,
+            className: `sc:flex sc:items-center sc:justify-center sc:p-6 sc:transition-all sc:duration-300 ${E ? "sc:h-full sc:w-full" : "sc:aspect-square sc:w-full"}`,
             children: /* @__PURE__ */ e(
               "img",
               {
@@ -209,7 +209,7 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
                 alt: a.term,
                 className: `sc:max-h-full sc:max-w-full sc:object-contain sc:transition-all sc:duration-300 ${u ? "sc:scale-110" : "sc:scale-100"}`,
                 style: {
-                  filter: u ? "brightness(1.1)" : "brightness(0.95)"
+                  filter: u ? "brightness(1.1)" : void 0
                 }
               }
             )
@@ -226,7 +226,7 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
           /* @__PURE__ */ e(
             "button",
             {
-              className: `sc:relative sc:flex sc:h-6 sc:w-6 sc:items-center sc:justify-center sc:rounded-full sc:bg-black/30 sc:backdrop-blur-sm sc:transition-all sc:duration-300 sc:ease-in-out sc:hover:scale-110 ${v ? "sc:opacity-100" : "sc:pointer-events-none sc:opacity-0"}`,
+              className: `sc:relative sc:flex sc:h-6 sc:w-6 sc:items-center sc:justify-center sc:rounded-full sc:bg-black/50 sc:transition-all sc:duration-300 sc:ease-in-out sc:hover:scale-110 ${v ? "sc:opacity-100" : "sc:pointer-events-none sc:opacity-0"}`,
               "aria-label": "Vector info",
               onMouseEnter: h,
               onMouseLeave: U,
@@ -253,15 +253,15 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
       ]
     }
   );
-}), hs = ({
+}), ps = ({
   isOpen: d,
   onToggle: a,
   onImageSelect: x,
-  currentImageUrl: k,
+  currentImageUrl: E,
   placement: u = "bottom",
   busy: A = !1
 }) => {
-  const { imageSearch: c, generate: g, vectors: o, removeBackground: i } = je(), b = $e(
+  const { imageSearch: c, generate: g, vectors: o, removeBackground: i } = Ge(), b = je(
     () => [
       ...c ? ["search"] : [],
       "url",
@@ -269,44 +269,44 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
       ...g ? ["ai"] : []
     ],
     [c, o, g]
-  ), [h, U] = r(""), [N, T] = r(""), [v, w] = r([]), [S, Y] = r(!1), [se, Q] = r(null), [E, te] = r(b[0]), [$, _] = r(1), [D, ce] = r(!0), [q, R] = r("masonry"), [m, Z] = r(""), [z, y] = r([]), [L, P] = r(!1), [J, ae] = r(null), [j, be] = r(null), [K, ge] = r(!0), [re, ve] = r("grid"), [F, G] = r(""), [V, l] = r(!1), [O, de] = r(null), [H, he] = r(null), [B, ne] = r(!1), [oe, ee] = r(null), Ne = M(null), pe = M(null), Se = M(null);
+  ), [h, U] = r(""), [N, T] = r(""), [v, w] = r([]), [S, W] = r(!1), [se, Q] = r(null), [k, te] = r(b[0]), [$, _] = r(1), [D, ce] = r(!0), [q, R] = r("masonry"), [m, Z] = r(""), [z, y] = r([]), [L, P] = r(!1), [J, ae] = r(null), [j, be] = r(null), [K, ge] = r(!0), [re, ve] = r("grid"), [F, G] = r(""), [V, l] = r(!1), [O, de] = r(null), [H, he] = r(null), [B, ne] = r(!1), [oe, ee] = r(null), Ne = M(null), pe = M(null), Le = M(null);
   ie(() => {
-    b.includes(E) || te(b[0]);
-  }, [b, E]), ie(() => {
-    d && k && (T(k), te("url"));
-  }, [d, k]), ie(() => {
+    b.includes(k) || te(b[0]);
+  }, [b, k]), ie(() => {
+    d && E && (T(E), te("url"));
+  }, [d, E]), ie(() => {
     d || (U(""), T(""), w([]), Q(null), _(1), ce(!0), Z(""), y([]), ae(null), be(null), ge(!0));
   }, [d]);
   const we = fe(
     async (s, n, f) => {
       if (c) {
-        Y(!0), Q(null);
+        W(!0), Q(null);
         try {
           const I = await c.search({ query: s, page: n, perPage: 30 });
           w((X) => f ? [...X, ...I.results] : I.results), _(I.page), ce(I.hasMore);
         } catch (I) {
-          Q(us), xe.error("Error searching images:", I);
+          Q(ms), xe.error("Error searching images:", I);
         } finally {
-          Y(!1);
+          W(!1);
         }
       }
     },
     [c]
   );
   ie(() => {
-    d && !h && E === "search" && v.length === 0 && c && we("", 1, !1);
-  }, [d, E, c]);
-  const Fe = (s) => {
+    d && !h && k === "search" && v.length === 0 && c && we("", 1, !1);
+  }, [d, k, c]);
+  const Xe = (s) => {
     s.preventDefault(), we(h, 1, !1);
-  }, Le = fe(() => {
+  }, Me = fe(() => {
     S || !D || we(h, $ + 1, !0);
   }, [S, D, h, $, we]);
   ie(() => {
     const s = Ne.current;
-    if (!s || !d || E !== "search") return;
+    if (!s || !d || k !== "search") return;
     const n = new IntersectionObserver(
       (f) => {
-        f[0].isIntersecting && D && !S && Le();
+        f[0].isIntersecting && D && !S && Me();
       },
       {
         root: null,
@@ -319,7 +319,7 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
     return n.observe(s), () => {
       n.disconnect();
     };
-  }, [d, E, D, S, Le]);
+  }, [d, k, D, S, Me]);
   const ye = fe(
     async (s, n) => {
       if (o) {
@@ -327,11 +327,11 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
         try {
           const { results: f, nextPage: I } = await o.search({ query: s, nextPage: n ?? null });
           y(n ? (X) => {
-            const Ee = new Set(X.map((ue) => ue.id));
-            return [...X, ...f.filter((ue) => !Ee.has(ue.id))];
+            const Re = new Set(X.map((ue) => ue.id));
+            return [...X, ...f.filter((ue) => !Re.has(ue.id))];
           } : f), be(I), ge(I !== null);
         } catch (f) {
-          ae(ms), xe.error("Error searching vectors:", f);
+          ae(fs), xe.error("Error searching vectors:", f);
         } finally {
           P(!1);
         }
@@ -340,19 +340,19 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
     [o]
   );
   ie(() => {
-    d && !m && E === "vector" && z.length === 0 && o && ye("");
-  }, [d, E, o]);
-  const Xe = (s) => {
+    d && !m && k === "vector" && z.length === 0 && o && ye("");
+  }, [d, k, o]);
+  const Ye = (s) => {
     s.preventDefault(), ye(m);
-  }, Me = fe(() => {
+  }, Ae = fe(() => {
     L || !K || !j || ye(m, j);
   }, [L, K, j, m, ye]);
   ie(() => {
     const s = pe.current;
-    if (!s || !d || E !== "vector") return;
+    if (!s || !d || k !== "vector") return;
     const n = new IntersectionObserver(
       (f) => {
-        f[0].isIntersecting && K && !L && Me();
+        f[0].isIntersecting && K && !L && Ae();
       },
       {
         root: null,
@@ -363,11 +363,11 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
     return n.observe(s), () => {
       n.disconnect();
     };
-  }, [d, E, K, L, Me]);
-  const Ae = (s) => {
+  }, [d, k, K, L, Ae]);
+  const Te = (s) => {
     const n = s.selectUrl || s.urls.svg || s.urls.png;
     n && (x(n), a(!1));
-  }, Te = (s) => {
+  }, ze = (s) => {
     var n;
     try {
       Promise.resolve((n = c == null ? void 0 : c.trackSelect) == null ? void 0 : n.call(c, s)).catch(() => {
@@ -377,33 +377,33 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
     x(s.urls.regular), a(!1);
   }, We = (s) => {
     s.preventDefault(), N.trim() && (x(N.trim()), a(!1));
-  }, Ye = (s) => {
+  }, Qe = (s) => {
     var f;
     const n = (f = s.target.files) == null ? void 0 : f[0];
     if (n && n.type.startsWith("image/")) {
       const I = new FileReader();
       I.onload = (X) => {
         var ue;
-        const Ee = (ue = X.target) == null ? void 0 : ue.result;
-        T(Ee);
+        const Re = (ue = X.target) == null ? void 0 : ue.result;
+        T(Re);
       }, I.readAsDataURL(n);
     }
-  }, Qe = () => {
+  }, qe = () => {
     var s;
-    (s = Se.current) == null || s.click();
-  }, qe = async () => {
+    (s = Le.current) == null || s.click();
+  }, Ze = async () => {
     if (!(!i || !N.trim())) {
       ne(!0), ee(null);
       try {
         const s = await i(N);
         T(s);
       } catch (s) {
-        ee(Ve), xe.error("Error removing background:", s);
+        ee(Ue), xe.error("Error removing background:", s);
       } finally {
         ne(!1);
       }
     }
-  }, Ze = async (s) => {
+  }, Je = async (s) => {
     var n, f;
     if (s.preventDefault(), !!g) {
       if (!F.trim()) {
@@ -419,34 +419,34 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
           numberResults: 1
         })).images) == null ? void 0 : n[0]) == null ? void 0 : f.imageUrl;
         if (!X)
-          throw new Error(Pe);
+          throw new Error(Ve);
         he(X);
       } catch (I) {
-        de(fs(I, Pe)), xe.error("Error generating AI image:", I);
+        de(gs(I, Ve)), xe.error("Error generating AI image:", I);
       } finally {
         l(!1);
       }
     }
-  }, Je = () => {
+  }, Ke = () => {
     H && (x(H), a(!1));
-  }, Ke = async () => {
+  }, Oe = async () => {
     if (!(!i || !H)) {
       ne(!0), ee(null);
       try {
         const s = await i(H);
         he(s);
       } catch (s) {
-        ee(Ve), xe.error("Error removing background:", s);
+        ee(Ue), xe.error("Error removing background:", s);
       } finally {
         ne(!1);
       }
     }
-  }, Oe = (s, n) => {
+  }, es = (s, n) => {
     const f = s.width / s.height;
     return n % 12 === 0 && f > 0.8 && f < 1.2 ? "sc:col-span-2 sc:row-span-2" : f < 0.75 ? "sc:row-span-2" : f > 1.5 ? "sc:col-span-2" : "";
   };
   return /* @__PURE__ */ t(
-    rs,
+    ns,
     {
       isOpen: d,
       onClose: () => a(!1),
@@ -475,7 +475,7 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
         /* @__PURE__ */ t(
           C,
           {
-            value: E,
+            value: k,
             onValueChange: (s) => te(s),
             className: "sc:flex sc:flex-col",
             "data-testid": "image-browser-container",
@@ -529,7 +529,7 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
                         className: "sc:h-11 sc:w-14 sc:px-0 sc:md:h-9 sc:md:w-11",
                         "data-testid": "image-tab-ai",
                         children: [
-                          /* @__PURE__ */ e(ze, { size: 24 }),
+                          /* @__PURE__ */ e(Pe, { size: 24 }),
                           /* @__PURE__ */ e(C.Indicator, {})
                         ]
                       }
@@ -538,9 +538,9 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
                 }
               ) }),
               c && /* @__PURE__ */ t(C.Panel, { id: "search", className: "sc:flex sc:flex-col", children: [
-                /* @__PURE__ */ t("form", { onSubmit: Fe, className: "sc:sticky sc:top-0 sc:z-9 sc:flex sc:gap-2 sc:bg-surface sc:px-6 sc:pt-4 sc:pb-3", children: [
+                /* @__PURE__ */ t("form", { onSubmit: Xe, className: "sc:sticky sc:top-0 sc:z-9 sc:flex sc:gap-2 sc:bg-surface sc:px-6 sc:pt-4 sc:pb-3", children: [
                   /* @__PURE__ */ e(Ie, { className: "sc:flex-1", "aria-label": "Search for images", children: /* @__PURE__ */ e(
-                    Re,
+                    Ce,
                     {
                       type: "text",
                       placeholder: "Search for images...",
@@ -550,9 +550,9 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
                       "data-testid": "image-search-input"
                     }
                   ) }),
-                  /* @__PURE__ */ e(W, { type: "submit", size: "icon", variant: "secondary", disabled: S, "aria-label": "Search", children: /* @__PURE__ */ e(p, { icon: me.search, className: "sc:size-5" }) }),
+                  /* @__PURE__ */ e(Y, { type: "submit", size: "icon", variant: "secondary", disabled: S, "aria-label": "Search", children: /* @__PURE__ */ e(p, { icon: me.search, className: "sc:size-5" }) }),
                   /* @__PURE__ */ e(
-                    W,
+                    Y,
                     {
                       size: "icon",
                       variant: "secondary",
@@ -575,9 +575,9 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
                           display: "grid",
                           gridTemplateColumns: u === "bottom" ? "repeat(auto-fill, minmax(200px, 1fr))" : "repeat(3, 1fr)",
                           gridAutoRows: u === "bottom" ? "200px" : "120px",
-                          gap: gs
+                          gap: hs
                         },
-                        children: v.map((s, n) => /* @__PURE__ */ e("div", { className: Oe(s, n), children: /* @__PURE__ */ e(Ue, { image: s, onImageSelect: Te, fixedHeight: !0 }) }, s.id))
+                        children: v.map((s, n) => /* @__PURE__ */ e("div", { className: es(s, n), style: ke, children: /* @__PURE__ */ e(De, { image: s, onImageSelect: ze, fixedHeight: !0 }) }, s.id))
                       }
                     )
                   ) : (
@@ -589,9 +589,9 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
                         style: {
                           display: "grid",
                           gridTemplateColumns: u === "bottom" ? "repeat(auto-fill, minmax(150px, 1fr))" : "repeat(auto-fill, minmax(120px, 1fr))",
-                          gap: Ce
+                          gap: Se
                         },
-                        children: v.map((s) => /* @__PURE__ */ e("div", { style: { aspectRatio: "1 / 1" }, children: /* @__PURE__ */ e(Ue, { image: s, onImageSelect: Te, fixedHeight: !0 }) }, s.id))
+                        children: v.map((s) => /* @__PURE__ */ e("div", { style: { aspectRatio: "1 / 1", ...ke }, children: /* @__PURE__ */ e(De, { image: s, onImageSelect: ze, fixedHeight: !0 }) }, s.id))
                       }
                     )
                   ),
@@ -609,10 +609,10 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
                 /* @__PURE__ */ e(
                   "input",
                   {
-                    ref: Se,
+                    ref: Le,
                     type: "file",
                     accept: "image/*",
-                    onChange: Ye,
+                    onChange: Qe,
                     className: "sc:hidden"
                   }
                 ),
@@ -620,7 +620,7 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
                   "button",
                   {
                     type: "button",
-                    onClick: Qe,
+                    onClick: qe,
                     className: "sc:flex sc:flex-col sc:items-center sc:justify-center sc:gap-3 sc:rounded-2xl sc:border-2 sc:border-dashed sc:border-divider sc:bg-muted/30 sc:px-6 sc:py-10 sc:transition-colors sc:hover:bg-muted/50 sc:active:bg-muted/60",
                     "data-testid": "image-upload-btn",
                     children: [
@@ -650,9 +650,9 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
                     className: "sc:flex sc:flex-col sc:gap-3",
                     children: [
                       /* @__PURE__ */ t(Ie, { children: [
-                        /* @__PURE__ */ e(ke, { className: "sc:sr-only", children: "Image URL" }),
+                        /* @__PURE__ */ e(Ee, { className: "sc:sr-only", children: "Image URL" }),
                         /* @__PURE__ */ e(
-                          Re,
+                          Ce,
                           {
                             type: "url",
                             placeholder: "https://example.com/image.jpg",
@@ -664,7 +664,7 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
                         )
                       ] }),
                       /* @__PURE__ */ e(
-                        W,
+                        Y,
                         {
                           type: "submit",
                           variant: "default",
@@ -681,9 +681,9 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
                   /* @__PURE__ */ t("div", { className: "sc:flex sc:items-center sc:justify-between sc:gap-3", children: [
                     /* @__PURE__ */ e("span", { className: "sc:text-xs sc:font-medium sc:uppercase sc:tracking-wider sc:text-muted-foreground", children: "Preview" }),
                     i && /* @__PURE__ */ e(
-                      W,
+                      Y,
                       {
-                        onClick: qe,
+                        onClick: Ze,
                         disabled: B || !N.trim(),
                         variant: "secondary",
                         size: "sm",
@@ -723,9 +723,9 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
                 ] })
               ] }),
               o && /* @__PURE__ */ t(C.Panel, { id: "vector", className: "sc:flex sc:flex-col", children: [
-                /* @__PURE__ */ t("form", { onSubmit: Xe, className: "sc:sticky sc:top-0 sc:z-9 sc:flex sc:gap-2 sc:bg-surface sc:px-6 sc:pt-4 sc:pb-3", children: [
+                /* @__PURE__ */ t("form", { onSubmit: Ye, className: "sc:sticky sc:top-0 sc:z-9 sc:flex sc:gap-2 sc:bg-surface sc:px-6 sc:pt-4 sc:pb-3", children: [
                   /* @__PURE__ */ e(Ie, { className: "sc:flex-1", "aria-label": "Search for vector graphics", children: /* @__PURE__ */ e(
-                    Re,
+                    Ce,
                     {
                       type: "text",
                       placeholder: "Search for icons...",
@@ -735,9 +735,9 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
                       "data-testid": "vector-search-input"
                     }
                   ) }),
-                  /* @__PURE__ */ e(W, { type: "submit", size: "icon", variant: "secondary", disabled: L, "aria-label": "Search", children: /* @__PURE__ */ e(p, { icon: me.search, className: "sc:size-5" }) }),
+                  /* @__PURE__ */ e(Y, { type: "submit", size: "icon", variant: "secondary", disabled: L, "aria-label": "Search", children: /* @__PURE__ */ e(p, { icon: me.search, className: "sc:size-5" }) }),
                   /* @__PURE__ */ e(
-                    W,
+                    Y,
                     {
                       size: "icon",
                       variant: "secondary",
@@ -760,9 +760,9 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
                           display: "grid",
                           gridTemplateColumns: u === "bottom" ? "repeat(auto-fill, minmax(150px, 1fr))" : "repeat(3, 1fr)",
                           gridAutoRows: u === "bottom" ? "150px" : "120px",
-                          gap: Ce
+                          gap: Se
                         },
-                        children: z.map((s) => /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(De, { vector: s, onVectorSelect: Ae, fixedHeight: !0 }) }, s.id))
+                        children: z.map((s) => /* @__PURE__ */ e("div", { style: ke, children: /* @__PURE__ */ e(Be, { vector: s, onVectorSelect: Te, fixedHeight: !0 }) }, s.id))
                       }
                     )
                   ) : (
@@ -774,9 +774,9 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
                         style: {
                           display: "grid",
                           gridTemplateColumns: u === "bottom" ? "repeat(auto-fill, minmax(120px, 1fr))" : "repeat(auto-fill, minmax(100px, 1fr))",
-                          gap: Ce
+                          gap: Se
                         },
-                        children: z.map((s) => /* @__PURE__ */ e("div", { style: { aspectRatio: "1 / 1" }, children: /* @__PURE__ */ e(De, { vector: s, onVectorSelect: Ae, fixedHeight: !0 }) }, s.id))
+                        children: z.map((s) => /* @__PURE__ */ e("div", { style: { aspectRatio: "1 / 1", ...ke }, children: /* @__PURE__ */ e(Be, { vector: s, onVectorSelect: Te, fixedHeight: !0 }) }, s.id))
                       }
                     )
                   ),
@@ -791,11 +791,11 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
                 ] })
               ] }),
               g && /* @__PURE__ */ t(C.Panel, { id: "ai", className: "sc:flex sc:flex-col sc:gap-6 sc:p-6", children: [
-                /* @__PURE__ */ t("form", { onSubmit: Ze, className: "sc:flex sc:flex-col sc:gap-6", children: [
+                /* @__PURE__ */ t("form", { onSubmit: Je, className: "sc:flex sc:flex-col sc:gap-6", children: [
                   /* @__PURE__ */ t(Ie, { children: [
-                    /* @__PURE__ */ e(ke, { children: "Prompt" }),
+                    /* @__PURE__ */ e(Ee, { children: "Prompt" }),
                     /* @__PURE__ */ e(
-                      _e,
+                      Fe,
                       {
                         placeholder: "Describe the image you want to generate... (e.g., 'avocado, transparent background')",
                         value: F,
@@ -808,7 +808,7 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
                     )
                   ] }),
                   /* @__PURE__ */ e(
-                    W,
+                    Y,
                     {
                       type: "submit",
                       variant: "default",
@@ -819,7 +819,7 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
                         /* @__PURE__ */ e(p, { icon: "eos-icons:loading", className: "sc:size-5 sc:animate-spin" }),
                         "Generating..."
                       ] }) : /* @__PURE__ */ t(le, { children: [
-                        /* @__PURE__ */ e(ze, { size: 24 }),
+                        /* @__PURE__ */ e(Pe, { size: 24 }),
                         "Generate Image"
                       ] })
                     }
@@ -827,7 +827,7 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
                 ] }),
                 O && /* @__PURE__ */ e("div", { className: "sc:border-danger sc:bg-danger/10 sc:text-danger sc:rounded-2xl sc:border-2 sc:px-4 sc:py-3 sc:text-sm", children: O }),
                 H && /* @__PURE__ */ t("div", { className: "sc:flex sc:flex-col sc:gap-4 sc:rounded-2xl sc:border sc:border-divider sc:bg-muted/40 sc:p-6", children: [
-                  /* @__PURE__ */ e("div", { className: "sc:flex sc:items-center sc:justify-between", children: /* @__PURE__ */ e(ke, { className: "sc:text-muted sc:text-xs sc:uppercase sc:tracking-wide", children: "Generated Image" }) }),
+                  /* @__PURE__ */ e("div", { className: "sc:flex sc:items-center sc:justify-between", children: /* @__PURE__ */ e(Ee, { className: "sc:text-muted sc:text-xs sc:uppercase sc:tracking-wide", children: "Generated Image" }) }),
                   /* @__PURE__ */ e("div", { className: "sc:flex sc:w-fit sc:items-center sc:justify-center sc:overflow-hidden sc:rounded-lg sc:bg-white/50 sc:dark:bg-black/50", style: { maxHeight: "500px", maxWidth: "100%" }, children: /* @__PURE__ */ e(
                     "img",
                     {
@@ -837,14 +837,14 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
                     }
                   ) }),
                   /* @__PURE__ */ t("div", { className: "sc:flex sc:flex-col sc:gap-1", children: [
-                    /* @__PURE__ */ e(ke, { className: "sc:text-muted sc:text-xs", children: "Prompt" }),
+                    /* @__PURE__ */ e(Ee, { className: "sc:text-muted sc:text-xs", children: "Prompt" }),
                     /* @__PURE__ */ e("p", { className: "sc:text-sm", children: F })
                   ] }),
                   /* @__PURE__ */ t("div", { className: "sc:flex sc:flex-col sc:gap-3", children: [
                     i && /* @__PURE__ */ e(
-                      W,
+                      Y,
                       {
-                        onClick: Ke,
+                        onClick: Oe,
                         disabled: B || !H,
                         variant: "secondary",
                         size: "sm",
@@ -861,9 +861,9 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
                     ),
                     oe && /* @__PURE__ */ e("div", { className: "sc:border-danger sc:bg-danger/10 sc:text-danger sc:rounded-xl sc:border-2 sc:px-3 sc:py-2 sc:text-xs", children: oe }),
                     /* @__PURE__ */ e(
-                      W,
+                      Y,
                       {
-                        onClick: Je,
+                        onClick: Ke,
                         variant: "default",
                         className: "sc:w-full",
                         "data-testid": "ai-use-image-btn",
@@ -879,36 +879,36 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
       ]
     }
   );
-}, ps = Ge("ImagePanel"), ks = ({
+}, xs = He("ImagePanel"), ks = ({
   isOpen: d,
   onOpenChange: a,
   onImageAdded: x,
-  onImageChanged: k,
+  onImageChanged: E,
   changingElementId: u,
   onChangingElementIdChange: A,
   services: c
 }) => {
   var z;
-  const { elements: g, setElements: o, canvasEditorRef: i, artboardManager: b, executeAddElement: h, executeElementUpdate: U } = ss(), { selectedId: N, setSelectedId: T } = ts(), { activeArtboardId: v } = ns(), w = je(), S = $e(() => {
+  const { elements: g, setElements: o, canvasEditorRef: i, artboardManager: b, executeAddElement: h, executeElementUpdate: U } = ts(), { selectedId: N, setSelectedId: T } = cs(), { activeArtboardId: v } = os(), w = Ge(), S = je(() => {
     if (w.ingestImage) return w.ingestImage;
     if (c != null && c.ingestImage) return c.ingestImage;
-    if (c != null && c.ingestImageUrl) return os(c.ingestImageUrl);
-  }, [w.ingestImage, c == null ? void 0 : c.ingestImage, c == null ? void 0 : c.ingestImageUrl]), Y = M(S);
-  Y.current = S;
+    if (c != null && c.ingestImageUrl) return is(c.ingestImageUrl);
+  }, [w.ingestImage, c == null ? void 0 : c.ingestImage, c == null ? void 0 : c.ingestImageUrl]), W = M(S);
+  W.current = S;
   const se = M(g);
   se.current = g;
   const Q = M(N);
   Q.current = N;
-  const [E, te] = r(null), $ = u ?? E, _ = A ?? te, [D, ce] = r(!1), q = fe(
+  const [k, te] = r(null), $ = u ?? k, _ = A ?? te, [D, ce] = r(!1), q = fe(
     async (y) => {
       var ve, F;
-      const L = Y.current;
+      const L = W.current;
       if (L) {
         ce(!0);
         try {
           y = await L(y);
         } catch (G) {
-          ps.warn("Image ingest failed; placing the original URL", G);
+          xs.warn("Image ingest failed; placing the original URL", G);
         } finally {
           ce(!1);
         }
@@ -916,12 +916,12 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
       const P = se.current, J = Q.current;
       if ($) {
         const G = P.find((V) => V.id === $);
-        if (G && ds(G)) {
+        if (G && us(G)) {
           const V = G, l = G.clone(), O = ((ve = i.current) == null ? void 0 : ve.getZoom()) || 1, de = V.transformData.width || 300 / O, H = V.transformData.height || 300 / O;
           l.imageUrl = y, l.transformData.cropX = 0, l.transformData.cropY = 0, l.transformData.cropWidth = 1, l.transformData.cropHeight = 1, l.transformData.flipHorizontal = !1, l.transformData.flipVertical = !1, l.transformData.borderRadius = 0, l.imageLoaded = !1, l.imageElement = null, l.isCropping = !1, l.preserveDimensions = !1, l.transformData.width = de, l.transformData.height = H, l.onLoadCallback = (he) => {
             const B = he, ne = B.transformData.width, oe = B.transformData.height, ee = Math.min(de / ne, H / oe, 1);
             ee < 1 && (B.transformData.width = ne * ee, B.transformData.height = oe * ee), o((Ne) => Ne.map((pe) => pe.id === B.id ? B : pe));
-          }, l.loadImage(y), U(V, l), k && k(l);
+          }, l.loadImage(y), U(V, l), E && E(l);
         }
         _(null);
         return;
@@ -930,7 +930,7 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
         alert("Please create or select an artboard first");
         return;
       }
-      const ae = `element-${Date.now()}`, j = b.getActiveArtboard(), be = j ? j.x + j.width / 2 : window.innerWidth / 2, K = j ? j.y + j.height / 2 : window.innerHeight / 2, ge = ((F = i.current) == null ? void 0 : F.getZoom()) || 1, re = new ls({
+      const ae = `element-${Date.now()}`, j = b.getActiveArtboard(), be = j ? j.x + j.width / 2 : window.innerWidth / 2, K = j ? j.y + j.height / 2 : window.innerHeight / 2, ge = ((F = i.current) == null ? void 0 : F.getZoom()) || 1, re = new ds({
         id: ae,
         x: be,
         y: K,
@@ -959,7 +959,7 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
       T,
       _,
       x,
-      k
+      E
     ]
   ), R = fe(
     (y) => {
@@ -967,7 +967,7 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
     },
     [a, _]
   ), m = $ ? (z = g.find((y) => y.id === $)) == null ? void 0 : z.imageUrl : void 0, Z = /* @__PURE__ */ e(
-    hs,
+    ps,
     {
       isOpen: d,
       onToggle: R,
@@ -976,9 +976,9 @@ const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x
       busy: D
     }
   );
-  return c ? /* @__PURE__ */ e(is, { services: c, children: Z }) : Z;
+  return c ? /* @__PURE__ */ e(ls, { services: c, children: Z }) : Z;
 };
 export {
   ks as ImagePanel
 };
-//# sourceMappingURL=ImagePanel-DK3Zflyc.js.map
+//# sourceMappingURL=ImagePanel-DLxIDKV-.js.map