@amplifyup/sdk 0.1.78 → 0.2.0

package/dist/react.mjs

@@ -4114,711 +4114,159 @@ function MaybeComposerProvider({
 }) {
   return /* @__PURE__ */ jsx(ComposerProvider, { enabled, children: /* @__PURE__ */ jsx(ComposerNodeContext.Provider, { value: enabled ? layoutNodeId : void 0, children }) });
 }
-function nodeRenderProps(node) {
-  const settings = node.settings || {};
-  const hydrated = hydratePageResourceProps(
-    node.props || {},
-    getPageResourceFields()
-  );
-  const fields = hydrated.fields;
-  const branded = isBrandedFields(fields) ? fields : brandFields(
-    fields && typeof fields === "object" ? fields : {}
+function AddComponentIcon({ size = 28 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "3",
+            y: "3",
+            width: "18",
+            height: "18",
+            rx: "4",
+            stroke: "currentColor",
+            strokeWidth: "1.75"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M12 8v8M8 12h8",
+            stroke: "currentColor",
+            strokeWidth: "1.75",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
   );
-  return {
-    ...settings,
-    ...hydrated,
-    fields: branded
-  };
 }
-var ComponentRenderBoundary = class extends 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__ */ jsxs(
-          "div",
+function EmptySlotHint({
+  label = "Click here to Add Component",
+  compact = false
+}) {
+  const iconSize = compact ? 20 : 28;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "amplifyup-slot-placeholder",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: compact ? 8 : 12,
+        minHeight: compact ? 60 : void 0,
+        width: "100%",
+        pointerEvents: "none",
+        textAlign: "center",
+        boxSizing: "border-box",
+        padding: compact ? "12px 8px" : "24px 16px"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
           {
-            "data-amplifyup-render-error": "",
-            "data-component-id": this.props.componentId,
-            "data-node-id": this.props.nodeId,
+            className: "amplifyup-slot-placeholder-icon",
             style: {
-              margin: "1rem 0",
-              padding: "0.75rem 1rem",
-              border: "1px solid #fca5a5",
-              borderRadius: "0.5rem",
-              background: "#fef2f2",
-              color: "#991b1b",
-              fontSize: "0.875rem"
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: compact ? 36 : 48,
+              height: compact ? 36 : 48,
+              borderRadius: 12,
+              border: "1.5px dashed currentColor",
+              opacity: 0.9
             },
-            children: [
-              'Component "',
-              this.props.componentId,
-              '" failed to render:',
-              " ",
-              this.state.error.message
-            ]
+            children: /* @__PURE__ */ jsx(AddComponentIcon, { size: iconSize })
           }
-        );
-      }
-      return null;
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "amplifyup-slot-placeholder-label",
+            style: {
+              fontSize: compact ? 13 : 15,
+              fontWeight: 600,
+              lineHeight: 1.3,
+              letterSpacing: "0.01em"
+            },
+            children: label
+          }
+        )
+      ]
     }
-    return this.props.children;
+  );
+}
+var ComposerLayoutStatusContext = createContext({
+  ready: true
+});
+function ComposerLayoutStatusProvider({
+  ready,
+  children
+}) {
+  return /* @__PURE__ */ jsx(ComposerLayoutStatusContext.Provider, { value: { ready }, children });
+}
+function useComposerLayoutStatus() {
+  return useContext(ComposerLayoutStatusContext);
+}
+
+// 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;
   }
