@pagehub/sdk 0.1.0

package/dist/chunks/PatternDialog-Cg6ogjGC.js

@@ -0,0 +1,371 @@
+import { jsx as r, Fragment as ee, jsxs as h } from "react/jsx-runtime";
+import { useRef as q, useState as f, useEffect as $, useMemo as Y } from "react";
+import { F as te } from "./index.esm-D_S2hDar.js";
+import { u as Q, D as ne, E as re, G as le, o as oe, c as ae, H as Z, I as se, J as ie } from "./index-lNS44FHV.js";
+import ce from "react-dom";
+const de = ({
+  dialogName: o,
+  dialogAtom: F,
+  items: m = [],
+  height: g = 320,
+  width: c = 320,
+  callback: A = null,
+  value: S = "",
+  children: E = null,
+  className: y = "",
+  zIndex: b = 1e3,
+  draggable: d = !1,
+  title: w = null,
+  icon: j = null,
+  positioning: D = "dynamic",
+  // "dynamic" follows input, "static" remembers last position
+  onSearch: I = (l, v) => l.search(new RegExp(v.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "i")) > -1,
+  customOnSearch: H = null,
+  customRenderer: C = null
+}) => {
+  const [l, v] = Q(F);
+  ne(re);
+  const t = q(null), e = l.e, [a, P] = f(m), [i, W] = f(null), [U, J] = f(!1), [B, _] = f(!1), [k, V] = f(-1), x = le({
+    initialPosition: D === "static" && e ? { x: e.left, y: e.bottom + 6 } : e ? { x: e.left, y: e.bottom + 6 } : { x: 100, y: 100 },
+    bounds: { top: 0, right: 0, bottom: 0, left: 0 }
+  }), [X, O] = f({
+    top: 0,
+    left: 0,
+    zIndex: b
+  }), [z, G] = f(!1);
+  $(() => {
+    if (!e || !B) return;
+    if (d) {
+      D === "static" || z ? O({
+        position: "fixed",
+        top: x.position.y,
+        left: x.position.x,
+        zIndex: b,
+        maxHeight: Math.min(g, window.innerHeight * 0.6)
+      }) : (x.setPosition({
+        x: e.left,
+        y: e.bottom + 6
+      }), O({
+        position: "fixed",
+        top: e.bottom + 6,
+        left: e.left,
+        zIndex: b,
+        maxHeight: Math.min(g, window.innerHeight * 0.6)
+      }));
+      return;
+    }
+    const n = window.innerHeight - e.bottom - 20, u = Math.min(g, n, window.innerHeight * 0.6), s = c, N = window.innerWidth - e.left - 20;
+    let p = e.left;
+    N < s && (p = Math.max(20, window.innerWidth - s - 20));
+    let L = {
+      top: e.bottom + 6,
+      left: p,
+      zIndex: b,
+      maxHeight: u
+    };
+    n < 200 ? (J(!0), L = {
+      bottom: window.innerHeight - e.top + 6,
+      left: p,
+      zIndex: b,
+      maxHeight: Math.min(g, e.top - 20, window.innerHeight * 0.6)
+    }) : J(!1), O(L);
+  }, [
+    e,
+    g,
+    c,
+    b,
+    B,
+    d,
+    x.position.x,
+    x.position.y,
+    x.setPosition,
+    D,
+    z
+  ]);
+  const R = () => {
+    W(null), P(m), V(-1), v({ ...l, enabled: !1 }), G(!1);
+  }, M = (n) => {
+    l.changed && (v({ ...l, value: n, enabled: !1 }), l.changed(n));
+  }, T = (n) => {
+    W(n.target.value), V(-1), H ? H(n.target.value) : P(m.filter((u) => I(u, n.target.value)));
+  };
+  $(() => {
+    _(!0);
+  }, []), $(() => {
+    const n = (s) => {
+      if (!t.current) return;
+      const N = s.target.closest("[data-tooltip-id]") || s.target.closest('[role="tooltip"]'), p = t.current.querySelector(".pointer-events-auto");
+      !((p == null ? void 0 : p.contains(s.target)) || t.current.contains(s.target)) && !N && R();
+    }, u = (s) => {
+      if (s.key === "ArrowDown") {
+        s.preventDefault();
+        const N = (i ? 0 : 1) + a.length;
+        V((p) => Math.min(p + 1, N - 1));
+      } else s.key === "ArrowUp" ? (s.preventDefault(), V((N) => Math.max(N - 1, -1))) : s.key === "Enter" && (s.preventDefault(), k === -1 && !i ? M(null) : k >= 0 && a[k] && M(a[k]));
+    };
+    return document.addEventListener("click", n, !0), document.addEventListener("keydown", u, !0), () => {
+      document.removeEventListener("click", n, !0), document.removeEventListener("keydown", u, !0);
+    };
+  }, [l.enabled]), oe({
+    id: `dialog:${o}`,
+    isOpen: !!l.enabled,
+    onDismiss: R
+  });
+  const K = q(null);
+  return $(() => {
+    if (l.value) {
+      const n = document.getElementById(`${o}-${S}`);
+      n && K.current && K.current.scrollTo({ top: n.offsetTop });
+    }
+  }, [l.enabled, l.value, o, t, S]), typeof document > "u" || !B ? null : ce.createPortal(
+    /* @__PURE__ */ r(ee, { children: l.enabled && /* @__PURE__ */ r(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": o || "Selection dialog",
+        id: o,
+        ref: d ? x.windowRef : t,
+        style: X,
+        className: "pagehub-sdk-root pointer-events-none absolute z-20 flex",
+        children: /* @__PURE__ */ h(
+          "div",
+          {
+            className: "ph-panel pointer-events-auto my-auto w-full overflow-hidden p-0",
+            style: { maxHeight: X.maxHeight || g },
+            children: [
+              d && /* @__PURE__ */ h(
+                "div",
+                {
+                  role: "presentation",
+                  "aria-hidden": "true",
+                  className: "border-base-300 bg-accent text-accent-content flex cursor-move touch-none items-center justify-between border-b px-3 py-2",
+                  onPointerDown: (n) => {
+                    G(!0), x.handlePointerDown(n);
+                  },
+                  children: [
+                    /* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
+                      j && /* @__PURE__ */ r("span", { className: "text-lg", children: j }),
+                      /* @__PURE__ */ r("span", { children: w || o || "Dialog" })
+                    ] }),
+                    /* @__PURE__ */ r(
+                      "button",
+                      {
+                        onClick: R,
+                        className: "text-accent-content hover:bg-accent-content/10 flex items-center justify-center rounded-md p-1 transition-colors",
+                        "aria-label": "Close",
+                        children: /* @__PURE__ */ r(ae, {})
+                      }
+                    )
+                  ]
+                }
+              ),
+              E,
+              C && /* @__PURE__ */ h("div", { className: "flex size-full flex-col overflow-hidden rounded-lg", children: [
+                !U && !d && /* @__PURE__ */ r("div", { className: "border-base-300 bg-neutral shrink-0 border-b px-2 pt-2 pb-1", children: /* @__PURE__ */ r(
+                  "input",
+                  {
+                    type: "text",
+                    className: "input-dialog-sm",
+                    placeholder: "Search fonts...",
+                    onKeyUp: (n) => T(n),
+                    autoFocus: !0,
+                    defaultValue: i,
+                    "aria-label": "Search"
+                  }
+                ) }),
+                /* @__PURE__ */ r("div", { className: "scrollbar-light min-h-0 flex-1 overflow-y-auto px-2 pb-2", children: C }),
+                U && !d && /* @__PURE__ */ r("div", { className: "border-base-300 bg-neutral shrink-0 border-t px-2 pt-1 pb-2", children: /* @__PURE__ */ r(
+                  "input",
+                  {
+                    type: "text",
+                    className: "input-dialog-sm",
+                    placeholder: "Search fonts...",
+                    onKeyUp: (n) => T(n),
+                    autoFocus: !0,
+                    defaultValue: i,
+                    "aria-label": "Search"
+                  }
+                ) })
+              ] }),
+              !E && !C && /* @__PURE__ */ h("div", { className: "flex size-full flex-col overflow-hidden rounded-lg", children: [
+                !U && !d && /* @__PURE__ */ r("div", { className: "border-base-300 bg-neutral shrink-0 border-b px-2 pt-2 pb-1", children: /* @__PURE__ */ r(
+                  "input",
+                  {
+                    type: "text",
+                    className: "input-dialog-sm",
+                    placeholder: "Search fonts...",
+                    onKeyUp: (n) => T(n),
+                    autoFocus: !0,
+                    defaultValue: i,
+                    "aria-label": "Search"
+                  }
+                ) }),
+                /* @__PURE__ */ h(
+                  "div",
+                  {
+                    ref: K,
+                    className: "scrollbar-light min-h-0 flex-1 overflow-y-auto px-2 py-1",
+                    children: [
+                      !i && /* @__PURE__ */ r(
+                        "button",
+                        {
+                          className: `text-neutral-content hover:bg-neutral flex w-full cursor-pointer flex-row rounded-md p-1 text-xs transition-colors ${k === -1 ? "bg-primary text-primary-content" : ""}`,
+                          onClick: (n) => M(null),
+                          children: "Default"
+                        }
+                      ),
+                      !a.length && i && /* @__PURE__ */ r("div", { className: "text-neutral-content hover:bg-neutral flex w-full cursor-pointer flex-row rounded-md p-1 text-xs", children: "No results." }),
+                      /* @__PURE__ */ r("div", { className: y, children: a == null ? void 0 : a.map((n, u) => A ? A(n, u) : /* @__PURE__ */ r(
+                        "button",
+                        {
+                          id: `font-${n}`,
+                          className: `text-neutral-content hover:bg-neutral flex w-full cursor-pointer flex-row rounded-md p-1 text-xs transition-colors ${l.value === n ? "bg-primary text-primary-content" : k === u ? "bg-neutral" : ""}`,
+                          style: { fontFamily: (n || []).join(", ") },
+                          onClick: (s) => M(n),
+                          children: n.join(", ")
+                        },
+                        u
+                      )) })
+                    ]
+                  }
+                ),
+                U && !d && /* @__PURE__ */ r("div", { className: "border-base-300 bg-neutral shrink-0 border-t px-2 pt-1 pb-2", children: /* @__PURE__ */ r(
+                  "input",
+                  {
+                    type: "text",
+                    className: "input-dialog-sm",
+                    placeholder: "Search fonts...",
+                    onKeyUp: (n) => T(n),
+                    autoFocus: !0,
+                    defaultValue: i,
+                    "aria-label": "Search"
+                  }
+                ) })
+              ] })
+            ]
+          }
+        )
+      },
+      o
+    ) }),
+    document.querySelector(".pagehub-sdk-root") || document.body
+  );
+}, ge = () => {
+  var v;
+  const [o, F] = Q(Z), [m, g] = f([]), [c, A] = f("all"), [S, E] = f(""), y = q(null);
+  $(() => {
+    const t = se();
+    fetch(`${t}/api/patterns`, {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({})
+    }).then((e) => e.json()).then((e) => g(Array.isArray(e) ? e : [])).catch(() => {
+    });
+  }, []);
+  const b = (t) => {
+    o.changed && (F({ ...o, value: t, enabled: !1 }), o.changed(t));
+  }, d = Y(() => {
+    const t = /* @__PURE__ */ new Set();
+    return m.forEach((e) => {
+      e.tags && e.tags.length > 0 && e.tags.forEach((a) => t.add(a));
+    }), ["all", "stroke", "fill", ...Array.from(t).sort()].slice(0, 10);
+  }, [m]), w = Y(() => {
+    let t = m;
+    return c !== "all" && (c === "stroke" || c === "fill" ? t = t.filter((e) => e.mode === c) : t = t.filter((e) => e.tags && e.tags.includes(c))), S && (t = t.filter(
+      (e) => e.title.search(new RegExp(S.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "i")) > -1
+    )), t;
+  }, [m, c, S]), j = (t) => {
+    E(t), y.current && y.current.scrollTo(0);
+  }, D = (t) => {
+    A(t), y.current && y.current.scrollTo(0);
+  }, I = 400, H = 400, C = 50, l = ({ index: t, style: e }) => {
+    var i;
+    const a = w[t], P = ie({
+      root: {
+        pattern: a,
+        patternVerticalPosition: 0,
+        patternHorizontalPosition: 0,
+        patternStroke: 1,
+        patternZoom: 0,
+        patternAngle: 0,
+        patternSpacingX: 0,
+        patternSpacingY: 0,
+        patternColor1: "rgba(59, 130, 246, 0.8)",
+        // Blue
+        patternColor2: "rgba(16, 185, 129, 0.8)",
+        // Green
+        patternColor3: "rgba(245, 101, 101, 0.8)",
+        // Red
+        patternColor4: "rgba(168, 85, 247, 0.8)"
+        // Purple
+      }
+    });
+    return /* @__PURE__ */ r("div", { style: e, children: /* @__PURE__ */ r(
+      "button",
+      {
+        id: `pattern-${a.slug}`,
+        className: `text-neutral-content hover:bg-neutral flex w-full cursor-pointer flex-row rounded-md p-1 text-xs transition-colors ${((i = o.value) == null ? void 0 : i.slug) === a.slug ? "bg-primary text-primary-content" : ""}`,
+        onClick: (W) => b(a),
+        children: /* @__PURE__ */ h("div", { className: "pointer-events-none flex h-6 w-full items-center justify-between gap-3", children: [
+          /* @__PURE__ */ r("div", { className: "w-1/2 truncate whitespace-nowrap", children: a.title }),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: "border-base-300 bg-neutral h-full w-1/2 rounded-lg border",
+              style: {
+                backgroundImage: P ? `url(${P})` : null
+              }
+            }
+          )
+        ] })
+      }
+    ) });
+  };
+  return /* @__PURE__ */ r(
+    de,
+    {
+      dialogAtom: Z,
+      dialogName: "pattern",
+      value: (v = o == null ? void 0 : o.value) == null ? void 0 : v.slug,
+      items: w,
+      height: H + 120,
+      customOnSearch: j,
+      customRenderer: /* @__PURE__ */ h("div", { className: "flex h-full flex-col overflow-hidden", children: [
+        /* @__PURE__ */ r("div", { className: "scrollbar-light mb-2 max-h-20 shrink-0 overflow-y-auto", children: /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-1.5", children: d.map((t) => /* @__PURE__ */ r(
+          "button",
+          {
+            className: `rounded-lg px-2.5 py-1 text-xs font-medium transition-colors ${c === t ? "bg-primary text-primary-content" : "bg-neutral text-neutral-content hover:bg-neutral/80"}`,
+            onClick: () => D(t),
+            children: t.charAt(0).toUpperCase() + t.slice(1)
+          },
+          t
+        )) }) }),
+        /* @__PURE__ */ h("div", { className: "text-neutral-content mb-2 shrink-0 text-xs", children: [
+          w.length,
+          " pattern",
+          w.length !== 1 ? "s" : ""
+        ] }),
+        /* @__PURE__ */ r("div", { className: "-mx-3 min-h-0 flex-1 overflow-hidden px-3", children: /* @__PURE__ */ r(
+          te,
+          {
+            ref: y,
+            height: H,
+            itemCount: w.length,
+            itemSize: C,
+            width: I - 24,
+            className: "scrollbar-light",
+            children: l
+          }
+        ) })
+      ] })
+    }
+  );
+};
+export {
+  ge as PatternDialog,
+  Z as PatternDialogAtom
+};

