@amplifyup/sdk 0.1.27 → 0.1.29

package/dist/react.js

@@ -2,8 +2,8 @@
 'use strict';
 
 var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
 var marked = require('marked');
+var jsxRuntime = require('react/jsx-runtime');
 
 /* @amplifyup/sdk - https://amplifyup.ai */
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
@@ -2743,123 +2743,586 @@ function getSDK(adapter) {
 var trackContentView = (contentId, contentType, properties) => getSDK().trackContentView(contentId, contentType, properties);
 var refreshEventTracking = () => getSDK().refreshEventTracking();
 getSDK();
-var ComponentRenderBoundary = class extends react.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
+var ComponentContext = react.createContext(null);
+function useLiveComposerProps(layoutNodeId, props) {
+  const [live, setLive] = react.useState(props);
+  react.useEffect(() => {
+    setLive(props);
+  }, [props]);
+  react.useEffect(() => {
+    const apply = (fieldName, value, nodeId) => {
+      if (!fieldName || typeof fieldName !== "string") return;
+      if (nodeId && layoutNodeId && String(nodeId) !== String(layoutNodeId)) {
+        return;
+      }
+      setLive((prev) => ({ ...prev, [fieldName]: value }));
+    };
+    const onPatch = (event) => {
+      const detail = event.detail || {};
+      apply(detail.fieldName, detail.value, detail.layoutNodeId);
+    };
+    const onMessage = (event) => {
+      if (event.data?.type !== "AMPLIFYUP_FIELD_PATCH") return;
+      apply(event.data.fieldName, event.data.value, event.data.layoutNodeId);
+    };
+    window.addEventListener("amplifyup:field-patch", onPatch);
+    window.addEventListener("message", onMessage);
+    return () => {
+      window.removeEventListener("amplifyup:field-patch", onPatch);
+      window.removeEventListener("message", onMessage);
+    };
+  }, [layoutNodeId]);
+  return live;
+}
+function useComponentProps() {
+  const context = react.useContext(ComponentContext);
+  if (!context) {
+    console.warn(
+      "[AmplifyUp SDK] useComponentProps used outside ComponentContextProvider"
     );
+    return {};
   }
-  render() {
-    if (this.state.error) {
-      if (process.env.NODE_ENV !== "production") {
-        return /* @__PURE__ */ jsxRuntime.jsxs(
+  return context.props || {};
+}
+function ComponentContextProvider({
+  children,
+  slots,
+  props,
+  layoutNodeId,
+  componentId
+}) {
+  const liveProps = useLiveComposerProps(layoutNodeId, props || {});
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ComponentContext.Provider,
+    {
+      value: { slots, props: liveProps, layoutNodeId, componentId },
+      children
+    }
+  );
+}
+function Slot({
+  name,
+  className
+}) {
+  const context = react.useContext(ComponentContext);
+  console.log(`[Slot:${name}] Rendering slot`, {
+    hasContext: !!context,
+    availableSlotKeys: context?.slots ? Object.keys(context.slots) : [],
+    slotContent: context?.slots?.[name] ? "EXISTS" : "MISSING",
+    contextSlots: context?.slots
+  });
+  if (!context) {
+    console.warn(`[AmplifyUp SDK] Slot "${name}" used outside ComponentContextProvider`);
+    return null;
+  }
+  const slotContent = context.slots?.[name];
+  const isEmpty = !slotContent;
+  console.log(`[Slot:${name}] Slot state`, {
+    isEmpty,
+    hasSlotContent: !!slotContent,
+    slotContentType: slotContent ? typeof slotContent : "null"
+  });
+  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;
+    }
+  })());
+  console.log(`[Slot:${name}] Editor mode detection`, {
+    isEditorMode,
+    isWindowDefined: typeof window !== "undefined",
+    previewModeFlag: typeof window !== "undefined" ? window.__AMPLIFYUP_PREVIEW_MODE__ : void 0,
+    urlParams: typeof window !== "undefined" ? {
+      preview: new URLSearchParams(window.location.search).get("preview"),
+      visualEditor: new URLSearchParams(window.location.search).get("visualEditor")
+    } : void 0,
+    inIframe: typeof window !== "undefined" ? window.self !== window.top : false,
+    referrer: typeof window !== "undefined" && document.referrer ? document.referrer : void 0
+  });
+  return /* @__PURE__ */ jsxRuntime.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 ? /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "amplifyup-slot-placeholder",
+          style: {
+            minHeight: "60px",
+            color: "#9ca3af",
+            fontSize: "14px",
+            pointerEvents: "none"
+          },
+          children: isEditorMode ? `Drop components here` : `Empty slot: ${name}`
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        isEditorMode && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            "data-amplifyup-render-error": "",
-            "data-component-id": this.props.componentId,
-            "data-node-id": this.props.nodeId,
+            className: "amplifyup-slot-placeholder",
             style: {
-              margin: "1rem 0",
-              padding: "0.75rem 1rem",
-              border: "1px solid #fca5a5",
-              borderRadius: "0.5rem",
-              background: "#fef2f2",
-              color: "#991b1b",
-              fontSize: "0.875rem"
+              position: "absolute",
+              top: "4px",
+              left: "4px",
+              fontSize: "10px",
+              color: "#9ca3af",
+              pointerEvents: "none",
+              zIndex: 1,
+              minHeight: "auto"
             },
             children: [
-              'Component "',
-              this.props.componentId,
-              '" failed to render:',
-              " ",
-              this.state.error.message
+              "Slot: ",
+              name
             ]
           }
