@obelism/content 0.19.2 → 0.21.0

package/dist/bridge.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var preview = require('./preview-ijk3ixwb.js');
+var preview = require('./preview-ooq8w3jv.js');
 var site = require('./site.js');
 var config = require('./config-ci2hxmas.js');
 
@@ -12,7 +12,7 @@ var config = require('./config-ci2hxmas.js');
 //
 // Sites tag a block's clickable element with `data-numbers-id={block._uid}`
 // and load Obelism numbers' script; the CMS reads the rates from numbers
-// (the CMS's content/docs/guides/visual-editor.mdx, "Click rates").
+// (the CMS's content/docs/guides/canvas.mdx, "Click rates").
 const DEFAULT_STATS_LABELS = {
     clicked: '{rate}% clicked',
     title: '{clickers} of {viewers} visitors of its page clicked it in the last 30 days ({clicks} clicks)'
@@ -165,6 +165,91 @@ const mountStatsOverlay = (win, { selector, onSelect, labels: labelOverrides })=
     };
 };
 
+// Content's canvas shows a whole page in a frame as tall as the page, so the
+// frame is the page's height, not the screen's. Sizes in viewport-height
+// units (`vh`, `svh`, `lvh`, `dvh`) would follow it: a `100vh` hero makes
+// the page taller, the canvas makes the frame taller, and the hero grows
+// again. The editor sends the height the frame stands for (`viewport`), and
+// this rewrites those units in the page's stylesheets as pixels of that
+// height. Stylesheets from another origin can't be read and keep theirs.
+const UNIT = /(-?\d*\.?\d+)(?:s|l|d)?vh\b/g;
+// A value with its viewport-height units as pixels of `height`, or null when
+// it has none.
+const freezeValue = (value, height)=>{
+    UNIT.lastIndex = 0;
+    if (!UNIT.test(value)) return null;
+    return value.replace(UNIT, (_, amount)=>`${Math.round(Number(amount) * height / 100 * 100) / 100}px`);
+};
+const freezeStyle = (style, height)=>{
+    for(let index = 0; index < style.length; index++){
+        const property = style.item(index);
+        const frozen = freezeValue(style.getPropertyValue(property), height);
+        if (frozen !== null) {
+            style.setProperty(property, frozen, style.getPropertyPriority(property));
+        }
+    }
+};
+// Style rules, and those inside @media, @supports and @layer blocks.
+const freezeRules = (rules, height)=>{
+    for (const rule of Array.from(rules)){
+        const { style, cssRules } = rule;
+        if (style) freezeStyle(style, height);
+        if (cssRules) freezeRules(cssRules, height);
+    }
+};
+const createViewportUnits = (doc)=>{
+    const done = new WeakSet();
+    let height = null;
+    let observer = null;
+    let scheduled = false;
+    const freezeSheets = ()=>{
+        if (height === null) return;
+        for (const sheet of Array.from(doc.styleSheets)){
+            if (done.has(sheet)) continue;
+            let rules;
+            try {
+                rules = sheet.cssRules;
+            } catch  {
+                continue;
+            }
+            done.add(sheet);
+            freezeRules(rules, height);
+        }
+        doc.querySelectorAll('[style*="vh"]').forEach((element)=>{
+            freezeStyle(element.style, height);
+        });
+    };
+    return {
+        freeze (next) {
+            // Once: the frame stands for one screen size until it reloads.
+            if (height !== null || !(next > 0)) return;
+            height = next;
+            freezeSheets();
+            const View = doc.defaultView?.MutationObserver;
+            if (!View) return;
+            // Once per frame, however much the page changes in it.
+            observer = new View(()=>{
+                if (scheduled) return;
+                scheduled = true;
+                const run = ()=>{
+                    scheduled = false;
+                    freezeSheets();
+                };
+                if (doc.defaultView?.requestAnimationFrame) {
+                    doc.defaultView.requestAnimationFrame(run);
+                } else run();
+            });
+            observer.observe(doc.documentElement, {
+                childList: true,
+                subtree: true
+            });
+        },
+        destroy () {
+            observer?.disconnect();
+        }
+    };
+};
+
 // 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
@@ -173,10 +258,10 @@ const mountStatsOverlay = (win, { selector, onSelect, labels: labelOverrides })=
 // 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? }
+//   'size' | 'select' | 'prompt' | 'undo', uid?, id?, prompt?, height? }
 // - editor → site: { source: 'obelism-content-editor', type: 'connect' |
 //   'update' | 'select' | 'saved' | 'published' | 'features' |
