@pagehub/sdk 0.1.4 → 0.1.6

package/dist/chunks/PatternInputPopover-qMWBv_nl.js

@@ -0,0 +1,100 @@
+import { jsxs as A, Fragment as S, jsx as o } from "react/jsx-runtime";
+import { useNode as x } from "@craftjs/core";
+import { useState as I, useMemo as O, Suspense as k, lazy as y } from "react";
+import { C as H, eQ as N, eR as w } from "./index-C66dAl3Q.js";
+import { u as E } from "./usePopoverAutoOpen-CxIjt0ez.js";
+import { u as L } from "./usePopoverPosition-83Vti7Aw.js";
+const T = y(() => import("./PatternPanel-D2fgWDd-.js")), d = 300, z = 460, D = {
+  patternColor1: "rgba(59, 130, 246, 0.8)",
+  patternColor2: "rgba(16, 185, 129, 0.8)",
+  patternColor3: "rgba(245, 101, 101, 0.8)",
+  patternColor4: "rgba(168, 85, 247, 0.8)"
+};
+function R(e) {
+  if (!e) return null;
+  try {
+    return w({
+      root: {
+        pattern: e,
+        patternVerticalPosition: 0,
+        patternHorizontalPosition: 0,
+        patternStroke: 1,
+        patternZoom: 0.4,
+        patternAngle: 0,
+        patternSpacingX: 0,
+        patternSpacingY: 0,
+        ...D
+      }
+    }) || null;
+  } catch {
+    return null;
+  }
+}
+function X({ def: e }) {
+  const [n, l] = I(!1), { triggerRef: m, initialPos: g, setInitialPos: P, computePosition: b } = L(d), {
+    actions: { setProp: f },
+    id: C,
+    pattern: r
+  } = x((t) => {
+    var p, u, c;
+    return {
+      id: t.id,
+      pattern: ((c = (u = (p = t.data) == null ? void 0 : p.props) == null ? void 0 : u.root) == null ? void 0 : c.pattern) || null
+    };
+  }), a = !!r, i = O(() => R(r), [r]), s = () => {
+    P(b()), l(!0);
+  };
+  E({ nodeId: C, defId: e == null ? void 0 : e.id, onOpen: s });
+  const v = () => {
+    f((t) => {
+      t.root && (t.root.pattern = null, delete t.root.patternColor1, delete t.root.patternColor2, delete t.root.patternColor3, delete t.root.patternColor4, delete t.root.patternStroke, delete t.root.patternZoom, delete t.root.patternAngle, delete t.root.patternSpacingX, delete t.root.patternSpacingY, delete t.root.patternVerticalPosition, delete t.root.patternHorizontalPosition);
+    });
+  }, h = (e == null ? void 0 : e.label) ?? "Pattern";
+  return /* @__PURE__ */ A(S, { children: [
+    /* @__PURE__ */ o(
+      H,
+      {
+        mode: "popover",
+        ref: m,
+        label: h,
+        open: n,
+        onTriggerClick: () => n ? l(!1) : s(),
+        onClear: () => {
+          n && l(!1), v();
+        },
+        triggerAriaLabel: a ? "Edit pattern" : "Add pattern",
+        clearAriaLabel: "Clear pattern",
+        variant: a ? "preview" : "default",
+        leading: a ? /* @__PURE__ */ o(
+          "span",
+          {
+            className: "absolute inset-0 bg-cover bg-center",
+            style: i ? { backgroundImage: `url(${i})` } : void 0,
+            "aria-hidden": !0
+          }
+        ) : /* @__PURE__ */ o(N, { className: "size-3.5", "aria-hidden": !0 }),
+        summary: a ? null : "Add...",
+        previewOverlay: a && (r != null && r.title) ? /* @__PURE__ */ o(
+          "span",
+          {
+            className: "bg-base-100/80 text-base-content relative rounded px-1.5 py-0.5 text-[10px] font-semibold shadow-sm",
+            "aria-hidden": !0,
+            children: r.title
+          }
+        ) : null
+      }
+    ),
+    n && /* @__PURE__ */ o(k, { fallback: null, children: /* @__PURE__ */ o(
+      T,
+      {
+        initialPosition: g,
+        onClose: () => l(!1),
+        defaultWidth: d,
+        defaultHeight: z
+      }
+    ) })
+  ] });
+}
+export {
+  X as default
+};

