@pagehub/sdk 0.1.4 → 0.1.6

package/dist/chunks/TextMainTab-B5udsXsk.js

@@ -0,0 +1,260 @@
+import { jsx as a, jsxs as m } from "react/jsx-runtime";
+import { useState as P, Suspense as S, lazy as y } from "react";
+import { useEditor as b, useNode as u } from "@craftjs/core";
+import { u as p, V as A, E as M, C as x, K as N, L as E, N as O, P as L, c as V, e as H, w as W, Q as h, T as k, R as F } from "./index-C66dAl3Q.js";
+import { F as j } from "./FloatingPanel-DJP5Vhua.js";
+import { r as q } from "./helpers-Cll72tMn.js";
+import { S as z } from "./SlotRenderer-CaLf_2_C.js";
+const f = [
+  "lorem",
+  "ipsum",
+  "dolor",
+  "sit",
+  "amet",
+  "consectetur",
+  "adipiscing",
+  "elit",
+  "sed",
+  "do",
+  "eiusmod",
+  "tempor",
+  "incididunt",
+  "ut",
+  "labore",
+  "et",
+  "dolore",
+  "magna",
+  "aliqua",
+  "enim",
+  "ad",
+  "minim",
+  "veniam",
+  "quis",
+  "nostrud",
+  "exercitation",
+  "ullamco",
+  "laboris",
+  "nisi",
+  "aliquip",
+  "ex",
+  "ea",
+  "commodo",
+  "consequat",
+  "duis",
+  "aute",
+  "irure",
+  "in",
+  "reprehenderit",
+  "voluptate",
+  "velit",
+  "esse",
+  "cillum",
+  "fugiat",
+  "nulla",
+  "pariatur",
+  "excepteur",
+  "sint",
+  "occaecat",
+  "cupidatat",
+  "non",
+  "proident",
+  "sunt",
+  "culpa",
+  "qui",
+  "officia",
+  "deserunt",
+  "mollit",
+  "anim",
+  "id",
+  "est",
+  "blandit",
+  "volutpat",
+  "maecenas",
+  "accumsan",
+  "lacus",
+  "vel",
+  "facilisis",
+  "volutpat",
+  "praesent",
+  "semper",
+  "feugiat",
+  "nibh",
+  "cras",
+  "adipiscing"
+], g = (e, t) => e + Math.floor(Math.random() * (t - e + 1)), I = () => f[Math.floor(Math.random() * f.length)], R = (e) => e.charAt(0).toUpperCase() + e.slice(1);
+class K {
+  constructor(t = {}) {
+    this.spp = t.sentencesPerParagraph ?? { min: 3, max: 5 }, this.wps = t.wordsPerSentence ?? { min: 5, max: 12 };
+  }
+  generateWords(t) {
+    return Array.from({ length: t }, I).join(" ");
+  }
+  generateSentences(t) {
+    return Array.from({ length: t }, () => {
+      const n = g(this.wps.min, this.wps.max);
+      return R(this.generateWords(n)) + ".";
+    }).join(" ");
+  }
+  generateParagraphs(t) {
+    return Array.from({ length: t }, () => {
+      const n = g(this.spp.min, this.spp.max);
+      return this.generateSentences(n);
+    }).join(`
+
+`);
+  }
+}
+function D(e) {
+  return e.charAt(0).toUpperCase() + e.slice(1);
+}
+const _ = ({ propKey: e, propType: t }) => {
+  const n = p(A), o = p(M).dark ?? !1, s = H(n), { actions: r, query: i } = b(), d = new K({
+    sentencesPerParagraph: {
+      max: 5,
+      min: 3
+    },
+    wordsPerSentence: {
+      max: 16,
+      min: 4
+    }
+  }), {
+    actions: { setProp: v },
+    propValues: J,
+    id: T
+  } = u((l) => {
+    var c;
+    return {
+      propValues: (c = l.data) == null ? void 0 : c.props,
+      id: l.id
+    };
+  }), C = (l) => {
+    V({
+      propKey: e,
+      value: l,
+      setProp: v,
+      view: t === "class" ? s : n,
+      propType: t,
+      query: i,
+      actions: r,
+      nodeId: T,
+      ...t === "class" ? { classDark: o } : {}
+    });
+  };
+  return /* @__PURE__ */ a(x, { label: "Sample", frame: "bare", children: /* @__PURE__ */ a("div", { className: "bg-neutral ml-auto flex w-fit shrink-0 items-center gap-1 rounded-md p-1", children: [
+    {
+      icon: N,
+      label: "Word",
+      generate: () => D(d.generateWords(1))
+    },
+    { icon: E, label: "Sentence", generate: () => d.generateSentences(1) },
+    { icon: O, label: "Paragraph", generate: () => d.generateParagraphs(1) }
+  ].map(({ icon: l, label: c, generate: w }) => /* @__PURE__ */ a(
+    "button",
+    {
+      type: "button",
+      "data-tooltip-id": L,
+      "data-tooltip-content": c,
+      "data-tooltip-place": "top",
+      className: "text-neutral-content hover:bg-base-100 hover:text-base-content flex h-6 items-center justify-center rounded px-2 transition-colors",
+      onClick: () => C(w()),
+      children: /* @__PURE__ */ a(l, { className: "size-3.5" })
+    },
+    c
+  )) }) });
+}, B = y(
+  () => import("./CodeEditor-axBXmPH8.js").then((e) => e.a).then((e) => ({ default: e.CodeEditor }))
+);
+function G() {
+  const { query: e } = b(), {
+    actions: { setProp: t },
+    id: n,
+    text: o
+  } = u((r) => {
+    var i;
+    return {
+      text: typeof ((i = r.data.props) == null ? void 0 : i.text) == "string" ? r.data.props.text : ""
+    };
+  }), s = F(e);
+  return /* @__PURE__ */ a("div", { className: "bg-base-100 flex min-h-0 flex-1 flex-col p-4", children: /* @__PURE__ */ a("div", { className: "min-h-0 flex-1 [&>div]:h-full", children: /* @__PURE__ */ a(S, { fallback: null, children: /* @__PURE__ */ a(
+    B,
+    {
+      value: o,
+      onChange: (r) => t((i) => i.text = r),
+      language: "html",
+      height: "100%",
+      lineNumbers: !1,
+      theme: "auto",
+      autoFormatOnMount: !0,
+      autoFormatMountKey: n,
+      toolbarDenseCode: !0,
+      htmlVariableCompletionOptions: s,
+      placeholder: "Enter HTML content"
+    }
+  ) }) }) });
+}
+const U = [
+  { value: "full", label: "Rich" },
+  { value: "inline", label: "Inline" }
+];
+function Q() {
+  const {
+    actions: { setProp: e },
+    mode: t
+  } = u((n) => {
+    var o, s, r;
+    return {
+      mode: ((r = (s = (o = n.data) == null ? void 0 : o.props) == null ? void 0 : s.richText) == null ? void 0 : r.mode) || "full"
+    };
+  });
+  return /* @__PURE__ */ a(x, { label: "Format", frame: "bare", children: /* @__PURE__ */ a("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ a(
+    k,
+    {
+      dense: !0,
+      "aria-label": "Text format",
+      value: t,
+      onChange: (n) => e((o) => {
+        (!o.richText || typeof o.richText != "object") && (o.richText = {}), o.richText.mode = n;
+      }, 0),
+      options: U
+    }
+  ) }) });
+}
+const oe = () => {
+  const [e, t] = P(!1);
+  return q({
+    Content: /* @__PURE__ */ m(W, { collapsible: !1, children: [
+      /* @__PURE__ */ a(_, { propKey: "text", propType: "component" }),
+      /* @__PURE__ */ a(Q, {}),
+      /* @__PURE__ */ m("div", { className: "flex w-full gap-2 [&>*]:flex-1", children: [
+        /* @__PURE__ */ m("button", { type: "button", className: "ph-toolbar-dashed-btn", onClick: () => t(!0), children: [
+          /* @__PURE__ */ a(h, { size: 12, "aria-hidden": !0 }),
+          "Edit HTML"
+        ] }),
+        /* @__PURE__ */ a(z, { id: "settings/ai-button" })
+      ] }),
+      /* @__PURE__ */ a(
+        j,
+        {
+          isOpen: e,
+          onClose: () => t(!1),
+          title: "Edit HTML",
+          icon: /* @__PURE__ */ a(h, { className: "size-3.5" }),
+          storageKey: "textContentEditor",
+          autoSize: !1,
+          defaultWidth: 720,
+          defaultHeight: 520,
+          minWidth: 420,
+          maxWidth: 1100,
+          minHeight: 320,
+          maxHeight: 900,
+          backdrop: !0,
+          edges: ["e", "s", "se", "w", "sw", "n", "ne", "nw"],
+          children: e ? /* @__PURE__ */ a(G, {}) : null
+        }
+      )
+    ] })
+  });
+};
+export {
+  oe as TextMainTab
+};