-//   'promptResult' | 'promptState' | 'stats', … }
+//   '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.
@@ -230,6 +315,7 @@ 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 = {})=>{
@@ -288,6 +374,7 @@ const createBridge = (win, cmsOrigin)=>{
         entryId: params.get(preview.PREVIEW_PARAMS.entry),
         environment: params.get(preview.PREVIEW_PARAMS.environment),
         product: null,
+        collection: null,
         on: emitter.on,
         getState: ()=>state,
         ...INERT_METHODS,
@@ -342,9 +429,32 @@ const createBridge = (win, cmsOrigin)=>{
     };
     doc.addEventListener('click', onClick, true);
     cleanup.push(()=>doc.removeEventListener('click', onClick, true));
-    const ready = ()=>send('ready', {
-            url: win.location.href
+    // The page's height, which an editor on another origin can't read: the
+    // canvas makes its frame as tall as the page. With `ready`, and as `size`
+    // whenever it changes.
+    const pageHeight = ()=>Math.ceil(Math.max(doc.documentElement.scrollHeight, doc.body?.scrollHeight ?? 0));
+    let sentHeight = 0;
+    const ready = ()=>{
+        sentHeight = pageHeight();
+        send('ready', {
+            url: win.location.href,
+            height: sentHeight
         });
+    };
+    const Observer = win.ResizeObserver;
+    if (typeof Observer === 'function') {
+        const observer = new Observer(()=>{
+            const height = pageHeight();
+            if (height === sentHeight) return;
+            sentHeight = height;
+            send('size', {
+                height
+            });
+        });
+        observer.observe(doc.documentElement);
+        if (doc.body) observer.observe(doc.body);
+        cleanup.push(()=>observer.disconnect());
+    }
     // Prompts waiting for the editor's answer, by id.
     const pending = new Map();
     let nextId = 0;
@@ -408,6 +518,8 @@ const createBridge = (win, cmsOrigin)=>{
             settle(id)?.reject(new Error('The bridge was destroyed'));
         }
     });
+    const viewportUnits = createViewportUnits(doc);
+    cleanup.push(()=>viewportUnits.destroy());
     const onMessage = (event)=>{
         if (event.origin !== cmsOrigin || event.source !== win.parent) return;
         const data = event.data;
@@ -440,6 +552,10 @@ const createBridge = (win, cmsOrigin)=>{
                 statsVisible: data.visible !== false
             });
             showStats();
+        } 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.
+            viewportUnits.freeze(data.height);
         } else if (data.type === 'promptState') {
             setState({
                 canUndo: data.canUndo === true
@@ -481,6 +597,7 @@ const wrapScriptBridge = (script, params)=>{
         entryId: script.entryId,
         environment: params.get(preview.PREVIEW_PARAMS.environment),
         product: null,
+        collection: null,
         on: (event, listener)=>{
             if (event === 'update' && !forwardingUpdates) {
                 forwardingUpdates = true;
@@ -509,6 +626,7 @@ const DEFAULT_PROMPT_LABELS = {
     minimize: 'Minimize, to see the page',
     expand: 'Expand',
     scopeEntry: 'Whole page',
+    scopeNoPage: 'Whole page',
     scopeBlock: 'Selected block',
     clearBlock: 'Edit the whole page instead',
     working: 'Working on it…',
@@ -544,7 +662,11 @@ const DEFAULT_PROMPT_LABELS = {
     addProductPage: 'Add a product page',
     addingProductPage: 'Making the product page…',
     addedProductPage: 'Opening the product page…',
-    productPageHint: 'This product has no page yet. Add one for what the store doesn’t say.'
+    productPageHint: 'This product has no page yet. Add one for what the store doesn’t say.',
+    addCollectionPage: 'Add a collection page',
+    addingCollectionPage: 'Making the collection page…',
+    addedCollectionPage: 'Opening the collection page…',
+    collectionPageHint: 'This collection has no page yet. Add one for what goes around its products.'
 };
 const SIDE_KEY = 'obelism-content-prompt-side';
 // How far the pointer moves before it drags the box, not clicks it.
@@ -634,7 +756,7 @@ 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; }
+.bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
 .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);
@@ -765,7 +887,7 @@ button.chip:disabled { opacity: .5; }
 
 /* On the site: storing the draft, and the way out. */
 .footer {
-	display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 22px;
+	display: flex; flex-wrap: wrap; 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);
 }
@@ -923,8 +1045,9 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         className: 'action chip',
         type: 'button'
     }, icon(doc, 'newPage'), labels.newPage);
-    // A product the site marks (editableProduct) without a page of its own:
-    // one click makes its product page, which the page then shows.
+    // A product (collection) the site marks (editableProduct,
+    // editableCollection) without a page of its own: one click makes its
+    // page, which the page then shows.
     const addProduct = element(doc, 'button', {
         className: 'action chip product',
         type: 'button'
@@ -1019,6 +1142,16 @@ const mountPromptBox = (doc, bridge, options = {})=>{
     }, element(doc, 'label', {
         className: 'search'
     }, icon(doc, 'search'), search), optionList, pagesNote);
+    // The page's own controls (`actions`), in the footer while open and next
+    // to the pill while closed.
+    const actionsInFooter = element(doc, 'slot');
+    actionsInFooter.name = 'actions-footer';
+    const actionsInBar = element(doc, 'slot');
+    actionsInBar.name = 'actions-bar';
+    if (options.actions) {
+        options.actions.slot = 'actions-bar';
+        host.appendChild(options.actions);
+    }
     const unsaved = element(doc, 'span', {
         className: 'unsaved'
     });
@@ -1045,7 +1178,7 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         className: 'footer'
     }, pageChip, unsaved, element(doc, 'span', {
         className: 'spacer'
-    }), signOut, save, publish);
+    }), actionsInFooter, signOut, save, publish);
     const panel = element(doc, 'form', {
         className: 'panel'
     }, status, pathRow, input, formBox, toolbar, pagesSection, footer);
