@amplifyup/sdk 0.1.60 → 0.1.62

package/dist/react.mjs

@@ -1,7 +1,7 @@
 'use client';
-import React, { createContext, memo, useState, useEffect, Fragment as Fragment$1, useContext, Component, useRef, useSyncExternalStore } from 'react';
-import { marked } from 'marked';
+import React2, { createContext, memo, useState, useEffect, Fragment as Fragment$1, useContext, Component, useMemo, useRef, useSyncExternalStore, useCallback } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { marked } from 'marked';
 
 /* @amplifyup/sdk - https://amplifyup.ai */
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
@@ -405,6 +405,116 @@ function isComposerPreview() {
   return false;
 }
 
+// src/field-envelope.ts
+var FIELDS_BRAND = Symbol("amplifyup.fields");
+function isBrandedFields(value) {
+  return !!value && typeof value === "object" && FIELDS_BRAND in value;
+}
+function brandFields(bag) {
+  if (isBrandedFields(bag)) return bag;
+  Object.defineProperty(bag, FIELDS_BRAND, {
+    value: true,
+    enumerable: false,
+    configurable: false
+  });
+  return bag;
+}
+function isFieldEnvelope(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const rec = value;
+  return typeof rec.name === "string" && "value" in rec && !("url" in rec);
+}
+function isPortableImageShape(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  return "url" in value;
+}
+function joinPath(prefix, key) {
+  return prefix ? `${prefix}.${key}` : key;
+}
+function emptyValue(raw) {
+  if (raw === void 0) return null;
+  return raw;
+}
+function toFieldEnvelopes(source, prefix = "") {
+  const input = source && typeof source === "object" && !Array.isArray(source) ? source : {};
+  if (isBrandedFields(input)) {
+    return input;
+  }
+  const out = {};
+  for (const [key, raw] of Object.entries(input)) {
+    const path = joinPath(prefix, key);
+    if (isFieldEnvelope(raw)) {
+      out[key] = { value: raw.value ?? null, name: raw.name || path };
+      continue;
+    }
+    if (raw && typeof raw === "object" && !Array.isArray(raw) && !isPortableImageShape(raw) && !raw.$$typeof) {
+      out[key] = toFieldEnvelopes(raw, path);
+      continue;
+    }
+    out[key] = { value: emptyValue(raw), name: path };
+  }
+  return brandFields(out);
+}
+function attachFieldEnvelopes(props) {
+  const raw = props && typeof props === "object" ? { ...props } : {};
+  if (isBrandedFields(raw.fields)) return raw;
+  const { fields: existing, ...content } = raw;
+  const source = existing && typeof existing === "object" && !isFieldEnvelope(existing) ? existing : content;
+  return { ...raw, fields: toFieldEnvelopes(source) };
+}
+function walkLayoutNodes(nodes) {
+  if (!Array.isArray(nodes)) return;
+  for (const node of nodes) {
+    if (!node || typeof node !== "object") continue;
+    const rec = node;
+    rec.props = attachFieldEnvelopes(rec.props);
+    for (const slot of rec.slots || []) {
+      walkLayoutNodes(slot.children);
+    }
+  }
+}
+function envelopePageConfig(page) {
+  if (!page || typeof page !== "object") return page ?? null;
+  const tree = page.layoutTree;
+  if (Array.isArray(tree)) walkLayoutNodes(tree);
+  return page;
+}
+function collectFieldPatches(props) {
+  const out = [];
+  const walk = (obj, prefix) => {
+    for (const [key, raw] of Object.entries(obj)) {
+      if (key === "fields" && raw && typeof raw === "object" && !Array.isArray(raw) && !isFieldEnvelope(raw)) {
+        walk(raw, prefix);
+        continue;
+      }
+      const path = joinPath(prefix, key);
+      if (isFieldEnvelope(raw)) {
+        out.push({ name: raw.name || path, value: raw.value });
+        continue;
+      }
+      if (raw && typeof raw === "object" && !Array.isArray(raw) && !isPortableImageShape(raw) && !raw.$$typeof) {
+        walk(raw, path);
+        continue;
+      }
+      out.push({ name: path, value: emptyValue(raw) });
+    }
+  };
+  if (props && typeof props === "object" && !Array.isArray(props)) {
+    walk(props, "");
+  }
+  return out;
+}
+function resolveEditableBinding(field, value, name) {
+  if (isFieldEnvelope(field)) {
+    return { name: field.name, value: field.value, requiresName: false };
+  }
+  return {
+    name: name || "",
+    value,
+    requiresName: value !== void 0 && !name
+  };
+}
+
 // src/page-context.ts
 function extractRouteParams(pattern, url) {
   const patternParts = String(pattern || "").split("/").filter(Boolean);
@@ -588,10 +698,34 @@ function hydratePageResourceValue(value, fields) {
   if (value.path) return getByDotPath(fields, value.path) ?? null;
   return fields;
 }
+function hydrateFieldsBag(bag, fields) {
+  const out = {};
+  for (const [key, val] of Object.entries(bag)) {
+    if (val && typeof val === "object" && !Array.isArray(val) && typeof val.name === "string" && "value" in val && !("url" in val)) {
+      const env = val;
+      out[key] = {
+        name: env.name,
+        value: isPageResourceSentinel(env.value) ? hydratePageResourceValue(env.value, fields) : env.value
+      };
+      continue;
+    }
+    if (val && typeof val === "object" && !Array.isArray(val) && !("url" in val)) {
+      out[key] = hydrateFieldsBag(val, fields);
+      continue;
+    }
+    out[key] = isPageResourceSentinel(val) ? hydratePageResourceValue(val, fields) : val;
+  }
+  return out;
+}
 function hydratePageResourceProps(props, fields) {
   const source = props && typeof props === "object" ? props : {};
   const out = { ...source };
+  if (out.fields && typeof out.fields === "object" && !Array.isArray(out.fields)) {
+    const next = hydrateFieldsBag(out.fields, fields);
+    out.fields = isBrandedFields(out.fields) ? brandFields(next) : next;
+  }
   for (const [key, val] of Object.entries(out)) {
+    if (key === "fields") continue;
     if (isPageResourceSentinel(val)) {
       out[key] = hydratePageResourceValue(val, fields);
     }
@@ -728,7 +862,25 @@ async function fetchEdgeResolve(options) {
       body
     );
   }
-  return body;
+  return envelopeResolvedPayload(body);
+}
+function envelopeResolvedComponent(node) {
+  node.props = attachFieldEnvelopes(node.props);
+  if (!node.children) return;
+  for (const kids of Object.values(node.children)) {
+    for (const child of kids || []) envelopeResolvedComponent(child);
+  }
+}
+function envelopeResolvedPayload(payload) {
+  if (payload.tree) {
+    for (const node of payload.tree) envelopeResolvedComponent(node);
+  }
+  if (payload.zones) {
+    for (const roots of Object.values(payload.zones)) {
+      for (const node of roots || []) envelopeResolvedComponent(node);
+    }
+  }
+  return payload;
 }
 
 // src/edge/mapResolvedToPageConfig.ts
@@ -788,7 +940,9 @@ async function fetchContent(options) {
   const preview = options.preview ?? (typeof window !== "undefined" ? isComposerPreview() : false);
   if (preview) {
     try {
-      const page = await options.fetchOrchestratorPage(options.route, true);
+      const page = envelopePageConfig(
+        await options.fetchOrchestratorPage(options.route, true)
+      );
       return {
         pageConfig: page,
         source: "orchestrator",
@@ -2059,7 +2213,7 @@ Available Console Commands:
         this.refreshEventTracking();
       }, 800);
     }
-    return pageConfig;
+    return envelopePageConfig(pageConfig);
   }
   /**
    * Set up view-level event tracking based on configuration
@@ -3432,125 +3586,66 @@ function getSDK(adapter) {
 var trackContentView = (contentId, contentType, properties) => getSDK().trackContentView(contentId, contentType, properties);
 var refreshEventTracking = () => getSDK().refreshEventTracking();
 getSDK();
-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"
-          }
-        )
-      ]
+
+// src/composer-store.ts
+var ComposerFieldStore = class {
+  constructor() {
+    this.values = /* @__PURE__ */ new Map();
+    this.listeners = /* @__PURE__ */ new Map();
+  }
+  get(name) {
+    return this.values.has(name) ? this.values.get(name) : void 0;
+  }
+  set(name, value) {
+    if (!name) return;
+    this.values.set(name, value);
+    const set = this.listeners.get(name);
+    if (!set) return;
+    for (const fn of set) fn();
+  }
+  subscribe(name, fn) {
+    if (!name) return () => {
+    };
+    let set = this.listeners.get(name);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      this.listeners.set(name, set);
     }
