personalize-connect-sdk 1.3.4 → 1.4.0

package/README.md

@@ -1,6 +1,6 @@
 # Personalize Connect SDK
 
-Runtime SDK for [Personalize Connect](https://github.com/Sitecore-Hackathon/2026-Team-Solo) — a zero-code bridge between Sitecore XM Cloud components and Sitecore Personalize Full Stack Interactive Experiences.
+Runtime SDK for [Personalize Connect](https://github.com/Sitecore-Hackathon/2026-Team-Solo) — a zero-code bridge between SitecoreAI components and Sitecore Personalize Full Stack Interactive Experiences.
 
 The SDK reads configuration authored by the Marketplace app (stored in the content tree), calls Personalize for a decision via the Edge proxy, resolves the matching datasource from Experience Edge, and swaps component content — with zero per-component code. In Page Builder, components with personalization get a visual indicator.
 
@@ -12,7 +12,7 @@ npm install personalize-connect-sdk
 
 Peer dependency: `react` >= 18.
 
-## Quick Start (XM Cloud)
+## Quick Start (SitecoreAI)
 
 ### 1. Wrap your app with `PersonalizeProvider`
 
@@ -81,12 +81,12 @@ function MyComponent({ rendering }) {
 
 ## Provider Props
 
-### XM Cloud (recommended)
+### SitecoreAI (recommended)
 
 | Prop | Required | Description |
 |------|----------|-------------|
 | `sitecoreEdgeContextId` | Yes | Edge Context ID — drives all Edge proxy calls |
-| `siteName` | Yes | XM Cloud site name |
+| `siteName` | Yes | SitecoreAI site name |
 | `sitecoreEdgeUrl` | No | Edge platform URL (defaults to `https://edge-platform.sitecorecloud.io`) |
 
 ### Legacy (direct credentials)

package/dist/index.d.mts

@@ -145,9 +145,9 @@ type GetConfigFromProps<P> = (props: P) => PersonalizeConnectConfig | undefined;
  *   1. props.rendering.personalizeConnect (inline on layout data)
  *   2. context.configs map (loaded from content tree via Edge)
  *
- * 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.
+ * Live site: calls Personalize, resolves winning variant, swaps fields.
+ * Page Builder: shows a preview bar BELOW the component to switch between
+ * content variants. "Original" keeps fields fully editable.
  */
 declare function withPersonalizeConnect<P extends object>(WrappedComponent: ComponentType<P>, getConfig?: GetConfigFromProps<P>): ComponentType<P>;
 

package/dist/index.d.ts

@@ -145,9 +145,9 @@ type GetConfigFromProps<P> = (props: P) => PersonalizeConnectConfig | undefined;
  *   1. props.rendering.personalizeConnect (inline on layout data)
  *   2. context.configs map (loaded from content tree via Edge)
  *
- * 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.
+ * Live site: calls Personalize, resolves winning variant, swaps fields.
+ * Page Builder: shows a preview bar BELOW the component to switch between
+ * content variants. "Original" keeps fields fully editable.
  */
 declare function withPersonalizeConnect<P extends object>(WrappedComponent: ComponentType<P>, getConfig?: GetConfigFromProps<P>): ComponentType<P>;
 

package/dist/index.js

@@ -760,9 +760,10 @@ var BAR_STYLE = {
   fontSize: "12px",
   fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
   fontWeight: 500,
-  borderRadius: "6px 6px 0 0",
-  zIndex: 9999,
-  flexWrap: "wrap"
+  borderRadius: "0 0 6px 6px",
+  flexWrap: "wrap",
+  position: "relative",
+  zIndex: 1
 };
 var LABEL_STYLE = {
   display: "flex",
@@ -800,6 +801,12 @@ var LOADING_STYLE = {
   fontSize: "10px",
   opacity: 0.7
 };
+var PREVIEW_LABEL = {
+  marginLeft: "auto",
+  fontSize: "10px",
+  opacity: 0.6,
+  fontStyle: "italic"
+};
 function PreviewBar({
   config,
   activeKey,
@@ -831,7 +838,8 @@ function PreviewBar({
       },
       key
     )),
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: LOADING_STYLE, children: "loading..." })
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: LOADING_STYLE, children: "loading\u2026" }),
+    activeKey !== null && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: PREVIEW_LABEL, children: "preview only \u2014 switch to Original to edit" })
   ] });
 }
 function withPersonalizeConnect(WrappedComponent, getConfig = DEFAULT_GET_CONFIG) {
@@ -950,9 +958,10 @@ function withPersonalizeConnect(WrappedComponent, getConfig = DEFAULT_GET_CONFIG
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WrappedComponent, { ...props });
     }
     if (isEditing) {
-      const editingFields = previewKey !== null ? previewFields : null;
-      const editingProps = editingFields ? { ...props, fields: editingFields } : props;
+      const isPreviewing = previewKey !== null && previewFields !== null;
+      const editingProps = isPreviewing ? { ...props, fields: previewFields } : props;
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WrappedComponent, { ...editingProps }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           PreviewBar,
           {
@@ -961,8 +970,7 @@ function withPersonalizeConnect(WrappedComponent, getConfig = DEFAULT_GET_CONFIG
             isLoading: previewLoading,
             onSelect: handlePreviewSelect
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WrappedComponent, { ...editingProps })
+        )
       ] });
     }
     const mergedProps = resolvedFields ? { ...props, fields: resolvedFields } : props;