package/dist/chunks/PatternPanel-D2fgWDd-.js

@@ -0,0 +1,352 @@
+import { jsxs as d, jsx as e, Fragment as K } from "react/jsx-runtime";
+import { f as M, F as R } from "./FloatingPanel-DJP5Vhua.js";
+import { useEditor as _, useNode as L } from "@craftjs/core";
+import { u as O, V as B, E as F, C as Y, P as j, aw as G, eR as H, dp as X, bY as Z, c as D, fu as U, e as W, n as g, W as q } from "./index-C66dAl3Q.js";
+import { C as J } from "./ColorInput-BSfMNt86.js";
+import { createPortal as Q } from "react-dom";
+import { useState as v, useRef as E, useMemo as z, useEffect as I } from "react";
+import { M as ee } from "./MiniPreviewTile-B4zxTj9Y.js";
+const P = {
+  patternColor1: "rgba(59, 130, 246, 0.8)",
+  patternColor2: "rgba(16, 185, 129, 0.8)",
+  patternColor3: "rgba(245, 101, 101, 0.8)",
+  patternColor4: "rgba(168, 85, 247, 0.8)"
+}, V = (o) => H({
+  root: {
+    pattern: o,
+    patternVerticalPosition: 0,
+    patternHorizontalPosition: 0,
+    patternStroke: 1,
+    patternZoom: 0.4,
+    patternAngle: 0,
+    patternSpacingX: 0,
+    patternSpacingY: 0,
+    ...P
+  }
+}), te = ({
+  propKey: o,
+  label: u = "",
+  prefix: p = "",
+  index: l = null,
+  propItemKey: m = "",
+  propType: s = "class"
+}) => {
+  const { actions: h, query: f } = _(), N = O(B), b = O(F).dark ?? !1, S = W(N), {
+    actions: { setProp: x },
+    nodeProps: y,
+    id: t
+  } = L((c) => {
+    var r;
+    return {
+      nodeProps: ((r = c.data) == null ? void 0 : r.props) || {},
+      id: c.id
+    };
+  }), [n, i] = v(!1), [C, k] = v(null), w = E(null), a = y.root ? y.root[o] || "" : null, A = z(() => a ? V(a) : null, [a]), $ = () => {
+    var r;
+    const c = (r = w.current) == null ? void 0 : r.getBoundingClientRect();
+    c && k({ top: c.bottom + 4, left: c.left }), i(!0);
+  }, T = (c) => {
+    D({
+      propType: s,
+      propKey: o,
+      value: c,
+      setProp: x,
+      index: l,
+      propItemKey: m,
+      query: f,
+      actions: h,
+      nodeId: t,
+      ...s === "class" ? { view: S, classDark: b } : {}
+    }), c && x((r) => {
+      r.root = r.root || {}, r.root.patternColor1 || (r.root.patternColor1 = P.patternColor1), r.root.patternColor2 || (r.root.patternColor2 = P.patternColor2), r.root.patternColor3 || (r.root.patternColor3 = P.patternColor3), r.root.patternColor4 || (r.root.patternColor4 = P.patternColor4), r.root.patternStroke || (r.root.patternStroke = 1), r.root.patternZoom || (r.root.patternZoom = 1);
+    }, 500);
+  };
+  return /* @__PURE__ */ d("div", { className: "relative", children: [
+    /* @__PURE__ */ e(
+      Y,
+      {
+        propType: s,
+        propKey: o,
+        trailing: a ? /* @__PURE__ */ e(G, { onClick: () => {
+          T(null), i(!1);
+        }, tooltip: "Clear pattern" }) : null,
+        children: /* @__PURE__ */ e(
+          "button",
+          {
+            ref: w,
+            type: "button",
+            "data-tooltip-id": j,
+            "data-tooltip-content": (a == null ? void 0 : a.title) || "Select pattern",
+            id: o ? `input-${o}` : void 0,
+            onClick: () => n ? i(!1) : $(),
+            className: "input-plain flex min-w-0 flex-1 items-center text-left",
+            children: /* @__PURE__ */ d("div", { className: "pointer-events-none flex min-h-0 w-full items-center gap-2", children: [
+              /* @__PURE__ */ e(
+                ee,
+                {
+                  size: "swatch",
+                  rounded: "md",
+                  style: A ? { backgroundImage: `url(${A})` } : void 0
+                }
+              ),
+              /* @__PURE__ */ e("div", { className: "min-w-0 flex-1 truncate text-left", children: (a == null ? void 0 : a.title) || /* @__PURE__ */ e("span", { className: "text-neutral-content", children: "Select pattern" }) })
+            ] })
+          }
+        )
+      }
+    ),
+    n && C && Q(
+      /* @__PURE__ */ e(
+        re,
+        {
+          selected: a == null ? void 0 : a.slug,
+          position: C,
+          triggerRef: w,
+          onSelect: (c) => {
+            T(c), i(!1);
+          },
+          onClose: () => i(!1)
+        }
+      ),
+      document.querySelector(".pagehub-sdk-root") || document.body
+    )
+  ] });
+}, re = ({
+  selected: o,
+  position: u,
+  triggerRef: p,
+  onSelect: l,
+  onClose: m
+}) => {
+  const [s, h] = v(null), [f, N] = v(""), [b, S] = v("all"), x = E(null);
+  M(x), I(() => {
+    const t = U();
+    fetch(`${t}/api/patterns`, {
+      method: "POST",
+      headers: { Accept: "application/json", "Content-Type": "application/json" },
+      body: JSON.stringify({})
+    }).then((n) => n.json()).then((n) => h(Array.isArray(n) ? n : [])).catch(() => {
+    });
+  }, []), I(() => {
+    const t = (n) => {
+      const i = n.target;
+      x.current && x.current.contains(i) || p.current && p.current.contains(i) || m();
+    };
+    return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+  }, [m, p]);
+  const y = z(() => {
+    if (!s) return [];
+    let t = s;
+    if (b !== "all" && (t = t.filter((n) => n.mode === b)), f) {
+      const n = f.toLowerCase();
+      t = t.filter(
+        (i) => {
+          var C;
+          return i.title.toLowerCase().includes(n) || ((C = i.tags) == null ? void 0 : C.some((k) => k.includes(n)));
+        }
+      );
+    }
+    return t;
+  }, [s, b, f]);
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      ref: x,
+      className: "pagehub-sdk-root border-base-300 bg-base-200 fixed z-[1200] w-64 rounded-xl border shadow-xl",
+      style: { top: u.top, left: u.left },
+      children: [
+        /* @__PURE__ */ d("div", { className: "border-base-300 flex items-center gap-1.5 border-b px-2 py-1.5", children: [
+          /* @__PURE__ */ e(X, { className: "text-neutral-content size-3.5 shrink-0" }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "text",
+              placeholder: "Search patterns...",
+              value: f,
+              onChange: (t) => N(t.target.value),
+              className: "placeholder:text-neutral-content w-full bg-transparent text-xs outline-none",
+              autoFocus: !0
+            }
+          ),
+          f && /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: () => N(""),
+              className: "text-neutral-content hover:text-base-content",
+              children: /* @__PURE__ */ e(Z, { className: "size-3" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ d("div", { className: "border-base-300 flex gap-1 border-b px-2 py-1", children: [
+          ["all", "stroke", "fill"].map((t) => /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: () => S(t),
+              className: `rounded px-2 py-0.5 text-[10px] font-medium transition-colors ${b === t ? "bg-primary text-primary-content" : "text-neutral-content hover:bg-neutral"}`,
+              children: t.charAt(0).toUpperCase() + t.slice(1)
+            },
+            t
+          )),
+          /* @__PURE__ */ e("span", { className: "text-neutral-content ml-auto self-center text-[10px]", children: y.length })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "scrollbar-light max-h-48 overflow-y-auto", children: s ? y.length === 0 ? /* @__PURE__ */ e("div", { className: "text-neutral-content px-3 py-6 text-center text-xs", children: "No patterns found" }) : y.map((t) => {
+          const n = V(t);
+          return /* @__PURE__ */ d(
+            "button",
+            {
+              onClick: () => l(t),
+              className: `hover:bg-neutral flex w-full items-center gap-2 px-2 py-1 text-left transition-colors ${o === t.slug ? "bg-primary/10" : ""}`,
+              children: [
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: "border-base-300 bg-base-200 h-10 w-16 shrink-0 rounded border",
+                    style: { backgroundImage: n ? `url(${n})` : void 0 }
+                  }
+                ),
+                /* @__PURE__ */ e("span", { className: "truncate text-xs", children: t.title })
+              ]
+            },
+            t.slug
+          );
+        }) : /* @__PURE__ */ e("div", { className: "text-neutral-content px-3 py-6 text-center text-xs", children: "Loading..." }) })
+      ]
+    }
+  );
+};
+function oe() {
+  var u, p;
+  const { pattern: o } = L((l) => {
+    var m, s, h;
+    return {
+      pattern: ((h = (s = (m = l.data) == null ? void 0 : m.props) == null ? void 0 : s.root) == null ? void 0 : h.pattern) || null
+    };
+  });
+  return /* @__PURE__ */ d("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ e(te, { propKey: "pattern", propType: "root" }),
+    o && /* @__PURE__ */ d(K, { children: [
+      /* @__PURE__ */ e("div", { className: "flex flex-col gap-1", children: [...Array(Math.max(0, +o.colors - 1)).keys()].map((l) => /* @__PURE__ */ e(
+        J,
+        {
+          propKey: `patternColor${l + 1}`,
+          label: `Color ${l + 1}`,
+          prefix: "",
+          propType: "root",
+          inline: !0
+        },
+        l
+      )) }),
+      /* @__PURE__ */ d("div", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ e(
+          g,
+          {
+            propKey: "patternZoom",
+            propType: "root",
+            type: "slider",
+            label: "Scale",
+            max: o.maxScale,
+            min: 1
+          }
+        ),
+        /* @__PURE__ */ e(
+          g,
+          {
+            propKey: "patternStroke",
+            propType: "root",
+            type: "slider",
+            label: "Stroke",
+            max: o.maxStroke || 5,
+            min: 0.5,
+            step: 0.5
+          }
+        ),
+        /* @__PURE__ */ e(
+          g,
+          {
+            propKey: "patternAngle",
+            propType: "root",
+            type: "slider",
+            label: "Angle",
+            max: 180,
+            min: 0
+          }
+        ),
+        /* @__PURE__ */ e(
+          g,
+          {
+            propKey: "patternSpacingX",
+            propType: "root",
+            type: "slider",
+            label: "X Gap",
+            max: ((u = o.maxSpacing) == null ? void 0 : u[0]) || 10,
+            min: 0
+          }
+        ),
+        /* @__PURE__ */ e(
+          g,
+          {
+            propKey: "patternSpacingY",
+            propType: "root",
+            type: "slider",
+            label: "Y Gap",
+            max: ((p = o.maxSpacing) == null ? void 0 : p[1]) || 10,
+            min: 0
+          }
+        ),
+        /* @__PURE__ */ e(
+          g,
+          {
+            propKey: "patternVerticalPosition",
+            propType: "root",
+            type: "slider",
+            label: "Offset Y",
+            max: 0,
+            min: -120
+          }
+        ),
+        /* @__PURE__ */ e(
+          g,
+          {
+            propKey: "patternHorizontalPosition",
+            propType: "root",
+            type: "slider",
+            label: "Offset X",
+            max: 0,
+            min: -120
+          }
+        )
+      ] })
+    ] }),
+    !o && /* @__PURE__ */ e("p", { className: "text-neutral-content py-2 text-center text-xs", children: "Select a pattern above to edit colors and settings." })
+  ] });
+}
+function me({
+  initialPosition: o,
+  onClose: u,
+  defaultWidth: p,
+  defaultHeight: l
+}) {
+  return /* @__PURE__ */ e(
+    R,
+    {
+      isOpen: !0,
+      onClose: u,
+      title: "Pattern",
+      storageKey: "pattern-input",
+      autoSize: !1,
+      defaultWidth: p,
+      defaultHeight: l,
+      minWidth: 260,
+      maxWidth: 420,
+      minHeight: 200,
+      initialPosition: o,
+      persistSize: !1,
+      zIndex: q,
+      scrollable: !0,
+      children: /* @__PURE__ */ e(oe, {})
+    }
+  );
+}
+export {
+  me as default
+};