-  );
+    set.add(fn);
+    return () => {
+      set.delete(fn);
+      if (set.size === 0) this.listeners.delete(name);
+    };
+  }
+};
+var ComposerStoreContext = createContext(null);
+function matchesNode(eventNodeId, layoutNodeId) {
+  if (eventNodeId && layoutNodeId && String(eventNodeId) !== String(layoutNodeId)) {
+    return false;
+  }
+  return true;
 }
-function EmptySlotHint({
-  label = "Click here to Add Component",
-  compact = false
+function ComposerProvider({
+  layoutNodeId,
+  children
 }) {
-  const iconSize = compact ? 20 : 28;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "amplifyup-slot-placeholder",
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: compact ? 8 : 12,
-        minHeight: compact ? 60 : void 0,
-        width: "100%",
-        pointerEvents: "none",
-        textAlign: "center",
-        boxSizing: "border-box",
-        padding: compact ? "12px 8px" : "24px 16px"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "amplifyup-slot-placeholder-icon",
-            style: {
-              display: "inline-flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: compact ? 36 : 48,
-              height: compact ? 36 : 48,
-              borderRadius: 12,
-              border: "1.5px dashed currentColor",
-              opacity: 0.9
-            },
-            children: /* @__PURE__ */ jsx(AddComponentIcon, { size: iconSize })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "amplifyup-slot-placeholder-label",
-            style: {
-              fontSize: compact ? 13 : 15,
-              fontWeight: 600,
-              lineHeight: 1.3,
-              letterSpacing: "0.01em"
-            },
-            children: label
-          }
-        )
-      ]
-    }
-  );
-}
-var ComponentContext = createContext(null);
-function useLiveComposerProps(layoutNodeId, props) {
-  const [patch, setPatch] = useState(null);
+  const storeRef = useRef(null);
+  if (!storeRef.current) storeRef.current = new ComposerFieldStore();
+  const store = storeRef.current;
   useEffect(() => {
-    setPatch(null);
-    const matchesNode = (nodeId) => {
-      if (nodeId && layoutNodeId && String(nodeId) !== String(layoutNodeId)) {
-        return false;
-      }
-      return true;
-    };
     const applyField = (fieldName, value, nodeId) => {
       if (!fieldName || typeof fieldName !== "string") return;
-      if (!matchesNode(nodeId)) return;
-      setPatch((prev) => ({ ...prev || {}, [fieldName]: value }));
+      if (!matchesNode(nodeId, layoutNodeId)) return;
+      store.set(fieldName, value);
     };
     const applyProps = (nextProps, nodeId) => {
       if (!nextProps || typeof nextProps !== "object" || Array.isArray(nextProps)) {
         return;
       }
-      if (!matchesNode(nodeId)) return;
-      setPatch((prev) => ({
-        ...prev || {},
-        ...nextProps
-      }));
+      if (!matchesNode(nodeId, layoutNodeId)) return;
+      for (const patch of collectFieldPatches(nextProps)) {
+        store.set(patch.name, patch.value);
+      }
     };
     const onPatch = (event) => {
       const detail = event.detail || {};
@@ -3576,1280 +3671,1348 @@ function useLiveComposerProps(layoutNodeId, props) {
       window.removeEventListener("amplifyup:props-patch", onPropsPatch);
       window.removeEventListener("message", onMessage);
     };
-  }, [layoutNodeId]);
-  return patch ? { ...props, ...patch } : props;
+  }, [layoutNodeId, store]);
+  return /* @__PURE__ */ jsx(ComposerStoreContext.Provider, { value: store, children });
 }
