@amplifyup/sdk 0.1.13 → 0.1.15

package/dist/react.d.mts

@@ -21,6 +21,11 @@ interface AmplifyPageContentProps {
     renderComponent: RenderComponentFn;
     /** Optional pre-fetched layout (e.g. from server in preview mode). */
     pageConfig?: PageConfig | null;
+    /**
+     * Force Composer mode (e.g. from SSR `?preview=true`). Ensures the page slot
+     * wrapper exists even before client-side preview detection runs.
+     */
+    forceComposerPreview?: boolean;
     /** Shown while layout loads in Composer (default: empty main canvas). */
     previewLoadingComponent?: ReactNode;
     /** Shown when no layout components exist yet in Composer (default: empty main canvas). */
@@ -33,7 +38,7 @@ interface AmplifyPageContentProps {
  * Hybrid page wrapper: Composer shows only the AmplifyUp layout canvas;
  * normal visits show the configured layout or your native `fallback`.
  */
-declare function AmplifyPageContent({ fallback, renderComponent, pageConfig: pageConfigProp, previewLoadingComponent, previewEmptyComponent, loadingComponent, emptyComponent, errorComponent, }: AmplifyPageContentProps): react_jsx_runtime.JSX.Element | null;
+declare function AmplifyPageContent({ fallback, renderComponent, pageConfig: pageConfigProp, forceComposerPreview, previewLoadingComponent, previewEmptyComponent, loadingComponent, emptyComponent, errorComponent, }: AmplifyPageContentProps): react_jsx_runtime.JSX.Element | null;
 
 /**
  * ComponentContextProvider - Provides slots and props to child components

package/dist/react.d.ts

@@ -21,6 +21,11 @@ interface AmplifyPageContentProps {
     renderComponent: RenderComponentFn;
     /** Optional pre-fetched layout (e.g. from server in preview mode). */
     pageConfig?: PageConfig | null;
+    /**
+     * Force Composer mode (e.g. from SSR `?preview=true`). Ensures the page slot
+     * wrapper exists even before client-side preview detection runs.
+     */
+    forceComposerPreview?: boolean;
     /** Shown while layout loads in Composer (default: empty main canvas). */
     previewLoadingComponent?: ReactNode;
     /** Shown when no layout components exist yet in Composer (default: empty main canvas). */
@@ -33,7 +38,7 @@ interface AmplifyPageContentProps {
  * Hybrid page wrapper: Composer shows only the AmplifyUp layout canvas;
  * normal visits show the configured layout or your native `fallback`.
  */
-declare function AmplifyPageContent({ fallback, renderComponent, pageConfig: pageConfigProp, previewLoadingComponent, previewEmptyComponent, loadingComponent, emptyComponent, errorComponent, }: AmplifyPageContentProps): react_jsx_runtime.JSX.Element | null;
+declare function AmplifyPageContent({ fallback, renderComponent, pageConfig: pageConfigProp, forceComposerPreview, previewLoadingComponent, previewEmptyComponent, loadingComponent, emptyComponent, errorComponent, }: AmplifyPageContentProps): react_jsx_runtime.JSX.Element | null;
 
 /**
  * ComponentContextProvider - Provides slots and props to child components

package/dist/react.js

@@ -1225,6 +1225,11 @@ Available Console Commands:
               `[data-node-id="${nodeId}"]`
             );
           }
+          if (!element && slotName) {
+            element = document.querySelector(
+              `[data-slot-source="page"][data-slot-id="${slotName}"], [data-slot-source="page"][data-amplifyup-slot="${slotName}"]`
+            );
+          }
           if (!element && slotName) {
             element = document.querySelector(
               `[data-amplifyup-slot="${slotName}"], [data-slot-id="${slotName}"]`
@@ -1257,12 +1262,28 @@ Available Console Commands:
               height: rect.height
             };
             if (window.parent && window.parent !== window) {
+              const hierarchyEls = this.buildComponentHierarchy(element);
               window.parent.postMessage({
                 type: "ELEMENT_POSITION",
                 componentId: componentId || null,
                 slotName: slotName || null,
                 nodeId: nodeId || null,
-                isPageSlot: !!isPageSlot,
+                isPageSlot: !!isPageSlot || element.getAttribute("data-slot-source") === "page",
+                hierarchy: hierarchyEls.map((el, index) => {
+                  const elComponentId = el.getAttribute("data-amplifyup-component") || el.getAttribute("data-component-id");
+                  const elSlotName = el.getAttribute("data-amplifyup-slot") || el.getAttribute("data-slot-id");
+                  const isSlot = !elComponentId && !!elSlotName;
+                  const pageSlot = isSlot && el.getAttribute("data-slot-source") === "page";
+                  return {
+                    index,
+                    componentId: elComponentId,
+                    componentName: pageSlot ? "Page" : el.getAttribute("data-component-name"),
+                    slotName: isSlot ? elSlotName : null,
+                    isSlot,
+                    isPageSlot: pageSlot,
+                    nodeId: el.getAttribute("data-node-id") || (isSlot ? el.getAttribute("data-parent-node-id") : null)
+                  };
+                }),
                 position,
                 bounds
               }, "*");
@@ -1819,13 +1840,24 @@ Available Console Commands:
   buildComponentHierarchy(element) {
     const hierarchy = [];
     let current = element;
+    let sawPageSlot = false;
     while (current) {
       if (current.hasAttribute("data-amplifyup-component") || current.hasAttribute("data-component-id") || current.hasAttribute("data-amplifyup-slot") || current.hasAttribute("data-slot-id")) {
         hierarchy.push(current);
+        if (current.getAttribute("data-slot-source") === "page") {
+          sawPageSlot = true;
+        }
       }
       current = current.parentElement;
     }
-    return hierarchy.reverse();
+    const ordered = hierarchy.reverse();
+    if (!sawPageSlot) {
+      const pageSlot = element.closest('[data-slot-source="page"]');
+      if (pageSlot && !ordered.includes(pageSlot)) {
+        ordered.unshift(pageSlot);
+      }
+    }
+    return ordered;
   }
   /**
    * Send selection message to orchestrator (includes element bounds for overlay positioning).
@@ -1983,7 +2015,8 @@ function AmplifyRenderer({
   pageConfig: serverPageConfig,
   loadingComponent,
   errorComponent,
-  emptyComponent
+  emptyComponent,
+  composerPreview
 }) {
   const clientHook = useAmplifyUp();
   const pageConfig = serverPageConfig || clientHook.pageConfig || null;
@@ -2042,7 +2075,9 @@ function AmplifyRenderer({
     if (!pageConfig) {
       return;
     }
-    if (!pageConfig.layoutTree || Array.isArray(pageConfig.layoutTree) && pageConfig.layoutTree.length === 0) {
+    const rawTree2 = pageConfig.layoutTree;
+    const normalizedTree = Array.isArray(rawTree2) ? rawTree2 : rawTree2 && typeof rawTree2 === "object" && rawTree2.componentId ? [rawTree2] : [];
+    if (normalizedTree.length === 0) {
       if (typeof window !== "undefined" && window.parent && window.parent !== window) {
         window.parent.postMessage({
           type: "COMPONENT_TREE",
@@ -2054,6 +2089,7 @@ function AmplifyRenderer({
     const convertLayoutTreeToComponentTree = (nodes, parentId = null) => {
       const result = [];
       nodes.forEach((node) => {
+        if (!node) return;
         const treeNode = {
           id: node.id,
           componentId: node.componentId,
@@ -2064,8 +2100,9 @@ function AmplifyRenderer({
         };
         if (node.slots && node.slots.length > 0) {
           node.slots.forEach((slot) => {
-            if (slot.children && slot.children.length > 0) {
-              const slotChildren = convertLayoutTreeToComponentTree(slot.children, node.id);
+            const kids = Array.isArray(slot?.children) ? slot.children : [];
+            if (kids.length > 0) {
+              const slotChildren = convertLayoutTreeToComponentTree(kids, node.id);
               treeNode.children.push(...slotChildren);
             }
           });
@@ -2074,7 +2111,7 @@ function AmplifyRenderer({
       });
       return result;
     };
-    const layoutTree2 = pageConfig.layoutTree;
+    const layoutTree2 = normalizedTree;
     const componentTree = convertLayoutTreeToComponentTree(layoutTree2);
     const describeLayoutTree = (nodes, depth = 0) => {
       if (!nodes?.length) return "";
@@ -2247,11 +2284,12 @@ function AmplifyRenderer({
             childrenCount: childrenToRender.length
           });
         } else {
-          childrenToRender = slot.children;
+          childrenToRender = Array.isArray(slot.children) ? slot.children : [];
           console.log(`[AmplifyRenderer] Using direct children for slot ${slot.slotId}`, {
             childrenCount: childrenToRender.length
           });
         }
+        const safeChildren = Array.isArray(childrenToRender) ? childrenToRender : [];
         slotChildren[slot.slotId] = /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -2260,7 +2298,7 @@ function AmplifyRenderer({
             "data-zone-id": slot.zoneId || void 0,
             "data-parent-node-id": node.id,
             "data-parent-component-id": node.componentId,
-            children: childrenToRender.map((child) => renderNode(child))
+            children: safeChildren.filter(Boolean).map((child) => renderNode(child))
           },
           slot.slotId
         );
@@ -2284,7 +2322,7 @@ function AmplifyRenderer({
   if (layoutTree.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("main", { children: emptyComponent || /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto px-4 py-16", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "No content configured for this page." }) }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("main", { children: isComposerPreview() ? /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("main", { children: composerPreview || isComposerPreview() ? /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       "data-slot-id": "main",
@@ -2315,6 +2353,7 @@ function AmplifyPageContent({
   fallback,
   renderComponent,
   pageConfig: pageConfigProp,
+  forceComposerPreview = false,
   previewLoadingComponent,
   previewEmptyComponent,
   loadingComponent,
@@ -2322,7 +2361,7 @@ function AmplifyPageContent({
   errorComponent
 }) {
   const client = useAmplifyUp();
-  const preview = isComposerPreview();
+  const preview = forceComposerPreview || isComposerPreview();
   const pageConfig = pageConfigProp ?? client.pageConfig;
   const loading = pageConfigProp ? false : client.loading;
   const error = pageConfigProp ? null : client.error;
@@ -2334,6 +2373,7 @@ function AmplifyPageContent({
       {
         pageConfig: pageConfig ?? void 0,
         renderComponent,
+        composerPreview: true,
         loadingComponent: loadingComponent ?? previewLoading,
         emptyComponent: emptyComponent ?? previewCanvas,
         errorComponent: errorComponent ?? (() => previewCanvas)