@preprio/toolkit 0.1.0-beta.6 → 0.2.0-beta.3

package/dist/{chunk-NLQIRN5O.js → chunk-6OOGNVJ4.js}

@@ -1,3 +1,21 @@
+// src/core/features.ts
+function isEnabled(config) {
+  if (typeof config === "boolean") return config;
+  return config?.enabled ?? true;
+}
+function resolveFeatures(features) {
+  return {
+    segments: isEnabled(features?.segments),
+    abTesting: isEnabled(features?.abTesting),
+    editMode: isEnabled(features?.editMode)
+  };
+}
+var ALL_FEATURES_ENABLED = Object.freeze({
+  segments: true,
+  abTesting: true,
+  editMode: true
+});
+
 // src/core/stega/clean.ts
 import { vercelStegaClean, vercelStegaDecode } from "@vercel/stega";
 
@@ -706,7 +724,8 @@ var DEFAULT_STATE = {
   editMode: false,
   previewMode: false,
   toolbarOpen: false,
-  isIframe: false
+  isIframe: false,
+  features: ALL_FEATURES_ENABLED
 };
 function createToolbarStore(initial = {}) {
   let state = { ...DEFAULT_STATE, ...initial };
@@ -1259,9 +1278,10 @@ function StatusPill({
   t: t3,
   handlers
 }) {
+  const { features } = state;
   const defaultSegmentName = state.segments.find((s2) => s2._id === "all_other_users")?.name ?? t3("adaptiveContent.allOtherUsers");
   let segmentLabel;
-  if (!state.previewMode) {
+  if (!state.previewMode || !features.segments) {
     segmentLabel = t3("common.user");
   } else if (state.selectedSegment !== null) {
     const seg = state.segments.find((s2) => s2._id === state.selectedSegment);
@@ -1285,7 +1305,7 @@ function StatusPill({
           {
             class: "prepr-status-variant",
             "data-prepr": "status-variant",
-            hidden: !state.previewMode,
+            hidden: !features.abTesting || !state.previewMode,
             children: state.selectedVariant === "B" ? "B" : "A"
           }
         ),
@@ -1294,7 +1314,7 @@ function StatusPill({
           {
             class: "prepr-status-x",
             "data-prepr": "status-x",
-            hidden: !state.previewMode || state.selectedSegment === null,
+            hidden: !features.segments || !state.previewMode || state.selectedSegment === null,
             children: /* @__PURE__ */ u2(RawSvg, { svg: XMARK_ICON_SVG })
           }
         )
@@ -1314,7 +1334,7 @@ function CloseEditPill({
       class: "prepr-close-edit-pill",
       "data-prepr": "close-edit-pill",
       "aria-label": t3("editingTools.ariaCloseEditMode"),
-      hidden: !state.editMode || state.isIframe,
+      hidden: !state.features.editMode || !state.editMode || state.isIframe,
       onClick: () => handlers.onCloseEditPill(),
       children: [
         /* @__PURE__ */ u2("span", { "data-prepr": "close-edit-label", children: t3("editingTools.editMode") }),
@@ -1330,7 +1350,9 @@ function Panel({
   segmentFilter,
   handlers
 }) {
-  const hasPersonalization = state.selectedSegment !== null || state.selectedVariant !== null;
+  const { features } = state;
+  const hasPersonalization = features.segments && state.selectedSegment !== null || features.abTesting && state.selectedVariant !== null;
+  const showAdaptive = features.segments || features.abTesting;
   return /* @__PURE__ */ u2(S, { children: [
     /* @__PURE__ */ u2(
       "style",
@@ -1373,12 +1395,12 @@ function Panel({
             children: [
               /* @__PURE__ */ u2(Header, { t: t3, onClose: handlers.onClose }),
               /* @__PURE__ */ u2("div", { class: "prepr-section", "data-prepr": "section-adaptive", children: [
-                /* @__PURE__ */ u2("span", { class: "prepr-section-label", "data-prepr": "adaptive-label", children: t3("adaptiveContent.adaptiveContent") }),
+                /* @__PURE__ */ u2("span", { class: "prepr-section-label", "data-prepr": "adaptive-label", children: showAdaptive ? t3("adaptiveContent.adaptiveContent") : t3("adaptiveContent.enablePreview") }),
                 /* @__PURE__ */ u2("div", { class: "prepr-row", children: [
                   /* @__PURE__ */ u2("h2", { class: "prepr-row-title", "data-prepr": "preview-label", children: t3("adaptiveContent.enablePreview") }),
                   /* @__PURE__ */ u2(PreviewSelector, { state, t: t3, handlers })
                 ] }),
-                /* @__PURE__ */ u2("div", { class: "prepr-row", children: [
+                features.segments && /* @__PURE__ */ u2("div", { class: "prepr-row", children: [
                   /* @__PURE__ */ u2("h2", { class: "prepr-row-title", "data-prepr": "segment-label", children: t3("adaptiveContent.segment") }),
                   /* @__PURE__ */ u2(
                     SegmentListbox,
@@ -1391,12 +1413,12 @@ function Panel({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ u2("div", { class: "prepr-row", children: [
+                features.abTesting && /* @__PURE__ */ u2("div", { class: "prepr-row", children: [
                   /* @__PURE__ */ u2("h2", { class: "prepr-row-title", "data-prepr": "variant-label", children: t3("adaptiveContent.ABVariant") }),
                   /* @__PURE__ */ u2(VariantSelector, { state, handlers })
                 ] })
               ] }),
-              /* @__PURE__ */ u2("div", { class: "prepr-section", "data-prepr": "section-editing", children: [
+              features.editMode && /* @__PURE__ */ u2("div", { class: "prepr-section", "data-prepr": "section-editing", children: [
                 /* @__PURE__ */ u2("span", { class: "prepr-section-label", "data-prepr": "editing-label", children: t3("editingTools.editingTools") }),
                 /* @__PURE__ */ u2("div", { class: "prepr-row", children: [
                   /* @__PURE__ */ u2("h2", { class: "prepr-row-title", "data-prepr": "edit-label", children: t3("editingTools.editMode") }),
@@ -1449,26 +1471,28 @@ var PreprToolbarElement = class extends HTMLElementBase {
       onToggle: () => this.set({ toolbarOpen: !this.state.toolbarOpen }),
       onClose: () => this.set({ toolbarOpen: false }),
       onPreviewMode: (value) => this.set({ previewMode: value }),
-      onEditMode: (value) => this.set({ editMode: value }),
+      onEditMode: (value) => {
+        if (!this.state.features.editMode) return;
+        this.set({ editMode: value });
+      },
       onVariant: (value) => {
+        if (!this.state.features.abTesting) return;
         if (!this.state.previewMode) return;
         this.set({ selectedVariant: value });
       },
       // Reset contract: segment to none, variant to 'A' — NOT null, since the
       // resulting `variant_changed` must carry 'A' on the wire — edit mode off.
-      onReset: () => this.set({
-        selectedSegment: null,
-        selectedVariant: "A",
-        editMode: false
-      }),
+      // Disabled features are left untouched: their state is already inert and
+      // writing it would emit events for a feature the consumer turned off.
+      onReset: () => this.set(this.resetPatch({ editMode: false })),
       onStatusPill: () => {
         if (!this.state.previewMode) {
           this.set({ previewMode: true });
           return;
         }
-        if (this.state.selectedSegment !== null || this.state.selectedVariant !== "A") {
-          this.set({ selectedSegment: null, selectedVariant: "A" });
-        }
+        const patch = this.resetPatch();
+        const dirty = "selectedSegment" in patch && this.state.selectedSegment !== null || "selectedVariant" in patch && this.state.selectedVariant !== "A";
+        if (dirty) this.set(patch);
       },
       onCloseEditPill: () => this.set({ editMode: false }),
       onSegmentButtonClick: () => this.toggleListbox(!this.listboxOpen),
@@ -1518,6 +1542,14 @@ var PreprToolbarElement = class extends HTMLElementBase {
   set(patch) {
     this.store?.set(patch);
   }
+  /** Reset patch covering only the enabled personalization features. */
+  resetPatch(base = {}) {
+    const { features } = this.state;
+    const patch = { ...base };
+    if (features.segments) patch.selectedSegment = null;
+    if (features.abTesting) patch.selectedVariant = "A";
+    return patch;
+  }
   // Synchronous: Preact's top-level render() mutates the DOM before returning.
   renderPanel(state) {
     const root = this.shadowRoot;
@@ -1676,6 +1708,7 @@ var PreprToolbarElement = class extends HTMLElementBase {
     ) ?? null;
   }
   chooseSegment(id) {
+    if (!this.state.features.segments) return;
     this.listboxOpen = false;
     this.segmentFilter = "";
     this.set({ selectedSegment: id });
@@ -1866,7 +1899,7 @@ function createIframeBridge(store, options = {}) {
         const top = data.scrollPosition;
         setTimeout(() => window.scrollTo(0, top), 1);
       }
-      store.set({ previewMode: true, editMode: data.editMode ?? true });
+      store?.set({ previewMode: true, editMode: data.editMode ?? true });
     }
     if (!parentOrigin || evt.origin !== parentOrigin) return;
     if (data?.event === "prepr:getScrollPosition") {
@@ -1898,7 +1931,7 @@ function cookieOpts() {
   };
 }
 function createChangeHandler(deps) {
-  const { store, stega, syncAutoClean } = deps;
+  const { store, stega, syncAutoClean, features, editingEnabled } = deps;
   function updateParams(patch) {
     const [path, existing] = splitPath(deps.currentPath());
     const params = new URLSearchParams(existing);
@@ -1914,7 +1947,7 @@ function createChangeHandler(deps) {
   }
   return function handleChange(before, after) {
     const paramPatch = {};
-    if (before.selectedSegment !== after.selectedSegment) {
+    if (features.segments && before.selectedSegment !== after.selectedSegment) {
       if (after.selectedSegment === null) {
         removeCookie(COOKIE_SEGMENT, "/", crossSiteCookieOptions());
       } else {
@@ -1925,7 +1958,7 @@ function createChangeHandler(deps) {
         segment: after.selectedSegment ?? void 0
       });
     }
-    if (before.selectedVariant !== after.selectedVariant) {
+    if (features.abTesting && before.selectedVariant !== after.selectedVariant) {
       if (after.selectedVariant === null) {
         removeCookie(COOKIE_VARIANT, "/", crossSiteCookieOptions());
       } else {
@@ -1940,7 +1973,7 @@ function createChangeHandler(deps) {
       updateParams(paramPatch);
     }
     if (before.editMode !== after.editMode) {
-      if (after.editMode) {
+      if (after.editMode && editingEnabled) {
         stega.start();
       } else {
         stega.stop();
@@ -1984,8 +2017,8 @@ function splitPath(full) {
   return [full.slice(0, index), full.slice(index + 1)];
 }
 
-// src/core/create-toolbar.ts
-var debug7 = createScopedLogger("create-toolbar");
+// src/core/create-preview.ts
+var debug7 = createScopedLogger("create-preview");
 var controllerStores = /* @__PURE__ */ new WeakMap();
 function defaultNavigation() {
   return {
@@ -2006,7 +2039,7 @@ function resolveLocale(options) {
   }
   return "en";
 }
-function createPreprToolbar(opts) {
+function createPreprPreview(opts = {}) {
   const { props, options } = opts;
   const navigation = opts.navigation ?? defaultNavigation();
   initDebugLogger(options?.debug ?? false);
@@ -2019,36 +2052,40 @@ function createPreprToolbar(opts) {
   const search = new URLSearchParams(window.location.search);
   const hideBar = search.get(PARAM_HIDE_BAR) === "true";
   if (hideBar) {
-    debug7.log(`${PARAM_HIDE_BAR}=true \u2014 skipping mount`);
-    return noop();
+    debug7.log(`${PARAM_HIDE_BAR}=true \u2014 no visible toolbar`);
   }
+  const mountUi = (options?.ui ?? true) && !isIframe && !hideBar;
   const locale = resolveLocale(options);
+  const features = resolveFeatures(options?.features);
   const previewMode = getCookie(COOKIE_PREVIEW_MODE) === "true";
   const toolbarOpen = getCookie(COOKIE_TOOLBAR_OPEN) === "true";
-  const cookieSegment = getCookie(COOKIE_SEGMENT);
-  const cookieVariant = getCookie(COOKIE_VARIANT);
-  const rawVariant = props.activeVariant ?? cookieVariant;
+  const cookieSegment = features.segments ? getCookie(COOKIE_SEGMENT) : null;
+  const cookieVariant = features.abTesting ? getCookie(COOKIE_VARIANT) : null;
+  const rawVariant = features.abTesting ? props?.activeVariant ?? cookieVariant : null;
   const selectedVariant = rawVariant === "A" || rawVariant === "B" ? rawVariant : null;
   const store = createToolbarStore({
     locale,
-    segments: buildSegments(props.segments ?? props.data ?? []),
-    selectedSegment: props.activeSegment ?? cookieSegment ?? null,
+    features,
+    segments: features.segments ? buildSegments(props?.segments ?? props?.data ?? []) : [],
+    selectedSegment: features.segments ? props?.activeSegment ?? cookieSegment ?? null : null,
     selectedVariant,
     previewMode,
     toolbarOpen,
     isIframe
   });
   let el = null;
-  if (!isIframe) {
+  if (mountUi) {
     definePreprToolbar();
     el = document.createElement("prepr-toolbar");
     document.body.appendChild(el);
     el.connect(store, (key) => t2(key, locale));
   }
+  const editingEnabled = features.editMode || isIframe;
   const stega = createStegaController({
-    // The CMS deep-link tooltip is noise inside the editor; clicking the
-    // element itself requests the edit there.
-    tooltip: !isIframe,
+    // The CMS deep-link tooltip is chrome, so it follows the same decision as
+    // the bar: noise inside the editor (clicking the element itself requests
+    // the edit there), and unwanted in a headless preview that asked for no UI.
+    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, origin, id, field }) => {
@@ -2072,6 +2109,8 @@ function createPreprToolbar(opts) {
   }
   const handleChange = createChangeHandler({
     store,
+    features,
+    editingEnabled,
     navigate: (url) => navigation.navigate(url),
     currentPath: () => navigation.currentPath(),
     reload: navigation.reload ?? (() => window.location.reload()),
@@ -2085,7 +2124,9 @@ function createPreprToolbar(opts) {
     handleChange(before, state);
   });
   syncAutoClean(store.get().previewMode);
-  const bridge = createIframeBridge(store);
+  const bridge = createIframeBridge(store, {
+    allowedEditorOrigins: options?.allowedEditorOrigins
+  });
   sendPreprEvent("getScrollPosition", { value: 0 }, {
     allowUntrustedTarget: true
   });
@@ -2100,7 +2141,7 @@ function createPreprToolbar(opts) {
       bridge.stop();
     }
     el?.remove();
-    debug7.log("toolbar destroyed");
+    debug7.log("preview destroyed");
   }
   const controller = { destroy };
   controllerStores.set(controller, store);
@@ -2172,6 +2213,7 @@ function setTrackingParam(key, value) {
 }
 
 export {
+  resolveFeatures,
   COOKIE_PREVIEW_MODE,
   COOKIE_SEGMENT,
   COOKIE_VARIANT,
@@ -2185,7 +2227,7 @@ export {
   createToolbarStore,
   PreprToolbarElement,
   definePreprToolbar,
-  createPreprToolbar,
+  createPreprPreview,
   loadTrackingPixel,
   trackEvent,
   setTrackingParam