-function useComponentProps() {
-  const context = useContext(ComponentContext);
-  if (!context) {
-    console.warn(
-      "[AmplifyUp SDK] useComponentProps used outside ComponentContextProvider"
-    );
-    return {};
-  }
-  return context.props || {};
+function useComposerFieldValue(name, fallback) {
+  const store = useContext(ComposerStoreContext);
+  const subscribe = useCallback(
+    (onStoreChange) => {
+      if (!store || !name) return () => {
+      };
+      return store.subscribe(name, onStoreChange);
+    },
+    [store, name]
+  );
+  const getSnapshot = useCallback(() => {
+    if (!store || !name) return void 0;
+    return store.get(name);
+  }, [store, name]);
+  const overlay = useSyncExternalStore(subscribe, getSnapshot, () => void 0);
+  return overlay !== void 0 ? overlay : fallback;
 }
-function ComponentContextProvider({
-  children,
-  slots,
-  props,
+function MaybeComposerProvider({
+  enabled,
   layoutNodeId,
-  componentId
+  children
 }) {
-  const liveProps = useLiveComposerProps(
-    layoutNodeId,
-    hydratePageResourceProps(props || {}, getPageResourceFields())
+  const content = useMemo(() => children, [children]);
+  if (!enabled) return /* @__PURE__ */ jsx(Fragment, { children: content });
+  return /* @__PURE__ */ jsx(ComposerProvider, { layoutNodeId, 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 : {}
   );
+  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",
+          {
+            "data-amplifyup-render-error": "",
+            "data-component-id": this.props.componentId,
+            "data-node-id": this.props.nodeId,
+            style: {
+              margin: "1rem 0",
+              padding: "0.75rem 1rem",
+              border: "1px solid #fca5a5",
+              borderRadius: "0.5rem",
+              background: "#fef2f2",
+              color: "#991b1b",
+              fontSize: "0.875rem"
+            },
+            children: [
+              'Component "',
+              this.props.componentId,
+              '" failed to render:',
+              " ",
+              this.state.error.message
+            ]
+          }
+        );
+      }
+      return null;
+    }
+    return this.props.children;
+  }
+};
+function NodeWithFields({
+  nodeId,
+  componentId,
+  props,
+  slots,
+  renderComponent,
+  composerPreview
+}) {
   return /* @__PURE__ */ jsx(
-    ComponentContext.Provider,
+    MaybeComposerProvider,
     {
-      value: { slots, props: liveProps, layoutNodeId, componentId },
-      children
+      enabled: !!(composerPreview || isComposerPreview()),
+      layoutNodeId: nodeId,
+      children: renderComponent(componentId, props, slots, {
+        layoutNodeId: nodeId
+      })
     }
   );
 }
-function Slot({
-  name,
-  className
+function AmplifyRendererInner({
+  renderComponent,
+  pageConfig: serverPageConfig,
+  loadingComponent,
+  errorComponent,
+  emptyComponent,
+  composerPreview
 }) {
-  const context = useContext(ComponentContext);
-  if (!context) {
-    console.warn(`[AmplifyUp SDK] Slot "${name}" used outside ComponentContextProvider`);
-    return null;
-  }
-  const slotContent = context.slots?.[name];
-  const isEmpty = !slotContent;
-  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}]`,
-    {
-      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-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: 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-label",
-            style: {
-              position: "absolute",
-              top: "4px",
-              left: "4px",
-              fontSize: "10px",
-              color: "#9ca3af",
-              pointerEvents: "none",
-              zIndex: 1
-            },
-            children: [
-              "Slot: ",
-              name
-            ]
-          }
-        ),
-        slotContent
-      ] })
-    }
-  );
-}
-function isComposerEditMode() {
-  if (typeof window === "undefined") return false;
-  return isComposerPreview() && window.__AMPLIFYUP_EVENT_SELECTION__ !== true;
-}
-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");
-}
-function isPlainTextValue(value) {
-  return typeof value === "string" || typeof value === "number";
-}
-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 isReactNodeFallback(fallback) {
-  if (fallback == null || fallback === false) return false;
-  return !isPlainTextValue(fallback);
-}
-function classNameIsBlock(className) {
-  return /(?:^|\s)block(?:\s|$)/.test(className || "");
-}
-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 inferEditName(explicitName, contextProps, sourceValue) {
-  if (explicitName) return explicitName;
-  if (!contextProps) return "";
-  const keys = Object.keys(contextProps).filter(
-    (key) => Object.is(contextProps[key], sourceValue)
-  );
-  if (keys.length === 1) return keys[0];
-  if (keys.length === 0 || isComposerEmptyText(sourceValue)) return "";
-  return keys[0];
-}
-function subscribeComposerEdit(onStoreChange) {
-  if (typeof window === "undefined") return () => {
-  };
-  window.addEventListener("amplifyup:composer-edit", onStoreChange);
-  return () => window.removeEventListener("amplifyup:composer-edit", onStoreChange);
-}
-function useComposerEditMode() {
-  return useSyncExternalStore(
-    subscribeComposerEdit,
-    isComposerEditMode,
-    () => false
-  );
-}
-function useFieldOverlay(layoutNodeId, name, source) {
-  const [overlay, setOverlay] = useState(void 0);
+  const clientHook = useAmplifyUp();
+  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(() => {
-    const onPatch = (event) => {
-      const detail = event.detail || {};
-      if (detail.fieldName !== name) return;
-      if (detail.layoutNodeId && layoutNodeId && String(detail.layoutNodeId) !== String(layoutNodeId)) {
+    if (typeof window !== "undefined") {
+      if (window.__AMPLIFYUP_PREVIEW_MODE__ === true) {
         return;
       }
-      setOverlay(detail.value);
-    };
-    window.addEventListener("amplifyup:field-patch", onPatch);
-    return () => window.removeEventListener("amplifyup:field-patch", onPatch);
-  }, [layoutNodeId, name]);
-  return overlay !== void 0 ? overlay : source;
-}
-function commitComposerField(layoutNodeId, componentId, name, value) {
-  if (typeof window === "undefined" || window.parent === window) return;
-  window.parent.postMessage(
-    {
-      type: "AMPLIFYUP_FIELD_COMMIT",
-      layoutNodeId,
-      componentId,
-      fieldName: name,
-      value
-    },
-    "*"
-  );
-}
-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;
-  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,
-      bounds: {
-        top: rect.top,
-        left: rect.left,
-        width: Math.max(rect.width, 240),
-        height: Math.max(rect.height, 64)
+      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;
       }
-    },
-    "*"
-  );
-}
-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,
-  fallback,
-  className,
-  render,
-  layoutNodeId,
-  componentId,
-  rich = false
-}) {
-  const [editing, setEditing] = useState(false);
-  const [focused, setFocused] = useState(false);
-  const elRef = useRef(null);
-  const storedEmpty = isComposerEmptyText(value);
-  const text = storedEmpty ? "" : formatFieldValue(value);
-  const fallbackText = typeof fallback === "string" || typeof fallback === "number" ? String(fallback) : "";
-  const hint = COMPOSER_EMPTY_FIELD_HINT;
-  const idleDisplay = storedEmpty ? hint : text || fallbackText;
-  const showRendered = !!render && !editing;
-  const showHint = storedEmpty && !focused && !showRendered;
-  useEffect(() => {
-    const el = elRef.current;
-    if (!el || showRendered) 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, showRendered]);
-  useEffect(() => {
-    if (!editing || !elRef.current) return;
-    const el = elRef.current;
-    if (storedEmpty) {
-      el.textContent = "";
-      el.focus();
-      placeCaret(el, true);
-      return;
+    if (pageConfig && pageConfig.id !== "default") {
+      trackContentView(pageConfig.id, "page", {
+        route: pageConfig.route,
+        title: pageConfig.title
+      });
     }
-    el.textContent = idleDisplay || "";
-    el.focus();
-    placeCaret(el, false);
-  }, [editing, storedEmpty, idleDisplay]);
-  const finishEdit = () => {
-    const raw = (elRef.current?.innerText ?? "").replace(/\u00a0/g, " ").replace(/\n+$/g, "");
-    const next = raw.trim() === "" ? "" : raw;
-    setEditing(false);
-    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, "");
+  }, [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(() => {
+    const isVisualEditorMode = () => {
+      if (typeof window === "undefined") return false;
+      const urlParams = new URLSearchParams(window.location.search);
+      if (urlParams.get("visualEditor") === "true" || urlParams.get("preview") === "true") {
+        return true;
       }
-      return;
-    }
-    if (next === text) return;
-    if (!text && !storedEmpty && next === fallbackText) return;
-    commitComposerField(layoutNodeId, componentId, name, next);
-  };
-  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
-    });
-  };
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      ref: elRef,
-      className,
-      "data-amplifyup-field": name,
-      "data-amplifyup-field-type": rich ? "richtext" : "text",
-      "data-amplifyup-node-id": layoutNodeId || void 0,
-      "data-amplifyup-empty-hint": showHint ? "true" : void 0,
-      contentEditable: !rich && !showRendered,
-      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;
-        }
-        if (render) {
-          setEditing(true);
-        }
-      },
-      onFocus: () => {
-        if (!isComposerEditMode()) return;
-        if (rich) {
-          openRichEditor();
-          return;
-        }
-        setFocused(true);
-        const el = elRef.current;
-        if (el && storedEmpty) {
-          el.textContent = "";
-          placeCaret(el, true);
-        }
-        if (render) setEditing(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 || "";
-          setEditing(false);
-          setFocused(false);
-          event.currentTarget.blur();
+      const inIframe = window.self !== window.top;
+      if (!inIframe) return false;
+      try {
+        if (document.referrer) {
+          const referrerUrl = new URL(document.referrer);
+          if (referrerUrl.hostname === "localhost" && referrerUrl.port === "5001") {
+            return true;
+          }
         }
-      },
-      style: {
-        cursor: "text",
-        outline: "1px dashed color-mix(in srgb, currentColor 40%, transparent)",
-        outlineOffset: "2px",
-        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
-      },
-      children: showRendered ? value != null && value !== "" && !storedEmpty ? render(value) : fallback ?? idleDisplay : isReactNodeFallback(fallback) && !idleDisplay ? fallback : null
+      } catch (e) {
+      }
+      return false;
+    };
+    if (!isVisualEditorMode()) {
+      return;
     }
-  );
-}
-function ComposerInlineHtml({
-  name,
-  html,
-  sourceValue,
-  className,
-  Tag = "div",
-  layoutNodeId,
-  componentId
-}) {
-  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
-    });
-  };
-  return React.createElement(Tag, {
-    ref: elRef,
-    className,
-    "data-amplifyup-field": name,
-    "data-amplifyup-field-type": "richtext",
-    "data-amplifyup-node-id": layoutNodeId || 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: "2px"
+    if (!pageConfig) {
+      return;
     }
-  });
-}
-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("");
+    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 "";
-    }).filter(Boolean);
-    if (parts.length > 0) return parts.join(" ");
-  }
-  if (value && typeof value === "object") {
-    return "";
-  }
-  return "";
-}
-function warnProjectionProps(component, name, hasExplicitValue) {
-  if (process.env.NODE_ENV === "production") return;
-  if (hasExplicitValue) return;
-  if (name) {
-    console.warn(
-      `[AmplifyUp SDK] ${component} \`name\` is deprecated and will be removed. Prefer value={${name}} from your component props.`
+      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)
     );