package/dist/index.mjs

@@ -719,9 +719,10 @@ var BAR_STYLE = {
   fontSize: "12px",
   fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
   fontWeight: 500,
-  borderRadius: "6px 6px 0 0",
-  zIndex: 9999,
-  flexWrap: "wrap"
+  borderRadius: "0 0 6px 6px",
+  flexWrap: "wrap",
+  position: "relative",
+  zIndex: 1
 };
 var LABEL_STYLE = {
   display: "flex",
@@ -759,6 +760,12 @@ var LOADING_STYLE = {
   fontSize: "10px",
   opacity: 0.7
 };
+var PREVIEW_LABEL = {
+  marginLeft: "auto",
+  fontSize: "10px",
+  opacity: 0.6,
+  fontStyle: "italic"
+};
 function PreviewBar({
   config,
   activeKey,
@@ -790,7 +797,8 @@ function PreviewBar({
       },
       key
     )),
-    isLoading && /* @__PURE__ */ jsx2("span", { style: LOADING_STYLE, children: "loading..." })
+    isLoading && /* @__PURE__ */ jsx2("span", { style: LOADING_STYLE, children: "loading\u2026" }),
+    activeKey !== null && !isLoading && /* @__PURE__ */ jsx2("span", { style: PREVIEW_LABEL, children: "preview only \u2014 switch to Original to edit" })
   ] });
 }
 function withPersonalizeConnect(WrappedComponent, getConfig = DEFAULT_GET_CONFIG) {
@@ -909,9 +917,10 @@ function withPersonalizeConnect(WrappedComponent, getConfig = DEFAULT_GET_CONFIG
       return /* @__PURE__ */ jsx2(WrappedComponent, { ...props });
     }
     if (isEditing) {
-      const editingFields = previewKey !== null ? previewFields : null;
-      const editingProps = editingFields ? { ...props, fields: editingFields } : props;
+      const isPreviewing = previewKey !== null && previewFields !== null;
+      const editingProps = isPreviewing ? { ...props, fields: previewFields } : props;
       return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx2(WrappedComponent, { ...editingProps }),
         /* @__PURE__ */ jsx2(
           PreviewBar,
           {
@@ -920,8 +929,7 @@ function withPersonalizeConnect(WrappedComponent, getConfig = DEFAULT_GET_CONFIG
             isLoading: previewLoading,
             onSelect: handlePreviewSelect
           }
-        ),
-        /* @__PURE__ */ jsx2(WrappedComponent, { ...editingProps })
+        )
       ] });
     }
     const mergedProps = resolvedFields ? { ...props, fields: resolvedFields } : props;

package/package.json

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