@amplifyup/sdk 0.1.39 → 0.1.41

package/dist/react.js

@@ -1,10 +1,14 @@
 'use client';
 'use strict';
 
-var react = require('react');
+var React = require('react');
 var marked = require('marked');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
 /* @amplifyup/sdk - https://amplifyup.ai */
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
@@ -104,6 +108,7 @@ var AWSAdapter = class {
     const eventData = {
       type: "page",
       anonymousId: properties.instanceId,
+      sessionId: properties.sessionId,
       userId: properties.userId,
       properties: {
         path: properties.path || properties.url,
@@ -146,6 +151,7 @@ var AWSAdapter = class {
       type: "track",
       event: eventName,
       anonymousId: properties.instanceId,
+      sessionId: properties.sessionId,
       userId: properties.userId,
       properties: {
         ...properties
@@ -168,6 +174,7 @@ var AWSAdapter = class {
     const eventData = {
       type: "identify",
       anonymousId: traits.instanceId,
+      sessionId: traits.sessionId,
       traits: {
         ...traits,
         ...identifiers ? { identifiers } : {}
@@ -186,6 +193,7 @@ var AWSAdapter = class {
     const eventData = {
       type: "set_fields",
       anonymousId: context.instanceId,
+      sessionId: context.sessionId,
       fields,
       traits: {
         instanceId: context.instanceId,
@@ -208,7 +216,11 @@ var AWSAdapter = class {
 // src/storage.ts
 var INSTANCE_ID_KEY = "amplifyup_instance_id";
 var USER_ID_KEY = "amplifyup_user_id";
+var SESSION_ID_KEY = "amplifyup_session_id";
+var SESSION_ACTIVITY_KEY = "amplifyup_session_activity";
 var ANON_COOKIE_NAME = "amplifyup_anon_id";
+var SESSION_COOKIE_NAME = "amplifyup_session_id";
+var SESSION_IDLE_GAP_MS = 30 * 60 * 1e3;
 function generateGuid() {
   if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
     return crypto.randomUUID();
@@ -235,9 +247,9 @@ function readCookie(name) {
   }
   return null;
 }
-function writeCookie(name, value) {
+function writeCookie(name, value, maxAgeSeconds = 31536e3) {
   if (typeof document === "undefined") return;
-  document.cookie = `${name}=${encodeURIComponent(value)}; Path=/; Max-Age=31536000; SameSite=Lax`;
+  document.cookie = `${name}=${encodeURIComponent(value)}; Path=/; Max-Age=${maxAgeSeconds}; SameSite=Lax`;
 }
 function getInstanceId() {
   if (typeof window === "undefined") {
@@ -260,6 +272,23 @@ function getUserId() {
   }
   return localStorage.getItem(USER_ID_KEY);
 }
+function getSessionId() {
+  if (typeof window === "undefined") {
+    return "";
+  }
+  const now = Date.now();
+  const lastActivity = Number(localStorage.getItem(SESSION_ACTIVITY_KEY) || 0);
+  const fromCookie = readCookie(SESSION_COOKIE_NAME);
+  const fromLs = localStorage.getItem(SESSION_ID_KEY);
+  let sessionId = fromLs || fromCookie || "";
+  if (!sessionId || lastActivity > 0 && now - lastActivity >= SESSION_IDLE_GAP_MS) {
+    sessionId = generateGuid();
+  }
+  localStorage.setItem(SESSION_ID_KEY, sessionId);
+  localStorage.setItem(SESSION_ACTIVITY_KEY, String(now));
+  writeCookie(SESSION_COOKIE_NAME, sessionId, Math.floor(SESSION_IDLE_GAP_MS / 1e3));
+  return sessionId;
+}
 function setUserId(userId) {
   if (typeof window === "undefined") {
     return;
@@ -272,7 +301,10 @@ function clearIds() {
   }
   localStorage.removeItem(INSTANCE_ID_KEY);
   localStorage.removeItem(USER_ID_KEY);
+  localStorage.removeItem(SESSION_ID_KEY);
+  localStorage.removeItem(SESSION_ACTIVITY_KEY);
   document.cookie = `${ANON_COOKIE_NAME}=; Path=/; Max-Age=0; SameSite=Lax`;
+  document.cookie = `${SESSION_COOKIE_NAME}=; Path=/; Max-Age=0; SameSite=Lax`;
 }
 
 // src/targets.ts
@@ -435,6 +467,7 @@ async function fetchEdgeResolve(options) {
     params.set("variants", variantParam);
   } else if (options.anonId) {
     params.set("anonId", options.anonId);
+    if (options.sessionId) params.set("sessionId", options.sessionId);
   }
   const fetchFn = options.fetch ?? globalThis.fetch.bind(globalThis);
   const init = {
@@ -536,6 +569,7 @@ async function fetchContent(options) {
       trackingId: options.trackingId,
       route: options.route,
       anonId: options.variantKeys ? void 0 : options.anonId,
+      sessionId: options.variantKeys ? void 0 : options.sessionId,
       siteId: options.siteId,
       fetch: options.fetchFn,
       revalidate: options.revalidate,
@@ -605,6 +639,7 @@ async function fetchEdgeSelect(options) {
       ...options.trackingId ? { trackingId: options.trackingId } : {},
       ...options.site ? { site: options.site } : {},
       anonId: options.anonId,
+      ...options.sessionId ? { sessionId: options.sessionId } : {},
       ...options.zones?.length ? { zones: options.zones } : {},
       ...options.context ? { context: options.context } : {}
     })
@@ -633,6 +668,7 @@ async function selectVariants(options) {
     site: options.site,
     view: options.view,
     anonId: options.anonId,
+    sessionId: options.sessionId,
     zones: options.zones,
     context: options.context,
     fetch: options.fetch,
@@ -717,7 +753,6 @@ function searchSpec(pagination, field, term) {
 }
 
 // src/index.ts
-var SESSION_IDLE_GAP_MS = 30 * 60 * 1e3;
 var DWELL_ACTIVITY_IDLE_MS = 2 * 60 * 1e3;
 var DWELL_POLL_MS = 5e3;
 function readPreviewQueryOverrides() {
@@ -893,6 +928,7 @@ var AmplifyUpSDK = class {
     if (typeof window === "undefined") return;
     window.AmplifyUp = {
       getInstanceId: () => this.getInstanceId(),
+      getSessionId: () => this.getSessionId(),
       getUserId: () => this.getUserId(),
       getTrackingId: () => this.getTrackingId(),
       getTarget: () => this.getTarget(),
@@ -1315,12 +1351,14 @@ var AmplifyUpSDK = class {
       return;
     }
     const instanceId = getInstanceId();
+    const sessionId = getSessionId();
     const pageProperties = {
       name: url,
       path: url,
       url: typeof window !== "undefined" ? window.location.href : url,
       referrer: typeof document !== "undefined" ? document.referrer : void 0,
       instanceId,
+      sessionId,
       trackingId: this.config?.trackingId,
       // Timestamp is included in event payload
       ...properties
@@ -1339,8 +1377,10 @@ var AmplifyUpSDK = class {
       return;
     }
     const instanceId = getInstanceId();
+    const sessionId = getSessionId();
     const trackProperties = {
       instanceId,
+      sessionId,
       trackingId: this.config?.trackingId,
       url: typeof window !== "undefined" ? window.location.href : void 0,
       path: properties?.path || (typeof window !== "undefined" ? window.location.pathname : void 0),
@@ -1413,8 +1453,10 @@ var AmplifyUpSDK = class {
       return;
     }
     const instanceId = getInstanceId();
+    const sessionId = getSessionId();
     const identifyTraits = {
       instanceId,
+      sessionId,
       trackingId: this.config?.trackingId,
       ...traits
     };
@@ -1452,6 +1494,7 @@ var AmplifyUpSDK = class {
     if (typeof this.adapter.setProfileFields === "function") {
       this.adapter.setProfileFields(fields, {
         instanceId: instanceId || void 0,
+        sessionId: getSessionId() || void 0,
         trackingId: this.config?.trackingId
       });
     }
@@ -1502,6 +1545,12 @@ var AmplifyUpSDK = class {
   getInstanceId() {
     return getInstanceId();
   }
+  /**
+   * Get session id (30-minute inactivity reset).
+   */
+  getSessionId() {
+    return getSessionId();
+  }
   /**
    * Get user ID
    */
@@ -3010,13 +3059,13 @@ function getSDK(adapter) {
 var trackContentView = (contentId, contentType, properties) => getSDK().trackContentView(contentId, contentType, properties);
 var refreshEventTracking = () => getSDK().refreshEventTracking();
 getSDK();
-var ComponentContext = react.createContext(null);
+var ComponentContext = React.createContext(null);
 function useLiveComposerProps(layoutNodeId, props) {
-  const [live, setLive] = react.useState(props);
-  react.useEffect(() => {
+  const [live, setLive] = React.useState(props);
+  React.useEffect(() => {
     setLive(props);
   }, [props]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     const matchesNode = (nodeId) => {
       if (nodeId && layoutNodeId && String(nodeId) !== String(layoutNodeId)) {
         return false;
@@ -3033,7 +3082,10 @@ function useLiveComposerProps(layoutNodeId, props) {
         return;
       }
       if (!matchesNode(nodeId)) return;
-      setLive(nextProps);
+      setLive((prev) => ({
+        ...prev,
+        ...nextProps
+      }));
     };
     const onPatch = (event) => {
       const detail = event.detail || {};
@@ -3063,7 +3115,7 @@ function useLiveComposerProps(layoutNodeId, props) {
   return live;
 }
 function useComponentProps() {
-  const context = react.useContext(ComponentContext);
+  const context = React.useContext(ComponentContext);
   if (!context) {
     console.warn(
       "[AmplifyUp SDK] useComponentProps used outside ComponentContextProvider"
@@ -3092,7 +3144,7 @@ function Slot({
   name,
   className
 }) {
-  const context = react.useContext(ComponentContext);
+  const context = React.useContext(ComponentContext);
   console.log(`[Slot:${name}] Rendering slot`, {
     hasContext: !!context,
     availableSlotKeys: context?.slots ? Object.keys(context.slots) : [],
@@ -3194,6 +3246,32 @@ function isLikelyNonTextFieldName(name) {
   const n = name.toLowerCase();
   return n.includes("href") || n.includes("url") || n.includes("src") || n.includes("image") || n.includes("icon") || n.includes("overlay") || n.includes("color");
 }
+function isPlainTextValue(value) {
+  return typeof value === "string" || typeof value === "number";
+}
+var COMPOSER_EMPTY_FIELD_HINT = "Click here to edit this field";
+var EMPTY_FIELD_PLACEHOLDERS = /* @__PURE__ */ new Set([
+  COMPOSER_EMPTY_FIELD_HINT,
+  "Click here to enter text",
+  "Sample Title",
+  "Sample Heading",
+  "Sample Subheading"
+]);
+function isComposerEmptyText(value) {
+  if (value === void 0 || value === null) return true;
+  if (typeof value !== "string") return false;
+  const trimmed = value.trim();
+  return trimmed === "" || EMPTY_FIELD_PLACEHOLDERS.has(trimmed);
+}
+function isReactNodeFallback(fallback) {
+  if (fallback == null || fallback === false) return false;
+  return !isPlainTextValue(fallback);
+}
+function htmlHasVisualChrome(html) {
+  return /<(input|button|select|textarea|form|svg|iframe|video|audio|img)\b/i.test(
+    html
+  );
+}
 function canInlineEdit(name, value) {
   if (isLikelyNonTextFieldName(name)) return false;
   if (value !== void 0 && value !== null && typeof value === "object") {
@@ -3202,19 +3280,22 @@ function canInlineEdit(name, value) {
   if (typeof value === "boolean") return false;
   return true;
 }
+function subscribeComposerEdit(onStoreChange) {
+  if (typeof window === "undefined") return () => {
+  };
+  window.addEventListener("amplifyup:composer-edit", onStoreChange);
+  return () => window.removeEventListener("amplifyup:composer-edit", onStoreChange);
+}
 function useComposerEditMode() {
-  const [enabled, setEnabled] = react.useState(false);
-  react.useEffect(() => {
-    const sync = () => setEnabled(isComposerEditMode());
-    sync();
-    window.addEventListener("amplifyup:composer-edit", sync);
-    return () => window.removeEventListener("amplifyup:composer-edit", sync);
-  }, []);
-  return enabled;
+  return React.useSyncExternalStore(
+    subscribeComposerEdit,
+    isComposerEditMode,
+    () => false
+  );
 }
 function useFieldOverlay(layoutNodeId, name, source) {
-  const [overlay, setOverlay] = react.useState(void 0);
-  react.useEffect(() => {
+  const [overlay, setOverlay] = React.useState(void 0);
+  React.useEffect(() => {
     const onPatch = (event) => {
       const detail = event.detail || {};
       if (detail.fieldName !== name) return;
@@ -3241,6 +3322,14 @@ function commitComposerField(layoutNodeId, componentId, name, value) {
     "*"
   );
 }
+function placeCaret(el, atStart = false) {
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  range.collapse(atStart);
+  const sel = window.getSelection();
+  sel?.removeAllRanges();
+  sel?.addRange(range);
+}
 function ComposerInlineField({
   name,
   value,
@@ -3250,36 +3339,55 @@ function ComposerInlineField({
   layoutNodeId,
   componentId
 }) {
-  const [editing, setEditing] = react.useState(false);
-  const elRef = react.useRef(null);
-  const text = formatFieldValue(value);
+  const [editing, setEditing] = React.useState(false);
+  const [focused, setFocused] = React.useState(false);
+  const elRef = React.useRef(null);
+  const storedEmpty = isComposerEmptyText(value);
+  const text = storedEmpty ? "" : formatFieldValue(value);
   const fallbackText = typeof fallback === "string" || typeof fallback === "number" ? String(fallback) : "";
-  const display = text || fallbackText;
+  const hint = COMPOSER_EMPTY_FIELD_HINT;
+  const idleDisplay = storedEmpty ? hint : text || fallbackText;
   const showRendered = !!render && !editing;
-  react.useEffect(() => {
+  const showHint = storedEmpty && !focused && !showRendered;
+  React.useEffect(() => {
     const el = elRef.current;
     if (!el || showRendered) return;
     if (document.activeElement === el) return;
-    const next = display || "";
+    if (el.querySelector(
+      "input, button, select, textarea, form, svg, iframe, img"
+    )) {
+      return;
+    }
+    const next = idleDisplay || "";
     if (el.textContent !== next) el.textContent = next;
-  }, [display, showRendered]);
-  react.useEffect(() => {
+  }, [idleDisplay, showRendered]);
+  React.useEffect(() => {
     if (!editing || !elRef.current) return;
     const el = elRef.current;
-    el.textContent = display || "";
+    if (storedEmpty) {
+      el.textContent = "";
+      el.focus();
+      placeCaret(el, true);
+      return;
+    }
+    el.textContent = idleDisplay || "";
     el.focus();
-    const range = document.createRange();
-    range.selectNodeContents(el);
-    const sel = window.getSelection();
-    sel?.removeAllRanges();
-    sel?.addRange(range);
-  }, [editing]);
+    placeCaret(el, false);
+  }, [editing, storedEmpty, idleDisplay]);
   const finishEdit = () => {
     const raw = (elRef.current?.innerText ?? "").replace(/\u00a0/g, " ").replace(/\n+$/g, "");
     const next = raw.trim() === "" ? "" : raw;
     setEditing(false);
+    setFocused(false);
+    if (storedEmpty && next === "") {
+      if (elRef.current) elRef.current.textContent = hint;
+      if (typeof value === "string" && EMPTY_FIELD_PLACEHOLDERS.has(value.trim())) {
+        commitComposerField(layoutNodeId, componentId, name, "");
+      }
+      return;
+    }
     if (next === text) return;
-    if (!text && next === fallbackText) return;
+    if (!text && !storedEmpty && next === fallbackText) return;
     commitComposerField(layoutNodeId, componentId, name, next);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3289,6 +3397,7 @@ function ComposerInlineField({
       className,
       "data-amplifyup-field": name,
       "data-amplifyup-node-id": layoutNodeId || void 0,
+      "data-amplifyup-empty-hint": showHint ? "true" : void 0,
       contentEditable: !showRendered,
       suppressContentEditableWarning: true,
       role: "textbox",
@@ -3305,6 +3414,12 @@ function ComposerInlineField({
       },
       onFocus: () => {
         if (!isComposerEditMode()) return;
+        setFocused(true);
+        const el = elRef.current;
+        if (el && storedEmpty) {
+          el.textContent = "";
+          placeCaret(el, true);
+        }
         if (render) setEditing(true);
       },
       onBlur: finishEdit,
@@ -3316,8 +3431,9 @@ function ComposerInlineField({
         }
         if (event.key === "Escape") {
           event.preventDefault();
-          if (elRef.current) elRef.current.textContent = display || "";
+          if (elRef.current) elRef.current.textContent = idleDisplay || "";
           setEditing(false);
+          setFocused(false);
           event.currentTarget.blur();
         }
       },
@@ -3326,12 +3442,59 @@ function ComposerInlineField({
         outline: "1px dashed color-mix(in srgb, currentColor 40%, transparent)",
         outlineOffset: "2px",
         minWidth: "1ch",
-        display: render ? void 0 : "inline"
+        minHeight: "1em",
+        display: render ? void 0 : "inline",
+        opacity: showHint ? 0.5 : void 0
       },
-      children: showRendered ? value != null && value !== "" ? render(value) : fallback ?? display : null
+      children: showRendered ? value != null && value !== "" && !storedEmpty ? render(value) : fallback ?? idleDisplay : isReactNodeFallback(fallback) && !idleDisplay ? fallback : null
     }
   );
 }
+function ComposerInlineHtml({
+  name,
+  html,
+  className,
+  Tag = "div",
+  layoutNodeId,
+  componentId
+}) {
+  const elRef = React.useRef(null);
+  const sourceTextRef = React.useRef("");
+  React.useEffect(() => {
+    const el = elRef.current;
+    if (!el) return;
+    if (document.activeElement === el || el.contains(document.activeElement)) {
+      return;
+    }
+    if (el.innerHTML !== html) el.innerHTML = html;
+    sourceTextRef.current = (el.innerText ?? "").replace(/\u00a0/g, " ").trim();
+  }, [html]);
+  const finishEdit = () => {
+    const el = elRef.current;
+    if (!el) return;
+    const next = (el.innerText ?? "").replace(/\u00a0/g, " ").replace(/\n+$/g, "");
+    if (next.trim() === sourceTextRef.current) return;
+    commitComposerField(layoutNodeId, componentId, name, next.trim());
+  };
+  return React__default.default.createElement(Tag, {
+    ref: elRef,
+    className,
+    "data-amplifyup-field": name,
+    "data-amplifyup-node-id": layoutNodeId || void 0,
+    contentEditable: true,
+    suppressContentEditableWarning: true,
+    dangerouslySetInnerHTML: { __html: html },
+    onMouseDown: (event) => {
+      event.stopPropagation();
+    },
+    onBlur: finishEdit,
+    style: {
+      cursor: "text",
+      outline: "1px dashed color-mix(in srgb, currentColor 40%, transparent)",
+      outlineOffset: "2px"
+    }
+  });
+}
 function formatFieldValue(value) {
   if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
     return String(value);
@@ -3384,7 +3547,7 @@ function Field({
   className,
   render
 }) {
-  const context = react.useContext(ComponentContext);
+  const context = React.useContext(ComponentContext);
   const composerEdit = useComposerEditMode();
   const fieldValue = useFieldOverlay(
     context?.layoutNodeId,
@@ -3398,7 +3561,13 @@ function Field({
   if (render) {
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style: { display: "contents" }, children: render(fieldValue) });
   }
-  if (composerEdit && canInlineEdit(name, fieldValue)) {
+  if (Array.isArray(fieldValue)) {
+    const list = renderLinkList(fieldValue, className);
+    if (list) return list;
+  }
+  const text = formatFieldValue(fieldValue);
+  const showVisualFallback = !text && isReactNodeFallback(fallback);
+  if (composerEdit && canInlineEdit(name, fieldValue) && !showVisualFallback) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       ComposerInlineField,
       {
@@ -3414,11 +3583,6 @@ function Field({
   if (fieldValue === void 0 || fieldValue === null) {
     return fallback ? /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: fallback }) : null;
   }
-  if (Array.isArray(fieldValue)) {
-    const list = renderLinkList(fieldValue, className);
-    if (list) return list;
-  }
-  const text = formatFieldValue(fieldValue);
   if (!text) {
     return fallback ? /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: fallback }) : null;
   }
@@ -3438,7 +3602,7 @@ function RichText({
   className,
   as: Tag = "div"
 }) {
-  const context = react.useContext(ComponentContext);
+  const context = React.useContext(ComponentContext);
   const composerEdit = useComposerEditMode();
   const fieldValue = useFieldOverlay(
     context?.layoutNodeId,
@@ -3449,20 +3613,20 @@ function RichText({
     console.warn(`[AmplifyUp SDK] RichText "${name}" used outside ComponentContextProvider`);
     return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : null;
   }
-  if (composerEdit && canInlineEdit(name, fieldValue)) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      ComposerInlineField,
-      {
-        name,
-        value: fieldValue,
-        fallback,
-        className,
-        layoutNodeId: context.layoutNodeId,
-        componentId: context.componentId
-      }
-    );
-  }
-  if (fieldValue === void 0 || fieldValue === null || fieldValue === "") {
+  if (isComposerEmptyText(fieldValue)) {
+    if (composerEdit && canInlineEdit(name, fieldValue) && !isReactNodeFallback(fallback)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ComposerInlineField,
+        {
+          name,
+          value: fieldValue,
+          fallback: typeof fallback === "string" || typeof fallback === "number" ? fallback : void 0,
+          className,
+          layoutNodeId: context.layoutNodeId,
+          componentId: context.componentId
+        }
+      );
+    }
     return fallback ? /* @__PURE__ */ jsxRuntime.jsx(Tag, { className, children: fallback }) : null;
   }
   let html = "";
@@ -3480,6 +3644,30 @@ function RichText({
   if (!html) {
     return fallback ? /* @__PURE__ */ jsxRuntime.jsx(Tag, { className, children: fallback }) : null;
   }
+  if (composerEdit && htmlHasVisualChrome(html)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Tag,
+      {
+        className,
+        "data-amplifyup-field": name,
+        "data-amplifyup-node-id": context.layoutNodeId || void 0,
+        dangerouslySetInnerHTML: { __html: html }
+      }
+    );
+  }
+  if (composerEdit && canInlineEdit(name, fieldValue)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ComposerInlineHtml,
+      {
+        name,
+        html,
+        className,
+        Tag,
+        layoutNodeId: context.layoutNodeId,
+        componentId: context.componentId
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(Tag, { className, dangerouslySetInnerHTML: { __html: html } });
 }
 function isPortableImageValue(value) {
@@ -3500,7 +3688,7 @@ function Image({
   height: heightProp,
   ...imgProps
 }) {
-  const context = react.useContext(ComponentContext);
+  const context = React.useContext(ComponentContext);
   const fieldValue = useFieldOverlay(
     context?.layoutNodeId,
     name,
@@ -3530,7 +3718,13 @@ function Image({
     }
   );
 }
-var ComponentRenderBoundary = class extends react.Component {
+function nodeRenderProps(node) {
+  return {
+    ...node.settings || {},
+    ...node.props || {}
+  };
+}
+var ComponentRenderBoundary = class extends React.Component {
   constructor() {
     super(...arguments);
     this.state = { error: null };
@@ -3602,8 +3796,8 @@ function AmplifyRenderer({
   const loading = serverPageConfig ? false : clientHook.loading;
   const error = serverPageConfig ? null : clientHook.error;
   const contentSource = clientHook.source;
-  const [variantCache, setVariantCache] = react.useState({});
-  react.useEffect(() => {
+  const [variantCache, setVariantCache] = React.useState({});
+  React.useEffect(() => {
     if (typeof window !== "undefined") {
       if (window.__AMPLIFYUP_PREVIEW_MODE__ === true) {
         return;
@@ -3629,7 +3823,7 @@ function AmplifyRenderer({
       });
     }
   }, [pageConfig]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!pageConfig?.eventTracking?.length) return;
     const sdk = getSDK();
     if (!sdk.isInitialized()) return;
@@ -3647,7 +3841,7 @@ function AmplifyRenderer({
       window.clearTimeout(t2);
     };
   }, [pageConfig?.id, pageConfig?.eventTracking]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!pageConfig) return;
     const t = window.setTimeout(() => {
       getSDK().setupComponentViewTracking();
@@ -3655,7 +3849,7 @@ function AmplifyRenderer({
     }, 100);
     return () => window.clearTimeout(t);
   }, [variantCache, pageConfig?.id]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     const isVisualEditorMode = () => {
       if (typeof window === "undefined") return false;
       const urlParams = new URLSearchParams(window.location.search);
@@ -3741,7 +3935,7 @@ function AmplifyRenderer({
       console.log("[AmplifyRenderer] Sent component tree from layoutTree:", componentTree.length, "root components");
     }
   }, [pageConfig]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!pageConfig?.layoutTree || !pageConfig.layoutId) return;
     const roots = pageConfig.layoutTree;
     const fromEdge = contentSource === "edge" || roots.some((n) => n._contentSource === "edge");
@@ -3882,7 +4076,7 @@ function AmplifyRenderer({
               "data-amplifyup-slot": "content",
               "data-parent-node-id": node.id,
               "data-parent-component-id": "AmplifyZone",
-              children: children.filter(Boolean).map((child) => /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: renderNode(child) }, child.id))
+              children: children.filter(Boolean).map((child) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: renderNode(child) }, child.id))
             }
           )
         }
@@ -3932,7 +4126,7 @@ function AmplifyRenderer({
             "data-zone-id": slot.zoneId || void 0,
             "data-parent-node-id": node.id,
             "data-parent-component-id": node.componentId,
-            children: safeChildren.filter(Boolean).map((child) => /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: renderNode(child) }, child.id))
+            children: safeChildren.filter(Boolean).map((child) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: renderNode(child) }, child.id))
           },
           slot.slotId
         );
@@ -3953,7 +4147,7 @@ function AmplifyRenderer({
           {
             nodeId: node.id,
             componentId: node.componentId,
-            props: node.props || {},
+            props: nodeRenderProps(node),
             slots: slotsToPass,
             renderComponent
           }
@@ -4123,14 +4317,14 @@ if (typeof window !== "undefined") {
   } catch {
   }
 }
-var AmplifyUpContext = react.createContext(null);
+var AmplifyUpContext = React.createContext(null);
 function AmplifyUpProvider({ children, config }) {
-  const [initialized, setInitialized] = react.useState(false);
-  const [pageConfig, setPageConfig] = react.useState(null);
-  const [loading, setLoading] = react.useState(true);
-  const [error, setError] = react.useState(null);
-  const [source, setSource] = react.useState(null);
-  const [meta, setMeta] = react.useState(null);
+  const [initialized, setInitialized] = React.useState(false);
+  const [pageConfig, setPageConfig] = React.useState(null);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  const [source, setSource] = React.useState(null);
+  const [meta, setMeta] = React.useState(null);
   const getActualRoute = () => {
     if (typeof window === "undefined") return "";
     const currentPath = window.location.pathname;
@@ -4148,13 +4342,13 @@ function AmplifyUpProvider({ children, config }) {
     return currentPath;
   };
   const nextPathname = usePathname ? usePathname() : null;
-  const [pathname, setPathname] = react.useState(() => {
+  const [pathname, setPathname] = React.useState(() => {
     if (typeof window !== "undefined") {
       return getActualRoute();
     }
     return "";
   });
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (typeof window !== "undefined") {
       const actualRoute = getActualRoute();
       if (window.location.pathname === "/api/pages/proxy" || window.location.pathname.startsWith("/api/pages/proxy")) {
@@ -4180,7 +4374,7 @@ function AmplifyUpProvider({ children, config }) {
       };
     }
   }, [nextPathname]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     let cancelled = false;
     const sdk = getSDK();
     sdk.init(config).then(() => {
@@ -4197,7 +4391,7 @@ function AmplifyUpProvider({ children, config }) {
       cancelled = true;
     };
   }, [config.trackingId, config.target, config.debug, config.dev, config.siteId]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!initialized) return;
     let cancelled = false;
     const load = async () => {
@@ -4229,12 +4423,14 @@ function AmplifyUpProvider({ children, config }) {
         }
         let variantKeys;
         const anonId = sdk.getInstanceId();
+        const sessionId = sdk.getSessionId();
         if (!preview && anonId) {
           try {
             const selected = await selectVariants({
               trackingId,
               view: actualRoute,
               anonId,
+              sessionId: sessionId || void 0,
               site: sdk.getSiteId() || void 0,
               edgeUrl
             });
@@ -4247,6 +4443,7 @@ function AmplifyUpProvider({ children, config }) {
           route: actualRoute,
           trackingId,
           anonId: variantKeys ? void 0 : anonId,
+          sessionId: variantKeys ? void 0 : sessionId || void 0,
           siteId: sdk.getSiteId() || null,
           preview,
           orchestratorUrl,
@@ -4293,7 +4490,7 @@ function AmplifyUpProvider({ children, config }) {
   );
 }
 function useAmplifyUp() {
-  const context = react.useContext(AmplifyUpContext);
+  const context = React.useContext(AmplifyUpContext);
   if (!context) {
     throw new Error("useAmplifyUp must be used within AmplifyUpProvider");
   }