@universalcms/connect 0.13.3 → 0.18.0

package/dist/theme-preview.mjs

@@ -0,0 +1,149 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { CmsDocument } from './vendor/react-document.mjs';
+import { previewOrigin, readPreviewMessage } from './vendor/react-preview-protocol.mjs';
+/** Mount exclusively on the authenticated, no-store preview route. */
+export function CmsPreview({ document: initial, entryId, adminOrigin, expiresAt, render, ...props }) {
+    const origin = previewOrigin(adminOrigin);
+    const expiry = Date.parse(expiresAt);
+    const [document, setDocument] = useState(initial), [selectedId, setSelectedId] = useState(null);
+    const root = useRef(null), editing = useRef(null), pending = useRef(null);
+    const [toolbar, setToolbar] = useState(null);
+    const [dragging, setDragging] = useState(null), [dropTarget, setDropTarget] = useState(null);
+    const [expired, setExpired] = useState(!Number.isFinite(expiry) || expiry <= Date.now());
+    useEffect(() => { setDocument(initial); setSelectedId(null); }, [initial, entryId]);
+    useEffect(() => {
+        const remaining = expiry - Date.now();
+        setExpired(!Number.isFinite(expiry) || remaining <= 0);
+        if (!Number.isFinite(expiry) || remaining <= 0)
+            return;
+        const timeout = setTimeout(() => setExpired(true), Math.min(remaining, 2147483647));
+        return () => clearTimeout(timeout);
+    }, [expiry]);
+    useEffect(() => {
+        if (window.parent === window || expired || !Number.isFinite(expiry) || expiry <= Date.now())
+            return;
+        const parent = window.parent;
+        const ready = () => { if (Date.now() < expiry)
+            parent.postMessage({ source: 'universal-cms-site', type: 'ready', entryId }, origin); };
+        const receive = (event) => {
+            if (Date.now() >= expiry) {
+                setExpired(true);
+                return;
+            }
+            const message = readPreviewMessage(event, { origin, parent, entryId });
+            if (!message)
+                return;
+            // Never replace text under the caret; the edit is already in the admin's copy.
+            if (message.type === 'document') {
+                if (!editing.current)
+                    setDocument(message.document);
+                else
+                    pending.current = message.document;
+            }
+            else if (message.type === 'select')
+                setSelectedId(message.id);
+            else
+                ready();
+        };
+        window.addEventListener('message', receive);
+        ready();
+        return () => window.removeEventListener('message', receive);
+    }, [entryId, origin, expiry, expired]);
+    function select(event) {
+        if (expired || !Number.isFinite(expiry) || Date.now() >= expiry)
+            return;
+        if (!(event.target instanceof Element))
+            return;
+        const block = event.target.closest('[data-cms-block]');
+        if (!block || !event.currentTarget.contains(block))
+            return;
+        // A preview click selects the block without navigating away or submitting forms.
+        if (event.target.closest('.cms-inline-editing'))
+            return;
+        if (event.target.closest('a,button,input,select,textarea'))
+            event.preventDefault();
+        const id = block.dataset.cmsBlock;
+        if (!id || window.parent === window)
+            return;
+        setSelectedId(id);
+        window.parent.postMessage({ source: 'universal-cms-site', type: 'select', entryId, id }, origin);
+    }
+    const send = (message) => { if (window.parent !== window && Date.now() < expiry)
+        window.parent.postMessage({ source: 'universal-cms-site', entryId, ...message }, origin); };
+    // Inline text editing: the selected text block becomes editable on the page itself.
+    useLayoutEffect(() => {
+        const container = root.current;
+        const block = selectedId && container ? container.querySelector(`[data-cms-block="${CSS.escape(selectedId)}"]`) : null;
+        if (!container || !block || expired) {
+            setToolbar(null);
+            return;
+        }
+        const box = block.getBoundingClientRect(), frame = container.getBoundingClientRect();
+        setToolbar({ top: box.top - frame.top, left: box.right - frame.left });
+        const target = block.querySelector('h1,h2,h3,h4,p,blockquote,pre,ul,ol,a.cms-button') ?? null;
+        const editable = target && !target.querySelector('[data-cms-block]') ? target : null;
+        if (!editable)
+            return;
+        try {
+            editable.contentEditable = 'plaintext-only';
+        }
+        catch {
+            editable.contentEditable = 'true';
+        }
+        editable.spellcheck = true;
+        editable.classList.add('cms-inline-editing');
+        const text = () => editable.matches('ul,ol') ? [...editable.querySelectorAll('li')].map(item => item.innerText).join('\n') : editable.innerText;
+        const onInput = () => send({ type: 'text', id: selectedId, text: text().slice(0, 30000) });
+        const onFocus = () => { editing.current = editable; };
+        const onBlur = () => { editing.current = null; if (pending.current) {
+            setDocument(pending.current);
+            pending.current = null;
+        } };
+        const onKey = (event) => { if (event.key === 'Escape')
+            editable.blur(); if (event.key === 'Enter' && !editable.matches('ul,ol,pre,blockquote,p'))
+            event.preventDefault(); };
+        editable.addEventListener('input', onInput);
+        editable.addEventListener('focus', onFocus);
+        editable.addEventListener('blur', onBlur);
+        editable.addEventListener('keydown', onKey);
+        return () => {
+            editable.removeEventListener('input', onInput);
+            editable.removeEventListener('focus', onFocus);
+            editable.removeEventListener('blur', onBlur);
+            editable.removeEventListener('keydown', onKey);
+            editable.removeAttribute('contenteditable');
+            editable.classList.remove('cms-inline-editing');
+        };
+    }, [selectedId, document, expired]);
+    if (expired || !Number.isFinite(expiry) || expiry <= Date.now())
+        return _jsx("p", { role: "status", children: "This preview has expired. Reopen it from the CMS." });
+    const action = (name) => { if (selectedId)
+        send({ type: 'action', id: selectedId, action: name }); };
+    // Drop on another block: the admin moves the dragged block before or after it.
+    const over = (event) => {
+        if (!dragging || !(event.target instanceof Element) || !root.current)
+            return;
+        const target = event.target.closest('[data-cms-block]');
+        if (!target || target.dataset.cmsBlock === dragging || target.closest(`[data-cms-block="${CSS.escape(dragging)}"]`)) {
+            setDropTarget(null);
+            return;
+        }
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'move';
+        const box = target.getBoundingClientRect(), frame = root.current.getBoundingClientRect(), position = event.clientY < box.top + box.height / 2 ? 'before' : 'after';
+        setDropTarget({ id: target.dataset.cmsBlock, position, top: (position === 'before' ? box.top : box.bottom) - frame.top, left: box.left - frame.left, width: box.width });
+    };
+    const drop = (event) => {
+        if (!dragging || !dropTarget)
+            return;
+        event.preventDefault();
+        send({ type: 'action', id: dragging, action: 'move', targetId: dropTarget.id, position: dropTarget.position });
+        setDragging(null);
+        setDropTarget(null);
+    };
+    return _jsxs("div", { ref: root, className: "cms-preview", style: { position: 'relative' }, onClickCapture: select, onDragOver: over, onDrop: drop, onDragLeave: event => { if (event.currentTarget === event.target)
+            setDropTarget(null); }, children: [dropTarget && _jsx("div", { className: "cms-preview-drop", "aria-hidden": "true", style: { position: 'absolute', top: dropTarget.top - 2, left: dropTarget.left, width: dropTarget.width, height: 4, borderRadius: 2, background: '#5b3fd6', zIndex: 30, pointerEvents: 'none' } }), toolbar && selectedId && _jsxs("div", { className: "cms-preview-toolbar", role: "toolbar", "aria-label": "Block actions", style: { position: 'absolute', top: Math.max(0, toolbar.top - 36), left: toolbar.left, transform: 'translateX(-100%)', zIndex: 20 }, onClick: event => event.stopPropagation(), children: [_jsx("span", { className: "cms-preview-drag", draggable: true, title: "Drag to move", "aria-label": "Drag to move", role: "button", onDragStart: event => { if (!selectedId)
+                            return; event.dataTransfer.setData('text/x-cms-block', selectedId); event.dataTransfer.effectAllowed = 'move'; setDragging(selectedId); }, onDragEnd: () => { setDragging(null); setDropTarget(null); }, children: "\u283F" }), _jsx("button", { type: "button", title: "Move up", "aria-label": "Move up", onClick: () => action('up'), children: "\u2191" }), _jsx("button", { type: "button", title: "Move down", "aria-label": "Move down", onClick: () => action('down'), children: "\u2193" }), _jsx("button", { type: "button", title: "Duplicate", "aria-label": "Duplicate", onClick: () => action('duplicate'), children: "\u29C9" }), _jsx("button", { type: "button", title: "Delete", "aria-label": "Delete", onClick: () => action('delete'), children: "\u2715" })] }), render ? render(document, selectedId) : _jsx(CmsDocument, { ...props, document: document, entryId: entryId, preview: true, selectedId: selectedId })] });
+}

