@obelism/content 0.17.0 → 0.19.1

package/dist/bridge.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var preview = require('./preview-mpwfmnla.js');
+var preview = require('./preview-ijk3ixwb.js');
 var site = require('./site.js');
 var config = require('./config-ci2hxmas.js');
 
@@ -229,6 +229,7 @@ const onlyWhileEditingSite = ()=>Promise.reject(new Error('Only while signed in
 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')),
     view: onlyWhileEditingSite,
     applyJson: onlyWhileEditingSite,
     openForm: (_container, options = {})=>{
@@ -286,6 +287,7 @@ const createBridge = (win, cmsOrigin)=>{
         mode: isEditing ? 'editor' : null,
         entryId: params.get(preview.PREVIEW_PARAMS.entry),
         environment: params.get(preview.PREVIEW_PARAMS.environment),
+        product: null,
         on: emitter.on,
         getState: ()=>state,
         ...INERT_METHODS,
@@ -478,6 +480,7 @@ const wrapScriptBridge = (script, params)=>{
         mode: script.isEditing ? 'editor' : null,
         entryId: script.entryId,
         environment: params.get(preview.PREVIEW_PARAMS.environment),
+        product: null,
         on: (event, listener)=>{
             if (event === 'update' && !forwardingUpdates) {
                 forwardingUpdates = true;
@@ -537,8 +540,24 @@ const DEFAULT_PROMPT_LABELS = {
     pagesEmpty: 'No pages match',
     pageCurrent: 'This page',
     pageDraft: 'Draft',
-    pageChanged: 'Changed'
+    pageChanged: 'Changed',
+    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.'
 };
+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;
+// How far ahead a flick carries the box: its speed for this long.
+const FLICK_MS = 150;
+// …at most this far, so one coarse pointer event isn't a flick across the
+// screen…
+const FLICK_MAX_PX = 120;
+// …and none when the pointer stood still this long before letting go.
+const FLICK_STALE_MS = 80;
+// Its distance from the side of the screen, as in the CSS.
+const EDGE_PX = 16;
 // 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"/>',
@@ -551,6 +570,7 @@ const ICONS = {
     chevrons: '<path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/>',
     search: '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
     check: '<path d="M20 6 9 17l-5-5"/>',
+    mark: '<path d="M12 3v18M3 12h18"/><g fill="currentColor" stroke="none"><circle cx="7" cy="7" r="1.75"/><circle cx="17" cy="7" r="1.75"/><circle cx="7" cy="17" r="1.75"/><circle cx="17" cy="17" r="1.75"/></g>',
     send: '<path d="M3.714 3.048a.498.498 0 0 0-.683.627l2.843 7.627a2 2 0 0 1 0 1.396l-2.842 7.627a.498.498 0 0 0 .682.627l18-8.5a.5.5 0 0 0 0-.904z"/><path d="M6 12h16"/>'
 };
 // Obelism's design tokens (obelism.studio/design.md), under their own names:
@@ -576,10 +596,20 @@ const CSS = `
 	--font-inter: 'InterVariable', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
 		Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
 	position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
+	transition: translate .45s cubic-bezier(0.34, 1.3, 0.64, 1);
 	z-index: 2147483647; width: min(640px, calc(100vw - 32px)); color-scheme: light dark;
 	font: 400 14px/1.4 var(--font-inter); color: rgb(var(--theme-foreground-rgb));
 	-webkit-font-smoothing: antialiased;
 }
+/* Dragged to a side of the screen, it stays there, springing into place. */
+.root[data-side='left'] { left: 16px; transform: none; }
+.root[data-side='right'] { left: auto; right: 16px; transform: none; }
+.root[data-side='left'] .bar { justify-content: flex-start; }
+.root[data-side='right'] .bar { justify-content: flex-end; }
+.root.dragging { transition: none; user-select: none; -webkit-user-select: none; }
+.root.dragging, .root.dragging * { cursor: grabbing !important; }
+.toolbar, .footer, .status { cursor: grab; touch-action: none; }
+.pill { touch-action: none; }
 @media (prefers-color-scheme: dark) {
 	.root {
 		--theme-foreground-rgb: var(--color-white-rgb);
@@ -615,7 +645,8 @@ button:focus-visible { outline: 2px solid rgb(var(--theme-accent-rgb)); outline-
 }
 button.pill:hover { color: rgb(var(--theme-foreground-rgb)); transform: translateY(-2px); }
 .pill > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.mark { color: rgb(var(--theme-accent-rgb)); font-size: 22px; line-height: 1; }
+.mark { color: rgb(var(--theme-accent-rgb)); }
+.mark svg { width: 20px; height: 20px; }
 .pill.compact { width: auto; height: 40px; padding: 0 18px; font-size: 14px; gap: 4px; }
 
 /* Open: a floating card, the text on top and a row of pill buttons below. */
@@ -633,7 +664,7 @@ button.pill:hover { color: rgb(var(--theme-foreground-rgb)); transform: translat
 @keyframes rise { from { opacity: 0; transform: translateY(8px) scale(.98); } }
 @keyframes spin { to { transform: rotate(1turn); } }
 @media (prefers-reduced-motion: reduce) {
-	.panel { animation: none; }
+	.root, .panel { animation: none; transition: none; }
 	.pill { transition: none; }
 }
 .status {
@@ -785,6 +816,11 @@ const icon = (doc, name)=>{
     span.innerHTML = `<svg viewBox="0 0 24 24">${ICONS[name]}</svg>`;
     return span;
 };
+const mark = (doc)=>{
+    const span = icon(doc, 'mark');
+    span.classList.add('mark');
+    return span;
+};
 // Mounts the box on the page; returns a function that removes it.
 const mountPromptBox = (doc, bridge, options = {})=>{
     const labels = {
@@ -803,11 +839,8 @@ const mountPromptBox = (doc, bridge, options = {})=>{
     const pill = element(doc, 'button', {
         className: 'pill',
         type: 'button'
-    }, pillText, // The Obelism mark.
-    element(doc, 'span', {
-        className: 'mark',
-        textContent: '⁜'
-    }));
+    }, pillText, // The Obelism mark (⁜), drawn: the glyph sits low in most fonts.
+    mark(doc));
     // Someone signed in who may only read: a note that drafts show, and a
     // way out.
     const viewing = element(doc, 'span', {
@@ -872,6 +905,12 @@ 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.
+    const addProduct = element(doc, 'button', {
+        className: 'action chip product',
+        type: 'button'
+    }, icon(doc, 'newPage'), labels.addProductPage);
     const cancelNew = element(doc, 'button', {
         type: 'button',
         title: labels.newPageCancel
@@ -921,7 +960,7 @@ const mountPromptBox = (doc, bridge, options = {})=>{
     });
     const toolbar = element(doc, 'div', {
         className: 'toolbar'
-    }, scope, newScope, modes, undo, newPage, element(doc, 'span', {
+    }, scope, newScope, modes, undo, addProduct, newPage, element(doc, 'span', {
         className: 'spacer'
     }), minimize, close, divider, send);
     // The pages (on the site): a chip naming this page, opening a search
@@ -1000,6 +1039,95 @@ const mountPromptBox = (doc, bridge, options = {})=>{
     shadow.append(element(doc, 'style', {
         textContent: CSS
     }), root);
+    // Dragged sideways, the box moves to the left, the middle or the right
+    // of the screen, whichever third it is let go (or flicked) in; this
+    // browser remembers where. From the pill, or the open box's bars, not its
+    // fields and buttons.
+    const win = doc.defaultView;
+    const readSide = ()=>{
+        try {
+            const side = win?.localStorage.getItem(SIDE_KEY);
+            return side === 'left' || side === 'right' ? side : 'center';
+        } catch  {
+            return 'center';
+        }
+    };
+    const placeAt = (side)=>{
+        if (side === 'center') delete root.dataset.side;
+        else root.dataset.side = side;
+    };
+    placeAt(readSide());
+    let drag = null;
+    // A drag that ends on the pill isn't a click on it.
+    let dragged = false;
+    root.addEventListener('pointerdown', (event)=>{
+        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');
+        if (control && control !== pill) return;
+        const { left, right } = root.getBoundingClientRect();
+        drag = {
+            id: event.pointerId,
+            startX: event.clientX,
+            x: event.clientX,
+            velocity: 0,
+            time: event.timeStamp,
+            moved: false,
+            min: Math.min(0, EDGE_PX - left),
+            max: Math.max(0, (win?.innerWidth ?? 0) - EDGE_PX - right)
+        };
+    });
+    root.addEventListener('pointermove', (event)=>{
+        if (!drag || event.pointerId !== drag.id) return;
+        const dx = event.clientX - drag.startX;
+        if (!drag.moved) {
+            if (Math.abs(dx) < DRAG_THRESHOLD_PX) return;
+            drag.moved = true;
+            root.classList.add('dragging');
+            try {
+                root.setPointerCapture(event.pointerId);
+            } catch  {}
+        }
+        const elapsed = event.timeStamp - drag.time;
+        if (elapsed > 0) drag.velocity = (event.clientX - drag.x) / elapsed;
+        drag.x = event.clientX;
+        drag.time = event.timeStamp;
+        // Past the edge, a third as far.
+        const clamped = Math.min(Math.max(dx, drag.min), drag.max);
+        root.style.translate = `${clamped + (dx - clamped) / 3}px 0`;
+    });
+    const drop = (event)=>{
+        if (!drag || event.pointerId !== drag.id) return;
+        const { moved, x, velocity, time } = drag;
+        drag = null;
+        if (!moved) return;
+        dragged = true;
+        // Springs from where it was let go to its new place.
+        const before = root.getBoundingClientRect().left;
+        const width = win?.innerWidth ?? 0;
+        const flick = event.timeStamp - time > FLICK_STALE_MS ? 0 : Math.min(Math.max(velocity * FLICK_MS, -FLICK_MAX_PX), FLICK_MAX_PX);
+        const projected = x + flick;
+        const side = projected < width / 3 ? 'left' : projected > width * 2 / 3 ? 'right' : 'center';
+        placeAt(side);
+        root.style.translate = '';
+        const after = root.getBoundingClientRect().left;
+        root.style.translate = `${before - after}px 0`;
+        void root.offsetWidth;
+        root.classList.remove('dragging');
+        root.style.translate = '';
+        try {
+            win?.localStorage.setItem(SIDE_KEY, side);
+        } catch  {}
+    };
+    root.addEventListener('pointerup', drop);
+    root.addEventListener('pointercancel', drop);
+    root.addEventListener('click', (event)=>{
+        if (!dragged) return;
+        dragged = false;
+        event.preventDefault();
+        event.stopPropagation();
+    }, true);
     let open = false;
     let minimized = false;
     let creating = false;
@@ -1032,7 +1160,9 @@ 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;
-        const onlyNew = pageless && canCreate;
+        // …unless it shows a product: then Add a product page first.
+        const productHere = pageless && canCreate && bridge.product !== null;
+        const onlyNew = pageless && canCreate && !productHere;
         if (!canCreate) creating = false;
         if (onlyNew) creating = true;
         if (creating || pageless || !site) form = false;
@@ -1040,16 +1170,19 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         const showForm = open && available && form;
         if (showForm && !formHandle) mountForm();
         else if (!showForm && formHandle) unmountForm();
-        pillText.textContent = onlyNew ? labels.newPage : labels.open;
+        const offerProduct = productHere && !creating;
+        pillText.textContent = offerProduct ? labels.addProductPage : onlyNew ? labels.newPage : labels.open;
         cancelNew.hidden = onlyNew;
-        scope.hidden = creating;
+        scope.hidden = creating || offerProduct;
         newScope.hidden = !creating;
+        addProduct.hidden = !offerProduct;
+        addProduct.disabled = busy;
         newPage.hidden = creating || form || !canCreate;
         newPage.disabled = busy;
         if (minimized) picking = false;
         pathRow.hidden = !creating || picking || minimized;
         pathInput.disabled = busy;
-        input.hidden = form || picking || minimized;
+        input.hidden = form || picking || minimized || offerProduct;
         formBox.hidden = !form || picking || minimized;
         formBox.classList.toggle('loading', formLoading);
         toolbar.hidden = picking;
@@ -1069,8 +1202,8 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         undo.hidden = creating || !state.canUndo;
         undo.disabled = busy;
         // The form applies edits as they are made.
-        send.hidden = form || minimized;
-        divider.hidden = form || minimized;
+        send.hidden = form || minimized || offerProduct;
+        divider.hidden = form || minimized || offerProduct;
         const toggleLabel = minimized ? labels.expand : labels.minimize;
         minimize.title = toggleLabel;
         minimize.setAttribute('aria-label', toggleLabel);
@@ -1093,7 +1226,7 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         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 : labels.working : loadingForm ? labels.formLoading : message?.text ?? (site && !creating && !picking && !state.selectedUid ? labels.selectHint : '');
+        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 : '');
         status.textContent = note;
         status.hidden = !note || minimized;
         status.className = `status${working ? ' working' : ''}${!busy && !loadingForm && message?.error ? ' error' : ''}`;
@@ -1297,12 +1430,35 @@ const mountPromptBox = (doc, bridge, options = {})=>{
         refresh();
         if (!minimized) (form ? minimize : input).focus();
     });
+    // Any other button of the minimized box expands it first (capture, so
+    // its own handler then sees the box open), e.g. the pages or New page.
+    panel.addEventListener('click', (event)=>{
+        if (!minimized) return;
+        const button = event.target.closest('button');
+        if (!button || button === minimize || button === close) return;
+        minimized = false;
+        refresh();
+    }, true);
     save.addEventListener('click', ()=>void store('save'));
     publish.addEventListener('click', ()=>void store('publish'));
     signOut.addEventListener('click', ()=>bridge.signOut());
     pillSignOut.addEventListener('click', ()=>bridge.signOut());
     clearBlock.addEventListener('click', ()=>bridge.select(null));
     newPage.addEventListener('click', ()=>setCreating(true));
+    addProduct.addEventListener('click', async ()=>{
+        message = null;
+        try {
+            // The bridge reloads the page; this shows until it does.
+            await bridge.createProductPage();
+            message = {
+                text: labels.addedProductPage,
+                error: false
+            };
+        } catch (error) {
+            message = failure(error);
+        }
+        refresh();
+    });
     cancelNew.addEventListener('click', ()=>setCreating(false));
     promptMode.addEventListener('click', ()=>setForm(false));
     formMode.addEventListener('click', ()=>setForm(true));
@@ -1374,13 +1530,15 @@ const mountPromptBox = (doc, bridge, options = {})=>{
 // Messages are only exchanged with the URL's origin, and only with the
 // iframe's window:
 // - form → bridge: { source: 'obelism-content-form', type: 'ready' |
-//   'change' | 'error' | 'height', content?, message?, height? } —
-//   `change` carries the whole entry content after an edit, `height` the
-//   form's own height in px, which the iframe takes (up to 60vh)
+//   'loaded' | 'change' | 'error' | 'height', loading?, content?, message?,
+//   height? } — `ready` with `loading: true` when the form still loads the
+//   entry after it and says `loaded` once it shows (a CMS from before says
+//   only `ready`), `change` carries the whole entry content after an edit,
+//   `height` the form's own height in px, which the iframe takes (up to 60vh)
 // - bridge → form: { source: 'obelism-content-bridge', type: 'content',
 //   entryId, content, locale, selectedUid }
 const FORM_SOURCE = 'obelism-content-form';
-// How long the form may take to say it is ready.
+// How long the form may take to show.
 const FORM_READY_TIMEOUT_MS = 30_000;
 const isObject = (value)=>!!value && typeof value === 'object' && !Array.isArray(value);
 // Mounts the form at `url` in `container`. The URL is single use: mount a
@@ -1398,6 +1556,7 @@ const mountFormFrame = (win, container, url, title, handlers)=>{
     iframe.title = title;
     iframe.src = url;
     let ready = false;
+    let shown = false;
     let latest = null;
     const post = ()=>{
         if (!ready || !latest) return;
@@ -1408,8 +1567,13 @@ const mountFormFrame = (win, container, url, title, handlers)=>{
         }, origin);
     };
     const timer = setTimeout(()=>{
-        if (!ready) handlers.onError('The form did not open');
+        if (!shown) handlers.onError('The form did not open');
     }, FORM_READY_TIMEOUT_MS);
+    const show = ()=>{
+        shown = true;
+        clearTimeout(timer);
+        handlers.onReady();
+    };
     const onMessage = (event)=>{
         if (event.origin !== origin || !iframe.contentWindow || event.source !== iframe.contentWindow) {
             return;
@@ -1419,9 +1583,12 @@ const mountFormFrame = (win, container, url, title, handlers)=>{
         if (data.type === 'ready') {
             // Again after the form reloads itself: it gets the content again.
             ready = true;
-            clearTimeout(timer);
-            handlers.onReady();
             post();
+            // Until the form loaded the entry, the box's own loading state
+            // stands in for the form's.
+            if (data.loading !== true) show();
+        } else if (data.type === 'loaded') {
+            if (ready) show();
         } else if (data.type === 'change' && isObject(data.content)) {
             handlers.onChange(data.content, typeof data.entryId === 'string' ? data.entryId : undefined);
         } else if (data.type === 'height') {
@@ -1483,7 +1650,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}` } = {})=>{
+const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}`, productPath: ownProductPath } = {})=>{
     const doc = win.document;
     const emitter = createEmitter();
     const cleanup = [];
@@ -1493,6 +1660,7 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}` } = {})
     // 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));
     // 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;
@@ -1537,6 +1705,16 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}` } = {})
         return data;
     };
     const pageEntryId = ()=>doc.querySelector(`[${preview.ENTRY_ATTRIBUTE}]`)?.getAttribute(preview.ENTRY_ATTRIBUTE) ?? null;
+    // The product the page shows (editableProduct), if it marks one.
+    const pageProduct = ()=>{
+        const element = doc.querySelector(`[${preview.PRODUCT_ATTRIBUTE}]`);
+        const id = element?.getAttribute(preview.PRODUCT_ATTRIBUTE);
+        const handle = element?.getAttribute(preview.PRODUCT_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();
@@ -1644,6 +1822,9 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}` } = {})
         get entryId () {
             return pageEntryId();
         },
