@tideworthy/tidysites-platform 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.5.0
+
+- Editor: image picker over the site's media library with upload, for block fields whose id names an image URL (`imageUrl`, `photoUrl`, …) and for record fields of kind image.
+- Editor: record details. A `[data-tidy-record]` region (with `data-tidy-record-id` and `data-tidy-record-label`) gets an "Edit details" chip; the business record is always reachable from the pill. Forms come from EmDash's manifest (string, text, richText, number, boolean, select, image). Record saves publish at once, since other pages read the published version.
+- Editor: Publish publishes every entry saved in this browser session (pending list in sessionStorage); the pill shows the count.
+- Editor: EmDash's toolbar is hidden and `data-emdash-ref` attributes are removed on block pages, so one editor owns the page. Article pages, which do not mount this editor, keep EmDash's inline editing.
+
+## 0.4.0
+
+- The Tideworthy on-site editor: `@tideworthy/tidysites-platform/editor` is an Astro component a template renders in edit mode with the page's block schemas and block list. Every framed block (`data-tidy-block`, `data-tidy-type`, list in `data-tidy-blocks`) gets a hover chip with Edit, move up, move down, add a section below, and remove; Edit opens a side panel whose form comes from the block's Block Kit field schema (text, multiline, number, toggle, select, repeater). Saves go through EmDash's `PUT /_emdash/api/content/:collection/:id` as a draft with the editor's session; Publish is EmDash's publish call. Exists because EmDash's inline editor renders custom blocks as "edit in admin" placeholders. Pure block operations in `@tideworthy/tidysites-platform/editor/ops`.
+
 ## 0.3.0
 
 - `tidyPlatform()` registers a middleware: with a `TIDY_FRAME_ANCESTORS` variable on the site (space-separated https origins), responses carry `Content-Security-Policy: frame-ancestors 'self' <origins>` in place of EmDash's `X-Frame-Options: SAMEORIGIN`, so the platform can embed the staging preview. Inert without the variable. New export `@tideworthy/tidysites-platform/middleware`.

package/README.md

@@ -43,6 +43,20 @@ export { default, PluginBridge } from "@emdash-cms/cloudflare/worker";
 
 EmDash answers every page with `X-Frame-Options: SAMEORIGIN` unless a Content-Security-Policy is present. `tidyPlatform()` registers a middleware that, when the site carries a `TIDY_FRAME_ANCESTORS` variable (space-separated https origins), replaces that header with `Content-Security-Policy: frame-ancestors 'self' <origins>` so the platform's website page can embed the site. Without the variable nothing changes.
 
+## The on-site editor
+
+EmDash's inline editor edits plain rich text; a Block Kit block inside a Portable Text field renders as an "edit in admin" placeholder. Templates built from blocks use the Tideworthy editor instead:
+
+```astro
+---
+import TidyEditor from "@tideworthy/tidysites-platform/editor";
+const editMode = Astro.cookies.get("emdash-edit-mode")?.value === "true";
+---
+{editMode && <TidyEditor collection="pages" id={page.data.id} blocks={blockSchema} value={content} />}
+```
+
+The template renders the block list inside `<div data-tidy-blocks>` and each custom block inside `<div data-tidy-block={_key} data-tidy-type={_type}>`, and passes `PortableText` a copy of the array (`[...blocks]`) so EmDash's inline editor does not mount on it. `blocks` is the plugin definition's `portableTextBlocks`. Hovering a block shows a chip (Edit, move, add below, remove); Edit opens a panel built from the block's fields; Save writes a draft through EmDash's content API with the signed-in editor's session and reloads; Publish publishes every entry saved in the session. A text field whose id ends in `imageUrl` (or `photoUrl`, `logoUrl`) gets an image picker over the media library with upload. Records: wrap a region in `data-tidy-record="services" data-tidy-record-id="…" data-tidy-record-label="Service details"` and pass `records` to the component; the form comes from EmDash's manifest and saves publish at once. Pass the business record in `records` and it is always one click away in the pill. On these pages EmDash's toolbar is hidden and its inline editing is off; article bodies keep EmDash's inline editor by passing the original array and not mounting this component.
+
 ## Bindings the routes read
 
 | Binding | Type | Purpose |

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tideworthy/tidysites-platform",
-	"version": "0.3.0",
+	"version": "0.5.0",
 	"description": "The Tidysites platform integration for EmDash sites: bootstrap, sessions, maintenance, health, and publish hooks under /_tidy/*.",
 	"license": "MIT",
 	"type": "module",
@@ -19,6 +19,8 @@
 		".": "./src/index.ts",
 		"./plugin": "./src/plugin.ts",
 		"./middleware": "./src/middleware.ts",
+		"./editor": "./src/editor/TidyEditor.astro",
+		"./editor/ops": "./src/editor/ops.ts",
 		"./client": "./src/client.ts",
 		"./routes/bootstrap": "./src/routes/bootstrap.ts",
 		"./routes/session": "./src/routes/session.ts",
@@ -29,7 +31,7 @@
 		"./routes/maintenance": "./src/routes/maintenance.ts"
 	},
 	"scripts": {
-		"typecheck": "tsc --noEmit",
+		"typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.editor.json",
 		"test": "vitest run",
 		"check": "npm run typecheck && npm run test"
 	},

package/src/editor/TidyEditor.astro

