@pagehub/sdk 0.1.0

package/dist/chunks/Image.modifiers-DvGhsu_E.js

@@ -0,0 +1,147 @@
+import { eA as e } from "./index-lNS44FHV.js";
+const a = [
+  // Shape (using design tokens)
+  {
+    name: "rounded-box",
+    label: "Rounded",
+    category: "Shape",
+    description: "Rounded corners matching the design system border-radius token",
+    exclusive: !0
+  },
+  {
+    name: "rounded-field",
+    label: "Slight Round",
+    category: "Shape",
+    description: "Subtle rounding — softer than sharp but less than full rounded-box",
+    exclusive: !0
+  },
+  {
+    name: "rounded-full",
+    label: "Circle",
+    category: "Shape",
+    description: "Fully circular crop — works best with a square aspect ratio",
+    exclusive: !0
+  },
+  {
+    name: "rounded-none",
+    label: "Sharp",
+    category: "Shape",
+    description: "No border-radius — hard square corners",
+    exclusive: !0
+  },
+  // Fit
+  {
+    name: "object-cover",
+    label: "Cover",
+    category: "Fit",
+    description: "Crops to fill the container, maintaining aspect ratio — most common choice",
+    exclusive: !0
+  },
+  {
+    name: "object-contain",
+    label: "Contain",
+    category: "Fit",
+    description: "Fits entirely within bounds without cropping — may leave empty space at sides",
+    exclusive: !0
+  },
+  {
+    name: "object-fill",
+    label: "Fill",
+    category: "Fit",
+    description: "Stretches to fill the container — may distort the image",
+    exclusive: !0
+  },
+  // Aspect ratio
+  {
+    name: "aspect-square",
+    label: "Square",
+    category: "Aspect",
+    description: "Forces a 1:1 square crop",
+    exclusive: !0
+  },
+  {
+    name: "aspect-video",
+    label: "Video (16:9)",
+    category: "Aspect",
+    description: "Forces a 16:9 widescreen crop — good for video thumbnails and banners",
+    exclusive: !0
+  },
+  {
+    name: "aspect-[4/3]",
+    label: "4:3",
+    category: "Aspect",
+    description: "Classic 4:3 ratio — traditional photo and presentation format",
+    exclusive: !0
+  },
+  {
+    name: "aspect-[3/2]",
+    label: "3:2",
+    category: "Aspect",
+    description: "Standard photography ratio — natural proportions for portraits and product shots",
+    exclusive: !0
+  },
+  // Mask shapes
+  {
+    name: "mask mask-squircle",
+    label: "Squircle",
+    category: "Mask",
+    description: "Rounded square (squircle) crop — softer than a circle, more distinctive than rounded-box",
+    exclusive: !0
+  },
+  {
+    name: "mask mask-hexagon",
+    label: "Hexagon",
+    category: "Mask",
+    description: "Hexagon-shaped crop — good for team member avatars and icon grids",
+    exclusive: !0
+  },
+  {
+    name: "mask mask-diamond",
+    label: "Diamond",
+    category: "Mask",
+    description: "Rotated square (diamond) crop",
+    exclusive: !0
+  },
+  {
+    name: "mask mask-heart",
+    label: "Heart",
+    category: "Mask",
+    description: "Heart-shaped crop",
+    exclusive: !0
+  },
+  // Effects
+  {
+    name: "shadow-lg",
+    label: "Shadow",
+    category: "Effect",
+    description: "Soft drop shadow — adds depth"
+  },
+  {
+    name: "shadow-2xl",
+    label: "Deep Shadow",
+    category: "Effect",
+    description: "Large, dramatic drop shadow — stronger depth effect"
+  },
+  {
+    name: "ring-2 ring-primary",
+    label: "Ring",
+    category: "Effect",
+    description: "Colored border ring in the primary brand color"
+  },
+  {
+    name: "grayscale",
+    label: "Grayscale",
+    category: "Effect",
+    description: "Converts the image to black and white"
+  },
+  {
+    name: "opacity-80",
+    label: "Faded",
+    category: "Effect",
+    description: "Reduces opacity to 80% — creates a subtle de-emphasized look"
+  }
+];
+e("Image", a);
+export {
+  a as imageModifiers
+};

