@obelism/content 0.5.0 → 0.7.0

package/dist/bridge.js

@@ -4,6 +4,167 @@ var preview = require('./preview-mpwfmnla.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/visual-editor.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)'
+};
+const fill = (template, values)=>template.replace(/\{(\w+)\}/g, (match, key)=>key in values ? String(values[key]) : match);
+// The same tokens as the prompt box: near-black pill, beige text, the orange
+// accent for the rate.
+const CSS$1 = `
+:host { all: initial; }
+.layer {
+	position: fixed; inset: 0; pointer-events: none;
+	z-index: 2147483646;
+	font: 600 12px/1 'InterVariable', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	-webkit-font-smoothing: antialiased;
+}
+.badge {
+	position: absolute; transform: translateX(-100%);
+	display: inline-flex; gap: 6px; align-items: center;
+	padding: 6px 10px; white-space: nowrap; cursor: pointer;
+	pointer-events: auto; border: 0;
+	color: rgb(238 236 233); background: rgb(12 12 12 / .88);
+	border-radius: 5em; box-shadow: 0 6px 16px -8px rgb(12 12 12 / .5);
+	font: inherit;
+}
+.badge::before {
+	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; }
+`;
+// 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.
+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',
+        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 })=>{
+    const doc = win.document;
+    const labels = {
+        ...DEFAULT_STATS_LABELS,
+        ...labelOverrides
+    };
+    const host = doc.createElement('div');
+    host.setAttribute('data-obelism-stats', '');
+    const shadow = host.attachShadow({
+        mode: 'open'
+    });
+    const style = doc.createElement('style');
+    style.textContent = CSS$1;
+    const layer = doc.createElement('div');
+    layer.className = 'layer';
+    shadow.append(style, layer);
+    doc.body.appendChild(host);
+    let stats = {};
+    let visible = false;
+    let frame = null;
+    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(labels.clicked, {
+                rate: Math.round(block.rate * 100)
+            });
+            badge.title = fill(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);
+        }
+    };
+    // At most once a frame, however many scroll and mutation events come in.
+    const schedule = ()=>{
+        if (frame !== null || !visible) return;
+        frame = win.requestAnimationFrame(render);
+    };
+    win.addEventListener('scroll', schedule, {
+        capture: true,
+        passive: true
+    });
+    win.addEventListener('resize', schedule);
+    // The site re-renders blocks on every `update`; follow them. Our own
+    // layer lives in a shadow root, so its changes don't come back here.
+    const Observer = win.MutationObserver;
+    const observer = typeof Observer === 'function' ? new Observer(schedule) : null;
+    observer?.observe(doc.body, {
+        childList: true,
+        subtree: true
+    });
+    return {
+        update (nextStats, nextVisible) {
+            stats = nextStats;
+            visible = nextVisible;
+            if (frame !== null) {
+                win.cancelAnimationFrame?.(frame);
+                frame = null;
+            }
+            render();
+        },
+        refresh: schedule,
+        destroy () {
+            if (frame !== null) win.cancelAnimationFrame?.(frame);
+            win.removeEventListener('scroll', schedule, {
+                capture: true
+            });
+            win.removeEventListener('resize', schedule);
+            observer?.disconnect();
+            host.remove();
+        }
+    };
+};
+
 // 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
@@ -15,7 +176,7 @@ var config = require('./config-ci2hxmas.js');
 //   'select' | 'prompt' | 'undo', uid?, id?, prompt? }
 // - editor → site: { source: 'obelism-content-editor', type: 'connect' |
 //   'update' | 'select' | 'saved' | 'published' | 'features' |
-//   'promptResult' | 'promptState', … }
+//   'promptResult' | 'promptState' | 'stats', … }
 const BRIDGE_SOURCE = 'obelism-content-bridge';
 const EDITOR_SOURCE = 'obelism-content-editor';
 // How long a prompt may take before it counts as failed.