-        );
-      }
-      return null;
+        ),
+        slotContent
+      ] })
     }
-    return this.props.children;
+  );
+}
+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 canInlineEdit(name, value) {
+  if (isLikelyNonTextFieldName(name)) return false;
+  if (value !== void 0 && value !== null && typeof value === "object") {
+    return false;
   }
-};
-function AmplifyRenderer({
-  renderComponent,
-  pageConfig: serverPageConfig,
-  loadingComponent,
-  errorComponent,
-  emptyComponent,
-  composerPreview
-}) {
-  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] = react.useState({});
+  if (typeof value === "boolean") return false;
+  return true;
+}
+function useComposerEditMode() {
+  const [enabled, setEnabled] = react.useState(false);
   react.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")) {
+    const sync = () => setEnabled(isComposerEditMode());
+    sync();
+    window.addEventListener("amplifyup:composer-edit", sync);
+    return () => window.removeEventListener("amplifyup:composer-edit", sync);
+  }, []);
+  return enabled;
+}
+function useFieldOverlay(layoutNodeId, name, source) {
+  const [overlay, setOverlay] = react.useState(void 0);
+  react.useEffect(() => {
+    const onPatch = (event) => {
+      const detail = event.detail || {};
+      if (detail.fieldName !== name) return;
+      if (detail.layoutNodeId && layoutNodeId && String(detail.layoutNodeId) !== String(layoutNodeId)) {
         return;
       }
-    }
-    if (pageConfig && pageConfig.id !== "default") {
-      trackContentView(pageConfig.id, "page", {
-        route: pageConfig.route,
-        title: pageConfig.title
-      });
-    }
-  }, [pageConfig]);
-  react.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);
+      setOverlay(detail.value);
     };
