@amplifyup/sdk 0.1.77 → 0.1.79

package/dist/react.mjs

@@ -1,5 +1,5 @@
 'use client';
-import React3, { createContext, memo, useState, useEffect, Fragment as Fragment$1, useContext, useRef, Component, useSyncExternalStore, useCallback } from 'react';
+import React3, { createContext, memo, useState, useEffect, Fragment as Fragment$1, useContext, useRef, Component, useCallback, useSyncExternalStore } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { marked } from 'marked';
 
@@ -166,6 +166,7 @@ var AWSAdapter = class {
       return;
     }
     const trackingId = eventData?.trackingId || this.config?.trackingId;
+    const debug = this.config?.debug;
     const query = trackingId ? `?tid=${encodeURIComponent(trackingId)}` : "";
     const url = `${this.apiGatewayUrl}${endpoint}${query}`;
     try {
@@ -180,15 +181,15 @@ var AWSAdapter = class {
         keepalive: true
       });
       if (!response.ok) {
-        if (this.config.debug) {
+        if (debug) {
           console.warn(`AmplifyUp SDK: Event tracking failed: ${response.status} ${response.statusText}`);
         }
-      } else if (this.config.debug) {
+      } else if (debug) {
         const result = await response.json().catch(() => ({}));
         console.log("AmplifyUp SDK: Event tracked", result);
       }
     } catch (error) {
-      if (this.config.debug) {
+      if (debug) {
         console.error("AmplifyUp SDK: Event tracking error:", error);
       }
     }
@@ -3951,6 +3952,14 @@ function getSDK(adapter) {
 var trackContentView = (contentId, contentType, properties) => getSDK().trackContentView(contentId, contentType, properties);
 var refreshEventTracking = () => getSDK().refreshEventTracking();
 getSDK();
+var PageContentRegistryContext = createContext(null);
+function useRegisterPageContent(enabled = true) {
+  const register = useContext(PageContentRegistryContext);
+  useEffect(() => {
+    if (!enabled || !register) return;
+    return register();
+  }, [enabled, register]);
+}
 function useInComposer(force = false) {
   const [detected, setDetected] = useState(false);
   useEffect(() => {
@@ -4105,1417 +4114,1524 @@ 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();
-  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"
-          }
-        )
-      ]
+  const next = hydratePageResourceProps(props || {}, getPageResourceFields());
+  return /* @__PURE__ */ jsx(
+    ComponentContext.Provider,
+    {
+      value: { slots, props: next, layoutNodeId, componentId },
+      children
     }
   );
 }
-function EmptySlotHint({
-  label = "Click here to Add Component",
-  compact = false
+function Slot({
+  name,
+  className
 }) {
-  const iconSize = compact ? 20 : 28;
-  return /* @__PURE__ */ jsxs(
+  const context = useContext(ComponentContext);
+  if (!context) {
+    console.warn(
+      `[AmplifyUp SDK] Slot "${name}" only works inside a component rendered from your component registry`
+    );
+    return null;
+  }
+  const slotContent = context.slots?.[name];
+  const { ready: layoutReady } = useComposerLayoutStatus();
+  const slotState = resolveSlotState({
+    layoutReady,
+    hasContent: !!slotContent
+  });
+  const isEmpty = slotState === "empty";
+  const isEditorMode = typeof window !== "undefined" && // Check for preview mode flag set by proxy
+  (window.__AMPLIFYUP_PREVIEW_MODE__ === true || // Check URL query params
+  new URLSearchParams(window.location.search).get("preview") === "true" || new URLSearchParams(window.location.search).get("visualEditor") === "true" || // Check if in iframe from orchestrator (check referrer hostname/port)
+  window.self !== window.top && document.referrer && (() => {
+    try {
+      const referrerUrl = new URL(document.referrer);
+      return referrerUrl.hostname === "localhost" && referrerUrl.port === "5001" || referrerUrl.pathname.includes("/dashboard/composer") || referrerUrl.pathname.includes("/dashboard/routes/");
+    } catch {
+      return false;
+    }
+  })());
+  sdkDebugOnce(
+    `slot:${context.layoutNodeId || ""}:${name}`,
+    `[Slot:${name}]`,
+    {
+      slotState,
+      isEmpty,
+      isEditorMode,
+      availableSlotKeys: context.slots ? Object.keys(context.slots) : []
+    }
+  );
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "amplifyup-slot-placeholder",
+      className,
+      "data-slot-name": name,
+      "data-slot-id": name,
+      "data-amplifyup-slot": name,
+      "data-slot-state": slotState,
+      "data-slot-empty": isEmpty ? "true" : void 0,
+      "data-parent-node-id": context.layoutNodeId || void 0,
+      "data-parent-component-id": context.componentId || void 0,
       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"
+        // Only add minimum height when empty (for drop target visibility)
+        minHeight: isEmpty ? "60px" : void 0,
+        // Only add position relative for overlay positioning in editor mode
+        position: isEditorMode ? "relative" : void 0
       },
-      children: [
-        /* @__PURE__ */ jsx(
-          "span",
+      children: slotState === "loading" ? null : isEmpty ? isEditorMode ? /* @__PURE__ */ jsx(EmptySlotHint, { compact: true }) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "amplifyup-slot-placeholder",
+          style: {
+            minHeight: "60px",
+            color: "#9ca3af",
+            fontSize: "14px",
+            pointerEvents: "none"
+          },
+          children: `Empty slot: ${name}`
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        isEditorMode && /* @__PURE__ */ jsxs(
+          "div",
           {
-            className: "amplifyup-slot-placeholder-icon",
+            className: "amplifyup-slot-label",
             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
+              position: "absolute",
+              top: "4px",
+              left: "4px",
+              fontSize: "10px",
+              color: "#9ca3af",
+              pointerEvents: "none",
+              zIndex: 1
             },
-            children: /* @__PURE__ */ jsx(AddComponentIcon, { size: iconSize })
+            children: [
+              "Slot: ",
+              name
+            ]
           }
         ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "amplifyup-slot-placeholder-label",
-            style: {
-              fontSize: compact ? 13 : 15,
-              fontWeight: 600,
-              lineHeight: 1.3,
-              letterSpacing: "0.01em"
-            },
-            children: label
-          }
-        )
-      ]
+        slotContent
+      ] })
+    }
+  );
+}
+function isLikelyNonTextFieldName(name) {
+  const n = name.toLowerCase();
+  return n.includes("href") || n.includes("url") || n.includes("src") || n.includes("image") || n.includes("icon") || n.includes("overlay") || n.includes("color");
+}
+var COMPOSER_EMPTY_FIELD_HINT = "Click here to edit this field";
+var EMPTY_FIELD_PLACEHOLDERS = /* @__PURE__ */ new Set([
+  COMPOSER_EMPTY_FIELD_HINT,
+  "Click here to enter text",
+  "Sample Title",
+  "Sample Heading",
+  "Sample Subheading"
+]);
+function isComposerEmptyText(value) {
+  if (value === void 0 || value === null) return true;
+  if (typeof value !== "string") return false;
+  const trimmed = value.trim();
+  return trimmed === "" || EMPTY_FIELD_PLACEHOLDERS.has(trimmed);
+}
+function canInlineEdit(name, value) {
+  if (!name || isLikelyNonTextFieldName(name)) return false;
+  if (value !== void 0 && value !== null && typeof value === "object") {
+    return false;
+  }
+  if (typeof value === "boolean") return false;
+  return true;
+}
+function canInlineEditRichText(name, value) {
+  if (!name || isLikelyNonTextFieldName(name)) return false;
+  if (typeof value === "boolean") return false;
+  if (value !== void 0 && value !== null && typeof value === "object" && !Array.isArray(value)) {
+    return false;
+  }
+  return true;
+}
+function useComposerEditMode() {
+  return useSyncExternalStore(
+    subscribeComposerEdit,
+    isComposerEditMode,
+    getComposerEditModeServer
+  );
+}
+function useBoundField(field, value, name, component) {
+  const bound = resolveEditableBinding(field, value, name);
+  if (bound.requiresName) {
+    console.warn(
+      `[AmplifyUp SDK] ${component} value={\u2026} requires name="\u2026" for computed values`
+    );
+  }
+  const fieldValue = useComposerFieldValue(bound.name, bound.value, bound.ref);
+  return { editName: bound.name, fieldValue, ref: bound.ref };
+}
+function commitComposerField(layoutNodeId, componentId, name, value, ref) {
+  if (typeof window === "undefined" || window.parent === window) return;
+  window.parent.postMessage(
+    {
+      type: "AMPLIFYUP_FIELD_COMMIT",
+      layoutNodeId,
+      componentId,
+      fieldName: name,
+      value,
+      ...ref ? { ref } : {}
+    },
+    "*"
+  );
+}
+function looksLikeRichCanvasField(name) {
+  const tokens = String(name || "").replace(/([a-z])([A-Z])/g, "$1 $2").split(/[._\-\s/]+/).map((s) => s.toLowerCase()).filter(Boolean);
+  const last = tokens[tokens.length - 1] || "";
+  return last === "body" || last === "content" || last === "copy" || last === "excerpt" || last === "markdown" || last === "richtext";
+}
+var lastRichTextRequestAt = 0;
+function requestCanvasRichTextEdit(opts) {
+  if (typeof window === "undefined" || window.parent === window) return;
+  if (!opts.name) return;
+  if (opts.el.classList.contains("au-rte-active") || opts.el.querySelector(".ProseMirror")) {
+    return;
+  }
+  const now = Date.now();
+  if (now - lastRichTextRequestAt < 400) return;
+  lastRichTextRequestAt = now;
+  const rect = opts.el.getBoundingClientRect();
+  window.parent.postMessage(
+    {
+      type: "AMPLIFYUP_RICHTEXT_EDIT",
+      layoutNodeId: opts.layoutNodeId,
+      componentId: opts.componentId,
+      fieldName: opts.name,
+      value: opts.value,
+      ...opts.fieldRef ? { ref: opts.fieldRef } : {},
+      bounds: {
+        top: rect.top,
+        left: rect.left,
+        width: Math.max(rect.width, 240),
+        height: Math.max(rect.height, 64)
+      }
+    },
+    "*"
+  );
+}
+function placeCaret(el, atStart = false) {
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  range.collapse(atStart);
+  const sel = window.getSelection();
+  sel?.removeAllRanges();
+  sel?.addRange(range);
+}
+function ComposerInlineField({
+  name,
+  value,
+  className,
+  layoutNodeId,
+  componentId,
+  fieldRef,
+  rich = false
+}) {
+  const [focused, setFocused] = useState(false);
+  const elRef = useRef(null);
+  const storedEmpty = isComposerEmptyText(value);
+  const text = storedEmpty ? "" : formatFieldValue(value);
+  const hint = COMPOSER_EMPTY_FIELD_HINT;
+  const idleDisplay = storedEmpty ? hint : text;
+  const showHint = storedEmpty && !focused;
+  useEffect(() => {
+    const el = elRef.current;
+    if (!el) return;
+    if (document.activeElement === el) return;
+    if (el.querySelector(
+      "input, button, select, textarea, form, svg, iframe, img"
+    )) {
+      return;
     }
-  );
-}
-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) {
+    const next = idleDisplay || "";
+    if (el.textContent !== next) el.textContent = next;
+  }, [idleDisplay]);
+  const finishEdit = () => {
+    const raw = (elRef.current?.innerText ?? "").replace(/\u00a0/g, " ").replace(/\n+$/g, "");
+    const next = raw.trim() === "" ? "" : raw;
+    setFocused(false);
+    if (storedEmpty && next === "") {
+      if (elRef.current) elRef.current.textContent = hint;
+      if (typeof value === "string" && EMPTY_FIELD_PLACEHOLDERS.has(value.trim())) {
+        commitComposerField(layoutNodeId, componentId, name, "", fieldRef);
+      }
+      return;
+    }
+    if (next === text) return;
+    commitComposerField(layoutNodeId, componentId, name, next, fieldRef);
+  };
+  const openRichEditor = (event) => {
+    if (!isComposerEditMode() || !elRef.current) return;
+    event?.preventDefault();
+    event?.stopPropagation();
+    const source = typeof value === "string" && !storedEmpty ? value : text || "";
+    requestCanvasRichTextEdit({
+      el: elRef.current,
+      layoutNodeId,
+      componentId,
+      name,
+      value: source,
+      fieldRef
+    });
+  };
   return /* @__PURE__ */ jsx(
-    "div",
+    "span",
     {
-      "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"
+      ref: elRef,
+      className,
+      "data-amplifyup-field": name,
+      "data-amplifyup-field-type": rich ? "richtext" : "text",
+      "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,
+      "data-amplifyup-empty-hint": showHint ? "true" : void 0,
+      contentEditable: !rich,
+      suppressContentEditableWarning: true,
+      role: "textbox",
+      tabIndex: 0,
+      onMouseDown: (event) => {
+        event.stopPropagation();
       },
-      children: state === "empty" ? /* @__PURE__ */ jsx(EmptySlotHint, {}) : null
+      onClick: (event) => {
+        if (!isComposerEditMode()) return;
+        const link = event.target?.closest?.("a");
+        if (link) event.preventDefault();
+        if (rich) {
+          openRichEditor(event);
+          return;
+        }
+      },
+      onFocus: () => {
+        if (!isComposerEditMode()) return;
+        if (rich) {
+          openRichEditor();
+          return;
+        }
+        setFocused(true);
+        const el = elRef.current;
+        if (el && storedEmpty) {
+          el.textContent = "";
+          placeCaret(el, true);
+        }
+      },
+      onBlur: rich ? void 0 : finishEdit,
+      onKeyDown: (event) => {
+        event.stopPropagation();
+        if (event.key === "Enter" && !event.shiftKey) {
+          event.preventDefault();
+          event.currentTarget.blur();
+        }
+        if (event.key === "Escape") {
+          event.preventDefault();
+          if (elRef.current) elRef.current.textContent = idleDisplay || "";
+          setFocused(false);
+          event.currentTarget.blur();
+        }
+      },
+      style: {
+        cursor: "text",
+        outline: "1px dashed color-mix(in srgb, currentColor 40%, transparent)",
+        outlineOffset: "6px",
+        minWidth: "1ch",
+        minHeight: "1em",
+        // Do not force `inline` — that overrides Tailwind `block` and parks
+        // an empty-field hint on the same line as a sibling that has a value.
+        opacity: showHint ? 0.5 : void 0
+      }
     }
   );
 }
