@pagehub/sdk 0.1.5 → 0.1.7

package/dist/chunks/TypographyPresetInput-DqnGSgR2.js

@@ -0,0 +1,296 @@
+import { jsxs as L, Fragment as O, jsx as f } from "react/jsx-runtime";
+import { ROOT_NODE as H } from "@craftjs/utils";
+import { useEditor as _, useNode as j } from "@craftjs/core";
+import { useState as A, useRef as B, Suspense as F, lazy as R, useMemo as W } from "react";
+import { u as M, aK as K, C as G, r as I, dQ as Q, dY as E } from "./index-C66dAl3Q.js";
+const V = R(() => import("./TextStylePickerPanel-l108SmGQ.js")), q = R(() => import("./TextStyleEditorPanel-GRNPGzUL.js")), v = 300, U = 360, z = 340, Y = 540;
+function J(l) {
+  const c = /^\s*h(?:eading)?\s*([1-6])/i.exec(l);
+  return c ? `H${c[1]}` : "P";
+}
+const X = ({ tag: l }) => /* @__PURE__ */ f("span", { className: "border-base-300 bg-base-100 text-base-content flex h-5 min-w-[1.5rem] shrink-0 items-center justify-center rounded border px-1.5 text-[10px] font-bold", children: l });
+function Z({
+  presets: l,
+  selectedName: c,
+  onSelect: i,
+  buildNewDraft: D,
+  buildEditDraft: y,
+  onCreate: S,
+  onUpdate: b,
+  onDelete: d
+}) {
+  const [T, h] = A(!1), [m, u] = A(null), N = B(null), w = M(K), g = c != null ? l.find((t) => t.name === c) ?? null : null, P = (g == null ? void 0 : g.name) ?? "Default", k = g ? J(g.name) : "—", C = () => {
+    var r;
+    const t = (r = N.current) == null ? void 0 : r.getBoundingClientRect();
+    if (!t) return;
+    const a = w ? t.right + 8 : t.left - v - 8;
+    return { x: Math.max(8, a), y: Math.max(8, t.top) };
+  }, n = () => {
+    var p;
+    const t = (p = N.current) == null ? void 0 : p.getBoundingClientRect();
+    if (!t) return;
+    const a = T ? v + 16 : 8, r = w ? t.right + a : t.left - z - a;
+    return { x: Math.max(8, r), y: Math.max(8, t.top) };
+  }, e = () => {
+    if (m) {
+      u(null), h(!1);
+      return;
+    }
+    h((t) => !t);
+  }, o = () => {
+    i(null);
+  }, s = l.map((t) => t.name);
+  return /* @__PURE__ */ L(O, { children: [
+    /* @__PURE__ */ f(
+      G,
+      {
+        mode: "popover",
+        ref: N,
+        open: T || m != null,
+        onTriggerClick: e,
+        onClear: o,
+        triggerAriaLabel: g ? `Style: ${g.name}` : "Pick style",
+        clearAriaLabel: "Clear style",
+        leading: /* @__PURE__ */ f(X, { tag: k }),
+        summary: P
+      }
+    ),
+    T && /* @__PURE__ */ f(F, { fallback: null, children: /* @__PURE__ */ f(
+      V,
+      {
+        presets: l,
+        selectedName: c,
+        initialPosition: C(),
+        defaultWidth: v,
+        defaultHeight: U,
+        onClose: () => {
+          h(!1), u(null);
+        },
+        onApply: (t) => {
+          i(t), h(!1), u(null);
+        },
+        onEditPreset: (t) => u({
+          mode: "edit",
+          originalName: t.name,
+          draft: y(t)
+        }),
+        onCreateNew: () => u({ mode: "new", draft: D() }),
+        overlay: m ? /* @__PURE__ */ f(F, { fallback: null, children: /* @__PURE__ */ f(
+          q,
+          {
+            mode: m.mode,
+            initialDraft: m.draft,
+            originalName: m.mode === "edit" ? m.originalName : null,
+            existingNames: s,
+            initialPosition: n(),
+            defaultWidth: z,
+            defaultHeight: Y,
+            onClose: () => u(null),
+            onSave: (t) => {
+              m.mode === "edit" ? b(m.originalName, t) : S(t), u(null), h(!1);
+            },
+            onDelete: m.mode === "edit" ? () => {
+              d(m.originalName), u(null), h(!1);
+            } : void 0
+          }
+        ) }) : null
+      }
+    ) })
+  ] });
+}
+function ee() {
+  return {
+    name: "",
+    fontFamily: "Inter",
+    fontSize: "1rem",
+    fontWeight: "400",
+    lineHeight: "1.5",
+    letterSpacing: "normal",
+    textTransform: "none",
+    color: "",
+    textDecoration: "none",
+    textAlign: "left"
+  };
+}
+function te(l) {
+  return {
+    name: l.name,
+    fontFamily: l.fontFamily || "Inter",
+    fontSize: l.fontSize || "1rem",
+    fontWeight: l.fontWeight || "400",
+    lineHeight: l.lineHeight || "1.5",
+    letterSpacing: l.letterSpacing || "normal",
+    textTransform: l.textTransform || "none",
+    color: l.color || "",
+    textDecoration: l.textDecoration || "none",
+    textAlign: l.textAlign || "left"
+  };
+}
+function x(l) {
+  const c = Q(l);
+  return c ? `ph-${c}` : "";
+}
+function ne(l) {
+  return l.split(",")[0].trim().replace(/^['"]|['"]$/g, "");
+}
+function oe(l) {
+  const c = document.querySelector(`[node-id="${l}"]`);
+  if (!c) return null;
+  const i = window.getComputedStyle(c);
+  return {
+    fontFamily: ne(i.fontFamily || "Inter"),
+    fontSize: i.fontSize || "1rem",
+    fontWeight: i.fontWeight || "400",
+    lineHeight: i.lineHeight === "normal" ? "1.5" : i.lineHeight || "1.5",
+    letterSpacing: i.letterSpacing === "normal" ? "normal" : i.letterSpacing,
+    textTransform: i.textTransform === "none" ? "none" : i.textTransform,
+    color: i.color || "",
+    textDecoration: i.textDecorationLine && i.textDecorationLine !== "none" ? i.textDecorationLine : "none",
+    textAlign: i.textAlign || "left"
+  };
+}
+function $(l, c) {
+  return l.split(/\s+/).filter(Boolean).filter((i) => !c.has(i)).join(" ");
+}
+function le({ def: l } = {}) {
+  const {
+    actions: c,
+    presets: i,
+    presetsRaw: D
+  } = _((n) => {
+    var a;
+    const e = n.nodes[H], s = I(((a = e == null ? void 0 : e.data) == null ? void 0 : a.props) || {}).typography || [];
+    return { presets: s.filter((r) => r && typeof r.name == "string" && r.name.length > 0).map((r) => ({
+      name: r.name,
+      fontFamily: r.fontFamily || "inherit",
+      fontSize: r.fontSize || "1rem",
+      fontWeight: r.fontWeight || "400",
+      lineHeight: r.lineHeight || "1.5",
+      letterSpacing: r.letterSpacing,
+      textTransform: r.textTransform
+    })), presetsRaw: s };
+  }), {
+    actions: { setProp: y },
+    classNameStr: S,
+    nodeId: b
+  } = j((n) => {
+    var e, o;
+    return {
+      classNameStr: typeof ((o = (e = n.data) == null ? void 0 : e.props) == null ? void 0 : o.className) == "string" ? n.data.props.className : "",
+      nodeId: n.id
+    };
+  }), d = W(
+    () => new Set(i.map((n) => x(n.name)).filter(Boolean)),
+    [i]
+  ), T = W(() => {
+    if (!S || d.size === 0) return null;
+    const e = S.split(/\s+/).filter(Boolean).find((s) => d.has(s));
+    if (!e) return null;
+    const o = i.find((s) => x(s.name) === e);
+    return (o == null ? void 0 : o.name) ?? null;
+  }, [S, i, d]), h = (n, e) => {
+    const o = d;
+    y((s) => {
+      const t = $(typeof s.className == "string" ? s.className : "", o), a = n ? x(n) : "";
+      s.className = a ? t ? `${t} ${a}` : a : t;
+    });
+  }, m = (n) => {
+    h((n == null ? void 0 : n.name) ?? null), n != null && n.fontFamily && import("./googleFonts-Dj4AntNi.js").then(({ loadGoogleFont: e }) => {
+      e(n.fontFamily, [n.fontWeight || "400"]);
+    });
+  }, u = () => {
+    const n = oe(b), e = { ...ee(), ...n || {} };
+    let o = `Style ${i.length + 1}`;
+    const s = new Set(i.map((a) => a.name.toLowerCase()));
+    let t = i.length + 1;
+    for (; s.has(o.toLowerCase()); )
+      t += 1, o = `Style ${t}`;
+    return e.name = o, e;
+  }, N = (n) => {
+    const e = D.find((o) => o && typeof o.name == "string" && o.name === n.name) ?? n;
+    return te({ ...n, ...e });
+  }, w = (n, e) => {
+    const o = {
+      name: e.name,
+      fontFamily: e.fontFamily || "Inter",
+      fontSize: e.fontSize || "1rem",
+      fontWeight: e.fontWeight || "400",
+      lineHeight: e.lineHeight || "1.5",
+      letterSpacing: e.letterSpacing || "normal",
+      textTransform: e.textTransform || "none"
+    };
+    e.color && (o.color = e.color), e.textDecoration && e.textDecoration !== "none" && (o.textDecoration = e.textDecoration), e.textAlign && e.textAlign !== "left" && (o.textAlign = e.textAlign), c.setProp(H, (s) => {
+      const t = I(s), a = [...t.typography || []].filter(
+        (r) => r && typeof r.name == "string" && r.name.length > 0
+      );
+      if (n == null)
+        a.push(o);
+      else {
+        const r = a.findIndex((p) => p.name === n);
+        r === -1 ? a.push(o) : a[r] = { ...a[r], ...o };
+      }
+      E(s, { ...t, typography: a });
+    });
+  }, g = (n) => {
+    w(null, n);
+    const e = x(n.name);
+    e && y((o) => {
+      const s = $(
+        typeof o.className == "string" ? o.className : "",
+        d
+      ), t = s ? `${s} ${e}` : e;
+      o.className = t;
+    });
+  }, P = (n, e) => {
+    if (w(n, e), n === e.name) return;
+    const o = x(n), s = x(e.name);
+    y((t) => {
+      const r = (typeof t.className == "string" ? t.className : "").split(/\s+/).filter(Boolean).map((p) => p === o ? s : p);
+      t.className = r.join(" ");
+    });
+  }, k = (n) => {
+    c.setProp(H, (o) => {
+      const s = I(o), t = [...s.typography || []].filter(
+        (a) => a && typeof a.name == "string" && a.name !== n
+      );
+      E(o, { ...s, typography: t });
+    });
+    const e = x(n);
+    e && y((o) => {
+      const s = (typeof o.className == "string" ? o.className : "").split(/\s+/).filter(Boolean).filter((t) => t !== e);
+      o.className = s.join(" ");
+    });
+  }, C = l == null ? void 0 : l.label;
+  return /* @__PURE__ */ f("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ L("div", { className: "relative flex w-full items-center gap-0.5", children: [
+    C ? /* @__PURE__ */ f("div", { className: "flex w-20 shrink-0 flex-col items-start gap-0.5", children: /* @__PURE__ */ f(
+      "label",
+      {
+        htmlFor: "typography-preset",
+        className: "w-full cursor-pointer truncate text-xs whitespace-nowrap",
+        children: C
+      }
+    ) }) : null,
+    /* @__PURE__ */ f("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ f(
+      Z,
+      {
+        presets: i,
+        selectedName: T,
+        onSelect: m,
+        buildNewDraft: u,
+        buildEditDraft: N,
+        onCreate: g,
+        onUpdate: P,
+        onDelete: k
+      }
+    ) })
+  ] }) });
+}
+const me = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  TypographyPresetInput: le
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  me as T,
+  ee as e,
+  te as p
+};