-};
-function NodeWithFields({
-  nodeId,
-  componentId,
-  props,
+  if (el.getAttribute("data-slot-empty") === "true") return "empty";
+  return null;
+}
+
+// src/composer-edit-mode.ts
+function isComposerEditMode() {
+  if (typeof window === "undefined") return false;
+  return isComposerPreview() && window.__AMPLIFYUP_EVENT_SELECTION__ !== true;
+}
+function subscribeComposerEdit(onStoreChange) {
+  if (typeof window === "undefined") return () => {
+  };
+  window.addEventListener("amplifyup:composer-edit", onStoreChange);
+  return () => window.removeEventListener("amplifyup:composer-edit", onStoreChange);
+}
+function getComposerEditModeServer() {
+  return false;
+}
+var ComponentContext = createContext(null);
+function ComponentContextProvider({
+  children,
   slots,
-  renderComponent,
-  composerPreview
-}) {
-  return /* @__PURE__ */ jsx(MaybeComposerProvider, { enabled: !!composerPreview, layoutNodeId: nodeId, children: renderComponent(componentId, props, slots, {
-    layoutNodeId: nodeId
-  }) });
-}
-function AmplifyRendererInner({
-  renderComponent,
-  pageConfig: serverPageConfig,
-  loadingComponent,
-  errorComponent,
-  emptyComponent,
-  composerPreview
+  props,
+  layoutNodeId,
+  componentId
 }) {
-  const clientHook = useAmplifyUp();
-  useRegisterPageContent(!serverPageConfig);
-  const composerPreviewFlag = useComposerPreviewFlag(!!composerPreview);
-  const pageConfig = serverPageConfig || clientHook.pageConfig || null;
-  const loading = serverPageConfig ? false : clientHook.loading;
-  const error = serverPageConfig ? null : clientHook.error;
-  const contentSource = clientHook.source;
-  const [variantCache, setVariantCache] = useState({});
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      if (window.__AMPLIFYUP_PREVIEW_MODE__ === true) {
-        return;
-      }
-      if (window.location.pathname.includes("/api/pages/proxy")) {
-        return;
-      }
-      if (window.self !== window.top) {
-        return;
-      }
-      const urlParams = new URLSearchParams(window.location.search);
-      if (urlParams.get("preview") === "true" || urlParams.get("visualEditor") === "true") {
-        return;
-      }
-      if (window.location.href.includes("preview=true") || window.location.href.includes("visualEditor=true")) {
-        return;
-      }
-    }
-    if (pageConfig && pageConfig.id !== "default") {
-      trackContentView(pageConfig.id, "page", {
-        route: pageConfig.route,
-        title: pageConfig.title
-      });
-    }
-  }, [pageConfig]);
-  useEffect(() => {
-    if (!pageConfig?.eventTracking?.length) return;
-    const sdk = getSDK();
-    if (!sdk.isInitialized()) return;
-    sdk.setupEventTracking(pageConfig.eventTracking);
-    const t1 = window.setTimeout(() => {
-      sdk.setupComponentViewTracking();
-      refreshEventTracking();
-    }, 200);
-    const t2 = window.setTimeout(() => {
-      sdk.setupComponentViewTracking();
-      refreshEventTracking();
-    }, 1e3);
-    return () => {
-      window.clearTimeout(t1);
-      window.clearTimeout(t2);
-    };
-  }, [pageConfig?.id, pageConfig?.eventTracking]);
-  useEffect(() => {
-    if (!pageConfig) return;
-    const t = window.setTimeout(() => {
-      getSDK().setupComponentViewTracking();
-      refreshEventTracking();
-    }, 100);
-    return () => window.clearTimeout(t);
-  }, [variantCache, pageConfig?.id]);
-  useEffect(() => {
-    if (!isComposerPreview()) {
-      return;
-    }
-    if (!pageConfig) {
-      return;
-    }
-    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",
-          tree: []
-        }, "*");
-      }
-      return;
-    }
-    const convertLayoutTreeToComponentTree = (nodes, parentId = null) => {
-      const result = [];
-      nodes.forEach((node) => {
-        if (!node) return;
-        const treeNode = {
-          id: node.id,
-          componentId: node.componentId,
-          componentName: node.componentId,
-          // Will be enhanced with actual name if available
-          parentId,
-          children: []
-        };
-        if (node.slots && node.slots.length > 0) {
-          node.slots.forEach((slot) => {
-            const kids = Array.isArray(slot?.children) ? slot.children : [];
-            if (kids.length > 0) {
-              const slotChildren = convertLayoutTreeToComponentTree(kids, node.id);
-              treeNode.children.push(...slotChildren);
-            }
-          });
-        }
-        result.push(treeNode);
-      });
-      return result;
-    };
-    const layoutTree2 = normalizedTree;
-    const componentTree = convertLayoutTreeToComponentTree(layoutTree2);
-    const describeLayoutTree = (nodes, depth = 0) => {
-      if (!nodes?.length) return "";
-      const indent = "  ".repeat(depth);
-      return nodes.map((n) => {
-        const slotsDesc = (n.slots || []).map((s) => {
-          const childCount = Array.isArray(s.children) ? s.children.length : 0;
-          const childrenDesc = childCount > 0 ? describeLayoutTree(s.children || [], depth + 1) : "";
-          return `${indent}  slot "${s.slotId || s.slotName || "?"}" (${childCount} children)${childrenDesc ? "\n" + childrenDesc : ""}`;
-        }).join("\n");
-        return `${indent}- ${n.id} (${n.componentId || "?"})${slotsDesc ? "\n" + slotsDesc : ""}`;
-      }).join("\n");
-    };
-    sdkDebugOnce(
-      `layoutTree:${pageConfig?.id || ""}:${pageConfig?.route || ""}`,
-      "[AmplifyRenderer] layoutTree received:\n%s",
-      describeLayoutTree(layoutTree2)
-    );
-    if (typeof window !== "undefined" && window.parent && window.parent !== window) {
-      const message = {
-        type: "COMPONENT_TREE",
-        tree: componentTree
-      };
-      window.parent.postMessage(message, "*");
-      sdkDebug(
-        "[AmplifyRenderer] Sent component tree from layoutTree:",
-        componentTree.length,
-        "root components"
-      );
-    }
-  }, [pageConfig]);
-  useEffect(() => {
-    if (!pageConfig?.layoutTree || !pageConfig.layoutId) return;
-    const roots = pageConfig.layoutTree;
-    const fromEdge = contentSource === "edge" || roots.some((n) => n._contentSource === "edge");
-    if (fromEdge) return;
-    const sdk = getSDK();
-    const instanceId = sdk.getInstanceId();
-    const decisionApiUrl = sdk.getDecisionApiUrl();
-    const orchestratorUrl = sdk.getOrchestratorUrl();
-    if (!decisionApiUrl && !orchestratorUrl || !instanceId) return;
-    const fetchVariants = async () => {
-      const nodes = pageConfig.layoutTree;
-      const newCache = {};
-      const findZonedSlots = (nodeList) => {
-        const results = [];
-        for (const node of nodeList) {
-          if (node.slots) {
-            for (const slot of node.slots) {
-              if (slot.zoneId && slot.variants) {
-                const key = `${node.id}-${slot.slotId}`;
-                results.push({ node, slot, key });
-              }
-            }
-          }
-        }
-        return results;
-      };
-      const zonedSlots = findZonedSlots(nodes);
-      await Promise.all(
-        zonedSlots.map(async ({ node, slot, key }) => {
-          try {
-            let personalizationUrl;
-            if (decisionApiUrl) {
-              const url = new URL(decisionApiUrl);
-              url.searchParams.set("instanceId", instanceId);
-              const zoneId = slot.zoneId;
-              if (zoneId) {
-                url.searchParams.set("zoneId", zoneId);
-              }
-              const campaignId = slot.campaignId;
-              if (campaignId) {
-                url.searchParams.set("campaignId", campaignId);
-              }
-              personalizationUrl = url.toString();
-            } else if (orchestratorUrl) {
-              personalizationUrl = `${orchestratorUrl}/api/personalization/variant?instanceId=${encodeURIComponent(instanceId)}&layoutId=${encodeURIComponent(pageConfig.layoutId)}&slotId=${encodeURIComponent(slot.slotId)}&nodeId=${encodeURIComponent(node.id)}`;
-            } else {
-              return;
-            }
-            const response = await fetch(personalizationUrl);
-            if (response.ok) {
-              const data = await response.json();
-              if (data.variantId && data.componentTree) {
-                newCache[key] = {
-                  variantId: data.variantId,
-                  children: data.componentTree
-                };
-                if (typeof window !== "undefined") {
-                  if (window.__AMPLIFYUP_PREVIEW_MODE__ === true) {
-                    return;
-                  }
-                  if (window.location.pathname.includes("/api/pages/proxy")) {
-                    return;
-                  }
-                  if (window.self !== window.top) {
-                    return;
-                  }
-                }
-                sdk.track("Zone Impression", {
-                  zoneId: slot.zoneId,
-                  variantId: data.variantId,
-                  layoutId: pageConfig.layoutId,
-                  route: pageConfig.route
-                });
-              } else {
-                const defaultVariant = slot.variants?.find((v) => v.isDefault);
-                if (defaultVariant) {
-                  newCache[key] = {
-                    variantId: defaultVariant.variantId,
-                    children: defaultVariant.children
-                  };
-                }
-              }
-            }
-          } catch (err) {
-            console.error(`Error fetching variant for slot ${key}:`, err);
-            const defaultVariant = slot.variants?.find((v) => v.isDefault);
-            if (defaultVariant) {
-              newCache[key] = {
-                variantId: defaultVariant.variantId,
-                children: defaultVariant.children
-              };
-            }
-          }
-        })
-      );
-      setVariantCache(newCache);
-    };
-    fetchVariants();
-  }, [pageConfig?.layoutTree, pageConfig?.layoutId, pageConfig?.route, contentSource]);
-  if (loading) {
-    return /* @__PURE__ */ jsx(Fragment, { children: loadingComponent || /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-gray-50", children: /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 py-16", children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-8 bg-gray-200 rounded w-1/4 mb-4" }),
-      /* @__PURE__ */ jsx("div", { className: "h-4 bg-gray-200 rounded w-1/2 mb-8" }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-64 bg-gray-200 rounded" }),
-        /* @__PURE__ */ jsx("div", { className: "h-32 bg-gray-200 rounded" })
-      ] })
-    ] }) }) }) });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsx(Fragment, { children: errorComponent ? errorComponent(error) : /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-gray-50", children: /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 py-16", children: /* @__PURE__ */ jsxs("div", { className: "bg-red-50 border border-red-200 rounded-lg p-6", children: [
-      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold text-red-900 mb-2", children: "Error Loading Page" }),
-      /* @__PURE__ */ jsx("p", { className: "text-red-700", children: error })
-    ] }) }) }) });
-  }
-  if (!pageConfig) {
-    return null;
-  }
-  pageConfig.layout?.header !== false;
-  pageConfig.layout?.footer !== false;
-  const renderNode = (node) => {
-    const zoneIdFromProps = node.componentId === "AmplifyZone" ? String(node.props?.zoneId || "") : "";
-    if (node.componentId === "AmplifyZone") {
-      const contentSlot = node.slots?.find((s) => s.slotId === "content") || node.slots?.[0];
-      const children = Array.isArray(contentSlot?.children) ? contentSlot.children : [];
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          "data-node-id": node.id,
-          "data-amplifyup-node": "",
-          "data-amplifyup-component": "AmplifyZone",
-          "data-amplifyup-zone": zoneIdFromProps || void 0,
-          "data-zone-id": zoneIdFromProps || void 0,
-          children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              "data-slot-id": "content",
-              "data-amplifyup-slot": "content",
-              "data-parent-node-id": node.id,
-              "data-parent-component-id": "AmplifyZone",
-              children: children.filter(Boolean).map((child) => /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(child) }, child.id))
-            }
-          )
-        }
-      );
-    }
-    let slotChildren = {};
-    sdkDebugOnce(`node:${node.id}`, `[AmplifyRenderer] Rendering node ${node.id} (${node.componentId})`, {
-      hasSlots: !!(node.slots && node.slots.length > 0),
-      slotCount: node.slots?.length || 0,
-      slots: node.slots?.map((s) => ({ slotId: s.slotId, zoneId: s.zoneId, childrenCount: s.children?.length || 0 }))
-    });
-    if (node.slots && node.slots.length > 0) {
-      for (const slot of node.slots) {
-        const slotKey = `${node.id}-${slot.slotId}`;
-        let childrenToRender = [];
-        if (slot.zoneId && slot.variants && variantCache[slotKey]) {
-          childrenToRender = variantCache[slotKey].children;
-        } else if (slot.zoneId && slot.variants) {
-          const defaultVariant = slot.variants.find((v) => v.isDefault);
-          childrenToRender = defaultVariant?.children || [];
-        } else {
-          childrenToRender = Array.isArray(slot.children) ? slot.children : [];
-        }
-        const safeChildren = Array.isArray(childrenToRender) ? childrenToRender : [];
-        slotChildren[slot.slotId] = /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-slot-id": slot.slotId,
-            "data-amplifyup-slot": slot.slotId,
-            "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__ */ jsx(Fragment$1, { children: renderNode(child) }, child.id))
-          },
-          slot.slotId
-        );
-      }
-    }
-    const slotsToPass = Object.keys(slotChildren).length > 0 ? slotChildren : void 0;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-node-id": node.id,
-        "data-amplifyup-node": "",
-        "data-component-id": node.componentId,
-        "data-amplifyup-component": node.componentId,
-        children: /* @__PURE__ */ jsx(
-          ComponentRenderBoundary,
-          {
-            componentId: node.componentId,
-            nodeId: node.id,
-            children: /* @__PURE__ */ jsx(
-              NodeWithFields,
-              {
-                nodeId: node.id,
-                componentId: node.componentId,
-                props: nodeRenderProps(node),
-                slots: slotsToPass,
-                renderComponent,
-                composerPreview: composerPreviewFlag
-              }
-            )
-          }
-        )
-      }
-    );
-  };
-  const rawTree = pageConfig.layoutTree;
-  const layoutTree = Array.isArray(rawTree) ? rawTree : rawTree && typeof rawTree === "object" && rawTree.componentId ? [rawTree] : [];
-  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",
-    {
-      "data-slot-id": composerPreviewFlag ? "main" : void 0,
-      "data-amplifyup-slot": composerPreviewFlag ? "main" : void 0,
-      "data-slot-source": composerPreviewFlag ? "page" : void 0,
-      "data-slot-state": composerPreviewFlag ? "filled" : void 0,
-      children: layoutTree.map((node) => /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(node) }, node.id))
-    }
-  ) });
-}
-var AmplifyRenderer = memo(AmplifyRendererInner);
-function AddComponentIcon({ size = 28 }) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      "aria-hidden": "true",
-      focusable: "false",
-      children: [
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "3",
-            y: "3",
-            width: "18",
-            height: "18",
-            rx: "4",
-            stroke: "currentColor",
-            strokeWidth: "1.75"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M12 8v8M8 12h8",
-            stroke: "currentColor",
-            strokeWidth: "1.75",
-            strokeLinecap: "round"
-          }
-        )
-      ]
-    }
-  );
-}
-function EmptySlotHint({
-  label = "Click here to Add Component",
-  compact = false
-}) {
-  const iconSize = compact ? 20 : 28;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "amplifyup-slot-placeholder",
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: compact ? 8 : 12,
-        minHeight: compact ? 60 : void 0,
-        width: "100%",
-        pointerEvents: "none",
-        textAlign: "center",
-        boxSizing: "border-box",
-        padding: compact ? "12px 8px" : "24px 16px"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "amplifyup-slot-placeholder-icon",
-            style: {
-              display: "inline-flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: compact ? 36 : 48,
-              height: compact ? 36 : 48,
-              borderRadius: 12,
-              border: "1.5px dashed currentColor",
-              opacity: 0.9
-            },
-            children: /* @__PURE__ */ jsx(AddComponentIcon, { size: iconSize })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "amplifyup-slot-placeholder-label",
-            style: {
-              fontSize: compact ? 13 : 15,
-              fontWeight: 600,
-              lineHeight: 1.3,
-              letterSpacing: "0.01em"
-            },
-            children: label
-          }
-        )
-      ]
-    }
-  );
-}
-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-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
-    }
-  );
-}
-function hasAmplifyLayout(pageConfig) {
-  return !!(pageConfig && pageConfig.id !== "default" && Array.isArray(pageConfig.layoutTree) && pageConfig.layoutTree.length > 0);
-}
-function normalizeRoutePath(route) {
-  if (!route) return "";
-  const path = route.split("?")[0] || "/";
-  if (path.length > 1 && path.endsWith("/")) return path.replace(/\/+$/, "");
-  return path || "/";
-}
-function samePageRoute(a, b) {
-  const ar = normalizeRoutePath(a?.route);
-  const br = normalizeRoutePath(b?.route);
-  return !!ar && !!br && ar === br;
-}
-function layoutTreesEqual(a, b) {
-  if (!a || !b) return a === b;
-  return JSON.stringify(a.layoutTree) === JSON.stringify(b.layoutTree);
-}
-function AmplifyPageContent({
-  fallback,
-  renderComponent,
-  pageConfig: pageConfigProp,
-  forceComposerPreview = false,
-  previewLoadingComponent,
-  previewEmptyComponent,
-  loadingComponent,
-  emptyComponent,
-  errorComponent
-}) {
-  const client = useAmplifyUp();
-  useRegisterPageContent();
-  const preview = useComposerPreviewFlag(forceComposerPreview);
-  const clientLayout = hasAmplifyLayout(client.pageConfig) ? client.pageConfig : null;
-  const serverLayout = hasAmplifyLayout(pageConfigProp) ? pageConfigProp : null;
-  let pageConfig = serverLayout ?? clientLayout;
-  if (preview && clientLayout) {
-    pageConfig = clientLayout;
-  } else if (clientLayout && serverLayout && samePageRoute(clientLayout, serverLayout) && !layoutTreesEqual(clientLayout, serverLayout)) {
-    pageConfig = clientLayout;
-  } else if (clientLayout && !serverLayout) {
-    pageConfig = clientLayout;
-  }
-  const loading = !hasAmplifyLayout(pageConfig) && client.loading;
-  const error = hasAmplifyLayout(pageConfig) ? null : pageConfigProp ? null : client.error;
-  const previewEmpty = previewEmptyComponent ?? previewPageSlot("empty");
-  const previewLoading = previewLoadingComponent ?? previewPageSlot("loading");
-  if (preview) {
-    const ready = previewLayoutReady({
-      clientLoading: client.loading,
-      hasClientLayout: !!clientLayout,
-      hasServerLayout: !!serverLayout
-    });
-    if (!ready) {
-      return /* @__PURE__ */ jsx(ComposerLayoutStatusProvider, { ready: false, children: previewLoading });
-    }
-    const layoutSettled = !client.loading || !!clientLayout;
-    return /* @__PURE__ */ jsx(ComposerLayoutStatusProvider, { ready: layoutSettled, children: /* @__PURE__ */ jsx(
-      AmplifyRenderer,
-      {
-        pageConfig: pageConfig ?? void 0,
-        renderComponent,
-        composerPreview: true,
-        loadingComponent: loadingComponent ?? previewLoading,
-        emptyComponent: emptyComponent ?? previewEmpty,
-        errorComponent: errorComponent ?? (() => previewEmpty)
-      }
-    ) });
-  }
-  if (loading) {
-    return loadingComponent ? /* @__PURE__ */ jsx(Fragment, { children: loadingComponent }) : null;
-  }
-  if (error) {
-    if (errorComponent) return /* @__PURE__ */ jsx(Fragment, { children: errorComponent(error) });
-    return fallback ? /* @__PURE__ */ jsx(Fragment, { children: fallback }) : null;
-  }
-  if (!hasAmplifyLayout(pageConfig)) {
-    return fallback ? /* @__PURE__ */ jsx(Fragment, { children: fallback }) : null;
-  }
-  return /* @__PURE__ */ jsx(ComposerLayoutStatusProvider, { ready: true, children: /* @__PURE__ */ jsx(
-    AmplifyRenderer,
-    {
-      pageConfig: pageConfig ?? void 0,
-      renderComponent,
-      loadingComponent,
-      emptyComponent,
-      errorComponent
-    }
-  ) });
-}
-
-// 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;
-  return isComposerPreview() && window.__AMPLIFYUP_EVENT_SELECTION__ !== true;
-}
-function subscribeComposerEdit(onStoreChange) {
-  if (typeof window === "undefined") return () => {
-  };
-  window.addEventListener("amplifyup:composer-edit", onStoreChange);
-  return () => window.removeEventListener("amplifyup:composer-edit", onStoreChange);
-}
-function getComposerEditModeServer() {
-  return false;
-}
-var ComponentContext = createContext(null);
-function ComponentContextProvider({
-  children,
-  slots,
-  props,
-  layoutNodeId,
-  componentId
-}) {
-  const next = hydratePageResourceProps(props || {}, getPageResourceFields());
-  return /* @__PURE__ */ jsx(
-    ComponentContext.Provider,
-    {
-      value: { slots, props: next, layoutNodeId, componentId },
-      children
+  const next = hydratePageResourceProps(props || {}, getPageResourceFields());
+  return /* @__PURE__ */ jsx(
+    ComponentContext.Provider,
+    {
+      value: { slots, props: next, layoutNodeId, componentId },
+      children
     }
   );
 }
@@ -4828,7 +4276,9 @@ function Slot({
 }) {
   const context = useContext(ComponentContext);
   if (!context) {
-    console.warn(`[AmplifyUp SDK] Slot "${name}" used outside ComponentContextProvider`);
+    console.warn(
+      `[AmplifyUp SDK] Slot "${name}" only works inside a component rendered from your component registry`
+    );
     return null;
   }
   const slotContent = context.slots?.[name];
@@ -5142,391 +4592,1046 @@ function ComposerInlineField({
         opacity: showHint ? 0.5 : void 0
       }
     }
-  );
-}
-function ComposerInlineHtml({
-  name,
-  html,
-  sourceValue,
-  className,
-  Tag = "div",
-  layoutNodeId,
-  componentId,
-  fieldRef
-}) {
-  const elRef = useRef(null);
-  useEffect(() => {
-    const el = elRef.current;
-    if (!el) return;
-    if (el.innerHTML !== html) el.innerHTML = html;
-  }, [html]);
-  const openRichEditor = (event) => {
-    if (!elRef.current) return;
-    event.preventDefault();
-    event.stopPropagation();
-    requestCanvasRichTextEdit({
-      el: elRef.current,
-      layoutNodeId,
-      componentId,
-      name,
-      value: sourceValue,
-      fieldRef
-    });
-  };
-  return React3.createElement(Tag, {
-    ref: elRef,
-    className,
-    "data-amplifyup-field": name,
-    "data-amplifyup-field-type": "richtext",
-    "data-amplifyup-source": sourceValue,
-    "data-amplifyup-node-id": layoutNodeId || void 0,
-    "data-amplifyup-ref-provider": fieldRef?.providerId || void 0,
-    "data-amplifyup-ref-entity": fieldRef?.entity || void 0,
-    "data-amplifyup-ref-id": fieldRef?.id || void 0,
-    dangerouslySetInnerHTML: { __html: html },
-    onMouseDown: (event) => {
-      event.stopPropagation();
-    },
-    onClick: openRichEditor,
-    style: {
-      cursor: "text",
-      outline: "1px dashed color-mix(in srgb, currentColor 40%, transparent)",
-      outlineOffset: "6px"
+  );
+}
+function ComposerInlineHtml({
+  name,
+  html,
+  sourceValue,
+  className,
+  Tag = "div",
+  layoutNodeId,
+  componentId,
+  fieldRef
+}) {
+  const elRef = useRef(null);
+  useEffect(() => {
+    const el = elRef.current;
+    if (!el) return;
+    if (el.innerHTML !== html) el.innerHTML = html;
+  }, [html]);
+  const openRichEditor = (event) => {
+    if (!elRef.current) return;
+    event.preventDefault();
+    event.stopPropagation();
+    requestCanvasRichTextEdit({
+      el: elRef.current,
+      layoutNodeId,
+      componentId,
+      name,
+      value: sourceValue,
+      fieldRef
+    });
+  };
+  return React3.createElement(Tag, {
+    ref: elRef,
+    className,
+    "data-amplifyup-field": name,
+    "data-amplifyup-field-type": "richtext",
+    "data-amplifyup-source": sourceValue,
+    "data-amplifyup-node-id": layoutNodeId || void 0,
+    "data-amplifyup-ref-provider": fieldRef?.providerId || void 0,
+    "data-amplifyup-ref-entity": fieldRef?.entity || void 0,
+    "data-amplifyup-ref-id": fieldRef?.id || void 0,
+    dangerouslySetInnerHTML: { __html: html },
+    onMouseDown: (event) => {
+      event.stopPropagation();
+    },
+    onClick: openRichEditor,
+    style: {
+      cursor: "text",
+      outline: "1px dashed color-mix(in srgb, currentColor 40%, transparent)",
+      outlineOffset: "6px"
+    }
+  });
+}
+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 "";
+}
+var FIELD_SCALAR_HINT = "Field expects a scalar field. Did you mean <Field field={post.title} />?";
+function warnNotScalarField(component, field, fieldValue) {
+  if (process.env.NODE_ENV === "production") return false;
+  if (isBrandedFields(field)) {
+    console.error(`[AmplifyUp SDK] ${component}: ${FIELD_SCALAR_HINT}`);
+    return true;
+  }
+  if (isFieldEnvelope(field) && Array.isArray(field.value)) {
+    console.error(`[AmplifyUp SDK] ${component}: ${FIELD_SCALAR_HINT}`);
+    return true;
+  }
+  if (Array.isArray(fieldValue)) {
+    console.error(`[AmplifyUp SDK] ${component}: ${FIELD_SCALAR_HINT}`);
+    return true;
+  }
+  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;
+  const key = name || "(unnamed)";
+  if (warnedReadOnlyFields.has(key)) return;
+  warnedReadOnlyFields.add(key);
+  console.warn(
+    `[AmplifyUp SDK] ${key} has no write target; rendered read-only.`
+  );
+}
+function canComposerBind(field, ref, editName) {
+  if (isReadOnlyRowField(field) || isFieldEnvelope(field) && field.readOnly) {
+    warnReadOnlyRowField(editName || (isFieldEnvelope(field) ? field.name : ""));
+    return false;
+  }
+  return true;
+}
+function warnProjectionProps(component, hasField, hasValue, name) {
+  if (process.env.NODE_ENV === "production") return;
+  if (!hasField && !hasValue && !name) {
+    console.warn(
+      `[AmplifyUp SDK] ${component} needs field={fields.yourProp} (or value + name for computed values)`
+    );
+  }
+}
+function hasOwnProp(props, key) {
+  return Object.prototype.hasOwnProperty.call(props, key);
+}
+function Field(props) {
+  const { field, value, name, className } = props;
+  const context = useContext(ComponentContext);
+  const composerEdit = useComposerEditMode();
+  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;
+  }
+  if (!hasField && !hasValue && !name) {
+    return null;
+  }
+  if (isBrandedFields(field) || Array.isArray(fieldValue)) {
+    return null;
+  }
+  const empty = isComposerEmptyText(fieldValue);
+  const bindComposer = composerEdit && editName && context && canInlineEdit(editName, fieldValue) && canComposerBind(field, ref, editName);
+  if (bindComposer) {
+    return /* @__PURE__ */ jsx(
+      ComposerInlineField,
+      {
+        name: editName,
+        value: fieldValue,
+        className,
+        layoutNodeId: context.layoutNodeId,
+        componentId: context.componentId,
+        fieldRef: ref,
+        rich: looksLikeRichCanvasField(editName)
+      }
+    );
+  }
+  if (empty) return null;
+  const text = formatFieldValue(fieldValue);
+  if (!text) return null;
+  return /* @__PURE__ */ jsx("span", { className, children: text });
+}
+function markdownToHtml(markdown) {
+  try {
+    const result = marked.parse(markdown, { async: false });
+    return typeof result === "string" ? result : "";
+  } catch {
+    return markdown;
+  }
+}
+function RichText(props) {
+  const {
+    field,
+    value,
+    name,
+    className,
+    as: Tag = "div",
+    children
+  } = props;
+  const context = useContext(ComponentContext);
+  const composerEdit = useComposerEditMode();
+  const childrenValue = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
+  const hasField = isFieldEnvelope(field);
+  const hasValueProp = hasOwnProp(props, "value") || childrenValue !== void 0;
+  const boundValue = hasOwnProp(props, "value") ? value : childrenValue !== void 0 ? childrenValue : value;
+  const { editName, fieldValue, ref } = useBoundField(
+    field,
+    boundValue,
+    name,
+    "RichText"
+  );
+  assertNamedEnvelope("RichText", field);
+  if (!hasField && !hasValueProp && !name) {
+    return null;
+  }
+  warnProjectionProps("RichText", hasField, hasValueProp, name);
+  if (warnNotScalarField("RichText", field, fieldValue)) {
+    return null;
+  }
+  const canEdit = !!context && canInlineEditRichText(editName, fieldValue) && canComposerBind(field, ref, editName);
+  if (isComposerEmptyText(fieldValue)) {
+    if (composerEdit && canEdit) {
+      return /* @__PURE__ */ jsx(
+        ComposerInlineField,
+        {
+          name: editName,
+          value: fieldValue,
+          className,
+          layoutNodeId: context?.layoutNodeId,
+          componentId: context?.componentId,
+          fieldRef: ref,
+          rich: true
+        }
+      );
+    }
+    return null;
+  }
+  let html = "";
+  if (typeof fieldValue === "string") {
+    const trimmed = fieldValue.trim();
+    if (trimmed.startsWith("<") && trimmed.includes(">")) {
+      html = fieldValue;
+    } else {
+      html = markdownToHtml(fieldValue);
     }
-  });
-}
-function formatFieldValue(value) {
-  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
-    return String(value);
+  } else {
+    const text = formatFieldValue(fieldValue);
+    html = text ? markdownToHtml(text) : "";
   }