-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
+function ComposerInlineHtml({
+  name,
+  html,
+  sourceValue,
+  className,
+  Tag = "div",
+  layoutNodeId,
+  componentId,
+  fieldRef
 }) {
-  const client = useAmplifyUp();
-  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
+  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
     });
-    if (!ready) {
-      return /* @__PURE__ */ jsx(ComposerLayoutStatusProvider, { ready: false, children: previewLoading });
+  };
+  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"
     }
-    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)
+  });
+}
+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 (loading) {
-    return loadingComponent ? /* @__PURE__ */ jsx(Fragment, { children: loadingComponent }) : null;
+  if (value && typeof value === "object") {
+    return "";
   }
-  if (error) {
-    if (errorComponent) return /* @__PURE__ */ jsx(Fragment, { children: errorComponent(error) });
-    return fallback ? /* @__PURE__ */ jsx(Fragment, { children: fallback }) : null;
+  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 (!hasAmplifyLayout(pageConfig)) {
-    return fallback ? /* @__PURE__ */ jsx(Fragment, { children: fallback }) : null;
+  if (isFieldEnvelope(field) && Array.isArray(field.value)) {
+    console.error(`[AmplifyUp SDK] ${component}: ${FIELD_SCALAR_HINT}`);
+    return true;
   }
-  return /* @__PURE__ */ jsx(ComposerLayoutStatusProvider, { ready: true, children: /* @__PURE__ */ jsx(
-    AmplifyRenderer,
-    {
-      pageConfig: pageConfig ?? void 0,
-      renderComponent,
-      loadingComponent,
-      emptyComponent,
-      errorComponent
-    }
-  ) });
+  if (Array.isArray(fieldValue)) {
+    console.error(`[AmplifyUp SDK] ${component}: ${FIELD_SCALAR_HINT}`);
+    return true;
+  }
+  return false;
 }
-
-// src/slot-state.ts
-function resolveSlotState(opts) {
-  if (!opts.layoutReady) return "loading";
-  return opts.hasContent ? "filled" : "empty";
+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 slotShowsAddComponent(state) {
-  return state === "empty";
+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 slotStateFromEl(el) {
-  if (!el) return null;
-  const explicit = el.getAttribute("data-slot-state");
-  if (explicit === "loading" || explicit === "empty" || explicit === "filled") {
-    return explicit;
+function canComposerBind(field, ref, editName) {
+  if (isReadOnlyRowField(field) || isFieldEnvelope(field) && field.readOnly) {
+    warnReadOnlyRowField(editName || (isFieldEnvelope(field) ? field.name : ""));
+    return false;
   }
-  if (el.getAttribute("data-slot-empty") === "true") return "empty";
-  return null;
+  return true;
 }
-
-// src/composer-edit-mode.ts
-function isComposerEditMode() {
-  if (typeof window === "undefined") return false;
-  return isComposerPreview() && window.__AMPLIFYUP_EVENT_SELECTION__ !== 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 subscribeComposerEdit(onStoreChange) {
-  if (typeof window === "undefined") return () => {
-  };
-  window.addEventListener("amplifyup:composer-edit", onStoreChange);
-  return () => window.removeEventListener("amplifyup:composer-edit", onStoreChange);
+function hasOwnProp(props, key) {
+  return Object.prototype.hasOwnProperty.call(props, key);
 }
-function getComposerEditModeServer() {
-  return false;
+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 });
 }
-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
-    }
-  );
+function markdownToHtml(markdown) {
+  try {
+    const result = marked.parse(markdown, { async: false });
+    return typeof result === "string" ? result : "";
+  } catch {
+    return markdown;
+  }
 }
-function Slot({
-  name,
-  className
-}) {
+function RichText(props) {
+  const {
+    field,
+    value,
+    name,
+    className,
+    as: Tag = "div",
+    children
+  } = props;
   const context = useContext(ComponentContext);
-  if (!context) {
-    console.warn(`[AmplifyUp SDK] Slot "${name}" used outside ComponentContextProvider`);
+  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;
   }
-  const slotContent = context.slots?.[name];
-  const { ready: layoutReady } = useComposerLayoutStatus();
-  const slotState = resolveSlotState({
-    layoutReady,
-    hasContent: !!slotContent
-  });
-  const isEmpty = slotState === "empty";
-  const isEditorMode = typeof window !== "undefined" && // Check for preview mode flag set by proxy
-  (window.__AMPLIFYUP_PREVIEW_MODE__ === true || // Check URL query params
-  new URLSearchParams(window.location.search).get("preview") === "true" || new URLSearchParams(window.location.search).get("visualEditor") === "true" || // Check if in iframe from orchestrator (check referrer hostname/port)
-  window.self !== window.top && document.referrer && (() => {
-    try {
-      const referrerUrl = new URL(document.referrer);
-      return referrerUrl.hostname === "localhost" && referrerUrl.port === "5001" || referrerUrl.pathname.includes("/dashboard/composer") || referrerUrl.pathname.includes("/dashboard/routes/");
-    } catch {
-      return false;
-    }
-  })());
-  sdkDebugOnce(
-    `slot:${context.layoutNodeId || ""}:${name}`,
-    `[Slot:${name}]`,
-    {
-      slotState,
-      isEmpty,
-      isEditorMode,
-      availableSlotKeys: context.slots ? Object.keys(context.slots) : []
-    }
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className,
-      "data-slot-name": name,
-      "data-slot-id": name,
-      "data-amplifyup-slot": name,
-      "data-slot-state": slotState,
-      "data-slot-empty": isEmpty ? "true" : void 0,
-      "data-parent-node-id": context.layoutNodeId || void 0,
-      "data-parent-component-id": context.componentId || void 0,
-      style: {
-        // Only add minimum height when empty (for drop target visibility)
-        minHeight: isEmpty ? "60px" : void 0,
-        // Only add position relative for overlay positioning in editor mode
-        position: isEditorMode ? "relative" : void 0
-      },
-      children: slotState === "loading" ? null : isEmpty ? isEditorMode ? /* @__PURE__ */ jsx(EmptySlotHint, { compact: true }) : /* @__PURE__ */ jsx(
-        "div",
+  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,
         {
-          className: "amplifyup-slot-placeholder",
-          style: {
-            minHeight: "60px",
-            color: "#9ca3af",
-            fontSize: "14px",
-            pointerEvents: "none"
-          },
-          children: `Empty slot: ${name}`
+          name: editName,
+          value: fieldValue,
+          className,
+          layoutNodeId: context?.layoutNodeId,
+          componentId: context?.componentId,
+          fieldRef: ref,
+          rich: true
         }
-      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        isEditorMode && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "amplifyup-slot-label",
-            style: {
-              position: "absolute",
-              top: "4px",
-              left: "4px",
-              fontSize: "10px",
-              color: "#9ca3af",
-              pointerEvents: "none",
-              zIndex: 1
-            },
-            children: [
-              "Slot: ",
-              name
-            ]
-          }
-        ),
-        slotContent
-      ] })
+      );
     }
-  );
-}
-function isLikelyNonTextFieldName(name) {
-  const n = name.toLowerCase();
-  return n.includes("href") || n.includes("url") || n.includes("src") || n.includes("image") || n.includes("icon") || n.includes("overlay") || n.includes("color");
-}
-var COMPOSER_EMPTY_FIELD_HINT = "Click here to edit this field";
-var EMPTY_FIELD_PLACEHOLDERS = /* @__PURE__ */ new Set([
-  COMPOSER_EMPTY_FIELD_HINT,
-  "Click here to enter text",
-  "Sample Title",
-  "Sample Heading",
-  "Sample Subheading"
-]);
-function isComposerEmptyText(value) {
-  if (value === void 0 || value === null) return true;
-  if (typeof value !== "string") return false;
-  const trimmed = value.trim();
-  return trimmed === "" || EMPTY_FIELD_PLACEHOLDERS.has(trimmed);
-}
-function canInlineEdit(name, value) {
-  if (!name || isLikelyNonTextFieldName(name)) return false;
-  if (value !== void 0 && value !== null && typeof value === "object") {
-    return false;
+    return null;
   }
-  if (typeof value === "boolean") return false;
-  return true;
-}
-function canInlineEditRichText(name, value) {
-  if (!name || isLikelyNonTextFieldName(name)) return false;
-  if (typeof value === "boolean") return false;
-  if (value !== void 0 && value !== null && typeof value === "object" && !Array.isArray(value)) {
-    return false;
+  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) : "";
   }
