@pagehub/sdk 0.1.4 → 0.1.6

package/dist/chunks/ContainerOverflowSectionPanel-ibKXf-1N.js

@@ -0,0 +1,120 @@
+import { jsxs as o, jsx as e, Fragment as n } from "react/jsx-runtime";
+import { F as m } from "./FloatingPanel-DJP5Vhua.js";
+import { useNode as u } from "@craftjs/core";
+import { n as l, W as g } from "./index-C66dAl3Q.js";
+function y() {
+  const { craftName: t, scrollEffect: r, dragScroll: i, autoHide: s } = u((a) => {
+    var d, h, f;
+    const c = ((d = a.data) == null ? void 0 : d.props) || {}, p = c.overflow || {};
+    return {
+      craftName: ((h = a.data) == null ? void 0 : h.name) || ((f = a.data) == null ? void 0 : f.displayName),
+      scrollEffect: c.scrollEffect,
+      dragScroll: p.dragScroll,
+      autoHide: p.autoHide
+    };
+  });
+  return t !== "Container" ? null : r === "horizontal-scroll" ? /* @__PURE__ */ o("p", { className: "text-neutral-content text-xs leading-relaxed", children: [
+    "CSS overflow options are disabled while",
+    " ",
+    /* @__PURE__ */ e("span", { className: "text-base-content font-medium", children: "Scroll Effect → Horizontal Scroll" }),
+    " ",
+    "(GSAP) is on. Use one or the other."
+  ] }) : /* @__PURE__ */ o(n, { children: [
+    /* @__PURE__ */ e(
+      l,
+      {
+        propKey: "overflow.dragScroll",
+        propType: "component",
+        type: "toggle",
+        label: "Drag to scroll (published)",
+        labelWidth: "w-56",
+        on: !0
+      }
+    ),
+    /* @__PURE__ */ e(
+      l,
+      {
+        propKey: "overflow.autoHide",
+        propType: "component",
+        type: "toggle",
+        label: "Auto-hide scrollbar",
+        labelWidth: "w-56",
+        on: !0
+      }
+    ),
+    (i || s) && /* @__PURE__ */ o(n, { children: [
+      i && /* @__PURE__ */ o(n, { children: [
+        /* @__PURE__ */ o(
+          l,
+          {
+            propKey: "overflow.smoothing",
+            propType: "component",
+            type: "select",
+            label: "Drag feel",
+            labelWidth: "w-56",
+            valueCoalesce: 0,
+            children: [
+              /* @__PURE__ */ e("option", { value: "0", children: "Direct (1:1 with pointer)" }),
+              /* @__PURE__ */ e("option", { value: "0.12", children: "Light ease" }),
+              /* @__PURE__ */ e("option", { value: "0.2", children: "Fluid" }),
+              /* @__PURE__ */ e("option", { value: "0.28", children: "Very fluid" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          l,
+          {
+            propKey: "overflow.wheelHorizontal",
+            propType: "component",
+            type: "toggle",
+            label: "Vertical wheel scrolls horizontally",
+            labelWidth: "w-56",
+            on: !0
+          }
+        )
+      ] }),
+      s && /* @__PURE__ */ e(
+        l,
+        {
+          propKey: "overflow.hideDelay",
+          propType: "component",
+          type: "number",
+          label: "Scrollbar hide delay (ms)",
+          labelWidth: "w-56",
+          valueCoalesce: 1e3
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o("p", { className: "text-neutral-content text-xs leading-relaxed", children: [
+      /* @__PURE__ */ e("span", { className: "text-base-content font-medium", children: "overflow-x-auto" }),
+      " is added automatically unless you set another",
+      " ",
+      /* @__PURE__ */ e("span", { className: "text-base-content font-medium", children: "overflow-x-*" }),
+      " in Classes. Use a horizontal row (e.g. flex) for your strip. Drag scroll runs on the live site only, not while editing the canvas. If motion feels like it snaps to cards, remove",
+      " ",
+      /* @__PURE__ */ e("span", { className: "text-base-content font-medium", children: "scroll-snap-*" }),
+      " from Classes on this container or its children."
+    ] })
+  ] });
+}
+function N({ initialPosition: t, onClose: r }) {
+  return /* @__PURE__ */ e(
+    m,
+    {
+      isOpen: !0,
+      onClose: r,
+      title: "Scroll Behavior",
+      storageKey: "container-overflow",
+      minWidth: 300,
+      maxWidth: 520,
+      minHeight: 320,
+      initialPosition: t,
+      zIndex: g,
+      scrollable: !0,
+      children: /* @__PURE__ */ e(y, {})
+    }
+  );
+}
+export {
+  N as default
+};

package/dist/chunks/ContainerOverflowSectionPopover-CRQ9EPsn.js

@@ -0,0 +1,24 @@
+import { jsxs as u, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { useNode as f } from "@craftjs/core";
+import { useState as P, Suspense as d, lazy as v } from "react";
+import { u as O } from "./usePopoverAutoOpen-CxIjt0ez.js";
+import { u as I } from "./usePopoverPosition-83Vti7Aw.js";
+const S = v(() => import("./ContainerOverflowSectionPanel-ibKXf-1N.js")), g = 360;
+function j({ def: o }) {
+  const [t, n] = P(!1), { triggerRef: i, initialPos: s, setInitialPos: r, computePosition: a } = I(g), { id: l } = f((c) => ({ id: c.id })), p = () => {
+    r(a()), n(!0);
+  };
+  return O({ nodeId: l, defId: o == null ? void 0 : o.id, onOpen: p }), /* @__PURE__ */ u(m, { children: [
+    /* @__PURE__ */ e("span", { ref: i, "aria-hidden": !0, className: "block size-0" }),
+    t && /* @__PURE__ */ e(d, { fallback: null, children: /* @__PURE__ */ e(
+      S,
+      {
+        initialPosition: s,
+        onClose: () => n(!1)
+      }
+    ) })
+  ] });
+}
+export {
+  j as default
+};

package/dist/chunks/ContainerPaddingOverlay-Cd3xOv-S.js

@@ -0,0 +1,340 @@
+import { jsx as D } from "react/jsx-runtime";
+import { useNode as E, useEditor as it } from "@craftjs/core";
+import { O as rt, y as _, t as P, u as H, V as dt, E as at, e as ct } from "./index-C66dAl3Q.js";
+import { useState as N, useRef as F, useEffect as I, useCallback as lt } from "react";
+import ut from "react-dom";
+let pt = !1;
+const q = /* @__PURE__ */ new Set();
+function ft() {
+  return pt;
+}
+function mt(t) {
+  return q.add(t), () => {
+    q.delete(t);
+  };
+}
+const W = {
+  0: "0",
+  1: "px",
+  2: "0.5",
+  4: "1",
+  6: "1.5",
+  8: "2",
+  10: "2.5",
+  12: "3",
+  14: "3.5",
+  16: "4",
+  20: "5",
+  24: "6",
+  28: "7",
+  32: "8",
+  36: "9",
+  40: "10",
+  44: "11",
+  48: "12",
+  56: "14",
+  64: "16",
+  80: "20",
+  96: "24",
+  112: "28",
+  128: "32",
+  144: "36",
+  160: "40",
+  176: "44",
+  192: "48",
+  208: "52",
+  224: "56",
+  240: "60",
+  256: "64",
+  288: "72",
+  320: "80",
+  384: "96"
+}, ht = Object.keys(W).map(Number);
+function Y(t) {
+  const s = Math.max(0, t);
+  if (s > 404) return s;
+  let i = 0, n = s;
+  for (const c of ht) {
+    const r = Math.abs(s - c);
+    r < n && (n = r, i = c);
+  }
+  return i;
+}
+function gt(t, s) {
+  const i = W[s], n = `p${t[0]}`;
+  return i != null ? `${n}-${i}` : `${n}-[${s}px]`;
+}
+const K = [
+  { cls: "w-1/4", ratio: 0.25 },
+  { cls: "w-1/3", ratio: 1 / 3 },
+  { cls: "w-1/2", ratio: 0.5 },
+  { cls: "w-2/3", ratio: 2 / 3 },
+  { cls: "w-3/4", ratio: 0.75 },
+  { cls: "w-full", ratio: 1 }
+];
+function J(t, s) {
+  if (s <= 0) return { cls: `w-[${Math.round(t)}px]`, px: t };
+  const i = t / s;
+  let n = K[0], c = Math.abs(i - n.ratio);
+  for (const r of K) {
+    const h = Math.abs(i - r.ratio);
+    h < c && (c = h, n = r);
+  }
+  return { cls: n.cls, px: Math.round(n.ratio * s) };
+}
+function Q(t) {
+  const s = Y(t), i = W[s];
+  return i != null ? { cls: `h-${i}`, px: s } : { cls: `h-[${Math.round(t)}px]`, px: Math.round(t) };
+}
+const x = 8;
+function bt(t, s, i) {
+  const n = t.getBoundingClientRect(), c = window.getComputedStyle(t), r = parseFloat(c.paddingTop) || 0, h = parseFloat(c.paddingRight) || 0, e = parseFloat(c.paddingBottom) || 0, v = parseFloat(c.paddingLeft) || 0;
+  if (i > n.bottom && i <= n.bottom + x && s >= n.left && s <= n.right)
+    return { side: "bottom", mode: "resize" };
+  if (s > n.right && s <= n.right + x && i >= n.top && i <= n.bottom)
+    return { side: "right", mode: "resize" };
+  if (s >= n.left && s <= n.right && i >= n.top && i <= n.bottom) {
+    const $ = i - n.top, R = n.bottom - i, w = s - n.left, C = n.right - s, f = 12, M = document.getElementById("viewport");
+    if (M == null || M.getBoundingClientRect().left, $ < f && r > 0) return { side: "top", mode: "padding" };
+    if (R < f && e > 0) return { side: "bottom", mode: "padding" };
+    if (w < f && v > 0) return { side: "left", mode: "padding" };
+    if (C < f && h > 0) return { side: "right", mode: "padding" };
+    if ($ < f && r === 0) return { side: "top", mode: "padding" };
+    if (R < f && e === 0) return { side: "bottom", mode: "padding" };
+    if (w < f && v === 0) return { side: "left", mode: "padding" };
+    if (C < f && h === 0) return { side: "right", mode: "padding" };
+  }
+  return null;
+}
+function yt({
+  targetElement: t,
+  isActive: s,
+  setProp: i,
+  classPrefixView: n,
+  classDark: c
+}) {
+  const [r, h] = N(null), [e, v] = N(null), [$, R] = N(null), [w, C] = N(null), f = F(null), M = F(e);
+  M.current = e, f.current = $;
+  const T = F(null), B = F(null), [Z, X] = N(ft());
+  I(() => mt(X), []), I(() => {
+    if (!t || !s || e || Z) return;
+    const o = (l) => {
+      const d = bt(t, l.clientX, l.clientY), a = d ? `${d.side}:${d.mode}` : null;
+      if (a !== B.current) {
+        if (B.current = a, T.current && clearTimeout(T.current), !d) {
+          h(null);
+          return;
+        }
+        T.current = setTimeout(() => h(d), 400);
+      }
+    };
+    return document.addEventListener("mousemove", o), () => {
+      document.removeEventListener("mousemove", o), T.current && clearTimeout(T.current), B.current = null;
+    };
+  }, [t, s, e, Z]);
+  const L = lt(() => {
+    if (!t) return null;
+    const o = t.getBoundingClientRect(), l = window.getComputedStyle(t), d = M.current || r;
+    if (!d) return null;
+    const a = parseFloat(l.paddingTop) || 0, g = parseFloat(l.paddingRight) || 0, m = parseFloat(l.paddingBottom) || 0, p = parseFloat(l.paddingLeft) || 0;
+    if (d.mode === "padding")
+      switch (d.side) {
+        case "top":
+          return { x: o.left, y: o.top, w: o.width, h: Math.max(a, 6) };
+        case "bottom":
+          return {
+            x: o.left,
+            y: o.bottom - Math.max(m, 6),
+            w: o.width,
+            h: Math.max(m, 6)
+          };
+        case "left":
+          return { x: o.left, y: o.top, w: Math.max(p, 6), h: o.height };
+        case "right":
+          return {
+            x: o.right - Math.max(g, 6),
+            y: o.top,
+            w: Math.max(g, 6),
+            h: o.height
+          };
+      }
+    else
+      switch (d.side) {
+        case "top":
+          return { x: o.left, y: o.top - x, w: o.width, h: x };
+        case "bottom":
+          return { x: o.left, y: o.bottom, w: o.width, h: x };
+        case "left":
+          return { x: o.left - x, y: o.top, w: x, h: o.height };
+        case "right":
+          return { x: o.right, y: o.top, w: x, h: o.height };
+      }
+  }, [t, r]);
+  I(() => {
+    if (!t || !s) {
+      C(null);
+      return;
+    }
+    const o = () => {
+      M.current || C(L());
+    };
+    o();
+    const l = setInterval(o, 200);
+    return () => clearInterval(l);
+  }, [t, s, L]), I(() => {
+    if (!e || !t) return;
+    const o = e.side === "top" || e.side === "bottom", l = (a) => {
+      var p;
+      const m = (o ? a.clientY : a.clientX) - e.startPos;
+      if (e.mode === "padding") {
+        const b = e.side === "bottom" || e.side === "right" ? -1 : 1, u = Y(e.initial + m * b);
+        R(u);
+        const y = `padding${e.side.charAt(0).toUpperCase() + e.side.slice(1)}`;
+        t.style[y] = `${u}px`;
+      } else {
+        const b = e.side === "left" || e.side === "top" ? -1 : 1, u = Math.max(0, e.initial + m * b);
+        if (o) {
+          const y = Q(u);
+          R(y.px), t.style.height = `${y.px}px`;
+        } else {
+          const y = e.parentSize || ((p = t.parentElement) == null ? void 0 : p.offsetWidth) || 0, j = J(u, y);
+          R(j.px), t.style.width = `${j.px}px`;
+        }
+      }
+      C(L());
+    }, d = () => {
+      var g;
+      const a = f.current;
+      if (e.mode === "padding") {
+        const m = `padding${e.side.charAt(0).toUpperCase() + e.side.slice(1)}`;
+        if (t.style[m] = "", a != null) {
+          const p = gt(e.side, a), b = _(n, c);
+          i((u) => {
+            u.className = P(u.className || "", b + p);
+          });
+        }
+      } else if (e.side === "top" || e.side === "bottom") {
+        if (t.style.height = "", a != null) {
+          const p = Q(a), b = _(n, c);
+          i((u) => {
+            u.className = P(u.className || "", b + p.cls);
+          });
+        }
+      } else if (t.style.width = "", a != null) {
+        const p = e.parentSize || ((g = t.parentElement) == null ? void 0 : g.offsetWidth) || 0, b = J(a, p), u = _(n, c);
+        i((y) => {
+          y.className = P(y.className || "", u + b.cls);
+        });
+      }
+      v(null), R(null), document.body.style.cursor = "", requestAnimationFrame(() => C(L()));
+    };
+    return document.addEventListener("mousemove", l), document.addEventListener("mouseup", d), () => {
+      document.removeEventListener("mousemove", l), document.removeEventListener("mouseup", d);
+    };
+  }, [e, t, i, n, c, L]);
+  const S = typeof document < "u" ? document.getElementById("viewport") : null;
+  if (!S || !(e || r) || !w) return null;
+  const k = S.getBoundingClientRect(), V = parseFloat(getComputedStyle(S.parentElement || S).zoom) || 1, tt = -k.left, et = -k.top, ot = (e == null ? void 0 : e.mode) || (r == null ? void 0 : r.mode), G = (e == null ? void 0 : e.side) || (r == null ? void 0 : r.side), z = G === "top" || G === "bottom", U = z ? "ns-resize" : "ew-resize", O = ot === "padding", nt = O ? e ? "rgba(147, 196, 125, 0.5)" : "rgba(147, 196, 125, 0.3)" : e ? "rgba(59, 130, 246, 0.4)" : "rgba(59, 130, 246, 0.2)", st = O ? "#15803d" : "#1d4ed8";
+  let A = "";
+  if (e && $ != null)
+    A = `${Math.round($)}px`;
+  else if (r && t) {
+    const o = window.getComputedStyle(t);
+    if (O) {
+      const l = {
+        top: o.paddingTop,
+        bottom: o.paddingBottom,
+        left: o.paddingLeft,
+        right: o.paddingRight
+      };
+      A = `${Math.round(parseFloat(l[r.side]) || 0)}px`;
+    } else
+      A = z ? `${Math.round(t.offsetHeight)}px` : `${Math.round(t.offsetWidth)}px`;
+  }
+  return ut.createPortal(
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ D(
+      "div",
+      {
+        "data-node-control": "true",
+        onMouseDown: (o) => {
+          var m;
+          if (!t || !r) return;
+          o.preventDefault(), o.stopPropagation();
+          const l = t.getBoundingClientRect(), d = window.getComputedStyle(t);
+          let a, g;
+          if (r.mode === "padding") {
+            const p = {
+              top: d.paddingTop,
+              bottom: d.paddingBottom,
+              left: d.paddingLeft,
+              right: d.paddingRight
+            };
+            a = parseFloat(p[r.side]) || 0;
+          } else
+            a = z ? l.height : l.width, z || (g = ((m = t.parentElement) == null ? void 0 : m.offsetWidth) || 0);
+          v({
+            side: r.side,
+            mode: r.mode,
+            startPos: z ? o.clientY : o.clientX,
+            initial: a,
+            parentSize: g
+          }), document.body.style.cursor = U;
+        },
+        style: {
+          position: "absolute",
+          left: (w.x + tt) / V + S.scrollLeft,
+          top: (w.y + et) / V + S.scrollTop,
+          width: w.w / V,
+          height: w.h / V,
+          backgroundColor: nt,
+          cursor: U,
+          zIndex: rt,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          transition: e ? "none" : "all 0.15s ease"
+        },
+        children: /* @__PURE__ */ D(
+          "span",
+          {
+            style: {
+              fontSize: 11,
+              fontWeight: 600,
+              color: st,
+              backgroundColor: "rgba(255, 255, 255, 0.9)",
+              padding: "1px 5px",
+              borderRadius: 3,
+              fontFamily: "system-ui, -apple-system, sans-serif",
+              pointerEvents: "none",
+              userSelect: "none",
+              whiteSpace: "nowrap"
+            },
+            children: A
+          }
+        )
+      }
+    ),
+    S
+  );
+}
+function St() {
+  const { id: t, dom: s } = E((e) => ({ dom: e.dom })), { isSelected: i } = it((e, v) => ({
+    isSelected: v.getEvent("selected").contains(t)
+  })), {
+    actions: { setProp: n }
+  } = E(), c = H(dt), r = H(at).dark ?? !1, h = ct(c);
+  return !s || !i ? null : /* @__PURE__ */ D(
+    yt,
+    {
+      targetElement: s,
+      isActive: i,
+      setProp: n,
+      classPrefixView: h,
+      classDark: r
+    }
+  );
+}
+export {
+  St as ContainerPaddingOverlay
+};

package/dist/chunks/ContainerScrollEffectSection-Dbztqdnr.js

@@ -0,0 +1,123 @@
+import { jsx as e, Fragment as r, jsxs as o } from "react/jsx-runtime";
+import { useNode as m, useEditor as y } from "@craftjs/core";
+import { T as S } from "./ToolbarDashedButton-DbUxGmDg.js";
+import { n as t } from "./index-C66dAl3Q.js";
+function C() {
+  const { id: i, craftName: f, containerType: a, scrollEffect: c } = m((l) => {
+    var h;
+    const n = ((h = l.data) == null ? void 0 : h.props) || {}, d = l.data;
+    return {
+      id: l.id,
+      craftName: d.name || d.displayName,
+      containerType: n.type,
+      scrollEffect: n.scrollEffect
+    };
+  }), { actions: s } = y();
+  if (f !== "Container") return null;
+  const p = a === "section", u = !p && !["header", "footer", "page", "component"].includes(a);
+  return /* @__PURE__ */ e(r, { children: p ? /* @__PURE__ */ o(r, { children: [
+    /* @__PURE__ */ o(
+      t,
+      {
+        propKey: "scrollEffect",
+        propType: "component",
+        type: "select",
+        label: "Effect",
+        onChange: (l) => {
+          l === "horizontal-scroll" && s.setProp(i, (n) => {
+            (n.scrollDirection == null || n.scrollDirection === "") && (n.scrollDirection = "ltr"), n.scrollSpeed == null && (n.scrollSpeed = 1.5);
+          });
+        },
+        children: [
+          /* @__PURE__ */ e("option", { value: "", children: "None" }),
+          /* @__PURE__ */ e("option", { value: "horizontal-scroll", children: "Horizontal Scroll" }),
+          /* @__PURE__ */ e("option", { value: "scroll-timeline", children: "Scroll Timeline" })
+        ]
+      }
+    ),
+    c === "horizontal-scroll" && /* @__PURE__ */ o(r, { children: [
+      /* @__PURE__ */ o(
+        t,
+        {
+          propKey: "scrollDirection",
+          propType: "component",
+          type: "select",
+          label: "Direction",
+          valueCoalesce: "ltr",
+          children: [
+            /* @__PURE__ */ e("option", { value: "ltr", children: "Left to Right" }),
+            /* @__PURE__ */ e("option", { value: "rtl", children: "Right to Left" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(
+        t,
+        {
+          propKey: "scrollSnap",
+          propType: "component",
+          type: "toggle",
+          label: "Snap to panels",
+          on: !0
+        }
+      ),
+      /* @__PURE__ */ o(
+        t,
+        {
+          propKey: "scrollSpeed",
+          propType: "component",
+          type: "select",
+          label: "Speed",
+          valueCoalesce: 1.5,
+          children: [
+            /* @__PURE__ */ e("option", { value: "1", children: "Fast" }),
+            /* @__PURE__ */ e("option", { value: "1.5", children: "Normal" }),
+            /* @__PURE__ */ e("option", { value: "2", children: "Slow" }),
+            /* @__PURE__ */ e("option", { value: "3", children: "Very Slow" })
+          ]
+        }
+      )
+    ] }),
+    c === "scroll-timeline" && /* @__PURE__ */ o(
+      t,
+      {
+        propKey: "scrollTimelineRunway",
+        propType: "component",
+        type: "select",
+        label: "Runway",
+        children: [
+          /* @__PURE__ */ e("option", { value: "2", children: "Short" }),
+          /* @__PURE__ */ e("option", { value: "3", children: "Normal" }),
+          /* @__PURE__ */ e("option", { value: "5", children: "Long" }),
+          /* @__PURE__ */ e("option", { value: "8", children: "Epic" })
+        ]
+      }
+    ),
+    c && /* @__PURE__ */ o(t, { propKey: "scrollSmoothing", propType: "component", type: "select", label: "Smoothing", children: [
+      /* @__PURE__ */ e("option", { value: "0", children: "None (instant)" }),
+      /* @__PURE__ */ e("option", { value: "0.5", children: "Light" }),
+      /* @__PURE__ */ e("option", { value: "0.8", children: "Normal" }),
+      /* @__PURE__ */ e("option", { value: "1.5", children: "Heavy" })
+    ] })
+  ] }) : /* @__PURE__ */ e(r, { children: u ? /* @__PURE__ */ o(r, { children: [
+    /* @__PURE__ */ o("p", { className: "text-neutral-content text-xs leading-relaxed", children: [
+      "Scroll effects only run when this container is a",
+      " ",
+      /* @__PURE__ */ e("span", { className: "text-base-content font-medium", children: "section" }),
+      ". Use the button, or set this container's type to Section in component settings."
+    ] }),
+    /* @__PURE__ */ e(
+      S,
+      {
+        className: "mt-2",
+        icon: null,
+        onClick: () => s.setProp(i, (l) => {
+          l.type = "section";
+        }),
+        children: "Use section type"
+      }
+    )
+  ] }) : /* @__PURE__ */ e("p", { className: "text-neutral-content text-xs leading-relaxed", children: "Scroll effects are not available for this container role (e.g. header, footer, or page). Use a section block inside this area if you need scroll effects." }) }) });
+}
+export {
+  C as ContainerScrollEffectSection
+};