-  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 (!html) {
+    return null;
   }
-  if (value && typeof value === "object") {
-    return "";
+  if (composerEdit && canEdit) {
+    return /* @__PURE__ */ jsx(
+      ComposerInlineHtml,
+      {
+        name: editName,
+        html,
+        sourceValue: typeof fieldValue === "string" ? fieldValue : html,
+        className,
+        Tag,
+        layoutNodeId: context?.layoutNodeId,
+        componentId: context?.componentId,
+        fieldRef: ref
+      }
+    );
   }
+  return /* @__PURE__ */ jsx(Tag, { className, dangerouslySetInnerHTML: { __html: html } });
+}
+function isPortableImageValue(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const url = value.url;
+  return typeof url === "string" && url.trim().length > 0;
+}
+function imageSrc(value) {
+  if (typeof value === "string") return value.trim();
+  if (isPortableImageValue(value)) return value.url.trim();
   return "";
 }
-var FIELD_SCALAR_HINT = "Field expects a scalar field. Did you mean <Field field={post.title} />?";
-function warnNotScalarField(component, field, fieldValue) {
-  if (process.env.NODE_ENV === "production") return false;
-  if (isBrandedFields(field)) {
-    console.error(`[AmplifyUp SDK] ${component}: ${FIELD_SCALAR_HINT}`);
-    return true;
-  }
-  if (isFieldEnvelope(field) && Array.isArray(field.value)) {
-    console.error(`[AmplifyUp SDK] ${component}: ${FIELD_SCALAR_HINT}`);
-    return true;
-  }
-  if (Array.isArray(fieldValue)) {
-    console.error(`[AmplifyUp SDK] ${component}: ${FIELD_SCALAR_HINT}`);
-    return true;
+function leafText(field) {
+  if (isFieldEnvelope(field)) return field.value;
+  return field;
+}
+function coerceImageField(field, value, name) {
+  if (isFieldEnvelope(field)) return { field, value, name };
+  if (!isBrandedFields(field) || !field || typeof field !== "object") {
+    return { field: void 0, value, name };
   }
-  return false;
+  const bag = field;
+  const urlField = bag.url;
+  const urlName = isFieldEnvelope(urlField) && typeof urlField.name === "string" ? urlField.name.replace(/\.url$/, "") : "";
+  const editName = urlName || name || "";
+  if (!editName) return { field: void 0, value, name };
+  const ref = isFieldEnvelope(urlField) ? urlField.ref : void 0;
+  const width = leafText(bag.width);
+  const height = leafText(bag.height);
+  return {
+    field: {
+      value: {
+        url: String(leafText(urlField) ?? ""),
+        alt: leafText(bag.alt),
+        ...typeof width === "number" ? { width } : {},
+        ...typeof height === "number" ? { height } : {}
+      },
+      name: editName,
+      ...ref ? { ref } : {}
+    },
+    value,
+    name: editName
+  };
 }
-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.`
+function Image(props) {
+  const {
+    field,
+    value,
+    name,
+    alt: altProp,
+    className,
+    width: widthProp,
+    height: heightProp,
+    ...imgProps
+  } = props;
+  const context = useContext(ComponentContext);
+  assertNamedEnvelope("Image", field);
+  const coerced = coerceImageField(field, value, name);
+  const boundField = coerced.field;
+  const hasField = isFieldEnvelope(boundField);
+  const hasValue = hasOwnProp(props, "value");
+  const { editName, fieldValue, ref } = useBoundField(
+    boundField,
+    coerced.value,
+    coerced.name,
+    "Image"
   );
-}
-var warnedReadOnlyFields = /* @__PURE__ */ new Set();
-function warnReadOnlyRowField(name) {
-  if (process.env.NODE_ENV === "production") return;
-  const key = name || "(unnamed)";
-  if (warnedReadOnlyFields.has(key)) return;
-  warnedReadOnlyFields.add(key);
-  console.warn(
-    `[AmplifyUp SDK] ${key} has no write target; rendered read-only.`
+  const composerEdit = useComposerEditMode();
+  warnProjectionProps("Image", hasField || isBrandedFields(field), hasValue, coerced.name || name);
+  if (!isBrandedFields(field) && warnNotScalarField("Image", boundField, fieldValue)) {
+    return null;
+  }
+  if (!hasField && !hasValue && !name && !editName) {
+    return null;
+  }
+  const src = imageSrc(fieldValue);
+  const portable = isPortableImageValue(fieldValue) ? fieldValue : null;
+  const alt = altProp ?? portable?.alt ?? "";
+  const width = widthProp ?? portable?.width;
+  const height = heightProp ?? portable?.height;
+  const fieldAttrs = composerEdit && editName && canComposerBind(boundField, ref, editName) ? {
+    "data-amplifyup-field": editName,
+    "data-amplifyup-field-type": "image",
+    "data-amplifyup-node-id": context?.layoutNodeId || void 0,
+    "data-amplifyup-ref-provider": ref?.providerId || void 0,
+    "data-amplifyup-ref-entity": ref?.entity || void 0,
+    "data-amplifyup-ref-id": ref?.id || void 0
+  } : null;
+  if (composerEdit && !editName && (hasField || hasValue)) {
+    console.warn(
+      '[AmplifyUp SDK] Image value={\u2026} requires name="\u2026" for computed values'
+    );
+  }
+  if (!src) {
+    if (!composerEdit || !fieldAttrs) return null;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...fieldAttrs,
+        className,
+        role: "img",
+        "aria-label": alt || editName || "Image",
+        style: {
+          display: "block",
+          boxSizing: "border-box",
+          minWidth: width ? void 0 : 120,
+          minHeight: height ? void 0 : 80,
+          width: width || "100%",
+          height: height || void 0,
+          background: "color-mix(in srgb, currentColor 8%, transparent)",
+          cursor: "pointer"
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      ...imgProps,
+      ...fieldAttrs,
+      src,
+      alt,
+      className,
+      width,
+      height,
+      style: {
+        ...typeof imgProps.style === "object" && imgProps.style ? imgProps.style : {},
+        ...composerEdit && fieldAttrs ? { cursor: "pointer" } : null
+      }
+    }
   );
 }
-function canComposerBind(field, ref, editName) {
-  if (isReadOnlyRowField(field) || isFieldEnvelope(field) && field.readOnly) {
-    warnReadOnlyRowField(editName || (isFieldEnvelope(field) ? field.name : ""));
-    return false;
+
+// src/component-key.ts
+var componentKey = (id) => id.toLowerCase().replace(/[^a-z0-9]/g, "");
+var REGISTRY_BRAND = Symbol.for("amplifyup.componentRegistry");
+var defineComponentRegistry = (components) => {
+  const index = /* @__PURE__ */ new Map();
+  for (const [name, component] of Object.entries(components)) {
+    const key = componentKey(name);
+    if (index.has(key)) {
+      throw new Error(
+        `[Amplify UP] Component registry has two components named like "${name}". Rebuild it with withAmplifyUp or \`amplifyup registry\`.`
+      );
+    }
+    index.set(key, component);
   }
