objectstack/content/docs/references/ui/component.mdx at 483ffde16d49df4f1b00c97f22f5c5f95f24f654 · objectstack-ai/objectstack

title	Component
description	Component protocol schemas

{/* ⚠️ AUTO-GENERATED — DO NOT EDIT. Run build-docs.ts to regenerate. Hand-written docs live in the module folders under content/docs/. */}

Empty Properties Schema

**Source:** `packages/spec/src/ui/component.zod.ts`

TypeScript Usage

import { AIChatWindowProps, ElementButtonProps, ElementFilterProps, ElementFormProps, ElementImageProps, ElementMetadataViewerProps, ElementNumberProps, ElementRecordPickerProps, ElementTextInputProps, ElementTextProps, PageAccordionProps, PageCardProps, PageHeaderProps, PageTabsProps, RecordActivityProps, RecordChatterProps, RecordDetailsProps, RecordHighlightsField, RecordHighlightsProps, RecordPathProps, RecordRelatedListProps } from '@objectstack/spec/ui';
import type { AIChatWindowProps, ElementButtonProps, ElementFilterProps, ElementFormProps, ElementImageProps, ElementMetadataViewerProps, ElementNumberProps, ElementRecordPickerProps, ElementTextInputProps, ElementTextProps, PageAccordionProps, PageCardProps, PageHeaderProps, PageTabsProps, RecordActivityProps, RecordChatterProps, RecordDetailsProps, RecordHighlightsField, RecordHighlightsProps, RecordPathProps, RecordRelatedListProps } from '@objectstack/spec/ui';

// Validate data
const result = AIChatWindowProps.parse(data);

AIChatWindowProps

Properties

Property	Type	Required	Description
mode	`Enum<'float' \| 'sidebar' \| 'inline'>`	✅	Display mode for the chat window
agentId	`string`	optional	Specific AI agent to use
context	`Record<string, any>`	optional	Contextual data to pass to the AI
aria	`{ ariaLabel?: string; ariaDescribedBy?: string; role?: string }`	optional	ARIA accessibility attributes

ElementButtonProps

Properties

Property	Type	Required	Description
label	`string`	✅	Button display label
variant	`Enum<'primary' \| 'secondary' \| 'danger' \| 'ghost' \| 'link'>`	✅	Button visual variant
size	`Enum<'small' \| 'medium' \| 'large'>`	✅	Button size
icon	`string`	optional	Icon name (Lucide icon)
iconPosition	`Enum<'left' \| 'right'>`	✅	Icon position relative to label
disabled	`boolean`	✅	Disable the button
aria	`{ ariaLabel?: string; ariaDescribedBy?: string; role?: string }`	optional	ARIA accessibility attributes

ElementFilterProps

Properties

Property	Type	Required	Description
object	`string`	✅	Object to filter
fields	`string[]`	✅	Filterable field names
targetVariable	`string`	optional	Page variable to store filter state
layout	`Enum<'inline' \| 'dropdown' \| 'sidebar'>`	✅	Filter display layout
showSearch	`boolean`	✅	Show search input
aria	`{ ariaLabel?: string; ariaDescribedBy?: string; role?: string }`	optional	ARIA accessibility attributes

ElementFormProps

Properties

Property	Type	Required	Description
object	`string`	✅	Object for the form
fields	`string[]`	optional	Fields to display (defaults to all editable fields)
mode	`Enum<'create' \| 'edit'>`	optional	Form mode
submitLabel	`string`	optional	Submit button label
onSubmit	`string \| { dialect: Enum<'cel' \| 'cron' \| 'template'>; source?: string; ast?: any; meta?: object }`	optional	Action expression on form submit (CEL)
aria	`{ ariaLabel?: string; ariaDescribedBy?: string; role?: string }`	optional	ARIA accessibility attributes

ElementImageProps

Properties

Property	Type	Required	Description
src	`string`	✅	Image URL or attachment field
alt	`string`	optional	Alt text for accessibility
fit	`Enum<'cover' \| 'contain' \| 'fill'>`	✅	Image object-fit mode
height	`number`	optional	Fixed height in pixels
aria	`{ ariaLabel?: string; ariaDescribedBy?: string; role?: string }`	optional	ARIA accessibility attributes