package/dist/chunks/ValidationPanel-CmA9SfoF.js

@@ -0,0 +1,56 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { W as r, n as l, aH as p } from "./index-C66dAl3Q.js";
+import { F as n } from "./FloatingPanel-DJP5Vhua.js";
+function c({ initialPosition: a, onClose: t }) {
+  return /* @__PURE__ */ e(
+    n,
+    {
+      isOpen: !0,
+      onClose: t,
+      title: "Validation",
+      icon: /* @__PURE__ */ e(p, {}),
+      storageKey: "ph-form-element-validation",
+      autoSize: !0,
+      defaultWidth: 320,
+      minWidth: 280,
+      initialPosition: a,
+      zIndex: r,
+      scrollable: !0,
+      children: /* @__PURE__ */ o("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ e(
+          l,
+          {
+            propKey: "pattern",
+            propType: "component",
+            type: "text",
+            label: "Pattern",
+            placeholder: "Regex (e.g. [A-Za-z]+)"
+          }
+        ),
+        /* @__PURE__ */ e(
+          l,
+          {
+            propKey: "errorMessage",
+            propType: "component",
+            type: "text",
+            label: "Error",
+            placeholder: "Please enter a valid value"
+          }
+        ),
+        /* @__PURE__ */ e(
+          l,
+          {
+            propKey: "label",
+            propType: "component",
+            type: "text",
+            label: "A11y label",
+            placeholder: "Field label"
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  c as default
+};

package/dist/chunks/Video.render-Dg6xvis4.js

@@ -0,0 +1,21 @@
+import { cY as n, cZ as i, c_ as p, dT as r } from "./index-C66dAl3Q.js";
+const c = (e) => {
+  const a = {
+    provider: "youtube",
+    controls: !0,
+    playsInline: !0,
+    ...e
+  }, o = n(), s = i(), d = p({
+    id: (s == null ? void 0 : s.id) ?? "",
+    isCanvas: !1,
+    hasChildNodes: !1,
+    displayName: (s == null ? void 0 : s.displayName) ?? "Video",
+    rootProps: (o == null ? void 0 : o.rootProps) ?? {},
+    pageMedia: (o == null ? void 0 : o.pageMedia) ?? null,
+    pageIndex: (o == null ? void 0 : o.pageIndex) ?? {}
+  });
+  return r(a, d);
+};
+export {
+  c as VideoRender
+};

package/dist/chunks/VideoMainTab-v5UFhUm-.js

@@ -0,0 +1,174 @@
+import { jsxs as d, Fragment as s, jsx as e } from "react/jsx-runtime";
+import { useNode as u } from "@craftjs/core";
+import { useRef as m, useEffect as h } from "react";
+import { M as y } from "./MediaInput-DHs3D8TJ.js";
+import { w as r, n as t, aJ as b } from "./index-C66dAl3Q.js";
+import { r as f, S as v } from "./helpers-Cll72tMn.js";
+import { S as w } from "./SlotRenderer-CaLf_2_C.js";
+const U = () => {
+  const {
+    provider: o,
+    videoId: p,
+    actions: { setProp: a }
+  } = u((i) => {
+    var n, l;
+    return {
+      provider: (n = i.data) == null ? void 0 : n.props.provider,
+      videoId: (l = i.data) == null ? void 0 : l.props.videoId
+    };
+  }), c = m(o);
+  return h(() => {
+    const i = c.current;
+    if (c.current = o, i === o) return;
+    i === "r2" != (o === "r2") && p && a((l) => {
+      l.videoId = "";
+    });
+  }, [o, p, a]), f({
+    Content: /* @__PURE__ */ d(s, { children: [
+      /* @__PURE__ */ e(r, { collapsible: !1, children: /* @__PURE__ */ d(
+        t,
+        {
+          propKey: "provider",
+          propType: "component",
+          type: "select",
+          label: "Video Provider",
+          labelHide: !1,
+          children: [
+            /* @__PURE__ */ e("option", { value: "r2", children: "Uploaded" }),
+            /* @__PURE__ */ e("option", { value: "youtube", children: "YouTube" }),
+            /* @__PURE__ */ e("option", { value: "vimeo", children: "Vimeo" }),
+            /* @__PURE__ */ e("option", { value: "dailymotion", children: "Dailymotion" }),
+            /* @__PURE__ */ e("option", { value: "wistia", children: "Wistia" }),
+            /* @__PURE__ */ e("option", { value: "facebook", children: "Facebook" }),
+            /* @__PURE__ */ e("option", { value: "twitch", children: "Twitch" }),
+            /* @__PURE__ */ e("option", { value: "url", children: "Direct URL" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e("p", { className: "text-md text-neutral-content px-3 pt-2 pb-3 text-sm", children: (() => {
+        switch (o) {
+          case "youtube":
+            return "Copy the Video ID from the YouTube video URL (e.g., 'dQw4w9WgXcQ' from youtube.com/watch?v=dQw4w9WgXcQ)";
+          case "vimeo":
+            return "Copy the Video ID from the Vimeo video URL (e.g., '123456789' from vimeo.com/123456789)";
+          case "dailymotion":
+            return "Copy the Video ID from the Dailymotion video URL (e.g., 'x8abcde' from dailymotion.com/video/x8abcde)";
+          case "wistia":
+            return "Copy the Video ID from your Wistia embed code or video URL";
+          case "facebook":
+            return "Paste the full Facebook video URL (e.g., https://www.facebook.com/...)";
+          case "twitch":
+            return "Copy the Video ID from the Twitch video URL (e.g., '1234567890' from twitch.tv/videos/1234567890)";
+          case "url":
+            return "Paste a direct file URL ending in .mp4, .webm, .mov, etc. Uses native HTML5 video (not an iframe). For fullscreen backgrounds, enable Playback: Autoplay, Loop, Muted, turn off Controls.";
+          case "r2":
+            return "Pick a video file from your media library.";
+          default:
+            return "Enter the video ID or URL";
+        }
+      })() }),
+      o === "r2" ? /* @__PURE__ */ e(r, { title: "", children: /* @__PURE__ */ e(
+        y,
+        {
+          propKey: "videoId",
+          typeKey: "provider",
+          contentKey: "videoId",
+          kindFilter: "video",
+          defaultTypeValue: "r2",
+          variant: "chip",
+          label: "Video"
+        }
+      ) }) : /* @__PURE__ */ e(r, { title: "", children: /* @__PURE__ */ e(
+        t,
+        {
+          propKey: "videoId",
+          propType: "component",
+          type: "text",
+          label: o === "url" || o === "facebook" ? "Video URL" : "Video ID",
+          labelHide: !0,
+          placeholder: o === "url" || o === "facebook" ? "https://..." : "Enter video ID"
+        }
+      ) }),
+      (o === "r2" || o === "url") && (o === "r2" || b(p)) ? /* @__PURE__ */ d(
+        r,
+        {
+          title: "Playback",
+          icon: v.Type,
+          help: "HTML5 video only (uploaded files, or direct .mp4/.webm URLs). Ignored for YouTube/Vimeo iframe embeds.",
+          children: [
+            /* @__PURE__ */ e(
+              t,
+              {
+                propKey: "controls",
+                propType: "component",
+                type: "checkbox",
+                label: "Show controls",
+                labelWidth: "w-full",
+                inputWidth: "w-fit"
+              }
+            ),
+            /* @__PURE__ */ e(
+              t,
+              {
+                propKey: "autoPlay",
+                propType: "component",
+                type: "checkbox",
+                label: "Autoplay",
+                labelWidth: "w-full",
+                inputWidth: "w-fit"
+              }
+            ),
+            /* @__PURE__ */ e(
+              t,
+              {
+                propKey: "loop",
+                propType: "component",
+                type: "checkbox",
+                label: "Loop",
+                labelWidth: "w-full",
+                inputWidth: "w-fit"
+              }
+            ),
+            /* @__PURE__ */ e(
+              t,
+              {
+                propKey: "muted",
+                propType: "component",
+                type: "checkbox",
+                label: "Muted",
+                labelWidth: "w-full",
+                inputWidth: "w-fit"
+              }
+            ),
+            /* @__PURE__ */ e(
+              t,
+              {
+                propKey: "playsInline",
+                propType: "component",
+                type: "checkbox",
+                label: "Plays inline (iOS)",
+                labelWidth: "w-full",
+                inputWidth: "w-fit"
+              }
+            )
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ e(r, { title: "Accessibility", help: "Accessibility title for the video.", children: /* @__PURE__ */ e(
+        t,
+        {
+          propKey: "title",
+          propType: "component",
+          type: "text",
+          label: "Video Title",
+          labelHide: !1,
+          placeholder: "Describe the video content"
+        }
+      ) }),
+      /* @__PURE__ */ e(w, { id: "settings/ai-button" })
+    ] })
+  });
+};
+export {
+  U as VideoMainTab
+};