-  return true;
-}
-function warnProjectionProps(component, hasField, hasValue, name) {
-  if (process.env.NODE_ENV === "production") return;
-  if (!hasField && !hasValue && !name) {
-    console.warn(
-      `[AmplifyUp SDK] ${component} needs field={fields.yourProp} (or value + name for computed values)`
+  return {
+    [REGISTRY_BRAND]: true,
+    components,
+    resolve: (componentId) => index.get(componentKey(componentId))
+  };
+};
+var isComponentRegistry = (value) => !!value && typeof value === "object" && value[REGISTRY_BRAND] === true;
+var warnedMissing = /* @__PURE__ */ new Set();
+var warnMissingOnce = (componentId) => {
+  if (warnedMissing.has(componentId)) return;
+  warnedMissing.add(componentId);
+  console.warn(
+    `[Amplify UP] No component in your component registry matches "${componentId}". Add a file with that name to your components folder.`
+  );
+};
+var MissingComponentHint = ({ componentId }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    "data-amplifyup-missing-component": componentId,
+    style: {
+      margin: "0.5rem 0",
+      padding: "0.75rem 1rem",
+      border: "1.5px dashed currentColor",
+      borderRadius: 8,
+      opacity: 0.7,
+      fontSize: 14,
+      textAlign: "center"
+    },
+    children: [
+      "\u201C",
+      componentId,
+      "\u201D isn\u2019t set up on this site yet."
+    ]
+  }
+);
+var RegistryComponent = ({
+  registry,
+  componentId,
+  props,
+  slots,
+  layoutNodeId,
+  composerPreview
+}) => {
+  const Component2 = registry.resolve(componentId);
+  if (!Component2) {
+    warnMissingOnce(componentId);
+    return composerPreview ? /* @__PURE__ */ jsx(MissingComponentHint, { componentId }) : null;
+  }
+  return /* @__PURE__ */ jsx(
+    ComponentContextProvider,
+    {
+      props,
+      slots,
+      layoutNodeId,
+      componentId,
+      children: /* @__PURE__ */ jsx(Component2, { ...props })
+    }
+  );
+};
+var assertComponentRegistry = (owner, props) => {
+  if ("renderComponent" in props) {
+    throw new Error(
+      `[Amplify UP] ${owner}: renderComponent was removed in @amplifyup/sdk 0.2.0. Components now load automatically \u2014 wrap next.config with withAmplifyUp and render <AmplifyPage /> from the generated component registry. See "Upgrading from 0.1" in the SDK README.`
     );
   }
+  if (!isComponentRegistry(props.registry)) {
+    throw new Error(
+      `[Amplify UP] ${owner} needs your component registry. Render <AmplifyPage /> from the generated .amplifyup/component-registry module (created by withAmplifyUp or \`amplifyup registry\`).`
+    );
+  }
+};
+function nodeRenderProps(node) {
+  const settings = node.settings || {};
+  const hydrated = hydratePageResourceProps(
+    node.props || {},
+    getPageResourceFields()
+  );
+  const fields = hydrated.fields;
+  const branded = isBrandedFields(fields) ? fields : brandFields(
+    fields && typeof fields === "object" ? fields : {}
+  );
+  return {
+    ...settings,
+    ...hydrated,
+    fields: branded
+  };
 }
-function hasOwnProp(props, key) {
-  return Object.prototype.hasOwnProperty.call(props, key);
-}
-function Field(props) {
-  const { field, value, name, className } = props;
-  const context = useContext(ComponentContext);
-  const composerEdit = useComposerEditMode();
-  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;
+var ComponentRenderBoundary = class extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = { error: null };
   }
-  if (!hasField && !hasValue && !name) {
-    return null;
+  static getDerivedStateFromError(error) {
+    return { error };
   }
-  if (isBrandedFields(field) || Array.isArray(fieldValue)) {
-    return null;
+  componentDidCatch(error) {
+    console.error(
+      `[AmplifyRenderer] "${this.props.componentId}" (${this.props.nodeId}) threw while rendering:`,
+      error
+    );
   }
-  const empty = isComposerEmptyText(fieldValue);
-  const bindComposer = composerEdit && editName && context && canInlineEdit(editName, fieldValue) && canComposerBind(field, ref, editName);
-  if (bindComposer) {
-    return /* @__PURE__ */ jsx(
-      ComposerInlineField,
-      {
-        name: editName,
-        value: fieldValue,
-        className,
-        layoutNodeId: context.layoutNodeId,
-        componentId: context.componentId,
-        fieldRef: ref,
-        rich: looksLikeRichCanvasField(editName)
+  render() {
+    if (this.state.error) {
+      if (process.env.NODE_ENV !== "production") {
+        return /* @__PURE__ */ 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 NodeWithFields({
+  nodeId,
+  componentId,
+  props,
+  slots,
+  registry,
+  composerPreview
+}) {
+  return /* @__PURE__ */ jsx(MaybeComposerProvider, { enabled: !!composerPreview, layoutNodeId: nodeId, children: /* @__PURE__ */ jsx(
+    RegistryComponent,
+    {
+      registry,
+      componentId,
+      props,
+      slots,
+      layoutNodeId: nodeId,
+      composerPreview: !!composerPreview
+    }
+  ) });
+}
+function AmplifyRendererInner(rendererProps) {
+  assertComponentRegistry("AmplifyRenderer", rendererProps);
+  const {
+    registry,
+    pageConfig: serverPageConfig,
+    loadingComponent,
+    errorComponent,
+    emptyComponent,
+    composerPreview
+  } = rendererProps;
+  const clientHook = useAmplifyUp();
+  useRegisterPageContent(!serverPageConfig);
+  const composerPreviewFlag = useComposerPreviewFlag(!!composerPreview);
+  const pageConfig = serverPageConfig || clientHook.pageConfig || null;
+  const loading = serverPageConfig ? false : clientHook.loading;
+  const error = serverPageConfig ? null : clientHook.error;
+  const contentSource = clientHook.source;
+  const [variantCache, setVariantCache] = useState({});
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      if (window.__AMPLIFYUP_PREVIEW_MODE__ === true) {
+        return;
+      }
+      if (window.location.pathname.includes("/api/pages/proxy")) {
+        return;
+      }
+      if (window.self !== window.top) {
+        return;
+      }
+      const urlParams = new URLSearchParams(window.location.search);
+      if (urlParams.get("preview") === "true" || urlParams.get("visualEditor") === "true") {
+        return;
+      }
+      if (window.location.href.includes("preview=true") || window.location.href.includes("visualEditor=true")) {
+        return;
+      }
+    }
+    if (pageConfig && pageConfig.id !== "default") {
+      trackContentView(pageConfig.id, "page", {
+        route: pageConfig.route,
+        title: pageConfig.title
+      });
+    }
+  }, [pageConfig]);
+  useEffect(() => {
+    if (!pageConfig?.eventTracking?.length) return;
+    const sdk = getSDK();
+    if (!sdk.isInitialized()) return;
+    sdk.setupEventTracking(pageConfig.eventTracking);
+    const t1 = window.setTimeout(() => {
+      sdk.setupComponentViewTracking();
+      refreshEventTracking();
+    }, 200);
+    const t2 = window.setTimeout(() => {
+      sdk.setupComponentViewTracking();
+      refreshEventTracking();
+    }, 1e3);
+    return () => {
+      window.clearTimeout(t1);
+      window.clearTimeout(t2);
+    };
+  }, [pageConfig?.id, pageConfig?.eventTracking]);
+  useEffect(() => {
+    if (!pageConfig) return;
+    const t = window.setTimeout(() => {
+      getSDK().setupComponentViewTracking();
+      refreshEventTracking();
+    }, 100);
+    return () => window.clearTimeout(t);
+  }, [variantCache, pageConfig?.id]);
+  useEffect(() => {
+    if (!isComposerPreview()) {
+      return;
+    }
+    if (!pageConfig) {
+      return;
+    }
+    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",
+          tree: []
+        }, "*");
       }
+      return;
+    }
+    const convertLayoutTreeToComponentTree = (nodes, parentId = null) => {
+      const result = [];
+      nodes.forEach((node) => {
+        if (!node) return;
+        const treeNode = {
+          id: node.id,
+          componentId: node.componentId,
+          componentName: node.componentId,
+          // Will be enhanced with actual name if available
+          parentId,
+          children: []
+        };
+        if (node.slots && node.slots.length > 0) {
+          node.slots.forEach((slot) => {
+            const kids = Array.isArray(slot?.children) ? slot.children : [];
+            if (kids.length > 0) {
+              const slotChildren = convertLayoutTreeToComponentTree(kids, node.id);
+              treeNode.children.push(...slotChildren);
+            }
+          });
+        }
+        result.push(treeNode);
+      });
+      return result;
+    };
+    const layoutTree2 = normalizedTree;
+    const componentTree = convertLayoutTreeToComponentTree(layoutTree2);
+    const describeLayoutTree = (nodes, depth = 0) => {
+      if (!nodes?.length) return "";
+      const indent = "  ".repeat(depth);
+      return nodes.map((n) => {
+        const slotsDesc = (n.slots || []).map((s) => {
+          const childCount = Array.isArray(s.children) ? s.children.length : 0;
+          const childrenDesc = childCount > 0 ? describeLayoutTree(s.children || [], depth + 1) : "";
+          return `${indent}  slot "${s.slotId || s.slotName || "?"}" (${childCount} children)${childrenDesc ? "\n" + childrenDesc : ""}`;
+        }).join("\n");
+        return `${indent}- ${n.id} (${n.componentId || "?"})${slotsDesc ? "\n" + slotsDesc : ""}`;
+      }).join("\n");
+    };
+    sdkDebugOnce(
+      `layoutTree:${pageConfig?.id || ""}:${pageConfig?.route || ""}`,
+      "[AmplifyRenderer] layoutTree received:\n%s",
+      describeLayoutTree(layoutTree2)
     );
+    if (typeof window !== "undefined" && window.parent && window.parent !== window) {
+      const message = {
+        type: "COMPONENT_TREE",
+        tree: componentTree
+      };
+      window.parent.postMessage(message, "*");
+      sdkDebug(
+        "[AmplifyRenderer] Sent component tree from layoutTree:",
+        componentTree.length,
+        "root components"
+      );
+    }
+  }, [pageConfig]);
+  useEffect(() => {
+    if (!pageConfig?.layoutTree || !pageConfig.layoutId) return;
+    const roots = pageConfig.layoutTree;
+    const fromEdge = contentSource === "edge" || roots.some((n) => n._contentSource === "edge");
+    if (fromEdge) return;
+    const sdk = getSDK();
+    const instanceId = sdk.getInstanceId();
+    const decisionApiUrl = sdk.getDecisionApiUrl();
+    const orchestratorUrl = sdk.getOrchestratorUrl();
+    if (!decisionApiUrl && !orchestratorUrl || !instanceId) return;
+    const fetchVariants = async () => {
+      const nodes = pageConfig.layoutTree;
+      const newCache = {};
+      const findZonedSlots = (nodeList) => {
+        const results = [];
+        for (const node of nodeList) {
+          if (node.slots) {
+            for (const slot of node.slots) {
+              if (slot.zoneId && slot.variants) {
+                const key = `${node.id}-${slot.slotId}`;
+                results.push({ node, slot, key });
+              }
+            }
+          }
+        }
+        return results;
+      };
+      const zonedSlots = findZonedSlots(nodes);
+      await Promise.all(
+        zonedSlots.map(async ({ node, slot, key }) => {
+          try {
+            let personalizationUrl;
+            if (decisionApiUrl) {
+              const url = new URL(decisionApiUrl);
+              url.searchParams.set("instanceId", instanceId);
+              const zoneId = slot.zoneId;
+              if (zoneId) {
+                url.searchParams.set("zoneId", zoneId);
+              }
+              const campaignId = slot.campaignId;
+              if (campaignId) {
+                url.searchParams.set("campaignId", campaignId);
+              }
+              personalizationUrl = url.toString();
+            } else if (orchestratorUrl) {
+              personalizationUrl = `${orchestratorUrl}/api/personalization/variant?instanceId=${encodeURIComponent(instanceId)}&layoutId=${encodeURIComponent(pageConfig.layoutId)}&slotId=${encodeURIComponent(slot.slotId)}&nodeId=${encodeURIComponent(node.id)}`;
+            } else {
+              return;
+            }
+            const response = await fetch(personalizationUrl);
+            if (response.ok) {
+              const data = await response.json();
+              if (data.variantId && data.componentTree) {
+                newCache[key] = {
+                  variantId: data.variantId,
+                  children: data.componentTree
+                };
+                if (typeof window !== "undefined") {
+                  if (window.__AMPLIFYUP_PREVIEW_MODE__ === true) {
+                    return;
+                  }
+                  if (window.location.pathname.includes("/api/pages/proxy")) {
+                    return;
+                  }
+                  if (window.self !== window.top) {
+                    return;
+                  }
+                }
+                sdk.track("Zone Impression", {
+                  zoneId: slot.zoneId,
+                  variantId: data.variantId,
+                  layoutId: pageConfig.layoutId,
+                  route: pageConfig.route
+                });
+              } else {
+                const defaultVariant = slot.variants?.find((v) => v.isDefault);
+                if (defaultVariant) {
+                  newCache[key] = {
+                    variantId: defaultVariant.variantId,
+                    children: defaultVariant.children
+                  };
+                }
+              }
+            }
+          } catch (err) {
+            console.error(`Error fetching variant for slot ${key}:`, err);
+            const defaultVariant = slot.variants?.find((v) => v.isDefault);
+            if (defaultVariant) {
+              newCache[key] = {
+                variantId: defaultVariant.variantId,
+                children: defaultVariant.children
+              };
+            }
+          }
+        })
+      );
+      setVariantCache(newCache);
+    };
+    fetchVariants();
+  }, [pageConfig?.layoutTree, pageConfig?.layoutId, pageConfig?.route, contentSource]);
+  if (loading) {
+    return /* @__PURE__ */ jsx(Fragment, { children: loadingComponent || /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-gray-50", children: /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 py-16", children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-8 bg-gray-200 rounded w-1/4 mb-4" }),
+      /* @__PURE__ */ jsx("div", { className: "h-4 bg-gray-200 rounded w-1/2 mb-8" }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-64 bg-gray-200 rounded" }),
+        /* @__PURE__ */ jsx("div", { className: "h-32 bg-gray-200 rounded" })
+      ] })
+    ] }) }) }) });
   }
