# Prism Design System — full agent context

> 106 React components, one re-skinnable library behind commerce, campus, finance, health, hospitality and media products. This file inlines the loading recipe, theming rules and every component with its full prop list so an agent can generate on-system code from a single fetch.

## Load it

```html
<link rel="stylesheet" href="/runtime/styles.css" />
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
<script src="/runtime/_ds_bundle.js"></script>
```

```jsx
const { Button, TextField, DataGrid } = window.PrismDesignSystem_39d121;
```

## Theming (cascading attributes — never override component internals)

- `data-signature="commerce|campus|finance|health|hospitality|media"` — re-skin to a product.
- `data-theme="dark"` — dark mode.
- `data-density="compact|neutral|relaxed"` — information density.
- `data-scale="cinema"` — ten-foot / TV tier.

Rules: use semantic role tokens (`--accent`, `--text-primary`, `--surface-card`, `--positive`/`--notice`/`--negative`, `--focus-ring`), never raw ramp steps; never remove the focus ring; reserve semantic colours for real meaning; supply imagery as content via props (Prism ships none).

## Components

### Core

#### Avatar
Avatar — Prism component.
`const { Avatar } = window.PrismDesignSystem_39d121;`
Props:
- `name?: string` — Drives alt text and the initials fallback.
- `src?: string | null` — Image URL; falls back to initials when absent or broken.
- `size?: "sm" | "md" | "lg"`
- `className?: string`

#### Badge
Badge — Prism component.
`const { Badge } = window.PrismDesignSystem_39d121;`
Props:
- `tone?: "neutral" | "accent" | "positive" | "notice" | "negative" | "info"`
- `variant?: "subtle" | "solid"` — `subtle` (tinted) or `solid` (filled).
- `icon?: React.ReactNode` — Optional leading icon — recommended for semantic tones.
- `dot?: boolean` — Show a small leading status dot (Helios-style) in the tone color.
- `children?: React.ReactNode`
- `className?: string`

#### Button
The primary action control. Use exactly one `accent` button per view as the main call to action; everything else is neutral, quiet or outline. Semantic fills (`positive` / `notice` / `negative`) reserve colour for genuine confirm / caution / destructive actions.
`const { Button } = window.PrismDesignSystem_39d121;`
Props:
- `variant?: "accent" | "neutral" | "quiet" | "outline" | "negative" | "positive" | "notice"` — Visual emphasis. `accent` is the single primary action per view; `positive`/`notice`/`negative` are semantic confirm/caution/destructive fills.
- `size?: "sm" | "md" | "lg" | "xl"` — Control height. `xl` is for TV / remote-friendly surfaces.
- `type?: "button" | "submit" | "reset"`
- `isDisabled?: boolean`
- `isLoading?: boolean` — Shows an in-button spinner, sets aria-busy and blocks interaction.
- `fullWidth?: boolean`
- `icon?: React.ReactNode` — Leading icon node (e.g. a Lucide <svg>). Replaced by the spinner while loading.
- `iconEnd?: React.ReactNode` — Trailing icon node.
- `onPress?: (e: React.MouseEvent) => void`
- `onClick?: (e: React.MouseEvent) => void`
- `children?: React.ReactNode`
- `className?: string`

#### ButtonGroup
ButtonGroup — Prism component.
`const { ButtonGroup } = window.PrismDesignSystem_39d121;`
Props:
- `orientation?: "horizontal" | "vertical"` — Lay the segments in a row (default) or a column.
- `size?: "sm" | "md" | "lg" | "xl"` — Optional size applied to every child Button that doesn't set its own.
- `children?: React.ReactNode` — Button / IconButton children to join.
- `className?: string`

#### Card
Card — Prism component.
`const { Card } = window.PrismDesignSystem_39d121;`
Props:
- `padded?: boolean` — Apply internal padding. Default true.
- `isInteractive?: boolean` — Make the whole card a keyboard-focusable button target.
- `onPress?: (e: React.SyntheticEvent) => void`
- `children?: React.ReactNode`
- `className?: string`

#### Fab
Fab — Prism component.
`const { Fab } = window.PrismDesignSystem_39d121;`
Props:
- `variant?: "accent" | "neutral" | "positive" | "negative"` — Fill colour. `accent` (default), `neutral`, or semantic `positive`/`negative`.
- `size?: "sm" | "md" | "lg"`
- `icon?: React.ReactNode` — The icon node (Lucide <svg>).
- `label?: React.ReactNode` — Optional text — present = extended (pill) FAB.
- `isDisabled?: boolean`
- `onPress?: (e: React.MouseEvent) => void` — REQUIRED when there is no visible `label`.
- `onClick?: (e: React.MouseEvent) => void`
- `className?: string`

#### IconButton
IconButton — Prism component.
`const { IconButton } = window.PrismDesignSystem_39d121;`
Props:
- `variant?: "quiet" | "neutral" | "accent"`
- `size?: "sm" | "md" | "lg"`
- `shape?: "square" | "round"` — `square` (rounded-rect, default) or `round` (circular).
- `isDisabled?: boolean`
- `onPress?: (e: React.MouseEvent) => void` — REQUIRED for accessibility — describes the action.
- `onClick?: (e: React.MouseEvent) => void`
- `children?: React.ReactNode` — The icon node.
- `className?: string`

#### NavButton
NavButton — Prism component.
`const { NavButton } = window.PrismDesignSystem_39d121;`
Props:
- `icon?: React.ReactNode` — The icon node (Lucide <svg>).
- `label?: React.ReactNode` — Destination label.
- `orientation?: "vertical" | "horizontal"` — `vertical` stacks icon over label (tab bar); `horizontal` is icon + label (rail).
- `isActive?: boolean` — Marks the current destination (tinted + aria-current="page").
- `badge?: React.ReactNode | boolean` — A count (number/string) or a bare dot (`true`) shown on the icon.
- `onPress?: (e: React.MouseEvent) => void`
- `onClick?: (e: React.MouseEvent) => void`
- `className?: string`

#### Spinner
Spinner — Prism component.
`const { Spinner } = window.PrismDesignSystem_39d121;`
Props:
- `size?: "sm" | "md" | "lg"`
- `label?: string` — Screen-reader label. Default "Loading".
- `className?: string`

#### Tag
Tag — Prism component.
`const { Tag } = window.PrismDesignSystem_39d121;`
Props:
- `isSelected?: boolean`
- `onRemove?: (e: React.MouseEvent) => void` — When provided, renders a remove (×) button.
- `removeLabel?: string` — Accessible verb for the remove button. Default "Remove".
- `children?: React.ReactNode`
- `className?: string`

#### Toolbar
Toolbar — Prism component.
`const { Toolbar } = window.PrismDesignSystem_39d121;`
Props:
- `orientation?: "horizontal" | "vertical"`
- `children?: React.ReactNode`
- `className?: string`

