@amplifyup/sdk 0.1.68 → 0.1.70

package/dist/react.mjs

@@ -1,5 +1,5 @@
 'use client';
-import React2, { createContext, memo, useState, useEffect, Fragment as Fragment$1, useContext, useRef, Component, useMemo, useSyncExternalStore, useCallback } from 'react';
+import React3, { createContext, memo, useState, useEffect, Fragment as Fragment$1, useContext, useRef, Component, useMemo, useSyncExternalStore, useCallback } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { marked } from 'marked';
 
@@ -1038,7 +1038,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
@@ -1509,33 +1509,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)
@@ -3884,13 +3862,16 @@ function getSDK(adapter) {
 var trackContentView = (contentId, contentType, properties) => getSDK().trackContentView(contentId, contentType, properties);
 var refreshEventTracking = () => getSDK().refreshEventTracking();
 getSDK();
-function useComposerPreviewFlag(force = false) {
+function useInComposer(force = false) {
   const [detected, setDetected] = useState(false);
   useEffect(() => {
     if (!force && isComposerPreview()) setDetected(true);
   }, [force]);
   return force || detected;
 }
+function useComposerPreviewFlag(force = false) {
+  return useInComposer(force);
+}
 
 // src/composer-store.ts
 var ComposerFieldStore = class {
@@ -4179,26 +4160,7 @@ function AmplifyRendererInner({
     return () => window.clearTimeout(t);
   }, [variantCache, pageConfig?.id]);
   useEffect(() => {
-    const isVisualEditorMode = () => {
-      if (typeof window === "undefined") return false;
-      const urlParams = new URLSearchParams(window.location.search);
-      if (urlParams.get("visualEditor") === "true" || urlParams.get("preview") === "true") {
-        return true;
-      }
-      const inIframe = window.self !== window.top;
-      if (!inIframe) return false;
-      try {
-        if (document.referrer) {
-          const referrerUrl = new URL(document.referrer);
-          if (referrerUrl.hostname === "localhost" && referrerUrl.port === "5001") {
-            return true;
-          }
-        }
-      } catch (e) {
-      }
-      return false;
-    };
-    if (!isVisualEditorMode()) {
+    if (!isComposerPreview()) {
       return;
     }
     if (!pageConfig) {
@@ -4492,6 +4454,7 @@ 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__ */ jsx(Fragment$1, { children: renderNode(node) }, node.id))
     }
@@ -4592,16 +4555,34 @@ function EmptySlotHint({
     }
   );
 }
-function defaultPreviewCanvas() {
+var ComposerLayoutStatusContext = createContext({
+  ready: true
+});
+function ComposerLayoutStatusProvider({
+  ready,
+  children
+}) {
+  return /* @__PURE__ */ jsx(ComposerLayoutStatusContext.Provider, { value: { ready }, children });
+}
+function useComposerLayoutStatus() {
+  return useContext(ComposerLayoutStatusContext);
+}
+function previewPageSlot(state) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot-id": "main",
       "data-amplifyup-slot": "main",
       "data-slot-source": "page",
-      "data-slot-empty": "true",
-      style: { minHeight: "50vh", width: "100%", display: "block", position: "relative" },
-      children: /* @__PURE__ */ jsx(EmptySlotHint, {})
+      "data-slot-state": state,
+      "data-slot-empty": state === "empty" ? "true" : void 0,
+      style: {
+        minHeight: state === "empty" ? "50vh" : void 0,
+        width: "100%",
+        display: "block",
+        position: "relative"
+      },
+      children: state === "empty" ? /* @__PURE__ */ jsx(EmptySlotHint, {}) : null
     }
   );
 }
@@ -4648,25 +4629,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__ */ jsx(
+      hasClientLayout: !!clientLayout});
+    if (!ready) {
+      return /* @__PURE__ */ jsx(ComposerLayoutStatusProvider, { ready: false, children: previewLoading });
+    }
+    return /* @__PURE__ */ jsx(ComposerLayoutStatusProvider, { ready: true, children: /* @__PURE__ */ 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__ */ jsx(Fragment, { children: loadingComponent }) : null;
@@ -4690,6 +4672,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;
@@ -4731,7 +4731,12 @@ function Slot({
     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)
@@ -4747,6 +4752,7 @@ function Slot({
     `slot:${context.layoutNodeId || ""}:${name}`,
     `[Slot:${name}]`,
     {
+      slotState,
       isEmpty,
       isEditorMode,
       availableSlotKeys: context.slots ? Object.keys(context.slots) : []
@@ -4759,6 +4765,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,
@@ -4768,7 +4775,7 @@ function Slot({
         // Only add position relative for overlay positioning in editor mode
         position: isEditorMode ? "relative" : void 0
       },
-      children: isEmpty ? isEditorMode ? /* @__PURE__ */ jsx(EmptySlotHint, { compact: true }) : /* @__PURE__ */ jsx(
+      children: slotState === "loading" ? null : isEmpty ? isEditorMode ? /* @__PURE__ */ jsx(EmptySlotHint, { compact: true }) : /* @__PURE__ */ jsx(
         "div",
         {
           className: "amplifyup-slot-placeholder",
@@ -5062,7 +5069,7 @@ function ComposerInlineHtml({
       fieldRef
     });
   };
-  return React2.createElement(Tag, {
+  return React3.createElement(Tag, {
     ref: elRef,
     className,
     "data-amplifyup-field": name,
@@ -5669,6 +5676,6 @@ function useAmplifyUp() {
   return context;
 }
 
-export { AmplifyPageContent, AmplifyRenderer, AmplifyUpProvider, ComponentContextProvider, ComposerProvider, Field, Image, MaybeComposerProvider, QueryContentError, RichText, SelectVariantsError, Slot, attachFieldEnvelopes, composerStoreKey, envelopeListRows, isBrandedFields, isComposerPreview, isFieldEnvelope, isPreviewRequest, isReadOnlyRowField, isWorkingContentRequest, listOwnerFromSpec, nextPageSpec, queryContent, searchSpec, selectVariants, toFieldEnvelopes, useAmplifyUp };
+export { AmplifyPageContent, AmplifyRenderer, AmplifyUpProvider, ComponentContextProvider, ComposerLayoutStatusProvider, ComposerProvider, Field, Image, MaybeComposerProvider, QueryContentError, RichText, SelectVariantsError, Slot, attachFieldEnvelopes, composerStoreKey, envelopeListRows, isBrandedFields, isComposerPreview, isFieldEnvelope, isPreviewRequest, isReadOnlyRowField, isWorkingContentRequest, listOwnerFromSpec, nextPageSpec, queryContent, resolveSlotState, searchSpec, selectVariants, slotShowsAddComponent, slotStateFromEl, toFieldEnvelopes, useAmplifyUp, useComposerPreviewFlag, useInComposer };
 //# sourceMappingURL=react.mjs.map
 //# sourceMappingURL=react.mjs.map