@universalcms/connect 0.13.4 → 0.18.0

package/dist/publication.css

@@ -2,5 +2,10 @@
 
 .cms-document .cms-block,.cms-document .cms-column{min-width:0}.cms-block-paragraph>p,.cms-block-heading>h2,.cms-block-heading>h3,.cms-block-heading>h4,.cms-block-quote>blockquote,.cms-document figcaption,.cms-block-faq p{white-space:pre-line}.cms-image-align-left{text-align:left}.cms-image-align-center{text-align:center}.cms-image-align-right{text-align:right}.cms-image-align-full img{width:100%}.cms-document .cms-image-align-left img,.cms-document .cms-image-align-center img,.cms-document .cms-image-align-right img{display:inline-block}.cms-gallery img{width:100%;height:auto}.cms-table-scroll:focus-visible{outline:2px solid var(--cms-accent,#2563eb);outline-offset:3px}
 
+.cms-preview-toolbar{display:flex;gap:2px;padding:3px;border-radius:8px;background:#1c1940;box-shadow:0 6px 18px rgb(0 0 0/18%)}.cms-preview-toolbar button{width:28px;height:28px;border:0;border-radius:6px;background:transparent;color:#fff;font:600 13px/1 system-ui,sans-serif;cursor:pointer}.cms-preview-toolbar button:hover{background:rgb(255 255 255/14%)}.cms-inline-editing{outline:none;cursor:text;caret-color:currentColor}
+.cms-padding-none{padding:0}.cms-padding-small{padding:.75rem}.cms-padding-medium{padding:1.5rem}.cms-padding-large{padding:3rem}.cms-radius-none{border-radius:0}.cms-radius-small{border-radius:.375rem}.cms-radius-medium{border-radius:.75rem}.cms-radius-large{border-radius:1.25rem}.cms-radius-pill{border-radius:999px}.cms-border-true{border:1px solid color-mix(in srgb,currentColor 18%,transparent)}.cms-weight-normal{font-weight:400}.cms-weight-medium{font-weight:500}.cms-weight-bold{font-weight:700}.cms-maxWidth-narrow{max-width:42rem;margin-inline:auto}.cms-maxWidth-normal{max-width:64rem;margin-inline:auto}.cms-maxWidth-full{max-width:none}
+@media (max-width:760px){.cms-m-align-left{text-align:left!important}.cms-m-align-center{text-align:center!important}.cms-m-align-right{text-align:right!important}.cms-m-size-small{font-size:.875em!important}.cms-m-size-normal{font-size:1em!important}.cms-m-size-large{font-size:1.25em!important}.cms-m-padding-none{padding:0!important}.cms-m-padding-small{padding:.75rem!important}.cms-m-padding-medium{padding:1.25rem!important}.cms-m-padding-large{padding:2.5rem!important}.cms-m-spaceAbove-none{margin-top:0!important}.cms-m-spaceAbove-small{margin-top:.5rem!important}.cms-m-spaceAbove-medium{margin-top:1.25rem!important}.cms-m-spaceAbove-large{margin-top:2.5rem!important}.cms-m-spaceBelow-none{margin-bottom:0!important}.cms-m-spaceBelow-small{margin-bottom:.5rem!important}.cms-m-spaceBelow-medium{margin-bottom:1.25rem!important}.cms-m-spaceBelow-large{margin-bottom:2.5rem!important}}
+.cms-preview-drag{display:grid;place-items:center;width:28px;height:28px;border-radius:6px;color:#fff;cursor:grab;font:600 14px/1 system-ui,sans-serif}.cms-preview-drag:hover{background:rgb(255 255 255/14%)}
+
 @media(max-width:767px){.cms-hide-mobile{display:none!important}}@media(min-width:768px){.cms-hide-desktop{display:none!important}}
 .cms-additional-content{max-width:80rem;margin:2rem auto;padding:1rem}.cms-inline-bound{display:contents}

package/dist/publication.mjs

@@ -93,7 +93,12 @@ const leafTypes = new Set([...textTypes, 'image', 'gallery', 'button', 'divider'
 const styleValues = {
   align: ['left', 'center', 'right'], size: ['small', 'normal', 'large'], tone: ['default', 'muted', 'accent', 'inverse'],
   spaceAbove: ['none', 'small', 'medium', 'large'], spaceBelow: ['none', 'small', 'medium', 'large'],
+  padding: ['none', 'small', 'medium', 'large'], radius: ['none', 'small', 'medium', 'large', 'pill'],
+  weight: ['normal', 'medium', 'bold'], maxWidth: ['narrow', 'normal', 'full'],
+  animation: ['fade-up', 'fade-in', 'zoom-in', 'slide-left'],
 };
+const mobileStyle = style => !own(style, 'mobile') || object(style.mobile) && Object.keys(style.mobile).every(key => ['align', 'size', 'padding', 'spaceAbove', 'spaceBelow'].includes(key)) && ['align', 'size', 'padding', 'spaceAbove', 'spaceBelow'].every(key => optionalEnum(style.mobile, key, styleValues[key]));
+const styleHex = (style, key) => !own(style, key) || typeof style[key] === 'string' && /^#[0-9a-fA-F]{6}$/.test(style[key]);
 const optionalEnum = (value, key, choices) => !own(value, key) || choices.includes(value[key]);
 const optionalString = (value, key, max) => !own(value, key) || boundedString(value[key], max);
 const optionalBoolean = (value, key) => !own(value, key) || typeof value[key] === 'boolean';
@@ -143,12 +148,12 @@ function validDocument(document) {
       if (!object(block) || !uuid.test(block.id) || ids.has(block.id) || ids.size >= 400 || block.version !== 1 || !boundedString(block.text, 30000)) return false;
       ids.add(block.id);
       if (block.style !== undefined && (!object(block.style) || Object.entries(styleValues).some(([key, values]) => !optionalEnum(block.style, key, values)) ||
-        !optionalBoolean(block.style, 'hideOnMobile') || !optionalBoolean(block.style, 'hideOnDesktop') ||
+        !optionalBoolean(block.style, 'hideOnMobile') || !optionalBoolean(block.style, 'hideOnDesktop') || !optionalBoolean(block.style, 'border') || !styleHex(block.style, 'textColor') || !styleHex(block.style, 'background') || !mobileStyle(block.style) ||
         own(block.style, 'anchor') && (!boundedString(block.style.anchor, 80) || !/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(block.style.anchor)))) return false;
       if (leafTypes.has(block.type)) return leafData(block);
       const d = block.data;
       if (!object(d)) return false;
-      if (block.type === 'section' && level === 0) return optionalEnum(d, 'background', ['none', 'muted', 'accent', 'dark']) && optionalEnum(d, 'padding', ['none', 'small', 'medium', 'large']) && optionalEnum(d, 'width', ['normal', 'wide', 'full']) && blocks(d.blocks, 1, 100);
+      if (block.type === 'section' && level === 0) return optionalEnum(d, 'background', ['none', 'muted', 'accent', 'dark']) && optionalEnum(d, 'padding', ['none', 'small', 'medium', 'large']) && optionalEnum(d, 'width', ['normal', 'wide', 'full']) && (!own(d, 'globalId') || typeof d.globalId === 'string' && uuid.test(d.globalId)) && blocks(d.blocks, 1, 100);
       if (block.type === 'columns' && level < 2) return optionalEnum(d, 'layout', ['1-1', '1-2', '2-1', '1-1-1', '1-1-1-1']) && optionalEnum(d, 'gap', ['small', 'medium', 'large']) && optionalBoolean(d, 'stackOnMobile') &&
         Array.isArray(d.columns) && d.columns.length === (d.layout ?? '1-1').split('-').length && d.columns.every(column => blocks(column, 2, 50));
       return false;
@@ -191,11 +196,12 @@ const pick = (value, keys) => Object.fromEntries(keys.filter(key => own(value, k
 const dataKeys = {
   heading: ['level'], image: ['url', 'alt', 'width', 'height', 'srcset', 'align', 'link'], gallery: ['columns'],
   button: ['url', 'style', 'align', 'newTab'], spacer: ['height'], faq: [], table: ['header', 'rows'], embed: ['url', 'provider', 'aspect'],
-  form: ['formKey', 'submitLabel', 'successMessage', 'consentText'], section: ['background', 'padding', 'width'], columns: ['layout', 'gap', 'stackOnMobile'],
+  form: ['formKey', 'submitLabel', 'successMessage', 'consentText'], section: ['background', 'padding', 'width', 'globalId'], columns: ['layout', 'gap', 'stackOnMobile'],
 };
 function publicBlock(block) {
   const result = pick(block, ['id', 'type', 'version', 'text']);
-  if (object(block.style)) result.style = pick(block.style, [...Object.keys(styleValues), 'hideOnMobile', 'hideOnDesktop', 'anchor']);
+  if (object(block.style)) result.style = pick(block.style, [...Object.keys(styleValues), 'hideOnMobile', 'hideOnDesktop', 'border', 'textColor', 'background', 'anchor']);
+  if (result.style && object(block.style.mobile)) result.style.mobile = pick(block.style.mobile, ['align', 'size', 'padding', 'spaceAbove', 'spaceBelow']);
   if (object(block.data)) {
     const data = pick(block.data, dataKeys[block.type] ?? []);
     if (block.type === 'gallery') data.images = block.data.images.map(image => pick(image, ['id', 'url', 'alt', 'width', 'height', 'srcset']));

package/dist/react-publication.mjs

@@ -176,7 +176,29 @@ function presentation(block) {
         style.marginTop = spacing[String(token.spaceAbove)];
     if (spacing[String(token.spaceBelow)])
         style.marginBottom = spacing[String(token.spaceBelow)];
-    return { className: [token.hideOnMobile === true ? "cms-hide-mobile" : "", token.hideOnDesktop === true ? "cms-hide-desktop" : ""].filter(Boolean).join(" "), style, ...(typeof token.anchor === "string" && /^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(token.anchor) ? { id: token.anchor } : {}) };
+    const hex = (value) => typeof value === "string" && /^#[0-9a-fA-F]{6}$/.test(value) ? value : undefined;
+    if (hex(token.textColor))
+        style.color = hex(token.textColor);
+    if (hex(token.background))
+        style.background = hex(token.background);
+    if (spacing[String(token.padding)])
+        style.padding = spacing[String(token.padding)];
+    const radii = { none: "0", small: ".375rem", medium: ".75rem", large: "1.25rem", pill: "999px" };
+    if (radii[String(token.radius)])
+        style.borderRadius = radii[String(token.radius)];
+    if (token.border === true)
+        style.border = "1px solid color-mix(in srgb, currentColor 18%, transparent)";
+    const weights = { normal: 400, medium: 500, bold: 700 };
+    if (weights[String(token.weight)])
+        style.fontWeight = weights[String(token.weight)];
+    const widths = { narrow: "42rem", normal: "64rem", full: "none" };
+    if (widths[String(token.maxWidth)]) {
+        style.maxWidth = widths[String(token.maxWidth)];
+        if (token.maxWidth !== "full")
+            style.marginInline = "auto";
+    }
+    const mobile = (token.mobile ?? {}), phone = { align: ["left", "center", "right"], size: ["small", "normal", "large"], padding: ["none", "small", "medium", "large"], spaceAbove: ["none", "small", "medium", "large"], spaceBelow: ["none", "small", "medium", "large"] };
+    return { className: [["fade-up", "fade-in", "zoom-in", "slide-left"].includes(String(token.animation)) ? `cms-animation-${String(token.animation)}` : "", token.hideOnMobile === true ? "cms-hide-mobile" : "", token.hideOnDesktop === true ? "cms-hide-desktop" : "", ...Object.entries(phone).flatMap(([key, allowed]) => allowed.includes(String(mobile[key])) ? [`cms-m-${key}-${String(mobile[key])}`] : [])].filter(Boolean).join(" "), style, ...(typeof token.anchor === "string" && /^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(token.anchor) ? { id: token.anchor } : {}) };
 }
 function replaceNativeText(children, text) {
     // Custom components may render copy from props, context or closures. Traversing

package/dist/react-website.d.mts

@@ -6,7 +6,7 @@ export type WebsiteArchive = { kind: 'category' | 'tag'; path: string; title: st
 export type WebsiteProps = { children: ReactNode; initialSettings?: unknown; entry?: WebsiteEntry; archive?: WebsiteArchive; scope?: string; originalPaths?: string[]; applyTemplate?: boolean; chrome?: boolean };
 export function WebsiteProvider(props: Omit<WebsiteProps, 'originalPaths' | 'applyTemplate' | 'chrome'>): ReactNode;
 export function CmsWebsite(props: WebsiteProps): ReactNode;
-export function CmsWebsitePage(props: { scope?: string; pathname?: string; initialEntry?: WebsiteEntry; initialResult?: unknown; initialSettings?: unknown; chrome?: boolean }): ReactNode;
+export function CmsWebsitePage(props: { scope?: string; pathname?: string; initialEntry?: WebsiteEntry; initialResult?: unknown; initialSettings?: unknown; chrome?: boolean; formEndpoint?: string }): ReactNode;
 export function useWebsiteSettings(): { settings: WebsiteSettings; entry?: WebsiteEntry; archive?: WebsiteArchive; related: unknown[]; scope: string; consent: Consent | null; saveConsent(choices: { analytics: boolean; marketing: boolean }): void; preferencesOpen: boolean; setPreferencesOpen(value: boolean): void };
 export function CmsBranding(props?: { homePath?: string; fallback?: ReactNode }): ReactNode;
 export function CmsNavigation(props?: { location?: 'header' | 'footer'; originalLinks?: Array<{ label: string; url: string }>; excludeUrls?: string[]; onNavigate?: () => void; className?: string }): ReactNode;

package/dist/react-website.mjs

@@ -623,9 +623,11 @@ function publicEntry(value) {
     // independently validates its URLs and only consumes a ready selected section.
     return { ...entry, ...Object.fromEntries(['path', 'seo', 'author', 'categories', 'tags', 'translations', 'canonicalUrl', 'publishedAt'].map(name => [name, raw[name]])) };
 }
-export function CmsWebsitePage({ scope, pathname, initialEntry, initialResult, initialSettings, chrome = true }) {
+/** Same-origin path that accepts form submissions (theme websites); absent means forms show as unavailable. */
+const FormEndpoint = createContext(undefined);
+export function CmsWebsitePage({ scope, pathname, initialEntry, initialResult, initialSettings, chrome = true, formEndpoint }) {
     const path = pathname ?? (typeof window === 'undefined' ? '/' : window.location.pathname);
-    return _jsx(WebsitePageLoader, { scope: scope, pathname: path, initialEntry: initialEntry, initialResult: initialResult, initialSettings: initialSettings, chrome: chrome }, `${scope}:${path}`);
+    return _jsx(FormEndpoint.Provider, { value: formEndpoint, children: _jsx(WebsitePageLoader, { scope: scope, pathname: path, initialEntry: initialEntry, initialResult: initialResult, initialSettings: initialSettings, chrome: chrome }, `${scope}:${path}`) });
 }
 function WebsitePageLoader({ scope, pathname, initialEntry, initialResult, initialSettings, chrome }) {
     const [page, setPage] = useState(() => { try {
@@ -710,7 +712,7 @@ function PublishedPage({ entry, pathname, related }) {
     }, [entry, presentation.showTableOfContents]);
     const route = useMemo(() => ({ identity: { kind: entry.kind, slug: entry.slug, locale: entry.locale }, baseline: entry.document, bindings: {} }), [entry]);
     const publishedDate = Number.isFinite(Date.parse(entry.publishedAt)) ? new Date(entry.publishedAt).toLocaleDateString(entry.locale) : '';
-    return _jsxs("main", { className: `cms-website-page cms-website-layout-${presentation.layout}`, children: [presentation.showBreadcrumbs && _jsxs("nav", { "aria-label": "Breadcrumbs", children: [_jsx(SafeLink, { url: "/", children: "Home" }), _jsx("span", { "aria-hidden": "true", children: " / " }), _jsx("span", { "aria-current": "page", children: entry.document.title })] }), _jsx("h1", { children: entry.document.title }), entry.document.excerpt && _jsx("p", { className: "cms-website-excerpt", children: entry.document.excerpt }), presentation.showDate && publishedDate && _jsx("time", { dateTime: entry.publishedAt, children: publishedDate }), presentation.showFeaturedImage && presentation.featuredImage.url && _jsx("img", { className: "cms-website-featured", src: presentation.featuredImage.url, alt: presentation.featuredImage.alt, referrerPolicy: "no-referrer" }), !!headings.length && _jsxs("nav", { className: "cms-website-toc", "aria-label": "Table of contents", children: [_jsx("h2", { children: "On this page" }), _jsx("ul", { children: headings.map(item => _jsx("li", { children: _jsx(SafeLink, { url: `${pathname}#${encodeURIComponent(item.id)}`, children: item.title }) }, item.id)) })] }), _jsx("div", { ref: content, children: _jsx(PublishedDocumentProvider, { initialEntry: entry, pathname: pathname, route: route, children: _jsx(CmsPublishedDocument, {}) }) }), presentation.author && _jsxs("aside", { className: "cms-website-author", "aria-label": "About the author", children: [presentation.author.avatarUrl && _jsx("img", { src: presentation.author.avatarUrl, alt: "", loading: "lazy", referrerPolicy: "no-referrer" }), _jsxs("div", { children: [_jsx("h2", { children: presentation.author.url ? _jsx(SafeLink, { url: presentation.author.url, children: presentation.author.name }) : presentation.author.name }), _jsx("p", { children: presentation.author.jobTitle }), _jsx("p", { children: presentation.author.bio })] })] }), (presentation.categories.length > 0 || presentation.tags.length > 0) && _jsx("nav", { className: "cms-website-terms", "aria-label": "Categories and tags", children: [...presentation.categories, ...presentation.tags].map((term, index) => _jsx(SafeLink, { url: term.path, children: term.name }, `${term.id}:${index}`)) }), presentation.showShare && _jsx(SharePage, { title: entry.document.title, path: entry.path || pathname }), presentation.showRelated && Array.isArray(related) && related.length > 0 && _jsxs("aside", { className: "cms-website-related", children: [_jsx("h2", { children: "Related content" }), _jsx("div", { className: "cms-website-cards", children: related.slice(0, 6).map((value, index) => { const row = record(value); return publicHref(row.path)?.startsWith('/') ? _jsxs("article", { children: [_jsx("h3", { children: _jsx(SafeLink, { url: row.path, children: text(row.title, 200) }) }), _jsx("p", { children: text(row.excerpt, 500) })] }, index) : null; }) })] })] });
+    return _jsxs("main", { className: `cms-website-page cms-website-layout-${presentation.layout}`, children: [presentation.showBreadcrumbs && _jsxs("nav", { "aria-label": "Breadcrumbs", children: [_jsx(SafeLink, { url: "/", children: "Home" }), _jsx("span", { "aria-hidden": "true", children: " / " }), _jsx("span", { "aria-current": "page", children: entry.document.title })] }), _jsx("h1", { children: entry.document.title }), entry.document.excerpt && _jsx("p", { className: "cms-website-excerpt", children: entry.document.excerpt }), presentation.showDate && publishedDate && _jsx("time", { dateTime: entry.publishedAt, children: publishedDate }), presentation.showFeaturedImage && presentation.featuredImage.url && _jsx("img", { className: "cms-website-featured", src: presentation.featuredImage.url, alt: presentation.featuredImage.alt, referrerPolicy: "no-referrer" }), !!headings.length && _jsxs("nav", { className: "cms-website-toc", "aria-label": "Table of contents", children: [_jsx("h2", { children: "On this page" }), _jsx("ul", { children: headings.map(item => _jsx("li", { children: _jsx(SafeLink, { url: `${pathname}#${encodeURIComponent(item.id)}`, children: item.title }) }, item.id)) })] }), _jsx("div", { ref: content, children: _jsx(PublishedDocumentProvider, { initialEntry: entry, pathname: pathname, route: route, formEndpoint: useContext(FormEndpoint), children: _jsx(CmsPublishedDocument, {}) }) }), presentation.author && _jsxs("aside", { className: "cms-website-author", "aria-label": "About the author", children: [presentation.author.avatarUrl && _jsx("img", { src: presentation.author.avatarUrl, alt: "", loading: "lazy", referrerPolicy: "no-referrer" }), _jsxs("div", { children: [_jsx("h2", { children: presentation.author.url ? _jsx(SafeLink, { url: presentation.author.url, children: presentation.author.name }) : presentation.author.name }), _jsx("p", { children: presentation.author.jobTitle }), _jsx("p", { children: presentation.author.bio })] })] }), (presentation.categories.length > 0 || presentation.tags.length > 0) && _jsx("nav", { className: "cms-website-terms", "aria-label": "Categories and tags", children: [...presentation.categories, ...presentation.tags].map((term, index) => _jsx(SafeLink, { url: term.path, children: term.name }, `${term.id}:${index}`)) }), presentation.showShare && _jsx(SharePage, { title: entry.document.title, path: entry.path || pathname }), presentation.showRelated && Array.isArray(related) && related.length > 0 && _jsxs("aside", { className: "cms-website-related", children: [_jsx("h2", { children: "Related content" }), _jsx("div", { className: "cms-website-cards", children: related.slice(0, 6).map((value, index) => { const row = record(value); return publicHref(row.path)?.startsWith('/') ? _jsxs("article", { children: [_jsx("h3", { children: _jsx(SafeLink, { url: row.path, children: text(row.title, 200) }) }), _jsx("p", { children: text(row.excerpt, 500) })] }, index) : null; }) })] })] });
 }
 function SharePage({ title, path }) {
     const [status, setStatus] = useState('');

package/dist/templates/next-theme/app/[[...cmsPath]]/page.tsx

@@ -3,8 +3,10 @@ import { cache } from 'react';
 import { connection } from 'next/server';
 import { notFound, permanentRedirect, redirect } from 'next/navigation';
 import { websiteMetadata } from '@universalcms/connect/website-runtime';
-import { CmsWebsitePage } from '@universalcms/connect/react-website';
-import { configuration, runtime, scope } from '../../lib/universalcms';
+import { applyGlobalSections } from '@universalcms/connect/theme';
+import { CmsWebsite, CmsWebsitePage } from '@universalcms/connect/react-website';
+import { SiteFooter, SiteHeader } from '../../components/site-chrome';
+import { configuration, design, patterns, runtime, scope } from '../../lib/universalcms';
 
 const settings = cache(async () => { await connection(); return runtime.settings(); });
 const read = cache(async (pathname: string) => { await connection(); return runtime.page(pathname); });
@@ -34,10 +36,17 @@ export async function generateMetadata({ params }: Props) {
 }
 
 export default async function Page({ params }: Props) {
-  const pathname = await pathOf(params), result = await load(pathname), snapshot = await settings();
+  const pathname = await pathOf(params), loaded = await load(pathname), snapshot = await settings(), tokens = await design(), saved = await patterns();
+  const result = loaded.state === 'published' ? { ...loaded, entry: applyGlobalSections(loaded.entry, saved) } : loaded;
   const structured = websiteMetadata(result.state === 'published' ? result.entry : null, snapshot, pathname, configuration.websiteOrigin).jsonLd;
   return <>
     {structured && <script type="application/ld+json" data-universalcms-setting="seo" dangerouslySetInnerHTML={{ __html: JSON.stringify(structured).replace(/</g, '\\u003c') }}/>}
-    <CmsWebsitePage pathname={pathname} scope={scope} initialResult={result} initialSettings={snapshot}/>
+    <CmsWebsite scope={scope} initialSettings={snapshot} applyTemplate={false} chrome={false}>
+      <div className="cms-website theme-site">
+        <SiteHeader header={tokens.header} patterns={saved} />
+        <main className="theme-main"><CmsWebsitePage pathname={pathname} scope={scope} initialResult={result} initialSettings={snapshot} chrome={false} formEndpoint="/api/universalcms/form"/></main>
+        <SiteFooter footer={tokens.footer} patterns={saved} />
+      </div>
+    </CmsWebsite>
   </>;
 }

package/dist/templates/next-theme/app/api/cms-source/route.ts

@@ -0,0 +1,10 @@
+// Universal CMS website endpoints (content import from a previous website).
+import { createThemeHandler } from "@universalcms/connect/theme";
+import { adminOrigin, configuration, pendingImport } from "../../../lib/universalcms";
+
+const handle = createThemeHandler({ configuration, adminOrigin, imported: pendingImport });
+export const dynamic = "force-dynamic";
+export const GET = handle;
+export const HEAD = handle;
+export const OPTIONS = handle;
+

package/dist/templates/next-theme/app/api/universalcms/[endpoint]/route.ts

@@ -1,8 +1,8 @@
 // Universal CMS website endpoints (settings, live page updates, sitemap, robots).
 import { createThemeHandler } from "@universalcms/connect/theme";
-import { adminOrigin, configuration } from "../../../../lib/universalcms";
+import { adminOrigin, configuration, pendingImport } from "../../../../lib/universalcms";
 
-const handle = createThemeHandler({ configuration, adminOrigin });
+const handle = createThemeHandler({ configuration, adminOrigin, imported: pendingImport });
 export const dynamic = "force-dynamic";
 export const GET = handle;
 export const HEAD = handle;

package/dist/templates/next-theme/app/api/universalcms/form/route.ts

@@ -0,0 +1,8 @@
+// Universal CMS website endpoints (form submissions from published pages).
+import { createThemeHandler } from "@universalcms/connect/theme";
+import { adminOrigin, configuration, pendingImport } from "../../../../lib/universalcms";
+
+const handle = createThemeHandler({ configuration, adminOrigin, imported: pendingImport });
+export const dynamic = "force-dynamic";
+export const POST = handle;
+

package/dist/templates/next-theme/app/cms-preview/page.tsx

@@ -0,0 +1,28 @@
+// Draft preview for the Universal CMS visual editor. Opened inside the CMS only;
+// headers in next.config.mjs keep it private and frameable by the CMS admin.
+import { connection } from 'next/server';
+import { CmsPreview } from '@universalcms/connect/theme-preview';
+import { CmsWebsite } from '@universalcms/connect/react-website';
+import { SiteFooter, SiteHeader } from '../../components/site-chrome';
+import { adminOrigin, design, patterns, runtime, scope } from '../../lib/universalcms';
+
+export const metadata = { robots: { index: false, follow: false } };
+type Props = { searchParams: Promise<Record<string, string | string[] | undefined>> };
+
+export default async function Preview({ searchParams }: Props) {
+  await connection();
+  const params = new URLSearchParams();
+  for (const [name, value] of Object.entries(await searchParams)) for (const item of [value].flat()) if (typeof item === 'string') params.append(name, item);
+  const [draft, settings, tokens, saved] = await Promise.all([runtime.preview(params), runtime.settings(), design(), patterns()]);
+  if (!draft) return <main className="theme-main"><p role="status">This preview link expired or is not valid. Reopen the page in Universal CMS.</p></main>;
+  return <CmsWebsite scope={scope} initialSettings={settings} applyTemplate={false} chrome={false}>
+    <div className="cms-website theme-site">
+      <SiteHeader header={tokens.header} patterns={saved} />
+      <main className="theme-main">
+        <h1>{draft.title}</h1>
+        <CmsPreview document={draft.document as never} entryId={draft.entryId} adminOrigin={adminOrigin} expiresAt={draft.expiresAt} />
+      </main>
+      <SiteFooter footer={tokens.footer} patterns={saved} />
+    </div>
+  </CmsWebsite>;
+}

package/dist/templates/next-theme/app/globals.css

@@ -1,12 +1,96 @@
-/* Universal CMS theme base styles. Brand colors come from CMS Branding. */
-:root { --cms-website-accent: #4f46e5; color-scheme: light; }
+/* Universal CMS theme base styles. Values come from Appearance → Design. */
 * { box-sizing: border-box; }
-body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.6; color: #0f172a; background: #fff; }
+body { margin: 0; font-family: var(--cms-font-body); font-size: var(--cms-font-size); line-height: 1.65; color: var(--cms-text); background: var(--cms-background); }
+h1, h2, h3, h4 { font-family: var(--cms-font-heading); font-weight: var(--cms-heading-weight); line-height: 1.2; }
+h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 calc(var(--cms-gap) * 1); }
+h2 { margin: calc(var(--cms-gap) * 2) 0 calc(var(--cms-gap) * .6); }
+p { margin: 0 0 var(--cms-gap); }
+a { color: var(--cms-primary); }
+img { max-width: 100%; height: auto; border-radius: var(--cms-radius); }
 .cms-website { min-height: 100vh; display: flex; flex-direction: column; }
-.cms-website > :not(header):not(footer) { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 32px 20px 64px; }
-.cms-website-header, .cms-website-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding: 16px max(20px, calc((100% - 1100px) / 2)); }
-.cms-website-header { border-bottom: 1px solid #e2e8f0; }
-.cms-website-footer { border-top: 1px solid #e2e8f0; color: #475569; font-size: 14px; }
-a { color: var(--cms-website-accent); }
-img { max-width: 100%; height: auto; }
-h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; margin: 0 0 16px; }
+.cms-website > :not(header):not(footer) { flex: 1; width: 100%; max-width: var(--cms-container); margin: 0 auto; padding: calc(var(--cms-gap) * 2.5) 20px calc(var(--cms-gap) * 4); }
+.cms-website-header, .cms-website-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cms-gap) calc(var(--cms-gap) * 1.75); padding: var(--cms-gap) max(20px, calc((100% - var(--cms-container)) / 2)); }
+.cms-website-header { border-bottom: 1px solid var(--cms-border); background: var(--cms-background); }
+.cms-website-footer { border-top: 1px solid var(--cms-border); background: var(--cms-surface); color: var(--cms-muted); font-size: .9em; }
+.cms-website-header a, .cms-website-footer a { color: inherit; text-decoration: none; }
+.cms-website-header a:hover, .cms-website-footer a:hover { color: var(--cms-primary); }
+blockquote, pre, table, .cms-block-faq, .cms-block-table { background: var(--cms-surface); border: 1px solid var(--cms-border); border-radius: var(--cms-radius); }
+blockquote { margin: var(--cms-gap) 0; padding: var(--cms-gap) calc(var(--cms-gap) * 1.25); border-left: 4px solid var(--cms-primary); }
+
+/* Header and footer presets (Appearance → Design → Header & footer). */
+.theme-site { min-height: 100vh; display: flex; flex-direction: column; }
+.theme-main { flex: 1; width: 100%; max-width: var(--cms-container); margin: 0 auto; padding: calc(var(--cms-gap) * 2.5) 20px calc(var(--cms-gap) * 4); }
+.theme-header, .theme-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cms-gap) calc(var(--cms-gap) * 1.75); padding: var(--cms-gap) max(20px, calc((100% - var(--cms-container)) / 2)); }
+.theme-header { border-bottom: 1px solid var(--cms-border); background: var(--cms-background); z-index: 10; }
+.theme-header-sticky { position: sticky; top: 0; }
+.theme-header-split .theme-header-menu { margin-left: auto; }
+.theme-header-centered { flex-direction: column; text-align: center; }
+.theme-header-cta { margin-left: auto; }
+.theme-header-split .theme-header-cta, .theme-header-centered .theme-header-cta { margin-left: 0; }
+.theme-header a:not(.cms-button), .theme-footer a { color: inherit; text-decoration: none; }
+.theme-header a:not(.cms-button):hover, .theme-footer a:hover { color: var(--cms-primary); }
+.theme-footer { border-top: 1px solid var(--cms-border); background: var(--cms-surface); color: var(--cms-muted); font-size: .9em; }
+.theme-footer-centered { flex-direction: column; text-align: center; }
+.theme-footer-columns { align-items: flex-start; }
+@media (max-width: 640px) { .theme-header { flex-direction: column; align-items: flex-start; } .theme-header-split .theme-header-menu, .theme-header-cta { margin-left: 0; } }
+
+/* Page sections and columns from the page builder. */
+.cms-section-none, .cms-section-muted, .cms-section-accent, .cms-section-dark { border-radius: var(--cms-radius); margin: calc(var(--cms-gap) * 1.5) 0; }
+.cms-section-muted { background: var(--cms-surface); border: 1px solid var(--cms-border); }
+.cms-section-accent { background: var(--cms-primary); color: var(--cms-primary-text); }
+.cms-section-accent a.cms-button { background: var(--cms-primary-text); color: var(--cms-primary); border-color: var(--cms-primary-text); }
+.cms-section-dark { background: var(--cms-text); color: var(--cms-background); }
+.cms-padding-small { padding: calc(var(--cms-gap) * .75); }
+.cms-padding-medium { padding: calc(var(--cms-gap) * 1.5); }
+.cms-padding-large { padding: calc(var(--cms-gap) * 3) calc(var(--cms-gap) * 2); }
+.cms-width-wide { margin-inline: calc((min(100vw, 90rem) - 100%) / -2); }
+.cms-width-full { margin-inline: calc((100vw - 100%) / -2); border-radius: 0; }
+.cms-columns { display: grid; gap: calc(var(--cms-gap) * 1.5); }
+.cms-gap-small { gap: calc(var(--cms-gap) * .5); }
+.cms-gap-large { gap: calc(var(--cms-gap) * 2.25); }
+.cms-layout-1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.cms-layout-1-1-1 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.cms-layout-1-1-1-1 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.cms-layout-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
+.cms-layout-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
+.cms-column { min-width: 0; }
+.cms-column > :first-child h3, .cms-column h3:first-child { margin-top: 0; }
+@media (max-width: 760px) { .cms-columns.cms-stack { grid-template-columns: 1fr; } }
+
+/* Visual editor: the selected block in the CMS is outlined. */
+.cms-preview [data-cms-block] { cursor: pointer; }
+.cms-preview [data-cms-block]:hover { outline: 1px dashed var(--cms-primary); outline-offset: 3px; }
+.cms-preview .cms-selected { outline: 2px solid var(--cms-primary); outline-offset: 3px; }
+.cms-preview-toolbar { display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: #1c1940; box-shadow: 0 6px 18px rgb(0 0 0 / 18%); }
+.cms-preview-toolbar button { width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: #fff; font: 600 13px/1 system-ui, sans-serif; cursor: pointer; }
+.cms-preview-toolbar button:hover { background: rgb(255 255 255 / 14%); }
+.cms-inline-editing { outline: none; cursor: text; }
+
+/* Block styles from the page builder (Style panel). */
+.cms-radius-none { border-radius: 0; } .cms-radius-small { border-radius: .375rem; } .cms-radius-medium { border-radius: .75rem; } .cms-radius-large { border-radius: 1.25rem; } .cms-radius-pill { border-radius: 999px; }
+.cms-border-true { border: 1px solid var(--cms-border); }
+.cms-weight-normal { font-weight: 400; } .cms-weight-medium { font-weight: 500; } .cms-weight-bold { font-weight: 700; }
+.cms-weight-bold :is(p, li, blockquote) { font-weight: 700; }
+.cms-maxWidth-narrow { max-width: 42rem; margin-inline: auto; } .cms-maxWidth-normal { max-width: 64rem; margin-inline: auto; } .cms-maxWidth-full { max-width: none; }
+.cms-block[style*="--cms-block-color"] :is(p, li, h2, h3, h4, blockquote) { color: inherit; }
+
+/* Mobile overrides from the Style panel (Mobile tab). */
+@media (max-width:760px){.cms-m-align-left{text-align:left!important}.cms-m-align-center{text-align:center!important}.cms-m-align-right{text-align:right!important}.cms-m-size-small{font-size:.875em!important}.cms-m-size-normal{font-size:1em!important}.cms-m-size-large{font-size:1.25em!important}.cms-m-padding-none{padding:0!important}.cms-m-padding-small{padding:.75rem!important}.cms-m-padding-medium{padding:1.25rem!important}.cms-m-padding-large{padding:2.5rem!important}.cms-m-spaceAbove-none{margin-top:0!important}.cms-m-spaceAbove-small{margin-top:.5rem!important}.cms-m-spaceAbove-medium{margin-top:1.25rem!important}.cms-m-spaceAbove-large{margin-top:2.5rem!important}.cms-m-spaceBelow-none{margin-bottom:0!important}.cms-m-spaceBelow-small{margin-bottom:.5rem!important}.cms-m-spaceBelow-medium{margin-bottom:1.25rem!important}.cms-m-spaceBelow-large{margin-bottom:2.5rem!important}}
+
+/* Saved-section header/footer, popups and scroll animations. */
+.theme-header-custom, .theme-footer-custom { width: 100%; }
+.theme-header-custom .cms-document > .cms-block-section, .theme-footer-custom .cms-document > .cms-block-section { margin: 0; border-radius: 0; }
+.cms-popup-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgb(15 23 42 / 45%); }
+.cms-popup { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; border-radius: calc(var(--cms-radius) + 6px); background: var(--cms-background); box-shadow: 0 24px 60px rgb(0 0 0 / 25%); }
+.cms-popup .cms-document > .cms-block-section { margin: 0; }
+.cms-popup-close { position: absolute; top: 8px; right: 8px; z-index: 1; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--cms-surface); color: var(--cms-text); font-size: 20px; line-height: 1; cursor: pointer; }
+.cms-anim-ready [class*="cms-animation-"] { opacity: 0; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
+.cms-anim-ready .cms-animation-fade-up { transform: translateY(24px); }
+.cms-anim-ready .cms-animation-zoom-in { transform: scale(.94); }
+.cms-anim-ready .cms-animation-slide-left { transform: translateX(32px); }
+.cms-anim-ready [class*="cms-animation-"].cms-anim-in { opacity: 1; transform: none; }
+@media (prefers-reduced-motion: reduce) { .cms-anim-ready [class*="cms-animation-"] { opacity: 1 !important; transform: none !important; transition: none !important; } }
+.cms-preview-drag { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: #fff; cursor: grab; font: 600 14px/1 system-ui, sans-serif; }
+.cms-preview-drag:hover { background: rgb(255 255 255 / 14%); }
+.theme-header-custom [class*="cms-section-"], .theme-footer-custom [class*="cms-section-"] { margin: 0; border-radius: 0; }
+.theme-header-custom .cms-block, .theme-footer-custom .cms-block { margin: 0; }

package/dist/templates/next-theme/app/layout.tsx

@@ -1,10 +1,20 @@
 import type { ReactNode } from 'react';
+import { connection } from 'next/server';
+import { themeCss, themeFontsHref } from '@universalcms/connect/theme';
 import '@universalcms/connect/website.css';
 import './globals.css';
+import { design as loadDesign } from '../lib/universalcms';
 
-export default function RootLayout({ children }: { children: ReactNode }) {
+// Colors, fonts, spacing and buttons come from Appearance → Design in Universal CMS.
+export default async function RootLayout({ children }: { children: ReactNode }) {
+  await connection();
+  const design = await loadDesign(), fonts = themeFontsHref(design);
   return (
     <html lang="en">
+      <head>
+        {fonts && <link rel="stylesheet" href={fonts} />}
+        <style data-universalcms-design="">{themeCss(design)}</style>
+      </head>
       <body>{children}</body>
     </html>
   );

package/dist/templates/next-theme/app/not-found.tsx

@@ -1,9 +1,12 @@
 import { connection } from 'next/server';
 import { CmsExperience, CmsWebsite } from '@universalcms/connect/react-website';
-import { runtime, scope } from '../lib/universalcms';
+import { SiteFooter, SiteHeader } from '../components/site-chrome';
+import { design, patterns, runtime, scope } from '../lib/universalcms';
 
 export default async function NotFound() {
   await connection();
-  const settings = await runtime.settings();
-  return <CmsWebsite scope={scope} initialSettings={settings} applyTemplate={false}><main><CmsExperience notFound /></main></CmsWebsite>;
+  const [settings, tokens, saved] = await Promise.all([runtime.settings(), design(), patterns()]);
+  return <CmsWebsite scope={scope} initialSettings={settings} applyTemplate={false} chrome={false}>
+    <div className="cms-website theme-site"><SiteHeader header={tokens.header} patterns={saved} /><main className="theme-main"><CmsExperience notFound /></main><SiteFooter footer={tokens.footer} patterns={saved} /></div>
+  </CmsWebsite>;
 }

package/dist/templates/next-theme/app/robots.txt/route.ts

@@ -1,8 +1,8 @@
 // Universal CMS website endpoints (settings, live page updates, sitemap, robots).
 import { createThemeHandler } from "@universalcms/connect/theme";
-import { adminOrigin, configuration } from "../../lib/universalcms";
+import { adminOrigin, configuration, pendingImport } from "../../lib/universalcms";
 
-const handle = createThemeHandler({ configuration, adminOrigin });
+const handle = createThemeHandler({ configuration, adminOrigin, imported: pendingImport });
 export const dynamic = "force-dynamic";
 export const GET = handle;
 export const HEAD = handle;

package/dist/templates/next-theme/app/sitemap.xml/route.ts

@@ -1,8 +1,8 @@
 // Universal CMS website endpoints (settings, live page updates, sitemap, robots).
 import { createThemeHandler } from "@universalcms/connect/theme";
-import { adminOrigin, configuration } from "../../lib/universalcms";
+import { adminOrigin, configuration, pendingImport } from "../../lib/universalcms";
 
-const handle = createThemeHandler({ configuration, adminOrigin });
+const handle = createThemeHandler({ configuration, adminOrigin, imported: pendingImport });
 export const dynamic = "force-dynamic";
 export const GET = handle;
 export const HEAD = handle;

package/dist/templates/next-theme/components/site-chrome.tsx

@@ -0,0 +1,38 @@
+'use client';
+// Header and footer of the Universal CMS website. Layout choices come from
+// Appearance → Design; logo, menus and social links from the other Appearance pages.
+import { CmsBranding, CmsExperience, CmsLanguages, CmsNavigation, CmsSocialLinks } from '@universalcms/connect/react-website';
+import { CmsAnimations, CmsBlocks, CmsPopup } from '@universalcms/connect/theme-client';
+
+type Pattern = { id: string; block: unknown; slot?: 'header' | 'footer' | 'popup'; popup?: { delaySeconds: number; frequency: 'once' | 'session' | 'always' } };
+
+type Header = { layout: 'left' | 'centered' | 'split'; sticky: boolean; ctaLabel: string; ctaUrl: string };
+type Footer = { layout: 'simple' | 'centered' | 'columns'; showSocial: boolean };
+
+export function SiteHeader({ header, patterns = [] }: { header: Header; patterns?: Pattern[] }) {
+  // A saved section marked as the site header replaces the preset header.
+  const custom = patterns.find(pattern => pattern.slot === 'header');
+  if (custom) return <header className="theme-header-custom"><CmsBlocks blocks={[custom.block]} /></header>;
+  return (
+    <header className={`theme-header theme-header-${header.layout}${header.sticky ? ' theme-header-sticky' : ''}`}>
+      <CmsBranding />
+      <nav className="theme-header-menu" aria-label="Main"><CmsNavigation location="header" /></nav>
+      <CmsLanguages />
+      {header.ctaLabel && header.ctaUrl && <a className="cms-button theme-header-cta" href={header.ctaUrl}>{header.ctaLabel}</a>}
+    </header>
+  );
+}
+
+export function SiteFooter({ footer, patterns = [] }: { footer: Footer; patterns?: Pattern[] }) {
+  const custom = patterns.find(pattern => pattern.slot === 'footer');
+  const extras = <>{patterns.filter(pattern => pattern.slot === 'popup').map(pattern => <CmsPopup key={pattern.id} id={pattern.id} blocks={[pattern.block]} delaySeconds={pattern.popup?.delaySeconds ?? 5} frequency={pattern.popup?.frequency ?? 'once'} />)}<CmsAnimations /></>;
+  if (custom) return <><footer className="theme-footer-custom"><CmsBlocks blocks={[custom.block]} /><CmsExperience /></footer>{extras}</>;
+  return (<>
+    <footer className={`theme-footer theme-footer-${footer.layout}`}>
+      <CmsNavigation location="footer" />
+      {footer.showSocial && <CmsSocialLinks />}
+      <CmsExperience />
+    </footer>
+    {extras}</>
+  );
+}

package/dist/templates/next-theme/lib/universalcms.ts

@@ -1,5 +1,8 @@
 // Universal CMS theme: shared runtime. Connection values are public; the
 // website key is read from .env.local on the server only.
+import { cache } from 'react';
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
 import { createThemeRuntime } from '@universalcms/connect/theme';
 import website from '../.universalcms/website.json';
 import connection from '../.universalcms/connection.json';
@@ -8,3 +11,11 @@ export const configuration = website as Parameters<typeof createThemeRuntime>[0]
 export const adminOrigin = connection.adminOrigin;
 export const scope = `${website.siteId}:${website.environmentId}`;
 export const runtime = createThemeRuntime({ configuration });
+/** Design tokens for this request (Appearance → Design), shared by layout and pages. */
+export const design = cache(() => runtime.design());
+/** Pages and menus from a previous website, waiting to be imported into the CMS (removed after import). */
+export async function pendingImport() {
+  try { return JSON.parse(await readFile(path.join(process.cwd(), '.universalcms', 'import.json'), 'utf8')); } catch { return null; }
+}
+/** Saved sections for this request: linked sections, header/footer and popups. */
+export const patterns = cache(() => runtime.patterns());

package/dist/templates/next-theme/next.config.mjs

@@ -1 +1,17 @@
-export default { htmlLimitedBots: /.*/ };
+import { readFileSync } from 'node:fs';
+
+// The CMS visual editor frames /cms-preview from the CMS admin address only.
+let adminOrigin = null;
+try { adminOrigin = new URL(JSON.parse(readFileSync(new URL('./.universalcms/connection.json', import.meta.url), 'utf8')).adminOrigin).origin; } catch { /* Not connected yet. */ }
+
+export default {
+  htmlLimitedBots: /.*/,
+  async headers() {
+    return adminOrigin ? [{ source: '/cms-preview', headers: [
+      { key: 'Cache-Control', value: 'private, no-store' },
+      { key: 'X-Robots-Tag', value: 'noindex, nofollow' },
+      { key: 'Referrer-Policy', value: 'no-referrer' },
+      { key: 'Content-Security-Policy', value: `frame-ancestors ${adminOrigin}` },
+    ] }] : [];
+  },
+};

package/dist/theme-client.d.mts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+export function CmsBlocks(props: { blocks: unknown[]; className?: string }): ReactNode;
+export function CmsPopup(props: { id: string; blocks: unknown[]; delaySeconds: number; frequency: 'once' | 'session' | 'always' }): ReactNode;
+export function CmsAnimations(): ReactNode;

package/dist/theme-client.mjs

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Client pieces of the Universal CMS theme: saved sections rendered as the
+// header/footer or a popup, and scroll-in animations chosen in the Style panel.
+import React, { useEffect, useState } from "react";
+import { CmsDocument } from "./vendor/react-document.mjs";
+/** Renders saved-section blocks (for example the site header built in the page builder). */
+export function CmsBlocks({ blocks, className }) {
+    return _jsx("div", { className: className, children: _jsx(CmsDocument, { document: { blocks: blocks } }) });
+}
+/** A saved section shown as a popup after a delay; frequency is remembered per browser. */
+export function CmsPopup({ id, blocks, delaySeconds, frequency }) {
+    const [open, setOpen] = useState(false);
+    const key = `universalcms:popup:${id}`;
+    useEffect(() => {
+        try {
+            if (frequency === "once" && localStorage.getItem(key))
+                return;
+            if (frequency === "session" && sessionStorage.getItem(key))
+                return;
+        }
+        catch { /* Storage can be unavailable; show the popup. */ }
+        const timer = window.setTimeout(() => setOpen(true), Math.max(0, Math.min(delaySeconds, 120)) * 1000);
+        return () => window.clearTimeout(timer);
+    }, [key, delaySeconds, frequency]);
+    const close = () => {
+        setOpen(false);
+        try {
+            if (frequency === "once")
+                localStorage.setItem(key, "1");
+            if (frequency === "session")
+                sessionStorage.setItem(key, "1");
+        }
+        catch { /* Per-browser convenience only. */ }
+    };
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (event) => { if (event.key === "Escape")
+            close(); };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    });
+    if (!open)
+        return null;
+    return _jsx("div", { className: "cms-popup-backdrop", role: "presentation", onClick: event => { if (event.target === event.currentTarget)
+            close(); }, children: _jsxs("div", { className: "cms-popup", role: "dialog", "aria-modal": "true", "aria-label": "Announcement", children: [_jsx("button", { type: "button", className: "cms-popup-close", "aria-label": "Close", onClick: close, children: "\u00D7" }), _jsx(CmsDocument, { document: { blocks: blocks } })] }) });
+}
+/** Reveals blocks with an animation class as they scroll into view; honours reduced motion. */
+export function CmsAnimations() {
+    useEffect(() => {
+        const root = document.documentElement;
+        if (window.matchMedia("(prefers-reduced-motion: reduce)").matches || !("IntersectionObserver" in window))
+            return;
+        root.classList.add("cms-anim-ready");
+        const observer = new IntersectionObserver(entries => {
+            for (const entry of entries)
+                if (entry.isIntersecting) {
+                    entry.target.classList.add("cms-anim-in");
+                    observer.unobserve(entry.target);
+                }
+        }, { rootMargin: "0px 0px -8% 0px", threshold: 0.1 });
+        const watch = () => document.querySelectorAll('[class*="cms-animation-"]:not(.cms-anim-in)').forEach(node => observer.observe(node));
+        watch();
+        const mutations = new MutationObserver(watch);
+        mutations.observe(document.body, { childList: true, subtree: true });
+        return () => { observer.disconnect(); mutations.disconnect(); root.classList.remove("cms-anim-ready"); };
+    }, []);
+    return null;
+}