#### ToolbarSeparator
ToolbarSeparator — Prism component.
`const { ToolbarSeparator } = window.PrismDesignSystem_39d121;`
_No documented props._

### Forms & inputs

#### AutosaveIndicator
AutosaveIndicator — Prism component.
`const { AutosaveIndicator } = window.PrismDesignSystem_39d121;`
Props:
- `state?: AutosaveState`
- `savedAt?: string` — e.g. "2:14 PM" — used in the default "Saved {savedAt}" label.
- `labels?: Partial<Record<AutosaveState, string>>`

#### Checkbox
Checkbox — Prism component.
`const { Checkbox } = window.PrismDesignSystem_39d121;`
Props:
- `isSelected?: boolean` — Controlled checked state.
- `defaultSelected?: boolean`
- `isIndeterminate?: boolean`
- `isDisabled?: boolean`
- `onChange?: (isSelected: boolean, e: React.ChangeEvent) => void`
- `children?: React.ReactNode`
- `className?: string`

#### ComboBox
ComboBox — Prism component.
`const { ComboBox } = window.PrismDesignSystem_39d121;`
Props:
- `label?: string`
- `description?: string`
- `items: (string | ComboBoxItem)[]` — Options as strings or { value, label } objects.
- `selectionMode?: "single" | "multiple"` — "single" (default) fills the input; "multiple" shows removable chips.
- `defaultValue?: string`
- `defaultSelectedKeys?: string[]` — Pre-selected values (multiple mode).
- `selectedKeys?: string[]` — Controlled selected values (multiple mode).
- `onSelectionChange?: (values: string[]) => void` — Fired in multiple mode with the full selected value array.
- `placeholder?: string`
- `onSelect?: (value: string, item: ComboBoxItem | null) => void`
- `allowsCustomValue?: boolean` — Allow free text that isn't in the list.
- `isDisabled?: boolean`
- `id?: string`
- `className?: string`

#### DropZone
DropZone — Prism component.
`const { DropZone } = window.PrismDesignSystem_39d121;`
Props:
- `title?: string`
- `hint?: string`
- `accept?: string` — Accept filter, e.g. "image/*,.pdf".
- `multiple?: boolean`
- `isDisabled?: boolean`
- `onFiles?: (files: FileList) => void`
- `icon?: React.ReactNode` — Override the default upload icon.
- `className?: string`

#### ErrorSummary
ErrorSummary — Prism component.
`const { ErrorSummary } = window.PrismDesignSystem_39d121;`
Props:
- `errors: FormError[]`
- `title?: React.ReactNode`

#### Field
Field — Prism component.
`const { Field } = window.PrismDesignSystem_39d121;`
Props:
- `label?: React.ReactNode`
- `description?: React.ReactNode`
- `errorMessage?: React.ReactNode`
- `isRequired?: boolean`
- `isInvalid?: boolean`
- `hint?: React.ReactNode` — Right-aligned secondary note in the label row (e.g. "Optional").
- `id?: string`
- `htmlFor?: string`
- `className?: string`
- `children?: React.ReactNode | ((aria: FieldAria) => React.ReactNode)`

#### FormActions
FormActions — Prism component.
`const { FormActions } = window.PrismDesignSystem_39d121;`
Props:
- `status?: React.ReactNode` — Start-aligned status node (often an AutosaveIndicator).
- `align?: "start" | "end" | "between"`
- `sticky?: boolean` — Pin to the bottom of a scrolling form.

#### FormRow
FormRow — Prism component.
`const { FormRow } = window.PrismDesignSystem_39d121;`
Props:
- `columns?: 1 | 2 | 3` — Columns on wide screens (collapses to 1 under 640px). Default 2.

#### FormSection
FormSection — Prism component.
`const { FormSection } = window.PrismDesignSystem_39d121;`
Props:
- `legend?: React.ReactNode`
- `description?: React.ReactNode`
- `card?: boolean` — Wrap the section in a card surface.
- `actions?: React.ReactNode`

#### MultiStepForm
MultiStepForm — Prism component.
`const { MultiStepForm } = window.PrismDesignSystem_39d121;`
Props:
- `steps: WizardStep[]`
- `current?: number` — Controlled current index. Omit for uncontrolled.
- `defaultCurrent?: number`
- `onStepChange?: (index: number) => void`
- `onComplete?: () => void`
- `canAdvance?: (index: number) => boolean` — Return false to block Next on the given step index.
- `layout?: "top" | "side"`
- `labels?: { step?: string; of?: string; back?: string; next?: string; submit?: string }`
- `actions?: React.ReactNode` — Replace the default Back/Next action bar.

#### NumberField
NumberField — Prism component.
`const { NumberField } = window.PrismDesignSystem_39d121;`
Props:
- `label?: string`
- `description?: string`
- `value?: number`
- `defaultValue?: number`
- `min?: number`
- `max?: number`
- `step?: number`
- `isDisabled?: boolean`
- `onChange?: (value: number) => void`
- `id?: string`
- `className?: string`

#### Radio
Radio — Prism component.
`const { Radio } = window.PrismDesignSystem_39d121;`
_No documented props._

#### RadioGroup
RadioGroup — Prism component.
`const { RadioGroup } = window.PrismDesignSystem_39d121;`
Props:
- `label?: string`
- `description?: string`
- `value?: string` — Controlled selected value.
- `defaultValue?: string | null`
- `onChange?: (value: string, e: React.ChangeEvent) => void`
- `name?: string`
- `isDisabled?: boolean`
- `children?: React.ReactNode` — Radio children.
- `className?: string`

#### SearchField
SearchField — Prism component.
`const { SearchField } = window.PrismDesignSystem_39d121;`
Props:
- `label?: string`
- `value?: string`
- `defaultValue?: string`
- `placeholder?: string`
- `onChange?: (value: string) => void`
- `onClear?: () => void`
- `isDisabled?: boolean`
- `className?: string`

#### Select
Select — Prism component.
`const { Select } = window.PrismDesignSystem_39d121;`
Props:
- `label?: string`
- `description?: string`
- `errorMessage?: string`
- `isRequired?: boolean`
- `isInvalid?: boolean`
- `isDisabled?: boolean`
- `value?: string`
- `defaultValue?: string`
- `onChange?: (e: React.ChangeEvent) => void`
- `id?: string`
- `children?: React.ReactNode` — <option> / <optgroup> elements.
- `className?: string`

#### Slider
Slider — Prism component.
`const { Slider } = window.PrismDesignSystem_39d121;`
Props:
- `label?: string`
- `value?: number`
- `defaultValue?: number`
- `min?: number`
- `max?: number`
- `step?: number`
- `onChange?: (value: number) => void`
- `formatValue?: (value: number) => string` — Format the displayed value, e.g. (v) => `${v}%`.
- `isDisabled?: boolean`
- `className?: string`

