shelving/uimodule

A React component library for building Shelving apps — forms, content, layout, routing, dialogs, and the documentation-site components, all in one place.

The ui module exists so an app never hand-rolls the same form field, card, or router twice. Every component picks up its look from shared CSS and exposes its variations as props. You build a screen by composing these pieces, and reach for a custom-styled element only when nothing here fits.

ui is consumed as source — it ships .tsx and .module.css files and needs a bundler that understands CSS Modules and JSX. It is not part of the root shelving package; import it from shelving/ui.

How components work

A few conventions run through every component:

  • Styling props are for one-off overrides. Visual options are props on the component — enumerated props for the scales (color="red", size="large", space="none", width="narrow") and boolean props for on/off variants (<Button strong>, <Title center>, <Flex wrap>). Each maps to a class in a CSS Module. Reach for them when a component needs to look different in one place — the way the docs site tints its accents purple — not as the way to dress a whole app. You never pass style or raw className.
  • Composition. Higher-level components — a *Page, a *Card — take their identity from library components like <Card>, <Section>, <Button>, and <Tag> rather than shipping their own styling.
  • Sentence case. Titles, headings, and button labels capitalise only the first word.
  • Theme with CSS. An app-wide custom look is a CSS file, not a wall of props. Write a theme.css that overrides the base design-token variables (and, where needed, per-component hooks) at :root, and import it after the library styles. The recommended workflow is to spend time tuning those variables to match your design — see Theming below.

The styling system

The styling system lives in style/ and has four moving parts: design tokens, the tint scale, cascade layers, and the styling props. Components compose them in a predictable shape; consumers theme by overriding CSS custom properties at :root.

Design tokens. Every design-token constant is defined at :root, split across the themed token modules in style/ — each module owns one domain, documents the variables it defines, and is the page a theme author overrides. style/layers.css is the cascade-layer anchor; every *.module.css @imports it plus the specific token modules it references, so the tokens and the layer order reach every component regardless of bundle order. The domains are: colours (getColorClass()), typography — font size, weight, family, and case (getTypographyClass()), spacing (getSpaceClass()), widths (getWidthClass()), radii (getRadiusClass()), strokes (getStrokeClass()), shadows (getShadowClass()), and durations (getDurationClass()). Each also defines the semantic aliases a theme usually targets (--color-primary, --color-link, --space-paragraph, …). Components read tokens via var(--token).

The tint scale. All colour flows from one anchor variable, --tint-50, from which a 21-step ladder is computed and recomputed under TINT_CLASS — the heart of how color= and status= retint a whole subtree. The ladder, the recompute trick, the painting conventions, and the theming guide all live on the TINT_CLASS page.

Cascade layers. Styles are ordered by @layer, lowest to highest priority: defaults (:root tokens, the tint ladder, body baseline) → components (the bulk of the CSS: .card, .button, …) → variants (cross-cutting opt-in modifiers, which always beat components) → overrides (top-priority structural fixes like :first-child / :last-child margin collapses). Unlayered rules beat all layered rules, so a theme should set tokens at :root or wrap its rules in @layer.

Styling props. The cross-cutting visual options are props, each backed by a helper in style/ that maps the prop to a class. Colour and status move the tint anchor — getColorClass() and getStatusClass(); font size, weight, family, and case, plus text alignment, tint, and wrapping, all come from getTypographyClass(), which extends ColorVariants and composes getColorClass() so every typographic element also accepts color (use getColorClass() directly only for colour-without-typography, e.g. <Icon>); spacing, block-padding, inline-padding ("indent"), and gap from getSpaceClass(), getPaddingClass(), getIndentClass(), and getGapClass(); width constraints from getWidthClass(); flex layout from getFlexClass(); and opt-in scrolling from getScrollClass(). Each helper's page lists its exact prop values and what they set. A component opts into the props it wants by extending the matching *Props interfaces and composing the getXxxClass(props) calls.

Each painting component also exposes per-property theme hooks (--card-background, --card-radius, …) for surgical overrides. To recolour a component or a whole region, apply color= / status= — on it or an ancestor scope — rather than a per-component tint hook; components no longer set the tint anchor themselves. Those hooks are documented in each component's own Styling section (see <Card> for the precedent).

Theming

The recommended way to give an app its own look is a theme stylesheet, not styling props. Create a theme.css, override the base design-token variables at :root, and import it after the library styles:

css
/* theme.css — imported after shelving/ui styles */
:root {
	--color-primary: oklch(58% 0.25 300); /* purple brand */
	--font-body: "Inter", system-ui;
	--radius-normal: 0.5rem; /* tighter corners everywhere */
	--space-normal: 1.125rem; /* roomier spacing scale */
}

Each base token lives in a themed module that documents the variables it defines and which ones a theme usually overrides. Work from broadest (a palette colour or scale root) to narrowest (a single semantic alias):

  • weight · size · font — typography (--weight-*, --size-*, --font-*, --case-label).
  • color — palette, semantic, and brand colours (--color-*).
  • space · width — layout spacing and widths (--space-*, --width-*).
  • radius · stroke · shadow · duration — surface tokens (--radius-*, --stroke-*, --shadow-*, --duration-*).

The tint ladder is the one exception that doesn't follow the override-a-variable pattern: its 21 steps are recomputed from a single anchor inside every tinted scope, so you move the anchor (via color= / status=) rather than overriding individual steps. See TINT_CLASS for the full theming guide, and each component's Styling section for its per-property hooks.

Finding your way around

The components below are listed in the index following this page; this is the short version of where to start reading.

Content. Block-level structure starts with <Card>, <Section>, and the <Heading> / <Title> family, with <Table>, <List>, and <Figure> for specific shapes; wrap longform copy in <Prose>. Inline pieces — <Link>, <Code>, <Strong>, <Mark> — live inside that block content. To render a Markdown string as components, use <Markup>.

Structure. Mount a client app with <App>, or render a full server document with <HTML> and <Page>. Arrange the screen with <CenteredLayout> or <SidebarLayout>, and drive URLs with <Navigation> and <Router>.

Interaction. Forms start at <Form>, which wires <Field> and the typed inputs to a FormStore; <Button> is the standalone action. Overlays are <Dialog> and <Modal>; navigation menus are <Menu> and <MenuItem>; transient feedback is <Notice> (and the global <Notices> list); animate enter/leave with <Transition>.

Documentation site. Hand an extracted tree to <TreeApp> and you get a complete site — sidebar, routing, and a rendered page per element — using the renderers in docs/.

Components

Go

RouteCachecomponent

Keep-alive page cache keyed by the current URL — drop it into a layout around its scrolling content region.

RouteCache({ maxCached = 10, children }: RouteCacheProps): ReactNode
Go

Navigationcomponent

Top-level navigation provider.

Navigation({ children, ...meta }: NavigationProps): ReactElement
Go

Routercomponent

Match the current URL against routes and render the matched element.

Router({ routes, fallback, ...meta }: RouterProps): ReactElement | null
Go

Modalcomponent

Styled <aside> overlay container for modal content.

Modal({ children }: ModalProps): ReactElement
Go

Dialogcomponent

Modal <dialog> element that opens on mount and includes a close button.

Go

DialogCloseButtoncomponent

Button that closes its wrapping <dialog>, showing an X icon by default.

DialogCloseButton({ children = <XMarkIcon />, ...variants }: DialogCloseButtonProps): ReactElement
Go

DialogsContextcomponent

Provider that creates a fresh DialogsStore and shares it with its subtree.

DialogsContext({ children }: DialogsContextProps): ReactElement
Go

Dialogscomponent

Render the open dialogs from the current DialogsContext.

Dialogs(): ReactNode | null
Go

FormNoticecomponent

Show the current form's "main" (unnamed) message as a <Notice>, or render nothing when there is no message.

FormNotice(props: Omit<NoticeProps, "children">): ReactElement | null
Go

FormInputcomponent

Show a SchemaInput for a single named property of the current form.

FormInput({ name, ...props }: FormInputProps): ReactElement
Go

FormInputscomponent

Show a SchemaInput for every property in the current form's schema.

FormInputs(): ReactElement
Go

FormMessagecomponent

Show the current form's "main" (unnamed) message as a <Message>, or render nothing when there is no message.

FormMessage(props: BlockVariants): ReactElement | null
Go

Progresscomponent

Show progress as a single continuous horizontal bar, filled to value within the min–max range (matches getPercent() and formatPercent()).

Progress({ value, min = 0, max = 100, ...props }: ProgressProps): ReactElement
Go

FormFieldcomponent

Show a <Field> (label, input, and message) for a single named property of the current form.

FormField({ name, ...props }: InputProps): ReactElement
Go

FormFieldscomponent

Show a <Field> for every property in the current form's schema.

FormFields(): ReactElement
Go

Formcomponent

Schema-driven form that creates a FormStore, provides it via FormContext, and validates/submits on submit.

Form(props: FormProps<T>): ReactElement
Go

Fieldcomponent

A <Field> wraps around a form control/input, to shows a small <label> above it.

Field({ title, description, message, children, ...props }: FieldProps): ReactElement
Go

FormFootercomponent

Show a form footer with a submit button and the form's error message.

FormFooter({ children, submit }: FormFooterProps): ReactElement
Go

Noticecomponent

Block-level status callout with an icon and message, used to highlight feedback.

Notice({
	children, //
	icon,
	...props
}: NoticeProps): void
Go

Noticescomponent

Render the global list of notices and subscribe to incoming "notice" events.

Notices(props: NoticesProps): ReactElement
Go

Pagecomponent

Wrap a single page (or screen) within an app, applying its meta and head tags.