-  if (empty) return null;
-  const text = formatFieldValue(fieldValue);
-  if (!text) return null;
-  return /* @__PURE__ */ jsx("span", { className, children: text });
-}
-function markdownToHtml(markdown) {
-  try {
-    const result = marked.parse(markdown, { async: false });
-    return typeof result === "string" ? result : "";
-  } catch {
-    return markdown;
-  }
-}
-function RichText(props) {
-  const {
-    field,
-    value,
-    name,
-    className,
-    as: Tag = "div",
-    children
-  } = props;
-  const context = useContext(ComponentContext);
-  const composerEdit = useComposerEditMode();
-  const childrenValue = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
-  const hasField = isFieldEnvelope(field);
-  const hasValueProp = hasOwnProp(props, "value") || childrenValue !== void 0;
-  const boundValue = hasOwnProp(props, "value") ? value : childrenValue !== void 0 ? childrenValue : value;
-  const { editName, fieldValue, ref } = useBoundField(
-    field,
-    boundValue,
-    name,
-    "RichText"
-  );
-  assertNamedEnvelope("RichText", field);
-  if (!hasField && !hasValueProp && !name) {
-    return null;
+  if (error) {
+    return /* @__PURE__ */ jsx(Fragment, { children: errorComponent ? errorComponent(error) : /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-gray-50", children: /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 py-16", children: /* @__PURE__ */ jsxs("div", { className: "bg-red-50 border border-red-200 rounded-lg p-6", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold text-red-900 mb-2", children: "Error Loading Page" }),
+      /* @__PURE__ */ jsx("p", { className: "text-red-700", children: error })
+    ] }) }) }) });
   }
