@pagehub/sdk 0.1.5 → 0.1.7

package/dist/chunks/AnimationEditorPanel-CXNmsTqV.js

@@ -0,0 +1,26 @@
+import { jsx as i } from "react/jsx-runtime";
+import { W as e, e4 as a } from "./index-C66dAl3Q.js";
+import { F as o } from "./FloatingPanel-DJP5Vhua.js";
+import { a as r } from "./AnimationsInput-Djyz0uXG.js";
+function f({ initialPosition: t, onClose: n }) {
+  return /* @__PURE__ */ i(
+    o,
+    {
+      isOpen: !0,
+      onClose: n,
+      title: "Animation",
+      icon: /* @__PURE__ */ i(a, { "aria-hidden": !0 }),
+      storageKey: "effects-builder-animation",
+      minWidth: 320,
+      maxWidth: 520,
+      minHeight: 300,
+      initialPosition: t,
+      zIndex: e,
+      scrollable: !0,
+      children: /* @__PURE__ */ i(r, {})
+    }
+  );
+}
+export {
+  f as default
+};

package/dist/chunks/AnimationsInput-Djyz0uXG.js

@@ -0,0 +1,292 @@
+import { jsxs as l, Fragment as y, jsx as e } from "react/jsx-runtime";
+import { useNode as L, useEditor as K } from "@craftjs/core";
+import C, { useState as U } from "react";
+import { eH as T, w as _, n as i, eI as G, d9 as k, d8 as H, eJ as j, T as M, eK as z } from "./index-C66dAl3Q.js";
+const B = [
+  { value: "", label: "Default" },
+  { value: "easeOut", label: "Ease Out" },
+  { value: "easeIn", label: "Ease In" },
+  { value: "easeInOut", label: "Ease In Out" },
+  { value: "linear", label: "Linear" },
+  { value: "spring", label: "Spring" }
+], $ = [
+  { value: "", label: "Default" },
+  { value: "scroll", label: "On Scroll" },
+  { value: "load", label: "On Load" },
+  { value: "hover", label: "On Hover" }
+], q = [
+  { value: "", label: "Default" },
+  { value: "scroll", label: "On Scroll" },
+  { value: "load", label: "On Load" },
+  { value: "hover", label: "On Hover" }
+], f = [
+  "animationDuration",
+  "animationDelay",
+  "animationEasing",
+  "animationTrigger",
+  "animationLoop",
+  "animationStagger",
+  "animationExit"
+], J = Object.entries(T).reduce(
+  (a, [s, r]) => (a[r.group] || (a[r.group] = []), a[r.group].push({ key: s, ...r }), a),
+  {}
+), R = [
+  { value: "early", label: "Early (0–33%)", start: 0, end: 33 },
+  { value: "middle", label: "Middle (25–66%)", start: 25, end: 66 },
+  { value: "late", label: "Late (50–100%)", start: 50, end: 100 },
+  { value: "full", label: "Full (0–100%)", start: 0, end: 100 }
+];
+function Y() {
+  var r, d, v, b;
+  const { id: a } = L(), { query: s } = K();
+  try {
+    const p = s.node(a).get();
+    let u = (r = p == null ? void 0 : p.data) == null ? void 0 : r.parent;
+    for (; u; ) {
+      const c = s.node(u).get();
+      if (((v = (d = c == null ? void 0 : c.data) == null ? void 0 : d.props) == null ? void 0 : v.scrollEffect) === "scroll-timeline") return !0;
+      u = (b = c == null ? void 0 : c.data) == null ? void 0 : b.parent;
+    }
+  } catch {
+  }
+  return !1;
+}
+const Z = () => {
+  var S, I, w, O, N, E, P, D;
+  const {
+    props: a,
+    actions: { setProp: s }
+  } = L((o) => {
+    var n;
+    return {
+      props: (n = o.data) == null ? void 0 : n.props
+    };
+  }), r = Y(), d = (S = a.root) == null ? void 0 : S.scrollTimeline, [v, b] = U(0), p = ((I = a.root) == null ? void 0 : I.animation) || "", u = !!p, c = f.some((o) => {
+    var n;
+    return (n = a.root) == null ? void 0 : n[o];
+  }), g = ((w = a.root) == null ? void 0 : w.animationEngine) || "css", m = g === "css", F = (o) => {
+    s((n) => {
+      n.root || (n.root = {}), n.root.animationEngine = o, n.root.animation = "", f.forEach((t) => {
+        delete n.root[t];
+      });
+    });
+  }, A = () => {
+    s((o) => {
+      f.forEach((n) => {
+        delete o.root[n];
+      });
+    });
+  }, h = m && ((O = T[p]) == null ? void 0 : O.trigger) === "hover", x = m && ((N = T[p]) == null ? void 0 : N.trigger) === "continuous";
+  return /* @__PURE__ */ l(y, { children: [
+    r && /* @__PURE__ */ l(
+      _,
+      {
+        enabled: !0,
+        title: "Scroll Timeline",
+        icon: /* @__PURE__ */ e(G, {}),
+        help: "Animate this element as the parent section scrolls. Pick what happens and when.",
+        children: [
+          /* @__PURE__ */ l(
+            i,
+            {
+              propKey: "root.scrollTimeline.preset",
+              propType: "component",
+              type: "select",
+              label: "Animation",
+              children: [
+                /* @__PURE__ */ e("option", { value: "", children: "None" }),
+                /* @__PURE__ */ e("option", { value: "fadeIn", children: "Fade In" }),
+                /* @__PURE__ */ e("option", { value: "fadeOut", children: "Fade Out" }),
+                /* @__PURE__ */ e("option", { value: "scaleUp", children: "Scale Up" }),
+                /* @__PURE__ */ e("option", { value: "slideLeft", children: "Slide from Right" }),
+                /* @__PURE__ */ e("option", { value: "slideRight", children: "Slide from Left" }),
+                /* @__PURE__ */ e("option", { value: "slideUp", children: "Slide Up" }),
+                /* @__PURE__ */ e("option", { value: "slideDown", children: "Slide Down" }),
+                /* @__PURE__ */ e("option", { value: "rotateIn", children: "Rotate In" }),
+                /* @__PURE__ */ e("option", { value: "fadeScale", children: "Fade + Scale" }),
+                /* @__PURE__ */ e("option", { value: "slideRotate", children: "Slide + Rotate" })
+              ]
+            }
+          ),
+          (d == null ? void 0 : d.preset) && /* @__PURE__ */ e(
+            i,
+            {
+              propKey: "root.scrollTimeline._timing",
+              propType: "component",
+              type: "select",
+              label: "Timing",
+              onChange: (o) => {
+                const n = R.find((t) => t.value === o);
+                n && s((t) => {
+                  t.root || (t.root = {}), t.root.scrollTimeline || (t.root.scrollTimeline = {}), t.root.scrollTimeline.startProgress = n.start, t.root.scrollTimeline.endProgress = n.end, t.root.scrollTimeline._timing = o;
+                });
+              },
+              children: R.map((o) => /* @__PURE__ */ e("option", { value: o.value, children: o.label }, o.value))
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ l(y, { children: [
+      /* @__PURE__ */ e("div", { className: "border-base-300 bg-base-200/40 mb-3 flex h-32 items-center justify-center overflow-hidden rounded-xl border", children: u ? (() => {
+        var n;
+        const o = k({}, a);
+        return (n = o.className) != null && n.includes("ph-anim-scroll") && (o.className = o.className.replace("ph-anim-scroll", "").trim() + " ph-in-view", delete o.ref), C.createElement(
+          H(a, "div"),
+          { ...o, key: `${p}-${v}` },
+          /* @__PURE__ */ l(
+            "button",
+            {
+              type: "button",
+              onClick: () => b((t) => t + 1),
+              className: "border-base-300 bg-base-100 text-base-content hover:border-primary group flex size-16 cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border shadow-sm transition-colors",
+              "aria-label": "Replay animation",
+              children: [
+                /* @__PURE__ */ e(
+                  j,
+                  {
+                    className: "text-neutral-content group-hover:text-primary size-4 transition-colors",
+                    "aria-hidden": !0
+                  }
+                ),
+                /* @__PURE__ */ e("span", { className: "text-[10px] font-medium tracking-wide uppercase", children: "Replay" })
+              ]
+            }
+          )
+        );
+      })() : /* @__PURE__ */ l("div", { className: "text-neutral-content flex flex-col items-center gap-1.5 text-xs", children: [
+        /* @__PURE__ */ e("div", { className: "border-base-300 bg-base-100 size-16 rounded-lg border border-dashed" }),
+        /* @__PURE__ */ e("span", { children: "Pick an animation to preview" })
+      ] }) }),
+      /* @__PURE__ */ e("div", { className: "mb-2", children: /* @__PURE__ */ e(
+        M,
+        {
+          dense: !0,
+          "aria-label": "Animation engine",
+          value: g,
+          onChange: F,
+          options: [
+            { value: "css", label: "CSS / Tailwind" },
+            { value: "framer", label: "Framer Motion" }
+          ]
+        }
+      ) }),
+      g === "css" ? (
+        /* ── CSS / Tailwind presets ─────────────────────────────────── */
+        /* @__PURE__ */ l(i, { propType: "root", propKey: "animation", type: "select", label: "Type", children: [
+          /* @__PURE__ */ e("option", { value: "", children: "None" }),
+          Object.entries(J).map(([o, n]) => /* @__PURE__ */ e("optgroup", { label: o, children: n.map((t) => /* @__PURE__ */ e("option", { value: t.key, children: t.label }, t.key)) }, o))
+        ] })
+      ) : (
+        /* ── Framer Motion presets ──────────────────────────────────── */
+        /* @__PURE__ */ l(i, { propType: "root", propKey: "animation", type: "select", label: "Type", children: [
+          /* @__PURE__ */ e("option", { value: "", children: "None" }),
+          /* @__PURE__ */ l("optgroup", { label: "Entrance", children: [
+            /* @__PURE__ */ e("option", { value: "fadeIn", children: "Fade In" }),
+            /* @__PURE__ */ e("option", { value: "fadeUp", children: "Fade Up" }),
+            /* @__PURE__ */ e("option", { value: "fadeDown", children: "Fade Down" }),
+            /* @__PURE__ */ e("option", { value: "fadeLeft", children: "Fade Left" }),
+            /* @__PURE__ */ e("option", { value: "fadeRight", children: "Fade Right" }),
+            /* @__PURE__ */ e("option", { value: "scaleUp", children: "Scale Up" }),
+            /* @__PURE__ */ e("option", { value: "blurIn", children: "Blur In" }),
+            /* @__PURE__ */ e("option", { value: "slideUp", children: "Slide Up" }),
+            /* @__PURE__ */ e("option", { value: "flipIn", children: "Flip In" }),
+            /* @__PURE__ */ e("option", { value: "spring", children: "Spring" })
+          ] }),
+          /* @__PURE__ */ l("optgroup", { label: "Hover", children: [
+            /* @__PURE__ */ e("option", { value: "hoverGrow", children: "Grow on Hover" }),
+            /* @__PURE__ */ e("option", { value: "hoverLift", children: "Lift on Hover" }),
+            /* @__PURE__ */ e("option", { value: "hoverGlow", children: "Glow on Hover" }),
+            /* @__PURE__ */ e("option", { value: "press", children: "Press" })
+          ] }),
+          /* @__PURE__ */ l("optgroup", { label: "Continuous", children: [
+            /* @__PURE__ */ e("option", { value: "tween", children: "Tween" }),
+            /* @__PURE__ */ e("option", { value: "bounce", children: "Bounce" })
+          ] })
+        ] })
+      ),
+      u && /* @__PURE__ */ l(y, { children: [
+        /* @__PURE__ */ e(
+          i,
+          {
+            propType: "root",
+            propKey: "animationDuration",
+            type: "slider",
+            label: "Duration",
+            min: 0.1,
+            max: 2,
+            step: 0.1,
+            append: /* @__PURE__ */ l("span", { className: "text-neutral-content w-8 text-right text-[10px]", children: [
+              ((E = a.root) == null ? void 0 : E.animationDuration) || "—",
+              "s"
+            ] })
+          }
+        ),
+        !h && /* @__PURE__ */ e(
+          i,
+          {
+            propType: "root",
+            propKey: "animationDelay",
+            type: "slider",
+            label: "Delay",
+            min: 0,
+            max: 1,
+            step: 0.05,
+            append: /* @__PURE__ */ l("span", { className: "text-neutral-content w-8 text-right text-[10px]", children: [
+              ((P = a.root) == null ? void 0 : P.animationDelay) || "0",
+              "s"
+            ] })
+          }
+        ),
+        !h && /* @__PURE__ */ e(i, { propType: "root", propKey: "animationEasing", type: "select", label: "Easing", children: B.map((o) => /* @__PURE__ */ e("option", { value: o.value, children: o.label }, o.value)) }),
+        !h && !x && /* @__PURE__ */ e(i, { propType: "root", propKey: "animationTrigger", type: "select", label: "Trigger", children: (m ? q : $).map((o) => /* @__PURE__ */ e("option", { value: o.value, children: o.label }, o.value)) }),
+        !h && /* @__PURE__ */ l(i, { propType: "root", propKey: "animationLoop", type: "select", label: "Repeat", children: [
+          /* @__PURE__ */ e("option", { value: "", children: "Play Once" }),
+          /* @__PURE__ */ e("option", { value: "loop", children: "Loop" }),
+          /* @__PURE__ */ e("option", { value: "2", children: "2×" }),
+          /* @__PURE__ */ e("option", { value: "3", children: "3×" })
+        ] }),
+        !m && /* @__PURE__ */ e(
+          i,
+          {
+            propType: "root",
+            propKey: "animationStagger",
+            type: "slider",
+            label: "Stagger",
+            min: 0,
+            max: 0.5,
+            step: 0.02,
+            append: /* @__PURE__ */ l("span", { className: "text-neutral-content w-8 text-right text-[10px]", children: [
+              ((D = a.root) == null ? void 0 : D.animationStagger) || "0",
+              "s"
+            ] })
+          }
+        ),
+        !m && !h && !x && /* @__PURE__ */ l(i, { propType: "root", propKey: "animationExit", type: "select", label: "Exit", children: [
+          /* @__PURE__ */ e("option", { value: "", children: "None" }),
+          /* @__PURE__ */ e("option", { value: "fadeOut", children: "Fade Out" }),
+          /* @__PURE__ */ e("option", { value: "fadeDown", children: "Fade Down" }),
+          /* @__PURE__ */ e("option", { value: "fadeUp", children: "Fade Up" }),
+          /* @__PURE__ */ e("option", { value: "scaleDown", children: "Scale Down" }),
+          /* @__PURE__ */ e("option", { value: "blurOut", children: "Blur Out" })
+        ] }),
+        c && /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            onClick: A,
+            className: "text-neutral-content hover:bg-neutral hover:text-base-content mt-1 flex w-full items-center justify-center gap-1.5 rounded-md px-2 py-1 text-[11px] transition-colors",
+            children: [
+              /* @__PURE__ */ e(z, { size: 12 }),
+              "Reset to defaults"
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+export {
+  f as A,
+  Z as a
+};

package/dist/chunks/AnimationsInputPopover-B2-oNebx.js

@@ -0,0 +1,71 @@
+import { jsxs as C, Fragment as I, jsx as n } from "react/jsx-runtime";
+import { useNode as N } from "@craftjs/core";
+import { useState as E, Suspense as k, lazy as T } from "react";
+import { G as z, C as O, e4 as j, eH as L } from "./index-C66dAl3Q.js";
+import { A as S } from "./AnimationsInput-Djyz0uXG.js";
+import { u as _ } from "./usePopoverAutoOpen-CxIjt0ez.js";
+import { u as F } from "./usePopoverPosition-83Vti7Aw.js";
+const H = T(() => import("./AnimationsPanel-DungA9qb.js")), M = 360;
+function R(e, t) {
+  if (!e) return "Add Animation…";
+  const o = L[e];
+  return o != null && o.label ? o.label : t === "framer" ? `Framer: ${e}` : e;
+}
+function q({ def: e }) {
+  const [t, o] = E(!1), { triggerRef: s, initialPos: f, setInitialPos: A, computePosition: b } = F(M), {
+    actions: { setProp: P },
+    id: g,
+    animation: l,
+    engine: h
+  } = N((i) => {
+    var a, c, m, p, u, d;
+    return {
+      id: i.id,
+      animation: ((m = (c = (a = i.data) == null ? void 0 : a.props) == null ? void 0 : c.root) == null ? void 0 : m.animation) || "",
+      engine: ((d = (u = (p = i.data) == null ? void 0 : p.props) == null ? void 0 : u.root) == null ? void 0 : d.animationEngine) || "css"
+    };
+  }), y = R(l, h), v = !l, r = () => {
+    A(b()), o(!0);
+  };
+  _({ nodeId: g, defId: e == null ? void 0 : e.id, onOpen: r });
+  const x = () => {
+    P((i) => {
+      i.root && (i.root.animation = "", S.forEach((a) => {
+        delete i.root[a];
+      }));
+    });
+  };
+  return /* @__PURE__ */ C(I, { children: [
+    v ? /* @__PURE__ */ n(
+      "button",
+      {
+        ref: s,
+        type: "button",
+        onClick: () => t ? o(!1) : r(),
+        "aria-expanded": t,
+        "aria-label": "Add animation",
+        className: "text-neutral-content hover:text-base-content hover:bg-base-200 flex size-4 shrink-0 items-center justify-center rounded-md opacity-70 transition-[color,background-color,opacity] hover:opacity-100",
+        children: /* @__PURE__ */ n(z, { className: "size-3.5", "aria-hidden": !0 })
+      }
+    ) : /* @__PURE__ */ n(
+      O,
+      {
+        mode: "popover",
+        ref: s,
+        open: t,
+        onTriggerClick: () => t ? o(!1) : r(),
+        onClear: () => {
+          t && o(!1), x();
+        },
+        triggerAriaLabel: "Edit animation",
+        clearAriaLabel: "Clear animation",
+        leading: /* @__PURE__ */ n(j, { className: "size-3.5", "aria-hidden": !0 }),
+        summary: y
+      }
+    ),
+    t && /* @__PURE__ */ n(k, { fallback: null, children: /* @__PURE__ */ n(H, { initialPosition: f, onClose: () => o(!1) }) })
+  ] });
+}
+export {
+  q as default
+};

package/dist/chunks/AnimationsPanel-DungA9qb.js

@@ -0,0 +1,25 @@
+import { jsx as i } from "react/jsx-runtime";
+import { F as a } from "./FloatingPanel-DJP5Vhua.js";
+import { a as o } from "./AnimationsInput-Djyz0uXG.js";
+import { W as r } from "./index-C66dAl3Q.js";
+function p({ initialPosition: t, onClose: n }) {
+  return /* @__PURE__ */ i(
+    a,
+    {
+      isOpen: !0,
+      onClose: n,
+      title: "Animation",
+      storageKey: "animations-input",
+      minWidth: 320,
+      maxWidth: 520,
+      minHeight: 300,
+      initialPosition: t,
+      zIndex: r,
+      scrollable: !0,
+      children: /* @__PURE__ */ i(o, {})
+    }
+  );
+}
+export {
+  p as default
+};

package/dist/chunks/Audio.render-CsR69fZ9.js

@@ -0,0 +1,22 @@
+import { cY as e, cZ as p, c_ as c, c$ as t } from "./index-C66dAl3Q.js";
+const l = (d) => {
+  var a;
+  const n = {
+    controls: !0,
+    autoPlay: !1,
+    loop: !1,
+    ...d
+  }, s = e(), o = p(), i = c({
+    id: (o == null ? void 0 : o.id) ?? "",
+    isCanvas: (o == null ? void 0 : o.isCanvas) ?? !1,
+    hasChildNodes: (((a = o == null ? void 0 : o.childIds) == null ? void 0 : a.length) ?? 0) > 0,
+    displayName: (o == null ? void 0 : o.displayName) ?? "Audio",
+    rootProps: (s == null ? void 0 : s.rootProps) ?? {},
+    pageMedia: (s == null ? void 0 : s.pageMedia) ?? null,
+    pageIndex: (s == null ? void 0 : s.pageIndex) ?? {}
+  });
+  return t(n, i);
+};
+export {
+  l as AudioRender
+};

package/dist/chunks/AudioMainTab-BljM2NMQ.js

@@ -0,0 +1,70 @@
+import { jsxs as t, Fragment as l, jsx as e } from "react/jsx-runtime";
+import { w as p, n as o } from "./index-C66dAl3Q.js";
+import { r } from "./helpers-Cll72tMn.js";
+import { S as i } from "./SlotRenderer-CaLf_2_C.js";
+const d = () => r({
+  Content: /* @__PURE__ */ t(l, { children: [
+    /* @__PURE__ */ t(p, { collapsible: !1, children: [
+      /* @__PURE__ */ e(
+        o,
+        {
+          propKey: "src",
+          propType: "component",
+          type: "text",
+          label: "URL",
+          labelHide: !0,
+          placeholder: "https://example.com/audio.mp3"
+        }
+      ),
+      /* @__PURE__ */ e(i, { id: "settings/ai-button" })
+    ] }),
+    /* @__PURE__ */ t(p, { title: "Playback Options", help: "Controls, autoplay, and loop settings.", children: [
+      /* @__PURE__ */ e(
+        o,
+        {
+          propKey: "controls",
+          propType: "component",
+          type: "checkbox",
+          label: "Show Controls",
+          labelWidth: "w-full",
+          inputWidth: "w-fit"
+        }
+      ),
+      /* @__PURE__ */ e(
+        o,
+        {
+          propKey: "autoPlay",
+          propType: "component",
+          type: "checkbox",
+          label: "Autoplay",
+          labelWidth: "w-full",
+          inputWidth: "w-fit"
+        }
+      ),
+      /* @__PURE__ */ e(
+        o,
+        {
+          propKey: "loop",
+          propType: "component",
+          type: "checkbox",
+          label: "Loop",
+          labelWidth: "w-full",
+          inputWidth: "w-fit"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(p, { title: "Accessibility", help: "Title for screen readers.", children: /* @__PURE__ */ e(
+      o,
+      {
+        propKey: "title",
+        propType: "component",
+        type: "text",
+        label: "Title",
+        placeholder: "Audio description"
+      }
+    ) })
+  ] })
+});
+export {
+  d as AudioMainTab
+};

package/dist/chunks/BackdropEditorPanel-CA2k-6SR.js

@@ -0,0 +1,26 @@
+import { jsx as r } from "react/jsx-runtime";
+import { W as t, e3 as a } from "./index-C66dAl3Q.js";
+import { F as o } from "./FloatingPanel-DJP5Vhua.js";
+import { B as d } from "./EffectsClassInput-Yujuchwy.js";
+function p({ initialPosition: e, onClose: i }) {
+  return /* @__PURE__ */ r(
+    o,
+    {
+      isOpen: !0,
+      onClose: i,
+      title: "Backdrop Filter",
+      icon: /* @__PURE__ */ r(a, { "aria-hidden": !0 }),
+      storageKey: "effects-builder-backdrop",
+      minWidth: 300,
+      maxWidth: 480,
+      minHeight: 300,
+      initialPosition: e,
+      zIndex: t,
+      scrollable: !0,
+      children: /* @__PURE__ */ r(d, {})
+    }
+  );
+}
+export {
+  p as default
+};

package/dist/chunks/BackgroundImageInputPopover-vB_217Ig.js

@@ -0,0 +1,94 @@
+import { jsxs as w, Fragment as z, jsx as a } from "react/jsx-runtime";
+import { useEditor as E, useNode as j } from "@craftjs/core";
+import { useState as k, useMemo as B, Suspense as C, lazy as S } from "react";
+import { _ as H, aP as R, aQ as D, aR as F, C as O, F as Q, eP as U, a0 as W } from "./index-C66dAl3Q.js";
+import { u as q } from "./usePopoverAutoOpen-CxIjt0ez.js";
+import { u as y } from "./usePopoverPosition-83Vti7Aw.js";
+const G = S(() => import("./BackgroundImagePanel-BvMhF9eU.js")), $ = S(() => import("./ImageSettingsPanel-dvOmGg3C.js")), J = 480, K = 360;
+function ae({ def: o }) {
+  var b;
+  const [s, i] = k(!1), [p, c] = k(!1), r = y(J), l = y(K), { query: u } = E(), {
+    actions: { setProp: T },
+    id: x,
+    background: m
+  } = j((t) => {
+    var h, v;
+    return {
+      id: t.id,
+      background: (v = (h = t.data) == null ? void 0 : h.props) == null ? void 0 : v.background
+    };
+  }), { pageMedia: A } = B(() => H(u), [u]), d = m == null ? void 0 : m.image, n = !!d, e = n ? R(u, d) : null, f = (e == null ? void 0 : e.type) === "svg", I = f ? (b = e == null ? void 0 : e.metadata) == null ? void 0 : b.svg : null;
+  let g = null;
+  if (n && !f)
+    if ((e == null ? void 0 : e.type) === "cdn") {
+      const t = e.cdnId || e.id;
+      g = D(t, { width: 600, format: "auto" });
+    } else
+      g = F(A, d);
+  const P = () => {
+    r.setInitialPos(r.computePosition()), i(!0);
+  }, N = () => {
+    l.setInitialPos(l.computePosition()), c(!0);
+  };
+  q({ nodeId: x, defId: o == null ? void 0 : o.id, onOpen: P });
+  const L = () => {
+    T((t) => {
+      t.background || (t.background = {}), t.background.image = null, t.background.imageType = "cdn";
+    });
+  }, _ = (o == null ? void 0 : o.label) ?? "Image";
+  return /* @__PURE__ */ w(z, { children: [
+    /* @__PURE__ */ a(
+      O,
+      {
+        mode: "popover",
+        ref: r.triggerRef,
+        label: _,
+        open: s,
+        onTriggerClick: () => s ? i(!1) : P(),
+        onClear: () => {
+          s && i(!1), p && c(!1), L();
+        },
+        triggerAriaLabel: n ? "Change image" : "Add image",
+        clearAriaLabel: "Clear image",
+        variant: n ? "preview" : "default",
+        leading: n ? I ? /* @__PURE__ */ a(
+          "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: I },
+            "aria-hidden": !0
+          }
+        ) : /* @__PURE__ */ a(
+          "span",
+          {
+            className: "absolute inset-0 bg-cover bg-center",
+            style: g ? { backgroundImage: `url(${g})` } : void 0,
+            "aria-hidden": !0
+          }
+        ) : /* @__PURE__ */ a(W, { className: "size-3.5", "aria-hidden": !0 }),
+        summary: n ? null : "Add...",
+        trailingExtras: n ? /* @__PURE__ */ a(
+          Q,
+          {
+            ref: l.triggerRef,
+            ariaLabel: "Image settings",
+            tooltip: "Image settings",
+            onClick: N,
+            children: /* @__PURE__ */ a(U, { className: "size-3.5", "aria-hidden": !0 })
+          }
+        ) : null
+      }
+    ),
+    s && /* @__PURE__ */ a(C, { fallback: null, children: /* @__PURE__ */ a(G, { initialPosition: r.initialPos, onClose: () => i(!1) }) }),
+    p && /* @__PURE__ */ a(C, { fallback: null, children: /* @__PURE__ */ a(
+      $,
+      {
+        initialPosition: l.initialPos,
+        onClose: () => c(!1)
+      }
+    ) })
+  ] });
+}
+export {
+  ae as default
+};