@obelism/content 0.12.0 → 0.14.0

package/dist/bridge.mjs

@@ -222,10 +222,21 @@ const createEmitter = ()=>{
 };
 const inertPrompt = ()=>Promise.reject(new Error('Prompts only work inside the visual editor'));
 const onlyOnSite = ()=>Promise.reject(new Error('Save and publish in the visual editor itself'));
+const onlyWhileEditingSite = ()=>Promise.reject(new Error('Only while signed in to edit on the site'));
 // What every bridge without a feature does for it.
 const INERT_METHODS = {
     prompt: inertPrompt,
     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: ()=>{},
     save: onlyOnSite,
     publish: onlyOnSite,
@@ -510,7 +521,19 @@ const DEFAULT_PROMPT_LABELS = {
     path: 'Path',
     pathPlaceholder: '/pricing',
     creating: 'Writing the page…',
-    created: 'Opening the new page…'
+    created: 'Opening the new page…',
+    modes: 'Edit with',
+    modePrompt: 'Prompt',
+    form: 'Form',
+    formTitle: 'The content form',
+    formLoading: 'Opening the form…',
+    pages: 'Pages',
+    pagesSearch: 'Find a page',
+    pagesLoading: 'Loading pages…',
+    pagesEmpty: 'No pages match',
+    pageCurrent: 'This page',
+    pageDraft: 'Draft',
+    pageChanged: 'Changed'
 };
 // Icons (Lucide), drawn in the text colour.
 const ICONS = {
@@ -519,6 +542,9 @@ 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"/>',
+    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"/>',
     send: '<path d="M3.714 3.048a.498.498 0 0 0-.683.627l2.843 7.627a2 2 0 0 1 0 1.396l-2.842 7.627a.498.498 0 0 0 .682.627l18-8.5a.5.5 0 0 0 0-.904z"/><path d="M6 12h16"/>'
 };
 // Obelism's design tokens (obelism.studio/design.md), under their own names:
@@ -620,6 +646,13 @@ textarea {
 	font-size: 16px; line-height: 1.6; color: rgb(var(--theme-foreground-rgb));
 }
 textarea::placeholder { color: rgb(var(--theme-foreground-muted-rgb)); }
+/* 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;
@@ -663,6 +696,21 @@ 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 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);
+}
+.modes button {
+	height: 28px; padding: 0 12px; border-radius: var(--border-radius-pill); font-size: 13px;
+	color: rgb(var(--theme-foreground-muted-rgb));
+	transition: background-color .25s var(--ease-roll), color .25s var(--ease-roll);
+}
+.modes button:hover { color: rgb(var(--theme-foreground-rgb)); }
+.modes button[aria-pressed='true'] {
+	background: rgb(var(--theme-background-alt-rgb)); color: rgb(var(--theme-foreground-rgb));
+	box-shadow: 0 1px 2px rgb(var(--color-black-rgb) / .08);
+}
 .divider { width: 1px; height: 20px; background: rgb(var(--theme-border-rgb) / .3); margin: 0 4px; }
 
 /* On the site: storing the draft, and the way out. */
@@ -679,6 +727,38 @@ button.chip:disabled { opacity: .5; }
 	display: inline-block; width: 7px; height: 7px; border-radius: 50%;
 	background: rgb(var(--theme-accent-rgb)); margin-right: 8px;
 }
