@amplifyup/sdk 0.2.1 → 0.2.3

package/dist/react.mjs

@@ -421,7 +421,7 @@ function isComposerPreview() {
   if (window.self !== window.top && document.referrer) {
     try {
       const refUrl = new URL(document.referrer);
-      if (refUrl.hostname === "amplifyup.ai" || refUrl.hostname.endsWith(".amplifyup.ai") || refUrl.hostname === "localhost" && refUrl.port === "5001" || refUrl.pathname.includes("/dashboard/composer") || refUrl.pathname.includes("/dashboard/routes/")) {
+      if (refUrl.hostname === "amplifyup.ai" || refUrl.hostname.endsWith(".amplifyup.ai") || refUrl.hostname === "localhost" && refUrl.port === "5001" || refUrl.pathname.includes("/dashboard/composer")) {
         return true;
       }
     } catch {
@@ -1063,7 +1063,8 @@ function layoutProviderCacheKey(opts) {
     opts.preview ? "1" : "0",
     opts.working ? "1" : "0",
     opts.zoneId || "",
-    opts.compositionId || ""
+    opts.compositionId || "",
+    opts.layoutId || ""
   ].join("|");
 }
 function getSettledLayoutProvider(key) {
@@ -1580,7 +1581,7 @@ var AmplifyUpSDK = class {
       if (document.referrer) {
         try {
           const referrerUrl = new URL(document.referrer);
-          if (referrerUrl.hostname === "localhost" && referrerUrl.port === "5001" || referrerUrl.pathname.includes("/dashboard/composer") || referrerUrl.pathname.includes("/dashboard/routes/")) {
+          if (referrerUrl.hostname === "localhost" && referrerUrl.port === "5001" || referrerUrl.pathname.includes("/dashboard/composer")) {
             return true;
           }
         } catch {
@@ -1857,11 +1858,7 @@ var AmplifyUpSDK = class {
           this.page(resumePath, { resumed: true });
           this.lastTrackedPath = resumePath;
           if (this.config?.debug) {
-            console.log(
-              "[AmplifyUp SDK] Idle resume page view",
-              resumePath,
-              `(hidden ${Math.round(idleMs / 6e4)}m)`
-            );
+            console.log("[AmplifyUp SDK] Idle resume page view", resumePath, `(hidden ${Math.round(idleMs / 6e4)}m)`);
           }
         }
         noteActivity();
@@ -1881,12 +1878,7 @@ var AmplifyUpSDK = class {
       }
       state.visibleSince = null;
     };
-    const activityEvents = [
-      "pointerdown",
-      "keydown",
-      "scroll",
-      "touchstart"
-    ];
+    const activityEvents = ["pointerdown", "keydown", "scroll", "touchstart"];
     const onActivity = () => noteActivity();
     window.addEventListener("scroll", onScroll, { passive: true });
     document.addEventListener("visibilitychange", onVisibility);
@@ -2034,11 +2026,7 @@ var AmplifyUpSDK = class {
     hosts.forEach((host) => observer.observe(host));
     this.componentViewObservers.push(observer);
     if (this.config?.debug) {
-      console.log(
-        "[AmplifyUp SDK] Component View tracking enabled for",
-        hosts.length,
-        "hosts"
-      );
+      console.log("[AmplifyUp SDK] Component View tracking enabled for", hosts.length, "hosts");
     }
   }
   cleanupComponentViewTracking() {
@@ -2510,6 +2498,8 @@ Available Console Commands:
         const compositionId = pageSearch.get("compositionId");
         if (zoneId) params.set("zoneId", zoneId);
         if (compositionId) params.set("compositionId", compositionId);
+        const layoutId = pageSearch.get("layoutId");
+        if (layoutId) params.set("layoutId", layoutId);
       }
     }
     if (isOnOrchestratorOrigin) {
@@ -2530,7 +2520,8 @@ Available Console Commands:
       preview,
       working: pageSearch ? isWorkingContentRequest(pageSearch) : false,
       zoneId: pageSearch?.get("zoneId"),
-      compositionId: pageSearch?.get("compositionId")
+      compositionId: pageSearch?.get("compositionId"),
+      layoutId: pageSearch?.get("layoutId")
     });
     return dedupeLayoutProviderFetch(cacheKey, async () => {
       const startedAt = Date.now();
@@ -2612,15 +2603,11 @@ Available Console Commands:
         ) : document;
         if (!scopeRoot) {
           if (this.config?.debug) {
-            console.log(
-              `[AmplifyUp SDK] Component host not found for ${eventConfig.componentId}`
-            );
+            console.log(`[AmplifyUp SDK] Component host not found for ${eventConfig.componentId}`);
           }
           return;
         }
-        targetElements = Array.from(
-          scopeRoot.querySelectorAll(eventConfig.selector)
-        );
+        targetElements = Array.from(scopeRoot.querySelectorAll(eventConfig.selector));
         if (scopeRoot instanceof Element && scopeRoot !== document.documentElement && scopeRoot.matches?.(eventConfig.selector)) {
           targetElements.unshift(scopeRoot);
         }
@@ -2653,7 +2640,9 @@ Available Console Commands:
           });
         }
         if (this.config?.debug) {
-          console.log(`[AmplifyUp SDK] Attached ${eventConfig.eventType} listener for ${eventConfig.eventName} on selector: ${eventConfig.selector}`);
+          console.log(
+            `[AmplifyUp SDK] Attached ${eventConfig.eventType} listener for ${eventConfig.eventName} on selector: ${eventConfig.selector}`
+          );
         }
       });
     });