package/dist/chunks/PatternInputPopover-D3Nuin-m.js

@@ -0,0 +1,99 @@
+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 { cg as H, c1 as N, dJ as w, J as E } from "./index-lNS44FHV.js";
+import { u as L } from "./usePopoverAutoOpen-BJbJARN-.js";
+const T = y(() => import("./PatternPanel-Cp7uNwee.js")), u = 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 _(e) {
+  if (!e) return null;
+  try {
+    return E({
+      root: {
+        pattern: e,
+        patternVerticalPosition: 0,
+        patternHorizontalPosition: 0,
+        patternStroke: 1,
+        patternZoom: 0.4,
+        patternAngle: 0,
+        patternSpacingX: 0,
+        patternSpacingY: 0,
+        ...D
+      }
+    }) || null;
+  } catch {
+    return null;
+  }
+}
+function V({ def: e }) {
+  const [n, l] = I(!1), { triggerRef: g, initialPos: m, setInitialPos: P, computePosition: b } = H(u), {
+    actions: { setProp: f },
+    id: C,
+    pattern: r
+  } = x((t) => {
+    var p, c, d;
+    return {
+      id: t.id,
+      pattern: ((d = (c = (p = t.data) == null ? void 0 : p.props) == null ? void 0 : c.root) == null ? void 0 : d.pattern) || null
+    };
+  }), a = !!r, i = O(() => _(r), [r]), s = () => {
+    P(b()), l(!0);
+  };
+  L({ 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(
+      N,
+      {
+        mode: "popover",
+        ref: g,
+        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(w, { 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: m,
+        onClose: () => l(!1),
+        defaultWidth: u,
+        defaultHeight: z
+      }
+    ) })
+  ] });
+}
+export {
+  V as default
+};