These are Fruitful’s client-compiled Basic, Social, and Bundle catalogs for A2UI v0.9.1. Properties and descriptions below come from the canonical universal schemas. Each example is parsed against its exact catalog before rendering with the shared web runtime.

Catalog JSON describes accepted structure; it does not download widgets or validate the resolved contents of a bound object. Package View Lexicons validate those contents. Bundle data shapes below refer to the existing StoryBlock, ImageData, and HydratedSourceEntry domain types; the complete resolved example data is shown alongside each surface.

Previews show completed content in Fruitful’s actual theme. Dates use UTC so static HTML and browser hydration agree; explicit relative timestamp strings supplied by a View are preserved. Local expansion and grouping rationale work; external citations open their public URLs. Private Activity readers, source synchronization, and Add Sources actions are unavailable here. The image examples load an illustration served by this documentation site; no captured media directory is published.

The web examples exercise layout alignment, justification, and vertical Divider behavior. Kicker is intentionally hidden by the web implementation. Column maxWidth, TopicSection summaryPath, BundleOverview variant, BundleFooter preset, ClusterCard rank, and SourceTypeSection count have legacy or ignored behavior described below. These are not portable styling controls. Semantic text variants are interpreted by the catalog; arbitrary agent styling and createSurface.theme data remain unsupported. See JSON Schemas for validation and interoperability limits.

Basic

Download the versioned catalog. The URL becomes available after the website deployment.

Basic: Column

Vertical layout. Basic uses purpose-specific spacing; Bundle uses the shared layout primitive.

Property	Required	Accepted value	Description
`id`	Yes	`string`
`component`	Yes	`"Column"`
`children`	Yes	`string[] \| path binding`	Ordered child component IDs, or a data-list path and componentId template.
`justify`	No	`"start" \| "center" \| "end" \| "spaceBetween" \| "spaceAround" \| "spaceEvenly" \| "stretch"`	Distribution along the main axis. Web supports every listed value; stretch gives children equal flex growth.
`align`	No	`"start" \| "center" \| "end" \| "stretch"`	Alignment on the cross axis.
`maxWidth`	No	`string \| path binding`	Legacy host utility-class hint. Basic web ignores it; Bundle web requires a precompiled class. Public examples omit it; it is not a portable CSS length.

First item

Second item

Loading component example…

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/basic/v1/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "Column",
        "children": [
          "first",
          "second"
        ],
        "justify": "spaceBetween",
        "align": "start"
      },
      {
        "id": "first",
        "component": "Text",
        "text": "First item"
      },
      {
        "id": "second",
        "component": "Text",
        "text": "Second item"
      }
    ]
  },
  "dataModel": {}
}

Basic: Divider

A horizontal separator by default, or a vertical separator stretched across its Row.

Property	Required	Accepted value
`id`	Yes	`string`
`component`	Yes	`"Divider"`
`axis`	No	`"horizontal" \| "vertical"`

Before

After

Loading component example…

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/basic/v1/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "Row",
        "children": [
          "first",
          "divider",
          "second"
        ]
      },
      {
        "id": "first",
        "component": "Text",
        "text": "Before"
      },
      {
        "id": "divider",
        "component": "Divider",
        "axis": "vertical"
      },
      {
        "id": "second",
        "component": "Text",
        "text": "After"
      }
    ]
  },
  "dataModel": {}
}

Basic: Row

Horizontal layout with wrapping in Basic web presentation.

Property	Required	Accepted value	Description
`id`	Yes	`string`
`component`	Yes	`"Row"`
`children`	Yes	`string[] \| path binding`	Ordered child component IDs, or a data-list path and componentId template.
`justify`	No	`"start" \| "center" \| "end" \| "spaceBetween" \| "spaceAround" \| "spaceEvenly" \| "stretch"`	Distribution along the main axis. Web supports every listed value; stretch gives children equal flex growth.
`align`	No	`"start" \| "center" \| "end" \| "stretch"`	Alignment on the cross axis.

First item

Second item

