personalize-connect-sdk 1.3.3 → 1.3.4

package/dist/index.d.mts

@@ -140,15 +140,14 @@ declare function resolveContent(options: ResolveContentOptions): Promise<Resolve
 type GetConfigFromProps<P> = (props: P) => PersonalizeConnectConfig | undefined;
 /**
  * HOC that wraps any JSS component.
- * Looks for config in this order:
+ *
+ * Config lookup order:
  *   1. props.rendering.personalizeConnect (inline on layout data)
  *   2. context.configs map (loaded from content tree via Edge)
  *
- * If config is found, renders with defaultKey first, calls Personalize
- * asynchronously, and re-renders with personalized content.
- *
- * In Page Builder, renders a visual indicator (border + badge) on
- * components that have personalization configured.
+ * Live site: renders with defaultKey first, calls Personalize async, re-renders.
+ * Page Builder: shows a preview bar above the component to switch between
+ * content variants without running actual personalization.
  */
 declare function withPersonalizeConnect<P extends object>(WrappedComponent: ComponentType<P>, getConfig?: GetConfigFromProps<P>): ComponentType<P>;
 

package/dist/index.d.ts

@@ -140,15 +140,14 @@ declare function resolveContent(options: ResolveContentOptions): Promise<Resolve
 type GetConfigFromProps<P> = (props: P) => PersonalizeConnectConfig | undefined;
 /**
  * HOC that wraps any JSS component.
- * Looks for config in this order:
+ *
+ * Config lookup order:
  *   1. props.rendering.personalizeConnect (inline on layout data)
  *   2. context.configs map (loaded from content tree via Edge)
  *
- * If config is found, renders with defaultKey first, calls Personalize
- * asynchronously, and re-renders with personalized content.
- *
- * In Page Builder, renders a visual indicator (border + badge) on
- * components that have personalization configured.
+ * Live site: renders with defaultKey first, calls Personalize async, re-renders.
+ * Page Builder: shows a preview bar above the component to switch between
+ * content variants without running actual personalization.
  */
 declare function withPersonalizeConnect<P extends object>(WrappedComponent: ComponentType<P>, getConfig?: GetConfigFromProps<P>): ComponentType<P>;
 

package/dist/index.js

@@ -750,35 +750,100 @@ function getRenderingUid(props) {
   const rendering = props.rendering;
   return rendering?.uid;
 }