+
+/* The pages: a search above a list, in place of the prompt while open. */
+.page-chip { min-width: 0; max-width: 50%; gap: 6px; }
+.page-chip > span:not(.icon) { overflow: hidden; text-overflow: ellipsis; }
+.page-chip .icon:last-child { color: rgb(var(--theme-foreground-muted-rgb)); margin-right: -4px; }
+.page-chip .icon:last-child svg { width: 14px; height: 14px; }
+.pages { display: grid; gap: 8px; padding: 16px 12px 12px; }
+.search {
+	display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; margin: 0 4px;
+	border: 1px solid rgb(var(--theme-border-rgb) / .25); border-radius: var(--border-radius-pill);
+	background: rgb(var(--theme-background-actions-rgb) / .45); color: rgb(var(--theme-foreground-muted-rgb));
+	transition: border-color .25s var(--ease-roll);
+}
+.search:focus-within { border-color: rgb(var(--theme-accent-rgb)); }
+.search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: rgb(var(--theme-foreground-rgb)); }
+.search input::placeholder { color: rgb(var(--theme-foreground-muted-rgb)); }
+.options { list-style: none; padding: 0; max-height: min(300px, 40vh); overflow-y: auto; display: grid; gap: 2px; }
+.option {
+	display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; cursor: pointer;
+	transition: background-color .15s var(--ease-roll);
+}
+.option:hover, .option.active { background: rgb(var(--theme-background-actions-rgb) / .7); }
+.option-text { flex: 1; min-width: 0; display: grid; }
+.option-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.option-path { font-size: 12px; color: rgb(var(--theme-foreground-muted-rgb)); }
+.badge {
+	flex: none; font-size: 12px; padding: 1px 8px; border-radius: var(--border-radius-pill);
+	border: 1px solid rgb(var(--theme-border-rgb) / .3); color: rgb(var(--theme-foreground-muted-rgb));
+}
+.option .icon { color: rgb(var(--theme-accent-rgb)); }
+.empty { padding: 8px 12px; color: rgb(var(--theme-foreground-muted-rgb)); }
+.empty.error { color: var(--theme-error); }
 [hidden] { display: none !important; }
 `;
 const element = (doc, tag, props = {}, ...children)=>{
@@ -742,6 +822,10 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         rows: 1
     });
     input.setAttribute('aria-label', labels.open);
+    // Form mode (on the site): the CMS's form, mounted while shown.
+    const formBox = element(doc, 'div', {
+        className: 'form'
+    });
     // What the prompt acts on: the whole page, or the selected block with a
     // way back to the page.
     const pageIcon = icon(doc, 'page');
@@ -760,6 +844,22 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         className: 'action chip',
         type: 'button'
     }, icon(doc, 'undo'), labels.undo);
+    // Prompt or Form (on the site).
+    const modeButton = (text)=>{
+        const button = element(doc, 'button', {
+            type: 'button',
+            textContent: text
+        });
+        button.setAttribute('aria-pressed', 'false');
+        return button;
+    };
+    const promptMode = modeButton(labels.modePrompt);
+    const formMode = modeButton(labels.form);
+    const modes = element(doc, 'span', {
+        className: 'modes'
+    }, promptMode, formMode);
+    modes.setAttribute('role', 'group');
+    modes.setAttribute('aria-label', labels.modes);
     // 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', {
@@ -802,6 +902,52 @@ 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'
+    }), 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', {
+        textContent: labels.pages
+    });
+    const pageChip = element(doc, 'button', {
+        className: 'chip page-chip',
+        type: 'button',
+        title: labels.pages
+    }, icon(doc, 'page'), pageChipText, icon(doc, 'chevrons'));
+    pageChip.setAttribute('aria-haspopup', 'listbox');
+    pageChip.setAttribute('aria-expanded', 'false');
+    pageChip.setAttribute('aria-controls', 'obelism-pages');
+    const search = element(doc, 'input', {
+        type: 'text',
+        placeholder: labels.pagesSearch,
+        autocomplete: 'off',
+        spellcheck: false
+    });
+    search.setAttribute('role', 'combobox');
+    search.setAttribute('aria-label', labels.pagesSearch);
+    search.setAttribute('aria-autocomplete', 'list');
+    search.setAttribute('aria-expanded', 'true');
+    search.setAttribute('aria-controls', 'obelism-pages');
+    const optionList = element(doc, 'ul', {
+        className: 'options',
+        id: 'obelism-pages'
+    });
+    optionList.setAttribute('role', 'listbox');
+    optionList.setAttribute('aria-label', labels.pages);
+    const pagesNote = element(doc, 'p', {
+        className: 'empty'
+    });
+    const pagesSection = element(doc, 'div', {
+        className: 'pages'
+    }, element(doc, 'label', {
+        className: 'search'
+    }, icon(doc, 'search'), search), optionList, pagesNote);
     const unsaved = element(doc, 'span', {
         className: 'unsaved'
     });
@@ -826,18 +972,12 @@ const mountPromptBox = (doc, bridge, options = {})=>{
     });
     const footer = element(doc, 'div', {
         className: 'footer'
-    }, unsaved, element(doc, 'span', {
+    }, pageChip, unsaved, element(doc, 'span', {
         className: 'spacer'
     }), signOut, save, publish);
     const panel = element(doc, 'form', {
         className: 'panel'
-    }, status, pathRow, input, element(doc, 'div', {
-        className: 'toolbar'
-    }, scope, newScope, undo, newPage, element(doc, 'span', {
-        className: 'spacer'
-    }), close, element(doc, 'span', {
-        className: 'divider'
-    }), send), footer);
+    }, status, pathRow, input, formBox, toolbar, pagesSection, footer);
     const root = element(doc, 'div', {
         className: 'root'
     }, element(doc, 'div', {
@@ -849,6 +989,22 @@ const mountPromptBox = (doc, bridge, options = {})=>{
     let open = false;
     let creating = false;
     let message = null;
+    // 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;
+    let pages = null;
+    let pagesLoad = null;
+    let pagesError = null;
+    let active = 0;
+    const failure = (error)=>({
+            text: error instanceof Error ? error.message : String(error),
+            error: true
+        });
     const render = (state)=>{
         const available = state.features.includes('prompt');
         const storing = state.saving || state.publishing;
@@ -864,21 +1020,41 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         const onlyNew = pageless && canCreate;
         if (!canCreate) creating = false;
         if (onlyNew) creating = true;
+        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 || !canCreate;
+        newPage.hidden = creating || form || !canCreate;
         newPage.disabled = busy;
-        pathRow.hidden = !creating;
+        pathRow.hidden = !creating || picking;
         pathInput.disabled = busy;
+        input.hidden = form || picking;
+        formBox.hidden = !form || picking;
+        formBox.classList.toggle('loading', formLoading);
+        toolbar.hidden = picking;
+        pagesSection.hidden = !picking;
         input.placeholder = creating ? labels.newPagePlaceholder : labels.placeholder;
         scopeText.textContent = state.selectedUid ? labels.scopeBlock : labels.scopeEntry;
         clearBlock.hidden = !state.selectedUid;
         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;
+        });
         undo.hidden = creating || !state.canUndo;
         undo.disabled = busy;
+        // The form applies edits as they are made.
+        send.hidden = form;
+        divider.hidden = form;
         send.disabled = busy || input.value.trim() === '' || creating && pathInput.value.trim() === '';
         input.disabled = busy;
         save.hidden = !state.features.includes('save') || pageless;
@@ -890,17 +1066,60 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         signOut.hidden = !site;
         footer.hidden = !site;
         unsaved.hidden = !state.unsaved;
-        const text = state.prompting ? creating ? labels.creating : labels.working : message?.text ?? (site && !creating && !state.selectedUid ? labels.selectHint : '');
-        status.textContent = text;
-        status.hidden = !text;
-        status.className = `status${state.prompting ? ' working' : ''}${!busy && message?.error ? ' error' : ''}`;
+        pageChip.hidden = !site;
+        pageChip.setAttribute('aria-expanded', String(picking));
+        pageChipText.textContent = pages?.find(({ entryId })=>entryId === bridge.entryId)?.name ?? labels.pages;
+        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 && !loadingForm && message?.error ? ' error' : ''}`;
     };
     const refresh = ()=>render(bridge.getState());
     const grow = ()=>{
         input.style.height = 'auto';
         input.style.height = `${input.scrollHeight}px`;
     };
