personalize-connect-sdk 1.3.2 → 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

@@ -164,6 +164,11 @@ var ITEM_QUERY = `
     }
   }
 `;
+function formatGuidForEdge(id) {
+  const clean = id.replace(/[{}\-\s]/g, "").toLowerCase();
+  if (clean.length !== 32 || !/^[0-9a-f]+$/.test(clean)) return id;
+  return `{${clean.slice(0, 8)}-${clean.slice(8, 12)}-${clean.slice(12, 16)}-${clean.slice(16, 20)}-${clean.slice(20)}}`;
+}
 function mapFields(fields) {
   const result = {};
   for (const field of fields) {
@@ -174,13 +179,14 @@ function mapFields(fields) {
   return result;
 }
 async function queryEdge(url, headers, datasourceId, language) {
-  log("Edge GraphQL request:", { url, datasourceId, language });
+  const formattedId = formatGuidForEdge(datasourceId);
+  log("Edge GraphQL request:", { url, datasourceId, formattedId, language });
   const res = await fetch(url, {
     method: "POST",
     headers: { "Content-Type": "application/json", ...headers },
     body: JSON.stringify({
       query: ITEM_QUERY,
-      variables: { itemId: datasourceId, language }
+      variables: { itemId: formattedId, language }
     })
   });
   log("Edge GraphQL response status:", res.status);
@@ -312,9 +318,12 @@ function parseConfigJson(json, renderingId) {
     if (!contentMap || typeof contentMap !== "object" || !friendlyId) return null;
     const keys = Object.keys(contentMap);
     return {
-      friendlyId,
-      contentMap,
-      defaultKey: raw.defaultKey ?? keys[0] ?? ""
+      config: {
+        friendlyId,
+        contentMap,
+        defaultKey: raw.defaultKey ?? keys[0] ?? ""
+      },
+      instanceId: raw.instanceId ?? void 0
     };
   } catch {
     warn("Failed to parse config JSON for rendering", renderingId);
@@ -388,8 +397,13 @@ async function loadPageConfigs(edgeUrl, pageItemId, language, headers = {}, site
       const normalizedRid = normalizeGuid(renderingId);
       const parsed = parseConfigJson(configJson, normalizedRid);
       if (parsed) {
-        configs.set(normalizedRid, parsed);
-        log("Config loader: loaded config for rendering", normalizedRid, "\u2192 experience", parsed.friendlyId);
+        configs.set(normalizedRid, parsed.config);
+        log("Config loader: stored under renderingId", normalizedRid, "\u2192", parsed.config.friendlyId);
+        if (parsed.instanceId) {
+          const normalizedIid = normalizeGuid(parsed.instanceId);
+          configs.set(normalizedIid, parsed.config);
+          log("Config loader: also stored under instanceId", normalizedIid);
+        }
       }
     }
     log("Config loader: total configs loaded:", configs.size);
@@ -736,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);
@@ -793,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 });
@@ -822,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

@@ -123,6 +123,11 @@ var ITEM_QUERY = `
     }
   }
 `;
+function formatGuidForEdge(id) {
+  const clean = id.replace(/[{}\-\s]/g, "").toLowerCase();
+  if (clean.length !== 32 || !/^[0-9a-f]+$/.test(clean)) return id;
+  return `{${clean.slice(0, 8)}-${clean.slice(8, 12)}-${clean.slice(12, 16)}-${clean.slice(16, 20)}-${clean.slice(20)}}`;
+}
 function mapFields(fields) {
   const result = {};
   for (const field of fields) {
@@ -133,13 +138,14 @@ function mapFields(fields) {
   return result;
 }
 async function queryEdge(url, headers, datasourceId, language) {
-  log("Edge GraphQL request:", { url, datasourceId, language });
+  const formattedId = formatGuidForEdge(datasourceId);
+  log("Edge GraphQL request:", { url, datasourceId, formattedId, language });
   const res = await fetch(url, {
     method: "POST",
     headers: { "Content-Type": "application/json", ...headers },
     body: JSON.stringify({
       query: ITEM_QUERY,
-      variables: { itemId: datasourceId, language }
+      variables: { itemId: formattedId, language }
     })
   });
   log("Edge GraphQL response status:", res.status);
@@ -271,9 +277,12 @@ function parseConfigJson(json, renderingId) {
     if (!contentMap || typeof contentMap !== "object" || !friendlyId) return null;
     const keys = Object.keys(contentMap);
     return {
-      friendlyId,
-      contentMap,
-      defaultKey: raw.defaultKey ?? keys[0] ?? ""
+      config: {
+        friendlyId,
+        contentMap,
+        defaultKey: raw.defaultKey ?? keys[0] ?? ""
+      },
+      instanceId: raw.instanceId ?? void 0
     };
   } catch {
     warn("Failed to parse config JSON for rendering", renderingId);
@@ -347,8 +356,13 @@ async function loadPageConfigs(edgeUrl, pageItemId, language, headers = {}, site
       const normalizedRid = normalizeGuid(renderingId);
       const parsed = parseConfigJson(configJson, normalizedRid);
       if (parsed) {
-        configs.set(normalizedRid, parsed);
-        log("Config loader: loaded config for rendering", normalizedRid, "\u2192 experience", parsed.friendlyId);
+        configs.set(normalizedRid, parsed.config);
+        log("Config loader: stored under renderingId", normalizedRid, "\u2192", parsed.config.friendlyId);
+        if (parsed.instanceId) {
+          const normalizedIid = normalizeGuid(parsed.instanceId);
+          configs.set(normalizedIid, parsed.config);
+          log("Config loader: also stored under instanceId", normalizedIid);
+        }
       }
     }
     log("Config loader: total configs loaded:", configs.size);
@@ -685,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) {
@@ -695,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);
@@ -752,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 });
@@ -781,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.2",
+  "version": "1.3.4",
   "description": "Runtime SDK for Personalize Connect - resolves active experience outcomes and datasources in your rendering host",
   "author": "Dylan Young",
   "keywords": [