@preprio/toolkit 0.2.0-beta.7 → 0.2.0

package/dist/nextjs/components.cjs

@@ -369,9 +369,7 @@ function decodeStega(str) {
     const match = str.match(/{"origin.*?}/);
     if (match) {
       try {
-        const decodedMatch = (0, import_stega.vercelStegaDecode)(
-          match[0]
-        );
+        const decodedMatch = (0, import_stega.vercelStegaDecode)(match[0]);
         if (decodedMatch?.href) {
           return decodedMatch;
         }
@@ -899,8 +897,13 @@ function createStegaController(opts) {
         overlay.hide();
       }
     }, 16);
-    document.addEventListener("mousemove", throttledMouseMove);
-    window.addEventListener("scroll", handleScroll, { capture: true });
+    document.addEventListener("mousemove", throttledMouseMove, {
+      passive: true
+    });
+    window.addEventListener("scroll", handleScroll, {
+      capture: true,
+      passive: true
+    });
     initialized = true;
     debug6.log("stega controller started");
   };
@@ -1043,7 +1046,9 @@ function createChangeHandler(deps) {
       }
       setCookie(COOKIE_PREVIEW_MODE, String(after.previewMode), cookieOpts());
       setCookie(COOKIE_TOOLBAR_OPEN, "false", cookieOpts());
-      sendPreprEvent("preview_mode_toggled", { previewMode: after.previewMode });
+      sendPreprEvent("preview_mode_toggled", {
+        previewMode: after.previewMode
+      });
       if (!after.isIframe) {
         const [path, existing] = splitPath(deps.currentPath());
         const params = new URLSearchParams(existing);
@@ -1350,7 +1355,7 @@ var CLOSE_ICON_SVG = `<svg width="10" height="10" viewBox="0 0 10 10" fill="none
 </svg>`;
 
 // src/core/ui/toolbar.generated.ts
-var TOOLBAR_CSS = ":host{--prepr-primary:#4338ca;--prepr-bg:#eef2ff;--prepr-text:#1f2937;--prepr-radius:8px;--prepr-shadow:0px 0px 40px 0px #1f29373d;--prepr-z-index:10000;--prepr-primary-50:#eef2ff;--prepr-primary-100:#e0e7ff;--prepr-primary-800:#3730a3;--prepr-indigo-600:#4f46e5;--prepr-indigo-50:#eef2ff;--prepr-indigo-700:#4338ca;--prepr-secondary-400:#fb923c;--prepr-secondary-500:#f97316;--prepr-gray-100:#f3f4f6;--prepr-gray-200:#e5e7eb;--prepr-gray-300:#d1d5db;--prepr-gray-400:#9ca3af;--prepr-gray-500:#6b7280;--prepr-gray-700:#374151;--prepr-gray-800:#1f2937;--prepr-gray-900:#111827;--prepr-shadow-sm:0px 0px 12px 0px #c3c3c3cc;color:var(--prepr-text);box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5}:host *,:host :before,:host :after,*,:before,:after{box-sizing:border-box}button{font-family:inherit;font-size:inherit;margin:0}.prepr-regular-text{font-size:.875rem;font-weight:500;line-height:1.5}.prepr-backdrop{z-index:calc(var(--prepr-z-index) - 1);opacity:0;pointer-events:none;background:#0000001a;transition:opacity .2s ease-in-out;position:fixed;top:0;bottom:0;left:0;right:0}.prepr-backdrop[data-open=true]{opacity:1;pointer-events:auto;animation:.2s ease-in-out prepr-fade-in}.prepr-container{z-index:var(--prepr-z-index);justify-content:flex-end;align-items:center;display:flex;position:fixed;top:calc(50% - 64px);right:0}.prepr-toggle-holder{padding:.5rem}.prepr-toggle{cursor:pointer;background:var(--prepr-primary);color:#fff;border:none;border-radius:9999px;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;display:flex}.prepr-toggle svg{color:#fff}.prepr-panel{z-index:var(--prepr-z-index);opacity:0;pointer-events:none;justify-content:flex-end;padding:.75rem;transition:opacity .2s ease-in-out;display:flex;position:fixed;top:50%;right:0;transform:translateY(-50%)}.prepr-panel[data-open=true]{opacity:1;pointer-events:auto;animation:.2s ease-in-out prepr-fade-in}.prepr-content{box-shadow:var(--prepr-shadow);border-radius:var(--prepr-radius);background:var(--prepr-bg);flex-direction:column;gap:2.5rem;width:100%;padding:1.5rem;display:flex}@media (min-width:640px){.prepr-panel{margin-right:4rem;padding:0}.prepr-content{width:502px;padding:2.5rem}}.prepr-header{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.prepr-header-left{align-items:flex-start;gap:.75rem;display:flex}.prepr-badge{background:var(--prepr-primary-100);height:1.5rem;color:var(--prepr-primary);border-radius:4px;align-items:center;padding:.25rem .75rem;font-size:.875rem;display:flex}.prepr-header-close{cursor:pointer;background:var(--prepr-primary-100);width:2rem;height:2rem;color:var(--prepr-gray-700);border:none;border-radius:6px;justify-content:center;align-items:center;display:flex}.prepr-section{flex-direction:column;gap:.5rem;display:flex}.prepr-section-label{color:var(--prepr-gray-400);font-size:.875rem}.prepr-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1.5rem;display:flex}.prepr-row-title{color:var(--prepr-gray-800);margin:0;font-size:1rem;font-weight:600}.prepr-radiogroup{border-radius:var(--prepr-radius);border:1px solid var(--prepr-gray-300);background:#fff;align-items:center;gap:.25rem;height:2.5rem;padding:.25rem;display:flex}.prepr-radiogroup[data-disabled=true]{cursor:not-allowed;opacity:.5}.prepr-radiogroup[data-disabled=true] .prepr-radio{pointer-events:none}.prepr-radio{cursor:pointer;white-space:nowrap;text-align:center;height:2rem;color:var(--prepr-gray-900);background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:.5rem 1.125rem;font-size:.875rem;font-weight:500;transition:all .2s ease-in-out;display:flex}.prepr-radio[data-checked=true]{background:var(--prepr-indigo-600);color:#fff;box-shadow:var(--prepr-shadow-sm)}.prepr-radio[data-checked=true][data-off=true]{background:var(--prepr-gray-800);color:#fff}.prepr-radio-variant{width:82px}.prepr-listbox{position:relative}.prepr-segment-button{border-radius:var(--prepr-radius);border:1px solid var(--prepr-gray-300);width:240px;height:2.5rem;color:var(--prepr-gray-500);cursor:pointer;background:#fff;flex-shrink:0;align-items:center;gap:.5rem;padding:0 .5rem;font-size:.875rem;font-weight:500;display:flex;overflow:hidden}@media (min-width:768px){.prepr-segment-button{padding:0 1rem}}.prepr-segment-button:disabled{cursor:not-allowed;background:var(--prepr-gray-200);color:var(--prepr-gray-400)}.prepr-segment-button[aria-expanded=true]{border-bottom-color:#fff;border-bottom-right-radius:0;border-bottom-left-radius:0}.prepr-segment-label{white-space:nowrap;text-overflow:ellipsis;text-align:left;width:100%;margin-right:auto;overflow:hidden}.prepr-segment-caret{color:var(--prepr-gray-800);display:flex}.prepr-options{z-index:calc(var(--prepr-z-index) + 1);border-left:1px solid var(--prepr-gray-300);border-right:1px solid var(--prepr-gray-300);border-bottom:1px solid var(--prepr-gray-300);-ms-overflow-style:none;scrollbar-width:none;background:#fff;border-radius:0 0 6px 6px;width:240px;max-height:300px;margin:0;padding:0;list-style:none;position:absolute;top:100%;left:0;overflow-y:auto;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.prepr-options::-webkit-scrollbar{display:none}.prepr-options[hidden]{display:none}.prepr-option-search{background:#fff;padding:.5rem;position:-webkit-sticky;position:sticky;top:0}.prepr-segment-search{border:1px solid var(--prepr-gray-300);border-radius:var(--prepr-radius);width:100%;height:2rem;font:inherit;color:var(--prepr-gray-900);box-sizing:border-box;background:#fff;padding:0 .5rem;font-size:.875rem}.prepr-segment-search::placeholder{color:var(--prepr-gray-400)}.prepr-segment-search:focus{border-color:var(--prepr-gray-400);outline:none}.prepr-option{cursor:pointer;width:100%;color:var(--prepr-gray-900);background:#fff;align-items:center;padding:.5rem 1rem;font-size:.875rem;font-weight:500;display:flex}.prepr-option:hover{background:var(--prepr-gray-100)}.prepr-option[aria-selected=true]{background:var(--prepr-indigo-50);color:var(--prepr-indigo-700)}.prepr-option-label{white-space:nowrap;text-overflow:ellipsis;text-align:left;width:100%;margin-right:auto;overflow:hidden}.prepr-reset{background:var(--prepr-secondary-400);color:#fff;cursor:pointer;border:none;border-radius:6px;justify-content:center;align-items:center;gap:.5rem;width:100%;height:2.5rem;padding:.5rem .75rem;font-size:.875rem;font-weight:500;display:flex}.prepr-reset:hover:not(:disabled){background:var(--prepr-secondary-500)}.prepr-reset:disabled{background:var(--prepr-gray-400);color:var(--prepr-gray-500);cursor:not-allowed}@media (min-width:768px){.prepr-reset{width:108px}}.prepr-indicators{z-index:var(--prepr-z-index);gap:.75rem;display:flex;position:fixed;bottom:1.5rem;right:1.5rem}.prepr-status-pill{background:var(--prepr-primary);color:#fff;cursor:pointer;border:none;border-radius:9999px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.75rem;font-weight:500;transition:background-color .15s;display:flex;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.prepr-status-pill:hover{background:var(--prepr-primary-800)}.prepr-status-pill[hidden]{display:none}.prepr-status-viewing{color:#fff9;font-size:10px}.prepr-status-segment{text-overflow:ellipsis;white-space:nowrap;max-width:120px;display:inline-block;overflow:hidden}.prepr-status-variant{text-overflow:ellipsis;white-space:nowrap;background:#fff3;border-radius:4px;max-width:80px;padding:0 .5rem;display:inline-block;overflow:hidden}.prepr-status-x{color:#fff;width:.75rem;height:.75rem}.prepr-close-edit-pill{background:var(--prepr-primary-50);color:var(--prepr-gray-800);cursor:pointer;border:none;border-radius:9999px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.75rem;font-weight:500;transition:background-color .15s;display:flex;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.prepr-close-edit-pill:hover{background:var(--prepr-primary-100)}.prepr-close-edit-pill[hidden]{display:none}.prepr-close-edit-x{width:1rem;height:1rem;color:var(--prepr-gray-500);transition:color .15s}.prepr-close-edit-pill:hover .prepr-close-edit-x{color:var(--prepr-gray-700)}.prepr-tip{z-index:calc(var(--prepr-z-index) + 2);overflow-wrap:break-word;background:var(--prepr-gray-900);color:#fff;pointer-events:none;border-radius:6px;width:auto;max-width:min(420px,100vw - 16px);padding:.5rem .75rem;font-size:.75rem;font-weight:500;position:fixed;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.prepr-tip-arrow{border-left:6px solid #0000;border-right:6px solid #0000;border-top:6px solid var(--prepr-gray-900);width:0;height:0;position:absolute;top:100%;transform:translate(-50%)}[hidden]{display:none!important}@keyframes prepr-fade-in{0%{opacity:0}to{opacity:1}}";
+var TOOLBAR_CSS = ":host{--prepr-primary:#4338ca;--prepr-bg:#eef2ff;--prepr-text:#1f2937;--prepr-radius:8px;--prepr-shadow:0px 0px 40px 0px #1f29373d;--prepr-z-index:10000;--prepr-primary-50:#eef2ff;--prepr-primary-100:#e0e7ff;--prepr-primary-800:#3730a3;--prepr-indigo-600:#4f46e5;--prepr-indigo-50:#eef2ff;--prepr-indigo-700:#4338ca;--prepr-secondary-400:#fb923c;--prepr-secondary-500:#f97316;--prepr-gray-100:#f3f4f6;--prepr-gray-200:#e5e7eb;--prepr-gray-300:#d1d5db;--prepr-gray-400:#9ca3af;--prepr-gray-500:#6b7280;--prepr-gray-700:#374151;--prepr-gray-800:#1f2937;--prepr-gray-900:#111827;--prepr-shadow-sm:0px 0px 12px 0px #c3c3c3cc;color:var(--prepr-text);box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5}:host *,:host :before,:host :after,*,:before,:after{box-sizing:border-box}button{font-family:inherit;font-size:inherit;margin:0}.prepr-regular-text{font-size:.875rem;font-weight:500;line-height:1.5}.prepr-backdrop{z-index:calc(var(--prepr-z-index) - 1);opacity:0;pointer-events:none;background:#0000001a;transition:opacity .2s ease-in-out;position:fixed;top:0;bottom:0;left:0;right:0}.prepr-backdrop[data-open=true]{opacity:1;pointer-events:auto;animation:.2s ease-in-out prepr-fade-in}.prepr-container{z-index:var(--prepr-z-index);justify-content:flex-end;align-items:center;display:flex;position:fixed;top:calc(50% - 64px);right:0}.prepr-toggle-holder{padding:.5rem}.prepr-toggle{cursor:pointer;background:var(--prepr-primary);color:#fff;border:none;border-radius:9999px;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;display:flex}.prepr-toggle>span{display:flex}.prepr-toggle svg{color:#fff}.prepr-panel{z-index:var(--prepr-z-index);opacity:0;pointer-events:none;justify-content:flex-end;padding:.75rem;transition:opacity .2s ease-in-out;display:flex;position:fixed;top:50%;right:0;transform:translateY(-50%)}.prepr-panel[data-open=true]{opacity:1;pointer-events:auto;animation:.2s ease-in-out prepr-fade-in}.prepr-content{box-shadow:var(--prepr-shadow);border-radius:var(--prepr-radius);background:var(--prepr-bg);flex-direction:column;gap:2.5rem;width:100%;padding:1.5rem;display:flex}@media (min-width:640px){.prepr-panel{margin-right:4rem;padding:0}.prepr-content{width:502px;padding:2.5rem}}.prepr-header{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.prepr-header-left{align-items:flex-start;gap:.75rem;display:flex}.prepr-badge{background:var(--prepr-primary-100);height:1.5rem;color:var(--prepr-primary);border-radius:4px;align-items:center;padding:.25rem .75rem;font-size:.875rem;display:flex}.prepr-header-close{cursor:pointer;background:var(--prepr-primary-100);width:2rem;height:2rem;color:var(--prepr-gray-700);border:none;border-radius:6px;justify-content:center;align-items:center;display:flex}.prepr-section{flex-direction:column;gap:.5rem;display:flex}.prepr-section-label{color:var(--prepr-gray-400);font-size:.875rem}.prepr-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1.5rem;display:flex}.prepr-row-title{color:var(--prepr-gray-800);margin:0;font-size:1rem;font-weight:600}.prepr-radiogroup{border-radius:var(--prepr-radius);border:1px solid var(--prepr-gray-300);background:#fff;align-items:center;gap:.25rem;height:2.5rem;padding:.25rem;display:flex}.prepr-radiogroup[data-disabled=true]{cursor:not-allowed;opacity:.5}.prepr-radiogroup[data-disabled=true] .prepr-radio{pointer-events:none}.prepr-radio{cursor:pointer;white-space:nowrap;text-align:center;height:2rem;color:var(--prepr-gray-900);background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:.5rem 1.125rem;font-size:.875rem;font-weight:500;transition:all .2s ease-in-out;display:flex}.prepr-radio[data-checked=true]{background:var(--prepr-indigo-600);color:#fff;box-shadow:var(--prepr-shadow-sm)}.prepr-radio[data-checked=true][data-off=true]{background:var(--prepr-gray-800);color:#fff}.prepr-radio-variant{width:82px}.prepr-listbox{position:relative}.prepr-segment-button{border-radius:var(--prepr-radius);border:1px solid var(--prepr-gray-300);width:240px;height:2.5rem;color:var(--prepr-gray-500);cursor:pointer;background:#fff;flex-shrink:0;align-items:center;gap:.5rem;padding:0 .5rem;font-size:.875rem;font-weight:500;display:flex;overflow:hidden}@media (min-width:768px){.prepr-segment-button{padding:0 1rem}}.prepr-segment-button:disabled{cursor:not-allowed;background:var(--prepr-gray-200);color:var(--prepr-gray-400)}.prepr-segment-button[aria-expanded=true]{border-bottom-color:#fff;border-bottom-right-radius:0;border-bottom-left-radius:0}.prepr-segment-label{white-space:nowrap;text-overflow:ellipsis;text-align:left;width:100%;margin-right:auto;overflow:hidden}.prepr-segment-caret{color:var(--prepr-gray-800);display:flex}.prepr-options{z-index:calc(var(--prepr-z-index) + 1);border-left:1px solid var(--prepr-gray-300);border-right:1px solid var(--prepr-gray-300);border-bottom:1px solid var(--prepr-gray-300);-ms-overflow-style:none;scrollbar-width:none;background:#fff;border-radius:0 0 6px 6px;width:240px;max-height:300px;margin:0;padding:0;list-style:none;position:absolute;top:100%;left:0;overflow-y:auto;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.prepr-options::-webkit-scrollbar{display:none}.prepr-options[hidden]{display:none}.prepr-option-search{background:#fff;padding:.5rem;position:-webkit-sticky;position:sticky;top:0}.prepr-segment-search{border:1px solid var(--prepr-gray-300);border-radius:var(--prepr-radius);width:100%;height:2rem;font:inherit;color:var(--prepr-gray-900);box-sizing:border-box;background:#fff;padding:0 .5rem;font-size:.875rem}.prepr-segment-search::placeholder{color:var(--prepr-gray-400)}.prepr-segment-search:focus{border-color:var(--prepr-gray-400);outline:none}.prepr-option{cursor:pointer;width:100%;color:var(--prepr-gray-900);background:#fff;align-items:center;padding:.5rem 1rem;font-size:.875rem;font-weight:500;display:flex}.prepr-option:hover{background:var(--prepr-gray-100)}.prepr-option[aria-selected=true]{background:var(--prepr-indigo-50);color:var(--prepr-indigo-700)}.prepr-option-label{white-space:nowrap;text-overflow:ellipsis;text-align:left;width:100%;margin-right:auto;overflow:hidden}.prepr-reset{background:var(--prepr-secondary-400);color:#fff;cursor:pointer;border:none;border-radius:6px;justify-content:center;align-items:center;gap:.5rem;width:100%;height:2.5rem;padding:.5rem .75rem;font-size:.875rem;font-weight:500;display:flex}.prepr-reset:hover:not(:disabled){background:var(--prepr-secondary-500)}.prepr-reset:disabled{background:var(--prepr-gray-400);color:var(--prepr-gray-500);cursor:not-allowed}@media (min-width:768px){.prepr-reset{width:108px}}.prepr-indicators{z-index:var(--prepr-z-index);gap:.75rem;display:flex;position:fixed;bottom:1.5rem;right:1.5rem}.prepr-status-pill{background:var(--prepr-primary);color:#fff;cursor:pointer;border:none;border-radius:9999px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.75rem;font-weight:500;transition:background-color .15s;display:flex;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.prepr-status-pill:hover{background:var(--prepr-primary-800)}.prepr-status-pill[hidden]{display:none}.prepr-status-viewing{color:#fff9;font-size:10px}.prepr-status-segment{text-overflow:ellipsis;white-space:nowrap;max-width:120px;display:inline-block;overflow:hidden}.prepr-status-variant{text-overflow:ellipsis;white-space:nowrap;background:#fff3;border-radius:4px;max-width:80px;padding:0 .5rem;display:inline-block;overflow:hidden}.prepr-status-x{color:#fff;width:.75rem;height:.75rem}.prepr-close-edit-pill{background:var(--prepr-primary-50);color:var(--prepr-gray-800);cursor:pointer;border:none;border-radius:9999px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.75rem;font-weight:500;transition:background-color .15s;display:flex;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.prepr-close-edit-pill:hover{background:var(--prepr-primary-100)}.prepr-close-edit-pill[hidden]{display:none}.prepr-close-edit-x{width:1rem;height:1rem;color:var(--prepr-gray-500);transition:color .15s}.prepr-close-edit-pill:hover .prepr-close-edit-x{color:var(--prepr-gray-700)}.prepr-tip{z-index:calc(var(--prepr-z-index) + 2);overflow-wrap:break-word;background:var(--prepr-gray-900);color:#fff;pointer-events:none;border-radius:6px;width:auto;max-width:min(420px,100vw - 16px);padding:.5rem .75rem;font-size:.75rem;font-weight:500;position:fixed;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.prepr-tip-arrow{border-left:6px solid #0000;border-right:6px solid #0000;border-top:6px solid var(--prepr-gray-900);width:0;height:0;position:absolute;top:100%;transform:translate(-50%)}[hidden]{display:none!important}@keyframes prepr-fade-in{0%{opacity:0}to{opacity:1}}";
 
 // ../../node_modules/.pnpm/preact@10.29.7/node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs
 var f2 = 0;
@@ -1364,7 +1369,10 @@ function u2(e2, t3, n2, o2, i2, u3) {
 }
 
 // src/core/ui/panel.tsx
-function RawSvg({ svg, className }) {
+function RawSvg({
+  svg,
+  className
+}) {
   return /* @__PURE__ */ u2(
     "span",
     {
@@ -1631,7 +1639,7 @@ function StatusPill({
           {
             class: "prepr-status-x",
             "data-prepr": "status-x",
-            hidden: !features.segments || !state.previewMode || state.selectedSegment === null,
+            hidden: !state.previewMode || !(features.segments && state.selectedSegment !== null || features.abTesting && state.selectedVariant === "B"),
             children: /* @__PURE__ */ u2(RawSvg, { svg: XMARK_ICON_SVG })
           }
         )
@@ -1935,9 +1943,7 @@ var PreprToolbarElement = class extends HTMLElementBase {
     ) ?? null;
   }
   optionsList() {
-    return this.shadowRoot?.querySelector(
-      '[data-prepr="options"]'
-    ) ?? null;
+    return this.shadowRoot?.querySelector('[data-prepr="options"]') ?? null;
   }
   onListboxKeydown(event) {
     const e2 = event;
@@ -2157,9 +2163,13 @@ function createPreprPreview(opts = {}) {
   const bridge = createIframeBridge(store, {
     allowedEditorOrigins: options?.allowedEditorOrigins
   });
-  sendPreprEvent("getScrollPosition", { value: 0 }, {
-    allowUntrustedTarget: true
-  });
+  sendPreprEvent(
+    "getScrollPosition",
+    { value: 0 },
+    {
+      allowUntrustedTarget: true
+    }
+  );
   if (isIframe) {
     bridge.start();
   }
@@ -2237,13 +2247,15 @@ function PreprToolbar({
 }) {
   const router = (0, import_navigation.useRouter)();
   const pathname = (0, import_navigation.usePathname)();
+  const pathnameRef = (0, import_react2.useRef)(pathname);
+  pathnameRef.current = pathname;
   (0, import_react2.useEffect)(() => {
     const toolbar = createPreprPreview({
       props,
       options,
       navigation: {
         navigate: (url) => router.push(url),
-        currentPath: () => pathname + window.location.search
+        currentPath: () => pathnameRef.current + window.location.search
       }
     });
     return () => toolbar.destroy();

package/dist/nextjs/components.js

@@ -2,11 +2,11 @@
 import {
   createPreprPreview,
   loadTrackingPixel
-} from "../chunk-P6VTLWM4.js";
+} from "../chunk-4PJK6IQ4.js";
 
 // src/nextjs/components.ts
 import { usePathname, useRouter } from "next/navigation";
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect2, useRef } from "react";
 
 // src/react/components.ts
 import { useEffect } from "react";
@@ -27,13 +27,15 @@ function PreprToolbar({
 }) {
   const router = useRouter();
   const pathname = usePathname();
+  const pathnameRef = useRef(pathname);
+  pathnameRef.current = pathname;
   useEffect2(() => {
     const toolbar = createPreprPreview({
       props,
       options,
       navigation: {
         navigate: (url) => router.push(url),
-        currentPath: () => pathname + window.location.search
+        currentPath: () => pathnameRef.current + window.location.search
       }
     });
     return () => toolbar.destroy();

package/dist/nextjs/image-loader.cjs

@@ -25,7 +25,10 @@ __export(image_loader_exports, {
 module.exports = __toCommonJS(image_loader_exports);
 var TRANSFORM_SEGMENT = /\/([^/]*\bw_\d+[^/]*)\//;
 var isPositiveInteger = (value) => /^\d+$/.test(value);
-function preprImageLoader({ src, width }) {
+function preprImageLoader({
+  src,
+  width
+}) {
   return src.replace(TRANSFORM_SEGMENT, (match, segment) => {
     const options = segment.split(",").map((pair) => {
       const underscore = pair.indexOf("_");
@@ -36,7 +39,9 @@ function preprImageLoader({ src, width }) {
     const emittedHeight = options.find(([key]) => key === "h");
     if (emittedHeight && isPositiveInteger(emittedHeight[1])) {
       emittedHeight[1] = String(
-        Math.round(width * Number(emittedHeight[1]) / Number(emittedWidth[1]))
+        Math.round(
+          width * Number(emittedHeight[1]) / Number(emittedWidth[1])
+        )
       );
     }
     emittedWidth[1] = String(width);

package/dist/nextjs/image-loader.d.cts

@@ -9,6 +9,6 @@ import { ImageLoaderProps } from 'next/image';
  * neither of which is a ceiling on what the CDN can serve, so capping there
  * would rule out retina.
  */
-declare function preprImageLoader({ src, width }: ImageLoaderProps): string;
+declare function preprImageLoader({ src, width, }: ImageLoaderProps): string;
 
 export { preprImageLoader as default };

package/dist/nextjs/image-loader.d.ts

@@ -9,6 +9,6 @@ import { ImageLoaderProps } from 'next/image';
  * neither of which is a ceiling on what the CDN can serve, so capping there
  * would rule out retina.
  */
-declare function preprImageLoader({ src, width }: ImageLoaderProps): string;
+declare function preprImageLoader({ src, width, }: ImageLoaderProps): string;
 
 export { preprImageLoader as default };

package/dist/nextjs/image-loader.js

@@ -1,7 +1,10 @@
 // src/nextjs/image-loader.ts
 var TRANSFORM_SEGMENT = /\/([^/]*\bw_\d+[^/]*)\//;
 var isPositiveInteger = (value) => /^\d+$/.test(value);
-function preprImageLoader({ src, width }) {
+function preprImageLoader({
+  src,
+  width
+}) {
   return src.replace(TRANSFORM_SEGMENT, (match, segment) => {
     const options = segment.split(",").map((pair) => {
       const underscore = pair.indexOf("_");
@@ -12,7 +15,9 @@ function preprImageLoader({ src, width }) {
     const emittedHeight = options.find(([key]) => key === "h");
     if (emittedHeight && isPositiveInteger(emittedHeight[1])) {
       emittedHeight[1] = String(
-        Math.round(width * Number(emittedHeight[1]) / Number(emittedWidth[1]))
+        Math.round(
+          width * Number(emittedHeight[1]) / Number(emittedWidth[1])
+        )
       );
     }
     emittedWidth[1] = String(width);

package/dist/nextjs/index.cjs

@@ -38,7 +38,7 @@ module.exports = __toCommonJS(nextjs_exports);
 var import_server = require("next/server");
 
 // src/version.ts
-var VERSION = "0.2.0-beta.7";
+var VERSION = "0.2.0";
 
 // src/core/constants.ts
 var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";
@@ -92,7 +92,11 @@ function parseCookies(request) {
     const name = part.slice(0, eq).trim();
     const value = part.slice(eq + 1).trim();
     if (!name) continue;
-    cookies.set(name, decodeURIComponent(value));
+    try {
+      cookies.set(name, decodeURIComponent(value));
+    } catch {
+      cookies.set(name, value);
+    }
   }
   return cookies;
 }
@@ -131,7 +135,10 @@ function processPreprRequest(request, opts) {
   if (userAgent) {
     requestHeaders.set("Prepr-User-Agent", sanitizeHeaderValue(userAgent));
   }
-  requestHeaders.set("Prepr-Package", `@preprio/toolkit@${opts?.version ?? VERSION}`);
+  requestHeaders.set(
+    "Prepr-Package",
+    `@preprio/toolkit@${opts?.version ?? VERSION}`
+  );
   const ip = request.headers.get("Cf-Connecting-Ip") ?? request.headers.get("x-real-ip");
   if (ip) {
     requestHeaders.set("Prepr-Visitor-IP", sanitizeHeaderValue(ip));
@@ -140,7 +147,7 @@ function processPreprRequest(request, opts) {
   if (hutkCookie) {
     requestHeaders.set("Prepr-Hubspot-Id", sanitizeHeaderValue(hutkCookie));
   }
-  let uid = requestCookies.get(COOKIE_UID);
+  let uid = sanitizeHeaderValue(requestCookies.get(COOKIE_UID) ?? "");
   if (!uid) {
     uid = crypto.randomUUID();
     responseCookies.push({
@@ -224,19 +231,30 @@ function createPreprMiddleware(request, responseOrOptions, maybeOptions) {
   } else {
     options = responseOrOptions;
   }
-  const { requestHeaders, responseCookies } = processPreprRequest(request, options);
+  const { requestHeaders, responseCookies } = processPreprRequest(
+    request,
+    options
+  );
   const response = chainedResponse ?? import_server.NextResponse.next({ request: { headers: requestHeaders } });
   if (chainedResponse) {
+    const existing = response.headers.get("x-middleware-override-headers");
+    const names = new Set(
+      existing ? existing.split(",").map((name) => name.trim()).filter(Boolean) : []
+    );
     requestHeaders.forEach((value, key) => {
-      response.headers.set(key, value);
+      names.add(key);
+      response.headers.set(`x-middleware-request-${key}`, value);
     });
+    response.headers.set("x-middleware-override-headers", [...names].join(","));
   }
   for (const cookie of responseCookies) {
     response.cookies.set(cookie.name, cookie.value, {
       maxAge: cookie.maxAge,
       path: cookie.path,
       // Lower-cased: Next's cookie API expects 'none' | 'lax' | 'strict'.
-      ...cookie.sameSite ? { sameSite: cookie.sameSite.toLowerCase() } : {},
+      ...cookie.sameSite ? {
+        sameSite: cookie.sameSite.toLowerCase()
+      } : {},
       ...cookie.secure ? { secure: true } : {}
     });
   }
@@ -296,7 +314,11 @@ function getPreprHeadersFromHeaders(headers2) {
 }
 function validatePreprToken(token) {
   if (!token) {
-    throw new PreprError("Token is required", "MISSING_TOKEN", "validatePreprToken");
+    throw new PreprError(
+      "Token is required",
+      "MISSING_TOKEN",
+      "validatePreprToken"
+    );
   }
   if (!token.startsWith("https://")) {
     throw new PreprError(
@@ -426,7 +448,7 @@ async function getToolbarProps(token, features) {
 }
 
 // src/nextjs/index.ts
-var import_components = require("./components");
+var import_components = require("./components.cjs");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PreprError,

package/dist/nextjs/index.d.cts

@@ -1,5 +1,11 @@
 import { NextRequest, NextResponse } from 'next/server';
-export { PreprToolbar, PreprTrackingPixel, PreprTrackingPixelProps } from './components';
+
+type Dictionary = Record<string, unknown>;
+declare const dictionaries: {
+    en: Dictionary;
+    nl: Dictionary;
+};
+type Locale = keyof typeof dictionaries;
 
 interface PreprSegment {
     readonly _id: string;
@@ -29,6 +35,36 @@ interface PreprFeatures {
      */
     editMode?: PreprFeatureConfig;
 }
+interface PreprToolbarOptions {
+    debug?: boolean;
+    locale?: Locale;
+    /** Disable features app-wide. Pass the same object to the middleware. */
+    features?: PreprFeatures;
+}
+/**
+ * Options for the preview runtime. Two independent axes: `features` decides
+ * *what runs*, `ui` decides *whether the toolbar is visible*.
+ */
+interface PreprPreviewOptions extends PreprToolbarOptions {
+    /**
+     * Mount the visible `<prepr-toolbar>` element. Default `true`.
+     *
+     * `false` keeps every non-visual side effect wired — click-to-edit, the
+     * editor bridge, scroll restore, cookies and headers — with no chrome of its
+     * own. That is how a site gets live editing, or editor scroll restore, while
+     * rendering its own UI instead of the bar.
+     *
+     * Already implied inside the editor's iframe (the CMS owns the chrome there)
+     * and by `?prepr_hide_bar=true`, so this option is for consumers who want a
+     * headless preview by their own choice.
+     */
+    ui?: boolean;
+    /**
+     * Replace the `*.prepr.io` editor-origin wildcard with an exact list.
+     * Intended for self-hosted editors; when set, the wildcard no longer applies.
+     */
+    allowedEditorOrigins?: string[];
+}
 interface PreprToolbarProps {
     /**
      * Server-resolved active segment. Optional: omit it with `segments`
@@ -47,6 +83,13 @@ interface PreprToolbarProps {
     /** @deprecated Alias for `segments`. */
     readonly data?: readonly PreprSegment[];
 }
+/**
+ * Prop type for the framework `<PreprToolbar>` components: the toolbar data
+ * plus the options bag core `createPreprPreview` accepts.
+ */
+interface PreprToolbarComponentProps extends PreprToolbarProps {
+    options?: PreprPreviewOptions;
+}
 type PreprVariant = 'A' | 'B';
 interface PreprHeaders {
     readonly 'prepr-customer-id'?: string;
@@ -127,4 +170,58 @@ declare function validatePreprToken(token: string): void;
  */
 declare function extractAccessToken(graphqlUrl: string): string;
 
-export { PreprError, type PreprMiddlewareOptions, createPreprMiddleware, extractAccessToken, getActiveSegment, getActiveVariant, getPreprHeaders, getPreprUUID, getToolbarProps, validatePreprToken };
+/**
+ * Loader + typed facade for Prepr's CDN tracking pixel, so consumers don't have
+ * to paste a `<script>` tag. The pixel itself lives on the CDN; this only sets
+ * up the handoff.
+ *
+ * The CDN script expects a queue stub to already exist when it loads, so the
+ * contract must be reproduced exactly:
+ *   - `window.prepr` pushes `arguments` onto `.queue` until the real script
+ *     lands and replaces `.process`.
+ *   - `.t` must be a `Date.now()` timestamp.
+ *   - The tag is inserted async, `src` cache-busted every 24h via
+ *     `Math.ceil(Date.now() / cacheTime) * cacheTime`.
+ */
+/** Config accepted by the CDN pixel. */
+interface PreprPixelConfig {
+    destinations?: {
+        googleTagManager?: boolean;
+    };
+    variantImpressionThreshold?: number;
+}
+type PreprQueueArgs = unknown[];
+interface PreprQueueFn {
+    (...args: PreprQueueArgs): void;
+    queue: PreprQueueArgs[];
+    t: number;
+    process?: (...args: PreprQueueArgs) => void;
+}
+declare global {
+    interface Window {
+        prepr?: PreprQueueFn;
+    }
+}
+
+interface PreprTrackingPixelProps {
+    /** Prepr tracking/access token. */
+    id: string;
+    config?: PreprPixelConfig;
+}
+/**
+ * Loads Prepr's CDN tracking pixel on mount. Renders nothing.
+ *
+ * The pixel queues a single `pageload` event when it installs. Client-side
+ * route changes emit nothing on their own — call `trackEvent('pageload')` from
+ * the router to count them.
+ */
+declare function PreprTrackingPixel({ id, config, }: PreprTrackingPixelProps): null;
+
+/**
+ * Mounts the Prepr toolbar and wires it to the Next.js router so segment/variant
+ * switches navigate. Renders nothing — the toolbar UI is a custom element that
+ * `createPreprPreview` mounts imperatively.
+ */
+declare function PreprToolbar({ options, ...props }: PreprToolbarComponentProps): null;
+
+export { PreprError, type PreprMiddlewareOptions, PreprToolbar, PreprTrackingPixel, type PreprTrackingPixelProps, createPreprMiddleware, extractAccessToken, getActiveSegment, getActiveVariant, getPreprHeaders, getPreprUUID, getToolbarProps, validatePreprToken };

package/dist/nextjs/index.d.ts

@@ -1,5 +1,11 @@
 import { NextRequest, NextResponse } from 'next/server';
-export { PreprToolbar, PreprTrackingPixel, PreprTrackingPixelProps } from './components';
+
+type Dictionary = Record<string, unknown>;
+declare const dictionaries: {
+    en: Dictionary;
+    nl: Dictionary;
+};
+type Locale = keyof typeof dictionaries;
 
 interface PreprSegment {
     readonly _id: string;
@@ -29,6 +35,36 @@ interface PreprFeatures {
      */
     editMode?: PreprFeatureConfig;
 }
+interface PreprToolbarOptions {
+    debug?: boolean;
+    locale?: Locale;
+    /** Disable features app-wide. Pass the same object to the middleware. */
+    features?: PreprFeatures;
+}
+/**
+ * Options for the preview runtime. Two independent axes: `features` decides
+ * *what runs*, `ui` decides *whether the toolbar is visible*.
+ */
+interface PreprPreviewOptions extends PreprToolbarOptions {
+    /**
+     * Mount the visible `<prepr-toolbar>` element. Default `true`.
+     *
+     * `false` keeps every non-visual side effect wired — click-to-edit, the
+     * editor bridge, scroll restore, cookies and headers — with no chrome of its
+     * own. That is how a site gets live editing, or editor scroll restore, while
+     * rendering its own UI instead of the bar.
+     *
+     * Already implied inside the editor's iframe (the CMS owns the chrome there)
+     * and by `?prepr_hide_bar=true`, so this option is for consumers who want a
+     * headless preview by their own choice.
+     */
+    ui?: boolean;
+    /**
+     * Replace the `*.prepr.io` editor-origin wildcard with an exact list.
+     * Intended for self-hosted editors; when set, the wildcard no longer applies.
+     */
+    allowedEditorOrigins?: string[];
+}
 interface PreprToolbarProps {
     /**
      * Server-resolved active segment. Optional: omit it with `segments`
@@ -47,6 +83,13 @@ interface PreprToolbarProps {
     /** @deprecated Alias for `segments`. */
     readonly data?: readonly PreprSegment[];
 }
+/**
+ * Prop type for the framework `<PreprToolbar>` components: the toolbar data
+ * plus the options bag core `createPreprPreview` accepts.
+ */
+interface PreprToolbarComponentProps extends PreprToolbarProps {
+    options?: PreprPreviewOptions;
+}
 type PreprVariant = 'A' | 'B';
 interface PreprHeaders {
     readonly 'prepr-customer-id'?: string;
@@ -127,4 +170,58 @@ declare function validatePreprToken(token: string): void;
  */
 declare function extractAccessToken(graphqlUrl: string): string;
 
-export { PreprError, type PreprMiddlewareOptions, createPreprMiddleware, extractAccessToken, getActiveSegment, getActiveVariant, getPreprHeaders, getPreprUUID, getToolbarProps, validatePreprToken };
+/**
+ * Loader + typed facade for Prepr's CDN tracking pixel, so consumers don't have
+ * to paste a `<script>` tag. The pixel itself lives on the CDN; this only sets
+ * up the handoff.
+ *
+ * The CDN script expects a queue stub to already exist when it loads, so the
+ * contract must be reproduced exactly:
+ *   - `window.prepr` pushes `arguments` onto `.queue` until the real script
+ *     lands and replaces `.process`.
+ *   - `.t` must be a `Date.now()` timestamp.
+ *   - The tag is inserted async, `src` cache-busted every 24h via
+ *     `Math.ceil(Date.now() / cacheTime) * cacheTime`.
+ */
+/** Config accepted by the CDN pixel. */
+interface PreprPixelConfig {
+    destinations?: {
+        googleTagManager?: boolean;
+    };
+    variantImpressionThreshold?: number;
+}
+type PreprQueueArgs = unknown[];
+interface PreprQueueFn {
+    (...args: PreprQueueArgs): void;
+    queue: PreprQueueArgs[];
+    t: number;
+    process?: (...args: PreprQueueArgs) => void;
+}
+declare global {
+    interface Window {
+        prepr?: PreprQueueFn;
+    }
+}
+
+interface PreprTrackingPixelProps {
+    /** Prepr tracking/access token. */
+    id: string;
+    config?: PreprPixelConfig;
+}
+/**
+ * Loads Prepr's CDN tracking pixel on mount. Renders nothing.
+ *
+ * The pixel queues a single `pageload` event when it installs. Client-side
+ * route changes emit nothing on their own — call `trackEvent('pageload')` from
+ * the router to count them.
+ */
+declare function PreprTrackingPixel({ id, config, }: PreprTrackingPixelProps): null;
+
+/**
+ * Mounts the Prepr toolbar and wires it to the Next.js router so segment/variant
+ * switches navigate. Renders nothing — the toolbar UI is a custom element that
+ * `createPreprPreview` mounts imperatively.
+ */
+declare function PreprToolbar({ options, ...props }: PreprToolbarComponentProps): null;
+
+export { PreprError, type PreprMiddlewareOptions, PreprToolbar, PreprTrackingPixel, type PreprTrackingPixelProps, createPreprMiddleware, extractAccessToken, getActiveSegment, getActiveVariant, getPreprHeaders, getPreprUUID, getToolbarProps, validatePreprToken };