+    // 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();
+            }
+        });
+        formHandle = handle;
+    };
+    const unmountForm = ()=>{
+        formHandle?.close();
+        formHandle = null;
+        formLoading = false;
+    };
+    const setForm = (next)=>{
+        if (form === next) return;
+        form = next;
+        message = null;
+        refresh();
+        if (!form) input.focus();
+    };
     const submit = async ()=>{
+        if (form) return;
         const prompt = input.value.trim();
         if (!prompt || bridge.getState().prompting) return;
         message = null;
@@ -910,6 +1129,8 @@ const mountPromptBox = (doc, bridge, options = {})=>{
                 if (!path) return pathInput.focus();
                 // The bridge opens the new page; this shows until it does.
                 await bridge.createPage(path, prompt);
+                pages = null;
+                pagesLoad = null;
                 message = {
                     text: labels.created,
                     error: false
@@ -924,18 +1145,101 @@ const mountPromptBox = (doc, bridge, options = {})=>{
             input.value = '';
             grow();
         } catch (error) {
-            message = {
-                text: error instanceof Error ? error.message : String(error),
-                error: true
-            };
+            message = failure(error);
         }
         refresh();
         input.focus();
     };
+    const fetchPages = ()=>{
+        pagesLoad ??= bridge.pages().then((list)=>{
+            pages = list;
+            pagesError = null;
+            renderPages();
+            refresh();
+        }, (error)=>{
+            pagesLoad = null;
+            pagesError = failure(error).text;
+            renderPages();
+        });
+        return pagesLoad;
+    };
+    const matching = ()=>{
+        const query = search.value.trim().toLowerCase();
+        return (pages ?? []).filter((page)=>!query || page.name.toLowerCase().includes(query) || page.url.toLowerCase().includes(query) || `/${page.path}`.toLowerCase().includes(query));
+    };
+    const renderPages = ()=>{
+        const list = matching();
+        active = Math.max(0, Math.min(active, list.length - 1));
+        optionList.textContent = '';
+        list.forEach((page, index)=>{
+            const current = page.entryId === bridge.entryId;
+            const option = element(doc, 'li', {
+                className: `option${index === active ? ' active' : ''}`,
+                id: `obelism-page-${index}`
+            }, element(doc, 'span', {
+                className: 'option-text'
+            }, element(doc, 'span', {
+                textContent: page.name
+            }), element(doc, 'span', {
+                className: 'option-path',
+                textContent: page.url
+            })));
+            option.setAttribute('role', 'option');
+            option.setAttribute('aria-selected', String(index === active));
+            if (page.status !== 'published') {
+                option.appendChild(element(doc, 'span', {
+                    className: 'badge',
+                    textContent: page.status === 'draft' ? labels.pageDraft : labels.pageChanged
+                }));
+            }
+            if (current) {
+                option.setAttribute('aria-current', 'page');
+                const check = icon(doc, 'check');
+                check.removeAttribute('aria-hidden');
+                check.setAttribute('role', 'img');
+                check.setAttribute('aria-label', labels.pageCurrent);
+                option.appendChild(check);
+            }
+            option.addEventListener('click', ()=>choose(page));
+            optionList.appendChild(option);
+        });
+        const activeOption = optionList.children[active];
+        if (activeOption) {
+            search.setAttribute('aria-activedescendant', activeOption.id);
+            activeOption.scrollIntoView?.({
+                block: 'nearest'
+            });
+        } else {
+            search.removeAttribute('aria-activedescendant');
+        }
+        const note = pagesError ?? (pages ? '' : labels.pagesLoading);
+        pagesNote.textContent = note || (list.length === 0 ? labels.pagesEmpty : '');
+        pagesNote.hidden = !pagesNote.textContent;
+        pagesNote.className = `empty${pagesError ? ' error' : ''}`;
+    };
+    const setPicking = (next)=>{
+        picking = next;
+        message = null;
+        if (picking) {
+            search.value = '';
+            active = Math.max(0, (pages ?? []).findIndex(({ entryId })=>entryId === bridge.entryId));
+            void fetchPages();
+            renderPages();
+        }
+        refresh();
+        (picking ? search : pageChip).focus();
+    };
+    const choose = (page)=>{
+        if (page.entryId === bridge.entryId) return setPicking(false);
+        // Asks first when changes aren't saved; stays here if told no.
+        bridge.openPage(page);
+    };
     const setOpen = (next)=>{
         open = next;
+        if (!open) picking = false;
         refresh();
         if (site) bridge.setSelecting(open && !creating);
+        if (open && site) void fetchPages();
     };
     const setCreating = (next)=>{
         creating = next;
@@ -954,16 +1258,13 @@ const mountPromptBox = (doc, bridge, options = {})=>{
                 error: false
             };
         } catch (error) {
-            message = {
-                text: error instanceof Error ? error.message : String(error),
-                error: true
-            };
+            message = failure(error);
         }
         refresh();
     };
     pill.addEventListener('click', ()=>{
         setOpen(true);
-        (creating ? pathInput : input).focus();
+        if (!form) (creating ? pathInput : input).focus();
     });
     close.addEventListener('click', ()=>setOpen(false));
     save.addEventListener('click', ()=>void store('save'));
@@ -973,6 +1274,9 @@ const mountPromptBox = (doc, bridge, options = {})=>{
     clearBlock.addEventListener('click', ()=>bridge.select(null));
     newPage.addEventListener('click', ()=>setCreating(true));
     cancelNew.addEventListener('click', ()=>setCreating(false));
+    promptMode.addEventListener('click', ()=>setForm(false));
+    formMode.addEventListener('click', ()=>setForm(true));
+    pageChip.addEventListener('click', ()=>setPicking(!picking));
     pathInput.addEventListener('input', refresh);
     pathInput.addEventListener('keydown', (event)=>{
         if (event.key === 'Enter' && !event.isComposing) {
@@ -982,6 +1286,26 @@ const mountPromptBox = (doc, bridge, options = {})=>{
             setOpen(false);
         }
     });
+    search.addEventListener('input', ()=>{
+        active = 0;
+        renderPages();
+    });
+    search.addEventListener('keydown', (event)=>{
+        const count = optionList.children.length;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            if (count === 0) return;
+            active = (active + (event.key === 'ArrowDown' ? 1 : -1) + count) % count;
+            renderPages();
+        } else if (event.key === 'Enter' && !event.isComposing) {
+            event.preventDefault();
+            const page = matching()[active];
+            if (page) choose(page);
+        } else if (event.key === 'Escape') {
+            event.preventDefault();
+            setPicking(false);
+        }
+    });
     undo.addEventListener('click', ()=>{
         message = null;
         bridge.undo();
@@ -1007,10 +1331,87 @@ const mountPromptBox = (doc, bridge, options = {})=>{
     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', content?, message? } — `change` carries the whole
+//   entry content after an edit
+// - 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 === '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
@@ -1020,6 +1421,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 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(';')){
@@ -1035,6 +1440,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();
@@ -1045,6 +1455,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 = {
@@ -1098,17 +1513,39 @@ 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
+        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).
+    const target = (option)=>{
+        const uid = option === undefined ? state.selectedUid : option;
+        const entryId = entryFor(uid);
+        if (!entryId) {
+            throw new Error('Nothing on this page is marked as an entry: add editable(entry)');
+        }
+        return {
+            uid,
+            entryId
         };
-        working.set(entryId, fresh);
-        return fresh;
     };
     const highlight = (uid)=>{
         doc.querySelectorAll('[data-cms-selected]').forEach((element)=>{
@@ -1134,6 +1571,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();
@@ -1150,6 +1596,7 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}` } = {})
             touched.add(entryId);
         }
         history.length = 0;
+        lastFormEdit = -Infinity;
         refreshUnsaved();
     };
     const has = (feature)=>state.features.includes(feature);
@@ -1166,11 +1613,7 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}` } = {})
             const text = prompt.trim();
             if (!text) throw new Error('Say what to change');
             if (!has('prompt')) throw new Error('You may not edit content here');
-            const uid = options.uid === undefined ? state.selectedUid : options.uid;
-            const entryId = entryFor(uid);
-            if (!entryId) {
-                throw new Error('Nothing on this page is marked as an entry: add editable(entry)');
-            }
+            const { uid, entryId } = target(options.uid);
             setState({
                 prompting: true
             });
@@ -1186,6 +1629,7 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}` } = {})
                     entryId,
                     content: entry.content
                 });
+                lastFormEdit = -Infinity;
                 entry.content = result.content;
                 refreshUnsaved();
                 await render(entryId);
@@ -1231,13 +1675,182 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}` } = {})
                 });
             }
         },