@@ -1053,7 +1186,7 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         className: 'root'
     }, element(doc, 'div', {
         className: 'bar'
-    }, pill, viewing), panel);
+    }, pill, viewing, actionsInBar), panel);
     shadow.append(element(doc, 'style', {
         textContent: CSS
     }), root);
@@ -1082,7 +1215,7 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         dragged = false;
         if (event.button !== 0 || !event.isPrimary) return;
         const target = event.target;
-        const control = target.closest('button, input, textarea, iframe, a, label, .pages, .form');
+        const control = target.closest('button, input, textarea, select, iframe, a, label, .pages, .form');
         if (control && control !== pill) return;
         const { left, right } = root.getBoundingClientRect();
         drag = {
@@ -1178,8 +1311,20 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         // A page of the site that isn't an entry (no `editable(entry)`, like a
         // hand-written /about) has nothing to edit: only New page.
         const pageless = site && bridge.entryId === null;
-        // …unless it shows a product: then Add a product page first.
-        const productHere = pageless && canCreate && bridge.product !== 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 productHere = shopHere !== null;
+        const shopCopy = shopHere === 'collection' ? {
+            add: labels.addCollectionPage,
+            adding: labels.addingCollectionPage,
+            hint: labels.collectionPageHint
+        } : {
+            add: labels.addProductPage,
+            adding: labels.addingProductPage,
+            hint: labels.productPageHint
+        };
+        addProduct.lastChild.textContent = shopCopy.add;
         const onlyNew = pageless && canCreate && !productHere;
         if (!canCreate) creating = false;
         if (onlyNew) creating = true;
@@ -1189,7 +1334,7 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         if (showForm && !formHandle) mountForm();
         else if (!showForm && formHandle) unmountForm();
         const offerProduct = productHere && !creating;
-        pillText.textContent = offerProduct ? labels.addProductPage : onlyNew ? labels.newPage : labels.open;
+        pillText.textContent = offerProduct ? shopCopy.add : onlyNew ? labels.newPage : labels.open;
         cancelNew.hidden = onlyNew;
         scope.hidden = creating || offerProduct;
         newScope.hidden = !creating;
@@ -1207,7 +1352,7 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         toolbar.hidden = picking;
         pagesSection.hidden = !picking;
         input.placeholder = creating ? labels.newPagePlaceholder : labels.placeholder;
-        scopeText.textContent = state.selectedUid ? labels.scopeBlock : labels.scopeEntry;
+        scopeText.textContent = state.selectedUid ? labels.scopeBlock : pageless ? labels.scopeNoPage : labels.scopeEntry;
         clearBlock.hidden = !state.selectedUid;
         pageIcon.hidden = !!state.selectedUid;
         blockIcon.hidden = !state.selectedUid;
@@ -1237,7 +1382,11 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         publish.hidden = !state.features.includes('publish') || pageless;
         publish.disabled = busy;
         publish.textContent = state.publishing ? labels.publishing : labels.publish;
-        signOut.hidden = !site;
+        signOut.hidden = !site || options.signOut === false;
+        pillSignOut.hidden = options.signOut === false;
+        if (options.actions) {
+            options.actions.slot = open && available ? 'actions-footer' : 'actions-bar';
+        }
         footer.hidden = !site;
         unsaved.hidden = !state.unsaved;
         pageChip.hidden = !site;
@@ -1246,7 +1395,7 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         const loadingForm = form && formLoading && !picking;
         const working = state.prompting;
         // A form opening says so in its own place.
-        const note = state.prompting ? creating ? labels.creating : offerProduct ? labels.addingProductPage : labels.working : loadingForm ? '' : message?.text ?? (offerProduct ? labels.productPageHint : site && !creating && !picking && !state.selectedUid ? labels.selectHint : '');
+        const note = state.prompting ? creating ? labels.creating : offerProduct ? shopCopy.adding : labels.working : loadingForm ? '' : message?.text ?? (offerProduct ? shopCopy.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' : ''}`;
@@ -1469,11 +1618,19 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         message = null;
         try {
             // The bridge reloads the page; this shows until it does.
-            await bridge.createProductPage();
-            message = {
-                text: labels.addedProductPage,
-                error: false
-            };
+            if (bridge.product) {
+                await bridge.createProductPage();
+                message = {
+                    text: labels.addedProductPage,
+                    error: false
+                };
+            } else {
+                await bridge.createCollectionPage();
+                message = {
+                    text: labels.addedCollectionPage,
+                    error: false
+                };
+            }
         } catch (error) {
             message = failure(error);
         }
@@ -1670,7 +1827,7 @@ const FORM_BURST_MS = 1000;
 // How long the page waits for the form's edits to settle before it shows
 // them.
 const FORM_RENDER_MS = 300;
-const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}`, productPath: ownProductPath } = {})=>{
+const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}`, productPath: ownProductPath, collectionPath: ownCollectionPath } = {})=>{
     const doc = win.document;
     const emitter = createEmitter();
     const cleanup = [];
@@ -1681,6 +1838,7 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}`, produc
     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));
     // 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;
@@ -1735,6 +1893,16 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}`, produc
             handle
         } : null;
     };
