@byscott-io/pagelet 0.0.0-stage → 0.2.0

package/dist/index.js

@@ -0,0 +1,922 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { migrate, Render } from '@puckeditor/core/rsc';
+import { useState } from 'react';
+
+const DOCUMENT_VERSION = 1;
+function emptyData() {
+  return { root: { props: {} }, content: [] };
+}
+function createDocument(data = emptyData()) {
+  return { pagelet: DOCUMENT_VERSION, data };
+}
+function upgradeDocument(document, palette) {
+  if (document == null) return createDocument();
+  if (typeof document !== "object") {
+    throw new TypeError("pagelet: a page document must be an object");
+  }
+  let doc = document;
+  if (!("pagelet" in doc)) {
+    if (!("content" in doc) && !("root" in doc)) {
+      throw new TypeError('pagelet: not a page document (no "pagelet" version and no Puck data)');
+    }
+    doc = createDocument(doc);
+  }
+  if (doc.pagelet > DOCUMENT_VERSION) {
+    throw new Error(
+      `pagelet: this page was saved by a newer pagelet (format ${doc.pagelet}); this version reads up to format ${DOCUMENT_VERSION}. Upgrade @byscott-io/pagelet.`
+    );
+  }
+  const data = { ...emptyData(), ...doc.data };
+  return createDocument(palette && needsPuckMigration(data) ? migrate(data, palette.config) : data);
+}
+function needsPuckMigration(data) {
+  const zones = data.zones ?? {};
+  if (Object.values(zones).some((content) => Array.isArray(content) && content.length > 0)) return true;
+  const root = data.root ?? {};
+  return Object.keys(root).some((key) => key !== "props" && key !== "readOnly");
+}
+function pageSettings(document) {
+  const props = upgradeDocument(document)?.data?.root?.props ?? {};
+  return { title: props.title || "", background: props.background ?? "site" };
+}
+
+function PageletPage({ document, palette, theme }) {
+  if (!palette) throw new Error("pagelet: <PageletPage> needs a palette (see createPalette)");
+  const { data } = upgradeDocument(document, palette);
+  return /* @__PURE__ */ jsx(Render, { config: palette.config, data, metadata: { pageletTheme: theme } });
+}
+
+const outline = { fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
+const PATHS = {
+  location: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12z" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "10", r: "2.5" })
+  ] }),
+  phone: /* @__PURE__ */ jsx("path", { d: "M6.5 3h3l1.5 4.5-2 1.5a12 12 0 0 0 6 6l1.5-2L21 14.5v3a2 2 0 0 1-2 2A16 16 0 0 1 4.5 5a2 2 0 0 1 2-2z" }),
+  email: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 7l9 6 9-6" })
+  ] }),
+  video: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "2.5", y: "6", width: "13", height: "12", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M15.5 10.5 21.5 7v10l-6-3.5z" })
+  ] }),
+  calendar: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "18", height: "16", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 10h18M8 3v4M16 3v4" })
+  ] }),
+  clock: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 7v5l3 2" })
+  ] }),
+  link: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1" })
+  ] }),
+  facebook: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "3" }),
+    /* @__PURE__ */ jsx("path", { d: "M15.5 8H14a2 2 0 0 0-2 2v11M9.5 13h5" })
+  ] }),
+  youtube: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "2.5", y: "5.5", width: "19", height: "13", rx: "4" }),
+    /* @__PURE__ */ jsx("path", { d: "M10.5 9.5v5l4-2.5z" })
+  ] })
+};
+const iconNames = Object.keys(PATHS);
+const iconOptions = [{ label: "None", value: "" }].concat(
+  iconNames.map((name) => ({ label: name[0].toUpperCase() + name.slice(1), value: name }))
+);
+function Icon({ name, size = "1.1em", style }) {
+  const glyph = PATHS[name];
+  if (!glyph) return null;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: size,
+      height: size,
+      "aria-hidden": "true",
+      focusable: "false",
+      style: { ...outline, verticalAlign: "-0.15em", flexShrink: 0, ...style },
+      children: glyph
+    }
+  );
+}
+
+const SAFE_SCHEMES = ["http:", "https:", "mailto:", "tel:"];
+function safeUrl(value) {
+  if (typeof value !== "string") return void 0;
+  const url = value.trim();
+  if (url === "") return void 0;
+  if (url.startsWith("/") && !url.startsWith("//")) return url;
+  if (url.startsWith("#") || url.startsWith("?")) return url;
+  const normalized = url.replace(/[\u0000- ]/g, "").toLowerCase();
+  const scheme = normalized.match(/^([a-z][a-z0-9+.-]*):/);
+  if (!scheme) return void 0;
+  return SAFE_SCHEMES.includes(`${scheme[1]}:`) ? url : void 0;
+}
+function safeImageUrl(value) {
+  const url = safeUrl(value);
+  if (!url) return void 0;
+  return /^(mailto|tel):/i.test(url) ? void 0 : url;
+}
+
+const defaultTheme = {
+  colorText: "#1f2933",
+  colorBackground: "#ffffff",
+  colorMuted: "#f3f4f6",
+  colorAccent: "#2457a6",
+  colorAccentText: "#ffffff",
+  fontBody: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+  fontHeading: "inherit",
+  radius: "8px",
+  maxWidth: "1100px",
+  space: "24px"
+};
+const TOKEN_NAMES = Object.keys(defaultTheme);
+function cssVariableName(token) {
+  return `--pagelet-${token.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}`;
+}
+function themeToStyle(theme = {}) {
+  const merged = { ...defaultTheme, ...theme };
+  const style = {};
+  for (const token of TOKEN_NAMES) {
+    style[cssVariableName(token)] = String(merged[token]);
+  }
+  style.color = "var(--pagelet-color-text)";
+  style.background = "var(--pagelet-color-background)";
+  style.fontFamily = "var(--pagelet-font-body)";
+  return style;
+}
+function tokenVar(token) {
+  return `var(${cssVariableName(token)})`;
+}
+
+const alignOptions = [
+  { label: "Left", value: "left" },
+  { label: "Center", value: "center" },
+  { label: "Right", value: "right" }
+];
+const blockMargin = (align) => align === "center" ? { marginInline: "auto" } : align === "right" ? { marginLeft: "auto" } : {};
+function paragraphs(text) {
+  return String(text ?? "").split(/\n\s*\n/).map((paragraph) => paragraph.trim()).filter(Boolean);
+}
+function Paragraphs({ text, style }) {
+  return paragraphs(text).map((paragraph, index) => /* @__PURE__ */ jsx("p", { style: { margin: "0 0 1em", whiteSpace: "pre-line", ...style }, children: paragraph }, index));
+}
+function ButtonLink({ label, href, variant = "primary" }) {
+  const url = safeUrl(href);
+  if (!label) return null;
+  const primary = variant !== "outline";
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: url,
+      style: {
+        display: "inline-block",
+        padding: "10px 20px",
+        borderRadius: tokenVar("radius"),
+        border: `2px solid ${tokenVar("colorAccent")}`,
+        background: primary ? tokenVar("colorAccent") : "transparent",
+        color: primary ? tokenVar("colorAccentText") : tokenVar("colorAccent"),
+        fontWeight: 600,
+        textDecoration: "none"
+      },
+      children: label
+    }
+  );
+}
+const buttonFields = {
+  buttonLabel: { type: "text", label: "Button label" },
+  buttonHref: { type: "text", label: "Button link" }
+};
+const Heading = {
+  label: "Heading",
+  category: "content",
+  fields: {
+    text: { type: "text" },
+    level: {
+      type: "select",
+      options: [
+        { label: "Large (H1)", value: "h1" },
+        { label: "Medium (H2)", value: "h2" },
+        { label: "Small (H3)", value: "h3" }
+      ]
+    },
+    align: { type: "radio", options: alignOptions }
+  },
+  defaultProps: { text: "Heading", level: "h2", align: "left" },
+  render: ({ text, level, align }) => {
+    const Tag = ["h1", "h2", "h3"].includes(level) ? level : "h2";
+    return /* @__PURE__ */ jsx(Tag, { style: { fontFamily: tokenVar("fontHeading"), textAlign: align, margin: "0 0 0.5em", textWrap: "balance" }, children: text });
+  }
+};
+const Text = {
+  label: "Text",
+  category: "content",
+  fields: {
+    text: { type: "textarea" },
+    align: { type: "radio", options: alignOptions }
+  },
+  defaultProps: { text: "Write something here.", align: "left" },
+  render: ({ text, align }) => /* @__PURE__ */ jsx("div", { style: { textAlign: align, maxWidth: "68ch", ...blockMargin(align) }, children: /* @__PURE__ */ jsx(Paragraphs, { text }) })
+};
+const Button = {
+  label: "Button",
+  category: "content",
+  fields: {
+    label: { type: "text" },
+    href: { type: "text", label: "Link" },
+    variant: {
+      type: "radio",
+      options: [
+        { label: "Filled", value: "primary" },
+        { label: "Outline", value: "outline" }
+      ]
+    },
+    align: { type: "radio", options: alignOptions }
+  },
+  defaultProps: { label: "Learn more", href: "#", variant: "primary", align: "left" },
+  render: ({ label, href, variant, align }) => /* @__PURE__ */ jsx("div", { style: { textAlign: align, margin: "0 0 1em" }, children: /* @__PURE__ */ jsx(ButtonLink, { label, href, variant }) })
+};
+const Hero = {
+  label: "Hero",
+  category: "content",
+  fields: {
+    heading: { type: "text" },
+    subheading: { type: "textarea" },
+    imageUrl: { type: "text", label: "Background image URL" },
+    ...buttonFields
+  },
+  defaultProps: { heading: "Welcome", subheading: "", imageUrl: "", buttonLabel: "", buttonHref: "" },
+  render: ({ heading, subheading, imageUrl, buttonLabel, buttonHref }) => {
+    const image = safeImageUrl(imageUrl);
+    return /* @__PURE__ */ jsx(
+      "header",
+      {
+        style: {
+          padding: "96px 16px",
+          textAlign: "center",
+          color: image ? "#ffffff" : tokenVar("colorAccentText"),
+          background: image ? `linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url("${encodeURI(image)}") center / cover` : tokenVar("colorAccent")
+        },
+        children: /* @__PURE__ */ jsxs("div", { style: { maxWidth: "760px", margin: "0 auto" }, children: [
+          /* @__PURE__ */ jsx("h1", { style: { fontFamily: tokenVar("fontHeading"), fontSize: "clamp(2rem, 5vw, 3.25rem)", margin: "0 0 0.4em", textWrap: "balance" }, children: heading }),
+          /* @__PURE__ */ jsx(Paragraphs, { text: subheading, style: { fontSize: "1.15rem" } }),
+          /* @__PURE__ */ jsx(ButtonLink, { label: buttonLabel, href: buttonHref, variant: "outline" })
+        ] })
+      }
+    );
+  }
+};
+const CallToAction = {
+  label: "Call to action",
+  category: "content",
+  fields: {
+    heading: { type: "text" },
+    text: { type: "textarea" },
+    ...buttonFields
+  },
+  defaultProps: { heading: "Join us", text: "", buttonLabel: "Get in touch", buttonHref: "#" },
+  render: ({ heading, text, buttonLabel, buttonHref }) => /* @__PURE__ */ jsxs("div", { style: { background: tokenVar("colorMuted"), borderRadius: tokenVar("radius"), padding: "40px 24px", textAlign: "center" }, children: [
+    /* @__PURE__ */ jsx("h2", { style: { fontFamily: tokenVar("fontHeading"), margin: "0 0 0.5em" }, children: heading }),
+    /* @__PURE__ */ jsx(Paragraphs, { text }),
+    /* @__PURE__ */ jsx(ButtonLink, { label: buttonLabel, href: buttonHref })
+  ] })
+};
+const Cards = {
+  label: "Cards",
+  category: "content",
+  fields: {
+    items: {
+      type: "array",
+      getItemSummary: (item) => item.title || "Card",
+      arrayFields: {
+        title: { type: "text" },
+        text: { type: "textarea" },
+        imageUrl: { type: "text", label: "Image URL" },
+        href: { type: "text", label: "Link (optional)" }
+      },
+      defaultItemProps: { title: "Card title", text: "", imageUrl: "", href: "" }
+    }
+  },
+  defaultProps: { items: [{ title: "Card title", text: "A short description.", imageUrl: "", href: "" }] },
+  render: ({ items = [] }) => /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 240px), 1fr))", gap: tokenVar("space") }, children: items.map((item, index) => {
+    const image = safeImageUrl(item.imageUrl);
+    const href = safeUrl(item.href);
+    const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+      image && /* @__PURE__ */ jsx("img", { src: image, alt: "", style: { width: "100%", aspectRatio: "16 / 9", objectFit: "cover", display: "block" } }),
+      /* @__PURE__ */ jsxs("div", { style: { padding: "16px" }, children: [
+        /* @__PURE__ */ jsx("h3", { style: { fontFamily: tokenVar("fontHeading"), margin: "0 0 0.4em" }, children: item.title }),
+        /* @__PURE__ */ jsx(Paragraphs, { text: item.text })
+      ] })
+    ] });
+    const cardStyle = { display: "block", background: tokenVar("colorMuted"), borderRadius: tokenVar("radius"), overflow: "hidden", color: "inherit", textDecoration: "none" };
+    return href ? /* @__PURE__ */ jsx("a", { href, style: cardStyle, children: body }, index) : /* @__PURE__ */ jsx("div", { style: cardStyle, children: body }, index);
+  }) })
+};
+const Faq = {
+  label: "FAQ",
+  category: "content",
+  fields: {
+    items: {
+      type: "array",
+      getItemSummary: (item) => item.question || "Question",
+      arrayFields: { question: { type: "text" }, answer: { type: "textarea" } },
+      defaultItemProps: { question: "Question?", answer: "" }
+    }
+  },
+  defaultProps: { items: [{ question: "Question?", answer: "Answer." }] },
+  render: ({ items = [] }) => /* @__PURE__ */ jsx("div", { children: items.map((item, index) => /* @__PURE__ */ jsxs("details", { style: { borderBottom: `1px solid ${tokenVar("colorMuted")}`, padding: "12px 0" }, children: [
+    /* @__PURE__ */ jsx("summary", { style: { fontWeight: 600, cursor: "pointer" }, children: item.question }),
+    /* @__PURE__ */ jsx("div", { style: { paddingTop: "8px" }, children: /* @__PURE__ */ jsx(Paragraphs, { text: item.answer }) })
+  ] }, index)) })
+};
+const Quote = {
+  label: "Quote",
+  category: "content",
+  fields: {
+    text: { type: "textarea" },
+    citation: { type: "text", label: "Citation (e.g. Matthew 28:19-20 ESV)" },
+    citationAlign: { type: "radio", label: "Citation alignment", options: alignOptions }
+  },
+  defaultProps: { text: "Quotation", citation: "", citationAlign: "right" },
+  render: ({ text, citation, citationAlign }) => /* @__PURE__ */ jsxs("figure", { style: { margin: "0 0 1em", maxWidth: "68ch" }, children: [
+    /* @__PURE__ */ jsx("blockquote", { style: { margin: 0, fontStyle: "italic" }, children: /* @__PURE__ */ jsx(Paragraphs, { text, style: { margin: "0 0 0.5em" } }) }),
+    citation && /* @__PURE__ */ jsx("figcaption", { style: { textAlign: citationAlign ?? "right" }, children: citation })
+  ] })
+};
+const IconList = {
+  label: "Icon list",
+  category: "content",
+  fields: {
+    items: {
+      type: "array",
+      getItemSummary: (item) => item.text?.split("\n")[0] || "Item",
+      arrayFields: {
+        icon: { type: "select", options: iconOptions },
+        text: { type: "textarea", label: "Text (line breaks are kept)" },
+        href: { type: "text", label: "Link (optional): https://, tel:, mailto:" }
+      },
+      defaultItemProps: { icon: "link", text: "", href: "" }
+    },
+    align: { type: "radio", options: alignOptions }
+  },
+  defaultProps: { items: [{ icon: "phone", text: "(555) 555-0100", href: "tel:+15555550100" }], align: "left" },
+  render: ({ items = [], align }) => /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", padding: 0, margin: "0 0 1em", textAlign: align }, children: items.map((item, index) => {
+    const href = safeUrl(item.href);
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Icon, { name: item.icon, style: { marginRight: "0.4em" } }),
+      /* @__PURE__ */ jsx("span", { style: { whiteSpace: "pre-line" }, children: item.text })
+    ] });
+    return /* @__PURE__ */ jsx("li", { style: { margin: "0.35em 0" }, children: href ? /* @__PURE__ */ jsx("a", { href, style: { color: tokenVar("colorAccent") }, children: content }) : content }, index);
+  }) })
+};
+const Schedule = {
+  label: "Schedule",
+  category: "content",
+  fields: {
+    rows: {
+      type: "array",
+      getItemSummary: (row) => [row.day, row.time, row.what].filter(Boolean).join(" ") || "Row",
+      arrayFields: { day: { type: "text" }, time: { type: "text" }, what: { type: "text" } },
+      defaultItemProps: { day: "Sunday", time: "10:00", what: "Worship" }
+    },
+    align: { type: "radio", options: alignOptions }
+  },
+  defaultProps: { rows: [{ day: "Sunday", time: "10:00", what: "Worship" }], align: "center" },
+  render: ({ rows = [], align }) => /* @__PURE__ */ jsx("table", { style: { borderCollapse: "collapse", margin: "0 0 1em", ...blockMargin(align ?? "center") }, children: /* @__PURE__ */ jsx("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsxs("tr", { children: [
+    /* @__PURE__ */ jsx("td", { style: { padding: "4px 12px", textAlign: "right", fontWeight: 600 }, children: row.day }),
+    /* @__PURE__ */ jsx("td", { style: { padding: "4px 12px", textAlign: "right", fontVariantNumeric: "tabular-nums" }, children: row.time }),
+    /* @__PURE__ */ jsx("td", { style: { padding: "4px 12px" }, children: row.what })
+  ] }, index)) }) })
+};
+
+function overlayColor(hex, opacityPercent) {
+  let value = String(hex ?? "").trim().replace(/^#/, "");
+  if (/^[0-9a-f]{3}$/i.test(value)) value = value.split("").map((c) => c + c).join("");
+  if (!/^[0-9a-f]{6}$/i.test(value)) value = "ffffff";
+  const [r, g, b] = [0, 2, 4].map((i) => parseInt(value.slice(i, i + 2), 16));
+  const opacity = Math.min(100, Math.max(0, Number(opacityPercent) || 0)) / 100;
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+function cssImage(url) {
+  const safe = safeImageUrl(url);
+  return safe ? `url("${encodeURI(safe)}")` : void 0;
+}
+const percentField = (label) => ({ type: "number", label, min: 0, max: 100 });
+
+const SPACING = { none: "0", small: "16px", medium: "40px", large: "80px" };
+const spacingOptions = Object.keys(SPACING).map((value) => ({ label: value, value }));
+const BACKGROUNDS = {
+  none: "transparent",
+  muted: tokenVar("colorMuted"),
+  accent: tokenVar("colorAccent")
+};
+const Section = {
+  label: "Section",
+  category: "layout",
+  fields: {
+    background: {
+      type: "select",
+      options: [
+        { label: "None", value: "none" },
+        { label: "Muted", value: "muted" },
+        { label: "Accent", value: "accent" }
+      ]
+    },
+    backgroundImage: { type: "text", label: "Background image URL (optional)" },
+    overlayColor: { type: "text", label: "Overlay color over the image (hex, e.g. #ffffff)" },
+    overlayOpacity: percentField("Overlay opacity %"),
+    padding: { type: "select", options: spacingOptions },
+    content: { type: "slot" }
+  },
+  defaultProps: { background: "none", backgroundImage: "", overlayColor: "#ffffff", overlayOpacity: 85, padding: "medium" },
+  render: ({ background, backgroundImage, overlayColor: color, overlayOpacity, padding, content: Content }) => {
+    const image = cssImage(backgroundImage);
+    const inner = /* @__PURE__ */ jsx("div", { style: { maxWidth: tokenVar("maxWidth"), margin: "0 auto", paddingInline: "16px" }, children: /* @__PURE__ */ jsx(Content, {}) });
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        style: {
+          background: image ? `${image} center / cover` : BACKGROUNDS[background] ?? BACKGROUNDS.none,
+          color: !image && background === "accent" ? tokenVar("colorAccentText") : void 0
+        },
+        children: /* @__PURE__ */ jsx("div", { style: { paddingBlock: SPACING[padding] ?? SPACING.medium, background: image ? overlayColor(color, overlayOpacity ?? 85) : void 0 }, children: inner })
+      }
+    );
+  }
+};
+const Columns = {
+  label: "Columns",
+  category: "layout",
+  fields: {
+    count: {
+      type: "radio",
+      options: [
+        { label: "2", value: 2 },
+        { label: "3", value: 3 }
+      ]
+    },
+    first: { type: "slot" },
+    second: { type: "slot" },
+    third: { type: "slot" }
+  },
+  defaultProps: { count: 2 },
+  render: ({ count, first: First, second: Second, third: Third }) => {
+    const columns = count === 3 ? [First, Second, Third] : [First, Second];
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${count === 3 ? 240 : 320}px), 1fr))`,
+          gap: tokenVar("space")
+        },
+        children: columns.map((Column, index) => /* @__PURE__ */ jsx("div", { style: { minWidth: 0 }, children: /* @__PURE__ */ jsx(Column, {}) }, index))
+      }
+    );
+  }
+};
+const Spacer = {
+  label: "Spacer",
+  category: "layout",
+  fields: { size: { type: "select", options: spacingOptions.slice(1) } },
+  defaultProps: { size: "medium" },
+  render: ({ size }) => /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { height: SPACING[size] ?? SPACING.medium } })
+};
+const Divider = {
+  label: "Divider",
+  category: "layout",
+  fields: {},
+  render: () => /* @__PURE__ */ jsx("hr", { style: { border: 0, borderTop: `1px solid ${tokenVar("colorMuted")}`, margin: `${tokenVar("space")} 0` } })
+};
+
+const Image = {
+  label: "Image",
+  category: "media",
+  fields: {
+    url: { type: "text", label: "Image URL" },
+    alt: { type: "text", label: "Description (for screen readers)" },
+    caption: { type: "text" },
+    align: {
+      type: "radio",
+      options: [
+        { label: "Left", value: "left" },
+        { label: "Center", value: "center" },
+        { label: "Right", value: "right" }
+      ]
+    },
+    width: { ...percentField("Width (% of the column)"), min: 10 }
+  },
+  defaultProps: { url: "", alt: "", caption: "", align: "left", width: 100 },
+  render: ({ url, alt, caption, align, width }) => {
+    const src = safeImageUrl(url);
+    if (!src) return null;
+    const requested = Number.isFinite(Number(width)) && width !== "" && width !== null ? Number(width) : 100;
+    const percent = Math.min(100, Math.max(10, requested));
+    const side = align === "center" ? { marginInline: "auto" } : align === "right" ? { marginLeft: "auto" } : {};
+    return /* @__PURE__ */ jsxs("figure", { style: { margin: "0 0 1em", width: `${percent}%`, maxWidth: "100%", ...side }, children: [
+      /* @__PURE__ */ jsx("img", { src, alt: alt ?? "", style: { width: "100%", height: "auto", display: "block", borderRadius: tokenVar("radius") } }),
+      caption && /* @__PURE__ */ jsx("figcaption", { style: { fontSize: "0.9em", opacity: 0.75, marginTop: "6px", textAlign: align }, children: caption })
+    ] });
+  }
+};
+const ImageText = {
+  label: "Image with text",
+  category: "media",
+  fields: {
+    url: { type: "text", label: "Image URL" },
+    alt: { type: "text", label: "Image description" },
+    heading: { type: "text" },
+    text: { type: "textarea" },
+    imageSide: {
+      type: "radio",
+      options: [
+        { label: "Left", value: "left" },
+        { label: "Right", value: "right" }
+      ]
+    }
+  },
+  defaultProps: { url: "", alt: "", heading: "Heading", text: "", imageSide: "left" },
+  render: ({ url, alt, heading, text, imageSide }) => {
+    const src = safeImageUrl(url);
+    const image = src ? /* @__PURE__ */ jsx("img", { src, alt: alt ?? "", style: { width: "100%", height: "auto", display: "block", borderRadius: tokenVar("radius"), order: imageSide === "right" ? 2 : 0 } }) : null;
+    const words = /* @__PURE__ */ jsxs("div", { style: { minWidth: 0, order: 1 }, children: [
+      /* @__PURE__ */ jsx("h2", { style: { fontFamily: tokenVar("fontHeading"), margin: "0 0 0.5em" }, children: heading }),
+      String(text ?? "").split(/\n\s*\n/).filter((paragraph) => paragraph.trim()).map((paragraph, index) => /* @__PURE__ */ jsx("p", { style: { margin: "0 0 1em" }, children: paragraph.trim() }, index))
+    ] });
+    return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 300px), 1fr))", gap: tokenVar("space"), alignItems: "center" }, children: [
+      image,
+      words
+    ] });
+  }
+};
+function embedUrl(value) {
+  let url;
+  try {
+    url = new URL(String(value ?? "").trim());
+  } catch {
+    return void 0;
+  }
+  if (url.protocol !== "https:" && url.protocol !== "http:") return void 0;
+  const host = url.hostname.replace(/^www\./, "").replace(/^m\./, "");
+  let id;
+  if (host === "youtube.com") {
+    id = url.pathname === "/watch" ? url.searchParams.get("v") : url.pathname.match(/^\/(?:embed|shorts|live)\/([^/]+)/)?.[1];
+    return id && /^[\w-]{6,}$/.test(id) ? `https://www.youtube-nocookie.com/embed/${id}` : void 0;
+  }
+  if (host === "youtu.be") {
+    id = url.pathname.slice(1);
+    return /^[\w-]{6,}$/.test(id) ? `https://www.youtube-nocookie.com/embed/${id}` : void 0;
+  }
+  if (host === "vimeo.com") {
+    id = url.pathname.match(/^\/(\d+)/)?.[1];
+    return id ? `https://player.vimeo.com/video/${id}` : void 0;
+  }
+  return void 0;
+}
+const VideoEmbed = {
+  label: "Video (YouTube or Vimeo)",
+  category: "media",
+  fields: {
+    url: { type: "text", label: "Video link" },
+    title: { type: "text", label: "Title (for screen readers)" }
+  },
+  defaultProps: { url: "", title: "Video" },
+  render: ({ url, title }) => {
+    const src = embedUrl(url);
+    if (!src) return null;
+    return /* @__PURE__ */ jsx("div", { style: { position: "relative", aspectRatio: "16 / 9", maxWidth: "100%", margin: "0 0 1em" }, children: /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        src,
+        title: title || "Video",
+        loading: "lazy",
+        allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen",
+        allowFullScreen: true,
+        style: { position: "absolute", inset: 0, width: "100%", height: "100%", border: 0, borderRadius: tokenVar("radius") }
+      }
+    ) });
+  }
+};
+function embedAllowed(value, hosts) {
+  let url;
+  try {
+    url = new URL(String(value ?? "").trim());
+  } catch {
+    return void 0;
+  }
+  if (url.protocol !== "https:") return void 0;
+  const host = url.hostname.toLowerCase();
+  const ok = hosts.some((allowed) => {
+    const name = String(allowed).toLowerCase();
+    return host === name || host.endsWith(`.${name}`);
+  });
+  return ok ? url.href : void 0;
+}
+function makeEmbed(hosts) {
+  return {
+    label: "Embedded page",
+    category: "media",
+    fields: {
+      url: { type: "text", label: `Page address (https, from: ${hosts.join(", ")})` },
+      title: { type: "text", label: "Title (for screen readers)" },
+      height: { type: "number", label: "Height (pixels)", min: 200, max: 4e3 }
+    },
+    defaultProps: { url: "", title: "Embedded page", height: 800 },
+    render: ({ url, title, height }) => {
+      const src = embedAllowed(url, hosts);
+      if (!src) return null;
+      return /* @__PURE__ */ jsx(
+        "iframe",
+        {
+          src,
+          title: title || "Embedded page",
+          loading: "lazy",
+          sandbox: "allow-scripts allow-same-origin allow-popups",
+          referrerPolicy: "no-referrer",
+          style: { width: "100%", height: `${Math.min(4e3, Math.max(200, Number(height) || 800))}px`, border: 0, borderRadius: tokenVar("radius"), background: "#fff" }
+        }
+      );
+    }
+  };
+}
+
+const builtInBlocks = {
+  Section,
+  Columns,
+  Spacer,
+  Divider,
+  Hero,
+  Heading,
+  Text,
+  Quote,
+  IconList,
+  Schedule,
+  Button,
+  CallToAction,
+  Cards,
+  Faq,
+  Image,
+  ImageText,
+  VideoEmbed
+};
+const builtInCategories = {
+  layout: { title: "Layout" },
+  content: { title: "Content" },
+  media: { title: "Media" }
+};
+
+const SITE_BACKGROUND_DEFAULTS = { image: "", overlayColor: "#ffffff", overlayOpacity: 85, rounded: true, fit: "cover", frame: "none" };
+function resolveBackground(theme = {}, page = {}) {
+  const site = { ...SITE_BACKGROUND_DEFAULTS, ...theme.background ?? {} };
+  const mode = page.background ?? "site";
+  if (mode === "none") return null;
+  const chosen = mode === "custom" ? {
+    image: page.backgroundImage,
+    overlayColor: page.overlayColor ?? site.overlayColor,
+    overlayOpacity: page.overlayOpacity ?? site.overlayOpacity,
+    rounded: site.rounded,
+    fit: site.fit,
+    frame: site.frame
+  } : {
+    ...site,
+    // A page may keep the site's photo but change how much shows through.
+    overlayOpacity: page.overlayOpacity ?? site.overlayOpacity
+  };
+  const image = cssImage(chosen.image);
+  return image ? { ...chosen, image, imageUrl: safeImageUrl(chosen.image) } : null;
+}
+function ThemeRoot({ theme, page, children }) {
+  const background = resolveBackground(theme ?? {}, page ?? {});
+  if (!background) {
+    return /* @__PURE__ */ jsx("div", { className: "pagelet", style: themeToStyle(theme), children });
+  }
+  const radius = background.rounded ? "var(--pagelet-radius)" : 0;
+  const panel = { background: overlayColor(background.overlayColor, background.overlayOpacity), padding: "calc(var(--pagelet-space) * 2)" };
+  const area = background.fit === "photo" ? /* @__PURE__ */ jsxs("div", { className: "pagelet-background", style: { display: "grid", borderRadius: radius, overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsx("img", { src: background.imageUrl, alt: "", "aria-hidden": "true", style: { gridArea: "1 / 1", width: "100%", height: "100%", objectFit: "cover", display: "block" } }),
+    /* @__PURE__ */ jsx("div", { className: "pagelet-panel", style: { gridArea: "1 / 1", ...panel }, children })
+  ] }) : /* @__PURE__ */ jsx("div", { className: "pagelet-background", style: { background: `${background.image} center / cover`, borderRadius: radius, overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { className: "pagelet-panel", style: { ...panel, minHeight: "60vh" }, children }) });
+  return /* @__PURE__ */ jsx("div", { className: "pagelet", style: themeToStyle(theme), children: background.frame === "card" ? /* @__PURE__ */ jsx("div", { className: "pagelet-frame", style: { border: "1px solid rgba(0, 0, 0, 0.15)", borderRadius: radius, padding: "var(--pagelet-space)", background: "var(--pagelet-color-background)" }, children: area }) : area });
+}
+
+const pageFields = {
+  title: { type: "text", label: "Page title (browser tab)" },
+  background: {
+    type: "radio",
+    label: "Background",
+    options: [
+      { label: "Site's", value: "site" },
+      { label: "Custom", value: "custom" },
+      { label: "None", value: "none" }
+    ]
+  },
+  backgroundImage: { type: "text", label: "Custom background image URL" },
+  overlayColor: { type: "text", label: "Custom overlay color (hex)" },
+  overlayOpacity: percentField("Overlay opacity % (blank uses the site setting)")
+};
+function createPalette({ blocks = {}, hide = [], categories = {}, root = {}, embedHosts = [] } = {}) {
+  const builtIns = embedHosts.length ? { ...builtInBlocks, Embed: makeEmbed(embedHosts) } : builtInBlocks;
+  const hidden = new Set(hide);
+  for (const name of hidden) {
+    if (!(name in builtIns) && !(name in blocks)) {
+      throw new Error(`pagelet: cannot hide unknown block "${name}"`);
+    }
+  }
+  const all = { ...builtIns, ...blocks };
+  const components = {};
+  const membership = {};
+  for (const [name, block] of Object.entries(all)) {
+    if (hidden.has(name)) continue;
+    if (typeof block?.render !== "function") {
+      throw new Error(`pagelet: block "${name}" needs a render function`);
+    }
+    const { category = "other", ...component } = block;
+    components[name] = component;
+    (membership[category] ?? (membership[category] = [])).push(name);
+  }
+  const categoryInfo = { ...builtInCategories, ...categories };
+  const puckCategories = {};
+  const order = [.../* @__PURE__ */ new Set([...Object.keys(categories), ...Object.keys(builtInCategories), ...Object.keys(membership)])];
+  for (const category of order) {
+    if (!membership[category]) continue;
+    puckCategories[category] = { title: categoryInfo[category]?.title ?? category, components: membership[category] };
+  }
+  return {
+    blocks: Object.keys(components),
+    config: {
+      components,
+      categories: puckCategories,
+      root: {
+        defaultProps: { title: "", background: "site", backgroundImage: "", overlayColor: "#ffffff" },
+        ...root,
+        fields: { ...pageFields, ...root.fields ?? {} },
+        // The page's root render applies the theme and the background. It is
+        // the root of the editor's preview iframe as well as of a rendered
+        // page, so both reach the editor. The site theme arrives through
+        // Puck's metadata; the page's own settings are this render's props.
+        render: ({ children, puck, title, background, backgroundImage, overlayColor, overlayOpacity }) => /* @__PURE__ */ jsx(
+          ThemeRoot,
+          {
+            theme: puck?.metadata?.pageletTheme,
+            page: { title, background, backgroundImage, overlayColor, overlayOpacity: blankToUndefined(overlayOpacity) },
+            children
+          }
+        )
+      }
+    }
+  };
+}
+function blankToUndefined(value) {
+  return value === "" || value === null || value === void 0 ? void 0 : value;
+}
+
+class PageletApiError extends Error {
+  constructor(message, { status, errors } = {}) {
+    super(message);
+    this.name = "PageletApiError";
+    this.status = status;
+    this.errors = errors ?? {};
+  }
+}
+function csrfFromPage() {
+  if (typeof document === "undefined") return void 0;
+  return document.querySelector('meta[name="csrf-token"]')?.getAttribute("content") ?? void 0;
+}
+function createPageletClient({ baseUrl = "/pagelet", csrfToken, headers = {}, fetch: fetchImpl } = {}) {
+  const doFetch = fetchImpl ?? globalThis.fetch;
+  if (typeof doFetch !== "function") throw new Error("pagelet: no fetch available; pass one to createPageletClient");
+  let root = String(baseUrl);
+  while (root.endsWith("/")) root = root.slice(0, -1);
+  async function request(method, path, body) {
+    const token = typeof csrfToken === "function" ? csrfToken() : csrfToken ?? csrfFromPage();
+    const response = await doFetch(`${root}${path}`, {
+      method,
+      credentials: "same-origin",
+      headers: {
+        Accept: "application/json",
+        ...body === void 0 ? {} : { "Content-Type": "application/json" },
+        ...token && method !== "GET" ? { "X-CSRF-Token": token } : {},
+        ...headers
+      },
+      body: body === void 0 ? void 0 : JSON.stringify(body)
+    });
+    if (response.status === 204) return null;
+    const payload = await response.json().catch(() => ({}));
+    if (response.ok) return payload;
+    const messages = Object.values(payload.errors ?? {}).flat();
+    const detail = messages.length ? messages.join("; ") : payload.error ?? response.statusText;
+    throw new PageletApiError(`pagelet: ${method} ${path} failed (${response.status}): ${detail}`, {
+      status: response.status,
+      errors: payload.errors
+    });
+  }
+  const pagePath = (id) => `/pages/${encodeURIComponent(id)}`;
+  async function getPublishedPage(path) {
+    try {
+      const data = await request("GET", `/published?path=${encodeURIComponent(path)}`);
+      return { document: data.document, pagePath: data.page_path, rest: data.rest ?? "" };
+    } catch (error) {
+      if (error instanceof PageletApiError && error.status === 404) return null;
+      throw error;
+    }
+  }
+  return {
+    listPages: () => request("GET", "/pages"),
+    getPage: (id) => request("GET", pagePath(id)),
+    createPage: ({ path, title, matchesSubpaths }) => request("POST", "/pages", { page: { path, title, matches_subpaths: matchesSubpaths } }),
+    updatePage: (id, { path, title, matchesSubpaths }) => request("PATCH", pagePath(id), { page: { path, title, matches_subpaths: matchesSubpaths } }),
+    saveDraft: (id, document2) => request("PATCH", pagePath(id), { page: { draft_document: document2 } }),
+    deletePage: (id) => request("DELETE", pagePath(id)),
+    publish: (id, { publishedBy } = {}) => request("POST", `${pagePath(id)}/publish`, publishedBy ? { published_by: publishedBy } : {}),
+    listVersions: (id) => request("GET", `${pagePath(id)}/versions`),
+    restoreVersion: (id, number) => request("POST", `${pagePath(id)}/versions/${encodeURIComponent(number)}/restore`, {}),
+    // Public: the published document at a path, or null when there is none.
+    getPublished: async (path) => (await getPublishedPage(path))?.document ?? null,
+    // Public: { document, pagePath, rest } for a path, or null. rest is what
+    // follows a page that answers for sub-paths: /messages/43 -> "43".
+    getPublishedPage,
+    // Public: the site's theme and menu.
+    getSite: async () => (await request("GET", "/site")).settings,
+    // Needs publish permission: changes are live at once.
+    updateSite: async (settings) => (await request("PATCH", "/site", { settings })).settings
+  };
+}
+
+const CSS = `
+.pagelet-menu{display:flex;align-items:center;flex-wrap:wrap;gap:4px 16px;padding:8px 16px;background:var(--pagelet-menu-background,#f8f9fa)}
+.pagelet-menu--centered{flex-direction:column}
+.pagelet-menu__groups{display:flex;flex:1;align-items:center;gap:4px 16px;flex-wrap:wrap}
+.pagelet-menu--centered .pagelet-menu__groups{justify-content:center;flex:none}
+.pagelet-menu__group{display:flex;gap:4px 16px;flex-wrap:wrap;align-items:center}
+.pagelet-menu__group--right{margin-left:auto}
+.pagelet-menu--centered .pagelet-menu__group--right{margin-left:0}
+.pagelet-menu__link{text-decoration:none;color:rgba(0,0,0,.65);padding:6px 0;display:inline-flex;align-items:center;gap:6px}
+.pagelet-menu__link:hover{color:rgba(0,0,0,.9)}
+.pagelet-menu__link--current{color:rgba(0,0,0,.9)}
+.pagelet-menu__toggle{display:none;margin-left:auto;background:none;border:1px solid rgba(0,0,0,.2);border-radius:6px;padding:6px 10px;cursor:pointer;font:inherit}
+@media (max-width: 767px){
+  .pagelet-menu__toggle{display:inline-block}
+  .pagelet-menu__groups{display:none;flex-basis:100%;flex-direction:column;align-items:flex-start}
+  .pagelet-menu__groups--open{display:flex}
+  .pagelet-menu__group{flex-direction:column;align-items:flex-start}
+  .pagelet-menu__group--right{margin-left:0}
+}`;
+function isExternal(href) {
+  return /^https?:\/\//i.test(href);
+}
+function needsPlainAnchor(href, LinkComponent) {
+  return !LinkComponent || isExternal(href) || /^(mailto|tel):/i.test(href);
+}
+function MenuLink({ item, linkComponent: LinkComponent, currentPath, onNavigate }) {
+  const href = safeUrl(item.href);
+  if (!href) return null;
+  const current = !isExternal(href) && currentPath === href;
+  const className = `pagelet-menu__link${current ? " pagelet-menu__link--current" : ""}`;
+  const style = item.highlight ? { color: tokenVar("colorAccent") } : void 0;
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.label,
+    item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon })
+  ] });
+  if (needsPlainAnchor(href, LinkComponent)) {
+    const external = isExternal(href) ? { target: "_blank", rel: "noopener noreferrer" } : {};
+    return /* @__PURE__ */ jsx("a", { className, style, href, ...external, children: body });
+  }
+  return /* @__PURE__ */ jsx(LinkComponent, { className, style, to: href, onClick: onNavigate, "aria-current": current ? "page" : void 0, children: body });
+}
+function PageletMenu({ menu = {}, linkComponent, currentPath }) {
+  const [open, setOpen] = useState(false);
+  const items = Array.isArray(menu.items) ? menu.items : [];
+  const brand = menu.brand ?? {};
+  const logo = safeImageUrl(brand.logo);
+  const brandHref = safeUrl(brand.href) ?? "/";
+  const close = () => setOpen(false);
+  const group = (name) => items.filter((item) => (item.group ?? "left") === name);
+  const linkProps = { linkComponent, currentPath, onNavigate: close };
+  const BrandLink = needsPlainAnchor(brandHref, linkComponent) ? "a" : linkComponent;
+  const brandTarget = BrandLink === "a" ? { href: brandHref } : { to: brandHref, onClick: close };
+  return /* @__PURE__ */ jsxs("nav", { className: `pagelet-menu${menu.style === "centered" ? " pagelet-menu--centered" : ""}`, "aria-label": "Site", children: [
+    /* @__PURE__ */ jsx("style", { children: CSS }),
+    (logo || brand.label) && /* @__PURE__ */ jsxs(BrandLink, { className: "pagelet-menu__brand", ...brandTarget, style: { display: "inline-flex", alignItems: "center", gap: "8px", textDecoration: "none", color: "inherit" }, children: [
+      logo && /* @__PURE__ */ jsx("img", { src: logo, alt: brand.label || "Home", style: { height: "40px", width: "auto", display: "block" } }),
+      !logo && brand.label
+    ] }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "pagelet-menu__toggle", "aria-expanded": open, onClick: () => setOpen((value) => !value), children: "Menu" }),
+    /* @__PURE__ */ jsxs("div", { className: `pagelet-menu__groups${open ? " pagelet-menu__groups--open" : ""}`, children: [
+      /* @__PURE__ */ jsx("div", { className: "pagelet-menu__group", children: group("left").map((item, i) => /* @__PURE__ */ jsx(MenuLink, { item, ...linkProps }, i)) }),
+      /* @__PURE__ */ jsx("div", { className: "pagelet-menu__group pagelet-menu__group--right", children: group("right").map((item, i) => /* @__PURE__ */ jsx(MenuLink, { item, ...linkProps }, i)) })
+    ] })
+  ] });
+}
+
+function PageletLayout({ site = {}, linkComponent, currentPath, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "pagelet-layout", style: { ...themeToStyle(site.theme), maxWidth: tokenVar("maxWidth"), margin: "0 auto" }, children: [
+    /* @__PURE__ */ jsx(PageletMenu, { menu: site.menu, linkComponent, currentPath }),
+    /* @__PURE__ */ jsx("main", { style: { marginTop: "var(--pagelet-space)" }, children })
+  ] });
+}
+
+export { DOCUMENT_VERSION, Icon, PageletApiError, PageletLayout, PageletMenu, PageletPage, builtInBlocks, builtInCategories, createDocument, createPageletClient, createPalette, defaultTheme, embedAllowed, embedUrl, emptyData, iconNames, overlayColor, pageSettings, safeImageUrl, safeUrl, themeToStyle, tokenVar, upgradeDocument };
+//# sourceMappingURL=index.js.map