+        async view (options = {}) {
+            const { uid, entryId } = target(options.uid);
+            const entry = await load(entryId);
+            const { view } = await api(`entries/${encodeURIComponent(entryId)}/view`, {
+                content: entry.content,
+                locale: locale(),
+                uid
+            });
+            return view;
+        },
+        async applyJson (changes, options = {}) {
+            if (!has('prompt')) throw new Error('You may not edit content here');
+            if (!changes || typeof changes !== 'object' || Array.isArray(changes)) {
+                throw new Error('Send the fields to change as an object');
+            }
+            const { uid, entryId } = target(options.uid);
+            setState({
+                prompting: true
+            });
+            try {
+                const entry = await load(entryId);
+                const result = await api(`entries/${encodeURIComponent(entryId)}/apply`, {
+                    changes,
+                    content: entry.content,
+                    locale: locale(),
+                    uid
+                });
+                // Nothing to undo when nothing changed.
+                if (!same(result.content, entry.content)) {
+                    history.push({
+                        entryId,
+                        content: entry.content
+                    });
+                    lastFormEdit = -Infinity;
+                    entry.content = result.content;
+                    refreshUnsaved();
+                    await render(entryId);
+                }
+                return {
+                    changed: result.changed ?? [],
+                    ...result.view && {
+                        view: result.view
+                    }
+                };
+            } finally{
+                setState({
+                    prompting: false
+                });
+            }
+        },
+        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 = [
+                locale(),
+                session?.space.defaultLocale
+            ];
+            return pages.flatMap((page)=>{
+                // The page's path in this locale, else the default's, else any.
+                const code = preferred.find((code)=>code !== undefined && page.paths[code] !== undefined) ?? Object.keys(page.paths)[0];
+                const path = code === undefined ? undefined : page.paths[code];
+                if (code === undefined || path === undefined) return [];
+                return [
+                    {
+                        entryId: page.entryId,
+                        name: page.name,
+                        contentType: page.contentType,
+                        status: page.status,
+                        path,
+                        url: pagePath(path, code)
+                    }
+                ];
+            });
+        },
+        openPage (page) {
+            if (state.unsaved && !win.confirm('Leave this page and lose the changes you have not saved?')) {
+                return;
+            }
+            // Asked already: no second question from `beforeunload`.
+            working.clear();
+            history.length = 0;
+            refreshUnsaved();
+            win.location.assign(page.url);
+        },
         undo () {
             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');
@@ -1300,6 +1913,9 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}` } = {})
             });
         },
         destroy () {
+            closeForm?.();
+            renderTimers.forEach((timer)=>clearTimeout(timer));
+            renderTimers.clear();
             cleanup.splice(0).forEach((undo)=>undo());
         }
     };