@amplifyup/sdk 0.1.62 → 0.1.63

package/README.md

@@ -61,10 +61,10 @@ export default function Page() {
 }
 ```
 
-### 3. Components use Field / Slot
+### 3. Write a component
 
 ```tsx
-import { Field, Slot } from '@amplifyup/sdk/react';
+import { Field } from '@amplifyup/sdk/react';
 import type { Fields } from '@amplifyup/sdk/react';
 
 export function Hero({ fields }: { fields: Fields<{ heading: string }> }) {
@@ -78,13 +78,400 @@ export function Hero({ fields }: { fields: Fields<{ heading: string }> }) {
 }
 ```
 
-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.
+Connect content in Composer, then **Deploy** so the live site can serve the page.
+
+That's the whole loop. The rest of this section is the detail.
+
+---
+
+## Working with `fields`
+
+Every component receives a `fields` prop. It is not raw CMS data — every entry is a **field envelope**:
+
+```ts
+fields.heading
+// → { value: 'Welcome to AmplifyUp', name: 'heading' }
+
+fields.hero.image
+// → { value: { url: '…', alt: '…' }, name: 'hero.image' }
+
+fields.subheading   // empty on a new page
+// → { value: null, name: 'subheading' }
+```
+
+`name` is the field's dot path. It is what lets `<Field>` know which field it is bound to without you telling it. `value` is the content, typed from your schema.
+
+**The shape is identical on the live site, in a draft, and in Composer.** There is no mode where you get a bare string instead of an envelope, and no mode where an empty field is `undefined` instead of `{ value: null, name }`.
+
+### Two ways to read a field
+
+```tsx
+// Editable — use an SDK component
+<Field field={fields.heading} />
+
+// Display only — read .value
+<title>{fields.heading.value}</title>
+```
+
+Use the component when the field should be clickable in Composer. Use `.value` when it shouldn't — meta tags, `aria-label`, an `href`, a condition, anything that isn't visible text.
+
+```tsx
+export function Card({ fields }: { fields: Fields<{ title: string; link: string; image: ImageValue }> }) {
+  return (
+    <a href={fields.link.value ?? '#'} aria-label={fields.title.value ?? undefined}>
+      <Image field={fields.image} />
+      <h3><Field field={fields.title} /></h3>
+    </a>
+  );
+}
+```
+
+### SDK field components
+
+| Component | Field type | Renders |
+| --- | --- | --- |
+| `<Field>` | `string`, `number` | text node — no wrapper element |
+| `<RichText>` | markdown / rich text | rendered HTML |
+| `<Image>` | `ImageValue` | `<img>` |
+
+All three take a `field` prop and read `name` from it. Pass any extra props (`className`, `loading`, etc.) and they go on the rendered element.
+
+```tsx
+<Field field={fields.eyebrow} className="text-xs uppercase" />
+<RichText field={fields.body} className="prose" />
+<Image field={fields.cover} className="rounded-lg" loading="lazy" />
+```
+
+`<Field>` is scalar-only. Passing a list is a type error:
+
+```tsx
+// ✗ Field<string[]> is not assignable to Field<string | number>
+<Field field={fields.tags} />
+```
+
+### Empty fields
+
+An empty field renders **nothing** on the live site and a clickable placeholder in Composer. The SDK never invents default copy.
+
+```tsx
+// A new page, `subheading` not yet filled in:
+
+<Field field={fields.subheading} />
+// live:      (nothing)
+// Composer:  clickable empty placeholder
+```
+
+If you want a default, it's yours to write, and it reads from `.value`:
+
+```tsx
+// ✓ your default, in your code
+<p>{fields.subheading.value ?? 'Built for teams that ship.'}</p>
+
+// ✓ hide the whole component when the key field is empty
+export function Banner({ fields }: { fields: Fields<{ message: string }> }) {
+  if (!fields.message.value) return null;
+  return <div className="banner"><Field field={fields.message} /></div>;
+}
+```
+
+Why no `fallback` prop: a fallback turns "this field was never populated" into "this field says *Welcome*". Nobody notices until a customer does. Empty should look empty.
+
+### Wrapper elements
+
+`<Field>` renders a text node, not an element, so you supply the tag:
+
+```tsx
+// ✓
+<h1><Field field={fields.heading} /></h1>
+<p className="lead"><Field field={fields.intro} /></p>
+
+// ✗ — Field has no `as` prop; put the element around it
+<Field as="h1" field={fields.heading} />
+```
+
+If the wrapper should disappear when the field is empty, check `.value`:
+
+```tsx
+{fields.intro.value ? (
+  <p className="lead"><Field field={fields.intro} /></p>
+) : null}
+```
+
+### Computed values
+
+Occasionally what you display isn't a field — it's derived from one. Then you pass `value` and must also pass `name` so Composer knows which field a click edits:
+
+```tsx
+// Show a formatted price but edit the raw number
+<Field
+  value={formatPrice(fields.price.value)}
+  name={fields.price.name}
+/>
+```
+
+`name` is only accepted alongside `value`. This is the one place you write it.
+
+```tsx
+// ✗ — redundant, and a type error
+<Field field={fields.price} name="price" />
+
+// ✗ — value without name has nothing to bind to
+<Field value={formatPrice(fields.price.value)} />
+```
+
+### Rendering differently in Composer
+
+Most components render the same everywhere. Sometimes the live markup can't host an editable field — the text is a CSS background, an SVG `<title>`, a `<meta>` tag, an attribute, or it's behind interaction (a closed accordion, an auto-playing carousel). In Composer you still need something the author can click.
+
+`useInComposer()` tells you which mode you're in:
+
+```tsx
+import { Field, Image, useInComposer } from '@amplifyup/sdk/react';
+
+export function HeroBackground({ fields }: { fields: Fields<{ heading: string; image: ImageValue }> }) {
+  const inComposer = useInComposer();
+
+  return (
+    <section
+      className="hero"
+      style={{ backgroundImage: `url(${fields.image.value?.url ?? ''})` }}
+    >
+      {/* Live: image is a CSS background. Composer: also render it so it's clickable. */}
+      {inComposer ? <Image field={fields.image} className="hidden" /> : null}
+      <h1><Field field={fields.heading} /></h1>
+    </section>
+  );
+}
+```
+
+Other common cases:
+
+```tsx
+// Attribute on the live site, editable in Composer
+const inComposer = useInComposer();
+return (
+  <>
+    <button aria-label={fields.label.value ?? undefined}>
+      <Icon />
+      {inComposer ? <Field field={fields.label} /> : null}
+    </button>
+  </>
+);
+```
+
+```tsx
+// Component that hides itself when empty on live, but stays visible for authors
+export function Announcement({ fields }: { fields: Fields<{ message: string }> }) {
+  const inComposer = useInComposer();
+  if (!fields.message.value && !inComposer) return null;
+  return <div className="announcement"><Field field={fields.message} /></div>;
+}
+```
+
+```tsx
+// Interaction that fights the canvas — turn it off in Composer
+export function Carousel({ fields }) {
+  const inComposer = useInComposer();
+  return (
+    <Collection field={fields.slides}>
+      {(slide) => <Slide slide={slide} autoplay={!inComposer} />}
+    </Collection>
+  );
+}
+```
+
+Rules of thumb:
+
+- The **field component is the source of truth in Composer.** If a field is visible to authors, it must be rendered through `<Field>` / `<RichText>` / `<Image>` / `<Collection>` in Composer mode, even if the live site reads `.value`.
+- **Don't fork the whole component.** Branch the one element that differs, not the entire return. Two divergent trees drift and the preview stops matching production.
+- **Empty gating uses `inComposer`.** `if (!x.value) return null` is correct for live and wrong for authors — they can't click what isn't rendered. Add `&& !inComposer`.
+- **Don't use it to hide editable text on live.** If the text is visible on the live site, render it with the field component in both modes. `useInComposer` is for content the live markup genuinely can't expose as a field.
+
+```tsx
+// ✗ — heading is visible on live; no reason to fork
+{inComposer ? <Field field={fields.heading} /> : fields.heading.value}
+
+// ✓
+<Field field={fields.heading} />
+```
+
+---
+
+## Lists
+
+There are two kinds of list field and they are handled differently. Check your schema to know which you have.
+
+| Shape | Schema | What it holds | In your component | Edited in Composer via |
+| --- | --- | --- | --- | --- |
+| **Reference list** | `array` + `entity` `of` | Linked entries — a query or a curated set of documents | Map `fields.posts.value` — plain rows | Props panel (pick, reorder) |
+| **Repeater** | `array` + `of: 'json'` | Inline-authored items (slides, cards, FAQs) | `<Collection>` + `<Field>` on each item | Canvas (add, remove, reorder, click to edit) |
+
+Scalar lists (tags, multi-select) are plain `.value` arrays edited in the props panel — same as reference lists.
+
+### Reference lists
+
+Rows are plain objects, not envelopes. Read them directly:
+
+```tsx
+export function LatestPosts({ fields }: { fields: Fields<{ heading: string; posts: Post[] }> }) {
+  const posts = fields.posts.value ?? [];
+  return (
+    <section>
+      <h2><Field field={fields.heading} /></h2>
+      <ul>
+        {posts.map((post) => (
+          <li key={post.id}>
+            <img src={post.mainImage?.url} alt={post.mainImage?.alt ?? ''} />
+            <a href={`/blog/${post.slug}`}>{post.title}</a>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+```
+
+```tsx
+// ✗ — reference rows aren't editable inline; there's nothing for Field to bind to
+{posts.map((post) => <Field field={post.title} />)}
+
+// ✗ — Collection is for repeaters
+<Collection field={fields.posts}>…</Collection>
+```
+
+The list itself (which posts, in what order) is edited in the props panel. When the component is selected on the canvas, the component outline is the affordance — you don't need to add one.
+
+### Repeaters
+
+Items **are** enveloped. `fields.slides.value[0].title` is `{ value, name: 'slides.0.title' }`. Render through `<Collection>`:
+
+```tsx
+import { Collection, Field, Image } from '@amplifyup/sdk/react';
+
+export function Slideshow({
+  fields,
+}: {
+  fields: Fields<{ slides: Array<{ title: string; caption: string; image: ImageValue }> }>;
+}) {
+  return (
+    <Collection field={fields.slides}>
+      {(slide, i) => (
+        <figure className="slide" data-index={i}>
+          <Image field={slide.image} />
+          <figcaption>
+            <h2><Field field={slide.title} /></h2>
+            <Field field={slide.caption} className="text-sm" />
+          </figcaption>
+        </figure>
+      )}
+    </Collection>
+  );
+}
+```
+
+On the live site `Collection` renders your children and nothing else — no wrapper element. In Composer it adds an empty-state placeholder and add / remove / reorder controls.
+
+Need a wrapping `<ul>`? Put it outside:
+
+```tsx
+<ul className="faq">
+  <Collection field={fields.questions}>
+    {(q) => (
+      <li>
+        <h3><Field field={q.question} /></h3>
+        <RichText field={q.answer} />
+      </li>
+    )}
+  </Collection>
+</ul>
+```
+
+```tsx
+// ✗ — mapping .value skips the canvas chrome; items won't be addable in Composer
+{fields.slides.value.map((slide) => <Field field={slide.title} />)}
+```
+
+### Mixing a list with a runtime query
+
+Search or "load more" results come from `queryContent`, which returns plain rows. Your reference list is also plain rows, so they share a renderer:
+
+```tsx
+const posts = hits ?? fields.posts.value ?? [];
+return <PostGrid posts={posts} />;
+```
+
+No SDK component is involved on either path.
+
+---
+
+## Slots
+
+A slot is a region where authors drop other components. Render it with `<Slot>`:
+
+```tsx
+import { Field, Slot } from '@amplifyup/sdk/react';
+
+export function TwoColumn({ fields, slots }) {
+  return (
+    <div className="grid grid-cols-2">
+      <div><Slot name="left" slots={slots} /></div>
+      <div><Slot name="right" slots={slots} /></div>
+    </div>
+  );
+}
+```
+
+Slots hold components, not fields — nothing in a slot is read through `fields`.
+
+---
+
+## Do / Don't
+
+| Do | Don't |
+| --- | --- |
+| `<Field field={fields.heading} />` | `<Field field={fields.heading} name="heading" />` |
+| `{fields.heading.value}` for non-visible uses | `{fields.heading}` as a JSX child (it's an object) |
+| `{fields.x.value ?? 'default'}` in your code | expect the SDK to supply default copy |
+| `if (!fields.x.value) return null` to hide a component | wrap `Field` in conditional logic that hides the field in Composer |
+| `<h1><Field … /></h1>` | look for an `as` / `wrapper` prop |
+| `fields.posts.value.map(…)` for reference lists | `<Field>` or `<Collection>` on reference rows |
+| `<Collection>` for repeaters | `fields.slides.value.map(…)` for repeaters |
+| `value` + `name` together for computed output | `value` alone, or `name` alone |
+| `<Image field={fields.cover} />` | `<img src={fields.cover.value.url} />` when it should be editable |
+| `queryContent` rows as plain data | treat query rows as `fields` |
+| `useInComposer()` to expose a field the live markup can't (CSS background, attribute, hidden panel) | fork the whole component's return on `inComposer` |
+| `if (!x.value && !inComposer) return null` | `if (!x.value) return null` — authors can't click what isn't rendered |
+
+---
+
+## Types
+
+```ts
+import type { Field, Fields, ImageValue } from '@amplifyup/sdk/react';
+
+type Field<T> = { value: T | null; name: string };
+
+type Fields<T> = { [K in keyof T]: /* Field<T[K]>, recursing into objects and repeater arrays */ };
+```
+
+Declare the schema shape once on the component and let inference do the rest:
+
+```ts
+type HeroFields = Fields<{
+  eyebrow: string;
+  heading: string;
+  body: string;          // markdown → use <RichText>
+  image: ImageValue;     // → use <Image>
+  ctas: Array<{ label: string; href: string }>;  // repeater
+  related: Post[];       // reference list — rows are plain Post
+}>;
+
+export function Hero({ fields }: { fields: HeroFields }) { … }
+```
+
+`fields.heading.value` is `string | null`. `fields.image.value` is `ImageValue | null`. `fields.ctas.value[0].label` is `Field<string>`. `fields.related.value[0]` is `Post`.
+
+---
 
 ## Content sources
 
@@ -95,6 +482,8 @@ site; in Composer it stays clickable. Default copy belongs in your component
 | Composer preview | Orchestrator (Control Plane) layout provider | `?preview=true` / Composer iframe |
 | Runtime queries | Edge `/v1/query` | `queryContent` — search, load more, pickers |
 
+Field envelopes are attached once, when the SDK reads the Edge response. Edge's JSON is raw; you never see it that way if you go through `AmplifyPageContent` or `fetchPageConfigServer`. If you call `fetchEdgeResolve` directly you get raw props and must map them yourself — prefer the documented path.
+
 ## Pattern pages (From page)
 
 Components using Composer **From page** require `pageContext` on the provider (or `init`) so the first paint and first page view include fields. Late `setPageContext` is fine for subsequent events, not for rendering those components.
@@ -116,7 +505,7 @@ Components using Composer **From page** require `pageContext` on the provider (o
 
 Pass `pageContext` at provider/init for From-page components. Do not wait until after first paint. Fixed (static) page fields still attach to events when `pageContext` is omitted.
 
-The SDK maps Edge’s resolved tree into `layoutTree` and renders it. Edge already applies personalization and CMS projection — the site does not call CMS or Decision APIs for layout. After paint, the overlay calls `POST /v1/select` (or `selectVariants()`) then `/v1/resolve?variants=` so decisions stay on the edge (`clientPersonalization`).
+The SDK maps Edge's resolved tree into `layoutTree` and renders it. Edge already applies personalization and CMS projection — the site does not call CMS or Decision APIs for layout. After paint, the overlay calls `POST /v1/select` (or `selectVariants()`) then `/v1/resolve?variants=` so decisions stay on the edge (`clientPersonalization`).
 
 ## Runtime queries
 
@@ -143,7 +532,7 @@ const hits = await queryContent({
 });
 ```
 
-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).
+Only entities published with that route can be queried, and visitors only see published content. Results are plain rows — not `fields` envelopes, 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
 
@@ -167,4 +556,4 @@ React context: `useAmplifyUp()` → `{ pageConfig, loading, error, source, meta
 
 ## License
 
-MIT
+MIT

package/dist/{AmplifyRenderer-BQ8-H2H4.d.ts → AmplifyRenderer-Bwob7ICJ.d.ts}

@@ -1,4 +1,4 @@
-import * as React from 'react';
+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';
@@ -19,11 +19,30 @@ type Field<T> = {
     value: T;
     name: string;
 };
+/** Portable entry ref after normalize (`id` required). */
+type PortableRef = {
+    id: string;
+    type?: string;
+};
+/**
+ * Repeater envelope: each item is a `Fields` bag.
+ * Paths are dotted indexes (`slides.0.title`).
+ */
+type CollectionField<T extends Record<string, unknown>> = {
+    value: Array<Fields<T>>;
+    name: string;
+};
 type IsPlainObject<T> = T extends object ? T extends readonly unknown[] ? false : T extends ImageValue ? false : true : false;
+/** Resolved / authored entry refs carry `id` (see `stampPlatformIdentity`). */
+type IsEntryRefItem<T> = T extends {
+    id: string;
+} ? true : false;
+type AsRecord<T> = T extends Record<string, unknown> ? T : Record<string, unknown>;
+type FieldsProp<T> = NonNullable<T> extends ImageValue ? Field<T | null> : NonNullable<T> extends readonly (infer U)[] ? IsEntryRefItem<U> extends true ? Field<T> : IsPlainObject<U> extends true ? CollectionField<AsRecord<U>> : Field<T> : IsPlainObject<NonNullable<T>> extends true ? Fields<NonNullable<T>> : Field<T>;
 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]>;
+    [K in keyof T]-?: FieldsProp<T[K]>;
 };
 /** Props passed into site components. Raw CMS bags are not assignable. */
 type LayoutComponentProps<T extends Record<string, unknown> = Record<string, unknown>> = {
@@ -69,6 +88,6 @@ interface AmplifyRendererProps {
     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>;
+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 };
+export { AmplifyRenderer as A, type CollectionField as C, type Field as F, type ImageValue as I, type LayoutComponentProps as L, type PortableRef as P, type Fields as a, isBrandedFields as b, isFieldEnvelope as i, toFieldEnvelopes as t };

package/dist/{AmplifyRenderer-W7eqltSj.d.mts → AmplifyRenderer-TawbUIKZ.d.mts}

@@ -1,4 +1,4 @@
-import * as React from 'react';
+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';
@@ -19,11 +19,30 @@ type Field<T> = {
     value: T;
     name: string;
 };
+/** Portable entry ref after normalize (`id` required). */
+type PortableRef = {
+    id: string;
+    type?: string;
+};
+/**
+ * Repeater envelope: each item is a `Fields` bag.
+ * Paths are dotted indexes (`slides.0.title`).
+ */
+type CollectionField<T extends Record<string, unknown>> = {
+    value: Array<Fields<T>>;
+    name: string;
+};
 type IsPlainObject<T> = T extends object ? T extends readonly unknown[] ? false : T extends ImageValue ? false : true : false;
+/** Resolved / authored entry refs carry `id` (see `stampPlatformIdentity`). */
+type IsEntryRefItem<T> = T extends {
+    id: string;
+} ? true : false;
+type AsRecord<T> = T extends Record<string, unknown> ? T : Record<string, unknown>;
+type FieldsProp<T> = NonNullable<T> extends ImageValue ? Field<T | null> : NonNullable<T> extends readonly (infer U)[] ? IsEntryRefItem<U> extends true ? Field<T> : IsPlainObject<U> extends true ? CollectionField<AsRecord<U>> : Field<T> : IsPlainObject<NonNullable<T>> extends true ? Fields<NonNullable<T>> : Field<T>;
 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]>;
+    [K in keyof T]-?: FieldsProp<T[K]>;
 };
 /** Props passed into site components. Raw CMS bags are not assignable. */
 type LayoutComponentProps<T extends Record<string, unknown> = Record<string, unknown>> = {
@@ -69,6 +88,6 @@ interface AmplifyRendererProps {
     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>;
+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 };
+export { AmplifyRenderer as A, type CollectionField as C, type Field as F, type ImageValue as I, type LayoutComponentProps as L, type PortableRef as P, type Fields as a, isBrandedFields as b, isFieldEnvelope as i, toFieldEnvelopes as t };

package/dist/AmplifyRenderer.d.mts

@@ -1,4 +1,4 @@
 import 'react';
 import 'react/jsx-runtime';
-export { A as AmplifyRenderer } from './AmplifyRenderer-W7eqltSj.mjs';
+export { A as AmplifyRenderer } from './AmplifyRenderer-TawbUIKZ.mjs';
 import './types-Db_eLrfU.mjs';

package/dist/AmplifyRenderer.d.ts

@@ -1,4 +1,4 @@
 import 'react';
 import 'react/jsx-runtime';
-export { A as AmplifyRenderer } from './AmplifyRenderer-BQ8-H2H4.js';
+export { A as AmplifyRenderer } from './AmplifyRenderer-Bwob7ICJ.js';
 import './types-Db_eLrfU.js';

package/dist/AmplifyRenderer.js

@@ -430,6 +430,21 @@ function isPortableImageShape(value) {
   if (!value || typeof value !== "object" || Array.isArray(value)) return false;
   return "url" in value;
 }
+function isEntryRefItem(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const rec = value;
+  return typeof rec.id === "string" && rec.id.trim().length > 0 || typeof rec._id === "string" && rec._id.trim().length > 0 || typeof rec.docId === "string" && rec.docId.trim().length > 0;
+}
+function isRepeaterArray(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 (isEntryRefItem(sample)) return false;
+  if (sample.$$typeof) return false;
+  return true;
+}
 function joinPath(prefix, key) {
   return prefix ? `${prefix}.${key}` : key;
 }
@@ -446,9 +461,21 @@ function toFieldEnvelopes(source, prefix = "") {
   for (const [key, raw] of Object.entries(input)) {
     const path = joinPath(prefix, key);
     if (isFieldEnvelope(raw)) {
+      const inner = raw.value;
+      if (isRepeaterArray(inner)) {
+        out[key] = {
+          value: envelopeRepeaterItems(inner, raw.name || path),
+          name: raw.name || path
+        };
+        continue;
+      }
       out[key] = { value: raw.value ?? null, name: raw.name || path };
       continue;
     }
+    if (isRepeaterArray(raw)) {
+      out[key] = { value: envelopeRepeaterItems(raw, path), name: path };
+      continue;
+    }
     if (raw && typeof raw === "object" && !Array.isArray(raw) && !isPortableImageShape(raw) && !raw.$$typeof) {
       out[key] = toFieldEnvelopes(raw, path);
       continue;
@@ -457,6 +484,16 @@ function toFieldEnvelopes(source, prefix = "") {
   }
   return brandFields(out);
 }
+function envelopeRepeaterItems(items, prefix) {
+  return items.map((item, i) => {
+    const path = joinPath(prefix, String(i));
+    if (isBrandedFields(item)) return item;
+    if (item && typeof item === "object" && !Array.isArray(item)) {
+      return toFieldEnvelopes(item, path);
+    }
+    return toFieldEnvelopes({}, path);
+  });
+}
 function attachFieldEnvelopes(props) {
   const raw = props && typeof props === "object" ? { ...props } : {};
   if (isBrandedFields(raw.fields)) return raw;
@@ -483,6 +520,14 @@ function envelopePageConfig(page) {
 }
 function collectFieldPatches(props) {
   const out = [];
+  const walkRepeater = (items, prefix) => {
+    items.forEach((item, i) => {
+      const itemPath = joinPath(prefix, String(i));
+      if (isBrandedFields(item) || item && typeof item === "object" && !Array.isArray(item) && !isFieldEnvelope(item)) {
+        walk(item, itemPath);
+      }
+    });
+  };
   const walk = (obj, prefix) => {
     for (const [key, raw] of Object.entries(obj)) {
       if (key === "fields" && raw && typeof raw === "object" && !Array.isArray(raw) && !isFieldEnvelope(raw)) {
@@ -491,9 +536,17 @@ function collectFieldPatches(props) {
       }
       const path = joinPath(prefix, key);
       if (isFieldEnvelope(raw)) {
+        if (isRepeaterArray(raw.value)) {
+          walkRepeater(raw.value, raw.name || path);
+          continue;
+        }
         out.push({ name: raw.name || path, value: raw.value });
         continue;
       }
+      if (isRepeaterArray(raw)) {
+        walkRepeater(raw, path);
+        continue;
+      }
       if (raw && typeof raw === "object" && !Array.isArray(raw) && !isPortableImageShape(raw) && !raw.$$typeof) {
         walk(raw, path);
         continue;
@@ -3234,6 +3287,16 @@ 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 = react.createContext(null);
 function matchesNode(eventNodeId, layoutNodeId) {
@@ -3254,6 +3317,13 @@ function ComposerProvider({
       if (!fieldName || typeof fieldName !== "string") return;
       if (!matchesNode(nodeId, layoutNodeId)) return;
       store.set(fieldName, value);
+      if (value && typeof value === "object") {
+        for (const patch of collectFieldPatches(
+          toFieldEnvelopes({ [fieldName]: value })
+        )) {
+          store.set(patch.name, patch.value);
+        }
+      }
     };
     const applyProps = (nextProps, nodeId) => {
       if (!nextProps || typeof nextProps !== "object" || Array.isArray(nextProps)) {