-  }
-}
-function hasOwnProp(props, key) {
-  return Object.prototype.hasOwnProperty.call(props, key);
-}
-function isLinkListItem(value) {
-  return !!value && typeof value === "object" && !Array.isArray(value);
-}
-function renderLinkList(items, className) {
-  const links = items.filter(isLinkListItem).filter((item) => {
-    const label = typeof item.label === "string" ? item.label.trim() : "";
-    const href = typeof item.href === "string" ? item.href.trim() : "";
-    return !!(label || href);
-  });
-  if (links.length === 0) return null;
-  return /* @__PURE__ */ jsx("span", { className, style: { display: "contents" }, children: links.map((item, index) => {
-    const label = typeof item.label === "string" && item.label.trim() ? item.label : typeof item.href === "string" ? item.href : "Link";
-    const href = typeof item.href === "string" && item.href.trim() ? item.href : "#";
-    const style = typeof item.style === "string" ? item.style.trim() : "";
-    return /* @__PURE__ */ jsx(
-      "a",
-      {
-        href,
-        target: item.openInNewTab ? "_blank" : void 0,
-        rel: item.openInNewTab ? "noreferrer" : void 0,
-        "data-amplifyup-action-style": style || void 0,
-        children: label
-      },
-      typeof item._key === "string" && item._key ? item._key : `${href}-${index}`
-    );
-  }) });
-}
-function Field(props) {
-  const { value, name, fallback, className, render } = props;
-  const context = useContext(ComponentContext);
-  const composerEdit = useComposerEditMode();
-  const hasExplicitValue = hasOwnProp(props, "value");
-  const sourceValue = hasExplicitValue ? value : name ? context?.props?.[name] : void 0;
-  const editName = inferEditName(name, context?.props, sourceValue);
-  const fieldValue = useFieldOverlay(
-    context?.layoutNodeId,
-    editName,
-    sourceValue
-  );
-  warnProjectionProps("Field", name, hasExplicitValue);
-  if (!context && !hasExplicitValue) {
-    console.warn(
-      "[AmplifyUp SDK] Field needs a `value` prop (or deprecated `name` alone)"
-    );
-    return fallback ? /* @__PURE__ */ jsx(Fragment, { children: fallback }) : null;
-  }
-  if (render) {
-    if (composerEdit && editName && context && canInlineEdit(editName, fieldValue)) {
-      return /* @__PURE__ */ jsx(
-        ComposerInlineField,
-        {
-          name: editName,
-          value: fieldValue,
-          fallback,
-          className,
-          render,
-          layoutNodeId: context.layoutNodeId,
-          componentId: context.componentId,
-          rich: looksLikeRichCanvasField(editName)
-        }
+    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"
       );
     }
-    return /* @__PURE__ */ jsx("span", { className, style: { display: "contents" }, children: render(fieldValue) });
-  }
-  if (Array.isArray(fieldValue)) {
-    const list = renderLinkList(fieldValue, className);
-    if (list) return list;
-  }
-  const text = formatFieldValue(fieldValue);
-  const showVisualFallback = !text && isReactNodeFallback(fallback);
-  const emptyBlockField = isComposerEmptyText(fieldValue) && classNameIsBlock(className);
-  if (composerEdit && editName && context && canInlineEdit(editName, fieldValue) && !showVisualFallback && !emptyBlockField) {
-    return /* @__PURE__ */ jsx(
-      ComposerInlineField,
-      {
-        name: editName,
-        value: fieldValue,
-        fallback,
-        className,
-        layoutNodeId: context.layoutNodeId,
-        componentId: context.componentId,
-        rich: looksLikeRichCanvasField(editName)
-      }
-    );
-  }
-  if (fieldValue === void 0 || fieldValue === null || isComposerEmptyText(fieldValue)) {
-    return fallback ? /* @__PURE__ */ jsx("span", { className, children: fallback }) : null;
-  }
-  if (!text) {
-    return fallback ? /* @__PURE__ */ jsx("span", { className, children: fallback }) : null;
+  }, [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" })
+      ] })
+    ] }) }) }) });
   }