package/dist/theme.d.mts

@@ -2,5 +2,12 @@ import type { createWebsiteRuntime } from './website-runtime.mjs';
 export const THEME_MODE: 'theme';
 export type ThemeConfiguration = { version: 1; apiOrigin: string; siteId: string; environmentId: string; websiteOrigin: string; routes: { path: string; kind: string; slug: string; locale: string }[] };
 export function themeConfiguration(connection: { apiOrigin: string; siteId: string; environmentId: string; websiteOrigin: string; locale?: string }): ThemeConfiguration;
-export function createThemeRuntime(options: { configuration: ThemeConfiguration; env?: () => Record<string, string | undefined>; fetcher?: typeof fetch }): ReturnType<typeof createWebsiteRuntime>;
-export function createThemeHandler(options: { configuration: ThemeConfiguration; adminOrigin: string; env?: () => Record<string, string | undefined>; fetcher?: typeof fetch }): (request: Request) => Promise<Response>;
+export type ThemeDesign = { colors: Record<'primary' | 'primaryText' | 'background' | 'surface' | 'text' | 'mutedText' | 'border', string>; typography: { bodyFont: string; headingFont: string; baseSize: number; headingWeight: number }; layout: { containerWidth: number; radius: number; spacing: 'compact' | 'comfortable' | 'spacious' }; buttons: { style: 'solid' | 'outline' | 'soft'; shape: 'square' | 'rounded' | 'pill'; uppercase: boolean }; header: { layout: 'left' | 'centered' | 'split'; sticky: boolean; ctaLabel: string; ctaUrl: string }; footer: { layout: 'simple' | 'centered' | 'columns'; showSocial: boolean } };
+export const DEFAULT_DESIGN: ThemeDesign;
+export function validDesign(value: unknown): ThemeDesign;
+export function themeCss(design: unknown): string;
+export function themeFontsHref(design: ThemeDesign): string | null;
+export function createThemeRuntime(options: { configuration: ThemeConfiguration; env?: () => Record<string, string | undefined>; fetcher?: typeof fetch }): ReturnType<typeof createWebsiteRuntime> & { patterns(): Promise<ThemePattern[]>; design(): Promise<ThemeDesign>; preview(params: URLSearchParams): Promise<{ entryId: string; document: { title: string; excerpt?: string; blocks: unknown[] }; expiresAt: string; title: string } | null> };
+export function createThemeHandler(options: { configuration: ThemeConfiguration; adminOrigin: string; imported?: () => Promise<unknown>; env?: () => Record<string, string | undefined>; fetcher?: typeof fetch }): (request: Request) => Promise<Response>;
+export type ThemePattern = { id: string; name: string; block: any; slot?: 'header' | 'footer' | 'popup'; popup?: { delaySeconds: number; frequency: 'once' | 'session' | 'always' } };
+export function applyGlobalSections<T>(entry: T, patterns: ThemePattern[]): T;

