@snowcone-app/canvas 0.21.1 → 0.21.3

package/dist/ImagePanel-BwqFDKvW.js

@@ -0,0 +1,951 @@
+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-B2mb1sVN.js";
+import { n as es, y as ss, d as cs, J as ts, I as v, H as re, B as _, u as rs, C as as } from "./UnifiedFontService-CC3CSmH5.js";
+import { c as ns, I as os } from "./FontAnalyzer-CwIpgTGd.js";
+import { T as k, S as Te, a as xe, I as ye, L as be } from "./custom-icons-BW6hqmkL.js";
+import { a as ls } from "./guards-8rkFAMBs.js";
+const De = Je.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);
+  }, 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
+    }, $ = 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);
+    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 = Q(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: W,
+      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 = Ze(
+    () => [
+      ...n ? ["search"] : [],
+      "url",
+      ...l ? ["vector"] : [],
+      ...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(() => {
+    m.includes(b) || B(m[0]);
+  }, [m, b]), Z(() => {
+    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]);
+  const ge = ae(
+    async (s, a, p) => {
+      if (n) {
+        Y(!0), W(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);
+        } finally {
+          Y(!1);
+        }
+      }
+    },
+    [n]
+  );
+  Z(() => {
+    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]);
+  Z(() => {
+    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]
+  );
+  Z(() => {
+    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]);
+  Z(() => {
+    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);
+      }
+    }
+  }, Qe = () => {
+    J && (N(J), t(!1));
+  }, We = async () => {
+    if (!(!i || !J)) {
+      me(!0), he(null);
+      try {
+        const s = await i(J);
+        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" })
+                  }
+                )
+              ] }),
+              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 }),
+              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 }),
+              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: [
+                /* @__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,
+                    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: We,
+                      disabled: ue || !J,
+                      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: Qe,
+                      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 [Q, W] = r(null), b = u ?? Q, B = n ?? W, 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-BwqFDKvW.js.map