@amplifyup/sdk 0.1.60 → 0.1.62

package/README.md

@@ -65,21 +65,26 @@ export default function Page() {
 
 ```tsx
 import { Field, Slot } from '@amplifyup/sdk/react';
+import type { Fields } from '@amplifyup/sdk/react';
 
-export function Hero({ heading }: { heading: string }) {
+export function Hero({ fields }: { fields: Fields<{ heading: string }> }) {
   return (
     <section>
       <h1>
-        <Field value={heading} fallback="Welcome" />
+        <Field field={fields.heading} />
       </h1>
     </section>
   );
 }
 ```
 
-Pass `value={…}` from your component props (preferred). Deprecated `name="…"`
-lookup still works alone — do not pass both. Connect CMS documents in Composer,
-then **Deploy** so Edge can serve the page.
+AmplifyUp passes `fields` on the component props. Use
+`<Field field={fields.heading} />` to show and edit, or
+`{fields.heading.value}` to render the text. You do not pass `name` unless
+you computed the value yourself. An empty field renders nothing on the live
+site; in Composer it stays clickable. Default copy belongs in your component
+(`{fields.heading.value ?? 'Welcome'}`). Connect content in Composer, then
+**Deploy** so the live site can serve the page.
 
 ## Content sources
 
@@ -138,7 +143,7 @@ const hits = await queryContent({
 });
 ```
 
-Only entities published with that route can be queried, and visitors only see published content. Also available from `@amplifyup/sdk/server`. See the [runtime queries guide](../../docs/sdk-site-setup.md#8-runtime-content-queries).
+Only entities published with that route can be queried, and visitors only see published content. Results are plain rows, not `fields` objects — they are not canvas-editable. Also available from `@amplifyup/sdk/server`. See the [runtime queries guide](../../docs/sdk-site-setup.md#8-runtime-content-queries).
 
 ## Track events
 

package/dist/AmplifyRenderer-BQ8-H2H4.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { P as PageConfig } from './types-Db_eLrfU.js';
+
+/**
+ * Field envelopes — same shape in published, draft, and Composer edit.
+ * `{ value, name }` where `name` is the full dot path (`hero.image`).
+ * Produced once at the Edge resolve boundary (`fetchEdgeResolve`).
+ */
+declare const FIELDS_BRAND: unique symbol;
+type ImageValue = {
+    url: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+};
+type Field<T> = {
+    value: T;
+    name: string;
+};
+type IsPlainObject<T> = T extends object ? T extends readonly unknown[] ? false : T extends ImageValue ? false : true : false;
+type Fields<T> = {
+    readonly [FIELDS_BRAND]: true;
+} & {
+    [K in keyof T]-?: NonNullable<T[K]> extends ImageValue ? Field<T[K] | null> : IsPlainObject<NonNullable<T[K]>> extends true ? Fields<NonNullable<T[K]>> : Field<T[K]>;
+};
+/** Props passed into site components. Raw CMS bags are not assignable. */
+type LayoutComponentProps<T extends Record<string, unknown> = Record<string, unknown>> = {
+    fields: Fields<T>;
+};
+declare function isBrandedFields(value: unknown): value is Fields<Record<string, unknown>>;
+declare function isFieldEnvelope(value: unknown): value is Field<unknown>;
+/**
+ * Wrap a props bag as envelopes. Already-enveloped bags are returned as-is.
+ * Nested plain objects become nested bags; portable images stay a leaf.
+ */
+declare function toFieldEnvelopes<T extends Record<string, unknown>>(source: T | null | undefined, prefix?: string): Fields<T>;
+
+interface AmplifyRendererProps {
+    /**
+     * Component renderer function that maps componentId to React component
+     * This is site-specific and must be provided by the developer
+     */
+    renderComponent: (componentId: string, props: LayoutComponentProps, slots?: Record<string, ReactNode>, context?: {
+        layoutNodeId: string;
+    }) => ReactNode;
+    /**
+     * Optional page config for server-side rendering (SSR/SSG)
+     * If provided, the component will use this instead of fetching client-side
+     */
+    pageConfig?: PageConfig;
+    /**
+     * Optional loading component
+     */
+    loadingComponent?: ReactNode;
+    /**
+     * Optional error component
+     */
+    errorComponent?: (error: string) => ReactNode;
+    /**
+     * Optional empty state component (when no content is configured)
+     */
+    emptyComponent?: ReactNode;
+    /**
+     * Force Composer page-slot wrapper (avoids SSR miss when window isn't available yet).
+     * When true, root components stay under [data-slot-source="page"] so hierarchy can climb to Page.
+     */
+    composerPreview?: boolean;
+}
+declare function AmplifyRendererInner({ renderComponent, pageConfig: serverPageConfig, loadingComponent, errorComponent, emptyComponent, composerPreview, }: AmplifyRendererProps): react_jsx_runtime.JSX.Element | null;
+declare const AmplifyRenderer: React.MemoExoticComponent<typeof AmplifyRendererInner>;
+
+export { AmplifyRenderer as A, type Field as F, type ImageValue as I, type LayoutComponentProps as L, isBrandedFields as a, type Fields as b, isFieldEnvelope as i, toFieldEnvelopes as t };

package/dist/AmplifyRenderer-W7eqltSj.d.mts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { P as PageConfig } from './types-Db_eLrfU.mjs';
+
+/**
+ * Field envelopes — same shape in published, draft, and Composer edit.
+ * `{ value, name }` where `name` is the full dot path (`hero.image`).
+ * Produced once at the Edge resolve boundary (`fetchEdgeResolve`).
+ */
+declare const FIELDS_BRAND: unique symbol;
+type ImageValue = {
+    url: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+};
+type Field<T> = {
+    value: T;
+    name: string;
+};
+type IsPlainObject<T> = T extends object ? T extends readonly unknown[] ? false : T extends ImageValue ? false : true : false;
+type Fields<T> = {
+    readonly [FIELDS_BRAND]: true;
+} & {
+    [K in keyof T]-?: NonNullable<T[K]> extends ImageValue ? Field<T[K] | null> : IsPlainObject<NonNullable<T[K]>> extends true ? Fields<NonNullable<T[K]>> : Field<T[K]>;
+};
+/** Props passed into site components. Raw CMS bags are not assignable. */
+type LayoutComponentProps<T extends Record<string, unknown> = Record<string, unknown>> = {
+    fields: Fields<T>;
+};
+declare function isBrandedFields(value: unknown): value is Fields<Record<string, unknown>>;
+declare function isFieldEnvelope(value: unknown): value is Field<unknown>;
+/**
+ * Wrap a props bag as envelopes. Already-enveloped bags are returned as-is.
+ * Nested plain objects become nested bags; portable images stay a leaf.
+ */
+declare function toFieldEnvelopes<T extends Record<string, unknown>>(source: T | null | undefined, prefix?: string): Fields<T>;
+
+interface AmplifyRendererProps {
+    /**
+     * Component renderer function that maps componentId to React component
+     * This is site-specific and must be provided by the developer
+     */
+    renderComponent: (componentId: string, props: LayoutComponentProps, slots?: Record<string, ReactNode>, context?: {
+        layoutNodeId: string;
+    }) => ReactNode;
+    /**
+     * Optional page config for server-side rendering (SSR/SSG)
+     * If provided, the component will use this instead of fetching client-side
+     */
+    pageConfig?: PageConfig;
+    /**
+     * Optional loading component
+     */
+    loadingComponent?: ReactNode;
+    /**
+     * Optional error component
+     */
+    errorComponent?: (error: string) => ReactNode;
+    /**
+     * Optional empty state component (when no content is configured)
+     */
+    emptyComponent?: ReactNode;
+    /**
+     * Force Composer page-slot wrapper (avoids SSR miss when window isn't available yet).
+     * When true, root components stay under [data-slot-source="page"] so hierarchy can climb to Page.
+     */
+    composerPreview?: boolean;
+}
+declare function AmplifyRendererInner({ renderComponent, pageConfig: serverPageConfig, loadingComponent, errorComponent, emptyComponent, composerPreview, }: AmplifyRendererProps): react_jsx_runtime.JSX.Element | null;
+declare const AmplifyRenderer: React.MemoExoticComponent<typeof AmplifyRendererInner>;
+
+export { AmplifyRenderer as A, type Field as F, type ImageValue as I, type LayoutComponentProps as L, isBrandedFields as a, type Fields as b, isFieldEnvelope as i, toFieldEnvelopes as t };

package/dist/AmplifyRenderer.d.mts

@@ -1,40 +1,4 @@
-import * as React from 'react';
-import { ReactNode } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as PageConfig } from './types-Db_eLrfU.mjs';
-
-interface AmplifyRendererProps {
-    /**
-     * Component renderer function that maps componentId to React component
-     * This is site-specific and must be provided by the developer
-     */
-    renderComponent: (componentId: string, props: Record<string, any>, slots?: Record<string, ReactNode>, context?: {
-        layoutNodeId: string;
-    }) => ReactNode;
-    /**
-     * Optional page config for server-side rendering (SSR/SSG)
-     * If provided, the component will use this instead of fetching client-side
-     */
-    pageConfig?: PageConfig;
-    /**
-     * Optional loading component
-     */
-    loadingComponent?: ReactNode;
-    /**
-     * Optional error component
-     */
-    errorComponent?: (error: string) => ReactNode;
-    /**
-     * Optional empty state component (when no content is configured)
-     */
-    emptyComponent?: ReactNode;
-    /**
-     * Force Composer page-slot wrapper (avoids SSR miss when window isn't available yet).
-     * When true, root components stay under [data-slot-source="page"] so hierarchy can climb to Page.
-     */
-    composerPreview?: boolean;
-}
-declare function AmplifyRendererInner({ renderComponent, pageConfig: serverPageConfig, loadingComponent, errorComponent, emptyComponent, composerPreview, }: AmplifyRendererProps): react_jsx_runtime.JSX.Element | null;
-declare const AmplifyRenderer: React.MemoExoticComponent<typeof AmplifyRendererInner>;
-
-export { AmplifyRenderer };
+import 'react';
+import 'react/jsx-runtime';
+export { A as AmplifyRenderer } from './AmplifyRenderer-W7eqltSj.mjs';
+import './types-Db_eLrfU.mjs';

package/dist/AmplifyRenderer.d.ts

@@ -1,40 +1,4 @@
-import * as React from 'react';
-import { ReactNode } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as PageConfig } from './types-Db_eLrfU.js';
-
-interface AmplifyRendererProps {
-    /**
-     * Component renderer function that maps componentId to React component
-     * This is site-specific and must be provided by the developer
-     */
-    renderComponent: (componentId: string, props: Record<string, any>, slots?: Record<string, ReactNode>, context?: {
-        layoutNodeId: string;
-    }) => ReactNode;
-    /**
-     * Optional page config for server-side rendering (SSR/SSG)
-     * If provided, the component will use this instead of fetching client-side
-     */
-    pageConfig?: PageConfig;
-    /**
-     * Optional loading component
-     */
-    loadingComponent?: ReactNode;
-    /**
-     * Optional error component
-     */
-    errorComponent?: (error: string) => ReactNode;
-    /**
-     * Optional empty state component (when no content is configured)
-     */
-    emptyComponent?: ReactNode;
-    /**
-     * Force Composer page-slot wrapper (avoids SSR miss when window isn't available yet).
-     * When true, root components stay under [data-slot-source="page"] so hierarchy can climb to Page.
-     */
-    composerPreview?: boolean;
-}
-declare function AmplifyRendererInner({ renderComponent, pageConfig: serverPageConfig, loadingComponent, errorComponent, emptyComponent, composerPreview, }: AmplifyRendererProps): react_jsx_runtime.JSX.Element | null;
-declare const AmplifyRenderer: React.MemoExoticComponent<typeof AmplifyRendererInner>;
-
-export { AmplifyRenderer };
+import 'react';
+import 'react/jsx-runtime';
+export { A as AmplifyRenderer } from './AmplifyRenderer-BQ8-H2H4.js';
+import './types-Db_eLrfU.js';

package/dist/AmplifyRenderer.js

@@ -407,6 +407,106 @@ function isComposerPreview() {
   return false;
 }
 
+// src/field-envelope.ts
+var FIELDS_BRAND = Symbol("amplifyup.fields");
+function isBrandedFields(value) {
+  return !!value && typeof value === "object" && FIELDS_BRAND in value;
+}
+function brandFields(bag) {
+  if (isBrandedFields(bag)) return bag;
+  Object.defineProperty(bag, FIELDS_BRAND, {
+    value: true,
+    enumerable: false,
+    configurable: false
+  });
+  return bag;
+}
+function isFieldEnvelope(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const rec = value;
+  return typeof rec.name === "string" && "value" in rec && !("url" in rec);
+}
+function isPortableImageShape(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  return "url" in value;
+}
+function joinPath(prefix, key) {
+  return prefix ? `${prefix}.${key}` : key;
+}
+function emptyValue(raw) {
+  if (raw === void 0) return null;
+  return raw;
+}
+function toFieldEnvelopes(source, prefix = "") {
+  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)) {
+    const path = joinPath(prefix, key);
+    if (isFieldEnvelope(raw)) {
+      out[key] = { value: raw.value ?? null, name: raw.name || path };
+      continue;
+    }
+    if (raw && typeof raw === "object" && !Array.isArray(raw) && !isPortableImageShape(raw) && !raw.$$typeof) {
+      out[key] = toFieldEnvelopes(raw, path);
+      continue;
+    }
+    out[key] = { value: emptyValue(raw), name: path };
+  }
+  return brandFields(out);
+}
+function attachFieldEnvelopes(props) {
+  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) };
+}
+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);
+    for (const slot of rec.slots || []) {
+      walkLayoutNodes(slot.children);
+    }
+  }
+}
+function envelopePageConfig(page) {
+  if (!page || typeof page !== "object") return page ?? null;
+  const tree = page.layoutTree;
+  if (Array.isArray(tree)) walkLayoutNodes(tree);
+  return page;
+}
+function collectFieldPatches(props) {
+  const out = [];
+  const walk = (obj, prefix) => {
+    for (const [key, raw] of Object.entries(obj)) {
+      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 });
+        continue;
+      }
+      if (raw && typeof raw === "object" && !Array.isArray(raw) && !isPortableImageShape(raw) && !raw.$$typeof) {
+        walk(raw, path);
+        continue;
+      }
+      out.push({ name: path, value: emptyValue(raw) });
+    }
+  };
+  if (props && typeof props === "object" && !Array.isArray(props)) {
+    walk(props, "");
+  }
+  return out;
+}
+
 // src/page-context.ts
 var defaultLog = {
   warn: (...args) => {
@@ -555,7 +655,70 @@ function mergeEventContext(properties, attached) {
     ...attached.pageRoute ? { pageRoute: attached.pageRoute } : {}
   };
 }
+var PAGE_RESOURCE_MARKER = "__amplifyupPageResource";
+function isPageResourceSentinel(value) {
+  return !!value && typeof value === "object" && !Array.isArray(value) && typeof value[PAGE_RESOURCE_MARKER] === "string";
+}
+function getByDotPath(source, path) {
+  if (!path) return source;
+  const parts = path.split(".").filter(Boolean);
+  let cur = source;
+  for (const part of parts) {
+    if (cur == null || typeof cur !== "object" || Array.isArray(cur)) {
+      return void 0;
+    }
+    cur = cur[part];
+  }
+  return cur;
+}
+function hydratePageResourceValue(value, fields) {
+  if (!isPageResourceSentinel(value)) return value;
+  if (!fields) return null;
+  if (value.path) return getByDotPath(fields, value.path) ?? null;
+  return fields;
+}
+function hydrateFieldsBag(bag, fields) {
+  const out = {};
+  for (const [key, val] of Object.entries(bag)) {
+    if (val && typeof val === "object" && !Array.isArray(val) && typeof val.name === "string" && "value" in val && !("url" in val)) {
+      const env = val;
+      out[key] = {
+        name: env.name,
+        value: isPageResourceSentinel(env.value) ? hydratePageResourceValue(env.value, fields) : env.value
+      };
+      continue;
+    }
+    if (val && typeof val === "object" && !Array.isArray(val) && !("url" in val)) {
+      out[key] = hydrateFieldsBag(val, fields);
+      continue;
+    }
+    out[key] = isPageResourceSentinel(val) ? hydratePageResourceValue(val, fields) : val;
+  }
+  return out;
+}
+function hydratePageResourceProps(props, fields) {
+  const source = props && typeof props === "object" ? props : {};
+  const out = { ...source };
+  if (out.fields && typeof out.fields === "object" && !Array.isArray(out.fields)) {
+    const next = hydrateFieldsBag(out.fields, fields);
+    out.fields = isBrandedFields(out.fields) ? brandFields(next) : next;
+  }
+  for (const [key, val] of Object.entries(out)) {
+    if (key === "fields") continue;
+    if (isPageResourceSentinel(val)) {
+      out[key] = hydratePageResourceValue(val, fields);
+    }
+  }
+  return out;
+}
+
+// src/page-resource-runtime.ts
+var pageResourceFields = null;
 function setPageResourceFields(fields) {
+  pageResourceFields = fields && typeof fields === "object" ? fields : null;
+}
+function getPageResourceFields() {
+  return pageResourceFields;
 }
 
 // src/debug.ts
@@ -1238,6 +1401,7 @@ var AmplifyUpSDK = class {
         this.resolvedPageData,
         this.resolvedPageRoute
       );
+      setPageResourceFields(null);
       return;
     }
     this.attachedPageContext = applyPageContext(this.pendingPageContext, {
@@ -1666,7 +1830,7 @@ Available Console Commands:
         this.refreshEventTracking();
       }, 800);
     }
-    return pageConfig;
+    return envelopePageConfig(pageConfig);
   }
   /**
    * Set up view-level event tracking based on configuration
@@ -3039,31 +3203,66 @@ function getSDK(adapter) {
 var trackContentView = (contentId, contentType, properties) => getSDK().trackContentView(contentId, contentType, properties);
 var refreshEventTracking = () => getSDK().refreshEventTracking();
 getSDK();
-react.createContext(null);
-function useLiveComposerProps(layoutNodeId, props) {
-  const [patch, setPatch] = react.useState(null);
-  react.useEffect(() => {
-    setPatch(null);
-    const matchesNode = (nodeId) => {
-      if (nodeId && layoutNodeId && String(nodeId) !== String(layoutNodeId)) {
-        return false;
-      }
-      return true;
+
+// src/composer-store.ts
+var ComposerFieldStore = class {
+  constructor() {
+    this.values = /* @__PURE__ */ new Map();
+    this.listeners = /* @__PURE__ */ new Map();
+  }
+  get(name) {
+    return this.values.has(name) ? this.values.get(name) : void 0;
+  }
+  set(name, value) {
+    if (!name) return;
+    this.values.set(name, value);
+    const set = this.listeners.get(name);
+    if (!set) return;
+    for (const fn of set) fn();
+  }
+  subscribe(name, fn) {
+    if (!name) return () => {
     };
+    let set = this.listeners.get(name);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      this.listeners.set(name, set);
+    }
+    set.add(fn);
+    return () => {
+      set.delete(fn);
+      if (set.size === 0) this.listeners.delete(name);
+    };
+  }
+};
+var ComposerStoreContext = react.createContext(null);
+function matchesNode(eventNodeId, layoutNodeId) {
+  if (eventNodeId && layoutNodeId && String(eventNodeId) !== String(layoutNodeId)) {
+    return false;
+  }
+  return true;
+}
+function ComposerProvider({
+  layoutNodeId,
+  children
+}) {
+  const storeRef = react.useRef(null);
+  if (!storeRef.current) storeRef.current = new ComposerFieldStore();
+  const store = storeRef.current;
+  react.useEffect(() => {
     const applyField = (fieldName, value, nodeId) => {
       if (!fieldName || typeof fieldName !== "string") return;
-      if (!matchesNode(nodeId)) return;
-      setPatch((prev) => ({ ...prev || {}, [fieldName]: value }));
+      if (!matchesNode(nodeId, layoutNodeId)) return;
+      store.set(fieldName, value);
     };
     const applyProps = (nextProps, nodeId) => {
       if (!nextProps || typeof nextProps !== "object" || Array.isArray(nextProps)) {
         return;
       }
-      if (!matchesNode(nodeId)) return;
-      setPatch((prev) => ({
-        ...prev || {},
-        ...nextProps
-      }));
+      if (!matchesNode(nodeId, layoutNodeId)) return;
+      for (const patch of collectFieldPatches(nextProps)) {
+        store.set(patch.name, patch.value);
+      }
     };
     const onPatch = (event) => {
       const detail = event.detail || {};
@@ -3089,9 +3288,19 @@ function useLiveComposerProps(layoutNodeId, props) {
       window.removeEventListener("amplifyup:props-patch", onPropsPatch);
       window.removeEventListener("message", onMessage);
     };
-  }, [layoutNodeId]);
-  return patch ? { ...props, ...patch } : props;
+  }, [layoutNodeId, store]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ComposerStoreContext.Provider, { value: store, children });
 }
+function MaybeComposerProvider({
+  enabled,
+  layoutNodeId,
+  children
+}) {
+  const content = react.useMemo(() => children, [children]);
+  if (!enabled) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: content });
+  return /* @__PURE__ */ jsxRuntime.jsx(ComposerProvider, { layoutNodeId, children });
+}
+react.createContext(null);
 var usePathname = null;
 if (typeof window !== "undefined") {
   try {
@@ -3111,9 +3320,19 @@ function useAmplifyUp() {
   return context;
 }
 function nodeRenderProps(node) {
+  const settings = node.settings || {};
+  const hydrated = hydratePageResourceProps(
+    node.props || {},
+    getPageResourceFields()
+  );
+  const fields = hydrated.fields;
+  const branded = isBrandedFields(fields) ? fields : brandFields(
+    fields && typeof fields === "object" ? fields : {}
+  );
   return {
-    ...node.settings || {},
-    ...node.props || {}
+    ...settings,
+    ...hydrated,
+    fields: branded
   };
 }
 var ComponentRenderBoundary = class extends react.Component {
@@ -3163,17 +3382,24 @@ var ComponentRenderBoundary = class extends react.Component {
     return this.props.children;
   }
 };
-function LiveNodeRender({
+function NodeWithFields({
   nodeId,
   componentId,
   props,
   slots,
-  renderComponent
+  renderComponent,
+  composerPreview
 }) {
-  const liveProps = useLiveComposerProps(nodeId, props);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderComponent(componentId, liveProps, slots, {
-    layoutNodeId: nodeId
-  }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MaybeComposerProvider,
+    {
+      enabled: !!(composerPreview || isComposerPreview()),
+      layoutNodeId: nodeId,
+      children: renderComponent(componentId, props, slots, {
+        layoutNodeId: nodeId
+      })
+    }
+  );
 }
 function AmplifyRendererInner({
   renderComponent,
@@ -3529,13 +3755,14 @@ function AmplifyRendererInner({
             componentId: node.componentId,
             nodeId: node.id,
             children: /* @__PURE__ */ jsxRuntime.jsx(
-              LiveNodeRender,
+              NodeWithFields,
               {
                 nodeId: node.id,
                 componentId: node.componentId,
                 props: nodeRenderProps(node),
                 slots: slotsToPass,
-                renderComponent
+                renderComponent,
+                composerPreview
               }
             )
           }