#### Switch
Switch — Prism component.
`const { Switch } = window.PrismDesignSystem_39d121;`
Props:
- `isSelected?: boolean`
- `defaultSelected?: boolean`
- `isDisabled?: boolean`
- `onChange?: (isSelected: boolean, e: React.ChangeEvent) => void`
- `iconOn?: React.ReactNode` — Icon shown on the thumb when ON (e.g. a moon for dark mode).
- `iconOff?: React.ReactNode` — Icon shown on the thumb when OFF (e.g. a sun for light mode).
- `children?: React.ReactNode`
- `className?: string`

#### TextField
A labelled text input with description + error wiring.
`const { TextField } = window.PrismDesignSystem_39d121;`
Props:
- `label?: string`
- `description?: string` — Helper text shown under the label; linked via aria-describedby.
- `errorMessage?: string` — Shown when isInvalid; linked via aria-describedby + aria-invalid.
- `isRequired?: boolean`
- `isInvalid?: boolean`
- `isDisabled?: boolean`
- `multiline?: boolean` — Render a <textarea> instead of <input>.
- `leadingIcon?: React.ReactNode` — Icon node placed inside the start of the field.
- `type?: string`
- `placeholder?: string`
- `value?: string`
- `defaultValue?: string`
- `onChange?: (e: React.ChangeEvent) => void`
- `id?: string`
- `className?: string`

#### ToggleButtonGroup
ToggleButtonGroup — Prism component.
`const { ToggleButtonGroup } = window.PrismDesignSystem_39d121;`
Props:
- `items: ToggleItem[]`
- `value?: string | string[]` — Controlled value: a string (single) or string[] (multiple).
- `defaultValue?: string | string[]`
- `selectionMode?: "single" | "multiple"`
- `onChange?: (value: string | string[]) => void`
- `isDisabled?: boolean`
- `className?: string`

### Navigation

#### Accordion
Accordion — Prism component.
`const { Accordion } = window.PrismDesignSystem_39d121;`
Props:
- `items: AccordionItem[]`
- `defaultExpandedKeys?: string[]`
- `allowMultiple?: boolean` — Keep multiple panels open at once. Default false (one at a time).
- `className?: string`

#### AppHeader
AppHeader — Prism component.
`const { AppHeader } = window.PrismDesignSystem_39d121;`
Props:
- `brand: React.ReactNode` — Brand lockup node (logo + wordmark).
- `brandHref?: string`
- `nav?: AppHeaderNavItem[]` — Inline primary nav; collapses into the side nav below `collapseAt`.
- `actions?: (AppHeaderAction | React.ReactElement)[]` — Action buttons at the end (icons), or custom nodes.
- `sideNavExtra?: AppHeaderNavItem[]` — Extra items shown only in the side-nav drawer.
- `hasSideNav?: boolean` — Force the hamburger + drawer on (else shown when sideNavExtra exists or nav collapses).
- `collapseAt?: number` — Width (px) of the header below which inline nav collapses. Default 720.
- `theme?: "light" | "dark"` — Force an explicit header appearance independent of the app theme (e.g. a dark header on a light app). Omit for the default inverse bar.
- `className?: string`

#### Breadcrumbs
Breadcrumbs — Prism component.
`const { Breadcrumbs } = window.PrismDesignSystem_39d121;`
Props:
- `items: Crumb[]`
- `label?: string` — Accessible label for the nav landmark. Default "Breadcrumb".
- `className?: string`

#### Stepper
Force a state; otherwise derived from currentStep.
`const { Stepper } = window.PrismDesignSystem_39d121;`
Props:
- `steps: Step[]`
- `currentStep?: number` — 0-indexed current step; earlier steps render complete.
- `orientation?: "horizontal" | "vertical"`
- `markerPosition?: "start" | "end"` — Marker placement relative to the label. "end" = icon-after-text (horizontal) or right-aligned text-on-left rail (vertical). Default "start".
- `onStepClick?: (index: number, step: Step) => void` — Makes completed steps clickable: (index, step) => void.
- `className?: string`

#### Tabs
An accessible tab set with arrow-key roving focus and tabpanels. @startingPoint section="Navigation" subtitle="Underlined tab set with icons & roving focus" viewport="700x180"
`const { Tabs } = window.PrismDesignSystem_39d121;`
Props:
- `tabs: TabItem[]`
- `selectedKey?: string` — Controlled selected tab id.
- `defaultKey?: string`
- `onSelectionChange?: (id: string) => void`
- `className?: string`

### Data display

#### DataGrid
Fixed px width — required for pinned columns to compute offsets cleanly.
`const { DataGrid } = window.PrismDesignSystem_39d121;`
Props:
- `columns: DataGridColumn<Row>[]`
- `rows: Row[]`
- `getRowKey?: (row: Row, index: number) => React.Key`
- `density?: "comfortable" | "compact"`
- `isSelectable?: boolean`
- `views?: DataGridView[]` — Named presets shown in the Saved views menu.
- `onCellEdit?: (rowKey: React.Key, columnKey: string, value: string) => void`
- `onRowAction?: (row: Row) => void`
- `maxHeight?: number` — Max body height before the grid scrolls (px). Default 460.
- `emptyState?: React.ReactNode` — Custom node rendered when no rows match.
- `className?: string`

#### Table
Custom cell renderer: (row) => node.
`const { Table } = window.PrismDesignSystem_39d121;`
Props:
- `columns: TableColumn[]`
- `rows: any[]`
- `getRowKey?: (row: any, index: number) => string | number`
- `caption?: React.ReactNode`
- `density?: "comfortable" | "compact"` — `compact` tightens padding for dense reports.
- `hoverable?: boolean`
- `isStriped?: boolean` — Subtle zebra striping. Default true.
- `selectedKeys?: (string | number)[]`
- `onRowAction?: (row: any) => void`
- `sortDescriptor?: SortDescriptor`
- `onSortChange?: (descriptor: SortDescriptor) => void`
- `className?: string`

#### Tree
Tree — Prism component.
`const { Tree } = window.PrismDesignSystem_39d121;`
Props:
- `items: TreeNodeData[]`
- `defaultExpandedKeys?: string[]`
- `selectedKey?: string | null` — Controlled selected node id.
- `onSelectionChange?: (id: string, node: TreeNodeData) => void`
- `className?: string`

### Charts

#### BarChart
BarChart — Prism component.
`const { BarChart } = window.PrismDesignSystem_39d121;`
Props:
- `categories: string[]`
- `series: BarSeries[]`
- `stacked?: boolean`
- `height?: number`
- `showGrid?: boolean`
- `showLegend?: boolean`
- `yTicks?: number`
- `formatY?: (v: number) => React.ReactNode`
- `caption?: string`

#### DonutChart
DonutChart — Prism component.
`const { DonutChart } = window.PrismDesignSystem_39d121;`
Props:
- `data: DonutDatum[]`
- `size?: number`
- `thickness?: number`
- `centerValue?: React.ReactNode`
- `centerLabel?: React.ReactNode`
- `showLegend?: boolean`
- `formatValue?: (v: number) => React.ReactNode`
- `caption?: string`

