@byscott-io/pagelet 0.0.0-stage → 0.1.0

package/dist/editor.js

@@ -0,0 +1,57 @@
+import { jsx } from 'react/jsx-runtime';
+import { Puck } from '@puckeditor/core';
+import { migrate } from '@puckeditor/core/rsc';
+
+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 PageletEditor({ document, palette, theme, onPublish, onChange, headerTitle, ...rest }) {
+  if (!palette) throw new Error("pagelet: <PageletEditor> needs a palette (see createPalette)");
+  const { data } = upgradeDocument(document, palette);
+  return /* @__PURE__ */ jsx(
+    Puck,
+    {
+      ...rest,
+      config: palette.config,
+      data,
+      metadata: { pageletTheme: theme },
+      headerTitle,
+      onPublish: onPublish ? (next) => onPublish(createDocument(next)) : void 0,
+      onChange: onChange ? (next) => onChange(createDocument(next)) : void 0
+    }
+  );
+}
+
+export { PageletEditor };
+//# sourceMappingURL=editor.js.map

package/dist/editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor.js","sources":["../src/document.js","../src/PageletEditor.jsx"],"sourcesContent":["import { migrate } from '@puckeditor/core/rsc';\n\n// What an app stores for a page: Puck's data inside an envelope that carries\n// pagelet's own format version. The version lets a stored page be upgraded when\n// pagelet or Puck changes shape, so apps never hold raw Puck data whose format\n// they do not control.\nexport const DOCUMENT_VERSION = 1;\n\nexport function emptyData() {\n  return { root: { props: {} }, content: [] };\n}\n\nexport function createDocument(data = emptyData()) {\n  return { pagelet: DOCUMENT_VERSION, data };\n}\n\n// Bring a stored document up to the current format.\n//\n// Accepts bare Puck data too, since an app adopting pagelet may already hold\n// some. Passing the palette also runs Puck's own migrate(), which converts\n// older Puck structures (DropZone zones) into the current one (slots).\nexport function upgradeDocument(document, palette) {\n  if (document == null) return createDocument();\n  if (typeof document !== 'object') {\n    throw new TypeError('pagelet: a page document must be an object');\n  }\n\n  let doc = document;\n  if (!('pagelet' in doc)) {\n    if (!('content' in doc) && !('root' in doc)) {\n      throw new TypeError('pagelet: not a page document (no \"pagelet\" version and no Puck data)');\n    }\n    doc = createDocument(doc);\n  }\n\n  if (doc.pagelet > DOCUMENT_VERSION) {\n    throw new Error(\n      `pagelet: this page was saved by a newer pagelet (format ${doc.pagelet}); ` +\n        `this version reads up to format ${DOCUMENT_VERSION}. Upgrade @byscott-io/pagelet.`,\n    );\n  }\n\n  // Format migrations go here, one step per version:\n  //   if (doc.pagelet === 1) doc = migrateV1toV2(doc);\n\n  const data = { ...emptyData(), ...doc.data };\n  return createDocument(palette && needsPuckMigration(data) ? migrate(data, palette.config) : data);\n}\n\n// Puck's migrate() logs to the console every time it is given a config, even\n// when there is nothing to convert. On a public page that would be a log line\n// per page view, so only call it for data in an older Puck shape: DropZone\n// zones holding content, or a root whose fields sit outside `props`.\nexport function needsPuckMigration(data) {\n  const zones = data.zones ?? {};\n  if (Object.values(zones).some((content) => Array.isArray(content) && content.length > 0)) return true;\n  const root = data.root ?? {};\n  return Object.keys(root).some((key) => key !== 'props' && key !== 'readOnly');\n}\n","import { Puck } from '@puckeditor/core';\nimport { createDocument, upgradeDocument } from './document.js';\n\n// The visual editor. Import from \"@byscott-io/pagelet/editor\" (and its\n// stylesheet from \"@byscott-io/pagelet/editor.css\") in admin screens only.\n//\n// onPublish and onChange receive a pagelet document, ready to store as-is.\nexport function PageletEditor({ document, palette, theme, onPublish, onChange, headerTitle, ...rest }) {\n  if (!palette) throw new Error('pagelet: <PageletEditor> needs a palette (see createPalette)');\n  const { data } = upgradeDocument(document, palette);\n  return (\n    <Puck\n      {...rest}\n      config={palette.config}\n      data={data}\n      metadata={{ pageletTheme: theme }}\n      headerTitle={headerTitle}\n      onPublish={onPublish ? (next) => onPublish(createDocument(next)) : undefined}\n      onChange={onChange ? (next) => onChange(createDocument(next)) : undefined}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;AAMO,MAAM,gBAAA,GAAmB,CAAA;AAEzB,SAAS,SAAA,GAAY;AAC1B,EAAA,OAAO,EAAE,MAAM,EAAE,KAAA,EAAO,EAAC,EAAE,EAAG,OAAA,EAAS,EAAC,EAAE;AAC5C;AAEO,SAAS,cAAA,CAAe,IAAA,GAAO,SAAA,EAAU,EAAG;AACjD,EAAA,OAAO,EAAE,OAAA,EAAS,gBAAA,EAAkB,IAAA,EAAK;AAC3C;AAOO,SAAS,eAAA,CAAgB,UAAU,OAAA,EAAS;AACjD,EAAA,IAAI,QAAA,IAAY,IAAA,EAAM,OAAO,cAAA,EAAe;AAC5C,EAAA,IAAI,OAAO,aAAa,QAAA,EAAU;AAChC,IAAA,MAAM,IAAI,UAAU,4CAA4C,CAAA;AAAA,EAClE;AAEA,EAAA,IAAI,GAAA,GAAM,QAAA;AACV,EAAA,IAAI,EAAE,aAAa,GAAA,CAAA,EAAM;AACvB,IAAA,IAAI,EAAE,SAAA,IAAa,GAAA,CAAA,IAAQ,EAAE,UAAU,GAAA,CAAA,EAAM;AAC3C,MAAA,MAAM,IAAI,UAAU,sEAAsE,CAAA;AAAA,IAC5F;AACA,IAAA,GAAA,GAAM,eAAe,GAAG,CAAA;AAAA,EAC1B;AAEA,EAAA,IAAI,GAAA,CAAI,UAAU,gBAAA,EAAkB;AAClC,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,CAAA,wDAAA,EAA2D,GAAA,CAAI,OAAO,CAAA,mCAAA,EACjC,gBAAgB,CAAA,8BAAA;AAAA,KACvD;AAAA,EACF;AAKA,EAAA,MAAM,OAAO,EAAE,GAAG,WAAU,EAAG,GAAG,IAAI,IAAA,EAAK;AAC3C,EAAA,OAAO,cAAA,CAAe,OAAA,IAAW,kBAAA,CAAmB,IAAI,CAAA,GAAI,QAAQ,IAAA,EAAM,OAAA,CAAQ,MAAM,CAAA,GAAI,IAAI,CAAA;AAClG;AAMO,SAAS,mBAAmB,IAAA,EAAM;AACvC,EAAA,MAAM,KAAA,GAAQ,IAAA,CAAK,KAAA,IAAS,EAAC;AAC7B,EAAA,IAAI,MAAA,CAAO,MAAA,CAAO,KAAK,CAAA,CAAE,KAAK,CAAC,OAAA,KAAY,KAAA,CAAM,OAAA,CAAQ,OAAO,CAAA,IAAK,OAAA,CAAQ,MAAA,GAAS,CAAC,GAAG,OAAO,IAAA;AACjG,EAAA,MAAM,IAAA,GAAO,IAAA,CAAK,IAAA,IAAQ,EAAC;AAC3B,EAAA,OAAO,MAAA,CAAO,IAAA,CAAK,IAAI,CAAA,CAAE,IAAA,CAAK,CAAC,GAAA,KAAQ,GAAA,KAAQ,OAAA,IAAW,GAAA,KAAQ,UAAU,CAAA;AAC9E;;ACnDO,SAAS,aAAA,CAAc,EAAE,QAAA,EAAU,OAAA,EAAS,KAAA,EAAO,WAAW,QAAA,EAAU,WAAA,EAAa,GAAG,IAAA,EAAK,EAAG;AACrG,EAAA,IAAI,CAAC,OAAA,EAAS,MAAM,IAAI,MAAM,8DAA8D,CAAA;AAC5F,EAAA,MAAM,EAAE,IAAA,EAAK,GAAI,eAAA,CAAgB,UAAU,OAAO,CAAA;AAClD,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,QAAQ,OAAA,CAAQ,MAAA;AAAA,MAChB,IAAA;AAAA,MACA,QAAA,EAAU,EAAE,YAAA,EAAc,KAAA,EAAM;AAAA,MAChC,WAAA;AAAA,MACA,SAAA,EAAW,YAAY,CAAC,IAAA,KAAS,UAAU,cAAA,CAAe,IAAI,CAAC,CAAA,GAAI,MAAA;AAAA,MACnE,QAAA,EAAU,WAAW,CAAC,IAAA,KAAS,SAAS,cAAA,CAAe,IAAI,CAAC,CAAA,GAAI;AAAA;AAAA,GAClE;AAEJ;;"}

