@amplifyup/sdk 0.1.67 → 0.1.69

package/dist/react.mjs

@@ -1,5 +1,5 @@
 'use client';
-import React2, { createContext, memo, useState, useEffect, Fragment as Fragment$1, useContext, useRef, Component, useMemo, useSyncExternalStore, useCallback } from 'react';
+import React3, { createContext, memo, useState, useEffect, Fragment as Fragment$1, useContext, useRef, Component, useMemo, useSyncExternalStore, useCallback } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { marked } from 'marked';
 
@@ -434,6 +434,13 @@ function isFieldEnvelope(value) {
   const rec = value;
   return typeof rec.name === "string" && "value" in rec && !("url" in rec);
 }
+var OBJECT_FIELD_KINDS = /* @__PURE__ */ new Set(["object", "array", "list"]);
+function isLeafFieldKind(kind) {
+  if (typeof kind !== "string") return false;
+  const normalized = kind.trim().toLowerCase();
+  if (!normalized) return false;
+  return !OBJECT_FIELD_KINDS.has(normalized);
+}
 function isPageResourceSentinel(value) {
   return !!value && typeof value === "object" && !Array.isArray(value) && typeof value.__amplifyupPageResource === "string";
 }
@@ -573,6 +580,10 @@ function toFieldEnvelopes(source, prefix = "", scope) {
       out[key] = { value: envelopeListRows(raw, owner), name: path };
       continue;
     }
+    if (ctx.leaf?.(path)) {
+      out[key] = withLeaf({ value: emptyValue(raw), name: path }, ctx);
+      continue;
+    }
     if (raw && typeof raw === "object" && !Array.isArray(raw) && !isPortableImageShape(raw) && !raw.$$typeof) {
       out[key] = toFieldEnvelopes(raw, path, ctx);
       continue;
@@ -601,15 +612,33 @@ function envelopeListRow(item, owner) {
   }
   return row;
 }
+var warnedMissingFieldKind = /* @__PURE__ */ new Set();
+function warnMissingFieldKind(fieldName) {
+  if (process.env.NODE_ENV === "production") return;
+  if (warnedMissingFieldKind.has(fieldName)) return;
+  warnedMissingFieldKind.add(fieldName);
+  console.warn(
+    `[AmplifyUp SDK] Field "${fieldName}" has no schema kind; using value-shape detection. Republish the component definition so its fields carry a type.`
+  );
+}
 function attachFieldEnvelopes(props, sources) {
   const raw = props && typeof props === "object" ? { ...props } : {};
   if (isBrandedFields(raw.fields)) return raw;
   const { fields: existing, ...content } = raw;
   const source = existing && typeof existing === "object" && !isFieldEnvelope(existing) ? existing : content;
+  const { reads } = normalizeEnvelopeSources(sources);
+  if (reads) {
+    for (const [fieldName, read] of Object.entries(reads)) {
+      if (!read?.kind) warnMissingFieldKind(fieldName);
+    }
+  }
   return {
     ...raw,
     fields: toFieldEnvelopes(source, "", {
-      owners: (fieldName) => listOwnerForField(fieldName, source, sources)
+      owners: (fieldName) => listOwnerForField(fieldName, source, sources),
+      // Top-level field paths equal field names; nested paths have no schema
+      // entry and fall back to shape-based handling.
+      leaf: (path) => isLeafFieldKind(reads?.[path]?.kind)
     })
   };
 }
