@byscott-io/pagelet 0.1.0 → 0.2.1

package/dist/index.js

@@ -1,5 +1,5 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { migrate, Render } from '@puckeditor/core/rsc';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Fragment as Fragment$1, useState } from 'react';
 
 const DOCUMENT_VERSION = 1;
 function emptyData() {
@@ -8,7 +8,7 @@ function emptyData() {
 function createDocument(data = emptyData()) {
   return { pagelet: DOCUMENT_VERSION, data };
 }
-function upgradeDocument(document, palette) {
+function upgradeDocument(document) {
   if (document == null) return createDocument();
   if (typeof document !== "object") {
     throw new TypeError("pagelet: a page document must be an object");
@@ -26,19 +26,121 @@ function upgradeDocument(document, palette) {
     );
   }
   const data = { ...emptyData(), ...doc.data };
-  return createDocument(palette && needsPuckMigration(data) ? migrate(data, palette.config) : data);
+  return createDocument({ ...data, root: upgradeRoot(data.root) });
 }
-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 upgradeRoot(root = {}) {
+  const { props = {}, readOnly, ...legacy } = root;
+  if (Object.keys(legacy).length === 0) return root;
+  return { ...readOnly ? { readOnly } : {}, props: { ...legacy, ...props } };
+}
+function pageSettings(document) {
+  const props = upgradeDocument(document)?.data?.root?.props ?? {};
+  return { title: props.title || "", background: props.background ?? "site" };
+}
+
+const ROOT_ZONE = "root:default-zone";
+function slotNames(component) {
+  return Object.entries(component.fields ?? {}).filter(([, field]) => field?.type === "slot").map(([name]) => name);
+}
+function renderItems(items, context) {
+  return (Array.isArray(items) ? items : []).map((item, index) => /* @__PURE__ */ jsx(Fragment$1, { children: renderItem(item, context) }, item?.props?.id ?? index));
+}
+function puckFor(areaId, context) {
+  return {
+    isEditing: false,
+    metadata: context.metadata,
+    dragRef: null,
+    renderDropZone: ({ zone }) => {
+      const compound = `${areaId}:${zone}`;
+      const items = compound === ROOT_ZONE ? context.data.content : context.data.zones?.[compound];
+      return /* @__PURE__ */ jsx(Fragment, { children: renderItems(items, context) });
+    }
+  };
+}
+function renderItem(item, context) {
+  const component = item && context.config.components[item.type];
+  if (!component) return null;
+  const props = { ...item.props, puck: puckFor(item.props?.id, context) };
+  for (const name of slotNames(component)) {
+    const children = item.props?.[name];
+    props[name] = function Slot({ className, style }) {
+      return /* @__PURE__ */ jsx("div", { className, style, children: renderItems(children, context) });
+    };
+  }
+  const Render = component.render;
+  return /* @__PURE__ */ jsx(Render, { ...props });
+}
+function renderPage({ config, data, metadata = {} }) {
+  const context = { config, data: data ?? {}, metadata };
+  const puck = puckFor("root", context);
+  const rootProps = data?.root?.props ?? {};
+  const content = renderItems(data?.content, context);
+  const RootRender = config.root?.render;
+  if (!RootRender) return /* @__PURE__ */ jsx(Fragment, { children: content });
+  return /* @__PURE__ */ jsx(RootRender, { ...rootProps, title: rootProps.title || "", editMode: false, id: "puck-root", puck, children: content });
 }
 
 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 { data } = upgradeDocument(document);
+  return renderPage({ 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:"];
@@ -92,8 +194,10 @@ function tokenVar(token) {
 
 const alignOptions = [
   { label: "Left", value: "left" },
-  { label: "Center", value: "center" }
+  { 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);
 }
@@ -155,7 +259,7 @@ const Text = {
     align: { type: "radio", options: alignOptions }
   },
   defaultProps: { text: "Write something here.", align: "left" },
-  render: ({ text, align }) => /* @__PURE__ */ jsx("div", { style: { textAlign: align, maxWidth: "68ch", marginInline: align === "center" ? "auto" : void 0 }, children: /* @__PURE__ */ jsx(Paragraphs, { text }) })
+  render: ({ text, align }) => /* @__PURE__ */ jsx("div", { style: { textAlign: align, maxWidth: "68ch", ...blockMargin(align) }, children: /* @__PURE__ */ jsx(Paragraphs, { text }) })
 };
 const Button = {
   label: "Button",
@@ -268,6 +372,79 @@ const Faq = {
     /* @__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 }));
@@ -288,21 +465,27 @@ const Section = {
         { 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", padding: "medium" },
-  render: ({ background, padding, content: Content }) => /* @__PURE__ */ jsx(
-    "section",
-    {
-      style: {
-        background: BACKGROUNDS[background] ?? BACKGROUNDS.none,
-        color: background === "accent" ? tokenVar("colorAccentText") : void 0,
-        paddingBlock: SPACING[padding] ?? SPACING.medium
-      },
-      children: /* @__PURE__ */ jsx("div", { style: { maxWidth: tokenVar("maxWidth"), margin: "0 auto", paddingInline: "16px" }, children: /* @__PURE__ */ jsx(Content, {}) })
-    }
-  )
+  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",
@@ -355,15 +538,27 @@ const Image = {
   fields: {
     url: { type: "text", label: "Image URL" },
     alt: { type: "text", label: "Description (for screen readers)" },
-    caption: { type: "text" }
+    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: "" },
-  render: ({ url, alt, caption }) => {
+  defaultProps: { url: "", alt: "", caption: "", align: "left", width: 100 },
+  render: ({ url, alt, caption, align, width }) => {
     const src = safeImageUrl(url);
     if (!src) return null;
-    return /* @__PURE__ */ jsxs("figure", { style: { margin: "0 0 1em" }, children: [
-      /* @__PURE__ */ jsx("img", { src, alt: alt ?? "", style: { maxWidth: "100%", height: "auto", display: "block", borderRadius: tokenVar("radius") } }),
-      caption && /* @__PURE__ */ jsx("figcaption", { style: { fontSize: "0.9em", opacity: 0.75, marginTop: "6px" }, children: caption })
+    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 })
     ] });
   }
 };
@@ -445,6 +640,48 @@ const VideoEmbed = {
     ) });
   }
 };
+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,
@@ -454,6 +691,9 @@ const builtInBlocks = {
   Hero,
   Heading,
   Text,
+  Quote,
+  IconList,
+  Schedule,
   Button,
   CallToAction,
   Cards,
@@ -468,18 +708,64 @@ const builtInCategories = {
   media: { title: "Media" }
 };
 
-function ThemeRoot({ theme, children }) {
-  return /* @__PURE__ */ jsx("div", { className: "pagelet", style: themeToStyle(theme), children });
+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 });
 }
 
-function createPalette({ blocks = {}, hide = [], categories = {}, root = {} } = {}) {
+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 builtInBlocks) && !(name in blocks)) {
+    if (!(name in builtIns) && !(name in blocks)) {
       throw new Error(`pagelet: cannot hide unknown block "${name}"`);
     }
   }
