@snowcone-app/canvas 0.30.0 → 0.32.0

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

@@ -1,11 +1,11 @@
 import { jsx as e, jsxs as c, Fragment as K } from "react/jsx-runtime";
 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";
+import { u as Ke, g as Oe } from "./design-builder-BpbYUYtK.js";
+import { o as es, N as ss, d as cs, W as ts, I as v, O as re, B as _, u as rs, C as as } from "./useCommands-DwnZHUg8.js";
+import { c as ns, I as os } from "./FontAnalyzer-BrKY6XYn.js";
+import { T as k, S as Te, a as xe, I as ye, L as be } from "./custom-icons-DTWtkJ9N.js";
+import { a as ls } from "./guards-BhaQgJrE.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");
@@ -45,17 +45,17 @@ function us(d, t) {
 const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N, fixedHeight: E = !1 }) {
   const [u, n] = r(!1), [x, l] = r(!1), [i, m] = r("top"), h = U(null), C = U(null), w = U(null), V = U(!0), [S, R] = r(!1), f = U(null), Y = () => {
     x || N(t);
-  }, Q = (g) => {
+  }, W = (g) => {
     if (!w.current) return "top";
-    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
+    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
     }, $ = Math.min(T.top, T.bottom, T.left, T.right);
     return $ === T.top ? "top" : $ === T.bottom ? "bottom" : $ === T.left ? "left" : "right";
-  }, W = (g) => {
-    const y = Q(g);
+  }, Q = (g) => {
+    const y = W(g);
     f.current && (cancelAnimationFrame(f.current), f.current = null), y !== i ? (R(!0), m(y), f.current = requestAnimationFrame(() => {
       f.current = requestAnimationFrame(() => {
         R(!1), n(!0), f.current = null;
@@ -63,7 +63,7 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
     })) : (m(y), n(!0)), V.current = !1;
   }, b = (g) => {
     f.current && (cancelAnimationFrame(f.current), f.current = null);
-    const y = Q(g);
+    const y = W(g);
     m(y), R(!1), n(!1);
   }, B = () => {
     C.current && (clearTimeout(C.current), C.current = null), h.current = setTimeout(() => {
@@ -95,7 +95,7 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
     {
       ref: w,
       onClick: Y,
-      onMouseEnter: W,
+      onMouseEnter: Q,
       onMouseLeave: b,
       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: [
@@ -268,23 +268,23 @@ 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(""), [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);
+  ), [h, C] = r(""), [w, V] = r(""), [S, R] = r([]), [f, Y] = r(!1), [W, Q] = 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), [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]), J(() => {
     d && E && (V(E), B("url"));
   }, [d, E]), J(() => {
-    d || (C(""), V(""), R([]), W(null), ee(1), F(!0), y(""), L([]), $(null), ne(null), G(!0));
+    d || (C(""), V(""), R([]), Q(null), ee(1), F(!0), y(""), M([]), $(null), ne(null), G(!0));
   }, [d]);
   const ge = ae(
     async (s, a, p) => {
       if (n) {
-        Y(!0), W(null);
+        Y(!0), Q(null);
         try {
           const I = await n.search({ query: s, page: a, perPage: 30 });
           R((H) => p ? [...H, ...I.results] : I.results), ee(I.page), F(I.hasMore);
         } catch (I) {
-          W(is), ie.error("Error searching images:", I);
+          Q(is), ie.error("Error searching images:", I);
         } finally {
           Y(!1);
         }
@@ -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 });
-          L(a ? (H) => {
+          M(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);
@@ -339,19 +339,19 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
     [l]
   );
   J(() => {
-    d && !g && b === "vector" && A.length === 0 && l && pe("");
+    d && !g && b === "vector" && L.length === 0 && l && pe("");
   }, [d, b, l]);
   const Ge = (s) => {
     s.preventDefault(), pe(g);
-  }, Ae = ae(() => {
-    M || !z || !ce || pe(g, ce);
-  }, [M, z, ce, g, pe]);
+  }, Le = ae(() => {
+    A || !z || !ce || pe(g, ce);
+  }, [A, z, ce, g, pe]);
   J(() => {
     const s = Ce.current;
     if (!s || !d || b !== "vector") return;
     const a = new IntersectionObserver(
       (p) => {
-        p[0].isIntersecting && z && !M && Ae();
+        p[0].isIntersecting && z && !A && Le();
       },
       {
         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, M, Ae]);
-  const Le = (s) => {
+  }, [d, b, z, A, Le]);
+  const Me = (s) => {
     const a = s.selectUrl || s.urls.svg || s.urls.png;
     a && (N(a), t(!1));
-  }, Me = (s) => {
+  }, Ae = (s) => {
     var a;
     try {
       Promise.resolve((a = n == null ? void 0 : n.trackSelect) == null ? void 0 : a.call(n, s)).catch(() => {
@@ -426,9 +426,9 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
         le(!1);
       }
     }
-  }, Qe = () => {
+  }, We = () => {
     Z && (N(Z), t(!1));
-  }, We = async () => {
+  }, Qe = async () => {
     if (!(!i || !Z)) {
       me(!0), he(null);
       try {
@@ -548,7 +548,7 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
                   }
                 )
               ] }),
-              Q && /* @__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: Q }),
+              W && /* @__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: W }),
               f && S.length === 0 && /* @__PURE__ */ e("div", { className: "sc:text-muted sc:px-6 sc:py-8 sc:text-center sc:text-sm", children: "Loading images..." }),
               S.length > 0 && /* @__PURE__ */ c("div", { className: "sc:mx-6 sc:overflow-hidden sc:rounded-t-2xl", children: [
                 j === "masonry" ? (
@@ -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: Me, fixedHeight: !0 }) }, s.id))
+                      children: S.map((s, a) => /* @__PURE__ */ e("div", { className: qe(s, a), children: /* @__PURE__ */ e(Pe, { image: s, onImageSelect: Ae, 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: Me, fixedHeight: !0 }) }, s.id))
+                      children: S.map((s) => /* @__PURE__ */ e("div", { style: { aspectRatio: "1 / 1" }, children: /* @__PURE__ */ e(Pe, { image: s, onImageSelect: Ae, 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: M, "aria-label": "Search", children: /* @__PURE__ */ e(v, { icon: re.search, className: "sc:size-5" }) }),
+                /* @__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(
                   _,
                   {
@@ -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 }),
-              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: [
+              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: [
                 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: A.map((s) => /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(Ue, { vector: s, onVectorSelect: Le, fixedHeight: !0 }) }, s.id))
+                      children: L.map((s) => /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(Ue, { vector: s, onVectorSelect: Me, 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: A.map((s) => /* @__PURE__ */ e("div", { style: { aspectRatio: "1 / 1" }, children: /* @__PURE__ */ e(Ue, { vector: s, onVectorSelect: Le, fixedHeight: !0 }) }, s.id))
+                      children: L.map((s) => /* @__PURE__ */ e("div", { style: { aspectRatio: "1 / 1" }, children: /* @__PURE__ */ e(Ue, { vector: s, onVectorSelect: Me, fixedHeight: !0 }) }, s.id))
                     }
                   )
                 ),
                 z && /* @__PURE__ */ e("div", { ref: Ce, className: "sc:h-px" }),
-                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 && /* @__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 && A.length === 0 && g && /* @__PURE__ */ c("div", { className: "sc:text-muted sc:px-6 sc:py-12 sc:text-center sc:text-sm", children: [
+              !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: [
                 'No vectors found for "',
                 g,
                 '"'
@@ -830,7 +830,7 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
                   i && /* @__PURE__ */ e(
                     _,
                     {
-                      onClick: We,
+                      onClick: Qe,
                       disabled: ue || !Z,
                       variant: "secondary",
                       size: "sm",
@@ -849,7 +849,7 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
                   /* @__PURE__ */ e(
                     _,
                     {
-                      onClick: Qe,
+                      onClick: We,
                       variant: "default",
                       className: "sc:w-full",
                       "data-testid": "ai-use-image-btn",
@@ -878,7 +878,7 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
   f.current = l;
   const Y = U(V);
   Y.current = V;
-  const [Q, W] = r(null), b = u ?? Q, B = n ?? W, O = ae(
+  const [W, Q] = r(null), b = u ?? W, B = n ?? Q, O = ae(
     (P) => {
       var ce, ne;
       const g = f.current, y = Y.current;
@@ -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 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,
+      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,
         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(A, R), C($, R, y || void 0), S(A), N && N($);
+      h.addElementToArtboard(L, R), C($, R, y || void 0), S(L), 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-CBgGqmVV.js.map
+//# sourceMappingURL=ImagePanel-ntJBepby.js.map