@amplifyup/sdk 0.1.68 → 0.1.69

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
@@ -4492,6 +4492,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 +4593,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 +4667,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 +4710,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 +4769,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 +4790,7 @@ function Slot({
     `slot:${context.layoutNodeId || ""}:${name}`,
     `[Slot:${name}]`,
     {
+      slotState,
       isEmpty,
       isEditorMode,
       availableSlotKeys: context.slots ? Object.keys(context.slots) : []
@@ -4759,6 +4803,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 +4813,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 +5107,7 @@ function ComposerInlineHtml({
       fieldRef
     });
   };
-  return React2.createElement(Tag, {
+  return React3.createElement(Tag, {
     ref: elRef,
     className,
     "data-amplifyup-field": name,
@@ -5669,6 +5714,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 };
 //# sourceMappingURL=react.mjs.map
 //# sourceMappingURL=react.mjs.map