package/dist/chunks/PeekTargetButton-ClrJX7zh.js

@@ -0,0 +1,26 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useEditor as f } from "@craftjs/core";
+import { f4 as m, f5 as g, P as h, dr as u, f6 as p, f7 as w } from "./index-C66dAl3Q.js";
+import { r as S } from "./resolveAnchorsViaCraft-Cixm6ZyJ.js";
+function E({ target: s, size: r = "lg", ownerNodeId: n }) {
+  m();
+  const { query: i, selectedId: a } = f((y, b) => ({
+    selectedId: b.getEvent("selected").first()
+  })), e = S(s, n ?? a, i), d = !e, t = e ? g(e) === "shown" : !1, c = r === "sm" ? "size-5 rounded-md" : "px-2 rounded-md border border-base-300 bg-base-200/50", l = t ? u : p;
+  return /* @__PURE__ */ o(
+    "button",
+    {
+      type: "button",
+      disabled: d,
+      onClick: () => e && w(e),
+      "data-tooltip-id": h,
+      "data-tooltip-content": t ? "Hide target in editor" : "Show target in editor",
+      className: `text-neutral-content hover:bg-base-200 hover:text-base-content inline-flex shrink-0 items-center justify-center transition-colors disabled:opacity-40 ${c}`,
+      "aria-label": t ? "Hide target in editor" : "Show target in editor",
+      children: /* @__PURE__ */ o(l, { className: "size-3.5" })
+    }
+  );
+}
+export {
+  E as P
+};