Page({ children, ...meta }: PageProps): ReactElement
Go

HTMLcomponent

Render the full <html> document shell wrapping <head> and <body>.

HTML({ children, ...meta }: HTMLProps): ReactElement
Go

Headcomponent

Emit the current page's head metadata and sync browser history to its URL.

Head(): ReactElement
Go

FullscreenButtoncomponent

Button to toggle the surrounding <figure> element or <body> element in/out of fullscreen mode.

FullscreenButton({ target = "body, figure", ...props }): ReactElement | null
Go

RetryButtoncomponent

Button that retries the nearest <Catcher> error boundary when clicked.

RetryButton({ children = _RETRY_CHILDREN, ...props }: RetryButtonProps): ReactElement | null
Go

Clickablecomponent

Render either a <button>, an <a href="">, or a plain <span> based on whether an onClick or href prop is provided.

Clickable(props: StylableClickableProps): ReactElement
Go

Buttoncomponent

Render either a <button> or an <a href=""> styled as a button, based on whether an onClick or href prop is provided.

Button(props: ButtonProps): ReactElement
Go

Cellcomponent

Table cell.

Cell({ header = false, children, ...props }: CellProps): ReactElement
Go

Tablecomponent

Table block — rendered as <table>.

Table({ children, ...props }: TableProps): ReactElement
Go

VerticalTransitioncomponent

Transition that slides its children vertically — down when moving forward, up when moving back.

VerticalTransition(props: VerticalTransitionProps): ReactElement
Go

CollapseTransitioncomponent

Transition that collapses its children in and out by animating their size.

CollapseTransition(props: CollapseTransitionProps): ReactElement
Go

HorizontalTransitioncomponent

Transition that slides its children horizontally — right when moving forward, left when moving back.

HorizontalTransition(props: HorizontalTransitionProps): ReactElement
Go

FadeTransitioncomponent

Transition that fades its children in and out by animating their opacity.

FadeTransition(props: FadeTransitionProps): ReactElement
Go

Transitioncomponent

Wrap children in a React View Transition, applying the configured transition classes.

Transition({ children, default: d, forward = d, back = d, overlay = false }: TransitionProps): ReactElement
Go

Imagecomponent

Image block — renders an <img> with space and width variants applied.

Image({ src, alt, ...props }: ImageProps): ReactElement
Go

Rowcomponent

Flex container that arranges its children as a row by default.

Row({ as: Element = "div", children, ...props }: RowProps): ReactElement
Go

Labelcomponent

Label heading, a <h3> with a labelly appearance (UPPERCASE but with a smaller text size).

Label({ level = "3", children, ...props }: LabelProps): ReactElement
Go

Headingcomponent

Section heading — renders an <h2>.

Heading({ level = "2", children, ...props }: HeadingProps): ReactElement
Go

Blockcomponent

Plain <div> block with block-level spacing.

Block({ as: Element = "div", children, ...props }: BlockProps): ReactElement
Go

Cardcomponent

Cards are boxed areas for content to sit within.

Card({ as: Element = "article", children, href, onClick, title = "Open", ...props }: CardProps): ReactElement
Go

Panelcomponent

Full-width vertical region that paints the current surface colour. Use to break a page into stacked sections. Has zero block-space (Panels butt against each other); set its vertical breathing room with the padding variant (<Panel padding="large">, <Panel padding="xxlarge"> etc.).

Panel({ as: Element = "section", children, ...props }: PanelProps): ReactElement
Go

Definitionscomponent

Description list — a sequence of term/value pairs rendered as a <dl>.

Definitions({ children, ...props }: DefinitionsProps): ReactElement
Go

Titlecomponent

Page title — renders an <h1>.

Title({ level = "1", children, ...props }: TitleProps): ReactElement
Go

Columncomponent

Flex container that stacks its children as a column by default.

Column({ as: Element = "div", children, column = true, ...props }: ColumnProps): ReactElement
Go

Blockquotecomponent

Quoted block of text — rendered as <blockquote>.

Blockquote({ children, ...props }: BlockquoteProps): ReactElement
Go

Sectioncomponent

<section> block with section-level spacing.

Section({ as: Element = "section", children, ...variants }: SectionProps): ReactElement
Go

Headercomponent

<header> block with section-level spacing.

Header({ as: Element = "section", children, ...variants }: SectionProps): ReactElement
Go

Footercomponent

<footer> block with section-level spacing.

Footer({ as: Element = "section", children, ...variants }: SectionProps): ReactElement
Go

Articlecomponent

<article> block with section-level spacing.

Article({ as: Element = "article", children, ...variants }: SectionProps): ReactElement
Go

Figurecomponent

<figure> block with section-level spacing.

Figure({ as: Element = "figure", children, ...variants }: SectionProps): ReactElement
Go

PhysicalAddresscomponent

Show an optional AddressData object correctly on screen.

PhysicalAddress({ name, address }: PhysicalAddressProps): ReactElement
Go

EmailAddresscomponent

Show an optional email address string correctly on screen.

EmailAddress({ name, email }: EmailAddressProps): ReactElement
Go

Detailscomponent

A single collapsible panel within an Details, built on native <details> and <summary>

Details({ title, open = false, name, children, ...props }: DetailsProps): ReactElement
Go

Listcomponent

List block — wraps each child in an <li> and renders an <ul> or <ol>.

List({ children, ordered = false, ...props }: ListProps): ReactElement
Go

Captioncomponent

<figcaption> block — caption text for a <Figure>.

Caption({ children, ...props }: CaptionProps): ReactElement
Go

Preformattedcomponent

Preformatted block of text — rendered as <pre>.

Preformatted({ children, ...variants }: PreformattedProps): ReactElement
Go

Videocomponent

Video container element.

Video({ children, ...props }: VideoProps): ReactElement
Go

Prosecomponent

A section of longform text containing lots of <p> or <ul> style elements.

Prose({ children }: ProseProps): ReactElement
Go

Paragraphcomponent

Paragraph block of body text — rendered as <p>.

Paragraph({ children, ...props }: ParagraphProps): ReactElement
Go

Subheadingcomponent

Subsection heading — renders an <h3>.

Subheading({ level = "3", children, ...props }: SubheadingProps): ReactElement
Go

Scrollcomponent

Wrap children in a scrollable container with horizontal and/or vertical scrolling enabled.

Scroll({ children, ...props }: ScrollComponentProps): ReactElement
Go

SidebarLayoutcomponent

Layout with a fixed-width side column (typically navigation) next to a scrollable main content column.

SidebarLayout({ sidebar, children, right = false }: SidebarLayoutProps): ReactElement
Go

CenteredLayoutcomponent

Layout that centres its content with no header/footer and a narrow max-width.

CenteredLayout({ children, ...props }: CenteredLayoutProps): ReactElement
Go

TreeButtoncomponent

Small button linking to a specific tree element, resolved by reference string.

TreeButton({ name, children, small = true, plain = true, ...variants }: TreeButtonProps): ReactElement
Go

TreeLinkcomponent

Inline Code token linking to a specific tree element, resolved by reference string — the link-styled counterpart of TreeButton.

TreeLink({ name, children, ...props }: TreeLinkProps): ReactElement
Go

TreeMarkupcomponent

Render a markup string with inline code spans auto-linked to their documented tree elements.

TreeMarkup({ rules = TREE_MARKUP_RULES, ...props }: MarkupProps): ReactNode
Go

TreeCardcomponent

Card renderer for a generic tree-element (a directory or file) — a summary card showing the heading and description.

TreeCard({ path, name, title, description }: TreeElementProps): ReactNode
Go

TreeRoutercomponent

Resolve a URL path to a tree element and render it as a full page.

TreeRouter({ fallback, ...meta }: TreeRouterProps): ReactNode
Go

TreeBreadcrumbscomponent

Breadcrumb trail of links to a tree page's ancestors, separated by › arrow icons.

TreeBreadcrumbs({ tint = "70", left = true, wrap = true, ...props }: TreeBreadcrumbsProps): ReactElement | null
Go

TreePagecomponent

Page renderer for a generic tree-element (a directory or file).

TreePage({ title, name, description, content, children }: TreeElementProps): ReactNode
Go

TreeCardscomponent

Render a list of tree elements as a stack of cards.

TreeCards({ children }: TreeCardsProps): ReactNode
Go

TreeProvidercomponent

Provide a tree to descendants as a flattened lookup map (see flattenTree()).

TreeProvider({ tree, children }: { readonly tree: TreeElement; readonly children: ReactNode }): ReactNode
Go

TreeSidebarcomponent

Sidebar built from the surrounding tree, in three sections separated by dividers.

TreeSidebar({ children }: TreeSidebarProps): ReactNode
Go

TreeMenuItemcomponent

Default menu item renderer for any tree-* element.

TreeMenuItem({ path, name, title, children }: TreeElementProps): ReactNode
Go

TreeMenucomponent

Sidebar navigation menu built from the children of a root tree element.

TreeMenu({ tree }: TreeMenuProps): ReactNode
Go

TreeAppcomponent

Top-level app component for a tree-based documentation site.

TreeApp({ tree, routes, sidebar = <TreeSidebar />, ...meta }: TreeAppProps): ReactElement
Go

Appcomponent

Root component for an application, providing the top-level Meta context and global styles.

App({ children, ...meta }: AppProps): ReactElement
Go

Deletedcomponent

Deleted text — renders a <del> element to mark content removed from a document.

Deleted({ children, ...props }: DeletedProps): ReactElement
Go

Smallcomponent

Small print — renders a <small> element for side comments and fine print.

