@pagehub/sdk 0.1.5 → 0.1.7

package/dist/chunks/ContainerStateSection-DY_gjBJL.js

@@ -0,0 +1,478 @@
+import { jsxs as n, Fragment as f, jsx as t } from "react/jsx-runtime";
+import { useNode as S } from "@craftjs/core";
+import { useState as b } from "react";
+import { C as v, as as A, W as N, P as x, aO as P, eG as T } from "./index-C66dAl3Q.js";
+import { F as C } from "./FloatingPanel-DJP5Vhua.js";
+import { u as k } from "./usePopoverPosition-83Vti7Aw.js";
+const O = 380, g = [
+  {
+    value: "all-truthy",
+    label: "All truthy",
+    description: "Output 'on' when every input key has a non-empty value. Use as an Add-to-Cart gate."
+  },
+  {
+    value: "first-truthy",
+    label: "First truthy",
+    description: "Output the value of the first non-empty input. Useful for fallback copy."
+  },
+  {
+    value: "join",
+    label: "Join",
+    description: "Concatenate all input values with a separator. Default separator is ','."
+  },
+  {
+    value: "variant-match",
+    label: "Variant match",
+    description: "Match axis selections against a variant map JSON and emit the matched variant. Use on a PDP wrapper."
+  },
+  {
+    value: "variant-axis-availability",
+    label: "Axis availability",
+    description: "Emit a CSV of axis values that have no in-stock variant given the currently selected other axes."
+  }
+];
+function V({
+  binding: i,
+  onChange: r,
+  initialPosition: p,
+  onClose: o
+}) {
+  var m;
+  const a = i.compute, s = (e) => {
+    r({ ...i, compute: { ...a, ...e } });
+  }, d = (e) => {
+    r({
+      ...i,
+      from: e.split(`
+`).map((l) => l.trim()).filter(Boolean)
+    });
+  }, u = a.type === "variant-match" || a.type === "variant-axis-availability";
+  return /* @__PURE__ */ t(
+    C,
+    {
+      isOpen: !0,
+      onClose: o,
+      title: "Computed binding",
+      storageKey: "computed-binding-editor",
+      minWidth: 320,
+      maxWidth: 480,
+      minHeight: 300,
+      initialPosition: p,
+      zIndex: N,
+      scrollable: !0,
+      children: /* @__PURE__ */ n("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ n("label", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ t(
+            "span",
+            {
+              className: "text-base-content text-[11px] font-medium",
+              "data-tooltip-id": x,
+              "data-tooltip-content": "State key to write the computed result to. Anchor tokens ({{anchor.X}}) are supported.",
+              "data-tooltip-place": "left",
+              children: "Output key"
+            }
+          ),
+          /* @__PURE__ */ t(
+            "input",
+            {
+              type: "text",
+              className: "input input-xs font-mono",
+              value: i.key,
+              placeholder: "pdp:matching-variant",
+              onChange: (e) => r({ ...i, key: e.target.value }),
+              "aria-label": "Output state key"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ n("label", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ t("span", { className: "text-base-content text-[11px] font-medium", children: "Compute type" }),
+          /* @__PURE__ */ t(
+            P,
+            {
+              value: a.type,
+              onChange: (e) => {
+                r({ ...i, compute: { type: e } });
+              },
+              chevron: !0,
+              children: g.map((e) => /* @__PURE__ */ t("option", { value: e.value, children: e.label }, e.value))
+            }
+          ),
+          /* @__PURE__ */ t("p", { className: "text-neutral-content text-[9px]", children: (m = g.find((e) => e.value === a.type)) == null ? void 0 : m.description })
+        ] }),
+        !u && /* @__PURE__ */ n("label", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ t(
+            "span",
+            {
+              className: "text-base-content text-[11px] font-medium",
+              "data-tooltip-id": x,
+              "data-tooltip-content": "Input state keys — one per line. The computer reads each key from the registry and combines them per the selected type.",
+              "data-tooltip-place": "left",
+              children: "Input keys (one per line)"
+            }
+          ),
+          /* @__PURE__ */ t(
+            "textarea",
+            {
+              className: "textarea textarea-xs font-mono text-[10px]",
+              rows: 3,
+              value: (i.from ?? []).join(`
+`),
+              onChange: (e) => d(e.target.value),
+              placeholder: `url:q
+url:category`,
+              "aria-label": "Input state keys"
+            }
+          )
+        ] }),
+        a.type === "join" && /* @__PURE__ */ n("label", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ t("span", { className: "text-base-content text-[11px] font-medium", children: "Separator" }),
+          /* @__PURE__ */ t(
+            "input",
+            {
+              type: "text",
+              className: "input input-xs font-mono",
+              value: a.separator ?? ",",
+              onChange: (e) => s({
+                separator: e.target.value
+              }),
+              placeholder: ",",
+              "aria-label": "Join separator"
+            }
+          )
+        ] }),
+        a.type === "variant-match" && /* @__PURE__ */ n(f, { children: [
+          /* @__PURE__ */ n("label", { className: "flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ t(
+              "span",
+              {
+                className: "text-base-content text-[11px] font-medium",
+                "data-tooltip-id": x,
+                "data-tooltip-content": "State key containing the serialised variant map JSON array. Typically {{item.variants}} inside a Data repeater.",
+                "data-tooltip-place": "left",
+                children: "Variant map (state key or JSON)"
+              }
+            ),
+            /* @__PURE__ */ t(
+              "input",
+              {
+                type: "text",
+                className: "input input-xs font-mono",
+                value: a.variantMap ?? "",
+                onChange: (e) => s({
+                  variantMap: e.target.value
+                }),
+                placeholder: "{{item.variants}}",
+                "aria-label": "Variant map"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ n("label", { className: "flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ t(
+              "span",
+              {
+                className: "text-base-content text-[11px] font-medium",
+                "data-tooltip-id": x,
+                "data-tooltip-content": 'Comma-separated axis names, e.g. "Size,Color". Must match the keys in the variant map.',
+                "data-tooltip-place": "left",
+                children: "Axes (CSV)"
+              }
+            ),
+            /* @__PURE__ */ t(
+              "input",
+              {
+                type: "text",
+                className: "input input-xs font-mono",
+                value: Array.isArray(a.axes) ? a.axes.join(",") : a.axes ?? "",
+                onChange: (e) => s({
+                  axes: e.target.value
+                }),
+                placeholder: "Size,Color",
+                "aria-label": "Axes"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ n("label", { className: "flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ t(
+              "span",
+              {
+                className: "text-base-content text-[11px] font-medium",
+                "data-tooltip-id": x,
+                "data-tooltip-content": "Template for the per-axis state key. %axis% is replaced with the axis name. E.g. pdp:axis:%axis% → pdp:axis:Size, pdp:axis:Color.",
+                "data-tooltip-place": "left",
+                children: "Axis key template"
+              }
+            ),
+            /* @__PURE__ */ t(
+              "input",
+              {
+                type: "text",
+                className: "input input-xs font-mono",
+                value: a.axisKeyTemplate ?? "",
+                onChange: (e) => s({
+                  axisKeyTemplate: e.target.value
+                }),
+                placeholder: "pdp:axis:%axis%",
+                "aria-label": "Axis key template"
+              }
+            )
+          ] })
+        ] }),
+        a.type === "variant-axis-availability" && /* @__PURE__ */ n(f, { children: [
+          /* @__PURE__ */ n("label", { className: "flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ t("span", { className: "text-base-content text-[11px] font-medium", children: "Variant map (state key or JSON)" }),
+            /* @__PURE__ */ t(
+              "input",
+              {
+                type: "text",
+                className: "input input-xs font-mono",
+                value: a.variantMap ?? "",
+                onChange: (e) => s(
+                  { variantMap: e.target.value }
+                ),
+                placeholder: "{{item.variants}}",
+                "aria-label": "Variant map"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ n("label", { className: "flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ t(
+              "span",
+              {
+                className: "text-base-content text-[11px] font-medium",
+                "data-tooltip-id": x,
+                "data-tooltip-content": "The axis whose availability you are computing, e.g. Color.",
+                "data-tooltip-place": "left",
+                children: "Axis"
+              }
+            ),
+            /* @__PURE__ */ t(
+              "input",
+              {
+                type: "text",
+                className: "input input-xs font-mono",
+                value: a.axis ?? "",
+                onChange: (e) => s(
+                  { axis: e.target.value }
+                ),
+                placeholder: "Color",
+                "aria-label": "Axis"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ n("label", { className: "flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ t(
+              "span",
+              {
+                className: "text-base-content text-[11px] font-medium",
+                "data-tooltip-id": x,
+                "data-tooltip-content": 'CSV of the other axes to consider when determining availability, e.g. "Size".',
+                "data-tooltip-place": "left",
+                children: "Other axes (CSV)"
+              }
+            ),
+            /* @__PURE__ */ t(
+              "input",
+              {
+                type: "text",
+                className: "input input-xs font-mono",
+                value: Array.isArray(a.otherAxes) ? a.otherAxes.join(",") : a.otherAxes ?? "",
+                onChange: (e) => s(
+                  { otherAxes: e.target.value }
+                ),
+                placeholder: "Size",
+                "aria-label": "Other axes"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ n("label", { className: "flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ t("span", { className: "text-base-content text-[11px] font-medium", children: "Axis key template" }),
+            /* @__PURE__ */ t(
+              "input",
+              {
+                type: "text",
+                className: "input input-xs font-mono",
+                value: a.axisKeyTemplate ?? "",
+                onChange: (e) => s(
+                  { axisKeyTemplate: e.target.value }
+                ),
+                placeholder: "pdp:axis:%axis%",
+                "aria-label": "Axis key template"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function B({
+  binding: i,
+  onChange: r,
+  onRemove: p
+}) {
+  var h;
+  const [o, a] = b(!1), { triggerRef: s, initialPos: d, setInitialPos: u, computePosition: m } = k(O), e = () => {
+    u(m()), a(!0);
+  }, l = ((h = g.find((y) => y.value === i.compute.type)) == null ? void 0 : h.label) ?? i.compute.type, c = `${i.key || "(no output key)"}  ←  ${l}`;
+  return /* @__PURE__ */ n(f, { children: [
+    /* @__PURE__ */ t(
+      v,
+      {
+        mode: "popover",
+        ref: s,
+        label: "Computed",
+        open: o,
+        onTriggerClick: () => o ? a(!1) : e(),
+        onClear: () => {
+          o && a(!1), p();
+        },
+        triggerAriaLabel: "Edit computed binding",
+        clearAriaLabel: "Remove computed binding",
+        leading: /* @__PURE__ */ t(A, { className: "size-3.5", "aria-hidden": !0 }),
+        summary: c
+      }
+    ),
+    o && /* @__PURE__ */ t(
+      V,
+      {
+        binding: i,
+        onChange: r,
+        initialPosition: d,
+        onClose: () => a(!1)
+      }
+    )
+  ] });
+}
+const K = 380;
+function L({
+  value: i,
+  onChange: r,
+  initialPosition: p,
+  onClose: o
+}) {
+  return /* @__PURE__ */ t(
+    C,
+    {
+      isOpen: !0,
+      onClose: o,
+      title: "Visibility state key",
+      storageKey: "visibility-state-key-editor",
+      minWidth: 380,
+      maxWidth: 520,
+      minHeight: 180,
+      initialPosition: p,
+      zIndex: N,
+      scrollable: !0,
+      children: /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ n("p", { className: "text-neutral-content text-[11px] leading-snug", children: [
+          "The key in the state registry that controls this container's visibility. Defaults to the container's DOM id. Anchor tokens like",
+          " ",
+          /* @__PURE__ */ t("code", { className: "font-mono", children: "{{anchor.X}}" }),
+          " are supported."
+        ] }),
+        /* @__PURE__ */ t(v, { children: /* @__PURE__ */ t(
+          "input",
+          {
+            type: "text",
+            className: "input-plain w-full font-mono",
+            value: i,
+            placeholder: "e.g. cart:open",
+            onChange: (a) => r(a.target.value),
+            "aria-label": "Visibility state key",
+            autoComplete: "off",
+            spellCheck: !1,
+            autoFocus: !0
+          }
+        ) })
+      ] })
+    }
+  );
+}
+function w({
+  value: i,
+  onChange: r,
+  onClear: p
+}) {
+  const [o, a] = b(!1), { triggerRef: s, initialPos: d, setInitialPos: u, computePosition: m } = k(K), e = () => {
+    u(m()), a(!0);
+  };
+  return /* @__PURE__ */ n(f, { children: [
+    /* @__PURE__ */ t(
+      v,
+      {
+        mode: "popover",
+        ref: s,
+        label: "Visibility",
+        open: o,
+        onTriggerClick: () => o ? a(!1) : e(),
+        onClear: () => {
+          o && a(!1), p();
+        },
+        triggerAriaLabel: "Edit visibility state key",
+        clearAriaLabel: "Clear visibility state key",
+        leading: /* @__PURE__ */ t(T, { className: "size-3.5", "aria-hidden": !0 }),
+        summary: i || "(uses element id)"
+      }
+    ),
+    o && /* @__PURE__ */ t(
+      L,
+      {
+        value: i,
+        onChange: r,
+        initialPosition: d,
+        onClose: () => a(!1)
+      }
+    )
+  ] });
+}
+const _ = () => {
+  const {
+    actions: { setProp: i },
+    visibilityStateKey: r,
+    computedStateBindings: p
+  } = S((e) => {
+    var l, c, h, y;
+    return {
+      visibilityStateKey: (c = (l = e.data) == null ? void 0 : l.props) == null ? void 0 : c.visibilityStateKey,
+      computedStateBindings: (y = (h = e.data) == null ? void 0 : h.props) == null ? void 0 : y.computedStateBindings
+    };
+  }), o = p ?? [], a = typeof r == "string", s = (e) => {
+    i((l) => {
+      l.visibilityStateKey = e;
+    });
+  }, d = () => {
+    i((e) => {
+      delete e.visibilityStateKey;
+    });
+  }, u = (e, l) => {
+    i((c) => {
+      c.computedStateBindings && (c.computedStateBindings[e] = l);
+    });
+  }, m = (e) => {
+    i((l) => {
+      l.computedStateBindings && (l.computedStateBindings.splice(e, 1), l.computedStateBindings.length === 0 && delete l.computedStateBindings);
+    });
+  };
+  return !a && o.length === 0 ? null : /* @__PURE__ */ n("div", { className: "flex flex-col gap-1", children: [
+    a && /* @__PURE__ */ t(
+      w,
+      {
+        value: r ?? "",
+        onChange: s,
+        onClear: d
+      }
+    ),
+    o.map((e, l) => /* @__PURE__ */ t(
+      B,
+      {
+        binding: e,
+        onChange: (c) => u(l, c),
+        onRemove: () => m(l)
+      },
+      l
+    ))
+  ] });
+};
+export {
+  _ as ContainerStateBody
+};

package/dist/chunks/ConversionFields-Bpfl-SGP.js

@@ -0,0 +1,135 @@
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import { useEditor as C } from "@craftjs/core";
+import { ROOT_NODE as N } from "@craftjs/utils";
+import { C as u } from "./index-C66dAl3Q.js";
+function w(t, n, p = "Click") {
+  if (n) {
+    const o = n.toLowerCase();
+    if (o.startsWith("tel:")) return "Phone Call";
+    if (o.startsWith("mailto:")) return "Contact";
+    if (/maps\.(google|apple)|google\.com\/maps/.test(o)) return "Get Directions";
+  }
+  return t === "add-to-cart" ? "AddToCart" : t === "download-file" ? "Download" : t === "cart-checkout" ? "InitiateCheckout" : p;
+}
+const g = {
+  "google-ads": "Google Ads",
+  ga4: "Google Analytics (GA4)",
+  meta: "Meta Pixel"
+};
+function O({
+  conversion: t,
+  onChange: n,
+  actionType: p,
+  href: o,
+  fallbackEventName: v = "Click"
+}) {
+  const s = C((e) => {
+    var d, c, m, f, h, x;
+    const l = ((m = (c = (d = e.nodes[N]) == null ? void 0 : d.data) == null ? void 0 : c.props) == null ? void 0 : m.integrations) || {};
+    return {
+      "google-ads": !!((f = l.googleAds) != null && f.conversionId),
+      ga4: !!((h = l.googleAnalytics) != null && h.measurementId),
+      meta: !!((x = l.metaPixel) != null && x.pixelId)
+    };
+  }), b = () => {
+    n({
+      provider: s.ga4 ? "ga4" : s["google-ads"] ? "google-ads" : "ga4",
+      eventName: w(p, o, v)
+    });
+  }, i = (e) => {
+    t && n({ ...t, ...e });
+  };
+  return /* @__PURE__ */ r(
+    "details",
+    {
+      open: !!t,
+      className: "border-base-300 mt-1 overflow-hidden rounded-md border",
+      onToggle: (e) => {
+        const l = e.currentTarget;
+        l.open && !t ? b() : !l.open && t && n(void 0);
+      },
+      children: [
+        /* @__PURE__ */ r("summary", { className: "bg-base-200/40 hover:bg-base-200 text-base-content cursor-pointer px-2 py-1.5 text-xs font-semibold select-none", children: [
+          "Track conversion ",
+          t ? "·  on" : ""
+        ] }),
+        t ? /* @__PURE__ */ r("div", { className: "flex flex-col gap-1.5 p-2", children: [
+          /* @__PURE__ */ a(u, { children: /* @__PURE__ */ a(
+            "select",
+            {
+              value: t.provider,
+              onChange: (e) => {
+                const l = e.target.value, d = { provider: l };
+                l !== "google-ads" && (d.sendTo = void 0), i(d);
+              },
+              className: "h-full w-full bg-transparent px-1 text-xs outline-none",
+              "aria-label": "Conversion provider",
+              children: Object.keys(g).map((e) => /* @__PURE__ */ r("option", { value: e, disabled: !s[e], children: [
+                g[e],
+                s[e] ? "" : "  (set up first)"
+              ] }, e))
+            }
+          ) }),
+          t.provider === "google-ads" ? /* @__PURE__ */ a(u, { children: /* @__PURE__ */ a(
+            "input",
+            {
+              type: "text",
+              defaultValue: t.sendTo || "",
+              onChange: (e) => i({ sendTo: e.target.value }),
+              placeholder: "AW-XXXXXXXXXX/AbCdEfGhIj",
+              className: "h-full w-full bg-transparent px-1 text-xs outline-none",
+              "aria-label": "Conversion send-to label",
+              pattern: "^AW-\\d+/[\\w-]+$"
+            }
+          ) }) : null,
+          t.provider !== "google-ads" ? /* @__PURE__ */ a(u, { children: /* @__PURE__ */ a(
+            "input",
+            {
+              type: "text",
+              defaultValue: t.eventName,
+              onChange: (e) => i({ eventName: e.target.value }),
+              placeholder: "Event name",
+              className: "h-full w-full bg-transparent px-1 text-xs outline-none",
+              "aria-label": "Event name"
+            }
+          ) }) : null,
+          /* @__PURE__ */ r("div", { className: "flex gap-1.5", children: [
+            /* @__PURE__ */ a(u, { children: /* @__PURE__ */ a(
+              "input",
+              {
+                type: "number",
+                step: "0.01",
+                defaultValue: t.value ?? "",
+                onChange: (e) => i({
+                  value: e.target.value === "" ? void 0 : Number(e.target.value)
+                }),
+                placeholder: "Value (optional)",
+                className: "h-full w-full bg-transparent px-1 text-xs outline-none",
+                "aria-label": "Conversion value"
+              }
+            ) }),
+            /* @__PURE__ */ a(u, { children: /* @__PURE__ */ a(
+              "input",
+              {
+                type: "text",
+                defaultValue: t.currency || "",
+                onChange: (e) => i({ currency: e.target.value ? e.target.value.toUpperCase() : void 0 }),
+                placeholder: "USD",
+                maxLength: 3,
+                className: "h-full w-full bg-transparent px-1 text-xs uppercase outline-none",
+                "aria-label": "Currency"
+              }
+            ) })
+          ] }),
+          s[t.provider] ? null : /* @__PURE__ */ r("p", { className: "text-warning text-[10px] leading-snug", children: [
+            g[t.provider],
+            " isn’t set up at the site level. Add its integration ID in your site’s settings or this conversion won’t fire."
+          ] })
+        ] }) : null
+      ]
+    }
+  );
+}
+export {
+  O as C
+};

package/dist/chunks/CraftListEditor-_TIy1ogW.js

@@ -0,0 +1,73 @@
+import { jsx as g } from "react/jsx-runtime";
+import { useEditor as L } from "@craftjs/core";
+import { dS as R, I as S, P as h, dl as j } from "./index-C66dAl3Q.js";
+import { L as w } from "./ListEditor-mD-CmRNE.js";
+function q({
+  parentId: r,
+  childTypeName: s,
+  filterChild: b,
+  mapItem: B,
+  activeIndex: O,
+  setActiveIndex: d,
+  addLabel: A,
+  onAdd: _,
+  renderLabel: p,
+  renderPopover: C,
+  editTooltip: x
+}) {
+  const { actions: a, query: l } = L(), E = R(S), { items: u } = L((e, t) => {
+    try {
+      return { items: (t.node(r).get().data.nodes ?? []).map((n, i) => {
+        try {
+          const f = t.node(n).get();
+          return s && f.data.name !== s || b && !b(f) ? null : { id: n, ...B(f, n, i) };
+        } catch {
+          return null;
+        }
+      }).filter(Boolean) };
+    } catch {
+      return { items: [] };
+    }
+  }), N = (e) => {
+    E.setState(!0);
+    const t = l.parseReactElement(e).toNodeTree();
+    return a.addNodeTree(t, r), d(u.length), requestAnimationFrame(() => E.setState(!1)), t == null ? void 0 : t.rootNodeId;
+  }, c = x === null ? null : x ?? `Edit ${(s == null ? void 0 : s.toLowerCase()) ?? "item"}`;
+  return /* @__PURE__ */ g(
+    w,
+    {
+      items: u,
+      activeIndex: O,
+      setActiveIndex: d,
+      addLabel: A,
+      renderLabel: p,
+      renderPopover: C,
+      onDelete: (e) => a.delete(e.id),
+      onAdd: () => _({ parentId: r, query: l, actions: a, addNode: N }),
+      onReorder: (e, t) => {
+        const o = u, m = o[e];
+        if (!m) return;
+        const n = l.node(r).get().data.nodes ?? [], i = t >= o.length - 1 ? n.indexOf(o[o.length - 1].id) + 1 : n.indexOf(o[t].id);
+        i < 0 || (a.move(m.id, r, i), d(t));
+      },
+      extraButtons: c ? (e) => [
+        /* @__PURE__ */ g(
+          "button",
+          {
+            type: "button",
+            className: "text-base-content hover:text-primary flex items-center justify-center transition-colors",
+            "data-tooltip-id": h,
+            "data-tooltip-content": c,
+            onClick: () => a.selectNode(e.id),
+            "aria-label": c,
+            children: /* @__PURE__ */ g(j, { className: "h-3.5 w-3.5" })
+          },
+          "edit"
+        )
+      ] : void 0
+    }
+  );
+}
+export {
+  q as C
+};