-  warnProjectionProps("RichText", hasField, hasValueProp, name);
-  if (warnNotScalarField("RichText", field, fieldValue)) {
+  if (!pageConfig) {
     return null;
   }
-  const canEdit = !!context && canInlineEditRichText(editName, fieldValue) && canComposerBind(field, ref, editName);
-  if (isComposerEmptyText(fieldValue)) {
-    if (composerEdit && canEdit) {
+  pageConfig.layout?.header !== false;
+  pageConfig.layout?.footer !== false;
+  const renderNode = (node) => {
+    const zoneIdFromProps = node.componentId === "AmplifyZone" ? String(node.props?.zoneId || "") : "";
+    if (node.componentId === "AmplifyZone") {
+      const contentSlot = node.slots?.find((s) => s.slotId === "content") || node.slots?.[0];
+      const children = Array.isArray(contentSlot?.children) ? contentSlot.children : [];
       return /* @__PURE__ */ jsx(
-        ComposerInlineField,
+        "div",
         {
-          name: editName,
-          value: fieldValue,
-          className,
-          layoutNodeId: context?.layoutNodeId,
-          componentId: context?.componentId,
-          fieldRef: ref,
-          rich: true
+          "data-node-id": node.id,
+          "data-amplifyup-node": "",
+          "data-amplifyup-component": "AmplifyZone",
+          "data-amplifyup-zone": zoneIdFromProps || void 0,
+          "data-zone-id": zoneIdFromProps || void 0,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot-id": "content",
+              "data-amplifyup-slot": "content",
+              "data-parent-node-id": node.id,
+              "data-parent-component-id": "AmplifyZone",
+              children: children.filter(Boolean).map((child) => /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(child) }, child.id))
+            }
+          )
         }
       );
     }
