@pagehub/sdk 0.1.5 → 0.1.6

package/dist/chunks/Form.render-6GjcmL2u.js

@@ -0,0 +1,54 @@
+import { jsxs as x, Fragment as g, jsx as f } from "react/jsx-runtime";
+import { useEffect as v } from "react";
+import { cZ as w, d1 as F, d3 as n, d4 as E } from "./index-C66dAl3Q.js";
+const K = ({ children: l, ...e }) => {
+  const m = w(), o = (m == null ? void 0 : m.id) ?? "", d = o ? `form:${o}:fields` : "", i = o ? `form:${o}:loading` : "", r = o ? `form:${o}:loaded` : "";
+  v(() => {
+    const t = document.querySelector("iframe");
+    if (!t) return;
+    const s = () => {
+      i && n(i, "hidden", "form-iframe"), r && n(r, "shown", "form-iframe");
+    };
+    return t.addEventListener("load", s, !0), () => t.removeEventListener("load", s);
+  }, [i, r]);
+  const u = async (t) => {
+    d && n(d, "hidden", "form-submit"), i && n(i, "shown", "form-submit"), e.submissionType !== "iframe" && (await E(t, e, null), setTimeout(() => {
+      if (e.successAction === "redirect" && e.successUrl) {
+        window.location.href = e.successUrl;
+        return;
+      }
+      i && n(i, "hidden", "form-submit"), r && n(r, "shown", "form-submit");
+    }, 1e3));
+  }, h = {
+    action: e.action || "",
+    method: e.method || "POST",
+    target: e.submissionType === "iframe" ? "iframe" : void 0,
+    role: "form",
+    "aria-label": e.formName || "Form",
+    onSubmit: async (t) => {
+      t.preventDefault();
+      const y = t.target.querySelectorAll("input, select, textarea"), c = {};
+      y.forEach((a) => {
+        a.type !== "file" && (c[a.name] = a.value);
+      }), await u(c);
+    },
+    ...e,
+    type: "form"
+  }, b = /* @__PURE__ */ x(g, { children: [
+    /* @__PURE__ */ f(
+      "div",
+      {
+        "aria-hidden": "true",
+        tabIndex: -1,
+        style: { position: "absolute", left: "-9999px", top: "-9999px", opacity: 0, height: 0, overflow: "hidden" },
+        children: /* @__PURE__ */ f("input", { type: "text", name: "_ph_hp", autoComplete: "off", tabIndex: -1 })
+      }
+    ),
+    l,
+    e.submissionType === "iframe" && /* @__PURE__ */ f("iframe", { className: "hidden", name: "iframe", id: "iframe", title: "Submission Frame" })
+  ] });
+  return F({ ...h, children: b });
+};
+export {
+  K as FormRender
+};

package/dist/chunks/FormElement.render-DWrG-2ID.js

@@ -0,0 +1,36 @@
+import { useState as d, useEffect as l } from "react";
+import { cY as i, cZ as c, c_ as p, d5 as u } from "./index-C66dAl3Q.js";
+const g = (r) => {
+  const t = {
+    root: {},
+    className: "border-solid border-(length:--border) border-(--input-border-color) rounded-field bg-(--input-bg-color) text-(--input-text-color) placeholder:text-(--input-placeholder-color) focus:ring-(length:--input-focus-ring) focus:ring-(--input-focus-ring-color) focus:outline-none",
+    type: "",
+    placeholder: "",
+    name: "",
+    required: !1,
+    disabled: !1,
+    readOnly: !1,
+    rows: 4,
+    cols: 50,
+    min: "",
+    max: "",
+    step: "",
+    pattern: "",
+    options: [],
+    ...r
+  }, e = i(), o = c(), [n, a] = d(!1);
+  l(() => a(!0), []);
+  const s = p({
+    id: (o == null ? void 0 : o.id) ?? "",
+    isCanvas: !1,
+    hasChildNodes: !1,
+    displayName: (o == null ? void 0 : o.displayName) ?? "FormElement",
+    rootProps: (e == null ? void 0 : e.rootProps) ?? {},
+    pageMedia: (e == null ? void 0 : e.pageMedia) ?? null,
+    pageIndex: (e == null ? void 0 : e.pageIndex) ?? {}
+  });
+  return s.isMounted = n, u(t, s);
+};
+export {
+  g as FormElementRender
+};

package/dist/chunks/FormElementMainTab-DSbF3F6e.js