package/dist/chunks/Image.presets-CzQlMYAL.js

@@ -0,0 +1,15 @@
+import { ez as e } from "./index-lNS44FHV.js";
+const t = [
+  {
+    label: "Image",
+    description: "A picture that scales to fit its slot.",
+    props: {
+      type: "cdn",
+      className: "object-cover flex overflow-hidden md:h-auto"
+    }
+  }
+];
+e("Image", t);
+export {
+  t as imagePresets
+};

package/dist/chunks/ImageMainTab-CQY5c-b4.js

@@ -0,0 +1,63 @@
+import { jsxs as o, Fragment as l, jsx as e } from "react/jsx-runtime";
+import { M as i, c7 as p, bU as t, c8 as r, N as a } from "./index-lNS44FHV.js";
+import { r as n, S as c } from "./helpers-Bnp6O4wY.js";
+const h = () => n({
+  Content: /* @__PURE__ */ o(l, { children: [
+    /* @__PURE__ */ o(i, { collapsible: !1, children: [
+      /* @__PURE__ */ e(
+        p,
+        {
+          propKey: "videoId",
+          typeKey: "type",
+          contentKey: "src",
+          variant: "chip",
+          label: "Image"
+        }
+      ),
+      /* @__PURE__ */ e(
+        t,
+        {
+          propKey: "alt",
+          propType: "component",
+          type: "text",
+          label: "Alt Text",
+          placeholder: "Describe this image for screen readers"
+        }
+      ),
+      /* @__PURE__ */ e(r, { propKey: "objectFit", label: "Object Fit", prop: "objectFit", type: "select" }),
+      /* @__PURE__ */ e(
+        r,
+        {
+          propKey: "objectPosition",
+          label: "Object Position",
+          prop: "objectPosition",
+          type: "select"
+        }
+      ),
+      /* @__PURE__ */ e(a, { id: "settings/ai-button" })
+    ] }),
+    /* @__PURE__ */ o(
+      i,
+      {
+        full: 1,
+        title: "Loading",
+        icon: c.Type,
+        help: "Preload important images, like the first ones on the page. Lazy load images that are below the first page.",
+        children: [
+          /* @__PURE__ */ o(t, { propKey: "loading", propType: "component", type: "select", label: "Loading", children: [
+            /* @__PURE__ */ e("option", { value: "lazy", children: "lazy" }),
+            /* @__PURE__ */ e("option", { value: "eager", children: "eager" })
+          ] }),
+          /* @__PURE__ */ o(t, { propKey: "fetchPriority", propType: "component", type: "select", label: "Priority", children: [
+            /* @__PURE__ */ e("option", { value: "low", children: "Low" }),
+            /* @__PURE__ */ e("option", { value: "high", children: "High" }),
+            /* @__PURE__ */ e("option", { value: "", children: "Auto" })
+          ] })
+        ]
+      }
+    )
+  ] })
+});
+export {
+  h as ImageMainTab
+};

package/dist/chunks/ImageSettingsPanel-CT5fi4i-.js

