shelving/uimodule

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

DataInputcomponent

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

DataInput(props: DataInputProps<T>): ReactElement

Formcomponent

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

Form(props: FormProps<T>): ReactElement

SelectInputcomponent

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

SelectInput(props: SelectProps<T>): ReactElement

FormFootercomponent

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

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

Fieldcomponent

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

Field({ title, description, message, half, children }: FieldProps): ReactElement

ArrayInputcomponent

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

ArrayInput(props: ArrayInputProps<T>): ReactElement

InputWrappercomponent

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

InputWrapper({ children }: ChildProps): ReactElement

FormFieldcomponent

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

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

FormFieldscomponent

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

FormFields(): ReactElement

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

DictionaryInputcomponent

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

DictionaryInput(props: DictionaryInputProps<T>): ReactElement

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

SchemaInputcomponent

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

SchemaInput(props: SchemaInputProps<T>): ReactElement

DateSchemaInputcomponent

Show a DateInput for a DateSchema.

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

NumberSchemaInputcomponent

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

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

ChoiceSchemaInputcomponent

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

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

BooleanSchemaInputcomponent

Show a CheckboxInput for a BooleanSchema.

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

StringSchemaInputcomponent

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

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

ArraySchemaInputcomponent

Show an ArrayInput for an ArraySchema.

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

DictionarySchemaInputcomponent

Show a DictionaryInput for a DictionarySchema.

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

DataSchemaInputcomponent

Show a DataInput for a nested DataSchema.

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

SchemaFieldcomponent

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

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

Progresscomponent

Show progress as a single continuous horizontal bar, filled to value clamped between 0 and 1.

Progress({ value, success, warning, danger }: ProgressProps): ReactElement | null

SegmentedProgresscomponent

Show step progress as a horizontal bar of total segments, of which current + 1 are filled.

SegmentedProgress({ total, current, success, warning, danger }: SegmentedProgressProps): ReactElement | null

FormInputcomponent

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

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

FormInputscomponent

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

FormInputs(): ReactElement

ChoiceRadioInputscomponent

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

ChoiceRadioInputs(props: ChoiceRadioInputsProps<T>): ReactElement

OutputInputcomponent

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

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

FormMessagecomponent

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

FormMessage(props: Omit<MessageProps, "children">): ReactElement | null

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

Routercomponent

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

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

Navigationcomponent

Top-level navigation provider.

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

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

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

DocumentationReturnscomponent

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

DocumentationReturns({ returns }: DocumentationReturnsProps): ReactNode

DocumentationPropertiescomponent

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

DocumentationProperties({ properties }: DocumentationPropertiesProps): ReactNode

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

DocumentationSignaturescomponent

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

DocumentationSignatures({ signatures }: DocumentationSignaturesProps): ReactNode

DocumentationParamscomponent

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

DocumentationParams({ params }: DocumentationParamsProps): ReactNode

DocumentationKindcomponent

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

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

DocumentationTypecomponent

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

DocumentationType({ members }: DocumentationTypeProps): ReactNode

DocumentationButtonscomponent

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

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

DocumentationHomePagecomponent

Page renderer for the documentation site's home page — a bold coloured hero panel over the module listing.

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

DocumentationDescriptioncomponent

Render a documentation table row's description cell.

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

DocumentationReferencescomponent

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

DocumentationReferences({ types }: DocumentationReferencesProps): ReactNode

DocumentationThrowscomponent

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

DocumentationThrows({ throws }: DocumentationThrowsProps): ReactNode

Noticescomponent

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

Notices(props: NoticesProps): ReactElement

Noticecomponent

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

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

Headcomponent

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

Head(): ReactElement

HTMLcomponent

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

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

Pagecomponent

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

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

CenteredLayoutcomponent

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

CenteredLayout({ children, fullWidth = false }: CenteredLayoutProps): ReactElement

SidebarLayoutcomponent

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

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

TreeProvidercomponent

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

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

TreeMarkupcomponent

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

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

TreeSidebarcomponent

Sidebar built from a tree element, in three sections separated by dividers.

TreeSidebar({ tree, path = "/" as AbsolutePath }: TreeSidebarProps): ReactNode

TreePagecomponent

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

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

TreeButtoncomponent

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

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

TreeRoutercomponent

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

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

TreeAppcomponent

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

TreeApp({ tree, routes: extraRoutes, ...meta }: TreeAppProps): ReactElement

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

TreeCardscomponent

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

TreeCards({ children }: TreeCardsProps): ReactNode

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

TreeMenuItemcomponent

Default menu item renderer for any tree-* element.

TreeMenuItem({ path = "/", name, title, children }: TreeElementProps & TreeMenuExtras): ReactNode

TreeMenucomponent

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

TreeMenu({ path = "/", tree }: TreeMenuProps): ReactNode

