@hackcove/ui-react 0.10.1 → 0.10.2

package/README.md

@@ -72,6 +72,7 @@ takes the size of the text around it. Upgrading: `MIGRATING.md`, shipped in the
 - Data: `StatTile` (one headline figure: an uppercase `label` over a large tabular `value`, already formatted, an optional `hint` under it; `tone` is `neutral` (default), `positive` or `negative`, and `accent` adds a bar across the top in the same tone), `ProgressBar` (a thin bar with a filled share of `max` (default 100); `label` names it for a screen reader, which also hears the percentage; `tone` is `accent` (default), `positive`, `warn` or `negative`), `SplitBar` (a bar split between `a` and `b` by their shares; `names` says whose is whose to a screen reader; `toneA` (default `negative`) and `toneB` (default `positive`)), `StackedBar` (any number of `segments`, each `{ label, value, tone }`, sized by its share of the sum; `legend` draws a `Legend` under it) and `Legend` (a swatch, a `label` and an optional `detail` per item, the key to a chart's or a row stripe's colours). The three bars take `size`: `sm` 6px, `md` 8px (default), `lg` 12px.
 - Status pages: `NotFound` (404), `ErrorPage` (500 or any failure; `detail` is error text shown in a `CodeBlock`, never a stack trace, and `onRetry` adds "Try again"), `Offline` (`onRetry` too), `Maintenance` and `Forbidden` (403). Each is a whole page with default copy: `title` and `children` replace the heading and the body, `action` is the primary action, and `homeHref`, or `renderHome` for the app's own router `<Link>`, adds a "Back to home" button. With neither there is no home link.
 - Layout (see Layout): `AppShell`, `AppShellBrand`, `appShellRootClassFor`, `Container`, `PageHeader`, `Stack`, `Section`, `Cluster`, `ClusterGrow`, `SideColumn`, and the page layouts `ListLayout`, `DetailLayout`, `FormLayout`, `ProseLayout`, `CardGrid`, `SidebarLayout`, `FullBleedLayout`, `CenteredLayout`.
+- `Prose` (a `div` for long-form content, a docs page or an article, never an app screen: it sets text-base/7 and puts `Text`, `SectionHeading`, `SubsectionHeading` and the `Callout` text on the long-form scale inside it, body 16, h4 16 semibold, h3 20 and h2 24; every other role keeps its size, and a `Dialog`, `Drawer` or `EmptyState` inside it keeps the app sizes; it takes no `className`, `style` or size prop).
 - Typography roles (each pins size + weight, takes a `color` and an `as`): `Display`, `Lead`,
   `PageHeading`, `SectionHeading`, `SubsectionHeading`, `Overline`, `Text`, `Caption`. Opt-in props, none changing today's look: `SectionHeading rule`
   (a hairline under it, with its spacing), `SubsectionHeading size` (`sm`, `md` default, `lg`) and `truncate` (one line with an ellipsis),
@@ -80,7 +81,7 @@ takes the size of the text around it. Upgrading: `MIGRATING.md`, shipped in the
   text colours as a `TableCell` tone, winning over `color`; pair the colour with a word, as in "Saved."),
   `numeric` (tabular figures), `mono` (the monospace face) and `truncate` (one line, cut with an
   ellipsis, the full text in a `title`, so its content is text).