Small({ children, ...props }: SmallProps): ReactElement
Go

Linkcomponent

Inline link — delegates to <Clickable>, rendering an <a> (when href is set) or <button> (when onClick is set).

Link(props: LinkProps): ReactElement
Go

Markcomponent

Highlighted text — renders a <mark> element to call attention to a run of text.

Mark({ children, ...props }: MarkProps): ReactElement
Go

Strongcomponent

Strong importance — renders a <strong> element for text of strong importance (typically bold).

Strong({ children, ...props }: StrongProps): ReactElement
Go

Whencomponent

Relative time — shows a signed string like in 6d or 3w ago wrapped in a <time> element carrying the machine-readable date.

When(props: WhenProps): ReactElement
Go

Agocomponent

Elapsed time — shows an unsigned string like 6d or 3w for a past date wrapped in a <time> element carrying the machine-readable date.

Ago(props: AgoProps): ReactElement
Go

Untilcomponent

Remaining time — shows an unsigned string like 6d or 3w for a future date wrapped in a <time> element carrying the machine-readable date.

Until(props: UntilProps): ReactElement
Go

Superscriptcomponent

Superscript text — renders a <sup> element for typographically raised text (e.g. exponents, footnote markers).

Superscript({ children }: SuperscriptProps): ReactElement
Go

Subscriptcomponent

Subscript text — renders a <sub> element for typographically lowered text (e.g. chemical formulae).

Subscript({ children }: SubscriptProps): ReactElement
Go

Codecomponent

Inline code span — renders a <code> element.

Code({ children, plain, ...props }: CodeProps): ReactElement
Go

Emphasiscomponent

Emphasised text — renders an <em> element for stress emphasis (typically italic).

Emphasis({ children, ...props }: EmphasisProps): ReactElement
Go

Spancomponent

Styled inline text — renders a <span> carrying only the colour and typography variant classes, with no styling of its own.

Span({ children, ...props }: SpanProps): ReactElement
Go

Insertedcomponent

Inserted text — renders an <ins> element to mark content added to a document.

Inserted({ children, ...props }: InsertedProps): ReactElement
Go

DocumentationPropertiescomponent

Render a documented type's data members (properties, getters/setters) as a scrollable table — one row per property.

DocumentationProperties({ properties }: DocumentationPropertiesProps): ReactNode
Go

DocumentationThrowscomponent

Render a documented symbol's @throws entries as a scrollable table — one row per thrown type.

DocumentationThrows({ throws }: DocumentationThrowsProps): ReactNode
Go

DocumentationCardcomponent

Card renderer for a tree-documentation element — a compact summary card linking to the symbol's detail page.

DocumentationCard({
	path,
	title,
	name,
	kind,
	description,
	signatures,
	// Drop `class` so cards omit the "member of" relation — a member card almost always sits on its own class's page already.
	class: _memberOf,
	...props
}: DocumentationElementProps): ReactNode
Go

DocumentationButtonscomponent

Render a symbol's relational metadata as a <nav> column of labelled links.

DocumentationButtons({
	space = "paragraph",
	wrap = true,
	left = true,
	gap = "none",
	...props
}: DocumentationButtonsProps): ReactElement | null
Go

DocumentationParamscomponent

Render a documented symbol's parameters as a scrollable table — one row per parameter.

DocumentationParams({ params }: DocumentationParamsProps): ReactNode
Go

DocumentationTypecomponent

Render a documentation table's Type column — one linked token per union member, each stacked on its own line.

DocumentationType({ members }: DocumentationTypeProps): ReactNode
Go

DocumentationDescriptioncomponent

Render a documentation table row's description cell.

DocumentationDescription({ description, default: def, optional, readonly }: DocumentationDescriptionProps): ReactNode
Go

DocumentationSearchPagecomponent

Page listing every element in the system in one flat, searchable view.

DocumentationSearchPage(): ReactNode
Go

DocumentationKindcomponent

Colour-coded tag for a documented symbol's kind.

DocumentationKind({ kind = "unknown", ...props }: DocumentationKindProps): ReactElement
Go

DocumentationPagecomponent

Page renderer for a tree-documentation element — the full detail page for a documented symbol.

DocumentationPage({
	title,
	name,
	kind = "unknown",
	description,
	content,
	signatures,
	params,
	returns,
	throws,
	properties,
	types,
	examples,
	children,
	...props
}: DocumentationElementProps): ReactNode
Go

DocumentationSignaturescomponent

Render a documented symbol's signature(s) as monospace code blocks — one <Preformatted> per overload.

DocumentationSignatures({ signatures }: DocumentationSignaturesProps): ReactNode
Go

DocumentationReturnscomponent

Render a documented symbol's @returns entries as a scrollable table — one row per return type.

DocumentationReturns({ returns }: DocumentationReturnsProps): ReactNode
Go

DocumentationReferencescomponent

Render a type alias's referenced type names as a scrollable table — one row per referenced type.

DocumentationReferences({ types }: DocumentationReferencesProps): ReactNode
Go

Menucomponent

A <menu> list of <MenuItem> children.

Menu({ children, ...props }: MenuProps): ReactNode
Go

MenuItemcomponent

A <li> containing an <a> link, plus optional submenu content shown when this item is "proud".

MenuItem({ href, children, ...props }: MenuItemProps): ReactNode
Go

ArrayInputcomponent

Repeating input that edits an array of items, adding a SchemaInput row per item.

ArrayInput(props: ArrayInputProps<T>): ReactElement
Go

DataInputcomponent

Composite input that edits a data object by rendering a SchemaInput for each property schema.

DataInput(props: DataInputProps<T>): ReactElement
Go

ChoiceRadioInputscomponent

Output a list of <RadioInput> elements for each item in a set of ChoiceOptions in { key: title } format.

ChoiceRadioInputs(props: ChoiceRadioInputsProps<T>): ReactElement
Go

ButtonInputcomponent

Return either a <button> or an <a href=""> styled as an input, based on whether an onClick or href prop is provided.

ButtonInput({ title, placeholder, children = title, ...props }: ButtonInputProps): ReactElement
Go

SchemaInputcomponent

Show the appropriate input control for a schema, dispatching on the schema's concrete type.

SchemaInput(props: SchemaInputProps<T>): ReactElement
Go

DateSchemaInputcomponent

Show a DateInput for a DateSchema.

DateSchemaInput({ schema, value, ...props }: DateSchemaInputProps): ReactElement
Go

NumberSchemaInputcomponent

Show a NumberInput for a NumberSchema, formatting values with the schema's format().

NumberSchemaInput({ schema, value, ...props }: NumberSchemaInputProps): ReactElement
Go

ChoiceSchemaInputcomponent

Show a choice input for a ChoiceSchema — radio inputs for up to 8 options, otherwise a select.

ChoiceSchemaInput({ schema, value, ...props }: ChoiceSchemaInputProps): ReactElement
Go

BooleanSchemaInputcomponent

Show a CheckboxInput for a BooleanSchema.

BooleanSchemaInput({ schema, value, ...props }: BooleanSchemaInputProps): ReactElement
Go

StringSchemaInputcomponent

Show a TextInput for a StringSchema, sanitising and formatting values with the schema.

StringSchemaInput({ schema, value, ...props }: StringSchemaInputProps): ReactElement
Go

ArraySchemaInputcomponent

Show an ArrayInput for an ArraySchema.

ArraySchemaInput({ schema, value, ...props }: ArraySchemaInputProps): ReactElement
Go

DictionarySchemaInputcomponent

Show a DictionaryInput for a DictionarySchema.

DictionarySchemaInput({ schema, value, ...props }: DictionarySchemaInputProps): ReactElement
Go

DataSchemaInputcomponent

Show a DataInput for a nested DataSchema.

DataSchemaInput({ schema, value, ...props }: DataSchemaInputProps): ReactElement
Go

SchemaFieldcomponent

Show the appropriate input for a schema, wrapped in a <Field> with its label and message.

SchemaField({ schema, children, ...props }: SchemaFieldProps): ReactElement
Go

SelectInputcomponent

Dropdown input bound to a string value, rendered as a <select> of the provided options.

SelectInput(props: SelectProps<T>): ReactElement
Go

OutputInputcomponent

Show static read-only content styled as an input, falling back to placeholder when empty.

OutputInput({ title, placeholder, children = title, ...props }: OutputInputProps): ReactElement
Go

InputWrappercomponent

Wraps an input with support for absolutely-positioned data-slot icon elements on either side.

InputWrapper({ children }: ChildProps): ReactElement
Go

DictionaryInputcomponent

Repeating input that edits a dictionary, with an editable key and schema-validated value per entry.

DictionaryInput(props: DictionaryInputProps<T>): ReactElement
Go

Markupcomponent

Parse a markup string and render the resulting elements inline.

Markup({ children, ...options }: MarkupProps): ReactNode
Go

Loadingcomponent

Animated loading spinner shaped like a Heroicon — a faint track plus a rotating indicator arc.

Loading({ className }: { className?: string | undefined }): ReactElement
Go

Loadercomponent

Load a component.

Loader({ children, fallback = LOADING }: LoaderProps): ReactElement
Go

PageLoadercomponent

Load a page.

PageLoader({ children, fallback = <CenteredLayout>{LOADING}</CenteredLayout> }: LoaderProps): ReactElement
Go

Catchercomponent

React error boundary that renders a fallback component when any descendant throws.

new Catcher()
Go

ErrorNoticecomponent

Render a caught error as an inline <Notice> with a retry button.

ErrorNotice({ reason }: ErrorProps): ReactElement
Go

PageCatchercomponent