ElementMetadataViewerProps

Properties

Property	Type	Required	Description
type	`Enum<'state_machine' \| 'flow' \| 'permission'>`	✅	Metadata view kind (ADR-0051): state_machine \| flow \| permission
name	`string`	✅	Target metadata item name; resolved package-scoped (ADR-0048), then dependencies (ADR-0046 §3.3)
object	`string`	optional	Owning object — required for object-scoped kinds: state_machine is a rule ON an object (ADR-0020), permission renders a matrix FOR one; omit for top-level flow
mode	`Enum<'diagram' \| 'matrix' \| 'summary'>`	optional	Render form; defaults per type (diagram for flow/state_machine, matrix for permission)
detail	`Enum<'business' \| 'technical'>`	✅	Authoring altitude (ADR-0051 §3.4): business collapses technical flow nodes to business steps + approvals. NOT access (cf. book.audience); permission projection is automatic and render-time, never set here
aria	`{ ariaLabel?: string; ariaDescribedBy?: string; role?: string }`	optional	ARIA accessibility attributes

ElementNumberProps

Properties

Property	Type	Required	Description
object	`string`	✅	Source object
field	`string`	optional	Field to aggregate
aggregate	`Enum<'count' \| 'sum' \| 'avg' \| 'min' \| 'max'>`	✅	Aggregation function
filter	`any`	optional	Filter criteria
format	`Enum<'number' \| 'currency' \| 'percent'>`	optional	Number display format
prefix	`string`	optional	Prefix text (e.g. "$")
suffix	`string`	optional	Suffix text (e.g. "%")
aria	`{ ariaLabel?: string; ariaDescribedBy?: string; role?: string }`	optional	ARIA accessibility attributes

ElementRecordPickerProps

Properties

Property	Type	Required	Description
object	`string`	✅	Object to pick records from
displayField	`string`	✅	Field to display as the record label
searchFields	`string[]`	optional	Fields to search against
filter	`any`	optional	Filter criteria for available records
multiple	`boolean`	✅	Allow multiple record selection
targetVariable	`string`	optional	Page variable to bind selected record ID(s)
placeholder	`string`	optional	Placeholder text
aria	`{ ariaLabel?: string; ariaDescribedBy?: string; role?: string }`	optional	ARIA accessibility attributes

ElementTextInputProps

Properties

Property	Type	Required	Description
inputType	`Enum<'text' \| 'email' \| 'number' \| 'tel' \| 'url' \| 'password'>`	✅	Native input type — drives keyboard/validation affordance and how the bound value is coerced (number → numeric).
label	`string`	optional	Field label shown above the input
placeholder	`string`	optional	Placeholder text shown when empty
defaultValue	`string \| number`	optional	Initial value; seeds the bound page variable on mount
required	`boolean`	✅	Mark the field as required
disabled	`boolean`	✅	Disable the input
description	`string`	optional	Helper text shown below the input
targetVariable	`string`	optional	Page variable this input writes to. Declarative hint; the live binding resolves via the variable whose `source` equals this component id (see PageVariableSchema).
aria	`{ ariaLabel?: string; ariaDescribedBy?: string; role?: string }`	optional	ARIA accessibility attributes

ElementTextProps

Properties

Property	Type	Required	Description
content	`string`	✅	Text or Markdown content
variant	`Enum<'heading' \| 'subheading' \| 'body' \| 'caption'>`	✅	Text style variant
align	`Enum<'left' \| 'center' \| 'right'>`	✅	Text alignment
aria	`{ ariaLabel?: string; ariaDescribedBy?: string; role?: string }`	optional	ARIA accessibility attributes

PageAccordionProps

Properties

Property	Type	Required	Description
items	`{ label: string; icon?: string; collapsed: boolean; children: any[] }[]`	✅
allowMultiple	`boolean`	✅	Allow multiple panels to be expanded simultaneously
aria	`{ ariaLabel?: string; ariaDescribedBy?: string; role?: string }`	optional	ARIA accessibility attributes

