@snowcone-app/canvas 0.28.0 → 0.30.0

package/dist/{ImagePanel-CmQCxBGm.js → ImagePanel-CBgGqmVV.js}

@@ -1,12 +1,12 @@
 import { jsx as e, jsxs as c, Fragment as K } from "react/jsx-runtime";
-import * as Je from "react";
-import Be, { useMemo as Ze, useState as r, useRef as U, useEffect as Z, useCallback as ae } from "react";
-import { u as Ke, e as Oe } from "./editorErrors-8uDRMhow.js";
-import { n as es, z as ss, d as cs, K as ts, I as v, J as re, B as _, u as rs, C as as } from "./UnifiedFontService-BJzoqfBF.js";
-import { c as ns, I as os } from "./FontAnalyzer-PE6nysqE.js";
-import { T as k, S as Te, a as xe, I as ye, L as be } from "./custom-icons-BWiUGqD6.js";
-import { a as ls } from "./guards-BlbhM5MX.js";
-const De = Je.forwardRef(
+import * as Ze from "react";
+import Be, { useMemo as Je, useState as r, useRef as U, useEffect as J, useCallback as ae } from "react";
+import { u as Ke, e as Oe } from "./editorErrors-WzaNxU1Y.js";
+import { n as es, z as ss, d as cs, K as ts, I as v, A as re, B as _, u as rs, C as as } from "./UnifiedFontService-Co9tQ59z.js";
+import { c as ns, I as os } from "./FontAnalyzer-DKG5JK0x.js";
+import { T as k, S as Te, a as xe, I as ye, L as be } from "./custom-icons-BIaRovwG.js";
+import { a as ls } from "./guards-BSoX73yg.js";
+const De = Ze.forwardRef(
   ({ className: d, isInvalid: t, disabled: N, readOnly: E, required: u, variant: n, ...x }, l) => {
     const i = es(), m = n ?? (i.variant === "default" ? "filled" : "default");
     return /* @__PURE__ */ e(
@@ -47,11 +47,11 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
     x || N(t);
   }, Q = (g) => {
     if (!w.current) return "top";
-    const y = w.current.getBoundingClientRect(), L = g.clientX - y.left, M = g.clientY - y.top, A = y.width, se = y.height, T = {
-      top: M,
-      bottom: se - M,
-      left: L,
-      right: A - L
+    const y = w.current.getBoundingClientRect(), A = g.clientX - y.left, L = g.clientY - y.top, M = y.width, se = y.height, T = {
+      top: L,
+      bottom: se - L,
+      left: A,
+      right: M - A
     }, $ = Math.min(T.top, T.bottom, T.left, T.right);
     return $ === T.top ? "top" : $ === T.bottom ? "bottom" : $ === T.left ? "left" : "right";
   }, W = (g) => {
@@ -260,7 +260,7 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
   currentImageUrl: E,
   placement: u = "bottom"
 }) => {
-  const { imageSearch: n, generate: x, vectors: l, removeBackground: i } = cs(), m = Ze(
+  const { imageSearch: n, generate: x, vectors: l, removeBackground: i } = cs(), m = Je(
     () => [
       ...n ? ["search"] : [],
       "url",
@@ -268,13 +268,13 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
       ...x ? ["ai"] : []
     ],
     [n, l, x]
-  ), [h, C] = r(""), [w, V] = r(""), [S, R] = r([]), [f, Y] = r(!1), [Q, W] = r(null), [b, B] = r(m[0]), [O, ee] = r(1), [D, F] = r(!0), [j, P] = r("masonry"), [g, y] = r(""), [L, M] = r([]), [A, se] = r(!1), [T, $] = r(null), [ce, ne] = r(null), [z, G] = r(!0), [o, q] = r("grid"), [X, de] = r(""), [oe, le] = r(!1), [Ee, ve] = r(null), [J, Ne] = r(null), [ue, me] = r(!1), [fe, he] = r(null), ke = U(null), Ce = U(null), Re = U(null);
-  Z(() => {
+  ), [h, C] = r(""), [w, V] = r(""), [S, R] = r([]), [f, Y] = r(!1), [Q, W] = r(null), [b, B] = r(m[0]), [O, ee] = r(1), [D, F] = r(!0), [j, P] = r("masonry"), [g, y] = r(""), [A, L] = r([]), [M, se] = r(!1), [T, $] = r(null), [ce, ne] = r(null), [z, G] = r(!0), [o, q] = r("grid"), [X, de] = r(""), [oe, le] = r(!1), [Ee, ve] = r(null), [Z, Ne] = r(null), [ue, me] = r(!1), [fe, he] = r(null), ke = U(null), Ce = U(null), Re = U(null);
+  J(() => {
     m.includes(b) || B(m[0]);
-  }, [m, b]), Z(() => {
+  }, [m, b]), J(() => {
     d && E && (V(E), B("url"));
-  }, [d, E]), Z(() => {
-    d || (C(""), V(""), R([]), W(null), ee(1), F(!0), y(""), M([]), $(null), ne(null), G(!0));
+  }, [d, E]), J(() => {
+    d || (C(""), V(""), R([]), W(null), ee(1), F(!0), y(""), L([]), $(null), ne(null), G(!0));
   }, [d]);
   const ge = ae(
     async (s, a, p) => {
@@ -292,7 +292,7 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
     },
     [n]
   );
-  Z(() => {
+  J(() => {
     d && !h && b === "search" && S.length === 0 && n && ge("", 1, !1);
   }, [d, b, n]);
   const je = (s) => {
@@ -300,7 +300,7 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
   }, Se = ae(() => {
     f || !D || ge(h, O + 1, !0);
   }, [f, D, h, O, ge]);
-  Z(() => {
+  J(() => {
     const s = ke.current;
     if (!s || !d || b !== "search") return;
     const a = new IntersectionObserver(
@@ -325,7 +325,7 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
         se(!0), $(null);
         try {
           const { results: p, nextPage: I } = await l.search({ query: s, nextPage: a ?? null });
-          M(a ? (H) => {
+          L(a ? (H) => {
             const we = new Set(H.map((te) => te.id));
             return [...H, ...p.filter((te) => !we.has(te.id))];
           } : p), ne(I), G(I !== null);
@@ -338,20 +338,20 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
     },
     [l]
   );
-  Z(() => {
-    d && !g && b === "vector" && L.length === 0 && l && pe("");
+  J(() => {
+    d && !g && b === "vector" && A.length === 0 && l && pe("");
   }, [d, b, l]);
   const Ge = (s) => {
     s.preventDefault(), pe(g);
-  }, Le = ae(() => {
-    A || !z || !ce || pe(g, ce);
-  }, [A, z, ce, g, pe]);
-  Z(() => {
+  }, Ae = ae(() => {
+    M || !z || !ce || pe(g, ce);
+  }, [M, z, ce, g, pe]);
+  J(() => {
     const s = Ce.current;
     if (!s || !d || b !== "vector") return;
     const a = new IntersectionObserver(
       (p) => {
-        p[0].isIntersecting && z && !A && Le();
+        p[0].isIntersecting && z && !M && Ae();
       },
       {
         root: null,
@@ -362,11 +362,11 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
     return a.observe(s), () => {
       a.disconnect();
     };
-  }, [d, b, z, A, Le]);
-  const Me = (s) => {
+  }, [d, b, z, M, Ae]);
+  const Le = (s) => {
     const a = s.selectUrl || s.urls.svg || s.urls.png;
     a && (N(a), t(!1));
-  }, Ae = (s) => {
+  }, Me = (s) => {
     var a;
     try {
       Promise.resolve((a = n == null ? void 0 : n.trackSelect) == null ? void 0 : a.call(n, s)).catch(() => {
@@ -427,12 +427,12 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
       }
     }
   }, Qe = () => {
-    J && (N(J), t(!1));
+    Z && (N(Z), t(!1));
   }, We = async () => {
-    if (!(!i || !J)) {
+    if (!(!i || !Z)) {
       me(!0), he(null);
       try {
-        const s = await i(J);
+        const s = await i(Z);
         Ne(s);
       } catch (s) {
         he(Ve), ie.error("Error removing background:", s);
@@ -563,7 +563,7 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
                         gridAutoRows: u === "bottom" ? "200px" : "120px",
                         gap: ms
                       },
-                      children: S.map((s, a) => /* @__PURE__ */ e("div", { className: qe(s, a), children: /* @__PURE__ */ e(Pe, { image: s, onImageSelect: Ae, fixedHeight: !0 }) }, s.id))
+                      children: S.map((s, a) => /* @__PURE__ */ e("div", { className: qe(s, a), children: /* @__PURE__ */ e(Pe, { image: s, onImageSelect: Me, fixedHeight: !0 }) }, s.id))
                     }
                   )
                 ) : (
@@ -577,7 +577,7 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
                         gridTemplateColumns: u === "bottom" ? "repeat(auto-fill, minmax(150px, 1fr))" : "repeat(auto-fill, minmax(120px, 1fr))",
                         gap: Ie
                       },
-                      children: S.map((s) => /* @__PURE__ */ e("div", { style: { aspectRatio: "1 / 1" }, children: /* @__PURE__ */ e(Pe, { image: s, onImageSelect: Ae, fixedHeight: !0 }) }, s.id))
+                      children: S.map((s) => /* @__PURE__ */ e("div", { style: { aspectRatio: "1 / 1" }, children: /* @__PURE__ */ e(Pe, { image: s, onImageSelect: Me, fixedHeight: !0 }) }, s.id))
                     }
                   )
                 ),
@@ -721,7 +721,7 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
                     "data-testid": "vector-search-input"
                   }
                 ) }),
-                /* @__PURE__ */ e(_, { type: "submit", size: "icon", variant: "secondary", disabled: A, "aria-label": "Search", children: /* @__PURE__ */ e(v, { icon: re.search, className: "sc:size-5" }) }),
+                /* @__PURE__ */ e(_, { type: "submit", size: "icon", variant: "secondary", disabled: M, "aria-label": "Search", children: /* @__PURE__ */ e(v, { icon: re.search, className: "sc:size-5" }) }),
                 /* @__PURE__ */ e(
                   _,
                   {
@@ -734,8 +734,8 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
                 )
               ] }),
               T && /* @__PURE__ */ e("div", { className: "sc:border-danger sc:bg-danger/10 sc:text-danger sc:mx-6 sc:mb-3 sc:rounded-2xl sc:border-2 sc:px-4 sc:py-3 sc:text-sm", children: T }),
-              A && L.length === 0 && /* @__PURE__ */ e("div", { className: "sc:text-muted sc:px-6 sc:py-8 sc:text-center sc:text-sm", children: "Loading vectors..." }),
-              L.length > 0 && /* @__PURE__ */ c("div", { className: "sc:mx-6 sc:overflow-hidden sc:rounded-t-2xl", children: [
+              M && A.length === 0 && /* @__PURE__ */ e("div", { className: "sc:text-muted sc:px-6 sc:py-8 sc:text-center sc:text-sm", children: "Loading vectors..." }),
+              A.length > 0 && /* @__PURE__ */ c("div", { className: "sc:mx-6 sc:overflow-hidden sc:rounded-t-2xl", children: [
                 o === "masonry" ? (
                   /* CSS Grid Masonry */
                   /* @__PURE__ */ e(
@@ -748,7 +748,7 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
                         gridAutoRows: u === "bottom" ? "150px" : "120px",
                         gap: Ie
                       },
-                      children: L.map((s) => /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(Ue, { vector: s, onVectorSelect: Me, fixedHeight: !0 }) }, s.id))
+                      children: A.map((s) => /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(Ue, { vector: s, onVectorSelect: Le, fixedHeight: !0 }) }, s.id))
                     }
                   )
                 ) : (
@@ -762,15 +762,15 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
                         gridTemplateColumns: u === "bottom" ? "repeat(auto-fill, minmax(120px, 1fr))" : "repeat(auto-fill, minmax(100px, 1fr))",
                         gap: Ie
                       },
-                      children: L.map((s) => /* @__PURE__ */ e("div", { style: { aspectRatio: "1 / 1" }, children: /* @__PURE__ */ e(Ue, { vector: s, onVectorSelect: Me, fixedHeight: !0 }) }, s.id))
+                      children: A.map((s) => /* @__PURE__ */ e("div", { style: { aspectRatio: "1 / 1" }, children: /* @__PURE__ */ e(Ue, { vector: s, onVectorSelect: Le, fixedHeight: !0 }) }, s.id))
                     }
                   )
                 ),
                 z && /* @__PURE__ */ e("div", { ref: Ce, className: "sc:h-px" }),
-                A && /* @__PURE__ */ e("div", { className: "sc:text-muted sc:py-4 sc:text-center sc:text-sm", children: "Loading more..." }),
-                !z && !A && /* @__PURE__ */ e("div", { className: "sc:text-muted sc:py-6 sc:text-center sc:text-sm", children: "No more vectors" })
+                M && /* @__PURE__ */ e("div", { className: "sc:text-muted sc:py-4 sc:text-center sc:text-sm", children: "Loading more..." }),
+                !z && !M && /* @__PURE__ */ e("div", { className: "sc:text-muted sc:py-6 sc:text-center sc:text-sm", children: "No more vectors" })
               ] }),
-              !A && L.length === 0 && g && /* @__PURE__ */ c("div", { className: "sc:text-muted sc:px-6 sc:py-12 sc:text-center sc:text-sm", children: [
+              !M && A.length === 0 && g && /* @__PURE__ */ c("div", { className: "sc:text-muted sc:px-6 sc:py-12 sc:text-center sc:text-sm", children: [
                 'No vectors found for "',
                 g,
                 '"'
@@ -812,12 +812,12 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
                 )
               ] }),
               Ee && /* @__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: Ee }),
-              J && /* @__PURE__ */ c("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: [
+              Z && /* @__PURE__ */ c("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(be, { 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",
                   {
-                    src: J,
+                    src: Z,
                     alt: X,
                     className: "sc:max-h-full sc:max-w-full sc:object-contain"
                   }
@@ -831,7 +831,7 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
                     _,
                     {
                       onClick: We,
-                      disabled: ue || !J,
+                      disabled: ue || !Z,
                       variant: "secondary",
                       size: "sm",
                       className: "sc:w-full sc:gap-2",
@@ -898,9 +898,9 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
         alert("Please create or select an artboard first");
         return;
       }
-      const L = `element-${Date.now()}`, M = h.getActiveArtboard(), A = M ? M.x + M.width / 2 : window.innerWidth / 2, se = M ? M.y + M.height / 2 : window.innerHeight / 2, T = ((ne = m.current) == null ? void 0 : ne.getZoom()) || 1, $ = new os({
-        id: L,
-        x: A,
+      const A = `element-${Date.now()}`, L = h.getActiveArtboard(), M = L ? L.x + L.width / 2 : window.innerWidth / 2, se = L ? L.y + L.height / 2 : window.innerHeight / 2, T = ((ne = m.current) == null ? void 0 : ne.getZoom()) || 1, $ = new os({
+        id: A,
+        x: M,
         y: se,
         imageUrl: P,
         transformData: {
@@ -912,7 +912,7 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
           i((o) => o.map((q) => q.id === G.id ? G : q));
         }
       });
-      h.addElementToArtboard(L, R), C($, R, y || void 0), S(L), N && N($);
+      h.addElementToArtboard(A, R), C($, R, y || void 0), S(A), N && N($);
     },
     [
       b,
@@ -948,4 +948,4 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
 export {
   ws as ImagePanel
 };
-//# sourceMappingURL=ImagePanel-CmQCxBGm.js.map
+//# sourceMappingURL=ImagePanel-CBgGqmVV.js.map