@@ -31,7 +192,9 @@ const INITIAL_STATE = {
     unsaved: false,
     saving: false,
     publishing: false,
-    selecting: false
+    selecting: false,
+    stats: {},
+    statsVisible: false
 };
 const createEmitter = ()=>{
     const listeners = {
@@ -72,6 +235,22 @@ const INERT_METHODS = {
     select: ()=>{},
     setSelecting: ()=>{}
 };
+const isCount = (value)=>typeof value === 'number' && Number.isFinite(value) && value >= 0;
+// The editor's `stats`, keeping only well-formed entries.
+const readStats = (value)=>{
+    if (!value || typeof value !== 'object' || Array.isArray(value)) return {};
+    const stats = {};
+    for (const [uid, block] of Object.entries(value)){
+        const { clicks, clickers, viewers, rate } = block ?? {};
+        if (isCount(clicks) && isCount(clickers) && isCount(viewers) && isCount(rate)) stats[uid] = {
+            clicks,
+            clickers,
+            viewers,
+            rate
+        };
+    }
+    return stats;
+};
 // The selector of the element marked with a block's uid.
 const blockSelector = (uid)=>`[${preview.UID_ATTRIBUTE}="${uid.replace(/["\\]/g, '\\$&')}"]`;
 // `cmsOrigin` is the only origin messages are accepted from and sent to.
@@ -200,6 +379,17 @@ const createBridge = (win, cmsOrigin)=>{
             uid
         });
     };
+    // Mounted with the first rates, so pages without numbers never get it.
+    let overlay = null;
+    const showStats = ()=>{
+        if (!overlay && !Object.keys(state.stats).length) return;
+        overlay ??= mountStatsOverlay(win, {
+            selector: blockSelector,
+            onSelect: (uid)=>bridge.select(uid)
+        });
+        overlay.update(state.stats, state.statsVisible);
+    };
+    cleanup.push(()=>overlay?.destroy());
     cleanup.push(()=>{
         for (const id of pending.keys()){
             settle(id)?.reject(new Error('The bridge was destroyed'));
@@ -220,6 +410,7 @@ const createBridge = (win, cmsOrigin)=>{
             });
             // Re-apply the selection to whatever the site rendered.
             win.requestAnimationFrame(()=>highlight(data.selectedUid, false));
+            overlay?.refresh();
         } else if (data.type === 'select') {
             highlight(data.uid, true);
         } else if (data.type === 'saved' || data.type === 'published') {
@@ -229,6 +420,13 @@ const createBridge = (win, cmsOrigin)=>{
             setState({
                 features: data.features.filter((feature)=>typeof feature === 'string')
             });
+        } else if (data.type === 'stats') {
+            // An editor from before the switch sends no `visible`: show them.
+            setState({
+                stats: readStats(data.stats),
+                statsVisible: data.visible !== false
+            });
+            showStats();
         } else if (data.type === 'promptState') {
             setState({
                 canUndo: data.canUndo === true
@@ -1190,7 +1388,9 @@ const getContentBridge = ({ url, prompt = true, pagePath } = {})=>{
 };
 
 exports.DEFAULT_PROMPT_LABELS = DEFAULT_PROMPT_LABELS;
+exports.DEFAULT_STATS_LABELS = DEFAULT_STATS_LABELS;
 exports.INITIAL_STATE = INITIAL_STATE;
 exports.getContentBridge = getContentBridge;
 exports.mountPromptBox = mountPromptBox;
+exports.mountStatsOverlay = mountStatsOverlay;
 exports.peekContentBridge = peekContentBridge;

package/dist/bridge.mjs

@@ -2,6 +2,167 @@ import { P as PREVIEW_PARAMS, U as UID_ATTRIBUTE, E as ENTRY_ATTRIBUTE } from '.
 import { SITE_EDITING_COOKIE, SITE_REQUEST_HEADER } from './site.mjs';
 import { n as normalizeUrl, D as DEFAULT_URL } from './config-c6qktlz6.mjs';
 
+// 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/visual-editor.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)'
+};
+const fill = (template, values)=>template.replace(/\{(\w+)\}/g, (match, key)=>key in values ? String(values[key]) : match);
+// The same tokens as the prompt box: near-black pill, beige text, the orange
+// accent for the rate.
+const CSS$1 = `
+:host { all: initial; }
+.layer {
+	position: fixed; inset: 0; pointer-events: none;
+	z-index: 2147483646;
+	font: 600 12px/1 'InterVariable', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	-webkit-font-smoothing: antialiased;
+}
+.badge {
+	position: absolute; transform: translateX(-100%);
+	display: inline-flex; gap: 6px; align-items: center;
+	padding: 6px 10px; white-space: nowrap; cursor: pointer;
+	pointer-events: auto; border: 0;
+	color: rgb(238 236 233); background: rgb(12 12 12 / .88);
+	border-radius: 5em; box-shadow: 0 6px 16px -8px rgb(12 12 12 / .5);
+	font: inherit;
+}
+.badge::before {
+	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; }
+`;
+// 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.
+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',
+        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 })=>{
+    const doc = win.document;
+    const labels = {
+        ...DEFAULT_STATS_LABELS,
+        ...labelOverrides
+    };
+    const host = doc.createElement('div');
+    host.setAttribute('data-obelism-stats', '');
+    const shadow = host.attachShadow({
+        mode: 'open'
+    });
+    const style = doc.createElement('style');
+    style.textContent = CSS$1;
+    const layer = doc.createElement('div');
+    layer.className = 'layer';
+    shadow.append(style, layer);
+    doc.body.appendChild(host);
+    let stats = {};
+    let visible = false;
+    let frame = null;
+    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(labels.clicked, {
+                rate: Math.round(block.rate * 100)
+            });
+            badge.title = fill(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);
+        }
+    };
+    // At most once a frame, however many scroll and mutation events come in.
+    const schedule = ()=>{
+        if (frame !== null || !visible) return;
+        frame = win.requestAnimationFrame(render);
+    };
+    win.addEventListener('scroll', schedule, {
+        capture: true,
+        passive: true
+    });
+    win.addEventListener('resize', schedule);
+    // The site re-renders blocks on every `update`; follow them. Our own
+    // layer lives in a shadow root, so its changes don't come back here.
+    const Observer = win.MutationObserver;
+    const observer = typeof Observer === 'function' ? new Observer(schedule) : null;
+    observer?.observe(doc.body, {
+        childList: true,
+        subtree: true
+    });
+    return {
+        update (nextStats, nextVisible) {
+            stats = nextStats;
+            visible = nextVisible;
+            if (frame !== null) {
+                win.cancelAnimationFrame?.(frame);
+                frame = null;
+            }
+            render();
+        },
+        refresh: schedule,
+        destroy () {
+            if (frame !== null) win.cancelAnimationFrame?.(frame);
+            win.removeEventListener('scroll', schedule, {
+                capture: true
+            });
+            win.removeEventListener('resize', schedule);
+            observer?.disconnect();
+            host.remove();
+        }
+    };
+};
+
 // 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