Error boundary for a whole page that renders a full <ErrorPage> fallback on error.

PageCatcher({ children }: ChildProps): ReactElement
Go

ErrorPagecomponent

Render a caught error as a full-page <Page> with a centered <ErrorNotice>.

ErrorPage({ reason }: ErrorProps): ReactElement
Go

Iconcomponent

Render the icon for a given status, coloured to match.

Icon(props: IconProps): ReactElement
Go

Tagcomponent

Small inline label used to annotate other content.

Tag(props: TagProps): ReactElement

Functions

Go

requireNavigation()function

Read the current NavigationStore from context, throwing if used outside <Navigation>.

requireNavigation(): NavigationStore
Go

requireDialogs()function

Read the current DialogsStore from the nearest <DialogsContext>.

requireDialogs(): DialogsStore
Go

FormNotify()function

Publish the current form's "main" (unnamed) message as a global success notice whenever it changes.

FormNotify(): void
Go

requireForm()function

Hook that returns the current form's FormStore from context.

requireForm(caller?: AnyCaller): FormStore<T>
Go

useField()function

Hook that returns the input props for a single named field of a form.

useField(name: string, form?: FormStore<{ [name: string]: T }>): SchemaInputProps<Schema<T>, I>
Go

callNotifiedForm()function

Run a form submit callback and publish success/error notices based on its return or thrown value.

callNotifiedForm(value: T, store: FormStore<T>, form: HTMLFormElement, callback?: NoticeCallback<[T, ...A]>, ...args: A): boolean | Promise<boolean>
Go

awaitNotifiedForm()function

Await a pending submit result and publish a success or error notice to a form once it settles.

awaitNotifiedForm(store: FormStore<T>, form: HTMLFormElement, pending: PromiseLike<ReactNode | undefined | void>): Promise<boolean>
Go

notifyThrownForm()function

Notify the user about a value thrown during submit, storing string errors as form field messages.

notifyThrownForm(store: FormStore<T>, form: HTMLFormElement, thrown: unknown): false
Go

Message()function

Status-coloured paragraph used for inline feedback messages.

Message({ children, ...props }: MessageProps): void
Go

SubmitButton()function

Submit button for a form that disables itself and shows a spinner while the form is busy.

SubmitButton({
	children = _SUBMIT_CHILDREN,
	strong = true,
	color = "primary",
	full = true,
	...props
}: SubmitButtonProps): ReactElement
Go

LinkClickable()function

Render an <a href=""> element, resolving its href against the current page URL and marking it active when it matches.

LinkClickable({
	href,
	disabled = !href,
	target,
	download,
	title,
	children = "Go",
	className,
}: StylableClickableProps): ReactElement
Go

ButtonClickable()function

Render a <button> element that runs its onClick handler through a BusyStore and shows a loading spinner while busy.

ButtonClickable({
	onClick,
	disabled = !onClick,
	title,
	children = "Click",
	className,
}: StylableClickableProps): ReactElement
Go

SpanClickable()function

Render a non-interactive <span> element, used as the fallback when neither href nor onClick is provided.

SpanClickable({
	title,
	children = "Click", //
	className,
}: StylableClickableProps): ReactElement
Go

getButtonClass()function

Get the full combined className string for a button from its styling variants.

getButtonClass(variants: ButtonVariants): string
Go

setTransitionType()function

Type-safe passthrough for React's addTransitionType() that checks type is one of our known view-transition types.

setTransitionType(type: TransitionType): void
Go

Address()function

Show any kind of contact data, rendered as an <address>.

Address({ children, ...props }: AddressProps): void
Go

Divider()function

Horizontal rule separating blocks of content — rendered as <hr>.

Divider(props: DividerProps): void
Go

useRefresh()function

Re-render a component automatically on a fixed interval.

useRefresh(interval: number): void
Go

eventPreventDefault()function

Call event.preventDefault() on an event.

eventPreventDefault(e: Pick<Event, "preventDefault">): void
Go

focusFirstFocusable()function

Focus on the first focusable element inside an element.

focusFirstFocusable(el: Nullish<Element>): void
Go

loopFocus()function

Loop focus inside an element so it can't escape — refocus the first focusable child when focus moves out.

loopFocus(element: Nullish<Element>, nextTarget: Nullish<Element>): void
Go

eventLoopFocus()function

Loop focus inside an element in response to a blur event — a ready-made onBlur handler that traps focus.

eventLoopFocus({ currentTarget, relatedTarget }: { currentTarget: Element; relatedTarget: Element | null }): void
Go

useDebouncedState()function

Hold a piece of state that only updates after a debounce delay since the last set.

useDebouncedState(initial: T, delay = 500): [T, (v: T) => void]
Go

useDebouncedCallback()function

Wrap a callback so it only runs after a debounce delay since the last invocation.

useDebouncedCallback(callback: (() => void) | undefined, delay = 500): () => void
Go

requireContext()function

Use the value of a React Context, or throw RequiredError if the context was unset.

requireContext(context: Context<T | null>, caller?: AnyCaller): T
requireContext(context: Context<T | undefined>, caller?: AnyCaller): T
requireContext(context: Context<T>, caller?: AnyCaller): T
Go

joinMetaCSP()function

Turn a deconstructed MetaCSP into a Content-Security-Policy string.

joinMetaCSP(csp: Nullish<MetaCSP>): string | undefined
Go

joinTitles()function

Join several page or site titles together with - , skipping empty values.

joinTitles(...titles: (string | undefined)[]): string
Go

mergeMeta()function

Merge a PossibleMeta onto an existing Meta, resolving URLs and assets in the process.

mergeMeta(meta1: Meta, meta2: PossibleMeta, caller: AnyCaller = mergeMeta): Meta
Go

createMeta()function

Create a fully-formed Meta from a PossibleMeta.

createMeta(meta: PossibleMeta, caller: AnyCaller = createMeta): Meta
Go

mergeMetaURL()function

Merge a new metadata URL onto the current one, resolving it and applying params.

mergeMetaURL(base: ImmutableURL | undefined, current: ImmutableURL | undefined, next: PossibleURL | undefined, params: PossibleURIParams | undefined, caller: AnyCaller = mergeMetaURL): ImmutableURL | undefined
Go

mergeMetaTags()function

Merge two sets of meta <meta> tags, with next taking precedence over current.

mergeMetaTags(current: MetaTags | undefined, next: MetaTags | undefined): MetaTags | undefined
Go

mergeMetaLinks()function

Merge two meta <link> lists, resolving the new hrefs to absolute URIs.

mergeMetaLinks(current: MetaLinks | undefined, next: PossibleMetaLinks | undefined, url: ImmutableURL | undefined, root: ImmutableURL | undefined, caller: AnyCaller = mergeMetaLinks): MetaLinks | undefined
Go

mergeMetaAssets()function

Merge two meta asset lists (modules, scripts, stylesheets), resolving the new hrefs to absolute URIs.

mergeMetaAssets(current: MetaAssets | undefined, next: PossibleMetaAssets | undefined, url: ImmutableURL | undefined, root: ImmutableURL | undefined, caller: AnyCaller = mergeMetaAssets): MetaAssets | undefined
Go

useScrollIntersect()function

Fire callbacks when a referenced element enters or leaves the visible scrolling area.

useScrollIntersect(onEnter?: Nullish<Callback>, onLeave?: Nullish<Callback>): RefObject<T | null>
Go

getMostVisibleObserverEntry()function

Find the most-visible entry in a list of IntersectionObserverEntry objects.

getMostVisibleObserverEntry(entries: IntersectionObserverEntry[]): IntersectionObserverEntry | undefined
Go

getClass()function

Parse a list of possible className strings and join them into a single string.

getClass(...classes: unknown[]): string
Go

getModuleClass()function

Parse a list of possible className strings, match them in a CSSModule dictionary, and join them into a single string.

getModuleClass(module: CSSModule | string, ...classes: unknown[]): string | undefined
Go

notify()function

Notify the user with a message by dispatching a notice event.

notify(message: ReactNode, status?: Status | undefined, el: EventTarget = window): void
Go

notifySuccess()function

Notify the user with a success message by dispatching a notice event with "success" status.

notifySuccess(message: ReactNode, el?: EventTarget): void
Go

notifyError()function

Notify the user with an error message by dispatching a notice event with "error" status.

notifyError(message: ReactNode, el?: EventTarget): void
Go

notifyThrown()function

Look at a thrown value, extract a viable message from it, and dispatch an error notice.

notifyThrown(thrown: unknown, el?: EventTarget): void
Go

subscribeNotices()function

Subscribe to notice events on an element and call a callback when they happen.

subscribeNotices(callback: (message: ReactNode, status?: Status | undefined) => void, el: EventTarget = window): () => void
Go

callNotified()function

Run a callback and dispatch a success or error notice to the window based on its return or throw.

callNotified(callback: NoticeCallback<A>, ...args: A): boolean | Promise<boolean>
Go

awaitNotified()function

Await a pending value and dispatch a success or error notice to the window based on its resolution.

awaitNotified(pending: PromiseLike<ReactNode | undefined | void>): Promise<boolean>
Go

callNotifiedElement()function

Run a callback and dispatch a success or error notice to a specific element based on its return or throw.

callNotifiedElement(el: EventTarget | undefined, callback: NoticeCallback<A>, ...args: A): boolean | Promise<boolean>
Go

awaitNotifiedElement()function

Await a pending value and dispatch a success or error notice to a specific element based on its resolution.

awaitNotifiedElement(el: EventTarget | undefined, pending: PromiseLike<ReactNode | undefined | void>): Promise<boolean>
Go

