@obelism/content 0.28.0 → 0.28.1

package/dist/bridge.js

@@ -4,18 +4,21 @@ var preview = require('./preview-c4giufnr.js');
 var site = require('./site.js');
 var config = require('./config-ci2hxmas.js');
 
-// Click rates on the page: in the visual editor, a small label on each block
-// that numbers has clicks for ("24% clicked"), from the editor's `stats`
-// message. The editor's "Show click rates" switch turns it on and off. Plain
-// DOM in a shadow root, like the prompt box, in a fixed layer that follows
-// the blocks as the page scrolls, resizes and re-renders.
-//
-// 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/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)'
+    clickedShort: '{rate}%',
+    title: '{clickers} of {viewers} visitors of its page clicked it in the last 30 days ({clicks} clicks)',
+    noClicks: 'No clicks yet in the last 30 days',
+    counting: '{clicks} clicks so far: a click rate once {needed} visitors saw its page ({viewers} yet)'
+};
+// Fewer visitors than this make a rate noise.
+const MIN_VIEWERS = 20;
+const TAG_ATTRIBUTE = 'data-numbers-id';
+const statsStatus = (block)=>!block || block.clicks === 0 ? 'none' : block.viewers < MIN_VIEWERS ? 'counting' : 'rate';
+// Lucide's x and hourglass.
+const ICONS$1 = {
+    none: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
+    counting: '<path d="M5 22h14"/><path d="M5 2h14"/><path d="M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22"/><path d="M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2"/>'
 };
 const fill$1 = (template, values)=>template.replace(/\{(\w+)\}/g, (match, key)=>key in values ? String(values[key]) : match);
 // The same tokens as the prompt box: an ink pill, paper text, the orange
@@ -41,37 +44,42 @@ const CSS$2 = `
 	content: ''; width: 8px; height: 8px; border-radius: 50%;
 	background: rgb(212 130 30);
 }
-.badge[data-place='beside'] { transform: translateY(-50%); }
-.badge[data-place='above'] { transform: translate(-100%, -100%); }
-.badge:focus-visible { outline: 2px solid rgb(212 130 30); outline-offset: 2px; }
+.badge:focus-visible, .tag:focus-visible { outline: 2px solid rgb(212 130 30); outline-offset: 2px; }
+.tag {
+	position: absolute; transform: translate(-50%, -50%);
+	display: grid; place-items: center; width: 20px; height: 20px; padding: 0;
+	cursor: pointer; pointer-events: auto; border: 0; border-radius: 50%;
+	color: rgb(242 240 236); background: rgb(23 22 20 / .88);
+	box-shadow: 0 4px 10px -6px rgb(23 22 20 / .5);
+}
+.tag::after { content: ''; position: absolute; inset: -6px; }
+.tag[data-status='counting'] { color: rgb(212 130 30); }
+.tag[data-status='rate'] {
+	width: auto; height: 20px; padding: 0 7px; border-radius: 5em;
+	font-size: 11px; transform: translate(-70%, -50%);
+}
+.tag svg {
+	width: 12px; height: 12px; fill: none; stroke: currentColor;
+	stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
+}
 `;
-// Inset from a block's top-right corner, or gap beside a small element.
 const INSET = 8;
-// Below this an element is a button or a link, not a section: its label goes
-// beside it (or above, without room on the right) so it doesn't cover it.
+// Below this an element is a button or a link, not a section: a tag on its
+// corner rather than a label over it.
 const SMALL_HEIGHT = 64;
