@obelism/content 0.12.0 → 0.13.0

package/dist/bridge.mjs

@@ -222,10 +222,15 @@ 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,
+    pages: onlyWhileEditingSite,
+    openPage: ()=>{},
     undo: ()=>{},
     save: onlyOnSite,
     publish: onlyOnSite,
@@ -510,7 +515,26 @@ 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',
+    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',
+    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 +543,10 @@ 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"/>',
+    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 +648,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;
+}
 /* New page: where it goes, above what it is for. */
 .path {
 	display: flex; align-items: center; gap: 10px; padding: 16px 22px 0;
@@ -663,6 +698,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 JSON: 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 +729,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)=>{
@@ -699,6 +781,101 @@ 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 = {
@@ -742,6 +919,14 @@ 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'
+    });
+    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');
@@ -760,6 +945,28 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         className: 'action chip',
         type: 'button'
     }, icon(doc, 'undo'), labels.undo);
+    // Prompt or JSON (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 jsonMode = modeButton(labels.modeJson);
+    const modes = element(doc, 'span', {
+        className: 'modes'
+    }, promptMode, jsonMode);
+    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', {
@@ -802,6 +1009,51 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         textContent: labels.send
     }), icon(doc, 'send'));
     send.title = labels.send;
+    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);
+    // 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 +1078,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, code, toolbar, pagesSection, footer);
     const root = element(doc, 'div', {
         className: 'root'
     }, element(doc, 'div', {
@@ -849,6 +1095,26 @@ const mountPromptBox = (doc, bridge, options = {})=>{
     let open = 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;
+    // 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,23 +1130,40 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         const onlyNew = pageless && canCreate;
         if (!canCreate) creating = false;
         if (onlyNew) creating = true;
+        if (creating || pageless) json = false;
         pillText.textContent = onlyNew ? labels.newPage : labels.open;
         cancelNew.hidden = onlyNew;
         scope.hidden = creating;
         newScope.hidden = !creating;
-        newPage.hidden = creating || !canCreate;
+        newPage.hidden = creating || json || !canCreate;
         newPage.disabled = busy;
-        pathRow.hidden = !creating;
+        pathRow.hidden = !creating || picking;
         pathInput.disabled = busy;
+        input.hidden = json || picking;
+        code.hidden = !json || picking;
+        toolbar.hidden = picking;
+        pagesSection.hidden = !picking;
         input.placeholder = creating ? labels.newPagePlaceholder : labels.placeholder;
-        scopeText.textContent = state.selectedUid ? labels.scopeBlock : labels.scopeEntry;
+        // In JSON mode the scope is what the JSON is of.
+        const scopeUid = json ? viewUid : state.selectedUid;
+        scopeText.textContent = scopeUid ? labels.scopeBlock : labels.scopeEntry;
         clearBlock.hidden = !state.selectedUid;
-        pageIcon.hidden = !!state.selectedUid;
-        blockIcon.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));
+        modes.querySelectorAll('button').forEach((button)=>{
+            button.disabled = busy || loadingView;
+        });
+        reload.hidden = !json;
+        reload.disabled = busy || loadingView;
         undo.hidden = creating || !state.canUndo;
-        undo.disabled = busy;
-        send.disabled = busy || input.value.trim() === '' || creating && pathInput.value.trim() === '';
+        undo.disabled = busy || loadingView;
+        const text = json ? code.value : input.value;
+        send.disabled = busy || loadingView || text.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;
@@ -890,17 +1173,144 @@ 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 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 : '');
+        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));
+        }
     };
     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;
+                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();
+    };
+    // 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 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();
+        }
+        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();
+    };
     const submit = async ()=>{
+        if (json) return applyJson();
         const prompt = input.value.trim();
         if (!prompt || bridge.getState().prompting) return;
         message = null;
@@ -910,6 +1320,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 +1336,102 @@ 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();
+        if (open && json) requestView();
     };
     const setCreating = (next)=>{
         creating = next;
@@ -954,16 +1450,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();
+        (creating ? pathInput : json ? code : input).focus();
     });
     close.addEventListener('click', ()=>setOpen(false));
     save.addEventListener('click', ()=>void store('save'));
@@ -973,6 +1466,13 @@ 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();
+    });
+    pageChip.addEventListener('click', ()=>setPicking(!picking));
     pathInput.addEventListener('input', refresh);
     pathInput.addEventListener('keydown', (event)=>{
         if (event.key === 'Enter' && !event.isComposing) {
@@ -982,9 +1482,30 @@ 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();
+        if (json) requestView();
     });
     panel.addEventListener('submit', (event)=>{
         event.preventDefault();
@@ -1002,6 +1523,28 @@ 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);
@@ -1020,6 +1563,9 @@ 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.
 // 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(';')){
@@ -1110,6 +1656,19 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}` } = {})
         working.set(entryId, fresh);
         return fresh;
     };
+    // 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
+        };
+    };
     const highlight = (uid)=>{
         doc.querySelectorAll('[data-cms-selected]').forEach((element)=>{
             element.removeAttribute('data-cms-selected');
@@ -1166,11 +1725,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
             });
@@ -1231,6 +1786,88 @@ 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
+                    });
+                    entry.content = result.content;
+                    refreshUnsaved();
+                    await render(entryId);
+                }
+                return {
+                    changed: result.changed ?? [],
+                    ...result.view && {
+                        view: result.view
+                    }
+                };
+            } finally{
+                setState({
+                    prompting: false
+                });
+            }
+        },
+        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);