-- Controls: `Button` (`variant` is `primary` (default), `outline`, `ghost`, `link` or `dashed`, the link having no box: text with an underline on hover, for an in-line action, and the dashed one a dashed outline in muted text that fills its container, like `Card dashed`, for an "add another" row, with a leading icon as a child, ignoring `tone`; `size="sm"` is compact, `text-xs`, for table rows and toolbars, `size="lg"` is `text-base` with more padding; `tone="danger"` is red, for delete and clear, and `tone="positive"` green, for accept and approve; `disabledReason` disables it, greys it flat and makes the reason its `title`; `busy` disables it with `aria-busy` and keeps its colour, showing `busyLabel` in place of the children; `pressed` makes it a toggle with `aria-pressed`, on `outline` and `ghost` neutral when off and filled in the tone's primary colour when on, so an `outline` `size="sm"` Button with `pressed` is a filter chip; `count` puts a small number chip after the label, part of the button's name ("Splits, 3"), and a button that opens something also takes `aria-expanded`; with `href`, or `render` to draw the app's own router `<Link>`, it is a link with the same look, `external` opening a new tab), `ButtonGroup` (a wrapping row of buttons; `end` is one item pushed to the far side, `label` makes it a named `role="group"`), `IconButton` (a square button holding one icon; `label` is required and becomes its `aria-label` and `title`; `variant` is `outline` (default) or `ghost`, `tone` is `default` or `danger`, `size` matches a `Button`'s height; `badge` puts a red count on its corner, not shown at 0; with `href` or `render` it is a link, `external` opening a new tab), `Icon` (one bare `<svg>` sized to fill a box, or `name` for one of the set's own icons (`diff`, `baseline`, `review`, `ci`, `self-host`, `privacy`, `capture`, `branch`, `theme`, `speed`, `search`, `chevron-right`, `chevron-down`, `close`, `external-link`, `settings`, `bell`, `check`, `plus`: feature ideas and UI glyphs on one 24 grid, a 1.5 stroke, round caps and joins, each the idea or action, not a product): `size` `sm` 14px, `md` 16px (default), `lg` 20px or `feature` 32px; `tone` is a text tone or `inherit` (default, the text colour around it); `aria-hidden` unless `label` names it as `role="img"`), `ColourSchemeToggle` (a light/dark switch on `<html>`; `id`, `data-*` and other button props go on the button, `store={false}` skips `localStorage`; see Light and dark), `Input` (a text input; `icon` adds a leading icon inside the field; `prefix` is short text inside the border before the value, a currency symbol, on a plain field only; `type="search"` drops the browser's search look and shows a "Clear search" button while the field has a value), `Textarea` (a multi-line text input, `rows` defaults to 3), `Select` (a native `<select>` in the control look; takes `<option>` children and keeps the browser's arrow). `Input`, `Select` and `Textarea` take `size` (`md` default, `sm`: `text-xs`, less padding, for dense forms and table rows, or `lg`: `text-base`, more padding) and `width` (`full` default, the fixed `xs` 5rem, `sm` 7rem, `md` 9rem, `lg` 12rem, `fill`: grows to the room left in a flex row and can shrink to nothing, so the buttons beside it stay on the line, or `auto`: no width class, as wide as the browser makes it); a fixed width replaces `w-full`, so there is no class to collide with. `Input` also takes `align` (`start` default, or `end` to right-align a numeric value). `size` replaces the native `size` attribute, so a multi-row `<select size={4}>` is not reachable through `Select`. `Checkbox` (a native checkbox with its label; other props go on the input; `size="sm"` is `text-xs` with a smaller box and `size="lg"` `text-base` with a larger one, `align="start"` puts the box on the first line of a label that wraps, where the default `center` centres it on all of them, and with no `label` it is a bare box for a table cell, named by `aria-label`; `description` is a muted line under the label, the box's `aria-describedby`). `Switch` (an on/off setting that acts at once, usually by saving to a server: a native `<button role="switch" aria-checked>`, controlled only, with `checked` and `onChange(next)`; give it a `label` (the whole label is the click target) or, with none, an `aria-label`: one is required; `description` is a muted line under the label and its `aria-describedby`; `size` is `sm`, `md` (default) or `lg`; `busy` is the save in flight: `aria-busy`, a click or key does nothing, it keeps its colour and its focus; `disabled` is the native one, washed out; a value sent with a form stays a `Checkbox`). `RadioGroup` and `Radio` (one choice from a few options: the group has a `label`, `value`/`onChange` or `defaultValue`, `name`, `isDisabled`, `isRequired`, `size` (`sm`, `md` default, `lg`, as `Checkbox`) and an `error` shown like `Field`'s with `role="alert"`; each `Radio` has a `value`, a `label`, an optional `description` and `isDisabled`; one tab stop, the arrow keys move and choose). `Disclosure` (a summary button with a chevron and `aria-expanded` over a body that opens and closes; `summary`, `children`, `defaultOpen`; it keeps its own state and replaces `<details>`). `FileDrop` (a dashed drop zone, a `<label>` around a file input that covers it, so a click opens the dialog and a dropped file lands on the input; `children` is the prompt, `accept`, `multiple`, `name`, `disabled` and `onChange` on the input). `CopyButton` (a small text button that writes `text` to the clipboard and swaps `label` ("copy") for `copiedLabel` ("copied"); every other button prop, `disabled` included, goes on the `<button>`). `CopyLine` (one line of mono text in a box with a `CopyButton` beside it; `disabled` disables the button; other props go on the root `<div>`). `Field` (a label above a control, `htmlFor` names the control's id; `hideLabel` keeps the label for assistive tech and draws no text, for a control whose purpose is plain from what surrounds it, and makes `layout="row"` a column; a `hint` sits under it, and an `error` replaces the hint with a `role="alert"` line; `span="full"` runs it across both columns of a `FormGrid`). `FormGrid` (two columns of `Field`s from `md`, one below it), `FormRow` (an inline-edit row: `FormRowField`s side by side, an `action` after them, and one `hint` or `error` under the whole row; see Layout) and `FormRowField` (a compact label over one control, `span` 1 to 4). `Callout` (a tinted notice box; `tone` is `neutral`, `info` (default), `positive`, `warn` or `danger`; an optional `title` sits in bold above the body; `actions` puts a button or link at the end of the row; `banner` makes it a flat strip, bottom border only and no radius, for the top of a `Card flush`). `ListRow` (a full-width row that is a `<button>`, or a link with `href` or `render`, with a hover fill, a left-aligned label and `trailing` content; `divided` draws a hairline above the row, to separate rows in a `Card flush`; `expanded` makes it the header of a collapsible section: `aria-expanded` and a chevron, the caller owning the state and the section; `leading` is content before the label (an `Avatar`), and `leadingWidth="thumbnail"` gives it a fixed width so rows with and without a picture line up; `size` sets the padding (`sm` dense, `md` default, `lg`); `focused` draws the focus ring on the row the keyboard cursor is on, for a list moved with the arrow keys while focus stays on the list; `selected` marks the row in view with a violet fill and `aria-current="true"`; a link row (`href` or `render`) can hold its own link, button or control in `trailing`, which sits above the row's link and takes its own click; `static` makes it a plain `<div>`, for a row that holds its own buttons where the row would otherwise be a `<button>`, and adds `actions`, buttons after `trailing`, and `revealOnHover`, which shows them only on hover or focus inside the row and always on a touch screen; a compact bordered list is `Card flush` around `static` rows at `size="sm"`, `divided` after the first (no separate part); `active` marks the row the pointer or the keyboard is on, with the hover fill and the `revealOnHover` actions shown, for a list that follows both through the row's `onPointerEnter`, `onPointerLeave` and `onFocus`, which every row passes through). `Tabs` (underline tabs for switching a view in place: a row over a bottom rule, the current tab underlined in the accent; `items` are `{ value, label }` buttons, with `value` the current one's `value` and `onChange(value)` the caller's state, one tab stop and the arrow keys, Home and End moving between enabled tabs, or `{ label, href | render, active?, external? }` links in a `<nav>` with `aria-current="page"` on the current one (`active`, or the item whose `value` is `value`); `label` names the group; a button tab takes `disabled` and `controls`, the id of its `role="tabpanel"`, which is the caller's; `variant="pill"` fills the current tab, with no rule, for `PageHeader`'s `tabs` slot, an `AppShell` `nav` or a rail; only a pill row takes `size` and `orientation`, and `orientation="vertical"` stacks it in one column, the content of a `SidebarLayout` rail; `disabled` on the row disables every tab, e.g. until hydration). `SegmentedControl` (a joined pill group, one option filled; the same `items`, `value`, `onChange`, `disabled` and `label` as `Tabs`, as a `radiogroup` with `aria-checked` on each `radio`). On both an item takes `data-*` attributes (typed `data-${string}`) onto its button or link; on `Tabs` and `SegmentedControl` an item takes `count` (a small muted number after the label, part of its name: "Shots 12") and `title`; a `disabled` button option stays in the page as `aria-disabled`, so its `title` is still the hover tooltip and is announced as the reason, it is out of the tab order and the arrow keys, Home and End skip it. `Dialog` (a modal on the browser's `<dialog>`, opened on mount, so render it only while open: `title` is its name, `description` a line under it, `footer` the right-aligned actions; Esc, the backdrop or a `<form method="dialog">` call `onClose`; `size` is `sm` (320px, a list), `md` (440px, default, a form), `lg` (640px, a wider form or a table) or `full` (the whole screen, for media or a player: the body fills the height between the title and the footer and scrolls if taller; there is no backdrop to click, so put a close button on a `<form method="dialog">` in the `footer`)). `FieldDialog` (a `Dialog` with one text field and Cancel and submit buttons, every string passed in: `title`, `description`, `label`, `inputLabel`, `placeholder`, `hint`, `emptyReason`, `submit` and `busyLabel`; `onSubmit` gets the trimmed value and a resolved promise closes it, a rejection shows its message). `Drawer` (a modal slide-over on the right edge, on a native `<dialog>` opened on mount like `Dialog`, so render it only while open: `title` is its name, a close button sits beside it, `children` scroll between the header and an optional pinned `footer`; Esc, the scrim and the close button call `onClose`; `size` is `sm`, `md` (default) or `lg`; `closeLabel` names the close button). `Breadcrumbs` (a `<nav aria-label="Breadcrumb">` over an ordered list; `crumbs` are nodes, or `{ label, href | render, external? }` for one that links; the last is the current page and is never a link and gets `aria-current="page"`, and each crumb truncates). `Table` (a list of records in a rounded, bordered card around a full-width `<table>` that scrolls sideways on a narrow screen; `caption` names it for assistive tech and is not drawn; compose it from `TableHead`, `TableBody`, `TableFoot`, `TableRow`, `TableHeaderCell` (`align` `start`, `center` or `end`; `srLabel` is a visually hidden column name, in place of children, for a column of row actions: "Actions") and `TableCell` (`align`, `indent` of 1 to 3 to set a start-aligned cell in, for a line under a parent row, `tone` `default`, `strong` or `muted`, or the Callout tones `neutral`, `info`, `positive`, `warn` or `danger` for an amount that means something, in the tone's text colour and with no fill, so pair the colour with a sign or a word; `numeric` for tabular figures, `mono` for a small mono face, `truncate` to cap a long value's width, cut it with an ellipsis and put the full text in a `title`, so its content is text (strings and numbers); `secondary` for a second, muted line under the content; `colSpan` passes through, so a `TableCell` with `colSpan` in a row of its own is a full-width panel, an empty state or a note, centred with `align="center"`); `TableEditCell` (a `TableCell` whose value opens an editor in place: `children` is the value, drawn as a button; a click, Enter or Space swaps it for `renderEditor(close)`, a plain control in the cell and not a popover of its own, and moves the focus into it; `close` and Esc put the focus back on the value, and a press outside or Tab out of it closes it too, so the control saves on its own change or submit; `label` names the button and the editor; it takes the `TableCell` props except `truncate`); `InlineEdit` (the same edit trigger without the cell, for a `TableCell` that holds other content too: `label`, `renderEditor(close)` and `children`, with the same keyboard and focus behaviour); `TableFoot` (the `<tfoot>` for totals: its cells are strong by default and each row has a firmer line above it, in a card and in a `plain` table alike); `TableGroupRow` (a full-width group header in the body: `label` spans `colSpan` columns, the table's column count, which is required; optional `trailing` content sits at the far end, and the group's rows follow it); `tone` on a `TableRow` in the body marks the row with a stripe on its leading edge over a soft fill: `neutral`, `info`, `positive`, `warn` or `danger`, as `Callout`, or `muted`, which only fades the row (a transfer, a row that is not the point); a bold subtotal is not a tone: `emphasis` on a `TableRow` in the body gives it a `TableFoot` row's look among the other rows; `stripe` (a text tone) draws the leading stripe alone, with no fill; a row takes one of `tone`, `stripe` and `emphasis`; `variant="plain"` on `Table` drops the card border, fill and shadow, the head strip and the row hover and keeps the row dividers, for a table inside a card of its own; every table element passes `id`, `data-*` and `aria-*` through, and none takes a `className` or `style`). `Timeline` (a named `<ol>` of events; `label` is its `aria-label`, `empty` is drawn instead when there are no items) with `TimelineItem` (a `title`, an already-formatted `time`, the `children` as a note, and `tone`, a Callout tone for the marker dot, `neutral` by default). `KeyValueList` (a `<dl>` of label/value rows; each `KeyValue` takes a `label` and its value as children, the value right-aligned in tabular figures; `total` makes it the sum row, a firm rule above and strong text, and `tone` (`muted`, `positive`, `warn`, `danger`, `info`) colours the value on any row, so `total tone="warn"` is a total that does not reconcile; `align="start"` puts the values left-aligned in one column beside the labels instead, using CSS subgrid: in Chrome before 117 a row stacks its label over its value). `Avatar` (a round badge of the initials of `name`, titled with the name and `aria-hidden`; with `src` (the app's own local image path, never a remote one) it is a round, cropped `<img alt={name}>` instead, and if that image fails to load it shows the initials; `size` is `xs` (16px, for an inline mention), `sm`, `md` (default), `lg`, `xl` (56px), `2xl` (64px) or `3xl` (96px); `onClick` makes it one button named by `name`; `ring` adds a page-colour border and a negative margin for an overlapping stack; the colour is one of seven stock background classes picked by a hash of the name, remapped by each theme, and `avatarColourClass(name)` returns it to colour something else the same way; `initialsOf(name)` is the two letters). `TextLink` (an inline text link in the accent colour; `href` is required unless `render` draws the app's own router `<Link>`, `external` adds `target="_blank"` and `rel="noreferrer"`, `stretch` covers the nearest `relative` ancestor so a whole row or card is the click target, `size` (`sm`, `md` or `lg`) pins the type size where it would otherwise follow the text around it, `mono` sets the monospace face, `tone` (`warn`, `danger`, `positive`, `info` or `muted`) gives it a meaning's colour in place of the accent, every other anchor prop passes through). `MetaList` (a wrapping row of facts or links in muted small text, joined by an `aria-hidden` `separator`: `·` (default), `•` or `none`; branch · SHA · date, or a footer's Privacy · Terms; an item is text, a `Code` or a `TextLink`; `nowrap` keeps each item on one line, for links; `mono` sets the row in the monospace face, for ids and paths). `PageFade` (the page's content area, named for the View Transitions API so a route change cross-fades it while the frame around it stays put; wrap what changes between pages, once per page, or give each a `name` (a CSS identifier) when there are two; it fades when the navigation runs in a view transition, through `startPageTransition(update)` (flushes a synchronous state change inside `document.startViewTransition`) or a router's own option such as TanStack Router `viewTransition`, and otherwise, in a browser without View Transitions, or under `prefers-reduced-motion: reduce`, it swaps with no fade; it renders a small `<style>`, with no colour in it, and the div is a stacking context, so portal an overlay that must rise above the frame). `EmptyState` (what a page or list shows when it has nothing yet: a centred `title`, the `children` as the explanation under it, and `actions` in a centred row; a named `<section>`; `level` is the title's heading level, 2 (default) to 6, and does not change its look; for one muted line inside a card, `Text as="p" color="muted"`). `Steps` (a numbered `<ol>` of `Step`s, each a `title` and the `children` as a detail line, the numbers counted by CSS in a violet disc; for a "get started" list, not for progress). `Divider` (a hairline `<hr>` in the theme's line colour; spacing comes from the layout around it). `BulletList` (a `<ul>` with discs, an indent and a small gap; children are `<li>`s). `Code` (inline code: mono, on a subtle background). `CodeBlock` (a block of code, no client JS: the text is `children` (a string) or `lines` (one entry per line), `language` (`bash`, `css`, `tsx`, `ts` or `json`) colours it and `text`, the default, leaves it in one colour; `label` is a caption naming the language or file; long lines wrap by default, so nothing is cut off and a command copies as one line, and `overflow="scroll"` keeps lines whole and scrolls them under a thin scrollbar in the theme's muted ink; `copy` adds a copy button beside the code, which copies it exactly as given and needs the page hydrated; other props go on the root `<figure>`). `CodeExample` (one framed example: the rendered `children` over the `code` that makes them, coloured as TSX, in one bordered box, with an optional `caption` as its last band; a wide preview or long code scrolls inside the frame under the same thin scrollbar; `copy` adds a button that copies the code; no client JS without `copy`). `Video` (a full-width, rounded `<video>` with controls that loads metadata only; `src` is required, `poster` and a WebVTT `captions` track are optional, children are the fallback). `Kbd` (a keyboard key in mono; its border takes the surrounding text colour, so it reads on a filled button too). `FilterGroup` (a `<fieldset>` with a small uppercase `legend` over a wrapped row of its children, e.g. `outline` `sm` `Button`s with `pressed`). `DateField` (see Dates).
+- Controls: `Button` (`variant` is `primary` (default), `outline`, `ghost`, `link` or `dashed`, the link having no box: text with an underline on hover, for an in-line action, and the dashed one a dashed outline in muted text that fills its container, like `Card dashed`, for an "add another" row, with a leading icon as a child, ignoring `tone`; `size="sm"` is compact, `text-xs`, for table rows and toolbars, `size="lg"` is `text-base` with more padding; `tone="danger"` is red, for delete and clear, and `tone="positive"` green, for accept and approve; `disabledReason` disables it, greys it flat and makes the reason its `title`; `busy` disables it with `aria-busy` and keeps its colour, showing `busyLabel` in place of the children; `pressed` makes it a toggle with `aria-pressed`, on `outline` and `ghost` neutral when off and filled in the tone's primary colour when on, so an `outline` `size="sm"` Button with `pressed` is a filter chip; `count` puts a small number chip after the label, part of the button's name ("Splits, 3"), and a button that opens something also takes `aria-expanded`; with `href`, or `render` to draw the app's own router `<Link>`, it is a link with the same look, `external` opening a new tab), `ButtonGroup` (a wrapping row of buttons; `end` is one item pushed to the far side, `label` makes it a named `role="group"`), `IconButton` (a square button holding one icon; `label` is required and becomes its `aria-label` and `title`; `variant` is `outline` (default) or `ghost`, `tone` is `default` or `danger`, `size` matches a `Button`'s height; `badge` puts a red count on its corner, not shown at 0; with `href` or `render` it is a link, `external` opening a new tab), `Icon` (one bare `<svg>` sized to fill a box, or `name` for one of the set's own icons (`diff`, `baseline`, `review`, `ci`, `self-host`, `privacy`, `capture`, `branch`, `theme`, `speed`, `search`, `chevron-right`, `chevron-down`, `close`, `external-link`, `settings`, `bell`, `check`, `plus`: feature ideas and UI glyphs on one 24 grid, a 1.5 stroke, round caps and joins, each the idea or action, not a product): `size` `sm` 14px, `md` 16px (default), `lg` 20px or `feature` 32px; `tone` is a text tone or `inherit` (default, the text colour around it); `aria-hidden` unless `label` names it as `role="img"`), `ColourSchemeToggle` (a light/dark switch on `<html>`; `id`, `data-*` and other button props go on the button, `store={false}` skips `localStorage`; see Light and dark), `Input` (a text input; `icon` adds a leading icon inside the field; `prefix` is short text inside the border before the value, a currency symbol, on a plain field only; `type="search"` drops the browser's search look and shows a "Clear search" button while the field has a value), `Textarea` (a multi-line text input, `rows` defaults to 3), `Select` (a native `<select>` in the control look; takes `<option>` children and keeps the browser's arrow). `Input`, `Select` and `Textarea` take `size` (`md` default, `sm`: `text-xs`, less padding, for dense forms and table rows, or `lg`: `text-base`, more padding) and `width` (`full` default, the fixed `xs` 5rem, `sm` 7rem, `md` 9rem, `lg` 12rem, `fill`: grows to the room left in a flex row and can shrink to nothing, so the buttons beside it stay on the line, or `auto`: no width class, as wide as the browser makes it); a fixed width replaces `w-full`, so there is no class to collide with. `Input` also takes `align` (`start` default, or `end` to right-align a numeric value). `size` replaces the native `size` attribute, so a multi-row `<select size={4}>` is not reachable through `Select`. `Checkbox` (a native checkbox with its label; other props go on the input; `size="sm"` is `text-xs` with a smaller box and `size="lg"` `text-base` with a larger one, `align="start"` puts the box on the first line of a label that wraps, where the default `center` centres it on all of them, and with no `label` it is a bare box for a table cell, named by `aria-label`; `description` is a muted line under the label, the box's `aria-describedby`). `Switch` (an on/off setting that acts at once, usually by saving to a server: a native `<button role="switch" aria-checked>`, controlled only, with `checked` and `onChange(next)`; give it a `label` (the whole label is the click target) or, with none, an `aria-label`: one is required; `description` is a muted line under the label and its `aria-describedby`; `size` is `sm`, `md` (default) or `lg`; `busy` is the save in flight: `aria-busy`, a click or key does nothing, it keeps its colour and its focus; `disabled` is the native one, washed out; a value sent with a form stays a `Checkbox`). `RadioGroup` and `Radio` (one choice from a few options: the group has a `label`, `value`/`onChange` or `defaultValue`, `name`, `isDisabled`, `isRequired`, `size` (`sm`, `md` default, `lg`, as `Checkbox`) and an `error` shown like `Field`'s with `role="alert"`; each `Radio` has a `value`, a `label`, an optional `description` and `isDisabled`; one tab stop, the arrow keys move and choose). `Disclosure` (a summary button with a chevron and `aria-expanded` over a body that opens and closes; `summary`, `children`, `defaultOpen`; it keeps its own state and replaces `<details>`). `FileDrop` (a dashed drop zone, a `<label>` around a file input that covers it, so a click opens the dialog and a dropped file lands on the input; `children` is the prompt, `accept`, `multiple`, `name`, `disabled` and `onChange` on the input). `CopyButton` (a small text button that writes `text` to the clipboard and swaps `label` ("copy") for `copiedLabel` ("copied"); every other button prop, `disabled` included, goes on the `<button>`). `CopyLine` (one line of mono text in a box with a `CopyButton` beside it; `disabled` disables the button; other props go on the root `<div>`). `Field` (a label above a control, `htmlFor` names the control's id; `hideLabel` keeps the label for assistive tech and draws no text, for a control whose purpose is plain from what surrounds it, and makes `layout="row"` a column; a `hint` sits under it, and an `error` replaces the hint with a `role="alert"` line; `span="full"` runs it across both columns of a `FormGrid`). `FormGrid` (two columns of `Field`s from `md`, one below it), `FormRow` (an inline-edit row: `FormRowField`s side by side, an `action` after them, and one `hint` or `error` under the whole row; see Layout) and `FormRowField` (a compact label over one control, `span` 1 to 4). `Callout` (a tinted notice box; `tone` is `neutral`, `info` (default), `positive`, `warn` or `danger`; an optional `title` sits in bold above the body; `actions` puts a button or link at the end of the row; `banner` makes it a flat strip, bottom border only and no radius, for the top of a `Card flush`). `ListRow` (a full-width row that is a `<button>`, or a link with `href` or `render`, with a hover fill, a left-aligned label and `trailing` content; `divided` draws a hairline above the row, to separate rows in a `Card flush`; `expanded` makes it the header of a collapsible section: `aria-expanded` and a chevron, the caller owning the state and the section; `leading` is content before the label (an `Avatar`), and `leadingWidth="thumbnail"` gives it a fixed width so rows with and without a picture line up; `size` sets the padding (`sm` dense, `md` default, `lg`); `focused` draws the focus ring on the row the keyboard cursor is on, for a list moved with the arrow keys while focus stays on the list; `selected` marks the row in view with a violet fill and `aria-current="true"`; a link row (`href` or `render`) can hold its own link, button or control in `trailing`, which sits above the row's link and takes its own click; `static` makes it a plain `<div>`, for a row that holds its own buttons where the row would otherwise be a `<button>`, and adds `actions`, buttons after `trailing`, and `revealOnHover`, which shows them only on hover or focus inside the row and always on a touch screen; a compact bordered list is `Card flush` around `static` rows at `size="sm"`, `divided` after the first (no separate part); `active` marks the row the pointer or the keyboard is on, with the hover fill and the `revealOnHover` actions shown, for a list that follows both through the row's `onPointerEnter`, `onPointerLeave` and `onFocus`, which every row passes through). `Tabs` (underline tabs for switching a view in place: a row over a bottom rule, the current tab underlined in the accent; `items` are `{ value, label }` buttons, with `value` the current one's `value` and `onChange(value)` the caller's state, one tab stop and the arrow keys, Home and End moving between enabled tabs, or `{ label, href | render, active?, external? }` links in a `<nav>` with `aria-current="page"` on the current one (`active`, or the item whose `value` is `value`); `label` names the group; a button tab takes `disabled` and `controls`, the id of its `role="tabpanel"`, which is the caller's; `variant="pill"` fills the current tab, with no rule, for `PageHeader`'s `tabs` slot, an `AppShell` `nav` or a rail; only a pill row takes `size` and `orientation`, and `orientation="vertical"` stacks it in one column, the content of a `SidebarLayout` rail; `disabled` on the row disables every tab, e.g. until hydration). `SegmentedControl` (a joined pill group, one option filled; the same `items`, `value`, `onChange`, `disabled` and `label` as `Tabs`, as a `radiogroup` with `aria-checked` on each `radio`). On both an item takes `data-*` attributes (typed `data-${string}`) onto its button or link; on `Tabs` and `SegmentedControl` an item takes `count` (a small muted number after the label, part of its name: "Shots 12") and `title`; a `disabled` button option stays in the page as `aria-disabled`, so its `title` is still the hover tooltip and is announced as the reason, it is out of the tab order and the arrow keys, Home and End skip it. `Dialog` (a modal on the browser's `<dialog>`, opened on mount, so render it only while open: `title` is its name, `description` a line under it, `footer` the right-aligned actions; Esc, the backdrop or a `<form method="dialog">` call `onClose`; `size` is `sm` (320px, a list), `md` (440px, default, a form), `lg` (640px, a wider form or a table) or `full` (the whole screen, for media or a player: the body fills the height between the title and the footer and scrolls if taller; there is no backdrop to click, so put a close button on a `<form method="dialog">` in the `footer`)). `FieldDialog` (a `Dialog` with one text field and Cancel and submit buttons, every string passed in: `title`, `description`, `label`, `inputLabel`, `placeholder`, `hint`, `emptyReason`, `submit` and `busyLabel`; `onSubmit` gets the trimmed value and a resolved promise closes it, a rejection shows its message). `Drawer` (a modal slide-over on the right edge, on a native `<dialog>` opened on mount like `Dialog`, so render it only while open: `title` is its name, a close button sits beside it, `children` scroll between the header and an optional pinned `footer`; Esc, the scrim and the close button call `onClose`; `size` is `sm`, `md` (default) or `lg`; `closeLabel` names the close button). `Breadcrumbs` (a `<nav aria-label="Breadcrumb">` over an ordered list; `crumbs` are nodes, or `{ label, href | render, external? }` for one that links; the last is the current page and is never a link and gets `aria-current="page"`, and each crumb truncates). `Table` (a list of records in a rounded, bordered card around a full-width `<table>` that scrolls sideways on a narrow screen; `caption` names it for assistive tech and is not drawn; compose it from `TableHead`, `TableBody`, `TableFoot`, `TableRow`, `TableHeaderCell` (`align` `start`, `center` or `end`; `srLabel` is a visually hidden column name, in place of children, for a column of row actions: "Actions") and `TableCell` (`align`, `indent` of 1 to 3 to set a start-aligned cell in, for a line under a parent row, `tone` `default`, `strong` or `muted`, or the Callout tones `neutral`, `info`, `positive`, `warn` or `danger` for an amount that means something, in the tone's text colour and with no fill, so pair the colour with a sign or a word; `numeric` for tabular figures, `mono` for a small mono face, `truncate` to cap a long value's width, cut it with an ellipsis and put the full text in a `title`, so its content is text (strings and numbers); `secondary` for a second, muted line under the content; `colSpan` passes through, so a `TableCell` with `colSpan` in a row of its own is a full-width panel, an empty state or a note, centred with `align="center"`); `TableEditCell` (a `TableCell` whose value opens an editor in place: `children` is the value, drawn as a button; a click, Enter or Space swaps it for `renderEditor(close)`, a plain control in the cell and not a popover of its own, and moves the focus into it; `close` and Esc put the focus back on the value, and a press outside or Tab out of it closes it too, so the control saves on its own change or submit; `label` names the button and the editor; it takes the `TableCell` props except `truncate`); `InlineEdit` (the same edit trigger without the cell, for a `TableCell` that holds other content too: `label`, `renderEditor(close)` and `children`, with the same keyboard and focus behaviour); `TableFoot` (the `<tfoot>` for totals: its cells are strong by default and each row has a firmer line above it, in a card and in a `plain` table alike); `TableGroupRow` (a full-width group header in the body: `label` spans `colSpan` columns, the table's column count, which is required; optional `trailing` content sits at the far end, and the group's rows follow it); `tone` on a `TableRow` in the body marks the row with a stripe on its leading edge over a soft fill: `neutral`, `info`, `positive`, `warn` or `danger`, as `Callout`, or `muted`, which only fades the row (a transfer, a row that is not the point); a bold subtotal is not a tone: `emphasis` on a `TableRow` in the body gives it a `TableFoot` row's look among the other rows; `stripe` (a text tone) draws the leading stripe alone, with no fill; a row takes one of `tone`, `stripe` and `emphasis`; `variant="plain"` on `Table` drops the card border, fill and shadow, the head strip and the row hover and keeps the row dividers, for a table inside a card of its own; every table element passes `id`, `data-*` and `aria-*` through, and none takes a `className` or `style`). `Timeline` (a named `<ol>` of events; `label` is its `aria-label`, `empty` is drawn instead when there are no items) with `TimelineItem` (a `title`, an already-formatted `time`, the `children` as a note, and `tone`, a Callout tone for the marker dot, `neutral` by default). `KeyValueList` (a `<dl>` of label/value rows; each `KeyValue` takes a `label` and its value as children, the value right-aligned in tabular figures; `total` makes it the sum row, a firm rule above and strong text, and `tone` (`muted`, `positive`, `warn`, `danger`, `info`) colours the value on any row, so `total tone="warn"` is a total that does not reconcile; `align="start"` puts the values left-aligned in one column beside the labels instead, using CSS subgrid: in Chrome before 117 a row stacks its label over its value). `Avatar` (a round badge of the initials of `name`, titled with the name and `aria-hidden`; with `src` (the app's own local image path, never a remote one) it is a round, cropped `<img alt={name}>` instead, and if that image fails to load it shows the initials; `size` is `xs` (16px, for an inline mention), `sm`, `md` (default), `lg`, `xl` (56px), `2xl` (64px) or `3xl` (96px); `onClick` makes it one button named by `name`; `ring` adds a page-colour border and a negative margin for an overlapping stack; the colour is one of seven stock background classes picked by a hash of the name, remapped by each theme, and `avatarColourClass(name)` returns it to colour something else the same way; `initialsOf(name)` is the two letters). `TextLink` (an inline text link in the accent colour; `href` is required unless `render` draws the app's own router `<Link>`, `external` adds `target="_blank"` and `rel="noreferrer"`, `stretch` covers the nearest `relative` ancestor so a whole row or card is the click target, `size` (`sm`, `md` or `lg`) pins the type size where it would otherwise follow the text around it, `mono` sets the monospace face, `tone` (`warn`, `danger`, `positive`, `info` or `muted`) gives it a meaning's colour in place of the accent, every other anchor prop passes through). `MetaList` (a wrapping row of facts or links in muted small text, joined by an `aria-hidden` `separator`: `·` (default), `•` or `none`; branch · SHA · date, or a footer's Privacy · Terms; an item is text, a `Code` or a `TextLink`; `nowrap` keeps each item on one line, for links; `mono` sets the row in the monospace face, for ids and paths). `PageFade` (the page's content area, named for the View Transitions API so a route change cross-fades it while the frame around it stays put; wrap what changes between pages, once per page, or give each a `name` (a CSS identifier) when there are two; it fades when the navigation runs in a view transition, through `startPageTransition(update)` (flushes a synchronous state change inside `document.startViewTransition`) or a router's own option such as TanStack Router `viewTransition`, and otherwise, in a browser without View Transitions, or under `prefers-reduced-motion: reduce`, it swaps with no fade; it renders a small `<style>`, with no colour in it, and the div is a stacking context, so portal an overlay that must rise above the frame). `EmptyState` (what a page or list shows when it has nothing yet: a centred `title`, the `children` as the explanation under it, and `actions` in a centred row; a named `<section>`; `level` is the title's heading level, 2 (default) to 6, and does not change its look; for one muted line inside a card, `Text as="p" color="muted"`). `Steps` (a numbered `<ol>` of `Step`s, each a `title` and the `children` as a detail line, the numbers counted by CSS in a violet disc; for a "get started" list, not for progress). `Divider` (a hairline `<hr>` in the theme's line colour; spacing comes from the layout around it). `BulletList` (a `<ul>` with discs, an indent and a small gap; children are `<li>`s). `Code` (inline code: mono, on a subtle background). `CodeBlock` (a block of code, no client JS: the text is `children` (a string) or `lines` (one entry per line), `language` (`text` (default, one colour), `tsx`, `ts`, `js`, `json`, `bash`, `console`, `css`, `html` or `yaml`) colours it, `console` being a shell session where a `$ ` line is a command and the rest is output, and `copy` then copies only the commands; `label` is a caption naming the language or file; long lines wrap by default, so nothing is cut off and a command copies as one line, and `overflow="scroll"` keeps lines whole and scrolls them under a thin scrollbar in the theme's muted ink; `copy` adds a copy button beside the code, which copies it exactly as given and needs the page hydrated; other props go on the root `<figure>`). `CodeExample` (one framed example: the rendered `children` over the `code` that makes them, coloured as TSX, in one bordered box, with an optional `caption` as its last band; a wide preview or long code scrolls inside the frame under the same thin scrollbar; `copy` adds a button that copies the code; no client JS without `copy`). `Video` (a full-width, rounded `<video>` with controls that loads metadata only; `src` is required, `poster` and a WebVTT `captions` track are optional, children are the fallback). `Kbd` (a keyboard key in mono; its border takes the surrounding text colour, so it reads on a filled button too). `FilterGroup` (a `<fieldset>` with a small uppercase `legend` over a wrapped row of its children, e.g. `outline` `sm` `Button`s with `pressed`). `DateField` (see Dates).
 - Dates: `toISODate`, `fromISODate`, and the `CalendarDate` type.
 
 ## Dates

package/dist/Callout.d.ts

@@ -5,7 +5,8 @@ export type CalloutTone = "neutral" | "info" | "positive" | "warn" | "danger";
 /** The soft fill and border of each tone; a toned `Card` uses the same. */
 export declare const TONE_SURFACE: Record<CalloutTone, string>;
 /**
- * A tinted notice box, with an optional bold title above its body. `actions` puts a button or link
+ * A tinted notice box, with an optional bold title above its body. Its text is text-sm (text-base/7
+ * inside a `Prose`, boxed or `banner`). `actions` puts a button or link
  * at the end of the row; `banner` makes it a flat strip (bottom border only, no radius) for the
  * top of a `Card flush` and nowhere else: a padded card or a padded `FullBleedLayout` column
  * would inset it. `align="center"` centres the text. In a page's column the notice is a plain Callout, first in the column's `Stack`. With `actions` the box is `relative`, so a `TextLink

package/dist/Callout.js

@@ -1,5 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from "./cx.js";
+import { useProse } from "./typography.js";
 /** The soft fill and border of each tone; a toned `Card` uses the same. */
 export const TONE_SURFACE = {
     neutral: "border-slate-200 bg-slate-50",
@@ -16,13 +17,15 @@ const TONE_TEXT = {
     danger: "text-red-800",
 };
 /**
- * A tinted notice box, with an optional bold title above its body. `actions` puts a button or link
+ * A tinted notice box, with an optional bold title above its body. Its text is text-sm (text-base/7
+ * inside a `Prose`, boxed or `banner`). `actions` puts a button or link
  * at the end of the row; `banner` makes it a flat strip (bottom border only, no radius) for the
  * top of a `Card flush` and nowhere else: a padded card or a padded `FullBleedLayout` column
  * would inset it. `align="center"` centres the text. In a page's column the notice is a plain Callout, first in the column's `Stack`. With `actions` the box is `relative`, so a `TextLink
  * stretch` there makes the whole callout its click target, like a link in a table row.
  */
 export function Callout({ tone = "info", title, actions, banner = false, align = "start", children, ...rest }) {
+    const size = useProse() ? "text-base/7" : "text-sm";
     const content = title ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "font-semibold", children: title }), _jsx("div", { className: "mt-1", children: children })] })) : (children);