#### Gauge
Gauge — Prism component.
`const { Gauge } = window.PrismDesignSystem_39d121;`
Props:
- `value: number`
- `min?: number`
- `max?: number`
- `label?: React.ReactNode`
- `unit?: string`
- `size?: number`
- `thickness?: number`
- `segments?: GaugeSegment[]`
- `color?: string`
- `formatValue?: (v: number) => React.ReactNode`

#### Legend
Legend — Prism component.
`const { Legend } = window.PrismDesignSystem_39d121;`
Props:
- `items: LegendItem[]`
- `shape?: "square" | "line" | "dot"`
- `align?: "start" | "center"`

#### LineChart
LineChart — Prism component.
`const { LineChart } = window.PrismDesignSystem_39d121;`
Props:
- `series: LineSeries[]`
- `labels?: string[]`
- `height?: number`
- `showGrid?: boolean`
- `showLegend?: boolean`
- `showDots?: boolean`
- `yTicks?: number`
- `formatY?: (v: number) => React.ReactNode`
- `caption?: string`

#### Sparkline
Sparkline — Prism component.
`const { Sparkline } = window.PrismDesignSystem_39d121;`
Props:
- `data: number[]`
- `height?: number`
- `color?: string`
- `area?: boolean`
- `strokeWidth?: number`
- `label?: string`

### Cards

#### EditorialCard
EditorialCard — Prism component.
`const { EditorialCard } = window.PrismDesignSystem_39d121;`
Props:
- `image?: string` — Thumbnail image URL; a placeholder renders when absent.
- `imageAlt?: string`
- `eyebrow?: React.ReactNode`
- `title?: React.ReactNode`
- `description?: React.ReactNode`
- `meta?: React.ReactNode[]` — Metadata chips shown as a dot-separated row (e.g. ["8 min read","Design"]).
- `actions?: React.ReactNode` — Action nodes (Buttons) shown at the bottom.
- `layout?: "stack" | "row"` — "stack" (image on top) or "row" (image beside body).
- `onPress?: (e: React.SyntheticEvent) => void`
- `href?: string`
- `className?: string`

#### HeroCard
HeroCard — Prism component.
`const { HeroCard } = window.PrismDesignSystem_39d121;`
Props:
- `sectionNumber?: React.ReactNode` — e.g. "Section 03" or "03".
- `title?: React.ReactNode`
- `description?: React.ReactNode`
- `leadout?: React.ReactNode` — Lead-out label; an arrow is appended. Default "Continue".
- `image?: string` — Background image URL; a tinted overlay keeps text legible.
- `tint?: "dark" | "brand"` — Overlay tint when shown. "dark" (neutral) or "brand".
- `onPress?: (e: React.SyntheticEvent) => void`
- `href?: string`
- `className?: string`

#### MediaCard
MediaCard — Prism component.
`const { MediaCard } = window.PrismDesignSystem_39d121;`
Props:
- `artwork?: string` — Album / cover art URL; a music-note placeholder shows when absent.
- `eyebrow?: React.ReactNode` — Small label above the title. Default "Now playing".
- `title?: React.ReactNode`
- `subtitle?: React.ReactNode`
- `progress?: number` — Playback progress 0–100.
- `elapsed?: React.ReactNode`
- `total?: React.ReactNode`
- `controls?: React.ReactNode` — Transport control nodes (IconButtons).
- `className?: string`

#### MetricCard
MetricCard — Prism component.
`const { MetricCard } = window.PrismDesignSystem_39d121;`
Props:
- `eyebrow?: React.ReactNode` — Small category label above the number.
- `value?: React.ReactNode` — The metric itself, e.g. "€248,120" or "1,284".
- `unit?: React.ReactNode`
- `delta?: React.ReactNode` — Delta label, e.g. "12.4%".
- `deltaDirection?: "up" | "down" | "flat"`
- `icon?: React.ReactNode` — Optional leading icon (shown top-right instead of delta).
- `sparklineData?: number[]` — Numbers for the built-in sparkline.
- `sparkline?: React.ReactNode` — Or supply a custom chart node.
- `actions?: React.ReactNode`
- `className?: string`

#### PlanCard
PlanCard — Prism component.
`const { PlanCard } = window.PrismDesignSystem_39d121;`
Props:
- `name: React.ReactNode`
- `price: React.ReactNode` — The price amount, e.g. "€29".
- `period?: React.ReactNode` — Period suffix, e.g. "/mo". Default "/mo".
- `description?: React.ReactNode`
- `features?: React.ReactNode[]` — Feature lines, each gets a check.
- `cta?: React.ReactNode` — Call-to-action node (a Button).
- `featured?: boolean` — Highlight as the recommended plan.
- `flag?: React.ReactNode` — Ribbon label when featured. Default "Most popular".
- `className?: string`

#### ProfileCard
ProfileCard — Prism component.
`const { ProfileCard } = window.PrismDesignSystem_39d121;`
Props:
- `name: string`
- `role?: React.ReactNode`
- `avatar?: string` — Avatar image URL; falls back to initials from name.
- `meta?: React.ReactNode[]`
- `actions?: React.ReactNode`
- `layout?: "stack" | "row"` — "stack" (centered) or "row".
- `className?: string`

#### ProgressCard
ProgressCard — Prism component.
`const { ProgressCard } = window.PrismDesignSystem_39d121;`
Props:
- `title?: React.ReactNode`
- `subtitle?: React.ReactNode`
- `value?: number`
- `max?: number`
- `tone?: "accent" | "positive" | "notice" | "negative"`
- `showPercent?: boolean` — Show the % figure top-right. Default true.
- `bar?: React.ReactNode` — Supply a custom ProgressBar/node; otherwise one is rendered from value/max.
- `actions?: React.ReactNode`
- `className?: string`

#### StatCard
StatCard — Prism component.
`const { StatCard } = window.PrismDesignSystem_39d121;`
Props:
- `title?: React.ReactNode`
- `icon?: React.ReactNode`
- `stats: StatItem[]` — Two related metrics shown side by side with a divider.
- `className?: string`

#### TileCard
TileCard — Prism component.
`const { TileCard } = window.PrismDesignSystem_39d121;`
Props:
- `icon?: React.ReactNode` — Large leading icon node.
- `title?: React.ReactNode`
- `description?: React.ReactNode`
- `onPress?: (e: React.SyntheticEvent) => void`
- `href?: string`
- `className?: string`

### Feedback

#### Alert
Alert — Prism component.
`const { Alert } = window.PrismDesignSystem_39d121;`
Props:
- `tone?: "info" | "positive" | "notice" | "negative"`
- `title?: string`
- `icon?: React.ReactNode` — Override the default tone icon.
- `children?: React.ReactNode`
- `className?: string`