PageCardProps

Properties

Property	Type	Required	Description
title	`string`	optional	Display label (plain string; i18n keys are auto-generated by the framework)
bordered	`boolean`	✅
actions	`string[]`	optional
body	`any[]`	optional	Card content components (slot)
footer	`any[]`	optional	Card footer components (slot)
aria	`{ ariaLabel?: string; ariaDescribedBy?: string; role?: string }`	optional	ARIA accessibility attributes

PageHeaderProps

Properties

Property	Type	Required	Description
title	`string`	✅	Page title
subtitle	`string`	optional	Page subtitle
icon	`string`	optional	Icon name
breadcrumb	`boolean`	✅	Show breadcrumb
actions	`string[]`	optional	Action IDs to show in header
aria	`{ ariaLabel?: string; ariaDescribedBy?: string; role?: string }`	optional	ARIA accessibility attributes

PageTabsProps

Properties

Property	Type	Required	Description
type	`Enum<'line' \| 'card' \| 'pill'>`	optional
position	`Enum<'top' \| 'left'>`	optional
items	`{ label: string; icon?: string; visibleWhen?: string \| { dialect: Enum<'cel' \| 'cron' \| 'template'>; source?: string; ast?: any; meta?: object }; children: any[] }[]`	✅
aria	`{ ariaLabel?: string; ariaDescribedBy?: string; role?: string }`	optional	ARIA accessibility attributes

RecordActivityProps

Properties

Property	Type	Required	Description
types	`Enum<'comment' \| 'field_change' \| 'task' \| 'event' \| 'email' \| 'call' \| 'note' \| 'file' \| 'record_create' \| 'record_delete' \| 'approval' \| 'sharing' \| 'system'>[]`	optional	Feed item types to show (default: all)
filterMode	`Enum<'all' \| 'comments_only' \| 'changes_only' \| 'tasks_only'>`	✅	Default activity filter
showFilterToggle	`boolean`	✅	Show filter dropdown in panel header
limit	`integer`	✅	Number of items to load per page
showCompleted	`boolean`	✅	Include completed activities
unifiedTimeline	`boolean`	✅	Mix field changes and comments in one timeline (Airtable style)
showCommentInput	`boolean`	✅	Show "Leave a comment" input at the bottom
enableMentions	`boolean`	✅	Enable @mentions in comments
enableReactions	`boolean`	✅	Enable emoji reactions on feed items
enableThreading	`boolean`	✅	Enable threaded replies on comments
showSubscriptionToggle	`boolean`	✅	Show bell icon for record-level notification subscription
aria	`{ ariaLabel?: string; ariaDescribedBy?: string; role?: string }`	optional	ARIA accessibility attributes

RecordChatterProps

Properties

Property	Type	Required	Description
position	`Enum<'sidebar' \| 'inline' \| 'drawer'>`	✅	Where to render the chatter panel
width	`string \| number`	optional	Panel width (e.g., "350px", "30%")
collapsible	`boolean`	✅	Whether the panel can be collapsed
defaultCollapsed	`boolean`	✅	Whether the panel starts collapsed
feed	`{ types?: Enum<'comment' \| 'field_change' \| 'task' \| 'event' \| 'email' \| 'call' \| 'note' \| 'file' \| 'record_create' \| 'record_delete' \| 'approval' \| 'sharing' \| 'system'>[]; filterMode: Enum<'all' \| 'comments_only' \| 'changes_only' \| 'tasks_only'>; showFilterToggle: boolean; limit: integer; … }`	optional	Embedded activity feed configuration
aria	`{ ariaLabel?: string; ariaDescribedBy?: string; role?: string }`	optional	ARIA accessibility attributes

RecordDetailsProps

Properties

Property	Type	Required	Description
columns	`Enum<'1' \| '2' \| '3' \| '4'>`	✅	Number of columns for field layout (1-4)
layout	`Enum<'auto' \| 'custom'>`	✅	Layout mode: auto uses object highlightFields, custom uses explicit sections
sections	`string[]`	optional	Section IDs to show (required when layout is "custom")
fields	`string[]`	optional	Explicit field list to display (optional, overrides highlightFields)
aria	`{ ariaLabel?: string; ariaDescribedBy?: string; role?: string }`	optional	ARIA accessibility attributes