@@ -13,7 +174,7 @@ import { n as normalizeUrl, D as DEFAULT_URL } from './config-c6qktlz6.mjs';
 //   'select' | 'prompt' | 'undo', uid?, id?, prompt? }
 // - editor → site: { source: 'obelism-content-editor', type: 'connect' |
 //   'update' | 'select' | 'saved' | 'published' | 'features' |
-//   'promptResult' | 'promptState', … }
+//   'promptResult' | 'promptState' | 'stats', … }
 const BRIDGE_SOURCE = 'obelism-content-bridge';
 const EDITOR_SOURCE = 'obelism-content-editor';
 // How long a prompt may take before it counts as failed.
@@ -29,7 +190,9 @@ const INITIAL_STATE = {
     unsaved: false,
     saving: false,
     publishing: false,
-    selecting: false
+    selecting: false,
+    stats: {},
+    statsVisible: false
 };
 const createEmitter = ()=>{
     const listeners = {
@@ -70,6 +233,22 @@ const INERT_METHODS = {
     select: ()=>{},
     setSelecting: ()=>{}
 };
+const isCount = (value)=>typeof value === 'number' && Number.isFinite(value) && value >= 0;
+// The editor's `stats`, keeping only well-formed entries.
+const readStats = (value)=>{
+    if (!value || typeof value !== 'object' || Array.isArray(value)) return {};
+    const stats = {};
+    for (const [uid, block] of Object.entries(value)){
+        const { clicks, clickers, viewers, rate } = block ?? {};
+        if (isCount(clicks) && isCount(clickers) && isCount(viewers) && isCount(rate)) stats[uid] = {
+            clicks,
+            clickers,
+            viewers,
+            rate
+        };
+    }
+    return stats;
+};
 // The selector of the element marked with a block's uid.
 const blockSelector = (uid)=>`[${UID_ATTRIBUTE}="${uid.replace(/["\\]/g, '\\$&')}"]`;
 // `cmsOrigin` is the only origin messages are accepted from and sent to.
@@ -198,6 +377,17 @@ const createBridge = (win, cmsOrigin)=>{
             uid
         });
     };