@@ -0,0 +1,74 @@
+---
+/**
+ * The Tideworthy on-site editor for block-built pages. Render it from the
+ * layout when the page is in edit mode, with the entry the page shows, the
+ * block schemas the template declares, and the block list as rendered. The
+ * template frames each custom block with `data-tidy-block` (its key) and
+ * `data-tidy-type`, and wraps the list in `data-tidy-blocks`. A record region
+ * (`data-tidy-record`, `data-tidy-record-id`, `data-tidy-record-label`) gets an
+ * "Edit details" chip whose form comes from EmDash's manifest.
+ */
+import type { Block, BlockSchema } from "./ops";
+
+interface Props {
+	collection: string;
+	id: string;
+	field?: string;
+	blocks: BlockSchema[];
+	value: Block[];
+	/** Records reachable from the pill (the business) or from `[data-tidy-record]` regions on the page. */
+	records?: Array<{ collection: string; id: string; label: string }>;
+}
+const { collection, id, field = "content", blocks, value, records = [] } = Astro.props;
+const config = JSON.stringify({ collection, id, field, blocks, value, records });
+---
+<script type="application/json" id="tidy-editor-config" set:html={config.replace(/</g, "\\u003c")} />
+<script src="./runtime.ts"></script>
+<style is:global>
+	#emdash-toolbar { display: none !important; }
+	[data-tidy-record] { outline: 2px dashed transparent; outline-offset: 4px; transition: outline-color 120ms; cursor: pointer; }
+	[data-tidy-record]:hover, [data-tidy-record].tidy-active { outline-color: #2b7fd1; }
+	.tidy-image-preview { display: grid; place-items: center; min-height: 96px; border: 1px solid #d3dcd6; border-radius: 6px; background: #f6f7f5; overflow: hidden; }
+	.tidy-image-preview img { max-width: 100%; max-height: 180px; display: block; }
+	.tidy-image-empty { color: #7b877f; font-size: 13px; padding: 8px; }
+	.tidy-image-actions { display: flex; gap: 6px; flex-wrap: wrap; }
+	.tidy-image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 260px; overflow: auto; padding: 6px; border: 1px solid #d3dcd6; border-radius: 6px; }
+	.tidy-image-grid[hidden] { display: none; }
+	.tidy-image-thumb { padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: #fff; cursor: pointer; aspect-ratio: 1; }
+	.tidy-image-thumb:hover { border-color: #2b7fd1; }
+	.tidy-image-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+	[data-tidy-block] { position: relative; outline: 2px dashed transparent; outline-offset: -2px; transition: outline-color 120ms; cursor: pointer; }
+	[data-tidy-block]:hover, [data-tidy-block].tidy-active { outline-color: #2b7fd1; }
+	.tidy-chip { position: absolute; z-index: 2147483000; display: flex; gap: 4px; align-items: center; padding: 4px 6px; background: #17211c; color: #fff; border-radius: 8px; font: 500 13px/1.2 system-ui, sans-serif; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
+	.tidy-chip[hidden], .tidy-panel[hidden], .tidy-status[hidden] { display: none; }
+	.tidy-chip-label { padding: 0 6px 0 4px; opacity: .85; }
+	.tidy-btn { appearance: none; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: inherit; border-radius: 6px; padding: 4px 8px; font: inherit; cursor: pointer; }
+	.tidy-btn:hover { background: rgba(255,255,255,.18); }
+	.tidy-btn:disabled { opacity: .35; cursor: default; }
+	.tidy-btn-primary { background: #2b7fd1; border-color: #2b7fd1; color: #fff; }
+	.tidy-btn-primary:hover { background: #2470bd; }
+	.tidy-btn-danger:hover { background: #b3261e; border-color: #b3261e; }
+	.tidy-btn-sm { padding: 3px 8px; font-size: 12px; }
+	.tidy-add-end { display: block; width: calc(100% - 32px); margin: 16px; padding: 14px; border: 2px dashed #2b7fd1; border-radius: 10px; background: rgba(43,127,209,.06); color: #2b7fd1; font: 600 14px system-ui, sans-serif; cursor: pointer; }
+	.tidy-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 2147483001; overflow: auto; background: #fff; color: #17211c; border-left: 1px solid #d3dcd6; box-shadow: -12px 0 40px rgba(0,0,0,.18); padding: 20px; font: 14px/1.45 system-ui, sans-serif; }
+	.tidy-panel-head h2 { margin: 0 0 4px; font-size: 18px; }
+	.tidy-panel-head p { margin: 0 0 16px; color: #4a5851; }
+	.tidy-form { display: grid; gap: 14px; }
+	.tidy-field { display: grid; gap: 6px; }
+	.tidy-field-label { font-weight: 600; font-size: 13px; }
+	.tidy-field input[type="text"], .tidy-field input[type="number"], .tidy-field textarea, .tidy-field select { width: 100%; box-sizing: border-box; border: 1px solid #c9d2cc; border-radius: 6px; padding: 8px 10px; font: inherit; background: #fff; color: inherit; }
+	.tidy-field textarea { resize: vertical; min-height: 88px; }
+	.tidy-field-toggle { display: flex; align-items: center; gap: 10px; }
+	.tidy-repeater { border: 1px solid #d3dcd6; border-radius: 8px; padding: 12px; display: grid; gap: 12px; }
+	.tidy-repeater legend { font-weight: 600; padding: 0 6px; }
+	.tidy-repeater-item { display: grid; gap: 10px; padding: 12px; background: #f6f7f5; border-radius: 6px; }
+	.tidy-panel .tidy-btn { color: #17211c; border-color: #c9d2cc; background: #fff; }
+	.tidy-panel .tidy-btn-primary { color: #fff; background: #2b7fd1; border-color: #2b7fd1; }
+	.tidy-panel .tidy-btn-danger { color: #b3261e; }
+	.tidy-panel-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; border-top: 1px solid #e6ede8; }
+	.tidy-add-list { display: grid; gap: 8px; margin-bottom: 16px; }
+	.tidy-add-item { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid #d3dcd6; border-radius: 8px; background: #fff; cursor: pointer; font: inherit; }
+	.tidy-add-item:hover { border-color: #2b7fd1; background: rgba(43,127,209,.06); }
+	.tidy-add-item span { color: #4a5851; font-size: 13px; }
+	.tidy-status { position: fixed; left: 16px; bottom: 16px; z-index: 2147483000; display: flex; gap: 10px; align-items: center; padding: 8px 12px; background: #17211c; color: #fff; border-radius: 999px; font: 500 13px system-ui, sans-serif; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
+</style>

package/src/editor/ops.ts

@@ -0,0 +1,94 @@
+/**
+ * Pure operations on a page's block list (a Portable Text array whose custom
+ * blocks carry `_type` and `_key`). The editor runtime calls these; the tests
+ * cover them without a browser.
+ */
+export type Block = { _type: string; _key?: string } & Record<string, unknown>;
+
+export interface FieldSchema {
+	type: "text_input" | "number_input" | "toggle" | "select" | "repeater" | string;
+	action_id: string;
+	label: string;
+	multiline?: boolean;
+	options?: Array<{ label: string; value: string }>;
+	fields?: FieldSchema[];
+	item_label?: string;
+	min_items?: number;
+	max_items?: number;
+}
+
+export interface BlockSchema {
+	type: string;
+	label: string;
+	category?: string;
+	description?: string;
+	fields: FieldSchema[];
+}
+
+export function newKey(random: () => number = Math.random): string {
+	let s = "";
+	for (let i = 0; i < 12; i++) s += "abcdefghijklmnopqrstuvwxyz0123456789"[Math.floor(random() * 36)];
+	return s;
+}
+
+export function findBlock(blocks: Block[], key: string): Block | undefined {
+	return blocks.find((b) => b._key === key);
+}
+
+/** The block with `key` gets `data` merged over it; `_type` and `_key` never change. */
+export function updateBlock(blocks: Block[], key: string, data: Record<string, unknown>): Block[] {
+	return blocks.map((b) => (b._key === key ? { ...b, ...data, _type: b._type, _key: b._key } : b));
+}
+
+export function moveBlock(blocks: Block[], key: string, direction: -1 | 1): Block[] {
+	const i = blocks.findIndex((b) => b._key === key);
+	const j = i + direction;
+	if (i < 0 || j < 0 || j >= blocks.length) return blocks;
+	const out = blocks.slice();
+	const a = out[i] as Block;
+	out[i] = out[j] as Block;
+	out[j] = a;
+	return out;
+}
+
+export function removeBlock(blocks: Block[], key: string): Block[] {
+	return blocks.filter((b) => b._key !== key);
+}
+
+/** Insert a new block of `type` after the block with `afterKey` (or at the end). */
+export function insertBlock(blocks: Block[], type: string, afterKey: string | null, data: Record<string, unknown>, key = newKey()): Block[] {
+	const block: Block = { ...data, _type: type, _key: key };
+	const i = afterKey ? blocks.findIndex((b) => b._key === afterKey) : -1;
+	if (i < 0) return [...blocks, block];
+	return [...blocks.slice(0, i + 1), block, ...blocks.slice(i + 1)];
+}
+
+/** Empty values for every field in a schema, so a new block renders without holes. */
+export function defaultsFor(schema: BlockSchema): Record<string, unknown> {
+	const out: Record<string, unknown> = {};
+	for (const f of schema.fields) {
+		if (f.type === "toggle") out[f.action_id] = false;
+		else if (f.type === "number_input") out[f.action_id] = null;
+		else if (f.type === "select") out[f.action_id] = f.options?.[0]?.value ?? "";
+		else if (f.type === "repeater") out[f.action_id] = [];
+		else out[f.action_id] = "";
+	}
+	return out;
+}
+
+/** Coerce a raw form value into the field's stored type. */
+export function coerce(field: FieldSchema, raw: unknown): unknown {
+	switch (field.type) {
+		case "toggle":
+			return raw === true || raw === "on" || raw === "true";
+		case "number_input": {
+			if (raw === "" || raw === null || raw === undefined) return null;
+			const n = Number(raw);
+			return Number.isFinite(n) ? n : null;
+		}
+		case "repeater":
+			return Array.isArray(raw) ? raw : [];
+		default:
+			return typeof raw === "string" ? raw : raw === null || raw === undefined ? "" : String(raw);
+	}
+}

package/src/editor/runtime.ts

@@ -0,0 +1,537 @@
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+/**
+ * The Tideworthy on-site editor. Runs on a page rendered in edit mode.
+ *
+ * Sections: every custom block sits in a frame (`[data-tidy-block]`, rendered
+ * by the template); hovering shows a chip with Edit, Up, Down, Add and Remove,
+ * and Edit opens a panel whose form comes from the block's field schema.
+ *
+ * Records: a region wrapped in `[data-tidy-record]` (a service's header, say)
+ * gets an "Edit … details" chip whose form comes from EmDash's manifest for
+ * that collection; the business record is always reachable from the pill.
+ *
+ * Images: a block field whose id names an image URL, or a record field of
+ * kind image, gets a picker over the site's media library with upload.
+ *
+ * Saves go through EmDash's content API with the editor's session, as drafts;
+ * Publish publishes every entry touched in this browser session.
+ */
+import { coerce, defaultsFor, insertBlock, moveBlock, removeBlock, updateBlock, type Block, type BlockSchema, type FieldSchema } from "./ops";
+
+interface RecordRef {
+	collection: string;
+	id: string;
+	label: string;
+}
+
+interface Config {
+	collection: string;
+	id: string;
+	field: string;
+	blocks: BlockSchema[];
+	value: Block[];
+	records?: RecordRef[];
+}
+
+interface ManifestField {
+	kind: string;
+	label?: string;
+	options?: Array<{ value: string; label: string }> | Record<string, unknown>;
+}
+
+interface MediaItem {
+	id: string;
+	filename: string;
+	mimeType: string;
+	width?: number | null;
+	height?: number | null;
+	alt?: string | null;
+	storageKey: string;
+	url?: string;
+}
+
+const API = "/_emdash/api";
+const CSRF = { "X-EmDash-Request": "1" };
+const PENDING_KEY = "tidy-pending";
+const IMAGE_FIELD = /(image|photo|logo|picture)url$/i;
+/** Record fields the panel never shows: system, structural, or edited elsewhere. */
+const HIDDEN_RECORD_FIELDS = new Set(["content", "sort", "brand_primary", "brand_accent", "font_display", "font_body"]);
+
+function el<K extends keyof HTMLElementTagNameMap>(tag: K, attrs: Record<string, string> = {}, children: Array<Node | string> = []): HTMLElementTagNameMap[K] {
+	const e = document.createElement(tag);
+	for (const [k, v] of Object.entries(attrs)) {
+		if (k === "class") e.className = v;
+		else if (k === "text") e.textContent = v;
+		else e.setAttribute(k, v);
+	}
+	for (const c of children) e.append(c);
+	return e;
+}
+
+function mediaUrl(m: MediaItem): string {
+	return m.url ?? `${API}/media/file/${m.storageKey}`;
+}
+
+/** The value an image record field stores: EmDash's media value for a library item. */
+function mediaValue(m: MediaItem): Record<string, unknown> {
+	return { provider: "local", id: m.id, alt: m.alt ?? "", width: m.width ?? undefined, height: m.height ?? undefined, mimeType: m.mimeType, filename: m.filename, meta: { storageKey: m.storageKey } };
+}
+
+function api(path: string, init: RequestInit = {}): Promise<Response> {
+	return fetch(`${API}${path}`, { credentials: "same-origin", ...init, headers: { ...CSRF, ...(init.headers as Record<string, string> | undefined) } });
+}
+
+export function start(config: Config): void {
+	let value: Block[] = config.value;
+	const schemaOf = (type: string) => config.blocks.find((b) => b.type === type);
+	const frames = () => Array.from(document.querySelectorAll<HTMLElement>("[data-tidy-block]"));
+
+	// EmDash's inline editor is for prose pages; here the sections and records own their fields.
+	document.querySelectorAll("[data-emdash-ref]").forEach((n) => n.removeAttribute("data-emdash-ref"));
+
+	// --- pending publishes ---------------------------------------------------
+	const pending = new Set<string>(JSON.parse(sessionStorage.getItem(PENDING_KEY) ?? "[]") as string[]);
+	const persistPending = () => sessionStorage.setItem(PENDING_KEY, JSON.stringify([...pending]));
+
+	// --- status pill ---------------------------------------------------------
+	const status = el("div", { class: "tidy-status" });
+	const statusText = el("span");
+	const bizBtn = el("button", { type: "button", class: "tidy-btn", text: "Business details" });
+	const publishBtn = el("button", { type: "button", class: "tidy-btn tidy-btn-primary", text: "Publish" });
+	status.append(statusText, bizBtn, publishBtn);
+	document.body.append(status);
+	const business = (config.records ?? []).find((r) => r.collection === "business");
+	bizBtn.hidden = !business;
+	bizBtn.addEventListener("click", () => business && void openRecord(business));
+	function refreshStatus(text?: string) {
+		const n = pending.size;
+		statusText.textContent = text ?? (n === 0 ? "Editing" : `${n} unpublished change${n === 1 ? "" : "s"}`);
+		publishBtn.hidden = n === 0 && !text?.startsWith("Publish failed");
+	}
+	refreshStatus();
+	publishBtn.addEventListener("click", async () => {
+		publishBtn.disabled = true;
+		refreshStatus("Publishing");
+		const targets = pending.size ? [...pending] : [`${config.collection}/${config.id}`];
+		let failed = 0;
+		for (const t of targets) {
+			const [collection, id] = t.split("/") as [string, string];
+			const r = await api(`/content/${encodeURIComponent(collection)}/${encodeURIComponent(id)}/publish`, { method: "POST" });
+			if (r.ok) pending.delete(t);
+			else failed++;
+		}
+		persistPending();
+		if (failed === 0) location.reload();
+		else {
+			publishBtn.disabled = false;
+			refreshStatus(`Publish failed for ${failed}`);
+		}
+	});
+
+	/**
+	 * Page blocks save as a draft the page previews in edit mode; Publish makes
+	 * them live. Record details (the business, a service) are read by many
+	 * pages from their published version, so a draft would look like nothing
+	 * happened: they save and publish in one step.
+	 */
+	async function saveEntry(collection: string, id: string, data: Record<string, unknown>, publishNow = false): Promise<boolean> {
+		refreshStatus("Saving");
+		const r = await api(`/content/${encodeURIComponent(collection)}/${encodeURIComponent(id)}`, { method: "PUT", headers: { "content-type": "application/json" }, body: JSON.stringify({ data }) });
+		if (!r.ok) {
+			refreshStatus(`Save failed (${r.status})`);
+			return false;
+		}
+		if (publishNow) {
+			const p = await api(`/content/${encodeURIComponent(collection)}/${encodeURIComponent(id)}/publish`, { method: "POST" });
+			if (!p.ok) {
+				pending.add(`${collection}/${id}`);
+				persistPending();
+				refreshStatus(`Saved; publish failed (${p.status})`);
+				return false;
+			}
+		} else {
+			pending.add(`${collection}/${id}`);
+			persistPending();
+		}
+		refreshStatus("Saved. Reloading");
+		location.reload();
+		return true;
+	}
+	const saveBlocks = (next: Block[]) => saveEntry(config.collection, config.id, { [config.field]: next });
+
+	// --- chip on the hovered frame or record ---------------------------------
+	const chip = el("div", { class: "tidy-chip", hidden: "" });
+	const chipLabel = el("span", { class: "tidy-chip-label" });
+	const bEdit = el("button", { type: "button", class: "tidy-btn", text: "Edit" });
+	const bUp = el("button", { type: "button", class: "tidy-btn", title: "Move up", text: "↑" });
+	const bDown = el("button", { type: "button", class: "tidy-btn", title: "Move down", text: "↓" });
+	const bAdd = el("button", { type: "button", class: "tidy-btn", title: "Add a section below", text: "+" });
+	const bRemove = el("button", { type: "button", class: "tidy-btn tidy-btn-danger", title: "Remove this section", text: "Remove" });
+	chip.append(chipLabel, bEdit, bUp, bDown, bAdd, bRemove);
+	document.body.append(chip);
+	let current: HTMLElement | null = null;
+
+	function placeChip(target: HTMLElement) {
+		const r = target.getBoundingClientRect();
+		chip.style.top = `${Math.max(8, r.top + window.scrollY - 2)}px`;
+		chip.style.left = `${Math.max(8, r.left + window.scrollX + 8)}px`;
+		chip.hidden = false;
+		document.querySelectorAll(".tidy-active").forEach((n) => n.classList.remove("tidy-active"));
+		target.classList.add("tidy-active");
+	}
+	function showBlockChip(frame: HTMLElement) {
+		current = frame;
+		const key = frame.dataset.tidyBlock ?? "";
+		chipLabel.textContent = schemaOf(frame.dataset.tidyType ?? "")?.label ?? frame.dataset.tidyType ?? "";
+		const i = value.findIndex((b) => b._key === key);
+		bUp.disabled = i <= 0;
+		bDown.disabled = i < 0 || i >= value.length - 1;
+		for (const b of [bUp, bDown, bAdd, bRemove]) b.hidden = false;
+		bEdit.textContent = "Edit";
+		placeChip(frame);
+	}
+	function showRecordChip(region: HTMLElement) {
+		current = region;
+		chipLabel.textContent = region.dataset.tidyRecordLabel ?? region.dataset.tidyRecord ?? "";
+		for (const b of [bUp, bDown, bAdd, bRemove]) b.hidden = true;
+		bEdit.textContent = "Edit details";
+		placeChip(region);
+	}
+	const isInteractive = (t: EventTarget | null) => Boolean((t as HTMLElement | null)?.closest("a,button,input,select,textarea,label"));
+	for (const f of frames()) {
+		f.addEventListener("mouseenter", () => showBlockChip(f));
+		f.addEventListener("click", (e) => {
+			if (isInteractive(e.target)) return;
+			e.preventDefault();
+			showBlockChip(f);
+			openBlock(f.dataset.tidyBlock ?? "");
+		});
+	}
+	for (const r of Array.from(document.querySelectorAll<HTMLElement>("[data-tidy-record]"))) {
+		r.addEventListener("mouseenter", () => showRecordChip(r));
+		r.addEventListener("click", (e) => {
+			if (isInteractive(e.target)) return;
+			e.preventDefault();
+			showRecordChip(r);
+			void openRecord({ collection: r.dataset.tidyRecord ?? "", id: r.dataset.tidyRecordId ?? "", label: r.dataset.tidyRecordLabel ?? "" });
+		});
+	}
+	bEdit.addEventListener("click", () => {
+		if (!current) return;
+		if (current.dataset.tidyBlock) openBlock(current.dataset.tidyBlock);
+		else void openRecord({ collection: current.dataset.tidyRecord ?? "", id: current.dataset.tidyRecordId ?? "", label: current.dataset.tidyRecordLabel ?? "" });
+	});
+	bUp.addEventListener("click", () => current?.dataset.tidyBlock && moved(moveBlock(value, current.dataset.tidyBlock, -1)));
+	bDown.addEventListener("click", () => current?.dataset.tidyBlock && moved(moveBlock(value, current.dataset.tidyBlock, 1)));
+	bRemove.addEventListener("click", () => {
+		if (!current?.dataset.tidyBlock) return;
+		if (confirm(`Remove this ${chipLabel.textContent} section?`)) void saveBlocks(removeBlock(value, current.dataset.tidyBlock));
+	});
+	bAdd.addEventListener("click", () => current?.dataset.tidyBlock && openAdd(current.dataset.tidyBlock));
+	function moved(next: Block[]) {
+		if (next !== value) void saveBlocks(next);
+	}
+
+	const list = document.querySelector<HTMLElement>("[data-tidy-blocks]");
+	if (list) {
+		const add = el("button", { type: "button", class: "tidy-add-end", text: "+ Add a section" });
+		add.addEventListener("click", () => openAdd(null));
+		list.after(add);
+	}
+
+	// --- panel ---------------------------------------------------------------
+	const panel = el("aside", { class: "tidy-panel", hidden: "" });
+	document.body.append(panel);
+	function closePanel() {
+		panel.hidden = true;
+		panel.replaceChildren();
+	}
+	function openPanel(title: string, description: string | undefined, body: HTMLElement) {
+		panel.replaceChildren(el("header", { class: "tidy-panel-head" }, [el("h2", { text: title }), ...(description ? [el("p", { text: description })] : [])]), body);
+		panel.hidden = false;
+		(body.querySelector("input:not([type=file]),textarea,select") as HTMLElement | null)?.focus();
+	}
+	document.addEventListener("keydown", (e) => {
+		if (e.key === "Escape" && !panel.hidden) closePanel();
+	});
+
+	// --- image picker -----------------------------------------------------------
+	/** An image control. `get` returns the stored value (URL string or media value); set through `onPick`. */
+	function imageControl(label: string, currentUrl: string | null, onPick: (item: MediaItem | null) => void): HTMLElement {
+		const wrap = el("div", { class: "tidy-field tidy-image" }, [el("span", { class: "tidy-field-label", text: label })]);
+		const preview = el("div", { class: "tidy-image-preview" });
+		const setPreview = (url: string | null) => {
+			preview.replaceChildren(url ? el("img", { src: url, alt: "" }) : el("span", { class: "tidy-image-empty", text: "No image" }));
+		};
+		setPreview(currentUrl);
+		const choose = el("button", { type: "button", class: "tidy-btn tidy-btn-sm", text: "Choose image" });
+		const upload = el("button", { type: "button", class: "tidy-btn tidy-btn-sm", text: "Upload" });
+		const clear = el("button", { type: "button", class: "tidy-btn tidy-btn-sm tidy-btn-danger", text: "Remove" });
+		const file = el("input", { type: "file", accept: "image/*", hidden: "" });
+		const grid = el("div", { class: "tidy-image-grid", hidden: "" });
+		wrap.append(preview, el("div", { class: "tidy-image-actions" }, [choose, upload, clear, file]), grid);
+		choose.addEventListener("click", async () => {
+			if (!grid.hidden) {
+				grid.hidden = true;
+				return;
+			}
+			grid.hidden = false;
+			grid.replaceChildren(el("span", { class: "tidy-image-empty", text: "Loading" }));
+			const r = await api("/media?mimeType=image/&limit=60");
+			const j = (await r.json().catch(() => ({}))) as { data?: { items?: MediaItem[] }; items?: MediaItem[] };
+			const items = j.data?.items ?? j.items ?? [];
+			grid.replaceChildren();
+			if (items.length === 0) grid.append(el("span", { class: "tidy-image-empty", text: "No images yet. Upload one." }));
+			for (const item of items) {
+				const b = el("button", { type: "button", class: "tidy-image-thumb", title: item.alt ?? item.filename }, [el("img", { src: mediaUrl(item), alt: item.alt ?? item.filename, loading: "lazy" })]);
+				b.addEventListener("click", () => {
+					onPick(item);
+					setPreview(mediaUrl(item));
+					grid.hidden = true;
+				});
+				grid.append(b);
+			}
+		});
+		upload.addEventListener("click", () => file.click());
+		file.addEventListener("change", async () => {
+			const f = file.files?.[0];
+			if (!f) return;
+			upload.disabled = true;
+			upload.textContent = "Uploading";
+			const body = new FormData();
+			body.append("file", f);
+			body.append("alt", f.name.replace(/\.[a-z0-9]+$/i, "").replace(/[-_]+/g, " "));
+			const r = await api("/media", { method: "POST", body });
+			const j = (await r.json().catch(() => ({}))) as { data?: { item?: MediaItem } };
+			upload.disabled = false;
+			upload.textContent = "Upload";
+			file.value = "";
+			if (!r.ok || !j.data?.item) {
+				alert(`Upload failed (${r.status})`);
+				return;
+			}
+			onPick(j.data.item);
+			setPreview(mediaUrl(j.data.item));
+		});
+		clear.addEventListener("click", () => {
+			onPick(null);
+			setPreview(null);
+		});
+		return wrap;
+	}
+
+	// --- block forms ---------------------------------------------------------
+	function fieldInput(f: FieldSchema, v: unknown, name: string): HTMLElement {
+		const wrap = el("label", { class: "tidy-field" }, [el("span", { class: "tidy-field-label", text: f.label })]);
+		if (f.type === "toggle") {
+			const cb = el("input", { type: "checkbox", name });
+			cb.checked = v === true;
+			wrap.className = "tidy-field tidy-field-toggle";
+			wrap.prepend(cb);
+		} else if (f.type === "select") {
+			const s = el("select", { name });
+			for (const o of f.options ?? []) {
+				const opt = el("option", { value: o.value, text: o.label });
+				if (o.value === v) opt.selected = true;
+				s.append(opt);
+			}
+			wrap.append(s);
+		} else if (f.type === "number_input") {
+			const i = el("input", { type: "number", name });
+			i.value = typeof v === "number" ? String(v) : "";
+			wrap.append(i);
+		} else if (f.multiline) {
+			const t = el("textarea", { name, rows: "4" });
+			t.value = typeof v === "string" ? v : "";
+			wrap.append(t);
+		} else {
+			const i = el("input", { type: "text", name });
+			i.value = typeof v === "string" ? v : v === null || v === undefined ? "" : String(v);
+			wrap.append(i);
+		}
+		return wrap;
+	}
+
+	/** A text field that stores an image URL gets the picker; the hidden input keeps the URL for the reader. */
+	function blockField(f: FieldSchema, v: unknown, name: string): HTMLElement {
+		if (f.type !== "text_input" || !IMAGE_FIELD.test(f.action_id)) return fieldInput(f, v, name);
+		const hidden = el("input", { type: "hidden", name });
+		hidden.value = typeof v === "string" ? v : "";
+		const control = imageControl(f.label, hidden.value || null, (item) => {
+			hidden.value = item ? mediaUrl(item) : "";
+		});
+		control.append(hidden);
+		return control;
+	}
+
+	function buildBlockForm(schema: BlockSchema, data: Record<string, unknown>): { form: HTMLFormElement; read: () => Record<string, unknown> } {
+		const form = el("form", { class: "tidy-form" });
+		const repeaters = new Map<string, { field: FieldSchema; items: HTMLElement }>();
+		for (const f of schema.fields) {
+			if (f.type === "repeater") {
+				const box = el("fieldset", { class: "tidy-repeater" }, [el("legend", { text: f.label })]);
+				const items = el("div", { class: "tidy-repeater-items" });
+				const rows = Array.isArray(data[f.action_id]) ? (data[f.action_id] as Record<string, unknown>[]) : [];
+				const addItem = (row: Record<string, unknown>) => {
+					const item = el("div", { class: "tidy-repeater-item" });
+					for (const sub of f.fields ?? []) item.append(blockField(sub, row[sub.action_id], sub.action_id));
+					const rm = el("button", { type: "button", class: "tidy-btn tidy-btn-danger tidy-btn-sm", text: `Remove ${f.item_label ?? "item"}` });
+					rm.addEventListener("click", () => item.remove());
+					item.append(rm);
+					items.append(item);
+				};
+				rows.forEach(addItem);
+				const add = el("button", { type: "button", class: "tidy-btn tidy-btn-sm", text: `Add ${f.item_label ?? "item"}` });
+				add.addEventListener("click", () => addItem({}));
+				box.append(items, add);
+				form.append(box);
+				repeaters.set(f.action_id, { field: f, items });
+			} else form.append(blockField(f, data[f.action_id], f.action_id));
+		}
+		const readScope = (scope: ParentNode, fields: FieldSchema[]): Record<string, unknown> => {
+			const out: Record<string, unknown> = {};
+			for (const f of fields) {
+				if (f.type === "repeater") continue;
+				const input = scope.querySelector<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>(`[name="${f.action_id}"]`);
+				out[f.action_id] = coerce(f, f.type === "toggle" ? (input as HTMLInputElement | null)?.checked : input?.value);
+			}
+			return out;
+		};
+		const read = (): Record<string, unknown> => {
+			const out: Record<string, unknown> = {};
+			for (const f of schema.fields) {
+				if (f.type === "repeater") {
+					const rep = repeaters.get(f.action_id)!;
+					out[f.action_id] = Array.from(rep.items.children).map((item) => readScope(item, f.fields ?? []));
+					continue;
+				}
+				const input = Array.from(form.children).map((c) => c.querySelector<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>(`[name="${f.action_id}"]`)).find(Boolean) ?? null;
+				out[f.action_id] = coerce(f, f.type === "toggle" ? (input as HTMLInputElement | null)?.checked : input?.value);
+			}
+			return out;
+		};
+		return { form, read };
+	}
+
+	function openBlock(key: string) {
+		const block = value.find((b) => b._key === key);
+		const schema = block ? schemaOf(block._type) : undefined;
+		if (!block || !schema) return;
+		const { form, read } = buildBlockForm(schema, block);
+		const saveBtn = el("button", { type: "submit", class: "tidy-btn tidy-btn-primary", text: "Save" });
+		const cancel = el("button", { type: "button", class: "tidy-btn", text: "Cancel" });
+		cancel.addEventListener("click", closePanel);
+		form.addEventListener("submit", (e) => {
+			e.preventDefault();
+			saveBtn.disabled = true;
+			void saveBlocks(updateBlock(value, key, read()));
+		});
+		form.append(el("div", { class: "tidy-panel-actions" }, [saveBtn, cancel]));
+		openPanel(schema.label, schema.description, form);
+	}
+
+	function openAdd(afterKey: string | null) {
+		const listEl = el("div", { class: "tidy-add-list" });
+		for (const s of config.blocks.filter((b) => b.category !== "Inline")) {
+			const b = el("button", { type: "button", class: "tidy-add-item" }, [el("strong", { text: s.label }), el("span", { text: s.description ?? "" })]);
+			b.addEventListener("click", () => void saveBlocks(insertBlock(value, s.type, afterKey, defaultsFor(s))));
+			listEl.append(b);
+		}
+		const cancel = el("button", { type: "button", class: "tidy-btn", text: "Cancel" });
+		cancel.addEventListener("click", closePanel);
+		const body = el("div", {}, [listEl, el("div", { class: "tidy-panel-actions" }, [cancel])]);
+		openPanel("Add a section", undefined, body);
+	}
+
+	// --- record forms (fields from EmDash's manifest) ---------------------------
+	let manifest: Promise<Record<string, { fields: Record<string, ManifestField> }>> | null = null;
+	function collections() {
+		manifest ??= api("/manifest")
+			.then((r) => r.json())
+			.then((j: { data?: { collections?: Record<string, { fields: Record<string, ManifestField> }> }; collections?: Record<string, { fields: Record<string, ManifestField> }> }) => j.data?.collections ?? j.collections ?? {});
+		return manifest;
+	}
+
+	async function openRecord(ref: RecordRef) {
+		openPanel(ref.label, undefined, el("p", { class: "tidy-image-empty", text: "Loading" }));
+		const [cols, entryRes] = await Promise.all([collections(), api(`/content/${encodeURIComponent(ref.collection)}/${encodeURIComponent(ref.id)}`)]);
+		const fields = cols[ref.collection]?.fields ?? {};
+		const entry = (await entryRes.json().catch(() => ({}))) as { data?: { item?: { data?: Record<string, unknown> } } };
+		const data = entry.data?.item?.data ?? {};
+		const form = el("form", { class: "tidy-form" });
+		const values: Record<string, unknown> = {};
+		const readers: Array<() => void> = [];
+		for (const [name, f] of Object.entries(fields)) {
+			if (HIDDEN_RECORD_FIELDS.has(name) || ["portableText", "reference", "json", "datetime"].includes(f.kind)) continue;
+			const label = f.label ?? name;
+			const v = data[name];
+			if (f.kind === "image") {
+				const cur = v as { src?: string; meta?: { storageKey?: string } } | null | undefined;
+				values[name] = v ?? null;
+				form.append(imageControl(label, cur?.src ?? (cur?.meta?.storageKey ? `${API}/media/file/${cur.meta.storageKey}` : null), (item) => {
+					values[name] = item ? mediaValue(item) : null;
+				}));
+				continue;
+			}
+			if (f.kind === "boolean") {
+				const w = el("label", { class: "tidy-field tidy-field-toggle" }, [el("span", { class: "tidy-field-label", text: label })]);
+				const cb = el("input", { type: "checkbox" });
+				cb.checked = v === true;
+				w.prepend(cb);
+				form.append(w);
+				readers.push(() => (values[name] = cb.checked));
+				continue;
+			}
+			if (f.kind === "number") {
+				const w = el("label", { class: "tidy-field" }, [el("span", { class: "tidy-field-label", text: label })]);
+				const i = el("input", { type: "number", step: "any" });
+				i.value = typeof v === "number" ? String(v) : "";
+				w.append(i);
+				form.append(w);
+				readers.push(() => (values[name] = i.value === "" ? null : Number(i.value)));
+				continue;
+			}
+			if (f.kind === "select" && Array.isArray(f.options)) {
+				const w = el("label", { class: "tidy-field" }, [el("span", { class: "tidy-field-label", text: label })]);
+				const s = el("select");
+				for (const o of f.options as Array<{ value: string; label: string }>) {
+					const opt = el("option", { value: o.value, text: o.label });
+					if (o.value === v) opt.selected = true;
+					s.append(opt);
+				}
+				w.append(s);
+				form.append(w);
+				readers.push(() => (values[name] = s.value));
+				continue;
+			}
+			const w = el("label", { class: "tidy-field" }, [el("span", { class: "tidy-field-label", text: label })]);
+			const long = f.kind === "text" || f.kind === "richText";
+			const i = long ? el("textarea", { rows: "4" }) : el("input", { type: "text" });
+			i.value = typeof v === "string" ? v : v === null || v === undefined ? "" : String(v);
+			w.append(i);
+			form.append(w);
+			readers.push(() => (values[name] = i.value));
+		}
+		const saveBtn = el("button", { type: "submit", class: "tidy-btn tidy-btn-primary", text: "Save" });
+		const cancel = el("button", { type: "button", class: "tidy-btn", text: "Cancel" });
+		cancel.addEventListener("click", closePanel);
+		form.addEventListener("submit", (e) => {
+			e.preventDefault();
+			saveBtn.disabled = true;
+			for (const r of readers) r();
+			void saveEntry(ref.collection, ref.id, values, true);
+		});
+		form.append(el("div", { class: "tidy-panel-actions" }, [saveBtn, cancel]));
+		openPanel(ref.label, undefined, form);
+	}
+}
+
+const cfgEl = document.getElementById("tidy-editor-config");
+if (cfgEl?.textContent) {
+	try {
+		start(JSON.parse(cfgEl.textContent) as Config);
+	} catch (err) {
+		console.error("[tidy-editor]", err);
+	}
+}

package/src/version.ts

@@ -1,3 +1,3 @@
 /** Kept in step with package.json by the release checklist in MAINTAINING.md. */
-export const VERSION = "0.3.0";
+export const VERSION = "0.5.0";
 export const PLUGIN_ID = "tidy-platform";