package/dist/index.cjs

@@ -0,0 +1,599 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var rsc = require('@puckeditor/core/rsc');
+
+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) ? rsc.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 PageletPage({ document, palette, theme }) {
+  if (!palette) throw new Error("pagelet: <PageletPage> needs a palette (see createPalette)");
+  const { data } = upgradeDocument(document, palette);
+  return /* @__PURE__ */ jsxRuntime.jsx(rsc.Render, { config: palette.config, data, metadata: { pageletTheme: theme } });
+}
+
+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" }
+];
+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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: { textAlign: align, maxWidth: "68ch", marginInline: align === "center" ? "auto" : void 0 }, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: { textAlign: align, margin: "0 0 1em" }, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { maxWidth: "760px", margin: "0 auto" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { fontFamily: tokenVar("fontHeading"), fontSize: "clamp(2rem, 5vw, 3.25rem)", margin: "0 0 0.4em", textWrap: "balance" }, children: heading }),
+          /* @__PURE__ */ jsxRuntime.jsx(Paragraphs, { text: subheading, style: { fontSize: "1.15rem" } }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { background: tokenVar("colorMuted"), borderRadius: tokenVar("radius"), padding: "40px 24px", textAlign: "center" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { fontFamily: tokenVar("fontHeading"), margin: "0 0 0.5em" }, children: heading }),
+    /* @__PURE__ */ jsxRuntime.jsx(Paragraphs, { text }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      image && /* @__PURE__ */ jsxRuntime.jsx("img", { src: image, alt: "", style: { width: "100%", aspectRatio: "16 / 9", objectFit: "cover", display: "block" } }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "16px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { fontFamily: tokenVar("fontHeading"), margin: "0 0 0.4em" }, children: item.title }),
+        /* @__PURE__ */ jsxRuntime.jsx(Paragraphs, { text: item.text })
+      ] })
+    ] });
+    const cardStyle = { display: "block", background: tokenVar("colorMuted"), borderRadius: tokenVar("radius"), overflow: "hidden", color: "inherit", textDecoration: "none" };
+    return href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href, style: cardStyle, children: body }, index) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("details", { style: { borderBottom: `1px solid ${tokenVar("colorMuted")}`, padding: "12px 0" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("summary", { style: { fontWeight: 600, cursor: "pointer" }, children: item.question }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingTop: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsx(Paragraphs, { text: item.answer }) })
+  ] }, index)) })
+};
+
+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" }
+      ]
+    },
+    padding: { type: "select", options: spacingOptions },
+    content: { type: "slot" }
+  },
+  defaultProps: { background: "none", padding: "medium" },
+  render: ({ background, padding, content: Content }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "section",
+    {
+      style: {
+        background: BACKGROUNDS[background] ?? BACKGROUNDS.none,
+        color: background === "accent" ? tokenVar("colorAccentText") : void 0,
+        paddingBlock: SPACING[padding] ?? SPACING.medium
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { maxWidth: tokenVar("maxWidth"), margin: "0 auto", paddingInline: "16px" }, children: /* @__PURE__ */ jsxRuntime.jsx(Content, {}) })
+    }
+  )
+};
+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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: { minWidth: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(Column, {}) }, index))
+      }
+    );
+  }
+};
+const Spacer = {
+  label: "Spacer",
+  category: "layout",
+  fields: { size: { type: "select", options: spacingOptions.slice(1) } },
+  defaultProps: { size: "medium" },
+  render: ({ size }) => /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: SPACING[size] ?? SPACING.medium } })
+};
+const Divider = {
+  label: "Divider",
+  category: "layout",
+  fields: {},
+  render: () => /* @__PURE__ */ jsxRuntime.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" }
+  },
+  defaultProps: { url: "", alt: "", caption: "" },
+  render: ({ url, alt, caption }) => {
+    const src = safeImageUrl(url);
+    if (!src) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("figure", { style: { margin: "0 0 1em" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: alt ?? "", style: { maxWidth: "100%", height: "auto", display: "block", borderRadius: tokenVar("radius") } }),
+      caption && /* @__PURE__ */ jsxRuntime.jsx("figcaption", { style: { fontSize: "0.9em", opacity: 0.75, marginTop: "6px" }, 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__ */ jsxRuntime.jsx("img", { src, alt: alt ?? "", style: { width: "100%", height: "auto", display: "block", borderRadius: tokenVar("radius"), order: imageSide === "right" ? 2 : 0 } }) : null;
+    const words = /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { minWidth: 0, order: 1 }, children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { style: { margin: "0 0 1em" }, children: paragraph.trim() }, index))
+    ] });
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: { position: "relative", aspectRatio: "16 / 9", maxWidth: "100%", margin: "0 0 1em" }, children: /* @__PURE__ */ jsxRuntime.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") }
+      }
+    ) });
+  }
+};
+
+const builtInBlocks = {
+  Section,
+  Columns,
+  Spacer,
+  Divider,
+  Hero,
+  Heading,
+  Text,
+  Button,
+  CallToAction,
+  Cards,
+  Faq,
+  Image,
+  ImageText,
+  VideoEmbed
+};
+const builtInCategories = {
+  layout: { title: "Layout" },
+  content: { title: "Content" },
+  media: { title: "Media" }
+};
+
+function ThemeRoot({ theme, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pagelet", style: themeToStyle(theme), children });
+}
+
+function createPalette({ blocks = {}, hide = [], categories = {}, root = {} } = {}) {
+  const hidden = new Set(hide);
+  for (const name of hidden) {
+    if (!(name in builtInBlocks) && !(name in blocks)) {
+      throw new Error(`pagelet: cannot hide unknown block "${name}"`);
+    }
+  }
+  const all = { ...builtInBlocks, ...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: {
+        ...root,
+        // The page's root render applies the theme. It is the root of the
+        // editor's preview iframe as well as of a rendered page, so the theme
+        // reaches both. Pages receive it through Puck's metadata.
+        render: ({ children, puck }) => /* @__PURE__ */ jsxRuntime.jsx(ThemeRoot, { theme: puck?.metadata?.pageletTheme, children })
+      }
+    }
+  };
+}
+
+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)}`;
+  return {
+    listPages: () => request("GET", "/pages"),
+    getPage: (id) => request("GET", pagePath(id)),
+    createPage: ({ path, title }) => request("POST", "/pages", { page: { path, title } }),
+    updatePage: (id, { path, title }) => request("PATCH", pagePath(id), { page: { path, title } }),
+    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) => {
+      try {
+        const { document: document2 } = await request("GET", `/published?path=${encodeURIComponent(path)}`);
+        return document2;
+      } catch (error) {
+        if (error instanceof PageletApiError && error.status === 404) return null;
+        throw error;
+      }
+    }
+  };
+}
+
+exports.DOCUMENT_VERSION = DOCUMENT_VERSION;
+exports.PageletApiError = PageletApiError;
+exports.PageletPage = PageletPage;
+exports.builtInBlocks = builtInBlocks;
+exports.builtInCategories = builtInCategories;
+exports.createDocument = createDocument;
+exports.createPageletClient = createPageletClient;
+exports.createPalette = createPalette;
+exports.defaultTheme = defaultTheme;
+exports.embedUrl = embedUrl;
+exports.emptyData = emptyData;
+exports.safeImageUrl = safeImageUrl;
+exports.safeUrl = safeUrl;
+exports.themeToStyle = themeToStyle;
+exports.tokenVar = tokenVar;
+exports.upgradeDocument = upgradeDocument;
+//# sourceMappingURL=index.cjs.map