@amplifyup/sdk 0.1.39 → 0.1.41

package/dist/react.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { createContext, useState, useEffect, useContext, Fragment as Fragment$1, useRef, Component } from 'react';
+import React, { createContext, useState, useEffect, useContext, Fragment as Fragment$1, useSyncExternalStore, useRef, Component } from 'react';
 import { marked } from 'marked';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -102,6 +102,7 @@ var AWSAdapter = class {
     const eventData = {
       type: "page",
       anonymousId: properties.instanceId,
+      sessionId: properties.sessionId,
       userId: properties.userId,
       properties: {
         path: properties.path || properties.url,
@@ -144,6 +145,7 @@ var AWSAdapter = class {
       type: "track",
       event: eventName,
       anonymousId: properties.instanceId,
+      sessionId: properties.sessionId,
       userId: properties.userId,
       properties: {
         ...properties
@@ -166,6 +168,7 @@ var AWSAdapter = class {
     const eventData = {
       type: "identify",
       anonymousId: traits.instanceId,
+      sessionId: traits.sessionId,
       traits: {
         ...traits,
         ...identifiers ? { identifiers } : {}
@@ -184,6 +187,7 @@ var AWSAdapter = class {
     const eventData = {
       type: "set_fields",
       anonymousId: context.instanceId,
+      sessionId: context.sessionId,
       fields,
       traits: {
         instanceId: context.instanceId,
@@ -206,7 +210,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();
@@ -233,9 +241,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") {
@@ -258,6 +266,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;
@@ -270,7 +295,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
@@ -433,6 +461,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 = {
@@ -534,6 +563,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,
@@ -603,6 +633,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 } : {}
     })
@@ -631,6 +662,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,
@@ -715,7 +747,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() {
@@ -891,6 +922,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(),
@@ -1313,12 +1345,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
@@ -1337,8 +1371,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),
@@ -1411,8 +1447,10 @@ var AmplifyUpSDK = class {
       return;
     }
     const instanceId = getInstanceId();
+    const sessionId = getSessionId();
     const identifyTraits = {
       instanceId,
+      sessionId,
       trackingId: this.config?.trackingId,
       ...traits
     };
@@ -1450,6 +1488,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
       });
     }
@@ -1500,6 +1539,12 @@ var AmplifyUpSDK = class {
   getInstanceId() {
     return getInstanceId();
   }
+  /**
+   * Get session id (30-minute inactivity reset).
+   */
+  getSessionId() {
+    return getSessionId();
+  }
   /**
    * Get user ID
    */
@@ -3031,7 +3076,10 @@ function useLiveComposerProps(layoutNodeId, props) {
         return;
       }
       if (!matchesNode(nodeId)) return;
-      setLive(nextProps);
+      setLive((prev) => ({
+        ...prev,
+        ...nextProps
+      }));
     };
     const onPatch = (event) => {
       const detail = event.detail || {};
@@ -3192,6 +3240,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") {
@@ -3200,15 +3274,18 @@ 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] = useState(false);
-  useEffect(() => {
-    const sync = () => setEnabled(isComposerEditMode());
-    sync();
-    window.addEventListener("amplifyup:composer-edit", sync);
-    return () => window.removeEventListener("amplifyup:composer-edit", sync);
-  }, []);
-  return enabled;
+  return useSyncExternalStore(
+    subscribeComposerEdit,
+    isComposerEditMode,
+    () => false
+  );
 }
 function useFieldOverlay(layoutNodeId, name, source) {
   const [overlay, setOverlay] = useState(void 0);
@@ -3239,6 +3316,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,
@@ -3249,35 +3334,54 @@ function ComposerInlineField({
   componentId
 }) {
   const [editing, setEditing] = useState(false);
+  const [focused, setFocused] = useState(false);
   const elRef = useRef(null);
-  const text = formatFieldValue(value);
+  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;
+  const showHint = storedEmpty && !focused && !showRendered;
   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]);
+  }, [idleDisplay, showRendered]);
   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__ */ jsx(
@@ -3287,6 +3391,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",
@@ -3303,6 +3408,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,
@@ -3314,8 +3425,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();
         }
       },
@@ -3324,12 +3436,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 = useRef(null);
+  const sourceTextRef = useRef("");
+  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.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);
@@ -3396,7 +3555,13 @@ function Field({
   if (render) {
     return /* @__PURE__ */ 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__ */ jsx(
       ComposerInlineField,
       {
@@ -3412,11 +3577,6 @@ function Field({
   if (fieldValue === void 0 || fieldValue === null) {
     return fallback ? /* @__PURE__ */ 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__ */ jsx("span", { className, children: fallback }) : null;
   }
@@ -3447,20 +3607,20 @@ function RichText({
     console.warn(`[AmplifyUp SDK] RichText "${name}" used outside ComponentContextProvider`);
     return fallback ? /* @__PURE__ */ jsx(Fragment, { children: fallback }) : null;
   }
-  if (composerEdit && canInlineEdit(name, fieldValue)) {
-    return /* @__PURE__ */ 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__ */ 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__ */ jsx(Tag, { className, children: fallback }) : null;
   }
   let html = "";
@@ -3478,6 +3638,30 @@ function RichText({
   if (!html) {
     return fallback ? /* @__PURE__ */ jsx(Tag, { className, children: fallback }) : null;
   }
+  if (composerEdit && htmlHasVisualChrome(html)) {
+    return /* @__PURE__ */ 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__ */ jsx(
+      ComposerInlineHtml,
+      {
+        name,
+        html,
+        className,
+        Tag,
+        layoutNodeId: context.layoutNodeId,
+        componentId: context.componentId
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(Tag, { className, dangerouslySetInnerHTML: { __html: html } });
 }
 function isPortableImageValue(value) {
@@ -3528,6 +3712,12 @@ function Image({
     }
   );
 }
+function nodeRenderProps(node) {
+  return {
+    ...node.settings || {},
+    ...node.props || {}
+  };
+}
 var ComponentRenderBoundary = class extends Component {
   constructor() {
     super(...arguments);
@@ -3951,7 +4141,7 @@ function AmplifyRenderer({
           {
             nodeId: node.id,
             componentId: node.componentId,
-            props: node.props || {},
+            props: nodeRenderProps(node),
             slots: slotsToPass,
             renderComponent
           }
@@ -4227,12 +4417,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
             });
@@ -4245,6 +4437,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,