-  return true;
-}
-function useComposerEditMode() {
-  return useSyncExternalStore(
-    subscribeComposerEdit,
-    isComposerEditMode,
-    getComposerEditModeServer
-  );
-}
-function useBoundField(field, value, name, component) {
-  const bound = resolveEditableBinding(field, value, name);
-  if (bound.requiresName) {
-    console.warn(
-      `[AmplifyUp SDK] ${component} value={\u2026} requires name="\u2026" for computed values`
+  if (!html) {
+    return null;
+  }
+  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
+      }
     );
   }
-  const fieldValue = useComposerFieldValue(bound.name, bound.value, bound.ref);
-  return { editName: bound.name, fieldValue, ref: bound.ref };
+  return /* @__PURE__ */ jsx(Tag, { className, dangerouslySetInnerHTML: { __html: html } });
 }
-function commitComposerField(layoutNodeId, componentId, name, value, ref) {
-  if (typeof window === "undefined" || window.parent === window) return;
-  window.parent.postMessage(
-    {
-      type: "AMPLIFYUP_FIELD_COMMIT",
-      layoutNodeId,
-      componentId,
-      fieldName: name,
-      value,
-      ...ref ? { ref } : {}
-    },
-    "*"
-  );
+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 looksLikeRichCanvasField(name) {
-  const tokens = String(name || "").replace(/([a-z])([A-Z])/g, "$1 $2").split(/[._\-\s/]+/).map((s) => s.toLowerCase()).filter(Boolean);
-  const last = tokens[tokens.length - 1] || "";
-  return last === "body" || last === "content" || last === "copy" || last === "excerpt" || last === "markdown" || last === "richtext";
+function imageSrc(value) {
+  if (typeof value === "string") return value.trim();
+  if (isPortableImageValue(value)) return value.url.trim();
+  return "";
 }
-var lastRichTextRequestAt = 0;
-function requestCanvasRichTextEdit(opts) {
-  if (typeof window === "undefined" || window.parent === window) return;
-  if (!opts.name) return;
-  if (opts.el.classList.contains("au-rte-active") || opts.el.querySelector(".ProseMirror")) {
-    return;
+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 };
   }
-  const now = Date.now();
-  if (now - lastRichTextRequestAt < 400) return;
-  lastRichTextRequestAt = now;
-  const rect = opts.el.getBoundingClientRect();
-  window.parent.postMessage(
-    {
-      type: "AMPLIFYUP_RICHTEXT_EDIT",
-      layoutNodeId: opts.layoutNodeId,
-      componentId: opts.componentId,
-      fieldName: opts.name,
-      value: opts.value,
-      ...opts.fieldRef ? { ref: opts.fieldRef } : {},
-      bounds: {
-        top: rect.top,
-        left: rect.left,
-        width: Math.max(rect.width, 240),
-        height: Math.max(rect.height, 64)
-      }
+  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 } : {}
     },
-    "*"
-  );
-}
-function placeCaret(el, atStart = false) {
-  const range = document.createRange();
-  range.selectNodeContents(el);
-  range.collapse(atStart);
-  const sel = window.getSelection();
-  sel?.removeAllRanges();
-  sel?.addRange(range);
+    value,
+    name: editName
+  };
 }