+    // The collection the page shows (editableCollection), if it marks one.
+    const pageCollection = ()=>{
+        const element = doc.querySelector(`[${preview.COLLECTION_ATTRIBUTE}]`);
+        const id = element?.getAttribute(preview.COLLECTION_ATTRIBUTE);
+        const handle = element?.getAttribute(preview.COLLECTION_HANDLE_ATTRIBUTE);
+        return id && handle ? {
+            id,
+            handle
+        } : null;
+    };
     const entryFor = (uid)=>{
         const block = uid ? doc.querySelector(blockSelector(uid)) : null;
         return block?.closest(`[${preview.ENTRY_ATTRIBUTE}]`)?.getAttribute(preview.ENTRY_ATTRIBUTE) ?? pageEntryId();
@@ -1845,6 +2013,9 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}`, produc
         get product () {
             return pageProduct();
         },
+        get collection () {
+            return pageCollection();
+        },
         environment: null,
         on: emitter.on,
         getState: ()=>state,
@@ -1942,6 +2113,34 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}`, produc
                 });
             }
         },
+        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
+                });
+            }
+        },
         async view (options = {}) {
             const { uid, entryId } = target(options.uid);
             const entry = await load(entryId);
@@ -2095,8 +2294,9 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}`, produc
                         contentType: page.contentType,
                         status: page.status,
                         path,
-                        url: page.product ? productPath(page.product.handle, code) : pagePath(path, code),
-                        product: page.product ?? null
+                        url: page.product ? productPath(page.product.handle, code) : page.collection ? collectionPath(page.collection.handle, code) : pagePath(path, code),
+                        product: page.product ?? null,
+                        collection: page.collection ?? null
                     }
                 ];
             });
@@ -2241,7 +2441,7 @@ const peekContentBridge = ()=>typeof window === 'undefined' ? null : window[KEY]
 //   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, pagePath, productPath } = {})=>{
+const getContentBridge = ({ url, prompt = true, pagePath, productPath, collectionPath } = {})=>{
     if (typeof window === 'undefined') return SERVER_BRIDGE;
     const win = window;
     if (win[KEY]) return win[KEY];
@@ -2255,12 +2455,26 @@ const getContentBridge = ({ url, prompt = true, pagePath, productPath } = {})=>{
         const sitePath = bridge.isEditing || win.parent !== win ? null : readSiteEditing(win.document);
         if (sitePath) bridge = createSiteBridge(win, sitePath, {
             pagePath,
-            productPath
+            productPath,
+            collectionPath
         });
         if (bridge.isEditing && prompt) {
-            const unmount = mountPromptBox(win.document, bridge, prompt === true ? {} : prompt);
+            const doc = win.document;
+            let unmount = ()=>{};
+            let destroyed = false;
+            const mount = ()=>{
+                if (destroyed) return;
+                unmount = mountPromptBox(doc, bridge, prompt === true ? {} : prompt);
+            };
+            // A script tag in <head> runs before there is a body to mount into.
+            if (doc.body) mount();
+            else doc.addEventListener('DOMContentLoaded', mount, {
+                once: true
+            });
             const destroy = bridge.destroy;
             bridge.destroy = ()=>{
+                destroyed = true;
+                doc.removeEventListener('DOMContentLoaded', mount);
                 unmount();
                 destroy();
             };