@pagehub/sdk 0.1.4 → 0.1.6

package/dist/chunks/ComponentImportExportPanel-DVcnGhGx.js

@@ -0,0 +1,161 @@
+import { jsxs as o, jsx as t, Fragment as s } from "react/jsx-runtime";
+import { F as S } from "./FloatingPanel-DJP5Vhua.js";
+import { useNode as T, useEditor as E } from "@craftjs/core";
+import { useState as p } from "react";
+import { T as I, dC as g, dm as h, al as z, a_ as i, W as J } from "./index-C66dAl3Q.js";
+import { C as N } from "./CodeEditor-axBXmPH8.js";
+const k = ({ className: l = "" }) => {
+  const { id: a } = T(), { actions: d, query: r } = E(), [n, b] = p(""), [c, m] = p(""), [x, f] = p("export"), y = () => {
+    try {
+      const e = r.node(a).toNodeTree(), O = Object.keys(e.nodes).map((u) => [
+        u,
+        r.node(u).toSerializedNode()
+      ]);
+      m(
+        JSON.stringify(
+          {
+            rootNodeId: e.rootNodeId,
+            nodes: Object.fromEntries(O),
+            componentName: r.node(a).get().data.displayName || r.node(a).get().data.name || "Component",
+            timestamp: (/* @__PURE__ */ new Date()).toISOString()
+          },
+          null,
+          2
+        )
+      );
+    } catch (e) {
+      i.error("Error generating component JSON:", e), m("Error generating JSON");
+    }
+  }, C = () => {
+    if (n.trim())
+      try {
+        const e = JSON.parse(n);
+        e.nodes && e.rootNodeId ? (d.deserialize(JSON.stringify(e)), b("")) : i.error("Invalid component data structure");
+      } catch (e) {
+        i.error("Error importing component:", e);
+      }
+  }, v = () => {
+    navigator.clipboard.writeText(c).catch((e) => i.error("Failed to copy:", e));
+  };
+  return /* @__PURE__ */ o("div", { className: `space-y-2 ${l}`, children: [
+    /* @__PURE__ */ t(
+      I,
+      {
+        "aria-label": "Import or export component JSON",
+        value: x,
+        onChange: (e) => f(e),
+        options: [
+          {
+            value: "export",
+            label: /* @__PURE__ */ o(s, { children: [
+              /* @__PURE__ */ t(g, { className: "size-3.5 shrink-0" }),
+              "Export"
+            ] })
+          },
+          {
+            value: "import",
+            label: /* @__PURE__ */ o(s, { children: [
+              /* @__PURE__ */ t(h, { className: "size-3.5 shrink-0" }),
+              "Import"
+            ] })
+          }
+        ]
+      }
+    ),
+    x === "export" ? /* @__PURE__ */ o(s, { children: [
+      /* @__PURE__ */ o("div", { className: "flex gap-1.5", children: [
+        /* @__PURE__ */ o(
+          "button",
+          {
+            onClick: y,
+            className: "border-base-300 bg-base-200 text-base-content hover:bg-base-300/25 flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs font-medium transition-colors",
+            children: [
+              /* @__PURE__ */ t(g, { className: "size-3.5" }),
+              "Generate JSON"
+            ]
+          }
+        ),
+        /* @__PURE__ */ o(
+          "button",
+          {
+            onClick: v,
+            disabled: !c,
+            className: "border-base-300 bg-base-200 text-base-content hover:bg-base-300/25 flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+            children: [
+              /* @__PURE__ */ t(z, { className: "size-3.5" }),
+              "Copy"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t(
+        N,
+        {
+          value: c,
+          onChange: m,
+          language: "javascript",
+          height: "150px",
+          readOnly: !0,
+          lineNumbers: !1,
+          theme: "auto",
+          placeholder: "Click 'Generate JSON'..."
+        }
+      )
+    ] }) : /* @__PURE__ */ o(s, { children: [
+      /* @__PURE__ */ t(
+        N,
+        {
+          value: n,
+          onChange: b,
+          language: "javascript",
+          height: "150px",
+          lineNumbers: !1,
+          theme: "auto",
+          placeholder: "Paste component JSON here..."
+        }
+      ),
+      /* @__PURE__ */ o(
+        "button",
+        {
+          onClick: C,
+          disabled: !n.trim(),
+          className: "border-base-300 bg-base-200 text-base-content hover:bg-base-300/25 flex w-full items-center justify-center gap-1.5 rounded-md border px-2 py-1.5 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+          children: [
+            /* @__PURE__ */ t(h, { className: "size-3.5" }),
+            "Import Component"
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+function _({
+  initialPosition: l,
+  onClose: a,
+  defaultWidth: d,
+  defaultHeight: r
+}) {
+  return /* @__PURE__ */ t(
+    S,
+    {
+      isOpen: !0,
+      onClose: a,
+      title: "Import / Export",
+      storageKey: "component-import-export",
+      autoSize: !1,
+      defaultWidth: d,
+      defaultHeight: r,
+      minWidth: 340,
+      maxWidth: 640,
+      minHeight: 360,
+      initialPosition: l,
+      persistSize: !1,
+      zIndex: J,
+      scrollable: !0,
+      children: /* @__PURE__ */ t(k, {})
+    }
+  );
+}
+export {
+  _ as default
+};

package/dist/chunks/ComponentImportExportPopover-BY1_oxU8.js

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

package/dist/chunks/ConditionEditorPanel-DLbqYaSF.js

@@ -0,0 +1,43 @@
+import { jsx as t } from "react/jsx-runtime";
+import { F as a } from "./FloatingPanel-DJP5Vhua.js";
+import { u as l } from "./useElementPicker-DoNuXNMQ.js";
+import { c } from "./ConditionsInput-B_5Nge8o.js";
+import { W as d } from "./index-C66dAl3Q.js";
+function u() {
+  return [];
+}
+function O({
+  cond: n,
+  onChange: r,
+  initialPosition: i,
+  onClose: e
+}) {
+  const o = l("all"), s = Array.isArray(o) ? o : [], m = u();
+  return /* @__PURE__ */ t(
+    a,
+    {
+      isOpen: !0,
+      onClose: e,
+      title: "Condition",
+      storageKey: "condition-editor",
+      minWidth: 300,
+      maxWidth: 480,
+      minHeight: 240,
+      initialPosition: i,
+      zIndex: d,
+      scrollable: !0,
+      children: /* @__PURE__ */ t(
+        c,
+        {
+          cond: n,
+          onChange: r,
+          formElements: s,
+          connectorOptions: m
+        }
+      )
+    }
+  );
+}
+export {
+  O as default
+};

package/dist/chunks/ConditionsAddPicker-SsHJlc1E.js

@@ -0,0 +1,54 @@
+import { jsx as d } from "react/jsx-runtime";
+import { useNode as f } from "@craftjs/core";
+import { useRef as P } from "react";
+import { e9 as S, d as b, G as g } from "./index-C66dAl3Q.js";
+import { S as h } from "./SearchableMenuPopover-DZKVXiEl.js";
+import { g as v } from "./propertyRegistry-CMhVNOgl.js";
+import { P as A, u as O, r as R } from "./popoverOpenRequestAtom-hBS_siXv.js";
+import { d as q } from "./ConditionsInput-B_5Nge8o.js";
+const C = [
+  { id: "url-param", label: "URL Parameter", data: "url-param" },
+  { id: "form-field", label: "Form Field", data: "form-field" },
+  { id: "connector", label: "Connector", data: "connector" },
+  { id: "company", label: "Company Variable", data: "company" },
+  { id: "device", label: "Device / Viewport", data: "device" },
+  { id: "auth", label: "Auth Status", data: "auth" },
+  { id: "localStorage", label: "Local Storage", data: "localStorage" }
+], D = "conditions";
+function w({ def: a }) {
+  var c;
+  const {
+    id: n,
+    actions: { setProp: l }
+  } = f((o) => ({ id: o.id })), t = S(), r = (c = v(a.section)) == null ? void 0 : c.title, [u, m] = b(A), s = P(null);
+  return O(
+    n,
+    a.id,
+    () => requestAnimationFrame(() => {
+      var o;
+      return (o = s.current) == null ? void 0 : o.open();
+    })
+  ), /* @__PURE__ */ d(
+    h,
+    {
+      ref: s,
+      items: C,
+      onSelect: (o) => {
+        if (!o.data) return;
+        const p = q(o.data);
+        l((e) => {
+          const i = Array.isArray(e.conditions) ? [...e.conditions] : [];
+          i.push(p), e.conditions = i, e.conditionLogic = "all", e.conditionGroups !== void 0 && (e.conditionGroups = i.length > 0 ? [{ conditions: i, logic: "all" }] : []);
+        }), r && (t != null && t.setOpen) && t.setOpen(r, !0), R(u, m, n, D);
+      },
+      trigger: /* @__PURE__ */ d(g, { className: "size-3.5", "aria-hidden": !0 }),
+      triggerAriaLabel: "Add condition",
+      searchPlaceholder: "Search conditions…",
+      anchor: "bottom end",
+      panelWidthClass: "w-56"
+    }
+  );
+}
+export {
+  w as default
+};