-  return /* @__PURE__ */ jsx("span", { className, children: text });
-}
-function markdownToHtml(markdown) {
-  try {
-    const result = marked.parse(markdown, { async: false });
-    return typeof result === "string" ? result : "";
-  } catch {
-    return markdown;
+  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 })
+    ] }) }) }) });
   }
-}
-function RichText(props) {
-  const {
-    value,
-    name,
-    fallback,
-    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 hasValueProp = hasOwnProp(props, "value");
-  const hasExplicitValue = hasValueProp || childrenValue !== void 0;
-  const sourceValue = hasValueProp ? value : childrenValue !== void 0 ? childrenValue : name ? context?.props?.[name] : void 0;
-  const editName = inferEditName(name, context?.props, sourceValue);
-  const fieldValue = useFieldOverlay(
-    context?.layoutNodeId,
-    editName,
-    sourceValue
-  );
-  if (!context && !hasExplicitValue) {
-    console.warn(
-      "[AmplifyUp SDK] RichText needs a `value` prop (or string children), or deprecated `name` alone"
-    );
-    return fallback ? /* @__PURE__ */ jsx(Fragment, { children: fallback }) : null;
+  if (!pageConfig) {
+    return null;
   }
-  warnProjectionProps("RichText", name, hasExplicitValue);
-  const canEdit = !!context && canInlineEditRichText(editName, fieldValue);
-  if (isComposerEmptyText(fieldValue)) {
-    if (composerEdit && canEdit && !isReactNodeFallback(fallback) && !classNameIsBlock(className)) {
+  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,
-          fallback: typeof fallback === "string" || typeof fallback === "number" ? fallback : void 0,
-          className,
-          layoutNodeId: context?.layoutNodeId,
-          componentId: context?.componentId,
-          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 fallback ? /* @__PURE__ */ jsx(Tag, { className, children: fallback }) : null;
-  }
-  let html = "";
-  if (typeof fieldValue === "string") {
-    const trimmed = fieldValue.trim();
-    if (trimmed.startsWith("<") && trimmed.includes(">")) {
-      html = fieldValue;
-    } else {
-      html = markdownToHtml(fieldValue);
+    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 fallback ? /* @__PURE__ */ jsx(Tag, { className, children: fallback }) : 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
+        "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
+              }
+            )
+          }
+        )
       }
     );
+  };
+  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 } });
-}
-function isPortableImageValue(value) {
-  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
-  const url = value.url;
-  return typeof url === "string" && url.trim().length > 0;
-}
-function imageSrc(value) {
-  if (typeof value === "string") return value.trim();
-  if (isPortableImageValue(value)) return value.url.trim();
-  return "";
+  return /* @__PURE__ */ jsx("main", { children: composerPreview || isComposerPreview() ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot-id": "main",
+      "data-amplifyup-slot": "main",
+      "data-slot-source": "page",
+      "data-slot-empty": layoutTree.length === 0 ? "true" : void 0,
+      children: layoutTree.map((node) => /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(node) }, node.id))
+    }
+  ) : layoutTree.map((node) => /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(node) }, node.id)) });
 }
-function Image(props) {
-  const {
-    value,
-    name,
-    alt: altProp,
-    className,
-    width: widthProp,
-    height: heightProp,
-    ...imgProps
-  } = props;
-  const context = useContext(ComponentContext);
-  const hasExplicitValue = hasOwnProp(props, "value");
-  const sourceValue = hasExplicitValue ? value : name ? context?.props?.[name] : void 0;
-  const fieldValue = useFieldOverlay(
-    context?.layoutNodeId,
-    inferEditName(name, context?.props, sourceValue),
-    sourceValue
-  );
-  const composerEdit = useComposerEditMode();
-  const editName = inferEditName(name, context?.props, sourceValue);
-  warnProjectionProps("Image", name, hasExplicitValue);
-  if (!context && !hasExplicitValue) {
-    console.warn(
-      "[AmplifyUp SDK] Image needs a `value` prop (or deprecated `name` alone)"
-    );
-    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 ? {
-    "data-amplifyup-field": editName,
-    "data-amplifyup-field-type": "image",
-    "data-amplifyup-node-id": context?.layoutNodeId || void 0
-  } : null;
-  if (!src) {
-    if (!composerEdit || !fieldAttrs) return null;
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        ...fieldAttrs,
-        className,
-        role: "img",
-        "aria-label": alt || editName || "Image",
-        style: {
-          display: "inline-block",
-          minWidth: width ? void 0 : 48,
-          minHeight: height ? void 0 : 48,
-          width: width || void 0,
-          height: height || void 0,
-          background: "color-mix(in srgb, currentColor 8%, transparent)",
-          outline: "1px dashed color-mix(in srgb, currentColor 40%, transparent)",
-          outlineOffset: 2
-        }
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "img",
+var AmplifyRenderer = memo(AmplifyRendererInner);
+function AddComponentIcon({ size = 28 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
     {
-      ...imgProps,
-      ...fieldAttrs,
-      src,
-      alt,
-      className,
-      width,
-      height
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "3",
+            y: "3",
+            width: "18",
+            height: "18",
+            rx: "4",
+            stroke: "currentColor",
+            strokeWidth: "1.75"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M12 8v8M8 12h8",
+            stroke: "currentColor",
+            strokeWidth: "1.75",
+            strokeLinecap: "round"
+          }
+        )
+      ]
     }
   );
 }