@@ -0,0 +1,232 @@
+import { jsxs as a, Fragment as U, jsx as e } from "react/jsx-runtime";
+import { D as F, bn as Y, b$ as K, cG as X, bz as $, fr as _, fs as H, ds as J, ft as O, cJ as Q, bP as Z, fu as ee, c5 as te, d8 as ne } from "./index-lNS44FHV.js";
+import { useEditor as z, useNode as T } from "@craftjs/core";
+import { useState as x, useRef as R, useMemo as W, useEffect as h } from "react";
+function oe({
+  imageUrl: d,
+  onOpenChange: i
+}) {
+  const { actions: P, query: m } = z(), k = F(Y), b = F(K), y = F(X), {
+    actions: { setProp: v },
+    id: u,
+    props: g
+  } = T((n) => {
+    var t;
+    return {
+      id: n.id,
+      props: (t = n.data) == null ? void 0 : t.props
+    };
+  }), [l, w] = x(!1), [f, p] = x({ x: 50, y: 50 }), [I, N] = x({ x: 50, y: 50 }), M = R(null), B = R(null), o = R(null), { pageMedia: V } = W(() => $(m), [m]), S = d || _(g, V);
+  h(() => {
+    if (typeof document < "u") {
+      const n = document.querySelector(`[node-id="${u}"]`);
+      o.current = n;
+    }
+  }, [u]);
+  const D = (n, t) => {
+    if (!M.current) return;
+    const s = M.current.getBoundingClientRect(), r = Math.max(0, Math.min(100, (n - s.left) / s.width * 100)), c = Math.max(0, Math.min(100, (t - s.top) / s.height * 100));
+    p({ x: r, y: c }), j(r, c);
+  }, j = (n, t) => {
+    if (!o.current) return;
+    const s = Math.round(n), r = Math.round(t);
+    o.current.style.backgroundPosition = `${s}% ${r}%`;
+  }, C = () => {
+    const n = Math.round(f.x), t = Math.round(f.y);
+    o.current && (o.current.style.backgroundPosition = "");
+    const s = Q(b, k, y), r = b.dark ?? !1;
+    s.forEach((c) => {
+      Z({
+        propKey: "backgroundPosition",
+        value: `bg-[${n}%_${t}%]`,
+        setProp: v,
+        propType: "class",
+        view: c,
+        query: m,
+        actions: P,
+        nodeId: u,
+        classDark: r
+      });
+    }), N({ x: n, y: t }), w(!1);
+  }, { onPointerDown: q } = H({
+    onStart: (n, t) => {
+      n.preventDefault(), D(t.clientX, t.clientY);
+    },
+    onMove: (n, t) => {
+      D(t.clientX, t.clientY);
+    }
+  }), G = () => {
+    p(I), o.current && (o.current.style.backgroundPosition = "");
+  }, L = () => {
+    p(I), o.current && (o.current.style.backgroundPosition = ""), w(!1);
+  }, A = () => {
+    const t = ((g == null ? void 0 : g.className) || "").match(/bg-\[\d+%_\d+%\]/), s = t ? t[0] : null;
+    if (s && s.includes("bg-[") && s.includes("%")) {
+      const c = s.match(/bg-\[(\d+)%_(\d+)%\]/);
+      if (c) {
+        const E = { x: parseInt(c[1]), y: parseInt(c[2]) };
+        N(E), p(E);
+        return;
+      }
+    }
+    const r = { x: 50, y: 50 };
+    N(r), p(r);
+  };
+  return h(() => {
+    A();
+  }, [g]), h(() => {
+    l && (A(), o.current && (o.current.style.backgroundPosition = ""));
+  }, [l]), h(() => {
+    i == null || i(l);
+  }, [l, i]), h(() => () => {
+    o.current && (o.current.style.backgroundPosition = "");
+  }, []), S ? /* @__PURE__ */ a(U, { children: [
+    /* @__PURE__ */ e(
+      J,
+      {
+        onClick: () => l ? L() : w(!0),
+        icon: /* @__PURE__ */ e(O, { className: "size-3.5", "aria-hidden": !0 }),
+        children: l ? "Close Focal Point Picker" : "Focal Point Picker"
+      }
+    ),
+    l && /* @__PURE__ */ a("div", { className: "border-base-300 bg-base-200 flex flex-col gap-3 rounded-lg border p-3", children: [
+      /* @__PURE__ */ e("div", { className: "text-neutral-content text-xs", children: "Click or drag to set the focal point of your background image" }),
+      /* @__PURE__ */ a(
+        "div",
+        {
+          ref: M,
+          role: "presentation",
+          "aria-hidden": "true",
+          className: "border-base-300 bg-neutral relative aspect-video w-full cursor-crosshair touch-none overflow-hidden rounded-lg border-2 select-none",
+          onPointerDown: q,
+          children: [
+            /* @__PURE__ */ e(
+              "img",
+              {
+                ref: B,
+                src: S,
+                alt: "Background preview",
+                className: "size-full object-cover",
+                draggable: !1
+              }
+            ),
+            /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-0", children: /* @__PURE__ */ a("svg", { className: "size-full", children: [
+              /* @__PURE__ */ e(
+                "line",
+                {
+                  x1: "33.33%",
+                  y1: "0",
+                  x2: "33.33%",
+                  y2: "100%",
+                  stroke: "white",
+                  strokeWidth: "1",
+                  opacity: "0.3"
+                }
+              ),
+              /* @__PURE__ */ e(
+                "line",
+                {
+                  x1: "66.66%",
+                  y1: "0",
+                  x2: "66.66%",
+                  y2: "100%",
+                  stroke: "white",
+                  strokeWidth: "1",
+                  opacity: "0.3"
+                }
+              ),
+              /* @__PURE__ */ e(
+                "line",
+                {
+                  x1: "0",
+                  y1: "33.33%",
+                  x2: "100%",
+                  y2: "33.33%",
+                  stroke: "white",
+                  strokeWidth: "1",
+                  opacity: "0.3"
+                }
+              ),
+              /* @__PURE__ */ e(
+                "line",
+                {
+                  x1: "0",
+                  y1: "66.66%",
+                  x2: "100%",
+                  y2: "66.66%",
+                  stroke: "white",
+                  strokeWidth: "1",
+                  opacity: "0.3"
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ a(
+              "div",
+              {
+                className: "pointer-events-none absolute -mt-4 -ml-4 size-8",
+                style: { left: `${f.x}%`, top: `${f.y}%` },
+                children: [
+                  /* @__PURE__ */ e("div", { className: "absolute inset-0 rounded-full border-2 border-white shadow-lg" }),
+                  /* @__PURE__ */ e("div", { className: "bg-primary absolute inset-2 rounded-full shadow-lg" }),
+                  /* @__PURE__ */ e("div", { className: "absolute top-0 left-1/2 h-full w-px bg-white opacity-50" }),
+                  /* @__PURE__ */ e("div", { className: "absolute top-1/2 left-0 h-px w-full bg-white opacity-50" })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ a("div", { className: "text-neutral-content font-mono text-xs", children: [
+          "Position: ",
+          Math.round(f.x),
+          "%, ",
+          Math.round(f.y),
+          "%"
+        ] }),
+        /* @__PURE__ */ a("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ e("button", { type: "button", onClick: G, className: "btn btn-secondary btn-sm", children: "Reset" }),
+          /* @__PURE__ */ e("button", { type: "button", onClick: C, className: "btn btn-primary btn-sm", children: "Apply" })
+        ] })
+      ] })
+    ] })
+  ] }) : null;
+}
+function se() {
+  var y;
+  const { query: d } = z(), { props: i } = T((v) => {
+    var u;
+    return { props: (u = v.data) == null ? void 0 : u.props };
+  }), { pageMedia: P } = W(() => $(d), [d]), m = !!((y = i == null ? void 0 : i.background) != null && y.image), [k, b] = x(!1);
+  return m ? /* @__PURE__ */ a("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ e(
+      oe,
+      {
+        imageUrl: _(i, P),
+        onOpenChange: b
+      }
+    ),
+    !k && /* @__PURE__ */ e(ee, { sectionId: "image-settings" })
+  ] }) : /* @__PURE__ */ e("p", { className: "text-neutral-content text-xs italic", children: "Pick an image first to configure its settings." });
+}
+function le({ initialPosition: d, onClose: i }) {
+  return /* @__PURE__ */ e(
+    te,
+    {
+      isOpen: !0,
+      onClose: i,
+      title: "Image Settings",
+      storageKey: "image-settings",
+      minWidth: 300,
+      maxWidth: 520,
+      minHeight: 320,
+      initialPosition: d,
+      zIndex: ne,
+      scrollable: !0,
+      children: /* @__PURE__ */ e(se, {})
+    }
+  );
+}
+export {
+  le as default
+};

