@obelism/content 0.13.0 → 0.15.0

package/dist/bridge.mjs

@@ -229,6 +229,12 @@ const INERT_METHODS = {
     createPage: ()=>Promise.reject(new Error('New pages are made on the site itself')),
     view: onlyWhileEditingSite,
     applyJson: onlyWhileEditingSite,
+    openForm: (_container, options = {})=>{
+        queueMicrotask(()=>options.onError?.('Only while signed in to edit on the site'));
+        return {
+            close: ()=>{}
+        };
+    },
     pages: onlyWhileEditingSite,
     openPage: ()=>{},
     undo: ()=>{},
@@ -495,6 +501,8 @@ const DEFAULT_PROMPT_LABELS = {
     send: 'Apply',
     undo: 'Undo',
     close: 'Close',
+    minimize: 'Minimize, to see the page',
+    expand: 'Expand',
     scopeEntry: 'Whole page',
     scopeBlock: 'Selected block',
     clearBlock: 'Edit the whole page instead',
@@ -518,16 +526,9 @@ const DEFAULT_PROMPT_LABELS = {
     created: 'Opening the new page…',
     modes: 'Edit with',
     modePrompt: 'Prompt',
-    modeJson: 'JSON',
-    json: 'The content as JSON',
-    jsonLoading: 'Loading the JSON…',
-    jsonReload: 'Reload the JSON',
-    jsonKept: 'Kept your unapplied JSON. Reload to see the current content.',
-    jsonInvalidAt: 'Not valid JSON at line {line}, column {column}',
-    jsonInvalid: 'Not valid JSON',
-    jsonNotObject: 'The JSON has to be an object of fields, like { "title": … }',
-    applied: 'Applied',
-    unchanged: 'Nothing changed',
+    form: 'Form',
+    formTitle: 'The content form',
+    formLoading: 'Opening the form…',
     pages: 'Pages',
     pagesSearch: 'Find a page',
     pagesLoading: 'Loading pages…',
@@ -543,7 +544,8 @@ const ICONS = {
     block: '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M7 8h10"/><path d="M7 12h6"/>',
     undo: '<path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/>',
     close: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
-    reload: '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>',
+    minimize: '<path d="m6 9 6 6 6-6"/>',
+    expand: '<path d="m18 15-6-6-6 6"/>',
     chevrons: '<path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/>',
     search: '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
     check: '<path d="M20 6 9 17l-5-5"/>',
@@ -648,13 +650,13 @@ textarea {
 	font-size: 16px; line-height: 1.6; color: rgb(var(--theme-foreground-rgb));
 }
 textarea::placeholder { color: rgb(var(--theme-foreground-muted-rgb)); }
-/* JSON: a plain code editor, taller, scrolling instead of wrapping. */
-textarea.code {
-	height: 40vh; min-height: 160px; max-height: 50vh; overflow: auto; resize: vertical;
-	white-space: pre; overflow-wrap: normal; tab-size: 2;
-	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
-	font-size: 13px; line-height: 1.55;
+/* Form: the CMS's entry form, edited live. */
+.form { padding: 12px 12px 0; }
+.form iframe {
+	display: block; width: 100%; height: min(560px, 60vh); border: none; border-radius: 12px;
+	background: rgb(var(--theme-background-actions-rgb) / .45);
 }
+.form.loading iframe { visibility: hidden; }
 /* New page: where it goes, above what it is for. */
 .path {
 	display: flex; align-items: center; gap: 10px; padding: 16px 22px 0;
@@ -698,7 +700,7 @@ button.chip:disabled { opacity: .5; }
 .icon-button.primary { background: rgb(var(--theme-accent-rgb)); color: #fff; }
 .icon-button.primary:hover:not(:disabled) { background: rgb(var(--theme-accent-rgb)); color: #fff; opacity: .88; }
 .icon-button.primary:disabled { opacity: .35; }
-/* Prompt or JSON: two small pills in one track. */
+/* Prompt or Form: two small pills in one track. */
 .modes {
 	display: inline-flex; flex: none; gap: 2px; padding: 2px; border-radius: var(--border-radius-pill);
 	border: 1px solid rgb(var(--theme-border-rgb) / .2); background: rgb(var(--theme-background-actions-rgb) / .6);
@@ -781,101 +783,6 @@ const icon = (doc, name)=>{
     span.innerHTML = `<svg viewBox="0 0 24 24">${ICONS[name]}</svg>`;
     return span;
 };
-// Where `text` stops being JSON: the offset of the first character that
-// doesn't fit, or -1 when it is JSON. JSON.parse's errors don't all say
-// where (V8's "Unexpected token" doesn't, Safari's never do).
-const jsonErrorAt = (text)=>{
-    let i = 0;
-    const fail = ()=>{
-        throw i;
-    };
-    const space = ()=>{
-        while(i < text.length && ' \t\n\r'.includes(text[i]))i++;
-    };
-    const string = ()=>{
-        i++;
-        while(i < text.length){
-            const char = text[i];
-            if (char === '"') {
-                i++;
-                return;
-            }
-            if (char === '\\') {
-                const next = text[i + 1] ?? '';
-                if (next === 'u' && /^[\da-f]{4}$/i.test(text.slice(i + 2, i + 6))) {
-                    i += 6;
-                } else if (next !== '' && '"\\/bfnrt'.includes(next)) {
-                    i += 2;
-                } else {
-                    i++;
-                    fail();
-                }
-            } else if (char < ' ') {
-                fail();
-            } else {
-                i++;
-            }
-        }
-        fail();
-    };
-    const items = (close, item)=>{
-        i++;
-        space();
-        if (text[i] === close) {
-            i++;
-            return;
-        }
-        for(;;){
-            item();
-            space();
-            if (text[i] === close) {
-                i++;
-                return;
-            }
-            if (text[i] !== ',') fail();
-            i++;
-        }
-    };
-    const value = ()=>{
-        space();
-        const char = text[i] ?? '';
-        if (char === '{') {
-            return items('}', ()=>{
-                space();
-                if (text[i] !== '"') fail();
-                string();
-                space();
-                if (text[i] !== ':') fail();
-                i++;
-                value();
-            });
-        }
-        if (char === '[') return items(']', value);
-        if (char === '"') return string();
-        for (const word of [
-            'true',
-            'false',
-            'null'
-        ]){
-            if (text.startsWith(word, i)) {
-                i += word.length;
-                return;
-            }
-        }
-        const number = /^-?(0|[1-9]\d*)(\.\d+)?([eE][+-]?\d+)?/.exec(text.slice(i));
-        if (!number) return fail();
-        i += number[0].length;
-    };
-    try {
-        value();
-        space();
-        if (i < text.length) fail();
-        return -1;
-    } catch (at) {
-        if (typeof at !== 'number') throw at;
-        return Math.min(at, text.length);
-    }
-};
 // Mounts the box on the page; returns a function that removes it.
 const mountPromptBox = (doc, bridge, options = {})=>{
     const labels = {
@@ -919,14 +826,10 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         rows: 1
     });
     input.setAttribute('aria-label', labels.open);
-    // JSON mode (on the site): the entry or block as JSON, edited by hand.
-    const code = element(doc, 'textarea', {
-        className: 'code',
-        spellcheck: false,
-        autocomplete: 'off'
+    // Form mode (on the site): the CMS's form, mounted while shown.
+    const formBox = element(doc, 'div', {
+        className: 'form'
     });
-    code.setAttribute('aria-label', labels.json);
-    code.setAttribute('autocapitalize', 'off');
     // What the prompt acts on: the whole page, or the selected block with a
     // way back to the page.
     const pageIcon = icon(doc, 'page');
@@ -945,7 +848,7 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         className: 'action chip',
         type: 'button'
     }, icon(doc, 'undo'), labels.undo);
-    // Prompt or JSON (on the site).
+    // Prompt or Form (on the site).
     const modeButton = (text)=>{
         const button = element(doc, 'button', {
             type: 'button',
@@ -955,18 +858,12 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         return button;
     };
     const promptMode = modeButton(labels.modePrompt);
-    const jsonMode = modeButton(labels.modeJson);
+    const formMode = modeButton(labels.form);
     const modes = element(doc, 'span', {
         className: 'modes'
-    }, promptMode, jsonMode);
+    }, promptMode, formMode);
     modes.setAttribute('role', 'group');
     modes.setAttribute('aria-label', labels.modes);
-    const reload = element(doc, 'button', {
-        className: 'icon-button',
-        type: 'button',
-        title: labels.jsonReload
-    }, icon(doc, 'reload'));
-    reload.setAttribute('aria-label', labels.jsonReload);
     // New page (on the site, for people who may add pages): the scope becomes
     // the new page, with a way back, and a path field shows above the prompt.
     const newPage = element(doc, 'button', {
@@ -1001,6 +898,14 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         title: labels.close
     }, icon(doc, 'close'));
     close.setAttribute('aria-label', labels.close);
+    // Minimized, only the toolbar and footer show, so a short page stays in
+    // view; the form stays mounted (and its edits) meanwhile.
+    const minimizeIcon = icon(doc, 'minimize');
+    const expandIcon = icon(doc, 'expand');
+    const minimize = element(doc, 'button', {
+        className: 'icon-button',
+        type: 'button'
+    }, minimizeIcon, expandIcon);
     const send = element(doc, 'button', {
         className: 'action primary icon-button',
         type: 'submit'
@@ -1009,13 +914,14 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         textContent: labels.send
     }), icon(doc, 'send'));
     send.title = labels.send;
+    const divider = element(doc, 'span', {
+        className: 'divider'
+    });
     const toolbar = element(doc, 'div', {
         className: 'toolbar'
     }, scope, newScope, modes, undo, newPage, element(doc, 'span', {
         className: 'spacer'
-    }), reload, close, element(doc, 'span', {
-        className: 'divider'
-    }), send);
+    }), minimize, close, divider, send);
     // The pages (on the site): a chip naming this page, opening a search
     // and a list of every page in place of the prompt.
     const pageChipText = element(doc, 'span', {
@@ -1083,7 +989,7 @@ const mountPromptBox = (doc, bridge, options = {})=>{
     }), signOut, save, publish);
     const panel = element(doc, 'form', {
         className: 'panel'
-    }, status, pathRow, input, code, toolbar, pagesSection, footer);
+    }, status, pathRow, input, formBox, toolbar, pagesSection, footer);
     const root = element(doc, 'div', {
         className: 'root'
     }, element(doc, 'div', {
@@ -1093,17 +999,14 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         textContent: CSS
     }), root);
     let open = false;
+    let minimized = false;
     let creating = false;
     let message = null;
-    // JSON mode: the text as last loaded, and what it is of (the block's
-    // uid, null for the whole entry). `seenUid` is the selection last loaded
-    // for: a new one loads its JSON, and undefined loads it again.
-    let json = false;
-    let loaded = '';
-    let viewUid = null;
-    let seenUid;
-    let loadingView = false;
-    let viewRequest = 0;
+    // Form mode, and the form while mounted: a fresh one (and one-time
+    // address) every time it shows.
+    let form = false;
+    let formHandle = null;
+    let formLoading = false;
     // The pages, fetched once the panel opens and kept; `active` is the
     // option arrow keys are on.
     let picking = false;
@@ -1130,40 +1033,50 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         const onlyNew = pageless && canCreate;
         if (!canCreate) creating = false;
         if (onlyNew) creating = true;
-        if (creating || pageless) json = false;
+        if (creating || pageless || !site) form = false;
+        // The form is there only while shown in the open panel.
+        const showForm = open && available && form;
+        if (showForm && !formHandle) mountForm();
+        else if (!showForm && formHandle) unmountForm();
         pillText.textContent = onlyNew ? labels.newPage : labels.open;
         cancelNew.hidden = onlyNew;
         scope.hidden = creating;
         newScope.hidden = !creating;
-        newPage.hidden = creating || json || !canCreate;
+        newPage.hidden = creating || form || !canCreate;
         newPage.disabled = busy;
-        pathRow.hidden = !creating || picking;
+        if (minimized) picking = false;
+        pathRow.hidden = !creating || picking || minimized;
         pathInput.disabled = busy;
-        input.hidden = json || picking;
-        code.hidden = !json || picking;
+        input.hidden = form || picking || minimized;
+        formBox.hidden = !form || picking || minimized;
+        formBox.classList.toggle('loading', formLoading);
         toolbar.hidden = picking;
         pagesSection.hidden = !picking;
         input.placeholder = creating ? labels.newPagePlaceholder : labels.placeholder;
-        // In JSON mode the scope is what the JSON is of.
-        const scopeUid = json ? viewUid : state.selectedUid;
-        scopeText.textContent = scopeUid ? labels.scopeBlock : labels.scopeEntry;
+        scopeText.textContent = state.selectedUid ? labels.scopeBlock : labels.scopeEntry;
         clearBlock.hidden = !state.selectedUid;
-        pageIcon.hidden = !!scopeUid;
-        blockIcon.hidden = !scopeUid;
-        modes.hidden = !site || creating || pageless;
-        promptMode.setAttribute('aria-pressed', String(!json));
-        jsonMode.setAttribute('aria-pressed', String(json));
+        pageIcon.hidden = !!state.selectedUid;
+        blockIcon.hidden = !state.selectedUid;
+        // A CMS from before the form doesn't offer it.
+        modes.hidden = !site || creating || pageless || !state.features.includes('form');
+        promptMode.setAttribute('aria-pressed', String(!form));
+        formMode.setAttribute('aria-pressed', String(form));
         modes.querySelectorAll('button').forEach((button)=>{
-            button.disabled = busy || loadingView;
+            button.disabled = busy;
         });
-        reload.hidden = !json;
-        reload.disabled = busy || loadingView;
         undo.hidden = creating || !state.canUndo;
-        undo.disabled = busy || loadingView;
-        const text = json ? code.value : input.value;
-        send.disabled = busy || loadingView || text.trim() === '' || creating && pathInput.value.trim() === '';
+        undo.disabled = busy;
+        // The form applies edits as they are made.
+        send.hidden = form || minimized;
+        divider.hidden = form || minimized;
+        const toggleLabel = minimized ? labels.expand : labels.minimize;
+        minimize.title = toggleLabel;
+        minimize.setAttribute('aria-label', toggleLabel);
+        minimize.setAttribute('aria-expanded', String(!minimized));
+        minimizeIcon.hidden = minimized;
+        expandIcon.hidden = !minimized;
+        send.disabled = busy || input.value.trim() === '' || creating && pathInput.value.trim() === '';
         input.disabled = busy;
-        code.disabled = busy || loadingView;
         save.hidden = !state.features.includes('save') || pageless;
         save.disabled = busy || !state.unsaved;
         save.textContent = state.saving ? labels.saving : labels.save;
@@ -1176,141 +1089,57 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         pageChip.hidden = !site;
         pageChip.setAttribute('aria-expanded', String(picking));
         pageChipText.textContent = pages?.find(({ entryId })=>entryId === bridge.entryId)?.name ?? labels.pages;
-        const working = state.prompting || loadingView;
-        const note = state.prompting ? creating ? labels.creating : labels.working : loadingView ? labels.jsonLoading : message?.text ?? (site && !creating && !picking && !state.selectedUid ? labels.selectHint : '');
+        const loadingForm = form && formLoading && !picking;
+        const working = state.prompting || loadingForm;
+        const note = state.prompting ? creating ? labels.creating : labels.working : loadingForm ? labels.formLoading : message?.text ?? (site && !creating && !picking && !state.selectedUid ? labels.selectHint : '');
         status.textContent = note;
-        status.hidden = !note;
-        status.className = `status${working ? ' working' : ''}${!busy && !loadingView && message?.error ? ' error' : ''}`;
-        // A new selection while editing JSON (or a reload asked for): its
-        // JSON, after this render.
-        if (open && json && !picking && state.selectedUid !== seenUid) {
-            seenUid = state.selectedUid;
-            queueMicrotask(()=>void loadView(false));
-        }
+        status.hidden = !note || minimized;
+        status.className = `status${working ? ' working' : ''}${!busy && !loadingForm && message?.error ? ' error' : ''}`;
     };
     const refresh = ()=>render(bridge.getState());
     const grow = ()=>{
         input.style.height = 'auto';
         input.style.height = `${input.scrollHeight}px`;
     };
-    // Loads the JSON of the selection. Unless `force`, keeps text edited
-    // since the last load, with a note. True once loaded.
-    const loadView = async (force)=>{
-        const uid = bridge.getState().selectedUid;
-        seenUid = uid;
-        if (!force && code.value !== loaded) {
-            message = {
-                text: labels.jsonKept,
-                error: false
-            };
-            refresh();
-            return false;
-        }
-        const request = ++viewRequest;
-        loadingView = true;
-        message = null;
-        refresh();
-        try {
-            const view = await bridge.view({
-                uid
-            });
-            if (request !== viewRequest) return false;
-            loaded = `${JSON.stringify(view, null, 2)}\n`;
-            code.value = loaded;
-            code.scrollTop = 0;
-            viewUid = uid;
-            return true;
-        } catch (error) {
-            if (request === viewRequest) message = failure(error);
-            return false;
-        } finally{
-            if (request === viewRequest) {
-                loadingView = false;
+    // Callbacks come later (the address is fetched first), never during a
+    // render.
+    const mountForm = ()=>{
+        formLoading = true;
+        formBox.classList.add('loading');
+        const handle = bridge.openForm(formBox, {
+            title: labels.formTitle,
+            onReady: ()=>{
+                if (formHandle !== handle) return;
+                formLoading = false;
+                message = null;
+                refresh();
+            },
+            onError: (text)=>{
+                if (formHandle !== handle) return;
+                formLoading = false;
+                message = {
+                    text,
+                    error: true
+                };
                 refresh();
             }
-        }
-    };
-    // Loads the JSON again once rendered, keeping edited text.
-    const requestView = ()=>{
-        seenUid = undefined;
-        refresh();
-    };
-    const setJson = (next)=>{
-        if (json === next) return;
-        json = next;
-        message = null;
-        requestView();
-        (json ? code : input).focus();
+        });
+        formHandle = handle;
     };
-    // Where the text stops being JSON, as a line and column.
-    const parseProblem = (text, error)=>{
-        const offset = jsonErrorAt(text);
-        if (offset < 0) {
-            const reason = error instanceof Error ? error.message : String(error);
-            return {
-                text: `${labels.jsonInvalid}: ${reason}`
-            };
-        }
-        const before = text.slice(0, offset);
-        const line = before.split('\n').length;
-        const column = offset - before.lastIndexOf('\n');
-        return {
-            text: labels.jsonInvalidAt.replace('{line}', String(line)).replace('{column}', String(column)),
-            offset
-        };
+    const unmountForm = ()=>{
+        formHandle?.close();
+        formHandle = null;
+        formLoading = false;
     };
-    const applyJson = async ()=>{
-        const text = code.value;
-        if (!text.trim() || bridge.getState().prompting || loadingView) return;
-        let changes;
-        try {
-            changes = JSON.parse(text);
-        } catch (error) {
-            const problem = parseProblem(text, error);
-            message = {
-                text: problem.text,
-                error: true
-            };
-            refresh();
-            code.focus();
-            if (problem.offset !== undefined) {
-                code.setSelectionRange(problem.offset, problem.offset);
-            }
-            return;
-        }
-        if (!changes || typeof changes !== 'object' || Array.isArray(changes)) {
-            message = {
-                text: labels.jsonNotObject,
-                error: true
-            };
-            return refresh();
-        }
+    const setForm = (next)=>{
+        if (form === next) return;
+        form = next;
         message = null;
-        try {
-            const { changed, view } = await bridge.applyJson(changes, {
-                uid: viewUid
-            });
-            // What the CMS made of it, from now on what's edited: in the
-            // answer, or asked for (a CMS from before `view` in it).
-            if (view) {
-                ++viewRequest;
-                loaded = `${JSON.stringify(view, null, 2)}\n`;
-                code.value = loaded;
-            }
-            if (view || await loadView(true)) {
-                message = {
-                    text: changed.length > 0 ? labels.applied : labels.unchanged,
-                    error: false
-                };
-            }
-        } catch (error) {
-            message = failure(error);
-        }
         refresh();
-        code.focus();
+        if (!form) input.focus();
     };
     const submit = async ()=>{
-        if (json) return applyJson();
+        if (form) return;
         const prompt = input.value.trim();
         if (!prompt || bridge.getState().prompting) return;
         message = null;
@@ -1427,11 +1256,13 @@ const mountPromptBox = (doc, bridge, options = {})=>{
     };
     const setOpen = (next)=>{
         open = next;
-        if (!open) picking = false;
+        if (!open) {
+            picking = false;
+            minimized = false;
+        }
         refresh();
         if (site) bridge.setSelecting(open && !creating);
         if (open && site) void fetchPages();
-        if (open && json) requestView();
     };
     const setCreating = (next)=>{
         creating = next;
@@ -1456,9 +1287,14 @@ const mountPromptBox = (doc, bridge, options = {})=>{
     };
     pill.addEventListener('click', ()=>{
         setOpen(true);
-        (creating ? pathInput : json ? code : input).focus();
+        if (!form) (creating ? pathInput : input).focus();
     });
     close.addEventListener('click', ()=>setOpen(false));
+    minimize.addEventListener('click', ()=>{
+        minimized = !minimized;
+        refresh();
+        if (!minimized) (form ? minimize : input).focus();
+    });
     save.addEventListener('click', ()=>void store('save'));
     publish.addEventListener('click', ()=>void store('publish'));
     signOut.addEventListener('click', ()=>bridge.signOut());
@@ -1466,12 +1302,8 @@ const mountPromptBox = (doc, bridge, options = {})=>{
     clearBlock.addEventListener('click', ()=>bridge.select(null));
     newPage.addEventListener('click', ()=>setCreating(true));
     cancelNew.addEventListener('click', ()=>setCreating(false));
-    promptMode.addEventListener('click', ()=>setJson(false));
-    jsonMode.addEventListener('click', ()=>setJson(true));
-    reload.addEventListener('click', ()=>{
-        void loadView(true);
-        code.focus();
-    });
+    promptMode.addEventListener('click', ()=>setForm(false));
+    formMode.addEventListener('click', ()=>setForm(true));
     pageChip.addEventListener('click', ()=>setPicking(!picking));
     pathInput.addEventListener('input', refresh);
     pathInput.addEventListener('keydown', (event)=>{
@@ -1505,7 +1337,6 @@ const mountPromptBox = (doc, bridge, options = {})=>{
     undo.addEventListener('click', ()=>{
         message = null;
         bridge.undo();
-        if (json) requestView();
     });
     panel.addEventListener('submit', (event)=>{
         event.preventDefault();
@@ -1523,37 +1354,100 @@ const mountPromptBox = (doc, bridge, options = {})=>{
             setOpen(false);
         }
     });
-    code.addEventListener('input', refresh);
-    code.addEventListener('keydown', (event)=>{
-        // Enter is a new line here; Ctrl or Cmd + Enter applies.
-        if (event.key === 'Enter' && (event.ctrlKey || event.metaKey) && !event.isComposing) {
-            event.preventDefault();
-            void submit();
-        } else if (event.key === 'Tab' && !event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey) {
-            // A tab, not the next button (Shift + Tab still leaves). Through
-            // execCommand where it works, so the browser's undo has it.
-            event.preventDefault();
-            let inserted = false;
-            try {
-                inserted = doc.execCommand('insertText', false, '\t');
-            } catch  {}
-            if (!inserted) {
-                code.setRangeText('\t', code.selectionStart, code.selectionEnd, 'end');
-            }
-            refresh();
-        } else if (event.key === 'Escape') {
-            setOpen(false);
-        }
-    });
     const unsubscribe = bridge.on('change', render);
     refresh();
     doc.body.appendChild(host);
     return ()=>{
         unsubscribe();
+        unmountForm();
         host.remove();
     };
 };
 
+// The CMS's entry form in an iframe, for editing on the site (the prompt
+// box's Form mode). The CMS renders the form at a one-time URL (`/site/form#
+// code=…`, from the site's `/cms/api/form`); this keeps it in step with the
+// bridge's in-memory content.
+//
+// Messages are only exchanged with the URL's origin, and only with the
+// iframe's window:
+// - form → bridge: { source: 'obelism-content-form', type: 'ready' |
+//   'change' | 'error' | 'height', content?, message?, height? } —
+//   `change` carries the whole entry content after an edit, `height` the
+//   form's own height in px, which the iframe takes (up to 60vh)
+// - bridge → form: { source: 'obelism-content-bridge', type: 'content',
+//   entryId, content, locale, selectedUid }
+const FORM_SOURCE = 'obelism-content-form';
+// How long the form may take to say it is ready.
+const FORM_READY_TIMEOUT_MS = 30_000;
+const isObject = (value)=>!!value && typeof value === 'object' && !Array.isArray(value);
+// Mounts the form at `url` in `container`. The URL is single use: mount a
+// fresh one every time.
+const mountFormFrame = (win, container, url, title, handlers)=>{
+    let parsed = null;
+    try {
+        parsed = new URL(url);
+    } catch  {}
+    if (!parsed || !/^https?:$/.test(parsed.protocol)) {
+        throw new Error('Obelism Content sent no form to open');
+    }
+    const origin = parsed.origin;
+    const iframe = container.ownerDocument.createElement('iframe');
+    iframe.title = title;
+    iframe.src = url;
+    let ready = false;
+    let latest = null;
+    const post = ()=>{
+        if (!ready || !latest) return;
+        iframe.contentWindow?.postMessage({
+            source: BRIDGE_SOURCE,
+            type: 'content',
+            ...latest
+        }, origin);
+    };
+    const timer = setTimeout(()=>{
+        if (!ready) handlers.onError('The form did not open');
+    }, FORM_READY_TIMEOUT_MS);
+    const onMessage = (event)=>{
+        if (event.origin !== origin || !iframe.contentWindow || event.source !== iframe.contentWindow) {
+            return;
+        }
+        const data = event.data;
+        if (!data || data.source !== FORM_SOURCE) return;
+        if (data.type === 'ready') {
+            // Again after the form reloads itself: it gets the content again.
+            ready = true;
+            clearTimeout(timer);
+            handlers.onReady();
+            post();
+        } else if (data.type === 'change' && isObject(data.content)) {
+            handlers.onChange(data.content, typeof data.entryId === 'string' ? data.entryId : undefined);
+        } else if (data.type === 'height') {
+            const height = data.height;
+            if (typeof height === 'number' && Number.isFinite(height)) {
+                // A short page's form is short; a long one scrolls inside.
+                const px = Math.round(Math.min(Math.max(height, 80), 4000));
+                iframe.style.height = `min(${px}px, 60vh)`;
+            }
+        } else if (data.type === 'error') {
+            handlers.onError(typeof data.message === 'string' && data.message ? data.message : 'The form failed');
+        }
+    };
+    win.addEventListener('message', onMessage);
+    container.appendChild(iframe);
+    return {
+        show (content) {
+            latest = content;
+            post();
+        },
+        destroy () {
+            clearTimeout(timer);
+            win.removeEventListener('message', onMessage);
+            iframe.remove();
+        }
+    };
+};
+
 // The bridge on a site signed in to edit (`/cms/login`, from
 // @obelism/content/site), outside the visual editor. It plays the editor's
 // part itself: it keeps the changed content in memory, asks the site's
@@ -1563,9 +1457,10 @@ const mountPromptBox = (doc, bridge, options = {})=>{
 //
 // What it edits is the page's entry — the outermost element marked with
 // `editable(entry)` — or, for a selected block, the entry around that block.
-// Besides prompts it edits JSON (`view`, then `applyJson`: the entry as a
-// language model sees it, changed by hand), and lists the space's pages to
-// go to one.
+// Besides prompts it shows the CMS's own entry form (`openForm`, an iframe
+// kept in step with the content here, see formFrame.ts), edits JSON (`view`,
+// then `applyJson`: the raw alternative), and lists the space's pages to go
+// to one.
 // The base path of the site's handler while signed in to edit, else null.
 const readSiteEditing = (doc)=>{
     for (const part of doc.cookie.split(';')){
@@ -1581,6 +1476,11 @@ const readSiteEditing = (doc)=>{
     return null;
 };
 const same = (a, b)=>JSON.stringify(a) === JSON.stringify(b);
+// Edits in the form further apart than this are separate undo steps.
+const FORM_BURST_MS = 1000;
+// How long the page waits for the form's edits to settle before it shows
+// them.
+const FORM_RENDER_MS = 300;
 const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}` } = {})=>{
     const doc = win.document;
     const emitter = createEmitter();
@@ -1591,6 +1491,11 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}` } = {})
     // Entries changed here since the last publish.
     const touched = new Set();
     let session = null;
+    // The open form's, if any; and when the form last changed content, for
+    // undo steps (-Infinity: the next edit starts a new step).
+    let closeForm = null;
+    let lastFormEdit = -Infinity;
+    const renderTimers = new Map();
     let state = INITIAL_STATE;
     const setState = (next)=>{
         state = {
@@ -1644,17 +1549,26 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}` } = {})
         const base = lang.split('-')[0] ?? '';
         return codes.includes(base) ? base : session.space.defaultLocale;
     };
+    // One request per entry at a time: a second would overwrite edits made
+    // while the first was out.
+    const loading = new Map();
     const load = async (entryId)=>{
         const loaded = working.get(entryId);
         if (loaded) return loaded;
-        const entry = await api(`entries/${encodeURIComponent(entryId)}`);
-        const fresh = {
-            content: entry.content,
-            saved: entry.content,
-            revision: entry.draftRevision
-        };
-        working.set(entryId, fresh);
-        return fresh;
+        let pending = loading.get(entryId);
+        if (!pending) {
+            pending = api(`entries/${encodeURIComponent(entryId)}`).then((entry)=>{
+                const fresh = working.get(entryId) ?? {
+                    content: entry.content,
+                    saved: entry.content,
+                    revision: entry.draftRevision
+                };
+                working.set(entryId, fresh);
+                return fresh;
+            }).finally(()=>loading.delete(entryId));
+            loading.set(entryId, pending);
+        }
+        return pending;
     };
     // The entry a prompt or JSON acts on, for the block `uid` (the selected
     // one when left out).
@@ -1693,6 +1607,15 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}` } = {})
         });
         win.requestAnimationFrame(()=>highlight(state.selectedUid));
     };
+    const logError = (error)=>console.error('[@obelism/content bridge]', error);
+    // Renders once the form's edits settle.
+    const renderSoon = (entryId)=>{
+        clearTimeout(renderTimers.get(entryId));
+        renderTimers.set(entryId, setTimeout(()=>{
+            renderTimers.delete(entryId);
+            void render(entryId).catch(logError);
+        }, FORM_RENDER_MS));
+    };
     const afterStore = (event)=>{
         emitter.emit(event, {});
         if (emitter.listeners.update.size === 0) win.location.reload();
@@ -1709,6 +1632,7 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}` } = {})
             touched.add(entryId);
         }
         history.length = 0;
+        lastFormEdit = -Infinity;
         refreshUnsaved();
     };
     const has = (feature)=>state.features.includes(feature);
@@ -1741,6 +1665,7 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}` } = {})
                     entryId,
                     content: entry.content
                 });
+                lastFormEdit = -Infinity;
                 entry.content = result.content;
                 refreshUnsaved();
                 await render(entryId);
@@ -1819,6 +1744,7 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}` } = {})
                         entryId,
                         content: entry.content
                     });
+                    lastFormEdit = -Infinity;
                     entry.content = result.content;
                     refreshUnsaved();
                     await render(entryId);
@@ -1835,6 +1761,91 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}` } = {})
                 });
             }
         },