-    return (_jsx("div", { className: cx(Boolean(actions) && "relative", banner ? "border-b px-5 py-3 text-sm" : "rounded-xl border p-4 text-sm", TONE_SURFACE[tone], TONE_TEXT[tone], align === "center" && "text-center"), ...rest, children: actions ? (_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("div", { className: "min-w-0", children: content }), _jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })] })) : (content) }));
+    return (_jsx("div", { className: cx(Boolean(actions) && "relative", banner ? "border-b px-5 py-3" : "rounded-xl border p-4", size, TONE_SURFACE[tone], TONE_TEXT[tone], align === "center" && "text-center"), ...rest, children: actions ? (_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("div", { className: "min-w-0", children: content }), _jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })] })) : (content) }));
 }

package/dist/CodeBlock.d.ts

@@ -13,9 +13,12 @@ type CodeBlockSource = {
 };
 /**
  * A block of code: mono, in a bordered inset box. No client JS unless `copy` adds a copy button
- * beside the code, which copies it exactly as given and needs the page hydrated. `language` colours it, and `label` names the language or file (`bash`,
- * `css`) in a caption above the code. `text` (the default) leaves the code in one colour, for a
- * block that is not a language. Give the text as `children` or as `lines`. Long lines wrap, so
+ * beside the code, which copies it exactly as given and needs the page hydrated. `language` colours
+ * it: `tsx`, `ts`, `js`, `json`, `bash`, `console`, `css`, `html` or `yaml`. `console` is a shell
+ * session: a line starting with `$ ` is a command (coloured as bash, its `$ ` dimmed and not
+ * selectable) and any other line is output; with `copy` only the commands are copied, without the
+ * `$ `. `label` names the language or file (`bash`, `css`) in a caption above the code. `text` (the
+ * default) leaves the code in one colour, for a block that is not a language. Give the text as `children` or as `lines`. Long lines wrap, so
  * nothing is cut off and a command stays one copyable line; `overflow="scroll"` keeps lines whole
  * and scrolls them sideways under a thin themed scrollbar, for code whose layout matters. Every
  * other figure prop goes on the root `<figure>`. For one short line to copy, `CopyLine` is the
@@ -33,8 +36,8 @@ export declare function CodeBlock({ label, language, overflow, copy, children, l
      */
     overflow?: "wrap" | "scroll";
     /**
-     * A copy button beside the code, which copies it exactly as given. It is a client component:
-     * leave it off on a page that is rendered to static HTML without hydration.
+     * A copy button beside the code, which copies it exactly as given (a `console` block copies only
+     * its commands). It is a client component: leave it off on a page that is rendered to static HTML without hydration.
      * @default false
      */
     copy?: boolean;