-    return 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 null;
-  }
-  if (composerEdit && canEdit) {
+    let slotChildren = {};
+    sdkDebugOnce(`node:${node.id}`, `[AmplifyRenderer] Rendering node ${node.id} (${node.componentId})`, {
+      hasSlots: !!(node.slots && node.slots.length > 0),
+      slotCount: node.slots?.length || 0,
+      slots: node.slots?.map((s) => ({ slotId: s.slotId, zoneId: s.zoneId, childrenCount: s.children?.length || 0 }))
+    });
+    if (node.slots && node.slots.length > 0) {
+      for (const slot of node.slots) {
+        const slotKey = `${node.id}-${slot.slotId}`;
+        let childrenToRender = [];
+        if (slot.zoneId && slot.variants && variantCache[slotKey]) {
+          childrenToRender = variantCache[slotKey].children;
+        } else if (slot.zoneId && slot.variants) {
+          const defaultVariant = slot.variants.find((v) => v.isDefault);
+          childrenToRender = defaultVariant?.children || [];
+        } else {
+          childrenToRender = Array.isArray(slot.children) ? slot.children : [];
+        }
+        const safeChildren = Array.isArray(childrenToRender) ? childrenToRender : [];
+        slotChildren[slot.slotId] = /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot-id": slot.slotId,
+            "data-amplifyup-slot": slot.slotId,
+            "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__ */ jsx(Fragment$1, { children: renderNode(child) }, child.id))
+          },
+          slot.slotId
+        );
+      }
+    }
+    const slotsToPass = Object.keys(slotChildren).length > 0 ? slotChildren : void 0;
     return /* @__PURE__ */ jsx(
-      ComposerInlineHtml,
+      "div",
       {
-        name: editName,
-        html,
-        sourceValue: typeof fieldValue === "string" ? fieldValue : html,
-        className,
-        Tag,
-        layoutNodeId: context?.layoutNodeId,
-        componentId: context?.componentId,
-        fieldRef: ref
+        "data-node-id": node.id,
+        "data-amplifyup-node": "",
+        "data-component-id": node.componentId,
+        "data-amplifyup-component": node.componentId,
+        children: /* @__PURE__ */ jsx(
+          ComponentRenderBoundary,
+          {
+            componentId: node.componentId,
+            nodeId: node.id,
+            children: /* @__PURE__ */ jsx(
+              NodeWithFields,
+              {
+                nodeId: node.id,
+                componentId: node.componentId,
+                props: nodeRenderProps(node),
+                slots: slotsToPass,
+                registry,
+                composerPreview: composerPreviewFlag
+              }
+            )
+          }
+        )
       }
     );
+  };
+  const rawTree = pageConfig.layoutTree;
+  const layoutTree = Array.isArray(rawTree) ? rawTree : rawTree && typeof rawTree === "object" && rawTree.componentId ? [rawTree] : [];
+  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(Tag, { className, dangerouslySetInnerHTML: { __html: html } });
+  return /* @__PURE__ */ jsx(ComposerProvider, { children: /* @__PURE__ */ jsx(
+    "main",
+    {
+      "data-slot-id": composerPreviewFlag ? "main" : void 0,
+      "data-amplifyup-slot": composerPreviewFlag ? "main" : void 0,
+      "data-slot-source": composerPreviewFlag ? "page" : void 0,
+      "data-slot-state": composerPreviewFlag ? "filled" : void 0,
+      children: layoutTree.map((node) => /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(node) }, node.id))
+    }
+  ) });
 }
-function isPortableImageValue(value) {
-  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
-  const url = value.url;
-  return typeof url === "string" && url.trim().length > 0;
+var AmplifyRenderer = memo(AmplifyRendererInner);
+function previewPageSlot(state) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot-id": "main",
+      "data-amplifyup-slot": "main",
+      "data-slot-source": "page",
+      "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
+    }
+  );
 }
