@tideworthy/tidysites-platform 0.4.0 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.5.1
+
+- Editor: a record region nested inside a section (a service card in the services grid) gets its own "Edit details" chip; clicking it edits the record instead of following the card's link, and leaving it hands the chip back to the section.
+
+## 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`.

package/README.md

@@ -55,7 +55,7 @@ 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 calls EmDash's publish. Article bodies keep EmDash's inline editor by passing the original array.
+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. A section that lists records (a services grid) wraps each card in the same `data-tidy-record` attributes, so the card edits its record and the section's chip edits the section. 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
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tideworthy/tidysites-platform",
-	"version": "0.4.0",
+	"version": "0.5.1",
 	"description": "The Tidysites platform integration for EmDash sites: bootstrap, sessions, maintenance, health, and publish hooks under /_tidy/*.",
 	"license": "MIT",
 	"type": "module",

package/src/editor/TidyEditor.astro

@@ -4,7 +4,9 @@
  * 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`.
+ * `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";
 
@@ -14,15 +16,27 @@ interface Props {
 	field?: string;
 	blocks: BlockSchema[];
 	value: Block[];
-	/** The entry's status as rendered: "draft" shows the Publish control at once. */
-	status?: string;
+	/** 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, status } = Astro.props;
-const config = JSON.stringify({ collection, id, field, blocks, value, status });
+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); }

package/src/editor/runtime.ts

@@ -1,26 +1,62 @@
 /// <reference lib="dom" />
 /// <reference lib="dom.iterable" />
 /**
- * The Tideworthy on-site editor. Runs on a page rendered in edit mode. Every
- * custom block on the page sits in a frame (`[data-tidy-block]`, rendered by
- * the template); hovering a frame shows a chip with Edit, Up, Down, Remove,
- * and Add; Edit opens a panel whose form comes from the block's field schema.
- * Saves go through EmDash's own content API with the editor's session, as a
- * draft; Publish is the same call EmDash's toolbar makes.
+ * 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[];
-	status?: string;
+	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);
@@ -33,53 +69,98 @@ function el<K extends keyof HTMLElementTagNameMap>(tag: K, attrs: Record<string,
 	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]"));
 
-	// --- status pill -------------------------------------------------------
-	const status = el("div", { class: "tidy-status", hidden: "" });
+	// 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, publishBtn);
+	status.append(statusText, bizBtn, publishBtn);
 	document.body.append(status);
-	function setStatus(text: string, showPublish: boolean) {
-		statusText.textContent = text;
-		publishBtn.hidden = !showPublish;
-		status.hidden = false;
+	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;
-		setStatus("Publishing", true);
-		const r = await fetch(`${API}/content/${encodeURIComponent(config.collection)}/${encodeURIComponent(config.id)}/publish`, { method: "POST", credentials: "same-origin", headers: CSRF });
-		if (r.ok) location.reload();
+		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;
-			setStatus(`Publish failed (${r.status})`, true);
+			refreshStatus(`Publish failed for ${failed}`);
 		}
 	});
-	// Saves make a draft; Publish is the same call EmDash's toolbar makes and is always at hand.
-	setStatus(config.status === "draft" ? "Unpublished changes" : "Editing", true);
 
-	async function save(next: Block[]): Promise<void> {
-		setStatus("Saving", false);
-		const r = await fetch(`${API}/content/${encodeURIComponent(config.collection)}/${encodeURIComponent(config.id)}`, {
-			method: "PUT",
-			credentials: "same-origin",
-			headers: { ...CSRF, "content-type": "application/json" },
-			body: JSON.stringify({ data: { [config.field]: next } })
-		});
+	/**
+	 * 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) {
-			setStatus(`Save failed (${r.status})`, false);
-			return;
+			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();
 		}
-		value = next;
-		setStatus("Saved. Reloading", false);
+		refreshStatus("Saved. Reloading");
 		location.reload();
+		return true;
 	}
+	const saveBlocks = (next: Block[]) => saveEntry(config.collection, config.id, { [config.field]: next });
 
-	// --- chip on the hovered frame ------------------------------------------
+	// --- 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" });
@@ -91,44 +172,76 @@ export function start(config: Config): void {
 	document.body.append(chip);
 	let current: HTMLElement | null = null;
 
-	function showChip(frame: HTMLElement) {
-		current = frame;
-		const key = frame.dataset.tidyBlock ?? "";
-		const type = frame.dataset.tidyType ?? "";
-		chipLabel.textContent = schemaOf(type)?.label ?? type;
-		const r = frame.getBoundingClientRect();
+	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;
-		chip.hidden = false;
-		frames().forEach((f) => f.classList.toggle("tidy-active", f === frame));
+		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", () => showChip(f));
+		f.addEventListener("mouseenter", () => showBlockChip(f));
 		f.addEventListener("click", (e) => {
-			// Links and buttons inside a section keep working; clicking anything else edits it.
-			if ((e.target as HTMLElement).closest("a,button,input,select,textarea,label")) return;
+			// A record listed inside the section (a service card) handles its own click.
+			if ((e.target as HTMLElement).closest("[data-tidy-record]")) return;
+			if (isInteractive(e.target)) return;
 			e.preventDefault();
-			showChip(f);
-			openPanel(f.dataset.tidyBlock ?? "");
+			showBlockChip(f);
+			openBlock(f.dataset.tidyBlock ?? "");
 		});
 	}
-	chip.addEventListener("mouseenter", () => { if (current) current.classList.add("tidy-active"); });
-	bEdit.addEventListener("click", () => current && openPanel(current.dataset.tidyBlock ?? ""));
-	bUp.addEventListener("click", () => current && confirmSave(moveBlock(value, current.dataset.tidyBlock ?? "", -1)));
-	bDown.addEventListener("click", () => current && confirmSave(moveBlock(value, current.dataset.tidyBlock ?? "", 1)));
-	bRemove.addEventListener("click", () => {
+	for (const r of Array.from(document.querySelectorAll<HTMLElement>("[data-tidy-record]"))) {
+		const frame = r.parentElement?.closest<HTMLElement>("[data-tidy-block]") ?? null;
+		r.addEventListener("mouseenter", () => showRecordChip(r));
+		// Leaving a card inside a section hands the chip back to the section.
+		if (frame) r.addEventListener("mouseleave", () => showBlockChip(frame));
+		r.addEventListener("click", (e) => {
+			// Cards are often links; in edit mode a click edits instead of navigating.
+			if ((e.target as HTMLElement).closest("button,input,select,textarea,label")) return;
+			e.preventDefault();
+			e.stopPropagation();
+			showRecordChip(r);
+			void openRecord({ collection: r.dataset.tidyRecord ?? "", id: r.dataset.tidyRecordId ?? "", label: r.dataset.tidyRecordLabel ?? "" });
+		});
+	}
+	// The chip sits outside every frame; hovering it must not count as leaving.
+	chip.addEventListener("mouseenter", () => current?.classList.add("tidy-active"));
+	bEdit.addEventListener("click", () => {
 		if (!current) return;
-		if (confirm(`Remove this ${chipLabel.textContent} section?`)) void save(removeBlock(value, current.dataset.tidyBlock ?? ""));
+		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 && openAdd(current.dataset.tidyBlock ?? null));
-	function confirmSave(next: Block[]) {
-		if (next !== value) void save(next);
+	bAdd.addEventListener("click", () => current?.dataset.tidyBlock && openAdd(current.dataset.tidyBlock));
+	function moved(next: Block[]) {
+		if (next !== value) void saveBlocks(next);
 	}
 
-	// "Add a section" at the end of the block list.
 	const list = document.querySelector<HTMLElement>("[data-tidy-blocks]");
 	if (list) {
 		const add = el("button", { type: "button", class: "tidy-add-end", text: "+ Add a section" });
@@ -143,7 +256,81 @@ export function start(config: Config): void {
 		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") {
@@ -175,8 +362,19 @@ export function start(config: Config): void {
 		return wrap;
 	}
 
-	/** Builds the form for a block; returns a reader that yields the block's data from the inputs. */
-	function buildForm(schema: BlockSchema, data: Record<string, unknown>): { form: HTMLFormElement; read: () => Record<string, unknown> } {
+	/** 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) {
@@ -186,7 +384,7 @@ export function start(config: Config): void {
 				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(fieldInput(sub, row[sub.action_id], sub.action_id));
+					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);
@@ -198,24 +396,26 @@ export function start(config: Config): void {
 				box.append(items, add);
 				form.append(box);
 				repeaters.set(f.action_id, { field: f, items });
-			} else form.append(fieldInput(f, data[f.action_id], f.action_id));
+			} 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) => {
-						const row: Record<string, unknown> = {};
-						for (const sub of f.fields ?? []) {
-							const input = item.querySelector<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>(`[name="${sub.action_id}"]`);
-							row[sub.action_id] = coerce(sub, sub.type === "toggle" ? (input as HTMLInputElement | null)?.checked : input?.value);
-						}
-						return row;
-					});
+					out[f.action_id] = Array.from(rep.items.children).map((item) => readScope(item, f.fields ?? []));
 					continue;
 				}
-				const input = form.querySelector<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>(`:scope > .tidy-field [name="${f.action_id}"]`);
+				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;
@@ -223,44 +423,117 @@ export function start(config: Config): void {
 		return { form, read };
 	}
 
-	function openPanel(key: string) {
+	function openBlock(key: string) {
 		const block = value.find((b) => b._key === key);
 		const schema = block ? schemaOf(block._type) : undefined;
 		if (!block || !schema) return;
-		panel.replaceChildren();
-		const { form, read } = buildForm(schema, block);
+		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 save(updateBlock(value, key, read()));
+			void saveBlocks(updateBlock(value, key, read()));
 		});
 		form.append(el("div", { class: "tidy-panel-actions" }, [saveBtn, cancel]));
-		panel.append(el("header", { class: "tidy-panel-head" }, [el("h2", { text: schema.label }), ...(schema.description ? [el("p", { text: schema.description })] : [])]), form);
-		panel.hidden = false;
-		(form.querySelector("input,textarea,select") as HTMLElement | null)?.focus();
+		openPanel(schema.label, schema.description, form);
 	}
 
 	function openAdd(afterKey: string | null) {
-		panel.replaceChildren();
-		const head = el("header", { class: "tidy-panel-head" }, [el("h2", { text: "Add a section" })]);
 		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 save(insertBlock(value, s.type, afterKey, defaultsFor(s))));
+			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);
-		panel.append(head, listEl, el("div", { class: "tidy-panel-actions" }, [cancel]));
-		panel.hidden = false;
+		const body = el("div", {}, [listEl, el("div", { class: "tidy-panel-actions" }, [cancel])]);
+		openPanel("Add a section", undefined, body);
 	}
 
-	document.addEventListener("keydown", (e) => {
-		if (e.key === "Escape" && !panel.hidden) closePanel();
-	});
+	// --- 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");

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.4.0";
+export const VERSION = "0.5.1";
 export const PLUGIN_ID = "tidy-platform";