@amplifyup/sdk 0.1.26 → 0.1.28

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, {
@@ -1783,6 +1783,12 @@ Available Console Commands:
         return;
       }
       try {
+        if (event.data?.type === "AMPLIFYUP_FIELD_PATCH") {
+          window.dispatchEvent(
+            new CustomEvent("amplifyup:field-patch", { detail: event.data })
+          );
+          return;
+        }
         if (event.data?.type === "COMPONENT_DELETABLE_STATUS") {
           const { componentId, deletable, nodeId } = event.data;
           const element = document.querySelector(`[data-component-id="${componentId}"]`);
@@ -1969,6 +1975,10 @@ Available Console Commands:
   setEventSelectionMode(enabled) {
     if (typeof document === "undefined") return;
     this.eventSelectionMode = enabled;
+    if (typeof window !== "undefined") {
+      window.__AMPLIFYUP_EVENT_SELECTION__ = enabled;
+      window.dispatchEvent(new CustomEvent("amplifyup:composer-edit"));
+    }
     if (this.eventSelectionClickHandler) {
       document.removeEventListener("click", this.eventSelectionClickHandler, true);
       this.eventSelectionClickHandler = null;
@@ -2206,6 +2216,14 @@ Available Console Commands:
         el.classList.add("amplifyup-selected");
       }
     });
+    if (typeof window !== "undefined") {
+      window.__AMPLIFYUP_COMPOSER_EDIT__ = highlightComponents;
+      window.dispatchEvent(
+        new CustomEvent("amplifyup:composer-edit", {
+          detail: { enabled: highlightComponents }
+        })
+      );
+    }
   }
   /** Document-level drag/drop for cross-iframe drags from Composer sidebar. */
   setupComposerDragDrop() {
@@ -2514,6 +2532,12 @@ Available Console Commands:
     const clearSelection = opts?.clearSelection !== false;
     this.highlightingEnabled = false;
     this.teardownComposerDragDrop();
+    if (opts?.clearSelection !== false && typeof window !== "undefined") {
+      window.__AMPLIFYUP_COMPOSER_EDIT__ = false;
+      window.dispatchEvent(
+        new CustomEvent("amplifyup:composer-edit", { detail: { enabled: false } })
+      );
+    }
     if (this.mutationObserver) {
       this.mutationObserver.disconnect();
       this.mutationObserver = null;
@@ -2719,6 +2743,417 @@ function getSDK(adapter) {
 var trackContentView = (contentId, contentType, properties) => getSDK().trackContentView(contentId, contentType, properties);
 var refreshEventTracking = () => getSDK().refreshEventTracking();
 getSDK();
+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 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",
+          {
+            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_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;
+      }
+      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);
+  };
+  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 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 (composerEdit && canInlineEdit(name, fieldValue)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ComposerInlineField,
+      {
+        name,
+        value: fieldValue,
+        fallback,
+        className,
+        render,
+        layoutNodeId: context.layoutNodeId,
+        componentId: context.componentId
+      }
+    );
+  }
+  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;
+  }
+}
+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);
@@ -2766,6 +3201,18 @@ var ComponentRenderBoundary = class extends react.Component {
     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,
@@ -3120,20 +3567,21 @@ function AmplifyRenderer({
       }
     }
     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
-        })
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          LiveNodeRender,
+          {
+            nodeId: node.id,
+            componentId: node.componentId,
+            props: node.props || {},
+            slots: slotsToPass,
+            renderComponent
+          }
+        )
       }
     ) });
   };
@@ -3260,210 +3708,6 @@ async function fetchPageConfigServer(route, trackingId, preview = false, options
   });
   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`);
-    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",
-          {
-            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 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 Field({
-  name,
-  fallback,
-  className,
-  render
-}) {
-  const context = react.useContext(ComponentContext);
-  if (!context) {
-    console.warn(`[AmplifyUp SDK] Field "${name}" used outside ComponentContextProvider`);
-    return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : null;
-  }
-  const fieldValue = context.props?.[name];
-  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;
-  }
-}
-function RichText({
-  name,
-  fallback,
-  className,
-  as: Tag = "div"
-}) {
-  const context = react.useContext(ComponentContext);
-  if (!context) {
-    console.warn(`[AmplifyUp SDK] RichText "${name}" used outside ComponentContextProvider`);
-    return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : null;
-  }
-  const fieldValue = context.props?.[name];
-  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 usePathname = null;
 if (typeof window !== "undefined") {
   try {
@@ -3632,5 +3876,6 @@ exports.fetchPageConfigServer = fetchPageConfigServer;
 exports.isComposerPreview = isComposerPreview;
 exports.isPreviewRequest = isPreviewRequest;
 exports.useAmplifyUp = useAmplifyUp;
+exports.useLiveComposerProps = useLiveComposerProps;
 //# sourceMappingURL=react.js.map
 //# sourceMappingURL=react.js.map