@oprt/cli 0.0.0-stage → 0.1.0

package/dist/contract.json

@@ -0,0 +1 @@
+{"version":"0.1.0","components":{"ActionStatus":{"description":"Stateless authoritative action outcome display with optional application-supported recovery callbacks. When the focused recovery is withdrawn or disabled, focus moves to the result, a group named by its label. Long text wraps.","props":{"state":{"type":"enum","values":["submitted","accepted","rejected","in-progress","complete","partial","failed","timeout","queued","running","cancel-requested","canceled"],"required":true,"description":"Authoritative application-supplied lifecycle state. Timeout does not imply rejection or completion. A cancel request does not establish cancellation; a supplied complete result can still follow cancel-requested."},"label":{"type":"string","required":true},"message":{"type":"string"},"requestId":{"type":"string"},"onRetry":{"type":"function","description":"Render Retry only when retry is supported. Does not change state."},"onCancel":{"type":"function","description":"Render Cancel only when cancellation is supported. Does not change state."},"retryLabel":{"type":"string","default":"Retry"},"cancelLabel":{"type":"string","default":"Cancel"},"disabled":{"type":"boolean","default":false,"description":"Disables recovery actions without hiding supplied outcomes."}},"composable_with":["Inspector","Alert","AppShell"],"never_inside":["Button"],"example":"<ActionStatus state={result.state} label=\"Refresh source\" message={result.message} requestId={result.id} onRetry={canRetry ? retry : undefined} />"},"Alert":{"description":"Inline status message with a severity icon, semantic left-edge accent, optional title, and optional dismiss control.","props":{"variant":{"type":"enum","values":["info","success","warning","error"],"required":true,"description":"Severity. Drives icon, accent color, and ARIA role (error/warning = alert, info/success = status)."},"title":{"type":"string","description":"Optional uppercase heading shown above the description."},"dismissible":{"type":"boolean","default":false,"description":"Render a trailing Dismiss button that calls onDismiss."},"onDismiss":{"type":"function","description":"Called when the Dismiss button is activated."}},"slots":{"children":{"type":"any","required":false}},"composable_with":["Card","CardBody"],"never_inside":["Alert","Button","Badge"],"example":"<Alert variant=\"error\" title=\"LINK LOST\">Telemetry stream dropped.</Alert>"},"AppShell":{"description":"In-page operational workspace with explicit identity, mode, connection, UTC reference time, and caller-supplied markings.","props":{"identity":{"type":"string","required":true,"description":"Application-supplied user or role identity; displayed verbatim."},"title":{"type":"string","default":"Workspace"},"mode":{"type":"enum","values":["live","paused","replay","training"],"default":"live","description":"Presentation context. Does not connect to services or freeze data itself."},"connection":{"type":"enum","values":["connected","connecting","reconnecting","offline","unknown"],"default":"unknown"},"time":{"type":"number","description":"Supplied reference time in epoch milliseconds, shown as YYYY-MM-DD HH:MM:SS UTC. Missing, null or invalid renders Time unknown; no running clock."},"markings":{"type":"node","description":"Caller-supplied policy/training markings. No classification is inferred."},"navigation":{"type":"node","description":"Navigation slot, usually a Sidebar, before the content in reading order. Beside the content when the shell is at least 640px wide (the shell's own width, not the window's); above it when narrower, capped at about eight rows and scrolling inside its named navigation landmark. The slot is the one navigation landmark, named from the title (\"<title> navigation\"); a Sidebar inside it adds no landmark of its own."},"toolbar":{"type":"node","description":"Toolbar slot under the header; it grows with a toolbar that wraps onto more rows."},"footer":{"type":"node"}},"slots":{"children":{"type":"ReactNode","required":true}},"composable_with":["Sidebar","Inspector","TreeView","OperationalStatus","TimeRange","DataGrid"],"never_inside":["Button"],"example":"<AppShell identity=\"Exercise analyst\" mode=\"training\" connection=\"offline\" markings=\"EXERCISE\" time={referenceTime}><DataGrid columns={columns} data={rows} getRowId={(row) => row.id} /></AppShell>"},"AttachmentPreview":{"description":"Named attachment metadata with an escaped text preview, safe image source or readable fallback.","props":{"label":{"type":"string","required":true},"attachment":{"type":"node","required":true,"description":"AttachmentMetadata object: stable id, name, sizeBytes, optional mediaType. No file reads or persistence are performed."},"preview":{"type":"node","required":true,"description":"AttachmentPreviewContent: {kind:'image',src,alt}, {kind:'text',text} or {kind:'unavailable',message}. Text is escaped and limited to 16,384 displayed characters. Images permit relative/http/https/blob sources and base64 PNG/JPEG/GIF/WebP/AVIF/BMP data URLs; decoding failures remain readable. No HTML or document iframe rendering."},"disabled":{"type":"boolean","default":false,"description":"Disables download/remove actions while preserving the preview."},"onDownload":{"type":"function","description":"Requests a download by attachment ID. Invocation does not prove a file was saved."},"onRemove":{"type":"function","description":"Requests removal by attachment ID. The caller owns replacement and focus if removing the entire preview."},"className":{"type":"string","description":"Classes for the root. Set --oprt-preview-max-height here to change the image and text preview cap from its 60vh default, for example [--oprt-preview-max-height:24rem]."}},"composable_with":["FileUpload","UploadQueue","Dialog"],"never_inside":["Button"],"example":"<AttachmentPreview label=\"Equipment file\" attachment={attachment} preview={{kind:\"text\",text:csvPreview}} onDownload={requestDownload} />"},"Avatar":{"description":"Square, initials-based avatar. Renders monospace initials from the name, or an image when src is provided. It is named once, at its root, by alt or by name, and keeps its size in a crowded row.","props":{"name":{"type":"string","required":true},"src":{"type":"string"},"alt":{"type":"string","description":"Accessible name of the avatar. Defaults to name. An empty string hides the avatar from assistive technology, for one beside a visible name."},"size":{"type":"enum","values":["sm","md","lg"],"default":"md"},"delayMs":{"type":"number","description":"Milliseconds to hold back the initials while an image loads. The initials show at once if the image fails."}},"composable_with":["Card","Sidebar","DataTable"],"never_inside":["Badge"],"example":"<Avatar name=\"Ada Lovelace\" />"},"Badge":{"description":"Read-only uppercase status display with outlined and text appearances. Use meaningful status wording so color is not the only cue; dots and icons are optional. A status never truncates: a label that does not fit wraps, long tokens break anywhere, and the badge grows with it. An outlined badge keeps its width, so a short status is never squeezed into a broken word beside a long sibling, and is never wider than its container; a text badge can shrink with its layout. Code and kbd retain their casing; wrap other case-sensitive names or IDs in a child with normal-case tracking-normal.","props":{"variant":{"type":"enum","values":["success","warning","error","info","neutral"],"default":"neutral"},"appearance":{"type":"enum","values":["outlined","text"],"default":"outlined","description":"Outlined adds a border, padding, and a minimum label height for standalone summaries: exactly that height for one line, and it grows when the label wraps, its lines centered. Text removes the box and wraps within available width for dense tables, lists, and metadata."},"size":{"type":"enum","values":["sm","md"],"default":"sm","description":"Typography size. One-line outlined labels are 20px (sm) or 24px (md) high with 8px inline padding. Text labels have no minimum height or padding. Explicit indicators use a 4px gap and align with the label's first line. Use Button or Toggle for actions."},"indicator":{"type":"enum","values":["dot","icon","none"],"default":"none","description":"Optional decorative indicator for either appearance and every variant. Defaults to none; meaningful visible status text supplies the non-color cue."},"icon":{"type":"node","description":"ReactNode rendered when indicator='icon'. Decorative; mark with aria-hidden."}},"composable_with":["DataTable","Card","Toolbar","Sidebar"],"never_inside":["Badge","Button"],"example":"<Badge variant=\"success\" indicator=\"dot\">ONLINE</Badge>"},"Breadcrumb":{"description":"Self-contained navigation trail rendered from a flat array of items, with the final (or flagged) item marked as the current page.","props":{"items":{"type":"array","items":{"label":"string","href":"string (optional — omit to render plain text)","current":"boolean (optional — defaults to true on the last item)"},"required":true,"description":"Ordered trail. Each entry: { label: string; href?: string; current?: boolean }. Exactly one item is current: the first that sets current:true, otherwise the last unless it sets current:false. Items after the current one keep their links. A trail that does not fit wraps onto more lines; an empty trail renders nothing."},"separator":{"type":"node","description":"ReactNode rendered between items (default: a small chevron-right SVG). Decorative; rendered aria-hidden. Pass a string like '/' for a slash separator."}},"composable_with":["Card"],"never_inside":["Breadcrumb"],"example":"<Breadcrumb items={[{label:\"HOME\",href:\"/\"},{label:\"OPS\",href:\"/ops\"},{label:\"TRACK 7\"}]} />"},"BulkActionBar":{"description":"Displays an explicit equipment selection snapshot, off-page count, source and filter context, with controlled bulk action requests.","props":{"label":{"type":"string","required":true},"selection":{"type":"node","required":true,"description":"BulkSelectionSnapshot: {id,scope:'visible'|'selected'|'all-matching',ids:readonly string[],sourceId,sourceRevision,filterDescription,capturedAt:number}. IDs must be unique and nonempty. The application resolves all matching IDs before supplying them."},"visibleIds":{"type":"array","required":true,"description":"Unique current visible-page IDs, used to explain retained selection outside that page."},"actions":{"type":"array","required":true,"description":"BulkAction[]: unique id, label, optional disabled, disabledReason and danger. A disabledReason shows under its action, as the action's description, only while the action is disabled."},"onAction":{"type":"function","required":true,"description":"(actionId, snapshot) => void. Receives an independent frozen copy, including its frozen IDs. Confirmation and authority checks belong to the application."},"onClearSelection":{"type":"function","description":"Requests clearing selection without changing it locally. Available to recover from malformed snapshots."},"disabled":{"type":"boolean","default":false},"headingLevel":{"type":"number","default":3,"description":"Label heading level: 2, 3, 4, 5, or 6. Choose it for the hosting surface's heading hierarchy."},"className":{"type":"string"}},"composable_with":["DataGrid","ConfirmDialog","BulkResults","JobStatus","DescriptionList"],"never_inside":["Button"],"example":"<BulkActionBar label=\"Equipment actions\" selection={snapshot} visibleIds={pageIds} actions={[{id:\"flag\",label:\"Flag for inspection\"}]} onAction={reviewAction} />"},"BulkResults":{"description":"Named per-equipment result table in selection order. Missing IDs remain Not reported; malformed result coverage is visible and never counted as success.","props":{"label":{"type":"string","required":true},"selection":{"type":"node","required":true,"description":"BulkSelectionSnapshot for the exact original request. IDs must be unique and nonempty."},"items":{"type":"array","required":true,"description":"BulkItemResult[]: {id,label,state:'queued'|'running'|'succeeded'|'failed'|'canceled'|'skipped',message?,retryable?}. Only snapshot IDs are accepted, once each."},"pendingRetryIds":{"type":"array","description":"Known unique IDs with a supplied pending retry request. Their actions remain disabled and previous results remain visible."},"onRetryRequest":{"type":"function","description":"(id) => void. Offered only for explicitly retryable failed items. Calling it does not change supplied outcomes."},"disabled":{"type":"boolean","default":false},"pageSize":{"type":"number","default":100,"description":"Rows per page. A request with more IDs than this is shown a page at a time, in selection order, with PREVIOUS PAGE and NEXT PAGE; the summary still counts every ID. Invalid or less-than-one values use 100; fractional values round down."},"headingLevel":{"type":"number","default":3,"description":"Label heading level: 2, 3, 4, 5, or 6. Choose it for the hosting surface's heading hierarchy."},"className":{"type":"string"}},"composable_with":["JobStatus","BulkActionBar","Badge","Button","DescriptionList"],"never_inside":["Button"],"example":"<BulkResults label=\"Inspection results\" selection={snapshot} items={results} pendingRetryIds={pendingIds} onRetryRequest={reviewRetry} />"},"ButtonGroup":{"description":"Segmented row or column of Buttons with collapsed shared borders. A row that does not fit wraps onto more rows and grows taller, so no action is hidden; attached segments keep their shared edges across rows and take the height of the tallest segment in their row, so the edges run straight when one label wrapped; in a detached group each segment keeps its own height. A column stacks. Attached segments stay square: the group turns off the cut a Button otherwise carries.","props":{"orientation":{"type":"enum","values":["horizontal","vertical"],"default":"horizontal"},"attached":{"type":"boolean","default":true}},"slots":{"children":{"type":"Button","required":true}},"composable_with":["Toolbar","CardFooter"],"example":"<ButtonGroup>\n  <Button>COPY</Button>\n  <Button>PASTE</Button>\n</ButtonGroup>"},"Button":{"description":"Primary interactive element for triggering actions. Short action labels display uppercase. A label that does not fit wraps and centers, and the button grows with it; a one-line button keeps its exact height, also in a row that stretches its items. A label made of text and an element (an identifier in code, a case-sensitive name in a span) wraps as one block, and an icon at either end stays beside it, drawn at 12, 16 and 20 px for sm, md and lg so it fits the one-line height. Code and kbd retain their casing, and code breaks anywhere; wrap other case-sensitive names or IDs in a child with normal-case tracking-normal oprt-wrap-anywhere. Shape: the primary variant carries a cut top-right corner at rest, and every enabled button takes a second cut at the opposite corner on hover, press and keyboard focus; an armed danger button fills with hazard stripes; segments of an attached ButtonGroup stay square. The fill and edge are drawn by a layer clipped to that shape, so bg-* and border-* classes do not change them: set --oprt-cut-fill and --oprt-cut-edge instead. The oprt-cut-none class squares off one button, or every button inside the element that carries it.","props":{"motion":{"type":"enum","values":["auto","none"],"default":"auto","description":"Tactile pointer/touch feedback. None disables motion; keyboard and system reduced motion are always immediate."},"variant":{"type":"enum","values":["primary","secondary","tertiary","danger","ghost"],"default":"primary"},"size":{"type":"enum","values":["sm","md","lg"],"default":"md"},"disabled":{"type":"boolean","default":false,"description":"Unavailable: dim text on the control outline, no hover, and it never activates. A Button that is a Tooltip or Popover trigger with an explanation stays in the Tab order (aria-disabled) so the explanation can be reached."},"asChild":{"type":"boolean","default":false,"description":"Renders the child element in place of the button, for example a link; the child's own content is not laid out for you, so put a label made of text and an element in one span. A disabled asChild Button is aria-disabled, leaves the Tab order and blocks the click and the middle click, but a browser still offers the link's address (open in a new tab, copy link) and a child can override the block: show unavailable navigation as plain text."}},"composable_with":["ButtonGroup","Toolbar","CardFooter"],"never_inside":["Button","Badge"],"example":"<Button variant=\"primary\" size=\"md\">DEPLOY</Button>"},"Calendar":{"description":"Controlled Gregorian calendar with date-only strings, keyboard day/month navigation, strict date bounds and visible configuration errors.","props":{"label":{"type":"string","required":true},"value":{"type":"string","required":true,"description":"YYYY-MM-DD in years 0001–9999, or null for no selection. Never an instant or a local Date."},"onValueChange":{"type":"function","required":true,"description":"Requests the chosen date-only string. The parent accepts it through value."},"min":{"type":"string","description":"Inclusive YYYY-MM-DD lower bound."},"max":{"type":"string","description":"Inclusive YYYY-MM-DD upper bound."},"disabled":{"type":"boolean","default":false},"readOnly":{"type":"boolean","default":false},"required":{"type":"boolean","default":false},"id":{"type":"string"},"className":{"type":"string"}},"composable_with":["FormSection","DatePicker"],"never_inside":["Button"],"example":"<Calendar label=\"Inspection date\" value={date} onValueChange={setDate} min=\"2026-01-01\" max=\"2026-12-31\" />"},"Card":{"description":"Bordered surface container. Use with CardHeader, CardBody, CardFooter.","props":{},"slots":{"children":{"type":"CardHeader | CardBody | CardFooter","required":true}},"composable_with":["DataTable","Sidebar"],"never_inside":["Card"],"example":"<Card>\n  <CardHeader>STATUS</CardHeader>\n  <CardBody>All systems nominal.</CardBody>\n</Card>"},"CardHeader":{"description":"Uppercase card title row, allows text + Badge + small buttons. Code and kbd retain their casing; wrap other names, IDs, or supporting text in a child with normal-case tracking-normal.","props":{},"slots":{"children":{"type":"text | Badge | Button(size=sm)","required":false}},"composable_with":["Card"],"never_inside":["CardHeader","CardBody","CardFooter"],"example":"<CardHeader>STATUS</CardHeader>"},"CardBody":{"description":"Card body slot — arbitrary content, preserving original casing.","props":{},"slots":{"children":{"type":"any","required":false}},"composable_with":["Card"],"never_inside":["CardHeader","CardBody","CardFooter"],"example":"<CardBody>All systems nominal.</CardBody>"},"CardFooter":{"description":"Card footer slot — action row, allows Button and ButtonGroup.","props":{},"slots":{"children":{"type":"Button | ButtonGroup","required":false}},"composable_with":["Card"],"never_inside":["CardHeader","CardBody","CardFooter"],"example":"<CardFooter><Button variant=\"primary\">DEPLOY</Button></CardFooter>"},"Chart":{"description":"Native SVG charts with stable series identity and exact data tables. Line, area, and bar support shared pointer/keyboard readouts and an optional controlled observation window.","props":{"label":{"type":"string","required":true,"description":"Visible chart heading and accessible graphic name."},"series":{"type":"array","items":{"id":"string (unique, stable)","label":"string","data":"readonly ChartPoint[]","color":"1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 (optional categorical token)"},"required":true,"description":"Readonly ChartSeries[] with unique stable IDs. Points are { x: number, y: number | null, label?: string }; null and non-finite coordinates are missing. Line/area preserve authored order; use ascending x. Heatmap requires unique x within each series."},"variant":{"type":"enum","values":["line","area","bar","scatter","histogram","heatmap"],"default":"line"},"fill":{"type":"enum","values":["solid","hatched"],"default":"solid","description":"Area and bar fill treatment. Hatching adds texture while outlines carry series color and measurement."},"description":{"type":"string","description":"Visible supporting context, also included in the graphic description."},"xLabel":{"type":"string","description":"X axis label. Defaults to Sample, or Value for histograms."},"xUnit":{"type":"string","description":"X axis unit. Histogram x values use unit instead."},"yLabel":{"type":"string","description":"Y axis label. Defaults to Value, or Count for histograms."},"unit":{"type":"string","description":"Measured value unit; shown on axes, thresholds, and the heatmap scale."},"formatX":{"type":"function","description":"(finiteX: number) => string. Formats x tick labels, the full start and end of the window in the line under the plot, and sample positions when no authored point label exists. For a time axis, return YYYY-MM-DD HH:MM:SS and set xUnit=\"UTC\". Histogram bin bounds remain numeric."},"hiddenSeries":{"type":"array","description":"Controlled hidden series IDs. Omit for internal visibility state. Hidden series are excluded from scales; raw data inspection still includes them."},"onHiddenSeriesChange":{"type":"function","description":"(ids: string[]) => void. Reports the requested hidden IDs; supplied hiddenSeries remains controlled."},"disabled":{"type":"boolean","default":false,"description":"Disables legend and range changes. Pointer/keyboard inspection and View data remain available."},"rangeSelection":{"type":"boolean","default":false,"description":"Shows a miniature overview with draggable and keyboard-operable start/end handles for line, area, and bar. Needs a non-zero x domain and at least one finite sample coordinate. Other variants ignore it."},"xDomain":{"type":"node","description":"Optional ChartRange { start, end } defining the full observation bounds for line/area/bar, including periods without measurements. Defaults to the extent of supplied x values. Pass snapshot bounds when linking time controls."},"range":{"type":"node","description":"Controlled ChartRange { start: number, end: number } in x units. Filters line/area/bar samples inclusively. Overlapping bounds clamp to the full domain; invalid or reversed bounds use it in full. Valid disjoint controlled ranges stay empty. Omit for internal range state. Supply full history for the overview."},"onRangeChange":{"type":"function","description":"(range: ChartRange) => void. Reports requested x bounds from range handles or reset. Supplied range remains controlled. Keyboard steps span 0.1% of the full domain; handles do not snap to observations."},"cursor":{"type":"number","description":"Optional supplied x position for line/area/bar. Draws an independent review marker without selecting or interpolating a measurement. Invalid/out-of-window positions are omitted; null clears it."},"cursorLabel":{"type":"string","default":"Review position","description":"Visible label for the supplied marker. Its value uses formatX and xUnit."},"bins":{"type":"number","default":10,"description":"Histogram bin count, floored and clamped to 1–100. Non-finite values use 10. Constant data uses one bin. Each histogram bins valid point.y values on a shared range; the last bin includes the maximum."},"threshold":{"type":"node","description":"Optional { value: number, label: string } on the measured y axis (count for histograms). Adds a dashed line and text. Non-finite values and heatmap thresholds are ignored."}},"composable_with":["Card","DataGrid","TimeRange","SplitPane"],"never_inside":["Chart","Button"],"example":"<Chart label=\"Link latency\" unit=\"ms\" xLabel=\"Elapsed\" xUnit=\"s\" series={[{ id: \"alpha\", label: \"Alpha\", data: [{ x: 0, y: 22 }, { x: 1, y: null }, { x: 2, y: 25 }] }]} />"},"Checkbox":{"description":"Binary or tri-state checkbox. Shared OPERATOR Check icon when checked and Minus icon when indeterminate, inside an accent outline.","props":{"motion":{"type":"enum","values":["auto","none"],"default":"auto","description":"Tactile pointer/touch feedback. None disables motion; keyboard and system reduced motion are always immediate."},"checked":{"type":"enum","values":["true","false","indeterminate"],"description":"Pass boolean for binary state, or 'indeterminate' for tri-state."},"defaultChecked":{"type":"enum","values":["true","false","indeterminate"]},"onCheckedChange":{"type":"function","description":"(checked: boolean | 'indeterminate') => void. Called when the operator checks or clears the box; the only way to observe a change."},"disabled":{"type":"boolean","default":false},"required":{"type":"boolean","default":false},"size":{"type":"enum","values":["sm","md","lg"],"default":"md"},"name":{"type":"string"},"value":{"type":"string"}},"composable_with":["Field"],"never_inside":["Button","Badge"],"example":"<Field label=\"ACKNOWLEDGE\" required>\n  <Checkbox />\n</Field>"},"Collapsible":{"description":"Accordion container whose CollapsibleItem children expand and collapse; single or multiple open at a time.","props":{"motion":{"type":"enum","values":["auto","none"],"default":"auto","description":"Tactile pointer/touch feedback. None disables motion; keyboard and system reduced motion are always immediate."},"type":{"type":"enum","values":["single","multiple"],"default":"single"},"defaultValue":{"type":"union","types":["string","array"],"description":"Initial open item: a string (type=single, empty for none) or a string[] (type=multiple)."},"value":{"type":"union","types":["string","array"],"description":"Controlled open item: a string (type=single, empty for none) or a string[] (type=multiple)."},"onValueChange":{"type":"function"},"collapsible":{"type":"boolean","default":true}},"slots":{"children":{"type":"CollapsibleItem","required":true}},"composable_with":["Card"],"example":"<Collapsible type=\"single\">\n  <CollapsibleItem value=\"net\" title=\"NETWORK\">All links nominal.</CollapsibleItem>\n  <CollapsibleItem value=\"pwr\" title=\"POWER\">Battery 98%.</CollapsibleItem>\n</Collapsible>"},"CollapsibleItem":{"description":"A single expandable section with an uppercase trigger title and collapsible content body.","props":{"value":{"type":"string","required":true},"title":{"type":"string","required":true},"disabled":{"type":"boolean","default":false}},"slots":{"children":{"type":"any","required":true}},"composable_with":["Collapsible"],"example":"<CollapsibleItem value=\"net\" title=\"NETWORK\">All links nominal.</CollapsibleItem>"},"CollectionState":{"description":"Named collection state with supplied explanation and recovery actions.","props":{"variant":{"type":"enum","values":["empty","no-results","error","access-denied"],"required":true,"description":"Supplied collection outcome. Empty means no source records; no-results means no matching records."},"title":{"type":"string","required":true,"description":"Visible heading that names the region and explains its state."},"description":{"type":"node","description":"Optional supporting content associated with the region."},"actions":{"type":"node","description":"Caller-supplied recovery controls. Activation never changes the supplied collection state."},"headingLevel":{"type":"number","default":2,"description":"Native heading level from 2 through 6; match the surrounding document hierarchy."},"aria-live":{"type":"enum","values":["off","polite","assertive"],"description":"Optional caller-owned live-region behavior. No announcement is added by default."},"className":{"type":"string"}},"composable_with":["Button","Link","DataGrid","PropertyFilter"],"never_inside":["Button"],"example":"<CollectionState variant=\"error\" title=\"Equipment unavailable\" description=\"The source did not respond.\" actions={<Button onClick={retry}>Retry</Button>} />"},"ComboBox":{"description":"Searchable single-value selection with keyboard navigation and caller-supplied asynchronous results.","props":{"motion":{"type":"enum","values":["auto","none"],"default":"auto","description":"Tactile pointer arrival, exit, and open-state chevron rotation; keyboard, assistive activation, and system reduced motion remain immediate."},"options":{"type":"array","items":{"value":"string (required, unique)","label":"string (required)","disabled":"boolean (default false)"},"required":true,"description":"Available options. Values must be unique and stable; labels preserve authored case."},"value":{"type":"string","description":"Controlled selected option value, or null to clear selection. Omit for internal selection state."},"defaultValue":{"type":"string","description":"Initial selected option value for uncontrolled use."},"onValueChange":{"type":"function","description":"(value: string | null) => void. Called on option selection or when clearing the input clears the selected value."},"inputValue":{"type":"string","description":"Controlled search input text; independent from the selected value."},"onInputChange":{"type":"function","description":"(text: string) => void. Use with inputValue for caller-owned search and asynchronous results."},"label":{"type":"string","description":"Visible accessible label. Alternatively, use Field or aria-label."},"aria-label":{"type":"string","description":"Accessible name when there is no visible label or surrounding Field."},"aria-describedby":{"type":"string","description":"Description IDs; otherwise inherits the surrounding Field help or error message."},"placeholder":{"type":"string"},"disabled":{"type":"boolean","default":false},"required":{"type":"boolean","default":false},"size":{"type":"enum","values":["sm","md","lg"],"default":"md"},"invalid":{"type":"boolean","default":false,"description":"Error appearance and aria-invalid; otherwise inherits Field error state."},"loading":{"type":"boolean","default":false,"description":"Announces loading and marks input busy. Supplied options remain selectable unless disabled."},"filter":{"type":"boolean","default":true,"description":"Language-sensitive contains matching by default. Set false when the caller already filters options or supplies asynchronous results."},"emptyMessage":{"type":"string","default":"No options found."},"name":{"type":"string","description":"Form field name; submits the selected option value."},"id":{"type":"string","description":"Input ID; otherwise inherits Field or React Aria's generated ID."}},"composable_with":["Field","DataGrid"],"never_inside":["Button","Badge"],"example":"<ComboBox\n  label=\"STATION\"\n  options={[{ value: \"alpha\", label: \"Alpha station\" }, { value: \"bravo\", label: \"Bravo station\" }]}\n  value={station}\n  onValueChange={setStation}\n  placeholder=\"Search stations…\"\n/>"},"CommandPalette":{"description":"Modal command launcher: search field over a filtered, keyboard-navigable action list. Command and group labels display uppercase; search input, empty messages, and keyboard shortcuts retain their casing.","props":{"commands":{"type":"array","required":true},"placeholder":{"type":"string","default":"Type a command…"},"emptyMessage":{"type":"string","default":"No results"},"open":{"type":"boolean"},"defaultOpen":{"type":"boolean","default":false,"description":"Initial open state when the palette manages its own state."},"onOpenChange":{"type":"function"}},"composable_with":[],"never_inside":["CommandPalette"],"example":"<CommandPalette\n  open={open}\n  onOpenChange={setOpen}\n  commands={[\n    { id: \"new\", label: \"New File\", shortcut: \"⌘N\", onSelect: () => {} },\n    { id: \"open\", label: \"Open…\", shortcut: \"⌘O\", onSelect: () => {} },\n  ]}\n/>"},"ConfirmDialog":{"description":"Confirmation modal for destructive or high-consequence actions. Composes Dialog + Button (+ Field + Input for typed confirmation). Flat API: pass title, optional description, onConfirm, and an optional confirmPhrase the user must type exactly to enable Confirm.","props":{"title":{"type":"string","required":true},"description":{"type":"string"},"confirmLabel":{"type":"string","default":"CONFIRM"},"cancelLabel":{"type":"string","default":"CANCEL"},"confirmVariant":{"type":"enum","values":["primary","danger"],"default":"primary"},"confirmPhrase":{"type":"string"},"onConfirm":{"type":"function","required":true},"size":{"type":"enum","values":["sm","md","lg"],"default":"md"},"open":{"type":"boolean"},"defaultOpen":{"type":"boolean"},"onOpenChange":{"type":"function"}},"slots":{"trigger":{"type":"focusable element | text (text renders a Button)"}},"composable_with":["Card","Toolbar"],"never_inside":["Dialog","ConfirmDialog"],"example":"<ConfirmDialog\n  title=\"DELETE UNIT\"\n  description=\"This permanently removes UNIT-07 from the roster.\"\n  confirmPhrase=\"UNIT-07\"\n  confirmVariant=\"danger\"\n  confirmLabel=\"DELETE\"\n  trigger={<Button variant=\"danger\">DELETE</Button>}\n  onConfirm={() => deleteUnit(\"UNIT-07\")}\n/>"},"ContextMenu":{"description":"Context actions with a focusable surface and an equivalent visible menu button.","props":{"label":{"type":"string","required":true,"description":"Names the surface; the visible button is named `${label} actions`."},"items":{"type":"array","required":true,"description":"Stable unique id and readable label, with optional shortcut text, disabled and danger flags."},"onAction":{"type":"function","required":true,"description":"Receives the selected item ID. Both activation paths use the same supplied actions."},"disabled":{"type":"boolean","default":false,"description":"Disables both menu activation paths without disabling supplied child content."},"emptyMessage":{"type":"string","default":"No actions available","description":"Non-interactive row the menu shows when items is empty."},"className":{"type":"string"}},"slots":{"children":{"type":"ReactNode","required":true}},"composable_with":["InlineEdit","DataGrid"],"never_inside":["Button"],"example":"<ContextMenu label=\"Alpha relay\" items={[{id: \"inspect\", label: \"Inspect\"}]} onAction={handleAction}>EQ-01</ContextMenu>"},"CoordinateInput":{"description":"Decimal-degree latitude and longitude fields with bounded validation and explicit unknown or invalid position states.","props":{"label":{"type":"string","default":"Coordinates"},"value":{"type":"node","description":"Controlled { latitude: number | null, longitude: number | null }. Latitude is -90…90; longitude is -180…180, inclusive. Null axes are unknown."},"defaultValue":{"type":"node","description":"Initial uncontrolled coordinates. Defaults to both axes null."},"onValueChange":{"type":"function","description":"(position: CoordinateValue) => void. Only valid axis edits or a cleared null axis are emitted; the other axis is preserved. Does not normalize or wrap out-of-range input."},"onValidationChange":{"type":"function","description":"(invalid: boolean) => void. Reports aggregate invalid state initially and on change, including local typed drafts, supplied values and error. Missing/null axes are unknown rather than invalid; callers separately require both axes before Go-to or submission."},"disabled":{"type":"boolean","default":false},"description":{"type":"string"},"error":{"type":"string"},"latitudeName":{"type":"string","description":"Native form field name for latitude."},"longitudeName":{"type":"string","description":"Native form field name for longitude."}},"composable_with":["Card","NumberInput"],"never_inside":["Button"],"example":"<CoordinateInput label=\"Observation position\" value={position} onValueChange={setPosition} />"},"CopyButton":{"description":"Copies a supplied exact string with visible pending, success and failure feedback.","props":{"value":{"type":"string","required":true,"description":"Exact string to copy; whitespace and precision are preserved."},"label":{"type":"string","required":true,"description":"Accessible action name identifying the value. Feedback reads this label, then the outcome: \"Copy equipment ID: copied\"."},"size":{"type":"enum","values":["sm","md","lg"],"default":"md"},"disabled":{"type":"boolean","default":false},"className":{"type":"string","description":"Classes applied to the native action button."},"onCopy":{"type":"function","description":"Receives { value } after the requested write resolves. Suppressed after context changes or unmount."},"onCopyError":{"type":"function","description":"Receives { value, error } if writing fails or is unavailable. Suppressed after context changes or unmount."}},"composable_with":["DescriptionList","EntityPreview","Popover","Inspector","Toolbar"],"never_inside":["Button","Link"],"example":"<CopyButton value={equipment.id} label=\"Copy equipment ID\" size=\"sm\" />"},"DataGrid":{"description":"Native table with stable-ID selection, sorting, controlled column widths and pinning, saved-view state, pagination, and optional virtualization.","props":{"columns":{"type":"array","items":{"key":"string (required, unique)","label":"string (required)","as":"text | number | code | timestamp | badge","highlight":"boolean (default: false)","width":"string (CSS width; a px value seeds the column width)","align":"left | right","sortable":"boolean","render":"(value, row) => ReactNode","compare":"(a, b) => number","minWidth":"number (CSS pixels; default 96; minimum 48)","maxWidth":"number (CSS pixels; default 640)"},"required":true,"description":"DataTableColumn descriptors plus render(value, originalRow) for display and compare(a, b) for raw-value sorting. compare must be pure; a new compare function sorts again, so define columns outside render or memoize them. Columns sort unless sortable is false. Keys must be unique."},"data":{"type":"array","required":true,"description":"Client mode: complete filtered row set. Server mode: current page only; order and row count are preserved."},"getRowId":{"type":"function","required":true,"description":"(originalRow) => string. Return a unique, stable ID across filtering, sorting, and pagination; do not use an array index. Keep it pure: IDs are read again only when data changes, not when only the function does."},"caption":{"type":"string","default":"Data grid","description":"Accessible native table caption and controls group name."},"selectedRowIds":{"type":"array","description":"Controlled IDs. Supplying this or onSelectionChange enables selection. IDs outside the displayed data are preserved."},"onSelectionChange":{"type":"function","description":"(ids: string[]) => void. Select page changes only current-page IDs. Without selectedRowIds, selection is stored internally."},"sort":{"type":"node","description":"Controlled { key: string, direction: 'asc' | 'desc' } or null for source order. Omit for internal sorting state. Uses raw values before custom rendering and announces the active direction with aria-sort on the corresponding table header."},"onSortChange":{"type":"function","description":"(sort: DataGridSort | null) => void. Server mode only reports the requested sort; the caller supplies sorted rows."},"page":{"type":"number","default":1,"description":"One-based controlled page. Omit for internal pagination state. Out-of-range values are clamped and reported once through onPageChange."},"onPageChange":{"type":"function","description":"(page: number) => void. A supplied page remains controlled until its owner updates it."},"pageSize":{"type":"number","default":10,"description":"Rows per client page and denominator for server page counts. Invalid or less-than-one values use 10; fractional values round down."},"mode":{"type":"enum","values":["client","server"],"default":"client"},"rowCount":{"type":"number","description":"Total filtered row count in server mode. Defaults to data.length; provide the total to enable navigation beyond the supplied page."},"visibleColumnKeys":{"type":"array","description":"Controlled displayed column keys. Omit for internal visibility state; all columns are visible initially. An empty list shows a recovery message."},"onVisibleColumnsChange":{"type":"function","description":"(keys: string[]) => void. Receives visibility changes from the COLUMNS controls."},"columnWidths":{"type":"node","description":"Controlled Record<columnKey, CSS pixel width>. Omit for internal widths. Values are clamped to each column's minWidth/maxWidth; default width is 160 or a pixel width from the descriptor. Stored keys outside the current columns are preserved in resize callbacks."},"onColumnWidthsChange":{"type":"function","description":"(widths: DataGridColumnWidths) => void. Columns controls support direct numeric entry, Arrow keys (8 pixels), and Home/End (bounds)."},"pinnedColumnKeys":{"type":"array","description":"Controlled leading-edge pinned keys in display order. Omit for internal state. Hidden pinned columns retain their preference; unknown keys are ignored for display."},"onPinnedColumnsChange":{"type":"function","description":"(keys: string[]) => void. Called by keyboard-accessible Pin checkboxes in Columns."},"virtualization":{"type":"node","description":"Opt-in { height: number, rowHeight?: number, estimateRowHeight?: number, overscan?: number }, CSS pixels. Fixed rowHeight clips overlong cell contents; omit rowHeight to measure wrapped rows with ResizeObserver, starting at estimateRowHeight (default 40). Minimum row height 24; default overscan 3, minimum 1. Client mode windows all filtered rows; server mode windows only the supplied page."},"viewMode":{"type":"enum","values":["paginated","virtualized"],"description":"Controlled display mode. Virtualization must be supplied for virtualized mode. Defaults to virtualized with configuration, paginated without it. The built-in toggle always offers a paginated native-table alternative."},"onViewModeChange":{"type":"function","description":"(mode: DataGridViewMode) => void. Controlled owners must apply the requested mode for the fallback toggle to update the table."},"loading":{"type":"boolean","default":false,"description":"Marks the table busy, announces loading, and disables grid-owned controls and row activation while retaining supplied data."},"disabled":{"type":"boolean","default":false,"description":"Disables grid-owned actions and row activation. Custom interactive cell content remains the caller's responsibility."},"dense":{"type":"boolean","default":false},"emptyMessage":{"type":"string","default":"No results."},"onRowClick":{"type":"function","description":"(originalRow, indexInSuppliedData) => void. Uses the existing DataTable's native first-cell button; independent cell controls do not activate the row."}},"composable_with":["Card","ComboBox"],"never_inside":["DataTable","DataGrid"],"example":"<DataGrid\n  caption=\"Station telemetry\"\n  columns={[{ key: \"name\", label: \"STATION\" }, { key: \"latency\", label: \"LATENCY / MS\", as: \"number\" }]}\n  data={rows}\n  getRowId={(row) => String(row.id)}\n  selectedRowIds={selected}\n  onSelectionChange={setSelected}\n  pageSize={10}\n/>"},"DataTable":{"description":"Data-driven table with sorting, highlighting, and cell rendering.","props":{"columns":{"type":"array","items":{"key":"string (required)","label":"string (required)","as":"enum [text, number, code, timestamp, badge] (default: text)","highlight":"boolean (default: false)","sortable":"boolean (default: inherits from table)","width":"string","align":"enum [left, right]","render":"(value, originalRow) => ReactNode; called for mounted cells only"},"required":true,"description":"Column descriptors. Each item: { key: string (required), label: string (required), as?: 'text'|'number'|'code'|'timestamp'|'badge' (default 'text'), highlight?: boolean (default false), sortable?: boolean (default inherits table 'sortable'), width?: string (CSS width), align?: 'left'|'right' }. 'number'/'timestamp' cells render mono + right-aligned; with columnWidths a 'number' cell wraps only between digit groups and keeps a unit with its last group; 'badge' maps the value to a text-only Badge (success/warning/error/info use their semantic color, otherwise neutral). Use a custom render for outlined badges or an explicit indicator."},"data":{"type":"array","required":true,"description":"Array of row objects (Record<string, unknown>) keyed by column.key."},"sortable":{"type":"boolean","default":false,"description":"Enables column header sort buttons (cycles ascending → descending → unsorted) when sortDescriptor is omitted. Per-column 'sortable: false' opts a column out. Designed for about 150 rows without virtualization: development warns above that; use DataGrid or virtualization for larger result sets."},"sortDescriptor":{"type":"node","description":"Read-only { key: string, direction: 'asc' | 'desc' } metadata for rows already sorted by the caller. The matching header exposes aria-sort and a direction glyph; data order is preserved and internal header sort controls are disabled even when sortable is true. Pass null for externally managed source order. Omit to retain existing internal sortable behavior."},"dense":{"type":"boolean","default":false,"description":"Compact rows: 32px minimum height with 4px vertical cell padding. Default rows use a 40px minimum and 8px padding. Rows grow with content; explicit virtualization.rowHeight overrides these dimensions."},"onRowClick":{"type":"function","description":"(row, indexInSuppliedData) => void. The index is the row's index in data, also after a header sort. Adds a native action button to the first cell while preserving table row semantics. Text and number cells become the button label; React content remains independent beside an Open row button. Nested controls and editable content do not activate the row. Enter/Space activate the row button."},"getRowId":{"type":"function","description":"(row, index) => string. Stable React key per row; falls back to the index. Keep it pure: IDs are read again only when data changes, not when only the function does."},"caption":{"type":"string","description":"Accessible table caption, visually hidden (sr-only). It also names the table's scroll region, '<caption> scroll viewport': a table whose columns do not fit scrolls sideways inside its own box, which is a keyboard tab stop while it scrolls; the page never widens."},"emptyMessage":{"type":"string","default":"No results.","description":"Message spanning all columns when data is empty."},"columnWidths":{"type":"node","description":"Record<columnKey, CSS pixel width> for fixed table layout. Unspecified columns use 160 pixels. DataGrid provides bounded user controls."},"pinnedColumnKeys":{"type":"array","description":"Column keys to keep sticky at the leading edge. Supply pinned columns first in columns, in the desired order, with columnWidths for accurate offsets. DataGrid manages this ordering automatically."},"virtualization":{"type":"node","description":"Optional {height, rowHeight?, estimateRowHeight?, overscan?}. Native rows are windowed in a labeled scrolling region. Omit rowHeight for measured variable heights; fixed rows clip overlong content. Prefer DataGrid for its built-in paginated fallback. Stable getRowId is required for retained focus across data changes."},"rowIndexOffset":{"type":"number","default":0,"description":"Zero-based offset into the complete result set. Data rows announce offset + local index + 2, including the header."},"totalRowCount":{"type":"number","description":"Total data rows excluding the header. Native table aria-rowcount includes the header as one additional row."}},"composable_with":["Card"],"never_inside":["DataTable"],"example":"<DataTable\n  columns={[\n    { key: \"service\", label: \"SERVICE\" },\n    { key: \"latency\", label: \"LATENCY\", as: \"number\", highlight: true },\n    { key: \"status\", label: \"STATUS\", as: \"badge\" }\n  ]}\n  data={rows}\n  sortable\n/>"},"DatePicker":{"description":"Controlled Gregorian date-only picker with segmented editing, calendar overlay and a draft-validity signal for incomplete or rejected edits.","props":{"label":{"type":"string","required":true},"value":{"type":"string","required":true,"description":"YYYY-MM-DD in years 0001–9999, or null. Values contain no time or timezone."},"onValueChange":{"type":"function","required":true,"description":"Requests a complete valid date or null after clearing. Invalid or coerced dates are not emitted."},"onDraftValidityChange":{"type":"function","description":"Callback (valid, { pending }). Pending identifies uncommitted local edits; pristine required-empty or malformed supplied values are invalid but not pending. Reports initial and changed validity. False for partial, impossible, out-of-bounds or required-empty edits. Block Review/Save while false, even if value still contains a previous valid date."},"min":{"type":"string","description":"Inclusive YYYY-MM-DD lower bound."},"max":{"type":"string","description":"Inclusive YYYY-MM-DD upper bound."},"disabled":{"type":"boolean","default":false},"readOnly":{"type":"boolean","default":false},"required":{"type":"boolean","default":false},"motion":{"type":"enum","values":["auto","none"],"default":"auto"},"id":{"type":"string","description":"ID of the focusable date-control group. Focusing it enters the first segment; the forwarded HTMLDivElement ref has the same behavior."},"className":{"type":"string"}},"composable_with":["FormSection","FormErrorSummary"],"never_inside":["Button"],"example":"<DatePicker id=\"inspection-date\" label=\"Inspection date\" value={date} onValueChange={setDate} onDraftValidityChange={setDateValid} required />"},"DateRangePicker":{"description":"Controlled ordered Gregorian date range with independently editable start and end fields and separate endpoint calendars. Equal-day ranges are valid.","props":{"label":{"type":"string","required":true},"value":{"type":"node","required":true,"description":"{ start: YYYY-MM-DD, end: YYYY-MM-DD }, or null. Dates carry no time or time zone."},"onValueChange":{"type":"function","required":true,"description":"Requests complete ordered ranges or null when both endpoints are cleared. Partial and reversed ranges are retained as invalid drafts."},"onDraftValidityChange":{"type":"function","description":"Callback (valid, { pending }). Pending identifies uncommitted local edits; pristine required-empty or malformed supplied values are invalid but not pending. False for incomplete, invalid, out-of-bounds, required-empty, or unaccepted range drafts. Block Review/Save while false."},"startLabel":{"type":"string","default":"Start date"},"endLabel":{"type":"string","default":"End date"},"min":{"type":"string","description":"Inclusive YYYY-MM-DD lower bound for both endpoints."},"max":{"type":"string","description":"Inclusive YYYY-MM-DD upper bound for both endpoints."},"disabled":{"type":"boolean","default":false},"readOnly":{"type":"boolean","default":false},"required":{"type":"boolean","default":false},"id":{"type":"string","description":"ID of the focusable group. Focusing it or its forwarded HTMLDivElement ref enters the first start-date segment."},"className":{"type":"string"}},"composable_with":["FormSection","FormErrorSummary","DatePicker"],"never_inside":["Button"],"example":"<DateRangePicker id=\"inspection-window\" label=\"Inspection window\" value={range} onValueChange={setRange} onDraftValidityChange={setRangeValid} required />"},"DateTimePicker":{"description":"Controlled instant editor with an explicit IANA time zone, minute-level date/time drafts, Apply, and explicit daylight-saving overlap choices.","props":{"label":{"type":"string","required":true},"value":{"type":"number","required":true,"description":"Integer epoch milliseconds, or null. Untouched values retain their supplied seconds and milliseconds."},"timeZone":{"type":"string","required":true,"description":"IANA time zone used to display and resolve the wall-time draft. Visible beside the fields."},"onValueChange":{"type":"function","required":true,"description":"Requests an instant or null only after Apply. Minute-level edits commit with zero seconds and milliseconds."},"onDraftValidityChange":{"type":"function","description":"Callback (valid, { pending }). Pending identifies uncommitted local edits; pristine required-empty or malformed supplied values are invalid but not pending. False for invalid, incomplete, or unapplied edits. Returns true when the host accepts Apply or supplies another valid value. Block Review/Save while false."},"min":{"type":"number","description":"Inclusive epoch-millisecond lower bound."},"max":{"type":"number","description":"Inclusive epoch-millisecond upper bound."},"disabled":{"type":"boolean","default":false},"readOnly":{"type":"boolean","default":false},"required":{"type":"boolean","default":false},"id":{"type":"string","description":"ID of the focusable group. Focusing it or its forwarded HTMLDivElement ref enters the first date segment."},"className":{"type":"string"}},"composable_with":["FormSection","FormErrorSummary","DatePicker","TimeField"],"never_inside":["Button"],"example":"<DateTimePicker id=\"window-start\" label=\"Window start\" value={instant} timeZone=\"America/Los_Angeles\" onValueChange={setInstant} onDraftValidityChange={setInstantValid} required />"},"DescriptionList":{"description":"Semantic label/value facts with wrapping, exact values, and stacked, responsive aligned, or compact detail layouts.","props":{"items":{"type":"array","items":{"id":"string (required, unique)","label":"ReactNode (required)","value":"ReactNode (required)","mono":"boolean (optional)"},"required":true,"description":"Readonly DescriptionListItem array. IDs are stable unique keys within this list, never DOM IDs. Direct booleans render as true/false; zero and other ReactNode values are preserved. Supply explicit text for missing values (development warns for null, undefined or empty text) and include units in the value. A value that is a number, optionally followed by its unit, wraps only between digit groups and keeps the unit with its last group; a word after it that is not a unit wraps as text, and more than 15 ungrouped digits are an identifier that wraps anywhere."},"layout":{"type":"enum","values":["stacked","aligned","details"],"default":"stacked","description":"Stacked places each value below its label. Aligned uses columns when space permits and stacks in narrow containers. Details keeps 40/60 columns with 9px medium uppercase muted labels, 11px right-aligned values, baseline alignment, 8px row spacing and a 16px column gap. Long content wraps in either column."},"className":{"type":"string"}},"composable_with":["EntityPreview","OperationalStatus","Inspector","Popover","Card","Link","CopyButton"],"never_inside":["Button","Badge","Link"],"example":"<DescriptionList layout=\"aligned\" items={[{ id: \"pressure\", label: \"Pressure\", value: \"0 kPa\", mono: true }, { id: \"enabled\", label: \"Enabled\", value: false }]} />"},"Dialog":{"description":"Modal dialog with a flat API: pass title, optional description, trigger, footer, and body children. Portal'd overlay + content built on React Aria Components (ModalOverlay + Modal + Dialog).","props":{"motion":{"type":"enum","values":["auto","none"],"default":"auto","description":"Tactile pointer/touch feedback. None disables motion; keyboard and system reduced motion are always immediate."},"title":{"type":"string","required":true},"description":{"type":"string"},"size":{"type":"enum","values":["sm","md","lg"],"default":"md"},"open":{"type":"boolean"},"defaultOpen":{"type":"boolean"},"onOpenChange":{"type":"function"}},"slots":{"trigger":{"type":"focusable element | text (text renders a Button)"},"children":{"type":"any","required":true},"footer":{"type":"Button | ButtonGroup"}},"composable_with":["Button","ButtonGroup"],"never_inside":["Button","Badge"],"example":"<Dialog\n  title=\"DEPLOY UNIT\"\n  description=\"Confirm deployment to the selected theater.\"\n  trigger={<Button variant=\"primary\">DEPLOY</Button>}\n  footer={\n    <>\n      <Button variant=\"secondary\">CANCEL</Button>\n      <Button variant=\"primary\">CONFIRM</Button>\n    </>\n  }\n>\n  <p>This action cannot be undone.</p>\n</Dialog>"},"Divider":{"description":"Thin rule that separates content, with an optional centered uppercase label (horizontal only). A horizontal rule takes the width of its container and a vertical one the height of its flex row. A long label wraps between its two lines and breaks anywhere. A semantic labeled divider is named by its label.","props":{"orientation":{"type":"enum","values":["horizontal","vertical"],"default":"horizontal","description":"The direction of the rule. A vertical rule stretches to the height of its flex row, so put it in a flex row or give it a height."},"decorative":{"type":"boolean","default":true},"label":{"type":"string"}},"composable_with":["Card","Sidebar"],"example":"<Divider />"},"DropdownMenu":{"description":"Portal'd action menu anchored to a trigger element. Holds DropdownMenuItem, DropdownMenuSeparator, and DropdownMenuLabel children.","props":{"motion":{"type":"enum","values":["auto","none"],"default":"auto","description":"Tactile pointer arrival and exit; keyboard, assistive activation, and system reduced motion remain immediate."},"trigger":{"type":"node","required":true,"description":"One focusable element that forwards its ref and handlers, such as a Button; plain text renders a secondary Button."},"open":{"type":"boolean"},"defaultOpen":{"type":"boolean"},"onOpenChange":{"type":"function"},"align":{"type":"enum","values":["start","center","end"],"default":"start"},"side":{"type":"enum","values":["top","right","bottom","left"],"default":"bottom"}},"slots":{"children":{"type":"DropdownMenuItem | DropdownMenuSeparator | DropdownMenuLabel","required":true}},"composable_with":["Toolbar","CardHeader"],"never_inside":["Button","Badge"],"example":"<DropdownMenu trigger={<Button variant=\"secondary\">ACTIONS</Button>}>\n  <DropdownMenuLabel>ACTIONS</DropdownMenuLabel>\n  <DropdownMenuItem shortcut=\"⌘C\">COPY</DropdownMenuItem>\n  <DropdownMenuSeparator />\n  <DropdownMenuItem danger>DELETE</DropdownMenuItem>\n</DropdownMenu>"},"DropdownMenuItem":{"description":"Selectable uppercase action row inside a DropdownMenu. Keyboard shortcuts, code, and kbd retain their casing. Wrap other case-sensitive names or IDs in a child with normal-case tracking-normal. Supports a danger style.","props":{"shortcut":{"type":"string","description":"Display text for an application-owned shortcut; it describes the item."},"danger":{"type":"boolean","default":false,"description":"Colors the item and adds a written “Destructive action” description."},"disabled":{"type":"boolean","default":false},"textValue":{"type":"string","description":"Plain text for typeahead when children are not a string (for example a <code> ID)."},"onSelect":{"type":"function","description":"Receives a cancelable event; call event.preventDefault() to keep the menu open."}},"composable_with":["DropdownMenu"],"never_inside":["Button","Badge"],"example":"<DropdownMenuItem shortcut=\"⌘C\">COPY</DropdownMenuItem>"},"DropdownMenuSeparator":{"description":"Thin horizontal rule grouping items inside a DropdownMenu.","props":{},"composable_with":["DropdownMenu"],"never_inside":["Button","Badge"],"example":"<DropdownMenuSeparator />"},"DropdownMenuLabel":{"description":"Non-interactive uppercase section heading inside a DropdownMenu.","props":{},"composable_with":["DropdownMenu"],"never_inside":["Button","Badge"],"example":"<DropdownMenuLabel>ACTIONS</DropdownMenuLabel>"},"EntityPreview":{"description":"Entity identity with aligned label/value rows for condition, structured facts and report quality in transient or persistent inspection.","props":{"entity":{"type":"node","required":true,"description":"EntityPreviewRecord: id, name, readonly DescriptionListItem facts, and quality (OperationalStatus state/source/updatedAt/detail); optional typeLabel, summary, and condition { label, variant }. Application identity is never used as a DOM ID. An ID identical to the name appears only in the heading. Pass a complete replacement record on update. Condition and facts use DescriptionList details; report quality uses OperationalStatus. Text-only badges, muted labels and right-aligned values share 40/60 columns with wrapping. No data fetching, health inference, or freshness calculation."},"media":{"type":"node","description":"Optional supplied image, video, or other media content. The caller owns sizing, alternative text, transport, and controls."},"actions":{"type":"node","description":"Optional named controls such as Link and CopyButton. The caller owns actions and selection."},"headingLevel":{"type":"number","default":3,"description":"Entity name heading level: 2, 3, 4, 5, or 6. Choose it for the hosting surface's heading hierarchy."},"className":{"type":"string"}},"slots":{"media":{"type":"ReactNode"},"actions":{"type":"ReactNode"}},"composable_with":["Popover","Inspector","DescriptionList","OperationalStatus","Badge","Link","CopyButton","Button"],"never_inside":["Button","Badge","Link","Tooltip"],"example":"<EntityPreview entity={{ id: \"pump-07\", name: \"West pump\", facts: [{ id: \"pressure\", label: \"Pressure\", value: \"0 kPa\", mono: true }], condition: { label: \"Healthy\", variant: \"success\" }, quality: { state: \"stale\", source: \"Maintenance report\", updatedAt: null } }} />"},"EventTimeline":{"description":"UTC event graphic with lanes, clipped duration bars, point markers, and a complete accessible event list. Event titles lead each entry, severity aligns at the trailing edge, and timestamps/categories form a secondary metadata row.","props":{"events":{"type":"array","items":{"id":"string (required, unique)","label":"string (required)","start":"number (required, epoch milliseconds)","end":"number (optional, epoch milliseconds, inclusive)","lane":"string (optional, defaults to Events)","description":"string (optional)","severity":"enum [neutral, info, success, warning, error] (default neutral)"},"required":true,"description":"Readonly TimelineEvent array. Invalid timestamps and reversed intervals are omitted with an explicit count. The visible list is sorted by start time."},"start":{"type":"number","required":true,"description":"Inclusive visible window start, Unix epoch milliseconds."},"end":{"type":"number","required":true,"description":"Inclusive visible window end, Unix epoch milliseconds. Must follow start."},"selectedId":{"type":"string","description":"Controlled selected event ID, or null for no selection. Filtering the visible window never changes the supplied selection."},"onSelectionChange":{"type":"function","description":"(id: string) => void. Adds native selection buttons to the event list; Enter and Space select an event."},"disabled":{"type":"boolean","default":false,"description":"Disables selection buttons while keeping data readable."},"label":{"type":"string","default":"Event timeline","description":"Accessible name of the group. The event list is named after it with \"list\" added (label=\"Service events\" names the list \"Service events list\")."},"emptyMessage":{"type":"string","default":"No events in this time range."}},"composable_with":["TimeRange","SplitPane","Card"],"never_inside":["Button"],"example":"<EventTimeline events={events} start={range.start} end={range.end} selectedId={selectedId} onSelectionChange={setSelectedId} label=\"Service events\" />"},"Field":{"description":"Form field wrapper providing label, help text, and error display. Labels, help, errors, and entered values preserve their original casing. A required Field makes its control required. NumberInput, CoordinateInput and MultiSelect carry their own label and are not placed in a Field.","props":{"controlId":{"type":"string","description":"Stable child control ID used by the label and context. Native id remains the wrapper ID; generated control IDs are the default."},"label":{"type":"string","required":true},"help":{"type":"string"},"error":{"type":"string"},"required":{"type":"boolean","default":false,"description":"Marks the label and makes the control inside required: announced as required, and the browser stops a native submission while it is empty. A form that validates itself sets noValidate on the form, which keeps the announcement. A control's own required={false} wins."}},"slots":{"children":{"type":"Input | Textarea | Select | ComboBox | Checkbox | RadioGroup | Toggle | Slider","required":true}},"composable_with":["Card","FormSection","FormErrorSummary"],"never_inside":["Field","Button"],"example":"<Field label=\"ENDPOINT\" error=\"Required\">\n  <Input placeholder=\"api.system.io\" />\n</Field>"},"FileUpload":{"description":"Choose, drop or paste files with bounded validation and readable rejection feedback.","props":{"label":{"type":"string","required":true,"description":"Visible name for the file selection group."},"description":{"type":"node","description":"Optional guidance associated with the group."},"accept":{"type":"array","description":"Allowed extensions (.csv), MIME types (text/csv), or MIME wildcards (image/*). Case-insensitive, OR matching. Empty means any type. Browser hints do not validate content."},"multiple":{"type":"boolean","default":false},"maxFiles":{"type":"number","description":"Positive integer limit per selection batch. Single-file mode always permits at most one file. Files are considered in input order, including files rejected by type/size."},"maxFileSizeBytes":{"type":"number","description":"Inclusive nonnegative integer byte limit. Zero allows only empty files. Omitted means unlimited."},"disabled":{"type":"boolean","default":false,"description":"Blocks all input paths and invalidates in-flight file resolution."},"onFiles":{"type":"function","required":true,"description":"Receives accepted readonly File[] in input order. Selection does not establish upload or persistence. No callback for chooser cancellation or an empty accepted set."},"onReject":{"type":"function","description":"Receives readonly FileRejection[]: name, code (type/size/count/directory/unsupported/read), message. Rejections are also displayed."},"className":{"type":"string"}},"composable_with":["UploadQueue","AttachmentPreview","FormSection"],"never_inside":["Button"],"example":"<FileUpload label=\"Equipment import\" accept={[\".csv\"]} maxFileSizeBytes={1048576} onFiles={selectFiles} onReject={reportIssues} />"},"FilterBar":{"description":"Toggle-button filters for a view, wrapping onto more rows when they do not fit. Single-select by default; set multiple for multi-select.","props":{"filters":{"type":"array","required":true,"description":"Readonly string[] of filter labels, each shown once, in order."},"value":{"type":"union","types":["string","array"],"description":"Controlled selection: string in single mode; readonly string[] when multiple=true. Use an empty string or array to clear the corresponding mode. A selected value that is not in filters shows at the end of the bar as a selected filter marked unavailable, which the operator can remove."},"defaultValue":{"type":"union","types":["string","array"],"description":"Initial uncontrolled selection: string in single mode; readonly string[] when multiple=true."},"multiple":{"type":"boolean","default":false,"description":"When true, value, defaultValue, and onValueChange use string[] and a selected filter can be cleared; otherwise they use string and the filters are radios, so the active filter stays selected until another is chosen."},"ariaLabel":{"type":"string","default":"Filters","description":"Accessible name for the group."},"disabled":{"type":"boolean","default":false,"description":"Disable pointer and keyboard selection while retaining the active filters."},"onValueChange":{"type":"function","description":"Receives the active string in single mode or the complete string[] selection when multiple=true."},"className":{"type":"string"}},"composable_with":["Card"],"never_inside":["Button","Badge"],"example":"<FilterBar filters={[\"ALL\",\"FRIENDLY\",\"HOSTILE\",\"NEUTRAL\",\"UNKNOWN\"]} defaultValue=\"ALL\" />"},"FormErrorSummary":{"description":"Focusable error summary with actions that reveal or focus invalid form controls.","props":{"errors":{"type":"array","required":true,"description":"Readonly errors with stable unique id, readable message and targetId for the control."},"title":{"type":"string","default":"Check these fields","description":"Visible heading that names the summary section."},"onErrorSelect":{"type":"function","description":"Optional reveal/focus handler receiving the selected error. Replaces direct target focus; reveal hidden controls before focusing them after render."},"className":{"type":"string"}},"composable_with":["Field","FormSection","Input"],"never_inside":["Button"],"example":"<FormErrorSummary ref={summaryRef} errors={errors} onErrorSelect={revealAndFocus} />"},"FormSection":{"description":"Native fieldset with a legend, optional description and supplied form controls.","props":{"legend":{"type":"string","required":true,"description":"Visible legend that names the group."},"description":{"type":"node","description":"Supporting content associated with the fieldset."},"disabled":{"type":"boolean","default":false,"description":"Uses native fieldset disabling for descendant form controls."},"className":{"type":"string"}},"slots":{"children":{"type":"ReactNode","required":true}},"composable_with":["Field","Input","Checkbox","FormErrorSummary"],"never_inside":["Button"],"example":"<FormSection legend=\"Equipment details\" description=\"Use the registered name.\">\n  <Field controlId=\"resource-name\" label=\"Name\"><Input /></Field>\n</FormSection>"},"InlineEdit":{"description":"Controlled inline text editing with explicit save, cancel and recoverable validation or save errors.","props":{"label":{"type":"string","required":true,"description":"Names the editor and its Edit, Save and Cancel actions."},"value":{"type":"string","required":true,"description":"Authoritative displayed value. Case is preserved. A change while the operator is typing keeps the draft and shows a status line naming the new value."},"onSave":{"type":"function","required":true,"description":"Receives the exact draft; return a promise for asynchronous acceptance and reject to retain the draft with an error."},"validate":{"type":"function","description":"Returns an error message or undefined before saving."},"disabled":{"type":"boolean","default":false},"readOnly":{"type":"boolean","default":false,"description":"Displays the value without an Edit action."},"className":{"type":"string"}},"composable_with":["ContextMenu","DataGrid","FormSection"],"never_inside":["Button"],"example":"<InlineEdit label=\"Equipment name\" value={name} onSave={saveName} validate={(value) => value.trim() ? undefined : \"Enter a name.\"} />"},"Input":{"description":"Single-line input with optional prefix/suffix slots and prompt-symbol variant. Date and time fields preserve native editing and picker interaction with decorative OPERATOR Calendar/Clock icons and a dark native color scheme.","props":{"type":{"type":"enum","values":["text","number","password","search","email","tel","url","date","time","datetime-local","month","week"],"default":"text","description":"The text-like and date-like input types. TypeScript accepts any HTML input type, but one that is not a text field (checkbox, radio, file, range, color, hidden, button, submit, reset, image) breaks the field's look and is reported in development; use Checkbox, RadioGroup, Slider or FileUpload instead."},"size":{"type":"enum","values":["sm","md","lg"],"default":"md"},"placeholder":{"type":"string"},"disabled":{"type":"boolean","default":false},"invalid":{"type":"boolean","description":"Marks the field invalid: an error border and aria-invalid. Wins over aria-invalid, which wins over a surrounding Field's error, as on Textarea."},"promptSymbol":{"type":"boolean","default":false},"prefix":{"type":"node","description":"ReactNode rendered before the input (icon, currency symbol, etc.)."},"suffix":{"type":"node","description":"ReactNode rendered after the input (icon, clear button, unit, etc.). For interactive elements use an accessible Button or icon-button."}},"composable_with":["Field"],"never_inside":["Button","Badge"],"example":"<Field label=\"ENDPOINT\">\n  <Input placeholder=\"api.system.io\" />\n</Field>"},"Inspector":{"description":"Modeless named details aside that leaves background content and focus navigation available.","props":{"open":{"type":"boolean","default":true},"title":{"type":"string","required":true,"description":"Accessible title; entity names preserve supplied casing."},"description":{"type":"string"},"onClose":{"type":"function","description":"Shows Close when supplied. The caller manages closing state and return focus."}},"slots":{"children":{"type":"ReactNode"}},"composable_with":["AppShell","SplitPane","OperationalStatus","ActionStatus"],"never_inside":["Button"],"example":"<Inspector open={open} title={asset.name} onClose={closeAndRestoreFocus}><OperationalStatus state={asset.status} source={source} updatedAt={asset.updatedAt} /></Inspector>"},"JobStatus":{"description":"Application-supplied job state and validated item progress with explicit cancellation/retry requests. Requests never establish a job outcome. A pending request is announced through a live region that is always present; native attributes reach the job region; long text wraps.","props":{"jobId":{"type":"string","required":true},"label":{"type":"string","required":true},"state":{"type":"enum","values":["queued","running","cancel-requested","canceled","complete","partial","failed"],"required":true},"message":{"type":"string"},"progress":{"type":"node","description":"{ completed: number; total: number | null }. Nonnegative safe integers; completed cannot exceed a known total. Null total is indeterminate; zero shows zero items without a percentage."},"requestPending":{"type":"enum","values":["cancel","retry"],"description":"Pending request kind, or null. Prevents duplicate requests without changing the supplied state."},"requestError":{"type":"string","description":"Request-delivery feedback supplied independently of the job outcome."},"onCancelRequest":{"type":"function","description":"(jobId) => void. Offered only while queued or running. Does not establish cancellation."},"onRetryRequest":{"type":"function","description":"(jobId) => void. Offered only for failed, partial, or canceled jobs. The application chooses eligible work and request identity."},"disabled":{"type":"boolean","default":false},"className":{"type":"string"}},"composable_with":["ActionStatus","Progress","Button","BulkResults"],"never_inside":["Button"],"example":"<JobStatus jobId=\"import-1\" label=\"Import equipment\" state=\"cancel-requested\" progress={{completed:2,total:5}} />"},"LayerControl":{"description":"Controlled top-first map layers with visibility, opacity and keyboard-operable ordering.","props":{"label":{"type":"string","default":"Map layers"},"layers":{"type":"array","items":{"id":"string","label":"string","visible":"boolean","opacity":"number (0..1)","description":"string (optional)","disabled":"boolean (optional)"},"required":true,"description":"Readonly LayerControlItem[]. IDs must be unique and nonempty. First item is drawn on top. Nonfinite/out-of-range opacity stays unavailable; zero is transparent."},"onLayersChange":{"type":"function","description":"(layers: readonly LayerControlItem[]) => void. Receives a new frozen array of copied frozen items. Requests do not change supplied values. Omit for read-only controls. Disabled rows cannot mutate or be crossed."},"disabled":{"type":"boolean","default":false},"className":{"type":"string"}},"composable_with":["MapControls","MapLegend","Slider","Checkbox","Field"],"never_inside":["Button"],"example":"<LayerControl layers={layers} onLayersChange={setLayers} />"},"Link":{"description":"Native anchor navigation with an evident link treatment and token-based keyboard focus. It is inline, so a link in a sentence wraps with the sentence; as a flex or grid item it is a 24px target. Only http, https, mailto, tel, relative and hash destinations are rendered.","props":{"href":{"type":"string","required":true,"description":"Native anchor destination; no click interception or router dependency. Only http, https, mailto, tel, relative and hash destinations are rendered; any other scheme (javascript:, vbscript:, data:, blob:, file:) renders as plain text, not a link and not a Tab stop. A blob: or data: destination is rendered when download is set; offer only files your page generates from content you trust, and give a file built from untrusted content to a Button that starts the download instead of a persistent link."},"children":{"type":"node","description":"Accessible link name. Authored names and prose preserve their case; provide aria-label for icon-only links."},"target":{"type":"string","description":"Native browsing context, such as _blank. Explain new-window behavior in the accessible name."},"rel":{"type":"string","description":"Native relationship attributes; use noopener noreferrer for external new-window links."},"download":{"type":"union","types":["string","boolean"],"description":"Native download attribute, subject to browser behavior."},"className":{"type":"string"}},"composable_with":["DescriptionList","EntityPreview","Popover","Inspector","Card"],"never_inside":["Button","Link"],"example":"<Link href=\"/equipment/pump-07\">Pump 07</Link>"},"MapControls":{"description":"Engine-independent map navigation requests with supplied zoom and north-bearing readouts.","props":{"label":{"type":"string","default":"Map controls"},"zoom":{"type":"number","description":"Supplied finite zoom within minZoom/maxZoom; null or missing is unknown. Readouts round to two decimals without changing the supplied value."},"bearing":{"type":"number","description":"Supplied clockwise degrees from north in [0,360). Null, missing or invalid values remain unknown. Display rounds to two decimals, so a bearing that rounds to 360 shows 0."},"minZoom":{"type":"number","default":2},"maxZoom":{"type":"number","default":20},"onAction":{"type":"function","description":"(action: MapAction) => void. Requests zoom-in, zoom-out, pan-north/east/south/west, reset-north or fit; no internal viewport change. Omission disables actions."},"disabled":{"type":"boolean","default":false},"className":{"type":"string"}},"composable_with":["MapScale","LayerControl","MapLegend","CoordinateInput","AppShell"],"never_inside":["Button"],"example":"<MapControls zoom={view.zoom} bearing={view.bearing} onAction={requestMapAction} />"},"MapLegend":{"description":"Text and shape map legend for supplied point, line and area meanings.","props":{"label":{"type":"string","default":"Map legend"},"items":{"type":"array","items":{"id":"string","label":"string","kind":"point | line | area","variant":"neutral | success | warning | error | info | accent (optional; neutral)","pattern":"solid | dashed (optional; solid; applies to line/area)","description":"string (optional)"},"required":true,"description":"Readonly MapLegendItem[]; labels/descriptions explain the supplied geometry. Variants use existing tokens; geometry kind and line/area pattern are always visible as text. Point symbols remain solid."},"className":{"type":"string"}},"composable_with":["LayerControl","MapControls","DescriptionList"],"never_inside":["Button"],"example":"<MapLegend items={[{ id: \"coverage\", label: \"Reported coverage\", kind: \"area\", variant: \"info\", description: \"Supplied model footprint\" }]} />"},"MapScale":{"description":"Bounded 1/2/5 ground-distance scale from a supplied local map resolution.","props":{"label":{"type":"string","default":"Map scale"},"metersPerPixel":{"type":"number","description":"Positive finite local ground meters per CSS pixel. Missing/null/nonpositive/nonfinite values show Scale unavailable. Adapter owns projection and scale location."},"maxWidth":{"type":"number","default":120,"description":"Positive finite maximum bar width in CSS pixels. Recomputes against narrower measured container width rather than shrinking a mislabeled bar."},"units":{"type":"enum","values":["metric","imperial"],"default":"metric","description":"Metric uses m/km; imperial uses ft/mi. Both derive from the same supplied ground resolution."},"className":{"type":"string"}},"composable_with":["MapControls","MapLegend","AppShell"],"never_inside":["Button"],"example":"<MapScale metersPerPixel={frame.metersPerPixel} units=\"metric\" />"},"MediaFrame":{"description":"Named media surface with supplied freshness state, capture time and retained-frame disclosure.","props":{"label":{"type":"string","required":true},"state":{"type":"enum","values":["live","delayed","paused","recorded","reconnecting","unavailable"],"required":true,"description":"Caller-supplied state. Reconnecting and unavailable always disclose that a current frame is unavailable."},"capturedAt":{"type":"number","required":true,"description":"Actual supplied frame capture time in epoch milliseconds, or null (fractional milliseconds allowed). Shown as YYYY-MM-DD HH:MM:SS UTC; the time element keeps the exact ISO instant in dateTime. Invalid dates and null display an unknown capture time."},"source":{"type":"string","description":"Readable source identity; does not initiate a connection."},"latencyMs":{"type":"number","description":"Supplied nonnegative latency in milliseconds, or null for unknown. Invalid values display unknown; omitted values are hidden."},"retained":{"type":"boolean","default":false,"description":"Explicitly labels imagery as a retained frame that is not current."},"detail":{"type":"string","description":"Persistent application explanation of the media state."},"aspectRatio":{"type":"number","default":1.7777777777777777,"description":"Media width divided by height; defaults to 16/9. Nonpositive or nonfinite ratios fall back to 16/9."},"children":{"type":"node","description":"Application-owned media, image, canvas or fallback. Direct media children fit within the aspect-ratio surface without cropping."},"actions":{"type":"node","description":"Application-supplied accessible actions. Availability, permissions and outcomes remain with the caller."},"className":{"type":"string"}},"composable_with":["PlaybackControls","Button","AttachmentPreview","Inspector"],"never_inside":["Button"],"example":"<MediaFrame label=\"Pump camera\" state=\"recorded\" capturedAt={confirmedFrameTime} source=\"CAM-12\" detail=\"Training footage\"><video muted playsInline src={recordingUrl} /></MediaFrame>"},"MultiSelect":{"description":"Native checkbox group with shared OPERATOR Check icons, stable values, labeled options, and explicit validation.","props":{"label":{"type":"string","required":true,"description":"Visible fieldset legend and accessible group name."},"options":{"type":"array","items":{"value":"string (required, unique)","label":"string (required)","disabled":"boolean"},"required":true,"description":"Unique stable values. Disabled options remain visible."},"value":{"type":"array","description":"Controlled selected values; values missing from options are preserved during changes."},"defaultValue":{"type":"array","description":"Initial values for uncontrolled selection. Defaults to an empty array."},"onValueChange":{"type":"function","description":"(values: string[]) => void. Controlled state only changes when the owner supplies new values."},"name":{"type":"string","description":"Native form name shared by selected checkboxes. FormData returns one entry per selected, enabled option."},"disabled":{"type":"boolean","default":false},"description":{"type":"string"},"error":{"type":"string","description":"Visible validation text; associated with the group and paired with aria-invalid."}},"composable_with":["Card"],"never_inside":["Button"],"example":"<MultiSelect label=\"Sensors\" options={[{ value: \"radar\", label: \"Radar\" }, { value: \"optical\", label: \"Optical\" }]} value={sensors} onValueChange={setSensors} />"},"NumberInput":{"description":"Numeric entry with an explicit unit, keyboard stepping, range and step validation, and unknown-value state.","props":{"label":{"type":"string","required":true},"unit":{"type":"string","required":true,"description":"Visible and described unit such as m, kn or °. Empty units are invalid; no conversion is performed."},"value":{"type":"number","description":"Controlled number or null for unknown. Invalid drafts stay visible and never emit NaN or out-of-range values."},"defaultValue":{"type":"number","description":"Initial uncontrolled number, or null (the default)."},"onValueChange":{"type":"function","description":"(value: number | null) => void. Emits valid numeric edits or null when cleared. Does not emit invalid drafts."},"onValidationChange":{"type":"function","description":"(error: string | null) => void. Reports draft and supplied-value validation; use this to block application submission while a draft is invalid."},"min":{"type":"number"},"max":{"type":"number"},"step":{"type":"string","default":"any","description":"Positive number or 'any'. Numeric steps validate from min (or zero); Arrow keys use 1 for 'any'."},"size":{"type":"enum","values":["sm","md","lg"],"default":"md"},"disabled":{"type":"boolean","default":false},"readOnly":{"type":"boolean","default":false},"required":{"type":"boolean","default":false},"description":{"type":"string"},"error":{"type":"string","description":"Caller-supplied validation error, displayed before built-in validation."},"name":{"type":"string","description":"Native form field name. Constraint validation blocks invalid numeric drafts."}},"composable_with":["Card","CoordinateInput"],"never_inside":["Button"],"example":"<NumberInput label=\"Altitude\" unit=\"m\" value={altitude} onValueChange={setAltitude} min={0} max={20000} step={10} />"},"OperationalStatus":{"description":"Application-asserted data quality, source, and UTC update time in shared label/value detail rows.","props":{"state":{"type":"enum","values":["current","stale","partial","unavailable","unknown"],"default":"unknown","description":"Application assertion rendered as a text-only badge; never inferred from connection or the wall clock."},"source":{"type":"string","description":"Provenance label; defaults to Unknown."},"updatedAt":{"type":"number","description":"Epoch milliseconds, including zero. Shown as UTC to the second, 'YYYY-MM-DD HH:MM:SS UTC', with the date and the time wrapping separately; the machine-readable time element keeps the exact instant. Null, missing, or invalid renders Time unknown in the Updated row."},"detail":{"type":"string","description":"Missing coverage, stale threshold, quality, or last-known context."}},"composable_with":["AppShell","Inspector","DataGrid","EntityPreview","DescriptionList","Badge"],"never_inside":["Button"],"example":"<OperationalStatus state=\"partial\" source=\"Supplied report\" updatedAt={lastReport} detail=\"One source has not reported.\" />"},"PlaybackControls":{"description":"Controlled UTC timestamp transport with a bounded scrubber, play/pause, optional event stepping, playback speed and return to a supplied live reference.","props":{"start":{"type":"number","required":true,"description":"Inclusive range start in Unix epoch milliseconds. Must be a valid date before end; zero is valid."},"end":{"type":"number","required":true,"description":"Inclusive range end in Unix epoch milliseconds. Invalid or single-point ranges disable transport with explanatory text."},"value":{"type":"number","required":true,"description":"Controlled cursor in Unix epoch milliseconds. Out-of-range values clamp for display and disable transport; invalid dates display an unknown position."},"playing":{"type":"boolean","required":true,"description":"Caller-owned playback state. The component owns no clock and makes no optimistic state changes."},"onValueChange":{"type":"function","required":true,"description":"(value: number) => void. Requests a valid in-range timestamp after requesting pause."},"onPlayingChange":{"type":"function","required":true,"description":"(playing: boolean) => void. Requests play/pause. Scrubbing and event stepping call this with false before onValueChange."},"playbackRate":{"type":"number","default":1,"description":"Controlled positive finite speed multiplier. A valid supplied rate remains visible, in order, even when absent from playbackRates; invalid rates display Unknown rate."},"playbackRates":{"type":"array","description":"Readonly number array of offered speed multipliers. Defaults to [0.5, 1, 2, 4]. Non-positive/non-finite rates and duplicates are omitted. Listed in ascending order."},"onPlaybackRateChange":{"type":"function","description":"(rate: number) => void. Supplying this callback shows the controlled speed selector."},"eventTimes":{"type":"array","description":"Readonly epoch-millisecond array. Supplying it shows previous/next event buttons. Times are sorted, deduplicated and filtered to valid dates within the range; stepping skips the current time."},"liveTime":{"type":"number","description":"Application-supplied live reference in epoch milliseconds. May lie outside the review range; the application owns any range change."},"followingLive":{"type":"boolean","default":false,"description":"Shows Following live and disables Return to live while the caller follows its reference."},"onReturnToLive":{"type":"function","description":"() => void. Shows Return to live only when liveTime is a valid date. Requests no cursor, range or playing change itself."},"disabled":{"type":"boolean","default":false,"description":"Disables all transport actions and removes them from sequential keyboard navigation."},"label":{"type":"string","default":"Playback","description":"Accessible root-group name. Also names the position slider and playback-speed selector."},"className":{"type":"string"}},"composable_with":["MediaFrame","TimeRange","EventTimeline","Chart"],"never_inside":["Button"],"example":"<PlaybackControls start={start} end={end} value={cursor} playing={playing} onValueChange={setCursor} onPlayingChange={setPlaying} eventTimes={eventTimes} playbackRate={rate} onPlaybackRateChange={setRate} liveTime={liveTime} followingLive={followingLive} onReturnToLive={returnToLive} />"},"Popover":{"description":"Named nonmodal interactive details anchored to an explicitly activated trigger.","props":{"title":{"type":"string","description":"Visible heading that names the dialog; required unless aria-label is set."},"aria-label":{"type":"string","description":"Name without a visible heading; required unless title is set."},"open":{"type":"boolean"},"defaultOpen":{"type":"boolean","default":false},"onOpenChange":{"type":"function"},"side":{"type":"enum","values":["top","right","bottom","left"],"default":"bottom"},"align":{"type":"enum","values":["start","center","end"],"default":"start"},"disabled":{"type":"boolean","default":false},"motion":{"type":"enum","values":["auto","none"],"default":"auto"},"description":{"type":"string","description":"Short summary: a tooltip preview on the trigger and a line under the title of the open surface, which it describes. A disabled trigger with a description stays focusable, so focus or a tap shows it."},"returnFocusRef":{"type":"node","description":"RefObject<HTMLElement | null> fallback when the trigger is removed."},"onCloseAutoFocus":{"type":"function"},"className":{"type":"string"}},"slots":{"children":{"type":"single focusable trigger element","required":true},"content":{"type":"node","required":true}},"composable_with":["Button","EntityPreview","DescriptionList","CopyButton","Inspector","Tooltip"],"never_inside":["Tooltip"],"example":"<Popover title=\"Equipment details\" description=\"Equipment operational\" content={<button>Inspect</button>}><Button>Details</Button></Popover>"},"Progress":{"description":"Determinate or indeterminate progress indicator rendered as a filled bar or a row of block glyphs. It fills the width its container gives it.","props":{"value":{"type":"number","description":"Current progress, clamped from 0 to max. Omit or pass a non-finite value for an indeterminate (amount unknown) state: a full-width hatched fill that slides gently and stays a still hatch with reduced motion and in forced colors, so it never looks like 0% or 100%."},"max":{"type":"number","default":100,"description":"Finite positive upper bound. Zero, negative, and non-finite values fall back to 100."},"label":{"type":"string","description":"Optional short progress heading, displayed uppercase. Long identifiers wrap beside the value."},"showValue":{"type":"boolean","default":false},"variant":{"type":"enum","values":["bar","blocks"],"default":"bar"},"size":{"type":"enum","values":["sm","md"],"default":"md"}},"composable_with":["Card","Field"],"never_inside":["Progress"],"example":"<Progress value={72} showValue />"},"PropertyFilter":{"description":"Controlled flat property-filter editor with text or enum values, all/any matching and removable, semantically validated clauses.","props":{"fields":{"type":"array","required":true,"description":"Readonly PropertyFilterField[] with key, label, operators and optional value/label/disabled options. Operators have key, label and requiresValue."},"value":{"type":"node","required":true,"description":"PropertyFilterValue: match all or any, and readonly tokens containing id, field, operator and string or null value."},"onValueChange":{"type":"function","required":true,"description":"Requests the complete next value. The parent accepts it through value; declined updates keep tokens and addition drafts."},"label":{"type":"string","default":"Filters"},"disabled":{"type":"boolean","default":false},"className":{"type":"string"}},"composable_with":["TagGroup","DataGrid","CollectionState"],"never_inside":["Button"],"example":"<PropertyFilter fields={fields} value={filter} onValueChange={setFilter} label=\"Equipment filters\" />"},"RadioGroup":{"description":"Group of mutually exclusive options. Square outline with the shared OPERATOR Check icon when selected.","props":{"value":{"type":"string"},"defaultValue":{"type":"string"},"onValueChange":{"type":"function","description":"(value: string) => void. Called when the operator chooses an option."},"disabled":{"type":"boolean","default":false},"required":{"type":"boolean","default":false},"orientation":{"type":"enum","values":["horizontal","vertical"],"default":"vertical"},"size":{"type":"enum","values":["sm","md","lg"],"default":"md"},"name":{"type":"string"}},"slots":{"children":{"type":"Radio","required":true}},"composable_with":["Field"],"never_inside":["Button","Badge"],"example":"<Field label=\"CHANNEL\">\n  <RadioGroup defaultValue=\"alpha\">\n    <Radio value=\"alpha\">ALPHA</Radio>\n    <Radio value=\"bravo\">BRAVO</Radio>\n  </RadioGroup>\n</Field>"},"Radio":{"description":"Single radio option. Must be a child of <RadioGroup>.","props":{"value":{"type":"string","required":true},"disabled":{"type":"boolean","default":false}},"composable_with":["RadioGroup"],"never_inside":["Button","Badge"],"example":"<Radio value=\"alpha\">ALPHA</Radio>"},"Select":{"description":"Single-select dropdown. Trigger matches Input geometry for one line and grows when its text wraps; inside a Field it fills the Field's width. Portal'd list with an accent border and the shared OPERATOR Check icon on the selected option; an empty Select opens a list that says so.","props":{"motion":{"type":"enum","values":["auto","none"],"default":"auto","description":"Tactile pointer arrival, exit, and open-state chevron rotation; keyboard, assistive activation, and system reduced motion remain immediate."},"value":{"type":"string","description":"Controlled selected option value. Keep the selected option among the children; a value with no matching option shows the placeholder and submits nothing."},"defaultValue":{"type":"string","description":"Initial selected option value."},"onValueChange":{"type":"function","description":"(value: string) => void. Called when the operator chooses an option."},"open":{"type":"boolean","description":"Controlled open state of the list."},"defaultOpen":{"type":"boolean","default":false,"description":"Initial open state."},"onOpenChange":{"type":"function","description":"(open: boolean) => void. Called when the list opens or closes."},"placeholder":{"type":"string"},"emptyMessage":{"type":"string","default":"No options available.","description":"What the list says when there are no options to choose from."},"aria-label":{"type":"string","description":"Accessible name when there is no surrounding Field or visible heading."},"aria-labelledby":{"type":"string","description":"IDs of visible elements that name the Select; wins over a Field's label."},"aria-describedby":{"type":"string","description":"Description IDs; replaces a surrounding Field's help or error."},"disabled":{"type":"boolean","default":false},"required":{"type":"boolean","default":false},"name":{"type":"string"},"size":{"type":"enum","values":["sm","md","lg"],"default":"md"},"invalid":{"type":"boolean","default":false}},"slots":{"children":{"type":"SelectOption","required":true}},"composable_with":["Field"],"never_inside":["Button","Badge"],"example":"<Field label=\"THEATER\">\n  <Select placeholder=\"CHOOSE...\">\n    <SelectOption value=\"indo-pacific\">INDO-PACIFIC</SelectOption>\n    <SelectOption value=\"european\">EUROPEAN</SelectOption>\n  </Select>\n</Field>"},"SelectOption":{"description":"Single option inside a Select. Must be a child of <Select>.","props":{"value":{"type":"string","required":true},"disabled":{"type":"boolean","default":false}},"composable_with":["Select"],"never_inside":["Button","Badge"],"example":"<SelectOption value=\"alpha\">ALPHA</SelectOption>"},"Sidebar":{"description":"Vertical navigation rail, never wider than its container. Use with SidebarLogo, SidebarSection, and SidebarFooter. For the frame of a whole app (the workspace's name, the data connection, the time), pass the Sidebar to AppShell as its navigation instead of laying the frame out by hand. Standing alone it is a navigation landmark named Sidebar; inside AppShell's navigation it is a plain block, and the shell's landmark names the navigation. In a host of bounded height the sections scroll in place between the logo and the footer, which stay put.","props":{},"slots":{"children":{"type":"SidebarLogo | SidebarSection | SidebarFooter","required":true}},"composable_with":["SidebarLogo","SidebarSection","SidebarFooter","AppShell"],"never_inside":["Sidebar","Card"],"example":"<Sidebar>\n  <SidebarLogo>OPERATOR</SidebarLogo>\n  <SidebarSection label=\"NAVIGATION\">\n    <SidebarItem href=\"/overview\" active>OVERVIEW</SidebarItem>\n    <SidebarItem href=\"/metrics\">METRICS</SidebarItem>\n  </SidebarSection>\n  <SidebarFooter>BUILD 1.0.0</SidebarFooter>\n</Sidebar>"},"SidebarLogo":{"description":"Sidebar brand/header slot — uppercase wordmark row at the top of the rail.","props":{},"slots":{"children":{"type":"text","required":true}},"composable_with":["Sidebar"],"never_inside":["SidebarSection","SidebarFooter"],"example":"<SidebarLogo>OPERATOR</SidebarLogo>"},"SidebarSection":{"description":"Grouped block of SidebarItems with an optional uppercase section label; a labeled section is a group named by its label.","props":{"label":{"type":"string"}},"slots":{"children":{"type":"SidebarItem","required":true}},"composable_with":["Sidebar"],"never_inside":["SidebarLogo","SidebarFooter"],"example":"<SidebarSection label=\"NAVIGATION\">\n  <SidebarItem href=\"/overview\">OVERVIEW</SidebarItem>\n</SidebarSection>"},"SidebarItem":{"description":"Uppercase navigation entry. Renders as an anchor when href is set, otherwise a button; marks the current page when active. Wrap case-sensitive names or IDs in a child with normal-case tracking-normal.","props":{"active":{"type":"boolean","default":false},"href":{"type":"string"},"asChild":{"type":"boolean","default":false}},"slots":{"icon":{"type":"ReactNode","required":false},"children":{"type":"text","required":true}},"composable_with":["SidebarSection"],"never_inside":["SidebarLogo","SidebarFooter"],"example":"<SidebarItem href=\"/overview\" active>OVERVIEW</SidebarItem>"},"SidebarFooter":{"description":"Bottom-pinned sidebar slot — version string, account, or status controls.","props":{},"slots":{"children":{"type":"any","required":false}},"composable_with":["Sidebar"],"never_inside":["SidebarLogo","SidebarSection"],"example":"<SidebarFooter>BUILD 1.0.0</SidebarFooter>"},"Skeleton":{"description":"Loading placeholder. block renders one pulsing bar; text stacks `lines` bars with a shortened last line. Bars fill their container and never widen it, whatever width the caller asks for, and are drawn in a system color in forced-colors mode.","props":{"variant":{"type":"enum","values":["block","text"],"default":"block"},"width":{"type":"union","types":["string","number"],"description":"Caller dimension applied via style on the block bar (string or number). It is clamped to the container: it can ask for less, never more."},"height":{"type":"union","types":["string","number"],"description":"Caller dimension applied via style on the block bar (string or number)."},"lines":{"type":"number","default":3,"description":"Number of stacked bars in the text variant, rounded down with a minimum of 1. Non-finite values fall back to 3."}},"composable_with":["Card","DataTable"],"never_inside":["Button","Badge"],"example":"<Skeleton variant=\"text\" lines={3} />"},"Slider":{"description":"Single-thumb or range slider. Pass value: number for single, [number, number] for range. Track in the control outline color; active range in accent; square thumbs that stay inside the slider at both ends. Inside a Field it is named by the label (range thumbs add lower and upper) and a Field error marks it invalid, drawing its thumbs in the error color.","props":{"value":{"type":"union","types":["number","array"],"description":"Single thumb when number; pass [number, number] tuple for range mode."},"defaultValue":{"type":"union","types":["number","array"],"description":"Pass [number, number] tuple for range mode."},"onValueChange":{"type":"function","description":"(value: number | [number, number]) => void. Called as the value changes; a tuple in range mode."},"min":{"type":"number","default":0,"description":"Finite lower bound. Non-finite values fall back to 0."},"max":{"type":"number","default":100,"description":"Finite upper bound greater than min. Invalid values fall back to min + 100."},"step":{"type":"number","default":1,"description":"Finite positive increment. Invalid values fall back to 1."},"disabled":{"type":"boolean","default":false},"orientation":{"type":"enum","values":["horizontal","vertical"],"default":"horizontal"},"size":{"type":"enum","values":["sm","md","lg"],"default":"md"},"showValue":{"type":"boolean","default":false,"description":"Render the current value(s) in mono next to the track; the readout moves under the track when the row cannot hold both."},"formatValue":{"type":"function","description":"(value: number) => string. Formats displayed values and each thumb's aria-valuetext. Applies separately to both values in range mode, including when showValue is false."},"name":{"type":"string"}},"composable_with":["Field"],"never_inside":["Button","Badge"],"example":"<Slider aria-label=\"Acceptable temperature\" defaultValue={[18, 24]} min={-20} max={50} showValue />"},"Sparkline":{"description":"Compact SVG line or area trend with preserved missing-data gaps and a complete accessible sample description.","props":{"label":{"type":"string","required":true,"description":"Accessible graphic name. Provide the metric and sampling context."},"data":{"type":"array","required":true,"description":"Readonly (number | null)[] in sample order. Null and non-finite values create gaps and are announced as Missing; zero remains zero."},"unit":{"type":"string","description":"Unit appended to every finite sample in the accessible description."},"seriesId":{"type":"string","description":"Optional Chart series ID. Reuses the series' automatic categorical color so a detail trend matches its source plot; omit for the first categorical color. When the series sets its own color, pass the same color too."},"color":{"type":"number","description":"Optional categorical token 1–8, as a Chart series' color; it takes precedence over seriesId."},"variant":{"type":"enum","values":["line","area"],"default":"line"}},"composable_with":["StatCard","DataTable","DataGrid","Card"],"never_inside":["Sparkline","Button"],"example":"<Sparkline label=\"Latency, last seven samples\" data={[22, 24, null, 21, 23, 20, 22]} unit=\"ms\" />"},"SplitPane":{"description":"Two panels with a keyboard and pointer resize separator and two step buttons on the divider; a horizontal split stacks below a container-width threshold.","props":{"primary":{"type":"node","required":true,"description":"Primary panel content, always first in reading order."},"secondary":{"type":"node","required":true,"description":"Secondary panel content."},"size":{"type":"number","description":"Controlled primary-panel percentage of available space, excluding the handle. Clamped to minSize/maxSize. Stacked panels share a bounded height by the same split."},"defaultSize":{"type":"number","default":50,"description":"Initial uncontrolled primary-panel percentage."},"onSizeChange":{"type":"function","description":"(percent: number) => void. Called for valid keyboard, pointer or step-button adjustments."},"minSize":{"type":"number","default":20,"description":"Minimum primary-panel percentage. Finite values clamp to 0–100; non-finite values use 20."},"maxSize":{"type":"number","default":80,"description":"Maximum primary-panel percentage. Finite values clamp between minSize and 100; non-finite values use 80."},"step":{"type":"number","default":1,"description":"Positive percentage increment for the arrow keys and dragging. Invalid values use 1. The step buttons move 10 points, or step when it is larger."},"orientation":{"type":"enum","values":["horizontal","vertical"],"default":"horizontal","description":"Horizontal puts panels side by side; vertical puts them above and below. Give vertical layouts a bounded height."},"disabled":{"type":"boolean","default":false,"description":"Turns resizing off: the separator leaves the focus order and the step buttons are hidden."},"label":{"type":"string","default":"Resize panels","description":"Accessible name of the separator."},"stackBelow":{"type":"number","default":640,"description":"Container width in CSS pixels below which a horizontal split stacks its panels and hides resizing. A vertical split never stacks. Use 0 to disable responsive stacking."},"primaryLabel":{"type":"string","default":"Primary panel","description":"Accessible name of the primary panel while its content scrolls; it is then a focusable region."},"secondaryLabel":{"type":"string","default":"Secondary panel","description":"Accessible name of the secondary panel while its content scrolls; it is then a focusable region."}},"composable_with":["Card","DataGrid","Chart","EventTimeline"],"never_inside":["Button"],"example":"<SplitPane primary={<section>Telemetry</section>} secondary={<section>Inspector</section>} defaultSize={60} label=\"Resize telemetry and inspector\" />"},"StatCard":{"description":"Single-metric display: label, mono numeric value, and an optional trend indicator paired with an arrow glyph (non-color cue per WCAG 1.4.1). It keeps a minimum footprint (169 px tall, up to 180 px wide, narrower inside a narrower container) and its text wraps. It measures its own width, so a large number steps down in size to fit it (never below the body text size), and in a row that sizes its items to their content it is 180 px wide.","props":{"label":{"type":"string","required":true,"description":"Short metric heading displayed uppercase and used as the default accessible name for the metric group. Values, units, and captions retain their casing. Override with aria-label or aria-labelledby when more context is needed."},"value":{"type":"union","types":["string","number"],"required":true,"description":"The metric value (string or number). Rendered in mono for digit alignment. A number is never split between its digits: one with digit groups (1,234,567.890) wraps only after a group separator, and its last group stays with the unit. When they do not fit the card the value steps down in size, never below the body text size (--oprt-type-base); at that size, if they still do not fit together, the unit moves to its own line under the value. Any other text breaks anywhere. Nothing is truncated or abbreviated."},"unit":{"type":"string","description":"Unit suffix shown beside the value, e.g. 'ms'. Its first word stays beside the last digits at every size above the body text size; only when they cannot fit together even at that size does the unit move to its own line under the value. The rest of a long unit wraps."},"delta":{"type":"number","description":"Signed change. Trend is derived from its sign when 'trend' is omitted."},"trend":{"type":"enum","values":["up","down","flat"],"description":"Explicit trend direction. Overrides the sign of 'delta' when provided."},"trendIntent":{"type":"enum","values":["positive","negative","neutral"],"description":"Whether the change is good, bad or neither for the application, which sets the trend color independently of its direction: falling errors or latency are 'positive', rising critical alarms are 'negative'. Without it the color follows the direction (up is success, down is error). The arrow and the change text stay as the non-color cue."},"deltaLabel":{"type":"string","description":"Human-readable change text, e.g. '+12%'."},"caption":{"type":"string","description":"Secondary supporting line below the metric."}},"composable_with":["Card","DataTable","Sidebar","Toolbar"],"never_inside":["StatCard","Badge","Button"],"example":"<StatCard label=\"LATENCY\" value={42} unit=\"ms\" delta={-12} deltaLabel=\"-12%\" trendIntent=\"positive\" />"},"Tabs":{"description":"Tabbed interface root. Underline-accent style. Wraps TabsList and one TabsContent per TabsTrigger.","props":{"motion":{"type":"enum","values":["auto","none"],"default":"auto","description":"Tactile pointer/touch feedback. None disables motion; keyboard and system reduced motion are always immediate."},"value":{"type":"string"},"defaultValue":{"type":"string"},"onValueChange":{"type":"function"},"orientation":{"type":"enum","values":["horizontal","vertical"],"default":"horizontal"}},"slots":{"children":{"type":"TabsList | TabsContent","required":true}},"composable_with":["Card"],"never_inside":["Button","Badge"],"example":"<Tabs defaultValue=\"overview\">\n  <TabsList>\n    <TabsTrigger value=\"overview\">OVERVIEW</TabsTrigger>\n    <TabsTrigger value=\"logs\">LOGS</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"overview\">System nominal.</TabsContent>\n  <TabsContent value=\"logs\">No entries.</TabsContent>\n</Tabs>"},"TabsList":{"description":"Row (or column, when vertical) of tab triggers with a rail on the panel side. A row wider than its container stays one row and scrolls sideways inside itself: an edge fade marks each side with hidden tabs, and the selected tab is scrolled into view on open and on selection. Name it with aria-label.","props":{},"slots":{"children":{"type":"TabsTrigger","required":true}},"composable_with":["Tabs"],"never_inside":["TabsTrigger","TabsContent"],"example":"<TabsList>\n  <TabsTrigger value=\"overview\">OVERVIEW</TabsTrigger>\n  <TabsTrigger value=\"logs\">LOGS</TabsTrigger>\n</TabsList>"},"TabsTrigger":{"description":"Single tab trigger. Active tab shows an accent underline and bolder weight. A label wider than the row wraps inside the tab, which grows taller. Must be a child of TabsList.","props":{"value":{"type":"string","required":true},"disabled":{"type":"boolean","default":false}},"composable_with":["TabsList"],"never_inside":["TabsContent","Button","Badge"],"example":"<TabsTrigger value=\"overview\">OVERVIEW</TabsTrigger>"},"TabsContent":{"description":"Content panel associated with a TabsTrigger by matching value. Must be a child of Tabs.","props":{"value":{"type":"string","required":true}},"slots":{"children":{"type":"any","required":false}},"composable_with":["Tabs"],"never_inside":["TabsList","TabsTrigger"],"example":"<TabsContent value=\"overview\">System nominal.</TabsContent>"},"TagGroup":{"description":"A labeled collection of tags with optional controlled removal, native keyboard navigation and authored label casing.","props":{"items":{"type":"array","required":true,"description":"Readonly TagItem[]: unique string id, label and optional disabled."},"label":{"type":"string","required":true,"description":"Accessible name for the tag collection."},"onRemove":{"type":"function","description":"Requests removal by id. The parent supplies the updated items; declined removals retain the item and focus."},"disabled":{"type":"boolean","default":false},"emptyMessage":{"type":"string","description":"Optional message when items is empty."},"returnFocusRef":{"type":"node","description":"RefObject<HTMLElement | null> focused when the application removes the last tag while focus is in the group, on the next render or after a server round trip. An operator who has moved on keeps their focus."},"className":{"type":"string"}},"composable_with":["PropertyFilter"],"never_inside":["Button"],"example":"<TagGroup label=\"Active filters\" items={filters} onRemove={(id) => setFilters(filters.filter((item) => item.id !== id))} returnFocusRef={addButtonRef} />"},"Textarea":{"description":"Multi-line text input. Fixed rows (default 4); scroll on overflow. No native resize handle (rounded grip violates radius rule).","props":{"rows":{"type":"number","default":4},"value":{"type":"string"},"defaultValue":{"type":"string"},"placeholder":{"type":"string"},"disabled":{"type":"boolean","default":false},"required":{"type":"boolean","default":false},"invalid":{"type":"boolean","description":"Override Field's invalid state."},"name":{"type":"string"}},"composable_with":["Field"],"never_inside":["Button","Badge"],"example":"<Field label=\"MISSION NOTES\" help=\"Free-form text.\">\n  <Textarea placeholder=\"ENTER NOTES...\" />\n</Field>"},"TimeField":{"description":"Controlled 24-hour wall-time field with segmented editing and explicit draft validity. It carries no date or time zone.","props":{"label":{"type":"string","required":true},"value":{"type":"string","required":true,"description":"HH:mm from 00:00 through 23:59, or null."},"onValueChange":{"type":"function","required":true,"description":"Requests a complete valid time or null after clearing."},"onDraftValidityChange":{"type":"function","description":"Callback (valid, { pending }). Pending identifies uncommitted local edits; pristine required-empty or malformed supplied values are invalid but not pending. Reports initial and changed validity. False for partial, out-of-bounds, or required-empty drafts even while value still contains an earlier valid time. Block Review/Save while false."},"min":{"type":"string","description":"Inclusive HH:mm lower bound."},"max":{"type":"string","description":"Inclusive HH:mm upper bound. Overnight bounds are not supported."},"disabled":{"type":"boolean","default":false},"readOnly":{"type":"boolean","default":false},"required":{"type":"boolean","default":false},"id":{"type":"string","description":"ID of the focusable time-control group. Focusing it or its forwarded HTMLDivElement ref enters the first segment."},"className":{"type":"string"}},"composable_with":["FormSection","FormErrorSummary","DateTimePicker"],"never_inside":["Button"],"example":"<TimeField id=\"start-time\" label=\"Start time\" value={time} onValueChange={setTime} onDraftValidityChange={setTimeValid} required />"},"TimeRange":{"description":"Controlled UTC range with separate native date and time fields, OPERATOR Calendar/Clock icons, validated drafts, an Apply action, and optional presets. One line under the fields gives the draft range in 24-hour UTC with milliseconds, and an edit not yet applied is said so.","props":{"value":{"type":"node","required":true,"description":"TimeRangeValue: { start: number; end: number }, Unix epoch milliseconds. Start must precede end; dates must be in years 0001–9999."},"onValueChange":{"type":"function","required":true,"description":"(value: TimeRangeValue) => void. Only called on Apply, Enter or a valid preset; never for invalid drafts."},"onDraftValidityChange":{"type":"function","description":"(valid: boolean, details: { pending: boolean }) => void. Reports on mount and on every change whether the range in the fields can be used as it stands; valid is false while they hold an error or an edit not yet applied (pending: true). Connect it to Review and Save, as with DateRangePicker."},"presets":{"type":"array","items":{"id":"string (required, unique)","label":"string (required)","value":"TimeRangeValue (required)"},"description":"Readonly TimeRangePreset array. Invalid or out-of-bounds presets are disabled."},"min":{"type":"number","description":"Inclusive minimum epoch milliseconds. Invalid dates or conflicting bounds prevent commits."},"max":{"type":"number","description":"Inclusive maximum epoch milliseconds."},"disabled":{"type":"boolean","default":false},"label":{"type":"string","default":"Time range","description":"Accessible name of the range group; each input also has a visible UTC label."}},"composable_with":["EventTimeline","Chart","DataGrid"],"never_inside":["Button"],"example":"<TimeRange value={range} onValueChange={setRange} min={windowStart} max={windowEnd} presets={[{ id: \"all\", label: \"Full window\", value: { start: windowStart, end: windowEnd } }]} />"},"ToastProvider":{"description":"Wraps the app and renders the notification region, a fixed corner of the window where Toast notifications stack and announce. The region never outgrows the window: a tall stack scrolls inside it, and a new notice is scrolled into view unless the reader has scrolled away from the newest.","props":{"label":{"type":"string","default":"Notifications","description":"Names the notification region, as '<label> (F8)', F8 being the key that moves focus to it, and is spoken before each announcement. Set it for a translated or more specific name."},"swipeDirection":{"type":"enum","values":["right","left","up","down"],"default":"right","description":"The direction a touch swipe dismisses a toast; a mouse or pen drag selects text instead. With right or left, a vertical touch drag on a toast scrolls the region; with up or down, that drag is the swipe, so the region does not scroll by dragging a toast."},"duration":{"type":"number","description":"Milliseconds before a toast closes itself. Defaults to 5000."}},"slots":{"children":{"type":"Toast","required":true}},"never_inside":["ToastProvider","Toast"],"example":"<ToastProvider>\n  <Toast variant=\"success\" title=\"DEPLOYED\" description=\"Build promoted to prod.\" open={open} onOpenChange={setOpen} />\n</ToastProvider>"},"Toast":{"description":"A single transient notification with a severity icon, title, optional description, and dismiss control. It closes itself after its duration or when dismissed, by calling onOpenChange(false); the application removes it.","props":{"variant":{"type":"enum","values":["info","success","warning","error"],"default":"info","description":"Severity. Drives the icon, the accent color and, unless type is set, how the toast is announced: error and warning interrupt a screen reader, info and success wait."},"title":{"type":"string","required":true},"description":{"type":"string"},"open":{"type":"boolean","description":"Controlled open state. A toast that is open and never closed stays on screen: pass onOpenChange and remove the toast, or clear open, when it is called."},"defaultOpen":{"type":"boolean","default":true,"description":"Initial open state when open is not controlled."},"onOpenChange":{"type":"function","description":"Called with false when the toast closes itself after its duration, or when Dismiss, Escape or a touch swipe closes it."},"type":{"type":"enum","values":["foreground","background"],"description":"How the toast is announced: foreground interrupts a screen reader, background waits. Defaults to foreground for error and warning and background for info and success."},"duration":{"type":"number"},"persistent":{"type":"boolean","default":false,"description":"Disables automatic dismissal (duration Infinity). The toast stays until dismissed."}},"composable_with":["ToastProvider"],"never_inside":["Toast"],"example":"<Toast variant=\"error\" title=\"LINK LOST\" description=\"No telemetry for 12s.\" open={open} onOpenChange={setOpen} />"},"Toggle":{"description":"Binary on/off switch. Square thumb sliding inside a square track. Accent fill when on; an invalid switch draws its track in the error color. In forced-colors mode the on state, the thumb and keyboard focus use system colors.","props":{"motion":{"type":"enum","values":["auto","none"],"default":"auto","description":"Tactile pointer/touch feedback. None disables motion; keyboard and system reduced motion are always immediate."},"checked":{"type":"boolean"},"defaultChecked":{"type":"boolean","default":false},"onCheckedChange":{"type":"function","description":"Receives the new checked value."},"disabled":{"type":"boolean","default":false},"required":{"type":"boolean","default":false,"description":"Announced as required. Like a required Checkbox, it blocks native form submission until the switch is on. The native attribute is added when the page hydrates (the server markup has aria-required), so a form submitted earlier is not blocked: validate on the server too."},"size":{"type":"enum","values":["sm","md","lg"],"default":"md"},"name":{"type":"string"},"value":{"type":"string"},"id":{"type":"string","description":"Id of the switch input. Inside a Field it defaults to the Field's id."},"className":{"type":"string","description":"Classes applied to the switch's label root."},"aria-label":{"type":"string","description":"Accessible name when there is no visible label. Inside a Field the Field's label names the switch."},"aria-labelledby":{"type":"string","description":"Id of the element that names the switch."},"aria-describedby":{"type":"string","description":"Id of the element that describes the switch. A Field supplies its help or error."},"aria-invalid":{"type":"union","types":["boolean","string"],"description":"Marks the switch invalid: announced as invalid, with its track in the error color. A Field with an error sets it."}},"composable_with":["Field","Toolbar"],"never_inside":["Button","Badge"],"example":"<Field label=\"ENABLE TELEMETRY\">\n  <Toggle defaultChecked />\n</Field>"},"Toolbar":{"description":"Horizontal or vertical action bar with roving-tabindex arrow-key navigation over its focusable children. A horizontal toolbar that does not fit wraps onto more rows and grows taller, so no action is hidden; arrow keys follow reading order across rows. A vertical toolbar stacks.","props":{"orientation":{"type":"enum","values":["horizontal","vertical"],"default":"horizontal"},"ariaLabel":{"type":"string","description":"The toolbar's accessible name (native aria-label works too). With aria-labelledby and no label the toolbar is named by that element; a toolbar given neither is called Toolbar."}},"slots":{"children":{"type":"Button | ButtonGroup | Badge | Toggle | CopyButton | ConfirmDialog | DropdownMenu | Tooltip | ToolbarSeparator","required":true}},"composable_with":["Button","ButtonGroup","Badge","Toggle","CopyButton","ConfirmDialog","DropdownMenu","Tooltip","ToolbarSeparator"],"never_inside":["Toolbar"],"example":"<Toolbar ariaLabel=\"Track actions\">\n  <Button>ZOOM</Button>\n  <ToolbarSeparator />\n  <Button>RESET</Button>\n</Toolbar>"},"ToolbarSeparator":{"description":"Visual divider between Toolbar action groups. It follows its Toolbar: a rule across a vertical toolbar, a rule between the actions of a horizontal one.","props":{"orientation":{"type":"enum","values":["horizontal","vertical"],"default":"horizontal","description":"The axis of the toolbar the separator is in; the rule runs across it. It follows its Toolbar when omitted, so pass it only to say otherwise."}},"composable_with":["Toolbar"],"never_inside":["ToolbarSeparator"],"example":"<ToolbarSeparator />"},"Tooltip":{"description":"Supplementary text on hover or keyboard focus of a trigger, wrapping at about 20rem. A disabled Button trigger stays focusable and announced unavailable, so focus or a tap shows the explanation. Built on React Aria Components (TooltipTrigger + Tooltip), portal'd, with a bordered surface.","props":{"side":{"type":"enum","values":["top","right","bottom","left"],"default":"top"},"align":{"type":"enum","values":["start","center","end"],"default":"center"},"delayDuration":{"type":"number","default":200},"open":{"type":"boolean"},"defaultOpen":{"type":"boolean"},"onOpenChange":{"type":"function"}},"slots":{"content":{"type":"text | node","required":true},"children":{"type":"focusable trigger element | text (text renders a text button)","required":true}},"composable_with":["Button","Badge","Toolbar"],"never_inside":["Tooltip"],"example":"<Tooltip content=\"GRID 38S MC\"><Button>COORD</Button></Tooltip>"},"TreeView":{"description":"React Aria hierarchical treegrid with stable string IDs, single selection, expansion, arrow-key navigation, and typeahead. Labels wrap and keep a readable width; a hierarchy deeper than the tree is wide scrolls sideways inside the tree, and keyboard focus brings the focused row's label into view. Accepts id, style, aria-labelledby, aria-describedby and data attributes.","props":{"items":{"type":"array","items":{"id":"unique string","label":"string","children":"optional recursive TreeViewItem[]","disabled":"optional boolean"},"required":true},"label":{"type":"string","default":"Navigation"},"selectedId":{"type":"string","description":"Controlled selected string ID; null clears the selection."},"onSelectionChange":{"type":"function","description":"(id: string | null) => void. Navigation may select as focus moves."},"expandedIds":{"type":"array","description":"Controlled expanded string IDs."},"defaultExpandedIds":{"type":"array","description":"Initial expanded IDs for local state."},"onExpandedChange":{"type":"function","description":"(ids: string[]) => void."},"disabled":{"type":"boolean","default":false},"emptyMessage":{"type":"string","default":"No items."}},"composable_with":["AppShell","Inspector"],"never_inside":["Button"],"example":"<TreeView label=\"Assets\" items={groups} selectedId={selectedId} onSelectionChange={setSelectedId} />"},"UploadQueue":{"description":"Controlled file queue with supplied transfer states, byte progress and explicit recovery actions.","props":{"label":{"type":"string","required":true},"items":{"type":"array","required":true,"description":"Readonly UploadQueueItem[] with unique id, name, sizeBytes, state (ready/queued/uploading/cancel-requested/uploaded/failed/canceled), optional loadedBytes/totalBytes/message and explicit cancelable/retryable/removable capabilities. Ready means local selection; uploaded requires a supplied transport outcome. Any other state shows as Unknown state."},"disabled":{"type":"boolean","default":false},"onCancel":{"type":"function","description":"Requests cancellation by stable ID only for explicitly cancelable queued/uploading items. Does not change supplied state."},"onRetry":{"type":"function","description":"Requests retry by stable ID only for explicitly retryable failed items."},"onRemove":{"type":"function","description":"Requests removal by stable ID only for explicitly removable items. The row remains until items changes; focus moves only when its focused element is removed."},"className":{"type":"string"}},"composable_with":["FileUpload","AttachmentPreview","JobStatus"],"never_inside":["Button"],"example":"<UploadQueue label=\"Import files\" items={files} onCancel={requestCancel} onRetry={requestRetry} onRemove={requestRemove} />"}},"composition_rules":{"Card":{"allowed_children":["CardHeader","CardBody","CardFooter"],"children":{"CardHeader":{"allowed_children":["text","Badge","Button"]},"CardBody":{"allowed_children":["any"]},"CardFooter":{"allowed_children":["Button","ButtonGroup"]}}},"Collapsible":{"allowed_children":["CollapsibleItem"]},"DropdownMenu":{"allowed_children":["DropdownMenuItem","DropdownMenuSeparator","DropdownMenuLabel"]},"RadioGroup":{"allowed_children":["Radio"]},"Select":{"allowed_children":["SelectOption"]},"Sidebar":{"allowed_children":["SidebarLogo","SidebarSection","SidebarFooter"],"children":{"SidebarSection":{"allowed_children":["SidebarItem"]}}},"Tabs":{"allowed_children":["TabsList","TabsContent"],"children":{"TabsList":{"allowed_children":["TabsTrigger"]}}},"ToastProvider":{"allowed_children":["Toast"]},"Toolbar":{"allowed_children":["Button","ButtonGroup","Badge","Toggle","CopyButton","ConfirmDialog","DropdownMenu","Tooltip","ToolbarSeparator"]}},"patterns":{"CommunicationsConsole":{"description":"Coordinate fictional military support channels, compose messages, distinguish delivery from acknowledgment and retain drafts through connection changes.","composed_of":["Badge","Button","Checkbox","EntityPreview","Field","Textarea"],"layout":"import { CommunicationsConsoleDemo } from \"./patterns/communications-console\";\n\n<CommunicationsConsoleDemo />","dependencies":["@oprt/react","react"],"files":{"patterns/communications-console/index.ts":468,"patterns/communications-console/communications-console.tsx":33254,"patterns/operational-domain.ts":2429,"patterns/communications-console/types.ts":1786,"patterns/communications-console/demo.tsx":4047,"patterns/communications-console/fixtures.ts":4586,"patterns/communications-console/communications-state.ts":4186},"install":"oprt add communications-console"},"FacilityMonitoring":{"description":"Review supplied cameras, equipment, map and events at one shared time, with explicit recording gaps, session bookmarks, decoded-frame snapshots and camera-request outcomes.","composed_of":["ActionStatus","AttachmentPreview","Badge","Button","Chart","Checkbox","EntityPreview","EventTimeline","Field","Inspector","MediaFrame","PlaybackControls","Popover","TimeRange"],"layout":"import { FacilityMonitoringDemo } from \"./patterns/facility-monitoring\";\n\n<FacilityMonitoringDemo />","dependencies":["@oprt/react","ol","react"],"files":{"patterns/facility-monitoring/index.ts":514,"patterns/facility-monitoring/facility-monitoring.tsx":30322,"patterns/geospatial-workspace/geo-map.tsx":22447,"patterns/geospatial-workspace/engine-contract.ts":633,"patterns/geospatial-workspace/types.ts":2982,"patterns/geospatial-workspace/geometry.ts":7263,"patterns/geospatial-workspace/renderer-data.ts":2112,"patterns/geospatial-workspace/utc-stamp.tsx":826,"patterns/operational-domain.ts":2429,"patterns/geospatial-workspace/engine.ts":17376,"patterns/geospatial-workspace/feature-data.ts":6031,"patterns/facility-monitoring/fixtures.ts":7247,"patterns/geospatial-workspace/fixtures.ts":7459,"patterns/facility-monitoring/types.ts":2109,"patterns/facility-monitoring/review-state.ts":8939,"patterns/facility-monitoring/synchronized-video.tsx":13653,"patterns/facility-monitoring/demo.tsx":4029,"patterns/facility-monitoring/training-media.ts":190171},"install":"oprt add facility-monitoring"},"OperationsMap":{"description":"Inspect military base-support reports on a linked map and table, with explicit source freshness, retained positions, uncertainty, measurement and accepted annotations.","composed_of":["DescriptionList","Badge","Button","Checkbox","CoordinateInput","DataTable","EntityPreview","Field","Input","Inspector","LayerControl","MapControls","MapLegend","MapScale","Popover","Select","SelectOption"],"layout":"import { OperationsMapDemo } from \"./patterns/geospatial-workspace\";\n\n<OperationsMapDemo />","dependencies":["@oprt/react","ol","react"],"files":{"patterns/geospatial-workspace/index.ts":596,"patterns/geospatial-workspace/geospatial-workspace.tsx":46269,"patterns/operational-domain.ts":2429,"patterns/geospatial-workspace/geo-map.tsx":22447,"patterns/geospatial-workspace/engine-contract.ts":633,"patterns/geospatial-workspace/types.ts":2982,"patterns/geospatial-workspace/geometry.ts":7263,"patterns/geospatial-workspace/renderer-data.ts":2112,"patterns/geospatial-workspace/utc-stamp.tsx":826,"patterns/geospatial-workspace/engine.ts":17376,"patterns/geospatial-workspace/feature-data.ts":6031,"patterns/geospatial-workspace/report-results.tsx":4804,"patterns/geospatial-workspace/workspace-state.ts":12098,"patterns/geospatial-workspace/demo.tsx":8222,"patterns/geospatial-workspace/military-fixture.ts":4009,"patterns/geospatial-workspace/fixtures.ts":7459},"install":"oprt add operations-map"},"AssetManagement":{"description":"Manage an industrial equipment register, inspect condition and ownership, create records and revise service assignments with explicit save outcomes.","composed_of":["Badge","Button","CollectionState","ConfirmDialog","CopyButton","DataGrid","Dialog","EntityPreview","Field","Input","Inspector","Select","SelectOption","Textarea"],"layout":"import { AssetManagementDemo } from \"./patterns/resource-management\";\n\n<AssetManagementDemo />","dependencies":["@oprt/react","react"],"files":{"patterns/resource-management/index.ts":491,"patterns/resource-management/resource-management.tsx":20091,"patterns/operational-domain.ts":2429,"patterns/resource-transfer/export.ts":3731,"patterns/resource-transfer/transfer-state.ts":20877,"patterns/resource-transfer/csv.ts":7383,"patterns/resource-management/fixtures.ts":10589,"patterns/resource-management/resource-form.tsx":9636,"patterns/resource-management/state.ts":4226,"patterns/resource-management/demo.tsx":1153},"install":"oprt add asset-management"},"IncidentResponse":{"description":"Triage military support incidents, assign case ownership, review evidence, resolve cases and prepare a shift handover.","composed_of":["Badge","Button","EntityPreview","Field","Input","Select","SelectOption","Textarea"],"layout":"import { IncidentResponseDemo } from \"./patterns/incident-response\";\n\n<IncidentResponseDemo />","dependencies":["@oprt/react","react"],"files":{"patterns/incident-response/index.ts":433,"patterns/incident-response/incident-response.tsx":25014,"patterns/operational-domain.ts":2429,"patterns/incident-response/incident-state.ts":4311,"patterns/incident-response/types.ts":1837,"patterns/incident-response/demo.tsx":1576,"patterns/incident-response/fixtures.ts":13123},"install":"oprt add incident-response"},"MaintenancePlanning":{"description":"Schedule industrial maintenance in crew and resource lanes, review prerequisites and resolve time and availability conflicts before applying changes.","composed_of":["Badge","Button","EntityPreview","Field","Input","Inspector","Select","SelectOption"],"layout":"import { MaintenancePlanningDemo } from \"./patterns/planning-scheduling\";\n\n<MaintenancePlanningDemo />","dependencies":["@oprt/react","react"],"files":{"patterns/planning-scheduling/index.ts":652,"patterns/planning-scheduling/planning-scheduling.tsx":37117,"patterns/planning-scheduling/schedule-state.ts":5311,"patterns/planning-scheduling/demo.tsx":2454,"patterns/operational-domain.ts":2429,"patterns/planning-scheduling/fixtures.ts":7788},"install":"oprt add maintenance-planning"}},"guidance":{"rules":[{"id":"look-it-up","rule":"Look a component up before using it (`oprt component <Name>`). A prop or value that is not in its contract does not exist; do not guess from other libraries.","wrong":"<Button isLoading leftIcon={<Spinner />} color=\"green\">Save</Button>","right":"<Button disabled={saving}>Save</Button>"},{"id":"components-before-markup","rule":"Use an OPERATOR component before writing markup. A native button, input, select, table or dialog, or a styled div standing in for one, is an escape hatch: search first (`oprt search <need>`).","wrong":"<button className=\"border px-3u\">Deploy</button>","right":"<Button>Deploy</Button>"},{"id":"start-from-a-recipe","rule":"For a whole screen, start from a recipe and adapt it (`oprt search <need>`, then `oprt add <recipe>`). Composing a screen from nothing is the last resort."},{"id":"one-primary-action","rule":"One primary Button in view at a time. It is the only button with a cut corner at rest, so two of them say there are two main actions. Use secondary or tertiary for the rest.","wrong":"<Button>Save</Button> <Button>Export</Button> <Button>Share</Button>","right":"<Button>Save</Button> <Button variant=\"secondary\">Export</Button> <Button variant=\"tertiary\">Share</Button>"},{"id":"no-invented-variants","rule":"When the option you want is missing, the answer is another component, not a new value. A green button is not a Button variant: status is a Badge.","wrong":"<Button variant=\"success\">Online</Button>","right":"<Badge variant=\"success\">Online</Badge>"},{"id":"status-in-words","rule":"Status is never color alone. Say it in words with a Badge or an Alert.","wrong":"<span className=\"text-oprt-error\">●</span>","right":"<Badge variant=\"error\">Link lost</Badge>"},{"id":"fields-wrap-controls","rule":"Wrap every form control in a Field. The Field wires the label, help text and error to the control; do not set id or aria attributes for that yourself.","wrong":"<label htmlFor=\"callsign\">Call sign</label> <Input id=\"callsign\" />","right":"<Field label=\"Call sign\"><Input /></Field>"},{"id":"parts-inside-parents","rule":"A part goes inside its parent, and only what a parent allows goes inside it: CardHeader in Card, TabsTrigger in TabsList, SelectOption in Select. Nothing you can click goes inside a Button or a Badge."},{"id":"tokens-only","rule":"Color, spacing and type come from OPERATOR tokens. No hex or rgb colors, no arbitrary pixel values, and no rounded corners: the radius is 0 everywhere.","wrong":"className=\"bg-[#1a1a1a] p-[13px] rounded-md\"","right":"className=\"bg-oprt-surface-1 p-2u\""},{"id":"write-labels-plainly","rule":"Write labels in normal case. Buttons, tabs, badges and headings uppercase themselves; names, IDs, values and body text keep the case you give them. Never uppercase a string in code.","wrong":"<Button>{label.toUpperCase()}</Button>","right":"<Button>Deploy</Button>"},{"id":"dark-only","rule":"There is one theme and it is dark. Do not add a light theme, a theme switch, or dark: variants."},{"id":"unknown-is-a-state","rule":"Unknown, stale and unavailable are states to show, never values to fill in. Keep the UTC label on a time, and keep data quality separate from the condition of the thing measured."},{"id":"let-components-own-behavior","rule":"Pass data and settings as props. Sorting, focus, keyboard handling and announcements belong to the component; do not rebuild them around it."},{"id":"check-before-done","rule":"Before you call the work done, run `oprt check <paths>` and fix what it reports."}],"components":{"ActionStatus":{"use_for":["show the outcome of an action the user just took, with a way to retry"],"not_for":[{"need":"a long-running job with progress","use":"JobStatus"},{"need":"a brief confirmation that needs no follow-up","use":"Toast"}]},"Alert":{"use_for":["an inline message that needs attention: error, warning, info or success","a callout"],"not_for":[{"need":"a brief confirmation that goes away","use":"Toast"},{"need":"a decision the user must make before going on","use":"ConfirmDialog"},{"need":"a short status label in a row or header","use":"Badge"}]},"AppShell":{"use_for":["the frame of an app or workspace: its name, mode, data connection and UTC time","hold the app's Sidebar, as its navigation"],"values":{"connection":{"connected":"The data link is up.","connecting":"The first attempt is in progress.","reconnecting":"The link dropped and is being retried.","offline":"There is no link; what is on screen is not updating.","unknown":"The application has not reported a state. The default: never assume connected."}}},"AttachmentPreview":{"use_for":["show an attached file: its name, type, size and a safe preview"]},"Avatar":{"use_for":["show a person or unit by initials"],"not_for":[{"need":"show a status","use":"Badge"}],"values":{"size":{"sm":"Dense rows and lists.","md":"The default.","lg":"The header of a profile or detail page."}}},"Badge":{"use_for":["show a status label","a category or count that is read, not clicked"],"not_for":[{"need":"something the user clicks","use":"Button"},{"need":"toggle filters","use":"FilterBar"},{"need":"removable tags","use":"TagGroup"}],"values":{"variant":{"success":"Nominal, healthy or completed.","warning":"Degraded, or needs attention soon.","error":"Failed, in alarm or blocked.","info":"A neutral notice, or in progress.","neutral":"A category or count with no severity. The default."}}},"Breadcrumb":{"use_for":["show where a page sits in the hierarchy"]},"BulkActionBar":{"use_for":["act on several selected rows at once"]},"BulkResults":{"use_for":["show what happened to each item after a bulk action"]},"ButtonGroup":{"use_for":["a row of related buttons","a segmented set of actions"],"not_for":[{"need":"toggle filters above a list","use":"FilterBar"},{"need":"switch between views","use":"Tabs"}],"values":{"orientation":{"horizontal":"The default: a row.","vertical":"Stacked, in a narrow column."}}},"Button":{"use_for":["trigger an action","submit a form"],"not_for":[{"need":"go to another page","use":"Link"},{"need":"show a status","use":"Badge"},{"need":"copy a value to the clipboard","use":"CopyButton"}],"values":{"variant":{"primary":"The one main action of a view or dialog. At most one in view: it carries the cut corner.","secondary":"Other important actions beside the primary.","tertiary":"Low-emphasis actions: toolbars, and actions repeated on every row.","danger":"A destructive or irreversible action. Pair it with ConfirmDialog.","ghost":"The least emphasis: an inline action inside dense content."},"size":{"sm":"Dense tables, toolbars and the inside of cards.","md":"The default.","lg":"The main call to action on a page, and touch-first screens."}}},"Calendar":{"use_for":["pick a day from a month grid that is always visible"],"not_for":[{"need":"a date field that opens a calendar","use":"DatePicker"}]},"Card":{"use_for":["group related content in a bordered panel"],"not_for":[{"need":"one headline metric","use":"StatCard"},{"need":"label and value facts","use":"DescriptionList"}]},"CardHeader":{"part_of":"Card"},"CardBody":{"part_of":"Card"},"CardFooter":{"part_of":"Card"},"Chart":{"use_for":["plot data as a line, area, bar, scatter, histogram or heatmap"],"not_for":[{"need":"a tiny trend inside a row or card","use":"Sparkline"},{"need":"one number with its trend","use":"StatCard"}],"values":{"variant":{"line":"Change over time.","area":"Change over time, where the volume matters.","bar":"Compare categories.","scatter":"The relationship between two measures.","histogram":"The distribution of one measure.","heatmap":"Intensity across two dimensions, such as hour by day."}}},"Checkbox":{"use_for":["a yes or no choice in a form","select rows","a parent whose children are partly selected"],"not_for":[{"need":"a setting that takes effect at once","use":"Toggle"},{"need":"several options from a list","use":"MultiSelect"}],"values":{"defaultChecked":{"true":"Starts checked.","false":"Starts unchecked.","indeterminate":"A parent whose children are partly selected."},"size":{"sm":"Dense rows, toolbars and filter bars.","md":"The default, for forms.","lg":"Touch-first screens, or a control that stands alone."}}},"Collapsible":{"use_for":["sections that expand and collapse (an accordion)"],"values":{"type":{"single":"One section open at a time.","multiple":"Several sections may be open."}}},"CollapsibleItem":{"part_of":"Collapsible"},"CollectionState":{"use_for":["the empty, loading, error or no-results state of a list or table"],"not_for":[{"need":"a placeholder in the shape of the content while it loads","use":"Skeleton"}]},"ComboBox":{"use_for":["pick one from a long or searchable list","autocomplete with results fetched as you type"],"not_for":[{"need":"pick one from a short list","use":"Select"}],"values":{"size":{"sm":"Dense rows, toolbars and filter bars.","md":"The default, for forms.","lg":"Touch-first screens, or a control that stands alone."}}},"CommandPalette":{"use_for":["a keyboard command launcher: search and run an action"]},"ConfirmDialog":{"use_for":["confirm a destructive or high-consequence action"],"not_for":[{"need":"a form or a task in a modal","use":"Dialog"}],"values":{"confirmVariant":{"primary":"A consequential action that can be recovered from.","danger":"A destructive or irreversible action."},"size":{"sm":"A short question or a single field.","md":"The default: a form or a few paragraphs.","lg":"Wide content, such as a table or fields side by side."}}},"ContextMenu":{"use_for":["right-click actions on an item, with a visible menu button as well"],"not_for":[{"need":"a menu opened from a button","use":"DropdownMenu"}]},"CoordinateInput":{"use_for":["enter a latitude and longitude"]},"CopyButton":{"use_for":["copy an exact value (an ID, a coordinate, a command) to the clipboard"],"values":{"size":{"sm":"Dense rows, toolbars and filter bars.","md":"The default, for forms.","lg":"Touch-first screens, or a control that stands alone."}}},"DataGrid":{"use_for":["a large or interactive table: selection, sorting, column sizing, paging, thousands of rows"],"not_for":[{"need":"a small read-only table","use":"DataTable"},{"need":"label and value facts about one thing","use":"DescriptionList"}],"values":{"mode":{"client":"All rows are in memory; the grid sorts and pages them.","server":"The application fetches each page and sort; pass rowCount."}}},"DataTable":{"use_for":["a simple table of rows, with optional sorting"],"not_for":[{"need":"selection, paging, column sizing or very many rows","use":"DataGrid"}]},"DatePicker":{"use_for":["pick one date"],"not_for":[{"need":"a start and an end date","use":"DateRangePicker"},{"need":"a date and a time","use":"DateTimePicker"},{"need":"a UTC time window","use":"TimeRange"}],"values":{"motion":{"auto":"The default. Opens and closes with motion, and none when the system asks for less.","none":"No motion, for a dense tool where it would distract."}}},"DateRangePicker":{"use_for":["pick a start and an end date"]},"DateTimePicker":{"use_for":["pick a date and a time in a named time zone"]},"DescriptionList":{"use_for":["label and value facts about one thing","metadata or measurements"],"not_for":[{"need":"the identity, condition and key facts of a record","use":"EntityPreview"},{"need":"data quality, source and last update time","use":"OperationalStatus"},{"need":"many records in rows","use":"DataTable"}]},"Dialog":{"use_for":["a modal for a focused task or form"],"not_for":[{"need":"confirm a destructive action","use":"ConfirmDialog"},{"need":"details beside the page, which stays usable","use":"Inspector"},{"need":"a small panel anchored to a button","use":"Popover"}],"values":{"size":{"sm":"A short question or a single field.","md":"The default: a form or a few paragraphs.","lg":"Wide content, such as a table or fields side by side."}}},"Divider":{"use_for":["separate content with a rule, with an optional label"]},"DropdownMenu":{"use_for":["a menu of actions opened from a button"],"not_for":[{"need":"choose a value in a form","use":"Select"},{"need":"right-click actions","use":"ContextMenu"}],"values":{"align":{"start":"Lines up with the start edge of the trigger.","center":"Centered on the trigger.","end":"Lines up with the end edge; use for a trigger at the right of a row."},"side":{"top":"Opens above the trigger.","right":"Opens to the right of the trigger.","bottom":"Opens below the trigger.","left":"Opens to the left of the trigger."}}},"DropdownMenuItem":{"part_of":"DropdownMenu"},"DropdownMenuSeparator":{"part_of":"DropdownMenu"},"DropdownMenuLabel":{"part_of":"DropdownMenu"},"EntityPreview":{"use_for":["summarize one record: its identity, condition, key facts and report quality"]},"EventTimeline":{"use_for":["events and durations on a time axis, in lanes"]},"Field":{"use_for":["give a form control its label, help text and error"]},"FileUpload":{"use_for":["choose, drop or paste files"],"not_for":[{"need":"show files as they upload","use":"UploadQueue"}]},"FilterBar":{"use_for":["quick toggle filters above a list or table"],"not_for":[{"need":"filters built from property, operator and value","use":"PropertyFilter"}]},"FormErrorSummary":{"use_for":["list a form's errors at the top, each leading to its field"]},"FormSection":{"use_for":["group related form fields under a heading"]},"InlineEdit":{"use_for":["edit one value in place, with save and cancel"]},"Input":{"use_for":["a single line of text","a search box"],"not_for":[{"need":"a number with a unit","use":"NumberInput"},{"need":"several lines of text","use":"Textarea"},{"need":"a latitude and longitude","use":"CoordinateInput"},{"need":"a date","use":"DatePicker"}],"values":{"size":{"sm":"Dense rows, toolbars and filter bars.","md":"The default, for forms.","lg":"Touch-first screens, or a control that stands alone."}}},"Inspector":{"use_for":["a side panel of details that leaves the page usable"],"not_for":[{"need":"a task that must be finished or dismissed first","use":"Dialog"}]},"JobStatus":{"use_for":["the state and progress of a long-running job, with cancel and retry"],"values":{"state":{"queued":"Accepted, not started.","running":"In progress.","cancel-requested":"A cancel was asked for and is not yet confirmed.","canceled":"Stopped by request.","complete":"Every item succeeded.","partial":"Finished, with some items failed.","failed":"Did not complete."}}},"LayerControl":{"use_for":["turn map layers on and off, and set their opacity and order"]},"Link":{"use_for":["go to another page or place"],"not_for":[{"need":"trigger an action","use":"Button"}]},"MapControls":{"use_for":["zoom and reset-north buttons for a map"]},"MapLegend":{"use_for":["explain a map's symbols"]},"MapScale":{"use_for":["a distance scale bar for a map"]},"MediaFrame":{"use_for":["show a camera image or video frame with its freshness and capture time"]},"MultiSelect":{"use_for":["choose several options from a short list"],"not_for":[{"need":"choose exactly one","use":"RadioGroup"}]},"NumberInput":{"use_for":["enter a number with a unit, a range and steps"],"values":{"size":{"sm":"Dense rows, toolbars and filter bars.","md":"The default, for forms.","lg":"Touch-first screens, or a control that stands alone."}}},"OperationalStatus":{"use_for":["show the data quality, source and last update time of a reading"]},"PlaybackControls":{"use_for":["play, pause and scrub through recorded time"]},"Popover":{"use_for":["details or controls in a small panel anchored to a button"],"not_for":[{"need":"a short hint of plain text","use":"Tooltip"},{"need":"a task that must be finished or dismissed first","use":"Dialog"},{"need":"a menu of actions","use":"DropdownMenu"}],"values":{"side":{"top":"Opens above the trigger.","right":"Opens to the right of the trigger.","bottom":"Opens below the trigger.","left":"Opens to the left of the trigger."},"align":{"start":"Lines up with the start edge of the trigger.","center":"Centered on the trigger.","end":"Lines up with the end edge; use for a trigger at the right of a row."},"motion":{"auto":"The default. Opens and closes with motion, and none when the system asks for less.","none":"No motion, for a dense tool where it would distract."}}},"Progress":{"use_for":["show how far along a task is, or that it is working"],"not_for":[{"need":"a job with states, cancel and retry","use":"JobStatus"},{"need":"a placeholder while content loads","use":"Skeleton"}],"values":{"variant":{"bar":"The default: a continuous bar.","blocks":"Block glyphs, for a compact row of text."},"size":{"sm":"Inline, in a row.","md":"The default."}}},"PropertyFilter":{"use_for":["build a filter from property, operator and value clauses"]},"RadioGroup":{"use_for":["choose exactly one of a few visible options"],"not_for":[{"need":"choose one from many options","use":"Select"},{"need":"switch something on or off","use":"Toggle"}],"values":{"orientation":{"horizontal":"Two or three short options in a row.","vertical":"The default; suits longer labels."},"size":{"sm":"Dense rows, toolbars and filter bars.","md":"The default, for forms.","lg":"Touch-first screens, or a control that stands alone."}}},"Radio":{"part_of":"RadioGroup"},"Select":{"use_for":["choose one option from a dropdown"],"not_for":[{"need":"a long or searchable list","use":"ComboBox"},{"need":"several choices","use":"MultiSelect"},{"need":"two to five options worth showing at once","use":"RadioGroup"}],"values":{"size":{"sm":"Dense rows, toolbars and filter bars.","md":"The default, for forms.","lg":"Touch-first screens, or a control that stands alone."}}},"SelectOption":{"part_of":"Select"},"Sidebar":{"use_for":["app navigation in a vertical rail"],"not_for":[{"need":"the frame around it: the workspace's name, the data connection, the time","use":"AppShell"}]},"SidebarLogo":{"part_of":"Sidebar"},"SidebarSection":{"part_of":"Sidebar"},"SidebarItem":{"part_of":"Sidebar"},"SidebarFooter":{"part_of":"Sidebar"},"Skeleton":{"use_for":["a placeholder in the shape of the content while it loads"],"not_for":[{"need":"an empty or error state","use":"CollectionState"}],"values":{"variant":{"block":"An area: a card, an image, a chart.","text":"Lines of text."}}},"Slider":{"use_for":["pick a value or a range along a track"],"not_for":[{"need":"an exact number","use":"NumberInput"}],"values":{"orientation":{"horizontal":"The default.","vertical":"A level, such as volume or altitude."},"size":{"sm":"Dense rows, toolbars and filter bars.","md":"The default, for forms.","lg":"Touch-first screens, or a control that stands alone."}}},"Sparkline":{"use_for":["a tiny trend line inside a row or card"],"not_for":[{"need":"a chart with axes and a legend","use":"Chart"}],"values":{"variant":{"line":"The trend only.","area":"The trend, with weight on its size."}}},"SplitPane":{"use_for":["two resizable panels, side by side or stacked"]},"StatCard":{"use_for":["one headline metric with its trend"],"not_for":[{"need":"several facts about one thing","use":"DescriptionList"}]},"Tabs":{"use_for":["switch between views of the same subject"],"not_for":[{"need":"navigate between pages of the app","use":"Sidebar"}],"values":{"orientation":{"horizontal":"The default.","vertical":"Many tabs, or a list of sections down the side."}}},"TabsList":{"part_of":"Tabs"},"TabsTrigger":{"part_of":"Tabs"},"TabsContent":{"part_of":"Tabs"},"TagGroup":{"use_for":["a set of tags, which can be removable"]},"Textarea":{"use_for":["several lines of text"]},"TimeField":{"use_for":["enter a time of day on the 24-hour clock"]},"TimeRange":{"use_for":["pick a UTC time window, with presets"]},"ToastProvider":{"use_for":["the host for Toast notifications, once at the root of the app"]},"Toast":{"use_for":["a brief notification that something happened"],"not_for":[{"need":"an error the user must read or act on","use":"Alert"}]},"Toggle":{"use_for":["switch a setting on or off, taking effect at once"],"not_for":[{"need":"a choice submitted with a form","use":"Checkbox"}],"values":{"size":{"sm":"Dense rows, toolbars and filter bars.","md":"The default, for forms.","lg":"Touch-first screens, or a control that stands alone."}}},"Toolbar":{"use_for":["a bar of actions for a view or a selection"],"values":{"orientation":{"horizontal":"The default.","vertical":"A tool rail beside a canvas or map."}}},"ToolbarSeparator":{"part_of":"Toolbar"},"Tooltip":{"use_for":["a short hint on hover or keyboard focus"],"not_for":[{"need":"anything to click or read at length","use":"Popover"}],"values":{"side":{"top":"Opens above the trigger.","right":"Opens to the right of the trigger.","bottom":"Opens below the trigger.","left":"Opens to the left of the trigger."},"align":{"start":"Lines up with the start edge of the trigger.","center":"Centered on the trigger.","end":"Lines up with the end edge; use for a trigger at the right of a row."}}},"TreeView":{"use_for":["browse a hierarchy: folders, units, asset trees"]},"UploadQueue":{"use_for":["show files as they upload, with progress and recovery"]}}},"exports":["ActionStatus","ActionStatusManifest","Alert","AlertManifest","AppShell","AppShellManifest","AttachmentPreview","AttachmentPreviewManifest","Avatar","AvatarManifest","Badge","BadgeManifest","Breadcrumb","BreadcrumbManifest","BulkActionBar","BulkActionBarManifest","BulkResults","BulkResultsManifest","Button","ButtonGroup","ButtonGroupManifest","ButtonManifest","Calendar","CalendarManifest","Card","CardBody","CardCompositionRules","CardFooter","CardHeader","CardManifest","Chart","ChartManifest","Checkbox","CheckboxManifest","Collapsible","CollapsibleCompositionRules","CollapsibleItem","CollapsibleManifest","CollectionState","CollectionStateManifest","ComboBox","ComboBoxManifest","CommandPalette","CommandPaletteManifest","ConfirmDialog","ConfirmDialogManifest","ContextMenu","ContextMenuManifest","CoordinateInput","CoordinateInputManifest","CopyButton","CopyButtonManifest","DataGrid","DataGridManifest","DataTable","DataTableManifest","DatePicker","DatePickerManifest","DateRangePicker","DateRangePickerManifest","DateTimePicker","DateTimePickerManifest","DescriptionList","DescriptionListManifest","Dialog","DialogManifest","Divider","DividerManifest","DropdownMenu","DropdownMenuCompositionRules","DropdownMenuItem","DropdownMenuLabel","DropdownMenuManifest","DropdownMenuSeparator","EntityPreview","EntityPreviewManifest","EventTimeline","EventTimelineManifest","Field","FieldManifest","FileUpload","FileUploadManifest","FilterBar","FilterBarManifest","FormErrorSummary","FormErrorSummaryManifest","FormSection","FormSectionManifest","InlineEdit","InlineEditManifest","Input","InputManifest","Inspector","InspectorManifest","JobStatus","JobStatusManifest","LayerControl","LayerControlManifest","Link","LinkManifest","MapControls","MapControlsManifest","MapLegend","MapLegendManifest","MapScale","MapScaleManifest","MediaFrame","MediaFrameManifest","MultiSelect","MultiSelectManifest","NumberInput","NumberInputManifest","OperationalStatus","OperationalStatusManifest","PlaybackControls","PlaybackControlsManifest","Popover","PopoverManifest","Progress","ProgressManifest","PropertyFilter","PropertyFilterManifest","Radio","RadioGroup","RadioGroupCompositionRules","RadioGroupManifest","Select","SelectCompositionRules","SelectManifest","SelectOption","Sidebar","SidebarCompositionRules","SidebarFooter","SidebarItem","SidebarLogo","SidebarManifest","SidebarSection","Skeleton","SkeletonManifest","Slider","SliderManifest","Sparkline","SparklineManifest","SplitPane","SplitPaneManifest","StatCard","StatCardManifest","Tabs","TabsCompositionRules","TabsContent","TabsList","TabsManifest","TabsTrigger","TagGroup","TagGroupManifest","Textarea","TextareaManifest","TimeField","TimeFieldManifest","TimeRange","TimeRangeManifest","Toast","ToastCompositionRules","ToastManifest","ToastProvider","Toggle","ToggleManifest","Toolbar","ToolbarCompositionRules","ToolbarManifest","ToolbarSeparator","Tooltip","TooltipManifest","TreeView","TreeViewManifest","UploadQueue","UploadQueueManifest","VERSION","getPropertyFilterTokenError","useFieldContext","useOptionalFieldContext"]}