-function nodeRenderProps(node) {
-  return {
-    ...node.settings || {},
-    ...node.props || {}
-  };
-}
-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;
-  }
-};
-function LiveNodeRender({
-  nodeId,
-  componentId,
-  props,
-  slots,
-  renderComponent
-}) {
-  const liveProps = useLiveComposerProps(nodeId, props);
-  return /* @__PURE__ */ jsx(Fragment, { children: renderComponent(componentId, liveProps, slots, {
-    layoutNodeId: nodeId
-  }) });
+  );
 }
-function AmplifyRendererInner({
+function defaultPreviewCanvas() {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot-id": "main",
+      "data-amplifyup-slot": "main",
+      "data-slot-source": "page",
+      "data-slot-empty": "true",
+      style: { minHeight: "50vh", width: "100%", display: "block", position: "relative" },
+      children: /* @__PURE__ */ jsx(EmptySlotHint, {})
+    }
+  );
+}
+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: serverPageConfig,
+  pageConfig: pageConfigProp,
+  forceComposerPreview = false,
+  previewLoadingComponent,
+  previewEmptyComponent,
   loadingComponent,
-  errorComponent,
   emptyComponent,
-  composerPreview
+  errorComponent
 }) {
-  const clientHook = useAmplifyUp();
-  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;
+  const client = useAmplifyUp();
+  const preview = forceComposerPreview || isComposerPreview();
+  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 previewCanvas = previewEmptyComponent ?? defaultPreviewCanvas();
+  const previewLoading = previewLoadingComponent ?? previewCanvas;
+  if (preview) {
+    return /* @__PURE__ */ jsx(
+      AmplifyRenderer,
+      {
+        pageConfig: pageConfig ?? void 0,
+        renderComponent,
+        composerPreview: true,
+        loadingComponent: loadingComponent ?? previewLoading,
+        emptyComponent: emptyComponent ?? previewCanvas,
+        errorComponent: errorComponent ?? (() => previewCanvas)
       }
+    );
+  }
+  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(
+    AmplifyRenderer,
+    {
+      pageConfig: pageConfig ?? void 0,
+      renderComponent,
+      loadingComponent,
+      emptyComponent,
+      errorComponent
     }
-    if (pageConfig && pageConfig.id !== "default") {
-      trackContentView(pageConfig.id, "page", {
-        route: pageConfig.route,
-        title: pageConfig.title
-      });
+  );
+}
+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
     }
-  }, [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(() => {
-    const isVisualEditorMode = () => {
-      if (typeof window === "undefined") return false;
-      const urlParams = new URLSearchParams(window.location.search);
-      if (urlParams.get("visualEditor") === "true" || urlParams.get("preview") === "true") {
-        return true;
-      }
-      const inIframe = window.self !== window.top;
-      if (!inIframe) return false;
-      try {
-        if (document.referrer) {
-          const referrerUrl = new URL(document.referrer);
-          if (referrerUrl.hostname === "localhost" && referrerUrl.port === "5001") {
-            return true;
-          }
-        }
-      } catch (e) {
-      }
+  );
+}
+function Slot({
+  name,
+  className
+}) {
+  const context = useContext(ComponentContext);
+  if (!context) {
+    console.warn(`[AmplifyUp SDK] Slot "${name}" used outside ComponentContextProvider`);
+    return null;
+  }
+  const slotContent = context.slots?.[name];
+  const isEmpty = !slotContent;
+  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;
-    };
-    if (!isVisualEditorMode()) {
-      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;
+  })());
+  sdkDebugOnce(
+    `slot:${context.layoutNodeId || ""}:${name}`,
+    `[Slot:${name}]`,
+    {
+      isEmpty,
+      isEditorMode,
+      availableSlotKeys: context.slots ? Object.keys(context.slots) : []
     }
-    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);
-            }
-          });
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      "data-slot-name": name,
+      "data-slot-id": name,
+      "data-amplifyup-slot": name,
+      "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: 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}`
         }
