@amplifyup/sdk 0.1.68 → 0.1.70

package/dist/react.d.mts

@@ -43,6 +43,20 @@ interface AmplifyPageContentProps {
  */
 declare function AmplifyPageContent({ fallback, renderComponent, pageConfig: pageConfigProp, forceComposerPreview, previewLoadingComponent, previewEmptyComponent, loadingComponent, emptyComponent, errorComponent, }: AmplifyPageContentProps): react_jsx_runtime.JSX.Element | null;
 
+/**
+ * True when the page is running inside AmplifyUp Composer.
+ *
+ * Safe to use for conditional render (e.g. expose a CSS-background image
+ * as a clickable `<Image>` only in Composer). First client render matches
+ * the server (`false`); detection runs after mount.
+ *
+ * @param force - When true (e.g. SSR already knows `?preview=true`), skip
+ *   the post-mount flip and return true immediately.
+ */
+declare function useInComposer(force?: boolean): boolean;
+/** @deprecated Prefer `useInComposer`. Kept for internal AmplifyPageContent. */
+declare function useComposerPreviewFlag(force?: boolean): boolean;
+
 declare function ComponentContextProvider({ children, slots, props, layoutNodeId, componentId, }: {
     children: ReactNode;
     slots?: Record<string, ReactNode>;
@@ -168,6 +182,24 @@ declare function Image<T = unknown>(props: {
     alt?: string;
 } & Omit<react__default.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'name'>): react_jsx_runtime.JSX.Element | null;
 
+/** Tells Slot whether the layout/provider fetch has settled. */
+declare function ComposerLayoutStatusProvider({ ready, children, }: {
+    ready: boolean;
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+/** Composer slot lifecycle. Loading ≠ empty. */
+type SlotState = 'loading' | 'empty' | 'filled';
+declare function resolveSlotState(opts: {
+    layoutReady: boolean;
+    hasContent: boolean;
+}): SlotState;
+/** Add-component affordance is only for a resolved, empty slot. */
+declare function slotShowsAddComponent(state: SlotState): boolean;
+declare function slotStateFromEl(el: {
+    getAttribute: (name: string) => string | null;
+} | null | undefined): SlotState | null;
+
 declare function ComposerProvider({ children, }: {
     children: ReactNode;
 }): react_jsx_runtime.JSX.Element;
@@ -196,4 +228,4 @@ interface AmplifyUpProviderProps {
 declare function AmplifyUpProvider({ children, config, pageContext, }: AmplifyUpProviderProps): react_jsx_runtime.JSX.Element;
 declare function useAmplifyUp(): AmplifyUpContextType;
 
-export { AmplifyContentMeta, AmplifyPageContent, AmplifyUpProvider, ComponentContextProvider, ComposerProvider, ContentSource, Field, Field$1 as FieldEnvelope, Image, LayoutComponentProps, MaybeComposerProvider, PageConfig, RichText, Slot, useAmplifyUp };
+export { AmplifyContentMeta, AmplifyPageContent, AmplifyUpProvider, ComponentContextProvider, ComposerLayoutStatusProvider, ComposerProvider, ContentSource, Field, Field$1 as FieldEnvelope, Image, LayoutComponentProps, MaybeComposerProvider, PageConfig, RichText, Slot, type SlotState, resolveSlotState, slotShowsAddComponent, slotStateFromEl, useAmplifyUp, useComposerPreviewFlag, useInComposer };

package/dist/react.d.ts

@@ -43,6 +43,20 @@ interface AmplifyPageContentProps {
  */
 declare function AmplifyPageContent({ fallback, renderComponent, pageConfig: pageConfigProp, forceComposerPreview, previewLoadingComponent, previewEmptyComponent, loadingComponent, emptyComponent, errorComponent, }: AmplifyPageContentProps): react_jsx_runtime.JSX.Element | null;
 
+/**
+ * True when the page is running inside AmplifyUp Composer.
+ *
+ * Safe to use for conditional render (e.g. expose a CSS-background image
+ * as a clickable `<Image>` only in Composer). First client render matches
+ * the server (`false`); detection runs after mount.
+ *
+ * @param force - When true (e.g. SSR already knows `?preview=true`), skip
+ *   the post-mount flip and return true immediately.
+ */
+declare function useInComposer(force?: boolean): boolean;
+/** @deprecated Prefer `useInComposer`. Kept for internal AmplifyPageContent. */
+declare function useComposerPreviewFlag(force?: boolean): boolean;
+
 declare function ComponentContextProvider({ children, slots, props, layoutNodeId, componentId, }: {
     children: ReactNode;
     slots?: Record<string, ReactNode>;
@@ -168,6 +182,24 @@ declare function Image<T = unknown>(props: {
     alt?: string;
 } & Omit<react__default.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'name'>): react_jsx_runtime.JSX.Element | null;
 
+/** Tells Slot whether the layout/provider fetch has settled. */
+declare function ComposerLayoutStatusProvider({ ready, children, }: {
+    ready: boolean;
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+/** Composer slot lifecycle. Loading ≠ empty. */
+type SlotState = 'loading' | 'empty' | 'filled';
+declare function resolveSlotState(opts: {
+    layoutReady: boolean;
+    hasContent: boolean;
+}): SlotState;
+/** Add-component affordance is only for a resolved, empty slot. */
+declare function slotShowsAddComponent(state: SlotState): boolean;
+declare function slotStateFromEl(el: {
+    getAttribute: (name: string) => string | null;
+} | null | undefined): SlotState | null;
+
 declare function ComposerProvider({ children, }: {
     children: ReactNode;
 }): react_jsx_runtime.JSX.Element;
@@ -196,4 +228,4 @@ interface AmplifyUpProviderProps {
 declare function AmplifyUpProvider({ children, config, pageContext, }: AmplifyUpProviderProps): react_jsx_runtime.JSX.Element;
 declare function useAmplifyUp(): AmplifyUpContextType;
 
-export { AmplifyContentMeta, AmplifyPageContent, AmplifyUpProvider, ComponentContextProvider, ComposerProvider, ContentSource, Field, Field$1 as FieldEnvelope, Image, LayoutComponentProps, MaybeComposerProvider, PageConfig, RichText, Slot, useAmplifyUp };
+export { AmplifyContentMeta, AmplifyPageContent, AmplifyUpProvider, ComponentContextProvider, ComposerLayoutStatusProvider, ComposerProvider, ContentSource, Field, Field$1 as FieldEnvelope, Image, LayoutComponentProps, MaybeComposerProvider, PageConfig, RichText, Slot, type SlotState, resolveSlotState, slotShowsAddComponent, slotStateFromEl, useAmplifyUp, useComposerPreviewFlag, useInComposer };

package/dist/react.js

@@ -1,13 +1,13 @@
 'use client';
 'use strict';
 
-var React2 = require('react');
+var React3 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var marked = require('marked');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React2__default = /*#__PURE__*/_interopDefault(React2);
+var React3__default = /*#__PURE__*/_interopDefault(React3);
 
 /* @amplifyup/sdk - https://amplifyup.ai */
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
@@ -1044,7 +1044,7 @@ function dedupeLayoutProviderFetch(key, fetchFn) {
 function previewLayoutReady(opts) {
   if (opts.hasClientLayout) return true;
   if (opts.clientLoading) return false;
-  return opts.hasServerLayout;
+  return true;
 }
 
 // src/edge/normalizeRoute.ts
@@ -1515,33 +1515,11 @@ var AmplifyUpSDK = class {
     }
   }
   /**
-   * Detect if we're running in visual editor mode
-   * Returns true if:
-   * 1. Preview mode flag is set by proxy
-   * 2. We're in an iframe AND parent is from orchestrator domain
-   * 3. OR visualEditor/preview query parameter is present
+   * Detect if we're running in visual editor mode.
+   * Single source of truth: isComposerPreview() (flag, query, Composer referrer).
    */
   detectVisualEditorMode() {
-    if (typeof window === "undefined") return false;
-    if (window.__AMPLIFYUP_PREVIEW_MODE__ === true) {
-      return true;
-    }
-    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" || referrerUrl.pathname.includes("/dashboard/composer") || referrerUrl.pathname.includes("/dashboard/routes/")) {
-          return true;
-        }
-      }
-    } catch (e) {
-    }
-    return false;
+    return isComposerPreview();
   }
   /**
    * Check if we're in preview/composer mode (should disable tracking)
@@ -3890,13 +3868,16 @@ function getSDK(adapter) {
 var trackContentView = (contentId, contentType, properties) => getSDK().trackContentView(contentId, contentType, properties);
 var refreshEventTracking = () => getSDK().refreshEventTracking();
 getSDK();
-function useComposerPreviewFlag(force = false) {
-  const [detected, setDetected] = React2.useState(false);
-  React2.useEffect(() => {
+function useInComposer(force = false) {
+  const [detected, setDetected] = React3.useState(false);
+  React3.useEffect(() => {
     if (!force && isComposerPreview()) setDetected(true);
   }, [force]);
   return force || detected;
 }
+function useComposerPreviewFlag(force = false) {
+  return useInComposer(force);
+}
 
 // src/composer-store.ts
 var ComposerFieldStore = class {
@@ -3939,19 +3920,19 @@ var ComposerFieldStore = class {
     for (const fn of set) fn();
   }
 };
-var ComposerStoreContext = React2.createContext(null);
-var ComposerNodeContext = React2.createContext(void 0);
+var ComposerStoreContext = React3.createContext(null);
+var ComposerNodeContext = React3.createContext(void 0);
 function applyComposerPatch(store, name, value, ref, layoutNodeId) {
   store.set(composerStoreKey(name, ref, layoutNodeId), value);
 }
 function ComposerProvider({
   children
 }) {
-  const existing = React2.useContext(ComposerStoreContext);
-  const storeRef = React2.useRef(null);
+  const existing = React3.useContext(ComposerStoreContext);
+  const storeRef = React3.useRef(null);
   if (!storeRef.current) storeRef.current = new ComposerFieldStore();
   const store = existing || storeRef.current;
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (existing) return;
     const applyField = (fieldName, value, nodeId, ref) => {
       if (!fieldName || typeof fieldName !== "string") return;
@@ -4015,10 +3996,10 @@ function ComposerProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(ComposerStoreContext.Provider, { value: store, children });
 }
 function useComposerFieldValue(name, fallback, ref) {
-  const store = React2.useContext(ComposerStoreContext);
-  const layoutNodeId = React2.useContext(ComposerNodeContext);
+  const store = React3.useContext(ComposerStoreContext);
+  const layoutNodeId = React3.useContext(ComposerNodeContext);
   const key = composerStoreKey(name, ref, layoutNodeId);
-  const subscribe = React2.useCallback(
+  const subscribe = React3.useCallback(
     (onStoreChange) => {
       if (!store || !name) return () => {
       };
@@ -4026,11 +4007,11 @@ function useComposerFieldValue(name, fallback, ref) {
     },
     [store, name, key]
   );
-  const getSnapshot = React2.useCallback(() => {
+  const getSnapshot = React3.useCallback(() => {
     if (!store || !name) return void 0;
     return store.get(key);
   }, [store, name, key]);
-  const overlay = React2.useSyncExternalStore(subscribe, getSnapshot, () => void 0);
+  const overlay = React3.useSyncExternalStore(subscribe, getSnapshot, () => void 0);
   return overlay !== void 0 ? overlay : fallback;
 }
 function MaybeComposerProvider({
@@ -4038,7 +4019,7 @@ function MaybeComposerProvider({
   layoutNodeId,
   children
 }) {
-  const content = React2.useMemo(() => children, [children]);
+  const content = React3.useMemo(() => children, [children]);
   if (!enabled) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: content });
   return /* @__PURE__ */ jsxRuntime.jsx(ComposerProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(ComposerNodeContext.Provider, { value: layoutNodeId, children }) });
 }
@@ -4058,7 +4039,7 @@ function nodeRenderProps(node) {
     fields: branded
   };
 }
-var ComponentRenderBoundary = class extends React2.Component {
+var ComponentRenderBoundary = class extends React3.Component {
   constructor() {
     super(...arguments);
     this.state = { error: null };
@@ -4131,8 +4112,8 @@ function AmplifyRendererInner({
   const loading = serverPageConfig ? false : clientHook.loading;
   const error = serverPageConfig ? null : clientHook.error;
   const contentSource = clientHook.source;
-  const [variantCache, setVariantCache] = React2.useState({});
-  React2.useEffect(() => {
+  const [variantCache, setVariantCache] = React3.useState({});
+  React3.useEffect(() => {
     if (typeof window !== "undefined") {
       if (window.__AMPLIFYUP_PREVIEW_MODE__ === true) {
         return;
@@ -4158,7 +4139,7 @@ function AmplifyRendererInner({
       });
     }
   }, [pageConfig]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!pageConfig?.eventTracking?.length) return;
     const sdk = getSDK();
     if (!sdk.isInitialized()) return;
@@ -4176,7 +4157,7 @@ function AmplifyRendererInner({
       window.clearTimeout(t2);
     };
   }, [pageConfig?.id, pageConfig?.eventTracking]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!pageConfig) return;
     const t = window.setTimeout(() => {
       getSDK().setupComponentViewTracking();
@@ -4184,27 +4165,8 @@ function AmplifyRendererInner({
     }, 100);
     return () => window.clearTimeout(t);
   }, [variantCache, pageConfig?.id]);
-  React2.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) {
-      }
-      return false;
-    };
-    if (!isVisualEditorMode()) {
+  React3.useEffect(() => {
+    if (!isComposerPreview()) {
       return;
     }
     if (!pageConfig) {
@@ -4278,7 +4240,7 @@ function AmplifyRendererInner({
       );
     }
   }, [pageConfig]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!pageConfig?.layoutTree || !pageConfig.layoutId) return;
     const roots = pageConfig.layoutTree;
     const fromEdge = contentSource === "edge" || roots.some((n) => n._contentSource === "edge");
@@ -4419,7 +4381,7 @@ function AmplifyRendererInner({
               "data-amplifyup-slot": "content",
               "data-parent-node-id": node.id,
               "data-parent-component-id": "AmplifyZone",
-              children: children.filter(Boolean).map((child) => /* @__PURE__ */ jsxRuntime.jsx(React2.Fragment, { children: renderNode(child) }, child.id))
+              children: children.filter(Boolean).map((child) => /* @__PURE__ */ jsxRuntime.jsx(React3.Fragment, { children: renderNode(child) }, child.id))
             }
           )
         }
@@ -4452,7 +4414,7 @@ function AmplifyRendererInner({
             "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(React2.Fragment, { children: renderNode(child) }, child.id))
+            children: safeChildren.filter(Boolean).map((child) => /* @__PURE__ */ jsxRuntime.jsx(React3.Fragment, { children: renderNode(child) }, child.id))
           },
           slot.slotId
         );
@@ -4498,12 +4460,13 @@ function AmplifyRendererInner({
       "data-slot-id": "main",
       "data-amplifyup-slot": "main",
       "data-slot-source": "page",
+      "data-slot-state": layoutTree.length === 0 ? "empty" : "filled",
       "data-slot-empty": layoutTree.length === 0 ? "true" : void 0,
-      children: layoutTree.map((node) => /* @__PURE__ */ jsxRuntime.jsx(React2.Fragment, { children: renderNode(node) }, node.id))
+      children: layoutTree.map((node) => /* @__PURE__ */ jsxRuntime.jsx(React3.Fragment, { children: renderNode(node) }, node.id))
     }
-  ) : layoutTree.map((node) => /* @__PURE__ */ jsxRuntime.jsx(React2.Fragment, { children: renderNode(node) }, node.id)) }) });
+  ) : layoutTree.map((node) => /* @__PURE__ */ jsxRuntime.jsx(React3.Fragment, { children: renderNode(node) }, node.id)) }) });
 }
-var AmplifyRenderer = React2.memo(AmplifyRendererInner);
+var AmplifyRenderer = React3.memo(AmplifyRendererInner);
 function AddComponentIcon({ size = 28 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -4598,16 +4561,34 @@ function EmptySlotHint({
     }
   );
 }
-function defaultPreviewCanvas() {
+var ComposerLayoutStatusContext = React3.createContext({
+  ready: true
+});
+function ComposerLayoutStatusProvider({
+  ready,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ComposerLayoutStatusContext.Provider, { value: { ready }, children });
+}
+function useComposerLayoutStatus() {
+  return React3.useContext(ComposerLayoutStatusContext);
+}
+function previewPageSlot(state) {
   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(EmptySlotHint, {})
+      "data-slot-state": state,
+      "data-slot-empty": state === "empty" ? "true" : void 0,
+      style: {
+        minHeight: state === "empty" ? "50vh" : void 0,
+        width: "100%",
+        display: "block",
+        position: "relative"
+      },
+      children: state === "empty" ? /* @__PURE__ */ jsxRuntime.jsx(EmptySlotHint, {}) : null
     }
   );
 }
@@ -4654,25 +4635,26 @@ function AmplifyPageContent({
   }
   const loading = !hasAmplifyLayout(pageConfig) && client.loading;
   const error = hasAmplifyLayout(pageConfig) ? null : pageConfigProp ? null : client.error;
-  const previewCanvas = previewEmptyComponent ?? defaultPreviewCanvas();
-  const previewLoading = previewLoadingComponent ?? previewCanvas;
+  const previewEmpty = previewEmptyComponent ?? previewPageSlot("empty");
+  const previewLoading = previewLoadingComponent ?? previewPageSlot("loading");
   if (preview) {
     const ready = previewLayoutReady({
       clientLoading: client.loading,
-      hasClientLayout: !!clientLayout,
-      hasServerLayout: !!serverLayout
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx(
+      hasClientLayout: !!clientLayout});
+    if (!ready) {
+      return /* @__PURE__ */ jsxRuntime.jsx(ComposerLayoutStatusProvider, { ready: false, children: previewLoading });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(ComposerLayoutStatusProvider, { ready: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       AmplifyRenderer,
       {
-        pageConfig: ready ? pageConfig ?? void 0 : void 0,
+        pageConfig: pageConfig ?? void 0,
         renderComponent,
         composerPreview: true,
         loadingComponent: loadingComponent ?? previewLoading,
-        emptyComponent: emptyComponent ?? previewCanvas,
-        errorComponent: errorComponent ?? (() => previewCanvas)
+        emptyComponent: emptyComponent ?? previewEmpty,
+        errorComponent: errorComponent ?? (() => previewEmpty)
       }
-    );
+    ) });
   }
   if (loading) {
     return loadingComponent ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingComponent }) : null;
@@ -4696,6 +4678,24 @@ function AmplifyPageContent({
   );
 }
 
+// src/slot-state.ts
+function resolveSlotState(opts) {
+  if (!opts.layoutReady) return "loading";
+  return opts.hasContent ? "filled" : "empty";
+}
+function slotShowsAddComponent(state) {
+  return state === "empty";
+}
+function slotStateFromEl(el) {
+  if (!el) return null;
+  const explicit = el.getAttribute("data-slot-state");
+  if (explicit === "loading" || explicit === "empty" || explicit === "filled") {
+    return explicit;
+  }
+  if (el.getAttribute("data-slot-empty") === "true") return "empty";
+  return null;
+}
+
 // src/composer-edit-mode.ts
 function isComposerEditMode() {
   if (typeof window === "undefined") return false;
@@ -4710,7 +4710,7 @@ function subscribeComposerEdit(onStoreChange) {
 function getComposerEditModeServer() {
   return false;
 }
-var ComponentContext = React2.createContext(null);
+var ComponentContext = React3.createContext(null);
 function ComponentContextProvider({
   children,
   slots,
@@ -4731,13 +4731,18 @@ function Slot({
   name,
   className
 }) {
-  const context = React2.useContext(ComponentContext);
+  const context = React3.useContext(ComponentContext);
   if (!context) {
     console.warn(`[AmplifyUp SDK] Slot "${name}" used outside ComponentContextProvider`);
     return null;
   }
   const slotContent = context.slots?.[name];
-  const isEmpty = !slotContent;
+  const { ready: layoutReady } = useComposerLayoutStatus();
+  const slotState = resolveSlotState({
+    layoutReady,
+    hasContent: !!slotContent
+  });
+  const isEmpty = slotState === "empty";
   const isEditorMode = typeof window !== "undefined" && // Check for preview mode flag set by proxy
   (window.__AMPLIFYUP_PREVIEW_MODE__ === true || // Check URL query params
   new URLSearchParams(window.location.search).get("preview") === "true" || new URLSearchParams(window.location.search).get("visualEditor") === "true" || // Check if in iframe from orchestrator (check referrer hostname/port)
@@ -4753,6 +4758,7 @@ function Slot({
     `slot:${context.layoutNodeId || ""}:${name}`,
     `[Slot:${name}]`,
     {
+      slotState,
       isEmpty,
       isEditorMode,
       availableSlotKeys: context.slots ? Object.keys(context.slots) : []
@@ -4765,6 +4771,7 @@ function Slot({
       "data-slot-name": name,
       "data-slot-id": name,
       "data-amplifyup-slot": name,
+      "data-slot-state": slotState,
       "data-slot-empty": isEmpty ? "true" : void 0,
       "data-parent-node-id": context.layoutNodeId || void 0,
       "data-parent-component-id": context.componentId || void 0,
@@ -4774,7 +4781,7 @@ function Slot({
         // Only add position relative for overlay positioning in editor mode
         position: isEditorMode ? "relative" : void 0
       },
-      children: isEmpty ? isEditorMode ? /* @__PURE__ */ jsxRuntime.jsx(EmptySlotHint, { compact: true }) : /* @__PURE__ */ jsxRuntime.jsx(
+      children: slotState === "loading" ? null : isEmpty ? isEditorMode ? /* @__PURE__ */ jsxRuntime.jsx(EmptySlotHint, { compact: true }) : /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: "amplifyup-slot-placeholder",
@@ -4846,7 +4853,7 @@ function canInlineEditRichText(name, value) {
   return true;
 }
 function useComposerEditMode() {
-  return React2.useSyncExternalStore(
+  return React3.useSyncExternalStore(
     subscribeComposerEdit,
     isComposerEditMode,
     getComposerEditModeServer
@@ -4924,14 +4931,14 @@ function ComposerInlineField({
   fieldRef,
   rich = false
 }) {
-  const [focused, setFocused] = React2.useState(false);
-  const elRef = React2.useRef(null);
+  const [focused, setFocused] = React3.useState(false);
+  const elRef = React3.useRef(null);
   const storedEmpty = isComposerEmptyText(value);
   const text = storedEmpty ? "" : formatFieldValue(value);
   const hint = COMPOSER_EMPTY_FIELD_HINT;
   const idleDisplay = storedEmpty ? hint : text;
   const showHint = storedEmpty && !focused;
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     const el = elRef.current;
     if (!el) return;
     if (document.activeElement === el) return;
@@ -5049,8 +5056,8 @@ function ComposerInlineHtml({
   componentId,
   fieldRef
 }) {
-  const elRef = React2.useRef(null);
-  React2.useEffect(() => {
+  const elRef = React3.useRef(null);
+  React3.useEffect(() => {
     const el = elRef.current;
     if (!el) return;
     if (el.innerHTML !== html) el.innerHTML = html;
@@ -5068,7 +5075,7 @@ function ComposerInlineHtml({
       fieldRef
     });
   };
-  return React2__default.default.createElement(Tag, {
+  return React3__default.default.createElement(Tag, {
     ref: elRef,
     className,
     "data-amplifyup-field": name,
@@ -5167,7 +5174,7 @@ function hasOwnProp(props, key) {
 }
 function Field(props) {
   const { field, value, name, className } = props;
-  const context = React2.useContext(ComponentContext);
+  const context = React3.useContext(ComponentContext);
   const composerEdit = useComposerEditMode();
   const hasField = isFieldEnvelope(field);
   const hasValue = hasOwnProp(props, "value");
@@ -5221,7 +5228,7 @@ function RichText(props) {
     as: Tag = "div",
     children
   } = props;
-  const context = React2.useContext(ComponentContext);
+  const context = React3.useContext(ComponentContext);
   const composerEdit = useComposerEditMode();
   const childrenValue = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
   const hasField = isFieldEnvelope(field);
@@ -5344,7 +5351,7 @@ function Image(props) {
     height: heightProp,
     ...imgProps
   } = props;
-  const context = React2.useContext(ComponentContext);
+  const context = React3.useContext(ComponentContext);
   assertNamedEnvelope("Image", field);
   const coerced = coerceImageField(field, value, name);
   const boundField = coerced.field;
@@ -5431,7 +5438,7 @@ if (typeof window !== "undefined") {
   } catch {
   }
 }
-var AmplifyUpContext = React2.createContext(null);
+var AmplifyUpContext = React3.createContext(null);
 function normalizeRoutePath2(route) {
   if (!route) return "";
   const path = route.split("?")[0] || "/";
@@ -5443,12 +5450,12 @@ function AmplifyUpProvider({
   config,
   pageContext
 }) {
-  const [initialized, setInitialized] = React2.useState(false);
-  const [pageConfig, setPageConfig] = React2.useState(null);
-  const [loading, setLoading] = React2.useState(true);
-  const [error, setError] = React2.useState(null);
-  const [source, setSource] = React2.useState(null);
-  const [meta, setMeta] = React2.useState(null);
+  const [initialized, setInitialized] = React3.useState(false);
+  const [pageConfig, setPageConfig] = React3.useState(null);
+  const [loading, setLoading] = React3.useState(true);
+  const [error, setError] = React3.useState(null);
+  const [source, setSource] = React3.useState(null);
+  const [meta, setMeta] = React3.useState(null);
   const getActualRoute = () => {
     if (typeof window === "undefined") return "";
     const currentPath = window.location.pathname;
@@ -5465,15 +5472,15 @@ function AmplifyUpProvider({
     }
     return currentPath;
   };
-  const loadedRouteRef = React2.useRef(null);
+  const loadedRouteRef = React3.useRef(null);
   const nextPathname = usePathname ? usePathname() : null;
-  const [pathname, setPathname] = React2.useState(() => {
+  const [pathname, setPathname] = React3.useState(() => {
     if (typeof window !== "undefined") {
       return getActualRoute();
     }
     return "";
   });
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (typeof window !== "undefined") {
       const actualRoute = getActualRoute();
       if (window.location.pathname === "/api/pages/proxy" || window.location.pathname.startsWith("/api/pages/proxy")) {
@@ -5500,11 +5507,11 @@ function AmplifyUpProvider({
     }
   }, [nextPathname]);
   const pageContextKey = pageContext ? `${pageContext.resourceType}:${pageContext.key}` : "";
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!initialized || !pageContext) return;
     getSDK().setPageContext(pageContext);
   }, [initialized, pageContextKey]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     let cancelled = false;
     const sdk = getSDK();
     const run = async () => {
@@ -5626,7 +5633,7 @@ function AmplifyUpProvider({
     config.clientPersonalization,
     pageContextKey
   ]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     const applyLayoutTree = (layoutTree) => {
       if (!Array.isArray(layoutTree)) return;
       setPageConfig((prev) => {
@@ -5668,7 +5675,7 @@ function AmplifyUpProvider({
   );
 }
 function useAmplifyUp() {
-  const context = React2.useContext(AmplifyUpContext);
+  const context = React3.useContext(AmplifyUpContext);
   if (!context) {
     throw new Error("useAmplifyUp must be used within AmplifyUpProvider");
   }
@@ -5679,6 +5686,7 @@ exports.AmplifyPageContent = AmplifyPageContent;
 exports.AmplifyRenderer = AmplifyRenderer;
 exports.AmplifyUpProvider = AmplifyUpProvider;
 exports.ComponentContextProvider = ComponentContextProvider;
+exports.ComposerLayoutStatusProvider = ComposerLayoutStatusProvider;
 exports.ComposerProvider = ComposerProvider;
 exports.Field = Field;
 exports.Image = Image;
@@ -5699,9 +5707,14 @@ exports.isWorkingContentRequest = isWorkingContentRequest;
 exports.listOwnerFromSpec = listOwnerFromSpec;
 exports.nextPageSpec = nextPageSpec;
 exports.queryContent = queryContent;
+exports.resolveSlotState = resolveSlotState;
 exports.searchSpec = searchSpec;
 exports.selectVariants = selectVariants;
+exports.slotShowsAddComponent = slotShowsAddComponent;
+exports.slotStateFromEl = slotStateFromEl;
 exports.toFieldEnvelopes = toFieldEnvelopes;
 exports.useAmplifyUp = useAmplifyUp;
+exports.useComposerPreviewFlag = useComposerPreviewFlag;
+exports.useInComposer = useInComposer;
 //# sourceMappingURL=react.js.map
 //# sourceMappingURL=react.js.map