The block catalog: nine groups, one registry

The catalog is what a page document can say. Each block is one entry in @fiberfx/content's registry, and contentRegistry() holds them all.

The catalog

CATALOG is the catalog's table: nine groups and the 51 names in them. catalogEntries() returns the registered entries themselves, which add one internal part, Column, that Columns composes.

Every entry ships with an example, and exampleDocument(entry) turns it into a one-block page document. The package's catalog check parses each example against contentSchema() and renders it, and none may come back empty or unsupported. You can run the same walk:

import { catalogEntries, contentSchema, exampleDocument, renderDocument } from "@fiberfx/content";
import { parseDocument } from "@fiberfx/schema";

for (const entry of catalogEntries().filter((entry) => entry.group !== "Internal")) {
  const parsed = parseDocument(exampleDocument(entry), contentSchema());
  if (!parsed.ok) throw new Error(`${entry.name}: ${parsed.code} at ${parsed.path}`);
  const { report } = renderDocument(parsed.document, { mode: "preview", revision: 1 });
  console.log(entry.group, entry.name, entry.type, report.unsupported.length);
}

What an entry declares

A BlockEntry has:

• name: its catalog name, for example RichText display;
• group: one of the nine groups, or Internal;
• type: the block type documents name, for example rich-text;
• definition: its schema, as @fiberfx/schema validates it;
• capabilities: what the host must grant, embed or form; most blocks need none;
• render: the renderer, called with { node, props, context };
• example: the props and slot children the catalog check renders.

In the tables below, a prop marked ? is optional, and a number after a text prop is its longest length. A block with no slot column holds no children.

Structure

Sizes map to spacing: sm 12, md 24, lg 48, xl 72. Columns' reverse is written as data-reverse attributes (one per breakpoint override) for a stylesheet to read, and the DOM keeps document order. No stylesheet in this repository reads those attributes yet, so reverse changes no layout on its own; the references lesson has the detail.

Text

A heading's level is its rank in the outline. Its visual size never chooses the rank; without one, the size follows the level. Rich text carries runs and marks only, never raw HTML.

Media

An image never fetches its asset. When the host resolved no source, it shows its alt text in place, with role="img"; a decorative image (empty alt) with nothing resolved renders nothing. An embed frames only an absolute https URL, only when the host grants embed, and with sandbox="allow-scripts" and never the host's origin. If either condition is missing, it renders the title as a link.

Navigation

Breadcrumbs are static markup. The last item is the current page (aria-current="page") and is never a link.

Composition

A Button stays an <a>: what the author wrote is navigation, so it is a link that looks like a button.

Interactive content

Every panel and slide is in the static markup, so the page reads in full without JavaScript, and Tabs and Carousel render that same static form first so the first client render matches. A carousel with autoAdvance moves every 6 seconds and has a Pause toggle; a reader who asked for reduced motion starts paused.

Form content

A field's kind is text, email, tel, number, url, textarea, checkbox or select. A form posts natively and only when the host grants form and resolved its route. Without that it says "This form can't be sent from here.", disables every field and refuses a submit, so nothing is fetched, stored or pretended. The submit's state is the host's, after a real submission: a success message is a status, an error an alert.

Data-backed content

A data-backed block shows the entity snapshot the host resolved and never queries for one. Under its heading it is in one of four states, written as data-state:

• error: the host's error message, as an alert;
• unavailable: nothing was resolved: "This list isn't available right now.";
• empty: the snapshot has no items: "Nothing here yet.";
• ready: the items.

Editorial page

Links an author writes

Every href an author types (a button's, a rich-text run's, a card's, a navigation or breadcrumb item's) passes one check, and so does every href in a resolved collection. Relative paths, fragments, queries and http, https, mailto and tel links are kept. Any other scheme, a protocol-relative //host, or a link with a control character is dropped, and the label renders without an href.