@snowcone-app/canvas 0.29.0 → 0.31.0

package/dist/{ImagePanel-CN2Bu3hf.js → ImagePanel-CEr0_FYy.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-CCvoKj_P.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-CgYnYTj7.js";
-import { c as ns, I as os } from "./FontAnalyzer-D4Sg-P6_.js";
-import { T as k, S as Te, a as xe, I as ye, L as be } from "./custom-icons-B5TRC1Ed.js";
-import { a as ls } from "./guards-uQtEQJbs.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, g as Oe } from "./design-builder-CBG2hKc8.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-bPXY9rCh.js";
+import { c as ns, I as os } from "./FontAnalyzer-BYhwxDhe.js";
+import { T as k, S as Te, a as xe, I as ye, L as be } from "./custom-icons-Co4rcW0S.js";
+import { a as ls } from "./guards-DgZuwVgu.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(
@@ -45,7 +45,7 @@ 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(), L = g.clientX - y.left, M = g.clientY - y.top, A = y.width, se = y.height, T = {
       top: M,
@@ -54,8 +54,8 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
       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: [
@@ -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,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(""), [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), [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]), 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([]), 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);
         }
@@ -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(
@@ -338,7 +338,7 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
     },
     [l]
   );
-  Z(() => {
+  J(() => {
     d && !g && b === "vector" && L.length === 0 && l && pe("");
   }, [d, b, l]);
   const Ge = (s) => {
@@ -346,7 +346,7 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
   }, Le = ae(() => {
     A || !z || !ce || pe(g, ce);
   }, [A, z, ce, g, pe]);
-  Z(() => {
+  J(() => {
     const s = Ce.current;
     if (!s || !d || b !== "vector") return;
     const a = new IntersectionObserver(
@@ -426,13 +426,13 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
         le(!1);
       }
     }
-  }, Qe = () => {
-    J && (N(J), t(!1));
-  }, We = async () => {
-    if (!(!i || !J)) {
+  }, We = () => {
+    Z && (N(Z), t(!1));
+  }, Qe = async () => {
+    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);
@@ -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" ? (
@@ -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"
                   }
@@ -830,8 +830,8 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
                   i && /* @__PURE__ */ e(
                     _,
                     {
-                      onClick: We,
-                      disabled: ue || !J,
+                      onClick: Qe,
+                      disabled: ue || !Z,
                       variant: "secondary",
                       size: "sm",
                       className: "sc:w-full sc:gap-2",
@@ -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;
@@ -948,4 +948,4 @@ const ms = "1px", Ie = "1px", Pe = Be.memo(function({ image: t, onImageSelect: N
 export {
   ws as ImagePanel
 };
-//# sourceMappingURL=ImagePanel-CN2Bu3hf.js.map
+//# sourceMappingURL=ImagePanel-CEr0_FYy.js.map