@obelism/content 0.28.2 → 0.28.4

package/dist/bridge.mjs

@@ -1,7 +1,169 @@
-import { U as UID_ATTRIBUTE, P as PREVIEW_PARAMS, E as ENTRY_ATTRIBUTE, C as COLLECTION_ATTRIBUTE, a as COLLECTION_HANDLE_ATTRIBUTE, b as PRODUCT_ATTRIBUTE, c as PRODUCT_HANDLE_ATTRIBUTE } from './preview-el7sfk3h.mjs';
-import { SITE_EDITING_COOKIE, SITE_REQUEST_HEADER } from './site.mjs';
+import { U as UID_ATTRIBUTE, P as PREVIEW_PARAMS, C as COLLECTION_HANDLE_ATTRIBUTE, a as COLLECTION_ATTRIBUTE, b as PRODUCT_HANDLE_ATTRIBUTE, c as PRODUCT_ATTRIBUTE, E as ENTRY_ATTRIBUTE } from './preview-9qff497d.mjs';
+import { p as parseCookies, S as SITE_EDITING_COOKIE, s as siteApi, a as SITE_REQUEST_HEADER } from './site-m85jdjid.mjs';
 import { n as normalizeUrl, D as DEFAULT_URL } from './config-c6qktlz6.mjs';
 
