@amplifyup/sdk 0.1.23 → 0.1.25

package/dist/react.d.mts

@@ -88,6 +88,8 @@ declare function Slot({ name, className, }: {
  * where field values should appear in their component, with full control
  * over styling and formatting.
  *
+ * For markdown / rich text fields, use {@link RichText} instead.
+ *
  * @example
  * ```tsx
  * function Hero({ title, description }) {
@@ -110,6 +112,23 @@ declare function Field({ name, fallback, className, render, }: {
     className?: string;
     render?: (value: any) => ReactNode;
 }): react_jsx_runtime.JSX.Element | null;
+/**
+ * RichText - Renders a markdown (or HTML string) field as formatted HTML.
+ *
+ * Use for config/data fields of kind `richtext`. Values are stored as Markdown
+ * across Composer for portability across CMS platforms.
+ *
+ * @example
+ * ```tsx
+ * <RichText name="body" className="prose" />
+ * ```
+ */
+declare function RichText({ name, fallback, className, as: Tag, }: {
+    name: string;
+    fallback?: ReactNode;
+    className?: string;
+    as?: keyof JSX.IntrinsicElements;
+}): react_jsx_runtime.JSX.Element | null;
 
 interface AmplifyUpContextType {
     pageConfig: PageConfig | null;
@@ -125,4 +144,4 @@ interface AmplifyUpProviderProps {
 declare function AmplifyUpProvider({ children, config }: AmplifyUpProviderProps): react_jsx_runtime.JSX.Element;
 declare function useAmplifyUp(): AmplifyUpContextType;
 
-export { AmplifyContentMeta, AmplifyPageContent, AmplifyUpProvider, ComponentContextProvider, ContentSource, Field, PageConfig, Slot, useAmplifyUp };
+export { AmplifyContentMeta, AmplifyPageContent, AmplifyUpProvider, ComponentContextProvider, ContentSource, Field, PageConfig, RichText, Slot, useAmplifyUp };

package/dist/react.d.ts

@@ -88,6 +88,8 @@ declare function Slot({ name, className, }: {
  * where field values should appear in their component, with full control
  * over styling and formatting.
  *
+ * For markdown / rich text fields, use {@link RichText} instead.
+ *
  * @example
  * ```tsx
  * function Hero({ title, description }) {
@@ -110,6 +112,23 @@ declare function Field({ name, fallback, className, render, }: {
     className?: string;
     render?: (value: any) => ReactNode;
 }): react_jsx_runtime.JSX.Element | null;
+/**
+ * RichText - Renders a markdown (or HTML string) field as formatted HTML.
+ *
+ * Use for config/data fields of kind `richtext`. Values are stored as Markdown
+ * across Composer for portability across CMS platforms.
+ *
+ * @example
+ * ```tsx
+ * <RichText name="body" className="prose" />
+ * ```
+ */
+declare function RichText({ name, fallback, className, as: Tag, }: {
+    name: string;
+    fallback?: ReactNode;
+    className?: string;
+    as?: keyof JSX.IntrinsicElements;
+}): react_jsx_runtime.JSX.Element | null;
 
 interface AmplifyUpContextType {
     pageConfig: PageConfig | null;
@@ -125,4 +144,4 @@ interface AmplifyUpProviderProps {
 declare function AmplifyUpProvider({ children, config }: AmplifyUpProviderProps): react_jsx_runtime.JSX.Element;
 declare function useAmplifyUp(): AmplifyUpContextType;
 
-export { AmplifyContentMeta, AmplifyPageContent, AmplifyUpProvider, ComponentContextProvider, ContentSource, Field, PageConfig, Slot, useAmplifyUp };
+export { AmplifyContentMeta, AmplifyPageContent, AmplifyUpProvider, ComponentContextProvider, ContentSource, Field, PageConfig, RichText, Slot, useAmplifyUp };

package/dist/react.js

@@ -3,6 +3,7 @@
 
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var marked = require('marked');
 
 /* @amplifyup/sdk - https://amplifyup.ai */
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
@@ -518,6 +519,10 @@ async function fetchContent(options) {
 
 // src/index.ts
 var SESSION_IDLE_GAP_MS = 30 * 60 * 1e3;
+var DWELL_MILESTONES_SEC = [15, 30, 60, 120, 300];
+var DWELL_CHECKPOINT_SEC = 15 * 60;
+var DWELL_ACTIVITY_IDLE_MS = 2 * 60 * 1e3;
+var DWELL_POLL_MS = 5e3;
 function readPreviewQueryOverrides() {
   if (typeof window === "undefined") return {};
   const params = new URLSearchParams(window.location.search);
@@ -588,7 +593,10 @@ var AmplifyUpSDK = class {
       visibleSince: null,
       lastDwellSecondsSent: 0,
       /** When the tab last became hidden — used for idle-resume re-page. */
-      hiddenAt: null
+      hiddenAt: null,
+      /** Last user interaction — freezes dwell when stale while visible. */
+      lastActivityAt: 0,
+      activityIdle: false
     };
     this.adapter = adapter || new AWSAdapter();
     if (typeof window !== "undefined") {
@@ -811,8 +819,10 @@ var AmplifyUpSDK = class {
     return window.location.pathname || "/";
   }
   /**
-   * Automatic page-level Scroll Depth + Time on Page (dwell heartbeat).
-   * State lives on the instance so SPA route changes can reset milestones.
+   * Automatic page-level Scroll Depth + Time on Page.
+   * Dwell uses milestones / sparse checkpoints (not a fixed 15s heartbeat),
+   * freezes while the tab is visible but the user is idle, and always flushes
+   * on hide / unload / SPA route change.
    */
   setupPageEngagement() {
     if (typeof window === "undefined" || typeof document === "undefined") return;
@@ -825,6 +835,8 @@ var AmplifyUpSDK = class {
     state.visibleSince = document.visibilityState === "visible" ? Date.now() : null;
     state.lastDwellSecondsSent = 0;
     state.hiddenAt = document.visibilityState === "hidden" ? Date.now() : null;
+    state.lastActivityAt = Date.now();
+    state.activityIdle = false;
     let scrollRaf = null;
     const path = () => this.currentPath();
     const measureScrollPercent = () => {
@@ -856,6 +868,7 @@ var AmplifyUpSDK = class {
       }
     };
     const onScroll = () => {
+      noteActivity();
       if (scrollRaf != null) return;
       scrollRaf = window.requestAnimationFrame(() => {
         scrollRaf = null;
@@ -867,19 +880,58 @@ var AmplifyUpSDK = class {
       state.visibleMs += Date.now() - state.visibleSince;
       state.visibleSince = Date.now();
     };
-    const emitDwell = (_force = false) => {
-      if (this.isPreviewMode()) return;
+    const freezeActivityIdle = () => {
+      if (state.activityIdle) return;
       accumulateVisible();
+      state.visibleSince = null;
+      state.activityIdle = true;
+    };
+    const noteActivity = () => {
+      state.lastActivityAt = Date.now();
+      if (state.activityIdle) {
+        state.activityIdle = false;
+        if (document.visibilityState === "visible" && state.visibleSince == null) {
+          state.visibleSince = Date.now();
+        }
+      }
+    };
+    const nextEmitTarget = (lastSent) => {
+      for (const m of DWELL_MILESTONES_SEC) {
+        if (m > lastSent) return { seconds: m, reason: "milestone" };
+      }
+      const nextCheckpoint = Math.floor(lastSent / DWELL_CHECKPOINT_SEC) * DWELL_CHECKPOINT_SEC + DWELL_CHECKPOINT_SEC;
+      const target = nextCheckpoint > lastSent ? nextCheckpoint : lastSent + DWELL_CHECKPOINT_SEC;
+      return { seconds: target, reason: "checkpoint" };
+    };
+    const emitDwell = (reason, force = false) => {
+      if (this.isPreviewMode()) return;
+      if (!state.activityIdle) {
+        accumulateVisible();
+      }
       const seconds = Math.floor(state.visibleMs / 1e3);
       if (seconds <= 0) return;
       if (seconds <= state.lastDwellSecondsSent) return;
+      if (!force) {
+        const target = nextEmitTarget(state.lastDwellSecondsSent);
+        if (!target || seconds < target.seconds) return;
+        reason = target.reason;
+      }
       state.lastDwellSecondsSent = seconds;
       this.track("Time on Page", {
         seconds,
-        path: this.lastTrackedPath || path()
+        path: this.lastTrackedPath || path(),
+        reason
       });
     };
-    this._emitPageDwell = emitDwell;
+    const evaluateDwell = () => {
+      if (document.visibilityState !== "visible") return;
+      if (Date.now() - state.lastActivityAt >= DWELL_ACTIVITY_IDLE_MS) {
+        freezeActivityIdle();
+        return;
+      }
+      emitDwell("milestone", false);
+    };
+    this._emitPageDwell = (force) => emitDwell("route", force !== false);
     const onVisibility = () => {
       if (document.visibilityState === "visible") {
         const idleMs = state.hiddenAt != null ? Date.now() - state.hiddenAt : 0;
@@ -897,35 +949,51 @@ var AmplifyUpSDK = class {
             );
           }
         }
+        noteActivity();
         state.visibleSince = Date.now();
+        state.activityIdle = false;
       } else {
-        emitDwell(true);
+        emitDwell("hidden", true);
         state.hiddenAt = Date.now();
         state.visibleSince = null;
+        state.activityIdle = false;
       }
     };
     const onPageHide = () => {
-      emitDwell(true);
+      emitDwell("unload", true);
       if (state.hiddenAt == null) {
         state.hiddenAt = Date.now();
       }
       state.visibleSince = null;
     };
+    const activityEvents = [
+      "pointerdown",
+      "keydown",
+      "scroll",
+      "touchstart"
+    ];
+    const onActivity = () => noteActivity();
     window.addEventListener("scroll", onScroll, { passive: true });
     document.addEventListener("visibilitychange", onVisibility);
     window.addEventListener("pagehide", onPageHide);
+    for (const evt of activityEvents) {
+      if (evt === "scroll") continue;
+      window.addEventListener(evt, onActivity, { passive: true });
+    }
     checkScroll();
     const heartbeat = setInterval(() => {
-      if (document.visibilityState === "visible") {
-        emitDwell(false);
-      }
-    }, 15e3);
+      evaluateDwell();
+    }, DWELL_POLL_MS);
     this.trackingIntervals.push(heartbeat);
     const previousCleanup = this.trackingCleanup;
     this.trackingCleanup = () => {
       window.removeEventListener("scroll", onScroll);
       document.removeEventListener("visibilitychange", onVisibility);
       window.removeEventListener("pagehide", onPageHide);
+      for (const evt of activityEvents) {
+        if (evt === "scroll") continue;
+        window.removeEventListener(evt, onActivity);
+      }
       if (scrollRaf != null) {
         window.cancelAnimationFrame(scrollRaf);
         scrollRaf = null;
@@ -951,6 +1019,8 @@ var AmplifyUpSDK = class {
     state.visibleMs = 0;
     state.lastDwellSecondsSent = 0;
     state.hiddenAt = null;
+    state.lastActivityAt = Date.now();
+    state.activityIdle = false;
     state.visibleSince = typeof document !== "undefined" && document.visibilityState === "visible" ? Date.now() : null;
     this.componentViewSeen.clear();
   }
@@ -2661,6 +2731,53 @@ function getSDK(adapter) {
 var trackContentView = (contentId, contentType, properties) => getSDK().trackContentView(contentId, contentType, properties);
 var refreshEventTracking = () => getSDK().refreshEventTracking();
 getSDK();
+var ComponentRenderBoundary = class extends react.Component {
+  constructor() {
+    super(...arguments);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error) {
+    console.error(
+      `[AmplifyRenderer] "${this.props.componentId}" (${this.props.nodeId}) threw while rendering:`,
+      error
+    );
+  }
+  render() {
+    if (this.state.error) {
+      if (process.env.NODE_ENV !== "production") {
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-amplifyup-render-error": "",
+            "data-component-id": this.props.componentId,
+            "data-node-id": this.props.nodeId,
+            style: {
+              margin: "1rem 0",
+              padding: "0.75rem 1rem",
+              border: "1px solid #fca5a5",
+              borderRadius: "0.5rem",
+              background: "#fef2f2",
+              color: "#991b1b",
+              fontSize: "0.875rem"
+            },
+            children: [
+              'Component "',
+              this.props.componentId,
+              '" failed to render:',
+              " ",
+              this.state.error.message
+            ]
+          }
+        );
+      }
+      return null;
+    }
+    return this.props.children;
+  }
+};
 function AmplifyRenderer({
   renderComponent,
   pageConfig: serverPageConfig,
@@ -3017,11 +3134,20 @@ function AmplifyRenderer({
     const slotsToPass = Object.keys(slotChildren).length > 0 ? slotChildren : void 0;
     console.log(`[AmplifyRenderer] Calling renderComponent for ${node.componentId}`, {
       hasSlots: !!slotsToPass,
-      slotKeys: slotsToPass ? Object.keys(slotsToPass) : []
+      slotKeys: slotsToPass ? Object.keys(slotsToPass) : [],
+      propKeys: Object.keys(node.props || {}),
+      props: node.props || {}
     });
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-node-id": node.id, "data-amplifyup-node": "", children: renderComponent(node.componentId, node.props || {}, slotsToPass, {
-      layoutNodeId: node.id
-    }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-node-id": node.id, "data-amplifyup-node": "", children: /* @__PURE__ */ jsxRuntime.jsx(
+      ComponentRenderBoundary,
+      {
+        componentId: node.componentId,
+        nodeId: node.id,
+        children: renderComponent(node.componentId, node.props || {}, slotsToPass, {
+          layoutNodeId: node.id
+        })
+      }
+    ) });
   };
   const rawTree = pageConfig.layoutTree;
   const layoutTree = Array.isArray(rawTree) ? rawTree : rawTree && typeof rawTree === "object" && rawTree.componentId ? [rawTree] : [];
@@ -3267,6 +3393,25 @@ function Slot({
     }
   );
 }
+function formatFieldValue(value) {
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    const parts = value.map((item) => {
+      if (typeof item === "string") return item;
+      if (item && typeof item === "object" && "children" in item && Array.isArray(item.children)) {
+        return item.children.map((c) => typeof c?.text === "string" ? c.text : "").join("");
+      }
+      return "";
+    }).filter(Boolean);
+    if (parts.length > 0) return parts.join(" ");
+  }
+  if (value && typeof value === "object") {
+    return "";
+  }
+  return "";
+}
 function Field({
   name,
   fallback,
@@ -3285,7 +3430,51 @@ function Field({
   if (render) {
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: render(fieldValue) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: String(fieldValue) });
+  const text = formatFieldValue(fieldValue);
+  if (!text) {
+    return fallback ? /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: fallback }) : null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: text });
+}
+function markdownToHtml(markdown) {
+  try {
+    const result = marked.marked.parse(markdown, { async: false });
+    return typeof result === "string" ? result : "";
+  } catch {
+    return markdown;
+  }
+}
+function RichText({
+  name,
+  fallback,
+  className,
+  as: Tag = "div"
+}) {
+  const context = react.useContext(ComponentContext);
+  if (!context) {
+    console.warn(`[AmplifyUp SDK] RichText "${name}" used outside ComponentContextProvider`);
+    return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : null;
+  }
+  const fieldValue = context.props?.[name];
+  if (fieldValue === void 0 || fieldValue === null || fieldValue === "") {
+    return fallback ? /* @__PURE__ */ jsxRuntime.jsx(Tag, { className, children: fallback }) : null;
+  }
+  let html = "";
+  if (typeof fieldValue === "string") {
+    const trimmed = fieldValue.trim();
+    if (trimmed.startsWith("<") && trimmed.includes(">")) {
+      html = fieldValue;
+    } else {
+      html = markdownToHtml(fieldValue);
+    }
+  } else {
+    const text = formatFieldValue(fieldValue);
+    html = text ? markdownToHtml(text) : "";
+  }
+  if (!html) {
+    return fallback ? /* @__PURE__ */ jsxRuntime.jsx(Tag, { className, children: fallback }) : null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { className, dangerouslySetInnerHTML: { __html: html } });
 }
 var usePathname = null;
 if (typeof window !== "undefined") {
@@ -3449,6 +3638,7 @@ exports.AmplifyRenderer = AmplifyRenderer;
 exports.AmplifyUpProvider = AmplifyUpProvider;
 exports.ComponentContextProvider = ComponentContextProvider;
 exports.Field = Field;
+exports.RichText = RichText;
 exports.Slot = Slot;
 exports.fetchPageConfigServer = fetchPageConfigServer;
 exports.isComposerPreview = isComposerPreview;