-function imageSrc(value) {
-  if (typeof value === "string") return value.trim();
-  if (isPortableImageValue(value)) return value.url.trim();
-  return "";
+function hasAmplifyLayout(pageConfig) {
+  return !!(pageConfig && pageConfig.id !== "default" && Array.isArray(pageConfig.layoutTree) && pageConfig.layoutTree.length > 0);
 }
-function leafText(field) {
-  if (isFieldEnvelope(field)) return field.value;
-  return field;
+function normalizeRoutePath(route) {
+  if (!route) return "";
+  const path = route.split("?")[0] || "/";
+  if (path.length > 1 && path.endsWith("/")) return path.replace(/\/+$/, "");
+  return path || "/";
 }
-function coerceImageField(field, value, name) {
-  if (isFieldEnvelope(field)) return { field, value, name };
-  if (!isBrandedFields(field) || !field || typeof field !== "object") {
-    return { field: void 0, value, name };
-  }
-  const bag = field;
-  const urlField = bag.url;
-  const urlName = isFieldEnvelope(urlField) && typeof urlField.name === "string" ? urlField.name.replace(/\.url$/, "") : "";
-  const editName = urlName || name || "";
-  if (!editName) return { field: void 0, value, name };
-  const ref = isFieldEnvelope(urlField) ? urlField.ref : void 0;
-  const width = leafText(bag.width);
-  const height = leafText(bag.height);
-  return {
-    field: {
-      value: {
-        url: String(leafText(urlField) ?? ""),
-        alt: leafText(bag.alt),
-        ...typeof width === "number" ? { width } : {},
-        ...typeof height === "number" ? { height } : {}
-      },
-      name: editName,
-      ...ref ? { ref } : {}
-    },
-    value,
-    name: editName
-  };
+function samePageRoute(a, b) {
+  const ar = normalizeRoutePath(a?.route);
+  const br = normalizeRoutePath(b?.route);
+  return !!ar && !!br && ar === br;
 }
-function Image(props) {
+function layoutTreesEqual(a, b) {
+  if (!a || !b) return a === b;
+  return JSON.stringify(a.layoutTree) === JSON.stringify(b.layoutTree);
+}
+function AmplifyPageContent(contentProps) {
+  assertComponentRegistry("AmplifyPageContent", contentProps);
   const {
-    field,
-    value,
-    name,
-    alt: altProp,
-    className,
-    width: widthProp,
-    height: heightProp,
-    ...imgProps
-  } = props;
-  const context = useContext(ComponentContext);
-  assertNamedEnvelope("Image", field);
-  const coerced = coerceImageField(field, value, name);
-  const boundField = coerced.field;
-  const hasField = isFieldEnvelope(boundField);
-  const hasValue = hasOwnProp(props, "value");
-  const { editName, fieldValue, ref } = useBoundField(
-    boundField,
-    coerced.value,
-    coerced.name,
-    "Image"
-  );
-  const composerEdit = useComposerEditMode();
-  warnProjectionProps("Image", hasField || isBrandedFields(field), hasValue, coerced.name || name);
-  if (!isBrandedFields(field) && warnNotScalarField("Image", boundField, fieldValue)) {
-    return null;
-  }
-  if (!hasField && !hasValue && !name && !editName) {
-    return null;
-  }
-  const src = imageSrc(fieldValue);
-  const portable = isPortableImageValue(fieldValue) ? fieldValue : null;
-  const alt = altProp ?? portable?.alt ?? "";
-  const width = widthProp ?? portable?.width;
-  const height = heightProp ?? portable?.height;
-  const fieldAttrs = composerEdit && editName && canComposerBind(boundField, ref, editName) ? {
-    "data-amplifyup-field": editName,
-    "data-amplifyup-field-type": "image",
-    "data-amplifyup-node-id": context?.layoutNodeId || void 0,
-    "data-amplifyup-ref-provider": ref?.providerId || void 0,
-    "data-amplifyup-ref-entity": ref?.entity || void 0,
-    "data-amplifyup-ref-id": ref?.id || void 0
-  } : null;
-  if (composerEdit && !editName && (hasField || hasValue)) {
-    console.warn(
-      '[AmplifyUp SDK] Image value={\u2026} requires name="\u2026" for computed values'
-    );
+    fallback,
+    registry,
+    pageConfig: pageConfigProp,
+    forceComposerPreview = false,
+    previewLoadingComponent,
+    previewEmptyComponent,
+    loadingComponent,
+    emptyComponent,
+    errorComponent
+  } = contentProps;
+  const client = useAmplifyUp();
+  useRegisterPageContent();
+  const preview = useComposerPreviewFlag(forceComposerPreview);
+  const clientLayout = hasAmplifyLayout(client.pageConfig) ? client.pageConfig : null;
+  const serverLayout = hasAmplifyLayout(pageConfigProp) ? pageConfigProp : null;
+  let pageConfig = serverLayout ?? clientLayout;
+  if (preview && clientLayout) {
+    pageConfig = clientLayout;
+  } else if (clientLayout && serverLayout && samePageRoute(clientLayout, serverLayout) && !layoutTreesEqual(clientLayout, serverLayout)) {
+    pageConfig = clientLayout;
+  } else if (clientLayout && !serverLayout) {
+    pageConfig = clientLayout;
   }
-  if (!src) {
-    if (!composerEdit || !fieldAttrs) return null;
-    return /* @__PURE__ */ jsx(
-      "span",
+  const loading = !hasAmplifyLayout(pageConfig) && client.loading;
+  const error = hasAmplifyLayout(pageConfig) ? null : pageConfigProp ? null : client.error;
+  const previewEmpty = previewEmptyComponent ?? previewPageSlot("empty");
+  const previewLoading = previewLoadingComponent ?? previewPageSlot("loading");
+  if (preview) {
+    const ready = previewLayoutReady({
+      clientLoading: client.loading,
+      hasClientLayout: !!clientLayout,
+      hasServerLayout: !!serverLayout
+    });
+    if (!ready) {
+      return /* @__PURE__ */ jsx(ComposerLayoutStatusProvider, { ready: false, children: previewLoading });
+    }
+    const layoutSettled = !client.loading || !!clientLayout;
+    return /* @__PURE__ */ jsx(ComposerLayoutStatusProvider, { ready: layoutSettled, children: /* @__PURE__ */ jsx(
+      AmplifyRenderer,
       {
-        ...fieldAttrs,
-        className,
-        role: "img",
-        "aria-label": alt || editName || "Image",
-        style: {
-          display: "block",
-          boxSizing: "border-box",
-          minWidth: width ? void 0 : 120,
-          minHeight: height ? void 0 : 80,
-          width: width || "100%",
-          height: height || void 0,
-          background: "color-mix(in srgb, currentColor 8%, transparent)",
-          cursor: "pointer"
-        }
+        pageConfig: pageConfig ?? void 0,
+        registry,
+        composerPreview: true,
+        loadingComponent: loadingComponent ?? previewLoading,
+        emptyComponent: emptyComponent ?? previewEmpty,
+        errorComponent: errorComponent ?? (() => previewEmpty)
       }
-    );
+    ) });
   }
-  return /* @__PURE__ */ jsx(
-    "img",
+  if (loading) {
+    return loadingComponent ? /* @__PURE__ */ jsx(Fragment, { children: loadingComponent }) : null;
+  }
+  if (error) {
+    if (errorComponent) return /* @__PURE__ */ jsx(Fragment, { children: errorComponent(error) });
+    return fallback ? /* @__PURE__ */ jsx(Fragment, { children: fallback }) : null;
+  }
+  if (!hasAmplifyLayout(pageConfig)) {
+    return fallback ? /* @__PURE__ */ jsx(Fragment, { children: fallback }) : null;
+  }
+  return /* @__PURE__ */ jsx(ComposerLayoutStatusProvider, { ready: true, children: /* @__PURE__ */ jsx(
+    AmplifyRenderer,
     {
-      ...imgProps,
-      ...fieldAttrs,
-      src,
-      alt,
-      className,
-      width,
-      height,
-      style: {
-        ...typeof imgProps.style === "object" && imgProps.style ? imgProps.style : {},
-        ...composerEdit && fieldAttrs ? { cursor: "pointer" } : null
-      }
+      pageConfig: pageConfig ?? void 0,
+      registry,
+      loadingComponent,
+      emptyComponent,
+      errorComponent
     }
-  );
+  ) });
 }
+var bindAmplifyPage = (registry) => {
+  const AmplifyPage = (props) => /* @__PURE__ */ jsx(AmplifyPageContent, { ...props, registry });
+  AmplifyPage.displayName = "AmplifyPage";
+  return AmplifyPage;
+};
 var usePathname = null;
 if (typeof window !== "undefined") {
   try {
@@ -5821,6 +5926,6 @@ function useAmplifyUp() {
   return context;
 }
 
-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, useComposerPreviewFlag, useInComposer };
+export { AmplifyPageContent, AmplifyRenderer, AmplifyUpProvider, ComposerLayoutStatusProvider, ComposerProvider, Field, Image, MaybeComposerProvider, QueryContentError, RichText, SelectVariantsError, Slot, attachFieldEnvelopes, bindAmplifyPage, composerStoreKey, defineComponentRegistry, envelopeListRows, isBrandedFields, isComposerPreview, isFieldEnvelope, isPreviewRequest, isReadOnlyRowField, isWorkingContentRequest, listOwnerFromSpec, nextPageSpec, queryContent, resolveSlotState, searchSpec, selectVariants, slotShowsAddComponent, slotStateFromEl, toFieldEnvelopes, useAmplifyUp, useComposerPreviewFlag, useInComposer };
 //# sourceMappingURL=react.mjs.map
 //# sourceMappingURL=react.mjs.map