#### ProgressBar
ProgressBar — Prism component.
`const { ProgressBar } = window.PrismDesignSystem_39d121;`
Props:
- `value?: number`
- `min?: number`
- `max?: number`
- `label?: string`
- `showValue?: boolean`
- `tone?: "accent" | "positive" | "notice" | "negative"`
- `isIndeterminate?: boolean`
- `formatValue?: (value: number) => string` — Custom value formatter, e.g. (v) => `${v} / 200 MB`.
- `className?: string`

#### ToastProvider
Override auto-dismiss for this toast (ms).
`const { ToastProvider } = window.PrismDesignSystem_39d121;`
Props:
- `children?: React.ReactNode`
- `duration?: number` — Auto-dismiss delay in ms (0 to disable). Default 5000.

#### ToastRegion
ToastRegion — Prism component.
`const { ToastRegion } = window.PrismDesignSystem_39d121;`
_No documented props._

### Overlays

#### Dialog
Dialog — Prism component.
`const { Dialog } = window.PrismDesignSystem_39d121;`
Props:
- `isOpen: boolean`
- `onClose?: () => void`
- `title?: React.ReactNode`
- `size?: "xs" | "sm" | "md" | "lg"`
- `variant?: "passive" | "transactional" | "danger"` — Intent-based variant (Carbon approach): - "passive": informational, no actions, freely dismissable. - "transactional": requires a choice; background click won't dismiss. - "danger": transactional with a destructive primary action. Inferred from the action props when omitted.
- `primaryLabel?: string` — Primary action label — renders the standard footer.
- `onPrimary?: () => void`
- `secondaryLabel?: string` — Secondary/cancel label. Default "Cancel".
- `onSecondary?: () => void`
- `isPrimaryDisabled?: boolean`
- `dismissable?: boolean` — Override whether scrim-click/Esc dismiss. Defaults by variant.
- `footer?: React.ReactNode` — Custom footer node (overrides the generated action buttons).
- `children?: React.ReactNode`

#### Menu
Menu — Prism component.
`const { Menu } = window.PrismDesignSystem_39d121;`
Props:
- `label?: string` — Fallback trigger label if `trigger` is not supplied.
- `trigger?: React.ReactNode` — Custom trigger node (e.g. an IconButton).
- `items: MenuItemSpec[]`
- `align?: "start" | "end"`

#### Tooltip
Tooltip — Prism component.
`const { Tooltip } = window.PrismDesignSystem_39d121;`
Props:
- `content: React.ReactNode`
- `children: React.ReactElement` — A single focusable child element.

### Date & time

#### Calendar
Calendar — Prism component.
`const { Calendar } = window.PrismDesignSystem_39d121;`
Props:
- `mode?: "single" | "range"`
- `value?: Date | { start: Date; end: Date | null }`
- `onSelect?: (date: Date) => void`
- `minDate?: Date`
- `maxDate?: Date`

#### DatePicker
DatePicker — Prism component.
`const { DatePicker } = window.PrismDesignSystem_39d121;`
Props:
- `label?: string`
- `description?: string`
- `value?: Date | null`
- `defaultValue?: Date | null`
- `onChange?: (date: Date) => void`
- `placeholder?: string`
- `minDate?: Date`
- `maxDate?: Date`
- `locale?: string`
- `isDisabled?: boolean`
- `id?: string`
- `className?: string`

#### DateRangePicker
DateRangePicker — Prism component.
`const { DateRangePicker } = window.PrismDesignSystem_39d121;`
Props:
- `label?: string`
- `description?: string`
- `value?: DateRange`
- `defaultValue?: DateRange`
- `onChange?: (range: DateRange) => void`
- `placeholder?: string`
- `minDate?: Date`
- `maxDate?: Date`
- `locale?: string`
- `isDisabled?: boolean`
- `id?: string`
- `className?: string`

#### TimePicker
TimePicker — Prism component.
`const { TimePicker } = window.PrismDesignSystem_39d121;`
Props:
- `label?: string`
- `description?: string`
- `value?: string` — "HH:MM" 24-hour string.
- `defaultValue?: string`
- `onChange?: (value: string) => void`
- `step?: number` — Minutes between options. Default 30.
- `hour12?: boolean` — Display 12-hour labels with AM/PM (value stays 24h).
- `placeholder?: string`
- `isDisabled?: boolean`
- `id?: string`
- `className?: string`

### Layout

#### AppFooter
AppFooter — Prism component.
`const { AppFooter } = window.PrismDesignSystem_39d121;`
Props:
- `brand?: React.ReactNode` — Brand lockup node (logo + wordmark).
- `tagline?: React.ReactNode`
- `columns?: FooterColumn[]` — Grouped primary link columns, by category.
- `links?: FooterLink[]` — Independent (ungrouped) primary links, laid out horizontally.
- `social?: FooterSocial[]` — Social icon links (each needs an accessible label).
- `copyright?: React.ReactNode`
- `legal?: FooterLink[]` — Bottom-bar secondary/legal links (subtle, horizontal).
- `tone?: "default" | "inverse"`
- `className?: string`

#### MediaHero
Alt text for image (omit/empty for decorative).
`const { MediaHero } = window.PrismDesignSystem_39d121;`
Props:
- `variant?: "bare" | "box" | "cards" | "carousel"` — Layout style.
- `media?: HeroMedia` — Background media (all variants except carousel).
- `eyebrow?: React.ReactNode`
- `title?: React.ReactNode`
- `text?: React.ReactNode`
- `actions?: React.ReactNode` — Buttons/links row.
- `box?: "translucent" | "solid" | "light"` — Panel style for variant="box".
- `cards?: HeroNavCard[]` — Bottom navigation cards for variant="cards".
- `slides?: HeroSlide[]` — Slides for variant="carousel".
- `size?: "sm" | "md" | "lg" | "full"` — Hero height.
- `align?: "center" | "end"` — Vertical placement of content.
- `scrim?: "soft" | "default" | "strong"` — Scrim strength for legibility.
- `autoPlay?: boolean` — Auto-advance the carousel (paused under prefers-reduced-motion).
- `interval?: number` — Carousel interval in ms.
- `className?: string`

#### PageHero
PageHero — Prism component.
`const { PageHero } = window.PrismDesignSystem_39d121;`
Props:
- `eyebrow?: React.ReactNode` — Small overline above the title (optionally with a leading icon node).
- `title?: React.ReactNode`
- `description?: React.ReactNode`
- `actions?: React.ReactNode` — Action nodes (Buttons) rendered in a row below the copy.
- `media?: React.ReactNode` — Media node shown beside the copy (above it when align="center").
- `align?: "start" | "center"`
- `tone?: "default" | "primary" | "secondary" | "tertiary" | "accent"` — Tints the whole band: section accents or the brand accent.
- `children?: React.ReactNode`
- `className?: string`