+        openForm (container, options = {}) {
+            const { title = 'Content form', onReady, onError } = options;
+            closeForm?.();
+            let closed = false;
+            let frame = null;
+            // What the form was last sent, or sent back itself.
+            let shown = null;
+            let unsubscribe = ()=>{};
+            const fail = (error)=>{
+                if (!closed) onError?.(error instanceof Error ? error.message : String(error));
+            };
+            const close = ()=>{
+                if (closed) return;
+                closed = true;
+                unsubscribe();
+                frame?.destroy();
+                if (closeForm === close) closeForm = null;
+            };
+            closeForm = close;
+            // Sends the form the entry for the selection, when anything of it
+            // changed: prompts, undo, a reload after saving, the selection.
+            const show = ()=>{
+                if (closed || !frame) return;
+                const entryId = entryFor(state.selectedUid);
+                if (!entryId) return;
+                const entry = working.get(entryId);
+                if (!entry) {
+                    load(entryId).then(show, fail);
+                    return;
+                }
+                const next = {
+                    entryId,
+                    content: entry.content,
+                    locale: locale(),
+                    selectedUid: state.selectedUid
+                };
+                if (shown && shown.entryId === next.entryId && shown.content === next.content && shown.locale === next.locale && shown.selectedUid === next.selectedUid) {
+                    return;
+                }
+                shown = next;
+                frame.show(next);
+            };
+            const change = (content, from)=>{
+                const entryId = from ?? shown?.entryId;
+                const entry = entryId === undefined ? undefined : working.get(entryId);
+                if (closed || entryId === undefined || !entry || same(content, entry.content)) {
+                    return;
+                }
+                const now = Date.now();
+                if (now - lastFormEdit >= FORM_BURST_MS) {
+                    history.push({
+                        entryId,
+                        content: entry.content
+                    });
+                }
+                lastFormEdit = now;
+                entry.content = content;
+                // Not sent back: the form has it.
+                if (shown?.entryId === entryId) shown = {
+                    ...shown,
+                    content
+                };
+                refreshUnsaved();
+                renderSoon(entryId);
+            };
+            const start = async ()=>{
+                if (!has('form')) throw new Error('You may not edit content here');
+                await load(target(undefined).entryId);
+                // A fresh one every time: the address works once, for a minute.
+                const { url } = await api('form', {});
+                if (closed) return;
+                const address = typeof url === 'string' ? url : '';
+                frame = mountFormFrame(win, container, address, title, {
+                    onReady: ()=>onReady?.(),
+                    onChange: change,
+                    onError: (message)=>onError?.(message)
+                });
+                unsubscribe = emitter.on('change', show);
+                show();
+            };
+            start().catch(fail);
+            return {
+                close
+            };
+        },
         async pages () {
             const { pages } = await api('pages');
             const preferred = [
@@ -1872,9 +1883,10 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}` } = {})
             const last = history.pop();
             const entry = last && working.get(last.entryId);
             if (!last || !entry) return;
+            lastFormEdit = -Infinity;
             entry.content = last.content;
             refreshUnsaved();
-            void render(last.entryId).catch((error)=>console.error('[@obelism/content bridge]', error));
+            void render(last.entryId).catch(logError);
         },
         async save () {
             if (!has('save')) throw new Error('You may not edit content here');
@@ -1937,6 +1949,9 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}` } = {})
             });
         },
         destroy () {
+            closeForm?.();
+            renderTimers.forEach((timer)=>clearTimeout(timer));
+            renderTimers.clear();
             cleanup.splice(0).forEach((undo)=>undo());
         }
     };