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

package/dist/react/index.cjs

@@ -0,0 +1,32 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react/index.ts
+var react_exports = {};
+__export(react_exports, {
+  PreprPreview: () => import_components.PreprPreview,
+  PreprTrackingPixel: () => import_components.PreprTrackingPixel
+});
+module.exports = __toCommonJS(react_exports);
+var import_components = require("./components.js");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PreprPreview,
+  PreprTrackingPixel
+});

package/dist/react/index.d.cts

@@ -0,0 +1 @@
+export { PreprPreview, PreprPreviewProps, PreprTrackingPixel, PreprTrackingPixelProps } from './components.js';

package/dist/react/index.d.ts

@@ -0,0 +1 @@
+export { PreprPreview, PreprPreviewProps, PreprTrackingPixel, PreprTrackingPixelProps } from './components.js';

package/dist/react/index.js

@@ -0,0 +1,9 @@
+// src/react/index.ts
+import {
+  PreprPreview,
+  PreprTrackingPixel
+} from "./components.js";
+export {
+  PreprPreview,
+  PreprTrackingPixel
+};

package/dist/sveltekit/index.cjs

@@ -35,7 +35,7 @@ __export(sveltekit_exports, {
 module.exports = __toCommonJS(sveltekit_exports);
 
 // src/version.ts
-var VERSION = "0.1.0-beta.6";
+var VERSION = "0.2.0-beta.3";
 
 // src/core/constants.ts
 var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";
@@ -48,6 +48,24 @@ var PARAM_VARIANT = "prepr_preview_ab";
 var PARAM_HIDE_BAR = "prepr_hide_bar";
 var ONE_YEAR_SECONDS = 60 * 60 * 24 * 365;
 
+// 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/middleware.ts
 var UTM_PARAMS = [
   "utm_source",
@@ -131,7 +149,8 @@ function processPreprRequest(request, opts) {
   if (!opts?.preview) {
     return { requestHeaders, responseCookies };
   }
-  const hasPreviewParams = searchParams.has(PARAM_SEGMENT) || searchParams.has(PARAM_VARIANT);
+  const features = resolveFeatures(opts?.features);
+  const hasPreviewParams = features.segments && searchParams.has(PARAM_SEGMENT) || features.abTesting && searchParams.has(PARAM_VARIANT);
   if (!hasPreviewParams) {
     const previewModeCookie = requestCookies.get(COOKIE_PREVIEW_MODE);
     const previewModeEnabled = previewModeCookie !== "false";
@@ -151,16 +170,16 @@ function processPreprRequest(request, opts) {
     });
   }
   if (!isLivePreview) {
-    const segmentCookie = requestCookies.get(COOKIE_SEGMENT);
+    const segmentCookie = features.segments ? requestCookies.get(COOKIE_SEGMENT) : void 0;
     if (segmentCookie) {
       requestHeaders.set("Prepr-Segments", segmentCookie);
     }
-    const abCookie = requestCookies.get(COOKIE_VARIANT);
+    const abCookie = features.abTesting ? requestCookies.get(COOKIE_VARIANT) : void 0;
     if (abCookie) {
       requestHeaders.set("Prepr-ABtesting", abCookie);
     }
   }
-  const previewAb = searchParams.get(PARAM_VARIANT);
+  const previewAb = features.abTesting ? searchParams.get(PARAM_VARIANT) : null;
   if (previewAb !== null) {
     requestHeaders.set("Prepr-ABtesting", previewAb);
     if (!isLivePreview) {
@@ -173,7 +192,7 @@ function processPreprRequest(request, opts) {
       });
     }
   }
-  const previewSegment = searchParams.get(PARAM_SEGMENT);
+  const previewSegment = features.segments ? searchParams.get(PARAM_SEGMENT) : null;
   if (previewSegment !== null) {
     requestHeaders.set("Prepr-Segments", previewSegment);
     if (!isLivePreview) {
@@ -348,16 +367,19 @@ async function getPreprEnvironmentSegments(token) {
     );
   }
 }
-async function getToolbarPropsFromHeaders(headers, token) {
+async function getToolbarPropsFromHeaders(headers, token, features) {
+  const resolved = resolveFeatures(features);
   let segments = [];
-  try {
-    segments = await getPreprEnvironmentSegments(token);
-  } catch {
-    segments = [];
+  if (resolved.segments) {
+    try {
+      segments = await getPreprEnvironmentSegments(token);
+    } catch {
+      segments = [];
+    }
   }
   return {
-    activeSegment: getActiveSegmentFromHeaders(headers),
-    activeVariant: getActiveVariantFromHeaders(headers),
+    activeSegment: resolved.segments ? getActiveSegmentFromHeaders(headers) : null,
+    activeVariant: resolved.abTesting ? getActiveVariantFromHeaders(headers) : null,
     segments,
     data: segments
   };
@@ -376,8 +398,8 @@ function getActiveVariant(headers) {
 function getPreprHeaders(headers) {
   return getPreprHeadersFromHeaders(headers);
 }
-async function getToolbarProps(headers, token) {
-  return getToolbarPropsFromHeaders(headers, token);
+async function getToolbarProps(headers, token, features) {
+  return getToolbarPropsFromHeaders(headers, token, features);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/sveltekit/index.d.cts

@@ -1,6 +1,67 @@
+interface PreprSegment {
+    readonly _id: string;
+    readonly name: string;
+}
+/**
+ * Per-feature config. `false` is shorthand for `{ enabled: false }`; the object
+ * form leaves room for per-feature options later without a breaking change.
+ */
+type PreprFeatureConfig = boolean | {
+    enabled?: boolean;
+};
+/** Toolkit features a consumer can turn off. Omitted keys stay enabled. */
+interface PreprFeatures {
+    /** Segment picker, `Prepr-Segments` header and its cookie/query param. */
+    segments?: PreprFeatureConfig;
+    /** A/B variant switch, `Prepr-ABtesting` header and its cookie/query param. */
+    abTesting?: PreprFeatureConfig;
+    /**
+     * The site's own click-to-edit: the toolbar's Edit mode control, the stega
+     * tooltip/overlay and the close-edit pill.
+     *
+     * NOT a security control, and NOT the Prepr editor's live preview. When the
+     * site is framed by the editor, `prepr:initVE` still activates edit mode —
+     * that is the CMS operating inside its own iframe, not an affordance offered
+     * to visitors. See iframe-bridge.ts.
+     */
+    editMode?: PreprFeatureConfig;
+}
+interface PreprToolbarProps {
+    readonly activeSegment: string | null;
+    readonly activeVariant: string | null;
+    /** Available segments to personalize on. */
+    readonly segments?: readonly PreprSegment[];
+    /** @deprecated Alias for `segments`. */
+    readonly data?: readonly PreprSegment[];
+}
+type PreprVariant = 'A' | 'B';
+interface PreprHeaders {
+    readonly 'prepr-customer-id'?: string;
+    readonly 'Prepr-Segments'?: string;
+    readonly 'Prepr-ABtesting'?: PreprVariant;
+    readonly 'Prepr-Preview-Bar'?: 'true';
+    readonly 'Prepr-Context-utm_source'?: string;
+    readonly 'Prepr-Context-utm_medium'?: string;
+    readonly 'Prepr-Context-utm_term'?: string;
+    readonly 'Prepr-Context-utm_content'?: string;
+    readonly 'Prepr-Context-utm_campaign'?: string;
+    readonly 'Prepr-Context-initial_referral'?: string;
+    readonly 'Prepr-Visitor-IP'?: string;
+    readonly 'Prepr-Hubspot-Id'?: string;
+    readonly 'Prepr-Customer-Id-Created'?: 'true';
+    readonly 'Prepr-User-Agent'?: string;
+}
+type PreprErrorCode = 'INVALID_TOKEN' | 'MISSING_TOKEN' | 'HTTP_ERROR' | 'FETCH_ERROR' | 'INVALID_RESPONSE' | 'CONTEXT_ERROR';
+
 interface PreprMiddlewareOptions {
     /** Enable preview-mode headers (segment/AB overrides, preview bar). */
     preview?: boolean;
+    /**
+     * Disable features app-wide. Pass the same object you give the toolbar: a
+     * disabled feature injects no header and persists no cookie, whatever the
+     * request carries.
+     */
+    features?: PreprFeatures;
     /** Override the version reported in Prepr-Package (mainly for tests). */
     version?: string;
 }
@@ -49,37 +110,6 @@ declare function preprHandle(options?: PreprMiddlewareOptions): Handle;
  */
 declare function getPreprHeadersFromLocals(locals: Record<string, unknown>): Headers;
 
-interface PreprSegment {
-    readonly _id: string;
-    readonly name: string;
-}
-interface PreprToolbarProps {
-    readonly activeSegment: string | null;
-    readonly activeVariant: string | null;
-    /** Available segments to personalize on. */
-    readonly segments?: readonly PreprSegment[];
-    /** @deprecated Alias for `segments`. */
-    readonly data?: readonly PreprSegment[];
-}
-type PreprVariant = 'A' | 'B';
-interface PreprHeaders {
-    readonly 'prepr-customer-id'?: string;
-    readonly 'Prepr-Segments'?: string;
-    readonly 'Prepr-ABtesting'?: PreprVariant;
-    readonly 'Prepr-Preview-Bar'?: 'true';
-    readonly 'Prepr-Context-utm_source'?: string;
-    readonly 'Prepr-Context-utm_medium'?: string;
-    readonly 'Prepr-Context-utm_term'?: string;
-    readonly 'Prepr-Context-utm_content'?: string;
-    readonly 'Prepr-Context-utm_campaign'?: string;
-    readonly 'Prepr-Context-initial_referral'?: string;
-    readonly 'Prepr-Visitor-IP'?: string;
-    readonly 'Prepr-Hubspot-Id'?: string;
-    readonly 'Prepr-Customer-Id-Created'?: 'true';
-    readonly 'Prepr-User-Agent'?: string;
-}
-type PreprErrorCode = 'INVALID_TOKEN' | 'MISSING_TOKEN' | 'HTTP_ERROR' | 'FETCH_ERROR' | 'INVALID_RESPONSE' | 'CONTEXT_ERROR';
-
 /** Returns the Prepr Customer ID from `event.request.headers`. */
 declare function getPreprUUID(headers: Headers): string | null;
 /** Returns the active segment from `event.request.headers`. */
@@ -93,7 +123,7 @@ declare function getPreprHeaders(headers: Headers): PreprHeaders;
  * plus a Prepr GraphQL token. Ungated — gate on preview mode yourself in
  * `+layout.server.ts`.
  */
-declare function getToolbarProps(headers: Headers, token: string): Promise<PreprToolbarProps>;
+declare function getToolbarProps(headers: Headers, token: string, features?: PreprFeatures): Promise<PreprToolbarProps>;
 
 /** Error thrown by the token helpers and the segments fetch. */
 declare class PreprError extends Error {

package/dist/sveltekit/index.d.ts

@@ -1,6 +1,67 @@
+interface PreprSegment {
+    readonly _id: string;
+    readonly name: string;
+}
+/**
+ * Per-feature config. `false` is shorthand for `{ enabled: false }`; the object
+ * form leaves room for per-feature options later without a breaking change.
+ */
+type PreprFeatureConfig = boolean | {
+    enabled?: boolean;
+};
+/** Toolkit features a consumer can turn off. Omitted keys stay enabled. */
+interface PreprFeatures {
+    /** Segment picker, `Prepr-Segments` header and its cookie/query param. */
+    segments?: PreprFeatureConfig;
+    /** A/B variant switch, `Prepr-ABtesting` header and its cookie/query param. */
+    abTesting?: PreprFeatureConfig;
+    /**
+     * The site's own click-to-edit: the toolbar's Edit mode control, the stega
+     * tooltip/overlay and the close-edit pill.
+     *
+     * NOT a security control, and NOT the Prepr editor's live preview. When the
+     * site is framed by the editor, `prepr:initVE` still activates edit mode —
+     * that is the CMS operating inside its own iframe, not an affordance offered
+     * to visitors. See iframe-bridge.ts.
+     */
+    editMode?: PreprFeatureConfig;
+}
+interface PreprToolbarProps {
+    readonly activeSegment: string | null;
+    readonly activeVariant: string | null;
+    /** Available segments to personalize on. */
+    readonly segments?: readonly PreprSegment[];
+    /** @deprecated Alias for `segments`. */
+    readonly data?: readonly PreprSegment[];
+}
+type PreprVariant = 'A' | 'B';
+interface PreprHeaders {
+    readonly 'prepr-customer-id'?: string;
+    readonly 'Prepr-Segments'?: string;
+    readonly 'Prepr-ABtesting'?: PreprVariant;
+    readonly 'Prepr-Preview-Bar'?: 'true';
+    readonly 'Prepr-Context-utm_source'?: string;
+    readonly 'Prepr-Context-utm_medium'?: string;
+    readonly 'Prepr-Context-utm_term'?: string;
+    readonly 'Prepr-Context-utm_content'?: string;
+    readonly 'Prepr-Context-utm_campaign'?: string;
+    readonly 'Prepr-Context-initial_referral'?: string;
+    readonly 'Prepr-Visitor-IP'?: string;
+    readonly 'Prepr-Hubspot-Id'?: string;
+    readonly 'Prepr-Customer-Id-Created'?: 'true';
+    readonly 'Prepr-User-Agent'?: string;
+}
+type PreprErrorCode = 'INVALID_TOKEN' | 'MISSING_TOKEN' | 'HTTP_ERROR' | 'FETCH_ERROR' | 'INVALID_RESPONSE' | 'CONTEXT_ERROR';
+
 interface PreprMiddlewareOptions {
     /** Enable preview-mode headers (segment/AB overrides, preview bar). */
     preview?: boolean;
+    /**
+     * Disable features app-wide. Pass the same object you give the toolbar: a
+     * disabled feature injects no header and persists no cookie, whatever the
+     * request carries.
+     */
+    features?: PreprFeatures;
     /** Override the version reported in Prepr-Package (mainly for tests). */
     version?: string;
 }
@@ -49,37 +110,6 @@ declare function preprHandle(options?: PreprMiddlewareOptions): Handle;
  */
 declare function getPreprHeadersFromLocals(locals: Record<string, unknown>): Headers;
 
-interface PreprSegment {
-    readonly _id: string;
-    readonly name: string;
-}
-interface PreprToolbarProps {
-    readonly activeSegment: string | null;
-    readonly activeVariant: string | null;
-    /** Available segments to personalize on. */
-    readonly segments?: readonly PreprSegment[];
-    /** @deprecated Alias for `segments`. */
-    readonly data?: readonly PreprSegment[];
-}
-type PreprVariant = 'A' | 'B';
-interface PreprHeaders {
-    readonly 'prepr-customer-id'?: string;
-    readonly 'Prepr-Segments'?: string;
-    readonly 'Prepr-ABtesting'?: PreprVariant;
-    readonly 'Prepr-Preview-Bar'?: 'true';
-    readonly 'Prepr-Context-utm_source'?: string;
-    readonly 'Prepr-Context-utm_medium'?: string;
-    readonly 'Prepr-Context-utm_term'?: string;
-    readonly 'Prepr-Context-utm_content'?: string;
-    readonly 'Prepr-Context-utm_campaign'?: string;
-    readonly 'Prepr-Context-initial_referral'?: string;
-    readonly 'Prepr-Visitor-IP'?: string;
-    readonly 'Prepr-Hubspot-Id'?: string;
-    readonly 'Prepr-Customer-Id-Created'?: 'true';
-    readonly 'Prepr-User-Agent'?: string;
-}
-type PreprErrorCode = 'INVALID_TOKEN' | 'MISSING_TOKEN' | 'HTTP_ERROR' | 'FETCH_ERROR' | 'INVALID_RESPONSE' | 'CONTEXT_ERROR';
-
 /** Returns the Prepr Customer ID from `event.request.headers`. */
 declare function getPreprUUID(headers: Headers): string | null;
 /** Returns the active segment from `event.request.headers`. */
@@ -93,7 +123,7 @@ declare function getPreprHeaders(headers: Headers): PreprHeaders;
  * plus a Prepr GraphQL token. Ungated — gate on preview mode yourself in
  * `+layout.server.ts`.
  */
-declare function getToolbarProps(headers: Headers, token: string): Promise<PreprToolbarProps>;
+declare function getToolbarProps(headers: Headers, token: string, features?: PreprFeatures): Promise<PreprToolbarProps>;
 
 /** Error thrown by the token helpers and the segments fetch. */
 declare class PreprError extends Error {

package/dist/sveltekit/index.js

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "0.1.0-beta.6";
+var VERSION = "0.2.0-beta.3";
 
 // src/core/constants.ts
 var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";
@@ -12,6 +12,24 @@ var PARAM_VARIANT = "prepr_preview_ab";
 var PARAM_HIDE_BAR = "prepr_hide_bar";
 var ONE_YEAR_SECONDS = 60 * 60 * 24 * 365;
 
+// 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/middleware.ts
 var UTM_PARAMS = [
   "utm_source",
@@ -95,7 +113,8 @@ function processPreprRequest(request, opts) {
   if (!opts?.preview) {
     return { requestHeaders, responseCookies };
   }
-  const hasPreviewParams = searchParams.has(PARAM_SEGMENT) || searchParams.has(PARAM_VARIANT);
+  const features = resolveFeatures(opts?.features);
+  const hasPreviewParams = features.segments && searchParams.has(PARAM_SEGMENT) || features.abTesting && searchParams.has(PARAM_VARIANT);
   if (!hasPreviewParams) {
     const previewModeCookie = requestCookies.get(COOKIE_PREVIEW_MODE);
     const previewModeEnabled = previewModeCookie !== "false";
@@ -115,16 +134,16 @@ function processPreprRequest(request, opts) {
     });
   }
   if (!isLivePreview) {
-    const segmentCookie = requestCookies.get(COOKIE_SEGMENT);
+    const segmentCookie = features.segments ? requestCookies.get(COOKIE_SEGMENT) : void 0;
     if (segmentCookie) {
       requestHeaders.set("Prepr-Segments", segmentCookie);
     }
-    const abCookie = requestCookies.get(COOKIE_VARIANT);
+    const abCookie = features.abTesting ? requestCookies.get(COOKIE_VARIANT) : void 0;
     if (abCookie) {
       requestHeaders.set("Prepr-ABtesting", abCookie);
     }
   }
-  const previewAb = searchParams.get(PARAM_VARIANT);
+  const previewAb = features.abTesting ? searchParams.get(PARAM_VARIANT) : null;
   if (previewAb !== null) {
     requestHeaders.set("Prepr-ABtesting", previewAb);
     if (!isLivePreview) {
@@ -137,7 +156,7 @@ function processPreprRequest(request, opts) {
       });
     }
   }
-  const previewSegment = searchParams.get(PARAM_SEGMENT);
+  const previewSegment = features.segments ? searchParams.get(PARAM_SEGMENT) : null;
   if (previewSegment !== null) {
     requestHeaders.set("Prepr-Segments", previewSegment);
     if (!isLivePreview) {
@@ -312,16 +331,19 @@ async function getPreprEnvironmentSegments(token) {
     );
   }
 }
-async function getToolbarPropsFromHeaders(headers, token) {
+async function getToolbarPropsFromHeaders(headers, token, features) {
+  const resolved = resolveFeatures(features);
   let segments = [];
-  try {
-    segments = await getPreprEnvironmentSegments(token);
-  } catch {
-    segments = [];
+  if (resolved.segments) {
+    try {
+      segments = await getPreprEnvironmentSegments(token);
+    } catch {
+      segments = [];
+    }
   }
   return {
-    activeSegment: getActiveSegmentFromHeaders(headers),
-    activeVariant: getActiveVariantFromHeaders(headers),
+    activeSegment: resolved.segments ? getActiveSegmentFromHeaders(headers) : null,
+    activeVariant: resolved.abTesting ? getActiveVariantFromHeaders(headers) : null,
     segments,
     data: segments
   };
@@ -340,8 +362,8 @@ function getActiveVariant(headers) {
 function getPreprHeaders(headers) {
   return getPreprHeadersFromHeaders(headers);
 }
-async function getToolbarProps(headers, token) {
-  return getToolbarPropsFromHeaders(headers, token);
+async function getToolbarProps(headers, token, features) {
+  return getToolbarPropsFromHeaders(headers, token, features);
 }
 export {
   PREPR_LOCALS_KEY,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@preprio/toolkit",
-  "version": "0.1.0-beta.6",
-  "description": "Prepr personalization, A/B testing and preview toolkit for Next.js, Nuxt, Astro, SvelteKit and Express",
+  "version": "0.2.0-beta.3",
+  "description": "Prepr personalization, A/B testing and preview toolkit for React, Next.js, Nuxt, Astro, SvelteKit and Express",
   "license": "Apache-2.0",
   "author": "Prepr B.V. (https://prepr.io)",
   "keywords": [
@@ -12,6 +12,7 @@
     "ab-testing",
     "preview",
     "visual-editing",
+    "react",
     "nextjs",
     "nuxt",
     "astro",
@@ -38,6 +39,16 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js",
+      "require": "./dist/react/index.cjs"
+    },
+    "./react/components": {
+      "types": "./dist/react/components.d.ts",
+      "import": "./dist/react/components.js",
+      "require": "./dist/react/components.cjs"
+    },
     "./nextjs": {
       "types": "./dist/nextjs/index.d.ts",
       "import": "./dist/nextjs/index.js",

package/src/astro/PreprToolbar.astro

@@ -1,7 +1,7 @@
 ---
 /**
  * Server-renders nothing visible — mounts the framework-free Prepr toolbar
- * custom element client-side via `createPreprToolbar` (core).
+ * custom element client-side via `createPreprPreview` (core).
  *
  * Ships as SOURCE: this file is compiled by the *consumer's* Astro/Vite
  * pipeline (not by this package's own `tsup` build), matching how Astro
@@ -10,7 +10,7 @@
  *
  * Astro is multi-page (MPA) by default, so the default navigation adapter
  * (core's `window.location.assign`, used when no `navigation` override is
- * passed to `createPreprToolbar`) is the correct choice here — a full page
+ * passed to `createPreprPreview`) is the correct choice here — a full page
  * navigation re-runs Astro's server-rendered output (and this component's
  * frontmatter) with the new query params, which is what drives segment /
  * A/B query-param personalization. No client-router
@@ -22,33 +22,39 @@
  * NON-inline `<script>` that Astro/Vite bundles. We deliberately do NOT use
  * `define:vars`, which would force the mount script to be `is:inline` —
  * Astro/Vite do not process bare `import` specifiers in inline scripts, so
- * `import { createPreprToolbar } from '@preprio/toolkit'` would fail to
+ * `import { createPreprPreview } from '@preprio/toolkit'` would fail to
  * resolve in the browser. A processed (bundled) module script gets its
  * imports rewritten to real, hashed module URLs, so the import resolves.
  * (JSON-serializable values only — matches `PreprToolbarProps`, a plain
  * data shape of primitives/arrays.)
  */
-import type { PreprToolbarProps } from '@preprio/toolkit';
+import type { PreprToolbarComponentProps } from '@preprio/toolkit';
 import { serializeForScriptTag } from '@preprio/toolkit/json-script';
 
-type Props = PreprToolbarProps;
+type Props = PreprToolbarComponentProps;
 
-const { activeSegment, activeVariant, segments, data } = Astro.props as Props;
+const { activeSegment, activeVariant, segments, data, options } =
+  Astro.props as Props;
 // `data` is the deprecated alias for `segments`; accept either.
-const props = { activeSegment, activeVariant, segments: segments ?? data ?? [] };
+// `options` travels in the same JSON payload — it is plain data too.
+const payload = {
+  props: { activeSegment, activeVariant, segments: segments ?? data ?? [] },
+  options,
+};
 ---
 
 <script
   type="application/json"
   data-prepr-toolbar-props
-  set:html={serializeForScriptTag(props)}
+  set:html={serializeForScriptTag(payload)}
 />
 
 <script>
-  import { createPreprToolbar } from '@preprio/toolkit';
+  import { createPreprPreview } from '@preprio/toolkit';
 
   const el = document.querySelector('script[data-prepr-toolbar-props]');
   if (el?.textContent) {
-    createPreprToolbar({ props: JSON.parse(el.textContent) });
+    const { props, options } = JSON.parse(el.textContent);
+    createPreprPreview({ props, options });
   }
 </script>

package/src/nuxt/PreprToolbar.vue

@@ -7,26 +7,28 @@
  * tsup build. See the `./nuxt/components/*` export in package.json.
  */
 import { onMounted, onUnmounted } from 'vue';
-import { createPreprToolbar } from '@preprio/toolkit';
-import type { PreprToolbarProps } from '@preprio/toolkit';
+import { createPreprPreview } from '@preprio/toolkit';
+import type { PreprToolbarComponentProps } from '@preprio/toolkit';
 
 const props = defineProps<{
-  activeSegment: PreprToolbarProps['activeSegment'];
-  activeVariant: PreprToolbarProps['activeVariant'];
-  segments?: PreprToolbarProps['segments'];
-  data?: PreprToolbarProps['data'];
+  activeSegment: PreprToolbarComponentProps['activeSegment'];
+  activeVariant: PreprToolbarComponentProps['activeVariant'];
+  segments?: PreprToolbarComponentProps['segments'];
+  data?: PreprToolbarComponentProps['data'];
+  options?: PreprToolbarComponentProps['options'];
 }>();
 
-let controller: ReturnType<typeof createPreprToolbar> | null = null;
+let controller: ReturnType<typeof createPreprPreview> | null = null;
 
 onMounted(() => {
-  controller = createPreprToolbar({
+  controller = createPreprPreview({
     props: {
       activeSegment: props.activeSegment,
       activeVariant: props.activeVariant,
       segments: props.segments,
       data: props.data,
     },
+    options: props.options,
   });
 });
 

package/src/sveltekit/PreprToolbar.svelte

@@ -7,14 +7,21 @@
    * our tsup build. See the `./sveltekit/components/*` export in package.json.
    */
   import { onMount } from 'svelte';
-  import { createPreprToolbar } from '@preprio/toolkit';
-  import type { PreprToolbarProps } from '@preprio/toolkit';
+  import { createPreprPreview } from '@preprio/toolkit';
+  import type { PreprToolbarComponentProps } from '@preprio/toolkit';
 
-  let { activeSegment, activeVariant, data, segments }: PreprToolbarProps = $props();
+  let {
+    activeSegment,
+    activeVariant,
+    data,
+    segments,
+    options,
+  }: PreprToolbarComponentProps = $props();
 
   onMount(() => {
-    const controller = createPreprToolbar({
+    const controller = createPreprPreview({
       props: { activeSegment, activeVariant, data, segments },
+      options,
     });
     return () => controller.destroy();
   });