+        get product () {
+            return pageProduct();
+        },
         environment: null,
         on: emitter.on,
         getState: ()=>state,
@@ -1713,6 +1894,34 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}` } = {})
                 });
             }
         },
+        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 view (options = {}) {
             const { uid, entryId } = target(options.uid);
             const entry = await load(entryId);
@@ -1866,7 +2075,8 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path}` } = {})
                         contentType: page.contentType,
                         status: page.status,
                         path,
-                        url: pagePath(path, code)
+                        url: page.product ? productPath(page.product.handle, code) : pagePath(path, code),
+                        product: page.product ?? null
                     }
                 ];
             });
@@ -2011,7 +2221,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 } = {})=>{
+const getContentBridge = ({ url, prompt = true, pagePath, productPath } = {})=>{
     if (typeof window === 'undefined') return SERVER_BRIDGE;
     const win = window;
     if (win[KEY]) return win[KEY];
@@ -2024,7 +2234,8 @@ const getContentBridge = ({ url, prompt = true, pagePath } = {})=>{
         // own `/cms/login` (@obelism/content/site).
         const sitePath = bridge.isEditing || win.parent !== win ? null : readSiteEditing(win.document);
         if (sitePath) bridge = createSiteBridge(win, sitePath, {
-            pagePath
+            pagePath,
+            productPath
         });
         if (bridge.isEditing && prompt) {
             const unmount = mountPromptBox(win.document, bridge, prompt === true ? {} : prompt);