@snowcone-app/canvas 0.33.1 → 0.34.0

package/dist/ImagePanel-Ih9e9cOQ.js

@@ -0,0 +1,984 @@
+import { jsx as e, jsxs as t, Fragment as le } from "react/jsx-runtime";
+import * as es from "react";
+import Be, { useMemo as $e, useState as r, useRef as M, useEffect as ie, useCallback as fe } from "react";
+import { u as ss, g as ts } from "./design-builder-D4izkvlb.js";
+import { o as cs, N as as, d as je, W as rs, I as p, O as me, B as W, u as ns, X as os, C as is } from "./useCommands-Bj9QHZ35.js";
+import { c as Ge, I as ls } from "./FontAnalyzer-BrKY6XYn.js";
+import { T as C, S as ze, a as Ie, I as Re, L as ke } from "./custom-icons-CblWjgt-.js";
+import { a as ds } from "./guards-BhaQgJrE.js";
+const He = es.forwardRef(
+  ({ className: d, isInvalid: a, disabled: x, readOnly: k, required: u, variant: A, ...c }, g) => {
+    const o = cs(), i = A ?? (o.variant === "default" ? "filled" : "default");
+    return /* @__PURE__ */ e(
+      "textarea",
+      {
+        className: as(
+          "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
+          i === "default" && "sc:bg-field sc:shadow-soft sc:dark:shadow-none",
+          i === "filled" && "sc:bg-[var(--color-field-on-surface)]",
+          a && "sc:ring-2 sc:ring-danger sc:focus-visible:ring-danger",
+          d
+        ),
+        ref: g,
+        disabled: x,
+        readOnly: k,
+        required: u,
+        "aria-invalid": a,
+        ...c
+      }
+    );
+  }
+);
+He.displayName = "Textarea";
+const _e = He;
+_e.displayName = "TextArea";
+const xe = Ge("ImageBrowser"), us = "Image search is temporarily unavailable.", Pe = "Image generation is temporarily unavailable.", ms = "Vector search is temporarily unavailable.", Ve = "Background removal is temporarily unavailable.";
+function fs(d, a) {
+  const x = d instanceof Error ? d.message : "";
+  return !x || /VITE_|NEXT_PUBLIC_|\.env/i.test(x) ? a : x;
+}
+const gs = "1px", Ce = "1px", Ue = Be.memo(function({ image: a, onImageSelect: x, fixedHeight: k = !1 }) {
+  const [u, A] = r(!1), [c, g] = r(!1), [o, i] = r("top"), b = M(null), h = M(null), U = M(null), N = M(!0), [T, v] = r(!1), w = M(null), S = () => {
+    c || x(a);
+  }, Y = (R) => {
+    if (!U.current) return "top";
+    const m = U.current.getBoundingClientRect(), Z = R.clientX - m.left, z = R.clientY - m.top, y = m.width, L = m.height, P = {
+      top: z,
+      bottom: L - z,
+      left: Z,
+      right: y - Z
+    }, J = Math.min(P.top, P.bottom, P.left, P.right);
+    return J === P.top ? "top" : J === P.bottom ? "bottom" : J === P.left ? "left" : "right";
+  }, se = (R) => {
+    const m = Y(R);
+    w.current && (cancelAnimationFrame(w.current), w.current = null), m !== o ? (v(!0), i(m), w.current = requestAnimationFrame(() => {
+      w.current = requestAnimationFrame(() => {
+        v(!1), A(!0), w.current = null;
+      });
+    })) : (i(m), A(!0)), N.current = !1;
+  }, Q = (R) => {
+    w.current && (cancelAnimationFrame(w.current), w.current = null);
+    const m = Y(R);
+    i(m), v(!1), A(!1);
+  }, E = () => {
+    h.current && (clearTimeout(h.current), h.current = null), b.current = setTimeout(() => {
+      g(!0);
+    }, 400);
+  }, te = () => {
+    b.current && (clearTimeout(b.current), b.current = null), g(!1);
+  }, $ = () => {
+    b.current && (clearTimeout(b.current), b.current = null), h.current && (clearTimeout(h.current), h.current = null);
+  }, _ = () => {
+    g(!1);
+  }, D = a.source === "unsplash" ? "Unsplash" : "Pixabay", ce = u || c, q = () => {
+    if (!u) return `scale(${1.12})`;
+    switch (o) {
+      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__ */ t(
+    "div",
+    {
+      ref: U,
+      onClick: S,
+      onMouseEnter: se,
+      onMouseLeave: Q,
+      className: `sc:group sc:relative sc:cursor-pointer sc:overflow-hidden ${k ? "sc:h-full sc:rounded-xs" : "sc:break-inside-avoid sc:rounded-lg"}`,
+      children: [
+        /* @__PURE__ */ e(
+          "img",
+          {
+            src: a.urls.small,
+            alt: a.alt || "Image",
+            className: `sc:duration-500 sc:ease-out ${T ? "sc:transition-none" : "sc:transition-transform"} ${k ? "sc:h-full sc:w-full sc:object-cover" : "sc:w-full sc:object-cover"}`,
+            style: {
+              transform: q(),
+              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 ${ce ? "sc:opacity-100" : "sc:pointer-events-none sc:opacity-0"}`,
+            "aria-label": "Image info",
+            onMouseEnter: E,
+            onMouseLeave: te,
+            children: /* @__PURE__ */ e(p, { 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 ${c ? "sc:translate-y-0" : "sc:translate-y-full"}`,
+            onMouseEnter: $,
+            onMouseLeave: _,
+            children: /* @__PURE__ */ t("div", { className: "sc:flex sc:flex-col sc:gap-1", children: [
+              /* @__PURE__ */ t("div", { className: "sc:flex sc:items-center sc:gap-2", children: [
+                /* @__PURE__ */ e(
+                  p,
+                  {
+                    icon: a.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: D })
+              ] }),
+              /* @__PURE__ */ t("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__ */ t("span", { className: "sc:text-sm sc:font-medium sc:text-white", children: [
+                  a.attribution.profileUrl ? /* @__PURE__ */ e(
+                    "a",
+                    {
+                      href: a.attribution.profileUrl,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      onClick: (R) => R.stopPropagation(),
+                      className: "sc:underline sc:decoration-white/40 sc:underline-offset-2 sc:hover:decoration-white",
+                      children: a.attribution.name
+                    }
+                  ) : a.attribution.name,
+                  a.attribution.sourceUrl && /* @__PURE__ */ t(le, { children: [
+                    " ",
+                    /* @__PURE__ */ e("span", { className: "sc:font-normal sc:text-white/60", children: "on" }),
+                    " ",
+                    /* @__PURE__ */ e(
+                      "a",
+                      {
+                        href: a.attribution.sourceUrl,
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        onClick: (R) => R.stopPropagation(),
+                        className: "sc:underline sc:decoration-white/40 sc:underline-offset-2 sc:hover:decoration-white",
+                        children: D
+                      }
+                    )
+                  ] })
+                ] })
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}), De = Be.memo(function({ vector: a, onVectorSelect: x, fixedHeight: k = !1 }) {
+  const [u, A] = r(!1), [c, g] = r(!1), o = M(null), i = M(null), b = () => {
+    c || x(a);
+  }, h = () => {
+    i.current && (clearTimeout(i.current), i.current = null), o.current = setTimeout(() => {
+      g(!0);
+    }, 400);
+  }, U = () => {
+    o.current && (clearTimeout(o.current), o.current = null), g(!1);
+  }, N = () => {
+    o.current && (clearTimeout(o.current), o.current = null), i.current && (clearTimeout(i.current), i.current = null);
+  }, T = () => {
+    g(!1);
+  }, v = u || c;
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      onClick: b,
+      onMouseEnter: () => A(!0),
+      onMouseLeave: () => A(!1),
+      className: `sc:group sc:relative sc:cursor-pointer sc:overflow-hidden sc:bg-white/10 sc:transition-all sc:duration-300 ${k ? "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 ${k ? "sc:h-full sc:w-full" : "sc:aspect-square sc:w-full"}`,
+            children: /* @__PURE__ */ e(
+              "img",
+              {
+                src: a.urls.preview,
+                alt: a.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__ */ t("div", { className: "sc:absolute sc:top-2 sc:right-2 sc:z-10 sc:flex sc:items-center sc:gap-2", children: [
+          !a.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 ${v ? "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 ${v ? "sc:opacity-100" : "sc:pointer-events-none sc:opacity-0"}`,
+              "aria-label": "Vector info",
+              onMouseEnter: h,
+              onMouseLeave: U,
+              children: /* @__PURE__ */ e(p, { icon: "lucide:aperture", className: "sc:size-4 sc:text-white/80" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t(
+          "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 ${c ? "sc:translate-y-0" : "sc:translate-y-full"}`,
+            onMouseEnter: N,
+            onMouseLeave: T,
+            children: [
+              /* @__PURE__ */ t("div", { className: "sc:mb-1", children: [
+                /* @__PURE__ */ e(p, { 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: a.uploader.name })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}), hs = ({
+  isOpen: d,
+  onToggle: a,
+  onImageSelect: x,
+  currentImageUrl: k,
+  placement: u = "bottom",
+  busy: A = !1
+}) => {
+  const { imageSearch: c, generate: g, vectors: o, removeBackground: i } = je(), b = $e(
+    () => [
+      ...c ? ["search"] : [],
+      "url",
+      ...o ? ["vector"] : [],
+      ...g ? ["ai"] : []
+    ],
+    [c, o, g]
+  ), [h, U] = r(""), [N, T] = r(""), [v, w] = r([]), [S, Y] = r(!1), [se, Q] = r(null), [E, te] = r(b[0]), [$, _] = r(1), [D, ce] = r(!0), [q, R] = r("masonry"), [m, Z] = r(""), [z, y] = r([]), [L, P] = r(!1), [J, ae] = r(null), [j, be] = r(null), [K, ge] = r(!0), [re, ve] = r("grid"), [F, G] = r(""), [V, l] = r(!1), [O, de] = r(null), [H, he] = r(null), [B, ne] = r(!1), [oe, ee] = r(null), Ne = M(null), pe = M(null), Se = M(null);
+  ie(() => {
+    b.includes(E) || te(b[0]);
+  }, [b, E]), ie(() => {
+    d && k && (T(k), te("url"));
+  }, [d, k]), ie(() => {
+    d || (U(""), T(""), w([]), Q(null), _(1), ce(!0), Z(""), y([]), ae(null), be(null), ge(!0));
+  }, [d]);
+  const we = fe(
+    async (s, n, f) => {
+      if (c) {
+        Y(!0), Q(null);
+        try {
+          const I = await c.search({ query: s, page: n, perPage: 30 });
+          w((X) => f ? [...X, ...I.results] : I.results), _(I.page), ce(I.hasMore);
+        } catch (I) {
+          Q(us), xe.error("Error searching images:", I);
+        } finally {
+          Y(!1);
+        }
+      }
+    },
+    [c]
+  );
+  ie(() => {
+    d && !h && E === "search" && v.length === 0 && c && we("", 1, !1);
+  }, [d, E, c]);
+  const Fe = (s) => {
+    s.preventDefault(), we(h, 1, !1);
+  }, Le = fe(() => {
+    S || !D || we(h, $ + 1, !0);
+  }, [S, D, h, $, we]);
+  ie(() => {
+    const s = Ne.current;
+    if (!s || !d || E !== "search") return;
+    const n = new IntersectionObserver(
+      (f) => {
+        f[0].isIntersecting && D && !S && Le();
+      },
+      {
+        root: null,
+        // viewport
+        rootMargin: "200px",
+        // Trigger 200px before sentinel is visible
+        threshold: 0
+      }
+    );
+    return n.observe(s), () => {
+      n.disconnect();
+    };
+  }, [d, E, D, S, Le]);
+  const ye = fe(
+    async (s, n) => {
+      if (o) {
+        P(!0), ae(null);
+        try {
+          const { results: f, nextPage: I } = await o.search({ query: s, nextPage: n ?? null });
+          y(n ? (X) => {
+            const Ee = new Set(X.map((ue) => ue.id));
+            return [...X, ...f.filter((ue) => !Ee.has(ue.id))];
+          } : f), be(I), ge(I !== null);
+        } catch (f) {
+          ae(ms), xe.error("Error searching vectors:", f);
+        } finally {
+          P(!1);
+        }
+      }
+    },
+    [o]
+  );
+  ie(() => {
+    d && !m && E === "vector" && z.length === 0 && o && ye("");
+  }, [d, E, o]);
+  const Xe = (s) => {
+    s.preventDefault(), ye(m);
+  }, Me = fe(() => {
+    L || !K || !j || ye(m, j);
+  }, [L, K, j, m, ye]);
+  ie(() => {
+    const s = pe.current;
+    if (!s || !d || E !== "vector") return;
+    const n = new IntersectionObserver(
+      (f) => {
+        f[0].isIntersecting && K && !L && Me();
+      },
+      {
+        root: null,
+        rootMargin: "200px",
+        threshold: 0
+      }
+    );
+    return n.observe(s), () => {
+      n.disconnect();
+    };
+  }, [d, E, K, L, Me]);
+  const Ae = (s) => {
+    const n = s.selectUrl || s.urls.svg || s.urls.png;
+    n && (x(n), a(!1));
+  }, Te = (s) => {
+    var n;
+    try {
+      Promise.resolve((n = c == null ? void 0 : c.trackSelect) == null ? void 0 : n.call(c, s)).catch(() => {
+      });
+    } catch {
+    }
+    x(s.urls.regular), a(!1);
+  }, We = (s) => {
+    s.preventDefault(), N.trim() && (x(N.trim()), a(!1));
+  }, Ye = (s) => {
+    var f;
+    const n = (f = s.target.files) == null ? void 0 : f[0];
+    if (n && n.type.startsWith("image/")) {
+      const I = new FileReader();
+      I.onload = (X) => {
+        var ue;
+        const Ee = (ue = X.target) == null ? void 0 : ue.result;
+        T(Ee);
+      }, I.readAsDataURL(n);
+    }
+  }, Qe = () => {
+    var s;
+    (s = Se.current) == null || s.click();
+  }, qe = async () => {
+    if (!(!i || !N.trim())) {
+      ne(!0), ee(null);
+      try {
+        const s = await i(N);
+        T(s);
+      } catch (s) {
+        ee(Ve), xe.error("Error removing background:", s);
+      } finally {
+        ne(!1);
+      }
+    }
+  }, Ze = async (s) => {
+    var n, f;
+    if (s.preventDefault(), !!g) {
+      if (!F.trim()) {
+        de("Please enter a prompt");
+        return;
+      }
+      l(!0), de(null), he(null);
+      try {
+        const X = (f = (n = (await g.generate({
+          prompt: F,
+          width: 1024,
+          height: 1024,
+          numberResults: 1
+        })).images) == null ? void 0 : n[0]) == null ? void 0 : f.imageUrl;
+        if (!X)
+          throw new Error(Pe);
+        he(X);
+      } catch (I) {
+        de(fs(I, Pe)), xe.error("Error generating AI image:", I);
+      } finally {
+        l(!1);
+      }
+    }
+  }, Je = () => {
+    H && (x(H), a(!1));
+  }, Ke = async () => {
+    if (!(!i || !H)) {
+      ne(!0), ee(null);
+      try {
+        const s = await i(H);
+        he(s);
+      } catch (s) {
+        ee(Ve), xe.error("Error removing background:", s);
+      } finally {
+        ne(!1);
+      }
+    }
+  }, Oe = (s, n) => {
+    const f = s.width / s.height;
+    return n % 12 === 0 && f > 0.8 && f < 1.2 ? "sc:col-span-2 sc:row-span-2" : f < 0.75 ? "sc:row-span-2" : f > 1.5 ? "sc:col-span-2" : "";
+  };
+  return /* @__PURE__ */ t(
+    rs,
+    {
+      isOpen: d,
+      onClose: () => a(!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: [
+        A && /* @__PURE__ */ t(
+          "div",
+          {
+            className: "sc:absolute sc:inset-0 sc:z-50 sc:flex sc:flex-col sc:items-center sc:justify-center sc:gap-3 sc:bg-background/70 sc:backdrop-blur-sm",
+            "data-testid": "image-browser-busy",
+            "aria-live": "polite",
+            children: [
+              /* @__PURE__ */ e("div", { className: "sc:size-8 sc:animate-spin sc:rounded-full sc:border-2 sc:border-divider sc:border-t-foreground" }),
+              /* @__PURE__ */ e("span", { className: "sc:text-foreground sc:text-sm", children: "Adding image…" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(
+          C,
+          {
+            value: E,
+            onValueChange: (s) => te(s),
+            className: "sc:flex sc:flex-col",
+            "data-testid": "image-browser-container",
+            children: [
+              /* @__PURE__ */ e(C.ListContainer, { className: "sc:flex sc:justify-center sc:pt-4 sc:pb-2", children: /* @__PURE__ */ t(
+                C.List,
+                {
+                  className: "sc:h-14 sc:gap-1 sc:px-1.5 sc:md:h-12",
+                  "aria-label": "Image source",
+                  children: [
+                    c && /* @__PURE__ */ t(
+                      C.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(p, { icon: me.image, className: "sc:size-6" }),
+                          /* @__PURE__ */ e(C.Indicator, {})
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ t(
+                      C.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(p, { icon: me.link, className: "sc:size-6" }),
+                          /* @__PURE__ */ e(C.Indicator, {})
+                        ]
+                      }
+                    ),
+                    o && /* @__PURE__ */ t(
+                      C.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(p, { icon: "fa6-solid:icons", className: "sc:size-5" }),
+                          /* @__PURE__ */ e(C.Indicator, {})
+                        ]
+                      }
+                    ),
+                    g && /* @__PURE__ */ t(
+                      C.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(ze, { size: 24 }),
+                          /* @__PURE__ */ e(C.Indicator, {})
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ) }),
+              c && /* @__PURE__ */ t(C.Panel, { id: "search", className: "sc:flex sc:flex-col", children: [
+                /* @__PURE__ */ t("form", { onSubmit: Fe, 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(Ie, { className: "sc:flex-1", "aria-label": "Search for images", children: /* @__PURE__ */ e(
+                    Re,
+                    {
+                      type: "text",
+                      placeholder: "Search for images...",
+                      value: h,
+                      onChange: (s) => U(s.target.value),
+                      variant: "subtle",
+                      "data-testid": "image-search-input"
+                    }
+                  ) }),
+                  /* @__PURE__ */ e(W, { type: "submit", size: "icon", variant: "secondary", disabled: S, "aria-label": "Search", children: /* @__PURE__ */ e(p, { icon: me.search, className: "sc:size-5" }) }),
+                  /* @__PURE__ */ e(
+                    W,
+                    {
+                      size: "icon",
+                      variant: "secondary",
+                      onClick: () => R(q === "grid" ? "masonry" : "grid"),
+                      "aria-label": q === "grid" ? "Switch to masonry view" : "Switch to grid view",
+                      children: q === "grid" ? /* @__PURE__ */ e(p, { icon: "lucide:layout-grid", className: "sc:size-5" }) : /* @__PURE__ */ e(p, { icon: me.grip, className: "sc:size-5" })
+                    }
+                  )
+                ] }),
+                se && /* @__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: se }),
+                S && v.length === 0 && /* @__PURE__ */ e("div", { className: "sc:text-muted sc:px-6 sc:py-8 sc:text-center sc:text-sm", children: "Loading images..." }),
+                v.length > 0 && /* @__PURE__ */ t("div", { className: "sc:mx-6 sc:overflow-hidden sc:rounded-t-2xl", children: [
+                  q === "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: gs
+                        },
+                        children: v.map((s, n) => /* @__PURE__ */ e("div", { className: Oe(s, n), children: /* @__PURE__ */ e(Ue, { image: s, onImageSelect: Te, 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: Ce
+                        },
+                        children: v.map((s) => /* @__PURE__ */ e("div", { style: { aspectRatio: "1 / 1" }, children: /* @__PURE__ */ e(Ue, { image: s, onImageSelect: Te, fixedHeight: !0 }) }, s.id))
+                      }
+                    )
+                  ),
+                  D && /* @__PURE__ */ e("div", { ref: Ne, className: "sc:h-px" }),
+                  S && /* @__PURE__ */ e("div", { className: "sc:text-muted sc:py-4 sc:text-center sc:text-sm", children: "Loading more..." }),
+                  !D && !S && /* @__PURE__ */ e("div", { className: "sc:text-muted sc:py-6 sc:text-center sc:text-sm", children: "No more images" })
+                ] }),
+                !S && v.length === 0 && h && /* @__PURE__ */ t("div", { className: "sc:text-muted sc:px-6 sc:py-12 sc:text-center sc:text-sm", children: [
+                  'No images found for "',
+                  h,
+                  '"'
+                ] })
+              ] }),
+              /* @__PURE__ */ t(C.Panel, { id: "url", className: "sc:flex sc:flex-col sc:gap-5 sc:p-6", children: [
+                /* @__PURE__ */ e(
+                  "input",
+                  {
+                    ref: Se,
+                    type: "file",
+                    accept: "image/*",
+                    onChange: Ye,
+                    className: "sc:hidden"
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: Qe,
+                    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(
+                        p,
+                        {
+                          icon: "lucide:upload-cloud",
+                          className: "sc:size-10 sc:text-foreground/60"
+                        }
+                      ),
+                      /* @__PURE__ */ t("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__ */ t("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__ */ t(
+                  "form",
+                  {
+                    onSubmit: We,
+                    className: "sc:flex sc:flex-col sc:gap-3",
+                    children: [
+                      /* @__PURE__ */ t(Ie, { children: [
+                        /* @__PURE__ */ e(ke, { className: "sc:sr-only", children: "Image URL" }),
+                        /* @__PURE__ */ e(
+                          Re,
+                          {
+                            type: "url",
+                            placeholder: "https://example.com/image.jpg",
+                            value: N,
+                            onChange: (s) => T(s.target.value),
+                            variant: "subtle",
+                            "data-testid": "image-url-input"
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ e(
+                        W,
+                        {
+                          type: "submit",
+                          variant: "default",
+                          disabled: !N.trim(),
+                          className: "sc:w-full",
+                          "data-testid": "image-url-submit-btn",
+                          children: "Use This Image"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                N.trim() && /* @__PURE__ */ t("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__ */ t("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(
+                      W,
+                      {
+                        onClick: qe,
+                        disabled: B || !N.trim(),
+                        variant: "secondary",
+                        size: "sm",
+                        className: "sc:gap-2",
+                        "data-testid": "remove-background-btn",
+                        children: B ? /* @__PURE__ */ t(le, { children: [
+                          /* @__PURE__ */ e(
+                            p,
+                            {
+                              icon: "eos-icons:loading",
+                              className: "sc:size-4 sc:animate-spin"
+                            }
+                          ),
+                          "Removing…"
+                        ] }) : /* @__PURE__ */ t(le, { children: [
+                          /* @__PURE__ */ e(p, { icon: "mdi:image-remove", className: "sc:size-4" }),
+                          "Remove BG"
+                        ] })
+                      }
+                    )
+                  ] }),
+                  oe && /* @__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: oe }),
+                  /* @__PURE__ */ e(
+                    "img",
+                    {
+                      src: N,
+                      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";
+                      }
+                    }
+                  )
+                ] })
+              ] }),
+              o && /* @__PURE__ */ t(C.Panel, { id: "vector", className: "sc:flex sc:flex-col", children: [
+                /* @__PURE__ */ t("form", { onSubmit: Xe, 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(Ie, { className: "sc:flex-1", "aria-label": "Search for vector graphics", children: /* @__PURE__ */ e(
+                    Re,
+                    {
+                      type: "text",
+                      placeholder: "Search for icons...",
+                      value: m,
+                      onChange: (s) => Z(s.target.value),
+                      variant: "subtle",
+                      "data-testid": "vector-search-input"
+                    }
+                  ) }),
+                  /* @__PURE__ */ e(W, { type: "submit", size: "icon", variant: "secondary", disabled: L, "aria-label": "Search", children: /* @__PURE__ */ e(p, { icon: me.search, className: "sc:size-5" }) }),
+                  /* @__PURE__ */ e(
+                    W,
+                    {
+                      size: "icon",
+                      variant: "secondary",
+                      onClick: () => ve(re === "grid" ? "masonry" : "grid"),
+                      "aria-label": re === "grid" ? "Switch to masonry view" : "Switch to grid view",
+                      children: re === "grid" ? /* @__PURE__ */ e(p, { icon: "lucide:layout-grid", className: "sc:size-5" }) : /* @__PURE__ */ e(p, { icon: me.grip, className: "sc:size-5" })
+                    }
+                  )
+                ] }),
+                J && /* @__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: J }),
+                L && z.length === 0 && /* @__PURE__ */ e("div", { className: "sc:text-muted sc:px-6 sc:py-8 sc:text-center sc:text-sm", children: "Loading vectors..." }),
+                z.length > 0 && /* @__PURE__ */ t("div", { className: "sc:mx-6 sc:overflow-hidden sc:rounded-t-2xl", children: [
+                  re === "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: Ce
+                        },
+                        children: z.map((s) => /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(De, { vector: s, onVectorSelect: 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(120px, 1fr))" : "repeat(auto-fill, minmax(100px, 1fr))",
+                          gap: Ce
+                        },
+                        children: z.map((s) => /* @__PURE__ */ e("div", { style: { aspectRatio: "1 / 1" }, children: /* @__PURE__ */ e(De, { vector: s, onVectorSelect: Ae, fixedHeight: !0 }) }, s.id))
+                      }
+                    )
+                  ),
+                  K && /* @__PURE__ */ e("div", { ref: pe, className: "sc:h-px" }),
+                  L && /* @__PURE__ */ e("div", { className: "sc:text-muted sc:py-4 sc:text-center sc:text-sm", children: "Loading more..." }),
+                  !K && !L && /* @__PURE__ */ e("div", { className: "sc:text-muted sc:py-6 sc:text-center sc:text-sm", children: "No more vectors" })
+                ] }),
+                !L && z.length === 0 && m && /* @__PURE__ */ t("div", { className: "sc:text-muted sc:px-6 sc:py-12 sc:text-center sc:text-sm", children: [
+                  'No vectors found for "',
+                  m,
+                  '"'
+                ] })
+              ] }),
+              g && /* @__PURE__ */ t(C.Panel, { id: "ai", className: "sc:flex sc:flex-col sc:gap-6 sc:p-6", children: [
+                /* @__PURE__ */ t("form", { onSubmit: Ze, className: "sc:flex sc:flex-col sc:gap-6", children: [
+                  /* @__PURE__ */ t(Ie, { children: [
+                    /* @__PURE__ */ e(ke, { children: "Prompt" }),
+                    /* @__PURE__ */ e(
+                      _e,
+                      {
+                        placeholder: "Describe the image you want to generate... (e.g., 'avocado, transparent background')",
+                        value: F,
+                        onChange: (s) => G(s.target.value),
+                        className: "sc:min-h-[100px] sc:resize-y",
+                        rows: 4,
+                        "data-testid": "ai-prompt-input",
+                        disabled: V
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ e(
+                    W,
+                    {
+                      type: "submit",
+                      variant: "default",
+                      disabled: !F.trim() || V,
+                      className: "sc:w-full",
+                      "data-testid": "ai-generate-btn",
+                      children: V ? /* @__PURE__ */ t(le, { children: [
+                        /* @__PURE__ */ e(p, { icon: "eos-icons:loading", className: "sc:size-5 sc:animate-spin" }),
+                        "Generating..."
+                      ] }) : /* @__PURE__ */ t(le, { children: [
+                        /* @__PURE__ */ e(ze, { size: 24 }),
+                        "Generate Image"
+                      ] })
+                    }
+                  )
+                ] }),
+                O && /* @__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: O }),
+                H && /* @__PURE__ */ t("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(ke, { 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: H,
+                      alt: F,
+                      className: "sc:max-h-full sc:max-w-full sc:object-contain"
+                    }
+                  ) }),
+                  /* @__PURE__ */ t("div", { className: "sc:flex sc:flex-col sc:gap-1", children: [
+                    /* @__PURE__ */ e(ke, { className: "sc:text-muted sc:text-xs", children: "Prompt" }),
+                    /* @__PURE__ */ e("p", { className: "sc:text-sm", children: F })
+                  ] }),
+                  /* @__PURE__ */ t("div", { className: "sc:flex sc:flex-col sc:gap-3", children: [
+                    i && /* @__PURE__ */ e(
+                      W,
+                      {
+                        onClick: Ke,
+                        disabled: B || !H,
+                        variant: "secondary",
+                        size: "sm",
+                        className: "sc:w-full sc:gap-2",
+                        "data-testid": "ai-remove-background-btn",
+                        children: B ? /* @__PURE__ */ t(le, { children: [
+                          /* @__PURE__ */ e(p, { icon: "eos-icons:loading", className: "sc:size-4 sc:animate-spin" }),
+                          "Removing..."
+                        ] }) : /* @__PURE__ */ t(le, { children: [
+                          /* @__PURE__ */ e(p, { icon: "mdi:image-remove", className: "sc:size-4" }),
+                          "Remove Background"
+                        ] })
+                      }
+                    ),
+                    oe && /* @__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: oe }),
+                    /* @__PURE__ */ e(
+                      W,
+                      {
+                        onClick: Je,
+                        variant: "default",
+                        className: "sc:w-full",
+                        "data-testid": "ai-use-image-btn",
+                        children: "Use This Image"
+                      }
+                    )
+                  ] })
+                ] })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, ps = Ge("ImagePanel"), ks = ({
+  isOpen: d,
+  onOpenChange: a,
+  onImageAdded: x,
+  onImageChanged: k,
+  changingElementId: u,
+  onChangingElementIdChange: A,
+  services: c
+}) => {
+  var z;
+  const { elements: g, setElements: o, canvasEditorRef: i, artboardManager: b, executeAddElement: h, executeElementUpdate: U } = ss(), { selectedId: N, setSelectedId: T } = ts(), { activeArtboardId: v } = ns(), w = je(), S = $e(() => {
+    if (w.ingestImage) return w.ingestImage;
+    if (c != null && c.ingestImage) return c.ingestImage;
+    if (c != null && c.ingestImageUrl) return os(c.ingestImageUrl);
+  }, [w.ingestImage, c == null ? void 0 : c.ingestImage, c == null ? void 0 : c.ingestImageUrl]), Y = M(S);
+  Y.current = S;
+  const se = M(g);
+  se.current = g;
+  const Q = M(N);
+  Q.current = N;
+  const [E, te] = r(null), $ = u ?? E, _ = A ?? te, [D, ce] = r(!1), q = fe(
+    async (y) => {
+      var ve, F;
+      const L = Y.current;
+      if (L) {
+        ce(!0);
+        try {
+          y = await L(y);
+        } catch (G) {
+          ps.warn("Image ingest failed; placing the original URL", G);
+        } finally {
+          ce(!1);
+        }
+      }
+      const P = se.current, J = Q.current;
+      if ($) {
+        const G = P.find((V) => V.id === $);
+        if (G && ds(G)) {
+          const V = G, l = G.clone(), O = ((ve = i.current) == null ? void 0 : ve.getZoom()) || 1, de = V.transformData.width || 300 / O, H = V.transformData.height || 300 / O;
+          l.imageUrl = y, l.transformData.cropX = 0, l.transformData.cropY = 0, l.transformData.cropWidth = 1, l.transformData.cropHeight = 1, l.transformData.flipHorizontal = !1, l.transformData.flipVertical = !1, l.transformData.borderRadius = 0, l.imageLoaded = !1, l.imageElement = null, l.isCropping = !1, l.preserveDimensions = !1, l.transformData.width = de, l.transformData.height = H, l.onLoadCallback = (he) => {
+            const B = he, ne = B.transformData.width, oe = B.transformData.height, ee = Math.min(de / ne, H / oe, 1);
+            ee < 1 && (B.transformData.width = ne * ee, B.transformData.height = oe * ee), o((Ne) => Ne.map((pe) => pe.id === B.id ? B : pe));
+          }, l.loadImage(y), U(V, l), k && k(l);
+        }
+        _(null);
+        return;
+      }
+      if (!v) {
+        alert("Please create or select an artboard first");
+        return;
+      }
+      const ae = `element-${Date.now()}`, j = b.getActiveArtboard(), be = j ? j.x + j.width / 2 : window.innerWidth / 2, K = j ? j.y + j.height / 2 : window.innerHeight / 2, ge = ((F = i.current) == null ? void 0 : F.getZoom()) || 1, re = new ls({
+        id: ae,
+        x: be,
+        y: K,
+        imageUrl: y,
+        transformData: {
+          width: 300 / ge,
+          height: 300 / ge
+        },
+        onLoadCallback: (G) => {
+          const V = G;
+          o((l) => l.map((O) => O.id === V.id ? V : O));
+        }
+      });
+      b.addElementToArtboard(ae, v), h(re, v, J || void 0), T(ae), x && x(re);
+    },
+    [
+      $,
+      // Note: elements and selectedId are accessed via refs (elementsRef, selectedIdRef)
+      // to prevent callback recreation on every context update
+      b,
+      h,
+      U,
+      v,
+      i,
+      o,
+      T,
+      _,
+      x,
+      k
+    ]
+  ), R = fe(
+    (y) => {
+      a(y), y || _(null);
+    },
+    [a, _]
+  ), m = $ ? (z = g.find((y) => y.id === $)) == null ? void 0 : z.imageUrl : void 0, Z = /* @__PURE__ */ e(
+    hs,
+    {
+      isOpen: d,
+      onToggle: R,
+      onImageSelect: q,
+      currentImageUrl: m,
+      busy: D
+    }
+  );
+  return c ? /* @__PURE__ */ e(is, { services: c, children: Z }) : Z;
+};
+export {
+  ks as ImagePanel
+};
+//# sourceMappingURL=ImagePanel-Ih9e9cOQ.js.map