#### Sidebar
Pop-up menu (settings, sign out, …); omit for a static chip.
`const { Sidebar } = window.PrismDesignSystem_39d121;`
Props:
- `side?: "left" | "right"` — Which edge it attaches to.
- `hero?: React.ReactNode` — Fixed header content — a hero title or avatar + metadata.
- `headerExtra?: React.ReactNode` — Extra header content below the hero (e.g. a search field or CTA).
- `sections: SidebarSection[] | SidebarNavItem[]` — Nav sections (divided); a bare item array is treated as one section.
- `user?: SidebarUser` — Fixed footer user chip + optional pop-up menu.
- `isCollapsed?: boolean` — Collapse to an icon rail (hides labels, keeps icons).
- `ariaLabel?: string`
- `className?: string`

#### SideNav
SideNav — Prism component.
`const { SideNav } = window.PrismDesignSystem_39d121;`
Props:
- `brand?: React.ReactNode` — Brand lockup node (logo + wordmark).
- `groups: SideNavGroup[] | SideNavItem[]` — Groups of links, or a flat array of items (treated as one group).
- `footer?: React.ReactNode` — Footer slot, e.g. a user chip.
- `collapsible?: boolean` — Show a collapse-to-rail toggle.
- `isCollapsed?: boolean`
- `defaultCollapsed?: boolean`
- `onCollapsedChange?: (collapsed: boolean) => void`
- `className?: string`

### Lockups

#### PageHeader
PageHeader — Prism component.
`const { PageHeader } = window.PrismDesignSystem_39d121;`
Props:
- `breadcrumbs?: React.ReactNode`
- `lead?: React.ReactNode` — Leading icon / avatar beside the title block.
- `title: React.ReactNode`
- `status?: React.ReactNode` — Inline node next to the title (e.g. a status Badge).
- `subtitle?: React.ReactNode`
- `meta?: React.ReactNode | React.ReactNode[]` — A node, or an array of meta items rendered as a wrapping row.
- `actions?: React.ReactNode`
- `tabs?: React.ReactNode` — Tabs strip rendered below, separated by a rule.
- `divider?: boolean` — Add a bottom divider under the whole header.

#### SectionHeader
SectionHeader — Prism component.
`const { SectionHeader } = window.PrismDesignSystem_39d121;`
Props:
- `eyebrow?: React.ReactNode`
- `title: React.ReactNode`
- `description?: React.ReactNode`
- `actions?: React.ReactNode`
- `size?: "sm" | "md" | "lg"`
- `rule?: boolean` — Bottom rule under the header.
- `as?: keyof React.JSX.IntrinsicElements` — Heading tag for the title. Default "h2".

### Workflow

#### ActivityTimeline
ActivityTimeline — Prism component.
`const { ActivityTimeline } = window.PrismDesignSystem_39d121;`
Props:
- `items?: TimelineItem[]` — Flat chronological list.
- `groups?: { label: string; items: TimelineItem[] }[]` — Or date-grouped sections; takes precedence over `items`.
- `className?: string`

#### ReviewActionBar
ReviewActionBar — Prism component.
`const { ReviewActionBar } = window.PrismDesignSystem_39d121;`
Props:
- `summary?: React.ReactNode` — Left-side at-a-glance status, e.g. "3 of 5 sections complete".
- `meta?: React.ReactNode` — Secondary context line — reviewer, SLA, last updated.
- `onApprove?: () => void`
- `onRequestChanges?: () => void`
- `onReject?: () => void`
- `approveLabel?: string`
- `requestLabel?: string`
- `rejectLabel?: string`
- `pending?: boolean` — Busy state — disables actions, shows "Approving…".
- `disabled?: boolean`
- `sticky?: boolean` — Stick to the bottom of the review surface. Default true.
- `className?: string`

#### StatusPipeline
StatusPipeline — Prism component.
`const { StatusPipeline } = window.PrismDesignSystem_39d121;`
Props:
- `steps: PipelineStep[]` — Lifecycle nodes in order.
- `orientation?: "horizontal" | "vertical"`
- `size?: "sm" | "md"`
- `className?: string`

### States

#### EmptyState
EmptyState — Prism component.
`const { EmptyState } = window.PrismDesignSystem_39d121;`
Props:
- `variant?: EmptyVariant` — Picks the default glyph + tone. Default "empty".
- `size?: EmptySize` — Footprint. Default "section".
- `title?: React.ReactNode`
- `description?: React.ReactNode`
- `icon?: React.ReactNode` — Swap just the glyph (keeps the tinted disc).
- `illustration?: React.ReactNode` — Replace the disc entirely with custom artwork.
- `actions?: React.ReactNode` — Buttons / links rendered below the copy.
- `aux?: React.ReactNode` — Small auxiliary line under the actions (page/section only).

### Permissions

#### LockedOverlay
LockedOverlay — Prism component.
`const { LockedOverlay } = window.PrismDesignSystem_39d121;`
Props:
- `title?: React.ReactNode`
- `description?: React.ReactNode`
- `actions?: React.ReactNode`
- `icon?: React.ReactNode`
- `children?: React.ReactNode` — The real (blurred) content shown beneath the lock veil.

#### ReadOnlyBanner
ReadOnlyBanner — Prism component.
`const { ReadOnlyBanner } = window.PrismDesignSystem_39d121;`
Props:
- `title?: React.ReactNode`
- `actions?: React.ReactNode`
- `icon?: React.ReactNode`
- `children?: React.ReactNode`

#### RestrictedState
RestrictedState — Prism component.
`const { RestrictedState } = window.PrismDesignSystem_39d121;`
Props:
- `variant?: "no-access" | "locked" | "read-only"`
- `size?: "page" | "section" | "inline"`
- `title?: React.ReactNode`
- `description?: React.ReactNode`
- `actions?: React.ReactNode`
- `aux?: React.ReactNode`
- `icon?: React.ReactNode`

#### RoleBadge
RoleBadge — Prism component.
`const { RoleBadge } = window.PrismDesignSystem_39d121;`
Props:
- `role?: "owner" | "admin" | "editor" | "viewer" | string` — Known roles get an icon + tone; any other string renders neutral.
- `icon?: React.ReactNode`
- `children?: React.ReactNode` — Override the label (defaults to the capitalised role).

### Privacy

#### AuditLogEntry
AuditLogEntry — Prism component.
`const { AuditLogEntry } = window.PrismDesignSystem_39d121;`
Props:
- `actor?: React.ReactNode` — Who performed the action.
- `action: React.ReactNode` — The action phrase, e.g. "exported", "viewed record".
- `target?: React.ReactNode` — The object acted upon, e.g. a record name. Emphasised.
- `timestamp?: React.ReactNode` — When it happened (pre-formatted, locale-aware).
- `detail?: React.ReactNode` — Secondary description line.
- `meta?: React.ReactNode` — Tertiary metadata, e.g. IP address / device / location.
- `tone?: "neutral" | "create" | "edit" | "delete" | "view" | "access" | "alert"` — Action tone — drives the marker icon & colour.
- `icon?: React.ReactNode` — Override the marker icon (SVG path nodes).
- `className?: string`