getTypographyClass()function

Get the typography class for a component from its typographic variant props.

getTypographyClass({ tint, weight, font, case: caseValue, size, ...props }: TypographyVariants): string
Go

getShadowClass()function

Get the drop-shadow class for a component from its shadow variant prop.

getShadowClass({ shadow }: ShadowVariants): string | undefined
Go

getBlockClass()function

Get the combined className string for a block from its styling variants.

getBlockClass(variants: BlockVariants): string
Go

getWidthClass()function

Get the width class for a component from its width / grow variant props.

getWidthClass({ width, grow }: WidthVariants): string | undefined
Go

getStrokeClass()function

Get the border-thickness class for a component from its stroke variant prop.

getStrokeClass({ stroke }: StrokeVariants): string | undefined
Go

getIndentClass()function

Get the inline-padding ("indent") class for a component from its indent variant prop.

getIndentClass({ indent }: IndentVariants): string | undefined
Go

getScrollClass()function

Get the scroll class for a component from its horizontal / vertical variant props.

getScrollClass({ horizontal, vertical }: ScrollVariants): string
Go

getPaddingClass()function

Get the block-padding class for a component from its padding variant prop.

getPaddingClass({ padding }: PaddingVariants): string | undefined
Go

getColorClass()function

CSS class that applies color tinting to an element.

getColorClass({ color }: ColorVariants): string | undefined
Go

getRadiusClass()function

Get the corner-radius class for a component from its radius variant prop.

getRadiusClass({ radius }: RadiusVariants): string | undefined
Go

getFlexClass()function

Get the flex layout class for a component from its flex variant props.

getFlexClass(variants: FlexVariants): string
Go

getGapClass()function

Get the gap class for a component from its gap variant prop.

getGapClass({ gap }: GapVariants): string | undefined
Go

getStatusClass()function

Get the status tint class for a component from its status variant prop.

getStatusClass({ status }: StatusVariants): string | undefined
Go

getSpaceClass()function

Get the block spacing class for a component from its space="" variant prop.

getSpaceClass({ space }: SpaceVariants): string | undefined
Go

getDurationClass()function

Get the transition-duration class for a component from its duration variant prop.

getDurationClass({ duration }: DurationVariants): string | undefined
Go

useTreeMap()function

Use the flattened tree lookup map from context.

useTreeMap(): ReadonlyMap<string, TreeElement>
Go

getTreeElement()function

Resolve a reference string to its tree element — by exact key first, then by a normalised key with the prose display decorations stripped.

getTreeElement(map: ReadonlyMap<string, TreeElement>, ref: string): TreeElement | undefined
Go

matchMenuElement()function

Match an element that should appear in the sidebar menu.

matchMenuElement(element: Element): boolean
Go

DocumentationApp()function

Documentation app.