-  }, [pageConfig?.id]);
-  react.useEffect(() => {
-    if (!pageConfig) return;
-    const t = window.setTimeout(() => {
-      getSDK().setupComponentViewTracking();
-      refreshEventTracking();
-    }, 100);
-    return () => window.clearTimeout(t);
-  }, [variantCache, pageConfig?.id]);
-  react.useEffect(() => {
-    const isVisualEditorMode = () => {
-      if (typeof window === "undefined") return false;
-      const urlParams = new URLSearchParams(window.location.search);
+    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 ComposerInlineField({
+  name,
+  value,
+  fallback,
+  className,
+  render,
+  layoutNodeId,
+  componentId
+}) {
+  const [editing, setEditing] = react.useState(false);
+  const elRef = react.useRef(null);
+  const text = formatFieldValue(value);
+  const fallbackText = typeof fallback === "string" || typeof fallback === "number" ? String(fallback) : "";
+  const display = text || fallbackText;
+  const showRendered = !!render && !editing;
+  react.useEffect(() => {
+    const el = elRef.current;
+    if (!el || showRendered) return;
+    if (document.activeElement === el) return;
+    const next = display || "";
+    if (el.textContent !== next) el.textContent = next;
+  }, [display, showRendered]);
+  react.useEffect(() => {
+    if (!editing || !elRef.current) return;
+    const el = elRef.current;
+    el.textContent = display || "";
+    el.focus();
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+  }, [editing]);
+  const finishEdit = () => {
+    const raw = (elRef.current?.innerText ?? "").replace(/\u00a0/g, " ").replace(/\n+$/g, "");
+    const next = raw.trim() === "" ? "" : raw;
+    setEditing(false);
+    if (next === text) return;
+    if (!text && next === fallbackText) return;
+    commitComposerField(layoutNodeId, componentId, name, next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref: elRef,
+      className,
+      "data-amplifyup-field": name,
+      "data-amplifyup-node-id": layoutNodeId || void 0,
+      contentEditable: !showRendered,
+      suppressContentEditableWarning: true,
+      role: "textbox",
+      tabIndex: 0,
+      onMouseDown: (event) => {
+        event.stopPropagation();
+      },
+      onClick: (event) => {
+        const link = event.target?.closest?.("a");
+        if (link) event.preventDefault();
+        if (render && isComposerEditMode()) {
+          setEditing(true);
+        }
+      },
+      onFocus: () => {
+        if (!isComposerEditMode()) return;
+        if (render) setEditing(true);
+      },
+      onBlur: 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 = display || "";
+          setEditing(false);
+          event.currentTarget.blur();
+        }
+      },
+      style: {
+        cursor: "text",
+        outline: "1px dashed color-mix(in srgb, currentColor 40%, transparent)",
+        outlineOffset: "2px",
+        minWidth: "1ch",
+        display: render ? void 0 : "inline"
+      },
+      children: showRendered ? value != null && value !== "" ? render(value) : fallback ?? display : null
+    }
+  );
+}
+function formatFieldValue(value) {
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    const parts = value.map((item) => {
+      if (typeof item === "string") return item;
+      if (item && typeof item === "object" && "children" in item && Array.isArray(item.children)) {
+        return item.children.map((c) => typeof c?.text === "string" ? c.text : "").join("");
+      }
+      return "";
+    }).filter(Boolean);
+    if (parts.length > 0) return parts.join(" ");
+  }
+  if (value && typeof value === "object") {
+    return "";
+  }
+  return "";
+}
+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__ */ jsxRuntime.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__ */ jsxRuntime.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({
+  name,
+  fallback,
+  className,
+  render
+}) {
+  const context = react.useContext(ComponentContext);
+  const composerEdit = useComposerEditMode();
+  const fieldValue = useFieldOverlay(
+    context?.layoutNodeId,
+    name,
+    context?.props?.[name]
+  );
+  if (!context) {
+    console.warn(`[AmplifyUp SDK] Field "${name}" used outside ComponentContextProvider`);
+    return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : null;
+  }
+  if (render) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style: { display: "contents" }, children: render(fieldValue) });
+  }
+  if (composerEdit && canInlineEdit(name, fieldValue)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ComposerInlineField,
+      {
+        name,
+        value: fieldValue,
+        fallback,
+        className,
+        layoutNodeId: context.layoutNodeId,
+        componentId: context.componentId
+      }
+    );
+  }
+  if (fieldValue === void 0 || fieldValue === null) {
+    return fallback ? /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: fallback }) : null;
+  }
+  if (Array.isArray(fieldValue)) {
+    const list = renderLinkList(fieldValue, className);
+    if (list) return list;
+  }
+  const text = formatFieldValue(fieldValue);
+  if (!text) {
+    return fallback ? /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: fallback }) : null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: text });
+}
+function markdownToHtml(markdown) {
+  try {
+    const result = marked.marked.parse(markdown, { async: false });
+    return typeof result === "string" ? result : "";
+  } catch {
+    return markdown;
+  }
+}
+function RichText({
+  name,
+  fallback,
+  className,
+  as: Tag = "div"
+}) {
+  const context = react.useContext(ComponentContext);
+  const composerEdit = useComposerEditMode();
+  const fieldValue = useFieldOverlay(
+    context?.layoutNodeId,
+    name,
+    context?.props?.[name]
+  );
+  if (!context) {
+    console.warn(`[AmplifyUp SDK] RichText "${name}" used outside ComponentContextProvider`);
+    return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : null;
+  }
+  if (composerEdit && canInlineEdit(name, fieldValue)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ComposerInlineField,
+      {
+        name,
+        value: fieldValue,
+        fallback,
+        className,
+        layoutNodeId: context.layoutNodeId,
+        componentId: context.componentId
+      }
+    );
+  }
+  if (fieldValue === void 0 || fieldValue === null || fieldValue === "") {
+    return fallback ? /* @__PURE__ */ jsxRuntime.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);
+    }
+  } else {
+    const text = formatFieldValue(fieldValue);
+    html = text ? markdownToHtml(text) : "";
+  }
+  if (!html) {
+    return fallback ? /* @__PURE__ */ jsxRuntime.jsx(Tag, { className, children: fallback }) : null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { className, dangerouslySetInnerHTML: { __html: html } });
+}
+var ComponentRenderBoundary = class extends react.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__ */ jsxRuntime.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 LiveNodeRender({
+  nodeId,
+  componentId,
+  props,
+  slots,
+  renderComponent
+}) {
+  const liveProps = useLiveComposerProps(nodeId, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderComponent(componentId, liveProps, slots, {
+    layoutNodeId: nodeId
+  }) });
+}
+function AmplifyRenderer({
+  renderComponent,
+  pageConfig: serverPageConfig,
+  loadingComponent,
+  errorComponent,
+  emptyComponent,
+  composerPreview
+}) {
+  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] = react.useState({});
+  react.useEffect(() => {
+    if (typeof window !== "undefined") {
+      if (window.__AMPLIFYUP_PREVIEW_MODE__ === true) {
+        return;
+      }
+      if (window.location.pathname.includes("/api/pages/proxy")) {
+        return;
+      }
+      if (window.self !== window.top) {
+        return;
+      }
+      const urlParams = new URLSearchParams(window.location.search);
+      if (urlParams.get("preview") === "true" || urlParams.get("visualEditor") === "true") {
+        return;
+      }
+      if (window.location.href.includes("preview=true") || window.location.href.includes("visualEditor=true")) {
+        return;
+      }
+    }
+    if (pageConfig && pageConfig.id !== "default") {
+      trackContentView(pageConfig.id, "page", {
+        route: pageConfig.route,
+        title: pageConfig.title
+      });
+    }
+  }, [pageConfig]);
+  react.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]);
+  react.useEffect(() => {
+    if (!pageConfig) return;
+    const t = window.setTimeout(() => {
+      getSDK().setupComponentViewTracking();
+      refreshEventTracking();
+    }, 100);
+    return () => window.clearTimeout(t);
+  }, [variantCache, pageConfig?.id]);
+  react.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;
       }