TreeBreadcrumbscomponent

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

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

TreeIndexPagecomponent

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

TreeIndexPage(): ReactNode

Cellcomponent

Table cell.

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

Tablecomponent

Table block — rendered as <table>.

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

Modalcomponent

Styled <aside> overlay container for modal content.

Modal({ children }: ModalProps): ReactElement

Dialogcomponent

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

DialogCloseButtoncomponent

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

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

DialogsContextcomponent

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

DialogsContext({ children }: DialogsContextProps): ReactElement

Dialogscomponent

Render the open dialogs from the current DialogsContext.

Dialogs(): ReactNode | null

FadeTransitioncomponent

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

FadeTransition(props: FadeTransitionProps): ReactElement

HorizontalTransitioncomponent

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

HorizontalTransition(props: HorizontalTransitionProps): ReactElement

Transitioncomponent

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

Transition({
	children,
	default: d,
	forward = d,
	back = d,
	...variants
}: Partial<TransitionClasses> & TransitionProps): ReactElement

VerticalTransitioncomponent

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

VerticalTransition(props: VerticalTransitionProps): ReactElement

CollapseTransitioncomponent

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

CollapseTransition(props: CollapseTransitionProps): ReactElement

Appcomponent

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

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

Imagecomponent

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

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

Labelcomponent

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

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

Preformattedcomponent

Preformatted block of text — rendered as <pre>.

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

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

Titlecomponent

Page title — renders an <h1>.

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

Headingcomponent

Section heading — renders an <h2>.

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

Videocomponent

Video container element.

Video({ children, ...variants }: VideoProps): ReactElement

VideoButtoncomponent

Individual video button over a video — renders a <button>.

VideoButton({ children, title, onClick, disabled, ...variants }: VideoButtonProps): ReactElement

FullscreenVideoButtoncomponent

Button to toggle the surrounding video element in and out of fullscreen.

FullscreenVideoButton(): ReactElement | null

Listcomponent

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

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

Definitionscomponent

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

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

Prosecomponent

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

Prose({ children }: ProseProps): ReactElement

Sectioncomponent

<section> block with section-level spacing.

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

Headercomponent

<header> block with section-level spacing.

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

Footercomponent

<footer> block with section-level spacing.

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

Articlecomponent

<article> block with section-level spacing.

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

Figurecomponent

<figure> block with section-level spacing.

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

PhysicalAddresscomponent

Show an optional AddressData object correctly on screen.

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

EmailAddresscomponent

Show an optional email address string correctly on screen.

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

Subheadingcomponent

Subsection heading — renders an <h3>.

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

Paragraphcomponent

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

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

Cardcomponent

Cards are boxed areas for content to sit within.

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

Captioncomponent

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

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

Blockcomponent

Plain <div> block with block-level spacing.

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

Blockquotecomponent

Quoted block of text — rendered as <blockquote>.

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

RetryButtoncomponent

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

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

Catchercomponent

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

new Catcher()

PageCatchercomponent

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

PageCatcher({ children }: PageCatcherProps): ReactElement

ErrorNoticecomponent

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

ErrorNotice({ reason }: ErrorNoticeProps): ReactElement

ErrorPagecomponent

Render a caught error as a full-page <Page> with an error <Card> and retry button.

ErrorPage({ reason }: ErrorPageProps): ReactElement

Iconcomponent

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

Icon(props: IconProps): ReactElement

Markupcomponent

Parse a markup string and render the resulting elements inline.

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

Loadingcomponent

Animated spinner SVG used as a loading indicator.

Loading(): ReactElement

Tagcomponent

Small inline label used to annotate other content.

Tag(props: TagProps): ReactElement

Rowcomponent

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

Row({ children, ...props }: RowProps): ReactElement

Columncomponent

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

Column({ children, column = true, ...props }: ColumnProps): ReactElement

Scrollcomponent

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

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

Emphasiscomponent

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

Emphasis({ children }: EmphasisProps): ReactElement

Insertedcomponent

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

Inserted({ children }: InsertedProps): ReactElement

Deletedcomponent

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

Deleted({ children }: DeletedProps): ReactElement

Markcomponent

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

Mark({ children }: MarkProps): ReactElement

Codecomponent

Inline code span — renders a <code> element.

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

Superscriptcomponent

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

Superscript({ children }: SuperscriptProps): ReactElement

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

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

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

Smallcomponent

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

Small({ children }: SmallProps): ReactElement

Subscriptcomponent

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

Subscript({ children }: SubscriptProps): ReactElement

Linkcomponent

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

Link(props: LinkProps): ReactElement

Strongcomponent

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

Strong({ children }: StrongProps): ReactElement

Menucomponent

A <menu> list of <MenuItem> children.

Menu({ children }: MenuProps): ReactNode

MenuItemcomponent

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

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