@websline/cms-view-utils 1.10.2 → 1.15.0

package/dist/previewBridge.global.js

@@ -1 +1 @@
-(()=>{var r={BLOCK_ADD:"BLOCK_ADD",BLOCK_COMMENT:"BLOCK_COMMENT",BLOCK_DELETE:"BLOCK_DELETE",BLOCK_EDIT:"BLOCK_EDIT",BLOCK_POSITION:"BLOCK_POSITION",BLOCK_SHOW:"BLOCK_SHOW",BLOCK_HIDE:"BLOCK_HIDE",PATH_CHANGED:"PATH_CHANGED",PATH_ON_LOAD:"PATH_ON_LOAD",IFRAME_DOM_LOADED:"IFRAME_DOM_LOADED",COMMENT_COUNTS:"COMMENT_COUNTS",CURRENT_BLOCK_EDIT:"CURRENT_BLOCK_EDIT",SCROLL_TO_BLOCK:"SCROLL_TO_BLOCK"},_=(i,O={})=>{i&&window.parent!==window&&window.parent.postMessage({type:i,payload:O},"*")};(function(){if(window.parent===window||window.__PREVIEW_BRIDGE_INITIALIZED__)return;window.__PREVIEW_BRIDGE_INITIALIZED__=!0;let i=t=>t.metaKey||t.ctrlKey||t.shiftKey,O=t=>{let n=t.target.closest("a[href]");if(!n||n.target==="_blank"||i(t))return;let o=new URL(n.href,window.location.origin);o.origin===window.location.origin&&(t.preventDefault(),t.stopPropagation(),_(r.PATH_CHANGED,{path:o.pathname}))};document.addEventListener("click",O,!0),_(r.PATH_ON_LOAD,{path:window.location.pathname}),window.addEventListener("load",()=>{_(r.IFRAME_DOM_LOADED)});let L=t=>{let n=`[data-cms-block-id="${t}"]`,o=0,e=10,a=setInterval(()=>{let E=document.querySelector(n);E&&(E.scrollIntoView({behavior:"smooth",block:"start"}),clearInterval(a)),++o>=e&&clearInterval(a)},100)};window.addEventListener("message",t=>{let{type:n,payload:o}=t.data||{};if(n&&n===r.SCROLL_TO_BLOCK){let{draftBlockUuid:e}=o||{};if(!e)return;L(e)}})})();})();
+(()=>{var _={BLOCK_ADD:"BLOCK_ADD",BLOCK_COMMENT:"BLOCK_COMMENT",BLOCK_DELETE:"BLOCK_DELETE",BLOCK_EDIT:"BLOCK_EDIT",BLOCK_POSITION:"BLOCK_POSITION",BLOCK_SHOW:"BLOCK_SHOW",BLOCK_HIDE:"BLOCK_HIDE",PATH_CHANGED:"PATH_CHANGED",PATH_ON_LOAD:"PATH_ON_LOAD",IFRAME_DOM_LOADED:"IFRAME_DOM_LOADED",COMMENT_COUNTS:"COMMENT_COUNTS",CONTENT_READY:"CONTENT_READY",CONTENT_CHANGED:"CONTENT_CHANGED",CONTENT_PREVIEW:"CONTENT_PREVIEW",CONTENT_APPLIED:"CONTENT_APPLIED",CONTENT_FAILED:"CONTENT_FAILED",CURRENT_BLOCK_EDIT:"CURRENT_BLOCK_EDIT",SCROLL_TO_BLOCK:"SCROLL_TO_BLOCK"},r=(o,i={})=>{o&&window.parent!==window&&window.parent.postMessage({type:o,payload:i},"*")};(function(){if(window.parent===window||window.__PREVIEW_BRIDGE_INITIALIZED__)return;window.__PREVIEW_BRIDGE_INITIALIZED__=!0;let o=t=>t.metaKey||t.ctrlKey||t.shiftKey,i=t=>{let n=t.target.closest("a[href]");if(!n||n.target==="_blank"||o(t))return;let E=new URL(n.href,window.location.origin);E.origin===window.location.origin&&(t.preventDefault(),t.stopPropagation(),r(_.PATH_CHANGED,{path:E.pathname}))};document.addEventListener("click",i,!0),r(_.PATH_ON_LOAD,{path:window.location.pathname}),window.addEventListener("load",()=>{r(_.IFRAME_DOM_LOADED)});let C=t=>{let n=`[data-cms-block-id="${t}"]`,E=0,O=10,e=setInterval(()=>{let T=document.querySelector(n);T&&(T.scrollIntoView({behavior:"smooth",block:"start"}),clearInterval(e)),++E>=O&&clearInterval(e)},100)};window.addEventListener("message",t=>{let{type:n,payload:E}=t.data||{};if(n&&n===_.SCROLL_TO_BLOCK){let{draftBlockUuid:O}=E||{};if(!O)return;C(O)}})})();})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/cms-view-utils",
-  "version": "1.10.2",
+  "version": "1.15.0",
   "type": "module",
   "files": [
     "src",
@@ -18,21 +18,22 @@
     "./dist/*": "./dist/*"
   },
   "dependencies": {
+    "altcha-lib": "2.6.0",
     "jsonwebtoken": "^9.0.3",
     "tailwind-merge": "^3.7.0"
   },
   "devDependencies": {
     "@eslint/compat": "^2.1.1",
     "@eslint/js": "^10.0.1",
-    "eslint": "^10.11.0",
+    "eslint": "^10.12.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.23.0",
-    "globals": "^17.12.0",
-    "prettier": "^3.9.8",
+    "globals": "^17.13.0",
+    "prettier": "^3.9.9",
     "prettier-plugin-svelte": "^4.1.1",
     "prettier-plugin-tailwindcss": "^0.8.1",
     "tsup": "^8.5.1",
-    "vitest": "^5.0.1"
+    "vitest": "^5.0.3"
   },
   "peerDependencies": {
     "astro": ">=5",

package/src/ads/createAdRunner.js

@@ -108,6 +108,7 @@ const createAdRunner = ({
 	const occupied = new Map();
 	const teardowns = [];
 	const counted = new Set();
+	const sent = new Set();
 	const shown = [];
 
 	/**
@@ -218,11 +219,24 @@ const createAdRunner = ({
 			if (!ad.persistent) release(ad);
 		},
 
+		/**
+		 * The ad's form was sent: its click, suppressed like one, but it stays on
+		 * screen with the thanks until the visitor closes it.
+		 */
+		sent(ad) {
+			if (!ad || sent.has(ad.uuid)) return;
+
+			sent.add(ad.uuid);
+			track(ad.uuid, "click");
+			dismissals.record(ad.uuid, Date.now());
+		},
+
 		/** An ad that is not closable has no close button, so nothing to dismiss. */
 		dismiss(ad) {
 			if (!ad || ad.closable === false) return;
 
-			track(ad.uuid, "close");
+			// Closing the thanks of a sent form turns nothing down.
+			if (!sent.has(ad.uuid)) track(ad.uuid, "close");
 			release(ad);
 		},
 

package/src/blocks/registry.js

@@ -0,0 +1,34 @@
+/**
+ * Props for one block, or null for an unknown block type. Blocks without data are
+ * normalized here so every mapper in a site's registry can read `data`
+ * unconditionally.
+ */
+const resolveBlockProps = (registry, block, context = {}) => {
+	const entry = registry?.[block?.identifier];
+
+	if (!entry) return null;
+
+	return entry.props({ ...block, data: block?.data ?? {} }, context);
+};
+
+/**
+ * A registry entry declares `hydrate` to say the block has to run client-side on the
+ * live site. Astro resolves a client directive at build time and needs its component
+ * by name, so the directive itself can only live in the site's live renderer — a
+ * component read from a registry cannot carry one.
+ *
+ * Call this where the by-name lines end: reaching it means the block declared
+ * hydration that nobody wired, which would render server-only and lose its client
+ * behaviour without a single error. Loud while developing, silent in production.
+ */
+const assertHydrationWired = (block, entry) => {
+	if (!import.meta.env.DEV) return;
+	if (!entry?.hydrate) return;
+
+	throw new Error(
+		`Block "${block?.identifier}" declares hydrate: "${entry.hydrate}" but has no line ` +
+			"in the site's live renderer, so it would render server-only.",
+	);
+};
+
+export { assertHydrationWired, resolveBlockProps };

package/src/client/fetchFormChallenge.js

@@ -0,0 +1,21 @@
+/**
+ * Fetch a fresh ALTCHA spam challenge for one form; needed while the form's `spam.captcha` is `true`.
+ *
+ * @param {object} options
+ * @param {string} options.uuid - UUID of the form.
+ * @returns {Promise<object>} The challenge, to solve and send as `altcha` with the submit. It expires after ten minutes, names its form and stores one entry only.
+ */
+const fetchFormChallenge = async ({ uuid }) => {
+	const response = await fetch(`/api/cms/api/public/forms/${uuid}/challenge`, {
+		method: "GET",
+		cache: "no-store",
+	});
+
+	if (!response.ok) {
+		throw new Error(`Challenge failed with ${response.status}`);
+	}
+
+	return response.json();
+};
+
+export { fetchFormChallenge };

package/src/client/submitForm.js

@@ -0,0 +1,32 @@
+/**
+ * Submit a form's values; the CMS checks them against the live form and stores the entry.
+ *
+ * @param {object} options
+ * @param {string} options.uuid - UUID of the form.
+ * @param {string} options.locale - Language the visitor filled the form in; decides the texts of the answer and of the confirmation mail.
+ * @param {Record<string, unknown>} options.values - Keyed by field `name`: text, textarea, email, phone, select → string; checkbox → array of option values, or boolean without options; date → `YYYY-MM-DD`; daterange → `{ from, to }`; persons → `{ adults, children: [age] }`; room, package → the option `value`.
+ * @param {string} [options.honeypot] - Content of the hidden honeypot input; empty for a real visitor.
+ * @param {boolean} [options.consent] - `true` once the guest agreed to the privacy policy; required while the form has `consent`.
+ * @param {{ challenge: object, solution: object }} [options.altcha] - A solved challenge from `fetchFormChallenge`; required while the form's `spam.captcha` is `true`. Missing, wrong, expired or already used, the answer is `422` with the error field `altcha`.
+ * @param {{ path?: string, adUuid?: string }} [options.source] - Where the form was sent from: the page path without leading slash and language segment, and the ad that opened the form.
+ * @returns {Promise<{ status: number, data: object }>} `201` with `{ mode: "redirect", url }` or `{ mode: "message", message }`; `422` with `errors: [{ field, code }]`; `429` once the visitor sent too many; `404` for a form that is gone or inactive.
+ */
+const submitForm = async ({
+	uuid,
+	locale,
+	values,
+	honeypot,
+	consent,
+	altcha,
+	source,
+}) => {
+	const response = await fetch(`/api/cms/api/public/forms/${uuid}/submissions`, {
+		method: "POST",
+		headers: { "content-type": "application/json" },
+		body: JSON.stringify({ locale, values, honeypot, consent, altcha, source }),
+	});
+
+	return { status: response.status, data: await response.json().catch(() => ({})) };
+};
+
+export { submitForm };

package/src/cms/fetchPage.js

@@ -19,7 +19,11 @@ const fetchPage = async (context) => {
 	const draftUuid = resolveDraftUuidFromToken(editorToken);
 	const isCMSEditRoute = editorToken && draftUuid;
 
-	const cmsUrl = buildCmsPageUrl({ draftUuid, path });
+	const cmsUrl = buildCmsPageUrl({
+		draftUuid,
+		path,
+		searchParams: url.searchParams,
+	});
 
 	const response = await fetch(cmsUrl, {
 		method: "GET",
@@ -56,6 +60,8 @@ const fetchPage = async (context) => {
 	}
 	if (isCMSEditRoute) {
 		context.locals._edit = true;
+		// The editor's client-side renderer reloads the draft through the CMS proxy.
+		context.locals._draftUuid = draftUuid;
 	}
 };
 

package/src/cms/proxyToCms.js

@@ -4,6 +4,30 @@ import { HttpError } from "../shared/errors.js";
 /** The events endpoint answers this, and a Response with a body on it throws. */
 const NO_CONTENT = 204;
 
+/**
+ * The visitor's IP, behind nginx or behind CloudFront. nginx always overwrites
+ * `X-Real-IP`, so it wins; CloudFront names the viewer as `ip:port` and must not
+ * pass a viewer-sent `X-Real-IP` through.
+ */
+const visitorIpOf = (headers) => {
+	const realIp = headers.get("x-real-ip");
+	if (realIp) return realIp;
+
+	const viewer = headers.get("cloudfront-viewer-address") ?? "";
+	const portAt = viewer.lastIndexOf(":");
+
+	return portAt > 0 ? viewer.slice(0, portAt) : viewer;
+};
+
+/**
+ * A path the allowlist can judge as it will be requested. `fetch` turns `\` into
+ * `/` and resolves dot segments, so `forms/..\..\x/submissions` would match the
+ * list and still reach another route.
+ */
+const isPlainPath = (path) =>
+	!/[\\%]/.test(path) &&
+	!path.split("/").some((segment) => segment === "." || segment === "..");
+
 const proxyToCms = async (context, { allow } = {}) => {
 	const cmsBase = import.meta.env.CMS_URL;
 
@@ -17,7 +41,7 @@ const proxyToCms = async (context, { allow } = {}) => {
 	// A write forwards the site's CMS token, and that token may carry scopes far
 	// beyond page delivery. Writes therefore reach only the paths named by the
 	// route that opened them, and everything else looks like it is not there.
-	if (allow && !allow(path)) {
+	if (allow && (!isPlainPath(path) || !allow(path))) {
 		throw new HttpError(404, "Not Found");
 	}
 	const url = new URL(request.url);
@@ -33,12 +57,17 @@ const proxyToCms = async (context, { allow } = {}) => {
 			? {
 					...buildCmsHeaders(request),
 					"content-type": request.headers.get("content-type") ?? "application/json",
+					"cms-visitor-ip": visitorIpOf(request.headers),
 				}
 			: buildCmsHeaders(request),
 		...(hasBody ? { body: await request.text() } : {}),
 	});
 
-	if (!response.ok) {
+	// A rejected write answers the visitor directly — a form shows the field errors
+	// of a 422 — so its body has to reach the browser.
+	const isRejectedWrite = hasBody && response.status >= 400 && response.status < 500;
+
+	if (!response.ok && !isRejectedWrite) {
 		throw new HttpError(response.status, "CMS Error");
 	}
 
@@ -47,11 +76,15 @@ const proxyToCms = async (context, { allow } = {}) => {
 	}
 
 	const data = await response.text();
+	// nginx caches every GET for minutes unless told not to; a spam challenge,
+	// for one, must reach each visitor fresh.
+	const noStore = /no-store/i.test(response.headers.get("cache-control") ?? "");
 
 	return new Response(data, {
 		status: response.status,
 		headers: {
 			"content-type": response.headers.get("content-type") ?? "application/json",
+			...(noStore ? { "cache-control": "no-store" } : {}),
 		},
 	});
 };

package/src/cms/urlResolver.js

@@ -1,13 +1,26 @@
 const CMS_BASE_URL = import.meta.env.CMS_URL;
 
-const buildCmsPageUrl = ({ draftUuid, path }) => {
+// The editor's own parameters say nothing about the page.
+const EDITOR_PARAMS = ["editorToken", "cmsLocale"];
+
+/**
+ * The page's own query string goes along, so forms on the page come pre-filled
+ * from the link, e.g. the quick bar's `?arrival=…&departure=…`.
+ *
+ * @param {{ draftUuid?: string, path: string, searchParams?: URLSearchParams }} options
+ */
+const buildCmsPageUrl = ({ draftUuid, path, searchParams }) => {
+	const query = new URLSearchParams(searchParams);
+	EDITOR_PARAMS.forEach((name) => query.delete(name));
+	const search = query.size ? `?${query}` : "";
+
 	if (draftUuid) {
-		return `${CMS_BASE_URL}/api/public/pages/preview/${draftUuid}`;
+		return `${CMS_BASE_URL}/api/public/pages/preview/${draftUuid}${search}`;
 	}
 
 	const normalizedPath = path.startsWith("/") ? path : `/${path}`;
 
-	return `${CMS_BASE_URL}/api/public/pages${normalizedPath}`;
+	return `${CMS_BASE_URL}/api/public/pages${normalizedPath}${search}`;
 };
 
 const buildCmsAdsUrl = ({ locale, path }) => {

package/src/components/BlockEditList.svelte

@@ -0,0 +1,50 @@
+<script>
+	import AddBlockPlaceholder from "./AddBlockPlaceholder.svelte";
+	import BlockEditSlot from "./BlockEditSlot.svelte";
+	import { createEditorContent } from "../editor/editorContent.svelte.js";
+	import { resolveBlockProps } from "../blocks/registry.js";
+
+	let {
+		autoTranslate = false,
+		cmsLocale = "de",
+		content = [],
+		draftUuid,
+		locale = "de",
+		placeholderClass = "",
+		registry = {},
+		spacingValues,
+	} = $props();
+
+	// Server-rendered on first paint, then this island owns the list: the CMS signals
+	// a change, the store reloads the blocks, and only what actually differs is
+	// re-rendered. No page reload, no block swapped as HTML.
+	//
+	// Seeding from the props once is the point — Astro hands them over at hydration and
+	// never changes them again.
+	// svelte-ignore state_referenced_locally
+	const editorContent = createEditorContent(content, { draftUuid });
+
+	let blocks = $derived(editorContent.blocks);
+</script>
+
+{#each blocks as block, position (block.uuid)}
+	{@const entry = registry[block.identifier]}
+
+	<BlockEditSlot
+		{autoTranslate}
+		{block}
+		component={entry?.component}
+		locale={cmsLocale}
+		{position}
+		props={resolveBlockProps(registry, block, { locale })}
+		schema={entry?.schema}
+		{spacingValues} />
+{/each}
+
+<div class={`mt-10 flex w-full items-center justify-center px-4 ${placeholderClass}`}>
+	<AddBlockPlaceholder
+		disabled={autoTranslate}
+		class="w-full"
+		countBlockItems={blocks.length}
+		locale={cmsLocale} />
+</div>

package/src/components/BlockEditSlot.svelte

@@ -0,0 +1,47 @@
+<script>
+	import BlockWrapper from "./BlockWrapper.svelte";
+	import EditableBlock from "./EditableBlock.svelte";
+	import { isValid } from "../editor/blockValidation.js";
+
+	let {
+		autoTranslate = false,
+		block,
+		component: Component,
+		locale = "de",
+		position,
+		props,
+		schema,
+		spacingValues,
+	} = $props();
+
+	// A block without a schema cannot be checked — child-block types have none. A type the
+	// site does not know is marked invalid, so the author sees it without its data.
+	let isValidBlock = $derived(
+		Component ? (schema ? isValid(schema, block) : true) : false,
+	);
+
+	const labels = {
+		de: { failed: "Block konnte nicht dargestellt werden" },
+		en: { failed: "Block could not be rendered" },
+	};
+
+	let t = $derived(labels[locale] ?? labels.de);
+</script>
+
+<BlockWrapper {block} {spacingValues}>
+	<EditableBlock {autoTranslate} {block} {isValidBlock} {locale} {position}>
+		{#if Component}
+			<!-- The editor re-renders on every change, so one throwing block must not take
+			     the rest of the list with it. -->
+			<svelte:boundary onerror={(error) => console.error(block?.identifier, error)}>
+				<Component {...props ?? {}} />
+
+				{#snippet failed(error)}
+					<div class="mx-auto flex max-w-300 justify-center text-[#ff8b8b]">
+						{t.failed}: {error?.message ?? error}
+					</div>
+				{/snippet}
+			</svelte:boundary>
+		{/if}
+	</EditableBlock>
+</BlockWrapper>

package/src/components/BlockSlot.astro

@@ -0,0 +1,17 @@
+---
+import BlockWrapper from "./BlockWrapper.svelte";
+import { isValid } from "../editor/blockValidation.js";
+
+const { block, schema, spacingValues } = Astro.props;
+
+// A block without a schema cannot be checked — child-block types have none.
+const isValidBlock = schema ? isValid(schema, block) : true;
+---
+
+{
+	isValidBlock && (
+		<BlockWrapper {block} {spacingValues}>
+			<slot />
+		</BlockWrapper>
+	)
+}

package/src/components/Picture.svelte

@@ -16,7 +16,9 @@
 	const buildSrcset = (source) =>
 		source.url2x ? `${source.url} 1x, ${source.url2x} 2x` : source.url;
 
-	const data = (() => {
+	// Derived, not computed once: in the editor this component keeps its instance
+	// while the block's image changes underneath it.
+	const data = $derived.by(() => {
 		if (!image || !image.formats) {
 			return {
 				resolved: [],
@@ -75,7 +77,7 @@
 		const alt = image.alt ?? image.title ?? "";
 
 		return { resolved, fallbackFormat, fallbackSrc, alt };
-	})();
+	});
 </script>
 
 {#if data.resolved.length}

package/src/editor/editorContent.svelte.js

@@ -0,0 +1,168 @@
+import { EVENTS, notifyCMS } from "./notify.js";
+
+const fetchDraftContent = async (draftUuid) => {
+	const response = await fetch(`/api/cms/api/public/pages/preview/${draftUuid}`);
+
+	if (!response.ok) {
+		throw new Error(`Draft content request failed: ${response.status}`);
+	}
+
+	const data = await response.json();
+
+	return Array.isArray(data?.content) ? data.content : [];
+};
+
+const patchKey = ({ draftBlockUuid, itemUuid, identifier }) =>
+	`${draftBlockUuid}|${itemUuid ?? ""}|${identifier}`;
+
+const sameValue = (a, b) => JSON.stringify(a ?? null) === JSON.stringify(b ?? null);
+
+/**
+ * Only primitive values are patched live. Structured fields — media, filters,
+ * dynamic content — reach the block fully resolved by the CMS; patching them from
+ * authoring data would render the block wrong or fail its schema, so they wait for
+ * the authoritative reload.
+ */
+const isLivePatchable = (current, next) =>
+	typeof next !== "object" && (current == null || typeof current !== "object");
+
+const withData = (entity, identifier, value) => ({
+	...entity,
+	data: { ...(entity.data ?? {}), [identifier]: value },
+});
+
+/** Repeater items nest arbitrarily deep, so the item is searched by uuid. */
+const patchItem = (items, itemUuid, identifier, value) =>
+	(items ?? []).map((item) => {
+		if (item?.uuid === itemUuid) return withData(item, identifier, value);
+		if (!item?.blocks?.length) return item;
+
+		return { ...item, blocks: patchItem(item.blocks, itemUuid, identifier, value) };
+	});
+
+const applyPatch = (blocks, patch) =>
+	blocks.map((block) => {
+		if (block?.uuid !== patch.draftBlockUuid) return block;
+
+		if (!patch.itemUuid) return withData(block, patch.identifier, patch.value);
+
+		return {
+			...block,
+			blocks: patchItem(block.blocks, patch.itemUuid, patch.identifier, patch.value),
+		};
+	});
+
+const readValue = (blocks, patch) => {
+	const block = blocks.find((entry) => entry?.uuid === patch.draftBlockUuid);
+
+	if (!block) return undefined;
+	if (!patch.itemUuid) return block.data?.[patch.identifier];
+
+	const find = (items) => {
+		for (const item of items ?? []) {
+			if (item?.uuid === patch.itemUuid) return item;
+
+			const nested = find(item?.blocks);
+			if (nested) return nested;
+		}
+	};
+
+	return find(block.blocks)?.data?.[patch.identifier];
+};
+
+/**
+ * Owns the block list while the editor is open.
+ *
+ * Two channels feed it. Every keystroke arrives as a preview patch and is applied
+ * without touching the network, so typing shows up immediately. The CMS writes to the
+ * database on its own delay and only then signals a change; the blocks are reloaded
+ * from the CMS, which keeps dynamic content server-resolved.
+ *
+ * A reload can answer with text older than what the user has typed since, so pending
+ * patches are re-applied on top of it. A patch is released once the CMS reports that it
+ * has persisted exactly that value: from then on the server's answer wins, including
+ * the rewrites it does on the way — internal links, sanitizing, headline levels.
+ *
+ * Call this during component setup; it installs its own message listener.
+ */
+const createEditorContent = (initialBlocks, { draftUuid } = {}) => {
+	let blocks = $state([...(initialBlocks ?? [])]);
+	let latestRequest = 0;
+	const pendingPatches = new Map();
+
+	/**
+	 * The write that just landed carries what was typed last, so that patch has done
+	 * its job. A newer keystroke keeps its own patch — its write is still pending.
+	 */
+	const release = (persisted) => {
+		if (!persisted?.draftBlockUuid || !persisted?.identifier) return;
+
+		const key = patchKey(persisted);
+
+		if (sameValue(pendingPatches.get(key)?.value, persisted.value)) {
+			pendingPatches.delete(key);
+		}
+	};
+
+	const settle = (next) => {
+		for (const patch of pendingPatches.values()) {
+			next = applyPatch(next, patch);
+		}
+
+		return next;
+	};
+
+	const reload = async (persisted) => {
+		if (!draftUuid) return;
+
+		release(persisted);
+
+		const request = ++latestRequest;
+
+		try {
+			const next = await fetchDraftContent(draftUuid);
+
+			// A newer signal already sent its own request — that answer wins.
+			if (request !== latestRequest) return;
+
+			blocks = settle(next);
+			notifyCMS(EVENTS.CONTENT_APPLIED);
+		} catch {
+			notifyCMS(EVENTS.CONTENT_FAILED);
+		}
+	};
+
+	const preview = (patch) => {
+		if (!patch?.draftBlockUuid || !patch?.identifier) return;
+		if (!isLivePatchable(readValue(blocks, patch), patch.value)) return;
+
+		pendingPatches.set(patchKey(patch), patch);
+		blocks = applyPatch(blocks, patch);
+	};
+
+	const handleMessage = (event) => {
+		const { type, payload } = event.data || {};
+
+		if (type === EVENTS.CONTENT_CHANGED) reload(payload?.persisted);
+		if (type === EVENTS.CONTENT_PREVIEW) preview(payload);
+	};
+
+	$effect(() => {
+		window.addEventListener("message", handleMessage);
+
+		// Tells the CMS that this preview renders the block list itself, so it can send
+		// changes as a signal. A website that has not been rebuilt yet never says this
+		// and keeps getting a full reload.
+		notifyCMS(EVENTS.CONTENT_READY);
+
+		return () => window.removeEventListener("message", handleMessage);
+	});
+
+	return {
+		get blocks() {
+			return blocks;
+		},
+	};
+};
+
+export { createEditorContent };

package/src/editor/editorProps.js

@@ -0,0 +1,14 @@
+/**
+ * The props the editor island needs, read from the CMS-owned locals. Which local
+ * carries what stays here: a site that reads the wrong one gets a preview that
+ * silently stops updating.
+ */
+const editorProps = (locals = {}) => ({
+	autoTranslate: locals.page?.autoTranslate,
+	cmsLocale: locals._cmsLocale,
+	content: locals.content,
+	draftUuid: locals._draftUuid,
+	locale: locals.page?.locale,
+});
+
+export { editorProps };

package/src/editor/notify.js

@@ -10,6 +10,11 @@ const EVENTS = {
 	PATH_ON_LOAD: "PATH_ON_LOAD",
 	IFRAME_DOM_LOADED: "IFRAME_DOM_LOADED",
 	COMMENT_COUNTS: "COMMENT_COUNTS",
+	CONTENT_READY: "CONTENT_READY",
+	CONTENT_CHANGED: "CONTENT_CHANGED",
+	CONTENT_PREVIEW: "CONTENT_PREVIEW",
+	CONTENT_APPLIED: "CONTENT_APPLIED",
+	CONTENT_FAILED: "CONTENT_FAILED",
 	CURRENT_BLOCK_EDIT: "CURRENT_BLOCK_EDIT",
 	SCROLL_TO_BLOCK: "SCROLL_TO_BLOCK",
 };