@obelism/content 0.0.0-stage → 0.1.1

package/dist/bridge.js

@@ -0,0 +1,1061 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var preview = require('./preview-by8d54dt.js');
+var site = require('./site.js');
+var config = require('./config-ci2hxmas.js');
+
+// The site's half of the visual editor (the CMS's public/bridge.js, as a
+// module). Inside the editor's iframe it outlines blocks, tells the editor
+// which one was clicked, hands the editor's live, unsaved entry to listeners
+// and sends the editor prompts. Outside the editor it does nothing.
+//
+// Messages are only exchanged with the CMS origin, and only with the parent
+// window:
+// - site → editor: { source: 'obelism-content-bridge', type: 'ready' |
+//   'select' | 'prompt' | 'undo', uid?, id?, prompt? }
+// - editor → site: { source: 'obelism-content-editor', type: 'connect' |
+//   'update' | 'select' | 'saved' | 'published' | 'features' |
+//   'promptResult' | 'promptState', … }
+const BRIDGE_SOURCE = 'obelism-content-bridge';
+const EDITOR_SOURCE = 'obelism-content-editor';
+// How long a prompt may take before it counts as failed.
+const PROMPT_TIMEOUT_MS = 120_000;
+const OUTLINE = '#d58a1f';
+// Outlines on blocks; `scope` limits them to e.g. `html[data-cms-selecting] `.
+const selectionStyle = (scope = '')=>`${scope}[${preview.UID_ATTRIBUTE}]{cursor:pointer;transition:outline-color .15s}` + `${scope}[${preview.UID_ATTRIBUTE}]:hover{outline:2px dashed ${OUTLINE};outline-offset:2px}` + `${scope}[${preview.UID_ATTRIBUTE}][data-cms-selected]{outline:2px solid ${OUTLINE};outline-offset:2px}`;
+const INITIAL_STATE = {
+    features: [],
+    selectedUid: null,
+    prompting: false,
+    canUndo: false,
+    unsaved: false,
+    saving: false,
+    publishing: false,
+    selecting: false
+};
+const createEmitter = ()=>{
+    const listeners = {
+        update: new Set(),
+        saved: new Set(),
+        published: new Set(),
+        change: new Set()
+    };
+    return {
+        listeners,
+        on (event, listener) {
+            listeners[event].add(listener);
+            return ()=>{
+                listeners[event].delete(listener);
+            };
+        },
+        emit (event, payload) {
+            for (const listener of listeners[event]){
+                try {
+                    listener(payload);
+                } catch (error) {
+                    console.error('[@obelism/content bridge]', error);
+                }
+            }
+        }
+    };
+};
+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'));
+// What every bridge without a feature does for it.
+const INERT_METHODS = {
+    prompt: inertPrompt,
+    undo: ()=>{},
+    save: onlyOnSite,
+    publish: onlyOnSite,
+    signOut: ()=>{},
+    select: ()=>{},
+    setSelecting: ()=>{}
+};
+// The selector of the element marked with a block's uid.
+const blockSelector = (uid)=>`[${preview.UID_ATTRIBUTE}="${uid.replace(/["\\]/g, '\\$&')}"]`;
+// `cmsOrigin` is the only origin messages are accepted from and sent to.
+const createBridge = (win, cmsOrigin)=>{
+    const params = new URLSearchParams(win.location.search);
+    const isEditing = win.parent !== win && params.has(preview.PREVIEW_PARAMS.preview);
+    const emitter = createEmitter();
+    const cleanup = [];
+    let state = {
+        ...INITIAL_STATE,
+        selecting: true
+    };
+    const setState = (next)=>{
+        state = {
+            ...state,
+            ...next
+        };
+        emitter.emit('change', state);
+    };
+    const bridge = {
+        isEditing,
+        mode: isEditing ? 'editor' : null,
+        entryId: params.get(preview.PREVIEW_PARAMS.entry),
+        environment: params.get(preview.PREVIEW_PARAMS.environment),
+        on: emitter.on,
+        getState: ()=>state,
+        ...INERT_METHODS,
+        destroy: ()=>{
+            cleanup.splice(0).forEach((undo)=>undo());
+        }
+    };
+    if (!isEditing) return bridge;
+    const doc = win.document;
+    const send = (type, data = {})=>{
+        win.parent.postMessage({
+            source: BRIDGE_SOURCE,
+            type,
+            ...data
+        }, cmsOrigin);
+    };
+    const style = doc.createElement('style');
+    style.textContent = selectionStyle();
+    doc.head.appendChild(style);
+    cleanup.push(()=>style.remove());
+    const highlight = (uid, scroll)=>{
+        doc.querySelectorAll('[data-cms-selected]').forEach((element)=>{
+            element.removeAttribute('data-cms-selected');
+        });
+        if (state.selectedUid !== (uid ?? null)) {
+            setState({
+                selectedUid: uid ?? null
+            });
+        }
+        if (!uid) return;
+        const element = doc.querySelector(blockSelector(uid));
+        if (!element) return;
+        element.setAttribute('data-cms-selected', '');
+        if (scroll) element.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center'
+        });
+    };
+    // Capture phase, so a block that is also a link selects instead of
+    // navigating away.
+    const onClick = (event)=>{
+        const target = event.target;
+        const element = target?.closest?.(`[${preview.UID_ATTRIBUTE}]`);
+        if (!element) return;
+        event.preventDefault();
+        event.stopPropagation();
+        const uid = element.getAttribute(preview.UID_ATTRIBUTE);
+        highlight(uid, false);
+        send('select', {
+            uid
+        });
+    };
+    doc.addEventListener('click', onClick, true);
+    cleanup.push(()=>doc.removeEventListener('click', onClick, true));
+    const ready = ()=>send('ready', {
+            url: win.location.href
+        });
+    // Prompts waiting for the editor's answer, by id.
+    const pending = new Map();
+    let nextId = 0;
+    const settle = (id)=>{
+        const waiting = pending.get(id);
+        if (!waiting) return null;
+        clearTimeout(waiting.timer);
+        pending.delete(id);
+        if (pending.size === 0) setState({
+            prompting: false
+        });
+        return waiting;
+    };
+    bridge.prompt = (prompt, options = {})=>{
+        const text = prompt.trim();
+        if (!text) return Promise.reject(new Error('Say what to change'));
+        if (!state.features.includes('prompt')) {
+            return Promise.reject(new Error('The editor does not offer prompts here'));
+        }
+        const id = `prompt_${++nextId}`;
+        const uid = options.uid === undefined ? state.selectedUid : options.uid;
+        return new Promise((resolve, reject)=>{
+            const timer = setTimeout(()=>{
+                settle(id)?.reject(new Error('The editor did not answer in time'));
+            }, PROMPT_TIMEOUT_MS);
+            pending.set(id, {
+                resolve,
+                reject,
+                timer
+            });
+            setState({
+                prompting: true
+            });
+            send('prompt', {
+                id,
+                prompt: text,
+                uid
+            });
+        });
+    };
+    bridge.undo = ()=>send('undo');
+    bridge.select = (uid)=>{
+        highlight(uid, false);
+        send('select', {
+            uid
+        });
+    };
+    cleanup.push(()=>{
+        for (const id of pending.keys()){
+            settle(id)?.reject(new Error('The bridge was destroyed'));
+        }
+    });
+    const onMessage = (event)=>{
+        if (event.origin !== cmsOrigin || event.source !== win.parent) return;
+        const data = event.data;
+        if (!data || data.source !== EDITOR_SOURCE) return;
+        if (data.type === 'connect') {
+            // The editor asks once its listener is up: the first `ready` may
+            // have been sent before it was listening.
+            ready();
+        } else if (data.type === 'update' && data.entry) {
+            emitter.emit('update', {
+                entry: data.entry,
+                selectedUid: data.selectedUid ?? null
+            });
+            // Re-apply the selection to whatever the site rendered.
+            win.requestAnimationFrame(()=>highlight(data.selectedUid, false));
+        } else if (data.type === 'select') {
+            highlight(data.uid, true);
+        } else if (data.type === 'saved' || data.type === 'published') {
+            emitter.emit(data.type, {});
+            if (emitter.listeners.update.size === 0) win.location.reload();
+        } else if (data.type === 'features' && Array.isArray(data.features)) {
+            setState({
+                features: data.features.filter((feature)=>typeof feature === 'string')
+            });
+        } else if (data.type === 'promptState') {
+            setState({
+                canUndo: data.canUndo === true
+            });
+        } else if (data.type === 'promptResult' && typeof data.id === 'string') {
+            const waiting = settle(data.id);
+            if (!waiting) return;
+            if (data.ok === true) {
+                waiting.resolve({
+                    summary: typeof data.summary === 'string' ? data.summary : ''
+                });
+            } else {
+                waiting.reject(new Error(typeof data.error === 'string' ? data.error : 'The prompt failed'));
+            }
+        }
+    };
+    win.addEventListener('message', onMessage);
+    cleanup.push(()=>win.removeEventListener('message', onMessage));
+    if (doc.readyState === 'loading') {
+        doc.addEventListener('DOMContentLoaded', ready, {
+            once: true
+        });
+        cleanup.push(()=>doc.removeEventListener('DOMContentLoaded', ready));
+    } else {
+        ready();
+    }
+    return bridge;
+};
+const wrapScriptBridge = (script, params)=>{
+    const emitter = createEmitter();
+    script.on('saved', ()=>emitter.emit('saved', {}));
+    script.on('published', ()=>emitter.emit('published', {}));
+    // Only once something listens: bridge.js reloads after a save while it has
+    // no `update` listener, and has no way to remove one.
+    let forwardingUpdates = false;
+    return {
+        isEditing: script.isEditing,
+        mode: script.isEditing ? 'editor' : null,
+        entryId: script.entryId,
+        environment: params.get(preview.PREVIEW_PARAMS.environment),
+        on: (event, listener)=>{
+            if (event === 'update' && !forwardingUpdates) {
+                forwardingUpdates = true;
+                script.on('update', (payload)=>{
+                    const entry = payload?.entry;
+                    if (entry) emitter.emit('update', {
+                        entry,
+                        selectedUid: null
+                    });
+                });
+            }
+            return emitter.on(event, listener);
+        },
+        getState: ()=>INITIAL_STATE,
+        ...INERT_METHODS,
+        destroy: ()=>{}
+    };
+};
+
+const DEFAULT_PROMPT_LABELS = {
+    open: 'Edit with a prompt',
+    placeholder: 'Describe a change, e.g. “make the heading shorter”',
+    send: 'Apply',
+    undo: 'Undo',
+    close: 'Close',
+    scopeEntry: 'Whole page',
+    scopeBlock: 'Selected block',
+    clearBlock: 'Edit the whole page instead',
+    working: 'Working on it…',
+    save: 'Save',
+    publish: 'Publish',
+    saving: 'Saving…',
+    publishing: 'Publishing…',
+    saved: 'Saved as a draft',
+    published: 'Published',
+    unsaved: 'Unsaved changes',
+    signOut: 'Exit editing',
+    viewingDrafts: 'Viewing drafts',
+    selectHint: 'Click a block to change only that block'
+};
+// Icons (Lucide), drawn in the text colour.
+const ICONS = {
+    page: '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/>',
+    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"/>',
+    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:
+// beige and near-black, one orange accent, Inter, pill buttons.
+const CSS = `
+:host { all: initial; }
+* { box-sizing: border-box; font: inherit; color: inherit; margin: 0; }
+.root {
+	--color-white-rgb: 248 248 248; --color-beige-rgb: 238 236 233; --color-beige-off-rgb: 228 225 217;
+	--color-grey-light-rgb: 132 132 132; --color-grey-rgb: 108 108 108; --color-grey-mid-rgb: 100 100 100; --color-grey-dark-rgb: 40 40 40;
+	--color-black-off-rgb: 20 20 20; --color-black-rgb: 12 12 12;
+	--color-orange-rgb: 212 130 30; --color-red-rgb: 240 93 93;
+	--theme-foreground-rgb: var(--color-black-rgb);
+	--theme-background-alt-rgb: var(--color-white-rgb);
+	--theme-background-actions-rgb: var(--color-beige-off-rgb);
+	--theme-border-rgb: var(--color-grey-light-rgb);
+	--theme-accent-rgb: var(--color-orange-rgb);
+	--theme-foreground-muted-rgb: var(--color-grey-mid-rgb);
+	--theme-error: #b3261e;
+	--border-radius-medium: 20px; --border-radius-pill: 5em;
+	--ease-roll: cubic-bezier(0.65, 0, 0.35, 1);
+	--shadow: 0 18px 40px -16px rgb(var(--color-black-rgb) / .3), 0 2px 6px rgb(var(--color-black-rgb) / .05);
+	--font-inter: 'InterVariable', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+		Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+	position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
+	z-index: 2147483647; width: min(640px, calc(100vw - 32px)); color-scheme: light dark;
+	font: 400 14px/1.4 var(--font-inter); color: rgb(var(--theme-foreground-rgb));
+	-webkit-font-smoothing: antialiased;
+}
+@media (prefers-color-scheme: dark) {
+	.root {
+		--theme-foreground-rgb: var(--color-white-rgb);
+		--theme-background-alt-rgb: var(--color-black-off-rgb);
+		--theme-background-actions-rgb: var(--color-grey-dark-rgb);
+		--theme-border-rgb: var(--color-grey-rgb);
+		--theme-foreground-muted-rgb: var(--color-grey-light-rgb);
+		--theme-error: rgb(var(--color-red-rgb));
+		--shadow: 0 18px 40px -14px rgb(0 0 0 / .7), 0 2px 6px rgb(0 0 0 / .3);
+	}
+}
+.icon { display: inline-flex; flex: none; }
+.icon svg {
+	width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75;
+	stroke-linecap: round; stroke-linejoin: round;
+}
+.visually-hidden {
+	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
+}
+button { cursor: pointer; background: none; border: 0; padding: 0; }
+button:disabled { cursor: not-allowed; }
+button:focus-visible { outline: 2px solid rgb(var(--theme-accent-rgb)); outline-offset: 2px; }
+
+/* Closed: one floating pill that reads like an empty field, with the mark. */
+.bar { display: flex; justify-content: center; }
+.pill {
+	display: flex; align-items: center; gap: 12px; width: min(560px, 100%); height: 56px;
+	padding: 0 22px 0 26px; border-radius: var(--border-radius-pill);
+	background: rgb(var(--theme-background-alt-rgb));
+	border: 1px solid rgb(var(--theme-border-rgb) / .25); box-shadow: var(--shadow);
+	color: rgb(var(--theme-foreground-muted-rgb)); font-size: 16px; text-align: left;
+	transition: transform .25s var(--ease-roll), color .25s var(--ease-roll);
+}
+button.pill:hover { color: rgb(var(--theme-foreground-rgb)); transform: translateY(-2px); }
+.pill > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mark { color: rgb(var(--theme-accent-rgb)); font-size: 22px; line-height: 1; }
+.pill.compact { width: auto; height: 40px; padding: 0 18px; font-size: 14px; gap: 4px; }
+
+/* Open: a floating card, the text on top and a row of pill buttons below. */
+.panel {
+	display: grid; background: rgb(var(--theme-background-alt-rgb));
+	border: 1px solid rgb(var(--theme-border-rgb) / .25); border-radius: var(--border-radius-medium);
+	box-shadow: var(--shadow); overflow: hidden;
+	transition: border-color .25s var(--ease-roll), box-shadow .25s var(--ease-roll);
+	animation: rise .25s var(--ease-roll);
+}
+.panel:focus-within {
+	border-color: rgb(var(--theme-accent-rgb) / .6);
+	box-shadow: 0 0 0 3px rgb(var(--theme-accent-rgb) / .18), var(--shadow);
+}
+@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(.98); } }
+@keyframes spin { to { transform: rotate(1turn); } }
+@media (prefers-reduced-motion: reduce) {
+	.panel { animation: none; }
+	.pill { transition: none; }
+}
+.status {
+	padding: 16px 22px 0; font-size: 14px; color: rgb(var(--theme-foreground-muted-rgb));
+	display: flex; align-items: center; gap: 8px;
+}
+.status.working::before {
+	content: ''; width: 12px; height: 12px; flex: none; border-radius: 50%;
+	border: 2px solid rgb(var(--theme-border-rgb) / .3); border-top-color: rgb(var(--theme-accent-rgb));
+	animation: spin .7s linear infinite;
+}
+.status.error { color: var(--theme-error); }
+textarea {
+	display: block; width: 100%; resize: none; min-height: 76px; max-height: 200px;
+	padding: 16px 22px 6px; border: 0; outline: 0; background: transparent;
+	font-size: 16px; line-height: 1.6; color: rgb(var(--theme-foreground-rgb));
+}
+textarea::placeholder { color: rgb(var(--theme-foreground-muted-rgb)); }
+textarea:disabled { opacity: .5; }
+.toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px 12px; }
+.spacer { flex: 1; }
+.chip {
+	display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: .4em 1.1em .4em .9em;
+	border: 1px solid rgb(var(--theme-border-rgb) / .2); border-radius: var(--border-radius-pill);
+	background: rgb(var(--theme-background-actions-rgb) / .6); white-space: nowrap;
+	transition: background-color .25s var(--ease-roll);
+}
+button.chip:hover:not(:disabled) { background: rgb(var(--theme-background-actions-rgb)); }
+button.chip:disabled { opacity: .5; }
+.scope { min-width: 0; background: transparent; }
+.scope > span:not(.icon) { overflow: hidden; text-overflow: ellipsis; }
+.scope button {
+	display: inline-flex; margin-right: -6px; padding: 3px; border-radius: 50%;
+	color: rgb(var(--theme-foreground-muted-rgb));
+}
+.scope button:hover { background: rgb(var(--theme-background-actions-rgb)); color: rgb(var(--theme-foreground-rgb)); }
+.scope button svg { width: 14px; height: 14px; }
+.icon-button {
+	display: inline-flex; align-items: center; justify-content: center;
+	width: 34px; height: 34px; border-radius: 50%; color: rgb(var(--theme-foreground-muted-rgb));
+	transition: background-color .25s var(--ease-roll), color .25s var(--ease-roll), opacity .25s var(--ease-roll);
+}
+.icon-button:hover:not(:disabled) { background: rgb(var(--theme-background-actions-rgb)); color: rgb(var(--theme-foreground-rgb)); }
+/* The one call to action: white on orange. */
+.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; }
+.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. */
+.footer {
+	display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 22px;
+	border-top: 1px solid rgb(var(--theme-border-rgb) / .2);
+	background: rgb(var(--theme-background-actions-rgb) / .45);
+}
+.footer .chip { height: 30px; padding: .4em 1.2em; background: rgb(var(--theme-background-alt-rgb)); }
+.unsaved { color: rgb(var(--theme-foreground-muted-rgb)); display: inline-flex; align-items: center; }
+.link { color: rgb(var(--theme-foreground-muted-rgb)); text-decoration: underline; text-underline-offset: 3px; padding: 0 6px; }
+.link:hover { color: rgb(var(--theme-foreground-rgb)); }
+.dot {
+	display: inline-block; width: 7px; height: 7px; border-radius: 50%;
+	background: rgb(var(--theme-accent-rgb)); margin-right: 8px;
+}
+[hidden] { display: none !important; }
+`;
+const element = (doc, tag, props = {}, ...children)=>{
+    const node = doc.createElement(tag);
+    Object.assign(node, props);
+    // appendChild, not append: Workers types redefine Element.append, and a
+    // site's server code may well have them loaded.
+    for (const child of children){
+        node.appendChild(typeof child === 'string' ? doc.createTextNode(child) : child);
+    }
+    return node;
+};
+const icon = (doc, name)=>{
+    const span = element(doc, 'span', {
+        className: 'icon'
+    });
+    span.setAttribute('aria-hidden', 'true');
+    span.innerHTML = `<svg viewBox="0 0 24 24">${ICONS[name]}</svg>`;
+    return span;
+};
+// Mounts the box on the page; returns a function that removes it.
+const mountPromptBox = (doc, bridge, options = {})=>{
+    const labels = {
+        ...DEFAULT_PROMPT_LABELS,
+        ...options.labels
+    };
+    const host = element(doc, 'div');
+    host.setAttribute('data-obelism-content-prompt', '');
+    const shadow = host.attachShadow({
+        mode: 'open'
+    });
+    const site = bridge.mode === 'site';
+    const pill = element(doc, 'button', {
+        className: 'pill',
+        type: 'button'
+    }, element(doc, 'span', {
+        textContent: labels.open
+    }), // The Obelism mark.
+    element(doc, 'span', {
+        className: 'mark',
+        textContent: '⁜'
+    }));
+    // Someone signed in who may only read: a note that drafts show, and a
+    // way out.
+    const viewing = element(doc, 'span', {
+        className: 'pill compact'
+    }, `${labels.viewingDrafts} · `);
+    const pillSignOut = element(doc, 'button', {
+        className: 'link',
+        type: 'button',
+        textContent: labels.signOut
+    });
+    viewing.appendChild(pillSignOut);
+    const status = element(doc, 'p', {
+        className: 'status'
+    });
+    status.setAttribute('role', 'status');
+    const input = element(doc, 'textarea', {
+        placeholder: labels.placeholder,
+        rows: 1
+    });
+    input.setAttribute('aria-label', labels.open);
+    // What the prompt acts on: the whole page, or the selected block with a
+    // way back to the page.
+    const pageIcon = icon(doc, 'page');
+    const blockIcon = icon(doc, 'block');
+    const scopeText = element(doc, 'span');
+    const clearBlock = element(doc, 'button', {
+        type: 'button',
+        title: labels.clearBlock
+    });
+    clearBlock.setAttribute('aria-label', labels.clearBlock);
+    clearBlock.appendChild(icon(doc, 'close'));
+    const scope = element(doc, 'span', {
+        className: 'chip scope'
+    }, pageIcon, blockIcon, scopeText, clearBlock);
+    const undo = element(doc, 'button', {
+        className: 'action chip',
+        type: 'button'
+    }, icon(doc, 'undo'), labels.undo);
+    const close = element(doc, 'button', {
+        className: 'close icon-button',
+        type: 'button',
+        title: labels.close
+    }, icon(doc, 'close'));
+    close.setAttribute('aria-label', labels.close);
+    const send = element(doc, 'button', {
+        className: 'action primary icon-button',
+        type: 'submit'
+    }, element(doc, 'span', {
+        className: 'visually-hidden',
+        textContent: labels.send
+    }), icon(doc, 'send'));
+    send.title = labels.send;
+    const unsaved = element(doc, 'span', {
+        className: 'unsaved'
+    });
+    unsaved.appendChild(element(doc, 'span', {
+        className: 'dot'
+    }));
+    unsaved.appendChild(doc.createTextNode(labels.unsaved));
+    const signOut = element(doc, 'button', {
+        className: 'link',
+        type: 'button',
+        textContent: labels.signOut
+    });
+    const save = element(doc, 'button', {
+        className: 'action chip',
+        type: 'button',
+        textContent: labels.save
+    });
+    const publish = element(doc, 'button', {
+        className: 'action chip',
+        type: 'button',
+        textContent: labels.publish
+    });
+    const footer = element(doc, 'div', {
+        className: 'footer'
+    }, unsaved, element(doc, 'span', {
+        className: 'spacer'
+    }), signOut, save, publish);
+    const panel = element(doc, 'form', {
+        className: 'panel'
+    }, status, input, element(doc, 'div', {
+        className: 'toolbar'
+    }, scope, undo, element(doc, 'span', {
+        className: 'spacer'
+    }), close, element(doc, 'span', {
+        className: 'divider'
+    }), send), footer);
+    const root = element(doc, 'div', {
+        className: 'root'
+    }, element(doc, 'div', {
+        className: 'bar'
+    }, pill, viewing), panel);
+    shadow.append(element(doc, 'style', {
+        textContent: CSS
+    }), root);
+    let open = false;
+    let message = null;
+    const render = (state)=>{
+        const available = state.features.includes('prompt');
+        const storing = state.saving || state.publishing;
+        const busy = state.prompting || storing;
+        root.hidden = !available && !site;
+        pill.hidden = open || !available;
+        viewing.hidden = available || !site;
+        panel.hidden = !open || !available;
+        scopeText.textContent = state.selectedUid ? labels.scopeBlock : labels.scopeEntry;
+        clearBlock.hidden = !state.selectedUid;
+        pageIcon.hidden = !!state.selectedUid;
+        blockIcon.hidden = !state.selectedUid;
+        undo.hidden = !state.canUndo;
+        undo.disabled = busy;
+        send.disabled = busy || input.value.trim() === '';
+        input.disabled = busy;
+        save.hidden = !state.features.includes('save');
+        save.disabled = busy || !state.unsaved;
+        save.textContent = state.saving ? labels.saving : labels.save;
+        publish.hidden = !state.features.includes('publish');
+        publish.disabled = busy;
+        publish.textContent = state.publishing ? labels.publishing : labels.publish;
+        signOut.hidden = !site;
+        footer.hidden = !site;
+        unsaved.hidden = !state.unsaved;
+        const text = state.prompting ? labels.working : message?.text ?? (site && !state.selectedUid ? labels.selectHint : '');
+        status.textContent = text;
+        status.hidden = !text;
+        status.className = `status${state.prompting ? ' working' : ''}${!busy && message?.error ? ' error' : ''}`;
+    };
+    const refresh = ()=>render(bridge.getState());
+    const grow = ()=>{
+        input.style.height = 'auto';
+        input.style.height = `${input.scrollHeight}px`;
+    };
+    const submit = async ()=>{
+        const prompt = input.value.trim();
+        if (!prompt || bridge.getState().prompting) return;
+        message = null;
+        try {
+            const { summary } = await bridge.prompt(prompt);
+            message = {
+                text: summary,
+                error: false
+            };
+            input.value = '';
+            grow();
+        } catch (error) {
+            message = {
+                text: error instanceof Error ? error.message : String(error),
+                error: true
+            };
+        }
+        refresh();
+        input.focus();
+    };
+    const setOpen = (next)=>{
+        open = next;
+        if (site) bridge.setSelecting(open);
+        refresh();
+    };
+    const store = async (action)=>{
+        message = null;
+        try {
+            await bridge[action]();
+            message = {
+                text: action === 'save' ? labels.saved : labels.published,
+                error: false
+            };
+        } catch (error) {
+            message = {
+                text: error instanceof Error ? error.message : String(error),
+                error: true
+            };
+        }
+        refresh();
+    };
+    pill.addEventListener('click', ()=>{
+        setOpen(true);
+        input.focus();
+    });
+    close.addEventListener('click', ()=>setOpen(false));
+    save.addEventListener('click', ()=>void store('save'));
+    publish.addEventListener('click', ()=>void store('publish'));
+    signOut.addEventListener('click', ()=>bridge.signOut());
+    pillSignOut.addEventListener('click', ()=>bridge.signOut());
+    clearBlock.addEventListener('click', ()=>bridge.select(null));
+    undo.addEventListener('click', ()=>{
+        message = null;
+        bridge.undo();
+    });
+    panel.addEventListener('submit', (event)=>{
+        event.preventDefault();
+        void submit();
+    });
+    input.addEventListener('input', ()=>{
+        grow();
+        refresh();
+    });
+    input.addEventListener('keydown', (event)=>{
+        if (event.key === 'Enter' && !event.shiftKey && !event.isComposing) {
+            event.preventDefault();
+            void submit();
+        } else if (event.key === 'Escape') {
+            setOpen(false);
+        }
+    });
+    const unsubscribe = bridge.on('change', render);
+    refresh();
+    doc.body.appendChild(host);
+    return ()=>{
+        unsubscribe();
+        host.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
+// `/cms/api/…` (which forwards to the CMS with the session's token) to apply
+// prompts and to shape the content for rendering, hands that to `update`
+// listeners like the editor would, and saves or publishes on request.
+//
+// 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.
+// 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(';')){
+        const [name, ...value] = part.trim().split('=');
+        if (name !== site.SITE_EDITING_COOKIE) continue;
+        try {
+            const basePath = decodeURIComponent(value.join('='));
+            return basePath.startsWith('/') && !basePath.startsWith('//') ? basePath : null;
+        } catch  {
+            return null;
+        }
+    }
+    return null;
+};
+const same = (a, b)=>JSON.stringify(a) === JSON.stringify(b);
+const createSiteBridge = (win, basePath)=>{
+    const doc = win.document;
+    const emitter = createEmitter();
+    const cleanup = [];
+    const working = new Map();
+    // Content before each prompt, newest last, for undo.
+    const history = [];
+    // Entries changed here since the last publish.
+    const touched = new Set();
+    let session = null;
+    let state = INITIAL_STATE;
+    const setState = (next)=>{
+        state = {
+            ...state,
+            ...next
+        };
+        emitter.emit('change', state);
+    };
+    const refreshUnsaved = ()=>setState({
+            unsaved: [
+                ...working.values()
+            ].some(({ content, saved })=>!same(content, saved)),
+            canUndo: history.length > 0
+        });
+    const api = async (path, body)=>{
+        const response = await win.fetch(`${basePath}/api/${path}`, body === undefined ? {
+            credentials: 'same-origin'
+        } : {
+            method: 'POST',
+            credentials: 'same-origin',
+            headers: {
+                'Content-Type': 'application/json',
+                [site.SITE_REQUEST_HEADER]: '1'
+            },
+            body: JSON.stringify(body)
+        });
+        const data = await response.json().catch(()=>({}));
+        if (response.status === 401) {
+            setState({
+                features: []
+            });
+            throw new Error('You were signed out. Sign in again to edit.');
+        }
+        if (!response.ok) {
+            throw new Error(typeof data.error === 'string' ? data.error : `Obelism Content answered ${response.status}`);
+        }
+        return data;
+    };
+    const pageEntryId = ()=>doc.querySelector(`[${preview.ENTRY_ATTRIBUTE}]`)?.getAttribute(preview.ENTRY_ATTRIBUTE) ?? null;
+    const entryFor = (uid)=>{
+        const block = uid ? doc.querySelector(blockSelector(uid)) : null;
+        return block?.closest(`[${preview.ENTRY_ATTRIBUTE}]`)?.getAttribute(preview.ENTRY_ATTRIBUTE) ?? pageEntryId();
+    };
+    // The page's language when the space has it (or its base language), else
+    // the space's default.
+    const locale = ()=>{
+        if (!session) return undefined;
+        const codes = session.space.locales.map(({ code })=>code);
+        const lang = doc.documentElement.lang;
+        if (codes.includes(lang)) return lang;
+        const base = lang.split('-')[0] ?? '';
+        return codes.includes(base) ? base : session.space.defaultLocale;
+    };
+    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;
+    };
+    const highlight = (uid)=>{
+        doc.querySelectorAll('[data-cms-selected]').forEach((element)=>{
+            element.removeAttribute('data-cms-selected');
+        });
+        if (state.selectedUid !== uid) setState({
+            selectedUid: uid
+        });
+        if (uid) doc.querySelector(blockSelector(uid))?.setAttribute('data-cms-selected', '');
+    };
+    // Shows the in-memory content through `update`, shaped like the delivery
+    // API. A page without `update` listeners shows it once saved (it reloads).
+    const render = async (entryId)=>{
+        if (emitter.listeners.update.size === 0) return;
+        const content = working.get(entryId)?.content;
+        const { entry } = await api(`entries/${encodeURIComponent(entryId)}/preview`, {
+            content,
+            locale: locale()
+        });
+        emitter.emit('update', {
+            entry,
+            selectedUid: state.selectedUid
+        });
+        win.requestAnimationFrame(()=>highlight(state.selectedUid));
+    };
+    const afterStore = (event)=>{
+        emitter.emit(event, {});
+        if (emitter.listeners.update.size === 0) win.location.reload();
+    };
+    const saveAll = async ()=>{
+        for (const [entryId, entry] of working){
+            if (same(entry.content, entry.saved)) continue;
+            const { draftRevision } = await api(`entries/${encodeURIComponent(entryId)}/save`, {
+                content: entry.content,
+                baseRevision: entry.revision
+            });
+            entry.saved = entry.content;
+            entry.revision = draftRevision;
+            touched.add(entryId);
+        }
+        history.length = 0;
+        refreshUnsaved();
+    };
+    const has = (feature)=>state.features.includes(feature);
+    const bridge = {
+        isEditing: true,
+        mode: 'site',
+        get entryId () {
+            return pageEntryId();
+        },
+        environment: null,
+        on: emitter.on,
+        getState: ()=>state,
+        async prompt (prompt, options = {}) {
+            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)');
+            }
+            setState({
+                prompting: true
+            });
+            try {
+                const entry = await load(entryId);
+                const result = await api(`entries/${encodeURIComponent(entryId)}/prompt`, {
+                    prompt: text,
+                    content: entry.content,
+                    locale: locale(),
+                    uid
+                });
+                history.push({
+                    entryId,
+                    content: entry.content
+                });
+                entry.content = result.content;
+                refreshUnsaved();
+                await render(entryId);
+                return {
+                    summary: result.summary
+                };
+            } finally{
+                setState({
+                    prompting: false
+                });
+            }
+        },
+        undo () {
+            const last = history.pop();
+            const entry = last && working.get(last.entryId);
+            if (!last || !entry) return;
+            entry.content = last.content;
+            refreshUnsaved();
+            void render(last.entryId).catch((error)=>console.error('[@obelism/content bridge]', error));
+        },
+        async save () {
+            if (!has('save')) throw new Error('You may not edit content here');
+            setState({
+                saving: true
+            });
+            try {
+                await saveAll();
+            } finally{
+                setState({
+                    saving: false
+                });
+            }
+            afterStore('saved');
+        },
+        async publish () {
+            if (!has('publish')) throw new Error('You may not publish here');
+            setState({
+                publishing: true
+            });
+            try {
+                await saveAll();
+                const page = pageEntryId();
+                const entries = touched.size > 0 ? [
+                    ...touched
+                ] : page ? [
+                    page
+                ] : [];
+                if (entries.length === 0) {
+                    throw new Error('Nothing on this page is marked as an entry: add editable(entry)');
+                }
+                for (const entryId of entries){
+                    await api(`entries/${encodeURIComponent(entryId)}/publish`, {});
+                    touched.delete(entryId);
+                }
+            } finally{
+                setState({
+                    publishing: false
+                });
+            }
+            afterStore('published');
+        },
+        signOut () {
+            if (state.unsaved && !win.confirm('Sign out and lose the changes you have not saved?')) {
+                return;
+            }
+            working.clear();
+            refreshUnsaved();
+            const returnTo = win.location.pathname + win.location.search;
+            win.location.href = `${basePath}/logout?return_to=${encodeURIComponent(returnTo)}`;
+        },
+        select (uid) {
+            highlight(uid);
+        },
+        setSelecting (selecting) {
+            if (selecting) doc.documentElement.setAttribute('data-cms-selecting', '');
+            else doc.documentElement.removeAttribute('data-cms-selecting');
+            setState({
+                selecting
+            });
+        },
+        destroy () {
+            cleanup.splice(0).forEach((undo)=>undo());
+        }
+    };
+    const style = doc.createElement('style');
+    style.textContent = selectionStyle('html[data-cms-selecting] ');
+    doc.head.appendChild(style);
+    cleanup.push(()=>style.remove());
+    cleanup.push(()=>doc.documentElement.removeAttribute('data-cms-selecting'));
+    // Capture phase, so a block that is also a link selects instead of
+    // navigating — only while selecting, so the site stays usable.
+    const onClick = (event)=>{
+        if (!state.selecting) return;
+        const target = event.target;
+        const element = target?.closest?.(`[${preview.UID_ATTRIBUTE}]`);
+        if (!element) return;
+        event.preventDefault();
+        event.stopPropagation();
+        highlight(element.getAttribute(preview.UID_ATTRIBUTE));
+    };
+    doc.addEventListener('click', onClick, true);
+    cleanup.push(()=>doc.removeEventListener('click', onClick, true));
+    const onBeforeUnload = (event)=>{
+        if (!state.unsaved) return;
+        event.preventDefault();
+        event.returnValue = '';
+    };
+    win.addEventListener('beforeunload', onBeforeUnload);
+    cleanup.push(()=>win.removeEventListener('beforeunload', onBeforeUnload));
+    api('session').then((info)=>{
+        session = info;
+        setState({
+            features: info.features
+        });
+    }).catch((error)=>console.error('[@obelism/content bridge]', error));
+    return bridge;
+};
+
+// Kept on the window, so two copies of this package on one page still share
+// one bridge.
+const KEY = Symbol.for('@obelism/content/bridge');
+const SERVER_BRIDGE = wrapScriptBridge({
+    isEditing: false,
+    entryId: null,
+    on: ()=>{}
+}, new URLSearchParams());
+// The page's bridge if something already started it, else null. Never
+// starts one: for code that has to stay side-effect free, like a React
+// store's snapshot.
+const peekContentBridge = ()=>typeof window === 'undefined' ? null : window[KEY] ?? null;
+// The page's bridge to the visual editor — or, on a site signed in to edit,
+// its stand-in — started on first use. Call it in the browser (on the server
+// it returns an inert bridge):
+//
+//   const bridge = getContentBridge()
+//   if (bridge.isEditing) bridge.on('update', ({ entry }) => render(entry))
+//
+// The first call's options win: there is one bridge per page.
+const getContentBridge = ({ url, prompt = true } = {})=>{
+    if (typeof window === 'undefined') return SERVER_BRIDGE;
+    const win = window;
+    if (win[KEY]) return win[KEY];
+    let bridge;
+    if (win.ObelismBridge) {
+        bridge = wrapScriptBridge(win.ObelismBridge, new URLSearchParams(win.location.search));
+    } else {
+        bridge = createBridge(win, config.normalizeUrl(url || config.DEFAULT_URL));
+        // Not in the visual editor, but signed in to edit through the site's
+        // own `/cms/login` (@obelism/content/site).
+        const sitePath = bridge.isEditing || win.parent !== win ? null : readSiteEditing(win.document);
+        if (sitePath) bridge = createSiteBridge(win, sitePath);
+        if (bridge.isEditing && prompt) {
+            const unmount = mountPromptBox(win.document, bridge, prompt === true ? {} : prompt);
+            const destroy = bridge.destroy;
+            bridge.destroy = ()=>{
+                unmount();
+                destroy();
+            };
+        }
+    }
+    win[KEY] = bridge;
+    return bridge;
+};
+
+exports.DEFAULT_PROMPT_LABELS = DEFAULT_PROMPT_LABELS;
+exports.INITIAL_STATE = INITIAL_STATE;
+exports.getContentBridge = getContentBridge;
+exports.peekContentBridge = peekContentBridge;