@@ -3057,619 +3520,233 @@ function AmplifyRenderer({
       /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold text-red-900 mb-2", children: "Error Loading Page" }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-700", children: error })
     ] }) }) }) });
-  }
-  if (!pageConfig) {
-    return null;
-  }
-  pageConfig.layout?.header !== false;
-  pageConfig.layout?.footer !== false;
-  const renderNode = (node) => {
-    const zoneIdFromProps = node.componentId === "AmplifyZone" ? String(node.props?.zoneId || "") : "";
-    if (node.componentId === "AmplifyZone") {
-      const contentSlot = node.slots?.find((s) => s.slotId === "content") || node.slots?.[0];
-      const children = Array.isArray(contentSlot?.children) ? contentSlot.children : [];
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          "data-node-id": node.id,
-          "data-amplifyup-node": "",
-          "data-amplifyup-component": "AmplifyZone",
-          "data-amplifyup-zone": zoneIdFromProps || void 0,
-          "data-zone-id": zoneIdFromProps || void 0,
-          children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(react.Fragment, { children: renderNode(child) }, child.id))
-            }
-          )
-        }
-      );
-    }
-    let slotChildren = {};
-    console.log(`[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 = [];
-        console.log(`[AmplifyRenderer] Processing slot ${slot.slotId} for node ${node.id}`, {
-          slotKey,
-          hasZoneId: !!slot.zoneId,
-          hasVariants: !!slot.variants,
-          hasVariantCache: !!variantCache[slotKey],
-          directChildrenCount: slot.children?.length || 0
-        });
-        if (slot.zoneId && slot.variants && variantCache[slotKey]) {
-          childrenToRender = variantCache[slotKey].children;
-          console.log(`[AmplifyRenderer] Using cached variant for slot ${slot.slotId}`, {
-            variantId: variantCache[slotKey].variantId,
-            childrenCount: childrenToRender.length
-          });
-        } else if (slot.zoneId && slot.variants) {
-          const defaultVariant = slot.variants.find((v) => v.isDefault);
-          childrenToRender = defaultVariant?.children || [];
-          console.log(`[AmplifyRenderer] Using default variant for slot ${slot.slotId}`, {
-            childrenCount: childrenToRender.length
-          });
-        } else {
-          childrenToRender = Array.isArray(slot.children) ? slot.children : [];
-          console.log(`[AmplifyRenderer] Using direct children for slot ${slot.slotId}`, {
-            childrenCount: childrenToRender.length
-          });
-        }
-        const safeChildren = Array.isArray(childrenToRender) ? childrenToRender : [];
-        slotChildren[slot.slotId] = /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            "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__ */ jsxRuntime.jsx(react.Fragment, { children: renderNode(child) }, child.id))
-          },
-          slot.slotId
-        );
-        console.log(`[AmplifyRenderer] Created slot content for ${slot.slotId}`, {
-          slotId: slot.slotId,
-          renderedChildrenCount: childrenToRender.length
-        });
-      }
-    }
-    const slotsToPass = Object.keys(slotChildren).length > 0 ? slotChildren : void 0;
-    console.log(`[AmplifyRenderer] Calling renderComponent for ${node.componentId}`, {
-      hasSlots: !!slotsToPass,
-      slotKeys: slotsToPass ? Object.keys(slotsToPass) : [],
-      propKeys: Object.keys(node.props || {}),
-      props: node.props || {}
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-node-id": node.id, "data-amplifyup-node": "", children: /* @__PURE__ */ jsxRuntime.jsx(
-      ComponentRenderBoundary,
-      {
-        componentId: node.componentId,
-        nodeId: node.id,
-        children: renderComponent(node.componentId, node.props || {}, slotsToPass, {
-          layoutNodeId: node.id
-        })
-      }
-    ) });
-  };
-  const rawTree = pageConfig.layoutTree;
-  const layoutTree = Array.isArray(rawTree) ? rawTree : rawTree && typeof rawTree === "object" && rawTree.componentId ? [rawTree] : [];
-  if (layoutTree.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("main", { children: emptyComponent || /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto px-4 py-16", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "No content configured for this page." }) }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("main", { children: composerPreview || isComposerPreview() ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { children: renderNode(node) }, node.id))
-    }
-  ) : layoutTree.map((node) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderNode(node) }, node.id)) });
-}
-function defaultPreviewCanvas() {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "amplifyup-slot-placeholder", children: "Drop components here" })
-    }
-  );
-}
-function hasAmplifyLayout(pageConfig) {
-  return !!(pageConfig && pageConfig.id !== "default" && Array.isArray(pageConfig.layoutTree) && pageConfig.layoutTree.length > 0);
-}
-function AmplifyPageContent({
-  fallback,
-  renderComponent,
-  pageConfig: pageConfigProp,
-  forceComposerPreview = false,
-  previewLoadingComponent,
-  previewEmptyComponent,
-  loadingComponent,
-  emptyComponent,
-  errorComponent
-}) {
-  const client = useAmplifyUp();
-  const preview = forceComposerPreview || isComposerPreview();
-  const pageConfig = pageConfigProp ?? client.pageConfig;
-  const loading = pageConfigProp ? false : client.loading;
-  const error = pageConfigProp ? null : client.error;
-  const previewCanvas = previewEmptyComponent ?? defaultPreviewCanvas();
-  const previewLoading = previewLoadingComponent ?? previewCanvas;
-  if (preview) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      AmplifyRenderer,
-      {
-        pageConfig: pageConfig ?? void 0,
-        renderComponent,
-        composerPreview: true,
-        loadingComponent: loadingComponent ?? previewLoading,
-        emptyComponent: emptyComponent ?? previewCanvas,
-        errorComponent: errorComponent ?? (() => previewCanvas)
-      }
-    );
-  }
-  if (loading) {
-    return loadingComponent ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingComponent }) : null;
-  }
-  if (error) {
-    if (errorComponent) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: errorComponent(error) });
-    return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : null;
-  }
-  if (!hasAmplifyLayout(pageConfig)) {
-    return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    AmplifyRenderer,
-    {
-      pageConfig: pageConfig ?? void 0,
-      renderComponent,
-      loadingComponent,
-      emptyComponent,
-      errorComponent
-    }
-  );
-}
-
-// src/server.tsx
-async function fetchPageConfigServer(route, trackingId, preview = false, options) {
-  const target = resolveAmplifyUpTarget({
-    configTarget: options?.target
-  });
-  const { orchestratorUrl, edgeUrl } = resolveAmplifyUpUrls(target);
-  const previewFlag = preview || (options?.searchParams ? isPreviewRequest(options.searchParams) : false);
-  const fetchOrchestratorPage = async (pageRoute, isPreview) => {
-    const params = new URLSearchParams({
-      route: pageRoute,
-      trackingId
-    });
-    if (isPreview) params.set("preview", "true");
-    const url = `${orchestratorUrl}/api/layout/provider?${params.toString()}`;
-    try {
-      const res = await fetch(url, {
-        cache: "no-store",
-        headers: { Accept: "application/json" }
-      });
-      if (!res.ok) return null;
-      const data = await res.json();
-      return data.page || null;
-    } catch {
-      return null;
-    }
-  };
-  const result = await fetchContent({
-    route,
-    trackingId,
-    anonId: options?.anonId,
-    siteId: options?.siteId,
-    preview: previewFlag,
-    orchestratorUrl,
-    edgeUrl,
-    fetchOrchestratorPage
-  });
-  return result.pageConfig;
-}
-var ComponentContext = react.createContext(null);
-function ComponentContextProvider({
-  children,
-  slots,
-  props,
-  layoutNodeId,
-  componentId
-}) {
-  console.log("[ComponentContextProvider] Providing context", {
-    hasSlots: !!slots,
-    slotKeys: slots ? Object.keys(slots) : [],
-    slotDetails: slots ? Object.keys(slots).map((key) => ({
-      key,
-      hasContent: !!slots[key],
-      contentType: slots[key] ? typeof slots[key] : "null"
-    })) : [],
-    hasProps: !!props,
-    propKeys: props ? Object.keys(props) : [],
-    layoutNodeId,
-    componentId
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(ComponentContext.Provider, { value: { slots, props, layoutNodeId, componentId }, children });
-}
-function Slot({
-  name,
-  className
-}) {
-  const context = react.useContext(ComponentContext);
-  console.log(`[Slot:${name}] Rendering slot`, {
-    hasContext: !!context,
-    availableSlotKeys: context?.slots ? Object.keys(context.slots) : [],
-    slotContent: context?.slots?.[name] ? "EXISTS" : "MISSING",
-    contextSlots: context?.slots
-  });
-  if (!context) {
-    console.warn(`[AmplifyUp SDK] Slot "${name}" used outside ComponentContextProvider`);
+  }
+  if (!pageConfig) {
     return null;
   }
-  const slotContent = context.slots?.[name];
-  const isEmpty = !slotContent;
-  console.log(`[Slot:${name}] Slot state`, {
-    isEmpty,
-    hasSlotContent: !!slotContent,
-    slotContentType: slotContent ? typeof slotContent : "null"
-  });
-  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;
-    }
-  })());
-  console.log(`[Slot:${name}] Editor mode detection`, {
-    isEditorMode,
-    isWindowDefined: typeof window !== "undefined",
-    previewModeFlag: typeof window !== "undefined" ? window.__AMPLIFYUP_PREVIEW_MODE__ : void 0,
-    urlParams: typeof window !== "undefined" ? {
-      preview: new URLSearchParams(window.location.search).get("preview"),
-      visualEditor: new URLSearchParams(window.location.search).get("visualEditor")
-    } : void 0,
-    inIframe: typeof window !== "undefined" ? window.self !== window.top : false,
-    referrer: typeof window !== "undefined" && document.referrer ? document.referrer : void 0
-  });
-  return /* @__PURE__ */ jsxRuntime.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 ? /* @__PURE__ */ jsxRuntime.jsx(
+  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__ */ jsxRuntime.jsx(
         "div",
         {
-          className: "amplifyup-slot-placeholder",
-          style: {
-            minHeight: "60px",
-            color: "#9ca3af",
-            fontSize: "14px",
-            pointerEvents: "none"
-          },
-          children: isEditorMode ? `Drop components here` : `Empty slot: ${name}`
+          "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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(react.Fragment, { children: renderNode(child) }, child.id))
+            }
+          )
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        isEditorMode && /* @__PURE__ */ jsxRuntime.jsxs(
+      );
+    }
+    let slotChildren = {};
+    console.log(`[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 = [];
+        console.log(`[AmplifyRenderer] Processing slot ${slot.slotId} for node ${node.id}`, {
+          slotKey,
+          hasZoneId: !!slot.zoneId,
+          hasVariants: !!slot.variants,
+          hasVariantCache: !!variantCache[slotKey],
+          directChildrenCount: slot.children?.length || 0
+        });
+        if (slot.zoneId && slot.variants && variantCache[slotKey]) {
+          childrenToRender = variantCache[slotKey].children;
+          console.log(`[AmplifyRenderer] Using cached variant for slot ${slot.slotId}`, {
+            variantId: variantCache[slotKey].variantId,
+            childrenCount: childrenToRender.length
+          });
+        } else if (slot.zoneId && slot.variants) {
+          const defaultVariant = slot.variants.find((v) => v.isDefault);
+          childrenToRender = defaultVariant?.children || [];
+          console.log(`[AmplifyRenderer] Using default variant for slot ${slot.slotId}`, {
+            childrenCount: childrenToRender.length
+          });
+        } else {
+          childrenToRender = Array.isArray(slot.children) ? slot.children : [];
+          console.log(`[AmplifyRenderer] Using direct children for slot ${slot.slotId}`, {
+            childrenCount: childrenToRender.length
+          });
+        }
+        const safeChildren = Array.isArray(childrenToRender) ? childrenToRender : [];
+        slotChildren[slot.slotId] = /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "amplifyup-slot-placeholder",
-            style: {
-              position: "absolute",
-              top: "4px",
-              left: "4px",
-              fontSize: "10px",
-              color: "#9ca3af",
-              pointerEvents: "none",
-              zIndex: 1,
-              minHeight: "auto"
-            },
-            children: [
-              "Slot: ",
-              name
-            ]
-          }
-        ),
-        slotContent
-      ] })
-    }
-  );
-}
-function isComposerEditMode() {
-  if (typeof window === "undefined") return false;
-  return isComposerPreview() && window.__AMPLIFYUP_COMPOSER_EDIT__ === true && 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 canInlineEdit(name, value) {
-  if (isLikelyNonTextFieldName(name)) return false;
-  if (value !== void 0 && value !== null && typeof value === "object") {
-    return false;
-  }
-  if (typeof value === "boolean") return false;
-  return true;
-}
-function useComposerEditMode() {
-  const [enabled, setEnabled] = react.useState(false);
-  react.useEffect(() => {
-    const sync = () => setEnabled(isComposerEditMode());
-    sync();
-    window.addEventListener("amplifyup:composer-edit", sync);
-    return () => window.removeEventListener("amplifyup:composer-edit", sync);
-  }, []);
-  return enabled;
-}
-function useFieldOverlay(layoutNodeId, name, source) {
-  const [overlay, setOverlay] = react.useState(void 0);
-  react.useEffect(() => {
-    const onPatch = (event) => {
-      const detail = event.detail || {};
-      if (detail.fieldName !== name) return;
-      if (detail.layoutNodeId && layoutNodeId && String(detail.layoutNodeId) !== String(layoutNodeId)) {
-        return;
+            "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__ */ jsxRuntime.jsx(react.Fragment, { children: renderNode(child) }, child.id))
+          },
+          slot.slotId
+        );
+        console.log(`[AmplifyRenderer] Created slot content for ${slot.slotId}`, {
+          slotId: slot.slotId,
+          renderedChildrenCount: childrenToRender.length
+        });
       }
-      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 ComposerInlineField({
-  name,
-  value,
-  fallback,
-  className,
-  render,
-  layoutNodeId,
-  componentId
-}) {
-  const [editing, setEditing] = react.useState(false);
-  const elRef = react.useRef(null);
-  const text = formatFieldValue(value);
-  const fallbackText = typeof fallback === "string" || typeof fallback === "number" ? String(fallback) : "";
-  const display = text || fallbackText;
-  const showRendered = !!render && !editing;
-  react.useEffect(() => {
-    const el = elRef.current;
-    if (!el || showRendered) return;
-    if (document.activeElement === el) return;
-    const next = display || "";
-    if (el.textContent !== next) el.textContent = next;
-  }, [display, showRendered]);
-  react.useEffect(() => {
-    if (!editing || !elRef.current) return;
-    const el = elRef.current;
-    el.textContent = display || "";
-    el.focus();
-    const range = document.createRange();
-    range.selectNodeContents(el);
-    const sel = window.getSelection();
-    sel?.removeAllRanges();
-    sel?.addRange(range);
-  }, [editing]);
-  const finishEdit = () => {
-    const raw = (elRef.current?.innerText ?? "").replace(/\u00a0/g, " ").replace(/\n+$/g, "");
-    const next = raw.trim() === "" ? "" : raw;
-    setEditing(false);
-    if (next === text) return;
-    if (!text && next === fallbackText) return;
-    commitComposerField(layoutNodeId, componentId, name, next);
+    }
+    const slotsToPass = Object.keys(slotChildren).length > 0 ? slotChildren : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-node-id": node.id, "data-amplifyup-node": "", children: /* @__PURE__ */ jsxRuntime.jsx(
+      ComponentRenderBoundary,
+      {
+        componentId: node.componentId,
+        nodeId: node.id,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          LiveNodeRender,
+          {
+            nodeId: node.id,
+            componentId: node.componentId,
+            props: node.props || {},
+            slots: slotsToPass,
+            renderComponent
+          }
+        )
+      }
+    ) });
   };
