@pagehub/sdk 0.1.4 → 0.1.6

package/dist/chunks/FloatingPanel-DJP5Vhua.js

@@ -0,0 +1,553 @@
+import { jsxs as B, jsx as H, Fragment as Rt } from "react/jsx-runtime";
+import p, { useRef as A, useEffect as W, useCallback as et, useState as U, useMemo as St, useContext as ct, useLayoutEffect as zt } from "react";
+import Dt from "react-dom";
+import { db as ft, ct as Lt, t as Ht, a4 as Ft, bY as Nt } from "./index-C66dAl3Q.js";
+const Wt = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])';
+function At(t) {
+  const o = A(null), i = A(null);
+  return W(() => {
+    if (!t || !o.current) return;
+    i.current = document.activeElement;
+    const a = o.current, l = () => Array.from(a.querySelectorAll(Wt)).filter(
+      (r) => r.offsetParent !== null
+    ), d = l();
+    d.length > 0 && requestAnimationFrame(() => {
+      var r;
+      return (r = d[0]) == null ? void 0 : r.focus();
+    });
+    const c = (r) => {
+      if (r.key !== "Tab") return;
+      const w = l();
+      if (w.length === 0) return;
+      const m = w[0], s = w[w.length - 1];
+      r.shiftKey ? document.activeElement === m && (s.focus(), r.preventDefault()) : document.activeElement === s && (m.focus(), r.preventDefault());
+    };
+    return a.addEventListener("keydown", c), () => {
+      var r;
+      a.removeEventListener("keydown", c), (r = i.current) == null || r.focus();
+    };
+  }, [t]), o;
+}
+let S = null;
+function Xt() {
+  return S && document.body.contains(S) || (S = document.createElement("div"), S.setAttribute("aria-live", "polite"), S.setAttribute("aria-atomic", "true"), S.setAttribute("role", "status"), S.className = "sr-only", S.style.cssText = "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0", document.body.appendChild(S)), S;
+}
+function Zt() {
+  return et((o, i = "polite") => {
+    const a = Xt();
+    a.setAttribute("aria-live", i), a.textContent = "", requestAnimationFrame(() => {
+      a.textContent = o;
+    });
+  }, []);
+}
+function Yt(t) {
+  const { threshold: o = 1 } = t, i = p.useRef(t.onStart), a = p.useRef(t.onMove), l = p.useRef(t.onEnd);
+  p.useEffect(() => {
+    i.current = t.onStart, a.current = t.onMove, l.current = t.onEnd;
+  });
+  const d = p.useRef(null), c = p.useRef(!1), r = p.useRef(null), w = p.useRef(null), m = p.useRef(null), s = p.useCallback(() => {
+    r.current && (window.removeEventListener("pointermove", r.current), r.current = null), w.current && (window.removeEventListener("pointerup", w.current), window.removeEventListener("pointercancel", w.current), w.current = null), m.current && (window.removeEventListener("blur", m.current), m.current = null);
+  }, []), v = p.useCallback(
+    (u) => {
+      var z;
+      if (!d.current) return;
+      s();
+      const y = c.current;
+      d.current = null, c.current = !1, (z = l.current) == null || z.call(l, u, y);
+    },
+    [s]
+  ), x = p.useCallback(
+    (u) => {
+      var D;
+      if (u.button !== 0) return;
+      s();
+      const y = { clientX: u.clientX, clientY: u.clientY };
+      if (((D = i.current) == null ? void 0 : D.call(i, u, y)) === !1) return;
+      d.current = y, c.current = !1;
+      try {
+        u.currentTarget.setPointerCapture(u.pointerId);
+      } catch {
+      }
+      const P = (R) => {
+        var _;
+        if (!d.current) return;
+        if (R.buttons === 0) {
+          v(R);
+          return;
+        }
+        const L = R.clientX - d.current.clientX, F = R.clientY - d.current.clientY;
+        !c.current && Math.hypot(L, F) >= o && (c.current = !0), (_ = a.current) == null || _.call(a, R, { dx: L, dy: F, clientX: R.clientX, clientY: R.clientY });
+      }, C = (R) => v(R), M = () => v(null);
+      r.current = P, w.current = C, m.current = M, window.addEventListener("pointermove", P), window.addEventListener("pointerup", C), window.addEventListener("pointercancel", C), window.addEventListener("blur", M);
+    },
+    [s, v, o]
+  );
+  return p.useEffect(() => () => {
+    var z;
+    const u = d.current !== null, y = c.current;
+    s(), d.current = null, c.current = !1, u && ((z = l.current) == null || z.call(l, null, y));
+  }, [s]), { onPointerDown: x };
+}
+const Ct = (t = {}) => {
+  const { initialPosition: o = { x: 40, y: 40 }, bounds: i } = t, [a, l] = U(o), [d, c] = U(!1), r = A({ x: 0, y: 0 }), w = A(null), { onPointerDown: m } = Yt({
+    onStart: (s) => {
+      if (s.target.closest("button")) return !1;
+      s.preventDefault(), r.current = { ...a }, c(!0), document.body.style.cursor = "grabbing", document.body.style.userSelect = "none";
+    },
+    onMove: (s, v) => {
+      let x = r.current.x + v.dx, u = r.current.y + v.dy;
+      if (i && (i.left !== void 0 && (x = Math.max(i.left, x)), i.top !== void 0 && (u = Math.max(i.top, u)), w.current)) {
+        const y = w.current.getBoundingClientRect();
+        i.right !== void 0 && (x = Math.min(window.innerWidth - y.width - i.right, x)), i.bottom !== void 0 && (u = Math.min(window.innerHeight - y.height - i.bottom, u));
+      }
+      l({ x, y: u });
+    },
+    onEnd: () => {
+      c(!1), document.body.style.cursor = "", document.body.style.userSelect = "";
+    }
+  });
+  return {
+    position: a,
+    isDragging: d,
+    windowRef: w,
+    handlePointerDown: m,
+    setPosition: l
+  };
+}, _t = {
+  n: "ns-resize",
+  s: "ns-resize",
+  e: "ew-resize",
+  w: "ew-resize",
+  ne: "nesw-resize",
+  sw: "nesw-resize",
+  nw: "nwse-resize",
+  se: "nwse-resize"
+}, ot = 8, b = 14;
+function kt(t) {
+  const {
+    storageKey: o,
+    defaultWidth: i,
+    defaultHeight: a,
+    minWidth: l = 200,
+    minHeight: d = 200,
+    maxWidth: c = 9999,
+    maxHeight: r = 9999,
+    edges: w = ["e", "s", "se"],
+    persist: m = !0
+  } = t, s = (e, h) => ({
+    width: Math.max(Math.min(l, c), Math.min(c, Math.round(e))),
+    height: Math.max(Math.min(d, r), Math.min(r, Math.round(h)))
+  }), [v, x] = U(() => {
+    if (m)
+      try {
+        const e = ft.getJSON(
+          "resizable-" + o,
+          null
+        );
+        if (e && typeof e.width == "number" && typeof e.height == "number")
+          return s(e.width, e.height);
+      } catch {
+      }
+    return { width: i, height: a };
+  }), [u] = U(() => {
+    if (!m) return !1;
+    try {
+      const e = ft.getJSON(
+        "resizable-" + o,
+        null
+      );
+      return !!(e && typeof e.width == "number" && typeof e.height == "number");
+    } catch {
+      return !1;
+    }
+  }), y = et((e) => {
+    x((h) => h.width === e.width && h.height === e.height ? h : e);
+  }, []), [z, P] = U({ dx: 0, dy: 0 }), [C, M] = U(!1), D = A(v);
+  D.current = v;
+  const R = A(z);
+  R.current = z;
+  const L = A(null), F = et(
+    (e) => {
+      if (m)
+        try {
+          ft.set("resizable-" + o, e);
+        } catch {
+        }
+    },
+    [o, m]
+  );
+  W(() => {
+    x((e) => {
+      const h = s(e.width, e.height);
+      return h.width === e.width && h.height === e.height ? e : h;
+    });
+  }, [l, d, c, r]), W(() => {
+    const e = (E) => {
+      const f = L.current;
+      if (!f) return;
+      E.preventDefault();
+      const g = E.clientX - f.startX, k = E.clientY - f.startY;
+      let q = f.startWidth, V = f.startHeight, Z = 0, X = 0;
+      f.edge.includes("e") && (q = f.startWidth + g), f.edge.includes("w") && (q = f.startWidth - g, Z = g), f.edge.includes("s") && (V = f.startHeight + k), f.edge.includes("n") && (V = f.startHeight - k, X = k);
+      const I = s(q, V);
+      f.edge.includes("w") && (Z = f.startWidth - I.width), f.edge.includes("n") && (X = f.startHeight - I.height), D.current = I, R.current = { dx: Z, dy: X }, x(I), P({ dx: Z, dy: X });
+    }, h = () => {
+      L.current && (L.current = null, M(!1), F(D.current), P({ dx: 0, dy: 0 }), document.body.style.cursor = "", document.body.style.userSelect = "");
+    };
+    return document.addEventListener("pointermove", e), document.addEventListener("pointerup", h), () => {
+      document.removeEventListener("pointermove", e), document.removeEventListener("pointerup", h);
+    };
+  }, [l, d, c, r, F]);
+  const _ = et(
+    (e) => (h) => {
+      h.preventDefault(), h.stopPropagation(), L.current = {
+        edge: e,
+        startX: h.clientX,
+        startY: h.clientY,
+        startWidth: D.current.width,
+        startHeight: D.current.height
+      }, M(!0), document.body.style.cursor = _t[e], document.body.style.userSelect = "none";
+    },
+    []
+  ), ut = {
+    n: {
+      position: "absolute",
+      top: -4,
+      left: b,
+      right: b,
+      height: ot,
+      cursor: "ns-resize"
+    },
+    s: {
+      position: "absolute",
+      bottom: -4,
+      left: b,
+      right: b,
+      height: ot,
+      cursor: "ns-resize"
+    },
+    e: {
+      position: "absolute",
+      right: -4,
+      top: b,
+      bottom: b,
+      width: ot,
+      cursor: "ew-resize"
+    },
+    w: {
+      position: "absolute",
+      left: -4,
+      top: b,
+      bottom: b,
+      width: ot,
+      cursor: "ew-resize"
+    },
+    ne: {
+      position: "absolute",
+      top: -4,
+      right: -4,
+      width: b,
+      height: b,
+      cursor: "nesw-resize"
+    },
+    nw: {
+      position: "absolute",
+      top: -4,
+      left: -4,
+      width: b,
+      height: b,
+      cursor: "nwse-resize"
+    },
+    se: {
+      position: "absolute",
+      bottom: -4,
+      right: -4,
+      width: b,
+      height: b,
+      cursor: "nwse-resize"
+    },
+    sw: {
+      position: "absolute",
+      bottom: -4,
+      left: -4,
+      width: b,
+      height: b,
+      cursor: "nesw-resize"
+    }
+  }, K = Object.fromEntries(
+    w.map((e) => [e, { style: ut[e], onPointerDown: _(e) }])
+  );
+  return {
+    width: v.width,
+    height: v.height,
+    isResizing: C,
+    positionDelta: z,
+    handleProps: K,
+    setSize: y,
+    hasPersistedSize: u
+  };
+}
+const st = p.createContext(null);
+function Gt() {
+  const t = ct(st);
+  return (t == null ? void 0 : t.zIndex) ?? null;
+}
+const Pt = p.createContext(null);
+function Jt() {
+  return ct(Pt);
+}
+function qt() {
+  const t = ct(st);
+  return (t == null ? void 0 : t.registerPortal) ?? null;
+}
+function Kt(t) {
+  const o = qt();
+  W(() => {
+    const i = t.current;
+    if (!(!i || !o))
+      return o(i);
+  }, [o]);
+}
+function Vt({
+  isOpen: t,
+  onClose: o,
+  title: i,
+  icon: a,
+  backdrop: l = !1,
+  backdropCloseOnClick: d = !0,
+  backdropClassName: c,
+  storageKey: r,
+  defaultWidth: w,
+  defaultHeight: m,
+  minWidth: s = 300,
+  maxWidth: v = 1200,
+  minHeight: x = 300,
+  maxHeight: u = Math.round(typeof window < "u" ? window.innerHeight * 0.95 : 800),
+  edges: y = ["e", "s", "se"],
+  initialPosition: z,
+  dockToEdge: P,
+  closeButtonSide: C = "right",
+  zIndex: M = 999,
+  persistSize: D = !0,
+  scrollable: R = !1,
+  bodyClassName: L = "text-base-content flex flex-col gap-2 p-3 text-xs",
+  ignoreOutsideClicks: F,
+  autoSize: _ = !0,
+  headerless: ut = !1,
+  children: K
+}) {
+  const e = w ?? 320, h = m ?? 360, [E, f] = p.useState(() => ({
+    width: typeof window < "u" ? window.innerWidth : 1200,
+    height: typeof window < "u" ? window.innerHeight : 800
+  })), g = 12, k = Math.max(180, Math.min(v, E.width - g * 2)), q = Math.max(180, Math.min(u, E.height - g * 2)), V = (() => {
+    if (z) return z;
+    const n = typeof window < "u" ? window.innerWidth : 1200;
+    return P === "right" ? { x: Math.max(8, n - e - 12), y: 40 } : P === "left" ? { x: 8, y: 40 } : {
+      x: Math.round(n / 2 - e / 2),
+      y: 40
+    };
+  })(), Z = At(t), X = A(/* @__PURE__ */ new Set()), I = et((n) => n ? (X.current.add(n), () => {
+    X.current.delete(n);
+  }) : () => {
+  }, []), at = A(null), Mt = St(
+    () => ({ registerPortal: I, zIndex: M, panelRef: at }),
+    [I, M]
+  ), G = ct(st), lt = G == null ? void 0 : G.registerPortal, nt = G == null ? void 0 : G.panelRef;
+  Lt({ id: `floating-panel:${r}`, isOpen: t, onDismiss: o }), W(() => {
+    if (!t || !lt) return;
+    const n = at.current;
+    if (n)
+      return lt(n);
+  }, [t, lt]);
+  const { position: rt, isDragging: wt, windowRef: $, handlePointerDown: mt, setPosition: it } = Ct({
+    initialPosition: V,
+    bounds: {
+      top: g,
+      right: g,
+      bottom: g,
+      left: g
+    }
+  });
+  W(() => {
+    if (!t) return;
+    let n = !1;
+    const Q = requestAnimationFrame(() => {
+      n = !0;
+    }), J = (O) => {
+      if (!n) return;
+      const N = O.target;
+      if (!N) return;
+      const xt = $.current;
+      if (xt && xt.contains(N)) return;
+      for (const tt of X.current)
+        if (tt.contains(N)) return;
+      const vt = nt == null ? void 0 : nt.current;
+      if (!(vt && vt.contains(N))) {
+        if (F)
+          for (const tt of F) {
+            const yt = tt == null ? void 0 : tt.current;
+            if (yt && yt.contains(N)) return;
+          }
+        N.closest("[data-headlessui-portal], [data-rtt-tooltip]") || o();
+      }
+    };
+    return document.addEventListener("pointerdown", J, !0), () => {
+      cancelAnimationFrame(Q), document.removeEventListener("pointerdown", J, !0);
+    };
+  }, [t, o, $, F, nt]);
+  const Y = kt({
+    storageKey: r,
+    defaultWidth: e,
+    defaultHeight: h,
+    minWidth: s,
+    maxWidth: k,
+    minHeight: x,
+    maxHeight: q,
+    edges: y,
+    persist: D
+  }), [dt, Et] = U(Y.hasPersistedSize);
+  W(() => {
+    Y.isResizing && !dt && Et(!0);
+  }, [Y.isResizing, dt]);
+  const j = _ && !dt;
+  W(() => {
+    if (!t || !j) return;
+    const n = $.current;
+    if (!n || typeof ResizeObserver > "u") return;
+    const Q = new ResizeObserver((J) => {
+      var N;
+      const O = (N = J[0]) == null ? void 0 : N.contentRect;
+      O && Y.setSize({ width: O.width, height: O.height });
+    });
+    return Q.observe(n), () => Q.disconnect();
+  }, [t, j, Y.setSize, $]);
+  const T = j ? void 0 : Y.width, ht = j ? void 0 : Y.height, gt = Y.handleProps;
+  if (zt(() => {
+    if (!t || !P) return;
+    const n = typeof window < "u" ? window.innerWidth : 1200, J = P === "right" ? Math.max(8, n - (T ?? e) - 12) : 8;
+    it({ x: J, y: 40 });
+  }, [t, P, it, T, e, E.width]), zt(() => {
+    !t || P || j || it((n) => ({
+      x: Math.max(
+        g,
+        Math.min(n.x, Math.max(g, E.width - (T ?? 0) - g))
+      ),
+      y: Math.max(
+        g,
+        Math.min(n.y, Math.max(g, E.height - (ht ?? 0) - g))
+      )
+    }));
+  }, [
+    j,
+    P,
+    ht,
+    t,
+    it,
+    E.height,
+    E.width,
+    T
+  ]), W(() => {
+    if (!t) return;
+    const n = () => {
+      f({ width: window.innerWidth, height: window.innerHeight });
+    };
+    return window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
+  }, [t]), !t) return null;
+  const bt = /* @__PURE__ */ H(
+    "button",
+    {
+      onClick: o,
+      className: "text-accent-content hover:bg-accent-content/10 rounded p-0.5 transition-colors",
+      children: /* @__PURE__ */ H(Nt, { className: "size-3.5" })
+    }
+  ), pt = /* @__PURE__ */ B("div", { className: "flex items-center gap-1.5", children: [
+    a,
+    /* @__PURE__ */ H("span", { className: "text-xs font-semibold", children: i })
+  ] });
+  return Dt.createPortal(
+    /* @__PURE__ */ B(st.Provider, { value: Mt, children: [
+      l && /* @__PURE__ */ H(
+        "div",
+        {
+          className: Ht("pagehub-sdk-root ph-modal-backdrop", c),
+          style: { zIndex: M - 1 },
+          onClick: d ? o : void 0,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ B(
+        "div",
+        {
+          ref: (n) => {
+            $.current = n, Z.current = n, at.current = n;
+          },
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": i,
+          className: "pagehub-sdk-root ph-modal-surface pointer-events-auto fixed overflow-hidden",
+          style: j ? {
+            top: rt.y,
+            left: rt.x,
+            minWidth: s,
+            maxWidth: k,
+            minHeight: x,
+            maxHeight: q,
+            zIndex: M
+          } : {
+            top: rt.y,
+            left: rt.x,
+            width: T,
+            height: ht,
+            minWidth: s,
+            maxWidth: k,
+            minHeight: x,
+            maxHeight: q,
+            zIndex: M
+          },
+          children: [
+            y.map((n) => gt[n] ? /* @__PURE__ */ H("div", { ...gt[n] }, n) : null),
+            /* @__PURE__ */ H(
+              Pt.Provider,
+              {
+                value: { onPointerDown: mt, isDragging: wt, onClose: o },
+                children: /* @__PURE__ */ B("div", { className: _ ? "flex max-h-full flex-col" : "flex h-full flex-col", children: [
+                  !ut && /* @__PURE__ */ H(
+                    "div",
+                    {
+                      role: "presentation",
+                      "aria-hidden": "true",
+                      onPointerDown: mt,
+                      className: `text-base-content flex touch-none items-center justify-between px-3 py-1.5 ${wt ? "cursor-grabbing" : "cursor-grab"}`,
+                      children: C === "left" ? /* @__PURE__ */ B(Rt, { children: [
+                        /* @__PURE__ */ B("div", { className: "flex min-w-0 items-center gap-2", children: [
+                          bt,
+                          pt
+                        ] }),
+                        /* @__PURE__ */ H("span", { className: "size-5", "aria-hidden": "true" })
+                      ] }) : /* @__PURE__ */ B(Rt, { children: [
+                        pt,
+                        bt
+                      ] })
+                    }
+                  ),
+                  R ? /* @__PURE__ */ H(Ft, { className: "flex-1", children: L == null ? K : /* @__PURE__ */ H("div", { className: L, children: K }) }) : K
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    document.querySelector(".pagehub-sdk-root") || document.body
+  );
+}
+export {
+  Vt as F,
+  qt as a,
+  At as b,
+  Zt as c,
+  Yt as d,
+  Jt as e,
+  Kt as f,
+  Gt as u
+};

package/dist/chunks/FontFamilyInput-CVNnVylt.js

@@ -0,0 +1,111 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useEditor as k, useNode as B } from "@craftjs/core";
+import { useRef as G } from "react";
+import { d as R, u as A, V as W, E as j, g as q, dZ as L, C as M, d_ as y, aw as Z, d$ as _, e0 as z, e1 as H, c as J, e2 as O, e as Q } from "./index-C66dAl3Q.js";
+import { F as T } from "./dialogAtoms-CeQ2G05l.js";
+function U(s, c) {
+  if (!s) return "";
+  const n = _(s);
+  if (/^font-\(--/.test(n)) {
+    const a = z(n, c);
+    if (a && typeof a == "string" && !a.includes("var("))
+      return a.split(",")[0].trim().replace(/^['"]|['"]$/g, "");
+  }
+  return H(n) || s;
+}
+const X = ({
+  propKey: s,
+  label: c = "",
+  prefix: n = "",
+  index: u = null,
+  propItemKey: a = "",
+  propType: o = "class",
+  inline: Y = !0,
+  inputWidth: K = "",
+  labelWidth: P = ""
+}) => {
+  const [D, d] = R(T), { actions: p, query: g } = k(), F = A(W), v = A(j).dark ?? !1, {
+    actions: { setProp: x },
+    nodeProps: S,
+    id: E
+  } = B((t) => {
+    var e;
+    return {
+      nodeProps: ((e = t.data) == null ? void 0 : e.props) || {},
+      id: t.id
+    };
+  }), I = { propKey: s, propType: o, index: u, propItemKey: a }, { value: N } = q(I, F, S, v), l = N || "", m = l ? U(l, g) : "", C = o === "class" ? Q(F) : void 0, f = (t, e = 0) => {
+    J(
+      {
+        propType: o,
+        propKey: s,
+        value: t,
+        setProp: x,
+        index: u,
+        propItemKey: a,
+        query: g,
+        actions: p,
+        nodeId: E,
+        ...o === "class" && C != null ? { view: C, classDark: v } : {}
+      },
+      e
+    );
+  }, V = (t, e = 0) => {
+    if (typeof t == "string") {
+      f(t, e);
+      return;
+    }
+    const w = Array.isArray(t) ? t[0] : t, $ = w ? O(String(w)) : "";
+    f($, e);
+  }, b = (t) => V(t, 2e3), h = (t) => V(t, 0), r = G(null);
+  return L(D, d, r, s), /* @__PURE__ */ i("div", { ref: r, children: /* @__PURE__ */ i(
+    M,
+    {
+      label: c,
+      propType: o,
+      propKey: s,
+      labelWidth: P,
+      onLabelClick: () => {
+        d({
+          enabled: !0,
+          value: [],
+          originalValue: l || "",
+          prefix: n,
+          propKey: s,
+          changed: b,
+          preview: h,
+          e: y(r.current)
+        });
+      },
+      trailing: l ? /* @__PURE__ */ i(Z, { onClick: () => f("", 2e3), tooltip: "Clear font family" }) : null,
+      children: /* @__PURE__ */ i(
+        "button",
+        {
+          type: "button",
+          title: m,
+          id: s ? `input-${s}` : void 0,
+          onClick: () => {
+            d({
+              enabled: !0,
+              value: [],
+              originalValue: l || "",
+              prefix: n,
+              propKey: s,
+              changed: b,
+              preview: h,
+              e: y(r.current)
+            });
+          },
+          style: {
+            fontFamily: m || void 0
+          },
+          className: "input-plain flex min-w-0 flex-1 items-center truncate text-left",
+          children: m || "Default"
+        }
+      )
+    }
+  ) });
+}, ot = () => /* @__PURE__ */ i(X, { propKey: "fontFamily", label: "Font Family" });
+export {
+  ot as FontFamilyInput
+};