package/dist/chunks/LayersDialog-Peap9kGv.js

@@ -0,0 +1,29 @@
+import { jsx as e } from "react/jsx-runtime";
+import { cO as i, c5 as d, O as r, cP as s, cz as l } from "./index-lNS44FHV.js";
+function h({ isOpen: t, onClose: o }) {
+  const a = i() ? "left" : "right";
+  return /* @__PURE__ */ e(
+    d,
+    {
+      isOpen: t,
+      onClose: o,
+      title: "Layers",
+      icon: /* @__PURE__ */ e(l, { className: "size-3.5" }),
+      storageKey: "layers-dialog",
+      autoSize: !1,
+      defaultWidth: 340,
+      defaultHeight: 500,
+      minWidth: 280,
+      maxWidth: 600,
+      minHeight: 300,
+      maxHeight: 700,
+      dockToEdge: a,
+      closeButtonSide: "right",
+      zIndex: r,
+      children: /* @__PURE__ */ e("div", { className: "bg-base-100 text-base-content flex min-h-0 flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ e(s, { expandRootOnLoad: !0 }) })
+    }
+  );
+}
+export {
+  h as LayersDialog
+};

package/dist/chunks/LayoutPresetPanel-Cie8RE_5.js

@@ -0,0 +1,80 @@
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { c5 as g, d8 as y, ed as f, R as c } from "./index-lNS44FHV.js";
+import { G as h, g as d, D as x } from "./useLayoutPreset-C1i4ig-r.js";
+const u = "border-primary bg-primary/10 text-primary ring-1 ring-primary/25 hover:border-primary hover:bg-primary/15 hover:text-primary";
+function v(t) {
+  return t.name.toLowerCase().replace(/\s+/g, "-");
+}
+function N(t, i, a) {
+  return a.currentLayoutMode !== i || String(a.currentPresetLayout ?? "").trim().toLowerCase() !== v(t) ? !1 : t.columns === void 0 ? !0 : Number(a.currentLayoutColumns) === Number(t.columns);
+}
+function A({ initialPosition: t, onClose: i, lp: a }) {
+  const n = [
+    { label: "Side by side", presets: d("column"), layoutMode: "flex-row" },
+    { label: "Stacked", presets: d("row"), layoutMode: "flex-col" },
+    { label: "Grid", presets: h, layoutMode: "grid" }
+  ], m = (e) => {
+    a.handlePresetSelect(e), i();
+  }, p = x;
+  return /* @__PURE__ */ r(
+    g,
+    {
+      isOpen: !0,
+      onClose: i,
+      title: "Layout",
+      storageKey: "layout-preset",
+      minWidth: 280,
+      maxHeight: 640,
+      initialPosition: t,
+      zIndex: y,
+      scrollable: !0,
+      children: /* @__PURE__ */ s("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-3", children: [
+        n.map((e) => /* @__PURE__ */ s("div", { children: [
+          /* @__PURE__ */ r("div", { className: "text-neutral-content mb-1.5 text-[10px] font-semibold tracking-wider uppercase", children: e.label }),
+          /* @__PURE__ */ r(f, { className: "max-h-[120px]", children: /* @__PURE__ */ r("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(7rem,1fr))] gap-1.5 pr-1.5", children: e.presets.map((l, b) => {
+            const o = N(l, e.layoutMode, a);
+            return /* @__PURE__ */ r(
+              "button",
+              {
+                type: "button",
+                "aria-pressed": o,
+                "aria-label": l.name,
+                onClick: () => m(l),
+                className: c(
+                  "ph-toolbar-dashed-btn items-center justify-center p-2",
+                  o && u
+                ),
+                children: /* @__PURE__ */ r("div", { className: "w-full", children: l.icon })
+              },
+              `${e.label}-${b}`
+            );
+          }) }) })
+        ] }, e.label)),
+        /* @__PURE__ */ s("div", { children: [
+          /* @__PURE__ */ r("div", { className: "text-neutral-content mb-1.5 text-[10px] font-semibold tracking-wider uppercase", children: "Display" }),
+          /* @__PURE__ */ r("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(7rem,1fr))] gap-1.5", children: p.map((e) => {
+            const l = a.currentDisplay === e.value;
+            return /* @__PURE__ */ r(
+              "button",
+              {
+                type: "button",
+                "aria-pressed": l,
+                "aria-label": e.label,
+                onClick: () => a.handleDisplayVariant(e.value),
+                className: c(
+                  "ph-toolbar-dashed-btn items-center justify-center p-2 text-xs",
+                  l && u
+                ),
+                children: e.label
+              },
+              e.value
+            );
+          }) })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  A as default
+};

package/dist/chunks/LayoutPresetSlot-DYMrcaLx.js

@@ -0,0 +1,16 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useNode as s } from "@craftjs/core";
+import { u as m, L as p } from "./useLayoutPreset-C1i4ig-r.js";
+const u = /* @__PURE__ */ new Set(["Container", "Data", "Header", "Footer", "Form"]);
+function f() {
+  const { componentName: a } = s((e) => {
+    var t, o;
+    return {
+      componentName: ((t = e.data) == null ? void 0 : t.name) || ((o = e.data) == null ? void 0 : o.displayName) || ""
+    };
+  }), r = m({ propKey: "layoutPreset" });
+  return u.has(a) ? /* @__PURE__ */ n(p, { lp: r, sectionWrapper: !1 }) : null;
+}
+export {
+  f as LayoutPresetSlot
+};

package/dist/chunks/Link.modifiers-t0fAoO_d.js

@@ -0,0 +1,76 @@
+import { eA as e } from "./index-lNS44FHV.js";
+const r = [
+  // DaisyUI link color variants
+  {
+    name: "link-primary",
+    label: "Primary",
+    category: "Color",
+    description: "Primary brand color",
+    exclusive: !0,
+    requires: "link"
+  },
+  {
+    name: "link-secondary",
+    label: "Secondary",
+    category: "Color",
+    description: "Secondary brand color",
+    exclusive: !0,
+    requires: "link"
+  },
+  {
+    name: "link-accent",
+    label: "Accent",
+    category: "Color",
+    description: "Accent color",
+    exclusive: !0,
+    requires: "link"
+  },
+  {
+    name: "link-neutral",
+    label: "Neutral",
+    category: "Color",
+    description: "Neutral color",
+    exclusive: !0,
+    requires: "link"
+  },
+  {
+    name: "link-info",
+    label: "Info",
+    category: "Color",
+    exclusive: !0,
+    requires: "link"
+  },
+  {
+    name: "link-success",
+    label: "Success",
+    category: "Color",
+    exclusive: !0,
+    requires: "link"
+  },
+  {
+    name: "link-warning",
+    label: "Warning",
+    category: "Color",
+    exclusive: !0,
+    requires: "link"
+  },
+  {
+    name: "link-error",
+    label: "Error",
+    category: "Color",
+    exclusive: !0,
+    requires: "link"
+  },
+  // DaisyUI link style variants
+  {
+    name: "link-hover",
+    label: "Underline on Hover",
+    category: "Style",
+    description: "Underline appears only on hover",
+    requires: "link"
+  }
+];
+e("Link", r);
+export {
+  r as linkModifiers
+};

package/dist/chunks/Link.presets-Q5HuImJf.js

@@ -0,0 +1,28 @@
+import { ez as e } from "./index-lNS44FHV.js";
+const r = [
+  {
+    label: "Link",
+    description: "Plain text you can click to go somewhere.",
+    props: {
+      text: "Learn more",
+      className: "link link-hover"
+    }
+  },
+  {
+    label: "Arrow Link",
+    description: "A 'read more' style text link with an arrow on the end.",
+    props: {
+      text: "Read more",
+      icon: {
+        value: "ref-icon:tb/TbArrowRight",
+        position: "right",
+        size: "w-4 h-4"
+      },
+      className: "link link-hover"
+    }
+  }
+];
+e("Link", r);
+export {
+  r as linkPresets
+};