+  const rawTree = pageConfig.layoutTree;
+  const layoutTree = Array.isArray(rawTree) ? rawTree : rawTree && typeof rawTree === "object" && rawTree.componentId ? [rawTree] : [];
+  if (layoutTree.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("main", { children: emptyComponent || /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto px-4 py-16", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "No content configured for this page." }) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("main", { children: composerPreview || isComposerPreview() ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { children: renderNode(node) }, node.id))
+    }
+  ) : layoutTree.map((node) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderNode(node) }, node.id)) });
+}
+function defaultPreviewCanvas() {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
+    "div",
     {
-      ref: elRef,
-      className,
-      "data-amplifyup-field": name,
-      "data-amplifyup-node-id": layoutNodeId || void 0,
-      contentEditable: !showRendered,
-      suppressContentEditableWarning: true,
-      role: "textbox",
-      tabIndex: 0,
-      onMouseDown: (event) => {
-        event.stopPropagation();
-      },
-      onClick: (event) => {
-        const link = event.target?.closest?.("a");
-        if (link) event.preventDefault();
-        if (render && isComposerEditMode()) {
-          setEditing(true);
-        }
-      },
-      onFocus: () => {
-        if (!isComposerEditMode()) return;
-        if (render) setEditing(true);
-      },
-      onBlur: 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 = display || "";
-          setEditing(false);
-          event.currentTarget.blur();
-        }
-      },
-      style: {
-        cursor: "text",
-        outline: "1px dashed color-mix(in srgb, currentColor 40%, transparent)",
-        outlineOffset: "2px",
-        minWidth: "1ch",
-        display: render ? void 0 : "inline"
-      },
-      children: showRendered ? value != null && value !== "" ? render(value) : fallback ?? display : null
+      "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__ */ jsxRuntime.jsx("div", { className: "amplifyup-slot-placeholder", children: "Drop components here" })
     }
   );
 }
