@amplifyup/sdk 0.1.46 → 0.1.48

package/dist/react.js

@@ -2984,17 +2984,29 @@ Available Console Commands:
         '[data-slot-id="main"], [data-amplifyup-slot="main"] {',
         "  min-height: 50vh !important;",
         "}",
-        /* Single empty-state hint — Slot React label uses .amplifyup-slot-placeholder */
+        /* Empty-slot CTA — Slot / AmplifyPageContent EmptySlotHint */
         ".amplifyup-slot-placeholder {",
         "  display: flex !important;",
+        "  flex-direction: column !important;",
         "  align-items: center !important;",
         "  justify-content: center !important;",
+        "  gap: 12px !important;",
         "  min-height: inherit !important;",
-        "  color: rgba(34, 197, 94, 0.75) !important;",
-        "  font-size: 14px !important;",
-        "  font-weight: 500 !important;",
+        "  color: rgba(22, 163, 74, 0.85) !important;",
+        "  font-size: 15px !important;",
+        "  font-weight: 600 !important;",
         "  pointer-events: none !important;",
         "  text-align: center !important;",
+        "  box-sizing: border-box !important;",
+        "}",
+        ".amplifyup-slot-placeholder-icon {",
+        "  color: inherit !important;",
+        "}",
+        ".amplifyup-slot-placeholder-label {",
+        "  color: inherit !important;",
+        "}",
+        ".amplifyup-slot-label {",
+        "  pointer-events: none !important;",
         "}",
         "[data-slot-id].amplifyup-slot-hover, [data-amplifyup-slot].amplifyup-slot-hover {",
         "  outline-color: rgba(34, 197, 94, 1) !important;",
@@ -3318,6 +3330,100 @@ function getSDK(adapter) {
 var trackContentView = (contentId, contentType, properties) => getSDK().trackContentView(contentId, contentType, properties);
 var refreshEventTracking = () => getSDK().refreshEventTracking();
 getSDK();
+function AddComponentIcon({ size = 28 }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: "3",
+            y: "3",
+            width: "18",
+            height: "18",
+            rx: "4",
+            stroke: "currentColor",
+            strokeWidth: "1.75"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M12 8v8M8 12h8",
+            stroke: "currentColor",
+            strokeWidth: "1.75",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function EmptySlotHint({
+  label = "Click here to Add Component",
+  compact = false
+}) {
+  const iconSize = compact ? 20 : 28;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "amplifyup-slot-placeholder",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: compact ? 8 : 12,
+        minHeight: compact ? 60 : void 0,
+        width: "100%",
+        pointerEvents: "none",
+        textAlign: "center",
+        boxSizing: "border-box",
+        padding: compact ? "12px 8px" : "24px 16px"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "amplifyup-slot-placeholder-icon",
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: compact ? 36 : 48,
+              height: compact ? 36 : 48,
+              borderRadius: 12,
+              border: "1.5px dashed currentColor",
+              opacity: 0.9
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(AddComponentIcon, { size: iconSize })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "amplifyup-slot-placeholder-label",
+            style: {
+              fontSize: compact ? 13 : 15,
+              fontWeight: 600,
+              lineHeight: 1.3,
+              letterSpacing: "0.01em"
+            },
+            children: label
+          }
+        )
+      ]
+    }
+  );
+}
 var ComponentContext = React.createContext(null);
 function useLiveComposerProps(layoutNodeId, props) {
   const [live, setLive] = React.useState(props);
@@ -3462,7 +3568,7 @@ function Slot({
         // Only add position relative for overlay positioning in editor mode
         position: isEditorMode ? "relative" : void 0
       },
-      children: isEmpty ? /* @__PURE__ */ jsxRuntime.jsx(
+      children: isEmpty ? isEditorMode ? /* @__PURE__ */ jsxRuntime.jsx(EmptySlotHint, { compact: true }) : /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: "amplifyup-slot-placeholder",
@@ -3472,13 +3578,13 @@ function Slot({
             fontSize: "14px",
             pointerEvents: "none"
           },
-          children: isEditorMode ? `Drop components here` : `Empty slot: ${name}`
+          children: `Empty slot: ${name}`
         }
       ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         isEditorMode && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: "amplifyup-slot-placeholder",
+            className: "amplifyup-slot-label",
             style: {
               position: "absolute",
               top: "4px",
@@ -3486,8 +3592,7 @@ function Slot({
               fontSize: "10px",
               color: "#9ca3af",
               pointerEvents: "none",
-              zIndex: 1,
-              minHeight: "auto"
+              zIndex: 1
             },
             children: [
               "Slot: ",
@@ -4447,7 +4552,7 @@ function defaultPreviewCanvas() {
       "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" })
+      children: /* @__PURE__ */ jsxRuntime.jsx(EmptySlotHint, {})
     }
   );
 }