package/dist/chunks/PermissionsSection-DwobrV40.js

@@ -0,0 +1,82 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { useNode as h, useEditor as f } from "@craftjs/core";
+import { P as b, di as u } from "./index-C66dAl3Q.js";
+const a = [];
+function x(t) {
+  const n = a.findIndex((r) => r.id === t.id);
+  n >= 0 ? a[n] = t : a.push(t);
+}
+const k = [
+  { key: "canDrag", label: "Can drag", description: "Allow this node to be dragged" },
+  { key: "canDelete", label: "Can delete", description: "Allow this node to be deleted" },
+  { key: "canMoveIn", label: "Can drop into", description: "Allow children to be dropped in" },
+  {
+    key: "canMoveOut",
+    label: "Can move children out",
+    description: "Allow children to be moved out"
+  }
+];
+function v() {
+  const { id: t, permissions: n, isCanvas: r } = h((e) => {
+    var s;
+    return {
+      id: e.id,
+      permissions: ((s = e.data.custom) == null ? void 0 : s.permissions) || {},
+      isCanvas: !!e.data.isCanvas
+    };
+  }), { actions: p } = f(), m = (e) => {
+    const d = n[e] === !1 ? void 0 : !1;
+    p.setCustom(t, (i) => {
+      i.permissions || (i.permissions = {}), d === void 0 ? (delete i.permissions[e], Object.keys(i.permissions).length === 0 && delete i.permissions) : i.permissions[e] = d;
+    });
+  };
+  if (t === "ROOT") return null;
+  const l = k.filter((e) => e.key === "canMoveIn" || e.key === "canMoveOut" ? r : !0), g = l.some((e) => n[e.key] === !1);
+  return /* @__PURE__ */ c("div", { className: "flex flex-col gap-1", children: [
+    g && /* @__PURE__ */ o("p", { className: "text-warning mb-1 text-[10px] leading-tight", children: "Some actions are locked on this node." }),
+    l.map((e) => {
+      const s = n[e.key] === !1;
+      return /* @__PURE__ */ c(
+        "label",
+        {
+          className: "hover:bg-base-200/60 flex cursor-pointer items-center justify-between gap-2 rounded px-1.5 py-1 transition-colors",
+          "data-tooltip-id": b,
+          "data-tooltip-content": e.description,
+          children: [
+            /* @__PURE__ */ o(
+              "span",
+              {
+                className: `text-xs select-none ${s ? "text-base-content/50 line-through" : "text-base-content"}`,
+                children: e.label
+              }
+            ),
+            /* @__PURE__ */ o(
+              "input",
+              {
+                type: "checkbox",
+                checked: !s,
+                onChange: () => m(e.key),
+                className: "toggle toggle-xs toggle-primary"
+              }
+            )
+          ]
+        },
+        e.key
+      );
+    })
+  ] });
+}
+x({
+  id: "permissions",
+  title: "Permissions",
+  tab: "advanced",
+  icon: /* @__PURE__ */ o(u, {}),
+  keywords: ["permission", "lock", "drag", "delete", "edit", "move", "protect", "restrict"],
+  component: v,
+  sortOrder: 200,
+  defaultOpen: !1,
+  help: "Lock down what can be done with this node — prevent dragging, deleting, or dropping children."
+});
+export {
+  v as PermissionsSection
+};