Loading component example…

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/basic/v1/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "Row",
        "children": [
          "first",
          "second"
        ],
        "justify": "spaceBetween",
        "align": "center"
      },
      {
        "id": "first",
        "component": "Text",
        "text": "First item"
      },
      {
        "id": "second",
        "component": "Text",
        "text": "Second item"
      }
    ]
  },
  "dataModel": {}
}

Basic: Text

Plain text with a semantic heading, body, or caption variant; the trusted host chooses typography.

Property	Required	Accepted value
`id`	Yes	`string`
`component`	Yes	`"Text"`
`text`	Yes	`string \| path binding`
`variant`	No	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "caption" \| "body"`

A calmer way to read

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/basic/v1/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "Text",
        "text": {
          "path": "/title"
        },
        "variant": "h2"
      }
    ]
  },
  "dataModel": {
    "title": "A calmer way to read"
  }
}

Download the versioned catalog. The URL becomes available after the website deployment.

A compact or Reader social post with author details, Markdown body, and optional record-backed media. The record binding resolves to the original semantic record; quote resolves to a hydrated post View with $type, record, and author; author has displayName and handle, and record has text. These polymorphic objects require the package View Lexicon, not just this component schema.

Property	Required	Accepted value
`id`	Yes	`string`
`component`	Yes	`"SocialPost"`
`variant`	Yes	`"compact" \| "reader"`
`sourceLabel`	No	`string \| path binding`
`authorName`	Yes	`string \| path binding`
`authorHandle`	No	`string \| path binding`
`authorHeadline`	No	`string \| path binding`
`authorAvatarUrl`	No	`string \| path binding`
`body`	No	`string \| path binding`
`publishedAt`	No	`string \| path binding`
`relativePublishedAt`	No	`string \| path binding`
`record`	No	`path binding`
`quote`	No	`path binding`

Ada Example

Sample post

9 Sep 2026, 06:00 UTC

One quiet place to read. Your interests, with links to the A2UI documentation.

Loading component example…

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/social/v1/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "SocialPost",
        "variant": "reader",
        "sourceLabel": "Sample post",
        "authorName": "Ada Example",
        "body": {
          "path": "/body"
        },
        "publishedAt": "2026-09-08T23:00:00-07:00"
      }
    ]
  },
  "dataModel": {
    "body": "One quiet place to read. **Your interests**, with links to [the A2UI documentation](https://a2ui.org/)."
  }
}

Bundle

Download the versioned catalog. The URL becomes available after the website deployment.

Bundle: Body

Rich Markdown story content. data resolves to {type: "body", text}; clusterId selects public citation context.

Property	Required	Accepted value
`id`	Yes	`string`
`component`	Yes	`"Body"`
`data`	Yes	`path binding`
`clusterId`	Yes	`string \| path binding`

A quieter morning

Read the ideas that matter to you.

Follow a source
Read its latest update

Make room for focused reading.

See the A2UI documentation.

A2UI carries the structure; the host supplies the design.

Loading component example…

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "Body",
        "data": {
          "path": "/block"
        },
        "clusterId": "example"
      }
    ]
  },
  "dataModel": {
    "block": {
      "type": "body",
      "text": "## A quieter morning\n\nRead the **ideas that matter** to you.\n\n- Follow a source\n- Read its latest update\n\n> Make room for focused reading.\n\nSee the [A2UI documentation](https://a2ui.org/).\n\n`A2UI` carries the structure; the host supplies the design."
    }
  }
}

Bundle: BriefList

A brief list with a local Show more control when children overflow.

Property	Required	Accepted value	Description
`id`	Yes	`string`
`component`	Yes	`"BriefList"`
`children`	Yes	`string[] \| path binding`	Ordered child component IDs, or a data-list path and componentId template.
`label`	No	`string \| path binding`
`clusterId`	No	`string \| path binding`

Quick reads

Loading component example…

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "BriefList",
        "children": [
          "first",
          "second",
          "third",
          "fourth",
          "fifth",
          "sixth",
          "seventh"
        ],
        "label": "Quick reads"
      },
      {
        "id": "first",
        "component": "ActivitySourceReference",
        "activityItemId": "public-example",
        "citationLabel": "Reading 1",
        "citationUrl": "https://a2ui.org/",
        "dropped": false,
        "clusterId": "",
        "staggerIndex": 0
      },
      {
        "id": "second",
        "component": "ActivitySourceReference",
        "activityItemId": "public-example",
        "citationLabel": "Reading 2",
        "citationUrl": "https://a2ui.org/",
        "dropped": false,
        "clusterId": "",
        "staggerIndex": 0
      },
      {
        "id": "third",
        "component": "ActivitySourceReference",
        "activityItemId": "public-example",
        "citationLabel": "Reading 3",
        "citationUrl": "https://a2ui.org/",
        "dropped": false,
        "clusterId": "",
        "staggerIndex": 0
      },
      {
        "id": "fourth",
        "component": "ActivitySourceReference",
        "activityItemId": "public-example",
        "citationLabel": "Reading 4",
        "citationUrl": "https://a2ui.org/",
        "dropped": false,
        "clusterId": "",
        "staggerIndex": 0
      },
      {
        "id": "fifth",
        "component": "ActivitySourceReference",
        "activityItemId": "public-example",
        "citationLabel": "Reading 5",
        "citationUrl": "https://a2ui.org/",
        "dropped": false,
        "clusterId": "",
        "staggerIndex": 0
      },
      {
        "id": "sixth",
        "component": "ActivitySourceReference",
        "activityItemId": "public-example",
        "citationLabel": "Reading 6",
        "citationUrl": "https://a2ui.org/",
        "dropped": false,
        "clusterId": "",
        "staggerIndex": 0
      },
      {
        "id": "seventh",
        "component": "ActivitySourceReference",
        "activityItemId": "public-example",
        "citationLabel": "Reading 7",
        "citationUrl": "https://a2ui.org/",
        "dropped": false,
        "clusterId": "",
        "staggerIndex": 0
      }
    ]
  },
  "dataModel": {}
}

Bundle: BundleFooter

Closing text displayed when the stream is complete. preset is accepted but currently ignored by the web widget.

Property	Required	Accepted value
`id`	Yes	`string`
`component`	Yes	`"BundleFooter"`
`text`	Yes	`string \| path binding`
`preset`	Yes	`string \| path binding`

Loading component example…

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "BundleFooter",
        "text": "You are all caught up.",
        "preset": "daily"
      }
    ]
  },
  "dataModel": {}
}

Bundle: BundleHeader

Bundle title, date, and a locally expandable source list. sourceCount controls the summary; totalSourceCount and clusterCount are accepted but currently ignored by the web widget. activityWindow resolves to {start, end} ISO timestamps or null. sources resolves to an array of {sourceId, name, domain, itemCount, filteredItemCount, included, urls?}; urls contains {url, path, itemCount}.

Property	Required	Accepted value
`id`	Yes	`string`
`component`	Yes	`"BundleHeader"`
`title`	Yes	`string \| path binding`
`date`	Yes	`string \| path binding`
`activityWindow`	Yes	`path binding`
`sourceCount`	Yes	`string \| path binding \| number \| path binding`
`totalSourceCount`	Yes	`string \| path binding \| number \| path binding`
`clusterCount`	Yes	`string \| path binding \| number \| path binding`
`sources`	Yes	`path binding`

Your reading

Wednesday, 9 September 2026

Loading component example…

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "BundleHeader",
        "title": "Your reading",
        "date": "2026-09-09T12:00:00.000Z",
        "activityWindow": {
          "path": "/window"
        },
        "sourceCount": 1,
        "totalSourceCount": 1,
        "clusterCount": 1,
        "sources": {
          "path": "/sources"
        }
      }
    ]
  },
  "dataModel": {
    "window": {
      "start": "2026-09-08T12:00:00.000Z",
      "end": "2026-09-09T12:00:00.000Z"
    },
    "sources": [
      {
        "sourceId": "example",
        "name": "A2UI",
        "domain": "a2ui.org",
        "itemCount": 1,
        "filteredItemCount": 0,
        "included": true,
        "urls": [
          {
            "url": "https://a2ui.org/",
            "path": "/",
            "itemCount": 1
          }
        ]
      }
    ]
  }
}

Bundle: BundleOverview

Introductory Markdown. The host supplies typography; variant is accepted but currently ignored by the web widget.

Property	Required	Accepted value
`id`	Yes	`string`
`component`	Yes	`"BundleOverview"`
`body`	Yes	`string \| path binding`
`variant`	Yes	`string \| path binding`

A quieter reading routine
One useful source to explore

Loading component example…

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "BundleOverview",
        "body": "- A quieter reading routine\n- One useful source to explore",
        "variant": "default"
      }
    ]
  },
  "dataModel": {}
}

Bundle: BundleEmptyState

Empty Bundle message. Product hosts may supply an Add Sources action; public previews display only the message.

Property	Required	Accepted value	Description
`id`	Yes	`string`
`component`	Yes	`"BundleEmptyState"`

Nothing new today

Loading component example…

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "BundleEmptyState"
      }
    ]
  },
  "dataModel": {}
}

Bundle: ClusterCard

A story group with a locally expandable grouping rationale. Children contain the editorial blocks. rank is accepted but currently ignored by the web widget.

Property	Required	Accepted value	Description
`id`	Yes	`string`
`component`	Yes	`"ClusterCard"`
`clusterId`	Yes	`string \| path binding`
`rank`	Yes	`string \| path binding \| number \| path binding`
`rationale`	Yes	`string \| path binding`
`children`	Yes	`string[] \| path binding`	Ordered child component IDs, or a data-list path and componentId template.

A calmer way to read

A2UI documentation

Loading component example…

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "ClusterCard",
        "clusterId": "example",
        "rank": 1,
        "rationale": "These sources discuss the same reading experience.",
        "children": [
          "headline",
          "citation"
        ]
      },
      {
        "id": "headline",
        "component": "Headline",
        "data": {
          "path": "/headline"
        }
      },
      {
        "id": "citation",
        "component": "ActivitySourceReference",
        "activityItemId": "public-example",
        "citationLabel": "A2UI documentation",
        "citationUrl": "https://a2ui.org/",
        "dropped": false,
        "clusterId": "",
        "staggerIndex": 0
      }
    ]
  },
  "dataModel": {
    "headline": {
      "type": "headline",
      "text": "A calmer way to read"
    }
  }
}

Bundle: Column

Vertical layout. Basic uses purpose-specific spacing; Bundle uses the shared layout primitive.

Property	Required	Accepted value	Description
`id`	Yes	`string`
`component`	Yes	`"Column"`
`children`	Yes	`string[] \| path binding`	Ordered child component IDs, or a data-list path and componentId template.
`justify`	No	`"start" \| "center" \| "end" \| "spaceBetween" \| "spaceAround" \| "spaceEvenly" \| "stretch"`	Distribution along the main axis. Web supports every listed value; stretch gives children equal flex growth.
`align`	No	`"start" \| "center" \| "end" \| "stretch"`	Alignment on the cross axis.
`maxWidth`	No	`string \| path binding`	Legacy host utility-class hint. Basic web ignores it; Bundle web requires a precompiled class. Public examples omit it; it is not a portable CSS length.

A calmer way to read

A2UI documentation

Loading component example…

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "Column",
        "children": [
          "headline",
          "citation"
        ],
        "align": "start"
      },
      {
        "id": "headline",
        "component": "Headline",
        "data": {
          "path": "/headline"
        }
      },
      {
        "id": "citation",
        "component": "ActivitySourceReference",
        "activityItemId": "public-example",
        "citationLabel": "A2UI documentation",
        "citationUrl": "https://a2ui.org/",
        "dropped": false,
        "clusterId": "",
        "staggerIndex": 0
      }
    ]
  },
  "dataModel": {
    "headline": {
      "type": "headline",
      "text": "A calmer way to read"
    }
  }
}

Bundle: Crosshead

An editorial subheading. data resolves to a StoryBlock with {type: "crosshead", text}.

Property	Required	Accepted value
`id`	Yes	`string`
`component`	Yes	`"Crosshead"`
`data`	Yes	`path binding`

What changed

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "Crosshead",
        "data": {
          "path": "/block"
        }
      }
    ]
  },
  "dataModel": {
    "block": {
      "type": "crosshead",
      "text": "What changed"
    }
  }
}

Bundle: Deck

Supporting text beneath a headline. data resolves to {type: "deck", text}.

Property	Required	Accepted value
`id`	Yes	`string`
`component`	Yes	`"Deck"`
`data`	Yes	`path binding`

A small collection of ideas for the morning.

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "Deck",
        "data": {
          "path": "/block"
        }
      }
    ]
  },
  "dataModel": {
    "block": {
      "type": "deck",
      "text": "A small collection of ideas for the morning."
    }
  }
}

Bundle: FilteredOut

Locally expandable list of filtered records. data resolves to BundleV2FilteredItemData[]: {id, title: string | null, sourceName, sourceUrl?, reasoning}. Reading private Activity requires a product host and is unavailable in public previews.

Property	Required	Accepted value
`id`	Yes	`string`
`component`	Yes	`"FilteredOut"`
`data`	Yes	`path binding`

Less relevant to your interests

Sample reading item 1Outside this topic
Sample reading item 2Outside this topic
Sample reading item 3Outside this topic
Sample reading item 4Outside this topic

Loading component example…

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "FilteredOut",
        "data": {
          "path": "/items"
        }
      }
    ]
  },
  "dataModel": {
    "items": [
      {
        "id": "example-0",
        "title": "Sample reading item 1",
        "sourceName": "Sample source",
        "sourceUrl": "https://a2ui.org/",
        "reasoning": "Outside this topic"
      },
      {
        "id": "example-1",
        "title": "Sample reading item 2",
        "sourceName": "Sample source",
        "sourceUrl": "https://a2ui.org/",
        "reasoning": "Outside this topic"
      },
      {
        "id": "example-2",
        "title": "Sample reading item 3",
        "sourceName": "Sample source",
        "sourceUrl": "https://a2ui.org/",
        "reasoning": "Outside this topic"
      },
      {
        "id": "example-3",
        "title": "Sample reading item 4",
        "sourceName": "Sample source",
        "sourceUrl": "https://a2ui.org/",
        "reasoning": "Outside this topic"
      },
      {
        "id": "example-4",
        "title": "Sample reading item 5",
        "sourceName": "Sample source",
        "sourceUrl": "https://a2ui.org/",
        "reasoning": "Outside this topic"
      }
    ]
  }
}

Bundle: Headline

The main story headline. data resolves to {type: "headline", text}.

Property	Required	Accepted value
`id`	Yes	`string`
`component`	Yes	`"Headline"`
`data`	Yes	`path binding`

A calmer way to read

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "Headline",
        "data": {
          "path": "/block"
        }
      }
    ]
  },
  "dataModel": {
    "block": {
      "type": "headline",
      "text": "A calmer way to read"
    }
  }
}

Bundle: Image

An image with optional source attribution. The current web widget does not display image caption or credit metadata. data resolves to {type: "image", image: ImageData, sourceRef}. ImageData contains url, alt, caption, credit, width, height; optional display values may be null.

Property	Required	Accepted value
`id`	Yes	`string`
`component`	Yes	`"Image"`
`data`	Yes	`path binding`
`clusterId`	Yes	`string \| path binding`

Illustration of mountains beneath an orange sun

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "Image",
        "data": {
          "path": "/block"
        },
        "clusterId": "example"
      }
    ]
  },
  "dataModel": {
    "block": {
      "type": "image",
      "image": {
        "url": "/examples/catalog-landscape.svg",
        "alt": "Illustration of mountains beneath an orange sun",
        "caption": "An illustration created for these examples.",
        "credit": "Fruitful",
        "width": 640,
        "height": 360
      },
      "sourceRef": "illustration"
    }
  }
}

Bundle: ImagePair

Two images side by side. data resolves to {type: "image-pair", images: [ImageData, ImageData], sourceRefs: [string, string]}; each ImageData has url, alt, caption, credit, width, height.

Property	Required	Accepted value
`id`	Yes	`string`
`component`	Yes	`"ImagePair"`
`data`	Yes	`path binding`
`clusterId`	Yes	`string \| path binding`

A second view of the mountain illustration — An illustration created for these examples.

Loading component example…

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "ImagePair",
        "data": {
          "path": "/block"
        },
        "clusterId": "example"
      }
    ]
  },
  "dataModel": {
    "block": {
      "type": "image-pair",
      "images": [
        {
          "url": "/examples/catalog-landscape.svg",
          "alt": "Illustration of mountains beneath an orange sun",
          "caption": "An illustration created for these examples.",
          "credit": "Fruitful",
          "width": 640,
          "height": 360
        },
        {
          "url": "/examples/catalog-landscape.svg",
          "alt": "A second view of the mountain illustration",
          "caption": "An illustration created for these examples.",
          "credit": "Fruitful",
          "width": 640,
          "height": 360
        }
      ],
      "sourceRefs": [
        "illustration",
        "illustration-2"
      ]
    }
  }
}

Bundle: Kicker

A retained editorial label, intentionally hidden by the current web implementation. data resolves to {type: "kicker", text}. The live example includes a companion Headline to show its context; Kicker itself does not render.

Property	Required	Accepted value
`id`	Yes	`string`
`component`	Yes	`"Kicker"`
`data`	Yes	`path binding`

A calmer way to read

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "Column",
        "children": [
          "kicker",
          "headline"
        ]
      },
      {
        "id": "kicker",
        "component": "Kicker",
        "data": {
          "path": "/block"
        }
      },
      {
        "id": "headline",
        "component": "Headline",
        "data": {
          "path": "/headline"
        }
      }
    ]
  },
  "dataModel": {
    "headline": {
      "type": "headline",
      "text": "A calmer way to read"
    },
    "block": {
      "type": "kicker",
      "text": "Reading"
    }
  }
}

Bundle: LeadImage

A lead image with optional source attribution. The current web widget does not display image caption or credit metadata. data resolves to {type: "lead-image", image: ImageData, sourceRef}; ImageData contains url, alt, caption, credit, width, height.

Property	Required	Accepted value
`id`	Yes	`string`
`component`	Yes	`"LeadImage"`
`data`	Yes	`path binding`
`clusterId`	Yes	`string \| path binding`

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "LeadImage",
        "data": {
          "path": "/block"
        },
        "clusterId": "example"
      }
    ]
  },
  "dataModel": {
    "block": {
      "type": "lead-image",
      "image": {
        "url": "/examples/catalog-landscape.svg",
        "alt": "Illustration of mountains beneath an orange sun",
        "caption": "An illustration created for these examples.",
        "credit": "Fruitful",
        "width": 640,
        "height": 360
      },
      "sourceRef": "illustration"
    }
  }
}

Bundle: Overflow

A count of additional items; no action is implied.

Property	Required	Accepted value
`id`	Yes	`string`
`component`	Yes	`"Overflow"`
`count`	Yes	`string \| path binding \| number \| path binding`

+ 3 more

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "Overflow",
        "count": 3
      }
    ]
  },
  "dataModel": {}
}

Bundle: PullQuote

An attributed quotation. data resolves to {type: "pull-quote", text, attribution: string | null, sourceRef}.

Property	Required	Accepted value
`id`	Yes	`string`
`component`	Yes	`"PullQuote"`
`data`	Yes	`path binding`
`clusterId`	Yes	`string \| path binding`

"Make room for focused reading."
— Sample quotation

Loading component example…

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "PullQuote",
        "data": {
          "path": "/block"
        },
        "clusterId": "example"
      }
    ]
  },
  "dataModel": {
    "block": {
      "type": "pull-quote",
      "text": "Make room for focused reading.",
      "attribution": "Sample quotation",
      "sourceRef": "example"
    }
  }
}

Bundle: RelevantButSlop

Locally expandable list of relevant records flagged as AI-written. data uses the same BundleV2FilteredItemData[] shape as FilteredOut. Public previews do not open private Activity.

Property	Required	Accepted value
`id`	Yes	`string`
`component`	Yes	`"RelevantButSlop"`
`data`	Yes	`path binding`

Relevant yet AI slop

Sample reading item 1Outside this topic
Sample reading item 2Outside this topic
Sample reading item 3Outside this topic
Sample reading item 4Outside this topic

Loading component example…

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "RelevantButSlop",
        "data": {
          "path": "/items"
        }
      }
    ]
  },
  "dataModel": {
    "items": [
      {
        "id": "example-0",
        "title": "Sample reading item 1",
        "sourceName": "Sample source",
        "sourceUrl": "https://a2ui.org/",
        "reasoning": "Outside this topic"
      },
      {
        "id": "example-1",
        "title": "Sample reading item 2",
        "sourceName": "Sample source",
        "sourceUrl": "https://a2ui.org/",
        "reasoning": "Outside this topic"
      },
      {
        "id": "example-2",
        "title": "Sample reading item 3",
        "sourceName": "Sample source",
        "sourceUrl": "https://a2ui.org/",
        "reasoning": "Outside this topic"
      },
      {
        "id": "example-3",
        "title": "Sample reading item 4",
        "sourceName": "Sample source",
        "sourceUrl": "https://a2ui.org/",
        "reasoning": "Outside this topic"
      },
      {
        "id": "example-4",
        "title": "Sample reading item 5",
        "sourceName": "Sample source",
        "sourceUrl": "https://a2ui.org/",
        "reasoning": "Outside this topic"
      }
    ]
  }
}

Bundle: Separator

A three-dot editorial separator. data accepts a binding to {type: "separator"}, but the current web widget does not read it.

Property	Required	Accepted value
`id`	Yes	`string`
`component`	Yes	`"Separator"`
`data`	Yes	`path binding`

Loading component example…

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "Separator",
        "data": {
          "path": "/block"
        }
      }
    ]
  },
  "dataModel": {
    "block": {
      "type": "separator"
    }
  }
}

Bundle: ActivitySourceReference

A source citation. Public previews open a valid HTTP(S) citationUrl; product hosts may resolve private Activity. clusterId identifies its containing entry and staggerIndex controls streaming order.

Property	Required	Accepted value
`id`	Yes	`string`
`component`	Yes	`"ActivitySourceReference"`
`activityItemId`	Yes	`string \| path binding`
`citationLabel`	Yes	`string \| path binding`
`citationUrl`	Yes	`string \| path binding`
`dropped`	Yes	`boolean \| path binding`
`clusterId`	Yes	`string \| path binding`
`staggerIndex`	Yes	`string \| path binding \| number \| path binding`
`compact`	No	`boolean \| path binding`

A2UI documentation

Loading component example…

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "ActivitySourceReference",
        "activityItemId": "public-example",
        "citationLabel": "A2UI documentation",
        "citationUrl": "https://a2ui.org/",
        "dropped": false,
        "clusterId": "citation-entry",
        "staggerIndex": 0
      }
    ]
  },
  "dataModel": {}
}

Bundle: Sources

Source attribution as pills or a list. data resolves to a sources StoryBlock with {type: "sources", style: "pills" | "list", entries: HydratedSourceEntry[]}. Each entry includes sourceRef, sourceName, sourceUrl, sourceTitle, sourceDomain, citationIndex, citationLabel, snippet, origin, and evidence. clusterSources resolves to {name, domain, itemCount, itemIds, isFeatured}[]; clusterLinkedDomains to {domain, itemIds}[]. Public list examples retain external links.

Property	Required	Accepted value
`id`	Yes	`string`
`component`	Yes	`"Sources"`
`data`	Yes	`path binding`
`clusterId`	Yes	`string \| path binding`
`clusterSources`	Yes	`path binding`
`clusterLinkedDomains`	Yes	`path binding`

A2UI documentation

Loading component example…

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "Sources",
        "data": {
          "path": "/block"
        },
        "clusterId": "example",
        "clusterSources": {
          "path": "/sources"
        },
        "clusterLinkedDomains": {
          "path": "/domains"
        }
      }
    ]
  },
  "dataModel": {
    "block": {
      "type": "sources",
      "style": "list",
      "entries": [
        {
          "sourceRef": "public-example",
          "sourceName": "A2UI",
          "sourceUrl": "https://a2ui.org/",
          "sourceTitle": "A2UI documentation",
          "sourceDomain": "a2ui.org",
          "citationIndex": 1,
          "citationLabel": "A2UI",
          "snippet": null,
          "origin": null,
          "evidence": {
            "candidateRef": "example",
            "activityItemId": "public-example",
            "recordUri": "https://a2ui.org/",
            "path": null,
            "blobRef": null
          }
        }
      ]
    },
    "sources": [],
    "domains": []
  }
}

Bundle: SourceTypeSection

A labeled section grouping children by source type. sectionId selects top-level section styling; clusterId identifies an entry. count is accepted but currently ignored by the web widget.

Property	Required	Accepted value	Description
`id`	Yes	`string`
`component`	Yes	`"SourceTypeSection"`
`label`	Yes	`string \| path binding`
`count`	Yes	`string \| path binding`
`children`	Yes	`string[] \| path binding`	Ordered child component IDs, or a data-list path and componentId template.
`clusterId`	No	`string \| path binding`
`sectionId`	No	`string \| path binding`

From your sources

A2UI documentation

Loading component example…

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "SourceTypeSection",
        "label": "From your sources",
        "count": "1",
        "children": [
          "citation"
        ],
        "sectionId": "sources"
      },
      {
        "id": "citation",
        "component": "ActivitySourceReference",
        "activityItemId": "public-example",
        "citationLabel": "A2UI documentation",
        "citationUrl": "https://a2ui.org/",
        "dropped": false,
        "clusterId": "",
        "staggerIndex": 0
      }
    ]
  },
  "dataModel": {}
}

Bundle: Summary

A Markdown summary, optionally bordered. data resolves to a StoryBlock with {type: "summary", text}; clusterId selects citation context.

Property	Required	Accepted value
`id`	Yes	`string`
`component`	Yes	`"Summary"`
`data`	Yes	`path binding`
`clusterId`	Yes	`string \| path binding`
`bordered`	No	`boolean \| path binding`

One useful idea
A little more room to think

Loading component example…

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "Summary",
        "data": {
          "path": "/block"
        },
        "clusterId": "example"
      }
    ]
  },
  "dataModel": {
    "block": {
      "type": "summary",
      "text": "- One useful idea\n- A little more room to think"
    }
  }
}

Bundle: TopicSection

A topical section with children and an optional empty message. summaryPath is a legacy accepted property that the web widget currently ignores.

Property	Required	Accepted value	Description
`id`	Yes	`string`
`component`	Yes	`"TopicSection"`
`label`	Yes	`string \| path binding`
`children`	Yes	`string[] \| path binding`	Ordered child component IDs, or a data-list path and componentId template.
`sectionId`	No	`string \| path binding`
`summaryPath`	No	`string \| path binding`
`emptyMessage`	No	`string \| path binding`

Reading

A calmer way to read

Loading component example…

Surface and resolved example data

{
  "surface": {
    "protocolVersion": "v0.9.1",
    "catalogId": "https://fruitful.app/a2ui/catalogs/bundle/v2/catalog.json",
    "components": [
      {
        "id": "root",
        "component": "TopicSection",
        "label": "Reading",
        "children": [
          "headline"
        ],
        "sectionId": "reading"
      },
      {
        "id": "headline",
        "component": "Headline",
        "data": {
          "path": "/headline"
        }
      }
    ]
  },
  "dataModel": {
    "headline": {
      "type": "headline",
      "text": "A calmer way to read"
    }
  }
}

Component catalog

A calmer way to read

A quieter morning

Quick reads

Nothing new today

A calmer way to read

A calmer way to read

What changed

Less relevant to your interests

A calmer way to read

A calmer way to read

Relevant yet AI slop

From your sources

Reading

A calmer way to read

On this page

A quieter morning

Quick reads

Nothing new today

A calmer way to read

A calmer way to read

Less relevant to your interests

Relevant yet AI slop

From your sources

Reading

A calmer way to read