-        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)
+      ) : /* @__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 isComposerEditMode() {
+  if (typeof window === "undefined") return false;
+  return isComposerPreview() && window.__AMPLIFYUP_EVENT_SELECTION__ !== true;
+}
+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 subscribeComposerEdit(onStoreChange) {
+  if (typeof window === "undefined") return () => {
+  };
+  window.addEventListener("amplifyup:composer-edit", onStoreChange);
+  return () => window.removeEventListener("amplifyup:composer-edit", onStoreChange);
+}
+function useComposerEditMode() {
+  return useSyncExternalStore(
+    subscribeComposerEdit,
+    isComposerEditMode,
+    () => false
+  );
+}
+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 (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"
-      );
+  }
+  const fieldValue = useComposerFieldValue(bound.name, bound.value);
+  return { editName: bound.name, fieldValue };
+}
+function commitComposerField(layoutNodeId, componentId, name, value) {
+  if (typeof window === "undefined" || window.parent === window) return;
+  window.parent.postMessage(
+    {
+      type: "AMPLIFYUP_FIELD_COMMIT",
+      layoutNodeId,
+      componentId,
+      fieldName: name,
+      value
+    },
+    "*"
+  );
+}
+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;
+  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,
+      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,
+  render,
+  layoutNodeId,
+  componentId,
+  rich = false
+}) {
+  const [editing, setEditing] = useState(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 showRendered = !!render && !editing && !storedEmpty;
+  const showHint = storedEmpty && !focused && !showRendered;
+  useEffect(() => {
+    const el = elRef.current;
+    if (!el || showRendered) return;
+    if (document.activeElement === el) return;
+    if (el.querySelector(
+      "input, button, select, textarea, form, svg, iframe, img"
+    )) {
+      return;
     }
-  }, [pageConfig]);
+    const next = idleDisplay || "";
+    if (el.textContent !== next) el.textContent = next;
+  }, [idleDisplay, showRendered]);
   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 });
-              }
-            }
-          }
+    if (!editing || !elRef.current) return;
+    const el = elRef.current;
+    if (storedEmpty) {
+      el.textContent = "";
+      el.focus();
+      placeCaret(el, true);
+      return;
+    }
+    el.textContent = idleDisplay || "";
+    el.focus();
+    placeCaret(el, false);
+  }, [editing, storedEmpty, idleDisplay]);
+  const finishEdit = () => {
+    const raw = (elRef.current?.innerText ?? "").replace(/\u00a0/g, " ").replace(/\n+$/g, "");
+    const next = raw.trim() === "" ? "" : raw;
+    setEditing(false);
+    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, "");
+      }
+      return;
+    }
+    if (next === text) return;
+    commitComposerField(layoutNodeId, componentId, name, next);
+  };
+  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
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: elRef,
+      className,
+      "data-amplifyup-field": name,
+      "data-amplifyup-field-type": rich ? "richtext" : "text",
+      "data-amplifyup-node-id": layoutNodeId || void 0,
+      "data-amplifyup-empty-hint": showHint ? "true" : void 0,
+      contentEditable: !rich && !showRendered,
+      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;
+        }
+        if (render) {
+          setEditing(true);
+        }
+      },
+      onFocus: () => {
+        if (!isComposerEditMode()) return;
+        if (rich) {
+          openRichEditor();
+          return;
+        }
+        setFocused(true);
+        const el = elRef.current;
+        if (el && storedEmpty) {
+          el.textContent = "";
+          placeCaret(el, true);
+        }
+        if (render) setEditing(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 || "";
+          setEditing(false);
+          setFocused(false);
+          event.currentTarget.blur();
         }
-        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" })
-      ] })
-    ] }) }) }) });
+      },
+      style: {
+        cursor: "text",
+        outline: "1px dashed color-mix(in srgb, currentColor 40%, transparent)",
+        outlineOffset: "2px",
+        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
+      },
+      children: showRendered ? render(value) : null
+    }
+  );
+}
+function ComposerInlineHtml({
+  name,
+  html,
+  sourceValue,
+  className,
+  Tag = "div",
+  layoutNodeId,
+  componentId
+}) {
+  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
+    });
+  };
+  return React2.createElement(Tag, {
+    ref: elRef,
+    className,
+    "data-amplifyup-field": name,
+    "data-amplifyup-field-type": "richtext",
+    "data-amplifyup-node-id": layoutNodeId || 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: "2px"
+    }
+  });
+}
+function formatFieldValue(value) {
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    return String(value);
   }
-  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 (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 (!pageConfig) {
+  if (value && typeof value === "object") {
+    return "";
+  }
+  return "";
+}
+function warnProjectionProps(component, hasField, hasValue, name) {
+  if (process.env.NODE_ENV === "production") return;
+  if (!hasField && !hasValue && !name) {
+    console.warn(
+      `[AmplifyUp SDK] ${component} needs field={fields.yourProp} (or value + name for computed values)`
+    );
+  }
+}
+function hasOwnProp(props, key) {
+  return Object.prototype.hasOwnProperty.call(props, key);
+}
+function isLinkListItem(value) {
+  return !!value && typeof value === "object" && !Array.isArray(value);
+}
+function renderLinkList(items, className) {
+  const links = items.filter(isLinkListItem).filter((item) => {
+    const label = typeof item.label === "string" ? item.label.trim() : "";
+    const href = typeof item.href === "string" ? item.href.trim() : "";
+    return !!(label || href);
+  });
+  if (links.length === 0) return null;
+  return /* @__PURE__ */ jsx("span", { className, style: { display: "contents" }, children: links.map((item, index) => {
+    const label = typeof item.label === "string" && item.label.trim() ? item.label : typeof item.href === "string" ? item.href : "Link";
+    const href = typeof item.href === "string" && item.href.trim() ? item.href : "#";
+    const style = typeof item.style === "string" ? item.style.trim() : "";
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        target: item.openInNewTab ? "_blank" : void 0,
+        rel: item.openInNewTab ? "noreferrer" : void 0,
+        "data-amplifyup-action-style": style || void 0,
+        children: label
+      },
+      typeof item._key === "string" && item._key ? item._key : `${href}-${index}`
+    );
+  }) });
+}
+function Field(props) {
+  const { field, value, name, className, render } = props;
+  const context = useContext(ComponentContext);
+  const composerEdit = useComposerEditMode();
+  const hasField = isFieldEnvelope(field);
+  const hasValue = hasOwnProp(props, "value");
+  const { editName, fieldValue } = useBoundField(field, value, name, "Field");
+  warnProjectionProps("Field", hasField, hasValue, name);
+  if (!hasField && !hasValue && !name) {
     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 : [];
+  const empty = isComposerEmptyText(fieldValue);
+  if (composerEdit && editName && context && canInlineEdit(editName, fieldValue)) {
+    return /* @__PURE__ */ jsx(
+      ComposerInlineField,
+      {
+        name: editName,
+        value: fieldValue,
+        className,
+        render: empty ? void 0 : render,
+        layoutNodeId: context.layoutNodeId,
+        componentId: context.componentId,
+        rich: looksLikeRichCanvasField(editName)
+      }
+    );
+  }
+  if (empty) return null;
+  if (render) {
+    return /* @__PURE__ */ jsx("span", { className, style: { display: "contents" }, children: render(fieldValue) });
+  }
+  if (Array.isArray(fieldValue)) {
+    const list = renderLinkList(fieldValue, className);
+    if (list) return list;
+  }
+  const text = formatFieldValue(fieldValue);
+  if (!text) return null;
+  return /* @__PURE__ */ jsx("span", { className, children: text });
+}
+function markdownToHtml(markdown) {
+  try {
+    const result = marked.parse(markdown, { async: false });
+    return typeof result === "string" ? result : "";
+  } catch {
+    return markdown;
+  }
+}
+function RichText(props) {
+  const {
+    field,
+    value,
+    name,
+    className,
+    as: Tag = "div",
+    children
+  } = props;
+  const context = useContext(ComponentContext);
+  const composerEdit = useComposerEditMode();
+  const childrenValue = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
+  const hasField = isFieldEnvelope(field);
+  const hasValueProp = hasOwnProp(props, "value") || childrenValue !== void 0;
+  const boundValue = hasOwnProp(props, "value") ? value : childrenValue !== void 0 ? childrenValue : value;
+  const { editName, fieldValue } = useBoundField(
+    field,
+    boundValue,
+    name,
+    "RichText"
+  );
+  if (!hasField && !hasValueProp && !name) {
+    return null;
+  }
+  warnProjectionProps("RichText", hasField, hasValueProp, name);
+  const canEdit = !!context && canInlineEditRichText(editName, fieldValue);
+  if (isComposerEmptyText(fieldValue)) {
+    if (composerEdit && canEdit) {
       return /* @__PURE__ */ jsx(
-        "div",
+        ComposerInlineField,
         {
-          "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))
-            }
-          )
+          name: editName,
+          value: fieldValue,
+          className,
+          layoutNodeId: context?.layoutNodeId,
+          componentId: context?.componentId,
+          rich: true
         }
       );
     }
-    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
-        );
-      }
+    return null;
+  }
+  let html = "";
+  if (typeof fieldValue === "string") {
+    const trimmed = fieldValue.trim();
+    if (trimmed.startsWith("<") && trimmed.includes(">")) {
+      html = fieldValue;
+    } else {
+      html = markdownToHtml(fieldValue);
     }
-    const slotsToPass = Object.keys(slotChildren).length > 0 ? slotChildren : void 0;
+  } else {
+    const text = formatFieldValue(fieldValue);
+    html = text ? markdownToHtml(text) : "";
+  }
+  if (!html) {
+    return null;
+  }
+  if (composerEdit && canEdit) {
     return /* @__PURE__ */ jsx(
-      "div",
+      ComposerInlineHtml,
       {
-        "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(
-              LiveNodeRender,
-              {
-                nodeId: node.id,
-                componentId: node.componentId,
-                props: nodeRenderProps(node),
-                slots: slotsToPass,
-                renderComponent
-              }
-            )
-          }
-        )
+        name: editName,
+        html,
+        sourceValue: typeof fieldValue === "string" ? fieldValue : html,
+        className,
+        Tag,
+        layoutNodeId: context?.layoutNodeId,
+        componentId: context?.componentId
       }
     );