DocumentationApp({
	tree,
	routes = {
		"/search": DocumentationSearchPage,
	},
	sidebar = (
		<TreeSidebar>
			<Menu>
				<MenuItem href="/search">Search</MenuItem>
			</Menu>
		</TreeSidebar>): void
Go

splitType()function

Split a type expression on | into its individual union members.

splitType(type: string): { readonly members: readonly string[]; readonly optional: boolean }
Go

getDocumentationKindColor()function

Get the raw colour variant for a documented symbol's kind, or undefined for an unknown kind.

getDocumentationKindColor(kind: string): ColorVariant | undefined
Go

isSchemaRequired()function

Whether a schema is required, i.e. not wrapped in an OptionalSchema or NullableSchema.

isSchemaRequired(schema: Schema): boolean
Go

CheckboxInput()function

Checkbox input bound to a boolean value, rendered as a labelled <input type="checkbox">.

CheckboxInput({
	name,
	title,
	placeholder = title || "Yes",
	required = false,
	disabled = false,
	message = "",
	value = false,
	onValue,
	children = placeholder,
	...props
}: CheckboxProps): ReactElement
Go

QueryInput()function

Combo box that queries a list of items and lets the user pick one from a popover.

QueryInput({
	empty = "No results",
	value,
	onValue,
	onQuery,
	formatter = formatValue,
	...props
}: QueryInputProps<I, O>): ReactElement
Go

ButtonPopover()function

A button that, when clicked, shows a popover next to it when clicked or focused.

ButtonPopover({
	children: [buttonChildren, ...popoverChildren], //
	...props
}: ButtonPopoverProps): ReactElement
Go

Popover()function

Trigger element that reveals a floating popover panel beside it when active or focused.

Popover({
	children: [trigger, ...popover], //
	onClose,
	open = popover.flat().some(isTruthy),
}: PopoverProps): ReactElement
Go

NumberInput()function

Numeric input bound to a number value, parsing typed text and reformatting it on blur.

NumberInput({
	name,
	title = "",
	placeholder = title, // Placeholder must be defined or `:placeholder-shown` CSS rules won't show.
	required = false,
	disabled = false,
	message = "",
	value,
	onValue,
	// min = Number.NEGATIVE_INFINITY,
	// max = Number.POSITIVE_INFINITY,
	formatter = formatNumber,
	...variants
}: NumberInputProps): ReactElement
Go

getInputClass()function

Build the shared base className for a form input from its styling variants — the base input class plus any InputVariants.

getInputClass(props: InputVariants): string
Go

FileInput()function

File picker input that emits the selected File through onValue.

FileInput({
	name,
	title,
	placeholder = title,
	required = false,
	disabled = false,
	message,
	// value,
	onValue,
	types = {},
	...variants
}: FileInputProps): ReactElement
Go

DateInput()function

Date, time, or datetime input that accepts a PossibleDate and emits an ISO string value.

DateInput({
	name,
	title = "",
	placeholder = title, // Placeholder must be defined or `:placeholder-shown` CSS rules won't show.
	required = false,
	disabled = false,
	message = "",
	value,
	onValue,
	min,
	max,
	input = "date",
	step,
	...variants
}: DateInputProps): ReactElement
Go

RadioInput()function

Single <input type="radio"> wrapped in a <label> styled as an <Input>.

RadioInput({
	name,
	title,
	placeholder = title || "Choose",
	required = false,
	disabled = false,
	message = "",
	value = false,
	onValue,
	children = placeholder,
	...props
}: RadioInputProps): ReactElement
Go

ButtonInputPopover()function

An input button that, when clicked, shows a popover next to it when clicked or focused.

ButtonInputPopover({
	children: [buttonChildren, ...popoverChildren], //
	...props
}: ButtonInputPopoverProps): ReactElement
Go

ArrayRadioInputs()function

Output a list of <RadioInput> elements for each item in an array.

ArrayRadioInputs({
	value,
	onValue,
	required = false,
	items,
	formatter = formatValue,
	...props
}: ArrayRadioInputsProps<T>): ReactElement
Go

TextInput()function

Text input bound to a string value, rendered as an <input> or a <textarea> when rows > 1.

TextInput({
	name,
	title = "",
	placeholder = title, // Placeholder must be defined or `:placeholder-shown` CSS rules won't show.
	required = false,
	disabled = false,
	message = "",
	value,
	onValue,
	input = "text",
	min = 0,
	max = Number.POSITIVE_INFINITY,
	rows = 1,
	formatter = PASSTHROUGH,
	...variants
}: TextInputProps): ReactElement
Go

requireMeta()function

Read the current Meta context, optionally merging in additional meta data.

requireMeta(meta?: PossibleMeta): Meta
Go

requireMetaURL()function

Read the current Meta context and derive URL helpers (path and params) from its url.

requireMetaURL(meta?: PossibleMeta, caller: AnyCaller = requireMetaURL): MetaURL
Go

createMapper()function

Create a [Mapping, Mapper] pair of components backed by their own private React context.

createMapper(defaults: Mapping = {}): [Mapping: FunctionComponent<MappingProps>, Mapper: FunctionComponent<MapperProps>]
Go

getTagClass()function

Build the combined className string for a <Tag> from its styling variants.

getTagClass(variants: TagVariants): void

Classes

Go

NavigationStoreclass

Store holding the current navigation URL and driving browser history.

new NavigationStore(url: PossibleURL = typeof window === "undefined" ? "/" : window.location.href, base?: PossibleURL)
Go

FormStoreclass

Reactive store holding the current (possibly partial and invalid) value of a form, plus its field messages.

new FormStore<T>(schema: DataSchema<T>, partialData: Partial<T> = {}, messages?: ImmutableDictionary<string> | string | undefined)
Go

NoticeStoreclass

Store holding a single notice's content and status, owned by a NoticesStore.

new NoticeStore<S>(notices: NoticesStore<S>, children?: ReactNode | null, status?: S | undefined)

Interfaces

Go

RouteCachePropsinterface

Props for <RouteCache> — the maxCached size and the content children to keep alive per URL.

{
	readonly maxCached?: number | undefined;
	readonly children: ReactNode;
}
Go

NavigationPropsinterface

Props for <Navigation> — initial Meta (url/base) plus optional children.

{}
Go

RouterPropsinterface

Props for <Router> — the routes to match against plus an optional fallback.

{
	readonly routes: Routes;
	readonly fallback?: ReactElement | undefined | null;
}
Go

DialogPropsinterface

Props for <Dialog> — optional children content and an onClose callback.

{
	onClose?: Callback;
}
Go

DialogCloseButtonPropsinterface

Props for <DialogCloseButton> — button styling variants and optional children to override the X icon.

{}
Go

DialogsContextPropsinterface

Props for <DialogsContext> — the children subtree the dialogs store is provided to.

{}
Go

DialogsPropsinterface

Props for <Dialogs> — takes no props (branded empty interface).

{
	readonly [_componentProps]?: never;
}
Go

FormInputPropsinterface

Props for FormInput, a bare SchemaInput bound to a named form field.

{}
Go

ProgressPropsinterface

Props for Progress, a continuous horizontal progress bar.

{
	value?: Nullish<number>;
	min?: number;
	max?: number;
}
Go

FormPropsinterface

Props for Form, the schema-driven form wrapper component.

{
	schema: DataSchema<T>;
	data?: PartialData<T> | undefined;
	submit?: ReactNode | undefined;
	onSubmit?: FormCallback<T> | undefined;
	messages?: ImmutableDictionary<string> | string | undefined;
}
Go

FieldPropsinterface

Props for Field, a labelled wrapper around a form control.

{
	title?: ReactNode | undefined;
	description?: ReactNode | undefined;
	message?: ReactNode | undefined;
	required?: boolean | undefined;
}
Go

FormFooterPropsinterface

Props for FormFooter, the submit-button-and-message footer for a form.

{
	submit?: ReactNode | undefined;
}
Go

NoticePropsinterface

Props for <Notice> — flex/colour/status styling variants, optional children, and an optional icon.

{
	icon?: ReactElement | false | undefined;
}
Go

MessagePropsinterface

Props for <Message> — paragraph props plus colour and status styling variants.

{}
Go

NoticesPropsinterface

Props for <Notices> — flex styling variants for the notices container.

{}
Go

PagePropsinterface

Props for <Page> — per-page Meta (title, description, etc.) plus the page children.

{}
Go

HTMLPropsinterface

Props for <HTML> — initial Meta (language/root/app) plus the page children.

{}
Go

ClickablePropsinterface

Props for a thing that can be clicked — either has a string href link or an onClick callback handler.

{
	disabled?: boolean | undefined;
	href?: ImmutableURI | Path | URIString | undefined;
	onClick?: ClickableCallback | undefined;
	target?: string | undefined;
	download?: string | undefined;
	title?: string | undefined;
}
Go

StylableClickablePropsinterface

Props for a clickable that also accepts a className for styling.

{
	className?: string | undefined;
}
Go

ButtonVariantsinterface

Styling variants for a Button, combining flex, color, status, and typography options with button-specific toggles.

{
	strong?: boolean | undefined;
	plain?: boolean | undefined;
	outline?: boolean | undefined;
	small?: boolean | undefined;
	full?: boolean | undefined;
}
Go

CellPropsinterface

Props for Cell — width and typography variants plus children.

{
	header?: boolean | undefined;
}
Go

TablePropsinterface

Props for Table — colour, space, typography, and width variants plus children.

{}
Go

VerticalTransitionPropsinterface

Props for the VerticalTransition component — the shared transition variant props.

{}
Go

CollapseTransitionPropsinterface

Props for the CollapseTransition component — the shared transition variant props.

{}
Go

HorizontalTransitionPropsinterface

Props for the HorizontalTransition component — the shared transition variant props.

{}
Go

FadeTransitionPropsinterface

Props for the FadeTransition component — the shared transition variant props.

{}
Go

TransitionVariantsinterface

Variant props shared by every transition component.

{
	overlay?: boolean | undefined;
}
Go

TransitionPropsinterface

React props for <Transition> component.

{
	default?: string | undefined;
	forward?: string | undefined;
	back?: string | undefined;
}
Go

ImagePropsinterface

Props for Image — an src, optional alt text, plus space and width variants.

{
	src: string;
	alt?: string;
}
Go

HeadingPropsinterface

Props shared by <Title>, Heading, and <Subheading> — colour, space, and typography variants plus a heading-level override.

{
	level?: "1" | "2" | "3" | "4" | "5" | "6" | 1 | 2 | 3 | 4 | 5 | 6;
}
Go

BlockPropsinterface

Props for Block — colour, space, typography, and width variants plus an optional as element override.

{
	as?: BlockElement | undefined;
}
Go

CardPropsinterface

Props for Card — combines ClickableProps (for navigable cards) with colour, status, padding, space, typography, width, and shadow variants.

{
	as?: BlockElement | undefined;
}
Go

PanelPropsinterface

Props for Panel — colour, status, and typography variants plus optional children.

{
	as?: BlockElement | undefined;
}
Go

DefinitionsPropsinterface

Props for Definitions — colour, gap, space, and typography variants plus optional children.

{}
Go

BlockquotePropsinterface

Props for Blockquote — colour, space, and typography variants plus optional children.

{}
Go

SectionPropsinterface

Props for Section and its semantic siblings — colour, space, typography, and width variants plus an optional as element override.

{
	as?: BlockElement | undefined;
}
Go

AddressPropsinterface

Props for Address — colour, space, and typography variants plus required children.

{}
Go

PhysicalAddressPropsinterface

Props for PhysicalAddress — an optional name and a nullable AddressData object.

{
	name?: Nullish<string>;
	address: Nullish<AddressData>;
}
Go

EmailAddressPropsinterface

Props for EmailAddress — an optional name and a nullable email string.

{
	name?: Nullish<string>;
	email: Nullish<string>;
}
Go

DetailsPropsinterface

Props for DetailsItem — a single collapsible disclosure.

{
	title: ReactNode;
	open?: boolean | undefined;
	name?: string | undefined;
	children: ReactNode;
}
Go

ListPropsinterface

Props for List — colour, gap, space, and typography variants plus its list items and an ordered toggle.

{
	readonly children: ImmutableArray<ReactNode>;
	readonly ordered?: boolean | undefined;
}
Go

CaptionPropsinterface

Props for Caption — colour, space, and typography variants plus optional children.

{}
Go

PreformattedPropsinterface

Props for Preformatted — space, colour, typography, width, and padding variants plus a wrap toggle.

{
	wrap?: boolean | undefined;
}
Go

Metainterface

Combined meta data for a website page — title, URLs, description, CSP, tags, links, and assets.

{
	readonly root?: ImmutableURL | undefined;
	readonly url?: ImmutableURL | undefined;
	readonly app?: string | undefined;
	readonly title?: string | undefined;
	readonly description?: string | undefined;
	readonly image?: string | undefined;
	readonly language?: string | undefined;
	readonly csp?: MetaCSP | undefined;
	readonly tags?: MetaTags | undefined;
	readonly links?: MetaLinks | undefined;
	readonly modules?: MetaAssets | undefined;
	readonly scripts?: MetaAssets | undefined;
	readonly stylesheets?: MetaAssets | undefined;
}
Go

PossibleMetainterface

Input metadata that can be parsed and converted to a fully-resolved Meta.

{
	readonly root?: PossibleURL | undefined;
	readonly url?: PossibleURI | undefined;
	readonly params?: PossibleURIParams | undefined;
	readonly links?: PossibleMetaLinks | undefined;
	readonly modules?: PossibleMetaAssets | undefined;
	readonly scripts?: PossibleMetaAssets | undefined;
	readonly stylesheets?: PossibleMetaAssets | undefined;
}
Go

ChildPropsinterface

Props for a component that requires children.

{
	readonly children: ReactNode;
}
Go

OptionalChildPropsinterface

Props for a component that optionally accepts children.

{
	readonly children?: ReactNode | undefined;
}
Go

Variantsinterface

Dictionary of boolean variant flags whose true-valued keys become class names.

{
	readonly [key: string]: boolean;
}
Go

TypographyVariantsinterface

Typographic variant props — colour, font-family, weight, case, size, tint, alignment, and wrap, applied via getTypographyClass()

{
	size?: SizeVariant | undefined;
	tint?: TintVariant | undefined;
	font?: FontVariant | undefined;
	case?: CaseVariant | undefined;
	weight?: WeightVariant | undefined;
	left?: boolean | undefined;
	center?: boolean | undefined;
	right?: boolean | undefined;
	wrap?: boolean | undefined;
	nowrap?: boolean | undefined;
}
Go

ShadowVariantsinterface

Variant props for the drop shadow of an element, e.g. shadow="large".

{
	shadow?: ShadowVariant | undefined;
}
Go

WidthVariantsinterface

Variant props that set (or unconstrain) a component's width, e.g. width="narrow" or width="12x".

{
	width?: WidthVariant | undefined;
	grow?: boolean | undefined;
}
Go

StrokeVariantsinterface

Variant props for the border thickness of a component, e.g. stroke="thick".

{
	stroke?: StrokeVariant | undefined;
}
Go

IndentVariantsinterface

Variant props for the inline-padding ("indent", left + right) of a component, e.g. indent="normal".

{
	indent?: IndentVariant | undefined;
}
Go

ScrollVariantsinterface

Variant props selecting which scroll axes are enabled on an element.

{
	vertical?: boolean | undefined;
	horizontal?: boolean | undefined;
}
Go

ScrollComponentPropsinterface

Props for the Scroll component — children plus scroll-axis variants.

{}
Go

PaddingVariantsinterface

Variant props for the block-padding (top + bottom) of a component, e.g. padding="large".

{
	padding?: SpaceValue | undefined;
}
Go

ColorVariantsinterface

Variant props for colouring an element, e.g. color="purple".

{
	color?: ColorVariant | undefined;
}
Go

RadiusVariantsinterface

Variant props for the corner radius of an element, e.g. radius="large".

{
	radius?: RadiusVariant | undefined;
}
Go

FlexVariantsinterface

Variant props for flex layout — opt-in modifiers any component can mix in via getFlexClass().

{
	wrap?: boolean | undefined;
	nowrap?: boolean | undefined;
	column?: boolean | undefined;
	reverse?: boolean | undefined;
	stretch?: boolean | undefined;
	between?: boolean | undefined;
	around?: boolean | undefined;
	left?: boolean | undefined;
	center?: boolean | undefined;
	right?: boolean | undefined;
	top?: boolean | undefined;
	middle?: boolean | undefined;
	bottom?: boolean | undefined;
	baseline?: boolean | undefined;
}
Go

GapVariantsinterface

Variant props for the gap between a component's children, e.g. gap="large".

{
	gap?: SpaceValue | undefined;
}
Go

StatusVariantsinterface

Variant props for the semantic status of an element, e.g. status="success".

{
	status?: Status | undefined;
}
Go

SpaceVariantsinterface

Variants to control block spacing on components, e.g. space="large".

{
	space?: SpaceValue | undefined;
}
Go

DurationVariantsinterface

Variant props for the transition duration of an element, e.g. duration="fast".

{
	duration?: DurationValue | undefined;
}
Go

SidebarLayoutPropsinterface

Props for <SidebarLayout> — the sidebar column content, main children, and a right placement flag.

{
	sidebar: ReactNode;
	right?: boolean | undefined;
}
Go

CenteredLayoutPropsinterface

Props for <CenteredLayout> — optional children plus width (of the centred column) and padding / indent (block / inline padding of the scroll area) variants.

{}
Go

TreeButtonPropsinterface

Props for the TreeButton component — the element reference plus button variants.

{
	readonly name: string;
	readonly children?: ReactNode | undefined;
}
Go

TreeLinkPropsinterface

Props for the TreeLink component — the element reference plus an optional label.

{
	readonly name: string;
}
Go

TreeRouterPropsinterface

Props for the TreeRouter component — the tree to route plus an optional fallback and app meta.

{
	readonly fallback?: ReactElement | undefined | null;
}
Go

TreeBreadcrumbsPropsinterface

Props for the TreeBreadcrumbs component — typography, space, and flex variant props.

{}
Go

TreeCardsPropsinterface

Props for the TreeCards component — the tree elements to render as cards.

{
	readonly children?: TreeElements;
}
Go

TreeMenuPropsinterface

Props for the TreeMenu component — the root tree element plus its URL path.

{
	readonly tree: TreeElement;
}
Go

TreeAppPropsinterface

Props for the TreeApp component — the tree to render plus optional extra routes and app meta.

{
	tree: TreeElement;
	sidebar?: ReactElement | undefined;
	routes?: Routes | undefined;
}
Go

LinkPropsinterface

Props for Link — ClickableProps (href for navigation or onClick for actions) plus colour and typography variants.

{}
Go

WhenPropsinterface

Props for When, Ago, and Until — a target date plus an optional current reference date and full toggle.

{
	target: PossibleDate | undefined;
	current?: PossibleDate | undefined;
	full?: boolean | undefined;
}
Go

CodePropsinterface

Props for Code — colour and typography variants, optional children, plus a plain toggle.

{
	plain?: boolean | undefined;
}
Go

DocumentationPropertiesPropsinterface

Props for DocumentationProperties — the data members of a class/interface/object-literal type to render, one row each.

{
	readonly properties?: ImmutableArray<DocumentationParam> | undefined;
}
Go

DocumentationThrowsPropsinterface

Props for DocumentationThrows — the @throws entries to render, one row each.

{
	readonly throws?: ImmutableArray<DocumentationThrow> | undefined;
}
Go

DocumentationButtonsPropsinterface

Props for DocumentationButtons — the relational metadata of a documented symbol (class, extends, implements), plus block-space and flex overrides.

{
	readonly class?: string | undefined;
	readonly extends?: string | undefined;
	readonly implements?: ImmutableArray<string> | undefined;
}
Go

DocumentationParamsPropsinterface

Props for DocumentationParams — the parameter list to render, one row per parameter.

{
	readonly params?: ImmutableArray<DocumentationParam> | undefined;
}
Go

DocumentationTypePropsinterface

Props for DocumentationType — the union members to render (see splitType()).

{
	readonly members: readonly string[];
}
Go

DocumentationDescriptionPropsinterface

Props for DocumentationDescription — a description cell's resolved text, plus an optional default/optionality note.

{
	readonly description?: string | undefined;
	readonly default?: string | undefined;
	readonly optional?: boolean | undefined;
	readonly readonly?: boolean | undefined;
}
Go

DocumentationKindPropsinterface

Props for DocumentationKind — a TagProps plus the documented symbol's kind.

{
	readonly kind: string;
}
Go

DocumentationSignaturesPropsinterface

Props for DocumentationSignatures — the type signatures to render, one block per overload.

{
	readonly signatures?: ImmutableArray<string> | undefined;
}
Go

DocumentationReturnsPropsinterface

Props for DocumentationReturns — the @returns entries to render, one row each.

{
	readonly returns?: ImmutableArray<DocumentationReturn> | undefined;
}
Go

DocumentationReferencesPropsinterface

Props for DocumentationReferences — the referenced type names to render, one row each.

{
	readonly types?: ImmutableArray<string> | undefined;
}
Go

MenuItemPropsinterface

Props for <MenuItem> — <Clickable> props plus children whose first node is the label and the rest the submenu.

{
	readonly children: ReactNode | readonly [ReactNode, ...ReactNode[]];
}
Go

ArrayInputPropsinterface

Props for ArrayInput, a repeating input that edits an array of schema-validated items.

{
	one?: string;
	many?: string;
	min?: number | undefined;
	max?: number | undefined;
	items: Schema<T>;
}
Go

DataInputPropsinterface

Props for DataInput, a composite input that edits an object of schema-validated sub-fields.

{
	props: Schemas<T>;
}
Go

ChoiceRadioInputsPropsinterface

Props for ChoiceRadioInputs, which renders a radio for each entry in a ChoiceOptions set.

{
	options: ChoiceOptions<T>;
	wrap?: boolean;
	column?: boolean;
}
Go

ButtonInputPropsinterface

Props for ButtonInput, a clickable element styled to match form inputs.

{}
Go

SelectPropsinterface

Props for SelectInput, a dropdown <select> bound to a string value.

{
	options: ChoiceOptions<T>;
}
Go

QueryInputPropsinterface

Props for QueryInput, a combo box that queries items of type O from an input of type I.

{
	schema: Schema<I>;
	onQuery: PayloadFetchCallback<I, ImmutableArray<O> | undefined>;
	formatter?: ((value: O) => string) | undefined;
	empty?: ReactNode | undefined;
}
Go

ButtonPopoverPropsinterface

Props for ButtonPopover, a button that toggles an adjacent popover.

{
	children: PopoverChildren;
}
Go

PopoverPropsinterface

Props for Popover, a trigger element that reveals floating content.

{
	children: PopoverChildren;
	onClose?: Callback;
	open?: boolean;
}
Go

OutputInputPropsinterface

Props for OutputInput, a read-only <output> styled to match form inputs.

{}
Go

NumberInputPropsinterface

Props for NumberInput, a text-based numeric input bound to a number value.

{
	min?: number | undefined;
	max?: number | undefined;
	formatter?: NumberFormatter | undefined;
}
Go

InputVariantsinterface

Styling variants shared by every form input — currently the width variant (width="narrow", "normal", "wide", "full", "fit").

{}
Go

InputPropsinterface

Base props shared by every form input (name, title, placeholder, required/disabled state, and error message).

{
	name: string;
	title?: string | undefined;
	placeholder?: string | undefined;
	required?: boolean | undefined;
	disabled?: boolean | undefined;
	message?: string | undefined;
}
Go

ValueInputPropsinterface

"Value inputs" are inputs that generate a value, like <input> or <textarea>

{
	value?: O | I | undefined;
	onValue(value: O | undefined): void;
}
Go

DateInputPropsinterface

Props for DateInput, a date/time <input> that emits an ISO string value.

{
	min?: PossibleDate | undefined;
	max?: PossibleDate | undefined;
	input?: DateInputType | undefined;
	step?: number | undefined;
}
Go

ButtonInputPopoverPropsinterface

Props for ButtonInputPopover, an input button that toggles an adjacent popover.

{
	children: PopoverChildren;
}
Go

ArrayRadioInputsPropsinterface

Props for ArrayRadioInputs, which renders a radio for each item in an array of values.

{
	items: ImmutableArray<T>;
	formatter?: ((value: T) => ReactNode) | undefined;
}
Go

DictionaryInputPropsinterface

Props for DictionaryInput, a repeating input that edits a dictionary of schema-validated items.

{
	one?: string;
	many?: string;
	min?: number | undefined;
	max?: number | undefined;
	items: Schema<T>;
}
Go

TextInputPropsinterface

Props for TextInput, a single- or multi-line text input bound to a string value.

{
	rows?: number | undefined;
	multiline?: boolean;
	input?: StringInputType;
	min?: number | undefined;
	max?: number | undefined;
	formatter?: TextFormatter | undefined;
}
Go

MarkupPropsinterface

Props for <Markup> — extends MarkupOptions so callers can override rules, rel, url, root, or schemes directly.

{
	children?: string | undefined;
}
Go

MetaURLinterface

A Meta object with a guaranteed url, plus derived path and params properties.

{
	url: ImmutableURL;
	root: ImmutableURL;
	path: AbsolutePath;
	params: URIParams;
}
Go

LoaderPropsinterface

Props for <Loader> and <PageLoader> — the children to load plus an optional fallback shown while they suspend.

{
	readonly fallback?: ReactNode | undefined;
}
Go

ErrorPropsinterface

Props for a component that renders a caught error reason.

{
	reason: unknown;
}
Go

CatcherPropsinterface

Props for <Catcher> — the children to guard plus the as component used to render any caught error.

{
	as: (props: ErrorProps) => ReactElement;
}
Go

MappingPropsinterface

Props for the Mapping component returned by createMapper().

{
	readonly mapping: Mapping;
}
Go

MapperPropsinterface

Props for the Mapper component returned by createMapper().

{
	readonly children?: Elements;
}
Go

IconPropsinterface

Props for <Icon> — the status to represent and optional icon size.

{
	icon?: ComponentType<{ className?: string | undefined }>;
	size?: SizeVariant | undefined;
	tint?: TintVariant | undefined;
}
Go

TagVariantsinterface

Styling variants accepted by <Tag> — status, colour, and typography options.

{}
Go

TagPropsinterface

Props for <Tag> — TagVariants styling options plus <Clickable> props (href, onClick, children, etc.).

{}

Types

Go

RoutePropstype

Props for a component that works as a route in the router.

URIParams
Go

RouteComponenttype

React component usable as a route value — a function or class component accepting RouteProps.

FunctionComponent<RouteProps> | ComponentClass<RouteProps>
Go

Routetype

Valid route values:

RouteComponent | AbsolutePath | ReactElement
Go

Routestype

Route table mapping { path: RouteComponent | redirectPath | ReactElement } for a <Router>.

{
	[key: AbsolutePath]: Nullish<Route | false>;
}
Go

FormCallbacktype

Callback invoked when a Form is submitted with its validated data.

(
	data: T,
	event: SubmitEvent<HTMLFormElement>,
) => ReactNode | void | PromiseLike<ReactNode | void>
Go

ClickableCallbacktype

Handler for a clickable onClick event.

(event: MouseEvent<HTMLButtonElement>) => ReactNode | void | PromiseLike<ReactNode | void>
Go

TransitionClassestype

Map of view-transition types to their CSS class names in { type: className } format.

{
	default: string;
	forward?: string;
	back?: string;
}
Go

TransitionTypetype

Known view-transition type names that all transitions support — the keys of TransitionClasses.

keyof TransitionClasses
Go

BlockElementtype

Semantic element names a block element may render as via its as prop.

"div" | "section" | "header" | "footer" | "article" | "nav" | "aside" | "figure"
Go

TitlePropstype

Props for Title — identical to HeadingProps.

HeadingProps
Go

SubheadingPropstype

Props for Subheading — identical to HeadingProps.

HeadingProps
Go

MetaTagstype

Set of named meta <meta /> tags in { name: content } format.

ImmutableDictionary<string | boolean | null | undefined>
Go

MetaLinkstype

Set of resolved meta <link /> tags in { rel: href } format (hrefs already absolutified to ImmutableURI).

ImmutableDictionary<ImmutableURI>
Go

PossibleMetaLinkstype

Set of input meta <link /> tags in { rel: href } format, before hrefs are resolved.

ImmutableDictionary<Nullish<PossibleLink>>
Go

MetaAssetstype

Set of resolved linked assets in (href)[] format (hrefs already absolutified to ImmutableURI).

ImmutableArray<ImmutableURI>
Go

PossibleMetaAssetstype

Set of input linked assets in (href)[] format, before hrefs are resolved.

ImmutableArray<Nullish<PossibleLink>>
Go

MetaCSPtype

Type for a meta Content-Security-Policy tag in { resource: string[] } format.

{
	readonly [resource: string]: string[];
}
Go

Classestype

Set of classnames that can be joined into a single className string.

string | null | undefined | readonly Classes[] | Variants
Go

CSSModuletype

CSS modules mapping of local class names to hashed runtime class names.

ImmutableDictionary<string | undefined>
Go

NoticeCallbacktype

Callback that can return or throw a value, triggering a success or error notice accordingly.

(...args: A) => PromiseLike<ReactNode | undefined | void> | ReactNode | undefined | void
Go

SizeVarianttype

Allowed values for font size for components that support TypographyVariants

| "xxsmall"
	| "xsmall"
	| "small"
	| "normal"
	| "large"
	| "xlarge"
	| "xxlarge"
	| "xxxlarge"
	| "1x"
	| "2x"
	| "3x"
	| "4x"
	| "5x"
	| "6x"
	| "7x"
	| "8x"
	| "9x"
	| "10x"
Go

WeightVarianttype

Allowed values for font weight for components that support TypographyVariants

"title" | "body" | "label" | "code" | "normal" | "strong"
Go

CaseVarianttype

Allowed values for text case for components that support TypographyVariants

"title" | "body" | "label" | "code" | "upper" | "lower" | "normal"
Go

FontVarianttype

Allowed values for font family for components that support TypographyVariants

"title" | "body" | "label" | "code" | "serif" | "sans" | "monospace"
Go

ShadowVarianttype

Enumerated drop-shadow scale selectable via the shadow="normal" variant prop.

"none" | "small" | "normal" | "large"
Go

WidthVarianttype

Enumerated width selectable via the width variant prop.

| "narrow"
	| "normal"
	| "wide"
	| "full"
	| "fit"
	| "1x"
	| "2x"
	| "3x"
	| "4x"
	| "5x"
	| "6x"
	| "7x"
	| "8x"
	| "10x"
	| "12x"
	| "16x"
	| "20x"
	| "24x"
	| "28x"
	| "32x"
Go

StrokeVarianttype

Allowed values for border thickness for components that support StrokeVariants

"normal" | "thick"
Go

IndentVarianttype

Allowed values for inline-padding ("indent") for components that support IndentVariants

| "none"
	| "xxsmall"
	| "xsmall"
	| "small"
	| "normal"
	| "large"
	| "xlarge"
	| "xxlarge"
	| "1x"
	| "2x"
	| "3x"
	| "4x"
	| "5x"
	| "6x"
	| "7x"
	| "8x"
	| "9x"
	| "10x"
Go

ColorVarianttype

Enumerated colour names selectable via the color="purple" prop for components that support that support ColorVariants

| "primary"
	| "secondary"
	| "tertiary"
	| "red"
	| "orange"
	| "yellow"
	| "green"
	| "aqua"
	| "blue"
	| "purple"
	| "pink"
	| "gray"
Go

RadiusVarianttype

Allowed values for border radius for components that support RadiusVariants

"none" | "xxsmall" | "xsmall" | "small" | "normal" | "large" | "xlarge" | "xxlarge"
Go

Statustype

Allowed status names selected via the status="info" prop for components that support that support StatusVariants

"loading" | "info" | "danger" | "error" | "warning" | "success"
Go

SpaceValuetype

Allowed values for block spacing for components that support SpaceVariants

| "section"
	| "paragraph"
	| "none"
	| "xxsmall"
	| "xsmall"
	| "small"
	| "normal"
	| "large"
	| "xlarge"
	| "xxlarge"
	| "1x"
	| "2x"
	| "3x"
	| "4x"
	| "5x"
	| "6x"
	| "7x"
	| "8x"
	| "9x"
	| "10x"
Go

TintVarianttype

Shades of the currently selected tint color, from "00" (black) through "50" (the hue itself) to "100" (white).

| "00"
	| "05"
	| "10"
	| "15"
	| "20"
	| "25"
	| "30"
	| "35"
	| "40"
	| "45"
	| "50"
	| "55"
	| "60"
	| "65"
	| "70"
	| "75"
	| "80"
	| "85"
	| "90"
	| "95"
	| "100"
Go

DurationValuetype

Allowed values for transition timing for components that support DurationVariants

"fast" | "normal" | "slow"
Go

PopoverChildrentype

Children tuple for Popover: a leading trigger node followed by the popover's contents.

readonly [
	/**
	 * First child of the <Popover> is element that activates the popover.
	 * - Should be a `<Button>` or `<Input>` that activates or provides the children.
	 */
	trigger: ReactNode,
	/**
	 * Remaining children are the contents of the popover.
	 */
	...popover: ReactNode[],
]
Go

Mappingtype

Dispatch table from a JSX.IntrinsicElements key to a renderer component.

{
	[K in keyof JSX.IntrinsicElements]?: ComponentType<JSX.IntrinsicElements[K]>;
}

Constants

Go

NavigationContextconstant

React context holding the current NavigationStore, provided by <Navigation>.

Go

FormContextconstant

React context holding the current FormStore, provided by the Form component.

Go

LOADING_NOTICEconstant

Shared loading <Notice> element showing the loading spinner.

Go

NOTICESconstant

Global NoticesStore shown by <Notices>, accepting any of the default statuses.

Go

RetryContextconstant

Context for providing a "retry" callback to descendant <RetryButton> elements.

Go

STATUSESconstant

Tuple of the status names selectable via the status variant prop.

STATUSES: ImmutableArray<Status>
Go

TINT_CLASSconstant

CSS class that (re)calculates the full ladder of tint shades from the current global tint colour.

Go

TREE_CODE_RULEconstant

Markup rule that renders an inline code span as a tree-resolved <TreeLink> instead of a plain <code>.

TREE_CODE_RULE: MarkupRule
Go

TREE_MARKUP_RULESconstant

Default markup rules with the inline-code rule swapped for TREE_CODE_RULE — every backtick span auto-links to its documented token.

TREE_MARKUP_RULES: MarkupRules
Go

TreeContextconstant

React context holding a flattened key → element map of the surrounding tree(s).

Go

LOADING_INPUTconstant

Input that is loading.

Go

LOADINGconstant

Shared loading spinner element with a stable key, ready to drop into Suspense fallbacks and lists.

Go

MetaContextconstant

React context holding the current Meta object (page URL, site root, title, etc.).