-var INDICATOR_BORDER = {
-  position: "relative",
-  border: "2px dashed #6B5CE7",
-  borderRadius: "4px"
-};
-var INDICATOR_BADGE = {
-  position: "absolute",
-  top: "-10px",
-  right: "-10px",
+var BAR_STYLE = {
+  display: "flex",
+  alignItems: "center",
+  gap: "6px",
+  padding: "6px 12px",
+  background: "linear-gradient(135deg, #6B5CE7 0%, #8B7CF7 100%)",
+  color: "#fff",
+  fontSize: "12px",
+  fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  fontWeight: 500,
+  borderRadius: "6px 6px 0 0",
   zIndex: 9999,
+  flexWrap: "wrap"
+};
+var LABEL_STYLE = {
   display: "flex",
   alignItems: "center",
   gap: "4px",
-  padding: "2px 8px",
+  marginRight: "6px",
+  fontSize: "11px",
+  opacity: 0.85,
+  whiteSpace: "nowrap"
+};
+var TAB_BASE = {
+  padding: "3px 10px",
   fontSize: "11px",
   fontWeight: 600,
-  lineHeight: "16px",
-  color: "#fff",
-  backgroundColor: "#6B5CE7",
-  borderRadius: "10px",
+  border: "1px solid rgba(255,255,255,0.4)",
+  borderRadius: "12px",
+  cursor: "pointer",
+  transition: "all 0.15s ease",
   whiteSpace: "nowrap",
-  pointerEvents: "none"
+  lineHeight: "16px"
 };
+var TAB_ACTIVE = {
+  ...TAB_BASE,
+  background: "#fff",
+  color: "#6B5CE7",
+  border: "1px solid #fff"
+};
+var TAB_INACTIVE = {
+  ...TAB_BASE,
+  background: "rgba(255,255,255,0.15)",
+  color: "#fff"
+};
+var LOADING_STYLE = {
+  marginLeft: "auto",
+  fontSize: "10px",
+  opacity: 0.7
+};
+function PreviewBar({
+  config,
+  activeKey,
+  isLoading,
+  onSelect
+}) {
+  const keys = Object.keys(config.contentMap);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: BAR_STYLE, "data-personalize-connect-bar": config.friendlyId, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: LABEL_STYLE, children: [
+      "\u26A1 ",
+      config.friendlyId
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        type: "button",
+        style: activeKey === null ? TAB_ACTIVE : TAB_INACTIVE,
+        onClick: () => onSelect(null),
+        children: "Original"
+      }
+    ),
+    keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        type: "button",
+        style: activeKey === key ? TAB_ACTIVE : TAB_INACTIVE,
+        onClick: () => onSelect(key),
+        children: key
+      },
+      key
+    )),
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: LOADING_STYLE, children: "loading..." })
+  ] });
+}
 function withPersonalizeConnect(WrappedComponent, getConfig = DEFAULT_GET_CONFIG) {
   const componentName = WrappedComponent.displayName ?? WrappedComponent.name ?? "Component";
   function PersonalizeConnectWrapper(props) {
     const context = usePersonalizeContext();
     const [resolvedFields, setResolvedFields] = (0, import_react2.useState)(null);
+    const [previewKey, setPreviewKey] = (0, import_react2.useState)(null);
+    const [previewFields, setPreviewFields] = (0, import_react2.useState)(null);
+    const [previewLoading, setPreviewLoading] = (0, import_react2.useState)(false);
     const mountedRef = (0, import_react2.useRef)(true);
+    const previewCacheRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
     let config = getConfig(props);
     if (!config && context) {
       const uid = getRenderingUid(props);
@@ -807,8 +872,43 @@ function withPersonalizeConnect(WrappedComponent, getConfig = DEFAULT_GET_CONFIG
     if (config) {
       log(`[${componentName}] Config active:`, { friendlyId: config.friendlyId, defaultKey: config.defaultKey, keys: Object.keys(config.contentMap) });
     }
-    const runPersonalization = (0, import_react2.useCallback)(async () => {
+    const isEditing = context?.isEditing ?? false;
+    const handlePreviewSelect = (0, import_react2.useCallback)(async (key) => {
       if (!config || !context) return;
+      setPreviewKey(key);
+      if (key === null) {
+        setPreviewFields(null);
+        return;
+      }
+      const cached = previewCacheRef.current.get(key);
+      if (cached) {
+        setPreviewFields(cached);
+        return;
+      }
+      const datasourceId = config.contentMap[key];
+      if (!datasourceId) {
+        warn(`[${componentName}] Preview: no datasource for key "${key}"`);
+        setPreviewFields(null);
+        return;
+      }
+      setPreviewLoading(true);
+      log(`[${componentName}] Preview: resolving datasource for key "${key}" \u2192`, datasourceId);
+      try {
+        const fields = await context.resolveDatasource(datasourceId);
+        if (mountedRef.current) {
+          previewCacheRef.current.set(key, fields);
+          setPreviewFields(fields);
+          log(`[${componentName}] Preview: resolved fields for "${key}":`, Object.keys(fields));
+        }
+      } catch (e) {
+        warn(`[${componentName}] Preview: failed to resolve datasource for "${key}"`, e);
+        if (mountedRef.current) setPreviewFields(null);
+      } finally {
+        if (mountedRef.current) setPreviewLoading(false);
+      }
+    }, [config, context]);
+    const runPersonalization = (0, import_react2.useCallback)(async () => {
+      if (!config || !context || isEditing) return;
       group(`[${componentName}] personalization flow`);
       log("Calling Personalize for experience:", config.friendlyId);
       const contentKey = await callPersonalize({ config, context });
@@ -836,29 +936,37 @@ function withPersonalizeConnect(WrappedComponent, getConfig = DEFAULT_GET_CONFIG
         warn(`[${componentName}] Content resolution returned null \u2014 component keeps original fields`);
       }
       groupEnd();
-    }, [config, context]);
+    }, [config, context, isEditing]);
     (0, import_react2.useEffect)(() => {
       mountedRef.current = true;
-      if (config && context && context.browserId) {
+      if (config && context && context.browserId && !isEditing) {
         runPersonalization();
       }
       return () => {
         mountedRef.current = false;
       };
-    }, [config?.friendlyId, context?.browserId, context?.configsLoaded, runPersonalization]);
+    }, [config?.friendlyId, context?.browserId, context?.configsLoaded, isEditing, runPersonalization]);
     if (!config || !context) {
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WrappedComponent, { ...props });
     }
-    const mergedProps = resolvedFields ? { ...props, fields: resolvedFields } : props;
-    const component = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WrappedComponent, { ...mergedProps });
-    if (context.isEditing) {
-      log(`[${componentName}] Editing mode \u2014 rendering indicator badge for ${config.friendlyId}`);
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: INDICATOR_BORDER, "data-personalize-connect": config.friendlyId, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: INDICATOR_BADGE, title: `Personalize: ${config.friendlyId}`, children: "\u26A1 Personalized" }),
-        component
+    if (isEditing) {
+      const editingFields = previewKey !== null ? previewFields : null;
+      const editingProps = editingFields ? { ...props, fields: editingFields } : props;
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          PreviewBar,
+          {
+            config,
+            activeKey: previewKey,
+            isLoading: previewLoading,
+            onSelect: handlePreviewSelect
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WrappedComponent, { ...editingProps })
       ] });
     }