-function ComposerInlineField({
-  name,
-  value,
-  className,
-  layoutNodeId,
-  componentId,
-  fieldRef,
-  rich = false
-}) {
-  const [focused, setFocused] = useState(false);
-  const elRef = useRef(null);
-  const storedEmpty = isComposerEmptyText(value);
-  const text = storedEmpty ? "" : formatFieldValue(value);
-  const hint = COMPOSER_EMPTY_FIELD_HINT;
-  const idleDisplay = storedEmpty ? hint : text;
-  const showHint = storedEmpty && !focused;
-  useEffect(() => {
-    const el = elRef.current;
-    if (!el) return;
-    if (document.activeElement === el) return;
-    if (el.querySelector(
-      "input, button, select, textarea, form, svg, iframe, img"
-    )) {
-      return;
-    }
-    const next = idleDisplay || "";
-    if (el.textContent !== next) el.textContent = next;
-  }, [idleDisplay]);
-  const finishEdit = () => {
-    const raw = (elRef.current?.innerText ?? "").replace(/\u00a0/g, " ").replace(/\n+$/g, "");
-    const next = raw.trim() === "" ? "" : raw;
-    setFocused(false);
-    if (storedEmpty && next === "") {
-      if (elRef.current) elRef.current.textContent = hint;
-      if (typeof value === "string" && EMPTY_FIELD_PLACEHOLDERS.has(value.trim())) {
-        commitComposerField(layoutNodeId, componentId, name, "", fieldRef);
+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"
+  );
+  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;
-    }
-    if (next === text) return;
-    commitComposerField(layoutNodeId, componentId, name, next, fieldRef);
-  };
-  const openRichEditor = (event) => {
-    if (!isComposerEditMode() || !elRef.current) return;
-    event?.preventDefault();
-    event?.stopPropagation();
-    const source = typeof value === "string" && !storedEmpty ? value : text || "";
-    requestCanvasRichTextEdit({
-      el: elRef.current,
-      layoutNodeId,
-      componentId,
-      name,
-      value: source,
-      fieldRef
-    });
-  };
+    );
+  }
   return /* @__PURE__ */ jsx(
-    "span",
+    "img",
     {
-      ref: elRef,
+      ...imgProps,
+      ...fieldAttrs,
+      src,
+      alt,
       className,
-      "data-amplifyup-field": name,
-      "data-amplifyup-field-type": rich ? "richtext" : "text",
-      "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,
-      "data-amplifyup-empty-hint": showHint ? "true" : void 0,
-      contentEditable: !rich,
-      suppressContentEditableWarning: true,
-      role: "textbox",
-      tabIndex: 0,
-      onMouseDown: (event) => {
-        event.stopPropagation();
-      },
-      onClick: (event) => {
-        if (!isComposerEditMode()) return;
-        const link = event.target?.closest?.("a");
-        if (link) event.preventDefault();
-        if (rich) {
-          openRichEditor(event);
-          return;
-        }
-      },
-      onFocus: () => {
-        if (!isComposerEditMode()) return;
-        if (rich) {
-          openRichEditor();
-          return;
-        }
-        setFocused(true);
-        const el = elRef.current;
-        if (el && storedEmpty) {
-          el.textContent = "";
-          placeCaret(el, true);
-        }
-      },
-      onBlur: rich ? void 0 : finishEdit,
-      onKeyDown: (event) => {
-        event.stopPropagation();
-        if (event.key === "Enter" && !event.shiftKey) {
-          event.preventDefault();
-          event.currentTarget.blur();
-        }
-        if (event.key === "Escape") {
-          event.preventDefault();
-          if (elRef.current) elRef.current.textContent = idleDisplay || "";
-          setFocused(false);
-          event.currentTarget.blur();
-        }
-      },
+      width,
+      height,
       style: {
-        cursor: "text",
-        outline: "1px dashed color-mix(in srgb, currentColor 40%, transparent)",
-        outlineOffset: "6px",
-        minWidth: "1ch",
-        minHeight: "1em",
-        // Do not force `inline` — that overrides Tailwind `block` and parks
-        // an empty-field hint on the same line as a sibling that has a value.
-        opacity: showHint ? 0.5 : void 0
+        ...typeof imgProps.style === "object" && imgProps.style ? imgProps.style : {},
+        ...composerEdit && fieldAttrs ? { cursor: "pointer" } : null
       }
     }
   );
 }