-  };
-  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("main", { children: composerPreview || isComposerPreview() ? /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot-id": "main",
-      "data-amplifyup-slot": "main",
-      "data-slot-source": "page",
-      "data-slot-empty": layoutTree.length === 0 ? "true" : void 0,
-      children: layoutTree.map((node) => /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(node) }, node.id))
-    }
-  ) : layoutTree.map((node) => /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(node) }, node.id)) });
-}
-var AmplifyRenderer = memo(AmplifyRendererInner);
-function defaultPreviewCanvas() {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot-id": "main",
-      "data-amplifyup-slot": "main",
-      "data-slot-source": "page",
-      "data-slot-empty": "true",
-      style: { minHeight: "50vh", width: "100%", display: "block", position: "relative" },
-      children: /* @__PURE__ */ jsx(EmptySlotHint, {})
-    }
-  );
-}
-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 || "/";
+  return /* @__PURE__ */ jsx(Tag, { className, dangerouslySetInnerHTML: { __html: html } });
 }
-function samePageRoute(a, b) {
-  const ar = normalizeRoutePath(a?.route);
-  const br = normalizeRoutePath(b?.route);
-  return !!ar && !!br && ar === br;
+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 layoutTreesEqual(a, b) {
-  if (!a || !b) return a === b;
-  return JSON.stringify(a.layoutTree) === JSON.stringify(b.layoutTree);
+function imageSrc(value) {
+  if (typeof value === "string") return value.trim();
+  if (isPortableImageValue(value)) return value.url.trim();
+  return "";
 }
-function AmplifyPageContent({
-  fallback,
-  renderComponent,
-  pageConfig: pageConfigProp,
-  forceComposerPreview = false,
-  previewLoadingComponent,
-  previewEmptyComponent,
-  loadingComponent,
-  emptyComponent,
-  errorComponent
-}) {
-  const client = useAmplifyUp();
-  const preview = forceComposerPreview || isComposerPreview();
-  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;
+function Image(props) {
+  const {
+    field,
+    value,
+    name,
+    alt: altProp,
+    className,
+    width: widthProp,
+    height: heightProp,
+    ...imgProps
+  } = props;
+  const context = useContext(ComponentContext);
+  const hasField = isFieldEnvelope(field);
+  const hasValue = hasOwnProp(props, "value");
+  const { editName, fieldValue } = useBoundField(field, value, name, "Image");
+  const composerEdit = useComposerEditMode();
+  warnProjectionProps("Image", hasField, hasValue, name);
+  if (!hasField && !hasValue && !name) {
+    return null;
   }
-  const loading = !hasAmplifyLayout(pageConfig) && client.loading;
-  const error = hasAmplifyLayout(pageConfig) ? null : pageConfigProp ? null : client.error;
-  const previewCanvas = previewEmptyComponent ?? defaultPreviewCanvas();
-  const previewLoading = previewLoadingComponent ?? previewCanvas;
-  if (preview) {
+  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 ? {
+    "data-amplifyup-field": editName,
+    "data-amplifyup-field-type": "image",
+    "data-amplifyup-node-id": context?.layoutNodeId || 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(
-      AmplifyRenderer,
+      "span",
       {
-        pageConfig: pageConfig ?? void 0,
-        renderComponent,
-        composerPreview: true,
-        loadingComponent: loadingComponent ?? previewLoading,
-        emptyComponent: emptyComponent ?? previewCanvas,
-        errorComponent: errorComponent ?? (() => previewCanvas)
+        ...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)",
+          outline: "2px dashed hsl(82 100% 45%)",
+          outlineOffset: 2,
+          cursor: "pointer"
+        }
       }
     );
   }
-  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(
-    AmplifyRenderer,
+    "img",
     {
-      pageConfig: pageConfig ?? void 0,
-      renderComponent,
-      loadingComponent,
-      emptyComponent,
-      errorComponent
+      ...imgProps,
+      ...fieldAttrs,
+      src,
+      alt,
+      className,
+      width,
+      height,
+      style: {
+        ...typeof imgProps.style === "object" && imgProps.style ? imgProps.style : {},
+        ...composerEdit && fieldAttrs ? { cursor: "pointer" } : null
+      }
     }
   );
 }
@@ -5074,6 +5237,6 @@ function useAmplifyUp() {
   return context;
 }
 
-export { AmplifyPageContent, AmplifyRenderer, AmplifyUpProvider, ComponentContextProvider, Field, Image, QueryContentError, RichText, SelectVariantsError, Slot, isComposerPreview, isPreviewRequest, isWorkingContentRequest, nextPageSpec, queryContent, searchSpec, selectVariants, useAmplifyUp, useComponentProps, useLiveComposerProps };
+export { AmplifyPageContent, AmplifyRenderer, AmplifyUpProvider, ComponentContextProvider, ComposerProvider, Field, Image, MaybeComposerProvider, QueryContentError, RichText, SelectVariantsError, Slot, isBrandedFields, isComposerPreview, isFieldEnvelope, isPreviewRequest, isWorkingContentRequest, nextPageSpec, queryContent, searchSpec, selectVariants, toFieldEnvelopes, useAmplifyUp };
 //# sourceMappingURL=react.mjs.map
 //# sourceMappingURL=react.mjs.map