-    return component;
+    const mergedProps = resolvedFields ? { ...props, fields: resolvedFields } : props;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WrappedComponent, { ...mergedProps });
   }
   PersonalizeConnectWrapper.displayName = `WithPersonalizeConnect(${componentName})`;
   return PersonalizeConnectWrapper;

package/dist/index.mjs

@@ -699,7 +699,7 @@ async function resolveContent(options) {
 }
 
 // src/withPersonalizeConnect.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import { Fragment, useCallback as useCallback2, useEffect as useEffect2, useRef, useState as useState2 } from "react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var DEFAULT_GET_CONFIG = (props) => props.rendering?.personalizeConnect;
 function normalizeGuid2(id) {
@@ -709,35 +709,100 @@ function getRenderingUid(props) {
   const rendering = props.rendering;
   return rendering?.uid;
 }
-var INDICATOR_BORDER = {
-  position: "relative",
-  border: "2px dashed #6B5CE7",
-  borderRadius: "4px"
-};
-var INDICATOR_BADGE = {
-  position: "absolute",
-  top: "-10px",
-  right: "-10px",
+var BAR_STYLE = {
+  display: "flex",
+  alignItems: "center",
+  gap: "6px",
+  padding: "6px 12px",
+  background: "linear-gradient(135deg, #6B5CE7 0%, #8B7CF7 100%)",
+  color: "#fff",
+  fontSize: "12px",
+  fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  fontWeight: 500,
+  borderRadius: "6px 6px 0 0",
   zIndex: 9999,
+  flexWrap: "wrap"
+};
+var LABEL_STYLE = {
   display: "flex",
   alignItems: "center",
   gap: "4px",
-  padding: "2px 8px",
+  marginRight: "6px",
+  fontSize: "11px",
+  opacity: 0.85,
+  whiteSpace: "nowrap"
+};
+var TAB_BASE = {
+  padding: "3px 10px",
   fontSize: "11px",
   fontWeight: 600,
-  lineHeight: "16px",
-  color: "#fff",
-  backgroundColor: "#6B5CE7",
-  borderRadius: "10px",
+  border: "1px solid rgba(255,255,255,0.4)",
+  borderRadius: "12px",
+  cursor: "pointer",
+  transition: "all 0.15s ease",
   whiteSpace: "nowrap",
-  pointerEvents: "none"
+  lineHeight: "16px"
 };
+var TAB_ACTIVE = {
+  ...TAB_BASE,
+  background: "#fff",
+  color: "#6B5CE7",
+  border: "1px solid #fff"
+};
+var TAB_INACTIVE = {
+  ...TAB_BASE,
+  background: "rgba(255,255,255,0.15)",
+  color: "#fff"
+};
+var LOADING_STYLE = {
+  marginLeft: "auto",
+  fontSize: "10px",
+  opacity: 0.7
+};
+function PreviewBar({
+  config,
+  activeKey,
+  isLoading,
+  onSelect
+}) {
+  const keys = Object.keys(config.contentMap);
+  return /* @__PURE__ */ jsxs("div", { style: BAR_STYLE, "data-personalize-connect-bar": config.friendlyId, children: [
+    /* @__PURE__ */ jsxs("span", { style: LABEL_STYLE, children: [
+      "\u26A1 ",
+      config.friendlyId
+    ] }),
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        style: activeKey === null ? TAB_ACTIVE : TAB_INACTIVE,
+        onClick: () => onSelect(null),
+        children: "Original"
+      }
+    ),
+    keys.map((key) => /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        style: activeKey === key ? TAB_ACTIVE : TAB_INACTIVE,
+        onClick: () => onSelect(key),
+        children: key
+      },
+      key
+    )),
+    isLoading && /* @__PURE__ */ jsx2("span", { style: LOADING_STYLE, children: "loading..." })
+  ] });
+}
 function withPersonalizeConnect(WrappedComponent, getConfig = DEFAULT_GET_CONFIG) {
   const componentName = WrappedComponent.displayName ?? WrappedComponent.name ?? "Component";
   function PersonalizeConnectWrapper(props) {
     const context = usePersonalizeContext();
     const [resolvedFields, setResolvedFields] = useState2(null);
+    const [previewKey, setPreviewKey] = useState2(null);
+    const [previewFields, setPreviewFields] = useState2(null);
+    const [previewLoading, setPreviewLoading] = useState2(false);
     const mountedRef = useRef(true);
+    const previewCacheRef = useRef(/* @__PURE__ */ new Map());
     let config = getConfig(props);
     if (!config && context) {
       const uid = getRenderingUid(props);
@@ -766,8 +831,43 @@ function withPersonalizeConnect(WrappedComponent, getConfig = DEFAULT_GET_CONFIG
     if (config) {
       log(`[${componentName}] Config active:`, { friendlyId: config.friendlyId, defaultKey: config.defaultKey, keys: Object.keys(config.contentMap) });
     }
-    const runPersonalization = useCallback2(async () => {
+    const isEditing = context?.isEditing ?? false;
+    const handlePreviewSelect = useCallback2(async (key) => {
       if (!config || !context) return;
+      setPreviewKey(key);
+      if (key === null) {
+        setPreviewFields(null);
+        return;
+      }
+      const cached = previewCacheRef.current.get(key);
+      if (cached) {
+        setPreviewFields(cached);
+        return;
+      }
+      const datasourceId = config.contentMap[key];
+      if (!datasourceId) {
+        warn(`[${componentName}] Preview: no datasource for key "${key}"`);
+        setPreviewFields(null);
+        return;
+      }
+      setPreviewLoading(true);
+      log(`[${componentName}] Preview: resolving datasource for key "${key}" \u2192`, datasourceId);
+      try {
+        const fields = await context.resolveDatasource(datasourceId);
+        if (mountedRef.current) {
+          previewCacheRef.current.set(key, fields);
+          setPreviewFields(fields);
+          log(`[${componentName}] Preview: resolved fields for "${key}":`, Object.keys(fields));
+        }
+      } catch (e) {
+        warn(`[${componentName}] Preview: failed to resolve datasource for "${key}"`, e);
+        if (mountedRef.current) setPreviewFields(null);
+      } finally {
+        if (mountedRef.current) setPreviewLoading(false);
+      }
+    }, [config, context]);
+    const runPersonalization = useCallback2(async () => {
+      if (!config || !context || isEditing) return;
       group(`[${componentName}] personalization flow`);
       log("Calling Personalize for experience:", config.friendlyId);
       const contentKey = await callPersonalize({ config, context });
@@ -795,29 +895,37 @@ function withPersonalizeConnect(WrappedComponent, getConfig = DEFAULT_GET_CONFIG
         warn(`[${componentName}] Content resolution returned null \u2014 component keeps original fields`);
       }
       groupEnd();
-    }, [config, context]);
+    }, [config, context, isEditing]);
     useEffect2(() => {
       mountedRef.current = true;
-      if (config && context && context.browserId) {
+      if (config && context && context.browserId && !isEditing) {
         runPersonalization();
       }
       return () => {
         mountedRef.current = false;
       };
-    }, [config?.friendlyId, context?.browserId, context?.configsLoaded, runPersonalization]);
+    }, [config?.friendlyId, context?.browserId, context?.configsLoaded, isEditing, runPersonalization]);
     if (!config || !context) {
       return /* @__PURE__ */ jsx2(WrappedComponent, { ...props });
     }
-    const mergedProps = resolvedFields ? { ...props, fields: resolvedFields } : props;
-    const component = /* @__PURE__ */ jsx2(WrappedComponent, { ...mergedProps });
-    if (context.isEditing) {
-      log(`[${componentName}] Editing mode \u2014 rendering indicator badge for ${config.friendlyId}`);
-      return /* @__PURE__ */ jsxs("div", { style: INDICATOR_BORDER, "data-personalize-connect": config.friendlyId, children: [
-        /* @__PURE__ */ jsx2("span", { style: INDICATOR_BADGE, title: `Personalize: ${config.friendlyId}`, children: "\u26A1 Personalized" }),
-        component
+    if (isEditing) {
+      const editingFields = previewKey !== null ? previewFields : null;
+      const editingProps = editingFields ? { ...props, fields: editingFields } : props;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx2(
+          PreviewBar,
+          {
+            config,
+            activeKey: previewKey,
+            isLoading: previewLoading,
+            onSelect: handlePreviewSelect
+          }
+        ),
+        /* @__PURE__ */ jsx2(WrappedComponent, { ...editingProps })
       ] });
     }
-    return component;
+    const mergedProps = resolvedFields ? { ...props, fields: resolvedFields } : props;
+    return /* @__PURE__ */ jsx2(WrappedComponent, { ...mergedProps });
   }
   PersonalizeConnectWrapper.displayName = `WithPersonalizeConnect(${componentName})`;
   return PersonalizeConnectWrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "personalize-connect-sdk",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "Runtime SDK for Personalize Connect - resolves active experience outcomes and datasources in your rendering host",
   "author": "Dylan Young",
   "keywords": [