@@ -884,6 +913,8 @@ function hydrateFieldsBag(bag, fields) {
     if (val && typeof val === "object" && !Array.isArray(val) && typeof val.name === "string" && "value" in val && !("url" in val)) {
       const env = val;
       out[key] = {
+        // Keep ref / readOnly / source — dropping them severs the write target.
+        ...val,
         name: env.name,
         value: isPageResourceSentinel2(env.value) ? hydratePageResourceValue(env.value, fields) : env.value
       };
@@ -965,6 +996,51 @@ function sdkDebugOnce(key, ...args) {
   console.log(...args);
 }
 
+// src/content/layoutProviderCache.ts
+var SETTLED_TTL_MS = 5e3;
+var inflight = /* @__PURE__ */ new Map();
+var settled = /* @__PURE__ */ new Map();
+function layoutProviderCacheKey(opts) {
+  const route = (opts.route || "/").split("?")[0] || "/";
+  return [
+    route,
+    opts.trackingId || "",
+    opts.instanceId || "",
+    opts.preview ? "1" : "0",
+    opts.working ? "1" : "0",
+    opts.zoneId || "",
+    opts.compositionId || ""
+  ].join("|");
+}
+function getSettledLayoutProvider(key) {
+  const entry = settled.get(key);
+  if (!entry) return void 0;
+  if (Date.now() - entry.at > SETTLED_TTL_MS) {
+    settled.delete(key);
+    return void 0;
+  }
+  return entry.value;
+}
+function dedupeLayoutProviderFetch(key, fetchFn) {
+  const cached = getSettledLayoutProvider(key);
+  if (cached !== void 0) return Promise.resolve(cached);
+  const existing = inflight.get(key);
+  if (existing) return existing;
+  const pending = fetchFn().then((value) => {
+    settled.set(key, { value, at: Date.now() });
+    return value;
+  }).finally(() => {
+    inflight.delete(key);
+  });
+  inflight.set(key, pending);
+  return pending;
+}
+function previewLayoutReady(opts) {
+  if (opts.hasClientLayout) return true;
+  if (opts.clientLoading) return false;
+  return true;
+}
+
 // src/edge/normalizeRoute.ts
 function normalizeRoute(route) {
   let path = String(route || "").trim();
@@ -2378,6 +2454,32 @@ Available Console Commands:
    */
   async fetchPageConfig(route, preview = false) {
     const url = this.buildLayoutProviderUrl(route, preview);
+    const pageSearch = typeof window !== "undefined" ? new URLSearchParams(window.location.search) : null;
+    const cacheKey = layoutProviderCacheKey({
+      route,
+      trackingId: this.getTrackingId(),
+      instanceId: getInstanceId(),
+      preview,
+      working: pageSearch ? isWorkingContentRequest(pageSearch) : false,
+      zoneId: pageSearch?.get("zoneId"),
+      compositionId: pageSearch?.get("compositionId")
+    });
+    return dedupeLayoutProviderFetch(cacheKey, async () => {
+      const startedAt = Date.now();
+      sdkDebug("[AmplifyUp SDK] layout/provider request", {
+        route,
+        at: new Date(startedAt).toISOString()
+      });
+      const page = await this.fetchPageConfigUncached(url);
+      sdkDebug("[AmplifyUp SDK] layout/provider response", {
+        route,
+        durationMs: Date.now() - startedAt,
+        hasPage: !!page
+      });
+      return page;
+    });
+  }
+  async fetchPageConfigUncached(url) {
     const response = await fetch(url);
     if (!response.ok) {
       if (response.status === 404) {
@@ -2736,6 +2838,12 @@ Available Console Commands:
           );
           return;
         }
+        if (event.data?.type === "AMPLIFYUP_LAYOUT_PATCH") {
+          window.dispatchEvent(
+            new CustomEvent("amplifyup:layout-patch", { detail: event.data })
+          );
+          return;
+        }
         if (event.data?.type === "COMPONENT_DELETABLE_STATUS") {
           const { componentId, deletable, nodeId } = event.data;
           const element = document.querySelector(`[data-component-id="${componentId}"]`);
@@ -3776,6 +3884,13 @@ function getSDK(adapter) {
 var trackContentView = (contentId, contentType, properties) => getSDK().trackContentView(contentId, contentType, properties);
 var refreshEventTracking = () => getSDK().refreshEventTracking();
 getSDK();
+function useComposerPreviewFlag(force = false) {
+  const [detected, setDetected] = useState(false);
+  useEffect(() => {
+    if (!force && isComposerPreview()) setDetected(true);
+  }, [force]);
+  return force || detected;
+}
 
 // src/composer-store.ts
 var ComposerFieldStore = class {
@@ -3992,16 +4107,9 @@ function NodeWithFields({
   renderComponent,
   composerPreview
 }) {
-  return /* @__PURE__ */ jsx(
-    MaybeComposerProvider,
-    {
-      enabled: !!(composerPreview || isComposerPreview()),
-      layoutNodeId: nodeId,
-      children: renderComponent(componentId, props, slots, {
-        layoutNodeId: nodeId
-      })
-    }
-  );
+  return /* @__PURE__ */ jsx(MaybeComposerProvider, { enabled: !!composerPreview, layoutNodeId: nodeId, children: renderComponent(componentId, props, slots, {
+    layoutNodeId: nodeId
+  }) });
 }
 function AmplifyRendererInner({
   renderComponent,
@@ -4012,6 +4120,7 @@ function AmplifyRendererInner({
   composerPreview
 }) {
   const clientHook = useAmplifyUp();
+  const composerPreviewFlag = useComposerPreviewFlag(!!composerPreview);
   const pageConfig = serverPageConfig || clientHook.pageConfig || null;
   const loading = serverPageConfig ? false : clientHook.loading;
   const error = serverPageConfig ? null : clientHook.error;
@@ -4364,7 +4473,7 @@ function AmplifyRendererInner({
                 props: nodeRenderProps(node),
                 slots: slotsToPass,
                 renderComponent,
-                composerPreview
+                composerPreview: composerPreviewFlag
               }
             )
           }
@@ -4377,12 +4486,13 @@ function AmplifyRendererInner({
   if (layoutTree.length === 0) {
     return /* @__PURE__ */ jsx("main", { children: emptyComponent || /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 py-16", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "No content configured for this page." }) }) });
   }
-  return /* @__PURE__ */ jsx(ComposerProvider, { children: /* @__PURE__ */ jsx("main", { children: composerPreview || isComposerPreview() ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ComposerProvider, { children: /* @__PURE__ */ jsx("main", { children: composerPreviewFlag ? /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot-id": "main",
       "data-amplifyup-slot": "main",
       "data-slot-source": "page",
+      "data-slot-state": layoutTree.length === 0 ? "empty" : "filled",
       "data-slot-empty": layoutTree.length === 0 ? "true" : void 0,
       children: layoutTree.map((node) => /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(node) }, node.id))
     }
@@ -4483,16 +4593,34 @@ function EmptySlotHint({
     }
   );
 }
-function defaultPreviewCanvas() {
+var ComposerLayoutStatusContext = createContext({
+  ready: true
+});
+function ComposerLayoutStatusProvider({
+  ready,
+  children
+}) {
+  return /* @__PURE__ */ jsx(ComposerLayoutStatusContext.Provider, { value: { ready }, children });
+}
+function useComposerLayoutStatus() {
+  return useContext(ComposerLayoutStatusContext);
+}
+function previewPageSlot(state) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot-id": "main",
       "data-amplifyup-slot": "main",
       "data-slot-source": "page",
-      "data-slot-empty": "true",
-      style: { minHeight: "50vh", width: "100%", display: "block", position: "relative" },
-      children: /* @__PURE__ */ jsx(EmptySlotHint, {})
+      "data-slot-state": state,
+      "data-slot-empty": state === "empty" ? "true" : void 0,
+      style: {
+        minHeight: state === "empty" ? "50vh" : void 0,
+        width: "100%",
+        display: "block",
+        position: "relative"
+      },
+      children: state === "empty" ? /* @__PURE__ */ jsx(EmptySlotHint, {}) : null
     }
   );
 }
@@ -4526,7 +4654,7 @@ function AmplifyPageContent({
   errorComponent
 }) {
   const client = useAmplifyUp();
-  const preview = forceComposerPreview || isComposerPreview();
+  const preview = useComposerPreviewFlag(forceComposerPreview);
   const clientLayout = hasAmplifyLayout(client.pageConfig) ? client.pageConfig : null;
   const serverLayout = hasAmplifyLayout(pageConfigProp) ? pageConfigProp : null;
   let pageConfig = serverLayout ?? clientLayout;
@@ -4539,20 +4667,26 @@ function AmplifyPageContent({
   }
   const loading = !hasAmplifyLayout(pageConfig) && client.loading;
   const error = hasAmplifyLayout(pageConfig) ? null : pageConfigProp ? null : client.error;
-  const previewCanvas = previewEmptyComponent ?? defaultPreviewCanvas();
-  const previewLoading = previewLoadingComponent ?? previewCanvas;
+  const previewEmpty = previewEmptyComponent ?? previewPageSlot("empty");
+  const previewLoading = previewLoadingComponent ?? previewPageSlot("loading");
   if (preview) {
-    return /* @__PURE__ */ jsx(
+    const ready = previewLayoutReady({
+      clientLoading: client.loading,
+      hasClientLayout: !!clientLayout});
+    if (!ready) {
+      return /* @__PURE__ */ jsx(ComposerLayoutStatusProvider, { ready: false, children: previewLoading });
+    }
+    return /* @__PURE__ */ jsx(ComposerLayoutStatusProvider, { ready: true, children: /* @__PURE__ */ jsx(
       AmplifyRenderer,
       {
         pageConfig: pageConfig ?? void 0,
         renderComponent,
         composerPreview: true,
         loadingComponent: loadingComponent ?? previewLoading,
-        emptyComponent: emptyComponent ?? previewCanvas,
-        errorComponent: errorComponent ?? (() => previewCanvas)
+        emptyComponent: emptyComponent ?? previewEmpty,
+        errorComponent: errorComponent ?? (() => previewEmpty)
       }
-    );
+    ) });
   }
   if (loading) {
     return loadingComponent ? /* @__PURE__ */ jsx(Fragment, { children: loadingComponent }) : null;
@@ -4576,6 +4710,24 @@ function AmplifyPageContent({
   );
 }
 
+// src/slot-state.ts
+function resolveSlotState(opts) {
+  if (!opts.layoutReady) return "loading";
+  return opts.hasContent ? "filled" : "empty";
+}
+function slotShowsAddComponent(state) {
+  return state === "empty";
+}
+function slotStateFromEl(el) {
+  if (!el) return null;
+  const explicit = el.getAttribute("data-slot-state");
+  if (explicit === "loading" || explicit === "empty" || explicit === "filled") {
+    return explicit;
+  }
+  if (el.getAttribute("data-slot-empty") === "true") return "empty";
+  return null;
+}
+
 // src/composer-edit-mode.ts
 function isComposerEditMode() {
   if (typeof window === "undefined") return false;
@@ -4617,7 +4769,12 @@ function Slot({
     return null;
   }
   const slotContent = context.slots?.[name];
-  const isEmpty = !slotContent;
+  const { ready: layoutReady } = useComposerLayoutStatus();
+  const slotState = resolveSlotState({
+    layoutReady,
+    hasContent: !!slotContent
+  });
+  const isEmpty = slotState === "empty";
   const isEditorMode = typeof window !== "undefined" && // Check for preview mode flag set by proxy
   (window.__AMPLIFYUP_PREVIEW_MODE__ === true || // Check URL query params
   new URLSearchParams(window.location.search).get("preview") === "true" || new URLSearchParams(window.location.search).get("visualEditor") === "true" || // Check if in iframe from orchestrator (check referrer hostname/port)
@@ -4633,6 +4790,7 @@ function Slot({
     `slot:${context.layoutNodeId || ""}:${name}`,
     `[Slot:${name}]`,
     {
+      slotState,
       isEmpty,
       isEditorMode,
       availableSlotKeys: context.slots ? Object.keys(context.slots) : []
@@ -4645,6 +4803,7 @@ function Slot({
       "data-slot-name": name,
       "data-slot-id": name,
       "data-amplifyup-slot": name,
+      "data-slot-state": slotState,
       "data-slot-empty": isEmpty ? "true" : void 0,
       "data-parent-node-id": context.layoutNodeId || void 0,
       "data-parent-component-id": context.componentId || void 0,
@@ -4654,7 +4813,7 @@ function Slot({
         // Only add position relative for overlay positioning in editor mode
         position: isEditorMode ? "relative" : void 0
       },
-      children: isEmpty ? isEditorMode ? /* @__PURE__ */ jsx(EmptySlotHint, { compact: true }) : /* @__PURE__ */ jsx(
+      children: slotState === "loading" ? null : isEmpty ? isEditorMode ? /* @__PURE__ */ jsx(EmptySlotHint, { compact: true }) : /* @__PURE__ */ jsx(
         "div",
         {
           className: "amplifyup-slot-placeholder",
@@ -4948,7 +5107,7 @@ function ComposerInlineHtml({
       fieldRef
     });
   };
-  return React2.createElement(Tag, {
+  return React3.createElement(Tag, {
     ref: elRef,
     className,
     "data-amplifyup-field": name,
@@ -5005,6 +5164,18 @@ function warnNotScalarField(component, field, fieldValue) {
   }
   return false;
 }
+function assertNamedEnvelope(component, field) {
+  if (process.env.NODE_ENV === "production") return;
+  if (!field || typeof field !== "object" || Array.isArray(field)) return;
+  const rec = field;
+  if (!("value" in rec)) return;
+  if (typeof rec.name === "string" && rec.name) return;
+  throw new Error(
+    `[AmplifyUp SDK] ${component} received an envelope-shaped object with a \`value\` but no \`name\` \u2014 a partial envelope was manufactured upstream (keys: ${Object.keys(
+      rec
+    ).join(", ")}). Find the producer; do not strip or rebuild envelopes.`
+  );
+}
 var warnedReadOnlyFields = /* @__PURE__ */ new Set();
 function warnReadOnlyRowField(name) {
   if (process.env.NODE_ENV === "production") return;
@@ -5040,6 +5211,7 @@ function Field(props) {
   const hasField = isFieldEnvelope(field);
   const hasValue = hasOwnProp(props, "value");
   const { editName, fieldValue, ref } = useBoundField(field, value, name, "Field");
+  assertNamedEnvelope("Field", field);
   warnProjectionProps("Field", hasField, hasValue, name);
   if (warnNotScalarField("Field", field, fieldValue)) {
     return null;
@@ -5100,6 +5272,7 @@ function RichText(props) {
     name,
     "RichText"
   );
+  assertNamedEnvelope("RichText", field);
   if (!hasField && !hasValueProp && !name) {
     return null;
   }
@@ -5211,6 +5384,7 @@ function Image(props) {
     ...imgProps
   } = props;
   const context = useContext(ComponentContext);
+  assertNamedEnvelope("Image", field);
   const coerced = coerceImageField(field, value, name);
   const boundField = coerced.field;
   const hasField = isFieldEnvelope(boundField);
@@ -5446,6 +5620,13 @@ function AmplifyUpProvider({
           description: "This page has not been published yet.",
           layoutTree: []
         };
+        if (result.pageConfig) {
+          sdk.applyResolvedPageData(
+            result.pageConfig.pageData || null,
+            result.pageConfig.route,
+            extractRouteParams(result.pageConfig.route, actualRoute)
+          );
+        }
         setInitialized(true);
         setSource((prev) => prev === result.source ? prev : result.source);
         setMeta(
@@ -5458,13 +5639,6 @@ function AmplifyUpProvider({
           }
           return nextConfig;
         });
-        if (result.pageConfig) {
-          sdk.applyResolvedPageData(
-            result.pageConfig.pageData || null,
-            result.pageConfig.route,
-            extractRouteParams(result.pageConfig.route, actualRoute)
-          );
-        }
         loadedRouteRef.current = actualRoute;
       } catch (err) {
         if (cancelled) return;
@@ -5491,6 +5665,39 @@ function AmplifyUpProvider({
     config.clientPersonalization,
     pageContextKey
   ]);
+  useEffect(() => {
+    const applyLayoutTree = (layoutTree) => {
+      if (!Array.isArray(layoutTree)) return;
+      setPageConfig((prev) => {
+        const next = envelopePageConfig({
+          ...prev || {
+            id: "patched",
+            route: getActualRoute(),
+            title: "",
+            layoutTree: []
+          },
+          layoutTree
+        });
+        return next;
+      });
+      setLoading(false);
+    };
+    const onMessage = (event) => {
+      if (event.data?.type === "AMPLIFYUP_LAYOUT_PATCH") {
+        applyLayoutTree(event.data.layoutTree);
+      }
+    };
+    const onCustom = (event) => {
+      const detail = event.detail || {};
+      applyLayoutTree(detail.layoutTree);
+    };
+    window.addEventListener("message", onMessage);
+    window.addEventListener("amplifyup:layout-patch", onCustom);
+    return () => {
+      window.removeEventListener("message", onMessage);
+      window.removeEventListener("amplifyup:layout-patch", onCustom);
+    };
+  }, []);
   return /* @__PURE__ */ jsx(
     AmplifyUpContext.Provider,
     {
@@ -5507,6 +5714,6 @@ function useAmplifyUp() {
   return context;
 }
 
-export { AmplifyPageContent, AmplifyRenderer, AmplifyUpProvider, ComponentContextProvider, ComposerProvider, Field, Image, MaybeComposerProvider, QueryContentError, RichText, SelectVariantsError, Slot, attachFieldEnvelopes, composerStoreKey, envelopeListRows, isBrandedFields, isComposerPreview, isFieldEnvelope, isPreviewRequest, isReadOnlyRowField, isWorkingContentRequest, listOwnerFromSpec, nextPageSpec, queryContent, searchSpec, selectVariants, toFieldEnvelopes, useAmplifyUp };
+export { AmplifyPageContent, AmplifyRenderer, AmplifyUpProvider, ComponentContextProvider, ComposerLayoutStatusProvider, ComposerProvider, Field, Image, MaybeComposerProvider, QueryContentError, RichText, SelectVariantsError, Slot, attachFieldEnvelopes, composerStoreKey, envelopeListRows, isBrandedFields, isComposerPreview, isFieldEnvelope, isPreviewRequest, isReadOnlyRowField, isWorkingContentRequest, listOwnerFromSpec, nextPageSpec, queryContent, resolveSlotState, searchSpec, selectVariants, slotShowsAddComponent, slotStateFromEl, toFieldEnvelopes, useAmplifyUp };
 //# sourceMappingURL=react.mjs.map
 //# sourceMappingURL=react.mjs.map