@snowcone-app/canvas 0.33.1 → 0.34.0

package/dist/ImagePanel-Ckpc6QqR.js

@@ -1,951 +0,0 @@
-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, g as Oe } from "./design-builder-D4izkvlb.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-DmewMc5w.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-QEBlxVyq.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");
-    return /* @__PURE__ */ e(
-      "textarea",
-      {
-        className: ss(
-          "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",
-          "sc:focus-visible:outline-none sc:focus-visible:ring-2 sc:focus-visible:ring-focus",
-          "sc:disabled:cursor-not-allowed sc:disabled:opacity-50",
-          // Variant styles - semantic: field on page vs field on surface
-          m === "default" && "sc:bg-field sc:shadow-soft sc:dark:shadow-none",
-          m === "filled" && "sc:bg-[var(--color-field-on-surface)]",
-          t && "sc:ring-2 sc:ring-danger sc:focus-visible:ring-danger",
-          d
-        ),
-        ref: l,
-        disabled: N,
-        readOnly: E,
-        required: u,
-        "aria-invalid": t,
-        ...x
-      }
-    );
-  }
-);
-De.displayName = "Textarea";
-const $e = De;
-$e.displayName = "TextArea";
-const ie = ns("ImageBrowser"), is = "Image search is temporarily unavailable.", ze = "Image generation is temporarily unavailable.", ds = "Vector search is temporarily unavailable.", Ve = "Background removal is temporarily unavailable.";
-function us(d, t) {
-  const N = d instanceof Error ? d.message : "";
-  return !N || /VITE_|NEXT_PUBLIC_|\.env/i.test(N) ? t : N;
-}
-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);
-  }, 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,
-      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";
-  }, 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;
-      });
-    })) : (m(y), n(!0)), V.current = !1;
-  }, b = (g) => {
-    f.current && (cancelAnimationFrame(f.current), f.current = null);
-    const y = W(g);
-    m(y), R(!1), n(!1);
-  }, B = () => {
-    C.current && (clearTimeout(C.current), C.current = null), h.current = setTimeout(() => {
-      l(!0);
-    }, 400);
-  }, O = () => {
-    h.current && (clearTimeout(h.current), h.current = null), l(!1);
-  }, ee = () => {
-    h.current && (clearTimeout(h.current), h.current = null), C.current && (clearTimeout(C.current), C.current = null);
-  }, D = () => {
-    l(!1);
-  }, F = t.source === "unsplash" ? "Unsplash" : "Pixabay", j = u || x, P = () => {
-    if (!u) return `scale(${1.12})`;
-    switch (i) {
-      case "top":
-        return `scale(${1.12}) translateY(5%)`;
-      case "bottom":
-        return `scale(${1.12}) translateY(-5%)`;
-      case "left":
-        return `scale(${1.12}) translateX(5%)`;
-      case "right":
-        return `scale(${1.12}) translateX(-5%)`;
-      default:
-        return `scale(${1.12})`;
-    }
-  };
-  return /* @__PURE__ */ c(
-    "div",
-    {
-      ref: w,
-      onClick: Y,
-      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: [
-        /* @__PURE__ */ e(
-          "img",
-          {
-            src: t.urls.small,
-            alt: t.alt || "Image",
-            className: `sc:duration-500 sc:ease-out ${S ? "sc:transition-none" : "sc:transition-transform"} ${E ? "sc:h-full sc:w-full sc:object-cover" : "sc:w-full sc:object-cover"}`,
-            style: {
-              transform: P(),
-              filter: u ? "brightness(1)" : "brightness(0.95)"
-            }
-          }
-        ),
-        /* @__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 ${j ? "sc:opacity-100" : "sc:pointer-events-none sc:opacity-0"}`,
-            "aria-label": "Image info",
-            onMouseEnter: B,
-            onMouseLeave: O,
-            children: /* @__PURE__ */ e(v, { icon: "lucide:aperture", className: "sc:size-4 sc:text-white/80" })
-          }
-        ) }),
-        /* @__PURE__ */ e(
-          "div",
-          {
-            className: `sc:absolute sc:inset-x-0 sc:bottom-0 sc:z-0 sc:bg-linear-to-t sc:from-black/80 sc:via-black/60 sc:to-transparent sc:px-3 sc:py-3 sc:pt-8 sc:transition-transform sc:duration-300 sc:ease-out ${x ? "sc:translate-y-0" : "sc:translate-y-full"}`,
-            onMouseEnter: ee,
-            onMouseLeave: D,
-            children: /* @__PURE__ */ c("div", { className: "sc:flex sc:flex-col sc:gap-1", children: [
-              /* @__PURE__ */ c("div", { className: "sc:flex sc:items-center sc:gap-2", children: [
-                /* @__PURE__ */ e(
-                  v,
-                  {
-                    icon: t.source === "unsplash" ? "simple-icons:unsplash" : "simple-icons:pixabay",
-                    className: "sc:size-3 sc:text-white/80"
-                  }
-                ),
-                /* @__PURE__ */ e("span", { className: "sc:text-xs sc:font-medium sc:text-white/80", children: F })
-              ] }),
-              /* @__PURE__ */ c("div", { className: "sc:flex sc:flex-col sc:gap-0.5", children: [
-                /* @__PURE__ */ e("span", { className: "sc:text-xs sc:text-white/60", children: "Photo by" }),
-                /* @__PURE__ */ c("span", { className: "sc:text-sm sc:font-medium sc:text-white", children: [
-                  t.attribution.profileUrl ? /* @__PURE__ */ e(
-                    "a",
-                    {
-                      href: t.attribution.profileUrl,
-                      target: "_blank",
-                      rel: "noopener noreferrer",
-                      onClick: (g) => g.stopPropagation(),
-                      className: "sc:underline sc:decoration-white/40 sc:underline-offset-2 sc:hover:decoration-white",
-                      children: t.attribution.name
-                    }
-                  ) : t.attribution.name,
-                  t.attribution.sourceUrl && /* @__PURE__ */ c(K, { children: [
-                    " ",
-                    /* @__PURE__ */ e("span", { className: "sc:font-normal sc:text-white/60", children: "on" }),
-                    " ",
-                    /* @__PURE__ */ e(
-                      "a",
-                      {
-                        href: t.attribution.sourceUrl,
-                        target: "_blank",
-                        rel: "noopener noreferrer",
-                        onClick: (g) => g.stopPropagation(),
-                        className: "sc:underline sc:decoration-white/40 sc:underline-offset-2 sc:hover:decoration-white",
-                        children: F
-                      }
-                    )
-                  ] })
-                ] })
-              ] })
-            ] })
-          }
-        )
-      ]
-    }
-  );
-}), Ue = Be.memo(function({ vector: t, onVectorSelect: N, fixedHeight: E = !1 }) {
-  const [u, n] = r(!1), [x, l] = r(!1), i = U(null), m = U(null), h = () => {
-    x || N(t);
-  }, C = () => {
-    m.current && (clearTimeout(m.current), m.current = null), i.current = setTimeout(() => {
-      l(!0);
-    }, 400);
-  }, w = () => {
-    i.current && (clearTimeout(i.current), i.current = null), l(!1);
-  }, V = () => {
-    i.current && (clearTimeout(i.current), i.current = null), m.current && (clearTimeout(m.current), m.current = null);
-  }, S = () => {
-    l(!1);
-  }, R = u || x;
-  return /* @__PURE__ */ c(
-    "div",
-    {
-      onClick: h,
-      onMouseEnter: () => n(!0),
-      onMouseLeave: () => n(!1),
-      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 ${E ? "sc:h-full sc:w-full" : "sc:aspect-square sc:w-full"}`,
-            children: /* @__PURE__ */ e(
-              "img",
-              {
-                src: t.urls.preview,
-                alt: t.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)"
-                }
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ c("div", { className: "sc:absolute sc:top-2 sc:right-2 sc:z-10 sc:flex sc:items-center sc:gap-2", children: [
-          !t.urls.svg && /* @__PURE__ */ e(
-            "span",
-            {
-              className: `sc:rounded-xs sc:bg-amber-500/90 sc:px-1.5 sc:py-0.5 sc:text-[10px] sc:font-semibold sc:uppercase sc:tracking-wide sc:text-white sc:shadow-sm sc:transition-all sc:duration-300 sc:ease-in-out ${R ? "sc:opacity-100" : "sc:pointer-events-none sc:opacity-0"}`,
-              children: "PNG"
-            }
-          ),
-          /* @__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 ${R ? "sc:opacity-100" : "sc:pointer-events-none sc:opacity-0"}`,
-              "aria-label": "Vector info",
-              onMouseEnter: C,
-              onMouseLeave: w,
-              children: /* @__PURE__ */ e(v, { icon: "lucide:aperture", className: "sc:size-4 sc:text-white/80" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ c(
-          "div",
-          {
-            className: `sc:absolute sc:inset-x-0 sc:bottom-0 sc:z-0 sc:bg-linear-to-t sc:from-black/80 sc:via-black/60 sc:to-transparent sc:px-3 sc:py-3 sc:pt-8 sc:transition-transform sc:duration-300 sc:ease-out ${x ? "sc:translate-y-0" : "sc:translate-y-full"}`,
-            onMouseEnter: V,
-            onMouseLeave: S,
-            children: [
-              /* @__PURE__ */ c("div", { className: "sc:mb-1", children: [
-                /* @__PURE__ */ e(v, { icon: "mdi:cube-outline", className: "sc:mr-2 sc:inline-block sc:size-3 sc:text-white/80" }),
-                /* @__PURE__ */ e("span", { className: "sc:text-xs sc:font-medium sc:text-white/80", children: "Noun Project" })
-              ] }),
-              /* @__PURE__ */ e("div", { className: "sc:text-xs sc:text-white/60", children: "Icon by" }),
-              /* @__PURE__ */ e("div", { className: "sc:text-sm sc:font-medium sc:text-white", children: t.uploader.name })
-            ]
-          }
-        )
-      ]
-    }
-  );
-}), fs = ({
-  isOpen: d,
-  onToggle: t,
-  onImageSelect: N,
-  currentImageUrl: E,
-  placement: u = "bottom"
-}) => {
-  const { imageSearch: n, generate: x, vectors: l, removeBackground: i } = cs(), m = Je(
-    () => [
-      ...n ? ["search"] : [],
-      "url",
-      ...l ? ["vector"] : [],
-      ...x ? ["ai"] : []
-    ],
-    [n, l, x]
-  ), [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([]), 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), 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) {
-          Q(is), ie.error("Error searching images:", I);
-        } finally {
-          Y(!1);
-        }
-      }
-    },
-    [n]
-  );
-  J(() => {
-    d && !h && b === "search" && S.length === 0 && n && ge("", 1, !1);
-  }, [d, b, n]);
-  const je = (s) => {
-    s.preventDefault(), ge(h, 1, !1);
-  }, Se = ae(() => {
-    f || !D || ge(h, O + 1, !0);
-  }, [f, D, h, O, ge]);
-  J(() => {
-    const s = ke.current;
-    if (!s || !d || b !== "search") return;
-    const a = new IntersectionObserver(
-      (p) => {
-        p[0].isIntersecting && D && !f && Se();
-      },
-      {
-        root: null,
-        // viewport
-        rootMargin: "200px",
-        // Trigger 200px before sentinel is visible
-        threshold: 0
-      }
-    );
-    return a.observe(s), () => {
-      a.disconnect();
-    };
-  }, [d, b, D, f, Se]);
-  const pe = ae(
-    async (s, a) => {
-      if (l) {
-        se(!0), $(null);
-        try {
-          const { results: p, nextPage: I } = await l.search({ query: s, nextPage: a ?? null });
-          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);
-        } catch (p) {
-          $(ds), ie.error("Error searching vectors:", p);
-        } finally {
-          se(!1);
-        }
-      }
-    },
-    [l]
-  );
-  J(() => {
-    d && !g && b === "vector" && L.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]);
-  J(() => {
-    const s = Ce.current;
-    if (!s || !d || b !== "vector") return;
-    const a = new IntersectionObserver(
-      (p) => {
-        p[0].isIntersecting && z && !A && Le();
-      },
-      {
-        root: null,
-        rootMargin: "200px",
-        threshold: 0
-      }
-    );
-    return a.observe(s), () => {
-      a.disconnect();
-    };
-  }, [d, b, z, A, Le]);
-  const Me = (s) => {
-    const a = s.selectUrl || s.urls.svg || s.urls.png;
-    a && (N(a), t(!1));
-  }, Ae = (s) => {
-    var a;
-    try {
-      Promise.resolve((a = n == null ? void 0 : n.trackSelect) == null ? void 0 : a.call(n, s)).catch(() => {
-      });
-    } catch {
-    }
-    N(s.urls.regular), t(!1);
-  }, He = (s) => {
-    s.preventDefault(), w.trim() && (N(w.trim()), t(!1));
-  }, _e = (s) => {
-    var p;
-    const a = (p = s.target.files) == null ? void 0 : p[0];
-    if (a && a.type.startsWith("image/")) {
-      const I = new FileReader();
-      I.onload = (H) => {
-        var te;
-        const we = (te = H.target) == null ? void 0 : te.result;
-        V(we);
-      }, I.readAsDataURL(a);
-    }
-  }, Fe = () => {
-    var s;
-    (s = Re.current) == null || s.click();
-  }, Xe = async () => {
-    if (!(!i || !w.trim())) {
-      me(!0), he(null);
-      try {
-        const s = await i(w);
-        V(s);
-      } catch (s) {
-        he(Ve), ie.error("Error removing background:", s);
-      } finally {
-        me(!1);
-      }
-    }
-  }, Ye = async (s) => {
-    var a, p;
-    if (s.preventDefault(), !!x) {
-      if (!X.trim()) {
-        ve("Please enter a prompt");
-        return;
-      }
-      le(!0), ve(null), Ne(null);
-      try {
-        const H = (p = (a = (await x.generate({
-          prompt: X,
-          width: 1024,
-          height: 1024,
-          numberResults: 1
-        })).images) == null ? void 0 : a[0]) == null ? void 0 : p.imageUrl;
-        if (!H)
-          throw new Error(ze);
-        Ne(H);
-      } catch (I) {
-        ve(us(I, ze)), ie.error("Error generating AI image:", I);
-      } finally {
-        le(!1);
-      }
-    }
-  }, We = () => {
-    Z && (N(Z), t(!1));
-  }, Qe = async () => {
-    if (!(!i || !Z)) {
-      me(!0), he(null);
-      try {
-        const s = await i(Z);
-        Ne(s);
-      } catch (s) {
-        he(Ve), ie.error("Error removing background:", s);
-      } finally {
-        me(!1);
-      }
-    }
-  }, qe = (s, a) => {
-    const p = s.width / s.height;
-    return a % 12 === 0 && p > 0.8 && p < 1.2 ? "sc:col-span-2 sc:row-span-2" : p < 0.75 ? "sc:row-span-2" : p > 1.5 ? "sc:col-span-2" : "";
-  };
-  return /* @__PURE__ */ e(
-    ts,
-    {
-      isOpen: d,
-      onClose: () => t(!1),
-      title: "Image Browser",
-      description: "Browse images or enter a custom image URL",
-      placement: u,
-      height: u === "bottom" ? "90vh" : void 0,
-      width: u !== "bottom" ? "500px" : void 0,
-      hideHandle: !0,
-      hideVisibleTitle: !0,
-      showCloseButton: !1,
-      "data-testid": "image-browser-drawer",
-      children: /* @__PURE__ */ c(
-        k,
-        {
-          value: b,
-          onValueChange: (s) => B(s),
-          className: "sc:flex sc:flex-col",
-          "data-testid": "image-browser-container",
-          children: [
-            /* @__PURE__ */ e(k.ListContainer, { className: "sc:flex sc:justify-center sc:pt-4 sc:pb-2", children: /* @__PURE__ */ c(
-              k.List,
-              {
-                className: "sc:h-14 sc:gap-1 sc:px-1.5 sc:md:h-12",
-                "aria-label": "Image source",
-                children: [
-                  n && /* @__PURE__ */ c(
-                    k.Tab,
-                    {
-                      id: "search",
-                      className: "sc:h-11 sc:w-14 sc:px-0 sc:md:h-9 sc:md:w-11",
-                      "data-testid": "image-tab-search",
-                      children: [
-                        /* @__PURE__ */ e(v, { icon: re.image, className: "sc:size-6" }),
-                        /* @__PURE__ */ e(k.Indicator, {})
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ c(
-                    k.Tab,
-                    {
-                      id: "url",
-                      className: "sc:h-11 sc:w-14 sc:px-0 sc:md:h-9 sc:md:w-11",
-                      "data-testid": "image-tab-url",
-                      children: [
-                        /* @__PURE__ */ e(v, { icon: re.link, className: "sc:size-6" }),
-                        /* @__PURE__ */ e(k.Indicator, {})
-                      ]
-                    }
-                  ),
-                  l && /* @__PURE__ */ c(
-                    k.Tab,
-                    {
-                      id: "vector",
-                      className: "sc:h-11 sc:w-14 sc:px-0 sc:md:h-9 sc:md:w-11",
-                      "data-testid": "image-tab-vector",
-                      children: [
-                        /* @__PURE__ */ e(v, { icon: "fa6-solid:icons", className: "sc:size-5" }),
-                        /* @__PURE__ */ e(k.Indicator, {})
-                      ]
-                    }
-                  ),
-                  x && /* @__PURE__ */ c(
-                    k.Tab,
-                    {
-                      id: "ai",
-                      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(Te, { size: 24 }),
-                        /* @__PURE__ */ e(k.Indicator, {})
-                      ]
-                    }
-                  )
-                ]
-              }
-            ) }),
-            n && /* @__PURE__ */ c(k.Panel, { id: "search", className: "sc:flex sc:flex-col", children: [
-              /* @__PURE__ */ c("form", { onSubmit: je, 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(xe, { className: "sc:flex-1", "aria-label": "Search for images", children: /* @__PURE__ */ e(
-                  ye,
-                  {
-                    type: "text",
-                    placeholder: "Search for images...",
-                    value: h,
-                    onChange: (s) => C(s.target.value),
-                    variant: "subtle",
-                    "data-testid": "image-search-input"
-                  }
-                ) }),
-                /* @__PURE__ */ e(_, { type: "submit", size: "icon", variant: "secondary", disabled: f, "aria-label": "Search", children: /* @__PURE__ */ e(v, { icon: re.search, className: "sc:size-5" }) }),
-                /* @__PURE__ */ e(
-                  _,
-                  {
-                    size: "icon",
-                    variant: "secondary",
-                    onClick: () => P(j === "grid" ? "masonry" : "grid"),
-                    "aria-label": j === "grid" ? "Switch to masonry view" : "Switch to grid view",
-                    children: j === "grid" ? /* @__PURE__ */ e(v, { icon: "lucide:layout-grid", className: "sc:size-5" }) : /* @__PURE__ */ e(v, { icon: re.grip, className: "sc:size-5" })
-                  }
-                )
-              ] }),
-              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" ? (
-                  /* CSS Grid Masonry (Dense) */
-                  /* @__PURE__ */ e(
-                    "div",
-                    {
-                      className: "sc:grid sc:grid-flow-dense sc:pb-4",
-                      style: {
-                        display: "grid",
-                        gridTemplateColumns: u === "bottom" ? "repeat(auto-fill, minmax(200px, 1fr))" : "repeat(3, 1fr)",
-                        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))
-                    }
-                  )
-                ) : (
-                  /* Fixed Height Grid - Square Tiles */
-                  /* @__PURE__ */ e(
-                    "div",
-                    {
-                      className: "sc:pb-4",
-                      style: {
-                        display: "grid",
-                        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))
-                    }
-                  )
-                ),
-                D && /* @__PURE__ */ e("div", { ref: ke, className: "sc:h-px" }),
-                f && /* @__PURE__ */ e("div", { className: "sc:text-muted sc:py-4 sc:text-center sc:text-sm", children: "Loading more..." }),
-                !D && !f && /* @__PURE__ */ e("div", { className: "sc:text-muted sc:py-6 sc:text-center sc:text-sm", children: "No more images" })
-              ] }),
-              !f && S.length === 0 && h && /* @__PURE__ */ c("div", { className: "sc:text-muted sc:px-6 sc:py-12 sc:text-center sc:text-sm", children: [
-                'No images found for "',
-                h,
-                '"'
-              ] })
-            ] }),
-            /* @__PURE__ */ c(k.Panel, { id: "url", className: "sc:flex sc:flex-col sc:gap-5 sc:p-6", children: [
-              /* @__PURE__ */ e(
-                "input",
-                {
-                  ref: Re,
-                  type: "file",
-                  accept: "image/*",
-                  onChange: _e,
-                  className: "sc:hidden"
-                }
-              ),
-              /* @__PURE__ */ c(
-                "button",
-                {
-                  type: "button",
-                  onClick: Fe,
-                  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: [
-                    /* @__PURE__ */ e(
-                      v,
-                      {
-                        icon: "lucide:upload-cloud",
-                        className: "sc:size-10 sc:text-foreground/60"
-                      }
-                    ),
-                    /* @__PURE__ */ c("div", { className: "sc:flex sc:flex-col sc:items-center sc:gap-1", children: [
-                      /* @__PURE__ */ e("span", { className: "sc:text-base sc:font-medium sc:text-foreground", children: "Upload from device" }),
-                      /* @__PURE__ */ e("span", { className: "sc:text-xs sc:text-muted-foreground", children: "PNG · JPG · SVG · GIF" })
-                    ] })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ c("div", { className: "sc:relative sc:flex sc:items-center sc:gap-3", children: [
-                /* @__PURE__ */ e("div", { className: "sc:h-px sc:flex-1 sc:bg-divider" }),
-                /* @__PURE__ */ e("span", { className: "sc:text-muted-foreground sc:text-xs sc:uppercase sc:tracking-wider", children: "or paste a link" }),
-                /* @__PURE__ */ e("div", { className: "sc:h-px sc:flex-1 sc:bg-divider" })
-              ] }),
-              /* @__PURE__ */ c(
-                "form",
-                {
-                  onSubmit: He,
-                  className: "sc:flex sc:flex-col sc:gap-3",
-                  children: [
-                    /* @__PURE__ */ c(xe, { children: [
-                      /* @__PURE__ */ e(be, { className: "sc:sr-only", children: "Image URL" }),
-                      /* @__PURE__ */ e(
-                        ye,
-                        {
-                          type: "url",
-                          placeholder: "https://example.com/image.jpg",
-                          value: w,
-                          onChange: (s) => V(s.target.value),
-                          variant: "subtle",
-                          "data-testid": "image-url-input"
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ e(
-                      _,
-                      {
-                        type: "submit",
-                        variant: "default",
-                        disabled: !w.trim(),
-                        className: "sc:w-full",
-                        "data-testid": "image-url-submit-btn",
-                        children: "Use This Image"
-                      }
-                    )
-                  ]
-                }
-              ),
-              w.trim() && /* @__PURE__ */ c("div", { className: "sc:flex sc:flex-col sc:gap-3 sc:rounded-2xl sc:border sc:border-divider sc:bg-muted/30 sc:p-4", children: [
-                /* @__PURE__ */ c("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(
-                    _,
-                    {
-                      onClick: Xe,
-                      disabled: ue || !w.trim(),
-                      variant: "secondary",
-                      size: "sm",
-                      className: "sc:gap-2",
-                      "data-testid": "remove-background-btn",
-                      children: ue ? /* @__PURE__ */ c(K, { children: [
-                        /* @__PURE__ */ e(
-                          v,
-                          {
-                            icon: "eos-icons:loading",
-                            className: "sc:size-4 sc:animate-spin"
-                          }
-                        ),
-                        "Removing…"
-                      ] }) : /* @__PURE__ */ c(K, { children: [
-                        /* @__PURE__ */ e(v, { icon: "mdi:image-remove", className: "sc:size-4" }),
-                        "Remove BG"
-                      ] })
-                    }
-                  )
-                ] }),
-                fe && /* @__PURE__ */ e("div", { className: "sc:rounded-lg sc:border sc:border-danger sc:bg-danger/10 sc:px-3 sc:py-2 sc:text-xs sc:text-danger", children: fe }),
-                /* @__PURE__ */ e(
-                  "img",
-                  {
-                    src: w,
-                    alt: "Preview",
-                    className: "sc:max-h-[280px] sc:w-full sc:rounded-lg sc:object-contain",
-                    onError: (s) => {
-                      s.target.style.display = "none";
-                    },
-                    onLoad: (s) => {
-                      s.target.style.display = "block";
-                    }
-                  }
-                )
-              ] })
-            ] }),
-            l && /* @__PURE__ */ c(k.Panel, { id: "vector", className: "sc:flex sc:flex-col", children: [
-              /* @__PURE__ */ c("form", { onSubmit: Ge, 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(xe, { className: "sc:flex-1", "aria-label": "Search for vector graphics", children: /* @__PURE__ */ e(
-                  ye,
-                  {
-                    type: "text",
-                    placeholder: "Search for icons...",
-                    value: g,
-                    onChange: (s) => y(s.target.value),
-                    variant: "subtle",
-                    "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(
-                  _,
-                  {
-                    size: "icon",
-                    variant: "secondary",
-                    onClick: () => q(o === "grid" ? "masonry" : "grid"),
-                    "aria-label": o === "grid" ? "Switch to masonry view" : "Switch to grid view",
-                    children: o === "grid" ? /* @__PURE__ */ e(v, { icon: "lucide:layout-grid", className: "sc:size-5" }) : /* @__PURE__ */ e(v, { icon: re.grip, className: "sc:size-5" })
-                  }
-                )
-              ] }),
-              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: [
-                o === "masonry" ? (
-                  /* CSS Grid Masonry */
-                  /* @__PURE__ */ e(
-                    "div",
-                    {
-                      className: "sc:grid sc:grid-flow-dense sc:pb-4",
-                      style: {
-                        display: "grid",
-                        gridTemplateColumns: u === "bottom" ? "repeat(auto-fill, minmax(150px, 1fr))" : "repeat(3, 1fr)",
-                        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))
-                    }
-                  )
-                ) : (
-                  /* Fixed Height Grid - Square Tiles */
-                  /* @__PURE__ */ e(
-                    "div",
-                    {
-                      className: "sc:pb-4",
-                      style: {
-                        display: "grid",
-                        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))
-                    }
-                  )
-                ),
-                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" })
-              ] }),
-              !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,
-                '"'
-              ] })
-            ] }),
-            x && /* @__PURE__ */ c(k.Panel, { id: "ai", className: "sc:flex sc:flex-col sc:gap-6 sc:p-6", children: [
-              /* @__PURE__ */ c("form", { onSubmit: Ye, className: "sc:flex sc:flex-col sc:gap-6", children: [
-                /* @__PURE__ */ c(xe, { children: [
-                  /* @__PURE__ */ e(be, { children: "Prompt" }),
-                  /* @__PURE__ */ e(
-                    $e,
-                    {
-                      placeholder: "Describe the image you want to generate... (e.g., 'avocado, transparent background')",
-                      value: X,
-                      onChange: (s) => de(s.target.value),
-                      className: "sc:min-h-[100px] sc:resize-y",
-                      rows: 4,
-                      "data-testid": "ai-prompt-input",
-                      disabled: oe
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ e(
-                  _,
-                  {
-                    type: "submit",
-                    variant: "default",
-                    disabled: !X.trim() || oe,
-                    className: "sc:w-full",
-                    "data-testid": "ai-generate-btn",
-                    children: oe ? /* @__PURE__ */ c(K, { children: [
-                      /* @__PURE__ */ e(v, { icon: "eos-icons:loading", className: "sc:size-5 sc:animate-spin" }),
-                      "Generating..."
-                    ] }) : /* @__PURE__ */ c(K, { children: [
-                      /* @__PURE__ */ e(Te, { size: 24 }),
-                      "Generate Image"
-                    ] })
-                  }
-                )
-              ] }),
-              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 }),
-              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: Z,
-                    alt: X,
-                    className: "sc:max-h-full sc:max-w-full sc:object-contain"
-                  }
-                ) }),
-                /* @__PURE__ */ c("div", { className: "sc:flex sc:flex-col sc:gap-1", children: [
-                  /* @__PURE__ */ e(be, { className: "sc:text-muted sc:text-xs", children: "Prompt" }),
-                  /* @__PURE__ */ e("p", { className: "sc:text-sm", children: X })
-                ] }),
-                /* @__PURE__ */ c("div", { className: "sc:flex sc:flex-col sc:gap-3", children: [
-                  i && /* @__PURE__ */ e(
-                    _,
-                    {
-                      onClick: Qe,
-                      disabled: ue || !Z,
-                      variant: "secondary",
-                      size: "sm",
-                      className: "sc:w-full sc:gap-2",
-                      "data-testid": "ai-remove-background-btn",
-                      children: ue ? /* @__PURE__ */ c(K, { children: [
-                        /* @__PURE__ */ e(v, { icon: "eos-icons:loading", className: "sc:size-4 sc:animate-spin" }),
-                        "Removing..."
-                      ] }) : /* @__PURE__ */ c(K, { children: [
-                        /* @__PURE__ */ e(v, { icon: "mdi:image-remove", className: "sc:size-4" }),
-                        "Remove Background"
-                      ] })
-                    }
-                  ),
-                  fe && /* @__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: fe }),
-                  /* @__PURE__ */ e(
-                    _,
-                    {
-                      onClick: We,
-                      variant: "default",
-                      className: "sc:w-full",
-                      "data-testid": "ai-use-image-btn",
-                      children: "Use This Image"
-                    }
-                  )
-                ] })
-              ] })
-            ] })
-          ]
-        }
-      )
-    }
-  );
-}, ws = ({
-  isOpen: d,
-  onOpenChange: t,
-  onImageAdded: N,
-  onImageChanged: E,
-  changingElementId: u,
-  onChangingElementIdChange: n,
-  services: x
-}) => {
-  var j;
-  const { elements: l, setElements: i, canvasEditorRef: m, artboardManager: h, executeAddElement: C, executeElementUpdate: w } = Ke(), { selectedId: V, setSelectedId: S } = Oe(), { activeArtboardId: R } = rs(), f = U(l);
-  f.current = l;
-  const Y = U(V);
-  Y.current = V;
-  const [W, Q] = r(null), b = u ?? W, B = n ?? Q, O = ae(
-    (P) => {
-      var ce, ne;
-      const g = f.current, y = Y.current;
-      if (b) {
-        const z = g.find((G) => G.id === b);
-        if (z && ls(z)) {
-          const G = z, o = z.clone(), q = ((ce = m.current) == null ? void 0 : ce.getZoom()) || 1;
-          o.imageUrl = P, o.transformData.width = 300 / q, o.transformData.height = 300 / q, o.transformData.cropX = 0, o.transformData.cropY = 0, o.transformData.cropWidth = 1, o.transformData.cropHeight = 1, o.transformData.flipHorizontal = !1, o.transformData.flipVertical = !1, o.transformData.borderRadius = 0, o.imageLoaded = !1, o.imageElement = null, o.isCropping = !1, o.onLoadCallback = (X) => {
-            const de = X;
-            i((oe) => oe.map((le) => le.id === de.id ? de : le));
-          }, o.loadImage(P), w(G, o), E && E(o);
-        }
-        B(null);
-        return;
-      }
-      if (!R) {
-        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,
-        y: se,
-        imageUrl: P,
-        transformData: {
-          width: 300 / T,
-          height: 300 / T
-        },
-        onLoadCallback: (z) => {
-          const G = z;
-          i((o) => o.map((q) => q.id === G.id ? G : q));
-        }
-      });
-      h.addElementToArtboard(L, R), C($, R, y || void 0), S(L), N && N($);
-    },
-    [
-      b,
-      // Note: elements and selectedId are accessed via refs (elementsRef, selectedIdRef)
-      // to prevent callback recreation on every context update
-      h,
-      C,
-      w,
-      R,
-      m,
-      i,
-      S,
-      B,
-      N,
-      E
-    ]
-  ), ee = ae(
-    (P) => {
-      t(P), P || B(null);
-    },
-    [t, B]
-  ), D = b ? (j = l.find((P) => P.id === b)) == null ? void 0 : j.imageUrl : void 0, F = /* @__PURE__ */ e(
-    fs,
-    {
-      isOpen: d,
-      onToggle: ee,
-      onImageSelect: O,
-      currentImageUrl: D
-    }
-  );
-  return x ? /* @__PURE__ */ e(as, { services: x, children: F }) : F;
-};
-export {
-  ws as ImagePanel
-};
-//# sourceMappingURL=ImagePanel-Ckpc6QqR.js.map