-function formatFieldValue(value) {
-  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
-    return String(value);
-  }
-  if (Array.isArray(value)) {
-    const parts = value.map((item) => {
-      if (typeof item === "string") return item;
-      if (item && typeof item === "object" && "children" in item && Array.isArray(item.children)) {
-        return item.children.map((c) => typeof c?.text === "string" ? c.text : "").join("");
-      }
-      return "";
-    }).filter(Boolean);
-    if (parts.length > 0) return parts.join(" ");
-  }
-  if (value && typeof value === "object") {
-    return "";
-  }
-  return "";
+function hasAmplifyLayout(pageConfig) {
+  return !!(pageConfig && pageConfig.id !== "default" && Array.isArray(pageConfig.layoutTree) && pageConfig.layoutTree.length > 0);
 }
-function Field({
-  name,
+function AmplifyPageContent({
   fallback,
-  className,
-  render
+  renderComponent,
+  pageConfig: pageConfigProp,
+  forceComposerPreview = false,
+  previewLoadingComponent,
+  previewEmptyComponent,
+  loadingComponent,
+  emptyComponent,
+  errorComponent
 }) {
-  const context = react.useContext(ComponentContext);
-  const composerEdit = useComposerEditMode();
-  const fieldValue = useFieldOverlay(
-    context?.layoutNodeId,
-    name,
-    context?.props?.[name]
-  );
-  if (!context) {
-    console.warn(`[AmplifyUp SDK] Field "${name}" used outside ComponentContextProvider`);
-    return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : null;
-  }
-  if (composerEdit && canInlineEdit(name, fieldValue)) {
+  const client = useAmplifyUp();
+  const preview = forceComposerPreview || isComposerPreview();
+  const pageConfig = pageConfigProp ?? client.pageConfig;
+  const loading = pageConfigProp ? false : client.loading;
+  const error = pageConfigProp ? null : client.error;
+  const previewCanvas = previewEmptyComponent ?? defaultPreviewCanvas();
+  const previewLoading = previewLoadingComponent ?? previewCanvas;
+  if (preview) {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      ComposerInlineField,
+      AmplifyRenderer,
       {
-        name,
-        value: fieldValue,
-        fallback,
-        className,
-        render,
-        layoutNodeId: context.layoutNodeId,
-        componentId: context.componentId
+        pageConfig: pageConfig ?? void 0,
+        renderComponent,
+        composerPreview: true,
+        loadingComponent: loadingComponent ?? previewLoading,
+        emptyComponent: emptyComponent ?? previewCanvas,
+        errorComponent: errorComponent ?? (() => previewCanvas)
       }
     );
   }
-  if (fieldValue === void 0 || fieldValue === null) {
-    return fallback ? /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: fallback }) : null;
-  }
-  if (render) {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: render(fieldValue) });
-  }
-  const text = formatFieldValue(fieldValue);
-  if (!text) {
-    return fallback ? /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: fallback }) : null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: text });
-}
-function markdownToHtml(markdown) {
-  try {
-    const result = marked.marked.parse(markdown, { async: false });
-    return typeof result === "string" ? result : "";
-  } catch {
-    return markdown;
+  if (loading) {
+    return loadingComponent ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingComponent }) : null;
   }