#### ConsentBanner
ConsentBanner — Prism component.
`const { ConsentBanner } = window.PrismDesignSystem_39d121;`
Props:
- `title?: React.ReactNode`
- `description?: React.ReactNode`
- `acceptLabel?: React.ReactNode`
- `rejectLabel?: React.ReactNode`
- `manageLabel?: React.ReactNode`
- `onAcceptAll?: () => void` — Accept all optional cookies.
- `onReject?: () => void` — Reject non-essential cookies.
- `onManage?: () => void` — Open granular preferences. When omitted, the Manage button is hidden.
- `policyHref?: string` — Link to the full privacy policy.
- `policyLabel?: React.ReactNode`
- `position?: "inline" | "fixed"` — "inline" (in flow) or "fixed" (pinned to the bottom of the viewport).
- `icon?: React.ReactNode` — Override the leading icon (SVG path nodes).
- `className?: string`

#### MaskedField
MaskedField — Prism component.
`const { MaskedField } = window.PrismDesignSystem_39d121;`
Props:
- `value: string | number` — The sensitive value to display (string or number).
- `label?: React.ReactNode` — Optional caption above the value.
- `visibleChars?: number` — How many trailing characters stay visible when masked. Default 4.
- `maskChar?: string` — Character used for the mask. Default "•".
- `revealable?: boolean` — Show the reveal/hide toggle. Default true.
- `copyable?: boolean` — Show a copy-to-clipboard button. Default false.
- `defaultRevealed?: boolean` — Start revealed. Default false.
- `className?: string`

#### SensitivityTag
SensitivityTag — Prism component.
`const { SensitivityTag } = window.PrismDesignSystem_39d121;`
Props:
- `level?: "pii" | "phi" | "financial" | "confidential" | "restricted"` — Data classification level.
- `children?: React.ReactNode` — Custom label; defaults to the level's standard abbreviation.
- `icon?: React.ReactNode` — Override the leading icon (SVG path nodes).
- `className?: string`

#### SessionTimeoutDialog
SessionTimeoutDialog — Prism component.
`const { SessionTimeoutDialog } = window.PrismDesignSystem_39d121;`
Props:
- `open: boolean` — Whether the dialog is shown.
- `secondsLeft?: number` — Seconds remaining before automatic logout (you tick this down).
- `totalSeconds?: number` — Starting seconds — used to fill the countdown ring. Default 60.
- `title?: React.ReactNode`
- `description?: React.ReactNode`
- `extendLabel?: React.ReactNode`
- `logoutLabel?: React.ReactNode`
- `onExtend?: () => void` — Keep the session alive.
- `onLogout?: () => void` — Log out immediately.
- `className?: string`

### Typography

#### Blockquote
Blockquote — Prism component.
`const { Blockquote } = window.PrismDesignSystem_39d121;`
Props:
- `cite?: React.ReactNode` — Optional attribution shown below, prefixed with an em dash.
- `children?: React.ReactNode`
- `className?: string`

#### Eyebrow
Eyebrow — Prism component.
`const { Eyebrow } = window.PrismDesignSystem_39d121;`
Props:
- `as?: "p" | "span" | "div"` — Element to render. Default `p`.
- `children?: React.ReactNode`
- `className?: string`

#### Heading
Heading — Prism component.
`const { Heading } = window.PrismDesignSystem_39d121;`
Props:
- `level?: 1 | 2 | 3 | 4 | 5 | 6` — Semantic level — sets the rendered tag h1–h6 (keep the document outline correct).
- `size?: "hero" | "display" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"` — Visual scale override. Defaults to `h{level}`. `hero`/`display` are oversized.
- `children?: React.ReactNode`
- `className?: string`

#### Prose
Prose — Prism component.
`const { Prose } = window.PrismDesignSystem_39d121;`
Props:
- `html?: string` — Trusted HTML string (e.g. rendered markdown). Mutually exclusive with children.
- `children?: React.ReactNode`
- `className?: string`

#### Pullquote
Pullquote — Prism component.
`const { Pullquote } = window.PrismDesignSystem_39d121;`
Props:
- `attribution?: React.ReactNode` — Name / source shown below the quote.
- `role?: React.ReactNode` — Secondary line under the attribution (title, company).
- `accent?: boolean` — Color the quote in the brand accent.
- `children?: React.ReactNode`
- `className?: string`

#### Text
Text — Prism component.
`const { Text } = window.PrismDesignSystem_39d121;`
Props:
- `size?: "lead" | "body-lg" | "body" | "body-sm" | "small" | "caption"` — Role size. `lead` is an intro paragraph; `caption`/`small` are sub-body.
- `tone?: "secondary" | "tertiary" | "accent" | "positive" | "negative"` — Optional color tone. Omit for the default per-size color.
- `as?: "p" | "span" | "div"` — Element to render. Default `p`; use `span` for inline.
- `measure?: boolean` — Cap width to the readable measure (~68ch).
- `children?: React.ReactNode`
- `className?: string`

### TV & cinema

#### TVButton
TVButton — Prism component.
`const { TVButton } = window.PrismDesignSystem_39d121;`
Props:
- `variant?: "glass" | "primary" | "accent"` — Visual style. Default "glass".
- `round?: boolean` — Icon-only circular button.
- `icon?: string` — lucide icon name.
- `iconFill?: string` — Fill for the icon (e.g. "currentColor" for a solid play triangle).
- `art?: string` — Backdrop image URL to show when focused.
- `onSelect?: (e: React.MouseEvent) => void` — Convenience alias for onClick.
- `children?: React.ReactNode`

#### TVCard
TVCard — Prism component.
`const { TVCard } = window.PrismDesignSystem_39d121;`
Props:
- `shape?: "wide" | "poster" | "square"` — Tile aspect. Default "wide".
- `image?: string | React.CSSProperties` — CSS background for the art (a string, may include a gradient fallback) or a style object.
- `art?: string` — Hi-res URL the cinematic backdrop crossfades to on focus.
- `badge?: React.ReactNode` — Corner badge, e.g. "4K" / "HDR".
- `progress?: number` — Watch progress 0–100; renders a progress bar.
- `icon?: string` — lucide icon name, overlaid bottom-left (for utility tiles).
- `name?: React.ReactNode` — Title caption (revealed on focus for posters).
- `sub?: React.ReactNode` — Secondary caption line.
- `initial?: boolean` — Make this the scene's initial focus.
- `onSelect?: (e: React.MouseEvent) => void` — Convenience alias for onClick.
- `onLongPress?: (e: Event) => void` — Fired on remote long-press (hold OK).