-  const all = { ...builtInBlocks, ...blocks };
+  const all = { ...builtIns, ...blocks };
   const components = {};
   const membership = {};
   for (const [name, block] of Object.entries(all)) {
@@ -504,15 +790,28 @@ function createPalette({ blocks = {}, hide = [], categories = {}, root = {} } =
       components,
       categories: puckCategories,
       root: {
+        defaultProps: { title: "", background: "site", backgroundImage: "", overlayColor: "#ffffff" },
         ...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__ */ jsx(ThemeRoot, { theme: puck?.metadata?.pageletTheme, children })
+        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 } = {}) {
@@ -555,28 +854,109 @@ function createPageletClient({ baseUrl = "/pagelet", csrfToken, headers = {}, fe
     });
   }
   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 }) => request("POST", "/pages", { page: { path, title } }),
-    updatePage: (id, { path, title }) => request("PATCH", pagePath(id), { page: { path, title } }),
+    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) => {
-      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;
-      }
-    }
+    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
   };
 }
 
-export { DOCUMENT_VERSION, PageletApiError, PageletPage, builtInBlocks, builtInCategories, createDocument, createPageletClient, createPalette, defaultTheme, embedUrl, emptyData, safeImageUrl, safeUrl, themeToStyle, tokenVar, upgradeDocument };
+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