-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"
+
+// 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\`.`
+      );
     }
-  });
-}
-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;
+    index.set(key, component);
   }
-  if (isFieldEnvelope(field) && Array.isArray(field.value)) {
-    console.error(`[AmplifyUp SDK] ${component}: ${FIELD_SCALAR_HINT}`);
-    return true;
+  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."
+    ]
   }
-  if (Array.isArray(fieldValue)) {
-    console.error(`[AmplifyUp SDK] ${component}: ${FIELD_SCALAR_HINT}`);
-    return true;
+);
+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 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.`
+  return /* @__PURE__ */ jsx(
+    ComponentContextProvider,
+    {
+      props,
+      slots,
+      layoutNodeId,
+      componentId,
+      children: /* @__PURE__ */ jsx(Component2, { ...props })
+    }
   );
-}
-function canComposerBind(field, ref, editName) {
-  if (isReadOnlyRowField(field) || isFieldEnvelope(field) && field.readOnly) {
-    warnReadOnlyRowField(editName || (isFieldEnvelope(field) ? field.name : ""));
-    return false;
+};
+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.`
+    );
   }
-  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)`
+  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;
   }
-  if (empty) return null;
-  const text = formatFieldValue(fieldValue);
-  if (!text) return null;
-  return /* @__PURE__ */ jsx("span", { className, children: text });
+};
+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 markdownToHtml(markdown) {
-  try {
-    const result = marked.parse(markdown, { async: false });
-    return typeof result === "string" ? result : "";
-  } catch {
-    return markdown;
+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" })
+      ] })
+    ] }) }) }) });
   }
-}
-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);
+    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
+        );
+      }
     }
-  } else {
-    const text = formatFieldValue(fieldValue);
-    html = text ? markdownToHtml(text) : "";
-  }
-  if (!html) {
-    return null;
-  }
-  if (composerEdit && canEdit) {
+    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))
+    }
+  ) });
+}
+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 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 hasAmplifyLayout(pageConfig) {
+  return !!(pageConfig && pageConfig.id !== "default" && Array.isArray(pageConfig.layoutTree) && pageConfig.layoutTree.length > 0);
 }
-function imageSrc(value) {
-  if (typeof value === "string") return value.trim();
-  if (isPortableImageValue(value)) return value.url.trim();
-  return "";
+function normalizeRoutePath(route) {
+  if (!route) return "";
+  const path = route.split("?")[0] || "/";
+  if (path.length > 1 && path.endsWith("/")) return path.replace(/\/+$/, "");
+  return path || "/";
 }
-function leafText(field) {
-  if (isFieldEnvelope(field)) return field.value;
-  return field;
+function samePageRoute(a, b) {
+  const ar = normalizeRoutePath(a?.route);
+  const br = normalizeRoutePath(b?.route);
+  return !!ar && !!br && ar === br;
 }
-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 layoutTreesEqual(a, b) {
+  if (!a || !b) return a === b;
+  return JSON.stringify(a.layoutTree) === JSON.stringify(b.layoutTree);
 }
-function Image(props) {
+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 {
@@ -5599,11 +5715,24 @@ function AmplifyUpProvider({
     if (!initialized || !pageContext) return;
     getSDK().setPageContext(pageContext);
   }, [initialized, pageContextKey]);
+  const contentMountsRef = useRef(0);
+  const [hasPageContent, setHasPageContent] = useState(false);
+  const registerPageContent = useCallback(() => {
+    contentMountsRef.current += 1;
+    setHasPageContent(true);
+    return () => {
+      contentMountsRef.current -= 1;
+      if (contentMountsRef.current === 0) setHasPageContent(false);
+    };
+  }, []);
+  const [initVersion, setInitVersion] = useState(0);
+  const overlayEnabled = () => isComposerPreview() || config.clientPersonalization !== false;
   useEffect(() => {
     let cancelled = false;
     const sdk = getSDK();
-    const heldRoute = isComposerPreview() || config.clientPersonalization !== false ? getActualRoute() : null;
-    if (heldRoute) sdk.beginPageResolve(heldRoute);
+    if (contentMountsRef.current > 0 && overlayEnabled()) {
+      sdk.beginPageResolve(getActualRoute());
+    }
     const run = async () => {
       try {
         await sdk.init({
@@ -5613,20 +5742,59 @@ function AmplifyUpProvider({
         if (cancelled) return;
         if (pageContext) sdk.setPageContext(pageContext);
         const actualRoute = getActualRoute();
-        if (!actualRoute) {
+        if (actualRoute) sdk.routeChange(actualRoute);
+      } catch (err) {
+        if (cancelled) return;
+        console.error("Error initializing AmplifyUp SDK:", err);
+        setError(err instanceof Error ? err.message : "Unknown error");
+      } finally {
+        if (!cancelled) {
           setInitialized(true);
-          setLoading(false);
-          return;
+          setInitVersion((v) => v + 1);
         }
-        sdk.routeChange(actualRoute);
+      }
+    };
+    void run();
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    pathname,
+    config.trackingId,
+    config.target,
+    config.debug,
+    config.dev,
+    config.siteId,
+    config.clientPersonalization,
+    pageContextKey
+  ]);
+  const resolveRunRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (resolveRunRef.current) resolveRunRef.current.cancelled = true;
+    };
+  }, []);
+  useEffect(() => {
+    if (initVersion === 0) return;
+    if (resolveRunRef.current?.version === initVersion) return;
+    const sdk = getSDK();
+    const actualRoute = getActualRoute();
+    if (!actualRoute || contentMountsRef.current === 0 || !overlayEnabled()) {
+      if (actualRoute) sdk.endPageResolve(actualRoute);
+      setPageConfig(null);
+      setLoading(false);
+      return;
+    }
+    if (resolveRunRef.current) resolveRunRef.current.cancelled = true;
+    const runState = { version: initVersion, cancelled: false };
+    resolveRunRef.current = runState;
+    const finish = () => {
+      sdk.endPageResolve(actualRoute);
+      if (!runState.cancelled) setLoading(false);
+    };
+    const run = async () => {
+      try {
         const preview = isComposerPreview();
-        const overlay = preview || config.clientPersonalization !== false;
-        if (!overlay) {
-          setInitialized(true);
-          setPageConfig(null);
-          setLoading(false);
-          return;
-        }
         if (loadedRouteRef.current && loadedRouteRef.current !== actualRoute) {
           setPageConfig(null);
           setError(null);
@@ -5635,9 +5803,7 @@ function AmplifyUpProvider({
         const orchestratorUrl = sdk.getOrchestratorUrl();
         const trackingId = sdk.getTrackingId();
         if (!trackingId || !orchestratorUrl || !edgeUrl) {
-          setInitialized(true);
           setError("SDK not initialized");
-          setLoading(false);
           return;
         }
         let variantKeys;
@@ -5670,7 +5836,7 @@ function AmplifyUpProvider({
           variantKeys,
           fetchOrchestratorPage: (route, isPreview) => sdk.fetchPageConfig(route, isPreview)
         });
-        if (cancelled) return;
+        if (runState.cancelled) return;
         const nextConfig = result.pageConfig || {
           id: "default",
           route: actualRoute,
@@ -5687,7 +5853,6 @@ function AmplifyUpProvider({
             result.pageConfig.pageTaxonomies || null
           );
         }
-        setInitialized(true);
         setSource((prev) => prev === result.source ? prev : result.source);
         setMeta(
           (prev) => prev === result.meta || JSON.stringify(prev) === JSON.stringify(result.meta) ? prev : result.meta
@@ -5701,31 +5866,17 @@ function AmplifyUpProvider({
         });
         loadedRouteRef.current = actualRoute;
       } catch (err) {
-        if (cancelled) return;
+        if (runState.cancelled) return;
         console.error("Error fetching page config:", err);
-        setInitialized(true);
         setError(err instanceof Error ? err.message : "Unknown error");
         setSource(null);
         setMeta(null);
       } finally {
-        if (heldRoute) sdk.endPageResolve(heldRoute);
-        if (!cancelled) setLoading(false);
+        finish();
       }
     };
     void run();
-    return () => {
-      cancelled = true;
-    };
-  }, [
-    pathname,
-    config.trackingId,
-    config.target,
-    config.debug,
-    config.dev,
-    config.siteId,
-    config.clientPersonalization,
-    pageContextKey
-  ]);
+  }, [initVersion, hasPageContent]);
   useEffect(() => {
     const applyLayoutTree = (layoutTree) => {
       if (!Array.isArray(layoutTree)) return;
@@ -5759,13 +5910,13 @@ function AmplifyUpProvider({
       window.removeEventListener("amplifyup:layout-patch", onCustom);
     };
   }, []);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(PageContentRegistryContext.Provider, { value: registerPageContent, children: /* @__PURE__ */ jsx(
     AmplifyUpContext.Provider,
     {
       value: { pageConfig, loading, error, source, meta },
       children
     }
-  );
+  ) });
 }
 function useAmplifyUp() {
   const context = useContext(AmplifyUpContext);
@@ -5775,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