@preprio/toolkit 0.5.0-rc.1 → 0.6.0-alpha.0

package/dist/nextjs/components.cjs

@@ -21,8 +21,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/nextjs/components.ts
 var components_exports = {};
 __export(components_exports, {
+  PreprAbSwitch: () => PreprAbSwitch,
   PreprToolbar: () => PreprToolbar,
-  PreprTrackingPixel: () => PreprTrackingPixel
+  PreprTrackingPixel: () => PreprTrackingPixel,
+  PreprVariantTracking: () => PreprVariantTracking
 });
 module.exports = __toCommonJS(components_exports);
 var import_navigation = require("next/navigation");
@@ -292,7 +294,6 @@ function createElementCache(query, ttl = 1e3) {
 }
 
 // src/core/iframe-bridge.ts
-var debug = createScopedLogger("iframe-bridge");
 var EDITOR_BASE_DOMAIN = "prepr.io";
 function isAllowedEditorOrigin(origin, allowed) {
   if (allowed) return allowed.includes(origin);
@@ -310,7 +311,6 @@ function isAllowedEditorOrigin(origin, allowed) {
 }
 function createIframeBridge(store, options = {}) {
   const allowedOrigins = options.allowedEditorOrigins;
-  const onScrollToField = options.onScrollToField;
   let parentOrigin = null;
   const onKeyDown = (event) => {
     const key = event.key.toLowerCase();
@@ -334,15 +334,6 @@ function createIframeBridge(store, options = {}) {
       const currentScrollY = window.scrollY || document.documentElement.scrollTop;
       sendPreprEvent("getScrollPosition", { value: currentScrollY });
     }
-    if (data?.event === "prepr:scrollToField") {
-      if (typeof data.field !== "string" || !data.field) return;
-      if (data.id !== void 0 && typeof data.id !== "string") return;
-      try {
-        onScrollToField?.({ field: data.field, id: data.id });
-      } catch (error) {
-        debug.warn("scrollToField handler failed", error);
-      }
-    }
   };
   return {
     start() {
@@ -367,7 +358,7 @@ var import_stega2 = require("@vercel/stega");
 
 // src/core/stega/clean.ts
 var import_stega = require("@vercel/stega");
-var debug2 = createScopedLogger("stega:clean");
+var debug = createScopedLogger("stega:clean");
 function decodeStega(str) {
   if (!str) return null;
   try {
@@ -376,7 +367,7 @@ function decodeStega(str) {
       return decoded;
     }
   } catch (error) {
-    debug2.log("error decoding stega data", error);
+    debug.log("error decoding stega data", error);
     const match = str.match(/{"origin.*?}/);
     if (match) {
       try {
@@ -385,7 +376,7 @@ function decodeStega(str) {
           return decodedMatch;
         }
       } catch (innerError) {
-        debug2.log("error decoding stega regex match", innerError);
+        debug.log("error decoding stega regex match", innerError);
       }
     }
   }
@@ -421,37 +412,15 @@ function isRenderedElement(element) {
   if (!style) return true;
   return style.visibility !== "hidden" && style.display !== "none";
 }
-function parseEditHref(href) {
-  try {
-    const url = new URL(href, window.location.origin);
-    return {
-      id: url.pathname.split("/").pop() || void 0,
-      field: url.searchParams.get("field") || void 0,
-      locale: url.searchParams.get("locale") || void 0
-    };
-  } catch {
-    return {};
-  }
-}
-function setOrRemove(element, name, value) {
-  if (value) {
-    element.setAttribute(name, value);
-  } else {
-    element.removeAttribute(name);
-  }
-}
 function tagEncodedElement(element, decoded) {
   element.setAttribute("data-prepr-encoded", "");
   element.setAttribute("data-prepr-href", decoded.href);
   element.setAttribute("data-prepr-origin", decoded.origin);
-  const { id, field, locale } = parseEditHref(decoded.href);
-  setOrRemove(element, "data-prepr-id", id);
-  setOrRemove(element, "data-prepr-field", field);
-  setOrRemove(element, "data-prepr-locale", locale);
 }
 
 // src/core/stega/auto-clean.ts
-var debug3 = createScopedLogger("stega:auto-clean");
+var debug2 = createScopedLogger("stega:auto-clean");
+var HYDRATION_RETRY_MS = 100;
 function createStegaAutoClean(options) {
   const stripText = options?.enabled ?? true;
   let observer = null;
@@ -460,8 +429,29 @@ function createStegaAutoClean(options) {
   let pendingHidden = /* @__PURE__ */ new Set();
   let pendingDirty = /* @__PURE__ */ new Set();
   let debounceTimeout = null;
+  const isHydrated = options?.isHydrated;
+  let pendingHydration = /* @__PURE__ */ new Set();
+  let hydrationTimeout = null;
+  function retryPendingHydration() {
+    hydrationTimeout = null;
+    processing = true;
+    const batch = [...pendingHydration];
+    pendingHydration.clear();
+    batch.forEach((textNode) => {
+      if (textNode.isConnected) cleanTextNode(textNode);
+    });
+    processing = false;
+  }
   function cleanTextNode(textNode) {
     if (isIgnoredTextNode(textNode)) return false;
+    if (isHydrated && !isHydrated(textNode)) {
+      pendingHydration.add(textNode);
+      hydrationTimeout ?? (hydrationTimeout = setTimeout(
+        retryPendingHydration,
+        HYDRATION_RETRY_MS
+      ));
+      return false;
+    }
     const textContent = textNode.textContent;
     const info = cleaned.get(textNode);
     const settled = stripText ? info?.cleaned : info?.original;
@@ -494,7 +484,7 @@ function createStegaAutoClean(options) {
       }
       pendingHidden.add(textNode);
     } catch (error) {
-      debug3.log("error cleaning text node", error);
+      debug2.log("error cleaning text node", error);
     }
     return false;
   }
@@ -580,13 +570,17 @@ function createStegaAutoClean(options) {
     if (observer || typeof window === "undefined") return;
     scanAndClean();
     setupObserver();
-    debug3.log("stega auto-clean started");
+    debug2.log("stega auto-clean started");
   }
   function stop() {
     if (debounceTimeout) {
       clearTimeout(debounceTimeout);
       debounceTimeout = null;
     }
+    if (hydrationTimeout) {
+      clearTimeout(hydrationTimeout);
+      hydrationTimeout = null;
+    }
     if (observer) {
       observer.disconnect();
       observer = null;
@@ -594,13 +588,14 @@ function createStegaAutoClean(options) {
     cleaned = /* @__PURE__ */ new WeakMap();
     pendingHidden = /* @__PURE__ */ new Set();
     pendingDirty = /* @__PURE__ */ new Set();
-    debug3.log("stega auto-clean stopped");
+    pendingHydration = /* @__PURE__ */ new Set();
+    debug2.log("stega auto-clean stopped");
   }
   return { start, stop };
 }
 
 // src/core/stega/elements.ts
-var debug4 = createScopedLogger("stega:elements");
+var debug3 = createScopedLogger("stega:elements");
 var StegaElements = class {
   constructor(decode = decodeStega) {
     this.observer = null;
@@ -645,7 +640,7 @@ var StegaElements = class {
     walkTextNodes(document.body, (textNode) => {
       if (this.tagFromTextNode(textNode)) encodedCount++;
     });
-    debug4.log("document scan complete, encoded", encodedCount, "elements");
+    debug3.log("document scan complete, encoded", encodedCount, "elements");
     this.elements = document.querySelectorAll("[data-prepr-encoded]");
   }
   /** `onUpdate` fires after each debounced batch, for refreshing derived state. */
@@ -701,9 +696,6 @@ var StegaElements = class {
       element.removeAttribute("data-prepr-encoded");
       element.removeAttribute("data-prepr-href");
       element.removeAttribute("data-prepr-origin");
-      element.removeAttribute("data-prepr-id");
-      element.removeAttribute("data-prepr-field");
-      element.removeAttribute("data-prepr-locale");
       element.classList.remove("prepr-overlay-active");
     });
     this.elements = void 0;
@@ -711,7 +703,7 @@ var StegaElements = class {
 };
 
 // src/core/stega/overlay.ts
-var debug5 = createScopedLogger("stega:overlay");
+var debug4 = createScopedLogger("stega:overlay");
 var StegaOverlay = class {
   constructor(onEdit) {
     this.overlay = null;
@@ -756,8 +748,7 @@ var StegaOverlay = class {
     const origin = element.getAttribute("data-prepr-origin");
     const id = element.getAttribute("data-prepr-id") ?? void 0;
     const field = element.getAttribute("data-prepr-field") ?? void 0;
-    const locale = element.getAttribute("data-prepr-locale") ?? void 0;
-    debug5.log("showing overlay", { href, origin });
+    debug4.log("showing overlay", { href, origin });
     const overlay = this.overlay;
     overlay.style.display = "block";
     overlay.style.top = `${rect.top + window.scrollY - 2}px`;
@@ -789,7 +780,7 @@ var StegaOverlay = class {
         tooltip.style.left = `${left}px`;
       });
       tooltip.onclick = () => {
-        this.onEdit({ href, origin, id, field, locale });
+        this.onEdit({ href, origin, id, field });
       };
     }
     this.currentElement = element;
@@ -829,7 +820,7 @@ var StegaOverlay = class {
 };
 
 // src/core/stega/proximity.ts
-var debug6 = createScopedLogger("stega:proximity");
+var debug5 = createScopedLogger("stega:proximity");
 var StegaProximity = class {
   constructor() {
     this.highlighted = /* @__PURE__ */ new Set();
@@ -864,9 +855,9 @@ var StegaProximity = class {
       );
       const nodes = this.getEncodedElements();
       nodes.forEach((el) => this.observer.observe(el));
-      debug6.log("observing", nodes.length, "encoded elements");
+      debug5.log("observing", nodes.length, "encoded elements");
     } catch (error) {
-      debug6.log("error setting up IntersectionObserver", error);
+      debug5.log("error setting up IntersectionObserver", error);
     }
   }
   stopObserving() {
@@ -936,7 +927,7 @@ function removeStegaStyles() {
 }
 
 // src/core/stega/scan.ts
-var debug7 = createScopedLogger("stega:scan");
+var debug6 = createScopedLogger("stega:scan");
 var EDITOR_MODE_STYLES = "[data-prepr-encoded]{cursor:pointer}";
 function createStegaController(opts) {
   const tooltipEnabled = opts.tooltip ?? true;
@@ -969,13 +960,12 @@ function createStegaController(opts) {
       href: encoded.getAttribute("data-prepr-href") ?? "",
       origin: encoded.getAttribute("data-prepr-origin") ?? "",
       id: encoded.getAttribute("data-prepr-id") ?? void 0,
-      field: encoded.getAttribute("data-prepr-field") ?? void 0,
-      locale: encoded.getAttribute("data-prepr-locale") ?? void 0
+      field: encoded.getAttribute("data-prepr-field") ?? void 0
     });
   };
   const start = () => {
     if (initialized) {
-      debug7.log("already initialized, skipping setup");
+      debug6.log("already initialized, skipping setup");
       return;
     }
     if (!tooltipEnabled) {
@@ -985,7 +975,7 @@ function createStegaController(opts) {
       });
       document.addEventListener("click", handleClick, { capture: true });
       initialized = true;
-      debug7.log("stega controller started (editor mode)");
+      debug6.log("stega controller started (editor mode)");
       return;
     }
     injectStegaStyles();
@@ -1016,7 +1006,7 @@ function createStegaController(opts) {
       passive: true
     });
     initialized = true;
-    debug7.log("stega controller started");
+    debug6.log("stega controller started");
   };
   const stop = () => {
     if (!initialized) return;
@@ -1025,7 +1015,7 @@ function createStegaController(opts) {
       elements.cleanup();
       removeStegaStyles();
       initialized = false;
-      debug7.log("stega controller stopped (editor mode)");
+      debug6.log("stega controller stopped (editor mode)");
       return;
     }
     if (throttledMouseMove) {
@@ -1045,43 +1035,11 @@ function createStegaController(opts) {
     elements.cleanup();
     removeStegaStyles();
     initialized = false;
-    debug7.log("stega controller stopped");
+    debug6.log("stega controller stopped");
   };
   return { start, stop };
 }
 
-// src/core/stega/scroll-to-field.ts
-var debug8 = createScopedLogger("stega:scroll");
-var FLASH_DURATION_MS = 1200;
-var flashTimeout = null;
-function scrollToField(request) {
-  const { field, id } = request;
-  if (!field) return false;
-  const candidates = document.querySelectorAll(
-    "[data-prepr-encoded]"
-  );
-  let target = null;
-  for (const candidate of candidates) {
-    if (candidate.getAttribute("data-prepr-field") !== field) continue;
-    if (id && candidate.getAttribute("data-prepr-id") !== id) continue;
-    target = candidate;
-    break;
-  }
-  if (!target) {
-    debug8.log("no element found for field", field);
-    return false;
-  }
-  target.scrollIntoView({ behavior: "smooth", block: "center" });
-  if (flashTimeout) clearTimeout(flashTimeout);
-  document.querySelectorAll(".prepr-overlay-active").forEach((el) => el.classList.remove("prepr-overlay-active"));
-  target.classList.add("prepr-overlay-active");
-  flashTimeout = setTimeout(() => {
-    target.classList.remove("prepr-overlay-active");
-    flashTimeout = null;
-  }, FLASH_DURATION_MS);
-  return true;
-}
-
 // src/core/store.ts
 var DEFAULT_STATE = {
   locale: "en",
@@ -2194,7 +2152,7 @@ function definePreprToolbar() {
 }
 
 // src/core/create-preview.ts
-var debug9 = createScopedLogger("create-preview");
+var debug7 = createScopedLogger("create-preview");
 var controllerStores = /* @__PURE__ */ new WeakMap();
 function defaultNavigation() {
   return {
@@ -2236,7 +2194,7 @@ function createPreprPreview(opts = {}) {
   const search = new URLSearchParams(window.location.search);
   const hideBar = search.get(PARAM_HIDE_BAR) === "true";
   if (hideBar) {
-    debug9.log(`${PARAM_HIDE_BAR}=true \u2014 no visible toolbar`);
+    debug7.log(`${PARAM_HIDE_BAR}=true \u2014 no visible toolbar`);
   }
   const mountUi = (options?.ui ?? true) && !isIframe && !hideBar;
   const locale = resolveLocale(options);
@@ -2272,17 +2230,18 @@ function createPreprPreview(opts = {}) {
     tooltip: mountUi,
     // In the editor, ask the parent to focus the field instead of opening a new
     // tab. Standalone previews keep the window.open behaviour.
-    onEdit: ({ href, id, field, locale: contentLocale }) => {
+    onEdit: ({ href, origin, id, field }) => {
       const safeHref = href ? safeEditUrl(href) : null;
       if (href && !safeHref) {
-        debug9.warn("ignored edit request with unsupported href scheme");
+        debug7.warn("ignored edit request with unsupported href scheme");
         return;
       }
       if (isIframe) {
         sendPreprEvent("field_edit_requested", {
+          href: safeHref ?? void 0,
+          origin,
           id,
-          field,
-          locale: contentLocale
+          field
         });
       } else if (safeHref) {
         window.open(safeHref, "_blank", "noopener,noreferrer");
@@ -2290,7 +2249,8 @@ function createPreprPreview(opts = {}) {
     }
   });
   const autoClean = createStegaAutoClean({
-    enabled: options?.autoClean
+    enabled: options?.autoClean,
+    isHydrated: opts.isHydrated
   });
   autoClean.start();
   const handleChange = createChangeHandler({
@@ -2309,15 +2269,7 @@ function createPreprPreview(opts = {}) {
     handleChange(before, state);
   });
   const bridge = createIframeBridge(store, {
-    allowedEditorOrigins: options?.allowedEditorOrigins,
-    // The editor selecting a field scrolls the matching element into view. The
-    // lookup relies on the attributes the stega scan writes, so it finds
-    // nothing until encoded content has been tagged.
-    onScrollToField: ({ field, id }) => {
-      if (!scrollToField({ field, id })) {
-        debug9.log("no element on this page renders field", field);
-      }
-    }
+    allowedEditorOrigins: options?.allowedEditorOrigins
   });
   sendPreprEvent(
     "getScrollPosition",
@@ -2337,18 +2289,101 @@ function createPreprPreview(opts = {}) {
       bridge.stop();
     }
     el?.remove();
-    debug9.log("preview destroyed");
+    debug7.log("preview destroyed");
   }
   const controller = { destroy };
   controllerStores.set(controller, store);
   return controller;
 }
 
+// src/react/hydration.ts
+var PROPS_KEY_PREFIX = "__reactProps$";
+function reactProps(element) {
+  for (const key of Object.keys(element)) {
+    if (key.startsWith(PROPS_KEY_PREFIX)) {
+      return element[key];
+    }
+  }
+  return void 0;
+}
+function isReactHydrated(text) {
+  for (let el = text.parentElement; el; el = el.parentElement) {
+    const props = reactProps(el);
+    if (!props) continue;
+    return el === text.parentElement || props.dangerouslySetInnerHTML != null;
+  }
+  return true;
+}
+
+// src/nextjs/ab-switch.ts
+function applyPreprAbBucket() {
+  const match = document.cookie.match(/(?:^|; )prepr_ab_bucket=([AB])(?:;|$)/);
+  const bucket = match ? match[1] : "A";
+  const state = window;
+  if (state.__preprAbBucket === bucket) return;
+  state.__preprAbBucket = bucket;
+  const css = bucket === "A" ? "" : '[data-prepr-ab="A"]{display:none!important}[data-prepr-ab="' + bucket + '"]{display:contents!important}';
+  try {
+    if (!state.__preprAbSheet) {
+      const sheet = new CSSStyleSheet();
+      document.adoptedStyleSheets = document.adoptedStyleSheets.concat(sheet);
+      state.__preprAbSheet = sheet;
+    }
+    state.__preprAbSheet.replaceSync(css);
+  } catch {
+    if (!state.__preprAbSheet) {
+      state.__preprAbSheet = document.createElement("style");
+      document.head.appendChild(state.__preprAbSheet);
+    }
+    state.__preprAbSheet.textContent = css;
+  }
+}
+function applyPreprDecisions() {
+  const match = document.cookie.match(/(?:^|; )prepr_decisions=([^;]*)/);
+  let raw;
+  try {
+    raw = match ? decodeURIComponent(match[1]) : "";
+  } catch {
+    raw = "";
+  }
+  const state = window;
+  if (state.__preprDecisions === raw) return;
+  state.__preprDecisions = raw;
+  const id = /^[\w-]+$/;
+  let css = "";
+  raw.split("~").forEach((pair) => {
+    const at = pair.indexOf(":");
+    const group = pair.slice(0, at);
+    if (at < 1 || !id.test(group)) return;
+    const selector = '[data-prepr-group="' + group + '"]';
+    css += selector + "{display:none!important}";
+    pair.slice(at + 1).split("|").forEach((variant) => {
+      if (id.test(variant)) {
+        css += selector + '[data-prepr-variant="' + variant + '"]{display:contents!important}';
+      }
+    });
+  });
+  try {
+    if (!state.__preprDecisionSheet) {
+      const sheet = new CSSStyleSheet();
+      document.adoptedStyleSheets = document.adoptedStyleSheets.concat(sheet);
+      state.__preprDecisionSheet = sheet;
+    }
+    state.__preprDecisionSheet.replaceSync(css);
+  } catch {
+    if (!state.__preprDecisionSheet) {
+      state.__preprDecisionSheet = document.createElement("style");
+      document.head.appendChild(state.__preprDecisionSheet);
+    }
+    state.__preprDecisionSheet.textContent = css;
+  }
+}
+
 // src/react/components.ts
 var import_react = require("react");
 
 // src/version.ts
-var VERSION = "0.5.0-rc.1";
+var VERSION = "0.6.0-alpha.0";
 
 // src/core/pixel.ts
 var PIXEL_SCRIPT_URL = "https://cdn.tracking.prepr.io/js/prepr.min.js";
@@ -2416,14 +2451,53 @@ function PreprToolbar({
       navigation: {
         navigate: (url) => router.push(url),
         currentPath: () => pathnameRef.current + window.location.search
-      }
+      },
+      isHydrated: isReactHydrated
     });
     return () => toolbar.destroy();
   }, []);
   return null;
 }
+function PreprAbSwitch() {
+  (0, import_react2.useLayoutEffect)(() => {
+    applyPreprAbBucket();
+    applyPreprDecisions();
+  });
+  return null;
+}
+var VARIANT_KEY_ATTRIBUTE = "data-prepr-variant-key";
+function PreprVariantTracking({
+  variantKeys,
+  ab,
+  children
+}) {
+  const ref = (0, import_react2.useRef)(null);
+  const keys = variantKeys.join(" ");
+  (0, import_react2.useLayoutEffect)(() => {
+    const elements = [...ref.current?.children ?? []];
+    const list = keys.split(" ");
+    const pairs = elements.length === list.length ? elements.map((element, i2) => [element, list[i2]]) : elements.slice(0, 1).map((element) => [element, list[0]]);
+    const tagged = pairs.filter(([element, key]) => {
+      if (element.hasAttribute(VARIANT_KEY_ATTRIBUTE)) return false;
+      element.setAttribute(VARIANT_KEY_ATTRIBUTE, key);
+      return true;
+    });
+    return () => {
+      for (const [element] of tagged) {
+        element.removeAttribute(VARIANT_KEY_ATTRIBUTE);
+      }
+    };
+  }, [keys]);
+  return (0, import_react2.createElement)(
+    "div",
+    ab === void 0 ? { ref, style: { display: "contents" } } : { ref, "data-prepr-ab": ab },
+    children
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  PreprAbSwitch,
   PreprToolbar,
-  PreprTrackingPixel
+  PreprTrackingPixel,
+  PreprVariantTracking
 });

package/dist/nextjs/components.d.cts

@@ -1,4 +1,6 @@
-import { k as PreprPixelConfig, l as PreprToolbarComponentProps } from '../pixel-e1fUWl2Y.cjs';
+import { ReactNode, ReactElement } from 'react';
+import { k as PreprToolbarComponentProps } from '../types-BYH9XqmN.cjs';
+import { P as PreprPixelConfig } from '../pixel-DwW7cXJm.cjs';
 
 interface PreprTrackingPixelProps {
     /** Prepr tracking/access token. */
@@ -20,5 +22,34 @@ declare function PreprTrackingPixel({ id, config, }: PreprTrackingPixelProps): n
  * `createPreprPreview` mounts imperatively.
  */
 declare function PreprToolbar({ options, ...props }: PreprToolbarComponentProps): null;
+/**
+ * Applies the visitor's A/B bucket, and the segment variants decided in the
+ * proxy, after client-side navigation. A full page
+ * load is covered by the inline script `PreprStack` renders, but React does
+ * not run inline scripts that arrive with a client-side navigation; a layout
+ * effect still runs before the browser paints the new page. Rendered by
+ * `PreprStack`; you do not need it yourself.
+ */
+declare function PreprAbSwitch(): null;
+/**
+ * Wraps one rendered variant and, once hydrated, puts the variant keys on the
+ * elements inside, where Prepr's tracking pixel counts impressions and the
+ * clicks of any `data-prepr-variant-event` element in them. The wrapper itself
+ * takes no box (`display: contents`), and the pixel only counts an element it
+ * can see scroll into view, so the keys belong on the sections. The pixel
+ * watches for attributes added after load.
+ *
+ * A variant can hold several items, each with its own key. When the wrapper
+ * holds one element per key they are paired in order; otherwise only the
+ * first element is tagged, with the first key. An element that already
+ * carries a variant key is left alone. Rendered by `PreprStack` with
+ * `trackVariants`; you do not need it yourself.
+ */
+declare function PreprVariantTracking({ variantKeys, ab, children, }: {
+    variantKeys: string[];
+    /** The A/B bucket wrapper this also serves as; its CSS decides `display`. */
+    ab?: string;
+    children?: ReactNode;
+}): ReactElement;
 
-export { PreprToolbar, PreprTrackingPixel, type PreprTrackingPixelProps };
+export { PreprAbSwitch, PreprToolbar, PreprTrackingPixel, type PreprTrackingPixelProps, PreprVariantTracking };

package/dist/nextjs/components.d.ts

@@ -1,4 +1,6 @@
-import { k as PreprPixelConfig, l as PreprToolbarComponentProps } from '../pixel-e1fUWl2Y.js';
+import { ReactNode, ReactElement } from 'react';
+import { k as PreprToolbarComponentProps } from '../types-BYH9XqmN.js';
+import { P as PreprPixelConfig } from '../pixel-DwW7cXJm.js';
 
 interface PreprTrackingPixelProps {
     /** Prepr tracking/access token. */
@@ -20,5 +22,34 @@ declare function PreprTrackingPixel({ id, config, }: PreprTrackingPixelProps): n
  * `createPreprPreview` mounts imperatively.
  */
 declare function PreprToolbar({ options, ...props }: PreprToolbarComponentProps): null;
+/**
+ * Applies the visitor's A/B bucket, and the segment variants decided in the
+ * proxy, after client-side navigation. A full page
+ * load is covered by the inline script `PreprStack` renders, but React does
+ * not run inline scripts that arrive with a client-side navigation; a layout
+ * effect still runs before the browser paints the new page. Rendered by
+ * `PreprStack`; you do not need it yourself.
+ */
+declare function PreprAbSwitch(): null;
+/**
+ * Wraps one rendered variant and, once hydrated, puts the variant keys on the
+ * elements inside, where Prepr's tracking pixel counts impressions and the
+ * clicks of any `data-prepr-variant-event` element in them. The wrapper itself
+ * takes no box (`display: contents`), and the pixel only counts an element it
+ * can see scroll into view, so the keys belong on the sections. The pixel
+ * watches for attributes added after load.
+ *
+ * A variant can hold several items, each with its own key. When the wrapper
+ * holds one element per key they are paired in order; otherwise only the
+ * first element is tagged, with the first key. An element that already
+ * carries a variant key is left alone. Rendered by `PreprStack` with
+ * `trackVariants`; you do not need it yourself.
+ */
+declare function PreprVariantTracking({ variantKeys, ab, children, }: {
+    variantKeys: string[];
+    /** The A/B bucket wrapper this also serves as; its CSS decides `display`. */
+    ab?: string;
+    children?: ReactNode;
+}): ReactElement;
 
-export { PreprToolbar, PreprTrackingPixel, type PreprTrackingPixelProps };
+export { PreprAbSwitch, PreprToolbar, PreprTrackingPixel, type PreprTrackingPixelProps, PreprVariantTracking };