-// Room a label needs beside an element.
-const LABEL_WIDTH = 140;
-// Where a label goes for an element's box: inside the top-right corner of a
-// block, beside a small element, or above one at the right edge.
-const placeLabel = (rect, viewportWidth)=>{
-    if (rect.height >= SMALL_HEIGHT) return {
-        place: 'inside',
+// A block's label: inside its top-right corner, in view when it starts above
+// the screen.
+const placeLabel = (rect)=>({
         top: Math.max(rect.top, 0) + INSET,
         left: rect.right - INSET
-    };
-    if (rect.right + INSET + LABEL_WIDTH <= viewportWidth) return {
-        place: 'beside',
-        top: rect.top + rect.height / 2,
-        left: rect.right + INSET
-    };
-    return {
-        place: 'above',
-        top: rect.top - INSET / 2,
-        left: rect.right
-    };
-};
-const mountStatsOverlay = (win, { selector, onSelect, labels: labelOverrides })=>{
+    });
+// A tag's: on the element's top-right corner, like a notification badge,
+// kept on screen.
+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 doc = win.document;
     const labels = {
         ...DEFAULT_STATS_LABELS,
@@ -91,37 +99,71 @@ const mountStatsOverlay = (win, { selector, onSelect, labels: labelOverrides })=
     let stats = {};
     let visible = false;
     let frame = null;
+    const draw = (id, element, blocks)=>{
+        const rect = element.getBoundingClientRect();
+        // Not rendered, or off screen.
+        if (!rect.width && !rect.height) return;
+        if (rect.bottom < 0 || rect.top > win.innerHeight) return;
+        const block = stats[id];
+        const status = statsStatus(block);
+        const label = doc.createElement('button');
+        label.type = 'button';
+        label.dataset.uid = id;
+        label.dataset.status = status;
+        const rate = block ? Math.round(block.rate * 100) : 0;
+        label.title = status === 'rate' ? fill$1(labels.title, {
+            clickers: block.clickers,
+            viewers: block.viewers,
+            clicks: block.clicks
+        }) : status === 'none' ? labels.noClicks : fill$1(labels.counting, {
+            clicks: block.clicks,
+            viewers: block.viewers,
+            needed: MIN_VIEWERS
+        });
+        const { top, left } = status === 'rate' && rect.height >= SMALL_HEIGHT ? placeLabel(rect) : placeTag(rect, {
+            width: win.innerWidth,
+            height: win.innerHeight
+        });
+        if (status === 'rate' && rect.height >= SMALL_HEIGHT) {
+            label.className = 'badge';
+            label.textContent = fill$1(labels.clicked, {
+                rate
+            });
+        } else {
+            label.className = 'tag';
+            if (status === 'rate') label.textContent = fill$1(labels.clickedShort, {
+                rate
+            });
+            else label.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true">${ICONS$1[status]}</svg>`;
+            label.setAttribute('aria-label', label.title);
+        }
+        label.style.top = `${top}px`;
+        label.style.left = `${left}px`;
+        // Its id names a block by convention; else the block around it.
+        const uid = blocks.has(id) ? id : element.closest(`[${preview.UID_ATTRIBUTE}]`)?.getAttribute(preview.UID_ATTRIBUTE);
+        if (uid) label.addEventListener('click', ()=>onSelect(uid));
+        layer.appendChild(label);
+    };
     const render = ()=>{
         frame = null;
         layer.replaceChildren();
         layer.hidden = !visible;
         if (!visible) return;
-        const height = win.innerHeight;
-        for (const [uid, block] of Object.entries(stats)){
-            const element = doc.querySelector(selector(uid));
-            if (!element) continue;
-            const rect = element.getBoundingClientRect();
-            // Not rendered, or off screen.
-            if (!rect.width && !rect.height) continue;
-            if (rect.bottom < 0 || rect.top > height) continue;
-            const badge = doc.createElement('button');
-            badge.type = 'button';
-            badge.className = 'badge';
-            badge.dataset.uid = uid;
-            badge.textContent = fill$1(labels.clicked, {
-                rate: Math.round(block.rate * 100)
-            });
-            badge.title = fill$1(labels.title, {
-                clickers: block.clickers,
-                viewers: block.viewers,
-                clicks: block.clicks
-            });
-            const { place, top, left } = placeLabel(rect, win.innerWidth);
-            badge.dataset.place = place;
-            badge.style.top = `${top}px`;
-            badge.style.left = `${left}px`;
-            badge.addEventListener('click', ()=>onSelect(uid));
-            layer.appendChild(badge);
+        const blocks = new Set();
+        for (const element of doc.querySelectorAll(`[${preview.UID_ATTRIBUTE}]`))blocks.add(element.getAttribute(preview.UID_ATTRIBUTE) ?? '');
+        const isChecked = checked ?? ((id)=>blocks.has(id));
+        const tagged = new Set();
+        for (const element of doc.querySelectorAll(`[${TAG_ATTRIBUTE}]`)){
+            const id = element.getAttribute(TAG_ATTRIBUTE);
+            if (!id || !stats[id] && !isChecked(id)) continue;
+            tagged.add(id);
+            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);
         }
     };
     // At most once a frame, however many scroll and mutation events come in.
@@ -786,6 +828,7 @@ const DEFAULT_SITE_EDITOR_LABELS = {
     envProduction: 'live',
     scopeNoteBlock: 'Working on {name}. Click another block to switch.',
     scopeNotePage: 'Working on the whole page. Click a block to change only that block.',
+    scopeUp: 'Up to {name}',
     block: 'Block',
     previewChip: '{name} · preview',
     askIntro: 'Describe a change and Obelism shows it on the page. Nothing is stored until you keep it and save.',
@@ -1950,6 +1993,10 @@ const mountFormFrame = (win, container, url, title, handlers)=>{
 // kept in step with the content here, see formFrame.ts), edits JSON (`view`,
 // then `applyJson`: the raw alternative), and lists the space's pages to go
 // to one.
+// The CMS's limit on ids in one stats request.
+const MAX_STATS_IDS = 500;
+// After the page changes, before asking for the ids it newly tags.
+const STATS_DELAY_MS = 1000;
 // Plain path segments only: the URL parser drops tabs and newlines and reads
 // \ as /, so anything looser can resolve to another origin.
 const BASE_PATH = /^(?:\/[\w.~-]+)+$/;
@@ -2536,8 +2583,10 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
             if (selecting) doc.documentElement.setAttribute('data-cms-selecting', '');
             else doc.documentElement.removeAttribute('data-cms-selecting');
             setState({
-                selecting
+                selecting,
+                statsVisible: selecting
             });
+            showStats();
         },
         destroy () {
             closeForm?.();
@@ -2571,11 +2620,72 @@ const createSiteBridge = (win, basePath, { pagePath = (path)=>`/${path.replace(/
     };
     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();
+    let statsOff = false;
+    let overlay = null;
+    let statsTimer = null;
+    const showStats = ()=>overlay?.update(state.stats, state.statsVisible);
+    const loadStats = async ()=>{
+        if (statsOff) return;
+        const ids = [
+            ...new Set([
+                ...doc.querySelectorAll(`[${TAG_ATTRIBUTE}]`)
+            ].map((element)=>element.getAttribute(TAG_ATTRIBUTE) ?? ''))
+        ].filter((id)=>id && !asked.has(id));
+        const batch = ids.slice(0, MAX_STATS_IDS);
+        if (!batch.length) return;
+        batch.forEach((id)=>asked.add(id));
+        try {
+            const { stats } = await api('stats', {
+                uids: batch
+            });
+            batch.forEach((id)=>answered.add(id));
+            setState({
+                stats: {
+                    ...state.stats,
+                    ...readStats(stats)
+                }
+            });
+        } catch  {
+            // No tags rather than wrong ones, and no asking again.
+            statsOff = true;
+            return;
+        }
+        overlay ??= mountStatsOverlay(win, {
+            selector: blockSelector,
+            onSelect: (uid)=>highlight(uid),
+            checked: (id)=>answered.has(id)
+        });
+        showStats();
+        if (ids.length > batch.length) scheduleStats();
+    };
+    const scheduleStats = ()=>{
+        if (statsTimer !== null || statsOff) return;
+        statsTimer = setTimeout(()=>{
+            statsTimer = null;
+            void loadStats();
+        }, STATS_DELAY_MS);
+    };
+    const Observer = win.MutationObserver;
+    const statsObserver = typeof Observer === 'function' ? new Observer(scheduleStats) : null;
+    cleanup.push(()=>{
+        statsObserver?.disconnect();
+        if (statsTimer !== null) clearTimeout(statsTimer);
+        overlay?.destroy();
+    });
     api('session').then((info)=>{
         session = info;
         setState({
             features: info.features
         });
+        void loadStats();
+        statsObserver?.observe(doc.body, {
+            childList: true,
+            subtree: true
+        });
     }).catch((error)=>console.error('[@obelism/content bridge]', error));
     return bridge;
 };
@@ -2759,6 +2869,7 @@ button:disabled { cursor: not-allowed; }
 	flex: none; font-size: 12px; font-weight: 500; text-decoration: underline; text-underline-offset: 2px;
 }
 .note button::after { content: ''; position: absolute; inset: -13px -6px; }
+.scroll > .note { position: sticky; top: 0; z-index: 1; }
 .intro { color: rgb(var(--muted)); font-size: 13px; }
 .gate {
 	display: grid; gap: 8px; margin: 10px 14px 0; padding: 10px 12px; border-radius: 12px;
@@ -3067,11 +3178,11 @@ const mountSiteEditor = (doc, bridge, options = {})=>{
     }, gateKeep, gateUndo));
     gate.setAttribute('role', 'alert');
     const noteText = element(doc, 'span');
-    const wholePage = button('', labels.scopeEntry);
+    const up = button('', labels.scopeEntry);
     const cancelNew = button('', labels.newPageCancel);
     const note = element(doc, 'div', {
         className: 'note'
-    }, icon('scope'), noteText, wholePage, cancelNew);
+    }, icon('scope'), noteText, up, cancelNew);
     const intro = element(doc, 'p', {
         className: 'intro',
         textContent: labels.askIntro
@@ -3137,10 +3248,10 @@ const mountSiteEditor = (doc, bridge, options = {})=>{
     }, formNote);
     // The same way back as the ask view's note, above the form it changes.
     const fieldsNoteText = element(doc, 'span');
-    const wholePageFields = button('', labels.scopeEntry);
+    const upFields = button('', labels.scopeEntry);
     const fieldsNote = element(doc, 'div', {
         className: 'note'
-    }, icon('scope'), fieldsNoteText, wholePageFields);
+    }, icon('scope'), fieldsNoteText, upFields);
     const fields = element(doc, 'div', {
         className: 'fields',
         id: 'obelism-fields'
@@ -3220,6 +3331,7 @@ const mountSiteEditor = (doc, bridge, options = {})=>{
     let hoverUid = null;
     // Block names by uid, from the views; null when it couldn't be read.
     const names = new Map();
+    const parents = new Map();
     let pageNames = 'idle';
     let destroyed = false;
     const formSlot = createFormSlot(bridge, formBox, labels.formTitle, {
@@ -3255,13 +3367,21 @@ const mountSiteEditor = (doc, bridge, options = {})=>{
         }
         return names.get(uid) ?? labels.block;
     };
-    const readNames = (value)=>{
-        if (Array.isArray(value)) value.forEach(readNames);
+    const readNames = (value, parent = null)=>{
+        if (Array.isArray(value)) value.forEach((item)=>readNames(item, parent));
         else if (isRecord(value)) {
-            if (typeof value._uid === 'string' && typeof value._type === 'string') names.set(value._uid, humanize(value._type));
-            Object.values(value).forEach(readNames);
+            let uid = parent;
+            if (typeof value._uid === 'string' && typeof value._type === 'string') {
+                uid = value._uid;
+                parents.set(uid, parent);
+                names.set(uid, humanize(value._type));
+            }
+            Object.values(value).forEach((item)=>readNames(item, uid));
         }
     };
+    // The block around `uid`, null at the top of the page: by the page as it
+    // is now, else by its view, for a block whose wrapper the site doesn't mark.
+    const parentOf = (uid)=>doc.querySelector(blockSelector(uid))?.parentElement?.closest(`[${preview.UID_ATTRIBUTE}]`)?.getAttribute(preview.UID_ATTRIBUTE) ?? parents.get(uid) ?? null;
     const readPageNames = ()=>{
         if (pageNames !== 'idle' || bridge.entryId === null) return;
         pageNames = 'loading';
@@ -3555,9 +3675,17 @@ const mountSiteEditor = (doc, bridge, options = {})=>{
         } else {
             noteText.textContent = labels.scopeNotePage;
         }
+        const parent = state.selectedUid ? parentOf(state.selectedUid) : null;
+        const upText = parent ? fill(labels.scopeUp, {
+            name: nameOf(parent)
+        }) : labels.scopeEntry;
+        for (const link of [
+            up,
+            upFields
+        ])if (link.textContent !== upText) link.textContent = upText;
         fieldsNote.hidden = creating || !state.selectedUid;
         note.hidden = offerShop || pageless && !creating && !options.promptWithoutPage;
-        wholePage.hidden = creating || !state.selectedUid;
+        up.hidden = creating || !state.selectedUid;
         cancelNew.hidden = !creating || onlyNew;
         intro.hidden = answers.length > 0 || offerShop || creating;
         shop.hidden = !offerShop;
@@ -3667,13 +3795,19 @@ const mountSiteEditor = (doc, bridge, options = {})=>{
         refresh();
         (picking ? picker.search : pageButton).focus();
     };
-    // Escape, on the page or in the form: from the pages, from a block to the
-    // whole page. True when it did something.
+    // True once back at the page.
+    const stepUp = ()=>{
+        const { selectedUid } = bridge.getState();
+        if (selectedUid) bridge.select(parentOf(selectedUid));
+        return !bridge.getState().selectedUid;
+    };
+    // Escape, on the page or in the form: from the pages, from a block a level
+    // up. True when it did something.
     const stepBack = ()=>{
         const state = bridge.getState();
         if (!panelShown(state)) return false;
         if (picking) setPicking(false);
-        else if (state.selectedUid) bridge.select(null);
+        else if (state.selectedUid) stepUp();
         else return false;
         return true;
     };
@@ -3787,13 +3921,11 @@ const mountSiteEditor = (doc, bridge, options = {})=>{
     pageButton.addEventListener('click', ()=>setPicking(!picking));
     newPage.addEventListener('click', ()=>setCreating(true));
     cancelNew.addEventListener('click', ()=>setCreating(false));
-    wholePage.addEventListener('click', ()=>{
-        bridge.select(null);
-        input.focus();
+    up.addEventListener('click', ()=>{
+        if (stepUp()) input.focus();
     });
-    wholePageFields.addEventListener('click', ()=>{
-        bridge.select(null);
-        focusForm();
+    upFields.addEventListener('click', ()=>{
+        if (stepUp()) focusForm();
     });
     shopButton.addEventListener('click', async ()=>{
         shopMessage = null;