@@ -2663,16 +2652,16 @@ Available Console Commands:
    */
   mapEventType(eventType) {
     const eventMap = {
-      "click": "click",
-      "submit": "submit",
-      "focus": "focus",
-      "blur": "blur",
-      "hover": "mouseenter",
-      "change": "change",
-      "scroll": "scroll",
-      "view": "view",
+      click: "click",
+      submit: "submit",
+      focus: "focus",
+      blur: "blur",
+      hover: "mouseenter",
+      change: "change",
+      scroll: "scroll",
+      view: "view",
       // Handled separately with IntersectionObserver
-      "custom": "custom"
+      custom: "custom"
     };
     return eventMap[eventType] || eventType;
   }
@@ -2748,11 +2737,7 @@ Available Console Commands:
       (entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
-            this.handleTrackedEvent(
-              new CustomEvent("view"),
-              config,
-              element
-            );
+            this.handleTrackedEvent(new CustomEvent("view"), config, element);
             observer.unobserve(element);
           }
         });
@@ -2895,21 +2880,15 @@ Available Console Commands:
           return;
         }
         if (event.data?.type === "AMPLIFYUP_FIELD_PATCH") {
-          window.dispatchEvent(
-            new CustomEvent("amplifyup:field-patch", { detail: event.data })
-          );
+          window.dispatchEvent(new CustomEvent("amplifyup:field-patch", { detail: event.data }));
           return;
         }
         if (event.data?.type === "AMPLIFYUP_PROPS_PATCH") {
-          window.dispatchEvent(
-            new CustomEvent("amplifyup:props-patch", { detail: event.data })
-          );
+          window.dispatchEvent(new CustomEvent("amplifyup:props-patch", { detail: event.data }));
           return;
         }
         if (event.data?.type === "AMPLIFYUP_LAYOUT_PATCH") {
-          window.dispatchEvent(
-            new CustomEvent("amplifyup:layout-patch", { detail: event.data })
-          );
+          window.dispatchEvent(new CustomEvent("amplifyup:layout-patch", { detail: event.data }));
           return;
         }
         if (event.data?.type === "COMPONENT_DELETABLE_STATUS") {
@@ -2972,9 +2951,7 @@ Available Console Commands:
           const { componentId, slotName, nodeId, isPageSlot } = event.data;
           let element = null;
           if (isPageSlot || slotName === "main" && !nodeId && !componentId) {
-            element = document.querySelector(
-              '[data-slot-source="page"]'
-            );
+            element = document.querySelector('[data-slot-source="page"]');
           }
           if (!element && nodeId && slotName) {
             element = document.querySelector(
@@ -2982,9 +2959,7 @@ Available Console Commands:
             );
           }
           if (!element && nodeId && !slotName) {
-            element = document.querySelector(
-              `[data-node-id="${nodeId}"]`
-            );
+            element = document.querySelector(`[data-node-id="${nodeId}"]`);
           }
           if (!element && slotName) {
             element = document.querySelector(
@@ -3025,30 +3000,33 @@ Available Console Commands:
             };
             if (window.parent && window.parent !== window) {
               const hierarchyEls = this.buildComponentHierarchy(element);
-              window.parent.postMessage({
-                type: "ELEMENT_POSITION",
-                componentId: componentId || null,
-                slotName: slotName || null,
-                nodeId: nodeId || null,
-                isPageSlot: !!isPageSlot || element.getAttribute("data-slot-source") === "page",
-                hierarchy: hierarchyEls.map((el, index) => {
-                  const elComponentId = el.getAttribute("data-amplifyup-component") || el.getAttribute("data-component-id");
-                  const elSlotName = el.getAttribute("data-amplifyup-slot") || el.getAttribute("data-slot-id");
-                  const isSlot = !elComponentId && !!elSlotName;
-                  const pageSlot = isSlot && el.getAttribute("data-slot-source") === "page";
-                  return {
-                    index,
-                    componentId: elComponentId,
-                    componentName: pageSlot ? "Page" : el.getAttribute("data-component-name"),
-                    slotName: isSlot ? elSlotName : null,
-                    isSlot,
-                    isPageSlot: pageSlot,
-                    nodeId: el.getAttribute("data-node-id") || (isSlot ? el.getAttribute("data-parent-node-id") : null)
-                  };
-                }),
-                position,
-                bounds
-              }, "*");
+              window.parent.postMessage(
+                {
+                  type: "ELEMENT_POSITION",
+                  componentId: componentId || null,
+                  slotName: slotName || null,
+                  nodeId: nodeId || null,
+                  isPageSlot: !!isPageSlot || element.getAttribute("data-slot-source") === "page",
+                  hierarchy: hierarchyEls.map((el, index) => {
+                    const elComponentId = el.getAttribute("data-amplifyup-component") || el.getAttribute("data-component-id");
+                    const elSlotName = el.getAttribute("data-amplifyup-slot") || el.getAttribute("data-slot-id");
+                    const isSlot = !elComponentId && !!elSlotName;
+                    const pageSlot = isSlot && el.getAttribute("data-slot-source") === "page";
+                    return {
+                      index,
+                      componentId: elComponentId,
+                      componentName: pageSlot ? "Page" : el.getAttribute("data-component-name"),
+                      slotName: isSlot ? elSlotName : null,
+                      isSlot,
+                      isPageSlot: pageSlot,
+                      nodeId: el.getAttribute("data-node-id") || (isSlot ? el.getAttribute("data-parent-node-id") : null)
+                    };
+                  }),
+                  position,
+                  bounds
+                },
+                "*"
+              );
             }
           } else {
             console.warn("[AmplifyUp SDK] Element not found for position request");
@@ -3064,7 +3042,11 @@ Available Console Commands:
         switch (message.type) {
           case "ENABLE_HIGHLIGHTING":
           case "UPDATE_HIGHLIGHTING":
-            console.log("[AmplifyUp SDK] Enabling highlighting with registry:", message.componentRegistry?.length || 0, "components");
+            console.log(
+              "[AmplifyUp SDK] Enabling highlighting with registry:",
+              message.componentRegistry?.length || 0,
+              "components"
+            );
             this.enableHighlighting(
               message.componentRegistry || [],
               message.highlightComponents ?? true,
@@ -3124,12 +3106,15 @@ Available Console Commands:
         const tagName = target.tagName.toLowerCase();
         const text = (target.textContent || "").replace(/\s+/g, " ").trim().substring(0, 80);
         if (window.parent && window.parent !== window) {
-          window.parent.postMessage({
-            type: "ELEMENT_CLICKED_FOR_EVENT",
-            selector,
-            tagName,
-            text
-          }, "*");
+          window.parent.postMessage(
+            {
+              type: "ELEMENT_CLICKED_FOR_EVENT",
+              selector,
+              tagName,
+              text
+            },
+            "*"
+          );
         }
       };
       document.addEventListener("click", this.eventSelectionClickHandler, true);
@@ -3155,9 +3140,7 @@ Available Console Commands:
       return "[" + attr.name + '="' + attr.value + '"]';
     }
     if (el.className && typeof el.className === "string") {
-      const classes = el.className.split(" ").filter(
-        (c) => c && !c.startsWith("has-") && !c.includes("selectable") && !c.includes("selected")
-      );
+      const classes = el.className.split(" ").filter((c) => c && !c.startsWith("has-") && !c.includes("selectable") && !c.includes("selected"));
       if (classes.length > 0) {
         return el.tagName.toLowerCase() + "." + classes[0];
       }
@@ -3207,9 +3190,7 @@ Available Console Commands:
       }
     });
     if (containing.length === 0) return null;