-}
-function RichText({
-  name,
-  fallback,
-  className,
-  as: Tag = "div"
-}) {
-  const context = react.useContext(ComponentContext);
-  const composerEdit = useComposerEditMode();
-  const fieldValue = useFieldOverlay(
-    context?.layoutNodeId,
-    name,
-    context?.props?.[name]
-  );
-  if (!context) {
-    console.warn(`[AmplifyUp SDK] RichText "${name}" used outside ComponentContextProvider`);
+  if (error) {
+    if (errorComponent) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: errorComponent(error) });
     return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : null;
   }
-  if (composerEdit && canInlineEdit(name, fieldValue)) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      ComposerInlineField,
-      {
-        name,
-        value: fieldValue,
-        fallback,
-        className,
-        layoutNodeId: context.layoutNodeId,
-        componentId: context.componentId
-      }
-    );
-  }
-  if (fieldValue === void 0 || fieldValue === null || fieldValue === "") {
-    return fallback ? /* @__PURE__ */ jsxRuntime.jsx(Tag, { className, children: fallback }) : null;
+  if (!hasAmplifyLayout(pageConfig)) {
+    return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : null;
   }
-  let html = "";
-  if (typeof fieldValue === "string") {
-    const trimmed = fieldValue.trim();
-    if (trimmed.startsWith("<") && trimmed.includes(">")) {
-      html = fieldValue;
-    } else {
-      html = markdownToHtml(fieldValue);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AmplifyRenderer,
+    {
+      pageConfig: pageConfig ?? void 0,
+      renderComponent,
+      loadingComponent,
+      emptyComponent,
+      errorComponent
     }
-  } else {
-    const text = formatFieldValue(fieldValue);
-    html = text ? markdownToHtml(text) : "";
-  }
-  if (!html) {
-    return fallback ? /* @__PURE__ */ jsxRuntime.jsx(Tag, { className, children: fallback }) : null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { className, dangerouslySetInnerHTML: { __html: html } });
+  );
+}
+
+// src/server.tsx
+async function fetchPageConfigServer(route, trackingId, preview = false, options) {
+  const target = resolveAmplifyUpTarget({
+    configTarget: options?.target
+  });
+  const { orchestratorUrl, edgeUrl } = resolveAmplifyUpUrls(target);
+  const previewFlag = preview || (options?.searchParams ? isPreviewRequest(options.searchParams) : false);
+  const fetchOrchestratorPage = async (pageRoute, isPreview) => {
+    const params = new URLSearchParams({
+      route: pageRoute,
+      trackingId
+    });
+    if (isPreview) params.set("preview", "true");
+    const url = `${orchestratorUrl}/api/layout/provider?${params.toString()}`;
+    try {
+      const res = await fetch(url, {
+        cache: "no-store",
+        headers: { Accept: "application/json" }
+      });
+      if (!res.ok) return null;
+      const data = await res.json();
+      return data.page || null;
+    } catch {
+      return null;
+    }
+  };
+  const result = await fetchContent({
+    route,
+    trackingId,
+    anonId: options?.anonId,
+    siteId: options?.siteId,
+    preview: previewFlag,
+    orchestratorUrl,
+    edgeUrl,
+    fetchOrchestratorPage
+  });
+  return result.pageConfig;
 }
 var usePathname = null;
 if (typeof window !== "undefined") {
@@ -3839,5 +3916,7 @@ exports.fetchPageConfigServer = fetchPageConfigServer;
 exports.isComposerPreview = isComposerPreview;
 exports.isPreviewRequest = isPreviewRequest;
 exports.useAmplifyUp = useAmplifyUp;
+exports.useComponentProps = useComponentProps;
+exports.useLiveComposerProps = useLiveComposerProps;
 //# sourceMappingURL=react.js.map
 //# sourceMappingURL=react.js.map