+// What every bridge to the visual editor offers, and the pieces both of them
+// are built from: the state and its emitter, block selection, the click-rate
+// labels. The editor's own bridge is editorBridge.ts, editing on the site is
+// siteBridge.ts, and the CMS's old script tag is scriptBridge.ts.
+// Messages are only exchanged with the CMS origin, and only with the parent
+// window:
+// - site → editor: { source: 'obelism-content-bridge', type: 'ready' |
+//   'size' | 'select' | 'prompt' | 'undo', uid?, id?, prompt?, height? }
+// - editor → site: { source: 'obelism-content-editor', type: 'connect' |
+//   'update' | 'select' | 'saved' | 'published' | 'features' |
+//   'promptResult' | 'promptState' | 'stats' | 'viewport', … }
+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 INITIAL_STATE = {
+    features: [],
+    selectedUid: null,
+    prompting: false,
+    canUndo: false,
+    unsaved: false,
+    saving: false,
+    publishing: false,
+    selecting: false,
+    stats: {},
+    statsVisible: false
+};
+const OUTLINE = '#d58a1f';
+// Outlines on blocks; `scope` limits them to e.g. `html[data-cms-selecting] `.
+const selectionStyle = (scope = '')=>`${scope}[${UID_ATTRIBUTE}]{cursor:pointer;transition:outline-color .15s}` + `${scope}[${UID_ATTRIBUTE}]:hover{outline:2px dashed ${OUTLINE};outline-offset:2px}` + `${scope}[${UID_ATTRIBUTE}][data-cms-selected]{outline:2px solid ${OUTLINE};outline-offset:2px}`;
+// The selector of the element marked with a block's uid.
+const blockSelector = (uid)=>`[${UID_ATTRIBUTE}="${uid.replace(/["\\]/g, '\\$&')}"]`;
+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);
+                }
+            }
+        }
+    };
+};
+// The state both bridges keep, and the emitter that says it changed.
+const createBridgeState = (initial = INITIAL_STATE)=>{
+    const emitter = createEmitter();
+    let state = initial;
+    return {
+        ...emitter,
+        getState: ()=>state,
+        setState (next) {
+            state = {
+                ...state,
+                ...next
+            };
+            emitter.emit('change', state);
+        }
+    };
+};
+// Outlines the block's element on the page, and nothing else, in view when
+// `scroll`.
+const showSelection = (doc, uid, scroll = false)=>{
+    for (const element of doc.querySelectorAll('[data-cms-selected]')){
+        element.removeAttribute('data-cms-selected');
+    }
+    const element = uid ? doc.querySelector(blockSelector(uid)) : null;
+    if (!element) return;
+    element.setAttribute('data-cms-selected', '');
+    if (scroll) element.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center'
+    });
+};
+// The click rates on the page: mounted with the first rates, so a page
+// without Numbers never gets it, then kept.
+const createStatsView = (mount)=>{
+    let overlay = null;
+    return {
+        update (stats, visible) {
+            if (!overlay && Object.keys(stats).length === 0) return;
+            overlay ??= mount();
+            overlay.update(stats, visible);
+        },
+        refresh: ()=>overlay?.refresh(),
+        destroy: ()=>overlay?.destroy()
+    };
+};
+// The rates the page can show, from the editor's `stats` message: only
+// well-formed entries.
+const isCount = (value)=>typeof value === 'number' && Number.isFinite(value) && value >= 0;
+const readStats = (value)=>{
+    if (!value || typeof value !== 'object' || Array.isArray(value)) return {};
+    const stats = {};
+    for (const [uid, block] of Object.entries(value)){
+        const { clicks, clickers, viewers, rate } = block ?? {};
+        if (isCount(clicks) && isCount(clickers) && isCount(viewers) && isCount(rate)) stats[uid] = {
+            clicks,
+            clickers,
+            viewers,
+            rate
+        };
+    }
+    return stats;
+};
+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')),
+    createProductPage: ()=>Promise.reject(new Error('Product pages are made on the site itself')),
+    createCollectionPage: ()=>Promise.reject(new Error('Collection 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,
+    signOut: ()=>{},
+    select: ()=>{},
+    setSelecting: ()=>{}
+};
+// A bridge for a page where nothing can be edited.
+const createInertBridge = ()=>{
+    const emitter = createEmitter();
+    return {
+        isEditing: false,
+        mode: null,
+        entryId: null,
+        environment: null,
+        product: null,
+        collection: null,
+        on: emitter.on,
+        getState: ()=>INITIAL_STATE,
+        ...INERT_METHODS,
+        destroy: ()=>{}
+    };
+};
+
 const DEFAULT_STATS_LABELS = {
     clicked: '{rate}% clicked',
     clickedShort: '{rate}%',
@@ -77,7 +239,7 @@ const placeTag = (rect, viewport)=>({
         top: Math.min(Math.max(rect.top, 10), viewport.height - 10),
         left: Math.min(rect.right, viewport.width - 10)
     });
-const mountStatsOverlay = (win, { selector, onSelect, checked, labels: labelOverrides })=>{
+const mountStatsOverlay = (win, { selector, onSelect, checked, shows, labels: labelOverrides })=>{
     const doc = win.document;
     const labels = {
         ...DEFAULT_STATS_LABELS,
@@ -155,13 +317,14 @@ const mountStatsOverlay = (win, { selector, onSelect, checked, labels: labelOver
             const id = element.getAttribute(TAG_ATTRIBUTE);
             if (!id || !stats[id] && !isChecked(id)) continue;
             tagged.add(id);
+            if (shows && !shows(id, element)) continue;
             draw(id, element, blocks);
         }
         // Rates of blocks the site doesn't tag an element of.
         for (const id of Object.keys(stats)){
             if (tagged.has(id) || !blocks.has(id)) continue;
             const element = doc.querySelector(selector(id));
-            if (element) draw(id, element, blocks);
+            if (element && (!shows || shows(id, element))) draw(id, element, blocks);
         }
     };
     // At most once a frame, however many scroll and mutation events come in.
@@ -295,119 +458,15 @@ const createViewportUnits = (doc)=>{
 // 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' |
-//   'size' | 'select' | 'prompt' | 'undo', uid?, id?, prompt?, height? }
-// - editor → site: { source: 'obelism-content-editor', type: 'connect' |
-//   'update' | 'select' | 'saved' | 'published' | 'features' |
-//   'promptResult' | 'promptState' | 'stats' | 'viewport', … }
-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}[${UID_ATTRIBUTE}]{cursor:pointer;transition:outline-color .15s}` + `${scope}[${UID_ATTRIBUTE}]:hover{outline:2px dashed ${OUTLINE};outline-offset:2px}` + `${scope}[${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,
-    stats: {},
-    statsVisible: 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'));
-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')),
-    createProductPage: ()=>Promise.reject(new Error('Product pages are made on the site itself')),
-    createCollectionPage: ()=>Promise.reject(new Error('Collection 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,
-    signOut: ()=>{},
-    select: ()=>{},
-    setSelecting: ()=>{}
-};
-const isCount = (value)=>typeof value === 'number' && Number.isFinite(value) && value >= 0;
-// The editor's `stats`, keeping only well-formed entries.
-const readStats = (value)=>{
-    if (!value || typeof value !== 'object' || Array.isArray(value)) return {};
-    const stats = {};
-    for (const [uid, block] of Object.entries(value)){
-        const { clicks, clickers, viewers, rate } = block ?? {};
-        if (isCount(clicks) && isCount(clickers) && isCount(viewers) && isCount(rate)) stats[uid] = {
-            clicks,
-            clickers,
-            viewers,
-            rate
-        };
-    }
-    return stats;
-};
-// The selector of the element marked with a block's uid.
-const blockSelector = (uid)=>`[${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_PARAMS.preview);
-    const emitter = createEmitter();
-    const cleanup = [];
-    let state = {
+    const { on, getState, setState, emit, listeners } = createBridgeState({
         ...INITIAL_STATE,
         selecting: true
-    };
-    const setState = (next)=>{
-        state = {
-            ...state,
-            ...next
-        };
-        emitter.emit('change', state);
-    };
+    });
+    const cleanup = [];
     const bridge = {
         isEditing,
         mode: isEditing ? 'editor' : null,
@@ -415,8 +474,8 @@ const createBridge = (win, cmsOrigin)=>{
         environment: params.get(PREVIEW_PARAMS.environment),
         product: null,
         collection: null,
-        on: emitter.on,
-        getState: ()=>state,
+        on,
+        getState,
         ...INERT_METHODS,
         destroy: ()=>{
             cleanup.splice(0).forEach((undo)=>undo());
@@ -436,22 +495,12 @@ const createBridge = (win, cmsOrigin)=>{
     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)) {
+        if (getState().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'
-        });
+        showSelection(doc, uid, scroll);
     };
     // Capture phase, so a block that is also a link selects instead of
     // navigating away.
@@ -511,11 +560,11 @@ const createBridge = (win, cmsOrigin)=>{
     bridge.prompt = (prompt, options = {})=>{
         const text = prompt.trim();
         if (!text) return Promise.reject(new Error('Say what to change'));
-        if (!state.features.includes('prompt')) {
+        if (!getState().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;
+        const uid = options.uid === undefined ? getState().selectedUid : options.uid;
         return new Promise((resolve, reject)=>{
             const timer = setTimeout(()=>{
                 settle(id)?.reject(new Error('The editor did not answer in time'));
@@ -542,17 +591,11 @@ const createBridge = (win, cmsOrigin)=>{
             uid
         });
     };
-    // Mounted with the first rates, so pages without numbers never get it.
-    let overlay = null;
-    const showStats = ()=>{
-        if (!overlay && !Object.keys(state.stats).length) return;
-        overlay ??= mountStatsOverlay(win, {
+    const stats = createStatsView(()=>mountStatsOverlay(win, {
             selector: blockSelector,
             onSelect: (uid)=>bridge.select(uid)
-        });
-        overlay.update(state.stats, state.statsVisible);
-    };
-    cleanup.push(()=>overlay?.destroy());
+        }));
+    cleanup.push(()=>stats.destroy());
     cleanup.push(()=>{
         for (const id of pending.keys()){
             settle(id)?.reject(new Error('The bridge was destroyed'));
@@ -569,29 +612,31 @@ const createBridge = (win, cmsOrigin)=>{
             // have been sent before it was listening.
             ready();
         } else if (data.type === 'update' && data.entry) {
-            emitter.emit('update', {
+            emit('update', {
                 entry: data.entry,
                 selectedUid: data.selectedUid ?? null
             });
             // Re-apply the selection to whatever the site rendered.
             win.requestAnimationFrame(()=>highlight(data.selectedUid, false));
-            overlay?.refresh();
+            stats.refresh();
         } 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();
+            emit(data.type, {});
+            if (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 === 'stats') {
             // An editor from before the switch sends no `visible`: show them.
-            setState({
+            const next = {
                 stats: readStats(data.stats),
                 statsVisible: data.visible !== false
-            });
-            showStats();
+            };
+            setState(next);
+            const { stats: rates, statsVisible } = getState();
+            stats.update(rates, statsVisible);
         } else if (data.type === 'viewport' && typeof data.height === 'number') {
             // The canvas: the frame is as tall as the page (`size`), so `vh`
             // sizes are fixed at the screen height it stands for.
@@ -624,6 +669,7 @@ const createBridge = (win, cmsOrigin)=>{
     }
     return bridge;
 };
+
 const wrapScriptBridge = (script, params)=>{
     const emitter = createEmitter();
     script.on('saved', ()=>emitter.emit('saved', {}));
@@ -632,12 +678,11 @@ const wrapScriptBridge = (script, params)=>{
     // no `update` listener, and has no way to remove one.
     let forwardingUpdates = false;
     return {
+        ...createInertBridge(),
         isEditing: script.isEditing,
         mode: script.isEditing ? 'editor' : null,
         entryId: script.entryId,
         environment: params.get(PREVIEW_PARAMS.environment),
-        product: null,
-        collection: null,
         on: (event, listener)=>{
             if (event === 'update' && !forwardingUpdates) {
                 forwardingUpdates = true;
@@ -650,10 +695,7 @@ const wrapScriptBridge = (script, params)=>{
                 });
             }
             return emitter.on(event, listener);
-        },
-        getState: ()=>INITIAL_STATE,
-        ...INERT_METHODS,
-        destroy: ()=>{}
+        }
     };
 };
 
@@ -688,6 +730,11 @@ const svgSpan = (doc, className, paths)=>{
 };
 // `{name}` style placeholders.
 const fill = (template, values)=>template.replace(/\{(\w+)\}/g, (match, key)=>key in values ? String(values[key]) : match);
+// A textarea as tall as its text.
+const fitToText = (textarea)=>{
+    textarea.style.height = 'auto';
+    textarea.style.height = `${textarea.scrollHeight}px`;
+};
 // Line 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"/>',
@@ -998,6 +1045,55 @@ const createPagesPicker = (doc, bridge, labels, { onLoad, onClose })=>{
     };
 };
 
+const SHOP = {
+    product: {
+        item: PRODUCT_ATTRIBUTE,
+        handle: PRODUCT_HANDLE_ATTRIBUTE,
+        setting: 'productPath',
+        route: '/products/{handle}',
+        marker: 'editableProduct(product)',
+        add: 'addProductPage',
+        adding: 'addingProductPage',
+        hint: 'productPageHint',
+        added: 'addedProductPage'
+    },
+    collection: {
+        item: COLLECTION_ATTRIBUTE,
+        handle: COLLECTION_HANDLE_ATTRIBUTE,
+        setting: 'collectionPath',
+        route: '/collections/{handle}',
+        marker: 'editableCollection(collection)',
+        add: 'addCollectionPage',
+        adding: 'addingCollectionPage',
+        hint: 'collectionPageHint',
+        added: 'addedCollectionPage'
+    }
+};
+// The shop item the page marks with `editableProduct` or
+// `editableCollection`, if it marks one.
+const pageShopItem = (doc, kind)=>{
+    const { item, handle } = SHOP[kind];
+    const element = doc.querySelector(`[${item}]`);
+    const id = element?.getAttribute(item);
+    const itemHandle = element?.getAttribute(handle);
+    return id && itemHandle ? {
+        id,
+        handle: itemHandle
+    } : null;
+};
+// Which kind of shop page a page entry is, else null.
+const shopKindOf = (page)=>page.product ? 'product' : page.collection ? 'collection' : null;
+const shopItemOf = (page)=>page.product ?? page.collection ?? null;
+const shopCopy = (labels, kind)=>{
+    const shop = SHOP[kind];
+    return {
+        add: labels[shop.add],
+        adding: labels[shop.adding],
+        hint: labels[shop.hint],
+        added: labels[shop.added]
+    };
+};
+
 // What the prompt box and the on-site editor decide alike on the site.
 const failure = (error)=>error instanceof Error ? error.message : String(error);
 const pageContext = (bridge, state, promptWithoutPage)=>{
@@ -1008,39 +1104,26 @@ const pageContext = (bridge, state, promptWithoutPage)=>{
     const pageless = site && bridge.entryId === null;
     // …unless it shows a product (collection): then Add a product
     // (collection) page first.
-    const shopHere = !pageless || !canCreate ? null : bridge.product ? 'product' : bridge.collection ? 'collection' : null;
-    const onlyNew = pageless && canCreate && !shopHere && !promptWithoutPage;
+    const shop = pageless && canCreate ? shopKindOf(bridge) : null;
+    const onlyNew = pageless && canCreate && !shop && !promptWithoutPage;
     return {
         site,
         canCreate,
         pageless,
-        shopHere,
+        shop,
         onlyNew
     };
 };
-const shopCopy = (labels, shopHere)=>shopHere === 'collection' ? {
-        add: labels.addCollectionPage,
-        adding: labels.addingCollectionPage,
-        hint: labels.collectionPageHint
-    } : {
-        add: labels.addProductPage,
-        adding: labels.addingProductPage,
-        hint: labels.productPageHint
-    };
 // Makes the page's product (collection) page; the bridge then reloads, and
 // the answer shows until it does.
 const addShopPage = async (bridge, labels)=>{
+    const kind = shopKindOf(bridge);
+    if (!kind) return null;
     try {
-        if (bridge.product) {
-            await bridge.createProductPage();
-            return {
-                text: labels.addedProductPage,
-                error: false
-            };
-        }
-        await bridge.createCollectionPage();
+        if (kind === 'product') await bridge.createProductPage();
+        else await bridge.createCollectionPage();
         return {
-            text: labels.addedCollectionPage,
+            text: labels[SHOP[kind].added],
             error: false
         };
     } catch (error) {
@@ -1060,6 +1143,36 @@ const storeChanges = async (bridge, action)=>{
     }
 };
 
+const bridgeView = (bridge, state, // What the editor asked for; `creating` is that, kept in step with what
+// the page actually offers.
+intent, { promptWithoutPage, signOut, labels })=>{
+    const page = pageContext(bridge, state, promptWithoutPage);
+    // A page with nothing to edit has one thing to offer; a page that can't
+    // take a new one has nothing to make.
+    const creating = page.canCreate && (intent.creating || page.onlyNew);
+    const available = state.features.includes('prompt');
+    const storing = state.saving || state.publishing;
+    const busy = state.prompting || storing;
+    return {
+        ...page,
+        creating,
+        available,
+        storing,
+        busy,
+        // The page's product (collection) page, when that is all it can offer.
+        offerShop: page.shop !== null && !creating,
+        // The CMS's form is for a page that is an entry, in its own mode,
+        // when the CMS offers one (`state.features`).
+        canForm: page.site && !creating && !page.pageless,
+        placeholder: creating ? labels.newPagePlaceholder : labels.placeholder,
+        canSave: state.features.includes('save') && !page.pageless,
+        canPublish: state.features.includes('publish') && !page.pageless,
+        showSignOut: page.site && signOut !== false,
+        // Sending needs something to say, and a path when making a page.
+        canSend: (prompt, path)=>!busy && prompt.trim() !== '' && (!creating || path.trim() !== '')
+    };
+};
+
 const SIDE_KEY = 'obelism-content-prompt-side';
 // How far the pointer moves before it drags the box, not clicks it.
 const DRAG_THRESHOLD_PX = 6;
@@ -1641,26 +1754,29 @@ const mountPromptBox = (doc, bridge, options = {})=>{
             error: true
         });
     const render = (state)=>{
-        const available = state.features.includes('prompt');
-        const storing = state.saving || state.publishing;
-        const busy = state.prompting || storing;
+        const page = bridgeView(bridge, state, {
+            creating
+        }, {
+            promptWithoutPage: options.promptWithoutPage,
+            signOut: options.signOut,
+            labels
+        });
+        const { available, busy, canCreate, site, pageless, onlyNew } = page;
+        const { offerShop, canForm } = page;
+        creating = page.creating;
+        if (!canForm) form = false;
         root.hidden = !available && !site;
         pill.hidden = open || !available;
         viewing.hidden = available || !site;
         panel.hidden = !open || !available;
-        const { canCreate, pageless, shopHere, onlyNew } = pageContext(bridge, state, options.promptWithoutPage);
-        const productHere = shopHere !== null;
-        const shopCopy$1 = shopCopy(labels, shopHere);
-        addProduct.lastChild.textContent = shopCopy$1.add;
-        if (!canCreate) creating = false;
-        if (onlyNew) creating = true;
-        if (creating || pageless || !site) form = false;
+        const words = page.shop ? shopCopy(labels, page.shop) : null;
+        addProduct.lastChild.textContent = words?.add ?? labels.addProductPage;
         // The form is there only while shown in the open panel.
         const showForm = open && available && form;
         if (showForm && !formSlot.mounted) formSlot.mount();
         else if (!showForm && formSlot.mounted) formSlot.unmount();
-        const offerProduct = productHere && !creating;
-        pillText.textContent = offerProduct ? shopCopy$1.add : onlyNew ? labels.newPage : labels.open;
+        const offerProduct = offerShop;
+        pillText.textContent = offerProduct ? words.add : onlyNew ? labels.newPage : labels.open;
         cancelNew.hidden = onlyNew;
         scope.hidden = creating || offerProduct;
         newScope.hidden = !creating;
@@ -1677,7 +1793,7 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         formLoader.hidden = !formSlot.loading;
         toolbar.hidden = picking;
         pagesSection.hidden = !picking;
-        input.placeholder = creating ? labels.newPagePlaceholder : labels.placeholder;
+        input.placeholder = page.placeholder;
         scopeText.textContent = state.selectedUid ? labels.scopeBlock : pageless ? labels.scopeNoPage : labels.scopeEntry;
         clearBlock.hidden = !state.selectedUid;
         pageIcon.hidden = !!state.selectedUid;
@@ -1700,16 +1816,16 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         minimize.setAttribute('aria-expanded', String(!minimized));
         minimizeIcon.hidden = minimized;
         expandIcon.hidden = !minimized;
-        send.disabled = busy || input.value.trim() === '' || creating && pathInput.value.trim() === '';
+        send.disabled = !page.canSend(input.value, pathInput.value);
         input.disabled = busy;
-        save.hidden = !state.features.includes('save') || pageless;
+        save.hidden = !page.canSave;
         save.disabled = busy || !state.unsaved;
         save.textContent = state.saving ? labels.saving : labels.save;
-        publish.hidden = !state.features.includes('publish') || pageless;
+        publish.hidden = !page.canPublish;
         publish.disabled = busy;
         publish.textContent = state.publishing ? labels.publishing : labels.publish;
-        signOut.hidden = !site || options.signOut === false;
-        pillSignOut.hidden = options.signOut === false;
+        signOut.hidden = !page.showSignOut;
+        pillSignOut.hidden = !page.showSignOut;
         if (options.actions) {
             options.actions.slot = open && available ? 'actions-footer' : 'actions-bar';
         }
@@ -1721,16 +1837,12 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         const loadingForm = form && formSlot.loading && !picking;
         const working = state.prompting;
         // A form opening says so in its own place.
-        const note = state.prompting ? creating ? labels.creating : offerProduct ? shopCopy$1.adding : labels.working : loadingForm ? '' : message?.text ?? (offerProduct ? shopCopy$1.hint : site && !creating && !picking && !state.selectedUid ? labels.selectHint : '');
+        const note = state.prompting ? creating ? labels.creating : offerProduct ? words.adding : labels.working : loadingForm ? '' : message?.text ?? (offerProduct ? words.hint : site && !creating && !picking && !state.selectedUid ? labels.selectHint : '');
         status.textContent = note;
         status.hidden = !note || minimized;
         status.className = `status${working ? ' working' : ''}${!busy && !loadingForm && message?.error ? ' error' : ''}`;
     };
     const refresh = ()=>render(bridge.getState());
-    const grow = ()=>{
-        input.style.height = 'auto';
-        input.style.height = `${input.scrollHeight}px`;
-    };
     const setForm = (next)=>{
         if (form === next) return;
         form = next;
@@ -1762,7 +1874,7 @@ const mountPromptBox = (doc, bridge, options = {})=>{
                 };
             }
             input.value = '';
-            grow();
+            fitToText(input);
         } catch (error) {
             message = failure$1(error);
         }
@@ -1858,7 +1970,7 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         void submit();
     });
     input.addEventListener('input', ()=>{
-        grow();
+        fitToText(input);
         refresh();
     });
     input.addEventListener('keydown', (event)=>{
@@ -2010,17 +2122,8 @@ const webUrl = (url)=>{
 };
 // 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_EDITING_COOKIE) continue;
-        try {
-            const basePath = decodeURIComponent(value.join('='));
-            return BASE_PATH.test(basePath) ? basePath : null;
-        } catch  {
-            return null;
-        }
-    }
-    return null;
+    const basePath = parseCookies(doc.cookie).get(SITE_EDITING_COOKIE);
+    return basePath && BASE_PATH.test(basePath) ? basePath : null;
 };
 const same = (a, b)=>JSON.stringify(a) === JSON.stringify(b);
 // Edits in the form further apart than this are separate undo steps.
@@ -2030,7 +2133,7 @@ const FORM_BURST_MS = 1000;
 const FORM_RENDER_MS = 300;
 const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/^\/+/, '')}`, productPath: ownProductPath, collectionPath: ownCollectionPath } = {})=>{
     const doc = win.document;
-    const emitter = createEmitter();
+    const { on, getState, setState, emit, listeners } = createBridgeState();
     const cleanup = [];
     const working = new Map();
     // Content before each prompt, newest last, for undo.
@@ -2038,21 +2141,20 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
     // Entries changed here since the last publish.
     const touched = new Set();
     let session = null;
-    const productPath = (handle, locale)=>ownProductPath ? ownProductPath(handle, locale) : (session?.productPath ?? '/products/{handle}').replaceAll('{handle}', encodeURIComponent(handle));
-    const collectionPath = (handle, locale)=>ownCollectionPath ? ownCollectionPath(handle, locale) : (session?.collectionPath ?? '/collections/{handle}').replaceAll('{handle}', encodeURIComponent(handle));
+    // Where a product or collection page is on the site: the site's own
+    // routing when it said, else the environment's setting in the CMS, else
+    // the CMS's default path.
+    const shopPath = (kind, handle, locale)=>{
+        const own = kind === 'product' ? ownProductPath : ownCollectionPath;
+        if (own) return own(handle, locale);
+        const { setting, route } = SHOP[kind];
+        return (session?.[setting] ?? route).replaceAll('{handle}', encodeURIComponent(handle));
+    };
     // 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 = {
-            ...state,
-            ...next
-        };
-        emitter.emit('change', state);
-    };
     const refreshUnsaved = ()=>setState({
             unsaved: [
                 ...working.values()
@@ -2085,26 +2187,6 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
         return data;
     };
     const pageEntryId = ()=>doc.querySelector(`[${ENTRY_ATTRIBUTE}]`)?.getAttribute(ENTRY_ATTRIBUTE) ?? null;
-    // The product the page shows (editableProduct), if it marks one.
-    const pageProduct = ()=>{
-        const element = doc.querySelector(`[${PRODUCT_ATTRIBUTE}]`);
-        const id = element?.getAttribute(PRODUCT_ATTRIBUTE);
-        const handle = element?.getAttribute(PRODUCT_HANDLE_ATTRIBUTE);
-        return id && handle ? {
-            id,
-            handle
-        } : null;
-    };
-    // The collection the page shows (editableCollection), if it marks one.
-    const pageCollection = ()=>{
-        const element = doc.querySelector(`[${COLLECTION_ATTRIBUTE}]`);
-        const id = element?.getAttribute(COLLECTION_ATTRIBUTE);
-        const handle = element?.getAttribute(COLLECTION_HANDLE_ATTRIBUTE);
-        return id && handle ? {
-            id,
-            handle
-        } : null;
-    };
     const entryFor = (uid)=>{
         const block = uid ? doc.querySelector(blockSelector(uid)) : null;
         return block?.closest(`[${ENTRY_ATTRIBUTE}]`)?.getAttribute(ENTRY_ATTRIBUTE) ?? pageEntryId();
@@ -2127,7 +2209,7 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
         if (loaded) return loaded;
         let pending = loading.get(entryId);
         if (!pending) {
-            pending = api(`entries/${encodeURIComponent(entryId)}`).then((entry)=>{
+            pending = api(siteApi.entry(entryId)).then((entry)=>{
                 const fresh = working.get(entryId) ?? {
                     content: entry.content,
                     saved: entry.content,
@@ -2143,7 +2225,7 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
     // 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 uid = option === undefined ? getState().selectedUid : option;
         const entryId = entryFor(uid);
         if (!entryId) {
             throw new Error('Nothing on this page is marked as an entry: add editable(entry)');
@@ -2153,29 +2235,42 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
             entryId
         };
     };
+    // The blocks selected on this page, and the tags clicked outside the
+    // blocks: only their rates show (statsOverlay.ts), so a few can be
+    // compared without every tag at once.
+    const revealed = new Set();
+    const asked = new Set();
+    const answered = new Set();
+    const stats = createStatsView(()=>mountStatsOverlay(win, {
+            selector: blockSelector,
+            onSelect: (uid)=>highlight(uid),
+            checked: (id)=>answered.has(id),
+            shows: (id, element)=>revealed.has(element.closest(`[${UID_ATTRIBUTE}]`)?.getAttribute(UID_ATTRIBUTE) ?? id)
+        }));
     const highlight = (uid)=>{
-        doc.querySelectorAll('[data-cms-selected]').forEach((element)=>{
-            element.removeAttribute('data-cms-selected');
-        });
-        if (state.selectedUid !== uid) setState({
+        if (getState().selectedUid !== uid) setState({
             selectedUid: uid
         });
-        if (uid) doc.querySelector(blockSelector(uid))?.setAttribute('data-cms-selected', '');
+        showSelection(doc, uid);
+        if (uid && !revealed.has(uid)) {
+            revealed.add(uid);
+            stats.refresh();
+        }
     };
     // 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;
+        if (listeners.update.size === 0) return;
         const content = working.get(entryId)?.content;
-        const { entry } = await api(`entries/${encodeURIComponent(entryId)}/preview`, {
+        const { entry } = await api(siteApi.preview(entryId), {
             content,
             locale: locale()
         });
-        emitter.emit('update', {
+        emit('update', {
             entry,
-            selectedUid: state.selectedUid
+            selectedUid: getState().selectedUid
         });
-        win.requestAnimationFrame(()=>highlight(state.selectedUid));
+        win.requestAnimationFrame(()=>highlight(getState().selectedUid));
     };
     const logError = (error)=>console.error('[@obelism/content bridge]', error);
     // Renders once the form's edits settle.
@@ -2187,13 +2282,13 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
         }, FORM_RENDER_MS));
     };
     const afterStore = (event)=>{
-        emitter.emit(event, {});
-        if (emitter.listeners.update.size === 0) win.location.reload();
+        emit(event, {});
+        if (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`, {
+            const { draftRevision } = await api(siteApi.save(entryId), {
                 content: entry.content,
                 baseRevision: entry.revision
             });
@@ -2205,7 +2300,36 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
         lastFormEdit = -Infinity;
         refreshUnsaved();
     };
-    const has = (feature)=>state.features.includes(feature);
+    const has = (feature)=>getState().features.includes(feature);
+    // Makes the page kind's page for `item`, or the one it has already, and
+    // reloads the page: the site's route finds it now (drafts, while editing).
+    const createShopPage = async (kind, item)=>{
+        const shop = SHOP[kind];
+        if (!item) {
+            throw new Error(`Nothing on this page is marked as a ${kind}: add ${shop.marker}`);
+        }
+        if (!has('create')) throw new Error('You may not add pages here');
+        if (getState().unsaved) {
+            throw new Error('Save or undo your changes before adding a page');
+        }
+        setState({
+            prompting: true
+        });
+        try {
+            const made = await api(siteApi.shopPages(kind), {
+                [kind]: {
+                    id: item.id,
+                    handle: item.handle
+                }
+            });
+            win.location.reload();
+            return made;
+        } finally{
+            setState({
+                prompting: false
+            });
+        }
+    };
     const bridge = {
         isEditing: true,
         mode: 'site',
@@ -2213,16 +2337,16 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
             return pageEntryId();
         },
         get product () {
-            return pageProduct();
+            return pageShopItem(doc, 'product');
         },
         get collection () {
-            return pageCollection();
+            return pageShopItem(doc, 'collection');
         },
         get environment () {
             return session?.environment ?? null;
         },
-        on: emitter.on,
-        getState: ()=>state,
+        on,
+        getState,
         async prompt (prompt, options = {}) {
             const text = prompt.trim();
             if (!text) throw new Error('Say what to change');
@@ -2233,7 +2357,7 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
             });
             try {
                 const entry = await load(entryId);
-                const result = await api(`entries/${encodeURIComponent(entryId)}/prompt`, {
+                const result = await api(siteApi.prompt(entryId), {
                     prompt: text,
                     content: entry.content,
                     locale: locale(),
@@ -2262,14 +2386,14 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
             if (!path.trim()) throw new Error('Say where the page goes, like /pricing');
             if (!has('create')) throw new Error('You may not add pages here');
             // Opening the new page would lose them.
-            if (state.unsaved) {
+            if (getState().unsaved) {
                 throw new Error('Save or undo your changes before adding a page');
             }
             setState({
                 prompting: true
             });
             try {
-                const created = await api('entries', {
+                const created = await api(siteApi.createEntry(), {
                     path,
                     prompt: text,
                     locale: locale(),
@@ -2289,66 +2413,12 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
                 });
             }
         },
-        async createProductPage (product = pageProduct() ?? undefined) {
-            if (!product) {
-                throw new Error('Nothing on this page is marked as a product: add editableProduct(product)');
-            }
-            if (!has('create')) throw new Error('You may not add pages here');
-            if (state.unsaved) {
-                throw new Error('Save or undo your changes before adding a page');
-            }
-            setState({
-                prompting: true
-            });
-            try {
-                const made = await api('product-pages', {
-                    product: {
-                        id: product.id,
-                        handle: product.handle
-                    }
-                });
-                // The site's product route finds its page now (drafts, while
-                // editing): show it.
-                win.location.reload();
-                return made;
-            } finally{
-                setState({
-                    prompting: false
-                });
-            }
-        },
-        async createCollectionPage (collection = pageCollection() ?? undefined) {
-            if (!collection) {
-                throw new Error('Nothing on this page is marked as a collection: add editableCollection(collection)');
-            }
-            if (!has('create')) throw new Error('You may not add pages here');
-            if (state.unsaved) {
-                throw new Error('Save or undo your changes before adding a page');
-            }
-            setState({
-                prompting: true
-            });
-            try {
-                const made = await api('collection-pages', {
-                    collection: {
-                        id: collection.id,
-                        handle: collection.handle
-                    }
-                });
-                // The site's collection route finds its page now (drafts, while
-                // editing): show it.
-                win.location.reload();
-                return made;
-            } finally{
-                setState({
-                    prompting: false
-                });
-            }
-        },
+        createProductPage: (product = pageShopItem(doc, 'product') ?? undefined)=>createShopPage('product', product),
+        createCollectionPage: (collection = pageShopItem(doc, 'collection') ?? undefined)=>createShopPage('collection', collection),
         async view (options = {}) {
             const { uid, entryId } = target(options.uid);
             const entry = await load(entryId);
-            const { view } = await api(`entries/${encodeURIComponent(entryId)}/view`, {
+            const { view } = await api(siteApi.view(entryId), {
                 content: entry.content,
                 locale: locale(),
                 uid
@@ -2366,7 +2436,7 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
             });
             try {
                 const entry = await load(entryId);
-                const result = await api(`entries/${encodeURIComponent(entryId)}/apply`, {
+                const result = await api(siteApi.apply(entryId), {
                     changes,
                     content: entry.content,
                     locale: locale(),
@@ -2418,7 +2488,7 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
             // changed: prompts, undo, a reload after saving, the selection.
             const show = ()=>{
                 if (closed || !frame) return;
-                const entryId = entryFor(state.selectedUid);
+                const entryId = entryFor(getState().selectedUid);
                 if (!entryId) return;
                 const entry = working.get(entryId);
                 if (!entry) {
@@ -2429,7 +2499,7 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
                     entryId,
                     content: entry.content,
                     locale: locale(),
-                    selectedUid: state.selectedUid
+                    selectedUid: getState().selectedUid
                 };
                 if (shown && shown.entryId === next.entryId && shown.content === next.content && shown.locale === next.locale && shown.selectedUid === next.selectedUid) {
                     return;
@@ -2464,7 +2534,7 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
                 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', {});
+                const { url } = await api(siteApi.form(), {});
                 if (closed) return;
                 const address = typeof url === 'string' ? url : '';
                 frame = mountFormFrame(win, container, address, title, {
@@ -2473,7 +2543,7 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
                     onError: (message)=>onError?.(message),
                     onEscape: ()=>onEscape?.()
                 });
-                unsubscribe = emitter.on('change', show);
+                unsubscribe = on('change', show);
                 show();
             };
             start().catch(fail);
@@ -2482,7 +2552,7 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
             };
         },
         async pages () {
-            const { pages } = await api('pages');
+            const { pages } = await api(siteApi.pages());
             const preferred = [
                 locale(),
                 session?.space.defaultLocale
@@ -2492,6 +2562,8 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
                 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 [];
+                const shop = shopKindOf(page);
+                const item = shopItemOf(page);
                 return [
                     {
                         entryId: page.entryId,
@@ -2499,7 +2571,7 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
                         contentType: page.contentType,
                         status: page.status,
                         path,
-                        url: page.product ? productPath(page.product.handle, code) : page.collection ? collectionPath(page.collection.handle, code) : pagePath(path, code),
+                        url: shop && item ? shopPath(shop, item.handle, code) : pagePath(path, code),
                         product: page.product ?? null,
                         collection: page.collection ?? null
                     }
@@ -2507,7 +2579,7 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
             });
         },
         openPage (page) {
-            if (state.unsaved && !win.confirm('Leave this page and lose the changes you have not saved?')) {
+            if (getState().unsaved && !win.confirm('Leave this page and lose the changes you have not saved?')) {
                 return;
             }
             // Asked already: no second question from `beforeunload`.
@@ -2556,7 +2628,7 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
                     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`, {});
+                    await api(siteApi.publish(entryId), {});
                     touched.delete(entryId);
                 }
             } finally{
@@ -2567,7 +2639,7 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
             afterStore('published');
         },
         signOut () {
-            if (state.unsaved && !win.confirm('Sign out and lose the changes you have not saved?')) {
+            if (getState().unsaved && !win.confirm('Sign out and lose the changes you have not saved?')) {
                 return;
             }
             working.clear();
@@ -2602,9 +2674,22 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
     // 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;
+        if (!getState().selecting) return;
         const target = event.target;
         const element = target?.closest?.(`[${UID_ATTRIBUTE}]`);
+        // A tagged element outside the blocks (a menu button) can't be
+        // selected: a click shows its rate, when the CMS answered for it.
+        const tag = element ? null : target?.closest?.(`[${TAG_ATTRIBUTE}]`);
+        const tagId = tag?.getAttribute(TAG_ATTRIBUTE);
+        if (tagId && answered.has(tagId)) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!revealed.has(tagId)) {
+                revealed.add(tagId);
+                stats.refresh();
+            }
+            return;
+        }
         if (!element) return;
         event.preventDefault();
         event.stopPropagation();
@@ -2613,20 +2698,18 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
     doc.addEventListener('click', onClick, true);
     cleanup.push(()=>doc.removeEventListener('click', onClick, true));
     const onBeforeUnload = (event)=>{
-        if (!state.unsaved) return;
+        if (!getState().unsaved) return;
         event.preventDefault();
         event.returnValue = '';
     };
     win.addEventListener('beforeunload', onBeforeUnload);
     cleanup.push(()=>win.removeEventListener('beforeunload', onBeforeUnload));
-    // The tags on the page's links (statsOverlay.ts) while blocks are
-    // outlined: the rates of the ids the page tags, asked for as they appear.
-    const asked = new Set();
-    const answered = new Set();
+    // The tags on the page's links (statsOverlay.ts) of what was selected,
+    // while blocks are outlined: the rates of the ids the page tags, asked for
+    // as they appear.
     let statsOff = false;
-    let overlay = null;
     let statsTimer = null;
-    const showStats = ()=>overlay?.update(state.stats, state.statsVisible);
+    const showStats = ()=>stats.update(getState().stats, getState().statsVisible);
     const loadStats = async ()=>{
         if (statsOff) return;
         const ids = [
@@ -2644,7 +2727,7 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
             ].map((element)=>element.getAttribute(ENTRY_ATTRIBUTE) ?? ''))
         ].filter(Boolean).slice(0, MAX_STATS_ENTRIES);
         try {
-            const { stats } = await api('stats', {
+            const { stats } = await api(siteApi.stats(), {
                 uids: batch,
                 ...entries.length > 0 && {
                     entries
@@ -2653,7 +2736,7 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
             batch.forEach((id)=>answered.add(id));
             setState({
                 stats: {
-                    ...state.stats,
+                    ...getState().stats,
                     ...readStats(stats)
                 }
             });
@@ -2662,11 +2745,6 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
             statsOff = true;
             return;
         }
-        overlay ??= mountStatsOverlay(win, {
-            selector: blockSelector,
-            onSelect: (uid)=>highlight(uid),
-            checked: (id)=>answered.has(id)
-        });
         showStats();
         if (ids.length > batch.length) scheduleStats();
     };
@@ -2682,9 +2760,9 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
     cleanup.push(()=>{
         statsObserver?.disconnect();
         if (statsTimer !== null) clearTimeout(statsTimer);
-        overlay?.destroy();
+        stats.destroy();
     });
-    api('session').then((info)=>{
+    api(siteApi.session()).then((info)=>{
         session = info;
         setState({
             features: info.features
@@ -3200,7 +3278,7 @@ const mountSiteEditor = (doc, bridge, options = {})=>{
     });
     const shopButtonText = element(doc, 'span');
     const shopButton = button('button primary', icon('plus'), shopButtonText);
-    const shop = element(doc, 'div', {
+    const shopBox = element(doc, 'div', {
         className: 'shop'
     }, shopText, shopButton);
     const log = element(doc, 'div', {
@@ -3209,7 +3287,7 @@ const mountSiteEditor = (doc, bridge, options = {})=>{
     log.setAttribute('role', 'log');
     const scroll = element(doc, 'div', {
         className: 'scroll'
-    }, note, intro, shop, log);
+    }, note, intro, shopBox, log);
     const pathInput = element(doc, 'input', {
         type: 'text',
         placeholder: labels.pathPlaceholder,
@@ -3616,14 +3694,18 @@ const mountSiteEditor = (doc, bridge, options = {})=>{
     };
     const render = (state)=>{
         if (destroyed) return;
-        const available = state.features.includes('prompt');
-        const storing = state.saving || state.publishing;
-        const busy = state.prompting || storing;
+        const page = bridgeView(bridge, state, {
+            creating
+        }, {
+            promptWithoutPage: options.promptWithoutPage,
+            signOut: options.signOut,
+            labels
+        });
+        const { available, busy, canCreate, pageless, site, shop, onlyNew } = page;
+        const { storing } = page;
+        const hasForm = page.canForm && state.features.includes('form');
         const shown = available && open;
-        const { site, canCreate, pageless, shopHere, onlyNew } = pageContext(bridge, state, options.promptWithoutPage);
-        if (!canCreate) creating = false;
-        if (onlyNew) creating = true;
-        const hasForm = site && !creating && !pageless && state.features.includes('form');
+        creating = page.creating;
         view = hasForm ? mode : 'ask';
         const waiting = pending().length > 0;
         if (!waiting || view === 'fields') gated = false;
@@ -3639,7 +3721,7 @@ const mountSiteEditor = (doc, bridge, options = {})=>{
         eye.setAttribute('aria-pressed', String(!outlines));
         eyeOn.hidden = !outlines;
         eyeOff.hidden = outlines;
-        exit.hidden = options.signOut === false;
+        exit.hidden = !page.showSignOut;
         // The site beside the panel, wide enough; a sheet over it otherwise.
         const docked = shown && wide;
         html.toggleAttribute('data-obelism-docked', docked);
@@ -3669,7 +3751,7 @@ const mountSiteEditor = (doc, bridge, options = {})=>{
         gateKeep.disabled = gateUndo.disabled = busy;
         ask.hidden = view !== 'ask';
         fields.hidden = view !== 'fields';
-        const offerShop = shopHere !== null && !creating;
+        const offerShop = page.offerShop;
         if (creating) {
             noteText.textContent = labels.newPage;
         } else if (state.selectedUid) {
@@ -3696,26 +3778,26 @@ const mountSiteEditor = (doc, bridge, options = {})=>{
         up.hidden = creating || !state.selectedUid;
         cancelNew.hidden = !creating || onlyNew;
         intro.hidden = answers.length > 0 || offerShop || creating;
-        shop.hidden = !offerShop;
-        const shopWords = shopCopy(labels, shopHere);
-        shopButtonText.textContent = state.prompting && offerShop ? shopWords.adding : shopWords.add;
+        shopBox.hidden = !offerShop;
+        const shopWords = shop ? shopCopy(labels, shop) : null;
+        shopButtonText.textContent = shopWords ? state.prompting && offerShop ? shopWords.adding : shopWords.add : '';
         shopButton.disabled = busy;
-        shopText.textContent = shopMessage?.text ?? shopWords.hint;
+        shopText.textContent = shopMessage?.text ?? shopWords?.hint ?? '';
         shopText.className = shopMessage?.error ? 'failure' : 'summary';
         composer.hidden = offerShop;
         pathRow.hidden = !creating;
         pathInput.disabled = busy;
-        input.placeholder = creating ? labels.newPagePlaceholder : labels.placeholder;
+        input.placeholder = page.placeholder;
         input.disabled = busy;
-        send.disabled = busy || input.value.trim() === '' || creating && pathInput.value.trim() === '';
+        send.disabled = !page.canSend(input.value, pathInput.value);
         send.setAttribute('aria-busy', String(state.prompting));
         sendIcon.hidden = state.prompting;
         sendWorking.hidden = !state.prompting;
         undo.hidden = waiting || !state.canUndo || creating;
         undo.disabled = busy;
-        save.hidden = !state.features.includes('save') || pageless;
+        save.hidden = !page.canSave;
         save.disabled = busy || waiting || !state.unsaved;
-        publish.hidden = !state.features.includes('publish') || pageless;
+        publish.hidden = !page.canPublish;
         publish.disabled = busy || waiting;
         if (options.actions) options.actions.slot = shown ? 'actions-footer' : 'actions-bar';
         foot.hidden = !site;
@@ -3753,10 +3835,6 @@ const mountSiteEditor = (doc, bridge, options = {})=>{
         scheduleMarks();
     };
     const refresh = ()=>render(bridge.getState());
-    const grow = ()=>{
-        input.style.height = 'auto';
-        input.style.height = `${input.scrollHeight}px`;
-    };
     const scrollDown = ()=>{
         scroll.scrollTop = scroll.scrollHeight;
     };
@@ -3885,7 +3963,7 @@ const mountSiteEditor = (doc, bridge, options = {})=>{
             textContent: `${labels.you} (${scopeName}): `
         }), prompt));
         input.value = '';
-        grow();
+        fitToText(input);
         const answer = addAnswer(prompt, uid);
         refresh();
         scrollDown();
@@ -3969,7 +4047,7 @@ const mountSiteEditor = (doc, bridge, options = {})=>{
         void submit();
     });
     input.addEventListener('input', ()=>{
-        grow();
+        fitToText(input);
         refresh();
     });
     input.addEventListener('keydown', (event)=>{
@@ -4058,11 +4136,8 @@ const mountSiteEditor = (doc, bridge, options = {})=>{
 // 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 bridge on the server, where there is nothing to edit.
+const SERVER_BRIDGE = createInertBridge();
 // 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.