@@ -0,0 +1,470 @@
+import { jsx as a, jsxs as f, Fragment as A } from "react/jsx-runtime";
+import { useNode as k, useEditor as H } from "@craftjs/core";
+import { C as h, d as z, n as C, aE as j, c as M, aF as Y, aG as W, as as B, aH as F, w as q, a3 as L, P as O, aw as G, T as U, aI as J } from "./index-C66dAl3Q.js";
+import { L as Q } from "./ListEditor-mD-CmRNE.js";
+import { r as X } from "./helpers-Cll72tMn.js";
+import { useState as E, Suspense as N, lazy as S } from "react";
+import { u as I } from "./usePopoverPosition-83Vti7Aw.js";
+import { S as Z } from "./SlotRenderer-CaLf_2_C.js";
+const _ = j("selectedOption", null), ee = ({ options: t, setProp: e }) => {
+  const [n, i] = z(_), r = Array.isArray(t) ? t : [], d = (o) => {
+    M({
+      setProp: e,
+      propKey: "options",
+      propType: "component",
+      value: o
+    });
+  };
+  return /* @__PURE__ */ a(
+    Q,
+    {
+      items: r.map((o, l) => ({ ...o, _index: l })),
+      activeIndex: n,
+      setActiveIndex: i,
+      addLabel: "Add Option",
+      renderLabel: (o, l) => o.label || `Option ${l + 1}`,
+      onDelete: (o, l) => {
+        const u = [...r];
+        u.splice(l, 1), d(u), n === l && i(null);
+      },
+      onAdd: () => {
+        const o = [...r];
+        o.push({
+          value: `option${r.length + 1}`,
+          label: `Option ${r.length + 1}`,
+          disabled: !1
+        }), i(r.length), d(o);
+      },
+      renderPopover: (o, l) => /* @__PURE__ */ f("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ f("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ a("span", { className: "text-neutral-content text-xs", children: "Label" }),
+          /* @__PURE__ */ a(
+            C,
+            {
+              propKey: "options",
+              propType: "component",
+              index: l,
+              propItemKey: "label",
+              type: "text",
+              label: "",
+              placeholder: "Option label",
+              labelHide: !0
+            }
+          )
+        ] }),
+        /* @__PURE__ */ f("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ a("span", { className: "text-neutral-content text-xs", children: "Value" }),
+          /* @__PURE__ */ a(
+            C,
+            {
+              propKey: "options",
+              propType: "component",
+              index: l,
+              propItemKey: "value",
+              type: "text",
+              label: "",
+              placeholder: "Option value",
+              labelHide: !0
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a(
+          C,
+          {
+            propKey: "options",
+            propType: "component",
+            index: l,
+            propItemKey: "disabled",
+            type: "checkbox",
+            label: "Disabled",
+            labelHide: !1
+          }
+        )
+      ] })
+    }
+  );
+}, te = (t) => {
+  const {
+    actions: { setProp: e },
+    options: n
+  } = k((i) => {
+    var o, l;
+    const r = ((l = (o = i.data) == null ? void 0 : o.props) == null ? void 0 : l.options) || [];
+    return {
+      options: Array.isArray(r) ? r : Object.values(r)
+    };
+  });
+  return /* @__PURE__ */ a(
+    h,
+    {
+      frame: "bare",
+      label: t != null && t.labelHide || t == null ? void 0 : t.label,
+      propKey: t == null ? void 0 : t.propKey,
+      propType: t == null ? void 0 : t.propType,
+      children: /* @__PURE__ */ a(ee, { options: n, setProp: e })
+    }
+  );
+}, ae = S(() => import("./PropertiesPanel-DO0RlalO.js")), oe = 280, le = ["required", "disabled", "readOnly", "autoComplete", "defaultValue"];
+function ne(t) {
+  const e = [];
+  return t.required && e.push("Required"), t.disabled && e.push("Disabled"), t.readOnly && e.push("Read-only"), t.autoComplete && e.push(`autoComplete: ${t.autoComplete}`), t.defaultValue && e.push(`default: ${t.defaultValue}`), e.length === 0 ? "None" : e.join(", ");
+}
+function ie() {
+  const [t, e] = E(!1), { triggerRef: n, initialPos: i, setInitialPos: r, computePosition: d } = I(oe), {
+    actions: { setProp: o },
+    required: l,
+    disabled: u,
+    readOnly: x,
+    autoComplete: T,
+    defaultValue: v
+  } = k((c) => {
+    var m, y, g, P, R, $, K, V, D, w;
+    return {
+      required: !!((y = (m = c.data) == null ? void 0 : m.props) != null && y.required),
+      disabled: !!((P = (g = c.data) == null ? void 0 : g.props) != null && P.disabled),
+      readOnly: !!(($ = (R = c.data) == null ? void 0 : R.props) != null && $.readOnly),
+      autoComplete: ((V = (K = c.data) == null ? void 0 : K.props) == null ? void 0 : V.autoComplete) || "",
+      defaultValue: ((w = (D = c.data) == null ? void 0 : D.props) == null ? void 0 : w.defaultValue) || ""
+    };
+  }), b = ne({ required: l, disabled: u, readOnly: x, autoComplete: T, defaultValue: v }), s = () => {
+    r(d()), e(!0);
+  }, p = () => {
+    o((c) => {
+      le.forEach((m) => {
+        delete c[m];
+      });
+    });
+  };
+  return /* @__PURE__ */ f(A, { children: [
+    /* @__PURE__ */ a(
+      h,
+      {
+        mode: "popover",
+        ref: n,
+        label: "Properties",
+        open: t,
+        onTriggerClick: () => t ? e(!1) : s(),
+        onClear: () => {
+          t && e(!1), p();
+        },
+        triggerAriaLabel: "Edit input properties",
+        clearAriaLabel: "Clear input properties",
+        leading: /* @__PURE__ */ a(Y, { className: "size-3.5", "aria-hidden": !0 }),
+        summary: b
+      }
+    ),
+    t && /* @__PURE__ */ a(N, { fallback: null, children: /* @__PURE__ */ a(ae, { initialPosition: i, onClose: () => e(!1) }) })
+  ] });
+}
+const re = S(() => import("./TextareaSettingsPanel-C1rQuF1O.js")), se = 260, ce = ["rows", "cols"];
+function pe(t, e) {
+  const n = [];
+  return t && n.push(`${t} rows`), e && n.push(`${e} cols`), n.length === 0 ? "Default size" : n.join(" · ");
+}
+function de() {
+  const [t, e] = E(!1), { triggerRef: n, initialPos: i, setInitialPos: r, computePosition: d } = I(se), {
+    actions: { setProp: o },
+    rows: l,
+    cols: u
+  } = k((b) => {
+    var s, p, c, m;
+    return {
+      rows: (p = (s = b.data) == null ? void 0 : s.props) == null ? void 0 : p.rows,
+      cols: (m = (c = b.data) == null ? void 0 : c.props) == null ? void 0 : m.cols
+    };
+  }), x = pe(l, u), T = () => {
+    r(d()), e(!0);
+  }, v = () => {
+    o((b) => {
+      ce.forEach((s) => {
+        delete b[s];
+      });
+    });
+  };
+  return /* @__PURE__ */ f(A, { children: [
+    /* @__PURE__ */ a(
+      h,
+      {
+        mode: "popover",
+        ref: n,
+        label: "Textarea",
+        open: t,
+        onTriggerClick: () => t ? e(!1) : T(),
+        onClear: () => {
+          t && e(!1), v();
+        },
+        triggerAriaLabel: "Edit textarea sizing",
+        clearAriaLabel: "Clear textarea sizing",
+        leading: /* @__PURE__ */ a(W, { className: "size-3.5", "aria-hidden": !0 }),
+        summary: x
+      }
+    ),
+    t && /* @__PURE__ */ a(N, { fallback: null, children: /* @__PURE__ */ a(re, { initialPosition: i, onClose: () => e(!1) }) })
+  ] });
+}
+const ue = S(() => import("./NumberSettingsPanel-DASi_l6V.js")), me = 260, fe = ["min", "max", "step"];
+function be(t, e, n) {
+  const i = [];
+  return t && i.push(`min ${t}`), e && i.push(`max ${e}`), n && i.push(`step ${n}`), i.length === 0 ? "No bounds" : i.join(" · ");
+}
+function he() {
+  const [t, e] = E(!1), { triggerRef: n, initialPos: i, setInitialPos: r, computePosition: d } = I(me), {
+    actions: { setProp: o },
+    min: l,
+    max: u,
+    step: x
+  } = k((s) => {
+    var p, c, m, y, g, P;
+    return {
+      min: ((c = (p = s.data) == null ? void 0 : p.props) == null ? void 0 : c.min) || "",
+      max: ((y = (m = s.data) == null ? void 0 : m.props) == null ? void 0 : y.max) || "",
+      step: ((P = (g = s.data) == null ? void 0 : g.props) == null ? void 0 : P.step) || ""
+    };
+  }), T = be(l, u, x), v = () => {
+    r(d()), e(!0);
+  }, b = () => {
+    o((s) => {
+      fe.forEach((p) => {
+        delete s[p];
+      });
+    });
+  };
+  return /* @__PURE__ */ f(A, { children: [
+    /* @__PURE__ */ a(
+      h,
+      {
+        mode: "popover",
+        ref: n,
+        label: "Bounds",
+        open: t,
+        onTriggerClick: () => t ? e(!1) : v(),
+        onClear: () => {
+          t && e(!1), b();
+        },
+        triggerAriaLabel: "Edit numeric bounds",
+        clearAriaLabel: "Clear numeric bounds",
+        leading: /* @__PURE__ */ a(B, { className: "size-3.5", "aria-hidden": !0 }),
+        summary: T
+      }
+    ),
+    t && /* @__PURE__ */ a(N, { fallback: null, children: /* @__PURE__ */ a(ue, { initialPosition: i, onClose: () => e(!1) }) })
+  ] });
+}
+const ye = S(() => import("./ValidationPanel-CmA9SfoF.js")), ge = 320, Pe = ["pattern", "errorMessage", "label"];
+function xe(t, e, n) {
+  return t ? `Regex: ${t.length > 18 ? t.slice(0, 18) + "…" : t}` : n || e || "No validation";
+}
+function Te() {
+  const [t, e] = E(!1), { triggerRef: n, initialPos: i, setInitialPos: r, computePosition: d } = I(ge), {
+    actions: { setProp: o },
+    pattern: l,
+    errorMessage: u,
+    label: x
+  } = k((s) => {
+    var p, c, m, y, g, P;
+    return {
+      pattern: ((c = (p = s.data) == null ? void 0 : p.props) == null ? void 0 : c.pattern) || "",
+      errorMessage: ((y = (m = s.data) == null ? void 0 : m.props) == null ? void 0 : y.errorMessage) || "",
+      label: ((P = (g = s.data) == null ? void 0 : g.props) == null ? void 0 : P.label) || ""
+    };
+  }), T = xe(l, u, x), v = () => {
+    r(d()), e(!0);
+  }, b = () => {
+    o((s) => {
+      Pe.forEach((p) => {
+        delete s[p];
+      });
+    });
+  };
+  return /* @__PURE__ */ f(A, { children: [
+    /* @__PURE__ */ a(
+      h,
+      {
+        mode: "popover",
+        ref: n,
+        label: "Validation",
+        open: t,
+        onTriggerClick: () => t ? e(!1) : v(),
+        onClear: () => {
+          t && e(!1), b();
+        },
+        triggerAriaLabel: "Edit validation",
+        clearAriaLabel: "Clear validation",
+        leading: /* @__PURE__ */ a(F, { className: "size-3.5", "aria-hidden": !0 }),
+        summary: T
+      }
+    ),
+    t && /* @__PURE__ */ a(N, { fallback: null, children: /* @__PURE__ */ a(ye, { initialPosition: i, onClose: () => e(!1) }) })
+  ] });
+}
+const ve = [
+  "text",
+  "textarea",
+  "email",
+  "password",
+  "url",
+  "tel",
+  "date",
+  "datetime-local",
+  "radio",
+  "checkbox",
+  "select",
+  "reset",
+  "hidden",
+  "color",
+  "file",
+  "month",
+  "number",
+  "range",
+  "search",
+  "time",
+  "week"
+], Ce = () => {
+  const {
+    actions: { setProp: t },
+    stateBinding: e
+  } = k((o) => {
+    var l, u;
+    return {
+      stateBinding: (u = (l = o.data) == null ? void 0 : l.props) == null ? void 0 : u.stateBinding
+    };
+  }), { enabled: n } = H((o) => ({ enabled: o.options.enabled })), i = (o) => {
+    t((l) => {
+      l.stateBinding || (l.stateBinding = {}), Object.assign(l.stateBinding, o), l.stateBinding.key || delete l.stateBinding;
+    });
+  }, r = () => {
+    t((o) => {
+      delete o.stateBinding;
+    });
+  }, d = (e == null ? void 0 : e.mode) ?? "value";
+  return /* @__PURE__ */ f(
+    q,
+    {
+      title: "State Binding",
+      icon: /* @__PURE__ */ a(J, {}),
+      help: "Two-way bind this input's value to a state-registry key. The URL bridge picks up url:* keys automatically. Set key only — debounce / mode / defaultValue are optional.",
+      defaultOpen: !!(e != null && e.key),
+      children: [
+        /* @__PURE__ */ a(
+          h,
+          {
+            label: "Key",
+            trailing: e != null && e.key ? /* @__PURE__ */ a(G, { onClick: r, tooltip: "Clear binding" }) : null,
+            children: /* @__PURE__ */ a(
+              "input",
+              {
+                type: "text",
+                className: "input-plain flex-1",
+                value: (e == null ? void 0 : e.key) ?? "",
+                placeholder: "e.g. url:q",
+                onChange: (o) => i({ key: o.target.value }),
+                "aria-label": "State binding key",
+                "data-tooltip-id": O,
+                "data-tooltip-content": "Registry key to bind. Convention: url:q for search, cart:promo for promo code, pdp:axis:Color for variant pickers.",
+                ...L
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ a(h, { label: "Mode", frame: "bare", children: /* @__PURE__ */ a(
+          U,
+          {
+            dense: !0,
+            value: d,
+            onChange: (o) => i({ mode: o }),
+            tooltipId: O,
+            options: [
+              {
+                value: "value",
+                label: "Value",
+                tooltip: "Sync input value (text, select, textarea)",
+                ariaLabel: "Value"
+              },
+              {
+                value: "checked",
+                label: "Checked",
+                tooltip: "Sync checked state (checkbox / radio)",
+                ariaLabel: "Checked"
+              }
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ f(h, { label: "Debounce", children: [
+          /* @__PURE__ */ a(
+            "input",
+            {
+              type: "number",
+              className: "input-plain flex-1",
+              value: (e == null ? void 0 : e.debounceMs) ?? 0,
+              min: 0,
+              max: 2e3,
+              step: 50,
+              placeholder: "0",
+              onChange: (o) => i({ debounceMs: Number(o.target.value) || 0 }),
+              "aria-label": "Debounce milliseconds",
+              "data-tooltip-id": O,
+              "data-tooltip-content": "Delay before writing to state after the user stops typing. 0 = immediate. 300 is good for live-search inputs.",
+              ...L
+            }
+          ),
+          /* @__PURE__ */ a("span", { className: "text-neutral-content shrink-0 text-[10px]", children: "ms" })
+        ] }),
+        /* @__PURE__ */ a(h, { label: "Default", children: /* @__PURE__ */ a(
+          "input",
+          {
+            type: "text",
+            className: "input-plain flex-1",
+            value: (e == null ? void 0 : e.defaultValue) ?? "",
+            placeholder: "(none)",
+            onChange: (o) => i({ defaultValue: o.target.value }),
+            "aria-label": "Default value",
+            "data-tooltip-id": O,
+            "data-tooltip-content": "Written to state on first mount if the state key has no value yet.",
+            ...L
+          }
+        ) })
+      ]
+    }
+  );
+}, Re = () => {
+  var i;
+  const { query: t } = H(), e = t.getEvent("selected").first(), n = e && ((i = t.node(e).get().data.props) == null ? void 0 : i.type) || "";
+  return X({
+    Content: /* @__PURE__ */ f(A, { children: [
+      /* @__PURE__ */ f(q, { children: [
+        /* @__PURE__ */ a(
+          C,
+          {
+            propKey: "placeholder",
+            propType: "component",
+            type: "text",
+            label: "Placeholder"
+          }
+        ),
+        /* @__PURE__ */ a(C, { propKey: "name", propType: "component", type: "text", label: "Name" }),
+        /* @__PURE__ */ a(C, { propKey: "type", propType: "component", type: "select", label: "Type", children: ve.map((r) => /* @__PURE__ */ a("option", { children: r }, r)) }),
+        n === "select" && /* @__PURE__ */ a(
+          te,
+          {
+            propKey: "options",
+            propType: "component",
+            type: "custom",
+            label: "Options",
+            labelHide: !1
+          }
+        ),
+        n === "textarea" && /* @__PURE__ */ a(de, {}),
+        ["number", "range", "date", "datetime-local", "time", "month", "week"].includes(
+          n
+        ) && /* @__PURE__ */ a(he, {}),
+        /* @__PURE__ */ a(ie, {}),
+        /* @__PURE__ */ a(Te, {}),
+        /* @__PURE__ */ a(Z, { id: "settings/ai-button" })
+      ] }),
+      /* @__PURE__ */ a(Ce, {})
+    ] })
+  });
+};
+export {
+  Re as FormElementMainTab
+};