@byscott-io/pagelet 0.2.0 → 0.2.2

package/dist/index.js

@@ -1,6 +1,5 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { migrate, Render } from '@puckeditor/core/rsc';
-import { useState } from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Fragment as Fragment$1, useState } from 'react';
 
 const DOCUMENT_VERSION = 1;
 function emptyData() {
@@ -9,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");
@@ -27,23 +26,64 @@ 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" };
@@ -129,6 +169,9 @@ const defaultTheme = {
   colorAccentText: "#ffffff",
   fontBody: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
   fontHeading: "inherit",
+  // The page's base text size. Block text is sized in em from it, so text,
+  // lists, schedules and quotes all scale together; the menu keeps its own.
+  fontSize: "1rem",
   radius: "8px",
   maxWidth: "1100px",
   space: "24px"
@@ -262,7 +305,7 @@ const Hero = {
         },
         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(Paragraphs, { text: subheading, style: { fontSize: "1.15em" } }),
           /* @__PURE__ */ jsx(ButtonLink, { label: buttonLabel, href: buttonHref, variant: "outline" })
         ] })
       }
@@ -691,7 +734,7 @@ function resolveBackground(theme = {}, page = {}) {
 function ThemeRoot({ theme, page, children }) {
   const background = resolveBackground(theme ?? {}, page ?? {});
   if (!background) {
-    return /* @__PURE__ */ jsx("div", { className: "pagelet", style: themeToStyle(theme), children });
+    return /* @__PURE__ */ jsx("div", { className: "pagelet", style: { ...themeToStyle(theme), fontSize: tokenVar("fontSize") }, children });
   }
   const radius = background.rounded ? "var(--pagelet-radius)" : 0;
   const panel = { background: overlayColor(background.overlayColor, background.overlayOpacity), padding: "calc(var(--pagelet-space) * 2)" };
@@ -699,7 +742,7 @@ function ThemeRoot({ theme, page, 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 });
+  return /* @__PURE__ */ jsx("div", { className: "pagelet", style: { ...themeToStyle(theme), fontSize: tokenVar("fontSize") }, 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 = {