package/dist/chunks/PresetAddChildList-D6a0xdt8.js

@@ -0,0 +1,35 @@
+import { jsx as p } from "react/jsx-runtime";
+import { useNode as c } from "@craftjs/core";
+import { d as u, aE as f, fh as b } from "./index-C66dAl3Q.js";
+import { C as I } from "./CraftListEditor-_TIy1ogW.js";
+const L = f("preset_addchild_selected", null);
+function x(A) {
+  const { id: l, presetName: m } = c((e) => {
+    var s, a;
+    return {
+      presetName: (a = (s = e.data) == null ? void 0 : s.custom) == null ? void 0 : a.preset
+    };
+  }), [n, i] = u(L), r = b(m), t = r == null ? void 0 : r.addChild;
+  return t ? /* @__PURE__ */ p(
+    I,
+    {
+      parentId: l,
+      mapItem: (e, s, a) => {
+        var d, o;
+        return {
+          label: t.childLabel ? t.childLabel(e, a) : ((o = (d = e == null ? void 0 : e.data) == null ? void 0 : d.custom) == null ? void 0 : o.displayName) || `Item ${a + 1}`
+        };
+      },
+      activeIndex: n,
+      setActiveIndex: i,
+      addLabel: t.label,
+      onAdd: ({ addNode: e }) => e(t.template()),
+      renderLabel: (e) => e.label,
+      renderPopover: () => null,
+      editTooltip: "Open in editor"
+    }
+  ) : null;
+}
+export {
+  x as PresetAddChildList
+};