-    const innermost = containing.filter(
-      (el) => !containing.some((other) => other !== el && el.contains(other))
-    );
+    const innermost = containing.filter((el) => !containing.some((other) => other !== el && el.contains(other)));
     if (innermost.length === 1) return innermost[0];
     let best = innermost[0];
     let bestArea = Infinity;
@@ -3326,9 +3307,7 @@ Available Console Commands:
    */
   enableHighlighting(componentRegistry, highlightComponents, showZones) {
     if (typeof document === "undefined") return;
-    const previouslySelected = Array.from(
-      document.querySelectorAll(".amplifyup-selected")
-    );
+    const previouslySelected = Array.from(document.querySelectorAll(".amplifyup-selected"));
     this.componentRegistry = componentRegistry;
     this.highlightingEnabled = true;
     this.highlightComponentsEnabled = highlightComponents;
@@ -3701,10 +3680,7 @@ Available Console Commands:
       if (shouldReapply && this.highlightingEnabled) {
         setTimeout(() => {
           if (this.highlightingEnabled) {
-            this.applyComponentHighlights(
-              this.highlightComponentsEnabled,
-              this.showZonesEnabled
-            );
+            this.applyComponentHighlights(this.highlightComponentsEnabled, this.showZonesEnabled);
           }
         }, 100);
       }
@@ -3713,7 +3689,13 @@ Available Console Commands:
       childList: true,
       subtree: true,
       attributes: true,
-      attributeFilter: ["data-amplifyup-component", "data-component-id", "data-amplifyup-slot", "data-slot-id", "data-slot-empty"]
+      attributeFilter: [
+        "data-amplifyup-component",
+        "data-component-id",
+        "data-amplifyup-slot",
+        "data-slot-id",
+        "data-slot-empty"
+      ]
     });
   }
   /**
@@ -3727,9 +3709,7 @@ Available Console Commands:
     this.teardownComposerDragDrop();
     if (opts?.clearSelection !== false && typeof window !== "undefined") {
       window.__AMPLIFYUP_COMPOSER_EDIT__ = false;
-      window.dispatchEvent(
-        new CustomEvent("amplifyup:composer-edit", { detail: { enabled: false } })
-      );
+      window.dispatchEvent(new CustomEvent("amplifyup:composer-edit", { detail: { enabled: false } }));
     }
     if (this.mutationObserver) {
       this.mutationObserver.disconnect();
@@ -3887,7 +3867,10 @@ Available Console Commands:
             e.stopPropagation();
             this.sendSelectionMessage(htmlEl, hierarchy);
             if (window.parent && window.parent !== window) {
-              window.parent.postMessage({ type: "CHECK_COMPONENT_DELETABLE", componentId: component.component_id }, "*");
+              window.parent.postMessage(
+                { type: "CHECK_COMPONENT_DELETABLE", componentId: component.component_id },
+                "*"
+              );
             }
           };
           htmlEl.addEventListener("click", handleClick);
@@ -4262,23 +4245,12 @@ function ComponentContextProvider({
   componentId
 }) {
   const next = hydratePageResourceProps(props || {}, getPageResourceFields());
-  return /* @__PURE__ */ jsx(
-    ComponentContext.Provider,
-    {
-      value: { slots, props: next, layoutNodeId, componentId },
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx(ComponentContext.Provider, { value: { slots, props: next, layoutNodeId, componentId }, children });
 }
-function Slot({
-  name,
-  className
-}) {
+function Slot({ name, className }) {
   const context = useContext(ComponentContext);
   if (!context) {
-    console.warn(
-      `[AmplifyUp SDK] Slot "${name}" only works inside a component rendered from your component registry`
-    );
+    console.warn(`[AmplifyUp SDK] Slot "${name}" only works inside a component rendered from your component registry`);
     return null;
   }
   const slotContent = context.slots?.[name];
@@ -4294,21 +4266,17 @@ function Slot({
   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/");
+      return referrerUrl.hostname === "localhost" && referrerUrl.port === "5001" || referrerUrl.pathname.includes("/dashboard/composer");
     } catch {
       return false;
     }
   })());
-  sdkDebugOnce(
-    `slot:${context.layoutNodeId || ""}:${name}`,
-    `[Slot:${name}]`,
-    {
-      slotState,
-      isEmpty,
-      isEditorMode,
-      availableSlotKeys: context.slots ? Object.keys(context.slots) : []
-    }
-  );
+  sdkDebugOnce(`slot:${context.layoutNodeId || ""}:${name}`, `[Slot:${name}]`, {
+    slotState,
+    isEmpty,
+    isEditorMode,
+    availableSlotKeys: context.slots ? Object.keys(context.slots) : []
+  });
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -4398,18 +4366,12 @@ function canInlineEditRichText(name, value) {
   return true;
 }
 function useComposerEditMode() {
-  return useSyncExternalStore(
-    subscribeComposerEdit,
-    isComposerEditMode,
-    getComposerEditModeServer
-  );
+  return useSyncExternalStore(subscribeComposerEdit, isComposerEditMode, getComposerEditModeServer);
 }
 function useBoundField(field, value, name, component) {
   const bound = resolveEditableBinding(field, value, name);
   if (bound.requiresName) {
-    console.warn(
-      `[AmplifyUp SDK] ${component} value={\u2026} requires name="\u2026" for computed values`
-    );
+    console.warn(`[AmplifyUp SDK] ${component} value={\u2026} requires name="\u2026" for computed values`);
   }
   const fieldValue = useComposerFieldValue(bound.name, bound.value, bound.ref);
   return { editName: bound.name, fieldValue, ref: bound.ref };
@@ -4490,9 +4452,7 @@ function ComposerInlineField({
     const el = elRef.current;
     if (!el) return;
     if (document.activeElement === el) return;
-    if (el.querySelector(
-      "input, button, select, textarea, form, svg, iframe, img"
-    )) {
+    if (el.querySelector("input, button, select, textarea, form, svg, iframe, img")) {
       return;
     }
     const next = idleDisplay || "";
@@ -4699,9 +4659,7 @@ function warnReadOnlyRowField(name) {
   const key = name || "(unnamed)";
   if (warnedReadOnlyFields.has(key)) return;
   warnedReadOnlyFields.add(key);
-  console.warn(
-    `[AmplifyUp SDK] ${key} has no write target; rendered read-only.`
-  );
+  console.warn(`[AmplifyUp SDK] ${key} has no write target; rendered read-only.`);
 }
 function canComposerBind(field, ref, editName) {
   if (isReadOnlyRowField(field) || isFieldEnvelope(field) && field.readOnly) {
@@ -4713,9 +4671,7 @@ function canComposerBind(field, ref, editName) {
 function warnProjectionProps(component, hasField, hasValue, name) {
   if (process.env.NODE_ENV === "production") return;
   if (!hasField && !hasValue && !name) {
-    console.warn(
-      `[AmplifyUp SDK] ${component} needs field={fields.yourProp} (or value + name for computed values)`
-    );
+    console.warn(`[AmplifyUp SDK] ${component} needs field={fields.yourProp} (or value + name for computed values)`);
   }
 }
 function hasOwnProp(props, key) {
@@ -4769,26 +4725,14 @@ function markdownToHtml(markdown) {
   }
 }
 function RichText(props) {
-  const {
-    field,
-    value,
-    name,
-    className,
-    as: Tag = "div",
-    children
-  } = props;
+  const { field, value, name, className, as: Tag = "div", children } = props;
   const context = useContext(ComponentContext);
   const composerEdit = useComposerEditMode();
   const childrenValue = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
   const hasField = isFieldEnvelope(field);
   const hasValueProp = hasOwnProp(props, "value") || childrenValue !== void 0;
   const boundValue = hasOwnProp(props, "value") ? value : childrenValue !== void 0 ? childrenValue : value;
-  const { editName, fieldValue, ref } = useBoundField(
-    field,
-    boundValue,
-    name,
-    "RichText"
-  );
+  const { editName, fieldValue, ref } = useBoundField(field, boundValue, name, "RichText");
   assertNamedEnvelope("RichText", field);
   if (!hasField && !hasValueProp && !name) {
     return null;
@@ -4890,28 +4834,14 @@ function coerceImageField(field, value, name) {
   };
 }
 function Image(props) {
-  const {
-    field,
-    value,
-    name,
-    alt: altProp,
-    className,
-    width: widthProp,
-    height: heightProp,
-    ...imgProps
-  } = props;
+  const { field, value, name, alt: altProp, className, width: widthProp, height: heightProp, ...imgProps } = props;
   const context = useContext(ComponentContext);
   assertNamedEnvelope("Image", field);
   const coerced = coerceImageField(field, value, name);
   const boundField = coerced.field;
   const hasField = isFieldEnvelope(boundField);
   const hasValue = hasOwnProp(props, "value");
-  const { editName, fieldValue, ref } = useBoundField(
-    boundField,
-    coerced.value,
-    coerced.name,
-    "Image"
-  );
+  const { editName, fieldValue, ref } = useBoundField(boundField, coerced.value, coerced.name, "Image");
   const composerEdit = useComposerEditMode();
   warnProjectionProps("Image", hasField || isBrandedFields(field), hasValue, coerced.name || name);
   if (!isBrandedFields(field) && warnNotScalarField("Image", boundField, fieldValue)) {
@@ -4934,9 +4864,7 @@ function Image(props) {
     "data-amplifyup-ref-id": ref?.id || void 0
   } : null;
   if (composerEdit && !editName && (hasField || hasValue)) {
-    console.warn(
-      '[AmplifyUp SDK] Image value={\u2026} requires name="\u2026" for computed values'
-    );
+    console.warn('[AmplifyUp SDK] Image value={\u2026} requires name="\u2026" for computed values');
   }
   if (!src) {
     if (!composerEdit || !fieldAttrs) return null;