package/dist/theme.mjs

@@ -5,30 +5,205 @@
  */
 import { createWebsiteRuntime } from './website-runtime.mjs';
 import { createWebsiteRequestHandler, WEBSITE_SECTIONS, WEBSITE_SETTINGS_PATH } from './website-http.mjs';
+import { createSourceManifestProvider } from './vendor/source-manifest-provider.mjs';
+import { publicPublishedEntry } from './publication.mjs';
 
 export const THEME_MODE = 'theme';
 
+const FONTS = new Set(['system', 'Inter', 'Roboto', 'Open Sans', 'Lato', 'Poppins', 'Montserrat', 'Nunito', 'Merriweather', 'Playfair Display', 'Lora', 'Source Serif 4']);
+const SERIF = new Set(['Merriweather', 'Playfair Display', 'Lora', 'Source Serif 4']);
+export const DEFAULT_DESIGN = Object.freeze({
+  colors: { primary: '#4f46e5', primaryText: '#ffffff', background: '#ffffff', surface: '#f8fafc', text: '#0f172a', mutedText: '#475569', border: '#e2e8f0' },
+  typography: { bodyFont: 'system', headingFont: 'system', baseSize: 16, headingWeight: 700 },
+  layout: { containerWidth: 1100, radius: 8, spacing: 'comfortable' },
+  buttons: { style: 'solid', shape: 'rounded', uppercase: false },
+  header: { layout: 'split', sticky: false, ctaLabel: '', ctaUrl: '' },
+  footer: { layout: 'simple', showSocial: true },
+});
+
+/** Accept only the exact token shapes; anything else falls back to defaults. Values end up in CSS. */
+export function validDesign(value) {
+  const hex = item => typeof item === 'string' && /^#[0-9a-fA-F]{6}$/.test(item);
+  const int = (item, min, max) => Number.isInteger(item) && item >= min && item <= max;
+  if (!value || typeof value !== 'object') return DEFAULT_DESIGN;
+  const { colors, typography, layout, buttons } = value;
+  const ok = colors && Object.keys(DEFAULT_DESIGN.colors).every(key => hex(colors[key]))
+    && typography && FONTS.has(typography.bodyFont) && FONTS.has(typography.headingFont) && int(typography.baseSize, 14, 20) && [500, 600, 700, 800].includes(typography.headingWeight)
+    && layout && int(layout.containerWidth, 720, 1440) && int(layout.radius, 0, 24) && ['compact', 'comfortable', 'spacious'].includes(layout.spacing)
+    && buttons && ['solid', 'outline', 'soft'].includes(buttons.style) && ['square', 'rounded', 'pill'].includes(buttons.shape) && typeof buttons.uppercase === 'boolean';
+  if (!ok) return DEFAULT_DESIGN;
+  // Header/footer presets were added later: missing or invalid values use defaults.
+  const link = item => item === '' || typeof item === 'string' && item.length <= 2048 && (/^\/(?!\/)[a-zA-Z0-9/_\-]*$/.test(item) || /^https:\/\/[^\s<>"'`]+$/.test(item));
+  const h = value.header, f = value.footer;
+  const header = h && ['left', 'centered', 'split'].includes(h.layout) && typeof h.sticky === 'boolean' && typeof h.ctaLabel === 'string' && h.ctaLabel.length <= 40 && link(h.ctaUrl) && !h.ctaLabel.trim() === !h.ctaUrl
+    ? { layout: h.layout, sticky: h.sticky, ctaLabel: h.ctaLabel.trim(), ctaUrl: h.ctaUrl } : { ...DEFAULT_DESIGN.header };
+  const footer = f && ['simple', 'centered', 'columns'].includes(f.layout) && typeof f.showSocial === 'boolean' ? { layout: f.layout, showSocial: f.showSocial } : { ...DEFAULT_DESIGN.footer };
+  return { colors: Object.fromEntries(Object.keys(DEFAULT_DESIGN.colors).map(key => [key, colors[key]])), typography: { bodyFont: typography.bodyFont, headingFont: typography.headingFont, baseSize: typography.baseSize, headingWeight: typography.headingWeight },
+    layout: { containerWidth: layout.containerWidth, radius: layout.radius, spacing: layout.spacing }, buttons: { style: buttons.style, shape: buttons.shape, uppercase: buttons.uppercase }, header, footer };
+}
+
+const stack = font => font === 'system' ? 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif' : `"${font}", ${SERIF.has(font) ? 'Georgia, serif' : 'ui-sans-serif, system-ui, sans-serif'}`;
+
+/** Google Fonts stylesheet for the chosen allowlisted fonts, or null for system fonts. */
+export function themeFontsHref(design) {
+  const fonts = [...new Set([design.typography.bodyFont, design.typography.headingFont])].filter(font => font !== 'system');
+  return fonts.length ? `https://fonts.googleapis.com/css2?${fonts.map(font => `family=${encodeURIComponent(font).replace(/%20/g, '+')}:wght@400;500;600;700;800`).join('&')}&display=swap` : null;
+}
+
+/** CSS custom properties and component rules from validated design tokens. */
+export function themeCss(input) {
+  const design = validDesign(input), { colors, typography, layout, buttons } = design;
+  const gap = { compact: 0.75, comfortable: 1, spacious: 1.4 }[layout.spacing];
+  const radius = buttons.shape === 'pill' ? '999px' : buttons.shape === 'square' ? '0' : `${layout.radius}px`;
+  const solid = buttons.style === 'solid', soft = buttons.style === 'soft';
+  return `:root{--cms-primary:${colors.primary};--cms-primary-text:${colors.primaryText};--cms-background:${colors.background};--cms-surface:${colors.surface};--cms-text:${colors.text};--cms-muted:${colors.mutedText};--cms-border:${colors.border};--cms-website-accent:${colors.primary};--cms-font-body:${stack(typography.bodyFont)};--cms-font-heading:${stack(typography.headingFont)};--cms-font-size:${typography.baseSize}px;--cms-heading-weight:${typography.headingWeight};--cms-container:${layout.containerWidth}px;--cms-radius:${layout.radius}px;--cms-gap:${gap}rem;--cms-button-radius:${radius}}
+.cms-website a.cms-button,a.cms-button{background:${solid ? 'var(--cms-primary)' : soft ? 'color-mix(in srgb,var(--cms-primary) 14%,transparent)' : 'transparent'};color:${solid ? 'var(--cms-primary-text)' : 'var(--cms-primary)'};border:2px solid var(--cms-primary);border-radius:var(--cms-button-radius);padding:.7rem 1.3rem;font-weight:600;text-decoration:none;text-transform:${buttons.uppercase ? 'uppercase' : 'none'};letter-spacing:${buttons.uppercase ? '.04em' : 'normal'}}
+.cms-website a.cms-button-secondary,a.cms-button-secondary{background:transparent;color:var(--cms-text);border-color:var(--cms-border)}
+.cms-website a.cms-button-link,a.cms-button-link{background:none;border:0;padding:0;color:var(--cms-primary);text-decoration:underline}`;
+}
+
+function deliveryUrl(configuration, section) {
+  const url = new URL(`/api/v1/delivery/sites/${configuration.siteId}/settings/${section}`, configuration.apiOrigin);
+  url.searchParams.set('environmentId', configuration.environmentId);
+  return url;
+}
+
+/** One saved section validated exactly like published content; anything invalid is dropped. */
+function validPattern(entry) {
+  try {
+    if (!entry || typeof entry.id !== 'string' || !/^[0-9a-f-]{36}$/i.test(entry.id) || entry.block?.type !== 'section') return null;
+    const probe = publicPublishedEntry({ id: '00000000-0000-4000-8000-000000000000', kind: 'page', slug: 'probe', locale: 'en', version: 1, publishedAt: '2026-01-01T00:00:00.000Z', document: { schemaVersion: 1, title: 'probe', excerpt: '', blocks: [entry.block] } });
+    const slot = ['header', 'footer', 'popup'].includes(entry.slot) ? entry.slot : undefined;
+    const popup = slot === 'popup' && entry.popup && Number.isInteger(entry.popup.delaySeconds) && entry.popup.delaySeconds >= 0 && entry.popup.delaySeconds <= 120 && ['once', 'session', 'always'].includes(entry.popup.frequency) ? { delaySeconds: entry.popup.delaySeconds, frequency: entry.popup.frequency } : slot === 'popup' ? { delaySeconds: 5, frequency: 'once' } : undefined;
+    return { id: entry.id, name: String(entry.name ?? '').slice(0, 80), block: probe.document.blocks[0], ...(slot ? { slot } : {}), ...(popup ? { popup } : {}) };
+  } catch { return null; }
+}
+
+/** Linked (global) sections show the saved section's current content. */
+export function applyGlobalSections(entry, patterns) {
+  if (!entry?.document?.blocks || !patterns?.length) return entry;
+  const byId = new Map(patterns.map(pattern => [pattern.id, pattern]));
+  const blocks = entry.document.blocks.map(block => {
+    const linked = block?.type === 'section' && byId.get(block.data?.globalId);
+    return linked ? { ...linked.block, id: block.id, data: { ...linked.block.data, globalId: linked.id } } : block;
+  });
+  return { ...entry, document: { ...entry.document, blocks } };
+}
+
 /** Publication configuration for a theme website: only the home page needs a fixed route. */
 export function themeConfiguration({ apiOrigin, siteId, environmentId, websiteOrigin, locale = 'en' }) {
   return { version: 1, apiOrigin, siteId, environmentId, websiteOrigin, routes: [{ path: '/', kind: 'page', slug: 'home', locale }] };
 }
 
 export function createThemeRuntime({ configuration, env = () => process.env, fetcher = globalThis.fetch }) {
-  return createWebsiteRuntime({ configuration, env, fetcher });
+  const runtime = createWebsiteRuntime({ configuration, env, fetcher });
+  return {
+    ...runtime,
+    /**
+     * Draft for the CMS visual editor. The CMS signs a short-lived preview token
+     * per entry; the API rechecks the editor and this website's key on every read.
+     */
+    async preview(params) {
+      try {
+        const one = name => { const values = params.getAll(name); return values.length === 1 ? values[0] : null; };
+        const entryId = one('entry'), token = one('token');
+        if (one('site') !== configuration.siteId || one('environment') !== configuration.environmentId || !/^[0-9a-f-]{36}$/i.test(entryId ?? '') || !token || token.length > 4000) return null;
+        const values = typeof env === 'function' ? await env() : env, key = values?.CMS_API_KEY;
+        if (typeof key !== 'string') return null;
+        const url = new URL(`/api/v1/delivery/sites/${configuration.siteId}/preview`, configuration.apiOrigin);
+        url.search = new URLSearchParams({ environmentId: configuration.environmentId, entryId, token }).toString();
+        const response = await fetcher(url, { headers: { Authorization: `Bearer ${key}`, Accept: 'application/json' }, redirect: 'error', cache: 'no-store', signal: AbortSignal.timeout(10000) });
+        if (!response.ok) return null;
+        const body = await response.json(), item = body?.data?.item;
+        if (!item || item.id !== entryId || !item.document || !Array.isArray(item.document.blocks) || typeof body.data.expiresAt !== 'string') return null;
+        return { entryId, document: item.document, expiresAt: body.data.expiresAt, title: String(item.document.title ?? '') };
+      } catch { return null; }
+    },
+    /** Saved sections (global sections, header/footer, popups); empty when none or not readable. */
+    async patterns() {
+      try {
+        const values = typeof env === 'function' ? await env() : env, key = values?.CMS_API_KEY;
+        if (typeof key !== 'string') return [];
+        const response = await fetcher(deliveryUrl(configuration, 'patterns'), { headers: { Authorization: `Bearer ${key}`, Accept: 'application/json' }, redirect: 'error', cache: 'no-store', signal: AbortSignal.timeout(5000) });
+        if (!response.ok) return [];
+        const text = await response.text();
+        if (text.length > 2 * 1024 * 1024) return [];
+        const body = JSON.parse(text), entries = body?.data?.section === 'patterns' && Array.isArray(body.data.data?.entries) ? body.data.data.entries : [];
+        return entries.slice(0, 50).map(validPattern).filter(Boolean);
+      } catch { return []; }
+    },
+    /** Saved design tokens, or defaults when none are saved or the key cannot read them. */
+    async design() {
+      try {
+        const values = typeof env === 'function' ? await env() : env, key = values?.CMS_API_KEY;
+        if (typeof key !== 'string' || !/^cms_server\.[0-9a-f-]{36}\.[0-9a-f-]{36}\.[A-Za-z0-9_-]{43}$/.test(key)) return DEFAULT_DESIGN;
+        const response = await fetcher(deliveryUrl(configuration, 'design'), { headers: { Authorization: `Bearer ${key}`, Accept: 'application/json' }, redirect: 'error', cache: 'no-store', signal: AbortSignal.timeout(5000) });
+        if (!response.ok) return DEFAULT_DESIGN;
+        const text = await response.text();
+        if (text.length > 16 * 1024) return DEFAULT_DESIGN;
+        const body = JSON.parse(text);
+        return body?.data?.section === 'design' && body.data.data ? validDesign(body.data.data) : DEFAULT_DESIGN;
+      } catch { return DEFAULT_DESIGN; }
+    },
+  };
 }
 
 /**
  * Serves /api/universalcms/{settings,page,document}, /sitemap.xml and /robots.txt
  * through the shared website handler, and answers the CMS admin connection check.
  */
-export function createThemeHandler({ configuration, adminOrigin, env = () => process.env, fetcher = globalThis.fetch }) {
+/** Pages and menus collected from a previous website, offered once for import into the CMS. */
+function validImport(value, configuration) {
+  if (!value || value.version !== 1 || value.siteId !== configuration.siteId || value.environmentId !== configuration.environmentId || !Array.isArray(value.entries) || value.entries.length > 1000) return null;
+  const link = item => ({ label: String(item?.label ?? '').slice(0, 80), url: String(item?.url ?? '').slice(0, 200) });
+  const navigation = { header: (value.navigation?.header ?? []).slice(0, 20).map(link), footer: (value.navigation?.footer ?? []).slice(0, 20).map(link) };
+  const pages = (Array.isArray(value.pages) ? value.pages : []).slice(0, 100).map(page => ({ path: String(page?.path ?? '').slice(0, 200), title: String(page?.title ?? '').slice(0, 120), description: String(page?.description ?? '').slice(0, 320) }));
+  return { entries: value.entries, discovered: { version: 1, pages, navigation } };
+}
+
+function sourceResponse(provider, request) {
+  let status = 404, headers = { 'Cache-Control': 'no-store' }, body;
+  provider({ method: request.method, url: request.url, headers: Object.fromEntries(request.headers.entries()) }, { writeHead(code, values) { status = code; headers = values; }, end(value) { body = value; } });
+  return new Response(request.method === 'HEAD' || status === 204 ? null : body, { status, headers });
+}
+
+export function createThemeHandler({ configuration, adminOrigin, imported = async () => null, env = () => process.env, fetcher = globalThis.fetch }) {
   const website = createWebsiteRequestHandler({ configuration, env, fetcher });
   const runtime = createThemeRuntime({ configuration, env, fetcher });
   const admin = new URL(adminOrigin).origin;
   if (admin !== adminOrigin) throw new Error('Invalid CMS admin origin');
   const json = (body, status, extra = {}) => new Response(body === null ? null : JSON.stringify(body), { status, headers: { 'Content-Type': 'application/json', 'Cache-Control': 'no-store', 'X-Content-Type-Options': 'nosniff', ...extra } });
+  /** Same-origin form posts are forwarded to the CMS with the website key; the visitor's address keeps rate limits per person. */
+  async function submitForm(request) {
+    if (request.method !== 'POST') return json({ error: 'Method not allowed' }, 405, { Allow: 'POST' });
+    const origin = request.headers.get('origin');
+    if (origin && origin !== configuration.websiteOrigin || request.headers.get('sec-fetch-site') === 'cross-site' || !(request.headers.get('content-type') ?? '').startsWith('application/json')) return json({ error: 'Request not allowed' }, 403);
+    const text = await request.text();
+    if (text.length > 64 * 1024) return json({ error: 'Request too large' }, 413);
+    let body; try { body = JSON.parse(text); } catch { return json({ error: 'Invalid request' }, 400); }
+    if (!body || typeof body !== 'object' || Array.isArray(body)) return json({ error: 'Invalid request' }, 400);
+    const values = typeof env === 'function' ? await env() : env, key = values?.CMS_API_KEY;
+    if (typeof key !== 'string') return json({ error: 'Form unavailable' }, 503);
+    const target = new URL(`/api/v1/delivery/sites/${configuration.siteId}/forms`, configuration.apiOrigin);
+    target.searchParams.set('environmentId', configuration.environmentId);
+    const forwarded = (request.headers.get('x-forwarded-for') ?? '').split(',')[0].trim();
+    const address = /^[0-9a-fA-F:.]{2,45}$/.test(forwarded) ? forwarded : null;
+    try {
+      const upstream = await fetcher(target, { method: 'POST', headers: { Authorization: `Bearer ${key}`, 'Content-Type': 'application/json', ...(address ? { 'X-CMS-Client-IP': address } : {}) }, body: JSON.stringify(body), redirect: 'error', signal: AbortSignal.timeout(10000) });
+      const reply = await upstream.text();
+      return new Response(reply.length <= 16 * 1024 ? reply : '{}', { status: upstream.status, headers: { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' } });
+    } catch { return json({ error: 'Form unavailable' }, 503); }
+  }
+  const migration = async () => { try { return validImport(await imported(), configuration); } catch { return null; } };
   return async function handle(request) {
     const url = new URL(request.url);
+    if (url.pathname === '/api/cms-source') {
+      // Open only while an import from the previous website is waiting; same rules as connected sites.
+      const pending = await migration();
+      if (!pending) return json({ version: 1, siteId: configuration.siteId, environmentId: configuration.environmentId, sourceExport: 'closed' }, 410, { 'Access-Control-Allow-Origin': admin, Vary: 'Origin' });
+      const provider = createSourceManifestProvider({ manifestJson: JSON.stringify({ version: 1, entries: pending.entries }), sourceOrigin: configuration.websiteOrigin, adminOrigin: admin, siteId: configuration.siteId, environmentId: configuration.environmentId, publicContent: true });
+      return sourceResponse(provider, request);
+    }
     if (url.pathname === WEBSITE_SETTINGS_PATH && url.searchParams.get('check') === 'connection') {
       const origin = request.headers.get('origin');
       if (origin !== admin || request.headers.has('authorization') || request.headers.has('cookie')) return json({ error: 'Request not allowed' }, 403);
@@ -41,10 +216,22 @@ export function createThemeHandler({ configuration, adminOrigin, env = () => pro
         return json({ error: 'Website scope mismatch', ...(sameSite ? { siteId: configuration.siteId, environmentId: configuration.environmentId } : {}) }, 409, cors);
       }
       const snapshot = await runtime.settings();
-      return json({ version: 1, mode: THEME_MODE, siteId: configuration.siteId, environmentId: configuration.environmentId, renderedVerified: false,
+      const pending = await migration();
+      return json({ version: 1, mode: THEME_MODE, siteId: configuration.siteId, environmentId: configuration.environmentId, renderedVerified: false, ...(pending ? { discovered: pending.discovered, migration: true } : {}),
         settings: Object.fromEntries(WEBSITE_SECTIONS.map(section => [section, { installed: true, state: snapshot.sections[section]?.state ?? 'unavailable', version: snapshot.sections[section]?.version ?? 0 }])) }, 200, cors);
     }
+    if (url.pathname === '/api/universalcms/form') return submitForm(request);
     const result = await website(request);
+    if (result instanceof Response && url.pathname === '/api/universalcms/page' && result.status === 200) {
+      // Live page refreshes must show linked sections the same way as the first render.
+      try {
+        const body = await result.clone().json();
+        if (body?.state === 'published' && body.entry) {
+          const patterns = await runtime.patterns();
+          if (patterns.length) return new Response(JSON.stringify({ ...body, entry: applyGlobalSections(body.entry, patterns) }), { status: 200, headers: result.headers });
+        }
+      } catch { /* Fall back to the original response. */ }
+    }
     return result instanceof Response ? result : json({ error: 'Not found' }, 404);
   };
 }

package/dist/vendor/react-document.mjs

@@ -4,10 +4,19 @@ import { CmsForm } from './react-form.mjs';
 import { embedUrl, integer, record, safeSrcSet, safeUrl, text } from './react-safety.mjs';
 export { CmsForm } from './react-form.mjs';
 const supported = new Set(['paragraph', 'heading', 'quote', 'list', 'code', 'image', 'gallery', 'button', 'divider', 'spacer', 'faq', 'table', 'embed', 'form', 'section', 'columns']);
-const styles = { align: ['left', 'center', 'right'], size: ['small', 'normal', 'large'], tone: ['default', 'muted', 'accent', 'inverse'], spaceAbove: ['none', 'small', 'medium', 'large'], spaceBelow: ['none', 'small', 'medium', 'large'], hideOnMobile: [true], hideOnDesktop: [true] };
+const styles = { align: ['left', 'center', 'right'], size: ['small', 'normal', 'large'], tone: ['default', 'muted', 'accent', 'inverse'], spaceAbove: ['none', 'small', 'medium', 'large'], spaceBelow: ['none', 'small', 'medium', 'large'], hideOnMobile: [true], hideOnDesktop: [true], padding: ['none', 'small', 'medium', 'large'], radius: ['none', 'small', 'medium', 'large', 'pill'], border: [true], weight: ['normal', 'medium', 'bold'], maxWidth: ['narrow', 'normal', 'full'], animation: ['fade-up', 'fade-in', 'zoom-in', 'slide-left'] };
+/** Validated colors become CSS variables on the block wrapper; nothing else reaches inline style. */
+function blockColors(block) {
+    const style = record(block.style), hex = (value) => typeof value === 'string' && /^#[0-9a-fA-F]{6}$/.test(value) ? value : undefined;
+    const color = hex(style.textColor), background = hex(style.background);
+    if (!color && !background)
+        return undefined;
+    return { ...(color ? { '--cms-block-color': color, color } : {}), ...(background ? { '--cms-block-background': background, background } : {}) };
+}
 function blockClasses(block) {
     const style = record(block.style);
-    return ['cms-block', `cms-block-${text(block.type)}`, ...Object.entries(styles).flatMap(([key, allowed]) => allowed.includes(style[key]) ? [`cms-${key}-${String(style[key])}`] : [])].join(' ');
+    const mobile = record(style.mobile), phone = ['align', 'size', 'padding', 'spaceAbove', 'spaceBelow'];
+    return ['cms-block', `cms-block-${text(block.type)}`, ...Object.entries(styles).flatMap(([key, allowed]) => allowed.includes(style[key]) ? [`cms-${key}-${String(style[key])}`] : []), ...phone.flatMap(key => styles[key].includes(mobile[key]) ? [`cms-m-${key}-${String(mobile[key])}`] : [])].join(' ');
 }
 function image(data, key) {
     const src = safeUrl(data.url, false);
@@ -118,7 +127,7 @@ export function CmsDocument({ document, components = {}, entryId, revisionId, va
                 }
             }
         const anchor = text(record(block.style).anchor);
-        return _jsx("div", { id: /^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(anchor) ? anchor : undefined, className: `${blockClasses(block)}${preview && id === selectedId ? ' cms-selected' : ''}`, ...(preview ? { 'data-cms-block': id, 'data-cms-type': type } : {}), children: node }, id || index);
+        return _jsx("div", { id: /^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(anchor) ? anchor : undefined, className: `${blockClasses(block)}${preview && id === selectedId ? ' cms-selected' : ''}`, style: blockColors(block), ...(preview ? { 'data-cms-block': id, 'data-cms-type': type } : {}), children: node }, id || index);
     }
     return _jsx("div", { className: ['cms-document', className].filter(Boolean).join(' '), children: renderMany(document.blocks, 'root') });
 }

package/dist/vendor/react-preview-protocol.mjs

@@ -0,0 +1,45 @@
+import { record, text } from './react-safety.mjs';
+export function previewOrigin(value) {
+    const url = new URL(value);
+    const local = ['localhost', '127.0.0.1', '[::1]'].includes(url.hostname);
+    if (url.username || url.password || url.search || url.hash || url.pathname !== '/' || (url.protocol !== 'https:' && !(url.protocol === 'http:' && local)))
+        throw new Error('Invalid CMS admin origin');
+    return url.origin;
+}
+/** Bounds messages before rendering; full content validation remains at the CMS write boundary. */
+function isDocument(value) {
+    const doc = record(value);
+    if (doc.schemaVersion !== 1 || typeof doc.title !== 'string' || doc.title.length > 200 || typeof doc.excerpt !== 'string' || doc.excerpt.length > 1000 || !Array.isArray(doc.blocks) || doc.blocks.length > 200)
+        return false;
+    const seen = new Set();
+    function blocks(values, depth) {
+        if (!Array.isArray(values) || values.length > 400 || depth > 2)
+            return false;
+        for (const value of values) {
+            const block = record(value), data = record(block.data);
+            if (!text(block.id) || seen.has(String(block.id)) || seen.size >= 400 || typeof block.type !== 'string' || block.version !== 1 || typeof block.text !== 'string' || block.text.length > 30000)
+                return false;
+            seen.add(String(block.id));
+            if (block.type === 'section' && (depth !== 0 || !blocks(data.blocks, depth + 1)))
+                return false;
+            if (block.type === 'columns' && (depth > 1 || !Array.isArray(data.columns) || data.columns.length > 4 || !data.columns.every(column => blocks(column, depth + 1))))
+                return false;
+        }
+        return true;
+    }
+    return blocks(doc.blocks, 0);
+}
+export function readPreviewMessage(event, expected) {
+    if (event.origin !== expected.origin || event.source !== expected.parent)
+        return null;
+    const data = record(event.data);
+    if (data.source !== 'universal-cms' || data.entryId !== expected.entryId)
+        return null;
+    if (data.type === 'ping')
+        return { type: 'ping', entryId: expected.entryId };
+    if (data.type === 'select' && (data.id === null || (typeof data.id === 'string' && data.id.length <= 100)))
+        return { type: 'select', entryId: expected.entryId, id: data.id };
+    if (data.type === 'document' && isDocument(data.document))
+        return { type: 'document', entryId: expected.entryId, document: data.document };
+    return null;
+}

package/dist/website-schema.mjs

@@ -745,8 +745,8 @@ var require_util = __commonJS({
     function uint8ArrayToBase64url(bytes) {
       return uint8ArrayToBase64(bytes).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
     }
-    function hexToUint8Array(hex) {
-      const cleanHex = hex.replace(/^0x/, "");
+    function hexToUint8Array(hex2) {
+      const cleanHex = hex2.replace(/^0x/, "");
       if (cleanHex.length % 2 !== 0) {
         throw new Error("Invalid hex string length");
       }
@@ -19108,7 +19108,7 @@ var require_schemas2 = __commonJS({
     exports.jwt = jwt;
     exports.stringFormat = stringFormat;
     exports.hostname = hostname;
-    exports.hex = hex;
+    exports.hex = hex2;
     exports.hash = hash;
     exports.number = number;
     exports.int = int;
@@ -19694,7 +19694,7 @@ var require_schemas2 = __commonJS({
     function hostname(_params) {
       return core._stringFormat(exports.ZodCustomStringFormat, "hostname", core.regexes.hostname, _params);
     }
-    function hex(_params) {
+    function hex2(_params) {
       return core._stringFormat(exports.ZodCustomStringFormat, "hex", core.regexes.hex, _params);
     }
     function hash(alg, params) {
@@ -21929,7 +21929,11 @@ var link = import_zod.z.object({ label: import_zod.z.string().trim().min(1).max(
 var links = import_zod.z.array(link).max(40);
 var headerLink = link.extend({ url: link.shape.url.optional(), children: import_zod.z.array(link).max(20).optional() }).refine((value) => value.url !== void 0 || (value.children?.length ?? 0) > 0, { message: "Header links without dropdown children need a URL", path: ["url"] });
 var footerGroup = import_zod.z.object({ title: import_zod.z.string().trim().min(1).max(80), links: import_zod.z.array(link).max(20) });
+var designFonts = ["system", "Inter", "Roboto", "Open Sans", "Lato", "Poppins", "Montserrat", "Nunito", "Merriweather", "Playfair Display", "Lora", "Source Serif 4"];
+var hex = import_zod.z.string().regex(/^#[0-9a-fA-F]{6}$/);
+var designColors = import_zod.z.object({ primary: hex, primaryText: hex, background: hex, surface: hex, text: hex, mutedText: hex, border: hex });
 var configurationSchemas = {
+  design: import_zod.z.object({ colors: designColors, typography: import_zod.z.object({ bodyFont: import_zod.z.enum(designFonts), headingFont: import_zod.z.enum(designFonts), baseSize: import_zod.z.number().int().min(14).max(20), headingWeight: import_zod.z.union([import_zod.z.literal(500), import_zod.z.literal(600), import_zod.z.literal(700), import_zod.z.literal(800)]) }), layout: import_zod.z.object({ containerWidth: import_zod.z.number().int().min(720).max(1440), radius: import_zod.z.number().int().min(0).max(24), spacing: import_zod.z.enum(["compact", "comfortable", "spacious"]) }), buttons: import_zod.z.object({ style: import_zod.z.enum(["solid", "outline", "soft"]), shape: import_zod.z.enum(["square", "rounded", "pill"]), uppercase: import_zod.z.boolean() }), header: import_zod.z.object({ layout: import_zod.z.enum(["left", "centered", "split"]), sticky: import_zod.z.boolean(), ctaLabel: import_zod.z.string().max(40), ctaUrl: import_zod.z.string().max(2048) }).optional(), footer: import_zod.z.object({ layout: import_zod.z.enum(["simple", "centered", "columns"]), showSocial: import_zod.z.boolean() }).optional() }),
   branding: import_zod.z.object({ description: import_zod.z.string().max(2e3), logoUrl: url, faviconUrl: url, logoAlt: text, accentColor: import_zod.z.string().regex(/^#[0-9a-fA-F]{6}$/) }),
   social: import_zod.z.object({ profiles: import_zod.z.array(socialProfile).max(20), alignment: import_zod.z.enum(["left", "center", "right"]).optional() }),
   seo: import_zod.z.object({
@@ -21992,6 +21996,15 @@ var styleSchema = import_zod2.z.object({
   spaceBelow: import_zod2.z.enum(["none", "small", "medium", "large"]).optional(),
   hideOnMobile: import_zod2.z.boolean().optional(),
   hideOnDesktop: import_zod2.z.boolean().optional(),
+  textColor: import_zod2.z.string().regex(/^#[0-9a-fA-F]{6}$/).optional(),
+  background: import_zod2.z.string().regex(/^#[0-9a-fA-F]{6}$/).optional(),
+  padding: import_zod2.z.enum(["none", "small", "medium", "large"]).optional(),
+  radius: import_zod2.z.enum(["none", "small", "medium", "large", "pill"]).optional(),
+  border: import_zod2.z.boolean().optional(),
+  weight: import_zod2.z.enum(["normal", "medium", "bold"]).optional(),
+  maxWidth: import_zod2.z.enum(["narrow", "normal", "full"]).optional(),
+  mobile: import_zod2.z.object({ align: import_zod2.z.enum(["left", "center", "right"]).optional(), size: import_zod2.z.enum(["small", "normal", "large"]).optional(), padding: import_zod2.z.enum(["none", "small", "medium", "large"]).optional(), spaceAbove: import_zod2.z.enum(["none", "small", "medium", "large"]).optional(), spaceBelow: import_zod2.z.enum(["none", "small", "medium", "large"]).optional() }).strict().optional(),
+  animation: import_zod2.z.enum(["fade-up", "fade-in", "zoom-in", "slide-left"]).optional(),
   anchor: import_zod2.z.string().regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/).max(80).optional()
 });
 var id = import_zod2.z.string().uuid();
@@ -22056,6 +22069,8 @@ var sectionSchema = block("section", import_zod2.z.object({
   background: import_zod2.z.enum(["none", "muted", "accent", "dark"]).default("none"),
   padding: import_zod2.z.enum(["none", "small", "medium", "large"]).default("medium"),
   width: import_zod2.z.enum(["normal", "wide", "full"]).default("normal"),
+  /** Linked to a saved site section: websites show that section's current content. */
+  globalId: import_zod2.z.string().uuid().optional(),
   blocks: import_zod2.z.array(import_zod2.z.union([leafSchema, columnsSchema])).max(100)
 }));
 var blockSchema = import_zod2.z.union([leafSchema, columnsSchema, sectionSchema]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universalcms/connect",
-  "version": "0.13.3",
+  "version": "0.18.0",
   "description": "Deterministic framework-aware Universal CMS setup for reviewed native websites",
   "type": "module",
   "bin": {
@@ -32,7 +32,9 @@
     "./website.css": "./dist/website.css",
     "./public-bindings": "./dist/public-bindings.mjs",
     "./settings-only": "./dist/settings-only.mjs",
-    "./theme": "./dist/theme.mjs"
+    "./theme": "./dist/theme.mjs",
+    "./theme-preview": "./dist/theme-preview.mjs",
+    "./theme-client": "./dist/theme-client.mjs"
   },
   "files": [
     "dist",