@pagehub/sdk 0.1.4 → 0.1.6

package/dist/chunks/ColorPanel-DOLrT-gS.js

@@ -0,0 +1,562 @@
+import { jsxs as h, jsx as t } from "react/jsx-runtime";
+import { f as K, F as M } from "./FloatingPanel-DJP5Vhua.js";
+import { useMemo as _, useRef as E, useState as N, useEffect as T, useCallback as A } from "react";
+import { S as q } from "./AnchoredPopover-CckPTxXu.js";
+import { dM as B, dO as O, P as z, aA as P, aB as W, dU as S, b as U, dV as V, dW as G, dp as J, a5 as X, G as Y, r as Z, a_ as Q, dX as ee, db as L, W as te } from "./index-C66dAl3Q.js";
+import { ROOT_NODE as ne } from "@craftjs/utils";
+import { useEditor as oe } from "@craftjs/core";
+import { createPortal as re } from "react-dom";
+import { C as ae } from "./CreateTokenDialog-DNWtWqJd.js";
+const $ = () => typeof window < "u" && "EyeDropper" in window, se = () => {
+  throw new Error("Unsupported browser.");
+}, le = (n) => {
+  const s = _(() => {
+    var a;
+    return (a = $() && new EyeDropper(n)) ? EyeDropper.prototype.open.bind(a) : se;
+  }, [n]), [i, e] = (() => {
+    const a = E(), [u, p] = N(!1);
+    T(() => (a.current = !0, p($()), () => {
+      a.current = !1;
+    }), []);
+    const b = A(() => u, [u]);
+    return [a, b];
+  })(), o = E(), l = A(() => {
+    o.current !== void 0 && o.current.abort();
+  }, [o]), c = A(async function(a) {
+    a === void 0 && (a = {}), l();
+    const { signal: u, ...p } = a, b = new AbortController();
+    o.current = b;
+    const m = u !== void 0 ? ((f) => {
+      if ("any" in AbortSignal) return AbortSignal.any(f);
+      const w = new AbortController(), v = () => {
+        w.abort();
+        for (const r of f) r.removeEventListener("abort", v);
+      };
+      for (const r of f) {
+        if (r.aborted) {
+          v();
+          break;
+        }
+        r.addEventListener("abort", v);
+      }
+      return w.signal;
+    })([u, b.signal]) : b.signal;
+    try {
+      return await s({ ...p, signal: m });
+    } catch (f) {
+      throw i.current || (f.canceled = !0), f;
+    }
+  }, [o, i, l, s]);
+  return T(() => l, [l]), { open: c, close: l, isSupported: e };
+}, ie = le, ce = [
+  "50",
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+  "800",
+  "900",
+  "950"
+], de = [
+  "slate",
+  "gray",
+  "zinc",
+  "neutral",
+  "stone",
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose"
+].map((n) => ({ name: n, shades: ce })), ue = [
+  { name: "White", value: "white", hex: "#ffffff" },
+  { name: "Black", value: "black", hex: "#000000" },
+  { name: "Transparent", value: "transparent", hex: "transparent" }
+];
+function pe(n, s) {
+  const { base: i } = B(`${n}-${s}`), e = i.split("-");
+  if (e.length < 2) {
+    const a = i.toLowerCase(), u = O[a];
+    return u && typeof u == "string" ? u : "#cccccc";
+  }
+  const o = e.pop(), l = e.join("-").toLowerCase(), c = O[l];
+  return c ? typeof c == "string" ? c : typeof c == "object" && c[o] ? c[o] : "#cccccc" : "#cccccc";
+}
+function be({
+  selectedColor: n,
+  onSelect: s,
+  onDoubleClick: i
+}) {
+  return /* @__PURE__ */ h("div", { children: [
+    /* @__PURE__ */ t("span", { className: "text-base-content mb-1.5 block text-xs font-medium", children: "Special" }),
+    /* @__PURE__ */ t("div", { className: "grid grid-cols-12 gap-1", children: ue.map((e) => /* @__PURE__ */ h(
+      "button",
+      {
+        onClick: () => s("class", e.value),
+        onDoubleClick: () => i("class", e.value),
+        className: "group relative aspect-square w-full rounded-lg border-2 transition-all hover:scale-110",
+        style: {
+          backgroundColor: e.hex,
+          borderColor: n === e.value ? "var(--primary)" : "var(--base-300)"
+        },
+        "data-tooltip-id": z,
+        "data-tooltip-content": e.name,
+        "data-tooltip-place": "top",
+        "data-tooltip-offset": 10,
+        children: [
+          e.value === "transparent" && /* @__PURE__ */ t(
+            "div",
+            {
+              className: "absolute inset-0 rounded-lg",
+              style: {
+                background: "linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc)",
+                backgroundSize: "8px 8px",
+                backgroundPosition: "0 0, 4px 4px"
+              }
+            }
+          ),
+          n === e.value && /* @__PURE__ */ t(P, { className: "text-base-content absolute inset-0 m-auto size-5 drop-shadow-lg" })
+        ]
+      },
+      e.value
+    )) })
+  ] });
+}
+function me({
+  recentColors: n,
+  selectedColor: s,
+  onClear: i,
+  onSelect: e,
+  onDoubleClick: o
+}) {
+  return /* @__PURE__ */ h("div", { children: [
+    /* @__PURE__ */ h("div", { className: "mb-1.5 flex items-center justify-between", children: [
+      /* @__PURE__ */ t("span", { className: "text-base-content text-xs font-medium", children: "Recent" }),
+      /* @__PURE__ */ t("button", { onClick: i, className: "text-neutral-content hover:text-base-content text-xs", children: /* @__PURE__ */ t(W, { className: "size-3" }) })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "grid grid-cols-12 gap-1", children: n.map((l, c) => /* @__PURE__ */ t(
+      "button",
+      {
+        onClick: () => e("hex", l),
+        onDoubleClick: () => o("hex", l),
+        className: "group relative aspect-square w-full rounded-lg border-2 transition-all hover:scale-110",
+        style: {
+          backgroundColor: l,
+          borderColor: s === l ? "var(--primary)" : "var(--base-300)"
+        },
+        children: s === l && /* @__PURE__ */ t(P, { className: "absolute inset-0 m-auto size-4 text-white drop-shadow-lg" })
+      },
+      c
+    )) })
+  ] });
+}
+function fe({
+  selectedColor: n,
+  onSelect: s,
+  onDoubleClick: i
+}) {
+  return /* @__PURE__ */ h("div", { children: [
+    /* @__PURE__ */ t("span", { className: "text-base-content mb-1.5 block text-xs font-medium", children: "Tailwind Colors" }),
+    /* @__PURE__ */ t("div", { className: "space-y-3", children: de.map((e) => /* @__PURE__ */ h("div", { children: [
+      /* @__PURE__ */ t("div", { className: "text-neutral-content mb-1 text-xs capitalize", children: e.name }),
+      /* @__PURE__ */ t("div", { className: "grid grid-cols-12 gap-1", children: e.shades.map((o) => {
+        const l = `${e.name}-${o}`, c = pe(e.name, o), a = n === l;
+        return /* @__PURE__ */ t(
+          "button",
+          {
+            onClick: () => s("class", l),
+            onDoubleClick: () => i("class", l),
+            className: "group relative aspect-square w-full rounded-lg border transition-all hover:scale-110",
+            style: {
+              backgroundColor: c,
+              borderColor: a ? "var(--primary)" : "var(--base-300)",
+              borderWidth: a ? "2px" : "1px"
+            },
+            "data-tooltip-id": z,
+            "data-tooltip-content": `${e.name.charAt(0).toUpperCase() + e.name.slice(1)} ${o}`,
+            "data-tooltip-place": "top",
+            "data-tooltip-offset": 10,
+            children: a && /* @__PURE__ */ t(P, { className: "absolute inset-0 m-auto size-4 text-white drop-shadow-lg" })
+          },
+          o
+        );
+      }) })
+    ] }, e.name)) })
+  ] });
+}
+function j(n, s) {
+  var a;
+  let i = n.replace(/^(bg-|text-|border-|from-|to-|via-|ring-)/, "");
+  const { base: e, opacity: o } = B(i);
+  if (e.includes("#")) {
+    const u = ((a = e.match(/#[0-9A-Fa-f]{3,8}/i)) == null ? void 0 : a[0]) || e;
+    return o != null && o < 1 - 1e-6 ? S(u, o) : u;
+  }
+  if (e === "white")
+    return o != null && o < 1 - 1e-6 ? S("#ffffff", o) : "#ffffff";
+  if (e === "black")
+    return o != null && o < 1 - 1e-6 ? S("#000000", o) : "#000000";
+  if (e === "transparent")
+    return o != null && o < 1 - 1e-6 ? S("transparent", o) : "transparent";
+  if (/^[a-z]+$/i.test(e)) {
+    const u = e.toLowerCase(), p = O[u];
+    if (p && typeof p == "object" && Object.prototype.hasOwnProperty.call(p, "500")) {
+      let b = p[500];
+      return o != null && o < 1 - 1e-6 && (b = S(b, o)), b;
+    }
+  }
+  let c = U(`text-${e}`, "text", s).backgroundColor;
+  return o != null && o < 1 - 1e-6 && (c = S(c, o)), c;
+}
+function he({ selectedColor: n, onSelect: s, anchorEl: i }) {
+  const { query: e, actions: o } = oe(), [l, c] = N("light"), [a, u] = N([]), [p, b] = N(""), [m, f] = N(null), w = l === "dark" ? "darkPalette" : "palette", v = () => {
+    var d;
+    try {
+      const x = e.node(ne).get(), g = Z(((d = x == null ? void 0 : x.data) == null ? void 0 : d.props) || {}), C = l === "dark" ? g.darkPalette : g.palette;
+      u(C || []);
+    } catch (x) {
+      Q.error("DesignSystemPalette: failed to load palette", x);
+    }
+  };
+  T(() => {
+    v();
+  }, [e, l]);
+  const r = _(() => {
+    const d = p.trim().toLowerCase();
+    return d ? a.filter((x) => x.name.toLowerCase().includes(d)) : a;
+  }, [a, p]), y = (d) => {
+    const g = (i ?? d.closest('[role="dialog"]') ?? d).getBoundingClientRect(), C = 256, k = 8, R = g.right + k;
+    return { left: R + C > window.innerWidth - 8 ? Math.max(8, g.left - C - k) : R, top: Math.max(8, g.top) };
+  }, D = (d) => {
+    f({ mode: "create", pos: y(d.currentTarget) });
+  }, F = (d, x) => {
+    d.stopPropagation(), f({ mode: "edit", pos: y(d.currentTarget), existing: x });
+  };
+  return /* @__PURE__ */ h("div", { children: [
+    /* @__PURE__ */ h("div", { className: "mb-1.5 flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ t("span", { className: "text-base-content text-xs font-medium", children: "Design System" }),
+      /* @__PURE__ */ h("div", { className: "border-base-300 bg-base-200 flex items-center rounded-md border p-0.5", children: [
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: () => c("light"),
+            "aria-pressed": l === "light",
+            "aria-label": "Light palette",
+            className: `flex size-5 items-center justify-center rounded transition-colors ${l === "light" ? "bg-base-100 text-base-content" : "text-neutral-content hover:text-base-content"}`,
+            children: /* @__PURE__ */ t(V, { className: "size-3.5", "aria-hidden": !0 })
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: () => c("dark"),
+            "aria-pressed": l === "dark",
+            "aria-label": "Dark palette",
+            className: `flex size-5 items-center justify-center rounded transition-colors ${l === "dark" ? "bg-base-100 text-base-content" : "text-neutral-content hover:text-base-content"}`,
+            children: /* @__PURE__ */ t(G, { className: "size-3.5", "aria-hidden": !0 })
+          }
+        )
+      ] })
+    ] }),
+    a.length > 4 && /* @__PURE__ */ h("div", { className: "border-base-300 bg-base-200 mb-1.5 flex items-center gap-1.5 rounded-md border px-2 py-1.5", children: [
+      /* @__PURE__ */ t(J, { className: "text-neutral-content size-3.5 shrink-0", "aria-hidden": !0 }),
+      /* @__PURE__ */ t(
+        "input",
+        {
+          type: "text",
+          value: p,
+          onChange: (d) => b(d.target.value),
+          placeholder: "Search...",
+          className: "text-base-content placeholder:text-neutral-content min-w-0 flex-1 bg-transparent text-xs outline-none"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t("div", { className: "flex flex-col", children: r.length === 0 ? /* @__PURE__ */ t("div", { className: "text-neutral-content px-2 py-3 text-center text-xs italic", children: a.length === 0 ? "No tokens yet" : `No matches for "${p}"` }) : r.map((d) => {
+      const x = j(d.color || "", a), g = `palette:${d.name}`, C = n === g || n.includes(d.name);
+      return /* @__PURE__ */ h(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          onClick: () => s(g),
+          onKeyDown: (k) => {
+            (k.key === "Enter" || k.key === " ") && (k.preventDefault(), s(g));
+          },
+          className: `group flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 transition-colors ${C ? "bg-base-200" : "hover:bg-base-200/60"}`,
+          children: [
+            /* @__PURE__ */ t(
+              "span",
+              {
+                className: "border-base-300 size-4 shrink-0 rounded-full border",
+                style: { backgroundColor: x },
+                "aria-hidden": !0
+              }
+            ),
+            /* @__PURE__ */ t(
+              "span",
+              {
+                className: `min-w-0 flex-1 truncate text-xs ${C ? "font-medium" : ""} text-base-content`,
+                children: d.name
+              }
+            ),
+            C && /* @__PURE__ */ t(P, { className: "text-base-content size-3.5 shrink-0", "aria-hidden": !0 }),
+            /* @__PURE__ */ h(
+              "button",
+              {
+                type: "button",
+                onClick: (k) => F(k, d),
+                className: "bg-base-300 text-base-content hover:bg-base-content hover:text-base-100 hidden shrink-0 items-center justify-center rounded px-1.5 py-0.5 text-[10px] font-medium transition-colors group-hover:flex",
+                "aria-label": `Edit ${d.name}`,
+                children: [
+                  /* @__PURE__ */ t(X, { className: "mr-0.5 size-3", "aria-hidden": !0 }),
+                  "Edit"
+                ]
+              }
+            )
+          ]
+        },
+        d.name
+      );
+    }) }),
+    /* @__PURE__ */ h(
+      "button",
+      {
+        type: "button",
+        onClick: D,
+        className: "border-base-300 text-neutral-content hover:border-base-content hover:text-base-content mt-1.5 flex h-8 w-full items-center justify-center gap-1.5 rounded-md border border-dashed text-xs transition-colors",
+        children: [
+          /* @__PURE__ */ t(Y, { className: "size-3.5" }),
+          "New Token"
+        ]
+      }
+    ),
+    m && /* @__PURE__ */ t(xe, { left: m.pos.left, top: m.pos.top, children: /* @__PURE__ */ t(
+      ae,
+      {
+        paletteKey: w,
+        ...m.mode === "edit" ? {
+          existing: {
+            originalName: m.existing.name,
+            color: j(m.existing.color || "", a)
+          }
+        } : {},
+        onCreated: (d) => {
+          f(null), v(), s(`palette:${d}`);
+        },
+        onDeleted: () => {
+          f(null), v();
+        },
+        onClose: () => f(null)
+      }
+    ) })
+  ] });
+}
+function xe({
+  left: n,
+  top: s,
+  children: i
+}) {
+  const e = E(null);
+  return K(e), re(
+    /* @__PURE__ */ t("div", { ref: e, className: "pagehub-sdk-root fixed", style: { left: n, top: s, zIndex: 1200 }, children: i }),
+    document.body
+  );
+}
+function ge() {
+  try {
+    const n = L.get("recent-colors");
+    return n ? JSON.parse(n) : [];
+  } catch {
+    return [];
+  }
+}
+function I(n, s) {
+  const i = [n, ...s.filter((e) => e !== n)].slice(0, 12);
+  return L.set("recent-colors", i), i;
+}
+function ve(n) {
+  if (!n) return "";
+  if (n.startsWith("palette:")) return n;
+  const s = n.replace(/^(bg|text|border|from|to|via|ring|divide|outline)-/, ""), i = s.match(/#[0-9A-Fa-f]{3,8}/);
+  if (i) return i[0];
+  const e = s.match(/\[var\(--([a-z0-9-]+)\)\]/i);
+  return e ? e[1] : s;
+}
+function H(n) {
+  const s = n.match(/#[0-9A-Fa-f]{6,8}/);
+  return s ? s[0] : "";
+}
+function ye({ value: n, onChange: s, onClear: i }) {
+  const { open: e, isSupported: o } = ie(), [l, c] = N(ge), [a, u] = N(() => H(n)), p = ve(n);
+  T(() => {
+    const r = H(n);
+    r && u(r);
+  }, [n]);
+  const b = (r) => {
+    s(r), r.type === "hex" && typeof r.value == "string" ? c((y) => I(r.value, y)) : r.type === "class" && typeof r.value == "string" && c((y) => I(r.value, y));
+  }, m = (r, y) => {
+    b({ type: r, value: y });
+  }, f = () => {
+    a && /^#[0-9A-Fa-f]{6}$/.test(a) && b({ type: "hex", value: a });
+  }, w = async () => {
+    try {
+      const r = await e();
+      r != null && r.sRGBHex && (u(r.sRGBHex), b({ type: "hex", value: r.sRGBHex }));
+    } catch {
+    }
+  }, v = () => {
+    c([]), L.remove("recent-colors");
+  };
+  return /* @__PURE__ */ h("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ t("div", { className: "overflow-hidden rounded-md", children: /* @__PURE__ */ t(
+      q,
+      {
+        width: "100%",
+        presetColors: [],
+        disableAlpha: !1,
+        styles: {
+          picker: {},
+          saturation: {
+            width: "100%",
+            height: "120px",
+            paddingBottom: "",
+            position: "relative",
+            overflow: "hidden"
+          }
+        },
+        color: a || "#3b82f6",
+        onChange: (r) => u(r.hex),
+        onChangeComplete: (r) => {
+          var D;
+          (((D = r.rgb) == null ? void 0 : D.a) ?? 1) < 1 - 1e-6 ? b({ type: "rgb", value: r.rgb }) : b({ type: "hex", value: r.hex });
+        }
+      }
+    ) }),
+    /* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ t(
+        "input",
+        {
+          type: "text",
+          value: a,
+          onChange: (r) => u(r.target.value),
+          onKeyDown: (r) => r.key === "Enter" && f(),
+          onBlur: f,
+          placeholder: "#000000",
+          className: "border-base-300 bg-base-200 text-base-content placeholder:text-neutral-content focus:border-ring focus:ring-ring h-8 flex-1 rounded-md border px-2 text-xs outline-none focus:ring-1"
+        }
+      ),
+      o() && /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          onClick: w,
+          className: "border-base-300 text-neutral-content hover:border-base-content hover:text-base-content flex size-8 shrink-0 items-center justify-center rounded-md border transition-colors",
+          "data-tooltip-id": z,
+          "data-tooltip-content": "Eyedropper",
+          "data-tooltip-place": "top",
+          "data-tooltip-offset": 10,
+          "aria-label": "Pick color from screen",
+          children: /* @__PURE__ */ t(ee, { className: "size-3.5" })
+        }
+      ),
+      i && /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          disabled: !n,
+          onClick: i,
+          className: "border-base-300 text-neutral-content hover:border-primary hover:text-base-content flex size-8 shrink-0 items-center justify-center rounded-md border transition-colors disabled:pointer-events-none disabled:opacity-40",
+          "data-tooltip-id": z,
+          "data-tooltip-content": "Clear color",
+          "data-tooltip-place": "top",
+          "data-tooltip-offset": 10,
+          "aria-label": "Clear color",
+          children: /* @__PURE__ */ t(W, { className: "size-3.5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t(
+      he,
+      {
+        selectedColor: p,
+        onSelect: (r) => b({ type: "palette", value: r })
+      }
+    ),
+    /* @__PURE__ */ t(
+      be,
+      {
+        selectedColor: p,
+        onSelect: m,
+        onDoubleClick: m
+      }
+    ),
+    l.length > 0 && /* @__PURE__ */ t(
+      me,
+      {
+        recentColors: l,
+        selectedColor: p,
+        onClear: v,
+        onSelect: m,
+        onDoubleClick: m
+      }
+    ),
+    /* @__PURE__ */ t(
+      fe,
+      {
+        selectedColor: p,
+        onSelect: m,
+        onDoubleClick: m
+      }
+    )
+  ] });
+}
+function Ee({
+  initialPosition: n,
+  onClose: s,
+  defaultWidth: i,
+  defaultHeight: e,
+  value: o,
+  onChange: l,
+  onClear: c
+}) {
+  return /* @__PURE__ */ t(
+    M,
+    {
+      isOpen: !0,
+      onClose: s,
+      title: "Color",
+      storageKey: "color-input",
+      autoSize: !1,
+      defaultWidth: i,
+      defaultHeight: e,
+      minWidth: 260,
+      maxWidth: 400,
+      minHeight: 420,
+      initialPosition: n,
+      persistSize: !1,
+      zIndex: te,
+      scrollable: !0,
+      children: /* @__PURE__ */ t(ye, { value: o, onChange: l, onClear: c })
+    }
+  );
+}
+export {
+  Ee as default
+};