@pagehub/sdk 0.1.4 → 0.1.6

package/dist/chunks/HandlerEditorPanel-DiOXobsl.js

@@ -0,0 +1,93 @@
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { W as p, aO as u, bY as x } from "./index-C66dAl3Q.js";
+import { F as g } from "./FloatingPanel-DJP5Vhua.js";
+import { C as f } from "./CodeEditor-axBXmPH8.js";
+import { b, H as N } from "./HandlersAddPicker-DWTgjKgo.js";
+function O({
+  event: a,
+  code: r,
+  preventDefault: l,
+  takenEvents: o,
+  onChange: i,
+  onRemove: c,
+  initialPosition: d,
+  onClose: s
+}) {
+  const h = new Set(o), m = b.filter(
+    (e) => e.value === a || !h.has(e.value)
+  );
+  return /* @__PURE__ */ t(
+    g,
+    {
+      isOpen: !0,
+      onClose: s,
+      title: `Handler: ${N[a] ?? a}`,
+      storageKey: "handler-input",
+      minWidth: 320,
+      maxWidth: 560,
+      minHeight: 260,
+      initialPosition: d,
+      zIndex: p,
+      scrollable: !0,
+      children: /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ n("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ t("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ t(
+            u,
+            {
+              value: a,
+              onChange: (e) => i({ event: e, code: r, preventDefault: l }),
+              propKey: "handlerEvent",
+              children: m.map((e) => /* @__PURE__ */ t("option", { value: e.value, children: e.label }, e.value))
+            }
+          ) }),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                c(), s();
+              },
+              className: "text-neutral-content hover:bg-error hover:text-error-content flex shrink-0 items-center justify-center rounded p-1 text-xs transition-colors",
+              "aria-label": "Remove handler",
+              children: /* @__PURE__ */ t(x, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ n("p", { className: "text-neutral-content text-[10px] leading-snug", children: [
+          "Runs after the action. ",
+          /* @__PURE__ */ t("code", { className: "text-[9px]", children: "event" }),
+          " is in scope."
+        ] }),
+        /* @__PURE__ */ n("label", { className: "text-neutral-content flex items-center gap-1.5 text-[10px] leading-snug", children: [
+          /* @__PURE__ */ t(
+            "input",
+            {
+              type: "checkbox",
+              checked: l,
+              onChange: (e) => i({ event: a, code: r, preventDefault: e.target.checked }),
+              className: "size-3"
+            }
+          ),
+          /* @__PURE__ */ t("span", { children: "Prevent default — skips form submit / link navigation / etc. before this handler runs." })
+        ] }),
+        /* @__PURE__ */ t(
+          f,
+          {
+            value: r,
+            onChange: (e) => i({ event: a, code: e, preventDefault: l }),
+            language: "javascript",
+            minHeight: "120px",
+            maxHeight: "320px",
+            height: "160px",
+            lineNumbers: !1,
+            toolbarDenseCode: !0,
+            placeholder: "event.stopPropagation();"
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  O as default
+};

package/dist/chunks/HandlersAddPicker-DWTgjKgo.js

@@ -0,0 +1,101 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useNode as T } from "@craftjs/core";
+import { useRef as g } from "react";
+import { aq as a, eZ as C, fb as p, ar as b, fc as d, aY as v, Q as k, e9 as A, d as y, G as _ } from "./index-C66dAl3Q.js";
+import { S as N } from "./SearchableMenuPopover-DZKVXiEl.js";
+import { g as L } from "./propertyRegistry-CMhVNOgl.js";
+import { P as R, u as w, r as H } from "./popoverOpenRequestAtom-hBS_siXv.js";
+const m = [
+  { value: "onClick", label: "On Click" },
+  { value: "onDoubleClick", label: "On Double Click" },
+  { value: "onMouseEnter", label: "On Mouse Enter" },
+  { value: "onMouseLeave", label: "On Mouse Leave" },
+  { value: "onMouseDown", label: "On Mouse Down" },
+  { value: "onMouseUp", label: "On Mouse Up" },
+  { value: "onFocus", label: "On Focus" },
+  { value: "onBlur", label: "On Blur" },
+  { value: "onKeyDown", label: "On Key Down" },
+  { value: "onKeyUp", label: "On Key Up" },
+  { value: "onSubmit", label: "On Submit" },
+  { value: "onChange", label: "On Change" },
+  { value: "onInput", label: "On Input" }
+], Y = Object.fromEntries(
+  m.map((o) => [o.value, o.label])
+), q = {
+  onClick: v,
+  onDoubleClick: v,
+  onMouseEnter: d,
+  onMouseLeave: d,
+  onMouseDown: b,
+  onMouseUp: b,
+  onFocus: a,
+  onBlur: a,
+  onKeyDown: p,
+  onKeyUp: p,
+  onSubmit: C,
+  onChange: a,
+  onInput: a
+};
+function G(o) {
+  return q[o] || k;
+}
+const O = "handlers";
+function I({ def: o }) {
+  var r;
+  const {
+    id: s,
+    actions: { setProp: f },
+    handlers: h
+  } = T((e) => ({
+    id: e.id,
+    handlers: e.data.props.handlers && typeof e.data.props.handlers == "object" ? e.data.props.handlers : {}
+  })), n = A(), t = (r = L(o.section)) == null ? void 0 : r.title, [D, M] = y(R), l = g(null);
+  w(
+    s,
+    o.id,
+    () => requestAnimationFrame(() => {
+      var e;
+      return (e = l.current) == null ? void 0 : e.open();
+    })
+  );
+  const P = new Set(Object.keys(h)), S = m.filter(
+    (e) => !P.has(e.value)
+  ).map((e) => ({
+    id: e.value,
+    label: e.label,
+    data: e.value
+  }));
+  return /* @__PURE__ */ i(
+    N,
+    {
+      ref: l,
+      items: S,
+      onSelect: (e) => {
+        if (!e.data) return;
+        const E = e.data;
+        f((u) => {
+          const c = { ...u.handlers || {} };
+          c[E] = "", u.handlers = c;
+        }), t && (n != null && n.setOpen) && n.setOpen(t, !0), H(D, M, s, O);
+      },
+      trigger: /* @__PURE__ */ i(_, { className: "size-3.5", "aria-hidden": !0 }),
+      triggerAriaLabel: "Add handler",
+      searchPlaceholder: "Search events…",
+      emptyMessage: "All events in use",
+      anchor: "bottom end",
+      panelWidthClass: "w-56"
+    }
+  );
+}
+const Q = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  HANDLERS_BODY_DEF_ID: O,
+  default: I
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Y as H,
+  O as a,
+  m as b,
+  Q as c,
+  G as g
+};

package/dist/chunks/HandlersInput-p49STTn8.js

@@ -0,0 +1,132 @@
+import { jsxs as L, Fragment as A, jsx as u } from "react/jsx-runtime";
+import { useNode as k } from "@craftjs/core";
+import { useState as j, useRef as b, useEffect as P, Suspense as N, lazy as _, useMemo as E } from "react";
+import { C as q, u as C } from "./index-C66dAl3Q.js";
+import { u as I } from "./usePopoverPosition-83Vti7Aw.js";
+import { H as S, g as M, a as F } from "./HandlersAddPicker-DWTgjKgo.js";
+import { P as K, p as V } from "./popoverOpenRequestAtom-hBS_siXv.js";
+const T = _(() => import("./HandlerEditorPanel-DiOXobsl.js")), w = 360;
+function z(o) {
+  const l = (o || "").split(`
+`).map((i) => i.trim()).find((i) => i.length > 0);
+  return l ? l.length > 32 ? l.slice(0, 32) + "…" : l : "Add JS…";
+}
+function B({
+  event: o,
+  code: l,
+  preventDefault: i,
+  takenEvents: H,
+  onChange: v,
+  onRemove: d,
+  autoOpen: p,
+  onAutoOpenConsumed: r
+}) {
+  const [f, c] = j(!1), { triggerRef: y, initialPos: m, setInitialPos: g, computePosition: h } = I(w), O = M(o), R = S[o] ?? o, n = z(l), e = () => {
+    g(h()), c(!0);
+  }, t = b(!1);
+  return P(() => {
+    !p || t.current || (t.current = !0, requestAnimationFrame(() => {
+      g(h()), c(!0), r == null || r();
+    }));
+  }, [p]), /* @__PURE__ */ L(A, { children: [
+    /* @__PURE__ */ u(
+      q,
+      {
+        mode: "popover",
+        ref: y,
+        label: R,
+        open: f,
+        onTriggerClick: () => f ? c(!1) : e(),
+        onClear: () => {
+          f && c(!1), d();
+        },
+        triggerAriaLabel: "Edit handler",
+        clearAriaLabel: "Remove handler",
+        leading: /* @__PURE__ */ u(O, { className: "size-3.5", "aria-hidden": !0 }),
+        summary: n
+      }
+    ),
+    f && /* @__PURE__ */ u(N, { fallback: null, children: /* @__PURE__ */ u(
+      T,
+      {
+        event: o,
+        code: l,
+        preventDefault: i,
+        takenEvents: H,
+        onChange: v,
+        onRemove: d,
+        initialPosition: m,
+        onClose: () => c(!1)
+      }
+    ) })
+  ] });
+}
+function Z() {
+  const {
+    id: o,
+    actions: { setProp: l },
+    handlers: i,
+    handlerOptions: H
+  } = k((n) => {
+    const e = n.data.props, t = e.handlers && typeof e.handlers == "object" ? e.handlers : {}, s = e.handlerOptions && typeof e.handlerOptions == "object" ? e.handlerOptions : {};
+    return {
+      id: n.id,
+      handlers: t,
+      handlerOptions: s
+    };
+  }), d = C(K).get(V(o, F)) || 0, p = E(
+    () => Object.entries(i).filter(([, n]) => typeof n == "string"),
+    [i]
+  ), r = E(() => p.map(([n]) => n), [p]), f = r.join("|"), c = (n, e) => {
+    l((t) => {
+      const s = { ...t.handlers || {} }, a = {
+        ...t.handlerOptions || {}
+      };
+      if (n === e.event ? s[n] = e.code : (delete s[n], delete a[n], s[e.event] = e.code), t.handlers = s, e.preventDefault)
+        a[e.event] = { ...a[e.event] || {}, preventDefault: !0 };
+      else if (a[e.event]) {
+        const { preventDefault: J, ...D } = a[e.event];
+        Object.keys(D).length === 0 ? delete a[e.event] : a[e.event] = D;
+      }
+      Object.keys(a).length === 0 ? delete t.handlerOptions : t.handlerOptions = a;
+    });
+  }, y = (n) => {
+    l((e) => {
+      if (!e.handlers) return;
+      const t = { ...e.handlers };
+      if (delete t[n], Object.keys(t).length === 0 ? delete e.handlers : e.handlers = t, e.handlerOptions) {
+        const s = { ...e.handlerOptions };
+        delete s[n], Object.keys(s).length === 0 ? delete e.handlerOptions : e.handlerOptions = s;
+      }
+    });
+  }, m = b(r), [g, h] = j(null);
+  P(() => {
+    const n = new Set(m.current), e = r.find((t) => !n.has(t));
+    e && h(e), m.current = r;
+  }, [f, r]);
+  const O = b(0);
+  P(() => {
+    d === 0 || d === O.current || (O.current = d, r.length > 0 && h(r[r.length - 1]));
+  }, [d, r]);
+  const R = () => h(null);
+  return /* @__PURE__ */ u("div", { className: "flex flex-col gap-1", children: p.map(([n, e]) => {
+    var t;
+    return /* @__PURE__ */ u(
+      B,
+      {
+        event: n,
+        code: e,
+        preventDefault: !!((t = H[n]) != null && t.preventDefault),
+        takenEvents: r,
+        autoOpen: n === g,
+        onAutoOpenConsumed: R,
+        onChange: (s) => c(n, s),
+        onRemove: () => y(n)
+      },
+      `handler-${n}`
+    );
+  }) });
+}
+export {
+  Z as HandlersInput
+};

package/dist/chunks/IconDialogInput-C-81_L2n.js

@@ -0,0 +1,105 @@
+import { jsxs as F, Fragment as H, jsx as i } from "react/jsx-runtime";
+import { useEditor as C, useNode as T } from "@craftjs/core";
+import { useMemo as W, useState as $, Suspense as j, lazy as M } from "react";
+import { _ as R, $ as S, u as h, V as _, E as q, C as B, a0 as O, c as G, e as Q } from "./index-C66dAl3Q.js";
+import { u as Z } from "./usePopoverPosition-83Vti7Aw.js";
+const J = ({ value: e }) => {
+  const { query: o } = C(), { pageMedia: n } = W(() => R(o), [o]);
+  return S(e, n);
+}, U = M(() => import("./IconPickerPanel-BjNOlCh6.js")), p = 384, X = 480;
+function Y(e) {
+  if (!e) return "Pick icon";
+  if (e.startsWith("ref-image:")) return "Image";
+  const o = e.lastIndexOf("/");
+  return (o >= 0 ? e.slice(o + 1) : e).replace(/^(Tb|Fa6?|Bs|Bi|Im|Si|Lia)/, "").replace(/([a-z])([A-Z])/g, "$1 $2");
+}
+const ae = ({
+  propKey: e,
+  label: o = "",
+  prefix: n = "",
+  index: r = null,
+  propItemKey: c = "",
+  propType: f = "class"
+}) => {
+  var g, P;
+  const { actions: I, query: k } = C(), x = h(_), A = h(q).dark ?? !1, b = Q(x), {
+    actions: { setProp: N },
+    nodeProps: d,
+    id: v
+  } = T((a) => ({
+    nodeProps: a.data.props || {},
+    id: a.id
+  })), [l, u] = $(!1), { triggerRef: E, initialPos: L, setInitialPos: V, computePosition: w } = Z(p), m = (a) => {
+    G({
+      propType: f,
+      propKey: e,
+      value: a,
+      setProp: N,
+      index: r,
+      propItemKey: c,
+      query: k,
+      actions: I,
+      nodeId: v,
+      ...f === "class" ? { view: b, classDark: A } : {}
+    });
+  };
+  let s = "";
+  if (r !== null && c)
+    s = ((P = (g = d[e]) == null ? void 0 : g[r]) == null ? void 0 : P[c]) || "";
+  else {
+    const a = e.split(".");
+    let t = d;
+    for (const D of a)
+      if (t = t == null ? void 0 : t[D], t === void 0) break;
+    s = typeof t == "string" ? t : "";
+  }
+  const z = () => {
+    V(w()), u(!0);
+  }, y = s ? /* @__PURE__ */ i(
+    "span",
+    {
+      className: "text-base-content flex size-4 shrink-0 items-center justify-center [&>svg]:size-full",
+      "aria-hidden": !0,
+      children: /* @__PURE__ */ i(J, { value: s })
+    }
+  ) : /* @__PURE__ */ i(O, { className: "size-3.5", "aria-hidden": !0 });
+  return /* @__PURE__ */ F(H, { children: [
+    /* @__PURE__ */ i(
+      B,
+      {
+        mode: "popover",
+        ref: E,
+        label: o,
+        propKey: e,
+        propType: f,
+        index: r ?? void 0,
+        propItemKey: c || null,
+        open: l,
+        onTriggerClick: () => l ? u(!1) : z(),
+        onClear: () => {
+          l && u(!1), m("");
+        },
+        triggerAriaLabel: s ? `Icon: ${s}` : "Choose icon",
+        clearAriaLabel: "Clear icon",
+        leading: y,
+        summary: Y(s)
+      }
+    ),
+    l && /* @__PURE__ */ i(j, { fallback: null, children: /* @__PURE__ */ i(
+      U,
+      {
+        value: s,
+        prefix: n,
+        onChange: m,
+        onClose: () => u(!1),
+        initialPosition: L,
+        defaultWidth: p,
+        defaultHeight: X
+      }
+    ) })
+  ] });
+};
+export {
+  J as C,
+  ae as I
+};

package/dist/chunks/IconInput-D2Gy7Hvf.js

@@ -0,0 +1,182 @@
+import { jsx as o, jsxs as m, Fragment as P } from "react/jsx-runtime";
+import { useState as C } from "react";
+import { useNode as L } from "@craftjs/core";
+import { C as W, W as S, n as r, o as s, X as z } from "./index-C66dAl3Q.js";
+import { F as N } from "./FloatingPanel-DJP5Vhua.js";
+import { u as y } from "./usePopoverPosition-83Vti7Aw.js";
+import { C as O, I as R } from "./IconDialogInput-C-81_L2n.js";
+import { C as V } from "./ColorInput-BSfMNt86.js";
+import { U as k } from "./index-B-GJd039.js";
+const E = ({
+  propKey: e = "shadow",
+  propType: t = "class",
+  label: i = "Shadow",
+  inline: n = !0
+}) => /* @__PURE__ */ o(
+  k,
+  {
+    propKey: e,
+    propType: t,
+    propTag: "shadow",
+    tailwindKey: "dropShadows",
+    allowedTypes: ["tailwind", "calc"],
+    label: i,
+    showVarSelector: !0,
+    inline: n
+  }
+), F = 320;
+function Z(e) {
+  if (e.startsWith("ref-image:")) return "Custom";
+  const t = z(e);
+  if (!t) return e;
+  const i = t.set.charAt(0).toUpperCase() + t.set.slice(1);
+  return (t.name.startsWith(i) ? t.name.slice(i.length) : t.name).replace(/([a-z])([A-Z])/g, "$1 $2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2");
+}
+function f(e, t) {
+  const i = t.split(".");
+  let n = e;
+  for (const c of i)
+    if (n = n == null ? void 0 : n[c], n === void 0) return;
+  return n;
+}
+const q = ({
+  propKey: e = "icon",
+  propType: t = "component",
+  label: i = "Icon",
+  showIconOnly: n = !0,
+  showPosition: c = !0,
+  iconOnlyLabel: g = "Only Show Icon",
+  positionLabel: b = "Position"
+}) => {
+  const [d, u] = C(!1), { triggerRef: I, initialPos: x, setInitialPos: $, computePosition: v } = y(F), {
+    actions: { setProp: w },
+    iconValue: a
+  } = L((l) => {
+    var p, h;
+    return {
+      iconValue: typeof f(((p = l.data) == null ? void 0 : p.props) || {}, `${e}.value`) == "string" ? f(((h = l.data) == null ? void 0 : h.props) || {}, `${e}.value`) : ""
+    };
+  }), A = () => {
+    $(v()), u(!0);
+  };
+  return /* @__PURE__ */ m(P, { children: [
+    /* @__PURE__ */ o(
+      W,
+      {
+        mode: "popover",
+        ref: I,
+        label: i,
+        open: d,
+        onTriggerClick: () => d ? u(!1) : A(),
+        onClear: () => {
+          w((l) => {
+            delete l[e];
+          }, 0);
+        },
+        triggerAriaLabel: a ? `Edit icon: ${a}` : "Add icon",
+        clearAriaLabel: "Remove icon",
+        leading: /* @__PURE__ */ o(
+          "span",
+          {
+            className: `flex size-4 items-center justify-center ${a ? "text-base-content" : "border-base-300 text-neutral-content/60 rounded-sm border border-dashed"}`,
+            "aria-hidden": !0,
+            children: a ? /* @__PURE__ */ o(O, { value: a }) : null
+          }
+        ),
+        summary: a ? Z(a) : "Add..."
+      }
+    ),
+    d && /* @__PURE__ */ o(
+      N,
+      {
+        isOpen: !0,
+        onClose: () => u(!1),
+        title: i,
+        storageKey: `icon-bundle-${e}`,
+        minWidth: 280,
+        maxWidth: 480,
+        minHeight: 200,
+        initialPosition: x,
+        zIndex: S,
+        children: /* @__PURE__ */ m("div", { className: "flex flex-1 flex-col gap-2 overflow-y-auto p-3", children: [
+          /* @__PURE__ */ o(
+            R,
+            {
+              propKey: `${e}.value`,
+              propType: t,
+              label: "Image"
+            }
+          ),
+          n && /* @__PURE__ */ o(
+            r,
+            {
+              propKey: `${e}.only`,
+              propType: t,
+              type: "checkbox",
+              label: g,
+              on: !0,
+              labelHide: !0,
+              labelWidth: "w-full"
+            }
+          ),
+          c && /* @__PURE__ */ m(
+            r,
+            {
+              propKey: `${e}.position`,
+              propType: t,
+              type: "select",
+              label: b,
+              inline: !0,
+              children: [
+                /* @__PURE__ */ o("option", { value: "left", children: "Left" }),
+                /* @__PURE__ */ o("option", { value: "right", children: "Right" }),
+                /* @__PURE__ */ o("option", { value: "top", children: "Top" }),
+                /* @__PURE__ */ o("option", { value: "bottom", children: "Bottom" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ o(
+            r,
+            {
+              propKey: `${e}.size`,
+              propType: t,
+              type: "select",
+              label: "Size",
+              max: s.allWidths.length - 1,
+              min: 0,
+              valueLabels: s.allWidths,
+              inline: !0
+            }
+          ),
+          /* @__PURE__ */ o(
+            V,
+            {
+              propKey: `${e}.color`,
+              propType: t,
+              label: "Color",
+              prefix: "text",
+              inline: !0
+            }
+          ),
+          /* @__PURE__ */ o(E, { propKey: `${e}.shadow`, propType: t }),
+          /* @__PURE__ */ o(
+            r,
+            {
+              propKey: `${e}.gap`,
+              propType: t,
+              type: "select",
+              label: "Gap",
+              max: s.gap.length - 1,
+              min: 0,
+              valueLabels: s.gap,
+              inline: !0
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+};
+export {
+  q as I
+};

package/dist/chunks/IconMainTab-CNrVjDWP.js

@@ -0,0 +1,26 @@
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { I as p } from "./IconDialogInput-C-81_L2n.js";
+import { w as r } from "./index-C66dAl3Q.js";
+import { U as l } from "./index-B-GJd039.js";
+import { r as a } from "./helpers-Cll72tMn.js";
+const c = () => a({
+  Content: /* @__PURE__ */ e(r, { collapsible: !1, children: [
+    /* @__PURE__ */ o(p, { propKey: "value", propType: "component", label: "Icon" }),
+    /* @__PURE__ */ o(
+      l,
+      {
+        propKey: "size",
+        propType: "class",
+        propTag: "size",
+        label: "Size",
+        tailwindKey: "size",
+        showVarSelector: !0,
+        allowedTypes: ["tailwind", "calc", "px", "%", "em", "rem", "vw", "vh"],
+        inputWidth: "flex-1"
+      }
+    )
+  ] })
+});
+export {
+  c as IconMainTab
+};