package/dist/CodeBlock.js

@@ -2,9 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CodeBody } from "./CodeBody.js";
 /**
  * A block of code: mono, in a bordered inset box. No client JS unless `copy` adds a copy button
- * beside the code, which copies it exactly as given and needs the page hydrated. `language` colours it, and `label` names the language or file (`bash`,
- * `css`) in a caption above the code. `text` (the default) leaves the code in one colour, for a
- * block that is not a language. Give the text as `children` or as `lines`. Long lines wrap, so
+ * beside the code, which copies it exactly as given and needs the page hydrated. `language` colours
+ * it: `tsx`, `ts`, `js`, `json`, `bash`, `console`, `css`, `html` or `yaml`. `console` is a shell
+ * session: a line starting with `$ ` is a command (coloured as bash, its `$ ` dimmed and not
+ * selectable) and any other line is output; with `copy` only the commands are copied, without the
+ * `$ `. `label` names the language or file (`bash`, `css`) in a caption above the code. `text` (the
+ * default) leaves the code in one colour, for a block that is not a language. Give the text as `children` or as `lines`. Long lines wrap, so
  * nothing is cut off and a command stays one copyable line; `overflow="scroll"` keeps lines whole
  * and scrolls them sideways under a thin themed scrollbar, for code whose layout matters. Every
  * other figure prop goes on the root `<figure>`. For one short line to copy, `CopyLine` is the

package/dist/CodeBody.d.ts

@@ -1,8 +1,9 @@
 import type { ReactElement } from "react";
-import type { CodeLanguage } from "./highlight.js";
+import { type CodeLanguage } from "./highlight.js";
 /**
  * The code of a `CodeBlock` or a `CodeExample`: the `<pre>` and, with `copy`, a `CopyButton` beside
- * it that copies `code` exactly as given (wrapping is CSS, so it adds no characters). `wrap` wraps
+ * it that copies `code` exactly as given (wrapping is CSS, so it adds no characters), except in a
+ * `console` block, where it copies only the commands (see `consoleCommands`). `wrap` wraps
  * long lines at whitespace only (a flag with hyphens stays whole; a word wider than the box still
  * breaks inside itself); without it they scroll sideways under a themed thin scrollbar. The button's column has
  * a fixed width, so "copy" turning into "copied" never rewraps the code beside it. The button needs

package/dist/CodeBody.js

@@ -2,14 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CodeText } from "./CodeText.js";
 import { CopyButton } from "./CopyButton.js";
 import { cx, themedScrollbar } from "./cx.js";
+import { consoleCommands } from "./highlight.js";
 /**
  * The code of a `CodeBlock` or a `CodeExample`: the `<pre>` and, with `copy`, a `CopyButton` beside
- * it that copies `code` exactly as given (wrapping is CSS, so it adds no characters). `wrap` wraps
+ * it that copies `code` exactly as given (wrapping is CSS, so it adds no characters), except in a
+ * `console` block, where it copies only the commands (see `consoleCommands`). `wrap` wraps
  * long lines at whitespace only (a flag with hyphens stays whole; a word wider than the box still
  * breaks inside itself); without it they scroll sideways under a themed thin scrollbar. The button's column has
  * a fixed width, so "copy" turning into "copied" never rewraps the code beside it. The button needs
  * client JS, which is why it is opt-in: a statically rendered page would show a dead one.
  */
 export function CodeBody({ code, language, wrap, copy, }) {
-    return (_jsxs("div", { className: cx("flex items-start", copy && "gap-1 pr-1.5"), children: [_jsx("div", { className: cx("min-w-0 flex-1", !wrap && `overflow-x-auto ${themedScrollbar}`), children: _jsx("pre", { className: cx("px-3 py-2.5 font-mono text-[12.5px] text-slate-900", wrap ? "break-words whitespace-pre-wrap" : "w-max min-w-full whitespace-pre"), children: _jsx(CodeText, { code: code, language: language, breakAtSpaces: wrap }) }) }), copy && (_jsx("div", { className: "flex w-14 shrink-0 justify-end pt-2", children: _jsx(CopyButton, { text: code }) }))] }));
+    return (_jsxs("div", { className: cx("flex items-start", copy && "gap-1 pr-1.5"), children: [_jsx("div", { className: cx("min-w-0 flex-1", !wrap && `overflow-x-auto ${themedScrollbar}`), children: _jsx("pre", { className: cx("px-3 py-2.5 font-mono text-[12.5px] text-slate-900", wrap ? "break-words whitespace-pre-wrap" : "w-max min-w-full whitespace-pre"), children: _jsx(CodeText, { code: code, language: language, breakAtSpaces: wrap }) }) }), copy && (_jsx("div", { className: "flex w-14 shrink-0 justify-end pt-2", children: _jsx(CopyButton, { text: language === "console" ? consoleCommands(code) : code }) }))] }));
 }