RecordHighlightsField

Highlight field: bare name, or {name,label?,icon?,type?}

Union Options

This schema accepts one of the following structures:

Option 1

Type: string

Option 2

Properties

Property	Type	Required	Description
name	`string`	✅	Field name on the record
label	`string`	optional	Display label (overrides schema label)
icon	`string`	optional	Icon name (lucide icon key)
type	`string`	optional	Override cell renderer type (rare)

RecordHighlightsProps

Properties

Property	Type	Required	Description
fields	`string \| { name: string; label?: string; icon?: string; type?: string }[]`	✅	Key fields to highlight (1-7 fields max, typically displayed as prominent cards). Each item may be a bare field name or `{name, label?, icon?, type?}` for inline overrides.
layout	`Enum<'horizontal' \| 'vertical'>`	✅	Layout orientation for highlight fields
aria	`{ ariaLabel?: string; ariaDescribedBy?: string; role?: string }`	optional	ARIA accessibility attributes

RecordPathProps

Properties

Property	Type	Required	Description
statusField	`string`	✅	Field name representing the current status/stage
stages	`{ value: string; label: string }[]`	optional	Explicit stage definitions (if not using field metadata)
aria	`{ ariaLabel?: string; ariaDescribedBy?: string; role?: string }`	optional	ARIA accessibility attributes

RecordRelatedListProps

Properties

Property	Type	Required	Description
objectName	`string`	✅	Related object name (e.g., "task", "opportunity")
relationshipField	`string`	✅	Field on related object that points to this record (e.g., "account_id")
relationshipValueField	`string`	✅	Parent-record field whose value relationshipField stores (default 'id'; e.g. 'name' for name-keyed junctions).
columns	`string[]`	optional	Fields to display in the related list. Optional: when omitted, columns derive from the related object's highlightFields / default list columns (a related list is just another surface that lists that object). Override chain: child highlightFields → field-level relatedListColumns → this inline list.
sort	`string \| { field: string; order: Enum<'asc' \| 'desc'> }[]`	optional	Sort order for related records
limit	`integer`	✅	Number of records to display initially
filter	`{ field: string; operator: Enum<'equals' \| 'not_equals' \| 'contains' \| 'not_contains' \| 'starts_with' \| 'ends_with' \| 'greater_than' \| 'less_than' \| 'greater_than_or_equal' \| 'less_than_or_equal' \| 'in' \| 'not_in' \| 'is_empty' \| 'is_not_empty' \| 'is_null' \| 'is_not_null' \| 'before' \| 'after' \| 'between'>; value?: string \| number \| boolean \| null \| string \| number[] }[]`	optional	Additional filter criteria for related records
title	`string`	optional	Custom title for the related list
showViewAll	`boolean`	✅	Show "View All" link to see all related records
actions	`string[]`	optional	Action IDs available for related records
add	`{ picker: object; linkField?: string; label?: string }`	optional	Add-existing-via-picker config (generic m2m/junction assignment).
aria	`{ ariaLabel?: string; ariaDescribedBy?: string; role?: string }`	optional	ARIA accessibility attributes

Uh oh!

FilesExpand file tree

component.mdx

Latest commit

History

component.mdx

File metadata and controls

TypeScript Usage

AIChatWindowProps

Properties

ElementButtonProps

Properties

ElementFilterProps

Properties

ElementFormProps

Properties

ElementImageProps

Properties

ElementMetadataViewerProps

Properties

ElementNumberProps

Properties

ElementRecordPickerProps

Properties

ElementTextInputProps

Properties

ElementTextProps

Properties

PageAccordionProps

Properties

PageCardProps

Properties

PageHeaderProps

Properties

PageTabsProps

Properties

RecordActivityProps

Properties

RecordChatterProps

Properties

RecordDetailsProps

Properties

RecordHighlightsField

Union Options

Option 1

Option 2

Properties

RecordHighlightsProps

Properties

RecordPathProps

Properties

RecordRelatedListProps

Properties