#### TVEmergencyScreen
TVEmergencyScreen — Prism component.
`const { TVEmergencyScreen } = window.PrismDesignSystem_39d121;`
Props:
- `badge?: React.ReactNode` — Uppercase badge label. Default "Emergency".
- `icon?: string` — lucide icon name for the badge. Default "TriangleAlert".
- `title?: React.ReactNode` — Huge headline.
- `message?: React.ReactNode` — Primary message.
- `instructions?: React.ReactNode[]` — Step/instruction chips.

#### TVHero
TVHero — Prism component.
`const { TVHero } = window.PrismDesignSystem_39d121;`
Props:
- `kicker?: React.ReactNode` — Small uppercase eyebrow above the title.
- `title?: React.ReactNode` — Oversized feature title.
- `meta?: React.ReactNode[]` — Metadata chips; the first renders as a bordered tag (e.g. "4K HDR").
- `rating?: React.ReactNode` — Rating shown with a star.
- `synopsis?: React.ReactNode` — One- or two-line description.
- `actions?: React.ReactNode` — Action row, typically <TVButton>s.
- `art?: string` — Backdrop image URL the cinematic background shows for the hero.

#### TVIdleScreen
TVIdleScreen — Prism component.
`const { TVIdleScreen } = window.PrismDesignSystem_39d121;`
Props:
- `art?: string` — Ambient background image URL.
- `clock?: React.ReactNode` — Large clock readout.
- `meta?: React.ReactNode` — Secondary line (date, weather, room).
- `hint?: React.ReactNode` — Wake hint. Default "Press any button to wake".

#### TVLanguageSelector
The English name (e.g. "Spanish").
`const { TVLanguageSelector } = window.PrismDesignSystem_39d121;`
Props:
- `languages: TVLanguage[]`
- `columns?: number` — Columns in the grid. Default 3.
- `current?: string | number` — Currently selected code or index.
- `onSelect?: (language: TVLanguage, index: number) => void`
- `art?: string` — Backdrop URL when an option is focused.

#### TVMediaControls
TVMediaControls — Prism component.
`const { TVMediaControls } = window.PrismDesignSystem_39d121;`
Props:
- `title?: React.ReactNode` — Now-playing title.
- `sub?: React.ReactNode` — Subtitle (episode, channel, …).
- `position?: number` — Current position in seconds.
- `duration?: number` — Total duration in seconds.
- `buffered?: number` — Buffered-to position in seconds.
- `playing?: boolean` — Whether playback is active (toggles the play/pause glyph).
- `onPlayPause?: () => void`
- `onSkipBack?: () => void`
- `onSkipForward?: () => void`
- `skip?: number` — Skip amount in seconds (for labels). Default 10.
- `controls?: React.ReactNode` — Extra controls appended to the transport row.
- `art?: string` — Backdrop URL when a control is focused.

#### TVModal
TVModal — Prism component.
`const { TVModal } = window.PrismDesignSystem_39d121;`
Props:
- `open?: boolean` — Render the modal. Default true.
- `title?: React.ReactNode` — Heading.
- `children?: React.ReactNode` — Body; a string renders as a paragraph, otherwise rendered as-is.
- `actions?: React.ReactNode` — Action row, typically <TVButton>s.
- `onClose?: () => void` — Called when the modal should close (wire to the scene's onBack).

#### TVQRHandoff
TVQRHandoff — Prism component.
`const { TVQRHandoff } = window.PrismDesignSystem_39d121;`
Props:
- `title?: React.ReactNode` — Heading. Default "Continue on your phone".
- `note?: React.ReactNode` — Supporting instruction line.
- `code?: string | React.ReactNode` — QR as an image URL or an inline node (svg/canvas). Omit for a demo placeholder.

#### TVRail
TVRail — Prism component.
`const { TVRail } = window.PrismDesignSystem_39d121;`
Props:
- `title?: React.ReactNode` — Row heading.
- `more?: React.ReactNode` — Trailing affordance; default "See All ›". Pass null/"" to hide.
- `children?: React.ReactNode` — Cards, typically <TVCard>s.

#### TVRemoteHelp
Button glyphs for this row, e.g. ["↑","↓","←","→"].
`const { TVRemoteHelp } = window.PrismDesignSystem_39d121;`
Props:
- `rows?: TVRemoteHelpRow[]` — Override the default remote→action legend.

#### TVScene
TVScene — Prism component.
`const { TVScene } = window.PrismDesignSystem_39d121;`
Props:
- `scale?: "tv" | "cinema" | "desktop"` — Device tier; drives the cinema scale. Default "tv".
- `theme?: "dark" | "light"` — Color theme. TV surfaces are dark by default.
- `backdrop?: boolean` — Render the crossfading cinematic backdrop layers. Default true.
- `showHint?: boolean` — Show the corner remote hint. Default true.
- `hint?: React.ReactNode` — Custom hint content (replaces the default ↑↓←→ / ⏎ legend).
- `idleMs?: number` — Idle timeout in ms; after this with no input the scene shows its idle slot.
- `panAnchor?: number` — Where the focused row sits vertically when panning (0–1). Default 0.4.
- `topBar?: React.ReactNode` — Pinned top bar (e.g. <TVTopBar>); stays fixed while the body pans.
- `idle?: React.ReactNode` — Idle/screensaver slot (e.g. <TVIdleScreen>); shown when idle.
- `overlay?: React.ReactNode` — Overlay slot rendered above everything (e.g. <TVModal>, <TVEmergencyScreen>).
- `toasts?: React.ReactNode` — Toast slot (e.g. <TVToast>).
- `onBack?: () => void` — Called when Back/Esc is pressed.
- `onHome?: () => void` — Called when Home is pressed.
- `onMenu?: () => void` — Called when the Menu/context key is pressed.
- `onIdle?: (asleep: boolean) => void` — Called when the scene sleeps (true) or wakes (false).
- `children?: React.ReactNode`

#### TVTabs
TVTabs — Prism component.
`const { TVTabs } = window.PrismDesignSystem_39d121;`
Props:
- `items: TVTabItem[]` — Tabs as strings or { label, current, art } objects.
- `current?: number` — Index of the current tab (when items are plain strings).
- `onSelect?: (index: number, item: TVTabItem) => void` — Called with (index, item) when a tab is selected.
- `art?: string` — Backdrop image URL to show when a tab is focused.

#### TVToast
lucide icon name; defaults by tone.
`const { TVToast } = window.PrismDesignSystem_39d121;`
Props:
- `toasts: TVToastItem[]`

#### TVTopBar
TVTopBar — Prism component.
`const { TVTopBar } = window.PrismDesignSystem_39d121;`
Props:
- `brand?: React.ReactNode` — Brand: a string (renders the Prism mark + label) or a custom node.
- `end?: React.ReactNode` — Right-aligned status/account slot (clock, search, avatar).
- `children?: React.ReactNode` — Center content, typically <TVTabs>.