package/dist/CodeText.js

@@ -4,6 +4,8 @@ import { highlight } from "./highlight.js";
  * Each kind borrows a colour family already in `palette.json`, so a theme recolours code like
  * anything else: keywords and element names read as the accent (violet), strings as positive
  * (emerald), numbers as warn (amber), attribute names as sky, calls as info (blue), comments muted.
+ * The `$ ` prompt of a console block is dimmer still and `select-none`, so selecting a command by
+ * hand does not pick it up.
  */
 const TOKEN_CLASS = {
     plain: "",
@@ -14,6 +16,7 @@ const TOKEN_CLASS = {
     string: "text-emerald-700",
     number: "text-amber-700",
     function: "text-blue-700",
+    prompt: "text-slate-400 select-none",
 };
 /** One coloured run: bare text for plain, a span with the kind's palette utility otherwise. */
 const colour = (kind, key, text) => kind === "plain" ? (text) : (_jsx("span", { className: TOKEN_CLASS[kind], children: text }, key));

package/dist/Dialog.js

@@ -3,7 +3,7 @@ import { useId, useLayoutEffect, useRef, } from "react";
 import { cx } from "./cx.js";
 import { useModal } from "./modal.js";
 import { scrollStopProps, TABBABLE, useScrollStop } from "./scrollStop.js";
-import { HeaderText, SectionHeading } from "./typography.js";
+import { AppScale, HeaderText, SectionHeading } from "./typography.js";
 /** Shared by every size: the surface, its colours and the fade (and the scrim's) in and out. */
 const BASE = "bg-white p-0 text-slate-900 opacity-0 transition-[opacity,translate,overlay,display] transition-discrete duration-200 open:opacity-100 starting:open:opacity-0 backdrop:bg-slate-900/35 backdrop:opacity-0 backdrop:transition-[opacity,overlay,display] backdrop:transition-discrete backdrop:duration-200 open:backdrop:opacity-100 starting:open:backdrop:opacity-0 motion-reduce:transition-none motion-reduce:backdrop:transition-none";
 /** A floating panel under the top edge: it also slides down 8px as it fades in. */
@@ -61,5 +61,5 @@ export function Dialog({ title, description, children, footer, size = "md", onCl
     const closed = useModal(dialog, onClose);
     const full = size === "full";
     const { attach, props: bodyProps, className: bodyClass, } = useScrollingBody(dialog, titleId, full);
-    return (_jsx("dialog", { ...rest, ref: dialog, "aria-labelledby": titleId, onClose: closed, onClick: (event) => event.target === dialog.current && dialog.current?.close(), className: cx(BASE, size === "full" ? FULL : `${WINDOW} ${WIDTH[size]}`), children: _jsxs("div", { className: cx("flex flex-col p-5.5", full ? "min-h-0 flex-1" : CAP), children: [_jsx(SectionHeading, { id: titleId, children: title }), description && (_jsx("div", { className: "mt-1", children: _jsx(HeaderText, { children: description }) })), children && (_jsx("div", { ref: attach, ...bodyProps, className: bodyClass, children: children })), footer && _jsx("div", { className: "mt-5 flex shrink-0 justify-end gap-2", children: footer })] }) }));
+    return (_jsx(AppScale, { children: _jsx("dialog", { ...rest, ref: dialog, "aria-labelledby": titleId, onClose: closed, onClick: (event) => event.target === dialog.current && dialog.current?.close(), className: cx(BASE, size === "full" ? FULL : `${WINDOW} ${WIDTH[size]}`), children: _jsxs("div", { className: cx("flex flex-col p-5.5", full ? "min-h-0 flex-1" : CAP), children: [_jsx(SectionHeading, { id: titleId, children: title }), description && (_jsx("div", { className: "mt-1", children: _jsx(HeaderText, { children: description }) })), children && (_jsx("div", { ref: attach, ...bodyProps, className: bodyClass, children: children })), footer && _jsx("div", { className: "mt-5 flex shrink-0 justify-end gap-2", children: footer })] }) }) }));
 }

package/dist/Drawer.js

@@ -4,7 +4,7 @@ import { cx } from "./cx.js";
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
 import { useModal } from "./modal.js";
-import { SectionHeading } from "./typography.js";
+import { AppScale, SectionHeading } from "./typography.js";
 const PANEL = "fixed inset-y-0 right-0 left-auto m-0 h-dvh max-h-none max-w-full flex-col overflow-hidden border-l border-slate-200 bg-white p-0 text-slate-900 shadow-2xl translate-x-full transition-[translate,overlay,display] transition-discrete duration-200 open:flex open:translate-x-0 starting:open:translate-x-full backdrop:bg-slate-900/35 backdrop:opacity-0 backdrop:transition-[opacity,overlay,display] backdrop:transition-discrete backdrop:duration-200 open:backdrop:opacity-100 starting:open:backdrop:opacity-0 motion-reduce:transition-none motion-reduce:backdrop:transition-none";
 const SIZE = { sm: "w-80", md: "w-110", lg: "w-160" };
 /**
@@ -18,5 +18,5 @@ export function Drawer({ title, children, footer, size = "md", onClose, closeLab
     const dialog = useRef(null);
     const titleId = useId();
     const closed = useModal(dialog, onClose);
-    return (_jsxs("dialog", { ...rest, ref: dialog, "aria-labelledby": titleId, onClose: closed, onClick: (event) => event.target === dialog.current && dialog.current?.close(), className: cx(PANEL, SIZE[size]), children: [_jsxs("header", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-slate-200 px-5.5 py-3.5", children: [_jsx(SectionHeading, { id: titleId, children: title }), _jsx(IconButton, { label: closeLabel, onClick: () => dialog.current?.close(), children: _jsx(Icon, { children: _jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { d: "M5.28 4.22a.75.75 0 0 0-1.06 1.06L8.94 10l-4.72 4.72a.75.75 0 1 0 1.06 1.06L10 11.06l4.72 4.72a.75.75 0 1 0 1.06-1.06L11.06 10l4.72-4.72a.75.75 0 0 0-1.06-1.06L10 8.94 5.28 4.22Z" }) }) }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-5.5 py-4", children: children }), footer && (_jsx("footer", { className: "flex shrink-0 justify-end gap-2 border-t border-slate-200 px-5.5 py-3.5", children: footer }))] }));
+    return (_jsx(AppScale, { children: _jsxs("dialog", { ...rest, ref: dialog, "aria-labelledby": titleId, onClose: closed, onClick: (event) => event.target === dialog.current && dialog.current?.close(), className: cx(PANEL, SIZE[size]), children: [_jsxs("header", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-slate-200 px-5.5 py-3.5", children: [_jsx(SectionHeading, { id: titleId, children: title }), _jsx(IconButton, { label: closeLabel, onClick: () => dialog.current?.close(), children: _jsx(Icon, { children: _jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { d: "M5.28 4.22a.75.75 0 0 0-1.06 1.06L8.94 10l-4.72 4.72a.75.75 0 1 0 1.06 1.06L10 11.06l4.72 4.72a.75.75 0 1 0 1.06-1.06L11.06 10l4.72-4.72a.75.75 0 0 0-1.06-1.06L10 8.94 5.28 4.22Z" }) }) }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-5.5 py-4", children: children }), footer && (_jsx("footer", { className: "flex shrink-0 justify-end gap-2 border-t border-slate-200 px-5.5 py-3.5", children: footer }))] }) }));
 }

package/dist/EmptyState.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { cx } from "./cx.js";
-import { SectionHeading } from "./typography.js";
+import { AppScale, SectionHeading } from "./typography.js";
 /**
  * What a list or a page shows when there is nothing in it yet: a centred `title`, the `children`
  * as the explanation under it (a `Text as="p"`, then `Steps` for a "get started" list), and
@@ -11,5 +11,5 @@ import { SectionHeading } from "./typography.js";
  */
 export function EmptyState({ title, level = 2, padding = "default", children, actions, ...rest }) {
     const titleId = useId();
-    return (_jsxs("section", { ...rest, "aria-labelledby": titleId, className: cx("mx-auto flex w-full max-w-xl flex-col items-center gap-4 text-center", padding === "inset" ? "p-8" : "py-8"), children: [_jsx(SectionHeading, { as: `h${level}`, id: titleId, children: title }), children != null && (_jsx("div", { className: "flex w-full flex-col items-center gap-5", children: children })), actions != null && _jsx("div", { className: "flex flex-wrap justify-center gap-2", children: actions })] }));
+    return (_jsx(AppScale, { children: _jsxs("section", { ...rest, "aria-labelledby": titleId, className: cx("mx-auto flex w-full max-w-xl flex-col items-center gap-4 text-center", padding === "inset" ? "p-8" : "py-8"), children: [_jsx(SectionHeading, { as: `h${level}`, id: titleId, children: title }), children != null && (_jsx("div", { className: "flex w-full flex-col items-center gap-5", children: children })), actions != null && _jsx("div", { className: "flex flex-wrap justify-center gap-2", children: actions })] }) }));
 }

package/dist/highlight.d.ts

@@ -4,13 +4,14 @@
  * highlighted code exactly as it recolours everything else.
  *
  * The grammars are deliberately shallow — enough for examples, not a compiler front end. `text`
- * returns the code as one plain run, so nothing is coloured where no language is named.
+ * returns the code as one plain run, so nothing is coloured where no language is named. The
+ * languages: `text`, `tsx`, `ts`, `js`, `json`, `bash`, `console` (a shell session: `$ ` commands
+ * scanned as bash, everything else output), `css`, `html` (with `<script>` scanned as JS and
+ * `<style>` as CSS) and `yaml`.
  */
-export type CodeLanguage = "text" | "tsx" | "ts" | "json" | "bash" | "css";
-export type TokenKind = "plain" | "comment" | "keyword" | "string" | "number" | "tag" | "attr" | "function";
-export type Token = {
-    text: string;
-    kind: TokenKind;
-};
+import type { Token } from "./highlightKit.js";
+export { consoleCommands } from "./highlightConsole.js";
+export type { Token, TokenKind } from "./highlightKit.js";
+export type CodeLanguage = "text" | "tsx" | "ts" | "js" | "json" | "bash" | "console" | "css" | "html" | "yaml";
 /** The coloured runs of `code`. The text of every token joined back together is `code`. */
 export declare function highlight(code: string, language: CodeLanguage): Token[];

package/dist/highlight.js

@@ -4,8 +4,15 @@
  * highlighted code exactly as it recolours everything else.
  *
  * The grammars are deliberately shallow — enough for examples, not a compiler front end. `text`
- * returns the code as one plain run, so nothing is coloured where no language is named.
+ * returns the code as one plain run, so nothing is coloured where no language is named. The
+ * languages: `text`, `tsx`, `ts`, `js`, `json`, `bash`, `console` (a shell session: `$ ` commands
+ * scanned as bash, everything else output), `css`, `html` (with `<script>` scanned as JS and
+ * `<style>` as CSS) and `yaml`.
  */
+import { scanConsole } from "./highlightConsole.js";
+import { scanHtml } from "./highlightHtml.js";
+import { scanYaml } from "./highlightYaml.js";
+export { consoleCommands } from "./highlightConsole.js";
 /** The coloured runs of `code`. The text of every token joined back together is `code`. */
 export function highlight(code, language) {
     const tokens = [];
@@ -22,9 +29,16 @@ export function highlight(code, language) {
         emit("plain", code);
     else if (language === "bash")
         scanBash(code, emit);
+    else if (language === "console")
+        scanConsole(code, emit, scanBash);
     else if (language === "css")
         scanCss(code, emit);
-    // JSON is JS with no code around it: keys are strings, `true`/`false`/`null` are keywords.
+    else if (language === "html")
+        scanHtml(code, emit, scanJs, scanCss);
+    else if (language === "yaml")
+        scanYaml(code, emit);
+    // JS, TS and TSX share one scanner. JSON is JS with no code around it: keys are strings,
+    // `true`/`false`/`null` are keywords.
     else
         scanJs(code, emit);
     return tokens;

package/dist/highlightConsole.d.ts

@@ -0,0 +1,9 @@
+import type { Emit, Scanner } from "./highlightKit.js";
+/** A shell session: `$ ` is the prompt, the command after it is bash, other lines are output. */
+export declare function scanConsole(code: string, emit: Emit, bash: Scanner): void;
+/**
+ * What a console block's copy button copies: each command without its `$ `, plus the lines that
+ * continue it as written (the trailing `\\` and the indentation kept, so the paste runs), joined by
+ * newlines. Output is left out. A block with no `$ ` line has no commands, so it is copied as given.
+ */
+export declare function consoleCommands(code: string): string;

package/dist/highlightConsole.js

@@ -0,0 +1,42 @@
+import { splitLines } from "./highlightKit.js";
+const CONSOLE_PROMPT = "$ ";
+/**
+ * The lines of a console session, marked: a line that starts with `$ ` is a command (`prompt`), and
+ * so is every line after a command line that ends with `\\`, which continues it. The rest is output.
+ */
+function consoleLines(code) {
+    let continued = false;
+    return splitLines(code).map(({ body, eol }) => {
+        const prompt = !continued && body.startsWith(CONSOLE_PROMPT);
+        const command = prompt || continued;
+        continued = command && body.endsWith("\\");
+        return { body, eol, command, prompt };
+    });
+}
+/** A shell session: `$ ` is the prompt, the command after it is bash, other lines are output. */
+export function scanConsole(code, emit, bash) {
+    for (const { body, eol, command, prompt } of consoleLines(code)) {
+        if (prompt)
+            emit("prompt", CONSOLE_PROMPT);
+        const text = prompt ? body.slice(CONSOLE_PROMPT.length) : body;
+        if (command)
+            bash(text, emit);
+        else
+            emit("plain", text);
+        emit("plain", eol);
+    }
+}
+/**
+ * What a console block's copy button copies: each command without its `$ `, plus the lines that
+ * continue it as written (the trailing `\\` and the indentation kept, so the paste runs), joined by
+ * newlines. Output is left out. A block with no `$ ` line has no commands, so it is copied as given.
+ */
+export function consoleCommands(code) {
+    const lines = consoleLines(code);
+    if (!lines.some((line) => line.prompt))
+        return code;
+    return lines
+        .filter((line) => line.command)
+        .map((line) => (line.prompt ? line.body.slice(CONSOLE_PROMPT.length) : line.body))
+        .join("\n");
+}

package/dist/highlightHtml.d.ts

@@ -0,0 +1,7 @@
+import type { Emit, Scanner } from "./highlightKit.js";
+/**
+ * HTML: comments, the doctype, tags with their attributes (a start tag may span lines), and text,
+ * which is plain. The content of `<script>` and `<style>` runs to the first closing tag of that
+ * name, wherever it falls, and is scanned with `script` (JS) or `style` (CSS).
+ */
+export declare function scanHtml(code: string, emit: Emit, script: Scanner, style: Scanner): void;

package/dist/highlightHtml.js

@@ -0,0 +1,132 @@
+import { sticky } from "./highlightKit.js";
+const OPEN = /<(\/?)([A-Za-z][\w:-]*)/y;
+const DOCTYPE = /<!doctype\b[^>]*>?/iy;
+const SPACE = /\s+/y;
+const ATTR = /[^\s"'<>/=]+/y;
+const UNQUOTED = /[^\s>"'=<`]+/y;
+/** `>` or `/>` where the tag ends. */
+function tagEnd(code, at) {
+    if (code.startsWith("/>", at))
+        return "/>";
+    return code.charAt(at) === ">" ? ">" : undefined;
+}
+/** The value after an `=`: a quoted string (which may span lines) or a bare run, which stays plain. */
+function takeValue(scan) {
+    const { code, at } = scan;
+    const c = code.charAt(at);
+    if (c === '"' || c === "'") {
+        const close = code.indexOf(c, at + 1);
+        const end = close === -1 ? code.length : close + 1;
+        scan.emit("string", code.slice(at, end));
+        scan.at = end;
+        return true;
+    }
+    const bare = sticky(UNQUOTED, code, at);
+    if (bare === undefined)
+        return false;
+    scan.emit("plain", bare);
+    scan.at += bare.length;
+    return true;
+}
+/** One piece of a tag's insides: space, `=`, a value, an attribute name, or a stray character. */
+function tagStep(scan) {
+    const { code, at } = scan;
+    const space = sticky(SPACE, code, at);
+    if (space !== undefined) {
+        scan.emit("plain", space);
+        scan.at += space.length;
+        return;
+    }
+    if (code.charAt(at) === "=") {
+        scan.emit("plain", "=");
+        scan.afterEquals = true;
+        scan.at += 1;
+        return;
+    }
+    const wasAfterEquals = scan.afterEquals;
+    scan.afterEquals = false;
+    if (wasAfterEquals && takeValue(scan))
+        return;
+    const name = sticky(ATTR, code, at);
+    scan.emit(name === undefined ? "plain" : "attr", name ?? code.charAt(at));
+    scan.at += name?.length ?? 1;
+}
+/** The rest of a tag from just past its name; says where it ended and how. */
+function scanTag(code, from, emit) {
+    const scan = { code, emit, at: from, afterEquals: false };
+    while (scan.at < code.length) {
+        const end = tagEnd(code, scan.at);
+        if (end !== undefined) {
+            emit("plain", end);
+            return { end: scan.at + end.length, closed: true, selfClosed: end === "/>" };
+        }
+        tagStep(scan);
+    }
+    return { end: code.length, closed: false, selfClosed: false };
+}
+/** A comment (which may span lines) or a doctype at `at`: where it ends and its colour. */
+function special(code, at) {
+    if (code.startsWith("<!--", at)) {
+        const close = code.indexOf("-->", at + 4);
+        return { end: close === -1 ? code.length : close + 3, kind: "comment" };
+    }
+    const doctype = sticky(DOCTYPE, code, at);
+    return doctype === undefined ? undefined : { end: at + doctype.length, kind: "keyword" };
+}
+/** The `<script>` or `<style>` start tag whose content is another language, if this is one. */
+function rawOf(name, tag, embedded) {
+    if (!tag.closed || tag.selfClosed)
+        return undefined;
+    if (name === "script")
+        return { name, scan: embedded.script };
+    return name === "style" ? { name, scan: embedded.style } : undefined;
+}
+/** The content of a `<script>` or `<style>`, up to the first closing tag of that name, wherever it falls. */
+function rawContent(code, at, raw, emit) {
+    const closing = new RegExp(`</${raw.name}(?=[\\s/>]|$)`, "gi");
+    closing.lastIndex = at;
+    const end = closing.exec(code)?.index ?? code.length;
+    raw.scan(code.slice(at, end), emit);
+    return end;
+}
+/** A tag at a `<`, or a lone `<` that opens nothing. Returns the index to carry on from. */
+function scanElement(code, at, emit, embedded) {
+    OPEN.lastIndex = at;
+    const open = OPEN.exec(code);
+    if (open === null) {
+        emit("plain", "<");
+        return at + 1;
+    }
+    const [whole, slash = "", tagName = ""] = open;
+    emit("plain", `<${slash}`);
+    emit("tag", tagName);
+    const tag = scanTag(code, at + whole.length, emit);
+    const raw = slash === "" ? rawOf(tagName.toLowerCase(), tag, embedded) : undefined;
+    return raw === undefined ? tag.end : rawContent(code, tag.end, raw, emit);
+}
+/** Markup at a `<`: a comment, a doctype or a tag. Returns the index to carry on from. */
+function scanMarkup(code, at, emit, embedded) {
+    const found = special(code, at);
+    if (found === undefined)
+        return scanElement(code, at, emit, embedded);
+    emit(found.kind, code.slice(at, found.end));
+    return found.end;
+}
+/**
+ * HTML: comments, the doctype, tags with their attributes (a start tag may span lines), and text,
+ * which is plain. The content of `<script>` and `<style>` runs to the first closing tag of that
+ * name, wherever it falls, and is scanned with `script` (JS) or `style` (CSS).
+ */
+export function scanHtml(code, emit, script, style) {
+    let at = 0;
+    while (at < code.length) {
+        if (code.charAt(at) === "<") {
+            at = scanMarkup(code, at, emit, { script, style });
+            continue;
+        }
+        const next = code.indexOf("<", at);
+        const end = next === -1 ? code.length : next;
+        emit("plain", code.slice(at, end));
+        at = end;
+    }
+}

package/dist/highlightKit.d.ts

@@ -0,0 +1,16 @@
+/** The pieces the scanners in `highlight*.ts` share. */
+export type TokenKind = "plain" | "comment" | "keyword" | "string" | "number" | "tag" | "attr" | "function" | "prompt";
+export type Token = {
+    text: string;
+    kind: TokenKind;
+};
+export type Emit = (kind: TokenKind, text: string) => void;
+/** A scanner for a whole run of code, given to a scanner of a language that holds another. */
+export type Scanner = (code: string, emit: Emit) => void;
+/** The text a sticky `pattern` matches at `at`, or `undefined`. */
+export declare function sticky(pattern: RegExp, code: string, at: number): string | undefined;
+/** Each line of `code` without its line break, and the break (`\n`, `\r\n` or nothing at the end). */
+export declare function splitLines(code: string): {
+    body: string;
+    eol: string;
+}[];

package/dist/highlightKit.js

@@ -0,0 +1,23 @@
+/** The pieces the scanners in `highlight*.ts` share. */
+/** The text a sticky `pattern` matches at `at`, or `undefined`. */
+export function sticky(pattern, code, at) {
+    pattern.lastIndex = at;
+    return pattern.exec(code)?.[0];
+}
+/** Each line of `code` without its line break, and the break (`\n`, `\r\n` or nothing at the end). */
+export function splitLines(code) {
+    const out = [];
+    let at = 0;
+    for (;;) {
+        const newline = code.indexOf("\n", at);
+        const end = newline === -1 ? code.length : newline;
+        const bodyEnd = end > at && code.charAt(end - 1) === "\r" ? end - 1 : end;
+        out.push({
+            body: code.slice(at, bodyEnd),
+            eol: code.slice(bodyEnd, newline === -1 ? end : end + 1),
+        });
+        if (newline === -1)
+            return out;
+        at = newline + 1;
+    }
+}

package/dist/highlightYaml.d.ts

@@ -0,0 +1,3 @@
+import type { Emit } from "./highlightKit.js";
+/** Line by line. The lines of a block scalar are one plain run: no comment or key is read in them. */
+export declare function scanYaml(code: string, emit: Emit): void;

package/dist/highlightYaml.js

@@ -0,0 +1,143 @@
+import { splitLines, sticky } from "./highlightKit.js";
+const YAML_MARKER = /-(?: +|$)/y;
+const YAML_KEYWORDS = /^(?:true|false|null|~)$/;
+const YAML_NUMBER = /^-?\d[\d._]*$/;
+const YAML_BLOCK_HEADER = /^[|>](?:[1-9][-+]?|[-+][1-9]?)?$/;
+/**
+ * The index past the quoted scalar at `at` in a YAML line, or `undefined`. A single-quoted scalar
+ * escapes a quote by doubling it (`'it''s'`), a double-quoted one with a backslash.
+ */
+function quotedEnd(line, at) {
+    const quote = line.charAt(at);
+    if (quote !== '"' && quote !== "'")
+        return undefined;
+    let i = at + 1;
+    while (i < line.length) {
+        const c = line.charAt(i);
+        if (quote === '"' && c === "\\")
+            i += 2;
+        else if (c !== quote)
+            i += 1;
+        else if (quote === "'" && line.charAt(i + 1) === "'")
+            i += 2;
+        else
+            return i + 1;
+    }
+    return line.length;
+}
+/** What follows a quoted scalar: spaces, then perhaps a comment. */
+function trailing(rest, emit) {
+    const comment = /^(\s+)(#.*)$/.exec(rest);
+    if (comment === null)
+        emit("plain", rest);
+    else {
+        emit("plain", comment[1] ?? "");
+        emit("comment", comment[2] ?? "");
+    }
+}
+/** A quoted key: the closing quote must be followed by `:` and a space or the line end. */
+function quotedKey(line, at) {
+    const end = quotedEnd(line, at);
+    if (end === undefined || end - at < 2 || line.charAt(end - 1) !== line.charAt(at))
+        return undefined;
+    return /^:(?:\s|$)/.test(line.slice(end)) ? { end, kind: "string" } : undefined;
+}
+/** An unquoted key: the text up to the first `:` that is followed by a space or the line end. */
+function plainKey(line, at) {
+    if ("#[{|>".includes(line.charAt(at)))
+        return undefined;
+    const colon = /:(?:\s|$)/.exec(line.slice(at));
+    if (colon === null || colon.index === 0)
+        return undefined;
+    const text = line.slice(at, at + colon.index);
+    if (/(?:^|\s)#/.test(text))
+        return undefined;
+    return { end: at + text.trimEnd().length, kind: "attr" };
+}
+/** The mapping key at `at`: where its text ends (before the `:`) and its colour. */
+function keyAt(line, at) {
+    const first = line.charAt(at);
+    if (first === "")
+        return undefined;
+    return first === '"' || first === "'" ? quotedKey(line, at) : plainKey(line, at);
+}
+/** The colour of an unquoted scalar read whole. */
+function scalarKind(scalar) {
+    if (YAML_NUMBER.test(scalar))
+        return "number";
+    return YAML_KEYWORDS.test(scalar) ? "keyword" : "plain";
+}
+/** A value: a quoted string, or an unquoted scalar up to a comment. True when it opens a block scalar. */
+function emitValue(line, from, emit) {
+    const value = line.slice(from);
+    if (value === "")
+        return false;
+    if (value.startsWith("#")) {
+        emit("comment", value);
+        return false;
+    }
+    const quoted = quotedEnd(line, from);
+    if (quoted !== undefined) {
+        emit("string", line.slice(from, quoted));
+        trailing(line.slice(quoted), emit);
+        return false;
+    }
+    const comment = /\s#/.exec(value);
+    const scalar = line.slice(from, comment === null ? line.length : from + comment.index).trimEnd();
+    emit(scalarKind(scalar), scalar);
+    const commentAt = comment === null ? line.length : from + comment.index + 1;
+    emit("plain", line.slice(from + scalar.length, commentAt));
+    emit("comment", line.slice(commentAt));
+    return YAML_BLOCK_HEADER.test(scalar);
+}
+/** The `- ` markers from `at`: where the content starts, and the column of the last dash. */
+function emitMarkers(line, at, emit) {
+    let column = at;
+    let next = at;
+    for (;;) {
+        const marker = sticky(YAML_MARKER, line, next);
+        if (marker === undefined)
+            return { at: next, column };
+        column = next;
+        emit("plain", marker);
+        next += marker.length;
+    }
+}
+/**
+ * One YAML line. Returns the column its block scalar's lines must be indented past, when it ends
+ * in `|` or `>`: the key's own column, after any `- ` markers (a key-less item uses its dash's).
+ */
+function scanLine(line, emit) {
+    const indent = line.length - line.trimStart().length;
+    emit("plain", line.slice(0, indent));
+    if (line.charAt(indent) === "#") {
+        emit("comment", line.slice(indent));
+        return undefined;
+    }
+    const markers = emitMarkers(line, indent, emit);
+    let { at, column } = markers;
+    const key = keyAt(line, at);
+    if (key !== undefined) {
+        column = at;
+        emit(key.kind, line.slice(at, key.end));
+        const colon = line.indexOf(":", key.end);
+        emit("plain", line.slice(key.end, colon + 1));
+        at = colon + 1;
+    }
+    const gap = line.length - at - line.slice(at).trimStart().length;
+    emit("plain", line.slice(at, at + gap));
+    return emitValue(line, at + gap, emit) ? column : undefined;
+}
+/** Line by line. The lines of a block scalar are one plain run: no comment or key is read in them. */
+export function scanYaml(code, emit) {
+    let block;
+    for (const { body, eol } of splitLines(code)) {
+        const indent = body.length - body.trimStart().length;
+        if (block !== undefined && (body.trim() === "" || indent > block)) {
+            emit("plain", body + eol);
+            continue;
+        }
+        block = scanLine(body, emit);
+        emit("plain", eol);
+    }
+}

package/dist/index.d.ts

@@ -77,7 +77,7 @@ export { MediaTile, type MediaTileProps } from "./MediaTile.js";
 export { ScrollStrip, type ScrollStripProps } from "./ScrollStrip.js";
 export { TextLink, type TextLinkSize } from "./TextLink.js";
 export { ToolCallCard } from "./ToolCallCard.js";
-export { Caption, Display, Lead, Overline, PageHeading, SectionHeading, SubsectionHeading, type SubsectionHeadingSize, Text, type TextTone, type TypographyColor, type TypographyProps, } from "./typography.js";
+export { Caption, Display, Lead, Overline, PageHeading, Prose, SectionHeading, SubsectionHeading, type SubsectionHeadingSize, Text, type TextTone, type TypographyColor, type TypographyProps, } from "./typography.js";
 export { DateField, type DateFieldProps } from "./DateField.js";
 export { fromISODate, toISODate } from "./isoDate.js";
 export type { CalendarDate } from "@internationalized/date";

package/dist/index.js

@@ -73,6 +73,6 @@ export { MediaTile } from "./MediaTile.js";
 export { ScrollStrip } from "./ScrollStrip.js";
 export { TextLink } from "./TextLink.js";
 export { ToolCallCard } from "./ToolCallCard.js";
-export { Caption, Display, Lead, Overline, PageHeading, SectionHeading, SubsectionHeading, Text, } from "./typography.js";
+export { Caption, Display, Lead, Overline, PageHeading, Prose, SectionHeading, SubsectionHeading, Text, } from "./typography.js";
 export { DateField } from "./DateField.js";
 export { fromISODate, toISODate } from "./isoDate.js";

package/dist/typography.d.ts

@@ -1,4 +1,5 @@
 import { type ComponentPropsWithoutRef, type ElementType, type ReactElement, type ReactNode } from "react";
+import type { Passthrough } from "./props.js";
 import type { Size } from "./size.js";
 export type TypographyColor = "default" | "secondary" | "tertiary" | "muted" | "brand";
 /**
@@ -77,8 +78,31 @@ export declare const PageHeading: {
     <E extends ElementType = "h1">(props: TypographyProps<E>): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
     displayName: string;
 };
+/** True inside a `Prose`, where the text roles take the long-form scale. Internal. */
+export declare function useProse(): boolean;
 /**
- * Top-level section header. `h2`, text-base/6 semibold, primary text. `rule` sets
+ * Sets the text roles back to the app scale around what a component renders itself (a `Dialog`, a
+ * `Drawer`, an `EmptyState`), so one opened from a docs page looks as it does anywhere else.
+ * Renders no element. Internal: not exported from the package.
+ */
+export declare function AppScale({ children }: {
+    children?: ReactNode;
+}): ReactElement;
+/**
+ * Long-form content, for a docs page or an article. A block (`div`) that sets text-base/7 on itself,
+ * so a bare `<li>` or text node inside reads at 16px, and puts the text roles inside it on the
+ * prose scale: `Text` text-base/7, `SectionHeading` text-2xl/8, `SubsectionHeading` `lg` text-2xl/8,
+ * `md` text-xl/7 and `sm` text-base/7 (a semibold line at body size), and the box of a `Callout`
+ * text-base/7. Every other role keeps its size. Nothing outside a `Prose` changes, and a `Dialog`,
+ * `Drawer` or `EmptyState` inside one is back on the app scale. An app screen never uses it: wrap the
+ * body of a docs page or an article, inside a `ProseLayout`, a `SidebarLayout` or anywhere else.
+ */
+export declare function Prose({ children, ...rest }: {
+    children?: ReactNode;
+} & Passthrough): ReactElement;
+/**
+ * Top-level section header. `h2`, text-base/6 semibold, primary text (text-2xl/8 semibold tight
+ * inside a `Prose`). `rule` sets
  * a hairline under it (the `Divider` line colour) with the space either side of
  * the line built in. `description` is a muted line under the heading, outside the `<h2>`, so the
  * heading's name stays the title; the rule then sits under the description.
@@ -92,7 +116,9 @@ export declare function SectionHeading<E extends ElementType = "h2">({ rule, des
 export type SubsectionHeadingSize = Size;
 /**
  * Nested header. `h3`, text-base/6 semibold, primary text. `size` steps it down for a dense card
- * or up for a drawer or form-group title: `sm` (text-sm), `md` (default) or `lg`. `truncate` keeps it on
+ * or up for a drawer or form-group title: `sm` (text-sm), `md` (default) or `lg`. Inside a `Prose`
+ * `md` is text-xl/7 (the h3 of a doc), `sm` text-base/7 (the h4: body size, set apart by its weight)
+ * and `lg` text-2xl/8, the size of a `SectionHeading` there. `truncate` keeps it on
  * one line and cuts it with an ellipsis where its container ends, the full text as the `title`.
  */
 export declare function SubsectionHeading<E extends ElementType = "h3">({ size, ...props }: TypographyProps<E> & {
@@ -115,7 +141,8 @@ export declare const Overline: {
 /** A fixed width for a run of text: `amount` is a money figure, right-aligned, at a width that lines a column up. */
 export type TextMinWidth = "amount";
 /**
- * Running text. `span` (inline; `as="p"` for a paragraph), text-sm/5 normal, secondary. A block of it
+ * Running text. `span` (inline; `as="p"` for a paragraph), text-sm/5 normal, secondary (text-base/7
+ * inside a `Prose`). A block of it
  * stops at a readable line length (`max-w-[72ch]`), wherever it sits. `strong` emphasises it:
  * font-medium in the primary ink, unless `color` or `tone` says otherwise.
  * `preserveNewlines` keeps the line breaks in the text (a user-typed note); runs of spaces still collapse.

package/dist/typography.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, } from "react";
+import { Children, createContext, useContext, } from "react";
 import { cx } from "./cx.js";
 /** Colour token → slate/violet utility, which a theme remaps. */
 const COLOR = {
@@ -83,32 +83,72 @@ export const Lead = typography("Lead", "p", "text-lg/7 font-normal sm:text-xl/8"
  * `Lead` under it and the body text after it, so the page's title reads first.
  */
 export const PageHeading = typography("PageHeading", "h1", "text-3xl/9 font-bold tracking-tight sm:text-4xl/10", "default");
+// --- Prose: the long-form scale ---------------------------------------------
 /**
- * Top-level section header. `h2`, text-base/6 semibold, primary text. `rule` sets
+ * Whether the text roles below are in a `Prose`. `Text`, `SectionHeading`, `SubsectionHeading` and
+ * `Callout` read it and pick their prose size; outside a `Prose` it is false and nothing changes.
+ * Internal: not exported from the package.
+ */
+const ProseContext = createContext(false);
+/** True inside a `Prose`, where the text roles take the long-form scale. Internal. */
+export function useProse() {
+    return useContext(ProseContext);
+}
+/**
+ * Sets the text roles back to the app scale around what a component renders itself (a `Dialog`, a
+ * `Drawer`, an `EmptyState`), so one opened from a docs page looks as it does anywhere else.
+ * Renders no element. Internal: not exported from the package.
+ */
+export function AppScale({ children }) {
+    return _jsx(ProseContext.Provider, { value: false, children: children });
+}
+/**
+ * Long-form content, for a docs page or an article. A block (`div`) that sets text-base/7 on itself,
+ * so a bare `<li>` or text node inside reads at 16px, and puts the text roles inside it on the
+ * prose scale: `Text` text-base/7, `SectionHeading` text-2xl/8, `SubsectionHeading` `lg` text-2xl/8,
+ * `md` text-xl/7 and `sm` text-base/7 (a semibold line at body size), and the box of a `Callout`
+ * text-base/7. Every other role keeps its size. Nothing outside a `Prose` changes, and a `Dialog`,
+ * `Drawer` or `EmptyState` inside one is back on the app scale. An app screen never uses it: wrap the
+ * body of a docs page or an article, inside a `ProseLayout`, a `SidebarLayout` or anywhere else.
+ */
+export function Prose({ children, ...rest }) {
+    return (_jsx(ProseContext.Provider, { value: true, children: _jsx("div", { ...rest, className: "text-base/7", children: children }) }));
+}
+const SECTION = {
+    app: "text-base/6 font-semibold",
+    prose: "text-2xl/8 font-semibold tracking-tight",
+};
+/**
+ * Top-level section header. `h2`, text-base/6 semibold, primary text (text-2xl/8 semibold tight
+ * inside a `Prose`). `rule` sets
  * a hairline under it (the `Divider` line colour) with the space either side of
  * the line built in. `description` is a muted line under the heading, outside the `<h2>`, so the
  * heading's name stays the title; the rule then sits under the description.
  */
 export function SectionHeading({ rule, description, ...props }) {
     const hairline = "mb-4 border-b border-slate-200/70 pb-2";
+    const size = useProse() ? SECTION.prose : SECTION.app;
     const hasDescription = description != null && description !== false;
     if (!hasDescription) {
-        return pinned("h2", cx(rule && hairline, "text-base/6 font-semibold"), "default", props);
+        return pinned("h2", cx(rule && hairline, size), "default", props);
     }
-    return (_jsxs("div", { className: cx("flex flex-col gap-1", rule && hairline), children: [pinned("h2", "text-base/6 font-semibold", "default", props), _jsx(Text, { as: "p", color: "tertiary", children: description })] }));
+    return (_jsxs("div", { className: cx("flex flex-col gap-1", rule && hairline), children: [pinned("h2", size, "default", props), _jsx(Text, { as: "p", color: "tertiary", children: description })] }));
 }
 const SUBSECTION_SIZE = {
-    sm: "text-sm/5 font-semibold",
-    md: "text-base/6 font-semibold",
-    lg: "text-lg/7 font-semibold",
+    sm: { app: "text-sm/5 font-semibold", prose: "text-base/7 font-semibold" },
+    md: { app: "text-base/6 font-semibold", prose: "text-xl/7 font-semibold" },
+    lg: { app: "text-lg/7 font-semibold", prose: "text-2xl/8 font-semibold tracking-tight" },
 };
 /**
  * Nested header. `h3`, text-base/6 semibold, primary text. `size` steps it down for a dense card
- * or up for a drawer or form-group title: `sm` (text-sm), `md` (default) or `lg`. `truncate` keeps it on
+ * or up for a drawer or form-group title: `sm` (text-sm), `md` (default) or `lg`. Inside a `Prose`
+ * `md` is text-xl/7 (the h3 of a doc), `sm` text-base/7 (the h4: body size, set apart by its weight)
+ * and `lg` text-2xl/8, the size of a `SectionHeading` there. `truncate` keeps it on
  * one line and cuts it with an ellipsis where its container ends, the full text as the `title`.
  */
 export function SubsectionHeading({ size = "md", ...props }) {
-    return pinned("h3", SUBSECTION_SIZE[size], "default", props);
+    const scale = SUBSECTION_SIZE[size];
+    return pinned("h3", useProse() ? scale.prose : scale.app, "default", props);
 }
 // --- Inline roles (inline by default) --------------------------------------
 /**
@@ -117,7 +157,8 @@ export function SubsectionHeading({ size = "md", ...props }) {
  */
 export const Overline = inlineRole("Overline", "span", "text-xs font-semibold uppercase tracking-wide", "tertiary");
 /**
- * Running text. `span` (inline; `as="p"` for a paragraph), text-sm/5 normal, secondary. A block of it
+ * Running text. `span` (inline; `as="p"` for a paragraph), text-sm/5 normal, secondary (text-base/7
+ * inside a `Prose`). A block of it
  * stops at a readable line length (`max-w-[72ch]`), wherever it sits. `strong` emphasises it:
  * font-medium in the primary ink, unless `color` or `tone` says otherwise.
  * `preserveNewlines` keeps the line breaks in the text (a user-typed note); runs of spaces still collapse.
@@ -128,7 +169,8 @@ export const Overline = inlineRole("Overline", "span", "text-xs font-semibold up
  * fixes a width and right-aligns the figure in it (a column of amounts lines up); it does not take `align`.
  */
 export function Text({ strong, preserveNewlines, minWidth, italic, breakWords, ...props }) {
-    return pinned("span", cx(textVariant(strong, preserveNewlines, true), italic && "italic", breakWords && "break-words", minWidth === "amount" && "inline-block min-w-24 text-end"), strong ? "default" : "secondary", 
+    const prose = useProse();
+    return pinned("span", cx(textVariant(strong, preserveNewlines, true, prose), italic && "italic", breakWords && "break-words", minWidth === "amount" && "inline-block min-w-24 text-end"), strong ? "default" : "secondary", 
     // An amount is always in tabular figures, so it lines up; `numeric` already emits them.
     { ...props, numeric: props.numeric || minWidth === "amount" });
 }
@@ -137,10 +179,10 @@ export function Text({ strong, preserveNewlines, minWidth, italic, breakWords, .
  * it runs the width of its dialog. Internal; not exported from the package.
  */
 export function HeaderText({ children }) {
-    return pinned("p", textVariant(false, false, false), "secondary", { children });
+    return pinned("p", textVariant(false, false, false, useProse()), "secondary", { children });
 }
-function textVariant(strong, preserveNewlines, measure) {
-    return cx(preserveNewlines && "whitespace-pre-line", measure && "max-w-[72ch]", "text-sm/5", strong ? "font-medium" : "font-normal");
+function textVariant(strong, preserveNewlines, measure, prose) {
+    return cx(preserveNewlines && "whitespace-pre-line", measure && "max-w-[72ch]", prose ? "text-base/7" : "text-sm/5", strong ? "font-medium" : "font-normal");
 }
 /**
  * Fine print / metadata. `span` (inline; `as="p"` for a block), text-xs/4 normal, tertiary. Takes `tone`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hackcove/ui-react",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "Hack Cove React components: primitives, typography roles and a safe Markdown renderer, written against Tailwind v4 utilities. Pair with a theme from @hackcove/themes.",
   "keywords": [
     "components",