{ "package": "ionbase-ui", "version": "0.138.1", "generated": "by scripts/build-meta.mjs — do not edit; intent lives in meta/*.json", "hooks": [ "useAgentRun", "useLocale", "useTableColumns", "useTableSelection", "useTableSort", "useToast" ], "helpers": [ "agentRunFrom", "agentRunHasEnded", "agentRunLog", "agentRunReducer", "chartAxisProps", "chartGridProps", "chartSeriesClass", "chartTooltipProps", "initialAgentRunState", "replayAgentRun" ], "components": { "Accordion": { "name": "Accordion", "source": "src/components/Accordion.tsx", "propsType": "AccordionProps", "description": "Accordion — sections that collapse, with the heading structure intact.\n\nWHY THE TRIGGER IS A BUTTON INSIDE A HEADING\n\nBoth parts are load-bearing and the obvious implementations drop one of them.\nThe heading is how a screen-reader user navigates a long page — pressing `h`\nmoves between sections, and an accordion built from `div`s removes every one\nof those stops. The button is what makes the section operable by keyboard and\nannounced as expandable; a heading with a click handler is neither.\n\nSo the shape is `

", "do": "Settings", "why": "a button that navigates breaks middle-click, cmd-click and copy-link, and is announced as a button rather than a link" }, { "dont": "two variant=\"primary-brand\" buttons in the same dialog", "do": "one primary-brand, the rest secondary or tertiary", "why": "two primaries is the same as none — nothing indicates the expected action" }, { "dont": "", "do": "", "why": "an icon-only button with no aria-label is announced as just 'button'" }, { "dont": "}>" }, "variants": { "align": { "end": { "use": "the default — dialog, drawer and form footers" }, "start": { "use": "actions under a left-aligned block of text" }, "center": { "use": "a centred dialog or empty state" } }, "overflow": { "wrap": { "use": "the default — actions that do not fit move to a second line, all still shown" }, "menu": { "use": "a header row that must stay one line: the Buttons that do not fit move into More actions, first Button first; the primary and anything that is not a Button stay" } } }, "slots": { "children": { "accepts": "Button, SplitButton, Link, AgentStop, MenuTrigger", "note": "the actions, primary last. With `overflow=\"menu\"` only Buttons move, and each needs a text label or `aria-label` — it is what the menu item says" }, "start": { "accepts": "Button, text", "note": "pinned to the start edge, apart from the rest — Back in a wizard, a count in a save bar. It never collapses" } }, "a11y": { "requires": [ "the primary last among the children — the order is the reading, Tab and drawn order, and nothing reorders it", "with `overflow=\"menu\"`, a text label or `aria-label` on every Button that may move, and `moreLabel` translated" ], "guarantees": [ "every action is its own tab stop, in the order it is read; no `row-reverse`, so the drawn order never contradicts the Tab order (WCAG 2.4.3)", "8px between actions, and between `start` and the rest", "the order mirrors in a right-to-left locale: the primary is at the start of the line there", "`stack` below 32rem of viewport: one action per line, full width, in reading order, the primary last and nearest the thumb", "`overflow=\"menu\"` keeps the row on one line and inside its box. The Buttons that do not fit move into a MenuTrigger named \"More actions\" at the row's start; hidden ones are out of the Tab order and the accessibility tree", "a menu item presses the real Button, so its `onPress`, its `onClick` and `type=\"submit\"` behave as if it were clicked; a disabled Button is a disabled menu item", "with room again, every action comes back and More goes — also in a parent that sizes to its content, such as PageHeader's actions" ], "notes": [ "a menu item cannot show a Button's variant: a destructive action that must look destructive should not be allowed to overflow — make it the primary, or put it in `start`", "Enter in a form submits the first submit button in the DOM order; with the primary last, give the others `type=\"button\"` (IonBase's Button is `type=\"button\"` unless told otherwise)" ] }, "antiPatterns": [ { "dont": "
", "do": "", "why": "hand-built rows each pick their own gap and none decides what happens on a phone — the demo had 8, 12 and a spacer span" }, { "dont": "flex-direction: row-reverse, to put the primary on the right while it comes first in the markup", "do": "the primary last among the children", "why": "Tab then walks the row backwards from how it is drawn, and a screen reader reads the primary before the options it is chosen over" }, { "dont": " around icon-only Buttons with no `aria-label`", "do": "an `aria-label` on each, which becomes its menu item's text", "why": "a collapsed icon-only Button has nothing to be called in the menu" }, { "dont": "a ButtonGroup of ten actions on one record", "do": ", or a MenuTrigger for the rare ones", "why": "ten tab stops in a row is ten presses to get past it" } ], "stylesheet": "src/styles/button-group.css", "tokens": [ "--spacing-8" ], "props": { "children": { "type": "React.ReactNode", "required": true, "origin": "own", "description": "The actions, least important first and the primary last — the order\nthey are read and tabbed in, and the order they are drawn. Nothing is\nreordered to put the primary on the right." }, "start": { "type": "React.ReactNode", "required": false, "origin": "own", "description": "Actions pinned to the start edge, apart from the rest: Back in a\nwizard, a destructive \"Delete\" in an edit dialog. They never collapse." }, "align": { "type": "ButtonGroupAlign | undefined", "required": false, "origin": "own", "description": "Where the actions sit. Default `end`, the dialog and form convention.", "values": [ "start", "center", "end" ] }, "overflow": { "type": "ButtonGroupOverflow | undefined", "required": false, "origin": "own", "description": "`wrap` (default): actions that do not fit move to a second line.\n`menu`: Buttons that do not fit move into a \"More actions\" menu at the\nstart of the row, the first Button first. The last child — the primary —\nnever moves, and neither does anything that is not a Button; the\nButtons after it still can.", "values": [ "menu", "wrap" ] }, "stack": { "type": "boolean | undefined", "required": false, "origin": "own", "description": "Below 32rem of viewport, every action takes the full width, one per\nline, still in reading order — so the primary is last, nearest the\nthumb. For dialog and form footers." }, "moreLabel": { "type": "string | undefined", "required": false, "origin": "own", "description": "The overflow trigger's name. Default \"More actions\" — pass the translation." } }, "propCounts": { "own": 6, "aria": 0, "dom": 277, "other": 0 } }, "Calendar": { "name": "Calendar", "source": "src/components/Calendar.tsx", "propsType": "CalendarProps", "description": "Calendar — one month in the page, for a day chosen by looking at the month.\n\nDATEPICKER FIRST\n\nA date someone knows — a birthday, an invoice date — is typed faster than\nit is found, and a field takes one row where this takes a month. This is\nfor a day that is chosen by where it falls: a day to resume on, a delivery\nday, and for a place where a popover would be a second layer — a Modal, a\nSidePanel.\n\nNAMED WITH THE MONTH\n\n`label` is the calendar's name, joined by react-aria to the visible month —\n\"Resume on October 2026\" — so moving to another month says where you are.\nEvery day's name is its full date, in the reader's language; today and the\nselected day are said as such.", "import": "import { Calendar } from 'ionbase-ui';", "status": "stable", "summary": "One month in the page for a day chosen by where it falls — a day to resume on, a delivery day — taking and returning a YYYY-MM-DD string.", "useWhen": [ "the day is chosen by looking at the month — which weekday, how far off — not recalled and typed", "the calendar would otherwise be a second layer: inside a Modal or a SidePanel, where a DatePicker's popover opens over a dialog", "the page has room for a month, and the day is the main question on it" ], "useInstead": [ { "when": "a date the person knows — a birthday, an invoice date — or a form with other fields", "use": "DatePicker", "why": "typing a known date is faster than finding it, and a field takes one row where this takes a month" }, { "when": "a start and an end", "use": "DateRangePicker", "why": "this holds one day; a range needs the band between its ends and a check that the end is not before the start" }, { "when": "a moment, with a time of day", "use": "DateTimePicker", "why": "this is fixed to days; a moment's bound such as \"not before now\" needs the time too" }, { "when": "one of a few days the product defines — four delivery slots", "use": "RadioGroup", "why": "a choice from a short list, not a date; a month of which four days work reads as a month of refusals" } ], "composition": { "order": [ "Calendar" ], "note": "`label` names it, joined to the visible month. `value` is YYYY-MM-DD, or null for none yet; `onChange` gets YYYY-MM-DD and never null. Bound it with `minValue` and `maxValue`, and refuse single days with `isDateUnavailable`. With nothing selected it opens on today, or on `minValue` when today is before it, or on `defaultFocusedValue`.", "example": "" }, "a11y": { "requires": [ "a `label`: it is the calendar's name, and the only thing that says what the day is for" ], "guarantees": [ "named by `label` and then the visible month — \"Resume on October 2026\" — so paging months says where you are", "arrow keys move by day and week, Page Up and Page Down by month, Home and End to the week's ends; Enter or Space picks the focused day", "every day is named by its full date in the reader's language, with today and the selected day said as such; a newly picked day is announced", "days before `minValue`, after `maxValue` or refused by `isDateUnavailable` cannot be picked, and the month arrows stop at the bounds", "a value it refuses marks it invalid on its own — `errorMessage`, when given, replaces the description — and the frame turns to the error border", "`description` or the error is the calendar's accessible description", "disabled, it keeps showing the chosen day, on the disabled surface, and no day can be picked or moved to" ], "notes": [ "No clearing: a day is changed by picking another. Offer a separate control when \"no day\" is an answer.", "Always one month; for two months side by side, the range is DateRangePicker's." ] }, "antiPatterns": [ { "dont": "a Calendar for a date of birth or any date the person knows", "do": "", "why": "paging back decades through months is the worst way to enter a date someone can type in a second" }, { "dont": "a DatePicker inside a Modal whose only question is the day", "do": " in the Modal", "why": "the picker's calendar opens a popover over the dialog; the day is the dialog's whole content, so show the month" }, { "dont": "a Calendar without bounds for a day that has them", "do": "minValue and maxValue", "why": "an unbounded month lets someone pick yesterday and learn only on save that it was never possible" } ], "stylesheet": null, "tokens": [], "props": { "label": { "type": "React.ReactNode", "required": true, "origin": "own", "description": "Names the calendar. It has no field and no trigger, so this is the only\nthing that says what the day is for — \"Resume on\", \"Deliver on\"." }, "description": { "type": "React.ReactNode", "required": false, "origin": "own", "description": "Helper text under the month." }, "errorMessage": { "type": "React.ReactNode", "required": false, "origin": "own", "description": "Replaces the helper text while invalid — `isInvalid`, or its own bounds." }, "isInvalid": { "type": "boolean | undefined", "required": false, "origin": "own" }, "isDisabled": { "type": "boolean | undefined", "required": false, "origin": "own" }, "isReadOnly": { "type": "boolean | undefined", "required": false, "origin": "own", "description": "Shows the day and lets it be read and moved through, not changed." }, "value": { "type": "string | null | undefined", "required": false, "origin": "own", "description": "The selected day as `YYYY-MM-DD`; `null` is none yet." }, "defaultValue": { "type": "string | undefined", "required": false, "origin": "own", "description": "The initial day as `YYYY-MM-DD`, for an uncontrolled calendar." }, "onChange": { "type": "((value: IsoDate) => void) | undefined", "required": false, "origin": "own", "description": "Fires with `YYYY-MM-DD`. Never with `null`: a day in a grid is changed\nby picking another, not cleared." }, "minValue": { "type": "string | undefined", "required": false, "origin": "own", "description": "Earliest selectable day, `YYYY-MM-DD`. Earlier months cannot be reached." }, "maxValue": { "type": "string | undefined", "required": false, "origin": "own", "description": "Latest selectable day, `YYYY-MM-DD`." }, "isDateUnavailable": { "type": "((date: IsoDate) => boolean) | undefined", "required": false, "origin": "own", "description": "Single days refused inside the bounds — weekends, holidays, booked days." }, "defaultFocusedValue": { "type": "string | undefined", "required": false, "origin": "own", "description": "The month to open on, and the day focus lands on, while nothing is\nselected. Defaults to today — or `minValue`, when today is before it." }, "name": { "type": "string | undefined", "required": false, "origin": "own", "description": "Posts the value under this name, for an uncontrolled form." }, "id": { "type": "string | undefined", "required": false, "origin": "own" }, "className": { "type": "string | undefined", "required": false, "origin": "own" } }, "propCounts": { "own": 16, "aria": 0, "dom": 0, "other": 0 } }, "Card": { "name": "Card", "source": "src/components/Card.tsx", "propsType": "CardProps", "description": "Card — a bordered surface that groups one part of a page.\n\nPromoted from the demo app, where the same surface was hand-written as\n`.demo-panel` in nine screens: a settings group, a chart panel, a runs log,\nthe danger zone. For a feature row with media use FullCard; for one\nheadline figure use StatTile.\n\nTHE TITLE DECIDES THE ELEMENT\n\nA titled card is a `
` — a named region, so a\nscreen reader user can jump between cards the way a sighted one scans\nthem. An untitled card is a `
`: a `
` with no name is not a\nlandmark at all, and pretending otherwise only adds noise.\n\nNo `'use client'`: `useId` resolves on the server, and nothing here is\ninteractive. Interactive parts arrive through `action` and `children`.", "import": "import { Card } from 'ionbase-ui';", "status": "stable", "since": "0.77.0", "summary": "A bordered surface that groups one part of a page, with an optional title row. A titled card is a named region; an untitled one is a plain surface.", "useWhen": [ "a page is several distinct groups — settings sections, dashboard panels, a log beside a chart", "a group needs a title, a one-line description or a single action like \"All runs\"", "a loading placeholder needs the same frame as the content it stands in for" ], "useInstead": [ { "when": "it is a feature row with a headline, text and a media panel", "use": "FullCard" }, { "when": "it is one headline figure and how it moved", "use": "StatTile" }, { "when": "the content is a list of settings, each with a label and a control", "use": "SettingRow" }, { "when": "the message needs the user's attention now rather than a place on the page", "use": "Alert" } ], "composition": { "note": "The title row is built from props — `title`, `description`, `action` — so every card lays it out the same way. The body is `children`, spaced 12 apart by the card's grid.", "example": "All runs}>…
" }, "variants": { "intent": { "default": { "use": "every card that is not a danger zone" }, "danger": { "use": "a card of irreversible actions — delete the workspace, transfer ownership. The rule turns red; the title must still say what is at stake" } } }, "a11y": { "guarantees": [ "a titled card renders a
named by its heading, so it is a landmark a screen reader can jump to", "an untitled card renders a
, never an unnamed
", "the danger intent is a border colour only, so the meaning stays in the words" ], "requires": [ "the right `headingLevel` for where the card sits in the page outline", "`isRegion={false}` when the card's only content is a landmark named by the same words, such as a Table labelled by the card's title" ], "notes": [ "`headingLevel` takes 2-6 and defaults to 2. It is a number rather than a variant because it is an outline decision, not a visual one: the title looks the same at every level.", "`description` renders only under a `title`. An untitled card has no title row to put it in." ] }, "antiPatterns": [ { "dont": "a heading passed in `children` instead of `title`", "why": "the card does not become a named region, and the title row loses its layout for `description` and `action`" }, { "dont": "several buttons in `action`", "why": "the title row wraps and the card reads as a toolbar; `action` is for one control — put the rest in the body" }, { "dont": "relying on `intent=\"danger\"` alone to warn", "why": "a red border is not read aloud and is easy to miss; the title and the button labels must say what cannot be undone" }, { "dont": "cards nested inside cards", "why": "border inside border reads as a mistake; group the inner content with a heading or a Divider instead" } ], "stylesheet": "src/styles/card.css", "tokens": [ "--border-error-subtle", "--border-subtle", "--border-width-default", "--font-family-sans", "--font-weight-semibold", "--radius-lg", "--spacing-12", "--spacing-16", "--spacing-2", "--spacing-8", "--surface-default", "--text-default", "--text-secondary", "--type-body-sm", "--type-body-sm-line-height", "--type-h6", "--type-h6-line-height" ], "props": { "title": { "type": "React.ReactNode", "required": false, "origin": "own", "description": "The card's heading. With a title the card is a `
` named by it;\nwithout one it is a plain surface — a `
`, for skeletons and for\ncontent that already has its own heading." }, "headingLevel": { "type": "CardHeadingLevel | undefined", "required": false, "origin": "own", "description": "Heading element for the title. Defaults to `h2`: most cards are the\nfirst level of section under the page's `h1`. The outline is the page's\ndecision, so it is a prop, not a constant." }, "description": { "type": "React.ReactNode", "required": false, "origin": "own", "description": "One line under the title — what the card holds or when changes apply." }, "action": { "type": "React.ReactNode", "required": false, "origin": "own", "description": "One control at the end of the title row: a standalone Link (\"All runs\")\nor a small Button. More than one belongs in the body." }, "intent": { "type": "CardIntent | undefined", "required": false, "origin": "own", "description": "`danger` for a card of irreversible actions — the danger zone.", "values": [ "default", "danger" ] }, "isRegion": { "type": "boolean | undefined", "required": false, "origin": "own", "description": "Whether a titled card is a landmark. Defaults to `true`. Set `false`\nwhen the card's only content is itself a landmark named by the same\nwords — a Table's scroll region — or the page gets two regions with one\nname. The heading still renders; only the `
` becomes a `
`." }, "children": { "type": "React.ReactNode", "required": false, "origin": "own" } }, "propCounts": { "own": 7, "aria": 0, "dom": 276, "other": 0 } }, "ChartLegend": { "name": "ChartLegend", "source": "src/components/Chart.tsx", "propsType": "ChartLegendProps", "description": "ChartLegend — which colour is which series.\n\nColour alone never identifies a series (SC 1.4.1), so any chart with more\nthan one series needs this, or direct labels on the lines. The swatch reads\nthe same `--chart-` as the series itself, through `chartSeriesClass`, so\nthe two cannot drift apart.", "import": "import { ChartLegend } from 'ionbase-ui';", "status": "stable", "since": "0.74.0", "summary": "Which colour is which series, for a chart drawn with visx. The swatch reads the same token as the series.", "useWhen": [ "a chart has more than one series", "a single-series chart sits beside others and its colour needs naming" ], "useInstead": [ { "when": "the lines are few and there is room to label each at its end", "use": "direct labels in the SVG, with the series class on the text" }, { "when": "the scale is a magnitude ramp (a heatmap), not categories", "use": "a Less-to-More row of .ion-chart__heat--0…5 cells" } ], "composition": { "note": "Items are listed in the order the series are drawn, with the same series numbers the chart uses. Place it above or below the plot inside the same .ion-chart figure.", "example": "" }, "variants": { "shape": { "square": { "use": "the default — bars, areas and heatmap-like marks" }, "line": { "use": "line charts, so the key looks like the mark it names" } } }, "a11y": { "guarantees": [ "a list, so a screen reader announces how many series there are", "swatches are aria-hidden; every series is named in text" ], "requires": [ "series numbers matching the chart — the legend cannot see the chart" ] }, "antiPatterns": [ { "dont": "a multi-series chart with no legend and no direct labels", "why": "colour becomes the only way to tell series apart, which fails SC 1.4.1 and fails anyone who cannot tell blue from purple" }, { "dont": "listing series in a different order from the chart", "why": "the reader matches legend to chart by position as much as by colour" } ], "stylesheet": "src/styles/chart.css", "tokens": [ "--border-default", "--border-strong", "--border-stronger", "--border-subtle", "--border-width-default", "--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5", "--chart-6", "--chart-7", "--chart-8", "--chart-sequential-1", "--chart-sequential-2", "--chart-sequential-3", "--chart-sequential-4", "--chart-sequential-5", "--font-family-sans", "--font-weight-medium", "--font-weight-semibold", "--ion-chart-series", "--ion-shadow-shadow-lg", "--radius-2xs", "--radius-full", "--radius-md", "--spacing-12", "--spacing-16", "--spacing-4", "--spacing-6", "--spacing-8", "--surface-default", "--surface-raised", "--surface-sunken", "--text-default", "--text-secondary", "--text-tertiary", "--type-body-sm", "--type-body-sm-line-height", "--type-caption", "--type-caption-line-height" ], "props": { "items": { "type": "ChartLegendItem[]", "required": true, "origin": "own", "description": "One per series, in the order the series are drawn." }, "shape": { "type": "ChartLegendShape | undefined", "required": false, "origin": "own", "description": "`square` for bars and areas, `line` for line charts.", "values": [ "square", "line" ] } }, "propCounts": { "own": 2, "aria": 0, "dom": 277, "other": 0 } }, "ChartTooltip": { "name": "ChartTooltip", "source": "src/components/Chart.tsx", "propsType": "ChartTooltipProps", "description": "ChartTooltip — the panel that shows the values under the pointer.\n\nPut it inside visx's Tooltip with `chartTooltipProps`, so visx places it and\nthis draws it: raised, rimmed and shadowed like Popover and Toast.\n\nIT IS NOT THE ACCESSIBLE WAY TO THE DATA. It appears on hover, so a keyboard\nor screen-reader user never sees it. Every chart still needs a text summary\nand the values in a table (visually hidden is fine) — the tooltip is a\nconvenience for pointer users, never the only route to a number.", "import": "import { ChartTooltip } from 'ionbase-ui';", "status": "stable", "since": "0.74.0", "summary": "The panel showing the values under the pointer on a visx chart. visx positions it; this draws it.", "useWhen": [ "a chart drawn with visx shows exact values on hover", "several series share an x value and the reader compares them at a point" ], "useInstead": [ { "when": "it explains a control rather than a data point", "use": "Tooltip" }, { "when": "it holds interactive content", "use": "Popover" }, { "when": "the reader needs every value, or needs them without a pointer", "use": "Table" } ], "composition": { "note": "Render it inside visx's Tooltip, TooltipWithBounds or TooltipInPortal with {...chartTooltipProps}, which turns off visx's own box so this one is the only panel. Axes take {...chartAxisProps} and gridlines {...chartGridProps}; a series takes className={chartSeriesClass(n)} plus ion-chart__line, __area, __bar or __point.", "example": "" }, "a11y": { "guarantees": [ "rows are a
, so each value is announced with its label", "the series swatch is aria-hidden; the label carries the name" ], "requires": [ "a text summary and the values in a table (visually hidden is fine) — the tooltip appears on hover, so keyboard and screen-reader users never reach it", "`value` already formatted — the tooltip cannot know the unit or precision" ] }, "antiPatterns": [ { "dont": "making the tooltip the only way to read a value", "why": "it exists only under a mouse pointer; without a table the data is invisible to keyboard and screen-reader users" }, { "dont": "leaving visx's default tooltip styles on", "why": "it draws a second white box with a hardcoded shadow around this one, and that box does not theme" }, { "dont": "a swatch colour that does not match the series", "why": "pass the same `series` number the line or bar uses — the swatch reads the same token only if it is told the same index" } ], "stylesheet": "src/styles/chart.css", "tokens": [ "--border-default", "--border-strong", "--border-stronger", "--border-subtle", "--border-width-default", "--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5", "--chart-6", "--chart-7", "--chart-8", "--chart-sequential-1", "--chart-sequential-2", "--chart-sequential-3", "--chart-sequential-4", "--chart-sequential-5", "--font-family-sans", "--font-weight-medium", "--font-weight-semibold", "--ion-chart-series", "--ion-shadow-shadow-lg", "--radius-2xs", "--radius-full", "--radius-md", "--spacing-12", "--spacing-16", "--spacing-4", "--spacing-6", "--spacing-8", "--surface-default", "--surface-raised", "--surface-sunken", "--text-default", "--text-secondary", "--text-tertiary", "--type-body-sm", "--type-body-sm-line-height", "--type-caption", "--type-caption-line-height" ], "props": { "title": { "type": "React.ReactNode", "required": false, "origin": "own", "description": "What the pointer is over — usually the x value, e.g. a date." }, "rows": { "type": "ChartTooltipRow[] | undefined", "required": false, "origin": "own", "description": "One row per series at that point." }, "children": { "type": "React.ReactNode", "required": false, "origin": "own", "description": "Free content after the rows, for anything that is not label/value." } }, "propCounts": { "own": 3, "aria": 0, "dom": 276, "other": 0 } }, "ChatMessage": { "name": "ChatMessage", "source": "src/components/ChatMessage.tsx", "propsType": "ChatMessageProps", "description": "ChatMessage — one turn in a transcript: who, when, what, and what can be\ndone with it.\n\nAN ARTICLE, NAMED BY ITS HEADER. Each message is an `
` labelled by\nits author and time, so a screen reader moves message to message and hears\n\"Ada Reyes 10:42\" before each. The avatar is decoration; the name says who.\n\nNOT A LIVE REGION. A thread that announced every message would read a\nstreaming answer out token by token — the reason StreamingText is not one\neither. Say when an answer is ready once, from the thread, the way the\nAssistantAnswer pattern does.\n\nIt holds a message; it does not send, stream or store one.", "import": "import { ChatMessage } from 'ionbase-ui';", "status": "stable", "summary": "One turn in a transcript — who, when, what, and what can be done with it. An article named by its author and time; never a live region.", "useWhen": [ "a conversation with an assistant, shown as a thread of turns", "a transcript people read back — a support chat, a review thread between a person and an agent" ], "useInstead": [ { "when": "the entries are changes to a record — who changed what, when", "use": "Timeline", "why": "that is history, read as an ordered list of events; a transcript is turns people and an assistant took" }, { "when": "an agent is working through steps now", "use": "AgentActivity", "why": "a run has a live status per step; a message holds what was said" }, { "when": "a system message tells the reader something went wrong or changed", "use": "Alert", "why": "an alert has an intent and a title; a message from a \"System\" author reads as a turn nobody took" } ], "composition": { "order": [ "ChatMessage", "StreamingText", "Citation", "CitationList", "Alert" ], "note": "One ChatMessage per turn, in the order they were taken, oldest first. `from=\"person\"` for what a person typed, `from=\"assistant\"` for the reply. The assistant's content is the AssistantAnswer pattern: a StreamingText with Citations, then a CitationList and an Alert when degraded. `actions` follow the content — Copy, Ask again — as Buttons. Say when an answer is ready once, from a status region outside the messages, never from each message.", "example": "} timestamp={askedAt}>What is our refund limit?\n} timestamp={answeredAt} actions={}>…" }, "variants": { "from": { "person": { "use": "what a person wrote — on the trailing side, in a muted bubble at most 80% across" }, "assistant": { "use": "the assistant's reply — spans the column, since answers carry lists, sources and tables" } } }, "slots": { "author": { "accepts": "text", "note": "the author's name, shown and read — the message's name starts with it" }, "avatar": { "accepts": "Avatar, AvatarGradient, LogoMark", "note": "decoration, hidden from assistive tech; the name says who" }, "children": { "accepts": "text, StreamingText, Citation, CitationList, Alert, Link", "note": "the message" }, "actions": { "accepts": "Button, CopyButton", "note": "after the content, in reading order" } }, "a11y": { "role": "article", "guarantees": [ "each message is an `
` named by its header — the author, then the time — so a screen reader moves message to message and hears who and when first", "the time is a `