+    // Mounted with the first rates, so pages without numbers never get it.
+    let overlay = null;
+    const showStats = ()=>{
+        if (!overlay && !Object.keys(state.stats).length) return;
+        overlay ??= mountStatsOverlay(win, {
+            selector: blockSelector,
+            onSelect: (uid)=>bridge.select(uid)
+        });
+        overlay.update(state.stats, state.statsVisible);
+    };
+    cleanup.push(()=>overlay?.destroy());
     cleanup.push(()=>{
         for (const id of pending.keys()){
             settle(id)?.reject(new Error('The bridge was destroyed'));
@@ -218,6 +408,7 @@ const createBridge = (win, cmsOrigin)=>{
             });
             // Re-apply the selection to whatever the site rendered.
             win.requestAnimationFrame(()=>highlight(data.selectedUid, false));
+            overlay?.refresh();
         } else if (data.type === 'select') {
             highlight(data.uid, true);
         } else if (data.type === 'saved' || data.type === 'published') {
@@ -227,6 +418,13 @@ const createBridge = (win, cmsOrigin)=>{
             setState({
                 features: data.features.filter((feature)=>typeof feature === 'string')
             });
+        } else if (data.type === 'stats') {
+            // An editor from before the switch sends no `visible`: show them.
+            setState({
+                stats: readStats(data.stats),
+                statsVisible: data.visible !== false
+            });
+            showStats();
         } else if (data.type === 'promptState') {
             setState({
                 canUndo: data.canUndo === true
@@ -1187,4 +1385,4 @@ const getContentBridge = ({ url, prompt = true, pagePath } = {})=>{
     return bridge;
 };
 
-export { DEFAULT_PROMPT_LABELS, INITIAL_STATE, getContentBridge, mountPromptBox, peekContentBridge };
+export { DEFAULT_PROMPT_LABELS, DEFAULT_STATS_LABELS, INITIAL_STATE, getContentBridge, mountPromptBox, mountStatsOverlay, peekContentBridge };

package/dist/prompt.js

@@ -1,5 +1,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var standardWebhooks = require('./standardWebhooks-kh5dc0ff.js');
+
 // Your own model for prompt editing in the visual editor. Set the endpoint
 // under Space settings → Prompt editing; the CMS then sends each prompt there
 // instead of to Workers AI, as a signed POST (Standard Webhooks, the same
@@ -23,48 +25,25 @@ class PromptVerificationError extends Error {
         this.name = 'PromptVerificationError';
     }
 }
-const SECRET_PREFIX = 'whsec_';
-// Seconds a request's timestamp may be off, against replays.
-const DEFAULT_TOLERANCE = 5 * 60;
-const base64ToBytes = (value)=>Uint8Array.from(atob(value), (char)=>char.charCodeAt(0));
 // Checks a request's Standard Webhooks signature and returns its body.
 // Throws PromptVerificationError when it isn't from the CMS.
-const verifyPromptRequest = async (request, secret, { tolerance = DEFAULT_TOLERANCE, now = Date.now() } = {})=>{
-    if (!secret?.startsWith(SECRET_PREFIX)) {
+const verifyPromptRequest = async (request, secret, { tolerance = standardWebhooks.DEFAULT_TOLERANCE, now = Date.now() } = {})=>{
+    if (!secret?.startsWith(standardWebhooks.SECRET_PREFIX)) {
         throw new Error('The prompt secret must be the whsec_… from Space settings');
     }
-    const id = request.headers.get('webhook-id');
-    const timestamp = request.headers.get('webhook-timestamp');
-    const signatures = request.headers.get('webhook-signature');
-    if (!id || !timestamp || !signatures) {
-        throw new PromptVerificationError('Missing signature headers');
-    }
-    const seconds = Number(timestamp);
-    if (!Number.isFinite(seconds) || Math.abs(now / 1000 - seconds) > tolerance) {
-        throw new PromptVerificationError('Timestamp outside the tolerance');
-    }
     const body = await request.text();
-    const key = await crypto.subtle.importKey('raw', base64ToBytes(secret.slice(SECRET_PREFIX.length)), {
-        name: 'HMAC',
-        hash: 'SHA-256'
-    }, false, [
-        'verify'
-    ]);
-    const signed = new TextEncoder().encode(`${id}.${timestamp}.${body}`);
-    let valid = false;
-    for (const signature of signatures.split(' ')){
-        const [version, value] = signature.split(',');
-        if (version !== 'v1' || !value) continue;
-        let bytes;
-        try {
-            bytes = base64ToBytes(value);
-        } catch  {
-            continue;
+    await standardWebhooks.verifySignature({
+        body,
+        id: request.headers.get('webhook-id'),
+        timestamp: request.headers.get('webhook-timestamp'),
+        signatures: request.headers.get('webhook-signature')
+    }, secret, {
+        tolerance,
+        now,
+        fail: (message)=>{
+            throw new PromptVerificationError(message);
         }
-        // crypto.subtle.verify compares in constant time.
-        if (await crypto.subtle.verify('HMAC', key, bytes, signed)) valid = true;
-    }
-    if (!valid) throw new PromptVerificationError('Invalid signature');
+    });
     let payload;
     try {
         payload = JSON.parse(body);

package/dist/prompt.mjs

@@ -1,3 +1,5 @@
+import { S as SECRET_PREFIX, v as verifySignature, D as DEFAULT_TOLERANCE } from './standardWebhooks-ew5mhpac.mjs';
+
 // Your own model for prompt editing in the visual editor. Set the endpoint
 // under Space settings → Prompt editing; the CMS then sends each prompt there
 // instead of to Workers AI, as a signed POST (Standard Webhooks, the same
@@ -21,48 +23,25 @@ class PromptVerificationError extends Error {
         this.name = 'PromptVerificationError';
     }
 }
-const SECRET_PREFIX = 'whsec_';
-// Seconds a request's timestamp may be off, against replays.
-const DEFAULT_TOLERANCE = 5 * 60;
-const base64ToBytes = (value)=>Uint8Array.from(atob(value), (char)=>char.charCodeAt(0));
 // Checks a request's Standard Webhooks signature and returns its body.
 // Throws PromptVerificationError when it isn't from the CMS.
 const verifyPromptRequest = async (request, secret, { tolerance = DEFAULT_TOLERANCE, now = Date.now() } = {})=>{
     if (!secret?.startsWith(SECRET_PREFIX)) {
         throw new Error('The prompt secret must be the whsec_… from Space settings');
     }
-    const id = request.headers.get('webhook-id');
-    const timestamp = request.headers.get('webhook-timestamp');
-    const signatures = request.headers.get('webhook-signature');
-    if (!id || !timestamp || !signatures) {
-        throw new PromptVerificationError('Missing signature headers');
-    }
-    const seconds = Number(timestamp);
-    if (!Number.isFinite(seconds) || Math.abs(now / 1000 - seconds) > tolerance) {
-        throw new PromptVerificationError('Timestamp outside the tolerance');
-    }
     const body = await request.text();
-    const key = await crypto.subtle.importKey('raw', base64ToBytes(secret.slice(SECRET_PREFIX.length)), {
-        name: 'HMAC',
-        hash: 'SHA-256'
-    }, false, [
-        'verify'
-    ]);
-    const signed = new TextEncoder().encode(`${id}.${timestamp}.${body}`);
-    let valid = false;
-    for (const signature of signatures.split(' ')){
-        const [version, value] = signature.split(',');
-        if (version !== 'v1' || !value) continue;
-        let bytes;
-        try {
-            bytes = base64ToBytes(value);
-        } catch  {
-            continue;
+    await verifySignature({
+        body,
+        id: request.headers.get('webhook-id'),
+        timestamp: request.headers.get('webhook-timestamp'),
+        signatures: request.headers.get('webhook-signature')
+    }, secret, {
+        tolerance,
+        now,
+        fail: (message)=>{
+            throw new PromptVerificationError(message);
         }
-        // crypto.subtle.verify compares in constant time.
-        if (await crypto.subtle.verify('HMAC', key, bytes, signed)) valid = true;
-    }
-    if (!valid) throw new PromptVerificationError('Invalid signature');
+    });
     let payload;
     try {
         payload = JSON.parse(body);