@pagehub/sdk 0.1.4 → 0.1.6

package/dist/chunks/TextStylePickerPanel-l108SmGQ.js

@@ -0,0 +1,140 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { useState as v, useRef as S, useMemo as T } from "react";
+import { W as w, dp as k, P as z, a5 as P, G as $ } from "./index-C66dAl3Q.js";
+import { F as C } from "./FloatingPanel-DJP5Vhua.js";
+function L(n) {
+  const a = /^\s*h(?:eading)?\s*([1-6])/i.exec(n);
+  return a ? `H${a[1]}` : "P";
+}
+function A(n) {
+  const a = (n.fontSize || "").trim(), l = (n.lineHeight || "").trim();
+  return !a && !l ? "" : l ? `${a} / ${l}` : a;
+}
+const F = ({ tag: n, active: a = !1 }) => /* @__PURE__ */ t(
+  "span",
+  {
+    className: `border-base-300 flex h-5 min-w-[1.5rem] shrink-0 items-center justify-center rounded border px-1.5 text-[10px] font-bold ${a ? "bg-base-content text-base-100" : "bg-base-100 text-base-content"}`,
+    children: n
+  }
+);
+function G({
+  presets: n,
+  selectedName: a,
+  initialPosition: l,
+  onClose: m,
+  onApply: u,
+  onEditPreset: d,
+  onCreateNew: x,
+  defaultWidth: f,
+  defaultHeight: b,
+  overlay: h
+}) {
+  const [i, p] = v(""), y = S(null), o = T(() => {
+    const e = i.trim().toLowerCase();
+    return e ? n.filter((s) => s.name.toLowerCase().includes(e)) : n;
+  }, [n, i]);
+  return /* @__PURE__ */ r(
+    C,
+    {
+      isOpen: !0,
+      onClose: m,
+      title: "Text Styles",
+      storageKey: "text-style-picker",
+      autoSize: !1,
+      defaultWidth: f,
+      defaultHeight: b,
+      minWidth: 260,
+      maxWidth: 420,
+      minHeight: 260,
+      initialPosition: l,
+      persistSize: !1,
+      zIndex: w,
+      scrollable: !1,
+      children: [
+        /* @__PURE__ */ r("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ r("div", { className: "border-base-300/60 flex items-center gap-1.5 border-b px-3 py-2", children: [
+            /* @__PURE__ */ t(k, { className: "text-neutral-content size-3.5 shrink-0", "aria-hidden": !0 }),
+            /* @__PURE__ */ t(
+              "input",
+              {
+                ref: y,
+                type: "text",
+                value: i,
+                onChange: (e) => p(e.target.value),
+                placeholder: "Search styles...",
+                autoFocus: !0,
+                className: "text-base-content placeholder:text-neutral-content min-w-0 flex-1 bg-transparent text-xs outline-none"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t("div", { className: "scrollbar min-h-0 flex-1 overflow-y-auto py-1", children: o.length === 0 ? /* @__PURE__ */ t("div", { className: "text-neutral-content px-3 py-6 text-center text-xs italic", children: n.length === 0 ? "No styles yet" : `No matches for "${i}"` }) : o.map((e) => {
+            const s = e.name === a, g = L(e.name), c = A(e), N = {
+              fontFamily: e.fontFamily,
+              fontWeight: e.fontWeight,
+              letterSpacing: e.letterSpacing || "normal",
+              textTransform: e.textTransform || "none"
+            };
+            return /* @__PURE__ */ r(
+              "div",
+              {
+                className: `group flex w-full items-center gap-2 px-2 py-1 text-xs transition-colors ${s ? "bg-base-200" : "hover:bg-base-200/60"}`,
+                children: [
+                  /* @__PURE__ */ r(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => u(e),
+                      className: "flex min-w-0 flex-1 items-center gap-2 text-left",
+                      "aria-label": `Apply style ${e.name}`,
+                      children: [
+                        /* @__PURE__ */ t(F, { tag: g, active: s }),
+                        /* @__PURE__ */ t(
+                          "span",
+                          {
+                            className: "text-base-content min-w-0 flex-1 truncate font-medium",
+                            style: N,
+                            children: e.name
+                          }
+                        ),
+                        c && /* @__PURE__ */ t("span", { className: "text-neutral-content shrink-0 text-[10px] tabular-nums", children: c })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ t(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => d(e),
+                      "aria-label": `Edit style ${e.name}`,
+                      "data-tooltip-id": z,
+                      "data-tooltip-content": "Edit style",
+                      className: "text-neutral-content hover:text-base-content hover:bg-base-300/60 flex size-6 shrink-0 items-center justify-center rounded opacity-0 transition-[color,background-color,opacity] group-hover:opacity-100",
+                      children: /* @__PURE__ */ t(P, { className: "size-3.5", "aria-hidden": !0 })
+                    }
+                  )
+                ]
+              },
+              e.name
+            );
+          }) }),
+          /* @__PURE__ */ t("div", { className: "border-base-300/60 border-t p-2", children: /* @__PURE__ */ r(
+            "button",
+            {
+              type: "button",
+              onClick: x,
+              className: "bg-base-200 text-base-content hover:bg-base-300 flex w-full items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
+              children: [
+                /* @__PURE__ */ t($, { className: "size-3.5", "aria-hidden": !0 }),
+                "New Style"
+              ]
+            }
+          ) })
+        ] }),
+        h
+      ]
+    }
+  );
+}
+export {
+  G as default
+};

package/dist/chunks/TextareaSettingsPanel-C1rQuF1O.js

@@ -0,0 +1,50 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { W as l, n as o, aG as n } from "./index-C66dAl3Q.js";
+import { F as p } from "./FloatingPanel-DJP5Vhua.js";
+function c({ initialPosition: t, onClose: a }) {
+  return /* @__PURE__ */ e(
+    p,
+    {
+      isOpen: !0,
+      onClose: a,
+      title: "Textarea",
+      icon: /* @__PURE__ */ e(n, {}),
+      storageKey: "ph-form-element-textarea",
+      autoSize: !0,
+      defaultWidth: 260,
+      minWidth: 240,
+      initialPosition: t,
+      zIndex: l,
+      scrollable: !0,
+      children: /* @__PURE__ */ r("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ e(
+          o,
+          {
+            propKey: "rows",
+            propType: "component",
+            type: "number",
+            label: "Rows",
+            placeholder: "4",
+            min: 1,
+            max: 20
+          }
+        ),
+        /* @__PURE__ */ e(
+          o,
+          {
+            propKey: "cols",
+            propType: "component",
+            type: "number",
+            label: "Columns",
+            placeholder: "50",
+            min: 1,
+            max: 200
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  c as default
+};

package/dist/chunks/TokenPicker-Q0LToF_p.js

@@ -0,0 +1,291 @@
+import { jsxs as x, jsx as l } from "react/jsx-runtime";
+import { ROOT_NODE as C } from "@craftjs/utils";
+import { useEditor as W } from "@craftjs/core";
+import { useState as w, useRef as J, useEffect as P, useCallback as Q } from "react";
+import { dM as z, dN as R, dO as U, r as O, ct as M, dP as X, P as g, G as Y, cp as Z, bV as V, db as A, aA as ee, dQ as D, b as v } from "./index-C66dAl3Q.js";
+import { C as te } from "./CreateTokenDialog-DNWtWqJd.js";
+import { c as oe, T as re } from "./uiPrimitives-BtohldWg.js";
+const E = (e, o) => {
+  if (!e) return !1;
+  let r;
+  if (typeof e == "object" && e.r !== void 0)
+    r = `rgba(${e.r},${e.g},${e.b},${e.a})`;
+  else if (typeof e == "string")
+    r = e;
+  else
+    return !1;
+  const s = z(r.trim()).base;
+  if (s.includes("palette:")) {
+    const n = s.match(/palette:(.+)$/);
+    if (n)
+      return z(n[1].trim()).base === o.name.trim();
+  }
+  if (s.includes("var(--")) {
+    const n = s.match(/var\(--([^)]+)\)/);
+    if (n)
+      return R(n[1]) === o.name.trim();
+  }
+  const i = s.trim();
+  if (i && /^[a-z][a-z0-9-]*$/i.test(i) && !s.includes("palette:") && !s.includes("var(--")) {
+    const n = i.split("-");
+    if (!(n.length === 2 && (() => {
+      const d = n[0].toLowerCase(), h = n[1], p = U[d];
+      return !!(p && typeof p == "object" && Object.prototype.hasOwnProperty.call(p, h));
+    })()) && R(i) === o.name.trim())
+      return !0;
+  }
+  if (r === o.color)
+    return !0;
+  if (typeof e == "object" && e.r !== void 0) {
+    const n = e, a = `rgba(${n.r},${n.g},${n.b},${n.a})`;
+    return o.color === a;
+  }
+  return !1;
+};
+function ne(e) {
+  return e == null ? !1 : String(e).trim() !== "";
+}
+function L() {
+  try {
+    const e = A.get("recent-tokens");
+    return e ? JSON.parse(e) : [];
+  } catch {
+    return [];
+  }
+}
+function ae(e) {
+  const o = L();
+  if (o.includes(e))
+    return [...o];
+  const r = [...o, e].slice(-8);
+  return A.set("recent-tokens", r), r;
+}
+function se(e, o, r) {
+  const s = /* @__PURE__ */ new Set(), i = [], n = (a) => {
+    i.length >= r || s.has(a.name) || (s.add(a.name), i.push(a));
+  };
+  for (const a of e) n(a);
+  for (const a of o) n(a);
+  return i;
+}
+function ve({
+  value: e,
+  onChange: o,
+  onClose: r,
+  onClear: s,
+  variant: i = "inline"
+}) {
+  const { query: n } = W(), [a, d] = w([]), [h, p] = w(L), [k, _] = w(!1), [B, N] = w(!1), $ = J(null);
+  P(() => {
+    var t;
+    try {
+      const c = n.node(C).get(), m = O(((t = c == null ? void 0 : c.data) == null ? void 0 : t.props) || {}).palette;
+      d(m.filter((f) => (f == null ? void 0 : f.name) && (f == null ? void 0 : f.color)));
+    } catch {
+    }
+  }, [n]), P(() => {
+    if (!r) return;
+    const t = (c) => {
+      var m;
+      (m = $.current) != null && m.contains(c.target) || r();
+    };
+    return document.addEventListener("mousedown", t, !0), () => document.removeEventListener("mousedown", t, !0);
+  }, [r]), M({
+    id: "token-picker",
+    isOpen: !!r,
+    onDismiss: r ?? (() => {
+    })
+  });
+  const y = Q(
+    (t) => {
+      o({ type: "palette", value: `palette:${t}` }), p(ae(t));
+    },
+    [o]
+  ), G = h.map((t) => a.find((c) => c.name === t)).filter(Boolean), T = i === "inline", b = T ? "size-6" : "size-8", S = se(G, a, T ? 11 : 4), F = new Set(S.map((t) => t.name)), H = a.some((t) => !F.has(t.name)), { scrollRef: I, onDragPointerDown: K, dragMoved: q } = X({
+    deps: [S.length, a.length]
+  });
+  return /* @__PURE__ */ x(
+    "div",
+    {
+      ref: $,
+      className: T ? "relative flex w-full max-w-[min(280px,100vw-2rem)] flex-col gap-2 p-2" : "relative flex w-[240px] max-w-[min(240px,100vw-2rem)] flex-col gap-3 p-3",
+      children: [
+        /* @__PURE__ */ x("div", { className: "flex min-w-0 items-center gap-1", children: [
+          /* @__PURE__ */ l(
+            "div",
+            {
+              ref: I,
+              onPointerDown: K,
+              className: "scrollbar-hide no-scrollbar flex min-w-0 flex-1 cursor-grab flex-row gap-1 overflow-x-auto",
+              style: { scrollbarWidth: "none", msOverflowStyle: "none" },
+              children: S.map((t) => /* @__PURE__ */ l(
+                j,
+                {
+                  color: t,
+                  palette: a,
+                  selected: E(e, t),
+                  onPick: y,
+                  dragMovedRef: q,
+                  size: b,
+                  tooltip: t.name
+                },
+                t.name
+              ))
+            }
+          ),
+          /* @__PURE__ */ x("div", { className: "flex shrink-0 items-center gap-1", children: [
+            /* @__PURE__ */ l(
+              "button",
+              {
+                type: "button",
+                onClick: () => N(!0),
+                className: `${b} border-base-300 text-neutral-content hover:border-base-content hover:text-base-content flex shrink-0 items-center justify-center rounded-md border-2 border-dashed transition-colors`,
+                "data-tooltip-id": g,
+                "data-tooltip-content": "New token",
+                "data-tooltip-place": "bottom",
+                "data-tooltip-offset": 10,
+                children: /* @__PURE__ */ l(Y, { className: "size-3" })
+              }
+            ),
+            s != null && /* @__PURE__ */ l(
+              "button",
+              {
+                type: "button",
+                disabled: !ne(e),
+                onClick: (t) => {
+                  t.preventDefault(), t.stopPropagation(), s();
+                },
+                className: `${b} border-base-300 text-neutral-content hover:border-primary hover:text-base-content flex shrink-0 items-center justify-center rounded-md border-2 transition-colors disabled:pointer-events-none disabled:opacity-40`,
+                "aria-label": "Remove color",
+                "data-tooltip-id": g,
+                "data-tooltip-content": "Remove color",
+                "data-tooltip-place": "bottom",
+                "data-tooltip-offset": 10,
+                children: /* @__PURE__ */ l(Z, { className: "size-3.5" })
+              }
+            ),
+            H && /* @__PURE__ */ l(
+              "button",
+              {
+                type: "button",
+                onClick: () => _((t) => !t),
+                className: "text-neutral-content hover:text-base-content flex shrink-0 items-center",
+                "data-tooltip-id": g,
+                "data-tooltip-content": k ? "Less" : "All tokens",
+                "data-tooltip-place": "bottom",
+                "data-tooltip-offset": 10,
+                children: /* @__PURE__ */ l(
+                  V,
+                  {
+                    className: `size-3.5 transition-transform ${k ? "rotate-180" : ""}`
+                  }
+                )
+              }
+            )
+          ] })
+        ] }),
+        k && /* @__PURE__ */ l("div", { className: "border-base-300 flex flex-wrap gap-1 border-t pt-2", children: a.map((t) => /* @__PURE__ */ l(
+          j,
+          {
+            color: t,
+            palette: a,
+            selected: E(e, t),
+            onPick: y,
+            size: b,
+            tooltip: t.name
+          },
+          t.name
+        )) }),
+        B && /* @__PURE__ */ l("div", { className: "absolute top-full left-1/2 z-50 mt-1 -translate-x-1/2", children: /* @__PURE__ */ l(
+          te,
+          {
+            onCreated: (t) => {
+              var c;
+              N(!1);
+              try {
+                const m = n.node(C).get(), f = O(((c = m == null ? void 0 : m.data) == null ? void 0 : c.props) || {}).palette;
+                d(f.filter((u) => (u == null ? void 0 : u.name) && (u == null ? void 0 : u.color)));
+              } catch {
+              }
+              y(t);
+            },
+            onClose: () => N(!1)
+          }
+        ) })
+      ]
+    }
+  );
+}
+function ie(e) {
+  const o = e.trim();
+  return o ? o.startsWith("#") || /^(rgb|rgba|hsl|hsla|oklch|lab|lch|color|hwb|var)\(/i.test(o) ? !0 : (/* @__PURE__ */ new Set(["transparent", "currentcolor", "black", "white", "inherit"])).has(o.toLowerCase()) : !1;
+}
+const le = /^[a-z][a-z0-9-]*(\/(\d{1,3}|\[[^\]]+\]))?$/i;
+function ce(e, o) {
+  const r = e.color.trim();
+  if (!r) {
+    const i = `--${D(e.name)}`;
+    return v(`text-[var(${i})]`, "text", o).backgroundColor;
+  }
+  if (ie(r))
+    return v(`text-${r}`, "text", o).backgroundColor;
+  if (le.test(r))
+    return v(`text-${r}`, "text", o).backgroundColor;
+  const s = `--${D(e.name)}`;
+  return v(`text-[var(${s})]`, "text", o).backgroundColor;
+}
+function j({
+  color: e,
+  palette: o,
+  selected: r,
+  onPick: s,
+  dragMovedRef: i,
+  size: n = "size-6",
+  tooltip: a
+}) {
+  const d = ce(e, o), h = oe(d);
+  return /* @__PURE__ */ l(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        i != null && i.current || s(e.name);
+      },
+      className: "group relative shrink-0",
+      ...a ? {
+        "data-tooltip-id": g,
+        "data-tooltip-content": a,
+        "data-tooltip-place": "bottom",
+        "data-tooltip-offset": 10
+      } : {},
+      children: /* @__PURE__ */ x(
+        "div",
+        {
+          className: `relative overflow-hidden ${n} flex items-center justify-center rounded-md border-2 transition-transform hover:scale-110 ${r ? "border-primary ring-primary/30 ring-1" : "border-base-300"}`,
+          children: [
+            h && /* @__PURE__ */ l(
+              "span",
+              {
+                className: "pointer-events-none absolute inset-0 z-0 rounded-[inherit]",
+                style: re,
+                "aria-hidden": !0
+              }
+            ),
+            /* @__PURE__ */ l(
+              "span",
+              {
+                className: "absolute inset-0 z-1 rounded-[inherit]",
+                style: { backgroundColor: d },
+                "aria-hidden": !0
+              }
+            ),
+            r && /* @__PURE__ */ l(ee, { className: "relative z-2 size-3 text-white drop-shadow-md" })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  ve as T
+};

package/dist/chunks/ToolbarDashedButton-DbUxGmDg.js

@@ -0,0 +1,23 @@
+import { jsxs as s, jsx as n } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { G as d, t as l } from "./index-C66dAl3Q.js";
+const h = u(
+  function({ className: o, children: r, icon: t, ...a }, e) {
+    return /* @__PURE__ */ s(
+      "button",
+      {
+        ref: e,
+        type: "button",
+        className: l("ph-toolbar-dashed-btn", o),
+        ...a,
+        children: [
+          t !== null && (t ?? /* @__PURE__ */ n(d, { size: 12, "aria-hidden": !0 })),
+          r
+        ]
+      }
+    );
+  }
+);
+export {
+  h as T
+};

package/dist/chunks/TransformEditorPanel-BGwyznZ6.js

@@ -0,0 +1,26 @@
+import { jsx as r } from "react/jsx-runtime";
+import { W as a, eN as i } from "./index-C66dAl3Q.js";
+import { F as o } from "./FloatingPanel-DJP5Vhua.js";
+import { a as n } from "./EffectsClassInput-Yujuchwy.js";
+function d({ initialPosition: e, onClose: t }) {
+  return /* @__PURE__ */ r(
+    o,
+    {
+      isOpen: !0,
+      onClose: t,
+      title: "Transform",
+      icon: /* @__PURE__ */ r(i, { "aria-hidden": !0 }),
+      storageKey: "effects-builder-transform",
+      minWidth: 300,
+      maxWidth: 480,
+      minHeight: 300,
+      initialPosition: e,
+      zIndex: a,
+      scrollable: !0,
+      children: /* @__PURE__ */ r(n, {})
+    }
+  );
+}
+export {
+  d as default
+};

package/dist/chunks/TransitionEditorPanel-BSvk58Ow.js

@@ -0,0 +1,26 @@
+import { jsx as i } from "react/jsx-runtime";
+import { W as n, eM as e } from "./index-C66dAl3Q.js";
+import { F as o } from "./FloatingPanel-DJP5Vhua.js";
+import { T as a } from "./EffectsClassInput-Yujuchwy.js";
+function f({ initialPosition: t, onClose: r }) {
+  return /* @__PURE__ */ i(
+    o,
+    {
+      isOpen: !0,
+      onClose: r,
+      title: "Transition",
+      icon: /* @__PURE__ */ i(e, { "aria-hidden": !0 }),
+      storageKey: "effects-builder-transition",
+      minWidth: 300,
+      maxWidth: 460,
+      minHeight: 180,
+      initialPosition: t,
+      zIndex: n,
+      scrollable: !0,
+      children: /* @__PURE__ */ i(a, {})
+    }
+  );
+}
+export {
+  f as default
+};