package/dist/chunks/TextStyleEditorPanel-GRNPGzUL.js

@@ -0,0 +1,381 @@
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { useState as I, useRef as S, useMemo as z } from "react";
+import { d as F, W as R, bV as _, T as W, aB as X, aO as B } from "./index-C66dAl3Q.js";
+import { F as H } from "./FloatingPanel-DJP5Vhua.js";
+import "@craftjs/utils";
+import "@craftjs/core";
+import { F as j, C as $ } from "./dialogAtoms-CeQ2G05l.js";
+import { e as ce, p as de } from "./TypographyPresetInput-DqnGSgR2.js";
+const G = [
+  ["0.625rem", "XS (10px)"],
+  ["0.75rem", "SM (12px)"],
+  ["0.875rem", "Base- (14px)"],
+  ["1rem", "Base (16px)"],
+  ["1.125rem", "LG (18px)"],
+  ["1.25rem", "XL (20px)"],
+  ["1.5rem", "2XL (24px)"],
+  ["1.875rem", "3XL (30px)"],
+  ["2.25rem", "4XL (36px)"],
+  ["3rem", "5XL (48px)"],
+  ["3.75rem", "6XL (60px)"],
+  ["4.5rem", "7XL (72px)"],
+  ["6rem", "8XL (96px)"],
+  ["8rem", "9XL (128px)"]
+], K = [
+  ["100", "Thin"],
+  ["200", "Extra Light"],
+  ["300", "Light"],
+  ["400", "Normal"],
+  ["500", "Medium"],
+  ["600", "Semibold"],
+  ["700", "Bold"],
+  ["800", "Extra Bold"],
+  ["900", "Black"]
+], M = [
+  ["1", "None"],
+  ["1.15", "Tight"],
+  ["1.2", "Snug"],
+  ["1.25", "Compact"],
+  ["1.375", "Normal-"],
+  ["1.5", "Normal"],
+  ["1.625", "Relaxed"],
+  ["1.75", "Loose"],
+  ["2", "Extra"]
+], V = [
+  ["-0.05em", "Tighter"],
+  ["-0.025em", "Tight"],
+  ["normal", "Normal"],
+  ["0.025em", "Wide"],
+  ["0.05em", "Wider"],
+  ["0.1em", "Widest"]
+], U = [
+  ["none", "None"],
+  ["uppercase", "UPPERCASE"],
+  ["lowercase", "lowercase"],
+  ["capitalize", "Capitalize"]
+], q = [
+  ["none", "None"],
+  ["underline", "Underline"],
+  ["line-through", "Strikethrough"],
+  ["overline", "Overline"]
+], J = [
+  { value: "left", label: "L", tooltip: "Left" },
+  { value: "center", label: "C", tooltip: "Center" },
+  { value: "right", label: "R", tooltip: "Right" },
+  { value: "justify", label: "J", tooltip: "Justify" }
+];
+function x({ children: r }) {
+  return /* @__PURE__ */ o("label", { className: "text-neutral-content mb-1 block text-[11px] font-medium", children: r });
+}
+function p({
+  label: r,
+  value: l,
+  onChange: c,
+  options: b,
+  id: h
+}) {
+  return /* @__PURE__ */ i("div", { children: [
+    /* @__PURE__ */ o(x, { children: r }),
+    /* @__PURE__ */ o(B, { value: l, onChange: c, placeholder: r, propKey: h, children: b.map(([f, g]) => /* @__PURE__ */ o("option", { value: f, children: g }, f)) })
+  ] });
+}
+function Z(r) {
+  return !!r && typeof r == "object" && typeof r.r == "number" && typeof r.g == "number" && typeof r.b == "number";
+}
+function Y(r) {
+  if (r == null) return null;
+  if (typeof r == "string") return r;
+  if (typeof r == "object") {
+    const l = r;
+    if (typeof l.value == "string") return l.value;
+    if (Z(l)) {
+      const c = typeof l.a == "number" ? l.a : 1;
+      return `rgba(${l.r}, ${l.g}, ${l.b}, ${c})`;
+    }
+  }
+  return String(r);
+}
+function ie({
+  mode: r,
+  initialDraft: l,
+  originalName: c,
+  existingNames: b,
+  initialPosition: h,
+  defaultWidth: f,
+  defaultHeight: g,
+  onClose: y,
+  onSave: L,
+  onDelete: v
+}) {
+  const [e, O] = I(l), N = S(null), T = S(null), [, k] = F(j), [, w] = F($), a = (t, s) => {
+    O((n) => ({ ...n, [t]: s }));
+  }, u = e.name.trim(), d = z(() => {
+    if (!u) return "Name is required";
+    const t = u.toLowerCase();
+    return b.some((n) => n.toLowerCase() === t && n !== c) ? `A style named "${u}" already exists` : null;
+  }, [u, b, c]), C = !d, A = () => {
+    var s;
+    const t = ((s = N.current) == null ? void 0 : s.getBoundingClientRect()) || null;
+    k({
+      enabled: !0,
+      value: e.fontFamily ? [e.fontFamily] : [],
+      originalValue: e.fontFamily ? [e.fontFamily] : [],
+      changed: (n) => {
+        const m = Array.isArray(n) ? n[0] : n;
+        a("fontFamily", m || "");
+      },
+      preview: (n) => {
+        const m = Array.isArray(n) ? n[0] : n;
+        a("fontFamily", m || "");
+      },
+      e: t
+    });
+  }, E = () => {
+    var s;
+    const t = ((s = T.current) == null ? void 0 : s.getBoundingClientRect()) || null;
+    w({
+      enabled: !0,
+      value: e.color || "",
+      prefix: "",
+      changed: (n) => {
+        const m = Y(n);
+        m != null && a("color", m);
+      },
+      e: t,
+      mode: "picker",
+      propKey: "text-style-editor-color"
+    });
+  }, P = {
+    fontFamily: e.fontFamily || "inherit",
+    fontSize: e.fontSize || "1rem",
+    fontWeight: e.fontWeight || "400",
+    lineHeight: e.lineHeight || "1.5",
+    letterSpacing: e.letterSpacing || "normal",
+    textTransform: e.textTransform || "none",
+    color: e.color || void 0,
+    textDecoration: e.textDecoration && e.textDecoration !== "none" ? e.textDecoration : void 0,
+    textAlign: e.textAlign || "left"
+  }, D = r === "new" ? "New Text Style" : `Edit · ${c ?? e.name}`;
+  return /* @__PURE__ */ i(
+    H,
+    {
+      isOpen: !0,
+      onClose: y,
+      title: D,
+      storageKey: "text-style-editor",
+      autoSize: !1,
+      defaultWidth: f,
+      defaultHeight: g,
+      minWidth: 300,
+      maxWidth: 520,
+      minHeight: 420,
+      initialPosition: h,
+      persistSize: !1,
+      zIndex: R,
+      scrollable: !0,
+      bodyClassName: "text-base-content flex flex-col gap-3 p-3 text-xs",
+      children: [
+        /* @__PURE__ */ i("div", { children: [
+          /* @__PURE__ */ o(x, { children: "Name" }),
+          /* @__PURE__ */ o(
+            "input",
+            {
+              type: "text",
+              value: e.name,
+              onChange: (t) => a("name", t.target.value),
+              placeholder: "e.g. Heading 2",
+              "aria-invalid": !!d,
+              "aria-describedby": d ? "text-style-name-error" : void 0,
+              className: `input-plain border-base-300 bg-base-100 w-full rounded-md border px-2 py-1.5 text-xs outline-none ${d ? "border-error focus:border-error" : "focus:border-primary"}`
+            }
+          ),
+          d && /* @__PURE__ */ o(
+            "p",
+            {
+              id: "text-style-name-error",
+              role: "alert",
+              className: "text-error mt-1 text-[11px] leading-tight",
+              children: d
+            }
+          )
+        ] }),
+        /* @__PURE__ */ i("div", { children: [
+          /* @__PURE__ */ o(x, { children: "Font Family" }),
+          /* @__PURE__ */ i(
+            "button",
+            {
+              type: "button",
+              ref: N,
+              onClick: A,
+              className: "border-base-300 bg-base-100 text-base-content hover:bg-base-200 flex h-8 w-full items-center justify-between gap-2 rounded-md border px-2 text-left text-xs",
+              style: { fontFamily: e.fontFamily || void 0 },
+              children: [
+                /* @__PURE__ */ o("span", { className: "truncate", children: e.fontFamily || "Choose typeface…" }),
+                /* @__PURE__ */ o(_, { className: "text-neutral-content size-3 shrink-0", "aria-hidden": !0 })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ i("div", { className: "grid grid-cols-2 gap-2", children: [
+          /* @__PURE__ */ o(
+            p,
+            {
+              id: "text-style-size",
+              label: "Size",
+              value: e.fontSize,
+              onChange: (t) => a("fontSize", t),
+              options: G
+            }
+          ),
+          /* @__PURE__ */ o(
+            p,
+            {
+              id: "text-style-weight",
+              label: "Weight",
+              value: e.fontWeight,
+              onChange: (t) => a("fontWeight", t),
+              options: K
+            }
+          ),
+          /* @__PURE__ */ o(
+            p,
+            {
+              id: "text-style-line-height",
+              label: "Line Height",
+              value: e.lineHeight,
+              onChange: (t) => a("lineHeight", t),
+              options: M
+            }
+          ),
+          /* @__PURE__ */ o(
+            p,
+            {
+              id: "text-style-letter-spacing",
+              label: "Letter Spacing",
+              value: e.letterSpacing,
+              onChange: (t) => a("letterSpacing", t),
+              options: V
+            }
+          ),
+          /* @__PURE__ */ o(
+            p,
+            {
+              id: "text-style-transform",
+              label: "Transform",
+              value: e.textTransform,
+              onChange: (t) => a("textTransform", t),
+              options: U
+            }
+          ),
+          /* @__PURE__ */ o(
+            p,
+            {
+              id: "text-style-decoration",
+              label: "Decoration",
+              value: e.textDecoration,
+              onChange: (t) => a("textDecoration", t),
+              options: q
+            }
+          )
+        ] }),
+        /* @__PURE__ */ i("div", { children: [
+          /* @__PURE__ */ o(x, { children: "Text Align" }),
+          /* @__PURE__ */ o(
+            W,
+            {
+              value: e.textAlign,
+              onChange: (t) => a("textAlign", t),
+              options: J,
+              "aria-label": "Text alignment"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ i("div", { children: [
+          /* @__PURE__ */ o(x, { children: "Color" }),
+          /* @__PURE__ */ i(
+            "button",
+            {
+              type: "button",
+              ref: T,
+              onClick: E,
+              className: "border-base-300 bg-base-100 text-base-content hover:bg-base-200 flex h-8 w-full items-center gap-2 rounded-md border px-2 text-left text-xs",
+              children: [
+                /* @__PURE__ */ o(
+                  "span",
+                  {
+                    className: "border-base-300 size-4 shrink-0 rounded border",
+                    style: { backgroundColor: e.color || "transparent" },
+                    "aria-hidden": !0
+                  }
+                ),
+                /* @__PURE__ */ o("span", { className: "min-w-0 flex-1 truncate", children: e.color || "Inherit" }),
+                e.color && /* @__PURE__ */ o(
+                  "span",
+                  {
+                    role: "button",
+                    tabIndex: 0,
+                    onClick: (t) => {
+                      t.stopPropagation(), a("color", "");
+                    },
+                    onKeyDown: (t) => {
+                      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), a("color", ""));
+                    },
+                    className: "text-neutral-content hover:text-base-content shrink-0 px-1",
+                    "aria-label": "Clear color",
+                    children: "×"
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ i("div", { className: "border-base-300/60 bg-base-200/40 rounded-md border p-3", children: [
+          /* @__PURE__ */ o("p", { className: "text-base-content/45 mb-1 text-[10px] font-semibold tracking-wider uppercase", children: "Preview" }),
+          /* @__PURE__ */ o("div", { style: P, className: "break-words", children: "The quick brown fox jumps over the lazy dog" })
+        ] }),
+        /* @__PURE__ */ i("div", { className: "border-base-300/60 mt-auto flex items-center justify-between gap-2 border-t pt-3", children: [
+          /* @__PURE__ */ o("div", { children: r === "edit" && v && /* @__PURE__ */ i(
+            "button",
+            {
+              type: "button",
+              onClick: v,
+              className: "text-error hover:bg-error/10 flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors",
+              children: [
+                /* @__PURE__ */ o(X, { className: "size-3.5", "aria-hidden": !0 }),
+                "Delete"
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ o(
+              "button",
+              {
+                type: "button",
+                onClick: y,
+                className: "text-base-content hover:bg-base-200 rounded-md px-3 py-1 text-xs font-medium transition-colors",
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ o(
+              "button",
+              {
+                type: "button",
+                disabled: !C,
+                onClick: () => {
+                  C && L({ ...e, name: u });
+                },
+                className: "bg-primary text-primary-content rounded-md px-3 py-1 text-xs font-semibold transition-opacity disabled:cursor-not-allowed disabled:opacity-40",
+                children: r === "new" ? "Save as new" : "Update"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ie as default,
+  ce as emptyDraft,
+  de as presetToDraft
+};