@amplifyup/sdk 0.1.62 → 0.1.64

package/dist/react.mjs

@@ -1,5 +1,5 @@
 'use client';
-import React2, { createContext, memo, useState, useEffect, Fragment as Fragment$1, useContext, Component, useMemo, useRef, useSyncExternalStore, useCallback } from 'react';
+import React2, { 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';
 
@@ -407,6 +407,16 @@ function isComposerPreview() {
 
 // src/field-envelope.ts
 var FIELDS_BRAND = Symbol("amplifyup.fields");
+var IDENTIFIER_KEYS = /* @__PURE__ */ new Set([
+  "id",
+  "_id",
+  "slug",
+  "key",
+  "_key",
+  "docId",
+  "_type",
+  "type"
+]);
 function isBrandedFields(value) {
   return !!value && typeof value === "object" && FIELDS_BRAND in value;
 }
@@ -428,6 +438,79 @@ function isPortableImageShape(value) {
   if (!value || typeof value !== "object" || Array.isArray(value)) return false;
   return "url" in value;
 }
+function isIdentifierKey(key) {
+  return IDENTIFIER_KEYS.has(key);
+}
+function isRecordList(value) {
+  if (!Array.isArray(value) || value.length === 0) return false;
+  const sample = value.find((item) => item != null);
+  if (sample === void 0) return false;
+  if (typeof sample !== "object" || Array.isArray(sample)) return false;
+  if (isPortableImageShape(sample)) return false;
+  if (sample.$$typeof) return false;
+  return true;
+}
+function isFieldRef(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const rec = value;
+  return typeof rec.providerId === "string" && !!rec.providerId && typeof rec.entity === "string" && !!rec.entity && typeof rec.id === "string" && !!rec.id;
+}
+function isListOwner(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const rec = value;
+  return typeof rec.providerId === "string" && !!rec.providerId && typeof rec.entity === "string" && !!rec.entity;
+}
+function isReadOnlyRowField(value) {
+  return isFieldEnvelope(value) && value.readOnly === true && !value.ref;
+}
+function composerStoreKey(name, ref, layoutNodeId) {
+  if (isFieldRef(ref)) {
+    return `record:${ref.providerId}:${ref.entity}:${ref.id}:${name}`;
+  }
+  return layoutNodeId ? `page:${layoutNodeId}:${name}` : name;
+}
+function listOwnerFromConnection(conn) {
+  if (!conn || typeof conn !== "object") return void 0;
+  if (conn.mode === "query") {
+    const providerId = String(conn.spec?.providerId || "").trim();
+    const entity = String(conn.spec?.entity || "").trim();
+    return providerId && entity ? { providerId, entity } : void 0;
+  }
+  if (conn.mode === "item" || conn.mode === "items") {
+    const providerId = String(conn.providerId || "").trim();
+    const entity = String(conn.entity || "").trim();
+    return providerId && entity ? { providerId, entity } : void 0;
+  }
+  return void 0;
+}
+function listOwnerFromSpec(spec) {
+  const providerId = String(spec?.providerId || "").trim();
+  const entity = String(spec?.entity || "").trim();
+  return providerId && entity ? { providerId, entity } : void 0;
+}
+function isEnvelopeSources(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const rec = value;
+  return rec.connections != null || rec.reads != null;
+}
+function normalizeEnvelopeSources(sources) {
+  if (!sources) return {};
+  if (isEnvelopeSources(sources) && !("mode" in sources)) {
+    return sources;
+  }
+  return { connections: sources };
+}
+function listOwnerForField(fieldName, props, sources) {
+  const { connections, reads } = normalizeEnvelopeSources(sources);
+  const resourceName = reads?.[fieldName]?.resource || fieldName;
+  const fromConn = listOwnerFromConnection(connections?.[resourceName]);
+  if (fromConn) return fromConn;
+  const paging = props?.[`${fieldName}Pagination`];
+  if (paging && typeof paging === "object" && !Array.isArray(paging)) {
+    return listOwnerFromSpec(paging.spec);
+  }
+  return void 0;
+}
 function joinPath(prefix, key) {
   return prefix ? `${prefix}.${key}` : key;
 }
@@ -435,39 +518,101 @@ function emptyValue(raw) {
   if (raw === void 0) return null;
   return raw;
 }
-function toFieldEnvelopes(source, prefix = "") {
+function rowId(raw) {
+  const candidates = [raw.id, raw._id, raw.docId, raw.key, raw._key];
+  for (const c of candidates) {
+    if (typeof c === "string" && c.trim()) return c;
+  }
+  return "";
+}
+function withLeaf(envelope, scope) {
+  if (isFieldRef(scope?.ref)) envelope.ref = scope.ref;
+  else if (scope?.readOnly) envelope.readOnly = true;
+  return envelope;
+}
+function toFieldEnvelopes(source, prefix = "", scope) {
+  const ctx = isFieldRef(scope) ? { ref: scope } : scope || {};
   const input = source && typeof source === "object" && !Array.isArray(source) ? source : {};
   if (isBrandedFields(input)) {
     return input;
   }
   const out = {};
   for (const [key, raw] of Object.entries(input)) {
+    if (isIdentifierKey(key) && (typeof raw === "string" || raw == null)) {
+      out[key] = raw ?? "";
+      continue;
+    }
     const path = joinPath(prefix, key);
     if (isFieldEnvelope(raw)) {
-      out[key] = { value: raw.value ?? null, name: raw.name || path };
+      const inner = raw.value;
+      if (isRecordList(inner)) {
+        const owner = ctx.owners?.(key);
+        out[key] = {
+          value: envelopeListRows(inner, owner),
+          name: raw.name || path
+        };
+        continue;
+      }
+      out[key] = withLeaf(
+        { value: raw.value ?? null, name: raw.name || path },
+        raw.ref ? { ref: raw.ref } : ctx
+      );
+      continue;
+    }
+    if (isRecordList(raw)) {
+      const owner = ctx.owners?.(key);
+      out[key] = { value: envelopeListRows(raw, owner), name: path };
       continue;
     }
     if (raw && typeof raw === "object" && !Array.isArray(raw) && !isPortableImageShape(raw) && !raw.$$typeof) {
-      out[key] = toFieldEnvelopes(raw, path);
+      out[key] = toFieldEnvelopes(raw, path, ctx);
       continue;
     }
-    out[key] = { value: emptyValue(raw), name: path };
+    out[key] = withLeaf({ value: emptyValue(raw), name: path }, ctx);
   }
   return brandFields(out);
 }
-function attachFieldEnvelopes(props) {
+function envelopeListRows(items, owner) {
+  return items.map((item) => envelopeListRow(item, owner));
+}
+function envelopeListRow(item, owner) {
+  if (isBrandedFields(item) && typeof item.id === "string") {
+    return item;
+  }
+  const raw = item && typeof item === "object" && !Array.isArray(item) ? item : {};
+  const id = rowId(raw);
+  const ref = isListOwner(owner) && id ? { providerId: owner.providerId, entity: owner.entity, id } : void 0;
+  const fields = toFieldEnvelopes(raw, "", {
+    ref,
+    readOnly: !ref
+  });
+  const row = fields;
+  if (typeof row.id !== "string") {
+    row.id = id;
+  }
+  return row;
+}
+function attachFieldEnvelopes(props, sources) {
   const raw = props && typeof props === "object" ? { ...props } : {};
   if (isBrandedFields(raw.fields)) return raw;
   const { fields: existing, ...content } = raw;
   const source = existing && typeof existing === "object" && !isFieldEnvelope(existing) ? existing : content;
-  return { ...raw, fields: toFieldEnvelopes(source) };
+  return {
+    ...raw,
+    fields: toFieldEnvelopes(source, "", {
+      owners: (fieldName) => listOwnerForField(fieldName, source, sources)
+    })
+  };
 }
 function walkLayoutNodes(nodes) {
   if (!Array.isArray(nodes)) return;
   for (const node of nodes) {
     if (!node || typeof node !== "object") continue;
     const rec = node;
-    rec.props = attachFieldEnvelopes(rec.props);
+    rec.props = attachFieldEnvelopes(rec.props, {
+      connections: rec.resources,
+      reads: rec.reads
+    });
     for (const slot of rec.slots || []) {
       walkLayoutNodes(slot.children);
     }
@@ -481,15 +626,36 @@ function envelopePageConfig(page) {
 }
 function collectFieldPatches(props) {
   const out = [];
+  const walkRows = (items) => {
+    for (const item of items) {
+      if (isBrandedFields(item) || item && typeof item === "object" && !Array.isArray(item) && !isFieldEnvelope(item)) {
+        walk(item, "");
+      }
+    }
+  };
   const walk = (obj, prefix) => {
     for (const [key, raw] of Object.entries(obj)) {
+      if (isIdentifierKey(key)) continue;
       if (key === "fields" && raw && typeof raw === "object" && !Array.isArray(raw) && !isFieldEnvelope(raw)) {
         walk(raw, prefix);
         continue;
       }
       const path = joinPath(prefix, key);
       if (isFieldEnvelope(raw)) {
-        out.push({ name: raw.name || path, value: raw.value });
+        if (isRecordList(raw.value)) {
+          walkRows(raw.value);
+          continue;
+        }
+        const patch = {
+          name: raw.name || path,
+          value: raw.value
+        };
+        if (raw.ref) patch.ref = raw.ref;
+        out.push(patch);
+        continue;
+      }
+      if (isRecordList(raw)) {
+        walkRows(raw);
         continue;
       }
       if (raw && typeof raw === "object" && !Array.isArray(raw) && !isPortableImageShape(raw) && !raw.$$typeof) {
@@ -506,7 +672,12 @@ function collectFieldPatches(props) {
 }
 function resolveEditableBinding(field, value, name) {
   if (isFieldEnvelope(field)) {
-    return { name: field.name, value: field.value, requiresName: false };
+    return {
+      name: field.name,
+      value: field.value,
+      ref: field.ref,
+      requiresName: false
+    };
   }
   return {
     name: name || "",
@@ -865,7 +1036,10 @@ async function fetchEdgeResolve(options) {
   return envelopeResolvedPayload(body);
 }
 function envelopeResolvedComponent(node) {
-  node.props = attachFieldEnvelopes(node.props);
+  node.props = attachFieldEnvelopes(node.props, {
+    connections: node.resources,
+    reads: node.reads
+  });
   if (!node.children) return;
   for (const kids of Object.values(node.children)) {
     for (const child of kids || []) envelopeResolvedComponent(child);
@@ -1124,7 +1298,7 @@ async function fetchEdgeQuery(options) {
 async function queryContent(options) {
   const target = resolveAmplifyUpTarget({ configTarget: options.target });
   const { edgeUrl } = resolveAmplifyUpUrls(target);
-  return fetchEdgeQuery({
+  const raw = await fetchEdgeQuery({
     edgeUrl,
     trackingId: options.trackingId,
     route: options.route,
@@ -1133,6 +1307,13 @@ async function queryContent(options) {
     fetch: options.fetch,
     signal: options.signal
   });
+  return {
+    ...raw,
+    results: envelopeListRows(
+      raw.results,
+      listOwnerFromSpec(options.spec)
+    )
+  };
 }
 function nextPageSpec(pagination) {
   return { ...pagination.spec, offset: pagination.nextOffset };
@@ -3617,39 +3798,62 @@ var ComposerFieldStore = class {
       if (set.size === 0) this.listeners.delete(name);
     };
   }
+  keys() {
+    return [...this.values.keys()];
+  }
+  delete(name) {
+    if (!name || !this.values.has(name)) return;
+    this.values.delete(name);
+    const set = this.listeners.get(name);
+    if (!set) return;
+    for (const fn of set) fn();
+  }
 };
 var ComposerStoreContext = createContext(null);
-function matchesNode(eventNodeId, layoutNodeId) {
-  if (eventNodeId && layoutNodeId && String(eventNodeId) !== String(layoutNodeId)) {
-    return false;
-  }
-  return true;
+var ComposerNodeContext = createContext(void 0);
+function applyComposerPatch(store, name, value, ref, layoutNodeId) {
+  store.set(composerStoreKey(name, ref, layoutNodeId), value);
 }
 function ComposerProvider({
-  layoutNodeId,
   children
 }) {
+  const existing = useContext(ComposerStoreContext);
   const storeRef = useRef(null);
   if (!storeRef.current) storeRef.current = new ComposerFieldStore();
-  const store = storeRef.current;
+  const store = existing || storeRef.current;
   useEffect(() => {
-    const applyField = (fieldName, value, nodeId) => {
+    if (existing) return;
+    const applyField = (fieldName, value, nodeId, ref) => {
       if (!fieldName || typeof fieldName !== "string") return;
-      if (!matchesNode(nodeId, layoutNodeId)) return;
-      store.set(fieldName, value);
+      const fieldRef = isFieldRef(ref) ? ref : void 0;
+      const layoutNodeId = typeof nodeId === "string" && nodeId ? nodeId : void 0;
+      applyComposerPatch(store, fieldName, value, fieldRef, layoutNodeId);
     };
     const applyProps = (nextProps, nodeId) => {
       if (!nextProps || typeof nextProps !== "object" || Array.isArray(nextProps)) {
         return;
       }
-      if (!matchesNode(nodeId, layoutNodeId)) return;
-      for (const patch of collectFieldPatches(nextProps)) {
-        store.set(patch.name, patch.value);
+      const layoutNodeId = typeof nodeId === "string" && nodeId ? nodeId : void 0;
+      for (const patch of collectFieldPatches(
+        nextProps
+      )) {
+        applyComposerPatch(
+          store,
+          patch.name,
+          patch.value,
+          patch.ref,
+          patch.ref ? void 0 : layoutNodeId
+        );
       }
     };
     const onPatch = (event) => {
       const detail = event.detail || {};
-      applyField(detail.fieldName, detail.value, detail.layoutNodeId);
+      applyField(
+        detail.fieldName,
+        detail.value,
+        detail.layoutNodeId,
+        detail.ref
+      );
     };
     const onPropsPatch = (event) => {
       const detail = event.detail || {};
@@ -3661,7 +3865,12 @@ function ComposerProvider({
         return;
       }
       if (event.data?.type !== "AMPLIFYUP_FIELD_PATCH") return;
-      applyField(event.data.fieldName, event.data.value, event.data.layoutNodeId);
+      applyField(
+        event.data.fieldName,
+        event.data.value,
+        event.data.layoutNodeId,
+        event.data.ref
+      );
     };
     window.addEventListener("amplifyup:field-patch", onPatch);
     window.addEventListener("amplifyup:props-patch", onPropsPatch);
@@ -3671,23 +3880,26 @@ function ComposerProvider({
       window.removeEventListener("amplifyup:props-patch", onPropsPatch);
       window.removeEventListener("message", onMessage);
     };
-  }, [layoutNodeId, store]);
+  }, [existing, store]);
+  if (existing) return /* @__PURE__ */ jsx(Fragment, { children });
   return /* @__PURE__ */ jsx(ComposerStoreContext.Provider, { value: store, children });
 }
-function useComposerFieldValue(name, fallback) {
+function useComposerFieldValue(name, fallback, ref) {
   const store = useContext(ComposerStoreContext);
+  const layoutNodeId = useContext(ComposerNodeContext);
+  const key = composerStoreKey(name, ref, layoutNodeId);
   const subscribe = useCallback(
     (onStoreChange) => {
       if (!store || !name) return () => {
       };
-      return store.subscribe(name, onStoreChange);
+      return store.subscribe(key, onStoreChange);
     },
-    [store, name]
+    [store, name, key]
   );
   const getSnapshot = useCallback(() => {
     if (!store || !name) return void 0;
-    return store.get(name);
-  }, [store, name]);
+    return store.get(key);
+  }, [store, name, key]);
   const overlay = useSyncExternalStore(subscribe, getSnapshot, () => void 0);
   return overlay !== void 0 ? overlay : fallback;
 }
@@ -3698,7 +3910,7 @@ function MaybeComposerProvider({
 }) {
   const content = useMemo(() => children, [children]);
   if (!enabled) return /* @__PURE__ */ jsx(Fragment, { children: content });
-  return /* @__PURE__ */ jsx(ComposerProvider, { layoutNodeId, children });
+  return /* @__PURE__ */ jsx(ComposerProvider, { children: /* @__PURE__ */ jsx(ComposerNodeContext.Provider, { value: layoutNodeId, children }) });
 }
 function nodeRenderProps(node) {
   const settings = node.settings || {};
@@ -4156,7 +4368,7 @@ function AmplifyRendererInner({
   if (layoutTree.length === 0) {
     return /* @__PURE__ */ jsx("main", { children: emptyComponent || /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 py-16", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "No content configured for this page." }) }) });
   }
-  return /* @__PURE__ */ jsx("main", { children: composerPreview || isComposerPreview() ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ComposerProvider, { children: /* @__PURE__ */ jsx("main", { children: composerPreview || isComposerPreview() ? /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot-id": "main",
@@ -4165,7 +4377,7 @@ function AmplifyRendererInner({
       "data-slot-empty": layoutTree.length === 0 ? "true" : void 0,
       children: layoutTree.map((node) => /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(node) }, node.id))
     }
-  ) : layoutTree.map((node) => /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(node) }, node.id)) });
+  ) : layoutTree.map((node) => /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(node) }, node.id)) }) });
 }
 var AmplifyRenderer = memo(AmplifyRendererInner);
 function AddComponentIcon({ size = 28 }) {
@@ -4354,6 +4566,21 @@ function AmplifyPageContent({
     }
   );
 }
+
+// src/composer-edit-mode.ts
+function isComposerEditMode() {
+  if (typeof window === "undefined") return false;
+  return isComposerPreview() && window.__AMPLIFYUP_EVENT_SELECTION__ !== true;
+}
+function subscribeComposerEdit(onStoreChange) {
+  if (typeof window === "undefined") return () => {
+  };
+  window.addEventListener("amplifyup:composer-edit", onStoreChange);
+  return () => window.removeEventListener("amplifyup:composer-edit", onStoreChange);
+}
+function getComposerEditModeServer() {
+  return false;
+}
 var ComponentContext = createContext(null);
 function ComponentContextProvider({
   children,
@@ -4455,10 +4682,6 @@ function Slot({
     }
   );
 }
-function isComposerEditMode() {
-  if (typeof window === "undefined") return false;
-  return isComposerPreview() && window.__AMPLIFYUP_EVENT_SELECTION__ !== true;
-}
 function isLikelyNonTextFieldName(name) {
   const n = name.toLowerCase();
   return n.includes("href") || n.includes("url") || n.includes("src") || n.includes("image") || n.includes("icon") || n.includes("overlay") || n.includes("color");
@@ -4493,17 +4716,11 @@ function canInlineEditRichText(name, value) {
   }
   return true;
 }
-function subscribeComposerEdit(onStoreChange) {
-  if (typeof window === "undefined") return () => {
-  };
-  window.addEventListener("amplifyup:composer-edit", onStoreChange);
-  return () => window.removeEventListener("amplifyup:composer-edit", onStoreChange);
-}
 function useComposerEditMode() {
   return useSyncExternalStore(
     subscribeComposerEdit,
     isComposerEditMode,
-    () => false
+    getComposerEditModeServer
   );
 }
 function useBoundField(field, value, name, component) {
@@ -4513,10 +4730,10 @@ function useBoundField(field, value, name, component) {
       `[AmplifyUp SDK] ${component} value={\u2026} requires name="\u2026" for computed values`
     );
   }
-  const fieldValue = useComposerFieldValue(bound.name, bound.value);
-  return { editName: bound.name, fieldValue };
+  const fieldValue = useComposerFieldValue(bound.name, bound.value, bound.ref);
+  return { editName: bound.name, fieldValue, ref: bound.ref };
 }
-function commitComposerField(layoutNodeId, componentId, name, value) {
+function commitComposerField(layoutNodeId, componentId, name, value, ref) {
   if (typeof window === "undefined" || window.parent === window) return;
   window.parent.postMessage(
     {
@@ -4524,7 +4741,8 @@ function commitComposerField(layoutNodeId, componentId, name, value) {
       layoutNodeId,
       componentId,
       fieldName: name,
-      value
+      value,
+      ...ref ? { ref } : {}
     },
     "*"
   );
@@ -4549,6 +4767,7 @@ function requestCanvasRichTextEdit(opts) {
       componentId: opts.componentId,
       fieldName: opts.name,
       value: opts.value,
+      ...opts.fieldRef ? { ref: opts.fieldRef } : {},
       bounds: {
         top: rect.top,
         left: rect.left,
@@ -4571,23 +4790,21 @@ function ComposerInlineField({
   name,
   value,
   className,
-  render,
   layoutNodeId,
   componentId,
+  fieldRef,
   rich = false
 }) {
-  const [editing, setEditing] = useState(false);
   const [focused, setFocused] = useState(false);
   const elRef = useRef(null);
   const storedEmpty = isComposerEmptyText(value);
   const text = storedEmpty ? "" : formatFieldValue(value);
   const hint = COMPOSER_EMPTY_FIELD_HINT;
   const idleDisplay = storedEmpty ? hint : text;
-  const showRendered = !!render && !editing && !storedEmpty;
-  const showHint = storedEmpty && !focused && !showRendered;
+  const showHint = storedEmpty && !focused;
   useEffect(() => {
     const el = elRef.current;
-    if (!el || showRendered) return;
+    if (!el) return;
     if (document.activeElement === el) return;
     if (el.querySelector(
       "input, button, select, textarea, form, svg, iframe, img"
@@ -4596,34 +4813,20 @@ function ComposerInlineField({
     }
     const next = idleDisplay || "";
     if (el.textContent !== next) el.textContent = next;
-  }, [idleDisplay, showRendered]);
-  useEffect(() => {
-    if (!editing || !elRef.current) return;
-    const el = elRef.current;
-    if (storedEmpty) {
-      el.textContent = "";
-      el.focus();
-      placeCaret(el, true);
-      return;
-    }
-    el.textContent = idleDisplay || "";
-    el.focus();
-    placeCaret(el, false);
-  }, [editing, storedEmpty, idleDisplay]);
+  }, [idleDisplay]);
   const finishEdit = () => {
     const raw = (elRef.current?.innerText ?? "").replace(/\u00a0/g, " ").replace(/\n+$/g, "");
     const next = raw.trim() === "" ? "" : raw;
-    setEditing(false);
     setFocused(false);
     if (storedEmpty && next === "") {
       if (elRef.current) elRef.current.textContent = hint;
       if (typeof value === "string" && EMPTY_FIELD_PLACEHOLDERS.has(value.trim())) {
-        commitComposerField(layoutNodeId, componentId, name, "");
+        commitComposerField(layoutNodeId, componentId, name, "", fieldRef);
       }
       return;
     }
     if (next === text) return;
-    commitComposerField(layoutNodeId, componentId, name, next);
+    commitComposerField(layoutNodeId, componentId, name, next, fieldRef);
   };
   const openRichEditor = (event) => {
     if (!isComposerEditMode() || !elRef.current) return;
@@ -4635,7 +4838,8 @@ function ComposerInlineField({
       layoutNodeId,
       componentId,
       name,
-      value: source
+      value: source,
+      fieldRef
     });
   };
   return /* @__PURE__ */ jsx(
@@ -4646,8 +4850,11 @@ function ComposerInlineField({
       "data-amplifyup-field": name,
       "data-amplifyup-field-type": rich ? "richtext" : "text",
       "data-amplifyup-node-id": layoutNodeId || void 0,
+      "data-amplifyup-ref-provider": fieldRef?.providerId || void 0,
+      "data-amplifyup-ref-entity": fieldRef?.entity || void 0,
+      "data-amplifyup-ref-id": fieldRef?.id || void 0,
       "data-amplifyup-empty-hint": showHint ? "true" : void 0,
-      contentEditable: !rich && !showRendered,
+      contentEditable: !rich,
       suppressContentEditableWarning: true,
       role: "textbox",
       tabIndex: 0,
@@ -4662,9 +4869,6 @@ function ComposerInlineField({
           openRichEditor(event);
           return;
         }
-        if (render) {
-          setEditing(true);
-        }
       },
       onFocus: () => {
         if (!isComposerEditMode()) return;
@@ -4678,7 +4882,6 @@ function ComposerInlineField({
           el.textContent = "";
           placeCaret(el, true);
         }
-        if (render) setEditing(true);
       },
       onBlur: rich ? void 0 : finishEdit,
       onKeyDown: (event) => {
@@ -4690,7 +4893,6 @@ function ComposerInlineField({
         if (event.key === "Escape") {
           event.preventDefault();
           if (elRef.current) elRef.current.textContent = idleDisplay || "";
-          setEditing(false);
           setFocused(false);
           event.currentTarget.blur();
         }
@@ -4704,8 +4906,7 @@ function ComposerInlineField({
         // Do not force `inline` — that overrides Tailwind `block` and parks
         // an empty-field hint on the same line as a sibling that has a value.
         opacity: showHint ? 0.5 : void 0
-      },
-      children: showRendered ? render(value) : null
+      }
     }
   );
 }
@@ -4716,7 +4917,8 @@ function ComposerInlineHtml({
   className,
   Tag = "div",
   layoutNodeId,
-  componentId
+  componentId,
+  fieldRef
 }) {
   const elRef = useRef(null);
   useEffect(() => {
@@ -4733,7 +4935,8 @@ function ComposerInlineHtml({
       layoutNodeId,
       componentId,
       name,
-      value: sourceValue
+      value: sourceValue,
+      fieldRef
     });
   };
   return React2.createElement(Tag, {
@@ -4742,6 +4945,9 @@ function ComposerInlineHtml({
     "data-amplifyup-field": name,
     "data-amplifyup-field-type": "richtext",
     "data-amplifyup-node-id": layoutNodeId || void 0,
+    "data-amplifyup-ref-provider": fieldRef?.providerId || void 0,
+    "data-amplifyup-ref-entity": fieldRef?.entity || void 0,
+    "data-amplifyup-ref-id": fieldRef?.id || void 0,
     dangerouslySetInnerHTML: { __html: html },
     onMouseDown: (event) => {
       event.stopPropagation();
@@ -4773,6 +4979,40 @@ function formatFieldValue(value) {
   }
   return "";
 }
+var FIELD_SCALAR_HINT = "Field expects a scalar field. Did you mean <Field field={post.title} />?";
+function warnNotScalarField(component, field, fieldValue) {
+  if (process.env.NODE_ENV === "production") return false;
+  if (isBrandedFields(field)) {
+    console.error(`[AmplifyUp SDK] ${component}: ${FIELD_SCALAR_HINT}`);
+    return true;
+  }
+  if (isFieldEnvelope(field) && Array.isArray(field.value)) {
+    console.error(`[AmplifyUp SDK] ${component}: ${FIELD_SCALAR_HINT}`);
+    return true;
+  }
+  if (Array.isArray(fieldValue)) {
+    console.error(`[AmplifyUp SDK] ${component}: ${FIELD_SCALAR_HINT}`);
+    return true;
+  }
+  return false;
+}
+var warnedReadOnlyFields = /* @__PURE__ */ new Set();
+function warnReadOnlyRowField(name) {
+  if (process.env.NODE_ENV === "production") return;
+  const key = name || "(unnamed)";
+  if (warnedReadOnlyFields.has(key)) return;
+  warnedReadOnlyFields.add(key);
+  console.warn(
+    `[AmplifyUp SDK] ${key} has no write target; rendered read-only.`
+  );
+}
+function canComposerBind(field, ref, editName) {
+  if (isReadOnlyRowField(field) || isFieldEnvelope(field) && field.readOnly) {
+    warnReadOnlyRowField(editName || (isFieldEnvelope(field) ? field.name : ""));
+    return false;
+  }
+  return true;
+}
 function warnProjectionProps(component, hasField, hasValue, name) {
   if (process.env.NODE_ENV === "production") return;
   if (!hasField && !hasValue && !name) {
@@ -4784,67 +5024,40 @@ function warnProjectionProps(component, hasField, hasValue, name) {
 function hasOwnProp(props, key) {
   return Object.prototype.hasOwnProperty.call(props, key);
 }
-function isLinkListItem(value) {
-  return !!value && typeof value === "object" && !Array.isArray(value);
-}
-function renderLinkList(items, className) {
-  const links = items.filter(isLinkListItem).filter((item) => {
-    const label = typeof item.label === "string" ? item.label.trim() : "";
-    const href = typeof item.href === "string" ? item.href.trim() : "";
-    return !!(label || href);
-  });
-  if (links.length === 0) return null;
-  return /* @__PURE__ */ jsx("span", { className, style: { display: "contents" }, children: links.map((item, index) => {
-    const label = typeof item.label === "string" && item.label.trim() ? item.label : typeof item.href === "string" ? item.href : "Link";
-    const href = typeof item.href === "string" && item.href.trim() ? item.href : "#";
-    const style = typeof item.style === "string" ? item.style.trim() : "";
-    return /* @__PURE__ */ jsx(
-      "a",
-      {
-        href,
-        target: item.openInNewTab ? "_blank" : void 0,
-        rel: item.openInNewTab ? "noreferrer" : void 0,
-        "data-amplifyup-action-style": style || void 0,
-        children: label
-      },
-      typeof item._key === "string" && item._key ? item._key : `${href}-${index}`
-    );
-  }) });
-}
 function Field(props) {
-  const { field, value, name, className, render } = props;
+  const { field, value, name, className } = props;
   const context = useContext(ComponentContext);
   const composerEdit = useComposerEditMode();
   const hasField = isFieldEnvelope(field);
   const hasValue = hasOwnProp(props, "value");
-  const { editName, fieldValue } = useBoundField(field, value, name, "Field");
+  const { editName, fieldValue, ref } = useBoundField(field, value, name, "Field");
   warnProjectionProps("Field", hasField, hasValue, name);
+  if (warnNotScalarField("Field", field, fieldValue)) {
+    return null;
+  }
   if (!hasField && !hasValue && !name) {
     return null;
   }
+  if (isBrandedFields(field) || Array.isArray(fieldValue)) {
+    return null;
+  }
   const empty = isComposerEmptyText(fieldValue);
-  if (composerEdit && editName && context && canInlineEdit(editName, fieldValue)) {
+  const bindComposer = composerEdit && editName && context && canInlineEdit(editName, fieldValue) && canComposerBind(field, ref, editName);
+  if (bindComposer) {
     return /* @__PURE__ */ jsx(
       ComposerInlineField,
       {
         name: editName,
         value: fieldValue,
         className,
-        render: empty ? void 0 : render,
         layoutNodeId: context.layoutNodeId,
         componentId: context.componentId,
+        fieldRef: ref,
         rich: looksLikeRichCanvasField(editName)
       }
     );
   }
   if (empty) return null;
-  if (render) {
-    return /* @__PURE__ */ jsx("span", { className, style: { display: "contents" }, children: render(fieldValue) });
-  }
-  if (Array.isArray(fieldValue)) {
-    const list = renderLinkList(fieldValue, className);
-    if (list) return list;
-  }
   const text = formatFieldValue(fieldValue);
   if (!text) return null;
   return /* @__PURE__ */ jsx("span", { className, children: text });
@@ -4872,7 +5085,7 @@ function RichText(props) {
   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 } = useBoundField(
+  const { editName, fieldValue, ref } = useBoundField(
     field,
     boundValue,
     name,
@@ -4882,7 +5095,10 @@ function RichText(props) {
     return null;
   }
   warnProjectionProps("RichText", hasField, hasValueProp, name);
-  const canEdit = !!context && canInlineEditRichText(editName, fieldValue);
+  if (warnNotScalarField("RichText", field, fieldValue)) {
+    return null;
+  }
+  const canEdit = !!context && canInlineEditRichText(editName, fieldValue) && canComposerBind(field, ref, editName);
   if (isComposerEmptyText(fieldValue)) {
     if (composerEdit && canEdit) {
       return /* @__PURE__ */ jsx(
@@ -4893,6 +5109,7 @@ function RichText(props) {
           className,
           layoutNodeId: context?.layoutNodeId,
           componentId: context?.componentId,
+          fieldRef: ref,
           rich: true
         }
       );
@@ -4924,7 +5141,8 @@ function RichText(props) {
         className,
         Tag,
         layoutNodeId: context?.layoutNodeId,
-        componentId: context?.componentId
+        componentId: context?.componentId,
+        fieldRef: ref
       }
     );
   }
@@ -4954,9 +5172,12 @@ function Image(props) {
   const context = useContext(ComponentContext);
   const hasField = isFieldEnvelope(field);
   const hasValue = hasOwnProp(props, "value");
-  const { editName, fieldValue } = useBoundField(field, value, name, "Image");
+  const { editName, fieldValue, ref } = useBoundField(field, value, name, "Image");
   const composerEdit = useComposerEditMode();
   warnProjectionProps("Image", hasField, hasValue, name);
+  if (warnNotScalarField("Image", field, fieldValue)) {
+    return null;
+  }
   if (!hasField && !hasValue && !name) {
     return null;
   }
@@ -4965,10 +5186,13 @@ function Image(props) {
   const alt = altProp ?? portable?.alt ?? "";
   const width = widthProp ?? portable?.width;
   const height = heightProp ?? portable?.height;
-  const fieldAttrs = composerEdit && editName ? {
+  const fieldAttrs = composerEdit && editName && canComposerBind(field, ref, editName) ? {
     "data-amplifyup-field": editName,
     "data-amplifyup-field-type": "image",
-    "data-amplifyup-node-id": context?.layoutNodeId || void 0
+    "data-amplifyup-node-id": context?.layoutNodeId || void 0,
+    "data-amplifyup-ref-provider": ref?.providerId || void 0,
+    "data-amplifyup-ref-entity": ref?.entity || void 0,
+    "data-amplifyup-ref-id": ref?.id || void 0
   } : null;
   if (composerEdit && !editName && (hasField || hasValue)) {
     console.warn(
@@ -5237,6 +5461,6 @@ function useAmplifyUp() {
   return context;
 }
 
-export { AmplifyPageContent, AmplifyRenderer, AmplifyUpProvider, ComponentContextProvider, ComposerProvider, Field, Image, MaybeComposerProvider, QueryContentError, RichText, SelectVariantsError, Slot, isBrandedFields, isComposerPreview, isFieldEnvelope, isPreviewRequest, isWorkingContentRequest, nextPageSpec, queryContent, searchSpec, selectVariants, toFieldEnvelopes, useAmplifyUp };
+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 };
 //# sourceMappingURL=react.mjs.map
 //# sourceMappingURL=react.mjs.map