@pagehub/sdk 0.1.5 → 0.1.6

package/dist/chunks/MediaInput-DHs3D8TJ.js

@@ -0,0 +1,672 @@
+import { jsxs as t, jsx as l, Fragment as te } from "react/jsx-runtime";
+import { useEditor as he, useNode as ne } from "@craftjs/core";
+import { useRef as le, useState as b, useMemo as V, Suspense as fe } from "react";
+import { u as be, aK as ge, R as ve, aL as xe, aM as ye, aN as Ne, C as z, at as Ce, Q as we, W as ie, aO as Y, aP as oe, aQ as ke, aR as Pe, _ as Me, aw as Se, a0 as ce, w as de, aS as Ie } from "./index-C66dAl3Q.js";
+import { T as $e } from "./ToolbarDashedButton-DbUxGmDg.js";
+import { TailwindInput as ue } from "./TailwindInput-660FZtyK.js";
+import { S as Le } from "./SearchInput-DRUztbM0.js";
+import { F as re } from "./FloatingPanel-DJP5Vhua.js";
+import { u as Ee, g as Fe, M as Te, a as je } from "./useMediaManager-CmKDbFfw.js";
+import { M as Re } from "./MiniPreviewTile-B4zxTj9Y.js";
+import { M as Oe } from "./MediaManagerModal-Dc5PK3dn.js";
+function Be(s, r, d, u) {
+  const m = s.selectionStart ?? r.length, h = s.selectionEnd ?? r.length, f = `${r.slice(0, m)}${d}${r.slice(h)}`;
+  u(f), requestAnimationFrame(() => {
+    const x = m + d.length;
+    s.focus(), s.setSelectionRange(x, x);
+  });
+}
+function Ve({
+  id: s,
+  label: r,
+  value: d,
+  onChange: u,
+  placeholder: m,
+  helpText: h,
+  snippets: f = [],
+  showExpressionHelp: x = !0,
+  intent: w = "generic"
+}) {
+  const { query: y } = he(), { nodeId: E } = ne((e) => ({ nodeId: e.id })), Z = le(null), [K, N] = b(null), [F, J] = b(), [k, P] = b(""), [T, H] = b(!1), U = le(null), X = le(null), D = be(ge), [p, ae] = b("variable"), [j, I] = b("item.image"), [R, A] = b("/placeholder.jpg"), [M, $] = b("logged-in"), [O, q] = b("item.image"), [o, _] = b("/placeholder.jpg"), C = V(() => ve(y, E), [y, E]), c = V(() => {
+    const e = xe(E, y);
+    return e ? `${ye(e.provider)} ${Ne(e.provider, e.collection)}` : null;
+  }, [E, y]), ee = V(() => {
+    const e = k.trim().toLowerCase(), i = (v) => {
+      var se;
+      return v.id.toLowerCase().includes(e) || v.label.toLowerCase().includes(e) || ((se = v.group) == null ? void 0 : se.toLowerCase().includes(e));
+    }, a = /(image|img|photo|thumbnail|thumb|src|url|avatar|logo|banner|cover|hero|media)/i, n = (v) => a.test(v.id) || a.test(v.label), g = e ? C.filter(i) : C;
+    return w !== "image-src" || T ? g : g.filter(n);
+  }, [C, k, w, T]), Q = V(() => {
+    if (w !== "image-src") return ee;
+    const e = /(image|img|photo|thumbnail|thumb|src|url|avatar|logo|banner|cover|hero|media)/i, i = (a) => {
+      const n = a.id.toLowerCase(), g = a.label.toLowerCase();
+      let v = 0;
+      return n.startsWith("item.") && (v += 8), (n.includes(".image") || g.includes("image")) && (v += 6), (e.test(n) || e.test(g)) && (v += 4), v;
+    };
+    return [...ee].sort((a, n) => i(n) - i(a));
+  }, [ee, w]), L = V(() => {
+    const e = /* @__PURE__ */ new Map();
+    for (const i of Q) {
+      const a = i.group || "Other";
+      e.has(a) || e.set(a, []), e.get(a).push(i);
+    }
+    return Array.from(e.entries());
+  }, [Q]), B = V(() => L.flatMap(([, e]) => e), [L]), G = V(() => {
+    const e = j || "item.image", i = R || "/placeholder.jpg", a = O || e, n = o || i;
+    return p === "variable" ? `{{${e}}}` : p === "fallback" ? `{{${e} || "${i}"}}` : p === "ifelse" ? `{{${e} ? ${a} : "${n}"}}` : p === "equals" ? `{{${e} == ${M} ? ${a} : "${n}"}}` : `{{${e} != ${M} ? ${a} : "${n}"}}`;
+  }, [p, j, R, O, o, M]), W = (e, i, a = !1) => {
+    i && e(a ? `{{${i}}}` : i);
+  };
+  return /* @__PURE__ */ t("div", { className: "space-y-2", children: [
+    r ? /* @__PURE__ */ l("label", { htmlFor: s, className: "toolbar-label block font-medium", children: r }) : null,
+    /* @__PURE__ */ t("div", { className: "relative", children: [
+      /* @__PURE__ */ l(
+        z,
+        {
+          open: K !== null,
+          trailing: /* @__PURE__ */ t("div", { className: "flex items-center gap-0.5", children: [
+            /* @__PURE__ */ l(
+              "button",
+              {
+                ref: U,
+                type: "button",
+                className: "btn btn-ghost btn-xs",
+                onClick: () => {
+                  var i;
+                  const e = (i = U.current) == null ? void 0 : i.getBoundingClientRect();
+                  if (e) {
+                    const a = D ? e.right + 8 : e.left - 420;
+                    J({ x: Math.max(8, a), y: Math.max(8, e.top) });
+                  }
+                  N((a) => a === "variables" ? null : "variables");
+                },
+                "aria-label": "Insert variable",
+                children: /* @__PURE__ */ l(Ce, { className: "size-3.5" })
+              }
+            ),
+            /* @__PURE__ */ l(
+              "button",
+              {
+                ref: X,
+                type: "button",
+                className: "btn btn-ghost btn-xs",
+                onClick: () => {
+                  var i;
+                  const e = (i = X.current) == null ? void 0 : i.getBoundingClientRect();
+                  if (e) {
+                    const a = D ? e.right + 8 : e.left - 420;
+                    J({ x: Math.max(8, a), y: Math.max(8, e.top) });
+                  }
+                  N((a) => a === "expressions" ? null : "expressions");
+                },
+                "aria-label": "Insert expression",
+                children: /* @__PURE__ */ l(we, { className: "size-3.5" })
+              }
+            )
+          ] }),
+          children: /* @__PURE__ */ l(
+            "input",
+            {
+              ref: Z,
+              id: s,
+              type: "text",
+              value: d,
+              onChange: (e) => u(e.target.value),
+              placeholder: m,
+              className: "input-plain h-full min-w-0 flex-1 px-2!"
+            }
+          )
+        }
+      ),
+      K === "variables" ? /* @__PURE__ */ l(
+        re,
+        {
+          isOpen: !0,
+          onClose: () => N(null),
+          title: "Variables",
+          storageKey: "variable-text-input-vars",
+          minWidth: 360,
+          maxWidth: 520,
+          minHeight: 280,
+          initialPosition: F,
+          zIndex: ie,
+          children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-2 p-3", children: [
+            /* @__PURE__ */ l(
+              Le,
+              {
+                value: k,
+                onChange: P,
+                placeholder: "Search variables...",
+                size: "slim",
+                clearTooltip: "Clear variable search"
+              }
+            ),
+            w === "image-src" ? /* @__PURE__ */ t("div", { className: "flex items-center justify-between px-1", children: [
+              /* @__PURE__ */ l("span", { className: "text-neutral-content text-[10px] uppercase", children: "Image-relevant fields" }),
+              /* @__PURE__ */ l(
+                "button",
+                {
+                  type: "button",
+                  className: "btn btn-ghost btn-xs",
+                  onClick: () => H((e) => !e),
+                  children: T ? "Show image fields" : "Show all variables"
+                }
+              )
+            ] }) : null,
+            /* @__PURE__ */ l("div", { className: "max-h-52 space-y-2 overflow-y-auto", children: L.map(([e, i]) => /* @__PURE__ */ t("div", { children: [
+              /* @__PURE__ */ l("div", { className: "text-neutral-content px-2 pb-1 text-[10px] font-semibold uppercase", children: e }),
+              /* @__PURE__ */ l("div", { className: "space-y-1", children: i.map((a) => /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  className: "hover:bg-base-200 flex w-full items-center justify-between rounded px-2 py-1 text-left",
+                  onClick: () => {
+                    const n = Z.current;
+                    n && (Be(n, d || "", `{{${a.id}}}`, u), N(null));
+                  },
+                  children: [
+                    /* @__PURE__ */ l("span", { className: "truncate text-xs", children: a.label }),
+                    /* @__PURE__ */ l("span", { className: "text-neutral-content ml-2 shrink-0 text-[10px]", children: `{{${a.id}}}` })
+                  ]
+                },
+                `${e}-${a.id}`
+              )) })
+            ] }, e)) })
+          ] })
+        }
+      ) : null,
+      K === "expressions" ? /* @__PURE__ */ l(
+        re,
+        {
+          isOpen: !0,
+          onClose: () => N(null),
+          title: "Expression Builder",
+          storageKey: "variable-text-input-expr",
+          minWidth: 360,
+          maxWidth: 560,
+          minHeight: 320,
+          initialPosition: F,
+          zIndex: ie,
+          children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-2 p-3", children: [
+            /* @__PURE__ */ t("div", { children: [
+              /* @__PURE__ */ l("label", { className: "toolbar-label mb-1 block", children: "Mode" }),
+              /* @__PURE__ */ t(
+                Y,
+                {
+                  value: p,
+                  onChange: (e) => ae(e),
+                  placeholder: "Select mode",
+                  chevron: !0,
+                  children: [
+                    /* @__PURE__ */ l("option", { value: "variable", children: "Variable" }),
+                    /* @__PURE__ */ l("option", { value: "fallback", children: "Variable + Fallback" }),
+                    /* @__PURE__ */ l("option", { value: "ifelse", children: "If / else" }),
+                    /* @__PURE__ */ l("option", { value: "equals", children: "Equals check" }),
+                    /* @__PURE__ */ l("option", { value: "not-equals", children: "Not equals check" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ t("div", { children: [
+              /* @__PURE__ */ l("label", { className: "toolbar-label mb-1 block", children: "Variable" }),
+              /* @__PURE__ */ l(
+                Y,
+                {
+                  value: j,
+                  onChange: (e) => I(e),
+                  placeholder: "Select variable",
+                  chevron: !0,
+                  children: B.map((e) => /* @__PURE__ */ t("option", { value: e.id, children: [
+                    e.group ? `${e.group}: ` : "",
+                    e.label
+                  ] }, e.id))
+                }
+              )
+            ] }),
+            p === "fallback" ? /* @__PURE__ */ t("div", { children: [
+              /* @__PURE__ */ l("label", { className: "toolbar-label mb-1 block", children: "Fallback URL/value" }),
+              /* @__PURE__ */ l(z, { children: /* @__PURE__ */ l(
+                "input",
+                {
+                  value: R,
+                  onChange: (e) => A(e.target.value),
+                  className: "input-plain h-full min-w-0 flex-1 px-2!"
+                }
+              ) })
+            ] }) : null,
+            p === "ifelse" || p === "equals" || p === "not-equals" ? /* @__PURE__ */ t(te, { children: [
+              p === "equals" || p === "not-equals" ? /* @__PURE__ */ t("div", { children: [
+                /* @__PURE__ */ l("label", { className: "toolbar-label mb-1 block", children: "Compare to" }),
+                /* @__PURE__ */ t("div", { className: "flex gap-1", children: [
+                  /* @__PURE__ */ l(z, { children: /* @__PURE__ */ l(
+                    "input",
+                    {
+                      value: M,
+                      onChange: (e) => $(e.target.value),
+                      className: "input-plain h-full min-w-0 flex-1 px-2!",
+                      placeholder: "logged-in"
+                    }
+                  ) }),
+                  /* @__PURE__ */ l("div", { className: "w-34", children: /* @__PURE__ */ t(
+                    Y,
+                    {
+                      value: "",
+                      onChange: (e) => W($, e, !0),
+                      placeholder: "Pick var...",
+                      chevron: !0,
+                      children: [
+                        /* @__PURE__ */ l("option", { value: "", children: "Pick var…" }),
+                        B.map((e) => /* @__PURE__ */ l("option", { value: e.id, children: e.label }, `cmp-${e.id}`))
+                      ]
+                    }
+                  ) })
+                ] })
+              ] }) : null,
+              /* @__PURE__ */ t("div", { children: [
+                /* @__PURE__ */ l("label", { className: "toolbar-label mb-1 block", children: "True value" }),
+                /* @__PURE__ */ t("div", { className: "flex gap-1", children: [
+                  /* @__PURE__ */ l(z, { children: /* @__PURE__ */ l(
+                    "input",
+                    {
+                      value: O,
+                      onChange: (e) => q(e.target.value),
+                      className: "input-plain h-full min-w-0 flex-1 px-2!"
+                    }
+                  ) }),
+                  /* @__PURE__ */ l("div", { className: "w-34", children: /* @__PURE__ */ t(
+                    Y,
+                    {
+                      value: "",
+                      onChange: (e) => W(q, e),
+                      placeholder: "Pick var...",
+                      chevron: !0,
+                      children: [
+                        /* @__PURE__ */ l("option", { value: "", children: "Pick var…" }),
+                        B.map((e) => /* @__PURE__ */ l("option", { value: e.id, children: e.label }, `tv-${e.id}`))
+                      ]
+                    }
+                  ) })
+                ] })
+              ] }),
+              /* @__PURE__ */ t("div", { children: [
+                /* @__PURE__ */ l("label", { className: "toolbar-label mb-1 block", children: "False value" }),
+                /* @__PURE__ */ t("div", { className: "flex gap-1", children: [
+                  /* @__PURE__ */ l(z, { children: /* @__PURE__ */ l(
+                    "input",
+                    {
+                      value: o,
+                      onChange: (e) => _(e.target.value),
+                      className: "input-plain h-full min-w-0 flex-1 px-2!"
+                    }
+                  ) }),
+                  /* @__PURE__ */ l("div", { className: "w-34", children: /* @__PURE__ */ t(
+                    Y,
+                    {
+                      value: "",
+                      onChange: (e) => W(_, e),
+                      placeholder: "Pick var...",
+                      chevron: !0,
+                      children: [
+                        /* @__PURE__ */ l("option", { value: "", children: "Pick var…" }),
+                        B.map((e) => /* @__PURE__ */ l("option", { value: e.id, children: e.label }, `fv-${e.id}`))
+                      ]
+                    }
+                  ) })
+                ] })
+              ] })
+            ] }) : null,
+            /* @__PURE__ */ t("div", { children: [
+              /* @__PURE__ */ l("label", { className: "toolbar-label mb-1 block", children: "Preview" }),
+              /* @__PURE__ */ l(z, { grow: !0, children: /* @__PURE__ */ l("code", { className: "block w-full py-1 text-[11px] break-all whitespace-pre-wrap", children: G }) })
+            ] }),
+            /* @__PURE__ */ l("div", { className: "flex justify-end", children: /* @__PURE__ */ l(
+              "button",
+              {
+                type: "button",
+                className: "btn btn-primary btn-sm",
+                onClick: () => {
+                  u(G), N(null);
+                },
+                children: "Insert Expression"
+              }
+            ) })
+          ] })
+        }
+      ) : null
+    ] }),
+    c ? /* @__PURE__ */ t("div", { className: "text-neutral-content text-xs", children: [
+      "Data scope: ",
+      /* @__PURE__ */ l("span", { className: "text-base-content font-medium", children: c })
+    ] }) : null,
+    f.length > 0 ? /* @__PURE__ */ l("div", { className: "flex flex-wrap gap-1", children: f.map((e) => /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        className: "btn btn-ghost btn-xs",
+        onClick: () => u(e.value),
+        children: e.label
+      },
+      e.label
+    )) }) : null,
+    h ? /* @__PURE__ */ l("p", { className: "text-neutral-content text-xs", children: h }) : null,
+    x ? /* @__PURE__ */ t("details", { className: "text-neutral-content text-xs", children: [
+      /* @__PURE__ */ l("summary", { className: "cursor-pointer font-medium select-none", children: "What works here" }),
+      /* @__PURE__ */ t("div", { className: "mt-2 space-y-1", children: [
+        /* @__PURE__ */ t("div", { children: [
+          "Variables:",
+          /* @__PURE__ */ l("code", { className: "ml-1", children: "{{item.image}}" })
+        ] }),
+        /* @__PURE__ */ t("div", { children: [
+          "Fallback:",
+          /* @__PURE__ */ l("code", { className: "ml-1", children: '{{item.image || "/placeholder.jpg"}}' })
+        ] }),
+        /* @__PURE__ */ t("div", { children: [
+          "If / else:",
+          /* @__PURE__ */ l("code", { className: "ml-1", children: '{{item.image ? item.image : "/placeholder.jpg"}}' })
+        ] }),
+        /* @__PURE__ */ t("div", { children: [
+          "Equality check:",
+          /* @__PURE__ */ l("code", { className: "ml-1", children: '{{auth.status == logged-in ? item.image : "/placeholder.jpg"}}' })
+        ] })
+      ] })
+    ] }) : null
+  ] });
+}
+const me = 480, ze = 600;
+function pe(s, r) {
+  return r.includes(".") ? r.split(".").reduce((d, u) => d == null ? d : d[u], s) : s == null ? void 0 : s[r];
+}
+function S(s, r, d) {
+  if (!r.includes(".")) {
+    s[r] = d;
+    return;
+  }
+  const u = r.split(".");
+  let m = s;
+  for (let h = 0; h < u.length - 1; h++) {
+    const f = u[h];
+    (m[f] == null || typeof m[f] != "object") && (m[f] = {}), m = m[f];
+  }
+  m[u[u.length - 1]] = d;
+}
+const Ze = (s) => {
+  var i;
+  const r = { ...s }, { props: d, id: u } = ne((a) => {
+    var n;
+    return {
+      props: (n = a.data) == null ? void 0 : n.props,
+      id: a.id
+    };
+  }), {
+    actions: { setProp: m }
+  } = ne(), { query: h, actions: f } = he(), {
+    propKey: x,
+    typeKey: w,
+    contentKey: y = "src",
+    title: E = "Media",
+    showObjectProperties: Z = !0,
+    kindFilter: K,
+    defaultTypeValue: N = "cdn",
+    variant: F = "full",
+    label: J
+  } = r, [k, P] = b(!1), [T, H] = b("library"), U = le(null), [X, D] = b(), p = be(ge), ae = () => {
+    var n;
+    const a = (n = U.current) == null ? void 0 : n.getBoundingClientRect();
+    if (a) {
+      const g = p ? a.right + 8 : a.left - me - 8;
+      D({ x: Math.max(8, g), y: Math.max(8, a.top) });
+    } else
+      D(void 0);
+    H(q ? "dynamic" : "library"), P(!0);
+  }, j = (a) => {
+    if (!a) return;
+    const n = oe(h, a);
+    m((g) => {
+      S(g, x, a), S(g, w, (n == null ? void 0 : n.type) || N), y !== x && S(g, y, null);
+    }), Ie(
+      h,
+      f,
+      a,
+      (n == null ? void 0 : n.type) || "cdn",
+      u
+    ), P(!1);
+  }, I = Ee({
+    isOpen: F === "chip" && k,
+    onClose: () => P(!1),
+    onSelect: j,
+    selectionMode: !0
+  }), R = pe(d, x), A = pe(d, y), M = !!R, $ = typeof A == "string" ? A.trim() : "", O = !!$ && $.startsWith("http"), q = !!$, o = M ? oe(h, R) : null, _ = (o == null ? void 0 : o.type) === "svg", C = _ ? (i = o == null ? void 0 : o.metadata) == null ? void 0 : i.svg : null;
+  let c = null;
+  if (M && !_)
+    if ((o == null ? void 0 : o.type) === "cdn") {
+      const a = o.cdnId || o.id;
+      c = ke(a, { width: 600, format: "auto" });
+    } else
+      c = Pe(Me(h).pageMedia, R);
+  else O && (c = A);
+  const Q = (o ? Fe(o) : null) === "video" && !!c, L = !!(C || c), B = () => {
+    m((a) => {
+      S(a, x, null), S(a, w, N), S(a, y, null);
+    });
+  }, G = (a) => {
+    m((n) => {
+      S(n, y, a || null), a && (S(n, x, null), S(n, w, N));
+    });
+  }, W = () => F === "chip" && k ? /* @__PURE__ */ t(fe, { fallback: null, children: [
+    /* @__PURE__ */ l(
+      re,
+      {
+        isOpen: !0,
+        onClose: () => P(!1),
+        title: "Select Media",
+        storageKey: "media-input-chip-picker",
+        autoSize: !1,
+        defaultWidth: me,
+        defaultHeight: ze,
+        minWidth: 360,
+        maxWidth: 720,
+        minHeight: 420,
+        initialPosition: X,
+        persistSize: !1,
+        zIndex: ie,
+        children: /* @__PURE__ */ t("div", { className: "flex h-full flex-col", children: [
+          /* @__PURE__ */ t("div", { className: "border-base-300 flex items-center gap-1 border-b p-2", children: [
+            /* @__PURE__ */ l(
+              "button",
+              {
+                type: "button",
+                className: `btn btn-xs ${T === "library" ? "btn-primary" : "btn-ghost"}`,
+                onClick: () => H("library"),
+                children: "Library"
+              }
+            ),
+            /* @__PURE__ */ l(
+              "button",
+              {
+                type: "button",
+                className: `btn btn-xs ${T === "dynamic" ? "btn-primary" : "btn-ghost"}`,
+                onClick: () => H("dynamic"),
+                children: "Dynamic"
+              }
+            )
+          ] }),
+          T === "library" ? /* @__PURE__ */ l(
+            Te,
+            {
+              manager: I,
+              selectionMode: !0,
+              onSelect: j,
+              onClose: () => P(!1),
+              popover: !0
+            }
+          ) : /* @__PURE__ */ l("div", { className: "space-y-2 p-3", children: /* @__PURE__ */ l(
+            Ve,
+            {
+              id: "media-chip-dynamic-src",
+              value: $,
+              onChange: G,
+              label: "Image Source",
+              placeholder: "https://... or {{item.image}}",
+              helpText: "Use a URL or token like {{item.image}}.",
+              intent: "image-src",
+              showExpressionHelp: !1,
+              snippets: [
+                { label: "Item image", value: "{{item.image}}" },
+                { label: "Image fallback", value: '{{item.image || "/placeholder.jpg"}}' },
+                {
+                  label: "Connector image",
+                  value: "{{connector.provider.bindings.products.0.image}}"
+                }
+              ]
+            }
+          ) })
+        ] })
+      }
+    ),
+    F === "chip" && k ? /* @__PURE__ */ l(
+      je,
+      {
+        previewMedia: I.previewMedia,
+        filteredMedia: I.filteredMedia,
+        onClose: () => I.setPreviewMedia(null),
+        onPrevious: I.handlePreviewPrevious,
+        onNext: I.handlePreviewNext
+      }
+    ) : null
+  ] }) : k ? /* @__PURE__ */ l(
+    Oe,
+    {
+      isOpen: !0,
+      onClose: () => P(!1),
+      onSelect: j,
+      selectionMode: !0,
+      kindFilter: K
+    }
+  ) : null;
+  if (F === "chip") {
+    const a = L ? C ? /* @__PURE__ */ l(
+      "span",
+      {
+        className: "text-base-content absolute inset-0 flex items-center justify-center [&>svg]:size-full [&>svg]:max-h-full [&>svg]:max-w-full",
+        dangerouslySetInnerHTML: { __html: C },
+        "aria-hidden": !0
+      }
+    ) : Q ? /* @__PURE__ */ l(
+      "video",
+      {
+        src: c ?? void 0,
+        className: "absolute inset-0 size-full object-cover",
+        preload: "metadata",
+        muted: !0,
+        playsInline: !0
+      }
+    ) : /* @__PURE__ */ l(
+      "span",
+      {
+        className: "absolute inset-0 bg-cover bg-center",
+        style: c ? { backgroundImage: `url(${c})` } : void 0,
+        "aria-hidden": !0
+      }
+    ) : /* @__PURE__ */ l(ce, { className: "size-3.5", "aria-hidden": !0 });
+    return /* @__PURE__ */ t(te, { children: [
+      /* @__PURE__ */ l(
+        z,
+        {
+          mode: "popover",
+          ref: U,
+          label: J,
+          open: k,
+          onTriggerClick: ae,
+          onClear: B,
+          triggerAriaLabel: L || q ? "Change media" : "Add media",
+          clearAriaLabel: "Clear media",
+          variant: L ? "preview" : "default",
+          leading: a,
+          summary: L ? null : q ? $ : "Add..."
+        }
+      ),
+      W()
+    ] });
+  }
+  const e = /* @__PURE__ */ t(te, { children: [
+    /* @__PURE__ */ t("div", { className: "space-y-2", children: [
+      M && (C || c) || O && c ? /* @__PURE__ */ t("div", { className: "relative", children: [
+        /* @__PURE__ */ l(Re, { size: "video", bg: "base-100", bordered: !1, padded: !0, children: C ? /* @__PURE__ */ l(
+          "div",
+          {
+            className: "text-base-content flex size-full items-center justify-center [&>svg]:size-full [&>svg]:max-h-full [&>svg]:max-w-full",
+            dangerouslySetInnerHTML: { __html: C }
+          }
+        ) : Q ? /* @__PURE__ */ l(
+          "video",
+          {
+            src: c ?? void 0,
+            className: "size-full rounded-lg object-cover",
+            preload: "metadata",
+            muted: !0,
+            playsInline: !0
+          }
+        ) : c ? /* @__PURE__ */ l(
+          "img",
+          {
+            src: c,
+            alt: "Preview",
+            className: "size-full rounded-lg object-cover",
+            loading: "lazy"
+          }
+        ) : null }),
+        /* @__PURE__ */ l(Se, { onClick: B, tooltip: "Clear media", floating: !0 })
+      ] }) : null,
+      O && /* @__PURE__ */ t("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ l("label", { htmlFor: "media-input-url", className: "toolbar-label block font-medium", children: "Image URL" }),
+        /* @__PURE__ */ l(
+          "input",
+          {
+            id: "media-input-url",
+            type: "url",
+            value: A || "",
+            onChange: (a) => G(a.target.value),
+            placeholder: "https://example.com/image.jpg",
+            className: "input placeholder:text-neutral-content px-3! py-2!"
+          }
+        ),
+        /* @__PURE__ */ l("p", { className: "text-neutral-content text-xs", children: "Enter a direct image URL or use the media library below" })
+      ] }),
+      /* @__PURE__ */ l(
+        $e,
+        {
+          onClick: () => P(!0),
+          icon: /* @__PURE__ */ l(ce, { size: 12, "aria-hidden": !0 }),
+          children: M ? "Change Media" : "Browse Media Library"
+        }
+      )
+    ] }),
+    Z && /* @__PURE__ */ t(
+      de,
+      {
+        title: "Object Properties",
+        nested: !0,
+        collapsible: !0,
+        defaultOpen: !1,
+        accordionPassive: !0,
+        children: [
+          /* @__PURE__ */ l(ue, { propKey: "objectFit", label: "Object Fit", prop: "objectFit", type: "select" }),
+          /* @__PURE__ */ l(
+            ue,
+            {
+              propKey: "objectPosition",
+              label: "Object Position",
+              prop: "objectPosition",
+              type: "select"
+            }
+          )
+        ]
+      }
+    ),
+    W()
+  ] });
+  return E ? /* @__PURE__ */ l(de, { title: E, full: 1, collapsible: r.collapsible, children: e }) : e;
+};
+export {
+  Ze as M
+};