@obelism/content 0.19.1 → 0.20.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;
@@ -544,7 +661,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.
@@ -689,7 +810,20 @@ textarea::placeholder { color: rgb(var(--theme-foreground-muted-rgb)); }
 	display: block; width: 100%; height: min(560px, 60vh); border: none; border-radius: 12px;
 	background: rgb(var(--theme-background-actions-rgb) / .45);
 }
-.form.loading iframe { visibility: hidden; }
+/* Loading, it keeps the form's own height, the spinner in the middle,
+   whatever the form says meanwhile; the frame shows once the form does. */
+.form.loading { position: relative; height: calc(min(560px, 60vh) + 12px); }
+.form.loading iframe { position: absolute; visibility: hidden; }
+.form-loader {
+	position: absolute; inset: 12px 12px 0; display: flex; align-items: center; justify-content: center;
+	gap: 10px; border-radius: 12px; color: rgb(var(--theme-foreground-muted-rgb));
+	background: rgb(var(--theme-background-actions-rgb) / .45);
+}
+.form-loader::before {
+	content: ''; width: 16px; height: 16px; 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;
+}
 /* New page: where it goes, above what it is for. */
 .path {
 	display: flex; align-items: center; gap: 10px; padding: 16px 22px 0;
@@ -862,9 +996,14 @@ const mountPromptBox = (doc, bridge, options = {})=>{
     });
     input.setAttribute('aria-label', labels.open);
     // Form mode (on the site): the CMS's form, mounted while shown.
+    const formLoader = element(doc, 'div', {
+        className: 'form-loader',
+        textContent: labels.formLoading
+    });
+    formLoader.setAttribute('role', 'status');
     const formBox = element(doc, 'div', {
         className: 'form'
-    });
+    }, formLoader);
     // What the prompt acts on: the whole page, or the selected block with a
     // way back to the page.
     const pageIcon = icon(doc, 'page');
@@ -905,8 +1044,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'
@@ -1160,8 +1300,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;
@@ -1171,7 +1323,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;
@@ -1185,6 +1337,7 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         input.hidden = form || picking || minimized || offerProduct;
         formBox.hidden = !form || picking || minimized;
         formBox.classList.toggle('loading', formLoading);
+        formLoader.hidden = !formLoading;
         toolbar.hidden = picking;
         pagesSection.hidden = !picking;
         input.placeholder = creating ? labels.newPagePlaceholder : labels.placeholder;
@@ -1225,8 +1378,9 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         pageChip.setAttribute('aria-expanded', String(picking));
         pageChipText.textContent = pages?.find(({ entryId })=>entryId === bridge.entryId)?.name ?? labels.pages;
         const loadingForm = form && formLoading && !picking;
-        const working = state.prompting || loadingForm;
-        const note = state.prompting ? creating ? labels.creating : offerProduct ? labels.addingProductPage : labels.working : loadingForm ? labels.formLoading : message?.text ?? (offerProduct ? labels.productPageHint : site && !creating && !picking && !state.selectedUid ? labels.selectHint : '');
+        const working = state.prompting;
+        // A form opening says so in its own place.
+        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' : ''}`;
@@ -1449,11 +1603,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);
         }
@@ -1650,7 +1812,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 = [];
@@ -1661,6 +1823,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;
@@ -1715,6 +1878,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();
@@ -1825,6 +1998,9 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}`, produc
         get product () {
             return pageProduct();
         },
+        get collection () {
+            return pageCollection();
+        },
         environment: null,
         on: emitter.on,
         getState: ()=>state,
@@ -1922,6 +2098,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);
@@ -2075,8 +2279,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
                     }
                 ];
             });
@@ -2221,7 +2426,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];
@@ -2235,12 +2440,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();
             };